/**
 * Alcova Resort lease forms — application, renewal, signing.
 *
 * ---------------------------------------------------------------------------
 * SAME DESIGN SYSTEM AS THE ADMIN, DIFFERENT CONSTRAINTS
 *
 * These forms drop into pages the client builds in Elementor, which means two
 * things this file has to respect that admin.css does not.
 *
 * First, everything is scoped under .alc-app-public and every property that
 * matters is set explicitly. A page builder theme will happily apply its own
 * button, input and heading styles to anything inside it; inheriting from that
 * is how a lease form ends up with a hero-sized submit button. So the form
 * declares its own values rather than trusting what it lands in.
 *
 * Second, it must not leak outward. No element selectors above the root, no
 * resets, nothing on body or :root. The surrounding page is the client's.
 *
 * The tokens and component anatomy are shadcn/ui's, Modern Minimal palette,
 * matching the admin exactly — a leaseholder and the staff member helping them
 * on the phone are looking at the same design.
 * ---------------------------------------------------------------------------
 */

/* =================================================================== */
/* Tokens                                                               */
/* =================================================================== */

.alc-app-public[data-alc-theme="light"] {
	--background:            #ffffff;
	--foreground:            #333333;
	--card:                  #ffffff;
	--card-foreground:       #333333;
	--primary:               #3b82f6;
	--primary-foreground:    #ffffff;
	--secondary:             #f3f4f6;
	--secondary-foreground:  #4b5563;
	--muted:                 #f9fafb;
	--muted-foreground:      #6b7280;
	--accent:                #e0f2fe;
	--accent-foreground:     #1e3a8a;
	--accent-border:         #bae6fd;
	--accent-muted:          #e0f2fe;
	--destructive:           #ef4444;
	--destructive-foreground:#ffffff;
	--border:                #e5e7eb;
	--input:                 #e5e7eb;
	--ring:                  #3b82f6;

	--success-muted:         #f0fdf4;
	--success-border:        #bbf7d0;
	--success-text:          #15803d;
	--warning-muted:         #fffbeb;
	--warning-border:        #fde68a;
	--warning-text:          #b45309;
	--destructive-muted:     #fef2f2;
	--destructive-border:    #fecaca;
	--destructive-text:      #b91c1c;

	--shadow-xs: 0 1px 2px 0 rgb( 0 0 0 / 0.05 );
	--shadow-sm: 0 1px 3px 0 rgb( 0 0 0 / 0.08 ), 0 1px 2px -1px rgb( 0 0 0 / 0.06 );
	--shadow-md: 0 4px 6px -1px rgb( 0 0 0 / 0.08 ), 0 2px 4px -2px rgb( 0 0 0 / 0.06 );
	--ring-alpha: rgb( 59 130 246 / 0.5 );

	color-scheme: light;
}

.alc-app-public[data-alc-theme="dark"] {
	--background:            #171717;
	--foreground:            #e5e5e5;
	--card:                  #262626;
	--card-foreground:       #e5e5e5;
	--primary:               #3b82f6;
	--primary-foreground:    #ffffff;
	--secondary:             #262626;
	--secondary-foreground:  #e5e5e5;
	--muted:                 #1f1f1f;
	--muted-foreground:      #a3a3a3;
	--accent:                #1e3a8a;
	--accent-foreground:     #bfdbfe;
	--accent-border:         #1e40af;
	--accent-muted:          #172554;
	--destructive:           #ef4444;
	--destructive-foreground:#ffffff;
	--border:                #404040;
	--input:                 #404040;
	--ring:                  #3b82f6;

	--success-muted:         #10241a;
	--success-border:        #17512f;
	--success-text:          #4ade80;
	--warning-muted:         #241c0c;
	--warning-border:        #5a4212;
	--warning-text:          #fbbf24;
	--destructive-muted:     #2a1414;
	--destructive-border:    #6b2020;
	--destructive-text:      #f87171;

	--shadow-xs: 0 1px 2px 0 rgb( 0 0 0 / 0.5 );
	--shadow-sm: 0 1px 3px 0 rgb( 0 0 0 / 0.6 ), 0 1px 2px -1px rgb( 0 0 0 / 0.5 );
	--shadow-md: 0 4px 6px -1px rgb( 0 0 0 / 0.6 ), 0 2px 4px -2px rgb( 0 0 0 / 0.5 );
	--ring-alpha: rgb( 59 130 246 / 0.55 );

	color-scheme: dark;
}

.alc-app-public                          { --radius: 0.375rem; }
.alc-app-public[data-alc-radius="sharp"] { --radius: 0; }
.alc-app-public[data-alc-radius="round"] { --radius: 0.75rem; }

.alc-app-public {
	--radius-sm: calc( var( --radius ) - 2px );
	--radius-lg: calc( var( --radius ) + 2px );
	--radius-xl: calc( var( --radius ) + 4px );
	--control-h: 2.75rem;
	--gap:       1rem;
	--gap-lg:    1.5rem;
}

/* Public controls stay finger-sized even in compact: this is a phone at a
   dock, not a desk. Compact only tightens the space between things. */
.alc-app-public[data-alc-density="compact"] {
	--gap:    0.75rem;
	--gap-lg: 1.125rem;
}

/* =================================================================== */
/* Root                                                                 */
/* =================================================================== */

