/* ============================================================================
   Omnisend forms — Pure Amino brand skin
   ----------------------------------------------------------------------------
   The Omnisend launcher (omnisnippet1.com, loaded by the Omnisend for
   WooCommerce plugin) renders the account's forms straight into the page DOM
   under #omnisend-forms-container — no iframe, no shadow root — with its own
   scoped CSS: every rule is prefixed .omnisend-form-<formId>-<blockId>. That
   is why the pop-up can be restyled from here at all, and why every selector
   below is an attribute-substring match on the STRUCTURAL part of those class
   names (-content-inner, -text-, -action-, -input …) rather than on an id:
   the skin applies to any form the account renders, not just today's.

   The copy, the fields, the steps and the trigger still live in the Omnisend
   form builder. This file only decides how they look.

   Specificity notes — Omnisend's own rules are not shy:
     • text blocks carry color/font-family/font-size/line-height as !important
       at (0,1,0)–(0,2,0); every declaration here that has to beat one of those
       is !important at (1,1,0) or higher (the #omnisend-forms-container scope).
     • buttons/inputs are id-qualified (#id.class) without !important; the
       email input's border-radius is !important.
     • the logo <img> has an inline width — hence the !important on width.

   Two things are deliberately NOT changed: the form's mechanics (Omnisend's
   own dismissal, submit and step logic are untouched — the scrim below is
   pointer-events:none for exactly that reason) and its mobile breakpoint
   (600px, Omnisend's own).

   Keyframes pa-checkout-glow / pa-checkout-arr live in chrome.css — this
   stylesheet depends on it (functions.php), so the one green "go" control
   reads identically here, in the drawer and on the RUO gate.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Backdrop.  #omnisend-form-<id> is a static, zero-height div that exists
      only while the pop-up is open (Omnisend removes it on close — verified),
      so a fixed pseudo-element on it is a scrim that appears and vanishes with
      the form and can never go stale. Scoped to the pop-up's own id: a flyout
      or embedded form must not get a full-screen scrim. To skin another
      pop-up, add its id here and in section 7.
   -------------------------------------------------------------------------- */
#omnisend-form-6a860e0ca6c08139eb7e23f9::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 199999;                       /* the form container is 200000 */
    background: rgb(var(--rgb-forest) / .34);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
            backdrop-filter: blur(10px) saturate(1.15);
    pointer-events: none;                  /* purely visual — the page stays as interactive as Omnisend built it */
    animation: pa-omni-scrim .35s var(--ease-standard) both;
}
@keyframes pa-omni-scrim {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* A visitor still on the RUO entry gate must not get a second modal stacked
   on top of it (the launcher's z-index beats the gate's). The form is kept
   in the DOM and simply revealed when the gate closes — visibility, not
   display, so nothing Omnisend measures on render reads as zero. */
body.pa-ruo-gate-open #omnisend-forms-container {
    visibility: hidden;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   1. The card — the glass recipe from colors_and_type.css, same as the RUO
      gate card. The purple 2px border and 28px radius were the builder's.
   -------------------------------------------------------------------------- */
#omnisend-forms-container [class*="-content"]:not([class*="-content-inner"]) {
    max-width: min(880px, calc(100vw - 32px)) !important;
}
#omnisend-forms-container [class*="-content-inner"] {
    background: rgb(var(--rgb-white) / .90) !important;
    -webkit-backdrop-filter: var(--glass-blur-strong) !important;
            backdrop-filter: var(--glass-blur-strong) !important;
    border: 1px solid var(--glass-edge) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--glass-shadow-lg) !important;
    overflow: hidden !important;
}
/* The grey plate the builder paints behind every step — the card is the surface now. */
#omnisend-forms-container [class*="-opacity-layer"] {
    background: transparent !important;
    opacity: 0 !important;
}
/* Product photo panel (an opaque JPEG on a light studio background, shown
   object-fit:contain). The well colour matches the photo's own background
   pixel-for-pixel so the letterbox bands disappear — a literal on purpose,
   it is the asset's colour, not the brand's. */
#omnisend-forms-container img[class*="-background-image"] {
    background-color: #F7F7F7 !important;
    border-left: 1px solid var(--hairline-soft);
    object-position: center 55%;
}

/* --------------------------------------------------------------------------
   2. Rhythm — one section per step, blocks inside it.
   -------------------------------------------------------------------------- */
