/* =============================================
   SMIKKIE — CHECKOUT CSS
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Nunito', sans-serif; background: #F8F6FC; color: #1a1a2e; }

/* Header */
.checkout-header {
  background: white;
  border-bottom: 1.5px solid #E8E0F0;
  padding: 16px 0;
  position: sticky; top: 0; z-index: 100;
}
.checkout-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.checkout-header__logo .logo-text {
  font-size: 24px;
  font-weight: 900;
  color: #5B2D8E;
  letter-spacing: -0.5px;
}
.checkout-steps {
  display: flex;
  align-items: center;
  gap: 12px;
}
.checkout-step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.checkout-step--active { opacity: 1; }
.checkout-step--done { opacity: 0.7; }
.step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #E8E0F0;
  color: #5B2D8E;
  font-size: 13px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.checkout-step--active .step-num { background: #5B2D8E; color: white; }
.checkout-step--done .step-num { background: #7DC242; color: white; }
.step-label { font-size: 14px; font-weight: 700; color: #1a1a2e; }
.checkout-step-sep { color: #ccc; font-size: 12px; }
.checkout-header__back { font-size: 13px; font-weight: 700; color: #5B2D8E; text-decoration: none; }
.checkout-header__back:hover { text-decoration: underline; }

/* Layout */
.checkout-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 80px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}

/* Form */
.checkout-form-wrap { background: white; border-radius: 16px; padding: 36px; border: 1.5px solid #E8E0F0; }
.checkout-step-title { font-size: 24px; font-weight: 900; color: #1a1a2e; margin-bottom: 28px; letter-spacing: -0.5px; }
.form-section { margin-bottom: 28px; }
.form-section__title { font-size: 16px; font-weight: 800; color: #5B2D8E; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1.5px solid #E8E0F0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label { font-size: 13px; font-weight: 800; color: #1a1a2e; }
.form-group--wide { grid-column: span 2; }
.form-group--narrow { grid-column: span 1; }
.form-input {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  border: 1.5px solid #E8E0F0;
  border-radius: 10px;
  padding: 12px 14px;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus { outline: none; border-color: #5B2D8E; box-shadow: 0 0 0 3px rgba(91,45,142,0.1); }
.form-input.error { border-color: #e53e3e; }
.form-select { cursor: pointer; }
.form-hint { font-size: 12px; color: #888; }

/* Shipping options */
.shipping-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.shipping-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid #E8E0F0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.shipping-option input[type="radio"] { accent-color: #5B2D8E; width: 18px; height: 18px; flex-shrink: 0; }
.shipping-option--selected, .shipping-option:has(input:checked) { border-color: #5B2D8E; background: #F5F0FF; }
.shipping-option__info { flex: 1; }
.shipping-option__name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #1a1a2e; margin-bottom: 2px; }
.shipping-option__info span { font-size: 13px; color: #888; }
.shipping-option__price { font-size: 15px; font-weight: 900; color: #1a1a2e; white-space: nowrap; }
.text-green { color: #4a8c1c !important; }

/* Payment methods */
.payment-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.payment-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1.5px solid #E8E0F0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
}
.payment-method input[type="radio"] { accent-color: #5B2D8E; width: 18px; height: 18px; flex-shrink: 0; }
.payment-method--selected, .payment-method:has(input:checked) { border-color: #5B2D8E; background: #F5F0FF; }
.payment-method__logo {
  width: 40px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  background: #E8E0F0;
  color: #5B2D8E;
}
.ideal-logo { background: #CC0066; color: white; }
.klarna-logo { background: #FFB3C7; color: #1a1a2e; }
.paypal-logo { background: #003087; color: white; }

/* iDEAL banks */
.ideal-banks { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.ideal-banks label { font-size: 13px; font-weight: 800; color: #1a1a2e; }

/* Order review */
.order-review { background: #F8F6FC; border-radius: 12px; padding: 18px; margin-bottom: 20px; }
.order-review h3 { font-size: 16px; font-weight: 900; color: #1a1a2e; margin-bottom: 14px; }
.order-review-item { display: flex; justify-content: space-between; font-size: 14px; color: #1a1a2e; padding: 6px 0; border-bottom: 1px solid #E8E0F0; }
.order-review-item:last-of-type { border-bottom: none; }
.order-review__total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 900; color: #1a1a2e; padding-top: 12px; border-top: 1.5px solid #E8E0F0; margin-top: 8px; }
.order-review__total strong { color: #5B2D8E; }

/* Terms */
.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #555;
  margin-bottom: 24px;
  cursor: pointer;
  line-height: 1.5;
}
.terms-check input { width: 16px; height: 16px; accent-color: #5B2D8E; flex-shrink: 0; margin-top: 2px; }
.link { color: #5B2D8E; font-weight: 700; }

/* Nav */
.checkout-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 800;
  border-radius: 50px;
  padding: 12px 24px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s;
}
.btn--primary { background: #5B2D8E; color: white; }
.btn--primary:hover { background: #4a2278; transform: translateY(-1px); }
.btn--green { background: #7DC242; color: white; }
.btn--green:hover { background: #6aad38; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: #5B2D8E; border: 1.5px solid #5B2D8E; }
.btn--ghost:hover { background: #F5F0FF; }
.btn--full { width: 100%; }
.btn--lg { padding: 16px 32px; font-size: 16px; }

/* Summary */
.checkout-summary { position: sticky; top: 80px; }
.checkout-summary__box { background: white; border: 1.5px solid #E8E0F0; border-radius: 16px; padding: 28px; }
.checkout-summary__box h3 { font-size: 18px; font-weight: 900; color: #1a1a2e; margin-bottom: 18px; }
.checkout-summary-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #E8E0F0; font-size: 14px; }
.checkout-summary-item:last-of-type { border-bottom: none; }
.checkout-summary-item__name { display: flex; align-items: center; gap: 8px; color: #1a1a2e; font-weight: 600; }
.checkout-summary-item__qty { background: #5B2D8E; color: white; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.checkout-summary-item__price { font-weight: 900; color: #1a1a2e; }
.checkout-summary__divider { height: 1.5px; background: #E8E0F0; margin: 14px 0; }
.checkout-summary__row { display: flex; justify-content: space-between; font-size: 15px; color: #1a1a2e; margin-bottom: 8px; }
.checkout-summary__row--total { font-size: 20px; font-weight: 900; }
.checkout-summary__row--total strong { color: #5B2D8E; font-size: 22px; }
.checkout-summary__trust { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.cart-trust-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #888; }

/* Confirmation */
.order-confirmation { text-align: center; padding: 40px 20px; }
.order-confirmation__icon { margin-bottom: 20px; }
.order-confirmation h2 { font-size: 28px; font-weight: 900; color: #1a1a2e; margin-bottom: 12px; }
.order-confirmation p { font-size: 15px; color: #555; line-height: 1.7; margin-bottom: 20px; }
.order-confirmation__number { background: #F5F0FF; border-radius: 10px; padding: 14px 20px; font-size: 16px; color: #5B2D8E; font-weight: 700; display: inline-block; }

/* Responsive */
@media (max-width: 768px) {
  .checkout-layout { grid-template-columns: 1fr; padding: 20px 16px 60px; }
  .checkout-summary { position: static; }
  .checkout-form-wrap { padding: 20px; }
  .checkout-header__inner { padding: 0 16px; }
  .checkout-steps { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .form-group--wide, .form-group--narrow { grid-column: span 1; }
}