:root {
    /* Tamm brand palette — ported from the polished React storefront */
    --primary: #1957a6;        /* tamm-blue */
    --primary-dark: #122b54;   /* tamm-navy */
    --primary-light: #35c6d8;  /* tamm-cyan */
    --secondary: #35c6d8;      /* tamm-cyan */
    --secondary-light: #e3f8fa;/* tamm-cyan-pale */
    --bg: #f6f8fb;             /* tamm-sand */
    --bg-light: #eef2f7;
    --card: #ffffff;           /* tamm-paper */
    --card-hover: #f3f6fa;
    --text: #0f2040;           /* tamm-ink */
    --text-muted: #70819b;
    --border: #dfe7f0;         /* tamm-line */
    --success: #19896f;        /* tamm-green */
    --success-light: #22b491;
    --danger: #d64545;
    --warning: #bc8426;        /* tamm-gold */
    --info: #1957a6;
    --glass: rgba(255, 255, 255, 0.85);

    /* New: shared radius/shadow language from the React version */
    --radius-card: 22px;
    --radius-btn: 14px;
    --shadow-soft: 0 10px 30px rgba(20, 52, 93, 0.08);
    --shadow-strong: 0 22px 60px rgba(20, 52, 93, 0.11);
    --shadow-btn: 0 11px 22px rgba(25, 87, 166, 0.2);
    --ease: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

body {
    font-family: 'Cairo', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}

/* ====== BODY PADDING FIX ====== */
body {
    padding-top: 90px; /* Desktop: الهيدر في سطر واحد */
}

@media (max-width: 1024px) {
    body {
        padding-top: 85px;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 135px; /* الموبايل: اللوجو + التابس في سطرين */
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 125px;
    }
}


/* ====== BACKGROUND ====== */
.bg-anim {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    background: var(--bg);
}

.bg-anim::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(25,87,166,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(53,198,216,0.04) 0%, transparent 50%);
}

/* Faint dot texture — same ambient touch used in the React version's
   .tamm-app::before, layered under the gradient tint above. */
.bg-anim::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.3;
    background-image: radial-gradient(rgba(15,32,64,0.07) 0.7px, transparent 0.7px);
    background-size: 20px 20px;
}

/* ====== SKELETON LOADING ====== */
.skeleton {
    background: linear-gradient(90deg, var(--card) 25%, var(--card-hover) 50%, var(--card) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
    border-radius: 12px;
}

@keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.products-skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.skeleton-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    overflow: hidden;
}

.skeleton-card .img {
    aspect-ratio: 16/10;
    width: 100%;
    margin-bottom: 15px;
}

.skeleton-card .title {
    height: 20px;
    width: 70%;
    margin-bottom: 10px;
}

.skeleton-card .price {
    height: 16px;
    width: 40%;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 12px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.logo-section img {
    width: 50px; height: 50px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--primary);
    box-shadow: 0 0 20px rgba(25,87,166,0.3);
}

.logo-section h1 {
    font-size: 1.5rem;
    font-weight: 900;
    font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-section span {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
}

.admin-badge {
    display: none;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 4px 15px rgba(25,87,166,0.4);
    animation: pulse 2s infinite;
}

.admin-badge.active { display: flex; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(25,87,166,0.4); }
    50% { box-shadow: 0 4px 25px rgba(25,87,166,0.7); }
}

/* ====== SECTIONS ====== */
.section {
    display: none;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    animation: fadeIn 0.4s ease;
}


.section.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====== HERO ====== */
.hero {
    border-radius: 24px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1200 / 420;
    max-height: 420px;
    background: var(--card);
    border: 1px solid var(--border);
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* ====== FILTERS ====== */
/* ====== PACKAGES (BUNDLES/OFFERS) ======
   Deliberately its own section with its own visual identity (gold/amber
   accent vs the site's blue) so it reads as "special offers", not just
   another category tab mixed in with the rest. */
.packages-section {
    margin-bottom: 28px;
}

.packages-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.packages-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    font-weight: 800;
    color: #fbbf24;
    margin: 0;
}

.packages-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.packages-track-wrap {
    position: relative;
}

.packages-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* لو عدد الحزم قليل وبيتسع في عرض الشريط من غير سكرول، يتوسطوا في
       النص بدل ما يبدأوا من اليمين ويسيبوا فراغ فاضي ناحية الشمال. لو
       العدد كبير وبيعمل overflow فعلي، "safe" بترجعهم يبدأوا من اليمين
       (بداية الشريط) تلقائيًا عشان أول حزمة متتقطعش أو يحتاج العميل
       يسحب شمال الأول عشان يشوفها. نفس فكرة .nav-tabs تحت في الملف ده. */
    justify-content: center;
    justify-content: safe center;
    /* بلورة/تلاشي بسيط عند الطرف اللي فيه بواقي حزم لسه ما ظهرتش، بدل ما
       تتقطع فجأة — تلميح بصري إن في حاجة تانية تتسحب. الصفحة RTL، يعني
       أول حزمة على اليمين والباقي بيتمدوا ناحية الشمال، فالتلاشي على
       الطرف الشمال (بداية الـ gradient) هو اللي بيغطي الحزم الجاية. */
    -webkit-mask-image: linear-gradient(to left, transparent 0, black 28px, black calc(100% - 6px), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, black 28px, black calc(100% - 6px), transparent 100%);
}

.packages-track::-webkit-scrollbar { display: none; }

/* علامة سحب بسيطة تحت الحزم — نفس فكرة الـ "grabber" في iOS، تلميح إنك
   تقدر تسحب يمين/شمال بين الحزم. مجرد زخرفة، مالهاش وظيفة تفاعلية. */
.packages-drag-hint {
    display: flex;
    justify-content: center;
    margin-top: 2px;
}

.packages-drag-hint span {
    width: 38px;
    height: 4px;
    border-radius: 4px;
    background: rgba(251,191,36,0.35);
}

.package-card {
    position: relative;
    /* قريب جدًا من عرض عمود شبكة المنتجات (مش بنفس الرقم بالظبط) — عشان
       تسيب جزء صغير من الحزمة التالتة ظاهر عند الطرف (نفس الطلب: "جزء
       بسيط ظاهر من الطرف وعلامة سحب")، بدل ما الاتنين يملّوا العرض
       بالظبط ومايبقاش في حاجة تلمّح إن في حزم تانية.  */
    flex: 0 0 43%;
    width: 43%;
    max-width: 260px;
    min-width: 0;
    scroll-snap-align: start;
    background: linear-gradient(160deg, rgba(120,53,15,0.25), rgba(15,23,42,0.85));
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 16px;
    padding: 14px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.package-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1e1300;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 50px;
    white-space: nowrap;
}

.package-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-top: 14px;
}

.package-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fde68a;
    line-height: 1.25;
}

.package-tagline {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.3;
    /* اتنين سطر بالظبط وبعدها "..." — عشان التاجلاين الطويل ميكسرش ارتفاع
       الكارت ويخليه مش متساوي مع اللي جنبه. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.package-includes {
    list-style: none;
    margin: 2px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.package-includes li {
    font-size: 0.72rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.package-includes li i {
    color: #22c55e;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.package-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 2px 0 1px;
    flex-wrap: wrap;
}

.package-price-value {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fbbf24;
}

.package-price-original {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.package-price-tbd {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.package-order-btn {
    padding: 9px 10px !important;
    font-size: 0.82rem !important;
}

@media (min-width: 480px) {
    .package-card { max-width: 300px; }
}

.filters-bar {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, rgba(30,41,59,0.5), rgba(15,23,42,0.7));
    border: 1px solid rgba(25,87,166,0.08);
    border-radius: 24px;
    padding: 24px;
    backdrop-filter: blur(20px);
}

.search-box {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
}

.search-box .search-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    z-index: 2;
    opacity: 0.5;
}

.search-box input {
    width: 100%;
    padding: 14px 50px 14px 20px;
    background: rgba(15,23,42,0.5);
    border: 2px solid var(--border);
    border-radius: 16px;
    color: var(--text);
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25,87,166,0.1);
}

.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 10px 22px;
    border: 1px solid var(--border);
    background: rgba(15,23,42,0.4);
    color: var(--text-muted);
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.filter-tab:hover {
    border-color: var(--primary);
    color: var(--text);
    background: rgba(25,87,166,0.1);
}

.filter-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(25,87,166,0.3);
}

/* ====== PRODUCTS GRID (Bibasata Style) ======
   auto-fill + minmax lets the browser pick however many columns actually
   fit at the card's target size, instead of jumping between 3 hard-coded
   column counts (2/3/4). That fixes cards ballooning to huge, sparse
   squares on wide/laptop screens between the old breakpoints, and gives a
   smooth column count on in-between widths (tablets, split-screen, etc.)
   instead of an abrupt jump. */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    align-items: stretch;
}

@media (min-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }
}

@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 22px;
    }
}

@media (min-width: 1440px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 24px;
    }
}

.product-card-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* THE fix for a very common CSS Grid bug: a grid item's default
       min-width is `auto`, which means the browser will never shrink a
       column below the intrinsic (max-content) width of whatever is
       inside it — a long product title, a price row, a badge, anything.
       With `repeat(2, 1fr)` that meant one card's content could force
       its whole column wider than a fair half, silently pushing the
       *other* column (and the entire grid) past the edge of the phone
       screen. That's what was causing the site-wide horizontal overflow
       on mobile (visible as cards/sections shifted and cut off). Setting
       min-width:0 lets a card shrink to its column's real share and
       wrap/ellipsis its own content instead of blowing out the layout. */
    min-width: 0;
}

.product-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 1 / 1;
    background: var(--card);
    border: 1px solid var(--border);
    width: 100%;
    flex-shrink: 0;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.product-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-discount-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #2d9e5f, #1e7a47);
    color: #fff;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 800;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(45, 158, 95, 0.3);
}

/* Product info BELOW card */
.product-info-below {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-action-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #2d9e5f, #1e7a47);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 4px 15px rgba(45, 158, 95, 0.3);
}

.card-action-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(45, 158, 95, 0.5);
}

.card-price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.original-price {
    color: var(--text-muted);
    text-decoration: line-through;
    font-size: 0.85rem;
    opacity: 0.7;
}

.sale-price {
    color: #4ade80;
    font-size: 1.1rem;
    font-weight: 900;
}

.price-final-group {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.price-from-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.85;
}

.card-title-bottom {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====== SPECIAL ORDERS (طلبات خاصة) ======
   Reuses the exact same .product-card / .product-card-wrapper skeleton as
   the main catalog (so the grid, spacing and card sizing all just match
   automatically) — only the icon face, badge color and CTA differ, to
   read as "this one's a manual WhatsApp order", not an instant purchase. */
.special-orders-intro {
    margin-bottom: 18px;
}

.special-orders-intro h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 800;
    color: #25d366;
    margin: 0 0 6px;
}

.special-orders-intro p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.special-order-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(37,211,102,0.12), var(--card));
}

.special-order-icon {
    font-size: 3rem;
    line-height: 1;
}

/* لو الصنف ليه صورة حقيقية (item.image) بدل الإيموجي — نفس تصرف صورة
   كارت المنتج العادي بالظبط (تملى الكارت بالكامل وتتقص من غير تشويه). */
.special-order-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.special-order-badge {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    box-shadow: 0 4px 15px rgba(124,58,237,0.35);
}

