/* ==========================================================================
   Getask — Design tokens
   Palette lifted from the app mark: deep indigo → magenta → amber, on near-
   black. Georgian body copy runs in Noto Sans Georgian (weight carries the
   hierarchy, since the script has few free display faces); the Latin
   wordmark "Getask" uses Baloo 2 for the rounded, handmade badge feel.
   ========================================================================== */

/* ფონტები ჩატვირთვა <link>-ით ყველა HTML გვერდის <head>-ში (preconnect-ით) —
   @import ბლოკავდა CSS-ს და ჯაჭვურად ნელა იტვირთებოდა. */

/* Native cross-document page transitions (progressive enhancement — Chromium
   126+ / supporting browsers only) — DISABLED. It caused a visible flash of
   the pre-JS "Sign up / Sign in" header state during the cross-fade on every
   navigation to a page with authenticated header content (e.g. index.html),
   even though the underlying DOM was already fixed to never actually show
   that state. Removing this restores normal, instant, flash-free navigation. */

:root{
  --indigo:      #2A1B5E;
  --violet:      #5B2E86;
  --magenta:     #C22A86;
  --pink:        #E0398A;
  --amber:       #F2A93B;
  --gold:        #FBC94C;
  --ink:         #150C2E;      /* near-black, footers / nav-dark */
  --ink-soft:    #241638;
  --cream:       #FFF9F2;      /* light section background */
  --paper:       #FFFFFF;
  --line:        #EDE4F5;
  --text-dark:   #1D1330;
  --text-mute:   #6E6280;
  --text-on-dark:#F3EDFF;
  --text-on-dark-mute: #C9BFE0;
  --ok:          #2FAE6A;
  --warn:        #E0398A;

  --brand-gradient: linear-gradient(135deg, var(--indigo) 0%, var(--violet) 28%, var(--magenta) 58%, #E86B3A 82%, var(--amber) 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(42,27,94,0.92) 0%, rgba(194,42,134,0.88) 55%, rgba(242,169,59,0.85) 100%);

  /* Shared background used by the home screen and all inner pages. */
  --app-background:
    radial-gradient(ellipse 44% 34% at 7% 16%, rgba(0,103,255,.88) 0%, rgba(0,103,255,.35) 42%, transparent 75%),
    radial-gradient(ellipse 42% 38% at 91% 13%, rgba(228,0,120,.95) 0%, rgba(228,0,120,.38) 48%, transparent 76%),
    radial-gradient(ellipse 48% 43% at 91% 90%, rgba(247,166,35,.95) 0%, rgba(247,166,35,.36) 46%, transparent 77%),
    radial-gradient(ellipse 48% 48% at 8% 91%, rgba(22,4,75,.98) 0%, rgba(22,4,75,.70) 52%, transparent 86%),
    linear-gradient(135deg,#0568ef 0%,#40207d 30%,#a50073 58%,#df2b67 77%,#f4a92d 100%);
  --mid-gradient: linear-gradient(115deg, var(--indigo) 0%, var(--violet) 24%, var(--magenta) 50%, #D9497A 68%, var(--pink) 84%, var(--violet) 100%);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 10px 30px rgba(42,27,94,0.10);
  --shadow-pop:  0 20px 50px rgba(42,27,94,0.22);

  --font-body: 'Noto Sans Georgian', sans-serif;
  --font-brand: 'Baloo 2', 'Noto Sans Georgian', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text-on-dark);
  background: var(--app-background);
  background-size:160% 160%;
  animation:homeGradient 28s ease-in-out infinite alternate;
  animation-delay: var(--bg-delay, 0s);
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
}

/* Slow, gently uneven movement so the shift reads as ambient, not mechanical */
@keyframes driftGradient{
  0%   { background-position: 20% 30%; }
  22%  { background-position: 70% 15%; }
  48%  { background-position: 85% 75%; }
  71%  { background-position: 30% 90%; }
  100% { background-position: 20% 30%; }
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; line-height:1.15; font-weight:800; }
p{ margin:0; }

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (max-width:680px){
  .home-site-footer{padding:34px 0 22px;}
  .home-footer-inner{width:calc(100% - 32px);}
  .home-footer-top{flex-direction:column;gap:30px;padding-bottom:24px;}
  .home-footer-brand{min-width:0;}
  .home-footer-links{width:100%;justify-content:space-between;gap:24px;padding-right:0;}
  .home-footer-bottom{font-size:11.5px;}
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius: var(--radius-pill);
  border:none;
  font-size:15px;
  font-weight:700;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--brand-gradient);
  color:#fff;
  box-shadow: 0 10px 24px rgba(194,42,134,0.35);
}
.btn-primary:hover{ box-shadow: 0 14px 30px rgba(194,42,134,0.45); transform: translateY(-1px); }
.btn-ghost{
  background: rgba(255,255,255,0.12);
  color: var(--text-on-dark);
  border: 1.5px solid rgba(255,255,255,0.35);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.2); }
