/* Standalone Scoped CSS for Red Orchid Calculator v2 */

:where(.ro-calc, .ro-calc-portal) {
  box-sizing: border-box;
  color: var(--ro-foreground);
  font-family: var(--ro-font-sans);
  font-size: 15px;
  line-height: 1.5;
}

:where(.ro-calc, .ro-calc-portal) *,
:where(.ro-calc, .ro-calc-portal) *::before,
:where(.ro-calc, .ro-calc-portal) *::after {
  box-sizing: inherit;
}

:where(.ro-calc, .ro-calc-portal) button,
:where(.ro-calc, .ro-calc-portal) input {
  font: inherit;
}

:where(.ro-calc, .ro-calc-portal) button {
  min-height: 44px;
}

/* The button reset this file never had. Hello Elementor's style.min.css styles bare
   `button` AND `[type=button]/[type=submit]` (colour #c36, 1px #c36 border, 3px radius,
   .5rem 1rem padding, font-weight 400) - see design-system.md. Without a declaration of
   our own those values simply apply to every calculator control that doesn't set them,
   which is why 16 of 40 buttons on /book/ rendered magenta with a 3px radius.

   The specificity here is deliberate and load-bearing:
   `:where(...)` contributes 0 and `:is(button, [type=...])` takes its most specific
   argument, so this rule is exactly (0,1,0) - the SAME as Hello's. The tie is broken by
   source order, which functions.php fixes by making ro-calculator depend on
   hello-elementor. Component rules further down this file are also (0,1,0) and come
   later, so they still override this reset; _ds_bundle.css (injected as a runtime <style>,
   document-order last) still outranks everything here.
   Do NOT raise this to (0,1,1) - it would then outrank both, which is exactly what a
   trial `:where(` -> `:is(` sweep of this whole file did (it flipped 25 min-height and
   27 text-align values against the bundle).
   Deliberately base-state only: a generic :hover/:focus counterpart would be (0,2,0) and
   would beat each atom's own BASE colour, stripping it on hover. State protection, if any
   atom needs it, belongs on that atom's own selector. */
:where(.ro-calc, .ro-calc-portal) :is(button, [type="button"], [type="submit"]) {
  color: inherit;
  background-color: transparent;
  background-image: none;
  border: 0 solid rgb(var(--ro-rgb-border));
  border-radius: 0;
  padding: 0;
  width: auto;
  font-weight: inherit;
}

/* Hello's companion rule `[type=button]:focus,…,button:hover { color:#fff;
   background-color:#c36 }` is (0,2,0), so the base reset above cannot answer it. Measured
   live on /book/: every atom that declares its own colour survives both states, and the
   only casualties are the calculator's CLASS-LESS, inline-styled buttons (the L5 day
   options `role="option"` and the mobile-bar combo-total row) - they inherit their colour,
   so Hello repaints them white, and their inline background keeps them white-on-light,
   i.e. invisible.
   The selector is therefore restricted to exactly that population: `[class=""]` (React
   renders an empty attribute) or no class attribute at all. That lands at (0,3,0) - above
   Hello - but it is provably incapable of stripping a designed colour, because an element
   with no class has no class-based colour rule to strip. Only an inline `color` could
   compete, and inline wins over this anyway.
   This is per-atom state protection in the sense that matters (a population defined by
   "has no styling of its own"), NOT the rejected generic :hover counterpart - do not widen
   it by dropping the class predicate. */
:where(.ro-calc, .ro-calc-portal) :is(button, [type="button"], [type="submit"]):is([class=""], :not([class])):is(:hover, :focus) {
  color: inherit;
  background-color: transparent;
}

:where(.ro-calc, .ro-calc-portal) button,
:where(.ro-calc, .ro-calc-portal) input[type="checkbox"] {
  cursor: pointer;
}

/* Disabled prerequisite families stay visible, but their controls are not actions.
   Native disabled buttons remove them from the tab order and accessibility action model;
   the dashed boundary and solid muted treatment make the state legible without opacity. */
:where(.ro-calc, .ro-calc-portal) .ro-addon-toggle--disabled,
:where(.ro-calc, .ro-calc-portal) .ro-addon-toggle--disabled:hover,
:where(.ro-calc, .ro-calc-portal) .ro-addon-toggle--disabled:focus {
  cursor: not-allowed;
  border-style: dashed !important;
  border-color: rgb(var(--ro-rgb-muted-fg) / 0.55) !important;
  background: rgb(var(--ro-rgb-surface-2)) !important;
  color: rgb(var(--ro-rgb-muted-fg)) !important;
  opacity: 1;
  filter: none;
}

:where(.ro-calc, .ro-calc-portal) .ro-prerequisite-controls { position: relative; }
:where(.ro-calc, .ro-calc-portal) .ro-prerequisite-explain {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: help;
  touch-action: manipulation;
}
:where(.ro-calc, .ro-calc-portal) .ro-prerequisite-explain:hover,
:where(.ro-calc, .ro-calc-portal) .ro-prerequisite-explain:focus {
  background: transparent;
  color: transparent;
}
:where(.ro-calc, .ro-calc-portal) .ro-prerequisite-explain:focus-visible {
  outline: 3px solid rgb(var(--ro-rgb-ring) / .75);
  outline-offset: -3px;
}
:where(.ro-calc, .ro-calc-portal) .ro-prerequisite-status {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
:where(.ro-calc, .ro-calc-portal) .ro-prerequisite-message {
  transition: background-color var(--ro-dur-base) var(--ro-ease-out), border-color var(--ro-dur-base) var(--ro-ease-out);
}
:where(.ro-calc, .ro-calc-portal) :is([data-ro-addon-id], [data-ro-addon-ids]) {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
:where(.ro-calc, .ro-calc-portal) .ro-prerequisite-option {
  position: relative;
  isolation: isolate;
}
:where(.ro-calc, .ro-calc-portal) .ro-prerequisite-option::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px dashed rgb(var(--ro-rgb-accent) / .72);
  border-radius: inherit;
  background: rgb(var(--ro-rgb-accent) / .07);
  box-shadow: 0 0 5px rgb(var(--ro-rgb-accent) / .08);
  pointer-events: none;
  animation: ro-prerequisite-attention 3500ms var(--ro-ease-in-out) both;
}
:where(.ro-calc, .ro-calc-portal) .ro-prerequisite-option::after {
  content: "Required";
  position: absolute;
  top: -8px;
  right: -4px;
  z-index: 1;
  padding: 3px 5px;
  border: 0;
  border-radius: 999px;
  background: rgb(var(--ro-rgb-accent) / .08);
  color: var(--ro-accent-text);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  animation: ro-prerequisite-badge-attention 3500ms var(--ro-ease-in-out) both;
}
@keyframes ro-prerequisite-attention {
  0%, 16%, 42%, 58%, 84%, 100% {
    border-color: rgb(var(--ro-rgb-accent) / .55);
    background-color: rgb(var(--ro-rgb-accent) / .05);
    box-shadow: 0 0 3px rgb(var(--ro-rgb-accent) / .05);
  }
  29%, 71% {
    border-color: rgb(var(--ro-rgb-accent) / .95);
    background-color: rgb(var(--ro-rgb-accent) / .11);
    box-shadow: 0 0 8px rgb(var(--ro-rgb-accent) / .14);
  }
}
@keyframes ro-prerequisite-badge-attention {
  0%, 16%, 42%, 58%, 84%, 100% { background-color: rgb(var(--ro-rgb-accent) / .08); }
  29%, 71% { background-color: rgb(var(--ro-rgb-accent) / .16); }
}
:where(.ro-calc, .ro-calc-portal) .ro-prerequisite-option:where(.is-returning)::before,
:where(.ro-calc, .ro-calc-portal) .ro-prerequisite-option:where(.is-returning)::after {
  opacity: 0;
  transition: opacity 900ms var(--ro-ease-out);
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  :where(.ro-calc, .ro-calc-portal) .ro-prerequisite-option::before,
  :where(.ro-calc, .ro-calc-portal) .ro-prerequisite-option::after { animation: none; }
  :where(.ro-calc, .ro-calc-portal) .ro-prerequisite-option:where(.is-returning)::before,
  :where(.ro-calc, .ro-calc-portal) .ro-prerequisite-option:where(.is-returning)::after { transition: none !important; }
  :where(.ro-calc, .ro-calc-portal) .ro-prerequisite-message { transition: none; }
}

:where(.ro-calc, .ro-calc-portal) button:focus-visible,
:where(.ro-calc, .ro-calc-portal) input:focus-visible {
  outline: 3px solid rgb(var(--ro-rgb-ring) / 0.5);
  outline-offset: 3px;
}

:where(.ro-calc, .ro-calc-portal) [hidden] {
  display: none !important;
}

:where(.ro-calc, .ro-calc-portal) .eyebrow {
  margin: 0 0 8px;
  color: var(--ro-primary-strong);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

:where(.ro-calc, .ro-calc-portal) h1,
:where(.ro-calc, .ro-calc-portal) h2,
:where(.ro-calc, .ro-calc-portal) h3,
:where(.ro-calc, .ro-calc-portal) p {
  margin-top: 0;
}

:where(.ro-calc, .ro-calc-portal) h1,
:where(.ro-calc, .ro-calc-portal) h2,
:where(.ro-calc, .ro-calc-portal) h3 {
  color: var(--ro-foreground);
  font-family: var(--ro-font-sans);
  line-height: 1.2;
}

:where(.ro-calc, .ro-calc-portal) h1 {
  max-width: 700px;
  margin-bottom: 10px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.045em;
}

:where(.ro-calc, .ro-calc-portal) h2 {
  margin-bottom: 8px;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  letter-spacing: -0.025em;
}

:where(.ro-calc, .ro-calc-portal) h3 {
  margin-bottom: 5px;
  font-size: 1rem;
}

:where(.ro-calc, .ro-calc-portal) .lede,
:where(.ro-calc, .ro-calc-portal) .muted {
  color: var(--ro-muted-fg);
}

:where(.ro-calc, .ro-calc-portal) .lede {
  max-width: 690px;
  margin-bottom: 0;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}

:where(.ro-calc, .ro-calc-portal) .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(.ro-calc, .ro-calc-portal) .journey-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.75fr);
  align-items: start;
  gap: clamp(16px, 2vw, 28px);
}

