/* Talkmen 24 redesign - buying with plan cards (owner approved demo 6 v4, 18/10/2026: eSIM plans as cards, no dropdown).
   Generated 1:1 from the demo sources (build_newsim2.CSS card / summary / phone bar + rngf.CSS filter). Loaded by _EsimBuyNew.cshtml. */
.eq{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.eq .it{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:10px 14px;min-width:0}
.eq .it svg{width:30px;height:30px;color:var(--c);flex:none}.eq .it b{display:block;font-size:15px;font-weight:800;line-height:1.2}.eq .it small{display:block;color:var(--muted);font-size:12px}
.eq .op{display:flex;align-items:center;font-family:var(--display);font-size:28px;font-weight:800;color:var(--c)}
.eq .it.res{background:var(--c);border-color:var(--c);color:#fff}.eq .it.res svg{color:#fff}.eq .it.res small{color:rgba(255,255,255,.85)}
.pc .bund{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);border-radius:999px;padding:3px 10px}.pc .bund svg{width:14px;height:14px}
.pc .pr .bd{display:block;width:100%;font-size:12px;color:var(--muted)}
aside.sum .bundle{display:grid;gap:6px;margin:0 0 10px}aside.sum .bundle div{display:flex;gap:8px;align-items:center;font-weight:700;font-size:15px}aside.sum .bundle svg{width:20px;height:20px;color:var(--c);flex:none}
.stephead{display:flex;gap:12px;align-items:flex-start;margin:28px 0 12px}.stephead .n{width:36px;height:36px;border-radius:50%;background:var(--c);color:#fff;font-weight:800;font-size:18px;display:inline-flex;align-items:center;justify-content:center;flex:none}.stephead h2{font-family:var(--display);font-size:clamp(22px,2.8vw,28px);font-weight:800;margin:0}.stephead p{margin:2px 0 0;color:var(--muted);font-size:15px}
.nsLayout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start;margin-bottom:30px}
.pcGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pc{position:relative;display:flex;flex-direction:column;gap:8px;text-align:start;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:16px;cursor:pointer;font:inherit;color:inherit}
.pc:hover{border-color:var(--c)}.pc[aria-checked=true]{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 26%,transparent);background:color-mix(in srgb,var(--c) 4%,var(--surface))}
.pc .tag{align-self:flex-start;font-size:11px;font-weight:800;background:var(--c);color:#fff;padding:2px 9px;border-radius:999px;margin-bottom:-2px}
.pc .gb{font-family:var(--display);font-size:40px;line-height:1;font-weight:800}.pc .gb small{font-size:18px;color:var(--muted);margin-inline-start:3px}.pc .gb.txt{font-size:20px;line-height:1.2}
.pc .title{font-weight:700;font-size:14px;color:var(--muted);line-height:1.3}
.pc ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}.pc ul li{display:flex;gap:6px;align-items:flex-start}.pc ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex:none;margin-top:8px}
.pc .pr{margin-top:auto;padding-top:10px;border-top:1px dashed var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pc .pr b{font-family:var(--display);font-size:30px;font-weight:800;line-height:1;direction:ltr;unicode-bidi:isolate}.pc .pr s{color:var(--muted);font-size:14px;direction:ltr;unicode-bidi:isolate}
.pc .pr small{display:block;width:100%;color:var(--muted);font-size:12px}
.pc .mark{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--line);border-radius:12px;padding:9px;font-weight:800;font-size:15px}
.pc .mark svg{width:16px;height:16px}.pc[aria-checked=true] .mark{background:var(--c);border-color:var(--c);color:#fff}
aside.sum{position:sticky;top:84px;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
aside.sum .head{display:flex;align-items:center;gap:10px;background:var(--c);color:#fff;padding:12px 16px;font-weight:800}aside.sum .head img{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:10px;padding:2px}
aside.sum .body{padding:16px}aside.sum h3{font-family:var(--display);font-size:20px;font-weight:800;margin:0 0 8px;line-height:1.25}aside.sum .empty{color:var(--muted);font-size:15px;margin:0 0 10px}
aside.sum ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:5px;font-size:14px}aside.sum ul li{display:flex;gap:8px;align-items:flex-start}aside.sum ul li svg{width:16px;height:16px;color:#178A4C;flex:none;margin-top:2px}
.bill div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}.bill .f{color:#178A4C;font-weight:700}.bill .dis span:last-child{color:#178A4C;font-weight:700}.bill .total{border:0;font-weight:800;font-size:19px;padding-top:10px}.bill .total span:last-child{font-size:26px;direction:ltr;unicode-bidi:isolate}
aside.sum .add{margin-top:12px;width:100%;min-height:54px;border:0;border-radius:14px;background:var(--cta);color:#fff;font-weight:800;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}aside.sum .add svg{width:22px;height:22px}
aside.sum .err{color:var(--bad);font-weight:700;font-size:14px;margin-top:8px}
aside.sum .notes{display:grid;gap:6px;margin-top:12px;color:var(--muted);font-size:13px}aside.sum .notes div{display:flex;gap:8px;align-items:flex-start}aside.sum .notes svg{width:16px;height:16px;flex:none;margin-top:2px}
.nsBar{display:none}
.nsBar{display:flex;position:fixed;inset:auto 0 0 0;z-index:40;background:var(--surface);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:12px;align-items:center;box-shadow:0 -8px 24px rgba(18,24,38,.08)}
.nsBar .t{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1}.nsBar .t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nsBar .t span{font-size:13px;color:var(--muted)}.nsBar .btn{min-height:48px;padding:0 22px;border:0;border-radius:14px;background:var(--cta);color:#fff;font-weight:800;font-size:16px}
.pcGrid{grid-template-columns:1fr 1fr;gap:10px}.pc{padding:12px}.pc .gb{font-size:32px}.pc .pr b{font-size:24px}}
@media (max-width:520px){.eq .op{font-size:22px}.eq .it{padding:8px 10px}.eq .it svg{width:24px;height:24px}}
@media (max-width:900px){.nsLayout{grid-template-columns:1fr}aside.sum{position:static}.nsBar{display:flex;position:fixed;inset:auto 0 0 68px;z-index:40;background:var(--surface);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:12px;align-items:center;box-shadow:0 -8px 24px rgba(18,24,38,.08)}.nsBar .t{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1}.nsBar .t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nsBar .t span{font-size:13px;color:var(--muted)}.nsBar .btn{min-height:48px;padding:0 22px;border:0;border-radius:14px;background:var(--cta);color:#fff;font-weight:800;font-size:16px}.pcGrid{grid-template-columns:1fr 1fr;gap:10px}.pc{padding:12px}.pc .gb{font-size:32px}.pc .pr b{font-size:24px}body.tm:has(.nsBar){padding-bottom:80px}body.tm:has(.nsBar) .WhatsappIcon{display:none}body.tm:has(#cc-banner:not([hidden])) .nsBar{bottom:var(--ccH,150px)}}
@media (max-width:420px){.pcGrid{grid-template-columns:1fr}}
.note2{background:#FFF3DF;color:#7A4A00;border:1px solid #F5D9A8;border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600;margin-top:12px}
/* site glue: the mark shows "בחירה" / "נבחרה" by state, the summary blocks switch by state, Script.js's own price spans stay hidden */
.pc .mark .on{display:none}.pc[aria-checked=true] .mark .on{display:inline-flex;align-items:center;gap:6px}.pc[aria-checked=true] .mark .off{display:none}
aside.sum .sim-error-message{color:var(--bad);font-weight:700;font-size:14px;margin-top:8px}
.esimBuy .scriptBits,.simBuy .scriptBits,.embedSec .scriptBits{display:none}
.esimBuy aside.sum .add[disabled]{opacity:.6;cursor:not-allowed}
/* plan filter (shared, demo rngf.py) */
.tmf{background:var(--surface,#fff);border:1.5px solid var(--line,#E3E3DF);border-radius:20px;padding:14px 18px 10px;margin:4px auto 16px;box-shadow:0 6px 18px rgba(18,24,38,.06);max-width:760px;width:100%;box-sizing:border-box;text-align:start}
.tmfTop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tmfQ{font-weight:800;font-size:16px}
.tmf .seg{display:inline-flex;background:var(--soft,#F0F0EC);border-radius:999px;padding:4px;gap:4px}
.tmf .seg button{border:0;background:transparent;border-radius:999px;padding:8px 16px;font:inherit;font-weight:800;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--muted,#5F6672);transition:background .15s,color .15s}
.tmf .seg button svg{width:18px;height:18px;flex:none}
.tmf .seg button[aria-checked=true]{background:#1D5BFF;color:#fff;box-shadow:0 2px 8px rgba(29,91,255,.35)}
.tmf .seg button:focus-visible{outline:3px solid var(--ink,#15181F);outline-offset:2px}
.tmf .one{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:#1D5BFF;font-size:15px}
.tmf .one svg{width:18px;height:18px}
.tmfRead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0 2px}
.tmfRead b{font-family:var(--display,inherit);font-size:30px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink,#15181F)}
.tmfRead span{color:var(--muted,#5F6672);font-weight:700;font-size:14px}
.tmfRead button{margin-inline-start:auto;border:0;background:none;text-decoration:underline;font:inherit;font-weight:700;cursor:pointer;color:var(--ink,#15181F);font-size:14px;padding:4px}
.tmf input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:10px;border-radius:999px;margin:16px 0 6px;padding:0;border:0;background:linear-gradient(var(--gdir,to right),var(--line,#E3E3DF) 0 var(--a),#1D5BFF var(--a) var(--b),var(--line,#E3E3DF) var(--b) 100%);cursor:pointer;box-shadow:none}
html[dir=rtl] .tmf input[type=range]{--gdir:to left}
.tmf input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid #1D5BFF;box-shadow:0 2px 8px rgba(18,24,38,.25)}
.tmf input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid #1D5BFF;box-shadow:0 2px 8px rgba(18,24,38,.25)}
.tmf input[type=range]:focus-visible{outline:3px solid var(--ink,#15181F);outline-offset:8px}
@media (prefers-reduced-motion:no-preference){.tmf.idle input[type=range]::-webkit-slider-thumb{animation:tmfPulse 1.8s ease-in-out infinite}}
@keyframes tmfPulse{0%,100%{box-shadow:0 2px 8px rgba(18,24,38,.25),0 0 0 0 rgba(29,91,255,.40)}50%{box-shadow:0 2px 8px rgba(18,24,38,.25),0 0 0 10px rgba(29,91,255,0)}}
.tmfTicks{position:relative;height:20px;margin:0 15px}
.tmfTicks span{position:absolute;top:0;inset-inline-start:var(--x);transform:translateX(50%);font-size:12px;font-weight:700;color:var(--muted,#5F6672);white-space:nowrap;font-variant-numeric:tabular-nums}
html[dir=ltr] .tmfTicks span{transform:translateX(-50%)}
.tmfTicks span.on{color:#1D5BFF}
.tmfEmpty{grid-column:1/-1;background:var(--surface,#fff);border:1px dashed var(--line,#E3E3DF);border-radius:16px;padding:18px;text-align:center;font-weight:700}
.tmfEmpty button{margin-inline-start:8px;border:0;background:none;text-decoration:underline;font:inherit;font-weight:800;cursor:pointer;color:#1D5BFF}
@media (max-width:640px){.tmf{padding:12px 12px 8px}.tmfTop{flex-direction:column;align-items:stretch}.tmf .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.tmf .seg button{justify-content:center;padding:8px 6px}.tmfRead b{font-size:26px}}

/* the wrapper keeps the class Script.js looks for (.catPageSimDiv: product id, messages key, GA list) without the old buy-card box */
.tm .esimBuy.catPageSimDiv{display:block;padding:0;border:0;background:none;box-shadow:none;border-radius:0}
.tm .esimSec{padding-top:8px}
/* Bootstrap styles .mark (yellow); the demo's mark has no fill until it is chosen */
.tm .esimBuy .pc .mark{background:none;padding:9px}
.tm .esimBuy .pc[aria-checked=true] .mark{background:var(--c)}

/* new SIM (owner approved demo 7 v4, 18/10/2026): hero, what-you-get, how-it-works, hub tiles, the block inside the top-up page - 1:1 from build_newsim2.CSS */
.nsHero h1 em{display:block;font-style:normal;color:var(--muted);font-size:.7em}
.nsHero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:center;margin-top:10px}
.nsHero .vis{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;display:flex;align-items:center;justify-content:center}
.nsHero .vis img{max-width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.nsHero .vis .free{position:absolute;bottom:12px;inset-inline-start:12px;background:var(--c);color:#fff;font-weight:800;font-size:13px;border-radius:999px;padding:4px 12px}
.nsHero h1{font-family:var(--display);font-size:clamp(28px,4vw,44px);line-height:1.08;font-weight:800;margin:0 0 8px}
.nsHero p{color:var(--muted);font-size:17px;margin:0 0 12px;max-width:58ch}
.gets{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;padding:0;margin:0}.gets li{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600}.gets li svg{width:16px;height:16px;color:#178A4C;flex:none}
.simBuy .filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.simBuy .filters button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:700;cursor:pointer}.simBuy .filters button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.how4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}.how4>div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}.how4 i{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center;font-style:normal;font-weight:800;margin-bottom:8px}.how4 b{display:block;font-size:16px;margin-bottom:4px}.how4 p{margin:0;color:var(--muted);font-size:14px}
.hubTiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:16px}
.ht{display:grid;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-top:6px solid var(--c);border-radius:20px;padding:16px;text-decoration:none;color:inherit}
.ht .top{display:flex;gap:12px;align-items:center}.ht .top img{width:96px;height:64px;object-fit:contain;background:#fff;border-radius:10px;border:1px solid var(--line)}.ht .top b{font-size:19px;font-weight:800;display:block}.ht .top span{color:var(--muted);font-size:13px}
.ht .from{display:flex;align-items:baseline;gap:6px}.ht .from strong{font-family:var(--display);font-size:30px;font-weight:800;direction:ltr;unicode-bidi:isolate}.ht .from small{color:var(--muted);font-size:13px}
.ht .peek{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--muted)}.ht .peek li{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:4px}.ht .peek li b{color:var(--ink);direction:ltr;unicode-bidi:isolate}
.ht .go{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:12px;background:var(--cta);color:#fff;font-weight:800}
.ht:hover{border-color:var(--c)}
.embedSec{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;margin:16px 0 30px}
.embedSec .eh{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;margin-bottom:14px}.embedSec .eh img{width:120px;height:80px;object-fit:contain}.embedSec h2{font-family:var(--display);font-size:clamp(22px,3vw,30px);font-weight:800;margin:0}.embedSec .eh p{margin:4px 0 0;color:var(--muted)}
.embedSec .eRow{align-items:start;display:grid;grid-auto-flow:column;grid-auto-columns:min(250px,76vw);gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}.embedSec .eRow .pc{scroll-snap-align:start}
.embedSec .line{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.embedSec .line .sel{font-weight:700}.embedSec .line .sel b{font-family:var(--display);font-size:24px;direction:ltr;unicode-bidi:isolate}.embedSec .line .btns{display:flex;gap:10px;flex-wrap:wrap}
.embedSec .line .add{min-height:50px;border:0;border-radius:14px;background:var(--cta);color:#fff;font-weight:800;font-size:17px;padding:0 22px;cursor:pointer}.embedSec .line a{display:inline-flex;align-items:center;min-height:50px;padding:0 16px;border:1.5px solid var(--line);border-radius:14px;color:var(--ink);font-weight:700;text-decoration:none}
@media (max-width:900px){.nsHero{grid-template-columns:1fr}.nsHero .vis{order:-1;max-width:320px}.how4{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.how4{grid-template-columns:1fr}.embedSec .eh{grid-template-columns:80px 1fr}.embedSec .eh img{width:80px;height:54px}}
.tm .simBuy.catPageSimDiv,.tm .embedSec.catPageSimDiv{display:block;grid-template-columns:none;gap:0;box-shadow:none}
.tm .simBuy.catPageSimDiv{padding:0;border:0;background:none;border-radius:0}
.embedSec .btns .sim-error-message{flex-basis:100%;color:var(--bad);font-weight:700;font-size:14px}
.tm .simBuy .pc .mark,.tm .embedSec .pc .mark{background:none;padding:9px}.tm .simBuy .pc[aria-checked=true] .mark,.tm .embedSec .pc[aria-checked=true] .mark{background:var(--c)}
aside.sum ul.inc{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:5px;font-size:14px}

/* 18/10/2026 demo 10 (recommended packages, _ReccNew): each card shows its carrier - a colour stripe on top, the logo and name, a link to all of its plans */
.tm .reccGrid .card{position:relative;padding-top:14px}
.tm .reccGrid .card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:5px;border-radius:16px 16px 0 0;background:var(--c)}
.tm .reccGrid .rcar{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;margin-bottom:2px;padding-inline-end:64px}
.tm .reccGrid .rcar img{width:30px;height:30px;object-fit:contain;background:#fff;border-radius:8px;border:1px solid var(--line);padding:2px}
.tm .reccGrid .all{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--muted);margin-top:2px}