/* ==========================================================================
   style.css — 2025 Vanilla Design System (Dark/Light, Glass, Motion-Safe)
   ========================================================================== */

/* -------------------- Root & Theming -------------------- */
:root {
  color-scheme: dark light;

  /* Palette */
  --bg: #0b0f1a;
  --surface: rgba(255,255,255,0.06);
  --surface-2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.12);
  --text: #e5e7eb;
  --muted: #9aa4b2;

  /* Brand */
  --brand-1: #8b5cf6;   /* violet */
  --brand-2: #22d3ee;   /* cyan   */
  --accent:  #fbbf24;   /* gold   */

  /* Semantic */
  --ok:   #22c55e;
  --err:  #ef4444;

  /* Radii / Blur */
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --blur: 14px;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Kufi Arabic",
               "Noto Sans Arabic", "Helvetica Neue", Arial, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --fs-3xl: clamp(1.8rem, 2vw + 1.2rem, 2.6rem);
  --fs-2xl: clamp(1.4rem, 1.2vw + 1rem, 2.0rem);
  --fs-lg:  1.05rem;
  --fs-md:  0.95rem;
  --fs-sm:  0.86rem;

  /* Spacing */
  --sp-4: 1rem;
  --sp-6: 1.6rem;

  /* Timing */
  --t-fast: .15s;
  --t-med:  .25s;
}
html.light {
  --bg: #f7f8fb;
  --surface: rgba(255,255,255,0.9);
  --surface-2: rgba(245,247,252,0.9);
  --border: rgba(0,0,0,0.08);
  --text: #0f172a;
  --muted: #475569;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* -------------------- Base -------------------- */
* { box-sizing: border-box; }
html { block-size: 100%; }
body {
  min-block-size: 100%; margin: 0;
  font-family: var(--font-sans); color: var(--text);
  background:
    radial-gradient(1200px 700px at 15% -10%, color-mix(in oklab, var(--brand-1) 25%, transparent), transparent 60%),
    radial-gradient(1200px 700px at 115% 0%,  color-mix(in oklab, var(--brand-2) 18%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg));
}
.shell { inline-size: min(1200px, 100%); margin-inline:auto; padding-inline: var(--sp-4); }

/* -------------------- Cards & Decorative ring -------------------- */
.card {
  position: relative; /* ضروري للطبقات */
  background: var(--surface);
  backdrop-filter: blur(var(--blur)) saturate(120%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.ring { position: relative; }
.ring::before{
  content:"";
  position:absolute; inset:-1px; border-radius: inherit; padding:1px;
  background: conic-gradient(from 0deg, var(--brand-1), var(--accent), var(--brand-2), var(--brand-1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: hue 6s linear infinite;
  pointer-events: none; /* أهم سطر لإتاحة الكتابة */
  z-index: 0;          /* يبقى خلف المحتوى */
}
.ring > * { position: relative; z-index: 1; }
@keyframes hue{ to { filter:hue-rotate(360deg); } }

/* -------------------- Header -------------------- */
.header{
  position: sticky; top:0; z-index:40;
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 92%, transparent), transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:.8rem; }
.logo{
  inline-size:44px; block-size:44px; border-radius:12px;
  display:grid; place-items:center; font-weight:900; color:#0f172a;
  background: linear-gradient(135deg, var(--accent), var(--brand-1));
  box-shadow: 0 12px 24px color-mix(in oklab, var(--accent) 25%, transparent);
}
.theme-btn{
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  padding:.65rem .9rem; border-radius:12px; cursor:pointer;
  transition: background var(--t-med), transform var(--t-fast);
}
.theme-btn:hover{ background: color-mix(in oklab, var(--surface-2) 85%, white 15%); transform: translateY(-1px); }

/* -------------------- Type -------------------- */
.h1{ font-size: var(--fs-3xl); font-weight:900; margin:0; }
.h2{ font-size: var(--fs-2xl); font-weight:800; margin:0 0 .5rem; }
.lead{ color:var(--muted); font-size: var(--fs-lg); }

/* -------------------- Form -------------------- */
.field{ display:grid; gap:.45rem; }
.label{ color:var(--muted); font-size:var(--fs-sm); font-weight:600; }
.input, .select{
  inline-size:100%; border:1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 90%, black 10%);
  color:var(--text); border-radius: var(--radius-md);
  padding:.9rem 1rem; font-size: var(--fs-md);
  outline:none; transition: border var(--t-med), box-shadow var(--t-med), background var(--t-med);
}
.input:focus, .select:focus{
  border-color: color-mix(in oklab, var(--brand-1) 65%, var(--border));
  box-shadow: 0 0 0 8px color-mix(in oklab, var(--brand-1) 16%, transparent);
  background: color-mix(in oklab, var(--surface) 70%, black 30%);
}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.1rem; border-radius: var(--radius-md);
  font-weight:800; letter-spacing:.01em; border:1px solid var(--border);
  background: var(--surface-2); color:var(--text); cursor:pointer;
  transition: transform var(--t-fast), background var(--t-med), box-shadow var(--t-med), opacity var(--t-med);
}
.btn:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--surface-2) 86%, white 14%); }
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--brand-1));
  color:#0f172a; border:none;
  box-shadow: 0 14px 28px color-mix(in oklab, var(--accent) 20%, transparent);
}
.btn-primary:hover{ opacity:.96; transform: translateY(-1px); }
.btn.full{ inline-size:100%; }
.btn.lg{ padding:1.05rem 1.25rem; border-radius: var(--radius-lg); }

