/*
   AWWO® Forms - Frontend
   Base structural styling for [awwo_form] — per-form colors/radii/weight
   are injected inline by cw_awwo_nt_forms_render() (cw-awwo-nt-forms-frontend.php)
   right above the markup, so this file only ever covers what every form
   shares regardless of its own Styling box values.
   @package cw-awwo-nt
*/

/**
 * © AWWO® (Advertise What We Offer)
 * Unauthorized use, copying, modification, distribution, or reverse engineering is strictly prohibited without prior written authorization from CITIPRO WORLD™.
 * @license LicenseRef-Proprietary
 */

.cw-awwo-nt-forms-form {
	box-sizing: border-box;
}

.cw-awwo-nt-forms-form .cw-awwo-nt-forms-field {
	max-width: 100%;
}

.cw-awwo-nt-forms-form label {
	display: block;
	font-size: 14px;
}

.cw-awwo-nt-forms-field-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.cw-awwo-nt-forms-field-label-row label {
	flex: 1 1 auto;
}

/* Fixed warning red, independent of the Styling box's own label color —
   deliberately not part of the per-form <style> block
   (cw_awwo_nt_forms_render(), cw-awwo-nt-forms-frontend.php) since this
   color is never meant to be themeable: it's the same "something's
   required of this input" signal regardless of a form's own palette.
   Font-weight is NOT fixed here, though — that follows this form's own
   label weight (see that same per-form <style> block) so the hint reads
   as part of the label row rather than a visually distinct caption.
   display:inline-block + the animation below is what makes the fade-in-
   from-the-right actually play every time cw-awwo-nt-forms-frontend.js
   toggles this from display:none to shown — a CSS animation (unlike a
   transition) runs from its own first frame the moment an element stops
   being display:none, so no JS-driven class juggling is needed to
   replay it on every show. */
.cw-awwo-nt-forms-field-hint {
	display: inline-block;
	color: #DB4437 !important;
	animation: cw-awwo-nt-forms-hint-in .25s ease-out;
}

@keyframes cw-awwo-nt-forms-hint-in {
	from {
		opacity: 0;
		transform: translateX(8px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.cw-awwo-nt-forms-char-counter {
	font-size: 12px;
	color: #8c8f94;
	white-space: nowrap;
	flex: 0 0 auto;
}

.cw-awwo-nt-forms-char-counter-invalid {
	color: #DB4437;
}

.cw-awwo-nt-forms-form textarea {
	resize: vertical;
}

.cw-awwo-nt-forms-message {
	flex: 0 0 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 14px;
}

.cw-awwo-nt-forms-message-success {
	background: #edfaef;
	color: #1d602c;
	border: 1px solid #b8e6c1;
}

.cw-awwo-nt-forms-message-error {
	background: #fcf0f1;
	color: #8a1f24;
	border: 1px solid #f1c6c9;
}

.cw-awwo-nt-forms-submit {
	border: none;
	appearance: none;
}

.cw-awwo-nt-forms-submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* Phone field — always an equal 50/50 split between the country-code
   select and the number input, regardless of the field's OWN overall
   width (50%, 100%, whatever Grid Columns/its own width% setting
   gives it) — same idea the existing International Phone Numbers
   WooCommerce feature's own .cw-nt-phone-combined-code/-number pair
   uses (cw-awwo-nt-front.css), just namespaced for Forms. No gap
   between the two columns — they're meant to read as one joined
   control (like the WP color picker's input+swatch pair), not two
   separate fields side by side; the unified border/background/box-shadow
   (on the row itself, stripped from both children entirely) comes from
   cw_awwo_nt_forms_render()'s own per-form <style> block
   (cw-awwo-nt-forms-phone-row/-country/-number rules), not from here. */
.cw-awwo-nt-forms-phone-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	width: 100%;
}

.cw-awwo-nt-forms-phone-col {
	flex: 1 1 50%;
	min-width: 0;
}

.cw-awwo-nt-forms-phone-col select,
.cw-awwo-nt-forms-phone-col input {
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.cw-awwo-nt-forms-form .cw-awwo-nt-forms-field {
		flex-basis: 100% !important;
	}

	.cw-awwo-nt-forms-phone-col {
		flex-basis: 100%;
	}
}