/* ==========================================================================
   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.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@400;500;600;700;800;900&family=Baloo+2:wght@600;700;800&display=swap');

: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;
  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); }
.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:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ---------- Header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: transparent;
}
.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 .wordmark-img{ width:248px; height:55px; object-fit:contain; }
@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 .wordmark-img{ width:158px; height:35px; }
}
@media (max-width: 560px){
  .header-grid-simple .brand-left .wordmark-img{ display:none; }
}

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

.name-menu{ position:relative; justify-self:end; }
.name-menu-toggle{
  display:flex; align-items:center; gap:9px;
  background:none; border:none; cursor:pointer;
  color:#fff; font-weight:700; font-size:15px; font-family:inherit; padding:8px 4px;
}
.name-menu-toggle .name-menu-chevron{ transition: transform .18s ease; opacity:.85; }
.name-menu-toggle[aria-expanded="true"] .name-menu-chevron{ transform: rotate(180deg); }
.name-menu-dropdown{
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:200px; padding:8px;
  background: rgba(28,14,52,0.78);
  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); }

/* ---------- 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: 16px; }
.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; }
.task-card .place{ font-size:12.5px; color: var(--text-mute); display:flex; align-items:center; gap:5px; }
.task-card .status{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius: var(--radius-pill); }
.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; }
.field-error{ font-size:12.5px; color:#D33B5E; margin-top:5px; 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; }

.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; }
.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; }
/* ---------- 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;
}
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .row-2{ grid-template-columns:1fr; } }

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

/* ---------- Tabs (profile) ---------- */
.tabs{ display:flex; gap:8px; margin-bottom:26px; border-bottom:1.5px solid var(--line); }
.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;
}
.tab-btn.active{ color: var(--magenta); border-color: var(--magenta); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

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

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

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

.home-screen{
  position:relative;
  width:100%;
  min-height:130svh;
  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:flex-end;
  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; }

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

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

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

/* ---------- Floating "add listing" button ---------- */
.fab-add{
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-pop);
  z-index: 60;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fab-add svg{ width: 28px; height: 28px; }
.fab-add:hover{ transform: translateY(-2px) scale(1.04); box-shadow: 0 24px 56px rgba(42,27,94,0.32); }
.fab-add:active{ transform: translateY(0) scale(0.98); }
@media (max-width: 680px){
  .fab-add{ right: 18px; bottom: 18px; width: 56px; height: 56px; }
  .fab-add svg{ width: 24px; height: 24px; }
}

/* ---------- 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:125svh;}
  .home-header{height:56px;padding:13px 15px 0;}
  .home-top-links{gap:13px;font-size:12px;}
  .home-hero{padding:4px 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;}
}

@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; }
  .home-top-links-mobile{
    display:flex;
    flex-wrap: wrap;
    justify-content:center;
    row-gap:8px;
    margin-top:18px;
  }
}

@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;}
}

/* ---------- Home profile in top-right auth area ---------- */
.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;
}
@media (max-width:680px){
  .home-profile-link{gap:7px;}
  .home-profile-avatar{width:32px;height:32px;min-width:32px;}
}

/* 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:247.86px !important;
  height:21px !important;
  line-height:21px !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);
}
.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:16px; 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-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;
}
.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); }
.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); }

@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; }
}