/* =========================================================
   VOYAGRAM — styles.css (clean, deduped, consistent)
   - Safe: keeps existing classes working
   - Tokens + global reset
   - Layout (grid + cards)
   - Topbar (logo scaled without growing bar) + user menu
   - Feed spacing + post actions + comment UX
   - Sidebar search (bigger icon, same button size) + popular
   - Profile card + stats icons
   - Modals
   - Auth pages
   - Profile/trip form + trip status pills
   - Style bars (filter + tripStylePick)
   - Lightbox
   - Responsive
   ========================================================= */

/* =========================================================
   1) TOKENS
   ========================================================= */
:root{
  /* Base */
  --bg: #fdfdffe5;
  --text: #1b1f24;
  --muted: #6c7580;
  --line: rgba(180,190,182,.55);

  /* Brand */
  --green: #ff8a00;
  --green2: #ff9f2f;
  --greenSoft: #ffffff;

  /* Typography */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-brand: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  /* Shadows */
  --shadow-sm: 0 10px 22px rgba(0,0,0,.08);
  --shadow-md: 0 18px 44px rgba(0,0,0,.10);
  --shadow-lg: 0 18px 60px rgba(18,25,20,.12);

  /* Surfaces */
  --surface-glass: rgba(255,255,255,.78);
  --surface-strong: rgba(255,255,255,.92);
  --surface-soft: rgba(246,247,246,.70);

  /* Inputs */
  --input-bg: rgba(236,244,255,.92);
  --input-border: rgba(160,170,165,.45);
  --input-border-focus: rgba(0,165,74,.55);
  --focus-ring: 0 0 0 3px rgba(0,165,74,.12);

  /* Buttons */
  --btn-primary-bg: linear-gradient(180deg, var(--green2) 0%, var(--green) 100%);
  --btn-primary-fg: #fff;
  --btn-accent-bg: #f5b21a;
  --btn-accent-fg: #fff;
  --btn-danger: #c00000;
}

/* =========================================================
   2) RESET + GLOBAL
   ========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: var(--font-ui);
  font-weight: 100;
  color:var(--text);
  line-height:1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background:
    radial-gradient(900px 460px at 30% -10%, rgba(145, 173, 146, 0.32) 0%, rgba(146,175,147,0) 60%),
    radial-gradient(900px 460px at 80% -10%, rgba(210,220,210,.55) 0%, rgba(210,220,210,0) 60%),
    var(--bg);
  background-attachment: fixed;

  overflow: auto; /* ✅ scrollbar brauseri ääres */
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button,input,textarea,select{ font:inherit; }

/* Container (single source of truth) */
.container{
  max-width: 1420px;
  margin: 0 auto 60px;   /* ✅ topbar ei alga enam all */
  padding: 0 18px;
  height: auto;
  display: block;
}

/* =========================================================
   3) TOPBAR / NAV
   ========================================================= */
.topbar{
  background: rgba(255, 255, 255, 0.473);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(80px);

  display:flex;
  align-items:center;
  justify-content:center;
  padding: 1px 14px;
  min-height: 64px;
  gap: 14px;

  position: sticky;
  position: relative;
  top: 0;
  z-index: 5000;

  overflow: visible;
}

/* Brand */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding-left:6px;
  line-height:1;
  overflow: visible;
}

/* Keep logo left while center items stay centered */
.topbar .brand{
  position:absolute;
  left:14px;
  top:50%;
  transform: translateY(-50%);
}


/* Hide brand text everywhere (logo-only topbar) */
.brandText{ display:none !important; }

/* ✅ Logo 3x suurem (visuaalselt), topbar ei muutu kõrgemaks */
.brandLogo{
  height: 99px; /* layout-kõrgus (ei muuda topbari kõrgust) */
  width: auto;
  object-fit: contain;

  transform: scale(3) translate(-12px, 3px);
  transform-origin: left center;
  display:block;
}

/* (Safe) keep these classes if any page still includes them */
.brandTitle{
  font-family: var(--font-brand);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: var(--green);
  line-height: 1.05;
}
.brandSubtitle{
  margin-top: 3px;
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.15;
}

/* Tabs */
.tabs{
  display:flex;
  align-items:center;
  margin-left: 0;
  flex: 0 0 auto;
  justify-content: center;
  gap: 18px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  white-space: nowrap;
}
.tab{
  border:0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight:600;
  color:#3b4440;
  cursor:pointer;
}
.tab.active{
  background: transparent;
  color:#1b1f24;
  box-shadow:none;
  border-bottom: 2px solid rgba(0,56,23,.35);
}

/* Primary CTA button */
#topNewTripBtn,
#topNewTripBtn.topNewTripBtn{
  margin-left: 14px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 700;
  background: var(--btn-primary-bg);
  color: #fff;
  border: 0;
  box-shadow: 0 12px 22px rgba(94,127,91,.22);
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease;
  white-space: nowrap;
}
#topNewTripBtn:hover{ transform: translateY(-1px); box-shadow: 0 16px 28px rgba(94,127,91,.28); }
#topNewTripBtn:active{ transform: translateY(0); box-shadow: 0 10px 18px rgba(94,127,91,.20); }

/* User pill + dropdown */
.userpill{
  margin-left: 0;
  display:flex;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(160,170,165,.35);
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(18,25,20,.08);
  user-select:none;
  min-width:220px;
  position:relative;
}

.topbar .userpill{
  position:absolute;
  right:14px;
  top:50%;
  transform: translateY(-50%);
}

.userpill img{
  width:36px;height:36px;border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(229,231,235,.85);
}
.userpill .name{ font-size:13px; font-weight:700; }
.userpill .small{ font-size:11px; color:var(--muted); font-weight:700; }
.caret{ margin-left:auto; color:rgba(60,70,65,.8); font-weight:700; }

.user-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:210px;
  background:#fff;
  border:1px solid rgba(160,170,165,.35);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  padding: 8px;
  display:none;
  z-index: 10000;
}
.user-menu.open{ display:block; }

.um-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  color:#1b1f24;
  background:#fff;
  border:none;
  text-align:left;
}
.um-item:hover{ background: rgba(236,241,236,.9); }
.um-item.danger{ color:#b91c1c; }
.um-ico{ width:18px; display:inline-flex; justify-content:center; }
.um-divider{ height:1px; background:rgba(160,170,165,.35); margin:8px 6px; }

/* =========================================================
   4) PAGE LAYOUT GRIDS (single source of truth)
   ========================================================= */
.grid{
  margin-top: 18px;
  display:grid;
  /* Flexible 3-column layout: sidebars can shrink a bit on narrower desktop windows */
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(240px, 280px);
  gap: 24px;
  align-items:start;
}
.grid > div{ align-self:start; min-width:0; }

/* profile-edit center card alignment (safe) */
.profile-edit-page .grid > div:nth-child(2){
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  overflow: visible;
  height: auto;
}


.grid.vgLayout{
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 26px;
}
.vgScroll{
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
}

/* ✅ vasak ja parem veerg sticky (desktop) */
@media (min-width: 901px){
  .grid > div:nth-child(1),
  .grid > div:nth-child(3){
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

/* =========================================================
   5) FEED SPACING + FEED COMPACT TWEAKS
   ========================================================= */
#feed.feed{
  display:flex;
  flex-direction:column;
  gap: 32px;
}
#feed.feed > *{ margin:0; }

#feed .vgCard{ margin: 0 0 32px 0; }
#feed .vgCard:last-child{ margin-bottom: 0; }

/* FEED: remove separator lines */
.vgStops,
.vgCounts,
.vgComments,
.vgComposer{
  border-top: 0 !important;
}

/* FEED: reduce vertical padding between sections */
.vgStops{ padding-bottom: 6px !important; }
.vgCounts{ padding-top: 0px !important; padding-bottom: 6px !important; }
.vgComments{ padding-top: 6px !important; padding-bottom: 4px !important; }
.vgComposer{ padding-top: 6px !important; padding-bottom: 10px !important; }

/* =========================================================
   6) RIGHT SIDEBAR
   ========================================================= */
.searchbar{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border: 1px solid rgba(160,170,165,.25);
  border-radius: 18px;
  padding: 6px 6px;
  box-shadow: var(--shadow-md);
}

.searchbar .glass{
  width:32px;
  height:32px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(94,127,91,.12);
  border: 1px solid rgba(94,127,91,.18);
  color: var(--green);
  font-weight: 800;
}

.searchbar input{
  border:none;
  outline:none;
  background:transparent;
  flex:1;
  font-size: 13px;
  font-weight: 700;
  color:#2a332f;
}

/* Search button stays same size; only icon scales */
.searchBtn{
  width:32px;
  height:32px;
  flex-shrink:0;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
}

/* Ikoni normaalne suurus */
.searchBtn .searchIcon{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
  transition: transform .15s ease, opacity .15s ease;
}

.searchBtn:hover .searchIcon{
  transform: scale(1.05);
  opacity:1;
}

/* Popular */
.popular{ margin-top: 14px; }

.popular .head{
  padding: 12px 14px 10px;
  font-weight: 800;
  color: rgba(36,45,40,.9);
}

.pop-item{
  margin: 0 14px 12px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(160,170,165,.25);
  box-shadow: var(--shadow-md);
  background:#fff;
  position:relative;
}

.pop-item img{
  width:100%;
  height: 88px;
  object-fit:cover;
  filter: saturate(1.05);
}

.pop-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(30,55,35,.52) 0%,
    rgba(30,55,35,.10) 60%,
    rgba(30,55,35,.05) 100%
  );
}

