/* ═══════════════════════════════════════════════════════════
   MILORA BEAUTY — cart.css  (also used by checkout & payment)
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   CART PAGE
══════════════════════════════ */
.cart-header {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
}
.cart-header h1 { margin-bottom: 0; }
.cart-header__count {
    font-size: 0.85rem;
    color: var(--grey);
    font-weight: 300;
}

/* ── Cart layout ──────────────────────────────────────────── */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-10);
    align-items: start;
}

/* ── Cart items table ─────────────────────────────────────── */
.cart-items {
    background: var(--white);
    border: 1px solid var(--gold-pale);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.cart-items-header {
    display: grid;
    grid-template-columns: 3fr 1fr 1.2fr 1fr 40px;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    background: var(--cream-dark);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey);
    border-bottom: 1px solid var(--gold-pale);
}

.cart-row {
    display: grid;
    grid-template-columns: 3fr 1fr 1.2fr 1fr 40px;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--cream-dark);
    transition: background var(--transition-fast);
}
.cart-row:last-child { border-bottom: none; }
.cart-row:hover { background: var(--cream-light); }

/* Product column */
.cart-row__product {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    min-width: 0;
}

.cart-row__image-link { flex-shrink: 0; }

.cart-row__image {
    width: 72px;
    height: 88px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--cream);
}
.cart-row__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--grey-light);
    background: var(--cream-dark);
}

.cart-row__details { min-width: 0; }
.cart-row__brand {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 3px;
}
.cart-row__name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--black);
    line-height: 1.3;
    display: block;
    margin-bottom: var(--sp-2);
}
.cart-row__name:hover { color: var(--gold-deep); }

.cart-row__stock-warn {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: 0.72rem;
    color: var(--color-error);
    margin-top: var(--sp-2);
}
.cart-row__stock-warn--low { color: var(--color-warning); }

/* Price column */
.cart-row__price {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cart-row__price-current {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--black);
}
.cart-row__price-original {
    font-size: 0.78rem;
    color: var(--grey-light);
    text-decoration: line-through;
}

/* Total column */
.cart-row__total {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--black);
}

/* Remove button */
.cart-row__remove .btn {
    color: var(--grey-light);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.cart-row__remove .btn:hover {
    color: var(--color-error);
    background: rgba(155,64,64,0.08);
}

/* ── Cart summary ─────────────────────────────────────────── */
.cart-summary {
    position: sticky;
    top: calc(var(--navbar-height) + var(--sp-6));
    background: var(--white);
    border: 1px solid var(--gold-pale);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
}

.cart-summary__title {
    font-size: 1.2rem;
    margin-bottom: var(--sp-5);
}

.cart-summary__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--grey);
    margin-bottom: var(--sp-4);
}

.free-delivery { color: var(--color-success); font-weight: 500; }
.delivery-note { font-size: 0.82rem; }

.cart-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: var(--sp-4) 0 var(--sp-6);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--black);
}

/* Free delivery progress */
.free-delivery-progress {
    margin-bottom: var(--sp-5);
    padding: var(--sp-4);
    background: var(--cream-light);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gold-pale);
}

.free-delivery-msg {
    font-size: 0.8rem;
    color: var(--grey);
    margin-bottom: var(--sp-3);
}

.progress-bar {
    height: 4px;
    background: var(--gold-pale);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-deep));
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
    max-width: 100%;
}

.continue-shopping {
    margin-top: var(--sp-3);
    font-size: 0.8rem;
    color: var(--grey);
}

.cart-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    font-size: 0.75rem;
    color: var(--grey-light);
}
.cart-security i { color: var(--gold); }

/* ══════════════════════════════
   CHECKOUT PAGE
══════════════════════════════ */

/* Steps indicator */
.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--sp-10);
}

.checkout-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
}

.step-circle {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 2px solid var(--gold-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--grey-light);
    background: var(--white);
    transition: all var(--transition-normal);
}

.checkout-step span {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey-light);
}

.checkout-step--active .step-circle {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--white);
}
.checkout-step--active span { color: var(--gold-deep); }

.checkout-step--done .step-circle {
    border-color: var(--color-success);
    background: var(--color-success);
    color: var(--white);
}
.checkout-step--done span { color: var(--color-success); }

.checkout-step-line {
    width: 80px;
    height: 2px;
    background: var(--gold-pale);
    margin: 0 var(--sp-2);
    margin-bottom: 20px;
}
.checkout-step-line--done { background: var(--color-success); }

/* Checkout layout */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--sp-10);
    align-items: start;
    margin-bottom: var(--sp-16);
}

/* Checkout form sections */
.checkout-section {
    background: var(--white);
    border: 1px solid var(--gold-pale);
    border-radius: var(--radius-md);
    padding: var(--sp-8);
    margin-bottom: var(--sp-6);
}

