/* ==========================================================================
   My Account, Cart & Checkout — the light neomorphic surface
   --------------------------------------------------------------------------
   Loaded on account pages AND on cart/checkout (see idc_woo_scripts in
   functions.php) — the same light neomorphic redesign built for My Account,
   carried onto the rest of the purchase flow so a buyer never crosses back
   into the sitewide dark theme between Buy Tickets and their tickets email.

   Every colour, radius, font and shadow here is an existing token from
   style.css. Nothing new is invented: --gold, --crimson, --bg-card, --border,
   --text, --text-muted, --radius-*, --font-heading. If a value needs changing,
   it changes in style.css and this follows.

   Scoping: every rule is prefixed with .idc-light-surface or .idc-acct.
   .idc-light-surface is a body class (idc_light_surface_body_class() in
   functions.php) added on account pages, cart and checkout ONLY — Shop and
   single Product still share woo.css's dark styling and must not shift.
   Deliberately not the real .woocommerce-account/-cart/-checkout classes
   WooCommerce itself adds: reusing those directly would mean any future
   WooCommerce or plugin CSS keyed off them reaches pages it was never meant
   to, on a class this file does not own.

   No !important. No bare element selectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared surface — the card treatment used across every account screen
   -------------------------------------------------------------------------- */

.idc-light-surface .idc-acct {
	color: var(--text);
}

.idc-light-surface .idc-acct-h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.6rem);
	font-weight: 600;
	color: var(--text);
	margin: 32px 0 14px;
	letter-spacing: .01em;
}

.idc-light-surface .idc-acct-h2:first-child {
	margin-top: 0;
}

.idc-light-surface .idc-acct-intro {
	color: var(--text-muted);
	margin: 0 0 20px;
	line-height: 1.65;
}

.idc-light-surface .idc-acct-empty {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 36px 28px;
	text-align: center;
}

.idc-light-surface .idc-acct-empty p {
	color: var(--text-muted);
	max-width: 46ch;
	margin: 0 auto 22px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   2. Dashboard — stats and quick actions
   -------------------------------------------------------------------------- */

.idc-light-surface .idc-stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 8px;
}

.idc-light-surface .idc-stat {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 20px 16px;
	text-align: center;
}

/*
 * LINING FIGURES, OR THE NUMBERS ARE UNREADABLE.
 *
 * Cormorant Garamond ships OLDSTYLE figures by default: 1 renders as a shape
 * almost identical to a small-cap I, and 0 as an O. On the account header this
 * meant "TOTAL ORDERS 1 / PENDING 1 / CONFIRMED 0" displayed as "I / I / O" —
 * a customer could not read their own order count, and it looked like a
 * rendering fault rather than a number.
 *
 * Applied to the older .ma-stat-value too, which has the same problem and the
 * same font.
 */
.idc-light-surface .idc-stat-value,
.idc-light-surface .ma-stat-value,
.idc-light-surface .idc-recent-no,
.idc-light-surface .idc-order-number {
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.idc-light-surface .idc-stat-value {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--gold);
}

.idc-light-surface .idc-stat-label {
	display: block;
	margin-top: 6px;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.idc-light-surface .idc-action-grid,
.idc-light-surface .idc-ticket-list,
.idc-light-surface .idc-order-list,
.idc-light-surface .idc-recent-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.idc-light-surface .idc-action-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
}

.idc-light-surface .idc-action {
	position: relative;
	display: block;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 20px 46px 20px 20px;
	text-decoration: none;
	height: 100%;
	transition: border-color .18s ease, transform .18s ease;
}

.idc-light-surface .idc-action:hover,
.idc-light-surface .idc-action:focus-visible {
	border-color: var(--border-hover);
	transform: translateY(-2px);
}

/* Focus must be visible on a dark surface, so it is a ring, not a hue shift. */
.idc-light-surface .idc-action:focus-visible,
.idc-light-surface .idc-ticket-code:focus-visible,
.idc-light-surface .idc-recent > a:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.idc-light-surface .idc-action-title {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text);
}

.idc-light-surface .idc-action-desc {
	display: block;
	margin-top: 5px;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--text-muted);
}

.idc-light-surface .idc-action-arrow {
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	color: var(--gold);
	font-size: 1.2rem;
	transition: transform .18s ease;
}

.idc-light-surface .idc-action:hover .idc-action-arrow {
	transform: translateY(-50%) translateX(3px);
}

/* --------------------------------------------------------------------------
   3. Tickets
   -------------------------------------------------------------------------- */

.idc-light-surface .idc-ticket-list,
.idc-light-surface .idc-order-list {
	display: grid;
	gap: 16px;
}

.idc-light-surface .idc-order {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 22px;
	/* A gold hairline down the leading edge — the same accent the checkout uses. */
	border-left: 3px solid var(--gold-dark);
}

/*
 * .idc-ticket gets the SAME neomorphic bevel + shadow pair defined once, on
 * .myaccount-section, for the dashboard (--neo-surface/--neo-raised). This
 * page sits inside that same wrapper, so reusing the tokens rather than
 * inventing a second set is what keeps "flat in dark mode" from recurring
 * here the way it did on the dashboard before that fix.
 */
.idc-light-surface .idc-ticket {
	background: var(--neo-surface);
	box-shadow: var(--neo-raised);
	border-radius: var(--radius-lg);
	padding: 22px;
	transition: box-shadow .25s ease, transform .25s ease;
}

.idc-light-surface .idc-ticket:hover {
	box-shadow: var(--neo-hover);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.idc-light-surface .idc-ticket { transition: none; }
	.idc-light-surface .idc-ticket:hover { transform: none; }
}

.idc-light-surface .idc-ticket-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}

.idc-light-surface .idc-ticket-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	color: var(--gold);
	background: rgba(var(--gold-rgb),.1);
	box-shadow: var(--neo-inset);
}

.idc-light-surface .idc-ticket-head-text { min-width: 0; }

.idc-light-surface .idc-ticket-head-top {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.idc-light-surface .idc-ticket-day {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gold);
}

.idc-light-surface .idc-ticket-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .86rem;
	color: var(--text-dim);
}

.idc-light-surface .idc-ticket-name {
	font-family: var(--font-heading);
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--text);
	margin: 0;
	/* Ticket names on this site are long. Wrap, never overflow. */
	overflow-wrap: break-word;
}

/*
 * Body splits into the QR + facts on the left and the arrival state on the
 * right, with a vertical divider between — the divider is a border on
 * .idc-ticket-main rather than a separate element, so there is nothing to
 * render when the grid collapses to one column on a narrow screen.
 */
.idc-light-surface .idc-ticket-body {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
}