.alc-app-public {
	max-width: 46rem;
	margin: 0 auto;
	padding: 0;
	background: var( --background );
	color: var( --foreground );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5715;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.alc-app-public * { box-sizing: border-box; }

/* A dark form inside a light page needs its own padded surface, or it reads
   as a stray black rectangle rather than a panel. */
.alc-app-public[data-alc-theme="dark"] {
	padding: var( --gap-lg );
	border-radius: var( --radius-xl );
	border: 1px solid var( --border );
}

.alc-app-public h2,
.alc-app-public h3 {
	color: var( --foreground );
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0 0 0.5rem;
}

.alc-app-public h2 { font-size: 1.5rem; }
.alc-app-public h3 { font-size: 1rem; }

.alc-app-public p { margin: 0 0 1rem; }

.alc-app-public a { color: var( --primary ); }

/* The container owns width and centring now, so the forms inside it are plain
   blocks. Reset the properties a page-builder theme is most likely to have
   opinions about. */
.alc-app-public .alc-form,
.alc-app-public .alc-sign {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.alc-lead {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var( --foreground );
	margin-bottom: var( --gap-lg );
}

/* The account page's standing note. Same size and rhythm as any other lead,
   set back in the muted colour because it is housekeeping rather than the
   first thing to read. */
.alc-lead-muted { color: var( --muted-foreground ); }

.alc-help {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var( --muted-foreground );
	margin: 0.375rem 0 var( --gap );
}

.alc-muted { color: var( --muted-foreground ); }

/* =================================================================== */
/* Step indicator                                                       */
/* =================================================================== */

.alc-steps {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 var( --gap-lg );
	/* The rail must never push its container wider — it renders in whatever
	   column the resort's page gives it. Containment is done by letting the
	   connectors and labels shrink, NOT by overflow:hidden, which clipped the
	   focus ring on the current step's dot into a square. A ring drawn with
	   box-shadow lives outside the element's box, so any ancestor that hides
	   overflow cuts it off. */
	max-width: 100%;
	min-width: 0;
	/* Room for the 3px ring on the first and last dots. The negative margin
	   puts the rail back where it would have been, so nothing shifts. */
	padding: 4px;
	margin-left: -4px;
	margin-right: -4px;
}

.alc-step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 1 auto;
	min-width: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var( --muted-foreground );
}

.alc-step-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var( --border );
	border-radius: 9999px;
	background: var( --background );
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.alc-step-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The connector gives up its width before any label does — a shorter line
   between two steps still reads as a rail, a truncated label does not. */
.alc-step-line {
	flex-shrink: 2;
}

.alc-step-line {
	flex: 1 1 1rem;
	min-width: 0.75rem;
	height: 1px;
	background: var( --border );
}

.alc-step-done .alc-step-dot {
	background: var( --primary );
	border-color: var( --primary );
	color: var( --primary-foreground );
}

.alc-step-now {
	color: var( --foreground );
	font-weight: 600;
}

.alc-step-now .alc-step-dot {
	border-color: var( --primary );
	color: var( --primary );
	box-shadow: 0 0 0 3px var( --ring-alpha );
}

@media ( max-width: 600px ) {
	.alc-step:not( .alc-step-now ) .alc-step-label { display: none; }
}

/* =================================================================== */
/* Fieldset — rendered as a shadcn Card                                 */
/* =================================================================== */

.alc-fieldset {
	border: 1px solid var( --border );
	border-radius: var( --radius-xl );
	background: var( --card );
	color: var( --card-foreground );
	box-shadow: var( --shadow-sm );
	padding: var( --gap-lg );
	margin: 0 0 var( --gap-lg );
	min-width: 0;
}

.alc-fieldset > legend {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 0.25rem;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var( --foreground );
}

/* float:left on the legend needs the flow restarted before the fields. */
.alc-fieldset > legend + * { clear: both; }

/* Where a heading needs room before the first field rather than sitting
   tight against it. */
.alc-fieldset > legend.alc-legend-spaced { margin-bottom: 15px; }

.alc-fieldset[hidden] { display: none; }

.alc-fieldset > :last-child { margin-bottom: 0; }

/* =================================================================== */
/* Fields                                                               */
/* =================================================================== */

.alc-field {
	margin: 0 0 var( --gap );
	min-width: 0;
}

.alc-field label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
	color: var( --foreground );
}

/* The label line: the label, and the info button that belongs to it. The
   button sits beside the word rather than under the box, because that is
   where somebody looks when they do not understand what is being asked.

   The label keeps its own bottom margin and the row carries none, so a field
   with an icon and one without line up exactly. */
.alc-field-head {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
}

.alc-field-head > label,
.alc-field-head > .alc-choice-label,
.alc-field-head > .alc-measure-label {
	flex: 0 1 auto;
	min-width: 0;
}

/* A circle with an i in it, sized to the label rather than to a finger — it
   sits inline with text, and a 44px target here would push every label apart.

   Scoped under .alc-app-public like every other rule in this file, and for the
   same reason: these forms land in Elementor pages whose theme has opinions
   about what a <button> looks like. Unscoped, this lost to them and came out a
   stretched rectangle. Every property that decides the shape is declared here
   rather than inherited — appearance and box-sizing included, because a theme
   that sets content-box turns a bordered 1.25rem square into a 1.4rem one and
   border-radius:50% on a non-square box is an ellipse. */
.alc-app-public .alc-info-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	min-width: 0;
	aspect-ratio: 1 / 1;
	padding: 0;
	margin: 0;
	border: 1px solid var( --border );
	/* Not 50%: a pill radius stays a circle even if something upstream
	   manages to change the box by a pixel. */
	border-radius: 999px;
	background: none;
	color: var( --muted-foreground );
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.alc-app-public .alc-info-toggle:hover,
.alc-app-public .alc-info-toggle.is-open {
	border-color: var( --ring );
	color: var( --ring );
}

.alc-app-public .alc-info-toggle:focus-visible {
	outline: none;
	border-color: var( --ring );
	box-shadow: 0 0 0 3px var( --ring-alpha );
}

/* Rendered as a span so it needs the block treatment .alc-help gets for free
   as a paragraph. Sits under the control it explains, not under the label —
   the answer belongs beside the box being filled in. */
.alc-app-public .alc-info-text {
	display: block;
	margin: 0.375rem 0 0;
}

/* -------------------------------------------------------------------
   The one rule that has to win.

   Both of these carry other classes that set display — .alc-info-text is
   also .alc-help, and inside a measurement field .alc-field-measure .alc-help
   re-declares display:block further down this file. At equal specificity the
   later rule wins, so setting the hidden attribute from script did nothing
   and every explanation stayed on screen however many times it was clicked.

   Scoping under the root lifts these above anything else in here that names
   a display, and !important covers the surrounding theme as well. Both are
   deliberate: a panel the script believes is closed must be closed.
   ------------------------------------------------------------------- */
.alc-app-public .alc-info-text[hidden],
.alc-app-public .alc-info-toggle[hidden] {
	display: none !important;
}

/* Only visible to a screen reader. Used for the info button's real label,
   since the "i" it shows is a shape rather than a word. */
.alc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.alc-app-public input[type="text"],
.alc-app-public input[type="email"],
.alc-app-public input[type="tel"],
.alc-app-public input[type="number"],
.alc-app-public select,
.alc-app-public textarea {
	display: block;
	width: 100%;
	min-width: 0;
	height: var( --control-h );
	padding: 0 0.75rem;
	border: 1px solid var( --input );
	border-radius: var( --radius );
	background: var( --background );
	color: var( --foreground );
	box-shadow: var( --shadow-xs );
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.alc-app-public textarea {
	height: auto;
	min-height: 6rem;
	padding: 0.625rem 0.75rem;
}

.alc-app-public select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.25rem;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	cursor: pointer;
}

.alc-app-public[data-alc-theme="dark"] select {
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
}

.alc-app-public input::placeholder { color: var( --muted-foreground ); }

.alc-app-public input:focus,
.alc-app-public select:focus,
.alc-app-public textarea:focus {
	outline: none;
	border-color: var( --ring );
	box-shadow: 0 0 0 3px var( --ring-alpha );
}

.alc-req {
	color: var( --destructive-text );
	margin-left: 0.125rem;
}

.alc-field-invalid input,
.alc-field-invalid select {
	border-color: var( --destructive );
	box-shadow: 0 0 0 3px rgb( 239 68 68 / 0.2 );
}

