/*
 * Bitna Catalog Filter — drawer.
 * Bitna palette: nude #ccad9d for anything picked, soft blush shades for surfaces and lines, white page,
 * warm cocoa text. One soft 8px corner on every box. Lists line up like a checklist (no uneven pills).
 * Fonts come from the theme (Inter on bitnarent.com).
 */
:root {
	--bcf-white: #ffffff;
	--bcf-blush-50: #fdf8f6;   /* panels */
	--bcf-blush-100: #f8eeea;  /* hover, search, close button */
	--bcf-blush-200: #f1e3dd;  /* dividers */
	--bcf-blush-300: #e7d3ca;  /* box and field borders */
	--bcf-accent: #ccad9d;     /* Bitna nude. Set in WooCommerce → Filter Katalog. */
	--bcf-ink: #3d2f2a;        /* headings, text on nude (6.1:1 on #ccad9d) */
	--bcf-text: #574843;
	--bcf-muted: #84706a;
	--bcf-danger: #b3261e;
	--bcf-r: 8px;
	--bcf-gutter: 24px;
}

/* Theme guard: Bitna's Elementor kit styles every <button> (nude text, 2px letter-spacing, hover fills).
   Weight = one ID: beats theme class rules, loses to the plugin's own #bcf-drawer .class rules. */
#bcf-drawer :where(button), #bcf-bar :where(button) {
	margin: 0; padding: 0; width: auto; min-height: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
	color: inherit; font: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; text-decoration: none; text-shadow: none;
}
#bcf-drawer :where(button:hover, button:focus), #bcf-bar :where(button:hover, button:focus) { background: none; color: inherit; box-shadow: none; }
#bcf-drawer :where(input, select) { margin: 0; box-shadow: none; }

/* ---------- Bar above the products ---------- */
.bcf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
#bcf-trigger {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 42px; margin: 0; padding: 0 18px 0 16px; box-shadow: none; line-height: 1; text-decoration: none; text-shadow: none;
	background: var(--bcf-white); color: var(--bcf-ink); border: 1px solid var(--bcf-blush-300); border-radius: 999px;
	font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
	transition: border-color .15s, background .15s;
}
#bcf-trigger:hover { border-color: var(--bcf-accent); background: var(--bcf-blush-50); }
#bcf-trigger:focus { outline: none; }
#bcf-trigger:focus-visible { outline: 2px solid var(--bcf-ink); outline-offset: 2px; }
#bcf-trigger .bcf-icon { width: 18px; height: 18px; }
#bcf-trigger .bcf-badge {
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bcf-accent); color: var(--bcf-ink);
	font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; letter-spacing: 0;
}
/* Client #2: FILTER sits on the right of the catalog search, same height and look as the search pill.
   Chips (#11) stay in the bar right under the search. Moved by the inline script after the bar. */
.bcf-with-filter { display: flex !important; align-items: flex-start; gap: 10px; }
.bcf-with-filter > form { flex: 1; min-width: 0; }
/* The theme forces the search form to width:100% !important on phones (body.bitna-catalog-mobile-v7), which pushed FILTER off-screen.
   Doubled class + form class out-rank it. */
html body .bcf-with-filter.bcf-with-filter { flex-wrap: nowrap !important; }
html body .bcf-with-filter.bcf-with-filter > form.bitna-catalog-search-form { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
html body .bcf-with-filter.bcf-with-chips { margin-bottom: 12px; }
.bcf-with-filter #bcf-trigger { flex: none; height: var(--bcf-search-h, 58px); min-height: 0; padding: 0 22px 0 20px; border-color: rgba(17, 24, 39, .1); box-shadow: 0 8px 24px rgba(17, 24, 39, .06); }
.bcf-bar[hidden] { display: none; }
@media (max-width: 600px) {
	.bcf-with-filter { gap: 8px; }
	.bcf-with-filter #bcf-trigger { position: relative; width: var(--bcf-search-h, 58px); padding: 0; }
	.bcf-with-filter #bcf-trigger > span:not(.bcf-badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.bcf-with-filter #bcf-trigger .bcf-badge { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px; font-size: 10px; }
}
#bcf-bar .bcf-chips, #bcf-drawer .bcf-tiles { list-style: none; margin: 0; padding: 0; }
#bcf-bar .bcf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#bcf-bar .bcf-chips li, #bcf-drawer .bcf-tiles li { margin: 0; padding: 0; }
#bcf-bar .bcf-chip {
	display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 14px; border-radius: 999px;
	background: var(--bcf-blush-100); color: var(--bcf-ink); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .15s;
}
#bcf-bar .bcf-chip:hover { background: var(--bcf-blush-200); color: var(--bcf-ink); }
#bcf-bar .bcf-x { font-size: 16px; line-height: 1; opacity: .55; }
#bcf-bar .bcf-clear { margin-left: 6px; font-size: 12px; color: var(--bcf-muted); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Catalog banner (full width, thin; any upload is cropped to fit) ---------- */
#bcf-banner { --bcf-banner-h: clamp(240px, 26vw, 380px); position: relative; width: 100%; margin: 0 0 20px; }
#bcf-banner[hidden] { display: none; }
#bcf-banner :where(button) { margin: 0; padding: 0; min-height: 0; border: 0; box-shadow: none; background: none; }
#bcf-banner .bcf-banner-track { position: relative; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#bcf-banner .bcf-banner-track::-webkit-scrollbar { display: none; }
#bcf-banner .bcf-slide { flex: 0 0 100%; height: var(--bcf-banner-h); scroll-snap-align: start; }
#bcf-banner .bcf-slide[hidden] { display: none; }
#bcf-banner .bcf-slide a, #bcf-banner .bcf-slide picture { display: block; height: 100%; }
#bcf-banner .bcf-slide img { display: block; width: 100%; max-width: none; height: 100%; margin: 0; border-radius: 0; object-fit: cover; object-position: 50% 28%; }
#bcf-banner .bcf-banner-dots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; }
#bcf-banner .bcf-banner-dots[hidden], #bcf-banner .bcf-dot[hidden] { display: none; }
#bcf-banner .bcf-dot { position: relative; width: 6px; height: 6px; border-radius: 3px; background: var(--bcf-blush-300); cursor: pointer; transition: width .2s, background .2s; }
#bcf-banner .bcf-dot::before { content: ""; position: absolute; inset: -9px -3px; } /* 24px tap area, same small dot */
#bcf-banner .bcf-dot[aria-selected="true"] { width: 18px; background: var(--bcf-accent); }
#bcf-banner .bcf-dot:focus-visible { outline: 2px solid var(--bcf-ink); outline-offset: 2px; }
/* Crossfade (switched on by the script, so without it the banner is a plain swipe strip). The new slide fades in on top
   while the old one stays solid underneath, then drops: no dip to white in the middle of the fade. */
#bcf-banner.is-fade .bcf-banner-track { display: grid; overflow: hidden; touch-action: pan-y; scroll-snap-type: none; }
#bcf-banner.is-fade .bcf-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0s linear .6s, visibility 0s linear .6s; }
#bcf-banner.is-fade .bcf-slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity .6s cubic-bezier(.4, 0, .2, 1), visibility 0s; }
#bcf-banner.is-fade .bcf-slide img { -webkit-user-drag: none; user-select: none; }
@media (prefers-reduced-motion: reduce) {
	#bcf-banner.is-fade .bcf-slide, #bcf-banner.is-fade .bcf-slide.is-active { transition-duration: 0s; transition-delay: 0s; }
}
@media (max-width: 600px) {
	#bcf-banner { --bcf-banner-h: clamp(150px, 45vw, 190px); margin-bottom: 16px; }
	#bcf-banner .bcf-banner-dots { margin-top: 8px; }
}

