/* VARIABLES */

:root {
  --primary-color: #D4B996; 
  --secondary-color: /* #E6D3BB */ #ff0000;
  --text-color: #000;
  --bg-color: #fff;
}

/* RESET AND NORMALIZE */

*, *::before, *::after {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}

body {
	background: #000;
}

body, button, input, select, textarea {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 20px;
}

h1, h2, h3, h4, h5, h6, p, span, a, ul, ol, li {
	color: #fff;
}

a {
	text-decoration: none;
}

i {
	font-size: 24px;
	color: #fff;
}

p, ul { 
margin-bottom: 24px;
}

/* GENERAL */

.buttons {
	display: flex;
	gap: 16px;
}

.primary-button {
	min-width: 180px;
	padding: 12px 36px;
	background: var(--primary-color);
	color: #000;
	border: 1px solid var(--primary-color);
	border-radius: 50px;
	text-decoration: none;
	line-height: 1.2;
	display: inline-block;
	transition: all 0.3s ease-in;
}

.primary-button:hover {
	background: transparent;
	color: var(--primary-color);
}

.secondary-button {
	min-width: 180px;
	padding: 12px 36px;
	background: transparent;
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: 50px;
	text-decoration: none;
	line-height: 1.2;
	display: inline-block;
	transition: all 0.3s ease-in;
}

.secondary-button:hover {
	background: var(--primary-color);
	color: #000;
}

@media all and (min-width: 769px) {
.onlymobile {
    display: none!important;
}

.onlydesktop {
    display: block;
}
}

@media all and (max-width: 768px) {
    .onlydesktop {
        display: none!important;
    }

    .onlymobile {
        display: block;
    }
	
	.primary-button, .secondary-button {
		width: 100%;
		text-align: center;
	}
	
	.buttons {
		flex-direction: column;
	}
}

/* LAYOUT */

	section {
		width: 100%;
	}
	
	.section-inner {
		width: 100%;
		max-width: 1280px;
		margin: 0 auto;
		padding: 80px 40px;
	}
	
	.layout-column {
		display: flex;
		flex-direction: column;
		gap: 80px;
	}
	
	.layout-2-columns {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 80px;
	}
	
	.layout-3-columns {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 48px;
	}
	
	.layout-4-columns {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 32px;
	}
	
	.col {
		flex: 1;
	}
	
	.col-50 {
		width: calc(50% - 40px);
	}
	
	.col-20 {
		
	}
	
	.col-25 {
		width: calc(25% - 24px);
	}
	
	.col-33 {
		
	}
	
	.col-40 {
		width: calc(40% - 40px);
	}
	
	.col-60 {
		width: calc(60% - 40px)
	}
	
	.col-66 {
		
	}
	
	.col-75 {
		
	}
	
	.col-80 {
		
	}

.layout-2-columns .col .section-title-wrapper {
	margin-bottom: 24px;
}

