/* Riptide Labs — Research Use Only gate + checkout affirmation styles. */

/* ---------- First-visit modal ----------

   Visual language follows the vendor gate the owner preferred: one narrow
   white card, rounded, generous padding, big centered heading, large tappable
   inputs and a single full-width CTA. Bigger and calmer than the editorial
   system we use elsewhere, because this is the first thing a visitor meets and
   it has to be read, not admired.

   ONE THING WE DELIBERATELY DID NOT COPY: they center the card with
   `align-items:center`, which clips the top of any card taller than the
   viewport and makes it unreachable — measured on their own gate at 375x667,
   23px of the heading was cut off with no way to scroll to it. We keep
   flex-start + `margin:auto`, which centers when there is room and overflows
   downward into the gate's own scroll when there isn't.
   ---------------------------------------------------------------------- */

.rt-ruo-gate {
    position: fixed; inset: 0;
    z-index: 1000;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 20px;
    background: rgb(var(--rgb-ink-deep) / .88);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: opacity .28s var(--ease-standard);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Hidden after acceptance */
.rt-ruo-gate.rt-ruo-accepted {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* Cache-proof: the inline <head> script in inc/ruo.php sets html.rt-ruo-ok from
   the cookie before first paint, so a returning (already-affirmed) visitor never
   sees the gate even when the page HTML is served from WP Engine's full-page cache. */
html.rt-ruo-ok .rt-ruo-gate {
    display: none !important;
}

/* Lock page scroll while gate is open */
body.rt-ruo-gate-open { overflow: hidden; }

.rt-ruo-card {
    background: var(--n-0);
    width: 100%;
    max-width: 480px;
    /* See the note above: margin:auto is what lets a too-tall card scroll
       instead of being clipped. Do not replace this with align-items:center. */
    margin: auto;
    padding: 32px 30px 26px;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 1px 0 rgb(var(--rgb-white) / .6) inset,
                0 24px 70px -20px rgb(var(--rgb-black) / .55);
    display: block;
    position: relative;
    animation: paRuoRise .4s var(--ease-out) both;
}
.rt-ruo-gate.rt-ruo-accepted .rt-ruo-card { animation: none; }

@keyframes paRuoRise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

/* Eyebrow — plain centered label. The dot/rule decoration from the editorial
   system is suppressed rather than removed from the markup, so restoring the
   old look is a CSS change and not a template change. */
.rt-ruo-eyebrow {
    display: block;
    text-align: center;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--n-350);
    margin: 0 0 9px;
}
.rt-ruo-eyebrow .rt-ruo-dot,
.rt-ruo-eyebrow .rt-ruo-line { display: none; }

.rt-ruo-card h2 {
    margin: 0 0 9px;
    font-size: 23px;
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: .012em;
    text-transform: uppercase;
    color: var(--ink);
    text-align: center;
}

.rt-ruo-body {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
    color: var(--n-550);
    text-align: center;
}

/* The four affirmations — a soft panel, the way their attestation block reads. */
.rt-ruo-affirm {
    padding: 14px 16px;
    background: var(--n-15);
    border: 1px solid var(--n-50);
    border-radius: 12px;
}
.rt-ruo-affirm-lead {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--n-400);
    margin: 0 0 10px;
}
.rt-ruo-affirm ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; flex-direction: column; gap: 7px;
}
.rt-ruo-affirm li {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--n-550);
    padding-left: 14px;
    position: relative;
    font-weight: 500;
}
.rt-ruo-affirm li::before {
    content: '·';
    position: absolute;
    left: 2px;
    color: var(--n-350);
}
.rt-ruo-affirm a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.rt-ruo-affirm a:hover { opacity: .6; }

/* -------------------------------------------------------------------------
   Capture fields.

   Inputs are 17px on purpose: anything under 16px makes iOS Safari zoom the
   viewport on focus, which on a scroll-locked modal strands the visitor at the
   wrong scale. The optional field is dashed so "optional" reads at a glance
   without another line of copy.
   ------------------------------------------------------------------------- */

.rt-ruo-fields { display: block; }
.rt-ruo-field { display: block; }

