/*
 * Loop Forms — Lux (g2lux-exp) modal skin
 *
 * Loaded ONLY when the active surface is g2lux-exp (see inc/surfaces.php).
 * Every selector is scoped to #loop-forms-modal.lf-surface-g2lux-exp so
 * G2 / G2X sites — which share this plugin — never see any of it.
 *
 * Division of labour (Kane's rule):
 *   - Plugin base CSS (loop-forms.css) owns the slide-out drawer
 *     geometry (fixed right panel + translateX animation).
 *   - THIS file owns the Lux internals: static hero (image + agent
 *     title + intro), scrollable form middle, static "Prefer to talk
 *     now" footer, and the structural form styling — so the theme
 *     doesn't have to provide form structure.
 *   - The theme owns brand colour (accent paints via .accent-text /
 *     the .button--primary submit). The cream/ink defaults below are
 *     the surface's editorial baseline, same convention as the
 *     loop-property Lux stylesheet.
 *
 * Layout model:
 *   .lf-container   flex column, no padding (hero image runs edge to
 *                   edge), cream panel
 *   .lf-header      collapsed to a floating close button over the image
 *   .lf-body        flex:1 + overflow hidden — scrolling happens INSIDE
 *   .lfx            flex column filling the body
 *   .lfx-hero       static
 *   .lfx-scroll     flex:1, overflow-y auto  ← the only scroll area
 *   .lfx-talk       static footer
 */

/* === Shell internals ================================================ */

#loop-forms-modal.lf-surface-g2lux-exp .lf-container {
    background: #f4f1ea;
    color: #1a1a1a;
    padding: 0;
}

/* Header collapses to a floating close control. The visual title now
   lives inside the hero copy block; .lf-title stays in the DOM for
   aria-labelledby but is clipped out visually. */
#loop-forms-modal.lf-surface-g2lux-exp .lf-header {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 6;
    padding: 0;
    margin: 0;
    border: 0;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-close {
    position: static;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.55);
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-close svg {
    stroke: #ffffff;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-close:hover {
    background: rgba(20, 20, 20, 0.8);
}

/* Body stops scrolling itself — the inner .lfx-scroll takes over so
   the hero + talk footer can stay static. */
#loop-forms-modal.lf-surface-g2lux-exp .lf-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-content {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* === Lux composition =============================================== */

#loop-forms-modal.lf-surface-g2lux-exp .lfx {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* --- Hero ------------------------------------------------------------ */
/* Image banner appears on the valuation / contact modals only (the PHP
   renders .lfx-hero__media there); viewing/callback/info have no image
   and the header collapses to just .lfx-hero__copy. */

#loop-forms-modal.lf-surface-g2lux-exp .lfx-hero__media {
    position: relative;
    width: 100%;
    /* Short editorial banner — tall enough to read as imagery, short
       enough that the form owns the panel. Shrinks on small screens. */
    height: clamp(150px, 24vh, 260px);
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
}

/* Scrim — dark gradient over the lower half so the white role tag stays
   legible on ANY photograph. Clear top half, deepening to the bottom
   edge (same convention as the Lux single-property hero scrim). */
#loop-forms-modal.lf-surface-g2lux-exp .lfx-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0.45) 78%,
        rgba(0, 0, 0, 0.7) 100%
    );
    pointer-events: none;
}

/* Role tag pinned to the image's bottom-left, above the scrim. */
#loop-forms-modal.lf-surface-g2lux-exp .lfx-hero__tag {
    position: absolute;
    left: 24px;
    bottom: 16px;
    z-index: 1;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-hero__copy {
    padding: 24px 24px 20px;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-hero__title {
    margin: 0 0 8px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-hero__intro {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.8;
}

/* --- Scroll area ----------------------------------------------------- */

#loop-forms-modal.lf-surface-g2lux-exp .lfx-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    /* Thin, quiet scrollbar — the base file hides .lf-body's bar; here
       a subtle one aids orientation in a long form. */
    scrollbar-width: thin;
}

/* The config intro (.lf-intro) is re-voiced in the hero block above —
   hide the inner copy so it doesn't read twice. */
#loop-forms-modal.lf-surface-g2lux-exp .lfx-scroll .lf-intro {
    display: none;
}