/* ---------- Drawer shell ---------- */
.bcf-lock, .bcf-lock body { overflow: hidden; }
.bcf-lock body { position: fixed; top: var(--bcf-y, 0); left: 0; right: 0; width: 100%; }
.bcf-overlay { position: fixed; inset: 0; z-index: 2147483000; background: rgba(61, 47, 42, .32); opacity: 0; transition: opacity .25s; }
.bcf-overlay.is-open { opacity: 1; }
.bcf-overlay[hidden], #bcf-drawer[hidden] { display: none; }
#bcf-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 2147483001; width: 440px; max-width: 100%;
	display: flex; flex-direction: column; background: var(--bcf-white); color: var(--bcf-text);
	border-radius: 20px 0 0 20px; box-shadow: -16px 0 48px rgba(61, 47, 42, .12);
	transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1);
	font-size: 14px; line-height: 1.4;
}
#bcf-drawer.is-open { transform: none; }
#bcf-drawer *, #bcf-drawer *::before, #bcf-drawer *::after { box-sizing: border-box; }
#bcf-drawer .bcf-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 22px var(--bcf-gutter) 16px; }
#bcf-drawer .bcf-grab { display: none; }
#bcf-drawer .bcf-title { flex: 1; display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .18em; color: var(--bcf-ink); text-transform: uppercase; }
#bcf-drawer .bcf-logo { display: block; width: auto; height: 18px; max-width: 96px; margin: 0; }
#bcf-drawer .bcf-logo + span { padding-left: 12px; border-left: 1px solid var(--bcf-blush-300); line-height: 18px; color: var(--bcf-muted); }
#bcf-drawer .bcf-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: var(--bcf-blush-100); border: 0; border-radius: 50%; color: var(--bcf-ink); cursor: pointer; transition: background .15s; }
#bcf-drawer .bcf-close:hover { background: var(--bcf-blush-200); }
#bcf-drawer .bcf-close .bcf-icon { width: 18px; height: 18px; }
#bcf-drawer .bcf-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--bcf-gutter) 12px; -webkit-overflow-scrolling: touch; }
#bcf-drawer .bcf-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 14px var(--bcf-gutter) calc(14px + env(safe-area-inset-bottom)); background: var(--bcf-white); border-top: 1px solid var(--bcf-blush-200); }
#bcf-drawer .bcf-reset-all, #bcf-drawer .bcf-apply {
	height: 48px; border-radius: var(--bcf-r); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
	transition: background .15s, border-color .15s;
}
#bcf-drawer .bcf-reset-all { background: var(--bcf-white); border: 1px solid var(--bcf-blush-300); color: var(--bcf-ink); }
#bcf-drawer .bcf-reset-all:hover { border-color: var(--bcf-accent); background: var(--bcf-blush-50); }
#bcf-drawer .bcf-apply { border: 0; background: var(--bcf-accent); color: var(--bcf-white); font-weight: 700; }
#bcf-drawer .bcf-apply:hover { background: #c3a190; color: var(--bcf-white); }

/* ---------- Sections ---------- */
#bcf-drawer .bcf-sec { border-top: 1px solid var(--bcf-blush-200); }
#bcf-drawer .bcf-sec--flat { padding: 0 0 20px; border-top: 0; }
#bcf-drawer .bcf-sec--flat:not(:first-child) { padding-top: 20px; border-top: 1px solid var(--bcf-blush-200); }
#bcf-drawer .bcf-sec-head { display: flex; align-items: center; gap: 12px; }
#bcf-drawer .bcf-sec-toggle {
	flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
	min-height: 58px; padding: 10px 0; background: none; border: 0; color: var(--bcf-ink); font: inherit; text-align: left; cursor: pointer;
}
#bcf-drawer .bcf-sec-title { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
#bcf-drawer .bcf-sec-sum { max-width: 100%; overflow: hidden; font-size: 13px; color: #8a6555; white-space: nowrap; text-overflow: ellipsis; }
#bcf-drawer .bcf-sec-sum:empty { display: none; }
#bcf-drawer .bcf-sec-reset { padding: 6px 0; background: none; border: 0; color: var(--bcf-muted); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#bcf-drawer .bcf-sec-reset:hover { color: var(--bcf-ink); }
#bcf-drawer .bcf-chev { display: grid; place-items: center; width: 24px; height: 24px; flex: none; cursor: pointer; }
#bcf-drawer .bcf-chev::before { content: ""; width: 8px; height: 8px; border-right: 1.25px solid var(--bcf-muted); border-bottom: 1.25px solid var(--bcf-muted); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
#bcf-drawer .bcf-sec-head:has(.bcf-sec-toggle[aria-expanded="true"]) .bcf-chev::before { transform: translateY(2px) rotate(225deg); }
#bcf-drawer .bcf-sec-body { padding: 0 0 20px; }
#bcf-drawer .bcf-sec-body[hidden] { display: none; }