.pop-text{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color:#fff;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.pop-text .t{ font-weight: 900; font-size: 18px; }
.pop-text .s{ font-weight: 700; opacity:.9; font-size: 12px; }

/* =========================================================
   7) LEFT PROFILE CARD
   ========================================================= */

.vgProfileCard{
  overflow: hidden;
  border-radius: 28px;
  /* match page background */
  background: transparent;
  box-shadow: none;
  border: none;
}

.vgpcHero{
  padding: 18px 16px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.vgpcAvatar{
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 600px;
  box-shadow: 0 22px 60px rgba(0,0,0,.16);
  background: rgba(255,255,255,.7);
  padding: 6px;
}

.vgpcPhoto{
  width: 100%;
  height: 100%;
  border-radius: 800px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.95);
  background:#e9eeea;
}

.vgpcStatusDot{
  position:absolute;
  right: 10px;
  bottom: 10px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  background: rgba(200,60,60,.95);
}
.vgpcStatusDot.is-online{ background: rgba(0,165,74,.95); }
.vgpcStatusDot.is-offline{ background: rgba(200,60,60,.95); }

.vgpcName{
  margin-top: 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing:-0.02em;
  color:#1e2320;
}

.vgpcBio{
  font-weight: 800;
  font-size: 13px;
  color: rgba(70,78,74,.82);
  margin-top: 2px;
  max-width: 260px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vgpcQuote{
  margin-top: 8px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(40,50,45,.78);
}

  /* =========================================================
   PROFILE STAT TILES — ICON LEFT, TEXT RIGHT (CLEAN)
   ========================================================= */

/* ühtlane ühtne riba (mitte 3 eraldi kasti) */
.vgpcStatTiles{
  display:flex;
  justify-content:center;
  align-items:stretch;
  padding: 10px 0 12px;

  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* üksik stat */
.vgpcTile{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 10px;

  flex: 0 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align:left;
}

/* vertikaalne eraldusjoon */
.vgpcTile + .vgpcTile{
  border-left:1px solid rgba(0,0,0,.08);
}

/* Ikoon */
.vgpcTileIco{
  width: 24px;
  height: 24px;
  display: inline-block;
  flex-shrink: 0;
}

/* Parempoolne tekstiblokk */
.vgpcTileText{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

/* Number */
.vgpcTileNum{
  font-size:14px;
  font-weight:700;
  color:#1f2a24;
}

/* Label */
.vgpcTileLabel{
  font-size:10px;
  font-weight:600;
  color:rgba(70,78,74,.75);
}

.vgpcMapCard{
  background: transparent;
  border: none;
  box-shadow: none;
}

.vgpcWorldMap{
  height: 130px;
}
.vgpcWorldMap .svgMap-map-wrapper{ background: transparent; }
.vgpcWorldMap .svgMap-map-controls-wrapper{ display:none !important; }

/* eemaldab svgMap default tausta */
.svgMap-map-container,
.svgMap-map-wrapper,
.svgMap-map {
  background: transparent !important;
}
/* keelab kaardi transformid */
.svgMap-map-wrapper svg {
  transform: none !important;
}

/* keelab hover efekti */
.svgMap-country {
  transition: none !important;
} 

.vgpcProgressRow{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: -20px 12px -20px;
  font-weight: 800;
  color:#1f2a24;
}
.vgpcProgIco{ opacity:.9; }
.vgpcProgText{ flex: 1; font-size: 12px; color: rgba(40,50,45,.78); }
.vgpcPct{ font-size: 12px; font-weight: 900; color: rgba(0,165,74,.95); }

.vgpcBar{
  height: 7px;
  background: rgba(200,210,204,.55);
  margin: 0 12px 12px;
  border-radius: 999px;
  overflow:hidden;
}
.vgpcBarFill{
  height: 100%;
  background: rgba(0,165,74,.95);
  width: 0%;
  border-radius: 999px;
}


.vgpcOngoingBtn{
  width: calc(100% - 24px);
  margin: 0 12px 14px;
  border-radius: 18px;
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: rgba(0,165,74,.95) !important;
  border: none !important;
}
.vgpcOngoingBtn:hover{ filter: brightness(.98); }
.vgpcOngoingBtn .vgpcLeaf{ width:18px; height:18px; flex:0 0 auto; }
.vgpcOngoingBtn .vgpcLeaf path{ fill: #fff; }

.vgpcOngoingBtn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* =========================================================
   8) FEED POST ACTIONS MENU (⋯) + COMMENT UX
   ========================================================= */
.postActions{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ⋯ nupp */
.postMoreBtn{
  width: 42px;
  height: 36px;
  border-radius: 12px;
  border: none;
  background: none;
  box-shadow: none;
  cursor: pointer;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: rgba(30,35,32,.75);
  display:flex;
  align-items:center;
  justify-content:center;
}
.postMoreBtn:hover{ background: rgba(255,255,255,.85); }

/* post menu */
.postMoreMenu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.95);
  border: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  display: none;
  z-index: 2000;
}
.postMoreMenu.open{ display:block; }

.postMenuItem{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  text-align: left;
  color: #1b1f24;
}
.postMenuItem:hover{ background: rgba(236,241,236,.9); }
.postMenuItem.danger{ color: #b91c1c; }

/* Feed comments top row */
.vgCommentsTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.vgViewMoreComments{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  font-weight:900;
  font-size:13px;
  color:#111827;
}
.vgViewMoreComments:hover{ text-decoration: underline; }

.vgCommentMeta{
  display:flex;
  align-items:center;
  gap:8px;
  color:#6c7580;
  font-weight:700;
  font-size:10px;
  flex-shrink:0;
}

.vgCommentMoreWrap{ position:relative; }
.vgCommentMoreBtn{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:2px 6px;
  border-radius:10px;
  font-weight:900;
  font-size:16px;
  line-height:1;
  color:#6c7580;
}
.vgCommentMoreBtn:hover{ background: rgba(236,241,236,.9); }

.vgCommentMenu{
  position:absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 190px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  border: 1px solid rgba(180,190,182,.35);
  display:none;
  z-index: 3000;
}
.vgCommentMenu.open{ display:block; }

.vgCommentMenuItem{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  text-align:left;
  color:#1b1f24;
}

/* Comment menu icons (mask so color can be controlled via CSS) */
.vgMenuIcon{
  width:18px;
  height:18px;
  display:inline-block;
  flex:0 0 18px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
          mask-repeat:no-repeat;
          mask-position:center;
          mask-size:contain;
}
.vgMenuIconDelete{
  color:#6b7280;
  -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNpcmNsZS14LWljb24gbHVjaWRlLWNpcmNsZS14Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Im0xNSA5LTYgNiIvPjxwYXRoIGQ9Im05IDkgNiA2Ii8+PC9zdmc+");
          mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNpcmNsZS14LWljb24gbHVjaWRlLWNpcmNsZS14Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Im0xNSA5LTYgNiIvPjxwYXRoIGQ9Im05IDkgNiA2Ii8+PC9zdmc+");
}
.vgMenuIconReply{
  color:#2563eb;
  -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXJlcGx5LWljb24gbHVjaWRlLXJlcGx5Ij48cGF0aCBkPSJNMjAgMTh2LTJhNCA0IDAgMCAwLTQtNEg0Ii8+PHBhdGggZD0ibTkgMTctNS01IDUtNSIvPjwvc3ZnPg==");
          mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXJlcGx5LWljb24gbHVjaWRlLXJlcGx5Ij48cGF0aCBkPSJNMjAgMTh2LTJhNCA0IDAgMCAwLTQtNEg0Ii8+PHBhdGggZD0ibTkgMTctNS01IDUtNSIvPjwvc3ZnPg==");
}
.vgCommentMenuItem[data-action="deleteComment"]{
  color:#d11a2a;
}

.vgCommentMenuItem:hover{ background: rgba(236,241,236,.9); }
.vgCommentMenuItem.danger{ color:#b91c1c; }

/* Share glyph (alakriips + ↗) */
.vgShareGlyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  position:relative;
  flex:0 0 18px;
}
.vgShareGlyph::before{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  bottom:3px;
  height:2px;
  border-radius:2px;
  background: rgba(27,31,36,.75);
}
.vgShareGlyph::after{
  content:"↗";
  position:absolute;
  right:-1px;
  top:-4px;
  font-weight:900;
  font-size:14px;
  color: rgba(27,31,36,.8);
}

/* Share sheet */
.vgShareGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
}
.vgShareBtn{
  border:1px solid rgba(180,190,182,.35);
  background: rgba(255,255,255,.85);
  border-radius:14px;
  padding:12px 12px;
  cursor:pointer;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
}
.vgShareBtn:hover{ background: rgba(236,241,236,.95); }
.vgShareBtn .ico{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }
.vgShareHint{ color:#6c7580; font-weight:800; font-size:12px; margin-top:10px; line-height:1.35; }

/* =========================================================
   9) MODAL BACKDROP (works with ui.js)
   ========================================================= */
.modal-backdrop,
#modalBackdrop{
  position:fixed;
  inset:0;
  display:none; /* JS sets to flex */
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  z-index:9999;
  padding:24px;
}

.modal,
#modal{
  width:min(980px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow:auto;
  background:rgba(255,255,255,.96);
  border-radius: var(--radius-lg);
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  border:1px solid rgba(180,190,182,.35);
}
body.modal-open{ overflow:hidden; }

/* =========================================================
   10) AUTH PAGES (login/register)
   ========================================================= */
body.auth-page{ min-height:100vh; }

.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 54px;
  padding: 38px 18px;
}

.auth-left{ flex: 1; max-width: 620px; padding: 10px; }
.auth-logo{ margin-bottom: 10px; }

.twc-wordmark{ line-height: 1; }
.twc{
  font-family: var(--font-brand);
  font-weight: 1000;
  letter-spacing: -0.05em;
  color: #18b63a;
  font-size: clamp(64px, 6vw, 92px);
}

.auth-tagline{
  margin-top: 10px;
  font-family: var(--font-brand);
  font-size: 20px;
  line-height: 1.5;
  color: #111827;
  font-weight: 500;
}

.auth-right{ flex: 0 0 auto; width: min(420px, 100%); }

.auth-card,
.reg-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(180,190,182,.35);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}

.auth-card{ padding: 16px 16px 14px; }
.auth-form{ display:flex; flex-direction:column; gap: 12px; }

.auth-input{
  width:100%;
  height: 44px;
  border-radius: 4px;
  border: 1px solid rgba(160,170,165,.45);
  background: rgba(236,244,255,.92);
  padding: 10px 12px;
  font-weight: 650;
  outline: none;
}
.auth-input:focus{
  border-color: rgba(0,165,74,.55);
  box-shadow: 0 0 0 3px rgba(0,165,74,.12);
}

.auth-btn{
  width: 100%;
  border: 0;
  height: 44px;
  border-radius: 4px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: transform .08s ease, box-shadow .12s ease;
}
.auth-btn:active{ transform: translateY(1px); box-shadow: 0 8px 16px rgba(0,0,0,.10); }

.auth-btn-yellow{ background: var(--btn-accent-bg); color: var(--btn-accent-fg); }
.auth-btn-green{ background: var(--green2); color: #fff; }

.auth-link{
  display:block;
  text-align:center;
  color: #1d4ed8;
  font-weight: 800;
  font-size: 12px;
  margin-top: -2px;
}
.auth-link:hover{ text-decoration: underline; }

.auth-divider{ height: 1px; background: rgba(180,190,182,.55); margin: 2px 0; }

.auth-small{
  margin-top: 10px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
}

/* register specifics */
.reg-head{
  padding: 16px 16px 10px;
  text-align:center;
  border-bottom: 1px solid rgba(180,190,182,.35);
}
.reg-title{ font-family: var(--font-brand); font-weight: 900; font-size: 24px; color: #111827; }
.reg-sub{ margin-top: 4px; font-weight: 700; color: var(--muted); font-size: 13px; }

.reg-body{ padding: 14px 16px 16px; }
.reg-row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg-row3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.reg-label{
  margin: 10px 0 8px;
  font-weight: 900;
  font-size: 12px;
  color: #111827;
  display:flex;
  align-items:center;
  gap: 8px;
}
.reg-i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(29,78,216,.12);
  color: #1d4ed8;
  font-weight: 900;
  font-size: 11px;
}

.reg-gender{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.reg-radio{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid rgba(160,170,165,.45);
  background: rgba(255,255,255,.92);
  font-weight: 850;
  cursor: pointer;
}
.reg-radio input{ accent-color: var(--green2); }

/* =========================================================
   11) PROFILE EDIT (lighter + consistent)
   ========================================================= */
.vgEditRow{ display:flex; align-items:center; gap: 12px; }
.vgEditPreview{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.08);
}

.vgEditForm .vgLabel{
  display:block;
  font-weight: 850;
  font-size: 12px;
  color: rgba(17,24,39,.80);
  margin: 2px 2px 8px;
  letter-spacing: .2px;
}

.vgEditForm input:not([type="file"]),
.vgEditForm textarea,
.vgEditForm select{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  padding: 10px 12px;
  font-weight: 650;
  outline: none;
  box-shadow: 0 10px 18px rgba(0,0,0,.05);
}
.vgEditForm textarea{
  height:auto;
  min-height:96px;
  resize: vertical;
  padding: 12px 12px;
  line-height: 1.35;
  white-space: pre-wrap;
}
.vgEditForm input:not([type="file"]):focus,
.vgEditForm textarea:focus,
.vgEditForm select:focus{
  border-color: var(--input-border-focus);
  box-shadow: var(--focus-ring), 0 10px 18px rgba(0,0,0,.05);
}
.vgEditForm input[type="file"]{
  width:100%;
  border-radius:14px;
  border: 1px solid rgba(160,170,165,.35);
  background: rgba(255,255,255,.85);
  padding: 10px 12px;
  font-weight: 800;
  font-size: 13px;
}

/* Profiili muutmise lehe nupud – nihuta alla */
.vgEditForm .actions{
  margin-top: 28px;
}

/* =========================================================
   12) STYLE BARS (filter + tripStylePick)
   ========================================================= */
.vgStyleBarWrap{ margin: 10px 0 14px; }

.vgStyleGrid{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  overflow:hidden;
}

/* Filter bar variant: allow wrapping + center */
.vgStyleBar{
  flex-wrap:wrap;
  overflow:visible;
  gap:10px;
  justify-content:center;
}

/* Button */
.vgStyleBtn{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;

  padding:5px 8px;
  height:36px;

  border-radius:12px;
  border:1px solid rgba(180,190,182,.35);
  background:rgba(255,255,255,.85);

  cursor:pointer;
  user-select:none;

  font-size:12px;
}

/* Icon */
.vgStyleBtn img{
  width:44px;
  height:44px;
  object-fit:contain;
  flex-shrink:0;
}

/* Text */
.vgStyleBtn span{
  font-weight:700;
  font-size:11px;
  white-space:nowrap;
}

/* Active (no layout shift) */
.vgStyleBtn.is-on{
  outline: 2px solid rgba(0,165,74,.35);
}

/* =========================================================
   13) TRIP FORM — refined / soft typography
   ========================================================= */
.tf-fieldBlock{
  background: rgba(255,255,255,.75);
  border-radius: 16px;
  padding: 14px 14px;
  border: 1px solid rgba(180,190,182,.22);
  box-shadow: 0 10px 22px rgba(18,25,20,.04);
  margin-bottom: 12px;
}

.tf-fieldLabel{
  font-weight: 600;
  font-size: 13px;
  color: rgba(25,30,32,.65);
  letter-spacing: .15px;
  margin-bottom: 6px;
}

.tf-fieldInput{
  width:100%;
  border-radius: 14px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  padding: 11px 13px;
  font-weight: 500;
  font-size: 14px;
  color: rgba(20,24,28,.9);
  outline:none;
  box-shadow: 0 8px 16px rgba(0,0,0,.04);
}
.tf-fieldInput::placeholder{ color: rgba(80,90,95,.45); }
.tf-fieldInput:focus{
  border-color: var(--input-border-focus);
  box-shadow:
    0 0 0 2px rgba(0,165,74,.12),
    0 8px 16px rgba(0,0,0,.04);
}

/* Trip status — soft pills */
.tf-statusRow--pills{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.tf-statusPill{
  position: relative;
  display:flex;
  align-items:center;
  gap:6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(180,190,182,.28);
  font-size: 13px;
  font-weight: 500;
  color: rgba(30,35,38,.7);
  cursor:pointer;
  user-select:none;
  transition: all .18s ease;
}
.tf-statusPill:hover{ background: rgba(240,245,242,.9); }

.tf-statusPill input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.tf-pillIcon{
  width:14px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: rgba(180,190,182,.28);
  font-size: 10px;
  font-weight: 700;
  color: transparent;
  transition: all .15s ease;
}

.tf-pillText{ line-height:1.1; }

.tf-statusPill:has(input:checked){
  background: rgba(231,239,230,.85);
  border-color: rgba(0,165,74,.35);
  color: rgba(0,120,60,.9);
}
.tf-statusPill:has(input:checked) .tf-pillIcon{
  background: var(--green2);
  color:#fff;
}

/* =========================================================
   14) BUTTON BASE (for pages that use .btn)
   ========================================================= */
.btn{
  border:0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease;
}
.btn.btn-primary{
  background: var(--btn-primary-bg);
  color:#fff;
  box-shadow: 0 12px 22px rgba(94,127,91,.22);
}
.btn.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 16px 28px rgba(94,127,91,.26); }
.btn.btn-primary:active{ transform: translateY(0); box-shadow: 0 10px 18px rgba(94,127,91,.18); }

.btn.btn-ghost{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(180,190,182,.35);
  color: rgba(17,24,39,.70);
  box-shadow: 0 10px 18px rgba(18,25,20,.05);
}

/* =========================================================
   15) OPTIONAL UTILITIES (opt-in)
   ========================================================= */
.vg-surface-card{
  background: var(--surface-strong);
  border: 1px solid rgba(180,190,182,.35);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.vg-surface-glass{
  background: var(--surface-glass);
  border: 1px solid rgba(180,190,182,.35);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

/* =========================================================
   16) TEXTAREA COUNTERS + PHOTO PICK
   ========================================================= */
.vgCountWrap{ position: relative; }
.vgCountWrap textarea{ padding-bottom: 34px; }

.vgCharCount{
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(60, 70, 64, .70);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(20,30,25,.08);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 8px 20px rgba(18, 28, 22, .06);
  pointer-events: none;
}

.vgPhotoIcon{
  width:56px;
  height:56px;
  object-fit:contain;
}
.vgPhotoPick:hover{ transform: translateY(-1px); }

.vgTaWrap .vgCharCounter{
  position: absolute;
  right: 12px;
  bottom: 10px;

  font-size: 12px;
  font-weight: 800;
  color: rgba(60,70,64,.75);

  background: rgba(255,255,255,.75);
  border: 1px solid rgba(20,30,25,.08);
  border-radius: 999px;

  padding: 5px 10px;
  line-height: 1;

  box-shadow: 0 6px 14px rgba(18,28,22,.06);
  pointer-events: none;
  user-select: none;
}

/* =========================================================
   Photo layout picker (Form)
   ========================================================= */
.vgLayoutRow{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.vgLayoutPickerWrap{ display:flex; flex-direction:column; gap:8px; min-width:220px; }
.vgLayoutPickerWrapFull{ min-width: unset; width: 100%; }
.vgLayoutPickerTitle{ font-weight:900; font-size:12px; color:#2d343b; opacity:.9; }
.vgLayoutPicker{ display:grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap:10px; }
.vgLayoutBtn{
  appearance:none; border:1px solid rgba(180,190,182,.45);
  background: rgba(246,247,246,.70);
  border-radius:14px; padding:6px; cursor:pointer;
  box-shadow: 0 10px 26px rgba(18,25,20,.08);
  display:flex; flex-direction:column; gap:6px; align-items:stretch;
}
.vgLayoutBtn:hover{ filter:brightness(.99); }
.vgLayoutBtn.is-active{ outline: 3px solid rgba(94,127,91,.35); border-color: rgba(94,127,91,.65); }

.vgLayoutLabel{ font-size:12px; font-weight:900; color:#2d343b; opacity:.85; text-align:center; line-height:1; padding-bottom:2px; }

.vgLayoutMini{ width:100%; aspect-ratio: 16 / 10; border-radius:10px; overflow:hidden; display:grid; gap:4px; }
.vgLayoutMini > div{ background: rgba(45,52,59,.18); border-radius:8px; position:relative; }
.vgLayoutMini .plus{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; color:rgba(255,255,255,.9); font-size:14px; text-shadow:0 2px 10px rgba(0,0,0,.25); }

/* Templates (mini) */
.vgMini-t1{ grid-template-columns: repeat(3,1fr); grid-template-rows: 1fr; }
.vgMini-t2{ grid-template-columns: 1.2fr .8fr; grid-template-rows: 1fr 1fr; grid-template-areas:
  "a b"
  "c c";
}
.vgMini-t2 .a{ grid-area:a; }
.vgMini-t2 .b{ grid-area:b; }
.vgMini-t2 .c{ grid-area:c; }

.vgMini-t3{ grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }

.vgMini-t4{ grid-template-columns: repeat(3,1fr); grid-template-rows: 1fr 1fr; grid-template-areas:
  "a a b"
  "c d e";
}
.vgMini-t4 .a{ grid-area:a; }
.vgMini-t4 .b{ grid-area:b; }
.vgMini-t4 .c{ grid-area:c; }
.vgMini-t4 .d{ grid-area:d; }
.vgMini-t4 .e{ grid-area:e; }

.vgMini-t5{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }

.vgMini-t6{ grid-template-columns: repeat(3,1fr); grid-template-rows: 1fr 1fr; grid-template-areas:
  "a b c"
  "d d d";
}
.vgMini-t6 .a{ grid-area:a; }
.vgMini-t6 .b{ grid-area:b; }
.vgMini-t6 .c{ grid-area:c; }
.vgMini-t6 .d{ grid-area:d; }

/* =========================================================
   17) VOYAGRAM LIGHTBOX — FIT ALWAYS (portrait + landscape)
   ========================================================= */
.vgLbBack{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 99999;

  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
  height: 100vh;
}
.vgLbBack.open{ display:flex; }

@supports (height: 100dvh){
  .vgLbBack{ height: 100dvh; }
}

.vgLbCard{
  width: min(1180px, calc(100vw - 24px));

  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);

  display: flex;
  flex-direction: column;

  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);

  overflow: hidden;
  position: relative;
}

@supports not (height: 100dvh){
  .vgLbCard{ max-height: calc(100vh - 24px); }
}

.vgLbTop{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
}

.vgLbBottom{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px 12px;
}

.vgLbStage{
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 12px 12px;
  display: flex;
  overflow: hidden;
}

.vgLbImgWrap{
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  position: relative;
}

.vgLbImg{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

body.modal-open .modal,
body.modal-open .modal-body{
  overflow: hidden !important;
  max-height: none !important;
}

/* =========================================================
   18) RESPONSIVE
   ========================================================= */
/* Keep 3-column layout on most desktops/laptops.
   Collapse only on small/tablet widths. */
@media (max-width: 1280px){
  .grid{
    grid-template-columns: minmax(210px, 240px) minmax(0, 1fr) minmax(230px, 260px);
    gap: 18px;
  }
}

/* Narrow desktop / split-screen: keep 3 columns but squeeze sidebars a bit more */
@media (max-width: 1024px){
  .grid{
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) minmax(210px, 240px);
    gap: 14px;
  }
}

/* Collapse to single column only on truly small screens.
   Many users keep the browser side-by-side; 3 columns should still stay visible.
   We therefore collapse later (<= 720px). */
@media (max-width: 720px) and (pointer: coarse){
  body{ overflow: auto; }

  .grid > div:nth-child(2){ overflow: visible; }

  .grid > div:nth-child(1),
  .grid > div:nth-child(3){
    position: static;
    height: auto;
  }

  .grid{ grid-template-columns: 1fr; }
  .grid.vgLayout{ grid-template-columns: 1fr; }
  .vgScroll{ grid-template-columns: 1fr; }
  .tabs{ display:none; }
  .vgLeft,.vgRight{ display:none; }
}

@media (max-width: 520px) and (pointer: coarse){
  body{ overflow: auto; }
  .grid > div:nth-child(2){ overflow: visible; }
  .grid > div:nth-child(1),
  .grid > div:nth-child(3){
    position: static;
    height: auto;
  }
  .grid{ grid-template-columns: 1fr; }
  .grid.vgLayout{ grid-template-columns: 1fr; }
  .vgScroll{ grid-template-columns: 1fr; }
  .tabs{ display:none; }
  .vgLeft,.vgRight{ display:none; }
}


/* Profile edit page: hide left CTA buttons */
.profile-edit-page .vgpcCta,
.profile-edit-page .vgpcEdit{
  display: none !important;
}

/* Remove bold from inputs & textareas (safe) */
.tf-fieldInput,
.tf-fieldInput textarea,
.tf-fieldInput input,
textarea.tf-fieldInput,
input.tf-fieldInput{
  font-weight: 400 !important;
}
/* Textarea counter: bottom-right inside textarea */
.vgTaWrap .vgCharCounter{
  position: absolute;
  right: 12px;
  bottom: 10px;

  font-size: 12px;
  font-weight: 800;
  color: rgba(60,70,64,.75);

  background: rgba(255,255,255,.75);
  border: 1px solid rgba(20,30,25,.08);
  border-radius: 999px;

  padding: 5px 10px;
  line-height: 1;

  box-shadow: 0 6px 14px rgba(18,28,22,.06);
  pointer-events: none;
  user-select: none;
}

/* Profile card SVG icons */
.vgpcTileIco svg{ width:18px; height:18px; display:block; }
.vgpcTileIco svg path{ fill: rgba(0, 165, 74, 0); }

.vgpcProgIco svg{ width:16px; height:16px; display:block; }
.vgpcProgIco svg path{ fill: rgba(0, 165, 74, 0); }


/* --- Desktop safeguard: keep 3 columns on PC even if CSS px is small due to scaling/zoom --- */
@media (pointer: fine){
  .grid{
    display:grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(240px, 280px);
  }
  .vgLeft,.vgRight{ display:block; }
}

.visitedMap{height:350px;}


/* Responsive: avoid overlaps on smaller screens */
@media (max-width: 900px){
  .topbar{ justify-content: space-between; }
  .topbar .brand,
  .topbar .userpill{
    position: static;
    transform: none;
  }
  .tabs{ flex: 1; justify-content: center; }
  .topNewTripBtn{ margin-left: 12px; }
}

/* =========================================================
   TOPBAR ONE-LINE FIX (safe override)
   - Uses existing HTML: .topbar > .brand + .topbarCenter + .userpill
   - Keeps everything on a single row
   ========================================================= */
.topbar{
  /* keep your glass look, just fix layout + sticky */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-content: initial;
  gap: 14px;

  position: sticky;
  top: 0;
}

/* Undo older absolute hacks (keep in normal flow so grid works) */
.topbar .brand,
.topbar .userpill{
  position: static !important;
  transform: none !important;
}

/* Center group: tabs + CTA stay side-by-side, never wrap */
.topbarCenter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  flex-wrap: nowrap;
  min-width: 0;
  white-space: nowrap;
}

/* Tabs should not wrap either */
.topbarCenter .tabs{
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* CTA must stay on same line */
.topbarCenter #topNewTripBtn,
.topbarCenter .topNewTripBtn{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Small screens: allow wrapping/stacking cleanly */
@media (max-width: 720px){
  .topbar{
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 10px;
  }
  .topbarCenter{
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
  }
}

/* =========================================================
   i18n: language selector + topbar right grouping
   ========================================================= */

/* Right-side container (language + profile) */
.topbarRight{
  position:absolute;
  right:14px;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  z-index: 6000;
}

/* userpill is now placed inside .topbarRight */
.topbar .userpill{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  transform:none !important;
}

/* =========================
   Language selector
========================= */

.langSelect{
  position:relative;
  display:flex;
  align-items:center;
}

/* ===== FLAG BUTTON (SMALL + FULL FLAG CIRCLE) ===== */
.langBtn{
  width:28px;
  height:28px;
  padding:0;
  border:none;
  background:none;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
  cursor:pointer;
  font-size:0;
  line-height:0;
}

.langBtn .code,
.langBtn .label,
.langBtn .caret{
  display:none !important;
}

.langBtn .flagSvg{
  width:100%;
  height:100%;
  display:block;
  margin:0 !important;
  overflow:hidden;
}

.langBtn .flagSvg svg{
  width:100%;
  height:100%;
  display:block;
}


/* --- DROPDOWN --- */
.langMenu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:210px;
  background:#fff;
  border:1px solid rgba(160,170,165,.35);
  border-radius:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  padding:8px;
  display:none;
  z-index:10000;
}

.langMenu.open{
  display:block;
}

.langItem{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  color:#1b1f24;
  background:#fff;
  border:none;
  text-align:left;
}

.langItem:hover{
  background: rgba(236,241,236,.9);
}

/* SVG flags dropdownis */
.flagSvg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:14px;
  flex-shrink:0;
}

.flagSvg svg{
  width:100%;
  height:100%;
  display:block;
  border-radius:2px;
}

/* Move top CTA a touch left */
#topNewTripBtn,
#topNewTripBtn.topNewTripBtn{
  margin-right:10px;
}

/* ===== Similar trip planner ===== */
.vtCardPlannerBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  margin:12px 0 14px;
  border:1px solid rgba(255,165,0,.18);
  background:linear-gradient(180deg,rgba(255,248,238,.95),rgba(255,255,255,.98));
  border-radius:16px;
}
.vtCardPlannerBtn{
  border:0;
  border-radius:999px;
  padding:10px 16px;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  background:#ff9f0a;
  color:#fff;
}
.vtCardPlannerHint{font-size:12px;font-weight:800;color:#7a6370}
.vtPlanForm,.vtPlanResult,.vtSavedHub{display:grid;gap:16px}
.vtPlanLead{font-size:14px;line-height:1.5;color:#5d6670;font-weight:700}
.vtPlanGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vtPlanField{display:grid;gap:8px;font-weight:800;color:#2d343b}
.vtPlanField span{font-size:13px}
.vtPlanField input,.vtPlanField select{
  height:46px;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:0 14px;
  font:inherit;background:#fff;color:#1f2937
}
.vtPlanFieldWide{grid-column:1 / -1}
.vtPlanBudgetWrap{display:flex;align-items:center;gap:10px;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:0 14px;background:#fff;height:46px}
.vtPlanBudgetWrap input{border:0;outline:none;padding:0;flex:1;height:100%}
.vtPlanActions{display:flex;justify-content:flex-end}
.vtPlanLoading{display:grid;justify-items:center;gap:16px;padding:22px 8px}
.vtPlanSpinner{width:44px;height:44px;border-radius:999px;border:4px solid rgba(255,159,10,.18);border-top-color:#ff9f0a;animation:vtSpin .9s linear infinite}
@keyframes vtSpin{to{transform:rotate(360deg)}}
.vtPlanLoadingSteps{display:grid;gap:8px;text-align:center;font-weight:800;color:#5d6670}
.vtPlanHero{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;align-items:start}
.vtPlanKicker{font-size:12px;font-weight:900;color:#ff9f0a;text-transform:uppercase;letter-spacing:.06em}
.vtPlanHero h3{margin:4px 0 8px;font-size:24px;line-height:1.15}
.vtPlanHero p{margin:0;color:#55606c;font-weight:700;line-height:1.6}
.vtPlanMetaRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vtPlanMetaRow span,.vtPlanSource{padding:6px 10px;border-radius:999px;background:#f4f6f8;font-size:12px;font-weight:800;color:#4c5560}
.vtPlanSource{display:inline-block;margin-top:12px}
.vtPlanPriceCard{padding:16px;border-radius:18px;background:#fff7ec;border:1px solid rgba(255,159,10,.16)}
.vtPlanPriceLabel{font-size:12px;font-weight:900;color:#8a6b2e;text-transform:uppercase;letter-spacing:.06em}
.vtPlanPriceValue{font-size:28px;font-weight:900;color:#2d343b;margin-top:6px}
.vtPlanPriceBreakdown{display:grid;gap:6px;margin-top:10px;font-size:13px;font-weight:800;color:#5f6872}
.vtPlanSection{display:grid;gap:12px}
.vtPlanSectionTitle{font-size:15px;font-weight:900;color:#2d343b}
.vtPlanDayList{display:grid;gap:12px}
.vtPlanDayCard{padding:14px;border-radius:16px;background:#fafbfc;border:1px solid rgba(0,0,0,.06)}
.vtPlanDayTitle{font-weight:900;font-size:15px;color:#25313d}
.vtPlanDayMeta{margin-top:6px;font-size:12px;font-weight:800;color:#7b8794}
.vtPlanDayText{margin-top:8px;font-size:14px;line-height:1.6;color:#51606d;font-weight:700}
.vtPlanBulletList{margin:10px 0 0;padding-left:18px;display:grid;gap:6px}
.vtPlanBulletList li{font-size:13px;line-height:1.5;color:#55606c;font-weight:700}
.vtPlanOfferList{display:grid;gap:10px}
.vtPlanOffer{display:block;padding:14px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.07);text-decoration:none;color:inherit}
.vtPlanOfferHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.vtPlanOfferHead strong{font-size:14px;color:#28323d}
.vtPlanOfferHead span{font-size:12px;font-weight:900;color:#7b8794}
.vtPlanOfferDesc{margin-top:8px;font-size:13px;font-weight:700;color:#5c6773;line-height:1.5}
.vtPlanOfferMeta{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:13px;font-weight:900;color:#25313d}
.vtPlanSplit2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vtPlanNote{padding:14px;border-radius:14px;background:#f7f8fa;color:#5f6872;font-size:13px;font-weight:700;line-height:1.5}
.vtPlanFooterActions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.vtSavedHubTop{display:flex;gap:10px;flex-wrap:wrap}
.vtSavedPlanList{display:grid;gap:12px}
.vtSavedPlanCard{padding:14px;border:1px solid rgba(0,0,0,.07);border-radius:16px;background:#fff}
.vtSavedPlanCard.is-focus{border-color:rgba(255,159,10,.45);box-shadow:0 0 0 3px rgba(255,159,10,.12)}
.vtSavedPlanHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.vtSavedPlanTitle{font-size:15px;font-weight:900;color:#27313c}
.vtSavedPlanSub,.vtSavedPlanDates{margin-top:6px;font-size:12px;font-weight:800;color:#74808c}
.vtSavedPlanPrice{font-size:15px;font-weight:900;color:#27313c}
.vtSavedPlanSummary{margin-top:10px;font-size:13px;line-height:1.55;color:#58636f;font-weight:700}
.vtSavedPlanActions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}
.vtPlanEmpty{padding:10px 4px;color:#5d6670;font-weight:800}
@media (max-width: 880px){
  .vtPlanGrid,.vtPlanHero,.vtPlanSplit2{grid-template-columns:1fr}
  .vtCardPlannerBar{align-items:flex-start;flex-direction:column}
}



/* === Planner modal visual alignment with gallery (scoped only) === */
#modalBackdrop.vtModalPlanner {
  background: rgba(0, 0, 0, .55);
}

#modalBackdrop.vtModalPlanner .modal,
#modal.vtModalPlannerCard {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: rgba(255,255,255,.96);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  border: 1px solid rgba(180,190,182,.35);
}

#modalBackdrop.vtModalPlanner #modalClose,
#modalClose.vtModalPlannerClose {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.85);
  color: rgba(0,0,0,.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

#modalBackdrop.vtModalPlanner #modalClose:hover,
#modalClose.vtModalPlannerClose:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  background: rgba(255,255,255,.96);
}

#modalBackdrop.vtModalPlanner #modalTitle {
  font-weight: 900;
  color: rgba(0,0,0,.72);
  letter-spacing: -.01em;
}

#modalBackdrop.vtModalPlanner .vtPlanForm,
#modalBackdrop.vtModalPlanner .vtPlanResult,
#modalBackdrop.vtModalPlanner .vtSavedPlanList,
#modalBackdrop.vtModalPlanner .vtSavedHub {
  width: 100%;
}

/* === Similar trip planner: visual polish to match provided mockup === */
#modalBackdrop.vtModalPlanner .vtPlanForm{
  gap:22px;
}

#modalBackdrop.vtModalPlanner .vtPlanLead{
  font-size:16px;
  line-height:1.65;
  color:#5b6470;
  font-weight:700;
  max-width:860px;
}

#modalBackdrop.vtModalPlanner .vtPlanGrid{
  gap:0;
  border:1px solid rgba(20,24,31,.08);
  border-radius:24px;
  background:linear-gradient(180deg,#fcfcfd 0%, #f8f8fa 100%);
  overflow:hidden;
}

#modalBackdrop.vtModalPlanner .vtPlanField,
#modalBackdrop.vtModalPlanner .vtPlanFieldWide{
  gap:10px;
  padding:22px;
  background:transparent;
}

#modalBackdrop.vtModalPlanner .vtPlanField:nth-child(1),
#modalBackdrop.vtModalPlanner .vtPlanField:nth-child(2),
#modalBackdrop.vtModalPlanner .vtPlanField:nth-child(3),
#modalBackdrop.vtModalPlanner .vtPlanField:nth-child(4){
  border-bottom:1px solid rgba(20,24,31,.08);
}

#modalBackdrop.vtModalPlanner .vtPlanField:nth-child(odd):not(.vtPlanFieldWide){
  border-right:1px solid rgba(20,24,31,.08);
}

#modalBackdrop.vtModalPlanner .vtPlanField span,
#modalBackdrop.vtModalPlanner .vtPlanFieldWide span{
  font-size:14px;
  font-weight:900;
  color:#232a34;
}

#modalBackdrop.vtModalPlanner .vtPlanField input,
#modalBackdrop.vtModalPlanner .vtPlanField select,
#modalBackdrop.vtModalPlanner .vtPlanBudgetWrap{
  height:58px;
  border:1px solid rgba(20,24,31,.10);
  border-radius:18px;
  padding:0 18px;
  background:#fff;
  box-shadow:0 2px 6px rgba(17,24,39,.04);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#modalBackdrop.vtModalPlanner .vtPlanField input,
#modalBackdrop.vtModalPlanner .vtPlanField select,
#modalBackdrop.vtModalPlanner .vtPlanBudgetWrap input,
#modalBackdrop.vtModalPlanner .vtPlanBudgetWrap span{
  font-size:18px;
  font-weight:800;
  color:#1f2937;
}

#modalBackdrop.vtModalPlanner .vtPlanBudgetWrap span{
  color:#596270;
}

#modalBackdrop.vtModalPlanner .vtPlanField input:focus,
#modalBackdrop.vtModalPlanner .vtPlanField select:focus,
#modalBackdrop.vtModalPlanner .vtPlanBudgetWrap:focus-within{
  outline:none;
  border-color:rgba(255,180,0,.55);
  box-shadow:0 0 0 4px rgba(255,180,0,.14);
}

#modalBackdrop.vtModalPlanner .vtPlanActions{
  justify-content:flex-end;
  align-items:center;
  padding-top:2px;
}

#modalBackdrop.vtModalPlanner .vtPlanActions .btn,
#modalBackdrop.vtModalPlanner .vtPlanActions .btn.btn-primary{
  min-height:58px;
  padding:0 34px;
  border-radius:999px;
  border:0;
  font-size:18px;
  font-weight:900;
  box-shadow:0 14px 28px rgba(255,176,0,.24);
}

#modalBackdrop.vtModalPlanner .vtPlanActions .btn.btn-primary{
  background:linear-gradient(180deg,#ffbf1f 0%, #ffb300 100%);
  color:#fff;
}

#modalBackdrop.vtModalPlanner .vtPlanActions .btn.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(255,176,0,.30);
}

#modalBackdrop.vtModalPlanner .modal,
#modal.vtModalPlannerCard{
  border-radius:28px;
}

@media (max-width: 880px){
  #modalBackdrop.vtModalPlanner .vtPlanGrid{
    gap:0;
  }

  #modalBackdrop.vtModalPlanner .vtPlanField,
  #modalBackdrop.vtModalPlanner .vtPlanFieldWide{
    border-right:0 !important;
    border-bottom:1px solid rgba(20,24,31,.08);
    padding:18px;
  }

  #modalBackdrop.vtModalPlanner .vtPlanFieldWide{
    border-bottom:0;
  }

  #modalBackdrop.vtModalPlanner .vtPlanField input,
  #modalBackdrop.vtModalPlanner .vtPlanField select,
  #modalBackdrop.vtModalPlanner .vtPlanBudgetWrap{
    height:54px;
    font-size:16px;
  }

  #modalBackdrop.vtModalPlanner .vtPlanActions .btn,
  #modalBackdrop.vtModalPlanner .vtPlanActions .btn.btn-primary{
    width:100%;
  }
}
/* Planner transport buttons – match feed top style 1:1 */
#modalBackdrop.vtModalPlanner .vtTransportPills{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  overflow:visible;
  justify-content:flex-start;
  margin-top:4px;
}

#modalBackdrop.vtModalPlanner .vtTransportPill{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(180,190,182,.35);
  background:rgba(255,255,255,.85);
  cursor:pointer;
  user-select:none;
  font-size:12px;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:none;
}

#modalBackdrop.vtModalPlanner .vtTransportPill img{
  width:44px;
  height:44px;
  object-fit:contain;
  flex-shrink:0;
}

#modalBackdrop.vtModalPlanner .vtTransportPill span{
  font-weight:700;
  font-size:11px;
  white-space:nowrap;
  color:inherit;
}

#modalBackdrop.vtModalPlanner .vtTransportPill.is-on,
#modalBackdrop.vtModalPlanner .vtTransportPill.is-active{
  outline:2px solid rgba(0,165,74,.35);
}

#modalBackdrop.vtModalPlanner .vtTransportPill:focus-visible{
  outline:2px solid rgba(0,165,74,.35);
  outline-offset:0;
}

@media (max-width: 880px){
  #modalBackdrop.vtModalPlanner .vtTransportPills{
    justify-content:flex-start;
  }
}
/* === Similar trip planner final layout fix === */
#modalBackdrop.vtModalPlanner .modal,
#modal.vtModalPlannerCard{
  padding: 26px 28px 24px;
  box-sizing: border-box;
  position: relative;
}