.rt-ruo-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: normal;
    text-transform: none;
    margin: 16px 0 2px;
}
.rt-ruo-label em {
    font-style: normal;
    font-weight: 500;
    color: var(--n-400);
}
.rt-ruo-hint {
    display: block;
    font-size: 11.5px;
    line-height: 1.45;
    letter-spacing: normal;
    color: var(--n-400);
    margin: 0 0 5px;
}
.rt-ruo-fields input {
    width: 100%;
    margin: 0;
    padding: 16px 15px;
    font: inherit;
    font-size: 17px;
    color: var(--ink);
    background: var(--n-0);
    border: 2px solid var(--n-100);
    border-radius: 12px;
    outline: none;
    transition: border-color .18s ease;
}
.rt-ruo-fields input[type="tel"] {
    border-width: 1.5px;
    border-style: dashed;
    border-radius: 11px;
    padding: 12px 15px;
    font-size: 16px;
    background: transparent;
}
.rt-ruo-fields input::placeholder { color: var(--n-350); }
.rt-ruo-fields input:focus,
.rt-ruo-fields input:focus-visible {
    border-color: var(--accent-money);
    outline: none;
}
.rt-ruo-err {
    margin: 9px 0 0;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: normal;
    color: var(--state-danger, #E5484D);
    text-align: center;
}
.rt-ruo-err[hidden] { display: none; }

/* Actions — one full-width green CTA, with the exit demoted to a quiet link
   beneath it. A gate still has to offer a way out. */
.rt-ruo-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
}
.rt-ruo-card .rt-ruo-actions .btn {
    width: 100%;
    padding: 17px;
    border: 0;
    border-radius: 12px;
    /* Same treatment as the drawer's Proceed to Checkout button, so the one
       green "go" control on the site reads identically wherever it appears.
       The gradient, glow and arrow keyframes all live in chrome.css, which
       this stylesheet already depends on. Radius stays 12px rather than the
       drawer's 4px — this card is the rounded one. */
    background: linear-gradient(135deg, var(--green-500) 0%, var(--green-300) 100%);
    color: var(--n-0);
    text-shadow: 0 1px 2px rgb(var(--rgb-shadow-green) / .25);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    /* The global .btn is display:flex, so text-align does nothing to its
       children — the label and arrow need justify-content to sit centred. */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 16px rgb(var(--rgb-mint) / .45), 0 6px 18px rgb(var(--rgb-money) / .28);
    animation: rt-checkout-glow 2.6s ease-in-out infinite;
    transition: box-shadow .25s var(--ease-standard), filter .25s var(--ease-standard);
}
.rt-ruo-card .rt-ruo-actions .btn:hover {
    filter: brightness(1.07);
    box-shadow: 0 0 26px rgb(var(--rgb-mint) / .7), 0 8px 22px rgb(var(--rgb-money) / .35);
}
.rt-ruo-card .rt-ruo-actions .btn[disabled] { opacity: .6; cursor: default; animation: none; }
.rt-ruo-card .rt-ruo-actions .btn .arr {
    margin-left: 6px;
    display: inline-block;
    animation: rt-checkout-arr 1.5s ease-in-out infinite;
}

.rt-ruo-card .rt-ruo-actions .btn.ghost {
    display: block;
    justify-content: center;
    text-align: center;
    background: none;
    /* The primary rule above carries the glow AND the pulse keyframes, and a
       class-only override would leave the exit link glowing green — which read
       as a second call to action sitting under the real one. Both are cleared
       here explicitly. */
    box-shadow: none;
    animation: none;
    text-shadow: none;
    color: var(--n-400);
    font-size: 12px;
    font-weight: 500;
    padding: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.rt-ruo-card .rt-ruo-actions .btn.ghost:hover {
    background: none;
    color: var(--ink);
}

.rt-ruo-consent {
    margin: 13px 0 0;
    font-size: 9.5px;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--n-350);
    text-align: center;
}

.rt-ruo-foot {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--n-50);
    text-align: center;
}
.rt-ruo-foot .mono {
    font-size: 9.6px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--n-350);
    font-weight: 600;
}