.checkout-section__title {
    font-size: 1.1rem;
    margin-bottom: var(--sp-6);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.section-num {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--gold);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checkout-section--payment {
    border-color: var(--gold);
    background: linear-gradient(135deg, var(--cream-light) 0%, var(--white) 100%);
}

.mpesa-info {
    margin-bottom: var(--sp-6);
}

.mpesa-logo-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.mpesa-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: #00A651;
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.mpesa-tagline {
    font-size: 0.8rem;
    color: var(--grey);
}

.mpesa-explainer {
    font-size: 0.875rem;
    color: var(--grey);
    line-height: 1.7;
}

.checkout-disclaimer {
    font-size: 0.75rem;
    color: var(--grey-light);
    text-align: center;
    margin-top: var(--sp-4);
    line-height: 1.6;
}

.form-label-optional {
    font-weight: 300;
    color: var(--grey-light);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.7rem;
    margin-left: var(--sp-2);
}

/* Checkout summary */
.checkout-summary {
    position: sticky;
    top: calc(var(--navbar-height) + var(--sp-6));
    background: var(--white);
    border: 1px solid var(--gold-pale);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
}

.checkout-summary__title {
    font-size: 1.1rem;
    margin-bottom: var(--sp-5);
}

.checkout-summary__items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: var(--sp-5);
    padding-right: var(--sp-2);
}

.checkout-summary__item {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
}

.checkout-item-image-wrap {
    position: relative;
    flex-shrink: 0;
}

.checkout-item-image {
    width: 56px;
    height: 68px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--cream);
}
.checkout-item-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--grey-light);
    background: var(--cream-dark);
}

.checkout-item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--gold);
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.checkout-item-info { flex: 1; min-width: 0; }
.checkout-item-name {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--black);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.checkout-item-brand {
    font-size: 0.7rem;
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.checkout-item-price {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--black);
    white-space: nowrap;
}

.checkout-summary__totals {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--grey);
}
.summary-line--total {
    font-weight: 600;
    color: var(--black);
    font-size: 0.95rem;
}

.checkout-summary__grand-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--sp-4) 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--black);
}

.checkout-summary__trust {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--cream-dark);
}

.trust-mini {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.78rem;
    color: var(--grey);
}
.trust-mini i { color: var(--gold); width: 14px; text-align: center; }

/* ══════════════════════════════
   PAYMENT PAGE
══════════════════════════════ */
.payment-page {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-10);
    align-items: start;
    margin-bottom: var(--sp-16);
}

.payment-card {
    background: var(--white);
    border: 1px solid var(--gold-pale);
    border-radius: var(--radius-lg);
    padding: var(--sp-10) var(--sp-12);
    text-align: center;
}

.payment-state { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }

.payment-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto;
    position: relative;
}

.payment-icon--phone {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-pale));
    color: var(--gold-deep);
}
.payment-icon--pulse {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-pale));
    color: var(--gold-deep);
}
.payment-icon--success {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: var(--color-success);
}
.payment-icon--failed {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: var(--color-error);
}

/* Pulse rings */
.pulse-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    animation: pulseRing 2s ease-out infinite;
    opacity: 0;
}
.pulse-ring--delay { animation-delay: 0.8s; }

@keyframes pulseRing {
    0%   { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

.payment-detail-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 320px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--cream-light);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}
.payment-detail-row span { color: var(--grey); }
.payment-detail-row strong { color: var(--black); }

.payment-amount { color: var(--gold-deep) !important; font-size: 1.1rem; }

.payment-note {
    font-size: 0.78rem !important;
    color: var(--grey-light) !important;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.payment-note i { color: var(--gold); }

.payment-waiting-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
}
.waiting-dots {
    display: flex;
    gap: var(--sp-2);
}
.waiting-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    animation: waitDot 1.4s ease-in-out infinite;
}
.waiting-dots span:nth-child(2) { animation-delay: 0.2s; }
.waiting-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes waitDot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1); opacity: 1; }
}

.waiting-text { font-size: 0.85rem; color: var(--grey); }

.payment-timer {
    font-size: 0.8rem;
    color: var(--grey-light);
    padding: var(--sp-2) var(--sp-4);
    background: var(--cream-light);
    border-radius: var(--radius-full);
}
.payment-timer span { color: var(--gold-deep); font-weight: 600; }

/* Payment summary sidebar */
.payment-summary {
    background: var(--white);
    border: 1px solid var(--gold-pale);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
    position: sticky;
    top: calc(var(--navbar-height) + var(--sp-6));
}

.payment-summary__title {
    font-size: 1rem;
    margin-bottom: var(--sp-2);
}

.payment-summary__number {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: var(--sp-4);
}

.payment-summary__items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}

