/* ============================================================
   Journee — Glassmorphism theme override (A2 · שקוף לגמרי)
   Loaded after each page's inline styles; equal-specificity
   rules here intentionally win the cascade.
   ============================================================ */

/* ---------- Design tokens (shared across every page) ---------- */
:root {
    --primary: rgba(255,255,255,0.92);
    --primary-2: rgba(255,255,255,0.65);
    --accent: rgba(255,255,255,0.85);
    --bg: #14171c;
    --bg-2: rgba(16,20,26,0.92);          /* modals / popups need real separation */
    --sidebar-bg: transparent;
    --card: transparent;
    --stroke: rgba(255,255,255,0.30);
    --hairline: rgba(255,255,255,0.16);
    --card2: transparent;                 /* trip.html surfaces */
    --line: rgba(255,255,255,0.30);                     /* trip.html borders  */
    --accent2: rgba(255,255,255,0.90);    /* trip.html amber text → white */
    --text: #ffffff;
    --muted: rgba(255,255,255,0.72);
    --shadow: 0 20px 60px rgba(0,0,0,0.35);
    --glow: rgba(255,255,255,0.1);
    --gradient-1: #ffffff;
    --gradient-2: linear-gradient(135deg, rgba(10,12,16,0.7) 0%, rgba(20,24,30,0.7) 100%);
}

body {
    background: #14171c;
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}

/* Full-bleed photo backdrop + scrim; the solid color under the photo is
   the fallback if the image fails to load.
   Default = dark mode (city at night); body[data-theme="light"] switches
   to the sunset wing. js/theme-toggle.js persists the choice. */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;   /* behind ALL content — legal pages have no stacking context */
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(2,3,6,0.60) 0%, rgba(2,3,6,0.85) 100%),
        url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1920&q=80') center / cover no-repeat,
        #04060a;
    opacity: 1;
}

body[data-theme="light"]::before {
    background:
        linear-gradient(180deg, rgba(12,14,18,0.38) 0%, rgba(12,14,18,0.62) 100%),
        url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=1920&q=80') center / cover no-repeat,
        radial-gradient(circle at 20% 15%, #f2994a 0%, transparent 45%),
        radial-gradient(circle at 75% 60%, #1c3a5e 0%, transparent 60%),
        linear-gradient(170deg, #2c3e50 0%, #1a2a3a 55%, #0f1c2e 100%);
}

/* Dark/Light toggle (js/theme-toggle.js adds the button on index) */
.theme-toggle-btn {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 500;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.30);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,0.20); }

/* ---------- Sidebar (identical markup on every page) ---------- */
.sidebar {
    background: transparent;
    
    border-left: 1px solid var(--stroke);
    box-shadow: none;
}

/* Expand less on hover — 240px covered the content; 180px is enough
   for the longest label and stays clear of the page. */
.sidebar:hover { width: 180px; }

.sidebar-header { background: transparent; }
.sidebar-header::after { background: rgba(255,255,255,0.22); }

.logo-icon {
    background: #ffffff;
    color: #14171c;
    box-shadow: 0 6px 20px rgba(255,255,255,0.25);
}

.nav-link { color: rgba(255,255,255,0.70); }
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.09); }
.nav-link.active { color: #fff; background: transparent; }
.nav-link.active::before { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.7); }
.sidebar-divider { background: rgba(255,255,255,0.16); }
.sidebar-footer { border-top-color: rgba(255,255,255,0.16); }
.user-section:hover { background: rgba(255,255,255,0.08); }
.user-avatar { background: #ffffff; color: #14171c; }

/* Sidebar footer / user section — baseline styles so pages that never
   defined them (blog) render like the main pages; identical values, so
   it's a no-op where they already exist. */
.sidebar-footer { margin-top: auto; padding: 20px 14px; }
.user-section {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
}
.user-avatar {
    min-width: 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
}
.user-info { margin-right: 12px; opacity: 0; transition: opacity 0.3s ease; }
.sidebar:hover .user-info { opacity: 1; }
.user-name { font-size: 0.9rem; font-weight: 600; display: block; color: var(--text); }
.user-role { font-size: 0.75rem; color: var(--muted); }

.mobile-toggle {
    background: transparent;
    
    border: 1px solid var(--stroke);
}
.mobile-toggle:hover { background: rgba(255,255,255,0.14); }

/* Narrow screens: the open sidebar floats OVER the page, so a fully
   transparent panel is unreadable — give it a real glass fill and show
   the labels (there is no hover on touch). */
@media (max-width: 768px) {
    .sidebar {
        background: rgba(6,9,14,0.94);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
    }
    /* higher specificity than the hide-until-hover rules further down */
    .sidebar .nav-link .nav-text,
    .sidebar .logo .logo-text,
    .sidebar .user-section .user-info { opacity: 1; }
}

.profile-popup {
    background: var(--bg-2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--stroke);
}
.popup-item:hover { background: rgba(255,255,255,0.10); }

/* ---------- Generic glass surfaces ---------- */
.content-card, .stat-card, .cta-footer, .contact-box, .footer-note,
.panel, .msg, .timeline-card, .place-card, .trip-stat-chip,
.add-trip-card, .form-container, .summary-card, .btn-save {
    background: transparent;
    
    border: 1px solid rgba(255,255,255,0.30);
}

.content-card:hover, .add-trip-card:hover { background: rgba(255,255,255,0.06); }

/* User-side demo bubble on index must stay solid white — declared after
   .msg above so it wins the same-specificity cascade for .msg.me */
.me { background: #ffffff; color: #14171c; }

/* Assistant page ---------------------------------------------- */
.tips-box, .chat-wrapper {
    background-image: none;
    background: transparent;
    
    border: 1px solid var(--stroke);
    border-radius: 28px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}
.tips-box:hover, .chat-wrapper:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28); }

