/* PAR THEME SWITCH , rebuilt 2026-08-23. Preview only.

   WHAT ALREADY WORKED and is untouched: the site reads prefers-color-scheme and
   live-follows the OS when the visitor flips it. That half was already right.

   WHAT DID NOT: the control was a 38px circle cycling auto -> light -> dark,
   labelled "Theme: auto, light, or dark". Three states are invisible on a
   single button, and the label named the mechanism instead of the action.

   Tariq's framing is the fix and it is better than mine: it is a LIGHT SWITCH.
   Dark room, the button turns the light on. Lit room, it turns it off. A bulb
   says that with no words at all, which is what makes it survive on a phone
   where there is no room for a label. */

.themebtn{width:auto;min-width:38px;height:38px;border-radius:999px;
  padding:0 12px;gap:8px;white-space:nowrap}
.themebtn .ic{display:none}          /* the old three-icon set stays retired */
.themebtn .bulb{width:19px;height:19px;flex:none;display:block}
/* the rays only exist when the light is on */
.themebtn .rays{opacity:0;transform:scale(.6);transform-origin:center;
  transition:opacity var(--t-ui,250ms) var(--ease-arrive,ease),
             transform var(--t-ui,250ms) var(--ease-arrive,ease)}
html[data-resolved=light] .themebtn .rays{opacity:1;transform:none}
/* filament fills in when lit */
.themebtn .glass{fill:none;transition:fill var(--t-ui,250ms) var(--ease-arrive,ease)}
html[data-resolved=light] .themebtn .glass{fill:currentColor;fill-opacity:.18}

.themebtn .lbl{font:500 13px/1 Inter,sans-serif;letter-spacing:.01em;
  color:inherit;display:none}
/* The label appears where the header has the room. Measured before choosing
   1280: the desktop nav starts at 1024 and the bar was already tight there,
   and a previous header change overflowed the viewport at 900px. The icon
   carries the meaning on its own below this. */
@media(min-width:1280px){ .themebtn .lbl{display:inline} }
@media(max-width:1279px){ .themebtn{padding:0;width:38px} }

/* The MOBILE control lives inside the open menu, where there is a whole panel
   of room and no header to overflow. Hiding its label there was me applying a
   width rule to a place that has no width problem. It also sat at 38px, under
   the 44px touch floor set for every other control on this site. */
/* SCOPED to the menu. Written as a bare #themeBtnM it also hit the booking
   page, where there is no menu and this button sits in the HEADER: a 126px
   labelled pill dropped into a 390px bar, pushing the whole row 605px wide and
   off the edge behind overflow-x:hidden. The label belongs to the panel, not
   to the id. */
.mmenu #themeBtnM{width:auto;min-height:44px;padding:0 16px;gap:10px}
.mmenu #themeBtnM .lbl{display:inline;font-size:14px}

/* ---- REACHABILITY ------------------------------------------------------ */
/* Tariq: "on booking funnel the light doesnt show up to choose it." Confirmed.
   The booking page has no burger and no mobile menu, on purpose, to keep the
   funnel focused. But the MOBILE theme button was built to live inside that
   menu, so on booking it exists in the DOM with nowhere to appear, while the
   header button is hidden below 1024 by the shared header rule. Net result:
   on a phone, the booking page offers no way to switch at all.

   The rule is not "booking is special", which would be a page-private override
   and exactly the shadowing our own gate blocks. The rule is: the theme control
   must be reachable on every page at every width. Where a page has no mobile
   menu to hold it, the header keeps its own. */
body:not(:has(#mmenu)) #themeBtn{display:inline-flex!important}
/* ...and retire the MENU variant on that page. With no menu to live in it was
   sitting in the booking header as a second identical switch, which is where
   the extra 56px of overflow came from. One control per page. */
body:not(:has(#mmenu)) #themeBtnM{display:none!important}

/* The step row becomes the switch's home on booking below 1024. Right-aligned
   into space the step label was never using. */
/* The step label carries margin-bottom:22px of its own. Left on, the flex row
   centred the switch against a box 22px taller than the text, which is why the
   switch sat 11px low. The ROW owns that spacing now, not the label.
   And the row must not grow: a 44px touch target in an 18px row pushed the
   whole booking flow down 26px, on the money path. Negative block margins keep
   the touch target full size while the row stays the height of its text. */
.steprow{display:flex;align-items:center;gap:var(--sp-16,16px);
  margin-bottom:22px;min-height:18px}
.steprow .stepn{flex:1 1 auto;min-width:0;margin-bottom:0}
.theme-instep{margin-left:auto;display:inline-flex;flex:none;
  margin-top:-13px;margin-bottom:-13px}

/* Touch floor. Measured 34x34 at 768 and 38x38 elsewhere, both under the 44px
   this site holds every other control to. */
@media(max-width:1023px){
  .themebtn{min-width:44px;min-height:44px}
}