/*
Theme Name: Cebu Tours Theme
Theme URI: https://cebutours.ph
Author: CebuTours
Description: Custom theme built to mirror the structure of cebutours.ph — topbar, mega-menu header, hero + search, featured packages, destination grid, testimonials, feature columns, and footer — wired to the Cebu Tours Booking plugin's Package post type. Colors and fonts are all defined below in one place for fast rebranding.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cebutours
*/

/* =========================================================================
   DESIGN TOKENS — this is the ONE place to edit to change the whole site's
   look. Swap these hex values for your real brand colors when you have
   them; every rule below references these variables, nothing is hardcoded.
   ========================================================================= */
:root {
	--ctb-primary: #0b6e4f;       /* deep teal — header accents, buttons, links */
	--ctb-primary-dark: #084f39;  /* hover state / footer background */
	--ctb-accent: #f4a300;        /* sandy orange — "Book Now" CTAs */
	--ctb-accent-dark: #d18e00;
	--ctb-ocean: #0f8fc4;         /* secondary accent, badges */
	--ctb-text: #22312c;
	--ctb-text-light: #5b6b65;
	--ctb-bg: #ffffff;
	--ctb-bg-alt: #f4f9f7;
	--ctb-border: #e2ece8;
	--ctb-white: #ffffff;

	--ctb-font-heading: 'Poppins', system-ui, sans-serif;
	--ctb-font-body: 'Inter', system-ui, sans-serif;

	--ctb-radius: 10px;
	--ctb-container-width: 1400px;
	--ctb-shadow: 0 4px 20px rgba(20, 40, 35, 0.08);
}

/* =========================================================================
   RESET + BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--ctb-font-body);
	color: var(--ctb-text);
	background: var(--ctb-bg);
	line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ctb-primary); text-decoration: none; }
h1, h2, h3, h4 {
	font-family: var(--ctb-font-heading);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 16px;
	color: var(--ctb-text);
}
ul { margin: 0; padding: 0; list-style: none; }
input, select, textarea, button { font-family: inherit; font-size: 15px; }
.screen-reader-text { position: absolute; left: -9999px; }

.ctb-container {
	max-width: var(--ctb-container-width);
	margin: 0 auto;
	padding: 0 20px;
}
.ctb-narrow { max-width: 800px; }
.ctb-section { padding: 64px 0; }
.ctb-section-heading { text-align: center; font-size: 30px; margin-bottom: 40px; }
.ctb-section-heading-small { font-size: 20px; text-transform: uppercase; letter-spacing: 1px; color: var(--ctb-text-light); }
.ctb-section-cta { text-align: center; margin-top: 32px; }
.ctb-empty-state { color: var(--ctb-text-light); font-style: italic; }

/* Pagination — replaces WordPress's unstyled "1 2 ... 6 Next" text with
   pill buttons matching the filter bar / button language used elsewhere. */
.ctb-pagination {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
	margin: 40px 0 20px;
}
.ctb-pagination .ctb-page-link {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 14px; border-radius: 8px;
	background: var(--ctb-white); border: 1px solid var(--ctb-border); color: var(--ctb-text);
	font-weight: 600; font-size: 14px; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ctb-pagination a.ctb-page-link:hover { background: var(--ctb-bg-alt); border-color: var(--ctb-primary); color: var(--ctb-primary); }
.ctb-pagination .ctb-page-link.current { background: var(--ctb-primary); border-color: var(--ctb-primary); color: var(--ctb-white); }
.ctb-pagination .ctb-page-link.dots { border-color: transparent; background: transparent; color: var(--ctb-text-light); }
.ctb-pagination .ctb-page-link.prev, .ctb-pagination .ctb-page-link.next { padding: 0 18px; }

/* Scroll-reveal — a smooth slide-up-and-fade as filter tabs / package cards
   enter the viewport. Classes are added by main.js (IntersectionObserver);
   .ctb-reveal is the "before" state, .is-visible is the "after" state.
   Respects reduced-motion preference. */
.ctb-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.ctb-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.ctb-reveal { opacity: 1; transform: none; transition: none; }
}

/* Buttons */
.ctb-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 8px;
	background: var(--ctb-accent);
	color: var(--ctb-white);
	font-weight: 600;
	border: 2px solid var(--ctb-accent);
	transition: background 0.2s, color 0.2s;
}
.ctb-btn:hover { background: var(--ctb-accent-dark); border-color: var(--ctb-accent-dark); color: var(--ctb-white); }
.ctb-btn-small { padding: 8px 16px; font-size: 13px; }
.ctb-btn-outline { background: transparent; color: var(--ctb-primary); border-color: var(--ctb-primary); }
.ctb-btn-outline:hover { background: var(--ctb-primary); color: var(--ctb-white); }
.ctb-btn-outline-light { background: transparent; color: var(--ctb-white); border-color: var(--ctb-white); }
.ctb-btn-outline-light:hover { background: var(--ctb-white); color: var(--ctb-primary); }

/* Solid brand-colored buttons for Messenger / WhatsApp — real brand colors
   instead of a transparent outline, so they read clearly over a photo. */
