:root{
  --bg: #f3f4f6;
  --text: #111827; /* زيدها باش ما يبقاش var(--text) فارغ */
}

/* مهم باش الخلفية تغطي كامل الشاشة */
html, body{
  height: 100%;
}

body{
  margin: 0;
  min-height: 100vh;
  font-family: "Cairo", sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
}

.app-header{
  position: sticky;
  top: 0;
  z-index: 50;

  background: #272727;          /* Shopify dark */
  color: #ffffff;

  border-bottom: 1px solid #7c7c7c;
  box-shadow: none;
}

.header-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title h1{
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.header-title span{
  font-size: .75rem;
  color: #9ca3af;   /* gray-400 */
  font-weight: 600;
}

.header-meta{
  font-size: .75rem;
  color: #9ca3af;
}


.page-title{
  font-weight: 900;
  letter-spacing: -.02em;
}


/* ✅ ضمان أن العناوين نحيفة كما في Shopify */
h1, h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 500 !important; /* وزن متوسط ونحيف */
}

/* ✅ زر الكبسولة السوداء الموحد - إصلاح العرض والمحاذاة */
.btn-silva-pill-black {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; /* تغيير إلى flex لملء المساحة */
  width: 100% !important; /* ملء عرض الكرت بالكامل */
  padding: 14px 24px !important; /* مساحة ضغط مريحة */
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}

.btn-silva-pill-black:hover {
  background-color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* ✅ الكرت الافتراضي (روح Silva النحيفة) */
.card-silva {
  border: 1px solid #e5e7eb !important;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

/* ✅ إصلاح Hover: تفعيل الإطار البنفسجي النحيف لجميع الكروت */
.card-silva:hover, .card-highlighted {
  border: 1px solid #6d28d9 !important; /* الإطار البنفسجي النحيف */
  box-shadow: 0 0 0 1px #6d28d9, 0 10px 30px -10px rgba(109, 40, 217, 0.2) !important;
}

/* ضمان بقاء الإطار للكرت المختار دائماً */
.card-highlighted {
  border: 1px solid #6d28d9 !important;
}

/* ✅ ضبط الخطوط لتكون نحيفة وأنيقة كما في Shopify */
.plan-title, .plan-price {
  font-weight: 500 !important; /* وزن Medium وليس Bold سميك */
  letter-spacing: -0.02em;
  color: #111827;
}

.plan-feature span {
  font-weight: 400 !important; /* وزن نحيف جداً للميزات */
  color: #4b5563;
}