.idc-light-surface .idc-ticket-main {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding-right: 24px;
	border-right: 1px solid var(--border);
	min-width: 0;
}

.idc-light-surface .idc-ticket-side {
	flex-shrink: 0;
	width: 220px;
}

@media (max-width: 640px) {
	.idc-light-surface .idc-ticket-body { grid-template-columns: 1fr; }
	.idc-light-surface .idc-ticket-main {
		padding-right: 0;
		border-right: none;
		padding-bottom: 20px;
		border-bottom: 1px solid var(--border);
	}
	.idc-light-surface .idc-ticket-side { width: 100%; }
}

.idc-light-surface .idc-ticket .idc-qr { flex-shrink: 0; }

.idc-light-surface .idc-ticket-meta,
.idc-light-surface .idc-order-meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 18px;
	margin: 0;
	font-size: .9rem;
	min-width: 0;
}

.idc-light-surface .idc-ticket-meta dt,
.idc-light-surface .idc-order-meta dt {
	color: var(--text-dim);
}

.idc-light-surface .idc-ticket-meta dd,
.idc-light-surface .idc-order-meta dd {
	margin: 0;
	color: var(--text);
}

.idc-light-surface .idc-ticket-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .95rem;
	letter-spacing: .06em;
	color: var(--gold-light);
	background: rgba(var(--gold-rgb), .1);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 2px 8px;
	user-select: all;
}

/*
 * A real pill, not plain paragraph text — background + a decorative dot
 * (::before, not a separate element) so the shape and the sentence both carry
 * the state, and a colour-blind or screen-reader user still gets the words.
 */
.idc-light-surface .idc-ticket-state {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	font-size: .82rem;
	font-weight: 600;
}

.idc-light-surface .idc-ticket-state::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.idc-light-surface .idc-ticket-state.is-ready  { color: var(--success); background: rgba(74,222,128,.12); }
.idc-light-surface .idc-ticket-state.is-part   { color: var(--gold-light); background: rgba(var(--gold-rgb),.12); }
.idc-light-surface .idc-ticket-state.is-used   { color: var(--text-dim); background: rgba(255,255,255,.05); }

.idc-light-surface .idc-ticket-hint {
	margin: 0;
	font-size: .84rem;
	line-height: 1.6;
	color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   4. Orders
   -------------------------------------------------------------------------- */

.idc-light-surface .idc-order-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.idc-light-surface .idc-order-number {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}

.idc-light-surface .idc-order-number a {
	color: var(--text);
	text-decoration: none;
}

.idc-light-surface .idc-order-number a:hover {
	color: var(--gold);
}

.idc-light-surface .idc-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid currentColor;
}

.idc-light-surface .idc-badge--done     { color: var(--success); }
.idc-light-surface .idc-badge--active   { color: var(--gold); }
.idc-light-surface .idc-badge--stopped  { color: var(--error); }
.idc-light-surface .idc-badge--refunded { color: var(--text-muted); }
.idc-light-surface .idc-badge--neutral  { color: var(--neutral); }

.idc-light-surface .idc-order-items {
	list-style: none;
	margin: 0 0 14px;
	padding: 14px 0 0;
	border-top: 1px solid var(--border);
	font-size: .9rem;
}

.idc-light-surface .idc-order-items li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 4px 0;
	color: var(--text-muted);
}

.idc-light-surface .idc-order-item-name {
	overflow-wrap: break-word;
}

.idc-light-surface .idc-order-item-qty {
	flex: none;
	color: var(--gold);
	font-weight: 600;
}

.idc-light-surface .idc-order-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   4b. Order details
   -------------------------------------------------------------------------- */

.idc-light-surface .idc-vo-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 18px;
}

