/* ============================================================
   ثيم "نيون" (Neon) · Horina 1.48.0
   غامق بس: خلفية بشبكة ثابتة، زوايا مقصوصة (clip-path)، حدود رفيعة منوّرة، عناوين كوفي كبيرة،
   وأرقام Chakra Petch زي شاشات الألعاب. المرجع المعتمد: docs/design/themes/neon.html
   الحركة (Jhey + Emil): الاختيار فوري بتوهّج ثابت (بيتكرر كتير = من غير حركة ومن غير نبض)،
   شريط الحجز بيتفتح بقصّ سريع مرة واحدة، والتأكيد لوحة بتتفتح بقصّ وعنوانها بيتشوّش مرة واحدة بس.
   كله بيقف مع reduced-motion. مفيش توهّج متكرر ولا ضباب على كل حاجة.
   ألوان الثيم (1.49.0): التوهّج والماجنتا والبنفسجي جايين من ألوان الثيم اللي المشتري بيعدّلها (--pal-*)،
   وكل الدرجات الشفافة مشتقّة منهم بـ color-mix، فمفيش لون مكتوب ثابت.
   ============================================================ */

:root{
  --nn-cy:var(--pal-glow,#22F2CF); --nn-mg:var(--pal-pink,#FF3D8B); --nn-vi:var(--pal-violet,#8C5CFF);
  --nn-line:color-mix(in srgb,var(--nn-cy) 22%,transparent); --nn-soft:rgba(255,255,255,.07);
  --nn-glow:0 0 0 1px var(--nn-cy),inset 0 0 14px color-mix(in srgb,var(--nn-cy) 22%,transparent);
  --nn-cut:12px;
  --nn-mono:'Chakra Petch',var(--font);
  --nn-fast:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);min-height:100dvh;line-height:1.65;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  background:
    radial-gradient(90% 38% at 50% 0%,color-mix(in srgb,var(--nn-vi) 20%,transparent),transparent 70%),
    linear-gradient(color-mix(in srgb,var(--nn-cy) 4.5%,transparent) 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,color-mix(in srgb,var(--nn-cy) 4.5%,transparent) 1px,transparent 1px) 0 0/28px 100%,
    var(--canvas);background-attachment:fixed}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--nn-cy);outline-offset:3px}
h1,h2,h3,.page-title,.page-h{font-family:var(--font-h);font-weight:700;line-height:1.25}
.nn-mono{font-family:var(--nn-mono)}
.nn-cut,.nn .card,.nn .btn,.nn-btn,.nn .summary,.nn .timer-card,.nn .state,.nn .qcard,.nn .pcard,.nn .day-card{
  clip-path:polygon(var(--nn-cut) 0,100% 0,100% calc(100% - var(--nn-cut)),calc(100% - var(--nn-cut)) 100%,0 100%,0 var(--nn-cut))}
.nn-tag{font-family:var(--nn-mono);font-size:11px;font-weight:600;letter-spacing:2px;color:var(--nn-cy)}

