/* ==========================================================================
   LivMed - design system
   Nowoczesna, stonowana paleta: kremowa biel, głęboka zieleń zamiast czerni,
   przygaszony zloty akcent. Inspiracja: projektskora.pl
   ========================================================================== */

:root {
	--livmed-bg: #faf9f6;
	--livmed-bg-alt: #efeadf;
	--livmed-card: #ffffff;
	--livmed-dark: #313c36;
	--livmed-dark-2: #26302b;
	--livmed-accent: #b3944c;
	--livmed-accent-dark: #97793a;
	--livmed-accent-soft: #ece2c8;
	--livmed-text: #313c36;
	--livmed-text-muted: #6f7972;
	--livmed-border: #e4e1d8;

	--livmed-radius-sm: 10px;
	--livmed-radius-md: 18px;
	--livmed-radius-lg: 28px;
	--livmed-radius-pill: 999px;

	--livmed-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--livmed-speed: 300ms;

	--livmed-shadow: 0 2px 14px rgba(49, 60, 54, 0.06);
	--livmed-shadow-hover: 0 14px 34px rgba(49, 60, 54, 0.14);
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--livmed-bg);
	color: var(--livmed-text);
	font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5,
.entry-title,
.kt-blocks-info-box-title {
	font-family: "Cormorant Garamond", Georgia, "Iowan Old Style", serif;
	font-weight: 600;
	letter-spacing: 0.1px;
	color: var(--livmed-dark);
}

/* Kadence i Gutenberg czesto ustawiaja kolor tekstu z wieksza specyficznoscia
   niz nasz body { color } - wymuszamy nasz kolor wszedzie tam, gdzie realnie
   pojawia sie tresc, zeby nigdzie nie zostal domyslny (prawie czarny). */
body,
.entry-content,
.entry-content p,
.entry-content li,
.entry-content div,
p, li, dt, dd,
.wp-block-column p,
.wp-block-group p {
	color: var(--livmed-text);
}

.entry-content p,
.wp-block-paragraph {
	color: var(--livmed-text-muted);
}

a {
	color: var(--livmed-accent-dark);
	transition: color var(--livmed-speed) var(--livmed-ease);
}

a:hover {
	color: var(--livmed-dark);
}

/* ---------- Naglowek ---------- */

/* Logo juz zawiera nazwe gabinetu - ukrywamy zdublowany tekstowy tytul
   strony (zostawiamy w DOM dla czytnikow ekranu / SEO). */
.brand.has-logo-image .site-title-wrap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Menu mobilne ---------- */

.popup-drawer .drawer-inner {
	background: var(--livmed-dark-2) !important;
}

.mobile-menu-container,
.drawer-menu-container {
	background: var(--livmed-dark) !important;
}

.mobile-menu-container a,
.drawer-menu-container a {
	font-family: "Montserrat", sans-serif;
}

.header-mobile-social-wrap .social-button {
	background: var(--livmed-dark) !important;
	color: var(--livmed-accent) !important;
}

.popup-drawer .drawer-header .menu-toggle-close .toggle-close-bar {
	background: var(--livmed-accent);
}

.current-menu-item > a,
.current_page_item > a,
.current-menu-ancestor > a {
	color: var(--livmed-accent) !important;
}

/* ---------- Belka tytulu strony (Kadence page hero) ---------- */

.entry-hero.page-hero-section {
	background: var(--livmed-bg-alt) !important;
}

.entry-hero .entry-title {
	color: var(--livmed-dark);
}

/* ---------- Sections ---------- */

.livmed-section {
	padding: clamp(48px, 8vw, 120px) 0;
}

.livmed-section--alt {
	background: var(--livmed-bg-alt);
}

.livmed-section--dark {
	background: var(--livmed-dark);
	color: #f2efe7;
}

.livmed-section--dark h1,
.livmed-section--dark h2,
.livmed-section--dark h3,
.livmed-section--dark h4,
.livmed-section--dark p,
.livmed-section--dark li {
	color: #f2efe7;
}

