/* 
   Premium Theme Overrides 
   Focus: Glassmorphism, Premium Dark UI, Cyber Accents 
*/

:root {
    /* Refined Color Palette */
    --background: #05090A;
    --foreground: #F8F9FA;
    --surface: #0F1B1E;
    --primary: #5BC0BE;
    --primary-foreground: #05090A;

    /* Glassmorphism Tokens */
    --glass-bg: rgba(15, 27, 30, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(12px) saturate(160%);
    --crystal-border: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, var(--primary) 50%, rgba(255, 255, 255, 0.1) 100%);

    /* Effects */
    --premium-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
    --cyber-glow: 0 0 15px rgba(91, 192, 190, 0.3);
    --glass-border-soft: rgba(255, 255, 255, 0.04);
}

/* Glassmorphism Utility */
.premium-glass {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    box-shadow: var(--premium-shadow) !important;
}

.premium-glass-sm {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border-soft) !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
}

html,
body {
    background-color: rgba(0, 0, 0, 0.62) !important;
    /* Semi-transparent black overlay */
    background-image: none !important;
}

main {
    background-color: transparent !important;
}

body {
    color: var(--foreground);
    font-family: 'Cairo', sans-serif;
    -webkit-font-smoothing: antialiased;
    position: relative;
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://i.pinimg.com/originals/90/70/32/9070324cdfc07c68d60eed0c39e77573.gif');
    background-size: cover;
    background-position: center;
    filter: blur(6px);
    /* Specific blur between 5%-7% */
    z-index: -1;
    transform: scale(1.1);
    opacity: 0.7;
    /* Slightly more visible for the pixel effect */
}

/* Base Overrides for Theme Consistency */
.bg-secondary {
    background-color: var(--surface) !important;
}

footer,
#footer {
    background: var(--surface) !important;
    border-top: 1px solid var(--glass-border) !important;
}

footer *,
#footer * {
    color: var(--foreground) !important;
}

footer a,
#footer a {
    opacity: 0.8;
    transition: opacity 0.2s;
}

footer a:hover,
#footer a:hover {
    opacity: 1;
    color: var(--primary) !important;
}

/* Glass Header Implementation */
.glass-header {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    transition: all 0.3s ease-in-out;
}

/* Premium Navigation Links */
nav a {
    position: relative;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: var(--primary);
    transition: width 0.3s ease;
    box-shadow: var(--cyber-glow);
}

nav a:hover {
    color: var(--primary);
}

nav a:hover::after {
    width: 100%;
}

/* Product Card - Premium Skin */
[data-product-card] {
    background: var(--surface) !important;
    border: 1px solid var(--glass-border) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

[data-product-card]:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), var(--cyber-glow) !important;
    border-color: rgba(91, 192, 190, 0.4) !important;
}

/* Premium Buttons */
.btn-filled {
    position: relative;
    overflow: hidden;
    background: var(--primary) !important;
    color: var(--primary-foreground) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none !important;
}

.btn-filled::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.5s;
}

.btn-filled:hover::before {
    left: 100%;
}

.btn-filled:hover {
    box-shadow: 0 0 20px rgba(91, 192, 190, 0.5) !important;
    opacity: 1 !important;
}

/* Inputs Refinement */
.form-input,
.form-textarea {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--glass-border) !important;
    color: white !important;
}

.form-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(91, 192, 190, 0.1) !important;
}

/* Typography Refinements */
h1,
h2,
h3,
h4,
.text-3xl,
.text-2xl {
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Sticky CTA Skin */
[data-sticky-cta] {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-top: 1px solid var(--glass-border) !important;
}

/* Skeleton Premium Finish */
.animate-pulse {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* --- Comprehensive Glassmorphism Overrides --- */

/* Root and Global forced colors */
:root {
    --glass-bg: rgba(15, 27, 30, 0.65);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(12px) saturate(180%);
}

/* Force all text in interactive/content areas to be white/readable */
.product-details-column *,
#additional-info *,
#reviews *,
footer *,
#footer *,
.loyalty-points-products-section * {
    color: white !important;
}

/* Utility for glass - can be used via selectors */
.glass-effect {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--premium-shadow) !important;
}

/* 1. Header & Navigation with RGB Line */
header,
.glass-header {
    background: rgba(15, 27, 30, 0.8) !important;
    backdrop-filter: var(--glass-blur) !important;
    position: relative;
    /* Ensure after element sticks to bottom */
}

@keyframes rgb-glow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

header::after,
.glass-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
            #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
    background-size: 400% 100%;
    animation: rgb-glow 6s linear infinite;
    z-index: 100;
}

/* 2. Product Information Area (Top Details) */
.product-details-column>#header {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
}

/* 3. Product Description (Prose) */
.product-details-column>.prose {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin-top: 1rem;
}

/* 4. Quantity and Add to Cart Area */
#product-form,
[data-quantity-wrapper] {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--glass-border-soft);
}

.qty-input {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    border: 1px solid var(--glass-border) !important;
}

/* 5. Loyalty and Payment Widgets */
.loyalty-points-products-section {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid rgba(91, 192, 190, 0.3) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    margin-top: 1rem;
}

.tamara-product-widget {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    padding: 0 !important;
}

/* 6. Accordions (FAQ & Features) */
#additional-info button[command="--toggle"] {
    background: rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 10px !important;
    margin-bottom: 0.75rem;
}

#additional-info el-disclosure>div,
#faq el-disclosure>div {
    background: rgba(15, 27, 30, 0.5) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem;
}

/* 7. Reviews Section — Full Glass Background */
.s-comments,
#reviews,
[id*="reviews"],
[class*="s-comments"] {
    background: rgba(15, 27, 30, 0.55) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    padding: 2.5rem !important;
    margin-top: 1.5rem !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35) !important;
}

