/*
 * ╔══════════════════════════════════════════════════════╗
 * ║         Modern Manara Medical EST. - base.css        ║
 * ║                                                      ║
 * ║  المحتوى:                                           ║
 * ║  1. VARIABLES  — المتغيرات الرئيسية                 ║
 * ║  2. RESET      — إعادة تعيين المتصفح                ║
 * ║  3. UTILITIES  — classes مساعدة سريعة              ║
 * ╚══════════════════════════════════════════════════════╝
 */

/* ==================== 1. VARIABLES ==================== */
:root {
    /* === الألوان الرئيسية === */
    --navy: #1B3A6B;
    --navy-light: #243f75;
    --navy-dark: #152f58;
    --navy-gradient: #2a5298;
    --navy-gradient-end: #1a4f7a;
    --teal: #5BBFB5;
    --teal-light: #7DCFC6;
    --teal-dark: #0f7b71;
    --teal-pale: #EAF8F7;
    --teal-gradient-bg: #d0f0ed;
    --white: #FFFFFF;

    /* === التدرج الرمادي === */
    --gray-50:  #F8FAFB;
    --gray-100: #F0F4F8;
    --gray-200: #E2E8F0;
    --gray-300: #e2e3e5;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #4A5568;
    --gray-800: #1A202C;

    /* === ألوان الحالات === */
    --color-error:         #E53E3E;
    --color-error-bg:      #FFF5F5;
    --color-error-dark:    #C53030;
    --color-error-border:  #FEB2B2;

    --color-success:       #38A169;
    --color-success-main:  #276749;
    --color-success-bg:    #F0FFF4;
    --color-success-border:#9AE6B4;

    --color-warning:       #D69E2E;
    --color-warning-main:  #975A16;
    --color-warning-bg:    #FFFBEB;
    --color-warning-border:#FAD689;

    --color-info:          #3182CE;
    --color-info-bg:       #EBF8FF;
    --color-info-bg-light: #EBF4FF;

    --color-shipped-bg:    #E6FFFA;
    --color-purple:        #553C9A;

    /* === ألوان السوشيال === */
    --color-whatsapp: #25D366;
    --color-twitter:  #1DA1F2;
    --color-linkedin: #0077B5;

    /* === متنوعة === */
    --color-gold: #F6C90E;

    /* === الظلال === */
    --shadow-sm: 0 1px 3px rgba(27,58,107,0.08);
    --shadow-md: 0 4px 20px rgba(27,58,107,0.12);
    --shadow-lg: 0 10px 40px rgba(27,58,107,0.16);

    /* === الزوايا === */
    --radius:    12px;
    --radius-md: 10px;
    --radius-lg: 20px;

    /* === الخطوط === */
    --font-main:    'Cairo', sans-serif;
    --font-display: 'Playfair Display', serif;

    /* === أحجام النص === */
    --text-xs:   0.7rem;   /* 10.5px — شارات، تسميات صغيرة */
    --text-sm:   0.8rem;   /* 12px   — نص مساعد */
    --text-base: 0.9rem;   /* 13.5px — النص الأساسي */
    --text-md:   0.95rem;  /* 14.25px — نص أكبر */
    --text-lg:   1.1rem;   /* 16.5px — تأكيد، أزرار */
    --text-xl:   1.4rem;   /* 21px   — عناوين فرعية */
    --text-2xl:  1.6rem;   /* 24px   — عناوين أقسام */
    --text-3xl:  2rem;     /* 30px   — أسعار كبيرة */
    --text-4xl:  2.5rem;   /* 37.5px — أرقام إحصائية */
}


/* ==================== 2. RESET ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* فرض خط Cairo على كل العناصر (يدهس Playfair في العناوين والأزرار) */
*,
*::before,
*::after {
    font-family: var(--font-main) !important;
}

/* استثناء أيقونات Font Awesome من فرض Cairo (وإلا تظهر مربعات بدل الأيقونات) */
.fa, .fas, .far, .fab,
.fa-solid, .fa-regular, .fa-brands,
.fa::before, .fas::before, .far::before,
.fa-solid::before, .fa-regular::before {
    font-family: "Font Awesome 6 Free" !important;
}
.fab, .fab::before,
.fa-brands, .fa-brands::before {
    font-family: "Font Awesome 6 Brands" !important;
}
html { scroll-behavior: smooth; }

/* الفونت الأساسي لكل العناصر */
body, input, button, select, textarea {
    font-family: var(--font-main);
    color: var(--gray-800);
    background: var(--white);
}
body { overflow-x: hidden; }


/* ==================== 3. UTILITIES ==================== */

/* --- Flexbox --- */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start   { display: flex; align-items: center; justify-content: flex-start; }
.flex-end     { display: flex; align-items: center; justify-content: flex-end; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { display: flex; flex-wrap: wrap; }
.flex-gap     { display: flex; gap: 12px; }

/* --- Gap --- */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }

/* --- ظلال --- */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* --- زوايا دائرية --- */
.rounded-sm   { border-radius: 6px; }
.rounded      { border-radius: 12px; }
.rounded-lg   { border-radius: 20px; }
.rounded-full { border-radius: 50%; }

/* --- محاذاة النص --- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

/* --- Alignment --- */
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }

/* --- Display --- */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline-flex  { display: inline-flex; }
.hidden       { display: none; }

/* --- Margin & Padding --- */
.m-0  { margin: 0; }
.p-0  { padding: 0; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }

/* --- Width & Height --- */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-fit  { width: fit-content; }
.h-fit  { height: fit-content; }

/* --- Opacity --- */
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-75 { opacity: 0.75; }

/* --- Transitions --- */
.transition        { transition: all 0.2s; }
.transition-shadow { transition: box-shadow 0.2s; }
.transition-color  { transition: color 0.2s; }