.idc-light-surface .idc-vo-label {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.idc-light-surface .idc-vo-number {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	font-weight: 700;
	color: var(--gold);
	margin: 2px 0 0;
	font-variant-numeric: lining-nums tabular-nums;
}

.idc-light-surface .idc-vo-meta {
	margin-bottom: 16px;
}

/* WooCommerce's status sentence, kept for its filter but demoted below the badge
   so the two do not compete to be the headline. */
.idc-light-surface .idc-vo-status-line {
	color: var(--text-muted);
	font-size: .92rem;
	line-height: 1.65;
	margin: 0 0 8px;
}

.idc-light-surface .idc-vo-status-line mark {
	background: none;
	color: var(--text);
	font-weight: 600;
}

.idc-light-surface .idc-vo-notes {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.idc-light-surface .idc-vo-notes li {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 14px 18px;
}

.idc-light-surface .idc-vo-notes .meta {
	font-size: .78rem;
	color: var(--text-dim);
	margin: 0 0 6px;
}

.idc-light-surface .idc-vo-notes .description p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. Recent orders strip on the dashboard
   -------------------------------------------------------------------------- */

.idc-light-surface .idc-recent-list {
	display: grid;
	gap: 8px;
	margin-bottom: 20px;
}

.idc-light-surface .idc-recent > a {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: 14px;
	align-items: center;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 14px 18px;
	text-decoration: none;
	color: var(--text);
	transition: border-color .18s ease;
}

.idc-light-surface .idc-recent > a:hover {
	border-color: var(--border-hover);
}

.idc-light-surface .idc-recent-no     { font-weight: 700; color: var(--gold); }
.idc-light-surface .idc-recent-date   { color: var(--text-dim); font-size: .88rem; }
.idc-light-surface .idc-recent-status { color: var(--text-muted); font-size: .85rem; }
.idc-light-surface .idc-recent-total  { font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Login / register cards
   -------------------------------------------------------------------------- */

.idc-light-surface .idc-auth-title {
	font-family: var(--font-heading);
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	font-weight: 600;
	color: var(--text);
	margin: 0 0 6px;
}

.idc-light-surface .idc-auth-sub {
	color: var(--text-muted);
	font-size: .92rem;
	margin: 0 0 22px;
}

.idc-light-surface .idc-auth-card--solo {
	max-width: 460px;
	margin-inline: auto;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
}

/* --------------------------------------------------------------------------
   6b. Account forms — login, register, addresses, account details
   --------------------------------------------------------------------------
   Replaces a block of ~128 dead lines in woo.css that styled
   .myaccount-auth-forms, a class no template has emitted for some time. The
   intent in there was right — labels above inputs, a coloured focus ring,
   dimmed placeholders — it simply never reached the page.

   Rebuilt against the classes WooCommerce actually emits, and with a GOLD focus
   ring rather than the crimson one in the dead block: crimson is the error
   colour on this site, and using it for focus meant a correctly focused field
   looked like a rejected one.
   -------------------------------------------------------------------------- */

/*
 * NOTE ON OWNERSHIP. woo.css already styles the account form rows, labels,
 * inputs and buttons — 31 rules under .woocommerce-MyAccount-content, which
 * went live again once page-myaccount.php started emitting that wrapper. Those
 * rules are not duplicated here; a second definition of the same input would be
 * two places to change one border colour.
 *
 * What follows is only what woo.css does NOT cover, plus one deliberate
 * override.
 */

/* THE DELIBERATE OVERRIDE: focus is gold, not crimson.
 *
 * woo.css focuses form fields with --crimson and a crimson glow. Crimson is this
 * site's ERROR colour, so a correctly focused field looked exactly like a
 * rejected one — and on a password field that is genuinely alarming. Gold is the
 * accent colour and reads as "you are here".
 *
 * The extra .idc-light-surface is what wins the specificity contest against
 * woo.css's own rule; there is no !important anywhere in this file. */
.idc-light-surface .woocommerce-MyAccount-content .form-row input:focus,
.idc-light-surface .woocommerce-MyAccount-content .form-row select:focus,
.idc-light-surface .woocommerce-MyAccount-content .form-row textarea:focus,
.idc-light-surface #customer_login .form-row input:focus {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .18);
	outline: none;
}

/* Error and success states. WooCommerce marks the row it rejected with
   .woocommerce-invalid; woo.css styles neither state, so a rejected field looked
   identical to an untouched one. */
.idc-light-surface .woocommerce-invalid input,
.idc-light-surface .woocommerce-invalid select {
	border-color: var(--crimson-light);
}

.idc-light-surface .woocommerce-invalid input:focus,
.idc-light-surface .woocommerce-invalid select:focus {
	border-color: var(--crimson-light);
	box-shadow: 0 0 0 3px rgba(var(--crimson-rgb), .2);
}

.idc-light-surface .woocommerce-validated input {
	border-color: var(--success);
}

/* Consistent control heights. woo.css sets padding but no minimum, so a select
   and a text input in the same row sat at different heights. */
.idc-light-surface .woocommerce-MyAccount-content .form-row input,
.idc-light-surface .woocommerce-MyAccount-content .form-row select {
	min-height: 48px;
}

/* The required asterisk. woo.css colours it crimson on checkout, which on a dark
   card reads as an error marker beside every single label. Gold states the same
   fact without the alarm — and WooCommerce's own .screen-reader-text "Required"
   is still there for anyone not seeing colour at all. */
.idc-light-surface .woocommerce-MyAccount-content .required {
	color: var(--gold);
	text-decoration: none;
	border: 0;
}

/* Remember-me sits inline; the flex-column rule above would otherwise stack the
   checkbox above its own label. */
.idc-light-surface .woocommerce-form-login__rememberme {
	flex-direction: row;
	align-items: center;
	gap: 9px;
	order: 0;
	margin-bottom: 16px;
	color: var(--text-muted);
	cursor: pointer;
}

.idc-light-surface .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	min-height: 0;
	accent-color: var(--gold);
	flex: none;
}

.idc-light-surface .woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: .9rem;
}

.idc-light-surface .woocommerce-LostPassword a {
	color: var(--text-muted);
}

.idc-light-surface .woocommerce-LostPassword a:hover,
.idc-light-surface .woocommerce-LostPassword a:focus-visible {
	color: var(--gold);
}

/* Buttons: full width in a form, because a half-width submit on a phone is a
   missed tap. Colour comes from the theme's own .btn classes on the element. */
.idc-light-surface .woocommerce-form-login__submit,
.idc-light-surface .woocommerce-form-register__submit {
	width: 100%;
	min-height: 50px;
}

/* --------------------------------------------------------------------------
   6c. Inline validation messages
   --------------------------------------------------------------------------
   Two states, visually distinct and worded differently: an ERROR blocks the
   save, a HINT does not. The email-typo suggestion is a hint — somebody may
   genuinely own gmial.com, and their ticket matters more than our opinion of
   their domain.

   The message is always TEXT. Colour and the border are decoration on top of a
   sentence, never the signal itself.
   -------------------------------------------------------------------------- */

.idc-light-surface .idc-field-msg {
	display: block;
	margin-top: 6px;
	font-size: .84rem;
	line-height: 1.5;
}

.idc-light-surface .idc-field-msg:empty {
	/* Collapse entirely when there is nothing to say, so an empty span does not
	   add a gap under every field on the form. */
	display: none;
}

.idc-light-surface .idc-field-msg.is-error {
	color: var(--error);
}

.idc-light-surface .idc-field-msg.is-hint {
	color: var(--gold-light);
}

/* A hint is not a failure, so the field keeps its ordinary border and only the
   text appears. Without this, .idc-has-hint would inherit nothing and the
   distinction from an error would exist only in the message colour. */
.idc-light-surface .idc-has-hint input {
	border-color: var(--border);
}

/* --------------------------------------------------------------------------
   7. Navigation — active state
   -------------------------------------------------------------------------- */

.myaccount-nav .ma-nav-link.is-active {
	background: rgba(var(--gold-rgb), .12);
	border-color: var(--border-hover);
	color: var(--gold-light);
}