.btn-outline{
  background: transparent;
  color: var(--magenta);
  border: 1.5px solid var(--magenta);
}
.btn-outline:hover{ background: rgba(194,42,134,0.08); }
#btnOfferHire{ color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:13px; }
.btn-danger{ background:#fff; color:#D33B5E; border:1.5px solid #F3C6D2; }
.btn-danger:hover{ background:#FFF0F4; }
.btn-muted{ background:#fff; color: var(--text-mute); border:1.5px solid var(--line); }
.btn-muted:hover{ background: var(--cream); }
.btn-account-actions{ background: transparent; color:#fff; border:1.5px solid #fff; }
.btn-account-actions:hover{ background: rgba(255,255,255,0.1); opacity:1; }
.account-actions #logoutBtn{ color:#D33B5E; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ---------- Header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: transparent;
}
/* Profile page: header should scroll away with the page (matches the
   home page's behaviour), instead of staying pinned at the top. */
body.profile-page .site-header,
body.discover-page .site-header,
body.admin-page .site-header{
  position: relative;
}
/* Discover page (desktop/tablet): on a tall screen everything fits and there
   is no scrollbar; on a small screen the page scrolls normally. */
@media (min-width: 861px){
  body.discover-page{
    /* პატარა ეკრანზე (დაბალი სიმაღლე) გვერდი სკროლდება;
       დიდ ეკრანზე, სადაც ყველაფერი ეტევა, სკროლბარი არ ჩნდება. */
    min-height: 100vh;
    overflow-x: hidden;
  }
  body.discover-page .panel-wrap{
    min-height: 0;
    padding-bottom: 120px;
  }
}
.site-header .container.header-grid{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
  height:88px;
}
.header-left{ display:flex; align-items:center; gap:30px; justify-self:start; }
.brand-center{
  display:flex; align-items:center; gap:16px; justify-self:center;
}
.brand-center img:first-child{ width:46px; height:46px; }
.brand-center .wordmark-img{ height:30px; width:auto; }
@media (max-width: 860px){
  .brand-center .wordmark-img{ display:none; }
}
.site-header .container{ padding: 0 24px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ width:38px; height:38px; }
.brand-word{
  font-family: var(--font-brand);
  font-size: 23px; font-weight:800; color:#fff; letter-spacing:.2px;
}
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  color: var(--text-on-dark-mute); font-weight:600; font-size:14.5px;
  transition: color .15s ease; position:relative;
}
.nav-links a:hover, .nav-links a.active{ color:#fff; }
.nav-actions{ display:flex; align-items:center; gap:12px; justify-self:end; }
.nav-user{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; font-size:14px; }
.nav-avatar{
  width:34px; height:34px; border-radius:50%;
  background: var(--brand-gradient); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
  overflow:hidden;
}
.nav-toggle{ display:none; }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; background:none; border:none; color:#fff; }
}

/* ---------- Simplified inner-page header: logo left, name-menu right ---------- */
.header-grid-simple{
  display:grid;
  grid-template-columns: auto 1fr;
  align-items:center;
  gap:16px;
  min-height:150px;
  padding:18px 0;
}
.header-grid-simple .brand-left{
  display:flex; align-items:center; gap:11px; justify-self:start;
}
/* Same dimensions as the home page's logo (.home-logo) and wordmark box */
.header-grid-simple .brand-left img:first-child{ width:113px; height:113px; object-fit:contain; }
.header-grid-simple .brand-left .header-wordmark-text .home-wordmark{ font-size:66px; }
.header-grid-simple .brand-left .header-wordmark-text .home-tagline{ font-size:13.5px; margin-top:4px; }
@media (max-width: 860px){
  .header-grid-simple{ min-height:100px; padding:12px 0; }
  .header-grid-simple .brand-left img:first-child{ width:72px; height:72px; }
  .header-grid-simple .brand-left .header-wordmark-text .home-wordmark{ font-size:47px; }
  .header-grid-simple .brand-left .header-wordmark-text .home-tagline{ font-size:10.5px; margin-top:3px; }
}
@media (max-width: 560px){
  .header-grid-simple .brand-left .header-wordmark-text{ display:none; }
}

/* Profile page: no name-menu on the right, so the logo + wordmark move
   to the centre of the header. */
.profile-header-centered{
  grid-template-columns: 1fr;
  justify-items: center;
}
.profile-header-centered .brand-left{ justify-self: center; }

/* Profile page: welcome heading centred and pulled up toward the logo. */
.profile-panel-head-centered{
  text-align: center;
  margin-top: -18px;
}
@media (max-width: 860px){
  .profile-panel-head-centered{ margin-top: -8px; }
}

/* Page title next to the logo (e.g. messages page) */
.header-grid-simple.header-with-title{
  grid-template-columns: auto 1fr auto;
}
.header-page-title{
  justify-self: center;
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-on-dark);
}
@media (max-width: 560px){
  .header-page-title{ font-size:17px; }
}

/* Messages page header, mobile only: stack the logo centered with the
   "შეტყობინებები" caption underneath it, instead of logo-left / title-center.
   Selector matches the two-class specificity of the desktop rule above so
   it actually overrides it. */
@media (max-width: 860px){
  .header-grid-simple.header-with-title{
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 6px;
  }
  .header-grid-simple.header-with-title .brand-left{ justify-self: center; }
  /* Mobile only: hide the "შეტყობინებები" caption under the logo —
     desktop/tablet (>860px) keeps it via the rule above. */
  .header-grid-simple.header-with-title .header-page-title{ display: none; }
  .header-grid-simple.header-with-title .nav-actions{ display: none; }
}

/* Notifications page, mobile only: drop the logo out of the header
   entirely (title above is already hidden) and collapse the now-empty
   header down to almost nothing, so the inbox/chat box starts right at
   the very top of the screen instead of leaving dead space above it.
   Desktop/tablet (>860px) keeps the logo untouched. */
@media (max-width: 860px){
  body.messages-page .header-grid-simple.header-with-title .brand-left{
    display: none;
  }
  body.messages-page .header-grid-simple{
    min-height: 0;
    padding: 6px 0;
  }
}

.name-menu-link{
  display:flex; align-items:center; gap:9px; justify-self:end;
  color:#fff; font-weight:700; font-size:15px; font-family:inherit;
  padding:8px 4px; text-decoration:none;
}
.name-menu-link:hover{ opacity:.85; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background: var(--brand-gradient);
  background-size: 220% 220%;
  animation: driftGradient 38s ease-in-out infinite;
  overflow:hidden;
  padding: 76px 0 96px;
}
.hero::before, .hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter: blur(50px);
  opacity:.45;
}
.hero::before{ width:360px; height:360px; background: var(--gold); top:-140px; right:-80px; }
.hero::after{ width:300px; height:300px; background: var(--indigo); bottom:-160px; left:-60px; opacity:.55;}
.hero-inner{ position:relative; z-index:2; max-width:640px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--text-on-dark); background: rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.3);
  padding:6px 14px; border-radius: var(--radius-pill);
  font-size:13px; font-weight:700; margin-bottom:20px;
}
.hero h1{
  color:#fff; font-size:44px; line-height:1.14; margin-bottom:16px;
}
.hero h1 span{ color: var(--gold); }
.hero p.lead{
  color: var(--text-on-dark-mute); font-size:17px; line-height:1.6; margin-bottom:30px; max-width:520px;
}
.search-card{
  background:#fff; border-radius: var(--radius-l);
  padding:10px; display:flex; gap:8px; box-shadow: var(--shadow-pop);
  max-width:560px;
}
.search-card input{
  flex:1; border:none; outline:none; padding:12px 16px; font-size:15px; font-family:inherit; border-radius: var(--radius-m);
}
.hero-stats{ display:flex; gap:34px; margin-top:36px; }
.hero-stats div strong{ display:block; color:#fff; font-size:24px; }
.hero-stats div span{ color: var(--text-on-dark-mute); font-size:13px; }

/* ---------- Category chips ---------- */
.chip-row{
  display:flex; gap:10px; overflow-x:auto; padding: 22px 0 6px;
}
.chip{
  flex:none;
  padding:9px 18px; border-radius: var(--radius-pill);
  background:#fff; border:1.5px solid var(--line);
  font-size:13.5px; font-weight:600; color: var(--text-mute);
  transition: all .15s ease;
}
.chip.active, .chip:hover{
  background: var(--brand-gradient); color:#fff; border-color:transparent;
}

/* ---------- Section headings ---------- */
.section{ padding: 56px 0; }
#listings{ padding-top: 4px; }
/* Home page: the fixed bottom nav bar (74px tall, floating 18px off the
   bottom, plus the round "+" button poking up another ~30px above that)
   needs more clearance than the section's default 56px bottom padding
   gives it, or the last row of listing cards ends up peeking out from
   behind it on a full scroll-to-bottom — same fix as profile.html. */
body.has-bottombar #listings{ padding-bottom: 170px; }
@media (max-width: 680px){
  body.has-bottombar #listings{ padding-bottom: 150px; }
}

/* ---------- Listings pagination (home page, after 27 ads) ---------- */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  margin-top:40px;
}
.pagination-btn{
  min-width:42px;
  height:42px;
  padding:0 14px;
  border-radius: var(--radius-pill);
  border:1.5px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .15s ease, box-shadow .18s ease;
}
.pagination-btn:hover:not(:disabled):not(.active){
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.42);
  transform: translateY(-2px);
}
.pagination-btn.active{
  background: var(--brand-gradient);
  border-color: transparent;
  color:#fff;
  box-shadow: 0 12px 26px rgba(194,42,134,0.4);
}
.pagination-btn.pagination-arrow{ font-size:19px; font-weight:800; padding:0; }
.pagination-btn:disabled{
  opacity:.32;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none;
}
@media (max-width:680px){
  .pagination{ gap:6px; margin-top:28px; }
  .pagination-btn{ min-width:36px; height:36px; padding:0 10px; font-size:13px; }
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap;
}
.section-head h2{ font-size:28px; color: var(--text-on-dark); }
.section-head p{ color: var(--text-on-dark-mute); font-size:14.5px; margin-top:6px; }
.section-dark{ background: rgba(21,12,46,0.32); backdrop-filter: blur(6px); }
.section-dark h2, .section-dark h3{ color:#fff; }

/* ---------- Listing grid / cards ---------- */
.grid{
  display:grid; gap:20px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.task-card{
  background:#fff; border-radius: var(--radius-l);
  border:1px solid var(--line);
  padding:22px; display:flex; flex-direction:column; gap:14px;
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease;
  position:relative; overflow:hidden;
}
.task-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.task-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:5px;
  background: var(--brand-gradient);
}
.task-card .cat{
  align-self:flex-start;
  font-size:12px; font-weight:700; color: var(--magenta);
  background: rgba(194,42,134,0.08); padding:5px 12px; border-radius: var(--radius-pill);
}
.task-card h3{ font-size:17.5px; color: var(--text-dark); }
.task-card .desc{ color: var(--text-mute); font-size:13.5px; line-height:1.55; }
.task-card .meta{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; border-top:1px dashed var(--line); margin-top:auto;
}
.task-card .budget{ font-weight:800; color: var(--text-dark); font-size:15.5px; }
/* .place ახლა ქალაქის შემდეგ მისამართსაც აჩვენებს (main.js-ის
   adCardHTML) — რადგან სრული ტექსტი (ქალაქი + მისამართი) ბარათის
   სიგანეზე გრძელი შეიძლება იყოს, .place-text იჭრება ერთ ხაზზე და,
   თუ არ ეტევა, ბოლოში "…" უჩნდება (text-overflow:ellipsis) ვიდრე
   უბრალოდ overflow-ში გაქრეს ან ბარათის სიმაღლე გაზარდოს.
   min-width:0 საჭიროა როგორც .place-ზე (flex-item .meta-ს შიგნით),
   ისე .place-text-ზე (flex-item .place-ს შიგნით) — ორივეგან, რომ
   ტექსტმა შეძლოს შეკუმშვა თავისი "ბუნებრივი" (content-based) მინიმალურ
   სიგანეზე დაბლა, რაც ellipsis-ის სამუშაოდაა აუცილებელი. */
.task-card .place{
  font-size:12.5px; color: var(--text-mute); display:flex; align-items:center; gap:5px;
  min-width:0; overflow:hidden;
}
.task-card .place-icon{ flex:0 0 auto; }
.task-card .place-text{
  min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.task-card .status{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius: var(--radius-pill); flex:0 0 auto; }
.status-open{ background:#E7F8EE; color: var(--ok); }
.status-progress{ background:#FFF1DC; color:#B5761B; }
.status-done{ background:#EFEAF9; color:#6E4FA8; }

/* ---------- Home page listings: dark, translucent cards ---------- */
/* Scoped to .home-page so task/profile/admin pages (light background)
   keep the original white card style — only the live home page grid
   (every posted ad, present and future, since they all share .task-card) */
.home-page .task-card{
  background: rgba(21,12,46,0.4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow-pop);
}
.home-page .task-card h3{ color:#fff; }
.home-page .task-card .desc{ color: var(--text-on-dark-mute); }
.home-page .task-card .budget{ color:#fff; }
.home-page .task-card .place{ color: var(--text-on-dark-mute); }
.home-page .task-card .cat{ background: rgba(255,255,255,0.14); color:#fff; }
.home-page .task-card .meta{ border-top-color: rgba(255,255,255,0.22); }

.empty-state{
  text-align:center; padding:60px 20px; color: var(--text-mute);
  background:#fff; border-radius: var(--radius-l); border:1.5px dashed var(--line);
}
.empty-state h3{ color: var(--text-dark); margin-bottom:8px; }

/* ---------- Steps (how it works — real sequence, numbering justified) ---------- */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.step{
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-l); padding:28px;
}
.step .num{
  font-family: var(--font-brand); font-size:34px; font-weight:800;
  background: linear-gradient(135deg, var(--gold), var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:10px; display:block;
}
.step h3{ font-size:17px; margin-bottom:8px; }
.step p{ color: var(--text-on-dark-mute); font-size:14px; line-height:1.6; }

@media (max-width: 760px){
  .steps{ grid-template-columns: 1fr; }
  .hero h1{ font-size:32px; }
}

/* ---------- Forms / auth ---------- */
.auth-wrap{
  min-height: calc(100vh - 76px);
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  padding:50px 20px;
}
.auth-card{
  background:#fff; border-radius: var(--radius-l);
  width:100%; max-width:420px; padding:34px 34px 40px;
  box-shadow: var(--shadow-pop);
}
.auth-card .brand{ justify-content:center; margin-bottom:8px; }
.auth-card h1{ text-align:center; font-size:22px; color: var(--text-dark); margin-bottom:4px; }
.auth-card p.sub{ text-align:center; color: var(--text-mute); font-size:13.5px; margin-bottom:26px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:700; color: var(--text-dark); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius: var(--radius-m);
  border:1.5px solid var(--line); font-family:inherit; font-size:14.5px; outline:none;
  transition: border-color .15s ease;
  background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--magenta); }
.field textarea{ resize:vertical; min-height:110px; }
.field-hint{ font-size:12px; color: var(--text-mute); margin-top:5px; }

/* Auto-growing single field (e.g. skills/services) — no manual resize handle,
   starts as a single line and expands downward to fit its content instead of clipping it */
.field textarea.field-autogrow{
  resize:none;
  min-height:auto;
  overflow:hidden;
  line-height:1.5;
}

/* ---------- Required-field validation state (red border) ---------- */
.field input.field-invalid,
.field select.field-invalid,
.field textarea.field-invalid{
  border-color: #E5484D;
}
.photo-upload-grid.field-invalid .upload-box{
  border-color: #E5484D;
}
.field-error{ font-size:12.5px; color:#D33B5E; margin-top:5px; display:none; }

/* ---------- Password confirmation match checkmark / show-password eye ---------- */
.input-check-wrap{ position:relative; }
.input-check-wrap input{ padding-right:44px; }
.input-check-icon{
  position:absolute; top:50%; right:12px; width:22px; height:22px;
  transform:translateY(-50%) scale(0.5);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.input-check-icon.show{ opacity:1; transform:translateY(-50%) scale(1); }

.input-eye-btn{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; cursor:pointer;
  color: var(--text-mute); border-radius:50%;
  transition: color .15s ease, background .15s ease;
}
.input-eye-btn:hover{ color: var(--magenta); background: rgba(194,42,134,0.08); }
.input-eye-btn .eye-icon{ width:20px; height:20px; }
.input-eye-btn .eye-icon.eye-hidden{ display:none; }

.divider{
  display:flex; align-items:center; gap:12px; margin:22px 0;
  color: var(--text-mute); font-size:12.5px;
}
.divider::before, .divider::after{ content:""; flex:1; height:1px; background: var(--line); }

.social-row{ display:flex; flex-direction:column; gap:10px; }
.btn-social{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:12px; border-radius: var(--radius-m);
  border:1.5px solid var(--line); background:#fff; font-weight:700; font-size:14px; color: var(--text-dark);
  transition: background .15s ease, border-color .15s ease;
}
.btn-social:hover{ background: var(--cream); border-color: var(--magenta); }
.btn-social svg{ width:18px; height:18px; }

.auth-switch{ text-align:center; margin-top:22px; font-size:13.5px; color: var(--text-mute); }
.auth-switch a{ color: var(--magenta); font-weight:700; }

.field-links{ display:flex; justify-content:flex-end; margin-top:8px; margin-bottom:6px; }
.field-links a{ font-size:12.5px; color: var(--magenta); font-weight:700; text-decoration:none; }
.field-links a:hover{ text-decoration:underline; }
#loginForm .btn-primary{ margin-top:6px; }

.alert{
  padding:12px 16px; border-radius: var(--radius-m); font-size:13.5px; margin-bottom:18px; display:none;
}
.alert-error{ background:#FDECEF; color:#C22A4A; border:1px solid #F5C6CF; }
.alert-success{ background:#E7F8EE; color:#1F8A50; border:1px solid #BEEBD0; }

/* ---------- Panel (post-task / profile / admin content shell) ---------- */
.panel-wrap{ background: transparent; min-height: calc(100vh - 76px); padding: 44px 0 80px; }
/* Profile page: the fixed bottom nav bar (74px tall, floating 18px off the
   bottom, i.e. ~92px total) needs more clearance than the default 80px
   gives it, or the last row of ad cards ends up peeking out from behind it
   on a full scroll-to-bottom. Extra room also keeps the copyright/support
   strip from crowding the cards above it. */
body.profile-page .panel-wrap{ padding-bottom: 170px; }
/* Same clearance issue applies to every other page that carries the fixed
   bottom nav bar (task detail, post-task, become-tasker) — they all share
   the plain .panel-wrap shell with only the default 80px, which the bar
   and its "+" button can cover on a full scroll-to-bottom. */
body.has-bottombar .panel-wrap{ padding-bottom: 170px; }
@media (max-width: 680px){
  body.profile-page .panel-wrap{ padding-bottom: 150px; }
  body.has-bottombar .panel-wrap{ padding-bottom: 150px; }
}
.panel-head{ margin-bottom:30px; }
.panel-head h1{ font-size:26px; color: var(--text-on-dark); }
.panel-head p{ color: var(--text-on-dark-mute); margin-top:6px; font-size:14.5px; }
.profile-page .panel-head p{ color: var(--text-on-dark); }
/* ---------- Centered new-post page ---------- */
.post-task-container{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.post-task-container .panel-head{
  width:100%;
  max-width:640px;
  text-align:center;
}
.post-task-container .form-card{
  width:100%;
}
.post-task-container #errorBox{
  width:100%;
  max-width:640px;
}

.form-card{
  background:#fff; border-radius: var(--radius-l); border:1px solid var(--line);
  padding:32px; box-shadow: var(--shadow-card); max-width:640px;
}

/* "ფასი შეთანხმებით" checkbox under the budget field (post-task.html) —
   see js in that page for the greyed-out/disabled behaviour on the
   budget input when it's checked. */
.negotiable-check{
  display:flex; align-items:center; gap:7px;
  margin-top:10px; font-size:13.5px; font-weight:600;
  color: var(--text-on-dark, #fff); cursor:pointer; user-select:none;
}
.negotiable-check input[type="checkbox"]{
  width:16px; height:16px; margin:0; cursor:pointer; accent-color: var(--magenta);
}
.field input:disabled{
  opacity:.75; cursor:not-allowed; background: rgba(255,255,255,.06);
  color: var(--text-on-dark) !important;
  -webkit-text-fill-color: var(--text-on-dark);
}

/* ---------- Account tab: info box + actions box side by side, equal width ---------- */
.account-row{
  display:flex;
  align-items:stretch;
  gap:20px;
  width:100%;
  max-width:none;
}
.account-row .form-card{ margin:0; max-width:none; flex:1 1 0; }
.account-actions-card{
  flex:1 1 0;
  max-width:none;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.account-actions{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.account-actions .btn{ text-align:center; }
@media (max-width:760px){
  .account-row{ flex-direction:column; }
  .account-actions-card{ flex-basis:auto; max-width:100%; width:100%; }
}
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .row-2{ grid-template-columns:1fr; } }

/* ---------- Account tab: name/email (half-width) + round profile photo upload ---------- */
.account-photo-row{
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin-bottom:16px;
}
.account-namemail-col{
  flex:1 1 50%;
  max-width:50%;
  min-width:0;
}
.account-namemail-col .field{ margin-bottom:16px; }
.account-namemail-col .field:last-child{ margin-bottom:0; }
.account-photo-col{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:4px;
}
.avatar-upload-box{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:180px; height:180px;
  border-radius:50%;
  border:1.5px dashed var(--line);
  background: var(--cream);
  cursor:pointer;
  overflow:hidden;
  transition: border-color .15s ease, background .15s ease;
  margin-left:28px;
}
.avatar-upload-box:hover{ border-color: var(--magenta); background:#FFF4FA; }
.avatar-upload-box.has-photo{ border-color:transparent; background:transparent; }
.avatar-upload-box.has-photo:hover{ border-color:transparent; background:transparent; }
.avatar-upload-placeholder{
  position:absolute;
  inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color: var(--text-mute); font-size:12.5px; font-weight:600; text-align:center; padding:0 8px;
}
/* ფოტოს ატვირთვის შემდეგ JS აყენებს accPhotoPlaceholder.hidden = true, მაგრამ
   ზემოთა .avatar-upload-placeholder{display:flex} (author-level rule) იმარჯვებდა
   ბრაუზერის ჩაშენებულ [hidden]{display:none}-ზე — კამერის აიქონი და "ფოტო"
   წარწერა კვლავ ჩანდა, absolute+inset:0-ის გამო, ატვირთული ფოტოს თავზე.
   ეს წესი უბრუნებს [hidden]-ს რეალურ პრიორიტეტს. */
.avatar-upload-placeholder[hidden]{ display:none; }
.avatar-upload-placeholder svg{ width:34px; height:34px; color: var(--magenta); }
.avatar-upload-preview{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:50%; display:block; }
@media (max-width:560px){
  .account-photo-row{ flex-direction:column; align-items:center; }
  .account-namemail-col{ max-width:100%; width:100%; }
  .account-photo-col{ order:-1; }
  .avatar-upload-box{ margin-left:0; }
}

/* ---------- ID photo upload boxes (become-tasker) ---------- */
.upload-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .upload-grid{ grid-template-columns:1fr; } }
.upload-box{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-m);
  border:1.5px dashed var(--line);
  background: var(--cream);
  cursor:pointer;
  overflow:hidden;
  transition: border-color .15s ease, background .15s ease;
}
.upload-box:hover{ border-color: var(--magenta); background:#FFF4FA; }
.upload-placeholder{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color: var(--text-mute); font-size:13px; font-weight:600; text-align:center; padding:0 12px;
}
.upload-placeholder svg{ width:28px; height:28px; color: var(--magenta); }
.upload-preview{ width:100%; height:100%; object-fit:cover; }

/* ---------- Ad photo upload grid (post-task, up to 5 photos) ---------- */
.photo-upload-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap:12px;
}
.photo-upload-grid .upload-box{ aspect-ratio: 1 / 1; }
.photo-thumb{
  position:relative;
  border-radius: var(--radius-m);
  overflow:hidden;
  aspect-ratio: 1 / 1;
  border:1.5px solid var(--line);
}
.photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-thumb-remove{
  position:absolute;
  top:6px; right:6px;
  width:24px; height:24px;
  border-radius:50%;
  border:none;
  background:rgba(20,8,40,0.68);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:15px;
  line-height:1;
  padding:0;
  transition: background .15s ease;
}
.photo-thumb-remove:hover{ background:rgba(20,8,40,0.9); }
.photo-upload-count{ font-size:12px; color: var(--text-mute); margin-top:8px; }

/* ---------- Photo lightbox (task.html — click a photo to view it enlarged) ---------- */
.photo-thumb-view{ cursor:pointer; }
.photo-thumb-view img{ transition: transform .15s ease; }
.photo-thumb-view:hover img{ transform: scale(1.04); }
.lightbox-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(10,4,24,0.92);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.lightbox-overlay[hidden]{ display:none; }
.lightbox-img-wrap{
  max-width:92vw; max-height:88vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-img{
  max-width:92vw; max-height:88vh;
  object-fit:contain;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
}
.lightbox-close,
.lightbox-arrow{
  position:absolute;
  border:none;
  background:rgba(255,255,255,0.14);
  color:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition: background .15s ease;
}
.lightbox-close:hover,
.lightbox-arrow:hover{ background:rgba(255,255,255,0.28); }
.lightbox-close{
  top:18px; right:22px;
  width:42px; height:42px;
  font-size:20px; line-height:1;
}
.lightbox-arrow{
  top:50%; transform:translateY(-50%);
  width:50px; height:50px;
  font-size:26px; line-height:1;
}
.lightbox-arrow.prev{ left:18px; }
.lightbox-arrow.next{ right:18px; }
.lightbox-counter{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:13px;
  background:rgba(255,255,255,0.14);
  padding:5px 14px; border-radius:999px;
}
@media (max-width:560px){
  .lightbox-arrow{ width:40px; height:40px; font-size:20px; }
  .lightbox-arrow.prev{ left:8px; }
  .lightbox-arrow.next{ right:8px; }
  .lightbox-close{ width:36px; height:36px; font-size:17px; top:10px; right:10px; }
}

/* ---------- Category grid (discover page) ---------- */
.category-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.category-card{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:22px 14px; border-radius: var(--radius-l);
  background:#fff; border:1px solid var(--line);
  box-shadow: var(--shadow-card);
  text-align:center; transition: transform .15s ease, box-shadow .15s ease;
}
.category-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.14); }
.category-card img{ width:64px; height:64px; object-fit:contain; }
.category-card span{ font-size:13.5px; font-weight:700; color: var(--text-dark); line-height:1.35; }

/* ---------- Discover page: "add company/tasker" instructions note ---------- */
.discover-instructions-note{
  display:block;
  text-align:center;
  margin-top:34px;
  padding-top:26px;
  border-top:1.5px solid var(--glass-border, rgba(255,255,255,0.16));
}
.discover-instructions-text{
  font-size:16.5px;
  font-weight:700;
  color: var(--text-on-dark);
  margin:0 0 16px;
  line-height:1.45;
}
/* გამჭირვალე ღილაკი თეთრი კანტით ("ინსტრუქციის ნახვა") */
.btn-outline-white{
  background: transparent;
  color:#fff;
  border:1.5px solid #fff;
}
.btn-outline-white:hover{ background: rgba(255,255,255,0.12); opacity:1; }
@media (max-width: 860px){
  .discover-instructions-note{ margin-top:26px; padding-top:20px; }
  .discover-instructions-text{ font-size:15px; }
}

/* ---------- Category add/instructions modal body ---------- */
.category-instructions-body{
  padding:20px 22px 24px;
  font-size:14px;
  line-height:1.65;
  color: var(--text-on-dark);
}
.category-instructions-body p{ margin:0 0 14px; }
.category-instructions-body p:last-child{ margin-bottom:0; }
.category-instructions-body a{ color: var(--gold); text-decoration:underline; }
.category-instructions-list{
  margin:0 0 14px;
  display:flex; flex-direction:column; gap:8px;
}
.category-instructions-list li{ display:flex; align-items:flex-start; gap:8px; }
.category-instructions-line{ flex:1 1 auto; min-width:0; }
.category-instructions-line strong{ white-space:nowrap; }
.category-instructions-icon{ flex:none; font-size:15px; line-height:1.65; }

/* Admin Panel category cards double as a link into that category's
   companies (geadminge.html#categories/<id>) — see js/admin.js openCatBtn. */
/* ადმინ პანელის ზედა მარჯვენა პროფილის ღილაკი (სახელით) დამალულია */
.admin-page #navAuthSlot{ display:none; }
.admin-page .category-card{ cursor:pointer; }
.admin-page .category-card:focus-visible{ outline:2px solid var(--magenta); outline-offset:2px; }

/* Admin Panel: "რედაქტირება"/"წაშლა" sit in their own row under the
   category box itself, not inside its padding — see js/admin.js
   renderCategories. */
.category-card-wrap{ display:flex; flex-direction:column; }
.category-card-actions{
  display:flex; flex-direction:column; align-items:stretch; gap:6px; margin-top:8px;
}

/* ---------- Company list (public category.html page) ---------- */
/* Dark, 50%-transparent card with a white outline — matches the request
   to replace the plain white listing box on the discover → category flow.
   The photo slot sits in its own column that stretches the full card
   height (align-self:stretch) so the image, centered inside it, ends up
   equally spaced from the card's top and bottom edges; a pale white
   border-right on that column is the divider between photo and text. */
.company-card{
  background: rgba(21,12,46,0.5);
  border: 1.5px solid #fff;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding:20px;
  display:flex; align-items:center;
}
.company-photo{
  display:flex; align-items:center; justify-content:center;
  align-self:stretch; flex:none;
  width:280px;
  padding-right:26px; margin-right:26px;
  border-right:1px solid rgba(255,255,255,0.35);
}
.company-card img{
  width:264px; height:264px; object-fit:contain; border-radius: var(--radius-m);
  background: rgba(255,255,255,0.1);
}
@media (max-width:680px){
  .company-card{ flex-direction:column; align-items:stretch; }
  .company-photo{
    width:auto; align-self:center;
    padding-right:0; margin-right:0;
    padding-bottom:16px; margin-bottom:16px;
    border-right:none; border-bottom:1px solid rgba(255,255,255,0.35);
  }
  .company-card img{ width:104px; height:104px; }
}
.company-card .company-body{ flex:1; min-width:0; }
.company-card h3{ font-size:16.5px; color:#fff; margin-bottom:4px; }
.company-card .desc{ color: rgba(255,255,255,0.85); font-size:13.5px; line-height:1.55; margin-bottom:10px; }
.company-list{ display:flex; flex-direction:column; gap:14px; }
.company-card .company-meta{ display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color: rgba(255,255,255,0.85); }
.company-card .company-meta a{ color:#fff; font-weight:700; text-decoration:underline; }
.company-card .company-meta a:hover{ text-decoration:none; }
.company-card .company-hours{ display:flex; flex-direction:column; gap:4px; font-size:13px; color: rgba(255,255,255,0.85); margin-top:10px; }
.company-card .company-social{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
.company-card .company-social a{ color:#fff; font-size:12.5px; font-weight:700; text-decoration:underline; }
.company-card .company-social a:hover{ text-decoration:none; }
.company-card .desc{ margin-top:10px; }

/* ---------- Tabs (profile) ---------- */
.tabs{
  display:flex; gap:8px; margin-bottom:26px; border-bottom:1.5px solid var(--line);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab-btn{
  background:none; border:none; padding:12px 6px; font-weight:700; color: var(--text-mute);
  font-size:14.5px; border-bottom:3px solid transparent; margin-right:22px;
  white-space:nowrap; flex:none;
}
.tab-btn.active{ color: var(--magenta); border-color: var(--magenta); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.profile-page .tab-btn{ color: var(--text-on-dark); }
.profile-page .tab-btn.active{ color: var(--magenta); }

/* Mobile-only: profile page tabs stack vertically instead of scrolling side by side. */
@media (max-width:680px){
  .profile-page .tabs{
    flex-direction:column; overflow-x:visible; border-bottom:none; gap:2px;
  }
  .profile-page .tab-btn{
    margin-right:0; width:100%; text-align:left;
    border-bottom:1.5px solid var(--line); border-radius:0;
  }
  .profile-page .tab-btn.active{ border-color: var(--magenta); }
}

/* ---------- Table (admin) ---------- */
.table-wrap{ background:#fff; border-radius: var(--radius-l); border:1px solid var(--line); overflow:hidden; box-shadow: var(--shadow-card); }
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
thead{ background: var(--ink); color:#fff; }
th, td{ padding:13px 16px; text-align:left; }
tbody tr{ border-bottom:1px solid var(--line); }
tbody tr:hover{ background: var(--cream); }
.badge{ font-size:11px; font-weight:700; padding:4px 10px; border-radius: var(--radius-pill); }
.badge-admin{ background:#EFEAF9; color:#6E4FA8; }
.badge-user{ background:#EEF1F6; color:#5A6472; }
.admin-stats{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:30px; }
.stat-card{ background:#fff; border-radius: var(--radius-m); border:1px solid var(--line); padding:20px; box-shadow: var(--shadow-card); }
.stat-card strong{ display:block; font-size:26px; color: var(--text-dark); }
.stat-card span{ font-size:12.5px; color: var(--text-mute); }

/* ---------- Notifications (admin — adminInbox) ---------- */
.notif-list{ display:flex; flex-direction:column; gap:12px; }
.notif-card{ background: rgba(21,12,46,0.5); border:1px solid rgba(255,255,255,0.35); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding:6px 16px; color: var(--text-on-dark); }
.notif-card summary{ display:flex; align-items:center; gap:10px; padding:12px 0; cursor:pointer; list-style:none; color: var(--text-on-dark); }
.notif-card summary::-webkit-details-marker{ display:none; }
.notif-card table{ border:1px solid rgba(255,255,255,0.3); border-radius: var(--radius-s); overflow:hidden; }
.notif-card td{ font-size:13px; padding:9px 14px; border-bottom:1px solid rgba(255,255,255,0.18); color: var(--text-on-dark); }
.notif-card tr:last-child td{ border-bottom:none; }
.notif-reply-box{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.25); }
.notif-reply-text{
  width:100%; resize:vertical; min-height:70px; padding:10px 12px;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-s); color: var(--text-on-dark); font-size:13.5px; font-family:inherit;
}
.notif-reply-text::placeholder{ color: var(--text-on-dark-mute); }

/* ---------- Task detail ---------- */
.detail-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap:28px; align-items:start; }
@media (max-width: 860px){ .detail-grid{ grid-template-columns:1fr; } }
.detail-main{ background:#fff; border-radius: var(--radius-l); border:1px solid var(--line); padding:32px; box-shadow: var(--shadow-card); }
.detail-side{ background:#fff; border-radius: var(--radius-l); border:1px solid var(--line); padding:26px; box-shadow: var(--shadow-card); position:sticky; top:172px; }
@media (max-width: 860px){
  .detail-side{ top:118px; }
}
.response-item{ padding:14px 0; border-bottom:1px solid var(--line); }
.response-item:last-child{ border-bottom:none; }

/* ---------- Footer ---------- */
.site-footer{ background: rgba(21,12,46,0.4); backdrop-filter: blur(8px); color: var(--text-on-dark-mute); padding: 44px 0 26px; margin-top:60px; }
.footer-top{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-tag{ max-width:320px; font-size:13.5px; line-height:1.6; }
.footer-links{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h4{ color:#fff; font-size:13px; margin-bottom:12px; }
.footer-col a{ display:block; font-size:13.5px; padding:5px 0; color: var(--text-on-dark-mute); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ padding-top:20px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- Toast ---------- */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background: var(--ink); color:#fff; padding:13px 22px; border-radius: var(--radius-pill);
  font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition: all .25s ease;
  z-index:200; box-shadow: var(--shadow-pop);
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.loader{ text-align:center; padding:40px; color: var(--text-on-dark-mute); font-size:14px; }
.loader-center{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  padding:0;
  width:100%;
  text-align:center;
}

/* ---------- Auth gate ----------
   Pages that require a signed-in user (post-task, profile, messages,
   edit-task, become-tasker) set <body class="... auth-gate"> in their
   markup. Their content stays out of view until js/auth.js's
   revealAuthGate() removes this class, which only happens once the
   client-side Firebase auth check confirms a signed-in user.
   Without this, the browser paints the full protected page first and only
   redirects an unauthorized visitor to login.html once onAuthStateChanged
   resolves a beat later — the "flash" of protected content before the
   redirect. Gating the content (not just intercepting nav-bar clicks, see
   guardBottombarAuth in js/main.js) also covers direct/bookmarked/shared
   links straight to a protected page's URL. */
body.auth-gate .panel-wrap{ display:none; }
.auth-gate-loader{ display:none; }
body.auth-gate .auth-gate-loader{ display:block; }

/* ========================================================================== 
   Home page — app-style landing screen
   ========================================================================== */
.home-page{
  min-height:100svh;
  height:auto;
  overflow-x:hidden;
  overflow-y:auto;
  color:#fff;
  background:var(--app-background);
  background-size:160% 160%;
  animation:homeGradient 28s ease-in-out infinite alternate;
  animation-delay: var(--bg-delay, 0s);
}

.home-screen{
  position:relative;
  width:100%;
  min-height:100svh;
  height:auto;
  overflow:visible;
  display:flex;
  flex-direction:column;
}

.home-screen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 49% 41%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(8,0,33,.03), rgba(6,0,31,.32));
}

@keyframes homeGradient{
  0%{background-position:0% 18%;}
  50%{background-position:58% 42%;}
  100%{background-position:100% 82%;}
}

.home-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
  height:72px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:12px 28px 0;
}

.home-top-links{
  display:flex;
  align-items:center;
  gap:26px;
  color:#08050b;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:17px;
  line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.08);
}
.home-top-links a{transition:opacity .18s ease, transform .18s ease;}
.home-top-links a:hover{opacity:.72;transform:translateY(-1px);}
.home-top-links-mobile{ display:none; }

/* სანამ არ დადგინდება, ავტორიზებულია თუ არა ვიზიტორი (ან სანამ ქეშირებული
   პროფილი დაისმება JS-ით), header-ის auth-ბლოკი დამალულია (visibility:hidden,
   ადგილი შენარჩუნებულია — layout არ ხტება), რომ არასდროს გამოკრთეს არასწორი
   "Sign up / Sign in" მდგომარეობა უკვე ავტორიზებული მომხმარებლისთვის. ხსნის
   index.html-ის inline სინქრონული სკრიპტი (ქეშიდან, დაუყოვნებლივ) ან
   setAuthActionsHTML (watchAuth-ის რეალურ პასუხზე). */
.home-top-links.is-pending{ visibility:hidden; }


.home-hero{
  position:relative;
  z-index:2;
  width:min(100%, 940px);
  flex:0 0 auto;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:18px 24px 24px;
}

.home-brand{
  margin-top:0;
  text-align:center;
}
.home-brand-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
}
.home-logo{
  width:113px;
  height:113px;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(10,0,40,.22));
}
.home-brand-copy{text-align:left;}
.home-wordmark{
  font-family:'Baloo 2','Noto Sans Georgian',sans-serif;
  font-size:66px;
  line-height:.84;
  font-weight:800;
  letter-spacing:-2.2px;
  color:#fff;
  text-shadow:0 3px 14px rgba(16,0,55,.25);
}
.home-tagline{
  margin-top:8px;
  padding-left:4px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:21px;
  line-height:1;
  font-weight:700;
  color:rgba(255,255,255,.93);
  letter-spacing:.2px;
  /* ენის შეცვლისას (მაგ. ქართული ტექსტი უფრო გრძელია, ვიდრე ინგლისური)
     ტექსტის სიგანე აღარ უნდა მოქმედებდეს ლოგოს/wordmark-ის ცენტრირებაზე.
     width:0 + white-space:nowrap + overflow:visible ტრიკი: ეს ელემენტი
     .home-brand-copy-ს სიგანეში "0"-ით შედის (ანუ row-ს საერთო სიგანეს,
     და მაშასადამე ლოგოს ცენტრირებულ პოზიციას, აღარ ცვლის), მაგრამ თავად
     ტექსტი მაინც სრულად ჩანს — უბრალოდ ვიზუალურად აგრძელებს მარჯვნივ,
     საკუთარი "ყუთის" საზღვრის მიღმა (body-ს overflow-x:hidden-ის
     წყალობით, ეკრანის კიდეს იქით არასდროს გამოაჩენს ჰორიზონტალურ სქროლს). */
  width:0;
  white-space:nowrap;
  overflow:visible;
}

.home-search{
  width:min(750px, 100%);
  height:46px;
  margin-top:24px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 24px;
  border:2px solid rgba(74,128,255,.78);
  border-right-color:rgba(255,52,150,.78);
  border-radius:48px;
  background:rgba(12,0,37,.72);
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.035),
    0 0 20px rgba(32,87,255,.18),
    0 0 26px rgba(236,32,143,.12);
  backdrop-filter:blur(8px);
}
.home-search:focus-within{
  border-color:rgba(255,255,255,.65);
  box-shadow:0 0 30px rgba(70,100,255,.24),0 0 34px rgba(236,32,143,.18);
}
.home-search-icon{
  flex:none;
  width:24px;
  height:24px;
  color:#fff;
  display:grid;
  place-items:center;
}
.home-search-icon svg{width:22px;height:22px;}
.home-search input{
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
  font-size:20px;
  font-weight:400;
}
.home-search input::placeholder{color:rgba(191,184,225,.72);opacity:1;}

.home-welcome{
  margin-top:47px;
  text-align:center;
  text-shadow:0 5px 18px rgba(0,0,0,.25);
}
.home-welcome h1{
  color:#fff;
  font-family:'Noto Sans Georgian',sans-serif;
  font-size:43px;
  font-weight:900;
  letter-spacing:-.8px;
}
.home-welcome p{
  margin-top:12px;
  color:rgba(238,226,255,.84);
  font-family:Arial, Helvetica, sans-serif;
  font-size:27px;
  line-height:1;
}

/* ---------- App bottom navigation bar (replaces the old fab-add) ---------- */
.app-bottombar-wrap{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 24px));
  z-index: 70;
}
@media (min-width: 681px){
  /* Slightly wider bottom nav bar on desktop only. */
  .app-bottombar-wrap{ width: min(570px, calc(100% - 24px)); }
}
.app-bottombar{
  position: relative;
  display: flex;
  align-items: end;
  height: 113.6px;
  padding: 39.6px 6px 10px;
  border-radius: 32px;
  background: rgba(15,8,36,0.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 44px rgba(20,8,50,0.42), 0 2px 0 rgba(255,255,255,0.04) inset;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20113.62%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M%2032.00%2039.62%20L%20205.14%2039.62%20L%20206.11%2039.00%20L%20207.07%2039.00%20L%20208.03%2039.00%20L%20208.99%2038.37%20L%20209.95%2038.37%20L%20210.92%2037.74%20L%20211.88%2037.11%20L%20212.84%2037.11%20L%20213.80%2036.48%20L%20214.77%2035.85%20L%20215.73%2034.59%20L%20216.69%2033.96%20L%20217.65%2033.33%20L%20218.62%2032.08%20L%20219.58%2030.82%20L%20220.54%2028.93%20L%20221.50%2027.67%20L%20222.47%2025.79%20L%20223.43%2023.90%20L%20224.39%2022.01%20L%20225.35%2020.76%20L%20226.32%2018.87%20L%20227.28%2017.61%20L%20228.24%2016.35%20L%20229.20%2015.09%20L%20230.17%2013.84%20L%20231.13%2012.58%20L%20232.09%2011.95%20L%20233.05%2010.69%20L%20234.02%2010.06%20L%20234.98%208.81%20L%20235.94%208.18%20L%20236.90%207.55%20L%20237.86%206.92%20L%20238.83%206.29%20L%20239.79%205.66%20L%20240.75%205.03%20L%20241.71%204.40%20L%20242.68%203.77%20L%20243.64%203.14%20L%20244.60%202.52%20L%20245.56%202.52%20L%20246.53%201.89%20L%20247.49%201.26%20L%20248.45%201.26%20L%20249.41%200.63%20L%20250.38%200.63%20L%20251.34%200.63%20L%20252.30%200.00%20L%20253.26%200.00%20L%20254.23%200.00%20L%20255.19%200.00%20L%20256.15%200.00%20L%20257.11%200.00%20L%20258.08%200.00%20L%20259.04%200.00%20L%20260.00%200.00%20L%20260.96%200.00%20L%20261.92%200.00%20L%20262.89%200.00%20L%20263.85%200.00%20L%20264.81%200.00%20L%20265.77%200.00%20L%20266.74%200.00%20L%20267.70%200.00%20L%20268.66%200.63%20L%20269.62%200.63%20L%20270.59%200.63%20L%20271.55%201.26%20L%20272.51%201.26%20L%20273.47%201.89%20L%20274.44%202.52%20L%20275.40%202.52%20L%20276.36%203.14%20L%20277.32%203.77%20L%20278.29%204.40%20L%20279.25%205.03%20L%20280.21%205.66%20L%20281.17%206.29%20L%20282.14%206.92%20L%20283.10%207.55%20L%20284.06%208.18%20L%20285.02%208.81%20L%20285.98%2010.06%20L%20286.95%2010.69%20L%20287.91%2011.95%20L%20288.87%2012.58%20L%20289.83%2013.84%20L%20290.80%2015.09%20L%20291.76%2016.35%20L%20292.72%2017.61%20L%20293.68%2018.87%20L%20294.65%2020.76%20L%20295.61%2022.01%20L%20296.57%2023.90%20L%20297.53%2025.79%20L%20298.50%2027.67%20L%20299.46%2028.93%20L%20300.42%2030.82%20L%20301.38%2032.08%20L%20302.35%2033.33%20L%20303.31%2033.96%20L%20304.27%2034.59%20L%20305.23%2035.85%20L%20306.20%2036.48%20L%20307.16%2037.11%20L%20308.12%2037.11%20L%20309.08%2037.74%20L%20310.05%2038.37%20L%20311.01%2038.37%20L%20311.97%2039.00%20L%20312.93%2039.00%20L%20313.89%2039.00%20L%20314.86%2039.62%20L%20488.00%2039.62%20A%2032.00%2032.00%200%200%201%20520.00%2071.62%20L%20520.00%2081.62%20A%2032.00%2032.00%200%200%201%20488.00%20113.62%20L%2032.00%20113.62%20A%2032.00%2032.00%200%200%201%200%2081.62%20L%200%2071.62%20A%2032.00%2032.00%200%200%201%2032.00%2039.62%20Z%22%2F%3E%20%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20113.62%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M%2032.00%2039.62%20L%20205.14%2039.62%20L%20206.11%2039.00%20L%20207.07%2039.00%20L%20208.03%2039.00%20L%20208.99%2038.37%20L%20209.95%2038.37%20L%20210.92%2037.74%20L%20211.88%2037.11%20L%20212.84%2037.11%20L%20213.80%2036.48%20L%20214.77%2035.85%20L%20215.73%2034.59%20L%20216.69%2033.96%20L%20217.65%2033.33%20L%20218.62%2032.08%20L%20219.58%2030.82%20L%20220.54%2028.93%20L%20221.50%2027.67%20L%20222.47%2025.79%20L%20223.43%2023.90%20L%20224.39%2022.01%20L%20225.35%2020.76%20L%20226.32%2018.87%20L%20227.28%2017.61%20L%20228.24%2016.35%20L%20229.20%2015.09%20L%20230.17%2013.84%20L%20231.13%2012.58%20L%20232.09%2011.95%20L%20233.05%2010.69%20L%20234.02%2010.06%20L%20234.98%208.81%20L%20235.94%208.18%20L%20236.90%207.55%20L%20237.86%206.92%20L%20238.83%206.29%20L%20239.79%205.66%20L%20240.75%205.03%20L%20241.71%204.40%20L%20242.68%203.77%20L%20243.64%203.14%20L%20244.60%202.52%20L%20245.56%202.52%20L%20246.53%201.89%20L%20247.49%201.26%20L%20248.45%201.26%20L%20249.41%200.63%20L%20250.38%200.63%20L%20251.34%200.63%20L%20252.30%200.00%20L%20253.26%200.00%20L%20254.23%200.00%20L%20255.19%200.00%20L%20256.15%200.00%20L%20257.11%200.00%20L%20258.08%200.00%20L%20259.04%200.00%20L%20260.00%200.00%20L%20260.96%200.00%20L%20261.92%200.00%20L%20262.89%200.00%20L%20263.85%200.00%20L%20264.81%200.00%20L%20265.77%200.00%20L%20266.74%200.00%20L%20267.70%200.00%20L%20268.66%200.63%20L%20269.62%200.63%20L%20270.59%200.63%20L%20271.55%201.26%20L%20272.51%201.26%20L%20273.47%201.89%20L%20274.44%202.52%20L%20275.40%202.52%20L%20276.36%203.14%20L%20277.32%203.77%20L%20278.29%204.40%20L%20279.25%205.03%20L%20280.21%205.66%20L%20281.17%206.29%20L%20282.14%206.92%20L%20283.10%207.55%20L%20284.06%208.18%20L%20285.02%208.81%20L%20285.98%2010.06%20L%20286.95%2010.69%20L%20287.91%2011.95%20L%20288.87%2012.58%20L%20289.83%2013.84%20L%20290.80%2015.09%20L%20291.76%2016.35%20L%20292.72%2017.61%20L%20293.68%2018.87%20L%20294.65%2020.76%20L%20295.61%2022.01%20L%20296.57%2023.90%20L%20297.53%2025.79%20L%20298.50%2027.67%20L%20299.46%2028.93%20L%20300.42%2030.82%20L%20301.38%2032.08%20L%20302.35%2033.33%20L%20303.31%2033.96%20L%20304.27%2034.59%20L%20305.23%2035.85%20L%20306.20%2036.48%20L%20307.16%2037.11%20L%20308.12%2037.11%20L%20309.08%2037.74%20L%20310.05%2038.37%20L%20311.01%2038.37%20L%20311.97%2039.00%20L%20312.93%2039.00%20L%20313.89%2039.00%20L%20314.86%2039.62%20L%20488.00%2039.62%20A%2032.00%2032.00%200%200%201%20520.00%2071.62%20L%20520.00%2081.62%20A%2032.00%2032.00%200%200%201%20488.00%20113.62%20L%2032.00%20113.62%20A%2032.00%2032.00%200%200%201%200%2081.62%20L%200%2071.62%20A%2032.00%2032.00%200%200%201%2032.00%2039.62%20Z%22%2F%3E%20%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: top left;
  mask-position: top left;
}
.bottombar-tabs{
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  height: 100%;
  min-width: 0;
}
.bottombar-item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
  padding-top: 12px;
  min-width: 0;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  transition: color .15s ease;
}
.bottombar-item span{
  font-family: 'Noto Sans Georgian', Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.1px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: center;
}
.bottombar-icon{ width: 23px; height: 23px; }
.bottombar-item.is-active{ color: #fff; }
.bottombar-item:hover{ color: #fff; }
.bottombar-unread-dot{
  position: absolute;
  top: 8px;
  right: calc(50% - 18px);
}
.bottombar-add-slot{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding-top: 12px;
  min-width: 0;
}
.bottombar-add-slot span{
  font-family: 'Noto Sans Georgian', Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: #fff;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: center;
}
.bottombar-add{
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(0,0,0,0.4);
  background-clip: padding-box;
  transition: transform .15s ease;
}
.bottombar-add svg{ width: 26px; height: 26px; }
.bottombar-add:hover{ transform: translateX(-50%) translateY(-2px) scale(1.04); }
.bottombar-add:active{ transform: translateX(-50%) scale(0.97); }

body.has-bottombar .home-site-footer,
body.has-bottombar .site-footer{ margin-bottom: 0; }

.site-copyright-fixed{
  position: fixed;
  left: 0;
  bottom: 6px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.2px;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
  pointer-events: none;
}
.site-copyright-fixed img{
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
}

.site-support-fixed{
  position: fixed;
  right: 0;
  bottom: 6px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.2px;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s ease;
}
.site-support-fixed:hover{ color: #fff; }
.site-support-fixed img{
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
}

@media (max-width: 680px){
  /* Bottom nav bar sits a bit higher on mobile only, so it doesn't
     overlap the copyright/support strip below it. */
  .app-bottombar-wrap{ bottom: 34px; width: calc(100% - 16px); }
  .app-bottombar{
    height: 104.7px;
    padding-top: 34.7px;
    border-radius: 30px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20380%20104.72%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M%2030.00%2034.72%20L%20140.29%2034.72%20L%20141.16%2034.17%20L%20142.03%2034.17%20L%20142.90%2034.17%20L%20143.77%2033.62%20L%20144.65%2033.62%20L%20145.52%2033.07%20L%20146.39%2032.52%20L%20147.26%2032.52%20L%20148.14%2031.97%20L%20149.01%2031.41%20L%20149.88%2030.31%20L%20150.75%2029.76%20L%20151.62%2029.21%20L%20152.50%2028.11%20L%20153.37%2027.01%20L%20154.24%2025.35%20L%20155.11%2024.25%20L%20155.98%2022.60%20L%20156.86%2020.94%20L%20157.73%2019.29%20L%20158.60%2018.19%20L%20159.47%2016.53%20L%20160.35%2015.43%20L%20161.22%2014.33%20L%20162.09%2013.23%20L%20162.96%2012.13%20L%20163.83%2011.02%20L%20164.71%2010.47%20L%20165.58%209.37%20L%20166.45%208.82%20L%20167.32%207.72%20L%20168.20%207.16%20L%20169.07%206.61%20L%20169.94%206.06%20L%20170.81%205.51%20L%20171.68%204.96%20L%20172.56%204.41%20L%20173.43%203.86%20L%20174.30%203.31%20L%20175.17%202.76%20L%20176.05%202.20%20L%20176.92%202.20%20L%20177.79%201.65%20L%20178.66%201.10%20L%20179.53%201.10%20L%20180.41%200.55%20L%20181.28%200.55%20L%20182.15%200.55%20L%20183.02%200.00%20L%20183.89%200.00%20L%20184.77%200.00%20L%20185.64%200.00%20L%20186.51%200.00%20L%20187.38%200.00%20L%20188.26%200.00%20L%20189.13%200.00%20L%20190.00%200.00%20L%20190.87%200.00%20L%20191.74%200.00%20L%20192.62%200.00%20L%20193.49%200.00%20L%20194.36%200.00%20L%20195.23%200.00%20L%20196.11%200.00%20L%20196.98%200.00%20L%20197.85%200.55%20L%20198.72%200.55%20L%20199.59%200.55%20L%20200.47%201.10%20L%20201.34%201.10%20L%20202.21%201.65%20L%20203.08%202.20%20L%20203.95%202.20%20L%20204.83%202.76%20L%20205.70%203.31%20L%20206.57%203.86%20L%20207.44%204.41%20L%20208.32%204.96%20L%20209.19%205.51%20L%20210.06%206.06%20L%20210.93%206.61%20L%20211.80%207.16%20L%20212.68%207.72%20L%20213.55%208.82%20L%20214.42%209.37%20L%20215.29%2010.47%20L%20216.17%2011.02%20L%20217.04%2012.13%20L%20217.91%2013.23%20L%20218.78%2014.33%20L%20219.65%2015.43%20L%20220.53%2016.53%20L%20221.40%2018.19%20L%20222.27%2019.29%20L%20223.14%2020.94%20L%20224.02%2022.60%20L%20224.89%2024.25%20L%20225.76%2025.35%20L%20226.63%2027.01%20L%20227.50%2028.11%20L%20228.38%2029.21%20L%20229.25%2029.76%20L%20230.12%2030.31%20L%20230.99%2031.41%20L%20231.86%2031.97%20L%20232.74%2032.52%20L%20233.61%2032.52%20L%20234.48%2033.07%20L%20235.35%2033.62%20L%20236.23%2033.62%20L%20237.10%2034.17%20L%20237.97%2034.17%20L%20238.84%2034.17%20L%20239.71%2034.72%20L%20350.00%2034.72%20A%2030.00%2030.00%200%200%201%20380.00%2064.72%20L%20380.00%2074.72%20A%2030.00%2030.00%200%200%201%20350.00%20104.72%20L%2030.00%20104.72%20A%2030.00%2030.00%200%200%201%200%2074.72%20L%200%2064.72%20A%2030.00%2030.00%200%200%201%2030.00%2034.72%20Z%22%2F%3E%20%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20380%20104.72%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M%2030.00%2034.72%20L%20140.29%2034.72%20L%20141.16%2034.17%20L%20142.03%2034.17%20L%20142.90%2034.17%20L%20143.77%2033.62%20L%20144.65%2033.62%20L%20145.52%2033.07%20L%20146.39%2032.52%20L%20147.26%2032.52%20L%20148.14%2031.97%20L%20149.01%2031.41%20L%20149.88%2030.31%20L%20150.75%2029.76%20L%20151.62%2029.21%20L%20152.50%2028.11%20L%20153.37%2027.01%20L%20154.24%2025.35%20L%20155.11%2024.25%20L%20155.98%2022.60%20L%20156.86%2020.94%20L%20157.73%2019.29%20L%20158.60%2018.19%20L%20159.47%2016.53%20L%20160.35%2015.43%20L%20161.22%2014.33%20L%20162.09%2013.23%20L%20162.96%2012.13%20L%20163.83%2011.02%20L%20164.71%2010.47%20L%20165.58%209.37%20L%20166.45%208.82%20L%20167.32%207.72%20L%20168.20%207.16%20L%20169.07%206.61%20L%20169.94%206.06%20L%20170.81%205.51%20L%20171.68%204.96%20L%20172.56%204.41%20L%20173.43%203.86%20L%20174.30%203.31%20L%20175.17%202.76%20L%20176.05%202.20%20L%20176.92%202.20%20L%20177.79%201.65%20L%20178.66%201.10%20L%20179.53%201.10%20L%20180.41%200.55%20L%20181.28%200.55%20L%20182.15%200.55%20L%20183.02%200.00%20L%20183.89%200.00%20L%20184.77%200.00%20L%20185.64%200.00%20L%20186.51%200.00%20L%20187.38%200.00%20L%20188.26%200.00%20L%20189.13%200.00%20L%20190.00%200.00%20L%20190.87%200.00%20L%20191.74%200.00%20L%20192.62%200.00%20L%20193.49%200.00%20L%20194.36%200.00%20L%20195.23%200.00%20L%20196.11%200.00%20L%20196.98%200.00%20L%20197.85%200.55%20L%20198.72%200.55%20L%20199.59%200.55%20L%20200.47%201.10%20L%20201.34%201.10%20L%20202.21%201.65%20L%20203.08%202.20%20L%20203.95%202.20%20L%20204.83%202.76%20L%20205.70%203.31%20L%20206.57%203.86%20L%20207.44%204.41%20L%20208.32%204.96%20L%20209.19%205.51%20L%20210.06%206.06%20L%20210.93%206.61%20L%20211.80%207.16%20L%20212.68%207.72%20L%20213.55%208.82%20L%20214.42%209.37%20L%20215.29%2010.47%20L%20216.17%2011.02%20L%20217.04%2012.13%20L%20217.91%2013.23%20L%20218.78%2014.33%20L%20219.65%2015.43%20L%20220.53%2016.53%20L%20221.40%2018.19%20L%20222.27%2019.29%20L%20223.14%2020.94%20L%20224.02%2022.60%20L%20224.89%2024.25%20L%20225.76%2025.35%20L%20226.63%2027.01%20L%20227.50%2028.11%20L%20228.38%2029.21%20L%20229.25%2029.76%20L%20230.12%2030.31%20L%20230.99%2031.41%20L%20231.86%2031.97%20L%20232.74%2032.52%20L%20233.61%2032.52%20L%20234.48%2033.07%20L%20235.35%2033.62%20L%20236.23%2033.62%20L%20237.10%2034.17%20L%20237.97%2034.17%20L%20238.84%2034.17%20L%20239.71%2034.72%20L%20350.00%2034.72%20A%2030.00%2030.00%200%200%201%20380.00%2064.72%20L%20380.00%2074.72%20A%2030.00%2030.00%200%200%201%20350.00%20104.72%20L%2030.00%20104.72%20A%2030.00%2030.00%200%200%201%200%2074.72%20L%200%2064.72%20A%2030.00%2030.00%200%200%201%2030.00%2034.72%20Z%22%2F%3E%20%3C%2Fsvg%3E");
  }
  .bottombar-add{ width: 58px; height: 58px; top: -26px; }
  .bottombar-add svg{ width: 23px; height: 23px; }
  .bottombar-icon{ width: 21px; height: 21px; }
  .bottombar-item span, .bottombar-add-slot span{ font-size: 11px; letter-spacing: -.2px; }
  .site-copyright-fixed{ bottom: 4px; font-size: 12px; padding-left: 12px; gap: 6px; }
  .site-copyright-fixed img{ width: 20px; height: 20px; }
  .site-support-fixed{ bottom: 4px; font-size: 12px; padding-right: 12px; gap: 6px; }
  .site-support-fixed img{ width: 20px; height: 20px; }
}
@media (max-width: 380px){
  .site-copyright-fixed{ font-size: 11px; }
  .site-copyright-fixed img{ width: 18px; height: 18px; }
  .site-support-fixed{ display: none; }
  .app-bottombar{ padding-left: 4px; padding-right: 4px; }
  .bottombar-item span, .bottombar-add-slot span{ font-size: 10px; letter-spacing: -.3px; }
  .bottombar-icon{ width: 20px; height: 20px; }
}


/* ---------- Home page footer ---------- */
.home-site-footer{
  position:relative;
  z-index:5;
  width:100%;
  margin-top:auto;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:rgba(245,226,249,.82);
  padding:44px 0 26px;
}
.home-footer-inner{
  width:min(1132px, calc(100% - 48px));
  margin:0 auto;
}
.home-footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:70px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.home-footer-brand{
  min-width:300px;
}
.home-footer-logo-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-family:'Baloo 2','Noto Sans Georgian',sans-serif;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.5px;
}
.home-footer-logo{
  width:38px;
  height:38px;
  object-fit:contain;
}
.home-footer-brand p{
  margin-top:15px;
  color:rgba(241,221,247,.78);
  font-family:'Noto Sans Georgian',sans-serif;
  font-size:13px;
  line-height:1.7;
  font-weight:500;
}
.home-footer-links{
  display:flex;
  gap:82px;
  padding-right:28px;
}
.home-footer-col{
  min-width:118px;
}
.home-footer-col h4{
  margin:0 0 12px;
  color:#fff;
  font-family:'Noto Sans Georgian',sans-serif;
  font-size:13px;
  line-height:1.2;
  font-weight:800;
}
.home-footer-col a{
  display:block;
  padding:4px 0;
  color:rgba(241,221,247,.72);
  font-family:'Noto Sans Georgian',sans-serif;
  font-size:13px;
  line-height:1.35;
  font-weight:500;
  transition:color .18s ease;
}
.home-footer-col a:hover{color:#fff;}
.home-footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-top:20px;
  color:rgba(241,221,247,.76);
  font-family:Arial,Helvetica,sans-serif;
  font-size:12.5px;
}

@media (max-width:900px){
  .home-top-links{font-size:15px;gap:18px;}
  .home-brand{margin-top:0;}
  .home-search{margin-top:28px;}
}

@media (max-width:680px){
  .home-screen{min-height:100svh;}
  .home-header{height:56px;padding:13px 15px 0;}
  .home-top-links{gap:13px;font-size:12px;}
  .home-hero{padding:14px 16px 32px;}
  .home-logo{width:81px;height:81px;}
  .home-wordmark{font-size:47px;letter-spacing:-1.5px;}
  .home-tagline{font-size:14px;margin-top:6px;}
  .home-search{height:38px;margin-top:20px;padding:0 13px;gap:8px;border-radius:24px;}
  .home-search-icon{width:20px;height:20px;}
  .home-search-icon svg{width:19px;height:19px;}
  .home-search input{font-size:15px;}
  .home-welcome{margin-top:35px;}
  .home-welcome h1{font-size:28px;}
  .home-welcome p{font-size:19px;margin-top:8px;}
}

/* Match the other pages' mobile header: below 560px only the logo stays,
   centered, and the wordmark/tagline text is hidden (see .header-grid-simple
   .brand-left .header-wordmark-text above) so the main page lines up with
   the rest of the site. */
@media (max-width:560px){
  .home-brand-copy{ display:none; }
  .home-brand-row{ justify-content:center; }
}

@media (max-height:700px) and (min-width:681px){
  .home-hero{padding-top:4px;}
  .home-logo{width:90px;height:90px;}
  .home-wordmark{font-size:54px;}
  .home-tagline{font-size:17px;}
  .home-search{height:44px;margin-top:20px;}
  .home-welcome{margin-top:30px;}
  .home-welcome h1{font-size:34px;}
  .home-welcome p{font-size:23px;}
}

@media (max-width:680px){
  .home-site-footer{padding:34px 0 22px;}
  .home-footer-inner{width:calc(100% - 32px);}
  .home-footer-top{flex-direction:column;gap:30px;padding-bottom:24px;}
  .home-footer-brand{min-width:0;}
  .home-footer-links{width:100%;justify-content:space-between;gap:24px;padding-right:0;}
  .home-footer-bottom{font-size:11.5px;}
}

/* Phone layout: logo/wordmark on top, then the auth buttons on their own
   row, then the search field — .home-header (desktop pinned corner) is
   swapped out for .home-top-links-mobile, which sits inside the hero
   between the brand row and the search form. */
@media (max-width:680px){
  .home-header{ display:none; }

  /* Mobile only: the main logo is doubled in size and centered in the
     normal document flow (via .home-brand-row's existing
     justify-content:center) instead of being pinned to a corner.
     NOTE: needs !important to win over the global, un-scoped
     ".home-logo{width:113px !important}" rule below (which otherwise wins
     over any plain, non-!important override regardless of specificity —
     this is why earlier attempts to resize this only moved the logo
     without actually resizing it). This selector is scoped to .home-hero,
     which only exists on index.html, so no other page is affected. */
  .home-hero .home-logo{
    position:relative;
    z-index:1;
    width:76px !important;
    height:76px !important;
  }

  /* Mobile only: the auth block (Sign up/Sign in, or the logged-in
     name+photo) sits in the top-right corner of the hero, same as before,
     but via position:absolute (anchored to .home-hero, which is already
     position:relative) instead of position:fixed — so it now scrolls away
     with the page and disappears on scroll-down, exactly like the logo,
     instead of staying frozen on screen. */
  .home-top-links-mobile{
    position:absolute;
    top:12px;
    right:14px;
    z-index:50;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-end;
    row-gap:0;
    margin-top:0;
  }
  /* Restore a normal floating dropdown (instead of the in-flow accordion
     meant for a centered, in-document layout) now that this block is a
     corner element. */
  .home-top-links-mobile .home-profile-menu{
    flex-direction:row;
    align-items:center;
  }
  .home-top-links-mobile .name-menu-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    left:auto;
    align-self:auto;
    width:min(240px, calc(100vw - 28px));
    min-width:210px;
    margin-top:0;
    max-height:none;
    padding:8px;
    overflow:visible;
    transform:translateY(-6px);
    opacity:0;
    visibility:hidden;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  }
  .home-top-links-mobile .name-menu-dropdown.open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
  }
}

@media (prefers-reduced-motion: reduce){
  .home-page{animation:none;}
}

/* Upper-right header actions: pill buttons matching the reference */
.home-top-links{
  gap:12px;
  align-items:center;
}
.home-top-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  color:#fff !important;
  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  font-weight:700;
  line-height:1;
  text-shadow:none;
  box-shadow:none;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.home-top-links a:hover{
  opacity:1;
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

@media (max-width:900px){
  .home-top-links{gap:8px;}
  .home-top-links a{min-height:38px;padding:0 15px;font-size:13px;}
}

@media (max-width:680px){
  .home-top-links{gap:6px;}
  .home-top-links a{min-height:34px;padding:0 11px;font-size:11px;}
}

/* Georgian mobile header: "რეგისტრაცია"/"შესვლა" run noticeably longer than
   "Sign up"/"Sign in", so side-by-side (the default row layout above) gets
   cramped in the top-right corner on a phone. For Georgian only, stack them
   — registration on top, sign-in below — instead of shrinking the text
   further. English keeps the row layout since it already fits comfortably.
   :has() scopes this to the signed-out state (register.html/login.html
   links) only — the signed-in profile menu keeps its normal row layout. */
@media (max-width:680px){
  html[lang="ka"] .home-top-links-mobile:has(#homeSignUp){
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
}

/* ---------- Home profile in top-right auth area ---------- */
.home-profile-menu{ position:relative; display:inline-flex; align-items:center; }
.home-top-links a.home-profile-link{
  border:none;
  background:transparent;
  padding:0;
  min-height:auto;
}
.home-profile-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#fff;
  font-weight:700;
  line-height:1;
  transition:opacity .15s ease, transform .15s ease;
}
.home-profile-link:hover{
  opacity:.9;
  transform:translateY(-1px);
}
.home-profile-avatar{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:1.5px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.14);
}
.home-profile-initial{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:14px;
  font-weight:800;
}
.home-profile-chevron{ opacity:.8; transition: transform .18s ease; }
.home-profile-link[aria-expanded="true"] .home-profile-chevron{ transform: rotate(180deg); }
@media (max-width:680px){
  .home-profile-link{gap:7px;}
  .home-profile-avatar{width:32px;height:32px;min-width:32px;}
  /* Mobile only, top-right auth block: drop the username text next to the
     photo, keeping just the avatar (+ chevron). The name is always the
     first child span emitted before the avatar/chevron markup. */
  .home-top-links-mobile .home-profile-link > span:first-child{ display:none; }
}

/* Dropdown panel opened from the home-page name+avatar link. */
.name-menu-dropdown{
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:210px; padding:8px;
  background: rgba(28,14,52,0.45);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index:60;
}
.name-menu-dropdown.open{ opacity:1; visibility:visible; transform: translateY(0); }
.name-menu-dropdown a, .name-menu-dropdown button{
  display:flex; align-items:center; gap:6px;
  color:#fff; font-size:13.5px; font-weight:600; font-family:inherit;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:11px 14px; border-radius:9px; width:100%;
}
.name-menu-dropdown a:hover, .name-menu-dropdown button:hover{ background: rgba(255,255,255,0.12); }
.name-menu-dropdown a.dropdown-disabled{
  color: rgba(255,255,255,0.45); cursor:default; pointer-events:none;
}
html[lang="ka"] .name-menu-dropdown a.dropdown-become-tasker,
html[lang="ka"] .name-menu-dropdown a.dropdown-current-work{
  justify-content:center; text-align:center;
}
.name-menu-dropdown .home-profile-logout{
  justify-content:center; text-align:center;
  color:#FF5C6C; font-weight:700;
}
.name-menu-dropdown .home-profile-logout:hover{ background: rgba(255,92,108,0.14); }

/* ---------- Language switcher (top-left, mirrors the profile menu on the right) ---------- */
.home-lang-slot{ display:flex; align-items:center; position:relative; }
.home-lang-slot-mobile{ display:none; }
.home-lang-flag{ font-size:19px; line-height:1; display:inline-flex; }
.home-lang-flag-img{ width:19px; height:19px; border-radius:50%; object-fit:cover; display:block; }
.home-lang-code{ font-family:Arial, Helvetica, sans-serif; }
.name-menu-dropdown-left{ left:0; right:auto; }
.home-lang-option{
  display:flex; align-items:center; gap:8px;
  color:#fff; font-size:13.5px; font-weight:600; font-family:inherit;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:11px 14px; border-radius:9px; width:100%;
}
.home-lang-option:hover{ background: rgba(255,255,255,0.12); }
.home-lang-option.is-active{ background: rgba(255,255,255,0.16); }
@media (max-width:680px){
  .home-lang-slot{ display:none; }
  /* Mobile only: sits in the top-left corner of the hero, same as before,
     but via position:absolute (anchored to .home-hero, which is already
     position:relative) instead of position:fixed — so it now scrolls away
     with the page and disappears on scroll-down, exactly like the logo,
     instead of staying frozen on screen. height:34px matches the
     sign-up/sign-in pill height (and is close enough to the logged-in
     avatar's 32px) so that, combined with the shared align-items:center
     from .home-lang-slot, the "Eng" label lines up on the same visual row
     as the username/auth block on the right, which sits at the same
     top:12px offset. */
  .home-lang-slot-mobile{
    display:flex;
    justify-content:flex-start;
    position:absolute;
    top:12px;
    left:14px;
    height:34px;
    margin-top:0;
    z-index:50;
  }
  .home-lang-slot-mobile .home-lang-flag-img{ width:16px; height:16px; }
  .home-lang-slot-mobile .home-lang-code{ font-size:13px; }
  .home-lang-slot-mobile .home-profile-link{ gap:6px; }
  .home-lang-slot-mobile .name-menu-dropdown{
    position:absolute; top:calc(100% + 10px); left:0; right:auto;
    transform:translateY(-6px);
    max-height:none; width:auto; min-width:150px; padding:8px;
    margin-top:0;
  }
  .home-lang-slot-mobile .name-menu-dropdown.open{
    transform:translateY(0);
    max-height:260px; margin-top:0;
  }
}

/* მობილურზე dropdown აღარ ჩნდება overlay-ის სახით (რაც საძიებო ველსა და
   ქვედა კონტენტს ფარავდა) — ის ახლა ჩვეულებრივ დოკუმენტის დინებაშია და,
   გახსნისას, სახელის ღილაკის ქვემოთ ეშვება ისე, რომ საძიებო ველი და
   მასზე დაბლა მდებარე ყველაფერი ქვევით გადაინაცვლებს (accordion-ის ეფექტი). */
@media (max-width:680px){
  .home-profile-menu{
    flex-direction:column;
    align-items:center;
  }
  .name-menu-dropdown{
    position:static;
    align-self:center;
    width:min(300px, calc(100vw - 32px));
    min-width:0;
    margin-top:0;
    max-height:0;
    padding:0 8px;
    overflow:hidden;
    transform:none;
    transition: max-height .22s ease, opacity .16s ease, margin-top .22s ease, padding .22s ease, visibility .22s ease;
  }
  .name-menu-dropdown.open{
    margin-top:10px;
    max-height:260px;
    padding:8px;
  }
}

/* Auth pages: use the exact same logo + wordmark treatment as the home page */
.auth-brand-header{
  position: relative;
  background: transparent;
}
.auth-brand{
  display:flex;
  justify-content:center;
  padding: 22px 20px 0;
}
.auth-brand .home-brand-row{
  gap:11px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.auth-brand .home-logo{
  width:113px;
  height:113px;
  flex:0 0 113px;
  object-fit:contain;
}
.auth-brand .home-wordmark{
  font-size:66px;
  line-height:.84;
}
.auth-brand .home-tagline{
  font-size:21px;
}
@media (max-width:680px){
  .auth-brand{
    padding-top:16px;
  }
  .auth-brand .home-logo{
    width:82px;
    height:82px;
    flex-basis:82px;
  }
  .auth-brand .home-wordmark{
    font-size:48px;
  }
  .auth-brand .home-tagline{
    font-size:16px;
    margin-top:6px;
  }
}

/* Exact requested Getask home brand dimensions */
.home-logo{
  width:113px !important;
  height:113px !important;
  object-fit:contain;
}
.home-wordmark{
  width:247.86px !important;
  height:55.44px !important;
  line-height:55.44px !important;
}
.home-tagline{
  /* width:0 (და არა auto) განზრახ არის: სხვანაირად ეს !important წესი
     (რომელიც cascade-ში ბოლოა და ანულებს ზემოთა .home-tagline-ის
     width:0 ტრიკს) ტექსტის რეალურ სიგანეს დაუბრუნებდა layout-ს, რაც
     ენის ცვლილებისას (მოკლე ინგლისური ტექსტიდან გრძელ ქართულზე და
     პირიქით) კვლავ გადაანაცვლებდა/გააფართოებდა .home-brand-row-ს და,
     მაშასადამე, თან წაიყვანდა ლოგოსაც. width:0 + white-space:nowrap +
     overflow:visible ინარჩუნებს ტექსტის სრულ ხილვადობას (უბრალოდ
     "გადის" თავისი 0-სიგანის ყუთის მიღმა მარჯვნივ), მაგრამ აღარ
     მონაწილეობს row-ის საერთო სიგანის (და, შესაბამისად, ლოგოს
     ცენტრირებული პოზიციის) გამოთვლაში. */
  width:0 !important;
  max-width:none !important;
  height:auto !important;
  line-height:21px !important;
  white-space:nowrap !important;
  overflow:visible !important;
}

/* ==========================================================================
   Getask — Messaging / notifications (added to connect the site to the
   Android app's real-time "messages" + "stars" Firestore collections)
   ========================================================================== */
.unread-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#FF3B5C; margin-left:6px; vertical-align:middle;
  box-shadow:0 0 0 2px rgba(255,59,92,0.25);
}
.unread-dot[hidden]{ display:none; }
.nav-msg-link{ position:relative; }

.messages-shell{
  display:grid; grid-template-columns: 340px 1fr; gap:20px;
  min-height:60vh; align-items:start;
}
.inbox-panel{
  background:#fff; border-radius: var(--radius-l); border:1px solid var(--line);
  box-shadow: var(--shadow-card); overflow:hidden;
}
.inbox-tabs{ display:flex; border-bottom:1.5px solid var(--line); }
.inbox-tabs button{
  flex:1; padding:14px 10px; border:none; background:none; cursor:pointer;
  font-weight:700; font-size:13.5px; color: var(--text-mute); font-family:inherit;
}
.inbox-tabs button.active{ color: var(--magenta); box-shadow: inset 0 -2px 0 var(--magenta); }
.inbox-list{ max-height:64vh; overflow-y:auto; overscroll-behavior:contain; }
.inbox-item{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid var(--line); cursor:pointer; transition: background .15s ease;
  position:relative;
}
.inbox-item:hover{ background: var(--cream); }
.inbox-item.selected{ background:#FBF2F8; }
.inbox-avatar{
  width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none;
  background: var(--brand-gradient); display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:15px;
}
.inbox-meta{ flex:1; min-width:0; }
.inbox-meta .row1{ display:flex; justify-content:space-between; gap:8px; }
.inbox-meta .name{ font-weight:700; font-size:14px; color: var(--text-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox-meta .time{ font-size:11.5px; color: var(--text-mute); flex:none; }
.inbox-meta .snippet{ font-size:12.5px; color: var(--text-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.inbox-item .unread-mark{ width:9px; height:9px; border-radius:50%; background: var(--magenta); flex:none; }
.inbox-star{ background:none; border:none; cursor:pointer; font-size:32px; color: var(--gold); flex:none; padding:4px; }
.inbox-empty{ padding:50px 20px; text-align:center; color: var(--text-mute); font-size:13.5px; }

.chat-panel{
  background:#fff; border-radius: var(--radius-l); border:1px solid var(--line);
  box-shadow: var(--shadow-card); display:flex; flex-direction:column;
  height:74vh; overflow:hidden;
}
.chat-header{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1.5px solid var(--line); flex:none; }
.chat-header .inbox-avatar{ width:38px; height:38px; font-size:13px; }
.chat-header .who strong{ display:block; font-size:14.5px; color: var(--text-dark); }
.chat-header .who span{ font-size:12px; color: var(--text-mute); }
.chat-header .btn{ margin-left:auto; }
.chat-header .chat-header-break{ display:none; }

/* ---------- Chat header "⋮" menu (profile / delete conversation / block) ---------- */
.chat-menu{ position:relative; flex:none; }
.chat-menu-toggle{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:#fff;
  color: var(--text-dark);
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.chat-menu-toggle svg{ width:18px; height:18px; }
.chat-menu-toggle:hover,
.chat-menu-toggle[aria-expanded="true"]{ border-color: var(--magenta); background:#FFF4FA; color: var(--magenta); }

.chat-menu-dropdown{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:220px; padding:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.9,.3,1.3), visibility .18s ease;
  z-index:60;
}
.chat-menu-dropdown.open{ opacity:1; visibility:visible; transform: translateY(0) scale(1); }
.chat-menu-dropdown button{
  display:flex; align-items:center; gap:10px;
  color: var(--text-dark); font-size:13.5px; font-weight:600; font-family:inherit;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:10px 12px; border-radius:9px; width:100%;
}
.chat-menu-dropdown button svg{ width:18px; height:18px; flex:none; color: var(--text-mute); }
.chat-menu-dropdown button:hover{ background: var(--cream); }
.chat-menu-dropdown .chat-menu-danger{ color:#D33B5E; }
.chat-menu-dropdown .chat-menu-danger svg{ color:#D33B5E; }
.chat-menu-dropdown .chat-menu-danger:hover{ background:#FDEEF1; }
.chat-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:18px 20px; display:flex; flex-direction:column; gap:10px;
}
.chat-bubble{ max-width:72%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.5; }
.chat-bubble.sent{ align-self:flex-end; background: var(--brand-gradient); color:#fff; border-bottom-right-radius:4px; }
.chat-bubble.received{ align-self:flex-start; background: var(--cream); color: var(--text-dark); border-bottom-left-radius:4px; }
.chat-bubble.hire{ border:1.5px dashed var(--gold); background:#FFF9EA; color: var(--text-dark); }
.chat-bubble.hire strong{ display:block; margin-bottom:6px; }
.chat-bubble.hire button{ margin-top:8px; }
.chat-empty{ margin:auto; text-align:center; color: var(--text-mute); font-size:13.5px; padding:0 30px; }
.chat-input-row{ display:flex; gap:10px; padding:14px 16px; border-top:1.5px solid var(--line); flex:none; }
.chat-input-row input{
  flex:1; border:1.5px solid var(--line); border-radius: var(--radius-pill); padding:11px 16px;
  font-size:13.5px; font-family:inherit; outline:none;
}
.chat-input-row input:focus{ border-color: var(--magenta); }

.hire-picker-list{ display:flex; flex-direction:column; gap:8px; padding:16px 20px; max-height:50vh; overflow-y:auto; }
.hire-picker-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px; border:1.5px solid var(--line); border-radius: var(--radius-m);
  cursor:pointer; background:#fff;
}
.hire-picker-item:hover{ border-color: var(--magenta); }
.modal-overlay{
  position:fixed; inset:0; background:rgba(21,12,46,0.55); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal-box{
  background:#fff; border-radius: var(--radius-l); width:min(460px,100%);
  max-height:82vh; display:flex; flex-direction:column; overflow:hidden;
  box-shadow: var(--shadow-pop);
}
.modal-box .modal-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1.5px solid var(--line); flex:none; }
.modal-box .modal-head h3{ font-size:15.5px; color: var(--text-dark); }
.modal-box .modal-close{ background:none; border:none; font-size:20px; cursor:pointer; color: var(--text-mute); }

/* .modal-box-ს overflow:hidden + max-height:82vh აქვს, მაგრამ თავად შიგთავსს
   (მაგ. #partnerProfileBody) სქროლი არ ჰქონდა — შედეგად, როცა შემსრულებლის
   პროფილს "დატოვებული შეფასებები" დაემატა, სრული სია ვეღარ ეტეოდა და
   უბრალოდ იჭრებოდა/იმალებოდა ხილული არეს მიღმა, ფანჯარაც ვერ იზრდებოდა
   82vh-ს იქით. აქცევს მას ისევე სქროლვადად, როგორც .chat-scroll-ია. */
.modal-box-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }

/* ---------- Leave-a-review modal: 3 equally-spaced icon choices ---------- */
.review-choice-row{ display:flex; gap:10px; }
.review-choice-btn{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 8px; border-radius: var(--radius-m); border:1.5px solid var(--line);
  background:rgba(255,255,255,0.06); cursor:pointer; transition: border-color .15s ease, background .15s ease;
}
.review-choice-btn img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.review-choice-btn span{ font-size:12.5px; font-weight:700; color: var(--text-on-dark); }
.review-choice-btn:hover{ border-color: var(--gold); }
.review-choice-btn.selected{ border-color: var(--gold); background:rgba(251,201,76,0.14); }

/* ---------- Account tab: received reviews list ---------- */
.review-item{ padding:14px 0; border-bottom:1px solid var(--glass-border); }
.review-item:last-child{ border-bottom:none; }
.review-item-top{ display:flex; align-items:center; gap:10px; }
.review-item-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; }
.review-item-avatar-fallback{
  display:flex; align-items:center; justify-content:center;
  background: var(--brand-gradient); color:#fff; font-weight:700; font-size:14px;
}
.review-item-namewrap{ flex:1 1 auto; min-width:0; }
.review-item-name{ font-weight:700; font-size:14px; color: var(--text-on-dark); }
.review-item-time{ font-size:12.5px; color: var(--text-on-dark-mute); }
.review-item-rating-icon{ width:26px; height:26px; border-radius:50%; flex:none; object-fit:cover; }
.review-item-comment{ margin-top:8px; font-size:13.5px; line-height:1.5; color: var(--text-on-dark); white-space:pre-wrap; }

/* დაახლ. 5 შეფასების შემდეგ გარე ბოქსი აღარ იზრდება — სია შიგნით სქროლავს */
.account-reviews-list{
  max-height:400px; overflow-y:auto; overscroll-behavior:contain;
  padding-right:0;
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,0.5) rgba(255,255,255,0.05);
}
.account-reviews-list::-webkit-scrollbar{ width:8px; }
.account-reviews-list::-webkit-scrollbar-track{ background: rgba(255,255,255,0.05); }
.account-reviews-list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.5); border-radius:4px; }
.account-reviews-list::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.65); }
.account-reviews-list::-webkit-scrollbar-button{ background: rgba(255,255,255,0.5); height:8px; }

@media (max-width: 860px){
  .messages-shell{ grid-template-columns:1fr; }
  .chat-panel{ display:none; }
  .chat-panel.open{ display:flex; }
  .inbox-panel.hidden-mobile{ display:none !important; }
}

/* ---------- Unified dark translucent glass boxes ---------- */
:root{
  --glass-box: rgba(21, 12, 46, 0.52);
  --glass-box-strong: rgba(21, 12, 46, 0.68);
  --glass-border: rgba(255,255,255,0.16);
}

/* Keep form controls readable, while making card/container surfaces match the
   dark translucent listing-card treatment across the entire site. */
.search-card,
.chip,
.task-card,
.form-card,
.table-wrap,
.stat-card,
.detail-main,
.detail-side,
.inbox-panel,
.chat-panel,
.hire-picker-item,
.modal-box,
.upload-box,
.profile-card,
.profile-main,
.profile-side,
.settings-card,
.panel-card,
.info-card,
.content-card,
.category-card{
  background: var(--glass-box) !important;
  border-color: var(--glass-border) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.task-card:hover,
.hire-picker-item:hover,
.category-card:hover{
  background: var(--glass-box-strong) !important;
}

/* Text inside dark surfaces */
.task-card h3,
.task-card .budget,
.detail-main h1,
.detail-main h2,
.detail-main h3,
.detail-side h1,
.detail-side h2,
.detail-side h3,
.stat-card strong,
.inbox-meta .name,
.chat-header .who strong,
.modal-box .modal-head h3,
.modal-box .field label,
.hire-picker-item,
.profile-card h1,
.profile-card h2,
.profile-card h3,
.form-card h1,
.form-card h2,
.form-card h3,
.info-card h1,
.info-card h2,
.info-card h3,
.form-card .field label,
.category-card span{
  color: var(--text-on-dark) !important;
}

.form-card .field-hint,
.upload-placeholder{
  color: var(--text-on-dark-mute) !important;
}

.task-card .desc,
.stat-card span,
.inbox-meta .time,
.inbox-meta .snippet,
.inbox-empty,
.chat-header .who span,
.chat-empty,
.detail-main p,
.detail-side p{
  color: var(--text-on-dark-mute) !important;
}

.inbox-tabs button{ color: var(--text-on-dark) !important; }
.inbox-tabs button.active{ color: var(--magenta) !important; }

.chip{ color: var(--text-on-dark-mute) !important; }
.chip:hover,.chip.active{ color:#fff !important; }

.inbox-item:hover{ background: rgba(255,255,255,.08) !important; }
.inbox-item.selected{ background: rgba(224,57,138,.16) !important; }
.chat-bubble.received{ background: rgba(255,255,255,.10); color: var(--text-on-dark); }
.chat-bubble.hire{ background: rgba(251,201,76,.12); color: var(--text-on-dark); }

/* Inputs remain light for readability. */
.search-card input,
.chat-input-row input,
input, textarea, select{
  color: var(--text-dark);
}

/* Admin table body follows the same dark glass surface. */
tbody tr:hover{ background: rgba(255,255,255,.07) !important; }

/* ---------- Task detail page: status badge + light text ---------- */
.detail-side .status-open{
  background: transparent !important;
  color: var(--ok) !important;
}

.detail-side .status-progress{
  background: transparent !important;
  border: none !important;
  color: #FBC94C !important;
}

.detail-side .status-done{
  background: transparent !important;
  border: none !important;
  color: #C9B6F2 !important;
}

.detail-main,
.detail-side,
.detail-main p,
.detail-side p,
.detail-side strong,
.detail-side label,
.detail-side h1,
.detail-side h2,
.detail-side h3,
.detail-main h1,
.detail-main h2,
.detail-main h3{
  color: #fff !important;
}

.detail-side .status-open{
  color: var(--ok) !important;
}


/* ---------- Messages page: no page-level scroll ----------
   The messages screen should behave like a fixed app pane: the document
   itself never scrolls, only the inbox list and the open chat scroll
   internally. Scoped to desktop/tablet — the "Mobile unified page
   scrolling" block below intentionally keeps a single document scroll on
   phones and is left as-is. */
@media (min-width: 861px){
  body.messages-page{
    height:100vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  body.messages-page .site-header{ flex:none; }
  body.messages-page .panel-wrap{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    /* Extra bottom padding so the fixed floating bottom nav bar (which
       sits ~92px tall off the viewport bottom, plus the round "+" button
       that pokes up another ~30px above that) never covers the chat
       input row or the last inbox item. Slightly taller top padding also
       nudges the whole panel down a touch. */
    padding:34px 0 140px;
    display:flex;
  }
  body.messages-page .panel-wrap > .container{
    display:flex;
    flex-direction:column;
    min-height:0;
    height:100%;
  }
  body.messages-page .messages-shell{
    flex:1 1 auto;
    min-height:0;
    height:100%;
    align-items:stretch;
  }
  body.messages-page .inbox-panel{
    height:100%;
    display:flex;
    flex-direction:column;
  }
  body.messages-page .inbox-list{
    flex:1 1 auto;
    min-height:0;
    max-height:none;
  }
  body.messages-page .chat-panel{
    height:100%;
  }

  /* Desktop only: the "back to inbox" button exists for the mobile
     single-column view where the chat replaces the inbox list. On
     desktop the inbox stays visible alongside the open chat, so the
     button is unnecessary — hide it (overriding the inline style JS
     sets when a conversation opens) and let the avatar/name slide all
     the way to the box's left edge. */
  body.messages-page #btnBackToInbox{
    display: none !important;
  }
}

/* ---------- Mobile unified page scrolling ----------
   On phones the document itself is the only vertical scroller.
   Headers, side panels and floating actions move together with the page. */
@media (max-width: 860px){
  html, body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:auto;
  }

  .site-header{
    position:relative;
    top:auto;
    z-index:50;
  }

  .detail-side{
    position:static;
    top:auto;
  }

  .home-page{
    position:relative;
    height:auto;
    min-height:100svh;
    overflow:visible;
    overflow-x:hidden;
    overflow-y:visible;
  }

  .home-screen{
    height:auto;
    overflow:visible;
  }

  .chat-scroll{
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Chat header overflow fix (mobile only): the back button, avatar,
     name/location and the "offer job" button used to sit on one
     non-wrapping row. On narrow phones their combined natural width is
     wider than the screen, so the row overflowed past the right edge of
     the box and got clipped invisible by the page's overflow-x:hidden.
     Wrapping the row and letting the name/location truncate keeps
     everything inside the visible box. Desktop/tablet (>860px) is
     untouched. */
  .chat-header{
    flex-wrap: wrap;
    row-gap: 0;
  }
  .chat-header .btn{
    margin-left: 0;
  }
  .chat-header .who{
    min-width: 0;
    flex: 1 1 auto;
  }
  .chat-header .who strong,
  .chat-header .who span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Mobile: next to the avatar only the (first) name — no location line. */
  .chat-header #chatPartnerLocation{
    display: none;
  }
  /* Row 1: back / avatar / name. Row 2: compact "offer job" button with the
     3-dot menu right beside it (button no longer stretches full width). The
     .chat-header-break element forces the line break between the two rows. */
  .chat-header .chat-header-break{
    display: block;
    flex: 0 0 100%;
    height: 0;
    order: 1;
  }
  .chat-header #btnOfferHire{
    flex: 0 0 auto;
    order: 2;
    margin-top: 8px;
  }
  .chat-header .chat-menu{
    order: 3;
    margin-top: 8px;
    margin-left: auto;
  }
  .chat-menu-dropdown{
    right: 0;
    min-width: 200px;
  }

}

/* Notifications page, mobile only: freeze the box to the viewport
   instead of letting the document scroll (same approach as the
   desktop/tablet rule above) — the inbox / open chat panel stays put
   in one place right under the (now logo-less) header, sized so the
   floating bottom nav bar never slides over it, and only the inbox
   list / open chat scroll internally. Desktop/tablet (>860px) is
   untouched. */
@media (max-width: 860px){
  body.messages-page{
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.messages-page .site-header{ flex: none; }
  body.messages-page .panel-wrap{
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    padding: 6px 0 150px;
  }
  body.messages-page .panel-wrap > .container{
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }
  body.messages-page .messages-shell{
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    align-items: stretch;
  }
  body.messages-page .inbox-panel{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  body.messages-page .inbox-list{
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  body.messages-page .chat-panel{
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
}

/* ==========================================================================
   Admin Panel (geadminge.html) — additive only, nothing above this block was
   touched. Reuses existing tokens (--ink, --glass-box, --radius-*,
   --shadow-card, --brand-gradient) so it matches the site's dark, glass
   SaaS-dashboard look instead of introducing a second design language.
   ========================================================================== */
.admin-panel-wrap{ padding-top: 24px; }
/* მომხმარებლების (და ზოგადად ადმინ პანელის) ცხრილის ყუთი უფრო მარჯვნივ რომ
   გაიწიოს/გაიზარდოს ფართო ეკრანებზე — ადმინ პანელს საკუთარი, საიტის
   საერთო .container-ზე (max-width:1180px) უფრო ფართო max-width ეძლევა. */
.admin-panel-wrap .container{ max-width: 1440px; }

.admin-shell{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap:24px;
  align-items:start;
}

.admin-sidebar{
  background: var(--glass-box);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  padding:18px 14px;
  /* გვერდის სკროლისას გვერდით მენიუც ზევით მიჰყვება (არ არის გაშეშებული) */
  position: static;
}

.admin-role-badge{
  font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color: var(--text-on-dark-mute);
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  padding:6px 12px;
  display:inline-block;
  margin-bottom:16px;
}

.admin-nav{ display:flex; flex-direction:column; gap:4px; }
.admin-nav a{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius: var(--radius-m);
  color: var(--text-on-dark-mute); font-size:14px; font-weight:600;
  text-decoration:none; transition: background .15s, color .15s;
}
.admin-nav a:hover{ background: rgba(255,255,255,0.08); color: var(--text-on-dark); }
.admin-nav a.active{ background: var(--brand-gradient); color:#fff; }
.admin-nav a span{ font-size:15px; }

/* Unread-notifications red dot, bottom-right of the nav button — same look
   as the site's .unread-dot (messages) indicator. */
.admin-nav-dot{
  position:absolute; right:10px; bottom:8px;
  width:8px; height:8px; border-radius:50%;
  background:#FF3B5C; box-shadow:0 0 0 2px rgba(255,59,92,0.25);
}
.admin-nav-dot[hidden]{ display:none; }

.admin-main{ min-width:0; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.admin-topbar-title{ font-size:20px; font-weight:700; color: var(--text-on-dark); }
.admin-topbar-user{
  font-size:13px; color: var(--text-on-dark-mute);
  background: var(--glass-box); border:1px solid var(--glass-border);
  border-radius:999px; padding:8px 14px;
}

.admin-section-body table{ width:100%; border-collapse:collapse; }
.admin-section-body th, .admin-section-body td{
  text-align:left; padding:12px 16px; font-size:13.5px; border-bottom:1px solid var(--line);
}
.admin-section-body th{ color: var(--text-on-dark-mute); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.admin-section-body td{ color: var(--text-on-dark); }

.badge-active{ background:#E7F7EE; color:#1E8E4F; }
.badge-blocked{ background:#FDE9EC; color:#D33B5E; }

@media (max-width: 860px){
  .admin-shell{ grid-template-columns: 1fr; }
  .admin-sidebar{ position:static; }
  .admin-nav{ flex-direction:row; flex-wrap:wrap; }
}

/* ==========================================================================
   Cookie consent (js/cookies.js) — banner, preferences modal, reopen FAB.
   z-index 9000+ ერჩევა ყველა სხვა overlay-ზე მაღლა (bottombar-ი 70-ია),
   რომ თანხმობის ბანერი/მოდალი ყოველთვის თავზე იყოს.
   ========================================================================== */
.cookie-banner{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9000;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--glass-box-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--glass-border);
  box-shadow: var(--shadow-pop);
}
.cookie-banner-inner{
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cookie-banner-copy{ flex: 1 1 320px; min-width: 240px; }
.cookie-banner-title{ display:block; font-size:15px; color:#fff; margin-bottom:4px; }
.cookie-banner-text{ margin:0; font-size:13px; line-height:1.5; color: var(--text-on-dark-mute); }
.cookie-banner-actions{
  display:flex; gap:10px; flex-wrap:wrap; flex: 0 0 auto;
}
@media (max-width: 640px){
  .cookie-banner-actions{ width:100%; }
  .cookie-banner-actions .btn{ flex:1 1 auto; }
}

.cookie-modal-overlay{
  position: fixed; inset: 0;
  z-index: 9100;
  background: rgba(9, 5, 22, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cookie-modal{
  width: min(480px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--ink-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
  padding: 26px;
}
.cookie-modal-title{ margin:0 0 8px; font-size:19px; color:#fff; }
.cookie-modal-intro{ margin:0 0 18px; font-size:13.5px; line-height:1.5; color: var(--text-on-dark-mute); }
.cookie-category{
  padding: 14px 0;
  border-top: 1px solid var(--glass-border);
}
.cookie-category:last-of-type{ border-bottom: 1px solid var(--glass-border); }
.cookie-category-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.cookie-category-title{ font-size:14.5px; font-weight:600; color:#fff; }
.cookie-category-desc{ margin:6px 0 0; font-size:12.5px; line-height:1.5; color: var(--text-on-dark-mute); }
.cookie-category-desc em{ font-style: normal; color: var(--text-on-dark-mute); opacity:.8; }

.cookie-toggle{
  position: relative;
  flex: 0 0 auto;
  width: 42px; height: 24px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.18);
  border: 1px solid var(--glass-border);
  padding: 0;
  cursor: pointer;
  transition: background .15s ease;
}
.cookie-toggle[data-on="1"]{ background: var(--magenta); }
.cookie-toggle-knob{
  position:absolute; top:2px; left:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  transition: transform .15s ease;
}
.cookie-toggle[data-on="1"] .cookie-toggle-knob{ transform: translateX(18px); }
.cookie-toggle-locked{
  background: rgba(47, 174, 106, 0.55);
  cursor: default;
}
.cookie-toggle-locked .cookie-toggle-knob{ transform: translateX(18px); }

.cookie-modal-actions{
  display:flex; justify-content:flex-end; gap:10px; margin-top:18px;
}


/* ---------- Instruction button ---------- */
/* Desktop only: plain text link, right next to the language switcher */
.home-header-left{ display:flex; align-items:center; gap:22px; }
.home-instruction-link{
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:opacity .18s ease, transform .18s ease;
}
.home-instruction-link:hover{ opacity:.72; transform:translateY(-1px); }

/* Mobile only: pill button (same look as the sign-up button), centered under the search field */
.home-instruction-mobile{ display:none; }
@media (max-width:680px){
  .home-instruction-link{ display:none; }
  .home-instruction-mobile{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin-top:14px;
  }
}