/* ═══════════════════════════════════════════
   Orders — Cart, Checkout, Order Detail
═══════════════════════════════════════════ */

/* ═══ CART ═══ */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 8px; }

.cart-item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 16px 20px;
    display: flex; align-items: center; gap: 16px;
}
.ci-info { flex: 1; min-width: 0; }
.ci-cat { font-family: var(--f-mono); font-size: 0.7rem; font-weight: 600; color: var(--accent); }
.ci-code { font-family: var(--f-mono); font-size: 0.78rem; color: var(--text3); margin-top: 2px; }
.ci-name { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-top: 4px; line-height: 1.4; }
.ci-meta { font-size: 0.75rem; color: var(--text3); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.ci-price { font-family: var(--f-mono); font-weight: 800; font-size: 1rem; white-space: nowrap; }
.ci-remove {
    width: 36px; height: 36px; border: none; border-radius: 8px;
    background: transparent; color: var(--text3); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; transition: all 0.15s;
}
.ci-remove:hover { background: rgba(220,38,38,0.06); color: var(--red); }

/* ═══ SUMMARY CARD ═══ */
.cs-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 24px;
    position: sticky; top: 80px;
}
.cs-card h4 { font-family: var(--f-body); font-weight: 700; font-size: 1rem; margin-bottom: 16px; }
.cs-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.88rem; }
.cs-total { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px; font-weight: 800; font-size: 1.05rem; }
.cs-vat { font-size: 0.75rem; color: var(--text3); text-align: right; margin-top: 4px; }
.cs-btn {
    width: 100%; padding: 14px; margin-top: 20px;
    border: none; border-radius: var(--r); background: var(--accent); color: #fff;
    font-family: var(--f-body); font-size: 0.9rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 0.15s; text-decoration: none;
}
.cs-btn:hover { background: var(--accent2); color: #fff; }

.cs-items { margin-bottom: 12px; }
.cs-item { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.82rem; border-bottom: 1px solid var(--border2); }
.cs-item:last-child { border-bottom: none; }
.cs-item-name { font-family: var(--f-mono); font-size: 0.75rem; color: var(--accent); }
.cs-item-price { font-family: var(--f-mono); font-weight: 700; white-space: nowrap; }

.cs-paid {
    margin-top: 16px; padding: 10px; border-radius: 8px;
    background: var(--green-bg); color: var(--green);
    font-size: 0.85rem; font-weight: 700; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ═══ CHECKOUT ═══ */
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.checkout-main { display: flex; flex-direction: column; gap: 16px; }
.checkout-sidebar { }

.checkout-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 20px;
}
.checkout-card h4 {
    font-family: var(--f-body); font-weight: 700; font-size: 0.95rem;
    color: var(--text); margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
}
.checkout-card h4 i { color: var(--accent); }

/* Pay options */
.pay-options { display: flex; flex-direction: column; gap: 8px; }
.pay-option { cursor: pointer; }
.pay-option input[type="radio"] { display: none; }
.po-content {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border: 1.5px solid var(--border);
    border-radius: var(--r); transition: all 0.15s;
}
.pay-option input:checked + .po-content { border-color: var(--accent); background: rgba(26,81,153,0.03); }
[data-theme="dark"] .pay-option input:checked + .po-content { background: rgba(91,160,245,0.05); }
.po-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.po-title { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.po-desc { font-size: 0.78rem; color: var(--text2); margin-top: 2px; }

/* ═══ ORDER DETAIL ═══ */
.order-detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.order-detail-main { display: flex; flex-direction: column; gap: 16px; }
.order-detail-sidebar { }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .cart-layout { grid-template-columns: 1fr; }
    .checkout-layout { grid-template-columns: 1fr; }
    .order-detail-layout { grid-template-columns: 1fr; }
    .cs-card { position: static; }
}