:root {
  color-scheme: only light;

  --bg: #f3ecd2;
  --bg-soft: #ece0b8;
  --bg-card: #fffdf6;
  --line: #ddd0a0;
  --line-soft: #e8dcae;
  --text: #1c2a3a;
  --text-muted: #6b6247;
  --ink: #17324f;

  --navy: #1e3a5c;
  --navy-deep: #142943;
  --navy-soft: #dde6ee;

  --gold: #b8902e;
  --gold-soft: #f2e6c4;

  --teal: #12805f;
  --teal-soft: #dcf2ea;

  --red: #b6392f;
  --red-soft: #f7ddd8;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(30, 40, 20, 0.06), 0 6px 20px -6px rgba(30, 40, 20, 0.14);
  --shadow-pop: 0 20px 60px -12px rgba(20, 30, 15, 0.30);

  --font-display: 'Rubik', system-ui, sans-serif;
  --font-body: 'Heebo', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
}

body {
  background-image:
    radial-gradient(circle at 15% -8%, rgba(30, 58, 92, 0.08), transparent 45%),
    radial-gradient(circle at 100% 15%, rgba(184, 144, 46, 0.10), transparent 40%);
  background-attachment: fixed;
  padding-bottom: env(safe-area-inset-bottom);
}

::selection { background: var(--gold-soft); color: var(--navy-deep); }

.board { max-width: 640px; margin: 0 auto; padding: 18px 16px 60px; }

/* ---------- header ---------- */
.board-head {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
}

.brand { display: flex; align-items: center; justify-content: center; min-width: 0; }
.logo-img { max-width: 280px; width: 100%; height: auto; display: block; }

.logout-row {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.btn-icon { width: 15px; height: 15px; flex: none; }

.welcome-line {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  margin: 14px 0 2px;
  line-height: 1.4;
}
.brand-sub {
  text-align: center;
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); }
.btn.primary { background: var(--navy); color: #fff; box-shadow: 0 4px 12px -3px rgba(30, 58, 92, 0.5); }
.btn.primary:hover { filter: brightness(1.15); }
.btn.ghost { background: var(--bg-card); border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { background: var(--bg-soft); }
.btn.danger { background: var(--red-soft); color: var(--red); }
.btn.small { padding: 7px 12px; font-size: 12.5px; min-height: 34px; }
.btn.block { width: 100%; }

/* ---------- tabs ---------- */
.tabbar {
  display: flex;
  gap: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 4px;
  margin: 18px 0;
}
.tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  min-width: 0;
}
.tab-btn span { overflow: hidden; text-overflow: ellipsis; }
.tab-icon { width: 17px; height: 17px; flex: none; }
.tab-btn.active {
  background: var(--bg-card);
  color: var(--navy);
  box-shadow: var(--shadow-card);
}
.tab-panel[hidden] { display: none; }

/* ---------- gate ---------- */
.panel-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.gate-card { text-align: center; max-width: 420px; margin: 18px auto; }
.gate-card h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 6px; color: var(--ink); }
.phone-form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

.muted { color: var(--text-muted); font-size: 13.5px; }
.form-error { color: var(--red); font-size: 13px; margin: 4px 0 0; }

input[type=tel], input[type=number], input[type=text], input[type=email], select {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  width: 100%;
  text-align: center;
}
input:focus, select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); }
select { text-align: right; cursor: pointer; }
#seatsOptionsContainer { display: flex; flex-direction: column; gap: 16px; }
.option-group-field { display: flex; flex-direction: column; gap: 8px; }
.option-group-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.checkbox-label input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--navy); }
.option-split { display: flex; flex-direction: column; gap: 8px; background: var(--bg-soft, var(--bg)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; }
.option-split-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.option-split-row input { width: 70px; padding: 8px; text-align: center; }
.split-total { margin: 0; text-align: center; }
.muted.small { font-size: 11.5px; }

/* ---------- trips ---------- */
.trips-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trip-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.trip-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 4px; height: 100%;
  background: var(--teal);
}
.trip-card.registered::before { background: var(--gold); }
.trip-card.trip-closed::before { background: var(--red); }
.trip-card.trip-closed { opacity: 0.8; }

