/* ==========================================================================
   ARSpneu — Booking Section & AKH Datebooking Integration
   5. Fázis: Foglalási rendszer Elementor integráció
   ========================================================================== */

/* --------------------------------------------------------------------------
   Booking Section Layout
   -------------------------------------------------------------------------- */
.dt-booking-section {
	background-color: var(--dt-color-bg);
	padding: var(--dt-space-3xl) var(--dt-space-xl);
}

.dt-booking-section__inner {
	max-width: var(--dt-container-max);
	margin: 0 auto;
}

/* Section header */
.dt-booking-section__header {
	text-align: center;
	margin-bottom: var(--dt-space-2xl);
}

.dt-booking-section__title {
	font-family: var(--dt-font-heading);
	font-size: var(--dt-font-size-3xl);
	font-weight: 700;
	color: var(--dt-color-text-heading);
	margin: 0 0 var(--dt-space-sm);
}

.dt-booking-section__subtitle {
	font-family: var(--dt-font-body);
	font-size: var(--dt-font-size-md);
	color: var(--dt-color-text-light);
	margin: 0;
}

/* Sites list wrapper */
.dt-booking-section__sites {
	margin-bottom: var(--dt-space-2xl);
}

/* Map wrapper */
.dt-booking-section__map {
	border-radius: var(--dt-radius-lg);
	overflow: hidden;
	box-shadow: var(--dt-shadow-md);
}

/* --------------------------------------------------------------------------
   AKH Sites List — Kép (5) referencia design
   Horizontális kártya: ikon balra, név + cím + gomb jobbra, 2 oszlop
   -------------------------------------------------------------------------- */
.dt-booking-section .akh-sites-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--dt-space-lg);
}

.dt-booking-section .akh-site-card {
	background: var(--dt-color-bg-white);
	border-radius: var(--dt-radius-lg);
	box-shadow: var(--dt-shadow-md);
	border: 2px solid transparent;
	transition: all var(--dt-transition-base);
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

.dt-booking-section .akh-site-card:hover {
	box-shadow: var(--dt-shadow-xl);
	border-color: var(--dt-color-primary);
	transform: translateY(-4px);
}

/* Szerviz ikon — jobb oldali blokk */
.dt-booking-section .akh-site-card .akh-site-card__icon {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	min-width: 140px;
	background-color: var(--dt-color-bg);
	color: var(--dt-color-primary);
	flex-shrink: 0;
}

.dt-booking-section .akh-site-card .akh-site-card__icon svg,
.dt-booking-section .akh-site-card .akh-site-card__icon img {
	width: 80px;
	height: 80px;
	object-fit: contain;
}

/* Bal oldali tartalom */
.dt-booking-section .akh-site-card .akh-site-card__body {
	order: 1;
	display: flex;
	flex-direction: column;
	padding: var(--dt-space-lg);
	flex: 1;
	min-width: 0;
}

.dt-booking-section .akh-site-card .akh-site-header {
	display: flex;
	flex-direction: column;
	gap: var(--dt-space-xs);
	margin-bottom: var(--dt-space-md);
}

.dt-booking-section .akh-site-card .akh-site-name {
	font-family: var(--dt-font-heading);
	font-size: var(--dt-font-size-base);
	font-weight: 700;
	color: var(--dt-color-text-heading);
	margin: 0;
}

/* Cím sor pin ikonnal */
.dt-booking-section .akh-site-card .akh-site-address {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--dt-font-body);
	font-size: var(--dt-font-size-sm);
	color: var(--dt-color-text-light);
	margin: 0;
	line-height: 1.4;
}

.dt-booking-section .akh-site-card .akh-site-address__pin {
	flex-shrink: 0;
	color: var(--dt-color-primary);
}

.dt-booking-section .akh-site-card .akh-site-footer {
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   AKH Sites List — Compact (térkép alatti lista)
   Ugyanaz a horizontális layout, kisebb méretben
   -------------------------------------------------------------------------- */
.dt-booking-section .akh-sites-list.akh-sites-list--compact {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dt-space-md);
}

.dt-booking-section .akh-site-card.akh-site-card--compact {
	background: var(--dt-color-bg-white);
	border-radius: var(--dt-radius-md);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--dt-color-border, #e5e7eb);
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
	overflow: hidden;
	transition: all var(--dt-transition-base);
	padding: 0;
}

