:root {
  --navy: #0B1B33;
  /* 2026-09-24: page background + bottom bar switched from navy to black
     per Elina — inner panels/windows (--navy-panel etc.) stay navy. */
  --page-bg: #000000;
  --navy-panel: #142B4D;
  --navy-panel-light: #1C3A63;
  --gold: #D4AF37;
  --gold-soft: rgba(212, 175, 55, 0.28);
  --white: #F5F5F0;
  --muted: #8FA1BD;
  --green: #3FBF7F;
  --red: #E5484D;
  --radius-lg: 20px;
  --radius-md: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--page-bg); color: var(--white);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#app-shell { display: flex; flex-direction: column; height: 100dvh; }

.tab-panel { flex: 1 1 auto; min-height: 0; display: none; }
.tab-panel.active { display: flex; flex-direction: column; }

/* ---------- Bottom navigation — minimal, icon-led, GetYourGuide-style ---------- */

.bottom-nav {
  flex: 0 0 auto;
  display: flex;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
}

.bottom-nav button,
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 0 6px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-family: "Manrope", sans-serif;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: color 0.15s ease;
  text-decoration: none;
}

.bottom-nav button .icon,
.bottom-nav a .icon { font-size: 21px; line-height: 1; transition: transform 0.15s ease; }

/* Custom SVG icons (e.g. Divine Pass card) render as inline elements with a
   small baseline gap by default — this keeps them centered and the exact
   same size the emoji glyph used to be, so swapping one icon from emoji to
   SVG doesn't shift its alignment next to the others. */
.hub-icon svg,
.bottom-nav .icon svg { display: block; }

/* Translated tab labels (2026-09-24): in some languages the words are
   much longer than the English ones, so labels stay on one line, may use
   the full button width, and never run into the neighbouring tab. */
.bottom-nav button, .bottom-nav a { min-width: 0; }
.bottom-nav button > span[data-i18n] {
  display: block; max-width: 100%; padding: 0 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 10px; letter-spacing: 0;
}

.bottom-nav button.active { color: var(--gold); }
.bottom-nav button.active .icon { transform: translateY(-1px) scale(1.05); }
.bottom-nav button:focus-visible,
.bottom-nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ---------- Bottom-nav line icons (2026-09-12) — replaced the old
   five emoji-based destinations (Website/Divine Pass/Dione AI/Map/SOS,
   all bright multi-color emoji glyphs, "circus"-like per Elina) with a
   GetYourGuide-style 5-tab nav (Home/Explore/Bookings/Wishlist/Account)
   using thin monochrome line icons instead. The gold/silver gradients
   are defined once in index.html's inline <svg><defs> and referenced
   here by url(#navGold)/url(#navSilver) so every icon shares the exact
   same metallic look Elina approved in the mockup, brighter than a flat
   --muted/--gold fill. Website/Dione AI/Map/SOS still exist as quick-
   access cards on the Home hub screen, unchanged — this section is only
   about the bottom nav's own 5 destinations. */
.bottom-nav .icon svg.nav-line-icon {
  width: 21px; height: 21px;
  stroke: url(#navSilver); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0.5px 0.5px rgba(0,0,0,0.4));
  transition: filter 0.15s ease;
}
.bottom-nav button.active .icon svg.nav-line-icon,
.bottom-nav a.active .icon svg.nav-line-icon {
  stroke: url(#navGold);
  filter: drop-shadow(0 0.5px 1.5px rgba(212,175,55,0.55));
}

/* ---------- Hub / home screen (2026-09-10) ---------- */

.hub {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
/* Wordmark image (2026-09-12) replaced the "DIONE / Divine Greece" text
   lockup with Elina's actual site logo — same file used on divinegreece.com. */
.hub-logo {
  display: block;
  width: 100%;
  max-width: 210px;
  height: auto;
  margin: 0 auto;
}
.hub-brand-title {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--white);
}
.hub-brand-sub {
  display: block;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 400px;
}
.hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 6px;
  background: var(--navy-panel);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: var(--radius-lg);
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  text-align: center;
}
.hub-card:active { transform: scale(0.97); }
.hub-card:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.hub-card .hub-icon { font-size: 28px; line-height: 1; }
.hub-card .hub-icon-img { width: 28px; height: 28px; object-fit: contain; display: block; }
/* 2026-10-02 (Elina): SOS card shows the European emergency number 112
   (white, bold) in the same red rounded square as the old 🆘 emoji. */
.hub-card .hub-112 {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  background: #F44236; color: #fff;
  font-family: "Manrope", sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: -0.2px; line-height: 1;
}
.hub-card-wide { grid-column: span 2; flex-direction: row; padding: 16px; }

/* ---------- Explore tab (2026-09-12) — the 4 category cards that used to
   be a proposed "Εξερεύνησε" section on the hub screen now live here as
   their own bottom-nav destination instead (Elina's call: keeps the Home
   screen to just the 4 quick-access cards). ---------- */

.explore-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 4px;
}
/* Inbox widget (2026-09-12): moved here from Dione's header, top-right —
   align-items: center on .explore-top above keeps it vertically centered
   next to the title block, roughly matching the spot/height it had in the
   Dione tab's own (shorter) header. */
.explore-top-text { min-width: 0; }
.explore-top h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  color: var(--white);
}
.explore-top .sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}
/* FIX (2026-09-12): this grid had no width cap, unlike .hub-grid on the Home
   tab (max-width: 400px) — on a phone's narrow screen the 2 columns stayed
   narrow while the leftover vertical space stretched the (unset) grid rows
   tall, giving portrait/"vertical" cards; on a laptop's much wider browser
   window the same grid stretched to fill that width instead, giving
   landscape/"horizontal" cards — same layout, two very different shapes on
   different screens. max-width + centering keeps the grid's own size
   consistent everywhere (same as Home already does); align-content: start
   stops the rows from stretching to fill leftover vertical space, so each
   card's height comes from its own content/min-height instead — this also
   directly fixes the cards looking too big/empty, since they no longer
   stretch to fill whatever height happens to be left over. */
