/* ============================================================
   sanaflair · Hilfsmittelbestellung — Formular + Übersicht
   Loads only on /hilfsmittelbestellung and
   /hilfsmittelbestellung/uebersicht, AFTER style.css.
   Everything is scoped under .aid-order-page so it never
   leaks into other views that share the aid-* base classes.

   Design language: white base, dark forest bands, editorial
   eyebrows, signature cards with a 3px green LEFT border
   (radius 0 14px 14px 0, minimal shadow), bold tight headings,
   brand green accents, and NO hover underlines (colour shift
   to --brand-dark instead). Purely visual — no JS hook touched.
   ============================================================ */

/* ---- Shared rhythm / typography ---- */
.aid-order-page .aid-shell h2,
.aid-order-page .aid-shell h3,
.aid-order-page .aid-side-card h3,
.aid-order-page .content-card h2{
  letter-spacing:-.035em;font-weight:800;line-height:1.12;
}
.aid-order-page .text-muted{color:var(--muted)}

/* Senior-friendly: brand-tinted form controls */
.aid-order-page input[type="radio"],
.aid-order-page input[type="checkbox"]{accent-color:var(--brand-dark)}
.aid-order-page .form-control:focus,
.aid-order-page .form-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 .2rem rgba(174,201,12,.22);
}

/* ---- Shell + side cards: calmer, editorial radius ---- */
.aid-order-page .aid-shell,
.aid-order-page .aid-side-card{
  border-radius:18px;
  border:1px solid var(--border-soft);
  box-shadow:0 12px 34px rgba(26,45,14,.06);
}
.aid-order-page .aid-side-card{
  border-left:3px solid var(--brand);
  border-radius:0 18px 18px 0;
}
.aid-order-page .aid-side-points i,
.aid-order-page .aid-feature-list i{color:var(--brand-dark)}
.aid-order-page .aid-side-points div,
.aid-order-page .aid-feature-list div{color:var(--ink-soft)}

/* ============================================================
   STEP INDICATOR — prominent, legible 4-step wizard rail
   ============================================================ */