.myaccount-nav .ma-nav-link:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.idc-light-surface .idc-stat-row {
		/* Three across is too tight on a phone; two-plus-one reads better than
		   three cramped columns. */
		grid-template-columns: repeat(2, 1fr);
	}

	.idc-light-surface .idc-stat-row > :last-child {
		grid-column: 1 / -1;
	}

	.idc-light-surface .idc-recent > a {
		/* The four-column strip cannot hold on a narrow screen without either
		   overflowing or truncating the order number. Stack instead. */
		grid-template-columns: 1fr auto;
		row-gap: 6px;
	}

	.idc-light-surface .idc-ticket,
	.idc-light-surface .idc-order {
		padding: 18px 16px;
	}

	.idc-light-surface .idc-ticket-meta,
	.idc-light-surface .idc-order-meta {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.idc-light-surface .idc-ticket-meta dt,
	.idc-light-surface .idc-order-meta dt {
		margin-top: 8px;
		font-size: .74rem;
		letter-spacing: .05em;
		text-transform: uppercase;
	}

	.idc-light-surface .idc-order-actions .button {
		/* Touch targets, and full width so two buttons never wrap awkwardly. */
		flex: 1 1 100%;
		text-align: center;
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------------
   9. Reduced motion
   --------------------------------------------------------------------------
   woo.css honours prefers-reduced-motion nowhere at all, which is why this
   block exists here rather than being assumed to be inherited.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.idc-light-surface .idc-action,
	.idc-light-surface .idc-action-arrow,
	.idc-light-surface .idc-recent > a {
		transition: none;
	}

	.idc-light-surface .idc-action:hover,
	.idc-light-surface .idc-action:focus-visible {
		transform: none;
	}

	.idc-light-surface .idc-action:hover .idc-action-arrow {
		transform: translateY(-50%);
	}
}

/* ==========================================================================
   Dashboard redesign — one light neomorphic theme
   --------------------------------------------------------------------------
   WHY THERE IS NO DARK VARIANT HERE ANY MORE.

   This started as a dual-theme system. Four separate attempts to make the
   dark variant read as neomorphic all failed, in this order:
     1. raised shadow/highlight opacity on the near-black base;
     2. added a bevel gradient derived from --bg-card via color-mix;
     3. gave the surface its own lighter standalone base (#3D2E29);
     4. inverted the emphasis so the gold/white highlight, not the black
        shadow, carried the depth.
   Each was a real improvement and none of them got there. The reason is
   structural, not a tuning error: neomorphism needs a mid-tone surface with
   room BOTH lighter and darker than itself. The site's dark palette
   (--bg #09090F, --bg-card #160E0E) is near-black, so the darker half of
   every shadow pair has nowhere to go — a black shadow on a near-black page
   renders almost nothing. Lightening the surface enough to fix that stopped
   it looking like the site's dark theme at all, which defeated the point.

   So the account area is now LIGHT ONLY, which is the variant that
   demonstrably works. The tokens below are exactly the light values from the
   old [data-idc-theme="light"] block, promoted to the base rule — this is a
   deletion of the dark path, not a re-tune of it.

   Scoped to .myaccount-section (My Account) and, now, body.idc-light-surface
   .woo-layout (Cart/Checkout's own content wrapper — see the file docblock)
   — extending the same proven light tokens rather than re-deriving them, so
   there is one definition of this palette, not two that can drift apart.
   .woo-layout is ALSO Shop/Product's wrapper (woocommerce/global/wrapper-
   start.php), so the body-class compound is load-bearing: without it these
   tokens would leak onto Shop and Product too. Home, gallery and tickets are
   still untouched either way.
   ========================================================================== */

.myaccount-section,
body.idc-light-surface .woo-layout {
	/* Same token NAMES the rest of the site already reads, so every existing
	   rule written with var(--bg-card) or var(--text) — here and in woo.css's
	   myaccount and ma-stat rules — picks these up with no rewriting.

	   NOTE: do not write a CSS selector containing an asterisk-slash inside a
	   comment here. An earlier version of this note contained ".myaccount-*"
	   followed by "/", which closed the comment early; the parser then ate the
	   next declaration whole while recovering, so --bg silently never got set
	   and fell back to the sitewide near-black. That produced a black page and
	   black form inputs while every later token in this block worked fine. */
	--bg:            #EAE3D6;
	--bg-surface:    #F1EAE0;
	--bg-card:       #F3ECE1;
	--text:          #2B2119;
	--text-muted:    #6B5A47;
	--text-dim:      #93826D;
	--border:        rgba(154,125,26,.16);
	--border-hover:  rgba(154,125,26,.38);

	/* --gold/--crimson/--saffron are deliberately NOT redefined: the warm
	   festival accent stays the site's own in both the light account area and
	   the dark pages around it. */

	--neo-surface: linear-gradient(145deg,
		color-mix(in srgb, var(--bg-card) 100%, white 40%) 0%,
		var(--bg-card) 55%,
		color-mix(in srgb, var(--bg-card) 100%, black 6%) 100%);

	--neo-raised:  7px 7px 15px rgba(148,125,92,.4), -6px -6px 13px rgba(255,255,255,.95), inset 0 1px 1px rgba(255,255,255,.6);
	--neo-hover:   9px 9px 18px rgba(148,125,92,.45), -7px -7px 15px rgba(255,255,255,1), inset 0 1px 1px rgba(255,255,255,.7);
	--neo-inset:   inset 4px 4px 9px rgba(148,125,92,.35), inset -3px -3px 7px rgba(255,255,255,.9);
	--neo-pressed: inset 3px 3px 7px rgba(148,125,92,.4), inset -2px -2px 5px rgba(255,255,255,.85);

	color-scheme: light;
}

/* --------------------------------------------------------------------------
   The fixed site header, over a light page
   --------------------------------------------------------------------------
   .site-header is position:fixed with NO background until .scrolled, and its
   nav links are color: var(--text) — near-white (#F5F0E8) from style.css.
   That is correct over the dark pages it was designed for, and unreadable
   over this light one: the nav rendered as pale grey on cream.

   Scoped to body.idc-light-surface — our own body class (see the file
   docblock above), added on account pages, cart and checkout, wherever the
   page behind the fixed header is actually light — so only those pages'
   header is affected. Shop, Product and every other page keep the
   light-on-dark header exactly as it is.
   -------------------------------------------------------------------------- */

body.idc-light-surface .main-nav ul li a,
body.idc-light-surface .logo h2 span,
body.idc-light-surface .menu-toggle span {
	color: #2B2119;
}

body.idc-light-surface .menu-toggle span {
	background: #2B2119;
}

/* The Buy Tickets pill is crimson-filled with light text — that contrast is
   already correct on a light background, so it keeps its own colour. */
body.idc-light-surface .main-nav ul li.buy-tickets a {
	color: #F5F0E8;
}

/* Once scrolled the header paints its own near-black backdrop, at which point
   the original light-on-dark colours are the correct ones again. */
body.idc-light-surface .site-header.scrolled .main-nav ul li a,
body.idc-light-surface .site-header.scrolled .logo h2 span {
	color: var(--text);
}

body.idc-light-surface .site-header.scrolled .menu-toggle span {
	background: var(--text);
}

/* --------------------------------------------------------------------------
   Correcting woo.css's dark-theme assumptions inside a light container
   --------------------------------------------------------------------------
   woo.css was written for dark pages, and most of it re-themes for free
   because it reads tokens this block redefines. Two categories do NOT, and
   have to be corrected explicitly:

   1. WHITE OVERLAYS AT 2-4% OPACITY. woo.css uses rgba(255,255,255,0.02-0.04)
      for hover states, which reads as a faint lift on near-black and is
      completely invisible on cream. Replaced with an equivalently faint DARK
      tint, which is the same idea inverted for a light surface.

   2. FORM INPUTS. woo.css sets input background to var(--bg) — correct on a
      dark page, where the field then sits darker than its card. On cream that
      resolves to cream-on-cream, so the field loses all definition. In light
      neomorphism an input should read as PRESSED IN, which is what
      --neo-inset already expresses, so the fields get that rather than a flat
      recolour.

   This is the layer that reconciles WooCommerce's own styling with this
   section's palette, instead of patching each symptom as it is spotted.
   -------------------------------------------------------------------------- */

.myaccount-section .ma-nav-link:hover,
.myaccount-section .woocommerce-MyAccount-content table tbody tr:hover,
.myaccount-section .payment_methods li:hover {
	background: rgba(43,33,25,.05);
}

.myaccount-section .woocommerce-MyAccount-content .form-row input,
.myaccount-section .woocommerce-MyAccount-content .form-row select,
.myaccount-section .woocommerce-MyAccount-content .form-row textarea {
	/* Slightly recessed from the card it sits on, plus the inset shadow pair,
	   so the field reads as a well rather than a flat panel. */
	background: color-mix(in srgb, var(--bg-card) 100%, black 5%);
	box-shadow: var(--neo-inset);
	border-color: transparent;
}

/* Focus keeps the gold ring established earlier in this file, and adds the
   raised-rim highlight so a focused field visibly lifts out of its well. */
.myaccount-section .woocommerce-MyAccount-content .form-row input:focus,
.myaccount-section .woocommerce-MyAccount-content .form-row select:focus,
.myaccount-section .woocommerce-MyAccount-content .form-row textarea:focus {
	background: var(--bg-card);
	border-color: var(--gold);
}

/* The fieldset around "Password change" gets the same card treatment as every
   other panel in here, rather than a bare 1px border on cream. */
.myaccount-section .woocommerce-MyAccount-content fieldset {
	background: var(--neo-surface);
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--neo-raised);
}

