:root{
  --bg:#0e1116;
  --panel:#121622;
  --panel-2:#171b29;
  --ink:#e6e8ef;
  --ink-muted:#9aa3b2;
  --bd:#23293a;
  --brand:#3b82f6;        /* כחול יוקרתי (אפשר להחליף לזהב #C6A230) */
  --brand-ink:#fff;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --max:1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body.sb-body{
  margin:0;
  background: radial-gradient(1200px 600px at 80% -100px, rgba(65,84,255,.18), transparent),
              radial-gradient(700px 400px at -20% 10%, rgba(19,190,255,.12), transparent),
              var(--bg);
  color:var(--ink);
  font-family:'Rubik',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* Header */
.sb-header{
  position: sticky; top:0; z-index:20;
  display:block;
  gap:16px; padding:6px 20px; /* ↓ היה 14px 20px */
  background: rgba(10,12,18,.6); backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--bd);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-text{font-weight:800;letter-spacing:.2px}
.sb-nav{display:flex;align-items:center;gap:10px}
.nav-link{color:var(--ink);opacity:.9;text-decoration:none;padding:8px 10px;border-radius:999px}
.nav-link:hover{background:rgba(255,255,255,.06)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:10px 16px;border:1px solid var(--bd);cursor:pointer;text-decoration:none;color:var(--ink)}
.btn.ghost{background:transparent}
.btn.primary{background:var(--brand);border-color:transparent;color:var(--brand-ink);box-shadow:0 6px 18px rgba(59,130,246,.35)}
.btn.primary:hover{filter:brightness(1.05)}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* Containers */
.sb-container{max-width:var(--max);margin:0 auto;padding:18px 16px}

/* Hero */
.hero{position:relative;border-radius:28px;overflow:hidden;margin-top:16px}
.hero-bg{
  height:360px; background:
  linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35)),
  url('/public/img/hero-restaurant-dark.jpg') center/cover no-repeat,
  var(--panel);
}
.hero-inner{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center;
}
.hero-title{font-size: clamp(28px, 4vw, 56px); margin:0 0 8px; letter-spacing:.2px}
.hero-sub{margin:0 0 22px; color:var(--ink-muted); font-size:clamp(14px, 2.1vw, 18px)}

/* Search bar */
.search-bar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background: rgba(18,22,34,.85); border:1px solid var(--bd); padding:10px; border-radius:999px;
  box-shadow: var(--shadow);
  max-width:600px; margin:0 auto;
}
.field{display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--bd); border-radius:12px; padding-inline:12px; flex:1}
.field input{
  background:transparent; border:none; color:var(--ink); outline:none;
  height:42px; padding:0 6px; min-width:160px; font-size:15px; flex:1;
}
.field.with-icon svg{width:18px;height:18px;opacity:.7;flex:0 0 auto}
.search-btn{height:44px; padding-inline:22px}

/* Sections */
.section{margin-top:28px}
.section-title{margin:0 0 14px; font-size:clamp(18px,2.4vw,26px)}

/* Cards */
.cards{display:grid; gap:14px; grid-template-columns:repeat(3, 1fr)}
.card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:18px; background:var(--panel);
  border:1px solid var(--bd); text-decoration:none; color:inherit; transition:transform .16s ease, box-shadow .16s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.35)}
