/* =====================================================
   ACCESSORIES PAGE - MOBILE POLISH PASS v3.0
   =====================================================
   Route-specific styles for /accessories only
   Breakpoints: 320 / 360 / 390 / 414
   
   ⚠️ All styles scoped to .page-accessories class
   ===================================================== */

/* =====================================================
   1. BASE MOBILE RESET
   ===================================================== */

.page-accessories {
    overflow-x: hidden !important;
}

.page-accessories *,
.page-accessories *::before,
.page-accessories *::after {
    box-sizing: border-box;
}

.page-accessories body,
.page-accessories .main-content,
.page-accessories .products-grid {
    max-width: 100vw;
    overflow-x: hidden;
}

/* =====================================================
   2. VIEWERS BADGE - INLINE STRIP (NOT OVERLAY)
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .viewers-badge {
        /* Convert to inline strip above grid */
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 auto 12px !important;
        padding: 6px 14px !important;
        height: 36px !important;
        background: rgba(19, 19, 26, 0.9) !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 18px !important;
        font-size: 0.75rem !important;
        gap: 6px !important;
        box-shadow: none !important;
        
        /* Remove fixed positioning */
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        z-index: 1 !important;
    }
    
    /* Container for viewers badge - center it */
    .page-accessories .page-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* =====================================================
   3. WHEEL WIDGET - SMALL FLOATING BUTTON
   Note: footerReservePx = 120px to avoid footer overlap
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .spin-wheel-btn,
    .page-accessories .wheel-trigger,
    .page-accessories .lucky-wheel-btn,
    .page-accessories [class*="wheel-container"],
    .page-accessories [class*="lucky-wheel"] {
        position: fixed !important;
        /* Reserve space for footer: 120px + safe area */
        bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        right: auto !important;
        width: 46px !important;
        height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 1.1rem !important;
        z-index: 88 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
        box-shadow: 0 4px 15px rgba(225, 29, 72, 0.35) !important;
        border: none !important;
        overflow: hidden !important;
    }
    
    /* Hide text labels */
    .page-accessories .spin-wheel-btn span:not(.fa):not([class*="icon"]),
    .page-accessories .wheel-trigger span:not(.fa):not([class*="icon"]),
    .page-accessories [class*="wheel"] > span:not(.fa),
    .page-accessories [class*="wheel"] > div:not([class*="icon"]) {
        display: none !important;
    }
    
    /* RTL support */
    [dir="rtl"] .page-accessories .spin-wheel-btn,
    [dir="rtl"] .page-accessories .wheel-trigger,
    [dir="rtl"] .page-accessories [class*="wheel-container"] {
        left: auto !important;
        right: 16px !important;
    }
}

