/**
 * Cart + checkout wizard styles.
 *
 * Loads on top of catalog.css (dependency) for the shared `.cllcw-button`.
 * Same ground rules: typography inherits from the Divi child theme; senior
 * audience + WCAG 2.1 AA — generous targets, visible focus, wording over
 * color, contrast ≥ 4.5:1 on white.
 */

/* ---- Shared tables (cart + review) ---- */

.cllcw-cart__table,
.cllcw-checkout__table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}

.cllcw-cart__table th,
.cllcw-cart__table td,
.cllcw-checkout__table th,
.cllcw-checkout__table td {
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid #d0d5da;
	text-align: left;
	vertical-align: middle;
}

/* Fee cells key on a class, not the (translated) data-label text (issue #95). */
.cllcw-checkout__table td:last-child,
.cllcw-checkout__table tfoot td,
.cllcw-cart__table td.cllcw-cart__fee {
	white-space: nowrap;
}

.cllcw-checkout__table tfoot th,
.cllcw-checkout__table tfoot td {
	border-bottom: none;
	border-top: 2px solid #1d2327;
	font-size: 1.1em;
}

/* Stack into labeled cards on narrow screens (same pattern as the
   glance table — no horizontal scroll for the cart). */
@media (max-width: 640px) {
	.cllcw-cart__table thead {
		position: absolute;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
	}

	.cllcw-cart__table tr {
		display: block;
		border: 1px solid #d0d5da;
		border-radius: 6px;
		padding: 0.5rem 0.75rem;
		margin-bottom: 0.75rem;
	}

	.cllcw-cart__table td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		border-bottom: none;
		padding: 0.375rem 0;
	}

	.cllcw-cart__table td[data-label]::before {
		content: attr(data-label);
		font-weight: 700;
	}

	.cllcw-cart__table .cllcw-cart__remove {
		justify-content: flex-end;
	}
}

/* ---- Buttons & links ---- */

.cllcw-button--primary {
	background: #00539b; /* 6.7:1 on white */
}

.cllcw-button--primary:hover,
.cllcw-button--primary:focus {
	background: #003d73;
}

.cllcw-button--link {
	background: transparent;
	border-color: transparent;
	color: #00539b;
	text-decoration: underline;
	font-weight: 400;
	min-height: 44px;
}

.cllcw-button--link:hover,
.cllcw-button--link:focus {
	background: transparent;
	color: #003d73;
}

.cllcw-button--in-cart {
	background: #f0f6fb;
	color: #1d2327;
	border-color: #00539b;
	cursor: default;
}

.cllcw-card__view-cart {
	display: inline-block;
	margin-top: 0.375rem;
	color: #00539b;
	text-decoration: underline;
}

.cllcw-checkout__edit-cart {
	margin-left: 1rem;
	color: #00539b;
	text-decoration: underline;
}

/* ---- Wizard chrome ---- */

.cllcw-checkout__heading {
	margin-top: 0;
}

.cllcw-checkout__form fieldset {
	border: 1px solid #d0d5da;
	border-radius: 6px;
	padding: 1rem 1.25rem;
	margin: 0 0 1rem;
}

.cllcw-checkout__form legend {
	font-weight: 700;
	padding: 0 0.375rem;
}

.cllcw-checkout__radio {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0;
	font-size: 1.05em;
}

.cllcw-checkout__radio input {
	width: 1.375rem;
	height: 1.375rem;
}

.cllcw-checkout__form label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.cllcw-checkout__radio,
.cllcw-checkout__radio input {
	font-weight: 400;
}

.cllcw-checkout__form input[type="text"],
.cllcw-checkout__form input[type="email"],
.cllcw-checkout__form input[type="tel"],
.cllcw-checkout__form input[type="password"] {
	width: 100%;
	max-width: 26rem;
	min-height: 44px;
	padding: 0.375rem 0.625rem;
	border: 1px solid #6c7378;
	border-radius: 4px;
}

.cllcw-checkout__hint {
	display: block;
	font-size: 0.9em;
	color: #50575e;
	margin-top: 0.25rem;
}

.cllcw-checkout__who {
	margin: 0.5rem 0 0.75rem;
}

.cllcw-checkout__identity-note {
	display: inline-block;
	margin-left: 0.375rem;
	font-weight: 700;
}