/* The theme-toggle switch's styles lived here. Removed along with the dark
   variant — there is nothing left to toggle between. The button itself is
   gone from page-myaccount.php and its handler from myaccount-theme.js. */

/* --------------------------------------------------------------------------
   Hero, background image + neomorphic frame
   -------------------------------------------------------------------------- */

.myaccount-header {
	position: relative;
	overflow: hidden;
	box-shadow: var(--neo-raised);
	border-color: transparent;
}

.myaccount-header::before {
	/* The photo. A pseudo-element rather than an img, so the dark gradient
	   overlay can sit on top of it in one paint without a second element. */
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--idc-hero-image);
	background-size: cover;
	background-position: center 35%;
	opacity: .38;
	z-index: 0;
}

.myaccount-header::after {
	/* The overlay, in the light palette's cream rather than the old near-black
	   — heavier at the edges than the centre, where the avatar and name sit, so
	   the photo still reads as a photo rather than being flattened to texture. */
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(234,227,214,.95) 0%, rgba(234,227,214,.8) 45%, rgba(234,227,214,.92) 100%);
	z-index: 1;
}

.myaccount-header > * {
	position: relative;
	z-index: 2;
}

.myaccount-gravatar {
	box-shadow: 0 0 0 4px var(--bg-card), var(--neo-raised);
}

.myaccount-tickets-link {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 12px;
	background: rgba(var(--gold-rgb),.12);
	border: 1px solid rgba(var(--gold-rgb),.3);
	border-radius: var(--radius-pill);
	color: var(--gold);
	font-size: .78rem;
	font-weight: 600;
	text-decoration: none;
}

.myaccount-header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Elevated cards, top summary row, dashboard metric row, sidebar
   -------------------------------------------------------------------------- */

.ma-stat,
.idc-light-surface .idc-stat,
.myaccount-nav {
	background: var(--neo-surface);
	box-shadow: var(--neo-raised);
	border-color: transparent;
	transition: box-shadow .25s ease, transform .25s ease, background .25s ease;
}

.ma-stat:hover,
.idc-light-surface .idc-stat:hover {
	box-shadow: var(--neo-hover);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.ma-stat, .idc-light-surface .idc-stat { transition: none; }
	.ma-stat:hover, .idc-light-surface .idc-stat:hover { transform: none; }
}

.idc-light-surface .idc-stat {
	position: relative;
	text-align: center;
	padding: 24px 20px;
}

.idc-light-surface .idc-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	margin-bottom: 10px;
	box-shadow: var(--neo-inset);
}

/*
 * FIX: the active-item gold highlight never rendered. woo.css's rule targets
 * .ma-nav-link.active, but page-myaccount.php has only ever output
 * .ma-nav-link.is-active (matching wc_is_current_account_menu_item()'s own
 * naming) — the two classes never matched, so the sidebar's current-page
 * highlight has been dead code since it was written. Fixed here rather than
 * in woo.css, keeping this feature's changes contained to the files already
 * in scope for it.
 */
.idc-light-surface .ma-nav-link.is-active {
	background: rgba(var(--gold-rgb),.1);
	color: var(--gold);
	box-shadow: var(--neo-inset);
}

/* Three restrained accent tones, matching the reference's colour-coding,
   ticket (gold), people (a controlled teal, informational only, not a new
   brand colour), orders (a controlled soft purple, selection/action accent
   per the design brief). Neither hue appears anywhere else on the site. */