/* Theme Toggle - Stack above wheel */
@media (max-width: 768px) {
    .page-accessories .theme-toggle {
        position: fixed !important;
        /* Above wheel: 136px + 56px = 192px */
        bottom: calc(192px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        right: auto !important;
        width: 42px !important;
        height: 42px !important;
        z-index: 87 !important;
        background: rgba(19, 19, 26, 0.9) !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
    }
    
    [dir="rtl"] .page-accessories .theme-toggle {
        left: auto !important;
        right: 16px !important;
    }
}

/* Live Notification - Repositioned above theme toggle */
@media (max-width: 768px) {
    .page-accessories .live-notification {
        position: fixed !important;
        /* Above theme toggle: 192px + 52px = 244px */
        bottom: calc(244px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        right: 16px !important;
        max-width: calc(100vw - 32px) !important;
        z-index: 86 !important;
    }
}

/* =====================================================
   4. HEADER / SEARCH / CATEGORIES
   ===================================================== */

@media (max-width: 768px) {
    /* Header divider */
    .page-accessories .header {
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    }
    
    /* Search bar - 44px height */
    .page-accessories .search-box,
    .page-accessories .search-input,
    .page-accessories [type="search"] {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 0.9rem !important;
        border-radius: 22px !important;
    }
    
    /* Promo banner compact */
    .page-accessories .promo-banner {
        padding: 6px 12px !important;
        font-size: 0.7rem !important;
        gap: 6px !important;
    }
    
    .page-accessories .promo-banner .countdown {
        display: none !important;
    }
    
    .page-accessories .promo-banner .coupon-code {
        padding: 2px 8px !important;
        font-size: 0.65rem !important;
    }
}

/* =====================================================
   5. CATEGORY PILLS
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .categories {
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    }
    
    .page-accessories .categories-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px 16px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .page-accessories .categories-container::-webkit-scrollbar {
        display: none !important;
    }
    
    .page-accessories .category-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        scroll-snap-align: start !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 14px !important;
        font-size: 0.85rem !important;
        border-radius: 19px !important;
    }
}

/* =====================================================
   6. MAIN CONTENT & PAGE HEADER
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .main-content {
        padding: 16px !important;
        padding-bottom: 120px !important;
    }
    
    .page-accessories .page-header {
        margin-bottom: 16px !important;
        padding-top: 8px !important;
        text-align: center !important;
    }
    
    .page-accessories .page-title {
        font-size: 1.3rem !important;
        margin-bottom: 4px !important;
    }
    
    .page-accessories .page-title i {
        display: none !important;
    }
    
    .page-accessories .page-subtitle {
        font-size: 0.8rem !important;
        margin-bottom: 10px !important;
    }
    
    .page-accessories .back-link {
        display: none !important;
    }
}

/* =====================================================
   7. PRODUCTS GRID - ALWAYS 2 COLUMNS ON MOBILE
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
    }
}

/* Only go single column on VERY narrow screens (< 340px) */
@media (max-width: 340px) {
    .page-accessories .products-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* Override the problematic 480px breakpoint from inline styles */
@media (max-width: 480px) {
    .page-accessories .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .page-accessories .product-card {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
    }
    
    .page-accessories .product-gallery {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1/1 !important;
    }
    
    .page-accessories .product-info {
        padding: 10px 12px 12px !important;
    }
}

/* =====================================================
   8. PRODUCT CARD STRUCTURE
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .product-card {
        display: flex !important;
        flex-direction: column !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        position: relative !important;
        background: var(--color-surface) !important;
        border: 1px solid rgba(255,255,255,0.05) !important;
    }
    
    .page-accessories .product-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    .page-accessories .product-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s !important;
    }
}

/* =====================================================
   9. IMAGE AREA - FULL IMAGE (NO CROP)
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .product-gallery {
        position: relative !important;
        width: 100% !important;
        background: transparent !important;
        overflow: hidden !important;
    }
    
    .page-accessories .gallery-main {
        /* Fixed aspect ratio for consistent card heights */
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* Inner padding so image doesn't touch edges */
        padding: 14px !important;
        /* Subtle gradient background - theme consistent */
        background: linear-gradient(
            160deg,
            rgba(30, 30, 42, 0.5) 0%,
            rgba(22, 22, 32, 0.7) 50%,
            rgba(30, 30, 42, 0.5) 100%
        ) !important;
        border-radius: 14px 14px 0 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.04) !important;
        overflow: hidden !important;
    }
    
    .page-accessories .gallery-main img {
        /* CRITICAL: Show full image without cropping */
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;      /* NO crop - full image */
        object-position: center !important;  /* Center the image */
        display: block !important;
        border-radius: 8px !important;
        /* Subtle shadow for depth */
        filter: drop-shadow(0 3px 10px rgba(0,0,0,0.12)) !important;
    }
    
    /* Hide thumbnails */
    .page-accessories .gallery-thumbs {
        display: none !important;
    }
    
    /* Image counter - minimal */
    .page-accessories .image-count {
        position: absolute !important;
        bottom: 8px !important;
        left: 8px !important;
        right: auto !important;
        background: rgba(0,0,0,0.5) !important;
        padding: 2px 6px !important;
        border-radius: 8px !important;
        font-size: 0.6rem !important;
        z-index: 3 !important;
    }
    
    [dir="rtl"] .page-accessories .image-count {
        left: auto !important;
        right: 8px !important;
    }
}

/* Light mode image area */
@media (max-width: 768px) {
    .page-accessories.light-mode .gallery-main,
    .light-mode .page-accessories .gallery-main {
        background: linear-gradient(
            160deg,
            rgba(248, 248, 250, 0.95) 0%,
            rgba(242, 242, 245, 0.98) 50%,
            rgba(248, 248, 250, 0.95) 100%
        ) !important;
        border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    }
}

