/* site editor engine — glue for the classic markup embedded in engine pages (account dashboard,
   checkout flow, product page): Tailwind runs without preflight and its palette maps to --c-* vars. */
.sf{--site-card:var(--c-surface);--site-border:var(--c-border);--site-text:var(--c-text);--site-muted:var(--c-muted);--site-primary:var(--c-primary);--site-surface-alt:var(--c-surface2);--site-bg:var(--c-bg);--site-danger:var(--c-danger);--site-button-text:var(--c-onPrimary);--color-brand:var(--c-primary);--dp-brand:var(--c-primary)}
.sf .bg-white{background-color:var(--c-surface)!important}
.sf .bg-gray-50,.sf .bg-gray-100,.sf .bg-gray-100\/80,.sf .bg-gray-50\/50{background-color:var(--c-surface2)!important}
.sf .nse-classic img{max-width:100%}
.sf .nse-classic h1,.sf .nse-classic h2,.sf .nse-classic h3{line-height:1.25}
.sf .nse-classic .no-underline{text-decoration:none}
.sf .nse-classic input[type=text],.sf .nse-classic input[type=email],.sf .nse-classic input[type=number],.sf .nse-classic input[type=search],.sf .nse-classic input[type=tel],.sf .nse-classic input[type=password],.sf .nse-classic textarea,.sf .nse-classic select{font:inherit;color:var(--c-in_text);background:var(--c-in_bg);border:.5px solid var(--c-in_border);border-radius:calc(var(--sr) * .7);padding:10px 14px;outline:0;width:100%}
.sf .nse-classic input:focus,.sf .nse-classic textarea:focus{border-color:var(--c-in_focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-in_focus) 20%,transparent)}
.sf .nse-classic button{font-family:inherit}
/* ── account (classic dashboard styles, palette-mapped) ── */
/* ── Phone field ─────────────────────────────── */
    .ns-phone-field { position: relative; z-index: 2; }
    .ns-phone-field:focus-within { z-index: 45; }
    .ns-phone-row { display: flex; align-items: stretch; gap: 0.5rem; width: 100%; }
    .ns-phone-dial-wrap { position: relative; flex-shrink: 0; }
    .ns-phone-dial-btn {
      display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem;
      padding: 0.45rem 0.65rem; border-radius: 0.75rem;
      border: 1.5px solid var(--c-border); background: var(--c-surface); font-size: 0.875rem; font-weight: 600; cursor: pointer;
      transition: border-color .15s, box-shadow .15s;
    }
    .dark .ns-phone-dial-btn { border-color: var(--c-border); background: var(--c-surface); color: var(--c-text); }
    .ns-phone-dial-btn:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 12%, transparent); }
    .ns-phone-dial-flag { font-size: 1.15rem; line-height: 1; }
    .ns-phone-dial-e164 { font-variant-numeric: tabular-nums; }
    .ns-phone-dial-chevron { opacity: 0.5; flex-shrink: 0; }
    .ns-phone-dropdown {
      position: absolute; left: 0; top: calc(100% + 6px); width: min(100vw - 2rem, 20rem);
      border-radius: 0.75rem; border: 1px solid var(--c-border); background: var(--c-surface);
      box-shadow: 0 16px 48px rgba(0,0,0,.12); overflow: hidden; z-index: 120;
    }
    .dark .ns-phone-dropdown { border-color: var(--c-border); background: var(--c-surface); }
    .ns-phone-dropdown-search { width: 100%; padding: 0.5rem 0.75rem; border: 0; border-bottom: 1px solid var(--c-border); font-size: 0.875rem; background: transparent; outline: none; }
    .dark .ns-phone-dropdown-search { border-color: var(--c-border); color: var(--c-text); }
    .ns-phone-dropdown-list { max-height: min(16rem, 42vh); overflow-y: auto; }
    .ns-phone-dropdown-item {
      display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: start;
      padding: 0.5rem 0.75rem; border: 0; border-bottom: 1px solid var(--c-border);
      background: transparent; font-size: 0.8125rem; cursor: pointer;
    }
    .dark .ns-phone-dropdown-item { border-color: var(--c-border); color: var(--c-text); }
    .ns-phone-dropdown-item:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
    .ns-phone-item-meta { min-width: 0; flex: 1; }
    .ns-phone-item-name { display: block; font-weight: 500; }
    .ns-phone-item-dial { font-family: ui-monospace, monospace; font-weight: 600; }
    .ns-phone-dropdown.hidden { display: none; }

    /* ── Base input style ────────────────────────── */
    .ns-input {
      width: 100%; height: 2.75rem; padding: 0 0.75rem;
      border-radius: 0.75rem; border: 1.5px solid var(--c-border);
      background: var(--c-surface); font-size: 0.875rem; color: var(--c-text);
      transition: border-color .15s ease, box-shadow .15s ease;
      outline: none; -webkit-appearance: none; appearance: none;
    }
    .dark .ns-input { border-color: var(--c-border); background: var(--c-surface); color: var(--c-text); }
    .ns-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 12%, transparent); }
    .dark .ns-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 14%, transparent); }
    .ns-input::placeholder { color: var(--c-muted); }
    /* phone national input inside flex */
    .ns-phone-national {
      flex: 1; min-width: 0; height: 2.75rem; padding: 0 0.75rem;
      border-radius: 0.75rem; border: 1.5px solid var(--c-border);
      background: var(--c-surface); font-size: 0.875rem; color: var(--c-text);
      transition: border-color .15s ease, box-shadow .15s ease;
      outline: none;
    }
    .dark .ns-phone-national { border-color: var(--c-border); background: var(--c-surface); color: var(--c-text); }
    .ns-phone-national:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 12%, transparent); }

    /* ── Avatar hover edit overlay ───────────────── */
    .ns-av-wrap { position: relative; display: inline-block; }
    .ns-av-edit {
      position: absolute; inset: 0; border-radius: 1rem;
      background: rgba(0,0,0,.38); display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 3px;
      color: var(--c-surface); font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
      opacity: 0; transition: opacity .2s; cursor: pointer;
    }
    .ns-av-wrap:hover .ns-av-edit { opacity: 1; }
    @media (pointer: coarse) {
      .ns-av-edit { opacity: 0 !important; }
    }

    /* ── Generated password reveal ───────────────── */
    .ns-genpw-box {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.6rem 0.75rem; border-radius: 0.75rem;
      background: color-mix(in srgb, var(--c-primary) 6%, transparent); border: 1.5px solid color-mix(in srgb, var(--c-primary) 20%, transparent);
    }
    .dark .ns-genpw-box { background: color-mix(in srgb, var(--c-primary) 8%, transparent); border-color: color-mix(in srgb, var(--c-primary) 25%, transparent); }
    .ns-genpw-text {
      flex: 1; min-width: 0;
      font-family: 'SF Mono','Fira Code',Menlo,monospace;
      font-size: 0.78rem; font-weight: 700; color: var(--c-primary);
      word-break: break-all; letter-spacing: .05em;
    }
    .dark .ns-genpw-text { color: var(--c-primary); }
    .ns-genpw-copy {
      flex-shrink: 0; padding: 0.2rem 0.5rem; border-radius: 0.375rem;
      border: 1.5px solid color-mix(in srgb, var(--c-primary) 30%, transparent); color: var(--c-primary);
      font-size: 0.6875rem; font-weight: 700; background: transparent; cursor: pointer;
      transition: background .15s;
    }
    .dark .ns-genpw-copy { color: var(--c-primary); border-color: color-mix(in srgb, var(--c-primary) 30%, transparent); }
    .ns-genpw-copy:hover { background: color-mix(in srgb, var(--c-primary) 10%, transparent); }

    /* ── Section divider label ───────────────────── */
    .ns-section-lbl {
      font-size: 0.625rem; font-weight: 800; text-transform: uppercase;
      letter-spacing: .08em; color: var(--c-muted);
    }
    .dark .ns-section-lbl { color: var(--c-muted); }

