/**
 * Scale Model Contest Registration Form — wizard styles.
 *
 * Sizing, spacing, and positioning remain fixed/hardcoded here, same
 * as before. Neutral and brand colors (text, borders, backgrounds)
 * resolve to the active WordPress theme's color management via CSS
 * custom properties — BUT, as of 3.15.0, every fallback is this
 * plugin's own curated default palette (warm neutrals + a deep rust
 * accent), not a generic WordPress grey. A club's theme still wins if
 * it defines matching Global Colors slugs; an unconfigured theme now
 * shows this plugin's intended default look instead of an arbitrary
 * one. Primary/secondary buttons went through the opposite journey —
 * 3.14.2 handed their color entirely to the theme's own Button
 * styling; 3.15.0 takes it back (see the 3.15.0 note below) so a
 * primary action is always visually distinct from a secondary one,
 * regardless of what a club's theme happens to do with plain buttons.
 *
 * Status/semantic colors (validation errors, success confirmations,
 * the "IMPORTANT" legend warning, required-field markers, delete/danger
 * actions) are deliberately left as plain literals: these carry fixed
 * meaning (red = error, green = success) that shouldn't shift with an
 * unrelated brand color change.
 *
 * Variable source: GeneratePress's Global Colors palette, which writes
 * --contrast / --contrast-2 / --contrast-3 / --base / --base-2 /
 * --base-3 / --accent to :root (present with sane defaults even on an
 * untouched install; see https://docs.generatepress.com/article/global-colors-overview/).
 * Any theme that doesn't define these simply falls through to the
 * literal fallback value in each var().
 *
 * @version 3.16.1
 * @since 3.11.0 Removed the --smcr-* CSS custom property design-token
 *               system (and the Appearance admin screen that
 *               controlled it) entirely; every value below is now a
 *               plain literal matching what was previously each
 *               token's default.
 * @since 3.11.1 Added .smcr-totals right-alignment for the Screen 4
 *               fee amounts.
 * @since 3.14.0 Neutral/brand colors (not status colors) converted to
 *               consume the active theme's color management (tested
 *               against GeneratePress Global Colors) via var(), each
 *               with a hardcoded fallback. Typography (font-family)
 *               was already inherited from the theme in this file —
 *               no change needed here. Sizing/spacing/positioning
 *               unchanged.
 * @since 3.14.2 Primary/secondary buttons and the self-service links no
 *               longer set their own background/text/hover colors, so
 *               the theme's own button and link styling applies
 *               (GeneratePress keeps button colors in Customizer >
 *               Colors > Buttons and outputs them as plain CSS on
 *               button selectors, NOT as custom properties, so var()
 *               could never reach them — and this file's class
 *               selectors outranked the theme's element selectors).
 *               Only sizing/shape remain set here. Danger button
 *               unchanged (status color).
 * @since 3.14.4 Decorative card/panel backgrounds (.smcr-soft-notice,
 *               .smcr-entry-choice-card, .smcr-model-row) fall back to
 *               transparent instead of a hardcoded light grey when the
 *               theme has no --base color defined, so an unconfigured
 *               theme never shows an off-palette panel — the existing
 *               border keeps the panel legible either way. Deliberately
 *               NOT applied to .smcr-field inputs (still need a solid
 *               fill to read as fillable fields) or
 *               .smcr-models-summary th (still needs a fallback tint to
 *               stay visually distinct from data rows) — see README.
 * @since 3.14.5 .smcr-header-logo-img corners rounded (10px), applied
 *               equally at both the desktop (150px) and phone (100px)
 *               sizes. Chapter/contest logos are admin-uploaded and
 *               not guaranteed to be square, so this stays a soft
 *               corner rather than a circle — a circle would crop or
 *               distort a non-square logo.
 * @since 3.15.0 Adopted a curated default palette in place of generic
 *               WordPress-grey fallbacks (still overridable via a
 *               club's Global Colors). Also reversed the 3.14.2
 *               decision to leave button colors entirely to the theme:
 *               .smcr-button-primary now gets a solid accent fill so a
 *               primary action is always visually distinct, and
 *               .smcr-button-secondary becomes an outlined/ghost style
 *               instead of matching primary 1:1. .smcr-welcome-
 *               instructions (the "complete in one session" text) is
 *               now a bordered alert card instead of bare paragraph
 *               text. .smcr-header-logo gets a fixed-size bordered
 *               frame (only when a logo image is actually present, via
 *               :has()) so mismatched club-logo aspect ratios/
 *               backgrounds no longer unbalance the header — the image
 *               itself now fits inside via object-fit: contain rather
 *               than being cropped.
 * @since 3.15.1 Minor changes to colors codes in buttons and .smcr-entry-choice-card.
 *               I pointed the main color to come from Theme's
 *               Global Colors.
 *               I got rid of all default colors. Made it all go to Global
 *               colors.
 * @since 3.16.0 Narrow 2-digit age field and the small, theme-inherited
 *               hint beside the Age label.
 * @since 3.16.1 Added .smcr-submit-row-spread: Back/Continue rows on Screens
 *               2 and 3 pin to opposite edges on wide screens and stack
 *               with a much wider gap on phones (fat-finger fix).
 */

