/* ============================================
   Kyuhub Main Stylesheet
   ============================================ */

/* ============================================
   Kyuhub Main Stylesheet
   ============================================ */

/* 1. Header structure - FIXED AND STICKY ON ALL VIEWPORTS */
header.fixed-top {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
}
.navbar, .category-bar {
    position: relative !important;
    top: 0 !important;
    width: 100%;
    /* Prevents flex items from unexpectedly shrinking on mobile */
    flex-shrink: 0; 
}

/* 2. Dynamic spacing - PERFECT EXTRA PROTECTION FOR FIXED NAVIGATION GRID */
body.has-nav  { padding-top: 160px; }
body.no-nav   { padding-top: 0 !important; }

@media (max-width: 576px) {
    /* Guarantees body content starts below the stacked mobile navigation bars */
    body.has-nav { 
        padding-top: 215px !important; 
    }
    
    /* Configures distinct mobile notification bounds safely outside the navigation fold */
    .alert {
        margin-top: 15px !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        position: relative;
        z-index: 1040;
    }
}


/* 3. Hide category scrollbar */
.category-scroll-container { -ms-overflow-style: none; scrollbar-width: none; }
.category-scroll-container::-webkit-scrollbar { display: none; }

/* 4. Mobile card */
@media (max-width: 576px) {
    .mobile-card { display:flex !important; flex-direction:column !important; height:auto !important; min-height:220px !important; }
    .mobile-img  { height:100px !important; object-fit:contain !important; }
    .small-mobile-text { font-size:0.9rem !important; font-weight:bold !important; }
}

/* 5. Location badge */
.index-location-badge {
    position: absolute !important;
    top: 6px !important; left: 6px !important;
    z-index: 5 !important;
    background: rgba(0,0,0,0.6) !important;
    color: white !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    font-size: 0.65rem !important;
    display: flex !important;
    align-items: center !important;
}

/* 6. Page loader */
#page-loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}
.loading-logo { animation: pulse 1.5s infinite ease-in-out; height: 60px; width: auto; }
@keyframes pulse {
    0%   { transform: scale(0.95); opacity: 0.7; }
    50%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

/* 7. Star rating */
.star-rating { direction: rtl; }
.star-rating input { display: none; }
.star-rating label { color: #ddd; font-size: 1.5rem; cursor: pointer; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #ffc107; }

/* 8. Welcome page */
@keyframes kyuhubFade {
    0%   { opacity: 0; transform: scale(1.0); }
    10%  { opacity: 1; }
    30%  { opacity: 1; }
    40%  { opacity: 0; transform: scale(1.1); }
    100% { opacity: 0; }
}

/* 9. Misc */
.price-tag { font-size: 1rem; }
.product-metadata { font-size: 0.8rem; color: #888; margin: 4px 0; }

#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    display: none; /* Hidden by default until scrolled */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}