/* * Theme Custom Styles
 * APK Templates WordPress Theme
 */

body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f8fafc; /* Slate-50 */
    overflow-x: hidden;
}

/* ==========================================
   Utility Classes 
   ========================================== */

/* Custom Scrollbar for horizontal scrolling containers (like thumbnails) */
.hide-scrollbar::-webkit-scrollbar { 
    display: none; 
}
.hide-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Custom dotted grid background for the Home Page */
.bg-grid-pattern {
    background-color: #ffffff;
    background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px); /* slate-300 dots */
    background-size: 32px 32px;
}

/* "View & Buy" product card CTA — arrow slides right on hover, subtle shine sweep */
.an1-buy-btn-arrow { transform: translateX(0); }
.an1-buy-btn:hover .an1-buy-btn-arrow { transform: translateX(4px); }
.an1-buy-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}
.an1-buy-btn:hover::before { left: 125%; }

/* ==========================================
   Product Page Custom Elements 
   ========================================== */

/* Custom Radio Button Styles for License Selection */
.license-radio:checked + div {
    border-color: #3b82f6; /* Blue-500 */
    background-color: #eff6ff; /* Blue-50 */
}

.license-radio:checked + div .radio-circle {
    border-color: #3b82f6;
    background-color: #3b82f6;
}

.license-radio:checked + div .radio-circle::after {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; 
    height: 8px;
    border-radius: 50%;
    background: white;
}

/* Review Star Input styling */
.star-rating-input svg { 
    cursor: pointer; 
    transition: color 0.2s ease-in-out; 
}

/* * This clever CSS trick highlights the hovered star 
 * AND all the stars before it in the DOM sequence 
 */
.star-rating-input svg:hover, 
.star-rating-input svg:hover ~ svg { 
    color: #facc15 !important; /* Yellow-400 */
}

/* Reverse the flex direction in HTML to make the hover trick work left-to-right */
.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}