/**
 * editor-friendly-ok: this restyles a WooCommerce plugin's own single-
 * product template output (woocommerce-back-in-stock-notifications,
 * templates/single-product/back-in-stock-form.php), the same documented
 * exception product-page.css already uses for the native WooCommerce
 * single-product template it sits beside. No Gutenberg block/pattern
 * surface exists for this plugin's markup to register brand presets
 * against.
 *
 * Config investigated: Blocksy Companion Pro's own native waitlist
 * (blocksy_ext_woocommerce_extra_settings, features.product-waitlist) was
 * evaluated first and rejected on its own code (no WooCommerce
 * Subscriptions support, no WPML handling), full verdict recorded in
 * product-page/back-in-stock.php. The plugin's own admin settings screen
 * (WooCommerce > Settings > Products > Back In Stock) has no button/field
 * color or typography controls that reach the values below, so appearance
 * stays in CSS.
 *
 * "Email me when available" (Figma component set 223:35864, variant
 * EMAIL WHEN AVAILABLE), ClickUp 86eypb6me queue item 26. Read live from
 * Figma 2026-09-17:
 *   CONTAINER 34190:86704: column, alignSelf stretch, alignItems stretch,
 *     gap 8px, sizing fill/hug.
 *   INNER 34190:86705 "Email me when available": column, alignSelf
 *     stretch, alignItems stretch, gap 10px, sizing fill/hug. 8px and 10px
 *     are two different nested gaps, kept distinct, not collapsed.
 *   BUTTON 34190:86706, instance of Button component 29384:40260, variant
 *     State=Default/Kind=Secondary/Size=Large from set 29049:58925: row,
 *     alignSelf stretch, padding 16px, justifyContent/alignItems center,
 *     gap 8px, width FILL, height 48 FIXED, fill #247B4E, borderRadius
 *     999px, shadow 0px 4px 6px -2px rgba(0,0,0,0.03), 0px 12px 16px -4px
 *     rgba(0,0,0,0.08), no stroke. Label "EMAIL ME WHEN AVAILABLE": font
 *     Nominee Heavy Extended, weight 900, size 12, lineHeight 26px (as
 *     drawn, not normalised against the 12px size), letterSpacing 0.04em,
 *     UPPER, centered, #FFFFFF. Icon: Messages/sms component set
 *     14005:224022, 18x18 fixed, inlined via bonza_pdp_bis_icon_svg() in
 *     back-in-stock.php.
 *   Hover, State=Hover 29384:40246: fill #FFC125, stroke #B86E00 1.5px,
 *     NO shadow, label/icon #2E2A2A. A full inversion of Default, not a
 *     darken; implemented as an explicit replacement of every property the
 *     Default rule sets, not a partial override, so Default's shadow does
 *     not persist underneath.
 *   Disabled, State=Disabled 29384:40274: fill #247B4E (unchanged from
 *     Default), stroke #247B4E 1px, opacity 0.6, label/icon #F8EDE3.
 *   Focus: no focus variant exists on set 29049:58925 (Default/Hover/
 *     Disabled only). The outline below is the theme's own decision, kept
 *     only because WCAG 2.2 AA focus-visibility is contractual for this
 *     project; it is not a Figma value.
 *   Contrast measured, not just asserted: #FFFFFF on #247B4E = 4.93:1,
 *     passes AA for bold 12px text (4.5:1 threshold). #2E2A2A on #FFC125
 *     clears the same threshold by a wide margin. Disabled at opacity 0.6
 *     falls under AA and is left as-is; WCAG 2.2 exempts disabled controls.
 *
 * Known implementation quirk, not a bug: Default has no border while Hover
 * (1.5px) and Disabled (1px) each have a different border width. Figma
 * draws it that way (no shared "0px transparent border" placeholder exists
 * on Default to normalise against), so the button's box can shift by a
 * fraction of a pixel between states. box-sizing: border-box keeps the
 * shift to the border width itself rather than compounding with padding.
 *
 * BLOCKED / undecided, no Figma reference for any of this, functional-only
 * below:
 *   - The "opened" state after the button is first clicked (see the
 *     DECISION block in back-in-stock.php): form title, email input, opt-
 *     in checkbox. Only shown/hidden, no drawn appearance to match.
 *   - single-product/back-in-stock-registered.php ("you're on the list"
 *     state) is not styled at all here.
 *   - Only desktop values were read; tablet/mobile need their own pass.
 */