/* ===== الشريط العلوي ===== */
.nn-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 4px;max-width:760px;margin:0 auto}
.nn-brand{min-width:0;display:flex;flex-direction:column;line-height:1.1}
.nn-brand small{font-family:var(--nn-mono);font-size:10px;letter-spacing:3px;color:var(--muted);margin-top:3px}
/* اللوجو على لوح فاتح: أغلب اللوجوهات متصمّمة لخلفية فاتحة فكلامها الغامق يختفي على الأسود */
.nn-brand img{display:block;height:28px;width:auto;box-sizing:content-box;padding:5px 10px;background:var(--ink);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.nn-acts{display:flex;align-items:center;gap:8px}
.nn-ib{width:42px;height:42px;display:inline-grid;place-items:center;background:var(--surface);border:1px solid var(--nn-line);color:var(--ink);position:relative;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:color 140ms var(--nn-fast),border-color 140ms var(--nn-fast)}
.nn-ib:hover{color:var(--nn-cy);border-color:var(--nn-cy)}
.nn-badge{position:absolute;top:4px;inset-inline-end:4px;min-width:16px;height:16px;padding:0 4px;background:var(--nn-mg);color:#fff;font-family:var(--nn-mono);font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}
.nn .lsw-btn{height:42px;border-radius:0!important;background:var(--surface)!important;border:1px solid var(--nn-line)!important;color:var(--ink)!important;font-family:var(--nn-mono)}
.nn .lsw-menu{border-radius:0!important;background:var(--tile)!important;border:1px solid var(--nn-line)!important}

/* ===== الحاوية والعناوين ===== */
.wrap,.nn-main{max-width:560px;margin:0 auto;padding:18px 16px 124px;position:relative}
.back{display:inline-flex;align-items:center;gap:6px;font-family:var(--nn-mono);font-size:12px;letter-spacing:1px;color:var(--muted);margin-bottom:14px}
.back:hover{color:var(--nn-cy)}
.page-title,.page-h{font-size:30px;margin-bottom:6px}
.page-sub{font-size:13.5px;color:var(--muted);margin-bottom:20px;line-height:1.8}

/* ===== الأساسيات البنيوية (الـ layout بتاع الثيم بيحل محل الأساسي) ===== */
.card{padding:20px}
.btn-block,.nn .card .btn{display:flex;width:100%}
.chip{font-size:11px;padding:3px 10px;white-space:nowrap}
.stat{display:flex;justify-content:space-between;align-items:center;gap:10px}
.stat + .stat{margin-top:12px;padding-top:12px;border-top:1px dashed var(--nn-line)}
.stat .k{font-size:13px;color:var(--muted)}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty svg{opacity:.5;margin-bottom:12px}
.empty p{font-size:13.5px;margin-bottom:16px}
.alert,.err-note{background:var(--dbg);color:var(--dink);padding:12px 14px;font-size:13px;margin-bottom:16px;line-height:1.7}
.notice{background:var(--wbg);color:var(--wink);padding:12px 14px;font-size:13px;margin-bottom:16px;line-height:1.7}
.ok,.ok-note{background:var(--okbg);color:var(--okink);padding:12px 14px;font-size:13px;margin-bottom:16px;line-height:1.7}
.field{margin-bottom:16px}
.field label,.pfield label{display:block;margin-bottom:6px}
.wrap input[type=text],.wrap input[type=email],.wrap input[type=tel],.wrap input[type=password],.wrap input[type=number],.wrap input[type=date],
.wrap select,.wrap textarea,.nn-main input[type=text],.nn-main input[type=email],.nn-main input[type=tel],.nn-main input[type=password],.nn-main select,.nn-main textarea,.field input{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);padding:12px 14px}
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:8px}
.remember input{width:16px;height:16px;accent-color:var(--nn-cy)}
.muted-link{display:block;text-align:center;font-size:13px;color:var(--muted);margin-top:18px}
.bk{display:block;margin-bottom:12px}
.bk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.bk-svc{font-size:12.5px;color:var(--muted);margin-top:2px}
.bk-meta{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted);padding-top:10px}

/* ===== المكوّنات المشتركة (بتعيد رسم صفحات العميل اللي فيها منطق) ===== */
.nn .card,.nn .summary,.nn .timer-card,.nn .svc-card,.nn .cat-tile,.nn .rv-item,.nn .feed-card,.nn .pcard,.nn .day-card,.nn .ad-item,.nn .nt-item,.nn .np,.nn .bk-card,.nn .qcard,.nn .res-hero{
  background:linear-gradient(160deg,color-mix(in srgb,var(--tile) 96%,transparent),color-mix(in srgb,var(--surface) 96%,transparent));border:1px solid var(--nn-line);border-radius:0;box-shadow:none}
.nn .card-t,.nn .ptitle{font-family:var(--font-h);font-size:20px;font-weight:700;color:var(--ink)}
.nn .btn,.nn .pts-use,.nn .cpn-apply,.nn .pick-btn,.nn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border:none;border-radius:0;
  font-family:var(--font);font-weight:600;font-size:15px;background:var(--nn-cy);color:var(--on-p);cursor:pointer;
  transition:transform 120ms var(--nn-fast),box-shadow 160ms var(--nn-fast),background-color 160ms var(--nn-fast)}
