/* Schaefer Defense — Military & LE Discount: front-end styles.
   Loaded at wp_enqueue_scripts prio 20 (after finalist.css) on the cart,
   checkout and the /my-account/military-le-discount/ endpoint only.
   Everything is scoped under .sd-mle-* — nothing here touches theme selectors.

   Specificity notes (the theme paints these tables hard):
   - cart:     body.woocommerce-cart .cart_totals td { color: dim !important }
               is on the <td>; colour set on our spans wins by inheritance rules.
   - checkout: body.woocommerce-checkout .woocommerce-checkout-review-order-table *
               { background: transparent !important; color: inherit !important }
               hits EVERY element, and the tfoot inherits an !important
               -webkit-text-fill-color. Our checkout rules therefore carry the
               `html body.woocommerce-checkout .woocommerce-checkout-review-order-table`
               prefix + !important on background, color AND -webkit-text-fill-color. */

/* ------------------------------------------------------------------ switch */
.sd-mle-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.sd-mle-switch:focus-visible {
	outline: 2px solid var(--ccr-blue, #38aee8);
	outline-offset: 3px;
	border-radius: 999px;
}
.sd-mle-switch__track {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 20px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
	transition: background .18s ease;
}
.sd-mle-switch__knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #f2f5fa;
	transition: transform .18s ease;
}
.sd-mle-switch.is-on .sd-mle-switch__track { background: #26a387; }
.sd-mle-switch.is-on .sd-mle-switch__knob { transform: translateX(14px); }
.sd-mle-switch.is-busy { opacity: .55; pointer-events: none; }
.sd-mle-switch__label {
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.3;
	color: #dbe3f0;
	-webkit-text-fill-color: #dbe3f0;
}
.sd-mle-switch__hint {
	display: block;
	margin-top: 5px;
	font-size: .76rem;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	font-family: inherit;
	white-space: normal;
	color: var(--ccr-text-dim, #9aa7bd);
	-webkit-text-fill-color: var(--ccr-text-dim, #9aa7bd);
}

/* The switch row is a control, not a figure: it takes the full ledger width
   on its own line and its <th> is redundant with the switch's visible label
   (kept in the markup for table semantics / data-title). The theme lays cart
   rows out as flex (`… table.shop_table > tbody > tr > td`, (0,3,4),
   text-align right !important); checkout is a real table. The `tr.` class
   lifts these to (0,4,4) so they win in both places. */
body.woocommerce-cart .cart_totals table.shop_table > tbody > tr.sd-mle-toggle-row,
html body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.sd-mle-toggle-row {
	display: flex !important;
	flex-wrap: wrap;
	width: 100%;
}
body.woocommerce-cart .cart_totals table.shop_table > tbody > tr.sd-mle-toggle-row > th,
html body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.sd-mle-toggle-row th {
	display: none !important;
}
body.woocommerce-cart .cart_totals table.shop_table > tbody > tr.sd-mle-toggle-row > td,
html body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.sd-mle-toggle-row td {
	display: block !important;
	flex: 1 1 100%;
	width: 100%;
	text-align: left !important;
}
html body.woocommerce-checkout .woocommerce-checkout-review-order-table .sd-mle-switch__track {
	background: rgba(255, 255, 255, .14) !important;
	background-color: rgba(255, 255, 255, .14) !important;
}
html body.woocommerce-checkout .woocommerce-checkout-review-order-table .sd-mle-switch.is-on .sd-mle-switch__track {
	background: #26a387 !important;
	background-color: #26a387 !important;
}
html body.woocommerce-checkout .woocommerce-checkout-review-order-table .sd-mle-switch__knob {
	background: #f2f5fa !important;
	background-color: #f2f5fa !important;
}
html body.woocommerce-checkout .woocommerce-checkout-review-order-table .sd-mle-switch__label {
	color: #dbe3f0 !important;
	-webkit-text-fill-color: #dbe3f0 !important;
}
html body.woocommerce-checkout .woocommerce-checkout-review-order-table .sd-mle-switch__hint {
	color: var(--ccr-text-dim, #9aa7bd) !important;
	-webkit-text-fill-color: var(--ccr-text-dim, #9aa7bd) !important;
	font-size: .76rem !important;
}

/* "+ free shipping" tag on the relabelled coupon row (cart + checkout) */
.sd-mle-coupon-fs {
	display: inline-block;
	margin-left: 6px;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--ccr-blue, #38aee8);
	-webkit-text-fill-color: var(--ccr-blue, #38aee8);
}
html body.woocommerce-checkout .woocommerce-checkout-review-order-table .sd-mle-coupon-fs {
	color: var(--ccr-blue, #38aee8) !important;
	-webkit-text-fill-color: var(--ccr-blue, #38aee8) !important;
}

/* ---------------------------------------------------------- account page */
.sd-mle { max-width: 720px; }
.sd-mle-card {
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 14px;
	padding: 18px 20px;
	margin: 0 0 18px;
}
/* .sd-mle-card prefix out-specifies the Elementor kit's `.elementor-kit-N h3`
   (24px Mulish), which otherwise repaints these eyebrows as page headings. */
/* Sized at 1.05rem, not the original .78rem: these head their own cards, and
   at the old size they rendered SMALLER than the .92rem body copy beneath them,
   so they read as captions rather than section headings (Jake, 2026-09-09).
   Letter-spacing eased from .1em so the wider glyphs don't sprawl when larger. */
.sd-mle-card .sd-mle-card__title {
	margin: 0 0 14px;
	color: #9aa7bd;
	font-family: 'DM Mono', monospace;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.sd-mle-card p { margin: 0 0 10px; color: #dbe3f0; line-height: 1.6; font-size: .92rem; }
.sd-mle-card p:last-child { margin-bottom: 0; }
.sd-mle-card a { color: var(--ccr-blue, #38aee8); }

/* status header: pill + one line of context */
.sd-mle-status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 0 0 12px;
}
.sd-mle-status__when {
	color: #9aa7bd;
	font-size: .82rem;
}
.sd-mle-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 6px;
	font-family: 'DM Mono', monospace;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.5;
	white-space: nowrap;
	background: rgba(255, 255, 255, .08);
	color: #dbe3f0;
}
.sd-mle-pill--approved { background: rgba(38, 163, 135, .15); color: #2fbf9a; }
.sd-mle-pill--pending  { background: rgba(243, 156, 18, .15); color: #f0a848; }
.sd-mle-pill--denied,
.sd-mle-pill--revoked  { background: rgba(210, 64, 52, .15); color: #e06457; }

/* benefit strip on the approved card */
.sd-mle-benefit {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0 0 14px;
}
.sd-mle-benefit__item {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 8px;
	background: rgba(56, 174, 232, .12);
	color: #dbe3f0;
	font-family: 'DM Mono', monospace;
	font-size: .8rem;
}

/* who-qualifies list */
.sd-mle-groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}
.sd-mle-groups li {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	background: rgba(255, 255, 255, .02);
}
.sd-mle-groups__title {
	display: block;
	margin: 0 0 4px;
	color: #f2f5fa;
	font-size: .86rem;
	font-weight: 700;
}
.sd-mle-groups__list {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #9aa7bd;
	font-size: .8rem;
	line-height: 1.5;
}
.sd-mle-groups__list li { border: 0; padding: 0; background: none; }

/* read-only summary (pending / approved) */
.sd-mle-summary {
	display: grid;
	grid-template-columns: minmax(120px, max-content) 1fr;
	gap: 6px 18px;
	margin: 0 0 12px;
	font-size: .88rem;
}
.sd-mle-summary dt { color: #9aa7bd; margin: 0; }
.sd-mle-summary dd { color: #dbe3f0; margin: 0; }
.sd-mle-note {
	margin: 12px 0 0;
	padding: 12px 14px;
	border-left: 3px solid #e06457;
	border-radius: 0 10px 10px 0;
	background: rgba(210, 64, 52, .08);
	color: #dbe3f0;
	font-size: .88rem;
	line-height: 1.55;
}

/* form (no .form-row / .input-text classes on purpose — main.css kills their
   borders with !important) */
.sd-mle-form { margin: 0; }
.sd-mle-field { margin: 0 0 14px; }
/* Field labels: the site's eyebrow voice (checkout labels, cc-account.css
   `.woocommerce-form label`), owned here so it doesn't depend on cc-raffles. */
.sd-mle-field > label {
	display: block;
	margin: 0 0 6px;
	color: #9aa7bd;
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.sd-mle-field .required {
	color: var(--ccr-accent, #d24034);
	-webkit-text-fill-color: var(--ccr-accent, #d24034);
	border: 0;
	text-decoration: none;
}
body.woocommerce-account .sd-mle-input,
body.woocommerce-account select.sd-mle-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, .04) !important;
	background-color: rgba(255, 255, 255, .04) !important;
	border: 1px solid rgba(255, 255, 255, .16) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	color: #f2f5fa !important;
	-webkit-text-fill-color: #f2f5fa !important;
	font-size: .875rem;
	line-height: 1.4;
	padding: .66rem .9rem !important;
	transition: border-color .18s ease;
}
body.woocommerce-account .sd-mle-input:focus,
body.woocommerce-account select.sd-mle-input:focus {
	border-color: var(--ccr-blue, #38aee8) !important;
	outline: none;
	box-shadow: none !important;
}
body.woocommerce-account .sd-mle-input::placeholder { color: #6f7b90; -webkit-text-fill-color: #6f7b90; }
body.woocommerce-account select.sd-mle-input option,
body.woocommerce-account select.sd-mle-input optgroup { background: #10151f; color: #f2f5fa; }
body.woocommerce-account .sd-mle-input.has-error { border-color: rgba(224, 100, 87, .7) !important; }

/* file input: keep the native control (no custom drop zone) but dress it */
body.woocommerce-account input.sd-mle-file {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: .5rem .9rem;
	border: 1px dashed rgba(255, 255, 255, .22);
	border-radius: 10px;
	background: rgba(255, 255, 255, .02);
	color: #dbe3f0;
	font-size: .85rem;
}
body.woocommerce-account input.sd-mle-file::file-selector-button {
	margin-right: 12px;
	padding: 6px 12px;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, .1);
	color: #f2f5fa;
	font-weight: 600;
	font-size: .8rem;
	cursor: pointer;
}
.sd-mle-help {
	display: block;
	margin: 6px 0 0;
	color: #9aa7bd;
	font-size: .78rem;
	line-height: 1.5;
}

/* attestation */
.sd-mle-attest {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 18px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	background: rgba(255, 255, 255, .02);
	color: #dbe3f0;
	font-size: .85rem;
	line-height: 1.5;
	cursor: pointer;
}
/* The attestation is a sentence, not an eyebrow: undo cc-account.css's
   `!important` uppercase on every .woocommerce-form label. */
body.woocommerce-account .woocommerce-form label.sd-mle-attest,
body.woocommerce-account .woocommerce-form label.sd-mle-attest span {
	color: #dbe3f0 !important;
	font-size: .85rem !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.5 !important;
}
/* ...and the same cc-account.css rule (L556, specificity (0,2,2)) forces
   `display: inline-block !important`, which beat `.sd-mle-attest`'s (0,1,0)
   flex — the row never became a flex container, so the sentence wrapped
   underneath the checkbox instead of sitting beside it (Jake, 2026-09-09).
   Restate the layout at (0,3,1). The span is deliberately NOT in this
   selector, so it stays flowing text. Same trap as the "Remember me" label
   (finalist.css, "Restate at (0,3,2)"). cc-account.css also forces
   margin-bottom: 8px on every account label, so restate that too. */
body.woocommerce-account .woocommerce-form label.sd-mle-attest {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin-bottom: 18px !important;
}
.sd-mle-attest input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 3px 0 0;
	accent-color: var(--ccr-blue, #38aee8);
}

/* actions — the submit itself is painted by the theme's
   `body.woocommerce-account .sd-acct .woocommerce-form button[type="submit"]` rule */
.sd-mle-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}
.sd-mle-actions .sd-mle-privacy {
	flex: 1 1 220px;
	color: #9aa7bd;
	font-size: .76rem;
	line-height: 1.5;
}
/* link-shaped CTA (Shop / Re-apply) in the family button voice */
a.sd-mle-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 10px;
	background: var(--ccr-accent, #d24034);
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	font-size: .85rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background .18s ease;
}
a.sd-mle-btn:hover { background: var(--ccr-blue, #38aee8); color: #fff !important; }
a.sd-mle-btn--ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .2);
	color: #dbe3f0 !important;
	-webkit-text-fill-color: #dbe3f0;
}
a.sd-mle-btn--ghost:hover { background: rgba(255, 255, 255, .06); color: #fff !important; }

@media (max-width: 767px) {
	.sd-mle-groups { grid-template-columns: 1fr; }
	.sd-mle-summary { grid-template-columns: 1fr; gap: 2px 0; }
	.sd-mle-summary dd { margin-bottom: 8px; }
	.sd-mle-card { padding: 16px 16px; }
}