/* Provent — מחשבון בר.
   Re-skinned onto the rebuilt site's design system: the same palette, the same two
   typefaces, the same hairline foil. The old tokens (#171412 / #8B2FAC / #E8B45C with
   OS Aran) were the pre-2026 brand and made the calculator read as somebody else's page.
   The fonts are self-hosted on purpose — the CSP here is font-src 'self', and that is
   worth keeping. */

/* Heebo and Assistant, self-hosted. Google serves these as variable fonts — one file
   per family and subset covers every weight — so four files replace the ten the
   stylesheet asked for. Self-hosting keeps the CSP at font-src 'self', which is the
   whole reason this app has no external dependency of any kind. */
@font-face{font-family:'Heebo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/heebo-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Heebo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/heebo-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Assistant';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/assistant-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Assistant';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/assistant-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* straight from the site's site.css, so the two can never drift apart */
  --page:#100E0D; --ink:#171412; --ink-2:#201B18; --ink-3:#2E2723;
  --bg:#100E0D;
  --line:rgba(244,241,234,.10); --line-2:rgba(244,241,234,.20);
  --fg:#F4F1EA; --fg-dim:#A79F97; --fg-mute:#8B827A;
  --gold:#E8B45C; --goldd:#AD7B3E; --goldx:#694829; --pale:#EFCFA9;
  --magenta:#8B2FAC;            /* the accent, used as an accent — never behind text */
  --ok:#8FBA79; --err:#E0765F;
  --r:2px; --r-lg:3px;          /* the rebuilt site is square-cornered, not 14px-round */
  --wrap:1180px;
  --shadow:0 24px 60px -18px rgba(0,0,0,.7);
  --display:'Heebo', system-ui, sans-serif;
  --font:'Assistant', 'Heebo', system-ui, -apple-system, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--font);
  font-size:16px; line-height:1.6; overflow-x:hidden;
  background-image:
    radial-gradient(115% 65% at 84% -10%, rgba(139,47,172,.20), transparent 60%),
    radial-gradient(85% 55% at 6% 104%, rgba(173,123,62,.16), transparent 64%);
  background-attachment:fixed;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg[viewBox]{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3{margin:0;line-height:1.12;font-family:var(--display);font-weight:200;
 letter-spacing:normal;text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}

/* ------------------------------------------------------------- header */
.hdr{
  position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.7rem clamp(1rem,4vw,2rem);
  background:rgba(16,14,13,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__logo img{display:block;height:32px;width:auto}
.hdr__cta{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  padding:.55rem 1rem; border:1px solid var(--line-2); border-radius:2px;
  font-weight:500; font-size:.9375rem; white-space:nowrap;
  direction:ltr; unicode-bidi:isolate;
}
.hdr__cta svg{width:18px;height:18px;color:var(--gold)}
.hdr__cta:hover{border-color:var(--gold);color:var(--gold)}

main{max-width:var(--wrap); margin:0 auto; padding:0 clamp(1rem,4vw,2rem) 4rem}

/* --------------------------------------------------------------- hero */
.hero{padding:clamp(2.6rem,7vw,5rem) 0 clamp(1.5rem,4vw,2.5rem)}
.hero__kick{font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(232,180,92,.75);font-family:var(--display);margin-bottom:10px}
.hero__foil{height:1px;border:0;width:92px;margin-bottom:18px;background:linear-gradient(90deg,
  transparent,rgba(105,72,41,.85) 6%,#AD7B3E 22%,#EFCFA9 42%,#B87CD4 52%,#8B2FAC 58%,
  #EFCFA9 68%,#AD7B3E 82%,rgba(105,72,41,.85) 94%,transparent)}
.hero h1{font-size:clamp(2.1rem,5.6vw,3.6rem); letter-spacing:normal; max-width:20ch}
.hero h1 em{font-style:normal;font-weight:300;
  background:linear-gradient(150deg,#EFCFA9,#E8B45C 42%,#C89246 74%,#AD7B3E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* the site sets its hero flush to the start edge, not centred */
.hero__sub{margin:1rem 0 0; max-width:56ch; font-weight:300; line-height:1.65; color:var(--fg-dim); font-size:clamp(1rem,2.2vw,1.13rem)}
.hero__pills{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0 0; padding:0; list-style:none}
.hero__pills li{
  font-size:.85rem; color:var(--fg-dim); padding:.35rem .8rem;
  border:1px solid rgba(232,180,92,.24); border-radius:2px; background:rgba(232,180,92,.06);
}
.hero__pills li::before{content:'✓'; color:var(--gold); margin-inline-end:.4rem; font-weight:600}

/* -------------------------------------------------------------- steps */
.step{
  background:linear-gradient(180deg, var(--ink-2), var(--ink));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.1rem,3vw,1.75rem); margin-bottom:1rem; box-shadow:var(--shadow);
}
.step > header{display:flex; align-items:center; gap:.75rem; margin-bottom:.4rem}
.step__num{
  flex:0 0 auto; display:grid; place-items:center; width:32px; height:32px;
  border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,.04);
  font-weight:600; font-size:.95rem; color:var(--fg-dim); transition:.25s;
}
.step.is-done .step__num{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.step.is-done .step__num::after{content:'✓'}
.step.is-done .step__num{font-size:0}
.step.is-done .step__num::after{font-size:1rem}
.step h2{font-size:clamp(1.05rem,2.6vw,1.3rem)}
.step__hint{color:var(--fg-mute); font-size:.9rem; margin:.15rem 0 1rem; padding-inline-start:calc(32px + .75rem)}
.step > header + .cards, .step > header + .field, .step > header + .guests{margin-top:1rem}

.field{margin-top:1.1rem}
.field > label{display:block; font-size:.9rem; color:var(--fg-dim); margin-bottom:.55rem}
.field > label b{color:var(--gold); font-weight:600}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}

/* --------------------------------------------------------- event cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:.6rem}
.card{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:.95rem .5rem; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(255,255,255,.03); cursor:pointer; transition:.18s; text-align:center;
}
.card svg{width:30px; height:30px; color:var(--fg-dim); transition:.18s}
.card span{font-size:.86rem; font-weight:500; line-height:1.2}
.card:hover{border-color:var(--line-2); transform:translateY(-2px)}
.card:hover svg{color:var(--fg)}
.card.is-on{
  border-color:var(--gold); background:rgba(232,180,92,.10);
  box-shadow:0 0 0 1px var(--gold) inset;
}
.card.is-on svg{color:var(--gold)}
.card:focus-visible{outline:2px solid var(--magenta); outline-offset:2px}
.cards--drinks{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}

/* ------------------------------------------------------------- guests */
.guests{display:flex; align-items:baseline; gap:.6rem; justify-content:center; margin-bottom:.9rem}
.guests input{
  width:5.5ch; background:transparent; border:none; border-bottom:2px solid var(--gold);
  color:var(--gold); font:600 clamp(2.2rem,7vw,3.2rem)/1 var(--font);
  text-align:center; padding:0 0 .15rem;
}
.guests input:focus{outline:none; border-bottom-color:var(--magenta); color:var(--fg)}
.guests input::-webkit-outer-spin-button,.guests input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.guests input[type=number]{-moz-appearance:textfield}
.guests__unit{color:var(--fg-mute); font-size:1rem}

.range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background:var(--ink-3); cursor:pointer; margin:0;
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--gold); border:3px solid var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.5); cursor:grab;
}
.range::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--gold);
  border:3px solid var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.5); cursor:grab;
}
.range:focus-visible{outline:2px solid var(--magenta); outline-offset:4px}
.range__ends{display:flex; justify-content:space-between; color:var(--fg-mute); font-size:.78rem; margin-top:.4rem}