/* --- Steps (01 / 02 / 03) ------------------------------------------- */

#loop-forms-modal.lf-surface-g2lux-exp .lfx-steps {
    list-style: none;
    margin: 0 0 28px;
    padding: 0 0 24px;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Number carries .accent-text — the theme paints the brand accent;
   the muted-ink default keeps it legible before that lands. Sized to
   sit on the step title's baseline. */
#loop-forms-modal.lf-surface-g2lux-exp .lfx-step__num {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1.5;
    opacity: 0.75;
}

/* Title >= body — the bold lead line must not read smaller than the
   sentence under it (the v1 sizing had them inverted, which is what
   made the block feel "off"). */
#loop-forms-modal.lf-surface-g2lux-exp .lfx-step__title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 3px;
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-step__text {
    display: block;
    font-size: 15px;
    line-height: 1.55;
    opacity: 0.8;
}

/* === Form structure ==================================================
   The SAME shared templates render on every surface — these rules give
   them the Lux editorial treatment: small tracked-caps labels above
   white hairline-bordered fields, boxed checkbox rows, a full-width
   submit. No template forks. */

#loop-forms-modal.lf-surface-g2lux-exp .loop-forms .fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
}

/* Everything spans both columns by default; first/last name pair up
   side-by-side (reference layout). :has() is fine for 2026 browsers. */
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms .fields > * {
    grid-column: 1 / -1;
    margin: 0;
}

#loop-forms-modal.lf-surface-g2lux-exp .loop-forms .fields > label:has(#firstName),
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms .fields > label:has(#lastName) {
    grid-column: auto;
}

/* Label text = small tracked caps above the field. display:block (not
   flex-column) so the label's inline bits — text + the "*" required
   marker + any inline error — stay ON ONE LINE, with the field dropping
   below via its own margin-top. A flex-column made every inline child its
   own row, which pushed the required asterisk UNDERNEATH the label (Kane's
   flag) instead of beside it. */
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.65);
}

/* Required markers are red (Kane) — covers field labels, checkbox rows and
   the fieldset legend (.required lives in all three). */
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms .required {
    color: #b3261e;
}

#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label em {
    text-transform: none;
    letter-spacing: normal;
    font-style: normal;
    color: #b3261e;
}

/* Fields: white boxes, hairline borders, generous touch height.
   display:block + margin-top drops the field onto its own line below the
   inline label row (replacing the old flex-column gap). */
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label input:not([type="checkbox"]),
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label textarea,
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label select {
    width: 100%;
    display: block;
    /* Tight gap between the label row and its field. */
    margin-top: 5px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: normal;
    text-transform: none;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.15);
    border-radius: 0;
    box-sizing: border-box;
}

#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label input:focus,
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label textarea:focus,
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label select:focus {
    outline: none;
    border-color: rgba(26, 26, 26, 0.55);
}

#loop-forms-modal.lf-surface-g2lux-exp .loop-forms ::placeholder {
    color: rgba(26, 26, 26, 0.4);
}

/* Fieldset (service options) — quiet container, legend as a label-row. */
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

#loop-forms-modal.lf-surface-g2lux-exp .loop-forms legend {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.65);
    margin-bottom: 12px;
    padding: 0;
}

/* Checkbox rows — boxed white rows per the reference, whole row
   tappable. Applies to service options AND consent/terms rows. */
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label.checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.15);
    font-size: 14px;
    letter-spacing: normal;
    text-transform: none;
    color: #1a1a1a;
    cursor: pointer;
    margin-bottom: 10px;
}

#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label.checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #1a1a1a;
}

#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label.checkbox .checkbox-text {
    flex: 1 1 auto;
    line-height: 1.45;
}