:where(.ro-calc, .ro-calc-portal) .surface-card {
  border: 1px solid rgb(var(--ro-rgb-border) / 0.9);
  border-radius: var(--ro-radius-card);
  background: rgb(var(--ro-rgb-surface) / 0.93);
  box-shadow: var(--ro-shadow-card);
}

:where(.ro-calc, .ro-calc-portal) .journey-card {
  padding: clamp(18px, 3vw, 36px);
}

:where(.ro-calc, .ro-calc-portal) .section-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

:where(.ro-calc, .ro-calc-portal) .section-kicker p {
  margin: 0;
  color: var(--ro-muted-fg);
  font-size: 0.8rem;
}

:where(.ro-calc, .ro-calc-portal) .step-badge,
:where(.ro-calc, .ro-calc-portal) .micro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgb(var(--ro-rgb-primary) / 0.24);
  border-radius: var(--ro-radius-control);
  background: rgb(var(--ro-rgb-primary) / 0.1);
  color: var(--ro-primary-strong);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.ro-calc, .ro-calc-portal) .level-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

:where(.ro-calc, .ro-calc-portal) .level-rail li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ro-muted-fg);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:where(.ro-calc, .ro-calc-portal) .level-dot {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: var(--ro-radius-control);
  background: var(--ro-surface-2);
  color: var(--ro-muted-fg);
}

:where(.ro-calc, .ro-calc-portal) .level-rail li.is-current {
  color: var(--ro-primary-strong);
}

:where(.ro-calc, .ro-calc-portal) .level-rail li.is-current .level-dot {
  background: var(--ro-primary-strong);
  color: var(--ro-surface);
  box-shadow: var(--ro-shadow-btn);
}

:where(.ro-calc, .ro-calc-portal) .level-section {
  padding-top: 24px;
  border-top: 1px solid var(--ro-border);
}

:where(.ro-calc, .ro-calc-portal) .level-section + .level-section {
  margin-top: 28px;
}

:where(.ro-calc, .ro-calc-portal) .level-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

:where(.ro-calc, .ro-calc-portal) .level-title h2 {
  margin-bottom: 0;
}

:where(.ro-calc, .ro-calc-portal) .level-title p {
  margin-bottom: 0;
  color: var(--ro-muted-fg);
  font-size: 0.82rem;
  text-align: right;
}

:where(.ro-calc, .ro-calc-portal) .category-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

:where(.ro-calc, .ro-calc-portal) .category-tab {
  display: grid;
  gap: 3px;
  padding: 16px;
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  background: var(--ro-surface-2);
  color: var(--ro-foreground);
  text-align: left;
  transition: border-color var(--ro-dur-base) var(--ro-ease-out), box-shadow var(--ro-dur-base) var(--ro-ease-out), background-color var(--ro-dur-base) var(--ro-ease-out), color var(--ro-dur-base) var(--ro-ease-out);
}

:where(.ro-calc, .ro-calc-portal) .category-tab:hover {
  border-color: var(--ro-border-hover);
  background: var(--ro-surface);
  box-shadow: var(--ro-shadow-card-hover);
}

:where(.ro-calc, .ro-calc-portal) .category-tab:active {
  transform: scale(0.98);
}

:where(.ro-calc, .ro-calc-portal) .category-tab.is-active {
  border-color: var(--ro-primary-strong);
  background: rgb(var(--ro-rgb-primary) / 0.1);
  box-shadow: var(--ro-shadow-card);
  color: var(--ro-primary-strong);
}

:where(.ro-calc, .ro-calc-portal) .category-tab strong {
  font-size: 1rem;
}

:where(.ro-calc, .ro-calc-portal) .category-tab span {
  color: var(--ro-muted-fg);
  font-size: 0.78rem;
}

:where(.ro-calc, .ro-calc-portal) .category-tab.is-active span {
  color: var(--ro-primary-strong);
}

:where(.ro-calc, .ro-calc-portal) .subcategory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

:where(.ro-calc, .ro-calc-portal) .subcategory-column {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  background: rgb(var(--ro-rgb-surface-2) / 0.7);
}

:where(.ro-calc, .ro-calc-portal) .subcategory-column--manicure {
  position: relative;
  grid-column: 2 / 4;
}

:where(.ro-calc, .ro-calc-portal) .subcategory-column--manicure::before {
  position: absolute;
  inset: 0 auto 0 -8px;
  width: 2px;
  border-radius: var(--ro-radius-control);
  background: var(--ro-border);
  content: "";
}

:where(.ro-calc, .ro-calc-portal) .subcategory-column--pedicure {
  grid-column: 1 / -1;
}

:where(.ro-calc, .ro-calc-portal) .column-label {
  margin: 0 2px 2px;
  color: var(--ro-muted-fg);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

:where(.ro-calc, .ro-calc-portal) .choice {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  background: var(--ro-surface);
  color: var(--ro-foreground);
  text-align: left;
  transition: border-color var(--ro-dur-base) var(--ro-ease-out), box-shadow var(--ro-dur-base) var(--ro-ease-out), background-color var(--ro-dur-base) var(--ro-ease-out), color var(--ro-dur-base) var(--ro-ease-out), transform var(--ro-dur-base) var(--ro-ease-spring);
}

:where(.ro-calc, .ro-calc-portal) .choice:hover {
  border-color: var(--ro-border-hover);
  box-shadow: var(--ro-shadow-card-hover);
}

:where(.ro-calc, .ro-calc-portal) .choice:active {
  transform: scale(0.98);
}

:where(.ro-calc, .ro-calc-portal) .choice.is-selected {
  border-color: var(--ro-secondary-strong);
  background: rgb(var(--ro-rgb-secondary) / 0.12);
  box-shadow: var(--ro-shadow-card);
}

:where(.ro-calc, .ro-calc-portal) .choice strong,
:where(.ro-calc, .ro-calc-portal) .choice small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

:where(.ro-calc, .ro-calc-portal) .choice strong {
  margin-bottom: 3px;
  font-size: 0.88rem;
}

:where(.ro-calc, .ro-calc-portal) .choice small {
  color: var(--ro-muted-fg);
  font-size: 0.75rem;
}

:where(.ro-calc, .ro-calc-portal) .addon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

:where(.ro-calc, .ro-calc-portal) .addon-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

:where(.ro-calc, .ro-calc-portal) .addon-column h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

:where(.ro-calc, .ro-calc-portal) .addon-column h3::before {
  width: 8px;
  height: 8px;
  border-radius: var(--ro-radius-control);
  background: var(--ro-accent-strong);
  content: "";
}

:where(.ro-calc, .ro-calc-portal) .addon-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  background: var(--ro-surface);
  transition: border-color var(--ro-dur-base) var(--ro-ease-out), box-shadow var(--ro-dur-base) var(--ro-ease-out), background-color var(--ro-dur-base) var(--ro-ease-out);
}

:where(.ro-calc, .ro-calc-portal) .addon-option:hover {
  border-color: var(--ro-border-hover);
  background: var(--ro-surface-2);
  box-shadow: var(--ro-shadow-card-hover);
}

:where(.ro-calc, .ro-calc-portal) .addon-option:has(input:checked) {
  border-color: var(--ro-secondary-strong);
  background: rgb(var(--ro-rgb-secondary) / 0.1);
}

:where(.ro-calc, .ro-calc-portal) .addon-option input {
  width: 20px;
  height: 20px;
  accent-color: var(--ro-secondary-strong);
}

:where(.ro-calc, .ro-calc-portal) .addon-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

:where(.ro-calc, .ro-calc-portal) .addon-option strong,
:where(.ro-calc, .ro-calc-portal) .addon-option small {
  display: block;
}

:where(.ro-calc, .ro-calc-portal) .addon-option small {
  color: var(--ro-muted-fg);
  font-size: 0.73rem;
}

