/* =========================================================
   VOYAGRAM — styles.css (clean, deduped, consistent)
   - Safe: keeps existing classes working
   - Tokens + opt-in utilities
   - Auth pages styling
   - Trip form lighter + Trip status pills
   - Feed spacing increased
   ========================================================= */

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

  /* Brand */
  --green: #003817;
  --green2:#00a54a;
  --greenSoft:#e7efe6;

/* 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; /* ← teeb kirja peenemaks */
  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;
}

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

.container{
  max-width: 1420px;
  margin: 26px auto 60px;
  padding: 0 18px;
}

/* =========================================================
   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:flex-start;
  padding: 8px 14px;
  min-height: 64px;
  gap: 14px;

  position: sticky;
  top: 14px;
  z-index: 5000;
}

/* Brand */
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding-left:6px;
  line-height:1;
}
.brandLogo{ width:40px; height:40px; object-fit:contain; }
.brandText{ display:flex; flex-direction:column; }

.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: 100px;
  gap: 18px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.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: 45px;
  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;
}
#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:auto;
  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;
}
.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
   ========================================================= */
.grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr) 280px;
  gap: 24px;
  align-items:start;
}
.grid > div{ align-self:start; }

/* profile-edit center card alignment (safe) */
.grid > div:nth-child(2){
  justify-self:center;
  width: min(760px, 100%);
}

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

/* =========================================================
   5) FEED SPACING (✅ POSTITUSTE VAHE SUUREMAKS)
   ========================================================= */
#feed.feed{
  display:flex;
  flex-direction:column;
  gap: 32px;               /* ← muuda nt 22px kui tahad veel */
}

/* Kui mõni postitus “card” lisab oma marginid, hoia puhas */
#feed.feed > *{ margin:0; }
/* FEED – suurem vahe postituste vahel (workib ka siis, kui feed.js kasutab wrapperit) */
#feed .vgCard{
  margin: 0 0 32px 0;
}
#feed .vgCard:last-child{
  margin-bottom: 0;
}

/* =========================================================
   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: 12px 12px;
  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;
}

.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: visible;
  border-radius: var(--radius-xl);
  position: sticky;
  top: 96px;
}

.vgpcTop{ position: relative; height: 100px; }
.vgpcPhotoWrap{
  position:absolute;
  top:3px;
  left:65%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
}
.vgpcPhoto{
  width:66%;
  height:130px;
  object-fit: cover;
  border-radius: 48px;
  border:0;
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  background:#e9eeea;
}
.vgpcBody{
  padding: 52px 16px 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
  text-align:center;
}
.vgpcName{
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:#212724;
}
.vgpcBio{
  max-width:260px;
  font-weight:700;
  font-size:13px;
  color: var(--muted);
  margin-top:-2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vgpcBadges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:2px;
}
.vgBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(160,170,165,.35);
  box-shadow: 0 6px 18px rgba(18,25,20,.08);
  font-weight:700;
  font-size:12px;
  color:#2d343b;
}
.vgBadge--img{ gap:10px; }
.vgBadgeIco{
  width:18px;height:18px;
  object-fit:contain;
  flex-shrink:0;
}

.vgpcStats{ width:100%; display:grid; gap:8px; margin-top:4px; }
.vgpcStatRow{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  color:#2d343b;
  font-weight:700;
  font-size:13px;
}
.vgpcStatRow .ico{ opacity:.85; }

.vgpcOngoingLine{
  margin-top:6px;
  padding-top:10px;
  border-top: 1px solid rgba(160,170,165,.25);
  font-weight:700;
  color:#2d343b;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.vgpcOngoingLine .leaf{ opacity:.55; }

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

.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); }

.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; }
/* =========================================================
   8B) FEED COMMENT UX (Loe rohkem + ... menüü)
   ========================================================= */
.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; }

/* Kommentaari aeg “peenem” (nagu postituse aeg) */
.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;
}
.vgCommentMenuItem:hover{ background: rgba(236,241,236,.9); }
.vgCommentMenuItem.danger{ color:#b91c1c; }

/* =========================================================
   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;
}

/* =========================================================
   12) TRIP FORM — refined / soft typography
   ========================================================= */

/* fields */
.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;
}

/* field label = soft subtitle */
.tf-fieldLabel{
  font-weight: 600;              /* ⬅️ enne 850 */
  font-size: 13px;              /* ⬅️ enne 12 */
  color: rgba(25,30,32,.65);     /* ⬅️ pehmem */
  letter-spacing: .15px;
  margin-bottom: 6px;
}

/* input text */
.tf-fieldInput{
  width:100%;
  border-radius: 14px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  padding: 11px 13px;

  font-weight: 500;             /* ⬅️ enne 650 */
  font-size: 14px;              /* ⬅️ ühtlane body size */
  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);     /* pehmem placeholder */
}

