/*
 * Responsive overrides layered on top of style.min.css.
 *
 * style.min.css hardcodes .sign-up__form-item--half-width to width:50% with
 * no breakpoint, which leaves paired fields cramped on narrow viewports and
 * leaves a blank half-column when a row has only one field (e.g. BirthDate
 * on the /online variant). Stack them just under the base sheet's 48em
 * (768px) min-width boundary — `47.99em` rather than `768px` so the two
 * media queries can never both fire at exactly 768 CSS pixels (e.g. iPad
 * Mini portrait), which would otherwise leave the row in an ambiguous
 * state.
 *
 * `flex-wrap: wrap` on the row is required for the `width: 100%` below to
 * actually take effect. `.sign-up__form-row` is `display: flex` with the
 * default `flex-shrink: 1`, so two children declaring `width: 100%` get
 * shrunk back to ~50% each to fit a single line. Allowing the row to wrap
 * lets each item claim its own line and removes the inconsistency that
 * shows up across devices when labels happen to wrap (e.g. iPhone 12 /
 * iOS 26.3 wraps "Select a Store (Required)" while iPhone 16 doesn't).
 *
 * The Store picker's visible chrome lives on `.blooms-custom-select`, not
 * the inner `<select>`, and style.min.css gives it `margin-top: 0.5rem`
 * but no bottom margin. Text inputs get `margin-bottom: 1.1em` from
 * `.input`, so when fields stack the picker would butt up against the
 * next row (Phone / DoB) — match the input spacing.
 *
 * iOS Safari auto-zooms the page on focus when an input renders below
 * 16px. The bundle doesn't set `font-size` on `.input` so it inherits
 * from the cascade, which on mobile is below 16px. Pin to 16px to avoid
 * the zoom-and-shift behaviour.
 *
 * The submit button uses `d-inline-block` which makes it sit at content
 * width — visually tiny next to full-width stacked inputs and a smaller
 * tap target than it needs to be. Stretch it to match the inputs.
 *
 * Once the row wraps, vertical separation between stacked items is left
 * to whatever margin-bottom each child happens to carry. `.input`
 * supplies 1.1em from the base sheet; the rule below adds the same to
 * `.blooms-custom-select` so the Store picker matches. That's sufficient
 * on its own — adding `row-gap` here would stack with the existing
 * margin-bottom (2.2em within a wrapped row vs. 1.1em between rows), so
 * leave row-gap unset and let margin-bottom own the rhythm consistently.
 *
 * `.sign-up__container` keeps `padding: 0 1em` on mobile, so the H1 and
 * the `<hr>` line decorator sit at 16px from the viewport edge. With
 * `.sign-up__form-item { padding: 0 0.5em }` from the base sheet, the
 * inputs sit at 24px — visibly indented relative to the heading. The
 * 0.5em existed to gap paired columns; once the row is wrapped that
 * inter-column gap no longer applies, so drop the padding on mobile and
 * let everything line up at the container edge.
 */
@media (max-width: 47.99em) {
    .sign-up__form-row {
        flex-wrap: wrap;
    }
    .sign-up__form-item {
        padding: 0;
    }
    .sign-up__form-item--half-width {
        width: 100%;
    }
    .sign-up__form .blooms-custom-select {
        margin-bottom: 1.1em;
    }
    .sign-up__form input.input,
    .sign-up__form select {
        font-size: 16px;
    }
    .sign-up__form-button {
        display: block;
        width: 100%;
    }
}

/*
 * style.min.css sets a global `h1 { line-height: 5rem }` (~80px) and only
 * overrides it to a sensible `line-height: 1.25em` inside a
 * `@media (min-width:48em)` block. At narrower widths the 5rem bleeds
 * through and leaves a huge blank row between wrapped title lines. Apply
 * the 1.25em unconditionally so the heading reads normally at any width.
 */
.sign-up__heading {
    line-height: 1.25em;
}

/*
 * Match the rounded visual language used elsewhere on the Blooms site —
 * the category cards and product callouts on bloomsthechemist.com.au use
 * an 8px-ish radius, and "Shop now" CTAs are full pill. 8px here keeps
 * the sign-up form on-brand without drifting into full-pill on every
 * input (which would look odd on wide fields like Email). The CTA
 * `Sign up` button keeps its existing pill shape and remains the visual
 * focal point.
 *
 * Scoped to the sign-up form so nothing else in the app is affected.
 * `input.input` targets the text/email/tel/date fields that carry the
 * `.input` class. The in-store Store picker renders its visible border on
 * the `.blooms-custom-select` wrapper div (the inner `<select>` is
 * borderless), so we round the wrapper; `select` is kept for defence in
 * depth. Checkboxes and hidden inputs are excluded by selector.
 *
 * `!important` is required because style.min.css applies
 * `.input { border-radius: 0 !important }` — specificity alone can't beat
 * `!important`. We match their pattern so our radius sticks.
 */
.sign-up__form input.input,
.sign-up__form select,
.sign-up__form .blooms-custom-select {
    border-radius: 8px !important;
}

/*
 * iOS Safari gives `input[type="date"]` a larger intrinsic min-height
 * than plain text inputs, so on narrow viewports the DoB field rendered
 * roughly double the height of Phone Number despite both sharing the
 * `.input` class. Stripping the native appearance collapses that extra
 * min-height and lets the shared padding/height rules decide the box,
 * bringing DoB in line with the other fields. The native date picker
 * still opens on tap — `-webkit-appearance` only controls the in-page
 * rendering of the input, not the picker UI.
 */
.sign-up__form input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
}

