/* ═══════════════════════════════════════════════════════════════════════════
   יאללה גליל · פוטו-בוקס — עיצוב מובייל
   צבעי המותג נלקחו מהלוגו של צוות יצירה ומלוגו האירוע
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --purple:#6141ac;
  --purple-dark:#3d2480;
  --purple-deep:#241247;
  --yellow:#fdd805;
  --yellow-dark:#e0be00;
  --blue:#1a4997;
  --ink:#160c2e;
  --white:#fff;
  --radius:20px;
  --bar:rgba(20,10,40,.72);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:"Rubik","Heebo",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Hebrew","Arial Hebrew",Arial,sans-serif;
  background:var(--purple-deep);
  color:var(--white);
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  -webkit-text-size-adjust:100%;
}
img{display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

.app{position:fixed;inset:0;overflow:hidden}

.screen{
  position:absolute;inset:0;
  display:none;flex-direction:column;
  background:var(--purple-deep);
}
.screen.is-active{display:flex}

/* ─────────────────────────────── כפתורים ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:56px;padding:0 22px;border-radius:999px;
  font-size:18px;font-weight:700;letter-spacing:-.01em;
  transition:transform .12s ease,filter .12s ease,background .15s ease;
}
.btn:active{transform:scale(.96)}
.btn--primary{background:linear-gradient(180deg,#7a55c9,#5b3aa6);color:#fff;box-shadow:0 8px 22px rgba(97,65,172,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.btn--yellow{background:linear-gradient(180deg,#ffe23f,var(--yellow));color:#2b1a06;box-shadow:0 8px 22px rgba(253,216,5,.32)}
.btn--ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.btn--whatsapp{background:linear-gradient(180deg,#3ed07a,#1faa54);color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.32)}
.btn--whatsapp .ic{fill:#fff}
.btn--big{width:100%;min-height:64px;font-size:20px}
.btn--sm{min-height:48px;font-size:16px;padding:0 18px}
.ic{width:1.35em;height:1.35em;fill:currentColor;flex:none}
.ic .hole{fill:var(--purple-deep)}

.icon-btn{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(0,0,0,.34);backdrop-filter:blur(8px);color:#fff;
}
.icon-btn svg{width:24px;height:24px;fill:currentColor}
.icon-btn--lg{width:54px;height:54px}
.icon-btn:active{transform:scale(.92)}
.chip-btn{
  height:38px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:700;
  background:rgba(0,0,0,.34);backdrop-filter:blur(8px);color:#fff;
}
.chip-btn.is-on{background:var(--yellow);color:#2b1a06}

/* ───────────────────────────── ברוכים הבאים ───────────────────────────── */
.screen--welcome{
  background:
    radial-gradient(120% 80% at 50% 0%,#7a55c9 0%,#4b2c95 45%,#2a1560 100%);
}
.screen--welcome::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;
  background:url("../assets/bg/splash.svg") center/cover;
  mix-blend-mode:soft-light;
}
.screen--welcome::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,8,48,.15),rgba(20,8,48,.55));
}
.welcome-scroll{
  position:relative;z-index:1;flex:1;overflow-y:auto;
  padding:calc(var(--safe-t) + 18px) 20px 10px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.welcome-logo{
  width:min(62vw,244px);height:auto;border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.42);
}
.welcome-title{
  margin:15px 0 5px;font-size:clamp(26px,7.6vw,36px);line-height:1.05;font-weight:900;
  text-shadow:0 4px 18px rgba(0,0,0,.35);
}
.welcome-title span{color:var(--yellow)}
.welcome-sub{margin:0 0 15px;font-size:15px;line-height:1.45;opacity:.92;max-width:24em}
.steps{
  list-style:none;margin:0 0 16px;padding:0;width:100%;max-width:420px;
  display:flex;flex-direction:column;gap:8px;
}
.steps li{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.1);border-radius:14px;padding:8px 12px;
  font-size:15px;font-weight:600;text-align:start;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.steps__n{
  width:28px;height:28px;flex:none;border-radius:50%;font-size:14px;
  display:grid;place-items:center;background:var(--yellow);color:#2b1a06;font-weight:900;
}
#btn-start{max-width:420px;min-height:56px;font-size:18px}
#btn-pick-photo{margin-top:9px;width:100%;max-width:420px;min-height:46px;font-size:15.5px}
.welcome-note{margin:10px 0 0;font-size:13px;line-height:1.45;color:#ffd8d8;min-height:1em;max-width:26em}
.brand-foot{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:6px 16px calc(var(--safe-b) + 8px);
  font-size:12px;opacity:.85;
}
.brand-foot img{height:26px;width:auto}

/* מסכים נמוכים (Galaxy S25 וכל מכשיר 6 אינץ' עם סרגל כתובת) -
   הכול חייב להיכנס למסך אחד בלי גלילה, כולל כפתור פתיחת המצלמה */
@media (max-height:740px){
  .welcome-scroll{padding:calc(var(--safe-t) + 12px) 18px 8px}
  .welcome-logo{width:min(58vw,218px)}
  .welcome-title{margin:11px 0 4px;font-size:clamp(24px,7vw,32px)}
  .welcome-sub{margin:0 0 12px;font-size:14px;line-height:1.4}
  .steps{margin:0 0 13px;gap:7px}
  .steps li{padding:8px 11px;font-size:14.5px;border-radius:13px}
  .steps__n{width:26px;height:26px;font-size:13.5px}
  #btn-start{min-height:54px;font-size:17.5px}
  #btn-pick-photo{margin-top:8px;min-height:45px;font-size:15px}
  .welcome-note{margin:8px 0 0;font-size:12.5px}
  .brand-foot{padding:5px 16px calc(var(--safe-b) + 7px);font-size:11.5px}
  .brand-foot img{height:24px}
}
@media (max-height:600px){
  .welcome-logo{width:min(40vw,150px)}
  .welcome-title{font-size:clamp(20px,5.6vw,24px)}
  .welcome-sub{display:none}
  .steps li{padding:5px 10px;font-size:13px}
}

/* ─────────────────────────────── מצלמה ─────────────────────────────── */
.screen--camera{background:#000}
.stage{position:absolute;inset:0;overflow:hidden;background:#000}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stage.is-mirror #video{transform:scaleX(-1)}

.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.flash.is-on{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.92}100%{opacity:0}}

.countdown{
  position:absolute;inset:0;display:none;place-items:center;
  font-size:34vw;font-weight:900;color:#fff;text-shadow:0 8px 40px rgba(0,0,0,.6);
  pointer-events:none;
}
.countdown.is-on{display:grid;animation:pop .95s ease-out}
@keyframes pop{0%{transform:scale(.55);opacity:0}25%{transform:scale(1);opacity:1}100%{transform:scale(1.25);opacity:0}}

.cam-hint{
  position:absolute;top:calc(var(--safe-t) + 70px);inset-inline:16px;
  text-align:center;font-size:14.5px;font-weight:600;
  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);
  padding:9px 14px;border-radius:999px;
  transition:opacity .4s ease;
}
.cam-hint.is-hidden{opacity:0}

.topbar{
  position:absolute;top:0;inset-inline:0;z-index:5;
  display:flex;align-items:center;gap:8px;
  padding:calc(var(--safe-t) + 10px) 12px 10px;
}
.topbar__spacer{flex:1}
.topbar--solid{
  position:relative;background:var(--purple-deep);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.topbar__title{flex:1;margin:0;text-align:center;font-size:18px;font-weight:800}
.topbar__ghost{width:44px;height:44px;flex:none}

.cambar{
  position:absolute;bottom:0;inset-inline:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px calc(var(--safe-b) + 18px);
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent);
}
.shutter{
  width:82px;height:82px;border-radius:50%;
  background:rgba(255,255,255,.28);display:grid;place-items:center;
  box-shadow:0 0 0 4px rgba(255,255,255,.9) inset;
}
.shutter span{width:62px;height:62px;border-radius:50%;background:#fff;transition:transform .12s ease}
.shutter:active span{transform:scale(.86)}

/* ─────────────── כיוונון מהיר במסך העריכה ─────────────── */
.quick-tune{
  flex:none;display:flex;align-items:center;gap:12px;
  padding:8px 16px 2px;background:rgba(0,0,0,.25);
}
.slider--inline{flex:1;min-width:0;margin-bottom:0}
.slider--inline>span{font-size:13px;margin-bottom:0;gap:8px}
.slider--inline input[type=range]{height:26px}
.slider--inline input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-7px}
.slider--inline input[type=range]::-moz-range-thumb{width:22px;height:22px}
.logo-toggle{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 10px;border-radius:14px;font-size:10.5px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);
  min-width:56px;
}
.logo-toggle svg{width:19px;height:19px;fill:currentColor;opacity:.55}
.logo-toggle.is-on{background:var(--yellow);color:#2c1663;box-shadow:none}
.logo-toggle.is-on svg{opacity:1}

/* ─────────────────────────── קטגוריות רקעים ─────────────────────────── */
.bg-cats{
  display:flex;gap:8px;overflow-x:auto;padding:10px 14px 0;scrollbar-width:none;
}
.bg-cats::-webkit-scrollbar{display:none}
.cat-chip{
  flex:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);
  transition:background .15s ease,color .15s ease;
}
.cat-chip i{font-style:normal;font-size:14px;line-height:1}
.cat-chip.is-active{background:var(--yellow);color:#2c1663;box-shadow:none}

/* ─────────────────────────── רצועת הרקעים ─────────────────────────── */
.bg-picker{flex:none;background:rgba(0,0,0,.25)}
.bg-picker .bg-strip{background:none}
.bg-strip{
  display:flex;gap:10px;overflow-x:auto;
  padding:12px 14px;scrollbar-width:none;
  background:rgba(0,0,0,.25);
}
.bg-strip::-webkit-scrollbar{display:none}
.bg-tile{
  position:relative;flex:none;width:78px;height:104px;border-radius:14px;overflow:hidden;
  background:#2a1560;box-shadow:0 0 0 2px rgba(255,255,255,.16);
  transition:box-shadow .15s ease,transform .15s ease;
}
.bg-tile img{width:100%;height:100%;object-fit:cover}
.bg-tile.is-active{box-shadow:0 0 0 3.5px var(--yellow);transform:translateY(-3px)}
.bg-tile__name{
  position:absolute;inset-inline:0;bottom:0;
  font-size:10.5px;font-weight:700;line-height:1.25;padding:10px 3px 4px;
  background:linear-gradient(to top,rgba(0,0,0,.82),transparent);
  text-align:center;
}
.bg-tile--upload{display:grid;place-items:center;gap:4px;background:linear-gradient(160deg,#7a55c9,#4b2c95)}
.bg-tile--upload svg{width:26px;height:26px;fill:#fff}
.bg-tile--upload b{font-size:10.5px;font-weight:700;padding:0 4px;text-align:center;line-height:1.2}

/* ─────────────────────────────── עריכה ─────────────────────────────── */
.screen--edit{background:var(--purple-deep)}
.preview-wrap{
  position:relative;flex:1;min-height:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:10px;
  background:
    repeating-conic-gradient(#241247 0 25%,#2c1856 0 50%) 0 0/26px 26px;
}
#preview{
  max-width:100%;max-height:100%;
  border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.5);
}

.editbar,.resultbar{
  display:flex;gap:10px;align-items:center;
  padding:12px 16px calc(var(--safe-b) + 14px);
  background:var(--purple-deep);
}
.editbar .btn{flex:1}
#btn-done{flex:1.6}
.resultbar{flex-wrap:wrap}
.resultbar .btn{flex:1 1 40%}
#btn-wa{flex:1 1 100%}
#btn-again{flex:1 1 100%}

/* ────────────────────────── גיליון הכיוונון ────────────────────────── */
.sheet{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-end;background:rgba(0,0,0,.55)}
.sheet[hidden]{display:none}
.sheet__panel{
  width:100%;background:#301a63;border-radius:26px 26px 0 0;
  padding:10px 20px calc(var(--safe-b) + 18px);
  box-shadow:0 -10px 40px rgba(0,0,0,.5);
  animation:sheetin .25s ease-out;
}
@keyframes sheetin{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet__grab{width:44px;height:5px;border-radius:99px;background:rgba(255,255,255,.32);margin:0 auto 12px}
.sheet h3{margin:0 0 14px;font-size:18px;font-weight:800;text-align:center}
.sheet__row{display:flex;gap:10px;margin-top:16px}
.sheet__row .btn{flex:1}

.slider{display:block;margin-bottom:16px}
.slider>span{display:flex;justify-content:space-between;font-size:15px;font-weight:700;margin-bottom:8px}
.slider b{font-weight:700;color:var(--yellow)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:30px;background:none;
}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:rgba(255,255,255,.22)}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:rgba(255,255,255,.22)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--yellow);margin-top:-9px;box-shadow:0 2px 8px rgba(0,0,0,.4);
}
input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border:0;border-radius:50%;background:var(--yellow);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}