.livmed-section--dark .wp-block-paragraph {
	color: #cfd6d0;
}

/* ---------- Buttons ---------- */

.wp-block-button__link,
.kt-btn-wrap a.kt-button,
.button,
button:not(.mobile-toggle-open-icon-trigger):not(.mobile-toggle-close-icon-trigger):not(.wc-block-components-quantity-selector__button):not(.dropdown-nav-special-toggle):not(.dropdown-nav-toggle),
input[type="submit"],
.ff-btn-submit,
.wc-block-components-button {
	border-radius: var(--livmed-radius-pill) !important;
	background: var(--livmed-dark) !important;
	color: #fff !important;
	border: none !important;
	padding: 0.95em 1.9em !important;
	font-family: "Montserrat", sans-serif;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-align: center;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: var(--livmed-shadow);
	transition: transform var(--livmed-speed) var(--livmed-ease),
		box-shadow var(--livmed-speed) var(--livmed-ease),
		background var(--livmed-speed) var(--livmed-ease);
}

.wp-block-button__link:hover,
.kt-btn-wrap a.kt-button:hover,
.button:hover,
button:hover:not(.mobile-toggle-open-icon-trigger):not(.mobile-toggle-close-icon-trigger):not(.wc-block-components-quantity-selector__button),
input[type="submit"]:hover,
.ff-btn-submit:hover,
.wc-block-components-button:hover {
	background: var(--livmed-dark-2) !important;
	transform: translateY(-2px);
	box-shadow: var(--livmed-shadow-hover);
}

/* Przyciski-ikony (np. kosz w koszyku) - svg gubilo szerokosc w kontekscie
   inline-flex bez jawnych wymiarow, wiec wymuszamy rozmiar ikony. */
button svg,
.button svg,
a.button svg,
[class*="remove"] svg {
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0;
}

/* Przycisk nieaktywny (np. wariant produktu jeszcze niewybrany) - czytelny,
   ale wyraznie "wylaczony", zamiast blaknac do nieczytelnej szaroci. */
.wp-block-button__link:disabled,
.wp-block-button__link.disabled,
.button:disabled,
.button.disabled,
button:disabled,
input[type="submit"]:disabled,
.wc-block-components-button:disabled,
.wc-block-components-button.disabled {
	background: var(--livmed-border) !important;
	color: var(--livmed-text-muted) !important;
	opacity: 1 !important;
	cursor: not-allowed;
	box-shadow: none !important;
	transform: none !important;
}

/* Przycisk konturowy - klasa bywa na wrapperze (bloki Gutenberga) albo
   bezposrednio na linku (np. karty wynikow quizu) - obsluzmy oba warianty. */
.livmed-btn-outline,
.livmed-btn-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--livmed-dark) !important;
	border: 1.5px solid var(--livmed-dark) !important;
	box-shadow: none !important;
}

.livmed-btn-outline:hover,
.livmed-btn-outline .wp-block-button__link:hover {
	background: var(--livmed-dark) !important;
	color: #fff !important;
}

.livmed-section--dark .livmed-btn-outline,
.livmed-section--dark .livmed-btn-outline .wp-block-button__link {
	color: #f2efe7 !important;
	border-color: rgba(242, 239, 231, 0.5) !important;
}

.livmed-section--dark .livmed-btn-outline:hover,
.livmed-section--dark .livmed-btn-outline .wp-block-button__link:hover {
	background: #f2efe7 !important;
	color: var(--livmed-dark) !important;
}

/* ---------- WooCommerce: koszyk / zamowienie (bloki) ---------- */

.wc-block-components-quantity-selector__button {
	background: var(--livmed-bg-alt) !important;
	color: var(--livmed-dark) !important;
	border-radius: var(--livmed-radius-pill) !important;
	box-shadow: none !important;
}

.wc-block-components-quantity-selector__button:hover {
	background: var(--livmed-accent-soft) !important;
	transform: none;
	box-shadow: none !important;
}