.special-order-btn {
    background: linear-gradient(135deg, #25d366, #1da851) !important;
    box-shadow: 0 4px 15px rgba(37,211,102,0.3) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.special-order-desc {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.special-order-price-tbd {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

/* ====== TESTIMONIALS CAROUSEL ====== */
.testimonials-section {
    margin: 50px 0;
    overflow: hidden;
}

.testimonials-header {
    text-align: center;
    margin-bottom: 30px;
}

.testimonials-header h3 {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--text), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.testimonials-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 20px 30px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.testimonials-carousel::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    flex: 0 0 auto;
    width: 280px;
    scroll-snap-align: start;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(25,87,166,0.15);
    border-color: rgba(25,87,166,0.3);
}

.testimonial-card img {
    width: 100%;
    aspect-ratio: 9/16;
    object-fit: cover;
    display: block;
}

.carousel-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.carousel-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

@media (max-width: 767px) {
    .testimonial-card {
        width: 220px;
    }
    .testimonials-header h3 {
        font-size: 1.3rem;
    }
}

/* ====== PRODUCT DETAIL ====== */
.product-detail-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.product-detail-image {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.product-detail-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.product-detail-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px;
}

.product-detail-info h2 {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--text), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.product-detail-info .detail-desc {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
    white-space: pre-line;
    word-wrap: break-word;
}


/* Tablet (iPad) */
@media (max-width: 1023px) and (min-width: 768px) {
    .product-detail-header {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .product-detail-image {
        border-radius: 20px;
    }
    .product-detail-info h2 {
        font-size: 1.6rem;
    }
    .product-detail-info .detail-desc {
        font-size: 0.95rem;
        line-height: 1.8;
        white-space: pre-line;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .product-detail-header {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 15px;
    }
    .product-detail-image {
        border-radius: 16px;
        width: 100%;
    }
    .product-detail-info {
        gap: 10px;
    }
    .product-detail-info h2 {
        font-size: 1.35rem;
        text-align: center;
    }
    .product-detail-info .detail-desc {
        font-size: 0.95rem;
        line-height: 1.9;
        text-align: start;
        white-space: pre-line;
    }

}

@media (max-width: 767px) {
    .product-card {
        border-radius: 14px;
    }
    .card-discount-badge {
        font-size: 0.7rem;
        padding: 4px 10px;
        top: 8px;
        right: 8px;
    }
    .product-info-below {
        margin-top: 10px;
        gap: 6px;
    }
    .card-action-btn {
        padding: 10px;
        font-size: 0.85rem;
        border-radius: 8px;
    }
    .sale-price {
        font-size: 0.95rem;
    }
    .original-price {
        font-size: 0.75rem;
    }
    .card-title-bottom {
        font-size: 0.85rem;
    }
    .product-detail-header {
        grid-template-columns: 1fr;
    }
}

/* Prices Table */
.prices-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    border-radius: 16px;
    overflow: hidden;
}

.prices-table th,
.prices-table td {
    padding: 16px 20px;
    text-align: center;
}

.prices-table th {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
}

.prices-table tr {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    transition: all 0.2s ease;
}

.prices-table tr:hover {
    background: var(--card-hover);
}

.prices-table td {
    font-weight: 600;
}

.prices-table .original-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.prices-table .sale-price {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--success);
}

.prices-table .discount-badge {
    background: rgba(214,69,69,0.15);
    color: var(--danger);
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* الزرار الثانوي (تواصل عبر واتساب) — outline بلون واتساب، أقل بروزًا من
   زرار "شراء الآن" الأساسي فوقه. */
.order-btn {
    width: 100%;
    padding: 14px;
    background: transparent;
    color: #25D366;
    border: 1.5px solid #25D366;
    border-radius: 16px;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.order-btn:hover {
    background: rgba(37,211,102,0.12);
}

/* ====== CARDS ====== */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.card:hover {
    border-color: rgba(25,87,166,0.3);
}

.card-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-title .icon { font-size: 1.5rem; }

/* ====== FORMS ====== */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 14px 18px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25,87,166,0.1);
}

.form-group textarea { min-height: 100px; resize: vertical; }

/* ====== UPLOAD AREA ====== */
.upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.upload-area {
    border: 2px dashed var(--border);
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.upload-area:hover {
    border-color: var(--primary);
    background: rgba(25,87,166,0.05);
}

.upload-area.has-image {
    border-style: solid;
    border-color: var(--success);
    padding: 10px;
}

.upload-area .upload-icon { font-size: 3rem; margin-bottom: 10px; }
.upload-area .upload-text { color: var(--text-muted); font-size: 0.95rem; }

.upload-area input[type="file"] {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}

.upload-preview {
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
    display: none;
}

.upload-preview.show { display: block; margin: 0 auto; }

.upload-remove {
    display: none;
    margin-top: 10px;
    padding: 8px 20px;
    background: var(--danger);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
}

.upload-remove.show { display: inline-block; }

/* ====== BUTTONS ====== */
.btn {
    padding: 14px 32px;
    border: none;
    border-radius: var(--radius-btn, 14px);
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.22s var(--ease, ease), box-shadow 0.22s ease, background 0.22s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* زرار المزامنة */
.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: var(--shadow-btn, 0 11px 22px rgba(25,87,166,0.2));
}

.btn-success {
    background: linear-gradient(135deg, var(--success), #16a34a);
    color: white;
    box-shadow: 0 4px 15px rgba(25,137,111,0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(25,87,166,0.6);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* ====== BACK BUTTON ====== */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.back-btn:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
    transform: translateX(-5px);
}

/* ====== DELIVERIES GRID ====== */
.deliveries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.delivery-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.delivery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(25,87,166,0.15);
    border-color: var(--primary);
}

.delivery-card .card-header {
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(25,87,166,0.1), rgba(236,72,153,0.05));
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.delivery-card .delivery-number {
    font-weight: 900;
    font-size: 1.2rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.delivery-card .date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.delivery-card .card-body {
    padding: 15px 20px;
}

.delivery-card .images-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.delivery-card .img-box {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--bg);
    cursor: pointer;
}

.delivery-card .img-box img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.delivery-card .img-box:hover img { transform: scale(1.05); }

.delivery-card .img-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 6px;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 0.75rem;
    text-align: center;
    font-weight: 600;
}

.delivery-card .card-footer {
    padding: 10px 20px 15px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ====== REVIEWS ====== */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.review-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 25px;
    transition: all 0.3s ease;
    position: relative;
}

.review-card:hover {
    border-color: var(--secondary);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(236,72,153,0.1);
}

.review-card .review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.review-card .reviewer-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
}

.review-card .review-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.review-card .review-rating {
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.review-card .review-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.review-card .review-image {
    margin-top: 15px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.review-card .review-image img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.review-card .review-image:hover img {
    transform: scale(1.03);
}

.review-card .delete-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 12px;
    background: rgba(214,69,69,0.9);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.review-card:hover .delete-btn {
    opacity: 1;
}

/* Star Rating */
.star-rating {
    display: flex;
    gap: 5px;
    font-size: 1.5rem;
    cursor: pointer;
    direction: ltr;
    justify-content: flex-end;
}

.star-rating span {
    opacity: 0.3;
    transition: all 0.2s ease;
    filter: grayscale(1);
}

.star-rating span.active,
.star-rating span:hover,
.star-rating span:hover ~ span {
    opacity: 1;
    filter: grayscale(0);
}

/* ====== ADMIN PANEL ====== */
.admin-panel { display: none; }
.admin-panel.active { display: block; }

/* ====== STATS ====== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
}

.stat-card .stat-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.stat-card .stat-number {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card .stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 5px;
}

/* ====== ADMIN PRODUCTS TABLE ====== */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    border-radius: 12px;
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    padding: 14px 16px;
    text-align: right;
    border-bottom: 1px solid var(--border);
}

.admin-table th {
    background: var(--bg);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.admin-table tr {
    transition: all 0.2s ease;
}

.admin-table tr:hover {
    background: rgba(25,87,166,0.05);
}

.admin-table td {
    font-size: 0.95rem;
}

.admin-table .product-thumb {
    width: 50px;
    height: 35px;
    border-radius: 8px;
    object-fit: cover;
}

.admin-table .action-btns {
    display: flex;
    gap: 6px;
}

.admin-table .action-btns button {
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.admin-table .btn-edit {
    background: rgba(25,87,166,0.15);
    color: var(--info);
}

.admin-table .btn-edit:hover {
    background: var(--info);
    color: white;
}

.admin-table .btn-delete {
    background: rgba(214,69,69,0.15);
    color: var(--danger);
}

.admin-table .btn-delete:hover {
    background: var(--danger);
    color: white;
}

/* Price Rows in Modal */
.price-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.price-row input {
    padding: 10px 14px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: 'Cairo', sans-serif;
    font-size: 0.95rem;
}

.price-row input:focus {
    outline: none;
    border-color: var(--primary);
}

/* ====== EMPTY STATE ====== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state .icon { font-size: 4rem; margin-bottom: 15px; opacity: 0.5; }
.empty-state h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--text); }

/* ====== MODAL / LIGHTBOX ====== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.modal-overlay.active { display: flex; }

.modal-overlay img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.modal-close {
    position: absolute;
    top: 20px; right: 20px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    background: rgba(255,255,255,0.1);
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: all 0.3s ease;
    z-index: 1001;
}

.modal-close:hover { background: var(--danger); }

/* The close button above is also reused inside .modal-box (auth, cart,
   product dialogs) — those sit on the light card now, so the same
   white-on-white circle used for the fullscreen image viewer would be
   invisible there. Give it a dark tint by default, still flipping to the
   same red hover as above. */
.modal-box .modal-close {
    color: var(--text-muted);
    background: rgba(15,32,64,0.05);
}
.modal-box .modal-close:hover { background: var(--danger); color: white; }

/* Product Modal Box */
.modal-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 30px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    margin: auto;
    animation: scaleIn 0.3s ease;
}

.modal-box h2 {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
    letter-spacing: -0.02em;
    margin-bottom: 25px;
    text-align: center;
    color: var(--text);
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* ====== APP MODAL (بديل مُصمَّم بشكل الموقع لرسائل alert/confirm/prompt
   الافتراضية بتاعة المتصفح — بيستخدم نفس .modal-overlay/.modal-box فوق) ===== */
.app-modal-overlay { z-index: 4600; }

.app-modal-box { max-width: 440px; text-align: center; }

.app-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(25,87,166,0.12);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 16px;
}

.app-modal-box.app-modal-danger .app-modal-icon {
    background: rgba(214,69,69,0.12);
    color: var(--danger);
}

.app-modal-message {
    color: var(--text);
    font-size: 1.02rem;
    line-height: 1.8;
    white-space: pre-line;
    margin-bottom: 20px;
}

.app-modal-input-wrap { margin-bottom: 8px; text-align: start; }

.app-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.app-modal-actions .btn { flex: 1; justify-content: center; }

/* ====== TOAST ====== */
.toast-container {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
    pointer-events: all;
}

.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }
.toast.info { border-color: var(--primary); }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    to { opacity: 0; transform: translateY(-20px); }
}

/* ====== ADMIN LOGIN MODAL ====== */
.admin-login-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15,23,42,0.95);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.admin-login-overlay.active { display: flex; }

.admin-login-box {
    background: var(--card);
    border: 2px solid var(--primary);
    border-radius: 24px;
    padding: 40px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(25,87,166,0.2);
}

.admin-login-box .lock-icon {
    font-size: 4rem;
    margin-bottom: 15px;
}

.admin-login-box h2 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.admin-login-box p {
    color: var(--text-muted);
    margin-bottom: 25px;
    font-size: 0.9rem;
}

.admin-login-box input {
    width: 100%;
    padding: 16px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: 'Cairo', sans-serif;
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: 4px;
    margin-bottom: 15px;
}

.admin-login-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25,87,166,0.1);
}

/* ====== COMPRESSION PROGRESS ====== */
.compression-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15,23,42,0.9);
    z-index: 4000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.compression-overlay.active { display: flex; }

.compression-overlay .spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.compression-overlay p {
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 600;
}

.compression-overlay .progress-bar {
    width: 200px;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.compression-overlay .progress-bar-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ====== CUSTOM DATE PICKER ====== */
.date-group {
    background: linear-gradient(135deg, rgba(25,87,166,0.06), rgba(236,72,153,0.03));
    border: 1px solid rgba(25,87,166,0.2);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.date-group:hover {
    border-color: rgba(25,87,166,0.4);
    box-shadow: 0 8px 32px rgba(25,87,166,0.08);
}

.date-group::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(25,87,166,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.date-group > label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 14px;
    color: var(--text);
    position: relative;
    z-index: 1;
}

.date-group > label span:first-child {
    font-size: 1.3rem;
}

.date-optional-badge {
    margin-right: auto;
    background: rgba(25,87,166,0.12);
    color: #818cf8;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.date-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;
}

.date-picker-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(25,87,166,0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.date-picker-btn:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 20px rgba(25,87,166,0.6);
}

.date-picker-btn span {
    font-size: 1.3rem;
}

.date-input-wrapper input[type="text"] {
    width: 100%;
    padding: 18px 62px 18px 18px;
    background: rgba(15,23,42,0.7);
    border: 2px solid rgba(25,87,166,0.15);
    border-radius: 16px;
    color: var(--text);
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: right;
}

.date-input-wrapper input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25,87,166,0.1), inset 0 1px 2px rgba(0,0,0,0.1);
}

.date-input-wrapper input[type="text"].has-value {
    color: var(--text);
}

.date-input-wrapper input[type="text"].has-value ~ .date-today-badge {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
}

.date-today-badge {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(25,137,111,0.12);
    color: #4ade80;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    pointer-events: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(25,137,111,0.2);
}

.date-hint {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.date-hint span {
    color: var(--primary);
    font-size: 1rem;
}

/* Date Picker Modal */
.date-picker-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15,23,42,0.8);
    backdrop-filter: blur(10px);
    z-index: 5000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.date-picker-overlay.active { display: flex; }

.date-picker-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 24px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.5);
    animation: scaleIn 0.3s ease;
}

.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.date-picker-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
}

.date-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-nav-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
    text-align: center;
}

.date-picker-days span {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 6px 0;
}

.date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.date-picker-day {
    aspect-ratio: 1;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: 'Cairo', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-picker-day:hover:not(.disabled):not(.selected) {
    background: rgba(25,87,166,0.15);
}

.date-picker-day.other-month {
    color: var(--text-muted);
    opacity: 0.5;
}

.date-picker-day.today {
    border: 2px solid var(--primary);
    color: var(--primary);
}

.date-picker-day.selected {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    box-shadow: 0 4px 15px rgba(25,87,166,0.4);
}

.date-picker-day.disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.date-picker-footer {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}


.date-picker-clear,
.date-picker-today {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.date-picker-clear:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

.date-picker-today {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: white;
}

.date-picker-today:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(25,87,166,0.4);
}

/* Date badge in cards */
.date-badge-custom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 8px;
    box-shadow: 0 2px 8px rgba(25,87,166,0.3);
    animation: badgePop 0.3s ease;
    vertical-align: middle;
}

@keyframes badgePop {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ====== TERMS & CONDITIONS ====== */
.terms-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(25,87,166,0.08), rgba(53,198,216,0.04));
    border: 1px solid rgba(25,87,166,0.1);
    border-radius: 24px;
}

.terms-header h2 {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--text), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.terms-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.terms-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.terms-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.terms-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.terms-item:hover {
    border-color: rgba(25,87,166,0.2);
    transform: translateX(-4px);
}

