/*
 Theme Name:   Kutabalitour
 Theme URI:    https://kutabalitour.com
 Description:  Kutabalitour child theme, built on the Astra parent theme.
 Author:       Bali Web Design
 Template:     astra
 Version:      1.1.43
 Text Domain:  kutabalitour
*/

/* Brand tokens — sampled from the logo (logo-kutabalitour.png): sunset
   orange + navy ink + wave blue. Shared with the custom login page. */
:root {
	--kbt-font: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--kbt-ink: #111827;
	--kbt-ink-soft: #374151;
	--kbt-ink-mute: #6B7280;
	--kbt-primary: #E8790E;
	--kbt-primary-dark: #C2630A;
	--kbt-primary-soft: rgba(232, 121, 14, .08);
	--kbt-accent: #0B6FA6;
	--kbt-accent-dark: #08547E;
	--kbt-accent-soft: rgba(11, 111, 166, .08);
	--kbt-whatsapp: #25D366;
	--kbt-sand: #FAF6F0;
	--kbt-sand-soft: #FCF9F5;
	--kbt-surface: #FFFFFF;
	--kbt-line: #E5E7EB;
	--kbt-line-strong: #D1D5DB;
	--kbt-green: #10B981;
	--kbt-green-soft: #ECFDF5;

	/* Segment Specific Tokens */
	--kbt-honeymoon-color: #BE185D;
	--kbt-honeymoon-bg: rgba(190, 24, 93, 0.9);
	--kbt-group-color: #1E40AF;
	--kbt-group-bg: rgba(30, 64, 175, 0.9);
	--kbt-family-color: #D97706;
	--kbt-family-bg: rgba(217, 119, 6, 0.9);

	--kbt-radius: 16px;
	--kbt-radius-sm: 10px;
	--kbt-radius-pill: 9999px;
	--kbt-shadow-xs: 0 1px 3px rgba(0, 0, 0, .05);
	--kbt-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);
	--kbt-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);
	--kbt-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .10), 0 8px 10px -6px rgba(0, 0, 0, .04);
}

body, button, input, select, textarea {
	font-family: var(--kbt-font);
}

/* ==========================================================================
   Front page — native replacement for the old Elementor + JetEngine build.
   Functional/basic styling for now; full visual redesign is a later phase.
   ========================================================================== */

/* Standardized 1.5rem container side padding across site header, body sections & footer */
.ast-container,
.site-header .ast-container,
.site-footer .ast-container,
.main-header-bar .ast-container,
.ast-main-header-wrap .ast-container,
.site-primary-footer-wrap .ast-builder-grid-row,
.site-below-footer-wrap .ast-builder-grid-row,
.ast-builder-grid-row-container {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	box-sizing: border-box !important;
}

/* Homepage & Info Pages Full-Width Setup — Make EVERY section 100% full-width edge-to-edge */
body.home #content > .ast-container,
body.home .site-content > .ast-container,
body.page-template-page-info #content > .ast-container,
body.page-template-page-info .site-content > .ast-container,
body.page-template-page-info-php #content > .ast-container,
body.page-template-page-info-php .site-content > .ast-container {
	display: block !important;
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
}

body.page-template-page-info #primary,
body.page-template-page-info #main,
body.page-template-page-info-php #primary,
body.page-template-page-info-php #main {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	display: block !important;
}

body.home section,
.kbt-hero2,
.kbt-b2b-trust-strip,
.kbt-welcome,
.kbt-tour-section,
.kbt-why-us,
.kbt-b2b-quote-card,
.kbt-testimonials,
.kbt-inspiration,
.kbt-faq-section,
.kbt-info-hero {
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	box-sizing: border-box !important;
}

.site-content .kbt-hero2-inner,
.site-content .kbt-welcome-grid {
	display: grid !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	box-sizing: border-box !important;
}

.site-content .kbt-tour-section > .ast-container,
.site-content .kbt-why-us > .ast-container,
.site-content .kbt-b2b-trust-strip > .ast-container,
.site-content .kbt-b2b-quote-card > .ast-container,
.site-content .kbt-testimonials > .ast-container,
.site-content .kbt-inspiration > .ast-container,
.site-content .kbt-faq-section > .ast-container,
.site-content .kbt-post-cta > .ast-container,
.site-content .kbt-segment-hero > .ast-container,
.site-content .kbt-segment-guide > .ast-container,
.site-content .kbt-segment-faq > .ast-container {
	display: block !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	box-sizing: border-box !important;
}
/* Segment landing pages (page-segment-landing.php) — same descendant
   -selector clash: this page's body class isn't in the .single-post/
   .blog/.archive/.home list above, and .kbt-segment-body carries both
   "ast-container" and its own class on one element, so Astra's flex
   silently wins over its 2-column grid unless reasserted here at equal
   specificity (child theme loads after Astra, so a tie goes to us). */
.site-content .kbt-segment-body {
	display: grid;
}

/* Blog templates: no extra wrapper padding here at all — Astra's header.php
   already opens one real content container around the whole template, so
   these inherit its exact box instead of adding a second, narrower one
   (that double-nesting was why the grid/sidebar sat indented vs. the header). */
.kbt-archive-header,
.kbt-blog-archive-body,
body.single-post .kbt-breadcrumbs,
body.single-post .kbt-blog-single-body,
.kbt-post-cta .ast-container {
	max-width: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.kbt-hero {
	text-align: center;
	padding: 4em 0;
}

.kbt-hero-title {
	font-size: 2.5em;
	margin-bottom: 0.2em;
}

.kbt-hero-subtitle {
	font-size: 1.2em;
	opacity: 0.8;
	margin-bottom: 1.5em;
}

.kbt-welcome {
	padding: 5em 0;
	background: #ffffff;
}

.kbt-welcome-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
	align-items: center;
}
.kbt-welcome-grid::before,
.kbt-welcome-grid::after {
	content: none;
	display: none;
}
/* Grid tracks default to min-width:auto — they won't shrink below their
   content's intrinsic min-content width. Some child here (the search
   box, a stat card, whatever) is wider than a phone screen, so without
   this the whole track (and the text/paragraphs riding along in it)
   got forced that wide and clipped by the viewport instead of wrapping.
   Same fix already used for .kbt-tour-main/.kbt-tour-sidebar. */
.kbt-welcome-grid > * { min-width: 0; }

.kbt-faq-section > .ast-container > p:first-child {
	max-width: 760px;
	margin: 0 auto 0.3em;
	text-align: center;
	color: var(--kbt-ink-soft);
}
.kbt-faq-section .kbt-section-heading { margin-top: 0.6em; }
.kbt-faq-section .kbt-faq-accordion { max-width: 820px; margin-left: auto; margin-right: auto; }
.kbt-faq-accordion { display: flex; flex-direction: column; gap: 0.7em; margin-top: 1em; }
.kbt-faq-accordion details {
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius-sm);
	background: #fff;
	padding: 0.9em 1.1em;
}
.kbt-faq-accordion summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--kbt-ink);
	list-style: none;
	position: relative;
	padding-right: 1.6em;
}
.kbt-faq-accordion summary::-webkit-details-marker { display: none; }
.kbt-faq-accordion summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 0;
	font-size: 1.2em;
	color: var(--kbt-primary);
	line-height: 1;
}
.kbt-faq-accordion details[open] summary::after { content: '\2212'; }
.kbt-faq-accordion summary:hover { color: var(--kbt-primary-dark); }
.kbt-faq-accordion details p { margin: 0.7em 0 0; color: var(--kbt-ink-soft); }

.kbt-tour-section {
	padding: 2.5em 0;
}

.kbt-tour-section:nth-child(even) {
	background: rgba(0, 0, 0, 0.02);
}

.kbt-section-heading {
	text-align: center;
	margin-bottom: 0.3em;
}

.kbt-section-subtitle {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 2em;
	opacity: 0.8;
}

.kbt-tour-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5em;
}

.kbt-tour-card {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.kbt-tour-card-image {
	position: relative;
	display: block;
	border-radius: 16px 16px 0 0 !important;
	border-top-left-radius: 16px !important;
	border-top-right-radius: 16px !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	overflow: hidden;
}

.kbt-tour-card-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: 16px 16px 0 0 !important;
	border-top-left-radius: 16px !important;
	border-top-right-radius: 16px !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.kbt-segment-badge {
	position: absolute;
	top: 0.8rem;
	left: 0.8rem;
	background: rgba(17, 24, 39, 0.82);
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.4em 0.85em;
	border-radius: var(--kbt-radius-pill);
	z-index: 2;
	backdrop-filter: blur(8px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease;
}

.kbt-segment-badge--honeymoon {
	background: var(--kbt-honeymoon-bg);
	color: #ffffff;
}

.kbt-segment-badge--group {
	background: var(--kbt-group-bg);
	color: #ffffff;
}

.kbt-segment-badge--family {
	background: var(--kbt-family-bg);
	color: #ffffff;
}

.kbt-welcome-heading {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-weight: 800;
	color: var(--kbt-ink);
	margin: 0.2em 0 0.4em;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.kbt-welcome-subheading {
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--kbt-primary-dark);
	margin: 0 0 1em;
	line-height: 1.4;
}

.kbt-welcome-prose {
	font-size: 0.98rem;
	color: var(--kbt-ink-soft);
	line-height: 1.7;
	margin: 0 0 2em;
}

.kbt-welcome-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em;
	margin-top: 1.8em;
	padding-top: 1.5em;
	border-top: 1px solid var(--kbt-line);
}
@media (max-width: 560px) {
	.kbt-welcome-stats { grid-template-columns: 1fr; }
}

.kbt-stat-item {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--kbt-sand);
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius-sm);
	padding: 0.8em 0.9em;
	min-width: 0;
}

.kbt-stat-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--kbt-primary-soft);
	color: var(--kbt-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.kbt-stat-item strong {
	display: block;
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--kbt-ink);
	line-height: 1.1;
}

.kbt-stat-item span {
	font-size: 0.72rem;
	color: var(--kbt-ink-mute);
	font-weight: 600;
	line-height: 1.2;
	display: block;
}

.kbt-welcome-media-wrap {
	position: relative;
}

.kbt-welcome-media-card {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--kbt-shadow-lg);
	border: 4px solid #ffffff;
}

.kbt-welcome-media-card img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.kbt-welcome-media-card:hover img {
	transform: scale(1.03);
}

.kbt-welcome-badge {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	right: auto;
	background: rgba(17, 24, 39, 0.92);
	backdrop-filter: blur(12px);
	color: #ffffff;
	padding: 0.85em 1.2em;
	border-radius: 16px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 5;
}

.kbt-welcome-badge-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--kbt-primary);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.kbt-welcome-badge span {
	display: block;
	font-size: 0.7rem;
	color: var(--kbt-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.kbt-welcome-badge strong {
	font-size: 0.88rem;
	font-weight: 700;
	color: #ffffff;
}

.kbt-tour-card-body {
	padding: 1.2em;
	text-align: left;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.kbt-tour-card-title {
	font-size: 1.05em;
	margin: 0 0 0.4em;
}

.kbt-tour-card-price {
	font-weight: 700;
	margin-bottom: 0.4em;
}
.kbt-tour-card-price-unit {
	font-size: 0.7em;
	font-weight: 500;
	color: var(--kbt-ink-mute);
	white-space: nowrap;
}

.kbt-trust-badge {
	display: inline-block;
	font-size: 0.82em;
	color: #b8860b;
	margin-bottom: 0.8em;
}

.kbt-trust-badge .kbt-trust-count {
	color: inherit;
	opacity: 0.75;
}

.kbt-single-trust {
	text-align: center;
	margin-bottom: 1em;
}

.kbt-single-trust .kbt-trust-badge {
	font-size: 0.95em;
	color: #b8860b;
	margin-bottom: 0;
}

.kbt-testimonials {
	padding: 3em 0;
	text-align: center;
}

@media (min-width: 768px) {
	.kbt-welcome-grid {
		grid-template-columns: 1fr 1fr;
		gap: 3.5em;
	}

	.kbt-welcome-faq {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Fase 5D — segment landing pages (Honeymoon / Group / Keluarga)
   ========================================================================== */

.kbt-segment-hero {
	padding: 3.5em 0 2.5em;
	text-align: center;
}

.kbt-segment-eyebrow {
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.65;
	margin-bottom: 0.5em;
}

.kbt-segment-hero h1 {
	font-size: 2em;
	margin: 0 auto 0.5em;
	max-width: 20ch;
}

.kbt-segment-intro {
	max-width: 62ch;
	margin: 0 auto;
	opacity: 0.85;
}

.kbt-segment-body {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2.5em;
	align-items: start;
	padding: 1em 0 3em;
}
.kbt-segment-body::before,
.kbt-segment-body::after { content: none; display: none; }
.kbt-segment-main .kbt-section-heading-left { margin-bottom: 1em; }
.kbt-segment-cat-group { scroll-margin-top: 100px; }
.kbt-segment-cat-group + .kbt-segment-cat-group { margin-top: 3em; }
.kbt-segment-tour-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6em;
}
.kbt-segment-sidebar { position: sticky; top: 1.5em; }
@media (max-width: 1200px) {
	.kbt-segment-tour-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.kbt-segment-body { grid-template-columns: 1fr; }
	.kbt-segment-sidebar { position: static; }
	.kbt-segment-tour-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.kbt-segment-tour-grid { grid-template-columns: 1fr; }
}

.kbt-segment-guide {
	padding: 2.5em 0 0.5em;
}
.kbt-segment-guide-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em;
	max-width: 1000px;
	margin: 0 auto;
}
.kbt-segment-guide-item h3 {
	font-size: 1.05em;
	font-weight: 700;
	color: var(--kbt-ink);
	margin: 0 0 0.5em;
}
.kbt-segment-guide-item p {
	font-size: 0.92em;
	line-height: 1.6;
	color: var(--kbt-ink-soft);
	margin: 0;
}
@media (max-width: 900px) {
	.kbt-segment-guide-grid { grid-template-columns: 1fr; gap: 1.5em; }
}

.kbt-segment-faq {
	padding: 2.5em 0 2em;
}

.kbt-faq-list {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.7em;
}

.kbt-faq-item {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	padding: 0.9em 1.1em;
}

.kbt-faq-item summary {
	cursor: pointer;
	font-weight: 600;
}

.kbt-faq-item p {
	margin: 0.7em 0 0;
	opacity: 0.85;
}

/* ==========================================================================
   Standalone service pages (Sewa Mobil + Driver — kutabalitour_render_car_rental_catalog();
   Airport Pick Up — kutabalitour_render_airport_shuttle(); Customized
   Tour — kutabalitour_render_customized_tour(), single-column, ends in
   the real inquiry form instead of this two-column body).
   ========================================================================== */

.kbt-service-page { padding: 1em 0 2em; }

.kbt-service-body {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2.5em;
	align-items: start;
}
@media (max-width: 900px) {
	.kbt-service-body { grid-template-columns: 1fr; }
}

.kbt-service-single { max-width: 760px; margin: 0 auto; }
.kbt-service-single .kbt-service-image { max-height: 420px; object-fit: cover; }

.kbt-service-image {
	width: 100%;
	height: auto;
	border-radius: var(--kbt-radius-sm);
	margin-bottom: 1.5em;
}

.kbt-service-intro {
	font-size: 1.02em;
	line-height: 1.7;
	color: var(--kbt-ink-soft);
	margin: 0 0 1em;
}

.kbt-service-capacity {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--kbt-ink);
	margin: 0 0 1.5em;
}

.kbt-service-sidebar { position: sticky; top: 1.5em; }
.kbt-service-sidebar .kbt-sidebar-cta h3 { font-size: 1.3em; }

/* ==========================================================================
   Car rental catalog (/rent-a-car-with-driver/) — filterable route cards,
   rendered via kutabalitour_render_car_rental_catalog().
   ========================================================================== */

.kbt-rental-page { padding: 1em 0 2em; }

.kbt-rental-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6em;
	margin-bottom: 2.5em;
}
@media (max-width: 900px) {
	.kbt-rental-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.kbt-rental-grid { grid-template-columns: 1fr; }
}

.kbt-rental-grid-fleet { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) {
	.kbt-rental-grid-fleet { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.kbt-rental-grid-fleet { grid-template-columns: 1fr; }
}

.kbt-rental-card-fleet { align-items: center; text-align: center; padding: 1.6em 1.1em 1.1em; }
.kbt-rental-card-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--kbt-primary-soft);
	color: var(--kbt-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1em;
}
.kbt-rental-card-photo {
	width: 100%;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1em;
}
.kbt-rental-card-photo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.kbt-rental-card-fleet .kbt-rental-card-body { padding: 0; width: 100%; }
.kbt-rental-card-fleet .kbt-rental-route { justify-content: center; align-items: center; margin-bottom: 0.6em; }

.kbt-rental-inex { margin-bottom: 2.5em; }
.kbt-rental-terms { grid-template-columns: 1fr; margin-bottom: 2.5em; }
.kbt-rental-terms h3 { margin-top: 0; }

.kbt-rental-card {
	background: #fff;
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.kbt-rental-card-media { position: relative; }
.kbt-rental-card-media img { width: 100%; height: 180px; object-fit: cover; display: block; }
.kbt-rental-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(10,12,16,.7);
	color: #fff;
	font-size: 0.75em;
	font-weight: 600;
	padding: 0.3em 0.7em;
	border-radius: 999px;
}
.kbt-rental-card-body { padding: 1.1em; display: flex; flex-direction: column; flex-grow: 1; }
.kbt-rental-cat {
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kbt-primary);
	margin-bottom: 0.4em;
}
.kbt-rental-card-body h2 { font-size: 1.05em; margin: 0 0 0.5em; }
.kbt-rental-route {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 0.82em;
	color: var(--kbt-ink-mute);
	margin-bottom: 0.8em;
	line-height: 1.4;
}
.kbt-rental-price {
	font-size: 1.15em;
	font-weight: 700;
	color: var(--kbt-ink);
	margin-bottom: 0.9em;
}
.kbt-rental-price span {
	font-size: 0.6em;
	font-weight: 500;
	color: var(--kbt-ink-mute);
}
.kbt-rental-card .kbt-btn { margin-top: auto; justify-content: center; }

