/* ============================================================
   منصة حجز الاستشارات — AIOMAN
   الهوية الفاتحة الحيّة · 2026
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@200;300;400;500;600;700&display=swap');

:root{
  /* ===== الأسطح ===== */
  --ink:#F4F6F8;          /* سطح الصفحة — ورق بارد */
  --panel:#FFFFFF;
  --panel-2:#FAFBFD;      /* سطح داخلي مرتفع قليلاً */
  --sunk:#F1F4F7;         /* سطح غائر (رؤوس الجداول، الأشرطة) */
  --line:rgba(13,18,32,.07);
  --line-2:rgba(13,18,32,.13);
  --text:#0D1220;         /* حبر كحلي — ليس أسوداً مائلاً للرمادي */
  --dim:#4C5873;          /* رمادي أزرق ينتمي للحبر */
  --faint:#8891A6;

  /* ===== اللون المميّز — يسري من نوع الاستشارة المختار ===== */
  --accent:#0E7490;
  --accent-soft:rgba(14,116,144,.085);
  --accent-line:rgba(14,116,144,.28);
  --on-accent:#FFFFFF;

  /* ===== دلالات ===== */
  --ok:#0F7A43;   --ok-soft:rgba(15,122,67,.09);
  --warn:#9A5B06; --warn-soft:rgba(154,91,6,.10);
  --bad:#B3261E;  --bad-soft:rgba(179,38,30,.08);

  /* ===== أنصاف الأقطار — تدرّج حسب الدور، لا قيمة واحدة ===== */
  --r-chip:10px; --r:14px; --r-card:18px; --r-xl:26px; --r-hero:32px;

  /* ===== العمق — محيط + ضوء، طبقتان ===== */
  --e1:0 1px 2px rgba(13,18,32,.04);
  --e2:0 1px 2px rgba(13,18,32,.04), 0 10px 20px -10px rgba(13,18,32,.13);
  --e3:0 2px 4px rgba(13,18,32,.05), 0 22px 44px -18px rgba(13,18,32,.18);
  --e4:0 4px 10px rgba(13,18,32,.06), 0 46px 90px -28px rgba(13,18,32,.26);

  /* ===== الحركة ===== */
  --t:.2s cubic-bezier(.4,0,.2,1);
  --t-out:.42s cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--text);
  font-family:'IBM Plex Sans Arabic',system-ui,'Segoe UI',Tahoma,sans-serif;
  font-weight:400; font-size:16px; line-height:1.65; min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}

/* ===== الهالة — العنصر الحيّ الوحيد الذي يتحرك دون تفاعل ===== */
body::before{
  content:''; position:fixed; inset:-28% -15% auto -15%; height:74vh;
  z-index:0; pointer-events:none; opacity:.62;
  background:
    radial-gradient(34% 44% at 16% 26%, color-mix(in srgb,var(--accent) 34%,transparent), transparent 70%),
    radial-gradient(30% 38% at 86% 14%, rgba(109,40,217,.2), transparent 70%);
  filter:blur(52px) saturate(112%);
  animation:aurora 28s ease-in-out infinite alternate;
  transition:background .6s ease;
}
@keyframes aurora{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(-3.5%,2.5%,0) scale(1.1)}
}
.wrap{position:relative; z-index:1}

