/**
 * Consent form styles.
 *
 * Uses the theme's design tokens where available, with fallbacks so the form
 * still looks right under any theme.
 *
 * @package MyM_Vaccines
 */

.mym-consent {
	--c-primary: var(--mym-primary, #1b5fc1);
	--c-accent: var(--mym-accent, #28bd86);
	--c-navy: var(--mym-navy, #0c122d);
	--c-muted: var(--mym-muted, #575c74);
	--c-border: var(--mym-border, #e2e8f0);
	--c-error: var(--mym-error, #cf2e2e);
	--c-radius: var(--mym-radius, 8px);

	max-width: 900px;
	margin-inline: auto;
	font-family: var(--mym-font-body, inherit);
	color: var(--c-navy);
	line-height: 1.55;
}

/* Sections ---------------------------------------------------------------- */

.mym-consent fieldset {
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	padding: 1.6rem 1.75rem 0.7rem;
	margin: 0 0 1.5rem;
	background: #fff;
}

/*
 * Rendered full-width so the accent underline spans the section. display:block
 * on a legend is well supported now; where it is not, it simply falls back to a
 * normal inline legend — still legible, just without the underline.
 */
.mym-consent legend {
	display: block;
	width: 100%;
	margin-bottom: 1.4rem;
	padding-bottom: 0.7rem;
	font-family: var(--mym-font-heading, inherit);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--c-navy);
	border-bottom: 2px solid var(--c-accent);
}

/* Field grid -------------------------------------------------------------- */

.mym-grid-fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
}

.mym-consent .mym-col-1 { grid-column: span 2; }
.mym-consent .mym-col-2 { grid-column: span 3; }
.mym-consent .mym-col-3 { grid-column: span 4; }
.mym-consent .mym-col-4 { grid-column: span 4; }
.mym-consent .mym-col-6 { grid-column: span 6; }

@media (max-width: 782px) {
	.mym-consent .mym-col-1,
	.mym-consent .mym-col-2,
	.mym-consent .mym-col-3,
	.mym-consent .mym-col-4 { grid-column: span 6; }
}

@media (max-width: 520px) {
	.mym-grid-fields { grid-template-columns: 1fr; }
	.mym-consent [class*="mym-col-"] { grid-column: 1 / -1; }
}

.mym-consent .mym-field { margin-bottom: 1.15rem; }

.mym-consent label,
.mym-consent .mym-label {
	display: block;
	font-weight: 600;
	font-size: .875rem;
	letter-spacing: .01em;
	color: var(--c-navy);
	margin-bottom: .4rem;
}

.mym-consent .required { color: var(--c-error); }

.mym-consent input[type="text"],
.mym-consent input[type="tel"],
.mym-consent input[type="date"],
.mym-consent input[type="number"],
.mym-consent input[type="email"],
.mym-consent select,
.mym-consent textarea {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	background: #fff;
	font-family: inherit;
	font-size: 1rem;
	color: var(--c-navy);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.mym-consent input::placeholder,
.mym-consent textarea::placeholder { color: #9aa1b3; }

.mym-consent input:focus,
.mym-consent select:focus,
.mym-consent textarea:focus {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(27, 95, 193, .12);
	outline: none;
}

.mym-consent input[readonly] {
	background: #f8fafc;
	color: var(--c-muted);
}

.mym-consent [aria-invalid="true"] { border-color: var(--c-error); }

.mym-consent .mym-field__hint {
	display: block;
	font-size: .8rem;
	color: var(--c-muted);
	margin-top: .3rem;
	font-weight: 400;
}

.mym-consent .mym-field__error {
	display: block;
	font-size: .8rem;
	color: var(--c-error);
	font-weight: 700;
	margin-top: .3rem;
}

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

.mym-consent .mym-choice-group {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.25rem;
}

.mym-consent .mym-choice {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 400;
	font-size: .95rem;
	margin: 0;
	cursor: pointer;
}

.mym-consent .mym-choice input {
	width: auto;
	margin: 0;
	accent-color: var(--c-primary);
}

/* Screening questions ----------------------------------------------------- */

.mym-question {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--c-border);
}

.mym-question:last-child { border-bottom: 0; }

.mym-question__text {
	flex: 1 1 min(420px, 100%);
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--c-navy);
}

.mym-question .mym-choice-group { flex: 0 0 auto; }

.mym-question .mym-field__error,
.mym-question .mym-conditional { flex: 1 0 100%; }

/* Indented follow-up questions (the 12 / 5 age gates). */
.mym-question--followup {
	padding-left: 1.5rem;
	border-left: 3px solid var(--c-border);
}

.mym-conditional {
	margin-top: .75rem;
	padding: 1rem;
	background: var(--mym-bg-tint, #f7fdfb);
	border-radius: var(--c-radius);
}

.mym-conditional[hidden] { display: none; }

/* Consent statement ------------------------------------------------------- */

.mym-consent-statement {
	background: var(--mym-bg-tint, #f7fdfb);
	border-left: 4px solid var(--c-primary);
	border-radius: 0 var(--c-radius) var(--c-radius) 0;
	padding: 1.1rem 1.25rem;
	margin-bottom: 1.25rem;
	font-size: .9rem;
	line-height: 1.6;
}

.mym-consent-statement p:last-child { margin-bottom: 0; }

.mym-consent-statement__warning {
	color: var(--c-error);
	font-weight: 700;
	text-transform: uppercase;
	font-size: .85rem;
}

/* Signature --------------------------------------------------------------- */

.mym-signature {
	border: 2px dashed var(--c-border);
	border-radius: var(--c-radius);
	background: #fff;
	touch-action: none;
}

.mym-signature canvas {
	display: block;
	width: 100%;
	height: 180px;
	cursor: crosshair;
	border-radius: var(--c-radius) var(--c-radius) 0 0;
}

.mym-signature__actions {
	display: flex;
	justify-content: flex-end;
	padding: .5rem;
	border-top: 1px solid var(--c-border);
}

.mym-btn--sm {
	padding: .45rem .9rem !important;
	font-size: .75rem !important;
}

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

.mym-consent__submit {
	text-align: center;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--c-border);
}

/* Notices ----------------------------------------------------------------- */

.mym-notice {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--c-primary);
	border-radius: var(--c-radius);
	background: #f8fafc;
	margin-bottom: 1.5rem;
}

.mym-notice--error {
	border-left-color: var(--c-error);
	background: rgba(207, 46, 46, .05);
}

.mym-notice--warning {
	border-left-color: var(--mym-warning, #fcb900);
	background: rgba(252, 185, 0, .07);
}

.mym-notice p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------
 * Booking bar — the fixed facility + date, shown above the form
 * ----------------------------------------------------------------- */

.mym-booking {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	overflow: hidden;
	margin-bottom: 1.75rem;
	background: var(--mym-border, #e2e8f0);
	border: 1px solid var(--mym-accent, #28bd86);
	border-radius: var(--mym-radius, 8px);
}

.mym-booking__item {
	flex: 1 1 220px;
	padding: 0.85rem 1.15rem;
	background: var(--mym-bg-tint, #f7fdfb);
}

.mym-booking__label {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mym-accent, #28bd86);
}

.mym-booking__value {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--mym-navy, #0c122d);
}

/* --------------------------------------------------------------------
 * Standalone message — shown instead of the form when there is no valid,
 * upcoming booking (bad link, or an expired date)
 * ----------------------------------------------------------------- */

.mym-consent-message {
	max-width: 640px;
	margin: 1.5rem auto;
	padding: 2rem 2.25rem;
	text-align: center;
	background: #fff;
	border: 1px solid var(--mym-border, #e2e8f0);
	border-top: 4px solid var(--mym-primary, #1b5fc1);
	border-radius: var(--mym-radius, 8px);
}

.mym-consent-message--expired {
	border-top-color: var(--mym-error, #cf2e2e);
}

.mym-consent-message h2 {
	margin: 0 0 0.6rem;
	font-size: 1.35rem;
	color: var(--mym-navy, #0c122d);
}

.mym-consent-message p {
	margin: 0 0 0.75rem;
	color: var(--mym-muted, #575c74);
	line-height: 1.6;
}

.mym-consent-message p:last-child { margin-bottom: 0; }

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

.mym-confirmation {
	max-width: 640px;
	margin: 1.5rem auto;
	padding: 2.25rem;
	text-align: center;
	background: #fff;
	border: 1px solid var(--mym-border, #e2e8f0);
	border-top: 4px solid var(--mym-accent, #28bd86);
	border-radius: var(--mym-radius, 8px);
	font-family: var(--mym-font-body, inherit);
	color: var(--mym-navy, #0c122d);
}

.mym-confirmation__mark {
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem;
	font-size: 30px;
	line-height: 56px;
	color: #fff;
	background: var(--mym-accent, #28bd86);
	border-radius: 50%;
}

.mym-confirmation__title {
	margin: 0 0 0.5rem;
	font-family: var(--mym-font-heading, inherit);
	font-size: 1.4rem;
	color: var(--mym-navy, #0c122d);
}

.mym-confirmation__lead {
	margin: 0 0 1.5rem;
	color: var(--mym-muted, #575c74);
}

.mym-confirmation__table {
	width: 100%;
	margin: 0 auto 1.5rem;
	border-collapse: collapse;
	text-align: left;
}

.mym-confirmation__table th,
.mym-confirmation__table td {
	padding: 0.7rem 0.5rem;
	border-bottom: 1px solid var(--mym-border, #e2e8f0);
	vertical-align: top;
}

.mym-confirmation__table th {
	width: 40%;
	font-weight: 600;
	color: var(--mym-muted, #575c74);
	white-space: nowrap;
}

.mym-confirmation__table td {
	font-weight: 600;
	color: var(--mym-navy, #0c122d);
	word-break: break-word;
}

.mym-consent-blank {
	margin: 0 0 1rem;
	text-align: right;
	font-size: .9rem;
}

.mym-consent-blank a {
	color: var(--mym-primary, #1b5fc1);
	text-decoration: underline;
}

.mym-confirmation__actions {
	margin: 24px 0 8px;
	text-align: center;
}

.mym-confirmation__note {
	margin: 0;
	font-size: 0.9rem;
	color: var(--mym-muted, #575c74);
	line-height: 1.6;
}