/*
 * The travel template on a real page. drawing.css is the drawing's own stylesheet (generated, never edited); this file adds what the
 * drawing's runtime did in script and what only a real page has:
 * - the grounds of drawing 03 (`TH` light and dark) as custom properties, following the visitor's system unless they chose a mode;
 *   the accent roles come from the layout (Support\Accent, the owner's main colour);
 * - the two-tone grounds of a card without a photo (`PH`), and a photo filling its frame;
 * - the parts the drawing switched by width in script (header menu and bottom bar at 860, the short paragraph under 700);
 * - the typed fields of the search box, the fixed bottom bar, the Recolor panel as a sheet under 700;
 * - the variables of the floating-widget package (its buttons are drawn by the package, never here).
 */
:root{
  --bg:#FBF8F3;--surf:#FFFFFF;--sunk:#F3EEE5;--ink:#17211F;--ink2:#3C4947;--mut:#5B6865;--line:#E7E0D4;--line2:#D8CFBF;
  --deep:#14211F;--foot:#0F1A18;--deepink:#F4F1EA;--deepmut:#B4C0BB;--hdrbg:rgba(251,248,243,0.9);--navbg:rgba(255,255,255,0.94);
  --ok:#17663F;--okbg:#E3F1E8;--warn:#8A4B0B;--warnbg:#F6EAD7;--neu:#4F5B58;--neubg:#E9E5DC;--star:#B7791F;--phink:#6E7B77;
  --ph-sand-a:#E3DBCB;--ph-sand-b:#CFC5B2;--ph-sage-a:#D5DDD3;--ph-sage-b:#BDC9BD;--ph-slate-a:#D3D9DD;--ph-slate-b:#B9C2C8;
  --ph-clay-a:#E6D5CA;--ph-clay-b:#D2BCAD;--ph-stone-a:#DDDAD4;--ph-stone-b:#C6C2BA;--ph-mist-a:#D9E1E0;--ph-mist-b:#C0CDCB;
  --fab-size:56px;--fab-edge-x:20px;--fab-edge-y:24px;
  --fab:var(--ink);--fab-icon:var(--bg);--fab-theme:var(--surf);--fab-theme-icon:var(--accink);--fab-theme-ring:var(--line2);--fab-theme-ring-hover:var(--accline);--fab-theme-icon-hover:var(--accink);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    --bg:#0D1412;--surf:#151E1C;--sunk:#111917;--ink:#F1EEE7;--ink2:#CBD3CF;--mut:#9AA8A3;--line:#25312E;--line2:#33433E;
    --deep:#18241F;--foot:#070C0B;--deepink:#F1EEE7;--deepmut:#A9B7B2;--hdrbg:rgba(13,20,18,0.88);--navbg:rgba(21,30,28,0.94);
    --ok:#7ED3A2;--okbg:#1B3A2B;--warn:#F0B866;--warnbg:#3A2D17;--neu:#B5C1BC;--neubg:#26302D;--star:#E2A93B;--phink:#7F8D88;
    --ph-sand-a:#2E2A24;--ph-sand-b:#3A352C;--ph-sage-a:#26302B;--ph-sage-b:#2F3C34;--ph-slate-a:#272D32;--ph-slate-b:#323A41;
    --ph-clay-a:#322A26;--ph-clay-b:#3F342E;--ph-stone-a:#2B2B29;--ph-stone-b:#363633;--ph-mist-a:#232E2D;--ph-mist-b:#2C3B39;
    color-scheme:dark;
  }
}
:root[data-theme=dark]{
  --bg:#0D1412;--surf:#151E1C;--sunk:#111917;--ink:#F1EEE7;--ink2:#CBD3CF;--mut:#9AA8A3;--line:#25312E;--line2:#33433E;
  --deep:#18241F;--foot:#070C0B;--deepink:#F1EEE7;--deepmut:#A9B7B2;--hdrbg:rgba(13,20,18,0.88);--navbg:rgba(21,30,28,0.94);
  --ok:#7ED3A2;--okbg:#1B3A2B;--warn:#F0B866;--warnbg:#3A2D17;--neu:#B5C1BC;--neubg:#26302D;--star:#E2A93B;--phink:#7F8D88;
  --ph-sand-a:#2E2A24;--ph-sand-b:#3A352C;--ph-sage-a:#26302B;--ph-sage-b:#2F3C34;--ph-slate-a:#272D32;--ph-slate-b:#323A41;
  --ph-clay-a:#322A26;--ph-clay-b:#3F342E;--ph-stone-a:#2B2B29;--ph-stone-b:#363633;--ph-mist-a:#232E2D;--ph-mist-b:#2C3B39;
  color-scheme:dark;
}
html,body{background:var(--bg)}
body{color:var(--ink)}
[hidden]{display:none !important}

/* the page frame: full width, the owner's body font, room for the bottom bar on a phone */
.ht{width:100%;min-height:100vh;font-family:var(--site-font,'Plus Jakarta Sans'),system-ui,sans-serif}
.disp{font-family:var(--site-display,var(--tuetran-font-display,'Fraunces')),Georgia,serif}
.ht a:focus-visible,.ht button:focus-visible,.ht input:focus-visible{outline:2px solid var(--accink);outline-offset:2px}

/* the short opening paragraph where the drawing switches it by width */
.v-narrow-lead{display:none}
@media (max-width: 699.98px){.v-wide-lead{display:none}.v-narrow-lead{display:inline}}

/* header: the menu and the actions leave for the bottom bar under 860 (drawing: `desk`) */
@media (max-width: 859.98px){
  .hdr .nav,.hdr .hdr-act{display:none}
  .ht{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  :root{--fab-edge-y:calc(85px + env(safe-area-inset-bottom))}
}
.lang-o{display:inline-flex;align-items:center;line-height:normal}
/* the drawing's options are buttons; as links they must not take the 32 px floor of the footer's legal links */
.foot-legal .lang-o{min-height:0}
.logo-img{display:flex;align-items:center}
.logo-img img{display:block;width:auto}
.logo-img .logo-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .logo-img .logo-light{display:none}:root:not([data-theme=light]) .logo-img .logo-dark{display:block}}
:root[data-theme=dark] .logo-img .logo-light{display:none}
:root[data-theme=dark] .logo-img .logo-dark{display:block}

/* photos: a placeholder ground until the owner adds one, then the photo fills the frame */
.ph-sand{background:linear-gradient(to bottom,var(--ph-sand-a) 0%,var(--ph-sand-a) 62%,var(--ph-sand-b) 62%,var(--ph-sand-b) 100%)}
.ph-sage{background:linear-gradient(to bottom,var(--ph-sage-a) 0%,var(--ph-sage-a) 62%,var(--ph-sage-b) 62%,var(--ph-sage-b) 100%)}
.ph-slate{background:linear-gradient(to bottom,var(--ph-slate-a) 0%,var(--ph-slate-a) 62%,var(--ph-slate-b) 62%,var(--ph-slate-b) 100%)}
.ph-clay{background:linear-gradient(to bottom,var(--ph-clay-a) 0%,var(--ph-clay-a) 62%,var(--ph-clay-b) 62%,var(--ph-clay-b) 100%)}
.ph-stone{background:linear-gradient(to bottom,var(--ph-stone-a) 0%,var(--ph-stone-a) 62%,var(--ph-stone-b) 62%,var(--ph-stone-b) 100%)}
.ph-mist{background:linear-gradient(to bottom,var(--ph-mist-a) 0%,var(--ph-mist-a) 62%,var(--ph-mist-b) 62%,var(--ph-mist-b) 100%)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The cover of the video is a picture laid over the frame (above, as every positioned box is): the play button must stand above the picture, or it cannot be pressed */
.ht .mv-f .mv-play{position:relative;z-index:1}
/* A category with no photo draws its description (and its sub-categories) right under the head: the drawing tightens the head there (state category-plain), the page has the class instead of a state */
.pghead.pghead-info{padding-bottom:12px}
/* In the drawing the hidden cover still stands between the head and the lines under it (`.cat-cover+.cat-info`), so the lines climb into the padding of the head and touch the title; with no cover the page has no such neighbour, so the rule is written for the class of the head */
.pghead.pghead-info+.cat-info{margin-top:calc(0px - var(--headmb) + 20px)}
/* A kind card of the home page (the card of a tour category, not the group card of the business home, which the drawing lets wrap) holds a name and one line. The description of a category is also the lead of its own page and may be a whole sentence, so the card cuts it at one line and the icon keeps its size */
.ht .kc[data-k="tour-kind"] .kc-ic{flex:none}
.ht .kc[data-k="tour-kind"] .kc-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
/* The sheet of the client list stacks its head under 700 with `.pghead.pghead`, a rule written for that one page; merged into the one sheet of the theme it reached every
   other head (the title and the count of a list fell on two lines, 42 px taller at 390). The other heads keep what their own sheets say: a row, and a column for the heads of visa and tickets. */
@media (max-width: 699.98px){
.ht.ht .pghead.pghead:not([data-k="clients-head"]):not(.vz-head):not(.ak-head){flex-direction:row;align-items:center;gap:16px}
.ht.ht .pghead.pghead.vz-head,.ht.ht .pghead.pghead.ak-head{flex-direction:column;align-items:stretch;gap:8px}
}

/* search box: the typed field reads like the drawing's value line */
.sfield-l{display:block}
label.sfield-l{cursor:text}
.sfield-in{display:block;width:100%;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;outline:none;-webkit-appearance:none;appearance:none;font:inherit;font-size:15px;line-height:20px;font-weight:600;color:var(--ink)}
.sfield-in::placeholder{color:var(--mut);font-weight:500;opacity:1}
.sfield-in::-webkit-search-cancel-button,.sfield-in::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.sfield:focus-within{background:var(--sunk)}
.sfield[role=button]{cursor:pointer}
/* A row with ONE field (the service tab): the first-child and last-child corners of the drawing each round only one side, so the hover and the ring cut square corners into the rounded box; round all four (from 1200 the box is one frame, below that every field is its own rounded box) */
@media (min-width:1200px){.sfield:only-child{border-radius:19px}}
/* A typed field sits in a box that shows the focus itself (the border of .fx-in and .bf-in, the ring of .sfield that follows its corners): the input draws no square frame of its own */
.ht .fx-inp:focus-visible,.ht .sfield-in:focus-visible{outline:none}
.sfield:has(.sfield-in:focus-visible),.sfield[role=button]:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accink)}
.sbtn{border:0;cursor:pointer}

