/*
 * Global styling for the country-aware compliance disclosure rendered by
 * the `disclosureAt` Handlebars helper (see `config/handlebars.js`).
 *
 * Two visual variants:
 *
 *   1. DEFAULT (below-button, US visitors)
 *      Verbatim match of the hardcoded Beyond-the-Brain
 *      `.email-marketing-disclaimer` rule it replaces
 *      (see `public/beyond-the-brain/opt-in.css`) — so on US pages the
 *      swap to the framework is visually invisible.
 *
 *   2. ACK (above-button, non-US visitors on `ackRequiredOn` URLs)
 *      Reads as a sibling of the `.recommend-txt` ("Highly Recommended…")
 *      row directly above it, so it must match that row's colour, size,
 *      and horizontal alignment. Rules:
 *
 *        • colour: inherit (matches `.recommend-txt`, which inherits in
 *          main-form scopes).
 *        • size:  14px desktop / 12px mobile (matches the shared
 *          `.register-form .recommend-txt` responsive step used across
 *          every funnel's main-form stylesheet).
 *        • padding: mirror the recommend-txt row's Bootstrap
 *          `px-20px ps-md-0px` so the ack checkbox lines up with the
 *          recommend-txt checkbox on mobile, and both align with the
 *          form edge on desktop.
 *
 *      Popup scopes (`.pop-up-register-form`, `.book-pop-up-form`) pin
 *      their own size/colour to match the popup `.recommend-txt` rule
 *      in that scope, and zero out the horizontal padding because those
 *      containers already handle their own side spacing.
 *
 * Loaded globally from `views/layout.hbs`, so every page that renders a
 * disclosure picks it up automatically. Individual templates don't need
 * to pull it in.
 */

.geo-disclosure {
    font-size: 12px;
    display: block;
    color: #a7a7a7;
    margin-top: 15px;
    line-height: 1.4;
    text-align: center;
}

.geo-disclosure a {
    color: inherit;
    text-decoration: underline;
}

.geo-disclosure a:hover {
    color: #1E1E1E;
}

.phone-disclaimer-text,
.sms-text {
    text-align: center;
}

.iti__country-list {
    z-index: 100000 !important;
}

/*
 * Popup register forms — BtB's compact 10px copy with tighter top margin,
 * verbatim from `.pop-up-register-form .email-marketing-disclaimer` /
 * `.book-pop-up-form .email-marketing-disclaimer`.
 */
.pop-up-register-form .geo-disclosure,
.book-pop-up-form .geo-disclosure {
    font-size: 10px;
    margin-top: 10px;
}

/*
 * Consent-checkbox variant (non-US visitors on `ackRequiredOn` URLs).
 * Sits ABOVE the button; flips the top margin into a bottom margin so
 * the wrapper spaces itself from the button below, and mirrors the
 * recommend-txt row directly above it in colour/size/padding.
 */
.geo-disclosure--ack {
    font-size: 14px;
    color: inherit;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 767px) {
    .geo-disclosure--ack {
        font-size: 12px;
    }
}

@media (min-width: 768px) {
    .geo-disclosure--ack {
        padding-left: 0;
        padding-right: 0;
    }
}

/*
 * Popup scopes — recommend-txt sizing differs there and the wrapping
 * container already provides its own side padding, so override.
 *
 *   .pop-up-register-form .recommend-txt = 12px / #333333 across funnels.
 *   .book-pop-up-form     .recommend-txt = 14px / inherited grey.
 *     (Base `.book-pop-up-form .geo-disclosure` colour rule keeps the
 *      legacy #a7a7a7 grey; we only override size + padding here.)
 */
.pop-up-register-form .geo-disclosure--ack {
    font-size: 12px;
    color: #333333;
    padding-left: 0;
    padding-right: 0;
}

/*
 * The book-pop-up-form renders its form fields inside
 * `<div class="row px-md-5">`, so at md+ the content is inset by 3rem on
 * each side. The disclosure is emitted OUTSIDE that row by the helper —
 * match the row's `px-md-5` here so the ack copy aligns horizontally with
 * the "Highly Recommended" text and the First Name / Email inputs.
 */
.book-pop-up-form .geo-disclosure--ack {
    font-size: 14px;
    color: #92A9A9;
    padding-left: 0;
    padding-right: 0;
}
@media (min-width: 768px) {
    .book-pop-up-form .geo-disclosure--ack {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.geo-disclosure--ack .geo-disclosure__ack-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    margin: 0;
}

.geo-disclosure--ack .geo-disclosure__ack-checkbox {
    margin: 3px 0 0 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.geo-disclosure--ack .geo-disclosure__ack-text {
    flex: 1 1 auto;
    color: inherit;
}

/*
 * Inline error revealed by `public/js/disclosure-gate.js` when the visitor
 * clicks the register button without ticking the consent checkbox. The
 * button stays enabled at all times — the error is the feedback channel.
 *
 * Hidden by default via the `hidden` attribute emitted by the helper;
 * toggled off by removing that attribute (browser honours [hidden] with
 * `display: none`). The extra `[hidden]` rule here guards against third-
 * party stylesheets that may override `display: block` on arbitrary divs.
 */
.geo-disclosure__ack-error {
    color: #d23131;
    font-size: inherit;
    line-height: 1.4;
    margin-top: 6px;
}

.geo-disclosure__ack-error[hidden] {
    display: none;
}

/*
 * Red tint on the checkbox when the gate fails, so the invalid state is
 * visible next to the error message. Uses CSS `accent-color` (supported
 * in every evergreen browser) so the checkbox itself recolours without
 * needing a custom control.
 */
.geo-disclosure--ack-invalid .geo-disclosure__ack-checkbox {
    accent-color: #d23131;
    outline: 1px solid #d23131;
    outline-offset: 1px;
}