/* Consent row reads slightly quieter than the service choices. */
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label.checkbox.terms,
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label.checkbox.consent-checkbox {
    background: transparent;
    border: 0;
    padding: 4px 0;
    /* Quieter, smaller legal text; box aligned to the top of the (often
       multi-line) copy rather than centred — reads cleaner (Kane). */
    align-items: flex-start;
    font-size: 12px;
    color: rgba(26, 26, 26, 0.75);
}

/* Nudge the box down a hair so its top lines up with the text cap-height. */
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label.checkbox.terms input[type="checkbox"],
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms label.checkbox.consent-checkbox input[type="checkbox"] {
    margin-top: 2px;
}

#loop-forms-modal.lf-surface-g2lux-exp .loop-forms .divider {
    border: 0;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
    margin: 8px 0;
}

#loop-forms-modal.lf-surface-g2lux-exp .loop-forms .section-title {
    margin: 4px 0 8px;
    font-size: 16px;
    font-weight: 600;
}

/* === Lux viewing form (templates/g2lux-exp/…-request-viewing.php) =====
   The richer viewing enquiry: property card, two-column name row, boxed
   time-slot grid and a callout. Only this template emits the markup
   below, so these rules never affect other modals. */

/* Property card — photo + label + address + specs/price. Sits as a full
   -width row at the top of the .fields grid. */
#loop-forms-modal.lf-surface-g2lux-exp .lfx-prop {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.12);
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-prop__media {
    flex: 0 0 auto;
    width: 88px;
    height: 66px;
    background-size: cover;
    background-position: center;
    background-color: #ece7dd;
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-prop__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-prop__label {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.5);
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-prop__title {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    color: #1a1a1a;
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-prop__specs {
    margin: 0;
    font-size: 13px;
    color: rgba(26, 26, 26, 0.6);
}

/* Two-column name row (First / Last). Wraps two labels; the labels
   themselves keep the shared tracked-caps + input styling. */
#loop-forms-modal.lf-surface-g2lux-exp .lfx-namerow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
}

/* Date helper line under the preferred-date input — resets the label's
   tracked-caps styling to quiet sentence case. */
#loop-forms-modal.lf-surface-g2lux-exp .lfx-date__hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(26, 26, 26, 0.55);
}

/* Time-slot grid — four selectable boxes (2×2). The native checkbox is
   hidden; the whole box is the control. */
#loop-forms-modal.lf-surface-g2lux-exp .lfx-slots__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* .loop-forms prefix so these beat the generic ".loop-forms label"
   rule (which is a class+element and would otherwise out-rank a bare
   .lfx-slot and force tracked-caps label styling onto the box). */
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms .lfx-slot {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.15);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1a1a1a;
}

#loop-forms-modal.lf-surface-g2lux-exp .loop-forms .lfx-slot input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-slot__name {
    font-size: 12px;
    font-weight: 600;
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-slot__time {
    font-size: 11px;
    font-weight: 400;
    color: rgba(26, 26, 26, 0.55);
}

/* Selected + keyboard focus states — neutral dark by default; the theme
   can repaint via .lfx-slot:has(input:checked) with its accent. */
#loop-forms-modal.lf-surface-g2lux-exp .lfx-slot:has(input:checked) {
    border-color: #1a1a1a;
    box-shadow: inset 0 0 0 1px #1a1a1a;
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-slot:has(input:focus-visible) {
    outline: 2px solid rgba(26, 26, 26, 0.5);
    outline-offset: 2px;
}

/* Callout — "Please note …" with a quiet left rule. Neutral by default;
   the theme may accent the border to brand gold. */
#loop-forms-modal.lf-surface-g2lux-exp .lfx-note {
    margin: 0;
    padding: 14px 16px;
    background: rgba(26, 26, 26, 0.035);
    border-left: 3px solid rgba(26, 26, 26, 0.28);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(26, 26, 26, 0.8);
}

/* Submit — full-width block. Colour comes from the theme's
   .button--primary; structure (size, tracking, squared corners) is
   the surface's. */