.cllcw-checkout__change {
	margin-left: 0.5rem;
	color: #00539b;
	text-decoration: underline;
}

/* Email field while "create a CLL address for me" is ticked: visibly out
   of play, not just silently ignored. */
.cllcw-checkout__field--disabled label {
	opacity: 0.55;
}

.cllcw-checkout__field--disabled input:disabled {
	background: #f0f0f1;
	border-style: dashed;
	cursor: not-allowed;
}

.cllcw-checkout__waived {
	display: block;
	font-size: 0.9em;
	color: #1e6b2e; /* 5.0:1 on white */
	font-weight: 700;
}

.cllcw-checkout__credits,
.cllcw-checkout__membership-note,
.cllcw-cart__note {
	color: #50575e;
	font-size: 0.95em;
}

/* ---- Coupon (review step): deliberately quiet ---- */

.cllcw-checkout__coupon {
	margin: 0.75rem 0;
	font-size: 0.95em;
}

.cllcw-checkout__coupon summary {
	color: #50575e;
	text-decoration: underline;
	cursor: pointer;
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
}

.cllcw-checkout__coupon form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 0.25rem;
}

.cllcw-checkout__coupon input[type="text"] {
	min-height: 44px;
	max-width: 14rem;
	padding: 0.375rem 0.625rem;
	border: 1px solid #6c7378;
	border-radius: 4px;
	text-transform: uppercase;
}

.cllcw-checkout__coupon-error {
	color: #7a1c21;
	font-weight: 700;
}

.cllcw-checkout__coupon-applied {
	display: flex;
	gap: 0.25rem;
	align-items: center;
	margin: 0.75rem 0;
	font-weight: 700;
	color: #1e6b2e;
}

.cllcw-checkout__coupon-applied form {
	display: inline;
	margin: 0;
}

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

.cllcw-checkout__demo {
	border: 2px dashed #8a6d00;
	background: #fff8e1;
	color: #5c4a00; /* 7.4:1 on the tint */
	border-radius: 6px;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	font-weight: 700;
}

.cllcw-checkout__error {
	border-left: 4px solid #a4262c;
	background: #fdf3f4;
	color: #7a1c21;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
}

.cllcw-checkout__error p {
	margin: 0 0 0.625rem;
}

/* The one-click "Remove … from cart" assist inside a warning. */
.cllcw-checkout__remove-form {
	display: inline-block;
	margin: 0 0.5rem 0.25rem 0;
}

.cllcw-checkout__closed,
.cllcw-cart__closed {
	border-left: 4px solid #00539b;
	background: #f0f6fb;
	padding: 0.75rem 1rem;
}

/* ---- Emergency contact (F-14, optional, inside the pay form) ---- */

.cllcw-checkout__emergency {
	border: 1px solid #d0d5da;
	border-radius: 6px;
	padding: 1rem 1.25rem;
	margin: 1rem 0;
	max-width: 34rem;
}

.cllcw-checkout__emergency legend {
	font-weight: 700;
	padding: 0 0.375rem;
}

.cllcw-checkout__emergency label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.cllcw-checkout__emergency input {
	width: 100%;
	max-width: 26rem;
	min-height: 44px;
	padding: 0.375rem 0.625rem;
	border: 1px solid #6c7378;
	border-radius: 4px;
}

/* ---- Confirmation: schedule details, "what happens next", print ---- */

.cllcw-checkout__subheading {
	margin-top: 2rem;
}

