/*
 * [rezdy_booking_tabs] widget styling.
 *
 * The desktop tabs use a pure-CSS radio-input technique (no JavaScript):
 * three hidden radio inputs, three <label>s, three panels — all in a
 * fixed order — so :nth-of-type + the ~ sibling combinator can show the
 * right panel and highlight the right label purely structurally. This
 * means the same CSS works for any number of widget instances on a page
 * without needing per-instance generated styles.
 *
 * Values come from var(--rezdy-tabsxxx, fallback) custom properties,
 * supplied by Rezdy_Tabs_Styles::inline_css().
 *
 * !important is used throughout on the typography/colour declarations
 * below. This isn't a habit — it's required. Themes like Enfold apply
 * their own CSS not just to bare tags (<label>, <h5>) but to compound,
 * ID-anchored descendant selectors such as `#top label span`. An ID
 * selector always outranks any number of classes in CSS specificity
 * math, no matter how many classes we chain (confirmed directly via
 * this site's own devtools: our 7-class selector loses to Enfold's
 * 1-ID-plus-2-tags selector every time). There is no selector we can
 * write on our own classes that will ever out-rank an ID. !important is
 * the correct, standard escape hatch for exactly this situation — it's
 * applied only to our own uniquely-prefixed .rezdy-tabs-*/.rezdy-tab-*
 * classes, so it can't affect anything else on the site.
 */

.rezdy-tabs-widget * {
	box-sizing: border-box;
}

/*
 * ---- Heading above the tabs ("BOOK TOUR" eyebrow + product name) ----
 * Shown on BOTH desktop and mobile (unlike the tabs/mobile-text below,
 * which swap entirely at the 640px breakpoint) — so its alignment is
 * set independently for each: --rezdy-tabsheading-align-desktop applies
 * above 640px, --rezdy-tabsheading-align-mobile takes over below it.
 * The product name line additionally has its own show/hide switch per
 * breakpoint, independent of the eyebrow line.
 */

.rezdy-tabs-heading {
	text-align: var(--rezdy-tabsheading-align-desktop, left);
	margin: 0 0 1em;
}