.aid-order-page .aid-step-indicator{
  gap:.5rem;justify-content:flex-start;width:100%;
}
.aid-order-page .aid-step-indicator button{
  flex:1 1 0;min-width:0;justify-content:center;gap:.6rem;
  padding:.72rem .8rem;border-radius:12px;
  border:1px solid var(--border-soft);background:#fff;
  color:var(--ink-soft);font-weight:800;font-size:.95rem;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.aid-order-page .aid-step-indicator button small{
  font-size:.9rem;font-weight:800;letter-spacing:-.01em;
}
.aid-order-page .aid-step-indicator button span{
  width:1.95rem;height:1.95rem;border-radius:999px;
  background:var(--surface);color:var(--brand-text);
  font-size:.9rem;font-weight:800;flex-shrink:0;
}
.aid-order-page .aid-step-indicator button.is-active{
  background:linear-gradient(160deg,#1a2b0e 0%,#233212 100%);
  color:#fff;border-color:#1a2b0e;
}
.aid-order-page .aid-step-indicator button.is-active span{
  background:var(--brand);color:var(--brand-ink);
}
.aid-order-page .aid-step-indicator button.is-complete{
  background:var(--surface);color:var(--brand-ink);
  border-color:rgba(174,201,12,.5);
}
.aid-order-page .aid-step-indicator button.is-complete span{
  background:var(--brand);color:var(--brand-ink);
}

/* ============================================================
   STEP 1 — choice cards (Beratung / Vorbezug)
   ============================================================ */
.aid-order-page .aid-choice-card{
  padding:1rem 1.1rem;border-radius:12px;
  border:1px solid var(--border-soft);border-left:3px solid transparent;
  color:var(--ink);font-weight:700;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.aid-order-page .aid-choice-card:hover{
  border-color:rgba(174,201,12,.55);color:var(--brand-text);
}
.aid-order-page .aid-choice-card:has(input:checked){
  border-left-color:var(--brand);border-radius:0 12px 12px 0;
  background:var(--surface);color:var(--brand-ink);
}

/* ============================================================
   STEP 2 — product cards + budget/cart panel
   ============================================================ */
.aid-order-page .aid-product-card{
  padding:1rem 1.1rem;
  border:1px solid var(--border-soft);border-left:3px solid var(--brand);
  border-radius:0 14px 14px 0;background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.aid-order-page .aid-product-card:hover{
  border-left-color:var(--brand-dark);
  box-shadow:0 12px 30px rgba(26,45,14,.08);
}
.aid-order-page .aid-product-card.is-disabled{
  opacity:.5;background:var(--surface);border-left-color:var(--border-soft);
  box-shadow:none;
}
.aid-order-page .aid-product-card h3{
  font-size:1.02rem;font-weight:800;letter-spacing:-.02em;
}
.aid-order-page .aid-product-card p{color:var(--muted)}
.aid-order-page .aid-product-image{
  border-radius:12px;border:1px solid var(--border-soft);
}
.aid-order-page .aid-product-card-meta span{
  color:var(--ink-soft);font-weight:700;
}

/* Cart / box summary */
.aid-order-page .aid-cart-panel{
  padding:1rem;border:1px solid var(--border-soft);border-radius:16px;
  box-shadow:0 10px 30px rgba(26,45,14,.06);
}
.aid-order-page .aid-cart-head h3{
  font-size:1.15rem;font-weight:800;letter-spacing:-.03em;
}
.aid-order-page .aid-cart-item{
  background:var(--surface);border-radius:10px;
  border:1px solid var(--border-soft);
}
.aid-order-page .aid-cart-item-copy strong{color:var(--ink);font-weight:700}
.aid-order-page .aid-cart-item-copy span{color:var(--muted)}
.aid-order-page .aid-remove-btn{border-radius:10px}

/* 42 € budget progress */
.aid-order-page .aid-progress-wrap{border-top-color:var(--border-soft)}
.aid-order-page #aidProgressText{color:var(--ink-soft);font-weight:700;font-size:.9rem}
.aid-order-page .aid-progress-wrap .progress{
  height:12px;border-radius:999px;background:var(--border-soft);overflow:hidden;
}
.aid-order-page #aidProgressBar{
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand-dark) 100%);
  border-radius:999px;transition:width .3s ease;
}

/* ============================================================
   STEP 3 — profile fields + consent
   ============================================================ */
.aid-order-page .aid-consent-box{
  border:1px solid var(--border-soft);border-left:3px solid var(--brand);
  border-radius:0 12px 12px 0;background:var(--surface);
}
.aid-order-page .aid-consent-box.is-error{
  border-color:rgba(188,48,48,.4);border-left-color:#bc3030;background:#fff5f5;
}

/* ============================================================
   STEP 4 — signature + consent, calm & trustworthy
   ============================================================ */
.aid-order-page .aid-signature-stage h3{
  font-size:1.35rem;font-weight:800;letter-spacing:-.035em;
}
.aid-order-page .aid-signature-box{
  padding:.6rem;border-radius:14px;
  background:var(--surface);border:1.5px dashed rgba(122,149,0,.42);
}
.aid-order-page .aid-signature-box canvas{
  min-height:200px;border-radius:10px;background:#fff;
  border:1px solid var(--border-soft);
}

/* ============================================================
   Warning + action bar — big, obvious Zurück/Weiter/Absenden
   ============================================================ */
.aid-order-page .aid-form-actions{
  border-top-color:var(--border-soft);gap:.85rem;
}
.aid-order-page .aid-form-actions .btn{
  padding:.82rem 1.7rem;font-size:1.02rem;font-weight:800;border-radius:12px;
}
/* Zurück: restyle Bootstrap warning into a calm neutral back button */
.aid-order-page #aidPrevButton.btn-warning{
  background:#fff;border:1px solid var(--border-soft);color:var(--ink-soft);
}
.aid-order-page #aidPrevButton.btn-warning:hover:not(:disabled),
.aid-order-page #aidPrevButton.btn-warning:focus-visible:not(:disabled){
  background:var(--surface);border-color:rgba(174,201,12,.55);color:var(--brand-text);
}
.aid-order-page #aidPrevButton:disabled{opacity:.45}
.aid-order-page .aid-form-warning,
.aid-order-page #aidFormWarning{border-radius:12px}