.idc-light-surface .idc-stat--tickets .idc-stat-icon { color: var(--gold); background: rgba(var(--gold-rgb),.1); }
.idc-light-surface .idc-stat--people  .idc-stat-icon { color: #5FB8A8; background: rgba(95,184,168,.12); }
.idc-light-surface .idc-stat--orders  .idc-stat-icon { color: #9C8FD6; background: rgba(156,143,214,.12); }

/* --------------------------------------------------------------------------
   Recent orders, card rows, not table rows
   -------------------------------------------------------------------------- */

.idc-light-surface .idc-recent-list {
	display: grid;
	gap: 12px;
}

.idc-light-surface .idc-recent > a {
	display: grid;
	grid-template-columns: auto 1fr auto auto auto;
	align-items: center;
	gap: 14px;
	background: var(--neo-surface);
	border-radius: var(--radius-lg);
	padding: 16px 20px;
	box-shadow: var(--neo-raised);
	transition: box-shadow .25s ease, transform .25s ease;
}

.idc-light-surface .idc-recent > a:hover {
	box-shadow: var(--neo-hover);
	transform: translateY(-1px);
}

.idc-light-surface .idc-recent-icon {
	display: flex;
	color: var(--text-dim);
}

.idc-light-surface .idc-recent-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.idc-light-surface .idc-recent-status {
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	font-size: .76rem;
	font-weight: 600;
	background: rgba(255,255,255,.06);
	white-space: nowrap;
	justify-self: start;
}

.idc-light-surface .idc-recent-status--completed { color: var(--success); background: rgba(74,222,128,.12); }
.idc-light-surface .idc-recent-status--processing,
.idc-light-surface .idc-recent-status--on-hold    { color: var(--gold-light); background: rgba(var(--gold-rgb),.12); }
.idc-light-surface .idc-recent-status--pending,
.idc-light-surface .idc-recent-status--cancelled,
.idc-light-surface .idc-recent-status--failed,
.idc-light-surface .idc-recent-status--refunded    { color: var(--error); background: rgba(248,113,113,.1); }

.idc-light-surface .idc-recent-arrow {
	color: var(--text-dim);
	font-size: 1.4rem;
	line-height: 1;
}

@media (max-width: 680px) {
	.idc-light-surface .idc-recent > a {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"icon body arrow"
			"status status total";
		row-gap: 8px;
	}
	.idc-light-surface .idc-recent-icon   { grid-area: icon; }
	.idc-light-surface .idc-recent-body   { grid-area: body; }
	.idc-light-surface .idc-recent-arrow  { grid-area: arrow; }
	.idc-light-surface .idc-recent-status { grid-area: status; justify-self: start; }
	.idc-light-surface .idc-recent-total  { grid-area: total; justify-self: end; }
}

/* --------------------------------------------------------------------------
   Entry-code carousel, replaces a vertical list of QR blocks
   -------------------------------------------------------------------------- */

.idc-my-tickets-head { margin-bottom: 16px; }
.idc-my-tickets-head h3 { margin: 0 0 4px; font-family: var(--font-heading); color: var(--text); }
.idc-my-tickets-head p { margin: 0; color: var(--text-dim); font-size: .88rem; }

.idc-ticket-carousel {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Defensive: a flex/grid container that is itself an item somewhere up the
	   chain defaults to min-width:auto, which — same defect as the grid fix
	   above — refuses to shrink below its content's natural width. Explicit
	   here so this row can never re-trigger page-level horizontal scroll
	   regardless of what wraps it in future. */
	min-width: 0;
}

.idc-carousel-track {
	display: flex;
	/* flex:1, not the default 0 1 auto — this is what makes the track actually
	   fill the row between the two nav buttons rather than just sizing to its
	   own content and leaving the buttons floating with gaps. */
	flex: 1 1 0%;
	min-width: 0;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 6px 2px 14px;
	/* Scrollbar stays visible but quiet rather than the browser default, which
	   would be the one non-token-driven grey element on the page. */
	scrollbar-width: thin;
	scrollbar-color: var(--gold-dark) transparent;
}

.idc-tc-card {
	flex: 0 0 220px;
	scroll-snap-align: start;
	background: var(--neo-surface);
	border-radius: var(--radius-lg);
	padding: 18px;
	box-shadow: var(--neo-raised);
	text-align: center;
	transition: box-shadow .25s ease, transform .25s ease;
}

.idc-tc-card.is-active {
	box-shadow: var(--neo-hover), 0 0 0 1.5px rgba(var(--gold-rgb),.55);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.idc-tc-card { transition: none; }
	.idc-tc-card.is-active { transform: none; }
}

.idc-qr {
	width: 120px;
	height: 120px;
	margin: 0 auto 12px;
	/* The QR itself must stay perfectly sharp, no filter, blur or opacity on
	   this element or its canvas child, or a phone camera stops reading it. */
	background: #fff;
	border-radius: var(--radius-sm);
	padding: 6px;
	box-sizing: border-box;
}

.idc-tc-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--gold-light);
	margin-bottom: 8px;
	word-break: break-all;
}

.idc-tc-day {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gold);
}

.idc-tc-date { font-size: .82rem; color: var(--text-dim); margin-bottom: 6px; }

.idc-tc-type {
	font-size: .86rem;
	color: var(--text-muted);
	line-height: 1.4;
	margin-bottom: 8px;
}

.idc-tc-status { font-size: .82rem; font-weight: 600; }
.idc-tc-status--admitted { color: var(--success); }
.idc-tc-status--due { color: var(--crimson-light); }

.idc-carousel-nav {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--neo-surface);
	color: var(--text);
	border: none;
	box-shadow: var(--neo-raised);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: box-shadow .2s ease;
}

.idc-carousel-nav:hover { box-shadow: var(--neo-hover); }
.idc-carousel-nav:active { box-shadow: var(--neo-pressed); }

.idc-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
}

.idc-carousel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--border);
	border: none;
	padding: 0;
	cursor: pointer;
}

.idc-carousel-dot.is-active { background: var(--gold); }

@media (max-width: 600px) {
	.idc-tc-card { flex-basis: 78vw; }
	.idc-carousel-nav { display: none; }
}

/* ==========================================================================
   Extending the neomorphic system beyond Dashboard/My Tickets
   --------------------------------------------------------------------------
   Two different situations below, deliberately handled differently:

   1. ORDERS + ORDER DETAILS — orders.php and view-order.php are theme
      overrides (see their own docblocks), so their markup is ours: .idc-order,
      .idc-badge, etc. Restyled the same way .idc-ticket already was.

   2. ADDRESSES + PAYMENT METHODS + the order-details items table — genuinely
      WooCommerce core output with NO theme override at all
      (woocommerce/myaccount/my-address.php, payment-methods.php,
      order-details.php/order-details-customer.php ship unmodified). Targeted
      here by WooCommerce's OWN class names
      (.woocommerce-Address, .woocommerce-MyAccount-paymentMethods,
      .woocommerce-order-details, .woocommerce-customer-details) rather than
      forked into theme templates — a CSS reskin survives a WooCommerce update;
      a forked template has to be manually re-diffed against every one.
      Nothing here touches an id, a name attribute, a nonce field or a
      data-* attribute WooCommerce's own JS reads (payment token
      delete/set-default, the country→state field switch on the address
      form) — nothing needed to.
   ========================================================================== */

/* ---- 1. Orders list ---- */

.idc-light-surface .idc-order {
	/*
	 * The earlier rule (this file, §4) still sets border: 1px solid var(--border)
	 * on all four sides — overridden to none here so a flat border doesn't sit
	 * oddly on top of the new shadow. border-left is deliberately NOT touched:
	 * that same earlier rule's gold hairline down the leading edge is kept as
	 * an accent on the new surface, not replaced by it.
	 */
	background: var(--neo-surface);
	border: none;
	border-left: 3px solid var(--gold-dark);
	box-shadow: var(--neo-raised);
	transition: box-shadow .25s ease, transform .25s ease;
}

.idc-light-surface .idc-order:hover {
	box-shadow: var(--neo-hover);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.idc-light-surface .idc-order { transition: none; }
	.idc-light-surface .idc-order:hover { transform: none; }
}