.nn .btn:hover,.nn .pts-use:hover,.nn .cpn-apply:hover,.nn-btn:hover{background:color-mix(in srgb,var(--nn-cy) 80%,#fff);color:var(--on-p)}
.nn .btn:active,.nn .pts-use:active,.nn .cpn-apply:active,.nn-btn:active{transform:scale(.97)}
.nn-btn.ghost,.nn .btn[style*="var(--tile)"]{background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--nn-line)}
.nn-btn.ghost:hover,.nn .btn[style*="var(--tile)"]:hover{box-shadow:inset 0 0 0 1px var(--nn-cy)}
.nn .pts-remove,.nn .cpn-remove,.nn .qa,.nn .qa-primary,.nn .qa-danger{border-radius:0;border:1px solid var(--nn-line);background:transparent;color:var(--ink)}
.nn .chip,.nn .ad-chip,.nn .bk-count{border-radius:0;font-family:var(--nn-mono);letter-spacing:.5px}
.nn .chip.ok{background:var(--okbg);color:var(--okink)}
.nn .chip.warn{background:var(--wbg);color:var(--wink)}
.nn .chip.bad{background:var(--dbg);color:var(--dink)}
.nn .stat .v,.nn .bk-amt,.nn .sum-v.price,.nn .sum-row.total b{font-family:var(--nn-mono);font-weight:700;color:var(--nn-cy)}
.nn .stat .v{font-size:18px}
.nn .sum-row,.nn .sum-row + .sum-row{border-color:var(--nn-line)}
.nn .alert,.nn .err-note,.nn .err-flash,.nn .notice,.nn .ok,.nn .ok-note,.nn .ok-flash{border-radius:0;border-inline-start:3px solid currentColor}
.nn .empty,.nn .qempty,.nn .gempty{border:1px dashed var(--nn-line);border-radius:0;background:color-mix(in srgb,var(--surface) 70%,transparent)}

/* الحقول */
.nn .field label,.nn .pfield label{font-size:12.5px;font-weight:600;color:var(--muted)}
.nn .field input,.nn .field textarea,.nn .field select,.nn .pfield input,.nn .pfield select,.nn .pfield textarea,.nn .cpn-form input,.nn .wrap input[type=text],.nn .wrap input[type=tel],.nn .wrap input[type=email],.nn .wrap input[type=password],.nn .wrap select,.nn .wrap textarea,.nn .search-box,.nn .ld-search,
.nn .nn-main input[type=text],.nn .nn-main input[type=email],.nn .nn-main input[type=tel],.nn .nn-main input[type=password],.nn .nn-main select,.nn .nn-main textarea{
  border:1px solid var(--nn-soft);border-radius:0;background:color-mix(in srgb,var(--canvas) 80%,transparent);color:var(--ink);min-height:50px;box-shadow:none;outline:none;transition:border-color 140ms var(--nn-fast),box-shadow 140ms var(--nn-fast)}
.nn .field input:focus,.nn .field textarea:focus,.nn .pfield input:focus,.nn .cpn-form input:focus,.nn .wrap input:focus,.nn .wrap select:focus,.nn .wrap textarea:focus,.nn .search-box:focus-within,.nn .nn-main input:focus,.nn .nn-main select:focus,.nn .nn-main textarea:focus{
  border-color:var(--nn-cy);box-shadow:var(--nn-glow);outline:none}
.nn input::placeholder,.nn textarea::placeholder{color:var(--faint)}
.nn .addr-opt{border:1px solid var(--nn-line);border-radius:0;background:var(--surface)}
.nn .file-drop{border:1px dashed var(--nn-line);border-radius:0}
.nn .muted-link a{color:var(--nn-cy);font-weight:600}

/* البحث والاقتراحات */
.nn .search-box svg{color:var(--nn-cy)}
.nn .suggest{border:1px solid var(--nn-line);border-radius:0;background:var(--tile)}
.nn .suggest-item{border-bottom:1px solid var(--nn-soft)}
.nn .suggest-item:hover,.nn .suggest-item.active{background:var(--p050)}
.nn .suggest-ic,.nn .suggest-tag,.nn .search-clear{border-radius:0}
.nn .suggest-all{background:var(--p050);color:var(--nn-cy)}

/* الحجوزات وحساب العميل */
.nn .bk{background:transparent;border:none;box-shadow:none;padding:0;margin:0}
/* كشف حركات النقاط: صفوف جوه الكارت بفاصل متقطّع (مش كروت) */
.nn .tx{padding:13px 2px;border-top:1px dashed var(--nn-line)}
.nn .tx:first-of-type{border-top:none;padding-top:4px}
.nn .tx-meta{font-family:var(--nn-mono);font-size:11.5px;color:var(--muted);line-height:1.6}
.nn .tx-amt{font-family:var(--nn-mono);font-size:18px}
.nn .tx-amt.pos{color:var(--nn-cy)}
.nn .tx-amt.neg{color:var(--nn-mg)}
.nn .tx-badge{border-radius:0}
.nn .bk-name{font-family:var(--font-h);font-size:19px;font-weight:700}
.nn .bk-meta{border-top:1px dashed var(--nn-line)}
.nn .date-tab,.nn .time-btn,.nn .slot,.nn .bk-tab,.nn .qchip,.nn .qslot,.nn .gday,.nn .cat-tile .ic,.nn .suggest-ic{border-radius:0}
.nn .bk-tab,.nn .qchip,.nn .date-tab{background:var(--surface);border:1px solid var(--nn-soft);color:var(--muted);font-family:var(--nn-mono)}
.nn .bk-tab.active,.nn .qchip.on,.nn .date-tab.active{background:var(--p050);color:var(--nn-cy);box-shadow:var(--nn-glow);border-color:var(--nn-cy)}

/* تبويبات الحساب */
.nn-tabs{display:flex;gap:8px;overflow-x:auto;padding:14px 16px 4px;max-width:760px;margin:0 auto;scrollbar-width:none}
.nn-tabs::-webkit-scrollbar{display:none}
.nn-tab{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;font-size:13px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--nn-soft);position:relative;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.nn-tab.on{color:var(--nn-cy);border-color:var(--nn-cy);box-shadow:inset 0 0 12px color-mix(in srgb,var(--nn-cy) 20%,transparent)}
.nn-tab .nn-badge{position:static}
.nn-tab.out{color:var(--dink)}
.nn-main.acct{max-width:760px}

/* ===== القائمة السفلية: لوح عايم بزوايا مقصوصة، والمختار عليه خط منوّر ثابت ===== */
.nn-nav{position:fixed;bottom:12px;inset-inline:12px;z-index:30;max-width:536px;margin:0 auto;height:64px;display:grid;grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--nn-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  clip-path:polygon(var(--nn-cut) 0,100% 0,100% calc(100% - var(--nn-cut)),calc(100% - var(--nn-cut)) 100%,0 100%,0 var(--nn-cut))}
.nn-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;color:var(--muted);position:relative;transition:color 140ms var(--nn-fast)}
.nn-nav a:hover{color:var(--ink)}
.nn-nav a.on{color:var(--nn-cy)}
.nn-nav a.on::before{content:"";position:absolute;top:0;inset-inline:24%;height:2px;background:var(--nn-cy);box-shadow:0 0 10px var(--nn-cy)}
.nn-nav a.book{color:var(--on-p);background:var(--nn-cy);margin:8px 4px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}