.ctb-btn-messenger, .ctb-btn-whatsapp {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--ctb-white); box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.ctb-btn-messenger svg, .ctb-btn-whatsapp svg { width: 18px; height: 18px; flex: none; }
.ctb-btn-messenger { background: #0084ff; border-color: #0084ff; }
.ctb-btn-messenger:hover { background: #006acc; border-color: #006acc; color: var(--ctb-white); }
.ctb-btn-whatsapp { background: #25d366; border-color: #25d366; }
.ctb-btn-whatsapp:hover { background: #1da851; border-color: #1da851; color: var(--ctb-white); }

/* =========================================================================
   TOPBAR
   ========================================================================= */
.ctb-topbar {
	background: var(--ctb-primary);
	color: var(--ctb-white);
	font-size: 13px;
}
.ctb-topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; gap: 12px; }
.ctb-topbar-address { color: rgba(255,255,255,0.85); min-width: 0; }
.ctb-topbar-address-short { display: none; align-items: center; gap: 5px; white-space: nowrap; }
.ctb-topbar-address-short svg { width: 13px; height: 13px; flex: none; }
.ctb-social-icons { display: flex; gap: 10px; }
.ctb-social-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	background: rgba(255,255,255,0.15); color: var(--ctb-white);
	transition: background-color 0.2s ease, transform 0.15s ease;
}
.ctb-social-icon svg { width: 15px; height: 15px; }
.ctb-social-icon:hover { background: var(--ctb-accent); color: var(--ctb-white); transform: translateY(-2px); }

/* =========================================================================
   HEADER + MEGA MENU
   ========================================================================= */
.ctb-header { background: var(--ctb-white); box-shadow: var(--ctb-shadow); position: relative; z-index: 50; }
/* Grid instead of flex-with-space-between: with 3 flex children, giving the
   middle one flex:1 makes it fill the leftover space but its own contents
   still hug the left edge of that space (right after the logo), not the
   true center of the header. A 1fr/auto/1fr grid makes the two outer
   columns equal width no matter how wide the logo or the actions area
   actually are, so the middle (nav) column lands dead-center every time. */
.ctb-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 14px 20px; }
.ctb-logo { justify-self: start; }
.ctb-header-actions { justify-self: end; }
.ctb-logo-text { font-family: var(--ctb-font-heading); font-size: 22px; font-weight: 800; color: var(--ctb-primary); }

.ctb-primary-nav { justify-self: center; }
.ctb-mega-menu { display: flex; gap: 4px; flex-wrap: wrap; }
.ctb-mega-menu > li { position: relative; }
.ctb-mega-menu > li > a {
	display: block; padding: 10px 16px; border-radius: 5px; color: var(--ctb-text); font-weight: 600; font-size: 15px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.ctb-mega-menu > li > a:hover { background: rgba(11, 110, 79, 0.14); color: var(--ctb-primary); }
.ctb-mega-menu > li > a.ctb-nav-active,
.ctb-mega-menu > li.current-menu-item > a,
.ctb-mega-menu > li.current-menu-ancestor > a {
	background: rgba(11, 110, 79, 0.1); color: var(--ctb-primary);
}

/* Sub-menus: WP nav menu markup nests <ul class="sub-menu"> — style generically */
.ctb-mega-menu ul.sub-menu {
	display: none;
	position: absolute; top: 100%; left: 0;
	background: var(--ctb-white); box-shadow: var(--ctb-shadow); border-radius: var(--ctb-radius);
	min-width: 260px; padding: 10px 0; z-index: 60;
}
.ctb-mega-menu li:hover > ul.sub-menu,
.ctb-mega-menu li.is-open > ul.sub-menu { display: block; }
.ctb-mega-menu ul.sub-menu ul.sub-menu { top: 0; left: 100%; }
.ctb-mega-menu ul.sub-menu a { display: block; padding: 8px 18px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.ctb-mega-menu ul.sub-menu a:hover { background: var(--ctb-bg-alt); color: var(--ctb-primary); }

.ctb-header-actions { display: flex; align-items: center; gap: 14px; }
.ctb-header-phone-btn {
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
	background: #25d366; color: var(--ctb-white); font-weight: 700; font-size: 14px;
	padding: 9px 16px; border-radius: 999px; transition: background-color 0.2s ease, transform 0.15s ease;
}
.ctb-header-phone-btn svg { width: 16px; height: 16px; flex: none; }
.ctb-header-phone-btn:hover { background: #1da851; color: var(--ctb-white); transform: translateY(-1px); }
.ctb-mobile-toggle {
	display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 6px;
}
.ctb-mobile-toggle span { width: 22px; height: 2px; background: var(--ctb-text); display: block; }

/* =========================================================================
   HERO
   ========================================================================= */
.ctb-hero {
	position: relative;
	background: linear-gradient(135deg, var(--ctb-primary) 0%, var(--ctb-ocean) 100%);
	background-size: cover; background-position: center;
	color: var(--ctb-white);
	padding: 90px 0 110px;
	text-align: center;
}
/* Dark overlay so hero text stays legible over any uploaded photo — sits
   between the background image and the content, regardless of how bright
   or busy the chosen photo is. */
.ctb-hero::before {
	content: ''; position: absolute; inset: 0;
	background: rgba(0, 0, 0, 0.75);
	z-index: 0;
}
.ctb-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.ctb-hero-eyebrow { text-transform: uppercase; letter-spacing: 1px; font-weight: 600; opacity: 0.9; margin-bottom: 10px; }
.ctb-hero-heading { font-size: 42px; color: var(--ctb-white); margin-bottom: 14px; }
.ctb-hero-subheading { font-size: 17px; opacity: 0.9; margin-bottom: 32px; }

.ctb-hero-search {
	display: flex; background: var(--ctb-white); border-radius: 50px; overflow: hidden;
	box-shadow: var(--ctb-shadow); max-width: 560px; margin: 0 auto 24px;
}
.ctb-hero-search input {
	flex: 1; border: 0; padding: 16px 22px; font-size: 15px; color: var(--ctb-text); outline: none;
}
.ctb-hero-search button {
	border: 0; background: var(--ctb-accent); color: var(--ctb-white); font-weight: 700; padding: 0 28px; cursor: pointer;
}
.ctb-hero-search button:hover { background: var(--ctb-accent-dark); }

.ctb-hero-cta-row { display: flex; gap: 12px; justify-content: center; }

/* =========================================================================
   FEATURED PACKAGES / PACKAGE CARDS / GRIDS
   ========================================================================= */
.ctb-package-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 24px;
}
/* "You Might Also Like" always renders exactly 4 cards — auto-fill would
   leave a dangling empty track on wide screens since 4 x 270px doesn't
   divide the full container width evenly. Force a fixed 4-column grid here
   instead so the row is always fully and evenly filled. */
.ctb-related-packages .ctb-package-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.ctb-related-packages .ctb-package-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ctb-related-packages .ctb-package-grid { grid-template-columns: 1fr; }
}
.ctb-package-card {
	display: flex; flex-direction: column; height: 100%;
	background: var(--ctb-white); border: 1px solid var(--ctb-border); border-radius: var(--ctb-radius);
	overflow: hidden; box-shadow: var(--ctb-shadow);
	/* Same fix as .ctb-filter-btn above: this also carries the .ctb-reveal
	   scroll-in fade/slide, so opacity needs to be in this list too — a
	   lone `transform: 0.2s` here was fully overwriting .ctb-reveal's
	   `opacity 0.6s ease, transform 0.6s ease`, leaving cards popping in
	   with no fade and a much faster, jerkier slide than intended. */
	transition: opacity 0.6s ease, transform 0.3s ease;
}
.ctb-package-card:hover { transform: translateY(-4px); }
.ctb-package-card-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ctb-bg-alt); flex: none; }
.ctb-package-card-media img { width: 100%; height: 100%; object-fit: cover; }
.ctb-package-card-media-placeholder { width: 100%; height: 100%; background: var(--ctb-bg-alt); }
/* flex column so the Book Now button always sits flush with the card
   bottom regardless of how many lines the title/price above it wrap to. */