/* Rating summary inner box */
.s-comments .bg-secondary,
#reviews .bg-secondary,
#reviews > .mt-6,
#reviews .flex.shrink-0.flex-col.gap-4,
#reviews .flex.min-w-0.flex-1.flex-col.gap-2 {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
}

/* Big rating number — cyan glow */
.s-comments .text-4xl,
#reviews .text-4xl {
    color: #00e5ff !important;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.45) !important;
    font-weight: 900 !important;
}

/* Stars gold */
.s-comments .text-primary svg,
#reviews .text-primary svg {
    color: #ffb400 !important;
}

/* Individual review hover */
.s-comments > div > div > div,
#reviews > div > div > div {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 16px 8px !important;
    transition: background 0.3s ease !important;
    border-radius: 10px;
}
.s-comments > div > div > div:hover,
#reviews > div > div > div:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Reviewer names white */
.s-comments .font-bold,
#reviews .font-bold {
    color: #fff !important;
}

/* Review text */
.s-comments p,
#reviews p {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Dates dimmed */
.s-comments time,
.s-comments .text-muted-foreground,
#reviews time,
#reviews .text-muted-foreground {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Write review button */
.s-comments .btn,
#reviews .btn {
    border-color: #00e5ff !important;
    color: #00e5ff !important;
    border-radius: 12px !important;
}
.s-comments .btn:hover,
#reviews .btn:hover {
    background: rgba(0, 229, 255, 0.15) !important;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.25) !important;
}

/* Progress bars */
.bg-secondary.h-1.w-full.rounded,
.s-comments .bg-muted,
#reviews .bg-muted {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
}
.s-comments .bg-primary,
#reviews .bg-primary {
    background: linear-gradient(90deg, #00b8d4, #00e5ff) !important;
    border-radius: 8px !important;
}

/* 8. Footer */
footer,
#footer {
    background: rgba(5, 9, 10, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border-top: 2px solid var(--primary) !important;
}

/* --- Interactive & Smooth Animations --- */

/* Global Transition for all interactive elements */
button,
.btn,
a,
[data-product-card],
.qty-input,
.form-input,
.form-textarea,
.loyalty-points-products-section,
#additional-info button[command="--toggle"] {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 1. Buttons - Smooth Lift and Glow */
.btn:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(91, 192, 190, 0.3) !important;
}

.btn:active {
    transform: translateY(-1px) scale(0.98) !important;
}

/* 2. Product Cards - Extra Smooth elevation */
[data-product-card]:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 20px rgba(91, 192, 190, 0.2) !important;
    border-color: var(--primary) !important;
}

/* 3. Navigation & Links - Pulse Glow */
nav a:hover,
.text-link:hover {
    color: var(--primary) !important;
    text-shadow: 0 0 10px rgba(91, 192, 190, 0.5);
}

/* 4. Inputs & Forms - Focus Depth */
.form-input:hover,
.form-textarea:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.form-input:focus,
.form-textarea:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: scale(1.01);
}

/* 5. Quantitiy Selectors - Interactive Pulsing */
[data-quantity-wrapper] button:hover {
    background: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

/* 6. Social Icons - Rotating Glow */
.flex.gap-3 a:hover {
    transform: rotate(8deg) scale(1.2) !important;
    color: var(--primary) !important;
}

/* 7. Image Gallery - Focus Zoom */
.product-gallery-column img:hover {
    transform: scale(1.03) !important;
    cursor: zoom-in;
}

/* 8. Accordion Toggle Hover */
#additional-info button[command="--toggle"]:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    padding-inline-start: 1.5rem !important;
    /* Slight internal movement */
}

/* --- Discount Badge Animation --- */

@keyframes pulse-glow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.4);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.6);
        background: rgba(34, 197, 94, 0.3) !important;
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.4);
    }
}

[data-product-discount],
.bg-success\/20.text-success {
    display: inline-block !important;
    animation: pulse-glow 2.5s ease-in-out infinite !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    font-weight: 700 !important;
    border-radius: 6px !important;
}

/* --- Homepage Specific & Global Enhancements --- */

/* 2. Product Grid & Cards on Homepage */
[data-product-card],
.product-item {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid var(--glass-border-soft) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

[data-product-card]:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    transform: translateY(-8px) scale(1.01) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), var(--cyber-glow) !important;
}

/* 2b. Product Card Images - Uniform size, no cropping */
[data-product-card] a[class*="aspect-"] {
    aspect-ratio: 3/4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

[data-product-card] img,
.product-item img {
    max-width: 90% !important;
    max-height: 90% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 8px !important;
    object-fit: contain !important;
    transition: transform 0.4s ease !important;
}

[data-product-card]:hover img {
    transform: scale(1.05) !important;
    /* Slight zoom on hover */
}

/* 3. Action Buttons (Add to Cart on Home) */
.btn-outlined,
[data-add-to-cart] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--primary) !important;
    color: white !important;
    backdrop-filter: blur(5px) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.btn-outlined:hover {
    background: var(--primary) !important;
    color: var(--primary-foreground) !important;
    box-shadow: var(--cyber-glow) !important;
}

/* 4. Loyalty/Rewards Floating Button (Bottom Left) */
.loyalty_footer_btn {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 50px !important;
    padding: 0.75rem 1.5rem !important;
    box-shadow: var(--cyber-glow) !important;
    animation: pulse-glow 3s infinite alternate !important;
}

/* 5. Section Headers on Homepage */
.homepage-section-title,
h2.text-foreground {
    color: white !important;
    text-shadow: 0 0 10px rgba(91, 192, 190, 0.3) !important;
    position: relative;
    padding-bottom: 0.5rem;
}