/* ---------- Hero ---------- */

.livmed-section:first-of-type .wp-block-column:last-child .livmed-photo img {
	max-height: 460px;
	object-fit: cover;
	object-position: top center;
}

/* ---------- Placeholder na zdjecie ---------- */

.livmed-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 320px;
	max-width: 340px;
	margin-left: 24px;
	border: 2px dashed var(--livmed-border);
	border-radius: var(--livmed-radius-md);
	background: var(--livmed-bg-alt);
	color: var(--livmed-text-muted);
	font-size: 0.9em;
	padding: 20px;
}

@media (max-width: 680px) {
	.livmed-photo-placeholder {
		float: none !important;
		margin: 0 0 20px !important;
		max-width: 100% !important;
	}
}

/* ---------- Wybor sposobu dostarczenia vouchera ---------- */

.livmed-delivery-choice {
	margin: 20px 0;
}

.livmed-delivery-choice__label {
	font-weight: 700;
	color: var(--livmed-dark);
	margin-bottom: 10px;
}

.livmed-delivery-option {
	display: flex !important;
	align-items: center;
	gap: 10px;
	background: var(--livmed-bg);
	border: 1.5px solid var(--livmed-border);
	border-radius: var(--livmed-radius-sm);
	padding: 12px 16px;
	cursor: pointer;
	font-weight: 400;
	transition: border-color var(--livmed-speed) var(--livmed-ease), background var(--livmed-speed) var(--livmed-ease);
}

.livmed-delivery-option:has(input:checked) {
	border-color: var(--livmed-accent);
	background: var(--livmed-accent-soft);
	font-weight: 600;
}

.livmed-delivery-option input {
	accent-color: var(--livmed-dark);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ---------- Mapa (Kontakt) ---------- */

.livmed-map {
	border-radius: var(--livmed-radius-md);
	overflow: hidden;
	box-shadow: var(--livmed-shadow);
	line-height: 0;
}

.livmed-map iframe {
	display: block;
	min-height: 260px;
}

/* ---------- Zdjecia ---------- */

.livmed-photo img,
.entry-content .wp-block-image img {
	border-radius: var(--livmed-radius-md);
	box-shadow: var(--livmed-shadow);
	display: block;
	width: 100%;
	height: auto;
}

.entry-content .wp-block-image.alignright {
	margin-left: 24px;
}

.entry-content .wp-block-image.alignleft {
	margin-right: 24px;
}

@media (max-width: 680px) {
	.livmed-photo.alignright,
	.livmed-photo.alignleft,
	.entry-content .wp-block-image.alignright,
	.entry-content .wp-block-image.alignleft {
		float: none !important;
		margin: 0 0 20px !important;
		max-width: 100% !important;
	}
}

.livmed-photo.livmed-photo--round img {
	border-radius: var(--livmed-radius-pill);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Zdjecie jako pierwszy element karty - karta juz ma zaokraglenie i cien,
   wiec samo zdjecie ma byc plaskie i przylegac do krawedzi. */
.livmed-card > .livmed-photo:first-child {
	margin: 0;
}

.livmed-card > .livmed-photo:first-child img {
	border-radius: 0;
	box-shadow: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Karty "Poznaj nasza oferte" - tytul i przycisk wyrownane mimo roznej
   dlugosci tytulow (przycisk zawsze przy dole karty). */
.livmed-offer-card {
	display: flex;
	flex-direction: column;
}

.livmed-offer-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 20px 24px;
}

.livmed-offer-card__body h4 {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.livmed-offer-card__cta {
	margin-top: auto;
}

.livmed-offer-card__cta .wp-block-buttons {
	justify-content: center;
}

/* ---------- Cards ---------- */

.livmed-card,
.kt-info-box,
.kadence-blocks-testimonials-container .kt-testimonial-inner-wrap,
.woocommerce ul.products li.product {
	background: var(--livmed-card);
	border: 1px solid var(--livmed-border);
	border-radius: var(--livmed-radius-md);
	box-shadow: var(--livmed-shadow);
	transition: transform var(--livmed-speed) var(--livmed-ease),
		box-shadow var(--livmed-speed) var(--livmed-ease),
		border-color var(--livmed-speed) var(--livmed-ease);
}

.livmed-card:hover,
.kt-info-box:hover,
.kadence-blocks-testimonials-container .kt-testimonial-inner-wrap:hover {
	transform: translateY(-4px);
	box-shadow: var(--livmed-shadow-hover);
	border-color: var(--livmed-accent);
}

/* ---------- Scroll reveal ---------- */

.livmed-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms var(--livmed-ease), transform 700ms var(--livmed-ease);
}

.livmed-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.livmed-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	html {
		scroll-behavior: auto;
	}
}

/* ---------- Quiz ---------- */

.livmed-quiz {
	max-width: 720px;
	margin: 0 auto;
}

.livmed-quiz .livmed-quiz-step {
	background: var(--livmed-card);
	border: 1px solid var(--livmed-border);
	border-radius: var(--livmed-radius-lg);
	box-shadow: var(--livmed-shadow);
	padding: clamp(20px, 4vw, 40px);
	margin-bottom: 20px;
}

.livmed-quiz-options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 16px;
}

