/* ============================================================
   TRIP MAKER — יומן מסע בשעת דמדומים
   Deep-dusk ink + warm amber, real glass, film grain.
   Display: Suez One · Body: Assistant
   ============================================================ */

:root {
  --ink: #0a1512;
  --ink-2: #10201b;
  --ink-3: #16302a;
  --paper: #f5efe3;
  --paper-dim: #cfc7b6;
  --amber: #ffb45f;
  --amber-deep: #e8853a;
  --mint: #8fd8c4;
  --danger: #ff7a6e;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.22);
  --shadow-soft: 0 18px 50px -18px rgba(0, 0, 0, 0.55);
  --radius: 22px;
  --radius-sm: 14px;
  --font-display: 'Suez One', serif;
  --font-body: 'Assistant', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html { overflow-x: clip; }

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper);
  min-height: 100vh;
  overflow-x: clip; /* clip (not hidden): the page can never be scrolled sideways, even in RTL */
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amber); color: var(--ink); }

/* ---------- desktop scrollbar: slim amber glass rail (mouse pointers only) ----------
   Touch devices keep their native overlay scrollbar; elements that opt out of a
   scrollbar (.strip) still win, since their selector is more specific. */

@media (min-width: 901px) and (pointer: fine) {
  /* Firefox has no ::-webkit-scrollbar — give it the standard properties instead.
     Chrome/Safari must NOT get them: setting either one there disables the pseudo-elements. */
  @supports not (selector(::-webkit-scrollbar)) {
    html { scrollbar-width: thin; scrollbar-color: rgba(255, 180, 95, .45) rgba(6, 13, 11, .5); }
  }

  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track {
    background: rgba(6, 13, 11, .5);
    border-inline-start: 1px solid rgba(255, 255, 255, .07);
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 3px solid transparent;
    background: linear-gradient(180deg, rgba(255, 180, 95, .55), rgba(232, 133, 58, .45)) padding-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 180, 95, .85), rgba(232, 133, 58, .7)) padding-box;
  }
  ::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, var(--amber), var(--amber-deep)) padding-box;
  }
  ::-webkit-scrollbar-corner { background: transparent; }
}

/* ---------- atmosphere: aurora blobs + grain ---------- */

.atmosphere {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(52% 44% at 82% 6%, rgba(232, 133, 58, 0.16), transparent 70%),
    radial-gradient(46% 40% at 8% 88%, rgba(143, 216, 196, 0.10), transparent 70%),
    radial-gradient(60% 55% at 50% 45%, rgba(22, 48, 42, 0.85), transparent 100%),
    linear-gradient(180deg, #0c1a16 0%, var(--ink) 60%, #081210 100%);
}
.atmosphere::before, .atmosphere::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
}
.atmosphere::before {
  width: 46vw; height: 46vw; top: -12vw; left: -10vw;
  background: radial-gradient(circle, rgba(255, 180, 95, 0.16), transparent 65%);
}
.atmosphere::after {
  width: 40vw; height: 40vw; bottom: -14vw; right: -8vw;
  background: radial-gradient(circle, rgba(143, 216, 196, 0.13), transparent 65%);
}

body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 280px 280px;
}

/* ---------- glass primitives ---------- */

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-highlight);
}

/* ---------- header ---------- */

.site-header {
  /* inset-based centering — immune to scrollbar-width and RTL transform quirks.
     The insets are physical on purpose: env() is physical too, and the status bar
     sits above the header in a standalone PWA (black-translucent), so without the
     top inset the logo runs under the clock and the notch. */
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  left: calc(14px + env(safe-area-inset-left));
  max-width: 1120px; margin: 0 auto;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  border-radius: 999px;
  overflow: visible;
}

.logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--paper);
}
.logo .logo-he { font-weight: 300; font-size: .95rem; color: var(--paper-dim); }
.logo .logo-user {
  font-weight: 500; font-size: .98rem; color: var(--paper);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav-actions {
  /* LTR within the actions group: user on the left, New Trip to its right */
  display: flex; align-items: center; gap: 8px; direction: ltr;
}

.nav-menu { position: relative; }
.nav-menu-btn {
  width: 42px; height: 42px; padding: 0;
  justify-content: center; border-radius: 999px;
}
.nav-menu-btn .ic { width: 20px; height: 20px; }
.nav-menu.open .nav-menu-btn { background: var(--glass-strong); }

.nav-menu-panel {
  /* fixed + body-mounted so backdrop-filter blurs the page like .site-header */
  position: fixed; top: 0; left: 0;
  min-width: 200px; max-width: min(260px, calc(100vw - 28px)); padding: 8px;
  border-radius: 18px;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 120;
  animation: nav-menu-in .16s ease-out;
}
.nav-menu-panel[hidden] { display: none !important; }
@keyframes nav-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.nav-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px; border: 0; border-radius: 12px;
  background: transparent; color: var(--paper);
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  text-decoration: none; text-align: start; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.nav-menu-item:hover { background: var(--glass-strong); }
.nav-menu-item .ic { width: 18px; height: 18px; opacity: .9; }
.nav-menu-primary { color: #241302; background: linear-gradient(135deg, var(--amber), var(--amber-deep)); }
.nav-menu-primary:hover { color: #241302; filter: brightness(1.05); }
.nav-menu-admin { color: var(--amber); }
.nav-menu-logout { color: #ff6b6b; }
.nav-menu-logout:hover { background: rgba(255, 107, 107, .12); color: #ff8585; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.btn {
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  border: 1px solid transparent; border-radius: 999px;
  padding: 9px 20px; cursor: pointer; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: wait; pointer-events: none; }

/* inline stroke icons: preferred over emoji in controls, since they inherit
   currentColor and so pick up hover, disabled and state tints for free */
.ic {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.btn-ghost { background: transparent; color: var(--paper); border-color: var(--glass-border); }
.btn-ghost:hover { background: var(--glass-strong); }

.btn-amber {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: #241302; box-shadow: 0 8px 26px -8px rgba(232, 133, 58, .65);
}
.btn-amber:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(232, 133, 58, .75); }

.btn-lg { padding: 14px 32px; font-size: 1.08rem; }

/* ---------- hero ---------- */

.hero {
  position: relative; min-height: 92vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 120px 20px 60px;
  /* z-index lifts the hero above the sections below, so the search dropdown can
     spill past the hero's bottom edge instead of being clipped by it */
  isolation: isolate; z-index: 5;
}
/* the kenburns zoom needs a clipping box — but on this wrapper, not on .hero
   itself, so absolutely-positioned UI (the autocomplete) may overflow freely */
.hero-clip { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 65%;
  animation: kenburns 24s ease-in-out infinite alternate;
  filter: saturate(.92) brightness(.8);
  will-change: transform;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 21, 18, .78) 0%,
      rgba(10, 21, 18, .38) 42%,
      rgba(10, 21, 18, .80) 84%,
      rgba(10, 21, 18, .90) 100%),
    radial-gradient(70% 55% at 50% 42%, transparent 30%, rgba(10, 21, 18, .55) 100%);
}
/* photo + veil dissolve into the page background as one image, so there is no
   seam where the section below starts — the fade lands on the page's own
   atmosphere.

   The mask belongs on the clip, never on .hero-bg: a mask on .hero-bg rides
   along with the ken-burns scale(), which pushes the transparent end of the ramp
   below the clip's bottom edge — so the photo is still ~10% visible when
   overflow:hidden cuts it off in a hard horizontal line. (Under
   prefers-reduced-motion the animation freezes at scale(1.09) and that line is
   permanent.) Masking the container also fades photo and veil as one layer, so
   the photo can't brighten back up as its own veil thins out.

   The stops trace a smoothstep instead of a straight ramp: an S-curve leaves no
   kink where the fade starts or ends, and a kink is exactly what the eye reads
   as an edge. The long flat tail near zero is what makes the last stretch
   disappear rather than stop. */
.hero-clip {
  --hero-fade: linear-gradient(180deg,
    #000 0 50%,
    rgba(0, 0, 0, .96) 56.5%,
    rgba(0, 0, 0, .84) 63%,
    rgba(0, 0, 0, .68) 69%,
    rgba(0, 0, 0, .50) 75%,
    rgba(0, 0, 0, .32) 81%,
    rgba(0, 0, 0, .16) 87.5%,
    rgba(0, 0, 0, .04) 94%,
    transparent 100%);
  -webkit-mask-image: var(--hero-fade);
  mask-image: var(--hero-fade);
}

.hero-kicker {
  font-weight: 600; letter-spacing: .28em; font-size: .8rem;
  color: var(--mint); text-transform: uppercase;
  opacity: 0; animation: rise .8s ease .1s forwards;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.5vw, 5.2rem);
  line-height: 1.12; margin: 18px 0 14px; max-width: 15ch;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .5);
  opacity: 0; animation: rise .8s ease .25s forwards;
}
.hero h1 .accent {
  color: var(--amber); position: relative; white-space: nowrap;
}
.hero h1 .accent::after {
  content: ''; position: absolute; right: 0; left: 0; bottom: .04em; height: .14em;
  background: linear-gradient(90deg, transparent, rgba(255, 180, 95, .55), transparent);
  border-radius: 999px;
}
.hero-sub {
  color: var(--paper-dim); font-size: clamp(1rem, 2.2vw, 1.25rem); font-weight: 300;
  max-width: 46ch; opacity: 0; animation: rise .8s ease .4s forwards;
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- search widget ---------- */

.search-box {
  margin-top: 38px; width: min(640px, 100%);
  padding: 10px; border-radius: 26px;
  opacity: 0; animation: rise .8s ease .55s forwards;
}
.search-tabs { display: flex; gap: 6px; padding: 0 6px 8px; }
.search-tab {
  flex: 1; background: transparent; border: none; cursor: pointer;
  color: var(--paper-dim); font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: 9px 6px; border-radius: 14px; transition: all .2s ease;
}
.search-tab.active { background: var(--glass-strong); color: var(--amber); }

.search-row { display: flex; gap: 8px; position: relative; }
.search-input {
  flex: 1; min-width: 0; background: rgba(6, 13, 11, .55);
  border: 1px solid var(--glass-border); border-radius: 18px;
  color: var(--paper); font-family: var(--font-body); font-size: 1.05rem;
  padding: 15px 20px; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.search-input::placeholder { color: rgba(245, 239, 227, .38); }
.search-input:focus { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 180, 95, .13); }
.search-input.code-mode {
  direction: ltr; text-align: center; letter-spacing: .55em; font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.search-hint { padding: 10px 10px 2px; font-size: .85rem; color: rgba(245, 239, 227, .45); min-height: 1.6em; }
.search-hint .err { color: var(--danger); }

/* autocomplete dropdown: an overlay glued to the input's bottom edge, so it reads
   as one combobox control — it floats above the hero instead of pushing it */
.search-results {
  position: absolute; top: calc(100% - 1px); right: 0; left: 0; z-index: 40;
  display: none; text-align: right;
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(8, 17, 14, .97);
  border: 1px solid var(--amber); border-top: none;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .65);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.search-results.open { display: block; }
/* while the dropdown is open the input fuses into it: flat bottom, shared border */
.search-box.dd-open .search-input {
  border-radius: 18px 18px 0 0;
  border-color: var(--amber); box-shadow: none;
}
.search-result {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  text-decoration: none; color: var(--paper); transition: background .12s ease;
}
.search-result + .search-result { border-top: 1px solid rgba(245, 239, 227, .06); }
.search-result:hover, .search-result.sr-active { background: var(--glass-strong); }
.search-result .sr-go {
  margin-inline-start: auto; color: var(--paper-dim);
  opacity: 0; transform: translateX(4px); transition: opacity .15s ease, transform .15s ease;
}
.search-result:hover .sr-go, .search-result.sr-active .sr-go { opacity: 1; transform: none; }
/* the "plan a new trip" options lead the list: an amber wash and a heavier title
   mark them as the recommended path without saying so out loud. Country matches
   stack up to 3 such rows — thin amber seams between them, one dashed seam after */
.search-result.plan-cta {
  padding: 13px 14px;
  background: linear-gradient(135deg, rgba(255, 180, 95, .17), rgba(255, 180, 95, .05));
}
.search-result.plan-cta + .search-result.plan-cta { border-top: 1px solid rgba(255, 180, 95, .16); }
.search-result.plan-cta:hover, .search-result.plan-cta.sr-active {
  background: linear-gradient(135deg, rgba(255, 180, 95, .26), rgba(255, 180, 95, .1));
}
.search-result.plan-cta .sr-title { color: var(--amber); font-size: 1.02rem; }
.search-result.plan-cta .sr-go { color: var(--amber); }
.search-result.plan-cta .pc-icon {
  width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
  background: rgba(255, 180, 95, .14); border-radius: 12px;
  border: 1px solid rgba(255, 180, 95, .4); color: var(--amber);
  box-shadow: 0 0 18px -4px rgba(255, 180, 95, .45);
}
.search-result.plan-cta .pc-icon .ic { width: 22px; height: 22px; fill: currentColor; stroke: none; }
/* country flag in the thumb square (emoji on mobile, SVG image on desktop) */
.search-result .sr-flag {
  width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
  background: rgba(255, 180, 95, .1); border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255, 180, 95, .35);
}
.search-result .sr-flag .flag-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.search-result .sr-flag .flag-emoji { font-size: 1.55rem; line-height: 1; }
/* quiet section label above the existing-trip results; the dashed amber seam
   closes the creation section above it */
.search-results .sr-group-label {
  padding: 10px 14px 4px; font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; color: rgba(245, 239, 227, .42);
  border-top: 1px dashed rgba(255, 180, 95, .35);
}
.search-results .sr-group-label + .search-result { border-top: none; }
.search-results .sr-empty { border-top: 1px dashed rgba(255, 180, 95, .35); }

/* shared flag bits (wizard chips, dest context, title row) */
.flag-img { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; vertical-align: -2px; }
/* inside headings the flag scales with the type instead of staying 20px */
#trip-title .flag-img, #new-title .flag-img { width: .8em; height: .6em; border-radius: .1em; vertical-align: -.02em; }
.flag-emoji { line-height: 1; }
.dest-chip .flag-img { width: 18px; height: 13px; }
.title-flags { display: inline-flex; gap: 5px; align-items: center; margin-inline-start: 8px; vertical-align: -2px; }
.ac-icon .flag-img { width: 20px; height: 15px; }
.search-result img, .search-results .skl-thumb { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.search-result .sr-title { font-weight: 700; font-size: .98rem; }
.search-result .sr-meta { font-size: .82rem; color: var(--paper-dim); margin-top: 1px; }
.search-results .search-result { border-radius: 0; }
.search-results .sr-empty {
  padding: 12px 14px 10px; font-size: .85rem; color: var(--paper-dim);
}
.search-results .skl-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }

.scroll-cue {
  position: absolute; bottom: 26px; right: 50%; transform: translateX(50%);
  color: rgba(245, 239, 227, .5); font-size: .85rem; letter-spacing: .1em;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  animation: bob 2.4s ease-in-out infinite;
  transition: opacity .2s ease;
}
/* the open dropdown floats right above the cue — fade it out instead of colliding */
.search-box.dd-open ~ .scroll-cue { opacity: 0; }
@keyframes bob { 0%, 100% { transform: translate(50%, 0); } 50% { transform: translate(50%, 8px); } }

/* ---------- suggested strip ---------- */

.section { padding: 70px 0 40px; }
.section-head {
  width: min(1120px, calc(100% - 40px)); margin: 0 auto 26px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.section-head h2 {
  font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15;
}
.section-head h2 .accent { color: var(--amber); }
.section-head p { color: var(--paper-dim); font-weight: 300; margin-top: 6px; }
.strip-nav { display: flex; gap: 8px; }
.strip-nav button {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--paper);
  font-size: 1.2rem; transition: all .2s ease;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.strip-nav button:hover { background: var(--amber); color: var(--ink); border-color: transparent; }

.strip-wrap { position: relative; }
.strip-wrap::before, .strip-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.strip-wrap::before { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.strip-wrap::after { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }

.strip {
  display: flex; gap: 20px; overflow-x: auto; padding: 12px max(calc((100% - 1120px) / 2 + 20px), 20px) 34px;
  scrollbar-width: none; /* no scroll-snap: it fights the infinite-loop teleports */
}
.strip::-webkit-scrollbar { display: none; }

.trip-card {
  flex: 0 0 292px;
  border-radius: var(--radius); overflow: hidden; position: relative;
  text-decoration: none; color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  opacity: 0; transform: translateY(34px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}
.trip-card.revealed { opacity: 1; transform: none; }
.trip-card:hover { box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .7); }
.trip-card:hover .tc-img { transform: scale(1.07); }

.tc-media { height: 330px; overflow: hidden; position: relative; }
.tc-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
}
.tc-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(8, 16, 13, .92) 100%);
}
.tc-emoji {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.35rem;
  background: rgba(10, 21, 18, .72); border: 1px solid var(--glass-border); border-radius: 14px;
}
.tc-days {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: .8rem; font-weight: 700; padding: 7px 12px;
  background: rgba(10, 21, 18, .72); border: 1px solid var(--glass-border); border-radius: 999px;
}
.tc-body { position: absolute; bottom: 0; right: 0; left: 0; padding: 18px; z-index: 2; }
.tc-country { font-size: .82rem; font-weight: 600; letter-spacing: .12em; color: var(--mint); }
.tc-title { font-family: var(--font-display); font-size: 1.35rem; margin: 4px 0 6px; line-height: 1.2; }
.tc-dest { font-size: .92rem; color: var(--paper-dim); font-weight: 300; }