/* ===== المقياس الطباعي ===== */
h1,h2,h3,h4{line-height:1.22; font-weight:600; letter-spacing:-.025em}
h1{font-weight:700; letter-spacing:-.035em}
button,input,select,textarea{font:inherit; color:inherit; font-variant-numeric:inherit}
a{color:var(--accent); text-decoration:none; transition:opacity var(--t)}
a:hover{opacity:.78}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.hidden{display:none!important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ===== لحظة الظهور المنسّقة — مرة واحدة عند التحميل ===== */
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.rise{animation:rise .55s var(--t-out) both; animation-delay:var(--d,0ms)}

/* ===== أزرار ملموسة ===== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border:1px solid transparent; border-radius:999px;
  padding:.78rem 1.6rem; font-size:.95rem; font-weight:600; cursor:pointer;
  color:var(--on-accent);
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 88%,#fff), var(--accent));
  box-shadow:var(--e1), 0 8px 18px -10px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:transform var(--t), box-shadow var(--t), filter var(--t);
}
.btn:hover:not(:disabled){transform:translateY(-1.5px);
  box-shadow:var(--e2), 0 14px 26px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn:active:not(:disabled){transform:translateY(0) scale(.985); transition-duration:.08s}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none; filter:grayscale(.3)}
.btn.ghost{background:var(--panel); color:var(--text); border-color:var(--line-2); box-shadow:var(--e1)}
.btn.ghost:hover:not(:disabled){background:#fff; border-color:var(--accent);
  color:var(--accent); box-shadow:var(--e2)}
.btn.sm{padding:.42rem 1rem; font-size:.84rem}
.btn.danger{background:var(--bad-soft); color:var(--bad);
  border-color:rgba(179,38,30,.22); box-shadow:none}
.btn.danger:hover:not(:disabled){background:rgba(179,38,30,.13); box-shadow:none}

/* ===== حقول غائرة ===== */
.field{display:flex; flex-direction:column; gap:.4rem}
.field > label{font-size:.875rem; font-weight:500; color:var(--text); letter-spacing:-.01em}
.field .req{color:var(--bad); margin-inline-start:.15rem}
.field .hint{font-size:.78rem; color:var(--faint)}
.field .err{font-size:.8rem; color:var(--bad); min-height:1.1em}
.input{
  width:100%; background:var(--panel); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:.78rem .95rem;
  box-shadow:inset 0 1px 2px rgba(13,18,32,.045);
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
.input::placeholder{color:var(--faint)}
.input:hover:not(:focus){border-color:rgba(13,18,32,.26)}
.input:focus{outline:none; border-color:var(--accent); background:#fff;
  box-shadow:inset 0 1px 2px rgba(13,18,32,.02), 0 0 0 4px var(--accent-soft)}
.input.invalid{border-color:var(--bad); box-shadow:inset 0 1px 2px rgba(13,18,32,.02), 0 0 0 4px var(--bad-soft)}
select.input{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:12px calc(50% - 2px), 17px calc(50% - 2px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-inline-start:2rem}
textarea.input{resize:vertical; min-height:92px; line-height:1.7}

/* ===== وسوم الحالة ===== */
.tag{display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .72rem;
  border-radius:999px; font-size:.785rem; font-weight:600; white-space:nowrap;
  letter-spacing:-.01em}
.tag.ok{background:var(--ok-soft); color:var(--ok)}
.tag.warn{background:var(--warn-soft); color:var(--warn)}
.tag.bad{background:var(--bad-soft); color:var(--bad)}
.tag.info{background:var(--accent-soft); color:var(--accent)}
.tag.mute{background:rgba(13,18,32,.055); color:var(--dim)}

/* ===== تنبيه ===== */
.toast{
  position:fixed; bottom:1.5rem; inset-inline:0; margin-inline:auto; z-index:200;
  width:max-content; max-width:92vw; padding:.82rem 1.35rem;
  background:#0D1220; color:#F4F6F8; border:1px solid rgba(255,255,255,.12);
  border-radius:999px; box-shadow:var(--e4); font-size:.92rem; font-weight:500;
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.97);
  transition:opacity var(--t-out), transform var(--t-out), visibility var(--t-out);
}
.toast.show{opacity:1; visibility:visible; transform:none}
.toast.bad{background:#7D1A15; border-color:rgba(255,255,255,.14)}
.toast.ok{background:#0B5230; border-color:rgba(255,255,255,.14)}

.spinner{display:inline-block; width:18px; height:18px; vertical-align:-3px;
  border:2px solid var(--line-2); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.empty{padding:2.6rem 1rem; text-align:center; color:var(--faint); font-size:.93rem}

/* ===== نوافذ ===== */
dialog{margin:auto; border:0; padding:0; background:var(--panel); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-xl); max-height:92vh;
  width:min(620px,94vw); box-shadow:var(--e4);
  animation:dlgIn .3s var(--t-out) both}
@keyframes dlgIn{from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none}}
dialog::backdrop{background:rgba(13,18,32,.42); backdrop-filter:blur(5px) saturate(.9);
  animation:fade .25s ease both}
@keyframes fade{from{opacity:0} to{opacity:1}}
dialog .d-head{display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.15rem 1.45rem; border-bottom:1px solid var(--line)}
dialog .d-head h3{font-size:1.1rem}
dialog .d-body{padding:1.35rem 1.45rem; overflow:auto; max-height:68vh}
dialog .d-foot{display:flex; justify-content:flex-end; gap:.6rem;
  padding:1rem 1.45rem; border-top:1px solid var(--line); background:var(--panel-2);
  border-radius:0 0 var(--r-xl) var(--r-xl)}
.x{background:none; border:0; color:var(--faint); font-size:1.5rem; line-height:1;
  cursor:pointer; padding:.1rem .45rem; border-radius:8px; transition:all var(--t)}
.x:hover{color:var(--text); background:rgba(13,18,32,.055)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-delay:0ms!important;
    animation-iteration-count:1!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}