/* ---------- Checkbox lists (Categories, Occasion, Sleeves, Length, Neckline, Styles, Brands) ---------- */
#bcf-drawer .bcf-tiles--list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#bcf-drawer .bcf-tile {
	position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; min-height: 46px; margin: 0; padding: 8px 14px;
	border: 1px solid transparent; border-radius: 10px; background: var(--bcf-blush-100); color: var(--bcf-text);
	font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase;
	cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s;
}
#bcf-drawer .bcf-tile:hover { border-color: var(--bcf-blush-300); }
#bcf-drawer .bcf-tile input, #bcf-drawer .bcf-seg-opt input, #bcf-drawer .bcf-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* Picked = Bitna nude with white text, same as the Show results button */
#bcf-drawer .bcf-tile:has(input:checked) { background: var(--bcf-accent); border-color: var(--bcf-accent); color: var(--bcf-white); font-weight: 600; }
#bcf-drawer .bcf-tile:has(input:focus-visible), #bcf-drawer .bcf-seg-opt:has(input:focus-visible) span { outline: 2px solid var(--bcf-ink); outline-offset: 2px; }
#bcf-drawer .bcf-opt-name { min-width: 0; overflow-wrap: anywhere; }
#bcf-drawer .bcf-tile.is-empty { color: #c6b7b0; background: var(--bcf-blush-50); }
/* ✓ on picked options */
#bcf-drawer .bcf-tiles--list .bcf-tile:has(input:checked)::after { content: ""; flex: none; width: 5px; height: 9px; margin: -3px 2px 0 4px; border: solid var(--bcf-white); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); }
/* Nested (Categories > Accessories > Clutch …): the parent spans the row, its children sit indented under it */
#bcf-drawer .bcf-tiles--list > li.has-kids { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; }
#bcf-drawer .bcf-tiles--list > li.has-kids > .bcf-tile { height: auto; }
#bcf-drawer .bcf-kids-toggle { display: grid; place-items: center; width: 46px; min-height: 46px; border: 1px solid transparent; border-radius: 10px; background: var(--bcf-blush-100); cursor: pointer; transition: border-color .15s, background .15s; }
#bcf-drawer .bcf-kids-toggle:hover { border-color: var(--bcf-blush-300); }
#bcf-drawer .bcf-kids-toggle::before { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--bcf-text); border-bottom: 1.5px solid var(--bcf-text); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
#bcf-drawer .bcf-kids-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(225deg); }
#bcf-drawer .bcf-kids { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-left: 14px; border-left: 1px solid var(--bcf-blush-200); }
#bcf-drawer .bcf-kids[hidden] { display: none; }
#bcf-drawer .is-searching .bcf-kids[hidden] { display: grid; }

/* ---------- Size: even grid of letters ---------- */
#bcf-drawer .bcf-tiles--size { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#bcf-drawer .bcf-tiles--size:has(> li:nth-child(3n):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#bcf-drawer .bcf-tiles--size .bcf-tile {
	justify-content: center; height: 48px; min-height: 0; padding: 0 4px; gap: 0; border: 1px solid transparent; border-radius: 10px;
	background: var(--bcf-blush-100); color: var(--bcf-ink); font-size: 14px; font-weight: 600; text-align: center; transition: border-color .15s, background .15s;
}
#bcf-drawer .bcf-tiles--size .bcf-tile:hover { border-color: var(--bcf-blush-300); }
#bcf-drawer .bcf-tiles--size .bcf-tile:has(input:checked) { background: var(--bcf-accent); border-color: var(--bcf-accent); color: var(--bcf-white); }
/* Bitna size chart text under the letter */
#bcf-drawer .bcf-tiles--size:has(.bcf-opt-sub) .bcf-tile { flex-direction: column; gap: 3px; height: 58px; }
#bcf-drawer .bcf-opt-sub { font-size: 10px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--bcf-text); white-space: nowrap; }
#bcf-drawer .bcf-tile:has(input:checked) .bcf-opt-sub { color: var(--bcf-white); opacity: .9; }
#bcf-drawer .bcf-tiles--size .bcf-tile.is-empty { color: #c6b7b0; background: var(--bcf-blush-50); }
#bcf-drawer .bcf-tiles--size + .bcf-hint { margin: 12px 0 0; }

