/* Global Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Roboto', sans-serif; background-color: #f3f4f6; color: #374151; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* CHECKOUT HEADER */
.checkout-header { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 15px 0; margin-bottom: 30px; }
.checkout-header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5rem; font-weight: 800; color: var(--theme-color); }
.secure-badge { font-size: 0.85rem; color: #10b981; font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* LAYOUT */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: start; }

@media (max-width: 1000px) {
    .checkout-layout { grid-template-columns: 1fr; }
}

/* STEP CARDS */
.step-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); border: 1px solid #e5e7eb; overflow: hidden; }

.step-title { 
    background: #f9fafb; padding: 15px 20px; border-bottom: 1px solid #f3f4f6; 
    display: flex; align-items: center; gap: 15px;
}
.step-title span { 
    width: 28px; height: 28px; background: var(--theme-color); color: #fff; 
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.step-title h3 { font-size: 1.1rem; color: #111827; }

.step-body { padding: 25px; }

/* FORM ELEMENTS */
.form-row { display: flex; gap: 20px; margin-bottom: 15px; }
.form-group { flex: 1; }
@media (max-width: 600px) { .form-row { flex-direction: column; gap: 15px; } }

.form-group label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: #4b5563; }
.form-group input, .form-group textarea {
    width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.95rem; outline: none; transition: .2s;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--theme-color); box-shadow: 0 0 0 3px rgba(249,115,22,0.1); }

.dealer-info-box { background: #eff6ff; border: 1px solid #dbeafe; padding: 12px; border-radius: 8px; color: #1e40af; font-size: 0.9rem; margin-top: 15px; }

/* SHIPPING & PAYMENT OPTIONS */
.shipping-options, .payment-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; }

.shipping-item, .payment-item {
    border: 2px solid #e5e7eb; border-radius: 10px; padding: 15px; cursor: pointer; transition: .2s; display: flex; align-items: center; gap: 12px;
}
.shipping-item input, .payment-item input { width: 18px; height: 18px; accent-color: var(--theme-color); }
.shipping-item.selected, .payment-item:has(input:checked) { border-color: var(--theme-color); background: #fff7ed; }

.sh-info, .pay-info { display: flex; align-items: center; gap: 12px; }
.sh-info i, .pay-info i { font-size: 1.5rem; color: #9ca3af; }
.sh-info div strong, .pay-info div strong { display: block; font-size: 0.95rem; color: #111827; }
.sh-info div span, .pay-info div span { font-size: 0.8rem; color: #6b7280; }

/* SIDEBAR SUMMARY */
.summary-card { background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; padding: 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.summary-card h3 { font-size: 1.2rem; margin-bottom: 20px; border-bottom: 1px solid #f3f4f6; padding-bottom: 10px; }

.summary-items { max-height: 200px; overflow-y: auto; margin-bottom: 20px; }
.s-item { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.85rem; color: #4b5563; border-bottom: 1px dashed #f3f4f6; }

/* Coupon */
.coupon-area { display: flex; gap: 5px; margin-bottom: 10px; }
.coupon-area input { flex-grow: 1; padding: 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; }
.coupon-area button { background: #374151; color: #fff; border: none; padding: 0 15px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; }
.coupon-msg { font-size: 0.75rem; margin-top: 5px; padding: 5px; border-radius: 4px; }
.coupon-msg.error { color: #b91c1c; background: #fef2f2; }
.coupon-msg.success { color: #15803d; background: #ecfdf5; }

.summary-totals { border-top: 2px solid #f3f4f6; padding-top: 15px; }
.s-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.9rem; color: #4b5563; }
.text-green { color: #10b981 !important; font-weight: 600; }
.grand-total { font-size: 1.3rem; font-weight: 800; color: #111827; margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px; }
.grand-total span:last-child { color: var(--theme-color); }

.btn-complete {
    width: 100%; padding: 18px; background: var(--theme-color); color: #fff; border: none; border-radius: 8px;
    font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: transform 0.2s; margin-top: 20px;
    box-shadow: 0 4px 12px rgba(249,115,22,0.3);
}
.btn-complete:hover { transform: translateY(-2px); }

.secure-footer { text-align: center; margin-top: 20px; }
.secure-footer img { max-width: 100%; margin-bottom: 10px; opacity: 0.7; }
.secure-footer p { font-size: 0.75rem; color: #9ca3af; }

.sticky-summary { position: sticky; top: 20px; }

/* UTILS */
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }