/* Checkout — Lovable redesign (CSS-only restyle of existing HTML) */

/* Container */
.section-checkout{background:transparent!important}
.section-checkout .container{max-width:1100px}
#order-form{max-width:1100px!important}
#step4{max-width:1100px!important}

/* Steps navigation */
.checkout-steps{margin-bottom:2rem}
.nav-steps{display:flex;align-items:center;justify-content:center;gap:.5rem;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.nav-steps .nav-item{display:flex;align-items:center;gap:.5rem}
@media(max-width:480px){
  .nav-steps{flex-direction:column;gap:.25rem;align-items:stretch}
  .nav-step-arrow{display:none!important}
  .nav-steps .nav-link{justify-content:center;font-size:.8rem;padding:.5rem .75rem}
}
.nav-steps .nav-item::after{display:none!important;content:none!important}
.nav-steps .nav-link::after{display:none!important;content:none!important}
.nav-steps .nav-link{
  font-family:var(--font-sans);font-size:.875rem;font-weight:500;
  padding:.5rem 1rem;border-radius:999px;cursor:pointer;
  transition:all .2s;text-decoration:none;border:none;background:transparent;
  color:var(--muted);display:inline-flex;align-items:center;gap:.375rem;
}
.nav-steps .nav-link svg{flex-shrink:0}
.nav-steps .nav-link.active{background:var(--brand);color:#fff}
.nav-steps .nav-link.done{color:var(--brand);cursor:pointer}
.nav-steps .nav-link:hover:not(.active){color:var(--ink)}

/* Step arrows between items */
.nav-step-arrow{display:flex;align-items:center;color:var(--muted);opacity:.4;padding:0 .125rem}
.nav-step-arrow svg{flex-shrink:0}

/* Cards */
.section-checkout .card-lite,
.section-checkout article.card-lite{
  background:hsl(30 20% 95%)!important;border:1px solid var(--line)!important;
  border-radius:16px!important;padding:1.5rem!important;margin-bottom:1.5rem!important;
  box-shadow:none!important;
}
.section-checkout .card-body{padding:0!important}
.section-checkout .card-title{
  font-family:var(--font-serif)!important;font-size:1.25rem!important;
  color:var(--ink)!important;font-weight:inherit!important;margin-bottom:1.25rem!important;
}

/* Form fields */
.section-checkout .form-control{
  height:44px!important;border-radius:12px!important;
  border:1px solid var(--line)!important;background:#fff!important;
  font-family:var(--font-sans)!important;font-size:.875rem!important;
  color:var(--ink)!important;padding:.5rem 1rem!important;
}
.section-checkout .form-control:focus{
  border-color:var(--brand)!important;
  box-shadow:0 0 0 3px hsl(15 60% 50% / .1)!important;
  outline:none!important;
}
.section-checkout select.form-control{
  -webkit-appearance:none!important;appearance:none!important;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%237a6e63" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>')!important;
  background-repeat:no-repeat!important;background-position:right .75rem center!important;
  padding-right:2.5rem!important;
}
.section-checkout textarea.form-control{height:auto!important;min-height:100px!important;border-radius:12px!important}
.section-checkout label{font-family:var(--font-sans);font-size:.875rem;font-weight:500;color:var(--ink);margin-bottom:.375rem}
.section-checkout .form-group{margin-bottom:1rem}

/* Shipping / Payment options */
.section-checkout .js-check{
  display:flex!important;align-items:center!important;gap:1rem!important;
  padding:1rem 1.25rem!important;border-radius:12px!important;
  border:1px solid var(--line)!important;background:hsl(30 25% 97% / .6)!important;
  cursor:pointer!important;transition:all .15s!important;margin-bottom:.5rem!important;
}
.section-checkout .js-check:hover{border-color:hsl(15 60% 50% / .4)!important}
.section-checkout .js-check.active{border-color:var(--brand)!important;background:hsl(15 60% 50% / .06)!important;box-shadow:0 0 0 1px var(--brand)!important}
.section-checkout label.js-check.active{border-color:var(--brand)!important;background:hsl(15 60% 50% / .06)!important;box-shadow:0 0 0 1px var(--brand)!important}
.section-checkout .js-check .row{
  width:100%!important;margin:0!important;
  display:flex!important;align-items:center!important;gap:.75rem!important;
  flex-wrap:nowrap!important;
}
.section-checkout .js-check .row>[class*="col"]{
  flex:none!important;width:auto!important;max-width:none!important;padding:0!important;
}
.section-checkout .js-check h6{font-family:var(--font-sans)!important;font-weight:600!important;color:var(--ink)!important;margin:0!important;font-size:.875rem!important}
.section-checkout .js-check .text-muted{font-size:.8rem!important}
.section-checkout .js-check .price{float:none!important;margin:0!important}
.section-checkout .js-check img{max-width:48px!important;height:auto!important}
.section-checkout .js-check input[type="radio"]{
  -webkit-appearance:none!important;appearance:none!important;
  width:18px!important;height:18px!important;min-width:18px!important;border-radius:999px!important;
  border:1.5px solid var(--brand)!important;background:hsl(30 25% 97%)!important;
  cursor:pointer!important;flex-shrink:0!important;margin:0!important;
}
.section-checkout .js-check input[type="radio"]:checked{
  background:var(--brand)!important;box-shadow:inset 0 0 0 3px #fff!important;
}
.shipbox .form-group,.payment-methods .form-group,.pickup-options .form-group{margin-bottom:0!important;padding:0 .25rem!important}

/* Order summary sidebar */
.section-checkout .order-summary,
.section-checkout .order-sum{
  background:hsl(30 20% 95%)!important;border:1px solid var(--line)!important;
  border-radius:16px!important;padding:1.25rem!important;
  position:sticky!important;top:7rem!important;
}
.section-checkout .order-summary h4,
.section-checkout .order-sum h1,
.section-checkout .order-sum h4{
  font-family:var(--font-serif)!important;font-size:1.125rem!important;
  color:var(--ink)!important;font-weight:inherit!important;margin-bottom:.75rem!important;
}
.section-checkout .order-summary .fs-10,
.section-checkout .order-sum .fs-10{font-size:.75rem!important}
.section-checkout .order-summary .together,
.section-checkout .order-sum .cart-price-together{
  font-family:var(--font-sans)!important;font-size:1.25rem!important;
  font-weight:700!important;color:var(--ink)!important;
}
.section-checkout .order-summary dl,.section-checkout .order-sum dl{font-size:.8rem;margin-bottom:.25rem}
.section-checkout .order-summary dd,.section-checkout .order-sum dd{font-weight:600;color:var(--ink)}

/* Step navigation buttons */
.step-navigation{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:2rem;padding-top:1rem;
}
.step-navigation .btn-outline{
  height:44px;padding:0 1.5rem;border-radius:12px;
  border:1px solid var(--line);background:transparent;
  font-family:var(--font-sans);font-size:.875rem;font-weight:500;
  color:var(--ink);display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;transition:all .15s;
}
.step-navigation .btn-outline:hover{border-color:var(--ink)}
.step-navigation .btn-cta{
  height:44px;padding:0 1.5rem;border-radius:12px;
  background:var(--brand);color:#fff;border:none;
  font-family:var(--font-sans);font-size:.875rem;font-weight:500;
  display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;transition:background .2s;cursor:pointer;
}
.step-navigation .btn-cta:hover{background:var(--brand-hover);color:#fff}
.step-navigation .btn-outline svg,.step-navigation .btn-cta svg{flex-shrink:0}

/* Step 4 — summary */
#step4 .order-summary,
#grand-totals{
  background:hsl(30 20% 95%)!important;border:1px solid var(--line)!important;
  border-radius:16px!important;padding:1.5rem!important;
}
#step4 .result{font-family:var(--font-sans);font-size:.875rem}
#step4 hr{border-color:var(--line)}

/* Checkboxes in step 4 */
#accordion_pay .form-check-input{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;min-width:18px;border-radius:4px;
  border:1.5px solid var(--brand);background:#fff;
  cursor:pointer;margin:0 .5rem 0 0;vertical-align:middle;
}
#accordion_pay .form-check-input:checked{
  background:var(--brand);border-color:var(--brand);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
#accordion_pay .form-check-label{font-family:var(--font-sans);font-size:.875rem;color:var(--ink)}
#accordion_pay .form-check-label a{color:var(--brand)}

/* Finish button */
.finish,.payout{
  height:48px!important;border-radius:12px!important;
  background:var(--brand)!important;color:#fff!important;border:none!important;
  font-family:var(--font-sans)!important;font-size:1rem!important;font-weight:500!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  text-decoration:none!important;transition:background .2s!important;cursor:pointer!important;
  margin-top:1rem!important;
}
.finish:hover,.payout:hover{background:var(--brand-hover)!important;color:#fff!important}

/* Stepper arrows — handled by .nav-step-arrow elements */

/* Error alerts */
#alerts .alert,
#alerts-container .alert,
.section-checkout .alert{
  font-family:var(--font-sans)!important;font-size:.875rem!important;
  border-radius:12px!important;padding:1rem 3rem 1rem 1.25rem!important;
  border:1px solid hsl(0 60% 80%)!important;
  background:hsl(0 60% 97%)!important;color:hsl(0 60% 35%)!important;
  margin-bottom:1rem!important;position:relative!important;
  cursor:pointer!important;
}
#alerts .alert::after,
#alerts-container .alert::after,
.section-checkout .alert::after{
  content:'✕';
  position:absolute;top:.75rem;right:1rem;
  font-size:14px;line-height:1;color:hsl(0 60% 50%);opacity:.6;
  cursor:pointer;
}
#alerts .alert:hover::after,
#alerts-container .alert:hover::after{opacity:1}
.alert-close{
  position:absolute;top:.75rem;right:.75rem;
  background:none;border:none;padding:4px;cursor:pointer;
  color:hsl(0 60% 50%);opacity:.6;display:flex;align-items:center;justify-content:center;
  border-radius:4px;transition:all .15s;
}
.alert-close:hover{opacity:1;background:hsl(0 60% 90%)}
#alerts .alert .btn-close,
.section-checkout .alert .btn-close,
#alerts .alert .close{display:none!important}

/* Alert dismiss — add X via JS mutation observer */

/* Disabled row */
.disabled-row{opacity:.5;pointer-events:none}

/* Responsive */
@media(max-width:767.98px){
  .nav-steps{gap:.25rem}
  .nav-steps .nav-link{font-size:.75rem;padding:.375rem .75rem}
  .section-checkout .card-lite{padding:1rem!important}
}

/* Same address checkbox — custom styled */
.section-checkout input[type="checkbox"]#same,
.section-checkout .address-fields input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;min-width:18px;border-radius:4px;
  border:1.5px solid var(--brand);background:hsl(30 20% 95%);
  cursor:pointer;margin:0 .5rem 0 0;vertical-align:middle;
  position:relative;
}
.section-checkout input[type="checkbox"]#same:checked,
.section-checkout .address-fields input[type="checkbox"]:checked{
  background:var(--brand);border-color:var(--brand);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
  background-size:12px;background-position:center;background-repeat:no-repeat;
}

/* Aside margin fix for checkout */
.section-checkout aside{margin-top:0!important}

/* Force shipping/payment layout — radio | icon | text+desc | price */
.section-checkout .shipbox .js-check .row,
.section-checkout .payment-methods .js-check .row,
.section-checkout .pickup-options .js-check .row{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:.75rem!important;
}
.section-checkout .shipbox .js-check .row>span,
.section-checkout .payment-methods .js-check .row>span,
.section-checkout .pickup-options .js-check .row>span{
  flex:none!important;width:auto!important;max-width:none!important;padding:0!important;
}
.section-checkout .js-check .row>span:first-child{
  display:flex!important;align-items:center!important;gap:.75rem!important;flex-shrink:0!important;
}
.section-checkout .js-check .row>span:nth-child(2){
  flex:1 1 0%!important;min-width:0!important;
}
.section-checkout .js-check .price{
  display:block!important;float:none!important;text-align:right!important;
  margin:0!important;white-space:nowrap!important;margin-left:auto!important;
}
.section-checkout .js-check .price .fw-600{font-size:.875rem!important}

/* Alert close button — ensure visible */
.alert-close{
  position:absolute!important;top:.75rem!important;right:.75rem!important;
  background:none!important;border:none!important;padding:4px!important;cursor:pointer!important;
  color:hsl(0 60% 50%)!important;opacity:.6!important;display:flex!important;
  align-items:center!important;justify-content:center!important;
  border-radius:4px!important;transition:all .15s!important;z-index:1!important;
}
.alert-close:hover{opacity:1!important;background:hsl(0 60% 90%)!important}
.alert-close svg{width:16px!important;height:16px!important}

/* Selected state via :has(checked) — works without JS .active class */
.section-checkout .js-check:has(input[type="radio"]:checked){
  border-color:var(--brand)!important;
  background:hsl(15 60% 50% / .04)!important;
  box-shadow:none!important;
}

/* Arrow after done step — brand color */
.nav-step-arrow:has(+ .nav-item .nav-link.active),
.nav-item:has(.nav-link.done) + .nav-step-arrow{color:var(--brand)!important;opacity:1!important}

/* Payment method — fix layout: radio | title+desc | price in one row */
.section-checkout .payment-methods .js-check .row,
.section-checkout .pickup-options .js-check .row{
  display:flex!important;flex-wrap:nowrap!important;align-items:flex-start!important;gap:.75rem!important;
}
.section-checkout .payment-methods .js-check .row>span,
.section-checkout .pickup-options .js-check .row>span{
  flex:none!important;width:auto!important;max-width:none!important;padding:0!important;
}
.section-checkout .payment-methods .js-check .row>span:last-child,
.section-checkout .pickup-options .js-check .row>span:last-child{
  flex:1!important;min-width:0!important;
}
.section-checkout .payment-methods .js-check h6,
.section-checkout .pickup-options .js-check h6{display:block!important;margin-bottom:.125rem!important}
.section-checkout .payment-methods .js-check p,
.section-checkout .pickup-options .js-check p{display:block!important;margin-bottom:0!important}
.section-checkout .js-check .price.float-right{
  float:none!important;display:inline!important;
  font-size:.875rem!important;font-weight:600!important;color:var(--ink)!important;
  white-space:nowrap!important;position:absolute!important;top:1rem!important;right:1.25rem!important;
}
.section-checkout .js-check{position:relative!important}
.section-checkout .js-check .price.float-right .fw-600{font-weight:600!important}

/* ── Step 4 — Summary page ── */
#step4{max-width:750px!important;margin:0 auto!important}

/* Grand totals card */
#grand-totals{
  background:hsl(30 20% 95%)!important;border:1px solid var(--line)!important;
  border-radius:16px!important;padding:1.5rem!important;margin-bottom:1.5rem!important;
}
#grand-totals h4{font-family:var(--font-serif)!important;font-size:1.25rem!important;color:var(--ink)!important;font-weight:inherit!important}
#grand-totals .row{margin:0!important}
#grand-totals dl{font-family:var(--font-sans);font-size:.875rem;margin-bottom:.25rem}
#grand-totals dt{color:var(--muted)!important;font-weight:400!important;font-size:.8rem!important}
#grand-totals dd{color:var(--ink)!important;font-weight:600!important;font-size:.875rem!important}
#grand-totals hr{border-color:var(--line)!important;opacity:1!important}
#grand-totals .result{font-family:var(--font-sans);font-size:.8rem}
#grand-totals .result .col-9{color:var(--muted)}
#grand-totals .result .col-3{font-weight:500}
#grand-totals .result-prices .together{font-size:1.25rem!important;font-weight:700!important}

/* Note card */
#step4 .order-summary.mt-2{
  background:hsl(30 20% 95%)!important;border:1px solid var(--line)!important;
  border-radius:16px!important;padding:1.5rem!important;margin-bottom:1.5rem!important;
}
#step4 .order-summary.mt-2 h4{font-family:var(--font-serif)!important;font-size:1.25rem!important;color:var(--ink)!important;font-weight:inherit!important}
#step4 textarea{
  border-radius:12px!important;border:1px solid var(--line)!important;
  background:var(--bg)!important;font-family:var(--font-sans)!important;
  font-size:.875rem!important;padding:.75rem 1rem!important;
  min-height:100px!important;resize:vertical!important;
}
#step4 textarea:focus{border-color:var(--brand)!important;outline:none!important;box-shadow:0 0 0 3px hsl(15 60% 50% / .1)!important}

/* Consents card */
#step4 #accordion_pay{
  background:hsl(30 20% 95%)!important;border:1px solid var(--line)!important;
  border-radius:16px!important;padding:1.25rem!important;margin-bottom:1.5rem!important;
}
#step4 #accordion_pay .form-group{margin-bottom:.75rem!important;padding:0!important}
#step4 #accordion_pay .form-check{display:flex!important;align-items:flex-start!important;gap:.75rem!important;margin:0!important;padding:0!important}
#step4 #accordion_pay .form-check-input{
  -webkit-appearance:none!important;appearance:none!important;
  width:18px!important;height:18px!important;min-width:18px!important;
  border-radius:4px!important;border:1.5px solid var(--brand)!important;
  background:hsl(30 20% 95%)!important;cursor:pointer!important;
  margin:2px 0 0 0!important;flex-shrink:0!important;
}
#step4 #accordion_pay .form-check-input:checked{
  background:var(--brand)!important;border-color:var(--brand)!important;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>')!important;
  background-size:12px!important;background-position:center!important;background-repeat:no-repeat!important;
}
#step4 #accordion_pay .form-check-label{font-family:var(--font-sans)!important;font-size:.875rem!important;color:var(--ink)!important;line-height:1.5!important}
#step4 #accordion_pay .form-check-label a{color:var(--brand)!important}

/* Finish / Pay buttons */
#step4 .finish,#step4 .payout,#step4 #edit-submit-cardpay{
  height:48px!important;border-radius:12px!important;
  background:var(--brand)!important;color:#fff!important;border:none!important;
  font-family:var(--font-sans)!important;font-size:1rem!important;font-weight:500!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:.5rem!important;
  text-decoration:none!important;cursor:pointer!important;margin-top:1rem!important;
  width:100%!important;
}
#step4 .finish:hover,#step4 .payout:hover,#step4 #edit-submit-cardpay:hover{background:var(--brand-hover)!important}

/* Step 4 — no sticky on summary */
#step4 .order-summary,#step4 .order-sum{position:static!important}

/* Step 4 finish buttons wrap */
.step4-finish-wrap{display:flex;flex-direction:column;gap:.5rem}
.step4-finish-wrap .payout,.step4-finish-wrap .finish{margin-top:0!important}