.kbt-rental-cta {
	text-align: center;
	background: var(--kbt-sand);
	border-radius: var(--kbt-radius-sm);
	padding: 2.5em 1.5em;
}
.kbt-rental-cta h3 { margin: 0 0 0.4em; }
.kbt-rental-cta p { margin: 0 0 1.2em; color: var(--kbt-ink-soft); }
.kbt-rental-cta .kbt-btn { display: inline-flex; }

/* ==========================================================================
   Airport shuttle destination price list (/airport-pick-up/), rendered
   via kutabalitour_render_airport_shuttle().
   ========================================================================== */

.kbt-shuttle-page { padding: 1em 0 2em; }

.kbt-shuttle-search-wrap {
	position: relative;
	max-width: 420px;
	margin: 0 auto 2em;
}
.kbt-shuttle-search-wrap svg {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--kbt-ink-mute);
	pointer-events: none;
}
.kbt-shuttle-search {
	width: 100%;
	padding: 0.75em 1em 0.75em 2.6em;
	border: 1px solid var(--kbt-line);
	border-radius: 999px;
	font-size: 0.92em;
	box-sizing: border-box;
}
.kbt-shuttle-search:focus { outline: none; border-color: var(--kbt-primary); }

.kbt-shuttle-zones {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.6em 2.5em;
	margin-bottom: 1.5em;
}
@media (max-width: 780px) {
	.kbt-shuttle-zones { grid-template-columns: 1fr; }
}

.kbt-shuttle-zone-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 0.95em;
	font-weight: 700;
	color: var(--kbt-ink);
	margin: 0 0 0.7em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--kbt-line);
}
.kbt-shuttle-zone-count { font-size: 0.75em; font-weight: 500; color: var(--kbt-ink-mute); text-transform: none; }

.kbt-shuttle-zone-list { display: flex; flex-direction: column; gap: 0.5em; }

.kbt-shuttle-row {
	display: flex;
	align-items: center;
	gap: 0.8em;
	padding: 0.6em 0.2em;
}
.kbt-shuttle-row-name { flex: 1; font-weight: 600; color: var(--kbt-ink); font-size: 0.92em; }
.kbt-shuttle-row-price { font-weight: 700; color: var(--kbt-primary-dark); font-size: 0.9em; white-space: nowrap; }

.kbt-shuttle-empty { text-align: center; color: var(--kbt-ink-mute); padding: 1em 0; }

.kbt-shuttle-note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85em;
	color: var(--kbt-ink-soft);
	background: var(--kbt-sand);
	padding: 0.8em 1.1em;
	border-radius: var(--kbt-radius-sm);
	margin: 0 0 1em;
}
.kbt-shuttle-note a { color: var(--kbt-primary-dark); font-weight: 600; }

.kbt-shuttle-page .kbt-rental-cta { margin-top: 1.5em; }

/* ==========================================================================
   Header Bar & Navigation Menu (Sleek 70px Height, Executive Typography)
   ========================================================================== */

/* Sleek, Proportional Header Bar Height (66px) */
#ast-desktop-header,
.site-header,
.main-header-bar-wrap,
.ast-main-header-wrap,
.main-header-bar,
.ast-primary-header-bar,
.site-primary-header-wrap {
	min-height: 0 !important;
	max-height: none !important;
	height: 70px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: normal !important;
	box-sizing: border-box !important;
	background: #ffffff !important;
}

.site-header .ast-container,
.main-header-bar .ast-container,
.ast-primary-header-bar .ast-container,
.ast-builder-grid-row-container {
	min-height: 66px !important;
	height: 66px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.site-header .ast-builder-grid-row {
	min-height: 66px !important;
	height: 66px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
}

.site-logo-img img,
.custom-logo {
	max-height: 38px !important;
	height: 38px !important;
	width: auto !important;
	display: block !important;
}

.site-header-primary-section-left {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	margin-right: auto !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
	flex: 0 0 auto !important;
	height: 100% !important;
}

/* Force full right alignment for Astra Header Builder elements including ast-builder-menu-1 */
.site-header-primary-section-right,
.site-header-primary-section-right .ast-builder-menu-1,
.site-header-primary-section-right .ast-builder-menu,
.site-header-primary-section-right .ast-builder-layout-element,
.site-header-primary-section-right .ast-main-header-bar-alignment,
.site-header-primary-section-right .main-header-bar-navigation,
.site-header-primary-section-right .site-navigation,
.site-header-primary-section-right #primary-site-navigation,
.site-header-primary-section-right #primary-menu,
.site-header-primary-section-right .main-navigation,
.ast-primary-header-bar-navigation {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	padding-right: 0 !important;
	height: 100% !important;
}

.main-header-menu {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 4px !important;
	list-style: none !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	height: 100% !important;
	width: auto !important;
}

.main-header-menu > li {
	position: relative !important;
	list-style: none !important;
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
	background: transparent !important;
}

/* Hide Astra's duplicate menu toggle elements */
.main-header-menu .ast-menu-toggle,
.main-header-menu .ast-header-navigation-arrow,
.main-header-menu .sub-menu-toggle {
	display: none !important;
}

/* Clean Top-Level Links — Pure Transparent Background, Zero Beige Tabs */
.main-header-menu > li > a,
.main-header-menu > li:hover > a,
.main-header-menu > li.current-menu-item > a,
.main-header-menu > li.current-menu-ancestor > a,
.main-header-menu > li.current_page_item > a,
.ast-header-break-point .main-header-bar .main-header-menu > li > a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	padding: 8px 12px !important;
	color: #1E293B !important;
	font-weight: 600 !important;
	font-size: 0.92rem !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	background: transparent !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: color 0.15s ease !important;
}

.main-header-menu > li:hover > a,
.main-header-menu > li.current-menu-item > a,
.main-header-menu > li.current-menu-ancestor > a,
.main-header-menu > li.current_page_item > a {
	color: #E8790E !important;
	background: transparent !important;
	background-color: transparent !important;
}

/* Single Clean Down Arrow Indicator for Parent Items */
.main-header-menu > li.menu-item-has-children > a::after {
	content: "" !important;
	display: inline-block !important;
	width: 5px !important;
	height: 5px !important;
	border-right: 2px solid currentColor !important;
	border-bottom: 2px solid currentColor !important;
	transform: rotate(45deg) translateY(-2px) !important;
	transition: transform 0.2s ease !important;
	margin-left: 3px !important;
}

.main-header-menu > li.menu-item-has-children:hover > a::after {
	transform: rotate(-135deg) translateY(-2px) !important;
}

/* Dropdown Panel */
.main-header-menu ul.sub-menu {
	position: absolute !important;
	top: calc(100% + 2px) !important;
	left: 0 !important;
	min-width: 240px !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 14px 36px -4px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
	padding: 8px 0 !important;
	margin: 0 !important;
	list-style: none !important;
	z-index: 99999 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(8px) !important;
	transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s !important;
	pointer-events: none !important;
}

.main-header-menu > li.menu-item-has-children::before {
	content: "" !important;
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: 0 !important;
	height: 12px !important;
}

.main-header-menu > li.menu-item-has-children:hover > ul.sub-menu {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
	pointer-events: auto !important;
}

.main-header-menu ul.sub-menu li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.main-header-menu ul.sub-menu li a {
	display: flex !important;
	align-items: center !important;
	padding: 10px 18px !important;
	margin: 2px 6px !important;
	color: #334155 !important;
	font-weight: 500 !important;
	font-size: 0.88rem !important;
	text-decoration: none !important;
	border-radius: 8px !important;
	border-left: 3px solid transparent !important;
	transition: all 0.15s ease !important;
	white-space: nowrap !important;
}

.main-header-menu ul.sub-menu li a:hover,
.main-header-menu ul.sub-menu li.current-menu-item a {
	background: #FFFBEB !important;
	color: #D97706 !important;
	border-left-color: #F59E0B !important;
	font-weight: 600 !important;
	padding-left: 20px !important;
}

/* Compact Pill CTA Button (Chat via WhatsApp) */
.main-header-menu li.kbt-menu-cta {
	margin-left: 16px !important;
	display: inline-flex !important;
	align-items: center !important;
	height: 100% !important;
}

.main-header-menu li.kbt-menu-cta > a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	height: 36px !important;
	min-height: 36px !important;
	max-height: 36px !important;
	padding: 0 16px !important;
	background: #25D366 !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	font-size: 0.84rem !important;
	line-height: 1 !important;
	border-radius: 999px !important;
	box-shadow: 0 3px 10px rgba(37, 211, 102, 0.28) !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.main-header-menu li.kbt-menu-cta > a::before {
	content: "" !important;
	display: inline-block !important;
	width: 15px !important;
	height: 15px !important;
	background-color: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") no-repeat center / contain !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

.main-header-menu li.kbt-menu-cta > a::after {
	display: none !important;
}

.main-header-menu li.kbt-menu-cta > a:hover {
	background: #1ebc59 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 5px 14px rgba(37, 211, 102, 0.38) !important;
}

/* ==========================================================================
   Mobile Header & Off-Canvas Menu Drawer (Ultra-Clean & Responsive)
   ========================================================================== */

@media (max-width: 920px) {
	#ast-mobile-header,
	#ast-mobile-header .ast-main-header-wrap,
	#ast-mobile-header .ast-primary-header-bar {
		min-height: 60px !important;
		height: 60px !important;
		background: #ffffff !important;
		border-bottom: 1px solid var(--kbt-line) !important;
	}

	#ast-mobile-header .ast-builder-grid-row {
		min-height: 60px !important;
		height: 60px !important;
		padding: 0 1rem !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}

	#ast-mobile-header .site-logo-img img,
	#ast-mobile-header .custom-logo {
		max-height: 34px !important;
		height: 34px !important;
		width: auto !important;
	}

	.main-header-menu-toggle {
		background: transparent !important;
		border: none !important;
		color: var(--kbt-ink) !important;
		padding: 6px !important;
		cursor: pointer !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.mobile-menu-toggle-icon svg {
		width: 26px !important;
		height: 26px !important;
		fill: var(--kbt-ink) !important;
	}

	.ast-mobile-header-content {
		background: #ffffff !important;
		border-bottom: 3px solid var(--kbt-primary) !important;
		box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18) !important;
		padding: 1rem 1.2rem 1.5rem !important;
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
		z-index: 999999 !important;
	}

	.ast-mobile-header-content .main-header-menu {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 4px !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.ast-mobile-header-content .main-header-menu > li {
		width: 100% !important;
		height: auto !important;
		flex-direction: column !important;
		align-items: stretch !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
	}

	.ast-mobile-header-content .main-header-menu > li > a {
		width: 100% !important;
		padding: 12px 14px !important;
		font-size: 0.98rem !important;
		font-weight: 600 !important;
		color: var(--kbt-ink) !important;
		justify-content: space-between !important;
		box-sizing: border-box !important;
	}

	.ast-mobile-header-content .main-header-menu ul.sub-menu {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		box-shadow: none !important;
		border: none !important;
		border-left: 3px solid var(--kbt-primary) !important;
		background: #F8FAFC !important;
		margin: 4px 0 8px 12px !important;
		padding: 6px 0 !important;
		border-radius: 8px !important;
		width: auto !important;
		pointer-events: auto !important;
	}

	.ast-mobile-header-content .main-header-menu ul.sub-menu li a {
		padding: 10px 16px !important;
		font-size: 0.9rem !important;
		color: #334155 !important;
		white-space: normal !important;
	}

	.ast-mobile-header-content .main-header-menu li.kbt-menu-cta {
		margin-left: 0 !important;
		margin-top: 12px !important;
		border-bottom: none !important;
	}

	.ast-mobile-header-content .main-header-menu li.kbt-menu-cta > a {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
		padding: 12px 20px !important;
		font-size: 0.95rem !important;
		box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
	}
}

.kbt-related-segments {
	margin-top: 2em;
	padding-top: 1.2em;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	font-size: 0.95em;
}

.kbt-related-segments a {
	margin-left: 0.3em;
}

/* Header "Booking Now" button — keep on one line instead of wrapping
   letter-by-letter when the nav row is tight. */
.ast-header-button-1 .ast-custom-button {
	white-space: nowrap;
}

/* ==========================================================================
   Blog — listing (home.php) + detail (single-post.php)
   ========================================================================== */

/* Ensure outer Astra content container for blog is 1200px block */
body.blog #content > .ast-container,
body.blog .site-content > .ast-container,
body.archive #content > .ast-container,
body.archive .site-content > .ast-container {
	display: block !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 2.5em 20px 4em !important;
	float: none !important;
}

.kbt-archive-header {
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	margin-top: -2.5em !important;
	margin-bottom: 3em !important;
	border-radius: 0 !important;
	background: linear-gradient(135deg, #111827 0%, #1F2937 100%) !important;
	padding: 4.5em 1em 4em !important;
	text-align: center !important;
	box-sizing: border-box !important;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3) !important;
}

.kbt-archive-header-inner {
	max-width: 820px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
}

.kbt-archive-eyebrow {
	display: inline-block;
	color: var(--kbt-primary) !important;
	font-size: 0.82em !important;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 0.6em !important;
}

.kbt-archive-header h1 {
	color: #ffffff;
	font-size: clamp(2rem, 3.8vw, 2.7rem);
	font-weight: 800;
	margin-bottom: 0.4em;
	line-height: 1.25;
}

.kbt-archive-header p.kbt-archive-sub {
	color: #D1D5DB;
	font-size: 1.02em;
	max-width: 620px;
	margin: 0 auto 1.8em;
	line-height: 1.6;
}

.kbt-blog-hero-search {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	max-width: 480px !important;
	margin: 0 auto !important;
	background: #ffffff !important;
	border-radius: var(--kbt-radius-pill) !important;
	padding: 6px 8px 6px 18px !important;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
	box-sizing: border-box !important;
}

.kbt-blog-hero-search svg {
	color: var(--kbt-ink-mute) !important;
	flex-shrink: 0 !important;
}

.kbt-blog-hero-search input[type="search"] {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	border: none !important;
	outline: none !important;
	font-size: 0.92em !important;
	background: transparent !important;
	color: var(--kbt-ink) !important;
	padding: 8px 0 !important;
	box-shadow: none !important;
	height: auto !important;
}

.kbt-blog-hero-search button[type="submit"] {
	flex-shrink: 0 !important;
	white-space: nowrap !important;
	border: none !important;
	background: var(--kbt-primary) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 0.88em !important;
	padding: 10px 22px !important;
	border-radius: var(--kbt-radius-pill) !important;
	cursor: pointer !important;
	transition: background 0.2s ease !important;
}

.kbt-blog-hero-search button[type="submit"]:hover {
	background: var(--kbt-primary-dark) !important;
}

.kbt-post-meta {
	font-size: 0.8em;
	color: var(--kbt-ink-mute);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Buttons (blog-only; homepage keeps its own ast-button styling) */
.kbt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9em;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: background .15s ease, transform .15s ease;
}
.kbt-btn-block { width: 100%; }
.kbt-btn-whatsapp { background: var(--kbt-whatsapp); color: #fff; }
.kbt-btn-whatsapp:hover { background: #1ebc59; color: #fff; }
.kbt-btn-outline { background: transparent; color: var(--kbt-ink); border: 1.5px solid var(--kbt-line); }
.kbt-btn-outline:hover { border-color: var(--kbt-primary); color: var(--kbt-primary); }
/* !important: Astra styles submit buttons via its own high-specificity
   `input[type=submit]` rules, which otherwise repaint this its default
   blue regardless of the class we put on it. */
.kbt-btn-primary { background: var(--kbt-primary) !important; color: #fff !important; border: none; }
.kbt-btn-primary:hover { background: var(--kbt-primary-dark) !important; color: #fff !important; }

/* Astra underlines every link inside .entry-content — correct for prose,
   wrong for the buttons and card titles rendered by our own components.
   Selectors are prefixed with the same `.ast-single-post .entry-content`
   context Astra uses, so these win on specificity rather than !important. */
.ast-single-post .entry-content a.kbt-btn,
.ast-single-post .entry-content .kbt-tour-card-title a,
.ast-single-post .entry-content a.kbt-tour-card-link,
.ast-single-post .entry-content .kbt-tour-breadcrumb a,
.ast-single-post .entry-content a.kbt-link-arrow,
.ast-single-post .entry-content .kbt-tour-gallery-thumb {
	text-decoration: none;
}
.kbt-btn-white { background: #fff; color: var(--kbt-primary-dark); }
.kbt-btn-white:hover { transform: translateY(-1px); }

/* Layout: main column + sidebar */
.kbt-blog-archive-body,
.kbt-blog-single-body {
	display: grid !important;
	grid-template-columns: 1fr 340px !important;
	gap: 2.5em !important;
	align-items: start !important;
	padding-bottom: 3em !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.kbt-blog-single-content,
.kbt-blog-archive-main {
	grid-column: 1 !important;
	min-width: 0 !important;
	width: 100% !important;
}

.kbt-blog-sidebar {
	grid-column: 2 !important;
	width: 100% !important;
	position: sticky !important;
	top: 24px !important;
}

.kbt-blog-single-content { max-width: 740px; }

@media (max-width: 980px) {
	.kbt-blog-archive-body,
	.kbt-blog-single-body {
		grid-template-columns: 1fr !important;
	}
	.kbt-blog-single-content,
	.kbt-blog-archive-main,
	.kbt-blog-sidebar {
		grid-column: 1 !important;
	}
	.kbt-blog-sidebar {
		position: static !important;
	}
	.kbt-blog-single-content { max-width: none; }
}

/* Post grid (listing) */
.kbt-blog-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 1.5em !important;
	margin-bottom: 2em !important;
	width: 100% !important;
}

@media (max-width: 600px) {
	.kbt-blog-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Override Astra's .ast-separate-container & .ast-article-post card padding */
.kbt-blog-card,
.ast-separate-container .kbt-blog-card.ast-article-post,
.ast-article-post.kbt-blog-card {
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--kbt-line) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	background: #ffffff !important;
	box-shadow: var(--kbt-shadow-sm) !important;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.kbt-blog-card:hover,
.ast-separate-container .kbt-blog-card.ast-article-post:hover {
	box-shadow: var(--kbt-shadow-lg) !important;
	transform: translateY(-4px) !important;
	border-color: var(--kbt-primary) !important;
}
.kbt-blog-card-thumb {
	display: block !important;
	overflow: hidden !important;
	line-height: 0 !important;
	position: relative !important;
	border-radius: 16px 16px 0 0 !important;
}

.kbt-blog-card-thumb img {
	aspect-ratio: 3 / 2 !important;
	object-fit: cover !important;
	object-position: center !important;
	width: 100% !important;
	height: auto !important;
	display: block !important;
	border-radius: 16px 16px 0 0 !important;
}
.kbt-blog-card-cat {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #fff;
	color: var(--kbt-primary-dark);
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.45em 0.9em;
	border-radius: 999px;
	line-height: 1.4;
	box-shadow: 0 1px 3px rgba(23,27,34,.15);
}
.kbt-blog-card-body { padding: 1.2em; display: flex; flex-direction: column; flex: 1; }
.kbt-blog-card-title { font-size: 1.05em; line-height: 1.35; margin: 0.4em 0; }
.kbt-blog-card-title a { color: var(--kbt-ink); text-decoration: none; }
.kbt-blog-card-title a:hover { color: var(--kbt-primary-dark); }
.kbt-blog-card-excerpt { color: var(--kbt-ink-soft); font-size: 0.92em; margin: 0 0 1em; }
.kbt-blog-card-more { margin-top: auto; align-self: flex-start; font-size: 0.88em; }

/* Pagination (WordPress core the_posts_pagination markup) */
.kbt-blog-archive-main .pagination,
.kbt-blog-archive-main .nav-links {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
	margin-top: 1.5em;
}
.kbt-blog-archive-main .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 8px;
	border-radius: 999px; border: 1px solid var(--kbt-line);
	font-weight: 600; font-size: 0.9em; color: var(--kbt-ink); text-decoration: none;
}
.kbt-blog-archive-main a.page-numbers:hover { border-color: var(--kbt-primary); color: var(--kbt-primary-dark); }
.kbt-blog-archive-main .page-numbers.current { background: var(--kbt-primary); border-color: var(--kbt-primary); color: #fff; }
.kbt-blog-archive-main .page-numbers.dots { border-color: transparent; }

/* Single post content — transparent background (no white card wrapper) & 1.5rem side padding.
   No bottom padding here: the .kbt-post-cta section is always the last element on this
   template and already supplies its own vertical padding via its full-bleed background —
   this container's old 4em bottom padding just added a blank white gap beneath it. */
body.single-post #content > .ast-container,
body.single-post .site-content > .ast-container {
	display: block !important;
	max-width: 1160px !important;
	margin: 0 auto !important;
	padding: 2.5em 1.5rem 0 !important;
	float: none !important;
	box-sizing: border-box !important;
}

body.single-post .ast-article-single,
body.single-post.ast-separate-container .entry-content,
body.single-post .kbt-blog-single,
body.single-post article.post,
body.single-post .ast-separate-container #primary {
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	border: none !important;
}

.kbt-article-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--kbt-ink-mute);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	margin-bottom: 1.2em;
	transition: color 0.2s ease;
}
.kbt-article-back:hover {
	color: var(--kbt-primary);
}

.kbt-article-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	color: var(--kbt-ink-mute);
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 0.8em;
}
.kbt-article-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.kbt-article-title {
	font-size: clamp(1.8rem, 3.2vw, 2.3rem) !important;
	font-weight: 800 !important;
	color: var(--kbt-ink) !important;
	line-height: 1.25 !important;
	margin: 0.2em 0 0.8em !important;
	letter-spacing: -0.01em !important;
}

.kbt-post-thumbnail {
	border-radius: 16px !important;
	overflow: hidden !important;
	margin: 0 0 2em 0 !important;
	box-shadow: var(--kbt-shadow-sm) !important;
	width: 100% !important;
}

.kbt-post-thumbnail img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2 !important;
	object-fit: cover !important;
	border-radius: 16px !important;
}

.entry-content {
	font-size: 1.05rem;
	line-height: 1.85;
	color: var(--kbt-ink-soft);
}

.entry-content h2 {
	font-size: 1.48rem !important;
	font-weight: 800 !important;
	color: var(--kbt-ink) !important;
	margin: 2em 0 0.8em !important;
	scroll-margin-top: 100px;
}

.entry-content h3 {
	font-size: 1.22rem !important;
	font-weight: 700 !important;
	color: var(--kbt-ink) !important;
	margin: 1.6em 0 0.6em !important;
	scroll-margin-top: 100px;
}

/* Astra's default line-height (inherited from .entry-content: 1.85) reads
   fine for prose paragraphs but makes lists and tables look overly
   loose/unprofessional — tighten those specifically instead of lowering
   the paragraph line-height. */
.entry-content ul,
.entry-content ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
}
.entry-content ul li,
.entry-content ol li {
	margin: 0 0 0.4em;
	line-height: 1.55;
}
.entry-content ul li:last-child,
.entry-content ol li:last-child { margin-bottom: 0; }
.entry-content ul ul,
.entry-content ul ol,
.entry-content ol ul,
.entry-content ol ol { margin: 0.4em 0 0; }

.entry-content table {
	width: 100%;
	margin: 0 0 1.4em;
	border-collapse: collapse;
}
.entry-content table th,
.entry-content table td {
	padding: 0.65em 0.9em;
	line-height: 1.5;
	vertical-align: top;
}

.kbt-article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid var(--kbt-line);
}
.kbt-article-tags a {
	background: var(--kbt-sand);
	color: var(--kbt-ink-soft);
	padding: 6px 14px;
	border-radius: var(--kbt-radius-pill);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.kbt-article-tags a:hover {
	background: var(--kbt-primary-soft);
	color: var(--kbt-primary-dark);
}

.kbt-author-box {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid var(--kbt-line);
}
.kbt-author-box img {
	border-radius: 50%;
	flex-shrink: 0;
}
.kbt-author-name {
	font-weight: 700;
	color: var(--kbt-ink);
	font-size: 0.95rem;
}
.kbt-author-desc {
	font-size: 0.86rem;
	color: var(--kbt-ink-mute);
	margin: 2px 0 0;
}

/* Breadcrumbs */
.kbt-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 1.2em 0 0.4em; margin: 0; font-size: 0.82em; color: var(--kbt-ink-mute); }
.kbt-breadcrumbs a { color: var(--kbt-ink-mute); text-decoration: none; }
.kbt-breadcrumbs a:hover { color: var(--kbt-primary-dark); }
.kbt-breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--kbt-line); }