/* ============================================================
   ÜBERSICHT — saved plan / order history
   ============================================================ */
.aid-order-page .content-card.large-card{
  border:1px solid var(--border-soft);border-left:3px solid var(--brand);
  border-radius:0 14px 14px 0;box-shadow:none;
}
/* Einstieg ohne Konto (portal/order-landing.php) */
.aid-order-page .aid-login-card .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.aid-order-page .aid-plan-summary{
  border-radius:0 12px 12px 0;border:1px solid rgba(174,201,12,.3);
  border-left:3px solid var(--brand);background:var(--surface);
}
.aid-order-page .aid-plan-summary span{color:var(--muted)}
.aid-order-page .aid-plan-summary strong{color:var(--brand-ink);font-weight:800}
.aid-order-page .aid-order-card{
  border:1px solid var(--border-soft);border-radius:12px;
}
.aid-order-page .aid-order-card-copy strong{color:var(--ink);font-weight:700}
.aid-order-page .aid-order-card-copy span{color:var(--muted)}
.aid-order-page .aid-history-card{
  border:1px solid var(--border-soft);border-left:3px solid var(--brand);
  border-radius:0 14px 14px 0;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.aid-order-page .aid-history-card:hover{
  border-left-color:var(--brand-dark);box-shadow:0 12px 30px rgba(26,45,14,.07);
}
.aid-order-page .aid-history-head small{color:var(--muted)}
.aid-order-page .aid-history-shipping{color:var(--brand-text)!important}
.aid-order-page .aid-status-pill{
  background:var(--surface);color:var(--brand-ink);
  border:1px solid rgba(174,201,12,.35);
}
.aid-order-page .order-tracking-pill{
  background:var(--surface);color:var(--brand-ink);
}
.aid-order-page .aid-history-tracking-link,
.aid-order-page .aid-history-tracking-link:hover,
.aid-order-page .aid-history-tracking-link:focus-visible{
  color:var(--brand-text);text-decoration:none;
}
.aid-order-page .aid-shipping-note{
  background:var(--surface);border-radius:12px;color:var(--ink-soft);
}
.aid-order-page .aid-cycle-info,
.aid-order-page .aid-cycle-note{
  border-radius:0 12px 12px 0;border-left:3px solid var(--brand);
  background:var(--surface);color:var(--ink-soft);
}
.aid-order-page .aid-cycle-info strong{color:var(--brand-ink)}
.aid-order-page .aid-switch input{accent-color:var(--brand-dark)}
.aid-order-page .aid-account-inline{border-top-color:var(--border-soft)}
.aid-order-page .aid-account-inline h4{font-weight:800;letter-spacing:-.02em}

/* ============================================================
   Responsive — usable wizard down to ≤400px
   ============================================================ */
@media (max-width:640px){
  .aid-order-page .aid-step-indicator{flex-wrap:wrap}
  .aid-order-page .aid-step-indicator button{
    flex:1 1 calc(50% - .35rem);justify-content:flex-start;
  }
}
@media (max-width:575.98px){
  .aid-order-page .aid-shell{border-radius:0 14px 14px 0}
  .aid-order-page .aid-side-card{border-radius:0 14px 14px 0}
  .aid-order-page .aid-form-actions{flex-wrap:wrap}
  .aid-order-page .aid-form-actions .btn{width:100%}
  .aid-order-page .aid-step-indicator button{
    justify-content:center;flex:1 1 calc(50% - .35rem);
  }
  .aid-order-page .aid-signature-box canvas{min-height:170px}
}