.trip-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.trip-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0; color: var(--ink); }
.trip-meta { font-size: 12.5px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 3px; }

.pill {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.pill.registered { background: var(--gold-soft); color: var(--gold); }
.pill.open { background: var(--teal-soft); color: var(--teal); }
.pill.closed { background: var(--red-soft); color: var(--red); }

.trip-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.trip-card-actions .btn { flex: 1; min-width: 100px; }

.booking-summary {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
}
.booking-summary p { margin: 0; }
.booking-summary p + p { margin-top: 4px; color: var(--text-muted); font-size: 12.5px; }
.booking-summary strong { color: var(--ink); }

.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-muted);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
}

/* ---------- shabbat seats ---------- */
.shabbat-card { text-align: center; max-width: 460px; margin: 0 auto; }
.shabbat-card h2 { font-family: var(--font-display); font-size: 19px; margin: 0 0 8px; color: var(--ink); }
.shabbat-card .btn { margin-top: 16px; }
.shabbat-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 600;
  font-size: 14px;
}

/* ---------- dialog ---------- */
dialog.sheet {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--bg-card);
  color: var(--text);
  width: min(400px, 92vw);
  box-shadow: var(--shadow-pop);
}
dialog.sheet::backdrop { background: rgba(20, 30, 15, 0.35); backdrop-filter: blur(3px); }
.sheet-form { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.sheet-form h2 { font-family: var(--font-display); margin: 0; font-size: 18px; color: var(--ink); }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); font-weight: 500; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.sheet-actions .btn { flex: 1; }

.board-foot {
  margin-top: 30px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 480px) {
  .logo-img { max-width: 220px; }
  .welcome-line { font-size: 15px; padding: 0 6px; }

  dialog.sheet {
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: fixed;
    inset-block-end: 0;
    inset-block-start: auto;
    border-radius: 20px 20px 0 0;
  }
  .sheet-form { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }

  .tab-btn span { display: inline; }
  .tab-btn { padding: 10px 6px; font-size: 12px; gap: 5px; }
  .tab-icon { width: 16px; height: 16px; }
}