/* Table of contents */
.kbt-toc-box {
	background: var(--kbt-surface); border: 1px solid var(--kbt-line); border-radius: var(--kbt-radius);
	margin: 1.4em 0 1.8em; overflow: hidden; box-shadow: var(--kbt-shadow-xs);
}
.kbt-toc-box summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 54px; padding: 0 20px; cursor: pointer; list-style: none; user-select: none;
	background: linear-gradient(180deg, var(--kbt-sand-soft) 0%, var(--kbt-primary-soft) 100%);
	border-bottom: 1px solid transparent; transition: background .15s ease, border-color .15s ease;
}
.kbt-toc-box[open] summary { border-bottom-color: var(--kbt-line); }
.kbt-toc-box summary:hover { background: linear-gradient(180deg, var(--kbt-primary-soft) 0%, rgba(232,121,14,.14) 100%); }
.kbt-toc-box summary::-webkit-details-marker { display: none; }
.kbt-toc-box-title { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--kbt-ink); font-size: 1em; }
.kbt-toc-box-icon {
	display: inline-grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
	border-radius: 8px; background: var(--kbt-primary); color: #fff;
}
.kbt-toc-box-toggle { display: flex; color: var(--kbt-ink-mute); transition: transform .2s ease; }
.kbt-toc-box[open] .kbt-toc-box-toggle { transform: rotate(180deg); }
.kbt-toc-list { list-style: none; counter-reset: toc-counter; margin: 0; padding: 10px 14px; }
.kbt-toc-item-h2 { counter-increment: toc-counter; }
.kbt-toc-item-h2 > a {
	display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 2px 0;
	border-radius: var(--kbt-radius-sm); font-weight: 600; font-size: 0.95em;
	color: var(--kbt-ink); text-decoration: none; transition: background .15s ease, color .15s ease;
}
.kbt-toc-item-h2 > a::before {
	content: counter(toc-counter, decimal-leading-zero); flex: 0 0 auto;
	display: grid; place-items: center; min-width: 28px; height: 26px;
	border: 1px solid var(--kbt-line); border-radius: 8px;
	background: var(--kbt-primary-soft); color: var(--kbt-primary-dark);
	font-size: 0.75em; font-weight: 700; transition: background .15s ease, color .15s ease;
}
.kbt-toc-item-h2 > a:hover { background: var(--kbt-primary-soft); color: var(--kbt-primary-dark); }
.kbt-toc-item-h2 > a:hover::before { background: var(--kbt-primary); border-color: var(--kbt-primary); color: #fff; }
.kbt-toc-item-h3 {
	position: relative; margin: 2px 0 2px 26px; padding-left: 18px;
	border-left: 1.5px solid var(--kbt-line);
}
.kbt-toc-item-h3::before {
	content: ''; position: absolute; left: -5px; top: 16px; width: 8px; height: 8px;
	border: 1.5px solid var(--kbt-line-strong); border-radius: 50%; background: var(--kbt-surface);
}
.kbt-toc-item-h3 > a {
	display: block; padding: 6px 10px; border-radius: var(--kbt-radius-sm);
	font-size: 0.875em; color: var(--kbt-ink-mute); text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.kbt-toc-item-h3 > a:hover { background: var(--kbt-primary-soft); color: var(--kbt-primary-dark); }

/* Post-bottom CTA (Full-Width, Flush with Footer, Vibrant Ocean Azure Gradient) */
.kbt-post-cta {
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	margin-top: 3em !important;
	margin-bottom: 0 !important;
	border-radius: 0 !important;
	padding: 4.5em 1em !important;
	text-align: center !important;
	box-sizing: border-box !important;
	background: linear-gradient(135deg, #0F172A 0%, #0284C7 50%, #0369A1 100%) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.kbt-post-cta .ast-container {
	max-width: 760px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
	display: block !important;
}

.kbt-post-cta .kbt-eyebrow {
	color: #F59E0B !important;
	font-size: 0.85em !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	margin-bottom: 0.5em !important;
	display: inline-block !important;
}

.kbt-post-cta h2 {
	color: #ffffff !important;
	font-size: clamp(1.8rem, 3vw, 2.3rem) !important;
	font-weight: 800 !important;
	margin-bottom: 0.4em !important;
	line-height: 1.25 !important;
}

.kbt-post-cta p:not(.kbt-eyebrow) {
	color: #E2E8F0 !important;
	font-size: 1.05em !important;
	max-width: 520px !important;
	margin: 0 auto 1.8em !important;
	line-height: 1.6 !important;
}

.kbt-post-cta-actions {
	display: flex !important;
	gap: 14px !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
}

/* Sidebar */
.kbt-blog-sidebar { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 1.2em; }
@media (max-width: 980px) { .kbt-blog-sidebar { position: static; } }

.kbt-sidebar-widget { background: #fff; border: 1px solid var(--kbt-line); border-radius: 10px; padding: 1.2em; box-shadow: var(--kbt-shadow-xs); }
.kbt-sidebar-widget h3 { font-size: 1.15em; margin: 0 0 0.7em; }

.kbt-sidebar-cta { background: var(--kbt-ink); border-color: var(--kbt-ink); text-align: center; }
.kbt-sidebar-cta svg { width: 30px; height: 30px; color: var(--kbt-whatsapp); margin-bottom: 8px; }
.kbt-sidebar-cta h3 { color: #fff !important; }
.kbt-sidebar-cta p { color: rgba(255,255,255,.75); font-size: 0.9em; margin-bottom: 1em; }

/* On the blog listing/detail the "ask a question" card sits at the top
   of a light page, where the dark variant used sitewide reads as a
   heavy block — soft tinted card + brand button instead, matching the
   reference's sidebar. */
.kbt-blog-sidebar .kbt-sidebar-cta {
	background: var(--kbt-sand);
	border-color: var(--kbt-line);
}
.kbt-blog-sidebar .kbt-sidebar-cta svg { color: var(--kbt-primary); }
.kbt-blog-sidebar .kbt-sidebar-cta h3 { color: var(--kbt-ink) !important; }
.kbt-blog-sidebar .kbt-sidebar-cta p { color: var(--kbt-ink-soft); }
.kbt-blog-sidebar .kbt-sidebar-cta .kbt-btn-whatsapp {
	background: var(--kbt-primary);
	color: #fff;
}
.kbt-blog-sidebar .kbt-sidebar-cta .kbt-btn-whatsapp:hover { background: var(--kbt-primary-dark); }

.kbt-sidebar-search { display: flex; gap: 8px; }
.kbt-sidebar-search input {
	flex: 1; min-width: 0; height: 44px; padding: 0 14px;
	border: 1px solid var(--kbt-line); border-radius: 8px;
	font-family: inherit; font-size: 0.92em; color: var(--kbt-ink); background: var(--kbt-sand);
}
.kbt-sidebar-search input:focus { outline: none; border-color: var(--kbt-primary); background: #fff; }
.kbt-sidebar-search button {
	width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 8px;
	background: var(--kbt-primary); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.kbt-sidebar-search button:hover { background: var(--kbt-primary-dark); }
/* Without an explicit size the SVG collapses to 0 width inside the flex
   button (same failure the carousel arrows had). */
.kbt-sidebar-search button svg { flex-shrink: 0; width: 18px; height: 18px; }

.kbt-sidebar-tour-list { list-style: none; margin: 0 0 1em; padding: 0; display: flex; flex-direction: column; gap: 0.9em; }
.kbt-sidebar-tour-item { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.kbt-sidebar-tour-thumb { width: 58px; height: 58px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.kbt-sidebar-tour-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kbt-sidebar-tour-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kbt-sidebar-tour-title { font-size: 0.87em; font-weight: 600; color: var(--kbt-ink); line-height: 1.3; }
.kbt-sidebar-tour-item:hover .kbt-sidebar-tour-title { color: var(--kbt-primary-dark); }
.kbt-sidebar-tour-price { font-size: 0.8em; color: var(--kbt-primary-dark); font-weight: 600; }

.kbt-sidebar-cat-list { list-style: none; margin: 0; padding: 0; }
.kbt-sidebar-cat-list li { border-bottom: 1px solid var(--kbt-line); }
.kbt-sidebar-cat-list li:last-child { border-bottom: none; }
.kbt-sidebar-cat-list a {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 10px 2px; font-size: 0.92em; font-weight: 500; color: var(--kbt-ink); text-decoration: none;
}
.kbt-sidebar-cat-list a:hover { color: var(--kbt-primary-dark); }
.kbt-sidebar-cat-list a span { font-size: 0.78em; color: var(--kbt-ink-mute); background: var(--kbt-sand); border-radius: 999px; padding: 2px 8px; }

/* ==========================================================================
   Homepage v2 — hero, upgraded tour cards, reviews band, inspiration.
   Concept adapted from a modern tour-booking layout, rebuilt with real
   kutabalitour data (no wishlist/cart — booking is via WhatsApp).
   ========================================================================== */

.kbt-eyebrow-sm {
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kbt-primary-dark);
	margin-bottom: 0.4em;
}

/* ---- Hero (Full-Width Breakout) ---- */
.kbt-hero2 {
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	margin-top: 0 !important;
	background: linear-gradient(180deg, #FBF6EE 0%, #F3EADA 100%) !important;
	padding: 3.5em 0 !important;
	box-sizing: border-box !important;
}

.kbt-hero2-inner {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
	gap: clamp(2rem, 4vw, 3.5rem) !important;
	align-items: center !important;
}
.kbt-hero2-inner::before,
.kbt-hero2-inner::after {
	content: none;
	display: none;
}
.kbt-hero2-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.kbt-hero2-media { grid-column: 2; grid-row: 1; min-width: 0; }
@media (max-width: 900px) {
	/* Base rule uses !important (line ~1717), so this override needs it
	   too or it silently loses and the 2-column layout never collapses. */
	.kbt-hero2-inner { grid-template-columns: 1fr !important; }
	/* grid-row must be reset too, not just grid-column: both children pin
	   themselves to row 1 for the desktop side-by-side layout, so leaving
	   that in place stacked them in the same cell here and the photos
	   rendered straight on top of the headline and search box. */
	.kbt-hero2-copy,
	.kbt-hero2-media { grid-column: 1; grid-row: auto; }
}
.kbt-hero2-title {
	margin: 0 0 0.5em;
	font-size: clamp(2rem, 4.6vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.06;
}
.kbt-hero2-accent { display: block; color: var(--kbt-primary); }
.kbt-hero2-text { margin: 0 0 1em; max-width: 46ch; color: var(--kbt-ink-soft); font-size: 0.95em; line-height: 1.7; }
.kbt-hero2-rating { display: flex; align-items: center; gap: 7px; font-size: 0.85em; color: var(--kbt-ink-mute); margin-bottom: 1.2em; }
.kbt-hero2-rating svg { color: #F5A623; }
.kbt-hero2-rating strong { color: var(--kbt-ink); font-size: 1.05em; }

.kbt-hero2-search {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 440px;
	background: #fff;
	border: 1px solid var(--kbt-line);
	border-radius: 999px;
	padding: 6px 8px 6px 18px;
	box-shadow: var(--kbt-shadow-xs);
	margin-bottom: 1em;
}
.kbt-hero2-search svg { flex-shrink: 0; color: var(--kbt-ink-mute); }
.kbt-hero2-search input { flex: 1; min-width: 0; border: none; outline: none; font-size: 0.9em; background: transparent; }
.kbt-hero2-search button {
	border: none; background: var(--kbt-primary); color: #fff; font-weight: 600; font-size: 0.88em;
	padding: 10px 20px; border-radius: 999px; cursor: pointer;
}
.kbt-hero2-search button:hover { background: var(--kbt-primary-dark); }

.kbt-hero2-features { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; color: var(--kbt-ink-mute); font-size: 0.78em; font-weight: 600; }
.kbt-hero2-features li { display: flex; align-items: center; gap: 7px; }
.kbt-hero2-features li::before { content: ""; width: 4px; height: 4px; border-radius: 999px; background: var(--kbt-primary); }

.kbt-hero2-media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 12px;
	height: 380px;
}
@media (max-width: 900px) { .kbt-hero2-media { height: 320px; } }
.kbt-hero2-tile { position: relative; display: block; border-radius: 16px; overflow: hidden; background: var(--kbt-line); }
.kbt-hero2-tile--lead { grid-row: span 2; align-self: center; height: 100%; }
.kbt-hero2-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kbt-hero2-tile::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(23,27,34,.82), transparent); }
.kbt-hero2-caption { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; color: #fff; font-size: 0.78em; font-weight: 700; line-height: 1.35; text-shadow: 0 1px 3px rgba(0,0,0,.4); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Section header with right-aligned link (inspiration) ---- */
.kbt-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 1.5em; flex-wrap: wrap; }
.kbt-section-heading-left { text-align: left; margin-bottom: 0.2em; }
.kbt-section-subtitle-left { text-align: left; margin: 0; max-width: none; }
.kbt-link-arrow { font-weight: 600; font-size: 0.9em; color: var(--kbt-primary-dark); text-decoration: none; white-space: nowrap; }
.kbt-link-arrow:hover { text-decoration: underline; }

/* ---- Upgraded tour card ---- */
.kbt-tour-card {
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--kbt-shadow-xs);
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kbt-tour-card:hover { transform: translateY(-3px); box-shadow: var(--kbt-shadow-lg); border-color: var(--kbt-line-strong); }
.kbt-tour-card-image img { transition: transform .4s ease; }
.kbt-tour-card:hover .kbt-tour-card-image img { transform: scale(1.05); }
.kbt-tour-card-title { font-size: 1.02em; margin: 0 0 0.6em; line-height: 1.35; }
.kbt-tour-card-title a { color: var(--kbt-ink); text-decoration: none; }
.kbt-tour-card-title a:hover { color: var(--kbt-primary-dark); }

.kbt-tour-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 0.7em;
	font-size: 0.82em;
	color: var(--kbt-ink-mute);
}
.kbt-tour-card-duration { display: inline-flex; align-items: center; gap: 4px; }
.kbt-tour-card-rating { display: inline-flex; align-items: center; gap: 3px; color: #b8860b; }
.kbt-tour-card-rating span { color: var(--kbt-ink-mute); }

.kbt-tour-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--kbt-line);
}
.kbt-tour-card-price-label { display: block; margin-bottom: -1px; color: var(--kbt-ink-mute); font-size: 0.68em; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; line-height: 1.2; }
.kbt-tour-card-price strong { display: block; font-size: 1.2em; font-weight: 700; line-height: 1.2; color: var(--kbt-ink); white-space: nowrap; }

.kbt-tour-card-actions { display: flex; align-items: center; gap: 0.5em; flex-shrink: 0; }
.kbt-tour-card-link {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	background: var(--kbt-primary);
	color: #fff;
	font-size: 0.85em;
	font-weight: 600;
	padding: 0.55em 0.9em;
	border-radius: 999px;
	text-decoration: none;
	transition: background .15s ease;
}
.kbt-tour-card-link:hover { background: var(--kbt-primary-dark); color: #fff; }

/* ---- Testimonials band ---- */
.kbt-testimonials { background: var(--kbt-sand); padding: 3.5em 0; }
.kbt-testimonials .kbt-section-heading { margin-bottom: 1.5em; }

/* ---- Hero Pills & Badges ---- */
.kbt-hero-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 1.2em;
}

.kbt-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	font-weight: 600;
	padding: 0.45em 0.95em;
	border-radius: var(--kbt-radius-pill);
	background: #ffffff;
	border: 1px solid var(--kbt-line);
	color: var(--kbt-ink);
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: var(--kbt-shadow-xs);
	white-space: nowrap;
}

.kbt-hero-pill:hover {
	border-color: var(--kbt-primary);
	color: var(--kbt-primary);
	transform: translateY(-1px);
}

@media (max-width: 600px) {
	.kbt-hero-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
		scrollbar-width: none;
		margin-left: -0.2em;
		margin-right: -0.2em;
		padding-left: 0.2em;
		padding-right: 0.2em;
	}
	.kbt-hero-pills::-webkit-scrollbar { display: none; }
}

/* ---- B2B Trust Strip ---- */
.kbt-b2b-trust-strip {
	background: #111827;
	color: #ffffff;
	padding: 1.6em 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kbt-b2b-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5em;
	align-items: center;
}

.kbt-b2b-trust-item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.kbt-b2b-trust-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(232, 121, 14, 0.15);
	color: var(--kbt-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.kbt-b2b-trust-text strong {
	display: block;
	font-size: 0.92rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
}

.kbt-b2b-trust-text span {
	font-size: 0.78rem;
	color: #9CA3AF;
	line-height: 1.3;
	display: block;
}

@media (max-width: 900px) {
	.kbt-b2b-trust-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.kbt-b2b-trust-grid {
		grid-template-columns: 1fr;
		gap: 1.2em;
	}
}

/* ---- Why Choose Us Grid ---- */
.kbt-why-us {
	padding: 4.5em 0;
	background: var(--kbt-sand);
}

.kbt-why-us-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5em;
	margin-top: 2.5em;
}

.kbt-why-us-card {
	background: #ffffff;
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius);
	padding: 1.8em 1.5em;
	box-shadow: var(--kbt-shadow-xs);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kbt-why-us-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--kbt-shadow-md);
	border-color: var(--kbt-primary);
}

.kbt-why-us-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--kbt-primary-soft);
	color: var(--kbt-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.kbt-why-us-card h3 {
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--kbt-ink);
	margin: 0;
}

.kbt-why-us-card p {
	font-size: 0.88rem;
	color: var(--kbt-ink-soft);
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 990px) {
	.kbt-why-us-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 580px) {
	.kbt-why-us-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- B2B Corporate Quote Section (Full-Width Breakout, Flush Top & Bottom) ---- */
.kbt-b2b-quote-card-section {
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	border-radius: 0 !important;
	background: linear-gradient(135deg, #0F172A 0%, #1F2937 100%) !important;
	padding: 5em 0 !important;
	color: #ffffff !important;
	box-sizing: border-box !important;
}

.kbt-b2b-quote-card-section > .ast-container {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	display: block !important;
}

.kbt-b2b-quote-card {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	width: 100% !important;
}

.kbt-b2b-quote-inner {
	display: grid !important;
	grid-template-columns: 1.25fr 1fr !important;
	gap: 3.5em !important;
	align-items: center !important;
	position: relative;
	z-index: 2;
}
.kbt-b2b-quote-inner > * { min-width: 0; }

.kbt-b2b-quote-copy h2 {
	color: #ffffff;
	font-size: clamp(1.8rem, 3vw, 2.3rem);
	font-weight: 800;
	margin: 0 0 0.5em;
	line-height: 1.25;
}

.kbt-b2b-quote-copy p {
	color: #D1D5DB;
	font-size: 0.98rem;
	line-height: 1.6;
	margin: 0 0 1.5em;
}

.kbt-b2b-quote-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5em;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 16px;
}

.kbt-b2b-quote-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	color: #E5E7EB;
	font-weight: 500;
}

.kbt-b2b-quote-list svg {
	color: var(--kbt-primary);
	flex-shrink: 0;
}

.kbt-b2b-quote-box {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(12px);
	border-radius: 18px;
	padding: 2em;
	text-align: center;
}

.kbt-b2b-quote-box h3 {
	color: #ffffff;
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 0.4em;
}

.kbt-b2b-quote-box p {
	color: #9CA3AF;
	font-size: 0.85rem;
	margin: 0 0 1.5em;
}

.kbt-btn-b2b-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--kbt-whatsapp);
	color: #ffffff !important;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 1em 1.6em;
	border-radius: var(--kbt-radius-pill);
	text-decoration: none;
	width: 100%;
	transition: background 0.2s ease, transform 0.2s ease;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

.kbt-btn-b2b-wa:hover {
	background: #1ebc59;
	color: #ffffff !important;
	transform: translateY(-2px);
}

@media (max-width: 900px) {
	/* The base rule sets this with !important (line ~2056), which beats
	   a plain override at any specificity/source-order — this collapse
	   to one column silently never fired at any width until this also
	   got !important. */
	.kbt-b2b-quote-inner {
		grid-template-columns: 1fr !important;
	}
	.kbt-b2b-quote-card {
		padding: 2.5em 1.8em;
	}
}

@media (max-width: 580px) {
	.kbt-b2b-quote-list {
		grid-template-columns: 1fr;
	}
}
/* ---- Inspirasi Perjalanan (Ide Liburan Blog Section) ---- */
.kbt-inspiration {
	padding: 5em 0 !important;
	background: var(--kbt-sand) !important;
	border-top: 1px solid var(--kbt-line) !important;
	border-bottom: 1px solid var(--kbt-line) !important;
}

.kbt-inspiration-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1.8em !important;
}

@media (max-width: 900px) {
	.kbt-inspiration-grid {
		grid-template-columns: 1fr !important;
	}
}

.kbt-inspiration-card {
	display: flex !important;
	flex-direction: column !important;
	text-decoration: none !important;
	border: 1px solid var(--kbt-line) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	background: #ffffff !important;
	box-shadow: var(--kbt-shadow-xs) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.kbt-inspiration-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: var(--kbt-shadow-lg) !important;
	border-color: var(--kbt-primary) !important;
}

.kbt-inspiration-media {
	aspect-ratio: 3 / 2 !important;
	overflow: hidden !important;
	position: relative !important;
	background: var(--kbt-sand) !important;
}

.kbt-inspiration-media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.4s ease !important;
}

.kbt-inspiration-card:hover .kbt-inspiration-media img {
	transform: scale(1.05) !important;
}

.kbt-inspiration-body {
	padding: 1.2em 1.4em 1.5em !important;
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
}

.kbt-inspiration-body h3 {
	margin: 0.4em 0 1em !important;
	font-size: 1.05rem !important;
	line-height: 1.4 !important;
	color: var(--kbt-ink) !important;
	font-weight: 700 !important;
}

.kbt-inspiration-more {
	margin-top: auto !important;
	color: var(--kbt-primary-dark) !important;
	font-weight: 700 !important;
	font-size: 0.88rem !important;
}

/* ---- FAQ Section ---- */
.kbt-faq-section {
	padding: 5em 0 !important;
	background: #ffffff !important;
}

.kbt-faq-accordion {
	max-width: 840px !important;
	margin: 0 auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 1em !important;
}

.kbt-faq-accordion details {
	background: var(--kbt-sand) !important;
	border: 1px solid var(--kbt-line) !important;
	border-radius: 16px !important;
	padding: 1.2em 1.5em !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.kbt-faq-accordion details[open] {
	background: #ffffff !important;
	border-color: var(--kbt-primary) !important;
	box-shadow: var(--kbt-shadow-sm) !important;
}

.kbt-faq-accordion summary {
	font-weight: 700 !important;
	font-size: 1.02rem !important;
	color: var(--kbt-ink) !important;
	cursor: pointer !important;
	list-style: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	user-select: none !important;
}

.kbt-faq-accordion summary::-webkit-details-marker {
	display: none !important;
}

.kbt-faq-accordion summary::after {
	content: '+' !important;
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	color: var(--kbt-primary) !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
	transition: transform 0.2s ease !important;
}

.kbt-faq-accordion details[open] summary::after {
	content: '\2212' !important;
	color: var(--kbt-primary-dark) !important;
}

.kbt-faq-accordion details p {
	margin: 0.8em 0 0 !important;
	font-size: 0.94rem !important;
	color: var(--kbt-ink-soft) !important;
	line-height: 1.7 !important;
	border-top: 1px solid var(--kbt-line) !important;
	padding-top: 0.8em !important;
}

/* ---- Carousel-style section header & controls ---- */
.kbt-eyebrow-icon { display: inline-flex; align-items: center; gap: 6px; }
.kbt-eyebrow-icon svg { color: var(--kbt-primary); }

.kbt-section-header-block {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 1.5em;
}

.kbt-section-header-block .kbt-eyebrow-sm {
	justify-content: center;
	margin-bottom: 0.4em;
}

.kbt-section-header-block .kbt-section-heading {
	text-align: center;
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	font-weight: 800;
	margin: 0 0 0.3em;
	letter-spacing: -0.01em;
}

.kbt-section-header-block .kbt-section-subtitle {
	text-align: center;
	margin: 0 auto;
	opacity: 0.85;
	font-size: 0.98rem;
	line-height: 1.6;
	max-width: 680px;
}

.kbt-carousel-action-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 1.2em;
}

.kbt-carousel-controls { display: flex; align-items: center; gap: 14px; }
.kbt-carousel-btn {
	width: 36px; height: 36px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--kbt-line); border-radius: 999px;
	background: #fff; color: var(--kbt-ink); cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.kbt-carousel-btn:hover { border-color: var(--kbt-primary); color: var(--kbt-primary); }
.kbt-carousel-btn svg { flex-shrink: 0; width: 16px; height: 16px; }

/* ==========================================================================
   Section Specific Themes (Honeymoon, Family, Group & Corporate)
   Differentiates background colors, eyebrow accents, card hover glow,
   and button highlights per audience section.
   ========================================================================== */

/* 1. Honeymoon Section Theme (Romantic Luxury Pink/Rose Blush) */
.kbt-tour-section--honeymoon {
	background: linear-gradient(180deg, #FFF0F5 0%, #FDF2F8 100%);
	border-top: 1px solid #FBCFE8;
	border-bottom: 1px solid #FBCFE8;
	padding: 4em 0;
}
.kbt-tour-section--honeymoon .kbt-eyebrow-sm {
	color: var(--kbt-honeymoon-color);
}
.kbt-tour-section--honeymoon .kbt-eyebrow-icon svg {
	color: var(--kbt-honeymoon-color);
}
.kbt-tour-section--honeymoon .kbt-link-arrow {
	color: var(--kbt-honeymoon-color);
}
.kbt-tour-section--honeymoon .kbt-carousel-btn:hover {
	border-color: var(--kbt-honeymoon-color);
	color: var(--kbt-honeymoon-color);
	background: #FFF0F5;
}
.kbt-tour-section--honeymoon .kbt-tour-card:hover {
	border-color: #F472B6;
	box-shadow: 0 12px 28px -8px rgba(190, 24, 93, 0.18);
}

/* 2. Family Section Theme (Warm Sunny Amber & Sand) */
.kbt-tour-section--family {
	background: linear-gradient(180deg, #FAF6F0 0%, #FFFBEB 100%);
	border-top: 1px solid #FDE68A;
	border-bottom: 1px solid #FDE68A;
	padding: 4em 0;
}
.kbt-tour-section--family .kbt-eyebrow-sm {
	color: var(--kbt-family-color);
}
.kbt-tour-section--family .kbt-eyebrow-icon svg {
	color: var(--kbt-family-color);
}
.kbt-tour-section--family .kbt-link-arrow {
	color: var(--kbt-family-color);
}
.kbt-tour-section--family .kbt-carousel-btn:hover {
	border-color: var(--kbt-family-color);
	color: var(--kbt-family-color);
	background: #FFFBEB;
}
.kbt-tour-section--family .kbt-tour-card:hover {
	border-color: #FBBF24;
	box-shadow: 0 12px 28px -8px rgba(217, 119, 6, 0.18);
}

/* 3. Group & Corporate Section Theme (Cool Executive Navy Blue) */
.kbt-tour-section--group {
	background: linear-gradient(180deg, #F0F7FF 0%, #E0F2FE 100%);
	border-top: 1px solid #BFDBFE;
	border-bottom: 1px solid #BFDBFE;
	padding: 4em 0;
}
.kbt-tour-section--group .kbt-eyebrow-sm {
	color: var(--kbt-group-color);
}
.kbt-tour-section--group .kbt-eyebrow-icon svg {
	color: var(--kbt-group-color);
}
.kbt-tour-section--group .kbt-link-arrow {
	color: var(--kbt-group-color);
}
.kbt-tour-section--group .kbt-carousel-btn:hover {
	border-color: var(--kbt-group-color);
	color: var(--kbt-group-color);
	background: #F0F7FF;
}
.kbt-tour-section--group .kbt-tour-card:hover {
	border-color: #60A5FA;
	box-shadow: 0 12px 28px -8px rgba(30, 64, 175, 0.18);
}

/* The card grid becomes a horizontal, snap-scrolling track; cards keep a
   fixed width instead of stretching to fill a CSS-grid column. */
.kbt-tour-carousel {
	display: flex !important;
	gap: 1.5em;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	padding-bottom: 8px;
	scrollbar-width: none;
}
.kbt-tour-carousel::-webkit-scrollbar { display: none; }
.kbt-tour-carousel .kbt-tour-card {
	flex: 0 0 280px;
	scroll-snap-align: start;
	content-visibility: auto;
	contain-intrinsic-size: 280px 380px;
}
@media (max-width: 600px) {
	.kbt-tour-carousel {
		scroll-padding: 0 1.5rem;
	}
	.kbt-tour-carousel .kbt-tour-card {
		flex: 0 0 calc(85vw - 1.5rem);
		max-width: 320px;
	}
}

/* ==========================================================================
   Footer — replaces Astra's default Footer Builder output (see
   kutabalitour_render_footer() in mu-plugins). Concept adapted from the
   balitourdrivers.com reference: wide brand column + 3 link columns + a
   WhatsApp CTA column on a dark band, thin bottom bar below.
   ========================================================================== */
.kbt-footer {
	background: var(--kbt-ink) !important;
	color: rgba(255, 255, 255, 0.72) !important;
	font-size: 0.85rem !important;
}
.kbt-footer-grid {
	display: grid;
	grid-template-columns: 1.7fr 0.8fr 0.9fr 0.8fr 1.3fr;
	gap: 2.5em;
	padding: 3.5em 0 2em !important;
}
.kbt-footer-grid::before,
.kbt-footer-grid::after { content: none; display: none; }
.kbt-footer-logo { max-height: 40px !important; width: auto; margin-bottom: 0.8em !important; }
.kbt-footer-brand-name { font-size: 1.05rem !important; font-weight: 800; color: #fff; margin-bottom: 0.8em !important; }
.kbt-footer-brand p { margin: 0 0 0.9em !important; line-height: 1.6 !important; font-size: 0.84rem !important; }
.kbt-footer-contact { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem !important; }
.kbt-footer-contact svg { margin-top: 3px; opacity: .8; flex-shrink: 0; }
.kbt-footer-social { display: flex; gap: 10px; margin-top: 1em !important; }
.kbt-footer-social a {
	display: flex; align-items: center; justify-content: center;
	width: 32px !important; height: 32px !important; border-radius: 50%;
	background: rgba(255, 255, 255, 0.08); color: #fff;
	transition: background .2s ease;
}
.kbt-footer-social a:hover { background: var(--kbt-primary); }
.kbt-footer-col h3 { color: #fff !important; font-size: 0.88rem !important; font-weight: 700 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; margin: 0 0 1em !important; }
.kbt-footer-col ul { list-style: none; margin: 0; padding: 0; }
.kbt-footer-col li { margin-bottom: 0.6em !important; font-size: 0.84rem !important; }
.kbt-footer-col a { color: rgba(255, 255, 255, 0.72) !important; text-decoration: none; font-size: 0.84rem !important; transition: color 0.15s ease !important; }
.kbt-footer-col a:hover { color: var(--kbt-primary) !important; }
.kbt-footer-cta p { margin: 0 0 1em !important; line-height: 1.55 !important; font-size: 0.84rem !important; }
.kbt-footer-cta .kbt-footer-contact { margin-bottom: 0.6em !important; }
.kbt-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.kbt-footer-bottom-inner {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 0.5em;
	padding: 1.2em 0 !important;
	font-size: 0.78rem !important;
	color: rgba(255, 255, 255, 0.6) !important;
}
.kbt-footer-bottom-inner a { color: rgba(255, 255, 255, 0.6) !important; text-decoration: underline; }
.kbt-footer-bottom-inner a:hover { color: var(--kbt-primary) !important; }
.kbt-footer-bottom-inner p { margin: 0; }

@media (max-width: 900px) {
	.kbt-footer-grid { grid-template-columns: 1fr 1fr; }
	.kbt-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.kbt-footer-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"brand brand"
			"packages services"
			"cta cta";
		gap: 2em 1.2em;
	}
	.kbt-footer-brand { grid-area: brand; }
	.kbt-footer-col-packages { grid-area: packages; }
	.kbt-footer-col-services { grid-area: services; }
	.kbt-footer-cta { grid-area: cta; }
	.kbt-footer-col-categories { display: none; }
}
/* .kbt-footer-grid/.kbt-footer-bottom-inner reuse Astra's .ast-container
   class for its max-width, but the footer sits outside #content — so
   Astra's own mobile fix (.ast-separate-container #content .ast-container
   { padding-left/right: 1em }) is scoped to content and never reaches it,
   leaving every footer column flush against the screen edge once the
   mobile header shows up. 921px matches that mobile-header breakpoint
   (see the #primary/.ast-primary-header-bar comment above) rather than
   a plain phone-width guess. */
@media (max-width: 921px) {
	.kbt-footer-grid,
	.kbt-footer-bottom-inner { padding-left: 1em !important; padding-right: 1em !important; }
}

/* Floating WhatsApp button — fixed bottom-right, site-wide (wp_footer). */
.kbt-float-whatsapp {
	position: fixed;
	right: calc(22px + env(safe-area-inset-right, 0px));
	bottom: calc(22px + env(safe-area-inset-bottom, 0px));
	z-index: 999;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--kbt-whatsapp);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px -4px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,0.2) inset;
	transition: transform .2s ease, box-shadow .2s ease;
}
.kbt-float-whatsapp svg { width: 28px; height: 28px; }
.kbt-float-whatsapp:hover {
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 10px 24px -4px rgba(0,0,0,.45);
}
.kbt-float-whatsapp-ping {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--kbt-whatsapp);
	opacity: .55;
	animation: kbt-whatsapp-pulse 2.2s ease-out infinite;
}
@keyframes kbt-whatsapp-pulse {
	0%   { transform: scale(1); opacity: .55; }
	70%  { transform: scale(1.8); opacity: 0; }
	100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.kbt-float-whatsapp-ping { animation: none; display: none; }
}
@media (max-width: 600px) {
	.kbt-float-whatsapp {
		width: 52px;
		height: 52px;
		right: calc(16px + env(safe-area-inset-right, 0px));
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}
	.kbt-float-whatsapp svg { width: 26px; height: 26px; }
}

/* Sticky mobile/tablet booking bar (tour pages only) — see the markup
   note in kutabalitour_render_tour_content(). Replaces the generic
   round WhatsApp button below 900px on this template specifically, so
   there's one clear price+CTA action instead of two competing ones. */
.kbt-tour-mobile-cta { display: none; }
@media (max-width: 900px) {
	body.single-tour .kbt-float-whatsapp { display: none; }
	.kbt-tour-mobile-cta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 998;
		background: var(--kbt-surface);
		border-top: 1px solid var(--kbt-line);
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -6px 20px -6px rgba(0,0,0,.18);
		transform: translateY(100%);
		transition: transform .25s ease;
	}
	.kbt-tour-mobile-cta.is-visible { transform: translateY(0); }
	.kbt-tour-mobile-cta-price { display: flex; flex-direction: column; line-height: 1.25; }
	.kbt-tour-mobile-cta-price span { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kbt-ink-mute); }
	.kbt-tour-mobile-cta-price strong { font-size: 1.05em; color: var(--kbt-ink); }
	.kbt-tour-mobile-cta .kbt-btn { white-space: nowrap; padding: 0.75em 1.2em; font-size: 0.92em; flex-shrink: 0; }
}