/* My measurements */
#bcf-drawer .bcf-custom-toggle {
	display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin-top: 12px; padding: 10px 16px;
	border: 1px solid var(--bcf-blush-300); border-radius: var(--bcf-r); background: var(--bcf-white); color: var(--bcf-ink);
	font: inherit; text-align: left; cursor: pointer; transition: background .15s, border-color .15s;
}
#bcf-drawer .bcf-custom-toggle:hover { border-color: var(--bcf-accent); background: var(--bcf-blush-50); }
#bcf-drawer .bcf-custom-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
#bcf-drawer .bcf-custom-text strong, #bcf-drawer .bcf-switch-text strong { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bcf-ink); }
#bcf-drawer .bcf-custom-text small, #bcf-drawer .bcf-switch-text small { font-size: 12px; color: var(--bcf-muted); }
#bcf-drawer .bcf-custom-toggle::after { content: "+"; font-size: 22px; font-weight: 300; line-height: 1; color: var(--bcf-muted); }
#bcf-drawer .bcf-custom-toggle[aria-expanded="true"]::after { content: "−"; }
#bcf-drawer .bcf-custom-toggle[aria-expanded="true"] { border-color: var(--bcf-accent); background: var(--bcf-blush-50); border-radius: var(--bcf-r) var(--bcf-r) 0 0; }
#bcf-drawer .bcf-custom-toggle.is-on[aria-expanded="false"] { border-color: var(--bcf-accent); background: var(--bcf-blush-50); }
#bcf-drawer .bcf-fit { padding: 18px 16px 16px; background: var(--bcf-blush-50); border: 1px solid var(--bcf-accent); border-top: 0; border-radius: 0 0 var(--bcf-r) var(--bcf-r); }
#bcf-drawer .bcf-fit[hidden] { display: none; }
#bcf-drawer .bcf-fit-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#bcf-drawer .bcf-fit .bcf-line { margin: 0; }
#bcf-drawer .bcf-fit .bcf-line-input { padding: 0 12px; }

/* ---------- Colour families: one card per family, its colours as small circles ---------- */
#bcf-drawer .bcf-tiles--fam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#bcf-drawer .bcf-fam { flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px; min-height: 64px; padding: 11px 14px; }
#bcf-drawer .bcf-fam .bcf-opt-name { font-size: 11px; }
#bcf-drawer .bcf-fam-sw { display: flex; flex-wrap: wrap; gap: 5px; }
#bcf-drawer .bcf-swatch { display: block; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--bcf-swatch, var(--bcf-blush-100)); box-shadow: inset 0 0 0 1px rgba(61, 47, 42, .14); }
#bcf-drawer .bcf-swatch.is-bw { background: linear-gradient(135deg, #4a4a4a 50%, #fff 50%); }
#bcf-drawer .bcf-swatch.is-clear { background: repeating-conic-gradient(#f3ebe7 0 25%, #fff 0 50%) 50% / 8px 8px; }
#bcf-drawer .bcf-swatch.is-blank { background: linear-gradient(135deg, var(--bcf-blush-50) 50%, var(--bcf-blush-200) 50%); }
/* Picked: nude card, white ring keeps every colour readable, ✓ top right */
#bcf-drawer .bcf-fam:has(input:checked) .bcf-swatch { box-shadow: 0 0 0 1.5px var(--bcf-white); }
#bcf-drawer .bcf-fam:has(input:checked)::after { content: ""; position: absolute; top: 13px; right: 14px; width: 5px; height: 9px; border: solid var(--bcf-white); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); }
#bcf-drawer .bcf-fam.is-empty .bcf-swatch { opacity: .4; }