.payment-summary__item {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    font-size: 0.85rem;
}
.psi-name { flex: 1; color: var(--black-soft); }
.psi-qty  { color: var(--grey-light); font-size: 0.78rem; }
.psi-total { font-weight: 500; color: var(--black); white-space: nowrap; }

.payment-summary__grand {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--black);
    padding-top: var(--sp-4);
}

/* ══════════════════════════════
   ORDER CONFIRMATION PAGE
══════════════════════════════ */
.confirmation-page {
    max-width: 720px;
    margin: 0 auto var(--sp-20);
    text-align: center;
}

/* Animated checkmark */
.confirmation-icon {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto var(--sp-8);
}

.confirmation-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4edda, #a8d5b5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--color-success);
    animation: confirmPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

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

/* Sparkles */
.sparkle {
    position: absolute;
    font-size: 0.8rem;
    color: var(--gold);
    animation: sparklePop 0.6s ease forwards;
    opacity: 0;
}
.sparkle--1 { top: -5px; right: 10px; animation-delay: 0.3s; }
.sparkle--2 { top: 15px; right: -10px; animation-delay: 0.45s; }
.sparkle--3 { bottom: 5px; right: -8px; animation-delay: 0.5s; }
.sparkle--4 { top: 0; left: 0; animation-delay: 0.4s; }

@keyframes sparklePop {
    from { transform: scale(0) rotate(0deg); opacity: 0; }
    to   { transform: scale(1) rotate(30deg); opacity: 1; }
}

.confirmation-title {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    margin-bottom: var(--sp-4);
}
.confirmation-subtitle {
    font-size: 1rem;
    color: var(--grey);
    max-width: 480px;
    margin: 0 auto var(--sp-10);
    line-height: 1.8;
}

/* Confirmation card */
.confirmation-card {
    background: var(--white);
    border: 1px solid var(--gold-pale);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    text-align: left;
    margin-bottom: var(--sp-10);
}

.confirmation-card__header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-6);
    margin-bottom: var(--sp-6);
}
.confirmation-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--grey-light);
    margin-bottom: var(--sp-1);
}
.confirmation-order-num,
.confirmation-receipt {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--black);
}

.confirmation-items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    margin: var(--sp-5) 0;
}
.confirmation-item {
    display: flex;
    gap: var(--sp-4);
    align-items: center;
}
.confirmation-item__image {
    width: 64px;
    height: 78px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--cream);
    flex-shrink: 0;
}
.confirmation-item__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--grey-light);
    background: var(--cream-dark);
}
.confirmation-item__info { flex: 1; }
.confirmation-item__name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--black);
    margin-bottom: 3px;
}
.confirmation-item__meta { font-size: 0.8rem; color: var(--grey); }
.confirmation-item__price {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--black);
    white-space: nowrap;
}

.confirmation-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    padding-top: var(--sp-5);
}
.confirmation-address h4 {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--sp-3);
}
.confirmation-address p {
    font-size: 0.875rem;
    color: var(--black-soft);
    line-height: 1.7;
    margin-bottom: 0;
}
.confirmation-notes { font-style: italic; color: var(--grey) !important; }

.confirmation-totals {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--sp-3);
}

/* Next steps */
.confirmation-next {
    text-align: left;
    margin-bottom: var(--sp-10);
}
.confirmation-next h3 {
    font-size: 1.3rem;
    margin-bottom: var(--sp-6);
    text-align: center;
}
.next-steps {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}
.next-step {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
}
.next-step__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--white);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.next-step strong {
    display: block;
    font-size: 0.95rem;
    color: var(--black);
    margin-bottom: var(--sp-1);
}
.next-step p {
    font-size: 0.875rem;
    color: var(--grey);
    margin: 0;
}

.confirmation-actions {
    display: flex;
    justify-content: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .cart-layout,
    .checkout-layout,
    .payment-page {
        grid-template-columns: 1fr;
    }
    .cart-summary,
    .checkout-summary,
    .payment-summary {
        position: static;
    }
    .cart-items-header { display: none; }
    .cart-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }
    .cart-row__product { grid-column: 1 / -1; }
    .cart-row__price::before  { content: attr(data-label) ': '; font-size: 0.7rem; color: var(--grey-light); }
    .cart-row__qty::before    { content: attr(data-label) ': '; font-size: 0.7rem; color: var(--grey-light); }
    .cart-row__total::before  { content: attr(data-label) ': '; font-size: 0.7rem; color: var(--grey-light); }
    .cart-row__price,
    .cart-row__qty,
    .cart-row__total {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
    }
    .cart-row__remove { justify-self: end; }
}

@media (max-width: 600px) {
    .payment-card { padding: var(--sp-6); }
    .confirmation-footer { grid-template-columns: 1fr; }
    .checkout-steps { gap: 0; }
    .checkout-step-line { width: 40px; }
}