#modalBackdrop.vtModalPlanner #modalClose,
#modalClose.vtModalPlannerClose{
  position: absolute;
  top: 18px;
  left: 18px;
  right: auto;
  z-index: 5;
}

#modalBackdrop.vtModalPlanner #modalTitle{
  margin: 4px 0 0 56px;
  padding-right: 24px;
  line-height: 1.2;
}

#modalBackdrop.vtModalPlanner .vtPlanLead{
  margin: 10px 0 0 56px;
  padding-right: 24px;
  max-width: none;
}

#modalBackdrop.vtModalPlanner .vtPlanForm{
  gap: 18px;
  padding: 8px 2px 0;
  box-sizing: border-box;
}

#modalBackdrop.vtModalPlanner .vtPlanGrid{
  width: 100%;
  margin-top: 6px;
}

#modalBackdrop.vtModalPlanner .vtPlanField,
#modalBackdrop.vtModalPlanner .vtPlanFieldWide{
  padding-left: 22px;
  padding-right: 22px;
}

#modalBackdrop.vtModalPlanner .vtPlanFieldWide{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

#modalBackdrop.vtModalPlanner .vtPlanFieldWide > span{
  width: 100%;
  display: block;
  margin-bottom: 2px;
}

#modalBackdrop.vtModalPlanner .vtTransportPills{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  margin: 0;
}