.rezdy-tabs-heading-eyebrow {
	display: block !important;
	font-family: var(--rezdy-tabsheading-eyebrow-font, 'Work Sans', sans-serif) !important;
	font-size: var(--rezdy-tabsheading-eyebrow-size, 16px) !important;
	font-weight: var(--rezdy-tabsheading-eyebrow-weight, 900) !important;
	color: var(--rezdy-tabsheading-eyebrow-color, #111111) !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.3;
	margin: 0 0 0.2em;
}

.rezdy-tabs-heading-product {
	display: var(--rezdy-tabsheading-product-display-desktop, block) !important;
	font-family: var(--rezdy-tabsheading-product-font, 'Raleway', sans-serif) !important;
	font-size: var(--rezdy-tabsheading-product-size, 24px) !important;
	font-weight: var(--rezdy-tabsheading-product-weight, 700) !important;
	color: var(--rezdy-tabsheading-product-color, #222222) !important;
	line-height: 1.3;
	margin: 0;
}

@media (max-width: 640px) {
	.rezdy-tabs-heading {
		text-align: var(--rezdy-tabsheading-align-mobile, center);
	}
	.rezdy-tabs-heading-product {
		display: var(--rezdy-tabsheading-product-display-mobile, block) !important;
	}
}

/* ---- Desktop tabs (hidden entirely on mobile, see bottom of file) ---- */

.rezdy-tabs-widget .rezdy-tab-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.rezdy-tab-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	border-bottom: 2px solid #eef2f3;
	margin-bottom: 1.6em;
}

/*
 * The <label> element itself is left almost bare on purpose (just the
 * click-target padding + cursor) — some themes (Enfold in particular)
 * apply high-specificity CSS straight to the generic <label> tag (and,
 * as it turns out, straight to `#top label span` too — see the file
 * header note on !important above). All the actual text styling instead
 * lives on the nested .rezdy-tab-label-text <span>, with !important
 * backing it up so nothing the theme targets can ever win.
 */
.rezdy-tab-label {
	padding: 0 0 0.85em;
	cursor: pointer;
}

.rezdy-tab-label-text {
	display: inline-block !important;
	font-family: var(--rezdy-tabslabel-font, 'Raleway', sans-serif) !important;
	font-size: var(--rezdy-tabslabel-size, 14px) !important;
	font-weight: var(--rezdy-tabslabel-weight, 800) !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--rezdy-tabslabel-inactive, #9aa7ab) !important;
	transition: color 0.15s ease;
}

.rezdy-tab-panel {
	display: none;
	font-family: var(--rezdy-tabscontent-font, 'Raleway', sans-serif) !important;
	font-size: var(--rezdy-tabscontent-size, 16px) !important;
	font-weight: var(--rezdy-tabscontent-weight, 400) !important;
	color: var(--rezdy-tabscontent-color, #4a5559) !important;
	text-align: var(--rezdy-tabscontent-align, left) !important;
	line-height: 1.7;
}

.rezdy-tab-panel p:first-child { margin-top: 0; }
.rezdy-tab-panel a { color: var(--rezdy-tabslabel-active, #00adbc) !important; font-weight: 600; }

/*
 * Tab 1 (index 1) active state + panel visibility. Only the text colour
 * changes on the active tab — no border/underline indicator under the
 * label by design; the thin grey line under the whole tab bar, above,
 * is the only separator line kept. !important here is what was actually
 * missing before — without it, Enfold's #top label span rule silently
 * won even though this selector already loads after it and is far more
 * specific by class-count; an ID beats any number of classes regardless
 * of load order, so nothing short of !important fixes it.
 */
.rezdy-tab-radio:nth-of-type(1):checked ~ .rezdy-tab-bar .rezdy-tab-label:nth-of-type(1) .rezdy-tab-label-text,
.rezdy-tab-radio:nth-of-type(2):checked ~ .rezdy-tab-bar .rezdy-tab-label:nth-of-type(2) .rezdy-tab-label-text,
.rezdy-tab-radio:nth-of-type(3):checked ~ .rezdy-tab-bar .rezdy-tab-label:nth-of-type(3) .rezdy-tab-label-text {
	color: var(--rezdy-tabslabel-active, #00adbc) !important;
}

.rezdy-tab-radio:nth-of-type(1):checked ~ .rezdy-tab-panels .rezdy-tab-panel:nth-of-type(1),
.rezdy-tab-radio:nth-of-type(2):checked ~ .rezdy-tab-panels .rezdy-tab-panel:nth-of-type(2),
.rezdy-tab-radio:nth-of-type(3):checked ~ .rezdy-tab-panels .rezdy-tab-panel:nth-of-type(3) {
	display: block;
}

/* ---- Deposit / payment callout (inside "Making Your Booking") ---- */

.rezdy-tabs-deposit-callout {
	background: var(--rezdy-tabsdeposit-bg, #f5f9fa) !important;
	color: var(--rezdy-tabsdeposit-color, #16323a) !important;
	border-left: 3px solid var(--rezdy-tabsdeposit-accent, #00adbc) !important;
	border-radius: 0 6px 6px 0;
	padding: 0.9em 1.1em;
	margin: 0 0 1.2em;
	font-size: var(--rezdy-tabsdeposit-size, 15px) !important;
	font-weight: var(--rezdy-tabsdeposit-weight, 400) !important;
	line-height: 1.6;
}

.rezdy-tabs-deposit-callout strong {
	color: var(--rezdy-tabsdeposit-accent, #00adbc) !important;
	font-size: 1.05em;
	font-weight: 700 !important;
}

/* ---- "Meeting Travellers" optional image-left layout ---- */

.rezdy-tabs-panel-with-image {
	display: flex;
	flex-wrap: wrap;
	gap: 1.8em;
	align-items: flex-start;
}

.rezdy-tabs-meet-image-col {
	flex: 0 0 260px;
	max-width: 260px;
}

.rezdy-tabs-meet-image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.rezdy-tabs-meet-image-link {
	display: block;
}

.rezdy-tabs-meet-text-col {
	flex: 1 1 320px;
}

/* ---- Mobile: single centred text block replaces the tabs entirely ---- */

.rezdy-tabs-mobile-only {
	display: none;
}

@media (max-width: 640px) {
	.rezdy-tabs-desktop-only {
		display: none;
	}
	.rezdy-tabs-mobile-only {
		display: block;
		text-align: center;
		font-family: var(--rezdy-tabscontent-font, 'Raleway', sans-serif) !important;
		font-size: var(--rezdy-tabscontent-size, 16px) !important;
		color: var(--rezdy-tabscontent-color, #4a5559) !important;
		line-height: 1.7;
	}
	.rezdy-tabs-mobile-only p:first-child { margin-top: 0; }
}