/* ==========================================================================
   1. Base wizard container
   ========================================================================== */
.smcr-wizard {
	max-width: 760px;
	margin: 0 auto;
	color: var(--contrast);
	font-size: 1em;
}

/* ==========================================================================
   2. Global notice banner (validation / AJAX errors and confirmations)
   ========================================================================== */
.smcr-global-notice {
	background: #fbeaea;
	border-left: 4px solid #dc3232;
	color: #611a15;
	padding: 12px 16px;
	margin-bottom: 20px;
	border-radius: 4px;
}

.smcr-global-notice ul {
	margin: 0 0 0 18px;
}

/* Generic notice box (used for the success/legend messaging) */
.smcr-notice {
	padding: 12px 16px;
	margin-bottom: 20px;
	border-left: 4px solid var(--contrast-3);
	border-radius: 4px;
}

.smcr-notice-success {
	background: #edfaef;
	border-left-color: #46b450;
	color: #1e4620;
}

/* The "not proof of payment" legend on the summary screen */
.smcr-notice-legend {
	background: #fff8e5;
	border-left-color: #c9a227;
	color: var(--accent);
}

/* "IMPORTANT:" sits on its own line above the two numbered items. */
.smcr-notice-legend strong {
	display: block;
	margin-bottom: 6px;
}

/* Each numbered item in the IMPORTANT box, 2px smaller than the box's
   previous overall font-size (0.9em), per spec. */
.smcr-legend-item {
	font-size: calc(0.9em - 2px);
	margin: 0 0 8px;
	color: var(--accent);
}

.smcr-legend-item:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   3. Screens (wizard steps)
   ========================================================================== */
.smcr-screen {
	animation: smcr-fade-in 0.2s ease-in-out;
}

@keyframes smcr-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.smcr-section-title {
	margin-top: 30px;
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--contrast-3);
	font-size: 1.3em;
	color: var(--contrast);
	font-weight: 700;
}

.smcr-summary-title {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* The "Thank You!" heading on the post-print confirmation screen:
   bold and centered. */
.smcr-thankyou-heading {
	text-align: center;
	font-weight: 700;
	color: var(--contrast);
	margin-top: 30px;
}

.smcr-thankyou-message {
	max-width: 560px;
	margin: 16px auto;
	white-space: pre-line;
}

.smcr-thankyou-regnumber {
	text-align: center;
	font-weight: 700;
	margin: 16px 0;
}

/* Thank You screen: link to the standalone self-service page
   ([scale_model_selfservice] shortcode) for adding/editing models
   after the contestant leaves this page. */
.smcr-thankyou-selfservice-link {
	max-width: 560px;
	margin: 0 auto 16px;
	text-align: center;
	font-size: 0.9em;
	color: var(--contrast);
}

.smcr-soft-notice {
	background: var(--contrast-2);
	border: 1px dashed var(--contrast-3);
	border-radius: 4px;
	padding: 10px 16px;
	margin: 16px 0;
	font-size: 0.9em;
	color: var(--contrast);
	text-align: center;
}

/* Self-service model editor: bold, centered warning that this tool can
   only add/edit models, never delete one already entered. */
.smcr-selfservice-warning {
	background: var(--contrast-2);
	text-align: center;
	font-weight: 700;
	margin-bottom: 16px;
}

/* Welcome screen header: logos on each side, centered text in the
   middle. Both logo slots always reserve equal flex space (even when
   empty) so the center text stays visually centered whether zero,
   one, or both logos are configured. */
.smcr-header-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 16px;
}