/* ---------- אנ"ש טבריה: חיפוש אנשי קשר ---------- */
#anashSearchInput { margin-top: 10px; margin-bottom: 14px; }
.anash-results { display: flex; flex-direction: column; gap: 10px; }
.anash-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.anash-info { min-width: 0; text-align: center; }
.anash-name { font-weight: 700; font-size: 15px; color: var(--ink); white-space: normal; word-break: break-word; }
.anash-phone { font-size: 12.5px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 3px; }
.anash-email { font-size: 12px; color: var(--text-muted); margin-top: 3px; word-break: break-all; }
.call-choice-list { display: flex; flex-direction: column; gap: 8px; }
.anash-actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.08s ease;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.whatsapp { color: #1da851; }


/* ---------- האזור האישי שלי ---------- */
.myarea-current {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.myarea-current p { margin: 0 0 6px; font-size: 14px; }
.myarea-current p:last-child { margin-bottom: 0; }
.myarea-current strong { color: var(--ink); }

/* ================= מראה אפליקציה (מובייל) ================= */
@keyframes appFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:600px){
html,body{background:#f6f1de;background-image:none}
body{-webkit-user-select:none;user-select:none;overscroll-behavior-y:contain}
input,textarea{-webkit-user-select:text;user-select:text;font-size:16px!important}
.board{padding:0 0 calc(92px + env(safe-area-inset-bottom))!important;max-width:none}
.board>section,.board>main,.board>.empty-state,.board>footer{margin-left:14px;margin-right:14px}

/* שורת כותרת עליונה */
.appbar{background:linear-gradient(160deg,#1e3a5c,#142943);color:#fff;padding:calc(14px + env(safe-area-inset-top)) 16px 16px;border-radius:0 0 26px 26px;box-shadow:0 8px 24px -10px rgba(20,41,67,.55);margin-bottom:16px;position:relative;text-align:center}
.appbar .board-head{margin:0;padding:0}
.appbar .logo-img{max-width:110px!important;border-radius:16px;background:#fffdf6;padding:4px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.appbar .welcome-line{color:#e9dfb8;font-size:14px!important;margin:8px 0 2px!important;font-weight:500}
.appbar .brand-sub{color:#fff!important;font-family:var(--font-display);font-size:18px!important;font-weight:700;margin:0!important;letter-spacing:0}
.appbar .logout-row{margin:0!important}
body.logged-in .appbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;text-align:right;padding-bottom:18px}
body.logged-in .appbar .board-head{grid-column:1;grid-row:1}
body.logged-in .appbar .logo-img{max-width:50px!important;padding:3px}
body.logged-in .appbar .welcome-line{display:none!important}
body.logged-in .appbar .brand-sub{grid-column:2;grid-row:1;font-size:19px!important;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
body.logged-in .appbar .logout-row{grid-column:3;grid-row:1;display:flex;gap:8px}
body.logged-in .appbar .logout-row .btn{width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;background:rgba(255,255,255,.14);border:0;color:#fff;justify-content:center}
body.logged-in .appbar .logout-row .btn span{display:none}
body.logged-in .appbar .logout-row .btn-icon{width:20px;height:20px}

/* שער כניסה */
.gate-card{margin-top:-4px}

/* סרגל ניווט תחתון */
.tabbar{position:fixed!important;bottom:0;left:0;right:0;top:auto!important;margin:0!important;display:grid!important;grid-template-columns:repeat(3,1fr);gap:0!important;background:rgba(255,253,246,.96)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:0!important;border-top:1px solid #e3d9b0!important;border-radius:22px 22px 0 0!important;box-shadow:0 -6px 24px -8px rgba(20,41,67,.25)!important;padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;z-index:60}
.tabbar[hidden]{display:none!important}
.tab-btn{flex-direction:column!important;gap:3px!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#8a8266!important;padding:6px 2px!important;font-size:12px!important;font-weight:600;white-space:normal!important;min-width:0;position:relative;transition:color .2s}
.tab-btn span{overflow:visible!important;text-overflow:clip!important;white-space:normal!important;text-align:center;line-height:1.15}
.tab-btn .tab-icon{width:26px;height:26px;padding:4px 16px;box-sizing:content-box;border-radius:14px;transition:background .25s,transform .25s}
.tab-btn.active{color:#1e3a5c!important}
.tab-btn.active .tab-icon{background:#dde6ee;transform:translateY(-1px)}
.tab-btn:active .tab-icon{transform:scale(.9)}

/* תוכן */
.tab-panel:not([hidden]){animation:appFade .28s ease}
.trips-grid{gap:14px}
.trip-card,.panel-card{border-radius:22px!important;border:0!important;box-shadow:0 2px 4px rgba(30,40,20,.05),0 10px 24px -10px rgba(30,40,20,.22)!important}
.trip-card{padding:16px!important}
.panel-card{padding:20px 16px!important}
.btn{min-height:48px;border-radius:14px;font-size:15px;transition:transform .12s,filter .12s}
.btn:active{transform:scale(.96);filter:brightness(.95)}
.btn.small{min-height:40px}
input[type=text],input[type=tel],input[type=email],input[type=number]{min-height:50px;border-radius:14px}
.anash-card{border-radius:18px!important}
.icon-btn{width:46px;height:46px}
.board-foot{display:none}

/* חלונות כגיליון תחתון */
dialog.sheet[open]{animation:sheetUp .3s cubic-bezier(.2,.8,.2,1)}
dialog.sheet::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:#d9cfa5;margin:8px auto 4px}
}

.push-banner{display:flex;align-items:center;gap:12px;background:#fffdf6;border:1.5px solid var(--line);border-radius:18px;padding:12px 14px;margin:0 0 14px;color:var(--navy);flex-wrap:wrap}
.push-banner svg{flex:none}
.push-banner p{flex:1;margin:0;font-size:14px;line-height:1.4;min-width:150px}