/* خط Cairo الأساسي */
* { font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* ألوان العلامة */
:root {
  --raqeem-primary: #0F766E;       /* teal-700 */
  --raqeem-primary-dark: #115E59;  /* teal-800 */
  --raqeem-accent: #F59E0B;        /* amber-500 */
  --raqeem-bg: #F8FAFC;
  --raqeem-ink: #0F172A;
}

html { scroll-behavior: smooth; }
body { background-color: var(--raqeem-bg); }

/* تحسين حجم الخط للمستخدمين الأكبر سناً */
.text-xxl { font-size: 1.25rem; line-height: 1.9; }

/* زر كبير سهل اللمس */
.btn-primary {
  background: linear-gradient(135deg, #0F766E 0%, #115E59 100%);
  color: white;
  padding: 0.9rem 1.4rem;
  border-radius: 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 4px 14px rgba(15,118,110,0.35);
  transition: transform .15s, box-shadow .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  cursor: pointer;
  border: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,118,110,0.4); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-ghost {
  background: white;
  color: #0F766E;
  padding: 0.9rem 1.4rem;
  border-radius: 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  border: 2px solid #0F766E;
  cursor: pointer;
  transition: background .15s;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}
.btn-ghost:hover { background: #F0FDFA; }

.card {
  background: white;
  border-radius: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(15,23,42,0.04);
  padding: 1.25rem;
}

.progress-bar {
  height: 12px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0F766E, #14B8A6);
  transition: width .4s ease;
  border-radius: 999px;
}

/* شبكة إطار التصوير الموجَّه */
.photo-frame {
  position: relative;
  background: #0f172a;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.photo-frame video, .photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-frame .overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.photo-frame .guide-box {
  border: 3px dashed rgba(255,255,255,0.85);
  border-radius: 0.75rem;
  width: 80%; height: 70%;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
}
.photo-frame .hint {
  position: absolute; top: 12px; left: 12px; right: 12px;
  background: rgba(15,118,110,0.9); color: white;
  padding: .5rem .8rem; border-radius: .6rem;
  font-weight: 700; text-align: center; font-size: .95rem;
}

/* chip */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #F0FDFA; color: #0F766E;
  padding: .25rem .7rem; border-radius: 999px;
  font-weight: 700; font-size: .85rem;
  border: 1px solid #CCFBF1;
}
.chip-warn { background:#FEF3C7; color:#92400E; border-color:#FDE68A;}
.chip-danger { background:#FEE2E2; color:#991B1B; border-color:#FECACA;}
.chip-ok { background:#DCFCE7; color:#166534; border-color:#BBF7D0;}

/* step indicator */
.step-dot {
  width: 36px; height: 36px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background:#E2E8F0; color:#475569; font-weight:800;
  flex-shrink: 0;
}
.step-dot.active { background: var(--raqeem-primary); color:white; box-shadow: 0 0 0 4px #CCFBF1; }
.step-dot.done { background:#14B8A6; color:white; }
.step-line { flex:1; height:3px; background:#E2E8F0; border-radius:2px;}
.step-line.done { background:#14B8A6; }

/* مخطط تدفق */
.flow-node {
  background: white; border: 2px solid #0F766E;
  border-radius: 1rem; padding: .9rem 1rem;
  text-align: center; font-weight: 700; color: #115E59;
  box-shadow: 0 4px 10px rgba(15,118,110,0.08);
  min-width: 180px;
}
.flow-node.accent { background:#0F766E; color:white; }
.flow-node.warn { border-color:#F59E0B; color:#92400E; background:#FFFBEB;}
.flow-arrow { color:#0F766E; font-weight:900; }

/* طبقة الشكر */
.confetti {
  position: fixed; inset: 0; pointer-events: none; overflow:hidden;
}

/* mockup phone frame */
.phone-frame {
  background:#0f172a; border-radius: 2.5rem; padding: 14px;
  box-shadow: 0 30px 60px rgba(15,23,42,0.35);
}
.phone-screen {
  background: #F8FAFC; border-radius: 2rem; overflow:hidden;
  aspect-ratio: 9/19.5; width: 320px;
}

/* hide scrollbar on horizontal scroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* sticky save bar */
.save-bar {
  position: sticky; bottom: 0; z-index: 20;
  background: linear-gradient(180deg, rgba(248,250,252,0) 0%, rgba(248,250,252,1) 25%);
  padding: 1rem 0 .5rem;
}