.cllcw-checkout__schedule {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cllcw-checkout__schedule-item {
	border: 1px solid #d0d5da;
	border-radius: 6px;
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
}

.cllcw-checkout__schedule-title {
	margin: 0 0 0.5rem;
	font-weight: 700;
	font-size: 1.05em;
}

.cllcw-checkout__schedule-title a {
	color: #00539b;
}

.cllcw-checkout__schedule-details {
	margin: 0;
}

.cllcw-checkout__schedule-details div {
	display: flex;
	gap: 0.5rem;
	margin: 0.25rem 0;
}

.cllcw-checkout__schedule-details dt {
	font-weight: 700;
	min-width: 8rem;
}

.cllcw-checkout__schedule-details dd {
	margin: 0;
}

.cllcw-checkout__next-steps ul {
	padding-left: 1.5rem;
}

.cllcw-checkout__next-steps li {
	margin-bottom: 0.5rem;
}

.cllcw-checkout__print-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.5rem 1.25rem;
	border: 2px solid transparent;
	border-radius: 6px;
	background: #00539b;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.cllcw-checkout__print-btn:hover,
.cllcw-checkout__print-btn:focus {
	background: #003d73;
	color: #fff;
}

/* Decorative printer icon — an SVG mask filled with the button's text color.
   (The old "\1F5B6" printer codepoint has no glyph in most fonts and rendered
   as a blank square.) */
.cllcw-checkout__print-btn::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Page margins for print come from catalog.css's top-level @page rule —
   checkout.css depends on catalog.css (see Checkout::register_assets()),
   so it's always loaded alongside this stylesheet. Chrome ignores @page
   rules nested inside @media print, so don't redeclare one here. */

@media print {
	/* Only the confirmation prints: site chrome, the print button, and the
	   back-to-catalog link disappear (same pattern as the schedule-at-a-
	   glance and instructor roster print views). */
	#main-header,
	#et-main-area nav,
	.et-l--header,
	.et-l--footer,
	#footer-bottom,
	.cllcw-checkout__print,
	.cllcw-checkout__catalog-link {
		display: none !important;
	}
}

/* ---- My Account: logout pinned top-right ---- */

.cllcw-account {
	position: relative;
}

.cllcw-account__logout {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 0.5rem;
}

/* ---- [cll_login]: the branded sign-in form ---- */

.cllcw-login {
	max-width: 26rem;
}

/* "New here?" panel above the form (UAT 2026-08-21): first-timers arrive
   from the header's Sign In button looking for a way to create an account,
   so this has to read before the form, not after it. */

.cllcw-login__new {
	margin: 0 0 1.5rem;
	padding: 1rem 1.125rem;
	border-left: 4px solid #00539b;
	border-radius: 4px;
	background: #eef4fa;
}

.cllcw-login__new p {
	margin: 0 0 0.75rem;
}

.cllcw-login__new p:last-child {
	margin-bottom: 0;
}

.cllcw-login__form p {
	margin: 0 0 1rem;
}

.cllcw-login__form label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.cllcw-login__form input[type="text"],
.cllcw-login__form input[type="password"] {
	width: 100%;
	min-height: 44px;
	padding: 0.375rem 0.625rem;
	border: 1px solid #6c7378;
	border-radius: 4px;
}

.cllcw-login__form .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

.cllcw-login__form .login-remember input {
	width: 1.25rem;
	height: 1.25rem;
}

.cllcw-login__form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.5rem 1.75rem;
	border: 2px solid transparent;
	border-radius: 6px;
	background: #00539b;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.cllcw-login__form input[type="submit"]:hover,
.cllcw-login__form input[type="submit"]:focus {
	background: #003d73;
}

.cllcw-login__links a {
	color: #00539b;
	text-decoration: underline;
}

/* ---- Screen-reader-only utility (issue #77/#80) ----
   The checkout/account markup uses .screen-reader-text but relied on the
   theme to provide it; Divi doesn't. Scoped to the plugin's own wrappers,
   same rule as catalog.css. */

.cllcw-checkout .screen-reader-text,
.cllcw-cart .screen-reader-text,
.cllcw-account .screen-reader-text,
.cllcw-card .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Programmatic focus targets (review region, results container, error
   banners): they're divs, not controls — no ring needed on mouse focus,
   keep one for keyboard/AT focus via :focus-visible. */

[data-cllcw-review]:focus:not(:focus-visible) {
	outline: none;
}

/* ---- Account-step honeypot (issue #89) ----
   Invisible to people (paired with aria-hidden + tabindex="-1" in the
   markup); form-filling bots complete it and are turned away. NOT the
   sr-only pattern above — screen readers must not meet this field. */

.cllcw-checkout__leave-blank {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Donations (issue #141) ---- */

/* The Donate-page widget: soft, inviting, senior-friendly. No width or
   text-align of its own — Divi's Text > Align control on the hosting
   module positions it (Rob, 2026-08-07). */
.cllcw-donate label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
	color: #2c3338;
}

.cllcw-donate input[type="number"] {
	width: 10em;
	max-width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	border: 1px solid #b9c4b2;
	border-radius: 10px;
	background: #fff;
	font: inherit;
}

.cllcw-donate input[type="number"]:focus-visible {
	outline: 2px solid #0d3f12;
	outline-offset: 2px;
	border-color: #0d3f12;
}

/* Orange pill button, matching the site's Donate Now styling. */
.cllcw-donate .cllcw-button--primary {
	background: #a64a08; /* brand orange, WCAG AA shade (4.5:1+ with white text; matches the site's Donate Now buttons after the 2026-08-17 a11y pass) */
	border-radius: 999px;
	padding: 0.65rem 1.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.95em;
}

.cllcw-donate .cllcw-button--primary:hover,
.cllcw-donate .cllcw-button--primary:focus {
	background: #0d3f12; /* brand green */
}

.cllcw-donate .cllcw-button--primary:focus-visible {
	outline: 2px solid #0d3f12;
	outline-offset: 2px;
}

/* Review-step and cart donation notices: quiet card, not an alert. */
.cllcw-checkout__donation,
.cllcw-cart__donation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 1rem 0;
	padding: 0.85rem 1.1rem;
	background: #f2f6ef;
	border: 1px solid #dde6d5;
	border-radius: 10px;
}

.cllcw-checkout__donation .cllcw-checkout__hint {
	flex-basis: 100%;
}

.cllcw-checkout__donation-add {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.cllcw-checkout__donation-add input[type="number"] {
	width: 8em;
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	border: 1px solid #b9c4b2;
	border-radius: 10px;
	background: #fff;
	font: inherit;
}

.cllcw-checkout__donation-refund-note {
	font-size: 0.95em;
	color: #50575e;
}

/* "Is this your account, or are you registering someone else?" — the
   deliberate second step before an email change is sent anywhere. It reads
   as a stop sign, so it borrows the error styling and adds room for the
   two choices. */
.cllcw-account__intent h2 {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	color: inherit;
}

.cllcw-account__intent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 0.75rem;
}

.cllcw-account__intent-actions form,
.cllcw-account__intent-actions p {
	margin: 0;
}

/* ------------------------------------------------------------------
 * Show/hide password toggle (checkout.js). The button sits inside the
 * field row so it reads as part of the input; it is a real button with
 * a visible "Show"/"Hide" word rather than an eye icon, because the
 * audience is senior and icon-only controls tested badly.
 * ------------------------------------------------------------------ */
.cllcw-pw {
	display: flex;
	align-items: stretch;
	gap: 6px;
	max-width: 100%;
}

.cllcw-pw input[type="password"],
.cllcw-pw input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
}