.card-img{aspect-ratio:16/10; background:#222 center/cover no-repeat}
.card-body{padding:12px}
.card-title{margin:0 0 4px; font-weight:700}
.card-meta{margin:0; color:var(--ink-muted); font-size:14px}

.muted{color:var(--ink-muted)}

/* Footer */
.sb-footer{max-width:var(--max);margin:36px auto 24px;color:var(--ink-muted);border-top:1px solid var(--bd);padding-top:16px}

/* Responsive */
@media (max-width: 1024px){
  .cards{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 640px){
  .hero-bg{height:320px}
  .search-bar{border-radius:16px}
  .field input{min-width:120px}
  .cards{grid-template-columns:1fr}
}

/* ===== אוטוקומפליט – התאמות בסיסיות (תואם index.eta) ===== */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute;
  inset-inline: 12px 12px;
  top: calc(100% + 6px);
  z-index: 40;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
}
.ac-item { display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; cursor:pointer; }
.ac-item:hover, .ac-item.is-active { background: rgba(255,255,255,.05); }
.ac-thumb { width:44px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--bd); flex:0 0 44px; }
.ac-meta { min-width:0; }
.ac-title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-sub { font-size:.9rem; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== Mobile-first polish ===== */
html { -webkit-text-size-adjust: 100%; }
body.sb-body {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}
@media (max-width: 640px){
  .sb-header { padding: 10px 12px; }
  .brand-text { font-size: 15px; }
  .btn { padding: 8px 12px; }
}
@media (max-width: 640px){
  .hero-bg { height: 260px; }
  .hero-inner { padding: 16px; }
  .hero-title { font-size: clamp(22px, 6.2vw, 30px); }
  .hero-sub { font-size: 14px; margin-bottom: 16px; }
}
@media (max-width: 640px){
  .search-bar {
    border-radius: 16px;
    padding: 8px;
    gap: 8px;
    max-width: none;
  }
  .search-bar .field { flex: 1 1 100%; }
  .search-bar input[type="search"] { font-size: 16px; height: 44px; }
  .search-btn { width: 100%; height: 46px; }
}
@media (max-width: 640px){
  .ac-wrap { position: relative; }
  .ac-list {
    inset-inline: 0 0;
    top: calc(100% + 6px);
    max-height: 60vh;
    padding: 4px;
  }
  .ac-item { padding: 10px; gap: 12px; }
  .ac-thumb { width: 48px; height: 48px; }
  .ac-title { font-size: 15px; }
  .ac-sub { font-size: 13px; }
}
@media (max-width: 1024px){
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card-img { aspect-ratio: 4 / 3; }
  .card-body { padding: 10px; }
  .card-title { font-size: 16px; }
  .card-meta { font-size: 13px; }
}
@media (max-width: 640px){
  .sb-footer { margin: 24px auto 16px; padding-top: 12px; }
}
@media (hover: none){
  .card:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ====== הדר כ־Grid: המשתמש מתחת ללוגו ====== */
.sb-header-row{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand actions"
    "user  user";          /* ← המשתמש עכשיו תופס את כל השורה */
  align-items:center;
  gap:10px 12px;
}

.brand{ grid-area: brand; }
.sb-actions{ grid-area: actions; display:flex; align-items:center; gap:8px; }

/* מציגים תמיד את הטקסט מתחת ללוגו */
.user-mobile{
  grid-area: user;
  display:block;
  color:var(--ink-muted);
  font-size:14px;
  line-height:1.3;
}

/* ------ Logo sizing (responsive) ------ */
.brand-logo{
  display:block;
  height:70px;      /* גודל הלוגו נשמר */
  width:auto;
  object-fit:contain;
}

/* ↓ מצמצם רווח מיותר סביב הלוגו */
.sb-header .sb-container{
  min-height:0;
  padding:6px 16px;
  align-items:flex-start;
}

@media (min-width: 768px){
  .brand-logo{ height:70px; }
  .sb-header .sb-container{
    min-height:0;
    padding:8px 16px;
  }
}

@media (max-width: 360px){
  .brand-logo{ height:44px; }
}

/* ===== Horizontal Restaurant Carousel ===== */
.hs-wrap{
  --gap: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.hs{
  display: flex;
  overflow: hidden;
  gap: var(--gap);
  scroll-behavior: smooth;
  touch-action: pan-x;      /* חשוב למובייל */
  -ms-touch-action: pan-x;
}
.hs-item{
  flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: 14px;
  overflow: hidden;
}
.hs-title{
  padding: 10px 12px 6px;
  font-weight: 600;
  color: var(--ink);
}
.hs-img{
  aspect-ratio: 4/3;
  background: #222 center/cover no-repeat;
  border-top: 1px solid var(--bd);
}
.hs-btn{
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  border: 1px solid var(--bd);
  background: color-mix(in srgb, var(--panel-2) 92%, transparent);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hs-btn:hover{ background: color-mix(in srgb, var(--panel) 92%, transparent); }

@media (max-width: 640px){
  .hs-item{
    flex: 0 0 100%;   /* כרטיס אחד לכל רוחב */
  }
}