@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Cormorant:ital,wght@1,400;1,500&display=swap');

/* ==========================================================================
   Maeva Bella return flow — visual reskin to match the "Maeva Bella —
   Retouraanvraag" design. No HTML/blade markup is changed: every rule below
   targets ids/classes/structure that already exist in maevabelle's
   return/, auth/ and language/ blades (return + auth share the same layout).
   Palette  maroon #562321 · cream #fff8f4 · dusty-pink #d4bbb9
   Fonts    Jost (body) · Cormorant italic (step count) · GT Alpina Fine
            italic (headings, local font supplied with the design)
   ========================================================================== */

@font-face {
  font-family: 'GT Alpina Fine';
  src: url('../img/maevabelle/fonts/GTAlpinaFine-RegularItalic.woff2') format('woff2'),
       url('../img/maevabelle/fonts/GTAlpinaFine-RegularItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

:root {
  --mb-maroon: #562321;
  --mb-maroon-hover: #6b302d;
  --mb-cream: #fff8f4;
  --mb-pink: #d4bbb9;
  --mb-link-hover: #974d4a;
}

/* ==========================================================================
   RETURN + LOGIN  (shared: body.bg-white > div.min-h-screen > hero | content)
   ========================================================================== */

/* ---- Page shell ---- */
body.bg-white {
  background: var(--mb-cream) !important;
  font-family: 'Jost', 'Segoe UI', system-ui, sans-serif;
  color: #000;
  box-sizing: border-box;
}
body.bg-white a { color: var(--mb-maroon); }
body.bg-white a:hover { color: var(--mb-link-hover); }

body.bg-white > div.min-h-screen {
  background-color: var(--mb-cream) !important;
}
@media (min-width: 1024px) {
  /* the row is 100vh in Tailwind; trim it by the top margin so nothing scrolls,
     and let the two panels stretch to that height instead of forcing 100vh each */
  body.bg-white > div.min-h-screen {
    overflow: hidden;
    min-height: 100vh !important;
  }
  body.bg-white > div.min-h-screen > div:first-child { min-height: auto !important; }
}

/* ---- Left hero panel ---- */
/* hero photo — single source, here in CSS (the blade carries no inline bg).
   The blade fixes the panel to w-[834px]; override to a true ~50/50 split so
   the photo reads at the design's zoom instead of being cropped tighter.
   space-between drops the step list to the bottom, matching the design. */
body.bg-white > div.min-h-screen > div:first-child {
  position: relative;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  background: url('../img/maevabelle/maevabelle-bg.png') 65% 50% / cover no-repeat !important;
}
@media (min-width: 1024px) {
  body.bg-white > div.min-h-screen > div:first-child {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}
/* the blade's dark overlay div: a top band so the white logo reads, plus a
   bottom fade so the step cards sit on darker ground */
body.bg-white > div.min-h-screen > div:first-child > div:first-child {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(196deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.5) 96%) !important;
}
/* logo <img> (src set in the blade to maevabelle-logo.svg) — size only */
body.bg-white > div.min-h-screen > div:first-child img {
  width: 250px !important;
  max-width: 70% !important;
  height: auto !important;
}
/* steps block sits at the bottom (hero uses space-between); keep the blade's
   own top margin but drop any auto-centering */
body.bg-white > div.min-h-screen > div:first-child > div:nth-child(3) {
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
}

/* ---- Step cards + numbered circles + dashed connector ----
   The markup has no element for the number circles, so each is the card's
   ::before, pulled into a free column reserved by the card's margin-left. */
.max-w-\[500px\].px-\[60px\] { max-width: 560px !important; }

.step-indicator {
  display: block;
  position: relative;
  margin-left: 77px !important;   /* 55px circle + ~22px gap, like the design */
  /* rounded, softly-filled card with a thin light outline (the new design) */
  background: linear-gradient(90deg, rgba(15, 8, 8, 0.55) 0%, rgba(15, 8, 8, 0.34) 100%) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  padding: 24px 28px !important;
}
.step-indicator:hover { background: linear-gradient(90deg, rgba(15, 8, 8, 0.62) 0%, rgba(15, 8, 8, 0.4) 100%) !important; }
.step-indicator.active { border-color: rgba(255, 255, 255, 0.6) !important; }
.step-indicator + .step-indicator { margin-top: 30px !important; }

/* number circle (design: translucent, active = solid maroon) */
.step-indicator::before {
  position: absolute;
  left: -77px;
  top: 50%;
  transform: translateY(-50%);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.47);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  z-index: 2;
}
#step1-indicator::before { content: "1"; }
#step2-indicator::before { content: "2"; }
#step3-indicator::before { content: "3"; }

/* the circle follows the active step (sidebar.js sets .active) */
.step-indicator.active::before {
  background: var(--mb-maroon) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px #fff !important;
}

/* dashed connector running down the circle column */
.step-indicator + .step-indicator::after {
  content: "";
  position: absolute;
  left: -50px;
  top: calc(50% - 127px);
  height: 100px;
  border-left: 1px dashed rgba(255, 255, 255, 0.47);
  z-index: 1;
}

/* accent bar element kept but hidden — the design has no coloured bar */
[id$="-bar"] { display: none !important; }

.step-indicator h3 {
  font-size: 30px !important;
  line-height: 1.05 !important;
  font-weight: 400 !important;
  color: #fff !important;
  margin: 0 0 8px !important;
  position: relative;
  z-index: 2;
}
.step-indicator p {
  font-size: 14px !important;
  line-height: 20px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0 !important;
  position: relative;
  z-index: 2;
}

/* italic serif accent words — the design wraps them in <span> (GT Alpina Fine
   italic). The translated strings carry no spans yet, so this is a no-op until
   a span is added; wire it here so the accent lands the moment one exists. */
.step-indicator h3 span,
.step-content .form-intro span,
.step-content p.text-gray-600 span {
  font-family: 'GT Alpina Fine', 'Cormorant', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* ---- Right content panel ---- */
body.bg-white > div.min-h-screen > div:last-child {
  background-color: var(--mb-cream) !important;
  color: #000;
}

/* top-bar language / logout — design .lang-btn: outlined pill */
div.flex.justify-end.mb-4 > a,
.logoutBtn {
  background: transparent !important;
  color: #000 !important;
  border: 1px solid var(--mb-pink) !important;
  font-weight: 500 !important;
}
div.flex.justify-end.mb-4 > a:hover,
.logoutBtn:hover {
  background: rgba(212, 187, 185, 0.18) !important;
}

/* centre the single-column steps (find-order + login) like the design form.
   margin:auto (not 0 auto) also centres vertically in the flex column, so the
   shorter login form sits at the same height as the return form. */
#step1, #step0 {
  max-width: 493px;
  margin: auto;
  width: 100%;
  text-align: center;
}
/* the Maeva Bella "mark" badge, injected above the find-order form */
#step1::before {
  content: "";
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 30px;
  border-radius: 50%;
  background: var(--mb-pink) url('../img/maevabelle/maevabelle-mark.svg') center / 33px 49px no-repeat;
}