.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;            /* ⬅️ natuke õhku */
  border-radius: 999px;

  background: rgba(255,255,255,.9);
  border: 1px solid rgba(180,190,182,.28);

  font-size: 13px;
  font-weight: 500;            /* ⬅️ enne 600 */
  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;
}


/* indicator dot */
.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;            /* ⬅️ enne 900 */
  color: transparent;

  transition: all .15s ease;
}

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


/* selected */
.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;
}

/* =========================================================
   13) 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);
}

/* =========================================================
   14) 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);
}

/* =========================================================
   15) RESPONSIVE
   ========================================================= */
@media (max-width: 1120px){
  .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: 980px){
  .auth-wrap{ flex-direction: column; gap: 18px; padding-top: 24px; }
  .auth-left{ max-width: 720px; text-align:center; }
  .auth-right{ width: min(460px, 100%); }
  .auth-tagline{ font-size: 18px; }
}

@media (max-width: 640px){
  .topbar{ border-radius: 16px; padding: 10px 10px; gap: 10px; }
  .brandLogo{ width: 34px; height: 34px; }
  .userpill{ min-width: unset; padding: 6px 8px; gap: 8px; }
  .userpill .small{ display:none; }
  .btn{ width:100%; }
  .vgProfileCard{ position: static; top:auto; }
  .tf-wizardBody{ padding: 12px 12px 12px; }
}

@media (max-width: 520px){
  .reg-row2, .reg-row3{ grid-template-columns: 1fr; }
  .reg-gender{ grid-template-columns: 1fr; }
}
/* FEED: remove separator lines */
.vgStops,
.vgCounts,
.vgComments,
.vgComposer{
  border-top: 0 !important;
}
/* FEED: move likes+comments area up (less vertical padding) */
.vgStops{ padding-bottom: 6px !important; }     /* enne oli 14px */
.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; }
  /* =========================================================
   VOYAGRAM LIGHTBOX (gallery) — pilt #2 stiil
   ========================================================= */
.vgLbBack{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 99999;
  padding: 22px;
}

.vgLbBack.open{ display:flex; }

.vgLbCard{
  width: min(1180px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  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;
}

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

.vgLbClose{
  width:34px;height:34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.22);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vgLbClose:hover{ background: rgba(255,255,255,.30); }

.vgLbClose svg{
  width:14px;height:14px;
}
.vgLbClose svg path{
  stroke: rgba(255,255,255,.92);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.vgLbCounter{
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 14px;
}

.vgLbAuthor{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 13px;
}
.vgLbAuthor img{
  width:28px;height:28px;
  border-radius: 999px;
  object-fit:cover;
  border: 1px solid rgba(255,255,255,.45);
}

.vgLbStage{
  padding: 0 14px 10px;
}

.vgLbImgWrap{
  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%;
  max-height: calc(100vh - 210px);
  object-fit: contain;
  display:block;
  background: rgba(0,0,0,.18);
}

.vgLbNav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:42px;height:42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.20);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vgLbNav:hover{ background: rgba(0,0,0,.30); }

.vgLbNav--prev{ left: 12px; }
.vgLbNav--next{ right: 12px; }

.vgLbNav svg{ width:20px;height:20px; }
.vgLbNav svg path{
  fill:none;
  stroke: rgba(255,255,255,.92);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.vgLbDots{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  flex:1;
}
.vgLbDot{
  width:6px;height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
}
.vgLbDot.on{ background: rgba(255,255,255,.92); }

.vgLbActions{
  display:flex;
  align-items:center;
  gap:10px;
}

.vgLbIconBtn{
  width:38px;height:38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.18);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vgLbIconBtn:hover{ background: rgba(0,0,0,.28); }
.vgLbIconBtn:disabled{ opacity:.55; cursor:not-allowed; }

.vgLbIconBtn svg{ width:18px;height:18px; }
.vgLbIconBtn svg path{
  stroke: rgba(255,255,255,.92);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vgLbIconBtn.hearted svg path{
  fill: rgba(255,255,255,.92);
  stroke: rgba(255,255,255,.92);
}
/* ===== Profile edit: reisistiilid ühele reale, väikesed, ühesuurused ===== */
.vgStyleGrid{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;      /* ✅ ÜKS RIDA */
  overflow:hidden;       /* ✅ ei veni alla */
  align-items:center;
}

.vgStyleBtn{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(180,190,182,.35);
  background:rgba(255,255,255,.85);
  cursor:pointer;
  user-select:none;
  height:44px;           /* ✅ ühesuurused */
}

.vgStyleBtn img{
  width:26px;            /* ✅ väike */
  height:26px;
  object-fit:contain;
  flex:0 0 auto;
}

.vgStyleBtn span{
  font-weight:800;
  font-size:12px;
  white-space:nowrap;    /* ✅ ei murra ritta */
}

.vgStyleBtn.is-on{
  border:2px solid rgba(0,165,74,.95); /* ✅ roheline raam */
}