/* =========================================================
   Sufra Ramadan — Light Pastel Theme (MVP)
   - ملف واحد لكل الصفحات (index/recipe/cook)
   - زخرفة خفيفة SVG (بدون تحميل ملفات)
   ========================================================= */

:root{
  --bg: #fbf7ef;          /* كريمي */
  --bg2:#f6fbff;          /* لمسة سماوية */
  --panel:#ffffffcc;
  --card:#ffffffea;

  --ink:#0f172a;
  --muted:#5b6b82;
  --line: rgba(15, 23, 42, .10);

  --brand:#2aa7b8;        /* تركواز CIT */
  --brand2:#f2c14e;       /* ذهبي باستيل */
  --shadow: 0 12px 30px rgba(2, 6, 23, .10);

  --radius: 18px;

  /* Stages (جاهزة للـ Cook Mode) */
  --prep:#3b82f6;
  --cook:#f59e0b;
  --rest:#10b981;
}

*{box-sizing:border-box}
a{color:inherit;text-decoration:none}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 450px at 12% 0%, rgba(42,167,184,.18), transparent 60%),
    radial-gradient(900px 450px at 88% 0%, rgba(242,193,78,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

/* زخرفة رمضانية خفيفة (فوانيس + هلال) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background-repeat:no-repeat;
  background-size: 520px auto, 420px auto, 320px auto;
  background-position: left -40px top -30px, right -60px top -20px, center bottom -40px;
  /* 3 SVGs data-uri */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='420' viewBox='0 0 620 420'%3E%3Cg fill='none' stroke='%232aa7b8' stroke-width='3' opacity='.55'%3E%3Cpath d='M120 0v70'/%3E%3Cpath d='M120 70c0 22-18 40-40 40s-40-18-40-40 18-40 40-40 40 18 40 40z'/%3E%3Cpath d='M80 110v60c0 22 18 40 40 40s40-18 40-40v-60'/%3E%3Cpath d='M80 170h80'/%3E%3Cpath d='M120 210v55'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f2c14e' stroke-width='3' opacity='.55'%3E%3Cpath d='M260 10v60'/%3E%3Cpath d='M260 70c0 24-20 44-44 44s-44-20-44-44 20-44 44-44 44 20 44 44z'/%3E%3Cpath d='M216 114v62c0 24 20 44 44 44s44-20 44-44v-62'/%3E%3Cpath d='M216 176h88'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='320' viewBox='0 0 520 320'%3E%3Cg opacity='.5'%3E%3Cpath fill='%23f2c14e' d='M372 64c-56 0-102 46-102 102 0 56 46 102 102 102 20 0 39-6 55-16-10 3-21 5-33 5-56 0-102-46-102-102 0-44 29-82 69-96-3 0-6-1-9-1z'/%3E%3Ccircle cx='406' cy='120' r='6' fill='%232aa7b8'/%3E%3Ccircle cx='444' cy='92' r='5' fill='%232aa7b8'/%3E%3Ccircle cx='458' cy='142' r='4' fill='%232aa7b8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='220' viewBox='0 0 520 220'%3E%3Cg opacity='.25'%3E%3Cpath fill='%232aa7b8' d='M40 180c80-40 140-40 220 0s140 40 220 0v40H40z'/%3E%3C/g%3E%3C/svg%3E");
}

/* حاوية عامة */
.wrap{max-width:1100px;margin:0 auto;padding:18px}

/* Top bar / header */
.top{
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:16px 18px;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--radius);box-shadow:var(--shadow);
  backdrop-filter: blur(8px);
}

.logo{
  width:44px;height:44px;border-radius:16px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 18px rgba(2,6,23,.12);
  flex:0 0 auto;
}

.h1{font-weight:1000;font-size:22px;line-height:1.2}
.sub,.muted{color:var(--muted);font-size:13px;margin-top:4px}

/* Cards */
.card, .ing, .step, .cardLike{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
}

.card{padding:14px;display:block;transition:transform .15s ease,border-color .15s ease}
.card:hover{transform:translateY(-2px);border-color:rgba(42,167,184,.35)}

/* Pills / badges / small labels */
.pill{
  display:inline-flex;gap:8px;align-items:center;
  padding:6px 10px;border:1px solid var(--line);
  border-radius:999px;background:rgba(42,167,184,.08);
  font-size:12px;color:var(--muted);
}

/* Buttons */
.btn,.btnPrimary,.btnGhost{
  border:none;cursor:pointer;
  padding:10px 12px;border-radius:12px;
  font-weight:900;
}
.btnPrimary{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#06222a;
  box-shadow:0 10px 18px rgba(2,6,23,.12);
}
.btnGhost{
  background:rgba(255,255,255,.55);
  color:var(--ink);
  border:1px solid var(--line);
}

/* Inputs / selects (في index) */
select, input, textarea{
  border:1px solid var(--line);
  background:rgba(255,255,255,.70);
  color:var(--ink);
  padding:10px 12px;
  border-radius:14px;
  outline:none;
  font-weight:800;
}

/* Progress bar (Cook Mode) */
.barWrap{
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  height:14px;
  background:rgba(2,6,23,.04);
}
.bar{height:100%;width:0%;background:linear-gradient(90deg,var(--brand),var(--brand2))}

/* Responsive helpers */
@media(max-width:640px){
  .wrap{padding:14px}
}

/* Cook controls polish */
.controls{
  align-items:center;
}

.controls select{
  height: 42px;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 900;
}

.controls .btn{
  height: 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

/* Select polish (more button-like) */
.controls select{
  appearance:none;
  -webkit-appearance:none;
  background:rgba(255,255,255,.75);
  border:1px solid var(--line);
  box-shadow:0 10px 18px rgba(2,6,23,.08);
}

/* tiny arrow */
.controls select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.65) 50%),
    linear-gradient(135deg, rgba(15,23,42,.65) 50%, transparent 50%);
  background-position:
    calc(14px) 50%,
    calc(8px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* =========================================================
   FIX: Notify dock not clickable (z-index / pointer-events)
   ========================================================= */

/* حاول تغطية أسماء محتملة للحاوية (بغض النظر عن اسمها الحقيقي) */
#sufraNotifyDock,
#notifyDock,
#sufraDock,
.sufra-notify-dock,
.sufraNotifyDock,
.notify-dock,
.sufra-dock,
.sufra-notify,
.sufra-toolbar,
.sufra-fab{
  position: fixed !important;
  bottom: 16px !important;
  left: 16px !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* تأكد أن كل ما داخلها قابل للنقر */
#sufraNotifyDock *,
#notifyDock *,
#sufraDock *,
.sufra-notify-dock *,
.notify-dock *,
.sufra-dock *,
.sufra-notify *,
.sufra-toolbar *,
.sufra-fab *{
  pointer-events: auto !important;
}

/* شكل الزر */
#sufraNotifyDock button,
#notifyDock button,
#sufraDock button,
.sufra-notify-dock button,
.notify-dock button,
.sufra-dock button,
.sufra-notify button,
.sufra-toolbar button,
.sufra-fab button{
  cursor: pointer !important;
}