:where(.ro-calc, .ro-calc-portal) .addon-price {
  color: var(--ro-foreground);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

:where(.ro-calc, .ro-calc-portal) .result-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px;
  border: 1px solid rgb(var(--ro-rgb-primary) / 0.24);
  border-radius: var(--ro-radius-card);
  background: linear-gradient(135deg, rgb(var(--ro-rgb-primary) / 0.1), rgb(var(--ro-rgb-surface) / 0.85));
  box-shadow: var(--ro-shadow-card);
}

:where(.ro-calc, .ro-calc-portal) .result-card p {
  margin-bottom: 0;
}

:where(.ro-calc, .ro-calc-portal) .result-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

:where(.ro-calc, .ro-calc-portal) .meta-chip,
:where(.ro-calc, .ro-calc-portal) .cart-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  background: rgb(var(--ro-rgb-surface) / 0.76);
  color: var(--ro-muted-fg);
  font-size: 0.75rem;
  font-weight: 800;
}

:where(.ro-calc, .ro-calc-portal) .primary-button,
:where(.ro-calc, .ro-calc-portal) .secondary-button,
:where(.ro-calc, .ro-calc-portal) .quiet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--ro-radius-control);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  transition: border-color var(--ro-dur-base) var(--ro-ease-out), box-shadow var(--ro-dur-base) var(--ro-ease-out), background-color var(--ro-dur-base) var(--ro-ease-out), color var(--ro-dur-base) var(--ro-ease-out), filter var(--ro-dur-base) var(--ro-ease-out), transform var(--ro-dur-base) var(--ro-ease-spring);
}

:where(.ro-calc, .ro-calc-portal) .primary-button {
  background: var(--ro-primary-strong);
  box-shadow: var(--ro-shadow-btn);
  color: var(--ro-surface);
}

:where(.ro-calc, .ro-calc-portal) .primary-button:hover {
  background: var(--ro-primary-strong);
  box-shadow: var(--ro-shadow-btn-hover);
  filter: brightness(1.05);
}

:where(.ro-calc, .ro-calc-portal) .primary-button:active,
:where(.ro-calc, .ro-calc-portal) .secondary-button:active,
:where(.ro-calc, .ro-calc-portal) .quiet-button:active {
  transform: scale(0.98);
}

:where(.ro-calc, .ro-calc-portal) .secondary-button {
  border-color: var(--ro-secondary-strong);
  background: rgb(var(--ro-rgb-secondary) / 0.12);
  color: var(--ro-foreground);
}

:where(.ro-calc, .ro-calc-portal) .secondary-button:hover {
  border-color: var(--ro-secondary-strong);
  background: rgb(var(--ro-rgb-secondary) / 0.2);
  box-shadow: var(--ro-shadow-card-hover);
}

:where(.ro-calc, .ro-calc-portal) .quiet-button {
  border-color: var(--ro-border);
  background: var(--ro-surface);
  color: var(--ro-foreground);
}

:where(.ro-calc, .ro-calc-portal) .quiet-button:hover {
  border-color: var(--ro-border-hover);
  background: var(--ro-surface-2);
  box-shadow: var(--ro-shadow-card-hover);
}

:where(.ro-calc, .ro-calc-portal) .result-card .primary-button {
  min-width: 144px;
}

:where(.ro-calc, .ro-calc-portal) .cart-panel {
  position: sticky;
  top: 20px;
  padding: clamp(18px, 3vw, 36px);
}

:where(.ro-calc, .ro-calc-portal) .cart-panel__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

:where(.ro-calc, .ro-calc-portal) .cart-panel__head p {
  margin-bottom: 0;
  color: var(--ro-muted-fg);
  font-size: 0.8rem;
}

:where(.ro-calc, .ro-calc-portal) .cart-items {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

:where(.ro-calc, .ro-calc-portal) .cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  background: var(--ro-surface-2);
}

:where(.ro-calc, .ro-calc-portal) .cart-row__title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

:where(.ro-calc, .ro-calc-portal) .cart-row__title span {
  min-width: 0;
  overflow-wrap: anywhere;
}

:where(.ro-calc, .ro-calc-portal) .cart-row__title small {
  display: block;
  color: var(--ro-muted-fg);
  font-size: 0.7rem;
}

:where(.ro-calc, .ro-calc-portal) .edit-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  background: var(--ro-surface);
  color: var(--ro-primary-strong);
  transition: border-color var(--ro-dur-base) var(--ro-ease-out), box-shadow var(--ro-dur-base) var(--ro-ease-out), background-color var(--ro-dur-base) var(--ro-ease-out);
}

:where(.ro-calc, .ro-calc-portal) .edit-button:hover {
  border-color: var(--ro-border-hover);
  background: rgb(var(--ro-rgb-primary) / 0.08);
  box-shadow: var(--ro-shadow-card-hover);
}

:where(.ro-calc, .ro-calc-portal) .upgrade-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

:where(.ro-calc, .ro-calc-portal) .upgrade-row .quiet-button {
  flex: 1 1 150px;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 0.74rem;
}

:where(.ro-calc, .ro-calc-portal) .saving-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid rgb(var(--ro-rgb-accent) / 0.4);
  border-radius: var(--ro-radius-control);
  background: rgb(var(--ro-rgb-accent) / 0.16);
  color: var(--ro-foreground);
  font-size: 0.8rem;
}

:where(.ro-calc, .ro-calc-portal) .saving-banner strong {
  color: var(--ro-foreground);
}

:where(.ro-calc, .ro-calc-portal) .saving-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--ro-radius-control);
  background: var(--ro-accent-strong);
  color: var(--ro-foreground);
  font-weight: 900;
}

:where(.ro-calc, .ro-calc-portal) .cart-total {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ro-border);
}

:where(.ro-calc, .ro-calc-portal) .cart-total span {
  color: var(--ro-muted-fg);
  font-size: 0.8rem;
}

:where(.ro-calc, .ro-calc-portal) .cart-total strong {
  color: var(--ro-foreground);
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

:where(.ro-calc, .ro-calc-portal) .cart-panel > .primary-button {
  width: 100%;
}

:where(.ro-calc, .ro-calc-portal) .cart-live {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--ro-foreground);
  font-size: 0.74rem;
  font-weight: 800;
}

:where(.ro-calc, .ro-calc-portal) .booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(16px, 2vw, 28px);
}

:where(.ro-calc, .ro-calc-portal) .booking-card {
  padding: clamp(18px, 3vw, 36px);
}

:where(.ro-calc, .ro-calc-portal) .booking-card__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

:where(.ro-calc, .ro-calc-portal) .booking-card__header p {
  margin-bottom: 0;
  color: var(--ro-muted-fg);
  font-size: 0.8rem;
}

:where(.ro-calc, .ro-calc-portal) .calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

:where(.ro-calc, .ro-calc-portal) .calendar-toolbar strong {
  font-size: 0.95rem;
}

:where(.ro-calc, .ro-calc-portal) .calendar-nav {
  display: inline-flex;
  gap: 6px;
}

:where(.ro-calc, .ro-calc-portal) .calendar-nav button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  background: var(--ro-surface);
  color: var(--ro-foreground);
  transition: border-color var(--ro-dur-base) var(--ro-ease-out), box-shadow var(--ro-dur-base) var(--ro-ease-out), background-color var(--ro-dur-base) var(--ro-ease-out);
}

:where(.ro-calc, .ro-calc-portal) .calendar-nav button:hover {
  border-color: var(--ro-border-hover);
  background: var(--ro-surface-2);
  box-shadow: var(--ro-shadow-card-hover);
}

:where(.ro-calc, .ro-calc-portal) .day-grid,
:where(.ro-calc, .ro-calc-portal) .slot-grid {
  display: grid;
  gap: 8px;
}

:where(.ro-calc, .ro-calc-portal) .day-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 20px;
}

:where(.ro-calc, .ro-calc-portal) .day-button,
:where(.ro-calc, .ro-calc-portal) .slot-button {
  display: grid;
  place-items: center;
  gap: 1px;
  min-height: 64px;
  padding: 8px 4px;
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  background: var(--ro-surface-2);
  color: var(--ro-foreground);
  transition: border-color var(--ro-dur-base) var(--ro-ease-out), box-shadow var(--ro-dur-base) var(--ro-ease-out), background-color var(--ro-dur-base) var(--ro-ease-out), color var(--ro-dur-base) var(--ro-ease-out);
}

:where(.ro-calc, .ro-calc-portal) .day-button:hover,
:where(.ro-calc, .ro-calc-portal) .slot-button:hover {
  border-color: var(--ro-border-hover);
  background: var(--ro-surface);
  box-shadow: var(--ro-shadow-card-hover);
}

:where(.ro-calc, .ro-calc-portal) .day-button.is-selected,
:where(.ro-calc, .ro-calc-portal) .slot-button.is-selected {
  border-color: var(--ro-primary-strong);
  background: var(--ro-primary-strong);
  color: var(--ro-surface);
  box-shadow: var(--ro-shadow-card);
}

:where(.ro-calc, .ro-calc-portal) .day-button small {
  color: var(--ro-muted-fg);
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
}