#loop-forms-modal.lf-surface-g2lux-exp .loop-forms .submit-area {
    margin-top: 24px;
}

#loop-forms-modal.lf-surface-g2lux-exp .loop-forms .submit-area .button {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 0;
    min-width: 0;
}

/* --- "Prefer to talk now" footer (static) ---------------------------- */

#loop-forms-modal.lf-surface-g2lux-exp .lfx-talk {
    flex: 0 0 auto;
    padding: 18px 24px 22px;
    border-top: 1px solid rgba(26, 26, 26, 0.1);
    background: #f4f1ea;
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-talk__label {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.7);
}

/* Channel buttons — CSS grid, equal columns however many render:
   1 button = full width, 2 = halves, 3 = thirds. grid-auto-columns
   does the maths; no percentages anywhere (Kane's spec). */
#loop-forms-modal.lf-surface-g2lux-exp .lfx-talk__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-talk__btn {
    display: block;
    padding: 13px 8px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.2);
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#loop-forms-modal.lf-surface-g2lux-exp .lfx-talk__btn:hover,
#loop-forms-modal.lf-surface-g2lux-exp .lfx-talk__btn:focus-visible {
    background: #1a1a1a;
    color: #ffffff;
}

/* === Book-now (direct booking calendar) =============================
   Kane: no design exists for this one yet — this is the plugin's
   proposed Lux treatment of the two-screen booking flow, keeping the
   same editorial voice as the rest of the modal (white cells on the
   cream panel, hairline borders, tracked caps, squared corners, dark
   selected states). Adjust freely once a real design lands.

   The base loop-forms-book-now.css targets
   #loop-forms-modal .lf-container.book-now (1,3,0) — the rules below
   include .lf-container.book-now in the scope so they out-rank it,
   and this file also loads later. */

/* Keep the Lux shell on book-now: base file repaints the container
   white + restores a static flex header; pull both back to the Lux
   cream panel + floating close over the hero image. */
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now {
    background: #f4f1ea;
    color: #1a1a1a;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .lf-header {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 6;
    padding: 0;
    margin: 0;
    border: 0;
    display: block;
}

/* Base file forces background:none !important on the book-now close —
   counter it so the dark floating circle survives over photography. */
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .lf-close {
    background: rgba(20, 20, 20, 0.55) !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .lf-close:hover {
    background: rgba(20, 20, 20, 0.8) !important;
}

/* "Property: <address>" context line → quiet tracked-caps summary. */
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .context {
    margin: 0 0 16px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.65);
}

/* --- Week navigation ------------------------------------------------- */

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .week-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now #week-range-display {
    flex: 1 1 auto;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .nav-arrow,
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now #this-week-btn {
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.2);
    border-radius: 0;
    color: #1a1a1a;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .nav-arrow {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .nav-arrow svg {
    width: 18px;
    height: 18px;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now #this-week-btn {
    padding: 9px 14px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .nav-arrow:hover:not(:disabled),
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now #this-week-btn:hover:not(:disabled) {
    background: #1a1a1a;
    color: #ffffff;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .nav-arrow:disabled,
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now #this-week-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* --- Day cells -------------------------------------------------------- */

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

