/* בסיס: משתני צבע (בהיר/כהה), טיפוגרפיה, רכיבים משותפים */
:root{
  --bg:#E4E8E5; --bg-2:#D6DBD7; --surface:#FCFCF9; --ink:#1E272B; --ink-soft:#55626A; --line:#C8CEC9;
  --red:#8E2311; --red-hover:#A52B16; --red-ink:#FFFFFF; --green:#3F6B0A; --green-soft:#EAF2DC;
  --paper:#F4EFE4; --focus:#1F5FD1; --shade:rgba(0,0,0,.28);
  --steel-a:#D3D8DB; --steel-b:#B3BABE;
  --font:'Rubik',system-ui,'Segoe UI',Arial,sans-serif;
  --font-display:'Secular One','Rubik',sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#161C1F; --bg-2:#20292D; --surface:#222B2F; --ink:#EEF1EF; --ink-soft:#A6B2B7; --line:#36444A;
    --red:#D2553C; --red-hover:#DD6A52; --red-ink:#FFFFFF; --green:#93C85A; --green-soft:#26331A;
    --paper:#2C3438; --focus:#86B4FF; --shade:rgba(0,0,0,.45);
    --steel-a:#2E363A; --steel-b:#1E2427;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#161C1F; --bg-2:#20292D; --surface:#222B2F; --ink:#EEF1EF; --ink-soft:#A6B2B7; --line:#36444A;
  --red:#D2553C; --red-hover:#DD6A52; --red-ink:#FFFFFF; --green:#93C85A; --green-soft:#26331A;
  --paper:#2C3438; --focus:#86B4FF; --shade:rgba(0,0,0,.45);
  --steel-a:#2E363A; --steel-b:#1E2427;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;color:var(--ink);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 4px),linear-gradient(160deg,var(--steel-a),var(--steel-b));
  background-attachment:fixed;
  font-family:var(--font);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
button,a,input{font:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* בקרת בחירה מפולחת (גודל, אזור, משלוח) */
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;margin:0;border:0;background:var(--bg-2);border-radius:12px;min-width:0}
.seg.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.seg span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:4px 8px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--ink-soft);text-align:center;line-height:1.2}
.seg span small{display:block;font-weight:400;font-size:12px}
#sizeSeg span small,#variantSeg span small{display:block}
.seg input:checked + span{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 2px 6px -3px rgba(0,0,0,.25)}
.seg input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.seg svg{width:16px;height:16px;flex:none}

/* כפתורים */
.cta{all:unset;box-sizing:border-box;display:block;width:100%;text-align:center;cursor:pointer;background:var(--red);color:var(--red-ink);font-weight:700;font-size:17px;padding:14px;border-radius:10px}
@media (hover:hover){.cta:hover{background:var(--red-hover)}}
.linkbtn{all:unset;display:block;margin:12px auto 0;cursor:pointer;color:var(--ink-soft);text-decoration:underline;font-size:14px}
.cta:focus-visible,.linkbtn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* דיאלוגים */
dialog{border:0;border-radius:16px;padding:22px;max-width:min(92vw,380px);background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgba(10,15,18,.55)}
dialog h2{margin:0 0 8px;font-family:var(--font-display);font-weight:400;font-size:22px}
dialog p{margin:0 0 16px;color:var(--ink-soft)}

/* הלוגו שקוף וכהה: במצב כהה מקבל רקע לבן כדי שיהיה קריא */
:root[data-theme="dark"] .logo img,:root[data-theme="dark"] .slip-logo{background:#FFFFFF;padding:6px 10px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo img,:root:not([data-theme="light"]) .slip-logo{background:#FFFFFF;padding:6px 10px}}