.alc-field-error {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var( --destructive-text );
}

/* A measurement in two boxes: feet and inches. The unit sits after its box
   rather than above it, because "8 feet 6 inches" is how the answer is said
   out loud and a stacked label turns it back into two unrelated numbers.

   The unit is a real <label> for its input, so tapping the word focuses the
   box — which on a phone is most of the target area. That means overriding
   the block layout .alc-field label gives every other label in this file. */
.alc-measure-label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
	color: var( --foreground );
}

.alc-measure-inputs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.alc-measure-part {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.alc-app-public .alc-measure-part input[type="number"] {
	width: 5rem;
	flex: 0 0 auto;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.alc-app-public .alc-measure-part label {
	display: inline;
	margin: 0;
	font-weight: 400;
	color: var( --muted-foreground );
	cursor: pointer;
}

/* Two measurements that belong together — a boat's length and beam, a rig's
   length and width. Side by side on a wide screen because they are one
   answer about one object and are read as a pair; stacked below, where a
   four-box row would wrap into something unreadable.

   Not .alc-grid: these are wider than a half column, since each is two number
   boxes and two unit labels, so the columns are sized to their contents
   rather than split down the middle. */
.alc-measure-pair {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var( --gap-lg );
}

.alc-measure-pair > .alc-field-measure {
	flex: 1 1 16rem;
	min-width: 0;
}

/* Rendered as a span here rather than a paragraph, so it needs the block
   treatment .alc-help gets for free everywhere else.

   This is the rule that used to beat the [hidden] one above on source order
   and leave every measurement's explanation open however many times the info
   button was pressed. It still sets display for the open state, which is
   correct; what changed is that the closed state is now !important and wins
   regardless of where in this file a display turns up. */
.alc-field-measure .alc-help {
	display: block;
	margin: 0.5rem 0 0;
}

/* The measurement label is the group's name rather than one box's, so it is
   a span. Inside the label row it stops being a block of its own. */
.alc-field-head > .alc-measure-label {
	display: inline-block;
	margin-bottom: 0.375rem;
}

.alc-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0 var( --gap );
}

.alc-grid-3 { grid-template-columns: 2fr 1fr 1fr; }

@media ( max-width: 640px ) {
	.alc-grid,
	.alc-grid-3 { grid-template-columns: minmax( 0, 1fr ); }
}

/* =================================================================== */
/* Button selectors                                                     */
/*                                                                      */
/* Real radio inputs with the input itself visually hidden — not        */
/* removed. display:none would take it out of the tab order and stop    */
/* screen readers announcing the group, so it is clipped to a pixel     */
/* under its own label instead, where :focus-visible can still reach it */
/* and light the label up.                                              */
/* =================================================================== */

.alc-choice {
	margin-bottom: var( --gap );
}

.alc-choice[hidden],
[data-alc-lift-group][hidden],
[data-alc-canopy-group][hidden] {
	display: none;
}

.alc-choice-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
	color: var( --foreground );
}

.alc-choice-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.alc-choice-option {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var( --control-h );
	padding: 0.625rem 1rem;
	border: 1px solid var( --border );
	border-radius: var( --radius );
	background: var( --background );
	color: var( --foreground );
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease,
		box-shadow 0.15s ease, color 0.15s ease;
}

.alc-choice-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.alc-choice-option:hover {
	border-color: var( --muted-foreground );
	background: var( --muted );
}

.alc-choice-option:has( input:checked ) {
	border-color: var( --primary );
	background: var( --primary );
	color: var( --primary-foreground );
	box-shadow: var( --shadow-sm );
}

.alc-choice-option:has( input:focus-visible ) {
	outline: none;
	box-shadow: 0 0 0 3px var( --ring-alpha );
}

/* Fallback for browsers without :has(). Applied by the same rules through a
   class the script sets, so the checked state is never invisible. */
.alc-choice-option.is-checked {
	border-color: var( --primary );
	background: var( --primary );
	color: var( --primary-foreground );
}

.alc-choice-text {
	display: block;
	min-width: 0;
}

/* Two options sit side by side; a longer list wraps to a grid rather than
   turning into a row of slivers. */
.alc-choice-options:has( > :nth-child( 4 ) ) .alc-choice-option {
	flex: 1 1 13rem;
}

@media ( max-width: 480px ) {
	.alc-choice-options {
		flex-direction: column;
	}

	.alc-choice-option {
		flex: 1 1 auto;
	}
}

.alc-field-invalid .alc-choice-option {
	border-color: var( --destructive );
}

/* =================================================================== */
/* Checkbox and radio cards                                             */
/* =================================================================== */

.alc-app-public input[type="checkbox"],
.alc-app-public input[type="radio"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var( --primary );
	cursor: pointer;
}

.alc-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0 0 var( --gap );
	font-size: 0.9375rem;
	line-height: 1.5;
	cursor: pointer;
}

.alc-checkbox input { margin-top: 0.1875rem; }

.alc-checkbox.alc-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* The payment plan choice is the highest-stakes control on the form, so it is
   a set of cards rather than a radio list: each option gets room to say what
   it actually costs. */
.alc-radio-card {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	margin: 0 0 0.625rem;
	border: 1px solid var( --border );
	border-radius: var( --radius-lg );
	background: var( --background );
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease,
		box-shadow 0.15s ease;
}

.alc-radio-card:hover {
	background: var( --muted );
	border-color: var( --muted-foreground );
}

.alc-radio-card input { margin-top: 0.1875rem; }

.alc-radio-card:has( input:checked ) {
	border-color: var( --primary );
	background: var( --accent );
	box-shadow: 0 0 0 1px var( --primary );
}

.alc-radio-card:has( input:checked ) .alc-radio-body strong {
	color: var( --accent-foreground );
}

.alc-radio-card:focus-within {
	border-color: var( --ring );
	box-shadow: 0 0 0 3px var( --ring-alpha );
}

.alc-radio-body {
	display: block;
	min-width: 0;
	font-size: 0.9375rem;
}

.alc-radio-body strong {
	display: block;
	font-weight: 600;
	line-height: 1.4;
}

.alc-radio-desc {
	display: block;
	margin-top: 0.1875rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var( --muted-foreground );
}

.alc-radio-card:has( input:checked ) .alc-radio-desc {
	color: var( --accent-foreground );
	opacity: 0.85;
}

/* =================================================================== */
/* Price summary                                                        */
/* =================================================================== */

.alc-summary {
	background: var( --muted );
}

/* Kept subtle. The figures are re-fetched on every change, and a spinner or
   a collapse on a block someone is reading turns a 200ms round trip into a
   flicker. The last good price stays legible until the new one lands. */
