/* HUMED approvals: shared tokens + components (agency app and client review page). */
:root {
  --ink: #0c1411;
  --ink-2: #15211c;
  --ink-3: #1d3a2e;
  --lime: #c8f169;
  --lime-ink: #1b2a0a;
  --bg: #f2f5f3;
  --card: #ffffff;
  --line: #e2e8e4;
  --muted: #5d6b64;
  --soft: #eef2ef;
  --ok: #3f8f1c;
  --ok-bg: #eaf7dc;
  --ok-line: #9fd66f;
  --warn: #9a5300;
  --warn-bg: #fff2e0;
  --warn-line: #ffbf73;
  --info: #4b44c4;
  --info-bg: #eceafd;
  --danger: #c0353a;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(12, 20, 17, .06), 0 6px 24px rgba(12, 20, 17, .06);
  --font: 'Google Sans', 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.45; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ---------- buttons / inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; background: var(--soft); color: var(--ink); text-decoration: none; transition: transform .08s, background .15s, opacity .15s; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-lime { background: var(--lime); color: var(--lime-ink); }
.btn-lime:hover:not(:disabled) { background: #bce55a; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover:not(:disabled) { background: var(--ink-3); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { background: var(--soft); }
.btn-ok { background: #8fd14f; color: #fff; }
.btn-ok:hover:not(:disabled) { background: #7fc13f; }
.btn-warn-outline { background: #fff; border-color: var(--warn-line); color: var(--warn); }
.btn-sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn-danger { color: var(--danger); }
.input, .textarea, .select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; outline: none; font-size: 14px; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(200, 241, 105, .45); }
.textarea { resize: vertical; min-height: 76px; }
.label { display: block; font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.hint { font-size: 12px; color: var(--muted); }
.field { margin-bottom: 14px; }

/* ---------- chips / badges ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--soft); color: var(--muted); white-space: nowrap; }
.chip-kind { background: var(--info-bg); color: var(--info); }
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-dark { background: var(--ink); color: var(--lime); }
.chip-ver { background: var(--info-bg); color: var(--info); }

/* ---------- segmented ---------- */
.seg { display: inline-flex; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); padding: 3px; border-radius: 99px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 18px; border-radius: 99px; font-weight: 700; font-size: 13px; cursor: pointer; color: inherit; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.seg.light { background: var(--soft); border-color: var(--line); }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 12px; font-weight: 600; font-size: 14px; opacity: 0; transition: .2s; z-index: 100; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--danger); }

/* =========================================================
   Meta ad preview (shared)
   ========================================================= */
.ad { direction: rtl; font-family: var(--font); }
.ad-feed { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 8px 30px rgba(0, 0, 0, .10); overflow: hidden; width: 100%; max-width: 420px; margin: 0 auto; color: #050505; }
.ad-head { display: flex; align-items: center; gap: 9px; padding: 11px 12px 6px; }
.ad-avatar { width: 38px; height: 38px; border-radius: 50%; background: #4f7a32; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; overflow: hidden; }
.ad-avatar:has(img) { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.ad-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.ad-page { font-weight: 700; font-size: 14px; line-height: 1.2; }
.ad-sponsored { font-size: 12px; color: #65676b; }
.ad-dots { margin-inline-start: auto; color: #65676b; letter-spacing: 1px; font-weight: 700; }
.ad-text { padding: 2px 12px 10px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.ad-text .more { color: #65676b; font-weight: 600; cursor: pointer; }
.ad-media { background: #f0f2f5; position: relative; }
.ad-media img, .ad-media video { display: block; width: 100%; max-height: 560px; object-fit: contain; background: #000; }
.ad-media img { background: #f0f2f5; }
.ad-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f0f2f5; }
.ad-bar-txt { flex: 1; min-width: 0; }
.ad-domain { font-size: 11px; color: #65676b; text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-headline { font-weight: 700; font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ad-desc { font-size: 13px; color: #65676b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-cta { flex: none; background: #e4e6eb; color: #050505; border: 0; border-radius: 6px; padding: 8px 12px; font-weight: 700; font-size: 13px; }
.ad-actions { display: flex; justify-content: space-around; border-top: 1px solid #e4e6eb; margin: 0 12px; padding: 8px 0; color: #65676b; font-weight: 600; font-size: 13px; }
/* carousel */
.ad-carousel { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 12px 12px; scrollbar-width: none; }
.ad-carousel::-webkit-scrollbar { display: none; }
.ad-ccard { flex: 0 0 78%; scroll-snap-align: center; border: 1px solid #dadde1; border-radius: 10px; overflow: hidden; background: #fff; position: relative; transition: box-shadow .2s; }
.ad-ccard.cur { box-shadow: 0 0 0 2px rgba(12, 20, 17, .9); }
.ad-ccard.st-changes { box-shadow: 0 0 0 2px var(--warn-line); }
.ad-ccard.st-approved { box-shadow: 0 0 0 2px var(--ok-line); }
.ad-ccard .ad-cmedia { aspect-ratio: 1 / 1; background: #f0f2f5; }
.ad-ccard .ad-cmedia img, .ad-ccard .ad-cmedia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-ccard .ad-bar { background: #fff; padding: 9px 10px; }
.ad-ccard .ad-headline { font-size: 14px; -webkit-line-clamp: 1; }
.ad-count { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; z-index: 1; direction: ltr; }
.ad-flag { position: absolute; top: 8px; right: 8px; z-index: 1; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.ad-flag.changes { background: #ffad4d; color: #3a2000; }
.ad-flag.approved { background: #8fd14f; color: #fff; }
/* story */
.ad-story { position: relative; width: 100%; max-width: 330px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #111; color: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); user-select: none; }
.ad-story .st-media { position: absolute; inset: 0; }
.ad-story .st-media img, .ad-story .st-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-story .st-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent 18%, transparent 68%, rgba(0, 0, 0, .65)); pointer-events: none; }
.ad-story .st-bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; direction: ltr; }
.ad-story .st-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .4); }
.ad-story .st-bars span.on { background: #fff; }
.ad-story .st-head { position: absolute; top: 22px; right: 12px; left: 12px; display: flex; align-items: center; gap: 8px; z-index: 2; }
.ad-story .ad-avatar { width: 32px; height: 32px; font-size: 13px; border: 2px solid rgba(255, 255, 255, .8); }
.ad-story .st-page { font-weight: 700; font-size: 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.ad-story .st-sp { font-size: 11px; opacity: .85; }
.ad-story .st-foot { position: absolute; bottom: 14px; left: 12px; right: 12px; z-index: 2; text-align: center; }
.ad-story .st-text { font-size: 13px; margin-bottom: 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-story .st-cta { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; color: #050505; font-weight: 700; font-size: 13px; padding: 8px 18px; border-radius: 99px; }
.ad-story .st-tap { position: absolute; top: 60px; bottom: 80px; width: 40%; z-index: 3; cursor: pointer; }
.ad-story .st-tap.prev { right: 0; }
.ad-story .st-tap.next { left: 0; }
.ad-story .st-safe { position: absolute; inset: 14% 0 20% 0; border-top: 1px dashed rgba(255, 255, 255, .35); border-bottom: 1px dashed rgba(255, 255, 255, .35); pointer-events: none; z-index: 1; }
.ad-empty { display: grid; place-items: center; aspect-ratio: 1 / 1; color: #8a949e; font-size: 14px; background: #f0f2f5; }

/* =========================================================
   v2: platforms, reels, autoplay media, comment pins
   ========================================================= */
.ico { display: inline-flex; line-height: 0; }
.ico svg { display: block; }
.vswitch { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* media box */
.mbox { position: relative; overflow: hidden; background: #0d0d0d; width: 100%; }
.mbox > img, .mbox > video { display: block; width: 100%; height: 100%; object-fit: cover; max-height: none !important; background: transparent; }
.mbox.fit-contain > img, .mbox.fit-contain > video { object-fit: contain; }
.mbox.fit-natural { aspect-ratio: 1; }
.ad-cmedia .mbox, .st-media .mbox { height: 100%; }
.mbox .snd { position: absolute; bottom: 10px; left: 10px; z-index: 4; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ad-story .mbox .snd { bottom: auto; top: 56px; left: 12px; }
.pins { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pin { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg) translate(0, 0); background: #ffad4d; color: #3a2000; display: grid; place-items: center; font-size: 13px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 0 0 2px #fff; pointer-events: auto; cursor: pointer; }
.pin { transform: none; border-radius: 50%; }
.pin.draft { background: var(--ink, #0c1411); color: #c8f169; animation: pinpulse 1.2s ease-in-out infinite; }
.pin.active { background: #ff7a1a; color: #fff; transform: scale(1.15); }
@keyframes pinpulse { 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 8px rgba(200, 241, 105, .45); } }
.mbox.pin-mode { cursor: crosshair; }
.mbox.pin-mode::after { content: 'לחצו על המקום שצריך לשנות'; position: absolute; top: 10px; right: 10px; z-index: 4; background: rgba(12, 20, 17, .82); color: #c8f169; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; pointer-events: none; }

/* facebook tweaks */
.ad-feed.fb .ad-actions span { display: inline-flex; align-items: center; gap: 6px; }
.ad-feed.fb .ad-dots { color: #65676b; }

/* instagram feed */
.ad-feed.ig { border-radius: 10px; color: #000; }
.ig-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ig-ring { padding: 2px; border-radius: 50%; background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); flex: none; }
.ig-ring .ad-avatar { width: 32px; height: 32px; font-size: 13px; border: 2px solid #fff; }
.ig-who { line-height: 1.2; }
.ig-user { font-weight: 700; font-size: 14px; }
.ig-sp { font-size: 12px; color: #262626; }
.ig-more { margin-inline-start: auto; }
.ig-cta { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; font-weight: 700; font-size: 14px; border-bottom: 1px solid #efefef; color: #0095f6; }
.ig-cta .ico { color: #000; }
.ig-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 10px 4px; }
.ig-act { display: flex; gap: 14px; }
.ig-act.end { justify-content: flex-end; }
.ig-caption { padding: 4px 12px 12px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.ig-caption .more, .rl-text .more { color: #8e8e8e; cursor: pointer; }
.ig-dots { display: flex; gap: 4px; justify-content: center; }
.ig-dots span { width: 6px; height: 6px; border-radius: 50%; background: #dbdbdb; }
.ig-dots span.on { background: #0095f6; }
.ad-carousel.ig { padding: 0; gap: 0; }
.ig-card { flex: 0 0 100%; scroll-snap-align: center; position: relative; }
.ig-card .ad-cmedia { aspect-ratio: 1 / 1; }
.ig-card.cur { box-shadow: inset 0 0 0 3px rgba(12, 20, 17, .9); }
.ig-card.st-changes { box-shadow: inset 0 0 0 3px #ffbf73; }
.ig-card.st-approved { box-shadow: inset 0 0 0 3px #9fd66f; }
.ig-card .ig-cta { border-bottom: 0; }

/* story / reels shared */
.ad-story .st-count { top: auto; bottom: 120px; left: 12px; z-index: 3; }
.ad-story .ad-flag { top: 58px; right: 12px; z-index: 3; }
.ad-story .st-up { font-size: 10px; line-height: 1; }
.ad-story.instagram .st-cta { flex-direction: row; gap: 6px; padding: 9px 16px; }
/* reels */
.ad-story.reels .st-shade { background: linear-gradient(to bottom, rgba(0, 0, 0, .35), transparent 15%, transparent 55%, rgba(0, 0, 0, .75)); }
.rl-top { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: 18px; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.rl-side { position: absolute; left: 10px; bottom: 120px; z-index: 2; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.rl-side .ico svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.rl-foot { position: absolute; right: 12px; left: 52px; bottom: 14px; z-index: 2; }
.rl-who { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rl-who .ad-avatar { width: 30px; height: 30px; font-size: 12px; border: 1.5px solid #fff; }
.rl-sp { font-size: 12px; opacity: .85; }
.rl-text { font-size: 13px; margin: 8px 0 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); white-space: pre-wrap; }
.rl-cta { display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); border-radius: 8px; padding: 9px 12px; font-weight: 700; font-size: 14px; }
.ad-story.reels.facebook .rl-cta { background: #1877f2; }
.ad-story.reels.instagram .rl-cta { background: rgba(255, 255, 255, .25); }

/* organic posts */
.ad-ccard.organic .ad-cmedia { aspect-ratio: 4 / 5; }
.rl-follow { font-size: 12px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 6px; padding: 1px 8px; }
.ad-feed .ad-head + .ad-media, .ad-feed .ig-head + .ad-media { margin-top: 0; }