/* Custom Galaxy Brand Web Font */
@font-face {
    font-family: 'Galaxy';
    src: url('../assets/fonts/GalaxyBT.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GalaxyBT';
    src: url('../assets/fonts/GalaxyBT.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}


/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #2e7d32;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1b5e20;
}

/* Modal animation */
.modal-enter {
    animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Phosphor Star Rating Colors */
.text-amber-400 {
    color: #fbbf24 !important;
}
.hover\:text-amber-400:hover {
    color: #fbbf24 !important;
}

/* Rating Progress Bar Styles */
.bg-stone-100 {
    background-color: #f5f5f4 !important;
}
.bg-amber-400 {
    background-color: #fbbf24 !important;
}
.h-2\.5 {
    height: 10px !important;
}

/* Modal Overlay Backdrop & Sizing Overrides */
.bg-black {
    background-color: #000000 !important;
}
.bg-opacity-40 {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Default / Desktop Styles for Review Modal (>= 1024px) */
#reviewModal .relative {
    width: 92% !important;
    max-width: 380px !important; /* Compact design */
    margin: auto !important;
    padding: 24px !important;
}

#reviewModal h3 {
    font-size: 1.125rem !important;
    margin-bottom: 12px !important;
    padding-right: 32px !important; /* Avoid overlap with Close button */
}

#reviewModal #modal-product-name {
    font-size: 0.875rem !important;
}

#reviewModal label {
    font-size: 0.85rem !important;
    margin-bottom: 4px !important;
}

#reviewModal .modal-star-btn {
    font-size: 1.75rem !important;
}

#reviewModal input[type="text"],
#reviewModal textarea {
    font-size: 0.875rem !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
}

#reviewModal textarea {
    height: 80px !important;
}

#reviewModal button {
    font-size: 0.875rem !important;
}

#reviewModal #submit-modal-review-btn,
#reviewModal button[onclick="toggleReviewModal(false)"] {
    padding: 8px 16px !important;
    border-radius: 8px !important;
}

#reviewModal button.absolute {
    font-size: 1.25rem !important;
}

/* Tablet Responsive Overrides (max-width: 1023px) */
@media (max-width: 1023px) {
    #reviewModal .relative {
        max-width: 350px !important;
        padding: 18px !important;
    }
    
    #reviewModal h3 {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
        padding-right: 28px !important; /* Avoid overlap with Close button */
    }
    
    #reviewModal #modal-product-name {
        font-size: 0.8rem !important;
    }
    
    #reviewModal label {
        font-size: 0.775rem !important;
    }
    
    #reviewModal .modal-star-btn {
        font-size: 1.5rem !important;
    }
    
    #reviewModal input[type="text"],
    #reviewModal textarea {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }
    
    #reviewModal textarea {
        height: 70px !important;
    }
    
    #reviewModal #submit-modal-review-btn,
    #reviewModal button[onclick="toggleReviewModal(false)"] {
        padding: 7px 12px !important;
    }
}

/* Mobile Responsive Overrides (max-width: 640px) */
@media (max-width: 640px) {
    #reviewModal .relative {
        max-width: 310px !important;
        padding: 14px !important;
        border-radius: 12px !important;
    }
    
    #reviewModal h3 {
        font-size: 0.875rem !important;
        margin-bottom: 8px !important;
        padding-right: 24px !important; /* Avoid overlap with Close button */
    }
    
    #reviewModal #modal-product-name {
        font-size: 0.725rem !important;
    }
    
    #reviewModal label {
        font-size: 0.7rem !important;
    }
    
    #reviewModal .modal-star-btn {
        font-size: 1.25rem !important;
    }
    
    #reviewModal input[type="text"],
    #reviewModal textarea {
        font-size: 0.725rem !important;
        padding: 5px 8px !important;
    }
    
    #reviewModal textarea {
        height: 60px !important;
    }
    
    #reviewModal #submit-modal-review-btn,
    #reviewModal button[onclick="toggleReviewModal(false)"] {
        padding: 6px 10px !important;
        border-radius: 6px !important;
    }
    
    #reviewModal button.absolute {
        font-size: 1.1rem !important;
    }
}

/* Mobile Header Optimizations (max-width: 767px) */
@media (max-width: 767px) {
    .header-brand-link {
        gap: 6px !important;
    }
    .header-brand-logo {
        height: 28px !important; /* Smaller logo for mobile view */
        width: auto !important;
    }
    .header-brand-text {
        font-size: 1.125rem !important; /* text-lg equivalent for mobile view */
    }
    .header-actions-wrap {
        gap: 8px !important; /* Smaller gap between icons on mobile */
    }
    .header-cart-btn {
        padding: 6px 10px !important; /* Smaller padding */
        gap: 4px !important;
    }
    .header-cart-btn i {
        font-size: 1.25rem !important; /* text-xl equivalent */
    }
    .header-menu-btn {
        padding: 6px !important;
    }
    .header-menu-btn i {
        font-size: 1.25rem !important; /* text-xl equivalent */
    }
}