/* 6. Header Overrides */
header,
.glass-header {
    background: rgba(15, 27, 30, 0.8) !important;
    backdrop-filter: var(--glass-blur) !important;
    position: sticky !important;
    z-index: 999;
}

/* 11. Centered Section Headers with Pulsing Lines (Crystal Style) */

@keyframes line-glow {

    0%,
    100% {
        opacity: 0.2;
        transform: scaleX(0.95);
    }

    50% {
        opacity: 0.8;
        transform: scaleX(1.05);
        filter: drop-shadow(0 0 5px var(--primary));
    }
}

/* Base container for titles (Restricted to section headers only) */
section .flex.items-center.justify-between:has(h2),
.homepage-section-header {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
    position: relative;
    width: 100%;
    margin: 4rem 0 2rem !important;
    padding: 0 5% !important;
}

/* The Pulsing Lines (Restricted to section headers) */
section .flex.items-center.justify-between:has(h2)::before,
section .flex.items-center.justify-between:has(h2)::after {
    content: '';
    height: 1px;
    flex-grow: 1;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: line-glow 3.5s ease-in-out infinite;
}

/* Hide the mid-line since link moves down */
section .flex.items-center.justify-between:has(h2) h2+a::before {
    display: none;
}

section .flex.items-center.justify-between:has(h2) h2 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    color: white !important;
    text-shadow: 0 0 15px rgba(91, 192, 190, 0.5) !important;
}

/* "المزيد" link — styled glass button, stays in flow but on its own line */
section .flex.items-center.justify-between:has(h2) a {
    color: #00e5ff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    padding: 10px 24px !important;
    background: rgba(0, 229, 255, 0.08) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    text-decoration: none !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.3, 1) !important;
    animation: none !important;
    flex-shrink: 0 !important;
}

section .flex.items-center.justify-between:has(h2) a:hover {
    background: rgba(0, 229, 255, 0.18) !important;
    border-color: #00e5ff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 229, 255, 0.25) !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
    filter: none !important;
}

/* المزيد — Bottom Glass Button */
.more-link-bottom {
    color: #00e5ff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px;
    padding: 14px 36px !important;
    background: rgba(0, 229, 255, 0.08) !important;
    border: 1px solid rgba(0, 229, 255, 0.4) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.3, 1) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 229, 255, 0.1) !important;
}

.more-link-bottom:hover {
    background: rgba(0, 229, 255, 0.2) !important;
    border-color: #00e5ff !important;
    transform: translateY(-5px) scale(1.03) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 25px rgba(0, 229, 255, 0.3) !important;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.6) !important;
}

@keyframes bounce-horizontal {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-5px);
    }
}

/* 12. Crystal/Mirror Reflective Edge (Advanced Refraction) */

[data-product-card],
.product-item,
.group.flex.flex-col.gap-4>div:first-child {
    position: relative;
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    border-radius: 12px !important;

    /* Crystal Border Logic */
    border: 1px solid transparent !important;
    background-image: linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, var(--primary) 40%, rgba(255, 255, 255, 0.1) 60%, var(--primary) 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}

/* 14. Horizontal Scroll Snap for Product Lists (Mobile & Desktop) */

/* The Scroll Container */
.flex.overflow-x-auto,
[data-product-list-container],
.grid.grid-flow-col {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1.5rem !important;
    padding-bottom: 2rem !important;
}

/* Individual Product Cards - Snapping */
[data-product-card],
.product-item,
.grid-item {
    scroll-snap-align: center !important;
    /* Snapping to center for a better focus */
    scroll-snap-stop: always !important;
    flex-shrink: 0 !important;
}

/* Hide scrollbars for a cleaner, high-end look */
.flex.overflow-x-auto::-webkit-scrollbar,
.grid.grid-flow-col::-webkit-scrollbar {
    display: none;
}

.flex.overflow-x-auto,
.grid.grid-flow-col {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Interactive Mirror Shine on Product Cards */
[data-product-card]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
    z-index: 2;
}

[data-product-card]:hover::before {
    animation: crystal-shine 0.8s forwards;
}

@keyframes crystal-shine {
    100% {
        left: 200%;
    }
}

/* 15. Global White-to-Glass Override (Fixing the "White Ruined Everything" issue) */

/* Target common white/light background containers */
.bg-white,
.bg-surface,
.bg-gray-50,
.bg-gray-100,
.auth-modal,
.MuiPaper-root,
.MuiDialog-paper,
.s-block,
[class*="bg-primary-50"],
[class*="bg-secondary-50"] {
    background-color: var(--glass-bg) !important;
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    color: white !important;
}

/* Specific widgets like Tabby and Auth forms */
.tabby-promo-wrapper,
.tabby-widget-container,
#tabby-promo-wrapper,
.auth-modal-content,
.search-modal {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    border-radius: 12px !important;
    border: 1px solid var(--glass-border) !important;
}

/* Ensure all inputs and text are readable */
.bg-white input,
.bg-white textarea,
.MuiPaper-root input,
.text-gray-900,
.text-black,
.text-slate-900 {
    color: white !important;
}

/* Force main content area transparency */
#main,
#app,
.main-content {
    background: transparent !important;
}

/* 10. Product & Category Image Resizing and Centering */

/* Main Product Image (Product Page) */
.product-gallery-column img {
    max-width: 450px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 20px !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    object-fit: contain !important;
}

/* Category Images (Listing Pages) */
.group.flex.flex-col.gap-4 img {
    max-width: 240px !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid var(--glass-border-soft) !important;
}

/* Centering category text and container */
.group.flex.flex-col.gap-4 {
    align-items: center !important;
    text-align: center !important;
}