/* ---------- how-it-works ---------- */

.steps-grid {
  width: min(1120px, calc(100% - 40px)); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.step-card { padding: 28px 24px; position: relative; overflow: hidden; }
.step-num {
  font-family: var(--font-display); font-size: 3.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 180, 95, .5);
  position: absolute; top: 14px; left: 18px; opacity: .8;
}
.step-card h3 { font-family: var(--font-display); font-size: 1.25rem; margin: 8px 0 10px; }
.step-card p { color: var(--paper-dim); font-weight: 300; line-height: 1.65; font-size: .97rem; }
.step-icon { font-size: 1.8rem; }

/* ---------- footer ---------- */

.site-footer {
  margin-top: 60px; padding: 34px 20px 40px; text-align: center;
  color: rgba(245, 239, 227, .4); font-size: .88rem; font-weight: 300;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

/* ---------- modal (auth) ---------- */

.modal-backdrop {
  /* above the fullscreen calendar (300), below the photo lightbox (400) that opens from a stop sheet */
  position: fixed; inset: 0; z-index: 350; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 10, 8, .68);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.modal-backdrop.open { display: flex; }
.modal {
  width: min(420px, 100%); padding: 30px 28px; position: relative;
  animation: pop .35s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes pop { from { opacity: 0; transform: scale(.92) translateY(14px); } to { opacity: 1; transform: none; } }
.modal h2 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 4px; }
.modal .modal-sub { color: var(--paper-dim); font-weight: 300; margin-bottom: 20px; }
/* a modal with nothing to add under its title shouldn't reserve the line */
.modal .modal-sub:empty { display: none; }

/* from/to nights stay on one row — the form grid drops to a single column on
   phones, and a night range split across two rows reads as two questions */
.night-range { display: flex; align-items: center; gap: 8px; }
.night-range select { flex: 1; min-width: 0; }
.night-range span { flex: none; color: var(--paper-dim); font-weight: 300; }
.modal-close {
  position: absolute; top: 16px; left: 16px; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--glass-border); background: transparent;
  color: var(--paper-dim); cursor: pointer; font-size: 1rem;
  transition: background .15s ease, color .15s ease;
}
.modal-close:hover { background: var(--glass-strong); color: var(--paper); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: .88rem; font-weight: 600; color: var(--paper-dim); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(6, 13, 11, .55);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  color: var(--paper); font-family: var(--font-body); font-size: 1rem;
  padding: 12px 15px; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 180, 95, .12);
}
.form-error { color: var(--danger); font-size: .9rem; min-height: 1.4em; margin: 4px 0 10px; }
.switch-auth { text-align: center; margin-top: 16px; font-size: .92rem; color: var(--paper-dim); }
.switch-auth a { color: var(--amber); cursor: pointer; text-decoration: none; font-weight: 700; }

.auth-google-wrap { margin-top: 14px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 14px; color: var(--paper-dim); font-size: .85rem;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--glass-border);
}
.btn-google {
  width: 100%; justify-content: center;
  background: rgba(255, 255, 255, .92); color: #1f1f1f;
  border-color: rgba(255, 255, 255, .35);
  font-weight: 700;
}
.btn-google:hover { background: #fff; transform: translateY(-1px); }
.btn-google .google-g { width: 18px; height: 18px; flex: none; }

/* ---------- trip page ---------- */

.trip-hero {
  position: relative; min-height: 62vh; display: flex; align-items: flex-end;
  isolation: isolate; overflow: hidden; padding: 130px 20px 40px;
}
.trip-hero .hero-bg { animation-duration: 30s; }
.trip-hero-inner { width: min(1120px, 100%); margin: 0 auto; position: relative; }
.trip-hero .crumb {
  color: var(--mint); text-decoration: none; font-weight: 600; font-size: .9rem; letter-spacing: .06em;
}
.trip-hero h1 {
  font-family: var(--font-display); font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  margin: 10px 0 12px; text-shadow: 0 4px 34px rgba(0, 0, 0, .55); line-height: 1.15;
}
.trip-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  background: rgba(10, 21, 18, .5); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.chip .dot { color: var(--amber); }
/* meta chips can be real actions (הוספת משתתפים) — a <button> in chip clothes */
button.chip { font-family: var(--font-body); color: var(--paper); cursor: pointer; }
.chip-action { color: var(--amber); border-color: rgba(255, 180, 95, .45); background: rgba(255, 180, 95, .1); transition: background .15s ease; }
.chip-action:hover { background: rgba(255, 180, 95, .2); }
.chip-action .ic { width: 15px; height: 15px; }
/* a chip that opens what it shows (the dates): quieter than chip-action — it's a
   fact first and a control second */
.chip-edit { cursor: pointer; transition: border-color .15s ease; }
.chip-edit:hover { border-color: rgba(255, 180, 95, .45); }

.trip-layout {
  width: min(1120px, calc(100% - 40px)); margin: 34px auto 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start;
}
.trip-layout > * { min-width: 0; }
.trip-desc { padding: 26px; color: var(--paper-dim); line-height: 1.8; font-size: 1.02rem; font-weight: 300; }
.trip-desc strong { color: var(--paper); }
.trip-desc-toggle {
  display: none; margin: 8px 0 0; padding: 0; background: none; border: none;
  color: var(--mint); font-family: var(--font-body); font-weight: 700; font-size: .85rem; cursor: pointer;
}
.trip-desc-toggle.show { display: block; }

/* ---- AI edit box ---- */
.ai-edit-card {
  margin-top: 16px; padding: 20px 22px;
  border: 1px solid rgba(255, 180, 95, .35);
  background: linear-gradient(135deg, rgba(255, 180, 95, .08), var(--glass));
}
.ai-edit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ai-edit-title { font-weight: 800; font-size: 1.05rem; color: var(--amber); }
.ai-edit-hint { font-size: .82rem; color: var(--paper-dim); }
.ai-edit-sub { margin: 6px 0 12px; font-size: .92rem; color: var(--paper-dim); font-weight: 300; }
.ai-edit-row { display: flex; gap: 8px; }
.ai-edit-row input {
  flex: 1; min-width: 0; background: rgba(6, 13, 11, .55);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  color: var(--paper); font-family: var(--font-body); font-size: 1rem;
  padding: 12px 15px; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.ai-edit-row input:focus { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 180, 95, .12); }
.ai-edit-foot { display: flex; justify-content: flex-end; margin-top: 6px; font-size: .78rem; color: var(--paper-dim); }
.ai-edit-scope {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .14);
  color: var(--paper-dim); font-size: .92rem;
}
.ai-edit-scope label { font-weight: 600; }
.ai-edit-scope select {
  background: rgba(6, 13, 11, .55); border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  color: var(--paper); font-family: var(--font-body); font-size: .95rem; padding: 9px 12px; outline: none;
}
.ai-edit-scope select:focus { border-color: var(--amber); }
.ai-edit-result { margin-top: 10px; font-size: .95rem; line-height: 1.6; }
.ai-edit-result.ok { color: var(--mint); }
.ai-edit-result.info { color: var(--paper-dim); }
.ai-edit-result.err { color: var(--danger); }
/* one-tap escape hatch after a smart edit — quiet, sits inside the result line */
.ai-undo-btn {
  background: none; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px;
  color: var(--paper); font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  padding: 5px 14px; margin-inline-start: 8px; cursor: pointer; vertical-align: 1px;
}
.ai-undo-btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.ai-undo-btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 560px) {
  .ai-edit-row { flex-direction: column; }
  .ai-edit-row .btn { justify-content: center; }
}

.day-block { margin-top: 26px; }

/* list fold: trips over 3 days open on a 3-day teaser — day 3 melts out and a
   reveal button brings the rest, keeping the AI editor below within easy reach */
.day-folded { display: none; }
.day-fade {
  mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
}
.show-rest-btn {
  display: block; width: 100%; margin-top: 4px; padding: 13px;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  color: var(--amber); font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.show-rest-btn:hover { background: var(--glass-strong); border-color: rgba(255, 180, 95, .45); }
@media print {
  .day-folded { display: block; }
  .day-fade { mask-image: none; -webkit-mask-image: none; }
  .show-rest-btn { display: none; }
}
.day-title {
  font-family: var(--font-display); font-size: 1.4rem;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.day-title .day-badge {
  font-family: var(--font-body); background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: #241302; font-size: .85rem; font-weight: 800; padding: 6px 14px; border-radius: 999px;
}
.timeline { margin-top: 14px; position: relative; padding-right: 24px; }
.timeline::before {
  content: ''; position: absolute; top: 8px; bottom: 8px; right: 7px; width: 2px;
  background: linear-gradient(180deg, var(--amber), rgba(255, 180, 95, .08));
  border-radius: 2px;
}
.item-card { position: relative; padding: 16px 18px; margin-bottom: 12px; }
.item-card::before {
  content: ''; position: absolute; top: 24px; right: -22px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255, 180, 95, .18);
}
/* one row that never wraps as a whole: a long title wraps INSIDE its own box, so
   the trailing badges (עלות · אזור · קטגוריה · ✕) stay pinned to the card's top
   corner instead of trailing after the text */
.item-top { display: flex; align-items: flex-start; gap: 10px; }
.item-time { font-variant-numeric: tabular-nums; color: var(--mint); font-weight: 700; font-size: .9rem; direction: ltr; }
.item-top .item-time { margin-top: 5px; }
.item-title { font-weight: 700; font-size: 1.08rem; line-height: 1.35; overflow-wrap: anywhere; }
.item-badges { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; }
.item-badges:empty { display: none; }
.item-badges .item-del { margin-inline-start: 0; }
.item-badges .item-cat, .item-badges .item-area {
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the title takes the slack, so the trailing controls (area · category · ✕)
   stay grouped together at the end of the row instead of drifting apart */
.item-top > .item-title { flex: 1 1 auto; min-width: 0; }
.item-cat {
  font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: rgba(143, 216, 196, .12); color: var(--mint); border: 1px solid rgba(143, 216, 196, .25);
}
.item-note { color: var(--paper-dim); font-weight: 300; font-size: .95rem; margin-top: 6px; line-height: 1.6; }
/* travel stops (קטגוריה: נסיעה) — the move between areas, styled as a transit leg;
   the timeline dot shows the actual mode (🚆/🚌/✈️/⛴️/🚗) via data-ticon */
.item-card.travel {
  border-style: dashed; border-color: rgba(143, 216, 196, .4);
  background: rgba(143, 216, 196, .05);
}
.item-card.travel::before {
  content: attr(data-ticon); display: grid; place-items: center; font-size: .72rem;
  width: 19px; height: 19px; top: 19px; right: -26px;
  background: var(--ink-3); border: 1px solid rgba(143, 216, 196, .5);
  box-shadow: 0 0 0 4px rgba(143, 216, 196, .18);
}
.item-card.travel .item-cat {
  background: rgba(143, 216, 196, .18); border-color: rgba(143, 216, 196, .45);
}
.item-cost {
  font-size: .78rem; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 180, 95, .1); color: var(--amber); border: 1px solid rgba(255, 180, 95, .3);
}
.trip-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.map-card { overflow: hidden; padding: 0; }
.map-card #trip-map { width: 100%; height: 300px; display: block; background: #0d1a17; }
.map-card #trip-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85) contrast(1.05); }
.map-card .map-caption { padding: 13px 18px; font-size: .88rem; color: var(--paper-dim); }
/* the light OSM tiles get the same gentle grade the old embed had */
.map-card .leaflet-tile-pane { filter: saturate(.85) contrast(1.05); }
/* day chips above the map — same .day-tab pills the dest switcher uses */
.map-days {
  display: flex; gap: 6px; padding: 10px 12px 0; overflow-x: auto;
  scrollbar-width: none;
}
.map-days::-webkit-scrollbar { display: none; }
.map-days .day-tab { flex: none; }
.map-days .day-tab.no-pins { opacity: .55; }
/* numbered stop pins (divIcon — no image assets) */
.map-pin-wrap { background: none; border: none; }
.map-pin {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--amber, #ffb45f); color: #0a1512;
  font-weight: 800; font-size: .82rem; font-variant-numeric: tabular-nums;
  border: 2px solid #0a1512; box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  cursor: pointer;
}
.leaflet-container { font-family: inherit; }

/* boarding-pass ticket */
/* --ticket-pad drives BOTH the padding and the divider's negative margin, so the
   perforation always stops exactly on the card edge — a hardcoded -24px overhangs
   once a narrow phone shrinks the padding */
.ticket { --ticket-pad: 24px; overflow: visible; position: relative; padding: var(--ticket-pad); text-align: center; }
.ticket::before, .ticket::after {
  content: ''; position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--glass-border); transform: translateY(-50%);
}
.ticket::before { right: -14px; }
.ticket::after { left: -14px; }
.ticket .ticket-label { font-size: .82rem; letter-spacing: .22em; color: var(--mint); font-weight: 700; }
.ticket .code {
  font-family: var(--font-display); font-size: 2.7rem; letter-spacing: .18em;
  color: var(--amber); direction: ltr; margin: 8px 0 4px;
  text-shadow: 0 0 30px rgba(255, 180, 95, .4);
}
.ticket .ticket-sub { color: var(--paper-dim); font-size: .9rem; font-weight: 300; margin-bottom: 16px; }
.ticket .divider {
  border: none; border-top: 2px dashed rgba(255, 255, 255, .16);
  margin: 0 calc(-1 * var(--ticket-pad)) 16px;
}
.copy-feedback { color: var(--mint); font-size: .85rem; min-height: 1.3em; margin-top: 8px; }

/* click-to-copy: every place a trip code is shown */
/* :where() keeps specificity at 0 so an already-positioned chip (.tc-code-chip) stays absolute */
.wa-icon { width: 17px; height: 17px; flex-shrink: 0; }