#modalBackdrop.vtModalPlanner .vtPlanActions{
  margin-left: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

#modalBackdrop.vtModalPlanner .vtPlanActions .btn,
#modalBackdrop.vtModalPlanner .vtPlanActions .btn.btn-primary{
  min-height: 46px;
  padding: 0 26px;
  margin: 0;
  box-shadow: 0 10px 22px rgba(255,176,0,.22);
}

@media (max-width: 880px){
  #modalBackdrop.vtModalPlanner .modal,
  #modal.vtModalPlannerCard{
    padding: 22px 16px 18px;
  }

  #modalBackdrop.vtModalPlanner #modalClose,
  #modalClose.vtModalPlannerClose{
    top: 14px;
    left: 14px;
  }

  #modalBackdrop.vtModalPlanner #modalTitle{
    margin-left: 44px;
    padding-right: 10px;
  }

  #modalBackdrop.vtModalPlanner .vtPlanLead{
    margin-left: 44px;
    padding-right: 8px;
  }

  #modalBackdrop.vtModalPlanner .vtPlanField,
  #modalBackdrop.vtModalPlanner .vtPlanFieldWide{
    padding-left: 16px;
    padding-right: 16px;
  }

  #modalBackdrop.vtModalPlanner .vtPlanFieldWide{
    display: block;
  }

  #modalBackdrop.vtModalPlanner .vtPlanActions{
    margin-left: 0;
    margin-top: 12px;
    width: 100%;
  }

  #modalBackdrop.vtModalPlanner .vtPlanActions .btn,
  #modalBackdrop.vtModalPlanner .vtPlanActions .btn.btn-primary{
    width: 100%;
  }
}
/* === Similar trip planner RESULT only: fit inside viewport === */
#modalBackdrop.vtModalPlanner .vtPlanResult{
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

