/* ============================================================================
 * Back In Stock — "Be rėmelio" (V2) subscribe form styling for snekukalbu.lt
 * ----------------------------------------------------------------------------
 * Targets the plugin's REAL markup (templates/default-form.php) and deliberately
 * overrides Flatsome, Bootstrap and the plugin's own frontend.min.css — all of
 * which load on the page and fight each other. Hence the heavy use of
 * !important + descriptive selectors. This file is also enqueued AFTER the
 * plugin CSS (see snekukalbu_bis_form_css() in functions.php), so it wins on
 * load order too.
 *
 * Design system (live site): fonts Jost (headings) / Karla (body); brand yellow
 * #ecc21b; blue accent #7cb5e2; ink #1e1e1e. Buttons are pills (radius 99px).
 * ==========================================================================*/

/* Wrapper — strip inherited spacing, fill the column, set the base font.
 * container-type enables the width-based layout switch at the bottom of this file. */
.cwginstock-subscribe-form {
	max-width: 640px !important;
	margin: 16px 0 0 !important;
	padding: 0 !important;
	container-type: inline-size;
	font-family: 'Karla', sans-serif !important;
	color: #333 !important;
}

/* "Nebeturime" (sold out) badge, injected above the form by the shortcode when a
 * product is out of stock. Compact pill in the site's alert red (matches the
 * pre-order notice palette). No font-size set — inherits the standard body size. */
.snekukalbu-oos-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	margin: 0 0 4px !important;
	padding: 5px 13px !important;
	background: #fdecea !important;
	color: #b20000 !important;
	border-radius: 99px !important;
	font-family: 'Karla', sans-serif !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}
.snekukalbu-oos-badge::before {
	content: "" !important;
	flex: none !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: #b20000 !important;
}

/* Kill the Bootstrap/plugin panel box entirely — leave only a thin top divider. */
.cwginstock-subscribe-form .panel,
.cwginstock-subscribe-form .cwginstock-panel-primary {
	background: transparent !important;
	border: 0 !important;
	border-top: 1px solid #e1d9c4 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 22px 0 0 !important;
}

/* Heading row: bell icon + title, left aligned. */
.cwginstock-subscribe-form .cwginstock-panel-heading {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 0 3px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
}
.cwginstock-subscribe-form .cwginstock-panel-heading::before {
	content: "" !important;
	flex: none !important;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ecc21b'%3E%3Cpath d='M12 2a2 2 0 0 1 2 2v.4a6 6 0 0 1 4 5.6v3l1.6 3.2A1 1 0 0 1 18.7 19H5.3a1 1 0 0 1-.9-1.4L6 14.4v-3a6 6 0 0 1 4-5.6V4a2 2 0 0 1 2-2zM9.5 20h5a2.5 2.5 0 0 1-5 0z'/%3E%3C/svg%3E") no-repeat center / 22px !important;
}
/* text-align:left beats the inline style="text-align:center" on the <h4>. */
.cwginstock-subscribe-form .cwginstock-panel-heading h4 {
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	font-family: 'Jost', sans-serif !important;
	font-weight: 600 !important;

	line-height: 1.25 !important;
	color: #1e1e1e !important;
	text-transform: none !important;
}

/* Body + neutralize the Bootstrap grid wrappers (.row / .col-md-12). */
.cwginstock-subscribe-form .cwginstock-panel-body {
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
}
.cwginstock-subscribe-form .row,
.cwginstock-subscribe-form .col-md-12 {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
}
.cwginstock-subscribe-form .form-group {
	margin: 0 !important;
	padding: 0 !important;
}

/* Optional subtitle line (renders only if added via the cwg_instock hook). */
.cwginstock-subscribe-form .cwg-sub {
	margin: 0 0 16px !important;
	font-family: 'Karla', sans-serif !important;

	line-height: 1.5 !important;
	color: #6d6d6d !important;
}

/* Inputs (kept center-aligned to match the inline width/text-align in the template). */
.cwginstock-subscribe-form input.cwgstock_name,
.cwginstock-subscribe-form input.cwgstock_email,
.cwginstock-subscribe-form input.cwgstock_phone {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	box-sizing: border-box !important;
	margin: 0 0 10px !important;
	padding: 13px 14px !important;
	background: #fff !important;
	border: 1.5px solid #e3ddd0 !important;
	border-radius: 11px !important;
	box-shadow: none !important;
	font-family: 'Karla', sans-serif !important;

	line-height: 1.3 !important;
	text-align: center !important;
	color: #1e1e1e !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
}
.cwginstock-subscribe-form input.cwgstock_name:focus,
.cwginstock-subscribe-form input.cwgstock_email:focus,
.cwginstock-subscribe-form input.cwgstock_phone:focus {
	border-color: #7cb5e2 !important;
	box-shadow: 0 0 0 3px rgba(124, 181, 226, .25) !important;
	outline: none !important;
}
.cwginstock-subscribe-form input::placeholder {
	color: #9a9a90 !important;
	opacity: 1 !important;
}

/* Submit — pill button matching the site's .button. */
.cwginstock-subscribe-form .cwgstock_button {
	display: block !important;
	width: 100% !important;
	margin: 4px 0 0 !important;
	padding: 14px 24px !important;
	background: #ecc21b !important;
	color: #1e1e1e !important;
	border: 0 !important;
	border-radius: 99px !important;
	box-shadow: none !important;
	font-family: 'Karla', sans-serif !important;
	font-weight: 700 !important;

	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-shadow: none !important;
	cursor: pointer !important;
	transition: background .15s ease, transform .05s ease !important;
}
.cwginstock-subscribe-form .cwgstock_button:hover,
.cwginstock-subscribe-form .cwgstock_button:focus {
	background: #d9ad0e !important;
	color: #1e1e1e !important;
}
.cwginstock-subscribe-form .cwgstock_button:active {
	transform: translateY(1px) !important;
}

/* AJAX success / error message area. */
.cwginstock-subscribe-form .cwgstock_output {
	margin-top: 10px !important;
	font-family: 'Karla', sans-serif !important;

	line-height: 1.5 !important;
}

/* ----------------------------------------------------------------------------
 * Wide layouts (desktop): once the form has room, put name + email side by side
 * and let them use the full column width. The button stays full-width below.
 * Uses a container query (keyed to the form's own width via container-type above)
 * so it works whether the product summary is one or two columns. Falls back to
 * the stacked layout on older browsers.
 * --------------------------------------------------------------------------*/
@container (min-width: 440px) {
	/* The first form-group holds the (optional) subtitle + name + email. */
	.cwginstock-subscribe-form .form-group:has(> input.cwgstock_email) {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
		margin: 0 0 10px !important;
	}
	.cwginstock-subscribe-form .form-group:has(> input.cwgstock_email) > .cwg-sub {
		flex: 1 1 100% !important;   /* subtitle spans the full row */
		margin: 0 !important;
	}
	.cwginstock-subscribe-form .form-group:has(> input.cwgstock_email) > input.cwgstock_name,
	.cwginstock-subscribe-form .form-group:has(> input.cwgstock_email) > input.cwgstock_email {
		flex: 1 1 calc(50% - 5px) !important;   /* two columns, 10px gap */
		min-width: 0 !important;
		margin: 0 !important;
	}
}