/* ============================================================
   Unified checkout modal — site-checkout.css
   Generic, reusable purchase modal driven by js/checkout.js
   ============================================================ */

.checkout-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(8,30,38,.55);
  backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px 16px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
.checkout-overlay.is-open{opacity:1;visibility:visible}

.checkout-modal{
  width:100%;max-width:680px;margin:auto;
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,30,40,.45);
  transform:translateY(18px);transition:transform .3s ease;
  display:flex;flex-direction:column;max-height:calc(100vh - 48px);
}
.checkout-overlay.is-open .checkout-modal{transform:none}

.checkout-modal__header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;
  background:linear-gradient(115deg,var(--c-primary-darker),var(--c-primary-dark));
  color:#fff;flex:0 0 auto;
}
.checkout-modal__title{font-size:1.25rem;font-weight:800;margin:0}
.checkout-modal__step-label{margin:4px 0 0;font-size:.82rem;opacity:.85;font-weight:600}

/* Progress steps */
.checkout-steps{
  display:flex;gap:6px;padding:12px 18px 0;flex:0 0 auto;overflow-x:auto;
}
.checkout-steps__item{
  flex:1;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:.45;transition:opacity .2s ease;
}
.checkout-steps__item.is-active,.checkout-steps__item.is-done{opacity:1}
.checkout-steps__dot{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;background:var(--c-border);color:var(--c-text);
}
.checkout-steps__item.is-active .checkout-steps__dot{
  background:var(--c-primary);color:#fff;
}
.checkout-steps__item.is-done .checkout-steps__dot{
  background:var(--c-primary-dark);color:#fff;
}
.checkout-steps__name{font-size:.72rem;font-weight:700;text-align:center;color:var(--c-text-muted)}
.checkout-steps__item.is-active .checkout-steps__name{color:var(--c-primary-dark)}

.ck-step__title{margin:0 0 6px;font-size:1.1rem;font-weight:800}
.ck-step__hint{margin:0 0 16px;font-size:.9rem;color:var(--c-text-muted);line-height:1.5}
.checkout-totals--compact{margin-top:8px}
.checkout-shipping + .checkout-totals{margin-top:18px}

.checkout-modal__footer{
  display:flex;gap:10px;padding:14px 22px 18px;border-top:1px solid var(--c-border);
  background:#fff;flex:0 0 auto;
}
.checkout-nav{
  padding:12px 18px;border-radius:12px;font-weight:800;font-size:.95rem;cursor:pointer;
  border:1px solid var(--c-border);background:#fff;color:var(--c-text);
  transition:background .2s ease,border-color .2s ease;
}
.checkout-nav--back{flex:0 0 auto}
.checkout-nav--next{
  flex:1;border:none;background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark));color:#fff;
}
.checkout-nav--next:hover{box-shadow:0 8px 18px -8px rgba(13,138,160,.5)}
.checkout-modal__footer .checkout-submit{flex:1;margin:0}
.checkout-modal__close{
  width:38px;height:38px;border:none;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.checkout-modal__close:hover{background:rgba(255,255,255,.28)}
.checkout-modal__close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}

.checkout-modal__body{padding:22px;overflow-y:auto;flex:1 1 auto}

.checkout-product{
  display:flex;gap:16px;align-items:center;
  padding:14px;border-radius:14px;background:var(--c-bg-alt);
  border:1px solid var(--c-border);margin-bottom:20px;
}
.checkout-product__icon{
  flex:0 0 48px;width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,var(--c-primary-light),#fff);
  color:var(--c-primary-dark);display:flex;align-items:center;justify-content:center;
}
.checkout-product__icon svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none}
.checkout-product__name{font-weight:800;font-size:1.05rem;margin:0 0 2px}
.checkout-product__desc{font-size:.85rem;color:var(--c-text-muted);margin:0}