/* =====================================================
   10. WISHLIST BUTTON - SMALL & CIRCULAR
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .wishlist-btn {
        position: absolute !important;
        top: 10px !important;
        /* RTL: end = left, LTR: end = right */
        left: 10px !important;
        right: auto !important;
        /* Small & circular */
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        border-radius: 50% !important;
        /* Subtle background */
        background: rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(6px) !important;
        border: none !important;
        /* Icon size */
        font-size: 0.85rem !important;
        color: rgba(255,255,255,0.9) !important;
        /* Proper z-index */
        z-index: 5 !important;
        /* Center icon */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        /* Light shadow only */
        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
        transition: transform 0.15s, background 0.15s !important;
    }
    
    [dir="ltr"] .page-accessories .wishlist-btn {
        left: auto !important;
        right: 10px !important;
    }
    
    .page-accessories .wishlist-btn:active {
        transform: scale(0.9) !important;
    }
    
    .page-accessories .wishlist-btn.active {
        background: var(--color-primary, #e11d48) !important;
        color: white !important;
    }
    
    .page-accessories .wishlist-btn i {
        font-size: 0.85rem !important;
        line-height: 1 !important;
    }
}

/* Light mode wishlist */
@media (max-width: 768px) {
    .page-accessories.light-mode .wishlist-btn,
    .light-mode .page-accessories .wishlist-btn {
        background: rgba(255, 255, 255, 0.7) !important;
        color: var(--color-text, #1a1a1a) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
}

/* =====================================================
   11. BADGES - COMPACT (MAX 2 VISIBLE)
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .discount-badge,
    .page-accessories .hot-badge,
    .page-accessories .new-badge {
        position: absolute !important;
        z-index: 4 !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        padding: 3px 6px !important;
        border-radius: 6px !important;
        line-height: 1.2 !important;
    }
    
    /* Primary badge - top start corner */
    .page-accessories .discount-badge {
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
    }
    
    [dir="ltr"] .page-accessories .discount-badge {
        left: 10px !important;
        right: auto !important;
    }
    
    /* Secondary badges - below or hidden */
    .page-accessories .hot-badge,
    .page-accessories .new-badge {
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
    }
    
    [dir="ltr"] .page-accessories .hot-badge,
    [dir="ltr"] .page-accessories .new-badge {
        left: 10px !important;
        right: auto !important;
    }
    
    /* Stack badges when both exist */
    .page-accessories .product-gallery:has(.discount-badge) .hot-badge,
    .page-accessories .product-gallery:has(.discount-badge) .new-badge {
        top: 32px !important;
    }
    
    /* Hide category badge on mobile */
    .page-accessories .category-badge {
        display: none !important;
    }
    
    /* Third badge and beyond - hide */
    .page-accessories .product-gallery > [class*="badge"]:nth-of-type(n+3) {
        display: none !important;
    }
}

/* =====================================================
   12. PRODUCT INFO
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .product-info {
        padding: 10px 12px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        background: var(--color-surface) !important;
    }
    
    .page-accessories .product-name {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin: 0 !important;
        min-height: 2.3em !important;
        max-height: 2.7em !important;
    }
    
    .page-accessories .product-description {
        display: none !important;
    }
    
    .page-accessories .product-rating {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        margin: 2px 0 !important;
    }
    
    .page-accessories .product-stars i {
        font-size: 0.55rem !important;
    }
    
    .page-accessories .rating-avg {
        font-size: 0.65rem !important;
        font-weight: 600 !important;
    }
    
    .page-accessories .rating-count,
    .page-accessories .sold-count {
        display: none !important;
    }
    
    .page-accessories .shipping-badge,
    .page-accessories .guarantee-badge,
    .page-accessories .bundle-offer {
        display: none !important;
    }
}

/* =====================================================
   13. PRICE & ACTIONS
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .product-footer {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-top: auto !important;
        padding-top: 4px !important;
    }
    
    .page-accessories .price-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .page-accessories .product-price {
        font-size: 1rem !important;
        font-weight: 800 !important;
        color: var(--color-primary) !important;
        line-height: 1.2 !important;
    }
    
    .page-accessories .product-price::before {
        font-size: 0.65rem !important;
    }
    
    .page-accessories .original-price {
        font-size: 0.65rem !important;
        line-height: 1 !important;
        margin-top: 1px !important;
    }
    
    .page-accessories .quick-add-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 10px !important;
        font-size: 0.85rem !important;
        flex-shrink: 0 !important;
    }
}

/* =====================================================
   14. SINGLE COLUMN LAYOUT (< 340px only - very narrow)
   ===================================================== */

@media (max-width: 340px) {
    .page-accessories .product-card {
        flex-direction: row !important;
        display: grid !important;
        grid-template-columns: 110px 1fr !important;
        min-height: 110px !important;
    }
    
    .page-accessories .product-gallery {
        width: 110px !important;
        min-width: 110px !important;
        flex-shrink: 0 !important;
    }
    
    .page-accessories .gallery-main {
        height: 110px !important;
        aspect-ratio: auto !important;
        padding: 10px !important;
        background: linear-gradient(
            160deg,
            rgba(30, 30, 42, 0.5) 0%,
            rgba(22, 22, 32, 0.7) 50%,
            rgba(30, 30, 42, 0.5) 100%
        ) !important;
    }
    
    .page-accessories .gallery-main img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }
    
    [dir="rtl"] .page-accessories .gallery-main {
        border-radius: 0 14px 14px 0 !important;
    }
    
    [dir="ltr"] .page-accessories .gallery-main {
        border-radius: 14px 0 0 14px !important;
    }
    
    .page-accessories .product-info {
        flex: 1 !important;
        padding: 10px !important;
        justify-content: space-between !important;
    }
    
    .page-accessories .product-name {
        font-size: 0.85rem !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    .page-accessories .wishlist-btn {
        top: 8px !important;
        left: 8px !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        font-size: 0.7rem !important;
    }
    
    [dir="ltr"] .page-accessories .wishlist-btn {
        left: auto !important;
        right: 8px !important;
    }
    
    .page-accessories .discount-badge,
    .page-accessories .hot-badge,
    .page-accessories .new-badge {
        top: 8px !important;
        right: 8px !important;
        font-size: 0.55rem !important;
        padding: 2px 4px !important;
    }
    
    [dir="ltr"] .page-accessories .discount-badge,
    [dir="ltr"] .page-accessories .hot-badge,
    [dir="ltr"] .page-accessories .new-badge {
        left: 8px !important;
        right: auto !important;
    }
}

/* =====================================================
   15. MODAL - BOTTOM SHEET
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    
    .page-accessories .product-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        border-radius: 20px 20px 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
    }
    
    .page-accessories .product-modal::before {
        content: '' !important;
        display: block !important;
        width: 40px !important;
        height: 4px !important;
        background: rgba(255,255,255,0.3) !important;
        border-radius: 2px !important;
        margin: 10px auto !important;
    }
}

/* =====================================================
   16. CART SIDEBAR
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
    }
}

/* =====================================================
   17. FLOATING CART BUTTON
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .floating-cart,
    .page-accessories .cart-float-btn {
        position: fixed !important;
        /* Reserve space for footer: 136px */
        bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
        left: auto !important;
        z-index: 89 !important;
        border-radius: 50px !important;
    }
    
    [dir="rtl"] .page-accessories .floating-cart,
    [dir="rtl"] .page-accessories .cart-float-btn {
        right: auto !important;
        left: 16px !important;
    }
}

