/*
* GoTaxi public site — design system.
*
* One sheet, loaded last on every public page, that everything the visitor
* sees is styled against. It is written in layers so the cascade is
* predictable: tokens, then base typography, then primitives (buttons,
* fields, cards…), then the site chrome (header, footer), then page sections,
* then the booking wizard, then inner pages, then the Reka islands.
*
* Two values come from the install rather than from here: the brand colour
* (--site-color, declared by layout/theme-vars) and the chosen font
* (--gt-font-setting, same place). Everything else derives from them.
*
* Nothing in here knows about the booking form's JavaScript. The wizard moves
* fields between steps by id, so ids and names are never used as styling
* hooks — only classes and data-attributes that the script does not read.
*/
/* ------------------------------------------------------------------ */
/* 1. Tokens */
/* ------------------------------------------------------------------ */
:root {
/* Brand */
--gt-accent: var(--site-color, #ffcd71);
--gt-accent-ink: #1a1300; /* text on the accent — the brand is light */
--gt-accent-deep: #97690f; /* the accent when it has to be read on white; 4.8:1 */
--gt-accent-soft: #fff4d6;
--gt-accent-line: #f3d999;
/* Ink and neutrals — a cool grey with a touch of the brand's warmth */
--gt-ink: #0d1117;
--gt-text: #171c24;
--gt-text-2: #3a4351;
--gt-muted: #5f6977;
--gt-faint: #8a94a3;
--gt-line: #e4e7ec;
--gt-line-2: #d3d9e1;
--gt-bg: #ffffff;
--gt-bg-2: #f6f7f9;
--gt-bg-3: #eef1f4;
/* Dark surfaces (hero, footer) */
--gt-dark: #0b0d10;
--gt-dark-2: #14181f;
--gt-dark-3: #1d232c;
--gt-dark-line: rgba(255, 255, 255, .1);
--gt-on-dark: #f4f6f8;
--gt-on-dark-2: #c3cad3;
--gt-on-dark-muted: #8f99a6;
/* Semantic */
--gt-success: #147b3b; /* 4.79:1 on its own soft ground; #15803d read 4.49 */
--gt-success-soft: #e7f6ec;
--gt-warning: #b45309;
--gt-warning-soft: #fdf1e1;
--gt-danger: #b91c1c;
--gt-danger-soft: #fdecec;
--gt-info: #1d4ed8;
--gt-info-soft: #e8efff;
/* Type */
--gt-font: var(--gt-font-setting, "Roboto"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--gt-fs-xs: .75rem;
--gt-fs-sm: .8125rem;
--gt-fs-md: .9375rem;
--gt-fs-base: 1rem;
--gt-fs-lg: 1.125rem;
--gt-fs-xl: 1.25rem;
--gt-fs-2xl: 1.5rem;
--gt-fs-3xl: 1.875rem;
--gt-fs-4xl: clamp(2rem, 1.5rem + 2vw, 2.75rem);
--gt-fs-5xl: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
--gt-lh-tight: 1.1;
--gt-lh-snug: 1.25;
--gt-lh-body: 1.55;
/* Space (4-based) */
--gt-s1: 4px; --gt-s2: 8px; --gt-s3: 12px; --gt-s4: 16px; --gt-s5: 20px;
--gt-s6: 24px; --gt-s8: 32px; --gt-s10: 40px; --gt-s12: 48px; --gt-s16: 64px;
--gt-s20: 80px; --gt-s24: 96px;
/* Radius */
--gt-r-xs: 6px;
--gt-r-sm: 8px;
--gt-r-md: 12px;
--gt-r-lg: 16px;
--gt-r-xl: 24px;
--gt-r-pill: 999px;
/* Elevation — hairlines first, shadow only where something floats */
--gt-sh-1: 0 1px 2px rgba(16, 24, 40, .06);
--gt-sh-2: 0 6px 20px -6px rgba(16, 24, 40, .14);
--gt-sh-3: 0 24px 56px -20px rgba(16, 24, 40, .28);
--gt-focus: 0 0 0 3px rgba(255, 205, 113, .55);
/* Layout */
--gt-container: 1200px;
--gt-container-narrow: 860px;
--gt-gutter: clamp(16px, 4vw, 32px);
--gt-header-h: 72px;
/* Motion */
--gt-ease: cubic-bezier(.2, .7, .2, 1);
--gt-t-fast: 120ms;
--gt-t: 200ms;
--gt-t-slow: 320ms;
}
/* The brand-derived values (ink, tint, line, deep, focus) are computed in PHP
by layout/theme-vars, which knows the install's colour and can pick the text
colour that reads on it. Nothing here may re-derive them. */
/* ------------------------------------------------------------------ */
/* 2. Base */
/* ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.gt-site {
margin: 0;
background: var(--gt-bg);
color: var(--gt-text);
font-family: var(--gt-font);
font-size: var(--gt-fs-base);
line-height: var(--gt-lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
.gt-site *, .gt-site *::before, .gt-site *::after { box-sizing: border-box; }
/* :where() so this carries no specificity of its own. As `.gt-site img` it
out-specified every single-class rule that gives an image a height - the
logo among them - and `height: auto` won, so the logo rendered at its
natural size and filled the screen. A base rule must never outrank the
rules built on top of it. */
.gt-site :where(img, svg, video) { max-width: 100%; height: auto; display: block; }
.gt-site :where(h1, h2, h3, h4, h5, h6) {
margin: 0;
color: var(--gt-ink);
font-weight: 700;
line-height: var(--gt-lh-snug);
letter-spacing: -.01em;
text-wrap: balance;
}
.gt-site :where(p) { margin: 0 0 var(--gt-s4); }
.gt-site :where(p:last-child) { margin-bottom: 0; }
.gt-site :where(a) { color: var(--gt-accent-deep); text-decoration: none; transition: color var(--gt-t-fast) var(--gt-ease); }
.gt-site :where(a:hover) { color: var(--gt-ink); }
.gt-site :where(ul, ol) { margin: 0; padding: 0; }
.gt-site :where(button) { font: inherit; color: inherit; }
.gt-site :where(input, select, textarea) { font: inherit; }
.gt-site :where(hr) { border: 0; border-top: 1px solid var(--gt-line); margin: var(--gt-s6) 0; }
.gt-site :focus-visible { outline: none; box-shadow: var(--gt-focus); border-radius: var(--gt-r-xs); }
/* Type scale */
.gt-h1 { font-size: var(--gt-fs-5xl); line-height: var(--gt-lh-tight); letter-spacing: -.025em; font-weight: 800; }
.gt-h2 { font-size: var(--gt-fs-4xl); letter-spacing: -.02em; font-weight: 800; }
.gt-h3 { font-size: var(--gt-fs-2xl); }
.gt-h4 { font-size: var(--gt-fs-xl); }
.gt-h5 { font-size: var(--gt-fs-lg); }
.gt-lead { font-size: var(--gt-fs-lg); color: var(--gt-text-2); max-width: 62ch; }
.gt-muted { color: var(--gt-muted); }
.gt-small { font-size: var(--gt-fs-sm); }
.gt-eyebrow {
display: inline-flex; align-items: center; gap: var(--gt-s2);
font-size: var(--gt-fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--gt-accent-deep);
}
.gt-eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--gt-accent); border-radius: 2px; }
.gt-on-dark .gt-eyebrow { color: var(--gt-accent-on-dark, var(--gt-accent)); }
.gt-on-dark, .gt-on-dark :where(h1, h2, h3, h4, h5, h6) { color: var(--gt-on-dark); }
.gt-on-dark .gt-lead, .gt-on-dark .gt-muted { color: var(--gt-on-dark-2); }
.gt-sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Layout */
.gt-container { width: 100%; max-width: var(--gt-container); margin-inline: auto; padding-inline: var(--gt-gutter); }
.gt-container--narrow { max-width: var(--gt-container-narrow); }
.gt-section { padding-block: clamp(56px, 8vw, 104px); }
.gt-section--tight { padding-block: clamp(40px, 5vw, 64px); }
.gt-section--alt { background: var(--gt-bg-2); }
.gt-section--dark { background: var(--gt-dark); }
.gt-section-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 48px); display: grid; gap: var(--gt-s3); }
.gt-section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.gt-grid { display: grid; gap: var(--gt-s6); }
.gt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991px) { .gt-grid--3, .gt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .gt-grid--2, .gt-grid--3, .gt-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.gt-stack { display: grid; gap: var(--gt-s4); }
.gt-cluster { display: flex; flex-wrap: wrap; gap: var(--gt-s3); align-items: center; }
.gt-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
/* ------------------------------------------------------------------ */
/* 3. Primitives */
/* ------------------------------------------------------------------ */
/* Buttons */
.gt-btn {
--_bg: var(--gt-ink); --_fg: #fff; --_bd: var(--gt-ink);
display: inline-flex; align-items: center; justify-content: center; gap: var(--gt-s2);
min-height: 46px; padding: 0 var(--gt-s5);
border: 1px solid var(--_bd); border-radius: var(--gt-r-md);
background: var(--_bg); color: var(--_fg) !important;
font-weight: 600; font-size: var(--gt-fs-md); line-height: 1; letter-spacing: .01em;
white-space: nowrap; cursor: pointer; text-decoration: none !important;
transition: background var(--gt-t-fast) var(--gt-ease), border-color var(--gt-t-fast) var(--gt-ease), color var(--gt-t-fast) var(--gt-ease), transform var(--gt-t-fast) var(--gt-ease), box-shadow var(--gt-t-fast) var(--gt-ease);
}
.gt-btn:hover { --_bg: var(--gt-dark-3); --_bd: var(--gt-dark-3); }
.gt-btn:active { transform: translateY(1px); }
.gt-btn:disabled, .gt-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.gt-btn i { font-size: .95em; }
.gt-btn--primary { --_bg: var(--gt-accent); --_fg: var(--gt-accent-ink); --_bd: var(--gt-accent); }
.gt-btn--primary:hover { --_bg: var(--gt-accent-line); --_bd: var(--gt-accent-line); box-shadow: var(--gt-sh-2); }
.gt-btn--outline { --_bg: transparent; --_fg: var(--gt-ink); --_bd: var(--gt-line-2); }
.gt-btn--outline:hover { --_bg: var(--gt-bg-2); --_bd: var(--gt-line-2); }
.gt-btn--ghost { --_bg: transparent; --_fg: var(--gt-text); --_bd: transparent; }
.gt-btn--ghost:hover { --_bg: var(--gt-bg-3); --_bd: transparent; }
.gt-btn--soft { --_bg: var(--gt-accent-soft); --_fg: var(--gt-accent-ink); --_bd: var(--gt-accent-soft); }
.gt-btn--soft:hover { --_bg: var(--gt-accent-line); --_bd: var(--gt-accent-line); }
.gt-on-dark .gt-btn--outline { --_fg: var(--gt-on-dark); --_bd: rgba(255, 255, 255, .28); }
.gt-on-dark .gt-btn--outline:hover { --_bg: rgba(255, 255, 255, .08); }
.gt-on-dark .gt-btn--ghost { --_fg: var(--gt-on-dark); }
.gt-on-dark .gt-btn--ghost:hover { --_bg: rgba(255, 255, 255, .08); }
.gt-btn--sm { min-height: 38px; padding-inline: var(--gt-s4); font-size: var(--gt-fs-sm); border-radius: var(--gt-r-sm); }
.gt-btn--lg { min-height: 54px; padding-inline: var(--gt-s8); font-size: var(--gt-fs-base); border-radius: var(--gt-r-lg); }
.gt-btn--pill { border-radius: var(--gt-r-pill); }
.gt-btn--block { width: 100%; }
.gt-btn--icon { width: 42px; min-height: 42px; padding: 0; border-radius: var(--gt-r-md); }
.gt-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.gt-btn.is-loading::after {
content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
border: 2px solid currentColor; border-right-color: transparent; color: var(--_fg);
animation: gt-spin .7s linear infinite;
}
@keyframes gt-spin { to { transform: rotate(360deg); } }
/* Fields */
.gt-field { display: grid; gap: 6px; min-width: 0; }
.gt-label { font-size: var(--gt-fs-sm); font-weight: 600; color: var(--gt-text-2); }
.gt-label .req { color: var(--gt-danger); }
.gt-hint { font-size: var(--gt-fs-xs); color: var(--gt-muted); }
.gt-control {
position: relative; display: flex; align-items: center; min-width: 0;
min-height: 48px; border: 1px solid var(--gt-line-2); border-radius: var(--gt-r-md);
background: var(--gt-bg); transition: border-color var(--gt-t-fast) var(--gt-ease), box-shadow var(--gt-t-fast) var(--gt-ease);
}
.gt-control:focus-within { border-color: var(--gt-ink); box-shadow: var(--gt-focus); }
.gt-control--invalid, .gt-control:has(.is-invalid), .gt-control:has(.error) { border-color: var(--gt-danger); }
.gt-control--invalid:focus-within { box-shadow: 0 0 0 3px rgba(185, 28, 28, .18); }
.gt-control > .gt-control-icon {
flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center;
color: var(--gt-faint); font-size: 15px; pointer-events: none;
}
.gt-control > .gt-control-icon + .gt-input,
.gt-control > .gt-control-icon + .gt-select,
.gt-control > .gt-control-icon + .gt-textarea,
.gt-control > .gt-control-icon + .gt-control-slot { padding-inline-start: 0; }
.gt-input, .gt-select, .gt-textarea, .gt-control-slot {
flex: 1 1 auto; min-width: 0; width: 100%; height: 46px; padding: 0 var(--gt-s4);
border: 0; border-radius: inherit; background: transparent; color: var(--gt-text);
font-size: var(--gt-fs-md); outline: none; appearance: none; -webkit-appearance: none;
}
.gt-input::placeholder, .gt-textarea::placeholder { color: var(--gt-faint); opacity: 1; }
.gt-textarea { height: auto; min-height: 112px; padding-block: var(--gt-s3); resize: vertical; }
.gt-control:has(.gt-textarea) { align-items: stretch; }
.gt-select {
padding-inline-end: 40px; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center;
}
[dir="rtl"] .gt-select { background-position: left 14px center; padding-inline-end: var(--gt-s4); padding-inline-start: 40px; }
.gt-control-slot { display: flex; align-items: center; }
.gt-control-action {
flex: 0 0 auto; align-self: stretch; display: inline-flex; align-items: center; padding: 0 var(--gt-s4);
border: 0; border-inline-start: 1px solid var(--gt-line); background: var(--gt-bg-2); color: var(--gt-ink);
font-weight: 600; font-size: var(--gt-fs-sm); border-radius: 0 var(--gt-r-md) var(--gt-r-md) 0; cursor: pointer;
}
[dir="rtl"] .gt-control-action { border-radius: var(--gt-r-md) 0 0 var(--gt-r-md); border-inline-start: 0; border-inline-end: 1px solid var(--gt-line); }
.gt-control-action:hover { background: var(--gt-bg-3); }
.gt-error { display: block; font-size: var(--gt-fs-xs); color: var(--gt-danger); margin-top: 2px; }
/* Checks and radios */
.gt-check { display: inline-flex; align-items: flex-start; gap: var(--gt-s3); cursor: pointer; font-size: var(--gt-fs-md); color: var(--gt-text-2); }
.gt-check input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; border: 1.5px solid var(--gt-line-2); border-radius: 6px; background: var(--gt-bg); display: grid; place-content: center; transition: background var(--gt-t-fast), border-color var(--gt-t-fast); cursor: pointer; }
.gt-check input[type="radio"] { border-radius: 50%; }
.gt-check input::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--gt-t-fast) var(--gt-ease); background: var(--gt-accent-ink); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.gt-check input[type="radio"]::before { clip-path: none; border-radius: 50%; width: 8px; height: 8px; }
.gt-check input:checked { background: var(--gt-accent); border-color: var(--gt-accent); }
.gt-check input:checked::before { transform: scale(1); }
.gt-check input:focus-visible { box-shadow: var(--gt-focus); }
/* Chips — selectable, used for the service category radios */
.gt-chips { display: flex; flex-wrap: wrap; gap: var(--gt-s2); }
.gt-chip {
position: relative; display: inline-flex; align-items: center; gap: var(--gt-s2);
min-height: 40px; padding: 0 var(--gt-s4); margin: 0;
border: 1px solid var(--gt-line-2); border-radius: var(--gt-r-pill); background: var(--gt-bg);
color: var(--gt-text-2); font-size: var(--gt-fs-sm); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
cursor: pointer; user-select: none; transition: background var(--gt-t-fast), border-color var(--gt-t-fast), color var(--gt-t-fast), box-shadow var(--gt-t-fast);
}
.gt-chip:hover { border-color: var(--gt-ink); color: var(--gt-ink); }
.gt-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.gt-chip:has(input:checked) { background: var(--gt-ink); border-color: var(--gt-ink); color: #fff; }
.gt-chip:has(input:focus-visible) { box-shadow: var(--gt-focus); }
.gt-chip > span { padding: 0 !important; background: transparent !important; color: inherit !important; border: 0 !important; box-shadow: none !important; }
.gt-chip > span::before, .gt-chip > span::after { display: none !important; }
/* Segmented control (one-way / return) */
.gt-segment { display: inline-flex; padding: 4px; border-radius: var(--gt-r-md); background: var(--gt-bg-3); gap: 2px; }
.gt-segment label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 var(--gt-s4); border-radius: var(--gt-r-sm); font-size: var(--gt-fs-sm); font-weight: 600; color: var(--gt-muted); cursor: pointer; margin: 0; transition: background var(--gt-t-fast), color var(--gt-t-fast); }
.gt-segment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.gt-segment label:has(input:checked) { background: var(--gt-bg); color: var(--gt-ink); box-shadow: var(--gt-sh-1); }
/* Cards */
.gt-card { background: var(--gt-bg); border: 1px solid var(--gt-line); border-radius: var(--gt-r-lg); }
.gt-card--pad { padding: clamp(20px, 3vw, 28px); }
.gt-card--hover { transition: border-color var(--gt-t) var(--gt-ease), transform var(--gt-t) var(--gt-ease), box-shadow var(--gt-t) var(--gt-ease); }
.gt-card--hover:hover { border-color: var(--gt-line-2); transform: translateY(-2px); box-shadow: var(--gt-sh-2); }
.gt-card--dark { background: var(--gt-dark-2); border-color: var(--gt-dark-line); color: var(--gt-on-dark); }
/* Badges */
.gt-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--gt-r-pill); background: var(--gt-bg-3); color: var(--gt-text-2); font-size: var(--gt-fs-xs); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.gt-badge--accent { background: var(--gt-accent-soft); color: var(--gt-accent-ink); }
.gt-badge--success { background: var(--gt-success-soft); color: var(--gt-success); }
.gt-badge--warning { background: var(--gt-warning-soft); color: var(--gt-warning); }
.gt-badge--danger { background: var(--gt-danger-soft); color: var(--gt-danger); }
.gt-badge--info { background: var(--gt-info-soft); color: var(--gt-info); }
.gt-badge--dark { background: var(--gt-ink); color: #fff; }
/* Alerts */
.gt-alert { display: flex; gap: var(--gt-s3); padding: var(--gt-s4); border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); background: var(--gt-bg-2); color: var(--gt-text-2); font-size: var(--gt-fs-md); }
.gt-alert i { flex: 0 0 auto; margin-top: 2px; }
.gt-alert--success { background: var(--gt-success-soft); border-color: transparent; color: var(--gt-success); }
.gt-alert--warning { background: var(--gt-warning-soft); border-color: transparent; color: var(--gt-warning); }
.gt-alert--danger { background: var(--gt-danger-soft); border-color: transparent; color: var(--gt-danger); }
.gt-alert--info { background: var(--gt-info-soft); border-color: transparent; color: var(--gt-info); }
/* Skeletons and empty states */
.gt-skeleton { position: relative; overflow: hidden; background: var(--gt-bg-3); border-radius: var(--gt-r-sm); color: transparent !important; }
.gt-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: gt-shimmer 1.4s infinite; }
@keyframes gt-shimmer { to { transform: translateX(100%); } }
.gt-empty { display: grid; justify-items: center; gap: var(--gt-s2); padding: var(--gt-s10) var(--gt-s4); text-align: center; color: var(--gt-muted); border: 1px dashed var(--gt-line-2); border-radius: var(--gt-r-lg); }
.gt-empty i { font-size: 28px; color: var(--gt-faint); }
/* Stepper */
.gt-stepper { display: flex; align-items: center; justify-content: center; gap: 0; }
.gt-stepper-step {
display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px; border: 0; background: none;
color: var(--gt-muted); font-weight: 600; font-size: var(--gt-fs-sm); cursor: default; white-space: nowrap;
}
.gt-stepper-step::before {
content: attr(data-step-number); display: inline-grid; place-content: center; width: 28px; height: 28px;
border-radius: 50%; border: 1.5px solid var(--gt-line-2); background: var(--gt-bg); color: var(--gt-muted);
font-size: var(--gt-fs-xs); font-weight: 700; transition: background var(--gt-t), border-color var(--gt-t), color var(--gt-t);
}
.gt-stepper-step.active { color: var(--gt-ink); }
.gt-stepper-step.active::before { background: var(--gt-ink); border-color: var(--gt-ink); color: #fff; }
.gt-stepper-step.completed { color: var(--gt-text-2); }
.gt-stepper-step.completed::before { content: "✓"; background: var(--gt-accent); border-color: var(--gt-accent); color: var(--gt-accent-ink); }
.gt-stepper-line { flex: 0 1 56px; min-width: 20px; height: 2px; background: var(--gt-line-2); border-radius: 2px; transition: background var(--gt-t); }
.gt-stepper-line.completed { background: var(--gt-accent); }
@media (max-width: 480px) {
.gt-stepper-step { font-size: var(--gt-fs-xs); padding-inline: 6px; gap: 6px; }
.gt-stepper-step::before { width: 24px; height: 24px; }
.gt-stepper-line { flex-basis: 20px; }
}
/* Store buttons */
.gt-store { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 12px; border-radius: var(--gt-r-md); background: var(--gt-ink); color: #fff !important; text-decoration: none !important; border: 1px solid rgba(255,255,255,.08); transition: background var(--gt-t-fast), transform var(--gt-t-fast); }
.gt-store:hover { background: var(--gt-dark-3); transform: translateY(-1px); }
.gt-store i { font-size: 22px; }
.gt-store span { display: grid; line-height: 1.05; }
.gt-store small { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.gt-store strong { font-size: var(--gt-fs-md); font-weight: 600; }
.gt-on-light .gt-store { background: var(--gt-ink); }
/* Star rating */
.gt-stars { display: inline-flex; gap: 2px; color: #f5b301; font-size: 14px; letter-spacing: 1px; }
/* Tooltips (CSS, for icon buttons the booking script owns) */
.gt-site [data-tooltip] { position: relative; }
.gt-site [data-tooltip]::after {
content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
padding: 6px 10px; border-radius: var(--gt-r-xs); background: var(--gt-ink); color: #fff; font-size: var(--gt-fs-xs); font-weight: 500;
white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--gt-t-fast), transform var(--gt-t-fast); z-index: 20;
}
.gt-site [data-tooltip]:hover::after, .gt-site [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* The full text of a cut-off address field, on hover / focus
(public/js/site/address-tooltip.js places it; same look as the above). */
.gt-address-tip {
position: fixed; z-index: 1060; left: 0; top: 0; box-sizing: border-box;
max-width: min(420px, calc(100vw - 16px)); padding: 7px 10px; border-radius: var(--gt-r-xs, 6px);
background: var(--gt-ink, #0d1117); color: #fff; font-family: var(--gt-font, inherit);
font-size: var(--gt-fs-sm, .8125rem); font-weight: 500; line-height: 1.4;
white-space: normal; overflow-wrap: anywhere; pointer-events: none;
box-shadow: 0 8px 24px rgba(13, 17, 23, .18); opacity: 0; transition: opacity var(--gt-t-fast, 120ms);
}
.gt-address-tip[hidden] { display: none; }
.gt-address-tip.is-visible { opacity: 1; }
/* bootstrap-select, restyled — the booking script refreshes these, so the
markup is bootstrap-select's own; only its look changes. */
.gt-site .bootstrap-select { width: 100% !important; }
.gt-site .bootstrap-select > .dropdown-toggle {
display: flex; align-items: center; width: 100%; min-height: 46px; padding: 0 40px 0 var(--gt-s4) !important;
border: 0 !important; border-radius: var(--gt-r-md) !important; background: transparent !important; box-shadow: none !important;
color: var(--gt-text) !important; font-size: var(--gt-fs-md) !important; font-weight: 400; text-transform: none !important;
}
.gt-site .bootstrap-select > .dropdown-toggle::after { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); border: 0; width: 16px; height: 16px; margin: 0; background: url("data:image/svg+xml;utf8,") no-repeat center; }
[dir="rtl"] .gt-site .bootstrap-select > .dropdown-toggle { padding: 0 var(--gt-s4) 0 40px !important; }
[dir="rtl"] .gt-site .bootstrap-select > .dropdown-toggle::after { right: auto; left: 16px; }
.gt-site .bootstrap-select > .dropdown-toggle:focus { outline: none !important; }
.gt-site .bootstrap-select .filter-option-inner-inner { text-transform: none; }
.gt-site .bootstrap-select .dropdown-menu { padding: 6px; border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); box-shadow: var(--gt-sh-3); margin-top: 6px; }
.gt-site .bootstrap-select .dropdown-menu li a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--gt-r-sm); color: var(--gt-text); font-size: var(--gt-fs-md); text-transform: none; }
.gt-site .bootstrap-select .dropdown-menu li a:hover, .gt-site .bootstrap-select .dropdown-menu li a:focus { background: var(--gt-bg-2); color: var(--gt-ink); }
.gt-site .bootstrap-select .dropdown-menu li.selected a, .gt-site .bootstrap-select .dropdown-menu li a.active { background: var(--gt-accent-soft) !important; color: var(--gt-accent-ink) !important; }
.gt-site .bootstrap-select .bs-searchbox .form-control { border: 1px solid var(--gt-line-2); border-radius: var(--gt-r-sm); min-height: 40px; }
.gt-site .bootstrap-select .bs-ok-default::after { border-color: var(--gt-accent-ink); }
/* Legacy .form-control inside the system, for controls the scripts create */
.gt-site .gt-control .form-control { border: 0; background: transparent; box-shadow: none; height: 46px; padding: 0 var(--gt-s4); border-radius: var(--gt-r-md); font-size: var(--gt-fs-md); color: var(--gt-text); }
.gt-site .gt-control .form-control:focus { box-shadow: none; }
/* Motion preference */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.gt-site *, .gt-site *::before, .gt-site *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* ------------------------------------------------------------------ */
/* 4. Header */
/* ------------------------------------------------------------------ */
.gt-header { position: sticky; top: 0; z-index: 1000; background: var(--gt-dark); color: var(--gt-on-dark); border-bottom: 1px solid var(--gt-dark-line); }
/* One row, always.
This wrapped, and once the links and the three actions together were
wider than the container the actions dropped onto a second line and the
bar became two rows deep. The nav is the part that gives: it shrinks and
scrolls rather than pushing anything onto a new line. */
.gt-header-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--gt-s3); min-height: var(--gt-header-h); }
.gt-header-bar > .gt-brand { flex: 0 0 auto; }
.gt-header-bar > .gt-header-actions { flex: 0 0 auto; }
/* The bar gets more room than the rest of the page.
Everything else sits in a 1200px column, and the header did too - but
the logo, nine links and three actions need about 1350px together, so
inside 1200 the links were clipped at both ends. The bar is the one
place the page runs wider; the content inside it is unchanged. */
.gt-header .gt-header-bar { max-width: 1560px; }
.gt-brand { display: inline-flex; align-items: center; flex: 0 0 auto; margin-inline-end: var(--gt-s2); }
.gt-brand-logo { height: 38px !important; width: auto; max-width: 160px; object-fit: contain; }
/* Not a scroller. A box with overflow-x: auto clips on both axes, so it cut
away the Services dropdown below the 40px bar and the top and bottom of
the focus ring (left as two yellow "brackets"). The burger takes over
below 1150px, where the bar would stop fitting. */
.gt-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.gt-nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.gt-nav-item { position: relative; }
.gt-nav-link {
display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
border-radius: var(--gt-r-sm); color: var(--gt-on-dark-2) !important; font-size: var(--gt-fs-sm); font-weight: 600; letter-spacing: .01em;
white-space: nowrap; text-decoration: none !important; background: transparent; border: 0; cursor: pointer;
transition: color var(--gt-t-fast), background var(--gt-t-fast);
}
.gt-nav .gt-nav-link:hover, .gt-nav .gt-nav-item.is-current > .gt-nav-link, .gt-nav .gt-nav-link.is-current { color: #fff !important; background: rgba(255, 255, 255, .07); }
.gt-nav .gt-nav-item.is-current > .gt-nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--gt-accent); border-radius: 2px; }
.gt-nav .gt-nav-item--driver > .gt-nav-link { color: var(--gt-accent) !important; }
/* The plain nested list — a hover menu until the island replaces it */
.gt-nav-sub { position: absolute; top: 100%; inset-inline-start: 0; min-width: 240px; margin: 6px 0 0; padding: 8px; list-style: none; background: var(--gt-bg); border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); box-shadow: var(--gt-sh-3); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--gt-t-fast), transform var(--gt-t-fast), visibility var(--gt-t-fast); z-index: 30; }
.gt-nav-item--sub:hover > .gt-nav-sub, .gt-nav-item--sub:focus-within > .gt-nav-sub { opacity: 1; visibility: visible; transform: none; }
.gt-nav-sub li a { display: block; padding: 8px 12px; border-radius: var(--gt-r-sm); color: var(--gt-text); font-size: var(--gt-fs-sm); white-space: nowrap; }
.gt-nav-sub li a:hover { background: var(--gt-bg-2); color: var(--gt-ink); }
.gt-nav-sub .dt-sub-head { padding: 10px 12px 4px; font-size: var(--gt-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gt-faint); }
.gt-header-actions { display: flex; align-items: center; gap: var(--gt-s2); flex: 0 0 auto; margin-inline-start: auto; }
.gt-header-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--gt-r-sm); color: var(--gt-on-dark-2) !important; font-size: var(--gt-fs-sm); font-weight: 600; white-space: nowrap; }
.gt-header-link:hover { color: #fff !important; background: rgba(255, 255, 255, .07); }
.gt-header-phone { min-height: 42px; padding-inline: 14px 18px; gap: 10px; }
.gt-header-phone-tag { display: none; }
.gt-lang-native { min-height: 40px; padding: 0 30px 0 10px; border: 1px solid var(--gt-dark-line); border-radius: var(--gt-r-sm); background: transparent; color: var(--gt-on-dark-2); font-size: var(--gt-fs-sm); }
.gt-lang-native option { color: var(--gt-text); }
.gt-header-burger { display: none; }
.gt-burger { display: inline-grid; place-content: center; width: 44px; height: 44px; border: 1px solid var(--gt-dark-line); border-radius: var(--gt-r-md); background: transparent; color: var(--gt-on-dark); cursor: pointer; }
.gt-burger-bar, .gt-burger-bar::before, .gt-burger-bar::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.gt-burger-bar::before, .gt-burger-bar::after { content: ""; position: absolute; left: 0; }
.gt-burger-bar::before { top: -6px; } .gt-burger-bar::after { top: 6px; }
.gt-header.is-open .gt-nav { display: block; flex-basis: 100%; padding: 8px var(--gt-gutter) 16px; border-top: 1px solid var(--gt-dark-line); }
.gt-header.is-open .gt-nav-list { flex-direction: column; align-items: stretch; }
.gt-header.is-open .gt-nav-link { min-height: 46px; }
.gt-header.is-open .gt-nav-sub { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; padding: 0 0 0 12px; }
.gt-header.is-open .gt-nav-sub li a { color: var(--gt-on-dark-2); }
/* Ticker */
.gt-ticker { overflow: hidden; background: var(--gt-accent); color: var(--gt-accent-ink); font-size: var(--gt-fs-sm); font-weight: 600; }
.gt-ticker-track { display: flex; gap: 64px; width: max-content; padding: 6px 0; animation: gt-ticker 28s linear infinite; }
.gt-ticker-track span { white-space: nowrap; padding-inline-start: 64px; }
@keyframes gt-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gt-ticker-track { animation: none; } .gt-ticker-track span:last-child { display: none; } }
@media (max-width: 1439px) {
.gt-nav-link { padding-inline: 9px; font-size: var(--gt-fs-xs); }
.gt-header-link--auth span { display: none; }
.gt-header-link--auth { padding-inline: 10px; }
.gt-lang-value { display: none; }
.gt-lang { padding-inline: 10px 8px; }
.gt-header-phone-number { font-size: var(--gt-fs-sm); }
}
/* The burger takes over here, not at 1023.
The full bar needs about 1150px for the logo, the links and the three
actions. Between 1024 and 1150 the links were still shown and the row
scrolled sideways, hiding the first and last of them; a menu that hides
half its links is worse than a burger. */
@media (max-width: 1149px) {
.gt-nav { display: none; }
.gt-header-burger { display: block; }
.gt-header-link--auth { display: none; }
.gt-lang-host { display: none; }
.gt-header-phone-number { display: none; }
.gt-header-phone { width: 42px; padding: 0; justify-content: center; }
.gt-header-bar { min-height: 64px; }
.gt-brand-logo { height: 32px !important; }
}
/* Reka: services menu */
.gt-navmenu { position: relative; }
.gt-navmenu-list { display: flex; list-style: none; margin: 0; padding: 0; }
.gt-navmenu-trigger[data-state="open"] { color: #fff !important; background: rgba(255, 255, 255, .07); }
.gt-navmenu-caret { transition: transform var(--gt-t-fast); }
.gt-navmenu-trigger[data-state="open"] .gt-navmenu-caret { transform: rotate(180deg); }
.gt-navmenu-viewport-wrap { position: absolute; top: 100%; inset-inline-start: 0; padding-top: 8px; z-index: 40; }
.gt-navmenu-viewport { width: var(--reka-navigation-menu-viewport-width); height: var(--reka-navigation-menu-viewport-height); background: var(--gt-bg); border: 1px solid var(--gt-line); border-radius: var(--gt-r-lg); box-shadow: var(--gt-sh-3); overflow: hidden; transition: width var(--gt-t) var(--gt-ease), height var(--gt-t) var(--gt-ease); transform-origin: top center; }
.gt-navmenu-viewport[data-state="open"] { animation: gt-pop-in var(--gt-t) var(--gt-ease); }
.gt-navmenu-viewport[data-state="closed"] { animation: gt-pop-out var(--gt-t-fast) var(--gt-ease); }
.gt-navmenu-content { width: max-content; min-width: 280px; }
.gt-navmenu-panel { display: grid; gap: 4px; padding: 10px; }
.gt-navmenu-group { display: grid; }
.gt-navmenu-head { padding: 10px 12px 4px; font-size: var(--gt-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gt-faint); }
.gt-navmenu-link { display: block; padding: 9px 12px; border-radius: var(--gt-r-sm); color: var(--gt-text) !important; font-size: var(--gt-fs-md); }
.gt-navmenu-link.is-strong { font-weight: 700; color: var(--gt-ink) !important; }
.gt-navmenu-link:hover, .gt-navmenu-link:focus-visible { background: var(--gt-bg-2); }
.gt-navmenu-all { display: flex; justify-content: space-between; margin-top: 4px; padding: 10px 12px; border-top: 1px solid var(--gt-line); color: var(--gt-accent-deep) !important; font-size: var(--gt-fs-sm); font-weight: 700; }
@keyframes gt-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes gt-pop-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-4px); } }
/* Reka: mobile sheet */
.gt-sheet-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(8, 10, 14, .55); backdrop-filter: blur(2px); animation: gt-fade-in var(--gt-t) var(--gt-ease); }
.gt-sheet { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 1101; width: min(360px, 88vw); display: flex; flex-direction: column; background: var(--gt-bg); color: var(--gt-text); box-shadow: var(--gt-sh-3); overflow-y: auto; animation: gt-slide-in var(--gt-t-slow) var(--gt-ease); }
[dir="rtl"] .gt-sheet { animation-name: gt-slide-in-rtl; }
.gt-sheet[data-state="closed"] { animation: gt-fade-out var(--gt-t-fast) var(--gt-ease); }
.gt-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--gt-line); }
.gt-sheet-title { font-size: var(--gt-fs-base); font-weight: 700; color: var(--gt-ink); }
.gt-sheet-close { display: inline-grid; place-content: center; width: 40px; height: 40px; border: 1px solid var(--gt-line); border-radius: var(--gt-r-sm); background: var(--gt-bg); color: var(--gt-text); cursor: pointer; }
.gt-sheet-nav { padding: 8px 12px; }
.gt-sheet-list { list-style: none; margin: 0; padding: 0; display: grid; }
.gt-sheet-list > li > a { display: flex; align-items: center; min-height: 48px; padding: 0 10px; border-radius: var(--gt-r-sm); color: var(--gt-ink) !important; font-size: var(--gt-fs-base); font-weight: 600; }
.gt-sheet-list > li > a:hover { background: var(--gt-bg-2); }
.gt-sheet-list > li.is-current > a { color: var(--gt-accent-deep) !important; }
.gt-sheet-list .gt-nav-sub { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; background: transparent; margin: 0 0 8px; padding: 0 0 0 10px; }
.gt-sheet-list .gt-nav-sub li a { color: var(--gt-text-2); min-height: 40px; display: flex; align-items: center; }
/* A submenu in the sheet is a section that folds (navMenus.makeSheetSections). */
.gt-sheet-subtoggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 10px; border: 0; border-radius: var(--gt-r-sm); background: transparent; color: var(--gt-ink); font: inherit; font-size: var(--gt-fs-base); font-weight: 600; text-align: start; cursor: pointer; }
@media (hover: hover) { .gt-sheet-subtoggle:hover { background: var(--gt-bg-2); } }
.gt-sheet-list > li.is-current > .gt-sheet-subtoggle { color: var(--gt-accent-deep); }
.gt-sheet-subtoggle svg { flex: 0 0 auto; color: var(--gt-muted); transition: transform var(--gt-t-fast); }
.gt-sheet-subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.gt-sheet-list .gt-nav-sub[hidden] { display: none; }
.gt-sheet-extras { margin-top: auto; padding: 16px 20px 24px; border-top: 1px solid var(--gt-line); display: grid; gap: 10px; }
.gt-sheet-meta { font-size: var(--gt-fs-sm); color: var(--gt-muted) !important; text-align: center; }
.gt-sheet-langs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.gt-sheet-langs a { padding: 6px 12px; border: 1px solid var(--gt-line-2); border-radius: var(--gt-r-pill); color: var(--gt-text-2) !important; font-size: var(--gt-fs-sm); font-weight: 600; }
.gt-sheet-langs a.is-active { background: var(--gt-ink); border-color: var(--gt-ink); color: #fff !important; }
@keyframes gt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes gt-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gt-slide-in-rtl { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Reka: language select */
.gt-lang { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--gt-dark-line); border-radius: var(--gt-r-sm); background: transparent; color: var(--gt-on-dark-2); font-size: var(--gt-fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.gt-lang:hover, .gt-lang[data-state="open"] { color: #fff; background: rgba(255, 255, 255, .07); }
.gt-lang-caret { opacity: .7; }
.gt-lang-menu { z-index: 1200; min-width: 200px; padding: 6px; background: var(--gt-bg); border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); box-shadow: var(--gt-sh-3); animation: gt-pop-in var(--gt-t-fast) var(--gt-ease); }
.gt-lang-list { display: grid; }
.gt-lang-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--gt-r-sm); color: var(--gt-text); font-size: var(--gt-fs-md); cursor: pointer; outline: none; }
.gt-lang-item[data-highlighted] { background: var(--gt-bg-2); }
.gt-lang-item[data-state="checked"] { color: var(--gt-ink); font-weight: 600; }
.gt-lang-code { display: inline-grid; place-content: center; width: 28px; height: 22px; border-radius: 6px; background: var(--gt-bg-3); color: var(--gt-muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.gt-lang-check { margin-inline-start: auto; color: var(--gt-accent-deep); display: inline-flex; }
/* Reka: accordion */
.gt-acc { display: grid; gap: 10px; }
.gt-acc-item { border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); background: var(--gt-bg); overflow: hidden; transition: border-color var(--gt-t-fast); }
.gt-acc-item[data-state="open"] { border-color: var(--gt-line-2); }
.gt-acc-head { margin: 0; font-size: inherit; }
.gt-acc-trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 0; background: transparent; text-align: start; color: var(--gt-ink); font-size: var(--gt-fs-base); font-weight: 600; cursor: pointer; }
.gt-acc-trigger:hover { background: var(--gt-bg-2); }
.gt-acc-icon { flex: 0 0 auto; color: var(--gt-muted); transition: transform var(--gt-t) var(--gt-ease); }
.gt-acc-trigger[data-state="open"] .gt-acc-icon { transform: rotate(45deg); }
.gt-acc-content { overflow: hidden; }
.gt-acc-content[data-state="open"] { animation: gt-acc-down var(--gt-t) var(--gt-ease); }
.gt-acc-content[data-state="closed"] { animation: gt-acc-up var(--gt-t-fast) var(--gt-ease); }
.gt-acc-body { padding: 0 20px 20px; color: var(--gt-text-2); font-size: var(--gt-fs-md); }
.gt-acc-body :where(p:last-child) { margin-bottom: 0; }
@keyframes gt-acc-down { from { height: 0; } to { height: var(--reka-accordion-content-height); } }
@keyframes gt-acc-up { from { height: var(--reka-accordion-content-height); } to { height: 0; } }
/* ------------------------------------------------------------------ */
/* 5. Footer */
/* ------------------------------------------------------------------ */
.gt-footer { background: var(--gt-dark); color: var(--gt-on-dark-2); padding: clamp(48px, 7vw, 80px) 0 28px; border-top: 1px solid var(--gt-dark-line); }
.gt-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: clamp(24px, 4vw, 48px); }
.gt-footer-grid:has(.gt-footer-apps) { grid-template-columns: 1.6fr repeat(4, 1fr) 1.2fr; }
.gt-footer-brand { display: grid; gap: var(--gt-s4); align-content: start; }
.gt-footer-logo img { height: 40px !important; width: auto; max-width: 170px; object-fit: contain; }
.gt-footer-address { font-style: normal; display: grid; font-size: var(--gt-fs-sm); line-height: 1.6; color: var(--gt-on-dark-2); }
.gt-footer-contact { list-style: none; display: grid; gap: 6px; font-size: var(--gt-fs-sm); }
.gt-footer-contact a { color: var(--gt-on-dark) !important; display: inline-flex; align-items: center; gap: 8px; }
.gt-footer-contact i { color: var(--gt-accent-on-dark, var(--gt-accent)); width: 16px; text-align: center; }
.gt-footer-social { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gt-footer-social a { display: inline-grid; place-content: center; width: 38px; height: 38px; border: 1px solid var(--gt-dark-line); border-radius: var(--gt-r-sm); color: var(--gt-on-dark) !important; font-size: 15px; transition: background var(--gt-t-fast), border-color var(--gt-t-fast), transform var(--gt-t-fast); }
.gt-footer-social a:hover { background: var(--gt-accent); border-color: var(--gt-accent); color: var(--gt-accent-ink) !important; transform: translateY(-2px); }
.gt-footer-title { font-size: var(--gt-fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gt-on-dark); margin-bottom: 16px; }
.gt-footer-links { list-style: none; display: grid; gap: 9px; }
.gt-footer-links a { color: var(--gt-on-dark-2) !important; font-size: var(--gt-fs-md); }
.gt-footer-links a:hover { color: #fff !important; }
.gt-footer-stores { display: grid; gap: 8px; grid-template-columns: minmax(200px, max-content); }
/* Store badges (26 Oct 2026): at least 200px, one shared track so both are the
same width, and each text line kept on one line ("Download on the" needs
~170px with icon and padding). The track's 200px floor also widens the
footer column, so the badge never spills out of it. */
.gt-footer-stores .gt-store small, .gt-footer-stores .gt-store strong { white-space: nowrap; }
.gt-store--light { background: var(--gt-dark-2); border-color: var(--gt-dark-line); }
.gt-store--light:hover { background: var(--gt-dark-3); }
.gt-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(32px, 5vw, 56px); padding-top: 20px; border-top: 1px solid var(--gt-dark-line); font-size: var(--gt-fs-sm); color: var(--gt-on-dark-muted); }
.gt-footer-bottom p { margin: 0; }
.gt-footer-copy a { color: var(--gt-accent-on-dark, var(--gt-accent)) !important; }
@media (max-width: 1023px) { .gt-footer-grid, .gt-footer-grid:has(.gt-footer-apps) { grid-template-columns: 1fr 1fr 1fr; } .gt-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 599px) { .gt-footer-grid, .gt-footer-grid:has(.gt-footer-apps) { grid-template-columns: 1fr 1fr; } .gt-footer-apps { grid-column: 1 / -1; } .gt-footer-stores { grid-template-columns: repeat(auto-fill, 200px); } }
/* ------------------------------------------------------------------ */
/* 6. Homepage */
/* ------------------------------------------------------------------ */
.gt-hero { position: relative; isolation: isolate; background: var(--gt-dark); overflow: hidden; }
.gt-hero-media { position: absolute; inset: 0; z-index: -2; }
.gt-hero-media, .gt-hero-media .slick-list, .gt-hero-media .slick-track { height: 100%; }
.gt-hero-slide { height: 100%; min-height: 100%; }
@media (max-width: 767px) { .gt-hero-slide { background-image: var(--mobile-bg) !important; } }
.gt-hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 10, 14, .92) 0%, rgba(8, 10, 14, .78) 45%, rgba(8, 10, 14, .35) 100%); }
.gt-hero-inner { display: grid; grid-template-columns: minmax(0, 640px); padding-block: clamp(64px, 10vw, 128px) clamp(96px, 12vw, 160px); }
.gt-hero-copy { display: grid; gap: var(--gt-s5); justify-items: start; }
.gt-hero-rating { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid var(--gt-dark-line); border-radius: var(--gt-r-pill); background: rgba(255, 255, 255, .06); color: var(--gt-on-dark-2) !important; font-size: var(--gt-fs-sm); }
.gt-hero-rating strong { color: #fff; }
.gt-hero .gt-h1 { max-width: 14ch; }
.gt-hero-actions { display: flex; flex-wrap: wrap; gap: var(--gt-s3); margin-top: var(--gt-s2); }
.gt-hero-apps { display: grid; gap: 10px; margin-top: var(--gt-s4); padding-top: var(--gt-s5); border-top: 1px solid var(--gt-dark-line); width: 100%; }
.gt-hero-apps-label { font-size: var(--gt-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gt-on-dark-muted); }
.gt-hero-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.gt-hero .gt-store { background: rgba(255, 255, 255, .08); border-color: var(--gt-dark-line); }
.gt-hero .gt-store:hover { background: rgba(255, 255, 255, .14); }
/* The booking form sits over the hero's bottom edge */
.gt-booking-anchor { position: relative; z-index: 2; margin-top: clamp(-72px, -8vw, -110px); }
/* Services */
.gt-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gt-s5); }
.gt-service { display: grid; gap: var(--gt-s3); padding: clamp(20px, 3vw, 28px); align-content: start; }
/* These carry photographs, not glyphs. A 30px picture inside a tinted
56px tile read as a broken icon; the image fills the tile and the tile
is big enough to see what is in it. */
.gt-service-icon { overflow: hidden; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--gt-r-md); background: var(--gt-accent-soft); }
.gt-service-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991px) { .gt-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .gt-services { grid-template-columns: 1fr; } }
/* Trust strip */
.gt-trust { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gt-s4) var(--gt-s8); }
.gt-trust-item { display: flex; gap: var(--gt-s3); align-items: flex-start; }
.gt-trust-item img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.gt-trust-item strong { display: block; color: var(--gt-ink); }
.gt-trust-item span { display: block; font-size: var(--gt-fs-sm); color: var(--gt-muted); }
/* App section */
.gt-app { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.gt-app-copy { display: grid; gap: var(--gt-s5); justify-items: start; }
.gt-app-benefits { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gt-s5) var(--gt-s6); margin-block: var(--gt-s2); }
.gt-app-benefits li { display: flex; gap: var(--gt-s3); align-items: flex-start; }
.gt-app-benefits strong { display: block; color: #fff; margin-bottom: 4px; }
.gt-app-benefits p { margin: 0; font-size: var(--gt-fs-sm); color: var(--gt-on-dark-2); }
.gt-app-num { flex: 0 0 auto; font-size: var(--gt-fs-xs); font-weight: 800; color: var(--gt-accent-on-dark, var(--gt-accent)); letter-spacing: .06em; padding-top: 3px; font-variant-numeric: tabular-nums; }
.gt-app-visual { display: grid; place-items: center; }
.gt-phone { width: min(280px, 70vw); aspect-ratio: 9 / 18.5; padding: 12px; border-radius: 40px; background: #1a1f27; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(0, 0, 0, .5); }
.gt-phone-screen { height: 100%; border-radius: 30px; background: linear-gradient(180deg, var(--gt-dark-3), var(--gt-dark)); padding: 28px 18px; display: grid; align-content: start; gap: 14px; overflow: hidden; }
.gt-phone-screen img { height: 36px; width: auto; max-width: 120px; object-fit: contain; margin-bottom: 8px; }
.gt-phone-card { height: 64px; border-radius: 14px; background: rgba(255, 255, 255, .08); padding: 14px; display: grid; gap: 8px; align-content: center; }
.gt-phone-card span { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.gt-phone-card span:last-child { width: 60%; }
.gt-phone-card--accent { background: var(--gt-accent); }
.gt-phone-card--accent span { background: rgba(0, 0, 0, .25); }
.gt-phone-cta { height: 46px; border-radius: 12px; background: #fff; margin-top: auto; }
@media (max-width: 991px) { .gt-app { grid-template-columns: 1fr; } .gt-app-visual { order: -1; } .gt-phone { width: min(220px, 60vw); } }
@media (max-width: 599px) { .gt-app-benefits { grid-template-columns: 1fr; } }
/* Advantages */
/* The heading column is narrower than the list and no longer leaves a
column of empty page beside it: it sits at the top of its own column and
the list takes the room it needs. */
.gt-advantages { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.gt-advantages-head { display: grid; gap: var(--gt-s3); position: sticky; top: calc(var(--gt-header-h) + 24px); }
.gt-advantages-list { list-style: none; display: grid; }
.gt-advantage { display: grid; grid-template-columns: 36px 84px minmax(0, 1fr); gap: var(--gt-s4); align-items: start; padding: var(--gt-s6) 0; border-top: 1px solid var(--gt-line); }
.gt-advantage:last-child { border-bottom: 1px solid var(--gt-line); }
.gt-advantage-num { font-size: var(--gt-fs-sm); font-weight: 800; color: var(--gt-faint); font-variant-numeric: tabular-nums; padding-top: 4px; }
.gt-advantage-icon { overflow: hidden; width: 84px; height: 64px; border-radius: var(--gt-r-md); background: var(--gt-bg-2); }
.gt-advantage-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-advantage p { margin: 4px 0 0; font-size: var(--gt-fs-md); }
@media (max-width: 991px) { .gt-advantages { grid-template-columns: 1fr; } .gt-advantages-head { position: static; } }
@media (max-width: 480px) { .gt-advantage { grid-template-columns: 68px minmax(0, 1fr); } .gt-advantage-num { display: none; } .gt-advantage-icon { width: 68px; height: 52px; } }
/* Drivers */
.gt-drivers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.gt-drivers-media img { width: 100%; border-radius: var(--gt-r-xl); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--gt-sh-3); }
.gt-drivers-media img.is-flipped { transform: scaleX(-1); }
.gt-drivers-copy { display: grid; gap: var(--gt-s5); justify-items: start; }
.gt-drivers-text { color: var(--gt-text-2); max-width: 60ch; }
.gt-drivers-text p { margin: 0; }
.gt-checklist { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gt-s3) var(--gt-s5); }
.gt-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--gt-fs-md); color: var(--gt-text); }
.gt-checklist i { flex: 0 0 auto; display: grid; place-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gt-accent); color: var(--gt-accent-ink); font-size: 11px; margin-top: 1px; }
@media (max-width: 991px) { .gt-drivers { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .gt-checklist { grid-template-columns: 1fr; } }
/* Reviews */
.gt-review-agg { display: inline-flex; align-items: center; gap: 8px; color: var(--gt-text) !important; font-size: var(--gt-fs-sm); font-weight: 600; }
.gt-review-agg i { font-size: 12px; color: var(--gt-accent-deep); }
.gt-reviews { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: var(--gt-s5); scroll-snap-type: x mandatory; padding-bottom: 6px; }
.gt-review { scroll-snap-align: start; display: grid; gap: var(--gt-s4); padding: clamp(20px, 3vw, 28px); margin: 0; }
.gt-review blockquote { margin: 0; color: var(--gt-text-2); font-size: var(--gt-fs-md); line-height: 1.6; }
.gt-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.gt-review figcaption span:last-child { display: grid; }
.gt-review figcaption strong { color: var(--gt-ink); font-size: var(--gt-fs-sm); }
.gt-review figcaption small { color: var(--gt-muted); font-size: var(--gt-fs-xs); }
.gt-review-avatar { display: grid; place-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 700; flex: 0 0 auto; }
@media (min-width: 1024px) { .gt-reviews { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; } }
/* ------------------------------------------------------------------ */
/* 7. Booking form */
/* ------------------------------------------------------------------ */
.gt-booking { position: relative; padding-bottom: clamp(24px, 4vw, 48px); }
.gt-booking-wrap--wide { max-width: 1400px; }
/* No overflow clip: the address suggestion list opens inside the card's
box and was cut off at its bottom edge. Nothing else in the card bleeds. */
.gt-booking-card { background: var(--gt-bg); border: 1px solid var(--gt-line); border-radius: var(--gt-r-xl); box-shadow: var(--gt-sh-3); }
.gt-booking-card--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
.gt-booking-main { padding: clamp(20px, 4vw, 40px); min-width: 0; }
.gt-booking-head { display: grid; gap: 6px; margin-bottom: var(--gt-s6); }
.gt-booking-video { background: var(--gt-dark); }
.gt-booking-video .video, .gt-booking-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991px) { .gt-booking-card--split { grid-template-columns: 1fr; } .gt-booking-video { aspect-ratio: 16 / 9; } }
/* The wizard */
.gt-bf-source { display: block; }
.booking-wizard-shell { display: block; }
.booking-wizard-progress { margin-bottom: var(--gt-s6); }
.booking-wizard-step { display: none; }
.booking-wizard-step.booking-wizard-step-active { display: block; animation: gt-step-in var(--gt-t) var(--gt-ease); }
@keyframes gt-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gt-bf-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gt-s4) var(--gt-s4); align-items: start; }
.gt-bf-col { grid-column: span 3; min-width: 0; }
.gt-bf--three .gt-bf-col { grid-column: span 2; }
.gt-bf-col--half { grid-column: span 3 !important; }
.gt-bf-col--full { grid-column: 1 / -1 !important; }
.gt-bf-col--center { justify-self: center; width: min(100%, 420px); }
@media (max-width: 767px) { .gt-bf-col, .gt-bf--three .gt-bf-col, .gt-bf-col--half { grid-column: 1 / -1 !important; } .gt-bf-col--center { width: 100%; } }
.gt-bf-heading { display: grid; gap: var(--gt-s3); margin-top: var(--gt-s2); padding-top: var(--gt-s4); border-top: 1px solid var(--gt-line); }
.gt-bf-heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.gt-bf-heading h5 { font-size: var(--gt-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gt-muted); }
.gt-bf-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--gt-s3); margin-top: var(--gt-s6); padding-top: var(--gt-s4); border-top: 1px solid var(--gt-line); }
.gt-bf-actions--center { justify-content: center; border-top: 0; padding-top: 0; }
.gt-bf-actions .gt-btn { min-width: 140px; }
@media (max-width: 480px) { .gt-bf-actions { flex-direction: column-reverse; } .gt-bf-actions .gt-btn, .gt-bf-actions [data-booking-submit-slot] { width: 100%; } .gt-bf-actions [data-booking-submit-slot] .gt-btn { width: 100%; } }
/* Categories */
.gt-bf-categories { margin: 0 0 var(--gt-s2); }
.gt-bf-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--gt-s3); }
.gt-bf-help { margin: 0; color: var(--gt-muted); font-size: var(--gt-fs-sm); }
.gt-bf-categories .gt-chips { justify-content: flex-start; }
/* Fields: labels are visible now; the icon sits in the control */
.gt-bf .gt-field { gap: 6px; }
.gt-bf .gt-control .form-control { flex: 1 1 0%; min-width: 0; width: 1%; }
.gt-bf .gt-control > input.form-control:first-child { padding-inline-start: var(--gt-s4); }
.gt-bf .gt-control { flex-wrap: wrap; }
.gt-bf .gt-control > label.error, .gt-bf .gt-field > label.error, .gt-bf-errors label.error { flex-basis: 100%; margin: 0; padding: 0 0 8px var(--gt-s4); font-size: var(--gt-fs-xs); font-weight: 500; color: var(--gt-danger); }
.gt-bf .gt-field > label.error { padding: 0; }
.gt-bf .gt-control:has(label.error), .gt-bf .gt-control:has(.error) { border-color: var(--gt-danger); }
.gt-bf .gt-control .bootstrap-select { flex: 1 1 0% !important; min-width: 0; width: 1% !important; float: none; margin: 0; }
/* The select is a field inside the control, not a second box: the control
already draws the border, so the toggle draws none whatever bootstrap-select
or the theme give it. */
.gt-bf .gt-control .bootstrap-select > .dropdown-toggle { border: 0 !important; border-radius: var(--gt-r-md) !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; min-height: 46px; }
.gt-bf .gt-control > .intl-tel-input { flex: 1 1 auto; min-width: 0; }
.gt-bf .gt-control > .intl-tel-input .form-control { padding-inline-start: 52px; width: 100%; }
.gt-bf .gt-control .flag-container { border-radius: var(--gt-r-md) 0 0 var(--gt-r-md); }
.gt-bf .gt-control .selected-flag { padding-inline-start: 12px; }
.gt-bf .gt-control .date-input-css-disable { cursor: pointer; }
.gt-bf .gt-control--stripe { padding: 0 var(--gt-s4); }
.gt-bf .gt-control--stripe .StripeElement { width: 100%; padding: 14px 0; height: auto; }
.gt-bf-grid--card { margin-bottom: 8px; }
.gt-bf-grid--card > .gt-control { grid-column: span 2; }
@media (max-width: 767px) { .gt-bf-grid--card > .gt-control { grid-column: 1 / -1; } }
.gt-bf .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
/* Places: the Google element lives inside .gt-place; the map buttons on its edge */
/* The suggestions list is drawn inside the address widget, so it paints
inside this field's stacking order. Without this the list slid under the
Get Quote button below it and the last suggestion was unclickable. */
.gt-control--place { min-height: 50px; position: relative; z-index: 1; }
.gt-control--place:focus-within { z-index: 40; }
.gt-place gmp-place-autocomplete { position: relative; z-index: 2; }
.gt-place { position: relative; display: flex; align-items: center; height: auto !important; min-height: 46px; padding: 0 !important; }
.gt-place gmp-place-autocomplete { flex: 1 1 auto; min-width: 0; width: 100%; --gmpx-color-surface: transparent; }
.gt-place-actions { display: flex; gap: 2px; flex: 0 0 auto; padding-inline-end: 6px; }
.gt-place-actions .btn { display: inline-grid; place-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--gt-r-sm); background: var(--gt-bg-2); color: var(--gt-muted); font-size: 13px; cursor: pointer; }
.gt-place-actions .btn:hover { background: var(--gt-accent-soft); color: var(--gt-accent-ink); }
.gt-control-icon--pickup { color: var(--gt-accent-deep); }
.gt-control-icon--drop { color: var(--gt-ink); }
.gt-bf-errors:empty { display: none; }
.gt-bf-errors { font-size: var(--gt-fs-xs); color: var(--gt-danger); }
/* "Use my current location" found no position (2 Oct 2026, the owner's
design): a centred dialog (islands/LocateDialog.vue, Reka Dialog). A pin
with a small warning badge on a soft coral circle - calm, not an alarm -
a muted "Try this" panel, and two actions that stack on a phone. */
.gt-ldlg-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(15, 20, 30, .42); animation: gt-fade-in var(--gt-t) var(--gt-ease); }
.gt-ldlg {
--_coral: #e0674c; --_coral-soft: #fdeee9;
position: fixed; z-index: 1201; top: 50%; left: 50%; transform: translate(-50%, -50%);
box-sizing: border-box; width: min(500px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: var(--gt-r-lg);
background: var(--gt-bg); color: var(--gt-text); box-shadow: 0 1px 3px rgba(16, 24, 40, .08), var(--gt-sh-3);
font-family: var(--gt-font); text-align: center; overflow-wrap: anywhere;
animation: gt-fade-in var(--gt-t) var(--gt-ease);
}
.gt-ldlg:focus { outline: none; }
/* Short windows (2 Oct 2026): the body scrolls inside, the actions are a
pinned footer that is always on screen. */
.gt-ldlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--gt-s8) var(--gt-s6) var(--gt-s3); }
.gt-ldlg-x {
position: absolute; top: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--gt-r-pill); background: transparent; color: var(--gt-faint); cursor: pointer;
transition: background var(--gt-t-fast), color var(--gt-t-fast);
}
.gt-ldlg-x:hover { background: var(--gt-bg-3); color: var(--gt-ink); }
.gt-ldlg-x:focus-visible, .gt-ldlg .gt-btn:focus-visible { outline: none; box-shadow: var(--gt-focus); }
.gt-ldlg-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--gt-s4); border-radius: var(--gt-r-pill); background: var(--_coral-soft); color: var(--_coral); }
.gt-ldlg-badge { fill: var(--_coral); }
.gt-ldlg-title { margin: 0 auto var(--gt-s2); max-width: 22em; font-size: var(--gt-fs-xl); line-height: var(--gt-lh-snug); font-weight: 700; color: #1c2537; }
.gt-ldlg-desc { margin: 0 auto var(--gt-s5); max-width: 34em; font-size: var(--gt-fs-md); line-height: 1.5; color: var(--gt-muted); }
.gt-ldlg-tips { margin-bottom: 0; padding: var(--gt-s4); border-radius: var(--gt-r-md); background: var(--gt-bg-2); text-align: start; }
.gt-ldlg-tips-head { margin: 0 0 var(--gt-s3); font-size: var(--gt-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gt-faint); }
.gt-ldlg-tips ul { display: grid; gap: var(--gt-s3); margin: 0; padding: 0; list-style: none; }
.gt-ldlg-tips li { display: flex; align-items: flex-start; gap: var(--gt-s3); }
.gt-ldlg-tip-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--gt-r-pill); background: var(--_coral-soft); color: var(--_coral); }
.gt-ldlg-tip-body { display: grid; gap: 2px; min-width: 0; font-size: var(--gt-fs-sm); line-height: 1.4; }
.gt-ldlg-tip-body strong { font-weight: 600; color: var(--gt-text); }
.gt-ldlg-tip-body span { color: var(--gt-muted); }
.gt-ldlg-actions { flex: 0 0 auto; display: flex; flex-direction: row-reverse; gap: var(--gt-s3); padding: var(--gt-s3) var(--gt-s6) var(--gt-s6); background: var(--gt-bg); }
.gt-ldlg-actions .gt-btn { flex: 1 1 auto; min-width: 0; min-height: 48px; padding-inline: 10px; white-space: normal; line-height: 1.2; }
.gt-ldlg-actions .gt-btn svg { flex: 0 0 auto; }
@media (max-width: 480px) {
.gt-ldlg-body { padding: var(--gt-s8) var(--gt-s4) var(--gt-s3); }
.gt-ldlg-actions { padding: var(--gt-s3) var(--gt-s4) var(--gt-s4); }
.gt-ldlg-actions { flex-direction: column; }
.gt-ldlg-actions .gt-btn { flex: 0 0 auto; width: 100%; }
}
/* Below ~560px tall: a smaller icon, tighter spacing, and a line under the
scrolling body so it reads as cut, not finished. */
@media (max-height: 560px) {
.gt-ldlg-body { padding-top: var(--gt-s5); }
.gt-ldlg-icon { width: 40px; height: 40px; margin-bottom: var(--gt-s2); }
.gt-ldlg-icon svg { width: 22px; height: 22px; }
.gt-ldlg-desc { margin-bottom: var(--gt-s3); }
.gt-ldlg-tips { padding: var(--gt-s3); }
.gt-ldlg-tips ul { gap: var(--gt-s2); }
.gt-ldlg-actions { border-top: 1px solid var(--gt-line); padding-top: var(--gt-s3); }
.gt-ldlg-actions .gt-btn { min-height: 44px; }
}
/* "Invalid Locations" - pickup and destination are the same (2 Oct 2026,
the owner's design; islands/NoticeDialog.vue, Reka Dialog - the same code
path and overlay as the locate dialog above). Compact: 400px on a desktop,
the screen less 16px a side on a phone. The locate dialog's pin with a
warning badge on a 52px soft coral circle - the meaning is carried by the
title, not the colour. Icon 12 / title 8 / text 24 / button. One action. */
.gt-ndlg {
--_coral: #e0674c; --_coral-soft: #fdeee9; --_navy: #1c2537;
position: fixed; z-index: 1201; top: 50%; left: 50%; transform: translate(-50%, -50%);
box-sizing: border-box; width: min(400px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
display: flex; flex-direction: column; align-items: center;
padding: var(--gt-s8) var(--gt-s6) var(--gt-s6); border: 1px solid var(--gt-line); border-radius: var(--gt-r-lg);
background: #fff; color: var(--_navy); box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 16px 40px -16px rgba(16, 24, 40, .22);
font-family: var(--gt-font); text-align: center; overflow-wrap: anywhere;
animation: gt-fade-in var(--gt-t) var(--gt-ease);
}
.gt-ndlg:focus { outline: none; }
.gt-ndlg-x {
position: absolute; top: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--gt-r-pill); background: var(--gt-bg-2); color: var(--gt-muted); cursor: pointer;
transition: background var(--gt-t-fast), color var(--gt-t-fast);
}
/* 44px to the finger, 32px to the eye. */
.gt-ndlg-x::before { content: ""; position: absolute; inset: -6px; }
.gt-ndlg-x:hover { background: var(--gt-bg-3); color: var(--_navy); }
.gt-ndlg-x:focus-visible, .gt-ndlg-ok:focus-visible { outline: none; box-shadow: var(--gt-focus); }
.gt-ndlg-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 52px; height: 52px; margin: 0 0 var(--gt-s3); border-radius: var(--gt-r-pill); background: var(--_coral-soft); color: var(--_coral); }
.gt-ndlg .gt-ldlg-badge { fill: var(--_coral); }
.gt-ndlg-title { margin: 0 0 var(--gt-s2); font-size: var(--gt-fs-lg); line-height: var(--gt-lh-snug); font-weight: 700; color: var(--_navy); }
.gt-ndlg-desc { margin: 0 0 var(--gt-s6); max-width: 30em; }
.gt-ndlg-desc p { margin: 0; font-size: var(--gt-fs-md); line-height: 1.5; color: #344054; }
.gt-ndlg-desc .gt-ndlg-hint { margin-top: var(--gt-s1); font-size: var(--gt-fs-sm); color: var(--gt-muted); }
.gt-ndlg-ok.gt-btn { min-width: 132px; min-height: 44px; padding-inline: var(--gt-s6); font-weight: 600; }
@media (max-width: 480px) {
.gt-ndlg { padding: var(--gt-s8) var(--gt-s5) var(--gt-s5); }
.gt-ndlg-ok.gt-btn { width: 100%; }
}
/* Journey summary (step 2, owner's finalised design, 2 Oct 2026): one box,
a compact row per leg - the icon, the leg's name in grey over its address,
and the pencil at the right. Stops sit between the two ends in visiting
order. The address is the value: dark, 500, never bold. */
.gt-journey { display: grid; margin-bottom: var(--gt-s5); border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); background: var(--gt-bg); }
.gt-journey-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 8px 8px 14px; }
.gt-journey-row + .gt-journey-row { border-top: 1px solid var(--gt-line); }
.gt-journey-icon { display: inline-grid; place-content: center; width: 20px; color: var(--gt-accent-deep); font-size: 15px; flex: 0 0 auto; }
.gt-journey-row[data-journey-end-row] .gt-journey-icon { color: var(--gt-ink); }
.gt-journey-stop-no { width: 20px; height: 20px; border-radius: 50%; background: var(--gt-accent-deep); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.gt-journey-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.gt-journey-label { font-size: var(--gt-fs-xs); font-weight: 500; color: var(--gt-muted); line-height: 1.3; }
.gt-journey-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--gt-fs-md); font-weight: 500; color: var(--gt-ink); line-height: 1.35; }
.gt-journey-value:empty::before { content: '\2014'; color: var(--gt-muted); }
.gt-journey-edit { flex: 0 0 auto; display: inline-grid; place-content: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: var(--gt-r-sm); background: none; color: var(--gt-muted); font-size: 13px; cursor: pointer; transition: background var(--gt-t-fast), color var(--gt-t-fast); }
.gt-journey-edit:hover { color: var(--gt-ink); background: var(--gt-bg-2); }
/* Native controls the script drives through cards and buttons */
.service-select-native, .trip-type-native { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Return offer */
/* The body text sits on the soft tint, not on the accent: on a dark brand
colour `--gt-accent-ink` is white, and white on the tint is unreadable. */
.gt-offer { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--gt-accent-line); border-radius: var(--gt-r-md); background: var(--gt-accent-soft); color: var(--gt-text); font-size: var(--gt-fs-sm); }
.gt-offer-icon { display: grid; place-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gt-accent); color: var(--gt-accent-ink); flex: 0 0 auto; }
.gt-offer-body { display: grid; gap: 2px; min-width: 0; }
.gt-offer-body strong { color: var(--gt-ink); }
/* #511: the return-trip offer is one sentence, said loud: 600 at 16px under its title. */
.gt-offer .return-trip-offer__text { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--gt-ink); }
/* Service cards, rendered by the script (step 2, owner's finalised design,
2 Oct 2026). A responsive grid - the form had no carousel to keep: four
across on a desktop, two on a tablet, one on a phone. A card: picture,
name, description, passengers and bags, distance and time, then its fares
as one radiogroup (ONE WAY | RETURN), each a circular radio. The chosen
fare: gold circle with a check, gold border, the price heavier; its card:
gold border on a faint gold tint. The rest stay neutral. */
.gt-svc-heading { display: flex; align-items: center; gap: 10px; margin: var(--gt-s2) 0 var(--gt-s3); font-size: var(--gt-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gt-ink); line-height: 1.3; }
.gt-svc-heading::before { content: ""; flex: 0 0 auto; width: 18px; height: 3px; border-radius: 2px; background: var(--gt-accent); }
.gt-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gt-s4); margin-top: 4px; }
@media (min-width: 600px) { .gt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .gt-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gt-cards:empty { display: none; }
.service-select-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1.5px solid var(--gt-line); border-radius: var(--gt-r-lg); background: var(--gt-bg); transition: border-color var(--gt-t-fast), background var(--gt-t-fast), box-shadow var(--gt-t-fast); }
.service-select-card:hover { border-color: var(--gt-line-2); box-shadow: var(--gt-sh-1); }
.service-select-card.selected { border-color: var(--gt-accent); background: color-mix(in srgb, var(--gt-accent) 5%, var(--gt-bg)); }
.service-select-card-image { display: grid; place-content: center; height: 84px; border-radius: var(--gt-r-md); background: var(--gt-bg-2); overflow: hidden; }
.service-select-card-image img { width: 100%; height: 84px; object-fit: contain; padding: 6px; }
.service-select-card-placeholder { color: var(--gt-faint); font-size: 26px; }
.service-select-card-info { display: grid; gap: 2px; min-width: 0; }
.service-select-card-title { font-weight: 700; color: var(--gt-ink); font-size: var(--gt-fs-base); line-height: 1.3; }
.service-select-card-description { font-size: var(--gt-fs-xs); color: var(--gt-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.service-card-stats, .service-card-metrics { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--gt-fs-xs); }
.service-card-stat { display: inline-flex; align-items: center; gap: 6px; color: var(--gt-text-2); }
.service-card-stat i { color: var(--gt-faint); }
.service-card-metric-label { color: var(--gt-muted); }
.service-card-metric-value { font-weight: 500; color: var(--gt-ink); }
/* Per head (task 266): "RM 1.00 / person × 3" under a per-head card and estimate. */
.service-card-per-head, .gt-per-head-note { display: block; font-size: var(--gt-fs-xs); color: var(--gt-muted); font-weight: 400; overflow-wrap: anywhere; }
/* The booking button waits while a per-head fare is re-asked for the party (review, task 267). */
.gt-updating-price { display: block; margin-top: 6px; font-size: var(--gt-fs-xs); color: var(--gt-muted); font-weight: 400; }
.gt-updating-price[hidden] { display: none; }
.service-price-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 8px; }
.service-price-options.single-price-option { grid-template-columns: minmax(0, 1fr); }
.service-price-button { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 52px; padding: 8px 10px; border: 1.5px solid var(--gt-line); border-radius: var(--gt-r-md); background: var(--gt-bg); text-align: start; cursor: pointer; transition: border-color var(--gt-t-fast), background var(--gt-t-fast); }
.service-price-button:hover { border-color: var(--gt-line-2); }
.service-price-text { display: grid; gap: 1px; min-width: 0; }
.service-price-label { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gt-muted); white-space: nowrap; }
.service-price-value { font-size: var(--gt-fs-sm); font-weight: 600; color: var(--gt-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The promo price (task 212, public/js/site/promo-price.js): with a code on, the discounted figure one step larger on
top and the original under it struck through, smaller and grey - the second line only while the operator's
"Strike through the original price on a discount" switch is on. The weight stays within the value rule (max 600). */
.service-price-value--promo { font-size: var(--gt-fs-md); }
.service-price-was { display: block; font-size: var(--gt-fs-xs); font-weight: 400; color: var(--gt-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-price-button.selected .service-price-was { font-weight: 400; color: var(--gt-muted); }
/* The same two lines on the estimate line under the cards and under the discount code on the Details step. */
.gt-estimate-price { font-size: var(--gt-fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.gt-estimate-was { display: block; font-size: var(--gt-fs-sm); font-weight: 400; color: var(--gt-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.gt-promo-price { display: grid; gap: 1px; margin-top: 8px; color: var(--gt-ink); }
.gt-promo-price.d-none, .gt-promo-success.d-none { display: none; }
.gt-promo-success { display: block; margin-top: 6px; font-size: var(--gt-fs-sm); color: var(--gt-success); }
.service-price-choice { flex: 0 0 18px; display: grid; place-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--gt-line-2); background: var(--gt-bg); font-size: 9px; color: var(--gt-accent-ink); transition: background var(--gt-t-fast), border-color var(--gt-t-fast); }
.service-price-choice svg { display: block; visibility: hidden; }
.service-price-button.selected { border-color: var(--gt-accent); background: color-mix(in srgb, var(--gt-accent) 12%, var(--gt-bg)); }
.service-price-button.selected .service-price-choice { background: var(--gt-accent); border-color: var(--gt-accent); }
.service-price-button.selected .service-price-choice svg { visibility: visible; }
.service-price-button.selected .service-price-value { font-weight: 800; color: var(--gt-ink); }
.service-price-saving { position: absolute; top: -9px; inset-inline-end: 6px; padding: 1px 7px; border-radius: var(--gt-r-pill); background: var(--gt-success); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; line-height: 1.5; }
.service-price-button:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .service-select-card, .service-price-button, .service-price-choice { transition: none; } }
/* A phone: the picture beside the name, so four cards are not four screens. */
@media (max-width: 599px) {
.service-select-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: center; }
.service-select-card > :not(.service-select-card-image):not(.service-select-card-info) { grid-column: 1 / -1; }
.service-select-card-image, .service-select-card-image img { height: 56px; }
.service-price-options { padding-top: 6px; }
}
/* The fare estimate box once it holds only its hidden amount inputs: nothing to show (they still post). */
.gt-bf-estimate:not(:has(label, .loader)) { display: none !important; }
/* Estimate */
.gt-bf-estimate { padding: var(--gt-s4); border-radius: var(--gt-r-md); background: var(--gt-bg-2); }
.gt-estimate-body { display: grid; gap: 8px; font-size: var(--gt-fs-md); }
.gt-estimate-body label { margin: 0; }
.gt-bf-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.gt-bf-labels:has(> .d-none:only-child), .gt-bf-labels:not(:has(> :not(.d-none))) { display: none; }
.gt-bf-labels .gt-badge { min-height: 32px; padding-inline: 14px; font-size: var(--gt-fs-sm); }
.gt-bf-labels .gt-badge > span { padding: 0 !important; }
/* The same for the estimate / distance pills under the service cards: the
quote leaves them holding hidden inputs only, which drew two empty 28px
circles above the footer (owner, 2 Oct 2026). Every visible fill they get
carries a label or the loader; the inputs still post. */
.gt-bf-labels .gt-badge:not(:has(label, .loader)), .gt-bf-labels:not(:has(label, .loader)) { display: none !important; }
/* Submit */
.gt-bf-submit { display: grid; gap: var(--gt-s3); justify-items: center; }
.gt-bf-submit .form-group { margin: 0; }
.gt-bf-submit .form-result { width: 100%; }
.gt-bf-submit .form-result.alert-success { background: var(--gt-success-soft); color: var(--gt-success); }
.gt-bf-submit .form-result.alert-danger { background: var(--gt-danger-soft); color: var(--gt-danger); }
.gt-bf-submit .form-result.alert-warning { background: var(--gt-warning-soft); color: var(--gt-warning); }
/* Flatpickr, restyled */
.gt-site .flatpickr-calendar { border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); box-shadow: var(--gt-sh-3); font-family: var(--gt-font); }
.gt-site .flatpickr-day.selected, .gt-site .flatpickr-day.selected:hover { background: var(--gt-ink); border-color: var(--gt-ink); }
.gt-site .flatpickr-day.today { border-color: var(--gt-accent); }
.gt-site .flatpickr-day:hover { background: var(--gt-bg-2); border-color: var(--gt-bg-2); }
.gt-site .flatpickr-months .flatpickr-month, .gt-site .flatpickr-current-month { color: var(--gt-ink); }
/* Google Places dropdown */
.gt-site .pac-container { border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); box-shadow: var(--gt-sh-3); font-family: var(--gt-font); padding: 4px; margin-top: 4px; }
.gt-site .pac-item { border: 0; border-radius: var(--gt-r-sm); padding: 8px 10px; font-size: var(--gt-fs-sm); color: var(--gt-text-2); }
.gt-site .pac-item:hover, .gt-site .pac-item-selected { background: var(--gt-bg-2); }
.gt-site .pac-item-query { color: var(--gt-ink); font-size: var(--gt-fs-md); }
/* ------------------------------------------------------------------ */
/* 8. Inner pages */
/* ------------------------------------------------------------------ */
/* Page hero */
.gt-page-hero { position: relative; isolation: isolate; background: var(--gt-dark); overflow: hidden; }
.gt-page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--gt-hero-img, none) center / cover no-repeat; }
@media (max-width: 767px) { .gt-page-hero::before { background-image: var(--gt-hero-img-m, var(--gt-hero-img, none)); } }
.gt-page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 10, 14, .82), rgba(8, 10, 14, .9)); }
.gt-page-hero-inner { display: grid; gap: var(--gt-s4); justify-items: start; padding-block: clamp(48px, 8vw, 96px); max-width: 820px; }
.gt-page-hero--compact .gt-page-hero-inner { padding-block: clamp(36px, 5vw, 56px); }
.gt-page-hero .gt-h1 { font-size: var(--gt-fs-4xl); }
/* Prose: CMS and article HTML */
.gt-prose { color: var(--gt-text-2); font-size: var(--gt-fs-base); line-height: 1.7; }
.gt-prose > :first-child { margin-top: 0; }
.gt-prose :where(h1, h2, h3, h4) { margin: 1.6em 0 .6em; color: var(--gt-ink); }
.gt-prose :where(h1) { font-size: var(--gt-fs-3xl); }
.gt-prose :where(h2) { font-size: var(--gt-fs-2xl); }
.gt-prose :where(h3) { font-size: var(--gt-fs-xl); }
.gt-prose :where(h4) { font-size: var(--gt-fs-lg); }
.gt-prose :where(p, ul, ol, blockquote, table, figure) { margin: 0 0 1.1em; }
.gt-prose :where(ul, ol) { padding-inline-start: 1.4em; }
.gt-prose :where(li) { margin: .3em 0; }
.gt-prose :where(a) { text-decoration: underline; text-underline-offset: 3px; }
.gt-prose :where(strong) { color: var(--gt-ink); }
.gt-prose :where(blockquote) { padding: var(--gt-s4) var(--gt-s5); border-inline-start: 3px solid var(--gt-accent); background: var(--gt-bg-2); border-radius: 0 var(--gt-r-md) var(--gt-r-md) 0; }
.gt-prose :where(img) { border-radius: var(--gt-r-md); }
.gt-prose :where(table) { width: 100%; border-collapse: collapse; font-size: var(--gt-fs-md); }
.gt-prose :where(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--gt-line); text-align: start; }
.gt-prose :where(th) { color: var(--gt-ink); background: var(--gt-bg-2); }
.gt-prose :where(hr) { margin: 2em 0; }
.gt-prose :where(br:first-child) { display: none; }
/* FAQ page: before the island mounts, the plain pairs */
.gt-faq { display: grid; gap: var(--gt-s3); }
.gt-faq-item { padding: var(--gt-s5); border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); }
.gt-faq-item .gt-h5 { margin-bottom: 8px; }
.gt-faq-a { color: var(--gt-text-2); font-size: var(--gt-fs-md); }
/* Reviews page */
.gt-rv-summary { position: relative; z-index: 2; margin-top: -36px; }
.gt-rv-summary-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gt-s6) var(--gt-s12); padding: clamp(20px, 3vw, 32px); box-shadow: var(--gt-sh-3); }
.gt-rv-score { text-align: center; display: grid; gap: 2px; }
.gt-rv-num { font-size: 56px; font-weight: 800; line-height: 1; color: var(--gt-ink); font-variant-numeric: tabular-nums; }
.gt-rv-stars { font-size: 22px; justify-content: center; }
.gt-rv-badges { display: grid; gap: 8px; }
.gt-rv-badge { display: inline-flex; align-items: center; gap: 12px; min-width: 250px; padding: 10px 16px; border: 1px solid var(--gt-line-2); border-radius: var(--gt-r-md); color: var(--gt-ink) !important; font-weight: 600; font-size: var(--gt-fs-md); transition: border-color var(--gt-t-fast), box-shadow var(--gt-t-fast); }
.gt-rv-badge:hover { border-color: var(--gt-ink); box-shadow: var(--gt-sh-2); }
.gt-rv-badge i { width: 32px; height: 32px; display: inline-grid; place-content: center; border-radius: var(--gt-r-sm); background: var(--gt-accent-soft); color: var(--gt-accent-ink); }
.gt-rv-badge small { display: block; font-weight: 400; font-size: var(--gt-fs-xs); color: var(--gt-muted); }
.gt-rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gt-s5); }
.gt-review-top { display: flex; justify-content: space-between; align-items: center; }
.gt-rv-lg { color: var(--gt-info); font-weight: 600; }
.gt-rv-form { max-width: 560px; margin-inline: auto; }
.gt-rv-google { display: block; text-align: center; margin-top: var(--gt-s4); font-weight: 600; font-size: var(--gt-fs-sm); }
/* The data-retention rows on the contact page are Bootstrap grid rows, and
a grid row carries negative side margins that only a grid column cancels.
These are not in a column, so the page ran 14px wider than the screen. */
.gt-site .data-box .row { margin-inline: 0; }
/* A link that is the whole list item is a control, not a word in a
sentence, and on a phone it needs a target worth aiming at. */
@media (max-width: 767px) {
.rel-links-col li > a:only-child,
.gt-footer-col li > a:only-child,
td > a:only-child { display: inline-block; padding-block: 7px; min-height: 32px; }
/* The brand mark in the sign-in bar is a link too. */
.gtl-brand { display: inline-flex; align-items: center; min-height: 34px; padding-block: 4px; }
}
/* A standalone link is a control, and on a phone it needs a target worth
aiming at. Links inside a sentence are exempt and keep their size. */
@media (max-width: 767px) {
.gt-rv-google, .gt-rv-badge, .gt-footer-nav a, .gt-cookie a { display: inline-block; padding-block: 7px; min-height: 32px; }
.gt-rv-google { display: block; }
}
.gt-file { display: block; width: 100%; padding: 10px; border: 1px dashed var(--gt-line-2); border-radius: var(--gt-r-md); background: var(--gt-bg-2); font-size: var(--gt-fs-sm); }
/* Blog */
.gt-blog-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--gt-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gt-muted); }
.gt-blog-meta a { color: var(--gt-accent-deep) !important; }
.gt-blog-featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); overflow: hidden; margin-bottom: var(--gt-s8); }
.gt-blog-media { position: relative; background: var(--gt-bg-3); min-height: 320px; }
.gt-blog-media .background_slider, .gt-blog-media .slick-list, .gt-blog-media .slick-track, .gt-blog-media .slider-item, .gt-blog-media .bg_img { height: 100%; min-height: 320px; }
.gt-blog-media .slider-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-blog-featured-body { display: grid; gap: var(--gt-s4); align-content: center; justify-items: start; padding: clamp(24px, 4vw, 40px); }
.gt-blog-featured-body .gt-h2 a { color: var(--gt-ink); }
.gt-blog-excerpt { max-height: 9.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); font-size: var(--gt-fs-md); }
.gt-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gt-s5); }
.gt-blog-card { overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.gt-blog-card-media { display: block; aspect-ratio: 16 / 10; background: var(--gt-bg-3); }
.gt-blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.gt-blog-card-body { display: grid; gap: 10px; padding: var(--gt-s5); align-content: start; justify-items: start; }
.gt-blog-card-body .gt-h4 a { color: var(--gt-ink); }
.gt-blog-card-body .gt-h4 a:hover { color: var(--gt-accent-deep); }
.gt-article { display: grid; gap: var(--gt-s6); }
.gt-article-title { color: var(--gt-ink); }
.gt-article-media { border-radius: var(--gt-r-lg); overflow: hidden; }
.gt-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: var(--gt-s10); }
.gt-page { display: inline-grid; place-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--gt-line-2); border-radius: var(--gt-r-sm); color: var(--gt-text) !important; font-weight: 600; font-size: var(--gt-fs-sm); }
.gt-page:hover { border-color: var(--gt-ink); }
.gt-page.is-active { background: var(--gt-ink); border-color: var(--gt-ink); color: #fff !important; }
.gt-page.is-disabled { opacity: .4; pointer-events: none; }
.gt-page-gap { color: var(--gt-faint); padding: 0 4px; }
@media (max-width: 991px) { .gt-blog-featured { grid-template-columns: 1fr; } .gt-blog-media { min-height: 240px; } .gt-blog-media .background_slider, .gt-blog-media .bg_img { min-height: 240px; } }
/* Location and route landing pages (.loc-*) */
.loc-page .container { width: 100%; max-width: var(--gt-container-narrow); margin-inline: auto; padding-inline: var(--gt-gutter); }
.loc-hero { background: var(--gt-dark); color: var(--gt-on-dark); padding-block: clamp(48px, 8vw, 96px); }
.loc-hero h1 { color: #fff; font-size: var(--gt-fs-4xl); letter-spacing: -.02em; font-weight: 800; margin-bottom: var(--gt-s4); max-width: 18ch; }
.loc-hero p.loc-lede { color: var(--gt-on-dark-2); font-size: var(--gt-fs-lg); max-width: 62ch; }
.loc-hero p.loc-lede strong { color: var(--gt-accent-on-dark, var(--gt-accent)); }
.loc-cta-row { display: flex; flex-wrap: wrap; gap: var(--gt-s3); margin-top: var(--gt-s6); }
.loc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 var(--gt-s6); border-radius: var(--gt-r-md); border: 1px solid transparent; font-weight: 600; text-decoration: none !important; transition: background var(--gt-t-fast), border-color var(--gt-t-fast), transform var(--gt-t-fast); }
.loc-btn:active { transform: translateY(1px); }
.loc-btn-primary { background: var(--gt-accent); color: var(--gt-accent-ink) !important; border-color: var(--gt-accent); }
.loc-btn-primary:hover, .loc-btn-primary:focus { background: var(--gt-accent-line); border-color: var(--gt-accent-line); }
.loc-btn-ghost { background: transparent; color: var(--gt-on-dark) !important; border-color: rgba(255, 255, 255, .3); }
.loc-btn-ghost:hover, .loc-btn-ghost:focus { background: rgba(255, 255, 255, .08); }
.loc-final-cta .loc-btn-ghost { color: var(--gt-ink) !important; border-color: var(--gt-line-2); }
.loc-final-cta .loc-btn-ghost:hover { background: var(--gt-bg-2); }
.loc-section { padding-block: clamp(40px, 6vw, 72px); }
.loc-section.alt { background: var(--gt-bg-2); }
.loc-section h2 { font-size: var(--gt-fs-2xl); margin-bottom: var(--gt-s4); }
.loc-section p, .loc-section li { color: var(--gt-text-2); line-height: 1.7; }
.loc-section p { margin-bottom: var(--gt-s4); }
.loc-section ul { list-style: disc; padding-inline-start: 1.3em; }
.loc-fare-note { font-size: var(--gt-fs-sm); color: var(--gt-muted); }
.loc-table-wrap { overflow-x: auto; margin: var(--gt-s5) 0; border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); }
table.loc-fares { width: 100%; border-collapse: collapse; font-size: var(--gt-fs-md); font-variant-numeric: tabular-nums; }
table.loc-fares th, table.loc-fares td { padding: 12px 14px; border-bottom: 1px solid var(--gt-line); text-align: start; white-space: nowrap; }
table.loc-fares th { background: var(--gt-bg-2); color: var(--gt-ink); font-size: var(--gt-fs-xs); text-transform: uppercase; letter-spacing: .06em; }
table.loc-fares tr:last-child td { border-bottom: 0; }
table.loc-fares td strong { color: var(--gt-ink); }
.loc-badges { list-style: none !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: var(--gt-s4); }
.loc-badges li { padding: 10px 14px; border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); background: var(--gt-bg); color: var(--gt-text); font-size: var(--gt-fs-md); }
.loc-faq-item { padding: var(--gt-s5); border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); background: var(--gt-bg); margin-bottom: 10px; }
.loc-faq-item h3 { font-size: var(--gt-fs-lg); margin-bottom: 6px; }
.loc-faq-item p { margin: 0; font-size: var(--gt-fs-md); }
.loc-crosslinks { display: flex; flex-wrap: wrap; gap: 8px; }
.loc-crosslinks a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--gt-line-2); border-radius: var(--gt-r-pill); color: var(--gt-text) !important; font-weight: 600; font-size: var(--gt-fs-sm); }
.loc-crosslinks a:hover { border-color: var(--gt-ink); color: var(--gt-ink) !important; }
.loc-final-cta { padding-block: clamp(48px, 7vw, 80px); text-align: center; background: var(--gt-bg-2); }
.loc-final-cta h2 { font-size: var(--gt-fs-3xl); }
.loc-final-cta p { color: var(--gt-muted); }
.loc-final-cta .loc-cta-row { justify-content: center; }
.rel-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gt-s5) var(--gt-s8); margin-top: var(--gt-s3); }
.rel-links-col h3 { font-size: var(--gt-fs-xs); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 12px; color: var(--gt-accent-deep); }
.rel-links-col ul { list-style: none !important; padding: 0 !important; margin: 0; }
.rel-links-col li { margin: 0 0 8px; }
.rel-links-col a { font-weight: 500; color: var(--gt-text-2) !important; }
.rel-links-col a:hover { color: var(--gt-ink) !important; }
/* Offers (create-booking) and phone banner */
.gt-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gt-s5); }
.gt-offer-card { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 3vw, 28px); position: relative; }
.gt-offer-card .gt-badge { justify-self: start; }
.gt-offer-num { font-size: var(--gt-fs-3xl); font-weight: 800; letter-spacing: -.02em; color: var(--gt-ink); line-height: 1; margin-top: 6px; }
.gt-offer-num em { font-style: normal; color: var(--gt-accent-deep); }
.gt-offer-card h3 { font-size: var(--gt-fs-lg); }
.gt-offer-card p { color: var(--gt-muted); font-size: var(--gt-fs-md); margin: 0; }
.gt-offer-stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gt-nudge { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--gt-s5); padding: 14px 16px; border-radius: var(--gt-r-md); background: var(--gt-accent-soft); border: 1px solid var(--gt-accent-line); color: var(--gt-accent-ink); font-size: var(--gt-fs-md); }
.gt-nudge i { color: var(--gt-accent-deep); margin-top: 3px; }
.gt-trust-row { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--gt-fs-sm); color: var(--gt-on-dark-2); }
.gt-trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.gt-trust-row i { color: var(--gt-accent-on-dark, var(--gt-accent)); }
.gt-phone-banner { text-align: center; }
.gt-phone-banner .gt-section-head { margin-bottom: var(--gt-s5); }
.gt-phone-big { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; color: var(--gt-ink) !important; letter-spacing: -.01em; }
.gt-phone-big i { display: inline-grid; place-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--gt-accent); color: var(--gt-accent-ink); font-size: 20px; }
.gt-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none; gap: 10px; padding: 10px var(--gt-gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-top: 1px solid var(--gt-line); }
.gt-sticky-cta .gt-btn { flex: 1 1 0; }
@media (max-width: 767px) { .gt-sticky-cta { display: flex; } body.gt-site:has(.gt-sticky-cta) { padding-bottom: 72px; } }
@media (max-width: 991px) { .gt-offers { grid-template-columns: 1fr; } }
/* ------------------------------------------------------------------ */
/* 9. Map selector modal (opened by the booking script) */
/* ------------------------------------------------------------------ */
.map-selector-modal { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(8, 10, 14, .6); backdrop-filter: blur(3px); padding: 16px; }
.map-selector-modal.is-open, .map-selector-modal[style*="display: block"], .map-selector-modal[style*="display:block"], .map-selector-modal[style*="display: flex"] { display: grid !important; place-items: center; }
.map-selector-content { width: min(760px, 100%); max-height: calc(100vh - 32px); display: grid; grid-template-rows: auto 1fr auto; background: var(--gt-bg); border-radius: var(--gt-r-lg); overflow: hidden; box-shadow: var(--gt-sh-3); }
.map-selector-header { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--gt-line); }
.map-selector-close { order: 2; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--gt-line); border-radius: var(--gt-r-sm); background: var(--gt-bg); font-size: 22px; line-height: 1; cursor: pointer; color: var(--gt-text); }
.map-search-input { flex: 1 1 auto; min-height: 44px; padding: 0 14px; border: 1px solid var(--gt-line-2); border-radius: var(--gt-r-md); font: inherit; font-size: var(--gt-fs-md); }
.map-search-input:focus { outline: none; border-color: var(--gt-ink); box-shadow: var(--gt-focus); }
.map-selector-body { position: relative; min-height: min(60vh, 460px); background: var(--gt-bg-3); }
#mapSelectorCanvas { position: absolute; inset: 0; }
/* The centre pin, Uber-style: the pin's tip sits on the point being read and
a separate shadow marks that point on the ground. While the map is moving
the pin lifts and the shadow shrinks under it, so a drag reads as "picking
this up and putting it down" rather than as the map twitching. The two are
positioned from the same origin - the centre of the viewport - so the tip
and the shadow cannot drift apart. */
.map-marker-center { position: absolute; left: 50%; top: 50%; width: 0; height: 0; color: var(--gt-danger); pointer-events: none; z-index: 2; }
/* Sized here, not by the svg's attributes: the site-wide
`.gt-site :where(img, svg, video) { max-width: 100%; height: auto }` capped
it to 100% of this zero-width box, so the pin drew at 0 x 0 (1 Oct 2026). */
.map-marker-pin { position: absolute; left: 50%; bottom: 0; width: 30px; height: 42px; max-width: none; transform: translate(-50%, 0); transition: transform .18s cubic-bezier(.2, .7, .3, 1); filter: drop-shadow(0 3px 4px rgba(8, 10, 14, .28)); }
.map-marker-shadow { position: absolute; left: 50%; top: 0; width: 14px; height: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(8, 10, 14, .32); transition: transform .18s cubic-bezier(.2, .7, .3, 1), opacity .18s linear; }
.map-marker-center.is-moving .map-marker-pin { transform: translate(-50%, -10px); }
.map-marker-center.is-moving .map-marker-shadow { transform: translate(-50%, -50%) scale(.55); opacity: .7; }
@media (prefers-reduced-motion: reduce) {
.map-marker-pin, .map-marker-shadow { transition: none; }
.map-marker-center.is-moving .map-marker-pin { transform: translate(-50%, 0); }
}
/* Reads as "working on it" rather than as the previous point's answer sitting
there while the map is somewhere else. */
/* The recent-places chips under an address field.
One row that scrolls inside the booking form (section 16, since 3 Oct
2026), never a wrap onto more lines. Hidden entirely when there is nothing
stored, so a first-time visitor sees the form they always saw. */
/* Below the field, and only while it is focused. Hidden by default and while
empty (no saved places), so no field carries a stray strip of chips; the
focused field's row opens under it. */
.gt-recent-row { display: none; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gt-recent-row.is-open:not(:empty) { display: flex; }
.gt-recent-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px; border: 1px solid var(--gt-line-2); border-radius: 999px; background: var(--gt-bg-2); color: var(--gt-text-2); font: inherit; font-size: var(--gt-fs-sm); line-height: 1.2; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-recent-chip > i { flex: 0 0 auto; font-size: 11px; color: var(--gt-muted); }
.gt-recent-chip:hover { border-color: var(--gt-ink); color: var(--gt-ink); }
.gt-recent-chip:focus-visible { outline: none; box-shadow: var(--gt-focus); }
.map-selector-address.is-locating { opacity: .6; }
.map-confirm-btn[disabled] { opacity: .5; cursor: default; }
.map-selector-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--gt-line); }
.map-selector-address { flex: 1 1 auto; min-width: 0; font-size: var(--gt-fs-sm); color: var(--gt-text-2); }
.map-confirm-btn { flex: 0 0 auto; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--gt-r-md); background: var(--gt-accent); color: var(--gt-accent-ink); font-weight: 700; cursor: pointer; }
@media (max-width: 599px) { .map-selector-footer { flex-direction: column; align-items: stretch; } }
/* "Use my current location" found only a network position (2 Oct 2026). */
.map-selector-note { margin: 0; padding: 8px 14px; border-top: 1px solid var(--gt-line); background: var(--gt-bg-2); font-size: var(--gt-fs-sm); color: var(--gt-text-2); }
.map-selector-note[hidden] { display: none; }
/* ------------------------------------------------------------------ */
/* 10. Sign-in and registration pages (standalone views) */
/* ------------------------------------------------------------------ */
.gt-auth-page .tj-banner-form { display: none !important; }
.gt-auth-page .tj-wrapper { background: var(--gt-bg-2); }
.gt-auth-page .tj-login, .gt-auth-page .tj-login-page { max-width: 560px; margin: 40px auto 72px; padding: 0 var(--gt-gutter); }
.gt-auth-page .tj-login > .container, .gt-auth-page .tj-login .container { width: 100%; max-width: none; padding: 0; }
.gt-auth-page .tj-login h2.text-center, .gt-auth-page .tj-login .section_title h2 { font-size: var(--gt-fs-2xl); margin-bottom: var(--gt-s5); }
.gt-auth-page .nav-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 var(--gt-s5); border: 0; border-radius: var(--gt-r-md); background: var(--gt-bg-3); }
.gt-auth-page .nav-tabs .nav-item { flex: 1 1 0; margin: 0; }
.gt-auth-page .nav-tabs .nav-link { display: flex; justify-content: center; min-height: 40px; align-items: center; border: 0 !important; border-radius: var(--gt-r-sm); color: var(--gt-muted); font-weight: 600; font-size: var(--gt-fs-sm) !important; }
.gt-auth-page .nav-tabs .nav-link.active, .gt-auth-page .nav-tabs .nav-item.active .nav-link { background: var(--gt-bg); color: var(--gt-ink); box-shadow: var(--gt-sh-1); }
.gt-auth-page .tab-pane > .col-md-12 > .row, .gt-auth-page .col-md-12[style*="F9F9F9"], .gt-auth-page .row[style*="F9F9F9"] { background: var(--gt-bg) !important; border: 1px solid var(--gt-line); border-radius: var(--gt-r-xl) !important; box-shadow: var(--gt-sh-2); margin: 0; padding: clamp(16px, 3vw, 28px); }
.gt-auth-page center { text-align: start; }
.gt-auth-page .m-auto { width: 100% !important; max-width: none !important; }
.gt-auth-page .login-frm, .gt-auth-page .reg-frm { max-width: none !important; padding: 0 !important; margin-top: 8px !important; }
.gt-auth-page .field-holder { position: relative; margin: 0 0 14px; }
.gt-auth-page .field-holder > span[class*="fa-"] { position: absolute; inset-inline-start: 14px; top: 15px; margin: 0 !important; color: var(--gt-faint); font-size: 14px; pointer-events: none; z-index: 2; }
.gt-auth-page .field-holder .form-control, .gt-auth-page .field-holder input[type="text"], .gt-auth-page .field-holder input[type="email"], .gt-auth-page .field-holder input[type="password"], .gt-auth-page .field-holder input[type="date"], .gt-auth-page .field-holder select {
width: 100%; min-height: 48px; padding: 0 14px 0 42px; border: 1px solid var(--gt-line-2) !important; border-radius: var(--gt-r-md) !important; background: var(--gt-bg); box-shadow: none !important; font-size: var(--gt-fs-md); margin: 0 !important; color: var(--gt-text);
}
[dir="rtl"] .gt-auth-page .field-holder .form-control { padding: 0 42px 0 14px; }
.gt-auth-page .field-holder > .row .form-control, .gt-auth-page .field-holder:not(:has(> span[class*="fa-"])) .form-control { padding-inline-start: 14px; }
.gt-auth-page .field-holder .form-control:focus { border-color: var(--gt-ink) !important; box-shadow: var(--gt-focus) !important; }
.gt-auth-page .field-holder .intl-tel-input { width: 100%; }
.gt-auth-page .field-holder .intl-tel-input .form-control { padding-inline-start: 52px; }
.gt-auth-page #show_hide_password { position: relative; }
.gt-auth-page .input-group-addon-password { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); }
.gt-auth-page .help-block { display: block; margin-top: 4px; font-size: var(--gt-fs-xs); color: var(--gt-danger); }
.gt-auth-page .reg-btn, .gt-auth-page .btn-new, .gt-auth-page .log-teal-btn, .gt-auth-page .btn.btn-dark, .gt-auth-page .btn-success {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 20px;
border: 0 !important; border-radius: var(--gt-r-md) !important; background: var(--gt-accent) !important; color: var(--gt-accent-ink) !important;
font-size: var(--gt-fs-md) !important; font-weight: 700 !important; cursor: pointer; margin-top: 6px; text-decoration: none !important; box-shadow: none !important;
}
.gt-auth-page .reg-btn:hover, .gt-auth-page .btn-new:hover { background: var(--gt-accent-line) !important; }
.gt-auth-page .otp-block { width: 44px !important; height: 52px !important; margin: 0 3px; border: 1px solid var(--gt-line-2) !important; border-radius: var(--gt-r-sm) !important; text-align: center; font-size: var(--gt-fs-xl); font-weight: 700; }
.gt-auth-page .otp-block:focus { outline: none; border-color: var(--gt-ink) !important; box-shadow: var(--gt-focus); }
.gt-auth-page .reg-cta, .gt-auth-page .cta-list { display: none; }
.gt-auth-page .radio-inline { margin-inline-end: 12px; }
.gt-auth-page .dropify-wrapper { border-radius: var(--gt-r-md); border: 1px dashed var(--gt-line-2); }
/* The two Bootstrap-only pages: register and register-driver */
.gt-auth-page #login-block { background: var(--gt-bg) !important; }
.gt-auth-page #login-block .form-control { min-height: 48px; border: 1px solid var(--gt-line-2); border-radius: var(--gt-r-md); font-size: var(--gt-fs-md); box-shadow: none; }
.gt-auth-page #login-block .form-control:focus { border-color: var(--gt-ink); box-shadow: var(--gt-focus); }
.gt-auth-page #login-block label { font-size: var(--gt-fs-sm); font-weight: 600; color: var(--gt-text-2); }
.gt-auth-page #login-block h2 { font-size: var(--gt-fs-2xl); }
.gt-auth-page #bg-block { border-radius: 0; }
/* Below 992px mainindex's style.css fixes #bg-block over the whole screen and gives #login-block
z-index 2, which does nothing on a static box: the photo covered the form and took every click
(measured 26 Oct 2026, task 184: elementFromPoint on Register Now was #bg-block). */
.gt-auth-page #login-block { position: relative; }
/* The auth views nest Bootstrap columns inside tab panes; on the system every
pane is the card, full width, one column. */
.gt-auth-page .tj-login .row { margin: 0; display: block; }
.gt-auth-page .tj-login [class*="col-"], .gt-auth-page .tj-login .tab-pane[class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; float: none; }
.gt-auth-page .tj-login .tab-content, .gt-auth-page .tj-login .tab-pane { width: 100%; }
.gt-auth-page .tj-login .tab-pane.fade:not(.active):not(.show) { display: none; }
.gt-auth-page .tj-login .w-lg-75, .gt-auth-page .tj-login .w-xl-50 { width: 100% !important; }
.gt-auth-page .tj-login input, .gt-auth-page .tj-login select { max-width: 100%; }
.gt-auth-page .tj-login a[href*="reset"], .gt-auth-page .tj-login .forgot { display: inline-block; margin: 4px 0 12px; font-size: var(--gt-fs-sm); font-weight: 600; }
/* ------------------------------------------------------------------ */
/* 11. Bootstrap leftovers inside the system's controls */
/* ------------------------------------------------------------------ */
/* The booking form's icons are Bootstrap `.input-group-text`, which brings its
own grey fill and border - inside a .gt-control that reads as a second box
around the icon. The icon is a mark, not a field: no fill, no border. */
.gt-site .gt-control > .input-group-text,
.gt-site .gt-control .gt-control-icon {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
min-width: 44px;
height: auto;
color: var(--gt-faint);
font-size: 15px;
}
.gt-site .gt-control > .input-group-text > i { line-height: 1; }
/* Google renders its own bordered, padded text box inside
. Its shadow root is styled by the booking script;
these are the host-side halves - no second border, no double height. */
.gt-site .gt-place gmp-place-autocomplete {
display: block; width: 100%; min-width: 0;
border: 0; background: transparent;
--gmpx-color-surface: transparent;
--gmpx-font-family-base: var(--gt-font);
--gmpx-font-family-headings: var(--gt-font);
}
/* intl-tel-input sits where a field goes, so it fills the control. */
.gt-site .gt-control .intl-tel-input,
.gt-site .gt-control .iti { flex: 1 1 0%; min-width: 0; width: 1%; }
.gt-site .gt-control .intl-tel-input .flag-container { border: 0; }
.gt-site .gt-control .intl-tel-input .selected-flag { border-radius: var(--gt-r-md) 0 0 var(--gt-r-md); background: transparent; padding-inline-start: 14px; }
.gt-site .gt-control .intl-tel-input .selected-flag:hover { background: var(--gt-bg-2); }
.gt-site .gt-control .intl-tel-input .country-list { border: 1px solid var(--gt-line); border-radius: var(--gt-r-md); box-shadow: var(--gt-sh-3); margin-top: 6px; }
/* ------------------------------------------------------------------ */
/* 12. What the site audit found */
/* ------------------------------------------------------------------ */
/* Stars are a rating, not decoration - they have to be readable. */
/* 4.75:1 on white. The lighter amber this was reads at 3.63:1. */
.gt-stars { color: #976b00; }
.gt-on-dark .gt-stars, .gt-hero .gt-stars { color: #f5b301; }
/* A footer link 17px tall is not a tap target. Everything a thumb has to
find gets 44px on a phone. */
@media (max-width: 767px) {
.gt-footer-links a, .gt-footer-contact a, .gt-sheet-langs a, .gt-footer-social a {
display: inline-flex; align-items: center; min-height: 44px;
}
.gt-footer-links { gap: 0; }
.gt-nav-sub li a, .gt-navmenu-link { min-height: 44px; display: flex; align-items: center; }
.gt-page { min-height: 44px; min-width: 44px; }
.gt-review-agg, .gt-hero-rating { min-height: 44px; }
}
/* Bootstrap's .row carries -15px side margins; inside the contact card that
pushed its rows past the edge of the page. */
.gt-contact .row { margin-inline: 0; }
.gt-contact .data-box .row { flex-wrap: wrap; }
/* The standalone auth pages put the footer inside the theme's fixed-width
wrappers, which the footer grid then overflowed. */
.gt-auth-page .gt-footer .gt-container { max-width: 100%; }
.gt-auth-page .gt-footer-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
/* The debug toolbar is a development tool; it is not part of the site. */
.phpdebugbar { display: none !important; }
/* ------------------------------------------------------------------ */
/* The Reka Select that stands in front of a native