:where(.ro-calc, .ro-calc-portal) .day-button.is-selected small {
  color: var(--ro-surface);
}

:where(.ro-calc, .ro-calc-portal) .day-button.is-selected::after,
:where(.ro-calc, .ro-calc-portal) .slot-button.is-selected::after {
  color: var(--ro-surface);
  content: "✓";
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

:where(.ro-calc, .ro-calc-portal) .slot-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

:where(.ro-calc, .ro-calc-portal) .slot-heading strong {
  font-size: 0.82rem;
}

:where(.ro-calc, .ro-calc-portal) .slot-heading span {
  color: var(--ro-muted-fg);
  font-size: 0.74rem;
}

:where(.ro-calc, .ro-calc-portal) .slot-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:where(.ro-calc, .ro-calc-portal) .slot-button {
  min-height: 48px;
  font-size: 0.78rem;
  font-weight: 800;
}

:where(.ro-calc, .ro-calc-portal) .picker-note {
  display: flex;
  align-items: start;
  gap: 8px;
  margin: 16px 0 0;
  padding: 10px 12px;
  border: 1px solid rgb(var(--ro-rgb-secondary) / 0.3);
  border-radius: var(--ro-radius-control);
  background: rgb(var(--ro-rgb-secondary) / 0.1);
  color: var(--ro-foreground);
  font-size: 0.74rem;
}

:where(.ro-calc, .ro-calc-portal) .confirm-card {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: clamp(18px, 3vw, 36px);
}

:where(.ro-calc, .ro-calc-portal) .confirm-card[data-state="busy"] {
  border-color: rgb(var(--ro-rgb-accent) / 0.5);
}

:where(.ro-calc, .ro-calc-portal) .confirm-card[data-state="success"] {
  border-color: rgb(var(--ro-rgb-secondary) / 0.5);
}

:where(.ro-calc, .ro-calc-portal) .confirm-state-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 20px;
}

:where(.ro-calc, .ro-calc-portal) .state-button {
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  background: var(--ro-surface-2);
  color: var(--ro-foreground);
  font-size: 0.72rem;
  font-weight: 800;
  transition: border-color var(--ro-dur-base) var(--ro-ease-out), box-shadow var(--ro-dur-base) var(--ro-ease-out), background-color var(--ro-dur-base) var(--ro-ease-out), color var(--ro-dur-base) var(--ro-ease-out);
}

:where(.ro-calc, .ro-calc-portal) .state-button:hover {
  border-color: var(--ro-border-hover);
  background: var(--ro-surface);
  box-shadow: var(--ro-shadow-card-hover);
}

:where(.ro-calc, .ro-calc-portal) .state-button.is-active {
  border-color: var(--ro-primary-strong);
  background: rgb(var(--ro-rgb-primary) / 0.1);
  color: var(--ro-primary-strong);
}

:where(.ro-calc, .ro-calc-portal) .confirm-state-panel {
  display: grid;
  align-content: start;
  gap: 16px;
}

:where(.ro-calc, .ro-calc-portal) .confirm-state-panel h3 {
  margin-bottom: 0;
  font-size: 1.28rem;
}

:where(.ro-calc, .ro-calc-portal) .confirm-state-panel > p {
  margin-bottom: 0;
  color: var(--ro-muted-fg);
  font-size: 0.84rem;
}

:where(.ro-calc, .ro-calc-portal) .confirm-summary {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  background: var(--ro-surface-2);
}

:where(.ro-calc, .ro-calc-portal) .confirm-summary div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

:where(.ro-calc, .ro-calc-portal) .confirm-summary dt {
  color: var(--ro-muted-fg);
  font-size: 0.74rem;
}

:where(.ro-calc, .ro-calc-portal) .confirm-summary dd {
  margin: 0;
  color: var(--ro-foreground);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: right;
}

:where(.ro-calc, .ro-calc-portal) .price-lines {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.ro-calc, .ro-calc-portal) .price-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ro-muted-fg);
  font-size: 0.76rem;
}

:where(.ro-calc, .ro-calc-portal) .price-lines li:last-child {
  padding-top: 8px;
  border-top: 1px solid var(--ro-border);
  color: var(--ro-foreground);
  font-weight: 900;
}

:where(.ro-calc, .ro-calc-portal) .coupon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

:where(.ro-calc, .ro-calc-portal) .coupon-row input {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  background: var(--ro-surface);
  color: var(--ro-foreground);
  transition: border-color var(--ro-dur-base) var(--ro-ease-out), box-shadow var(--ro-dur-base) var(--ro-ease-out);
}

:where(.ro-calc, .ro-calc-portal) .coupon-row input:hover {
  border-color: var(--ro-border-hover);
  box-shadow: var(--ro-shadow-card-hover);
}

:where(.ro-calc, .ro-calc-portal) .tama-loader {
  display: inline-block;
  width: 46px;
  height: 46px;
  border: 4px solid rgb(var(--ro-rgb-accent) / 0.28);
  border-top-color: var(--ro-accent-strong);
  border-radius: var(--ro-radius-control);
  animation: ro-calc-tama-spin var(--ro-dur-hero) var(--ro-ease-in-out) infinite;
}

:where(.ro-calc, .ro-calc-portal) .busy-state {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 330px;
  gap: 14px;
  text-align: center;
}

:where(.ro-calc, .ro-calc-portal) .busy-state p {
  max-width: 270px;
  margin-bottom: 0;
  color: var(--ro-muted-fg);
  font-size: 0.82rem;
}

:where(.ro-calc, .ro-calc-portal) .success-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--ro-radius-card);
  background: rgb(var(--ro-rgb-secondary) / 0.18);
  color: var(--ro-foreground);
  font-size: 2rem;
  font-weight: 900;
}

:where(.ro-calc, .ro-calc-portal) .success-state {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 330px;
  gap: 14px;
  text-align: center;
}

:where(.ro-calc, .ro-calc-portal) .success-state p {
  max-width: 300px;
  margin-bottom: 0;
  color: var(--ro-muted-fg);
  font-size: 0.82rem;
}

:where(.ro-calc, .ro-calc-portal) .success-state .price-lines {
  width: min(280px, 100%);
}

:where(.ro-calc, .ro-calc-portal) .is-level-entering {
  animation: ro-calc-level-enter var(--ro-dur-base) var(--ro-ease-out) both;
}

:where(.ro-calc, .ro-calc-portal) .is-pulsing {
  animation: ro-calc-cart-pulse var(--ro-dur-slow) var(--ro-ease-spring) both;
}

:where(.ro-calc, .ro-calc-portal) .is-state-fading .confirm-state-panel:not([hidden]) {
  animation: ro-calc-state-fade var(--ro-dur-base) var(--ro-ease-out) both;
}