:where(.copyable) { position: relative; }
.copyable { cursor: copy; transition: color .18s ease, opacity .18s ease; }
.copyable:hover { opacity: .85; }
.copyable:active { transform: scale(.97); }
.copyable::after {
  content: ''; position: absolute; bottom: 100%; right: 50%;
  transform: translate(50%, 2px); margin-bottom: 6px; white-space: nowrap;
  font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: normal;
  padding: 4px 10px; border-radius: 999px; pointer-events: none; z-index: 5;
  background: rgba(10, 21, 18, .92); border: 1px solid var(--glass-border); color: var(--mint);
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.copyable.copied::after, .copyable.copy-failed::after { opacity: 1; transform: translate(50%, -2px); }
.copyable.copied::after { content: 'הועתק ✓'; }
.copyable.copy-failed::after { content: 'ההעתקה נכשלה'; color: var(--danger); }

/* ---------- plan wizard ---------- */

/* 120px is the clearance for the fixed header — it has to grow with the header,
   which now sits below the notch, or the first heading slides under it */
.page-shell {
  width: min(880px, calc(100% - 32px)); margin: 0 auto;
  padding: calc(120px + env(safe-area-inset-top)) 0 60px;
}
.page-shell > h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); }
.page-shell > .page-sub { color: var(--paper-dim); font-weight: 300; margin: 8px 0 30px; }

.wizard-progress { display: flex; gap: 10px; margin-bottom: 26px; }
.wp-step {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-radius: var(--radius-sm); font-size: .92rem; font-weight: 600; color: var(--paper-dim);
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: all .3s ease;
}
.wp-step .wp-n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-strong); font-size: .85rem; flex-shrink: 0;
}
.wp-step.active { color: var(--paper); border-color: rgba(255, 180, 95, .5); }
.wp-step.active .wp-n { background: linear-gradient(135deg, var(--amber), var(--amber-deep)); color: #241302; }
.wp-step.done { color: var(--mint); }
.wp-step.done .wp-n { background: rgba(143, 216, 196, .2); color: var(--mint); }

.wizard-panel { padding: 30px 28px; }
.wizard-panel h2 { font-family: var(--font-display); font-size: 1.45rem; margin-bottom: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .span-2 { grid-column: span 2; }

.emoji-row { display: flex; gap: 8px; flex-wrap: wrap; }
.emoji-opt {
  width: 46px; height: 46px; font-size: 1.35rem; display: grid; place-items: center;
  background: rgba(6, 13, 11, .55); border: 1px solid var(--glass-border);
  border-radius: 14px; cursor: pointer; transition: all .18s ease;
}
.emoji-opt:hover { transform: translateY(-3px); }
.emoji-opt.selected { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 180, 95, .15); background: rgba(255, 180, 95, .12); }

.cover-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cover-opt {
  aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  border: 2px solid transparent; transition: all .2s ease; position: relative;
}
.cover-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-opt:hover { transform: translateY(-3px); }
.cover-opt.selected { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 180, 95, .18); }
.cover-opt.selected::after {
  content: '✓'; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  background: var(--amber); color: var(--ink); border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem;
}

.wizard-nav { display: flex; justify-content: space-between; margin-top: 24px; gap: 10px; }

/* day-tab pills: clarifying-question chips, the trip page's dest switcher, calendar */
.day-tab {
  padding: 9px 18px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .92rem;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--paper-dim);
  font-family: var(--font-body); transition: all .2s ease;
}
.day-tab.active {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: #241302; border-color: transparent;
}
.day-tab .cnt { opacity: .7; font-size: .8rem; }

.empty-day { color: rgba(245, 239, 227, .4); font-weight: 300; text-align: center; padding: 18px; }

/* ---------- destination picker (autocomplete + chips) ---------- */

.dest-picker { display: flex; flex-direction: column; gap: 10px; }
.dest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dest-chips:empty { display: none; }
.dest-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .95rem;
  background: rgba(255, 180, 95, .13); border: 1px solid rgba(255, 180, 95, .4); color: var(--amber);
  animation: pop .25s cubic-bezier(.2, .9, .3, 1.2);
}
.dest-chip small { color: var(--paper-dim); font-weight: 400; }
.dest-chip button {
  background: none; border: none; color: var(--paper-dim); cursor: pointer; font-size: .85rem; padding: 0;
}
.dest-chip button:hover { color: var(--danger); }

/* step 2: quiet reminder of the destination, especially when we auto-advanced here */
.dest-context {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -6px 0 18px; padding: 10px 14px; border-radius: 14px;
  background: rgba(255, 180, 95, .08); border: 1px solid rgba(255, 180, 95, .22);
  font-size: .94rem;
}
.dest-context .dc-label { color: var(--paper-dim); font-weight: 300; }
.dest-context .dc-dest { color: var(--amber); font-weight: 700; }
.dest-context .dc-dest small { color: var(--paper-dim); font-weight: 400; }
.dest-context .dc-sep { color: var(--paper-dim); opacity: .6; }
.dest-context .dc-change {
  margin-inline-start: auto; background: none; border: none; cursor: pointer;
  color: var(--paper-dim); font-size: .85rem; text-decoration: underline; padding: 0;
}
.dest-context .dc-change:hover { color: var(--amber); }

.autocomplete-wrap { position: relative; }
.autocomplete-wrap input {
  width: 100%; background: rgba(6, 13, 11, .55);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  color: var(--paper); font-family: var(--font-body); font-size: 1rem;
  padding: 12px 15px; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.autocomplete-wrap input:focus { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 180, 95, .12); }
.autocomplete-list {
  position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 50;
  display: none; overflow: hidden; border-radius: var(--radius-sm); padding: 6px;
  background: rgba(14, 26, 22, .97);
}
.autocomplete-list.open { display: block; }
.autocomplete-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: right;
  background: transparent; border: none; cursor: pointer; border-radius: 10px;
  padding: 10px 12px; color: var(--paper); font-family: var(--font-body); font-size: .97rem;
}
.autocomplete-item:hover, .autocomplete-item.active { background: var(--glass-strong); }
.autocomplete-item.active { outline: 1px solid rgba(255, 180, 95, .45); }
.autocomplete-item .ac-name { font-weight: 700; }
.autocomplete-item .ac-meta { color: var(--paper-dim); font-size: .82rem; margin-inline-start: auto; }
.autocomplete-item.free-text { border-top: 1px dashed rgba(255, 255, 255, .12); border-radius: 0 0 10px 10px; }
.dest-hint { font-size: .84rem; color: rgba(245, 239, 227, .45); }

.stepper { display: flex; gap: 8px; align-items: stretch; }
.stepper input {
  flex: 1; text-align: center; background: rgba(6, 13, 11, .55);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  color: var(--paper); font-family: var(--font-body); font-size: 1.1rem; font-weight: 700;
  padding: 10px; outline: none; -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.step-btn {
  width: 46px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--amber); font-size: 1.3rem; font-weight: 700; cursor: pointer;
  transition: background .15s ease;
}
.step-btn:hover { background: var(--glass-strong); }

/* ---------- range calendar (js/datepicker.js) ----------
   Same block wherever a trip's dates are chosen: the wizard's step 2 and the trip
   page's dates panel. Sunday sits on the right — grid column 1 is the right edge
   in RTL, the same way the trip's own month calendar reads. */

.dp { -webkit-user-select: none; user-select: none; }
.dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.dp-month { flex: 1; text-align: center; font-weight: 800; font-size: .95rem; }
.dp-nav {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass);
  color: var(--amber); cursor: pointer; transition: background .15s ease;
}
.dp-nav:hover { background: var(--glass-strong); }
.dp-nav .ic { width: 16px; height: 16px; }
.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-dow { margin-bottom: 4px; }
.dp-dow span { text-align: center; font-size: .75rem; font-weight: 700; color: var(--paper-dim); opacity: .65; }
.dp-grid { gap: 2px 0; }
.dp-day {
  aspect-ratio: 1; min-height: 34px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--paper);
  border-radius: 50%; transition: background .12s ease;
}
.dp-day:hover { background: var(--glass-strong); }
/* today is a hint, never the selection — an amber ring, no fill */
.dp-day.is-today { box-shadow: inset 0 0 0 1px rgba(255, 180, 95, .5); }
/* the range is one continuous amber band with rounded caps at both ends */
.dp-day.in-range { background: rgba(255, 180, 95, .16); border-radius: 0; }
/* logical radii: the band opens on the side the reading starts from, so it caps
   correctly without knowing which direction the page runs in */
.dp-day.is-start { border-start-start-radius: 50%; border-end-start-radius: 50%; }
.dp-day.is-end { border-start-end-radius: 50%; border-end-end-radius: 50%; }
.dp-day.is-start, .dp-day.is-end { background: var(--amber); color: var(--ink); font-weight: 800; }
.dp-day.is-solo { border-radius: 50%; }
.dp-pad { pointer-events: none; }

@media (max-width: 640px) {
  .dp-day { min-height: 38px; font-size: .95rem; }
}

/* ---------- trip sidebar: weather + hotels ---------- */

.side-card { padding: 18px; }
.side-card-title { font-weight: 800; font-size: .95rem; margin-bottom: 12px; letter-spacing: .02em; }
.dest-switcher { padding: 14px 16px; border-radius: var(--radius); background: var(--glass);
  border: 1px solid var(--glass-border); display: flex; flex-wrap: wrap; gap: 8px;
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
}
.dest-switcher .side-card-title { width: 100%; margin: 0 0 2px; }

.weather-row { display: flex; gap: 4px; justify-content: space-between; }
/* the "typical, not a forecast" caption under the title (.wx-est mode) */
.weather-sub { font-size: .76rem; color: var(--paper-dim); margin: -4px 0 8px; }
.weather-day { text-align: center; flex: 1; padding: 6px 2px; border-radius: 12px; transition: background .15s ease; }
.weather-day:hover { background: var(--glass-strong); }
.wd-name { font-size: .74rem; color: var(--paper-dim); font-weight: 600; }
.wd-icon { font-size: 1.25rem; margin: 4px 0; }
.wd-temp { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wd-temp span { color: var(--paper-dim); font-weight: 400; margin-inline-start: 3px; }

/* hotel star rating — shown in the hotels modal list */
.hotel-stars { color: var(--amber); font-size: .78rem; letter-spacing: .1em; }

/* ---------- my trips ---------- */

.my-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.my-grid .trip-card { flex: none; opacity: 1; transform: none; }
.my-grid .tc-media { height: 250px; }
.tc-code-chip {
  position: absolute; bottom: 14px; left: 14px; z-index: 3;
  font-size: .8rem; font-weight: 800; letter-spacing: .14em; direction: ltr;
  padding: 5px 11px; border-radius: 999px; color: var(--amber);
  background: rgba(10, 21, 18, .6); border: 1px solid rgba(255, 180, 95, .35);
}
.tc-delete {
  /* sits next to the emoji badge (top-right) so it never covers the days chip on the left */
  position: absolute; top: 14px; right: 66px; z-index: 3; width: 36px; height: 36px;
  border-radius: 12px; border: 1px solid var(--glass-border); cursor: pointer;
  background: rgba(10, 21, 18, .72); color: var(--paper-dim);
  display: grid; place-items: center; padding: 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.tc-delete svg { width: 18px; height: 18px; display: block; }
.tc-delete .td-lid { transform-origin: 12px 6px; transition: transform .22s cubic-bezier(.3, .9, .4, 1.3); }
.tc-delete:hover {
  color: var(--danger); border-color: rgba(233, 106, 106, .5);
  background: rgba(233, 106, 106, .14); transform: translateY(-1px);
}
.tc-delete:hover .td-lid { transform: rotate(-16deg) translateY(-1px); }
.tc-delete:active { transform: translateY(0) scale(.94); }
.tc-delete:disabled { opacity: .5; cursor: wait; }
.empty-state { text-align: center; padding: 70px 20px; color: var(--paper-dim); font-weight: 300; }
.empty-state .big { font-size: 3rem; margin-bottom: 14px; }

/* ---------- AI builder ---------- */

.draft-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 18px; border-radius: var(--radius-sm);
  background: rgba(143, 216, 196, .08); border: 1px solid rgba(143, 216, 196, .3);
  color: var(--mint); font-weight: 600; font-size: .93rem;
  animation: pop .3s cubic-bezier(.2, .9, .3, 1.1);
}
.draft-banner[hidden] { display: none; }
.draft-actions { display: flex; gap: 8px; flex-shrink: 0; }
.draft-banner .btn { padding: 7px 14px; font-size: .85rem; }

.manual-link {
  display: block; width: 100%; margin-top: 16px; padding: 8px;
  background: none; border: none; cursor: pointer; text-align: center;
  color: rgba(245, 239, 227, .45); font-family: var(--font-body); font-size: .88rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.manual-link:hover { color: var(--paper-dim); }

.ai-prefs { margin-bottom: 14px; }
.ai-prefs-label { display: block; font-size: .88rem; font-weight: 600; color: var(--paper-dim); margin: 10px 0 8px; }
.ai-prefs-label small { font-weight: 300; }
.ai-prefs textarea {
  width: 100%; background: rgba(6, 13, 11, .55);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  color: var(--paper); font-family: var(--font-body); font-size: .95rem;
  padding: 10px 14px; outline: none; resize: vertical; transition: border-color .2s ease;
}
.ai-prefs textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 180, 95, .12); }
.interest-row { display: flex; flex-wrap: wrap; gap: 7px; }
.interest-chip {
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: rgba(6, 13, 11, .5); border: 1px solid var(--glass-border);
  color: var(--paper-dim); font-family: var(--font-body); font-size: .86rem; font-weight: 600;
  transition: all .15s ease;
}
.interest-chip:hover { transform: translateY(-2px); color: var(--paper); }
.interest-chip.selected {
  background: rgba(255, 180, 95, .15); border-color: rgba(255, 180, 95, .55); color: var(--amber);
}
.ai-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-modes .btn { flex: 1; justify-content: center; min-width: 150px; }
.ai-area-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .14); }
.range-row { display: flex; align-items: center; gap: 8px; color: var(--paper-dim); font-size: .92rem; }
.range-row input {
  width: 64px; text-align: center; background: rgba(6, 13, 11, .55);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  color: var(--paper); font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  padding: 10px 6px; outline: none;
}
.ai-status { min-height: 1.4em; margin-top: 10px; font-size: .92rem; font-weight: 600; }
.ai-status.working { color: var(--amber); animation: pulse 1.6s ease-in-out infinite; }
.ai-status.done { color: var(--mint); }
.ai-status.error { color: var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- stop cards + the shared stop sheet ---------- */

.item-top > .item-del { margin-inline-start: 0; }
/* the whole card is one tap target — it opens the stop sheet (same as the calendar) */
.item-card.tappable { cursor: pointer; transition: border-color .25s ease, background .25s ease; }
.item-card.tappable:hover { border-color: rgba(255, 180, 95, .28); }

.item-more-place {
  display: flex; align-items: flex-start; gap: 7px; margin-bottom: 10px;
  padding: 8px 11px; border-radius: 10px;
  background: rgba(6, 13, 11, .38); border: 1px solid var(--glass-border);
  color: var(--paper-dim); font-size: .84rem; line-height: 1.5;
}
.item-more-place .imp-pin { flex-shrink: 0; filter: grayscale(.2); }
.item-more-place .imp-text { direction: ltr; text-align: left; word-break: break-word; }
.item-mini-map {
  width: 100%; height: 210px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  display: block; filter: saturate(.85) contrast(1.05);
}

/* place photo gallery (Wikimedia Commons) */
.stop-gallery {
  display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px;
}
/* fixed slots so the strip never reflows: the slot shimmers, the photo fades in over it */
.gal-ph {
  position: relative; display: block; flex: 0 0 auto;
  width: 118px; height: 88px; border-radius: 10px;
}
.stop-gallery img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 10px; cursor: zoom-in; border: 1px solid var(--glass-border);
  opacity: 0; transition: opacity .35s ease, transform .18s ease;
}
.stop-gallery img.loaded { opacity: 1; }
.stop-gallery img:hover { transform: scale(1.05); }

.lightbox {
  position: fixed; inset: 0; z-index: 400; cursor: zoom-out;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 9, 7, .88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: pop .2s ease;
}
.lightbox img {
  max-width: 92vw; max-height: 88vh; border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}
.item-area {
  font-size: .76rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 180, 95, .1); color: var(--amber); border: 1px solid rgba(255, 180, 95, .3);
}