@media (max-width: 600px) {
	.livmed-quiz-options {
		grid-template-columns: 1fr;
	}
}

#livmed-quiz-app .livmed-quiz-option,
#livmed-depil-areas .livmed-quiz-option {
	display: block !important;
	width: 100%;
	text-align: left;
	background: var(--livmed-bg) !important;
	border: 1.5px solid var(--livmed-border) !important;
	border-radius: var(--livmed-radius-sm) !important;
	padding: 14px 18px !important;
	font: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--livmed-text) !important;
	cursor: pointer;
	box-shadow: none;
	transition: border-color var(--livmed-speed) var(--livmed-ease),
		box-shadow var(--livmed-speed) var(--livmed-ease),
		transform var(--livmed-speed) var(--livmed-ease);
}

#livmed-quiz-app .livmed-quiz-option:hover,
#livmed-depil-areas .livmed-quiz-option:hover {
	border-color: var(--livmed-dark) !important;
	box-shadow: var(--livmed-shadow-hover);
	transform: translateY(-2px);
	background: var(--livmed-bg) !important;
	color: var(--livmed-text) !important;
}

#livmed-quiz-app .livmed-quiz-option.is-selected,
#livmed-depil-areas .livmed-quiz-option.is-selected {
	background: var(--livmed-accent-soft) !important;
	border-color: var(--livmed-accent) !important;
	color: var(--livmed-text) !important;
	font-weight: 600;
}

.livmed-quiz-progress {
	height: 6px;
	border-radius: var(--livmed-radius-pill);
	background: var(--livmed-bg-alt);
	overflow: hidden;
	margin-bottom: 28px;
}

.livmed-quiz-progress-bar {
	height: 100%;
	background: var(--livmed-accent);
	border-radius: var(--livmed-radius-pill);
	transition: width 400ms var(--livmed-ease);
}

/* ---------- Hero CTA line ---------- */

.livmed-hero-cta {
	background: var(--livmed-card);
	border: 1px solid var(--livmed-border);
	border-radius: var(--livmed-radius-md);
	padding: 18px 24px;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	align-items: center;
	box-shadow: var(--livmed-shadow);
}

