/* ============================================================================
   trc-sheet.css — unified mobile layer system (transporter-core)

   One stylesheet owns the stacking order of every fixed / overlay surface on
   the site, plus the reusable Bottom Sheet component that all mobile modals
   (catalog menu, mini-cart, filters, sorting, call-request forms) share.

   ── Z-INDEX SCALE (single source of truth) ─────────────────────────────────
   Every layered surface resolves its z-index from these tokens. Gaps are left
   between tiers so a component can sit "just above" its tier (+1) without
   leaking into the next one.

     tier                     token                    value
     ─────────────────────── ──────────────────────── ───────
     in-flow raised (badges)  --trc-z-raised           10
     in-page sticky bars      --trc-z-sticky           50
     in-page dropdowns        --trc-z-dropdown         60
     mobile tab bar           --trc-z-tabbar           9990
     site header (sticky)     --trc-z-header           9997
     header menus / panels    --trc-z-header-menu      10001
     page CTA bars            --trc-z-cta              99998   (.kw-bottom-bar)
     sheet scrim              --trc-z-scrim            100040
     bottom sheets            --trc-z-sheet            100050
     search scrim             --trc-z-search-scrim     100060
     full-screen search       --trc-z-search           100070
     toasts                   --trc-z-toast            100090

   Rules that keep bottom elements from ever clashing:
     1. The tab bar is the LOWEST fixed layer. Anything modal covers it.
     2. A sheet always sits on the shared scrim, which dims the tab bar, and the
        sheet itself is anchored to bottom:0 — so it covers the bar entirely.
     3. Only ONE sheet is open at a time (the controller swaps them).
     4. A page CTA bar (transport single) and the tab bar never show together:
        the tab bar yields the slot (html.trc-cta-on) — see trc-tabbar.css.
     5. The tab bar hides while the on-screen keyboard is up (html.trc-kb).
   ========================================================================== */

:root {
	--trc-z-raised: 10;
	--trc-z-sticky: 50;
	--trc-z-dropdown: 60;
	--trc-z-tabbar: 9990;
	--trc-z-header: 9997;
	--trc-z-header-menu: 10001;
	--trc-z-cta: 99998;
	--trc-z-scrim: 100040;
	--trc-z-sheet: 100050;
	--trc-z-search-scrim: 100060;
	--trc-z-search: 100070;
	--trc-z-toast: 100090;

	/* Motion — the iOS sheet curve: fast departure, long soft landing. */
	--trc-ease-sheet: cubic-bezier(.32, .72, 0, 1);
	--trc-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--trc-dur-sheet: .5s;

	/* Geometry */
	--trc-sheet-radius: 22px;
	--trc-safe-b: env(safe-area-inset-bottom, 0px);
	--trc-tabbar-h: 62px;
	--trc-tabbar-space: calc(var(--trc-tabbar-h) + var(--trc-safe-b));
}

/* ── Scroll lock while any sheet is open ──────────────────────────────────── */
html.trc-sheet-lock,
html.trc-sheet-lock body {
	overflow: hidden !important;
	overscroll-behavior: none;
}

/* ── Shared scrim (one element, reused by every sheet) ────────────────────── */
.trc-sheet-scrim {
	position: fixed;
	inset: 0;
	z-index: var(--trc-z-scrim);
	background: rgba(12, 12, 14, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility 0s linear .4s;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;
}
.trc-sheet-scrim.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease, visibility 0s;
}

/* ── Sheet component ──────────────────────────────────────────────────────────
   Sheets built by TRCSheet.create() carry .trc-sheet and only ever exist on
   phones. Existing panels adopted with TRCSheet.register() (mini-cart, filter
   sidebar) keep their own classes, get .trc-sheet-host, and style their sheet
   geometry in their own stylesheet using the tokens above. */
.trc-sheet,
.trc-sheet__handle { display: none; }

