/* ==========================================================================
   New Order Flow — Phase 1 design build
   Built on the site's existing tokens from style.min.css (--color-primary
   etc.) with local fallbacks so this stays self-contained.

   Depth pass: soft elevation instead of flat borders, icons sitting in
   tinted badges, a warm page ground so white cards actually lift off it,
   smoother reveals. Vertical rhythm stays tight (laptop-height target) —
   the polish comes from shadow/color/motion, not from more padding.
   ========================================================================== */

:root{
  --no-primary: var(--color-primary, #E3B624);
  --no-primary-deep: var(--primary, #C6A436);
  --no-primary-wash: rgba(227, 182, 36, .14);
  --no-ink: #111111;
  --no-ink-soft: #333333;
  --no-muted: #767676;
  --no-page-bg: #FBF8F1;
  --no-bg: #FFFFFF;
  --no-bg-soft: #F3EFE4;
  --no-border: #EAE4D6;
  --no-danger: #BC0126;
  --no-success: #1E7A34;
  --no-shadow-sm: 0 1px 2px rgba(28,22,6,.05), 0 1px 1px rgba(28,22,6,.04);
  --no-shadow-md: 0 10px 30px rgba(28,22,6,.07), 0 2px 8px rgba(28,22,6,.04);
  --no-shadow-lift: 0 14px 30px rgba(17,17,17,.16);
}

@media (prefers-reduced-motion: reduce){
  .no-page *{ transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

.no-page{
  background: var(--no-page-bg);
  color: var(--no-ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate; /* keeps the photo wash's stacking contained to this page */
}

/* A quiet grain over everything — the one thing that most breaks the "flat
   digital form" read is that paper and fabric are never perfectly flat.
   Cheap, no image request: a tiled SVG noise data-URI. */
.no-page::before{
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.no-header, .no-body, .no-totalbar{ position: relative; z-index: 1; }

/* ---- Header ----
   A flat cream bar with nothing to anchor it reads as part of the page,
   not as a header — a hairline + soft shadow is the one small cue that
   makes it register as "site chrome" the moment the page loads, the way
   every other header a customer has ever used does. */
.no-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
  flex-shrink: 0;
  background: var(--no-page-bg);
  border-bottom: 1px solid var(--no-border);
  box-shadow: 0 2px 12px rgba(28,22,6,.04);
}
.no-header img{ height: 60px; width: 154px; display: block; }
.no-header-right{ display: flex; align-items: center; gap: 20px; }
.no-header-step{ font-size: 13px; color: var(--no-muted); white-space: nowrap; }
.no-header-divider{ width: 1px; height: 18px; background: var(--no-border); }
.no-header-phone{ display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--no-ink); text-decoration: none; }
.no-header-phone:hover{ color: var(--no-primary-deep); }

/* ---- Rail stepper (a hanger per step, hanging off a clothes rail —
        the brand's own mark, not a borrowed numbered-dots pattern).
        Runs down the left edge of the content column instead of across
        the top: a real vertical rail, stretched the full height of the
        viewport row (see .no-body's align-items:stretch) so the four
        steps read as one continuous progression, not a cluster. ---- */
.no-vrail{
  position: relative; flex-shrink: 0; width: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 6px 0;
}
.no-vrail-line{ position: absolute; top: 15px; bottom: 15px; left: 50%; width: 2px; margin-left: -1px; background: var(--no-border); border-radius: 2px; }
.no-rail-step{
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; font-family: inherit; cursor: not-allowed; width: 100%;
}
.no-rail-step.is-reachable{ cursor: pointer; }
.no-rail-step.is-reachable:not(.is-active) .no-hanger{ transition: box-shadow .15s ease, transform .15s ease; }
.no-rail-step.is-reachable:not(.is-active):hover .no-hanger{ box-shadow: var(--no-shadow-sm); transform: translateY(-1px); }
.no-hanger{
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; border-radius: 999px; background: var(--no-page-bg);
}
.no-hanger svg{ stroke: #CDC7B4; transition: stroke .2s ease, transform .2s ease; }
.no-rail-step.is-done .no-hanger svg{ stroke: var(--no-success); }
.no-rail-step.is-active .no-hanger{ background: var(--no-primary); box-shadow: var(--no-shadow-lift); }
.no-rail-step.is-active .no-hanger svg{ stroke: var(--no-ink); transform: scale(1.12); }

.no-rail-plain{
  font-size: 11.5px; font-weight: 500; color: #ABA192; text-align: center; line-height: 1.25;
  max-width: 80px;
}
.no-rail-step.is-done .no-rail-plain{ color: var(--no-muted); }
.no-rail-step.is-active .no-rail-plain{ color: var(--no-ink); font-weight: 700; }

/* ---- Layout ----
   The columns cap out via max-width, so without a matching cap on .no-body
   itself, any leftover space on a wide laptop screen has nowhere to go but
   the right edge (flex-start is the default). Centering the whole row in a
   contained width fixes that instead of just letting it sit lopsided. */
.no-body{ display: flex; gap: 32px; padding: 22px 40px 28px; flex: 1; align-items: flex-start; justify-content: center; position: relative; max-width: 1240px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.no-main{ flex: 1 1 0%; max-width: 640px; position: relative; }
.no-main--wide{ flex: 1 1 0%; max-width: 690px; position: relative; display: flex; flex-direction: column; }
.no-side{ flex: 1 1 0%; max-width: 380px; position: sticky; top: 20px; }

/* A short panel (Address, a lightly-filled Schedule) would otherwise sit
   pinned to the top with bare page colour underneath it on a tall laptop
   viewport. .no-panel's own auto top/bottom margins (below) centre it in
   whatever room the flex-column has, splitting the leftover space evenly
   above it and between it and this footer — which then always lands
   flush with the foot of the column, never floating in dead space. A
   tall panel (Services) simply has no room left for auto margins to
   claim, so it top-aligns and scrolls normally, footer trailing after it. */
.no-trust-foot{
  padding-top: 28px;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  border-top: 1px solid var(--no-border);
}
.no-trust-item{
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--no-muted);
}
.no-trust-item svg{ flex-shrink: 0; stroke: var(--no-primary-deep); }

.no-h1{ font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.015em; font-size: 37px; line-height: 1.05; margin: 0 0 5px; position: relative; }
.no-lede{ font-size: 14.5px; color: var(--no-muted); margin: 0 0 16px; }
.no-eyebrow{ font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--no-primary-deep); margin-bottom: 10px; }

/* Each panel carries its own ticket number — an oversized italic serif set
   against the condensed sans headline, on purpose: two typefaces with real
   tension between them reads as considered, not a font left on defaults. */
.no-panel-head{ position: relative; margin-bottom: 4px; }
.no-ghost-num{
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  position: absolute; top: -34px; right: -6px; font-size: 108px; line-height: 1;
  color: var(--no-ink); opacity: .06; pointer-events: none; z-index: 0; user-select: none;
}
/* Excludes .no-ghost-num: it also matches "> *", and this rule's
   position:relative would otherwise override its position:absolute
   (same specificity, later in source) — pulling the 108px numeral back
   into normal flow and pushing the real heading ~100px down. */
.no-panel-head > *:not(.no-ghost-num){ position: relative; z-index: 1; }

/* ---- Form controls ---- */
.no-label{ display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.no-required{ color: var(--no-danger); }
/* Shared shape for every per-field validation message — same look the
   phone/flat-unit errors already used, now reused everywhere instead of
   repeating the same inline style on each one. */
.no-field-error{ color: var(--no-danger); font-size: 12.5px; margin: -10px 0 14px; display: none; }
.no-input, .no-textarea, .no-select{
  width: 100%; padding: 12px 16px; border: 1px solid var(--no-border); border-radius: 10px;
  font-size: 15px; font-family: inherit; outline: none; background: var(--no-bg); color: var(--no-ink);
  box-shadow: var(--no-shadow-sm); transition: border-color .15s ease, box-shadow .15s ease;
}
.no-input:focus, .no-textarea:focus, .no-select:focus{ border-color: var(--no-primary-deep); box-shadow: 0 0 0 3px var(--no-primary-wash); }
/* Google's own rendered "Continue with Google" button carries a hardcoded
   browser-blue focus outline (rgb(0,99,155)) that has nothing to do with
   this page's palette — clashes the instant it's clicked or tabbed to.
   Swapping in the exact same gold focus treatment every other field on
   this page already uses, not removing focus indication altogether. */
#no-google-btn *:focus{ outline: none; border-radius: 4px; box-shadow: 0 0 0 3px var(--no-primary-wash); }
.no-textarea{ resize: none; }
.no-select{ appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.no-field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.no-search-wrap{ position: relative; margin-bottom: 8px; }
.no-search-wrap .no-input{ padding-right: 44px; }
.no-search-icon{ position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; transition: stroke .15s ease; }

.no-link{ font-size: 13.5px; font-weight: 600; color: var(--no-primary-deep); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.no-link:hover{ color: var(--no-ink); }

/* ---- Icon badge — small tinted circle behind an icon, used wherever an
        icon appears on its own (why-item list, pill icons) ---- */
.no-icon-badge{
  width: 32px; height: 32px; border-radius: 999px; background: var(--no-primary-wash);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.no-icon-badge svg{ stroke: var(--no-primary-deep); width: 16px; height: 16px; }

/* ---- Address type / category pills ---- */
.no-pill-group{ display: flex; gap: 10px; margin-bottom: 16px; }
.no-pill{
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px; border-radius: 12px; cursor: pointer; border: 1px solid var(--no-border);
  background: var(--no-bg); color: var(--no-ink-soft); font-size: 13.5px; font-weight: 600;
  box-shadow: var(--no-shadow-sm); transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.no-pill .no-icon-badge{ background: var(--no-bg-soft); }
.no-pill .no-icon-badge svg{ stroke: var(--no-muted); }
.no-pill:hover{ transform: translateY(-1px); box-shadow: var(--no-shadow-md); }
.no-pill.is-selected{ background: var(--no-primary); border-color: var(--no-primary); color: var(--no-ink); box-shadow: var(--no-shadow-md); }
.no-pill.is-selected .no-icon-badge{ background: rgba(17,17,17,.1); }
.no-pill.is-selected .no-icon-badge svg{ stroke: var(--no-ink); }

/* ---- Buttons ---- */
.no-btn{
  border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; padding: 14px; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.no-btn-full{ width: 100%; }
.no-btn-primary{ background: var(--no-ink); color: #FFFFFF; box-shadow: var(--no-shadow-md); }
.no-btn-primary:hover{ background: #000000; color:#FFFFFF; transform: translateY(-1px); box-shadow: var(--no-shadow-lift); }
.no-btn-primary:active{ transform: translateY(0); }
.no-btn-primary[disabled]{ background: #EFEAD9; color: #B6AE99; cursor: not-allowed; box-shadow: none; transform: none; }
.no-btn-secondary{ background: var(--no-bg); color: var(--no-ink); border: 1px solid var(--no-border); box-shadow: var(--no-shadow-sm); }
.no-btn-secondary:hover{ background: var(--no-bg-soft); color: var(--no-ink); }

/* ---- Loading state — a spinner in place of the label, not just a text
   swap, so an async step (logging in, charging a card) reads as "working"
   rather than "did my click even register?" during the wait. The label
   text still updates underneath (kept for screen readers / semantics),
   just visually hidden in favour of the spinner. Overrides the [disabled]
   look so a genuinely-in-flight button still reads as active, not inert. */
.no-btn.is-loading{ position: relative; pointer-events: none; color: transparent !important; }
.no-btn-primary.is-loading{ background: var(--no-ink) !important; box-shadow: var(--no-shadow-md) !important; cursor: default; }
.no-btn.is-loading::after{
  content: ''; position: absolute; width: 18px; height: 18px; top: 50%; left: 50%; margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; border-radius: 999px;
  animation: no-spin .6s linear infinite;
}
@keyframes no-spin{ to{ transform: rotate(360deg); } }

/* ---- Confirmed address banner ---- */
.no-confirmed{
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border: 1px solid var(--no-border); border-radius: 12px;
  background: var(--no-bg); box-shadow: var(--no-shadow-sm); margin-bottom: 16px;
}
.no-confirmed-check{ width: 22px; height: 22px; border-radius: 999px; background: var(--no-success); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.no-confirmed-title{ font-size: 14px; font-weight: 600; }
.no-confirmed-sub{ font-size: 13px; color: var(--no-muted); }

/* ---- Cards / sidebar ---- */
.no-card{ border: 1px solid var(--no-border); border-radius: 16px; padding: 18px 20px; background: var(--no-bg); box-shadow: var(--no-shadow-md); }
.no-card + .no-card{ margin-top: 14px; }
/* The "YOUR BOOKING" card is a direct child of .no-side, but the card in
   each side-panel below it (.no-side > #no-side-panels > .no-side-panel
   > .no-card) is nested one level deeper — so it's never actually the
   adjacent-sibling `.no-card + .no-card` above catches. Space it off the
   next card directly instead of relying on that selector reaching it. */
.no-side > .no-card{ margin-bottom: 16px; }
.no-card--soft{ background: linear-gradient(165deg, var(--no-primary-wash), var(--no-bg) 60%); border-color: rgba(227,182,36,.25); }
.no-card-title{ font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.015em; font-size: 20px; margin-bottom: 10px; }

/* Sidebar step list — same hanger vocabulary as the top rail, stacked.
   Each row is a real <button>: reset its default chrome, then style the
   three states explicitly — locked (not yet reached, inert), reachable
   (done or current — clickable, cursor says so), done (adds an edit icon). */
.no-summary-row{
  display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--no-border);
  width: 100%; background: none; border-left: none; border-right: none; border-top: none; text-align: left;
  font-family: inherit; cursor: not-allowed;
}
.no-summary-row:last-child{ border-bottom: none; }
.no-summary-row.is-reachable{ cursor: pointer; }
.no-summary-row.is-reachable:hover{ background: var(--no-primary-wash); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.no-summary-hanger{ width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.no-summary-hanger svg{ stroke: #D3CDBC; }
.no-summary-row.is-done .no-summary-hanger svg{ stroke: var(--no-success); }
.no-summary-row.is-active .no-summary-hanger svg{ stroke: var(--no-primary-deep); }
.no-summary-text{ flex: 1; min-width: 0; }
.no-summary-label{ font-size: 14.5px; font-weight: 500; color: #9A9A9A; display: block; }
.no-summary-row.is-active .no-summary-label{ font-weight: 600; color: var(--no-ink); }
.no-summary-row.is-done .no-summary-label{ color: var(--no-ink-soft); }
.no-summary-meta{ font-size: 12.5px; color: var(--no-muted); }
.no-summary-edit{ display: none; flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; align-items: center; justify-content: center; }
.no-summary-edit svg{ stroke: var(--no-muted); }
.no-summary-row.is-done .no-summary-edit{ display: flex; }
.no-summary-row.is-done:hover .no-summary-edit{ background: rgba(17,17,17,.06); }
.no-summary-row.is-done:hover .no-summary-edit svg{ stroke: var(--no-ink); }
.no-why-item{ display: flex; gap: 12px; align-items: center; }
.no-why-item + .no-why-item{ margin-top: 12px; }
.no-why-item span{ font-size: 14px; color: var(--no-ink-soft); }

/* ---- Toggles ---- */
.no-toggle-row{
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border: 1px solid var(--no-border); border-radius: 12px; cursor: pointer;
  background: var(--no-bg); font-family: inherit; margin-bottom: 14px; text-align: left; box-shadow: var(--no-shadow-sm);
}
.no-toggle-row span{ font-size: 14px; font-weight: 600; }
.no-toggle{ width: 38px; height: 22px; border-radius: 999px; background: var(--no-border); position: relative; flex-shrink: 0; transition: background .15s ease; }
.no-toggle.is-on{ background: var(--no-primary-deep); }
.no-toggle-knob{ width: 16px; height: 16px; border-radius: 999px; background: #FFFFFF; position: absolute; top: 3px; left: 3px; transition: left .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.no-toggle.is-on .no-toggle-knob{ left: 19px; }

/* ---- Service groups (Step 2) ----
   One accordion card per real service type (5, covering the 32 real
   categories between them) — each expands to its own sub-category tabs
   and item list. Replaces a flat 32-tab bar, which doesn't scale as a
   first thing to scan; search (above) is still the fast path in. */
.no-group-card{ border: 1px solid var(--no-border); border-radius: 16px; background: var(--no-bg); box-shadow: var(--no-shadow-sm); margin-bottom: 12px; overflow: hidden; }
.no-group-card.is-open{ box-shadow: var(--no-shadow-md); border-color: rgba(227,182,36,.35); }
.no-group-head{
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 18px;
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.no-group-head:hover{ background: var(--no-bg-soft); }
.no-group-icon{
  width: 44px; height: 44px; border-radius: 999px; background: var(--no-primary-wash);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.no-group-icon svg{ width: 22px; height: 22px; stroke: var(--no-primary-deep); }
.no-group-icon img{ width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.no-group-info{ flex: 1; min-width: 0; }
.no-group-name{ font-size: 16px; font-weight: 700; }
.no-group-desc{ font-size: 13px; color: var(--no-muted); margin-top: 2px; }
.no-group-meta{ display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.no-group-from{ font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--no-muted); text-align: right; line-height: 1.3; white-space: nowrap; }
.no-group-from strong{ font-size: 16px; color: var(--no-ink); font-weight: 700; }
.no-group-from span{ font-size: 11px; font-weight: 500; }
.no-group-chevron{
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--no-border);
  display: flex; align-items: center; justify-content: center; color: var(--no-ink-soft);
  transition: transform .2s ease;
}
.no-group-card.is-open .no-group-chevron{ transform: rotate(180deg); }
.no-group-select{
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--no-border);
  font-size: 13px; font-weight: 700; white-space: nowrap; background: var(--no-bg);
}
.no-group-select.is-selected{ background: var(--no-primary-wash); border-color: rgba(227,182,36,.4); color: var(--no-primary-deep); }
/* renderGroups() fully empties and rebuilds the whole accordion list on
   every click (see index.blade.php) rather than toggling a class on
   existing elements, so a transitioned property won't fire — but a CSS
   animation runs automatically the moment a matching element is inserted
   into the DOM, no JS changes needed. That's the difference between the
   category list opening with a snap and opening with a considered reveal. */
.no-group-body{ padding: 0 18px 18px; border-top: 1px solid var(--no-border); animation: no-group-reveal .2s ease; }
@keyframes no-group-reveal{ 0%{ opacity: 0; transform: translateY(-6px); } 100%{ opacity: 1; transform: translateY(0); } }
/* overflow-x:auto with no scrollbar (hidden below) gives zero visual hint
   there's more to see — the row just looks cut off mid-pill, which reads as
   broken rather than "swipe for more". The edge mask fixes that without a
   wrapper: real content, just gently tapered at both ends. */
.no-subtabs{
  display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 6px; margin-bottom: 4px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
}
.no-subtabs::-webkit-scrollbar{ display: none; }
.no-subtab{
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--no-border); font-family: inherit; background: var(--no-bg); color: var(--no-ink-soft);
  font-size: 13px; font-weight: 600; transition: background .15s ease, color .15s ease;
}
.no-subtab:hover:not(.is-active){ background: var(--no-bg-soft); border-color: #D9D2BE; }
.no-subtab.is-active{ background: var(--no-ink); color: #FFFFFF; border-color: var(--no-ink); }
.no-item-row{ display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border: 1px solid var(--no-border); background: var(--no-bg); border-radius: 12px; margin-bottom: 8px; box-shadow: var(--no-shadow-sm); }
.no-item-name{ font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.no-item-desc{ font-size: 13px; color: var(--no-muted); }
.no-item-right{ display: flex; align-items: center; gap: 16px; }
.no-item-price{ font-size: 15px; font-weight: 600; width: 58px; text-align: right; }
.no-add-btn{ width: 34px; height: 34px; border-radius: 999px; background: var(--no-primary); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; line-height: 1; color: var(--no-ink); font-weight: 700; box-shadow: var(--no-shadow-sm); transition: transform .12s ease, box-shadow .12s ease; }
.no-add-btn:hover{ transform: scale(1.08); box-shadow: var(--no-shadow-md); }
.no-qty-stepper{ display: flex; align-items: center; gap: 12px; background: var(--no-bg-soft); border-radius: 999px; padding: 5px 7px; }
.no-qty-btn{ width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--no-border); background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; line-height: 1; }
.no-qty-btn--fill{ background: var(--no-ink); color: #FFFFFF; border: none; }
.no-qty-val{ font-size: 14px; font-weight: 700; min-width: 12px; text-align: center; }

/* Full-bleed bar (it's a direct child of .no-page, already full width by
   default flex stretch) with its CONTENT aligned to the same centered
   column as everything above it, via the inner wrapper. */
.no-totalbar{
  position: sticky; bottom: 0; background: rgba(251,248,241,.9); backdrop-filter: blur(6px);
  border-top: 1px solid var(--no-border); padding: 16px 40px;
  box-shadow: 0 -10px 30px rgba(28,22,6,.06); flex-shrink: 0; box-sizing: border-box;
}
/* Price and CTA anchored together on the right as one glance-able group —
   split apart (price far left, button far right) made the customer's eye
   travel the whole bar to connect the total with the button that confirms
   it. */
.no-totalbar-inner{ max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
.no-totalbar-price{ text-align: right; }
.no-totalbar-label{ font-size: 13px; color: var(--no-muted); margin-bottom: 1px; }
.no-totalbar-amount{ font-family: 'Bebas Neue', sans-serif; font-size: 30px; color: var(--no-primary-deep); letter-spacing: .01em; }

/* ---- Contact step ---- */
.no-phone-row{ display: flex; gap: 8px; margin-bottom: 12px; }
.no-phone-code{ display: flex; align-items: center; gap: 7px; padding: 12px 12px; border: 1px solid var(--no-border); border-radius: 10px; font-size: 14px; color: var(--no-ink-soft); background: var(--no-bg); box-shadow: var(--no-shadow-sm); }
.no-summary-line{ display: flex; justify-content: space-between; font-size: 13.5px; padding: 8px 0; border-bottom: 1px solid var(--no-border); }
.no-summary-line:last-child{ border-bottom: none; }
.no-summary-total{ display: flex; justify-content: space-between; font-size: 14.5px; padding: 12px 0 0; font-weight: 700; }

/* ---- Desktop split-pane: header + stepper + the summary column stay put;
        only the item/form column scrolls, within its own space — not the
        whole page. (Below 993px this is dropped entirely in favour of one
        normal, whole-page scroll — a fixed split pane doesn't make sense on
        a phone.) ---- */
@media (min-width: 993px){
  .no-page{ height: 100vh; overflow: hidden; }
  .no-body{ align-items: stretch; min-height: 0; }
  .no-main, .no-main--wide{
    overflow-y: auto; min-height: 0; padding-right: 14px; margin-right: -14px;
    scrollbar-width: thin; scrollbar-color: #D9D2BE transparent;
  }
  .no-main::-webkit-scrollbar, .no-main--wide::-webkit-scrollbar{ width: 6px; }
  .no-main::-webkit-scrollbar-track, .no-main--wide::-webkit-scrollbar-track{ background: transparent; }
  .no-main::-webkit-scrollbar-thumb, .no-main--wide::-webkit-scrollbar-thumb{ background: #D9D2BE; border-radius: 999px; }
  .no-main::-webkit-scrollbar-thumb:hover, .no-main--wide::-webkit-scrollbar-thumb:hover{ background: var(--no-primary-deep); }
  .no-side{ position: static; overflow-y: auto; min-height: 0; }
}

@media (max-width: 992px){
  /* At 154x60 with a full "Step X of 4" + divider + spelled-out phone
     number, the header-right group has no room left on a real phone width
     and wraps mid-phrase ("Step 1 of" / "4") — cramped and unreadable.
     Shrinking the logo and collapsing the phone number to a tap-to-call
     icon (kept a real link, just the digits hidden) frees enough width for
     everything to sit on one clean row. */
  .no-header{ padding: 10px 20px; }
  .no-header img{ height: 44px; width: 113px; }
  .no-header-right{ gap: 12px; }
  .no-header-phone span{ display: none; }
  /* The vertical rail needs real height to lay its 4 steps down against —
     it only makes sense inside the fixed-height desktop split pane above.
     On a normal-flow, whole-page-scroll phone layout there's no such
     height to give it, so it's dropped in favour of the "Step X of 4"
     text already in the header. */
  .no-vrail{ display: none; }
  /* align-items:flex-start (set above, for the desktop row layout) makes a
     column-direction flex item hug its own content's natural width instead
     of stretching — .no-side's cards would render narrower than .no-main
     with dead space beside them, which is exactly what "stretch" fixes. */
  .no-body{ flex-direction: column; align-items: stretch; padding: 20px 20px 40px; gap: 24px; }
  .no-main, .no-main--wide, .no-side{ max-width: 100%; }
  .no-side{ position: static; }
  /* On mobile, .no-side stacks below .no-main and is the last thing on the
     page for every step except Services (which gets its own clearance via
     .no-totalbar-inner above) — so its own bottom edge is what the floating
     Chatway bubble (plus its auto-opened greeting popup, taller than the
     bubble alone) lands on top of once the page is scrolled all the way
     down. Reserving real space below it keeps the "Why Gold Dry Cleaners" /
     recap cards clear of the widget on every step, not just Services. */
  .no-side{ padding-bottom: 140px; }
  /* .no-totalbar is already a full-bleed direct child of .no-page (see its
     own rule above) — it was never inset by .no-body's padding in the
     first place, so the -20px "cancel the parent's padding" margin here
     had nothing to cancel and just pushed it 20px past the screen edge on
     both sides, forcing the whole page to scroll horizontally. */
  .no-totalbar{ padding: 14px 20px; }
  /* The real Chatway support-widget bubble docks itself in the bottom-right
     corner on top of the page (outside our control — it's injected by their
     own external script), landing directly on top of the right-aligned
     price+button cluster at this width. Reserving extra space on the right
     pushes that cluster clear of the widget's usual footprint; a little
     slack here is harmless, whereas too little repeats the overlap. */
  .no-totalbar-inner{ padding-right: 64px; }
  /* The sticky totalbar sits over normal page flow here (no desktop split
     pane to hold it clear of content), so the last item card would
     otherwise render physically behind it — this reserves real space. */
  #no-panels.no-has-stickybar{ padding-bottom: 110px; }
  .no-ghost-num{ font-size: 72px; top: -20px; }

  /* The FROM-price + chevron + Select pill (.no-group-meta) is a fixed-
     width block that never shrinks — on a narrow phone there simply isn't
     room for it next to the icon and name/description on one row, and
     without flex-wrap (set above) it would push the whole card wider than
     the screen instead of wrapping. Once it wraps, give it its own full-
     width row so it reads as a clean second line rather than a leftover
     fragment sitting wherever it happened to land. */
  .no-group-meta{ width: 100%; margin-top: 4px; }
  /* .no-group-meta still has 3 children (FROM, chevron, Select) — plain
     space-between would spread all three evenly, stranding the chevron
     by itself in the dead centre of the row. Pushing only FROM left via
     auto margin keeps the chevron pinned right next to Select, where it
     visually belongs, with FROM alone on the opposite edge. */
  .no-group-from{ margin-right: auto; }
}

/* ---- Motion: one considered transition, not scattered effects ----
   Panels cross-fade with a short horizontal drift instead of an instant
   show/hide — this single change is most of what makes switching steps
   feel like an app rather than a form toggling divs. Direction (forward
   slides in from the right, back from the left) is set by new-order.js. */
.no-panel{ transition: opacity .22s ease, transform .22s ease; margin-top: auto; margin-bottom: auto; }
.no-panel.no-anim-out{ opacity: 0; transform: translateX(var(--no-slide-out, -14px)); }
.no-panel.no-anim-in{ opacity: 0; transform: translateX(var(--no-slide-in, 14px)); }
.no-side-panel{ transition: opacity .18s ease; }
.no-side-panel.no-anim-out{ opacity: 0; }

/* Tactile feedback — every clickable surface acknowledges a press, not
   just a hover. Small, fast, felt more than seen. */
.no-btn, .no-pill, .no-add-btn, .no-qty-btn, .no-subtab, .no-group-head, .no-toggle-row{
  transition: transform .1s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .15s ease;
}
.no-btn:active, .no-pill:active, .no-add-btn:active, .no-qty-btn:active{ transform: scale(.94); }

@keyframes no-item-added{
  0%{ background: var(--no-primary-wash); }
  100%{ background: var(--no-bg); }
}
.no-item-row.is-just-added{ animation: no-item-added .5s ease; }

@keyframes no-pop-in{
  0%{ transform: scale(.6); opacity: 0; }
  60%{ transform: scale(1.08); opacity: 1; }
  100%{ transform: scale(1); }
}
.no-confirmed-check svg{ animation: no-pop-in .25s ease; }

@media (prefers-reduced-motion: reduce){
  .no-panel, .no-side-panel{ transition: none !important; }
}

/* ---- Full-nav toggle (new-order/layout.blade.php: $useFullNav) ----
   Everything here is scoped under body.no-full-nav, so it can never leak
   out and affect the real site elsewhere. */

/* Bootstrap's own .navbar default (padding: var(--bs-navbar-padding-y) ...,
   i.e. 8px top+bottom) renders unopposed here — on the real site it ends up
   visually at 0 only through an incidental collapsed-margin interaction
   with whatever page content follows it in NORMAL block flow. .no-page is
   a flex column, where margins don't collapse the same way, so relying on
   that same accident here would be fragile — setting it explicitly is the
   correct fix either way. */
body.no-full-nav .main-header nav.navbar{ padding-top: 0; padding-bottom: 0; }

/* .header-gap's sitewide margin-bottom:5rem (80px) is exactly enough on the
   real site only because of that same collapsing accident — on its own,
   80px is less than the real fixed header's own height (88px), which would
   otherwise clip the top of whatever comes after it by 8px. Overriding it
   here (not editing the shared .header-gap rule, so the real site is
   untouched) guarantees real clearance in this flex layout. */
body.no-full-nav .header-gap{ margin-bottom: 96px; }