/* Taxi Aki — власні стилі поверх Elementor. Кольори й шрифти — у Elementor › Site Settings. */

/*
 * Списки «в рядок» (Icon List → Inline) на телефоні — по одному пункту в рядок.
 * Чому тут: у Elementor розкладка Icon List не задається окремо для пристроїв.
 * Як увімкнути: у віджеті Advanced → CSS Classes → ta-stack-mobile.
 * 767px — мобільна межа Elementor (Site Settings › Layout › Breakpoints).
 */
@media (max-width: 767px) {
	.ta-stack-mobile .elementor-icon-list-items.elementor-inline-items {
		flex-direction: column;
		align-items: flex-start;
	}
	.ta-stack-mobile .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
		margin-inline: 0;
	}
}

/*
 * Список (Icon List → Default) на планшеті — у колонки поруч, по пункту в колонці: під текстом
 * на всю ширину стовпчик коротких пунктів лишає праву половину порожньою.
 * Чому тут: та сама причина, що й ta-stack-mobile. Клас: ta-spalten-tablet.
 * 768–1199px — планшет Elementor.
 */
@media (min-width: 768px) and (max-width: 1199px) {
	.ta-spalten-tablet .elementor-icon-list-items:not(.elementor-inline-items) {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 30px;
	}
	/* сильніший селектор — щоб перебити відступи між пунктами («Space Between») і «Vertical Align» з налаштувань Elementor */
	.elementor-widget.ta-spalten-tablet .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item {
		align-items: flex-start;
		margin: 0 !important;
		padding: 0 !important;
	}
	.elementor-widget.ta-spalten-tablet .elementor-icon-list-item .elementor-icon-list-text {
		align-self: flex-start;
	}
	.elementor-widget.ta-spalten-tablet .elementor-icon-list-icon {
		margin-top: .3em;
	}
}

/*
 * Мобільна панель контактів (Footer, клас .kontakt-leiste).
 * Чому тут: клас на body ставить custom.js, коли відкрита клавіатура у формі;
 * env(safe-area-inset-bottom) — відступ над «смужкою» iPhone, в Elementor його не задати.
 */
.taxi-aki-tastatur-offen .kontakt-leiste {
	display: none !important;
}

