.awb-tvarkarasciai {
	--awb-tvark-accent: var( --awb-color5, #27c4e5 );
	--awb-tvark-ink: var( --awb-color8, #222222 );
	--awb-tvark-muted: var( --awb-color6, #666666 );
	--awb-tvark-line: var( --awb-color3, #e1e1e1 );
	--awb-tvark-surface: var( --awb-color1, #ffffff );
	--awb-tvark-tint: var( --awb-color2, #f2f2f2 );
	--awb-tvark-gap: 24px;

	display: grid;
	grid-template-columns: minmax( 200px, 260px ) minmax( 0, 1fr );
	gap: 40px;
	align-items: start;
}

.awb-tvarkarasciai--empty {
	padding: 24px 0;
}

/* Sidebar */

.awb-tvarkarasciai__sidebar {
	position: sticky;
	top: 100px;
}

/* Same Avada auto-typography override as .awb-tvarkarasciai__card-title below. */
.awb-tvarkarasciai .awb-tvarkarasciai__sidebar-title {
	margin: 0 0 16px;
	font-size: 18px !important;
}

.awb-tvarkarasciai__cities {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.awb-tvarkarasciai__city {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var( --awb-tvark-ink );
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.awb-tvarkarasciai__city:hover {
	background: var( --awb-tvark-tint );
}

.awb-tvarkarasciai__city[aria-pressed="true"] {
	background: var( --awb-tvark-accent );
	color: var( --awb-color1, #ffffff );
	font-weight: 600;
}

.awb-tvarkarasciai__city-count {
	font-size: 13px;
	opacity: .75;
}

/* Result count line */

.awb-tvarkarasciai__status {
	margin: 0 0 16px;
	color: var( --awb-tvark-muted );
	font-size: 14px;
}

.awb-tvarkarasciai__empty[hidden] {
	display: none;
}

/* Card grid */

.awb-tvarkarasciai__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --awb-tvark-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

.awb-tvarkarasciai__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	background: var( --awb-tvark-surface );
	border: 1px solid var( --awb-tvark-line );
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .04 ), 0 8px 24px rgba( 0, 0, 0, .05 );
	transition: box-shadow .2s ease, transform .2s ease;
}

.awb-tvarkarasciai__card:hover {
	box-shadow: 0 2px 4px rgba( 0, 0, 0, .06 ), 0 16px 36px rgba( 0, 0, 0, .09 );
}

/* Our display:flex above outranks the UA agent stylesheet's [hidden]{display:none} - restate it. */
.awb-tvarkarasciai__card[hidden] {
	display: none;
}

/*
 * Avada's global "responsive typography" feature auto-applies
 * .fusion-responsive-typography-calculated to every heading site-wide,
 * which sets font-size via `!important` (assets/css/media/max-main.css).
 * Beating it needs both higher specificity and !important ourselves.
 */
.awb-tvarkarasciai .awb-tvarkarasciai__card-title {
	margin: 0;
	font-size: 19px !important;
}

.awb-tvarkarasciai__address {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	color: var( --awb-tvark-muted );
	font-size: 15px;
}

.awb-tvarkarasciai__icon {
	flex: 0 0 auto;
	margin-top: 2px;
	fill: var( --awb-tvark-accent );
}

/* Only shown under "Visi miestai" (see tvarkarasciai.js apply()) - a
 * single-city filter already makes the city redundant per card. */
.awb-tvarkarasciai__address-city {
	font-weight: 600;
}

.awb-tvarkarasciai__slots {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.awb-tvarkarasciai__slot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 8px;
	background: var( --awb-tvark-tint );
	font-size: 15px;
}

.awb-tvarkarasciai__slot-day {
	font-weight: 700;
	color: var( --awb-tvark-ink );
}

.awb-tvarkarasciai__slot-day abbr {
	text-decoration: none;
	border-bottom: 0;
	cursor: help;
}

.awb-tvarkarasciai__slot-room {
	color: var( --awb-tvark-muted );
}

.awb-tvarkarasciai__note {
	margin: 0;
	padding-left: 12px;
	border-left: 3px solid var( --awb-tvark-accent );
	color: var( --awb-tvark-ink );
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.awb-tvarkarasciai .awb-tvarkarasciai__button {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: 8px;
	background: var( --awb-tvark-accent );
	color: var( --awb-color1, #ffffff );
	font-weight: 600;
	text-decoration: none;
	transition: filter .2s ease;
}

.awb-tvarkarasciai .awb-tvarkarasciai__button:hover,
.awb-tvarkarasciai .awb-tvarkarasciai__button:focus {
	filter: brightness( .92 );
	color: var( --awb-color1, #ffffff );
}

.awb-tvarkarasciai__button:focus-visible {
	outline: 2px solid var( --awb-tvark-ink );
	outline-offset: 2px;
}

@media ( max-width: 1100px ) {
	.awb-tvarkarasciai {
		grid-template-columns: minmax( 0, 1fr );
		gap: 24px;
	}

	.awb-tvarkarasciai__sidebar {
		position: static;
	}

	/* Keeps the scrolled-to content clear of Avada's sticky header when
	 * a city tap triggers the scrollIntoView() in tvarkarasciai.js. */
	.awb-tvarkarasciai__content {
		scroll-margin-top: 90px;
	}

	.awb-tvarkarasciai__cities {
		display: grid;
		grid-template-columns: repeat( 2, 1fr );
		gap: 8px;
	}

	.awb-tvarkarasciai__city {
		width: 100%;
	}

	.awb-tvarkarasciai__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 800px ) {
	.awb-tvarkarasciai__grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.awb-tvarkarasciai * {
		transition: none !important;
	}
}