#omnisend-forms-container [class*="-section-"]:not([class*="-opacity-layer"]) {
    padding: clamp(28px, 3.8vw, 44px) clamp(22px, 3.2vw, 36px) !important;
}
#omnisend-forms-container [class*="-image-container-"] {
    padding: 0 12px 16px !important;
}
#omnisend-forms-container [class*="-text-"] {
    padding: 4px 12px !important;
}
#omnisend-forms-container [class*="-text-"]:has(h1, h2) {
    padding: 2px 12px 12px !important;
}
#omnisend-forms-container [class*="-field-container-"]:not([class*="-wrapper"]) {
    padding: 6px 12px !important;
}
#omnisend-forms-container [class*="-action-container-"]:has(> button[type="submit"]),
#omnisend-forms-container [class*="-success-sections-container"] [class*="-action-container-"] {
    padding: 12px 12px 4px !important;
}
#omnisend-forms-container [class*="-action-container-"]:has(> button[type="button"]) {
    padding: 2px 12px !important;
}
#omnisend-forms-container [class*="-success-sections-container"] [class*="-action-container-"] {
    padding-top: 18px !important;
}
/* The reassurance line closes every step (last block in the column). */
#omnisend-forms-container [class*="-column-"] > [class*="-text-"]:last-child {
    padding: 16px 12px 0 !important;
}

/* --------------------------------------------------------------------------
   3. Type. Archivo display, sentence-level restraint, one mono micro-label.
      (The headline arrives upper-case from the builder — CSS cannot re-case
      typed copy; that edit belongs in Omnisend.)
   -------------------------------------------------------------------------- */
#omnisend-forms-container [class*="-text-"],
#omnisend-forms-container [class*="-text-"] p,
#omnisend-forms-container [class*="-text-"] li,
#omnisend-forms-container [class*="-text-"] h1,
#omnisend-forms-container [class*="-text-"] h2,
#omnisend-forms-container [class*="-text-"] h3 {
    font-family: var(--font-body) !important;
    color: var(--ink) !important;
    text-align: center !important;         /* one block arrives text-align:justify inline */
    letter-spacing: normal;
    text-transform: none !important;
}
#omnisend-forms-container [class*="-text-"] a {
    color: var(--ink) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Headline blocks */
#omnisend-forms-container [class*="-text-"]:has(h1, h2),
#omnisend-forms-container [class*="-text-"] h1,
#omnisend-forms-container [class*="-text-"] h2 {
    font-family: var(--font-display) !important;
    font-size: clamp(30px, 3.2vw, 40px) !important;
    line-height: 1.04 !important;
    font-weight: 800 !important;
    letter-spacing: -.022em !important;
}
#omnisend-forms-container [class*="-text-"] h1 strong,
#omnisend-forms-container [class*="-text-"] h2 strong {
    font-weight: inherit !important;
}
/* The offer line — the builder splits "YOU'VE GOT" / "20% OFF" into two
   headings. The second is the discount: money-green, the same green the
   drawer's Discount row and the invoice "You save" line use. Semantic, not
   decorative — the one place green belongs on this card besides the CTA. */
#omnisend-forms-container [class*="-text-"] h2 + h2 {
    color: var(--accent-money) !important;
}

/* Lead copy (the builder uses h3 for the success-step sentence) */
#omnisend-forms-container [class*="-text-"]:has(h3),
#omnisend-forms-container [class*="-text-"] h3 {
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    color: var(--ink-2) !important;
}
#omnisend-forms-container [class*="-text-"] h3 strong {
    font-weight: 700 !important;
    color: var(--ink) !important;
}

/* Body copy (plain paragraph blocks) */
#omnisend-forms-container [class*="-text-"]:not(:has(h1, h2, h3)),
#omnisend-forms-container [class*="-text-"]:not(:has(h1, h2, h3)) p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    color: var(--ink-3) !important;
}
#omnisend-forms-container [class*="-text-"] p strong {
    font-weight: 600 !important;
    color: var(--ink-2) !important;
}

/* Reassurance line — the brand's mono micro-label voice */
#omnisend-forms-container [class*="-column-"] > [class*="-text-"]:last-child,
#omnisend-forms-container [class*="-column-"] > [class*="-text-"]:last-child p {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--ink-4) !important;
}

/* --------------------------------------------------------------------------
   4. Logo — the wordmark PNG the builder places at 222–245px, inline-styled.
   -------------------------------------------------------------------------- */
#omnisend-forms-container img[class*="-image-"]:not([class*="-background-image"]) {
    width: 148px !important;
    height: auto !important;
}