.layout-column .section-title-wrapper {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
	
	.flex {
		display: flex;
	}
	
	.row {
		display: flex;
		flex-direction: row;
	}

.flex-column {
	display: flex;
	flex-direction: column;
}
	
	.space-between {
		justify-content: space-between;
	}
	
	.space-around {
		justify-content: space-around;
	}
	
	.align-start {
		align-items: flex-start;
	}
	
	.align-center {
		align-items: center;
	}
	
	.align-end {
		align-items: flex-end;
	}
	
	.justify-start {
		justify-content: flex-start;
	}
	
	.justify-center {
		justify-content: center;
	}
	
	.justify-end {
		justify-content: flex-end;
	}

	.text-center {
		text-align: center;
	}

	.gap-32 {
		gap: 32px;
	}
	
	.img-1x1 {
		width: 100%;
		height: auto;
		aspect-ratio: 1/1;
		object-fit: cover;
	}

	.img-2x3 {
		width: 100%;
		height: auto;
		aspect-ratio: 2/3;
		object-fit: cover;
	}

	.img-3x2 {
		width: 100%;
		height: auto;
		aspect-ratio: 3/2;
		object-fit: cover;
		object-position: top;
	}

	.img-16x9 {
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
		object-fit: cover;
	}

	.baner {
		width: 100%;
		border-radius: 0;
		aspect-ratio: 2.74;
	}

.img-1o15 {
	width: 100%;
	height: auto;
	aspect-ratio: 0.875;
	object-fit: cover;
}

@media all and (max-width: 768px) {
	.section-inner {
		padding: 64px 16px;
	}
	
	.layout-column {
		gap: 32px;
	}
	
	.layout-column .section-title-wrapper {
		gap: 12px;
		text-align: left;
	}
	
	.layout-2-columns {
		flex-direction: column;
		gap: 48px;
	}
	
	.layout-4-columns {
		flex-direction: column;
		gap: 32px;
	}
	
	.layout-2-columns.mobile-reverse {
		flex-direction: column-reverse;
	}
	
	.mobile-reverse {
		flex-direction: column-reverse;
	}
	
	.col-50, .col-25, .col-40, .col-60 {
		width: 100%;
	}
}

/* TYPOGRAPHY */

p, span, ul, ol, li {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 400;
}

h1, h2, h3, h4, h5 {
	font-family: Playfair Display;
	font-weight: 400;
	line-height: 1.2;
}

h1.page-title {
		font-size: 72px;
	}

.section-title {
	font-size: 72px;
}

.section-small-title {
		font-size: 48px;
		margin: 12px 0;
	}
	
	.breadcrumbs {
		line-height: 1;
		color: #E0E0E0;
	}

.section-caption {
	color: #a7a7a7;
}

.slide-title {
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.layout-column p {
	max-width: 600px;
	margin: 0 auto;
}

@media all and (max-width: 768px) {
	.section-title {
		font-size: 36px;
	}
	
	h1.page-title {
		font-size: 48px;
	}
	
	.section-small-title {
		font-size: 36px;
	}
}


/* HEADER */

#main-header {
	border-bottom: 1px solid #373737;
}

.logo {
	border-radius: 0;
}

.header-actions {
	padding: 12px 0;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.header-separator {
	border: 0;
	background: #373737;
	height: 1px;
	padding: 0;
	margin: 0;
}

.main-navigation {
	display: block;
	padding: 16px 0;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
	display: flex;
flex-direction: column;
background: #000;
padding: 20px;
}

.main-navigation ul ul li {
	padding: 4px 0;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
	text-transform: uppercase;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	transform: all 0.3s;
}

.main-navigation a:hover {
	text-decoration: underline;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {
	
	.menu-toggle {
		display: none;
		outline: none;
		border: 0;
		background: transparent;
	}

	.main-navigation ul {
		display: flex;
		justify-content: space-between;
	}
}

@media all and (max-width: 768px) {
	
	#main-header {
		padding: 0 16px;
	}
	
	.main-navigation ul ul {
	align-items: center;	
		width: 100%;
	}
	
	.main-navigation ul ul a {
		margin: 0 auto;
	}
	
	header .buttons, header .span-with-icon {
		display: none;
	}
	
	.menu-toggle {
		display: flex;
		outline: none;
		border: 0;
		background: transparent;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 100;
}

.burger {
  display: inline-block;
  width: 24px;
  height: 18px;
  position: relative;
  transition: transform 0.3s ease;
}

.burger span {
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  left: 0;
  transition: all 0.3s ease;
}

.burger span:nth-child(1) {
  top: 0;
}
.burger span:nth-child(2) {
  top: 8px;
}
.burger span:nth-child(3) {
  top: 16px;
}

/* Po aktywacji (aria-expanded="true") */
.menu-toggle[aria-expanded="true"] .burger span:nth-child(1) {
  transform: rotate(45deg);
  top: 8px;
}
.menu-toggle[aria-expanded="true"] .burger span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .burger span:nth-child(3) {
  transform: rotate(-45deg);
  top: 8px;
}
	
	#main-navigation {
		display: none;
		height: 100vh;
	}
	
	#main-navigation.toggled {
		display: block;
	}
	
	#primary-menu {
		height: 100%;
text-align: center;
display: flex;
flex-direction: column;
gap: 32px;
margin-top: 32px;
	}
}

/* FOOTER */

footer {
	border-top: 1px solid #373737;
}
	
footer .section-inner {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

footer .footer-top .footer-details {
	display: flex;
	gap: 32px;
}

footer .footer-top .footer-details a {
	color: var(--primary-color);
}

footer .footer-top .footer-social  {
	display: flex;
	gap: 12px;
}

footer .footer-bottom {
	border-top: 1px solid #373737;
	padding-top: 32px;
	color: #fff;
	display: flex;
	gap: 12px;
}

footer .footer-bottom a {
	text-decoration: underline;
}

@media all and (max-width: 768px) {
	.footer-top, .footer-details {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
	}
	
	footer .section-inner {
		gap: 32px;
	}
	
	.footer-bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}
	
/* HOMEPAGE */
	
	#hero {
		position: relative;
		background-image: url('https://estedentica.marketkings.org/wp-content/uploads/2025/04/180512Estedentica-MK17102.png');
		background-size: cover;
	}

