/* Auto Trader UAE - Global front styles (CLEAN + SINGLE SOURCE) */

:root{
  --brand:#b30018;
  --text:#111827;
  --muted:#4b5563;
  --bg:#f3f4f6;
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow: 0 18px 40px rgba(0,0,0,.12);
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

.site-main{ background:transparent; flex:1; }
.page-inner{ background:var(--bg); }
.page-home{ background:var(--bg); }

/* ===========================
   HEADER (single source of truth)
   =========================== */

.site-header{
  background:var(--card);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:50;
}

/* Row 1 */
.header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:12px 0;
}

.header-left{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Hamburger (desktop hidden) */
.nav-toggle{
  min-width:44px;
  min-height:44px;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

/* Logo */
.site-brand img{
  height:34px;
  width:auto;
  display:block;
  max-width:220px;
}

/* Search pill */
.header-search{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 8px;
  background:#fff;
  width:100%;
  max-width:640px;
  position:relative;
  overflow:visible;
}

.header-search-input{
  border:0;
  outline:0;
  background:transparent;
  padding:8px 10px;
  width:100%;
  min-width:140px;
  font-size:14px;
}

.header-search-btn{
  border:0;
  cursor:pointer;
  padding:10px 16px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-weight:900;
  white-space:nowrap;
}

.header-search-suggest{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 20px 40px rgba(15,23,42,.12);
  padding:8px;
  z-index:80;
  max-height:360px;
  overflow:auto;
}

.header-search-suggest[hidden]{
  display:none !important;
}

.header-search-suggest-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  color:var(--text);
  text-decoration:none;
}

.header-search-suggest-item:hover,
.header-search-suggest-item.is-active{
  background:#f9fafb;
  text-decoration:none;
}

.header-search-suggest-main{
  min-width:0;
}

.header-search-suggest-label{
  display:block;
  font-size:14px;
  font-weight:800;
  color:#111827;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.header-search-suggest-hint{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
}

.header-search-suggest-type{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  min-height:44px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#374151;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.header-search-suggest-empty{
  padding:12px;
  font-size:13px;
  color:var(--muted);
}

/* Right side */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
}

/* Lang switch */
.lang-switch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  min-height:44px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:900;
  text-decoration:none;
  color:var(--brand);
}

/* Post your ad CTA */
.header-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 14px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 10px 24px rgba(239,68,68,.18);
  white-space:nowrap;
}
.header-cta:hover{ background:#dc2626; }
.header-cta .cta-ico{
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

/* Account/Login button (fixed width to stop shifting) */
.nav-account{ position:relative; }

.nav-account-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:42px;
  min-width:160px; /* stop shifting */
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:900;
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
}
.nav-account-btn:hover{ background:#f9fafb; }

.nav-account-ico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nav-account-label{ white-space:nowrap; }
.nav-account-caret{ opacity:.6; }

/* Dropdown */
.nav-account-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 20px 40px rgba(15,23,42,.12);
  padding:8px;
  display:none;
  z-index:999;
}
.nav-account.open .nav-account-menu{ display:block; }

.nav-account-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  font-size:13px;
}
.nav-account-menu a:hover{ background:#f9fafb; }

.nav-account-sep{
  height:1px;
  background:#eef2f7;
  margin:6px 0;
}

/* Row 2 nav */
.header-navrow{
  padding:0 0 10px;
}

.site-nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}

.site-nav a{
  text-decoration:none;
  color:var(--brand);
  font-weight:900;
  font-size:16px;
  padding:8px 0;
}
.site-nav a:hover{ text-decoration:underline; }

/* ===========================
   Mobile category bar (all pages)
   =========================== */
.mobile-catbar{
  display:none;
  background:var(--card);
  border-bottom:1px solid var(--border);
}

.mobile-catbar .catbar-inner{
  display:flex;
  gap:10px;
  overflow:auto;
  padding:10px 12px;
  -webkit-overflow-scrolling:touch;
}

.mobile-catbar a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:var(--text);
  font-weight:900;
  font-size:13px;
  text-decoration:none;
}
.mobile-catbar a i{ color:var(--brand); }

/* ===========================
   Mini UI helpers (Bootstrap-like)
   =========================== */