/* ------------------------------------------------------- days / chips */
.days{display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem}
.day{
  padding:.7rem .2rem; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(255,255,255,.03); cursor:pointer; font-weight:600; font-size:1rem; transition:.18s;
}
.day:hover{border-color:var(--line-2)}
.day.is-on{border-color:var(--gold); background:rgba(232,180,92,.12); color:var(--gold)}
.day:focus-visible{outline:2px solid var(--magenta); outline-offset:2px}

.chips,.seg{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{
  flex:1 1 auto; min-width:8rem; text-align:start; padding:.7rem .9rem;
  border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.03);
  cursor:pointer; transition:.18s;
}
.chip b{display:block; font-weight:600; font-size:.95rem}
.chip small{display:block; color:var(--fg-mute); font-size:.78rem; line-height:1.35; margin-top:.15rem}
.chip:hover{border-color:var(--line-2)}
.chip.is-on{border-color:var(--gold); background:rgba(232,180,92,.10)}
.chip.is-on b{color:var(--gold)}
.chip:focus-visible{outline:2px solid var(--magenta); outline-offset:2px}
.seg .chip{flex:1 1 0; min-width:0; text-align:center}

/* -------------------------------------------------------- checkboxes */
.grid-checks{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.5rem}
.check{
  display:flex; align-items:center; gap:.6rem; padding:.7rem .85rem;
  border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.03);
  cursor:pointer; transition:.18s; font-size:.93rem;
}
.check svg{width:20px;height:20px;color:var(--fg-mute);flex:0 0 auto}
.check input{position:absolute; opacity:0; pointer-events:none}
.check .box{
  flex:0 0 auto; width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line-2);
  display:grid; place-items:center; transition:.18s;
}
.check .box::after{content:'✓'; font-size:.7rem; color:var(--ink); opacity:0; font-weight:700}
.check:hover{border-color:var(--line-2)}
.check.is-on{border-color:var(--gold); background:rgba(232,180,92,.10)}
.check.is-on .box{background:var(--gold); border-color:var(--gold)}
.check.is-on .box::after{opacity:1}
.check.is-on svg{color:var(--gold)}
.check.is-off{opacity:.38; cursor:not-allowed}
.check:focus-within{outline:2px solid var(--magenta); outline-offset:2px}
.check[hidden]{display:none}

