/*
 * Customer Support (page-customer-support.php) — 2026-10 rebuild.
 *
 * Enqueued by inc/cm-pages.php on /customer-support/ only. cosmick-2026.css and
 * cm-interior.css are hard-coded <link>s printed AFTER this file, so every
 * rule that overlaps theirs wins on SPECIFICITY (scoped under main.cm-sp),
 * never on order and never with !important.
 *
 * Part 2 re-skins the Zoho Desk ticket plugin's markup. The plugin prints its
 * own <style> in the body (after this file); its selectors are one or two
 * classes deep, so everything here is prefixed `main.cm-sp .cm-ticket` (or
 * `main.cm-sp .cm-modal-overlay`) to outrank it. The plugin uses !important
 * only on the radio-option grid and the radio size, which are left alone.
 *
 * Reference: cosmick-media-upgrade.replit.app/customer-support/ — sand head
 * band with the coral wedge (same as service pages), framed form panel with a
 * sand rail.
 */

main.cm-sp [hidden] { display: none; }

/* Sticky rail: legacy `section { overflow-x: hidden }` and `body { overflow-x:
   hidden }` turn those boxes into scroll containers, so position: sticky never
   engages (same trap as cm-contact.css). `clip` keeps the clipping without it. */
main.cm-sp > section { overflow-x: clip; overflow-y: visible; }
body:has(main.cm-sp) { overflow-x: clip; overflow-y: visible; }

/* Anchor target clears the sticky header. */
main.cm-sp #cm-sp-ticket { scroll-margin-top: calc(var(--cm26-header-h) + 12px); }
main.cm-sp #cm-sp-ticket:focus { outline: none; }

/* ---------------------------------------------------------------------------
   1. Page head — sand band + coral wedge (the service-page treatment).
   --------------------------------------------------------------------------- */

main.cm-sp .cm-page-head {
	overflow: hidden;
	isolation: isolate;
	border-bottom: 0;
	background: var(--cm26-sand);
}

main.cm-sp .cm-page-head::before {
	content: "";
	position: absolute;
	inset: 0 0 0 78%;
	z-index: -1;
	background: var(--cm26-brand);
	clip-path: polygon(62% 0, 100% 0, 100% 100%, 0 100%);
	opacity: .9;
	pointer-events: none;
}

main.cm-sp .cm-page-head::after { display: none; }
main.cm-sp .cm-page-head > .cm-orbital { display: none; }

main.cm-sp .cm-page-head > .cm-wrap {
	position: relative;
	padding-block: clamp(34px, 5vw, 76px);
}

main.cm-sp .cm-page-head h1 {
	max-width: 18ch;
	font-size: clamp(34px, 4.2vw, 58px);
}

main.cm-sp .cm-page-head .cm-lede { max-width: 52ch; }

/* Crumbs and eyebrow on sand: darker than the defaults for AA. */
main.cm-sp .cm-page-head .cm-eyebrow { color: var(--cm26-brand-deep); }
main.cm-sp .cm-page-head .cm-crumbs ol { color: var(--cm26-body); }

main.cm-sp .cm-sp-head-phone { background: var(--cm26-card); }
main.cm-sp .cm-sp-head-phone svg { color: var(--cm26-brand-ink); }

@media (max-width: 767px) {
	/* Keep the wedge clear of the copy on phones. */
	main.cm-sp .cm-page-head::before { inset: 0 0 0 86%; opacity: .55; }
	main.cm-sp .cm-page-head-actions .cm-btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   2. Ways to get help — option cards + hours strip.
   --------------------------------------------------------------------------- */

main.cm-sp .cm-sp-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

main.cm-sp .cm-sp-option {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 26px 24px 24px;
	overflow: hidden;
}

/* Coral cap that grows on hover — the design's card accent. */
main.cm-sp .cm-sp-option::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 3px;
	background: var(--cm26-brand);
	transition: width .3s var(--cm26-ease);
}

main.cm-sp .cm-sp-option:hover::before,
main.cm-sp .cm-sp-option:focus-within::before { width: 100%; }

main.cm-sp .cm-sp-option-icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 6px;
	border-radius: var(--cm26-radius);
	background: var(--cm26-tint);
	color: var(--cm26-brand-ink);
}