/* Ensure centering on desktop/mobile */
.theme-container .product-gallery-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 13. Image Slider/Carousel (Product Gallery) - Black Background Overlay Fix */
.product-gallery,
.product-gallery__container,
.product-gallery__slide,
.product-gallery__slide>div {
    background-color: #000000 !important;
    /* Changed from primary theme color to Black */
    background: #000000 !important;
}

/* If there is a semi-transparent layer/overlay */
.product-gallery::before,
.product-gallery__slide::before,
.product-gallery [class*="bg-primary"] {
    background-color: rgba(0, 0, 0, 0.4) !important;
    /* Dark overlay instead of primary color */
}

/* Fixing image display in black container */
.product-gallery img {
    background-color: transparent !important;
}

/* 16. MUI Accordion/Expandable Sections - Glass Override */
/* Fix white background on MUI AccordionSummary (.css-1di3uth and similar) */

/* Target MUI Accordion containers inside product details */
.product-details-column .MuiAccordion-root,
.product-details-column .MuiPaper-root,
.product-details-column [class*="MuiAccordion"],
.product-details-column [class*="css-"][role="button"],
.product-details-column [class*="css-"][aria-expanded] {
    background: var(--glass-bg) !important;
    background-color: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
    color: white !important;
}

/* MUI AccordionSummary (the clickable header/toggle button) */
.product-details-column .MuiAccordionSummary-root,
.product-details-column .MuiButtonBase-root[aria-expanded],
.product-details-column [class*="css-"][style*="background-color: rgb(248, 248, 248)"],
.product-details-column [class*="css-"][style*="background-color"],
.product-details-column .css-1di3uth {
    background: var(--glass-bg) !important;
    background-color: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    padding: 0.75rem 1rem !important;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25) !important;
    color: white !important;
    margin-bottom: 0.5rem !important;
    min-height: 48px !important;
    transition: all 0.3s ease !important;
}