.terms-item:hover::before {
    opacity: 1;
}

.terms-item h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--primary-light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.terms-item h3 .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 900;
    flex-shrink: 0;
}

.terms-item p {
    color: var(--text-muted);
    line-height: 1.9;
    font-size: 0.95rem;
    white-space: pre-line;
}

.store-tagline {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .terms-header { padding: 30px 15px; margin-bottom: 25px; }
    .terms-header h2 { font-size: 1.5rem; }
    .terms-header p { font-size: 1rem; }
    .terms-item { padding: 22px; border-radius: 16px; }
    .terms-item h3 { font-size: 1.05rem; }
    .terms-item p { font-size: 0.9rem; line-height: 1.8; }
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
    .header { padding: 6px 12px; flex-wrap: wrap; gap: 8px; }
    .logo-section h1 { font-size: 1.1rem; }
    .nav-tab { padding: 10px 18px; font-size: 0.9rem; }

        
    .product-detail-header { grid-template-columns: 1fr; }
        .deliveries-grid { grid-template-columns: 1fr; }
    .reviews-grid { grid-template-columns: 1fr; }
    .delivery-card .images-row { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .upload-grid { grid-template-columns: 1fr; }
    .upload-area { padding: 25px 15px; }

    .admin-table { font-size: 0.85rem; }
    .admin-table th, .admin-table td { padding: 10px 8px; }

    .price-row { grid-template-columns: 1fr 1fr; }
    .price-row input:nth-child(3) { grid-column: 1 / -1; }

    .filter-tabs { gap: 5px; }
    .filter-tab { padding: 6px 14px; font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .product-card .product-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .prices-table th, .prices-table td {
        padding: 10px 8px;
        font-size: 0.85rem;
    }

    .modal-box {
        padding: 20px;
        margin: 10px;
    }
}

/* ====== SECTION TITLES ====== */
.section-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 900;
    font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
    background: linear-gradient(135deg, var(--text), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ====== WHY CHOOSE US ====== */
.why-us {
    margin-bottom: 40px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.feature-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px 25px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.feature-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.feature-box:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 20px 50px rgba(25,87,166,0.12);
}

.feature-box:hover::before {
    transform: scaleX(1);
}

.feature-box .feature-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: inline-block;
    animation: bounce 2s infinite;
}

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

.feature-box h4 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text);
}

.feature-box p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ====== HOW TO ORDER ====== */
.how-to-order {
    margin: 50px 0;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(25,87,166,0.08), rgba(236,72,153,0.04));
    border: 1px solid rgba(25,87,166,0.15);
    border-radius: 24px;
}

.steps-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.step-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    min-width: 180px;
    flex: 1;
    max-width: 220px;
    transition: all 0.3s ease;
    position: relative;
}

.step-box:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(25,87,166,0.1);
}

.step-number {
    position: absolute;
    top: -15px;
    right: 50%;
    transform: translateX(50%);
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(25,87,166,0.4);
}

.step-icon {
    font-size: 2.5rem;
    margin: 15px 0 10px;
    display: block;
}

