/* Aštunkė Nuoma — catalog styles.
   Loaded only on /dviraciu-nuoma/ and depends on the theme stylesheet, so it
   only adds what the theme has no class for. Everything uses the theme's
   design tokens (var(--c-*), var(--sp-*)) — no hardcoded colours. */

/* ---------- Development-mode banner ---------- */
.astunke-rentals__devbar {
	margin: var(--sp-4) 0 0;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-bg-2);
	border-left: 3px solid var(--c-red);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}
.astunke-rentals__devbar strong { color: var(--c-ink); }
.astunke-rentals__devbar a { color: var(--c-red); text-decoration: underline; margin-left: var(--sp-2); }

.astunke-rentals__lead {
	margin: var(--sp-3) 0 0;
	max-width: 62ch;
	color: var(--c-ink-soft);
	font-size: var(--fs-md);
	line-height: 1.5;
}

.astunke-rentals__daterange {
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--c-stock-in);
}

/* ---------- Height filter — the primary facet, visually promoted ---------- */
/* The promoted height card must read as a full-width panel while its title,
   input and button sit on exactly the same left edge as every plain filter
   below it. The catch is that the shared inset is created in two different
   places: in the mobile drawer the theme pads each .astunke-filter by --sp-5,
   while in the desktop sidebar the filters have no horizontal padding at all
   and the sidebar's own --sp-4 padding is the inset. So the card is handled
   once per context. In both, the 3px accent border is subtracted from the left
   padding, otherwise the content lands 3px past the shared line. */
.astunke-rentals-filter--height {
	background: var(--c-bg-2);
	border-left: 3px solid var(--c-red);
	margin-bottom: var(--sp-5);
	/* Mobile drawer: the block already spans the drawer, so matching the theme's
	   own --sp-5 padding is all the alignment it needs. */
	padding: var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-5) - 3px) !important;
}

@media (min-width: 1025px) {
	/* Desktop sidebar: bleed back out over the sidebar's --sp-4 padding, then
	   put the same amount back as the card's own padding. */
	.astunke-rentals-filter--height {
		margin-inline: calc(var(--sp-4) * -1);
		padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) - 3px) !important;
	}
}
.astunke-rentals-filter--height .astunke-filter__title { margin-bottom: var(--sp-2); }
.astunke-rentals-filter__hint {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-xs);
	color: var(--c-ink-soft);
	line-height: 1.5;
}
/* The number box and its unit form one control; the button gets its own row so
   nothing has to be squeezed into a 240px sidebar. */
.astunke-rentals-filter__height-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: var(--sp-3);
}
.astunke-rentals-filter__height-row input[type="number"] {
	flex: 1;
	min-width: 0;
	padding: .6rem .5rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius);
	font-family: var(--f-mono);
	font-size: var(--fs-lg);
	text-align: center;
	background: #fff;
}
.astunke-rentals-filter__unit {
	flex: 0 0 auto;
	font-family: var(--f-mono);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}
.astunke-rentals-filter--height .astunke-filter__apply {
	width: 100%;
	margin: 0;
}
.astunke-rentals-filter__slider {
	display: block;
	width: 100%;
	margin: 0 0 var(--sp-4);
	accent-color: var(--c-red);
}

/* ---------- Date filter ---------- */
/* The sidebar is a fixed ~207px column no matter how wide the window is, so a
   viewport media query cannot answer "do two date fields fit here?" — at 1440px
   they did not, and the second one hung 72px outside the column. auto-fit asks
   the CONTAINER instead: two tracks in the roomy mobile filter drawer, one in
   the narrow desktop sidebar. min-width:0 is what actually lets them shrink —
   a grid item defaults to min-width:auto and a native date input has a wide
   intrinsic minimum (dd.mm.yyyy plus the picker icon), which is what pushed the
   field out of the column in the first place. */
.astunke-rentals-filter__dates {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--sp-2);
	margin-bottom: var(--sp-3);
}
.astunke-rentals-filter__dates label { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.astunke-rentals-filter__dates span {
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--c-ink-mute);
}
.astunke-rentals-filter__dates input[type="date"] {
	width: 100%;
	min-width: 0;
	padding: .45rem .5rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
}

/* ---------- Product grid ----------
   The theme draws its grid separators by putting a hairline colour BEHIND the
   grid and letting a 1px gap show through. That works in the shop, where a row
   is always full. A rental catalog is normally 1–3 bikes after filtering, so
   every empty cell rendered as one big grey slab next to the card. Here each
   card carries its own border and the grid background is transparent. */