main.cm-sp .cm-sp-option-title {
	margin: 0;
	padding: 0; /* a legacy h3 rule adds 27px of bottom padding */
	font-family: var(--cm26-font-display);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cm26-ink);
}

main.cm-sp .cm-sp-option-copy {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cm26-body);
}

main.cm-sp .cm-sp-option-action { margin: auto 0 0; padding-top: 8px; }

main.cm-sp .cm-sp-phone {
	font-family: var(--cm26-font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--cm26-brand-ink);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
	transition: text-decoration-color .2s var(--cm26-ease);
}

main.cm-sp .cm-sp-phone:hover,
main.cm-sp .cm-sp-phone:focus-visible { text-decoration-color: currentColor; color: var(--cm26-brand-hover); }

main.cm-sp .cm-sp-hours {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 6px 14px;
	margin-top: 24px;
	padding: 18px 22px;
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius-card);
	background: var(--cm26-sand);
}

main.cm-sp .cm-sp-hours-icon { grid-row: span 2; align-self: start; padding-top: 2px; color: var(--cm26-brand-ink); display: inline-flex; }

main.cm-sp .cm-sp-hours-text,
main.cm-sp .cm-sp-hours-note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cm26-prose); }

main.cm-sp .cm-sp-hours-note { color: var(--cm26-body); font-size: 14px; }

main.cm-sp .cm-sp-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--cm26-card);
	border: 1px solid var(--cm26-line);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cm26-body);
	vertical-align: 1px;
	white-space: nowrap;
}

main.cm-sp .cm-sp-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cm26-stone);
}

main.cm-sp .cm-sp-status.is-open { color: #1f5f3a; }
main.cm-sp .cm-sp-status.is-open::before { background: #2f8a55; }

/* ---------------------------------------------------------------------------
   3. Ticket panel + rail.
   --------------------------------------------------------------------------- */

main.cm-sp .cm-sp-ticket-band > .cm-wrap.cm-split { align-items: start; }

@media (min-width: 1024px) {
	main.cm-sp .cm-sp-ticket-band > .cm-wrap.cm-split { grid-template-columns: minmax(0, 1fr) 340px; }
}

main.cm-sp .cm-sp-ticket-main { min-width: 0; }

main.cm-sp .cm-sp-panel {
	padding: clamp(20px, 3vw, 36px);
	background: var(--cm26-card);
	border-color: #d9c7b7;
}

main.cm-sp .cm-sp-panel-title {
	margin: 0 0 6px;
	font-family: var(--cm26-font-display);
	font-size: clamp(22px, 2.2vw, 26px);
	font-weight: 700;
	color: var(--cm26-ink);
}

main.cm-sp .cm-sp-panel-lede,
main.cm-sp .cm-sp-fallback { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--cm26-body); }

main.cm-sp .cm-sp-req { color: var(--cm26-brand-ink); font-weight: 700; }

main.cm-sp .cm-sp-fallback-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

main.cm-sp .cm-sp-rail { display: grid; gap: 16px; min-width: 0; }

main.cm-sp .cm-sp-rail .cm-aside-card { padding: 22px 22px 20px; }

main.cm-sp .cm-sp-tips {
	border-top: 3px solid var(--cm26-brand);
	background: #efe4da;
	border-color: #dccab9;
	border-top-color: var(--cm26-brand);
}

main.cm-sp .cm-sp-rail-title {
	margin: 0 0 12px;
	font-family: var(--cm26-font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cm26-ink);
	text-transform: none;
	letter-spacing: 0;
}

main.cm-sp .cm-sp-tip-list,
main.cm-sp .cm-sp-next-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cm-sp;
}

main.cm-sp .cm-sp-tip-list > li,
main.cm-sp .cm-sp-next-list > li {
	position: relative;
	margin: 0;
	padding-left: 34px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--cm26-prose);
	counter-increment: cm-sp;
}

main.cm-sp .cm-sp-tip-list > li::before,
main.cm-sp .cm-sp-next-list > li::before {
	content: counter(cm-sp);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cm26-brand-ink);
	color: var(--cm26-on-brand);
	font-family: var(--cm26-font-display);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