.ctb-package-card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.ctb-package-card-btn { margin-top: auto; }
.ctb-package-card-title { font-size: 17px; margin-bottom: 10px; min-height: 44px; }
.ctb-package-card-price {
	display: inline-block;
	/* This is a flex child of .ctb-package-card-body (flex-direction: column),
	   which stretches items to fill the cross-axis (full card width) by
	   default — overriding inline-block's own shrink-to-fit sizing. Without
	   this the background stretched edge-to-edge instead of just hugging
	   the price text. */
	align-self: flex-start;
	color: var(--ctb-primary);
	background: rgba(11, 110, 79, 0.1);
	font-weight: 700;
	font-size: 13px;
	padding: 5px 12px;
	border-radius: 0;
	margin-bottom: 16px;
}

/* Full-width, pill-shaped, with an arrow that nudges forward on hover —
   more of a deliberate call-to-action than a flat rectangular label. */
.ctb-package-card-btn {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	width: 100%; padding: 12px 16px; border-radius: 999px;
	font-size: 14px; font-weight: 700;
	box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.ctb-package-card-btn svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
.ctb-package-card:hover .ctb-package-card-btn {
	background: var(--ctb-accent-dark); border-color: var(--ctb-accent-dark);
	box-shadow: 0 8px 18px rgba(244, 163, 0, 0.4);
	transform: translateY(-2px);
}
.ctb-package-card:hover .ctb-package-card-btn svg { transform: translateX(3px); }

/* =========================================================================
   DESTINATIONS GRID
   ========================================================================= */
.ctb-destination-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media (max-width: 900px) {
	.ctb-destination-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.ctb-destination-grid { grid-template-columns: repeat(2, 1fr); }
}
.ctb-destination-card {
	position: relative; display: block; border-radius: var(--ctb-radius); overflow: hidden; aspect-ratio: 4 / 3;
	background: var(--ctb-bg-alt);
}
.ctb-destination-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.ctb-destination-card:hover img { transform: scale(1.06); }
.ctb-destination-card-placeholder { width: 100%; height: 100%; background: var(--ctb-bg-alt); }
.ctb-destination-card span {
	position: absolute; bottom: 0; left: 0; right: 0; padding: 14px;
	background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
	color: var(--ctb-white); font-weight: 700; font-family: var(--ctb-font-heading);
}

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.ctb-testimonials { background: var(--ctb-bg-alt); }
.ctb-testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.ctb-testimonial-card { background: var(--ctb-white); border-radius: var(--ctb-radius); padding: 22px; box-shadow: var(--ctb-shadow); }
.ctb-testimonial-name { margin-bottom: 6px; color: var(--ctb-primary); }

/* =========================================================================
   WELCOME + FEATURES
   ========================================================================= */
.ctb-welcome-inner { text-align: center; }
.ctb-welcome-body { color: var(--ctb-text-light); font-size: 16px; }

.ctb-features { background: var(--ctb-bg-alt); }
.ctb-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; text-align: center; }
.ctb-feature-col {
	background: var(--ctb-white); border: 1px solid var(--ctb-border); border-radius: var(--ctb-radius);
	padding: 32px 24px; box-shadow: var(--ctb-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ctb-feature-col:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(20, 40, 35, 0.14); border-color: var(--ctb-primary); }
.ctb-feature-icon {
	display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
	width: 56px; height: 56px; border-radius: 50%; background: rgba(11, 110, 79, 0.1); color: var(--ctb-primary);
}
.ctb-feature-icon svg { width: 26px; height: 26px; }
.ctb-feature-col h3 { font-size: 18px; color: var(--ctb-primary); }
.ctb-feature-col p { color: var(--ctb-text-light); font-size: 14px; margin-bottom: 0; }

/* =========================================================================
   MISSION & VISION
   ========================================================================= */
.ctb-mission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.ctb-mission-card {
	background: var(--ctb-white); border: 1px solid var(--ctb-border); border-radius: var(--ctb-radius);
	padding: 36px 32px; box-shadow: var(--ctb-shadow); border-top: 4px solid var(--ctb-accent);
}
.ctb-mission-icon {
	display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
	width: 52px; height: 52px; border-radius: 50%; background: rgba(244, 163, 0, 0.12); color: var(--ctb-accent-dark);
}
.ctb-mission-icon svg { width: 24px; height: 24px; }
.ctb-mission-card h3 { font-size: 20px; color: var(--ctb-text); margin-bottom: 10px; }
.ctb-mission-card p { color: var(--ctb-text-light); font-size: 15px; margin: 0; }

/* =========================================================================
   ABOUT US PAGE
   ========================================================================= */
.ctb-about-hero { text-align: center; padding-bottom: 24px; }
.ctb-about-hero-tagline { font-family: var(--ctb-font-heading, inherit); font-size: 20px; font-weight: 700; color: var(--ctb-primary); margin: 10px 0 4px; }
.ctb-about-hero-sub { color: var(--ctb-text-light); font-size: 15px; margin: 0; }

.ctb-about-intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.ctb-about-intro-card { background: var(--ctb-white); border: 1px solid var(--ctb-border); border-radius: var(--ctb-radius); padding: 28px 24px; }
.ctb-about-intro-card h3 { font-size: 18px; color: var(--ctb-text); margin: 0 0 10px; }
.ctb-about-intro-card p { color: var(--ctb-text-light); font-size: 14.5px; line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .ctb-about-intro-grid { grid-template-columns: 1fr; } }

.ctb-about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; padding: 28px 0; border-top: 1px solid var(--ctb-border); border-bottom: 1px solid var(--ctb-border); }
.ctb-about-stat-num { display: block; font-family: var(--ctb-font-heading, inherit); font-size: 34px; font-weight: 800; color: var(--ctb-primary); }
.ctb-about-stat-label { display: block; font-size: 13px; color: var(--ctb-text-light); margin-top: 4px; }
@media (max-width: 600px) { .ctb-about-stats { grid-template-columns: 1fr; gap: 16px; } }

.ctb-about-story-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ctb-accent, #f4a300); margin-bottom: 6px; }

/* Vertical timeline: a left-hand line with dots per milestone, matching the
   "Our Story" layout pattern (year label -> title -> description) rendered
   in the site's own colors rather than a one-off palette. */
