/* ============================================================================
   Rinz checkout — donker, sjiek, conversiegericht.
   Scope: alles onder .rz-co. Hergebruikt de tokens uit rinz/brand.css.
   Strategie: .rz-co zet de donkere basis + stijlt generieke elementen
   (inputs/selects/labels/knoppen) binnen scope, zodat per-surface restyle
   = wrappen in .rz-co + een paar .rz-* klassen, niet elk element herschrijven.
   ========================================================================== */

/* ---- basis ------------------------------------------------------------- */
.rz-co{
  background:var(--rinz-abyss);
  color:var(--rinz-cream);
  font-family:var(--rinz-sans);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* Functionele checkout-koppen in de SANS (Cormorant-serif = te decoratief/slecht
   leesbaar op donker bij UI-maten). Serif alleen nog opt-in via .rz-serif. */
.rz-co h1,.rz-co h2,.rz-co h3{
  font-family:var(--rinz-sans);
  font-weight:600;
  letter-spacing:0;
  color:var(--rinz-cream);
}
.rz-co .rz-serif{font-family:var(--rinz-serif);font-weight:600;color:var(--rinz-cream)}
.rz-co a{color:var(--rinz-gold-hi);text-underline-offset:3px}
.rz-co a:hover{color:var(--rinz-gold)}
.rz-co p,.rz-co span,.rz-co label,.rz-co li,.rz-co td,.rz-co th{color:inherit}
/* iets lichter/leesbaarder dan --rinz-fog op donkere achtergrond */
.rz-co .rz-muted,.rz-co .text-zinc-500,.rz-co .text-gray-500,.rz-co .text-gray-600{color:#B7C4CE!important}

/* generieke Bagisto-containers binnen scope ontdoen van wit/lichtgrijs */
.rz-co .bg-white,.rz-co .bg-gray-50,.rz-co .bg-zinc-50,.rz-co .bg-slate-50{background:transparent!important}
.rz-co .border,.rz-co [class*="border-"]{border-color:var(--rinz-line)!important}
.rz-co .shadow,.rz-co [class*="shadow"]{box-shadow:none!important}
.rz-co .text-black,.rz-co .text-gray-800,.rz-co .text-gray-900,.rz-co .text-zinc-900{color:var(--rinz-cream)!important}

/* ---- layout ------------------------------------------------------------ */
.rz-co-wrap{max-width:var(--rinz-maxw);margin:0 auto;padding:40px 24px}
.rz-co-grid{
  max-width:var(--rinz-maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr 400px;gap:40px;
  padding:40px 24px;align-items:start;
}
@media(max-width:900px){
  .rz-co-grid{grid-template-columns:1fr;gap:20px;padding:20px 16px}
}

/* minimale checkout-header (logo-balk) */
.rz-co-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--rinz-line);
  max-width:var(--rinz-maxw);margin:0 auto;
}
.rz-co-head img,.rz-co-head svg{height:30px}

/* ---- stap-kaarten ------------------------------------------------------ */
.rz-step{
  border:1px solid var(--rinz-line);border-radius:14px;
  padding:16px 18px;margin-bottom:12px;background:var(--rinz-ink);
}
.rz-step__title{
  font-family:var(--rinz-sans);font-size:17px;font-weight:600;
  margin:0 0 12px;display:flex;align-items:center;gap:10px;
}
.rz-step__num{
  width:26px;height:26px;border-radius:999px;flex:none;
  display:inline-grid;place-items:center;font-size:13px;font-weight:700;
  background:linear-gradient(180deg,var(--rinz-gold-hi),var(--rinz-gold));color:var(--rinz-abyss);
}

/* ---- formulieren ------------------------------------------------------- */
.rz-field{margin-bottom:11px}
.rz-co label{display:block;font-size:13.5px;font-weight:500;color:#C4D2DC;margin-bottom:5px}
.rz-co input:not([type=checkbox]):not([type=radio]),
.rz-co select,.rz-co textarea,.rz-input{
  width:100%;background:var(--rinz-ink-2);
  border:1px solid var(--rinz-line);border-radius:10px;
  padding:10px 13px;color:var(--rinz-cream);font-size:15px;line-height:1.3;
  appearance:none;transition:border-color .15s;
}
.rz-co input::placeholder,.rz-co textarea::placeholder{color:var(--rinz-fog);opacity:.8}
.rz-co input:focus,.rz-co select:focus,.rz-co textarea:focus,.rz-input:focus{
  outline:none;border-color:var(--rinz-gold);
}
.rz-co select{background-image:linear-gradient(45deg,transparent 50%,var(--rinz-fog) 50%),linear-gradient(135deg,var(--rinz-fog) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.rz-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.rz-grid-2{grid-template-columns:1fr}}

/* radio-opties (verzend-/betaalmethode) */
.rz-option{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--rinz-line);border-radius:12px;
  padding:11px 14px;margin-bottom:8px;cursor:pointer;background:var(--rinz-ink-2);
  transition:border-color .15s,background .15s;
}
.rz-option:hover{border-color:var(--rinz-gold)}
.rz-option--active{border-color:var(--rinz-gold);background:rgba(201,162,75,.08)}
.rz-option input[type=radio]{accent-color:var(--rinz-gold);width:18px;height:18px}
.rz-option__label{font-weight:600;color:var(--rinz-cream)}

/* ---- knoppen ----------------------------------------------------------- */
.rz-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;
  cursor:pointer;border:1px solid var(--rinz-line);background:transparent;color:var(--rinz-cream);
  transition:filter .15s,border-color .15s;
}
.rz-btn:hover{border-color:var(--rinz-gold)}
.rz-btn--primary{
  width:100%;border:none;color:var(--rinz-abyss);font-size:16px;
  background:linear-gradient(180deg,var(--rinz-gold-hi),var(--rinz-gold));
}
.rz-btn--primary:hover{filter:brightness(1.06)}
.rz-btn--ghost{background:transparent}

/* ---- order-summary (sticky) ------------------------------------------- */
.rz-summary{
  position:sticky;top:24px;background:var(--rinz-ink);
  border:1px solid var(--rinz-line);border-radius:16px;padding:18px 20px;
}
@media(max-width:900px){.rz-summary{position:static}}
.rz-summary__title{font-family:var(--rinz-sans);font-weight:600;font-size:17px;margin:0 0 12px}
.rz-line{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--rinz-line)}
.rz-line:last-of-type{border-bottom:0}
.rz-line__img{width:56px;height:56px;object-fit:cover;border-radius:10px;flex:none;background:var(--rinz-ink-2)}
.rz-line__name{font-weight:600;color:var(--rinz-cream)}
.rz-line__meta{font-size:13px;color:#B7C4CE}
.rz-total{display:flex;justify-content:space-between;font-size:15px;margin:6px 0;color:var(--rinz-cream)}
.rz-total--grand{font-size:19px;font-weight:700;border-top:1px solid var(--rinz-line);padding-top:12px;margin-top:12px}
.rz-total--grand .rz-total__val{color:var(--rinz-gold-hi)}

/* ---- trust-row + scarcity --------------------------------------------- */
.rz-trust{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center;
  padding:16px;border-top:1px solid var(--rinz-line);border-bottom:1px solid var(--rinz-line);
  color:var(--rinz-fog);font-size:13px;
}
.rz-trust span{display:inline-flex;align-items:center;gap:7px}
.rz-trust b{color:var(--rinz-cream);font-weight:600}
.rz-badge-stock{display:inline-flex;align-items:center;gap:6px;color:var(--rinz-gold);font-size:13px;font-weight:600}
.rz-badge-stock::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--rinz-gold);box-shadow:0 0 0 3px rgba(201,162,75,.2)}

/* ---- verzend-USP (checkout) ------------------------------------------- */
.rz-ship-usp{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:18px;padding:14px 16px;border:1px solid var(--rinz-line);border-radius:12px;background:rgba(201,162,75,.06)}
.rz-ship-usp__hero{flex-basis:100%;font-weight:600;color:var(--rinz-gold-hi);font-size:15px}
.rz-ship-usp__sub{font-size:13px;color:var(--rinz-fog)}

/* ---- coupon (subtiel) -------------------------------------------------- */
.rz-coupon-toggle{color:var(--rinz-fog);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:none;padding:8px 0}
.rz-coupon-toggle:hover{color:var(--rinz-cream)}
.rz-coupon-body{display:flex;gap:8px;margin-top:10px}
.rz-coupon-body .rz-btn{flex:none;padding:12px 18px}

/* ---- productregels (cart-pagina) -------------------------------------- */
.rz-cart-line{display:flex;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rinz-line)}
.rz-cart-line__img{width:84px;height:84px;object-fit:cover;border-radius:12px;flex:none;background:var(--rinz-ink-2)}
.rz-qty{display:inline-flex;align-items:center;border:1px solid var(--rinz-line);border-radius:999px;overflow:hidden}
.rz-qty button{background:var(--rinz-ink-2);color:var(--rinz-cream);border:none;width:36px;height:36px;cursor:pointer;font-size:16px}
.rz-qty button:hover{background:rgba(201,162,75,.12)}
.rz-qty input{width:42px;text-align:center;background:transparent;border:none!important;color:var(--rinz-cream)}

/* ---- states ------------------------------------------------------------ */
.rz-empty{max-width:520px;margin:90px auto;text-align:center;padding:0 20px}
.rz-empty h1{font-size:30px;margin:0 0 12px}
.rz-empty p{color:var(--rinz-fog);margin:0 0 24px}

/* ---- Bagisto-specifieke klassen binnen scope overschrijven ------------- */
.rz-co .text-blue-700,.rz-co .text-navyBlue{color:var(--rinz-gold-hi)!important}
.rz-co .bg-navyBlue{background:linear-gradient(180deg,var(--rinz-gold-hi),var(--rinz-gold))!important;color:var(--rinz-abyss)!important}
.rz-co .border-navyBlue{border-color:var(--rinz-line)!important}
.rz-co .border-zinc-200,.rz-co .border-zinc-300,.rz-co [class*="border-zinc"]{border-color:var(--rinz-line)!important}
.rz-co .text-red-600{color:var(--rinz-ember)!important}
.rz-co main,.rz-co.rz-main{background:transparent!important}
/* Bagisto-knoppen binnen checkout */
.rz-co .secondary-button{border:1px solid var(--rinz-line)!important;background:transparent!important;color:var(--rinz-cream)!important;border-radius:999px!important}
.rz-co .secondary-button:hover{border-color:var(--rinz-gold)!important}
.rz-co .primary-button{background:linear-gradient(180deg,var(--rinz-gold-hi),var(--rinz-gold))!important;color:var(--rinz-abyss)!important;border:none!important;border-radius:999px!important}
/* quantity-changer pill */
.rz-co .rounded-\[54px\]{border-color:var(--rinz-line)!important}
/* checkbox-icoonlabels leesbaar op donker */
.rz-co .icon-uncheck,.rz-co .icon-check-box{color:var(--rinz-fog)!important}
/* error banner */
.rz-co .bg-\[\#FFF3CD\]{background:rgba(233,150,62,.12)!important;color:var(--rinz-cream)!important}

/* ---- bedankpagina ------------------------------------------------------ */
.rz-success{max-width:640px;margin:0 auto;text-align:center;padding:70px 24px}
.rz-success__check{width:72px;height:72px;margin:0 auto 24px;border-radius:999px;display:grid;place-items:center;background:rgba(201,162,75,.12);border:1px solid var(--rinz-line);color:var(--rinz-gold);font-size:34px}
.rz-success h1{font-size:32px;margin:0 0 10px}
.rz-success__order{color:var(--rinz-fog);margin:0 0 28px}
.rz-success__order b{color:var(--rinz-cream)}

/* ---------- Pay.nl / ING Checkout — subtiele betaalmethode-logostrip ---------- */
.rz-paylogos{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.rz-paylogo{display:inline-flex;align-items:center;justify-content:center;width:40px;height:26px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden}
.rz-paylogo svg{width:100%;height:100%;display:block}
.rz-pay-note{margin-top:.6rem;font-size:.72rem;line-height:1.45;color:#8a97a1}
@media(max-width:480px){.rz-paylogo{width:36px;height:24px}}

/* ---------- compacter (28-10): smallere zijpadding + strakkere accordions ---------- */
.rz-co .px-\[60px\]{padding-left:36px;padding-right:36px}
@media(max-width:1024px){.rz-co .px-\[60px\]{padding-left:20px;padding-right:20px}}
/* accordion-koppen (Adres/Verzendmethode/Betalingsmethode) iets compacter + leesbaar */
.rz-co [class*="py-4"]{padding-top:13px;padding-bottom:13px}
.rz-co h2{font-size:18px}
/* betaalmethode-notitie + muted iets lichter */
.rz-pay-note{color:#AEBDC7}