.alc-summary-loading [data-alc-summary-body] {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

/* Every border is declared, including the ones being switched off.
   WordPress themes and page builders routinely put a full grid on `table td`,
   and inheriting that turns this into a spreadsheet with the text jammed
   against the cell edges. Nothing here is left to the surrounding page. */
.alc-summary-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
	margin: 0 0 var( --gap );
	font-size: 0.9375rem;
	background: none;
}

.alc-summary-table tr,
.alc-summary-table thead,
.alc-summary-table tbody,
.alc-summary-table tfoot {
	border: 0;
	background-color: transparent !important;
}

/* The !important flags are on borders and background only, and they are
   load-bearing. These forms are dropped into pages the client built in a page
   builder, and themes routinely do two things to `table`: put a grid on every
   cell, and stripe alternate rows with a rule like

       table tbody > tr:nth-child(odd) > td { background-color: ... }

   which at three elements plus a pseudo-class outranks anything this file can
   say with a single class. The result was a summary that read as a
   spreadsheet. This is a price breakdown; it should look like one wherever it
   lands. */
.alc-summary-table th,
.alc-summary-table td {
	border: 0 !important;
	border-bottom: 1px solid var( --border ) !important;
	background-color: transparent !important;
	padding: 0.625rem 0.25rem;
	text-align: left;
	font-weight: 400;
	line-height: 1.45;
	vertical-align: top;
}

.alc-summary-table th:first-child,
.alc-summary-table td:first-child { padding-left: 0; }

.alc-summary-table th:last-child,
.alc-summary-table td:last-child { padding-right: 0; }

.alc-summary-table td {
	width: 1%;
	padding-left: 1.5rem;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.alc-summary-table tbody tr:last-child th,
.alc-summary-table tbody tr:last-child td {
	border-bottom: 0 !important;
}

.alc-summary-table tfoot th,
.alc-summary-table tfoot td {
	border-bottom: 0 !important;
	border-top: 2px solid var( --border ) !important;
	padding-top: 0.875rem;
	font-weight: 700;
	font-size: 1.0625rem;
}

.alc-summary-schedule {
	margin: 0 0 var( --gap );
	padding: var( --gap );
	border-radius: var( --radius );
	background: var( --background );
	border: 1px solid var( --border );
}

.alc-summary-schedule > div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
}

.alc-summary-schedule > div + div {
	margin-top: 0.625rem;
	padding-top: 0.625rem;
	border-top: 1px solid var( --border );
}

.alc-summary-schedule dt {
	font-size: 0.9375rem;
	min-width: 0;
}

.alc-summary-schedule dd {
	margin: 0;
	font-size: 1.0625rem;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.alc-summary-when {
	display: block;
	font-size: 0.8125rem;
	color: var( --muted-foreground );
}

/* =================================================================== */
/* Buttons                                                              */
/* =================================================================== */

.alc-app-public .alc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: var( --control-h );
	padding: 0 1.5rem;
	border: 1px solid var( --primary );
	border-radius: var( --radius );
	background: var( --primary );
	color: var( --primary-foreground );
	box-shadow: var( --shadow-xs );
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		box-shadow 0.15s ease, opacity 0.15s ease;
}