/* --------------------------------------------------------------------------
   5. Fields — the RUO gate's inputs: 16px (no iOS zoom), hairline, 14px
      radius, ink focus.
   -------------------------------------------------------------------------- */
#omnisend-forms-container input[class*="-input"] {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--ink) !important;
    background: var(--n-0) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-control) !important;
    padding: 15px 18px !important;
    box-shadow: 0 1px 2px rgb(var(--rgb-forest) / .04) !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}
#omnisend-forms-container input[class*="-input"]::placeholder {
    color: var(--n-350) !important;
    opacity: 1 !important;
}
#omnisend-forms-container input[class*="-input"]:focus,
#omnisend-forms-container input[class*="-input"]:focus-visible {
    border-color: var(--ink) !important;
    box-shadow: 0 0 0 3px rgb(var(--rgb-ink) / .08) !important;
    outline: none !important;
}
#omnisend-forms-container input[class*="-input"].error {
    border-color: var(--state-danger) !important;
}
#omnisend-forms-container label[class*="-label"] {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ink-2) !important;
    padding: 0 0 8px !important;
}
#omnisend-forms-container label[class*="-label"].error {
    color: var(--state-danger) !important;
}

/* Phone step — country prefix box beside the input */
#omnisend-forms-container [class$="-phone-number-prefix"] {
    color: var(--ink) !important;
    background: var(--n-0) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-control) !important;
    padding: 0 14px !important;
    margin-right: 8px !important;
    box-shadow: 0 1px 2px rgb(var(--rgb-forest) / .04);
}
#omnisend-forms-container [class$="-phone-number-prefix"]:focus {
    border-color: var(--ink) !important;
    box-shadow: 0 0 0 3px rgb(var(--rgb-ink) / .08) !important;
    outline: none !important;
}
#omnisend-forms-container [class$="-phone-number-prefix-value"],
#omnisend-forms-container [class$="-phone-number-prefix-option"] {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
}
#omnisend-forms-container [class$="-phone-number-prefix-options-container"] {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--glass-shadow-lg) !important;
    border: 1px solid var(--hairline-soft);
}
#omnisend-forms-container [class$="-select-arrow"] {
    fill: var(--ink-3) !important;
}

/* Consent checkbox (custom: an opacity-0 input beside a styled div) */
#omnisend-forms-container [class$="-label-container"] {
    align-items: flex-start !important;
    gap: 10px;
    padding: 8px 0 !important;
}
#omnisend-forms-container div[class*="-field-container-"][class$="-input"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-top: 1px;
    border: 1.5px solid var(--ink-4) !important;
    border-radius: 5px !important;
    background: var(--n-0) !important;
    transition: background .15s ease, border-color .15s ease;
}
#omnisend-forms-container div[class*="-field-container-"][class$="-input"]::after {
    left: 5px !important;
    top: 1px !important;
    width: 6px !important;
    height: 10px !important;
    border-color: var(--n-0) !important;
    border-width: 0 2px 2px 0 !important;
}
#omnisend-forms-container input[type="checkbox"]:checked ~ div[class$="-input"] {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
}
#omnisend-forms-container input[type="checkbox"]:focus-visible ~ div[class$="-input"] {
    box-shadow: 0 0 0 3px rgb(var(--rgb-ink) / .12) !important;
}
#omnisend-forms-container [class$="-label-container"] [class$="-label"],
#omnisend-forms-container [class$="-label-container"] [class$="-label"] p,
#omnisend-forms-container [class$="-description"],
#omnisend-forms-container [class$="-description"] p {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    color: var(--ink-3) !important;
}
#omnisend-forms-container [class$="-description"] a {
    color: var(--ink) !important;
}
#omnisend-forms-container [class$="-description-link"] {
    fill: var(--ink-3) !important;
}

/* Validation copy */
#omnisend-forms-container [class$="-submit-error"],
#omnisend-forms-container [id$="-required"],
#omnisend-forms-container [id$="-error"] {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: var(--state-danger) !important;
    padding: 8px 0 0 !important;
}

/* --------------------------------------------------------------------------
   6. Buttons.
      Primary = the step's submit (and the success step's only button, which
      the builder types as a plain button): the green gradient "go" control.
      Secondary = every other plain button ("No thanks…", "Skip this step"):
      the RUO gate's quiet exit link.
   -------------------------------------------------------------------------- */