/* =====================================================
   17.1 FOOTER - ENSURE NO OVERLAP
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .site-footer {
        position: relative !important;
        z-index: 50 !important; /* Below floating widgets but visible */
        margin-top: 40px !important;
        padding: 20px 16px !important;
    }
    
    /* Ensure main content has enough padding for footer */
    .page-accessories .main-content {
        padding-bottom: 200px !important; /* Space for footer + floating widgets */
    }
}

/* =====================================================
   18. LANGUAGE CONSISTENCY FIX
   ===================================================== */

/* Ensure consistent font for mixed content */
.page-accessories {
    font-family: 'Tajawal', 'Heebo', -apple-system, sans-serif !important;
}

/* RTL text alignment */
[dir="rtl"] .page-accessories .product-name,
[dir="rtl"] .page-accessories .product-info,
[dir="rtl"] .page-accessories .page-title,
[dir="rtl"] .page-accessories .page-subtitle {
    text-align: right !important;
}

[dir="ltr"] .page-accessories .product-name,
[dir="ltr"] .page-accessories .product-info,
[dir="ltr"] .page-accessories .page-title,
[dir="ltr"] .page-accessories .page-subtitle {
    text-align: left !important;
}

/* Search placeholder - inherit direction */
.page-accessories .search-box::placeholder,
.page-accessories .search-input::placeholder {
    text-align: inherit !important;
}

/* =====================================================
   19. SAFE AREAS
   ===================================================== */

@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .page-accessories .main-content {
            padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* =====================================================
   20. PERFORMANCE - DISABLE HEAVY ANIMATIONS
   ===================================================== */

@media (max-width: 768px) {
    .page-accessories .product-card,
    .page-accessories .product-card * {
        transition: none !important;
    }
    
    .page-accessories .product-card:active {
        transition: transform 0.1s ease !important;
    }
    
    .page-accessories .wishlist-btn {
        transition: transform 0.15s, background 0.15s !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-accessories * {
        animation: none !important;
        transition: none !important;
    }
}