/**
 * IABT Tabs Shell — shared tab navigation styles
 * Used by: Programme Tabs, Accommodation Tabs
 * Version: 1.0.0
 *
 * This file contains ONLY the shell (header + nav + pane base).
 * Widget-specific content (grids, cards, banners) belongs in each widget's own stylesheet.
 */

/* =================================
   CSS Variables — aliased from global --iabt-* palette
================================= */
:root {
	--iabt-tabs-primary: var(--iabt-primary, #0b3b79);
	--iabt-tabs-accent: var(--iabt-accent, #19c28d);
	--iabt-tabs-bg-soft: var(--iabt-bg-soft, hsl(216, 45%, 98%));
	--iabt-tabs-foreground: var(--iabt-text-primary, #0f1729);
	--iabt-tabs-muted: #64748b;
	--iabt-tabs-border: #e2e8f0;
}

/* =================================
   Section Header
================================= */
.iabt-tabs-section-header {
	text-align: center;
}

.iabt-tabs-section-title {
	color: var(--iabt-text-primary);
	margin: 0;
}

.iabt-tabs-section-subtitle {
	font-size: var(--iabt-text-base);
	font-weight: var(--iabt-font-regular);
	color: var(--iabt-text-secondary);
	line-height: var(--iabt-line-height-body);
	margin: 0;
}

.iabt-tabs-section-header.has-subtitle .iabt-tabs-section-title {
	margin-bottom: 12px;
}

.iabt-tabs-section-header.has-subtitle .iabt-tabs-section-subtitle {
	margin: 0 0 56px 0;
}

.iabt-tabs-section-header.no-subtitle .iabt-tabs-section-title {
	margin-bottom: 56px;
}

/* =================================
   Tab Navigation Container
================================= */
.iabt-tabs-nav {
	display: flex;
	align-items: stretch;
	gap: 0;
	position: relative;
	border-bottom: 1px solid var(--iabt-border);
	margin-bottom: 40px;
}

/* =================================
   Scroll Arrows
================================= */
.iabt-tabs-arrow {
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	background: transparent;
	border: none;
	color: var(--iabt-tabs-muted);
	font-size: 18px;
	transition: color 0.2s ease;
}

.iabt-tabs-arrow:hover {
	color: var(--iabt-tabs-primary);
}

.iabt-tabs-arrow svg {
	width: 20px;
	height: 20px;
}

.iabt-tabs-arrow--left {
	margin-right: 8px;
}

.iabt-tabs-arrow--right {
	margin-left: 8px;
}

.iabt-tabs-arrow.is-disabled {
	opacity: 0.35;
	cursor: default;
}

/* =================================
   Scroll Wrapper
================================= */
.iabt-tabs-scroll-wrapper {
	position: relative;
	overflow: hidden;
	flex: 1;
}

.iabt-tabs-scroll {
	display: flex;
	align-items: center;
	gap: 0;
	white-space: nowrap;
	justify-content: center;
	overflow-x: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

.iabt-tabs-scroll.is-overflowing {
	justify-content: flex-start !important;
}

.iabt-tabs-scroll::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

/* =================================
   Tab Buttons
================================= */
.iabt-tab-button {
	position: relative;
	white-space: nowrap;
	padding: 14px 16px 12px 16px;
	border: none;
	background: transparent;
	color: var(--iabt-tabs-muted);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-align: center;
	border-radius: 0;
	transition:
		color 0.2s ease,
		border-color 0.2s ease;
	outline: none;
}

/* Tab Dividers */
[data-show-dividers='yes'] .iabt-tab-button + .iabt-tab-button::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 14px;
	border-left: 1px solid var(--iabt-tabs-border);
}

/* Tab Hover */
.iabt-tab-button:hover {
	color: var(--iabt-tabs-primary);
}

/* Tab Active State — Underline Style */
[data-tab-style='underline'] .iabt-tab-button.active {
	color: var(--iabt-tabs-primary);
	font-weight: 600;
	background: transparent;
}

[data-tab-style='underline'] .iabt-tab-button.active::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 2px;
	background: var(--iabt-primary);
	border-radius: 2px;
}

/* Tab Active State — Background Style */
[data-tab-style='background'] .iabt-tab-button.active {
	color: #ffffff;
	background-color: var(--iabt-tabs-primary);
	font-weight: 600;
	border-radius: 6px;
}

/* Tab Active State — Pill Style */
.iabt-tabs-nav[data-tab-style='pill'] {
	border-bottom: none;
	background: var(--iabt-bg-soft);
	border-radius: var(--iabt-radius-pill);
	padding: 4px;
	margin-bottom: 32px;
}

[data-tab-style='pill'] .iabt-tab-button {
	border-radius: var(--iabt-radius-pill);
	padding: 10px 20px;
	transition:
		color 0.25s ease,
		background 0.25s ease,
		box-shadow 0.25s ease;
}

[data-tab-style='pill'] .iabt-tab-button.active {
	color: var(--iabt-tabs-foreground);
	font-weight: 600;
	background: var(--iabt-bg-main);
	box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.08);
	border-radius: var(--iabt-radius-pill);
}

[data-tab-style='pill'] .iabt-tab-button:hover:not(.active) {
	color: var(--iabt-tabs-primary);
	background: hsla(0, 0%, 100%, 0.5);
}

/* Tab Focus */
.iabt-tab-button:focus-visible {
	outline: 2px solid var(--iabt-tabs-primary);
	outline-offset: 2px;
}

/* =================================
   Current Tab Title
================================= */
.iabt-tabs-current-title {
	text-align: center;
	color: var(--iabt-primary);
	font-size: var(--iabt-h2);
	font-weight: var(--iabt-font-semibold);
	line-height: var(--iabt-line-height-heading);
	margin: 0 0 32px 0;
}

/* =================================
   Tab Pane Base
================================= */
.iabt-tab-pane {
	display: none;
	animation: iabtTabsFadeIn 0.3s ease-in-out;
}

.iabt-tab-pane.active {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

@keyframes iabtTabsFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =================================
   Responsive — Tablet Large (≤1024px)
================================= */
@media (max-width: 1024px) {
	.iabt-tabs-section-subtitle {
		font-size: var(--iabt-text-base);
	}

	.iabt-tabs-section-header.has-subtitle .iabt-tabs-section-subtitle,
	.iabt-tabs-section-header.no-subtitle .iabt-tabs-section-title {
		margin-bottom: 40px;
	}

	.iabt-tab-pane.active {
		gap: 48px;
	}
}

/* =================================
   Responsive — Tablet Small (≤768px)
================================= */
@media (max-width: 768px) {
	.iabt-tabs-current-title {
		font-size: var(--iabt-text-lg);
		margin-bottom: 24px;
	}

	.iabt-tabs-section-subtitle {
		font-size: var(--iabt-text-base);
	}

	.iabt-tabs-section-header.has-subtitle .iabt-tabs-section-subtitle,
	.iabt-tabs-section-header.no-subtitle .iabt-tabs-section-title {
		margin-bottom: 32px;
	}

	.iabt-tabs-nav-container {
		margin-bottom: 32px;
	}

	.iabt-tabs-scroll {
		justify-content: flex-start;
	}

	.iabt-tab-button {
		padding: 12px 14px 10px 14px;
		font-size: 13px;
	}

	.iabt-tab-pane.active {
		gap: 40px;
	}
}

/* =================================
   Responsive — Mobile Small (≤480px)
================================= */
@media (max-width: 480px) {
	.iabt-tabs-current-title {
		font-size: var(--iabt-text-base);
		margin-bottom: 20px;
	}

	.iabt-tabs-section-subtitle {
		font-size: var(--iabt-text-sm);
	}

	.iabt-tabs-section-header.has-subtitle .iabt-tabs-section-subtitle,
	.iabt-tabs-section-header.no-subtitle .iabt-tabs-section-title {
		margin-bottom: 28px;
	}

	.iabt-tab-button {
		padding: 10px 12px 8px 12px;
		font-size: 12px;
	}

	.iabt-tab-pane.active {
		gap: 32px;
	}
}

/* =================================
   Accessibility
================================= */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.iabt-tab-button,
	.iabt-tab-pane {
		transition: none;
		animation: none;
	}
}

/* =================================
   Print Styles
================================= */
@media print {
	.iabt-tabs-nav-container {
		display: none;
	}

	.iabt-tab-pane {
		display: block !important;
	}
}