/* step count (1/2, 2/2) — Cormorant italic like the design */
.step-content h1 {
  font-family: 'Cormorant', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  line-height: 36px !important;
  color: #000 !important;
}
/* form title — Jost 500 upright, exactly like the design's .form-intro h1
   (GT Alpina Fine is reserved for italic accent words, which the translated
   strings don't contain, so it is loaded but not forced onto whole headings) */
.step-content h2 {
  font-family: 'Jost', 'Segoe UI', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: clamp(32px, 4vw, 44px) !important;
  line-height: 1 !important;
  color: var(--mb-maroon) !important;
  margin-top: 6px;
}
.step-content p.text-gray-600 {
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 32px !important;
  color: #6b5a55 !important;
}
#step2 p.text-sm.text-right { color: #6b5a55 !important; }

/* text inputs — design .field: white, dusty-pink border, square */
.step-content input[type="text"],
.step-content input[type="password"] {
  height: 54px !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  border: 1px solid var(--mb-pink) !important;
  padding: 0 20px !important;
  font-size: 20px !important;
  color: #000 !important;
  box-shadow: none !important;
}
.step-content input::placeholder { color: var(--mb-pink) !important; opacity: 1; }

/* focus: maroon border, neutralise Tailwind's yellow ring + styles.css outline */
.step-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.step-content select:focus,
.step-content textarea:focus {
  border-color: var(--mb-maroon) !important;
  box-shadow: none !important;
  outline: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
}
:focus {
    outline: 2px solid var(--mb-maroon);
    outline-offset: 2px;
}