@keyframes ro-calc-level-enter {
  from {
    opacity: 0.55;
    transform: translateY(var(--ro-move-sm));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ro-calc-cart-pulse {
  0% {
    box-shadow: var(--ro-shadow-card);
    transform: scale(1);
  }
  45% {
    box-shadow: var(--ro-shadow-btn-hover);
    transform: scale(1.012);
  }
  100% {
    box-shadow: var(--ro-shadow-card);
    transform: scale(1);
  }
}

@keyframes ro-calc-state-fade {
  from {
    opacity: 0.2;
    transform: translateY(var(--ro-move-sm));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ro-calc-tama-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (max-width: 980px) {
  :where(.ro-calc, .ro-calc-portal) .journey-layout,
  :where(.ro-calc, .ro-calc-portal) .booking-layout {
    grid-template-columns: 1fr;
  }

  :where(.ro-calc, .ro-calc-portal) .cart-panel {
    position: static;
  }
}

/* Gutter ownership (v3.69.0). The mount root used to add 14px of its own on top
   of Elementor's container padding, the shell's, and the card's - four nested
   layers, measured at 48px per side, a quarter of a 383px viewport. Below the
   mobile boundary the card is the sole gutter owner, so this contributes 0.
   768 deliberately, matching the L1/L2 surface-ownership line (#189); this is a
   rule of its own rather than a widening of the 680px block below, which tunes
   unrelated things (slot grid, day buttons, level rail) at a breakpoint chosen
   for them. */
@media (max-width: 768px) {
  :where(.ro-calc, .ro-calc-portal) {
    padding: 0;
  }
}

@media (max-width: 680px) {
  :where(.ro-calc, .ro-calc-portal) .subcategory-grid,
  :where(.ro-calc, .ro-calc-portal) .addon-grid {
    grid-template-columns: 1fr;
  }

  :where(.ro-calc, .ro-calc-portal) .subcategory-column--manicure {
    grid-column: auto;
  }

  :where(.ro-calc, .ro-calc-portal) .subcategory-column--manicure::before {
    display: none;
  }

  :where(.ro-calc, .ro-calc-portal) .subcategory-column--pedicure {
    grid-column: auto;
  }

  :where(.ro-calc, .ro-calc-portal) .result-card {
    grid-template-columns: 1fr;
  }

  :where(.ro-calc, .ro-calc-portal) .result-card .primary-button {
    width: 100%;
  }

  :where(.ro-calc, .ro-calc-portal) .level-rail li {
    display: block;
    text-align: center;
  }

  :where(.ro-calc, .ro-calc-portal) .level-dot {
    margin: 0 auto 5px;
  }

  :where(.ro-calc, .ro-calc-portal) .level-rail li span:last-child {
    display: block;
    font-size: 0.62rem;
  }

  :where(.ro-calc, .ro-calc-portal) .day-grid {
    gap: 4px;
  }

  :where(.ro-calc, .ro-calc-portal) .day-button {
    min-height: 58px;
  }

  :where(.ro-calc, .ro-calc-portal) .slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Scoped keyframes and class for Phase B L5 edit border glow */
:where(.ro-calc) .ro-edit-glow {
  animation: roEditGlowAnim 1.0s ease-in-out;
  border-radius: 14px;
}

@keyframes roEditGlowAnim {
  0% {
    box-shadow: 0 0 0 2px rgba(241, 107, 137, 0.4);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(247, 168, 83, 0.7);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(241, 107, 137, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ro-calc) .ro-edit-glow {
    animation: none;
    box-shadow: 0 0 0 3px rgba(247, 168, 83, 0.8);
  }
}

/* Phase C: skeleton shimmer for slot-list loading state */
@keyframes ro-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Phase C: calendar popover — right-anchored.
   Never overflows the viewport; no horizontal body scroll. */
:where(.ro-calc) .ro-calendar-popover {
  max-width: calc(100vw - 32px);
}

/* F_3.31.0 item 4: time-slot grid scroll cap. Slot button min-height 44 + grid
   gap 6 = ~50px row pitch; 228px shows ~4 rows and clips the next mid-height so
   the overflow is visually obvious. overflow-y:auto → short days show no track.
   The AM/PM dividers scroll with the content (sticky dividers out of scope). */
:where(.ro-calc, .ro-calc-portal) .slot-scroll {
  max-height: 228px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--ro-border) transparent;
}
:where(.ro-calc, .ro-calc-portal) .slot-scroll::-webkit-scrollbar {
  width: 8px;
}
:where(.ro-calc, .ro-calc-portal) .slot-scroll::-webkit-scrollbar-thumb {
  background: var(--ro-border);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
:where(.ro-calc, .ro-calc-portal) .slot-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================================================================
   AUTH SURFACE (v3.65.0) — atoms for auth-modal.tsx / auth-dialog.tsx.
   Class-based rather than the inline CSSProperties blob these replaced, so the
   booking gate and the panel's /account/ card can share a visual language
   without sharing a component.

   Specificity note (the v3.64.0 lesson, do not remove): Hello Elementor ships
   `[type=button]:hover, …, button:focus { color:#fff; background-color:#c36 }`
   at (0,2,0). A bare `.ro-auth-btn` is (0,1,0) and LOSES to it on hover/focus,
   which would repaint every auth button magenta mid-interaction. Each atom
   therefore re-asserts its own colour at (0,2,0) on those states — per-atom
   state protection, not a generic :hover counterpart.
   ============================================================================ */

.ro-auth-card {
  background: rgb(var(--ro-rgb-surface));
  border-radius: var(--ro-radius-card);
  box-shadow: var(--ro-shadow-card-hover);
  font-family: var(--ro-font-sans);
  color: rgb(var(--ro-rgb-foreground));
}

.ro-auth-title {
  font-family: var(--ro-font-serif);
  font-weight: 900;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  padding-right: 40px;
  outline: none;
}
.ro-auth-sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgb(var(--ro-rgb-muted-fg));
}

/* Social launchers stay anchors so Nextend's delegated document listener can
   claim them. The two-class selectors (0,2,0) re-assert every visible state
   against Elementor's hostile generic link/button hover and focus rules. */
.ro-social {
  margin-top: 20px;
}
.ro-social__separator {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(var(--ro-rgb-muted-fg));
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.ro-social__separator::before,
.ro-social__separator::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgb(var(--ro-rgb-border));
}
.ro-social__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.ro-social .ro-social__button,
.ro-social .ro-social__button:hover,
.ro-social .ro-social__button:focus,
.ro-social .ro-social__button:active {
  display: flex;
  min-height: 44px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgb(var(--ro-rgb-border));
  border-radius: var(--ro-radius-control);
  padding: 0 12px;
  color: rgb(var(--ro-rgb-foreground));
  background: rgb(var(--ro-rgb-surface));
  text-decoration: none;
  outline: none;
  transition: border-color var(--ro-dur-base) var(--ro-ease-out), background-color var(--ro-dur-base) var(--ro-ease-out), color var(--ro-dur-base) var(--ro-ease-out), box-shadow var(--ro-dur-base) var(--ro-ease-out), transform var(--ro-dur-fast) var(--ro-ease-out);
}
.ro-social .ro-social__button:hover { border-color: rgb(var(--ro-rgb-border-hover)); }
.ro-social .ro-social__button:active { transform: scale(.97); }
.ro-social .ro-social__button:focus-visible {
  outline: 3px solid rgb(var(--ro-rgb-ring) / .6);
  outline-offset: 2px;
}
.ro-social .ro-social__button--google,
.ro-social .ro-social__button--google:hover,
.ro-social .ro-social__button--google:focus,
.ro-social .ro-social__button--google:active {
  border-color: transparent;
  color: #1F1F1F;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px #747775;
}
.ro-social__label { font: 500 14px/20px var(--ro-font-sans); }
.ro-social__label--google { font-family: "Google Sans", var(--ro-font-sans); font-weight: 500; }

html #nsl-redirect-overlay {
  color: rgb(var(--ro-rgb-sidebar-fg));
  background-color: rgb(var(--ro-rgb-sidebar) / .78);
}
html #nsl-redirect-overlay-container {
  border-radius: var(--ro-radius-card);
  box-shadow: var(--ro-shadow-card-hover);
}
html #nsl-redirect-overlay-title {
  color: rgb(var(--ro-rgb-foreground));
  font-family: var(--ro-font-serif);
  font-weight: 700;
}
html #nsl-redirect-overlay-text {
  color: rgb(var(--ro-rgb-muted-fg));
  font-family: var(--ro-font-sans);
}
html #nsl-redirect-overlay-spinner {
  border: 3px solid rgb(var(--ro-rgb-border));
  border-top: 3px solid rgb(var(--ro-rgb-primary-strong));
  box-shadow: none;
  border-radius: 50%;
}

.ro-auth-form { display: flex; flex-direction: column; gap: 12px; }
.ro-auth-row { display: flex; gap: 10px; }
.ro-auth-row > * { flex: 1; min-width: 0; }

.ro-auth-field {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--ro-font-sans);
  color: rgb(var(--ro-rgb-foreground));
  background: rgb(var(--ro-rgb-surface));
  border: 1px solid rgb(var(--ro-rgb-border));
  border-radius: var(--ro-radius-control);
  box-sizing: border-box;
  transition: border-color var(--ro-dur-base) var(--ro-ease-out),
              box-shadow var(--ro-dur-base) var(--ro-ease-out);
}
.ro-auth-field::placeholder { color: rgb(var(--ro-rgb-muted-fg) / 0.7); }
.ro-auth-field:hover { border-color: rgb(var(--ro-rgb-border-hover)); }
.ro-auth-field:focus {
  outline: none;
  border-color: rgb(var(--ro-rgb-primary-strong));
  box-shadow: 0 0 0 3px rgb(var(--ro-rgb-ring) / 0.25);
}
.ro-auth-field--code {
  text-align: center;
  letter-spacing: 0.3em;
  font-size: 19px;
  font-weight: 700;
}

/* Phase 5 phone/OTP atoms. Markup stays local to this bundle; the shared
   formatter, paste normaliser and submit guard live in auth-flow.js. */
.ro-auth-phone {
  position: relative;
}
.ro-auth-phone__affix {
  position: absolute;
  inset: 0 auto 0 12px;
  display: flex;
  align-items: center;
  color: rgb(var(--ro-rgb-muted-fg));
  font-size: 14px;
  pointer-events: none;
}
.ro-auth-phone .ro-auth-field {
  padding-left: 42px;
}
.ro-auth-phone--international .ro-auth-field {
  padding-left: 14px;
}
.ro-auth-otp {
  text-align: center;
  letter-spacing: 0.3em;
  font-size: 19px;
  font-weight: 700;
}

.ro-auth-btn,
.ro-auth-btn:hover,
.ro-auth-btn:focus {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--ro-radius-control);
  font-family: var(--ro-font-sans);
  font-weight: 800;
  font-size: 14px;
  color: rgb(var(--ro-rgb-surface));
  background-image: linear-gradient(135deg, rgb(var(--ro-rgb-primary)), rgb(var(--ro-rgb-primary-strong)));
  background-color: rgb(var(--ro-rgb-primary-strong));
}
.ro-auth-btn {
  cursor: pointer;
  box-shadow: var(--ro-shadow-btn);
  transition: box-shadow var(--ro-dur-base) var(--ro-ease-out),
              filter var(--ro-dur-base) var(--ro-ease-out),
              transform var(--ro-dur-fast) var(--ro-ease-out);
}
.ro-auth-btn:hover { box-shadow: var(--ro-shadow-btn-hover); filter: brightness(1.05); }
.ro-auth-btn:focus-visible { outline: 3px solid rgb(var(--ro-rgb-ring) / .6); outline-offset: 2px; }
.ro-auth-btn:active { transform: scale(0.975); }
.ro-auth-btn[disabled] { opacity: 0.55; cursor: not-allowed; box-shadow: none; filter: none; }