.switch{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;margin-top:4px}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch__box{
  width:52px;height:31px;border-radius:99px;background:rgba(255,255,255,.22);
  position:relative;transition:background .18s ease;flex:none;
}
.switch__box::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;
  width:25px;height:25px;border-radius:50%;background:#fff;transition:transform .18s ease;
}
.switch input:checked + .switch__box{background:var(--yellow)}
.switch input:checked + .switch__box::after{transform:translateX(-21px)}

/* ─────────────────────────────── תוצאה ─────────────────────────────── */
.result-wrap{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:12px;
}
#result-img{
  max-width:100%;max-height:100%;object-fit:contain;
  border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.55);
  -webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default;
}
.result-tip{margin:0;font-size:13px;opacity:.7;text-align:center}

/* ─────────────────────────────── עזרה ─────────────────────────────── */
.help-scroll{flex:1;overflow-y:auto;padding:18px 20px calc(var(--safe-b) + 24px);line-height:1.6}
.help-scroll h3{margin:18px 0 8px;font-size:18px;color:var(--yellow)}
.help-scroll h3:first-child{margin-top:0}
.help-scroll ul{margin:0;padding-inline-start:20px;font-size:15.5px}
.help-scroll li{margin-bottom:8px}
.help-scroll .btn{width:100%;margin-top:24px}

/* ───────────────────────── טוסט וטעינה ───────────────────────── */
.toast{
  position:fixed;bottom:calc(var(--safe-b) + 150px);inset-inline:24px;z-index:60;
  background:rgba(10,4,26,.94);border-radius:14px;padding:12px 16px;
  font-size:15px;font-weight:600;text-align:center;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:all .25s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.toast.is-on{opacity:1;transform:translateY(0)}

.loader{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;gap:14px;
  grid-auto-flow:row;background:rgba(15,6,36,.8);backdrop-filter:blur(4px);font-weight:700;
}
.loader[hidden]{display:none}
.loader__ring{
  width:52px;height:52px;border-radius:50%;
  border:5px solid rgba(255,255,255,.2);border-top-color:var(--yellow);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

@media (min-width:760px){
  .app{max-width:520px;margin:0 auto;box-shadow:0 0 60px rgba(0,0,0,.6)}
  body{background:#150a2e}
}
.slider__hint{display:block;font-size:11.5px;font-weight:600;line-height:1.4;opacity:.62;margin-top:-4px}