.astunke-rentals .astunke-product-grid {
	background: transparent;
	border: 0;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	/* stretch (the default) is deliberate: every card in a row gets the same
	   height, which is what lets the specs block and the button line up. */
}
.astunke-rentals .astunke-product-grid > * { height: 100%; }
.astunke-rentals .astunke-card {
	border: 1px solid var(--c-line);
	transition: border-color var(--dur) var(--easing), background var(--dur) var(--easing);
}
.astunke-rentals .astunke-card:hover { border-color: var(--c-line-strong); }

/* ---------- Card additions ---------- */
.astunke-badge--rent {
	background: var(--c-red);
	color: #fff;
}
.astunke-rentals-card__desc {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.45;
	color: var(--c-ink-soft);
	/* Keep every card the same height regardless of description length. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}
.astunke-rentals-card__specs {
	list-style: none;
	margin: var(--sp-2) 0 0;
	padding: 0;
	font-size: var(--fs-sm);
	line-height: 1.6;
}
.astunke-rentals-card__specs li { margin: 0; display: flex; justify-content: space-between; gap: var(--sp-2); }
.astunke-rentals-card__specs span { color: var(--c-ink-soft); }
.astunke-rentals-card__specs strong { color: var(--c-ink); font-weight: 600; }

.astunke-rentals-card__price { display: flex; align-items: baseline; gap: .3rem; margin-top: var(--sp-2); }
.astunke-rentals-card__price strong { font-size: var(--fs-lg); }
.astunke-rentals-card__per { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.astunke-rentals-card__from {
	font-size: var(--fs-xs);
	color: var(--c-stock-in);
	margin-top: -.15rem;
}

/* The theme blends product images to hide white backgrounds; rental photos are
   shot on real backgrounds, where multiply would grey them out. */
.astunke-rentals-card .astunke-card__img { mix-blend-mode: normal; }

/* Shop photos are studio cut-outs; the rental bikes are shot on a phone, in
   portrait (all six are 3:4), against a wall. `contain` inside the square frame
   fitted the whole photo but left a pale band down each side, and the bands were
   different widths from card to card — a row of bikes that never lined up.
   `cover` fills the square instead. A 3:4 photo loses 12.5% off the top and the
   same off the bottom, and in these photos that is wall and pavement: the bike
   sits in the middle band and survives the crop whole. (The earlier warning here
   was about the theme's 3:2 frame, which is far wider and did cut wheels off.) */
.astunke-rentals-card .astunke-card__media { aspect-ratio: 1 / 1; background: var(--c-bg-2); }
.astunke-rentals-card .astunke-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.astunke-rentals__empty { text-align: center; padding: var(--sp-7) var(--sp-4); }
.astunke-rentals__empty h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.astunke-rentals__empty p { color: var(--c-ink-soft); margin-bottom: var(--sp-4); max-width: 48ch; margin-inline: auto; }

/* Card body breathing room — the spec rows and the price need separating from
   the title, otherwise the card reads as one dense block. */
.astunke-rentals-card .astunke-card__body {
	gap: .55rem;
	padding-bottom: var(--sp-3);
	flex: 1;
	display: flex;
	flex-direction: column;
}
/* Bigger than a shop card's title, and deliberately so.
   Both used var(--fs-sm); measured side by side they were identical, 13px. But a
   shop card is a title over a price, while a rental card carries a description,
   a four-row spec table and two prices under it — at the same size the name of
   the bike stops being the first thing read. One step up, and heavier, puts it
   back at the top of the order. Two lines are still reserved so the descriptions
   below start on the same line across a row. */
.astunke-rentals-card .astunke-card__title {
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.35;
	min-height: 2.7em;
}
.astunke-rentals-card__specs {
	/* The auto margin is the alignment: whatever height the title and
	   description take, the specs table and everything under it sit flush at
	   the bottom of every card. */
	margin-top: auto;
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	padding: var(--sp-2) 0;
}
.astunke-rentals-card__specs li { min-height: 1.5em; }
.astunke-rentals-card .astunke-card__cta { margin-top: var(--sp-3); }

/* Placeholder for the bikes that have no photo yet — an empty framed box read
   as a broken card. */
.astunke-rentals-card .astunke-card__noimg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	width: 100%;
	height: 100%;
	color: var(--c-ink-mute);
	background: var(--c-bg-2);
}
.astunke-rentals-card .astunke-card__noimg span {
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* ================= Rental product page ================= */

/* WooCommerce stock ("10+ vnt.") is meaningless for a rental — availability is
   the calendar, not a stock count. The theme calls it directly in its template,
   so it can only be hidden from here. */
.astunke-rentals-pdp .astunke-pdp__summary .astunke-stock { display: none; }

.astunke-rentals-pdp__daily { font-size: var(--fs-2xl); font-weight: 700; }
.astunke-rentals-pdp__per { color: var(--c-ink-soft); font-size: var(--fs-md); }

.astunke-rentals-book { margin: var(--sp-4) 0 0; }
.astunke-rentals-book__fit {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}
.astunke-rentals-book__size {
	display: inline-block;
	margin-left: var(--sp-2);
	padding: .1em .5em;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-pill);
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
}
.astunke-rentals-book__dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.astunke-rentals-book__dates label { display: flex; flex-direction: column; gap: .3rem; }
.astunke-rentals-book__dates span {
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--c-ink-mute);
}
.astunke-rentals-book__dates input {
	padding: .6rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius);
	font-size: var(--fs-base);
	min-width: 0;
}