main.cm-sp .cm-sp-next-list > li::before {
	background: var(--cm26-card);
	color: var(--cm26-brand-ink);
	box-shadow: inset 0 0 0 1.5px var(--cm26-brand-ink);
}

main.cm-sp .cm-sp-tip-note {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid #d9c7b7;
	font-size: 13.5px;
	color: var(--cm26-body);
}

/* ---------------------------------------------------------------------------
   4. Plugin markup re-skin ([cosmick_zoho_desk_form]).
   --------------------------------------------------------------------------- */

/* The plugin's banner, method cards and hours box duplicate section 2. */
main.cm-sp .cm-ticket-wrapper .cm-existing-tickets-banner,
main.cm-sp .cm-ticket-wrapper .cm-support-methods { display: none; }

main.cm-sp .cm-ticket {
	max-width: none;
	font-family: var(--cm26-font-body);
	color: var(--cm26-prose);
}

main.cm-sp .cm-ticket .cm-ticket-container {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

/* Progress steps: a quiet stepper on a hairline. */
main.cm-sp .cm-ticket .cm-progress-steps {
	padding: 16px 12px;
	margin-bottom: 4px;
	background: var(--cm26-paper);
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius);
}

main.cm-sp .cm-ticket .cm-progress-step:not(:last-child)::after { background: var(--cm26-line); top: 15px; }
main.cm-sp .cm-ticket .cm-progress-step.completed::after { background: var(--cm26-brand-ink); }

main.cm-sp .cm-ticket .step-circle {
	background: var(--cm26-sand);
	color: var(--cm26-stone);
	font-family: var(--cm26-font-display);
	font-weight: 700;
}

main.cm-sp .cm-ticket .cm-progress-step.active .step-circle,
main.cm-sp .cm-ticket .cm-progress-step.completed .step-circle { background: var(--cm26-brand-ink); color: var(--cm26-on-brand); }

main.cm-sp .cm-ticket .step-label { color: var(--cm26-body); font-size: 12.5px; font-weight: 600; }

@media (max-width: 768px) {
	/* The plugin stacks the stepper vertically on phones; a row reads better. */
	main.cm-sp .cm-ticket .cm-progress-steps { flex-direction: row; gap: 0; }
}

/* Sections. */
main.cm-sp .cm-ticket .cm-ticket-section {
	padding: 28px 0;
	border-bottom: 1px solid var(--cm26-line);
}

main.cm-sp .cm-ticket .cm-ticket-section:last-of-type { border-bottom: 0; }

main.cm-sp .cm-ticket .cm-ticket-section h3 {
	margin: 0 0 4px;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--cm26-ink);
}

/* The emoji glyphs before each section title. */
main.cm-sp .cm-ticket .cm-ticket-section h3 .icon { display: none; }

main.cm-sp .cm-ticket .cm-ticket-section .section-subtitle { margin: 0 0 20px; color: var(--cm26-body); font-size: 14.5px; }

/* Fields. */
main.cm-sp .cm-ticket .cm-ticket-field { margin-bottom: 20px; }
main.cm-sp .cm-ticket .cm-field-grid .cm-ticket-field { margin-bottom: 0; }

main.cm-sp .cm-ticket .cm-ticket-field > label {
	margin-bottom: 6px;
	font-family: var(--cm26-font-body);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--cm26-ink);
}

main.cm-sp .cm-ticket .cm-ticket-field label .required { color: var(--cm26-brand-ink); }

main.cm-sp .cm-ticket .cm-ticket-field input[type="text"],
main.cm-sp .cm-ticket .cm-ticket-field input[type="email"],
main.cm-sp .cm-ticket .cm-ticket-field input[type="tel"],
main.cm-sp .cm-ticket .cm-ticket-field input[type="url"],
main.cm-sp .cm-ticket .cm-ticket-field select,
main.cm-sp .cm-ticket .cm-ticket-field textarea,
main.cm-sp .cm-ticket #cmServicesImpactedOther {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1.5px solid var(--cm26-input-border);
	border-radius: var(--cm26-radius-input);
	background-color: #fdfaf7;
	font-family: var(--cm26-font-body);
	font-size: 16px; /* 16px stops iOS zooming on focus */
	line-height: 1.5;
	color: var(--cm26-ink);
	box-shadow: none;
}

