/**
 * FormForge modern theme.
 *
 * Layered on top of form.css rather than replacing it, and scoped entirely
 * under .ff-theme--modern. The classic theme stays the default fallback, so a
 * site that dislikes this can switch back with one setting and nothing else
 * changes.
 *
 * Every custom control here sits on top of a real native input that still holds
 * the value and still submits. The custom layer is presentation only; if its
 * JavaScript fails to run, the native control is simply revealed and the form
 * keeps working.
 */

.ff-theme--modern {
	--ff-radius: 10px;
	--ff-gap: 1.4rem;
	--ff-border: #d8dee7;
	--ff-border-focus: #0B7396;
	--ff-text: #16202c;
	--ff-muted: #64748b;
	--ff-surface: #ffffff;
	--ff-surface-alt: #f7f9fc;
	--ff-error: #c22b2b;
	--ff-ring: rgba(11, 115, 150, 0.16);
	--ff-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	--ff-shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.14);
}

.ff-theme--modern .ff-label,
.ff-theme--modern .ff-legend {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin-bottom: 0.4rem;
}

.ff-theme--modern .ff-input {
	padding: 0.8rem 0.95rem;
	border-radius: var(--ff-radius);
	border: 1.5px solid var(--ff-border);
	background: var(--ff-surface);
	box-shadow: var(--ff-shadow);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ff-theme--modern .ff-input::placeholder { color: #9aa6b6; }

.ff-theme--modern .ff-input:hover:not([disabled]) { border-color: #b9c4d2; }

.ff-theme--modern .ff-input:focus,
.ff-theme--modern .ff-input:focus-visible {
	border-color: var(--ff-border-focus);
	box-shadow: 0 0 0 4px var(--ff-ring);
	outline: none;
}

/* Focus must remain visible for keyboard users even though the ring above is
   decorative; forced-colors mode strips box-shadow entirely. */
@media (forced-colors: active) {
	.ff-theme--modern .ff-input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

.ff-theme--modern .ff-button {
	border-radius: var(--ff-radius);
	padding: 0.85rem 1.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
	transition: transform 0.12s ease, filter 0.15s ease;
}

.ff-theme--modern .ff-button:hover:not([disabled]) { filter: brightness(1.06); }
.ff-theme--modern .ff-button:active:not([disabled]) { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
	.ff-theme--modern .ff-button { transition: none; }
	.ff-theme--modern .ff-button:active:not([disabled]) { transform: none; }
}

.ff-theme--modern .ff-description { font-size: 0.8125rem; margin-bottom: 0.5rem; }
.ff-theme--modern .ff-error { font-size: 0.8125rem; }

.ff-theme--modern .ff-errors {
	border-radius: var(--ff-radius);
	background: #fef4f4;
	border-width: 1.5px;
}

/* --- Choices ---------------------------------------------------------- */

.ff-theme--modern .ff-choice {
	border: 1.5px solid var(--ff-border);
	border-radius: var(--ff-radius);
	padding: 0.7rem 0.9rem;
	background: var(--ff-surface);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.ff-theme--modern .ff-choice:hover { border-color: #b9c4d2; }
.ff-theme--modern .ff-choice:has(input:checked) { border-color: var(--ff-border-focus); background: #f2f9fc; }
.ff-theme--modern .ff-choice label { cursor: pointer; flex: 1; }

/* --- Enhanced controls ------------------------------------------------ */

/*
 * The native control is hidden from sight but never from the accessibility
 * tree until the custom control is actually in place. .is-enhanced is added by
 * JavaScript, so without JavaScript the native control simply stays visible.
 */
.ff-theme--modern .ff-native.is-enhanced {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ff-combo { position: relative; }

.ff-combo__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	padding: 0.8rem 0.95rem;
	border: 1.5px solid var(--ff-border);
	border-radius: var(--ff-radius);
	background: var(--ff-surface);
	box-shadow: var(--ff-shadow);
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ff-combo__button:hover { border-color: #b9c4d2; }

.ff-combo__button[aria-expanded="true"],
.ff-combo__button:focus-visible {
	border-color: var(--ff-border-focus);
	box-shadow: 0 0 0 4px var(--ff-ring);
	outline: none;
}

.ff-combo__button.is-placeholder { color: #9aa6b6; }

.ff-combo__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ff-combo__caret {
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--ff-muted);
	border-bottom: 2px solid var(--ff-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.15s ease;
}

.ff-combo__button[aria-expanded="true"] .ff-combo__caret {
	transform: rotate(-135deg) translate(-3px, -3px);
}

.ff-pop {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--ff-surface);
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	box-shadow: var(--ff-shadow-pop);
	padding: 6px;
	max-height: 17rem;
	overflow-y: auto;
}

.ff-pop[hidden] { display: none; }

.ff-pop__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.7rem;
	border-radius: calc(var(--ff-radius) - 4px);
	cursor: pointer;
	font-size: 0.95rem;
}

.ff-pop__option[aria-selected="true"] { font-weight: 600; color: var(--ff-border-focus); }
.ff-pop__option.is-active { background: var(--ff-surface-alt); }
.ff-pop__option.is-active[aria-selected="true"] { background: #eaf4f8; }

.ff-pop__empty { padding: 0.8rem 0.7rem; color: var(--ff-muted); font-size: 0.9rem; }

/* --- Date picker ------------------------------------------------------ */

.ff-cal {
	width: 20.5rem;
	max-width: calc(100vw - 2rem);
	left: 0;
	right: auto;
	padding: 14px;
}

.ff-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	padding: 0 0 0.9rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid #eef1f5;
}

.ff-cal__title {
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.01em;
	color: var(--ff-text);
}

.ff-cal__nav {
	width: 2.15rem;
	height: 2.15rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ff-border);
	background: var(--ff-surface);
	border-radius: 9px;
	cursor: pointer;
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--ff-muted);
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ff-cal__nav:hover:not([disabled]) {
	border-color: var(--ff-border-focus);
	color: var(--ff-border-focus);
	background: var(--ff-surface-alt);
}

.ff-cal__nav[disabled] { opacity: 0.3; cursor: not-allowed; }

.ff-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

.ff-cal__dow {
	text-align: center;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #9aa6b6;
	padding: 0.3rem 0 0.5rem;
}

.ff-cal__day {
	aspect-ratio: 1;
	border: 0;
	background: transparent;
	border-radius: 10px;
	cursor: pointer;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--ff-text);
	transition: background 0.12s ease, color 0.12s ease;
}

.ff-cal__day:hover:not([disabled]) { background: var(--ff-surface-alt); }

/* Past dates read as unavailable rather than merely faint: they are struck
   through as well as dimmed, so the reason is obvious without colour vision. */
.ff-cal__day[disabled] {
	color: #c8cfd8;
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.ff-cal__day.is-today:not([aria-pressed="true"]) {
	box-shadow: inset 0 0 0 1.5px var(--ff-border-focus);
	color: var(--ff-border-focus);
	font-weight: 700;
}

.ff-cal__day[aria-pressed="true"] {
	background: var(--ff-border-focus);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 3px 10px var(--ff-ring);
}

.ff-cal__day:focus-visible { outline: 2px solid var(--ff-border-focus); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
	.ff-cal__day, .ff-cal__nav { transition: none; }
}

/* --- Time picker ------------------------------------------------------ */

.ff-times { max-height: 15rem; }
.ff-times .ff-pop__option { justify-content: center; }

/* --- Phone ------------------------------------------------------------ */

.ff-theme--modern .ff-phone { gap: 0; }

/* The trigger is sized by its contents, not by a fixed width: a flag and a
   dialling code need very little room, and every pixel it does not take is a
   pixel the number field gets. The country name lives in the menu, where there
   is space for it. */
.ff-theme--modern .ff-phone .ff-combo { flex: 0 0 auto; width: auto; }

.ff-theme--modern .ff-phone .ff-combo__button {
	padding-left: 0.65rem;
	padding-right: 0.5rem;
	gap: 0.3rem;
	white-space: nowrap;
}

.ff-theme--modern .ff-phone .ff-combo__value {
	font-variant-numeric: tabular-nums;
	overflow: visible;
	text-overflow: clip;
}

.ff-theme--modern .ff-phone .ff-combo__caret { width: 0.5rem; height: 0.5rem; }

.ff-theme--modern .ff-phone .ff-combo__button,
.ff-theme--modern .ff-phone__code {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.ff-theme--modern .ff-phone__number {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left-width: 0;
}

.ff-theme--modern .ff-phone__number:focus { border-left-width: 1.5px; margin-left: -1.5px; }

.ff-theme--modern .ff-phone .ff-pop { width: 15rem; right: auto; }

/* On a narrow screen the trigger tightens rather than dropping to its own row:
   a phone number is one answer and should look like one field. */
@media (max-width: 420px) {
	.ff-theme--modern .ff-phone .ff-combo__button { padding-left: 0.5rem; padding-right: 0.35rem; gap: 0.2rem; }
	.ff-theme--modern .ff-phone__number { min-width: 6rem; }
}

/* --- Rating ----------------------------------------------------------- */

.ff-theme--modern .ff-rating { gap: 0.4rem; }

.ff-theme--modern .ff-rating label {
	border: 1.5px solid var(--ff-border);
	border-radius: var(--ff-radius);
	padding: 0.5rem 0.9rem;
	cursor: pointer;
	font-size: 0.875rem;
}

.ff-theme--modern .ff-rating input:checked + label {
	border-color: var(--ff-border-focus);
	background: #f2f9fc;
	font-weight: 600;
}

.ff-theme--modern .ff-rating input:focus-visible + label {
	outline: 2px solid var(--ff-border-focus);
	outline-offset: 2px;
}

/* --- Searchable menus -------------------------------------------------- */

.ff-pop__search {
	position: sticky;
	top: -6px;
	background: var(--ff-surface);
	padding: 2px 2px 6px;
	margin: -6px -6px 2px;
	border-bottom: 1px solid #eef1f5;
	z-index: 1;
}

.ff-pop__search-input {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1.5px solid var(--ff-border);
	border-radius: 8px;
	font: inherit;
	font-size: 0.9rem;
	background: var(--ff-surface);
	color: inherit;
}

.ff-pop__search-input:focus-visible {
	outline: none;
	border-color: var(--ff-border-focus);
	box-shadow: 0 0 0 3px var(--ff-ring);
}

.ff-pop--country { width: 20rem; max-width: calc(100vw - 2rem); }
.ff-pop--country .ff-pop__option { white-space: nowrap; }

/* Native selects in the classic theme still need the flag to be legible. */
.ff-phone__code option { font-size: 1rem; }

/* --- Combined slot ------------------------------------------------------ */

.ff-theme--modern .ff-datetime { gap: 0.6rem; }

/* The date needs more room than the time, and below the breakpoint they stack
   rather than squeezing into two unreadable columns. */
.ff-theme--modern .ff-datetime__part:first-child { flex: 1.4 1 11rem; }
.ff-theme--modern .ff-datetime__part:last-child { flex: 1 1 8rem; }

.ff-theme--modern .ff-sublabel {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #8fa0b3;
}

.ff-theme--modern .ff-field--datetime .ff-fieldset { border: 0; }

/* --- Error state -------------------------------------------------------- */

.ff-theme--modern .ff-field.has-error .ff-input,
.ff-theme--modern .ff-field.has-error .ff-combo__button {
	box-shadow: 0 0 0 3px rgba(194, 43, 43, 0.12);
}

.ff-theme--modern .ff-field.has-error .ff-input:focus,
.ff-theme--modern .ff-field.has-error .ff-combo__button:focus-visible {
	box-shadow: 0 0 0 4px rgba(194, 43, 43, 0.2);
}

/* The country trigger is too narrow to carry the glyph as well as the caret,
   so it shows the border treatment only. */
.ff-theme--modern .ff-phone .ff-combo__button { background-image: none !important; padding-right: 0.5rem !important; }

/* --- Confirmation ------------------------------------------------------- */

.ff-theme--modern .ff-status--success {
	background: var(--ff-success-bg, #f3f9fb);
	border-color: var(--ff-success-border, var(--ff-border-focus));
	border-radius: var(--ff-success-radius, 12px);
	box-shadow: var(--ff-shadow);
}