.tips-header {
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.20);
}

.tip-card, .agent-card {
    background: transparent;
    
    border: 1px solid rgba(255,255,255,0.30);
}
.tip-card::before { background: none; }
.tip-card:hover {
    border-color: rgba(255,255,255,0.55);
    box-shadow: 0 12px 34px rgba(0,0,0,0.26);
}
.tip-card p { color: rgba(255,255,255,0.80); }
.agent-card { border-color: rgba(255,255,255,0.38); }

.chat-message.user { background: #ffffff; color: #14171c; box-shadow: 0 8px 24px rgba(0,0,0,0.28); }
.chat-message.assistant {
    /* Full glass, matching the wx/save/book cards - the streamed reply now sits
       on the same material as the cards it contains, instead of a bare outline. */
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 18px;
    border-bottom-right-radius: 4px;   /* keep the bubble tail */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.typing-indicator span { background: #ffffff; }

.input-wrapper {
    background: transparent;
    
    border-top: 1px solid rgba(255,255,255,0.20);
}
#search-input {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 12px 20px;
}
#search-input:focus { background: rgba(255,255,255,0.06); box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
#search-input::placeholder { color: rgba(255,255,255,0.60); }
.form-button { background: #ffffff; color: #14171c; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.clear-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.78);
    border-radius: 999px;
}
.clear-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.context-badge { background: transparent; border: 1px solid var(--stroke); color: #fff; }

.tips-content::-webkit-scrollbar-track, #chat-container::-webkit-scrollbar-track,
.updates-panel::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); }
.tips-content::-webkit-scrollbar-thumb, #chat-container::-webkit-scrollbar-thumb,
.updates-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); }