.cllcw-pw__toggle {
	flex: 0 0 auto;
	padding: 0 14px;
	min-height: 44px; /* WCAG 2.1 AA target size, senior audience. */
	border: 1px solid #6b6b6b;
	border-radius: 4px;
	background: #f4f4f4;
	color: #1f1f1f;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.cllcw-pw__toggle:hover {
	background: #e6e6e6;
}

.cllcw-pw__toggle[aria-pressed="true"] {
	background: #dcdcdc;
}

.cllcw-pw__toggle:focus-visible {
	outline: 3px solid #a64a08;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * One-time password reveal (checkout's new-account step and the account
 * page's password form share it). Deliberately loud and deliberately
 * large: this is read off a screen and copied onto paper, often by a
 * helper standing at the registration desk.
 * ------------------------------------------------------------------ */
.cllcw-checkout__reveal {
	border: 3px solid #1a1a1a;
	border-radius: 4px;
	padding: 20px;
	margin: 20px 0;
	background: #fffbe6;
}

.cllcw-checkout__reveal > h3:first-child,
.cllcw-checkout__reveal > p:first-child {
	margin-top: 0;
}

.cllcw-checkout__reveal-value {
	margin-top: 0;
}

.cllcw-checkout__reveal-value code {
	font-size: 48px;
	letter-spacing: 0.08em;
	font-family: Menlo, Consolas, "Courier New", monospace;
	overflow-wrap: anywhere;
	background: none;
	padding: 0;
}

/* The account page's password section is a distinct block of business —
 * keep it visually separate from the contact-info form above it. */
.cllcw-account__password {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #d5d5d5;
}