/**
 * Out-of-stock "notify me" capture.
 *
 * Design intent: when a variation is unavailable, this REPLACES the buy action
 * rather than sitting underneath it. The quantity stepper and the dead
 * ADD TO CART button are hidden, and Notify Me takes the primary slot using the
 * same full-width white-on-dark treatment as .single_add_to_cart_button.
 *
 * No border or card — nothing else in the product summary is boxed.
 */

/* ---------------------------------------------------------------------------
   Hide the buy controls while the notify form is showing.
   .lvry-has-notify is toggled on .summary by notify-me.js.

   Deliberately narrow: .woocommerce-variation holds the price and the
   "Out of stock" label, which must stay visible, so the wrapper itself is
   never hidden — only the quantity input and the add-to-cart button.
   --------------------------------------------------------------------------- */

.lvry-has-notify .qty-variation,
.lvry-has-notify .woocommerce-variation-add-to-cart,
.lvry-has-notify .variations_button {
    display: none !important;
}

/* Express checkout buttons (Google Pay / Apple Pay).
   WooPayments' should_show_express_checkout_button() has no stock check, and
   on a variable product it renders against the PARENT — which is in stock even
   when the selected variation isn't. Because variation choice happens in the
   browser, there is no server-side hook that knows which one is selected, so
   this has to be handled client-side.

   Square's wallet sits inside .woocommerce-variation-add-to-cart and is
   already covered above; WooPayments renders after </form> via
   woocommerce_after_add_to_cart_form and needs hiding separately. */
.lvry-has-notify .wcpay-express-checkout-wrapper,
.lvry-has-notify #wcpay-express-checkout-element,
.lvry-has-notify #wc-square-digital-wallet {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Re-flow the stock/price line.

   style.css pins .woocommerce-variation to position:absolute with bottom:54px
   (and bottom:70px under 1024px), measured from the bottom of the variations
   form. That offset assumes the add-to-cart row is still there to sit above.
   With the row hidden the form gets shorter, so the absolute block rides up
   and lands on top of the SIZE selector.

   Rather than chase a new magic offset — which would break again the moment
   button padding changes — drop it back into normal flow. !important is
   needed because style.css already uses it on this element.
   --------------------------------------------------------------------------- */

.lvry-has-notify .woocommerce-variation {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Keep "Out of stock" and the price on one line, stock first, as before. */
.lvry-has-notify .single_variation_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
}

.lvry-has-notify .single_variation_wrap .woocommerce-variation {
    order: -1;
}

/* Matches style.css's own spacing for this wrapper. */
.lvry-has-notify .qty-and-cart-wrapper {
    padding-top: 0.75rem;
}

/* ---------------------------------------------------------------------------
   The form
   --------------------------------------------------------------------------- */

.lvry-notify {
    margin: 20px 0 0;
}

.lvry-notify[hidden] {
    display: none;
}

.lvry-notify__prompt {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.7;
}

.lvry-notify__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lvry-notify__email {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.3;
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
}

/* The theme styles inputs globally; keep the placeholder quiet and same-size
   as the value rather than inheriting a larger display face. */
.lvry-notify__email::placeholder {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.35);
    opacity: 1;
}

.lvry-notify__email:focus {
    outline: none;
    border-color: #ffffff;
}

/* Matches .single_add_to_cart_button: full width, white, dark label. */
.lvry-notify .lvry-notify__submit {
    display: block;
    width: 100%;
    margin: 0;
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #1a1a1a !important;
    cursor: pointer;
}

.lvry-notify .lvry-notify__submit:hover:not(:disabled),
.lvry-notify .lvry-notify__submit:focus-visible:not(:disabled) {
    background: transparent;
    color: #ffffff !important;
}

.lvry-notify .lvry-notify__submit:disabled,
.lvry-notify .lvry-notify__submit.is-loading {
    opacity: 0.5;
    cursor: progress;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.lvry-notify__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lvry-notify__message {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.lvry-notify__message:empty {
    display: none;
}

.lvry-notify__message.is-error {
    color: #ff6b6b;
}

.lvry-notify__message.is-success {
    color: #7ddba1;
}