/* ============================================================
   VetNet — עיצוב משותף · RTL מלא
   מותג דו-צבעי: כחול-נייבי #142347 + ענבר #ffb400 — רצים בכל מקום
   (שמות המשתנים ההיסטוריים teal/gold נשמרו — הערכים הם נייבי/ענבר)
   ============================================================ */
:root {
  --teal: #142347;        /* NAVY — צבע מותג ראשי */
  --teal-dark: #0b1530;   /* נייבי כהה */
  --teal-light: #edf2fb;  /* נייבי בהיר לרקעים */
  --gold: #ffb400;        /* AMBER — צבע מותג משני */
  --gold-light: #fff3d1;  /* ענבר בהיר לרקעים */
  --ink: #142347;
  --ink-soft: #5b6b8c;
  --line: #e2e8f2;
  --bg: #f4f6fb;
  --card: #ffffff;
  --danger: #dc2626;
  --warn: #d97706;
  --ok: #16a34a;
  --blue: #2563eb;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(20, 35, 71, .07);
  --shadow-lg: 0 12px 40px rgba(20, 35, 71, .16);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Heebo', 'Segoe UI', Arial, sans-serif;
  direction: rtl;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); text-decoration: none; }
h1, h2, h3 { line-height: 1.25; }

/* ---------- כפתורים ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 10px; border: none; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  background: var(--teal); color: #fff; transition: .18s;
  white-space: nowrap;
}
.btn:hover { background: var(--teal-dark); transform: translateY(-1px); }
.btn.gold { background: var(--gold); color: var(--teal); }
.btn.gold:hover { background: #ffc233; }
.btn.ghost { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); }
.btn.ghost:hover { background: var(--teal-light); }
.btn.danger { background: var(--danger); }
.btn.gray { background: #eef2f5; color: var(--ink-soft); }
.btn.sm { padding: 5px 12px; font-size: .84rem; }
.btn.lg { padding: 14px 30px; font-size: 1.1rem; border-radius: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- כרטיסים ---------- */
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px;
}
.card h3 { font-size: 1.02rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }

/* ---------- תגיות ---------- */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 99px;
  font-size: .76rem; font-weight: 700;
}
.badge.ok     { background: #e8f8ee; color: var(--ok); }
.badge.warn   { background: #fdf3e3; color: var(--warn); }
.badge.danger { background: #fdeaea; color: var(--danger); }
.badge.info   { background: #e8effd; color: var(--blue); }
.badge.gold   { background: var(--gold-light); color: #8a6200; }
.badge.gray   { background: #eef2f5; color: var(--ink-soft); }

/* ---------- טבלאות ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th {
  text-align: right; padding: 9px 12px; color: var(--ink-soft);
  font-size: .8rem; font-weight: 700; border-bottom: 2px solid var(--line);
}
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.click { cursor: pointer; transition: .12s; }
.tbl tr.click:hover { background: var(--teal-light); }

/* ---------- טפסים ---------- */
label.fld { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
input.inp, select.inp, textarea.inp {
  width: 100%; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: .95rem; background: #fff; color: var(--ink);
}
input.inp:focus, select.inp:focus, textarea.inp:focus { outline: none; border-color: var(--teal); }
.frow { display: flex; gap: 12px; margin-bottom: 12px; }
.frow > div { flex: 1; }

/* ---------- מודאל ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(16, 28, 34, .55);
  display: none; align-items: center; justify-content: center; z-index: 300; padding: 18px;
}
.modal-back.open { display: flex; }
.modal {
  background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 26px;
  animation: pop .22s ease;
}
.modal h2 { font-size: 1.25rem; margin-bottom: 16px; }
@keyframes pop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- טוסט ---------- */
#toast {
  position: fixed; bottom: 26px; right: 50%; transform: translateX(50%);
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 12px;
  font-weight: 600; font-size: .95rem; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: .3s; z-index: 500; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; }

/* ============================================================
   פרסום — באנרים סטטיים ופופאפ (עדין, לא מציק)
   ============================================================ */
.ad-note { font-size: .68rem; color: #9aa8b1; letter-spacing: .5px; margin-bottom: 4px; }

/* באנר סטטי */
.ad-banner {
  border-radius: 12px; padding: 12px 14px; color: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 10px; transition: .18s;
  font-size: .84rem; line-height: 1.35;
}
.ad-banner:hover { filter: brightness(1.08); }
.ad-banner .ad-icon { font-size: 1.6rem; }
.ad-banner b { display: block; font-size: .88rem; }

/* רצועת באנר רוחבית */
.ad-strip {
  border-radius: 12px; padding: 13px 18px; color: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 12px; margin: 18px 0; transition: .18s;
}
.ad-strip:hover { filter: brightness(1.08); }
.ad-strip .ad-icon { font-size: 1.8rem; }

/* פופאפ פרסומי — פינתי, פעם בסשן, נסגר בקליק ונעלם לבד */
#ad-popup {
  position: fixed; bottom: 22px; left: 22px; z-index: 400;
  background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg);
  width: 320px; max-width: calc(100vw - 44px); padding: 16px;
  border: 1px solid var(--line);
  transform: translateY(140%); transition: transform .45s cubic-bezier(.2, .9, .3, 1.1);
}
#ad-popup.show { transform: translateY(0); }
#ad-popup .ad-close {
  position: absolute; top: 8px; left: 10px; border: none; background: none;
  font-size: 1.05rem; color: #9aa8b1; cursor: pointer;
}
#ad-popup .ad-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
#ad-popup .ad-head .ad-icon { font-size: 1.9rem; }
#ad-popup .ad-head b { font-size: .95rem; }
#ad-popup p { font-size: .86rem; color: var(--ink-soft); margin-bottom: 10px; }

/* ---------- מובייל (גלובלי) ---------- */
@media (max-width: 700px) {
  .frow { flex-direction: column; gap: 10px; }
  .card { padding: 15px 14px; overflow-x: auto; }
  .modal { padding: 20px 16px; border-radius: 16px; }
  .tbl { font-size: .82rem; }
  .tbl th, .tbl td { padding: 7px 7px; white-space: nowrap; }
  .btn.lg { padding: 12px 20px; font-size: 1rem; }
  #ad-popup { width: calc(100vw - 32px); left: 16px; bottom: 16px; }
  #toast { width: calc(100vw - 40px); font-size: .88rem; }
}

/* ---------- כלליים ---------- */
.grid { display: grid; gap: 16px; }
.muted { color: var(--ink-soft); }
.small { font-size: .84rem; }
.flex { display: flex; align-items: center; gap: 10px; }
.sp { flex: 1; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #c7d2d9; border-radius: 9px; }