/**
 * pdp-restock.css — restock-alert form inside the PDP's sold-out block.
 *
 * Scoped to the two things the live form adds that the placeholder control did
 * not need: a form element between .pdp__notify and its rows, and outcome
 * messaging. Everything else (.pdp__notify, .pdp__notify-row,
 * .pdp__notify-input, .pdp__notify-btn, .pdp__notify-hint) already lives in
 * product-detail.css and is deliberately NOT redeclared here — one owner per
 * rule.
 *
 * Declares no palette of its own: every colour is a --pdp-* token from
 * pdp-tokens.css, which the shell links first. Light mode only, like the rest of
 * the PDP.
 */

/* .pdp__notify is `display: grid; gap: 7px`; the form is now its only child, so
   the form has to carry that rhythm for the rows inside it. */
.pdp__notify-form {
    display: grid;
    gap: 7px;
}

/* Turnstile renders a fixed-size iframe; keep it from crowding the row above. */
.pdp__notify-form .cf-turnstile {
    margin-top: 3px;
}

.pdp__notify-msg {
    margin: 0;
    padding: 7px 9px;
    border-radius: var(--pdp-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

.pdp__notify-msg[hidden] {
    display: none;
}

.pdp__notify-msg--ok {
    background: var(--pdp-ok-soft);
    color: var(--pdp-ok);
}

/* Warn, not error: "it's already in stock" and "no alert for this one" are
   answers, not failures. */
.pdp__notify-msg--warn,
.pdp__notify-msg--error {
    background: var(--pdp-warn-soft);
    color: var(--pdp-warn);
}

.pdp__notify-hint a {
    color: var(--pdp-accent-ink);
    text-decoration: underline;
}

.pdp__notify-hint a:hover {
    color: var(--pdp-accent-ink-hover);
}