/**
 * Shine Native Forms -- shared form styles (registration + bono regalo).
 *
 * BOTH forms carry the .sf-reg-form class on their root: it is the shared
 * styling scope, not a registration-only hook. The voucher form adds
 * .sf-voucher-form for its own handful of rules at the bottom.
 *
 * Design language ported from the proven Music Room forms (the owner's
 * reference, 2026-08-18): every section is its own rounded white card, each
 * headed by a bold title with an ORANGE underline rule; soft 1.5px borders,
 * 10px radii, generous padding, and a full-width gradient submit. Values
 * mirror the-music-room/tailwind/custom/components/booking-form.css, with
 * TMR's teal/amber swapped for Shine's own palette (#03989e / #fca41a).
 *
 * Self-contained ON PURPOSE: the plugin must render correctly under BOTH the
 * current `shine` theme and the future shine-2026 redesign, so nothing here
 * depends on theme classes or theme CSS variables. Fonts inherit from the
 * page so the form always wears the active theme's typography.
 */

.sf-reg-form {
	--snf-accent: #03989e;
	--snf-accent-dark: #026a70;
	--snf-accent-soft: rgba(3, 152, 158, 0.06);
	--snf-orange: #fca41a;
	--snf-orange-deep: #e0820a;
	--snf-ink: #03444a;
	--snf-body: #444444;
	--snf-muted: #666666;
	--snf-border: #d8e2e3;
	--snf-error: #c62828;

	/* A soft panel behind the cards: on Shine's white pages, white cards on
	   white would dissolve into the background. */
	max-width: 56rem;
	margin: 0 auto 3rem;
	padding: 2rem 1.5rem 2.5rem;
	background: #f6f8f8;
	border-radius: 16px;
	color: var(--snf-body);
	font-size: 1rem;
	line-height: 1.5;
}

/* A pass-through container: the SECTIONS are the cards. */
.sf-reg-card {
	background: transparent;
	padding: 0;
}

.sf-reg-form *,
.sf-reg-form *::before,
.sf-reg-form *::after {
	box-sizing: border-box;
}

.sf-reg-form .hidden {
	display: none !important;
}

/* --- Headings & intro --- */

.sf-reg-heading {
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--snf-ink);
	text-align: center;
	margin: 0 0 0.5rem;
}

.sf-reg-intro {
	text-align: center;
	color: var(--snf-muted);
	margin: 0 auto 2rem;
	max-width: 40rem;
}

/* --- Section cards --- */

.sf-reg-form .sf-section {
	background: #ffffff;
	border: 1px solid var(--snf-border);
	border-radius: 16px;
	padding: 2rem;
	margin: 0 0 1.5rem;
	box-shadow: 0 1px 3px rgba(3, 68, 74, 0.08);
}

/* The signature: bold title, orange rule beneath it. */
.sf-reg-form .sf-section__title {
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--snf-ink);
	margin: 0 0 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--snf-orange);
}

.sf-reg-subheading {
	font-size: 1rem !important;
	margin-top: 1.5rem !important;
}

/* --- Fields --- */

.sf-reg-form .sf-field {
	margin: 0 0 1.25rem;
}

.sf-reg-form .sf-field:last-child {
	margin-bottom: 0;
}

.sf-reg-form .sf-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--snf-ink);
	margin: 0 0 0.5rem;
	letter-spacing: 0.01em;
}

.sf-reg-form .sf-label__required {
	color: var(--snf-orange);
	margin-left: 2px;
}

.sf-reg-form .sf-description {
	font-size: 0.875rem;
	color: var(--snf-muted);
	margin: 0 0 0.5rem;
	line-height: 1.5;
}

.sf-reg-form .sf-description--below {
	margin: 0.5rem 0 0;
}

/* --- Inputs --- */

.sf-reg-form .sf-input,
.sf-reg-form .sf-select {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--snf-ink);
	background: #ffffff;
	border: 1.5px solid var(--snf-border);
	border-radius: 10px;
	outline: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.sf-reg-form textarea.sf-input {
	resize: vertical;
	min-height: 5rem;
}

.sf-reg-form .sf-select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2303444a' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}

.sf-reg-form .sf-input::placeholder {
	color: #a0a8ab;
}

.sf-reg-form .sf-input:hover,
.sf-reg-form .sf-select:hover {
	border-color: #b9c9cb;
}

.sf-reg-form .sf-input:focus,
.sf-reg-form .sf-select:focus {
	border-color: var(--snf-accent);
	box-shadow: 0 0 0 3px rgba(3, 152, 158, 0.15);
}

.sf-reg-form .sf-input.error,
.sf-reg-form .sf-select.error {
	border-color: var(--snf-error);
}

