/**
 * Contact Form — Styles
 * Matches the "Refined Utility" design language used by Split Cost and Rate Comparison.
 *
 * SOURCE file: production loads the generated tools/contact-form.min.css and
 * SCRIPT_DEBUG loads tools/contact-form.debug.css (see scripts/css-manifest.js).
 * Edit this file, then `npm run build`; never hand-edit the artifacts.
 */

/* --- Isolation reset (ckit#258) ---
   MUST stay the first rule: later same-specificity rules win by source
   order. The contract (roots + declarations) lives in scripts/css-manifest.js;
   the build arms these selectors and verify-css-build checks them exactly.
   Blend-in module: the only font-family in the sheet is `inherit`; the
   palette is the sheet's own (--hrck-cf-* tokens below). font-family:inherit
   in the decls also puts the form controls on the site font after the
   revert (form controls do not inherit font by UA default). Two disjoint
   subtrees, one root each: the trigger wrapper (orchestrator stack item or
   shortcode) and the wp_footer modal. The :where() svg exclusion keeps the
   revert off inline SVG internals (fill/stroke would go black). */
.hrck-contact-trigger:not(#\9):not(#\9),
.hrck-contact-trigger:not(#\9):not(#\9)::before,
.hrck-contact-trigger:not(#\9):not(#\9)::after,
.hrck-contact-trigger:not(#\9):not(#\9) *:where(:not(svg, svg *)),
.hrck-contact-trigger:not(#\9):not(#\9) *:where(:not(svg, svg *))::before,
.hrck-contact-trigger:not(#\9):not(#\9) *:where(:not(svg, svg *))::after,
.hrck-cf-modal:not(#\9):not(#\9),
.hrck-cf-modal:not(#\9):not(#\9)::before,
.hrck-cf-modal:not(#\9):not(#\9)::after,
.hrck-cf-modal:not(#\9):not(#\9) *:where(:not(svg, svg *)),
.hrck-cf-modal:not(#\9):not(#\9) *:where(:not(svg, svg *))::before,
.hrck-cf-modal:not(#\9):not(#\9) *:where(:not(svg, svg *))::after {
	all: revert;
	box-sizing: border-box;
	color: inherit;
	font-family: inherit;
}

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
	--hrck-cf-accent: #334155;
	--hrck-cf-accent-hover: #1e293b;
	--hrck-cf-text: #1e293b;
	--hrck-cf-label: #64748b;
	--hrck-cf-border: #e2e8f0;
	--hrck-cf-error: #ef4444;
	--hrck-cf-success: #22c55e;
	--hrck-cf-bg: #ffffff;
	--hrck-cf-field-bg: #f8fafc;
}

/* ==========================================================================
   2. Trigger Button
   ========================================================================== */

.hrck-contact-trigger--desktop:not(#\9):not(#\9) {
	margin-top: 12px;
	margin-bottom: 20px;
}

.hrck-cf-trigger-btn:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 12px 20px;
	border: 2px solid var(--hrck-cf-accent);
	border-radius: 8px;
	background: transparent;
	color: var(--hrck-cf-accent);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	font-family: inherit;
	line-height: 1.4;
	box-sizing: border-box;
}

.hrck-cf-trigger-btn:hover:not(#\9):not(#\9) {
	background: rgba(51, 65, 85, 0.06);
}

.hrck-cf-trigger-btn:active:not(#\9):not(#\9) {
	background: rgba(51, 65, 85, 0.12);
}

.hrck-cf-trigger-label:not(#\9):not(#\9) {
	flex: 1;
	text-align: left;
}

.hrck-cf-trigger-icon:not(#\9):not(#\9) {
	flex-shrink: 0;
}

.hrck-cf-trigger-chevron:not(#\9):not(#\9) {
	flex-shrink: 0;
	opacity: 0.5;
}

/* Context visibility */
.hrck-contact-trigger--mobile-only:not(#\9):not(#\9) { display: none; }

@media (max-width: 959px) {
	.hrck-contact-trigger--desktop:not(#\9):not(#\9) { display: none; }
	.hrck-contact-trigger--mobile-only:not(#\9):not(#\9) { display: block; }
	.hrck-contact-trigger--desktop-only:not(#\9):not(#\9) { display: none; }
}

@media (min-width: 960px) {
	.hrck-contact-trigger--mobile-only:not(#\9):not(#\9) { display: none; }
}

/* ==========================================================================
   3. Modal Overlay (class-driven show/hide, matches Split Cost pattern)
   ========================================================================== */

.hrck-cf-modal:not(#\9):not(#\9) {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	-webkit-overflow-scrolling: touch;
}

.hrck-cf-modal--open:not(#\9):not(#\9) {
	display: flex;
}

/* Backdrop */
.hrck-cf-modal-backdrop:not(#\9):not(#\9) {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}

@media (min-width: 960px) {
	.hrck-cf-modal-backdrop:not(#\9):not(#\9) {
		background: rgba(0, 0, 0, 0.2);
	}
}

.hrck-cf-modal--open:not(#\9):not(#\9) .hrck-cf-modal-backdrop {
	opacity: 1;
}

/* Content */
.hrck-cf-modal-content:not(#\9):not(#\9) {
	position: relative;
	width: 100%;
	max-width: 415px;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--hrck-cf-bg);
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	padding: 20px;
	z-index: 1;
	transform: scale(0.9);
	opacity: 0;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.hrck-cf-modal--open:not(#\9):not(#\9) .hrck-cf-modal-content {
	transform: scale(1);
	opacity: 1;
}

@starting-style {
	.hrck-cf-modal--open:not(#\9):not(#\9) .hrck-cf-modal-backdrop {
		opacity: 0;
	}
	.hrck-cf-modal--open:not(#\9):not(#\9) .hrck-cf-modal-content {
		transform: scale(0.9);
		opacity: 0;
	}
}

.hrck-cf-modal-header:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

.hrck-cf-modal-title:not(#\9):not(#\9) {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--hrck-cf-text);
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.35;
	padding-right: 32px;
}

.hrck-cf-modal-subtext:not(#\9):not(#\9) {
	margin: 6px 0 16px;
	font-size: 13px;
	color: var(--hrck-cf-label);
	line-height: 1.5;
}

.hrck-cf-modal-close:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--hrck-cf-label);
	cursor: pointer;
	transition: background-color 0.15s;
}

.hrck-cf-modal-close:hover:not(#\9):not(#\9) {
	background: var(--hrck-cf-field-bg);
	color: var(--hrck-cf-text);
}

.hrck-cf-property-name:not(#\9):not(#\9) {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--hrck-cf-label);
}

/* ==========================================================================
   4. Form Fields
   ========================================================================== */

.hrck-cf-field:not(#\9):not(#\9) {
	margin-bottom: 14px;
}

.hrck-cf-field:not(#\9):not(#\9) label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--hrck-cf-text);
}

.hrck-cf-required:not(#\9):not(#\9) {
	color: var(--hrck-cf-error);
}

.hrck-cf-field:not(#\9):not(#\9) input,
.hrck-cf-field:not(#\9):not(#\9) textarea {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid var(--hrck-cf-border);
	border-radius: 6px;
	background: var(--hrck-cf-field-bg);
	font-size: 13px;
	color: var(--hrck-cf-text);
	transition: border-color 0.15s;
	box-sizing: border-box;
}

.hrck-cf-field:not(#\9):not(#\9) input:focus,
.hrck-cf-field:not(#\9):not(#\9) textarea:focus {
	outline: none;
	border-color: var(--hrck-cf-accent);
}

.hrck-cf-field:not(#\9):not(#\9) textarea {
	resize: vertical;
	min-height: 60px;
}

/* Dates + Guests row — all three fields on one line on desktop */
.hrck-cf-field--dates-row:not(#\9):not(#\9) {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.hrck-cf-date-col:not(#\9):not(#\9) {
	flex: 1;
	min-width: 100px;
}

/* Guests row: Adults / Children / Pets */
.hrck-cf-field--guests-row:not(#\9):not(#\9) {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.hrck-cf-guest-col:not(#\9):not(#\9) {
	flex: 1;
	min-width: 70px;
}

@media (max-width: 399px) {
	.hrck-cf-field--guests-row:not(#\9):not(#\9) {
		flex-direction: column;
	}
}

.hrck-cf-error:not(#\9):not(#\9) {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--hrck-cf-error);
	min-height: 0;
}

.hrck-cf-error:empty:not(#\9):not(#\9) {
	display: none;
}

/* Error state */
.hrck-cf-field--error:not(#\9):not(#\9) input,
.hrck-cf-field--error:not(#\9):not(#\9) textarea {
	border-color: var(--hrck-cf-error);
}

/* ==========================================================================
   5. Submit Button
   ========================================================================== */

.hrck-cf-submit-btn:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 8px;
	background: var(--hrck-cf-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s;
	margin-top: 8px;
}

.hrck-cf-submit-btn:hover:not(#\9):not(#\9) {
	background: var(--hrck-cf-accent-hover);
}

.hrck-cf-submit-btn:disabled:not(#\9):not(#\9) {
	opacity: 0.6;
	cursor: not-allowed;
}

.hrck-cf-submit-spinner:not(#\9):not(#\9) {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: hrck-cf-spin 0.6s linear infinite;
}

@keyframes hrck-cf-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   6. Confirmation + Progress Bar
   ========================================================================== */

.hrck-cf-confirmation:not(#\9):not(#\9) {
	text-align: center;
	padding: 32px 16px;
}

.hrck-cf-check-icon:not(#\9):not(#\9) {
	color: var(--hrck-cf-success);
	margin-bottom: 12px;
}

.hrck-cf-confirm-text:not(#\9):not(#\9) {
	font-size: 15px;
	color: var(--hrck-cf-text);
	margin: 0 0 24px;
}

.hrck-cf-progress-bar:not(#\9):not(#\9) {
	width: 100%;
	height: 3px;
	background: var(--hrck-cf-border);
	border-radius: 2px;
	overflow: hidden;
}

.hrck-cf-progress-fill:not(#\9):not(#\9) {
	height: 100%;
	width: 100%;
	background: var(--hrck-cf-accent);
	transform-origin: left;
	transition: transform linear;
}

/* ==========================================================================
   Stream 2: Signed-in confirmation
   ========================================================================== */

.hrck-cf-signed-in-confirm:not(#\9):not(#\9) {
	font-size: 14px;
	color: #64748b;
	margin: 0;
}
.hrck-cf-signed-in-confirm:not(#\9):not(#\9) strong {
	color: #1e293b;
}