@media (max-height: 800px){
  #modalBackdrop.vtModalPlanner .vtPlanResult{
    max-height: calc(100vh - 110px);
  }
}

/* Voyatale legal footer + cookie banner + register terms */
.vtFooter{margin-top:28px;padding:20px 16px 28px;border-top:1px solid rgba(15,23,42,.08);background:#fff}.vtFooterInner{max-width:1280px;margin:0 auto;display:flex;gap:14px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}.vtFooterBrand{font-weight:800;color:#0f172a}.vtFooterLinks{display:flex;gap:10px 14px;flex-wrap:wrap}.vtFooterLinks a{color:#475569;text-decoration:none;font-weight:700;font-size:14px}.vtFooterLinks a:hover{text-decoration:underline}.vtCookieBanner{position:fixed;left:16px;right:16px;bottom:16px;z-index:10001;background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 20px 60px rgba(15,23,42,.14);border-radius:18px;padding:16px 18px;display:flex;gap:16px;align-items:center;justify-content:space-between}.vtCookieTitle{font-weight:900;color:#0f172a;margin-bottom:4px}.vtCookieText{color:#475569;font-size:14px;line-height:1.45}.vtCookieText a{font-weight:800;color:#2563eb;text-decoration:none}.vtCookieText a:hover{text-decoration:underline}.vtCookieActions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}.auth-terms{margin-top:12px}.auth-terms-label{display:flex;gap:10px;align-items:flex-start;color:#4b5563;font-size:13px;line-height:1.45;font-weight:600}.auth-terms-label input{margin-top:2px;flex:0 0 auto}.auth-terms-label a{color:#2563eb;text-decoration:none;font-weight:800}.auth-terms-label a:hover{text-decoration:underline}.auth-error{color:#dc2626;margin-top:6px}.legalPageWrap{max-width:880px;margin:0 auto}.termsText h3{margin:18px 0 8px;color:#0f172a}.termsText p,.termsText li{line-height:1.7;color:#334155}.termsText ul{padding-left:20px}@media (max-width:760px){.vtCookieBanner{left:10px;right:10px;bottom:10px;flex-direction:column;align-items:flex-start}.vtCookieActions{width:100%}.vtCookieActions .btn,.vtCookieActions .btn-primary{width:100%}.vtFooter{padding-bottom:110px}}


/* =========================================================
   PERFORMANCE MOBILE OVERRIDES
   ========================================================= */
@media (max-width: 900px) and (pointer: coarse){
  .mobileTopbar,
  .mobileBottomDock,
  .mobileProfileMenu,
  .mobileMoreMenu{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* =========================================================
   LEAFLET SAFETY FIXES
   ========================================================= */
.leaflet-container {
  width: 100%;
  height: 100%;
  background: #dfe7df;
}

.leaflet-container img,
.leaflet-pane img,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  max-width: none !important;
}

.leaflet-container .leaflet-tile {
  visibility: inherit !important;
}

.vgMap .leaflet-container {
  width: 100% !important;
  height: 100% !important;
}
/* ===== Index hero planner banner ===== */
.voyHeroBanner{
  width: 100%;
  margin: 10px 0 14px;
  border-radius: 28px;
  overflow: hidden;
  position: relative;

  /* 🖼️ TAUSTPILT */
  background-image: url("../img/Banner.png");
  background-size: 100%;
  background-position: 70%;
  background-repeat: no-repeat;

  border: 1px solid rgba(120, 96, 76, .08);

  box-shadow:
    0 16px 40px rgba(26, 28, 32, .10),
    0 2px 8px rgba(26, 28, 32, .05);
}

.voyHeroBanner__content{
  position: relative;
  z-index: 1;
  padding: 34px 40px 30px;
}

.voyHeroBanner__title{
  margin: 0;
  font-size: clamp(29px, 3vw, 26px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #ffffff;
  max-width: 360px;
}

.voyHeroBanner__text{
  margin: 10px 0 0;
  font-size: clamp(13px, 1.3vw, 11px);
  line-height:2.00;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.884);
  max-width: 880px;
}

@media (max-width: 900px){
  .voyHeroBanner{
    margin: 8px 0 12px;
    border-radius: 22px;
  }

  .voyHeroBanner__content{
    padding: 24px 20px 22px;
  }

  .voyHeroBanner__title{
    font-size: 28px;
  }

  .voyHeroBanner__text{
    font-size: 15px;
  }
}
.voyHeroBanner::before{
  content: "";
  position: absolute;
  inset: 0;

  /* mask määrab KUS blur kehtib */
  -webkit-mask-image: linear-gradient(
    to right,
    rgb(255, 255, 255) 90%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) 95%
  );

  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) 105%
  );

  /* ✨ blur efekt */
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(10px);

  /* natuke valgust juurde (loetavus) */
  background: rgba(255, 255, 255, 0.25);

  z-index: 0;
  pointer-events: none;
}
/* =========================================================
   MOBILE APP-LIKE INDEX VIEW
   - scoped to phone widths only
   - desktop remains unchanged
   ========================================================= */
