/* ═══════════════════════════════════════════════════════════════
TRIP DUST — page templates
Booking.com / Agoda-inspired utilitarian design system.
Rules:
- ONE brand colour (deep blue) + ONE CTA colour (yellow) + neutrals.
- Inter only. No serif, no display face, no decorative weights above 700.
- 4px corner radius. Never more.
- 1px borders for separation. Zero box-shadows. Zero gradients (except hero overlay).
- No animations, no transforms, no keyframes, no pulsing dots.
- Dense typography. Smaller spacing rhythm than the previous designs.
═══════════════════════════════════════════════════════════════ */
body.td-page {
/* Brand — deep blue (Booking-style) */
--td-blue: #003B95; /* primary brand — headings, nav, accents */
--td-blue-deep: #002D70; /* hover */
--td-blue-soft: #EBF3FF; /* very pale tint for highlight bg */
--td-link: #0071C2; /* link / secondary actions */
/* CTA — Booking's "Genius" yellow */
--td-cta: #FEBB02;
--td-cta-deep: #E9A800;
/* Neutrals */
--td-text: #262626;
--td-text-muted: #6B6B6B;
--td-text-soft: #595959;
--td-bg: #FFFFFF;
--td-bg-soft: #F5F5F5;
--td-bg-alt: #FAFAFA;
--td-border: #E7E7E7;
--td-border-strong: #BDBDBD;
/* Functional */
--td-success: #008234; /* prices, "available" */
--td-warning: #C84600; /* sold-out, urgent */
/* Shape */
--td-radius: 4px; /* the only radius */
--td-radius-pill: 999px; /* reserved for "free shipping"-style chips ONLY */
/* Type */
--td-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
/* Legacy aliases — kept so existing utility classes don't break */
--td-ink: var(--td-text);
--td-ink-soft: var(--td-text-soft);
--td-ink-muted: var(--td-text-muted);
--td-line: var(--td-border);
--td-line-soft: var(--td-border);
--td-bg-cream: var(--td-bg-soft);
--td-paper: var(--td-bg);
--td-cream: var(--td-bg-soft);
--td-coral: var(--td-cta);
--td-coral-deep: var(--td-cta-deep);
--td-coral-soft: var(--td-blue-soft);
--td-teal: var(--td-blue);
--td-teal-deep: var(--td-blue-deep);
--td-teal-soft: var(--td-blue-soft);
--td-forest: var(--td-blue);
--td-forest-deep: var(--td-blue-deep);
--td-forest-soft: var(--td-blue-soft);
--td-orange: var(--td-cta);
--td-orange-deep: var(--td-cta-deep);
--td-gold: var(--td-cta);
--td-gold-soft: var(--td-blue-soft);
--td-font-display: var(--td-font); /* no serif anywhere */
--td-ease: ease;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.td-page {
font-family: var(--td-font);
color: var(--td-text);
background: var(--td-bg);
line-height: 1.5;
font-size: 14px; /* Booking-density baseline */
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
.td-wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
a { color: var(--td-link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════════
Site chrome — top bar + nav
═══════════════════════════════════════════════════════════════ */
.td-top {
background: var(--td-blue);
border-bottom: 0;
position: sticky; top: 0; z-index: 10;
}
.td-top__bar { background: var(--td-blue); border: 0; }
.td-top__inner {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 16px; gap: 16px;
}
.td-brand { display: flex; flex-direction: column; line-height: 1; gap: 2px; }
.td-brand__mark { font-weight: 700; font-size: 18px; color: #fff; letter-spacing: -0.01em; }
.td-brand__tag { font-size: 10px; color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.td-top__contact { display: flex; gap: 14px; align-items: center; }
.td-contact { font-size: 13px; color: rgba(255,255,255,0.9); font-weight: 500; }
.td-contact:hover { color: #fff; text-decoration: underline; }
.td-contact--wa {
background: var(--td-cta); color: var(--td-text);
padding: 6px 12px; border-radius: var(--td-radius);
font-weight: 700; font-size: 13px;
}
.td-contact--wa:hover { background: var(--td-cta-deep); color: var(--td-text); text-decoration: none; }
.td-nav { background: #fff; border-bottom: 1px solid var(--td-border); }
.td-nav__inner { display: flex; gap: 0; padding: 0; overflow-x: visible; }
.td-nav__link {
display: inline-flex; align-items: center; padding: 12px 16px;
color: var(--td-text); font-weight: 500; font-size: 14px;
border-bottom: 3px solid transparent;
}
.td-nav__link:hover { color: var(--td-link); text-decoration: none; }
.td-nav__link.is-current { border-bottom-color: var(--td-cta); color: var(--td-blue); font-weight: 600; }
.td-nav__link--cta {
margin-left: auto;
background: var(--td-cta); color: var(--td-text);
border-radius: var(--td-radius);
padding: 6px 14px;
align-self: center;
font-weight: 700; font-size: 13px;
border-bottom: 0;
}
.td-nav__link--cta:hover { background: var(--td-cta-deep); color: var(--td-text); }
/* ═══════════════════════════════════════════════════════════════
MEGA-NAV — per-city dropdown panels (desktop only)
Each city link is wrapped in .td-nav__item (position: relative).
On hover OR keyboard focus-within, a .td-nav__panel card appears
below it with a 2-col grid of that city's top activities.
Panels are force-hidden at/below the 720px mobile breakpoint so
the horizontal-scroll city nav stays clean on touch (see bottom).
NOTE: the global design system is "zero box-shadows"; we make a
deliberate, scoped exception here — a single soft shadow on the
panel card only — because a floating mega-menu needs depth to
read as an overlay. No other element gains a shadow.
═══════════════════════════════════════════════════════════════ */
/* Wrapper keeps the city sized exactly like the other nav links
(it's a flex child of .td-nav__inner) and anchors the panel. */
.td-nav__item { position: relative; display: flex; align-items: stretch; }
.td-nav__item .td-nav__link { display: inline-flex; align-items: center; gap: 4px; }
/* Small chevron on city links that own a panel */
.td-nav__caret { font-size: 10px; line-height: 1; color: var(--td-text-muted); }
.td-nav__item--has-panel:hover .td-nav__caret,
.td-nav__item--has-panel:focus-within .td-nav__caret { color: var(--td-link); }
/* The floating card — hidden by default */
.td-nav__panel {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 30;
min-width: 340px;
max-width: 460px;
background: var(--td-bg);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); /* scoped exception */
padding: 12px;
}
/* Reveal on hover AND on keyboard focus-within (accessibility) */
.td-nav__item:hover .td-nav__panel,
.td-nav__item:focus-within .td-nav__panel { display: block; }
/* 2-column grid of activity links */
.td-nav__panel-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 14px;
}
.td-nav__panel-link {
display: block;
padding: 7px 8px;
font-size: 13.5px;
line-height: 1.3;
color: var(--td-text);
border-radius: var(--td-radius);
text-decoration: none;
}
.td-nav__panel-link:hover,
.td-nav__panel-link:focus {
background: var(--td-blue-soft);
color: var(--td-blue);
text-decoration: none;
}
/* Bottom "View all …" link */
.td-nav__panel-all {
display: block;
margin-top: 8px;
padding: 9px 8px 4px;
border-top: 1px solid var(--td-border);
font-size: 13px;
font-weight: 700;
color: var(--td-link);
text-decoration: none;
}
.td-nav__panel-all:hover,
.td-nav__panel-all:focus { color: var(--td-blue); text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════════
Buttons — flat, 4px radius, no shadow, no transform
═══════════════════════════════════════════════════════════════ */
.td-btn {
display: inline-block;
padding: 10px 18px;
border-radius: var(--td-radius);
font-weight: 600; font-size: 14px;
text-decoration: none; cursor: pointer;
border: 1px solid transparent;
font-family: inherit;
line-height: 1.4;
}
.td-btn:hover { text-decoration: none; }
.td-btn--lg { padding: 12px 22px; font-size: 15px; }
.td-btn--primary,
.td-btn.td-btn--solid {
background: var(--td-cta); color: var(--td-text);
}
.td-btn--primary:hover,
.td-btn.td-btn--solid:hover {
background: var(--td-cta-deep); color: var(--td-text);
}
.td-btn--wa { background: var(--td-cta); color: var(--td-text); font-weight: 700; }
.td-btn--wa:hover { background: var(--td-cta-deep); color: var(--td-text); }
.td-btn--ghost {
background: transparent; color: #fff;
border-color: rgba(255,255,255,0.5);
}
.td-btn--ghost:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: #fff; }
.td-btn--ghost-light {
background: transparent; color: var(--td-link);
border-color: var(--td-link);
}
.td-btn--ghost-light:hover { background: var(--td-link); color: #fff; }
/* ═══════════════════════════════════════════════════════════════
HOME (/) — destination hub
═══════════════════════════════════════════════════════════════ */
.td-h-hero {
background: var(--td-blue);
color: #fff;
padding: 32px 0 28px;
border-bottom: 1px solid var(--td-border);
}
.td-h-hero__bg { display: none; } /* kill the gradients */
.td-h-hero__inner { max-width: 920px; }
.td-h-hero__eyebrow {
display: inline-block;
font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
color: rgba(255,255,255,0.85);
margin: 0 0 12px;
}
.td-h-hero__dot { display: none; }
.td-h-hero__title {
font-family: var(--td-font);
font-weight: 700;
font-size: clamp(26px, 3.6vw, 36px);
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0 0 10px;
color: #fff;
}
.td-h-hero__sub {
font-size: 15px;
color: rgba(255,255,255,0.9);
max-width: 640px;
margin: 0 0 18px;
line-height: 1.5;
}
.td-h-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.td-h-hero__stats {
list-style: none; padding: 14px 0 0; margin: 0;
display: flex; gap: 32px; flex-wrap: wrap;
border-top: 1px solid rgba(255,255,255,0.18);
}
.td-h-hero__stats li {
font-size: 12px;
color: rgba(255,255,255,0.85);
padding: 0;
border: 0;
}
.td-h-hero__stats strong {
display: block;
font-size: 18px; font-weight: 700;
color: #fff; line-height: 1.1;
font-family: var(--td-font);
margin-bottom: 2px;
}
/* Credentials strip — Tier 2 (Since YYYY + TAT + travellers + Ripple) */
.td-h-credentials {
background: var(--td-blue-soft);
border-bottom: 1px solid var(--td-border);
padding: 18px 0;
}
.td-h-credentials__row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.td-h-credentials__item {
display: flex; flex-direction: column; gap: 2px;
border-left: 3px solid var(--td-blue);
padding-left: 12px;
}
.td-h-credentials__item strong {
font-size: 13px; font-weight: 700; color: var(--td-blue); letter-spacing: -0.005em;
}
.td-h-credentials__item span {
font-size: 12px; color: var(--td-text-muted);
}
/* "Best time to visit" month strip — Tier 2 */
.td-months {
list-style: none; padding: 0; margin: 0 0 12px;
display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
overflow: hidden;
}
.td-month { display: flex; flex-direction: column; align-items: center; padding: 14px 4px 12px; text-align: center; font-size: 11px; }
.td-month__name { font-weight: 700; color: var(--td-text); font-size: 12px; margin-bottom: 4px; }
.td-month__rating { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.td-month--best { background: #DCFCE7; }
.td-month--best .td-month__rating { color: #15803D; }
.td-month--good { background: var(--td-blue-soft); }
.td-month--good .td-month__rating { color: var(--td-blue); }
.td-month--ok { background: var(--td-bg-soft); }
.td-month--ok .td-month__rating { color: var(--td-text-muted); }
.td-month--avoid { background: #FEE2E2; }
.td-month--avoid .td-month__rating { color: #B91C1C; }
.td-months__legend { font-size: 12px; color: var(--td-text-muted); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 0; }
.td-month__dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.td-month__dot--best { background: #DCFCE7; border: 1px solid #15803D; }
.td-month__dot--good { background: var(--td-blue-soft); border: 1px solid var(--td-blue); }
.td-month__dot--avoid { background: #FEE2E2; border: 1px solid #B91C1C; }
@media (max-width: 720px) {
.td-months { grid-template-columns: repeat(6, 1fr); }
}
/* "How it works" 4-step diagram — Tier 2 */
.td-h-howitworks { padding: 32px 0; background: var(--td-bg); border-bottom: 1px solid var(--td-border); }
.td-h-steps {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.td-h-step {
position: relative;
background: var(--td-bg-soft);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
padding: 20px 18px 18px;
}
.td-h-step__num {
position: absolute; top: -14px; left: 18px;
width: 28px; height: 28px; border-radius: 50%;
background: var(--td-blue); color: #fff;
font-weight: 700; font-size: 14px;
display: flex; align-items: center; justify-content: center;
}
.td-h-step__title { margin: 8px 0 6px; font-size: 15px; font-weight: 700; color: var(--td-text); }
.td-h-step__desc { margin: 0; font-size: 13px; color: var(--td-text-soft); line-height: 1.5; }
@media (max-width: 900px) {
.td-h-credentials__row { grid-template-columns: repeat(2, 1fr); }
.td-h-steps { grid-template-columns: 1fr; }
}
/* Trust strip */
.td-h-trust { background: var(--td-bg); border-bottom: 1px solid var(--td-border); padding: 24px 0; }
.td-h-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.td-h-trust__item { display: flex; gap: 10px; align-items: flex-start; }
.td-h-trust__icon {
flex: 0 0 32px; width: 32px; height: 32px;
border-radius: var(--td-radius);
background: var(--td-blue-soft); color: var(--td-blue);
display: flex; align-items: center; justify-content: center;
}
.td-h-trust__icon svg { width: 18px; height: 18px; }
.td-h-trust__item h3 { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--td-text); }
.td-h-trust__item p { margin: 0; font-size: 12px; color: var(--td-text-muted); line-height: 1.45; }
/* Section heads */
.td-h-section-head { margin: 0 0 20px; max-width: 720px; }
.td-h-section-head--row {
max-width: none;
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.td-h-section-eyebrow {
display: inline-block;
font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--td-text-muted);
margin: 0 0 6px;
}
.td-h-section-title {
font-family: var(--td-font);
font-weight: 700;
font-size: 22px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--td-text);
margin: 0 0 4px;
}
.td-h-section-sub { font-size: 14px; color: var(--td-text-muted); margin: 0; }
.td-h-section-link {
font-size: 13px; font-weight: 600; color: var(--td-link);
white-space: nowrap;
}
.td-h-section-link:hover { text-decoration: underline; }
/* Destinations */
.td-h-dest { padding: 32px 0; background: var(--td-bg); }
.td-h-dest__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.td-h-dest__item { display: block; }
.td-h-dest__card {
display: flex; flex-direction: column; height: 100%;
border: 1px solid var(--td-border); border-radius: 16px; overflow: hidden;
background: #fff; color: inherit; text-decoration: none;
box-shadow: 0 2px 8px rgba(16,24,40,.06);
transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.td-h-dest__item.is-live .td-h-dest__card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.10); transform: translateY(-3px); border-color: #d7e2f4; }
.td-h-dest__item.is-soon .td-h-dest__card { cursor: default; }
.td-h-dest__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--td-bg-soft, #f4f6f8); }
.td-h-dest__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.td-h-dest__item.is-soon .td-h-dest__img { filter: grayscale(85%) opacity(.9); }
.td-h-dest__shade { display: none; }
.td-h-dest__badge {
position: absolute; top: 9px; right: 9px;
background: rgba(17,17,17,.82); color: #fff;
font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
padding: 4px 9px; border-radius: 999px;
}
.td-h-dest__caption { display: flex; align-items: center; gap: 8px; padding: 13px 14px; }
.td-h-dest__name { font-family: var(--td-font); font-size: 16px; font-weight: 700; line-height: 1.1; color: var(--td-text); }
.td-h-dest__item.is-soon .td-h-dest__name { color: #9aa0a6; }
.td-h-dest__tag { font-size: 12.5px; font-weight: 600; color: var(--td-success); margin-left: auto; white-space: nowrap; }
.td-h-dest__arrow { font-size: 15px; font-weight: 700; color: var(--td-link); margin-left: 2px; }
/* Featured activities */
.td-h-featured { padding: 32px 0; background: var(--td-bg-soft); }
.td-h-feat__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.td-h-feat__card {
display: flex; flex-direction: column; gap: 6px;
background: var(--td-bg);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
padding: 14px 16px;
color: var(--td-text);
text-decoration: none;
height: 100%;
}
.td-h-feat__card:hover { border-color: var(--td-link); text-decoration: none; }
.td-h-feat__chip {
align-self: flex-start;
font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--td-blue);
background: var(--td-blue-soft);
padding: 2px 8px; border-radius: var(--td-radius);
}
.td-h-feat__title {
font-family: var(--td-font);
font-size: 15px; font-weight: 700; line-height: 1.3;
color: var(--td-text);
margin: 4px 0 0;
}
.td-h-feat__meta { font-size: 12px; color: var(--td-text-muted); }
.td-h-feat__price-row {
display: flex; align-items: baseline; gap: 6px;
margin-top: auto; padding-top: 8px;
border-top: 1px solid var(--td-border);
}
.td-h-feat__price-label { font-size: 11px; color: var(--td-text-muted); }
.td-h-feat__price { font-size: 16px; font-weight: 700; color: var(--td-text); }
.td-h-feat__cod {
font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
color: var(--td-success); background: transparent;
padding: 0;
margin-left: auto;
}
/* Testimonials */
.td-h-quotes { padding: 32px 0; background: var(--td-bg); border-top: 1px solid var(--td-border); }
.td-h-quotes__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.td-h-quote {
background: var(--td-bg);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
padding: 16px 18px;
}
.td-h-quote__stars { color: var(--td-cta-deep); font-size: 13px; margin: 0 0 8px; letter-spacing: 1px; }
.td-h-quote blockquote {
margin: 0 0 10px;
font-family: var(--td-font);
font-size: 14px; line-height: 1.5;
color: var(--td-text);
font-weight: 400;
}
.td-h-quote__by { margin: 0; font-size: 12px; color: var(--td-text-muted); }
.td-h-quote__by strong { color: var(--td-text); font-weight: 600; }
/* Final CTA */
.td-h-cta { background: var(--td-blue); color: #fff; padding: 24px 0; }
.td-h-cta::before { display: none; }
.td-h-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.td-h-cta__title { font-family: var(--td-font); font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.td-h-cta__sub { color: rgba(255,255,255,0.85); font-size: 13px; margin: 0; }
.td-h-cta__actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ═══════════════════════════════════════════════════════════════
COUNTRY (/thailand/) — mirrors production sections
═══════════════════════════════════════════════════════════════ */
.td-c-hero {
background: var(--td-blue);
color: #fff;
padding: 40px 0;
min-height: auto;
display: block;
background-image: none !important;
}
.td-c-hero__shade { display: none; }
.td-c-hero__inner { max-width: 820px; }
.td-c-hero__title {
font-family: var(--td-font);
font-weight: 700;
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0 0 8px;
color: #fff;
}
.td-c-hero__sub { font-size: 14px; color: rgba(255,255,255,0.9); line-height: 1.5; max-width: 640px; margin: 0 0 18px; }
.td-c-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.td-c-section { padding: 32px 0; background: var(--td-bg); border-bottom: 1px solid var(--td-border); }
.td-c-section--alt { background: var(--td-bg-soft); }
/* tile sections share a white bg — separation comes from 1px borders, not stripes */
.td-c-section--tiles { padding: 28px 0; background: var(--td-bg); border-bottom: 1px solid var(--td-border); }
.td-c-section--tiles + .td-c-section--tiles { padding-top: 28px; }
.td-c-h {
font-family: var(--td-font);
font-weight: 700;
font-size: 22px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--td-text); /* not orange — neutral */
margin: 0 0 16px;
text-align: left; /* not centered */
}
.td-c-h--dark { color: var(--td-text); text-align: left; }
.td-c-lead { font-size: 14px; line-height: 1.55; color: var(--td-text-soft); margin: 0 0 18px; max-width: 720px; text-align: left; }
/* Cities We Cover */
.td-c-cities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.td-c-city__card {
position: relative; display: block;
aspect-ratio: 4/3;
border-radius: var(--td-radius);
overflow: hidden;
color: #fff; text-decoration: none;
border: 1px solid var(--td-border);
}
.td-c-city__card:hover { border-color: var(--td-link); text-decoration: none; }
.td-c-city__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.td-c-city__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 28%, rgba(0,0,0,0.85) 100%); }
.td-c-city__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; }
.td-c-city__name { display: block; font-family: var(--td-font); font-weight: 800; font-size: 20px; line-height: 1.12; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.55); }
.td-c-city__tag { display: block; margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.92); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
/* Customize package CTA */
.td-c-build { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: stretch; }
.td-c-build__copy h2 { margin-bottom: 8px; }
.td-c-build__copy .td-c-lead { margin-left: 0; }
.td-c-build__steps { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; max-width: 480px; }
.td-c-build__steps li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--td-text); }
.td-c-build__steps strong { color: var(--td-blue); font-weight: 700; min-width: 18px; }
.td-c-build__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.td-c-build__panel {
background: var(--td-bg);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
padding: 18px 20px;
text-align: left;
}
.td-c-build__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--td-text-muted); margin: 0 0 4px; }
.td-c-build__phone { font-family: var(--td-font); font-weight: 700; font-size: 22px; color: var(--td-blue); margin: 0 0 10px; }
.td-c-build__note { font-size: 12px; color: var(--td-text-muted); margin: 0; line-height: 1.5; }
/* Per-city tile grid — Booking-style 4-card row ─────────── */
.td-c-tile-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.td-c-tile-head h2 { margin: 0; }
.td-c-tile-sub { font-size: 12px; color: var(--td-text-muted); margin: 2px 0 0; }
.td-c-feat-link { font-size: 13px; font-weight: 600; color: var(--td-link); white-space: nowrap; }
.td-c-feat-link:hover { text-decoration: underline; }
.td-c-tiles {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.td-c-tile { display: block; }
.td-c-tile__card {
display: flex; flex-direction: column; height: 100%;
background: var(--td-bg);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
overflow: hidden;
color: var(--td-text);
text-decoration: none;
}
.td-c-tile__card:hover {
border-color: var(--td-link);
text-decoration: none;
}
.td-c-tile__img {
display: block;
aspect-ratio: 4/3;
background-size: cover; background-position: center;
background-color: var(--td-bg-soft);
border-bottom: 1px solid var(--td-border);
}
.td-c-tile__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.td-c-tile__title {
display: block;
font-family: var(--td-font);
font-weight: 700; font-size: 14px; line-height: 1.3;
color: var(--td-text);
}
.td-c-tile__meta { display: block; font-size: 12px; color: var(--td-text-muted); }
.td-c-tile__price-row {
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
margin-top: auto; padding-top: 8px;
border-top: 1px solid var(--td-border);
}
.td-c-tile__price-label { font-size: 11px; color: var(--td-text-muted); }
.td-c-tile__price { font-size: 15px; font-weight: 700; color: var(--td-text); }
.td-c-tile__cod {
font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
color: var(--td-success); margin-left: auto;
}
/* Reviews */
.td-c-reviews { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.td-c-review { background: var(--td-bg); border: 1px solid var(--td-border); border-radius: var(--td-radius); padding: 16px 18px; }
.td-c-review__stars { color: var(--td-cta-deep); font-size: 13px; margin: 0 0 8px; letter-spacing: 1px; }
.td-c-review blockquote { margin: 0 0 10px; font-family: var(--td-font); font-size: 13px; line-height: 1.5; color: var(--td-text); font-weight: 400; }
.td-c-review__by { margin: 0; font-size: 12px; color: var(--td-text-muted); }
.td-c-review__by strong { color: var(--td-text); font-weight: 600; }
/* Contact CTA band */
.td-c-contact { background: var(--td-blue); color: #fff; padding: 28px 0; }
.td-c-contact__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.td-c-contact__title { font-family: var(--td-font); font-weight: 700; font-size: 20px; color: #fff; margin: 0 0 4px; max-width: 560px; }
.td-c-contact__sub { color: rgba(255,255,255,0.85); font-size: 13px; max-width: 560px; margin: 0; line-height: 1.5; }
.td-c-contact__actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ═══════════════════════════════════════════════════════════════
Inner pages — city / activity / system
═══════════════════════════════════════════════════════════════ */
.td-hero { padding: 24px 0; background: var(--td-bg-soft); border-bottom: 1px solid var(--td-border); }
.td-hero--large { padding: 32px 0; }
.td-eyebrow { font-size: 12px; color: var(--td-text-muted); margin: 0 0 6px; text-transform: none; letter-spacing: 0; }
.td-eyebrow a { color: var(--td-link); }
.td-eyebrow__sep { margin: 0 6px; }
.td-hero__title { font-family: var(--td-font); font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; color: var(--td-text); letter-spacing: -0.01em; }
.td-hero--large .td-hero__title { font-size: 28px; }
.td-hero__sub { font-size: 14px; color: var(--td-text-muted); margin: 0 0 12px; max-width: 720px; }
.td-hero__intro { font-size: 15px; line-height: 1.6; color: var(--td-text-soft); margin: 0 0 10px; max-width: 760px; }
.td-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* Badges */
.td-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.td-badge {
display: inline-flex; align-items: center;
padding: 3px 8px;
border-radius: var(--td-radius);
font-size: 11px; font-weight: 600;
background: var(--td-blue-soft); color: var(--td-blue);
border: 0;
}
.td-badge--duration { background: var(--td-blue-soft); color: var(--td-blue); }
.td-badge--cod { background: #E5F4E9; color: var(--td-success); }
.td-badge--closed { background: #FBEAEA; color: #8B1818; }
/* Sections */
.td-section { padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--td-border); background: var(--td-bg); }
/* When .td-section and .td-wrap share one element, keep the wrapper's side gutter —
the `padding` shorthand above used to clobber it, so content hit the screen edges
on mobile. Restore the 16px horizontal gutter for those combined elements. */
.td-section.td-wrap { padding-left: 16px; padding-right: 16px; }
.td-section:last-of-type { border-bottom: 0; }
.td-section--note { background: var(--td-bg-soft); }
.td-section__head { font-family: var(--td-font); font-size: 18px; font-weight: 700; margin: 0 0 14px; color: var(--td-text); letter-spacing: -0.005em; }
.td-prose { font-size: 14px; color: var(--td-text); max-width: 720px; }
.td-prose p { margin: 0 0 10px; line-height: 1.55; }
.td-prose svg { max-width: 18px; max-height: 18px; vertical-align: middle; }
.td-callout { background: var(--td-blue-soft); border-left: 3px solid var(--td-blue); padding: 10px 14px; border-radius: var(--td-radius); font-weight: 500; margin: 0 0 12px; font-size: 13px; }
/* Subpackages */
.td-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.td-sub { border: 1px solid var(--td-border); border-radius: var(--td-radius); padding: 12px 14px; background: var(--td-bg); }
.td-sub__head { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.td-sub__name { margin: 0; font-size: 14px; font-weight: 700; color: var(--td-text); }
.td-tag { display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: var(--td-radius); background: var(--td-bg-soft); color: var(--td-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.td-tag--req { background: var(--td-blue-soft); color: var(--td-blue); }
.td-sub__prices { list-style: none; padding: 0; margin: 0; }
.td-sub__prices li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--td-border); font-size: 13px; }
.td-sub__prices li:last-child { border-bottom: 0; }
.td-sub__prices strong { color: var(--td-text); font-weight: 700; }
/* CTA band */
.td-cta-band { background: var(--td-blue); color: #fff; padding: 18px 0; }
.td-cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.td-cta-band__head { font-family: var(--td-font); font-size: 16px; font-weight: 700; margin: 0; color: #fff; }
.td-cta-band__sub { margin: 2px 0 0; color: rgba(255,255,255,0.85); font-size: 12px; }
.td-cta-band__actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Related / grid (city + activity siblings) */
.td-related, .td-grid {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
}
.td-related__card, .td-card__link {
display: block; padding: 12px 14px;
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
background: var(--td-bg);
color: var(--td-text); text-decoration: none;
}
.td-related__card:hover, .td-card__link:hover { border-color: var(--td-link); text-decoration: none; }
.td-related__title, .td-card__title { display: block; font-family: var(--td-font); font-weight: 700; font-size: 14px; color: var(--td-text); margin: 0 0 4px; line-height: 1.3; }
.td-related__sub, .td-card__sub { display: block; font-size: 12px; color: var(--td-text-muted); margin: 0 0 6px; line-height: 1.45; }
.td-card__meta { font-size: 11px; color: var(--td-text-muted); margin: 6px 0 0; }
.td-card__cod { color: var(--td-success); font-weight: 600; }
.td-grid--cities .td-card__title { font-size: 16px; }
/* Country features grid (Why TripDust) */
.td-features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.td-features li { background: var(--td-bg); padding: 12px 14px; border-radius: var(--td-radius); border: 1px solid var(--td-border); font-size: 13px; color: var(--td-text); line-height: 1.5; }
.td-features li strong { color: var(--td-blue); font-weight: 700; }
/* Footer */
.td-foot { background: var(--td-bg-soft); color: var(--td-text-soft); margin-top: 0; padding: 32px 0 0; border-top: 1px solid var(--td-border); }
.td-foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.td-foot__head { color: var(--td-text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 10px; }
.td-foot__list { list-style: none; padding: 0; margin: 0; }
.td-foot__list li { margin: 4px 0; }
.td-foot a, .td-foot .td-link { color: var(--td-text-soft); font-size: 13px; }
.td-foot a:hover, .td-foot .td-link:hover { color: var(--td-link); text-decoration: underline; }
.td-foot__legal { padding: 14px 0; margin-top: 24px; font-size: 12px; color: var(--td-text-muted); border-top: 1px solid var(--td-border); }
/* ═══════════════════════════════════════════════════════════════
Package Builder (.tdpb-*) — strip the orange/18px/big-shadow look.
The builder is rendered on /thailand/customize-your-package/ inside
.td-widget-host so we scope every override there.
═══════════════════════════════════════════════════════════════ */
/* Suppress our own .td-hero on widget pages (the builder has its own intro) */
.td-page-system--widget .td-hero { display: none; }
.td-section--widget { padding: 0; background: var(--td-bg); border-bottom: 0; }
.td-widget-host { padding: 0; max-width: none; }
/* Re-map the builder's CSS tokens to our palette + flatten everything */
.td-widget-host .tdpb-container {
--tdpb-primary: var(--td-blue);
--tdpb-accent: #003B95;
--tdpb-accent-strong: #002D70;
--tdpb-accent-soft: var(--td-blue-soft);
--tdpb-accent-warm: #002D70;
--tdpb-accent-rgb: 0, 59, 149;
--tdpb-accent-soft-rgb: 235, 243, 255;
--tdpb-ink: var(--td-text);
--tdpb-ink-soft: var(--td-text-soft);
--tdpb-ink-muted: var(--td-text-muted);
--tdpb-surface: var(--td-bg);
--tdpb-surface-muted: var(--td-bg-soft);
--tdpb-border: var(--td-border);
--tdpb-shadow: none;
--tdpb-radius: var(--td-radius);
--tdpb-cta-shadow: none;
--tdpb-font-body: var(--td-font);
font-family: var(--td-font);
color: var(--td-text);
}
/* Heavy-handed flattening for any decorative .tdpb-* element */
.td-widget-host .tdpb-container,
.td-widget-host .tdpb-container * {
box-shadow: none !important;
}
.td-widget-host .tdpb-intro-hero,
.td-widget-host .tdpb-step,
.td-widget-host .tdpb-card,
.td-widget-host [class*="tdpb-panel"],
.td-widget-host [class*="tdpb-box"] {
border-radius: var(--td-radius) !important;
border: 1px solid var(--td-border) !important;
background: var(--td-bg) !important;
padding: 20px !important;
}
/* Intro headline / kicker */
.td-widget-host .tdpb-intro-kicker {
font-size: 11px !important; font-weight: 600 !important;
letter-spacing: 0.12em !important; text-transform: uppercase !important;
color: var(--td-text-muted) !important;
background: transparent !important;
padding: 0 !important;
}
.td-widget-host .tdpb-intro-title,
.td-widget-host h1.tdpb-intro-title,
.td-widget-host h2.tdpb-intro-title {
font-family: var(--td-font) !important;
font-weight: 700 !important;
font-size: 26px !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
color: var(--td-text) !important;
margin: 6px 0 8px !important;
}
.td-widget-host .tdpb-intro-text,
.td-widget-host .tdpb-intro-content p {
font-size: 14px !important;
color: var(--td-text-soft) !important;
line-height: 1.55 !important;
}
/* Buttons — yellow CTA + blue ghost */
.td-widget-host .tdpb-btn,
.td-widget-host button.tdpb-btn,
.td-widget-host .tdpb-cta,
.td-widget-host [class*="tdpb-btn-primary"],
.td-widget-host [class*="tdpb-next"] {
background: var(--td-cta) !important;
color: var(--td-text) !important;
border-radius: var(--td-radius) !important;
padding: 10px 22px !important;
font-weight: 700 !important;
font-size: 14px !important;
border: 0 !important;
box-shadow: none !important;
font-family: var(--td-font) !important;
}
.td-widget-host .tdpb-btn:hover,
.td-widget-host button.tdpb-btn:hover,
.td-widget-host .tdpb-cta:hover {
background: var(--td-cta-deep) !important;
color: var(--td-text) !important;
}
.td-widget-host .tdpb-btn[class*="tdpb-btn-secondary"],
.td-widget-host .tdpb-btn[class*="tdpb-back"],
.td-widget-host .tdpb-btn.tdpb-btn-prev {
background: transparent !important;
color: var(--td-link) !important;
border: 1px solid var(--td-border) !important;
border-radius: var(--td-radius) !important;
}
.td-widget-host .tdpb-btn[class*="tdpb-btn-secondary"]:hover,
.td-widget-host .tdpb-btn.tdpb-btn-prev:hover {
background: var(--td-bg-soft) !important;
border-color: var(--td-link) !important;
}
/* Form inputs */
.td-widget-host .tdpb-container input,
.td-widget-host .tdpb-container select,
.td-widget-host .tdpb-container textarea {
border-radius: var(--td-radius) !important;
border: 1px solid var(--td-border) !important;
padding: 8px 12px !important;
font-family: var(--td-font) !important;
font-size: 14px !important;
background: var(--td-bg) !important;
}
.td-widget-host .tdpb-container input:focus,
.td-widget-host .tdpb-container select:focus {
border-color: var(--td-blue) !important;
outline: 2px solid var(--td-blue-soft) !important;
outline-offset: 0 !important;
}
/* Pills / chips / steppers */
.td-widget-host [class*="tdpb-chip"],
.td-widget-host [class*="tdpb-pill"],
.td-widget-host [class*="tdpb-badge"] {
border-radius: var(--td-radius) !important;
border: 1px solid var(--td-border) !important;
background: var(--td-bg) !important;
color: var(--td-text) !important;
font-weight: 600 !important;
padding: 4px 10px !important;
font-size: 12px !important;
}
.td-widget-host [class*="tdpb-chip"].active,
.td-widget-host [class*="tdpb-chip"].selected,
.td-widget-host [class*="tdpb-chip"][aria-pressed="true"] {
background: var(--td-blue) !important;
color: #fff !important;
border-color: var(--td-blue) !important;
}
/* Progress stepper */
.td-widget-host [class*="tdpb-progress"],
.td-widget-host [class*="tdpb-stepper"] {
background: var(--td-bg-soft) !important;
border-radius: var(--td-radius) !important;
padding: 10px 14px !important;
}
.td-widget-host [class*="tdpb-step-dot"],
.td-widget-host [class*="tdpb-step-num"] {
background: var(--td-bg) !important;
border: 1px solid var(--td-border) !important;
color: var(--td-text-muted) !important;
border-radius: 50% !important;
}
.td-widget-host [class*="tdpb-step-dot"].active,
.td-widget-host [class*="tdpb-step-num"].active {
background: var(--td-blue) !important;
color: #fff !important;
border-color: var(--td-blue) !important;
}
/* Activity / package cards inside the builder.
Use exact class names — NOT [class*=tdpb-activity] which would clobber
.tdpb-activity-image and break the background-image. */
.td-widget-host .tdpb-activity-card,
.td-widget-host .tdpb-package-card,
.td-widget-host .tdpb-product-card {
border-radius: var(--td-radius) !important;
border: 1px solid var(--td-border) !important;
box-shadow: none !important;
background: var(--td-bg) !important;
padding: 14px !important;
}
.td-widget-host .tdpb-activity-card.tdpb-selected,
.td-widget-host .tdpb-activity-card.selected,
.td-widget-host .tdpb-package-card.selected {
border-color: var(--td-blue) !important;
background: var(--td-blue-soft) !important;
}
/* Sticky summary / totals panel */
.td-widget-host [class*="tdpb-summary"],
.td-widget-host [class*="tdpb-total"] {
border-radius: var(--td-radius) !important;
border: 1px solid var(--td-border) !important;
background: var(--td-bg-soft) !important;
box-shadow: none !important;
}
/* ═══════════════════════════════════════════════════════════════
ACTIVITY page — production-style 2-column desktop layout
Compact white header (stars + title + chips + meta) + left content
/ right sticky booking rail.
═══════════════════════════════════════════════════════════════ */
.td-a-tophead {
background: var(--td-bg);
border-bottom: 1px solid var(--td-border);
padding: 24px 0 20px;
text-align: center;
}
.td-a-crumbs--light { color: var(--td-text-muted); margin: 0 0 14px; font-size: 12px; }
.td-a-crumbs--light a { color: var(--td-link); }
.td-a-crumbs--light span { margin: 0 6px; opacity: 0.6; }
.td-a-stars { color: #F5A623; font-size: 16px; letter-spacing: 4px; margin: 0 0 10px; }
.td-a-titlerow { display: flex; align-items: flex-start; justify-content: center; gap: 12px; margin: 0 0 14px; }
.td-a-title {
font-family: var(--td-font); font-weight: 700;
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.25; letter-spacing: -0.015em;
color: var(--td-text); margin: 0;
max-width: 880px;
}
.td-a-wish--inline {
flex: 0 0 36px; width: 36px; height: 36px;
border-radius: 50%;
background: var(--td-bg-soft); color: var(--td-text-muted);
border: 1px solid var(--td-border);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.td-a-wish--inline.is-on { background: var(--td-cta); border-color: var(--td-cta); color: var(--td-text); }
.td-a-wish--inline.is-on svg { fill: var(--td-text); }
.td-a-chips {
list-style: none; padding: 0; margin: 0 0 10px;
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
}
.td-a-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--td-text-soft); }
.td-a-chips li svg { color: var(--td-success); flex-shrink: 0; }
.td-a-loc {
margin: 0; font-size: 13px; color: var(--td-text-muted);
display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.td-a-loc__city, .td-a-loc__booked { display: inline-flex; align-items: center; gap: 4px; }
.td-a-loc__city svg, .td-a-loc__booked svg { color: var(--td-cta-deep); }
.td-a-hours {
width: fit-content; max-width: 100%;
margin: 9px auto 0;
display: flex; align-items: center; gap: 6px;
font-size: 13px; line-height: 1.35; text-align: center;
color: var(--td-cta-deep);
background: #EBF3FF; border: 1px solid #d6e4fb;
border-radius: 999px; padding: 5px 14px;
}
.td-a-hours svg { color: var(--td-cta-deep); flex-shrink: 0; }
.td-a-hours strong { font-weight: 700; }
/* ── 2-column main body ── */
.td-a-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 32px;
padding: 28px 16px 40px;
align-items: start;
max-width: 1140px;
margin: 0 auto;
}
.td-a-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
/* Full-width details region (Itinerary, Tips, FAQ, Testimonials) — sits below
the 2-column grid so it uses the whole page width instead of the narrow
left column (which left big empty space beside the short booking rail). */
.td-a-details {
max-width: 1140px;
margin: 0 auto;
padding: 4px 16px 40px;
display: flex;
flex-direction: column;
gap: 28px;
}
/* Section divider — a clear top rule + extra breathing room so a block
(e.g. FAQ) reads as a distinct new section, not a continuation.
We also drop the left orange accent here: with the 2-column FAQ the
uneven columns left the full-height left bar dangling into empty space.
The top rule is this section's marker instead. */
.td-a-block--divider {
border-top: 1px solid var(--td-border);
border-left: none;
padding: 32px 0 0 0;
margin-top: 8px;
}
/* On desktop, lay FAQs in two columns so they fill the width and aren't a
single over-wide list; each item stays intact (no break across columns). */
@media (min-width: 901px) {
.td-a-details .td-a-faqs {
columns: 2;
column-gap: 24px;
}
.td-a-details .td-a-faqs > li {
break-inside: avoid;
-webkit-column-break-inside: avoid;
margin-bottom: 12px;
}
/* Testimonials also read better as a row of cards at full width */
.td-a-details .td-testimonials-dated {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
}
/* Content blocks — clean, big-brand: no coloured accent bars; sections are
separated by whitespace + a hairline divider, with strong headings. */
.td-a-block {
padding: 0;
}
.td-a-block + .td-a-block {
border-top: 1px solid var(--td-border);
padding-top: 26px;
}
.td-a-h2 {
font-family: var(--td-font); font-weight: 700;
font-size: 19px; line-height: 1.3; letter-spacing: -0.01em;
color: var(--td-text); margin: 0 0 14px;
}
/* Tabular figures — prices, dates, durations & counts align in clean columns (big-platform feel) */
.woocommerce-Price-amount, .woocommerce-Price-amount bdi, .amount,
.td-price, .td-a-price, .td-card__price, .td-c-card__price, .td-h-card__price,
.td-a-stickybar, .td-stickybar, .td-stickybar__price, .td-gbadge,
.td-a-stars, .td-a-stars__rating, .td-a-pricerow, .td-a-fee {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.td-a-block .td-prose { font-size: 14px; line-height: 1.65; color: var(--td-text); max-width: none; }
.td-a-block .td-prose p { margin: 0 0 12px; }
.td-a-note {
display: flex; gap: 10px; align-items: flex-start;
background: #FFFBEB; border: 1px solid #FDE68A;
border-radius: var(--td-radius);
padding: 12px 14px; margin: 14px 0 0;
font-size: 13px; line-height: 1.55; color: var(--td-text);
}
.td-a-note svg { color: #D97706; flex-shrink: 0; margin-top: 2px; }
/* ── HERO GALLERY GRID (top of activity page) — big lead image + thumbnails ── */
/* Width matches .td-a-layout / .td-a-details (960px) so the gallery lines up
exactly with the title, content column and booking widget below it. */
.td-a-herogal-wrap { max-width: 960px; margin: 0 auto; padding: 14px 16px 0; }
.td-a-herogal {
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: 8px;
height: clamp(300px, 34vw, 440px);
}
.td-a-herogal--single { grid-template-columns: 1fr; }
.td-a-herogal__big,
.td-a-herogal__thumb {
position: relative; display: block; padding: 0; border: 0; margin: 0;
cursor: pointer; overflow: hidden; background: var(--td-bg-soft);
border-radius: var(--td-radius); height: 100%; min-height: 0;
}
.td-a-herogal__big img,
.td-a-herogal__thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .45s ease;
}
.td-a-herogal__big:hover img,
.td-a-herogal__thumb:hover img { transform: scale(1.045); }
.td-a-herogal__grid {
display: grid; gap: 8px; min-height: 0;
grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr;
}
.td-a-herogal__grid--1 { grid-template-columns: 1fr; }
/* 3 thumbs → last one spans the full width so there's no empty cell */
.td-a-herogal__grid--3 > .td-a-herogal__thumb:nth-child(3) { grid-column: 1 / -1; }
/* photo-count badge overlaid on the big image */
.td-a-herogal__count {
position: absolute; left: 12px; bottom: 12px; z-index: 2;
display: inline-flex; align-items: center; gap: 6px;
background: rgba(17,24,39,.78); color: #fff;
font-size: 12px; font-weight: 600; line-height: 1;
padding: 7px 11px; border-radius: 999px; pointer-events: none;
}
.td-a-herogal__count svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Mobile: hero gallery becomes a swipeable, snap-scrolling carousel.
display:contents promotes the thumbs to direct flex items so the big
image and every thumbnail become equal full-width swipe slides. */
@media (max-width: 900px) {
.td-a-herogal-wrap { padding: 8px 0 0; }
.td-a-herogal,
.td-a-herogal--single {
display: flex; height: auto; gap: 0;
grid-template-columns: none;
overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 0 0 2px; scrollbar-width: none;
}
.td-a-herogal::-webkit-scrollbar { display: none; }
.td-a-herogal__grid { display: contents; }
.td-a-herogal__big,
.td-a-herogal__thumb {
flex: 0 0 100%; height: 62vw; max-height: 340px;
scroll-snap-align: start; grid-column: auto !important;
}
.td-a-herogal--single .td-a-herogal__big { flex-basis: 100%; }
.td-a-herogal__big:hover img,
.td-a-herogal__thumb:hover img { transform: none; }
}
/* RIGHT RAIL */
/* Stretch the rail cell to the full row height so the sticky booking widget
has a track to travel along (the grid uses align-items:start, which would
otherwise collapse the cell to its content height and disable sticky). */
.td-a-rail { display: block; min-width: 0; align-self: stretch; }
.td-a-rail__sticky {
position: sticky; top: 104px; /* clears the sticky site header (~97px) */
display: flex; flex-direction: column; gap: 16px;
}
.td-a-rail__head { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--td-text); }
.td-a-rail__booking {
background: var(--td-bg);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
padding: 12px;
}
.td-a-rail__booking .td-booking { max-width: 100%; }
.td-a-rail__cross {
background: #FFFBEB;
border: 1px solid #FDE68A;
border-left: 4px solid var(--td-cta);
border-radius: var(--td-radius);
padding: 14px 16px;
}
.td-a-rail__cross-head { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--td-text); }
.td-a-rail__cross-sub { margin: 0 0 10px; font-size: 12px; color: var(--td-text-soft); line-height: 1.5; }
.td-a-rail__cross .td-btn { display: block; text-align: center; }
/* Inclusions */
.td-a-inclusions {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px;
}
.td-a-inclusions li {
display: flex; align-items: flex-start; gap: 8px;
font-size: 13px; color: var(--td-text); line-height: 1.5;
}
.td-a-inclusions svg { color: var(--td-success); flex-shrink: 0; margin-top: 3px; }
/* Itinerary inside main */
.td-a-itinerary {
list-style: none; padding: 0; margin: 0;
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
background: var(--td-bg);
overflow: hidden;
}
.td-a-step {
display: grid; grid-template-columns: 140px 1fr;
gap: 14px; padding: 12px 16px;
border-bottom: 1px solid var(--td-border);
}
.td-a-step:last-child { border-bottom: 0; }
.td-a-step__time { font-size: 12px; font-weight: 700; color: var(--td-cta-deep); padding-top: 1px; }
.td-a-step__title { margin: 0 0 3px; font-size: 14px; font-weight: 700; color: var(--td-text); }
.td-a-step__text { margin: 0; font-size: 13px; color: var(--td-text-soft); line-height: 1.55; }
/* Tips */
.td-a-tips { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.td-a-tips li {
padding: 10px 12px;
background: var(--td-bg); border: 1px solid var(--td-border);
border-radius: var(--td-radius);
font-size: 13px; line-height: 1.55; color: var(--td-text);
}
.td-a-tips li em { color: var(--td-blue); font-style: normal; font-weight: 600; }
/* FAQ */
.td-a-faqs { list-style: none; padding: 0; margin: 0; }
.td-a-faq {
border: 1px solid var(--td-border); border-radius: var(--td-radius);
margin: 0 0 6px; background: var(--td-bg);
}
.td-a-faq summary {
cursor: pointer; list-style: none;
padding: 12px 16px;
font-weight: 600; font-size: 14px; color: var(--td-text);
display: flex; align-items: center; justify-content: space-between;
}
.td-a-faq summary::-webkit-details-marker { display: none; }
.td-a-faq summary::after {
content: "+"; font-weight: 600; font-size: 16px; color: var(--td-text-muted);
width: 20px; height: 20px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--td-border); border-radius: var(--td-radius); margin-left: 12px;
}
.td-a-faq details[open] summary::after { content: "−"; color: var(--td-blue); border-color: var(--td-blue); }
.td-a-faq details[open] summary { color: var(--td-blue); }
.td-a-faq details > p { margin: 0; padding: 0 16px 14px; font-size: 13px; line-height: 1.55; color: var(--td-text-soft); }
/* Responsive — drop rail below main */
@media (max-width: 900px) {
.td-a-layout { grid-template-columns: 1fr; gap: 24px; padding: 20px 16px 32px; }
.td-a-rail__sticky { position: static; }
.td-a-inclusions { grid-template-columns: 1fr; }
.td-a-step { grid-template-columns: 1fr; gap: 4px; }
.td-a-title { font-size: 20px; }
.td-a-rail__booking { max-height: none; overflow: visible; }
/* Mobile-first booking: activity name (in tophead) is already first;
move the whole booking rail directly beneath it, above the tour
details. Booking widget is first inside the rail, so the user sees:
title → booking widget → cross-sell/trust → About/gallery/itinerary. */
.td-a-rail { order: -1; }
.td-a-main { order: 0; }
}
/* ── Stubs for old hero/section classes that are no longer rendered ── */
.td-a-hero,
.td-a-highlights,
.td-a-section,
.td-a-trust,
.td-a-section--booking,
.td-a-about-grid,
.td-a-about,
.td-a-side,
.td-a-section--alt,
.td-a-section--booking,
.td-a-meta-row,
.td-a-h { /* unused */ }
/* ═══════════════════════════════════════════════════════════════
ACTIVITY page — RICH layout (legacy block, harmless duplicate)
═══════════════════════════════════════════════════════════════ */
/* Hero with banner image */
.td-a-hero {
position: relative;
color: #fff;
padding: 64px 0 56px;
min-height: 340px;
background-color: #1a1a1a;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex; align-items: flex-end;
}
.td-a-hero__shade {
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.4) 100%);
}
.td-a-hero__inner { position: relative; z-index: 1; }
.td-a-crumbs { font-size: 12px; color: rgba(255,255,255,0.85); margin: 0 0 14px; letter-spacing: 0.02em; }
.td-a-crumbs a { color: rgba(255,255,255,0.85); }
.td-a-crumbs a:hover { color: #fff; text-decoration: underline; }
.td-a-crumbs span { margin: 0 8px; opacity: 0.5; }
.td-a-hero__title {
font-family: var(--td-font);
font-weight: 700;
font-size: clamp(24px, 3.4vw, 36px);
line-height: 1.2;
letter-spacing: -0.01em;
color: #fff;
margin: 0 0 8px;
max-width: 800px;
}
.td-a-hero__sub {
font-size: 14px; color: rgba(255,255,255,0.9);
margin: 0; max-width: 760px; line-height: 1.5;
}
/* Highlights strip — yellow check + text, full-bleed background */
.td-a-highlights {
background: var(--td-blue-soft);
border-bottom: 1px solid var(--td-border);
padding: 16px 0 14px;
}
.td-a-highlights__row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.td-a-highlight {
display: flex; gap: 10px; align-items: flex-start;
font-size: 13px; line-height: 1.45; color: var(--td-text);
}
.td-a-highlight__icon {
flex: 0 0 22px; width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--td-success); color: #fff;
border-radius: var(--td-radius);
font-size: 13px; font-weight: 800;
line-height: 1;
}
.td-a-meta {
margin-top: 10px;
font-size: 12px; color: var(--td-text-muted);
}
.td-a-meta__item { font-weight: 500; }
.td-a-meta__sep { margin: 0 6px; opacity: 0.5; }
/* Section frame for rich activity
Inner content is constrained to ~960px reading width — production tripdust.com
uses ~860px for the booking widget and a tight column for editorial content.
The section itself spans full-width so the alternating background stripes
read as proper bands. */
.td-a-section { padding: 32px 0; background: var(--td-bg); border-bottom: 1px solid var(--td-border); }
.td-a-section--alt { background: var(--td-bg-soft); }
.td-a-section--booking { background: var(--td-bg-soft); padding: 24px 0; }
.td-a-wrap {
max-width: 960px;
margin: 0 auto;
padding: 0 16px;
}
.td-a-h {
font-family: var(--td-font);
font-weight: 700; font-size: 20px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--td-text);
margin: 0 0 16px;
}
/* About + gallery side-by-side */
.td-a-about-grid {
display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start;
}
.td-a-about .td-prose { margin: 0 0 12px; max-width: 720px; font-size: 14px; line-height: 1.6; }
.td-a-about .td-prose p { margin: 0 0 12px; }
.td-a-gallery {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.td-a-gallery__item {
display: block; overflow: hidden;
border-radius: var(--td-radius);
border: 1px solid var(--td-border);
aspect-ratio: 4/3;
background: var(--td-bg-soft);
}
.td-a-gallery__item img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Itinerary timeline */
.td-a-itinerary {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 0;
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
background: var(--td-bg);
overflow: hidden;
}
.td-a-step {
display: grid; grid-template-columns: 160px 1fr;
gap: 16px;
padding: 14px 18px;
border-bottom: 1px solid var(--td-border);
}
.td-a-step:last-child { border-bottom: 0; }
.td-a-step__time {
font-family: var(--td-font);
font-size: 13px; font-weight: 700;
color: var(--td-blue);
letter-spacing: -0.005em;
padding-top: 1px;
}
.td-a-step__title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--td-text); }
.td-a-step__text { margin: 0; font-size: 13px; color: var(--td-text-soft); line-height: 1.55; }
/* Tips list */
.td-a-tips {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 12px;
max-width: 800px;
}
.td-a-tips li {
padding: 13px 15px;
background: var(--td-bg-soft); border: 1px solid var(--td-border);
border-radius: var(--td-radius);
font-size: 14px; line-height: 1.55; color: var(--td-text);
}
.td-a-tips li em { color: var(--td-blue); font-style: normal; font-weight: 600; }
/* FAQ accordion */
.td-a-faqs {
list-style: none; padding: 0; margin: 0;
max-width: 820px;
}
.td-a-faq {
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
margin: 0 0 8px;
background: var(--td-bg);
}
.td-a-faq details { padding: 0; }
.td-a-faq summary {
cursor: pointer;
list-style: none;
padding: 14px 18px;
font-weight: 600; font-size: 14px; color: var(--td-text);
display: flex; align-items: center; justify-content: space-between;
position: relative;
}
.td-a-faq summary::-webkit-details-marker { display: none; }
.td-a-faq summary::after {
content: "+"; font-weight: 600; font-size: 18px;
color: var(--td-text-muted);
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--td-border); border-radius: var(--td-radius);
margin-left: 12px;
}
.td-a-faq details[open] summary::after { content: "−"; color: var(--td-blue); border-color: var(--td-blue); }
.td-a-faq details[open] summary { color: var(--td-blue); }
.td-a-faq details > p {
margin: 0; padding: 0 18px 16px;
font-size: 13px; line-height: 1.55; color: var(--td-text-soft);
}
/* Responsive */
@media (max-width: 900px) {
.td-a-about-grid { grid-template-columns: 1fr; }
.td-a-gallery { grid-template-columns: repeat(2, 1fr); }
.td-a-highlights__row { grid-template-columns: 1fr; gap: 8px; }
.td-a-step { grid-template-columns: 1fr; gap: 4px; }
.td-a-step__time { color: var(--td-blue); font-size: 12px; }
}
/* Hero topline — title + wishlist heart */
.td-a-hero__topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.td-a-wish {
flex: 0 0 40px; width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.15); color: #fff;
border: 1px solid rgba(255,255,255,0.3);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(8px);
}
.td-a-wish.is-on { background: var(--td-cta); border-color: var(--td-cta); color: var(--td-text); }
.td-a-wish.is-on svg { fill: var(--td-text); }
.td-a-wish:hover { background: rgba(255,255,255,0.28); }
/* Hero meta row — rating + booked + rank + sells-out */
.td-a-meta-row {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 13px; color: rgba(255,255,255,0.9);
}
.td-a-rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.td-a-rating__star { color: var(--td-cta); font-size: 14px; }
.td-a-rating strong { color: #fff; font-weight: 700; font-size: 14px; }
.td-a-rating__count { color: rgba(255,255,255,0.75); }
.td-a-meta-sep { color: rgba(255,255,255,0.45); }
.td-a-meta-booked strong, .td-a-meta-rank strong { color: #fff; font-weight: 700; }
.td-a-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--td-radius); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; margin-left: 6px; }
.td-a-pill--hot { background: var(--td-cta); color: var(--td-text); text-transform: uppercase; letter-spacing: 0.06em; }
/* Trust strip — 4 chips */
.td-a-trust { background: var(--td-bg); border-bottom: 1px solid var(--td-border); padding: 12px 0; }
.td-a-trust__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-a-trust__chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600;
color: var(--td-text);
background: var(--td-bg-soft);
border: 1px solid var(--td-border);
padding: 5px 10px;
border-radius: var(--td-radius);
}
.td-a-trust__chip svg { color: var(--td-success); flex-shrink: 0; }
.td-a-trust__chip--alt { background: var(--td-blue-soft); border-color: rgba(0,59,149,0.18); color: var(--td-blue); }
.td-a-trust__chip--alt svg { color: var(--td-blue); }
/* About + sidebar layout */
.td-a-about-grid {
display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start;
}
.td-a-side { display: grid; gap: 16px; }
/* Inclusions list */
.td-a-h3 { font-family: var(--td-font); font-weight: 700; font-size: 16px; margin: 20px 0 10px; color: var(--td-text); }
.td-a-inclusions {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 6px;
}
.td-a-inclusions li {
display: flex; align-items: flex-start; gap: 8px;
font-size: 13px; color: var(--td-text); line-height: 1.5;
}
.td-a-inclusions svg { color: var(--td-success); flex-shrink: 0; margin-top: 3px; }
/* Specialist sidebar card */
.td-a-spec {
background: var(--td-bg);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
padding: 18px;
display: flex; gap: 12px; align-items: flex-start;
}
.td-a-spec__avatar {
flex: 0 0 44px; width: 44px; height: 44px;
border-radius: 50%;
background: var(--td-blue); color: #fff;
font-family: var(--td-font);
font-weight: 700; font-size: 18px;
display: flex; align-items: center; justify-content: center;
}
.td-a-spec__body { flex: 1; min-width: 0; }
.td-a-spec__name { margin: 0 0 6px; font-size: 13px; color: var(--td-text-muted); }
.td-a-spec__name strong { color: var(--td-text); font-weight: 700; font-size: 14px; }
.td-a-spec__quote {
margin: 0 0 12px;
font-size: 13px; line-height: 1.55;
color: var(--td-text-soft);
border-left: 2px solid var(--td-border);
padding-left: 10px;
}
.td-a-spec__btn {
display: inline-flex; align-items: center; gap: 6px;
background: #25D366; color: #fff;
font-size: 13px; font-weight: 700;
padding: 8px 14px;
border-radius: var(--td-radius);
text-decoration: none;
}
.td-a-spec__btn:hover { background: #1ebe5a; color: #fff; text-decoration: none; }
/* Ripple Score */
.td-a-ripple {
background: var(--td-blue-soft);
border: 1px solid rgba(0,59,149,0.12);
border-radius: var(--td-radius);
padding: 16px 18px;
}
.td-a-ripple__label { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--td-blue); }
.td-a-ripple__big { margin: 0 0 6px; font-size: 14px; color: var(--td-text); font-weight: 600; line-height: 1.4; }
.td-a-ripple__big strong { font-size: 22px; color: var(--td-blue); font-weight: 800; }
.td-a-ripple__note { margin: 0; font-size: 12px; color: var(--td-text-muted); line-height: 1.5; }
/* Photo gallery — replaces old td-a-gallery (still inside sidebar) */
.td-a-gallery__label { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--td-text-muted); }
.td-a-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.td-a-gallery__item { padding: 0; border: 1px solid var(--td-border); border-radius: var(--td-radius); overflow: hidden; cursor: pointer; background: var(--td-bg-soft); aspect-ratio: 4/3; }
.td-a-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-a-gallery__item:hover { border-color: var(--td-blue); }
.td-a-gallery__more { margin: 8px 0 0; font-size: 12px; color: var(--td-text-muted); }
/* Sticky bottom book bar */
.td-a-stickybar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
background: var(--td-bg);
border-top: 1px solid var(--td-border);
box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
padding: 10px 16px;
transform: translateY(100%);
transition: transform 0.25s ease;
}
.td-a-stickybar.is-on { transform: translateY(0); }
.td-a-stickybar__inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.td-a-stickybar__text { display: flex; flex-direction: column; min-width: 0; }
.td-a-stickybar__title { font-size: 13px; font-weight: 700; color: var(--td-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-a-stickybar__price { font-size: 12px; color: var(--td-text-muted); }
.td-a-stickybar__price strong { color: var(--td-text); font-size: 14px; }
.td-a-stickybar__cta { white-space: nowrap; }
/* Lightbox dialog */
.td-lightbox { padding: 0; border: 0; background: transparent; max-width: 92vw; max-height: 92vh; }
.td-lightbox::backdrop { background: rgba(0,0,0,0.85); }
.td-lightbox__img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: var(--td-radius); display: block; }
.td-lightbox__close {
position: fixed; top: 16px; right: 18px; z-index: 6;
background: transparent; border: 0;
color: #fff; font-size: 38px; cursor: pointer;
line-height: 1;
}
.td-lightbox__nav {
position: fixed; top: 50%; transform: translateY(-50%); z-index: 5;
width: 48px; height: 48px; border-radius: 50%;
background: rgba(255,255,255,.92); color: #111; border: 0;
font-size: 30px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.td-lightbox__nav:hover { background: #fff; }
.td-lightbox__nav--prev { left: 16px; }
.td-lightbox__nav--next { right: 16px; }
.td-lightbox__count {
position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 5;
background: rgba(17,24,39,.82); color: #fff;
font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
}
@media (max-width: 720px) {
.td-lightbox__nav { width: 40px; height: 40px; font-size: 26px; }
.td-lightbox__nav--prev { left: 8px; }
.td-lightbox__nav--next { right: 8px; }
}
/* Responsive — collapse sidebar below 900px */
@media (max-width: 900px) {
.td-a-about-grid { grid-template-columns: 1fr; }
.td-a-side { order: 2; }
.td-a-stickybar__title { font-size: 12px; }
}
/* ═══════════════════════════════════════════════════════════════
ENGAGEMENT LAYER (audit v2 — Tier 1 + parts of Tier 2/3)
Annual Pick badge · methodology line · dated testimonials ·
anti-urgency line · inclusion line · founder block · specialist
roster · annual picks list
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
RICH CARD UPGRADE — style tag + activity icon + quote + price row
Used by city.php main grid + country.php tile grid + home featured
═══════════════════════════════════════════════════════════════ */
/* Style tag chip (Basix / Smart / Premium / Luxe / Package) */
.td-card__style {
display: inline-flex; align-items: center;
font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
padding: 3px 8px; border-radius: var(--td-radius);
border: 1px solid currentColor;
white-space: nowrap;
}
.td-card__style--basix { color: #6B7280; }
.td-card__style--smart { color: var(--td-blue); background: var(--td-blue-soft); border-color: rgba(0,59,149,0.18); }
.td-card__style--premium { color: #B45309; background: #FEF3C7; border-color: #FDE68A; }
.td-card__style--luxe { color: #6D28D9; background: #EDE9FE; border-color: #DDD6FE; }
.td-card__style--package { color: var(--td-forest); background: var(--td-blue-soft); border-color: rgba(0,59,149,0.18); }
/* Rich card layout */
.td-card--rich .td-card__link {
display: flex; flex-direction: column; gap: 8px;
padding: 14px 16px 16px;
}
.td-card__topline { display: flex; gap: 6px; align-items: center; }
.td-card__icon { display: inline-flex; color: var(--td-text-muted); margin-left: auto; }
.td-card--rich .td-card__title {
display: block;
font-size: 15px; font-weight: 700; line-height: 1.3;
color: var(--td-text); margin: 4px 0 0;
}
.td-card__quote {
margin: 4px 0 0;
font-size: 12px; line-height: 1.45;
color: var(--td-text-soft);
font-style: italic;
padding-left: 10px; border-left: 2px solid var(--td-border);
}
.td-card__quote-sig { font-style: normal; font-weight: 600; color: var(--td-text-muted); margin-left: 4px; white-space: nowrap; }
.td-card__metarow { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--td-text-muted); margin: 6px 0 0; }
.td-card__meta-item { display: inline-flex; align-items: center; gap: 3px; }
.td-card__price-row {
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
margin-top: 8px; padding-top: 8px;
border-top: 1px solid var(--td-border);
}
.td-card__price-label { font-size: 11px; color: var(--td-text-muted); }
.td-card__price { font-size: 18px; font-weight: 800; color: var(--td-text); letter-spacing: -0.01em; }
.td-card__pp { font-size: 11px; color: var(--td-text-muted); }
.td-card__view { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--td-link); }
/* Country-page tile additions for new chips */
.td-c-tile__pick {
position: absolute; top: 8px; right: 8px; z-index: 2;
background: var(--td-cta); color: var(--td-text);
font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
padding: 3px 8px; border-radius: var(--td-radius);
}
.td-c-tile__style {
position: absolute; top: 8px; left: 8px; z-index: 2;
font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
padding: 3px 8px; border-radius: var(--td-radius);
border: 1px solid currentColor;
background: rgba(255,255,255,0.95); backdrop-filter: blur(4px);
}
.td-c-tile__card { position: relative; }
.td-c-tile__pp { font-size: 11px; color: var(--td-text-muted); margin-left: 1px; }
@media (max-width: 520px) {
.td-card__quote { font-size: 11px; }
.td-card__price { font-size: 17px; }
}
/* ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
PACKAGES — separate from activities
.td-pkg-* lives only on /thailand/packages/ + individual package pages
═══════════════════════════════════════════════════════════════ */
/* Hub page — 2 package cards side-by-side */
.td-pkg-cards {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.td-pkg-card {
background: var(--td-bg);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
padding: 22px 24px;
display: flex; flex-direction: column; gap: 12px;
}
.td-pkg-card__head { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.td-pkg-card__days { font-size: 12px; color: var(--td-text-muted); font-weight: 600; }
.td-pkg-card__title { font-size: 20px; font-weight: 700; color: var(--td-text); margin: 0; line-height: 1.25; }
.td-pkg-card__title a { color: inherit; text-decoration: none; }
.td-pkg-card__title a:hover { color: var(--td-link); text-decoration: underline; }
.td-pkg-card__sub { font-size: 14px; color: var(--td-text-soft); margin: 0; line-height: 1.45; }
.td-pkg-card__incs { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 5px; }
.td-pkg-card__incs li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--td-text); line-height: 1.45; }
.td-pkg-card__incs svg { color: var(--td-success); flex-shrink: 0; margin-top: 3px; }
.td-pkg-card__price {
margin-top: 10px; padding-top: 12px;
border-top: 1px solid var(--td-border);
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.td-pkg-card__price-label { font-size: 12px; color: var(--td-text-muted); }
.td-pkg-card__price-amount { font-size: 24px; font-weight: 800; color: var(--td-text); letter-spacing: -0.01em; }
.td-pkg-card__price-note { font-size: 12px; color: var(--td-text-muted); }
.td-pkg-card__cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.td-pkg-card__cta .td-btn { flex: 1; text-align: center; }
@media (max-width: 720px) {
.td-pkg-cards { grid-template-columns: 1fr; }
.td-pkg-card__cta .td-btn { flex: none; width: 100%; }
}
/* Individual package page — header + day-by-day + price card */
.td-pkg-head { /* extends .td-a-tophead */ }
.td-pkg-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
margin: 0 0 12px;
font-size: 12px; font-weight: 600; color: var(--td-text-muted);
}
.td-pkg-eyebrow__days { font-weight: 600; }
.td-pkg-subtitle {
font-size: 14px; color: var(--td-text-soft); margin: 0;
}
/* Day-by-day list */
.td-pkg-days {
list-style: none; padding: 0; margin: 0;
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
background: var(--td-bg);
overflow: hidden;
}
.td-pkg-day {
display: grid; grid-template-columns: 90px 1fr;
gap: 14px;
padding: 14px 16px;
border-bottom: 1px solid var(--td-border);
}
.td-pkg-day:last-child { border-bottom: 0; }
.td-pkg-day__num {
font-family: var(--td-font);
font-size: 13px; font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--td-blue);
padding-top: 1px;
}
.td-pkg-day__title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--td-text); }
.td-pkg-day__time { margin: 0 0 4px; font-size: 12px; color: var(--td-text-muted); font-weight: 500; }
.td-pkg-day__text { margin: 0; font-size: 13px; color: var(--td-text-soft); line-height: 1.55; }
/* Package price card in right rail — distinct from booking widget */
.td-pkg-price-card {
background: var(--td-bg);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
padding: 18px 20px;
text-align: left;
}
.td-pkg-price-card__label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--td-text-muted); margin: 0 0 4px; }
.td-pkg-price-card__amount { font-size: 32px; font-weight: 800; color: var(--td-text); letter-spacing: -0.02em; margin: 0 0 4px; line-height: 1; }
.td-pkg-price-card__note { font-size: 13px; color: var(--td-text); margin: 0 0 10px; font-weight: 600; }
.td-pkg-price-card__terms { font-size: 12px; color: var(--td-text-muted); margin: 0 0 14px; line-height: 1.45; padding: 10px 12px; background: var(--td-bg-soft); border-radius: var(--td-radius); }
.td-pkg-price-card__cta { display: block; text-align: center; margin-bottom: 8px; }
.td-pkg-price-card__cta:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
.td-pkg-day { grid-template-columns: 1fr; gap: 4px; }
.td-pkg-day__num { font-size: 11px; }
}
/* ═══════════════════════════════════════════════════════════════ */
/* "Trip Dust Pick 2026" badge — used in hero, on cards, on tile lists */
.td-pick {
display: inline-flex; align-items: center; gap: 5px;
background: var(--td-bg);
border: 1px solid var(--td-cta);
color: var(--td-text);
font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
padding: 4px 10px; border-radius: var(--td-radius);
white-space: nowrap;
}
.td-pick::before { content: "★"; color: var(--td-cta); }
.td-pick--solid { background: var(--td-cta); border-color: var(--td-cta); }
.td-pick--solid::before { color: var(--td-text); }
/* Methodology disclosure — single grey line under sorted lists */
.td-method-line {
font-size: 12px; color: var(--td-text-muted);
margin: -8px 0 16px;
font-style: italic;
line-height: 1.5;
}
.td-method-line svg { vertical-align: -3px; margin-right: 4px; opacity: 0.7; }
/* Anti-urgency reassurance line */
.td-anti-urgency {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--td-success);
font-weight: 500;
background: #ECFDF5;
border: 1px solid #BBF7D0;
border-radius: var(--td-radius);
padding: 6px 12px;
margin: 0;
}
.td-anti-urgency::before { content: "✓"; font-weight: 800; }
/* Inclusion line — appears above card grids */
.td-inclusion-line {
background: var(--td-blue-soft);
border-left: 4px solid var(--td-blue);
padding: 10px 14px;
margin: 0 0 16px;
font-size: 13px; color: var(--td-text);
border-radius: 0 var(--td-radius) var(--td-radius) 0;
}
.td-inclusion-line strong { color: var(--td-blue); }
/* Dated testimonials — boutique format (BS · May 2026) */
.td-testimonials-dated {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 12px;
}
.td-testimonial-dated {
background: var(--td-bg);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
padding: 16px 18px;
}
.td-testimonial-dated__rating { color: var(--td-cta-deep); font-size: 13px; letter-spacing: 1px; margin: 0 0 8px; }
.td-testimonial-dated__quote { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--td-text); }
.td-testimonial-dated__sig { margin: 0; font-size: 12px; color: var(--td-text-muted); font-weight: 600; letter-spacing: 0.04em; }
/* Founder letter block — homepage */
.td-founder {
background: var(--td-bg-soft);
padding: 56px 0;
border-bottom: 1px solid var(--td-border);
border-top: 1px solid var(--td-border);
}
.td-founder__inner { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: center; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.td-founder__photo {
width: 240px; height: 240px; border-radius: 50%;
background: var(--td-blue);
display: flex; align-items: center; justify-content: center;
color: #fff; font-family: var(--td-font);
font-weight: 700; font-size: 72px;
letter-spacing: -0.02em;
}
.td-founder__quote {
font-family: var(--td-font);
font-style: italic; font-size: clamp(20px, 2.4vw, 26px);
line-height: 1.3; color: var(--td-text);
margin: 0 0 16px;
position: relative; padding-left: 16px;
border-left: 3px solid var(--td-border);
}
.td-founder__letter {
font-size: 15px; color: var(--td-text); line-height: 1.65;
}
.td-founder__letter p { margin: 0 0 10px; }
.td-founder__sig { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--td-text); font-style: italic; }
.td-founder__cta { margin-top: 14px; }
@media (max-width: 720px) {
.td-founder__inner { grid-template-columns: 1fr; text-align: center; }
.td-founder__photo { margin: 0 auto; width: 160px; height: 160px; font-size: 56px; }
.td-founder__quote { border-left: 0; padding-left: 0; }
}
/* Specialist roster (homepage teaser + /specialists page) */
.td-specialists {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.td-specialist {
background: var(--td-bg);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
padding: 22px 22px 18px;
}
.td-specialist__head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.td-specialist__avatar {
width: 56px; height: 56px; flex-shrink: 0;
border-radius: 50%;
background: var(--td-blue); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 22px;
}
.td-specialist__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--td-text); }
.td-specialist__role { margin: 2px 0 0; font-size: 12px; color: var(--td-text-muted); font-weight: 500; }
.td-specialist__meta { font-size: 12px; color: var(--td-text-muted); margin: 0 0 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.td-specialist__meta strong { color: var(--td-text); font-weight: 600; }
.td-specialist__bio { font-size: 13px; line-height: 1.55; color: var(--td-text-soft); margin: 0 0 12px; }
.td-specialist__quote {
font-style: italic; font-size: 13px;
color: var(--td-text); margin: 0 0 14px;
border-left: 2px solid var(--td-border);
padding-left: 10px;
}
.td-specialist__tags { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 14px; }
.td-specialist__tag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--td-text-muted); background: var(--td-bg-soft); padding: 3px 7px; border-radius: var(--td-radius); }
.td-specialist__cta {
display: inline-flex; align-items: center; gap: 6px;
background: #25D366; color: #fff;
font-size: 13px; font-weight: 700;
padding: 8px 14px;
border-radius: var(--td-radius);
text-decoration: none;
}
.td-specialist__cta:hover { background: #1ebe5a; color: #fff; text-decoration: none; }
@media (max-width: 900px) { .td-specialists { grid-template-columns: 1fr; } }
/* Annual picks list (12 editorial picks) */
.td-picks-2026 { padding: 56px 0; background: var(--td-bg); }
.td-picks-2026__intro { max-width: 720px; margin: 0 0 28px; font-size: 14px; color: var(--td-text-soft); line-height: 1.6; }
.td-picks-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; max-width: 1140px; }
.td-pick-row {
display: grid; grid-template-columns: 36px 1fr;
gap: 14px; align-items: flex-start;
padding: 14px 0;
border-bottom: 1px solid var(--td-border);
}
.td-pick-row:last-child { border-bottom: 0; }
.td-pick-row__num {
font-family: var(--td-font); font-weight: 700;
font-size: 22px; color: var(--td-cta-deep);
line-height: 1; padding-top: 4px;
}
.td-pick-row__cat { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--td-blue); margin: 0 0 4px; }
.td-pick-row__title { display: block; font-size: 16px; font-weight: 700; color: var(--td-text); margin: 0 0 4px; }
.td-pick-row__title:hover { color: var(--td-link); text-decoration: none; }
.td-pick-row__reason { margin: 0; font-size: 13px; line-height: 1.55; color: var(--td-text-soft); }
@media (max-width: 720px) { .td-picks-list { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════════
Booking widget (.cpb-*) — strip orange/rounded/shadow, force our blue
The shortcode loads its own CSS first, we override it scoped to .td-booking.
═══════════════════════════════════════════════════════════════ */
.td-booking .cpb-root {
--cpb-dark: var(--td-blue);
--cpb-dark-2: var(--td-blue-deep);
--cpb-accent: var(--td-blue);
--cpb-accent-dark: var(--td-blue-deep);
--cpb-accent-soft: var(--td-blue-soft);
--cpb-accent-border: var(--td-border);
--cpb-orange-1: var(--td-cta);
--cpb-orange-2: var(--td-cta-deep);
--cpb-green-1: var(--td-success);
--cpb-green-2: var(--td-success);
--cpb-border: var(--td-border);
--cpb-muted: var(--td-text-muted);
--cpb-soft: var(--td-bg-soft);
--cpb-shadow: none;
color: var(--td-text);
font-family: var(--td-font);
}
.td-booking .cpb-wrap { max-width: 100%; }
.td-booking .cpb-card {
border-radius: var(--td-radius);
box-shadow: none;
border: 1px solid var(--td-border);
padding: 16px;
margin: 12px 0;
}
.td-booking .cpb-head {
background: var(--td-blue);
border-radius: var(--td-radius);
font-weight: 700;
padding: 10px 12px;
margin: 0 0 12px;
text-align: left;
font-size: 14px;
letter-spacing: 0.02em;
}
.td-booking .cpb-date-btn {
background: var(--td-cta) !important;
color: var(--td-text) !important;
border-radius: var(--td-radius) !important;
padding: 10px 14px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
box-shadow: none !important;
}
.td-booking .cpb-date-btn:active { transform: none; }
.td-booking .cpb-sub {
border: 1px solid var(--td-border) !important;
border-radius: var(--td-radius) !important;
padding: 12px 14px !important;
margin: 8px 0 !important;
background: var(--td-bg) !important;
box-shadow: none !important;
}
.td-booking .cpb-sub.selected {
background: var(--td-blue-soft) !important;
border-color: var(--td-blue) !important;
box-shadow: none !important;
}
.td-booking .cpb-sub.mandatory {
border-color: var(--td-blue) !important;
background: var(--td-blue-soft) !important;
}
.td-booking .cpb-sub.mandatory .cpb-subheader {
background: transparent !important;
border-color: transparent !important;
}
.td-booking .cpb-req-badge {
background: var(--td-blue) !important; color: #fff !important;
border-radius: var(--td-radius) !important;
font-weight: 700 !important;
}
.td-booking .cpb-check {
accent-color: var(--td-blue) !important;
}
.td-booking .cpb-title {
color: var(--td-text) !important;
font-weight: 700 !important;
font-size: 14px !important;
}
.td-booking .cpb-rates {
color: var(--td-text) !important;
font-weight: 700 !important;
font-size: 13px !important;
}
/* Compact steppers — fit 3 across in the 360px right rail without overflow */
.td-booking .cpb-stepper-row {
grid-template-columns: 1fr 1fr 1fr !important;
gap: 6px !important;
padding: 6px 0 !important;
}
.td-booking .cpb-stepper {
gap: 4px !important;
text-align: center !important;
}
.td-booking .cpb-stepper .cpb-label {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
}
.td-booking .cpb-ctrl {
gap: 3px !important;
flex-wrap: nowrap !important;
justify-content: center !important;
}
.td-booking .cpb-btn {
width: 26px !important; height: 28px !important;
border-radius: var(--td-radius) !important;
border: 1px solid var(--td-border) !important;
background: var(--td-bg) !important;
color: var(--td-text) !important;
font-weight: 700 !important;
font-size: 14px !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.td-booking .cpb-btn:hover { background: var(--td-bg-soft) !important; }
.td-booking .cpb-btn.plus {
background: var(--td-blue) !important;
color: #fff !important;
border-color: var(--td-blue) !important;
}
.td-booking .cpb-btn.plus:hover { background: var(--td-blue-deep) !important; border-color: var(--td-blue-deep) !important; }
.td-booking .cpb-input {
width: 36px !important; height: 28px !important;
border: 1px solid var(--td-border) !important;
border-radius: var(--td-radius) !important;
font-weight: 700 !important;
font-size: 13px !important;
padding: 0 4px !important;
flex-shrink: 0 !important;
}
/* Price row — clean 3-column grid, aligned with the stepper columns below */
.td-booking .cpb-rates {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 8px !important;
align-items: end !important;
margin: 10px 0 8px !important;
flex-wrap: nowrap !important;
}
.td-booking .cpb-rate { display:flex !important; flex-direction:column !important; align-items:center !important; gap:1px !important; text-align:center !important; line-height:1.2 !important; }
.td-booking .cpb-rate__lbl { font-size:11px !important; font-weight:600 !important; color:var(--td-text-muted) !important; text-transform:uppercase !important; letter-spacing:.02em !important; }
.td-booking .cpb-rate__now { font-size:15px !important; font-weight:800 !important; color:var(--td-text) !important; }
.td-booking .cpb-rate__was { font-size:11px !important; font-weight:500 !important; color:var(--td-text-muted) !important; text-decoration:line-through !important; }
.td-booking .cpb-rate--off { font-size:11px !important; font-weight:600 !important; color:var(--td-text-muted) !important; }
.td-booking .cpb-sub {
padding: 10px 12px !important;
}
.td-booking .cpb-card {
padding: 12px !important;
}
/* Add-to-cart / total / final button (common cpb classes — defensive overrides) */
.td-booking [class*="cpb-add"],
.td-booking [class*="cpb-cart"],
.td-booking [class*="cpb-submit"],
.td-booking button[type="submit"] {
background: var(--td-cta) !important;
color: var(--td-text) !important;
border-radius: var(--td-radius) !important;
box-shadow: none !important;
padding: 12px 22px !important;
font-weight: 700 !important;
border: 0 !important;
}
.td-booking [class*="cpb-add"]:hover,
.td-booking [class*="cpb-cart"]:hover,
.td-booking [class*="cpb-submit"]:hover { background: var(--td-cta-deep) !important; }
.td-booking [class*="cpb-total"] {
background: var(--td-blue-soft) !important;
border-radius: var(--td-radius) !important;
border: 1px solid var(--td-border) !important;
color: var(--td-text) !important;
}
/* Section frame for the booking block */
.td-booking-section { background: var(--td-bg-soft); }
.td-booking-section .td-section__head { color: var(--td-text); }
/* Responsive */
@media (max-width: 1024px) {
.td-h-feat__grid { grid-template-columns: repeat(2, 1fr); }
.td-h-dest__grid { grid-template-columns: repeat(3, 1fr); }
.td-c-cities { grid-template-columns: repeat(3, 1fr); }
.td-c-tiles { grid-template-columns: repeat(2, 1fr); }
.td-h-trust__grid { grid-template-columns: repeat(2, 1fr); }
.td-c-build { grid-template-columns: 1fr; }
.td-c-reviews, .td-h-quotes__grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
}
@media (max-width: 520px) {
.td-h-feat__grid, .td-c-tiles { grid-template-columns: 1fr; }
.td-h-dest__grid { grid-template-columns: 1fr 1fr; gap: 10px; } /* keep destinations 2-up on mobile */
.td-h-dest__caption { padding: 11px 12px; }
.td-h-dest__name { font-size: 15px; }
.td-c-cities { grid-template-columns: repeat(2, 1fr); } /* keep cities scannable: 2 per row */
.td-c-city__name { font-size: 21px; }
.td-c-city__tag { font-size: 11px; }
.td-h-hero__title { font-size: 22px; }
.td-c-hero__title { font-size: 22px; }
}
/* ═══════════════════════════════════════════════════════════════════════
WOOCOMMERCE CART + CHECKOUT — styled for our design system
(replaces the Elementor/Hello-theme styling that was removed)
═══════════════════════════════════════════════════════════════════════ */
/* Layout — constrain + center the WC forms inside our page chrome */
.td-page-system .woocommerce { max-width: 1080px; margin: 0 auto; }
.td-page-system .woocommerce form .form-row { margin-bottom: 14px; }
/* ── Form fields ── */
.woocommerce form .form-row label,
.woocommerce-checkout label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--td-ink, #1a1a1a);
margin-bottom: 5px;
}
.woocommerce form .form-row .required { color: var(--td-coral, #e0564f); text-decoration: none; }
.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout textarea,
.select2-container .select2-selection--single {
width: 100%;
padding: 11px 13px;
font-size: 14px;
font-family: var(--td-font, inherit);
color: var(--td-ink, #1a1a1a);
background: #fff;
border: 1px solid var(--td-border, #d4d4d4);
border-radius: 4px;
box-sizing: border-box;
transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus {
outline: none;
border-color: var(--td-blue, #003B95);
box-shadow: 0 0 0 3px rgba(0,59,149,.12);
}
.woocommerce textarea, .woocommerce-checkout textarea { min-height: 84px; resize: vertical; }
.select2-container--default .select2-selection--single { height: auto; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; }
/* ── Two-column checkout on desktop ──
Scoped to NON-package checkouts. Package checkouts carry body.tdpb-package-checkout
and have their own purpose-built stacked layout (package-checkout.css) — our grid
must NOT override it, or the trip-summary + columns collapse into a broken overlap. */
@media (min-width: 900px) {
body:not(.tdpb-package-checkout) .woocommerce-checkout .col2-set,
body:not(.tdpb-package-checkout) .woocommerce-checkout #customer_details { display: block; }
body:not(.tdpb-package-checkout) .woocommerce-checkout #customer_details .col-1 { width: 100%; float: none; }
body:not(.tdpb-package-checkout) form.checkout.woocommerce-checkout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
body:not(.tdpb-package-checkout) form.checkout #customer_details { grid-column: 1; }
body:not(.tdpb-package-checkout) form.checkout #order_review,
body:not(.tdpb-package-checkout) form.checkout #order_review_heading { grid-column: 2; }
body:not(.tdpb-package-checkout) form.checkout #order_review_heading { margin-top: 0; }
}
/* ── Headings ── */
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
font-size: 18px;
font-weight: 700;
color: var(--td-ink, #1a1a1a);
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--td-blue, #003B95);
}
/* ── Order review box ── */
.woocommerce-checkout #order_review,
.woocommerce .cart-collaterals .cart_totals {
background: var(--td-bg-soft, #f6f8fb);
border: 1px solid var(--td-border, #d4d4d4);
border-radius: 8px;
padding: 20px;
}
.woocommerce-checkout-review-order-table,
.woocommerce table.shop_table {
border: none;
background: transparent;
border-radius: 0;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
padding: 10px 6px;
border-top: 1px solid var(--td-line, #ececec);
font-size: 14px;
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
font-size: 16px;
font-weight: 800;
color: var(--td-blue-deep, #002d73);
}
/* ── Payment methods ── */
.woocommerce-checkout #payment {
background: #fff;
border: 1px solid var(--td-border, #d4d4d4);
border-radius: 8px;
}
.woocommerce-checkout #payment ul.payment_methods {
border-bottom: 1px solid var(--td-line, #ececec);
padding: 14px 18px;
}
.woocommerce-checkout #payment ul.payment_methods li {
margin: 8px 0;
font-size: 14px;
font-weight: 600;
}
.woocommerce-checkout #payment div.payment_box {
background: var(--td-bg-soft, #f6f8fb);
font-size: 13px;
border-radius: 4px;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--td-bg-soft, #f6f8fb); }
/* ── Buttons — yellow CTA to match the brand ── */
.woocommerce #payment #place_order,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .actions .button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
background: var(--td-cta, #FEBB02) !important;
color: var(--td-ink, #1a1a1a) !important;
font-weight: 800;
font-size: 15px;
padding: 13px 26px;
border: none;
border-radius: 6px;
text-shadow: none;
transition: background .15s ease;
width: auto;
}
.woocommerce #payment #place_order:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
background: var(--td-cta-deep, #e0a800) !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; }
/* ── Cart table ── */
.woocommerce-cart table.cart img { width: 56px; border-radius: 4px; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 160px; }
.woocommerce a.button,
.woocommerce button.button {
background: var(--td-blue, #003B95);
color: #fff;
border-radius: 6px;
font-weight: 600;
border: none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--td-blue-deep, #002d73); color: #fff; }
/* ── Notices ── */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
border-top-color: var(--td-blue, #003B95);
border-radius: 4px;
font-size: 14px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--td-blue, #003B95); }
/* ── Phone intl-tel-input field (from the original page's custom CSS) ── */
.woocommerce-input-wrapper .iti { position: relative; display: inline-block; width: 100%; }
.woocommerce-input-wrapper .iti input { padding-left: 52px; }
/* ── Mobile ── */
@media (max-width: 899px) {
form.checkout.woocommerce-checkout { display: block; }
.woocommerce-checkout #order_review { margin-top: 24px; }
}
/* ════════════════════════════════════════════════════════════════════
AUDIT UPGRADES (Batch B) — rating row, trust row, included/excluded,
good-to-know, reviews head, verified badge, internal-link cluster.
════════════════════════════════════════════════════════════════════ */
/* Rating: number + stars + clickable review count (centered in tophead). */
.td-a-stars { letter-spacing: normal; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.td-a-stars__num { font-weight: 800; color: var(--td-text); font-size: 15px; }
.td-a-stars__icons { color: #F5A623; letter-spacing: 2px; font-size: 15px; }
.td-a-stars__count { font-size: 13px; font-weight: 600; color: var(--td-blue); text-decoration: none; }
.td-a-stars__count:hover { text-decoration: underline; }
/* Consolidated trust row under the title. */
.td-a-trustrow {
list-style: none; margin: 12px 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center;
}
.td-a-trustrow li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--td-text-soft); }
.td-a-trustrow svg { color: var(--td-success); flex-shrink: 0; }
/* Included / NOT-included, two columns. */
.td-a-inex { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.td-a-inex .td-a-inclusions { grid-template-columns: 1fr; gap: 8px; }
.td-ic { flex-shrink: 0; margin-top: 3px; }
.td-a-inclusions--no li { color: var(--td-text-muted); }
.td-a-inclusions--no svg { color: var(--td-text-muted); } /* neutral grey ✗ — calmer than orange; beats the green rule */
/* Good to know. */
.td-a-gtk { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.td-a-gtk li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--td-text-soft); line-height: 1.5; }
.td-a-gtk svg { color: var(--td-blue); flex-shrink: 0; margin-top: 2px; }
.td-a-gtk strong { color: var(--td-text); }
/* Reviews head + verified badge. */
.td-a-reviewhead { margin: 0 0 4px; font-size: 14px; color: var(--td-text-soft); }
.td-a-reviewhead strong { font-size: 18px; color: var(--td-text); font-weight: 800; }
.td-a-reviewhead__stars { color: #F5A623; letter-spacing: 1px; }
.td-verified { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--td-success); vertical-align: 1px; }
.td-verified svg { color: var(--td-success); }
/* Internal-link cluster (SEO). */
.td-a-links { margin: 20px 0 0; font-size: 13px; color: var(--td-text-muted); line-height: 1.9; }
.td-a-links strong { color: var(--td-text); }
.td-a-links a { color: var(--td-blue); text-decoration: none; }
.td-a-links a:hover { text-decoration: underline; }
.td-a-links__all { font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) {
.td-a-inex { grid-template-columns: 1fr; gap: 6px; }
}
/* Google rating badge (footer trust signal — only renders with real numbers). */
.td-gbadge {
display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
padding: 8px 13px; background: #fff; border: 1px solid var(--td-border);
border-radius: 999px; font-size: 13px; color: var(--td-text); text-decoration: none;
}
.td-gbadge:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.td-gbadge strong { font-size: 15px; font-weight: 800; }
.td-gbadge__stars { color: #F5A623; letter-spacing: 1px; }
.td-gbadge__count { color: var(--td-text-muted); }
/* ════════════════════════════════════════════════════════════════════
UNIFY THE PACKAGE CHECKOUT WITH THE CLEAN BRAND DESIGN
The package checkout (package-checkout.css) shipped a bespoke rounded /
orange / heavy-shadow theme, so it looked different from the activity
checkout. Re-point its design tokens to the brand palette + flatten the
radius/shadow, so BOTH checkouts share one clean, on-brand look. Loads
after package-checkout.css → wins. (Keeps its Trip-Summary/itinerary
structure intact — only the visual theme changes.)
════════════════════════════════════════════════════════════════════ */
body.tdpb-package-checkout .woocommerce-checkout {
--tdpb-accent: #003B95; /* was orange #f57b18 → brand blue */
--tdpb-accent-hover: #002D70;
--tdpb-accent-soft: #EBF3FF;
--tdpb-blue: #003B95; /* normalise to the exact brand blue */
--tdpb-blue-hover: #002D70;
--tdpb-blue-soft: #EBF3FF;
--tdpb-border: #E7E7E7;
--tdpb-surface-muted: #F5F5F5;
--tdpb-radius: 6px; /* flatten from 16px */
--tdpb-radius-lg: 8px; /* flatten from 20px */
--tdpb-shadow: 0 1px 3px rgba(0,0,0,.06);
--tdpb-shadow-lg: 0 2px 10px rgba(0,0,0,.07);
--tdpb-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Place-order button → brand gold, flat (match the activity checkout). */
body.tdpb-package-checkout .woocommerce-checkout #place_order {
background: var(--td-cta, #FEBB02) !important;
color: var(--td-ink, #1a1a1a) !important;
border-radius: 6px !important;
box-shadow: none !important;
text-transform: none !important;
}
body.tdpb-package-checkout .woocommerce-checkout #place_order:hover {
background: var(--td-cta-deep, #E9A800) !important;
transform: none !important;
box-shadow: none !important;
}
/* The card top-accent lines: brand blue, hairline. */
body.tdpb-package-checkout .woocommerce-checkout .woocommerce-billing-fields::before,
body.tdpb-package-checkout .tdpb-checkout-summary-card::before {
background: var(--td-blue, #003B95) !important;
height: 3px !important;
}
/* ============================================================
VLOG / Travel Videos — responsive video-card grid
============================================================ */
.td-vlog .td-hero__sub { margin: 8px 0 0; font-size: 15px; color: var(--td-text-soft); max-width: 720px; }
.td-vlog-grid { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.td-vlog-card { margin: 0; }
.td-vlog-card__link { display: block; text-decoration: none; color: inherit; }
.td-vlog-card__thumb { display: flex; align-items: center; justify-content: center; position: relative; aspect-ratio: 9 / 16; border-radius: var(--td-radius); background-size: cover; background-position: center; background-color: #0c1324; overflow: hidden; border: 1px solid var(--td-border); transition: transform .18s ease, box-shadow .18s ease; }
.td-vlog-card__link:hover .td-vlog-card__thumb { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.td-vlog-card__play { display: flex; opacity: .92; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); transition: opacity .18s ease, transform .18s ease; }
.td-vlog-card__link:hover .td-vlog-card__play { opacity: 1; transform: scale(1.06); }
.td-vlog-card__title { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--td-text); }
.td-vlog-guide { display: flex; gap: 18px; align-items: flex-start; margin: 34px 0; padding: 22px; border: 1px solid var(--td-border); border-radius: var(--td-radius); background: var(--td-bg-soft); }
.td-vlog-guide__avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--td-blue); color: #fff; font-weight: 700; font-size: 24px; display: flex; align-items: center; justify-content: center; }
.td-vlog-guide__name { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--td-text); }
.td-vlog-guide__bio { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--td-text-soft); max-width: 680px; }
.td-vlog-cta { margin: 8px 0 40px; padding: 28px; text-align: center; border: 1px solid var(--td-border); border-radius: var(--td-radius); background: var(--td-blue-soft); }
.td-vlog-cta__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--td-blue-deep); }
.td-vlog-cta__sub { margin: 0 auto 16px; font-size: 14px; line-height: 1.6; color: var(--td-text-soft); max-width: 620px; }
.td-vlog-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) { .td-vlog-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .td-vlog-guide { flex-direction: column; } }
/* ============================================================
PRESS / In the News
============================================================ */
.td-press .td-hero__sub { margin: 8px 0 0; font-size: 15px; color: var(--td-text-soft); max-width: 760px; }
.td-press-featured { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 0 22px; border-bottom: 1px solid var(--td-border); margin-bottom: 26px; }
.td-press-featured__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--td-text-muted); }
.td-press-featured__list { list-style: none; display: flex; gap: 22px; flex-wrap: wrap; margin: 0; padding: 0; }
.td-press-featured__list li { font-size: 17px; font-weight: 700; color: var(--td-blue-deep); letter-spacing: -0.01em; }
.td-press-grid { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.td-press-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1px solid var(--td-border); border-radius: var(--td-radius); background: var(--td-bg); }
.td-press-card__outlet { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--td-blue); }
.td-press-card__headline { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--td-text); flex: 1; }
.td-press-card__link { font-size: 14px; font-weight: 600; color: var(--td-link); text-decoration: none; }
.td-press-card__link:hover { text-decoration: underline; }
.td-press-cta { margin: 30px 0 40px; padding: 28px; text-align: center; border: 1px solid var(--td-border); border-radius: var(--td-radius); background: var(--td-blue-soft); }
.td-press-cta__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--td-blue-deep); }
.td-press-cta__sub { margin: 0 auto 16px; font-size: 14px; line-height: 1.6; color: var(--td-text-soft); max-width: 640px; }
.td-press-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Footer — social links + TAT line */
.td-foot__tat { font-size: 12px; color: var(--td-text-muted); }
.td-foot__social { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.td-foot__social li { margin: 0; }
.td-foot__social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--td-border, #E7E7E7); color: var(--td-text-muted, #6B6B6B); text-decoration: none; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.td-foot__social a:hover, .td-foot__social a:focus-visible { color: #fff; background: var(--td-blue, #003B95); border-color: var(--td-blue, #003B95); }
.td-foot__social svg { display: block; width: 16px; height: 16px; }
/* Footer legal/bottom bar — copyright left, social icons right */
.td-foot__legal-row { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.td-foot__copy { margin: 0; }
/* Footer contact — iconified WhatsApp + email */
.td-foot__contact { list-style: none; margin: 16px 0 0; padding: 0; }
.td-foot__contact li { margin: 7px 0; }
.td-foot__contact a { display: inline-flex; align-items: center; gap: 9px; }
.td-foot__contact svg { flex: none; color: var(--td-text-muted, #6B6B6B); }
.td-foot__contact a:hover svg { color: var(--td-link, #003B95); }
.td-foot__hours { font-size: 12.5px; line-height: 1.5; color: var(--td-text-muted, #6B6B6B); margin: 14px 0 0; max-width: 330px; }
.td-foot__hours strong { color: var(--td-text, #262626); font-weight: 700; }
/* Activity "pay deposit" button (Stripe — e.g. Sharing Yacht Party), in the booking rail */
.td-a-deposit { margin-top: 12px; }
.td-a-deposit__btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; box-sizing: border-box; background: var(--td-success, #008234); color: #fff; font-weight: 800; font-size: 15px; padding: 13px 18px; border-radius: 8px; text-decoration: none; transition: background-color .15s; }
.td-a-deposit__btn:hover { background: #006b2b; color: #fff; }
.td-a-deposit__note { font-size: 12px; line-height: 1.5; color: var(--td-text-muted, #6B6B6B); margin: 8px 0 0; text-align: center; }
@media (max-width: 600px) {
.td-foot__legal-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* ── "See it for yourself" — vertical Shorts reel card (activity pages) ── */
.td-a-reel { display:flex; gap:16px; align-items:stretch; text-decoration:none; }
.td-a-reel__thumb {
position:relative; flex:0 0 132px; width:132px; aspect-ratio:9/16;
border:1px solid var(--td-border); border-radius:var(--td-radius);
overflow:hidden; background:#0b0b0b 50% / cover no-repeat;
}
.td-a-reel__play {
position:absolute; inset:0; margin:auto; width:46px; height:46px;
display:flex; align-items:center; justify-content:center;
background:rgba(0,0,0,.55); color:#fff; border-radius:999px;
transition:background .2s ease, transform .2s ease;
}
.td-a-reel:hover .td-a-reel__play { background:var(--td-cta); color:var(--td-text); transform:scale(1.06); }
.td-a-reel__tag {
position:absolute; left:8px; top:8px; z-index:1;
display:inline-flex; align-items:center; gap:4px;
background:rgba(0,0,0,.6); color:#fff; font-size:11px; font-weight:600;
padding:3px 7px; border-radius:var(--td-radius);
}
.td-a-reel__tag svg { color:#FF0000; }
.td-a-reel__meta { display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0; }
.td-a-reel__title { font-size:15px; font-weight:700; color:var(--td-text); line-height:1.35; }
.td-a-reel__sub { font-size:13px; color:var(--td-text-soft); line-height:1.5; }
.td-a-reel__cta { display:inline-flex; align-items:center; gap:6px; margin-top:2px; font-size:13px; font-weight:600; color:var(--td-link); }
.td-a-reel:hover .td-a-reel__cta { color:var(--td-blue-deep); }
.td-a-reel__cta svg { transition:transform .2s ease; }
.td-a-reel:hover .td-a-reel__cta svg { transform:translateX(2px); }
@media (max-width:600px){
.td-a-reel__thumb { flex-basis:108px; width:108px; }
.td-a-reel__title { font-size:14px; }
}
/* ===== About Us ===== */
.td-about__intro .td-prose{max-width:760px;font-size:16px;line-height:1.7;color:var(--td-text)}
.td-about__h2{font-size:23px;font-weight:800;color:var(--td-text);margin:0 0 18px;letter-spacing:-0.01em}
.td-about__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.td-about__grid li{border:1px solid var(--td-border);border-radius:var(--td-radius);padding:18px;background:var(--td-bg)}
.td-about__grid strong{display:block;font-size:15px;color:var(--td-blue);margin-bottom:6px}
.td-about__grid span{font-size:14px;color:var(--td-text-soft);line-height:1.55}
.td-about__trust-card{background:var(--td-blue-soft);border:1px solid #CFE0FF;border-radius:var(--td-radius);padding:28px}
.td-about__trust-card p{font-size:15px;line-height:1.65;color:var(--td-text);margin:0}
.td-about__reg{margin-top:12px !important;font-size:14px;color:var(--td-text-soft)}
.td-about__cta{text-align:center}
.td-about__cta h2{font-size:23px;font-weight:800;color:var(--td-text);margin:0 0 6px}
.td-about__cta p{color:var(--td-text-soft);margin:0}
.td-about__cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
@media(max-width:860px){.td-about__grid{grid-template-columns:1fr}}
/* ===== Contact Us ===== */
.td-contact__grid{display:grid;grid-template-columns:380px 1fr;gap:40px;align-items:start}
.td-contact__wa{display:flex;align-items:center;gap:12px;background:var(--td-cta);color:#1a1a1a;border-radius:var(--td-radius);padding:15px 18px;text-decoration:none;margin-bottom:20px}
.td-contact__wa:hover{background:var(--td-cta-deep)}
.td-contact__wa span{display:flex;flex-direction:column;line-height:1.25}
.td-contact__wa strong{font-size:13px;font-weight:700}
.td-contact__wa em{font-style:normal;font-weight:800;font-size:18px}
.td-contact__list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:14px}
.td-contact__list li{display:flex;flex-direction:column;gap:3px;font-size:15px;color:var(--td-text);line-height:1.5}
.td-contact__lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--td-text-muted)}
.td-contact__list a{color:var(--td-link);text-decoration:none}
.td-contact__social{display:flex;gap:16px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--td-border)}
.td-contact__social a{color:var(--td-link);font-weight:600;font-size:14px;text-decoration:none}
.td-contact__formwrap{border:1px solid var(--td-border);border-radius:var(--td-radius);padding:28px;background:var(--td-bg);box-shadow:0 4px 18px rgba(0,0,0,.05)}
.td-contact__formtitle{font-size:18px;font-weight:800;color:var(--td-text);margin:0 0 18px}
.td-contact__form label{display:block;font-size:13px;font-weight:700;color:var(--td-text);margin-bottom:14px}
.td-contact__form input,.td-contact__form textarea{display:block;width:100%;margin-top:6px;border:1px solid var(--td-border);border-radius:var(--td-radius);padding:11px 13px;font-family:inherit;font-size:15px;font-weight:400;color:var(--td-text);background:#fff;box-sizing:border-box}
.td-contact__form input:focus,.td-contact__form textarea:focus{outline:none;border-color:var(--td-blue);box-shadow:0 0 0 3px rgba(0,59,149,.12)}
.td-contact__form .td-btn{width:100%;margin-top:4px}
.td-contact__hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.td-contact__fineprint{font-size:13px;color:var(--td-text-muted);text-align:center;margin:14px 0 0}
.td-contact__fineprint a{color:var(--td-link);font-weight:600}
.td-contact__notice{border-radius:var(--td-radius);padding:12px 16px;margin-bottom:18px;font-size:14px;font-weight:600}
.td-contact__notice--ok{background:#EAF7EE;border:1px solid #008234;color:#08611f}
.td-contact__notice--err{background:#FDECEC;border:1px solid #C84600;color:#8a2b00}
@media(max-width:860px){.td-contact__grid{grid-template-columns:1fr;gap:24px}}
/* ── Multi-day package booking widget ──────────────────────────────────── */
.td-pkg-book{background:#fff;border:1px solid var(--td-border,#E7E7E7);border-radius:var(--td-radius,8px);padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.td-pkg-book__label{font-size:.78rem;color:var(--td-text-muted,#5a5a5a);text-transform:uppercase;letter-spacing:.04em;margin:0 0 2px;}
.td-pkg-book__amount{font-size:1.9rem;font-weight:800;color:var(--td-blue,#003B95);line-height:1.1;margin:0;}
.td-pkg-book__per{font-size:.95rem;font-weight:600;color:var(--td-text-muted,#5a5a5a);}
.td-pkg-book__note{font-size:.82rem;color:var(--td-text-muted,#5a5a5a);margin:6px 0 14px;line-height:1.45;}
.td-pkg-book__paxrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.td-pkg-book__paxlabel{font-weight:600;font-size:.95rem;}
.td-pkg-book__stepper{display:inline-flex;align-items:center;border:1px solid var(--td-border,#E7E7E7);border-radius:6px;overflow:hidden;}
.td-pkg-book__step{width:38px;height:40px;border:0;background:var(--td-blue-soft,#EBF3FF);color:var(--td-blue,#003B95);font-size:1.3rem;font-weight:700;cursor:pointer;line-height:1;}
.td-pkg-book__step:hover{background:#dce9ff;}
.td-pkg-book__paxinput{width:56px;height:40px;border:0;border-left:1px solid var(--td-border,#E7E7E7);border-right:1px solid var(--td-border,#E7E7E7);text-align:center;font-size:1.05rem;font-weight:700;-moz-appearance:textfield;}
.td-pkg-book__paxinput::-webkit-outer-spin-button,.td-pkg-book__paxinput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.td-pkg-book__total{display:flex;align-items:baseline;gap:8px;font-size:.95rem;margin:0 0 12px;padding-top:12px;border-top:1px dashed var(--td-border,#E7E7E7);}
.td-pkg-book__total strong{font-size:1.35rem;color:var(--td-blue,#003B95);}
.td-pkg-book__totalnote{font-size:.8rem;color:var(--td-text-muted,#5a5a5a);}
.td-pkg-book__cta{display:block;width:100%;text-align:center;margin-bottom:8px;}
.td-pkg-book__pay{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.78rem;color:var(--td-success,#008234);margin:6px 0 10px;}
.td-pkg-book__wa{display:block;text-align:center;font-size:.86rem;color:var(--td-blue,#003B95);text-decoration:underline;margin:0 0 10px;}
/* ── Package image gallery (included activities) ───────────────────────── */
.td-pkg-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;}
.td-pkg-gallery__item{margin:0;position:relative;border-radius:var(--td-radius,8px);overflow:hidden;background:#f0f0f0;}
.td-pkg-gallery__item a{display:block;color:#fff;text-decoration:none;}
.td-pkg-gallery__item img{display:block;width:100%;height:165px;object-fit:cover;transition:transform .3s ease;}
.td-pkg-gallery__item:hover img{transform:scale(1.05);}
.td-pkg-gallery__item figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;color:#fff;font-size:.85rem;font-weight:700;background:linear-gradient(to top,rgba(0,0,0,.72),transparent);}
.td-pkg-gallery__cap{font-size:.8rem;color:var(--td-text-muted,#5a5a5a);margin:8px 0 0;}
/* ── DBD registry verification link ────────────────────────────────────── */
.td-foot__dbd{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:.8rem;color:inherit;opacity:.85;text-decoration:none;}
.td-foot__dbd:hover{opacity:1;text-decoration:underline;}
.td-foot__dbd svg{flex:none;color:var(--td-success,#008234);}
.td-about__reg-verify{margin-top:12px;}
/* Activity card thumbnail — restores the photo at the top of city-grid cards */
.td-card--rich .td-card__media { position: relative; margin: -14px -16px 8px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--td-radius) var(--td-radius) 0 0; background: var(--td-bg-soft); }
.td-card--rich .td-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.td-card--rich .td-card__link:hover .td-card__media img { transform: scale(1.05); }
.td-card__chips { position: absolute; left: 8px; top: 8px; right: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.td-card__chips .td-card__style { box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.td-card__chips .td-pick--solid { box-shadow: 0 1px 3px rgba(0,0,0,.3); }
/* ── Header: brand logo + compact contact buttons ──────────────────────── */
.td-brand { align-items: flex-start; }
.td-brand .td-brand__logo { display: block; height: 40px; width: auto; }
/* WooCommerce pages (checkout/cart/account) wrap their content in the 720px
reading column — let those use the full width so the form isn't squeezed,
and stop WooCommerce's `.woocommerce-page img{height:auto}` from blowing up
the header logo (the `.td-brand` prefix above out-specifies it). */
.woocommerce-checkout .td-prose,
.woocommerce-cart .td-prose,
.woocommerce-account .td-prose { max-width: 1140px; }
.td-top__contact { display: flex; align-items: center; gap: 8px; }
.td-cbtn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 8px 15px; font-weight: 700; font-size: 13px; text-decoration: none; line-height: 1; white-space: nowrap; transition: background .15s ease; -webkit-tap-highlight-color: transparent; }
.td-cbtn__ic { flex: none; }
.td-cbtn--wa { background: #25D366; color: #fff; }
.td-cbtn--wa:hover { background: #1ebe5b; color: #fff; text-decoration: none; }
.td-cbtn--call { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.td-cbtn--call:hover { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; }
@media (max-width: 720px) {
.td-brand .td-brand__logo { height: 34px; }
.td-brand__tag { display: none; }
.td-cbtn { padding: 9px; gap: 0; }
.td-cbtn__txt { display: none; }
}
/* ── Mobile: clearer destination nav (bigger, bolder city links) ───────── */
@media (max-width: 720px) {
.td-nav__inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.td-nav__link { font-size: 15.5px; padding: 13px 15px; font-weight: 600; }
.td-nav__link.is-current { font-weight: 800; border-bottom-width: 3px; }
.td-nav__link--cta { font-size: 13px; padding: 8px 13px; }
/* Mega-nav: kill the dropdown panels on touch so they never overlay the
horizontal-scroll city nav. Each city stays a plain working link; the
chevron is hidden since there's nothing to drop down. */
.td-nav__item { display: contents; } /* let the city scroll inline like the others */
.td-nav__panel { display: none !important; }
.td-nav__caret { display: none; }
}
/* ── /thailand/ hero: make the "WhatsApp us" ghost button visible on the blue band ── */
.td-c-hero .td-btn--ghost-light { color: #fff; border-color: rgba(255,255,255,0.65); }
.td-c-hero .td-btn--ghost-light:hover { background: #fff; color: var(--td-blue); border-color: #fff; }
/* ── Cities We Cover: bigger, higher-contrast city names = instant mobile wayfinding ── */
.td-c-city__shade { background: linear-gradient(180deg, rgba(0,0,0,0) 12%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.92) 100%); }
.td-c-city__name { font-size: 24px; letter-spacing: -0.01em; }
.td-c-city__tag { font-size: 12.5px; color: #fff; }
@media (max-width: 520px) {
.td-c-cities { grid-template-columns: 1fr; gap: 12px; } /* one clear full-width banner per city */
.td-c-city__card { aspect-ratio: 16 / 7; } /* wide banner so all 5 fit without huge scroll */
.td-c-city__name { font-size: 27px; }
.td-c-city__tag { font-size: 13px; }
.td-c-city__body { padding: 14px 16px; }
}
/* ── Header search button (mirrors the Call button) ── */
.td-cbtn--search { background: transparent; cursor: pointer; font: inherit; }
@media (max-width: 760px) { .td-cbtn--search .td-cbtn__txt { display: none; } }
/* ── Instant activity search overlay ── */
.td-search { position: fixed; inset: 0; z-index: 1000; background: rgba(10,20,40,0.55); display: flex; justify-content: center; align-items: flex-start; padding: 7vh 16px 16px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.td-search[hidden] { display: none; }
.td-search__panel { width: 100%; max-width: 580px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,0.35); display: flex; flex-direction: column; max-height: 84vh; }
.td-search__bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--td-border); }
.td-search__ic { color: var(--td-text-muted); flex: none; }
.td-search__input { flex: 1; min-width: 0; border: 0; outline: none; font-family: inherit; font-size: 16px; color: var(--td-text); background: transparent; }
.td-search__close { flex: none; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--td-text-muted); cursor: pointer; padding: 0 4px; }
.td-search__close:hover { color: var(--td-text); }
.td-search__results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.td-search__link { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--td-text); }
.td-search__link:hover, .td-search__link:focus { background: var(--td-blue-soft); outline: none; }
.td-search__thumb { flex: none; width: 56px; height: 42px; border-radius: 6px; background-size: cover; background-position: center; background-color: var(--td-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.td-search__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.td-search__t { font-weight: 600; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-search__s { font-size: 12px; color: var(--td-text-muted); }
.td-search__p { flex: none; font-weight: 700; font-size: 13px; color: var(--td-blue); white-space: nowrap; }
.td-search__empty, .td-search__hint { padding: 16px; margin: 0; color: var(--td-text-muted); font-size: 13.5px; line-height: 1.5; }
.td-search__empty a { color: var(--td-blue); }
@media (max-width: 600px) {
.td-search { padding: 0; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.td-search__panel { max-width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; }
.td-search__results { flex: 1; }
}
.td-cbtn--search { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.td-cbtn--search:hover { background: rgba(255,255,255,.22); color: #fff; }
/* ── Fill the "Real WhatsApp support" panel so it isn't empty on desktop ── */
.td-c-build__panel { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.td-c-build__label { display: inline-flex; align-items: center; gap: 6px; }
.td-c-build__phone { display: inline-block; width: max-content; font-size: 25px; font-weight: 800; color: var(--td-blue); text-decoration: none; margin: 2px 0 0; letter-spacing: -0.01em; }
.td-c-build__phone:hover { text-decoration: underline; }
.td-c-build__avail { font-size: 13px; color: var(--td-text-muted); margin: 0; line-height: 1.5; }
.td-c-build__trust { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.td-c-build__trust li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--td-text); }
.td-c-build__trust li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--td-success, #008234); font-weight: 800; }
.td-c-build__cta { margin-top: 14px; text-align: center; }
@media (max-width: 760px) { .td-c-build__panel { justify-content: flex-start; } }
/* Land-package itinerary day items */
.td-landpkg-day__items { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.td-landpkg-day__items li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--td-text-soft,#444); line-height: 1.45; }
.td-landpkg-day__items li::before { content: "\2022"; position: absolute; left: 3px; top: 0; color: var(--td-blue,#003B95); }
/* ── Blog hub ─────────────────────────────────────────────── */
.td-section__sub { color:#555; margin:-4px 0 16px; font-size:14.5px; }
.td-blog-cards { list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.td-blog-card { border:1px solid var(--td-border,#E7E7E7); border-radius:8px; overflow:hidden; transition:box-shadow .15s ease, transform .15s ease; background:#fff; }
.td-blog-card:hover { box-shadow:0 8px 22px rgba(0,0,0,.08); transform:translateY(-2px); }
.td-blog-card__link { display:block; padding:18px; text-decoration:none; color:inherit; height:100%; }
.td-blog-card__title { font-size:17px; margin:0 0 8px; line-height:1.3; color:var(--td-text,#1a1a1a); }
.td-blog-card__ex { font-size:13.5px; color:#555; line-height:1.5; margin:0 0 12px; }
.td-blog-card__more { font-size:13px; font-weight:700; color:var(--td-link,#003B95); }
/* ── Article (blog / itinerary) ───────────────────────────── */
.td-article__wrap { max-width:760px; margin:0 auto; padding:0 16px; }
.td-article__head { padding:30px 0 6px; }
.td-article__kind { color:var(--td-link,#003B95); font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin:0 0 6px; }
.td-article__title { font-size:34px; line-height:1.15; margin:6px 0 0; letter-spacing:-.01em; }
.td-article__body { font-size:16.5px; line-height:1.72; color:#2b2b2b; padding:14px 16px 44px; }
.td-article__body > p { margin:0 0 16px; }
.td-article__body ul, .td-article__body ol { margin:0 0 18px; padding-left:22px; }
.td-article__body li { margin:5px 0; }
.td-article__body a { color:var(--td-link,#003B95); text-decoration:underline; text-underline-offset:2px; }
.td-article__body strong { color:#1a1a1a; }
.td-article__h2 { font-size:23px; line-height:1.25; margin:32px 0 12px; letter-spacing:-.01em; }
.td-article__body h3 { font-size:18px; margin:22px 0 8px; }
.td-article__body table { width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14.5px; }
.td-article__body th, .td-article__body td { border:1px solid var(--td-border,#E7E7E7); padding:8px 10px; text-align:left; }
.td-article__body th { background:var(--td-blue-soft,#EBF3FF); }
/* FAQs (shared by article + origin) */
.td-faqs { display:grid; gap:10px; margin:8px 0 0; }
.td-faq { border:1px solid var(--td-border,#E7E7E7); border-radius:var(--td-radius,4px); background:#fff; }
.td-faq summary { cursor:pointer; padding:14px 42px 14px 16px; font-weight:650; list-style:none; position:relative; font-size:15.5px; }
.td-faq summary::-webkit-details-marker { display:none; }
.td-faq summary::after { content:"+"; position:absolute; right:16px; top:12px; font-size:20px; color:var(--td-link,#003B95); font-weight:400; }
.td-faq[open] summary::after { content:"\2212"; }
.td-faq__a { padding:0 16px 14px; color:#444; font-size:14.5px; line-height:1.6; }
.td-faq__a p { margin:0 0 10px; }
/* Article CTA + related */
.td-article__cta { background:var(--td-blue-soft,#EBF3FF); border:1px solid #d6e4fb; border-radius:8px; padding:22px; margin:34px 0 8px; }
.td-article__cta h3 { margin:0 0 6px; font-size:19px; }
.td-article__cta p { margin:0 0 14px; font-size:14.5px; color:#3a4a63; line-height:1.55; }
.td-article__cta-btns { display:flex; gap:10px; flex-wrap:wrap; }
.td-article__related { margin:30px 0 0; border-top:1px solid var(--td-border,#E7E7E7); padding-top:18px; }
.td-article__related h3 { font-size:16px; margin:0 0 10px; }
.td-article__related ul { list-style:none; padding:0; margin:0; display:grid; gap:7px; }
.td-article__related a { color:var(--td-link,#003B95); text-decoration:none; font-weight:600; font-size:14.5px; }
.td-article__related a:hover { text-decoration:underline; }
/* ── Origin-city landing ──────────────────────────────────── */
.td-hero__cta { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.td-hero__sub p { margin:0 0 10px; }
.td-origin__body { max-width:840px; }
.td-origin__sec { margin:0 0 24px; }
.td-origin__sec p { line-height:1.68; color:#2f2f2f; margin:0 0 14px; }
.td-origin__sec ul { line-height:1.6; color:#2f2f2f; padding-left:22px; margin:0 0 14px; }
.td-origin__sec li { margin:5px 0; }
@media (max-width:600px){
.td-article__title { font-size:27px; }
.td-article__h2 { font-size:20px; }
.td-article__body { font-size:16px; }
}
/* Footer 2-col city list (Packages from India) */
.td-foot__list--cols { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
/* Home featured activity cards — photo band on top */
.td-h-feat__card { padding: 0; overflow: hidden; gap: 0; }
.td-h-feat__media { position: relative; aspect-ratio: 16 / 10; background: var(--td-bg-soft,#f4f6f8) center/cover no-repeat; }
.td-h-feat__chip { position: absolute; top: 8px; left: 8px; align-self: auto; z-index: 1; background: rgba(255,255,255,.93); }
.td-h-feat__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; flex: 1 1 auto; }
.td-h-feat__title { margin: 0; }
/* Final CTA — make the secondary button visible on the blue band */
.td-h-cta .td-btn--ghost-light { color: #fff; border-color: rgba(255,255,255,0.7); }
.td-h-cta .td-btn--ghost-light:hover { background: #fff; color: var(--td-blue); border-color: #fff; }
/* ── Rate-card table (quote-only options — e.g. Sina Beach Club private tables) ── */
.td-rate-table { width: 100%; border-collapse: collapse; margin: 14px 0 18px; font-size: 14.5px; }
.td-rate-table th { text-align: left; background: var(--td-bg-soft, #F7F8FA); color: var(--td-text, #262626); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 2px solid var(--td-border, #E7E7E7); }
.td-rate-table td { padding: 11px 12px; border-bottom: 1px solid var(--td-border, #E7E7E7); }
.td-rate-table tbody tr:last-child td { border-bottom: 0; }
.td-rate-table td:first-child { font-weight: 600; color: var(--td-text, #262626); }
.td-rate-table td:nth-child(3) { font-weight: 800; color: var(--td-blue, #003B95); white-space: nowrap; }
.td-rate-table td:nth-child(4) { color: var(--td-success, #008234); font-weight: 600; white-space: nowrap; }
.td-rate-fine { font-size: 12.5px; color: var(--td-text-muted, #6B6B6B); }
.td-rate-cta { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #fff; font-weight: 800; font-size: 15px; padding: 13px 22px; border-radius: 8px; text-decoration: none; transition: background-color .15s; }
.td-rate-cta:hover { background: #1da851; color: #fff; }
@media (max-width: 560px) {
.td-rate-table { font-size: 13.5px; }
.td-rate-table th, .td-rate-table td { padding: 8px 9px; }
}