/* ============================================
   HELADERÍA KAFIT — Cart & Checkout
   ============================================ */

/* ── Cart Sidebar/Page ── */
.cart-page { padding: var(--space-10) 0 var(--space-20); }
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-8); align-items: start; }

.cart-items { display: flex; flex-direction: column; gap: var(--space-4); }

.cart-item {
    display: flex; gap: var(--space-4);
    background: var(--kafit-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-fast);
}

.cart-item:hover { box-shadow: var(--shadow-card-hover); }
.cart-item__image { width: 100px; height: 100px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; }
.cart-item__image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__info { flex: 1; display: flex; flex-direction: column; }
.cart-item__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); margin-bottom: var(--space-1); }
.cart-item__variant { font-size: var(--text-xs); color: var(--kafit-gray-500); margin-bottom: var(--space-1); }
.cart-item__extras { font-size: var(--text-xs); color: var(--kafit-gray-500); }
.cart-item__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-2); }
.cart-item__price { font-family: var(--font-display); font-weight: 700; color: var(--kafit-primary); font-size: var(--text-lg); }
.cart-item__remove { color: var(--kafit-gray-400); cursor: pointer; padding: var(--space-2); transition: color var(--transition-fast); }
.cart-item__remove:hover { color: var(--kafit-error); }

/* ── Cart Summary ── */
.cart-summary {
    background: var(--kafit-white);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
}

.cart-summary__title { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--space-6); }

.cart-summary__row {
    display: flex; justify-content: space-between; padding: var(--space-3) 0;
    font-size: var(--text-sm); color: var(--kafit-gray-600);
}

.cart-summary__row.total {
    border-top: 2px solid var(--kafit-gray-200);
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--kafit-dark);
}

.cart-summary__row.discount { color: var(--kafit-success); }

.cart-promo {
    display: flex; gap: var(--space-2);
    margin: var(--space-4) 0;
}
.cart-promo input { flex: 1; padding: var(--space-3) var(--space-4); border: 2px solid var(--kafit-gray-200); border-radius: var(--radius-lg); font-size: var(--text-sm); outline: none; }
.cart-promo input:focus { border-color: var(--kafit-primary); }

.cart-summary__actions {
    display: flex; flex-direction: column; gap: var(--space-3);
    margin-top: var(--space-6);
}

.cart-summary__actions .btn { width: 100%; justify-content: center; }

/* ── Checkout ── */
.checkout-page { padding: var(--space-10) 0 var(--space-20); }
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-8); align-items: start; }

.checkout-section {
    background: var(--kafit-white);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-6);
}

.checkout-section__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--kafit-gray-100);
    display: flex; align-items: center; gap: var(--space-3);
}

.checkout-section__title .step-number {
    width: 32px; height: 32px;
    background: var(--kafit-gradient-warm);
    color: var(--kafit-white);
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-sm); font-weight: 700;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* ── Order Type Toggle ── */
.order-type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-6); }

.order-type-btn {
    padding: var(--space-4);
    border: 2px solid var(--kafit-gray-200);
    border-radius: var(--radius-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--kafit-white);
}

.order-type-btn:hover { border-color: var(--kafit-primary); }

.order-type-btn.active {
    border-color: var(--kafit-primary);
    background: rgba(var(--kafit-primary-rgb), 0.05);
}

.order-type-btn__icon { font-size: 2rem; margin-bottom: var(--space-2); }
.order-type-btn__label { font-weight: 600; font-size: var(--text-sm); }

/* Payment Methods */
.payment-methods { display: flex; flex-direction: column; gap: var(--space-3); }

.payment-method {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4);
    border: 2px solid var(--kafit-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.payment-method:hover { border-color: var(--kafit-primary); }
.payment-method.active { border-color: var(--kafit-primary); background: rgba(var(--kafit-primary-rgb), 0.05); }
.payment-method__radio { width: 20px; height: 20px; border: 2px solid var(--kafit-gray-300); border-radius: 50%; position: relative; flex-shrink: 0; }
.payment-method.active .payment-method__radio { border-color: var(--kafit-primary); }
.payment-method.active .payment-method__radio::after { content: ''; position: absolute; inset: 3px; background: var(--kafit-primary); border-radius: 50%; }
.payment-method__info { flex: 1; }
.payment-method__name { font-weight: 600; font-size: var(--text-sm); }
.payment-method__desc { font-size: var(--text-xs); color: var(--kafit-gray-500); }

/* ── Locations Selector ── */
.location-selector { display: flex; flex-direction: column; gap: var(--space-3); }

.location-option {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4);
    border: 2px solid var(--kafit-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.location-option:hover { border-color: var(--kafit-primary); }
.location-option.active { border-color: var(--kafit-primary); background: rgba(var(--kafit-primary-rgb), 0.05); }
.location-option__name { font-weight: 600; font-size: var(--text-sm); }
.location-option__address { font-size: var(--text-xs); color: var(--kafit-gray-500); }

/* ── Order Confirmation ── */
.confirmation-page { padding: var(--space-16) 0; text-align: center; }

.confirmation-card {
    background: var(--kafit-white);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-lg);
    max-width: 600px;
    margin: 0 auto;
}

.confirmation-icon {
    width: 80px; height: 80px;
    background: var(--kafit-success);
    color: white;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto var(--space-6);
    animation: confirmBounce 0.6s var(--transition-spring);
}

@keyframes confirmBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.confirmation-card h2 { margin-bottom: var(--space-3); }
.confirmation-card .order-number { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--kafit-primary); font-weight: 700; margin-bottom: var(--space-6); }

.order-detail { text-align: left; border-top: 2px solid var(--kafit-gray-100); padding-top: var(--space-6); margin-top: var(--space-6); }
.order-detail__row { display: flex; justify-content: space-between; padding: var(--space-2) 0; font-size: var(--text-sm); }
.order-detail__row .label { color: var(--kafit-gray-500); }
.order-detail__row .value { font-weight: 600; }

/* ── Status Tracker ── */
.status-tracker { display: flex; justify-content: space-between; margin: var(--space-8) 0; position: relative; }
.status-tracker::before { content: ''; position: absolute; top: 15px; left: 0; right: 0; height: 3px; background: var(--kafit-gray-200); }
.status-step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; flex: 1; }
.status-step__dot { width: 32px; height: 32px; border-radius: 50%; background: var(--kafit-gray-200); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; margin-bottom: var(--space-2); }
.status-step.completed .status-step__dot { background: var(--kafit-success); color: white; }
.status-step.active .status-step__dot { background: var(--kafit-primary); color: white; animation: pulse 2s infinite; }
.status-step__label { font-size: var(--text-xs); color: var(--kafit-gray-500); text-align: center; }

@media (max-width: 768px) {
    .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .status-tracker { flex-direction: column; gap: var(--space-4); }
    .status-tracker::before { top: 0; bottom: 0; left: 15px; right: auto; width: 3px; height: auto; }
    .status-step { flex-direction: row; gap: var(--space-3); }
}