/*
 * The base sheet draws a "Birthdate" placeholder over the empty date
 * input via `.date_placeholder::before { content: attr(placeholder) }`,
 * because iOS Safari refuses to render native placeholders on
 * `input[type="date"]`. Chrome/Edge/Safari-desktop also paint their
 * own date-format hint inside the input — without intervention the
 * two stack and the input renders visibly taller than text inputs in
 * the same row.
 *
 * Hide the native hint with `visibility: hidden` on `::-webkit-datetime-edit`.
 * `display: none` collapses Chrome's shadow-DOM layout entirely and
 * takes the calendar-picker icon with it. `color: transparent` on the
 * parent pseudo doesn't propagate to the sub-pseudos in either Chrome
 * (day/month/year-field carry their own UA colour) or Safari (which
 * paints its placeholder pattern through a slightly different internal
 * path that doesn't expose every sub-pseudo as a CSS hook). `opacity:
 * 0` covers both but in current Chrome/Safari the picker icon renders
 * inside the datetime-edit subtree, so the icon disappears with the
 * text. Visibility behaves like opacity for the descendants we want
 * gone but, unlike opacity, can be explicitly overridden — so we
 * restore the picker indicator with `visibility: visible` below. The
 * element still occupies its normal box, keeping the input height
 * consistent.
 *
 * `main.js` removes the `.date_placeholder` class once a value is
 * chosen, so this selector stops matching and the native datetime-
 * edit shows the picked value normally.
 *
 * Firefox is a known gap here: it doesn't render `::before` on form
 * controls and doesn't implement the `-webkit-` date-input pseudos,
 * so neither the overlay nor the native-hint hide is reachable. It
 * will continue to show its own `dd / mm / yyyy` text — acceptable as
 * a format hint, just visually different from Chrome/Safari's
 * "Birthdate".
 */
.date_placeholder::-webkit-datetime-edit {
    visibility: hidden;
}

.date_placeholder::-webkit-calendar-picker-indicator {
    visibility: visible;
}

/*
 * Placeholder text inherits the input's white colour, which makes empty
 * fields look identical to filled ones — there is no visual cue that
 * "First Name" is a hint vs. a value the user typed. Dim placeholders to
 * 60% of the cream tone used elsewhere (matches `.sign-up__terms-label`)
 * so they read as guidance and entered values stand out by contrast.
 *
 * Firefox applies an additional `opacity: 0.54` on top of `::placeholder`
 * by default; pin `opacity: 1` so our colour is the only attenuation.
 *
 * `.date_placeholder::before` carries the "Birthdate" overlay text used
 * in place of the unsupported native placeholder on iOS Safari — dim it
 * to the same tone so the date field reads consistently with the others.
 */
.sign-up__form input.input::placeholder {
    color: rgba(247, 245, 237, 0.6);
    opacity: 1;
}

.date_placeholder::before {
    color: rgba(247, 245, 237, 0.6);
    /*
     * Pull the overlay out of normal flow and pin it to the vertical
     * centre of the input. Flow-based approaches don't work cleanly
     * here: the base sheet's `width: 100%` anchors the pseudo to the
     * top of the content box, and switching the input to flex throws
     * away the shadow DOM's right-anchored calendar icon (the picker
     * indicator is not a true flex sibling of the `::before` — it
     * lives in the input's internal layout, untouched by our outer
     * display change). Absolute positioning keeps the native shadow
     * DOM rendering intact (calendar icon stays at the right edge)
     * and centres "Birthdate" against the input baseline at the same
     * vertical position as the native placeholders elsewhere.
     *
     * `pointer-events: none` lets clicks pass through to the input so
     * tapping anywhere inside the box still opens the date picker.
     */
    width: auto;
    position: absolute;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.date_placeholder {
    position: relative;
}

/*
 * Server-rendered error banner ({% if error %} branch). Previously
 * carried inline `max-width: none; margin: 2em 0` and so sat at the
 * `.sign-up__container` edge (16px on mobile) — 8px wider than the
 * inputs. With the form-item padding now removed on mobile, both the
 * banner and the inputs line up against the container at 16px.
 */
.sign-up__feedback {
    max-width: none;
    margin: 2em 0;
}

/*
 * Terms-and-conditions block. Previously expressed as five inline `style`
 * attributes on the wrapper, checkbox, and label in sign_up.html — moved
 * here so the gutter lines up with the inputs and the rest of the form.
 *
 * Top margin trim (2em → 1em) is mobile-only. On mobile,
 * `.sign-up__form-inputs` contributes a 1em bottom margin and the
 * checkbox added a further 2em on top, giving a 3em dead zone next to
 * a small viewport. On desktop the rhythm reads correctly at 2em (and
 * `.sign-up__form-inputs` margin-bottom collapses to 0.9em there), so
 * keep desktop unchanged from the previous behaviour.
 */
.sign-up__terms {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    margin: 2em 0 2.5em;
}

@media (max-width: 47.99em) {
    .sign-up__terms {
        margin-top: 1em;
    }
}

.sign-up__terms-checkbox {
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.2em;
    accent-color: #C6D92D;
    cursor: pointer;
}

.sign-up__terms-label {
    font-size: 1em;
    line-height: 1.6;
    color: #F7F5ED;
    cursor: pointer;
}

.sign-up__terms-link {
    color: #C6D92D;
    text-decoration: underline;
}

/*
 * The base sheet sets `.line-decorator { width: 4rem; margin: 3rem auto }`
 * unconditionally. At the bundle's mobile root font-size (~14px), 3rem of
 * vertical breathing room above and below a 4rem horizontal rule eats
 * ~84px of viewport height on a phone — disproportionate next to the
 * actual form. Halve the vertical margin on mobile.
 */
@media (max-width: 47.99em) {
    .line-decorator {
        margin: 1.5rem auto;
    }
}