.form-control{
  width:100%;
  display:block;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
.form-control:focus{
  border-color:#d1d5db;
  box-shadow:0 0 0 3px rgba(192,0,33,.12);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  line-height:1;
}

.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-dark{ background:#111827; border-color:#111827; color:#fff; }
.btn-outline-dark{ background:#fff; border-color:#111827; color:#111827; }
.btn:hover{ filter:brightness(.98); }

.w-100{ width:100% !important; }
.small{ font-size:12px; }
.mb-2{ margin-bottom:.5rem; }
.mt-2{ margin-top:.5rem; }
.text-success{ color:#16a34a; font-weight:900; }
.text-danger{ color:#dc2626; font-weight:900; }

/* ===========================
   Footer
   =========================== */
.site-footer{
  background:#f3f4f6;
  border-top:1px solid var(--border);
  padding:28px 16px;
  margin-top:60px;
  text-align:center;
  font-size:13px;
  color:var(--muted);
}

/* ===========================
   Mobile behavior
   =========================== */
@media (max-width: 980px){

  /* Show hamburger */
  .nav-toggle{ display:inline-flex; }

  /* Header grid becomes:
     [hamburger] [logo centered] [account/login] */
  .header-inner{
    grid-template-columns:44px 1fr 44px;
    gap:10px;
  }

  .site-brand{ justify-self:center; }
  .site-brand img{
    height:28px;
    max-width:140px;
  }

  .header-actions{ justify-self:end; }

  /* Search full width on row 2 */
  .header-search{
    grid-column:1 / -1;
    grid-row:2;
    max-width:100%;
    margin-top:8px;
  }

  .header-search-suggest{
    max-height:280px;
    border-radius:16px;
  }

  .header-search-suggest-item{
    grid-template-columns:1fr;
    gap:6px;
  }

  .header-search-suggest-type{
    justify-self:start;
  }

  /* Hide row2 nav; show drawer */
  .site-nav{ display:none; }

  body.nav-open .site-nav{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:12px;
    margin:10px 12px 0;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--shadow);
  }

  .site-nav a{
    display:block;
    width:100%;
    padding:12px 10px;
    border-radius:12px;
    color:var(--text);
  }
  .site-nav a:hover{ background:#f3f4f6; }

  /* Mobile category bar */
  .mobile-catbar{ display:block; }

  /* Compact: hide "My account" label only on small */
  .nav-account-label{ display:none; }

  .header-cta{
    min-height:44px;
    padding:0 12px;
  }
  .header-cta .cta-txt{ display:none; }
}

/* RTL small tweaks */
html[dir="rtl"] .nav-account-menu{ right:auto; left:0; }
/* ===========================
   FIX: Mobile header overlap (buttons over logo)
   =========================== */
@media (max-width: 980px){

  /* allow right side to be as wide as needed */
  .header-inner{
    grid-template-columns: 44px 1fr auto !important;
    gap:10px !important;
  }

  /* let hamburger + logo become direct grid items */
  .header-left{ display: contents !important; }

  .nav-toggle{
    grid-column:1;
    justify-self:start;
    display:inline-flex !important;
  }

  .site-brand{
    grid-column:2;
    justify-self:center;
  }

  .header-actions{
    grid-column:3;
    justify-self:end;
    gap:6px !important;
  }

  /* make all right-side controls compact */
  .lang-switch{
    min-height:44px !important;
    min-width:44px !important;
    padding:0 10px !important;
    font-size:14px;
  }

  /* Post ad = icon button */
  .header-cta{
    width:44px !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 !important;
    justify-content:center !important;
  }
  .header-cta .cta-txt{ display:none !important; }
  .header-cta .cta-ico{
    width:24px !important;
    height:24px !important;
    font-size:16px;
  }

  /* Account/Login = icon button (remove min-width 160 on mobile) */
  .nav-account-btn{
    min-width:44px !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 !important;
    justify-content:center !important;
  }
  .nav-account-label,
  .nav-account-caret{ display:none !important; }

  /* keep logo from getting pushed */
  .site-brand img{
    height:28px !important;
    max-width:140px !important;
  }
}
/* ---- FIX: stop Chrome repaint flicker ---- */
*{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  margin-inline-end:.35rem;
  line-height:1;
}
.ico svg{ display:block; }