.alc-app-public .alc-button:hover {
	background: color-mix( in srgb, var( --primary ) 90%, #000 );
	border-color: color-mix( in srgb, var( --primary ) 90%, #000 );
	color: var( --primary-foreground );
	text-decoration: none;
}

.alc-app-public .alc-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var( --ring-alpha );
}

.alc-app-public .alc-button:disabled {
	opacity: 0.55;
	cursor: progress;
}

.alc-app-public .alc-button-large {
	height: 3.25rem;
	padding: 0 2rem;
	font-size: 1.0625rem;
	width: 100%;
}

.alc-app-public .alc-button-secondary {
	background: var( --background );
	border-color: var( --border );
	color: var( --foreground );
}

.alc-app-public .alc-button-secondary:hover {
	background: var( --secondary );
	border-color: var( --muted-foreground );
	color: var( --foreground );
}

.alc-app-public .alc-button-plain {
	height: auto;
	padding: 0.375rem 0;
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	color: var( --primary );
	font-weight: 500;
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The baseline answer, for a page with no theme fighting it. The block near the
   bottom of this file states the same thing at the specificity a theme forces;
   the two say the same thing on purpose, so reading either one tells the truth
   about what a quiet button does on hover. */
.alc-app-public .alc-button-plain:hover {
	background: transparent;
	border-color: transparent;
	color: color-mix( in srgb, var( --primary ) 75%, #000 );
}

.alc-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: var( --gap-lg );
}

.alc-form-inline { margin-top: 0.5rem; }

/* =================================================================== */
/* Notices — shadcn Alert                                               */
/* =================================================================== */

.alc-notice {
	padding: 1rem 1.125rem;
	margin: 0 0 var( --gap-lg );
	border: 1px solid var( --border );
	border-radius: var( --radius-lg );
	background: var( --card );
	font-size: 0.9375rem;
	line-height: 1.6;
}

.alc-notice-success {
	background: var( --success-muted );
	border-color: var( --success-border );
	color: var( --success-text );
}

.alc-notice-error {
	background: var( --destructive-muted );
	border-color: var( --destructive-border );
	color: var( --destructive-text );
}

.alc-notice-info {
	background: var( --accent-muted );
	border-color: var( --accent-border );
	color: var( --accent-foreground );
}

/* Not an error and not information: something the reader has to take in
   before they act. The renewal form's warning that part of a lease is going
   into the draw is the case this exists for — it is not a failure, and
   styling it as one would read as "something has gone wrong" about a season
   working exactly as configured. The tokens were already defined; only the
   variant was missing. */
.alc-notice-warning {
	background: var( --warning-muted );
	border-color: var( --warning-border );
	color: var( --warning-text );
}

/* =================================================================== */
/* Closed window — the page a shut form shows instead of itself         */
/* =================================================================== */

/* The container has nothing else in it when this renders, so the panel is
   the page and is built like one: a fixed measure, centred, with equal
   space on all four sides.

   The symmetry is the point and it is easy to lose. Every text node inside
   is margin-reset and every gap comes from the flex `gap`, because a stray
   bottom margin on the last paragraph is exactly what made the notice this
   replaces sit high in its box — container padding above, container padding
   plus a 1.5rem margin below. Add a child here and give it space through
   `gap` or a rule at the specificity below, never a bare margin. */
.alc-window-closed {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.625rem;
	width: 42.9rem;
	/* The width above is the desktop measure; this is what keeps it from
	   becoming one on a phone, where 42.9rem is wider than the screen. */
	max-width: 100%;
	margin: 0 auto;
	padding: calc( var( --gap-lg ) + var( --gap ) ) var( --gap-lg );
	border: 1px solid var( --border );
	border-radius: var( --radius-xl );
	background: var( --card );
	box-shadow: var( --shadow-sm );
	text-align: center;
}

/* Themes have opinions about paragraph and heading margins, and this is the
   one place in the file where an inherited margin is visible as lopsidedness
   rather than as slightly loose spacing. */
.alc-app-public .alc-window-closed > h2,
.alc-app-public .alc-window-closed > p {
	margin: 0;
}

.alc-window-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.25rem;
	border-radius: 50%;
	background: var( --accent-muted );
	color: var( --accent-foreground );
}

.alc-window-icon svg {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

/* A season that has been and gone is not news, and colouring it like the
   season about to start would say the wrong thing at a glance. */
.alc-window-closed-past .alc-window-icon {
	background: var( --secondary );
	color: var( --muted-foreground );
}

.alc-app-public .alc-window-title {
	font-size: 1.375rem;
	line-height: 1.3;
}

/* Centred text breaks badly on its own — a five-word title over two lines
   with one word on the second. Balancing costs nothing where it is
   unsupported, and the panel is short enough that the browser will
   actually do it. */
.alc-app-public .alc-window-title,
.alc-window-note {
	text-wrap: balance;
}

/* The date is what somebody came for and the last thing in the panel, so
   the bottom margin is zero on purpose: the panel's own padding makes that
   edge, and anything here is added to it. */
.alc-app-public .alc-window-closed > .alc-window-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1875rem;
	min-width: 13rem;
	margin: 0.375rem 0 0;
	padding: 0.75rem 1.5rem;
	border: 1px solid var( --border );
	border-radius: var( --radius-lg );
	background: var( --muted );
}

.alc-window-date-label {
	color: var( --muted-foreground );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.alc-window-date-value {
	color: var( --foreground );
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Only the closed-for-the-season state has one of these, where it stands in
   for the date block below the heading and wants the same air. */
.alc-app-public .alc-window-closed > .alc-window-note {
	max-width: 26rem;
	margin: 0.25rem 0 0;
	color: var( --muted-foreground );
	font-size: 0.875rem;
	line-height: 1.55;
}

/* A phone at a dock. Keep the padding even, just less of it, and let the
   date block use the width it has rather than holding a desktop minimum. */
@media ( max-width: 480px ) {
	.alc-window-closed {
		padding: var( --gap-lg ) var( --gap );
	}

	.alc-app-public .alc-window-closed > .alc-window-date {
		min-width: 0;
		width: 100%;
	}

	.alc-app-public .alc-window-title {
		font-size: 1.25rem;
	}
}

/* =================================================================== */
/* Card capture (Square) and signing                                    */
/* =================================================================== */

.alc-card-capture {
	padding: var( --gap-lg );
	margin: 0 0 var( --gap-lg );
	border: 1px solid var( --border );
	border-radius: var( --radius-xl );
	background: var( --card );
	box-shadow: var( --shadow-sm );
}

.alc-card-capture[hidden] { display: none; }

#alc-card-container { min-height: 90px; }

/* The Square card field's own surface.
 *
 * Square draws the field as a transparent iframe sitting in a container div it
 * owns, and its stylesheet paints that container white. What shows through the
 * frame is therefore the container's background, not anything inside it.
 *
 * The style object in public.js already asks Square to repaint that container,
 * and Square honours it. This says the same thing in our own stylesheet, for
 * the case where it does not arrive: a rejected property, a change to the
 * private class names below, or a stale script served from a page cache. The
 * field going light inside a dark form is the failure it is worth two lines to
 * rule out, because it lands on the renewal screen and reads as broken.
 *
 * Square's own rule is two class selectors and its stylesheet is appended to
 * the head when the field mounts, so it would win a tie on source order. The
 * theme attribute is carried here for the third selector that settles it, not
 * for the value — both themes read the same two tokens. Square's focus and
 * error rings override the border with !important and are left alone. */
.alc-app-public[data-alc-theme] .sq-card-iframe-container {
	border-color: var( --border );
	background-color: var( --background );

	/* And the frame in front of it kept transparent, which is the whole reason
	 * the background above is visible at all.
	 *
	 * A browser treats an iframe as transparent only while its document's
	 * colour scheme matches the embedder's. Square's frame declares none, so it
	 * is light; the dark theme sets `color-scheme: dark` on the wrapper. On
	 * that mismatch the browser stops compositing the frame and paints it an
	 * opaque white, which lands on top of everything here and produces a white
	 * card field inside a dark form with no CSS anywhere to explain it.
	 *
	 * Declaring the frame's own scheme on its container restores the match, and
	 * the frame goes back to transparent. It inherits, so this reaches the
	 * iframe element without naming it. Nothing inside the frame is styled by
	 * it — Square themes those inputs from the object public.js sends. */
	color-scheme: light;
}

.alc-consent {
	padding: var( --gap-lg );
	margin: 0 0 var( --gap-lg );
	border: 1px solid var( --border );
	border-radius: var( --radius-xl );
	background: var( --muted );
}

.alc-consent h3 { margin-top: 0; }

/* The consent text scrolls in place rather than pushing the signature control
   below the fold. The inset shadow is the affordance that there is more. */
.alc-consent-text {
	max-height: 16rem;
	overflow-y: auto;
	padding: 0.875rem 1rem;
	margin-bottom: var( --gap );
	border: 1px solid var( --border );
	border-radius: var( --radius );
	background: var( --background );
	font-size: 0.875rem;
	line-height: 1.65;
	color: var( --foreground );
}

.alc-signature {
	padding: var( --gap-lg );
	margin: 0 0 var( --gap-lg );
	border: 1px solid var( --border );
	border-radius: var( --radius-xl );
	background: var( --card );
	box-shadow: var( --shadow-sm );
}

.alc-signature h3 { margin-top: 0; }

.alc-signature-input {
	width: 100%;
	max-width: 26rem;
	height: 3.25rem !important;
	padding: 0 0.875rem !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 1.375rem !important;
}

/* The typed name and the pad are two separate acts, not one control with a
   caption. Sitting flush, "And sign below" read as a hint attached to the box
   above it rather than as the next thing to do. */
.alc-signature-input-spaced { margin-bottom: 15px; }

/* Clear, and the upload beside it. Wraps to two rows on a narrow screen
   rather than shrinking the file control, which browsers render at their own
   intrinsic width and do not shrink gracefully. */
.alc-signature-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-bottom: 0.5rem;
}

.alc-signature-upload {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	font-size: 0.8125rem;
	color: var( --muted-foreground );
}

/* The file control itself: browsers style the button, so this only has to keep
   the filename from running out of the card on a phone. */
.alc-signature-upload input[type="file"] {
	max-width: 100%;
	font-size: 0.8125rem;
	color: var( --foreground );
}

/* The pad stays white in both themes, on purpose.
 *
 * public.js strokes the signature in a fixed near-black and hands the canvas
 * straight to toDataURL(); that PNG is embedded into the lease PDF, which is
 * white paper. Theming the stroke to suit a dark page would put an invisible
 * signature on the document. Theming the pad's background instead keeps the
 * drawing legible while it is being made and correct once it is filed — and a
 * white rectangle is the right metaphor anyway. This is a sheet of paper. */
.alc-signature-pad {
	display: block;
	width: 100%;
	max-width: 600px;
	/* A stated height, not one derived from the width/height attributes. The
	   script now sets those to the CSS size multiplied by the device pixel
	   ratio, so an attribute-derived height would feed its own output back in.
	   The attributes stay on the element as the pre-script size. */
	height: 180px;
	margin-bottom: 0.5rem;
	border: 1px dashed var( --border );
	border-radius: var( --radius );
	background: #ffffff;
	touch-action: none;
	cursor: crosshair;
}

.alc-app-public[data-alc-theme="dark"] .alc-signature-pad {
	border-color: #6b7280;
}

/* The signing page's document link reads as a document, not a button. */
.alc-doc-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	margin: 0 0 var( --gap-lg );
	border: 1px solid var( --border );
	border-radius: var( --radius-lg );
	background: var( --card );
	color: var( --foreground );
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.alc-doc-link:hover {
	background: var( --muted );
	border-color: var( --muted-foreground );
	text-decoration: none;
}

.alc-doc-link-meta {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var( --muted-foreground );
}

/* =================================================================== */
/* Sites carried forward, and the payment plan                          */
/*                                                                      */
/* Tables because the content is tabular, styled so they do not read as */
/* tables: no rules, no fills, no hover. These are short lists of two   */
/* facts each, and lines between four rows are furniture rather than    */
/* information.                                                        */
/*                                                                      */
/* Every property that could carry a border or a background is declared */
/* and forced, including the ones being switched off — this markup ends */
/* up inside pages built in Elementor, where a theme's own table styles */
/* would otherwise put back the striping and the hover this removes.    */
/* =================================================================== */

.alc-spot-table {
	width: 100%;
	border-collapse: collapse;
	border: 0 !important;
	background: none !important;
	margin-bottom: 0.75rem;
	font-size: 0.9375rem;
}

.alc-spot-table tr,
.alc-spot-table tbody,
.alc-spot-table thead {
	border: 0 !important;
	background: none !important;
}

/* Hover included. On a page that cannot be clicked, a row that lights up
   under the cursor is promising something. */
.alc-spot-table tr:hover,
.alc-spot-table tr:nth-child( odd ),
.alc-spot-table tr:nth-child( even ),
.alc-spot-table tr:hover td {
	background: none !important;
}

.alc-spot-table td {
	padding: 0.5rem 0.5rem;
	border: 0 !important;
	background: none !important;
	vertical-align: top;
	line-height: 1.5;
}

.alc-spot-table td:first-child { padding-left: 0; }
.alc-spot-table td:last-child  { padding-right: 0; text-align: right; }

.alc-spot-table tr:first-child td { padding-top: 0; }
.alc-spot-table tr:last-child td  { padding-bottom: 0; }

/* =================================================================== */
/* Account page                                                         */
/*                                                                      */
/* One card per season, so a leaseholder of eight years reads down a    */
/* stack rather than across a table. Everything reuses the fieldset      */
/* card, the spot table and the schedule list the forms already define; */
/* only the pieces that had no equivalent are declared here.            */
/* =================================================================== */

/* Definition list as label/value rows. Two columns where there is room,
   stacked on a phone — an address wrapping under its own label reads as a
   second address. */
.alc-detail-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.875rem var( --gap-lg );
	margin: 0 0 var( --gap );
}

.alc-detail-list > div { min-width: 0; }

.alc-detail-list dt {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var( --muted-foreground );
	margin-bottom: 0.125rem;
}

.alc-detail-list dd {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var( --foreground );
	overflow-wrap: anywhere;
}

@media ( max-width: 40rem ) {
	.alc-detail-list { grid-template-columns: 1fr; }
}

/* The season and its status share a line: the heading left, the badge right,
   because the badge qualifies the heading and reading them apart means
   pairing them up again further down the card.

   The legend is already float:left with width:100% — the standard trick for
   making a legend behave like a block — so it is a normal box here and takes
   display:flex without the quirks a legend in its default border-gap
   rendering would bring. */
.alc-record > legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

/* Holds its own width so space-between has something to push against. */
.alc-record-season { min-width: 0; }

@media ( max-width: 40rem ) {
	/* Stacked, badge first. Side by side on a narrow screen either squeezes
	   the heading or wraps the badge to a line of its own anyway — and a
	   status is the thing worth reading first on a phone. column-reverse
	   flips the DOM order, so the markup keeps the heading first where it
	   belongs for a screen reader and for JavaScript-off. */
	.alc-record > legend {
		flex-direction: column-reverse;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0.375rem;
	}
}

.alc-record-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 var( --gap );
	font-size: 0.8125rem;
}