#hero::after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: '';
	background: rgba(0,0,0,0.5);
	z-index: 1;
}

	#hero .section-inner {
		position: relative;
		z-index: 2;
	}
	
	#hero .layout-column {
		align-items: center;
		gap: 48px;
	}
	
	.hero-title {
		font-size: 90px;
		text-align: center;
		margin: 0;
	}
	
	.hero-stars {
		text-align: center;
	}
	
	.stars-rating {
		text-align: center;
	}
	
	.fa-star {
		font-size: 20px;
		color: var(--primary-color);
	}
	
	.stars-caption {
		
	}

	.hero-button {
		display: block;
		padding: 16px 48px;
		background: transparent;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 50px;
		line-height: 1;
		text-decoration: none;
		transition: all 0.5s;
	}

.hero-button:hover {
	background: #fff;
	color: #000;
}

#cta {
	background-image: url('https://estedentica.marketkings.org/wp-content/uploads/2025/04/testowe.png');
	background-size: cover;
	background-position: center center;
}

#cta .wpcf7-form .form-flex {
	display: flex;
	width: 100%;
	gap: 16px;
	flex-wrap: wrap;
}

#cta .input-wrapper {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0; /* ważne, żeby flex: działało proporcjonalnie */
  min-width: 0;
}

#cta .input-wrapper.i1x {
  flex: 1;
}

#cta .input-wrapper.i2x {
  flex: 2;
}

#cta .input-wrapper span {
	width: 100%;
	display: block;
}

#cta input {
	background: transparent;
	color: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 50px;
	height: 50px;
	line-height: 50px;
	padding: 8px 16px;
	width: 100%;
}

#cta input::placeholder {
	color: #dcdcdc;
}

#cta select {
  background: transparent;
  color: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 50px;
  height: 50px;
  line-height: 50px;
  padding: 8px 16px;
  width: 100%;
  appearance: none;       /* wyłącza natywny styl systemowy */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px; /* żeby strzałka się zmieściła */
}

#cta select, #cta input[type="submit"] {
	display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

#cta input[type="submit"] {
	background: var(--primary-color);
	color: #000;
	border: 1px solid var(--primary-color);
}

#cta input[type="submit"]:hover {
	background: transparent;
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	color: #fff;
}

.wpcf7-spinner {
	display: none!important;
}

.korzysci .flex-column img {
	margin-bottom: 24px;
}

.korzysci .flex-column .title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 16px;
}

@media all and (max-width: 768px) {
	.hero-title {
		font-size: 60px;
	}
	
	.hero-button {
		order: 2;
		width: 100%;
		text-align: center;
	}
	
	#cta .layout-column .section-title-wrapper {
		gap: 16px;
	}
	
	#cta .wpcf7-form .form-flex {
		flex-direction: column;
	}
}
	
	
/* COMPONENTS */
	
	.slider-arrows {
		
	}
	
	.slider-arrows .arrow {
		
	}
	
	.list-benefits {
		display: flex;
		flex-direction: column;
		gap: 16px;
		list-style-type: disc;
		padding-left: 0;
		list-style-position: inside;
	}
	
	.list-benefits li {
		font-size: 16px;
		font-family: var(--font-secondary);
		font-weight: 600;
		line-height: 1.5;
	}

.span-with-icon {
	display: flex;
	align-items: center;
	gap: 8px;
}

.iconsize-18 {
	font-size: 18px;
}






/* Misc */

#uslugi .section-title-wrapper {
	display: flex;
	flex-direction: row;
}

#opinie .ti-widget.ti-goog .ti-review-item>.ti-inner, .ti-widget.ti-goog .ti-load-more-reviews-container .ti-load-more-reviews-button {
	background-color: transparent!important;
	color: #fff;
	border-color: #575757!important;
	border-radius: 0!important;
}

#usluga-wstep .section-content-wrapper {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

#usluga-wstep p {
	margin-bottom: 0;
}

#usluga-wstep ul, #usluga-wstep li {
	list-style-type: number;
	list-style-position: inside;
	line-height: 2;
	font-weight: 600;
}