.ctb-timeline { position: relative; margin: 28px 0 40px; padding-left: 28px; border-left: 2px solid var(--ctb-border); }
.ctb-timeline-item { position: relative; padding-bottom: 32px; }
.ctb-timeline-item:last-child { padding-bottom: 0; }
.ctb-timeline-dot { position: absolute; left: -34px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ctb-primary); box-shadow: 0 0 0 4px var(--ctb-bg-alt, #f4f9f7); }
.ctb-timeline-year { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ctb-accent, #f4a300); margin-bottom: 4px; }
.ctb-timeline-item h3 { font-size: 17px; color: var(--ctb-text); margin: 0 0 6px; }
.ctb-timeline-item p { color: var(--ctb-text-light); font-size: 14.5px; line-height: 1.6; margin: 0; }

.ctb-compliance-note { background: var(--ctb-bg-alt, #f4f9f7); border-radius: var(--ctb-radius); padding: 28px 24px; text-align: center; }
.ctb-compliance-note h4 { font-size: 17px; color: var(--ctb-text); margin: 0 0 8px; }
.ctb-compliance-note p { color: var(--ctb-text-light); font-size: 14.5px; margin: 0 0 16px; }
.ctb-compliance-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ctb-compliance-badge { font-size: 13px; font-weight: 600; color: var(--ctb-primary); background: var(--ctb-white); border: 1px solid var(--ctb-border); border-radius: 999px; padding: 6px 14px; }

/* =========================================================================
   AS FEATURED IN
   ========================================================================= */
/* Was a CSS-columns masonry — fine for an arbitrary/growing number of
   logos, but with a fixed set of 12 it just left an uneven, half-empty
   last row (masonry fills columns top-to-bottom, not left-to-right, so
   the "gap" wasn't a bug, it just doesn't suit a round, known count). A
   plain 6-column grid gives exactly 2 full rows for 12 logos with no
   ragged edge; still reflows sensibly for other counts via the
   media-query column drops below. */
.ctb-section.ctb-featured-in { background: var(--ctb-bg-alt, #f4f9f7); }
.ctb-featured-in-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}
.ctb-featured-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 18px;
	background: var(--ctb-white);
	border: 1px solid var(--ctb-border);
	border-radius: var(--ctb-radius);
}
.ctb-featured-logo img { max-height: 40px; width: 100%; height: auto; filter: grayscale(100%); opacity: 0.75; transition: filter 0.2s ease, opacity 0.2s ease; }
.ctb-featured-logo:hover img { filter: grayscale(0%); opacity: 1; }
@media (max-width: 1100px) {
	.ctb-featured-in-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
	.ctb-featured-in-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
	.ctb-featured-in-row { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   GET IN TOUCH
   ========================================================================= */
.ctb-get-in-touch {
	background: linear-gradient(135deg, var(--ctb-primary) 0%, var(--ctb-ocean) 100%);
	color: var(--ctb-white); padding: 64px 0;
}
.ctb-get-in-touch h2 { color: var(--ctb-white); margin: 6px 0 10px; font-size: 32px; }
.ctb-get-in-touch a { color: var(--ctb-white); }
.ctb-get-in-touch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.ctb-map-embed { width: 100%; height: 220px; border: 0; border-radius: var(--ctb-radius); }

/* No map configured — center the CTA content in the page instead of
   leaving it pinned to the left half with a blank column beside it. */
.ctb-get-in-touch-grid--solo {
	grid-template-columns: 1fr;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.ctb-get-in-touch-grid--solo .ctb-cta-tagline,
.ctb-get-in-touch-grid--solo .ctb-cta-buttons,
.ctb-get-in-touch-grid--solo .ctb-cta-contacts {
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}

.ctb-cta-eyebrow {
	display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 1px; background: rgba(255,255,255,0.15); padding: 5px 12px; border-radius: 20px;
}
.ctb-cta-tagline { font-size: 16px; color: rgba(255,255,255,0.88); max-width: 440px; margin-bottom: 24px; }
.ctb-cta-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.ctb-btn-cta {
	background: var(--ctb-accent); border-color: var(--ctb-accent); color: var(--ctb-white);
	font-weight: 700; padding: 13px 26px; font-size: 15px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.ctb-btn-cta:hover { background: var(--ctb-accent-dark); border-color: var(--ctb-accent-dark); transform: translateY(-2px); }
.ctb-btn-cta-outline {
	background: transparent; border: 2px solid rgba(255,255,255,0.6); color: var(--ctb-white);
	font-weight: 700; padding: 11px 24px; font-size: 15px;
}
.ctb-btn-cta-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--ctb-white); color: var(--ctb-white); }
.ctb-cta-contacts { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.ctb-cta-contact-item { display: flex; align-items: center; gap: 12px; color: var(--ctb-white); opacity: 0.9; }
.ctb-cta-contact-item:hover { opacity: 1; text-decoration: underline; }
.ctb-cta-contact-icon {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.15);
}
.ctb-cta-contact-icon svg { width: 15px; height: 15px; }
.ctb-get-in-touch-grid--solo .ctb-cta-contacts { align-items: center; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.ctb-footer { background: var(--ctb-bg-alt); color: var(--ctb-text-light); border-top: 1px solid var(--ctb-border); }
.ctb-footer-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; padding: 56px 20px;
}
.ctb-footer-col h3 { color: var(--ctb-primary); font-size: 16px; margin-bottom: 18px; }
.ctb-footer-col p, .ctb-footer-col a { color: var(--ctb-text-light); font-size: 14px; }
.ctb-footer-col a:hover { color: var(--ctb-primary); }
.ctb-footer-menu li, .ctb-footer-posts li { margin-bottom: 10px; }
.ctb-footer .ctb-social-icon { background: rgba(11, 110, 79, 0.1); color: var(--ctb-primary); }
.ctb-footer .ctb-social-icon:hover { background: var(--ctb-accent); color: var(--ctb-white); }
.ctb-footer-bottom {
	border-top: 1px solid var(--ctb-border); padding: 18px 0; text-align: center; font-size: 13px; color: var(--ctb-text-light);
}

.ctb-scroll-top {
	position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
	background: var(--ctb-primary); color: var(--ctb-white); display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 40;
}
.ctb-scroll-top.is-visible { opacity: 1; pointer-events: auto; }

/* Mobile-only floating "Book This Tour" bar on single package pages —
   hidden by default (desktop), switched to flex at the 900px mobile
   breakpoint above. Jumps straight to the booking form via #ctb-booking-box. */
.ctb-mobile-book-bar {
	display: none; align-items: center; justify-content: center;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
	background: var(--ctb-accent); color: var(--ctb-white);
	font-weight: 700; font-size: 16px; text-align: center;
	padding: 14px 20px; box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.ctb-mobile-book-bar:hover { background: var(--ctb-accent-dark); color: var(--ctb-white); }
/* Hidden while the real booking form is already visible on screen (see
   assets/js/main.js's IntersectionObserver on #ctb-booking-box) — slides
   out of the way instead of just vanishing. */
.ctb-mobile-book-bar.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }

/* =========================================================================
   BREADCRUMB / ARCHIVE / FILTER BAR
   ========================================================================= */
.ctb-breadcrumb { font-size: 13px; color: var(--ctb-text-light); margin: 20px 0; }
.ctb-breadcrumb a { color: var(--ctb-text-light); }
.ctb-archive-heading { margin-top: 24px; }
.ctb-filter-bar {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 32px;
	background: var(--ctb-white); border-radius: 24px; box-shadow: var(--ctb-shadow);
	padding: 10px; width: 100%; max-width: 100%;
	position: relative;
}
.ctb-filter-btn {
	/* Stretches to fill the row evenly (curate which destinations show via
	   the "Hide from destination filter bar" checkbox on the term if this
	   ever gets crowded again — see ctb_get_filterable_destination_terms()).
	   The sliding indicator tracks each button's actual top/left/width/height
	   per row, so this stays correct even if there are enough terms to wrap. */
	position: relative; z-index: 1; flex: 1 1 0; text-align: center;
	padding: 10px 18px; border-radius: 30px; border: 1px solid transparent; background: transparent;
	color: var(--ctb-text-light); font-weight: 600; font-size: 14px; white-space: nowrap;
	/* Also carries the .ctb-reveal scroll-in fade/slide (opacity + transform,
	   see near the top of this file) — .ctb-reveal and .ctb-filter-btn both
	   set `transition`, and since the shorthand fully replaces rather than
	   merges, whichever rule comes later in the file used to win outright,
	   silently dropping the other's properties. This button sits later in
	   the source, so it was overwriting .ctb-reveal's opacity/transform
	   transition entirely — the tab bar's scroll-in reveal played with no
	   transition at all (instant snap) instead of a smooth fade+slide, and
	   the fast hover feedback masked how abrupt that first entrance was.
	   Listing all four here keeps the snappy 0.15s hover feedback and
	   restores the intended 0.6s reveal in one non-conflicting list. */
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.6s ease, transform 0.6s ease; cursor: pointer;
}
/* Instant, CSS-only feedback — not tied to the sliding indicator, which only
   moves on click (see main.js) and animates over ~0.35s. Hooking hover to
   that same animated element used to mean the text color could flip to
   white the instant you moused over a button while the green background was
   still mid-transition from wherever it used to be, so the white text sat on
   the bar's plain white background for a moment — i.e. invisible. */
.ctb-filter-btn:hover:not(.is-indicated) { background: rgba(11, 110, 79, 0.08); color: var(--ctb-primary); }
.ctb-filter-btn.is-indicated { color: var(--ctb-white); }
/* No-JS fallback — once main.js builds the sliding indicator it marks the
   bar .ctb-js-ready and this static highlight steps aside. */
.ctb-filter-bar:not(.ctb-js-ready) .ctb-filter-btn.active { background: var(--ctb-primary); color: var(--ctb-white); }
.ctb-filter-indicator {
	/* top/left/width/height are all set inline by main.js, per the exact
	   active button (including which row it's wrapped onto) — the values
	   here are just a sane first-paint default before JS runs. */
	position: absolute; top: 10px; left: 10px; width: 0; height: 38px;
	background: var(--ctb-primary); border-radius: 30px; z-index: 0;
	transition: left 0.35s cubic-bezier(0.65, 0, 0.35, 1), width 0.35s cubic-bezier(0.65, 0, 0.35, 1), top 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (max-width: 700px) {
	.ctb-filter-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
}

/* =========================================================================
   SINGLE PACKAGE PAGE
   ========================================================================= */
/* Masonry hero gallery — 1 large image left, 2x2 thumbnail grid right,
   "View all" overlay on the last visible thumbnail opens the lightbox. */
.ctb-gallery {
	display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px;
	margin-top: 24px; border-radius: var(--ctb-radius); overflow: hidden; height: 440px;
}
.ctb-gallery-main { display: block; height: 100%; overflow: hidden; }
.ctb-gallery-main img,
.ctb-gallery-thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transform: scale(1);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
	backface-visibility: hidden;
}
.ctb-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 100%; }
.ctb-gallery-thumb { position: relative; display: block; height: 100%; overflow: hidden; }
.ctb-gallery-main:hover img, .ctb-gallery-thumb:hover img { transform: scale(1.06); }
.ctb-gallery-viewall-overlay {
	position: absolute; inset: 0; background: rgba(10, 25, 20, 0.55); color: var(--ctb-white);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	font-weight: 700; font-size: 15px; text-align: center; line-height: 1.4;
}
.ctb-gallery-viewall-label { font-size: 12px; font-weight: 600; text-decoration: underline; margin-top: 2px; }
@media (max-width: 782px) {
	.ctb-gallery { grid-template-columns: 1fr; height: auto; }
	.ctb-gallery-main { height: 220px; }
	.ctb-gallery-grid { height: 160px; }
}

/* Lightbox */
.ctb-lightbox {
	position: fixed; inset: 0; background: rgba(10, 15, 13, 0.94); z-index: 9999;
	display: flex; align-items: center; justify-content: center;
}
.ctb-lightbox[hidden] { display: none; }
.ctb-lightbox-stage { max-width: 88vw; max-height: 82vh; }
.ctb-lightbox-stage img { max-width: 88vw; max-height: 82vh; object-fit: contain; display: block; margin: 0 auto; border-radius: 6px; }
.ctb-lightbox-close, .ctb-lightbox-prev, .ctb-lightbox-next {
	position: absolute; background: rgba(255,255,255,0.12); color: var(--ctb-white); border: none;
	border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ctb-lightbox-close:hover, .ctb-lightbox-prev:hover, .ctb-lightbox-next:hover { background: rgba(255,255,255,0.25); }
.ctb-lightbox-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 26px; }
.ctb-lightbox-prev, .ctb-lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; }
.ctb-lightbox-prev { left: 16px; }
.ctb-lightbox-next { right: 16px; }
.ctb-lightbox-counter {
	position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
	color: var(--ctb-white); font-size: 14px; background: rgba(255,255,255,0.12); padding: 4px 14px; border-radius: 20px;
}

.ctb-package-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; padding: 20px 0 60px; align-items: start; }
.ctb-related-packages { padding: 10px 0 60px; border-top: 1px solid var(--ctb-border); margin-top: -20px; }
.ctb-related-packages h2 { margin-bottom: 20px; }
/* Guest Reviews now sits between the layout and this section (see
   single-ctb_package.php) instead of directly after it — the -20px pull-up
   above was tuned for sitting right under .ctb-package-layout's own bottom
   padding, so re-add normal spacing when Reviews is the one right before it. */
#ctb-reviews + .ctb-related-packages { margin-top: 20px; }
.ctb-package-price-label {
	display: inline-block;
	color: var(--ctb-primary);
	background: rgba(11, 110, 79, 0.1);
	font-weight: 700;
	font-size: 13px;
	padding: 6px 14px;
	border-radius: 20px;
	margin-bottom: 20px;
}
.ctb-rate-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.ctb-rate-table th, .ctb-rate-table td { border: 1px solid var(--ctb-border); padding: 10px 14px; text-align: left; font-size: 14px; }
.ctb-rate-table th { background: var(--ctb-bg-alt); }
.ctb-rate-table-scroll { overflow-x: auto; margin: 20px 0; }
.ctb-transfer-rate-table { margin: 0; white-space: nowrap; }
.ctb-transfer-rate-table th, .ctb-transfer-rate-table td { text-align: center; }
.ctb-transfer-rate-table td:first-child, .ctb-transfer-rate-table th:first-child { text-align: left; white-space: normal; }
/* Headings inside package body content (Sample Itinerary / Inclusions /
   Exclusions / FAQs, etc.) need breathing room ABOVE them too — the base
   h1-h4 rule only sets a bottom margin, which left these looking crammed
   right up against whatever list preceded them. */
.ctb-package-content h4 {
	margin-top: 32px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ctb-border);
	font-family: var(--ctb-font-heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--ctb-text);
	letter-spacing: 0.2px;
}
.ctb-package-content > h4:first-child { margin-top: 0; }

/* Icon list styling shared by inclusions (check), exclusions (x), and
   add-ons (plus) — same 22px circular badge, different mark/color per list. */
.ctb-package-content ul.ctb-inclusions-list,
.ctb-package-content ul.ctb-exclusions-list,
.ctb-addon-list,
.ctb-hotel-upgrade-list {
	list-style: none; margin: 0 0 20px; padding: 0;
}
.ctb-package-content ul.ctb-inclusions-list li,
.ctb-package-content ul.ctb-exclusions-list li,
.ctb-addon-list li,
.ctb-hotel-upgrade-list li {
	position: relative; padding: 8px 0 8px 34px; border-bottom: 1px solid var(--ctb-border);
}
.ctb-package-content ul.ctb-inclusions-list li:last-child,
.ctb-package-content ul.ctb-exclusions-list li:last-child,
.ctb-addon-list li:last-child,
.ctb-hotel-upgrade-list li:last-child {
	border-bottom: none;
}
.ctb-package-content ul.ctb-inclusions-list li::before,
.ctb-package-content ul.ctb-exclusions-list li::before,
.ctb-addon-list li::before,
.ctb-hotel-upgrade-list li::before {
	content: ""; position: absolute; left: 0; top: 10px; width: 22px; height: 22px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; line-height: 1;
}
.ctb-package-content ul.ctb-inclusions-list li::before {
	content: "\2713"; background: rgba(11, 110, 79, 0.12); color: var(--ctb-primary);
}
.ctb-package-content ul.ctb-exclusions-list li::before {
	content: "\2715"; background: rgba(180, 45, 45, 0.1); color: #b42d2d;
}
.ctb-addon-list li::before {
	content: "+"; background: rgba(244, 163, 0, 0.15); color: var(--ctb-accent-dark);
}
.ctb-hotel-upgrade-list li::before {
	content: "\2605"; background: rgba(244, 163, 0, 0.15); color: var(--ctb-accent-dark); font-size: 11px;
}

/* Sample Itinerary — timeline-style rows with a small clock icon per stop. */
.ctb-package-content ul.ctb-itinerary-list {
	list-style: none; margin: 0 0 4px; padding: 0;
}
.ctb-package-content ul.ctb-itinerary-list li {
	position: relative; padding: 9px 0 9px 34px; border-bottom: 1px solid var(--ctb-border);
}
.ctb-package-content ul.ctb-itinerary-list li:last-child { border-bottom: none; }
.ctb-package-content ul.ctb-itinerary-list li::before {
	content: ""; position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border-radius: 50%;
	background-color: rgba(15, 143, 196, 0.12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8fc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 13px 13px;
}
.ctb-package-content ul.ctb-itinerary-list li strong { color: var(--ctb-text); }
.ctb-itinerary-note {
	font-size: 13px; color: var(--ctb-text-light); font-style: italic;
	background: var(--ctb-bg-alt); border-radius: 8px; padding: 10px 14px; margin: 12px 0 4px;
}

/* Tiered pax pricing — the "manually entered, up to 12 pax" rate card
   these rows come from _ctb_pricing_table via CTB_Pricing on the plugin
   side; this is purely the display layer. */
.ctb-tiers-subhead { font-size: 13px; font-weight: 400; color: var(--ctb-text-light); }
.ctb-pricing-tiers {
	display: grid;
	grid-template-columns: repeat(6, 1fr); /* 6 across, 2 rows for the standard 12-pax table */
	gap: 10px;
	margin: 20px 0 10px;
}
@media (max-width: 900px) {
	.ctb-pricing-tiers { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
	.ctb-pricing-tiers { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
.ctb-tier-card {
	position: relative;
	text-align: center;
	background: var(--ctb-white);
	border: 2px solid var(--ctb-border);
	border-radius: var(--ctb-radius);
	padding: 14px 8px;
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ctb-tier-card.is-best { border-color: var(--ctb-accent); }
.ctb-tier-card.is-active {
	border-color: var(--ctb-primary);
	box-shadow: var(--ctb-shadow);
	transform: translateY(-3px);
}
.ctb-tier-badge {
	position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
	background: var(--ctb-accent); color: var(--ctb-white); font-size: 11px; font-weight: 700;
	padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.ctb-tier-pax { font-size: 12px; color: var(--ctb-text-light); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.ctb-tier-price { font-family: var(--ctb-font-heading); font-size: 18px; font-weight: 800; color: var(--ctb-primary); white-space: nowrap; }
.ctb-tier-price span { display: block; font-family: var(--ctb-font-body); font-size: 10px; font-weight: 500; color: var(--ctb-text-light); margin-top: 2px; }
.ctb-tier-foreign { margin-top: 8px; font-size: 12px; color: var(--ctb-ocean); }
.ctb-tiers-note { font-size: 13px; color: var(--ctb-text-light); }

.ctb-location-map {
	height: 320px; width: 100%; border-radius: var(--ctb-radius);
	border: 1px solid var(--ctb-border); margin: 20px 0 10px; background: var(--ctb-bg-alt);
}

.ctb-package-sidebar { position: sticky; top: 20px; }
.ctb-booking-box { background: var(--ctb-white); border: 1px solid var(--ctb-border); border-radius: var(--ctb-radius); padding: 24px; box-shadow: var(--ctb-shadow); }

/* =========================================================================
   BLOG / GENERIC PAGE CONTENT
   ========================================================================= */
.ctb-post-card { margin-bottom: 40px; }
.ctb-post-meta { color: var(--ctb-text-light); font-size: 13px; }
.ctb-page-content, .ctb-post-excerpt { color: var(--ctb-text); }
.ctb-page-content p, .ctb-post-excerpt p { margin: 0 0 16px; }
.ctb-404 { text-align: center; padding: 80px 0; }
.ctb-404 form { display: flex; gap: 10px; max-width: 420px; margin: 24px auto; }

/* =========================================================================
   /thank-you/ — landed on after every booking submission, any payment
   method (see page-thank-you.php). Bank Transfer and Maya's redirect-back
   both route here.
   ========================================================================= */
.ctb-thankyou { text-align: center; padding: 50px 0 70px; }
.ctb-thankyou-icon {
	width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}
.ctb-thankyou-icon svg { width: 30px; height: 30px; }
.ctb-thankyou-icon--success { background: rgba(11, 110, 79, 0.12); color: var(--ctb-primary); }
.ctb-thankyou-icon--pending { background: rgba(244, 163, 0, 0.14); color: var(--ctb-accent-dark); }
.ctb-thankyou-icon--failed { background: rgba(214, 69, 69, 0.12); color: #d64545; }
.ctb-thankyou h1 { margin-bottom: 10px; }
.ctb-thankyou-lede { color: var(--ctb-text-light); font-size: 15px; max-width: 520px; margin: 0 auto 24px; }

.ctb-thankyou-summary {
	max-width: 420px; margin: 0 auto 32px; text-align: left;
	border: 1px solid var(--ctb-border); border-radius: var(--ctb-radius); overflow: hidden;
}
.ctb-thankyou-summary-row {
	display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px;
	font-size: 14px; border-bottom: 1px solid var(--ctb-border);
}
.ctb-thankyou-summary-row:last-child { border-bottom: none; }
.ctb-thankyou-summary-row span:first-child { color: var(--ctb-text-light); }
.ctb-thankyou-summary-row span:last-child { font-weight: 600; }
.ctb-thankyou-summary-total { background: var(--ctb-bg-alt); }
.ctb-thankyou-summary-total span { font-size: 16px; }

.ctb-bank-details {
	max-width: 480px; margin: 0 auto 32px; text-align: left;
	background: var(--ctb-bg-alt); border: 1px solid var(--ctb-border); border-radius: var(--ctb-radius);
	padding: 22px 24px;
}
.ctb-bank-details h2 { font-size: 17px; margin: 0 0 12px; }
.ctb-bank-details-text {
	white-space: pre-line; font-family: inherit; font-size: 14px; line-height: 1.7;
	color: var(--ctb-text); margin: 0; background: none; border: none; padding: 0;
}
.ctb-bank-details-note { font-size: 13px; color: var(--ctb-text-light); margin: 14px 0 0; }

.ctb-thankyou-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 600px) {
	.ctb-thankyou-summary, .ctb-bank-details { text-align: left; }
	.ctb-thankyou-actions { flex-direction: column; align-items: stretch; }
}
.ctb-404 input[type="search"] { flex: 1; padding: 12px; border: 1px solid var(--ctb-border); border-radius: 6px; }
.ctb-404 button { padding: 12px 20px; border: 0; background: var(--ctb-primary); color: var(--ctb-white); border-radius: 6px; cursor: pointer; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
	.ctb-mobile-toggle { display: flex; }
	/* Grid centering only makes sense with 3 side-by-side columns — below
	   this width the nav drops into an absolutely-positioned dropdown (see
	   .ctb-primary-nav rules just below), so go back to a simple 2-item
	   space-between row for logo + actions. */
	.ctb-header-inner { display: flex; justify-content: space-between; }
	.ctb-primary-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ctb-white);
		box-shadow: var(--ctb-shadow); max-height: 80vh; overflow-y: auto;
	}
	.ctb-primary-nav.is-open { display: block; }
	.ctb-mega-menu { flex-direction: column; }
	.ctb-mega-menu ul.sub-menu { position: static; box-shadow: none; display: none; padding-left: 16px; }
	.ctb-mega-menu li.is-open > ul.sub-menu { display: block; }
	.ctb-mega-menu ul.sub-menu ul.sub-menu { left: 0; }
	.ctb-header-phone-btn { display: none; }

	.ctb-hero-heading { font-size: 30px; }
	.ctb-get-in-touch-grid { grid-template-columns: 1fr; }
	.ctb-package-layout { grid-template-columns: 1fr; }
	.ctb-package-sidebar { position: static; }

	/* Topbar address: the full street address wraps to 3 lines and crowds
	   the mobile header — swap it for a short "View on Google Maps" link
	   (same href, still opens directions) once the layout is this narrow. */
	.ctb-topbar-address-full { display: none; }
	.ctb-topbar-address-short { display: inline-flex; }

	/* Floating "Book This Tour" bar (single package pages only, added via
	   .ctb-mobile-book-bar in single-ctb_package.php) — the booking form
	   sits far down the page on mobile, so surface a persistent shortcut. */
	.ctb-mobile-book-bar { display: flex; }
	body.single-ctb_package .ctb-scroll-top { bottom: 78px; }
	body.single-ctb_package { padding-bottom: 60px; }
}

/* =========================================================================
   REVIEWS — star rating display (grid cards + single package), the
   review-summary link under the H1, the full review list, and the
   star-picker on the submission form (native WP comment_form()).
   ========================================================================= */

/* Fractional-fill star renderer: an empty outline star with a solid star
   layered on top and clipped to --ctb-star-fill (0-100%) via inset(). */
.ctb-stars { display: inline-flex; align-items: center; gap: 2px; line-height: 0; }
.ctb-star { position: relative; width: 16px; height: 16px; display: inline-block; color: var(--ctb-accent); }
.ctb-star-empty,
.ctb-star-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ctb-star-empty { color: var(--ctb-border); }
.ctb-star-fill { clip-path: inset(0 calc(100% - var(--ctb-star-fill, 0%)) 0 0); }

/* Package card (grid) rating row */
.ctb-package-card-rating { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; }
.ctb-package-card-rating .ctb-star { width: 14px; height: 14px; }
.ctb-package-card-rating-count { font-size: 12px; color: var(--ctb-text-light); }

/* Single package: rating summary link under the H1 */
.ctb-package-rating-summary {
	display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 14px;
	font-size: 14px; color: var(--ctb-text); text-decoration: none;
}
.ctb-package-rating-summary:hover { color: var(--ctb-primary); }
.ctb-package-rating-summary .ctb-star { width: 15px; height: 15px; }
.ctb-package-rating-summary span { color: var(--ctb-text-light); }

/* Reviews section */
.ctb-reviews-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--ctb-border); scroll-margin-top: 90px; }
.ctb-reviews-section h2 { font-size: 22px; margin-bottom: 20px; }
.ctb-reviews-section .ctb-tiers-subhead { font-family: var(--ctb-font-body); font-weight: 400; font-size: 14px; color: var(--ctb-text-light); }

.ctb-review-list { display: grid; gap: 16px; margin-bottom: 32px; }
.ctb-review-card {
	background: var(--ctb-bg-alt); border: 1px solid var(--ctb-border); border-radius: var(--ctb-radius);
	padding: 18px 20px;
}
.ctb-review-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ctb-review-verified {
	display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
	color: var(--ctb-primary); background: rgba(11, 110, 79, 0.1); padding: 3px 9px; border-radius: 20px;
}
.ctb-review-author { margin: 0 0 6px; font-weight: 600; font-size: 14px; }
.ctb-review-date { font-weight: 400; color: var(--ctb-text-light); font-size: 12px; margin-left: 6px; }
.ctb-review-text { font-size: 14px; color: var(--ctb-text); }
.ctb-review-text p { margin: 0 0 8px; }
.ctb-review-text p:last-child { margin-bottom: 0; }
.ctb-empty-state { color: var(--ctb-text-light); font-size: 14px; }

/* Email-gate shown in front of the review form — see assets/js/review-gate.js
   and CTB_Reviews::ajax_check_eligibility() in the plugin. */
.ctb-review-gate {
	max-width: 560px; background: var(--ctb-bg-alt); border: 1px solid var(--ctb-border);
	border-radius: var(--ctb-radius); padding: 22px 24px;
}
.ctb-review-gate h3 { font-size: 18px; margin-bottom: 6px; }
.ctb-review-gate p { font-size: 14px; color: var(--ctb-text-light); margin-bottom: 16px; }
.ctb-review-gate-row { display: flex; gap: 10px; }
.ctb-review-gate-email {
	flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--ctb-border); border-radius: var(--ctb-radius);
	font-family: var(--ctb-font-body); font-size: 14px; background: var(--ctb-white); transition: border-color 0.2s, box-shadow 0.2s;
}
.ctb-review-gate-email:focus { outline: none; border-color: var(--ctb-primary); box-shadow: 0 0 0 3px rgba(11, 110, 79, 0.12); }
.ctb-review-gate-submit {
	appearance: none; border: none; cursor: pointer; font-family: var(--ctb-font-body); white-space: nowrap;
	background: var(--ctb-accent); color: var(--ctb-white); font-weight: 600; font-size: 14px;
	padding: 11px 22px; border-radius: 999px; transition: background-color 0.2s, transform 0.15s;
}
.ctb-review-gate-submit:hover { background: var(--ctb-accent-dark); transform: translateY(-1px); }
.ctb-review-gate-submit:disabled { opacity: 0.7; cursor: default; transform: none; }
.ctb-review-gate-error { color: #d64545 !important; font-weight: 600; margin: 12px 0 0; }
@media (max-width: 480px) {
	.ctb-review-gate-row { flex-direction: column; }
}

/* Review submission form (wraps WP's native comment_form()) */
.ctb-review-form #respond { max-width: 560px; }
.ctb-review-form #reply-title { font-size: 18px; margin-bottom: 6px; }
.ctb-review-form .comment-notes { font-size: 13px; color: var(--ctb-text-light); margin-bottom: 16px; }
.ctb-review-form .comment-form-rating,
.ctb-review-form .comment-form-comment,
.ctb-review-form .comment-form-author,
.ctb-review-form .comment-form-email,
.ctb-review-form .comment-form-url { margin-bottom: 16px; }
.ctb-review-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ctb-review-form .required { color: #d64545; }
.ctb-review-form input[type="text"],
.ctb-review-form input[type="email"],
.ctb-review-form input[type="url"],
.ctb-review-form textarea {
	width: 100%; padding: 11px 14px; border: 1px solid var(--ctb-border); border-radius: var(--ctb-radius);
	font-family: var(--ctb-font-body); font-size: 14px; background: var(--ctb-white); transition: border-color 0.2s, box-shadow 0.2s;
}
.ctb-review-form input[type="text"]:focus,
.ctb-review-form input[type="email"]:focus,
.ctb-review-form input[type="url"]:focus,
.ctb-review-form textarea:focus {
	outline: none; border-color: var(--ctb-primary); box-shadow: 0 0 0 3px rgba(11, 110, 79, 0.12);
}
.ctb-review-form textarea { resize: vertical; min-height: 110px; }
.ctb-review-form .form-submit { margin: 0; }
.ctb-review-form input[type="submit"] {
	appearance: none; border: none; cursor: pointer; font-family: var(--ctb-font-body);
	background: var(--ctb-accent); color: var(--ctb-white); font-weight: 600; font-size: 14px;
	padding: 12px 28px; border-radius: var(--ctb-radius); transition: background 0.2s, transform 0.15s;
}
.ctb-review-form input[type="submit"]:hover { background: var(--ctb-accent-dark); transform: translateY(-1px); }

/* Star picker: radios rendered 5→1 in the DOM, row-reverse flips them to
   1→5 visually, and the `~` sibling selector lights up everything from the
   hovered/checked star through to the end of the (reversed) row. */
.ctb-star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.ctb-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.ctb-star-input label {
	font-size: 26px; line-height: 1; color: var(--ctb-border); cursor: pointer; margin: 0;
	transition: color 0.15s;
}
.ctb-star-input input:checked ~ label,
.ctb-star-input label:hover,
.ctb-star-input label:hover ~ label { color: var(--ctb-accent); }

@media (max-width: 700px) {
	.ctb-review-form #respond { max-width: none; }
}