#omnisend-forms-container button[class*="-action-"] {
    font-family: var(--font-body) !important;
    cursor: pointer !important;
    -webkit-appearance: none;
            appearance: none;
}
#omnisend-forms-container button[class*="-action-"][type="button"] {
    display: block !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 8px 10px !important;
    background: none !important;
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--n-400) !important;
    text-decoration: underline !important;
    text-decoration-color: rgb(var(--rgb-ink) / .25) !important;
    text-underline-offset: 3px !important;
    transition: color .18s ease !important;
}
#omnisend-forms-container button[class*="-action-"][type="button"]:hover {
    color: var(--ink) !important;
    text-decoration-color: currentColor !important;
}

#omnisend-forms-container button[class*="-action-"][type="submit"],
#omnisend-forms-container [class*="-success-sections-container"] button[class*="-action-"][type="button"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 17px 24px !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: linear-gradient(135deg, var(--green-500) 0%, var(--green-300) 100%) !important;
    color: var(--n-0) !important;
    text-shadow: 0 1px 2px rgb(var(--rgb-shadow-green) / .25) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: 0 0 16px rgb(var(--rgb-mint) / .45), 0 6px 18px rgb(var(--rgb-money) / .28) !important;
    animation: pa-checkout-glow 2.6s ease-in-out infinite !important;
    transition: box-shadow .25s var(--ease-standard), filter .25s var(--ease-standard) !important;
}
#omnisend-forms-container button[class*="-action-"][type="submit"]:hover,
#omnisend-forms-container [class*="-success-sections-container"] button[class*="-action-"][type="button"]:hover {
    filter: brightness(1.07);
    color: var(--n-0) !important;
    box-shadow: 0 0 26px rgb(var(--rgb-mint) / .7), 0 8px 22px rgb(var(--rgb-money) / .35) !important;
}
#omnisend-forms-container button[class*="-action-"][type="submit"]::after,
#omnisend-forms-container [class*="-success-sections-container"] button[class*="-action-"][type="button"]::after {
    content: "→";
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0;
    animation: pa-checkout-arr 1.5s ease-in-out infinite;
}
#omnisend-forms-container button[class*="-action-"][type="submit"]:disabled,
#omnisend-forms-container [class*="-success-sections-container"] button[class*="-action-"][type="button"]:disabled {
    opacity: .6 !important;
    cursor: default !important;
    animation: none !important;
}
#omnisend-forms-container button[class*="-action-"]:focus-visible {
    outline: 2px solid var(--ink) !important;
    outline-offset: 3px !important;
}

/* Loading state over a step */
#omnisend-forms-container [class*="-loading-overlay"] {
    background: rgb(var(--rgb-white) / .7) !important;
}
#omnisend-forms-container [class*="-loading-spinner"] circle {
    stroke: var(--ink) !important;
}

/* --------------------------------------------------------------------------
   7. Entrance — the builder slides the card in from the right over a full
      second. A short rise-and-settle, ending where Omnisend's own keyframes
      end (translate(-50%,-50%) = centred), so nothing about placement
      changes. Scoped to the pop-up id for the same reason as the scrim.
   -------------------------------------------------------------------------- */
#omnisend-form-6a860e0ca6c08139eb7e23f9 > [class*="-container"] {
    animation: pa-omni-in .5s var(--ease-out) both !important;
}
@keyframes pa-omni-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(.985); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* --------------------------------------------------------------------------
   8. Phone — Omnisend hides the photo panel below 600px and runs the card
      full-width with 12px gutters; the type steps down to fit a 375px card.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    #omnisend-forms-container [class*="-content-inner"] {
        border-radius: 22px !important;
    }
    #omnisend-forms-container [class*="-section-"]:not([class*="-opacity-layer"]) {
        padding: 24px 14px 20px !important;
    }
    #omnisend-forms-container [class*="-text-"]:has(h1, h2),
    #omnisend-forms-container [class*="-text-"] h1,
    #omnisend-forms-container [class*="-text-"] h2 {
        font-size: clamp(28px, 8.6vw, 34px) !important;
    }
    #omnisend-forms-container img[class*="-image-"]:not([class*="-background-image"]) {
        width: 128px !important;
    }
    #omnisend-forms-container [class*="-image-container-"] {
        padding-bottom: 12px !important;
    }
    #omnisend-forms-container input[class*="-input"] {
        padding: 14px 16px !important;
    }
    #omnisend-forms-container button[class*="-action-"][type="submit"],
    #omnisend-forms-container [class*="-success-sections-container"] button[class*="-action-"][type="button"] {
        padding: 16px 20px !important;
    }
}