/* ════════════════════════════════════════════════════════
   ZARINMART — Design Override CSS
   Navy Blue (#1B3A6B) + Bronze/Gold (#C4892A) Theme
   ════════════════════════════════════════════════════════ */

:root {
    --zm-navy:       #1B3A6B;
    --zm-navy-dark:  #0F2347;
    --zm-bronze:     #8B5E1A;
    --zm-gold:       #C4892A;
    --zm-gold-light: #D4A843;
    --zm-warm-white: #F8F7F4;
    --zm-light:      #EEF2F8;
    --zm-border:     #E2E8F0;
    --zm-text:       #1A1A2E;
    --zm-muted:      #64748B;

    /* Override talhakids variables */
    --orange: #1B3A6B;
    --green:  #8B5E1A;
    --cream:  #F8F7F4;
    --warm:   #EEF2F8;
    --sand:   #C4892A;
    --light:  #EEF2F8;
    --muted:  #64748B;
}

/* ── Body ──────────────────────────────────────────────── */
body { background: var(--zm-warm-white); }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: var(--zm-navy); }
::-webkit-scrollbar-thumb:hover { background: var(--zm-navy-dark); }

/* ── Links ──────────────────────────────────────────────── */
a { color: var(--zm-navy); }

/* ══════════════════════════════════════════════════════════
   PRODUCT CARD
   ══════════════════════════════════════════════════════════ */
.product-card {
    border-radius: 14px;
    border: 1px solid var(--zm-border);
    overflow: hidden;
    background: white;
    transition: box-shadow 0.25s, border-color 0.25s, transform 0.2s;
}
.product-card:hover {
    box-shadow: 0 8px 32px rgba(27, 58, 107, 0.12);
    border-color: var(--zm-navy);
    transform: translateY(-2px);
}

/* Image placeholder background */
.product-card .w-16 {
    background: linear-gradient(135deg, var(--zm-navy), #2A5298) !important;
}

/* Discount badge */
.product-card span[style*="background:var(--orange)"] {
    background: var(--zm-navy) !important;
}

/* ── Add to Cart & Buy Now Buttons ─────────────────────────
   Both buttons equal size, full flex, same height
   ───────────────────────────────────────────────────────── */
.zm-btn-cart,
.zm-btn-buy,
button[onclick*="addToCart"],
button[onclick*="buyNow"] {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.2s !important;
    flex: 1 !important;
    white-space: nowrap !important;
}

/* Add to Cart — Navy */
button[onclick*="addToCart"],
.zm-btn-cart {
    background: var(--zm-navy) !important;
    color: white !important;
}
button[onclick*="addToCart"]:hover,
.zm-btn-cart:hover {
    background: var(--zm-navy-dark) !important;
}

/* Buy Now — Gold */
button[onclick*="buyNow"],
.zm-btn-buy {
    background: var(--zm-gold) !important;
    color: white !important;
}
button[onclick*="buyNow"]:hover,
.zm-btn-buy:hover {
    background: var(--zm-bronze) !important;
}

/* Product action row (cart + buy side by side) */
.product-card .flex.gap-2,
.product-card .flex.gap-3 {
    gap: 8px !important;
    padding: 0 12px 12px !important;
}

/* Product price color */
.product-card .text-orange-600,
.product-card [style*="color:var(--orange)"],
.product-card [style*="color: var(--orange)"] {
    color: var(--zm-navy) !important;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS — GLOBAL
   ══════════════════════════════════════════════════════════ */
.btn-primary,
button.bg-orange-500,
[style*="background:var(--orange)"],
[style*="background: var(--orange)"] {
    background: var(--zm-navy) !important;
    color: white !important;
}
.btn-primary:hover { background: var(--zm-navy-dark) !important; }

/* Gold accent buttons */
.btn-gold {
    background: var(--zm-gold) !important;
    color: white !important;
}

/* ══════════════════════════════════════════════════════════
   CART / CHECKOUT BUTTONS
   ══════════════════════════════════════════════════════════ */
#tk-cart-drawer-checkout {
    background: var(--zm-gold) !important;
    color: white !important;
}
#tk-cart-drawer-viewcart {
    color: var(--zm-navy) !important;
    border-color: var(--zm-navy) !important;
}
#tk-cart-float-top {
    background: var(--zm-navy) !important;
    box-shadow: -4px 4px 20px rgba(27,58,107,0.45) !important;
}
#tk-cart-float-total { color: var(--zm-navy) !important; }