/* Hover state for accordion buttons */
.product-details-column .MuiAccordionSummary-root:hover,
.product-details-column .MuiButtonBase-root[aria-expanded]:hover,
.product-details-column .css-1di3uth:hover {
    background: rgba(15, 27, 30, 0.85) !important;
    background-color: rgba(15, 27, 30, 0.85) !important;
    border-color: rgba(91, 192, 190, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 10px rgba(91, 192, 190, 0.15) !important;
}

/* MUI AccordionDetails (the expanded content area) */
.product-details-column .MuiAccordionDetails-root,
.product-details-column .MuiCollapse-root,
.product-details-column [class*="MuiCollapse"] {
    background: transparent !important;
    background-color: transparent !important;
    color: white !important;
}

/* Ensure text and icons inside MUI accordions are white */
.product-details-column .MuiAccordionSummary-root *,
.product-details-column .MuiAccordionDetails-root *,
.product-details-column .MuiButtonBase-root[aria-expanded] *,
.product-details-column .css-1di3uth *,
.product-details-column [class*="MuiAccordion"] * {
    color: white !important;
    fill: white !important;
}

/* MUI Accordion expand/collapse icon */
.product-details-column .MuiAccordionSummary-expandIconWrapper,
.product-details-column .MuiAccordionSummary-expandIconWrapper svg,
.product-details-column [class*="expandIcon"] {
    color: var(--primary) !important;
    fill: var(--primary) !important;
    transition: transform 0.3s ease !important;
}

/* Remove MUI default dividers/borders between accordion items */
.product-details-column .MuiAccordion-root::before,
.product-details-column [class*="MuiAccordion"]::before {
    display: none !important;
}

/* Global catch-all: any element with inline white/light background inside product details */
.product-details-column [style*="background-color: rgb(248"],
.product-details-column [style*="background-color: rgb(255"],
.product-details-column [style*="background-color: rgb(245"],
.product-details-column [style*="background-color: rgb(240"],
.product-details-column [style*="background-color: rgb(250"],
.product-details-column [style*="background: rgb(248"],
.product-details-column [style*="background: rgb(255"],
.product-details-column [style*="background-color: white"],
.product-details-column [style*="background-color:#f"],
.product-details-column [style*="background-color: #f"] {
    background: var(--glass-bg) !important;
    background-color: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    color: white !important;
}

/* 17. Drag-to-Scroll Cursor on Sliders */
.embla__viewport,
.products-embla__viewport,
[data-carousel-viewport] {
    cursor: grab !important;
}
.embla__viewport:active,
.products-embla__viewport:active,
[data-carousel-viewport]:active {
    cursor: grabbing !important;
}

.product-gallery-column img:hover {
    cursor: zoom-in !important;
}

/* 18. PC Specifications Icons Design (Overrides Banners grid to look like Icons) */
.grid:is([data-items-count="4"], [data-items-count="5"], [data-items-count="6"]) {
    row-gap: 2rem !important;
}

.grid:is([data-items-count="4"], [data-items-count="5"], [data-items-count="6"]) .group.relative {
    background: transparent !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.grid:is([data-items-count="4"], [data-items-count="5"], [data-items-count="6"]) .group.relative:hover {
    transform: translateY(-8px) !important;
    box-shadow: none !important;
}

/* Image Wrapper Override: Make it a small icon */
.grid:is([data-items-count="4"], [data-items-count="5"], [data-items-count="6"]) .media-wrap {
    position: relative !important;
    height: 70px !important;
    width: 70px !important;
    flex: 0 0 auto !important;
    aspect-ratio: auto !important;
    margin-bottom: 0.8rem !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.grid:is([data-items-count="4"], [data-items-count="5"], [data-items-count="6"]) .media-wrap img {
    object-fit: contain !important;
    height: 100% !important;
    width: 100% !important;
    background: transparent !important;
    filter: drop-shadow(0 0 10px rgba(91, 192, 190, 0.4));
    /* Cyber glow for the icons */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.grid:is([data-items-count="4"], [data-items-count="5"], [data-items-count="6"]) .group.relative:hover .media-wrap img {
    transform: scale(1.15) !important;
    filter: drop-shadow(0 0 15px rgba(91, 192, 190, 0.8));
}

/* Text Container Override: Flow naturally below the image instead of absolute overlay */
.grid:is([data-items-count="4"], [data-items-count="5"], [data-items-count="6"]) .absolute.inset-0 {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Button Override: Turn the big button into simple elegant text */
.grid:is([data-items-count="4"], [data-items-count="5"], [data-items-count="6"]) .btn-filled {
    background: transparent !important;
    color: var(--foreground) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    min-height: auto !important;
    box-shadow: none !important;
    text-transform: none !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.4 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.grid:is([data-items-count="4"], [data-items-count="5"], [data-items-count="6"]) .btn-filled::before {
    display: none !important;
}

.grid:is([data-items-count="4"], [data-items-count="5"], [data-items-count="6"]) .group.relative:hover .btn-filled,
.grid:is([data-items-count="4"], [data-items-count="5"], [data-items-count="6"]) .btn-filled:hover {
    color: var(--primary) !important;
    text-shadow: 0 0 8px rgba(91, 192, 190, 0.5) !important;
    transform: none !important;
}

.css-16cdcdl> :not(style)~ :not(style) {
    background-color: #00000038;
}

.text-destructive {
    color: #00fff0;
    background-color: #00000085;
}

.border-destructive {
    border-color: #000000;
}

/* 16. Service Types Dropdown — Glass Style (أنواع الخدمة) */
select,
.form-select,
[data-product-option] select,
.product-details-column select {
    background: rgba(15, 27, 30, 0.7) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
}

select:hover,
.form-select:hover,
[data-product-option] select:hover {
    border-color: #00e5ff !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 229, 255, 0.15) !important;
}

select:focus,
.form-select:focus,
[data-product-option] select:focus {
    border-color: #00e5ff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15), 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

select option,
.form-select option {
    background: #0F1B1E !important;
    color: #fff !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

select option:hover,
select option:checked {
    background: rgba(0, 229, 255, 0.15) !important;
    color: #00e5ff !important;
}

/* Label for service types */
[data-product-option] label,
.product-details-column label {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin-bottom: 8px !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
}

/* Custom dropdown arrow */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300e5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 14px center !important;
    padding-left: 40px !important;
}

/* 17. Testimonials Section — شوف الناس وش قالت */
.section-testimonials,
[class*="testimonial"],
section:has(.swiper-slide .flex.flex-col.gap-4) {
    padding: 3rem 1rem !important;
}

/* Testimonial Cards */
.section-testimonials .swiper-slide > div,
.section-testimonials .embla__slide > div,
[class*="testimonial"] .swiper-slide > div,
section:has(.swiper-slide .flex.flex-col.gap-4) .swiper-slide > div,
.section-testimonials .bg-secondary,
[class*="testimonial"] .bg-secondary {
    background: rgba(15, 27, 30, 0.5) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 30px 24px !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.3, 1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    height: 100% !important;
}

.section-testimonials .swiper-slide > div:hover,
.section-testimonials .embla__slide > div:hover,
[class*="testimonial"] .swiper-slide > div:hover,
[class*="testimonial"] .bg-secondary:hover {
    border-color: rgba(0, 229, 255, 0.4) !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 229, 255, 0.12) !important;
}

/* Reviewer name */
.section-testimonials .font-bold,
.section-testimonials .font-semibold,
[class*="testimonial"] .font-bold {
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

/* Review text */
.section-testimonials p,
[class*="testimonial"] p {
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.7 !important;
    font-size: 0.95rem !important;
}

/* Stars */
.section-testimonials .text-primary,
.section-testimonials svg,
[class*="testimonial"] .text-primary {
    color: #ffb400 !important;
}

/* Section heading */
.section-testimonials h2,
[class*="testimonial"] h2 {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.3) !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
}

/* Product Count Content Overlay Styling */
.product-item .count .countContent {
    padding: 5px 5px 7px;
    border-radius: 5px;
    text-align: center;
    display: flex;
    gap: 2px;
    flex-direction: column;
    color: #0cb8b6;
    border: 1px solid #f0f0f0;
    background-color: #000000b8;
    height: 55px;
    width: 100%;
}

/* 19. Product Condition Badges — "جديد" & "مستعمل" */

/* Base badge style override */
[data-product-card] .absolute.top-4 span.rounded-full,
[data-product-card] .absolute.top-4 span[class*="bg-["] {
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    padding: 6px 16px !important;
    border-radius: 50px !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    text-transform: uppercase !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 5 !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.3, 1) !important;
}

/* ✅ "جديد" (New) Badge — Cyan/Teal Glow */
[data-badge-condition="new"] {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(0, 184, 212, 0.4)) !important;
    border: 1px solid rgba(0, 229, 255, 0.6) !important;
    color: #00e5ff !important;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5) !important;
    animation: badge-new-pulse 2.5s ease-in-out infinite !important;
}

[data-badge-condition="new"]:hover {
    box-shadow: 0 6px 25px rgba(0, 229, 255, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.08) !important;
}

/* Shimmer sweep on new badge */
[data-badge-condition="new"]::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important;
    animation: badge-shimmer 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes badge-new-pulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
    50% { box-shadow: 0 4px 25px rgba(0, 229, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
}

@keyframes badge-shimmer {
    0% { left: -100%; }
    50%, 100% { left: 200%; }
}

/* ⚠️ "مستعمل" (Used) Badge — Amber/Orange Glow */
[data-badge-condition="used"] {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.2), rgba(255, 111, 0, 0.35)) !important;
    border: 1px solid rgba(255, 152, 0, 0.5) !important;
    color: #ffb74d !important;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    text-shadow: 0 0 6px rgba(255, 152, 0, 0.4) !important;
}

[data-badge-condition="used"]:hover {
    box-shadow: 0 6px 25px rgba(255, 152, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.08) !important;
    border-color: rgba(255, 152, 0, 0.7) !important;
}

/* 20. Mobile Drawer — Premium Glassmorphism Nav */

/* Backdrop overlay */
#mobile-drawer el-dialog-backdrop,
dialog#mobile-drawer::backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
}

/* Main drawer panel background */
#mobile-drawer .bg-background,
#mobile-drawer el-dialog-panel > div {
    background: linear-gradient(180deg, rgba(5, 9, 10, 0.97) 0%, rgba(15, 27, 30, 0.95) 100%) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border-left: 1px solid rgba(0, 229, 255, 0.15) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5) !important;
}