.ro-auth-link,
.ro-auth-link:hover,
.ro-auth-link:focus {
  background: none;
  background-color: transparent;
  color: rgb(var(--ro-rgb-primary-strong));
}
.ro-auth-link {
  border: none;
  min-width: 24px;
  min-height: 24px;
  padding: 2px 4px;
  border-radius: var(--ro-radius-control);
  font-family: var(--ro-font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--ro-dur-base) var(--ro-ease-out), background-color var(--ro-dur-base) var(--ro-ease-out), box-shadow var(--ro-dur-base) var(--ro-ease-out);
}
.ro-auth-link:hover { text-decoration: underline; }
.ro-auth-link:focus-visible { outline: 3px solid rgb(var(--ro-rgb-ring) / .6); outline-offset: 2px; }
.ro-auth-link--mute,
.ro-auth-link--mute:hover,
.ro-auth-link--mute:focus { color: rgb(var(--ro-rgb-muted-fg)); font-weight: 600; }
.ro-auth-link[disabled],
.ro-auth-link[disabled]:hover { color: rgb(var(--ro-rgb-muted-fg) / 0.6); cursor: default; text-decoration: none; }

.ro-auth-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: rgb(var(--ro-rgb-muted-fg));
}
.ro-auth-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.45;
  color: rgb(var(--ro-rgb-muted-fg));
  cursor: pointer;
}
.ro-auth-check input { width: 24px; height: 24px; min-width: 24px; min-height: 24px; margin-top: 2px; flex: none; accent-color: rgb(var(--ro-rgb-primary-strong)); }
.ro-auth-check input:hover { filter: brightness(.95); }
.ro-auth-check input:focus-visible { outline: 3px solid rgb(var(--ro-rgb-ring) / .6); outline-offset: 2px; }
.ro-auth-check--inline { font-size: 13px; align-items: center; }
.ro-auth-check--inline input { margin-top: 0; }

/* Errors read as errors. The block this replaces used --ro-border as its
   background, i.e. it looked like a neutral hint. */
.ro-auth-error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #8c1d33;
  background: rgb(var(--ro-rgb-primary) / 0.13);
  border: 1px solid rgb(var(--ro-rgb-primary) / 0.35);
}
.ro-auth-error::before {
  content: "!";
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  background: #8c1d33;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.ro-auth-error-enter { animation: ro-auth-error-in var(--ro-dur-base) var(--ro-ease-out) both; }
@keyframes ro-auth-error-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .ro-auth-error-enter { animation: none; }
}
.ro-auth-note {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: rgb(var(--ro-rgb-foreground));
  background: rgb(var(--ro-rgb-secondary) / 0.14);
  border: 1px solid rgb(var(--ro-rgb-secondary) / 0.4);
}

.ro-auth-seg { display: flex; gap: 8px; }
.ro-auth-seg button,
.ro-auth-seg button:hover,
.ro-auth-seg button:focus {
  color: rgb(var(--ro-rgb-muted-fg));
  background-color: transparent;
}
.ro-auth-seg button {
  flex: 1;
  height: 38px;
  border: 1px solid rgb(var(--ro-rgb-border));
  border-radius: var(--ro-radius-control);
  font-family: var(--ro-font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--ro-dur-base) var(--ro-ease-out),
              background-color var(--ro-dur-base) var(--ro-ease-out),
              color var(--ro-dur-base) var(--ro-ease-out);
}
.ro-auth-seg button[aria-pressed="true"],
.ro-auth-seg button[aria-pressed="true"]:hover,
.ro-auth-seg button[aria-pressed="true"]:focus {
  border-color: rgb(var(--ro-rgb-primary-strong));
  background-color: rgb(var(--ro-rgb-primary) / 0.1);
  color: rgb(var(--ro-rgb-primary-strong));
}
.ro-auth-seg button:focus-visible { outline: 3px solid rgb(var(--ro-rgb-ring) / .6); outline-offset: 2px; }

.ro-auth-foot {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: rgb(var(--ro-rgb-muted-fg));
}

.ro-auth-close,
.ro-auth-close:hover,
.ro-auth-close:focus {
  color: rgb(var(--ro-rgb-muted-fg));
  background-color: rgb(var(--ro-rgb-surface-2));
}
.ro-auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--ro-radius-control);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--ro-dur-base) var(--ro-ease-out);
}
.ro-auth-close:hover { background-color: rgb(var(--ro-rgb-border)); }
.ro-auth-close:focus-visible { outline: 3px solid rgb(var(--ro-rgb-ring) / .6); outline-offset: 2px; }

/* Success takeover — owns the reload rather than hiding it. */
.ro-auth-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 10px 4px 4px;
}
.ro-auth-tick {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 26px;
  background: linear-gradient(135deg, rgb(var(--ro-rgb-secondary)), rgb(var(--ro-rgb-secondary-strong)));
  animation: ro-auth-pop var(--ro-dur-slow) var(--ro-ease-spring) both;
}
.ro-auth-success h3 { font-family: var(--ro-font-serif); font-size: 19px; font-weight: 900; margin: 0; }
.ro-auth-success p { font-size: 13.5px; color: rgb(var(--ro-rgb-muted-fg)); margin: 0; }
.ro-auth-bar {
  display: block;
  width: 150px;
  height: 4px;
  border-radius: 3px;
  background: rgb(var(--ro-rgb-border));
  overflow: hidden;
}
.ro-auth-bar > i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: rgb(var(--ro-rgb-primary-strong));
  animation: ro-auth-bar-slide 1.1s var(--ro-ease-in-out) infinite;
}
@keyframes ro-auth-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
@keyframes ro-auth-bar-slide { from { transform: translateX(-110%); } to { transform: translateX(280%); } }
@media (prefers-reduced-motion: reduce) {
  .ro-auth-tick { animation: none; }
  .ro-auth-bar > i { animation: none; width: 100%; opacity: 0.5; }
}

/* Dialog shell.
   Desktop: centred dialog. Mobile (<=640px): bottom sheet — reachable in the
   thumb zone, and scrollable under a soft keyboard. Measured on the live site
   before this change: at 390x420 the register card was 530px tall at top:-55px
   with overflow:visible on both the portal and the card, so its heading and its
   close button sat above the viewport with nothing to scroll. */
.ro-auth-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 16, 24, 0.55);
  animation: ro-auth-fade var(--ro-dur-base) var(--ro-ease-out) both;
}
.ro-auth-dialog {
  position: relative;
  width: 100%;
  max-width: 404px;
  max-height: calc(100% - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 30px 28px;
  animation: ro-auth-rise var(--ro-dur-slow) var(--ro-ease-spring) both;
}
.ro-auth-grab { display: none; }

/* The heading is focused programmatically on every mode change so the swap is
   announced; that is not a keyboard tab-stop, so it gets no focus ring. */
.ro-auth-title:focus { outline: none; }

@media (max-width: 640px) {
  .ro-auth-scrim { align-items: flex-end; padding: 0; }
  .ro-auth-dialog {
    max-width: none;
    border-radius: var(--ro-radius-card) var(--ro-radius-card) 0 0;
    padding: 22px 20px 28px;
    /* svh tracks the visual viewport as the soft keyboard opens; the vh line is
       the fallback for engines without it and is deliberately listed first. */
    max-height: calc(100vh - 24px);
    max-height: min(88svh, 100vh - 24px);
    animation: ro-auth-sheet-up var(--ro-dur-slow) var(--ro-ease-spring) both;
  }
  .ro-auth-grab {
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 3px;
    background: rgb(var(--ro-rgb-border));
  }
  .ro-auth-title { font-size: 20px; }
}

@keyframes ro-auth-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ro-auth-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes ro-auth-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ro-auth-scrim, .ro-auth-dialog { animation: none; }
}

/* Shared calculator bottom sheet. Portalled markup sits outside .ro-calc, so
   these primitives stay bare like the auth surface; its wrapper still carries
   ro-calc-portal for scoped calculator atoms inside the sheet. */