/* ---------- Availability calendar ---------- */
.astunke-rentals-book__calendar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--sp-4);
	margin: var(--sp-4) 0;
}
.astunke-rentals-cal__month h4 {
	margin: 0 0 var(--sp-2);
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--c-ink-soft);
}
.astunke-rentals-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.astunke-rentals-cal__grid button,
.astunke-rentals-cal__grid span {
	aspect-ratio: 1;
	display: flex; align-items: center; justify-content: center;
	font-size: var(--fs-sm);
	border: 1px solid transparent;
	background: none;
	border-radius: var(--radius);
	cursor: default;
}
.astunke-rentals-cal__grid .is-free { background: var(--c-bg-2); cursor: pointer; }
.astunke-rentals-cal__grid .is-free:hover { background: var(--c-ink); color: #fff; }
.astunke-rentals-cal__grid .is-busy { background: repeating-linear-gradient(45deg, var(--c-bg-3), var(--c-bg-3) 3px, transparent 3px, transparent 6px); color: var(--c-ink-mute); text-decoration: line-through; }
.astunke-rentals-cal__grid .is-buffer { background: var(--c-bg-3); color: var(--c-ink-mute); }
.astunke-rentals-cal__grid .is-past { color: var(--c-line-strong); }
.astunke-rentals-cal__grid .is-selected { background: var(--c-red) !important; color: #fff; }
.astunke-rentals-cal__grid .is-in-range { background: var(--c-red-dim); color: #fff; }

.astunke-rentals-book__quote {
	margin: var(--sp-3) 0;
	padding: var(--sp-3);
	background: var(--c-bg-2);
	border-left: 3px solid var(--c-stock-in);
}
.astunke-rentals-book__quote.is-error { border-left-color: var(--c-red); color: var(--c-red); }
.astunke-rentals-book__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.astunke-rentals-book__total strong { font-size: var(--fs-xl); }
.astunke-rentals-book__saving { margin-top: .25rem; font-size: var(--fs-sm); color: var(--c-stock-in); }
.astunke-rentals-book__cta { margin-top: var(--sp-2); }
.astunke-rentals-book__cta:disabled { opacity: .45; cursor: not-allowed; }
.astunke-rentals-book__note { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: 1.5; }

.astunke-rentals-book__facts { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); }
.astunke-rentals-book__facts > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: .35rem 0; border-bottom: 1px solid var(--c-line); }
.astunke-rentals-book__facts dt { color: var(--c-ink-soft); margin: 0; }
.astunke-rentals-book__facts dd { margin: 0; text-align: right; }

/* ---------- Duration price table ---------- */
.astunke-rentals-prices { margin-top: var(--sp-5); }
.astunke-rentals-prices__title {
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .5px;
	margin: 0 0 var(--sp-2);
}
.astunke-rentals-prices__table { width: 100%; border-collapse: collapse; }
.astunke-rentals-prices__table th,
.astunke-rentals-prices__table td { padding: .45rem 0; border-bottom: 1px solid var(--c-line); text-align: left; font-weight: 400; }
.astunke-rentals-prices__table th { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.astunke-rentals-prices__table td span { color: var(--c-ink-soft); font-size: var(--fs-xs); }
.astunke-rentals-prices__save { text-align: right; color: var(--c-stock-in); font-size: var(--fs-sm); }
.astunke-rentals-prices__note { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--c-ink-soft); }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
	.astunke-rentals__lead { font-size: var(--fs-base); }
	/* The height card's drawer padding is set with the rest of its box above —
	   an override here used to force 16/12px, which is exactly what knocked it
	   out of line with the --sp-5 inset the theme gives every other filter. */
}

@media (max-width: 560px) {
	.astunke-rentals .astunke-product-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
	.astunke-rentals-filter__height-row { flex-wrap: wrap; }
	.astunke-rentals-filter__height-row input[type="number"] { flex: 1 1 auto; width: auto; }
	.astunke-rentals-filter__height-row .astunke-filter__apply { flex: 1 0 100%; margin-top: var(--sp-2); }
	/* Long labels + values must wrap instead of colliding on a narrow card. */
	.astunke-rentals-card__specs li { flex-wrap: wrap; }
	.astunke-rentals__devbar { font-size: var(--fs-xs); }
}