/* JS renders: "Mon<br><strong>14</strong>" — day name small caps,
   date number carries the weight. */
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .day-button {
    padding: 10px 2px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.6;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.15);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .day-button strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .day-button:hover:not(:disabled):not(.selected) {
    border-color: rgba(26, 26, 26, 0.55);
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .day-button.selected {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .day-button.unavailable,
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .day-button:disabled {
    background: transparent;
    border-color: rgba(26, 26, 26, 0.08);
    color: rgba(26, 26, 26, 0.3);
    cursor: default;
}

/* --- Time slots -------------------------------------------------------- */

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .available-times > p {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.65);
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .times-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 6px;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .time-slot {
    padding: 11px 6px;
    text-align: center;
    font-size: 13px;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.15);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .time-slot:hover:not(.selected) {
    border-color: rgba(26, 26, 26, 0.55);
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .time-slot.selected {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
}

/* --- Legend + notes ----------------------------------------------------
   Legend dots mirror the cell states above so the key can't lie:
   available = white cell w/ hairline, unavailable = faded, selected =
   solid ink. */
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .availability-legend {
    display: flex;
    gap: 18px;
    margin-top: 12px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.65);
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 0;
    display: inline-block;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .legend-dot.available {
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.3);
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .legend-dot.unavailable {
    background: rgba(26, 26, 26, 0.12);
    border: 1px solid transparent;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .legend-dot.selected {
    background: #1a1a1a;
    border: 1px solid #1a1a1a;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .note {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(26, 26, 26, 0.6);
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .divider {
    border: 0;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
    margin: 16px 0;
}

/* --- Screen 2 (your details) -------------------------------------------
   Book-now uses .form-grid/.form-field with hidden labels + JS
   placeholders — a different skeleton from the standard templates, so
   the white-box field treatment is re-applied to this shape. */
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .step-title {
    margin: 0 0 14px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.65);
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .form-field--full {
    grid-column: 1 / -1;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .form-field input,
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .form-field select,
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .form-field textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 15px;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.15);
    border-radius: 0;
    box-sizing: border-box;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .form-field input:focus,
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .form-field select:focus,
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .form-field textarea:focus {
    outline: none;
    border-color: rgba(26, 26, 26, 0.55);
}

/* Quick questions (boolean radio rows) — boxed white rows like the
   checkbox rows elsewhere in the Lux forms. */
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .boolean-question {
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.15);
    margin-bottom: 10px;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .radio-option {
    font-size: 14px;
}

/* --- Step buttons -------------------------------------------------------
   Full-width like the Lux submit; colour stays the theme's
   .button--primary paint. */
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .next-step-button,
#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .form-navigation-controls .button {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 0;
    min-width: 0;
    margin-top: 16px;
}

#loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .next-step-button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* === Mobile ========================================================== */

@media (max-width: 600px) {
    /* Shorter hero image on phones so the form gets the viewport; tighter
       gutters throughout. The drawer itself is already full-width on small
       screens via the plugin base CSS. */
    #loop-forms-modal.lf-surface-g2lux-exp .lfx-hero__media {
        height: clamp(120px, 18vh, 180px);
    }

    #loop-forms-modal.lf-surface-g2lux-exp .lfx-hero__copy {
        padding: 18px 16px 16px;
    }

    #loop-forms-modal.lf-surface-g2lux-exp .lfx-scroll {
        padding: 18px 16px;
    }

    #loop-forms-modal.lf-surface-g2lux-exp .lfx-talk {
        padding: 14px 16px 18px;
    }

    /* Name pair collapses to a single column — side-by-side fields
       squeeze placeholders unreadably at phone widths. */
    #loop-forms-modal.lf-surface-g2lux-exp .loop-forms .fields > label:has(#firstName),
    #loop-forms-modal.lf-surface-g2lux-exp .loop-forms .fields > label:has(#lastName) {
        grid-column: 1 / -1;
    }

    /* Lux viewing form: name row stacks; time-slot grid stays 2-up (the
       boxes are compact enough) but the property card photo shrinks. */
    #loop-forms-modal.lf-surface-g2lux-exp .lfx-namerow {
        grid-template-columns: 1fr;
    }

    #loop-forms-modal.lf-surface-g2lux-exp .lfx-prop__media {
        width: 72px;
        height: 56px;
    }

    /* Book-now calendar: seven day cells must still fit a phone —
       tighter gaps + padding, smaller date numerals, narrower time
       slot minimum so the grid packs more per row. */
    #loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .days-grid {
        gap: 4px;
    }

    #loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .day-button {
        padding: 8px 1px;
    }

    #loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .day-button strong {
        font-size: 14px;
    }

    #loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .times-grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    }

    /* Screen-2 name pair also stacks on phones. */
    #loop-forms-modal.lf-surface-g2lux-exp .lf-container.book-now .form-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Contact Note — LUX SKIN (inline form, NOT a modal)
   Scoped to .lf-contact-note.lf-surface-g2lux-exp — the generic surface
   class the universal template adds on Lux. This is the "other themes
   keep their own skin inside loop-forms" pattern: structure lives in
   loop-forms.css, brand lives here. A non-Lux theme would ship its own
   .lf-contact-note.lf-surface-{x} block instead.
   ===================================================================== */

