/**
 * bucket-widgets.css — Sidebar bucket filters (Comprimento/Cepo/Formato).
 *
 * Used by:
 *   CPC_Widget_Length_Bucket / CPC_Widget_Cepo_Bucket / CPC_Widget_Format_Shape
 *
 * Goals:
 *   - Accessible focus state (2px gold outline + offset, never relies on color alone).
 *   - Touch-friendly rows (min 44px height = WCAG 2.5.5 target size).
 *   - Cepo "⭐ Gordos 55+" quick-pill: inside body wrapper above checkboxes,
 *     collapses with the rest when widget is toggled (Woodmart wd-widget-collapse).
 *   - Mobile drawer overflow fix at <= 376px (iPhone SE) — caps body height to
 *     viewport minus header (52px) and bottom toolbar (60px) so the drawer
 *     scrolls internally without pushing the apply button below the fold.
 *
 * Palette:
 *   --gold #C9A84C (focus / active states)
 *   --dark #0D0625 (text on light bg, bg on active pill)
 *   --text-muted #8A7A60 (subtitle / count chrome)
 *
 * Theme override note:
 *   Woodmart aggressively styles `button, [type=button], [type=submit]` with
 *   specificity (0,1,0) including `background-color: var(--btn-bgcolor, #F3F3F3)`,
 *   `min-height: var(--btn-height, 42px)`, `padding: var(--btn-padding, 5px 20px)`,
 *   and `border-radius: var(--btn-brd-radius, 0px)`. Our `.cpc-price-thumb` and
 *   `.cpc-price-apply` rules tie on specificity and lose load-order. The fix
 *   throughout this file is to prefix `.cpc-price-thumb` with `.cpc-price-slider`
 *   and `.cpc-price-apply` with `.cpc-price-range-form` (specificity 0,2,0 beats
 *   0,1,0). Bug observed 2026-05-06 (slider thumbs rendered as light-grey 42px
 *   square boxes — Woodmart button styling won the cascade).
 */

/* ----- Base body wrapper (collapse target) ---------------------------- */
.cpc-bucket-body {
	/* No layout rules — the row container below handles spacing. */
}

/* ----- Checkbox group ------------------------------------------------- */
.cpc-bucket-checkboxes {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cpc-bucket-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 4px;
	cursor: pointer;
	min-height: 44px; /* WCAG 2.5.5 touch target */
	color: #0D0625;
	text-decoration: none; /* anchor reset */
}

.cpc-bucket-fauxbox {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
}

.cpc-bucket-row:hover {
	background: rgba(201, 168, 76, 0.08);
	text-decoration: none;
	color: #0D0625;
}

.cpc-bucket-row:focus-visible {
	outline: 2px solid #C9A84C;
	outline-offset: 2px;
}

.cpc-bucket-row.is-active {
	background: rgba(201, 168, 76, 0.18);
	font-weight: 700;
}

.cpc-bucket-row.is-active .cpc-bucket-fauxbox {
	color: #C9A84C;
}

.cpc-bucket-label {
	font-size: 13px;
	font-weight: 600;
}

.cpc-bucket-sub {
	font-size: 11px;
	color: #8A7A60;
	flex-grow: 1;
}

.cpc-bucket-count {
	font-size: 11px;
	color: #8A7A60;
}

/* ----- Cepo widget header (with quick-pill) --------------------------- */
.cpc-cepo-widget-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.cpc-widget-subtitle {
	font-size: 11px;
	color: #8A7A60;
	font-weight: 400;
	margin-left: 6px;
}

/* ----- Quick-pill (⭐ Gordos 55+) ------------------------------------ */
/* Specificity prefix `.cpc-cepo-widget-header` defeats Woodmart's
   `button, [type=button]` reset (specificity 0,1,0) which would otherwise
   override background/padding/min-height/border-radius. */
