/**
 * Consultation request form styling (Phase F8: restyled to the approved
 * Figma consultation-form presentation). Base field appearance (border,
 * radius, box-sizing, focus outline) is still handled globally by the
 * oasis-it-technologies theme's blocks.css baseline for native form
 * fields -- this file layers the Figma-specific spacing/typography on
 * top of that, plus this form's own layout (rows, submit button,
 * notices, honeypot, success state) that the theme has no reason to
 * know about. Every color/spacing value falls back to a literal value
 * (matching the approved Figma tokens) in case this plugin is ever
 * active without the Oasis theme.
 */

.oasis-requests-form-wrap {
	margin: 0 auto;
	max-width: 680px;
}

.oasis-requests-notice {
	background: var( --wp--preset--color--gray-100, #f1f3f6 );
	border: 1px solid var( --wp--preset--color--gray-300, #d8dee6 );
	border-inline-start: 4px solid #c0392b;
	border-radius: 6px;
	margin-bottom: var( --wp--preset--spacing--40, 1.5rem );
	padding: var( --wp--preset--spacing--30, 1rem );
}

.oasis-requests-notice p {
	margin-top: 0;
}

.oasis-requests-notice ul {
	margin-bottom: 0;
}

/* Approved Figma form layout: a single vertical flow of rows/fields, gap-spaced rather than margin-spaced so a row and a standalone field line up the same way. */
.oasis-requests-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Two-column desktop rows (Full Name/Company, Job Title/Email, Phone/Preferred Contact, Company Size/Subject) -- matches Figma's .form-row exactly, including its collapse breakpoint. */
.oasis-requests-row {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 540px) {
	.oasis-requests-row {
		grid-template-columns: 1fr;
	}
}

.oasis-requests-field {
	margin: 0;
}

.oasis-requests-field label {
	display: block;
	font-size: 13px;
	margin-bottom: 5px;
}

.oasis-requests-field input,
.oasis-requests-field select,
.oasis-requests-field textarea {
	width: 100%;
}

/*
 * Figma-exact padding/font-size for this form's fields specifically
 * (border/radius/box-sizing/background/color already come from the
 * theme's sitewide native-input baseline in blocks.css) -- selector is
 * two classes deep so it wins over that baseline regardless of
 * stylesheet load order, without needing !important.
 */
.oasis-requests-form .oasis-requests-field input,
.oasis-requests-form .oasis-requests-field select,
.oasis-requests-form .oasis-requests-field textarea {
	font-size: 14px;
	padding: 10px 13px;
}

.oasis-requests-form .oasis-requests-field textarea {
	min-height: 115px;
	resize: vertical;
}

/*
 * Soft focus ring layered on top of the theme's existing accessible
 * focus-visible outline (blocks.css, cyan-700, chosen there for WCAG
 * 1.4.11 contrast reasons) -- adds Figma's glow without removing or
 * replacing that outline.
 */
.oasis-requests-form .oasis-requests-field input:focus,
.oasis-requests-form .oasis-requests-field select:focus,
.oasis-requests-form .oasis-requests-field textarea:focus {
	border-color: var( --wp--preset--color--cyan, #00b3d8 );
	box-shadow: 0 0 0 3px rgba( 0, 179, 216, 0.1 );
}

.oasis-requests-field--honeypot {
	height: 1px;
	inset-inline-start: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.oasis-requests-required {
	color: #c0392b;
}

/* Privacy/workflow note, styled as the approved Figma info box; copy is this project's own (see request-form.php) rather than Figma's generic privacy text, since it states the "not a booking request" workflow fact this project requires. */
.oasis-requests-disclaimer {
	background-color: var( --wp--preset--color--background, #f4f7fb );
	border-radius: 7px;
	color: var( --wp--preset--color--gray-700, #4a5568 );
	font-size: 13px;
	line-height: 1.6;
	margin: 0;
	padding: 12px 15px;
}

.oasis-requests-field--submit {
	margin: 0;
}

/*
 * Primary gradient button, matching the approved Figma .btn-grad /
 * is-style-gradient-accent treatment used elsewhere in the theme
 * (hero, page-hero, mission CTAs) -- same gradient direction/colors and
 * navy-on-gradient text for sitewide consistency, rather than Figma's
 * own raw mock (which uses white text on this button specifically).
 */
.oasis-requests-submit {
	background: linear-gradient( 90deg, var( --wp--preset--color--cyan, #00b3d8 ) 0%, var( --wp--preset--color--lime, #7dc420 ) 100% );
	border: none;
	border-radius: var( --wp--custom--border-radius--button-pill, 999px );
	color: var( --wp--preset--color--navy, #1b3a5c );
	cursor: pointer;
	font-family: inherit;
	font-size: 0.969rem;
	font-weight: 700;
	padding: 13px;
	transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s;
	width: 100%;
}

.oasis-requests-submit:hover {
	background: linear-gradient( 90deg, var( --wp--preset--color--lime, #7dc420 ) 0%, var( --wp--preset--color--cyan, #00b3d8 ) 100% );
	box-shadow: 0 6px 20px rgba( 0, 179, 216, 0.28 );
	transform: translateY( -1px );
}

.oasis-requests-success {
	text-align: center;
}

.oasis-requests-success-icon {
	align-items: center;
	background: linear-gradient( 135deg, var( --wp--preset--color--cyan, #00b3d8 ), var( --wp--preset--color--lime, #7dc420 ) );
	border-radius: 50%;
	color: var( --wp--preset--color--white, #fff );
	display: inline-flex;
	height: 70px;
	justify-content: center;
	margin-bottom: var( --wp--preset--spacing--20, 0.5rem );
	width: 70px;
}

.oasis-requests-success h3 {
	color: var( --wp--preset--color--navy, #1b3a5c );
	font-size: 1.625rem;
	font-weight: 800;
}

.oasis-requests-success > p {
	color: var( --wp--preset--color--gray-700, #4a5568 );
	font-size: 15px;
	line-height: 1.75;
	margin-inline: auto;
	max-width: 480px;
}

.oasis-requests-success-next {
	background-color: var( --wp--preset--color--white, #fff );
	border: 1px solid var( --wp--preset--color--gray-300, #d8dee6 );
	border-radius: 10px;
	margin: var( --wp--preset--spacing--40, 1.5rem ) auto;
	max-width: 420px;
	padding: 16px 20px;
	text-align: start;
}

.oasis-requests-success-next-heading {
	color: var( --wp--preset--color--navy, #1b3a5c );
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 10px;
}

.oasis-requests-success-next ol {
	color: var( --wp--preset--color--gray-700, #4a5568 );
	font-size: 13px;
	line-height: 1.6;
	margin: 0;
	padding-inline-start: 1.1em;
}

.oasis-requests-success-next li + li {
	margin-top: 8px;
}

.oasis-requests-reset {
	background-color: var( --wp--preset--color--navy, #1b3a5c );
	border-radius: var( --wp--custom--border-radius--button-rect, 8px );
	color: var( --wp--preset--color--white, #fff );
	display: inline-block;
	font-weight: 600;
	padding: 10px 20px;
	text-decoration: none;
}

.oasis-requests-reset:hover {
	background-color: #132843;
}