/* ==========================================================================
   Tour reviews (single-tour page) — real visitor reviews via WP comments,
   see kutabalitour_render_tour_reviews() in mu-plugins.
   ========================================================================== */
.kbt-reviews {
	max-width: 720px;
	margin: 2.5em auto 0;
	padding: 2em 0 0;
	border-top: 1px solid var(--kbt-line);
}
/* Inside the single-tour left column the 720px cap (meant for the old
   full-width placement) would leave the section visibly narrower than
   everything above it — fill the column instead. */
.kbt-tour-main .kbt-reviews {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.kbt-reviews h2 { margin: 0 0 0.2em; font-size: 1.4em; }
.kbt-reviews-subtitle { margin: 0 0 1.5em; color: var(--kbt-ink-mute); }
.kbt-reviews-empty {
	background: var(--kbt-sand);
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius-sm);
	padding: 1em 1.2em;
	color: var(--kbt-ink-soft);
}

.kbt-review-list { display: flex; flex-direction: column; gap: 1em; margin-bottom: 2em; }
.kbt-review-item {
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius-sm);
	padding: 1em 1.2em;
}
.kbt-review-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kbt-review-stars { color: #f5a623; letter-spacing: 1px; }
.kbt-review-item time { display: block; font-size: 0.82em; color: var(--kbt-ink-mute); margin: 2px 0 0.6em; }
.kbt-review-item p { margin: 0; color: var(--kbt-ink-soft); line-height: 1.6; }

.kbt-review-form-wrap {
	background: var(--kbt-sand) !important;
	border: 1px solid var(--kbt-line) !important;
	border-radius: 16px !important;
	padding: 1.5rem 1.8rem !important;
	box-sizing: border-box !important;
}

.kbt-review-form-wrap #respond,
.kbt-review-form-wrap .comment-respond {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.kbt-review-form-wrap #commentform,
.kbt-review-form-wrap .comment-form {
	margin: 0 !important;
	padding: 0 !important;
}

.kbt-review-form-wrap h3 {
	margin: 0 0 1em !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: var(--kbt-ink) !important;
}

.kbt-review-form-wrap .comment-form p {
	margin: 0 0 1.1em !important;
}

.kbt-review-form-wrap label {
	display: block !important;
	font-weight: 600 !important;
	font-size: 0.88em !important;
	margin-bottom: 0.4em !important;
	color: var(--kbt-ink) !important;
}

.kbt-review-form-wrap input[type="text"],
.kbt-review-form-wrap input[type="email"],
.kbt-review-form-wrap textarea {
	width: 100% !important;
	font-family: inherit !important;
	font-size: 0.95em !important;
	padding: 0.7em 0.9em !important;
	border: 1px solid var(--kbt-line) !important;
	border-radius: var(--kbt-radius-sm) !important;
	background: #ffffff !important;
	color: var(--kbt-ink) !important;
	box-sizing: border-box !important;
}

.kbt-review-form-wrap textarea { resize: vertical !important; }
.kbt-review-notice { margin: 0.8em 0 0 !important; font-size: 0.82em !important; color: var(--kbt-ink-mute) !important; }

/* 5-star radio input — DOM order 5..1 + row-reverse so hover/checked
   fills the current star and every one before it, left to right. */
.kbt-star-input {
	display: flex !important;
	flex-direction: row-reverse !important;
	justify-content: flex-end !important;
	gap: 6px !important;
	font-size: 1.8rem !important;
}

.kbt-star-input input {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

.kbt-star-input label {
	cursor: pointer !important;
	color: #D1D5DB !important;
	margin: 0 !important;
	line-height: 1 !important;
	transition: color 0.15s ease !important;
}

.kbt-star-input input:checked ~ label,
.kbt-star-input label:hover,
.kbt-star-input label:hover ~ label {
	color: #F59E0B !important;
}

/* ==========================================================================
   Single tour page — replaces the legacy "torahime/fanfic7/fanfic4"
   layout (driven entirely by the old Additional CSS panel, with a
   non-functional CF7 shortcode leaving the sidebar mostly empty for the
   full scroll length). See kutabalitour_render_tour_content().
   ========================================================================== */

/* Astra's "Separate Container" blog style paints the whole article a
   solid white card on top of the page's own light gray-blue background
   (body already IS that color) — matches the baliexpedition.com
   reference by letting the gray show through everywhere except the
   individual white cards (sidebar widgets etc.) that already set their
   own background. */
body.single-tour .ast-article-single,
body.single-tour.ast-separate-container .entry-content {
	background: transparent !important;
	padding: 0;
	box-shadow: none;
}

/* Astra's own title + "Tinggalkan Komentar / Oleh X / date" byline are
   replaced by the breadcrumb + title + meta row rendered inside
   kutabalitour_render_tour_content(), matching the reference layout
   (breadcrumb above the title, tour facts below it). A blog-style
   author/date byline is also just noise on a tour package page. */
body.single-tour .entry-header,
body.single-tour .ast-single-entry-banner {
	display: none;
}

.kbt-tour-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 12px;
	color: var(--kbt-ink-mute);
	font-size: 0.8em;
}
.kbt-tour-breadcrumb a { color: var(--kbt-ink-mute); text-decoration: none; }
.kbt-tour-breadcrumb a:hover { color: var(--kbt-primary); }

.kbt-tour-title {
	margin: 0;
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.kbt-tour-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 12px 0 1.2em;
	padding: 0;
	list-style: none;
	color: var(--kbt-ink-mute);
	font-size: 0.85em;
}
.kbt-tour-meta li { display: flex; align-items: center; gap: 6px; }
.kbt-tour-meta .kbt-review-stars { color: #f5a623; }
.kbt-tour-chip {
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--kbt-primary);
	color: #fff;
	font-size: 0.92em;
	font-weight: 700;
}

/* "Tentang Aktivitas Ini" info cards */
.kbt-about-activity { margin: 2em 0; }
.kbt-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kbt-info-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 1.1em 1.2em;
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius);
	background: #fff;
}
/* Icon sits on the same row as the title (vertically centered against
   just that line), not against the whole card including the paragraph
   below — a taller card (longer paragraph) used to pull the centered
   icon down away from the title it belongs to. */
.kbt-info-card-head { display: flex; align-items: center; gap: 12px; }
.kbt-info-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 12px;
	background: var(--kbt-primary-soft);
	color: var(--kbt-primary);
}
.kbt-info-card h3 { margin: 0; font-size: 0.98em; font-weight: 600; }
.kbt-info-card p { margin: 0; color: var(--kbt-ink-mute); font-size: 0.88em; line-height: 1.6; }
.kbt-info-card p a { color: inherit; text-decoration: none; }
.kbt-info-card p a:hover { color: var(--kbt-primary); }
@media (max-width: 640px) {
	.kbt-info-grid { grid-template-columns: 1fr; }
}

/* "Hubungi Kami" — see kutabalitour_render_contact_page(). */
.kbt-contact-page { max-width: 1160px; margin: 0 auto; padding: 2.5em 0; }
.kbt-contact-hero { text-align: center; margin-bottom: 2em; }
.kbt-contact-hero h1 { margin: 0 0 0.3em; }
.kbt-contact-brand { color: var(--kbt-ink-mute); font-size: 1.02em; }
.kbt-contact-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 2em; }
.kbt-contact-social {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 2em;
}
.kbt-contact-social a {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--kbt-sand); color: var(--kbt-ink);
	transition: background .2s ease, color .2s ease;
}
.kbt-contact-social a:hover { background: var(--kbt-primary); color: #fff; }
.kbt-contact-cta { text-align: center; margin-bottom: 2.5em; }
.kbt-contact-map { border-radius: var(--kbt-radius); overflow: hidden; box-shadow: var(--kbt-shadow-xs); line-height: 0; }
.kbt-contact-map iframe { width: 100%; height: 440px; border: 0; display: block; }
@media (max-width: 640px) {
	.kbt-contact-info-grid { grid-template-columns: 1fr; }
	.kbt-contact-map iframe { height: 260px; }
}

.kbt-tour-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2.5em;
	align-items: start;
	margin: 1.5em 0 2.5em;
}
/* Astra's "Separate Containers" layout (main.min.css: .ast-separate-
   container #primary { padding: 4em 0; }) reserves the same 64px above
   the content at every width. At desktop width that reads as normal
   breathing room, but once the mobile header kicks in it's a big blank
   strip between the header and the breadcrumb before anything useful
   shows — tighten it there instead of overriding the desktop spacing.
   921px matches Astra's own mobile-header breakpoint (.ast-header-
   break-point, verified by testing where that body class actually
   toggles) rather than an arbitrary phone-width guess — the hamburger
   menu is already showing well above a typical 640px phone breakpoint,
   and the gap looked just as wrong at those in-between widths. */
@media (max-width: 921px) {
	.ast-separate-container #primary { padding-top: 1.2em; }
}
/* Same gap-at-the-edges issue as #primary above, but sideways: Astra's
   mobile header row (.ast-header-break-point ... .ast-primary-header-bar)
   ships with padding-left/right: 0, so the logo sits flush against the
   screen edge instead of lining up with the 1em the rest of the page
   gets on mobile (.ast-separate-container #content .ast-container). The
   menu-toggle button already carries its own internal spacing, so only
   the bar itself needs it. The .ast-header-break-point class only exists
   in the DOM below Astra's own breakpoint, so it's the real gate here —
   no extra max-width needed. */
.ast-header-break-point .ast-primary-header-bar {
	padding-left: 1em !important;
	padding-right: 1em !important;
}
/* Grid items default to min-width:auto, sized to their content's
   min-content width — the mobile price tables (white-space:nowrap +
   overflow-x:auto below) want ~490px unwrapped, so without this the
   WHOLE grid track (and the page) was forced that wide instead of the
   table scrolling within its own box. min-width:0 lets both columns
   actually shrink to the space the grid gives them. */
.kbt-tour-main,
.kbt-tour-sidebar { min-width: 0; }
.kbt-tour-featured img { width: 100%; height: auto; border-radius: var(--kbt-radius); display: block; }
.kbt-btn-lg { padding: 0.9em 1.8em; font-size: 1em; }
.kbt-btn-sm { padding: 0.5em 1em; font-size: 0.8em; }

