/* ============================================================
   AYURCALL — cart.css
   Mini-cart dropdown · Mobile sticky bar · Cart page · Auth
   ============================================================ */

/* ── Required: prevents display:flex overriding [hidden] ── */
[hidden] { display: none !important; }

/* ================================================================
   NAV CART WRAP + MINI-CART DROPDOWN
   ================================================================ */
.nav-cart-wrap { position: relative; }

.nav-cart-btn { position: relative; }

.nav-cart-badge {
    position: absolute;
    top: -4px; right: -6px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    background: var(--color-accent);
    color: #fff;
    font-size: 9px; font-weight: 700;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}

.minicart {
    position: absolute;
    top: calc(100% + 10px); right: 0;
    width: 340px;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 40px rgba(0,0,0,0.13);
    z-index: var(--z-dropdown);
    overflow: hidden;
    transform-origin: top right;
    animation: minicart-in 0.18s ease;
}

@keyframes minicart-in {
    from { opacity: 0; transform: scale(0.95) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.minicart-loading {
    display: flex; align-items: center; justify-content: center;
    padding: 32px;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    gap: var(--space-2);
}

.minicart-spinner { font-size: 20px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.minicart-items {
    max-height: 270px; overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.minicart-item {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 0.5px solid var(--color-border);
    transition: background var(--transition);
}
.minicart-item:last-child { border-bottom: none; }
.minicart-item:hover      { background: var(--color-primary-light); }

.minicart-item__img {
    width: 44px; height: 44px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--color-primary-light);
    flex-shrink: 0;
}

.minicart-item__info { flex: 1; min-width: 0; }

.minicart-item__name {
    font-size: var(--font-size-small); font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block; text-decoration: none;
}
.minicart-item__name:hover { color: var(--color-primary); }

.minicart-item__meta {
    font-size: var(--font-size-micro);
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.minicart-item__price {
    font-size: var(--font-size-small); font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap; flex-shrink: 0;
}

.minicart-more {
    text-align: center;
    font-size: var(--font-size-micro);
    color: var(--color-text-secondary);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
}

.minicart-footer {
    border-top: 0.5px solid var(--color-border);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
}

.minicart-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--space-3);
}
.minicart-total__label { font-size: var(--font-size-small); color: var(--color-text-secondary); }
.minicart-total__value { font-size: 16px; font-weight: 700; color: var(--color-text-primary); }

.minicart-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.minicart-actions .btn { width: 100%; justify-content: center; }

.minicart-login-prompt {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.minicart-login-prompt i { font-size: 36px; color: var(--color-primary); opacity: 0.5; }
.minicart-login-prompt p { font-size: var(--font-size-small); color: var(--color-text-secondary); line-height: 1.5; }

.minicart-empty { padding: var(--space-6) var(--space-4); text-align: center; }
.minicart-empty i { font-size: 36px; color: var(--color-text-muted); }
.minicart-empty p { font-size: var(--font-size-small); color: var(--color-text-secondary); margin-top: var(--space-2); }

/* ================================================================
   MOBILE STICKY CART BAR
   ================================================================ */
.mobile-cart-bar { display: none; }

@media (max-width: 768px) {
    .mobile-cart-bar {
        display: flex;
        align-items: center; justify-content: space-between;
        gap: var(--space-3);
        position: fixed;
        left: 0; right: 0;
        /* Sit flush above the mobile tab bar (56px) */
        bottom: 56px;
        /* Higher than tab bar so it's never obscured */
        z-index: calc(var(--z-nav) + 5);
        /* Dark green — distinct from the teal nav, clearly a CTA strip */
        background: var(--color-primary-dark);
        padding: 10px var(--space-4);
        box-shadow: 0 -3px 20px rgba(0,0,0,0.25);
        border-top: 1.5px solid rgba(255,255,255,0.15);
    }

    body.has-mobile-cart-bar { padding-bottom: calc(56px + 56px); }

    .mobile-cart-bar__info { display: flex; flex-direction: column; gap: 1px; }
    .mobile-cart-bar__items {
        font-size: var(--font-size-micro);
        color: rgba(255,255,255,0.75);
    }
    .mobile-cart-bar__total {
        font-size: 15px; font-weight: 700; color: #fff;
        letter-spacing: -0.2px;
    }

    .mobile-cart-bar__cta {
        background: var(--color-accent);
        color: #fff;
        font-size: var(--font-size-small);
        font-weight: 700;
        padding: 11px 20px;
        border-radius: var(--radius-full);
        white-space: nowrap;
        text-decoration: none;
        flex-shrink: 0;
        transition: background var(--transition);
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .mobile-cart-bar__cta:hover,
    .mobile-cart-bar__cta:active { background: #c98a00; }
}

/* ================================================================
   CART PAGE
   ================================================================ */
.cart-page { padding: var(--space-8) 0 var(--space-10); }

.cart-container {
    max-width: 1200px; margin: 0 auto; padding: 0 var(--space-8);
}

.cart-header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: var(--space-6);
}

.cart-title {
    font-size: var(--font-size-section); font-weight: 500;
    color: var(--color-text-primary);
    display: flex; align-items: baseline; gap: var(--space-2);
}

.cart-header__count {
    font-size: var(--font-size-body); font-weight: 400;
    color: var(--color-text-secondary);
}

.cart-continue-link {
    font-size: var(--font-size-small); color: var(--color-primary);
    display: flex; align-items: center; gap: 4px; text-decoration: none;
}
.cart-continue-link:hover { text-decoration: underline; }

.cart-alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-small);
    margin-bottom: var(--space-4);
}
.cart-alert--error { background: #FEF2F2; color: #DC2626; border: 0.5px solid #FECACA; }

.cart-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-4); padding: var(--space-10) 0; text-align: center;
}
.cart-empty__icon {
    width: 80px; height: 80px; border-radius: var(--radius-full);
    background: var(--color-primary-light);
    display: flex; align-items: center; justify-content: center;
}
.cart-empty__icon i { font-size: 36px; color: var(--color-primary); }
.cart-empty h2 { font-size: var(--font-size-card); font-weight: 500; }
.cart-empty p  { font-size: var(--font-size-small); color: var(--color-text-secondary); }

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-6);
    align-items: start;
}

