/* ==========================================================================
   Hotrod Booking Funnel — v3 REDESIGN (full, dark, on-brand)
   Loaded by mu-plugins/hotrod-funnel-v3-skin.php onto the `hotrod-funnel`
   style handle (inline, after funnel.css) — everywhere the funnel renders
   (product modal + homepage modal + inline #booking).

   Direction: DARK funnel (asphalt panel, white text, orange accents, speed-
   wedge CTAs, slanted "grid-slot" step numbers) to match the v3 site —
   EXCEPT the WooCommerce CHECKOUT step, which stays LIGHT for form/payment
   legibility (Woo + Mollie + Germanized fields are tuned for light).

   Tokens: --hc-red (#FF6B00), --hc-black, fonts come from design-tokens.css.
   Local dark surface vars are defined on .hotrod-funnel below.
   ========================================================================== */

.hotrod-funnel {
	--hf-ink:        #0b0b0c;   /* deepest */
	--hf-asphalt:    #141416;   /* panel */
	--hf-asphalt-2:  #1b1b1f;   /* cards */
	--hf-line:       #2a2a2e;   /* hairlines on dark */
	--hf-line-2:     #3a3a40;   /* stronger hairline */
	--hf-on:         #f4f2ef;   /* body text on dark */
	--hf-on-strong:  #ffffff;
	--hf-on-muted:   #a8a29a;   /* muted on dark */
	--hf-wedge:      12px;
	color: var(--hf-on);
}

/* ---- Panel: dark asphalt + orange speed-stripe on top, no orange glow ---- */
.hotrod-funnel .hf-panel {
	background: var(--hf-asphalt);
	border: 1px solid var(--hf-line);
	box-shadow: none;
	position: relative;
}
.hotrod-funnel .hf-panel::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 2;
	background: repeating-linear-gradient(115deg, var(--hc-red) 0 14px, transparent 14px 26px);
}
.hotrod-funnel .hf-main { color: var(--hf-on); }

/* ---- Header ---- */
.hotrod-funnel .hf-badge {
	border: 0; padding: 0; display: inline-flex; align-items: center; gap: 10px;
	letter-spacing: .2em; color: var(--hc-red);
}
.hotrod-funnel .hf-badge::before { content: ""; width: 26px; height: 2px; background: var(--hc-red); }
.hotrod-funnel .hf-title { font-family: var(--hc-font-display); color: var(--hf-on-strong); }
.hotrod-funnel .hf-intro { color: var(--hf-on-muted); }