/* Filled pill + a decorative dot (::before), not an outlined badge — matches
   the .idc-ticket-state / .idc-recent-status treatment already used
   elsewhere, so a status reads the same way everywhere in the account area. */
.idc-light-surface .idc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
}

.idc-light-surface .idc-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.idc-light-surface .idc-badge--done     { background: rgba(74,222,128,.12); }
.idc-light-surface .idc-badge--active   { background: rgba(var(--gold-rgb),.12); }
.idc-light-surface .idc-badge--stopped  { background: rgba(248,113,113,.1); }
.idc-light-surface .idc-badge--refunded { background: rgba(255,255,255,.06); }
.idc-light-surface .idc-badge--neutral  { background: rgba(255,255,255,.05); }

/*
 * Neomorphic buttons — raised / hover / pressed — shared by order actions,
 * pagination, payment-method actions and "Add payment method". Deliberately
 * targets the classes WooCommerce itself already outputs (.button,
 * .woocommerce-Button) rather than requiring a new class on every one of the
 * many places these get printed from core template loops.
 */
.idc-light-surface .idc-order-actions .button,
.idc-light-surface .woocommerce-pagination .button,
.idc-light-surface .woocommerce-MyAccount-paymentMethods .button,
.idc-light-surface a.button[href*="add-payment-method"] {
	display: inline-flex;
	align-items: center;
	background: var(--neo-surface);
	box-shadow: var(--neo-raised);
	border-radius: var(--radius-pill);
	padding: 8px 18px;
	color: var(--text);
	border: none;
	font-size: .82rem;
	font-weight: 600;
	transition: box-shadow .2s ease, color .2s ease;
}

.idc-light-surface .idc-order-actions .button:hover,
.idc-light-surface .woocommerce-pagination .button:hover,
.idc-light-surface .woocommerce-MyAccount-paymentMethods .button:hover,
.idc-light-surface a.button[href*="add-payment-method"]:hover {
	box-shadow: var(--neo-hover);
	color: var(--gold);
}

.idc-light-surface .idc-order-actions .button:active,
.idc-light-surface .woocommerce-pagination .button:active,
.idc-light-surface .woocommerce-MyAccount-paymentMethods .button:active,
.idc-light-surface a.button[href*="add-payment-method"]:active {
	box-shadow: var(--neo-pressed);
}

/* ---- 2. Order details — WooCommerce's own items table + address columns ---- */

.idc-light-surface .woocommerce-order-details,
.idc-light-surface .woocommerce-customer-details {
	background: var(--neo-surface);
	box-shadow: var(--neo-raised);
	border-radius: var(--radius-lg);
	padding: 24px;
	margin-top: 24px;
}

.idc-light-surface .woocommerce-order-details__title,
.idc-light-surface .woocommerce-column__title {
	font-family: var(--font-heading);
	color: var(--text);
}

.idc-light-surface table.woocommerce-table--order-details {
	background: transparent;
	border-collapse: collapse;
	width: 100%;
}

.idc-light-surface table.woocommerce-table--order-details th,
.idc-light-surface table.woocommerce-table--order-details td {
	border-color: var(--border);
	color: var(--text);
	padding: 10px 4px;
}

.idc-light-surface .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

@media (max-width: 640px) {
	.idc-light-surface .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   2b. Cart totals & checkout order review — the same surface, extended
   --------------------------------------------------------------------------
   .cart_totals and #order_review have no My Account equivalent, so unlike
   everything above there is no existing rule to widen — these are new.
   Same values as .idc-order/.woocommerce-order-details above: neo-surface
   background, no border, neo-raised shadow, so a buyer sees one continuous
   card language from Buy Tickets through to their emailed ticket.
   -------------------------------------------------------------------------- */

.idc-light-surface .cart_totals,
.idc-light-surface #order_review {
	background: var(--neo-surface);
	border: none;
	box-shadow: var(--neo-raised);
	border-radius: var(--radius-lg);
}

/* Row hover on the shared .shop_table markup (cart items, order review,
   order-details) — bare in woo.css at 2% white, which is the exact "invisible
   on cream" defect the correction layer below already fixes for My Account's
   own table wrapper. table.shop_table itself is unscoped in woo.css, so it
   also needs the fix here, not just under .woocommerce-MyAccount-content. */
.idc-light-surface table.shop_table tbody tr:hover {
	background: rgba(43,33,25,.05);
}

/* Checkout's billing/shipping fields — same "pressed in" treatment as My
   Account's own form-row inputs a few hundred lines up, and for the same
   reason: woo.css gives these a flat var(--bg-card) background, which on this
   palette is the exact colour of the card the field sits on. */
.idc-light-surface .woocommerce-checkout .form-row input,
.idc-light-surface .woocommerce-checkout .form-row select,
.idc-light-surface .woocommerce-checkout .form-row textarea,
.idc-light-surface .woocommerce-form-row input,
.idc-light-surface .woocommerce-form-row select,
.idc-light-surface .woocommerce-form-row textarea {
	background: color-mix(in srgb, var(--bg-card) 100%, black 5%);
	box-shadow: var(--neo-inset);
	border-color: transparent;
}

/* The cart's coupon field sits directly on the page, not on a card, so it
   recesses from --bg rather than --bg-card. */
.idc-light-surface .woocommerce-cart-form .coupon input#coupon_code {
	background: color-mix(in srgb, var(--bg) 100%, black 5%);
	box-shadow: var(--neo-inset);
	border-color: transparent;
}

/* Apply coupon / Update cart — secondary actions, same neomorphic pill as
   pagination and "Add payment method" above; the ghost-button treatment
   woo.css gives them (transparent + 1px border) is the same flat look
   already replaced everywhere else in this file. */
.idc-light-surface .woocommerce-cart-form .coupon button,
.idc-light-surface .woocommerce-cart-form .button[name="update_cart"] {
	background: var(--neo-surface);
	box-shadow: var(--neo-raised);
	border: none;
	color: var(--text);
}

.idc-light-surface .woocommerce-cart-form .coupon button:hover,
.idc-light-surface .woocommerce-cart-form .button[name="update_cart"]:hover {
	box-shadow: var(--neo-hover);
	color: var(--gold);
}

.idc-light-surface .woocommerce-cart-form .coupon button:active,
.idc-light-surface .woocommerce-cart-form .button[name="update_cart"]:active {
	box-shadow: var(--neo-pressed);
}

/* ---- 2. My Addresses ---- */

.idc-light-surface .woocommerce-Addresses.addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