.cpc-cepo-widget-header .cpc-quick-pill {
	background: #0D0625;
	color: #C9A84C;
	border: 1px solid #C9A84C;
	border-radius: 20px;
	padding: 7px 14px;
	min-height: 0; /* override Woodmart --btn-height: 42px */
	font-size: 12px;
	font-weight: 600;
	text-transform: none; /* override Woodmart --btn-transform: uppercase */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.cpc-cepo-widget-header .cpc-quick-pill:hover,
.cpc-cepo-widget-header .cpc-quick-pill:focus-visible {
	background: rgba(201, 168, 76, 0.15);
}

.cpc-cepo-widget-header .cpc-quick-pill:focus-visible {
	outline: 2px solid #C9A84C;
	outline-offset: 2px;
}

.cpc-cepo-widget-header .cpc-quick-pill.is-active {
	background: #C9A84C;
	color: #0D0625;
}

.cpc-cepo-widget-header .cpc-quick-pill .count {
	background: #C9A84C;
	color: #0D0625;
	padding: 1px 7px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 700;
}

.cpc-cepo-widget-header .cpc-quick-pill.is-active .count {
	/* Invert the count chip when the pill is active so the chip stays
	   readable against the now-gold pill background. */
	background: #0D0625;
	color: #C9A84C;
}

/* ----- Mobile drawer overflow fix (iPhone SE and similar small screens) -- */
@media (max-width: 376px) {
	.wd-shop-filters .cpc-bucket-checkboxes,
	.wd-side-hidden .cpc-bucket-checkboxes {
		/* dvh accounts for mobile address bar collapse — fallback below. */
		max-height: calc(100dvh - 52px - 60px);
		overflow-y: auto;
	}

	.cpc-cepo-widget-header {
		flex-wrap: wrap;
	}
}

/* ----- Wave 1 dormant widgets — per-taxonomy hooks -------------------- */

/* Wave 1 dormant widgets — Ocasião emoji icons.
   Subtitle column doubles as icon when widget is occasion. Slightly
   larger font + extra spacing makes emojis legible alongside the label. */

.cpc-bucket-widget[data-taxonomy="cpc_occasion"] .cpc-bucket-sub {
    font-size: 1.25em;
    line-height: 1;
    margin-left: .35rem;
}

/* Compact subtitle on smoking_time / experience_level — they have
   no icons and benefit from tighter spacing. Subtitle returns empty
   string from those widgets; this rule just hides the empty span so
   it does not introduce phantom margin. */

.cpc-bucket-widget[data-taxonomy="cpc_smoking_time_bucket"] .cpc-bucket-sub:empty,
.cpc-bucket-widget[data-taxonomy="cpc_experience_level"] .cpc-bucket-sub:empty {
    display: none;
}

/* ===================================================================
   Wave 1 (3.8.0) — Price Range Slider
   ===================================================================
   Specificity prefix on every thumb/apply rule: `.cpc-price-slider` /
   `.cpc-price-range-form`. This raises specificity to (0,2,0) which
   beats Woodmart's button reset (0,1,0). Without this, the empty
   `<button class="cpc-price-thumb">` thumbs render as 42px-tall
   light-grey squares (Woodmart `--btn-height`/`--btn-bgcolor`/
   `--btn-brd-radius` defaults) instead of round gold handles.
   =================================================================== */

.cpc-price-range-form {
    padding: 1rem 0;
}

.cpc-price-range-form .widget-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var( --gold, #C9A84C );
}

.cpc-price-slider {
    position: relative;
    height: 32px;
    margin: .5rem .75rem 1.25rem;
}

.cpc-price-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba( 138, 122, 96, .3 );
    border-radius: 2px;
    transform: translateY( -50% );
}

.cpc-price-track-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var( --gold, #C9A84C );
    border-radius: 2px;
}