.livmed-hero-cta__links {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ---------- Tabela cennika ---------- */

.livmed-price-table table {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
}

.livmed-price-table th,
.livmed-price-table td {
	padding: 12px 16px;
}

.livmed-price-table th:first-child,
.livmed-price-table td:first-child {
	width: auto;
}

.livmed-price-table th:last-child,
.livmed-price-table td:last-child {
	width: 130px;
	white-space: normal;
	text-align: center;
}

@media (max-width: 480px) {
	.livmed-price-table th:last-child,
	.livmed-price-table td:last-child {
		width: 90px;
	}
}

/* Tabele z dluzszym tekstem cen (pakiety/raty) - szersza kolumna cen. */
.livmed-price-table--wide th:last-child,
.livmed-price-table--wide td:last-child {
	width: 260px;
	text-align: left;
}

@media (max-width: 600px) {
	.livmed-price-table--wide th:last-child,
	.livmed-price-table--wide td:last-child {
		width: 150px;
	}
}

/* ---------- Rozwijane elementy (details/summary) ---------- */

.livmed-details {
	border: 1px solid var(--livmed-border);
	border-radius: var(--livmed-radius-sm);
	padding: 16px 20px;
	margin-bottom: 12px;
	background: var(--livmed-card);
}

.livmed-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--livmed-dark);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.livmed-details summary::-webkit-details-marker {
	display: none;
}

.livmed-details summary::after {
	content: "+";
	font-size: 1.3em;
	line-height: 1;
	color: var(--livmed-accent-dark);
	transition: transform var(--livmed-speed) var(--livmed-ease);
	flex-shrink: 0;
}

.livmed-details[open] summary::after {
	transform: rotate(45deg);
}

.livmed-details__body {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--livmed-border);
	color: var(--livmed-text-muted);
}

.livmed-details__body ul {
	margin: 0 0 12px;
	padding-left: 20px;
}

.livmed-details__body li {
	margin-bottom: 4px;
}

.livmed-details__price {
	font-weight: 700;
	color: var(--livmed-dark);
	font-size: 1.15em;
}

/* ---------- Formularze ---------- */

.livmed-form-wrap {
	max-width: 560px;
}

.livmed-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--livmed-card);
	border: 1px solid var(--livmed-border);
	border-radius: var(--livmed-radius-lg);
	box-shadow: var(--livmed-shadow);
	padding: clamp(20px, 4vw, 32px);
}

.livmed-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-weight: 600;
	color: var(--livmed-text);
}

.livmed-form input[type="text"],
.livmed-form input[type="email"],
.livmed-form input[type="tel"],
.livmed-form textarea,
.livmed-form select {
	font: inherit;
	font-weight: 400;
	padding: 12px 14px;
	border-radius: var(--livmed-radius-sm);
	border: 1.5px solid var(--livmed-border);
	background: var(--livmed-bg);
	color: var(--livmed-text);
	transition: border-color var(--livmed-speed) var(--livmed-ease), box-shadow var(--livmed-speed) var(--livmed-ease);
}

.livmed-form input:focus,
.livmed-form textarea:focus,
.livmed-form select:focus {
	outline: none;
	border-color: var(--livmed-accent);
	box-shadow: 0 0 0 4px var(--livmed-accent-soft);
}

.livmed-form-consent {
	flex-direction: row !important;
	align-items: flex-start;
	font-weight: 400 !important;
	font-size: 0.92em;
	color: var(--livmed-text-muted);
	gap: 10px !important;
}

.livmed-form-consent input {
	margin-top: 4px;
}

.livmed-form button[type="submit"] {
	align-self: flex-start;
}

.livmed-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.livmed-form-notice {
	padding: 14px 18px;
	border-radius: var(--livmed-radius-sm);
	margin-bottom: 16px;
	font-weight: 600;
}

.livmed-form-notice--ok {
	background: #eaf1e6;
	color: #3a5c33;
	border: 1px solid #cfe0c8;
}

.livmed-form-notice--err {
	background: #f7ece7;
	color: #8a4b32;
	border: 1px solid #eed4c4;
}

/* ---------- Stopka - jedna kolumna, wyśrodkowana ---------- */

.site-bottom-footer-inner-wrap {
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.site-footer-bottom-section-1 {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

#footer-navigation .footer-menu-container ul {
	justify-content: center;
}

.site-info,
.footer-html-inner,
.footer-html-inner p {
	text-align: center;
	margin: 0;
}