.bonza-bis-form {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	align-items: stretch;
	gap: 8px;
}

#wc_bis_product_form {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	align-items: stretch;
	gap: 10px;
}

/* Closed state (default): only the button is visible, matching the Figma
   component exactly. Everything else the plugin renders (title, field,
   opt-in, count) is functional but undrawn, so it stays hidden until the
   disclosure script in back-in-stock.php opens it. */
#wc_bis_product_form .wc_bis_form_title,
#wc_bis_product_form #wc_bis_email,
#wc_bis_product_form .wc_bis_registrations_count,
#wc_bis_product_form .wc_bis_consent_note,
#wc_bis_product_form .wc_bis_opt_in {
	display: none;
}

.bonza-bis-form.is-open #wc_bis_product_form .wc_bis_form_title,
.bonza-bis-form.is-open #wc_bis_product_form #wc_bis_email,
.bonza-bis-form.is-open #wc_bis_product_form .wc_bis_registrations_count,
.bonza-bis-form.is-open #wc_bis_product_form .wc_bis_consent_note,
.bonza-bis-form.is-open #wc_bis_product_form .wc_bis_opt_in,
#wc_bis_product_form.is-open .wc_bis_form_title,
#wc_bis_product_form.is-open #wc_bis_email,
#wc_bis_product_form.is-open .wc_bis_registrations_count,
#wc_bis_product_form.is-open .wc_bis_consent_note,
#wc_bis_product_form.is-open .wc_bis_opt_in {
	display: block;
}

.bonza-bis-form.is-open #wc_bis_product_form #wc_bis_email,
#wc_bis_product_form.is-open #wc_bis_email {
	box-sizing: border-box;
	width: 100%;
	font-family: inherit;
	font-size: 14px;
}

/*
 * editor-friendly-ok: same panel-wide exception documented at the top of
 * this file -- restyling the plugin's own template output, no Gutenberg
 * block/preset surface exists for it, and every colour below is the exact
 * literal already in the (unedited) rule this change extends, not a new
 * hex introduced here.
 *
 * 86eypb6me follow-up (queue item 34 add): custom.php's
 * bonza_pdp_stock_status_row() prints the "Out of stock" row but never
 * actually calls bonza_pdp_back_in_stock_form( $product ) -- confirmed live
 * on /product/boost-bioactive-bites-otp/ (the only out-of-stock product on
 * the QA site), cache BYPASS/DYNAMIC so not a stale-cache artifact: the
 * rendered button is `<button class="button wc_bis_send_form" ...
 * id="wc_bis_send_form">Email me when available</button>`, no
 * `.bonza-bis-btn` class, no label/icon span, and no `.bonza-bis-form`
 * wrapper at all, so `bonza_pdp_bis_decorate_button_markup()` in
 * back-in-stock.php never ran on it. Walked `document.styleSheets`: the
 * winning rule was Blocksy's own `.button { background-color:
 * var(--theme-button-background-initial-color) }` (main.min.css), which is
 * the browser/theme default blue this task exists to catch. That PHP call
 * is missing from custom.php, which is outside this task's file ownership
 * (custom.php is explicitly not owned) -- reported to the lead to add.
 *
 * `#wc_bis_send_form` is added alongside every `.bonza-bis-btn` selector
 * below (ID beats `.button`'s class specificity, so no `!important` is
 * needed) so the button reads correctly either way: decorated (class only,
 * text lives in the child `.bonza-bis-btn__label` span, these box/hover
 * rules apply to the shared `<button>` element) or, as currently live,
 * completely undecorated (`#wc_bis_send_form` IS the button, so these same
 * rules style it directly, and the label rule below is repeated on the
 * bare `#wc_bis_send_form` since the raw markup has no span to carry it).
 * This does not fix the missing `.bonza-bis-form` wrapper, so the
 * progressive-disclosure click handler (back-in-stock.php's delegated
 * listener, `btn.closest('.bonza-bis-form')`) still finds nothing and the
 * button does not reveal the email field on click -- a functional gap this
 * stylesheet cannot close, flagged separately, not silently left for a
 * colour fix to imply is now complete.
 */
/* source: FIGMA (default state) -- Button/Secondary/Large: bg #247B4E, no
   border, white text, visible shadow, box-sizing:border-box already in
   place -- an exact, already-correct token match.
   editor-friendly-ok: same panel-wide exception documented elsewhere in
   this file. */