@media (max-width: 768px) {
	.trc-sheet {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--trc-z-sheet);
		max-height: 90vh;
		max-height: calc(100dvh - 40px);
		background: #fff;
		color: #1a1a1a;
		border-radius: var(--trc-sheet-radius) var(--trc-sheet-radius) 0 0;
		box-shadow: 0 -10px 40px rgba(0, 0, 0, .16);
		padding-bottom: var(--trc-safe-b);
		transform: translate3d(0, 100%, 0);
		visibility: hidden;
		transition: transform var(--trc-dur-sheet) var(--trc-ease-sheet), visibility 0s linear var(--trc-dur-sheet);
		font-family: var(--tr-font-ka, "FiraGO", "Noto Sans Georgian", sans-serif);
		-webkit-font-smoothing: antialiased;
		outline: none;
		overscroll-behavior: contain;
		box-sizing: border-box;
	}
	.trc-sheet *,
	.trc-sheet *::before,
	.trc-sheet *::after { box-sizing: border-box; }
	.trc-sheet.is-open {
		transform: translate3d(0, 0, 0);
		visibility: visible;
		transition: transform var(--trc-dur-sheet) var(--trc-ease-sheet), visibility 0s;
	}
	/* Closed sheets must not cast their upward shadow over the viewport edge. */
	.trc-sheet:not(.is-open) { box-shadow: none; }

	/* Adopted panels: force them onto the sheet tier regardless of their own z. */
	.trc-sheet-host { z-index: var(--trc-z-sheet) !important; }
	/* The panel receives programmatic focus on open (for the focus trap) — no ring. */
	.trc-sheet:focus,
	.trc-sheet-host:focus { outline: none; }

	/* ── Drag handle (Mobbin-style pill) ── */
	.trc-sheet__handle {
		display: block;
		flex: 0 0 auto;
		position: relative;
		height: 22px;
		margin: 0;
		cursor: grab;
		touch-action: none;
		-webkit-tap-highlight-color: transparent;
	}
	.trc-sheet__handle::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 38px;
		height: 5px;
		margin-left: -19px;
		border-radius: 3px;
		background: #d9d9de;
		transition: background .2s ease, width .2s ease, margin-left .2s ease;
	}
	.is-dragging .trc-sheet__handle::before {
		width: 46px;
		margin-left: -23px;
		background: #b4b4bb;
	}
	.is-dragging .trc-sheet__handle { cursor: grabbing; }
	/* In an adopted panel that scrolls as a whole, keep handle + head pinned. */
	.trc-sheet-host > .trc-sheet__handle {
		position: sticky;
		top: 0;
		z-index: 3;
		background: inherit;
	}
	.trc-sheet-host > .trc-sheet__head {
		position: sticky;
		top: 22px;
		z-index: 3;
		background: inherit;
	}

	/* ── Head ── */
	.trc-sheet__head {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 2px 16px 12px 20px;
		touch-action: none;
	}
	.trc-sheet__title {
		margin: 0;
		font-family: var(--tr-font-display, Bebas, "Gilroy Geo", sans-serif);
		font-size: 24px;
		font-weight: 400;
		line-height: 1.1;
		letter-spacing: .3px;
		color: #111;
	}
	.trc-sheet__close {
		flex: 0 0 auto;
		width: 34px;
		height: 34px;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 50%;
		background: #f2f2f4;
		color: #1a1a1a;
		cursor: pointer;
		-webkit-appearance: none;
		-webkit-tap-highlight-color: transparent;
		transition: background .18s ease, transform .18s ease;
	}
	.trc-sheet__close:active { transform: scale(.9); background: #e7e7ea; }
	.trc-sheet__close svg { display: block; }

	/* ── Body / foot ── */
	.trc-sheet__body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		scrollbar-width: none;
		padding: 0 20px 20px;
	}
	.trc-sheet__body::-webkit-scrollbar { display: none; }
	.trc-sheet__foot {
		flex: 0 0 auto;
		padding: 12px 20px;
		border-top: 1px solid #f0f0f0;
		background: #fff;
	}

	/* ── Option list (single-choice sheets, e.g. sorting) ── */
	.trc-sheet-options { list-style: none; margin: 0; padding: 0 0 4px; }
	.trc-sheet-options > li { margin: 0; padding: 0; list-style: none; }
	.trc-sheet-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		width: 100%;
		min-height: 54px;
		padding: 0 2px;
		margin: 0;
		border: 0;
		border-bottom: 1px solid #f1f1f3;
		border-radius: 0;
		background: none;
		color: #1a1a1a;
		font-family: var(--tr-font-ka, "FiraGO", sans-serif);
		font-size: 15px;
		font-weight: 400;
		line-height: 1.3;
		text-align: left;
		text-transform: none;
		letter-spacing: 0;
		cursor: pointer;
		-webkit-appearance: none;
		-webkit-tap-highlight-color: transparent;
		transition: color .2s ease, background .2s ease;
	}
	.trc-sheet-options > li:last-child .trc-sheet-option { border-bottom: 0; }
	.trc-sheet-option:active { background: #fafafa; }
	.trc-sheet-option.is-active { color: #C62D3C; font-weight: 500; }
	.trc-sheet-option__check {
		flex: 0 0 auto;
		width: 22px;
		height: 22px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1.5px solid #d4d4d8;
		border-radius: 50%;
		color: transparent;
		transition: background .2s ease, border-color .2s ease, color .2s ease;
	}
	.trc-sheet-option.is-active .trc-sheet-option__check {
		background: #C62D3C;
		border-color: #C62D3C;
		color: #fff;
		animation: trc-sheet-check .34s var(--trc-ease-spring);
	}
	@keyframes trc-sheet-check { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

	/* ══ Call-request + contact modals (transport single) → bottom sheets ══
	   Both are centred dialogs on desktop. On phones they rise from the bottom
	   edge with the shared radius, handle and curve. Their dark palette is kept
	   (it is the transport page's brand treatment); only geometry and motion are
	   unified. Drag-to-dismiss is wired by trc-sheet.js. */
	body .kw-popup-overlay {
		align-items: flex-end;
		padding: 0;
		z-index: var(--trc-z-sheet);
	}
	body .kw-popup {
		width: 100%;
		max-width: none;
		max-height: 92vh;
		max-height: calc(100dvh - 32px);
		border: 0;
		border-radius: var(--trc-sheet-radius) var(--trc-sheet-radius) 0 0;
		opacity: 1;
		transform: translate3d(0, 100%, 0);
		transition: transform var(--trc-dur-sheet) var(--trc-ease-sheet);
		padding-bottom: var(--trc-safe-b);
		overscroll-behavior: contain;
	}
	body .kw-popup-overlay.open .kw-popup { transform: translate3d(0, 0, 0); }
	body .kw-popup-left { padding-top: 26px; }

	body .trc-modal-overlay {
		align-items: flex-end;
		z-index: var(--trc-z-sheet);
	}
	body .trc-modal {
		width: 100%;
		max-width: none;
		max-height: 92vh;
		max-height: calc(100dvh - 32px);
		border-width: 1px 0 0;
		border-radius: var(--trc-sheet-radius) var(--trc-sheet-radius) 0 0;
		padding: 34px 20px calc(24px + var(--trc-safe-b));
		transform: translate3d(0, 100%, 0);
		transition: transform var(--trc-dur-sheet) var(--trc-ease-sheet);
		overscroll-behavior: contain;
	}
	body .trc-modal-overlay.open .trc-modal { transform: translate3d(0, 0, 0); }

	/* Dark-surface drag handle for those two sheets. */
	body .kw-popup > .trc-sheet__handle,
	body .trc-modal > .trc-sheet__handle {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 4;
	}
	body .kw-popup > .trc-sheet__handle::before,
	body .trc-modal > .trc-sheet__handle::before { background: rgba(255, 255, 255, .22); }
}

/* Contact modal (transport single) is rendered OUTSIDE .kw-product, so the
   page's `.kw-product .btn-red` never reached its Send button — it fell back to
   the base `button` reset (grey text, no fill). Restore the brand button. */
#trcFormModal .trc-form-submit.btn-red {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 14px 16px;
	border: 0;
	border-radius: 8px;
	background: #D42B2B;
	color: #fff;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .3px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background .2s ease, transform .15s ease;
}
#trcFormModal .trc-form-submit.btn-red:hover { background: #E53A3A; color: #fff; }
#trcFormModal .trc-form-submit.btn-red:active { transform: scale(.98); }
#trcFormModal .trc-form-submit.btn-red:disabled { opacity: .6; cursor: default; }

@media (prefers-reduced-motion: reduce) {
	.trc-sheet,
	.trc-sheet.is-open,
	.trc-sheet-scrim,
	.trc-sheet-scrim.is-open,
	body .kw-popup,
	body .trc-modal { transition-duration: .01s !important; }
	.trc-sheet-option.is-active .trc-sheet-option__check { animation: none; }
}