@media (max-width: 640px) {
	.idc-light-surface .woocommerce-Addresses.addresses { grid-template-columns: 1fr; }
}

.idc-light-surface .woocommerce-Address {
	background: var(--neo-surface);
	box-shadow: var(--neo-raised);
	border-radius: var(--radius-lg);
	padding: 22px;
}

.idc-light-surface .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.idc-light-surface .woocommerce-Address-title h2 {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	color: var(--text);
	margin: 0;
}

.idc-light-surface .woocommerce-Address-title .edit {
	font-size: .78rem;
	font-weight: 600;
	color: var(--gold);
	text-decoration: none;
	white-space: nowrap;
}

.idc-light-surface .woocommerce-Address-title .edit:hover { color: var(--gold-light); }

.idc-light-surface .woocommerce-Address address {
	color: var(--text-muted);
	font-style: normal;
	line-height: 1.7;
	font-size: .92rem;
}

/* ---- 2. Payment methods ---- */

.idc-light-surface .woocommerce-MyAccount-paymentMethods {
	width: 100%;
	background: var(--neo-surface);
	box-shadow: var(--neo-raised);
	border-radius: var(--radius-lg);
	border-collapse: collapse;
	overflow: hidden;
}

.idc-light-surface .woocommerce-MyAccount-paymentMethods th,
.idc-light-surface .woocommerce-MyAccount-paymentMethods td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--border);
	color: var(--text);
	text-align: left;
}

.idc-light-surface .woocommerce-MyAccount-paymentMethods thead th {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.idc-light-surface .woocommerce-MyAccount-paymentMethods tr:last-child td {
	border-bottom: none;
}

/* The saved card a buyer will actually be charged on — a gold hairline down
   the row, the same accent used for the leading edge on order cards. */
.idc-light-surface .woocommerce-MyAccount-paymentMethods tr.default-payment-method {
	box-shadow: inset 3px 0 0 var(--gold);
}

/* --------------------------------------------------------------------------
   Cart & Checkout — make the wrapper carry the light ink
   --------------------------------------------------------------------------
   The token block above redefines --text to #2B2119 for this wrapper, but
   never set `color` ON the wrapper. Custom properties cascade; the `color`
   property does not follow them unless something declares it. So every node
   that merely INHERITS its colour — the cart table's cells, the totals rows,
   the checkout order review — went on inheriting the sitewide dark-theme
   cream from <body> and rendered at 1.03 contrast on the light panel. Cream
   on cream: the ticket name, the price and the order total were invisible.

   Declaring it once here fixes every inheriting descendant at the source,
   which is why this is one line rather than a list of per-element overrides.
   Elements that already declare var(--text-muted) / var(--text-dim) are
   unaffected — they were resolving light-surface values correctly all along.
   -------------------------------------------------------------------------- */
body.idc-light-surface .woo-layout {
	color: var(--text);
}

/* The two that were still weak once inheritance was fixed: --text-dim is a
   deliberately quiet tone that works on the dark theme but drops under 3:1 on
   the light card. The muted tone is the same palette, one step stronger. */
body.idc-light-surface .woo-layout table.shop_table .product-name a,
body.idc-light-surface .woo-layout table.shop_table td {
	color: var(--text);
}

body.idc-light-surface .woo-layout table.shop_table th {
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Light surface: the gold accent has to give way on prices
   --------------------------------------------------------------------------
   --gold (#D4AF37) is the site's signature and reads well on the dark theme.
   On the cream cart panel it lands at 1.79:1 — the price and the grand total
   were the two numbers a buyer most needs to read, and they were the faintest
   things on the page.

   --crimson is the other festival accent, already carrying the checkout
   button and the totals rule, and it measures 5.86:1 here. So the emphasis
   stays warm and on-brand; it just uses the half of the palette that survives
   a light background. Nothing new is invented, per this file's doctrine.
   -------------------------------------------------------------------------- */
body.idc-light-surface .woo-layout .woocommerce-Price-amount,
body.idc-light-surface .woo-layout .product-price .woocommerce-Price-amount,
body.idc-light-surface .woo-layout .product-subtotal .woocommerce-Price-amount,
body.idc-light-surface .woo-layout .order-total .woocommerce-Price-amount {
	color: var(--crimson);
}

/* Column headings and the subtotal label sat on a gold-tinted strip, which
   pushed --text-muted down to 3.14:1. The full ink tone clears it. */
body.idc-light-surface .woo-layout table.shop_table th,
body.idc-light-surface .woo-layout .cart_totals th,
body.idc-light-surface .woo-layout .cart-subtotal th,
body.idc-light-surface .woo-layout .order-total th {
	color: var(--text);
}

/* --------------------------------------------------------------------------
   Two stragglers on checkout
   --------------------------------------------------------------------------
   1. Field labels used --text-dim (#93826D), the quiet tone, which lands at
      3.16:1 on the cream card. --text-muted is the same family one step up
      and clears 4.5. These are the labels on the billing form, so they need
      to be readable, not decorative.

   2. The order-review TOTAL kept rendering gold at 1.65:1. The earlier rule
      did match it, but woo.css styles that cell through an #order_review
      chain, and an id outranks any number of classes. Matching that
      specificity is the fix; raising it further with !important would only
      hide the next collision.
   -------------------------------------------------------------------------- */
body.idc-light-surface .woo-layout .form-row label,
body.idc-light-surface .woo-layout .woocommerce-billing-fields label,
body.idc-light-surface .woo-layout .woocommerce-additional-fields label {
	color: var(--text-muted);
}

body.idc-light-surface .woo-layout #order_review .order-total .woocommerce-Price-amount,
body.idc-light-surface .woo-layout #order_review .order-total strong,
body.idc-light-surface .woo-layout #order_review .cart-subtotal .woocommerce-Price-amount {
	color: var(--crimson);
}

/* --------------------------------------------------------------------------
   Checkout field labels — readable on whichever surface checkout renders on
   --------------------------------------------------------------------------
   Checkout resolves the DARK tokens (cart resolves the light ones — see the
   note in the handover). --text-dim is the quietest tone in the palette and
   lands at 4.14:1 on the dark card: under the 4.5 minimum, on the labels of
   the form someone fills in to pay.

   Deliberately NOT scoped to .idc-light-surface. The earlier rule was, which
   is exactly why it missed here. --text-muted is defined in both palettes, so
   this reads correctly whichever surface checkout ends up on.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .form-row label,
.woocommerce-checkout .woocommerce-billing-fields label,
.woocommerce-checkout .woocommerce-additional-fields label,
.woocommerce-checkout .woocommerce-shipping-fields label {
	color: var(--text-muted);
}