/* footer: the phone and the email are links, laid out as the drawing's lines */
.foot-ct a{display:flex;align-items:center;gap:8px}

/* overlay layer: fixed to the screen (the drawing pins it inside its frame) */
.ov-layer{position:fixed;left:0;top:0;right:0;bottom:0;height:0;z-index:60;overflow:visible}
.ov-box{height:100vh}
.ov-box .tabbar{position:fixed;z-index:60}
@media (min-width: 860px){.tabbar{display:none}}
.ov-box .scrim{position:fixed;inset:0;width:auto;height:auto;z-index:61}
/* the drawing paints the Recolor panel after the bottom bar, so it lies over it */
.ov-box .pal{z-index:62}
@media (min-width: 700px){.scrim{background:transparent}.pal-grab{display:none}}
@media (max-width: 699.98px){
  .pal.pal-d{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;border-radius:28px 28px 0 0;padding:12px 16px calc(20px + env(safe-area-inset-bottom));gap:14px}
  .pal-grab{display:block}
}
.sw{border:0;cursor:pointer;flex:none}
.sw .ic{display:none}
.sw.on .ic,.pal-base.on .sw .ic{display:block}

/* the blog list: the categories and the search box on one row (two rows on a phone), three cards across as on the home page */
.btools{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 28px}
.btools .pills{display:flex;flex-wrap:wrap;gap:8px}
.bsearch{flex:0 1 320px;min-width:0}
.bsearch .fx-in{width:100%}
@media (max-width: 699.98px){.btools{flex-direction:column;align-items:stretch}.bsearch{flex:none}}
.ggl{margin-bottom:var(--secy,32px)}

/* a text page of the core: a readable column under the title, the reading rules of what the owner writes (headings, lists, links, images, tables) */
.pgtext{padding-bottom:var(--secy,48px)}
.pglead{margin:0 0 24px;max-width:70ch;font-size:calc(var(--body) + 2px);line-height:var(--bodylh);color:var(--ink2)}
.prose{max-width:70ch;font-size:var(--body);line-height:1.7;color:var(--ink2)}
.prose>*+*{margin-top:1em}
.prose h2,.prose h3,.prose h4{color:var(--ink);font-weight:700;line-height:1.3;margin-top:1.6em}
.prose h2{font-size:var(--h2);line-height:var(--h2lh)}
.prose h3{font-size:calc(var(--name) + 2px)}
.prose a{color:var(--accink);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.4em}
.prose img{max-width:100%;height:auto;border-radius:var(--r)}
.prose blockquote{margin-left:0;padding:12px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf)}
.prose table{width:100%;border-collapse:collapse;font-size:var(--sm)}
.prose th,.prose td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}

/* the reviews of the review package: the line a block says when a thing has none, the form that writes one, the photos of a review */
.rv-empty{margin:0;color:var(--ink2)}
.rw-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ht .rw-lay .tdm-main>form{display:contents}
.ht .rw-slot img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ht .rw-slot.ph{padding:0;overflow:hidden;cursor:pointer}
/* the drawing of the page loads no booking group, so its row of two buttons after a review is sent (`rw-sa`) is a plain block of buttons side by side, and below 700 it takes the width of the card; the merged drawing.css would make it the flex row of the booking pages */
.ht.ht .rw-sa{display:block;padding-bottom:0}
.ht .rv-p img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
a.th-f.rate{text-decoration:none}

/* the account frame of the member package (one drawing for every site): it reads this template's own colours, so the brand colour and the dark ground reach it.
   `--line` and `--ok` are names the package also declares on its wrapper, so they travel through the aliases set on the root. */
:root{--tl:var(--line);--tok:var(--ok);--tokbg:var(--okbg)}
.member-ui.member-frame{--navy:var(--ink);--text:var(--ink2);--muted:var(--mut);--line:var(--tl);--page:var(--bg);--card:var(--surf);--accent:var(--accink);--accent-bg:var(--acc);--accent-soft:var(--tint);--ok:var(--tok);--ok-soft:var(--tokbg)}
/* the package's red is drawn for a white card: on the dark ground it falls under 4.5 : 1, so it is lifted */
@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .member-ui.member-frame{--da:#F19A93;--da-soft:#3A1F1C}}
:root[data-theme=dark] .member-ui.member-frame{--da:#F19A93;--da-soft:#3A1F1C}

/* the cookie notice of the core: its own markup, given this template's grounds */
:root{--c-bg-card:var(--surf);--c-border:var(--line2);--c-text-secondary:var(--ink2);--radius-lg:20px;--shadow-lg:0 32px 64px -24px rgba(8,14,13,.5)}
#cookie-consent{color:var(--ink);font-family:var(--site-font,'Plus Jakarta Sans'),system-ui,sans-serif}
#cookie-consent .btn{height:40px;padding:0 16px;border-radius:999px;font-weight:700;cursor:pointer}
#cookie-consent .btn-primary{background:var(--acc);color:var(--on)}
#cookie-consent .btn-ghost{border:1px solid var(--line2);color:var(--ink);background:var(--surf)}
@media (max-width: 859.98px){#cookie-consent{bottom:calc(86px + env(safe-area-inset-bottom)) !important}}

/* tour list (drawing 05): the filter column is a form of real controls; below 860 the same box is the bottom sheet the drawing paints */
.cb{position:relative}
.cb-in{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cb:has(.cb-in:focus-visible) .cb-box,.pill:has(.cb-in:focus-visible){outline:2px solid var(--accink);outline-offset:2px}
.pill{position:relative;cursor:pointer}
.pg-b.gap{border-color:transparent;background:transparent}
.pg-b.dis{opacity:.4}
.achip-x,.seg-o,.pg-b{text-decoration:none}
.frow,.fbtn{display:none}
@media (min-width: 700px) and (max-width: 859.98px){.frow{display:flex}}
@media (max-width: 699.98px){.fbtn{display:flex}}
@media (min-width: 860px){.tf .fsheet-h,.tf .fsheet-f,.tf>form>.pal-grab{display:none}.tf .fsheet-b{padding:0}}
@media (max-width: 859.98px){
  .tf{display:none}
  .tf.open{display:flex;position:fixed;left:0;right:0;bottom:0;top:64px;z-index:70;padding:0;border-radius:28px 28px 0 0;border-bottom:0;box-shadow:0 -16px 40px -16px rgba(8,14,13,.5);max-width:640px;margin:0 auto}
  /* the hotel and vehicle pages of the drawing hide the in-page column with `.ht.ht .tl>.tf{display:none}` (their sheet is another element), which
     outranks `.tf.open`: the open box is the sheet here, so it says display again at the same weight */
  .ht.ht .tl>.tf.open{display:flex}
  .tf.open>form{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
  .tf.open .fsheet-b,.tf.open .fx-g,.tf.open .fx-gs{min-width:0}
  .tf.open .fx-list{min-width:0}
  .tf.open .cb-l{overflow-wrap:anywhere}
  .tf .tf-h{display:none}
  .tf>form>.pal-grab{display:block;margin:12px auto 0}
}
.scrim[data-filter-close]{position:fixed;inset:0;z-index:69;background:rgba(8,14,13,.45)}
.scrim[data-filter-close][hidden]{display:none}
@media (min-width: 860px){.scrim[data-filter-close]{display:none}}
/* the Rows layout of the toggle: a card is a row (the phone's card of the drawing, wider) */
@media (min-width: 700px){
  .tgl.rows{grid-template-columns:minmax(0,1fr);gap:16px}
  .tgl.rows>.tc{flex-direction:row;gap:20px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf)}
  .tgl.rows .tc-img{width:240px;flex:none;align-self:flex-start}
  .tgl.rows .tc-ph{aspect-ratio:4/3}
  .tgl.rows .tc-price{border-top:0;padding-top:0}
}

/* tour page (drawing 05): the price bar of a phone lies over the screen above the bottom bar; the card stands from 700 */
:root{--tabh:calc(69px + env(safe-area-inset-bottom))}
.ov-box .sb{position:fixed;bottom:var(--tabh);z-index:59}
@media (min-width: 700px){.ov-box .sb{display:none}}
/* the price card of a tour leaves for the price bar on a phone; the summary of a booking, the transfer box of an order and the card of the thing reviewed
   (the pages of the reviews) stay with their page */
/* the two layouts of the reviews are left out inside `:where` so they add nothing to the weight of the rule: the pages that bring their aside back under 700
   (`.vx`, `.tx`, `.vzt`, `.ak` below) outrank it by one class, as they always did */
@media (max-width: 699.98px){.tdm:not(.bk):not(.dn):where(:not(.rv-lay):not(.rw-lay))>.tdm-side{display:none}}
.dt-r{cursor:pointer}
.dt-r.dis{cursor:default}
[hidden].dy-b,[hidden].fa{display:none}

/* the live trays of travel-pickers.js: under the field from 700, a sheet from the bottom edge below */
.tray.live{position:absolute;z-index:80;margin:0}
.tray-scrim{position:fixed;inset:0;z-index:79;background:rgba(8,14,13,.45)}
@media (min-width: 700px){.tray-scrim{display:none}}
@media (max-width: 699.98px){
  .tray.live{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:calc(100% - 64px);overflow-y:auto;margin:0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}
.tray.live .cal-c[aria-disabled=true]{cursor:default}
/* The sheets of the pickers hang from <body>, outside the page frame, so the frame's font and tier sizes do not reach them: the same
   values as the `.ht` rules of drawing.css here (TravelPickerFontTest keeps the two equal). */
.tray.live{--px:40px;--secy:72px;--headmb:32px;--h1:38px;--h1lh:46px;--h2:24px;--h2lh:30px;--body:16px;--bodylh:26px;--name:17px;--namelh:24px;--price:20px;--sm:13px;--smlh:19px;--xs:12px;--gap:24px;--r:20px;--hdrh:72px;--herotop:48px;--fieldh:68px;font-family:var(--site-font,'Plus Jakarta Sans'),system-ui,sans-serif;font-size:var(--body);line-height:var(--bodylh)}
@media (min-width: 860px) and (max-width: 1199.98px){.tray.live{--px:32px;--secy:64px;--h1:34px;--h1lh:42px;--price:20px}}
@media (min-width: 700px) and (max-width: 859.98px){.tray.live{--px:24px;--secy:56px;--headmb:24px;--h1:30px;--h1lh:38px;--h2:22px;--h2lh:28px;--herotop:32px}}
@media (max-width: 699.98px){.tray.live{--px:16px;--secy:40px;--headmb:20px;--h1:22px;--h1lh:30px;--h2:19px;--h2lh:25px;--body:14px;--bodylh:22px;--name:16px;--namelh:22px;--price:18px;--sm:12px;--smlh:18px;--xs:12px;--gap:16px;--r:16px;--hdrh:56px;--herotop:20px}}
/* Under 700 the drawing makes the tray a sheet from the bottom edge: handle, header with the close button, wide buttons. Its rules are scoped
   `.ht.ht .tray...`, so they do not reach a tray that hangs from <body>; the same here (margins stay 0, the sheet is fixed edge to edge). The
   sheet and its scrim lie over the floating button of the package (z-index 9999), which sat on the + of the guest counter and on the 29th. */
@media (max-width: 699.98px){
  .tray.live{border-radius:28px 28px 0 0;border-left:0;border-right:0;padding-top:12px;padding-left:16px;padding-right:16px;box-shadow:0 -12px 32px -16px rgba(8,14,13,.4)}
  .tray.live .tray-grab{display:block}
  .tray.live .tray-sh{display:flex}
  .tray.live .tray-f .btn{height:52px;flex:1}
  .tray.live .tray-f{flex-wrap:wrap}
  .tray.live .pk-r{min-height:48px}
  .tray.live .tm-win{height:176px}
  .tray-scrim{z-index:10000}
  .tray.live{z-index:10001}
}
/* The script wraps the body of a tray, and the calendar its month, days and legend, in boxes the drawing does not have: they step aside so the
   blocks are children of the tray as drawn and its gap (12) runs between them. */
.tray.live [data-pick-body],.tray.live .cal-wrap{display:contents}
.tray.live .cal-sum:empty{display:none}
button.pcf,button.fx-date{font:inherit;color:inherit;cursor:pointer;width:100%}
.fx-more{font:inherit;font-weight:700;background:transparent;border:0;cursor:pointer;line-height:26px}

/* the Grid/Rows toggle stands from 860 (drawing 05), below it the list is a grid of two or a column of rows */
@media (max-width: 859.98px){.seg-i{display:none}}

/* the words of a day come from a rich text field: paragraphs inside the one text box of the drawing, no browser margins */
.dy-p p{margin:0}
.dy-p p+p,.dy-p ul,.dy-p ol{margin-top:8px}

/* booking page, page of a received booking and the request dialog (drawing 07) */
/* the booking buttons are links in the drawing (the line height of the page); the buttons of the dialog are buttons there (the browser's own) */
button.pc-btn,button.sb-btn,button.ak-bar-btn{line-height:inherit}
.bf-v.ph0{color:var(--mut,#5B6865);font-weight:500}
[data-booking-summary]{display:contents}
.sb[hidden]{display:none}
.tdm-side>.bv-cp{margin-bottom:16px}
.cp-ok.bad{color:var(--warn,#8A4B0B)}
.cp-ok[hidden]{display:none}
/* with the price bar over the screen the page ends higher and the round buttons stand above the bar (drawing: 142 and 149) */
@media (max-width: 699.98px){
  .ht:has(.ov-box .sb:not([hidden])){padding-bottom:calc(142px + env(safe-area-inset-bottom))}
  :root:has(.ov-box .sb:not([hidden])){--fab-edge-y:calc(149px + env(safe-area-inset-bottom))}
}
/* the dialog: a box in the middle from 700, a sheet from the bottom edge below; the form and the sent view are the box's own rows */
.iq-form,.iq-done{display:contents}
.iq-form[hidden],.iq-done[hidden]{display:none}
.iq-modal{position:fixed;inset:0;z-index:63;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,33,31,.55);overflow-y:auto}
.iq-modal[hidden]{display:none}
.iq-modal .iq-dlg{max-height:calc(100dvh - 48px);outline:0}
.iq-modal .iq-dlg .iq-bd{flex:1 1 auto;min-height:0;overflow-y:auto}
@media (max-width: 699.98px){
  .iq-modal{padding:0;align-items:flex-end}
  .ht.ht .iq-modal .iq-dlg:not(.sent){height:min(776px,92dvh);max-height:none}
  .ht.ht .iq-modal .iq-dlg.sent{max-height:92dvh}
}
/* a real order code is sixteen letters and digits, longer than the drawn one: the copy button drops under it rather than push the page sideways */
.dn-cr{flex-wrap:wrap}
.dn-code{min-width:0;overflow-wrap:anywhere}
/* the drawing keeps the code and its Copy button on ONE row on a phone; the real code is longer than the drawn one, so travel-code-fit.js shrinks the type to the room
   the button leaves (this size is what shows before it runs, or without it) */
@media (max-width: 699.98px){.ht.ht .dn-code{font-size:clamp(20px,6.2vw,28px)}}

/* the heart of a tour page (drawing 05 `tour-save`): saved is the heart filled in the accent colour */
.th-act form{margin:0;display:flex}
.th-act button.icb{cursor:pointer}
.icb.on{color:var(--accink,#0B7A75);border-color:var(--accline,#AAD0CF);background:var(--tint,#E3F1F0)}
.icb.on .ic{fill:currentColor}
/* seven pager buttons are 344 wide: on the narrowest phones they wrap instead of pushing the page sideways */
@media (max-width: 379.98px){.pager{flex-wrap:wrap}}

/* the hotel pages (drawing 08): the button that asks for the prices is a real button here, the drawing's is a link, and a button does not take the line height of its page (the compact line of a phone is a button in the drawing too, so it keeps the height of a button) */
.stb-go{line-height:inherit}
.stb-v.ph0,.bf-v.ph0{color:var(--mut,#5B6865)}

/* a gallery with fewer than four small photos fills its grid, so no cell stays empty (drawing 05 and 08 paint one large and four small) */
@media (min-width: 700px){
  .gal.gn0{grid-template-columns:1fr}
  .gal.gn1,.gal.gn2{grid-template-columns:2fr 1fr}
  .gal.gn1 .g-t{grid-row:1/3}
  .gal.gn3 .g-main + .g-t{grid-column:2/4}
}
@media (max-width: 699.98px){
  .ht.ht .gal.gn1{grid-template-columns:minmax(0,1fr)}
  .ht.ht .gal.gn1 .g-t{aspect-ratio:16/9}
  .ht.ht .gal.gn2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ht.ht .gal.gn3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* vehicle page, transfers page and the hours of a tray (drawing 11) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden].rb-night,[hidden].rb-note,[hidden].rt-sel,[hidden].bf,[hidden].bf-e,[hidden].pc-note{display:none}
.rb-k:focus-within{outline:2px solid var(--accink,#0B7470);outline-offset:2px}
.rb-k.dis{cursor:default}
.rb-k.dis .rb-kl{color:var(--mut,#5B6865)}
.rb-ok{display:none}
.rb-k.on .rb-ok{display:inline-block}
.rt-row:focus-visible{outline:2px solid var(--accink,#0B7470);outline-offset:-2px}
.bf-in.pick:focus-visible{outline:2px solid var(--accink,#0B7470);outline-offset:2px}
.bf-in.pick{cursor:pointer}
/* the long text of the vehicle (a rich text field): its paragraphs read like the drawn ones */
.vb-rich{display:flex;flex-direction:column;gap:12px;font-size:var(--body);line-height:var(--bodylh);color:var(--ink2,#3C4947)}
.vb-rich p{margin:0}
.vb-rich ul,.vb-rich ol{margin:0;padding-left:20px}
/* the box that books: a form that scrolls inside the card, the button and the hotline outside the scroll */
/* the form of the box has no box of its own: the scroll area, the button and the hotline are the children of the card, as drawn (the card shrinks the scroll area first) */
.rbx>form{display:contents}
@media (min-width: 700px){.rbx .tray-f,.rbx .tray-grab,.rbx .tray-sh{display:none}}
/* below 700 the aside of a vehicle is the sheet the bar at the foot opens; the transfer box stays under the table */
@media (max-width: 699.98px){
  .vx .tdm:not(.bk):not(.dn)>.tdm-side.rent-open{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:75;flex-direction:column;max-height:calc(100% - 64px)}
  .vx .rb-sheet-host{margin:0;gap:12px;border-radius:28px 28px 0 0;border-left:0;border-right:0;padding:12px 16px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -12px 32px -16px rgba(8,14,13,.4);min-height:0;flex:1 1 auto}
  .vx .rb-sheet-host .pc-top,.vx .rb-sheet-host .pc-btn,.vx .rb-sheet-host .pc-hot{display:none}
  .ht.ht .vx .rb-sheet-host>form .rb-in{flex:1;min-height:0;overflow-y:auto}
  .rent-scrim{z-index:74}
  .tx .tdm:not(.bk):not(.dn)>.tdm-side{display:block}
}
/* the hours of a tray: columns of 44 px cells that scroll, a window of four */
.tm-win{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.tm-win::-webkit-scrollbar{display:none}
.tm-in{transform:none}
.tm-c:focus-visible{outline:2px solid var(--accink,#0B7470);outline-offset:-2px}
.tm-c[aria-disabled=true]:hover{background:transparent}
.tm-secs{display:flex;flex-direction:column;gap:12px}
.tm-secs.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.tm-secs.two .tm-cols{gap:8px}
.tm-sum:empty{display:none}
/* the visa service (drawing 13) on a real page: the bar at the foot carries the refund rule, so the button of the sheet is lifted higher */
@media (max-width: 699.98px){
  .vzt .tdm:not(.bk):not(.dn)>.tdm-side{display:block}
  :root:has(.ov-box .sb.vz-bar:not([hidden])){--fab-edge-y:calc(200px + env(safe-area-inset-bottom))}
  .ht:has(.ov-box .sb.vz-bar:not([hidden])){padding-bottom:calc(193px + env(safe-area-inset-bottom))}
}
a.vz-file{color:inherit;text-decoration:none}
a.vz-file:hover{border-color:var(--accline,#9CCFCB)}
#paper-more{scroll-margin-top:96px}
.vz-rush input.sr-only:focus-visible+.cb-box{outline:2px solid var(--accink,#0B7470);outline-offset:2px}
.vz-lkp{display:flex;justify-content:center;padding-top:24px;padding-bottom:64px}
.vz-form .rb-in[hidden],.vz-files[hidden],.vz-inv-b[hidden]{display:none}
/* the tickets (drawing 15): the bar of the box that sells tickets rises like the one of the visa form; the bar of the request for a flight, a train or a
   coach also shows between 700 and 859, where the tab bar is, and lifts the page and the round buttons as the other bars do */
@media (max-width: 699.98px){
  :root:has(.ov-box .sb.ak-bar:not([hidden])){--fab-edge-y:calc(200px + env(safe-area-inset-bottom))}
  .ht:has(.ov-box .sb.ak-bar:not([hidden])){padding-bottom:calc(193px + env(safe-area-inset-bottom))}
  .ak .tdm:not(.bk):not(.dn)>.tdm-side{display:block}
}
@media (min-width: 700px) and (max-width: 859.98px){
  .ov-box .sb.tq-bar{display:flex}
  .ht:has(.ov-box .sb.tq-bar:not([hidden])){padding-bottom:calc(142px + env(safe-area-inset-bottom))}
  :root:has(.ov-box .sb.tq-bar:not([hidden])){--fab-edge-y:calc(149px + env(safe-area-inset-bottom))}
}
.ak-qr svg.ak-qr-svg,.ak-qr>svg:not(.ic){width:100%;height:100%;display:block}
.ak-code-id{overflow-wrap:anywhere}
.tq-mode input.sr-only:focus-visible~*,.tq-cab input.sr-only:focus-visible~*{outline:2px solid var(--accink,#0B7470);outline-offset:2px}
.tq-rt input.sr-only:focus-visible~.tq-sw{outline:2px solid var(--accink,#0B7470);outline-offset:2px}
.ak-k[hidden],.ak-k [hidden],.tq-dates [hidden],[data-trip-cabin-group][hidden],[data-trip-tick][hidden],[data-trip-round-tick][hidden]{display:none}
/* the form of a request for a flight, a train or a coach is the drawing's card: its sections are the card's own rows (the gap between them is the card's) */
.tq-form>form{display:contents}
/* the card that moves the date of an order: its form is the card's own rows, and its button takes the line height of the page like the drawing's link */
.ak-dm>form{display:contents}
.ak-code button.btn,.ak-dm button.btn,.qc-side button.btn{line-height:inherit}
/* drawing 17: the reading pages. A page without a table of contents keeps the reading column at the width of the drawing's column (the drawing draws that state
   as a board, so the grid has no rule for it); a heading that a link of the contents jumps to stays clear of the sticky header */
.pg-grid.solo{grid-template-columns:720px}
@media (min-width: 860px) and (max-width: 1199.98px){.ht.ht .pg-grid.solo{grid-template-columns:680px}}
.rd-h2,.rd-h3{scroll-margin-top:calc(var(--hdrh,72px) + 16px)}
/* the contact form is one `form` inside the drawing's card: its parts are the card's own rows; the real buttons take the line height of the page like the drawing's links */
.cu-form>form{display:contents}
.cu-form button.btn,.nf-search button.btn{line-height:inherit}
.nf-search .fx-inp{flex:1 1 auto;min-width:0}
/* drawing 19: the service pages and the destination page. The steps are a list the drawing draws bare; a card with a photo that would land in the last column
   of a row moves up so the row has no hole; the search box of the list is a form where the drawing has a label, and the chips are links where the drawing has buttons
   (a button keeps the line height `normal` of the browser, a link takes the one of the page: the chip is the drawing's, so it keeps `normal`) */
.sv-steps{list-style:none;margin:0;padding:0}
.sv-grid{grid-auto-flow:dense}
.sv-cats a.pill{text-decoration:none;line-height:normal}
.sv-q input.fx-inp{flex:1 1 auto;min-width:0}

/* ---- the account frame of the member package in the look of drawing 21 ----
   The package draws the frame for its own brand (square corners, its own font, a 40 px band, a 28 px card, a 42 px title); the drawing of this template
   draws it as a rounded card on the theme's font, and the content of the six account pages is placed against the numbers of that drawing, so the frame
   follows them: the same columns (menu 260, 220 from 1199 down, none under 700 where one back link stands), the same band (--headmb above, --secy below),
   the same card (24 padding and 20 gap, 20 and 16 under 700) and the same title (the display font, --h2). `.ht` in front of each rule keeps them
   ahead of the package's own sheet, which is printed later in the page. */
.ht .member-ui.member-frame{--acm:260px;font-family:inherit;padding:var(--headmb) var(--px) var(--secy)}
.ht .member-ui.member-frame.is-account .account-shell{max-width:1172px;gap:12px}
.ht .member-ui.member-frame.is-account .account-grid{grid-template-columns:var(--acm) minmax(0,1fr);gap:32px;padding:0}
.ht .member-ui.member-frame .account-side{border-radius:var(--r)}
.ht .member-ui.member-frame.is-account .account-grid .auth-card{max-width:none;padding:24px;gap:20px;border-radius:var(--r)}
.ht .member-ui.member-frame.is-account .account-grid .auth-card h1{font-family:var(--site-display,var(--tuetran-font-display,'Fraunces')),Georgia,serif;font-size:var(--h2);line-height:var(--h2lh);font-weight:700;letter-spacing:-.01em}
@media (max-width: 1199.98px){.ht .member-ui.member-frame{--acm:220px}}
@media (min-width: 700px) and (max-width: 760px){
  .ht .member-ui.member-frame.is-account:not(.is-dashboard) .account-col{display:block}
  .ht .member-ui.member-frame.is-account:not(.is-dashboard) .back-to-account{display:none}
  .ht .member-ui.member-frame.is-account .account-grid{grid-template-columns:var(--acm) minmax(0,1fr)}
}
@media (max-width: 699.98px){
  .ht .member-ui.member-frame{padding:var(--headmb) 20px var(--secy)}
  .ht .member-ui.member-frame.is-account .account-grid{grid-template-columns:minmax(0,1fr)}
  .ht .member-ui.member-frame.is-account .account-grid .auth-card{padding:20px;gap:16px}
  .ht .member-ui.member-frame.is-account .back-to-account{min-height:44px;gap:8px;font-size:15px;font-weight:700;line-height:22px;color:var(--accink)}
}

/* ---- the account pages of sheet 20 (drawing 21): the form of the heart is a wrapper that takes no room, like the other forms of the theme ---- */
/* the empty block inside the card of the account: the padding the drawing gives it there */
.ht .member-ui .auth-card .emp{padding:40px 20px}
@media (max-width: 699.98px){.ht .member-ui .auth-card .emp{padding:32px 16px}}
/* the package draws its own square 48 px button for `.btn` inside the account; the empty block keeps the button of the drawing */
.ht .member-ui .emp-act .btn{gap:8px;min-height:0;padding:0 20px;border:0;border-radius:999px;font-size:15px;font-weight:700;line-height:inherit;white-space:nowrap}
/* the package stacks every form of its card in a flex column with a gap (`.member-ui .auth-card form`): the wrapper of the heart must not */
.ht .member-ui .auth-card .ac-rmf,.ac-rmf{display:contents}

/* A home page with only a few modules on (anything the owner switches off takes its block, so the neighbours of the drawing change):
   two sunk blocks side by side were one slab, so the second falls back to the page ground; a box with ONE tab has nothing to switch, so no strip.
   (The drawing of the page led by services, sheet 52, puts the dark block straight under the search box with no breath above it: the rule that
   gave it one is gone.) */
.ht .sec-sunk + .sec-sunk{background:transparent}
.ht .dock.solo .tabs{display:none}
/* two plain blocks side by side (the destinations and the tours, the hotels and the cars, and any pair a main service or a switched off
   module brings together) share ONE gap, the bottom of the first, not two */
.ht .sec + .sec{padding-top:0}

/* The footer: the grid of the drawing has four fixed tracks (the company 4fr, three link columns 2fr each), so a site with fewer link
   columns (a module that is off takes its column) was left with an empty track at the right. The tracks now follow the columns that are
   there: the company 4fr and each link column 2fr, the very widths of the drawing when all three link columns are present */
@media (min-width: 860px){.ht .fg{grid-template-columns:minmax(0,4fr);grid-auto-flow:column;grid-auto-columns:minmax(0,2fr)}}
/* While a dialog or a sheet covers the page, the floating button of the package (z-index 9999, above every layer of the theme) steps aside: it sat on
   the + of the guest counter in the inquiry dialog and would sit on the foot of the filter and rent sheets. The picker trays hang from <body> and lie over it by z-index. */
:root:has(.iq-modal:not([hidden]),.tf.open,.rent-open) .floating-widget-group{display:none}
/* The time part of a tray (vehicle and transfer pickers) wraps its sections in `.tm-cal`, a class of the old one-file drawing that the pages of the drawing no longer carry:
   a column with the gap between the sections of the time part. */
.tray.live .tm-cal{display:flex;flex-direction:column;gap:12px}

/* The labels of the floating buttons (Zalo, Facebook, the phone number) are drawn by the package outside the page frame and came out in the body font of the
   core; the button group wears the font of the site. */
.floating-widget-group{font-family:var(--site-font,'Plus Jakarta Sans'),system-ui,sans-serif}

/* A partner with a logo (sheet 50): the logo alone in the box, the name is its alternative text; a partner with no logo is the icon and the name of the drawing */
.ht .pn-logo img{display:block;max-width:100%;max-height:48px;width:auto;height:auto;object-fit:contain}