.smcr-header-logo {
	flex: 1 1 0;
	display: flex;
	justify-content: center;
}

/* As of 3.15.0: when a logo image is actually present, its slot gets a
   fixed-size bordered "media card" frame, so a circular logo on white
   and a rectangular photo with a dark background sit in identical
   containers instead of visibly mismatched shapes — a club can upload
   any aspect ratio/background and the header stays balanced. The
   :has() guard means an unconfigured (empty) logo slot stays invisible,
   rather than showing an empty bordered box. */
.smcr-header-logo:has(.smcr-header-logo-img) {
	width: 150px;
	height: 150px;
	box-sizing: border-box;
	align-items: center;
	padding: 12px;
	background: var(--base-3);
	border: 1px solid var(--contrast-3);
	border-radius: 10px;
}

.smcr-header-logo-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.smcr-header-center {
	flex: 2 1 auto;
	text-align: center;
}

.smcr-welcome-title {
	margin-top: 0;
	border-bottom: none;
	text-align: center;
}

/* Contest name inside the welcome heading: bold and all capitals. */
.smcr-contest-name-highlight {
	font-weight: 700;
	text-transform: uppercase;
	color: var(--contrast);
}

.smcr-contest-date,
.smcr-contest-time,
.smcr-contest-host,
.smcr-contest-poc {
	margin: 4px 0;
}

.smcr-contest-date {
	font-weight: 700;
}

/* "From HH:MM to HH:MM TZ" line: bold, per registration form spec. */
.smcr-contest-time {
	font-weight: 700;
}

/* "Hosted by:" is intentionally regular weight, not bold. */
.smcr-contest-host,
.smcr-contest-poc {
	font-weight: normal;
}

/* Welcome screen instructional text: two centered lines. As of 3.15.0
   this renders as a bordered alert card (matching .smcr-notice-legend's
   general treatment) rather than bare paragraph text, so it reads as a
   clear system notice instead of a block of bold copy. */
.smcr-welcome-instructions {
	max-width: 600px;
	margin: 20px auto 0;
	text-align: center;
	background: var(--contrast-2);
	border: 1px solid var(--contrast-3);
	border-radius: 6px;
	padding: 12px 18px;
}

.smcr-welcome-line {
	display: block;
	margin: 4px 0;
}

/* Centers a submit-row that contains a single button (e.g. Screen 1's
   "Begin Registration"), without affecting rows with multiple buttons
   (Back/Continue, Cancel/Print), which stay left-aligned/spread by default. */
.smcr-submit-row-centered {
	justify-content: center;
}

.smcr-help-text {
	color: var(--contrast);
	font-size: 0.9em;
	margin-bottom: 15px;
}

/* Entry-choice grid: three (button + explanation) pairs. Each pair is
   its own card, so on a phone — where the grid collapses to a single
   column — the button and its text always stay together as one unit,
   never separated from each other or from a different pair's text. */
.smcr-entry-choice-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 20px 0;
}

.smcr-entry-choice-card {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 16px;
	border: 1px solid var(--contrast-3);
	border-radius: 4px;
	background: var(--contrast-2);
}

.smcr-entry-choice-card .smcr-button {
	width: 100%;
}

.smcr-entry-choice-text {
	margin: 10px 0 0;
	font-size: 0.9em;
	color: var(--contrast);
}

/* Welcome screen: link to the standalone self-service page
   ([scale_model_selfservice] shortcode), replacing the third
   entry-choice card that this used to be as of 3.7.0. */
.smcr-entry-choice-selfservice-link {
	margin: 20px 0 0;
	text-align: center;
	font-size: 0.9em;
	color: var(--contrast);
}

/* Link color and hover color are intentionally NOT set here (as of
   3.14.2): the theme's own link styling applies. */
.smcr-entry-choice-selfservice-link a,
.smcr-thankyou-selfservice-link a {
	font-weight: 600;
	text-decoration: underline;
}

@media screen and (max-width: 700px) {
	.smcr-entry-choice-grid {
		flex-direction: column;
	}
}

/* ==========================================================================
   4. Form fields
   ========================================================================== */
.smcr-field {
	margin-bottom: 16px;
	flex: 1 1 200px;
}