/* selects (quantity, reason, return address) match the fields */
.step-content select {
  height: 54px !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  border: 1px solid var(--mb-pink) !important;
  font-size: 18px !important;
  color: #000 !important;
  box-shadow: none !important;
}

/* primary CTAs — design .btn-primary: maroon, near-square, uppercase */
#login,
button[name="form1_submit"],
#generateLabel,
#download-label {
  height: 48px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 26px !important;          /* stop the auto-width button ballooning */
  border-radius: 2.74px !important;
  background-color: var(--mb-maroon) !important;
  color: var(--mb-cream) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: none !important;
}
#login:hover,
button[name="form1_submit"]:hover,
#generateLabel:hover,
#download-label:hover {
  background-color: var(--mb-maroon-hover) !important;
  color: var(--mb-cream) !important;
}
/* in the centred steps, primary buttons stretch full width like the design */
#step1 button[name="form1_submit"],
#step0 #login {
  width: 100% !important;
}

/* secondary "previous step" link inside step2 — match the CTA height and
   centre its text (it was stretching to the CTA and floating text to the top) */
#step2 a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  padding: 0 26px !important;
  border-radius: 2.74px !important;
  background-color: transparent !important;
  border: 1px solid var(--mb-pink) !important;
  color: var(--mb-maroon) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: 0.05em !important;
}
#step2 a:hover { background-color: rgba(212, 187, 185, 0.18) !important; }

/* qr-code highlight badge */
.qr_code.bg-yellow-400 {
  background-color: var(--mb-pink) !important;
  color: var(--mb-maroon) !important;
  padding: 2px 8px;
  border-radius: 4px;
}

/* product list scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1ebe8; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--mb-maroon); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--mb-maroon-hover); }

.step-content { margin: auto 0; }

/* ==========================================================================
   LANGUAGE PAGE  (bootstrap layout: .full-screen-banner-maevabelle)
   ========================================================================== */
.full-screen-banner-maevabelle,
.full-screen-banner-maevabelle * {
  font-family: 'Jost', 'Segoe UI', system-ui, sans-serif;
}
.full-screen-banner-maevabelle .banner_cnt { text-align: center; }
/* logo <img> (src set in the blade to maevabelle-logo.svg) — size only */
.full-screen-banner-maevabelle .logo-img {
  width: 280px !important;
  max-width: 70%;
  height: auto !important;
  margin-bottom: 40px;
}
.full-screen-banner-maevabelle .checkmark_box label {
  color: #fff;
  background: rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.56);
  border: none;
}
.full-screen-banner-maevabelle .checkmark_box input:checked + label {
  background: var(--mb-maroon) !important;
  border-color: var(--mb-maroon) !important;
  color: #fff !important;   /* base style.css sets #262c3f on :checked — keep it white */
  box-shadow: inset 0 0 0 1px #fff;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .step-indicator h3 { font-size: 20px !important; }
  .step-content p.text-gray-600 { line-height: 1.5 !important; }
}
@media (max-width: 640px) {
  .max-w-\[500px\].px-\[60px\] { padding-left: 20px !important; padding-right: 20px !important; }
  .step-indicator {
    margin-left: 62px !important;
    padding: 16px 16px 16px 20px !important;
  }
  .step-indicator::before { left: -62px; width: 46px; height: 46px; font-size: 20px; }
  .step-indicator + .step-indicator { margin-top: 32px !important; }
  .step-indicator + .step-indicator::after { left: -40px; top: -52px; height: 66px; }
  .step-indicator h3 { font-size: 18px !important; }
  .step-indicator p { font-size: 13px !important; line-height: 18px !important; }
  .step-content h1 { font-size: 24px !important; line-height: 28px !important; }
  .step-content h2 { font-size: 28px !important; }
  .step-content p.text-gray-600 { font-size: 15px !important; line-height: 22px !important; }
  body.bg-white > div.min-h-screen > div:first-child img { max-height: 40px; width: 200px !important; }
  div.flex.justify-end.mb-4 > a, .logoutBtn { width: auto; }
}