.lf-contact-note.lf-surface-g2lux-exp {
    background: #ffffff;
    padding: clamp(28px, 4vw, 56px);
}

.lf-contact-note.lf-surface-g2lux-exp .lf-note__eyebrow {
    letter-spacing: 0.22em;
    font-size: 11px;
    color: rgba(26, 26, 26, 0.6);
}

.lf-contact-note.lf-surface-g2lux-exp .lf-note__title {
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-size: clamp(26px, 3.4vw, 40px);
    color: #1a1a1a;
}

/* Field labels — small tracked caps; block so the "*" stays inline (same
   fix as the modal forms). */
.lf-contact-note.lf-surface-g2lux-exp label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.65);
}

.lf-contact-note.lf-surface-g2lux-exp .fields > label,
.lf-contact-note.lf-surface-g2lux-exp .lf-note__row {
    margin-bottom: 18px;
}

.lf-contact-note.lf-surface-g2lux-exp .required {
    color: #b3261e;
}

.lf-contact-note.lf-surface-g2lux-exp .lf-note__optional {
    letter-spacing: normal;
}

/* White hairline fields. */
.lf-contact-note.lf-surface-g2lux-exp input:not([type="checkbox"]):not([type="radio"]),
.lf-contact-note.lf-surface-g2lux-exp textarea,
.lf-contact-note.lf-surface-g2lux-exp select {
    width: 100%;
    display: block;
    margin-top: 5px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: normal;
    text-transform: none;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.15);
    border-radius: 0;
    box-sizing: border-box;
}

.lf-contact-note.lf-surface-g2lux-exp input:focus,
.lf-contact-note.lf-surface-g2lux-exp textarea:focus,
.lf-contact-note.lf-surface-g2lux-exp select:focus {
    outline: none;
    border-color: rgba(26, 26, 26, 0.55);
}

.lf-contact-note.lf-surface-g2lux-exp ::placeholder {
    color: rgba(26, 26, 26, 0.4);
}

.lf-contact-note.lf-surface-g2lux-exp fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 18px;
}

.lf-contact-note.lf-surface-g2lux-exp legend {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.65);
    margin-bottom: 12px;
    padding: 0;
}

/* Topic choices as boxed pills. */
.lf-contact-note.lf-surface-g2lux-exp .lf-note__radio {
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.15);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    color: #1a1a1a;
}

.lf-contact-note.lf-surface-g2lux-exp .lf-note__radio:has(input:checked) {
    border-color: #1a1a1a;
    box-shadow: inset 0 0 0 1px #1a1a1a;
}

.lf-contact-note.lf-surface-g2lux-exp .lf-note__radio input {
    accent-color: #1a1a1a;
}

/* Consent — quiet, top-aligned box (matches the modal forms). */
.lf-contact-note.lf-surface-g2lux-exp label.checkbox.consent-checkbox {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    text-transform: none;
    letter-spacing: normal;
    font-size: 12px;
    color: rgba(26, 26, 26, 0.75);
    margin-top: 4px;
}

.lf-contact-note.lf-surface-g2lux-exp label.checkbox.consent-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #1a1a1a;
}

/* Full-width CTA — colour from the theme's .button--primary; structure here. */
.lf-contact-note.lf-surface-g2lux-exp .submit-area {
    margin-top: 24px;
}

.lf-contact-note.lf-surface-g2lux-exp .lf-note__submit {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 0;
}

.lf-contact-note.lf-surface-g2lux-exp .lf-note__footer {
    font-size: 14px;
    line-height: 1.6;
    max-width: 60ch;
}