@media (max-width: 768px) {
  body { overflow-x: hidden; }

  .container {
    max-width: 100%;
    padding: 0 12px 104px;
    margin-bottom: 0;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 5000;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 -12px 10px;
    min-height: 72px;
    border-radius: 0 0 20px 20px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    box-shadow: 0 8px 28px rgba(18,25,20,.08);
  }

  .topbar .brand,
  .topbar .userpill,
  .topbarRight {
    position: static !important;
    transform: none !important;
  }

  .topbarCenter,
  .tabs,
  #topNewTripBtn,
  .langSelect,
  .vgLeft,
  .vgRight {
    display: none !important;
  }

  .brand {
    justify-self: start;
    padding-left: 0;
    min-width: 0;
  }

  .brandLogo {
    height: 34px !important;
    width: auto;
    transform: none !important;
  }

  .topbarRight {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mobileSearchBtn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(160,170,165,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 8px 20px rgba(18,25,20,.08);
    color: #1f2937;
    cursor: pointer;
  }

  .mobileSearchBtn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .userpill {
    min-width: auto;
    padding: 6px 8px;
    gap: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
  }

  .userpill .name,
  .userpill .small {
    display: none;
  }

  .userpill img {
    width: 32px;
    height: 32px;
  }

  .caret {
    margin-left: 0;
    font-size: 12px;
  }

  .user-menu {
    position: fixed;
    top: 76px;
    right: 12px;
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100dvh - 96px);
    overflow: auto;
    z-index: 10000;
  }

  .grid {
    display: block;
    margin-top: 0;
  }

  /* index/app view on mobile: hide left profile section */
  .grid > div:first-child {
    display: none !important;
  }

  .grid > div:nth-child(2) {
    min-width: 0;
  }

  .voyHeroBanner {
    display: block !important;
    margin: 0 0 12px;
    border-radius: 22px;
    min-height: 182px;
    background-size: cover;
    background-position: center;
  }

  .voyHeroBanner::before {
    display: none !important;
  }

  .voyHeroBanner__content {
    padding: 22px 18px 20px;
  }

  .voyHeroBanner__title {
    font-size: 28px;
    max-width: 230px;
  }

  .voyHeroBanner__text {
    font-size: 14px;
    line-height: 1.55;
    max-width: 250px;
  }

  .vgStyleBarWrap {
    margin: 0 0 14px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .vgStyleBarWrap::-webkit-scrollbar {
    display: none;
  }

  .vgStyleBar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    width: max-content;
    min-width: 100%;
    padding: 0 2px 2px;
  }

  .vgStyleBtn {
    min-height: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    white-space: nowrap;
    gap: 8px;
    font-size: 13px;
    box-shadow: none;
  }

  .vgStyleBtn img {
    width: 18px;
    height: 18px;
  }

  .vgStyleBtn span {
    font-size: 12px;
  }

  #feed.feed {
    gap: 18px;
  }

  #feed .vgCard {
    margin: 0 0 18px 0;
    border-radius: 22px;
  }

  .mobileBottomNav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97);
    border-top: 1px solid rgba(20,24,31,.08);
    box-shadow: 0 -10px 28px rgba(0,0,0,.08);
    border-radius: 20px 20px 0 0;
    backdrop-filter: blur(14px);
  }

  .mobileNavItem {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #1f2937;
    font-weight: 800;
    font-size: 11px;
    cursor: pointer;
  }

  .mobileNavIcon {
    font-size: 24px;
    line-height: 1;
  }

  .mobileCreateBtn {
    border: none;
    border-radius: 999px;
    min-height: 52px;
    padding: 0 22px;
    background: linear-gradient(180deg, #ffb21d 0%, #ff9f0a 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 900;
    box-shadow: 0 10px 28px rgba(255,159,10,.28);
    transform: translateY(-6px);
    cursor: pointer;
    white-space: nowrap;
  }

  .mobileCreatePlus {
    font-size: 24px;
    line-height: 1;
  }

  .mobileMenuSheet {
    position: fixed;
    inset: 0;
    z-index: 4600;
    background: rgba(0,0,0,.36);
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
  }

  .mobileMenuSheet.is-open {
    display: flex;
  }

  .mobileMenuSheetCard {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.2);
    display: grid;
    gap: 10px;
    max-height: calc(100dvh - 32px);
    overflow: auto;
  }

  .mobileMenuClose {
    justify-self: end;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(20,24,31,.08);
    background: #fff;
    cursor: pointer;
  }

  .mobileMenuLink {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(20,24,31,.08);
    border-radius: 14px;
    background: #fff;
    text-align: left;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
    cursor: pointer;
  }

  .mobileMenuLink.danger {
    color: #b91c1c;
  }

  .modal-backdrop,
  #modalBackdrop {
    padding: 8px;
    align-items: center;
  }

  .modal,
  #modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }

  .modal-body,
  #modalContent {
    max-height: calc(100dvh - 92px);
    padding: 14px;
  }

  .mobileSearchDrawer {
    position: fixed;
    inset: 0;
    z-index: 4650;
    pointer-events: none;
  }

  .mobileSearchDrawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .24);
    opacity: 0;
    transition: opacity .2s ease;
  }

  .mobileSearchDrawer__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: min(88vw, 380px);
    height: 100dvh;
    background: #fff;
    box-shadow: 20px 0 46px rgba(15, 23, 42, .16);
    transform: translateX(-100%);
    transition: transform .24s ease;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
    gap: 12px;
  }

  .mobileSearchDrawer.is-open {
    pointer-events: auto;
  }

  .mobileSearchDrawer.is-open .mobileSearchDrawer__scrim {
    opacity: 1;
  }

  .mobileSearchDrawer.is-open .mobileSearchDrawer__panel {
    transform: translateX(0);
  }

  .mobileSearchDrawer__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }

  .mobileSearchDrawer__field {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(160,170,165,.24);
    background: #f8faf8;
  }

  .mobileSearchDrawer__field svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #64748b;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
  }

  .mobileSearchDrawer__field input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
  }

  .mobileSearchDrawer__close {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(160,170,165,.24);
    border-radius: 999px;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
  }

  .mobileSearchDrawer__modes {
    display: inline-flex;
    gap: 8px;
    padding: 4px;
    border-radius: 999px;
    background: #f3f4f6;
    width: max-content;
  }

  .mobileSearchDrawer__mode {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 13px;
    font-weight: 800;
    color: #4b5563;
    cursor: pointer;
  }

  .mobileSearchDrawer__mode.is-active {
    background: #fff;
    color: #111827;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
  }

  .mobileSearchDrawer__results {
    min-height: 0;
    overflow: auto;
    display: grid;
    gap: 10px;
    padding-right: 2px;
  }

  .mobileSearchDrawer__result {
    width: 100%;
    border: 1px solid rgba(160,170,165,.2);
    border-radius: 18px;
    background: #fff;
    padding: 10px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    text-align: left;
    cursor: pointer;
  }

  .mobileSearchDrawer__thumb,
  .mobileSearchDrawer__avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
    background: #eef2f7;
  }

  .mobileSearchDrawer__avatar {
    border-radius: 50%;
  }

  .mobileSearchDrawer__copy {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  .mobileSearchDrawer__copy strong,
  .mobileSearchDrawer__copy small {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobileSearchDrawer__copy strong {
    font-size: 14px;
    font-weight: 900;
    color: #111827;
  }

  .mobileSearchDrawer__copy small {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
  }

  .mobileSearchDrawer__empty {
    padding: 16px 8px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 800;
  }

  body.mobile-search-open {
    overflow: hidden;
  }
}

@media (min-width: 769px) {
  .mobileBottomNav,
  .mobileMenuSheet,
  .mobileSearchBtn {
    display: none !important;
  }
}

/* ===== FIX: inline read more (desktop + mobile) ===== */
.vgSummary,
.vgSummaryText {
  padding-right: 0 !important;
}

.vgSummaryText {
  display: inline;
}

.vgSummary [data-action="togglePostText"] {
  position: static !important;
  display: inline !important;
  background: none !important;
  padding: 0 !important;
  margin-left: 4px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}
/* ===== MOBILE: logo 3x without growing topbar ===== */
@media (max-width: 768px){

  .brandLogo{
    height: 99px !important;   /* hoiab topbari layouti */
    transform: scale(3);       /* visuaalne suurendus */
    transform-origin: left center;
  }

  .brand{
    overflow: visible;         /* et logo ei lõigataks ära */
  }

}

/* =========================================================
   FINAL OVERRIDES — mobile shared chrome + menu languages
   ========================================================= */
@media (max-width: 768px) {
  .topbar {
    grid-template-columns: auto minmax(0,1fr) auto !important;
    gap: 10px !important;
  }

  .topbarCenter,
  .tabs,
  #topNewTripBtn,
  .langSelect,
  .vgLeft,
  .vgRight {
    display: none !important;
  }

  .brand {
    opacity: 1;
    width: auto;
    transition: opacity .18s ease, width .18s ease;
  }

  .brandLogo {
    height: 28px !important;
    width: auto !important;
    transform: scale(3.2) translate(-2px, 0) !important;
    transform-origin: left center !important;
  }

  .topbarRight {
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    justify-self:end !important;
  }

  .mobileTopSearch {
    display:flex;
    align-items:center;
    min-width:0;
    width:100%;
    max-width:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    transition:max-width .22s ease, opacity .18s ease;
  }
  .mobileTopSearch[hidden] { display:none !important; }
  .mobileTopSearch.is-open {
    max-width:100%;
    opacity:1;
    pointer-events:auto;
  }
  .mobileTopSearchField {
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    height:42px;
    padding:0 12px;
    border:1px solid rgba(160,170,165,.28);
    border-radius:999px;
    background:rgba(255,255,255,.96);
    box-shadow:0 8px 20px rgba(18,25,20,.08);
  }
  .mobileTopSearchField svg {
    width:18px;
    height:18px;
    flex:0 0 auto;
    fill:none;
    stroke:#64748b;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mobileTopSearchField input {
    width:100%;
    min-width:0;
    border:0;
    outline:none;
    background:transparent;
    font-size:14px;
    font-weight:700;
    color:#111827;
  }

  body.mobile-top-search-open .brand {
    opacity:0;
    width:0;
    pointer-events:none;
    overflow:hidden;
  }
  body.mobile-top-search-open .topbar {
    grid-template-columns: 0 minmax(0,1fr) auto !important;
  }
  body.mobile-top-search-open .mobileSearchBtn {
    opacity:0;
    width:0 !important;
    min-width:0 !important;
    border:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }

  .mobileMenuSheet[inert] { pointer-events:none; }
  .mobileMenuLangSection {
    display:grid;
    gap:8px;
    padding-top:10px;
    border-top:1px solid rgba(20,24,31,.08);
    margin-top:2px;
  }
  .mobileMenuLangLink {
    width:100%;
    min-height:48px;
    border:1px solid rgba(20,24,31,.08);
    border-radius:14px;
    background:#fff;
    text-align:left;
    padding:0 14px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:800;
    color:#1f2937;
    cursor:pointer;
  }
  .mobileMenuLangFlag {
    width:22px;
    height:14px;
    flex:0 0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .mobileMenuLangFlag svg {
    width:100%;
    height:100%;
    display:block;
    border-radius:2px;
  }

  .mobileBottomNav { display:flex !important; }

  /* keep first trip-style text, others icon-only */
  .vgStyleBarWrap{overflow:hidden !important;padding:0 12px !important;}
  .vgStyleBar{display:flex !important;flex-wrap:nowrap !important;gap:6px !important;width:100% !important;min-width:0 !important;justify-content:space-between !important;}
  .vgStyleBtn{flex:1 1 0 !important;min-width:0 !important;width:auto !important;height:44px !important;min-height:44px !important;padding:0 6px !important;gap:4px !important;border-radius:999px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;overflow:hidden !important;white-space:nowrap !important;}
  .vgStyleBtn img{width:66px !important;height:66px !important;flex-shrink:0 !important;object-fit:contain !important;}
  .vgStyleBtn span{display:none !important;}
  .vgStyleBtn:first-child span{display:inline !important;font-size:11px !important;font-weight:700 !important;line-height:1 !important;}

  /* same custom lightbox look for all photos on mobile */
  .vgLbBack{padding:0 !important;background:rgba(0,0,0,.82) !important;align-items:stretch !important;justify-content:stretch !important;height:100dvh !important;}
  .vgLbCard{width:100vw !important;height:100dvh !important;max-height:100dvh !important;border-radius:0 !important;border:0 !important;box-shadow:none !important;background:#000 !important;backdrop-filter:none !important;}
  .vgLbTop{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;z-index:20 !important;display:grid !important;grid-template-columns:44px 1fr 44px !important;align-items:center !important;padding:calc(10px + env(safe-area-inset-top)) 10px 10px !important;background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent) !important;}
  .vgLbTop > :first-child{justify-self:start !important;}
  .vgLbTop > :nth-child(2){justify-self:center !important;text-align:center !important;color:#fff !important;font-weight:900 !important;font-size:15px !important;}
  .vgLbTop > :last-child{justify-self:end !important;opacity:0 !important;pointer-events:none !important;}
  .vgLbStage{flex:1 1 auto !important;min-height:0 !important;padding:0 !important;display:flex !important;overflow:hidden !important;}
  .vgLbImgWrap, #vgLbStage{width:100% !important;height:100dvh !important;min-height:100dvh !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;background:#000 !important;}
  .vgLbImg, #vgLbImg{width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;object-fit:contain !important;object-position:center center !important;display:block !important;background:#000 !important;}
}


/* === Compact mobile layout for "Loo sarnane reis" === */
@media (max-width: 768px){
  .vtCardPlannerBar{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 10px;
    margin:8px 0 10px;
    border-radius:14px;
  }

  .vtCardPlannerBtn{
    min-height:36px;
    padding:8px 12px;
    font-size:12px;
    line-height:1.1;
    white-space:nowrap;
    flex:0 0 auto;
  }

  .vtCardPlannerHint{
    font-size:10px;
    line-height:1.2;
    text-align:right;
    max-width:112px;
    margin-left:auto;
  }

  #modalBackdrop.vtModalPlanner .modal,
  #modal.vtModalPlannerCard{
    width:min(calc(100vw - 12px), 100%);
    max-height:calc(100vh - 12px);
    padding:14px 12px 12px;
    border-radius:18px;
  }

  #modalBackdrop.vtModalPlanner #modalClose,
  #modalClose.vtModalPlannerClose{
    top:12px;
    left:12px;
    width:30px;
    height:30px;
    min-width:30px;
    min-height:30px;
  }

  #modalBackdrop.vtModalPlanner #modalTitle{
    margin:2px 0 0 42px;
    padding-right:8px;
    font-size:18px;
  }

  #modalBackdrop.vtModalPlanner .vtPlanForm,
  #modalBackdrop.vtModalPlanner .vtPlanResult,
  #modalBackdrop.vtModalPlanner .vtSavedHub{
    gap:12px;
  }

  #modalBackdrop.vtModalPlanner .vtPlanLead{
    margin:2px 0 0 42px;
    padding-right:6px;
    font-size:12px;
    line-height:1.35;
  }

  #modalBackdrop.vtModalPlanner .vtPlanGrid{
    grid-template-columns:1fr;
    border-radius:16px;
  }

  #modalBackdrop.vtModalPlanner .vtPlanField,
  #modalBackdrop.vtModalPlanner .vtPlanFieldWide{
    gap:6px;
    padding:12px;
  }

  #modalBackdrop.vtModalPlanner .vtPlanField span,
  #modalBackdrop.vtModalPlanner .vtPlanFieldWide > span{
    font-size:11px;
  }

  #modalBackdrop.vtModalPlanner .vtPlanField input,
  #modalBackdrop.vtModalPlanner .vtPlanField select,
  #modalBackdrop.vtModalPlanner .vtPlanBudgetWrap{
    height:42px;
    min-height:42px;
    font-size:14px;
    border-radius:12px;
  }

  #modalBackdrop.vtModalPlanner .vtPlanBudgetWrap{
    padding:0 12px;
    gap:8px;
  }

  #modalBackdrop.vtModalPlanner .vtPlanField input,
  #modalBackdrop.vtModalPlanner .vtPlanField select,
  #modalBackdrop.vtModalPlanner .vtPlanBudgetWrap input,
  #modalBackdrop.vtModalPlanner .vtPlanBudgetWrap span{
    font-size:14px;
  }

  #modalBackdrop.vtModalPlanner .vtTransportPills{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    width:100%;
  }

  #modalBackdrop.vtModalPlanner .vtTransportPill{
    width:100%;
    min-width:0;
    height:34px;
    gap:4px;
    padding:4px 6px;
    border-radius:10px;
    justify-content:center;
  }

  #modalBackdrop.vtModalPlanner .vtTransportPill img{
    width:24px;
    height:24px;
  }

  #modalBackdrop.vtModalPlanner .vtTransportPill span{
    font-size:10px;
    line-height:1.05;
    white-space:normal;
    text-align:center;
  }

  #modalBackdrop.vtModalPlanner .vtPlanActions{
    width:100%;
    margin-left:0;
    justify-content:stretch;
  }

  #modalBackdrop.vtModalPlanner .vtPlanActions .btn,
  #modalBackdrop.vtModalPlanner .vtPlanActions .btn.btn-primary{
    width:100%;
    min-height:42px;
    padding:0 16px;
    font-size:14px;
    box-shadow:0 8px 18px rgba(255,176,0,.18);
  }
}