/* ===== صفحات الدخول ===== */
.nn-auth .wrap{padding-top:14px}
.nn-auth .card{padding:24px 20px}

/* ===== التأكيد: لوحة بتتفتح بقصّ من فوق، والعنوان بيتشوّش مرة واحدة (لحظة نادرة) ===== */
.nn .state{border:1px solid var(--nn-cy);border-radius:0;background:linear-gradient(160deg,color-mix(in srgb,var(--tile) 98%,transparent),color-mix(in srgb,var(--surface) 98%,transparent));padding:26px 18px;margin-bottom:22px;box-shadow:inset 0 0 40px -12px color-mix(in srgb,var(--nn-cy) 45%,transparent)}
.nn .state.ok{color:var(--ink);animation:nn-open 240ms var(--nn-fast) backwards}
.nn .state.pend{color:var(--ink);border-color:var(--wink);box-shadow:none}
.nn .state.bad{background:var(--dbg);color:var(--dink);border-color:var(--nn-mg);box-shadow:none}
.nn .state-ic{border-radius:0;background:var(--p050);color:var(--nn-cy);border:1px solid var(--nn-cy);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.nn .state-t{font-family:var(--font-h);font-size:30px;font-weight:700;line-height:1.25}
.nn .state.ok .state-t{color:var(--nn-cy);text-shadow:0 0 14px color-mix(in srgb,var(--nn-cy) 45%,transparent);animation:nn-glitch 240ms steps(1) 200ms 1 both}
.nn .state-s{color:var(--muted);opacity:1}
@keyframes nn-open{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes nn-glitch{0%{transform:translate(2px,-1px) skewX(-8deg);text-shadow:-2px 0 var(--nn-mg),2px 0 var(--nn-cy)}33%{transform:translate(-2px,1px) skewX(6deg)}66%{transform:translate(1px,0);text-shadow:1px 0 var(--nn-mg)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .nn .state.ok,.nn .state.ok .state-t{animation:none}
}