/* ══════════════════════════════════════════════════════════
   FLOATING CONTACT FAB
   ══════════════════════════════════════════════════════════ */
#tk-contact-toggle {
    background: linear-gradient(135deg, var(--zm-bronze), var(--zm-gold)) !important;
    box-shadow: 0 6px 20px rgba(139, 94, 26, 0.5) !important;
}
#tk-contact-fab.tk-open #tk-contact-toggle {
    background: linear-gradient(135deg, var(--zm-navy-dark), var(--zm-navy)) !important;
}

/* ══════════════════════════════════════════════════════════
   BACK TO TOP BUTTON
   ══════════════════════════════════════════════════════════ */
#back-to-top button {
    background: var(--zm-navy) !important;
}
#back-to-top-ring { stroke: #ffffff !important; }

/* ══════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════════════════════════ */
.tk-toast { background: var(--zm-navy) !important; }

/* ══════════════════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════════════════ */
.tk-hero {
    background: linear-gradient(135deg, var(--zm-navy-dark) 0%, var(--zm-navy) 60%, #2A5298 100%) !important;
}

/* Slider dots */
.tk-hero .bg-orange-500,
.tk-hero [style*="background:var(--orange)"] {
    background: var(--zm-gold) !important;
}

/* ══════════════════════════════════════════════════════════
   CATEGORY CARDS
   ══════════════════════════════════════════════════════════ */
.category-card:hover,
.cat-card:hover {
    border-color: var(--zm-navy) !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION HEADINGS
   ══════════════════════════════════════════════════════════ */
.section-heading::before,
.section-title::before {
    background: var(--zm-navy) !important;
}

/* ══════════════════════════════════════════════════════════
   FORMS & INPUTS
   ══════════════════════════════════════════════════════════ */
input:focus, textarea:focus, select:focus {
    border-color: var(--zm-navy) !important;
    outline-color: var(--zm-navy) !important;
    box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.1) !important;
}

/* ══════════════════════════════════════════════════════════
   CHECKOUT & CART PAGE
   ══════════════════════════════════════════════════════════ */
.checkout-btn,
[type="submit"].bg-orange-500 {
    background: var(--zm-gold) !important;
    color: white !important;
}

/* ══════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════ */
.pagination .active a,
.pagination .active span {
    background: var(--zm-navy) !important;
    border-color: var(--zm-navy) !important;
    color: white !important;
}
.pagination a:hover {
    color: var(--zm-navy) !important;
}

/* ══════════════════════════════════════════════════════════
   BADGE & TAGS
   ══════════════════════════════════════════════════════════ */
.badge-combo {
    background: var(--zm-gold) !important;
    color: white !important;
}
.badge-new {
    background: var(--zm-navy) !important;
    color: white !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    button[onclick*="addToCart"],
    button[onclick*="buyNow"] {
        height: 40px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   PROMO STRIP
   ══════════════════════════════════════════════════════════ */
.promo-strip {
    background: linear-gradient(135deg, var(--zm-navy) 0%, #2A5298 100%) !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
   ══════════════════════════════════════════════════════════ */
#tk-mobile-bottom-nav {
    border-top: 2px solid var(--zm-gold) !important;
}
#tk-mobile-bottom-nav .active-tab {
    color: var(--zm-navy) !important;
}
#tk-mobile-bottom-nav .active-tab svg { stroke: var(--zm-navy) !important; }

/* ══════════════════════════════════════════════════════════
   STAR RATINGS
   ══════════════════════════════════════════════════════════ */
.star-rating, .text-yellow-400, [style*="color:#F59E0B"] {
    color: var(--zm-gold) !important;
}