/* =====================================================================
   هوية منصة "أنا" فوق Metronic v9.2.4
   ---------------------------------------------------------------------
   يُحمَّل بعد dash/assets/css/styles.css ولا يعدّله إطلاقاً، حتى تبقى
   ترقية Metronic ممكنة بلا فقدان الهوية.
   اللون الأساسي #4c3177 هو بنفسجي GOVI المستخدم في كل المنصات.
   ===================================================================== */

:root {
  --primary: #4c3177;
  --primary-foreground: #ffffff;
  --ring: #4c3177;
}

.dark {
  --primary: #8b6fc4;
  --primary-foreground: #10091c;
  --ring: #8b6fc4;
}

/* الخط العربي — Metronic يأتي بـ Inter وهو لا يغطي العربية */
body,
.kt-menu-title,
.kt-btn,
.kt-input,
input,
select,
textarea,
button {
  font-family: 'Tajawal', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* الأرقام تبقى لاتينية ومقروءة داخل النص العربي */
.ana-num,
.kt-table td,
.kt-badge {
  font-feature-settings: 'tnum' 1;
}

/* =====================================================================
   أدوات ناقصة من بناء Metronic
   ---------------------------------------------------------------------
   styles.css بناء Tailwind مُجمَّع مسبقاً: لا يحوي إلا الكلاسات التي
   استعملتها قوالب Metronic نفسها. أي كلاس لم تستعمله لا وجود له،
   ويسقط صامتاً بلا أي أثر مرئي. هذه الأدوات نستعملها في قوالبنا،
   فنعرّفها هنا بدل الاعتماد على وجودها.
   ===================================================================== */

.ana-logo-invert { filter: brightness(0) invert(1); }

.font-bold          { font-weight: 700; }
.mt-0\.5            { margin-top: .125rem; }
.mt-10              { margin-top: 2.5rem; }
.max-w-md           { max-width: 28rem; }
.leading-snug       { line-height: 1.375; }
.leading-loose      { line-height: 2; }
.leading-relaxed    { line-height: 1.625; }
.object-cover       { object-fit: cover; }
.pointer-events-none{ pointer-events: none; }
.pointer-events-auto{ pointer-events: auto; }
.z-50               { z-index: 50; }
.start-5            { inset-inline-start: 1.25rem; }
.overflow-x-auto    { overflow-x: auto; }
.shadow-sm          { box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.transition-shadow  { transition: box-shadow .15s ease; }
.hover\:shadow-md:hover { box-shadow: 0 4px 12px -2px rgb(0 0 0 / .1); }
.hover\:underline:hover { text-decoration: underline; }
.p-6                { padding: 1.5rem; }
.text-\[10px\]      { font-size: 10px; }
.text-\[15px\]      { font-size: 15px; }

.-mt-2 { margin-top: -.5rem; }
.mb-6  { margin-bottom: 1.5rem; }   /* البناء يحوي mb-6.5 و mb-7 لا mb-6 */
.mt-auto { margin-top: auto; }
.text-\[13px\] { font-size: 13px; }

/* كلاسان كانا مستعملين في قوالب Metronic الأصلية بلا تعريف في البناء */
.flex-center { display: flex; align-items: center; }
.footer      { flex-shrink: 0; }

.text-white\/75 { color: rgb(255 255 255 / .75); }
.text-white\/60 { color: rgb(255 255 255 / .60); }
.text-white\/50 { color: rgb(255 255 255 / .50); }

@media (min-width: 640px) {
  .sm\:p-8   { padding: 2rem; }
  .sm\:inline{ display: inline; }   /* البناء يحوي sm:block لا sm:inline */
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   ألوان بطاقات الإحصاءات
   بدل عشرات كلاسات ألوان Tailwind غير الموجودة في البناء
   ------------------------------------------------------------------ */
.ana-tone-violet  { color: #7c3aed; background: #f5f3ff; }
.ana-tone-blue    { color: #2563eb; background: #eff6ff; }
.ana-tone-emerald { color: #059669; background: #ecfdf5; }
.ana-tone-amber   { color: #d97706; background: #fffbeb; }
.ana-tone-rose    { color: #e11d48; background: #fff1f2; }
.ana-tone-indigo  { color: #4f46e5; background: #eef2ff; }
.ana-tone-cyan    { color: #0891b2; background: #ecfeff; }
.ana-tone-teal    { color: #0d9488; background: #f0fdfa; }
.ana-tone-fuchsia { color: #c026d3; background: #fdf4ff; }

.ana-up { color: #059669; }

/* =====================================================================
   الصفحات العامة (layouts-public)
   التحقق من الشهادات · شراء النقاط · السياسات
   ===================================================================== */

.ana-public {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--background);
}

.ana-public-inner {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ana-public-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--background);
  border-bottom: 1px solid var(--border);
  padding-block: .625rem;
}

.ana-public-main {
  flex: 1;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: 1.75rem 1rem 2.5rem;
}

.ana-public-foot {
  border-top: 1px solid var(--border);
  padding-block: 1.25rem;
}

/* عمود ضيق مركزي للصفحات ذات النموذج الواحد */
.ana-narrow { max-width: 34rem; margin-inline: auto; }

/* إشعارات — بديل SweetAlert2 */
.ana-toast {
  pointer-events: auto;
  color: #fff;
  font-size: .875rem;
  border-radius: .5rem;
  padding: .625rem 1rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}
.ana-toast-ok    { background: #059669; }
.ana-toast-error { background: #dc2626; }
.ana-toast-info  { background: #262626; }

/* صف مفتاح/قيمة في بطاقة نتيجة التحقق */
.ana-kv {
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: .75rem .875rem;
  background: var(--background);
}
.ana-kv-k { font-size: .72rem; color: var(--secondary-foreground); margin-bottom: .2rem; }
.ana-kv-v { font-size: .95rem; font-weight: 600; color: var(--mono); }

/* حقل رقم الشهادة */
.ana-code-input {
  text-align: center;
  letter-spacing: .3em;
  font-size: 1.15rem;
  font-weight: 600;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   صفحة الدخول
   ------------------------------------------------------------------ */
.ana-auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .ana-auth {
    grid-template-columns: 1fr 1fr;
  }
}

/* اللوحة البنفسجية الجانبية — تختفي على الجوال */
.ana-auth-aside {
  display: none;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 100% 0%, #6a44a8 0%, transparent 55%),
    radial-gradient(100% 100% at 0% 100%, #34205a 0%, transparent 60%),
    #4c3177;
  color: #fff;
}

@media (min-width: 1024px) {
  .ana-auth-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
  }
}

.ana-auth-aside::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 0%, transparent 100%);
  pointer-events: none;
}

.ana-auth-aside > * {
  position: relative;
  z-index: 1;
}

.ana-auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: var(--background);
}

@media (min-width: 640px) {
  .ana-auth-main {
    padding: 2.5rem;
  }
}

.ana-auth-card {
  width: 100%;
  max-width: 27rem;
}

/* حقل الرمز أحادي المسافة وواسع الحروف */
.ana-otp {
  letter-spacing: .65em;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

.ana-otp::placeholder {
  letter-spacing: .35em;
}

/* فاصل بكلمة في المنتصف */
.ana-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--muted-foreground);
  font-size: .8125rem;
  margin: 1.25rem 0;
}

.ana-divider::before,
.ana-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--border);
}

/* ---------------------------------------------------------------------
   بطاقات الإحصاءات في لوحة التحكم
   ------------------------------------------------------------------ */
.ana-stat {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1.125rem 1.25rem;
}

.ana-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .75rem;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.ana-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--mono);
}

.ana-stat-label {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--secondary-foreground);
}

/* على الشاشات الضيقة البطاقة عمودان، فنضغط الأيقونة بدل قصّ النص */
@media (max-width: 560px) {
  .ana-stat { gap: .625rem; padding: .875rem .875rem; }
  .ana-stat-icon { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; }
  .ana-stat-value { font-size: 1.3rem; }
  .ana-stat-label { font-size: .78rem; }
}

/* =====================================================================
   منطقة العضو (كانت /subscribe)
   ---------------------------------------------------------------------
   دُمجت في اللوحة 2026-08-01 وحُذف Bootstrap منها كلياً. نستعمل مفردات
   تخطيط دلالية بدل أدوات Tailwind المتغيّرة، لأن بناء Metronic المُجمَّع
   لا يضمن وجود متغيّرات md:/lg: لكل شبكة.
   ===================================================================== */

.ana-stack   { display: flex; flex-direction: column; gap: 1.25rem; }
.ana-stack-sm{ display: flex; flex-direction: column; gap: .75rem; }
.ana-row     { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.ana-row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }

.ana-cols-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.ana-cols-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.ana-cols-2 > *, .ana-cols-3 > * { min-width: 0; }

@media (min-width: 768px) {
  .ana-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ana-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ana-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* بطاقة هوية العضو */
.ana-idcard {
  background:
    radial-gradient(120% 140% at 92% 8%, #6a44a8 0%, transparent 55%),
    linear-gradient(135deg, #4c3177 0%, #7c52b0 100%);
  color: #fff;
  border-radius: .75rem;
  padding: 1.15rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.ana-idcard::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(70% 90% at 85% 20%, #000, transparent);
  mask-image: radial-gradient(70% 90% at 85% 20%, #000, transparent);
  pointer-events: none;
}
.ana-idcard > * { position: relative; z-index: 1; }
.ana-idcard .lbl { font-size: .68rem; opacity: .7; font-weight: 600; }
.ana-idcard .val { font-size: .92rem; font-weight: 700; }
.ana-idcard-avatar {
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .25);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
}

/* باقة/خطة العضوية */
.ana-tier {
  display: flex; flex-direction: column; height: 100%;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1.25rem;
}
.ana-tier-vip { background: linear-gradient(135deg, #fffdf7, #fff6e6); border-color: #f2d9a4; }
.ana-tier-price { font-size: 1.85rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ana-feat { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: var(--secondary-foreground); margin-bottom: .45rem; }
.ana-feat i { color: var(--primary); margin-top: 2px; font-size: .95rem; }
.ana-tier-vip .ana-feat { color: #7a5618; }
.ana-tier-vip .ana-feat i { color: #b45309; }

/* بطاقة باقة النقاط القابلة للاختيار */
.ana-pkg {
  position: relative; width: 100%; text-align: start; cursor: pointer;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .9rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ana-pkg:hover { border-color: color-mix(in oklab, var(--primary) 55%, transparent); }
.ana-pkg-active {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 6%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 14%, transparent);
}
.ana-pkg-badge {
  position: absolute; top: -9px; inset-inline-start: 12px;
  font-size: .6rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px;
}
.ana-pkg-radio {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .7rem;
}
.ana-pkg-active .ana-pkg-radio { background: var(--primary); border-color: var(--primary); }

/* صندوق حقيقة صغير (قيمة/مدة/حالة) */
.ana-fact {
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: .75rem .875rem;
  background: var(--background);
  height: 100%;
}
.ana-fact-label { font-size: .72rem; color: var(--secondary-foreground); margin-bottom: .25rem; }
.ana-fact-value { font-size: 1.05rem; font-weight: 700; color: var(--mono); font-variant-numeric: tabular-nums; }

/* حالة فارغة */
.ana-empty { text-align: center; padding: 2.5rem 1rem; color: var(--secondary-foreground); }
.ana-empty i { font-size: 2.25rem; opacity: .35; display: block; margin-bottom: .5rem; }

/* شارات الحالة — بديل bg-*-subtle/text-*-emphasis من بوتستراب */
.ana-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.ana-badge-gray  { background: #f1f3f5; color: #495057; }
.ana-badge-amber { background: #fff4e0; color: #b45309; }
.ana-badge-green { background: #d6f5e3; color: #0a8a4e; }
.ana-badge-red   { background: #ffe3e3; color: #c92a2a; }
.ana-badge-blue  { background: #e7f0fb; color: #1971c2; }

/* زر VIP الذهبي — kt-btn لا يوفّر هذه الدرجة */
.ana-btn-vip {
  background: linear-gradient(135deg, #FBBF24, #F59E0B 55%, #B45309);
  color: #3d2600 !important;
  border-color: transparent;
  font-weight: 700;
}
.ana-btn-vip:hover { filter: brightness(1.05); }
.ana-btn-vip:disabled { opacity: .5; }

.ana-spin { display: inline-block; animation: ana-spin .9s linear infinite; }
@keyframes ana-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   بوابة الأعضاء — أزرار التبويبات
   ------------------------------------------------------------------ */
.ana-tabs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .25rem;
}

.ana-tabs::-webkit-scrollbar {
  display: none;
}

.ana-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1rem;
  border-radius: .625rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--secondary-foreground);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.ana-tab:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.ana-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.ana-tab.active .kt-badge {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  border-color: transparent;
}

/* على الجوال: الحد الأدنى للمس 44px مثل بقية النظام */
@media (max-width: 480px) {
  .ana-tab {
    min-height: 44px;
  }
}