/* =========================================================
   MOBILE AUTH LAYOUT FIX
   - logo/text above
   - login/register card below
   - everything fits on phone screens
   ========================================================= */
@media (max-width: 768px){
  body.auth-page{
    min-height:100dvh;
    overflow-x:hidden;
  }

  .auth-wrap{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:18px;
    padding:20px 14px 24px;
  }

  .auth-left,
  .auth-right{
    width:100%;
    max-width:420px;
    flex:0 0 auto;
  }

  .auth-left{
    padding:0;
    text-align:left;
  }

  .auth-logo{
    margin-bottom:8px;
  }

  .twc{
    font-size:clamp(42px, 12vw, 64px);
    line-height:.95;
  }

  .auth-tagline{
    margin-top:8px;
    font-size:15px;
    line-height:1.4;
    max-width:320px;
  }

  .auth-card,
  .reg-card{
    width:100%;
    border-radius:18px;
    box-shadow:0 14px 30px rgba(0,0,0,.10);
  }

  .auth-card{
    padding:14px;
  }

  .reg-head{
    padding:14px 14px 10px;
  }

  .reg-body{
    padding:12px 14px 14px;
  }

  .auth-form{
    gap:10px;
  }

  .auth-input,
  .auth-btn{
    height:42px;
  }

  .reg-row2,
  .reg-row3,
  .reg-gender{
    grid-template-columns:1fr;
    gap:8px;
  }
}