/* Index page --------------------------------------------------- */
.hero {
    background-image: none;
    background: transparent;
    
    border: 1px solid var(--stroke);
}
.logos-wrap::before, .logos-wrap::after { background: none; }
.panel-btn:not(.primary) { background: rgba(10,12,16,0.45); }
.pricing-card:hover { background: rgba(255,255,255,0.05); }
.pricing-card.featured .pricing-cta { background: #ffffff; }

/* Login modal: keeps a real fill even in the clearest variant —
   a floating dialog needs separation from the busy page behind it. */
.login-card {
    background-image: none;
    background: rgba(12,16,22,0.68);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid var(--stroke);
}
.submit-btn { background: #ffffff; }

/* The login dialog is the .login-card itself — strip the generic modal
   frame from its wrapper so it doesn't draw a second rectangle. */
.modal-content:has(.login-card) {
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* My-trips page ------------------------------------------------ */
.modal-content, .choice-modal-content, .modal-box {
    background: var(--bg-2);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--stroke);
}
.choice-btn { background: transparent; border: 1px solid rgba(255,255,255,0.30); }
.choice-btn:hover { background: rgba(255,255,255,0.14); }
.manual-form input, .manual-form textarea {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.22);
}
.manual-form input:focus, .manual-form textarea:focus { background: rgba(0,0,0,0.45); }
/* .trip-hero / .trip-card / .article-header keep their own imagery — that's content */

/* Refunds page (was pink; tokens above already re-theme it) ----- */
.form-group input, .form-group select {
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
}
.form-group input:focus, .form-group select:focus { background: rgba(0,0,0,0.42); }
.calculation-result { color: #14171c; }
.progress-step { background: rgba(255,255,255,0.14); }
.progress-line { background: rgba(255,255,255,0.14); }
.lang-toggle { background: transparent; border: 1px solid var(--stroke); }

/* Trip page (trip.html) ----------------------------------------- */
/* Most surfaces track --card/--card2/--line, remapped above; only the
   hardcoded amber accents need neutralizing to the monochrome scheme. */
.topbar {
    background: rgba(4,6,10,0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--stroke);
}
.act-card.hotel {
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.05);
}
.act-tip {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.25);
}
.save-bar {
    background: rgba(8,12,18,0.88);
    border: 1px solid var(--stroke);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.save-bar .btn-save {
    background: #ffffff;
    color: #14171c;
    border: none;
    text-shadow: none;
}

/* Blog pages ---------------------------------------------------- */
/* Layout: the blog pages' bare <main> hugs the sidebar (margin-right:70px
   + margin-left:auto). Center it in the viewport instead, falling back to
   a fixed sidebar clearance on narrow screens. */
main:not(.main-content) { margin-left: auto; margin-right: auto; }
main:has(.grid) { margin-right: max(94px, calc((100% - 1180px) / 2)); margin-left: auto; }
main:has(article) { margin-right: max(94px, calc((100% - 820px) / 2)); margin-left: auto; }

/* Collapsed sidebar must show icons only — the blog pages never hid the
   labels, so letters peeked out of the 70px rail. Same behavior as the
   rest of the site: reveal text on hover. */
.sidebar .nav-text, .sidebar .logo-text {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sidebar:hover .nav-text, .sidebar:hover .logo-text { opacity: 1; }

/* Blog header: plain centered title, no framed panel */
main:not(.main-content) .hero {
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* .card / .cta / .tip track the --card token, so they inherit the glass
   treatment automatically; only the purple accent needs neutralizing. */
.card { border-color: var(--stroke); }
.cta .btn {
    background: #ffffff;
    color: #14171c;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.cta .btn:hover { box-shadow: 0 10px 30px rgba(255,255,255,0.35); }
.tip { border-right-color: rgba(255,255,255,0.55); }
.read-more { background: #ffffff; -webkit-background-clip: text; background-clip: text; }

/* Legal pages (privacy / terms were plain white docs) ----------- */
.container {
    background: transparent;
    
    border: 1px solid var(--stroke);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}
.container h1, .container h2, .container h3, .container strong { color: #ffffff; }
.container, .container p, .container li, .container ul, .container td {
    color: rgba(255,255,255,0.88);
}
.container .meta { color: rgba(255,255,255,0.60); }
.container th { background: rgba(255,255,255,0.10); color: #fff; }
.container th, .container td { border-color: rgba(255,255,255,0.22); }
.container hr { border-color: rgba(255,255,255,0.20); }
.container a.back { color: #fff; }

/* A2: global text shadow for readability over the raw photo,
   reset wherever dark text sits on a solid white surface. */
.btn.primary, .btn-primary, .cta-button, .submit-btn, .form-button,
.chat-message.user, .cta-box a, .cta-open a, .section-pillbar a.highlight,
.pricing-card.featured .pricing-cta, .manual-form .btn.btn-primary,
.place-card-index, .calculation-result, .logo-icon, .user-avatar,
.panel-btn.primary, .me, .cta .btn {
    text-shadow: none;
}

/* A2 · my-trips: stat numbers float free — no box around them */
.stat-card {
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* A2 · my-trips: slightly softer corners on trip cards (and the
   matching add-trip card so the grid stays coherent) */
.trip-card, .add-trip-card {
    border-radius: 14px;
}

/* ============================================================
   A2 · pre-paint dock state (no FOUC).
   The inline <head> snippet stamps .flyai-auth / .flyai-guest on <html>
   before first paint; these two rules hide the half that does not apply.
   Deliberately WITHOUT !important: the moment auth.js runs, its inline
   display wins and stays the single source of truth. If the snippet never
   runs, nothing here matches and the page behaves exactly as before.
   ============================================================ */
html.flyai-guest .auth-required { display: none; }
html.flyai-auth  .guest-only    { display: none; }

/* A2 · recommendations hero: the brand lockup was removed from the bar.
   The bar was space-between, so the remaining guest login link would jump
   to the start — pin it to the end where it already sits. */
.rec-bar { justify-content: flex-end; }

/* A2 · article-tips hero: the index rail is absolutely positioned, so the
   h1 is the header's only in-flow flex item and RTL flex-start pinned it
   right. Auto inline margins centre it; text-align covers the wrapped case. */
.article-header .article-title {
    margin-inline: auto;
    text-align: center;
}

/* ============================================================
   A2 · CTA buttons — no outline ring, a raised glow instead.
   The hard 1px border read as an ellipse drawn around the label;
   these now sit on their own light instead of inside a frame.
   Declared last so they win the same-specificity cascade.
   ============================================================ */

/* No pill, no ring, no fill — the label alone, lit from behind.
   The halo is a blurred ::before sitting under the text (isolation
   keeps z-index:-1 inside the button instead of behind the page). */
.pricing-cta,
.pricing-card.featured .pricing-cta,
.cta-band .btn,
.cta-band .btn.primary,
.cta .btn,
.cta-box a,
.section-pillbar a.highlight,
.rec-cta a,
.lux-btn-light,
.lux-btn-ghost {
    border: 0;
    background: none;
    background-color: transparent;
    box-shadow: none;
    color: #ffffff;
    position: relative;
    isolation: isolate;
    overflow: visible;          /* .btn clips its own children — the halo must not be cut */
    text-shadow: 0 0 22px rgba(255,255,255,0.40), 0 1px 10px rgba(0,0,0,0.60);
    transition: transform .2s ease, text-shadow .28s ease;
}

.pricing-cta::before,
.cta-band .btn::before,
.cta .btn::before,
.cta-box a::before,
.section-pillbar a.highlight::before,
.rec-cta a::before,
.lux-btn-light::before,
.lux-btn-ghost::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 82%;
    height: 130%;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
                rgba(255,255,255,0.30) 0%,
                rgba(255,255,255,0.12) 42%,
                rgba(255,255,255,0) 72%);
    filter: blur(13px);
    opacity: .8;
    transition: opacity .28s ease, filter .28s ease, width .28s ease;
}

/* The two primary actions glow harder, so hierarchy survives
   without any shape to carry it */
.pricing-card.featured .pricing-cta,
.cta-band .btn.primary,
.cta .btn,
.cta-box a,
.section-pillbar a.highlight,
.rec-cta a,
.lux-btn-light {
    font-weight: 700;
    text-shadow: 0 0 26px rgba(255,255,255,0.60), 0 1px 10px rgba(0,0,0,0.60);
}
.pricing-card.featured .pricing-cta::before,
.cta-band .btn.primary::before,
.cta .btn::before,
.cta-box a::before,
.section-pillbar a.highlight::before,
.rec-cta a::before,
.lux-btn-light::before {
    background: radial-gradient(ellipse at center,
                rgba(255,255,255,0.46) 0%,
                rgba(255,255,255,0.18) 42%,
                rgba(255,255,255,0) 72%);
    opacity: .92;
}

/* Every one of these had a :hover rule that re-applied a white fill —
   at higher specificity than the base rule above. Without repeating
   those exact selectors here, the pill snapped back on hover. */
.pricing-cta:hover,
.pricing-card.featured .pricing-cta:hover,
.cta-band .btn:hover,
.cta-band .btn.primary:hover,
.cta .btn:hover,
.cta-box a:hover,
.section-pillbar a.highlight:hover,
.rec-cta a:hover,
.lux-btn-light:hover,
.lux-btn-ghost:hover {
    background: none;
    background-color: transparent;
    color: #ffffff;
    transform: translateY(-1px);
    text-shadow: 0 0 30px rgba(255,255,255,0.70), 0 1px 10px rgba(0,0,0,0.60);
}
.pricing-cta:hover::before,
.cta-band .btn:hover::before,
.cta .btn:hover::before,
.cta-box a:hover::before,
.section-pillbar a.highlight:hover::before,
.rec-cta a:hover::before,
.lux-btn-light:hover::before,
.lux-btn-ghost:hover::before {
    opacity: 1;
    filter: blur(17px);
    width: 92%;
}

/* article-tips reused ::before for a click ripple that expanded it to a
   300px circle — with no fill left there is nothing to ripple, and it
   would swallow the halo on :active. Hold the halo steady instead. */
.cta-box a:active::before {
    width: 92%;
    height: 130%;
    border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pricing-cta:hover,
    .pricing-card.featured .pricing-cta:hover,
    .cta-band .btn:hover,
    .cta .btn:hover,
    .cta-box a:hover,
    .section-pillbar a.highlight:hover,
    .rec-cta a:hover,
    .lux-btn-light:hover,
    .lux-btn-ghost:hover { transform: none; }
}


/* ============================================================
   A2 · Assistant shortcuts (2026-08-05)
   The assistant IS the product, so it gets two doors: a highlighted
   entry in the dock and a floating button on every other page.
   ============================================================ */

/* dock entry, lifted above its neighbours */
.dockbar .nav-link.nav-primary{
    background: rgba(255,255,255,0.13);
    border: 1px solid rgba(255,255,255,0.26);
    position: relative;
}
.dockbar .nav-link.nav-primary:hover{ background: rgba(255,255,255,0.22); }
.dockbar .nav-link.nav-primary.active{ background: rgba(255,255,255,0.26); }

/* The AI spark is a filled mark; the dock's default rule strokes its icons. */
.dockbar .nav-link.nav-primary .nav-icon svg{
    fill: currentColor;
    stroke: none;
    animation: flyPulse 2.8s ease-in-out infinite;
    transform-origin: center;
}
/* Halo behind the icon — breathes with the same rhythm so the entry catches
   the eye without ever moving the dock's layout. */
.dockbar .nav-link.nav-primary .nav-icon{ position: relative; }
.dockbar .nav-link.nav-primary .nav-icon::before{
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 34px; height: 34px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.16) 42%, transparent 70%);
    filter: blur(6px);
    pointer-events: none;
    animation: flyHalo 2.8s ease-in-out infinite;
}
@keyframes flyPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.16); } }
@keyframes flyHalo{ 0%,100%{ opacity:.35; transform: translate(-50%,-50%) scale(.9); }
                    50%    { opacity:.85; transform: translate(-50%,-50%) scale(1.15); } }

@media (prefers-reduced-motion: reduce){
    .dockbar .nav-link.nav-primary .nav-icon svg,
    .dockbar .nav-link.nav-primary .nav-icon::before{ animation: none; }
}

/* floating shortcut — collapsed to a circle, opens its label on hover.
   display:none by default; auth.js sets display:flex once a token exists,
   and the pre-paint rule keeps it hidden for guests before JS runs. */
.fly-fab{
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 420;
    display: none;
    align-items: center;
    height: 56px;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    background: rgba(13,18,28,0.72);
    border: 1px solid rgba(255,255,255,0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 16px 44px rgba(0,0,0,0.45);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.fly-fab:hover{
    transform: translateY(-2px);
    background: rgba(13,18,28,0.88);
    box-shadow: 0 20px 54px rgba(0,0,0,0.55);
}
.fly-fab-ico{ width:56px; height:56px; flex:0 0 auto; display:grid; place-items:center; }
/* Filled mark, not an outline: at 24px a solid shape stays legible where
   stroked icons turn into noise. */
.fly-fab-ico svg{ width:23px; height:23px; fill:currentColor; stroke:none; }
.fly-fab-txt{
    max-width: 0;
    opacity: 0;
    padding: 0;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.92rem;
    transition: max-width .32s cubic-bezier(.2,.9,.3,1), opacity .22s ease, padding .32s ease;
}
.fly-fab:hover .fly-fab-txt,
.fly-fab:focus-visible .fly-fab-txt{
    max-width: 280px;
    opacity: 1;
    padding-inline-end: 22px;
}

/* Mobile is untouched for now: the dock is already a bottom bar there, and a
   floating button would sit on top of it. Needs !important to beat the inline
   display auth.js writes. */
@media (max-width: 768px){ .fly-fab{ display: none !important; } }
@media (prefers-reduced-motion: reduce){
    .fly-fab, .fly-fab-txt{ transition: none; }
    .fly-fab:hover{ transform: none; }
}

/* ---------- Phone dock ordering (2026-08-06) ----------
   The phone dock is a horizontal strip that scrolls sideways, so whatever sits
   past ~5 items is invisible until someone thinks to scroll. Reorder by CSS
   `order` ONLY (the DOM is untouched, desktop unaffected): login takes the
   data-deletion slot for guests, logout takes the pricing slot when signed in,
   and pricing/data-deletion move past the divider.
   Selectors match both local hrefs (about.html) and Netlify's rewritten form
   (/about) - never match on the ".html" suffix (CLAUDE.md rule 1). */
@media (max-width: 768px){
  .dockbar .nav-link[href*="assistant"]      { order: 1; }
  .dockbar .nav-link[href="index.html"],
  .dockbar .nav-link[href="/"],
  .dockbar .nav-link[href="/index"]          { order: 2; }
  .dockbar .nav-link[href*="blog"]           { order: 3; }
  .dockbar .nav-link[href*="article-tips"]   { order: 4; }
  .dockbar .nav-link[href*="my-trips"]       { order: 5; }
  .dockbar .nav-link[href*="recommendations"]{ order: 6; }
  .dockbar .nav-link[href*="about"]          { order: 7; }
  .dockbar #logout-btn                       { order: 8; }
  .dockbar #login-btn                        { order: 9; }
  .dockbar .sidebar-divider                  { order: 10; }
  .dockbar .nav-link[href*="pricing"]        { order: 11; }
  .dockbar .nav-link[href*="data-deletion"]  { order: 12; }
}

/* ---------- corner toggles (home page): theme + language side by side ---------- */
#cornerToggles {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 500;
    display: flex;
    gap: 8px;
    align-items: center;
}
#cornerToggles .theme-toggle-btn { position: static; }
/* the language pill is narrower - same glass, tighter proportions */
.lang-corner-btn { padding: 9px 14px; font-weight: 800; letter-spacing: 0.03em; }
/* in English (LTR) the corner mirrors to the right, away from the relocated dock */
html[dir="ltr"] #cornerToggles { left: auto; right: 18px; }