@media (max-width: 640px) {
    .rt-ruo-gate { padding: 14px; }
    .rt-ruo-card { padding: 26px 20px 22px; border-radius: 16px; }
    .rt-ruo-card h2 { font-size: 21px; }
}

/* ---------- Checkout affirmation — Review & Place Order step ----------
   Phase 48: the affirmation card sits at the top of step 4 (inside
   .place-order, directly above the Place Order button). Until its checkbox
   is ticked, JS puts .rt-ruo-locked on <body> and the Place Order button +
   the Square express wallets are dimmed and inert — the wallets never sit
   in front of the affirmation anymore, so the whole-page lock of Phase 36
   is no longer needed. */
/* State colors (owner 2026-07-12): amber while the affirmation is
   outstanding — action required — flipping green once ticked. The amber
   is also the no-JS default (without JS nothing is locked, but the
   affirmation is still required server-side, so "attention" is the
   honest resting state). */
.rt-ruo-checkout-gate {
    margin: 0 0 20px;
    padding: 18px 20px;
    background: var(--amber-25);
    border: 1px solid var(--amber-200);
    border-left: 3px solid var(--amber-700);
    border-radius: 12px;
    transition: background .25s ease, border-color .25s ease;
}
body.rt-ruo-open .rt-ruo-checkout-gate {
    background: var(--green-50);
    border-color: var(--green-150);
    border-left-color: var(--green-700);
}
.rt-ruo-checkout-gate .rt-ruo-gate-eyebrow {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono, monospace);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--amber-850);
    margin: 0 0 12px;
    transition: color .25s ease;
}
body.rt-ruo-open .rt-ruo-checkout-gate .rt-ruo-gate-eyebrow { color: var(--green-700); }
body.rt-ruo-open .rt-ruo-checkout-gate .rt-ruo-gate-hint { color: var(--green-700); }
.rt-ruo-checkout-gate .rt-ruo-gate-label input[type="checkbox"]:checked { accent-color: var(--green-700); }
.rt-ruo-checkout-gate .rt-ruo-gate-label {
    display: flex; gap: 12px; align-items: flex-start;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink);
    margin: 0;
}
.rt-ruo-checkout-gate .rt-ruo-gate-label input[type="checkbox"] {
    margin: 3px 0 0;
    flex-shrink: 0;
    width: 18px; height: 18px;
    accent-color: var(--ink);
    cursor: pointer;
}
.rt-ruo-checkout-gate .rt-ruo-gate-hint {
    margin: 10px 0 0 30px;
    font-family: var(--mono, monospace);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
}
/* Hint copy: no-JS shows neither state (nothing is locked without JS). */
.rt-ruo-gate-hint .rt-when-locked,
.rt-ruo-gate-hint .rt-when-open { display: none; }
body.rt-ruo-locked .rt-ruo-gate-hint .rt-when-locked { display: inline; }
body.rt-ruo-open .rt-ruo-gate-hint .rt-when-open { display: inline; }

/* Locked state (Phase 48): only the actual submit surfaces freeze — the
   Place Order button and the express wallets. `inert`/`disabled` (set by
   checkout.js) block keyboard/AT interaction; pointer-events backs up
   clicks. The form itself stays fully interactive. */
body.woocommerce-checkout #wc-square-digital-wallet,
body.woocommerce-checkout .wc-square-wallet-buttons,
body.woocommerce-checkout #place_order {
    transition: opacity .25s ease, filter .25s ease;
}
body.rt-ruo-locked #wc-square-digital-wallet,
body.rt-ruo-locked .wc-square-wallet-buttons,
body.rt-ruo-locked #place_order {
    opacity: .4;
    filter: grayscale(1);
    pointer-events: none;
    user-select: none;
}
body.rt-ruo-locked #place_order { animation: none; }

/* Cart page: no RUO gate exists here, and a wallet buy from the cart
   bypasses the checkout affirmation entirely (the server then rejects it
   and Square's sheet spins forever). Express pay lives at checkout only. */
body.woocommerce-cart #wc-square-digital-wallet,
body.woocommerce-cart .wc-square-wallet-buttons { display: none !important; }