.sf-reg-form .sf-input--date {
	max-width: 16rem;
}

/* --- Pills (adult/child, in-person/online) --- */

.sf-reg-form .sf-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.sf-reg-form .sf-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.5rem;
	padding: 0.625rem 1.125rem;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--snf-ink);
	background: #ffffff;
	border: 1.5px solid var(--snf-border);
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
	transition: all 150ms ease;
}

.sf-reg-form .sf-pill:hover {
	border-color: var(--snf-accent);
}

.sf-reg-form .sf-pill.selected {
	background: var(--snf-accent);
	border-color: var(--snf-accent);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(3, 152, 158, 0.3);
}

.sf-reg-form .sf-pill input[type='radio'] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* --- Radio list (payment methods) --- */

.sf-reg-form .sf-radio-list {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.sf-reg-form .sf-radio-option {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	font-size: 0.95rem;
	color: var(--snf-ink);
	border: 1.5px solid var(--snf-border);
	border-radius: 10px;
	cursor: pointer;
	transition: all 150ms ease;
}

.sf-reg-form .sf-radio-option:hover {
	border-color: var(--snf-accent);
}

.sf-reg-form .sf-radio-option.selected {
	border-color: var(--snf-accent);
	background: var(--snf-accent-soft);
}

.sf-reg-form .sf-radio-option input[type='radio'] {
	accent-color: var(--snf-accent);
	margin: 0;
	/* The theme's Jotform-era `.signup_form_shortcode input` rule forces
	   width:100% + a bottom border + padding onto EVERY input; pin the
	   native radio's box so it cannot inherit any of that. */
	width: 1.1rem;
	height: 1.1rem;
	flex: 0 0 auto;
	padding: 0;
	border: none;
}

/* --- Checkboxes --- */

.sf-reg-form .sf-checkbox-wrap {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	cursor: pointer;
}

.sf-reg-form .sf-checkbox {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	accent-color: var(--snf-accent);
	/* Same theme-rule pinning as the radios. */
	padding: 0;
	border: none;
}

.sf-reg-form .sf-checkbox-label {
	font-size: 0.95rem;
	color: var(--snf-ink);
}

/* --- Two-column grid --- */

.sf-reg-form .sf-grid-2col {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1.5rem;
}

@media (min-width: 700px) {
	.sf-reg-form .sf-grid-2col {
		grid-template-columns: 1fr 1fr;
	}

	.sf-reg-form .sf-grid-2col__full {
		grid-column: 1 / -1;
	}
}

/* --- Info boxes, fee box, notes --- */

.sf-reg-form .sf-info-box {
	background: var(--snf-accent-soft);
	border-left: 3px solid var(--snf-orange);
	border-radius: 0 6px 6px 0;
	padding: 1rem;
	font-size: 0.875rem;
	color: var(--snf-body);
	line-height: 1.6;
	margin: 0 0 1rem;
}

.sf-reg-fee {
	font-size: 0.95rem !important;
	font-weight: 600;
	color: var(--snf-ink) !important;
}

.sf-reg-note {
	margin-top: 0.25rem;
}

/* --- Errors --- */

.sf-reg-form .sf-error {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--snf-error);
	font-size: 0.85rem;
	font-weight: 600;
	margin-top: 0.4rem;
}

.sf-reg-submit-error {
	margin-top: 0.75rem;
	font-size: 0.95rem !important;
}

/* --- Submit block --- */

.sf-reg-submit-block {
	margin-top: 0.5rem;
}

.sf-reg-captcha {
	margin: 0 0 1rem;
	min-height: 1px;
}

.sf-reg-form .sf-submit {
	display: block;
	width: 100%;
	padding: 1rem 2rem;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #ffffff;
	background: linear-gradient(
		135deg,
		var(--snf-orange) 0%,
		var(--snf-orange-deep) 100%
	);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(3, 68, 74, 0.1);
	transition: all 150ms ease;
}

.sf-reg-form .sf-submit:hover:not(:disabled) {
	box-shadow: 0 8px 24px rgba(3, 68, 74, 0.12);
	transform: translateY(-1px);
}

.sf-reg-form .sf-submit:disabled {
	background: #cccccc;
	box-shadow: none;
	cursor: not-allowed;
}

/* Honeypot: off-screen, never display:none (bots check for that). */

.sf-reg-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Unavailable / cancelled notices --- */

.sf-reg-unavailable {
	margin: 0 0 1.5rem;
}

