/* GateARide without Elementor: what the Elementor Kit and containers gave every page, our page building blocks, and the footer */

/* --- the Kit: global colors and fonts the page HTML reads, page background, link color --- */
.gar-site {
    --e-global-color-primary: #FFFFFF;
    --e-global-color-secondary: #4BD9E0;
    --e-global-color-text: #FFFFFF;
    --e-global-color-accent: #4BD9E0;
    --e-global-color-9629021: #051A28;
    --e-global-typography-primary-font-family: "Barlow Condensed";
    --e-global-typography-primary-font-weight: 600;
    --e-global-typography-text-font-family: "Roboto Flex";
    --e-global-typography-text-font-weight: 400;
    --gar-content-width: 1140px;
    --gar-pad: 10px;
    background-color: #051A28;
}
.gar-site a { color: var(--e-global-color-secondary); }
html { scroll-behavior: smooth; }
@media (max-width: 1024px) { .gar-site { --gar-content-width: 1024px; } }
@media (max-width: 767px) { .gar-site { --gar-content-width: 767px; } }

/* --- what WooCommerce's stylesheet gave every page and our pages no longer load: its screen-reader text sits fully
   outside the flow (the cart live region at the end of the page otherwise added 1px under the footer) --- */
.gar-site .screen-reader-text:not(:focus) { margin: -1px; clip-path: inset(50%); }

/* --- header: the Elementor header container (10px padding) took 20px of the page flow under the fixed header; pages were laid out with it --- */
.gar-head-flow { height: 20px; }

/* --- page building blocks (what an Elementor container and widget were) --- */
.gar-main *, .gar-main *::before, .gar-main *::after { box-sizing: border-box; }
.gar-main img { border: none; border-radius: 0; box-shadow: none; height: auto; max-width: 100%; }
/* Elementor's own resets inside a page, at the same selector strength: the page HTML was tuned with them in place
   (figure margins were 0 in every widget except the text block, even where a page asked for more) */
.gar-main a { box-shadow: none; text-decoration: none; }
.gar-main hr { background-color: transparent; margin: 0; }
.gar-main .gar-w:not(.gar-w-text):not(.gar-w-post) figure { margin: 0; }
.gar-main embed, .gar-main iframe, .gar-main object, .gar-main video { border: none; line-height: 1; margin: 0; max-width: 100%; width: 100%; }
.gar-con { display: flex; flex-direction: column; gap: var(--gar-gap, 20px); padding: var(--gar-pad); position: relative; }
.gar-con-boxed { max-width: calc(var(--gar-content-width) + 2 * var(--gar-pad)); margin-inline: auto; width: 100%; }
.gar-w { position: relative; }
.gar-text { font-family: var(--e-global-typography-text-font-family), sans-serif; font-weight: var(--e-global-typography-text-font-weight); color: var(--e-global-color-text); }
.gar-heading-title { margin: 0; padding: 0; line-height: 1; font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: var(--e-global-typography-primary-font-weight); color: var(--e-global-color-primary); }

/* --- footer --- */
.gar-foot { position: relative; background: var(--e-global-color-9629021); color: var(--e-global-color-primary); }
.gar-foot-shape { position: absolute; top: -1px; inset-inline-start: -1px; width: calc(100% + 1.3px); height: 10px; fill: var(--e-global-color-secondary); }
.gar-foot-row { display: flex; flex-wrap: wrap; justify-content: space-around; max-width: calc(var(--gar-content-width) + 2 * var(--gar-pad)); margin-inline: auto; padding: var(--gar-pad); }
.gar-foot-col { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 33.3333%; padding: 10px; }
.gar-foot-logo img { width: 60%; height: auto; }
.gar-foot-legal { gap: 3px; font: 600 18px/1 var(--e-global-typography-primary-font-family), sans-serif; }
.gar-foot-title { margin: 0 0 8px; font-size: 26px; line-height: 1; font-weight: 600; }
/* each link is a 24px touch target (PageSpeed); padding and gap add up to the 9px the text had between lines */
.gar-foot-legal a { padding-block: 3px; }
.gar-foot-legal { padding-bottom: 7px; }   /* the last link's 3px padding comes out of the column's 10px, so the footer keeps its height */
.gar-site .gar-foot-legal a { color: var(--e-global-color-primary); text-decoration: none; }
.gar-site .gar-foot-legal a:hover, .gar-site .gar-foot-legal a:focus-visible { color: var(--e-global-color-secondary); }
.gar-foot-legal a:focus-visible { outline: 2px solid var(--e-global-color-secondary); outline-offset: 3px; }
.gar-foot-company { width: 33.3333%; padding: 10px; margin: 0; text-align: center; font: 400 16px/1.5 var(--e-global-typography-text-font-family), sans-serif; }
.gar-foot-company::after { content: ""; display: block; height: 14.4px; }
.gar-foot-company span { font-size: .85em; opacity: .8; }
@media (max-width: 1024px) {
    .gar-foot-company { width: 712px; max-width: 100%; }
}
@media (max-width: 767px) {
    .gar-foot-logo { width: 150px; }
    .gar-foot-legal { width: 130px; font-size: 14px; gap: 0; }
    .gar-foot-legal a { padding-block: 5px; }   /* 14px text needs 10px to reach 24: one pixel more per line than before */
    .gar-foot-legal { padding-bottom: 5px; }
    .gar-foot-title { font-size: 17px; margin-bottom: 9px; }
    .gar-foot-company { width: 100%; font-size: 14px; }
}

/* language switcher (includes/i18n.php, templates/lang-switcher.php): shown only to visitors who can see the languages */
.gar-lang { position: relative; }
.cyber-header button.gar-lang-btn,
.cyber-header button.gar-lang-btn:hover,
.cyber-header button.gar-lang-btn:focus,
.cyber-header button.gar-lang-btn:active {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px;
    background: transparent; color: #fff; box-shadow: none; cursor: pointer;
    font: 600 14px 'Segoe UI', sans-serif; letter-spacing: 0.3px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.cyber-header button.gar-lang-btn:hover,
.cyber-header .gar-lang.open button.gar-lang-btn { color: #4bd9e0; border-color: #4bd9e0; }
.cyber-header button.gar-lang-btn:focus-visible { outline: 2px solid #4bd9e0; outline-offset: 3px; }
.gar-lang-btn svg { transition: transform 0.25s ease; }
.gar-lang.open .gar-lang-btn svg { transform: rotate(180deg); }
.gar-lang-flag { font-size: 1.1em; line-height: 1; }
.gar-lang-flag img.emoji { width: 1.1em; height: 1.1em; margin: 0; vertical-align: -0.15em; }
.gar-lang-menu {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 2;
    min-width: 190px; margin: 0; padding: 8px; list-style: none;
    background: rgba(5, 26, 40, 0.97); border: 1px solid rgba(75, 217, 224, 0.18); border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.gar-lang.open .gar-lang-menu { opacity: 1; visibility: visible; transform: none; }
.gar-lang-menu a {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
    color: #fff; text-decoration: none; font: 600 14px 'Segoe UI', sans-serif; white-space: nowrap;
}
.gar-lang-menu a:hover { background: rgba(75, 217, 224, 0.1); color: #4bd9e0; }
.gar-lang-menu a:focus-visible { outline: 2px solid #4bd9e0; outline-offset: -2px; }
.gar-lang-menu a[aria-current] { color: #4bd9e0; }
@media (max-width: 1279px) { .gar-lang { display: none; } }   /* the compact header (header.php): languages are in the drawer */
@media (prefers-reduced-motion: reduce) { .gar-lang-menu, .gar-lang-btn svg { transition: none; } }

/* right-to-left pages: arrows point the way the line reads */
[dir="rtl"] .header-cta svg { transform: scaleX(-1); }

/* phone side drawer (templates/drawer.php, assets/drawer.js): opens from where the line starts, the left in
   left-to-right languages and the right in Hebrew (Daniel, 18.10.2026) */
.gar-drawer-backdrop {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(2, 10, 18, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity 0.3s ease;
}
.gar-drawer-backdrop.open { opacity: 1; }
.gar-drawer {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 10001; box-sizing: border-box;
    width: min(86vw, 360px); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
    background: #051A28; border-inline-end: 1px solid rgba(75, 217, 224, 0.18); box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    color: #fff; font-family: 'Segoe UI', sans-serif;
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.32s;
}
[dir="rtl"] .gar-drawer { transform: translateX(100%); }
.gar-drawer.open { transform: none; visibility: visible; }
.gar-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.gar-drawer-logo img { display: block; height: 30px; width: auto; }
.gar-drawer button.gar-drawer-close,
.gar-drawer button.gar-drawer-close:hover,
.gar-drawer button.gar-drawer-close:focus,
.gar-drawer button.gar-drawer-close:active {
    display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background: transparent; color: #fff; box-shadow: none; cursor: pointer;
}
.gar-drawer button.gar-drawer-close:hover { color: #4bd9e0; border-color: #4bd9e0; }
.gar-drawer-label { margin: 18px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #a9b6c0; }
.gar-drawer-nav a {
    display: flex; align-items: center; gap: 12px; margin-inline: -10px; padding: 10px;
    border-radius: 10px; color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; line-height: 1.3;
}
.gar-drawer-nav a:hover { background: rgba(75, 217, 224, 0.08); color: #4bd9e0; }
.gar-drawer-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; height: 36px; border-radius: 10px; background: rgba(75, 217, 224, 0.1); color: #4bd9e0; }
.gar-drawer-txt { display: flex; flex-direction: column; min-width: 0; }
.gar-drawer-txt small { margin-top: 2px; font-size: 12.5px; font-weight: 400; color: #a9b6c0; }
.gar-drawer-foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 20px; }
/* .gar-site a colours every link teal: the button's own colour needs a stronger selector */
.gar-drawer a.gar-drawer-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px; border-radius: 50px;
    background: #4bd9e0; color: #051A28; font-size: 16px; font-weight: 700; text-decoration: none;
}
.gar-drawer a.gar-drawer-cta:hover { box-shadow: 0 0 20px rgba(75, 217, 224, 0.4); }
[dir="rtl"] .gar-drawer-cta svg, [dir="rtl"] .gar-drawer-ico svg { transform: scaleX(-1); }
.gar-drawer button.gar-drawer-lang-btn,
.gar-drawer button.gar-drawer-lang-btn:hover,
.gar-drawer button.gar-drawer-lang-btn:focus,
.gar-drawer button.gar-drawer-lang-btn:active {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: transparent; color: #fff; box-shadow: none; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 600;
}
.gar-drawer button.gar-drawer-lang-btn:hover, .gar-drawer .gar-drawer-lang.open button.gar-drawer-lang-btn { border-color: #4bd9e0; }
.gar-drawer-lang-btn > svg:first-child { color: #4bd9e0; flex: 0 0 auto; }
.gar-drawer-lang-now { display: flex; align-items: center; gap: 8px; flex: 1; text-align: start; }
.gar-drawer-lang-btn > svg:last-child { transition: transform 0.25s ease; }
.gar-drawer-lang.open .gar-drawer-lang-btn > svg:last-child { transform: rotate(180deg); }
.gar-drawer > .gar-drawer-lang { position: relative; z-index: 2; margin-top: 14px; }
/* floats over the menu below it, like a dropdown, instead of pushing it down (Daniel, 18.10.2026) */
.gar-drawer-langs {
    display: none; position: absolute; top: calc(100% + 6px); inset-inline: 0; margin: 0; padding: 6px; list-style: none;
    background: #0A2536; border: 1px solid rgba(75, 217, 224, 0.25); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.gar-drawer-lang.open .gar-drawer-langs { display: block; }
.gar-drawer-langs a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; }
.gar-drawer-langs a:hover { background: rgba(75, 217, 224, 0.1); color: #4bd9e0; }
.gar-drawer-langs a[aria-current] { color: #4bd9e0; }
.gar-lang-check { margin-inline-start: auto; }
.gar-drawer a:focus-visible, .gar-drawer button:focus-visible { outline: 2px solid #4bd9e0; outline-offset: 2px; }
html.gar-drawer-lock, body.gar-drawer-lock { overflow: hidden; overscroll-behavior: none; }
body.gar-drawer-lock :is(.vn-cookie-wrapper, #wa-widget-container, #gar-chat, .gar-lang-offer) { visibility: hidden; }   /* back when the drawer closes */
@media (min-width: 1280px) { .gar-drawer, .gar-drawer-backdrop { display: none; } }
@media (prefers-reduced-motion: reduce) { .gar-drawer, .gar-drawer-backdrop, .gar-drawer-lang-btn > svg:last-child { transition: none; } }

/* translated legal pages: the English version applies (includes/i18n.php) */
.gar-legal-note { margin: 0 0 16px; padding: 10px 14px; border-inline-start: 3px solid #4bd9e0; border-radius: 6px; background: rgba(75, 217, 224, 0.08); font-size: 0.95em; }

/* the device's language (assets/i18n.js): a teal dot on the buttons that open the language menus, and the language
   itself first in them, labelled in its own words */
.gar-lang-hint { position: relative; }
.gar-lang-hint::after {
    content: ""; position: absolute; top: 1px; inset-inline-end: 1px; width: 10px; height: 10px; border-radius: 50%;
    background: #4bd9e0; box-shadow: 0 0 0 2px #051A28;
}
.gar-lang-menu a.is-device, .gar-drawer-langs a.is-device { flex-wrap: wrap; background: rgba(75, 217, 224, 0.12); color: #4bd9e0; }
.gar-lang-device { margin-inline-start: auto; font-size: 12px; font-weight: 500; color: #a9b6c0; }
.gar-lang-menu li:first-child:has(a.is-device), .gar-drawer-langs li:first-child:has(a.is-device) {
    margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* cookies: one slim line along the bottom instead of a popup (Daniel, 18.10.2026). Same element and .show switch as before,
   so the support chat still waits for it; the chat button sits above it while it shows */
#vn-cookie-popup.vn-cookie-line {
    left: 0; right: 0; inset-inline-start: 0; bottom: 0; width: auto; max-width: none; margin: 0;
    display: flex; align-items: center; gap: 12px; border-radius: 0; border-width: 1px 0 0;
    padding-block: 8px; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(5, 26, 40, 0.97); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
}
#vn-cookie-popup.vn-cookie-line .vn-cookie-text { flex: 1; margin: 0; font-size: 13px; line-height: 1.4; }
#vn-cookie-popup.vn-cookie-line .vn-cookie-btn.btn-accept {
    width: auto; flex: 0 0 auto; padding: 8px 16px; border: 1px solid #4bd9e0; border-radius: 50px;
    background: transparent; color: #4bd9e0; font-size: 13px; font-weight: 700;
}
#vn-cookie-popup.vn-cookie-line .vn-cookie-btn.btn-accept:hover { background: #4bd9e0; color: #051A28; }
body:has(#vn-cookie-popup.show) #gar-chat:not(.is-open) { bottom: 72px; transition: bottom 0.3s ease; }

/* Korean: break lines between words, never inside one (how Korean sites set text). lang="ko" exactly: never Chinese or Japanese */
html[lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }

/* the one-time offer of the device's language, under the header (assets/i18n.js) */
.gar-lang-offer {
    position: fixed; left: 0; right: 0; z-index: 9990; display: flex; align-items: center; gap: 10px;
    padding-block: 8px; padding-inline: 16px 6px; background: rgba(5, 26, 40, 0.97);
    border-bottom: 1px solid rgba(75, 217, 224, 0.25); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    color: #E8EEF2; font-size: 13px; line-height: 1.4; opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.gar-lang-offer.is-on { opacity: 1; transform: none; }
.gar-lang-offer p { flex: 1; margin: 0; }
.gar-lang-offer[lang="he"] { font-family: 'Noto Sans Hebrew', 'Roboto Flex', sans-serif; }
.gar-site a.gar-lang-offer-go, a.gar-lang-offer-go {
    flex: 0 0 auto; padding: 7px 14px; border-radius: 50px; background: #4bd9e0; color: #051A28; font-weight: 700; text-decoration: none; white-space: nowrap;
}
a.gar-lang-offer-go:hover { background: #ffffff; color: #051A28; }
.gar-lang-offer button.gar-lang-offer-x {   /* the theme styles every button: none of it here */
    flex: 0 0 auto; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; box-shadow: none; outline-offset: 2px;
    background: transparent; color: #a9b6c0; font-size: 22px; line-height: 1; cursor: pointer;
}
.gar-lang-offer button.gar-lang-offer-x:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }

/* Japanese (ja/RESEARCH.md: W3C JLReq, Digital Agency): the device's Japanese font, taller lines, strict line breaking
   between characters (never keep-all), no fake italics, no tracking on uppercase labels */
html[lang="ja"] body { line-height: 1.8; letter-spacing: 0; line-break: strict; word-break: normal; overflow-wrap: anywhere; text-autospace: normal; font-synthesis: weight; }
html[lang="ja"] :is(h1, h2, h3) { line-height: 1.4; word-break: auto-phrase; }
html[lang="ja"] :is(em, i, cite) { font-style: normal; }

/* Traditional Chinese (zh-tw: html lang zh-Hant-TW): taller lines, strict line breaking between characters (word-break normal,
   never the Korean keep-all), long Latin strings may break, no fake italics (bold may still be synthesised) */
html[lang^="zh"] body { line-height: 1.75; line-break: strict; word-break: normal; overflow-wrap: anywhere; text-autospace: normal; font-synthesis: weight; }
html[lang^="zh"] :is(h1, h2, h3) { line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }   /* headings break at punctuation (接 / 送 split a word), anywhere only if a line would overflow */
html[lang^="zh"] :is(em, i, cite) { font-style: normal; }