.alc-record-status .alc-muted {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.75rem;
}

/* Status badge. Named a pill rather than a badge because the admin's
   .alc-badge is a different size and this file must not inherit from it. */
.alc-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.625rem;
	border: 1px solid var( --accent-border );
	border-radius: 999px;
	background: var( --accent-muted );
	color: var( --accent-foreground );
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
}

.alc-pill-muted {
	border-color: var( --border );
	background: var( --muted );
	color: var( --muted-foreground );
}

/* A cancelled season stays on the page — the refund attached to it is one of
   the things people sign in to check — but it stops competing with the live
   one for attention. */
.alc-record-cancelled {
	opacity: 0.85;
}

.alc-record-cancelled > legend {
	color: var( --muted-foreground );
}

.alc-record h3 {
	margin-top: var( --gap-lg );
}

/* =================================================================== */
/* Lease options — one panel per thing you can lease                    */
/*                                                                      */
/* The panel is the unit: its toggle, its options and its details all    */
/* sit inside one edge, so choosing a dock never changes something a    */
/* screen away. The header is a real checkbox with the input clipped to  */
/* a pixel beneath it rather than removed, so focus-visible still        */
/* reaches it and screen readers still announce a checkbox.             */
/* =================================================================== */

.alc-lease-options {
	display: grid;
	gap: var( --gap );
	margin-bottom: var( --gap );
}

.alc-lease-option {
	border: 1px solid var( --border );
	border-radius: var( --radius-xl );
	background: var( --card );
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.alc-lease-option:has( .alc-toggle-card input:checked ) {
	border-color: var( --primary );
	box-shadow: var( --shadow-sm );
}

.alc-app-public .alc-toggle-card {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
	padding: var( --gap );
	font-weight: 400;
	cursor: pointer;
}

.alc-app-public .alc-toggle-card:hover { background: var( --muted ); }

/* Clipped, not display:none — the box stays focusable and announced. */
.alc-app-public .alc-toggle-card input {
	position: absolute;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	opacity: 0;
}

/* The drawn box. ::before is the square, ::after the tick. */
.alc-toggle-body {
	display: block;
	min-width: 0;
	padding-left: 2rem;
	position: relative;
}

.alc-toggle-body::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.0625rem;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid var( --input );
	border-radius: var( --radius-sm );
	background: var( --background );
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.alc-toggle-body::after {
	content: "";
	position: absolute;
	left: 0.4375rem;
	top: 0.25rem;
	width: 0.3125rem;
	height: 0.625rem;
	border: solid var( --primary-foreground );
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg ) scale( 0 );
	transition: transform 0.15s ease;
}