/* ------------------------------------------------------------ actions */
.actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem}
.btn{
  border:none; border-radius:999px; padding:.95rem 1.9rem; font-weight:600; font-size:1rem;
  cursor:pointer; transition:.2s; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
}
.btn:focus-visible{outline:2px solid var(--magenta); outline-offset:3px}
.btn--primary{
  flex:1 1 16rem; background:linear-gradient(100deg, var(--gold), #ffb01f);
  color:var(--ink); box-shadow:0 8px 24px rgba(232,180,92,.22);
}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(232,180,92,.32)}
.btn--ghost{background:transparent; border:1px solid var(--line-2); color:var(--fg-dim)}
.btn--ghost:hover{border-color:var(--fg-dim); color:var(--fg)}
.btn--wa{flex:1 1 16rem; background:#25D366; color:#062b13}
.btn--wa svg{width:20px;height:20px;stroke-width:1.6}
.btn--wa:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,211,102,.28)}

.err{color:var(--err); font-size:.86rem; margin-top:.6rem}
.step.is-bad{border-color:rgba(255,107,107,.5)}

/* ------------------------------------------------------------ results */
.results{margin-top:2.5rem; scroll-margin-top:5rem}
.results__head{text-align:center; margin-bottom:1.5rem}
.results__head h2{font-size:clamp(1.5rem,4vw,2.1rem)}
.results__head p{color:var(--fg-dim); margin-top:.5rem}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin-bottom:1.25rem}
.tile{
  border:1px solid var(--line); border-radius:var(--r); padding:1.1rem .9rem; text-align:center;
  background:linear-gradient(180deg, var(--ink-2), var(--ink));
}
.tile b{display:block; font-size:clamp(1.5rem,4.5vw,2rem); font-weight:600; color:var(--gold); line-height:1.1}
.tile span{display:block; font-size:.85rem; color:var(--fg-dim); margin-top:.3rem}
.tile small{display:block; font-size:.75rem; color:var(--fg-mute); margin-top:.15rem}

.panels{columns:300px 3; column-gap:1rem}
.panel{break-inside:avoid; margin-bottom:1rem}
.panel{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.25rem;
  background:linear-gradient(180deg, var(--ink-2), var(--ink));
}
.panel h3{font-size:1.05rem; color:var(--gold); margin-bottom:.75rem}
.panel__foot{color:var(--fg-mute); font-size:.82rem; margin-top:.75rem}