main.cm-sp .cm-ticket .cm-ticket-field textarea { min-height: 140px; }

main.cm-sp .cm-ticket .cm-ticket-field input::placeholder,
main.cm-sp .cm-ticket .cm-ticket-field textarea::placeholder { color: #857a72; opacity: 1; }

main.cm-sp .cm-ticket .cm-ticket-field input:hover,
main.cm-sp .cm-ticket .cm-ticket-field select:hover,
main.cm-sp .cm-ticket .cm-ticket-field textarea:hover { border-color: var(--cm26-input-hover); }

/* Visible focus (the plugin removes the outline). */
main.cm-sp .cm-ticket .cm-ticket-field input:focus-visible,
main.cm-sp .cm-ticket .cm-ticket-field select:focus-visible,
main.cm-sp .cm-ticket .cm-ticket-field textarea:focus-visible,
main.cm-sp .cm-ticket input[type="checkbox"]:focus-visible,
main.cm-sp .cm-ticket input[type="radio"]:focus-visible,
main.cm-sp .cm-ticket button:focus-visible,
main.cm-sp .cm-modal-overlay button:focus-visible {
	outline: 2px solid var(--cm26-brand-ink);
	outline-offset: 2px;
	border-color: var(--cm26-brand-ink);
	box-shadow: none;
}

main.cm-sp .cm-ticket .cm-ticket-help { color: var(--cm26-stone); font-size: 13.5px; }

/* Radio choice tiles (grid / radio size stay the plugin's — they are !important). */
main.cm-sp .cm-ticket .cm-ticket-radio-group { gap: 10px; }

main.cm-sp .cm-ticket .cm-ticket-radio-option {
	padding: 14px 16px;
	border: 1.5px solid var(--cm26-input-border);
	border-radius: var(--cm26-radius);
	background: #fdfaf7;
	transform: none;
	box-shadow: none;
}

main.cm-sp .cm-ticket .cm-ticket-radio-option:hover { border-color: var(--cm26-charcoal); background: var(--cm26-card); transform: none; box-shadow: none; }

main.cm-sp .cm-ticket .cm-ticket-radio-option input[type="radio"],
main.cm-sp .cm-ticket .cm-ticket-checkbox input[type="checkbox"],
main.cm-sp .cm-ticket .cm-multi-select-option input[type="checkbox"] { accent-color: var(--cm26-brand-ink); }

main.cm-sp .cm-ticket .cm-ticket-radio-option .option-title { color: var(--cm26-ink); font-size: 15px; }
main.cm-sp .cm-ticket .cm-ticket-radio-option .option-desc { color: var(--cm26-body); font-size: 13.5px; font-weight: 400; }

main.cm-sp .cm-ticket .cm-ticket-radio-option.selected,
main.cm-sp .cm-ticket .cm-ticket-radio-option:has(input:checked) {
	border-color: var(--cm26-brand-ink);
	background: var(--cm26-tint);
	box-shadow: inset 0 0 0 1px var(--cm26-brand-ink);
}

main.cm-sp .cm-ticket .cm-ticket-radio-option.selected .option-title { color: var(--cm26-ink); }

main.cm-sp .cm-ticket .cm-ticket-radio-option.emergency { border-color: var(--cm26-error-line); }
main.cm-sp .cm-ticket .cm-ticket-radio-option.emergency:hover { background: #fff1ef; border-color: var(--cm26-error); }

main.cm-sp .cm-ticket .cm-ticket-radio-option.emergency.selected,
main.cm-sp .cm-ticket .cm-ticket-radio-option.emergency:has(input:checked) {
	border-color: var(--cm26-error);
	background: #fff1ef;
	box-shadow: inset 0 0 0 1px var(--cm26-error);
}

main.cm-sp .cm-ticket .cm-ticket-radio-option.emergency.selected .option-title { color: var(--cm26-error); }

/* Multi-select (services impacted). */
main.cm-sp .cm-ticket .cm-multi-select-group { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }

main.cm-sp .cm-ticket .cm-multi-select-option {
	min-height: 48px;
	padding: 10px 14px;
	border: 1.5px solid var(--cm26-input-border);
	border-radius: var(--cm26-radius);
	background: #fdfaf7;
}

main.cm-sp .cm-ticket .cm-multi-select-option:hover { border-color: var(--cm26-charcoal); background: var(--cm26-card); }

main.cm-sp .cm-ticket .cm-multi-select-option.checked,
main.cm-sp .cm-ticket .cm-multi-select-option:has(input:checked) {
	border-color: var(--cm26-brand-ink);
	background: var(--cm26-tint);
}

main.cm-sp .cm-ticket .cm-multi-select-option label,
main.cm-sp .cm-ticket .cm-multi-select-option.checked label { color: var(--cm26-ink); font-size: 15px; }

/* Checkbox rows (quote request, consent, terms). */
main.cm-sp .cm-ticket .cm-ticket-checkbox {
	padding: 14px 16px;
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius);
	background: var(--cm26-paper);
}

main.cm-sp .cm-ticket .cm-ticket-checkbox:hover { border-color: #cdbfb3; }

main.cm-sp .cm-ticket .cm-ticket-checkbox label { color: var(--cm26-prose); font-size: 14px; line-height: 1.65; }

/* Rate display: dark ink panel instead of the purple gradient. */
main.cm-sp .cm-ticket .cm-rate-display {
	background: var(--cm26-ink);
	color: var(--cm26-paper);
	border-radius: var(--cm26-radius-card);
}

main.cm-sp .cm-ticket .cm-rate-display strong { font-family: var(--cm26-font-display); color: #fff; }
main.cm-sp .cm-ticket .cm-rate-display small { color: var(--cm26-dark-secondary); opacity: 1; }

/* Card panel. */
main.cm-sp .cm-ticket .cm-ticket-card-panel {
	background: var(--cm26-paper);
	border: 1px dashed var(--cm26-input-border);
	border-radius: var(--cm26-radius-card);
}

main.cm-sp .cm-ticket .cm-ticket-card-panel h4 { font-family: var(--cm26-font-display); color: var(--cm26-ink); }
main.cm-sp .cm-ticket .cm-ticket-card-panel > p { color: var(--cm26-body); }

main.cm-sp .cm-ticket .secure-badge { background: var(--cm26-sand); color: var(--cm26-prose); }

/* Banners (warnings / errors). */
main.cm-sp .cm-ticket .cm-ticket-banner { border-radius: var(--cm26-radius); padding: 14px 16px; }
main.cm-sp .cm-ticket .cm-ticket-banner p { font-size: 14.5px; line-height: 1.6; }
main.cm-sp .cm-ticket .cm-ticket-card-grid .cm-ticket-field { margin-bottom: 0; }
main.cm-sp .cm-ticket .cm-ticket-banner.warning { background: #fff7ec; border-color: #b45309; }
main.cm-sp .cm-ticket .cm-ticket-banner.error { background: #fff1ef; border-color: var(--cm26-error); }
main.cm-sp .cm-ticket .cm-ticket-banner.error h4,
main.cm-sp .cm-ticket .cm-ticket-banner.error p { color: var(--cm26-error); }

main.cm-sp .cm-ticket .cm-ticket-error {
	background: #fff1ef;
	border: 1.5px solid var(--cm26-error-line);
	border-radius: var(--cm26-radius);
	color: var(--cm26-error);
}

/* File upload. */
main.cm-sp .cm-ticket .cm-file-upload-area {
	padding: 26px 20px;
	border: 1.5px dashed var(--cm26-input-border);
	border-radius: var(--cm26-radius-card);
	background: #fdfaf7;
}

main.cm-sp .cm-ticket .cm-file-upload-area:hover,
main.cm-sp .cm-ticket .cm-file-upload-area.dragging { border-color: var(--cm26-brand-ink); background: var(--cm26-tint); box-shadow: none; }

main.cm-sp .cm-ticket .cm-file-upload-prompt svg { color: var(--cm26-brand-ink); }
main.cm-sp .cm-ticket .cm-file-upload-prompt p { color: var(--cm26-ink); font-size: 15px; }
main.cm-sp .cm-ticket .cm-file-upload-prompt span { color: var(--cm26-stone); }

main.cm-sp .cm-ticket .cm-file-preview-item { border-color: var(--cm26-line); border-radius: var(--cm26-radius-sm); }
main.cm-sp .cm-ticket .cm-file-preview-item svg { color: var(--cm26-brand-ink); }
main.cm-sp .cm-ticket .cm-file-preview-remove,
main.cm-sp .cm-ticket .cm-secondary-contact-remove { background: #fff1ef; color: var(--cm26-error); }

main.cm-sp .cm-ticket .cm-secondary-contact {
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius);
	background: var(--cm26-paper);
}

/* Buttons. */
main.cm-sp .cm-ticket .cm-ticket-btn-secondary {
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--cm26-btn2-border);
	border-radius: var(--cm26-radius);
	background: transparent;
	color: var(--cm26-ink);
	font-family: var(--cm26-font-display);
	font-size: 14.5px;
	font-weight: 700;
}

main.cm-sp .cm-ticket .cm-ticket-btn-secondary:hover { border-color: var(--cm26-charcoal); background: var(--cm26-sand); }

main.cm-sp .cm-ticket .cm-ticket-btn,
main.cm-sp .cm-modal-overlay .cm-modal-close-btn {
	min-height: 52px;
	padding: 0 32px;
	border: 0;
	border-radius: var(--cm26-radius);
	background: var(--cm26-brand-ink);
	color: var(--cm26-on-brand);
	font-family: var(--cm26-font-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .005em;
	text-transform: none;
	box-shadow: none;
	transform: none;
}

main.cm-sp .cm-ticket .cm-ticket-btn:hover:not(:disabled),
main.cm-sp .cm-modal-overlay .cm-modal-close-btn:hover { background: var(--cm26-brand-hover); box-shadow: none; transform: none; }

main.cm-sp .cm-ticket .cm-ticket-btn:disabled { opacity: .6; }

/* The submit row is an inline-styled div with 30px padding on every side. */
main.cm-sp .cm-ticket form > div[style] { padding: 12px 0 4px; }

@media (max-width: 600px) {
	main.cm-sp .cm-ticket .cm-ticket-btn { width: 100%; }
}

/* Footer: the plugin pads it 200px at the bottom. */
main.cm-sp .cm-ticket .cm-ticket-footer {
	margin-top: 16px;
	padding: 16px 18px;
	border-radius: var(--cm26-radius);
	background: var(--cm26-paper);
	border: 1px solid var(--cm26-line);
	text-align: left;
}

main.cm-sp .cm-ticket .cm-ticket-footer p { color: var(--cm26-body); font-size: 13.5px; line-height: 1.6; }

/* Success modal. */
main.cm-sp .cm-modal-overlay { background: rgba(38, 36, 35, .72); }

main.cm-sp .cm-modal-overlay .cm-modal { border-radius: var(--cm26-radius-card); background: var(--cm26-card); }

main.cm-sp .cm-modal-overlay .cm-modal-header {
	background: var(--cm26-ink);
	color: var(--cm26-paper);
	border-radius: var(--cm26-radius-card) var(--cm26-radius-card) 0 0;
}

main.cm-sp .cm-modal-overlay .cm-modal-header h2 { font-family: var(--cm26-font-display); color: #fff; }
main.cm-sp .cm-modal-overlay .cm-modal-header p { color: var(--cm26-dark-secondary); }

main.cm-sp .cm-modal-overlay .cm-modal-ticket-info {
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius);
	background: var(--cm26-paper);
}

main.cm-sp .cm-modal-overlay .cm-modal-ticket-info h3 { font-family: var(--cm26-font-display); color: var(--cm26-ink); }
main.cm-sp .cm-modal-overlay .cm-modal-info-label { color: var(--cm26-body); }
main.cm-sp .cm-modal-overlay .cm-modal-info-value { color: var(--cm26-ink); }

/* ---------------------------------------------------------------------------
   5. Motion.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	main.cm-sp .cm-sp-option::before,
	main.cm-sp .cm-sp-phone { transition: none; }

	main.cm-sp .cm-ticket *,
	main.cm-sp .cm-modal-overlay,
	main.cm-sp .cm-modal-overlay * { animation: none; transition: none; }
}