/* ===============================
   MAMSA GLOBAL DESIGN SYSTEM (Merged & Clean)
=================================*/

/* 1) ألوان معتمدة من الصورة */
:root{
  /* ألوان الصورة */
  --green: #3E5A50;   /* خلفية الهيدر */
  --light: #B7C4B1;   /* لون الكبسولات */

  /* ربط نظام التصميم بهذه الألوان */
  --primary: var(--green);
  --primary-dark:#1f4f46;

  /* تدرجات رمادية عامة */
  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-500:#6b7280;
  --gray-700:#374151;
  --gray-900:#111827;

  /* مقاسات */
  --pill-height: 44px;
}

/* 2) Reset وأساسيات */
*,
*::before,
*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ direction: rtl; }
body{
  margin:0;
  font-family: "Tajawal", system-ui, -apple-system, sans-serif;
  background:#ffffff;
  color:var(--gray-900);
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }

/* 3) Layout Utilities */
.container{ width:90%; max-width:1200px; margin:auto; }
.center{ display:flex; justify-content:center; align-items:center; padding:60px 20px; }
.page-wrap{ max-width:1200px; margin:auto; padding:60px 20px; }
.flex-between{ display:flex; justify-content:space-between; align-items:center; gap:20px; }
.section{ margin-bottom:40px; }
.text-center{ text-align:center; }
.muted{ color:var(--gray-500); }
.title{ font-size:24px; font-weight:700; margin-bottom:20px; color:var(--primary); }

/* 4) Grid */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:768px){
  .grid-2, .grid-3{ grid-template-columns:1fr; }
}

/* 5) Cards */
.card{
  background:#fff;
  border-radius:20px;
  padding:30px;
  box-shadow:0 30px 80px rgba(0,0,0,.08);
  border:1px solid var(--gray-200);
}
.card-lg{ padding:50px; }

/* 6) Buttons */
.btn{
  background:var(--primary);
  color:#fff;
  padding:12px 18px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  font-weight:600;
  display:inline-block;
  transition:.2s;
}
.btn:hover{ opacity:.9; }
.btn-outline{
  background:#fff;
  border:1px solid var(--primary);
  color:var(--primary);
}
.btn-block{ width:100%; }

/* كبسولات بنفس ألوان الصورة */
.header-pill, .btn-pill{
  background: var(--light);
  color: var(--green);
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: filter .15s ease, transform .15s ease;
}
.header-pill:hover, .btn-pill:hover{ filter: brightness(0.96); }
.header-pill:active, .btn-pill:active{ transform: translateY(1px); }

/* 7) Forms */
.form-group{ margin-bottom:18px; }
.label{ display:block; margin-bottom:6px; font-weight:600; color:var(--gray-700); }
.input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--gray-200); font-size:15px;
}
.input:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(47,111,99,.15);
}
textarea.input{ resize:vertical; }

/* 8) Unit page helpers */
.badge{
  padding:8px 14px; border-radius:999px; font-size:13px;
  background:#f3f4f6; border:1px solid #e5e7eb;
}
.split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media(max-width:900px){ .split{ grid-template-columns:1fr; } }
.dropzone{
  border:2px dashed #d1d5db; border-radius:20px; padding:25px;
  text-align:center; cursor:pointer; transition:.2s;
}
.dropzone:hover{ border-color:var(--primary); }
.thumbs{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px; margin-top:15px;
}
.thumb{ position:relative; border-radius:12px; overflow:hidden; border:1px solid #e5e7eb; }
.thumb img{ width:100%; height:100px; object-fit:cover; }
.preview-img{
  height:250px; background:#f3f4f6; display:flex; align-items:center; justify-content:center; border-radius:15px;
}
.map-box{ height:300px; border-radius:15px; overflow:hidden; }

/* 9) Alerts */
.alert{ padding:14px; border-radius:14px; margin-bottom:20px; }
.alert-warning{ background:#fef9c3; border:1px solid #fde68a; color:#92400e; }
.alert-success{ background:#dcfce7; border:1px solid #86efac; color:#166534; }
.alert-info{ background:#dbeafe; border:1px solid #93c5fd; color:#1e40af; }

/* 10) Header (بالألوان الدقيقة للصورة) */
/* الهيدر */
.header{
  background: var(--green);
  color: #fff;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

/* مساحة داخلية */
.header--hero{
  position: relative;
  padding-block: 16px;
  padding-inline: 20px;
}

/* الحاوية الداخلية */
.header-container{
  width: min(1200px, 100%);
  margin-inline: auto;
  padding-inline: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

/* الشعار في أقصى اليمين (RTL) */
.logo{
  margin-inline-end: auto;       /* يدفع الشعار لليمين */
}
.logo img{
  width: 130px;                  /* كبّره حسب رغبتك */
  height: auto;
  display: block;
  transform: none;               /* إزالة الإزاحة القديمة */
}

/* الأزرار في أقصى اليسار */
.header-actions{
  display: flex;
  gap: 12px;
  align-items: center;
  transform: none;               /* إزالة التحريك القديم */
  margin: 0;
}

/* الأزرار (شكل الكبسولة) كما هي */
.header-pill{
  background: var(--light);
  color: var(--green);
  padding: 8px 20px;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(192, 114, 114, 0.08);
  transition: filter .15s ease, transform .15s ease;
}
.header-pill:hover{ filter: brightness(0.96); }
.header-pill:active{ transform: translateY(1px); }

/* 11) Utilities */
.mt-20{ margin-top:20px; }
.mt-40{ margin-top:40px; }
.mb-20{ margin-bottom:20px; }
.mb-40{ margin-bottom:40px; }
.py-60{ padding:60px 0; }
.px-20{ padding:0 20px; }

/* منع أي underline داخل العناصر القابلة للنقر */
button, a, .header-pill, .btn-pill,
button *, a *, .header-pill *, .btn-pill *{
  text-decoration:none !important;
}

/* 12) Responsive tuning للشعار/الهامش */
@media (max-width: 640px){
  .logo img{
    width: clamp(120px, 28vw, 180px);
    max-height: 56px;
  }
  .header--hero{
    padding-inline-end: 200px;  /* مساحة أقل للشعار في الشاشات الصغيرة */
    padding-inline-start: 12px;
  }
}

/* type.form */
.type-box{
    border:2px solid #eee;
    padding:25px;
    border-radius:16px;
    cursor:pointer;
    transition:.2s;
    width:150px;
    text-align:center;
    font-size:16px;
}

.type-box:hover{
    border-color:#2F6F63;
}

.type-box input{
    display:none;
}

.type-box input:checked + div{
    color:#2F6F63;
    font-weight:700;
}

.license-card{
    max-width:700px;
    margin:auto;
    padding:40px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
    background:white;
}
.auth-card {
    width: 500px;
    background: #ffffff;
    padding: 50px 45px;
    border-radius: 26px;
    border: 1.5px solid #e5e7eb;
    box-shadow:
        0 18px 40px rgba(62, 90, 80, 0.07),
        0 4px 12px rgba(62, 90, 80, 0.05);
    text-align: right;   /* ✅ هنا التغيير */
}

.auth-card input {
    text-align: right;
    direction: rtl;
}

.auth-card button {
    text-align: center;
}