/**
 * My Garage account tab (WooCommerce My Account "my-garage" endpoint).
 * Styles the tab UI in inc/garage-account-tab.php.
 *
 * CASCADE FACTS (verified against installed CSS on this box; Round 3 corrects Round 2's
 * mis-diagnoses using Ryan's DevTools dumps):
 *  - Our stylesheet loads BEFORE Elementor Pro's my-account CSS (<link> order #1 vs #2), so
 *    equal-specificity overrides lose on order → we exceed Elementor's specificity.
 *  - Elementor styles the HEADER cells with a high-specificity, LOGICAL-property rule:
 *    `…thead:first-child tr:first-child th{padding-top:0;padding-bottom:var(--tables-titles-spacing,9px);
 *     padding-inline-start:0}` (spec 0,6,3). Round 2's `…th{padding-top/left}` (0,5,1/0,6,1) lost to
 *    it → header stayed tight / "Car" hugged the left. Fixed by mirroring its chain + our table
 *    classes (0,7,3+) and using the same LOGICAL property for the left inset. [R1]
 *  - Elementor sets `…woocommerce strong{color:var(--general-text-color,#000)}` (=#212121, spec
 *    0,4,1); that beat Round 2's `.kp-garage-active-badge{color}` (0,1,0), so "Active" rendered dark.
 *    The chip works because it is a <span>, not <strong>. Fixed at 0,6,0. [R2]
 *  - style.css:1299 pills every account button with `!important` (0,3,0) — the ONLY place we use
 *    documented `!important` (the T4d ✕ neutraliser), because a source `!important` forces it.
 *  - `.screen-reader-text` is globally styled here (WooCommerce/Elementor/GeneratePress), so the
 *    "Model Year" label is hidden accessibly via that class in PHP. [R3a]
 *
 * Spacing convention: margins/paddings/gaps in rem (Ryan's preference); px kept only for borders,
 * rings, hairline nudges, image sizes, and the 45px/40px control dimensions that match fixed values.
 * TASTE CALLS for screenshot review are marked `TASTE:` inline.
 */

:root {
	--kp-garage-accent: #2e6eac; /* GeneratePress global accent */
}

/* --- T1: first-heading alignment, all account tabs -------------------------- */
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-MyAccount-content h2:first-of-type {
	margin-top: 0;
}

/* --- Intro + Add-a-Car helper copy ------------------------------------------ */
.kp-garage-intro,
.kp-garage-add-help {
	line-height: 1.6;
	color: #4a4a4a;
}
.kp-garage-intro {
	margin: 0 0 1.5rem;
}
.kp-garage-add-help {
	margin: 0 0 1rem;
}

/* --- Shared icon sizing ----------------------------------------------------- */
.kp-garage-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	/* Q4 (R4 close-out): removes the clip mechanism categorically. Firefox snaps the svg's
	   default clip rect to device pixels while painting from a half-pixel flex offset (the label's
	   21px line-height vs the 20px icon leaves ~0.5px; badge sits at the very top of the 640
	   viewBox with zero headroom) - shaving the badge, intermittently by scroll position. Both
	   glyphs sit fully inside their viewBox, so exposing overflow is safe. Pairs with margin-top:1px. */
	overflow: visible;
}