.kbt-tour-price-bar {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 14px;
	background: var(--kbt-sand);
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius-sm);
	padding: 1em 1.2em;
	margin-top: 1.2em;
}
.kbt-tour-price-label { display: block; font-size: 0.75em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kbt-ink-mute); }
.kbt-tour-price-bar strong { font-size: 1.3em; color: var(--kbt-ink); }
.kbt-tour-price-note { font-size: 0.82em; color: var(--kbt-ink-mute); }

.kbt-tour-cta-inline { text-align: center; margin: 2em 0; }

.kbt-tour-sidebar { position: sticky; top: 1.5em; display: flex; flex-direction: column; gap: 1.2em; }
.kbt-tour-trust-widget { overflow: hidden; }

/* Tour intro — collapsed to its first paragraph by default (see the
   read-more script in kutabalitour_carousel_script()); full text stays
   in the DOM the whole time for SEO, this is a visual truncation only. */
.kbt-tour-intro { margin: 1.4em 0; }
.kbt-tour-intro-body { position: relative; overflow: hidden; line-height: 1.75; transition: max-height .25s ease; }
.kbt-tour-intro-body p { margin: 0 0 1em; }
.kbt-tour-intro-body p:last-child { margin-bottom: 0; }
/* <li>'s line-height already matches the paragraphs around it, but the
   browser-default margin-bottom on every item was stacking on top of
   that, making bullet/numbered lists read visibly taller/looser than
   the surrounding prose. */
.kbt-tour-intro-body ul,
.kbt-tour-intro-body ol { margin: 0 0 1em; padding-left: 1.3em; }
.kbt-tour-intro-body ul:last-child,
.kbt-tour-intro-body ol:last-child { margin-bottom: 0; }
.kbt-tour-intro-body li { margin-bottom: 0.3em; }
.kbt-tour-intro-body li:last-child { margin-bottom: 0; }
.kbt-tour-intro.has-more:not(.is-expanded) .kbt-tour-intro-body::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2.4em;
	background: linear-gradient(to bottom, transparent, var(--kbt-surface));
	pointer-events: none;
}
.kbt-tour-intro-toggle {
	margin-top: 0.6em;
	background: none;
	border: none;
	padding: 0;
	color: var(--kbt-primary-dark);
	font-weight: 700;
	font-size: 0.92em;
	cursor: pointer;
}
.kbt-tour-intro-toggle:hover { text-decoration: underline; }

/* Pricing tables embedded in each tour's own content (Plan A/B "HARGA
   PAKET" tables) — styled generically here so all 27 tours benefit
   without hand-editing each one's saved HTML. */
.kbt-tour-detail-content { line-height: 1.7; }
.kbt-tour-detail-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0 1.8em;
	font-size: 0.92em;
}
.kbt-tour-detail-content th,
.kbt-tour-detail-content td {
	padding: 0.7em 0.9em;
	border: 1px solid var(--kbt-line);
	text-align: left;
}
.kbt-tour-detail-content thead th,
.kbt-tour-detail-content table tr:first-child th,
.kbt-tour-detail-content table tr:first-child td {
	background: var(--kbt-ink);
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}
.kbt-tour-detail-content table tr:first-child td strong { color: inherit; }
.kbt-tour-detail-content table tr:nth-child(even) { background: var(--kbt-sand); }
.kbt-tour-detail-content h5 { margin-top: 1.6em; }

/* Group/Family price tables have a MERGED 2-row header (rowspan on
   "HOTEL"/"ROOM TYPE", colspan on "HARGA/orang" spanning the tier
   columns) — the tier-label row right under it needs the same dark
   header treatment, or the header reads as cut in half. Honeymoon
   tables (single, unmerged header row) don't match this and are
   untouched. */
.kbt-tour-detail-content table tr:first-child:has(td[rowspan]) + tr td {
	background: var(--kbt-ink);
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}

/* "TANPA HOTEL" (no-hotel price) row — its first cell always carries
   its own colspan, unlike header rows where the colspan sits on a
   later cell — a reliable hook to call out this row as a distinct
   price option instead of just another table line. */
.kbt-tour-detail-content table tr:has(> td:first-child[colspan]) td {
	background: var(--kbt-primary-soft);
	color: var(--kbt-primary-dark);
	font-weight: 700;
}

@media (max-width: 900px) {
	.kbt-tour-layout { grid-template-columns: 1fr; }
	.kbt-tour-sidebar { position: static; }
}
@media (max-width: 700px) {
	.kbt-tour-detail-content table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
}
.kbt-table-scroll-hint {
	font-size: 0.78em;
	color: var(--kbt-ink-mute);
	margin: 0.8em 0 -0.6em;
	text-align: right;
}

/* Plan tabs (Fase B) — see kutabalitour_maybe_tabify_plans(). Only
   appears on tours whose content has 2+ alternative "PLAN A/B/..."
   itineraries; everything else renders exactly as before. */
.kbt-plan-tabs { margin: 1.5em 0; }
.kbt-plan-tab-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	background: var(--kbt-sand);
	border-radius: 999px;
	padding: 5px;
	margin-bottom: 1.5em;
	width: max-content;
	max-width: 100%;
}
.kbt-plan-tab-btn {
	font: inherit;
	font-weight: 600;
	font-size: 0.92em;
	background: none;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	color: var(--kbt-ink-mute);
	padding: 0.6em 1.3em;
	transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.kbt-plan-tab-btn:hover { color: var(--kbt-ink); }
.kbt-plan-tab-btn.is-active { color: #fff; background: var(--kbt-primary); box-shadow: var(--kbt-shadow-xs); }
.kbt-plan-tab-panel { display: none; }
.kbt-plan-tab-panel.is-active { display: block; }
.kbt-plan-tab-panel > :first-child { margin-top: 0; }

/* Info badges under the tour title, extra photo strip, and the
   Inclusion/Exclusion accordion — see kutabalitour_render_tour_content()
   and kutabalitour_wrap_include_exclude(). */
.kbt-tour-badges { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1em; }
.kbt-tour-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8em;
	font-weight: 600;
	padding: 0.4em 0.8em;
	border-radius: 999px;
	background: var(--kbt-primary);
	color: #fff;
}
.kbt-tour-badge-outline {
	background: #fff;
	color: var(--kbt-ink-soft);
	border: 1px solid var(--kbt-line);
}

/* Gallery: Airbnb-style layout — one large featured photo (left) plus a
   2x2 grid of up to 4 smaller photos (right), with a "see all photos"
   pill overlaid bottom-right. Photo count varies a lot per tour, so the
   thumbs column collapses gracefully instead of showing empty cells —
   see kutabalitour_render_tour_content() for the count-based fallback
   (single photo skips this grid entirely). */
.kbt-tour-gallery-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 0.6em;
	border-radius: var(--kbt-radius);
	overflow: hidden;
}
.kbt-tour-gallery-featured-btn {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: var(--kbt-radius-sm);
	overflow: hidden;
}
.kbt-tour-gallery-featured-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kbt-tour-gallery-thumbs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.6em; }
.kbt-tour-gallery-thumb {
	position: relative; display: block; width: 100%; height: 100%;
	padding: 0; border: 0; background: none; cursor: pointer;
	border-radius: var(--kbt-radius-sm); overflow: hidden;
}
.kbt-tour-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1; }
/* Fewer than 4 extra photos: thumbs fall back to a single row instead of
   leaving empty grid cells. */
.kbt-tour-gallery-count-2 .kbt-tour-gallery-thumbs,
.kbt-tour-gallery-count-3 .kbt-tour-gallery-thumbs {
	grid-template-rows: 1fr;
}
.kbt-tour-gallery-viewall {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.55em 1em;
	border-radius: 999px;
	border: 1px solid var(--kbt-ink);
	background: #fff;
	color: var(--kbt-ink);
	font-size: 0.85em;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--kbt-shadow-xs);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Astra's global `button:hover { color:#fff }` (main.min.css) targets any
   plain <button>, this one included — left unopposed it turns the label
   white on this light pill, making it unreadable. Override with an
   intentional dark-pill hover instead of just patching the color back. */
.kbt-tour-gallery-viewall:hover {
	background: var(--kbt-ink) !important;
	color: #fff !important;
	border-color: var(--kbt-ink) !important;
}
/* Below 640px the grid gives way entirely to .kbt-tour-gallery-mobile —
   a 2x2 grid of small squares doesn't work at phone width, so phones get
   a swipeable hero + thumb strip instead (both markups always render;
   only one is shown, see kutabalitour_render_tour_content()). */
.kbt-tour-gallery-mobile { display: none; }
@media (max-width: 640px) {
	.kbt-tour-gallery-grid { display: none; }
	.kbt-tour-gallery-mobile { display: block; }
}

/* Mobile swipeable gallery: hero photo with prev/next arrows, a photo
   counter, and a "see all" pill that opens the shared lightbox, plus a
   horizontally scrollable thumbnail strip synced to the hero. */
.kbt-tour-gallery-mobile-hero {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--kbt-radius);
	overflow: hidden;
	background: var(--kbt-sand);
}
.kbt-tour-gallery-mobile-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Solid (not translucent) so the circle reads the same regardless of
   what part of the photo sits behind it — a translucent background here
   picked up the photo's own colors and looked different button-to-button
   (grey over sky, muddy maroon over a red graphic). */
.kbt-tour-gallery-mobile-prev,
.kbt-tour-gallery-mobile-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px; height: 34px;
	padding: 0;
	border: 1.5px solid rgba(255,255,255,.55);
	border-radius: 999px;
	background: rgba(17,24,39,.72);
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
	color: #fff !important;
	font-size: 1.3em;
	line-height: 1;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.kbt-tour-gallery-mobile-prev { left: 10px; }
.kbt-tour-gallery-mobile-next { right: 10px; }
.kbt-tour-gallery-mobile-prev:hover,
.kbt-tour-gallery-mobile-next:hover,
.kbt-tour-gallery-mobile-prev:focus-visible,
.kbt-tour-gallery-mobile-next:focus-visible {
	background: rgba(17,24,39,.88) !important;
	border-color: rgba(255,255,255,.55) !important;
}
.kbt-tour-gallery-mobile-prev:active,
.kbt-tour-gallery-mobile-next:active { transform: translateY(-50%) scale(0.92); }
.kbt-tour-gallery-mobile-counter {
	position: absolute;
	left: 10px; bottom: 10px;
	background: rgba(17,24,39,.55);
	color: #fff;
	font-size: 0.8em;
	font-weight: 600;
	padding: 0.3em 0.7em;
	border-radius: 999px;
}
.kbt-tour-gallery-mobile-hero .kbt-tour-gallery-viewall {
	right: 10px; bottom: 10px;
	font-size: 0.8em;
	padding: 0.45em 0.85em;
}
.kbt-tour-gallery-mobile-thumbs {
	display: flex;
	gap: 0.5em;
	overflow-x: auto;
	padding: 0.6em 0.1em 0.2em;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
.kbt-tour-gallery-mobile-thumb {
	flex: 0 0 60px;
	width: 60px; height: 60px;
	padding: 0; border: 2px solid transparent;
	border-radius: var(--kbt-radius-sm);
	overflow: hidden;
	background: none;
	cursor: pointer;
	scroll-snap-align: start;
}
.kbt-tour-gallery-mobile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kbt-tour-gallery-mobile-thumb.is-active { border-color: var(--kbt-primary); }

/* Fullscreen lightbox opened by the gallery grid. */
.kbt-tour-lightbox {
	display: none;
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(10,12,16,.94);
	align-items: center;
	justify-content: center;
}
.kbt-tour-lightbox.is-open { display: flex; }
.kbt-tour-lightbox-img {
	max-width: min(90vw, 1100px);
	max-height: 82vh;
	object-fit: contain;
	border-radius: var(--kbt-radius-sm);
}
.kbt-tour-lightbox-close,
.kbt-tour-lightbox-prev,
.kbt-tour-lightbox-next {
	position: absolute;
	border: 1px solid rgba(255,255,255,.25) !important;
	background: rgba(10,12,16,.55) !important;
	color: #fff !important;
	cursor: pointer;
	border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	outline-offset: 2px;
}
.kbt-tour-lightbox-close:hover,
.kbt-tour-lightbox-prev:hover,
.kbt-tour-lightbox-next:hover { background: rgba(10,12,16,.75); }
.kbt-tour-lightbox-close:focus-visible,
.kbt-tour-lightbox-prev:focus-visible,
.kbt-tour-lightbox-next:focus-visible { outline: 2px solid #fff; }
.kbt-tour-lightbox-close { top: 18px; right: 18px; width: 42px; height: 42px; font-size: 1.6em; line-height: 1; }
.kbt-tour-lightbox-prev,
.kbt-tour-lightbox-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2em; line-height: 1; }
.kbt-tour-lightbox-prev svg,
.kbt-tour-lightbox-next svg { width: 24px; height: 24px; stroke-width: 3; color: #fff !important; }
.kbt-tour-lightbox-prev svg path,
.kbt-tour-lightbox-next svg path { stroke: #fff !important; fill: none !important; }
.kbt-tour-lightbox-prev { left: 18px; }
.kbt-tour-lightbox-next { right: 18px; }
.kbt-tour-lightbox-counter {
	position: absolute;
	bottom: 22px; left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 0.9em;
	background: rgba(255,255,255,.12);
	padding: 0.4em 0.9em;
	border-radius: 999px;
}
@media (max-width: 640px) {
	.kbt-tour-lightbox-prev { left: 6px; }
	.kbt-tour-lightbox-next { right: 6px; }
}

/* Galleries embedded inside a tour's itinerary — restored from the old
   FooGallery shortcodes, see kutabalitour_render_foogallery_shortcode(). */
.kbt-content-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
	margin: 1.2em 0 1.6em;
}
.kbt-content-gallery a {
	display: block;
	border-radius: var(--kbt-radius-sm);
	overflow: hidden;
	line-height: 0;
	text-decoration: none;
}
.kbt-content-gallery img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.kbt-content-gallery a:hover img { transform: scale(1.04); }

/* "What travelers loved" featured-review highlight */
.kbt-featured-review { margin: 1.5em 0; }
.kbt-featured-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 0.8em; }
.kbt-featured-review-head h3 { margin: 0; }
.kbt-featured-review .kbt-review-item { background: var(--kbt-sand); }

.kbt-tour-info-heading { margin-top: 1.8em; margin-bottom: 0.4em; }

/* Flat divided-list accordion rows ("Tour Information" panel on the
   baliexpedition.com reference) — no per-row box, just a bottom
   divider and a chevron that rotates open, so 2-3 rows in a row read
   as one grouped list instead of separate cards. */
.kbt-content-accordion {
	border: none;
	border-bottom: 1px solid var(--kbt-line);
	padding: 0;
	margin: 0;
}
.kbt-content-accordion summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	position: relative;
	padding: 1em 1.6em 1em 0;
}
.kbt-content-accordion summary::-webkit-details-marker { display: none; }
.kbt-content-accordion summary::after {
	content: '';
	position: absolute;
	right: 4px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--kbt-ink-mute);
	border-bottom: 2px solid var(--kbt-ink-mute);
	transform: translateY(-65%) rotate(-45deg);
	transition: transform .15s ease;
}
.kbt-content-accordion[open] summary::after { transform: translateY(-35%) rotate(45deg); }
.kbt-content-accordion > :not(summary) { padding-bottom: 1.2em; }
.kbt-content-accordion[open] summary { margin-bottom: 0; }
.kbt-content-accordion ul { margin-bottom: 0; }
.kbt-content-accordion ul li { margin: 0 0 0.3em; }
.kbt-content-accordion ul li:last-child { margin-bottom: 0; }
.kbt-content-accordion table { margin-top: 0.5em; }