/* -------------------- Toast / Alerts -------------------- */
.toast{ position:fixed; inset-inline:0; inset-block-start:12px; display:grid; place-items:center; z-index:90; pointer-events:none; }
.toast .item{
  pointer-events:auto; background: color-mix(in oklab, var(--ok) 15%, var(--surface));
  border:1px solid color-mix(in oklab, var(--ok) 45%, var(--border));
  color:#d1fae5; padding:.85rem 1rem; border-radius: var(--radius-md);
  box-shadow: 0 16px 32px rgba(0,0,0,.25);
}
.alert{
  background: color-mix(in oklab, var(--err) 15%, var(--surface));
  border:1px solid color-mix(in oklab, var(--err) 45%, var(--border));
  color:#fecaca; padding:.9rem 1rem; border-radius: var(--radius-md);
}

/* -------------------- Footer -------------------- */
.footer{ color:var(--muted); font-size:var(--fs-sm); text-align:center; padding: var(--sp-6) var(--sp-4); }

/* -------------------- FAB (Social) — Bottom Left -------------------- */
.fab{
  position:fixed; inset-inline-start:1.1rem; inset-block-end:1.1rem; z-index:80;
  display:grid; justify-items:start; gap:.6rem;
}
.fab-toggle{
  inline-size:56px; block-size:56px; border-radius:999px; border:none; cursor:pointer;
  background: linear-gradient(135deg, var(--accent), var(--brand-1)); color:#0f172a; font-weight:900; font-size:1.25rem;
  box-shadow: 0 14px 28px color-mix(in oklab, var(--accent) 20%, transparent);
}
.fab-menu{
  display:grid; gap:.5rem; transform-origin:bottom left;
  transition: opacity var(--t-med), transform var(--t-med);
  opacity:0; transform: translateY(8px) scale(.98); pointer-events:none;
}
.fab.open .fab-menu{ opacity:1; transform:none; pointer-events:auto; }
.fab-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.5rem;
}
.fab-link{
  display:flex; align-items:center; gap:.45rem; text-decoration:none;
  padding:.55rem .8rem; border-radius:12px; border:1px solid var(--border);
  background: var(--surface-2); color:var(--text); font-size: var(--fs-sm);
}
.fab-link:hover{ background: color-mix(in oklab, var(--surface-2) 85%, white 15%); }

/* Brand tints */
.fab-link.whatsapp  { border-color: color-mix(in oklab, #25D366 45%, var(--border)); color:#d1fae5; }
.fab-link.instagram { border-color: color-mix(in oklab, #E1306C 45%, var(--border)); }
.fab-link.twitter   { border-color: color-mix(in oklab, #1DA1F2 45%, var(--border)); }
.fab-link.snapchat  { border-color: color-mix(in oklab, #FFFC00 45%, var(--border)); color:#111; }