.dt-booking-section .akh-site-card.akh-site-card--compact:hover {
	box-shadow: var(--dt-shadow-md);
	border-color: var(--dt-color-primary);
	transform: none;
	background: var(--dt-color-bg-white);
}

.dt-booking-section .akh-site-card--compact .akh-site-card__icon {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	min-width: 90px;
	min-height: 90px;
	align-self: stretch;
	background-color: var(--dt-color-bg);
	color: var(--dt-color-primary);
	flex-shrink: 0;
}

.dt-booking-section .akh-site-card--compact .akh-site-card__icon svg,
.dt-booking-section .akh-site-card--compact .akh-site-card__icon img {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.dt-booking-section .akh-site-card--compact .akh-site-card__body {
	order: 1;
	display: flex;
	flex-direction: column;
	padding: var(--dt-space-sm) var(--dt-space-md);
	flex: 1;
	min-width: 0;
}

.dt-booking-section .akh-site-card--compact .akh-site-header {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: var(--dt-space-xs);
}

.dt-booking-section .akh-site-card--compact .akh-site-name {
	font-family: var(--dt-font-heading);
	font-size: var(--dt-font-size-sm);
	font-weight: 700;
	color: var(--dt-color-text-heading);
	margin: 0;
}

.dt-booking-section .akh-site-card--compact .akh-site-address {
	display: flex;
	align-items: center;
	gap: 0.3em;
	font-family: var(--dt-font-body);
	font-size: var(--dt-font-size-xs);
	color: var(--dt-color-text-light);
	margin: 0;
	line-height: 1.3;
}

.dt-booking-section .akh-site-card--compact .akh-site-address__pin {
	flex-shrink: 0;
	color: var(--dt-color-primary);
}

.dt-booking-section .akh-site-card--compact .akh-booking-btn--small {
	align-self: flex-start;
	font-size: var(--dt-font-size-xs);
	padding: 0.4rem 1rem;
}

/* Compact responsive */
@media (max-width: 1024px) {
	.dt-booking-section .akh-sites-list.akh-sites-list--compact {
		grid-template-columns: repeat(2, 1fr);
	}

	.dt-booking-section .akh-site-card--compact .akh-site-card__icon {
		width: 70px;
		min-width: 70px;
	}

	.dt-booking-section .akh-site-card--compact .akh-site-card__icon svg,
	.dt-booking-section .akh-site-card--compact .akh-site-card__icon img {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 767px) {
	.dt-booking-section .akh-sites-list.akh-sites-list--compact {
		grid-template-columns: 1fr;
	}
}

/* AKH Booking Button — téma stílussal */
.dt-booking-section .akh-booking-btn,
.akh-booking-btn {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-text-heading);
	font-family: var(--dt-font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--dt-letter-spacing-wide);
	border: none;
	border-radius: var(--dt-radius-md);
	padding: 0.65rem 1.5rem;
	cursor: pointer;
	transition: all var(--dt-transition-base);
	font-size: var(--dt-font-size-sm);
}

.dt-booking-section .akh-booking-btn:hover,
.akh-booking-btn:hover {
	background-color: var(--dt-color-primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--dt-shadow-md);
}

/* --------------------------------------------------------------------------
   AKH Modal — Téma színekkel harmonizálva
   -------------------------------------------------------------------------- */

/* Modal header */
.akh-modal-header {
	font-family: var(--dt-font-heading);
}

.akh-modal-title {
	font-family: var(--dt-font-heading);
	font-weight: 700;
	color: var(--dt-color-text-heading);
}

/* Modal steps */
.akh-modal-steps .akh-step {
	font-family: var(--dt-font-heading);
	font-weight: 600;
	font-size: var(--dt-font-size-sm);
}

.akh-modal-steps .akh-step.is-active {
	color: var(--dt-color-primary);
	border-color: var(--dt-color-primary);
}

.akh-modal-steps .akh-step.is-completed {
	color: var(--dt-color-primary);
}

/* Modal body */
.akh-modal-body {
	font-family: var(--dt-font-body);
}

/* Modal buttons */
.akh-modal-footer .akh-btn {
	font-family: var(--dt-font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--dt-letter-spacing-wide);
	border-radius: var(--dt-radius-md);
	transition: all var(--dt-transition-base);
}

/* Modal close button */
.akh-modal-close {
	transition: all var(--dt-transition-fast);
}

.akh-modal-close:hover {
	transform: scale(1.1);
}

/* Modal container — smoother border radius */
.akh-modal-container {
	border-radius: var(--dt-radius-xl);
	font-family: var(--dt-font-body);
}

/* --------------------------------------------------------------------------
   Checkout Page — Téma harmonizáció
   -------------------------------------------------------------------------- */
.dt-checkout-page {
	max-width: var(--dt-container-max);
	margin: 0 auto;
	padding: var(--dt-space-2xl) var(--dt-space-xl);
}

.dt-checkout-page h1,
.dt-checkout-page h2 {
	font-family: var(--dt-font-heading);
	color: var(--dt-color-text-heading);
}

/* Checkout form inputs */
.dt-checkout-page input[type="text"],
.dt-checkout-page input[type="email"],
.dt-checkout-page input[type="tel"],
.dt-checkout-page select,
.dt-checkout-page textarea {
	font-family: var(--dt-font-body);
	border-radius: var(--dt-radius-md);
	border: 1px solid var(--dt-color-border);
	padding: 0.625rem 0.875rem;
	transition: border-color var(--dt-transition-fast);
}

.dt-checkout-page input:focus,
.dt-checkout-page select:focus,
.dt-checkout-page textarea:focus {
	border-color: var(--dt-color-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 213, 8, 0.2);
}

/* Checkout submit button */
.dt-checkout-page .akh-btn,
.dt-checkout-page button[type="submit"] {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-text-heading);
	font-family: var(--dt-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	border-radius: var(--dt-radius-md);
	padding: 0.875rem 2rem;
	transition: all var(--dt-transition-base);
}

.dt-checkout-page .akh-btn:hover,
.dt-checkout-page button[type="submit"]:hover {
	background-color: var(--dt-color-primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--dt-shadow-md);
}

/* --------------------------------------------------------------------------
   Thank You Page
   -------------------------------------------------------------------------- */
.dt-thankyou-page {
	max-width: 700px;
	margin: 0 auto;
	padding: var(--dt-space-3xl) var(--dt-space-xl);
	text-align: center;
}

.dt-thankyou-page h1 {
	font-family: var(--dt-font-heading);
	color: var(--dt-color-text-heading);
	margin-bottom: var(--dt-space-md);
}

.dt-thankyou-page p {
	color: var(--dt-color-text-light);
	font-size: var(--dt-font-size-md);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Tablet */
@media (max-width: 1024px) {
	.dt-booking-section {
		padding: var(--dt-space-2xl) var(--dt-space-lg);
	}

	.dt-booking-section .akh-site-card .akh-site-card__icon {
		width: 120px;
		min-width: 120px;
	}

	.dt-booking-section .akh-site-card .akh-site-card__icon svg,
	.dt-booking-section .akh-site-card .akh-site-card__icon img {
		width: 70px;
		height: 70px;
	}

	.dt-booking-section__map {
		height: 350px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.dt-booking-section {
		padding: var(--dt-space-2xl) var(--dt-space-md);
	}

	.dt-booking-section__title {
		font-size: var(--dt-font-size-2xl);
	}

	.dt-booking-section .akh-sites-list {
		grid-template-columns: 1fr;
		gap: var(--dt-space-md);
	}

	.dt-booking-section .akh-site-card .akh-site-card__icon {
		width: 100px;
		min-width: 100px;
	}

	.dt-booking-section .akh-site-card .akh-site-card__icon svg,
	.dt-booking-section .akh-site-card .akh-site-card__icon img {
		width: 60px;
		height: 60px;
	}

	.dt-booking-section__map {
		height: 280px;
	}

	.dt-checkout-page,
	.dt-thankyou-page {
		padding: var(--dt-space-xl) var(--dt-space-md);
	}

	.dt-checkout-page input,
	.dt-checkout-page select,
	.dt-checkout-page textarea {
		font-size: 16px; /* Prevent iOS zoom on focus */
	}
}

/* Small mobile */
@media (max-width: 480px) {
	.dt-booking-section .akh-booking-btn {
		width: 100%;
		justify-content: center;
	}
}