.checkout-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.checkout-row--full{grid-template-columns:1fr}
.checkout-field{display:flex;flex-direction:column;gap:6px}
.checkout-field label{font-size:.82rem;font-weight:700;color:var(--c-text)}
.checkout-field label .req{color:#d33}
.checkout-field input,.checkout-field select{
  padding:11px 14px;border:1px solid var(--c-border);border-radius:10px;
  font-size:.95rem;font-family:inherit;background:#fff;color:var(--c-text);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.checkout-field input:focus,.checkout-field select:focus{
  outline:none;border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(13,138,160,.15);
}

.checkout-coupon{display:flex;gap:10px;margin:8px 0 18px}
.checkout-coupon input{flex:1;padding:11px 14px;border:1px solid var(--c-border);border-radius:10px;font:inherit}
.checkout-coupon button{
  padding:11px 18px;border:none;border-radius:10px;cursor:pointer;
  background:var(--c-primary);color:#fff;font-weight:700;white-space:nowrap;
  transition:background .2s ease;
}
.checkout-coupon button:hover{background:var(--c-primary-dark)}
.checkout-coupon-msg{font-size:.85rem;margin-top:8px;min-height:1em}
.checkout-coupon-msg.ok{color:#1a8a3a}
.checkout-coupon-msg.err{color:#d33}

/* Shipping options (books only) */
.checkout-shipping{margin-bottom:18px}
.checkout-shipping__title{font-weight:800;font-size:.95rem;margin-bottom:10px}
.checkout-shipping__options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ship-opt{cursor:pointer;display:block}
.ship-opt input{position:absolute;opacity:0;width:0;height:0}
.ship-opt__box{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;
  padding:14px 10px;border:2px solid var(--c-border);border-radius:14px;background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.ship-opt__name{font-weight:800;font-size:.95rem}
.ship-opt__desc{font-size:.78rem;color:var(--c-text-muted);line-height:1.3}
.ship-opt__price{font-weight:800;color:var(--c-primary-dark);font-size:.9rem;margin-top:2px}
.ship-opt:hover .ship-opt__box{border-color:var(--c-primary)}
.ship-opt input:checked + .ship-opt__box{
  border-color:var(--c-primary);background:linear-gradient(135deg,var(--c-primary-light),#fff);
  box-shadow:0 6px 16px -6px rgba(13,138,160,.4)
}
@media (max-width:560px){.checkout-shipping__options{grid-template-columns:1fr}}

.checkout-totals{
  display:flex;flex-direction:column;gap:6px;
  padding:14px 16px;border-radius:12px;background:var(--c-bg-soft);
  border:1px solid var(--c-border);margin-bottom:18px;
}
.checkout-totals__row{display:flex;justify-content:space-between;font-size:.95rem}
.checkout-totals__row--total{font-weight:800;font-size:1.15rem;border-top:1px dashed var(--c-border);padding-top:8px;margin-top:2px}
.checkout-totals__discount{color:#1a8a3a}

.checkout-consent{display:flex;gap:10px;align-items:flex-start;margin-bottom:18px;font-size:.9rem;line-height:1.5}
.checkout-consent input{flex:0 0 auto;margin-top:3px;width:18px;height:18px;cursor:pointer}
.checkout-consent label{cursor:pointer}
.checkout-consent a{color:var(--c-primary-dark);font-weight:700;text-decoration:underline}

.checkout-submit{
  width:100%;padding:15px;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark));
  color:#fff;font-size:1.05rem;font-weight:800;
  transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease;
}
.checkout-submit:hover{box-shadow:0 10px 24px -8px rgba(13,138,160,.5)}
.checkout-submit:active{transform:translateY(1px)}
.checkout-submit:disabled{opacity:.6;cursor:not-allowed}

.checkout-error{
  display:none;padding:12px 14px;border-radius:10px;margin-bottom:16px;
  background:#fdeaea;color:#a32020;border:1px solid #f3c4c4;font-size:.9rem;
}
.checkout-error.is-visible{display:block}

.checkout-loading{
  position:absolute;inset:0;background:rgba(255,255,255,.85);
  display:none;align-items:center;justify-content:center;z-index:5;border-radius:18px;
}
.checkout-loading.is-visible{display:flex}
.checkout-spinner{
  width:42px;height:42px;border:4px solid var(--c-primary-light);
  border-top-color:var(--c-primary);border-radius:50%;
  animation:ck-spin .8s linear infinite;
}
@keyframes ck-spin{to{transform:rotate(360deg)}}

@media (max-width:560px){
  .checkout-row{grid-template-columns:1fr}
  .checkout-modal__header{padding:14px 16px}
  .checkout-modal__body{padding:16px}
}