/* Related tours ("Tour Lainnya") */
.kbt-related-tours { margin: 3em 0; padding-top: 2em; border-top: 1px solid var(--kbt-line); }
.kbt-related-tours-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; }
@media (max-width: 900px) {
	.kbt-related-tours-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.kbt-related-tours-grid { grid-template-columns: 1fr; }
}

/* Review rating summary + per-star distribution bars */
.kbt-review-summary {
	display: flex;
	gap: 2em;
	flex-wrap: wrap;
	align-items: center;
	background: var(--kbt-sand);
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius);
	padding: 1.2em 1.5em;
	margin-bottom: 1.5em;
}
.kbt-review-summary-score { text-align: center; }
.kbt-review-summary-score strong { display: block; font-size: 2em; line-height: 1; color: var(--kbt-ink); }
.kbt-review-summary-score .kbt-review-stars { display: block; margin: 4px 0; }
.kbt-review-summary-score span { font-size: 0.82em; color: var(--kbt-ink-mute); }
.kbt-review-summary-bars { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }
.kbt-review-bar-row { display: flex; align-items: center; gap: 8px; font-size: 0.82em; color: var(--kbt-ink-mute); }
.kbt-review-bar-row > span:first-child { width: 24px; }
.kbt-review-bar-row > span:last-child { width: 18px; text-align: right; }
.kbt-review-bar-track { flex: 1; height: 7px; border-radius: 999px; background: var(--kbt-line); overflow: hidden; }
.kbt-review-bar-fill { display: block; height: 100%; background: #f5a623; border-radius: 999px; }

/* Structured tour body (Fase C) — see kutabalitour_render_structured_tour_body() */
.kbt-tour-info-list { margin-bottom: 0.5em; }
.kbt-ticklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35em; }
.kbt-ticklist li { display: flex; align-items: flex-start; gap: 8px; }
.kbt-ticklist li svg { flex-shrink: 0; margin-top: 3px; color: var(--kbt-green); }
.kbt-ticklist-no li svg { color: #d64545; }

/* Terms & Conditions — a plain bulleted list (not the green ticklist:
   these lines mix facts, restrictions, and inclusions, so a checkmark
   would misleadingly imply everything here is a positive). */
.kbt-terms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4em; }
.kbt-terms-list li { position: relative; padding-left: 1.3em; color: var(--kbt-ink-soft); line-height: 1.55; }
.kbt-terms-list li::before {
	content: '';
	position: absolute;
	left: 0.15em;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--kbt-primary);
}
.kbt-inex { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; }
.kbt-inex h4 { margin: 0 0 0.7em; }
@media (max-width: 560px) { .kbt-inex { grid-template-columns: 1fr; gap: 1.2em; } }

.kbt-itinerary-list { list-style: none; margin: 0; padding: 0; counter-reset: kbt-day; display: flex; flex-direction: column; gap: 1.3em; }
.kbt-itinerary-list > li { padding-left: 2.1em; position: relative; }
.kbt-itinerary-list > li::before {
	counter-increment: kbt-day;
	content: counter(kbt-day);
	position: absolute; left: 0; top: 0;
	width: 1.6em; height: 1.6em;
	border-radius: 50%;
	background: var(--kbt-primary-soft);
	color: var(--kbt-primary-dark);
	font-size: 0.85em; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.kbt-itinerary-list > li > strong { display: block; margin-bottom: 0.5em; }
.kbt-itinerary-list ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 0.3em; }
.kbt-itinerary-list ul > li { margin: 0; padding: 0; }
.kbt-faq-section-inline { margin-top: 2em; }

/* ==========================================================================
   Inquiry form (Phase 3A / M1) — see mu-plugins/kutabalitour-leads.php
   ========================================================================== */
.kbt-inquiry { background: var(--kbt-sand); padding: 3.5em 0; margin-top: 1em; }
.kbt-inquiry-inner { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.kbt-inquiry-head { text-align: center; margin-bottom: 1.8em; }
.kbt-inquiry-head h2 { margin: 0 0 0.3em; }
.kbt-inquiry-head p { margin: 0 auto; color: var(--kbt-ink-soft); max-width: 52ch; }

.kbt-inquiry-form {
	background: #fff;
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius);
	padding: 1.8em;
	box-shadow: var(--kbt-shadow-xs);
}
.kbt-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2em; }
.kbt-field-row-3 { grid-template-columns: 1.2fr 1fr 1fr; }
.kbt-field { margin: 0 0 1.1em; }
.kbt-field label {
	display: block; font-size: 0.86em; font-weight: 600;
	color: var(--kbt-ink); margin-bottom: 0.4em;
}
.kbt-field label span[aria-hidden] { color: var(--kbt-primary); }
.kbt-optional { font-weight: 400; color: var(--kbt-ink-mute); }
.kbt-inquiry-form input[type="text"],
.kbt-inquiry-form input[type="email"],
.kbt-inquiry-form input[type="tel"],
.kbt-inquiry-form input[type="date"],
.kbt-inquiry-form input[type="number"],
.kbt-inquiry-form select,
.kbt-inquiry-form textarea {
	width: 100%;
	font-family: inherit;
	font-size: 0.95em;
	padding: 0.65em 0.85em;
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius-sm);
	background: #fff;
	color: var(--kbt-ink);
	box-sizing: border-box;
}
.kbt-inquiry-form textarea { resize: vertical; }
.kbt-inquiry-form input:focus,
.kbt-inquiry-form select:focus,
.kbt-inquiry-form textarea:focus {
	outline: 2px solid var(--kbt-primary);
	outline-offset: 1px;
	border-color: var(--kbt-primary);
}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.kbt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kbt-inquiry-actions { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; margin-top: 0.4em; }
.kbt-inquiry-note { font-size: 0.82em; color: var(--kbt-ink-mute); max-width: 34ch; }

.kbt-inquiry-ok {
	background: var(--kbt-green-soft);
	border: 1px solid var(--kbt-green);
	border-radius: var(--kbt-radius);
	padding: 1.4em 1.6em;
	display: grid; gap: 6px;
}
.kbt-inquiry-ok strong { color: var(--kbt-green); }
.kbt-inquiry-ok span { color: var(--kbt-ink-soft); font-size: 0.93em; }

.kbt-inquiry-err {
	background: #FDECEA;
	border: 1px solid #D4796C;
	border-radius: var(--kbt-radius);
	padding: 1.1em 1.4em;
	margin-bottom: 1.2em;
	display: grid; gap: 5px;
}
.kbt-inquiry-err strong { color: #A8341F; }
.kbt-inquiry-err span { color: var(--kbt-ink-soft); font-size: 0.92em; }

@media (max-width: 640px) {
	.kbt-field-row, .kbt-field-row-3 { grid-template-columns: 1fr; }
	.kbt-inquiry-form { padding: 1.3em; }
}

/* ==========================================================================
   Info & Legal Pages (Tentang Kami, Hubungi Kami, Syarat & Ketentuan, Kebijakan Privasi)
   ========================================================================== */

.kbt-info-page {
	width: 100%;
	background: #ffffff;
}

.kbt-info-hero {
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
	color: #ffffff !important;
	padding: 4.5em 0 4em !important;
	text-align: center !important;
	box-sizing: border-box !important;
	border-bottom: 3px solid var(--kbt-primary) !important;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3) !important;
}

.kbt-info-hero-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	max-width: 860px !important;
	margin: 0 auto !important;
	padding: 0 1.5rem !important;
	box-sizing: border-box !important;
}

.kbt-info-hero-inner .kbt-eyebrow-sm {
	margin-bottom: 0.8em !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
}

.kbt-info-hero-title {
	color: #ffffff !important;
	font-size: clamp(1.8rem, 3.8vw, 2.6rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.25 !important;
	max-width: 820px !important;
	margin: 0 0 0.5em !important;
	text-align: center !important;
}

.kbt-info-hero-subtitle {
	color: #94A3B8 !important;
	font-size: 1.02rem !important;
	max-width: 680px !important;
	margin: 0 auto !important;
	line-height: 1.65 !important;
	text-align: center !important;
}

.kbt-info-content-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 3.5em 1.5rem 5em;
}

/* About Page Specifics */
.kbt-about-story {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 3em;
	align-items: start;
	margin-bottom: 3.5em;
}

.kbt-about-story-text h2 {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--kbt-ink);
	margin-bottom: 0.6em;
}

.kbt-about-story-text p {
	font-size: 1rem;
	color: var(--kbt-ink-soft);
	line-height: 1.75;
	margin-bottom: 1.2em;
}

.kbt-about-trust-box {
	background: var(--kbt-sand);
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius);
	padding: 2em 1.8em;
	box-shadow: var(--kbt-shadow-xs);
}

.kbt-about-trust-box h3 {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--kbt-ink);
	margin-bottom: 1em;
	padding-bottom: 0.6em;
	border-bottom: 2px solid var(--kbt-primary);
}

.kbt-about-legal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	font-size: 0.9rem;
	color: var(--kbt-ink-soft);
}

.kbt-about-legal-list li strong {
	color: var(--kbt-ink);
}

/* Fleet Grid */
.kbt-fleet-section {
	margin: 3.5em 0;
	padding-top: 2em;
	border-top: 1px solid var(--kbt-line);
}

.kbt-fleet-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5em;
}

.kbt-fleet-card {
	background: #ffffff;
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius);
	padding: 1.6em 1.4em;
	box-shadow: var(--kbt-shadow-xs);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.kbt-fleet-card:hover {
	transform: translateY(-4px);
	border-color: var(--kbt-primary);
	box-shadow: var(--kbt-shadow-md);
}

.kbt-fleet-card h4 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--kbt-ink);
	margin: 0 0 0.3em;
}

.kbt-fleet-cap {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--kbt-primary-dark);
	margin: 0 0 0.6em;
}

.kbt-fleet-card p:not(.kbt-fleet-cap) {
	font-size: 0.86rem;
	color: var(--kbt-ink-mute);
	line-height: 1.55;
	margin: 0;
}

.kbt-about-cta-box {
	background: linear-gradient(135deg, #111827 0%, #1F2937 100%);
	color: #ffffff;
	border-radius: 20px;
	padding: 3.5em 2em;
	text-align: center;
	margin-top: 3em;
	box-shadow: var(--kbt-shadow-lg);
}

.kbt-about-cta-box h2 {
	color: #ffffff;
	font-size: 1.8rem;
	font-weight: 800;
	margin: 0 0 0.4em;
}

.kbt-about-cta-box p {
	color: #CBD5E1;
	font-size: 1rem;
	max-width: 520px;
	margin: 0 auto 1.8em;
}

/* Contact Page Cards */
.kbt-contact-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5em;
	margin-bottom: 3.5em;
}

.kbt-contact-card {
	background: #ffffff;
	border: 1px solid var(--kbt-line);
	border-radius: var(--kbt-radius);
	padding: 2em 1.5em;
	box-shadow: var(--kbt-shadow-xs);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kbt-contact-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--kbt-shadow-md);
	border-color: var(--kbt-primary);
}

.kbt-contact-card-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--kbt-primary-soft);
	color: var(--kbt-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.4em;
}

.kbt-contact-card-icon svg {
	width: 24px;
	height: 24px;
}

.kbt-contact-card h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--kbt-ink);
	margin: 0;
}

.kbt-contact-card p {
	font-size: 0.88rem;
	color: var(--kbt-ink-soft);
	line-height: 1.55;
	margin: 0;
}

.kbt-contact-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--kbt-sand);
	color: var(--kbt-ink-soft);
	padding: 0.25em 0.7em;
	border-radius: 6px;
	margin-top: auto;
}

.kbt-map-section {
	margin-top: 3em;
}

.kbt-map-section h2 {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--kbt-ink);
	margin-bottom: 1em;
}

.kbt-map-wrapper {
	border-radius: var(--kbt-radius);
	overflow: hidden;
	border: 1px solid var(--kbt-line);
	box-shadow: var(--kbt-shadow-xs);
}

/* Legal Pages (Privacy Policy & Terms of Service) */
.kbt-legal-container {
	max-width: 860px;
	margin: 0 auto;
	padding: 3.5em 1.5rem 5em;
}

.kbt-legal-highlight {
	background: var(--kbt-sand);
	border-left: 4px solid var(--kbt-primary);
	border-radius: 0 var(--kbt-radius-sm) var(--kbt-radius-sm) 0;
	padding: 1.2em 1.5em;
	margin-bottom: 2.5em;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--kbt-ink-soft);
}

.kbt-legal-highlight strong {
	color: var(--kbt-ink);
}

.kbt-legal-article h2 {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--kbt-ink);
	margin: 2em 0 0.8em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--kbt-line);
}

.kbt-legal-article h2:first-of-type {
	margin-top: 0;
}

.kbt-legal-article p {
	font-size: 0.96rem;
	color: var(--kbt-ink-soft);
	line-height: 1.75;
	margin-bottom: 1em;
}

.kbt-legal-article ul {
	margin: 0 0 1.5em;
	padding-left: 1.4em;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	color: var(--kbt-ink-soft);
	font-size: 0.95rem;
	line-height: 1.65;
}

.kbt-legal-article ul li strong {
	color: var(--kbt-ink);
}

/* Responsive adjustments */
@media (max-width: 960px) {
	.kbt-about-story {
		grid-template-columns: 1fr;
		gap: 2em;
	}
	.kbt-fleet-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.kbt-contact-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.kbt-fleet-grid,
	.kbt-contact-grid {
		grid-template-columns: 1fr;
	}
	.kbt-info-hero {
		padding: 3.5em 1rem 3em;
	}
	.kbt-info-content-wrap,
	.kbt-legal-container {
		padding: 2.5em 1rem 3.5em;
	}
}