.ro-sheet {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 16, 24, 0.55);
  animation: ro-auth-fade var(--ro-dur-base) var(--ro-ease-out) both;
}
.ro-sheet__panel {
  width: 100%;
  max-width: 560px;
  border-radius: var(--ro-radius-card) var(--ro-radius-card) 0 0;
  background: rgb(var(--ro-rgb-surface));
  max-height: calc(100vh - 24px);
  max-height: min(90svh, 100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: ro-auth-sheet-up var(--ro-dur-slow) var(--ro-ease-spring) both;
}
.ro-sheet__grab {
  width: 42px;
  height: 4px;
  margin: 14px auto;
  border-radius: 3px;
  background: rgb(var(--ro-rgb-border));
}
.ro-sheet__grab--swipe,
.ro-sheet__head--swipe { touch-action: none; }
.ro-sheet__panel[data-ro-sheet-swipe="dragging"] {
  animation: none !important;
  transition: none !important;
  will-change: transform;
}
.ro-sheet__panel[data-ro-sheet-swipe="settling"] {
  animation: none !important;
  will-change: transform;
}
.ro-sheet__head { padding: 0 20px 16px; }
.ro-sheet__back,
.ro-sheet__back:hover,
.ro-sheet__back:focus {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: rgb(var(--ro-rgb-muted-fg));
  cursor: pointer;
}
.ro-sheet__back:hover,
.ro-sheet__back:focus-visible {
  color: rgb(var(--ro-rgb-foreground));
}
.ro-sheet__head h2 {
  margin: 0;
  color: rgb(var(--ro-rgb-foreground));
  font-family: var(--ro-font-serif);
  font-size: 20px;
  font-weight: 900;
  /* v3.111.0 (#1): the heading now carries a SERVICE NAME, which is catalogue data and
     can be long. Same 2-line clamp treatment as .ro-leg-title so a long name cannot grow
     the header and push the sheet body down. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.ro-sheet__head h2:focus { outline: none; }
.ro-sheet__head p {
  margin: 6px 0 0;
  color: rgb(var(--ro-rgb-muted-fg));
  font-size: 13.5px;
}
.ro-sheet__body { padding: 0 14px 20px; }
.ro-sheet__foot {
  position: sticky;
  bottom: 0;
  padding: 12px 20px max(16px, env(safe-area-inset-bottom));
  background: rgb(var(--ro-rgb-surface));
}
body.ro-sheet-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ro-sheet, .ro-sheet__panel { animation: none; }
}

/* Visually hidden but still announced — used for the dialog name during the
   success takeover, when the visible heading is gone. */
.ro-auth-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:where(.ro-calc, .ro-calc-portal) .ro-cart-item-list { gap: 0; }
:where(.ro-calc, .ro-calc-portal) .ro-cart-item-card {
  margin-bottom: 14px;
  transition: margin-bottom var(--ro-dur-slow) var(--ro-ease-out);
}
:where(.ro-calc, .ro-calc-portal) .ro-cart-item-card:last-child { margin-bottom: 0; }
:where(.ro-calc, .ro-calc-portal) .ro-cart-item-card:has(+ .ro-cart-item-exit.is-collapsing:last-child) { margin-bottom: 0; }
:where(.ro-calc, .ro-calc-portal) .ro-cart-item-exit,
:where(.ro-calc, .ro-calc-portal) .ro-leg-exit {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  opacity: 1;
  transition: grid-template-rows var(--ro-dur-slow) var(--ro-ease-out), opacity var(--ro-dur-slow) var(--ro-ease-out), margin-bottom var(--ro-dur-slow) var(--ro-ease-out);
}
:where(.ro-calc, .ro-calc-portal) .ro-cart-item-exit__inner,
:where(.ro-calc, .ro-calc-portal) .ro-leg-exit__inner { min-height: 0; overflow: hidden; }
:where(.ro-calc, .ro-calc-portal) .ro-cart-item-exit__inner .ro-cart-item-card { margin-bottom: 0; }
:where(.ro-calc, .ro-calc-portal) .ro-cart-item-exit:not(:last-child) { margin-bottom: 14px; }
:where(.ro-calc, .ro-calc-portal) .ro-cart-item-exit.is-collapsing {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-bottom: 0;
}
:where(.ro-calc, .ro-calc-portal) .ro-leg-exit.is-collapsing {
  grid-template-rows: 0fr;
  opacity: 0;
}
@media (max-width: 768px) {
  :where(.ro-calc, .ro-calc-portal) .ro-mobile-slot-chips > .ro-leg-exit.is-collapsing:not(:last-child) { margin-bottom: -24px; }
  :where(.ro-calc, .ro-calc-portal) .ro-mobile-slot-chips > :not(.ro-leg-exit):has(+ .ro-leg-exit.is-collapsing:last-child) {
    margin-bottom: -24px;
    transition: margin-bottom var(--ro-dur-slow) var(--ro-ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(.ro-calc, .ro-calc-portal) .ro-cart-item-card,
  :where(.ro-calc, .ro-calc-portal) .ro-cart-item-exit,
  :where(.ro-calc, .ro-calc-portal) .ro-leg-exit,
  :where(.ro-calc, .ro-calc-portal) .ro-mobile-slot-chips > :not(.ro-leg-exit):has(+ .ro-leg-exit.is-collapsing:last-child) {
    transition: none !important;
  }
}

:where(.ro-calc, .ro-calc-portal) .ro-cart-undo-list {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: 8px;
  left: 50%;
  bottom: 16px;
  width: min(280px, calc(100vw - 32px));
  transform: translateX(-50%);
  margin: 0;
  pointer-events: none;
}
:where(.ro-calc, .ro-calc-portal) .ro-cart-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 12px;
  border: 1px solid rgb(var(--ro-rgb-secondary) / .35);
  border-radius: var(--ro-radius-control);
  background: rgb(var(--ro-rgb-secondary) / .08);
  color: var(--ro-foreground);
  font-size: 13px;
  line-height: 1.4;
  pointer-events: auto;
  animation: ro-cart-undo-in var(--ro-dur-base) var(--ro-ease-out) var(--ro-dur-fast) both;
}
:where(.ro-calc, .ro-calc-portal) .ro-cart-undo__button {
  flex: none;
  min-width: 64px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid rgb(var(--ro-rgb-secondary) / .5);
  border-radius: var(--ro-radius-control);
  background: rgb(var(--ro-rgb-surface));
  color: var(--ro-secondary-text);
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--ro-dur) var(--ro-ease), background-color var(--ro-dur) var(--ro-ease);
}
:where(.ro-calc, .ro-calc-portal) .ro-cart-undo__button:hover { transform: translateY(-1px); }
:where(.ro-calc, .ro-calc-portal) .ro-cart-undo__button:active { transform: scale(.98); }
:where(.ro-calc, .ro-calc-portal) .ro-cart-undo__button:focus-visible {
  outline: 3px solid rgb(var(--ro-rgb-secondary) / .65);
  outline-offset: 2px;
}
@keyframes ro-cart-undo-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
  :where(.ro-calc, .ro-calc-portal) .ro-cart-undo-list {
    top: auto !important;
    right: 16px !important;
    bottom: calc(var(--ro-calc-bar-h, 76px) + 12px) !important;
    left: auto !important;
    width: min(280px, calc(100vw - 32px)) !important;
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(.ro-calc, .ro-calc-portal) .ro-cart-undo { animation: none; }
  :where(.ro-calc, .ro-calc-portal) .ro-cart-undo__button { transition: none; }
  :where(.ro-calc, .ro-calc-portal) .ro-cart-undo__button:hover,
  :where(.ro-calc, .ro-calc-portal) .ro-cart-undo__button:active { transform: none; }
}

/* Trusted Concierge controls extend the existing Builder; they never mount for customers. */
.ro-concierge-builder {
  margin: 0 0 24px;
  padding: clamp(18px, 3vw, 28px);
  border: 1.5px solid rgb(var(--ro-rgb-border));
  border-radius: var(--ro-radius-card);
  background: rgb(var(--ro-rgb-surface));
  box-shadow: var(--ro-shadow-card);
}
.ro-concierge-builder__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.ro-concierge-builder__head h2,
.ro-concierge-builder__result h3,
.ro-concierge-builder__role h3 {
  margin: 0;
  color: rgb(var(--ro-rgb-foreground));
}
.ro-concierge-builder__head h2 {
  font-family: var(--ro-font-serif);
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.25;
}
.ro-concierge-builder__eyebrow,
.ro-concierge-builder__expiry {
  color: var(--ro-secondary-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ro-concierge-builder__expiry {
  flex: none;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgb(var(--ro-rgb-secondary) / .1);
  letter-spacing: 0;
  text-transform: none;
}
.ro-concierge-builder__intro,
.ro-concierge-builder__help,
.ro-concierge-builder__empty {
  color: rgb(var(--ro-rgb-muted-fg));
  font-size: 13px;
  line-height: 1.55;
}
.ro-concierge-builder__intro { margin: 8px 0 20px; }
.ro-concierge-builder__help { margin: 5px 0 10px; }
.ro-concierge-builder__empty { margin: 10px 0 0; }
.ro-concierge-builder__groups {
  margin: 0;
  padding: 0;
  border: 0;
}
.ro-concierge-builder__groups > legend {
  padding: 0;
  color: rgb(var(--ro-rgb-foreground));
  font-size: 15px;
  font-weight: 800;
}
.ro-concierge-builder__role { margin-top: 16px; }
.ro-concierge-builder__role h3 { font-size: 14px; }
.ro-concierge-builder__group-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.ro-concierge-builder__group {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgb(var(--ro-rgb-border));
  border-radius: var(--ro-radius-control);
  color: rgb(var(--ro-rgb-foreground));
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ro-concierge-builder__group input { width: 18px; height: 18px; flex: none; accent-color: var(--ro-secondary-text); }
.ro-concierge-builder__group small { display: block; color: rgb(var(--ro-rgb-muted-fg)); font-size: 11px; font-weight: 600; }
.ro-concierge-builder__group--selected { align-items: flex-start; justify-content: space-between; background: rgb(var(--ro-rgb-success) / .08); cursor: default; }
.ro-concierge-builder__group--selected small { max-width: 60%; text-align: right; }
.ro-concierge-builder__group--required { border-style: dashed; background: rgb(var(--ro-rgb-accent) / .08); cursor: default; }
.ro-concierge-builder__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.ro-concierge-builder__field { display: flex; flex-direction: column; gap: 6px; color: rgb(var(--ro-rgb-foreground)); font-size: 13px; font-weight: 700; }
.ro-concierge-builder__field > span small { color: rgb(var(--ro-rgb-muted-fg)); font-size: 11px; font-weight: 600; }
.ro-concierge-builder__field input,
.ro-concierge-builder__field select,
.ro-concierge-builder__field textarea {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid rgb(var(--ro-rgb-border));
  border-radius: var(--ro-radius-control);
  background: rgb(var(--ro-rgb-surface));
  color: rgb(var(--ro-rgb-foreground));
  font: inherit;
  font-weight: 500;
}
.ro-concierge-builder__field textarea { min-height: 148px; resize: vertical; line-height: 1.45; }
.ro-concierge-builder__field input:focus-visible,
.ro-concierge-builder__field select:focus-visible,
.ro-concierge-builder__field textarea:focus-visible,
.ro-concierge-builder__group:has(input:focus-visible) {
  outline: 3px solid rgb(var(--ro-rgb-secondary) / .45);
  outline-offset: 2px;
}
.ro-concierge-builder__window { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ro-concierge-builder__estimate {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--ro-radius-control);
  background: rgb(var(--ro-rgb-secondary) / .08);
  color: rgb(var(--ro-rgb-foreground));
  font-size: 13px;
  line-height: 1.45;
}
.ro-concierge-builder__estimate span { color: rgb(var(--ro-rgb-muted-fg)); }
.ro-concierge-builder__create,
.ro-concierge-builder__copy,
.ro-concierge-builder__create:hover,
.ro-concierge-builder__create:focus,
.ro-concierge-builder__copy:hover,
.ro-concierge-builder__copy:focus {
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--ro-radius-control);
  background: var(--ro-secondary-text);
  color: #fff;
  font-family: var(--ro-font-sans);
  font-weight: 800;
  cursor: pointer;
}
.ro-concierge-builder__copy,
.ro-concierge-builder__copy:hover,
.ro-concierge-builder__copy:focus {
  margin-top: 8px;
  border-color: rgb(var(--ro-rgb-border));
  background: rgb(var(--ro-rgb-surface));
  color: var(--ro-secondary-text);
}
.ro-concierge-builder__create:hover:not(:disabled) { filter: brightness(.94); }
.ro-concierge-builder__copy:hover { background: rgb(var(--ro-rgb-surface-2)); }
.ro-concierge-builder__create:active:not(:disabled),
.ro-concierge-builder__copy:active { transform: scale(.98); }
.ro-concierge-builder__create:disabled { opacity: .58; cursor: not-allowed; }
.ro-concierge-builder__alert {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 4px solid var(--ro-primary-text);
  background: rgb(var(--ro-rgb-primary) / .08);
  color: rgb(var(--ro-rgb-foreground));
  font-size: 13px;
}
.ro-concierge-builder__result {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgb(var(--ro-rgb-border));
}
.ro-concierge-builder__result h3 { margin-bottom: 12px; font-size: 17px; }
.ro-concierge-builder__result .ro-concierge-builder__field + .ro-concierge-builder__field { margin-top: 14px; }
.ro-concierge-builder__copy-status { min-height: 20px; margin: 8px 0 0; color: rgb(var(--ro-rgb-muted-fg)); font-size: 12px; }

@media (max-width: 768px) {
  .ro-concierge-builder { margin-inline: 14px; }
  .ro-concierge-builder__head { flex-direction: column; }
  .ro-concierge-builder__group-list,
  .ro-concierge-builder__fields { grid-template-columns: 1fr; }
}

.ro-concierge-client {
  margin: 0 0 24px;
  padding: clamp(18px, 3vw, 28px);
  border: 1.5px solid rgb(var(--ro-rgb-border));
  border-radius: var(--ro-radius-card);
  background: rgb(var(--ro-rgb-surface));
  box-shadow: var(--ro-shadow-card);
  animation: roConciergeClientEnter 180ms ease-out both;
}
.ro-concierge-client--intro { max-width: 920px; margin-inline: auto; }
.ro-concierge-client--status {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}
.ro-concierge-client .ro-interactive {
  transition: opacity 180ms ease, transform 180ms ease !important;
}
@keyframes roConciergeClientEnter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.ro-concierge-client__head { margin-bottom: 12px; }
.ro-concierge-client__eyebrow {
  color: var(--ro-secondary-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ro-concierge-client__head h2 {
  margin: 4px 0 0;
  color: rgb(var(--ro-rgb-foreground));
  font-family: var(--ro-font-serif);
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.25;
}
.ro-concierge-client__head h2:focus { outline: 3px solid rgb(var(--ro-rgb-secondary) / .55); outline-offset: 4px; }
.ro-concierge-client__copy,
.ro-concierge-client__schedule,
.ro-concierge-client__caveat,
.ro-concierge-client__notice,
.ro-concierge-client__blocking,
.ro-concierge-client__live {
  margin: 10px 0;
  color: rgb(var(--ro-rgb-muted-fg));
  font-size: 14px;
  line-height: 1.5;
}
.ro-concierge-client__live { color: rgb(var(--ro-rgb-foreground)); font-weight: 700; }
.ro-concierge-client__notice,
.ro-concierge-client__blocking {
  padding: 10px 12px;
  border-left: 4px solid var(--ro-primary-text);
  border-radius: 0 var(--ro-radius-control) var(--ro-radius-control) 0;
  background: rgb(var(--ro-rgb-primary) / .08);
  color: rgb(var(--ro-rgb-foreground));
}
.ro-concierge-client__blocking { border-left-color: var(--ro-accent-strong); }
.ro-concierge-client__caveat { font-size: 13px; }
.ro-concierge-client__legs {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}
.ro-concierge-client__legs li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgb(var(--ro-rgb-border));
  border-radius: var(--ro-radius-control);
  background: rgb(var(--ro-rgb-surface-2));
  color: rgb(var(--ro-rgb-foreground));
}
.ro-concierge-client__legs li strong { color: var(--ro-secondary-text); }
.ro-concierge-client__legs li small { color: rgb(var(--ro-rgb-muted-fg)); line-height: 1.45; }
.ro-concierge-client__schedule { padding-top: 10px; border-top: 1px solid rgb(var(--ro-rgb-border)); }
.ro-concierge-client__comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.ro-concierge-client__comparison > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgb(var(--ro-rgb-border));
  border-radius: var(--ro-radius-control);
  background: rgb(var(--ro-rgb-surface-2));
}
.ro-concierge-client__comparison h3 {
  margin: 0 0 8px;
  color: rgb(var(--ro-rgb-foreground));
  font-size: 15px;
}
.ro-concierge-client__comparison .ro-concierge-client__legs { margin-bottom: 0; }
.ro-concierge-client__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ro-concierge-client__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgb(var(--ro-rgb-border));
  border-radius: var(--ro-radius-control);
  background: rgb(var(--ro-rgb-surface));
}
.ro-concierge-client__status-row .ro-concierge-client__live { flex: 1; min-width: 0; margin: 0; }
.ro-concierge-client__status-row .ro-concierge-client__button { flex: none; }
.ro-concierge-client__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--ro-radius-control);
  background: var(--ro-secondary-text);
  color: #fff;
  font: inherit;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.ro-concierge-client__button:hover { opacity: .92; transform: translateY(-1px); }
.ro-concierge-client__button:active { transform: scale(.98); }
.ro-concierge-client__button:focus-visible {
  outline: 3px solid rgb(var(--ro-rgb-secondary) / .55);
  outline-offset: 2px;
}
.ro-concierge-client__button--quiet {
  border-color: rgb(var(--ro-rgb-border));
  background: rgb(var(--ro-rgb-surface));
  color: var(--ro-secondary-text);
}
@media (max-width: 768px) {
  .ro-concierge-client { margin-inline: 14px; }
  .ro-concierge-client--intro { margin-inline: 14px; }
  .ro-concierge-client__status-row { align-items: stretch; flex-direction: column; }
  .ro-concierge-client__status-row .ro-concierge-client__button { flex: 1 1 auto; width: 100%; }
  .ro-concierge-client__comparison { grid-template-columns: 1fr; }
  .ro-concierge-client__button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ro-concierge-client { animation: none; }
  .ro-concierge-client .ro-interactive { transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .ro-concierge-client__button:hover,
  .ro-concierge-client__button:active { transform: none; }
}