/* Additive rules on top of the shared style.css design system — Lanta Travels specific */
/* Contact-form honeypot: hidden via layout, not display:none, which many
spam scripts specifically check for and skip. */
.lt-contact-form .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; opacity: 0; pointer-events: none; box-sizing: border-box; }
/* Logo: no frame, matches villa's plain treatment — logo hidden over the video
hero and only fading in once the nav goes solid on scroll (or on any inner
page), same behaviour as siamlannavillas.com. Nav and footer logos share the
same height. */
.nav-logo-img, .footer-logo-img { height: 36px; width: auto; }
/* Language-flag row in the top nav: home page only (Bo's call 2026-09-22 —
it was showing on every page's hero before the nav goes solid on scroll;
now scoped so inner pages never show it, only the homepage does). */
body:not(.home) .nav-lang-bar { display: none !important; }
@media (max-width: 900px) {
.nav-logo-img { height: 28px; }
}
/* villa's style.css never actually styles the ![]()
inside .shop-card-img.has-photo
(only .shop-box-media / .shop-breakfast-media do) — without this the photo renders
at its native size and blows out the card layout. */
.shop-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Homepage category cards use transparent watercolour icons, not photography —
no box/tile/shadow tight behind the icon itself, just the illustration sitting
on the page — but a simple frame around the whole card (icon + name + price)
ties each one together as a single unit instead of looking like loose,
disconnected pieces stacked in the grid. */
body.home .shop-card-img { height: auto; padding: 1.5rem 1.5rem 0; background: none; display: flex; justify-content: center; }
body.home .shop-card-img img { width: 100%; max-width: 500px; height: auto; object-fit: contain; }
body.home .shop-card { box-shadow: none; background: none; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; }
body.home .shop-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08); transform: translateY(-3px); border-color: rgba(0,0,0,0.15); }
body.home .shop-card-body { text-align: center; align-items: center; padding: 1rem 1.6rem 1.6rem; }
/* Homepage has exactly 4 category cards — villa's 3-column grid leaves an
orphaned single card on its own row at desktop widths. Force a balanced
2x2 instead (already 2-per-row below 960px via villa's own breakpoint). */
@media (min-width: 961px) {
body.home .shop-grid { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; gap: 2rem; }
}
/* The blur workaround from the old portrait/pixelated placeholder clip is gone
now that hero-reel.mp4 is a genuine 1280x720 multi-clip source — no filter needed. */
/* Rentals dropdown: villa's version slides the menu in on translateY plus
centers it with translateX(-50%) — combined with the underline pseudo-element
on nav-links a, hovering a sub-item (e.g. "Scooter Rental") could visibly
shift. Drop the transform entirely and just fade the dropdown in/out, and
make doubly sure no underline sneaks onto dropdown items. */
/* Scoped to desktop widths only — unscoped, the !important transform overrode
the mobile media query's own reset (position:static/transform:none), pushing
the Rentals submenu ~95px left of the mobile menu's true center. */
@media (min-width: 961px) {
.nav-dropdown-menu { transform: translateX(-50%) !important; transition: opacity 0.15s ease, visibility 0.15s !important; }
}
.nav-dropdown-menu a::after { display: none !important; content: none !important; }
/* Tighten the gap between the intro paragraph and "Where to start" below it —
villa's base `section { padding: 7rem 0 }` + shop-section's own 5rem top
padding left a big empty gap between the two on the homepage. */
body.home .intro { padding-bottom: 1.5rem; }
.breadcrumb { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.55); text-align: center; margin-bottom: 1.2rem; }
.breadcrumb a { color: rgba(255,255,255,0.75); }
.breadcrumb a:hover { color: var(--white); }
body:not(.home) .breadcrumb { color: rgba(255,255,255,0.55); }
/* ---- TOUR / TRANSFER / RENTAL DETAIL PAGES ---- */
.tour-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 3.5rem; align-items: start; }
.tour-media { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; background: var(--sand); margin-bottom: 2rem; }
.tour-body h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-top: 2.5rem; }
.tour-body ul { padding-left: 1.3rem; color: var(--mid); line-height: 1.9; }
.tour-body ul.excluded li { color: var(--mid); }
.tour-sidebar { background: var(--white); box-shadow: 0 4px 30px rgba(0,0,0,0.06); padding: 2.2rem; position: sticky; top: 6rem; }
.tour-sidebar.tour-sidebar-bottom { position: static; }
.tour-sidebar .shop-price { margin-bottom: 0.3rem; }
.tour-price-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.8rem 0; border-bottom: 1px solid rgba(0,0,0,0.07); }
.tour-price-row:last-of-type { border-bottom: none; }
.tour-price-row .label { font-size: 0.85rem; color: var(--mid); }
.tour-price-row .price { font-family: var(--font-display); font-size: 1.3rem; color: var(--dark); }
.tour-cta-row { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.2rem; }
.btn-whatsapp { display: block; text-align: center; padding: 0.85rem 1.5rem; background: #25D366; color: #fff; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.btn-whatsapp:hover { filter: brightness(0.95); }
.info-note { display: block; color: var(--mid); font-size: 0.85rem; font-style: italic; margin: 0.6rem 0; line-height: 1.7; }
.related-tours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem; }
.related-tour-card { background: var(--white); box-shadow: 0 4px 24px rgba(0,0,0,0.06); padding: 1.4rem; transition: transform 0.25s ease; }
.related-tour-card:hover { transform: translateY(-3px); }
.related-tour-card h4 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 0.4rem; }
.related-tour-card span { font-size: 0.78rem; color: var(--gold); }
/* ---- PRICE TABLE (transfers / private longtail) ---- */
.price-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 1.5rem 0; }
.price-table th, .price-table td { padding: 0.7rem 0.9rem; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.08); }
.price-table th { font-family: var(--font-label); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); }
.price-table td:first-child, .price-table th:first-child { text-align: left; }
.price-table td.na { color: rgba(0,0,0,0.25); }
/* ---- ROUTE HERO (transfers / rentals — no video) ---- */
.simple-hero { background: var(--sage); padding: 9rem 0 4rem; }
/* ---- TOURS HUB: taller 4:3 card photos so more of each photo shows ---- */
body.tours-hub .shop-card-img { height: auto; aspect-ratio: 4 / 3; }
.tours-hub-heading { margin: 2.5rem 0 0.5rem; font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.tours-hub-sub { margin: 0 0 1.8rem; color: var(--mid); font-size: 0.9rem; max-width: 640px; }
/* ---- NO-PHOTO CARDS (transfers hub, scooter/car rental, massage): drop the
image slot entirely rather than leaving an empty gap. ---- */
.shop-card.no-photo { display: block; }
.shop-card.no-photo .shop-card-body { height: 100%; }
/* ---- PRIVATE TOURS GRID (tours hub): same has-photo card as Group Tours —
flat, always visible, so both sections read as equally complete — with a
gold top border and a small label to keep it visually distinct at a glance. ---- */
.pl-grid .shop-card { border-top: 3px solid var(--gold); }
.pl-card-label { display: block; font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; }
.pl-grid-note { margin: 1.2rem 0 0; font-size: 0.78rem; color: var(--mid); font-style: italic; }
@media (max-width: 900px) {
.tour-layout { grid-template-columns: 1fr; }
.tour-sidebar { position: static; }
.related-tours { grid-template-columns: 1fr; }
}
/* ---- GROUP TOURS (tours hub): collapsed into one expandable banner card —
Bo's call 2026-09-22: private tours are the priority and lead the page now,
group tours are still all there but tucked behind a "+" so they don't
compete for the same visual weight. Native / — expanded
state, keyboard toggle (Enter/Space) and screen-reader announcement all
come free, no JS needed. */
.group-tours-summary {
position: relative; overflow: hidden; isolation: isolate;
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
min-height: 150px; padding: 1.7rem 2.2rem; cursor: pointer; list-style: none;
background: var(--sage) url('/assets/img/tours/phi-phi.jpg') center/cover no-repeat;
box-shadow: 0 4px 30px rgba(0,0,0,0.12); transition: box-shadow 0.25s ease;
}
.group-tours-summary::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(120deg, rgba(64,80,67,0.92) 0%, rgba(64,80,67,0.68) 55%, rgba(64,80,67,0.4) 100%);
}
.group-tours-summary::-webkit-details-marker { display: none; }
.group-tours-summary::marker { content: ""; }
.group-tours-summary:hover,
.group-tours-collapsible[open] .group-tours-summary { box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.gt-summary-title { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--white); }
.gt-summary-sub { display: block; font-family: var(--font-label); font-size: 0.85rem; color: rgba(255,255,255,0.8); margin-top: 0.4rem; }
.gt-summary-toggle {
flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%;
background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.55); color: var(--white);
display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1;
transition: transform 0.25s ease, background 0.25s ease;
}
.group-tours-summary:hover .gt-summary-toggle { background: rgba(255,255,255,0.28); }
.group-tours-collapsible[open] .gt-summary-toggle { transform: rotate(45deg); background: var(--gold); border-color: var(--gold); }
.group-tours-collapsible .tours-hub-sub { margin-top: 1.8rem; }
.group-tours-collapsible .shop-grid { animation: gtFadeIn 0.3s ease; }
@keyframes gtFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
.group-tours-summary { min-height: 120px; padding: 1.3rem 1.5rem; }
.gt-summary-title { font-size: 1.2rem; }
}
/* ---- TRANSFER MAP (transfers hub) ----
Illustrated, not literal cartography: the SVG background is a stylised
impression of the coast (Phuket / Krabi & Khao Sok / Koh Lanta), just
accurate enough in relative position to be intuitive. Pins are plain
HTML buttons, absolutely positioned by percentage over the fixed-aspect
wrapper -- so a pin's data-x/data-y percentage lines up with the art
underneath, and the popover can anchor off that same percentage without
any SVG-to-screen coordinate math. */
.transfer-map-legend { max-width: 560px; margin: 0 auto 1.2rem; text-align: center; }
.transfer-map-clear {
display: inline-block; margin-top: 0.5rem; border: none; background: none; cursor: pointer;
font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--sage);
text-decoration: underline; padding: 0.2rem; opacity: 0; visibility: hidden; transition: opacity 0.2s ease;
}
.transfer-map-clear.visible { opacity: 1; visibility: visible; }
.transfer-map-wrap {
position: relative; width: 100%; max-width: 720px; margin: 0 auto 1rem;
aspect-ratio: 1 / 1;
}
/* The rounded-corner clip applies only to the map art itself -- pins and the
popover live outside this element so a popover anchored low on the map can
still extend past the map's own bottom edge without being cut off. */
.transfer-map-bg {
position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.08); background: #E7EFE9;
}
.transfer-map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Departure -> arrival route line: drawn by animating stroke-dashoffset from
the path's own length down to 0, so it visibly "travels" from one pin to
the other rather than just appearing. */
.transfer-route-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.map-route-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.7s cubic-bezier(0.4,0,0.2,1); }
.map-pin {
/* Anchored on the DOT alone -- translate(-100%) moves this box so its own
bottom-center (the dot's tip) sits exactly at the target x%/y%. The
label is positioned absolutely below (see .map-pin-label) so its size
never shifts this anchor -- previously the label was a flex sibling
that added its own height to the box, pushing the visible dot upward
from the actual clicked/target point by however tall the label was. */
position: absolute; transform: translate(-50%, -100%);
display: block; background: none; border: none; cursor: pointer; padding: 0; font: inherit;
}
.map-pin-dot {
display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
background: var(--sage); box-shadow: 0 3px 10px rgba(0,0,0,0.25);
border: 2px solid var(--white); transition: background 0.2s ease, transform 0.2s ease;
}
.map-pin-dot::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--white); left: 7px; top: 7px; }
.map-pin:hover .map-pin-dot, .map-pin:focus-visible .map-pin-dot { background: var(--gold); transform: rotate(-45deg) scale(1.12); }
.map-pin-label {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px;
font-family: var(--font-label); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.03em;
color: var(--dark); background: rgba(255,255,255,0.88); padding: 0.15rem 0.5rem; border-radius: 20px;
white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.map-pin-label-left { left: auto; right: 100%; top: 50%; transform: translateY(-50%); margin: 0; }
.map-pin-label-right { left: 100%; top: 50%; transform: translateY(-50%); margin: 0; }
.map-pin-label-right-low { left: calc(50% + 9px); top: calc(50% + 9px); transform: none; margin: 0; }
.map-pin-home .map-pin-dot { background: var(--gold); }
.map-pin-home .map-pin-label { background: var(--gold); color: var(--white); font-weight: 600; }
/* Selected departure/arrival: a visible ring plus a small role badge so it's
obvious at a glance which pin is which while picking the second point. */
.map-pin.map-pin-departure .map-pin-dot, .map-pin.map-pin-arrival .map-pin-dot {
background: var(--gold); transform: rotate(-45deg) scale(1.15);
box-shadow: 0 0 0 4px rgba(170,153,88,0.3), 0 3px 10px rgba(0,0,0,0.25);
}
.map-pin-role-badge {
position: absolute; top: -22px; left: 50%; transform: translateX(-50%) rotate(45deg);
font-family: var(--font-label); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--white); background: var(--sage); padding: 0.1rem 0.4rem; border-radius: 8px; white-space: nowrap;
}
.map-pin.map-pin-invalid .map-pin-dot { animation: mapPinShake 0.4s ease; background: #b3492f; }
@keyframes mapPinShake { 0%,100% { transform: rotate(-45deg) translateX(0); } 25% { transform: rotate(-45deg) translateX(-4px); } 75% { transform: rotate(-45deg) translateX(4px); } }
.map-popover {
position: absolute; z-index: 5; width: 250px; max-width: calc(100% - 24px);
background: var(--white); box-shadow: 0 14px 44px rgba(0,0,0,0.22); border-radius: 10px;
padding: 1.2rem; transform: translate(-50%, 0); opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.map-popover.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -6px); }
.map-popover-close {
position: absolute; top: 0.5rem; right: 0.6rem; border: none; background: none; cursor: pointer;
font-size: 1.1rem; line-height: 1; color: var(--mid); padding: 0.2rem;
}
.map-popover h4 { font-size: 1.05rem; margin-bottom: 0.6rem; padding-right: 1rem; }
.map-popover .shop-select, .map-popover .shop-input { font-size: 0.78rem; padding: 0.55rem 0.7rem; }
.map-popover .shop-field-label { font-size: 0.58rem; margin: 0.6rem 0 0.25rem; }
.map-popover .shop-price { font-size: 1.05rem; margin-top: 0.7rem; }
.map-popover .tour-cta-row { margin-top: 0.7rem; gap: 0.4rem; }
.map-popover .btn-sage { padding: 0.65rem 1rem; font-size: 0.68rem; }
.map-popover .field-error-msg { font-size: 0.65rem; }
.map-popover-viewlink { display: block; text-align: center; font-size: 0.68rem; color: var(--sage); text-decoration: underline; margin-top: 0.6rem; }
.transfer-map-hint { text-align: center; color: var(--mid); font-size: 0.8rem; font-style: italic; margin: 0 0 2.5rem; }
@media (max-width: 700px) {
.map-pin-dot { width: 22px; height: 22px; }
.map-pin-label:not([class*="map-pin-label-"]) { margin-top: 4px; }
.map-pin-label-right-low { left: calc(50% + 8px); top: calc(50% + 8px); }
.map-pin-label { font-size: 0.56rem; }
.map-popover { width: 220px; }
}