.alc-toggle-card:has( input:checked ) .alc-toggle-body::before,
.alc-toggle-card.is-checked .alc-toggle-body::before {
	background: var( --primary );
	border-color: var( --primary );
}

.alc-toggle-card:has( input:checked ) .alc-toggle-body::after,
.alc-toggle-card.is-checked .alc-toggle-body::after {
	transform: rotate( 45deg ) scale( 1 );
}

.alc-toggle-card:has( input:focus-visible ) .alc-toggle-body::before {
	outline: none;
	box-shadow: 0 0 0 3px var( --ring-alpha );
}

.alc-toggle-title {
	display: block;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	color: var( --foreground );
}

.alc-toggle-desc {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var( --muted-foreground );
}

/* The body only exists once the panel is on; the script also disables the
   controls inside it, so nothing hidden can block a submit. */
.alc-lease-option-body {
	padding: 0 var( --gap ) var( --gap );
	border-top: 1px solid var( --border );
	padding-top: var( --gap );
}

.alc-lease-option-body[hidden] { display: none; }

.alc-lease-option-body > :last-child { margin-bottom: 0; }

/* The rule separates the details from the options above them. In the dock
   panel that is the lift and the canopy; in the RV panel there is nothing
   above it at all, so the heading lands directly under the body's own top
   border and draws a second line a few pixels below the first. */
.alc-app-public .alc-lease-option-heading {
	margin-top: var( --gap-lg );
	padding-top: var( --gap );
	border-top: 1px solid var( --border );
	font-size: 0.9375rem;
}

.alc-app-public .alc-lease-option-body > .alc-lease-option-heading:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* =================================================================== */
/* Adding the other site type, on the account page                      */
/*                                                                      */
/* Sits between the seasons and the renewal prompt. Given an edge like  */
/* the renewal block, but in the neutral surface rather than the accent */
/* one — it is an offer rather than the thing the page is steering      */
/* towards.                                                             */
/* =================================================================== */

/* =================================================================== */
/* Asking for a card the plan is missing                                */
/*                                                                      */
/* Toned as a warning rather than as another panel, because it is the   */
/* one thing on this page the leaseholder has to act on: their lease is */
/* on a monthly plan that cannot collect anything. The add-a-site card  */
/* below is an offer and reads like one; this is a problem, and reading */
/* like an offer is how it gets scrolled past for a season.             */
/* =================================================================== */

.alc-card-on-file {
	margin: var( --gap-lg ) 0;
	padding: var( --gap-lg );
	border: 1px solid var( --warning-border );
	border-radius: var( --radius-xl );
	background: var( --warning-muted );
}

.alc-card-on-file h3 {
	margin-top: 0;
	color: var( --warning-text );
}

/* The field keeps its own surface inside the warning ground, so the
   Square iframe sits on the white it is styled for rather than on
   amber. */
.alc-card-on-file .alc-card-capture {
	margin-bottom: var( --gap );
}

.alc-app-public .alc-card-on-file .alc-button {
	width: auto;
	min-width: 14rem;
}

.alc-card-current {
	margin: 0 0 var( --gap );
	font-weight: 600;
}

.alc-card-current .alc-muted { font-weight: 400; }

.alc-add-site {
	margin: var( --gap-lg ) 0;
	padding: var( --gap-lg );
	border: 1px solid var( --border );
	border-radius: var( --radius-xl );
	background: var( --card );
}

.alc-add-site h3 { margin-top: 0; }

.alc-add-site .alc-form + .alc-form { margin-top: var( --gap ); }

.alc-app-public .alc-add-site .alc-button {
	width: auto;
	min-width: 14rem;
}

/* What the ticked boxes come to, directly above the box where the rest of the
   question gets typed. Set apart from the panels above it, because it is a
   summary of them rather than another one. */
.alc-inquiry-total {
	margin: var( --gap-lg ) 0 var( --gap );
	padding: var( --gap );
	border: 1px solid var( --border );
	border-radius: var( --radius-lg );
	background: var( --card );
}

.alc-inquiry-total h4 {
	margin: 0 0 0.5rem;
}

.alc-inquiry-total .alc-summary-schedule { margin: 0; }

/* The send button and this sentence are one thought, and the sentence was
   sitting against the button with nothing between them. */
.alc-app-public .alc-add-site .alc-inquiry-footnote {
	margin-top: var( --gap );
}

/* =================================================================== */
/* The renewal prompt at the foot of the account page                   */
/*                                                                      */
/* The one thing on a read-only page that can be acted on, so it is     */
/* given an edge and the full-width primary button rather than being    */
/* left to look like another paragraph.                                 */
/* =================================================================== */

.alc-renew {
	margin: var( --gap-lg ) 0;
	padding: var( --gap-lg );
	border: 1px solid var( --accent-border );
	border-radius: var( --radius-xl );
	background: var( --accent-muted );
	text-align: center;
}

.alc-renew h3 {
	margin-top: 0;
	font-size: 1.125rem;
	color: var( --accent-foreground );
}

.alc-renew .alc-help {
	margin: 0 0 var( --gap );
	color: var( --accent-foreground );
	opacity: 0.85;
}

.alc-app-public .alc-renew .alc-button {
	width: auto;
	min-width: 16rem;
}

/* Stands in for the button when there is nothing to press yet — the window
   has not opened, or no renewal page has been set. Same weight as the button
   it replaces, so the block does not look broken. */
.alc-renew-note {
	margin: 0;
	font-weight: 600;
	color: var( --accent-foreground );
}

/* =================================================================== */
/* Honeypot — hidden from people, reachable by bots.                    */
/* Not display:none, which many bots skip.                              */
/* =================================================================== */