.step-box h4 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.step-box p {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.step-arrow {
    font-size: 1.5rem;
    color: var(--primary);
    opacity: 0.6;
    animation: arrowPulse 1.5s infinite;
}

@keyframes arrowPulse {
    0%, 100% { opacity: 0.6; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(5px); }
}

/* ====== FAQ ====== */
.faq-section {
    margin: 50px 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: rgba(25,87,166,0.3);
}

.faq-item.active {
    border-color: var(--primary);
    box-shadow: 0 8px 30px rgba(25,87,166,0.1);
}

.faq-question {
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    user-select: none;
}

.faq-question:hover {
    background: rgba(25,87,166,0.05);
}

.faq-question span:first-child {
    flex: 1;
}

.faq-toggle {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    color: var(--primary);
    margin-right: 10px;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding: 0 24px 18px;
}

.faq-answer p {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* ====== FOOTER ====== */
.site-footer {
    margin-top: 60px;
    padding: 50px 30px 20px;
    background: linear-gradient(180deg, rgba(30,41,59,0.5), rgba(15,23,42,0.9));
    border-top: 1px solid var(--border);
    border-radius: 30px 30px 0 0;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto 30px;
}

.footer-brand img {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid var(--primary);
    margin-bottom: 15px;
}

.footer-brand h3 {
    font-size: 1.3rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-links h4,
.footer-contact h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text);
}

.footer-links a {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    padding: 8px 0;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.footer-links a:hover {
    color: var(--primary-light);
    padding-right: 8px;
}

.footer-contact p {
    color: var(--text-muted);
    font-size: 0.95rem;
    padding: 6px 0;
}

.footer-bottom {
    text-align: center;
    padding-top: 25px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.footer-slogan {
    margin-top: 8px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ====== FLOATING WHATSAPP ====== */
.floating-whatsapp {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(37,211,102,0.4);
    z-index: 999;
    transition: all 0.3s ease;
    animation: whatsappPulse 2s infinite;
}

.floating-whatsapp:hover {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 12px 35px rgba(37,211,102,0.6);
}

@keyframes whatsappPulse {
    0%, 100% { box-shadow: 0 8px 25px rgba(37,211,102,0.4); }
    50% { box-shadow: 0 8px 35px rgba(37,211,102,0.7), 0 0 0 10px rgba(37,211,102,0.1); }
}

/* ====== RESPONSIVE ADDITIONS ====== */
@media (max-width: 768px) {
    
    .section-title {
        font-size: 1.3rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .steps-grid {
        flex-direction: column;
    }

    .step-arrow {
        transform: rotate(90deg);
        animation: arrowPulseMobile 1.5s infinite;
    }

    @keyframes arrowPulseMobile {
        0%, 100% { opacity: 0.6; transform: rotate(90deg) translateX(0); }
        50% { opacity: 1; transform: rotate(90deg) translateX(5px); }
    }

    .step-box {
        max-width: 100%;
        width: 100%;
    }

    .site-footer {
        padding: 30px 20px 15px;
    }

    .floating-whatsapp {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
        bottom: 20px;
        left: 20px;
    }
}

/* ====== ADMIN REVIEW DELETE BUTTON (IMPROVED) ====== */
.admin-review-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.admin-review-card:hover {
    border-color: var(--danger);
    box-shadow: 0 10px 40px rgba(214,69,69,0.1);
}

.admin-review-delete-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(214,69,69,0.9), rgba(220,38,38,0.95));
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 4px 15px rgba(214,69,69,0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.admin-review-delete-btn:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(214,69,69,0.5);
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.admin-review-delete-btn:active {
    transform: scale(0.95);
}

.admin-review-delete-btn .del-icon {
    font-size: 1rem;
}

.admin-review-delete-btn .del-text {
    font-size: 0.8rem;
}

.admin-review-content {
    padding: 22px 20px 18px;
}

.admin-review-name {
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: var(--text);
    padding-left: 100px;
}

.admin-review-stars {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.admin-review-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.admin-review-date {
    color: var(--text-muted);
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ====== ADMIN CATEGORIES SECTION ====== */
#adminCategoriesList .admin-table code {
    font-family: 'Courier New', monospace;
}

/* ====== FILTER TABS DYNAMIC ====== */
#filterTabsContainer {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* ========================================
   MOBILE RESPONSIVE ENHANCEMENTS
   ======================================== */

/* --- Base mobile improvements --- */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    /* Header */
    .header {
        padding: 10px 15px;
        flex-direction: row;
        gap: 8px;
    }
    .logo-section img {
        width: 40px;
        height: 40px;
    }
    .logo-section h1 {
        font-size: 1.1rem;
    }
    .logo-section span {
        font-size: 0.65rem;
    }
    .admin-badge {
        padding: 6px 12px;
        font-size: 0.75rem;
        gap: 4px;
    }

    /* Navigation tabs */
    .nav-tabs {
        padding: 10px 8px;
        gap: 6px;
        position: sticky;
        top: 66px;
        z-index: 99;
        background: var(--bg);
    }
    .nav-tab {
        padding: 8px 14px;
        font-size: 0.8rem;
        gap: 4px;
        border-radius: 10px;
        flex: 1;
        min-width: 0;
        justify-content: center;
    }
    .nav-tab .icon {
        font-size: 1rem;
    }
    .nav-tab span:last-child {
        display: none;
    }
    .nav-tab.active span:last-child {
        display: inline;
    }

    /* Sections */
    .section {
        padding: 10px 12px;
    }

    /* Hero */
    .hero {
        padding: 30px 15px;
        margin-bottom: 20px;
        border-radius: 16px;
    }
                    
    /* Filters */
    .filters-bar {
        gap: 10px;
        margin-bottom: 15px;
    }
    .search-box input {
        padding: 12px 40px 12px 14px;
        font-size: 0.95rem;
        border-radius: 12px;
    }
    .search-box .search-icon {
        right: 12px;
        font-size: 1rem;
    }
    .filter-tabs {
        gap: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .filter-tab {
        padding: 6px 14px;
        font-size: 0.75rem;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* Products Grid */
    .product-card {
        border-radius: 16px;
    }
    .product-card .product-body {
        padding: 14px;
    }
    .product-card .product-name {
        font-size: 1.05rem;
    }
    .product-card .product-desc {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
    }
    .product-card .product-price {
        font-size: 1rem;
    }
    .product-card .view-btn {
        opacity: 1;
        transform: translateY(0);
        position: static;
        margin-top: 12px;
        padding: 10px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    /* Product Detail */
    .product-detail-header {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 20px;
    }
    .product-detail-image {
        border-radius: 16px;
    }
    .product-detail-info h2 {
        font-size: 1.3rem;
    }
    .product-detail-info .detail-desc {
        font-size: 0.9rem;
    }
    /* Prices Table */
    .prices-table {
        font-size: 0.85rem;
        border-radius: 12px;
    }
    .prices-table th,
    .prices-table td {
        padding: 10px 8px;
    }
    .prices-table .sale-price {
        font-size: 1rem;
    }

    .order-btn {
        padding: 14px;
        font-size: 1rem;
        border-radius: 12px;
    }

    /* Cards */
    .card {
        padding: 18px;
        border-radius: 16px;
        margin-bottom: 15px;
    }
    .card-title {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    /* Forms */
    .form-group {
        margin-bottom: 15px;
    }
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 12px 14px;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 10px;
    }
    .form-group textarea {
        min-height: 80px;
    }

    /* Upload areas */
    .upload-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .upload-area {
        padding: 25px 15px;
        border-radius: 12px;
    }
    .upload-area .upload-icon {
        font-size: 2rem;
    }
    .upload-area .upload-text {
        font-size: 0.85rem;
    }

    /* Buttons */
    .btn {
        padding: 12px 24px;
        font-size: 0.95rem;
        border-radius: 10px;
    }
    .btn-sm {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Back button */
    .back-btn {
        padding: 8px 14px;
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    /* Deliveries */
    .deliveries-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .delivery-card {
        border-radius: 16px;
    }
    .delivery-card .card-header {
        padding: 12px 15px;
    }
    .delivery-card .delivery-number {
        font-size: 1rem;
    }
    .delivery-card .date {
        font-size: 0.75rem;
    }
    .delivery-card .card-body {
        padding: 12px 15px;
    }
    .delivery-card .images-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .delivery-card .img-box {
        border-radius: 10px;
    }
    .delivery-card .img-label {
        padding: 4px;
        font-size: 0.7rem;
    }
    .delivery-card .card-footer {
        padding: 8px 15px 12px;
    }

    /* Reviews */
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .review-card {
        padding: 18px;
        border-radius: 16px;
    }
    .review-card .review-header {
        margin-bottom: 10px;
    }
    .review-card .reviewer-name {
        font-size: 0.95rem;
    }
    .review-card .review-date {
        font-size: 0.75rem;
    }
    .review-card .review-rating {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    .review-card .review-text {
        font-size: 0.9rem;
    }
    .review-card .delete-btn {
        opacity: 1;
        top: 10px;
        left: 10px;
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    /* Star rating */
    .star-rating {
        font-size: 1.3rem;
        gap: 4px;
    }

    /* Admin review card */
    .admin-review-card {
        border-radius: 16px;
    }
    .admin-review-delete-btn {
        top: 10px;
        left: 10px;
        padding: 6px 12px;
        font-size: 0.75rem;
        border-radius: 10px;
    }
    .admin-review-delete-btn .del-text {
        display: none;
    }
    .admin-review-content {
        padding: 18px 15px 15px;
    }
    .admin-review-name {
        font-size: 0.95rem;
        padding-left: 50px;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }
    .stat-card {
        padding: 15px;
        border-radius: 12px;
    }
    .stat-card .stat-icon {
        font-size: 1.5rem;
        margin-bottom: 6px;
    }
    .stat-card .stat-number {
        font-size: 1.5rem;
    }
    .stat-card .stat-label {
        font-size: 0.8rem;
    }

    /* Admin table */
    .admin-table {
        font-size: 0.8rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-table th,
    .admin-table td {
        padding: 8px 10px;
        white-space: nowrap;
    }
    .admin-table .product-thumb {
        width: 40px;
        height: 28px;
    }
    .admin-table .action-btns {
        gap: 4px;
    }
    .admin-table .action-btns button {
        padding: 5px 8px;
        font-size: 0.75rem;
    }

    /* Price rows */
    .price-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .price-row input {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    .price-row input:nth-child(3) {
        grid-column: 1 / -1;
    }
    .price-row .btn-danger {
        grid-column: 1 / -1;
        justify-self: start;
    }

    /* Empty state */
    .empty-state {
        padding: 40px 15px;
    }
    .empty-state .icon {
        font-size: 3rem;
    }
    .empty-state h3 {
        font-size: 1.1rem;
    }

    /* Modals */
    .modal-overlay {
        padding: 10px;
        align-items: flex-end;
    }
    .modal-overlay.active {
        align-items: flex-end;
    }
    .modal-box {
        padding: 20px;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        margin: 0;
        width: 100%;
        animation: slideUp 0.3s ease;
    }
    @keyframes slideUp {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    .modal-box h2 {
        font-size: 1.2rem;
        margin-bottom: 18px;
    }
    .modal-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    .modal-overlay img {
        max-width: 95%;
        max-height: 80vh;
    }

    /* Admin login */
    .admin-login-overlay {
        padding: 15px;
    }
    .admin-login-box {
        padding: 30px 20px;
        border-radius: 20px;
    }
    .admin-login-box .lock-icon {
        font-size: 3rem;
    }
    .admin-login-box h2 {
        font-size: 1.2rem;
    }
    .admin-login-box input {
        padding: 14px;
        font-size: 1.1rem;
    }

    /* Compression overlay */
    .compression-overlay .spinner {
        width: 50px;
        height: 50px;
    }
    .compression-overlay p {
        font-size: 0.95rem;
    }

    /* Toast */
    .toast-container {
        top: 75px;
        left: 10px;
        right: 10px;
        transform: none;
        width: auto;
    }
    .toast {
        padding: 12px 18px;
        font-size: 0.9rem;
    }

    /* Date picker */
    .date-picker-overlay {
        padding: 10px;
        align-items: flex-end;
    }
    .date-picker-box {
        border-radius: 20px 20px 0 0;
        padding: 20px;
        animation: slideUp 0.3s ease;
    }
    .date-picker-header {
        margin-bottom: 15px;
    }
    .date-picker-title {
        font-size: 1rem;
    }
    .date-nav-btn {
        width: 32px;
        height: 32px;
    }
    .date-picker-day {
        font-size: 0.85rem;
        border-radius: 10px;
    }

    /* Date group */
    .date-group {
        padding: 18px;
        border-radius: 16px;
    }
    .date-group > label {
        font-size: 0.95rem;
    }
    .date-input-wrapper input[type="text"] {
        padding: 14px 55px 14px 14px;
        font-size: 16px;
    }
    .date-picker-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .date-today-badge {
        padding: 3px 8px;
        font-size: 0.65rem;
    }

    /* Section titles */
    .section-title {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

    /* Why us */
    .why-us {
        margin-bottom: 30px;
    }
    .features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .feature-box {
        padding: 20px 18px;
        border-radius: 16px;
    }
    .feature-box .feature-icon {
        font-size: 2.2rem;
        margin-bottom: 10px;
    }
    .feature-box h4 {
        font-size: 1rem;
    }
    .feature-box p {
        font-size: 0.85rem;
    }

    /* How to order */
    .how-to-order {
        margin: 30px 0;
        padding: 25px 15px;
        border-radius: 16px;
    }
    .steps-grid {
        flex-direction: column;
        gap: 10px;
    }
    .step-box {
        padding: 20px 15px;
        min-width: auto;
        max-width: 100%;
        width: 100%;
    }
    .step-number {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    .step-icon {
        font-size: 2rem;
        margin: 10px 0 8px;
    }
    .step-box h4 {
        font-size: 0.95rem;
    }
    .step-box p {
        font-size: 0.8rem;
    }
    .step-arrow {
        transform: rotate(90deg);
        font-size: 1.2rem;
    }

    /* FAQ */
    .faq-section {
        margin: 30px 0;
    }
    .faq-question {
        padding: 14px 18px;
        font-size: 0.9rem;
    }
    .faq-item.active .faq-answer {
        padding: 0 18px 14px;
    }
    .faq-answer p {
        font-size: 0.85rem;
    }

    /* Footer */
    .site-footer {
        margin-top: 40px;
        padding: 30px 15px 15px;
        border-radius: 20px 20px 0 0;
    }
    .footer-content {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 20px;
    }
    .footer-brand img {
        width: 50px;
        height: 50px;
    }
    .footer-brand h3 {
        font-size: 1.1rem;
    }
    .footer-brand p {
        font-size: 0.85rem;
    }
    .footer-links h4,
    .footer-contact h4 {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    .footer-links a {
        font-size: 0.9rem;
        padding: 6px 0;
    }
    .footer-contact p {
        font-size: 0.9rem;
        padding: 4px 0;
    }
    .footer-bottom {
        padding-top: 15px;
        font-size: 0.75rem;
    }

    /* Floating WhatsApp */
    .floating-whatsapp {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
        bottom: 15px;
        left: 15px;
    }

    /* Skeleton */
    .products-skeleton {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .skeleton-card {
        padding: 15px;
        border-radius: 16px;
    }

    /* Product reviews card */
    .product-reviews-card {
        margin-top: 15px;
    }
    .add-review-public {
        padding-top: 15px;
    }
    .add-review-public h4 {
        font-size: 1rem;
        margin-bottom: 12px;
    }
}

/* --- Extra small screens (<= 480px) --- */
@media (max-width: 480px) {
    .nav-tab {
        padding: 8px 10px;
        font-size: 0.75rem;
    }
    .nav-tab .icon {
        font-size: 1.1rem;
    }
    .nav-tab span:last-child {
        display: none !important;
    }

        
    .product-card .product-footer {
        flex-direction: row;
        align-items: center;
    }

    .prices-table th,
    .prices-table td {
        padding: 8px 6px;
        font-size: 0.8rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-box {
        padding: 15px;
    }

    .admin-login-box {
        padding: 25px 15px;
    }
}

/* --- Touch-friendly improvements --- */
@media (hover: none) and (pointer: coarse) {
    .product-card:hover {
        transform: none;
    }
    .product-card:hover .product-image {
        transform: none;
    }
    .product-card .view-btn {
        opacity: 1;
        transform: translateY(0);
        position: static;
        margin-top: 12px;
    }
    .feature-box:hover {
        transform: none;
    }
    .delivery-card:hover {
        transform: none;
    }
    .review-card:hover {
        transform: none;
    }
    .review-card .delete-btn {
        opacity: 1;
    }
    .step-box:hover {
        transform: none;
    }
    .stat-card:hover {
        transform: none;
    }
    .faq-item:hover {
        border-color: var(--border);
    }
    .admin-review-delete-btn {
        opacity: 1;
    }
}

/* --- Safe area for notched phones --- */
@supports (padding: max(0px)) {
    .header {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
    .section {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    .floating-whatsapp {
        left: max(15px, env(safe-area-inset-left));
        bottom: max(15px, env(safe-area-inset-bottom));
    }
}

/* --- Landscape mobile --- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 20px 15px;
    }
        .nav-tabs {
        position: relative;
        top: auto;
    }
    .modal-box {
        max-height: 95vh;
    }
}

/* ====== HEADER & NAVIGATION (Single Row) ====== */
.header-nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}
/* A hairline glow along the bottom edge — subtle premium touch, not a
   full redesign of the layout. */
.header-nav-wrapper::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(25,87,166,0.5), transparent);
    pointer-events: none;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px;
    background: transparent;
    border-bottom: none;
    position: static;
    z-index: 100;
    gap: 15px;
}

.logo-section {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo-section:hover {
    transform: translateY(-1px) scale(1.02);
}
.logo-section img {
    transition: filter 0.25s ease;
}
.logo-section:hover img {
    filter: drop-shadow(0 0 10px rgba(25,87,166,0.5));
}

.nav-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    flex-wrap: wrap;
    border-bottom: none;
    flex: 1;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 14px;
    backdrop-filter: blur(6px);
}

.nav-tab {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    transition: color 0.2s ease, background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
    position: relative;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.nav-tab::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-tab:hover {
    color: var(--text);
    background: rgba(25,87,166,0.08);
    transform: translateY(-1px);
}

.nav-tab:active {
    transform: translateY(0) scale(0.97);
}

.nav-tab.active {
    background: linear-gradient(180deg, rgba(25,87,166,0.16), rgba(25,87,166,0.05));
    color: var(--primary-light);
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(25,87,166,0.25) inset, 0 4px 14px rgba(25,87,166,0.15);
}

.nav-tab.active::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-tab .icon { display: none; }


/* Responsive */
@media (max-width: 1024px) {
    .header {
        padding: 10px 15px;
        gap: 10px;
    }
    .nav-tab {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .header {
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 5px;
    }
    .nav-tabs {
        order: 3;
        width: 100%;
        justify-content: center;
        padding-top: 5px;
        border-top: 1px solid rgba(30,41,59,0.4);
    }
    .nav-tab {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
    .nav-tab i {
        display: block;
        margin-left: 0;
        margin-bottom: 2px;
        font-size: 1.1rem;
    }
    .nav-tab {
        flex-direction: column;
        padding: 6px 8px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .nav-tab span:last-child {
        display: none !important;
    }
    .nav-tab i {
        margin-bottom: 0;
    }
}

.store-subtitle {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 2px;
}

.store-tagline {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.nav-tab i {
    margin-left: 6px;
    font-size: 0.9rem;
}

.admin-badge i {
    font-size: 1rem;
}

.trust-badge i {
    margin-left: 6px;
}

.feature-icon i {
    font-size: 2.5rem;
    color: var(--primary-light);
}

.step-icon i {
    font-size: 2rem;
    color: var(--primary);
}

.faq-toggle i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle i {
    transform: rotate(45deg);
}

.search-icon i {
    font-size: 1rem;
}

.star-rating span i {
    font-size: 1.3rem;
}

.upload-icon i {
    font-size: 2.5rem;
    color: var(--text-muted);
}

.card-title i {
    font-size: 1.2rem;
    color: var(--primary-light);
}

.stat-icon i {
    font-size: 2rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-links a i,
.footer-contact p i {
    margin-left: 6px;
    color: var(--primary-light);
}

.footer-slogan i {
    margin-left: 6px;
}

.floating-whatsapp i {
    font-size: 1.8rem;
}

.modal-close i {
    font-size: 1.5rem;
}

.date-picker-btn i {
    font-size: 1.2rem;
}

.back-btn i {
    margin-left: 6px;
}

.lock-icon i {
    font-size: 4rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 768px) {

    .nav-tab i {
        display: block;
        margin-left: 0;
        margin-bottom: 2px;
        font-size: 1.1rem;
    }

    .nav-tab {
        flex-direction: column;
        padding: 6px 8px;
        font-size: 0.75rem;
    }

    .store-subtitle {
        font-size: 0.6rem;
        letter-spacing: 1px;
        color: #fbbf24;
    }

    .feature-icon i {
        font-size: 2rem;
    }

    .step-icon i {
        font-size: 1.5rem;
    }

    .floating-whatsapp i {
        font-size: 1.5rem;
    }

    .lock-icon i {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {

    .nav-tab span:last-child {
        display: none !important;
    }

    .nav-tab i {
        margin-bottom: 0;
    }
}

/* ====== HAMBURGER BUTTON (Mobile Only) ====== */
.hamburger-btn {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 1.3rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.hamburger-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ====== MOBILE DRAWER ====== */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--card);
    border-left: 1px solid var(--border);
    z-index: 2001;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(0,0,0,0.5);
}

.mobile-drawer.active {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(25,87,166,0.1), rgba(53,198,216,0.05));
}

.drawer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drawer-logo img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid var(--primary);
}

.drawer-logo span {
    font-size: 1.2rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.drawer-close {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.drawer-close:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 15px;
    gap: 8px;
}

.drawer-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    border-radius: 14px;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: 'Cairo', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: right;
    width: 100%;
}

.drawer-item i {
    font-size: 1.2rem;
    width: 28px;
    text-align: center;
    color: var(--primary-light);
}

.drawer-item:hover,
.drawer-item.active {
    background: linear-gradient(135deg, rgba(25,87,166,0.15), rgba(53,198,216,0.08));
    color: var(--primary-light);
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ====== HERO FIX FOR MOBILE ====== */
@media (max-width: 768px) {
    .hero {
        aspect-ratio: 16 / 9;
        max-height: none;
        width: 100%;
        padding: 0;
        margin: 0;
        margin-bottom: 20px;
        border: none;
        background: transparent;
        border-radius: 16px;
        overflow: hidden;
    }
    .hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        border-radius: 16px;
    }
}

/* ====== MOBILE HEADER ADJUSTMENTS ====== */
@media (max-width: 768px) {
    .hamburger-btn {
        display: flex;
    }

    .nav-tabs {
        display: none !important;
    }

    .header {
        padding: 10px 15px;
    }

    .logo-section h1 {
        font-size: 1.1rem;
    }

    .logo-section img {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .mobile-drawer {
        width: 85%;
        max-width: 300px;
    }

    .drawer-item {
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    .drawer-logo span {
        font-size: 1.05rem;
    }
}

/* ====== DURATION PILLS & PRICE DISPLAY ====== */
.durations-section {
    margin: 20px 0;
}

.type-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: var(--bg);
    padding: 6px;
    border-radius: 16px;
    border: 1px solid var(--border);
}

.type-btn {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    border-radius: 12px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.type-btn:hover {
    color: var(--text);
    background: rgba(25,87,166,0.08);
}

.type-btn.active[data-type="shared"] {
    background: linear-gradient(135deg, #1957a6, #122b54);
    color: white;
    border-color: #1957a6;
    box-shadow: 0 4px 15px rgba(25,87,166,0.3);
}

.type-btn.active[data-type="private"] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    border-color: #8b5cf6;
    box-shadow: 0 4px 15px rgba(139,92,246,0.3);
}

.type-btn.active[data-type="personal"] {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: white;
    border-color: #14b8a6;
    box-shadow: 0 4px 15px rgba(20,184,166,0.3);
}

/* Live Canboso stock badge on the product page */
.canboso-stock-badge {
    display: none;
    margin-top: 14px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.canboso-stock-badge.show { display: block; }
.canboso-stock-badge.canboso-stock-ok {
    color: var(--success-light);
    background: rgba(25,137,111,0.1);
    border-color: rgba(25,137,111,0.25);
}
.canboso-stock-badge.canboso-stock-low {
    color: #fbbf24;
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.25);
}
.canboso-stock-badge.canboso-stock-unknown {
    color: var(--danger);
    background: rgba(214,69,69,0.08);
    border-color: rgba(214,69,69,0.2);
}

/* Compact stock pill — used on grid cards (small) and inline elsewhere */
.stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-muted);
    width: fit-content;
}
.stock-pill.canboso-stock-ok {
    color: var(--success-light);
    background: rgba(25,137,111,0.1);
    border-color: rgba(25,137,111,0.25);
}
.stock-pill.canboso-stock-low {
    color: #fbbf24;
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.25);
}
.stock-pill.canboso-stock-unknown {
    color: var(--danger);
    background: rgba(214,69,69,0.08);
    border-color: rgba(214,69,69,0.2);
}

/* Admin-only Canboso manual fulfillment tool (Admin section) */
.canboso-tool-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.canboso-tool-row select {
    flex: 1;
    min-width: 160px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.9rem;
}
.canboso-tool-row select:disabled { opacity: 0.5; cursor: not-allowed; }
.canboso-tool-stock {
    margin-top: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    min-height: 1.2em;
}

.price-display-card {
    background: linear-gradient(135deg, var(--card), var(--bg-light));
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.price-display-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(25,87,166,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.price-discount-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, var(--danger), #dc2626);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 4px 15px rgba(214,69,69,0.3);
    animation: badgePop 0.3s ease;
}

.price-type-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-light);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.price-value-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
}

.price-current {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--text), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.price-currency {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-muted);
}

.price-original-row {
    margin-top: 5px;
}

.price-original-line {
    color: var(--text-muted);
    text-decoration: line-through;
    font-size: 1rem;
    opacity: 0.7;
}

.price-duration-label {
    margin-top: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--success-light);
    background: rgba(25,137,111,0.1);
    display: inline-block;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(25,137,111,0.2);
}

.duration-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.duration-pill {
    padding: 12px 24px;
    border: 2px solid var(--border);
    background: var(--card);
    color: var(--text-muted);
    border-radius: 14px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
    text-align: center;
}

.duration-pill:hover {
    border-color: var(--primary);
    color: var(--text);
    background: rgba(25,87,166,0.08);
    transform: translateY(-2px);
}

.duration-pill.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(25,87,166,0.3);
    transform: translateY(-2px);
}

/* Admin price row update — duration, private/personal/shared/original
   prices, an optional Canboso id-mapping sub-row, then the delete button. */
.price-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border);
}
.price-row input {
    flex: 1 1 130px;
}
.price-row-canboso {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
}
.price-row-canboso-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.price-row-canboso input {
    flex: 1 1 140px;
    font-size: 0.82rem;
}
.price-row .btn-danger {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .price-row input { flex: 1 1 100%; }
    .price-row-canboso input { flex: 1 1 100%; }

    .price-current {
        font-size: 2.2rem;
    }
    .price-display-card {
        padding: 20px;
        border-radius: 20px;
    }
    .type-btn {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    .duration-pill {
        padding: 10px 18px;
        font-size: 0.85rem;
        min-width: 70px;
    }
    .price-discount-badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
}

@media (max-width: 480px) {
    .price-row {
        grid-template-columns: 1fr 1fr;
    }
    .duration-pill {
        flex: 1;
        min-width: 60px;
        padding: 8px 14px;
    }
}

/* ====== UNAVAILABLE DURATION ====== */
.duration-pill.unavailable {
    opacity: 0.35 !important;
    text-decoration: line-through;
    cursor: not-allowed !important;
    background: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none;
}

/* ====== DRAG & DROP SORTING ====== */
.sortable-row {
    transition: all 0.2s ease;
    cursor: grab;
}

.sortable-row:active {
    cursor: grabbing;
}

.sortable-row.dragging {
    opacity: 0.5;
    background: var(--primary) !important;
    color: white;
}

.drag-handle {
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.2s ease;
}

.sortable-row:hover .drag-handle {
    color: var(--primary);
}

.sortable-row:hover {
    background: rgba(25,87,166,0.05);
}

/* Mobile: show drag handle larger */
@media (max-width: 768px) {
    .drag-handle {
        font-size: 1.2rem;
        padding: 10px;
    }
    .sortable-row {
        cursor: default;
    }
}
/* ====== SUB-OPTIONS UNDER A DURATION+TYPE (e.g. "500 Credits" vs "1200 Credits") ====== */
.option-chips {
    display: none;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.option-chips-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.option-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.option-chip {
    padding: 10px 18px;
    border: 2px solid var(--border);
    background: var(--card);
    color: var(--text-muted);
    border-radius: 12px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.option-chip:hover {
    border-color: var(--primary);
    color: var(--text);
    background: rgba(25,87,166,0.08);
}
.option-chip.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 15px rgba(25,87,166,0.3);
}

/* ============================================================
   AUTH + WALLET (نظام تسجيل الدخول والرصيد)
   ============================================================ */

.account-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.account-chip:hover {
    border-color: var(--primary);
    background: var(--card-hover);
}

.account-chip.logged-in {
    background: linear-gradient(135deg, rgba(25,87,166,0.15), rgba(53,198,216,0.15));
    border-color: var(--primary);
}

.account-chip-balance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(188,132,38,0.15);
    color: var(--warning);
    padding: 2px 9px;
    border-radius: 30px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: 6px;
}

.drawer-item.account-chip {
    justify-content: flex-start;
    background: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
}

/* ---- Auth modal ---- */
.auth-error {
    background: rgba(214,69,69,0.12);
    border: 1px solid rgba(214,69,69,0.35);
    color: var(--danger);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.auth-switch {
    text-align: center;
    margin-top: 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.auth-switch a {
    color: var(--primary-light);
    font-weight: 700;
    margin-right: 6px;
    cursor: pointer;
    text-decoration: none;
}

.auth-switch a:hover { text-decoration: underline; }

.auth-forgot-row {
    text-align: left;
    margin: -6px 0 12px;
    font-size: 0.8rem;
}
.auth-forgot-row a {
    color: var(--text-muted);
    text-decoration: none;
}
.auth-forgot-row a:hover { color: var(--primary-light); text-decoration: underline; }

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    margin: 14px 0;
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border);
}
.auth-divider span { padding: 0 10px; }

.btn-google {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
}
.btn-google:hover { border-color: var(--primary); background: var(--card-hover); }
.btn-google i { color: #ea4335; }

/* ---- Cart chip (header) ---- */
.cart-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text);
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.cart-chip:hover { border-color: var(--primary); background: var(--card-hover); }
.cart-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* ---- Add to cart button (product detail) ---- */
.add-to-cart-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 2px dashed var(--primary);
    color: var(--primary-light);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px;
    border-radius: 14px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}
.add-to-cart-btn:hover { background: rgba(25,87,166,0.08); }

/* ---- Cart modal ---- */
.cart-item-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.cart-item-name { font-weight: 700; font-size: 0.9rem; }
.cart-item-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.cart-item-qty { display: flex; align-items: center; gap: 6px; }
.cart-item-qty span { min-width: 18px; text-align: center; font-weight: 700; }
.cart-item-price { font-weight: 700; color: var(--primary-light); white-space: nowrap; }
.cart-item-remove {
    background: transparent;
    border: none;
    color: var(--danger, #ef4444);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 6px;
}
.cart-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 14px 0;
    margin: 6px 0 14px;
    border-top: 1px solid var(--border);
}

/* ---- Wallet modal ---- */
.wallet-balance-box {
    background: linear-gradient(135deg, rgba(25,87,166,0.15), rgba(53,198,216,0.1));
    border: 1px solid rgba(25,87,166,0.3);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    margin-bottom: 18px;
}

.wallet-balance-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.wallet-balance-value {
    font-size: 2.1rem;
    font-weight: 900;
    color: var(--primary-light);
}

.wallet-balance-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* زرار نسخ صغير جنب المبلغ/رقم المحفظة في مودالات الدفع
   والشحن — شوف copyPaymentValue() في auth.js. */
.copy-inline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-inline-start: 6px;
    border: 1px solid rgba(25,87,166,0.35);
    border-radius: 7px;
    background: rgba(25,87,166,0.12);
    color: var(--primary-light);
    font-size: 0.75rem;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s ease, transform 0.1s ease;
}

.copy-inline-btn:hover {
    background: rgba(25,87,166,0.22);
}

.copy-inline-btn:active {
    transform: scale(0.92);
}

.copy-inline-btn.copied {
    background: rgba(74,222,128,0.18);
    border-color: rgba(74,222,128,0.4);
    color: #4ade80;
}

.wallet-test-box {
    background: rgba(188,132,38,0.08);
    border: 1px dashed var(--warning);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
}

.wallet-topup-box {
    background: rgba(25,87,166,0.08);
    border: 1px solid rgba(25,87,166,0.3);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
}

.wallet-topup-box .wallet-test-title { color: var(--primary-light); }

/* ====== SUPER ADMIN DASHBOARD (hlalywsf352@gmail.com) ====== */
.modal-box-lg { max-width: 560px; }

.admin-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.admin-tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 10px 8px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.admin-tab-btn.active {
    color: var(--primary-light);
    border-bottom-color: var(--primary);
}

.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }

.admin-customer-info {
    background: rgba(25,87,166,0.08);
    border: 1px solid rgba(25,87,166,0.3);
    border-radius: 10px;
    padding: 12px;
    margin-top: 10px;
    font-size: 0.85rem;
    line-height: 1.9;
}

.admin-custom-prices-list {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-custom-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
}

.admin-custom-price-row .price {
    font-weight: 800;
    color: var(--primary-light);
    white-space: nowrap;
}

/* ---- أداة الخصم السريع على كل الأسعار دفعة واحدة ---- */
.admin-bulk-discount-box {
    background: rgba(25,87,166,0.08);
    border: 1px solid rgba(25,87,166,0.3);
    border-radius: 10px;
    padding: 12px;
    margin: 12px 0;
}

.admin-bulk-discount-box label {
    font-size: 0.8rem;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

/* ---- قائمة كل المنتجات القابلة للتعديل في تبويب "أسعار مخصصة" ---- */
.admin-custom-prices-editor {
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 0;
    padding-left: 4px;
}

.admin-price-product-group {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
}

.admin-price-product-title {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--primary-light);
    margin-bottom: 8px;
}

.admin-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.admin-price-row:first-of-type { border-top: none; }

/* مدة فيها أكتر من باقة: عنوان المدة من غير سعر، والباقات تحتها */
.admin-price-duration-head {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text);
    padding: 8px 0 4px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-price-product-title + .admin-price-duration-head { border-top: none; }

.admin-price-options {
    margin-inline-start: 14px;
    padding-inline-start: 10px;
    border-inline-start: 2px solid var(--border);
}

.admin-price-row-option .admin-price-row-label { font-size: 0.76rem; }

.admin-price-row-label {
    flex: 1 1 auto;
    font-size: 0.78rem;
    color: var(--text);
    min-width: 110px;
}

.admin-price-row-base {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.admin-price-row-input {
    width: 90px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: 'Cairo', sans-serif;
    font-size: 0.8rem;
    text-align: center;
}

.btn-secondary {
    background: rgba(148,163,184,0.15);
    color: var(--text);
    border: 1px solid var(--border);
}

.wallet-test-title {
    font-weight: 700;
    color: var(--warning);
    font-size: 0.85rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wallet-test-row {
    display: flex;
    gap: 8px;
}

.wallet-test-row input {
    flex: 1;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
}

.wallet-test-note {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.wallet-tx-title {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}

.wallet-tx-list {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wallet-tx-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
}

.wallet-tx-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.wallet-tx-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.wallet-tx-amount {
    font-weight: 800;
    font-size: 0.95rem;
}

.wallet-tx-amount.positive { color: var(--success); }
.wallet-tx-amount.negative { color: var(--danger); }

/* ---- زرار "شراء الآن" الأساسي (الدفع من الرصيد — تلقائي بالكامل) ----
   شكل "3D" شبه زرار الألعاب (chunky press button): حافة سفلية سمكية
   بتدي إحساس إن الزرار له عمق حقيقي، وبتدوس عليه فعلاً (بينزل لتحت) لما
   تضغطه. لمعة (shine) بتمر عليه كل شوية عشان تلفت النظر وتحمّس للشراء
   من غير ما تبقى مزعجة، وأيقونة بتعمل bounce خفيف مستمر. */
.buy-now-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 13px 16px 11px;
    background: linear-gradient(160deg, #34e075, var(--success) 55%, #16a34a);
    color: white;
    border: none;
    border-radius: 16px;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 8px;
    /* الجزء ده هو سر شكل الـ 3D: ظل صلب قريب (الحافة السفلية اللي بتدي
       الإحساس بالسمك) + توهج ناعم بعيد (الإضاءة العامة حوالين الزرار). */
    box-shadow: 0 4px 0 #14803a, 0 8px 18px rgba(25,137,111,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease;
}

.buy-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #14803a, 0 10px 22px rgba(25,137,111,0.32);
    filter: brightness(1.05);
}

.buy-now-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #14803a, 0 3px 10px rgba(25,137,111,0.25);
}

.buy-now-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.buy-now-btn:disabled.ready::before,
.buy-now-btn:disabled .buy-now-icon {
    animation: none;
}

/* اللمعة السايحة — pseudo-element بيعدي عرض الزرار كل ٣ ثواني ونص، وبيقف
   شوية قبل ما يرجع تاني. متطبقة بس على الحالة الجاهزة للشراء (ready)
   عشان زرار "رصيدك مش كافي" ميلمعش وكأنه بيحمّس على حاجة مش متاحة. */
.buy-now-btn.ready::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    animation: buyBtnShine 3.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes buyBtnShine {
    0%, 42% { left: -60%; }
    62%, 100% { left: 130%; }
}

.buy-now-btn.ready .buy-now-icon {
    animation: buyBtnIconPulse 1.8s ease-in-out infinite;
}

@keyframes buyBtnIconPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(-6deg); }
}

.buy-now-icon {
    font-size: 1.15rem;
    line-height: 1;
    display: block;
}

.buy-now-label {
    font-size: 0.95rem;
    font-weight: 800;
}

/* شارة صغيرة جوه الزرار، في أعلى أقصى الحافة اليمين ("الأسرع"، "آمن
   ومباشر"...) — ribbon بسيط بيدي إحساس تحفيزي خفيف من غير ما ياخد مساحة
   كبيرة أو يتقطع بسبب overflow:hidden بتاع الزرار (كان ده اللي بيحصل
   لما كانت الشارة طالعة برا الزرار من فوق). */
.buy-now-badge {
    position: absolute;
    top: 7px;
    right: 10px;
    left: auto;
    transform: none;
    background: linear-gradient(135deg, #fde047, #f59e0b);
    color: #1e1300;
    font-size: 0.56rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    letter-spacing: 0.2px;
    z-index: 2;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.buy-now-btn .buy-now-balance {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.92;
}

.buy-now-btn.insufficient {
    background: var(--card);
    border: 1.5px solid var(--danger);
    color: var(--danger);
    box-shadow: 0 4px 0 rgba(214,69,69,0.2);
}

.buy-now-btn.insufficient:hover {
    box-shadow: 0 6px 0 rgba(214,69,69,0.2);
}

.buy-now-btn.insufficient:active {
    box-shadow: 0 1px 0 rgba(214,69,69,0.2);
}

/* ---- زرار "الشراء المباشر" (فودافون كاش — تحويل مباشر، شكل مختلف عن
   زرار "الشراء بالرصيد" عشان العميل يفرّق بينهم بصريًا بسهولة) ---- */
.buy-now-btn.vodafone-cash-btn {
    background: linear-gradient(160deg, #ef4444, #dc2626 55%, #b91c1c);
    box-shadow: 0 4px 0 #7a0000, 0 8px 18px rgba(220,38,38,0.25);
}

.buy-now-btn.vodafone-cash-btn:hover {
    box-shadow: 0 6px 0 #7a0000, 0 10px 22px rgba(220,38,38,0.32);
}

.buy-now-btn.vodafone-cash-btn:active {
    box-shadow: 0 1px 0 #7a0000, 0 3px 10px rgba(220,38,38,0.25);
}

/* الموبايل: ازرار أصغر شوية وأقرب لبعض عشان الصفحة تكون منظمة بالطول
   من غير أي زيادة في الحجم أو الألوان. */
@media (max-width: 640px) {
    .buy-now-btn {
        width: 100%;
        max-width: 100%;
        padding: 11px 14px 9px;
        border-radius: 14px;
        font-size: 0.92rem;
        margin-top: 6px;
        gap: 1px;
    }
    .buy-now-icon { font-size: 1.05rem; }
    .buy-now-label { font-size: 0.9rem; }
    .buy-now-btn .buy-now-balance { font-size: 0.68rem; }
    .buy-now-badge {
        top: 6px;
        right: 8px;
        font-size: 0.52rem;
        padding: 2px 7px;
    }
}

.buy-now-unavailable {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    margin-top: 10px;
}

@media (max-width: 640px) {
    .account-chip-text { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
}

/* ====== عدد الحسابات + اختيار طريقة التحويل ====== */
.quantity-stepper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.quantity-stepper-label {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.quantity-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
}
.quantity-stepper .qty-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: var(--bg-light);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: background 0.2s;
}
.quantity-stepper .qty-btn:hover { background: var(--primary); }
.quantity-stepper .qty-input {
    width: 40px;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--text);
    font-weight: 700;
    font-size: 0.95rem;
    -moz-appearance: textfield;
}
.quantity-stepper .qty-input::-webkit-outer-spin-button,
.quantity-stepper .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-total-row {
    margin-top: 10px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--bg-light);
    border-radius: 8px;
    padding: 8px;
}
.price-total-row span { color: var(--primary-light); font-weight: 800; }

.wallet-method-options {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}
.wallet-method-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
    font-family: inherit;
    font-size: 0.9rem;
}
.wallet-method-btn i { font-size: 1.3rem; color: var(--text-muted); }
.wallet-method-btn.active {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
}
.wallet-method-btn.active i { color: var(--primary-light); }
.wallet-method-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.wallet-method-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    background: var(--warning);
    color: #1a1200;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
}
.wallet-method-note {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.6;
    margin-bottom: 4px;
}

/* ====== زرار "اشحن رصيدك" + "طلباتي" جوه مودال المحفظة ====== */
.wallet-actions-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

/* ====== طلباتي (Orders Modal) ====== */
.orders-filter-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.orders-filter-btn {
    flex: 0 0 auto;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.orders-filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.orders-list {
    max-height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
}

.order-item-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.order-item-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: rgba(25,87,166,0.12);
    color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.order-item-info {
    flex: 1;
    min-width: 0;
}

.order-item-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}

.order-item-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.order-item-right {
    flex: 0 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.order-item-amount {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--primary-light);
    white-space: nowrap;
}

.order-badge {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.order-badge-success { background: rgba(25,137,111,0.15); color: var(--success-light); }
.order-badge-pending { background: rgba(188,132,38,0.15); color: var(--warning); }
.order-badge-rejected { background: rgba(214,69,69,0.15); color: var(--danger); }

.order-item-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 0.76rem;
    color: var(--danger);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.order-item-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 0.78rem;
}

.order-item-details summary {
    cursor: pointer;
    color: var(--primary-light);
    font-weight: 700;
}

.order-item-details pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-light);
    border-radius: 8px;
    padding: 10px;
    margin-top: 8px;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--text);
}

@media (max-width: 640px) {
    .order-item-top { flex-wrap: wrap; }
    .order-item-right { flex-direction: row; align-items: center; margin-top: 8px; margin-right: 46px; }
}


/* ====== PACKAGE DETAIL (صفحة تفاصيل الباقة) ====== */
.package-detail-header-card {
    margin-bottom: 20px;
}

.package-detail-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.package-detail-icon {
    font-size: 3rem;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: 20px;
    border: 1px solid var(--border);
}

.package-detail-info h2 {
    margin: 6px 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
}

.package-items-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.package-item-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
}

.package-item-image {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-light);
}

.package-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.package-item-info {
    flex: 1;
    min-width: 0;
}

.package-item-name {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: 10px;
}

.package-item-info .duration-pills {
    justify-content: flex-start;
    margin-top: 0;
    margin-bottom: 10px;
}

.package-item-info .duration-pill {
    padding: 8px 16px;
    min-width: unset;
    font-size: 0.85rem;
}

.package-item-price {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--primary-light);
}

.package-item-duration {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.package-totals-card {
    text-align: unset;
}

.package-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-muted);
    padding: 8px 0;
}

.package-discount-row span:last-child {
    color: var(--success-light);
    font-weight: 800;
}

.package-final-row {
    text-align: center;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px dashed var(--border);
}

@media (max-width: 640px) {
    .package-item-card { flex-direction: row; align-items: flex-start; padding: 12px; }
    .package-item-image { width: 56px; height: 56px; }
    .package-item-name { font-size: 0.95rem; }
    .package-detail-header { flex-direction: row; align-items: flex-start; }
    .package-detail-icon { width: 60px; height: 60px; font-size: 2.2rem; }
}

/* ====== NAV TABS — FIXED-WIDTH, NEVER WRAP, SWIPE INSTEAD (FINAL OVERRIDE) ======
   في نسخ قديمة كان .nav-tabs عنده flex-wrap:wrap، فلما الخيارات (المنتجات/
   طلبات خاصة/التسليمات/الآراء/الشروط والأحكام...) ماكنتش بتلاقي مكان كافي،
   كانت بتنط لسطر تاني وحجم الشريط بيتغير. الحل: يفضل صف واحد ثابت دايمًا
   بعرض المساحة المتاحة بالكامل، ولو الخيارات مش لاقية مكان يبقى فيه سحب/
   سلايد أفقي سلس (باللمس على الموبايل، وبالماوس على الكمبيوتر — شوف
   setupNavTabsDragScroll في app.js) بدل ما يكسر السطر. نفس فكرة سحب
   الباقات (packages-track) بالظبط. اتحطت آخر الملف عشان تكسب أي قاعدة
   قديمة تانية باسم .nav-tabs/.nav-tab فوق. */
.nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    /* Fallback أول (center عادي) وبعدها safe center للمتصفحات اللي بتفهمها
       — لو الخيارات مش لاقية مكان تتوسط، تتراصف من البداية عشان تقدر
       تتسحب لآخرها من غير ما جزء يتقطع فوق. */
    justify-content: center;
    justify-content: safe center;
}

.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tabs.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.nav-tab {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .nav-tabs { flex-wrap: nowrap !important; }
}

@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap !important;
        justify-content: flex-start;
        justify-content: safe center;
    }
    .nav-tab {
        flex: 0 0 auto !important;
        flex-direction: row !important;
    }
    .nav-tab i {
        display: inline-block !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 480px) {
    .nav-tab span:last-child {
        display: inline !important;
    }
}

/* ====== EXTRA PRODUCTS (منتجات إضافية) ====== */
.extra-product-type-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 800;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 15px rgba(25,87,166,0.3);
}

/* ============================================================
   تحسين شامل للموبايل — تمريرة أخيرة ونهائية (Final Mobile Pass)
   ------------------------------------------------------------
   الهدف: كل عنصر يبقى بحجم مناسب ومتناسق مع باقي العناصر، والصفحة
   تبقى بسيطة وواضحة ومنظمة بالطول من غير عناصر عملاقة أو مبعثرة.
   الأقسام دي متعمدة تيجي في آخر الملف عشان تكسب أي تعارض مع قواعد
   موبايل قديمة متفرقة فوق (نفس specificity، اللي يجي بعدين بياخد
   الأولوية)، من غير ما نمسح أو نلمس أي حاجة تانية في الملف.
   ============================================================ */

@media (max-width: 768px) {
    /* ---- الهيدر: أصغر وأخف ومنظم في صفين واضحين بدل عشوائي ---- */
    .header {
        padding: 8px 12px;
        gap: 6px;
        row-gap: 6px;
    }
    .logo-section { gap: 8px; }
    .logo-section img {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }
    .logo-section h1 { font-size: 0.95rem; }
    .store-subtitle { font-size: 0.52rem; letter-spacing: 0.5px; margin-top: 0; }
    .store-tagline { font-size: 0.6rem; }

    .admin-badge {
        padding: 4px 10px;
        font-size: 0.65rem;
        gap: 4px;
        box-shadow: none;
    }
    .admin-badge i { font-size: 0.75rem; }

    .account-chip {
        padding: 5px 12px;
        font-size: 0.7rem;
        gap: 5px;
    }
    .account-chip i { font-size: 0.8rem; }
    .account-chip-balance { font-size: 0.62rem; }

    .hamburger-btn { width: 34px; height: 34px; font-size: 1.05rem; }

    /* الهيدر بقى أقصر، فالمسافة تحت اللي محسوبة للصفحة لازم تقل معاه
       عشان مفيش فراغ زيادة ومفيش تراكب. */
    body { padding-top: 100px; }

    /* ---- الكارت الأساسي: حواف أضيق شوية ومسافات أقرب لبعض ---- */
    .card { padding: 16px; margin-bottom: 14px; border-radius: 16px; }
    .card-title { font-size: 1.05rem; margin-bottom: 14px; gap: 8px; }

    /* ---- قسم اختيار المدة/الباقة ---- */
    .durations-section { margin: 14px 0; }

    .type-toggle { margin-bottom: 14px; padding: 4px; gap: 6px; }
    .type-btn { padding: 9px 10px; font-size: 0.82rem; gap: 5px; }

    .price-display-card { padding: 16px; border-radius: 16px; margin-bottom: 14px; }
    .price-type-label { font-size: 0.85rem; margin-bottom: 6px; }
    .price-current { font-size: 1.9rem; }
    .price-currency { font-size: 1rem; }
    .price-duration-label { font-size: 0.85rem; padding: 5px 14px; margin-top: 10px; }

    /* شارة "اختر الباقة" واختياراتها (زي Credits 500/1200) — أصغر
       وواحدة جنب التانية من غير ما تاخد مساحة كبيرة. */
    .option-chips { margin-top: 12px; padding-top: 12px; }
    .option-chips-label { font-size: 0.76rem; margin-bottom: 8px; }
    .option-chips-row { gap: 8px; }
    .option-chip { padding: 8px 14px; font-size: 0.78rem; border-radius: 10px; }

    /* ---- أزرار المدة (٦ شهور / ٣ شهور / شهر / ٧ أيام...) —
       شيبس صغيرة متساوية في صف واحد بدل بلوكات مربعة عملاقة ---- */
    .duration-pills { gap: 6px; margin-top: 14px; }
    .duration-pill {
        padding: 8px 6px;
        min-width: 0;
        flex: 1 1 0;
        font-size: 0.76rem;
        border-radius: 10px;
        line-height: 1.35;
    }

    /* شارة الكمية المتوفرة */
    .canboso-stock-badge { padding: 7px 12px; font-size: 0.78rem; margin-top: 10px; border-radius: 10px; }

    /* عدد الحسابات + الإجمالي */
    .quantity-stepper-row { margin-top: 10px; padding-top: 10px; }
    .quantity-stepper-label { font-size: 0.8rem; }
    .price-total-row { font-size: 0.82rem; padding: 6px; }

    /* زرار واتساب في آخر الكارت */
    .order-btn { padding: 12px 14px; font-size: 0.9rem; margin-top: 8px; }
}

@media (max-width: 480px) {
    .header { padding: 7px 10px; }
    .logo-section img { width: 30px; height: 30px; }
    .logo-section h1 { font-size: 0.88rem; }
    .store-tagline { display: none; } /* أول ما الشاشة تضيق أكتر، نشيل السطر الأقل أهمية بدل ما يتزنق */

    body { padding-top: 88px; }

    .card { padding: 13px; }
    .price-display-card { padding: 13px; }
    .price-current { font-size: 1.7rem; }

    .duration-pill { font-size: 0.72rem; padding: 7px 4px; }
    .option-chip { padding: 7px 12px; font-size: 0.74rem; }
}

/* ============================================================
   تصغير وتنظيم شامل للموبايل — تمريرة جذرية ثانية (V2)
   ------------------------------------------------------------
   تصغير عام لمعظم العناصر (عناوين، كروت، أزرار، مسافات) على
   الموبايل عشان الصفحة تبقى أوضح وأخف ومنظمة، من غير أي حذف
   لعناصر أو تغيير في وظائف الموقع — تعديل مقاسات بس. زي الجزء
   اللي فوق، البلوك ده في آخر الملف عمدًا عشان ياخد الأولوية.
   ============================================================ */

@media (max-width: 768px) {
    /* ---- إطار عام للصفحة ---- */
    body { font-size: 14px; }
    .section { padding: 14px 12px; }

    /* ---- الهيرو ---- */
    .hero { border-radius: 16px; margin-bottom: 18px; }

    /* ---- عناوين الأقسام ("ليه تختار Tamm"، "طلبات خاصة"...) ---- */
    .section-title { font-size: 1.2rem; margin-bottom: 16px; }
    .packages-header { margin-bottom: 10px; gap: 8px; }
    .packages-header h3 { font-size: 1.02rem; gap: 6px; }
    .packages-subtitle { font-size: 0.78rem; }
    .packages-section { margin-bottom: 18px; }

    /* ---- شبكة المنتجات: مسافات وخطوط أصغر ---- */
    .products-grid { gap: 10px; }
    .product-card { border-radius: 12px; }
    .product-info-below { margin-top: 8px; gap: 5px; }
    .card-title-bottom { font-size: 0.82rem; }
    .sale-price { font-size: 0.95rem; }
    .original-price { font-size: 0.72rem; }
    .price-from-label { font-size: 0.65rem; }
    .card-action-btn { padding: 8px; font-size: 0.8rem; border-radius: 8px; }
    .card-discount-badge { padding: 4px 10px; font-size: 0.66rem; top: 8px; right: 8px; }

    /* ---- بطاقات "ليه تختار Tamm" وخطوات الشراء ---- */
    .features-grid, .steps-grid { gap: 12px; }
    .feature-box { padding: 18px 14px; border-radius: 14px; }
    .feature-box .feature-icon { font-size: 2.1rem; margin-bottom: 8px; }
    .feature-box h4 { font-size: 0.95rem; margin-bottom: 6px; }
    .feature-box p { font-size: 0.8rem; }

    .step-box { padding: 18px 14px; border-radius: 14px; }
    .step-number { font-size: 0.75rem; }
    .step-icon { font-size: 1.6rem; margin-bottom: 8px; }
    .step-box h4 { font-size: 0.92rem; margin-bottom: 6px; }
    .step-box p { font-size: 0.78rem; }

    /* ---- الفوتر ---- */
    .footer-content { gap: 20px; }
    .footer-brand img { width: 40px; height: 40px; }
    .footer-brand h3 { font-size: 1.05rem; }
    .footer-brand p { font-size: 0.8rem; }
    .footer-links h4, .footer-contact h4 { font-size: 0.92rem; margin-bottom: 10px; }
    .footer-links a, .footer-contact p { font-size: 0.8rem; }
    .footer-bottom { font-size: 0.75rem; padding-top: 14px; }
    .footer-slogan { font-size: 0.72rem; }

    /* ---- أزرار عامة وحقول إدخال (زرار واتساب، أزرار عامة...) ---- */
    .btn { padding: 10px 16px; font-size: 0.88rem; }
    .order-btn { font-size: 0.88rem; padding: 11px 14px; }

    /* ---- المودالات (تسجيل دخول، محفظة...) ---- */
    .modal-box h2 { font-size: 1.05rem; margin-bottom: 14px; }
    .modal-box { padding: 16px; }
    .wallet-method-btn { padding: 12px 8px; font-size: 0.8rem; }
    .wallet-actions-row { gap: 8px; margin-bottom: 12px; }
}

@media (max-width: 480px) {
    body { font-size: 13.5px; }
    .section { padding: 12px 10px; }
    .section-title { font-size: 1.08rem; }

    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .card-title-bottom { font-size: 0.78rem; }
    .sale-price { font-size: 0.88rem; }
    .card-action-btn { padding: 7px; font-size: 0.76rem; }

    .feature-box, .step-box { padding: 15px 12px; }
    .feature-box h4, .step-box h4 { font-size: 0.88rem; }
    .feature-box p, .step-box p { font-size: 0.76rem; }

    .card-title { font-size: 0.98rem; }
    .price-current { font-size: 1.55rem; }
}

/* ============================================================
   تصحيح شامل V3 — إصلاح تضاربات specificity + مشاكل عناصر
   بتخرج برا إطارها فعليًا على الموبايل
   ------------------------------------------------------------
   ملحوظة مهمة: بعض قواعد التصغير في التمريرتين اللي فوق كانت
   بتنكتب بواسطة قواعد تانية في الملف ليها specificity أعلى أو
   متساوية وجاية بعدها (زي .btn-sm اللي كانت بتغلب .btn)، فكانت
   عمليًا بتتجاهَل — ده سبب إن "لسه متغيرش حاجة". هنا بنستخدم
   !important للعناصر دي بالتحديد عشان نضمن التأثير الفعلي، وكمان
   بنصحح 2 باگ overflow حقيقيين:
   1) .package-badge (بادچ الباقات الطويلة) كانت nowrap فبتطلع
      برا حدود الكارت لو النص طويل.
   2) .special-order-card (كارت "اطلب باقة خاصة") كان مربوط بشكل
      مربّع ثابت (aspect-ratio) من .product-card، فلما الزرار جواه
      يحتاج مسافة أكتر (نص طويل) كان بيكسر الشكل ويخرج عن حدوده.
   ============================================================ */

@media (max-width: 768px) {
    /* ---- 1) بادچ الباقات: يلف بدل ما يطلع برا الكارت ---- */
    .package-badge {
        white-space: normal !important;
        max-width: calc(100% - 20px) !important;
        text-align: center;
        line-height: 1.25 !important;
        font-size: 0.56rem !important;
        padding: 3px 8px !important;
    }

    /* ---- 2) كارت "اطلب باقة خاصة": يبقى ارتفاعه بحسب المحتوى مش
       مربّع ثابت، عشان الزرار الطويل مايكسرش شكله ---- */
    .special-order-card {
        aspect-ratio: auto !important;
        min-height: 210px;
        padding: 14px 10px;
        gap: 8px;
    }
    .special-order-icon { font-size: 2rem !important; }
    .special-order-btn {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 8px 6px !important;
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }
    .special-order-btn i { font-size: 0.85rem; }

    /* ---- أزرار "شخصي/مشترك/خاص" — أيقونة فوق واللابل تحت عشان
       النص الطويل يبقى مرتب مش متكسر جنب الأيقونة ---- */
    .type-toggle { flex-wrap: wrap; }
    .type-btn {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 8px 6px !important;
        font-size: 0.72rem !important;
        line-height: 1.25;
        min-width: 0;
        text-align: center;
    }
    .type-btn i { font-size: 0.95rem; }

    /* ---- عدّاد عدد الحسابات: أصغر وواضح ---- */
    .quantity-stepper .qty-btn { width: 26px !important; height: 26px !important; font-size: 0.7rem !important; }
    .quantity-stepper .qty-input { width: 32px !important; font-size: 0.85rem !important; }
    .quantity-stepper-label { font-size: 0.76rem !important; }

    /* ---- مودال المحفظة: الرصيد والأزرار وسجل الحركات ---- */
    .wallet-balance-box { padding: 14px !important; }
    .wallet-balance-value { font-size: 1.6rem !important; }
    .wallet-balance-label { font-size: 0.72rem !important; }
    .wallet-balance-hint { font-size: 0.68rem !important; }
    .wallet-actions-row .btn.btn-sm,
    .btn.btn-sm {
        padding: 7px 10px !important;
        font-size: 0.76rem !important;
        gap: 5px !important;
    }
    .wallet-tx-title { font-size: 0.8rem !important; }
    .wallet-tx-item { padding: 8px 10px !important; }
    .wallet-tx-label { font-size: 0.76rem !important; }
    .wallet-tx-date { font-size: 0.64rem !important; }
    .wallet-tx-amount { font-size: 0.82rem !important; }

    /* ---- بادچات ولابلات الباقات (حزمة السلطان/الفارس) ---- */
    .package-name { font-size: 0.85rem !important; }
    .package-tagline { font-size: 0.66rem !important; }
    .package-includes li { font-size: 0.66rem !important; }
    .package-price-value { font-size: 0.95rem !important; }
    .package-order-btn { padding: 7px 8px !important; font-size: 0.74rem !important; }

    /* ---- نفس شكل duration-pill جوه مودال تفاصيل الباقة ---- */
    .package-item-info .duration-pill { padding: 6px 12px !important; font-size: 0.74rem !important; }
    .package-item-name { font-size: 0.92rem !important; }
    .package-item-price { font-size: 1rem !important; }
    .package-item-duration { font-size: 0.78rem !important; }
}
/* ===== Customer Warranty / Ticket System ===== */
.ticket-flow-hint{margin:-8px 0 18px;color:var(--text-muted);font-size:.88rem;background:rgba(59,130,246,.07);border:1px solid rgba(59,130,246,.14);padding:10px 12px;border-radius:12px;text-align:center;font-weight:700}
.ticket-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ticket-form-grid .form-group{margin-bottom:0}
#ticketDescription{width:100%;resize:vertical;min-height:130px;border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:13px;font:inherit;outline:none;background:#fff}
.ticket-upload-box{border:1px dashed rgba(59,130,246,.35);background:rgba(59,130,246,.035);border-radius:15px;padding:14px;margin:12px 0 14px}
.ticket-upload-label{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;color:var(--primary,#2563eb);font-weight:800;text-align:center}
.ticket-upload-label i{font-size:1.45rem}.ticket-upload-label small{color:var(--text-muted);font-weight:600}
#ticketAttachment{display:none}.ticket-attachment-preview{display:flex;justify-content:center;margin-top:10px}.ticket-attachment-preview img{max-width:180px;max-height:130px;border-radius:12px;border:1px solid #dbe3ee;object-fit:cover}
.ticket-history-title{font-weight:900;margin:24px 0 10px;color:var(--text)}
.my-tickets-list{display:grid;gap:9px;max-height:300px;overflow:auto}.my-ticket-item{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:12px;border:1px solid var(--border,#e5e7eb);border-radius:13px;background:#fff}.my-ticket-item strong{display:block}.my-ticket-item small{display:block;color:var(--text-muted);margin-top:4px}.my-ticket-item p{grid-column:1/-1;margin:8px 0 0;color:var(--text-muted);font-size:.84rem}
.ticket-status{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:4px 9px;font-size:.72rem;font-weight:900}.ticket-status-open{background:#fff3e6;color:#b45309}.ticket-status-progress{background:#eff6ff;color:#2563eb}.ticket-status-done{background:#ecfdf3;color:#15803d}

/* ===== Real Admin Management Dashboard ===== */
.admin-management-card{margin-top:18px}.admin-management-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.admin-management-subtitle{color:var(--text-muted);font-size:.84rem;margin:0 0 14px}.admin-management-stats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:12px 0 16px}.management-stat{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid var(--border,#e5e7eb);border-radius:14px;background:#fff}.management-stat i{font-size:1rem;color:#2563eb}.management-stat strong{display:block;font-size:.92rem}.management-stat small{display:block;color:var(--text-muted);font-size:.7rem;margin-top:2px}.admin-management-tabs{display:flex;gap:7px;overflow-x:auto;padding:3px 0 8px;scrollbar-width:thin}.admin-management-tab{border:1px solid var(--border,#e5e7eb);background:#fff;color:var(--text);border-radius:11px;padding:9px 11px;white-space:nowrap;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}.admin-management-tab.active{background:#2563eb;color:#fff;border-color:#2563eb}.admin-management-toolbar{margin:4px 0 12px}.admin-management-toolbar input{width:100%;border:1px solid var(--border,#e5e7eb);border-radius:12px;padding:11px 13px;font:inherit;outline:none}.admin-management-panel{display:none}.admin-management-panel.active{display:block}.admin-management-table-wrap{overflow:auto;border:1px solid var(--border,#e5e7eb);border-radius:14px}.admin-management-table{width:100%;border-collapse:collapse;min-width:720px}.admin-management-table th,.admin-management-table td{padding:10px 11px;border-bottom:1px solid #eef1f5;text-align:right;vertical-align:middle;font-size:.8rem}.admin-management-table th{background:#f8fafc;font-weight:900}.admin-management-table tr:last-child td{border-bottom:0}.admin-management-table td small{display:block;color:var(--text-muted);margin-top:3px}.management-status{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:.7rem;font-weight:900}.management-status.ok{background:#ecfdf3;color:#15803d}.management-status.bad{background:#fff1f2;color:#be123c}.management-status.pending{background:#fff7ed;color:#c2410c}
.admin-ticket-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-ticket-card{border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:13px;background:#fff}.admin-ticket-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.admin-ticket-card>small{display:block;color:var(--text-muted);margin:7px 0}.admin-ticket-card>p{white-space:pre-wrap;line-height:1.7;font-size:.84rem;margin:8px 0}.admin-ticket-actions{display:grid;grid-template-columns:140px 1fr auto;gap:7px;margin-top:10px}.admin-ticket-actions select,.admin-ticket-actions input{border:1px solid var(--border,#e5e7eb);border-radius:9px;padding:8px;font:inherit;min-width:0}.ticket-attachment-link{display:inline-flex;align-items:center;gap:6px;color:#2563eb;font-weight:800;font-size:.8rem}.admin-ticket-note{background:#f8fafc;border-radius:10px;padding:8px;margin-top:8px;font-size:.78rem}.coupon-create-box{border:1px solid var(--border,#e5e7eb);background:#f8fafc;border-radius:14px;padding:13px;margin-bottom:12px}.coupon-create-box h3{margin:0 0 10px;font-size:.95rem}.coupon-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:9px}.coupon-form-grid input,.coupon-form-grid select{border:1px solid var(--border,#e5e7eb);border-radius:9px;padding:9px;font:inherit;background:#fff}.activity-log-list{display:grid;gap:7px}.activity-log-item{display:flex;gap:10px;padding:10px 11px;border:1px solid var(--border,#e5e7eb);border-radius:12px;background:#fff}.activity-log-item>i{color:#2563eb;margin-top:3px}.activity-log-item strong{font-size:.82rem}.activity-log-item small{display:block;color:var(--text-muted);margin-top:3px}.activity-log-item p{margin:3px 0 0;font-size:.75rem;color:var(--text-muted)}.sales-overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.sales-overview-grid>div{padding:16px;border:1px solid var(--border,#e5e7eb);border-radius:14px;background:#fff}.sales-overview-grid strong{display:block;font-size:1.15rem}.sales-overview-grid span{display:block;color:var(--text-muted);font-size:.76rem;margin-top:4px}.sales-bars{margin-top:12px;border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:13px;background:#fff}.sales-bars h3{margin:0 0 12px;font-size:.95rem}.sales-bar-row{margin:10px 0}.sales-bar-row>div:first-child{display:flex;justify-content:space-between;font-size:.78rem;gap:10px}.sales-bar{height:8px;background:#edf2f7;border-radius:999px;overflow:hidden;margin-top:5px}.sales-bar i{display:block;height:100%;background:#2563eb;border-radius:999px}
@media(max-width:900px){.admin-management-stats{grid-template-columns:repeat(3,1fr)}.admin-ticket-grid{grid-template-columns:1fr}.sales-overview-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ticket-form-grid,.coupon-form-grid{grid-template-columns:1fr}.admin-management-head{align-items:center}.admin-management-stats{grid-template-columns:repeat(2,1fr)}.management-stat{padding:9px}.admin-ticket-actions{grid-template-columns:1fr}.my-ticket-item{flex-direction:column}.sales-overview-grid{grid-template-columns:1fr 1fr}.admin-management-tabs{margin-inline:-4px;padding-inline:4px}}


.admin-chat-log-list{display:grid;gap:9px}.admin-chat-log{border:1px solid var(--border,#e5e7eb);border-radius:14px;background:#fff;overflow:hidden}.admin-chat-log summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}.admin-chat-log summary::-webkit-details-marker{display:none}.admin-chat-log summary>div{min-width:0}.admin-chat-log summary strong{display:block;font-size:.84rem}.admin-chat-log summary small{display:block;color:var(--text-muted);margin-top:3px;font-size:.7rem;word-break:break-all}.admin-chat-log summary>b{white-space:nowrap;font-size:.72rem;color:#2563eb}.admin-chat-log-messages{display:grid;gap:7px;padding:0 10px 10px;background:#f8fafc}.chat-log-message{padding:9px 10px;border-radius:11px;border:1px solid #e7edf3;background:#fff}.chat-log-message.user{border-right:3px solid #087fe2}.chat-log-message.assistant{border-right:3px solid #19b77a}.chat-log-message span{font-size:.68rem;font-weight:900;color:#526579}.chat-log-message p{white-space:pre-wrap;line-height:1.65;font-size:.78rem;margin:4px 0}.chat-log-message small{font-size:.62rem;color:var(--text-muted)}.admin-chat-empty{padding:12px;color:var(--text-muted)}

/* ===== Feature expansion: notifications / wishlist / coupons / renewal ===== */
.notification-wrap{position:relative;display:flex;align-items:center}
.notification-button{position:relative;width:42px;height:42px;border:1px solid var(--border-color,#e7eaf0);background:var(--surface,#fff);border-radius:13px;color:var(--text-main,#1f2937);cursor:pointer}
.notification-button:hover{transform:translateY(-1px)}
.notification-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#ef4444;color:#fff;font-size:10px;line-height:18px;text-align:center;border:2px solid var(--surface,#fff)}
.notification-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(390px,calc(100vw - 24px));max-height:min(560px,70vh);background:var(--surface,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:18px;box-shadow:0 18px 50px rgba(15,23,42,.16);display:none;overflow:hidden;z-index:10050}
.notification-panel.open{display:block}
.notification-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-color,#eee)}
.notification-panel-head div{display:flex;flex-direction:column;gap:3px}.notification-panel-head small{color:var(--text-muted,#6b7280)}
.notification-panel-head button{border:0;background:none;color:var(--primary,#0ea5e9);cursor:pointer;font-size:12px}
.notification-list{overflow:auto;max-height:490px}.notification-item{width:100%;display:flex;gap:11px;text-align:right;padding:13px 15px;border:0;border-bottom:1px solid var(--border-color,#f0f1f3);background:transparent;cursor:pointer;color:inherit}.notification-item.unread{background:rgba(14,165,233,.055)}.notification-item:hover{background:rgba(14,165,233,.09)}
.notification-icon{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;background:rgba(14,165,233,.1);color:#0ea5e9}.notification-item>span:last-child{display:flex;flex-direction:column;gap:3px}.notification-item strong{font-size:13px}.notification-item small{font-size:12px;line-height:1.55;color:var(--text-muted,#64748b)}.notification-item time{font-size:10px;color:#94a3b8}.notification-empty{padding:35px 20px;text-align:center;color:var(--text-muted,#64748b)}
.wishlist-card{position:relative}.wishlist-card-btn{position:absolute;z-index:3;top:12px;left:12px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.92);color:#64748b;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.08)}.wishlist-card-btn.active{color:#ef4444}.wishlist-remove{position:absolute;z-index:3;top:12px;left:12px;border:0;background:rgba(255,255,255,.9);color:#ef4444;width:34px;height:34px;border-radius:50%;cursor:pointer}
.coupon-box{margin:15px 0;padding:13px;border:1px dashed var(--border-color,#dbe1e8);border-radius:14px;background:rgba(148,163,184,.05)}.coupon-box-title{font-weight:700;font-size:13px;margin-bottom:9px}.coupon-box-row{display:flex;gap:8px}.coupon-box-row input{flex:1;min-width:0}.coupon-message{font-size:12px;margin-top:7px;min-height:17px}.coupon-message.success{color:#16a34a}.coupon-message.error{color:#dc2626}.cart-price-breakdown{display:grid;gap:7px;margin:10px 0;font-size:13px}.cart-price-breakdown>div{display:flex;justify-content:space-between}.cart-discount-line{color:#16a34a}
.renewal-summary{padding:12px 4px 18px;display:grid;gap:8px}.renewal-summary strong{font-size:20px}.renewal-summary span,.renewal-summary p{color:var(--text-muted,#64748b);font-size:13px}.renewal-summary div{display:flex;justify-content:space-between;align-items:end;margin-top:8px}.renewal-summary b{font-size:24px}
.renewal-btn{margin-top:10px}
@media(max-width:760px){.notification-panel{position:fixed;top:70px;right:12px;left:12px;width:auto;max-height:calc(100vh - 90px)}.notification-list{max-height:calc(100vh - 160px)}.notification-button{width:40px;height:40px}.coupon-box-row{flex-direction:row}.coupon-box-row .btn{white-space:nowrap}}

/* ---- اسم الحساب في قائمة الموبايل: قسم مستقل وواضح ---- */
.mobile-drawer .drawer-nav .account-chip {
    position: relative;
    margin: 0 0 10px;
    padding: 15px 16px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(25,87,166,.09), rgba(53,198,216,.10));
    border: 1px solid rgba(25,87,166,.12);
    color: var(--primary);
    font-weight: 900;
}
.mobile-drawer .drawer-nav .account-chip::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -7px;
    height: 1px;
    background: var(--border);
}
.mobile-drawer .drawer-nav .account-chip .account-chip-text {
    font-size: 1.05rem;
    font-weight: 900;
}
.mobile-drawer .drawer-nav .account-chip i {
    color: var(--primary);
    font-size: 1.15rem;
}


/* Unified admin tools: the old separate Super Admin modal is now part of #admin. */
.admin-super-tools{margin-top:22px;padding-top:20px;border-top:1px solid var(--border-color,#e5e7eb);}
.admin-super-tools-head{margin-bottom:12px;}
.admin-super-tools-tabs{margin-bottom:14px;}
@media (max-width:700px){.admin-super-tools .admin-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;} .admin-super-tools .admin-tab-btn{flex:0 0 auto;white-space:nowrap;}}


/* Tamm: عرض بيانات الحساب داخل "طلباتي" بشكل واضح ومتجاوب */
.order-credentials-details { margin-top: 12px; overflow: hidden; }
.order-credentials-details > summary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    list-style: none; cursor: pointer; padding: 12px 15px; border-radius: 12px;
    color: #fff; background: linear-gradient(135deg, #1479a8, #2357a8);
    font-weight: 800; transition: filter .2s ease;
}
.order-credentials-details > summary::-webkit-details-marker { display: none; }
.order-credentials-details > summary:hover { filter: brightness(1.08); }
.order-credentials-wrap { padding: 12px 0 2px; }
.order-credentials-notice {
    display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px;
    padding: 10px 12px; border-radius: 10px; color: #24617b;
    background: rgba(50, 169, 210, .10); font-size: 12px; line-height: 1.7;
}
.order-credential-card {
    padding: 14px; margin-bottom: 10px; border: 1px solid rgba(55, 157, 198, .25);
    border-radius: 14px; background: var(--card-bg, rgba(128, 150, 170, .07));
    box-shadow: 0 5px 18px rgba(0, 0, 0, .04);
}
.order-credential-heading { margin-bottom: 10px; font-weight: 800; color: var(--primary, #1686b5); }
.order-credential-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 8px 0; }
.order-credential-row + .order-credential-row { border-top: 1px solid rgba(128, 150, 170, .18); }
.order-credential-label { grid-column: 1 / -1; color: var(--text-muted, #758292); font-size: 12px; }
.order-credential-row code {
    min-width: 0; overflow-wrap: anywhere; direction: ltr; text-align: left;
    color: var(--text-color, inherit); font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px; user-select: text;
}
.order-copy-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    border: 1px solid rgba(45, 150, 190, .28); border-radius: 9px;
    padding: 7px 9px; color: var(--primary, #1686b5); background: transparent;
    font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.order-copy-btn:hover { background: rgba(45, 150, 190, .10); }
.order-credentials-fallback { padding: 12px; margin-top: 8px; border-radius: 10px; background: rgba(128,150,170,.09); line-height: 1.8; }
@media (max-width: 480px) {
    .order-credential-card { padding: 11px; }
    .order-credential-row { gap: 7px; }
    .order-credential-row code { font-size: 12px; }
    .order-copy-btn { padding: 7px; }
}