#wc_bis_product_form .bonza-bis-btn,
#wc_bis_send_form {
	box-sizing: border-box;
	display: flex;
	align-self: stretch;
	width: 100%;
	height: 48px;
	min-height: 48px; /* Blocksy's .button sets a 55px min-height; Figma draws 48 */
	padding: 16px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	background: #247B4E;
	border: none;
	cursor: pointer;
	box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(0, 0, 0, 0.08);
	transition: background-color 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out;
}

/* NOTE (typography contract sweep, CU-86eyxb3yv): --bpp-heading-font is
   borrowed from product-page.css (a different file, not in this task's
   ownership list) -- not renamed/touched here since this file doesn't
   define it and a rename would only be safe done at its source. Left as-is,
   flagged for whoever owns product-page.css's own namespace collapse. */
#wc_bis_product_form .bonza-bis-btn__label,
#wc_bis_send_form {
	font-family: var(--wp--preset--font-family--heading, var(--bpp-heading-font));
	font-weight: 900;
	font-size: 12px;
	line-height: 26px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: #FFFFFF;
}

#wc_bis_product_form .bonza-bis-btn__icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: #FFFFFF;
}

#wc_bis_product_form .bonza-bis-btn__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* source: FIGMA -- Secondary/Large hover delta, already correctly
   implemented: green->gold swap, border added, text->dark, shadow
   removed. No changes needed here, verified against the contract.
   editor-friendly-ok: same panel-wide exception as above -- literals
   unchanged from the existing rule this extends, #wc_bis_send_form added
   only to reach the raw undecorated button (see 86eypb6me comment above). */
#wc_bis_product_form .bonza-bis-btn:hover,
#wc_bis_send_form:hover {
	background: #FFC125; /* 8.7:1 with the #2E2A2A text below (WCAG relative-luminance formula), unchanged value */
	border: 1.5px solid #B86E00;
	box-shadow: none;
	color: #2E2A2A;
}

#wc_bis_product_form .bonza-bis-btn:hover .bonza-bis-btn__label,
#wc_bis_product_form .bonza-bis-btn:hover .bonza-bis-btn__icon {
	color: #2E2A2A;
}

/* Theme decision, not a Figma value: see header comment. */
#wc_bis_product_form .bonza-bis-btn:focus-visible,
#wc_bis_send_form:focus-visible {
	outline: 2px solid var(--bpp-ink);
	outline-offset: 2px;
}

#wc_bis_product_form .bonza-bis-btn:disabled,
#wc_bis_product_form .bonza-bis-btn[aria-disabled="true"] {
	background: #247B4E;
	border: 1px solid #247B4E;
	opacity: 0.6;
	cursor: not-allowed;
}

#wc_bis_product_form .bonza-bis-btn:disabled .bonza-bis-btn__label,
#wc_bis_product_form .bonza-bis-btn:disabled .bonza-bis-btn__icon,
#wc_bis_product_form .bonza-bis-btn[aria-disabled="true"] .bonza-bis-btn__label,
#wc_bis_product_form .bonza-bis-btn[aria-disabled="true"] .bonza-bis-btn__icon {
	color: #F8EDE3;
}

/* z8udzkf58u: the one-time PDP prints the plugin's own undecorated button
   (no .bonza-bis-btn, so no icon span). Draw the Figma Messages/sms icon
   (18x18) with a mask so it follows the label colour on hover, matching the
   decorated button used on the variation path. */
#wc_bis_send_form:not(.bonza-bis-btn)::after {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.75 15.375H5.25C3 15.375 1.5 14.25 1.5 11.625V6.375C1.5 3.75 3 2.625 5.25 2.625H12.75C15 2.625 16.5 3.75 16.5 6.375V11.625C16.5 14.25 15 15.375 12.75 15.375Z'/%3E%3Cpath d='M12.75 6.75L10.4025 8.625C9.63 9.24 8.3625 9.24 7.59 8.625L5.25 6.75'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.75 15.375H5.25C3 15.375 1.5 14.25 1.5 11.625V6.375C1.5 3.75 3 2.625 5.25 2.625H12.75C15 2.625 16.5 3.75 16.5 6.375V11.625C16.5 14.25 15 15.375 12.75 15.375Z'/%3E%3Cpath d='M12.75 6.75L10.4025 8.625C9.63 9.24 8.3625 9.24 7.59 8.625L5.25 6.75'/%3E%3C/svg%3E") center / contain no-repeat;
}