@media (prefers-reduced-motion: reduce) {
	.astunke-rentals-card .astunke-card__img,
	.astunke-rentals .astunke-card { transition: none; }
}

/* ---------- /mano-nuoma/<token>/ ----------
   The renter's own page. Read on a phone, usually outdoors, usually to answer
   one question: when do I have to bring this back. So the status line is the
   loudest thing on the card and the address is one tap from a map. */
.astunke-rentals-mine { padding-bottom: var(--sp-6); }

.astunke-rentals-mine__card {
	margin: var(--sp-5) 0 0;
	padding: var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: #fff;
}
.astunke-rentals-mine__top { display: flex; gap: var(--sp-4); align-items: center; }
.astunke-rentals-mine__img {
	width: 120px; height: 120px;
	object-fit: contain;
	background: var(--c-bg-2);
	border-radius: var(--radius);
	flex: 0 0 auto;
}
.astunke-rentals-mine__top h2 { margin: 0; font-size: var(--fs-lg); line-height: 1.25; }
.astunke-rentals-mine__period {
	margin: .35rem 0 0;
	font-family: var(--f-mono);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

.astunke-rentals-mine__status {
	margin: var(--sp-4) 0 0;
	padding: var(--sp-3);
	border-radius: var(--radius);
	background: var(--c-bg-2);
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.4;
}
.astunke-rentals-mine__status span {
	display: block;
	margin-top: .35rem;
	font-weight: 400;
	font-size: var(--fs-sm);
}
.astunke-rentals-mine__status--active { background: #dbeafe; color: #1e40af; }
.astunke-rentals-mine__status--late   { background: #fee2e2; color: #b32d2e; }
.astunke-rentals-mine__status--done   { background: #dcfce7; color: #15803d; }
.astunke-rentals-mine__ok { color: #15803d; font-size: var(--fs-xs); }
/* The "why" next to a sum — quieter than the number, on its own line so the
   figure stays the thing you read first. */
.astunke-rentals-mine__note { color: var(--c-ink-soft); font-size: var(--fs-xs); }
.astunke-rentals-book__facts dd .astunke-rentals-mine__ok,
.astunke-rentals-book__facts dd .astunke-rentals-mine__note { display: block; line-height: 1.35; }

.astunke-rentals-mine__where { margin: var(--sp-6) 0 0; }
.astunke-rentals-mine__where h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.astunke-rentals-mine__addr { margin: 0; font-size: var(--fs-md); }
.astunke-rentals-mine__where .astunke-btn { margin: var(--sp-3) var(--sp-2) 0 0; }
.astunke-rentals-mine__foot { margin-top: var(--sp-6); max-width: 62ch; }

@media (max-width: 560px) {
	/* A 120px thumbnail plus a long bike name leaves no room for either. */
	.astunke-rentals-mine__top { flex-direction: column; align-items: flex-start; }
	.astunke-rentals-mine__img { width: 100%; height: 180px; }
	.astunke-rentals-mine__where .astunke-btn { display: block; margin-right: 0; text-align: center; }
}

/* ---------- Cart / checkout hold countdown ----------
   The only thing in a WooCommerce cart that expires by itself. It has to read
   as information, not as an alarm — until it nearly runs out, at which point
   it should be impossible to miss. */
.astunke-rentals-hold {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem var(--sp-2);
	margin: 0 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border-left: 3px solid var(--c-red);
	background: var(--c-bg-2);
	font-size: var(--fs-sm);
}
.astunke-rentals-hold strong { font-size: var(--fs-md); }
.astunke-rentals-hold span { color: var(--c-ink-soft); }
.astunke-rentals-hold.is-soon strong { color: var(--c-red); font-variant-numeric: tabular-nums; }
.astunke-rentals-hold.is-expired { background: #fee2e2; }
.astunke-rentals-hold.is-expired strong { color: #b32d2e; }

/* ---------- Inline validation messages ----------
   Shown only when a click could not do what the customer expected. Red enough
   to notice, quiet enough not to look like the site broke. */
.astunke-rentals-book__hint,
.astunke-rentals-say {
	margin: var(--sp-2) 0 0;
	padding: .55rem .75rem;
	border-left: 3px solid var(--c-red);
	background: #fee2e2;
	color: #b32d2e;
	font-size: var(--fs-sm);
	line-height: 1.45;
}
.astunke-rentals-say { margin-top: var(--sp-3); }

/* A disabled day still needs to look explicable, not broken. */
.astunke-rentals-cal__grid button:disabled { cursor: not-allowed; }
.astunke-rentals-cal__grid button.is-busy,
.astunke-rentals-cal__grid button.is-buffer { cursor: help; }