/* --- R1: table header + body padding + LEFT-aligned Actions ------------------ */
/* Header cells: exceed Elementor's `…thead:first-child tr:first-child th` (0,6,3) and use the
   same LOGICAL property (padding-inline-start) so the left inset actually wins. */
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table thead:first-child tr:first-child th {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	vertical-align: middle;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table thead:first-child tr:first-child th:first-child {
	padding-inline-start: 0.5rem; /* aligns "Car" with the car names beneath it */
}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table thead:first-child tr:first-child th:last-child {
	text-align: left; /* Q1: Ryan's veto of the right-align default - with the shrink-wrapped
	                     column, "Actions" sits at the buttons' left edge (browser-verified) */
	width: 1%;
	white-space: nowrap;
}
/* Body cells: beat Elementor's `tbody>tr:nth-child(odd)>td{padding-inline-start:0;…}` (0,5,3)
   via .kp-garage-row on the row (0,6,3). */
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table tbody tr.kp-garage-row td {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	vertical-align: middle;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table tbody tr.kp-garage-row td:first-child {
	padding-inline-start: 0.5rem;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table tbody tr.kp-garage-row td:last-child {
	width: 1%;
	white-space: nowrap;
}

/* --- B1 #6: mobile table-fit ------------------------------------------------- */
/* At ≤767 the WC-inherited cell end-padding (20px × 3 columns) + the shrink-wrapped nowrap Actions
   column pushed .kp-garage-table to 388px inside a 358px content column → ~14px horizontal PAGE
   scroll (b1-6-responsive-sweep.md #6). Trim the inherited end-padding to the theme's own 0.5rem so
   the table reflows into the container. Same 0,6,2 / 0,6,3 selectors as the R1 padding rules (so it
   wins the inherited value); scoped to .shop_table.kp-garage-table so it can NEVER touch other WC
   order/download tables. Desktop unchanged. */
@media (max-width: 767px) {
	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table thead:first-child tr:first-child th,
	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table tbody tr.kp-garage-row td {
		padding-inline-end: 0.5rem;
	}
}

/* --- T4a: Actions wrapper - width parity by construction --------------------- */
.kp-garage-actions {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.5rem;
	align-items: center;
}
.kp-garage-actions > :first-child {
	width: 100%;
	margin: 0;
}
.kp-garage-actions > :first-child .button {
	width: 100%;
}
.kp-garage-actions > form:last-child {
	margin: 0;
}

/* --- T4a: active chip (Ryan's exact values) --------------------------------- */
.kp-garage-active-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.32rem 0.85rem; /* TASTE: pill padding */
	font-weight: 600;
	text-align: center;
	color: #2E7D32;
	background: #C8E6C9;
	border: 2px solid #81C784;
	border-radius: 10000px;
}
.kp-garage-active-label .kp-garage-icon-car {
	width: 20px; /* TASTE */
	height: 20px;
	margin-top: 1px; /* R4: nudges the check-badge fully inside the box + optically centers it */
}

/* --- R2: Status column "Active" text ---------------------------------------- */
/* Beat Elementor's `…woocommerce strong{color:var(--general-text-color)}` (#212121, 0,4,1). */
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table .kp-garage-active-badge {
	color: #2E7D32;
	font-weight: 600;
}

/* --- T4d: remove ✕ de-circled (neutralise style.css:1299's !important pill) --- */
/* SANCTIONED per-use !important: the source rule is !important; our 0,7,0 out-specifies its 0,3,0,
   so among !important declarations ours wins. Only the base look is forced. */
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table .kp-garage-remove.button,
.woocommerce .kp-garage-table .kp-garage-remove.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;  /* fixed tap-target dimension */
	min-height: 40px;
	padding: 0.5rem;
	line-height: 0;
	box-shadow: none;
	cursor: pointer;
	/* explicit longhand too: the wishlist plugin's inline CSS (wlfmc-inline) sets
	   `background-color:var(--kp-blue)!important` (0,6,0); our 0,7,0 wins, longhand removes doubt. */
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 4px !important;
	color: #9e9e9e !important; /* Ryan: default glyph gray */
	transition: color 0.12s ease;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table .kp-garage-remove.button:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table .kp-garage-remove.button:focus-visible,
.woocommerce .kp-garage-table .kp-garage-remove.button:hover,
.woocommerce .kp-garage-table .kp-garage-remove.button:focus-visible {
	background: transparent !important; /* beats style.css:1305 `.button:hover{…!important}` */
	color: #a00 !important; /* Ryan: hover AND focus-visible glyph red */
}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table.kp-garage-table .kp-garage-remove.button:focus-visible,
.woocommerce .kp-garage-table .kp-garage-remove.button:focus-visible {
	outline: 2px solid var(--kp-garage-accent);
	outline-offset: 2px;
}

/* --- R3: Add a Car flex row ------------------------------------------------- */
/* R3a hides the "Model Year" <label> (.screen-reader-text) so centering computes against the
   select alone (previously it centered against the 94px label+select block). */
.kp-garage-add-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;       /* R3c */
	flex-wrap: wrap;
	margin-top: 1.5rem; /* R3b */
}
.woocommerce .kp-garage-add-form .form-row {
	/* flex-basis is the MAIN-axis basis: on the desktop row it's width (grow:1 fills the row), but
	   when the form stacks to a column ≤767px it becomes a HEIGHT basis -> a 16rem basis reserved
	   phantom vertical space between the select and the button. 4rem removes it; desktop unaffected
	   (grow:1 fills the row either way). [B1 #8 stacked-mobile fix] */
	flex: 1 1 4rem;
	min-width: 0;
	margin-bottom: 0;
}
.kp-garage-add-form > button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.kp-garage-add-form > button,
.kp-garage-add-form #kp_garage_add_year {
	min-height: 45px; /* matches Elementor's select2 selection height */
}
@media (max-width: 767px) {
	.kp-garage-add-form {
		flex-direction: column;
		align-items: stretch;
	}
	.kp-garage-add-form > button {
		width: 100%;
	}
}