/* Responsive row layout: fields sit side-by-side on wide screens and
   stack vertically on narrow screens (see media query below). */
.smcr-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.smcr-field-small {
	flex: 0 1 140px;
}

.smcr-field-tiny {
	flex: 0 1 90px;
}

.smcr-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.smcr-field .required {
	color: #dc3232;
	font-size: 12px;
	font-style: bold;
}

/* Age field (Screen 2): the input holds at most 2 digits, so it is
   narrow instead of screen-wide. The extra selector parts out-rank
   ".smcr-field input[type="text"] { width: 100% }" further below.
   The hint beside the label is small and regular-weight; font family
   and color are deliberately inherited from the active theme. */
.smcr-field input[type="text"].smcr-age-input {
	width: 4.5em;
	text-align: center;
}

.smcr-field .smcr-field-hint {
	font-family: inherit;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	color: inherit;
	margin-left: 6px;
}

/* Mandatory age/guardian consent checkbox, shown directly below the
   Age field on Screen 2. */
.smcr-consent-field {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 16px;
	font-weight: normal;
}

.smcr-consent-field input[type="checkbox"] {
	margin-top: 3px;
	flex: 0 0 auto;
}

.smcr-consent-field label {
	font-weight: normal;
	display: inline;
	margin-bottom: 0;
}

.smcr-field .smcr-optional {
	color: var(--contrast);
	font-weight: normal;
	font-size: 0.9em;
}


/* Changed from "background: var(--base-3, #FFFFFF)" to "background: var(#C1E1C1, #FFFFFF);"
by Armando Leon */
.smcr-field input[type="text"],
.smcr-field input[type="email"],
.smcr-field input[type="tel"],
.smcr-field select,
.smcr-field textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--contrast-3);
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 1em;
/*	background: var(--base-2);
	color: var(--contrast); */
}

/* Honeypot field: visually hidden from sighted users; still present for bots. */
.smcr-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   5. Scale model repeater rows
   ========================================================================== */
.smcr-model-row {
	position: relative;
	padding: 16px;
	margin-bottom: 16px;
	border: 1px solid var(--contrast-3);
	border-radius: 6px;
	background: var(--base);
}

.smcr-model-number {
	margin: 0 0 10px;
	font-size: 1em;
	color: var(--contrast);
}

.smcr-remove-model {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	line-height: 1;
	border: none;
	border-radius: 50%;
	background: #dc3232;
	color: #fff;
	cursor: pointer;
	font-size: 1em;
}

.smcr-remove-model:hover,
.smcr-remove-model:focus {
	background: #a82727;
}

/* Icon variant: the registration wizard's Screen 3 remove-model button
   (Model 2 onward) uses a supplied cancel-icon SVG in place of the
   plain "×" glyph. The button becomes a bare, unstyled wrapper — no
   circle, no background — since the icon artwork already provides its
   own delete affordance; only .smcr-remove-model-icon buttons are
   affected, so any other button still using the base .smcr-remove-model
   style elsewhere in the plugin is untouched. */
.smcr-remove-model-icon {
	width: auto;
	height: auto;
	padding: 0;
	background: none;
	border-radius: 0;
	line-height: 0;
}

.smcr-remove-model-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.smcr-remove-model-icon:hover svg,
.smcr-remove-model-icon:focus svg {
	opacity: 0.7;
}

/* Special contest category checkboxes, shown under each model's Description. */
.smcr-special-categories {
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px dashed var(--contrast-3);
}

.smcr-special-categories-label {
	margin: 0 0 6px;
	font-weight: 600;
	font-size: 0.9em;
}

.smcr-special-category-option {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 16px 8px 0;
	font-weight: normal;
}