/* ---- Stepper: slanted grid-slot tiles ---- */
.hotrod-funnel .hf-stepper,
.hotrod-funnel .hf-topbar { border-bottom-color: var(--hf-line); color: var(--hf-on-muted); }
.hotrod-funnel .hf-step { color: var(--hf-on-muted); }
.hotrod-funnel .hf-step-num {
	border-radius: 0; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
	background: var(--hf-asphalt-2); color: #fff;
}
.hotrod-funnel .hf-step.current { color: #fff; }
.hotrod-funnel .hf-step.current .hf-step-num { background: var(--hc-red); color: #0b0b0c; }
.hotrod-funnel .hf-step.done .hf-step-num { background: rgba(255,107,0,.18); color: var(--hc-red); }
.hotrod-funnel .hf-step.clickable { color: var(--hf-on-muted); }
.hotrod-funnel .hf-step.clickable:hover,
.hotrod-funnel .hf-step.clickable:hover .hf-step-num { color: var(--hc-red); }
.hotrod-funnel .hf-step.clickable:hover .hf-step-num { background: var(--hc-red); color: #0b0b0c; }
.hotrod-funnel .hf-step-sep { color: var(--hf-line-2); }

/* ---- Section typography ---- */
.hotrod-funnel .hf-h3 {
	font-family: var(--hc-font-display); font-weight: 600; letter-spacing: .005em; color: var(--hf-on-strong);
}
.hotrod-funnel .hf-sub { color: var(--hf-on-muted); }

/* ---- Step 1: option cards ---- */
.hotrod-funnel .hf-option {
	background: var(--hf-asphalt-2); border: 1px solid var(--hf-line); color: var(--hf-on);
	transition: border-color .15s var(--hc-ease), box-shadow .15s var(--hc-ease), background .15s var(--hc-ease);
}
.hotrod-funnel .hf-option:hover { border-color: var(--hc-red); box-shadow: none; transform: none; }
.hotrod-funnel .hf-option.sel {
	border-color: var(--hc-red); background: rgba(255,107,0,.08);
	box-shadow: inset 0 0 0 1px var(--hc-red); transform: none;
}
.hotrod-funnel .hf-option-title { color: #fff; }
.hotrod-funnel .hf-option-sub { color: var(--hf-on-muted); }
.hotrod-funnel .hf-option-icon { border-radius: 0; background: rgba(255,107,0,.12); color: var(--hc-red); }

/* ---- Step 2: tour rows ---- */
.hotrod-funnel .hf-trow {
	background: var(--hf-asphalt-2); border: 1px solid var(--hf-line); color: var(--hf-on);
}
.hotrod-funnel .hf-trow:hover { border-color: var(--hc-red); box-shadow: none; transform: none; }
.hotrod-funnel .hf-trow.sel { border-color: var(--hc-red); box-shadow: inset 0 0 0 1px var(--hc-red); background: var(--hf-asphalt-2); }
.hotrod-funnel .hf-trow.sel .hf-trow-body { background: rgba(255,107,0,.08); }
.hotrod-funnel .hf-trow-img { border-right-color: var(--hf-line); }
.hotrod-funnel .hf-trow-img-empty { background: var(--hf-line); }
.hotrod-funnel .hf-trow-title { color: #fff; }
.hotrod-funnel .hf-duration { color: var(--hf-on-muted); }
.hotrod-funnel .hf-trow-desc { color: var(--hf-on-muted); border-top-color: var(--hf-line); }
.hotrod-funnel .hf-trow-info {
	background: transparent !important; color: var(--hf-on-muted) !important; border-color: var(--hf-line) !important;
}
.hotrod-funnel .hf-trow-info:hover { color: #fff !important; border-color: var(--hc-red) !important; }

/* ---- Drivers banner (step 3 header) ---- */
.hotrod-funnel .hf-drivers {
	background: rgba(255,107,0,.07); border: 1px solid var(--hf-line);
}
.hotrod-funnel .hf-drivers-title { color: #fff; }
.hotrod-funnel .hf-drivers-sub { color: var(--hf-on-muted); }
.hotrod-funnel .hf-drivers-icon { background: var(--hf-ink); border-color: var(--hc-red); color: var(--hc-red); }

/* ---- Counter ---- */
.hotrod-funnel .hf-counter { border-color: var(--hf-line-2) !important; background: var(--hf-asphalt-2); }
.hotrod-funnel .hf-counter-btn { background: var(--hf-asphalt-2) !important; color: #fff !important; }
.hotrod-funnel .hf-counter-btn:first-child { border-right-color: var(--hf-line-2); }
.hotrod-funnel .hf-counter-btn:last-child { border-left-color: var(--hf-line-2); }
.hotrod-funnel .hf-counter-btn:hover:not(:disabled) { background: var(--hc-red) !important; color: #0b0b0c !important; }
.hotrod-funnel .hf-counter-val { color: #fff; }

/* ---- Calendar ---- */
.hotrod-funnel .hf-cal { border-color: var(--hf-line); background: var(--hf-asphalt-2); }
.hotrod-funnel .hf-cal-label { color: var(--hc-red); }
.hotrod-funnel .hf-cal-month { color: #fff; }
.hotrod-funnel .hf-cal-arrow { border-color: var(--hf-line); color: var(--hf-on); }
.hotrod-funnel .hf-cal-arrow:hover { border-color: var(--hc-red); color: var(--hc-red); background: transparent; }
.hotrod-funnel .hf-cal-dow { color: var(--hf-on-muted); }
.hotrod-funnel .hf-cal-cell { color: var(--hf-on); }
.hotrod-funnel .hf-cal-cell.ok { border-color: var(--hf-line); background: transparent; }
.hotrod-funnel .hf-cal-cell.ok:hover { border-color: var(--hc-red); }
.hotrod-funnel .hf-cal-cell.off { color: #55555c; }
.hotrod-funnel .hf-cal-cell.ok.sel,
.hotrod-funnel .hf-cal-cell.ok.sel:hover { background: var(--hc-red); border-color: var(--hc-red); color: #0b0b0c; box-shadow: none; }
.hotrod-funnel .hf-cal-cell.ok.sel .hf-cal-dot { background: #0b0b0c; }

/* ---- Slots ---- */
.hotrod-funnel .hf-slots { border: 1px dashed var(--hf-line); }
.hotrod-funnel .hf-slots-label { color: var(--hc-red); }
.hotrod-funnel .hf-slots-empty { color: var(--hf-on-muted); }
.hotrod-funnel .hf-slot { background: var(--hf-asphalt-2); border: 1px solid var(--hf-line); color: var(--hf-on); }
.hotrod-funnel .hf-slot:not(.off):hover { border-color: var(--hc-red); box-shadow: none; }
.hotrod-funnel .hf-slot.sel { border-color: var(--hc-red); background: rgba(255,107,0,.08); box-shadow: inset 0 0 0 1px var(--hc-red); }
.hotrod-funnel .hf-slot-time { color: #fff; }
.hotrod-funnel .hf-slot-price { color: #fff; }
.hotrod-funnel .hf-slot-left { color: var(--hf-on-muted); }

/* ---- Add-ons ---- */
.hotrod-funnel .hf-addon { background: var(--hf-asphalt-2); border: 1px solid var(--hf-line); }
.hotrod-funnel .hf-addon.sel { border-color: var(--hc-red); box-shadow: inset 0 0 0 1px var(--hc-red); }
.hotrod-funnel .hf-addon-title { color: #fff; }
.hotrod-funnel .hf-addon-img { border-color: var(--hf-line); }

/* ---- Gift amounts ---- */
.hotrod-funnel .hf-amount { background: var(--hf-asphalt-2); border: 1px solid var(--hf-line); color: #fff; font-family: var(--hc-font-display); }
.hotrod-funnel .hf-amount:hover { border-color: var(--hc-red); box-shadow: none; }
.hotrod-funnel .hf-amount.sel { border-color: var(--hc-red); background: rgba(255,107,0,.08); box-shadow: inset 0 0 0 1px var(--hc-red); }

/* ---- Footer nav: wedge CTA + light back ---- */
.hotrod-funnel .hf-foot { border-top-color: var(--hf-line); }
.hotrod-funnel .hf-back { color: var(--hf-on) !important; background: transparent !important; }
.hotrod-funnel .hf-back:hover { color: var(--hc-red) !important; }
.hotrod-funnel .hf-next,
.hf-modal .hf-next {
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--hf-wedge)) 100%, 0 100%);
	box-shadow: none !important;
	transition: transform .18s var(--hc-ease), background .18s var(--hc-ease);
}
.hotrod-funnel .hf-next:hover:not(:disabled),
.hf-modal .hf-next:hover:not(:disabled) { transform: translateX(3px); box-shadow: none !important; }

/* ---- Sidebar: booking cart ---- */
.hotrod-funnel .hf-sidebar { background: var(--hf-asphalt); border-left: 1px solid var(--hf-line); }
.hotrod-funnel .hf-cart { background: var(--hf-asphalt-2); border: 1px solid var(--hf-line) !important; }
.hotrod-funnel .hf-cart-head { color: var(--hc-red); border-bottom-color: var(--hf-line); }
.hotrod-funnel .hf-cart-label { color: #fff; }
.hotrod-funnel .hf-cart-sub { color: var(--hf-on-muted); }
.hotrod-funnel .hf-cart-val { color: #fff; }
.hotrod-funnel .hf-cart-empty { color: var(--hf-on-muted); }
.hotrod-funnel .hf-cart-total { border-top-color: var(--hf-line); }
.hotrod-funnel .hf-cart-total span { color: #fff; }
.hotrod-funnel .hf-cart-total strong { color: var(--hc-red); font-family: var(--hc-font-display); }
.hotrod-funnel .hf-cart-note { background: var(--hf-ink); border-color: var(--hf-line); color: var(--hf-on-muted); }
.hotrod-funnel .hf-cart-note-head { color: #fff; }

/* ---- Reset button (top-right) ---- */
.hotrod-funnel .hf-reset {
	background: var(--hf-asphalt-2) !important; color: #fff !important; border-color: var(--hf-line) !important;
}
.hotrod-funnel .hf-reset:hover { background: var(--hc-red) !important; color: #0b0b0c !important; border-color: var(--hc-red) !important; }
.hotrod-funnel .hf-resume-note { background: rgba(184,134,11,.12); }

/* ---- States ---- */
.hotrod-funnel .hf-loading { color: var(--hf-on-muted); }
.hotrod-funnel .hf-error { background: rgba(255,107,0,.1); border-color: var(--hc-red); color: #ffd9c2; }

/* ---- Insurance prompt (overlay) ---- */
.hf-prompt .hf-prompt-box { background: var(--hf-asphalt); border: 1px solid var(--hf-line); box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.hf-prompt .hf-prompt-title { color: #fff; }
.hf-prompt .hf-prompt-text { color: var(--hf-on-muted); }
.hf-prompt .hf-prompt-yes {
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--hf-wedge)) 100%, 0 100%); box-shadow: none !important;
}
.hf-prompt .hf-prompt-yes:hover { transform: translateX(3px); box-shadow: none !important; }
.hf-prompt .hf-prompt-no { background: var(--hf-asphalt-2) !important; color: #fff !important; border-color: var(--hf-line) !important; }
.hf-prompt .hf-prompt-no:hover { border-color: var(--hc-red) !important; color: var(--hc-red) !important; }

/* ---- Product-page CTA + "in demand" chips (light page context) ---- */
.hf-product-cta {
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--hf-wedge)) 100%, 0 100%); box-shadow: none !important;
	transition: transform .18s var(--hc-ease), background .18s var(--hc-ease);
}
.hf-product-cta:hover { transform: translateX(3px); box-shadow: none !important; }

/* ==========================================================================
   MODAL — dark frame (the homepage + product overlay)
   ========================================================================== */
.hf-modal .hf-modal-dialog {
	background: var(--hf-asphalt);
	border: 1px solid var(--hf-line);
	box-shadow: 0 40px 120px rgba(0,0,0,.7);
}
.hf-modal .hf-modal-close { background: var(--hc-red) !important; color: #0b0b0c !important; }
.hf-modal .hf-modal-close:hover { background: #fff !important; }
.hf-modal .hotrod-funnel-in-modal .hf-panel { border-width: 0; box-shadow: none; }

/* ==========================================================================
   CHECKOUT (step 5) — DELIBERATELY LIGHT.
   The dark panel hosts a clean WHITE checkout card so Woo / Mollie / Germanized
   fields stay legible. The plugin's own funnel.css already tunes the light
   checkout; we just guarantee the surface + text are light inside the dark shell.
   ========================================================================== */
.hotrod-funnel .hf-checkout {
	background: var(--hc-white);
	color: var(--hc-black);
	padding: clamp(18px, 3vw, 34px);
	border: 1px solid var(--hc-line);
	margin-top: 6px;
}
.hotrod-funnel .hf-checkout,
.hotrod-funnel .hf-checkout * { color: var(--hc-black); }
.hotrod-funnel .hf-checkout a,
.hotrod-funnel .hf-checkout .order-total .amount { color: var(--hc-red); }
.hotrod-funnel .hf-checkout input,
.hotrod-funnel .hf-checkout select,
.hotrod-funnel .hf-checkout textarea { background: var(--hc-white); color: var(--hc-black); }
/* checkout primary button keeps the wedge, orange on light */
.hotrod-funnel .hf-checkout #place_order {
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--hf-wedge)) 100%, 0 100%);
	box-shadow: none !important; color: #fff !important;
}
.hotrod-funnel .hf-checkout #place_order:hover { transform: translateX(3px); box-shadow: none !important; }
/* the "back to booking" link above the checkout sits on the dark panel */
.hotrod-funnel .hf-checkout-back { color: var(--hf-on-muted); }
.hotrod-funnel .hf-checkout-back:hover { color: var(--hc-red); }

/* ==========================================================================
   LIGHT THEME — when html.theme-light is active, the funnel goes light to
   match the light site. Re-points the local --hf-* vars + flips white text.
   (The dark vars above remain the default / dark-mode look.)
   ========================================================================== */
html.theme-light .hotrod-funnel {
	--hf-ink:        #ffffff;
	--hf-asphalt:    #ffffff;
	--hf-asphalt-2:  #f5f5f5;
	--hf-line:       #e2e2e2;
	--hf-line-2:     #c9c9c9;
	--hf-on:         #111111;
	--hf-on-strong:  #111111;
	--hf-on-muted:   #555555;
	color: var(--hf-on);
}
/* panel frame reads as a light card with the hard black offset (v3 signature) */
html.theme-light .hotrod-funnel .hf-panel { border-color: var(--hc-black); box-shadow: 10px 10px 0 0 var(--hc-black); }
/* white headings/values → ink */
html.theme-light .hotrod-funnel .hf-title,
html.theme-light .hotrod-funnel .hf-h3,
html.theme-light .hotrod-funnel .hf-option-title,
html.theme-light .hotrod-funnel .hf-trow-title,
html.theme-light .hotrod-funnel .hf-drivers-title,
html.theme-light .hotrod-funnel .hf-counter-val,
html.theme-light .hotrod-funnel .hf-cal-month,
html.theme-light .hotrod-funnel .hf-slot-time,
html.theme-light .hotrod-funnel .hf-slot-price,
html.theme-light .hotrod-funnel .hf-addon-title,
html.theme-light .hotrod-funnel .hf-amount,
html.theme-light .hotrod-funnel .hf-cart-label,
html.theme-light .hotrod-funnel .hf-cart-val,
html.theme-light .hotrod-funnel .hf-cart-total span,
html.theme-light .hotrod-funnel .hf-cart-note-head { color: var(--hf-on-strong); }
/* counter buttons read dark-on-light */
html.theme-light .hotrod-funnel .hf-counter-btn { color: var(--hf-on) !important; }
/* modal dialog becomes a light card */
html.theme-light .hf-modal .hf-modal-dialog { border-color: var(--hc-black); box-shadow: 14px 14px 0 0 var(--hc-black); }

/* ==========================================================================
   LIGHT-MODE VISIBILITY FIXES (reported)
   ========================================================================== */
/* Stepper: inactive step numbers were white-on-light → ink on a light tile. */
html.theme-light .hotrod-funnel .hf-step-num { background: var(--hf-line); color: var(--hf-on-strong); }
html.theme-light .hotrod-funnel .hf-step.current .hf-step-num { background: var(--hc-red); color: #fff; }
html.theme-light .hotrod-funnel .hf-step.done .hf-step-num { background: rgba(255,107,0,.18); color: var(--hc-red); }
html.theme-light .hotrod-funnel .hf-step.clickable:hover .hf-step-num { background: var(--hc-red); color: #fff; }
/* Reload/reset button: white icon → ink. */
html.theme-light .hotrod-funnel .hf-reset { color: var(--hf-on-strong) !important; }
html.theme-light .hotrod-funnel .hf-reset svg { color: var(--hf-on-strong) !important; }
/* Insurance prompt "No, continue" button: white text → ink. */
html.theme-light .hf-prompt .hf-prompt-no { color: var(--hf-on-strong) !important; }

/* ==========================================================================
   CALENDAR DOT — was overlapping the date number. Pin to bottom-centre (both modes).
   ========================================================================== */
.hotrod-funnel .hf-cal-cell { position: relative; }
.hotrod-funnel .hf-cal-cell .hf-cal-dot {
	position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
	width: 4px; height: 4px; margin: 0; pointer-events: none;
}

/* ==========================================================================
   REPORTED FIXES v2
   ========================================================================== */

/* 1) PRIVATE / BUSINESS segmented control (.hf-ctype) — was misaligned: the
   selected tab carried an offset shadow/transform that pushed it out of the
   frame and shoved "Private" off-centre. Rebuild as a clean 2-up segment. */
.hotrod-funnel .hf-ctype {
	display: flex; align-items: stretch;
	border: 2px solid var(--hf-on-strong); background: transparent;
}
.hotrod-funnel .hf-ctype-tab {
	flex: 1 1 0; min-width: 0; margin: 0; border: 0; border-radius: 0;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 1.4rem 1rem; text-align: center;
	box-shadow: none !important; transform: none !important; clip-path: none !important;
	background: transparent; color: var(--hf-on-strong);
	font-family: var(--hc-font-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.hotrod-funnel .hf-ctype-tab + .hf-ctype-tab { border-left: 2px solid var(--hf-on-strong); }
.hotrod-funnel .hf-ctype-tab.sel { background: var(--hc-red) !important; color: #fff !important; }
.hotrod-funnel .hf-ctype-tab:hover:not(.sel) { background: rgba(255,107,0,.08); }

/* 2) ACTIVE breadcrumb tile readable in light (force red bg + white digit). */
html.theme-light .hotrod-funnel .hf-step.current .hf-step-num { background: var(--hc-red) !important; color: #fff !important; }
html.theme-light .hotrod-funnel .hf-step.current { color: var(--hf-on-strong) !important; }

/* 3a) ADD-ON title unreadable: the selected add-on kept a light cream bg from
   the base plugin CSS while the title stayed white. Force the card surface to
   the funnel surface in BOTH modes so the title (white in dark / ink in light)
   always has correct contrast. */
.hotrod-funnel .hf-addon,
.hotrod-funnel .hf-addon.sel { background: var(--hf-asphalt-2) !important; }
.hotrod-funnel .hf-addon.sel { box-shadow: inset 0 0 0 1px var(--hc-red); border-color: var(--hc-red); }

/* 3b) CHECKOUT fields: typed text was too light to read in light mode.
   Force ink fill on inputs (some browsers need -webkit-text-fill-color). */
html.theme-light .hotrod-funnel .hf-checkout input,
html.theme-light .hotrod-funnel .hf-checkout select,
html.theme-light .hotrod-funnel .hf-checkout textarea {
	color: #111 !important; -webkit-text-fill-color: #111 !important;
	background: #fff !important; border-color: #c9c9c9 !important;
}
html.theme-light .hotrod-funnel .hf-checkout input::placeholder,
html.theme-light .hotrod-funnel .hf-checkout textarea::placeholder { color: #9a958d !important; -webkit-text-fill-color: #9a958d !important; }

/* ==========================================================================
   REPORTED FIXES v3 — ROUTE + TOUR-DETAILS widgets follow the site theme.
   These widgets (route.css / tour-details.css) shipped with FIXED colors and
   ignored html.theme-light|dark → the SVG step list rendered white-on-white
   in light mode and the route box stayed white in dark mode. Pin explicit,
   theme-keyed colors that beat the token fallbacks in both modes.
   ========================================================================== */

/* ---- SVG route box + numbered step list ([hotrod_tour_route], in the funnel/tour card) ---- */
/* DARK (default + explicit): dark box, light text. */
html.theme-dark .hotrod-route-svg,
.hotrod-funnel .hotrod-route-svg { background: #141416 !important; border-color: #2A2A2E !important; }
html.theme-dark .hotrod-route-list li,
.hotrod-funnel .hotrod-route-list li { color: #F4F2EF !important; }
html.theme-dark .hotrod-route-name,
.hotrod-funnel .hotrod-route-name { color: #FFFFFF !important; }
html.theme-dark .hotrod-route-note,
.hotrod-funnel .hotrod-route-note { color: #A8A29A !important; }
/* LIGHT: light box, ink text (overrides the dark rule above via html.theme-light). */
html.theme-light .hotrod-route-svg { background: #FFFFFF !important; border-color: #E2E2E2 !important; }
html.theme-light .hotrod-route-list li { color: #333333 !important; }
html.theme-light .hotrod-route-name { color: #111111 !important; }
html.theme-light .hotrod-route-note { color: #555555 !important; }
/* node digits stay white on the orange badge in both modes */
.hotrod-route-list li::before { color: #fff !important; }

/* ---- Tour-details widget (.hotrod-td / .hotrod-tm): flip its local vars in light ---- */
html.theme-light .hotrod-td,
html.theme-light .hotrod-tm {
	--htd-ink: #F5F5F5;      /* page/base */
	--htd-asphalt: #FFFFFF;  /* cards/panels */
	--htd-line: #E2E2E2;
	--htd-on: #111111;
	--htd-muted: #555555;
}
/* hard-coded whites → ink in light mode */
html.theme-light .hotrod-td .htd-title,
html.theme-light .hotrod-td .htd-stopdesc b,
html.theme-light .hotrod-td .htd-price b,
html.theme-light .hotrod-tm .htm-title,
html.theme-light :is(.hotrod-td,.hotrod-tm) .htd-chip { color: #111 !important; }
html.theme-light .hotrod-td .htd-stop.on { color: #111 !important; }
/* map: light container + light-friendly markers/caption in light mode */
html.theme-light :is(.hotrod-td,.hotrod-tm) .htd-map .leaflet-container { background: #e9e6e0 !important; }
html.theme-light :is(.hotrod-td,.hotrod-tm) .htd-mk { background: #fff; color: #0b0b0c; }
html.theme-light :is(.hotrod-td,.hotrod-tm) .htd-cap { background: rgba(255,255,255,.88); color: #444; }
html.theme-light :is(.hotrod-td,.hotrod-tm) .htd-cap b { color: var(--htd-orange); }

/* ==========================================================================
   REPORTED FIXES v3 — CONTRAST / POLISH SWEEP (2026-07-17)
   Readability + aesthetic fixes found while QA'ing the funnel in both themes.
   Two root patterns:
   (a) small row-toggle pills used a HARD-CODED #fff (v3) or core BLACK on
       :hover → invisible on the opposite surface. Made theme-aware via
       var(--hf-on) (light text on dark / ink on light) + a subtle orange
       tint, kept SUBTLER than the selected/.sel state ("hover < chosen").
   (b) the CHECKOUT step renders as a LIGHT card in BOTH site themes, yet a
       batch of readability rules were scoped to html.theme-light → in the
       DEFAULT (dark) theme that light checkout inherited light text
       (unreadable placeholders, black-on-black gift button). Re-applied
       UNCONDITIONALLY (the checkout is light regardless of theme).
   ========================================================================== */

/* 1) Row-toggle pills — "+ INFO" (.hf-trow-info) + "SEE ROUTE"
   (.hf-trow-route-toggle, never restyled for v3 → used core's black hover). */
.hotrod-funnel .hf-trow-info,
.hotrod-funnel .hf-trow-route-toggle {
	background: transparent !important;
	color: var(--hf-on-muted) !important;
	border: 1px solid var(--hf-line) !important;
}
.hotrod-funnel .hf-trow-info:hover,
.hotrod-funnel .hf-trow-route-toggle:hover {
	background: rgba(255,107,0,.10) !important;
	color: var(--hf-on) !important;            /* light on dark / ink on light */
	border-color: var(--hc-red) !important;
}

/* 2) Insurance / inquiry prompt headline — kill any inherited highlight block,
   use the theme ink (white on the dark box / ink #111 on the light box). */
.hf-prompt .hf-prompt-title {
	background: none !important;
	color: var(--hf-on-strong) !important;
	padding: 0 !important;
}

/* 3) PRIVATE / BUSINESS segmented control — flat + tidy, no offset/double-box
   (overflow:hidden clips the orange fill cleanly inside the frame). */
.hotrod-funnel .hf-ctype {
	display: inline-flex; width: fit-content;
	border: 1px solid var(--hf-line-2) !important;
	border-radius: 0; overflow: hidden;
	background: transparent !important; box-shadow: none !important;
}
.hotrod-funnel .hf-ctype-tab {
	border: 0 !important; box-shadow: none !important;
	transform: none !important; clip-path: none !important;
	background: transparent !important; color: var(--hf-on-muted) !important;
}
.hotrod-funnel .hf-ctype-tab + .hf-ctype-tab { border-left: 1px solid var(--hf-line-2) !important; }
.hotrod-funnel .hf-ctype-tab.sel { background: var(--hc-red) !important; color: #fff !important; }
.hotrod-funnel .hf-ctype-tab:hover:not(.sel) {
	background: rgba(255,107,0,.10) !important; color: var(--hf-on) !important;
}

/* 4) CHECKOUT is a LIGHT card in BOTH themes → force readable, unconditionally.
   Scoped to TEXT inputs (not submit/button/checkbox) so the -webkit-text-fill
   never bleeds onto a button label. */
.hotrod-funnel .hf-checkout input[type="text"],
.hotrod-funnel .hf-checkout input[type="email"],
.hotrod-funnel .hf-checkout input[type="tel"],
.hotrod-funnel .hf-checkout input[type="number"],
.hotrod-funnel .hf-checkout input[type="search"],
.hotrod-funnel .hf-checkout input[type="password"],
.hotrod-funnel .hf-checkout input:not([type]),
.hotrod-funnel .hf-checkout select,
.hotrod-funnel .hf-checkout textarea {
	color: #111 !important; -webkit-text-fill-color: #111 !important;
	background: #fff !important; border-color: #c9c9c9 !important;
}
.hotrod-funnel .hf-checkout input::placeholder,
.hotrod-funnel .hf-checkout textarea::placeholder {
	color: #6b6b6b !important; -webkit-text-fill-color: #6b6b6b !important; opacity: 1 !important;
}
/* Secondary checkout buttons + the gift-card "Apply" — were black-on-black at
   rest. Dark button + WHITE label (set -webkit-text-fill-color too, else the
   text-input fix's fill wins and the label goes invisible). Orange + ink on hover. */
.hotrod-funnel .hf-checkout #pwgc-redeem-button,
.hotrod-funnel .hf-checkout .button:not(#place_order),
.hotrod-funnel .hf-checkout button.button:not(#place_order),
.hotrod-funnel .hf-checkout input[type="submit"]:not(#place_order) {
	background: #111 !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
	border-color: #111 !important;
}
.hotrod-funnel .hf-checkout #pwgc-redeem-button:hover,
.hotrod-funnel .hf-checkout .button:not(#place_order):hover,
.hotrod-funnel .hf-checkout button.button:not(#place_order):hover,
.hotrod-funnel .hf-checkout input[type="submit"]:not(#place_order):hover {
	background: var(--hc-red) !important; border-color: var(--hc-red) !important;
	color: #111 !important; -webkit-text-fill-color: #111 !important;
}
/* Gift-card field: fix the "cut / ugly" layout. Label on its own line, then the
   field GROWS and the button sits beside it (was: field collapsed + button shoved
   off the right edge). Readable ink + button height match. */
.hotrod-funnel .hf-checkout #pwgc-redeem-form {
	display: flex !important; flex-wrap: wrap !important; align-items: stretch !important;
}
.hotrod-funnel .hf-checkout #pwgc-redeem-form > label { flex: 0 0 100% !important; }
.hotrod-funnel .hf-checkout #pwgc-redeem-gift-card-number {
	flex: 1 1 auto !important; min-width: 0 !important; width: auto !important;
	color: #111 !important; -webkit-text-fill-color: #111 !important; background: #fff !important;
	height: 50px !important; clip-path: none !important;
}
.hotrod-funnel .hf-checkout #pwgc-redeem-button { flex: 0 0 auto !important; clip-path: none !important; }

/* ==========================================================================
   AUDIT FIX PACK 2026-07-18 — design-fidelity gegen Funnel.dc.html (Mock).
   Findings #14/#16/#17/#43: Orange-CTAs tragen JET-Text (Mock #0b0b0c auf
   Orange, nicht Weiß), Choose-Button bekommt den 8px-Wedge + weißen
   Selected-State, Fehlertext in Light lesbar, Versicherungs-Hinweis dunkel.
   `html body`-Präfix hebt die Spezifität über die !important-Theme-Proof-
   Blöcke in funnel.css (0,2,2 > 0,2,0; :disabled-Regeln mit b=3 gewinnen
   weiter — der Disabled-State behält #5a4632/#a98a6a).
   ========================================================================== */

/* #14 — Primär-CTA: JET-Text auf Orange (alle Nicht-Disabled-Zustände). */
html body .hotrod-funnel .hf-next { color: #0b0b0c !important; }

/* #14 + #16 — Choose-Button: JET-Text, 8px-Speed-Wedge, kein Rahmen. */
html body .hotrod-funnel .hf-trow-choose {
	color: #0b0b0c !important;
	border: 0 !important;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
/* #16 — Selected: weiß mit JET-Text (Mock .sel{background:#fff}). */
html body .hotrod-funnel .hf-trow-choose.sel,
html body .hotrod-funnel .hf-trow-choose.sel:hover {
	background: #fff !important;
	color: #0b0b0c !important;
}

/* #17 — Fehlerbox: Text in Light-Theme lesbar (dunkles Rostrot statt Creme). */
html.theme-light .hotrod-funnel .hf-error { color: #9a3412; }

/* #43 — Versicherungs-Hinweis: dunkle Amber-Fläche + helle Schrift (Mock),
   Light-Theme behält den bisherigen hellen Look. */
.hotrod-funnel .hf-ins-disclaim { background: rgba(184,134,11,.1); color: #ffcf87; }
html.theme-light .hotrod-funnel .hf-ins-disclaim { background: #fff8e6; color: #7a5b00; }

/* #18 (Rest) — Radius-0-Sweep: --hc-radius war nirgends definiert, also
   griffen die 10-12px-Fallbacks (Gruppen-/Ape-Karten, Hinweis-Boxen).
   Token auf 0 pinnen erledigt alle var(--hc-radius, …)-Stellen auf einmal;
   dazu die zwei verbliebenen 8px-Dashed-Boxen der Gruppen-UI. */
.hotrod-funnel { --hc-radius: 0; }
.hotrod-funnel .hf-inq-summary,
.hotrod-funnel .hf-ape-none { border-radius: 0; }




/* ================================================================
   CHECKOUT POLISH (User 18.07.) — einheitliche Feldhöhen/-abstände,
   kompakte Mollie-Kartenfelder (Default-iframe wäre 150px hoch!).
   ================================================================ */
/* Eine Feldhöhe für ALLES: Inputs, Selects, select2 (Land/Region). */
.hotrod-funnel .hf-checkout .woocommerce form .form-row input.input-text,
.hotrod-funnel .hf-checkout .woocommerce form .form-row select {
	height: 46px !important; padding: 0 14px !important; line-height: 44px;
	box-sizing: border-box;
}
.hotrod-funnel .hf-checkout .woocommerce form .form-row textarea {
	min-height: 92px; padding: 12px 14px !important;
}
.hotrod-funnel .hf-checkout .select2-container .select2-selection--single {
	height: 46px !important; border: 1px solid var(--hc-grey-light); border-radius: 0;
	background: var(--hc-white);
}
.hotrod-funnel .hf-checkout .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 44px !important; padding-left: 14px; color: var(--hc-black);
}
.hotrod-funnel .hf-checkout .select2-container .select2-selection--single .select2-selection__arrow {
	height: 44px !important;
}
/* Ein Zeilenabstand für alle form-rows + einheitlicher Label-Abstand. */
.hotrod-funnel .hf-checkout .woocommerce form .form-row {
	margin: 0 0 16px !important; padding: 0 !important;
}
.hotrod-funnel .hf-checkout .woocommerce form .form-row label {
	display: block; margin: 0 0 6px !important;
}
.hotrod-funnel .hf-checkout #billing_email_field.hf-email-top { margin-bottom: 16px !important; }
/* Mollie-Komponenten: kompakt + einheitlich (46px wie alle Felder). */
.hotrod-funnel .hf-checkout .mollie-components {
	display: flex; flex-direction: column; gap: 0 !important; margin-top: 4px;
}
.hotrod-funnel .hf-checkout .mollie-component {
	height: 46px !important; min-height: 46px !important;
	padding: 0 14px !important; margin: 0 0 14px !important;
	display: flex !important; align-items: center !important; overflow: hidden;
	border-width: 1px !important; box-sizing: border-box;
}
.hotrod-funnel .hf-checkout .mollie-component iframe {
	height: 26px !important; width: 100% !important; display: block;
}
/* Ablaufdatum/CVC: volle Breite statt gestapelter 50%-Boxen (Spalten-Layout). */
.hotrod-funnel .hf-checkout .mollie-components #expiryDate,
.hotrod-funnel .hf-checkout .mollie-components #verificationCode {
	max-width: 100% !important; padding-left: 14px !important; padding-right: 14px !important;
}
.hotrod-funnel .hf-checkout .mollie-component-label { margin: 0 0 6px !important; }