/* ── Account dashboard (signed in) — engine look: hairline cards, list rows, store palette ── */
.sf #acc-main-card.acc-card--logged{max-width:660px;padding:0;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important}
.sf .accx{display:flex;flex-direction:column;gap:24px;text-align:start}
.sf .accx .hidden{display:none!important}
.sf .accx-hi{font-size:clamp(24px,6vw,30px);font-weight:800;letter-spacing:var(--tr);line-height:1.15;margin:14px 4px 0}
.sf .accx-hi #acc-first-name{color:var(--c-primary)}
.sf .accx-wave{margin-inline-start:6px}
.sf .accx-card{background:var(--c-surface);border:.5px solid var(--c-border);border-radius:calc(var(--sr) * 1.25);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sf .accx-muted{color:var(--c-muted);font-size:.86em;line-height:1.5;overflow-wrap:anywhere}
.sf .accx-num{font-variant-numeric:tabular-nums}
/* profile */
.sf .accx-me{padding:18px}
.sf .accx-me-row{display:flex;align-items:center;gap:14px}
.sf .accx-av{width:56px;height:56px;flex:none;border-radius:calc(var(--sr) * .9);object-fit:cover;background:var(--c-surface2)}
.sf .accx-av-i{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.35em;color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 12%,var(--c-surface))}
.sf .accx-me-txt{min-width:0;flex:1}
.sf:not(.en) .accx-me-txt p[dir=ltr]{text-align:right}
.sf .accx-name{font-weight:700;font-size:1.08em;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf .accx-me-actions{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:.5px solid var(--c-border)}
.sf .accx-me-actions .b{flex:1;min-width:0}
.sf .accx .b iconify-icon{flex:none}
.sf .b.sec.accx-out{color:var(--c-danger)}
/* sections + list rows */
.sf .accx-sec{display:flex;flex-direction:column;gap:10px}
.sf .accx-sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px}
.sf .accx-sec-h h2{font-size:1.12em;font-weight:800;letter-spacing:-.01em}
.sf .accx-list{list-style:none;margin:0;padding:0;overflow:hidden}
.sf .accx-list>li+li{border-top:.5px solid var(--c-border)}
.sf .accx-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:0;color:inherit;font:inherit;text-align:start;cursor:default}
.sf button.accx-row{cursor:pointer;transition:background .15s}
.sf button.accx-row:hover{background:color-mix(in srgb,var(--c-text) 3%,transparent)}
.sf .accx-row-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.sf .accx-row-t{display:flex;align-items:center;gap:8px;font-weight:700;line-height:1.35}
.sf .accx-row-t>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf .accx-row-s{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;color:var(--c-muted);font-size:.84em;line-height:1.5}
.sf .accx-row-s .sep{opacity:.5}
.sf .accx-row-end{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.sf .accx-chev{flex:none;color:var(--c-muted);transition:transform .2s}
.sf .accx-row[aria-expanded=true] .accx-chev{transform:rotate(180deg)}
.sf .accx-mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.82em;letter-spacing:0;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
.sf .accx-date{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap}
/* device picture */
.sf .accx-thumb{width:44px;height:64px;flex:none;display:flex;align-items:center;justify-content:center}
.sf .accx-thumb img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.16))}
.sf .accx-thumb iconify-icon,.sf .accx-ico iconify-icon{color:var(--c-primary)}
.sf .accx-ico{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--sr) * .7);background:color-mix(in srgb,var(--c-primary) 12%,transparent)}
/* chips */
/* «مشترياتي» digital order cards (the preview): open, the codes visible, one card per order */
.sf .accx-card{border:1px solid var(--c-border);border-radius:18px;background:var(--c-surface);overflow:hidden}
.sf ul#acc-purchases-list:has(.accx-card){display:flex;flex-direction:column;gap:12px;border:0;background:none}
.sf .accx-card .accx-row{padding:14px 16px 8px;align-items:flex-start}
.sf .accx-cbody{padding:0 16px 14px;display:flex;flex-direction:column;gap:8px}
.sf .accx-code{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--c-surface2,var(--c-bg))}
.sf .accx-code code{flex:1;min-width:0;font:600 .95em ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-all;text-align:start}
.sf .accx-cbtn{flex:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sf .accx-cbtn.ok{color:var(--c-success,#16a34a);border-color:currentColor}
.sf .accx-more{display:flex;flex-direction:column;gap:8px}
.sf .accx-more.hidden{display:none}
.sf .accx-link{align-self:flex-start;background:none;border:0;padding:2px 0;font:inherit;font-weight:600;font-size:.9em;color:var(--c-text);text-decoration:underline;cursor:pointer}
.sf .accx-card .accx-resend{align-self:flex-start}
.sf .accx-chip{display:inline-flex;align-items:center;gap:5px;flex:none;padding:1px 9px;border-radius:100px;font-size:.74em;font-weight:700;line-height:1.7;white-space:nowrap;background:var(--c-surface2);color:var(--c-muted)}
.sf .accx-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.sf .accx-chip.ok{background:var(--c-success_bg);color:var(--c-success)}
.sf .accx-chip.warn{background:var(--c-warning_bg);color:var(--c-warning)}
.sf .accx-chip.bad{background:var(--c-danger_bg);color:var(--c-danger)}
/* warranty */
.sf .accx-bar{height:6px;border-radius:100px;background:var(--c-surface2);overflow:hidden}
.sf .accx-bar i{display:block;height:100%;border-radius:inherit;background:var(--c-success)}
.sf .accx-bar.warn i{background:var(--c-warning)}
.sf .accx-bar.bad i{background:var(--c-danger)}
.sf .accx-wmini{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:.8em;color:var(--c-muted)}
.sf .accx-wmini .accx-bar{flex:1;max-width:140px;height:5px}
.sf .accx-warranty{margin-top:16px;padding:14px;border-radius:var(--sr);background:var(--c-surface2)}
.sf .accx-warranty-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-weight:700}
.sf .accx-warranty .accx-bar{background:color-mix(in srgb,var(--c-text) 8%,transparent)}
.sf .accx-warranty p{margin-top:8px;font-size:.84em;color:var(--c-muted)}
/* one device */
.sf .accx-detail{padding:16px}
.sf .accx-detail>.accx-note{margin-top:16px}
.sf .accx-detail,.sf .accx-sec{scroll-margin-top:84px}
.sf .accx-detail-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sf .accx-dev{display:flex;align-items:center;gap:16px;margin-top:16px}
.sf .accx-dev .accx-thumb{width:60px;height:92px}
.sf .accx-dev-txt{min-width:0;flex:1}
.sf .accx-dev h2{font-size:1.3em;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.sf .accx-copyrow{display:flex;align-items:center;gap:8px;margin-top:8px}
.sf .accx-copyrow code{min-width:0;flex:1;padding:8px 11px;border-radius:calc(var(--sr) * .6);background:var(--c-surface2);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.8em;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere;text-align:left}
.sf .accx-copyrow .b{flex:none}
.sf .accx-copyrow code{white-space:pre-wrap}
.sf .accx-dlbtn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;margin-top:10px}
.sf .accx-store-note{margin-top:12px}.sf .accx-store-note b{display:block;margin-bottom:4px}.sf .accx-store-note p{margin:0;white-space:pre-line}
.sf .accx-resend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.sf .accx-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.sf .accx-actions .b{width:100%}
.sf .accx-dl{margin:14px 0 0;padding:0}
.sf .accx-dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 2px;border-bottom:.5px solid var(--c-border)}
.sf .accx-dl>div:last-child{border-bottom:0;padding-bottom:2px}
.sf .accx-dl dt{flex:none;color:var(--c-muted);font-size:.88em}
.sf .accx-dl dd{margin:0;min-width:0;font-weight:600;text-align:end;overflow-wrap:anywhere}
.sf .accx-dl dd small{display:block;margin-top:2px;color:var(--c-muted);font-weight:500;font-size:.82em}
.sf .accx-up{margin-top:16px;padding:14px;border-radius:var(--sr);border:.5px dashed var(--c-border)}
.sf .accx-up h3{font-size:1em;font-weight:800}
.sf .accx-up .b{margin-top:10px}
/* purchase details */
.sf .accx-body{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px}
.sf .accx-body .accx-copyrow{margin-top:0}
.sf .accx-label{font-size:.78em;font-weight:700;color:var(--c-muted)}
.sf .accx-note{padding:10px 12px;border-radius:calc(var(--sr) * .7);font-size:.86em;line-height:1.6;background:var(--c-surface2);color:var(--c-muted)}
.sf .accx-note.warn{background:var(--c-warning_bg);color:var(--c-warning)}
.sf .accx-price{font-weight:700;font-size:.9em;font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
/* empty + loading */
.sf .accx-empty{padding:28px 20px;text-align:center}
.sf .accx-empty iconify-icon{color:var(--c-primary);opacity:.85}
.sf .accx-empty p{margin-top:6px}
.sf .accx-empty p:first-of-type{margin-top:10px;font-weight:700}
.sf .accx-skel{display:flex;flex-direction:column;gap:12px;padding:16px}
.sf .accx-skel i{display:block;height:52px;border-radius:calc(var(--sr) * .7);background:var(--c-surface2);animation:accxPulse 1.2s ease-in-out infinite}
@keyframes accxPulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.sf .accx-skel i{animation:none}}
/* signed in: the dashboard greets the customer — the page intro and the sign-in perks step aside */
.sf:has(#panel-logged:not(.hidden)) .pgh,.sf:has(#panel-logged:not(.hidden)) .wrap:has(>.benef){display:none}
html.acc-in .sf .pgh,html.acc-in .sf .benef{display:none}