/* All nav links — base style */
#mobile-drawer a,
#mobile-drawer button[type="button"] {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    margin: 2px 12px !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Link hover — cyan glow */
#mobile-drawer a:hover,
#mobile-drawer button[type="button"]:hover {
    background: rgba(0, 229, 255, 0.08) !important;
    color: #00e5ff !important;
    padding-right: 32px !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.4) !important;
}

/* Active link indicator line */
#mobile-drawer a::before {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) scaleY(0) !important;
    width: 3px !important;
    height: 60% !important;
    background: #00e5ff !important;
    border-radius: 3px !important;
    transition: transform 0.3s ease !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
}

#mobile-drawer a:hover::before {
    transform: translateY(-50%) scaleY(1) !important;
}

/* Category accordion (details/summary) */
#mobile-drawer details {
    margin: 2px 12px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

#mobile-drawer details[open] {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(0, 229, 255, 0.1) !important;
}

#mobile-drawer details summary {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    transition: all 0.35s ease !important;
    margin: 0 !important;
    list-style: none !important;
}

#mobile-drawer details summary::-webkit-details-marker {
    display: none !important;
}

#mobile-drawer details summary:hover {
    background: rgba(0, 229, 255, 0.06) !important;
    color: #00e5ff !important;
}

/* Arrow icon glow on open */
#mobile-drawer details[open] summary svg {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.5)) !important;
}

/* Sub-links inside accordion */
#mobile-drawer details > div {
    padding: 4px 8px 8px !important;
    margin: 0 !important;
}

#mobile-drawer details > div a {
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 10px 20px !important;
    margin: 1px 0 !important;
    border-radius: 8px !important;
}

#mobile-drawer details > div a:hover {
    color: #00e5ff !important;
    background: rgba(0, 229, 255, 0.06) !important;
    padding-right: 28px !important;
}

/* Bottom section divider */
#mobile-drawer .border-border-light,
#mobile-drawer .border-t {
    border-color: rgba(0, 229, 255, 0.12) !important;
    margin-top: 8px !important;
    padding-top: 12px !important;
}

/* Login / Account buttons */
#mobile-drawer .border-t button,
#mobile-drawer .border-t a {
    font-weight: 600 !important;
}

/* Globe icon for region */
#mobile-drawer .border-t button svg {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.3)) !important;
}

/* Country text */
#mobile-drawer .nav-country-text {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.85rem !important;
}

/* Scrollbar styling for drawer */
#mobile-drawer .overflow-y-auto::-webkit-scrollbar {
    width: 4px;
}

#mobile-drawer .overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
}

#mobile-drawer .overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.2);
    border-radius: 4px;
}

#mobile-drawer .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 229, 255, 0.4);
}

/* 21. Product Listing Page — Filters, Sort, Grid Toggle */

/* Filter bar wrapper */
#products-content > .flex-col > .flex-wrap {
    background: rgba(15, 27, 30, 0.4) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
}

/* "الفلاتر" label */
#products-content .text-muted-foreground {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Filter / Sort popover buttons */
#products-content button[popovertarget],
#products-content el-select button {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

#products-content button[popovertarget]:hover,
#products-content el-select button:hover {
    background: rgba(0, 229, 255, 0.08) !important;
    color: #00e5ff !important;
}

/* Popover dropdowns (availability, price) */
el-popover[popover],
el-options[popover] {
    background: rgba(10, 18, 20, 0.95) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border: 1px solid rgba(0, 229, 255, 0.15) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Popover options */
el-option {
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
}

el-option:hover,
el-option[aria-selected="true"] {
    background: rgba(0, 229, 255, 0.1) !important;
    color: #00e5ff !important;
}

/* Checkbox & Radio inside filters */
.form-checkbox,
.form-radio {
    accent-color: #00e5ff !important;
}

.form-control {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.3s ease !important;
}

.form-control:hover {
    color: #00e5ff !important;
}

/* Form labels & inputs in price filter */
.form-label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 600 !important;
}

.form-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    transition: border-color 0.3s ease !important;
}

.form-input:focus {
    border-color: rgba(0, 229, 255, 0.5) !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.15) !important;
    outline: none !important;
}

/* Price range slider (noUi) */
.noUi-target {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    border-radius: 6px !important;
    height: 6px !important;
    box-shadow: none !important;
}

.noUi-connect {
    background: linear-gradient(90deg, #00b8d4, #00e5ff) !important;
    border-radius: 6px !important;
}

.noUi-handle {
    background: #00e5ff !important;
    border: 2px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.4) !important;
    cursor: grab !important;
    top: -7px !important;
}

.noUi-handle::before,
.noUi-handle::after {
    display: none !important;
}

.noUi-handle:active {
    cursor: grabbing !important;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.6) !important;
}