.sf-reg-unavailable__title {
	display: block;
	margin: 0 0 0.35rem;
	color: var(--snf-ink, #03444a);
	font-size: 0.95rem;
}

.sf-reg-unavailable__line {
	margin: 0 0 0.35rem;
}

.sf-reg-unavailable__line--alt {
	color: #666666;
	font-size: 0.85rem;
}

/* Self-contained: the cancelled notice mounts OUTSIDE .sf-reg-form, so it
   cannot borrow the scoped tokens or the .sf-info-box styling. */
.sf-reg-cancelled {
	max-width: 56rem;
	margin: 0 auto 1.5rem;
	padding: 1rem;
	background: rgba(3, 152, 158, 0.06);
	border: 1px solid #d8e2e3;
	border-left: 3px solid #fca41a;
	border-radius: 0 6px 6px 0;
	font-size: 0.9rem;
	color: #444444;
}

.sf-reg-notice-dismiss {
	margin-top: 0.75rem;
	background: none;
	border: none;
	color: #666666;
	text-decoration: underline;
	cursor: pointer;
	font-size: 0.85rem;
	padding: 0;
}

/* --- Success / already panels --- */

.sf-reg-success__intro {
	margin: 0 0 0.75rem;
	color: var(--snf-body);
}

.sf-reg-success__note {
	color: var(--snf-muted);
	font-size: 0.9rem;
	margin: 0.5rem 0 0;
}

.sf-reg-success__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 1rem;
	margin: 0 0 1rem;
	background: var(--snf-accent-soft);
	border-left: 3px solid var(--snf-orange);
	border-radius: 0 6px 6px 0;
	font-size: 1rem;
	color: var(--snf-ink);
}

.sf-reg-success__total strong {
	font-size: 1.3rem;
	color: var(--snf-accent-dark);
}

.sf-reg-detail-grid {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
}

.sf-reg-detail-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid #eef2f2;
}

.sf-reg-detail-label {
	color: var(--snf-muted);
}

.sf-reg-detail-value {
	font-weight: 600;
	color: var(--snf-ink);
	word-break: break-all;
}

.sf-reg-contact {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid #eef2f2;
}

/* --- Gift voucher (bono regalo) specifics --- */

.sf-voucher-reference {
	font-size: 1rem !important;
	color: var(--snf-ink, #03444a) !important;
}

.sf-voucher-reference strong {
	font-size: 1.1rem;
	letter-spacing: 0.03em;
	color: var(--snf-accent-dark, #026a70);
}

.sf-voucher-retry-form {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 1rem 0 0;
}

.sf-voucher-retry-form .sf-input {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: #03444a;
	background: #ffffff;
	border: 1.5px solid #d8e2e3;
	border-radius: 10px;
	outline: none;
}

/* Self-contained: this button also renders inside the cancelled notice,
   which mounts OUTSIDE the .sf-reg-form scope. */
.sf-voucher-retry-form__btn {
	display: block;
	width: 100%;
	padding: 0.875rem 1.5rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
	background: linear-gradient(135deg, #fca41a 0%, #e0820a 100%);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(3, 68, 74, 0.1);
	transition: all 150ms ease;
}

.sf-voucher-retry-form__btn:hover:not(:disabled) {
	box-shadow: 0 8px 24px rgba(3, 68, 74, 0.12);
	transform: translateY(-1px);
}

.sf-voucher-retry-form__btn:disabled {
	background: #cccccc;
	box-shadow: none;
	cursor: not-allowed;
}

.sf-voucher-retry-form .sf-error {
	display: flex;
	color: #c62828;
	font-size: 0.85rem;
	font-weight: 600;
}

/* Mounts outside .sf-reg-form, so it carries its own box styling. */
.sf-voucher-cancelled {
	max-width: 56rem;
	margin: 0 auto 1.5rem;
	padding: 1rem;
	background: rgba(3, 152, 158, 0.06);
	border: 1px solid #d8e2e3;
	border-left: 3px solid #fca41a;
	border-radius: 0 6px 6px 0;
	font-size: 0.9rem;
	color: #444444;
}

.sf-voucher-cancelled .sf-reg-unavailable__title {
	display: block;
	margin: 0 0 0.35rem;
	color: #03444a;
}

.sf-voucher-cancelled .sf-reg-unavailable__line {
	margin: 0 0 0.35rem;
}

/* --- Links --- */

.sf-reg-form .sf-reg-link,
.sf-reg-success .sf-reg-link,
.sf-reg-unavailable .sf-reg-link {
	color: var(--snf-accent, #03989e);
	text-decoration: underline;
	font-weight: 600;
}

/* --- Small screens --- */

@media (max-width: 640px) {
	.sf-reg-form {
		padding: 1rem 0.75rem 1.5rem;
		border-radius: 12px;
	}

	.sf-reg-form .sf-section {
		padding: 1.25rem 1rem;
		border-radius: 12px;
	}

	.sf-reg-heading {
		font-size: 1.4rem;
	}
}