/*
 * Reservation pages — intro + perks + iframe wrapper.
 */

.teledom-design .reservation-intro {
	max-width: 780px;
	margin: 0 auto 50px;
	text-align: center;
	color: var(--ink-2);
	font-size: 17px;
	line-height: 1.7;
}

.teledom-design .reservation-perks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 60px;
}

.teledom-design .reservation-perks .perk {
	padding: 30px;
	background: var(--paper);
	border: 1px solid var(--line-light);
	border-radius: var(--r-lg);
	text-align: center;
}

.teledom-design .reservation-perks .ico {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--paper-2);
	display: grid;
	place-items: center;
	margin: 0 auto 18px;
	color: var(--green);
}

.teledom-design .reservation-perks h4 {
	font-size: 18px;
	margin: 0 0 8px;
	font-family: var(--display);
	font-weight: 500;
}

.teledom-design .reservation-perks p {
	margin: 0;
	font-size: 14px;
	color: var(--muted);
}

.teledom-design .iframe-wrap {
	background: var(--paper);
	border: 1px solid var(--line-light);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.teledom-design .iframe-wrap iframe {
	width: 100%;
	height: 760px;
	border: 0;
	display: block;
}

/* Previo booking widget on /rezervacia/ — height is owned by the
   embed script (which posts resize messages back to the parent). The
   inline element style starts at 760 px and grows / shrinks with the
   widget content; a generic CSS height would override those updates
   and either truncate the calendar or leave dead whitespace below. */
.teledom-design .iframe-wrap--previo {
	min-height: 760px;
}

.teledom-design .iframe-wrap--previo iframe,
.teledom-design .iframe-wrap--previo #previo-booking-iframe {
	height: auto;
	min-height: 760px;
	transition: height 0.25s ease;
}

@media (max-width: 1100px) {
	.teledom-design .reservation-perks { grid-template-columns: 1fr; gap: 14px; }
	.teledom-design .iframe-wrap iframe { height: 640px; }
	.teledom-design .iframe-wrap--previo iframe,
	.teledom-design .iframe-wrap--previo #previo-booking-iframe {
		height: auto;
		min-height: 640px;
	}
}

/* Teledom Orders booking widget on /services/. The companion script
   (iframe-embed.js) auto-resizes the iframe via postMessage; min-height
   here is just the initial render value to prevent layout shift before
   the first resize message arrives.

   Visual choice (vs. .iframe-wrap--previo): no rounded corners, no
   visible border — the form is the page's primary content here, not a
   "panel inside a page", so we let it sit flush.

   The form's own html/body background is set per-partner in the iframe
   document (via TeleDom → Partners → background_color column on the
   bookly.hotelteledom.sk admin) and we can't restyle it from here.
   Match the section background to whatever the partner row is set to
   so the seam is invisible. Currently: #f7f4ed (the design-system
   `--paper` token). If the partner background is changed via admin,
   update this value to match. */
.teledom-design .section-iframe {
	padding: 80px 0;             /* moved out of inline style for class-based mobile overrides */
	background: #f7f4ed;
}

/* By default, .section-iframe uses the standard design-system container
   width (~1326px) so the form lines up with the rest of the page.
   Add `.section-iframe--wide` to widen the container to 1500px — used on
   pages where the form IS the primary content (e.g. /services/) and there
   are no other narrow blocks above or below to align against. */
.teledom-design .section-iframe--wide > .container {
	max-width: 1500px;
	padding-left: 20px;
	padding-right: 20px;
}

.teledom-design .iframe-wrap--teledom {
	min-height: 900px;
	height: auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: #f7f4ed;
	overflow: hidden;
}

.teledom-design .iframe-wrap--teledom #teledom-wrapper {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.teledom-design .iframe-wrap--teledom iframe,
.teledom-design .iframe-wrap--teledom #teledom-form {
	width: 100%;
	max-width: 100%;
	min-height: 900px;
	height: auto;
	border: 0;
	display: block;
	box-sizing: border-box;
	transition: height 0.25s ease;
}

@media (max-width: 1100px) {
	.teledom-design .iframe-wrap--teledom,
	.teledom-design .iframe-wrap--teledom iframe,
	.teledom-design .iframe-wrap--teledom #teledom-form {
		min-height: 760px;
	}
}