/* ---------- Quick picks: three equal boxes ---------- */
#bcf-drawer .bcf-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#bcf-drawer .bcf-seg-opt { position: relative; margin: 0; cursor: pointer; }
#bcf-drawer .bcf-seg-opt span {
	display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 4px; border: 1px solid transparent; border-radius: 10px;
	background: var(--bcf-blush-100); color: var(--bcf-ink); font-size: 11px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; text-align: center; transition: background .15s, border-color .15s;
}
#bcf-drawer .bcf-seg-opt:hover span { border-color: var(--bcf-blush-300); }
#bcf-drawer .bcf-seg-opt input:checked + span { background: var(--bcf-accent); border-color: var(--bcf-accent); color: var(--bcf-white); font-weight: 600; }

/* ---------- Fields ---------- */
#bcf-drawer .bcf-line { display: block; margin: 0 0 12px; }
#bcf-drawer .bcf-line-label { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bcf-muted); }
#bcf-drawer .bcf-line-input { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--bcf-white); border: 1px solid var(--bcf-blush-300); border-radius: var(--bcf-r); transition: border-color .15s, box-shadow .15s; }
#bcf-drawer .bcf-line-input:focus-within { border-color: var(--bcf-accent); box-shadow: 0 0 0 3px var(--bcf-blush-100); }
#bcf-drawer .bcf-line-input input, #bcf-drawer .bcf-line-input select, #bcf-drawer .bcf-search input {
	flex: 1; min-width: 0; width: 100%; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
	color: var(--bcf-ink); font: inherit; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none;
}
#bcf-drawer .bcf-line-input select { cursor: pointer; }
#bcf-drawer .bcf-line-input .bcf-icon { flex: none; color: var(--bcf-accent); pointer-events: none; }
#bcf-drawer .bcf-event::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
#bcf-drawer .bcf-unit { flex: none; font-size: 13px; color: var(--bcf-muted); }
#bcf-drawer .bcf-unit--pre { font-size: 15px; }
#bcf-drawer input.is-invalid { color: var(--bcf-danger); }
#bcf-drawer .bcf-line-input:has(input.is-invalid) { border-color: var(--bcf-danger); }
#bcf-drawer .bcf-hint { display: block; margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--bcf-muted); }