.cpc-price-slider .cpc-price-thumb {
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
    min-height: 0;             /* override Woodmart --btn-height: 42px */
    margin-left: -12px;
    padding: 0;                /* override Woodmart --btn-padding: 5px 20px */
    background: var( --gold, #C9A84C );
    color: transparent;        /* button has no text — kill any leak */
    border: 2px solid #fff;
    border-radius: 50%;        /* override Woodmart --btn-brd-radius: 0px */
    cursor: grab;
    box-shadow: 0 1px 4px rgba( 0, 0, 0, .25 );
    transform: translateY( -50% );
    touch-action: none;
    user-select: none;
    text-transform: none;      /* override Woodmart --btn-transform */
    font-size: 0;
    line-height: 0;
    gap: 0;
    box-sizing: border-box;
}

.cpc-price-slider .cpc-price-thumb:active {
    cursor: grabbing;
}

.cpc-price-slider .cpc-price-thumb:focus-visible {
    outline: 2px solid var( --gold, #C9A84C );
    outline-offset: 2px;
}

@media ( max-width: 767px ) {
    .cpc-price-slider .cpc-price-thumb {
        width: 28px;
        height: 28px;
        margin-left: -14px;
    }
}

.cpc-price-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
    color: var( --text, #D4C4A0 );
    margin: .5rem .75rem 1rem;
}

.cpc-price-display-sep {
    color: var( --text-muted, #8A7A60 );
}

.cpc-price-range-form .cpc-price-apply {
    width: 100%;
    padding: .6rem 1rem;
    background: var( --gold, #C9A84C );
    color: var( --dark, #0D0625 );
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;          /* keep WCAG 2.5.5 — but bump beats Woodmart */
    text-transform: uppercase;
}

.cpc-price-range-form .cpc-price-apply:hover {
    background: #d4b557;
}

.cpc-price-range-form .cpc-price-apply:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ─── Wave 1.5 — Quiz prefill banner ──────────────────────────────────────── */
.cpc-quiz-prefill-banner {
    background: linear-gradient( 135deg, rgba( 201, 168, 76, 0.15 ), rgba( 201, 168, 76, 0.05 ) );
    border: 1px solid rgba( 201, 168, 76, 0.4 );
    border-radius: 4px;
    padding: .75rem 1rem;
    margin: 0 0 1rem;
}

.cpc-quiz-prefill-banner-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .9rem;
}

.cpc-quiz-prefill-banner-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.cpc-quiz-prefill-banner-label {
    flex: 1;
    color: var( --gold, #C9A84C );
    font-weight: 500;
}

.cpc-quiz-prefill-banner-link {
    color: var( --text-muted, #8A7A60 );
    text-decoration: underline;
    font-size: .85rem;
    white-space: nowrap;
}

.cpc-quiz-prefill-banner-link:hover,
.cpc-quiz-prefill-banner-link:focus-visible {
    color: var( --gold, #C9A84C );
}

/* ===================================================================
   Wave 2 (3.9.0) — Wrapper color swatches
   ===================================================================
   The abstract widget emits `data-slug="<term-slug>"` on every
   `.cpc-bucket-row` anchor (see abstract-class-cpc-bucket-widget.php:167),
   which lets us color a `::before` pseudo-element WITHOUT touching the PHP
   subtitle (which is esc_html'd by the abstract). One CSS rule per swatch
   keeps the cascade flat and readable; the gradient values approximate
   industry-standard wrapper colors (claro = light tan → oscuro = near-black).
   =================================================================== */

.cpc-bucket-widget[data-taxonomy="cpc_wrapper_color"] .cpc-bucket-row {
    position: relative;
    padding-left: 2.25rem; /* room for the swatch circle */
}

.cpc-bucket-widget[data-taxonomy="cpc_wrapper_color"] .cpc-bucket-row::before {
    content: '';
    position: absolute;
    left: .5rem;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translateY( -50% );
    border: 1px solid rgba( 0, 0, 0, .25 );
    box-shadow: 0 1px 2px rgba( 0, 0, 0, .15 );
    /* Default fallback so unknown slugs still get a visible disc. */
    background: #8A7A60;
}

/* Industry standard wrapper colors, light → dark. Hex values picked to
   approximate Cigar Aficionado's published swatch chart (claro = jade-tan,
   colorado = cinnamon, maduro = espresso, oscuro = near-black). */
.cpc-bucket-widget[data-taxonomy="cpc_wrapper_color"] .cpc-bucket-row[data-slug="claro"]::before           { background: #D9C29A; }
.cpc-bucket-widget[data-taxonomy="cpc_wrapper_color"] .cpc-bucket-row[data-slug="colorado_claro"]::before  { background: #A87F4F; }
.cpc-bucket-widget[data-taxonomy="cpc_wrapper_color"] .cpc-bucket-row[data-slug="colorado"]::before        { background: #7A4A28; }
.cpc-bucket-widget[data-taxonomy="cpc_wrapper_color"] .cpc-bucket-row[data-slug="colorado_maduro"]::before { background: #5A2E15; }
.cpc-bucket-widget[data-taxonomy="cpc_wrapper_color"] .cpc-bucket-row[data-slug="maduro"]::before          { background: #3A1A0A; }
.cpc-bucket-widget[data-taxonomy="cpc_wrapper_color"] .cpc-bucket-row[data-slug="oscuro"]::before          { background: #1A0F08; }

/* Wave 2 leaf widgets — collapse the empty subtitle span (same pattern as
   smoking_time / experience_level) so the count chip sits flush against
   the label without phantom margin. */
.cpc-bucket-widget[data-taxonomy="cpc_wrapper_leaf"] .cpc-bucket-sub:empty,
.cpc-bucket-widget[data-taxonomy="cpc_binder_leaf"] .cpc-bucket-sub:empty,
.cpc-bucket-widget[data-taxonomy="cpc_wrapper_color"] .cpc-bucket-sub:empty {
    display: none;
}

/* ===================================================================
   Wave 13 D (3.10.0) — Smart Presets Pills
   =================================================================== */

.cpc-smart-presets-widget .widget-title {
    font-size: 1rem;
    color: var( --gold, #C9A84C );
    margin: 0 0 .75rem;
    font-weight: 600;
}

.cpc-presets-pills {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cpc-preset-pill {
    display: inline-block;
    padding: .5rem .9rem;
    background: rgba( 201, 168, 76, 0.12 );
    color: var( --text, #D4C4A0 );
    border: 1px solid rgba( 201, 168, 76, 0.35 );
    border-radius: 999px;
    font-size: .85rem;
    line-height: 1.3;
    text-decoration: none;
    min-height: 36px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.cpc-preset-pill:hover,
.cpc-preset-pill:focus-visible {
    background: var( --gold, #C9A84C );
    color: var( --dark, #0D0625 );
    border-color: var( --gold, #C9A84C );
    text-decoration: none;
}

.cpc-preset-pill:focus-visible {
    outline: 2px solid var( --gold, #C9A84C );
    outline-offset: 2px;
}

@media ( max-width: 767px ) {
    .cpc-preset-pill {
        min-height: 44px;
        padding: .65rem 1rem;
    }
}

/* ===================================================================
   2026-05-06 v2 — Visual consistency: Woodmart layered-nav widgets
   (País, Marca, Avaliação) match our custom CPC bucket widgets (Capa,
   Comprimento, Cepo, etc) when an item is selected.
   ===================================================================
   Background:
     - Woodmart's WD_Widget_Layered_Nav (theme/inc/widgets/class-widget-
       layered-nav.php:648) emits selected items as
       `<li class="wc-layered-nav-term wd-active">`.
     - WC core rating filter emits `<li class="wc-layered-nav-rating
       chosen">` for selected ratings.
     - Our custom widgets (CPC_Bucket_Widget) emit
       `<a class="cpc-bucket-row is-active">` with a gold-tint background
       (rgba(201,168,76,0.18)) defined earlier in this file.
     - Reported 2026-05-06: "país quando seleciona fica preto, capa fica
       gold" — visual mismatch confused users.

   Scope rationale (v2):
     - The shop sidebar is `<aside class="wd-sidebar sidebar-container">`
       (theme/sidebar.php:28). There is NO DOM element with ID
       `sidebar-shop` — that's the WP_Widget area registration ID, not
       a DOM ID. v1 of this rule used `#sidebar-shop` and silently never
       matched anything (regression caught after Jorge reported style
       still distinct). v2 scopes via `.wd-sidebar`, the actual wrapper
       class on every WP-rendered sidebar template.
     - !important on background/color is regrettable but required:
       Woodmart's own `.wd-active a` rules tie or beat our specificity
       AND load AFTER our stylesheet (theme stylesheet enqueue order).
       Bumping specificity ties the inline style attrs Woodmart sometimes
       injects. !important is the cheapest reliable winner here, and the
       scope is narrow (`.wd-sidebar` only).

   Visual goal: the WHOLE selected row reads as a gold-tinted pill,
   matching `.cpc-bucket-row.is-active`. We tint BOTH the `<li>` and
   the `<a>` so swatches/icons inside layered-nav items inherit the
   tint and the inner `<a>` block fills the row width.
   =================================================================== */

/* Selected list item (layered-nav term + rating filter, modern + legacy classes). */
.wd-sidebar .wc-layered-nav-term.wd-active,
.wd-sidebar .wc-layered-nav-term.chosen,
.wd-sidebar .wc-layered-nav-rating.chosen,
.wd-sidebar .widget_layered_nav li.chosen,
.wd-sidebar .widget_layered_nav_filters li.chosen {
    background: rgba( 201, 168, 76, 0.18 ) !important;
    border-radius: 4px;
}

/* Selected anchor — block fill + gold typography (matches .cpc-bucket-row.is-active). */
.wd-sidebar .wc-layered-nav-term.wd-active > a,
.wd-sidebar .wc-layered-nav-term.chosen > a,
.wd-sidebar .wc-layered-nav-rating.chosen > a,
.wd-sidebar .widget_layered_nav li.chosen > a,
.wd-sidebar .widget_layered_nav_filters li.chosen > a {
    color: #0D0625 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: block;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Hover gets a slightly stronger tint (matches .cpc-bucket-row:hover stepped up,
   reading as a "deselect" affordance on already-active items). */
.wd-sidebar .wc-layered-nav-term.wd-active:hover,
.wd-sidebar .wc-layered-nav-term.chosen:hover,
.wd-sidebar .wc-layered-nav-rating.chosen:hover,
.wd-sidebar .widget_layered_nav li.chosen:hover {
    background: rgba( 201, 168, 76, 0.28 ) !important;
}

/* Count chip muted-tone — matches `.cpc-bucket-count` (#8A7A60, regular weight)
   so the parenthesized "(N)" doesn't compete with the active label. */
.wd-sidebar .wc-layered-nav-term.wd-active .count,
.wd-sidebar .wc-layered-nav-term.chosen .count,
.wd-sidebar .wc-layered-nav-rating.chosen .count {
    color: #8A7A60 !important;
    font-weight: 400 !important;
}