#usluga-wstep .problemy-tytul {
	text-transform: uppercase;
	font-weight: 600;
	display: block;
	width: 100%;
	margin-bottom: 8px;
}

#usluga-wstep .problemy-lista {
	font-size: 16px;
	color: #aaa;
	line-height: 1.5;
}

#usluga-dlaczego-warto .section-small-title, #usluga-faq .section-small-title {
	margin-top: 0;
	margin-bottom: 24px;
}

#usluga-jak-wyglada .etapy-leczenia {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

#usluga-jak-wyglada .layout-2-columns .col .section-title-wrapper {
	margin-bottom: 48px;
}

#usluga-jak-wyglada .etap-leczenia {
	display: flex;
	flex-direction: row;
	gap: 48px;
}

#usluga-jak-wyglada .etap-leczenia .zawartosc {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#usluga-jak-wyglada .etapy-leczenia .tytul span {
	font-size: 24px;
	font-weight: 600;
}

#usluga-jak-wyglada .etapy-leczenia .ikonka span {
	font-size: 72px;
	line-height: 1;
	font-weight: 700;
}

#lista-lekarzy .layout-column, #kontakt-intro .layout-column {
	gap: 48px;
}

#lista-lekarzy .lekarz {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

#lista-lekarzy .section-small-title {
	line-height: 1;
}

#profil-lekarza .section-inner, #page-o-nas .section-inner {
		display: flex;
		flex-direction: column;
		gap: 80px;
	}
	
	#profil-lekarza .layout-column .section-title-wrapper, #page-o-nas .layout-column .section-title-wrapper, #main-blog .layout-column .section-title-wrapper {
		gap: 12px;
	}
	
	#profil-lekarza .layout-2-columns .section-subtitle {
		color: #E0E0E0;
		text-transform: uppercase;
	}

	#profil-lekarza .layout-2-columns .section-caption {
		color: var(--primary-color);
		text-transform: uppercase;
	}

#page-o-nas .layout-2-columns .col {
	display: flex;
	flex-direction: column;
	gap: 200px;
}

#page-o-nas .section-small-title {
	margin: 48px 0 24px 0;
}

#pierwsza-wizyta-intro .section-inner {
	padding-bottom: 0;
}

#jak-wyglada-klinika .section-inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

#jak-wyglada-klinika .section-small-title {
	margin-top: 0;
	margin-bottom: 0;
}

#kontakt-intro .layout-column .section-title-wrapper, #metamorfozy-intro .layout-column .section-title-wrapper {
	gap: 12px;
}

#kontakt-3-kolumny .col {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#kontakt-formularz .section-small-title {
	margin-bottom: 0;
}

#kontakt-formularz .col {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

#kontakt-3-kolumny i {
	font-size: 32px;
}

.kontakt-col-title {
	font-size: 32px;
	font-weight: 600;
}

@media all and (max-width: 768px) {
	#uslugi .splide__arrows {
		display: none;
	}
	
	.usluga_mobile {
		margin-bottom: 48px;
	}
	
	.usluga_mobile_inner {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	
	#lekarze .section-inner {
		padding-bottom: 16px;
	}
	
	#metamorfozy .layout-2-columns {
		gap: 16px;
	}
	
	#metamorfozy-intro .section-inner {
		padding-bottom: 0;
	}
	
	#metamorfoza-1 .section-inner, #metamorfoza-2 .section-inner {
		padding-bottom: 0;
	}
	
	#profil-lekarza .section-inner, #page-o-nas .section-inner {
		gap: 48px;
	}
	
	#page-o-nas .layout-column {
		text-align: left;
		align-items: flex-start;
	}
	
	#page-o-nas .layout-2-columns .col {
		gap: 48px;
	}
	
	#usluga-dlaczego-warto .layout-2-columns {
		gap: 0;
	}
	
	#usluga-wstep .section-inner {
		padding-bottom: 0;
	}
	
	#usluga-zdjecie-full .section-inner {
		padding: 0 16px;
	}
	
	.etap-leczenia {
		gap: 24px;
	}
	
	#usluga-jak-wyglada .etapy-leczenia .ikonka span {
		font-size: 48px;
	}
	
	#jak-wyglada-klinika .section-inner {
		gap: 0;
	}
}

@media all and (min-width: 769px) {
	#page-o-nas .mt400 {
		margin-top: 400px;
	}
	
	.page-usluga h3.section-small-title {
		font-size: 48px;
		margin: 12px 0;
	}
}