/* Grid / List toggle buttons */
.btn-group {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.btn-group-item {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s ease !important;
}

.btn-group-item:has(input:checked) {
    background: rgba(0, 229, 255, 0.15) !important;
    color: #00e5ff !important;
}

.btn-group-item:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Mobile filter button */
button[commandfor="filters-drawer"] {
    background: rgba(0, 229, 255, 0.08) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    color: #00e5ff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

button[commandfor="filters-drawer"]:hover {
    background: rgba(0, 229, 255, 0.15) !important;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2) !important;
}

/* Filters Drawer panel */
#filters-drawer .bg-background {
    background: linear-gradient(180deg, rgba(5, 9, 10, 0.97), rgba(15, 27, 30, 0.95)) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
}

#filters-drawer h2 {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* Divider lines inside drawer */
#filters-drawer .divide-border > * + *,
#filters-drawer .border-t,
#filters-drawer .border-border {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Disclosure labels inside drawer */
#filters-drawer .disclosure-wrapper label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 600 !important;
}

#filters-drawer .disclosure-wrapper label svg {
    color: rgba(255, 255, 255, 0.4) !important;
    transition: color 0.3s ease !important;
}

#filters-drawer .disclosure-wrapper input:checked ~ label svg {
    color: #00e5ff !important;
}

/* Bottom bar buttons (clear / apply) */
#filters-drawer .btn-outlined {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

#filters-drawer .btn-outlined:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

#filters-drawer .btn-filled {
    background: linear-gradient(135deg, #00b8d4, #00e5ff) !important;
    color: #000 !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

#filters-drawer .btn-filled:hover {
    box-shadow: 0 6px 25px rgba(0, 229, 255, 0.5) !important;
    transform: translateY(-1px) !important;
}

/* 22. Additional Badge Types — "يباع سريعًا" & "شحن مجاني" */

/* Best seller badge — Magenta/Purple glow */
[data-badge-condition="bestseller"] {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.25), rgba(103, 58, 183, 0.4)) !important;
    border: 1px solid rgba(186, 104, 200, 0.5) !important;
    color: #ce93d8 !important;
    box-shadow: 0 4px 15px rgba(156, 39, 176, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    text-shadow: 0 0 6px rgba(156, 39, 176, 0.4) !important;
}

[data-badge-condition="bestseller"]:hover {
    box-shadow: 0 6px 25px rgba(156, 39, 176, 0.4) !important;
    transform: scale(1.08) !important;
}

/* Free shipping badge — Green glow */
[data-badge-condition="freeshipping"] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(56, 142, 60, 0.35)) !important;
    border: 1px solid rgba(76, 175, 80, 0.5) !important;
    color: #81c784 !important;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    text-shadow: 0 0 6px rgba(76, 175, 80, 0.4) !important;
}

[data-badge-condition="freeshipping"]:hover {
    box-shadow: 0 6px 25px rgba(76, 175, 80, 0.4) !important;
    transform: scale(1.08) !important;
}

/* 23. Product Card Grid — Complete Card Styling */

/* Grid root container */
[data-grid-root] {
    gap: 24px 16px !important;
}

/* Single column grid on mobile — two columns */
[data-grid-root][data-grid="one"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}