/* ---------- skeleton loading ---------- */
/* the placeholders sit inside the real containers (chip, day block, stop card,
   weather day, hotel row) and only stand in for the text, so every shape keeps
   its true size and nothing reflows when the content lands */

.skl {
  display: inline-block; vertical-align: middle; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skl { animation: none; } }

/* hero: a bar inside the h1 and inside each real chip — the line box sets the height */
.skl-title { width: min(420px, 58%); height: .6em; border-radius: 14px; }
.skl-chip { pointer-events: none; }
.skl-chip .skl { display: block; width: 64px; height: 1.32em; border-radius: 999px; }
.skl-chip.long .skl { width: 72px; }
.skl-chip.short .skl { width: 48px; }

/* paragraph: one bar per text line, on the container's own line rhythm */
.skl-desc { display: flex; flex-direction: column; gap: 1.08em; padding-block: .54em; }
.skl-desc .skl { height: .72em; }
.skl-desc .skl.short { width: 62%; }

/* itinerary: real day block + timeline + stop card, text swapped for bars */
.skl-badge { width: 54px; height: 30px; border-radius: 999px; }
.skl-daydate { width: 132px; height: 14px; }
.skl-stop::before { background: rgba(255, 255, 255, .16); box-shadow: 0 0 0 4px rgba(255, 255, 255, .05); }
.skl-stop-time { width: 34px; height: 13px; }
.skl-stop-title { width: 46%; height: 15px; margin-inline-end: auto; }
.skl-stop-title.narrow { width: 34%; }
.skl-stop-title.wide { width: 58%; }
.skl-stop-cat { width: 54px; height: 25px; border-radius: 999px; }
.skl-stop-note { width: 78%; height: 13px; }
.skl-stop-note.short { width: 52%; }
/* calendar placeholder (long trips): the real toolbar, month grid and cell metrics */
.skl-cal-seg { width: 201px; height: 45px; border-radius: 999px; }
.skl-cal-title { width: 168px; height: 15px; }
.skl-cal-fs { width: 105px; height: 36px; border-radius: 999px; }
.skl-legend { height: 17px; align-items: center; }
.skl-cl-name { width: 54px; height: 11px; border-radius: 4px; }
.skl-dow-row { height: 17px; align-items: center; }
.skl-cal-dow { width: 22px; height: 12px; margin-inline: auto; border-radius: 4px; }
.skl-cell { pointer-events: none; --area-c: rgba(255, 255, 255, .14); }
.skl-cell .cc-head { height: 20px; align-items: center; }
.skl-cc-num { width: 18px; height: 13px; border-radius: 4px; }
.skl-cc-area { width: 62%; height: 9px; border-radius: 4px; }
.skl-cc-evt { display: block; height: 23px; border-radius: 7px; }
.skl-cc-evt:nth-child(2) { width: 78%; }
.skl-cc-evt:nth-child(3) { width: 60%; }
.skl-cc-more { width: 46px; height: 9px; border-radius: 4px; }
/* phones stack the toolbar and shrink the month cell to number + dots (see .cal-evt below) */
@media (max-width: 640px) {
  .skl-cal-fs { width: auto; align-self: stretch; }
  .skl-cc-evt { display: none; }
  .skl-cell .cc-dots i { background: rgba(255, 255, 255, .18); }
}
.skl-cal-hint { width: 190px; height: 12px; }

/* ticket code — the .code line box holds the height */
.skl-code { width: 168px; height: .58em; border-radius: 10px; }

/* weather strip: one bar stack per real .weather-day column */
.weather-day .skl { display: block; margin-inline: auto; }
.skl-wd-name { width: 26px; height: 15px; border-radius: 5px; }
.skl-wd-icon { width: 26px; height: 26px; border-radius: 50%; margin-block: 5px; }
.skl-wd-temp { width: 34px; height: 17px; border-radius: 5px; }

/* home search results: real row, real 52px thumb slot */
.skl-thumb { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; }
.skl-sr-text { display: flex; flex-direction: column; gap: 6px; }
.skl-sr-title { width: 190px; height: 15px; }
.skl-sr-meta { width: 124px; height: 12px; }

/* admin: stat tiles keep their real line boxes, panel rows keep the table rhythm */
.skl-stat-n { width: 58px; height: .6em; border-radius: 8px; }
.skl-stat-label { width: 96px; height: .72em; }
.skl-stat-sub { width: 74px; height: .72em; }
.skl-rows { display: flex; flex-direction: column; gap: 25px; padding: 12px; }
.skl-rows .skl { height: 19px; }

/* trip cards: the full card footprint, per grid */
.skl-tripcard { display: block; flex: 0 0 292px; height: 332px; border-radius: var(--radius); }
.my-grid .skl-tripcard { height: 252px; }

/* ---------- edit location inline form ---------- */

.edit-loc-btn {
  display: block; width: 100%; padding: 9px; margin-top: 10px;
  background: transparent; border: 1px dashed rgba(143, 216, 196, .45); border-radius: var(--radius-sm);
  color: var(--mint); font-family: var(--font-body); font-weight: 700; font-size: .88rem; cursor: pointer;
  transition: background .15s ease;
}
.edit-loc-btn:hover { background: rgba(143, 216, 196, .08); }
.edit-loc-form { margin-top: 10px; }
.edit-loc-form input {
  width: 100%; background: rgba(6, 13, 11, .55);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  color: var(--paper); font-family: var(--font-body); font-size: .95rem;
  padding: 10px 14px; outline: none;
}
.edit-loc-form input:focus { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 180, 95, .12); }

/* AI clarifying questions */
.aiq { margin-top: 14px; }
.aiq-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.aiq-other-text { margin-top: 8px; }
.aiq-opt.active {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: #241302; border-color: transparent;
}

/* ---------- full-screen AI planning overlay ---------- */

.ai-overlay {
  position: fixed; inset: 0; z-index: 500; display: none;
  align-items: center; justify-content: center; text-align: center;
  background: rgba(5, 11, 9, .55);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
.ai-overlay.open { display: flex; animation: overlay-in .4s ease; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

/* two stacked edge-glows crossfading = breathing, animating opacity only (GPU-cheap) */
.ai-glow { position: absolute; inset: 0; pointer-events: none; }
.ai-glow.g1 {
  box-shadow: inset 0 0 110px 24px rgba(232, 133, 58, .38);
  animation: breathe-a 3s ease-in-out infinite alternate;
}
.ai-glow.g2 {
  box-shadow: inset 0 0 230px 70px rgba(255, 180, 95, .45);
  opacity: 0;
  animation: breathe-b 3s ease-in-out infinite alternate;
}
@keyframes breathe-a { from { opacity: 1; } to { opacity: .25; } }
@keyframes breathe-b { from { opacity: 0; } to { opacity: 1; } }

.ai-overlay-content { position: relative; padding: 20px; max-width: 90vw; }
.ai-orb {
  font-size: 3.2rem; line-height: 1; margin-bottom: 18px;
  animation: orb-float 3s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 24px rgba(255, 180, 95, .8));
}
@keyframes orb-float {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-10px) scale(1.12); }
}
.ai-overlay-title {
  font-family: var(--font-display); font-size: clamp(1.5rem, 5vw, 2.3rem);
  color: var(--paper); text-shadow: 0 0 40px rgba(255, 180, 95, .35);
}
.ai-overlay-sub {
  margin-top: 12px; color: var(--amber); font-weight: 600; font-size: 1.02rem;
  min-height: 1.6em; transition: opacity .4s ease;
}
.ai-overlay-sub.swap { opacity: 0; }

/* ---------- trip actions, edit mode, owner box ---------- */