.smcr-fee-preview {
	font-weight: 600;
	margin: 16px 0;
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */
.smcr-button {
	display: inline-block;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	font-size: 1em;
	font-weight: 400;
	cursor: pointer;
}

/* As of 3.15.0, primary/secondary buttons are plugin-controlled again
   (reversing 3.14.2): a solid accent fill always marks the primary
   action, and an outlined "ghost" style marks a secondary one, so the
   two are never visually identical regardless of what a club's theme
   does with plain buttons. Both still resolve through var() first, so
   a club's theme can still override via Global Colors. */

/*
.smcr-button-primary {
	background: var(--accent);
	color: var(--contrast);
	border: 1px solid var(--accent);
}
*/
.smcr-button-primary {
	border: 1px solid;
}

.smcr-button-primary:hover,
.smcr-button-primary:focus {
	opacity: 0.9;
}

.smcr-button-secondary {
/*	background: transparent;
	color: var(--contrast); */
	border: 1.5px solid var(--contrast-3);
}

.smcr-button-secondary:hover,
.smcr-button-secondary:focus {
	background: var(--base-2);
}

.smcr-button-danger {
	background: #fff;
	color: #dc3232;
	border: 1px solid #dc3232;
}

.smcr-button-danger:hover,
.smcr-button-danger:focus {
	background: #dc3232;
	color: #fff;
}

.smcr-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.smcr-submit-row {
	margin-top: 24px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Screen 4's Print/Start Over row: pinned to opposite edges on wide
   screens rather than sitting side-by-side with a small gap. */
.smcr-submit-row-edges {
	justify-content: space-between;
}

/* Screens 2 and 3 Back/Continue rows: Back sits at the far left and the
   forward button at the far right on wide screens, so the two targets
   are never adjacent. The phone-width gap is set in the 600px block. */
.smcr-submit-row-spread {
	justify-content: space-between;
}

/* ==========================================================================
   7. Summary (Screen 4) tables
   ========================================================================== */
.smcr-summary-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}

.smcr-summary-table th,
.smcr-summary-table td {
	text-align: left;
	padding: 6px 8px;
	border: 1px solid var(--contrast-3);
}

.smcr-models-summary th {
	background: var(--base-2);
	text-align: center;
}

/* "Model #" column: right-aligned with breathing room from the cell
   border, rather than numbers sticking flush to the edge. */
.smcr-model-num-cell {
	text-align: right;
	padding-right: 20px;
}

/* Special Categories column: each selected category on its own line
   instead of one continuous comma-separated line. */
.smcr-special-categories-cell-list {
	margin: 0;
	padding-left: 18px;
	text-align: left;
}

.smcr-reg-number {
	font-size: 1.0em; /* Changed from font-size: 1.1em; */
	font-weight: 700;
	text-align: center;
}

/* Screen 4's totals table (Registration Fee / Scale Models Fee /
   Total Due): label stays left-aligned, amount right-aligned —
   matches the layout already used in the PDF export. */
.smcr-totals td:last-child {
	text-align: right;
}

/* ==========================================================================
   8. Responsive breakpoints
   ========================================================================== */
@media screen and (max-width: 600px) {
	/* Stack side-by-side fields (e.g. City/Zip/State) vertically on phones. */
	.smcr-field-row {
		flex-direction: column;
		gap: 0;
	}

	/* Critical: flex-basis is relative to the flex container's main axis.
	   .smcr-field-row switches its main axis to vertical above, so any
	   child still carrying a pixel flex-basis (e.g. .smcr-field's 200px,
	   meant for horizontal width) would force that same value as its
	   HEIGHT instead — producing a large empty gap below normal-height
	   content. Resetting every row child to flex-basis: auto lets height
	   follow content again, regardless of which sizing class it carries. */
	.smcr-field-row > * {
		flex: 1 1 auto;
	}

	.smcr-submit-row {
		flex-direction: column;
	}

	/* Stacked Back/Continue rows get a wide gap so a thumb can't hit
	   the wrong button. */
	.smcr-submit-row-spread {
		gap: 48px;
	}

	.smcr-submit-row .smcr-button {
		width: 100%;
		text-align: center;
	}

	/* On phones/tablets the Print/Start Over row stacks like any other
	   .smcr-submit-row; this adds a divider between the two so the
	   stacked buttons still read as visually distinct actions. */
	.smcr-submit-row-edges .smcr-button:first-child {
		border-bottom: 1px solid var(--contrast-3);
		padding-bottom: 20px;
		margin-bottom: 4px;
	}

	.smcr-summary-table th,
	.smcr-summary-table td {
		font-size: 0.9em;
	}

	/* Stack the welcome header vertically on phones: logo, text, logo. */
	.smcr-header-row {
		flex-direction: column;
		gap: 10px;
	}

	.smcr-header-logo:has(.smcr-header-logo-img) {
		width: 100px;
		height: 100px;
		padding: 8px;
	}
}