/* Rental date card */
#bcf-drawer .bcf-date { padding: 16px; background: var(--bcf-blush-50); border: 1px solid var(--bcf-blush-200); border-radius: 12px; }
#bcf-drawer .bcf-date-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 16px; background: var(--bcf-white); border: 1px solid var(--bcf-blush-300); border-radius: 10px; text-align: left; cursor: pointer; transition: border-color .15s; }
#bcf-drawer .bcf-date-toggle:hover, #bcf-drawer .bcf-date-toggle[aria-expanded="true"] { border-color: var(--bcf-accent); }
#bcf-drawer .bcf-date-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#bcf-drawer .bcf-date-text .bcf-line-label { margin: 0; }
#bcf-drawer .bcf-date-value { font-size: 15px; color: var(--bcf-muted); }
#bcf-drawer .bcf-date.has-date .bcf-date-value { color: var(--bcf-ink); font-weight: 600; }
#bcf-drawer .bcf-date-toggle .bcf-icon { flex: none; color: var(--bcf-accent); }
#bcf-drawer .bcf-date-summary { margin: 8px 2px 0; font-size: 12px; letter-spacing: .04em; color: var(--bcf-muted); white-space: pre; }
#bcf-drawer .bcf-date-summary:empty, #bcf-drawer .bcf-date-toggle[aria-expanded="true"] + .bcf-date-summary { display: none; }
#bcf-drawer .bcf-cal-wrap[hidden] { display: none; }
#bcf-drawer .bcf-cal { margin: 10px 0 0; padding: 12px 10px 10px; background: var(--bcf-white); border: 1px solid var(--bcf-blush-200); border-radius: 10px; }
#bcf-drawer .bcf-cal-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
#bcf-drawer .bcf-cal-title { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bcf-ink); }
#bcf-drawer .bcf-cal-nav { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
#bcf-drawer .bcf-cal-nav:hover { background: var(--bcf-blush-100); }
#bcf-drawer .bcf-cal-nav::before { content: ""; width: 7px; height: 7px; border-left: 1.5px solid var(--bcf-ink); border-bottom: 1.5px solid var(--bcf-ink); transform: translateX(1px) rotate(45deg); }
#bcf-drawer .bcf-cal-nav.is-next::before { transform: translateX(-1px) rotate(225deg); }
#bcf-drawer .bcf-cal-nav:disabled { opacity: .25; cursor: default; background: none; }
#bcf-drawer .bcf-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; }
#bcf-drawer .bcf-cal-dow { padding: 4px 0 6px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--bcf-muted); }
#bcf-drawer .bcf-day { height: 38px; font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; color: var(--bcf-ink); border-radius: 10px; cursor: pointer; transition: background .12s; }
#bcf-drawer .bcf-day:hover { background: var(--bcf-blush-100); }
#bcf-drawer .bcf-day.is-today { box-shadow: inset 0 0 0 1px var(--bcf-accent); }
#bcf-drawer .bcf-day.is-past { color: #cbbdb6; cursor: default; background: none; }
/* Rental period = one even band: same height, square joins, rounded only at its two ends */
#bcf-drawer .bcf-day.in-band { border-radius: 0; box-shadow: none; }
#bcf-drawer .bcf-day.band-start { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
#bcf-drawer .bcf-day.band-end { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
#bcf-drawer .bcf-day.is-from { background: var(--bcf-accent); color: var(--bcf-white); font-weight: 600; }
#bcf-drawer .bcf-day.is-mid { background: var(--bcf-blush-100); }
#bcf-drawer .bcf-day.is-event { background: var(--bcf-ink); color: var(--bcf-white); font-weight: 600; }
#bcf-drawer .bcf-day.is-to { background: var(--bcf-blush-300); font-weight: 600; }
/* Legend = the three dates */
#bcf-drawer .bcf-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
#bcf-drawer .bcf-legend li { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--bcf-text); }
#bcf-drawer .bcf-legend b { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--bcf-ink); }
#bcf-drawer .bcf-legend-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
#bcf-drawer .bcf-legend .is-from .bcf-legend-dot { background: var(--bcf-accent); }
#bcf-drawer .bcf-legend .is-event .bcf-legend-dot { background: var(--bcf-ink); }
#bcf-drawer .bcf-legend .is-to .bcf-legend-dot { background: var(--bcf-blush-300); }
#bcf-drawer .bcf-date:not(.has-date) .bcf-legend b { color: var(--bcf-muted); font-weight: 400; }
#bcf-drawer .bcf-date .bcf-line { margin: 14px 0 0; }
#bcf-drawer .bcf-date .bcf-switch { border-top: 1px solid var(--bcf-blush-200); margin-top: 14px; }

/* Have a question? */
#bcf-drawer .bcf-help { margin: 12px 0 0; }
#bcf-drawer .bcf-help-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid var(--bcf-blush-300); border-radius: 999px; background: var(--bcf-white); color: var(--bcf-ink); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, background .15s; }
#bcf-drawer .bcf-help-toggle:hover, #bcf-drawer .bcf-help-toggle[aria-expanded="true"] { border-color: var(--bcf-accent); background: var(--bcf-blush-50); }
#bcf-drawer .bcf-help-toggle .bcf-icon { width: 16px; height: 16px; color: var(--bcf-accent); }
#bcf-drawer .bcf-help-list { margin: 8px 0 0; padding: 6px; background: var(--bcf-white); border: 1px solid var(--bcf-blush-200); border-radius: 12px; box-shadow: 0 8px 24px rgba(61, 47, 42, .08); }
#bcf-drawer .bcf-help-list[hidden] { display: none; }
#bcf-drawer .bcf-help-title { margin: 6px 10px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bcf-muted); }
#bcf-drawer .bcf-help-opt { display: block; padding: 11px 10px; border-radius: 8px; color: var(--bcf-ink); font-size: 14px; text-decoration: none; transition: background .12s; }
#bcf-drawer .bcf-help-opt:hover { background: var(--bcf-blush-100); color: var(--bcf-ink); }