.action-bar {
  /* top: clears the fixed site-header (14px inset + ~62px height + breathing room) */
  position: sticky; top: 86px; z-index: 90;
  width: min(1120px, calc(100% - 40px)); margin: 30px auto 0;
  padding: 5px; border-radius: 14px;
}
.action-row { display: flex; gap: 4px; }
.action-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border: 0; border-radius: 10px; background: transparent;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--paper-dim);
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.action-btn.liked { color: #ff8896; }
.action-btn.liked .ic-heart { fill: currentColor; }
/* the draft ceremony button — the one amber action in the bar */
.action-btn.finish { color: var(--amber); background: rgba(255, 180, 95, .12); font-weight: 800; }
/* hover only where a pointer really hovers — on touch it sticks after the tap
   and leaves a button looking permanently selected */
@media (hover: hover) {
  .action-btn:hover { background: var(--glass-strong); color: var(--paper); }
  .action-btn.finish:hover { background: rgba(255, 180, 95, .22); color: var(--amber); }
}

/* draft state: the hero chip + the sidebar card that stands in for the ticket */
.draft-card { text-align: center; }
.draft-card-sub { color: var(--paper-dim); font-weight: 300; font-size: .9rem; line-height: 1.5; margin: 0 0 14px; }
.modal.celebrate { text-align: center; }
.modal.celebrate .big-emoji { font-size: 3.4rem; animation: pop .5s cubic-bezier(.2, .9, .3, 1.3); }

.day-date { font-family: var(--font-body); font-size: .88rem; font-weight: 400; color: var(--paper-dim); }
.day-weather {
  font-family: var(--font-body); font-size: .85rem; font-weight: 700; color: var(--mint);
  background: rgba(143, 216, 196, .1); border: 1px solid rgba(143, 216, 196, .25);
  padding: 4px 11px; border-radius: 999px; margin-inline-start: auto;
}

.item-del {
  background: transparent; border: none; color: var(--danger); cursor: pointer;
  font-size: 1rem; opacity: .7; margin-inline-start: 8px;
}
.item-del:hover { opacity: 1; }
.add-item-inline {
  display: block; width: 100%; padding: 11px; margin-top: 4px;
  background: transparent; border: 1px dashed rgba(255, 180, 95, .45); border-radius: var(--radius-sm);
  color: var(--amber); font-family: var(--font-body); font-weight: 700; font-size: .92rem; cursor: pointer;
  transition: background .15s ease;
}
.add-item-inline:hover { background: rgba(255, 180, 95, .09); }
.inline-item-form { padding: 18px; margin: 10px 0; }

/* ---------- participants modal ----------
   Two jobs, ranked: see who's in (the list) and pull more people in (invite).
   Sections carry their own quiet label so neither needs a heavy divider. */

.modal-people { width: min(460px, 100%); padding: 0; max-height: min(88vh, 720px); display: flex; flex-direction: column; }
.pm-head { padding: 24px 24px 16px; border-bottom: 1px solid var(--glass-border); }
.modal-people h2 { font-size: 1.4rem; padding-inline-end: 40px; }
.modal-people .modal-sub { margin: 0; font-size: .9rem; line-height: 1.45; }
.pm-body { overflow-y: auto; padding: 4px 24px 24px; overscroll-behavior: contain; }

.pm-sec { padding-top: 18px; }
.pm-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pm-sec-title {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mint);
}
.pm-count {
  font-size: .72rem; font-weight: 800; color: var(--paper-dim);
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.pm-sec-sub { color: var(--paper-dim); font-size: .88rem; line-height: 1.5; margin: 0 0 12px; }

.pt-list { display: flex; flex-direction: column; gap: 4px; }
.pt-row {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px;
  border-radius: var(--radius-sm); transition: background .15s ease;
}
.pt-row:hover { background: var(--glass); }
.pt-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
  /* role-coded, so the organiser reads at a glance without an extra badge */
  background: rgba(143, 216, 196, .14); border: 1px solid rgba(143, 216, 196, .38); color: var(--mint);
}
.pt-row.owner .pt-avatar {
  background: rgba(255, 180, 95, .16); border-color: rgba(255, 180, 95, .45); color: var(--amber);
  box-shadow: 0 0 0 3px rgba(255, 180, 95, .08);
}
.pt-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pt-name {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-weight: 700; font-size: .98rem;
}
.pt-name-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-me {
  flex: none; font-size: .68rem; font-weight: 700; color: var(--paper-dim);
  border: 1px solid var(--glass-border); border-radius: 999px; padding: 0 7px;
}
.pt-role { font-size: .8rem; color: var(--paper-dim); font-weight: 400; }
.pt-row.owner .pt-role { color: rgba(255, 180, 95, .8); font-weight: 600; }
.pt-remove {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 50%;
  color: var(--paper-dim); cursor: pointer; opacity: 0;
  transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.pt-row:hover .pt-remove, .pt-remove:focus-visible { opacity: 1; }
.pt-remove:hover { color: var(--danger); background: rgba(255, 122, 110, .12); border-color: rgba(255, 122, 110, .3); }
/* touch has no hover — the action must be reachable there */
@media (hover: none) { .pt-remove { opacity: .55; } }

/* side by side while both labels fit; one per row on narrow phones */
.pm-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
/* the label wraps rather than spilling out of the pill on very narrow phones */
.pm-actions .btn { justify-content: center; padding-inline: 12px; white-space: normal; text-align: center; }
.pm-invite .copy-feedback { margin-top: 6px; text-align: center; }
.pm-quiet-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-quiet {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: transparent; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .84rem; font-weight: 600; color: var(--paper-dim);
  transition: color .15s ease;
}
.pm-quiet .ic { width: 14px; height: 14px; }
.pm-quiet:hover { color: var(--amber); }
.pm-quiet:disabled { opacity: .5; cursor: wait; }
.pm-quiet-hint { font-size: .78rem; color: rgba(207, 199, 182, .6); }

@media (max-width: 400px) {
  .pm-head { padding: 20px 18px 14px; }
  .pm-body { padding: 4px 18px 20px; }
}

/* ---------- publish setting row (TRIP MAKER PASS card) ---------- */

.ticket-setting { text-align: start; margin-top: 14px; }
.ticket-setting .divider { margin-bottom: 14px; }
.pm-setting {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 10px; margin: -10px; border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.pm-setting:hover { background: var(--glass); }
.pm-setting-ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--paper-dim);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.pm-setting:has(:checked) .pm-setting-ic {
  color: var(--amber); border-color: rgba(255, 180, 95, .4); background: rgba(255, 180, 95, .12);
}
.pm-setting-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-setting-title { font-weight: 700; font-size: .95rem; }
.pm-setting-desc { font-size: .8rem; color: var(--paper-dim); line-height: 1.45; font-weight: 300; }

.pm-switch { position: relative; width: 46px; height: 27px; flex: none; }
.pm-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.pm-switch-track {
  position: absolute; inset: 0; border-radius: 999px; display: flex; align-items: center; padding: 3px;
  background: rgba(6, 13, 11, .55); border: 1px solid var(--glass-border);
  transition: background .2s ease, border-color .2s ease;
}
.pm-switch-knob {
  width: 19px; height: 19px; border-radius: 50%; background: var(--paper-dim);
  transition: transform .2s cubic-bezier(.3, .8, .4, 1.2), background .2s ease;
}
.pm-switch input:checked + .pm-switch-track {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep)); border-color: transparent;
}
/* the app is RTL, so "on" travels leftwards */
.pm-switch input:checked + .pm-switch-track .pm-switch-knob { transform: translateX(-19px); background: #241302; }
.pm-switch input:focus-visible + .pm-switch-track { box-shadow: 0 0 0 4px rgba(255, 180, 95, .18); }
.pm-switch input:disabled { cursor: wait; }

/* ---------- invite join banner (bottom, above the action bar) ---------- */

.join-banner {
  position: fixed; bottom: 14px; inset-inline: 14px; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; border-radius: var(--radius);
  border: 1px solid rgba(255, 180, 95, .45);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.join-banner .jb-text { font-weight: 700; font-size: .95rem; text-align: center; }
body:has(.join-banner) { padding-bottom: 92px; }

/* participant (not owner) badge on my-trips cards — sits under the days chip (top-left) */
.tc-role {
  position: absolute; top: 52px; left: 14px; z-index: 2;
  font-size: .72rem; font-weight: 700; color: var(--mint);
  background: rgba(10, 21, 18, .75); border: 1px solid rgba(143, 216, 196, .45);
  border-radius: 999px; padding: 3px 10px;
}
.tc-role.draft { color: var(--amber); border-color: rgba(255, 180, 95, .5); }

/* /my section split: drafts ("בתכנון") above the finished trips */
.my-sec { font-family: var(--font-display); font-size: 1.25rem; margin: 26px 0 14px; }
.my-sec:first-child { margin-top: 0; }
.my-sec-hint { color: var(--paper-dim); font-weight: 300; padding: 6px 2px 18px; }

/* ---------- print: clean light route sheet ---------- */

@media print {
  body { background: #fff !important; color: #111 !important; }
  body::after, .atmosphere, .site-header, .site-footer, .action-bar, .ticket .divider ~ button,
  #wa-share, #copy-code, #copy-link, .copy-feedback, .join-banner, .dest-switcher, #publish-row,
  .map-card, .add-item-inline, .item-del, .inline-item-form,
  .modal-backdrop, .budget-page, .hero-bg, .hero-veil, .ai-edit-card,
  .view-toggle, .cal-toolbar, .cal-day-strip, .cal-hint,
  /* the draft card is an invitation to press "שמירת הטיול" — it has no business
     on paper, where nothing can be pressed */
  #draft-card { display: none !important; }
  /* the forecast prints only when it speaks about the trip's own days — a real
     one (.wx-trip) or the typical-for-the-dates estimate (.wx-est); otherwise
     it's just the coming week at the destination, which the sheet would read
     as the trip's weather */
  #weather-card:not(.wx-trip):not(.wx-est) { display: none !important; }
  /* printing from fullscreen: the calendar prints as a normal block, not a fixed overlay */
  .cal-wrap.cal-full { position: static !important; padding: 0 !important; background: none !important; }
  .trip-hero { min-height: auto; padding: 20px 0; }
  .trip-hero h1, .trip-hero .crumb { color: #111; text-shadow: none; }
  .trip-layout { display: block; width: 100%; }
  .glass, .item-card, .trip-desc, .side-card {
    background: #fff !important; border: 1px solid #ddd !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: #111 !important;
  }
  .item-note, .trip-desc, .tc-dest { color: #444 !important; }
  .chip { background: #f3f3f3 !important; border-color: #ddd !important; color: #111 !important; }
  .day-badge { background: #111 !important; color: #fff !important; }
  .timeline::before { background: #ccc; }
  .item-card::before { background: #999; box-shadow: none; }
  .item-time { color: #666; }
  .item-cat { background: #f3f3f3; color: #555; border-color: #ddd; }
  .ticket { border: 2px dashed #999 !important; }
  .ticket .code { color: #111; text-shadow: none; }
  .ticket-label { color: #666 !important; }
  #weather-card { page-break-inside: avoid; }
  .day-block { page-break-inside: avoid; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .trip-layout { grid-template-columns: minmax(0, 1fr); }
  .trip-side { position: static; }
  .steps-grid { grid-template-columns: 1fr; }
  .cover-grid { grid-template-columns: repeat(2, 1fr); }
  .action-btn { padding: 9px 8px; font-size: .84rem; gap: 6px; }
}

@media (max-width: 640px) {
  /* the phone branch tightens the gutters — it must carry the safe-area insets
     with it, or it drops the ones the base rule set and puts the header back
     under the notch on exactly the devices that have one */
  .site-header {
    top: calc(10px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
    left: calc(10px + env(safe-area-inset-left));
    padding: 8px 12px;
  }
  .trip-hero { min-height: 48vh; padding: 100px 16px 28px; }
  .trip-layout { width: calc(100% - 24px); margin-top: 24px; }
  /* keep the description to 2 lines so the itinerary below it is visible without
     scrolling on first paint — "הצג עוד" (below) reveals the rest on demand */
  .trip-desc { padding: 14px 16px; font-size: .92rem; line-height: 1.55; }
  .trip-desc-text {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .trip-desc-text.expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .trip-meta .chip { font-size: .82rem; padding: 7px 12px; }
  .day-weather { margin-inline-start: 0; }
  .item-card { padding: 14px 15px; }
  .timeline { padding-right: 20px; }
  .item-card::before { right: -18px; }
  .item-mini-map { height: 180px; }
  .gal-ph { width: 102px; height: 76px; }
  .logo .logo-he { display: none; }
  .logo .logo-user { max-width: 130px; font-size: .88rem; }
  .btn { padding: 8px 14px; font-size: .88rem; }
  .hero { min-height: 88vh; padding-top: 100px; }
  .trip-card { flex-basis: 248px; }
  .tc-media { height: 300px; }
  .skl-tripcard { flex-basis: 248px; height: 302px; }
  .my-grid .skl-tripcard { height: 252px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
  /* the numbered stepper eats a whole row on a phone — the panel headings and
     the back buttons already say where you are */
  .wizard-progress { display: none; }
  .strip-nav { display: none; }
  .ticket .code { font-size: 2.2rem; letter-spacing: .14em; }
  .weather-row { overflow-x: auto; }
  .weather-day { min-width: 44px; }
  /* --dock-h is the dock at its tallest (six actions, two-line labels) — what the
     page below has to clear, measured rather than guessed */
  :root { --dock-h: 76px; --dock-inset: calc(10px + env(safe-area-inset-bottom)); }
  /* the action bar becomes a floating glass dock rather than a black tray bolted
     to the screen edge: the trip keeps scrolling behind it, so it reads as part
     of the same surface as every other panel in the app */
  .action-bar {
    position: fixed; top: auto; bottom: var(--dock-inset);
    /* one max() rather than a left/right pair: env() is physical while inset-inline
       is logical, and in RTL the two swap — a symmetric dock doesn't care which
       side the notch is on, and landscape is the only case where either is set */
    inset-inline: calc(10px + max(env(safe-area-inset-left), env(safe-area-inset-right)));
    width: auto; margin: 0;
    padding: 5px; border-radius: 18px; z-index: 120;
    border: 1px solid var(--glass-border);
    /* a white film for the glass, over just enough ink to keep labels legible */
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03)),
      rgba(11, 24, 20, .62);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    box-shadow:
      0 18px 40px -14px rgba(0, 0, 0, .75), 0 2px 10px -5px rgba(0, 0, 0, .5),
      inset 0 1px 0 var(--glass-highlight);
  }
  /* the blur is what makes it readable over moving content — without it, lean opaque */
  @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .action-bar {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)),
        rgba(11, 24, 20, .95);
    }
  }
  .action-row { gap: 2px; }
  .action-btn {
    flex-direction: column; gap: 4px; min-width: 0; min-height: 54px;
    padding: 8px 3px 7px; border-radius: 13px;
    font-size: .67rem; font-weight: 700; color: rgba(240, 233, 220, .82);
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, color .15s ease, transform .12s ease;
  }
  .action-btn .ic { width: 20px; height: 20px; }
  /* six actions on a 375px screen: a label like "העתקה לעצמי" wraps to a second
     line rather than being cut to "העתק…" — a truncated verb helps nobody */
  .action-btn .ab-label {
    max-width: 100%; text-align: center; line-height: 1.15; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* touch has no hover — the pressed state is the only feedback that means anything */
  .action-btn:active { background: var(--glass-strong); color: var(--paper); transform: scale(.94); }
  /* the one primary action is a filled pill, not another grey icon in the row */
  .action-btn.finish {
    flex: 1.35; color: #2a1500;
    background: linear-gradient(180deg, var(--amber), var(--amber-deep));
    box-shadow: 0 6px 16px -7px rgba(255, 180, 95, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
  }
  .action-btn.finish:active { color: #2a1500; background: var(--amber-deep); }
  /* the dock floats, so the page has to end above it — not behind it */
  body:has(.action-bar) { padding-bottom: calc(var(--dock-h) + 34px + env(safe-area-inset-bottom)); }
  /* and the invite banner stacks on top of the dock instead of landing on it */
  body:has(.action-bar) .join-banner { bottom: calc(var(--dock-h) + 20px + env(safe-area-inset-bottom)); }
  body:has(.action-bar):has(.join-banner) { padding-bottom: calc(var(--dock-h) + 120px + env(safe-area-inset-bottom)); }
}

/* very narrow phones */
@media (max-width: 420px) {
  .nav-actions { gap: 6px; }
  .nav-menu-btn { width: 38px; height: 38px; }
  .nav-menu-panel { min-width: 200px; }
  .btn { padding: 8px 11px; font-size: .84rem; }
  .logo .logo-stack { width: 50px; }
  .logo .logo-stack .ls-trip { font-size: 18px; }
  .logo .logo-stack .ls-maker { font-size: 9px; }
  .site-header { padding: 7px 10px; }
  .ticket { --ticket-pad: 14px; padding: 20px var(--ticket-pad); }
  .ticket .code { font-size: 1.85rem; letter-spacing: .1em; }
  .ticket::before, .ticket::after { display: none; }
  .trip-hero h1 { font-size: 1.75rem; }
  .chip { font-size: .78rem; padding: 6px 10px; }
  .item-badges .item-area { display: none; } /* the tightest phones: area reads in the expanded card */
}

/* ============================================================
   Hotels + budget: wide modals, night strip, ring, category bars
   ============================================================ */

/* wide modal with an inner scroll area and a sticky-feeling head */
.modal-wide {
  width: min(640px, 100%); padding: 0;
  display: flex; flex-direction: column; max-height: 88vh;
}
.mw-head { padding: 24px 26px 14px; border-bottom: 1px solid var(--glass-border); }
.mw-head h2 { margin-bottom: 2px; }
.mw-head .modal-sub { margin-bottom: 0; min-height: 0; }
.mw-body { overflow-y: auto; padding: 18px 26px 26px; }
.mw-controls { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mw-footnote { text-align: center; color: rgba(245, 239, 227, .45); font-size: .86rem; margin-top: 16px; }

/* segmented control */
.seg {
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(6, 13, 11, .55); border: 1px solid var(--glass-border);
}
.seg button {
  flex: 1; padding: 8px 10px; border: none; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: transparent; color: var(--paper-dim);
  font-family: var(--font-body); font-weight: 700; font-size: .9rem;
  transition: all .18s ease; white-space: nowrap;
}
.seg button .ic { width: 15px; height: 15px; }
.seg button.active {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep)); color: #241302;
}
.mode-hint { text-align: center; font-size: .8rem; color: rgba(245, 239, 227, .5); }

/* ---------- hotels modal ---------- */

.night-strip { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.night-seg {
  flex: 1 0 34px; min-width: 34px; height: 46px; position: relative; cursor: pointer;
  display: grid; place-items: center; border-radius: 10px;
  background: rgba(6, 13, 11, .5); border: 1px solid var(--glass-border);
  color: var(--paper); font-family: var(--font-body); font-weight: 700; font-size: .88rem;
  transition: transform .15s ease;
}
.night-seg:hover { transform: translateY(-2px); }
.night-seg.empty {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 12px);
  color: var(--paper-dim);
}
.night-seg .ns-dot {
  position: absolute; bottom: 5px; width: 6px; height: 6px; border-radius: 50%;
}
.night-dests { display: flex; gap: 4px; margin-top: 6px; }
.night-dests span {
  flex-basis: 0; text-align: center; font-size: .76rem; font-weight: 600; color: var(--mint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coverage-line {
  margin-top: 12px; padding: 9px 14px; border-radius: var(--radius-sm);
  background: rgba(255, 180, 95, .08); border: 1px solid rgba(255, 180, 95, .25);
  color: var(--amber); font-weight: 600; font-size: .92rem;
}
.coverage-line.ok { background: rgba(143, 216, 196, .08); border-color: rgba(143, 216, 196, .3); color: var(--mint); }

.hotel-card {
  margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: rgba(6, 13, 11, .4); border: 1px solid var(--glass-border);
  border-inline-start-width: 3px;
}
.hc-top { display: flex; align-items: center; gap: 10px; }
.hc-name { font-weight: 700; flex: 1; min-width: 0; }
.hc-status {
  border: 1px solid var(--glass-border); border-radius: 999px; padding: 5px 12px;
  cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: .8rem;
  background: rgba(143, 216, 196, .12); color: var(--mint);
}
.hc-status.idea { background: rgba(255, 180, 95, .1); color: var(--amber); }
.hc-nights { color: var(--paper-dim); font-size: .88rem; margin-top: 5px; }
.hc-nights small { opacity: .75; }
.hc-details { color: var(--amber); font-size: .88rem; font-weight: 600; margin-top: 5px; }
.hc-warn { color: var(--danger); font-size: .84rem; font-weight: 600; margin-top: 6px; }
.hc-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: .86rem; }
.hc-actions a { color: var(--mint); text-decoration: none; font-weight: 600; }
.hc-actions a:hover { text-decoration: underline; }
.hc-spacer { flex: 1; }
/* the row's stroke icons ride the text baseline, a notch smaller than .ic's default */
.hc-actions .ic { width: 14px; height: 14px; vertical-align: -2px; }

/* ---- night cards: where you sleep, inside the itinerary ----
   A night without a hotel is a hole in the plan, so it renders between the day
   it follows and the next one instead of hiding behind a button. It stays
   quieter than a day block on purpose — it connects days, it doesn't compete
   with them. A booked night collapses to a slim strip in that hotel's colour. */
.night-card {
  margin: 6px 0 18px; padding: 12px 14px 13px;
  border-radius: var(--radius-sm);
  background: rgba(6, 13, 11, .38);
  border: 1px solid var(--glass-border);
  border-inline-start: 3px solid rgba(255, 180, 95, .5);
}
/* the whole header is the collapse control — a chevron alone is a small target
   on a phone, and the row is doing nothing else */
.nc-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%; background: none; border: none; padding: 0;
  font: inherit; color: inherit; text-align: start; cursor: pointer;
}
.nc-head .ic { width: 15px; height: 15px; color: var(--amber); flex: none; }
.nc-head .nc-chev {
  margin-inline-start: auto; color: var(--paper-dim);
  transition: transform .15s ease;
}
.nc-head:hover .nc-chev { color: var(--paper); }
.night-card.collapsed .nc-chev { transform: rotate(90deg); }
/* collapsed: the night still announces itself, it just stops taking the room */
.night-card.collapsed { padding-bottom: 12px; }
.night-card.collapsed .nc-hint,
.night-card.collapsed .nc-rail,
.night-card.collapsed .nc-empty,
.night-card.collapsed .nc-foot { display: none; }
.nc-title { font-weight: 700; font-size: .95rem; }
.nc-where { color: var(--paper-dim); font-size: .86rem; font-weight: 300; }
.nc-hint {
  color: var(--paper-dim); font-size: .84rem; font-weight: 300;
  margin-top: 3px; line-height: 1.5;
}

/* one row, scrolled sideways: a night offers a few options, never a catalogue */
.nc-rail {
  display: flex; gap: 8px; margin-top: 10px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 4px;
  /* no scrollbar-width / no ::-webkit-scrollbar override here on purpose: the
     amber glass rail at the top of this file is global, and setting either one
     locally is what switches Chrome and Safari back to the native bar */
}

.nc-hotel {
  flex: 0 0 148px; scroll-snap-align: start;
  background: rgba(22, 48, 42, .55); border: 1px solid var(--glass-border);
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
}
/* fixed ratio so the row never reflows as photos arrive */
.nc-photo {
  position: relative; aspect-ratio: 4 / 3; background: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
}
/* the icon is the resting state; a photo that loads covers it, and one that
   fails removes itself and uncovers it again */
.nc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-photo .ic { width: 20px; height: 20px; color: rgba(207, 199, 182, .35); }
.nc-body { padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nc-name {
  font-weight: 600; font-size: .8rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nc-score { color: var(--mint); font-size: .75rem; font-weight: 600; }
.nc-score span { color: var(--paper-dim); font-weight: 300; }
.nc-dist { color: var(--paper-dim); font-size: .73rem; font-weight: 300; }
/* the price is the tile's loudest line — it arrives a beat after the photo */
.nc-price { font-size: .84rem; font-weight: 700; color: var(--amber); margin-top: 2px; }
.nc-price.muted, .nc-price.loading { color: var(--paper-dim); font-weight: 300; font-size: .73rem; }
.ncp-from { font-weight: 300; font-size: .73rem; color: var(--paper-dim); }
.ncp-per { font-weight: 300; font-size: .7rem; color: var(--paper-dim); }

.nc-hotel { cursor: pointer; }
.nc-hotel:hover { border-color: rgba(143, 216, 196, .4); }
.nc-hotel:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.nc-actions { display: flex; gap: 5px; margin-top: auto; padding-top: 6px; }
.nc-cta {
  flex: 1; text-align: center; text-decoration: none;
  background: rgba(255, 180, 95, .14); border: 1px solid rgba(255, 180, 95, .3);
  color: var(--amber); border-radius: 8px; padding: 4px 6px;
  font-size: .73rem; font-weight: 700; white-space: nowrap;
}
.nc-cta:hover { background: rgba(255, 180, 95, .24); }
.nc-save {
  flex: none; width: 26px; border: 1px solid var(--glass-border); border-radius: 8px;
  background: transparent; color: var(--paper-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nc-save:hover { color: var(--mint); border-color: rgba(143, 216, 196, .45); }
.nc-save .ic { width: 13px; height: 13px; }
.nc-save.saved { color: var(--mint); border-color: rgba(143, 216, 196, .45); }

.nc-foot { display: flex; align-items: center; gap: 14px; margin-top: 9px; font-size: .82rem; }
.nc-foot a, .nc-foot button {
  color: var(--mint); font-weight: 600; text-decoration: none;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .82rem;
}
.nc-foot a:hover, .nc-foot button:hover { text-decoration: underline; }
.nc-foot .ic { width: 13px; height: 13px; vertical-align: -2px; }
.nc-empty { color: var(--paper-dim); font-size: .84rem; font-weight: 300; margin-top: 8px; }

/* static placeholders — no shimmer: this UI is often rendered in software */
.nc-skel { flex: 0 0 148px; border-radius: 12px; background: rgba(22, 48, 42, .35); height: 158px; }

/* a settled night: one line, the hotel's own colour, no sales surface */
.night-booked {
  margin: 6px 0 18px; padding: 9px 13px; border-radius: var(--radius-sm);
  background: rgba(6, 13, 11, .3); border: 1px solid var(--glass-border);
  border-inline-start-width: 3px; border-inline-start-style: solid;
  display: flex; align-items: center; gap: 10px;
}
.night-booked .ic { width: 16px; height: 16px; flex: none; }
.nb-text { min-width: 0; }
.nb-name { font-weight: 600; font-size: .88rem; }
.nb-meta { color: var(--paper-dim); font-size: .78rem; font-weight: 300; margin-top: 2px; }
.nb-edit {
  margin-inline-start: auto; flex: none; background: none; border: none; cursor: pointer;
  color: var(--paper-dim); font-family: var(--font-body); font-size: .8rem; font-weight: 600;
}
.nb-edit:hover { color: var(--paper); }

/* ---- hotel sheet: the detail view behind a night-card tile ---- */
.hs-hero { border-radius: 12px; overflow: hidden; background: var(--ink-3); aspect-ratio: 16 / 9; }
.hs-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.hs-score {
  background: rgba(143, 216, 196, .14); color: var(--mint);
  border-radius: 8px; padding: 3px 9px; font-weight: 700;
}
.hs-reviews, .hs-dist { color: var(--paper-dim); font-size: .85rem; font-weight: 300; }
.hs-book { display: flex; justify-content: center; gap: 8px; margin-top: 14px; text-decoration: none; }
.hs-loading { color: var(--paper-dim); font-weight: 300; margin-top: 16px; }

.hs-gallery { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.hs-gallery img { flex: 0 0 120px; height: 84px; object-fit: cover; border-radius: 8px; display: block; }

/* one row per rated category — the number is the point, so it leads */
.hs-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hs-cat {
  display: flex; align-items: baseline; gap: 6px;
  background: rgba(6, 13, 11, .45); border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 4px 11px; font-size: .82rem;
}
.hs-cat span { color: var(--paper-dim); font-weight: 300; }
.hs-cat b { color: var(--mint); }

.hs-sec { margin-top: 16px; }
.hs-sec h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 7px; }
.hs-pros, .hs-cons { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.hs-pros li, .hs-cons li { font-size: .88rem; font-weight: 300; padding-inline-start: 16px; position: relative; }
.hs-pros li::before { content: '+'; position: absolute; inset-inline-start: 0; color: var(--mint); font-weight: 700; }
.hs-cons li::before { content: '−'; position: absolute; inset-inline-start: 0; color: var(--amber); font-weight: 700; }
.hs-fac { display: flex; flex-wrap: wrap; gap: 5px; }
.hs-fac span {
  background: rgba(22, 48, 42, .55); border: 1px solid var(--glass-border);
  border-radius: 8px; padding: 3px 9px; font-size: .78rem; font-weight: 300; color: var(--paper-dim);
}
.hs-times { margin-top: 14px; color: var(--paper-dim); font-size: .84rem; font-weight: 300; }
.hc-actions a, .hc-actions button { display: inline-flex; align-items: center; gap: 5px; }
.hc-actions button {
  background: none; border: none; cursor: pointer; color: var(--paper-dim);
  font-family: var(--font-body); font-size: .86rem; font-weight: 600; padding: 0;
}
.hc-actions button:hover { color: var(--paper); }
.hc-actions .hc-del:hover { color: var(--danger); }
.hc-divider {
  margin-top: 18px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .14);
  color: var(--paper-dim); font-weight: 700; font-size: .92rem;
}

/* ---------- budget page (a full page, not a modal) ---------- */

.budget-page {
  position: fixed; inset: 0; z-index: 250; display: none;
  overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(58% 42% at 82% 0%, rgba(232, 133, 58, .10), transparent 70%),
    radial-gradient(50% 40% at 8% 100%, rgba(143, 216, 196, .07), transparent 70%),
    linear-gradient(180deg, #0c1a16 0%, var(--ink) 60%, #081210 100%);
}
.budget-page.open { display: block; }
body.budget-open { overflow: hidden; }
/* page header: the back button sits top-right (inline-start), always on screen */
.bp-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: 14px clamp(14px, 4vw, 28px);
  background: rgba(12, 24, 20, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
}
.bp-title { font-family: var(--font-display); font-size: 1.3rem; }
.bp-back {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--paper);
  font-family: var(--font-body); font-weight: 700; font-size: .88rem;
  transition: background .15s ease, color .15s ease;
}
.bp-back:hover { background: var(--glass-strong); color: var(--amber); }
.bp-inner {
  width: min(680px, 100%); margin: 0 auto;
  padding: 18px clamp(14px, 4vw, 28px) calc(40px + env(safe-area-inset-bottom));
}
.bp-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.bp-controls:empty { display: none; }
/* total + currency share one row — the phone sees the whole form without scrolling */
.money-field { display: flex; gap: 8px; }
.money-field input { flex: 1; min-width: 0; }
.money-field select { width: 108px; flex: none; }
/* the "אפס תקציב" strip on the settings sub-page */
.bp-danger {
  margin-top: 26px; padding-top: 16px; border-top: 1px dashed rgba(255, 122, 110, .35);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bp-danger-hint { font-size: .82rem; color: var(--paper-dim); flex: 1; min-width: 180px; line-height: 1.5; }

.budget-setup { text-align: center; padding: 10px 4px; }
.budget-setup h3 { font-family: var(--font-display); font-size: 1.35rem; margin-bottom: 6px; }
.budget-setup p { color: var(--paper-dim); font-weight: 300; margin-bottom: 18px; }
.budget-setup .form-grid { text-align: right; }

.ring-section { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 0 4px; }
.ring-wrap { position: relative; width: 150px; height: 150px; }
.budget-ring { width: 100%; height: 100%; }
.budget-ring circle { transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .3, 1), stroke .3s ease; }
.ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 20px;
}
.rc-top { font-family: var(--font-display); font-size: 1.45rem; color: var(--paper); direction: ltr; }
.rc-bottom { font-size: .74rem; color: var(--paper-dim); margin-top: 4px; line-height: 1.4; }
.per-person { margin-top: 8px; color: var(--paper-dim); font-size: .9rem; }
.per-person button {
  background: none; border: none; cursor: pointer; color: var(--mint);
  font-family: var(--font-body); font-size: .9rem; text-decoration: underline; padding: 0;
}
.bm-settings-btn {
  position: absolute; top: 4px; left: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--glass-border); color: var(--paper-dim);
  cursor: pointer; font-size: .95rem; transition: all .18s ease;
}
.bm-settings-btn:hover { background: var(--glass-strong); color: var(--paper); }
.bm-settings { padding: 16px; margin: 10px 0; border-radius: var(--radius-sm); }

.cat-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cat-bar {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; font-family: var(--font-body); color: var(--paper); transition: background .15s ease;
}
.cat-bar:hover { background: var(--glass); }
.cat-bar.active { border-color: rgba(255, 180, 95, .45); background: rgba(255, 180, 95, .06); }
.cb-label { width: 108px; text-align: right; font-weight: 600; font-size: .88rem; flex-shrink: 0; }
.cb-track { flex: 1; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.cb-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
  transition: width .5s cubic-bezier(.2, .8, .3, 1);
}
.cb-amount { width: 86px; text-align: left; font-weight: 700; font-size: .86rem; font-variant-numeric: tabular-nums; direction: ltr; flex-shrink: 0; }
.clear-filter { margin-top: 10px; }

.qa-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.qa-row input, .qa-row select {
  background: rgba(6, 13, 11, .55); border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  color: var(--paper); font-family: var(--font-body); font-size: .92rem; padding: 10px 12px; outline: none;
}
.qa-row input:focus, .qa-row select:focus { border-color: var(--amber); }
.qa-amount { width: 96px; }
.qa-title { flex: 1; min-width: 140px; }
.qa-cat { width: 128px; }
.qa-day { width: 96px; }
.qa-hint { font-size: .8rem; color: rgba(245, 239, 227, .45); margin-top: 6px; min-height: 1.2em; }

.bday-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.bday { border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: rgba(6, 13, 11, .35); }
.bday-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px;
  background: none; border: none; cursor: pointer; color: var(--paper);
  font-family: var(--font-body); font-size: .95rem;
}
.bd-caret { color: var(--paper-dim); font-size: .8rem; }
.bd-title { font-weight: 700; flex: 1; text-align: right; }
.bd-total { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }
.bday-body { padding: 2px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.bitem-row { display: flex; align-items: center; gap: 9px; font-size: .92rem; }
.bitem-row.travel { color: var(--mint); }
.bi-time { color: var(--mint); font-size: .8rem; font-weight: 700; direction: ltr; }
.bi-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-cost { color: var(--paper-dim); font-size: .86rem; font-variant-numeric: tabular-nums; direction: ltr; }
.cost-input {
  width: 88px; padding: 6px 8px; text-align: center;
  background: rgba(6, 13, 11, .55); border: 1px solid var(--glass-border); border-radius: 9px;
  color: var(--amber); font-family: var(--font-body); font-weight: 700; font-size: .88rem; outline: none;
  -moz-appearance: textfield;
}
.cost-input::-webkit-outer-spin-button, .cost-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cost-input:focus { border-color: var(--amber); }
.cost-input::placeholder { color: rgba(245, 239, 227, .3); font-weight: 400; }
.bhotel-row {
  display: block; width: 100%; text-align: right; padding: 8px 10px;
  background: rgba(143, 216, 196, .06); border: 1px dashed rgba(143, 216, 196, .3);
  border-radius: 10px; color: var(--mint); font-family: var(--font-body); font-size: .86rem;
  cursor: pointer;
}
.expense-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.expense-row { display: flex; align-items: center; gap: 9px; font-size: .92rem; }
.er-title { flex: 1; min-width: 0; }
.er-title small { color: var(--paper-dim); }
.er-amount { color: var(--paper-dim); font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; }
.er-del { background: none; border: none; color: var(--danger); cursor: pointer; opacity: .6; }
.er-del:hover { opacity: 1; }

/* ---------- ambient budget/hotels on the trip page ---------- */

.budget-chip { cursor: pointer; color: var(--amber); }
.budget-chip:hover { background: rgba(255, 180, 95, .12); }
#budget-btn.warn { color: var(--amber); }
#budget-btn.over { color: var(--danger); }

.day-cost {
  font-family: var(--font-body); font-size: .82rem; font-weight: 700; color: var(--amber);
  background: rgba(255, 180, 95, .1); border: 1px solid rgba(255, 180, 95, .28);
  padding: 4px 11px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.day-route {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-family: var(--font-body); font-size: .82rem; font-weight: 700; color: var(--mint);
  background: rgba(143, 216, 196, .1); border: 1px solid rgba(143, 216, 196, .25);
  padding: 4px 11px; border-radius: 999px;
  transition: background .18s ease, border-color .18s ease;
}
.day-route .ic { width: 14px; height: 14px; }
.day-route .ic-ext { width: 12px; height: 12px; opacity: .75; }
.day-route:hover { background: rgba(143, 216, 196, .2); border-color: rgba(143, 216, 196, .5); }
.day-hotels { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; padding-right: 2px; }
.day-hotel { font-size: .85rem; font-weight: 300; color: var(--paper-dim); }
.day-hotel.checkin { color: var(--amber); font-weight: 600; }
.day-hotel.checkout { color: var(--paper-dim); }

/* ---------- admin panel ---------- */


.adm-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 26px;
}
.adm-stat { padding: 18px 20px; border-radius: var(--radius-sm); }
.adm-stat-n {
  font-family: var(--font-display); font-size: 2rem; color: var(--amber);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.adm-stat-label { font-weight: 600; margin-top: 4px; }
.adm-stat-sub { font-size: .82rem; font-weight: 300; color: var(--paper-dim); margin-top: 2px; }

.adm-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px;
}
.adm-tabs { display: flex; gap: 6px; }
.adm-tab {
  font-family: var(--font-body); font-size: .95rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px; color: var(--paper-dim);
  background: transparent; border: 1px solid var(--glass-border);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.adm-tab .ic { width: 16px; height: 16px; }
.adm-tab:hover { background: var(--glass-strong); color: var(--paper); }
.adm-tab.active { color: var(--amber); border-color: rgba(255, 180, 95, .45); background: rgba(255, 180, 95, .1); }
.adm-search {
  flex: 1; min-width: 220px; padding: 10px 16px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--paper); font-family: var(--font-body); font-size: .95rem;
}
.adm-search:focus { outline: none; border-color: var(--amber); }
.adm-search::placeholder { color: rgba(245, 239, 227, .35); font-weight: 300; }

.adm-panel { padding: 8px; overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.adm-table th {
  text-align: right; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--paper-dim); padding: 10px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--glass-border);
}
.adm-table td { padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tbody tr:hover { background: rgba(255, 255, 255, .035); }
.adm-table .num { text-align: center; font-variant-numeric: tabular-nums; }
.adm-link { color: var(--paper); text-decoration: none; font-weight: 600; }
.adm-link:hover { color: var(--amber); }
.adm-sub { font-size: .8rem; font-weight: 300; color: var(--paper-dim); margin-top: 2px; }
.adm-draft {
  display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; color: var(--amber);
  background: rgba(255, 180, 95, .1); border: 1px solid rgba(255, 180, 95, .45);
}
.adm-codes { white-space: nowrap; }
.adm-code {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  padding: 3px 9px; border-radius: 999px; cursor: pointer; color: var(--amber);
  background: rgba(255, 180, 95, .1); border: 1px solid rgba(255, 180, 95, .28);
}
.adm-code .ic { width: 11px; height: 11px; stroke-width: 2.4; vertical-align: -1px; margin-inline-end: 3px; }
.adm-you {
  font-size: .72rem; font-weight: 700; color: var(--mint);
  border: 1px solid rgba(143, 216, 196, .35); border-radius: 999px; padding: 1px 7px;
}
.adm-del {
  background: none; border: 1px solid var(--glass-border); border-radius: 10px;
  width: 34px; height: 34px; cursor: pointer; color: var(--paper-dim);
  display: grid; place-items: center; padding: 0;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.adm-del .td-lid { transform-origin: 12px 6px; transition: transform .22s cubic-bezier(.3, .9, .4, 1.3); }
.adm-del:hover { color: var(--danger); border-color: rgba(255, 122, 110, .5); background: rgba(255, 122, 110, .12); }
.adm-del:hover .td-lid { transform: rotate(-16deg) translateY(-1px); }
.adm-del:disabled { opacity: .5; cursor: wait; }
.adm-del:disabled:hover { color: var(--paper-dim); border-color: var(--glass-border); background: none; }
.adm-del:disabled:hover .td-lid { transform: none; }
.adm-del.self:disabled { cursor: not-allowed; } /* permanently off, not mid-request */

/* ---- admin modals: add user, delete user ---- */
.adm-check {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  font-size: .9rem; color: var(--paper-dim); line-height: 1.5; margin: 4px 0 14px;
}
.adm-check input { accent-color: var(--amber); width: 17px; height: 17px; margin-top: 1px; flex: none; cursor: pointer; }
.adm-warn {
  font-size: .92rem; line-height: 1.6; color: var(--paper-dim);
  background: rgba(255, 122, 110, .09); border: 1px solid rgba(255, 122, 110, .25);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px;
}
.adm-modal-actions { display: flex; gap: 10px; }
.adm-modal-actions .btn { flex: 1; justify-content: center; }
.btn-danger {
  background: rgba(255, 122, 110, .14); color: var(--danger);
  border-color: rgba(255, 122, 110, .45);
}
.btn-danger:hover { background: rgba(255, 122, 110, .24); }

.adm-cred {
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  padding: 6px 14px; margin-bottom: 18px;
}
.adm-cred-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0;
}
.adm-cred-row + .adm-cred-row { border-top: 1px solid rgba(255, 255, 255, .06); }
.adm-cred-k { font-size: .85rem; font-weight: 600; color: var(--paper-dim); flex: none; }
.adm-cred-v {
  font-weight: 700; letter-spacing: .04em; cursor: pointer; color: var(--amber);
  overflow-wrap: anywhere; text-align: left;
}

/* toggle pill, used for both publish and admin flags */
.adm-switch { display: inline-block; cursor: pointer; }
.adm-switch input { position: absolute; opacity: 0; pointer-events: none; }
.adm-switch span {
  display: block; width: 42px; height: 24px; border-radius: 999px; position: relative;
  background: rgba(255, 255, 255, .09); border: 1px solid var(--glass-border);
  transition: background .18s ease, border-color .18s ease;
}
.adm-switch span::after {
  content: ''; position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--paper-dim); transition: transform .18s ease, background .18s ease;
}
.adm-switch input:checked + span { background: rgba(255, 180, 95, .28); border-color: rgba(255, 180, 95, .5); }
.adm-switch input:checked + span::after { transform: translateX(-18px); background: var(--amber); }
.adm-switch input:disabled + span { opacity: .5; cursor: not-allowed; }

@media (max-width: 700px) {
  .adm-table { font-size: .85rem; }
  .adm-table th, .adm-table td { padding: 9px 8px; }
}

.nights-nudge {
  display: block; width: 100%; margin-bottom: 12px; padding: 9px 12px; text-align: right;
  background: rgba(255, 180, 95, .07); border: 1px dashed rgba(255, 180, 95, .4);
  border-radius: var(--radius-sm); color: var(--amber);
  font-family: var(--font-body); font-weight: 600; font-size: .88rem; cursor: pointer;
  transition: background .15s ease;
}
.nights-nudge:hover { background: rgba(255, 180, 95, .13); }

@media (max-width: 640px) {
  .mw-head { padding: 18px 16px 12px; }
  .mw-body { padding: 14px 16px 20px; }
  .bp-head { padding: 10px 12px; gap: 10px; }
  .bp-title { font-size: 1.05rem; }
  .bp-inner { padding: 14px 12px calc(30px + env(safe-area-inset-bottom)); }
  .item-badges { gap: 6px; }
  .cb-label { width: 88px; }
  .cb-amount { width: 72px; }
  .qa-cat, .qa-day { width: calc(50% - 3px); }
  .qa-amount { width: 90px; }
}

/* ============================================================
   Calendar view: month / week / day + stop modal
   ============================================================ */

/* list / calendar switch, short trips only */
.view-toggle { margin-top: 18px; }
.view-seg { width: 100%; max-width: 360px; margin: 0 auto; }
.view-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

.cal-wrap { margin-top: 18px; }
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.cal-seg button { padding: 8px 16px; flex: 0 1 auto; }
.cal-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--paper-dim); flex: 1; }
.cal-fs-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; color: var(--paper-dim);
  border: 1px solid var(--glass-border); background: var(--glass);
  font-family: var(--font-body); font-weight: 700; font-size: .86rem;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cal-fs-btn:hover { background: var(--glass-strong); color: var(--amber); border-color: rgba(255, 180, 95, .4); }
.cal-fs-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---- fullscreen calendar: covers the page, scrolls on its own ---- */
body.cal-full-open { overflow: hidden; }
.cal-wrap.cal-full {
  position: fixed; inset: 0; z-index: 300; margin: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 18px clamp(14px, 3vw, 34px) calc(28px + env(safe-area-inset-bottom));
  /* a lifted panel, not a blackout: the page's own warm/teal glow stays visible through it */
  background:
    radial-gradient(58% 42% at 82% 0%, rgba(232, 133, 58, .10), transparent 70%),
    radial-gradient(50% 40% at 8% 100%, rgba(143, 216, 196, .07), transparent 70%),
    rgba(22, 48, 42, .82);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
}
/* the fade belongs to entering fullscreen only — re-renders inside it (tab/day switches) stay instant */
.cal-wrap.cal-full-in { animation: calFullIn .22s ease; }
.cal-wrap.cal-full .cal-toolbar {
  position: sticky; top: -18px; z-index: 2; margin: -18px 0 14px; padding: 18px 0 12px;
  /* same hue as the panel, just opaque — the sticky bar must not read as a darker band */
  background: linear-gradient(180deg, rgba(22, 48, 42, .96) 72%, transparent);
}
.cal-wrap.cal-full .cal-fs-btn { color: var(--amber); border-color: rgba(255, 180, 95, .4); }
/* the extra height is the whole point — let the month grid use it */
.cal-wrap.cal-full .cal-cell { min-height: clamp(96px, 12vh, 150px); }
@keyframes calFullIn { from { opacity: 0; } to { opacity: 1; } }

.cal-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.cal-nav-btn {
  width: 36px; height: 36px; border-radius: 50%; flex: none; cursor: pointer;
  border: 1px solid var(--glass-border); background: transparent; color: var(--paper);
  display: grid; place-items: center; transition: background .18s ease;
}
.cal-nav-btn:hover { background: var(--glass-strong); }
.cal-nav-btn:disabled { opacity: .3; cursor: default; }
.cal-nav-label { font-weight: 700; font-size: .95rem; text-align: center; }

/* ---- month grid ---- */
.cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-dow-row span { text-align: center; font-size: .78rem; font-weight: 700; color: var(--paper-dim); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
  min-height: 96px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border);
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  transition: border-color .18s ease, background .18s ease;
}
.cal-cell:hover { border-color: rgba(255, 180, 95, .4); background: var(--glass-strong); }
.cal-cell:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cal-cell.free { background: rgba(255, 255, 255, .02); }
.cal-cell.today { border-color: rgba(255, 180, 95, .6); box-shadow: inset 0 0 0 1px rgba(255, 180, 95, .35); }
/* area marking: colored top stripe + tiny name; today keeps its inset ring */
.cal-cell.has-area { border-top: 3px solid var(--area-c); }
.cc-area {
  font-size: .68rem; font-weight: 700; color: var(--area-c);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }
.cl-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; color: var(--paper-dim);
}
.cl-item i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cc-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cc-num { font-weight: 800; font-size: .95rem; }
.cc-date { flex: 1; min-width: 0; font-size: .72rem; color: var(--paper-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-weather { font-size: .8rem; }
.cc-evts { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-evt {
  font-size: .72rem; font-weight: 600; text-align: right; padding: 3px 7px; border-radius: 7px;
  background: rgba(255, 180, 95, .12); border: 1px solid rgba(255, 180, 95, .2); color: var(--paper);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  transition: background .15s ease;
}
.cal-evt:hover { background: rgba(255, 180, 95, .24); }
.cal-evt b { color: var(--mint); font-weight: 700; }
.cal-evt.travel { background: rgba(143, 216, 196, .09); border-color: rgba(143, 216, 196, .3); border-style: dashed; }
.cc-more { font-size: .7rem; color: var(--paper-dim); }
.cc-dots { display: none; }
.cal-hint { text-align: center; margin-top: 12px; font-size: .82rem; color: rgba(245, 239, 227, .45); }

/* ---- week ---- */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-wday { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cal-wday-head {
  border: 1px solid var(--glass-border); background: var(--glass); color: var(--paper);
  border-radius: var(--radius-sm); padding: 8px 6px; cursor: pointer; text-align: center;
  font-family: var(--font-body); display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color .18s ease;
}
.cal-wday-head:hover { border-color: rgba(255, 180, 95, .4); }
.cal-wday-head.today { border-color: rgba(255, 180, 95, .6); box-shadow: inset 0 0 0 1px rgba(255, 180, 95, .35); }
.wd-num { font-weight: 800; font-size: .9rem; }
.wd-date { font-size: .72rem; color: var(--paper-dim); }
.wd-weather { font-size: .74rem; color: var(--paper-dim); }
.cal-wday-evts { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cal-wevt {
  display: block; width: 100%; text-align: right; padding: 7px 9px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 180, 95, .1); border: 1px solid rgba(255, 180, 95, .2); color: var(--paper);
  font-family: var(--font-body); font-size: .8rem; font-weight: 600; min-width: 0;
  transition: background .15s ease;
}
.cal-wevt:hover { background: rgba(255, 180, 95, .2); }
.cal-wevt.travel { background: rgba(143, 216, 196, .08); border-color: rgba(143, 216, 196, .3); border-style: dashed; }
.we-time { color: var(--mint); font-size: .72rem; font-weight: 700; direction: ltr; display: inline-block; }
.we-title { display: block; overflow: hidden; text-overflow: ellipsis; }
.wd-free { font-size: .74rem; color: rgba(245, 239, 227, .35); text-align: center; padding: 8px 0; }

/* ---- day ---- */
.cal-day-strip {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 14px;
}
.cds-btn {
  flex: 0 0 auto; min-width: 48px; padding: 7px 6px; border-radius: 12px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--paper);
  font-family: var(--font-body); display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: background .15s ease, border-color .15s ease;
}
.cds-btn:hover { border-color: rgba(255, 180, 95, .4); }
.cds-dow { font-size: .68rem; color: var(--paper-dim); }
.cds-num { font-weight: 800; font-size: .95rem; }
.cds-btn.active { background: linear-gradient(135deg, var(--amber), var(--amber-deep)); border-color: transparent; color: #241302; }
.cds-btn.active .cds-dow { color: rgba(36, 19, 2, .7); }
.cds-btn.now:not(.active) { border-color: rgba(255, 180, 95, .55); }
.cal-day-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-display); font-size: 1.3rem; }
.cal-day-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cal-devt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: right;
  padding: 14px 16px; cursor: pointer; color: var(--paper); font-family: var(--font-body);
  transition: border-color .18s ease, background .18s ease;
}
.cal-devt:hover { border-color: rgba(255, 180, 95, .35); }
.cal-devt.travel { border-style: dashed; border-color: rgba(143, 216, 196, .4); background: rgba(143, 216, 196, .05); }
.cd-emoji { font-size: 1.3rem; flex: none; }
.cd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cd-title { font-weight: 700; font-size: 1.02rem; }
.cd-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: var(--paper-dim); }
.cd-time { color: var(--mint); font-weight: 700; direction: ltr; }
.cd-cost { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; }
.cd-note {
  font-size: .88rem; font-weight: 300; color: var(--paper-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cd-chev { flex: none; color: var(--paper-dim); }
.cal-devt:hover .cd-chev { color: var(--amber); }

/* ---- stop details modal ---- */
.modal-stop { width: min(520px, 100%); max-height: 88vh; overflow-y: auto; padding: 26px 24px; }
.sheet-grab { display: none; }
.sm-day { font-size: .84rem; font-weight: 700; color: var(--mint); margin-bottom: 6px; }
.sm-title { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 10px; line-height: 1.25; }
.sm-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.modal-stop .item-note { margin: 0 0 12px; }
.modal-stop .item-mini-map { margin-top: 10px; }
.sm-maps { width: 100%; justify-content: center; margin-top: 14px; }
.sm-edit { width: 100%; justify-content: center; margin-top: 10px; }

/* every detail in the sheet is a shortcut into the field that holds it. Nothing
   marks them at rest — the details should read as details; the affordance only
   shows up under the cursor or the focus ring */
.sm-tap {
  cursor: pointer; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.sm-tap:hover, .sm-tap:focus-visible { color: var(--amber); background: rgba(255, 180, 95, .09); outline: none; }
.sm-chips .sm-tap:hover, .sm-chips .sm-tap:focus-visible { background: rgba(255, 180, 95, .18); }

/* ---- editing a stop, in the same sheet ---- */
.sm-edit-head { opacity: .75; font-size: 1.15rem; margin-bottom: 14px; }
.sm-form { text-align: right; }
.sm-form .field { margin-bottom: 0; }
.sm-form textarea { min-height: 72px; }
/* the save row stays on screen however long the form scrolls; the sheet gives
   up its own bottom padding so the row sits flush on the bottom edge */
.modal-stop:has(.sm-foot) { padding-bottom: 0; }
.sm-foot {
  position: sticky; bottom: 0; z-index: 3; display: flex; gap: 10px;
  margin: 0 -24px; padding: 12px 24px;
  background: linear-gradient(to top, rgba(8, 17, 14, .97) 65%, rgba(8, 17, 14, .8));
  border-top: 1px solid var(--glass-border);
}
.sm-foot .se-save { flex: 1; justify-content: center; }
/* delete rides the sticky foot as a compact icon — always on screen, and the
   cancel button sits between it and the save it must not be mistaken for */
.sm-del {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; align-self: center; padding: 0;
  background: none; border: 1px solid rgba(255, 122, 110, .3); border-radius: 50%;
  color: var(--danger); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.sm-del .ic { width: 18px; height: 18px; }
.sm-del:hover { background: rgba(255, 122, 110, .1); border-color: var(--danger); }
.sm-del:disabled { opacity: .5; cursor: default; }

/* ---- calendar on phones ---- */
@media (max-width: 760px) {
  /* the week becomes stacked day rows — 7 skinny columns don't fit a phone */
  .cal-week { grid-template-columns: 1fr; gap: 10px; }
  .cal-wday { flex-direction: row; align-items: stretch; gap: 8px; }
  .cal-wday-head { flex: 0 0 78px; justify-content: center; }
  .cal-wday-evts { flex: 1; justify-content: center; }
  .wd-free { text-align: right; padding: 4px 2px; }
}
@media (max-width: 640px) {
  .cal-toolbar { flex-direction: column; align-items: stretch; }
  .cal-title { text-align: center; order: -1; }
  .cal-grid, .cal-dow-row { gap: 4px; }
  /* month cells shrink to number + dots; the day view carries the detail */
  .cal-cell { min-height: 58px; padding: 5px 6px; gap: 4px; border-radius: 11px; }
  .cc-date { display: none; }
  .cc-weather { font-size: .68rem; }
  .cal-evt, .cc-more { display: none; }
  /* tiny cells: the stripe + legend carry the area, the name doesn't fit */
  .cc-area { display: none; }
  .cal-cell.has-area { border-top-width: 2px; }
  .cc-dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
  .cc-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
  .cc-dots i.travel { background: var(--mint); }
  .cc-dots em { font-style: normal; font-size: .62rem; color: var(--paper-dim); line-height: 1; }

  /* the stop modal becomes a bottom sheet — thumb-reach on phones */
  .modal-backdrop.sheet { align-items: flex-end; padding: 0; }
  .modal-backdrop.sheet .modal-stop {
    width: 100%; max-width: 100%; max-height: 86vh; border-radius: 24px 24px 0 0;
    padding: 12px 18px calc(22px + env(safe-area-inset-bottom));
    animation: sheetUp .32s cubic-bezier(.2, .9, .3, 1);
  }
  .modal-backdrop.sheet .modal-stop:has(.sm-foot) { padding-bottom: 0; }
  .modal-backdrop.sheet .sheet-grab {
    display: block; width: 44px; height: 4px; border-radius: 999px;
    background: rgba(255, 255, 255, .25); margin: 0 auto 14px;
  }
  .modal-backdrop.sheet .modal-close { top: 14px; }
  /* day+שעה and קטגוריה+עלות are short enough to stay paired on a phone —
     collapsing them would double the scroll of the edit form */
  .sm-form { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sm-form .span-2 { grid-column: span 2; }
  .sm-foot { margin: 0 -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }

/* ---------- TRIP MAKER wordmark ---------- */
/* two stacked rows justified to the same width, so TRIP over MAKER reads as one
   block — the header logo from the brand sheet */

.logo-stack {
  display: inline-flex; flex-direction: column; width: 58px; flex: none;
  font-family: var(--font-display); line-height: 1;
  filter: drop-shadow(0 0 12px rgba(255, 180, 95, .45));
}
.logo-stack span { display: flex; justify-content: space-between; }
.logo-stack b, .es-logos b { font-weight: 400; }
.logo-stack .ls-trip { font-size: 21px; color: var(--amber); }
.logo-stack .ls-maker { font-size: 11px; margin-top: 3px; color: var(--paper); }

.site-footer .logo-stack { width: 44px; vertical-align: middle; filter: none; }
.site-footer .logo-stack .ls-trip { font-size: 16px; }
.site-footer .logo-stack .ls-maker { font-size: 8px; margin-top: 2px; }

/* ---------- entry splash (app boot) ---------- */
/* compass draws itself, needle overshoots and settles, wordmark rises and
   crossfades Latin ↔ Hebrew; a thin amber bar sweeps below. Removed by home.js
   after one pass — once per session. */

.entry-splash {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(52% 44% at 82% 6%, rgba(232, 133, 58, .16), transparent 70%),
    radial-gradient(46% 40% at 8% 88%, rgba(143, 216, 196, .10), transparent 70%),
    linear-gradient(180deg, #0c1a16 0%, var(--ink) 60%, #081210 100%);
  transition: opacity .5s ease, visibility .5s ease;
}
.entry-splash.done { opacity: 0; visibility: hidden; }

.entry-splash svg { filter: drop-shadow(0 0 30px rgba(255, 180, 95, .35)); }
.es-ring { animation: ring-draw 4.2s ease-in-out forwards; }
.es-cross { animation: cross-fade 4.2s ease forwards; }
.es-needle { transform-origin: 256px 256px; animation: needle-settle 4.2s cubic-bezier(.34, 1.3, .5, 1) forwards; }
.es-hub { transform-origin: 256px 256px; animation: hub-pop 4.2s ease forwards; }

.es-word { margin-top: 22px; text-align: center; opacity: 0; animation: word-rise .8s ease 1.2s forwards; }
.es-logos {
  position: relative; width: 148px; height: 84px; margin: 0 auto;
  font-family: var(--font-display); line-height: 1;
  filter: drop-shadow(0 0 24px rgba(255, 180, 95, .5)); text-shadow: 0 0 32px rgba(255, 180, 95, .5);
}
.es-logos > div { position: absolute; inset: 0; transition: opacity .45s ease; }
.es-logos span { display: flex; justify-content: space-between; }
/* language swap is driven by the inline script adding .he — one deterministic
   crossfade (EN holds, then HE holds) instead of a free-running keyframe loop */
.es-hebrew { opacity: 0; }
.es-logos.he .es-latin { opacity: 0; }
.es-logos.he .es-hebrew { opacity: 1; }
.es-latin .ls-trip { font-size: 52px; color: var(--amber); }
.es-latin .ls-maker { font-size: 26px; margin-top: 6px; color: var(--paper); }
.es-hebrew .ls-trip { font-size: 46px; line-height: 1.1; color: var(--amber); }
.es-hebrew .ls-maker { font-size: 24px; margin-top: 2px; color: var(--paper); }
.es-tag { margin-top: 10px; color: var(--mint); font-weight: 600; font-size: 11px; letter-spacing: .22em; white-space: nowrap; }

.es-bar {
  position: absolute; bottom: 54px; width: 150px; height: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.es-bar i {
  display: block; width: 45%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--amber), var(--amber-deep), transparent);
  animation: sweep 1.4s linear infinite;
}

@keyframes ring-draw { 0% { stroke-dashoffset: 942; opacity: 0; } 12% { opacity: 1; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes needle-settle {
  0% { transform: rotate(-120deg); } 42% { transform: rotate(26deg); }
  62% { transform: rotate(-9deg); } 78% { transform: rotate(4deg); }
  88%, 100% { transform: rotate(0deg); }
}
@keyframes cross-fade { 0%, 30% { opacity: 0; } 55%, 100% { opacity: .85; } }
@keyframes hub-pop { 0%, 40% { transform: scale(0); } 60% { transform: scale(1.25); } 72%, 100% { transform: scale(1); } }
@keyframes word-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sweep { 0% { transform: translateX(120%); } 100% { transform: translateX(-220%); } }

/* ---------- AI overlay: cycling task rows ---------- */
/* three pretend work-rows fading through under the title — dot pings, bar
   shimmers (same gradient as .skl), chip hints at a result */

.ai-rows { margin: 30px auto 0; width: 250px; display: flex; flex-direction: column; gap: 14px; text-align: start; }
.ai-row { display: flex; align-items: center; gap: 12px; opacity: 0; animation: row-cycle 5.4s ease infinite; }
.ai-row:nth-child(2) { animation-delay: .6s; }
.ai-row:nth-child(3) { animation-delay: 1.2s; }
.ai-row .ar-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); animation: dot-glow 1.6s ease infinite; }
.ai-row:nth-child(2) .ar-dot { animation-delay: .4s; }
.ai-row:nth-child(3) .ar-dot { animation-delay: .8s; }
.ai-row .skl { flex: 1; height: 13px; border-radius: 999px; }
.ai-row:nth-child(2) .skl { max-width: 78%; }
.ai-row:nth-child(3) .skl { max-width: 60%; }
.ar-chip { flex: none; width: 40px; height: 20px; border-radius: 999px; background: rgba(255, 180, 95, .12); border: 1px solid rgba(255, 180, 95, .3); }
.ar-chip.mint { background: rgba(143, 216, 196, .1); border-color: rgba(143, 216, 196, .3); }

@keyframes dot-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 216, 196, .5); } 50% { box-shadow: 0 0 0 6px rgba(143, 216, 196, 0); } }
@keyframes row-cycle { 0% { opacity: 0; transform: translateY(10px); } 8% { opacity: 1; transform: none; } 82% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* ---------- trip loader ---------- */
/* full-screen while the trip fetches: a pin retraces a dashed route between
   pulsing waypoints. Sits above the skeletons and fades out when data lands. */

.trip-loader {
  position: fixed; inset: 0; z-index: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(22, 48, 42, .85), transparent 100%),
    linear-gradient(180deg, #0c1a16 0%, var(--ink) 60%, #081210 100%);
  transition: opacity .45s ease, visibility .45s ease;
}
.trip-loader.done { opacity: 0; visibility: hidden; }

.tl-route { animation: route-dash 4.5s linear infinite; }
.tl-wp { animation: wp-pulse 4.5s ease infinite; }
.tl-pin { filter: drop-shadow(0 0 12px rgba(255, 180, 95, .8)); }
.tl-title { margin-top: 26px; font-family: var(--font-display); font-size: 1.9rem; color: var(--paper); text-shadow: 0 0 40px rgba(255, 180, 95, .35); }
.tl-sub { margin-top: 10px; color: var(--paper-dim); font-weight: 300; font-size: 1rem; }
.tl-chips { margin-top: 30px; display: flex; gap: 8px; }
.tl-chips .skl { width: 64px; height: 30px; border-radius: 999px; border: 1px solid var(--glass-border); }
.tl-chips .skl:nth-child(2) { animation-delay: .3s; }
.tl-chips .skl:nth-child(3) { animation-delay: .6s; }

@keyframes route-dash { from { stroke-dashoffset: 560; } to { stroke-dashoffset: 0; } }
@keyframes wp-pulse { 0%, 100% { opacity: .35; r: 5; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- viewer end-cap ---------- */
/* sits right after the last day: the moment a viewer finishes reading is the one
   moment they're certain they want the trip. Participants never see it. */

.trip-endcap {
  position: relative; overflow: hidden;
  margin-top: 30px; padding: 32px 28px 28px;
  border-radius: var(--radius); text-align: center;
}
/* a soft amber bloom from the top edge — reads as "something new starts here"
   rather than one more card in the itinerary stack */
.trip-endcap::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 160px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255, 180, 95, .18), transparent 70%);
  pointer-events: none;
}
.trip-endcap > * { position: relative; }
.te-emoji { display: block; font-size: 2.4rem; line-height: 1; margin-bottom: 12px; }
.te-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--paper); margin-bottom: 10px; }
.te-sub {
  max-width: 46ch; margin: 0 auto 20px; color: var(--paper-dim);
  font-weight: 300; font-size: .98rem; line-height: 1.7;
}
.trip-endcap .te-cta { min-width: 240px; justify-content: center; }
.te-note { display: block; margin-top: 14px; color: var(--paper-dim); font-size: .8rem; opacity: .75; }

@media (max-width: 640px) {
  .trip-endcap { padding: 26px 18px 22px; margin-top: 22px; }
  .te-title { font-size: 1.3rem; }
  .te-sub { font-size: .92rem; margin-bottom: 16px; }
  .trip-endcap .te-cta { width: 100%; min-width: 0; }
}

@media print { .trip-endcap { display: none; } }

/* ---------- notification opt-in ---------- */
/* asked once, from our own card, directly under the action bar — the OS prompt
   only ever appears after a deliberate tap on "כן, עדכנו אותי" */

.push-ask {
  width: min(1120px, calc(100% - 40px)); margin: 12px auto 0;
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-radius: 14px; border: 1px solid rgba(255, 180, 95, .32);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
}
.push-ask.in { opacity: 1; transform: none; }
.push-ask.done { border-color: rgba(143, 216, 196, .45); }
.pa-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; color: var(--amber);
  background: rgba(255, 180, 95, .12); border: 1px solid rgba(255, 180, 95, .3);
}
.push-ask.done .pa-icon { color: var(--mint); background: rgba(143, 216, 196, .12); border-color: rgba(143, 216, 196, .35); }
.pa-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pa-title { font-size: .97rem; color: var(--paper); }
.pa-sub { font-size: .84rem; font-weight: 300; color: var(--paper-dim); line-height: 1.5; }
.pa-actions { flex: none; display: flex; align-items: center; gap: 10px; }
.pa-no {
  padding: 6px 10px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .85rem; color: var(--paper-dim);
}
.pa-no:hover { color: var(--paper); }

/* the permanent control, inside the participants screen */
.pm-notif { border-top: 1px solid var(--glass-border); margin-top: 16px; padding-top: 12px; }

@media (max-width: 640px) {
  .push-ask { width: calc(100% - 24px); flex-wrap: wrap; gap: 10px 12px; padding: 13px 15px; }
  .pa-text { flex-basis: calc(100% - 54px); }
  .pa-actions { width: 100%; }
  .pa-actions .btn { flex: 1; justify-content: center; }
}

@media print { .push-ask { display: none; } }

/* ============================================================
   Travel legs (OSRM) + stop votes (experimental group mode)
   ============================================================ */

/* the drive between two consecutive stops, injected once routing resolves */
.travel-leg {
  display: flex; align-items: center; gap: 7px; padding: 2px 6px;
  color: var(--paper-dim); font-size: .78rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.travel-leg .ic { width: 14px; height: 14px; opacity: .8; color: var(--mint); }

/* day-header chip: total driving time, shown only when the day is drive-heavy */
.day-load {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; font-variant-numeric: tabular-nums;
  background: rgba(255, 122, 110, .12); color: var(--danger);
  border: 1px solid rgba(255, 122, 110, .32);
}
.day-load .ic { width: 14px; height: 14px; }

/* thumbs on a stop card — one vote per participant, tap the same thumb to take it back */
.stop-votes { display: inline-flex; gap: 3px; }
.vote-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 1px solid var(--glass-border); border-radius: 999px;
  color: var(--paper-dim); cursor: pointer; padding: 3px 8px;
  font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.vote-btn .ic { width: 13px; height: 13px; }
.vote-btn:hover { color: var(--paper); border-color: var(--glass-highlight); }
.vote-btn.on { background: rgba(143, 216, 196, .14); color: var(--mint); border-color: rgba(143, 216, 196, .4); }
.vote-btn.down.on { background: rgba(255, 122, 110, .12); color: var(--danger); border-color: rgba(255, 122, 110, .35); }
@media print { .stop-votes { display: none; } }

/* ---- arrange mode: long-press a stop → everything jiggles, drag to swap ---- */
@keyframes arr-jiggle {
  0% { transform: rotate(-0.7deg); }
  50% { transform: rotate(0.7deg); }
  100% { transform: rotate(-0.7deg); }
}
.arrange-mode .jiggle {
  animation: arr-jiggle 0.3s ease-in-out infinite;
  animation-delay: var(--jd, 0ms);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
}
@media (prefers-reduced-motion: reduce) {
  .arrange-mode .jiggle { animation: none; outline: 1px dashed var(--glass-highlight); }
}
.drag-ghost {
  position: fixed;
  z-index: 2000;
  margin: 0;
  pointer-events: none;
  opacity: 0.95;
  scale: 1.04;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  animation: none;
}
/* the lifted card's slot: a dashed empty space that travels through the list as the
   live preview — the card element itself, contents hidden so the box keeps its size */
.drag-src {
  outline: 2px dashed rgba(255, 180, 95, 0.6);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
  background: rgba(255, 180, 95, 0.05) !important;
}
.drag-src > * { visibility: hidden; }
/* while a drag is live: the jiggle lets go of the transform channel so the FLIP
   slides own it, and between-card furniture (travel legs, empty-day notes) hides —
   the preview rearranges cards, and stale legs between them would lie */
.dragging .jiggle { animation: none; }
.dragging .travel-leg, .dragging .wd-free, .dragging .empty-day { display: none; }
.drop-hint {
  outline: 2px dashed var(--amber);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.arrange-done {
  position: fixed;
  bottom: calc(22px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2001;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.dragging .arrange-done { pointer-events: none; opacity: 0.35; }

/* ---------- iOS: fields a finger can tap without the page zooming ----------
   Mobile Safari force-zooms on focus whenever the focused field computes under
   16px, and it never zooms back out — the traveller is left panning a magnified
   page. These five are the only text-entry controls in the app below that line;
   everything inside .field is already 1rem. The desktop sizes are deliberate
   typography, so the bump is scoped to coarse pointers rather than applied to
   the rules themselves. It must also come last in the file: a media query adds
   no specificity, so source order is the only thing that wins here. */
@media (pointer: coarse) {
  .cost-input,
  .qa-row input, .qa-row select,
  .ai-prefs textarea,
  .edit-loc-form input,
  .ai-edit-scope select { font-size: 16px; }
}