/* ── Item card ── */
.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    transition: border-color var(--transition);
}
.cart-item:hover      { border-color: var(--color-primary); }
.cart-item--updating  { opacity: 0.6; pointer-events: none; }

/* Cross-device reconcile cues — applied by cart.js reconcileCart() when the
   cart was changed on another device. Amber flash for a qty change; fade-out
   for a line removed elsewhere (cart.js removes the node shortly after). */
.cart-item--changed { animation: cart-item-flash 2.4s ease; }
@keyframes cart-item-flash {
    0%   { background: var(--color-accent-light); border-color: var(--color-accent); }
    100% { background: var(--color-surface);      border-color: var(--color-border); }
}
.cart-item--removed {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.cart-item__img-link { display: block; }
.cart-item__img {
    width: 80px; height: 80px;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
}

.cart-item__info { display: flex; flex-direction: column; gap: 4px; }

.cart-item__name {
    font-size: var(--font-size-body); font-weight: 500;
    color: var(--color-text-primary); text-decoration: none; line-height: 1.35;
}
.cart-item__name:hover { color: var(--color-primary); }

.cart-item__brand {
    font-size: var(--font-size-micro); color: var(--color-text-secondary);
    text-transform: uppercase; letter-spacing: 0.4px;
}

.cart-item__pricing {
    display: flex; align-items: baseline; gap: var(--space-1);
    flex-wrap: nowrap; margin-top: var(--space-1);
}
.cart-item__sale { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.cart-item__mrp  { font-size: var(--font-size-small); color: var(--color-text-muted); text-decoration: line-through; }
.cart-item__off  { font-size: var(--font-size-small); color: var(--color-primary); font-weight: 500; }

.cart-item__out-of-stock {
    font-size: var(--font-size-micro); color: #DC2626;
    display: flex; align-items: center; gap: 4px; margin-top: var(--space-1);
}

/* Price-changed note — injected by cart.js repaintPrice() when a line's master
   price drifted after it was added. Shows old -> new so the change is legible,
   not just a silent repaint. Down = green (cheaper), up = amber (dearer). */
.cart-item__price-changed {
    font-size: var(--font-size-micro);
    display: flex; align-items: center; gap: 4px; margin-top: var(--space-1);
    font-weight: 500;
}
.cart-item__price-changed s { opacity: 0.7; font-weight: 400; }
.cart-item__price-changed--down { color: #15803D; }
.cart-item__price-changed--up   { color: var(--color-accent); }

.cart-item__controls {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: var(--space-2); min-width: 110px;
}

.qty-stepper {
    display: flex; align-items: center;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md); overflow: hidden;
}

.qty-btn {
    width: 30px; height: 30px;
    background: var(--color-bg); border: none;
    font-size: 16px; cursor: pointer;
    color: var(--color-text-primary);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition); flex-shrink: 0;
}
.qty-btn:hover:not(:disabled) { background: var(--color-primary); color: #fff; }
.qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.qty-val {
    min-width: 36px; text-align: center;
    font-size: var(--font-size-body); font-weight: 600;
}

.cart-item__line-total { font-weight: 700; font-size: var(--font-size-body); }
.cart-item__saving     { font-size: var(--font-size-micro); color: #16A34A; }

.cart-item__remove {
    display: flex; align-items: center; gap: 4px;
    font-size: var(--font-size-micro); color: var(--color-text-muted);
    background: none; border: none; cursor: pointer;
    padding: 0; font-family: inherit;
    transition: color var(--transition);
}
.cart-item__remove:hover { color: #DC2626; }

/* ── Summary panel ── */
.cart-summary {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    position: sticky;
    top: calc(var(--nav-height) + var(--space-4));
    display: flex; flex-direction: column; gap: var(--space-4);
}

.summary-free-ship {
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: var(--font-size-small);
    color: var(--color-primary); line-height: 1.5;
}
.summary-free-ship--ok {
    background: #ECFDF5; color: #065F46;
    display: flex; align-items: center; gap: var(--space-2);
}

.ship-progress {
    height: 4px; background: rgba(29,122,120,0.2);
    border-radius: 2px; margin-top: var(--space-2); overflow: hidden;
}
.ship-progress__bar {
    height: 100%; background: var(--color-primary);
    border-radius: 2px; transition: width 0.4s ease;
}

.summary-rows  { display: flex; flex-direction: column; gap: var(--space-2); }

/* C3 — .summary-row, .summary-row--green, .summary-row--total and .summary-savings
   removed: checkout.css (loaded after cart.css on the cart/checkout page, the only
   place these are used) fully redefines them, so they were dead. checkout.css's green
   savings banner is the intended one. .summary-rows is kept — checkout.css only adds
   margin and relies on this flex layout. */

.promo-code-tag {
    background: var(--color-primary); color: #fff;
    font-size: var(--font-size-micro); padding: 1px 6px;
    border-radius: var(--radius-sm); font-weight: 500; margin-left: 4px;
}

.promo-section  { display: flex; flex-direction: column; gap: var(--space-2); }
.promo-input-row { display: flex; gap: var(--space-2); }

.promo-input {
    flex: 1; height: 38px; padding: 0 var(--space-3);
    border: 0.5px solid var(--color-border); border-radius: var(--radius-md);
    font-size: var(--font-size-small); font-family: inherit;
    text-transform: uppercase; outline: none;
    transition: border-color var(--transition);
}
.promo-input:focus { border-color: var(--color-primary); }

.btn--sm { height: 38px; padding: 0 var(--space-4); font-size: var(--font-size-small); min-height: unset; }

.promo-error   { font-size: var(--font-size-micro); color: #DC2626; }

.promo-applied {
    display: flex; align-items: center; gap: var(--space-2);
    background: #ECFDF5; border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-small);
}
.promo-applied i    { color: #16A34A; }
.promo-applied > span { flex: 1; color: var(--color-text-secondary); }

.promo-remove {
    background: none; border: none; color: #DC2626;
    font-size: var(--font-size-micro); cursor: pointer;
    font-family: inherit; padding: 0;
}

/* ── Pincode delivery estimator ── */
.pincode-section { display: flex; flex-direction: column; gap: var(--space-2); }

.pincode-label {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--font-size-small); font-weight: 500;
    color: var(--color-text-secondary);
}
.pincode-label i { font-size: 14px; color: var(--color-primary); }

.pincode-input-row { display: flex; gap: var(--space-2); }

.pincode-input {
    flex: 1; height: 38px; padding: 0 var(--space-3);
    border: 0.5px solid var(--color-border); border-radius: var(--radius-md);
    font-size: var(--font-size-small); font-family: inherit; outline: none;
    transition: border-color var(--transition);
}
.pincode-input:focus { border-color: var(--color-primary); }

.pincode-result {
    font-size: var(--font-size-small); line-height: 1.5;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
}
.pincode-result--ok    { background: #ECFDF5; color: #065F46; }
.pincode-result--error { background: #FEF2F2; color: #DC2626; }

/* ── Checkout button ── */
.btn--checkout { width: 100%; justify-content: center; padding: 12px; font-size: var(--font-size-body); }

/* ── Payment options ── */
.cart-payment-row {
    display: flex; flex-direction: column; gap: var(--space-2); align-items: center;
}

.cart-payment-label {
    font-size: var(--font-size-micro); color: var(--color-text-muted);
}

.cart-payment-pills { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: center; }

.cart-pay-pill {
    background: var(--color-bg);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    font-size: var(--font-size-micro);
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* ── Trust badges — horizontal on desktop ── */
.cart-trust {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: var(--space-2);
    border-top: 0.5px solid var(--color-border);
}

.cart-trust span {
    display: flex; align-items: center; gap: 4px;
    font-size: var(--font-size-micro); color: var(--color-text-secondary);
}
.cart-trust i { color: var(--color-primary); font-size: 13px; }

.cart-trust__sep {
    color: var(--color-border);
    font-size: var(--font-size-small);
    line-height: 1;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .minicart { width: 300px; }
}

@media (max-width: 768px) {
    .cart-container { padding: 0 var(--space-4); }
    .cart-page      { padding: var(--space-5) 0 var(--space-8); }

    .cart-layout { grid-template-columns: 1fr; }
    /* Mobile 1 — items first, then summary (source order: items col is first in HTML) */
    .cart-summary { order: 0; position: static; }
    .cart-items-col { order: -1; }

    .cart-item {
        grid-template-columns: 64px 1fr;
        gap: var(--space-3);
    }
    .cart-item__controls {
        grid-column: 1 / -1;
        flex-direction: row; align-items: center; flex-wrap: wrap; min-width: 0;
    }
    .cart-item__remove { margin-left: auto; }

    /* Trust horizontal wraps naturally on mobile — no change needed */

    /* Mini-cart not shown on mobile */
    .minicart { display: none !important; }

    /* Mobile 2 — prevent iOS zoom on input focus (requires font-size ≥ 16px) */
    .promo-input,
    .pincode-input,
    input[type="text"],
    input[type="tel"],
    input[type="number"],
    select { font-size: 16px !important; }
}

/* ================================================================
   CART PAGE ADDITIONS
   ================================================================ */

/* Item 8 — Add more products link */
.cart-add-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding: 8px var(--space-3);
    border: 1.5px dashed var(--color-primary);
    border-radius: var(--radius-md);
    transition: background var(--transition);
}
.cart-add-more:hover { background: var(--color-primary-light); }
.cart-add-more i { font-size: 16px; }

/* Items 7+4 — Promo and pincode left-column wrappers */
.cart-promo-left,
.cart-pincode-left {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}
.cart-pincode-left { margin-bottom: 0; }

/* Item 4 — City/district shown after pincode check */
.pincode-city {
    font-size: var(--font-size-small);
    color: var(--color-primary);
    font-weight: 600;
    margin-top: var(--space-1);
    padding: 4px var(--space-2);
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
    width: fit-content;
}

/* PRODUCT SLIDER + .slider-btn rules now consolidated in components.css (single source of truth). */
@media (max-width: 768px) {
    .cart-promo-left,
    .cart-pincode-left { padding: var(--space-3); }
}

/* ── Issue 4: Collapsible toggle buttons (promo, pincode) ── */
.cart-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    background: none;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px var(--space-4);
    font-size: var(--font-size-small);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), color var(--transition);
    margin-bottom: var(--space-2);
}
.cart-toggle-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cart-toggle-btn i:first-child { color: var(--color-primary); }
.cart-toggle-btn .toggle-chevron { margin-left: auto; transition: transform 0.2s ease; }

/* ── Issue 3: Payment options compact in right col ── */
#right-payment-options { margin-bottom: var(--space-3); }
#right-payment-options .payment-option {
    padding: var(--space-3) var(--space-3);
    margin-bottom: var(--space-2);
}
#right-payment-options .payment-option__sub { font-size: var(--font-size-micro); }