/* Single product page "Notify Me When Available" sign-up.

   Deliberately theme-neutral: everything visual is driven by the custom
   properties below, so a theme can restyle the widget by redefining them
   rather than fighting specificity. The loop button gets no styling of its own
   at all — it keeps whatever classes the theme adds through
   woocommerce_loop_add_to_cart_args, and .ghn-notify-btn is only there as a
   hook if the theme wants to single it out. */

.ghn-stock-notify {
    --ghn-stock-notify-accent: #374A36;
    --ghn-stock-notify-surface: #f9faf7;
    --ghn-stock-notify-border: #e2e2e2;
    --ghn-stock-notify-error: #c0392b;
    --ghn-stock-notify-radius: 12px;

    margin: 20px 0;
}

.ghn-stock-notify[hidden],
.ghn-stock-notify__form[hidden],
.ghn-stock-notify__trigger[hidden],
.ghn-stock-notify__message[hidden] {
    display: none;
}

.ghn-stock-notify:has(.ghn-stock-notify__form:not([hidden])) {
    padding: 16px 18px;
    border: 1px solid var(--ghn-stock-notify-border);
    border-radius: var(--ghn-stock-notify-radius);
    background: var(--ghn-stock-notify-surface);
}

.button.ghn-stock-notify__trigger {
    background: transparent;
    color: var(--ghn-stock-notify-accent);
    border: 2px solid var(--ghn-stock-notify-accent);
}

.button.ghn-stock-notify__trigger:hover {
    background: var(--ghn-stock-notify-accent);
    color: #fff;
}

/* Self-contained, in case the theme doesn't ship its own .screen-reader-text
   and has dequeued WooCommerce's stylesheet. */
.ghn-stock-notify .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ghn-stock-notify__form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ghn-stock-notify__input {
    flex: 1 1 220px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #ccc;
    border-radius: 999px;
}

.ghn-stock-notify__submit {
    flex: 0 0 auto;
}

.ghn-stock-notify__message {
    margin: 10px 0 0;
    font-size: 14px;
}

.ghn-stock-notify__message.is-error {
    color: var(--ghn-stock-notify-error);
}

.ghn-stock-notify__message.is-success {
    color: var(--ghn-stock-notify-accent);
}