@media (min-width: 768px) {
    [data-grid-root][data-grid="one"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
}

@media (min-width: 1024px) {
    [data-grid-root][data-grid="one"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Product card title */
[data-product-card] h3 a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

[data-product-card]:hover h3 a {
    color: #00e5ff !important;
}

/* Star ratings — filled stars glow gold */
[data-product-card] .text-warning {
    color: #ffc107 !important;
    filter: drop-shadow(0 0 3px rgba(255, 193, 7, 0.4)) !important;
}

/* Empty/muted stars */
[data-product-card] .flex.gap-0\\.5 .text-muted-foreground {
    color: rgba(255, 255, 255, 0.15) !important;
}

/* Review count */
[data-product-card] .text-muted.text-sm {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Price — current price */
[data-product-card] .text-foreground.text-sm:not(h3 *) {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

/* "من" prefix + price with font-semibold */
[data-product-card] .text-foreground.text-sm.font-semibold {
    color: #00e5ff !important;
    font-weight: 800 !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.3) !important;
}

/* Old price (strikethrough) */
[data-product-card] .text-destructive.line-through {
    color: rgba(255, 100, 100, 0.6) !important;
    font-weight: 400 !important;
}

/* Discount badge (خصم XX%) */
[data-product-card] .bg-success\/20 {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 200, 83, 0.25)) !important;
    color: #00e676 !important;
    border: 1px solid rgba(0, 200, 83, 0.3) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    text-shadow: 0 0 6px rgba(0, 200, 83, 0.3) !important;
}

/* Riyal SVG icon */
[data-product-card] .riyal-svg {
    color: inherit !important;
    opacity: 0.85 !important;
}

/* Wishlist button */
[data-product-card] [data-wishlist-btn] {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    width: 36px !important;
    height: 36px !important;
}

[data-product-card] [data-wishlist-btn]:hover {
    background: rgba(255, 50, 80, 0.3) !important;
    border-color: rgba(255, 50, 80, 0.5) !important;
    box-shadow: 0 0 15px rgba(255, 50, 80, 0.3) !important;
    transform: scale(1.15) !important;
}

[data-product-card] [data-wishlist-btn] svg {
    width: 18px !important;
    height: 18px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.3s ease !important;
}

[data-product-card] [data-wishlist-btn]:hover svg {
    color: #ff4081 !important;
}

/* "أضف للسلة" / "اختر الخيارات" button inside card */
[data-product-card] .btn.btn-outlined {
    background: rgba(0, 229, 255, 0.06) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    color: #00e5ff !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    letter-spacing: 0.3px !important;
    transition: all 0.3s ease !important;
    font-size: 0.85rem !important;
}

[data-product-card] .btn.btn-outlined:hover {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(0, 184, 212, 0.3)) !important;
    border-color: #00e5ff !important;
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.3) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

/* Quantity input wrapper */
[data-product-card] .qty-input {
    background: rgba(15, 27, 30, 0.6) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Quantity buttons */
[data-product-card] .qty-input-btn {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

[data-product-card] .qty-input-btn:hover {
    background: rgba(0, 229, 255, 0.15) !important;
    color: #00e5ff !important;
}

/* Quantity input field */
[data-product-card] .qty-input-field {
    background: transparent !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
    border: none !important;
}

/* Product description text (list view) */
[data-product-card] p.text-muted.text-sm:not(.flex *) {
    color: rgba(255, 255, 255, 0.45) !important;
    line-height: 1.5 !important;
}

/* Bundle offer badge styling override */
[data-product-card] .bundle-offer-badge:not(.hidden) {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.3), rgba(255, 87, 34, 0.4)) !important;
    border: 1px solid rgba(255, 152, 0, 0.5) !important;
    color: #ffb74d !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
}

/* Mobile card spacing adjustments */
@media (max-width: 767px) {
    [data-product-card] {
        padding: 8px !important;
        border-radius: 14px !important;
        gap: 8px !important;
    }
    
    [data-product-card] a[class*="aspect-"] {
        aspect-ratio: 1/1 !important;
        border-radius: 10px !important;
    }
    
    [data-product-card] h3 {
        font-size: 0.8rem !important;
    }
    
    [data-product-card] .btn.btn-outlined {
        padding: 8px 12px !important;
        font-size: 0.78rem !important;
        border-radius: 10px !important;
    }
    
    [data-product-card] [data-wishlist-btn] {
        width: 30px !important;
        height: 30px !important;
    }
    
    [data-product-card] [data-wishlist-btn] svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* 24. Breadcrumb Navigation Styling */

nav[aria-label="breadcrumb"] {
    background: rgba(15, 27, 30, 0.4) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

nav[aria-label="breadcrumb"] ol {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Breadcrumb Links */
nav[aria-label="breadcrumb"] a {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
}

nav[aria-label="breadcrumb"] a:hover {
    color: #00e5ff !important;
    background: rgba(0, 229, 255, 0.08) !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.4) !important;
}

/* Current Page (Active Breadcrumb) */
nav[aria-label="breadcrumb"] span[aria-current="page"] {
    color: #00e5ff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    background: rgba(0, 229, 255, 0.05) !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.1) !important;
}

/* Separator Chevron/Icon */
nav[aria-label="breadcrumb"] li[role="presentation"] svg {
    color: rgba(255, 255, 255, 0.3) !important;
    width: 16px !important;
    height: 16px !important;
    transition: color 0.3s ease !important;
}

/* Hover effect on separator when adjacent link is hovered */
nav[aria-label="breadcrumb"] a:hover + li[role="presentation"] svg {
    color: rgba(0, 229, 255, 0.5) !important;
}

/* 25. Subcategories Carousel (أقسام التجميعات) */
.subcategories-embla {
    position: relative !important;
}

/* Slide Link Container */
.subcategories-embla__slide a {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.subcategories-embla__slide a:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: rgba(0, 229, 255, 0.4) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 229, 255, 0.15) !important;
}

/* Image zoom on hover */
.subcategories-embla__slide img {
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.subcategories-embla__slide a:hover img {
    transform: scale(1.1) !important;
}

/* Dark gradient overlay for readability */
.subcategories-embla__slide .bg-white\\/10 {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10, 18, 20, 0.8) 100%) !important;
    z-index: 1 !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

.subcategories-embla__slide a:hover .bg-white\\/10 {
    opacity: 1 !important;
}

/* Title text container (Glassmorphism bottom bar) */
.subcategories-embla__slide .backdrop-blur-\\[2px\\] {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    padding: 16px 12px !important;
    background: rgba(10, 18, 20, 0.6) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 2 !important;
    align-items: flex-end !important;
}

/* Title text */
.subcategories-embla__slide h4 {
    color: #fff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    letter-spacing: 0.5px !important;
    transition: color 0.3s ease !important;
    margin: 0 !important;
}

.subcategories-embla__slide a:hover h4 {
    color: #00e5ff !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.4) !important;
}

/* Controls Header (Navigation & Progress) */
.subcategories-embla__controls {
    margin-top: 24px !important;
}

/* Progress Bar Track */
.subcategories-embla__progress {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    height: 6px !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Progress Bar Active */
.subcategories-embla__progress-bar {
    background: linear-gradient(90deg, #00b8d4, #00e5ff) !important;
    position: relative !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
}

/* Progress Bar Shine Animation */
.subcategories-embla__progress-bar::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent) !important;
    animation: moveShine 2s infinite linear !important;
}

@keyframes moveShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Nav Buttons */
.subcategories-embla__prev,
.subcategories-embla__next {
    background: rgba(15, 27, 30, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    color: #00e5ff !important;
    transition: all 0.3s ease !important;
    border-radius: 12px !important;
}

.subcategories-embla__prev:hover:not(:disabled),
.subcategories-embla__next:hover:not(:disabled) {
    background: rgba(0, 229, 255, 0.15) !important;
    border-color: #00e5ff !important;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3) !important;
    color: #fff !important;
    transform: scale(1.05) !important;
}

.subcategories-embla__prev:disabled,
.subcategories-embla__next:disabled {
    opacity: 0.3 !important;
    border-color: transparent !important;
    color: rgba(255, 255, 255, 0.3) !important;
}