/* === Reset & Base (match the mock exactly) === */
:root{
  --bg:#ffffff;
  --text:#111315;
  --muted:#6b7280;            /* gray-500 */
  --border:#e5e7eb;           /* gray-200 */
  --soft:#f3f4f6;             /* gray-100 */
  --brand:#2563eb;            /* blue-600 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.45 -apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{display:block;max-width:100%}
a{color:#1d4ed8;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:0 24px}

/* === Top Nav === */
.nav{
  display:flex;align-items:center;gap:28px;
  padding:20px 24px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:#fff;z-index:10
}
.nav .brand{font-weight:700;font-size:22px;letter-spacing:.1px}
.nav .tabs{display:flex;gap:28px;align-items:center}
.nav .tabs a{color:var(--text);font-weight:500}
.nav .right{margin-left:auto;display:flex;gap:12px}
.btn{
  appearance:none;border:1px solid var(--border);background:#fff;color:var(--text);
  padding:10px 16px;border-radius:10px;cursor:pointer;font-weight:600;line-height:1
}
.btn.ghost{background:transparent}
.btn.primary{
  background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 1px 0 rgba(17,24,39,.04), 0 6px 14px rgba(37,99,235,.18);
}
.btn.primary:active{transform:translateY(1px)}
.badge{background:#eef2ff;color:#1e40af;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}

/* === Hero + Search === */
.hero{padding:36px 24px 8px;text-align:center}
.hero h1{
  font-size:44px;line-height:1.08;margin:0 0 20px;font-weight:800;letter-spacing:-.01em
}
.searchbar{display:flex;gap:10px;justify-content:center}
.searchbar .box{
  display:flex;gap:0;align-items:center;background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04);
  padding:0;width:760px;max-width:100%;overflow:hidden
}
.searchbar input{
  border:0;outline:0;font-size:16px;padding:14px 14px;background:#fff;width:100%;
  color:var(--text)
}
.searchbar input::placeholder{color:#9ca3af}
.searchbar .loc{
  max-width:220px;border-left:1px solid var(--border);background:#fff
}
#searchBtn{height:46px;padding:0 18px;border-radius:12px}

/* === 3-Column Grid === */
.grid{
  display:grid;grid-template-columns:240px 1fr 320px;gap:28px;
  margin:30px auto 40px
}
.card{
  background:#fff;border:1px solid var(--border);border-radius:14px
}
.section{padding:16px 18px}
.section h3{margin:0 0 14px;font-size:20px;line-height:1.2;font-weight:800}

/* === Categories (left column) === */
.cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cat-row{margin:0;padding:0}
.cat-link {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start; /* force left alignment */
  padding: 6px 0;
}
.cat-icon{
  width:44px;height:44px;border-radius:12px;
  background:#f3f4f6;display:inline-grid;place-items:center;flex:0 0 44px;
}
.cat-icon svg { width: 22px; height: 22px; fill: none; stroke: #111315; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cat-link {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start; /* was space-between */
  padding: 6px 0;
}
.cats-more{display:inline-block;margin-top:8px;color:#2563eb;font-weight:700;text-decoration:none}
.cats-more:hover{text-decoration:underline}
.cat-link{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; }
.subcats { margin:6px 0 0 36px; gap:6px; display:none; }
.subcats:not([hidden]) { display:grid; }
.chev {
  font-size: 14px;
  margin-left: auto; /* pushes it all the way right */
}

/* === Latest Rentals (middle) === */
.list-inline{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px
}
.item{display:flex;gap:12px;align-items:flex-start}
.item img{
  width:100%;height:112px;object-fit:cover;border-radius:12px;border:1px solid var(--border)
}
.item .title{font-weight:700;letter-spacing:.1px;margin-bottom:4px}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-between a{font-weight:700;color:#1d4ed8}

/* === News (right column) === */
.stack{display:flex;flex-direction:column;gap:16px}
.stack a{color:var(--text);font-weight:600;line-height:1.25}
.stack small{display:block;color:#6b7280;margin-top:4px}
.stack a:hover{text-decoration:none;opacity:.9}
.section a.more{font-weight:700}

/* === Featured Ad === */
.featured{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center
}
.featured img{
  width:100%;height:auto;border-radius:14px;border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.featured .title{font-size:26px;font-weight:800;margin-bottom:6px}
.featured .muted{color:#6b7280}

/* === Modals (login/register/news) === */
.modal{
  position:fixed;inset:0;background:rgba(17,24,39,.45);display:none;align-items:center;justify-content:center;z-index:30
}
.modal.open{display:flex}
.modal .panel{
  background:#fff;border:1px solid var(--border);border-radius:16px;max-width:520px;width:94%;padding:20px;
  box-shadow:0 20px 48px rgba(0,0,0,.18)
}
.modal .panel h2{margin:0 0 12px;font-weight:800}
input,select,textarea{
  border:1px solid var(--border);background:#fff;color:var(--text);
  border-radius:10px;padding:12px 12px;font-size:16px
}
.form-row{display:flex;gap:12px}
.form-row>*{flex:1}

/* === Utilities === */
.hidden{display:none !important}