/* --- R3d: native <select> fallback (chevron centred + #f5f5f5 bg) ------------ */
#kp_garage_add_year {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 3em; /* font-relative chevron clearance (WC convention) */
	background-color: #f5f5f5; /* TASTE */
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: right 0.9em center; /* vertically centred */
}

/* --- R4 selectWoo skin (ancestor-scoped; client-side DOM - Ryan confirms visually) --- */
/* STANDING FACT: in this selectWoo build the OUTER .select2-container carries NO namespace class
   (containerCssClass lands on the selection only). Round 3's `.kp-garage-select2`-keyed rules
   therefore could not reach the container (Q2) and did not land on the selection/arrow (Q3) for
   this instance. Round 4 PURGES those self-rules and scopes everything inside the control via the
   guaranteed `.kp-garage-add-form` ancestor (select2 inserts the container there, next to the
   native select). §3.1's dropdowns live OUTSIDE this form -> isolation preserved by construction. */
.kp-garage-add-form .select2-container {
	width: 100%;
}
/* Q2/C2: the OUTER .select2-container--default base is painted ~#f9fafa by the generated widget
   CSS (0,4,0) - the container rule below (0,5,0) still wins that. But the SELECTION is repainted
   #FAFAFA by a widget-INSTANCE rule in uploads/elementor/css/post-22.css:
   `.elementor-22 .elementor-element.elementor-element-af70c67 …:not(…) .select2-container--default
    .select2-selection--single{background-color:var(--e-global-color-c123736 [=#FAFAFA])}` (0,7,0),
   which Round 4's 0,6,0 lost to. The namespace class (kp-garage-select2) lives on the SELECTION
   (Finding B); ONE documented class-doubling (.kp-garage-add-form.kp-garage-add-form) lifts us to
   0,8,0 - EXCEED, never tie (instance CSS prints after ours). */
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .kp-garage-add-form .select2-container--default {
	background-color: #f5f5f5; /* TASTE: outer container (container-painted states) */
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .kp-garage-add-form.kp-garage-add-form .select2-container--default .select2-selection--single.kp-garage-select2 {
	background-color: #f5f5f5; /* TASTE: beats the post-22 instance selection rule (0,7,0) */
}
/* S3: visible opener hover - base + hover were both #f5f5f5 (no visible change). #eeeeee = the
   palette's --base / --e-global-color-1d5e064; DARKER chosen over lighter so hover doesn't blur into
   the white open panel. Ladder: #f5f5f5 (closed) -> #eeeeee (hover) -> ring (focus) -> S2 (open). */
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .kp-garage-add-form.kp-garage-add-form .select2-container--default .select2-selection--single.kp-garage-select2:hover {
	background-color: #eeeeee; /* TASTE: flip direction from screenshots */
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .kp-garage-add-form.kp-garage-add-form .select2-container--default .select2-selection--single.kp-garage-select2:focus {
	background-color: #eeeeee; /* TASTE: keep focus tone == hover; focus ring preserved */
}
/* Q3/C3: arrow tracks the full 56px selection height (Q5 = keep 56px) -> centered, beating the
   widget-INSTANCE rule
   `…af70c67 …:not(…) …select2-selection__arrow{height:calc( (0.75rem*2) + 16px ) [=40px];right:1rem}`
   (post-22.css, 0,8,0). Round 4's 0,7,0 lost to it. Same namespace + doubling -> 0,9,0. Leave the
   instance's right:1rem (placement is correct). The WC glyph `b` (position:absolute; top:50%)
   re-centers within the now-full-height arrow; no flex (an absolute child ignores it). */
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .kp-garage-add-form.kp-garage-add-form .select2-container--default .select2-selection--single.kp-garage-select2 .select2-selection__arrow {
	height: 100%;
	top: 0;
}
/* S2: fuse the opener into the panel on open (mirrors §3.1's STEP-4 seam pattern). The open-state
   classes land on the OUTER container (no namespace class - standing fact), so ancestor-scope via
   .kp-garage-add-form + the selection's namespace, with the doubling for headroom (0,9,0). Compound
   .select2-container--open WITH the direction class so it matches ONLY while open - selectWoo leaves
   --below/--above lingering after close (§3.1 ITER2 note; the §3.1 dropdown JS close handler), so a
   CLOSED control (no --open) falls back to Elementor's full 10px pill. Opener BACKGROUND is left
   unchanged on open, mirroring §3.1 (which does NOT turn its opener white). 10px == the control's
   Elementor --forms-fields-border-radius, so the fused edge matches the panel corners below/above. */
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .kp-garage-add-form.kp-garage-add-form .select2-container--open.select2-container--below .select2-selection--single.kp-garage-select2 {
	border-radius: 10px 10px 0 0; /* open below: bottom corners flat -> fuse into the panel */
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .kp-garage-add-form.kp-garage-add-form .select2-container--open.select2-container--above .select2-selection--single.kp-garage-select2 {
	border-radius: 0 0 10px 10px; /* open above: top corners flat -> fuse into the panel */
}

/* S1: open type-to-filter panel. Body-appended -> OUTSIDE .kp-garage-add-form, no Elementor instance
   rule reaches it; skinned via our own dropdownCssClass namespace. VALUES REPLICATED from §3.1
   (the §3.1 year-selector stylesheet, STEP 3/4) for parity with the site's FiboSearch year selector - never
   sharing/reusing its classes: panel white + 1px #E0E0E0 border + shadow + Barlow; option 8px 16px /
   15px / --contrast; highlight -> --kp-blue on #fff; selected -> #EEEEEE; search field 8px 10px /
   1px #BDBDBD / radius 4px, focus border --kp-blue; panel corners flat where they meet the control. */
.select2-dropdown.kp-garage-select2-dropdown {
	background: var(--white, #fff);
	border: 1px solid #E0E0E0;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	font-family: 'Barlow', sans-serif;
	overflow: hidden; /* let the rounded corners clip the option rows */
}
.select2-dropdown.kp-garage-select2-dropdown.select2-dropdown--below {
	border-radius: 0 0 10px 10px; /* panel below the control: top flat (meets it), bottom rounded */
}
.select2-dropdown.kp-garage-select2-dropdown.select2-dropdown--above {
	border-radius: 10px 10px 0 0; /* panel above the control: bottom flat (meets it), top rounded */
}
.select2-dropdown.kp-garage-select2-dropdown .select2-results__option {
	/* M1 (R7): NEUTRAL option background. CORRECTED STANDING FACT - Elementor's widget-instance CSS
	   (post-22.css) emits BARE, unprefixed selectors for select2 panel sub-parts because panels
	   body-append: `.select2-results__option{background-color:var(--e-global-color-c7dc8b2 [=#F5F5F5])}`
	   (0,1,0). We never declared a neutral background (assumed the white panel would show through), so
	   that bare rule painted our neutral rows #F5F5F5. Declare white explicitly; this rule is 0,3,0 and
	   beats the bare 0,1,0. (§3.1 declares no neutral bg either -> its rows currently inherit the same
	   #F5F5F5; see the M3 note in the checkpoint.) */
	background-color: #fff;
	padding: 8px 16px;
	font-size: 15px;
	color: var(--contrast, #212121);
}
.select2-dropdown.kp-garage-select2-dropdown .select2-results__option--highlighted[aria-selected],
.select2-dropdown.kp-garage-select2-dropdown .select2-results__option--highlighted[data-selected] {
	background: var(--kp-blue, #2e6eac); /* keyboard/hover highlight -> site blue */
	color: var(--white, #fff);
}
.select2-dropdown.kp-garage-select2-dropdown .select2-results__option[aria-selected="true"],
.select2-dropdown.kp-garage-select2-dropdown .select2-results__option[data-selected="true"] {
	background: #EEEEEE; /* currently-selected year -> quiet Grey 200 */
	color: var(--contrast, #212121);
}
.select2-dropdown.kp-garage-select2-dropdown .select2-search--dropdown {
	padding: 8px;
}
.select2-dropdown.kp-garage-select2-dropdown .select2-search__field {
	padding: 8px 10px;
	border: 1px solid #BDBDBD;
	border-radius: 4px;
	font-family: 'Barlow', sans-serif;
	font-size: 15px;
}
.select2-dropdown.kp-garage-select2-dropdown .select2-search__field:focus {
	border-color: var(--kp-blue, #2e6eac); /* tint only - outline left intact for a11y */
}