.explore-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}
/* FIX (2026-09-12): the 400px cap above is right for a phone-width screen
   (keeps 2 columns, fixes the shape bug described above), but on a wider
   laptop browser window it left most of the panel empty and forced a tall
   scroll for no reason, once there were 10 categories instead of 4. From
   ~700px wide (a laptop/tablet browser, never a phone in portrait) the grid
   widens and switches to auto-fill so as many columns fit as the available
   width allows (each still at least 160px) — cards keep the exact same
   shape/size, there are just more per row, so everything spreads across
   the panel instead of stacking in a narrow strip. */
@media (min-width: 700px) {
  .explore-grid {
    /* UPDATED 2026-09-13: back to 4 columns now that Dining and Thermal
       Springs were removed, leaving exactly 8 categories again — 4x2
       divides evenly, so every row is full and the block reads as
       symmetric. This column count has now changed several times as the
       category count changed — whoever edits this next should just pick
       whatever divides the current card count evenly (or add
       justify-content: center, already below, as a safety net when it
       doesn't). */
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    max-width: min(90vw, 800px);
    /* On desktop the grid rarely fills its flex space vertically (only 2
       rows for 10 cards at 5-across) — align-content: center keeps the
       whole block centered in the leftover space instead of pinned to the
       top with empty room below, so it reads as centered on the page both
       ways. Horizontal centering already comes from max-width + margin:
       auto above. Left as "start" on phones (the @media above doesn't
       apply there) since a tall scrolling list should stay pinned to the
       top, not float mid-screen. */
    align-content: center;
  }
}
.explore-card {
  background: linear-gradient(150deg, var(--navy-panel), var(--navy-panel-light));
  /* FIX (2026-09-12): a plain `border` here rendered with a visible bright
     seam along the bottom straight edge (fine on the rounded corners, but
     the semi-transparent gold blended oddly with the photo background layer
     right at the flat bottom edge) — an inset box-shadow draws the same
     1px gold outline but as an overlay effect instead of a box-model
     border, which doesn't have that seam. */
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.22);
  border-radius: var(--radius-lg);
  padding: 18px 14px;
  aspect-ratio: 1 / 0.95;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  color: var(--white);
  font-family: "Manrope", sans-serif;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.explore-card:active { transform: scale(0.97); }
.explore-card .ic { font-size: 24px; }
.explore-card .lb { font-size: 13.5px; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* Photo cards (2026-09-12): a category with a real photo sets its own
   background-image inline (a dark-to-transparent gradient layered over the
   photo, so the icon+label at the bottom stay readable on any picture) and
   gets this class for cover/center sizing — categories without a photo yet
   keep the plain navy gradient above. */
.explore-card.has-photo {
  background-size: cover;
  background-position: center;
}
.explore-card.has-photo .ic { text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* Interests (2026-10-18, Lina): a heart in the corner of every card; the
   cards the user loves are what Dione suggests first. */
.explore-hint {
  flex: 0 0 auto;
  width: calc(100% - 40px);
  max-width: 360px;
  margin: 8px auto 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--navy-panel);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.45);
  font: 600 13px/1.4 "Manrope", sans-serif;
  color: var(--white);
  box-sizing: border-box;
}
.explore-card { position: relative; }
.explore-heart {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.explore-heart svg { display: block; }
.explore-heart:active { transform: scale(0.88); }

/* ---------- Simple placeholder panels (2026-09-12) — Wishlist and Account
   are still rough/Phase-5-and-3 respectively; these keep the new 5-tab
   bottom nav fully functional (nothing 404s or shows a blank screen) until
   each gets its own real design pass. ---------- */

.placeholder-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  color: var(--muted);
}
.placeholder-panel .ic { font-size: 34px; opacity: 0.6; }
.placeholder-panel h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}
.placeholder-panel p { font-size: 13px; max-width: 260px; line-height: 1.5; margin: 0; }

/* ---------- Shared minimal header (used sparingly — visuals lead, not chrome) ---------- */

.minimal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
}
.minimal-header .brand {
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Buttons ---------- */

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 20px;
  border: none; border-radius: 999px;
  background: linear-gradient(135deg, #E8CB6A, var(--gold));
  color: var(--navy);
  font-weight: 700; font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--white);
  font-weight: 600; font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }