/* TruckerSites checkout — design tokens from design-system-and-style-guide.md */
.ts-checkout {
	--g-deep: #1A1D21; --g-face: #24282D; --amber: #E8823C; --amber-l: #F2A65E;
	--cream: #F2EFE9; --teal: #4FAF8B; --off: #E7E4DC; --dim: #C4C0B5; --charcoal: #33383D; --red: #D9534F;
	--f-display: 'Oswald', sans-serif; --f-body: 'Manrope', system-ui, sans-serif;
	max-width: 1120px; margin: 0 auto; padding: 48px 16px 72px; font-family: var(--f-body); color: var(--charcoal);
}
.ts-checkout *, .ts-checkout *::before, .ts-checkout *::after { box-sizing: border-box; }

.ts-co-head { text-align: center; margin-bottom: 36px; }
.ts-co-kicker { font-family: var(--f-body); font-weight: 800; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.ts-co-head h1, .ts-co-return h1 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(34px, 5vw, 52px); line-height: 1.05; margin: 8px 0 10px; color: var(--g-deep); }
.ts-co-head p { margin: 0; font-size: 17px; color: var(--charcoal); }

.ts-co-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: stretch; }

/* Summary card (gauge-cluster look) */
.ts-co-summary { background: var(--g-deep); color: var(--cream); border: 1px solid #2c3137; border-radius: 16px; padding: 24px; position: sticky; top: 24px; }
.ts-co-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #15181B; border: 1px solid #2c3137; border-radius: 12px; padding: 5px; margin-bottom: 22px; }
.ts-co-tabs a { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-family: var(--f-body); font-weight: 700; font-size: 13px; color: var(--dim); padding: 9px 4px; border-radius: 8px; line-height: 1.2; transition: background .15s, color .15s; }
.ts-co-tabs a:hover { color: var(--cream); }
.ts-co-tabs a.is-on { background: var(--amber); color: var(--g-deep); }
.ts-co-tabs a:focus-visible, .ts-btn:focus-visible, .ts-co-assure a:focus-visible, .ts-co-fleet a:focus-visible { outline: 3px solid var(--amber-l); outline-offset: 2px; }

.ts-co-plan { display: flex; align-items: center; gap: 16px; }
.ts-gauge { width: 92px; height: 92px; flex: none; }
.ts-co-tag { font-weight: 800; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-l); text-align: center; margin-left: -108px; width: calc(100% + 108px); position: relative; top: -11px; }
.ts-co-plan h2 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 34px; line-height: 1.05; margin: 2px 0 4px; color: #fff !important; }
.ts-co-tagline { margin: 0; font-size: 14px; font-style: italic; color: var(--dim); text-align: left; }
.ts-co-price { font-family: var(--f-display); font-weight: 700; font-size: 60px; line-height: 1; margin: 22px 0 16px; color: var(--cream); }
.ts-co-price span { font-family: var(--f-body); font-size: 18px; font-weight: 600; color: var(--dim); margin-left: 4px; }
.ts-co-features { list-style: none; margin: 0 0 20px; padding: 18px 0 0; border-top: 1px solid #2c3137; }
.ts-co-features li { position: relative; padding: 0 0 10px 26px; font-size: 15px; font-weight: 600; color: var(--off); line-height: 1.4; }
.ts-co-features li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 3px solid var(--teal); border-bottom: 3px solid var(--teal); transform: rotate(-45deg); }
.ts-co-assure { border-top: 1px solid #2c3137; padding-top: 16px; font-size: 14px; color: var(--dim); display: grid; gap: 6px; }
.ts-co-assure a, .ts-co-fleet a { color: var(--amber-l); font-weight: 700; text-decoration: none; }
.ts-co-assure a:hover, .ts-co-fleet a:hover { text-decoration: underline; }
.ts-co-fleet { margin-top: 16px; padding: 12px 14px; background: var(--g-face); border-radius: 10px; font-size: 13.5px; color: var(--dim); }

/* Payment panel */
.ts-co-pay { background: #fff; border: 1px solid #ddd8cd; border-radius: 16px; padding: 24px; box-shadow: 0 6px 24px rgba(26, 29, 33, .08); min-height: 420px; }
.ts-co-mount { min-height: 380px; }
.ts-co-loading { padding: 60px 0; text-align: center; font-weight: 700; color: var(--charcoal); }
.ts-co-secure { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eee9de; font-size: 13px; color: #5b6168; text-align: center; }

.ts-btn { display: inline-block; background: var(--amber); color: var(--g-deep) !important; font-family: var(--f-body); font-weight: 800; font-size: 16px; text-decoration: none; padding: 14px 26px; border-radius: 10px; border: 0; cursor: pointer; transition: background .15s, transform .15s; }
.ts-btn:hover { background: var(--amber-l); transform: translateY(-1px); }
.ts-co-fallback { text-align: center; padding: 44px 8px; }
.ts-co-fallback h3 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .02em; font-size: 28px; margin: 0 0 8px; color: var(--g-deep); }
.ts-co-fallback p { margin: 0 0 22px; }
.ts-co-fallback .ts-btn { margin-bottom: 4px; }
.ts-co-note { font-size: 13px; color: #5b6168; }
.ts-co-admin { margin-top: 22px; padding: 10px 12px; background: #fff6e8; border: 1px dashed var(--amber); border-radius: 8px; text-align: left; }

/* Return page */
.ts-co-return { max-width: 640px; margin: 24px auto 0; text-align: center; background: var(--g-deep); border: 1px solid #2c3137; border-radius: 16px; padding: 48px 28px; color: var(--off); }
.ts-co-return h1 { color: var(--cream); }
.ts-co-return p { font-size: 17px; line-height: 1.55; margin: 0 0 26px; }
.ts-co-return[data-state="ok"] .ts-co-kicker { color: var(--teal); }
.ts-co-return[data-state="error"] .ts-co-kicker { color: var(--red); }

@media (max-width: 860px) {
	.ts-co-grid { grid-template-columns: 1fr; }
	.ts-co-summary { position: static; }
	.ts-co-pay { padding: 16px; }
	.ts-checkout { padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { .ts-btn, .ts-co-tabs a { transition: none; } .ts-btn:hover { transform: none; } }

/* Step 1 form */
.ts-form { display: grid; gap: 16px; }
.ts-form label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; color: var(--g-deep); }
.ts-form .ts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ts-form input { font: inherit; font-weight: 500; font-size: 16px; padding: 13px 14px; border: 1.5px solid #cfc9bb; border-radius: 10px; background: #fff; color: var(--g-deep); width: 100%; }
.ts-form input:focus { outline: 3px solid var(--amber-l); outline-offset: 1px; border-color: var(--amber); }
.ts-form input.is-bad { border-color: var(--red); }

/* Checkout agreement checkbox (added 2026-10-11, message #80).
   .ts-co-pay is a WHITE card, so this uses the same dark text and amber link
   tokens as the rest of the form rather than new values. .ts-form label is a
   bold grid by default, which would stack the box above the words -- this
   overrides to an inline row at normal weight so it reads as a sentence. */
.ts-form label.ts-agree { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--g-deep); margin: 4px 0 14px; cursor: pointer; }
.ts-form label.ts-agree input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--amber); cursor: pointer; }
.ts-form label.ts-agree a { color: #9a5212; text-decoration: underline; }
.ts-form label.ts-agree a:hover, .ts-form label.ts-agree a:focus-visible { color: var(--g-deep); }
/* A native checkbox shows no border, so the shared .is-bad border-color is
   invisible on one. An outline is what actually renders the error state. */
.ts-form input[type="checkbox"].is-bad { outline: 2px solid var(--red); outline-offset: 2px; }
.ts-form small { font-weight: 500; font-size: 12.5px; color: #5b6168; }
.ts-opt { font-weight: 500; color: #5b6168; }
.ts-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ts-error { background: #fdecea; color: #8a2622; border: 1px solid #f3c1be; border-radius: 8px; padding: 10px 12px; font-weight: 600; font-size: 14px; }
.ts-btn-block { width: 100%; text-align: center; }
.ts-btn[disabled] { opacity: .6; cursor: wait; }
.ts-link { background: none; border: 0; padding: 4px; font: inherit; font-weight: 700; font-size: 14.5px; color: #b85a17; text-decoration: underline; cursor: pointer; text-align: center; }
.ts-link:hover { color: var(--g-deep); }
.ts-link[disabled] { opacity: .6; }
.ts-co-for { margin: 0 0 14px; font-size: 14px; color: #5b6168; }
.ts-co-for a { color: #b85a17; font-weight: 700; }
@media (max-width: 520px) { .ts-form .ts-row { grid-template-columns: 1fr; } }

/* Fleet Command: standalone, distinct-styled card (no tab switcher, custom pricing). */
.ts-co-summary-fleet { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber) inset; }
.ts-co-fleet-name { color: var(--amber-l) !important; }