/* ==========================================================
   ROYA PLATFORM 2.0
   CORE DESIGN SYSTEM
========================================================== */


/* ==========================================================
   1. الألوان والمتغيرات
========================================================== */

:root {

    --roya-primary: #0d1b3d;
    --roya-primary-light: #173d70;

    --roya-secondary: #1e88e5;
    --roya-secondary-dark: #156fc0;

    --roya-sky: #7ec6f7;

    --roya-gold: #f2b705;
    --roya-gold-light: #ffd166;

    --roya-background: #f7faff;
    --roya-surface: #ffffff;

    --roya-text: #334155;
    --roya-heading: #0d2b4b;
    --roya-muted: #64748b;

    --roya-border: rgba(13, 43, 75, 0.09);

    --roya-success: #16a34a;
    --roya-danger: #dc2626;

    --roya-radius-small: 9px;
    --roya-radius: 16px;
    --roya-radius-large: 24px;

    --roya-shadow-small:
        0 8px 24px rgba(13, 43, 75, 0.08);

    --roya-shadow:
        0 14px 38px rgba(13, 43, 75, 0.12);

    --roya-shadow-large:
        0 20px 55px rgba(13, 43, 75, 0.16);

    --roya-transition: 0.3s ease;
}


/* ==========================================================
   2. الإعدادات العامة
========================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    direction: rtl;

    margin: 0;

    overflow-x: hidden;

    background: var(--roya-background);

    color: var(--roya-text);

    font-family:
        "Cairo",
        Arial,
        sans-serif;

    line-height: 1.9;
}


/* ==========================================================
   3. الروابط والصور
========================================================== */

a {
    color: inherit;
    text-decoration: none;

    transition: var(--roya-transition);
}

a:hover {
    text-decoration: none;
}

img {
    display: block;

    max-width: 100%;
}


/* ==========================================================
   4. الحاوية
========================================================== */

.container {

    width: 90%;

    max-width: 1200px;

    margin-right: auto;
    margin-left: auto;
}


/* ==========================================================
   5. العناوين والنصوص
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    color: var(--roya-heading);

    font-weight: 800;

    line-height: 1.45;
}

p {
    color: var(--roya-text);
}


/* ==========================================================
   6. الأقسام العامة
========================================================== */

.roya-section {

    padding: 75px 0;
}

.roya-section-light {

    background: var(--roya-background);
}

.roya-section-white {

    background: var(--roya-surface);
}


/* ==========================================================
   7. عنوان القسم
========================================================== */

.section-title {

    margin-bottom: 42px;

    text-align: center;
}

.section-title h2 {

    margin-bottom: 0;

    color: var(--roya-secondary);

    font-size:
        clamp(28px, 4vw, 38px);

    font-weight: 800;
}

.gold-line {

    width: 82px;

    height: 4px;

    margin: 15px auto 0;

    border-radius: 20px;

    background: var(--roya-gold);
}


/* ==========================================================
   8. الأزرار العامة
========================================================== */

.roya-btn,
.read-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 11px 24px;

    border: 0;

    border-radius:
        var(--roya-radius-small);

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform var(--roya-transition),
        background var(--roya-transition),
        box-shadow var(--roya-transition);
}


/* الزر الأزرق */

.roya-btn-primary,
.read-btn {

    background:
        var(--roya-secondary);

    color: #ffffff !important;

    box-shadow:
        0 9px 20px
        rgba(30, 136, 229, 0.20);
}

.roya-btn-primary:hover,
.read-btn:hover {

    background:
        var(--roya-secondary-dark);

    color: #ffffff !important;

    transform:
        translateY(-2px);
}


/* الزر الذهبي */

.roya-btn-gold {

    background:
        var(--roya-gold-light);

    color:
        var(--roya-primary) !important;

    box-shadow:
        0 12px 28px
        rgba(13, 43, 75, 0.20);
}

.roya-btn-gold:hover {

    background: #ffe08a;

    color:
        var(--roya-primary) !important;

    transform:
        translateY(-3px);
}


/* ==========================================================
   9. الرسائل الفارغة
========================================================== */

.empty-message {

    padding: 30px;

    color: var(--roya-muted);

    text-align: center;
}


/* ==========================================================
   10. أدوات عامة
========================================================== */

.text-roya-primary {
    color: var(--roya-primary) !important;
}

.text-roya-secondary {
    color: var(--roya-secondary) !important;
}

.text-roya-gold {
    color: var(--roya-gold) !important;
}

.bg-roya-light {
    background: var(--roya-background) !important;
}

.bg-roya-white {
    background: var(--roya-surface) !important;
}


/* ==========================================================
   11. الهاتف
========================================================== */

@media (max-width: 768px) {

    .roya-section {

        padding: 55px 0;
    }

    .section-title {

        margin-bottom: 34px;
    }

    .container {

        width: 92%;
    }
}


/* ==========================================================
   END — ROYA CORE DESIGN SYSTEM
========================================================== */