/*
 * AUTOBOSS Service Plans — product page selector.
 * Each group is a collapsible panel with the same box, title row and spacing as the detail page's
 * other panels (.abtd-extra: 1px line, 8px radius, 44px title row, 12px inner padding, 16px above,
 * 8px between panels). Colors follow --abtd-* when present, then the Blocksy palette.
 */
.absp-wrap {
	--absp-accent: var(--abtd-accent, var(--theme-palette-color-1, #ff5000));
	--absp-price: var(--abtd-price, var(--absp-accent));
	--absp-text: var(--abtd-text, rgba(9, 9, 10, .92));
	--absp-sub: var(--abtd-sub, rgba(9, 9, 10, .56));
	--absp-line: var(--abtd-line, rgba(31, 31, 51, .1));
	--absp-tint: color-mix(in srgb, var(--absp-accent) 6%, #fff);
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--absp-text);
}
.absp { margin: 0; border: 1px solid var(--absp-line); border-radius: 8px; background: #fff; }
.absp + .absp { margin-top: 8px; }

/* Title row: icon · title · chosen plan (ellipsis) · chevron. */
.absp-sum { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.absp-sum::-webkit-details-marker { display: none; }
.absp-sum:focus-visible { outline: 2px solid var(--absp-text); outline-offset: -2px; border-radius: 8px; }
.absp-ico { flex: 0 0 16px; width: 16px; height: 16px; color: var(--absp-price); }
.absp-sum-t { flex: 0 0 auto; font-size: 14px; font-weight: 500; line-height: 22px; color: var(--absp-text); }
.absp-sum-v { display: flex; flex: 1 1 auto; justify-content: flex-end; min-width: 0; white-space: nowrap; font-size: 13px; color: var(--absp-sub); }
.absp-sum-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.absp-sum-p { flex: 0 0 auto; white-space: pre; }
.absp-chev { flex: 0 0 12px; width: 12px; height: 12px; color: var(--absp-sub); transform: rotate(90deg); transition: transform .24s cubic-bezier(.25, .46, .45, .94); }
.absp[open] > .absp-sum .absp-chev { transform: rotate(-90deg); }

/* Body. The fieldset is reset to a plain block so it lines up with the title row. */
.absp-body { container: absp / inline-size; min-width: 0; margin: 0; padding: 0 12px 12px; border: 0; }
.absp-intro { margin: 0 0 10px; font-size: 13px; line-height: 20px; color: var(--absp-sub); }
.absp-info { margin-left: 4px; color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.absp-info:hover { color: var(--absp-accent); }

.absp-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.absp--cols-2 .absp-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.absp--cols-3 .absp-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.absp-opt { position: relative; display: block; min-width: 0; margin: 0; cursor: pointer; }
.absp-opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.absp-card {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) auto;
	align-items: start;
	gap: 0 10px;
	box-sizing: border-box;
	height: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--absp-line);
	border-radius: 8px;
	background: #fff;
	transition: border-color .15s, background-color .15s;
}
.absp-dot { position: relative; box-sizing: border-box; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid rgba(9, 9, 10, .28); border-radius: 50%; background: #fff; }
.absp-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--absp-accent); transform: scale(0); transition: transform .15s; }
.absp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.absp-name { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
/* The child theme sets labels in its mono face (!important), like the spec chips; descriptions read as body text. */
.absp .absp-desc { font-family: var(--theme-font-family, sans-serif); font-weight: 400; font-size: 12px; line-height: 18px; color: var(--absp-sub); overflow-wrap: anywhere; }
.absp .absp-price { font-family: var(--abtd-num, inherit); font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; color: var(--absp-text); }
.absp-badge { display: inline-block; margin-left: 2px; padding: 0 6px; border-radius: 4px; background: var(--absp-accent); font-size: 11px; font-style: normal; font-weight: 500; line-height: 18px; color: #fff; vertical-align: 1px; }

.absp-opt input:checked + .absp-card { border-color: var(--absp-accent); background: var(--absp-tint); }
.absp-opt input:checked + .absp-card .absp-dot { border-color: var(--absp-accent); }
.absp-opt input:checked + .absp-card .absp-dot::after { transform: scale(1); }
.absp-opt input:checked + .absp-card .absp-price { color: var(--absp-price); }
.absp-opt input:focus-visible + .absp-card { outline: 2px solid var(--absp-text); outline-offset: 2px; }
@media (hover: hover) {
	.absp-opt:hover .absp-card { border-color: var(--absp-accent); }
}
.absp-opt.is-none .absp-card { align-items: center; }

/* Narrow panels (phone, bottom sheet, the detail column): one plan per row. */
@container absp (max-width: 560px) {
	.absp-wrap .absp-opts { grid-template-columns: minmax(0, 1fr); }
}
@container absp (min-width: 561px) and (max-width: 760px) {
	.absp--cols-3 .absp-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@supports not (container-type: inline-size) {
	@media (max-width: 599px) {
		.absp-wrap .absp-opts { grid-template-columns: minmax(0, 1fr); }
	}
}

/* Standard WooCommerce form: full row above quantity + button. */
form.cart:not(.abtd-form) .absp-wrap { flex: 1 0 100%; width: 100%; margin: 0 0 16px; }
/* Detail page: 16px under the quantity like its other panels; 12px inside the phone bottom sheet. */
.abtd-sheet .absp-wrap { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
	.absp-card, .absp-dot::after, .absp-chev { transition: none; }
}
@media (forced-colors: active) {
	.absp-opt input:checked + .absp-card { outline: 2px solid Highlight; }
	.absp-dot::after { background: Highlight; }
}