.alc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ===================================================================
   Holding the line against the page this is dropped into

   These forms live on pages built in Elementor, and a page builder's global
   styles are not a stylesheet you can read and design around — they are
   generated per site, per kit, and they change when somebody picks a new
   accent colour. What they reliably do is style bare `button` and `a` in
   every interactive state, which is how a submit button and a small round
   info icon ended up turning the site's accent pink on hover and on click.

   Two things were wrong and both are fixed here rather than by chasing
   selectors.

   FIRST, THE STATES WERE INCOMPLETE. This file styled :hover and
   :focus-visible and said nothing about :focus or :active — so a theme rule
   for those had nothing to compete with and simply applied. A component that
   declares three of a control's four states has not been overridden; it has
   left one undefined.

   SECOND, SPECIFICITY. `.elementor-kit-9 button:hover` is (0,2,1). A rule
   here reading `.alc-app-public .alc-button:hover` is (0,3,0) and wins on
   paper, but only for the properties it actually names — the info button
   declared a border colour and a text colour on hover and no background, so
   the theme's background came through underneath our border. Naming the
   element as well takes these to (0,3,1) and every colour property is stated
   outright.

   No !important. These are ordinary rules that state a complete answer, which
   is what was missing. The flags elsewhere in this file are for table styling,
   where a theme's `table tbody tr:nth-child(odd) td` genuinely outranks
   anything a single class can say.
   =================================================================== */

.alc-app-public button.alc-button:hover,
.alc-app-public button.alc-button:focus,
.alc-app-public button.alc-button:focus-visible,
.alc-app-public button.alc-button:active,
.alc-app-public a.alc-button:hover,
.alc-app-public a.alc-button:focus,
.alc-app-public a.alc-button:focus-visible,
.alc-app-public a.alc-button:active {
	background: color-mix( in srgb, var( --primary ) 90%, #000 );
	border-color: color-mix( in srgb, var( --primary ) 90%, #000 );
	color: var( --primary-foreground );
	text-decoration: none;
}

/* Pressed is a shade further in, so a click reads as a click rather than as
   nothing happening between hover and the page moving. */
.alc-app-public button.alc-button:active,
.alc-app-public a.alc-button:active {
	background: color-mix( in srgb, var( --primary ) 80%, #000 );
	border-color: color-mix( in srgb, var( --primary ) 80%, #000 );
}

.alc-app-public button.alc-button:focus-visible,
.alc-app-public a.alc-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var( --ring-alpha );
}

/* A plain :focus must not paint a ring — that is what :focus-visible is for,
   and a ring after every mouse click is the thing :focus-visible exists to
   stop. Stated so a theme's `button:focus { box-shadow: ... }` does not put
   one back. */
.alc-app-public button.alc-button:focus:not( :focus-visible ),
.alc-app-public a.alc-button:focus:not( :focus-visible ) {
	outline: none;
	box-shadow: var( --shadow-xs );
}

.alc-app-public button.alc-button-secondary:hover,
.alc-app-public button.alc-button-secondary:focus,
.alc-app-public button.alc-button-secondary:focus-visible,
.alc-app-public button.alc-button-secondary:active,
.alc-app-public a.alc-button-secondary:hover,
.alc-app-public a.alc-button-secondary:focus,
.alc-app-public a.alc-button-secondary:focus-visible,
.alc-app-public a.alc-button-secondary:active {
	background: var( --secondary );
	border-color: var( --muted-foreground );
	color: var( --foreground );
}

/* The quiet buttons — "Send another code", "Clear signature". They carry
   .alc-button too, so the block above was painting them the primary blue on
   hover: a solid slab behind six words of link text, sitting under a real
   button that is already a solid slab. Same omission as the secondary variant
   had, and it needs the same (0,3,1) answer rather than the (0,3,0) one
   further up the file, which the block above outranks.

   Hover moves the text and nothing else, which is what a control shaped like a
   link should do. The underline is restated because the block above clears it,
   and losing the underline on hover reads as the thing becoming less of a link
   at the moment you point at it. */
.alc-app-public button.alc-button-plain:hover,
.alc-app-public button.alc-button-plain:focus,
.alc-app-public button.alc-button-plain:focus-visible,
.alc-app-public button.alc-button-plain:active,
.alc-app-public a.alc-button-plain:hover,
.alc-app-public a.alc-button-plain:focus,
.alc-app-public a.alc-button-plain:focus-visible,
.alc-app-public a.alc-button-plain:active {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	color: color-mix( in srgb, var( --primary ) 75%, #000 );
	text-decoration: underline;
}

/* The keyboard ring is the one thing that may still paint, or a quiet button
   becomes the one control on the page a keyboard user cannot locate. Stated
   after the rule above, which clears box-shadow for every other state. */
.alc-app-public button.alc-button-plain:focus-visible,
.alc-app-public a.alc-button-plain:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var( --ring-alpha );
}

/* The info icon. Background was the property it never stated, which is
   exactly the one a theme sets. */
.alc-app-public button.alc-info-toggle:hover,
.alc-app-public button.alc-info-toggle:focus,
.alc-app-public button.alc-info-toggle:focus-visible,
.alc-app-public button.alc-info-toggle:active,
.alc-app-public button.alc-info-toggle.is-open {
	background: var( --background );
	border-color: var( --ring );
	color: var( --ring );
	box-shadow: none;
}

.alc-app-public button.alc-info-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var( --ring-alpha );
}

/* The option buttons are labels, so a theme's `button` rules miss them — but
   `label` and `a` rules do not, and the checked state is the one that must
   never be repainted: it is the only thing telling somebody what they picked. */
.alc-app-public label.alc-choice-option:hover {
	border-color: var( --muted-foreground );
	background: var( --muted );
	color: var( --foreground );
}

.alc-app-public label.alc-choice-option:has( input:checked ),
.alc-app-public label.alc-choice-option.is-checked,
.alc-app-public label.alc-choice-option:has( input:checked ):hover,
.alc-app-public label.alc-choice-option.is-checked:hover {
	border-color: var( --primary );
	background: var( --primary );
	color: var( --primary-foreground );
}

/* ===================================================================
   Option buttons: the label is the box, and the text sits in the middle of it

   These are labels, and a page builder has opinions about labels — a display,
   a line-height, a bottom margin, sometimes padding. Any one of those pushes
   the text off centre inside a box whose height this file fixes, and the
   result is a row of buttons with the words sitting high.

   So the box is re-stated at an element-plus-class specificity no bare `label`
   rule reaches, and the text inside it is stripped of anything inherited that
   could move it: its own margins, its own line-height, and the block display
   it does not need once the label is a centring flex container.
   =================================================================== */

.alc-app-public label.alc-choice-option {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Symmetrical, so the text has the same room above it as below. */
	padding: 0.625rem 1rem;
	margin: 0;
	line-height: 1.35;
	text-align: center;
}

.alc-app-public label.alc-choice-option > .alc-choice-text {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 1.35;
	text-align: center;
}

@media ( prefers-reduced-motion: reduce ) {
	.alc-app-public *,
	.alc-app-public *::before,
	.alc-app-public *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* The per-site lines in the renewal notice. One line per site, so a lease with
   a dock and an RV pad shows which of the two is in the draw — the version
   this replaced said "1 of your sites carries no right of first renewal" and
   left the reader to work out which one. */
.alc-app-public .alc-site-outlook {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.alc-app-public .alc-site-outlook li + li {
	margin-top: 0.25rem;
}