.tbl{width:100%; border-collapse:collapse; font-size:.93rem}
.tbl tr + tr{border-top:1px solid var(--line)}
.tbl td{padding:.5rem 0; vertical-align:baseline}
.tbl td:first-child{color:var(--fg-dim)}
.tbl td:last-child{text-align:end; font-weight:600; white-space:nowrap}
.tbl td small{display:block; color:var(--fg-mute); font-weight:400; font-size:.76rem}
.tbl tr.is-main td:first-child{color:var(--fg)}
.tbl tr.is-main td:first-child::after{
  content:'מוביל'; margin-inline-start:.5rem; font-size:.68rem; font-weight:600;
  color:var(--ink); background:var(--gold); padding:.1rem .45rem; border-radius:999px;
}

.how{
  margin-top:1rem; border:1px solid var(--line); border-radius:var(--r-lg);
  background:rgba(255,255,255,.02);
}
.how summary{padding:1rem 1.25rem; cursor:pointer; font-weight:600; color:var(--gold); list-style:none}
.how summary::-webkit-details-marker{display:none}
.how summary::before{content:'＋'; margin-inline-end:.5rem; font-weight:400}
.how[open] summary::before{content:'－'}
.how__body{padding:0 1.25rem 1.25rem}
.how__note{color:var(--fg-mute); font-size:.84rem; margin-top:.9rem}

.cta{
  margin-top:1.5rem; padding:clamp(1.25rem,4vw,2rem); border-radius:var(--r-lg); text-align:center;
  background:linear-gradient(135deg, rgba(139,47,172,.14), rgba(232,180,92,.10));
  border:1px solid var(--line-2);
}
.cta h3{font-size:clamp(1.15rem,3vw,1.5rem)}
.cta p{color:var(--fg-dim); margin:.6rem auto 1.25rem; max-width:52ch}
.cta__btns{display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center}

.disclaimer{margin-top:1.5rem; text-align:center; color:var(--fg-mute); font-size:.8rem; line-height:1.7}

/* ------------------------------------------------------------- footer */
.ftr{
  border-top:1px solid var(--line); padding:2rem 1rem; text-align:center;
  color:var(--fg-mute); font-size:.88rem;
}
.ftr img{opacity:.5; margin-bottom:.75rem; height:34px; width:auto}
.ftr a{color:var(--fg-dim)}
.ftr a:hover{color:var(--gold)}

.fab{
  position:fixed; inset-block-end:1.25rem; inset-inline-start:1.25rem; z-index:60;
  width:54px; height:54px; border-radius:50%; background:#25D366; color:#062b13;
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.4); transition:.2s;
}
.fab svg{width:27px;height:27px;stroke-width:1.6}
.fab:hover{transform:scale(1.08)}

/* ------------------------------------------------------------ mobile */
@media (max-width:720px){
  .field-row{grid-template-columns:1fr; gap:1.1rem}
  .step__hint{padding-inline-start:0}
  .days{gap:.3rem}
  .day{padding:.6rem .1rem; font-size:.95rem}
  .actions .btn,.cta__btns .btn{flex:1 1 100%}
  .hdr__cta{padding:.45rem .75rem; font-size:.88rem}
}
@media (max-width:380px){
  .cards{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
  .card span{font-size:.78rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  .btn:hover,.card:hover,.fab:hover{transform:none}
}

/* -------------------------------------------------------------- print */
@media print{
  body{background:#fff; color:#000; background-image:none}
  .hdr,.hero,#calc,.cta,.fab,.ftr,.disclaimer{display:none!important}
  .results{margin:0}
  .results::before{
    content:'מחשבון בר — פרובנט הפקות · provent.co.il · 051-2121493';
    display:block; font-weight:600; margin-bottom:1rem; padding-bottom:.5rem;
    border-bottom:2px solid #000;
  }
  .panel,.tile,.how{border:1px solid #999; background:#fff; break-inside:avoid}
  .panel h3,.tile b,.how summary{color:#000}
  .tbl td:first-child,.tile span,.tile small,.tbl td small{color:#333}
  .how[open] .how__body{display:block}
  .panels{columns:2}
  a[href]::after{content:''}
}