.elementor-element.kontakt-leiste {
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/*
 * Плавна поява панелі: між #leistungen і футером (клас на body ставить custom.js).
 * Без JS класу «bereit» немає — панель просто видно завжди.
 * visibility після анімації — щоб сховані кнопки не ловили Tab.
 */
.kontakt-leiste-bereit .elementor-element.kontakt-leiste {
	transform: translateY(calc(100% + 30px));
	visibility: hidden;
	transition: transform 0.35s ease, visibility 0s linear 0.35s;
}

.kontakt-leiste-bereit.kontakt-leiste-an .elementor-element.kontakt-leiste {
	transform: none;
	visibility: visible;
	transition: transform 0.35s ease, visibility 0s;
}

/*
 * Кнопка віджета контактів на десктопі (Footer, контейнер .kontakt-widget, віджет Icon).
 * Чому тут: під круглою іконкою віджет Icon лишає ~7 px рядка тексту, і тінь з
 * заокругленням 50% лягала овалом під кнопку («хвіст»). Висоту рядка у віджеті Icon
 * в Elementor не задати.
 */
.kontakt-widget .elementor-icon-wrapper {
	line-height: 0;
}

/*
 * Кругла кнопка ховається, коли на екрані футер (клас на body ставить custom.js):
 * у футері ті самі контакти, а кнопка лягала на правий нижній рядок.
 */
.elementor-element.kontakt-widget {
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

.ta-footer-sichtbar .elementor-element.kontakt-widget {
	opacity: 0;
	transform: scale(0.8);
	visibility: hidden;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

/*
 * Правові сторінки (Impressum, Datenschutzerklärung) — текст у звичайному редакторі,
 * виводить віджет Post Content шаблону «Seite – Rechtliches». Розмітка в тексті сторінки
 * (dl, nav) віджетами Elementor не збирається, тому стилі тут; кольори й шрифти — з Kit.
 */
.ta-recht-intro {
	font-size: 1.125em;
	line-height: 1.6;
	max-width: 40em;
}

.ta-recht-stand {
	margin-top: 3em;
	font-size: .875em;
	opacity: .6;
}

/* Impressum: дані фірми як таблиця «що — значення», на телефоні у стовпчик */
.ta-impressum {
	display: grid;
	grid-template-columns: minmax(10em, 15em) 1fr;
	gap: 0;
	margin: 0 0 1.5em;
	border-top: 1px solid var(--e-global-color-8b349b7);
}

.ta-impressum dt,
.ta-impressum dd {
	margin: 0;
	padding: .8em 0;
	border-bottom: 1px solid var(--e-global-color-8b349b7);
}

.ta-impressum dt {
	font-weight: 700;
	padding-right: 1.5em;
}

/* остання пара без нижньої лінії — далі йде h2 зі своєю лінією */
.ta-impressum dt:last-of-type,
.ta-impressum dd:last-of-type {
	border-bottom: 0;
}

.ta-impressum dt small {
	display: block;
	font-weight: 400;
	font-size: .8em;
	opacity: .6;
}

@media (max-width: 767px) {
	.ta-impressum {
		grid-template-columns: 1fr;
	}
	/* підпис дрібним, як «Subtitle» у Kit — щоб не зливався з жирним значенням під ним */
	.ta-impressum dt {
		padding-bottom: .3em;
		border-bottom: 0;
		font-size: .8em;
		text-transform: uppercase;
		letter-spacing: .08em;
		opacity: .6;
	}
	.ta-impressum dd {
		padding-top: 0;
	}
}

/* Datenschutzerklärung: зміст — сіра картка набору з нумерованими посиланнями */
.ta-inhalt {
	background: var(--e-global-color-982dfd5);
	border-radius: 12px;
	padding: 1.5em 1.75em;
	margin: 0 0 2em;
}

.ta-inhalt-titel {
	margin: 0 0 .6em !important;
	font-family: var(--e-global-typography-ae05c6e-font-family), sans-serif;
	font-size: var(--e-global-typography-ae05c6e-font-size);
	font-weight: var(--e-global-typography-ae05c6e-font-weight);
	text-transform: var(--e-global-typography-ae05c6e-text-transform);
	letter-spacing: var(--e-global-typography-ae05c6e-letter-spacing);
	opacity: .6;
}

.ta-inhalt ol {
	margin: 0 !important;
	padding-left: 1.6em !important;
	columns: 2;
	column-gap: 2em;
}

.ta-inhalt li {
	break-inside: avoid;
	margin-bottom: .3em;
}

.ta-inhalt li::marker {
	color: var(--e-global-color-secondary);
	font-weight: 700;
}

.ta-inhalt a {
	text-decoration: none !important;
}

.ta-inhalt a:hover {
	text-decoration: underline !important;
}

@media (max-width: 767px) {
	.ta-inhalt ol {
		columns: 1;
	}
}

/*
 * Години роботи [taxi_aki_zeiten] (inc/zeiten.php): крапка + статус. Колір тексту — від
 * віджета, де стоїть шорткод. Зелена крапка «відкрито» — єдиний колір поза Kit: у палітрі
 * набору немає зеленого, а жовтий уже означає «дія» (кнопки).
 */
.ta-zeiten {
	display: inline-flex;
	align-items: baseline;
	gap: .55em;
}

.ta-zeiten-punkt {
	flex: none;
	width: .6em;
	height: .6em;
	border-radius: 50%;
	background: currentColor;
	opacity: .45;
	transform: translateY(-.05em);
}

.ta-zeiten.ist-offen .ta-zeiten-punkt {
	background: #2E9E4F;
	opacity: 1;
	box-shadow: 0 0 0 0 rgba(46, 158, 79, .5);
	animation: ta-zeiten-puls 2.4s ease-out infinite;
}

@keyframes ta-zeiten-puls {
	70% { box-shadow: 0 0 0 .5em rgba(46, 158, 79, 0); }
	100% { box-shadow: 0 0 0 0 rgba(46, 158, 79, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.ta-zeiten.ist-offen .ta-zeiten-punkt {
		animation: none;
	}
}

/*
 * Де стоїть статус (клас у Advanced › CSS Classes віджета Shortcode): у віджета Shortcode
 * немає власних кольору й типографіки, тому розмір і колір — тут.
 */
.ta-zeiten-hero,
.ta-zeiten-popup {
	font-size: 15px;
	line-height: 1.4;
}

.ta-zeiten-dunkel {
	color: var(--e-global-color-d88298d);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}

.ta-zeiten-dunkel .ta-zeiten-text {
	opacity: .8;
}