/* Search inside long lists */
#bcf-drawer .bcf-search { display: flex; align-items: center; gap: 10px; height: 42px; margin: 0 0 8px; padding: 0 14px; background: var(--bcf-blush-50); border: 1px solid var(--bcf-blush-200); border-radius: var(--bcf-r); color: var(--bcf-muted); }
#bcf-drawer .bcf-search:focus-within { border-color: var(--bcf-accent); }
#bcf-drawer .bcf-search .bcf-icon { width: 18px; height: 18px; flex: none; }
#bcf-drawer .bcf-search input { height: 40px; font-size: 15px; }
#bcf-drawer .bcf-search input::placeholder { color: var(--bcf-muted); }
#bcf-drawer .bcf-tiles li[hidden] { display: none; }

/* ---------- Price ---------- */
#bcf-drawer .bcf-range { --a: 0; --b: 1; position: relative; height: 30px; margin: 4px 0 16px; border-radius: 15px; background: var(--bcf-blush-100); }
#bcf-drawer .bcf-range-fill { position: absolute; top: 4px; height: 22px; border-radius: 11px; left: calc(4px + var(--a) * (100% - 30px)); width: calc((var(--b) - var(--a)) * (100% - 30px) + 22px); background: var(--bcf-accent); opacity: .55; }
#bcf-drawer .bcf-range input {
	position: absolute; left: 4px; top: 0; width: calc(100% - 8px); height: 30px; margin: 0; padding: 0;
	background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: 0; pointer-events: none; -webkit-appearance: none; appearance: none;
}
#bcf-drawer .bcf-range input::-webkit-slider-runnable-track { height: 30px; background: transparent; border: 0; box-shadow: none; }
#bcf-drawer .bcf-range input::-moz-range-track { height: 30px; background: transparent; border: 0; box-shadow: none; }
#bcf-drawer .bcf-range input::-moz-range-progress { background: transparent; }
#bcf-drawer .bcf-range input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 22px; height: 22px; margin-top: 4px; border-radius: 50%; background: var(--bcf-white); border: 2px solid var(--bcf-accent); box-shadow: 0 1px 4px rgba(61, 47, 42, .18); cursor: grab; }
#bcf-drawer .bcf-range input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--bcf-white); border: 2px solid var(--bcf-accent); box-shadow: 0 1px 4px rgba(61, 47, 42, .18); cursor: grab; }
#bcf-drawer .bcf-range input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--bcf-ink); outline-offset: 2px; }
#bcf-drawer .bcf-price-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#bcf-drawer .bcf-price-fields .bcf-line { margin: 0; }

/* ---------- Switch rows ---------- */
#bcf-drawer .bcf-switch { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 0 0; margin: 12px 0 0; cursor: pointer; }
#bcf-drawer .bcf-switch-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
#bcf-drawer .bcf-switch-track { position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--bcf-blush-300); transition: background .2s; flex: none; }
#bcf-drawer .bcf-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bcf-white); transition: transform .2s; box-shadow: 0 1px 3px rgba(61, 47, 42, .2); }
#bcf-drawer .bcf-switch input:checked ~ .bcf-switch-track { background: var(--bcf-accent); }
#bcf-drawer .bcf-switch input:checked ~ .bcf-switch-track::after { transform: translateX(16px); }
#bcf-drawer .bcf-switch input:focus-visible ~ .bcf-switch-track { outline: 2px solid var(--bcf-ink); outline-offset: 2px; }

#bcf-drawer :focus-visible { outline: 2px solid var(--bcf-ink); outline-offset: 2px; }
#bcf-drawer :focus:not(:focus-visible) { outline: none; }
#bcf-drawer .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Phone: bottom sheet ---------- */
@media (max-width: 600px) {
	:root { --bcf-gutter: 18px; }
	#bcf-drawer {
		top: auto; left: 0; width: 100%; height: 92vh; height: 92dvh; border-radius: 20px 20px 0 0;
		transform: translateY(100%); box-shadow: 0 -12px 40px rgba(61, 47, 42, .15);
	}
	#bcf-drawer .bcf-head { padding-top: 26px; }
	#bcf-drawer .bcf-grab { display: block; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--bcf-blush-300); }
}
@media (prefers-reduced-motion: reduce) {
	#bcf-drawer, .bcf-overlay, #bcf-drawer .bcf-chev::before { transition: none; }
}