* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    background: #f7f9fa;
    color: #123b52;
    overflow-x: hidden;
}


    /* =========================
   الخلفية
========================= */

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: radial-gradient( circle at 15% 20%, rgba(183, 143, 61, 0.08), transparent 25% ), radial-gradient( circle at 85% 70%, rgba(18, 59, 82, 0.10), transparent 30% ), linear-gradient( 135deg, #f7f9fa, #ffffff );
        z-index: -5;
    }


/* =========================
   الأشكال العائمة
========================= */

.background-shape {
    position: fixed;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.35;
    z-index: -2;
    pointer-events: none;
}

.shape-one {
    width: 280px;
    height: 280px;
    background: #d4ad62;
    top: 10%;
    right: -100px;
    animation: floatOne 8s ease-in-out infinite;
}

.shape-two {
    width: 220px;
    height: 220px;
    background: #123b52;
    bottom: 10%;
    left: -80px;
    animation: floatTwo 10s ease-in-out infinite;
}

.shape-three {
    width: 120px;
    height: 120px;
    background: #b78f3d;
    top: 45%;
    left: 25%;
    animation: floatThree 7s ease-in-out infinite;
}


/* حركة الأشكال */

@keyframes floatOne {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-35px);
    }
}

@keyframes floatTwo {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(30px);
    }
}

@keyframes floatThree {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }
}


/* =========================
   شريط التنقل
========================= */

.navbar {
    width: 92%;
    max-width: 1250px;
    min-height: 76px;
    margin: 20px auto 0;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(18, 59, 82, 0.10);
}


/* =========================
   الشعار واسم الاتحاد
========================= */

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}


    .nav-brand img {
        width: 50px;
        height: 50px;
        object-fit: contain;
        border-radius: 50%;
        background: white;
        padding: 3px;
        box-shadow: 0 5px 15px rgba(18, 59, 82, 0.12);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }


    .nav-brand:hover img {
        transform: scale(1.08) rotate(-4deg);
        box-shadow: 0 8px 22px rgba(183, 143, 61, 0.25);
    }


.nav-title {
    font-weight: bold;
    color: #123b52;
    font-size: 17px;
    white-space: nowrap;
}


/* =========================
   روابط القائمة
========================= */

nav {
    display: flex;
    align-items: center;
    gap: 7px;
}


    nav a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 11px 15px;
        border-radius: 13px;
        color: #123b52;
        text-decoration: none;
        font-size: 15px;
        font-weight: bold;
        transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }


        /* الأيقونة */

        nav a span {
            font-size: 15px;
            color: #b78f3d;
            transition: transform 0.3s ease, color 0.3s ease;
        }


        /* =========================
   تأثير المرور
========================= */

        nav a:hover {
            color: #123b52;
            background: rgba(183, 143, 61, 0.12);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(183, 143, 61, 0.12);
        }


            nav a:hover span {
                color: #b78f3d;
                transform: scale(1.25) rotate(-8deg);
            }


        /* =========================
   الرابط الحالي
========================= */

        nav a.active {
            color: white;
            background: #123b52;
            box-shadow: 0 8px 20px rgba(18, 59, 82, 0.20);
        }


            nav a.active span {
                color: #d4ad62;
            }


        /* =========================
   تأثير الضغط
========================= */

        nav a:active {
            transform: translateY(0) scale(0.96);
        }


/* =========================
   القسم الرئيسي
========================= */
.hero {
    min-height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 80px;
}


/* البطاقة السماوية */

.hero-card {
    width: 90%;
    max-width: 1050px;
    padding: 70px 50px;
    text-align: center;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.97), rgba(239, 245, 248, 0.96) );
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 35px 80px rgba(18, 59, 82, 0.18);
    position: relative;
    overflow: hidden;
    animation: cardAppear 1s ease;
    margin: 0 auto;
    margin-top: 70px;
}


    /* لمعان خفيف داخل البطاقة */

    .hero-card::before {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        background: rgba(255, 255, 255, 0.35);
        border-radius: 50%;
        top: -250px;
        left: -150px;
        filter: blur(10px);
    }


/* حركة ظهور البطاقة */

@keyframes cardAppear {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================
   الشعار
========================= */

.logo-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    box-shadow: 0 15px 35px rgba(18, 59, 82, 0.15);
    animation: logoFloat 4s ease-in-out infinite;
}

    .logo-container img {
        width: 155px;
        height: 155px;
        object-fit: contain;
        border-radius: 20px;
    }


@keyframes logoFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* =========================
   نص الواجهة
========================= */

.small-title {
    display: inline-block;
    color: #b78f3d;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 12px;
}

.hero-content h1 {
    position: relative;
    font-size: 46px;
    line-height: 1.3;
    color: #123b52;
    margin-bottom: 20px;
}

.hero-content p {
    position: relative;
    max-width: 700px;
    margin: 0 auto 35px;
    color: #527080;
    font-size: 19px;
    line-height: 2;
}


/* =========================
   الأزرار
========================= */

.hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.main-button,
.secondary-button {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}


.main-button {
    background: #b78f3d;
    color: white;
    box-shadow: 0 10px 25px rgba(183, 143, 61, 0.25);
}


    .main-button:hover {
        transform: translateY(-4px);
        background: #123b52;
        box-shadow: 0 15px 30px rgba(18, 59, 82, 0.25);
    }


.secondary-button {
    background: rgba(255, 255, 255, 0.75);
    color: #123b52;
    border: 1px solid rgba(18, 59, 82, 0.1);
}


    .secondary-button:hover {
        transform: translateY(-4px);
        background: white;
    }


/* =========================
   الأقسام
========================= */

.info-section,
.events-section,
.announcements-section {
    width: 90%;
    max-width: 1100px;
    margin: 80px auto;
    padding: 70px 30px;
}


.section-title {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

    .section-title span {
        color: #b78f3d;
        font-weight: bold;
        font-size: 16px;
    }

    .section-title h2 {
        font-size: 34px;
        margin: 12px 0;
        color: #123b52;
    }

    .section-title p {
        color: #527080;
        line-height: 1.9;
        font-size: 17px;
    }


/* =========================
   البطاقات
========================= */

.info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.info-card {
    background: rgba(255, 255, 255, 0.72);
    padding: 35px 25px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 15px 40px rgba(18, 59, 82, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

    .info-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px rgba(18, 59, 82, 0.13);
    }

.card-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: #d5f4fa;
    color: #b78f3d;
    font-weight: bold;
}

.info-card h3 {
    margin-bottom: 12px;
    color: #123b52;
}

.info-card p {
    color: #527080;
    line-height: 1.8;
}


/* =========================
   الفعاليات
========================= */

.event-box {
    background: linear-gradient( 135deg, #123b52, #17647e );
    color: white;
    border-radius: 30px;
    padding: 55px 30px;
    text-align: center;
    box-shadow: 0 25px 50px rgba(18, 59, 82, 0.2);
}

    .event-box h3 {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .event-box p {
        color: #d7f4fa;
        line-height: 1.8;
    }


/* =========================
   الإعلانات
========================= */

.announcements-section {
    background: linear-gradient( 135deg, rgba(184, 238, 247, 0.8), rgba(230, 249, 253, 0.9) );
    border-radius: 35px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(18, 59, 82, 0.1);
}

.announcement-content {
    max-width: 650px;
    margin: auto;
}

    .announcement-content span {
        color: #b78f3d;
        font-weight: bold;
    }

    .announcement-content h2 {
        font-size: 35px;
        margin: 15px 0;
    }

    .announcement-content p {
        color: #527080;
        line-height: 1.9;
        margin-bottom: 30px;
    }


/* =========================
   Footer
========================= */

footer {
    margin-top: 80px;
    padding: 30px;
    text-align: center;
    background: #123b52;
    color: #d7f4fa;
    font-size: 14px;
}


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

@media (max-width: 800px) {

    .navbar {
        width: 94%;
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }


    /* الشعار واسم الاتحاد */

    .nav-brand {
        width: 100%;
        justify-content: center;
    }

        .nav-brand img {
            width: 45px;
            height: 45px;
        }

    .nav-title {
        font-size: 15px;
    }


    /* روابط القائمة */

    nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

        nav a {
            padding: 9px 11px;
            font-size: 13px;
        }

    .hero {
        padding: 50px 15px;
        min-height: auto;
    }

    .hero-card {
        width: 96%;
        padding: 50px 20px;
        border-radius: 30px;
    }

    .logo-container {
        width: 150px;
        height: 150px;
    }

        .logo-container img {
            width: 125px;
            height: 125px;
        }

    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .info-cards {
        grid-template-columns: 1fr;
    }

    .section-title h2 {
        font-size: 28px;
    }
}

/* =========================
   صفحة طلب الانضمام
   ========================= */

.application-page {
    width: 100%;
    padding: 70px 20px 100px;
}

.application-card {
    width: 92%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 60px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 35px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 25px 70px rgba(18, 59, 82, 0.12);
}

.application-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

    .application-header span {
        color: #b78f3d;
        font-weight: bold;
        font-size: 16px;
    }

    .application-header h1 {
        color: #123b52;
        font-size: 38px;
        margin: 12px 0 15px;
    }

    .application-header p {
        color: #527080;
        line-height: 1.9;
        font-size: 16px;
    }


/* ترتيب الحقول */

.application-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

    .form-group.full-width {
        grid-column: 1 / -1;
    }


    /* عناوين الحقول */

    .form-group label {
        margin-bottom: 9px;
        color: #123b52;
        font-size: 15px;
        font-weight: bold;
    }


    /* الحقول */

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 14px 16px;
        border: 1px solid #d9e3e8;
        border-radius: 13px;
        background: #f9fbfc;
        color: #123b52;
        font-family: Arial, sans-serif;
        font-size: 15px;
        outline: none;
        transition: 0.3s ease;
    }


        /* عند الضغط على الحقل */

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: #b78f3d;
            background: white;
            box-shadow: 0 0 0 4px rgba(183, 143, 61, 0.10);
        }


        /* النص داخل الحقول */

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: #9aaab2;
        }


    /* منع تغيير حجم textarea */

    .form-group textarea {
        resize: vertical;
        min-height: 130px;
    }


/* زر الإرسال */

.form-submit {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

    .form-submit button {
        border: none;
        padding: 15px 45px;
        border-radius: 13px;
        background: #b78f3d;
        color: white;
        font-family: Arial, sans-serif;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 10px 25px rgba(183, 143, 61, 0.22);
        transition: 0.3s ease;
    }

        .form-submit button:hover {
            background: #123b52;
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(18, 59, 82, 0.20);
        }

        .form-submit button:active {
            transform: translateY(0) scale(0.97);
        }


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

@media (max-width: 800px) {

    .application-page {
        padding: 45px 15px 70px;
    }

    .application-card {
        width: 96%;
        padding: 40px 20px;
        border-radius: 28px;
    }

    .application-header h1 {
        font-size: 28px;
    }

    .application-form {
        grid-template-columns: 1fr;
    }

    .form-group.full-width {
        grid-column: auto;
    }

    .form-submit {
        grid-column: auto;
    }

        .form-submit button {
            width: 100%;
        }
}

/* =========================
   صفحة نجاح إرسال الطلب
   ========================= */

.success-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.success-card {
    width: 90%;
    max-width: 650px;
    padding: 60px 45px;
    text-align: center;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 35px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 25px 70px rgba(18, 59, 82, 0.15);
    animation: cardAppear 0.7s ease;
}

.success-icon {
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #123b52;
    color: white;
    font-size: 42px;
    font-weight: bold;
    box-shadow: 0 12px 30px rgba(18, 59, 82, 0.20);
}

.success-small-title {
    color: #b78f3d;
    font-size: 16px;
    font-weight: bold;
}

.success-card h1 {
    color: #123b52;
    font-size: 34px;
    margin: 15px 0;
}

.success-card p {
    color: #527080;
    font-size: 16px;
    line-height: 1.9;
}

.success-status {
    margin: 25px 0 30px;
    padding: 14px;
    border-radius: 12px;
    background: #f5f7f8;
}

    .success-status strong {
        color: #b78f3d;
    }


/* الهاتف */

@media (max-width: 800px) {

    .success-card {
        width: 96%;
        padding: 45px 22px;
    }

        .success-card h1 {
            font-size: 27px;
        }

        .success-card p {
            font-size: 15px;
        }
}

/* =========================
   لوحة الإدارة
   ========================= */

.admin-page {
    min-height: 100vh;
    padding: 70px 20px 100px;
}

.admin-card {
    width: 95%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 50px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 35px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 25px 70px rgba(18, 59, 82, 0.13);
}

.admin-header {
    text-align: center;
    margin-bottom: 40px;
}

    .admin-header span {
        color: #b78f3d;
        font-weight: bold;
    }

    .admin-header h1 {
        color: #123b52;
        font-size: 38px;
        margin: 12px 0;
    }

    .admin-header p {
        color: #527080;
    }


/* حاوية الجدول */

.applications-table-container {
    width: 100%;
    overflow-x: auto;
}


/* الجدول */

.applications-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 15px;
}


    /* رؤوس الأعمدة */

    .applications-table th {
        padding: 16px 14px;
        background: #123b52;
        color: white;
        font-size: 14px;
        white-space: nowrap;
    }


    /* خلايا الجدول */

    .applications-table td {
        padding: 15px 14px;
        border-bottom: 1px solid #e5ebee;
        color: #405b68;
        font-size: 14px;
        text-align: center;
    }


    /* الصفوف */

    .applications-table tbody tr {
        transition: 0.2s ease;
    }

        .applications-table tbody tr:hover {
            background: #f7f9fa;
        }


/* حالة الطلب */

.status-badge {
    display: inline-block;
    padding: 7px 13px;
    border-radius: 20px;
    background: rgba(183, 143, 61, 0.12);
    color: #b78f3d;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
}


/* لا توجد طلبات */

.no-applications {
    padding: 40px !important;
    color: #8798a1 !important;
    font-size: 16px !important;
}


/* الهاتف */

@media (max-width: 800px) {

    .admin-page {
        padding: 40px 10px 70px;
    }

    .admin-card {
        width: 98%;
        padding: 30px 15px;
        border-radius: 25px;
    }

    .admin-header h1 {
        font-size: 28px;
    }
}


/* أزرار إدارة الحالة */

.status-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

    .status-actions a {
        padding: 7px 10px;
        border-radius: 9px;
        text-decoration: none;
        font-size: 12px;
        font-weight: bold;
        transition: 0.25s ease;
    }

.accept-button {
    background: #e8f5ed;
    color: #287a4b;
}

    .accept-button:hover {
        background: #287a4b;
        color: white;
    }

.reject-button {
    background: #f9e8e8;
    color: #a33a3a;
}

    .reject-button:hover {
        background: #a33a3a;
        color: white;
    }

.pending-button {
    background: #f5efe2;
    color: #9a762e;
}

    .pending-button:hover {
        background: #9a762e;
        color: white;
    }

/* =========================
   تفاصيل الطلب
   ========================= */

.details-page {
    min-height: 100vh;
    padding: 70px 20px;
}

.details-card {
    width: 92%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 35px;
    box-shadow: 0 25px 70px rgba(18, 59, 82, 0.13);
}

.details-header {
    text-align: center;
    margin-bottom: 40px;
}

    .details-header span {
        color: #b78f3d;
        font-weight: bold;
    }

    .details-header h1 {
        color: #123b52;
        font-size: 36px;
        margin: 12px 0;
    }

    .details-header p {
        color: #527080;
    }


/* البيانات القصيرة */

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.detail-item {
    padding: 20px;
    background: #f7f9fa;
    border-radius: 15px;
    border: 1px solid #e5ebee;
}

    .detail-item span,
    .long-detail span,
    .current-status span {
        display: block;
        color: #8a9aa2;
        font-size: 13px;
        margin-bottom: 8px;
    }

    .detail-item strong {
        color: #123b52;
    }


/* الإجابات الطويلة */

.long-details {
    margin-top: 25px;
}

.long-detail {
    padding: 22px;
    margin-bottom: 15px;
    background: #f7f9fa;
    border-radius: 15px;
    border: 1px solid #e5ebee;
}

    .long-detail p {
        color: #405b68;
        line-height: 1.9;
        white-space: pre-wrap;
    }

    .long-detail a {
        color: #b78f3d;
        font-weight: bold;
        text-decoration: none;
    }


/* الحالة */

.current-status {
    margin-top: 25px;
    padding: 20px;
    text-align: center;
    border-radius: 15px;
    background: #f5efe2;
}

    .current-status strong {
        color: #b78f3d;
    }


/* أزرار التفاصيل */

.details-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 30px;
}

    .details-actions a {
        padding: 12px 18px;
        border-radius: 11px;
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
        transition: 0.25s ease;
    }

        .details-actions a:hover {
            transform: translateY(-3px);
        }

.back-button {
    background: #123b52;
    color: white;
}


/* الهاتف */

@media (max-width: 800px) {

    .details-page {
        padding: 40px 10px;
    }

    .details-card {
        width: 98%;
        padding: 30px 18px;
    }

    .details-header h1 {
        font-size: 28px;
    }

    .details-grid {
        grid-template-columns: 1fr;
    }

    .details-actions a {
        width: 100%;
        text-align: center;
    }
}

.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}

.admin-login-card {
    width: 100%;
    max-width: 450px;
    padding: 45px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 30px;
    box-shadow: 0 25px 70px rgba(18, 59, 82, 0.15);
    text-align: center;
}

.admin-login-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5efe2;
    border-radius: 50%;
    font-size: 30px;
}

.admin-login-small {
    color: #b78f3d;
    font-weight: bold;
}

.admin-login-card h1 {
    color: #123b52;
    margin: 12px 0;
    font-size: 32px;
}

.admin-login-card > p {
    color: #527080;
    margin-bottom: 30px;
}

.admin-login-form {
    text-align: right;
}

    .admin-login-form label {
        display: block;
        margin: 15px 0 8px;
        color: #123b52;
        font-weight: bold;
    }

    .admin-login-form input {
        width: 100%;
        padding: 14px 16px;
        border: 1px solid #dce5e9;
        border-radius: 12px;
        outline: none;
        font-family: inherit;
        font-size: 15px;
        box-sizing: border-box;
    }

        .admin-login-form input:focus {
            border-color: #b78f3d;
            box-shadow: 0 0 0 3px rgba(183, 143, 61, 0.10);
        }

    .admin-login-form button {
        width: 100%;
        margin-top: 25px;
        padding: 14px;
        border: none;
        border-radius: 12px;
        background: #123b52;
        color: white;
        font-family: inherit;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.25s ease;
    }

        .admin-login-form button:hover {
            background: #b78f3d;
            transform: translateY(-2px);
        }

.login-error {
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 10px;
    background: #f9e8e8;
    color: #a33a3a;
    font-size: 14px;
}

.login-back {
    display: inline-block;
    margin-top: 25px;
    color: #527080;
    text-decoration: none;
    font-size: 14px;
}

    .login-back:hover {
        color: #b78f3d;
    }

.logout-button {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 18px;
    border-radius: 10px;
    background: #f9e8e8;
    color: #a33a3a;
    text-decoration: none;
    font-weight: bold;
    transition: 0.25s ease;
}

    .logout-button:hover {
        background: #a33a3a;
        color: white;
    }


.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 35px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e5ebee;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(18, 59, 82, 0.06);
    transition: 0.25s ease;
}

    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(18, 59, 82, 0.10);
    }

.stat-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f5efe2;
    color: #b78f3d;
    font-size: 23px;
}

.stat-content span {
    display: block;
    margin-bottom: 6px;
    color: #7d9099;
    font-size: 13px;
}

.stat-content strong {
    color: #123b52;
    font-size: 28px;
}

.pending-stat .stat-icon {
    background: #f5efe2;
    color: #9a762e;
}

.accepted-stat .stat-icon {
    background: #e8f5ed;
    color: #287a4b;
}

.rejected-stat .stat-icon {
    background: #f9e8e8;
    color: #a33a3a;
}

@media (max-width: 1000px) {

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 550px) {

    .admin-stats {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 18px;
    }
}


.admin-filters {
    margin-bottom: 30px;
    padding: 22px;
    background: #f7f9fa;
    border: 1px solid #e5ebee;
    border-radius: 18px;
}

.filter-form {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    flex-wrap: wrap;
}

.search-box,
.status-filter {
    flex: 1;
    min-width: 230px;
}

    .search-box label,
    .status-filter label {
        display: block;
        margin-bottom: 8px;
        color: #123b52;
        font-size: 13px;
        font-weight: bold;
    }

    .search-box input,
    .status-filter select {
        width: 100%;
        height: 45px;
        padding: 0 14px;
        border: 1px solid #dce5e9;
        border-radius: 10px;
        background: white;
        color: #405b68;
        font-family: inherit;
        font-size: 14px;
        outline: none;
        box-sizing: border-box;
    }

        .search-box input:focus,
        .status-filter select:focus {
            border-color: #b78f3d;
            box-shadow: 0 0 0 3px rgba(183, 143, 61, 0.10);
        }

.filter-button,
.clear-filter-button {
    height: 45px;
    padding: 0 20px;
    border-radius: 10px;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.filter-button {
    border: none;
    background: #123b52;
    color: white;
}

    .filter-button:hover {
        background: #b78f3d;
        transform: translateY(-2px);
    }

.clear-filter-button {
    background: #e8edf0;
    color: #526d79;
}

    .clear-filter-button:hover {
        background: #dce4e8;
        transform: translateY(-2px);
    }

@media (max-width: 700px) {

    .filter-form {
        align-items: stretch;
        flex-direction: column;
    }

    .search-box,
    .status-filter {
        width: 100%;
        min-width: 0;
    }

    .filter-button,
    .clear-filter-button {
        width: 100%;
    }
}


.status-accepted {
    background: #e8f5ed;
    color: #287a4b;
}

.status-rejected {
    background: #f9e8e8;
    color: #a33a3a;
}

.status-pending {
    background: #f5efe2;
    color: #9a762e;
}

.admin-note-section {
    margin-top: 30px;
    padding: 25px;
    background: #f7f9fa;
    border: 1px solid #e5ebee;
    border-radius: 18px;
}

.admin-note-header {
    margin-bottom: 18px;
}

    .admin-note-header span {
        color: #b78f3d;
        font-size: 13px;
        font-weight: bold;
    }

    .admin-note-header h2 {
        margin: 8px 0 0;
        color: #123b52;
        font-size: 22px;
    }

.admin-note-form textarea {
    width: 100%;
    min-height: 140px;
    padding: 15px;
    border: 1px solid #dce5e9;
    border-radius: 12px;
    background: white;
    color: #405b68;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.8;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

    .admin-note-form textarea:focus {
        border-color: #b78f3d;
        box-shadow: 0 0 0 3px rgba(183, 143, 61, 0.10);
    }

.save-note-button {
    margin-top: 15px;
    padding: 12px 22px;
    border: none;
    border-radius: 10px;
    background: #123b52;
    color: white;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.25s ease;
}

    .save-note-button:hover {
        background: #b78f3d;
        transform: translateY(-2px);
    }




.track-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
}

.track-card {
    width: 100%;
    max-width: 600px;
    padding: 45px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 30px;
    box-shadow: 0 25px 70px rgba(18, 59, 82, 0.14);
    text-align: center;
}

.track-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5efe2;
    border-radius: 50%;
    font-size: 28px;
}

.track-small-title {
    color: #b78f3d;
    font-weight: bold;
}

.track-card h1 {
    margin: 12px 0;
    color: #123b52;
    font-size: 34px;
}

.track-description {
    color: #527080;
    line-height: 1.8;
    margin-bottom: 30px;
}

.track-form {
    text-align: right;
}

    .track-form label {
        display: block;
        margin: 15px 0 8px;
        color: #123b52;
        font-weight: bold;
    }

    .track-form input {
        width: 100%;
        height: 48px;
        padding: 0 15px;
        box-sizing: border-box;
        border: 1px solid #dce5e9;
        border-radius: 12px;
        outline: none;
        font-family: inherit;
        font-size: 14px;
    }

        .track-form input:focus {
            border-color: #b78f3d;
            box-shadow: 0 0 0 3px rgba(183, 143, 61, 0.10);
        }

    .track-form button {
        width: 100%;
        margin-top: 25px;
        padding: 14px;
        border: none;
        border-radius: 12px;
        background: #123b52;
        color: white;
        font-family: inherit;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.25s ease;
    }

        .track-form button:hover {
            background: #b78f3d;
            transform: translateY(-2px);
        }

.track-error {
    padding: 13px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #f9e8e8;
    color: #a33a3a;
}

.application-result {
    text-align: right;
}

.result-item,
.result-status,
.student-note {
    padding: 18px;
    margin-bottom: 12px;
    background: #f7f9fa;
    border: 1px solid #e5ebee;
    border-radius: 14px;
}

    .result-item span,
    .result-status > span,
    .student-note span {
        display: block;
        margin-bottom: 8px;
        color: #8798a1;
        font-size: 13px;
    }

    .result-item strong {
        color: #123b52;
    }

.result-status {
    text-align: center;
}

    .result-status strong {
        display: block;
        font-size: 18px;
    }

.result-accepted {
    color: #287a4b;
}

.result-rejected {
    color: #a33a3a;
}

.result-pending {
    color: #9a762e;
}

.student-note {
    text-align: right;
    background: #f5efe2;
    border-color: #eadfc7;
}

    .student-note p {
        margin: 0;
        color: #405b68;
        line-height: 1.8;
    }

.track-again-button,
.track-back {
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    font-weight: bold;
}

.track-again-button {
    padding: 12px 20px;
    border-radius: 10px;
    background: #123b52;
    color: white;
}

.track-back {
    margin-right: 15px;
    color: #527080;
}

.track-again-button:hover {
    background: #b78f3d;
}

.track-back:hover {
    color: #b78f3d;
}

@media (max-width: 600px) {

    .track-card {
        padding: 30px 20px;
    }

        .track-card h1 {
            font-size: 28px;
        }

    .track-back {
        display: block;
        margin-right: 0;
    }
}


.application-number {
    margin: 25px 0;
    padding: 20px;
    background: #f5efe2;
    border: 1px solid #eadfc7;
    border-radius: 16px;
    text-align: center;
}

    .application-number span {
        display: block;
        color: #8a9aa2;
        font-size: 13px;
        margin-bottom: 8px;
    }

    .application-number strong {
        display: block;
        color: #123b52;
        font-size: 30px;
        margin-bottom: 8px;
    }

    .application-number p {
        margin: 0;
        color: #527080;
        font-size: 13px;
    }

/* =========================
   تحسين الموقع على الهاتف
   ========================= */

@media (max-width: 768px) {

    /* شريط التنقل */
    .navbar {
        width: 94%;
        margin-top: 12px;
        padding: 10px 12px;
        flex-direction: column;
        gap: 12px;
    }

    .nav-brand {
        width: 100%;
        justify-content: center;
    }

    .nav-title {
        font-size: 15px;
    }

    nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
    }

        nav a {
            padding: 9px 10px;
            font-size: 13px;
        }

            nav a span {
                font-size: 13px;
            }

    /* القسم الرئيسي */
    .hero {
        min-height: auto;
        padding: 70px 12px 50px;
    }

    .hero-card {
        width: 96%;
        padding: 45px 20px;
        margin-top: 30px;
        border-radius: 28px;
    }

    .logo-container {
        width: 150px;
        height: 150px;
        margin-bottom: 22px;
    }

        .logo-container img {
            width: 115px;
            height: 115px;
        }

    .hero-content h1 {
        font-size: 30px;
    }

    .hero-content p {
        font-size: 16px;
        line-height: 1.9;
    }

    /* بطاقات المعلومات */
    .info-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* الأزرار */
    .main-button,
    .secondary-button {
        width: 100%;
        text-align: center;
    }
}


footer strong {
    color: #d4ad62;
    transition: color 0.3s ease;
}

    footer strong:hover {
        color: #ffffff;
    }

.footer-separator {
    margin: 0 8px;
    opacity: 0.5;
}

/* =========================
   بطاقات الفعاليات
   ========================= */

.events-section {
    padding: 80px 20px;
}

.events-grid {
    width: 90%;
    max-width: 1100px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.event-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(18, 59, 82, 0.08);
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(18, 59, 82, 0.10);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

    .event-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, #b78f3d, #d4ad62 );
    }

    .event-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 22px 45px rgba(18, 59, 82, 0.16);
        border-color: rgba(183, 143, 61, 0.25);
    }

.event-date {
    width: 82px;
    height: 82px;
    margin: 25px 25px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5efe2;
    color: #b78f3d;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
}

.event-content {
    padding: 0 25px 25px;
}

.event-category {
    display: inline-block;
    margin-bottom: 10px;
    color: #b78f3d;
    font-size: 13px;
    font-weight: bold;
}

.event-content h3 {
    margin-bottom: 12px;
    color: #123b52;
    font-size: 21px;
}

.event-content p {
    margin-bottom: 22px;
    color: #527080;
    font-size: 14px;
    line-height: 1.9;
}

.event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(18, 59, 82, 0.08);
    color: #8a9aa2;
    font-size: 12px;
}

/* الهاتف */
@media (max-width: 768px) {

    .events-section {
        padding: 60px 12px;
    }

    .events-grid {
        width: 96%;
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 30px;
    }

    .event-card:hover {
        transform: translateY(-4px);
    }
}

/* =========================
   بطاقات الإعلانات
   ========================= */

.announcements-section {
    padding: 80px 20px;
}

.announcements-grid {
    width: 90%;
    max-width: 1100px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.announcement-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(18, 59, 82, 0.08);
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(18, 59, 82, 0.10);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

    .announcement-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 4px;
        background: #b78f3d;
    }

    .announcement-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 22px 45px rgba(18, 59, 82, 0.16);
        border-color: rgba(183, 143, 61, 0.25);
    }

.announcement-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #f5efe2;
    color: #b78f3d;
    border-radius: 16px;
    font-size: 25px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.announcement-card:hover .announcement-icon {
    transform: scale(1.08) rotate(-4deg);
    background: #123b52;
}

.announcement-info {
    flex: 1;
}

.announcement-label {
    display: inline-block;
    margin-bottom: 10px;
    color: #b78f3d;
    font-size: 13px;
    font-weight: bold;
}

.announcement-info h3 {
    margin-bottom: 12px;
    color: #123b52;
    font-size: 20px;
    line-height: 1.5;
}

.announcement-info p {
    margin-bottom: 22px;
    color: #527080;
    font-size: 14px;
    line-height: 1.9;
}

.announcement-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(18, 59, 82, 0.08);
    color: #8a9aa2;
    font-size: 12px;
}

/* الإعلان المميز */

.featured-announcement {
    border-color: rgba(183, 143, 61, 0.22);
    box-shadow: 0 18px 40px rgba(183, 143, 61, 0.12);
}

    .featured-announcement::before {
        height: 5px;
        background: linear-gradient( 90deg, #b78f3d, #d4ad62 );
    }


/* الهاتف */

@media (max-width: 768px) {

    .announcements-section {
        padding: 60px 12px;
    }

    .announcements-grid {
        width: 96%;
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 30px;
    }

    .announcement-card:hover {
        transform: translateY(-4px);
    }
}

/* ==============================
   صفحة إضافة الفعالية فقط
   ============================== */

.event-admin-page {
    min-height: 100vh;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #f7f9fa;
}

.event-admin-card {
    width: 100%;
    max-width: 750px;
    padding: 40px;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 20px 50px rgba(18, 59, 82, 0.12);
    border: 1px solid rgba(18, 59, 82, 0.08);
}

    .event-admin-card h1 {
        margin-bottom: 10px;
        color: #123b52;
        font-size: 30px;
    }

    .event-admin-card .admin-subtitle {
        margin-bottom: 35px;
        color: #527080;
        line-height: 1.8;
    }

    .event-admin-card .form-group {
        margin-bottom: 22px;
    }

        .event-admin-card .form-group label {
            display: block;
            margin-bottom: 9px;
            color: #123b52;
            font-weight: bold;
        }

        .event-admin-card .form-group input,
        .event-admin-card .form-group textarea {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid #dce4e8;
            border-radius: 14px;
            background: #f9fbfc;
            color: #123b52;
            font-family: inherit;
            font-size: 15px;
            outline: none;
            box-sizing: border-box;
            transition: 0.3s ease;
        }

        .event-admin-card .form-group textarea {
            resize: vertical;
            min-height: 130px;
        }

            .event-admin-card .form-group input:focus,
            .event-admin-card .form-group textarea:focus {
                border-color: #b78f3d;
                background: #ffffff;
                box-shadow: 0 0 0 4px rgba(183, 143, 61, 0.10);
            }

    .event-admin-card .form-actions {
        display: flex;
        gap: 14px;
        align-items: center;
        margin-top: 30px;
    }

        .event-admin-card .form-actions .main-button,
        .event-admin-card .form-actions .secondary-button {
            border: none;
            cursor: pointer;
            text-decoration: none;
            font-family: inherit;
        }

        .event-admin-card .form-actions .main-button {
            flex: 1;
        }

        .event-admin-card .form-actions .secondary-button {
            text-align: center;
        }

@media (max-width: 768px) {

    .event-admin-page {
        padding: 30px 12px;
    }

    .event-admin-card {
        padding: 28px 20px;
        border-radius: 22px;
    }

        .event-admin-card h1 {
            font-size: 25px;
        }

        .event-admin-card .form-actions {
            flex-direction: column;
        }

            .event-admin-card .form-actions .main-button,
            .event-admin-card .form-actions .secondary-button {
                width: 100%;
                box-sizing: border-box;
            }
}

.admin-action-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    background: linear-gradient(135deg, #123b52, #1b536b);
    color: #ffffff;
    border: 1px solid rgba(183, 143, 61, 0.35);
    border-radius: 14px;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(18, 59, 82, 0.16);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

    /* اللمعة التي تتحرك داخل الزر */
    .admin-action-button::before {
        content: "";
        position: absolute;
        top: 0;
        right: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.18), transparent );
        transform: skewX(-20deg);
        transition: right 0.6s ease;
    }

    /* عند مرور الماوس */
    .admin-action-button:hover {
        transform: translateY(-3px);
        background: linear-gradient(135deg, #1b536b, #123b52);
        box-shadow: 0 12px 28px rgba(18, 59, 82, 0.24), 0 0 0 3px rgba(183, 143, 61, 0.08);
    }

        /* حركة اللمعة */
        .admin-action-button:hover::before {
            right: 130%;
        }

    /* عند الضغط */
    .admin-action-button:active {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(18, 59, 82, 0.18);
    }


/* =========================================
   قسم نبذة عن الاتحاد
========================================= */

.union-about-premium {
    width: 100%;
    padding: 80px 20px;
    background: transparent;
    position: relative;
}


/* =========================================
   البطاقة الرئيسية
========================================= */

.union-about-container {
    width: min(1150px, 100%);
    margin: 0 auto;
    padding: 55px;
    display: grid;
    grid-template-columns: 0.85fr 1.55fr;
    gap: 65px;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient( 145deg, #ffffff 0%, #fbfcfe 55%, #f7f9fc 100% );
    border: 1px solid rgba(201, 162, 39, 0.20);
    box-shadow: 0 25px 60px rgba(11, 31, 58, 0.10), 0 8px 25px rgba(11, 31, 58, 0.05);
}


    /* =========================================
   زخرفة ذهبية خفيفة داخل البطاقة
========================================= */

    .union-about-container::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        left: -170px;
        bottom: -170px;
        border-radius: 50%;
        border: 1px solid rgba(201, 162, 39, 0.12);
        box-shadow: 0 0 0 35px rgba(201, 162, 39, 0.025), 0 0 0 70px rgba(201, 162, 39, 0.018);
        pointer-events: none;
    }


    /* زخرفة كحلية */

    .union-about-container::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -120px;
        top: -120px;
        border-radius: 50%;
        border: 1px solid rgba(11, 31, 58, 0.08);
        pointer-events: none;
    }


/* =========================================
   الجانب البصري
========================================= */

.union-about-visual {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/* =========================================
   إطار الشعار
========================================= */

.union-logo-frame {
    width: 245px;
    height: 245px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 27px;
}


/* الهالة الذهبية */

.union-logo-glow {
    position: absolute;
    width: 195px;
    height: 195px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(201, 162, 39, 0.18), transparent 70% );
    filter: blur(8px);
}


/* الإطار الخارجي */

.union-logo-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 39, 0.55);
    box-shadow: 0 0 0 8px rgba(201, 162, 39, 0.035), 0 15px 45px rgba(11, 31, 58, 0.10);
}


/* الإطار الداخلي */

.union-logo-frame::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1px solid rgba(11, 31, 58, 0.08);
}


/* الشعار */

.union-logo-frame img {
    position: relative;
    z-index: 2;
    width: 175px;
    height: 175px;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
    padding: 12px;
    box-shadow: 0 18px 40px rgba(11, 31, 58, 0.14);
}


/* =========================================
   الشارة
========================================= */

.union-about-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 17px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: rgba(201, 162, 39, 0.07);
    border: 1px solid rgba(201, 162, 39, 0.20);
    color: #9c7918;
    font-size: 13px;
    font-weight: 700;
}


    .union-about-badge span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #c9a227;
        box-shadow: 0 0 10px rgba(201, 162, 39, 0.55);
    }


/* =========================================
   الجملة البصرية
========================================= */

.union-about-slogan {
    margin: 0;
    color: #0b1f3a;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.65;
    letter-spacing: -0.4px;
}


/* =========================================
   زخارف بسيطة حول الجانب البصري
========================================= */

.union-about-decoration {
    position: absolute;
    width: 55px;
    height: 55px;
    border: 1px solid rgba(201, 162, 39, 0.18);
    opacity: 0.8;
}


.decoration-top {
    top: 30px;
    right: 25px;
    border-left: none;
    border-bottom: none;
}


.decoration-bottom {
    bottom: 30px;
    left: 25px;
    border-right: none;
    border-top: none;
}


/* =========================================
   القسم النصي
========================================= */

.union-about-text {
    text-align: right;
    position: relative;
    z-index: 2;
}


/* =========================================
   عنوان "نبذة عن الاتحاد"
========================================= */

.union-section-label {
    display: inline-block;
    margin-bottom: 14px;
    color: #b18b1f;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
}


/* =========================================
   العنوان الرئيسي
========================================= */

.union-about-text h2 {
    margin: 0;
    color: #0b1f3a;
    font-size: 39px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: -0.6px;
}


    .union-about-text h2 span {
        color: #c19a23;
    }


/* =========================================
   الخط الذهبي
========================================= */

.union-title-line {
    width: 90px;
    height: 3px;
    margin: 20px 0 28px;
    border-radius: 50px;
    background: linear-gradient( 90deg, #b18b1f, #e0c15a );
}


/* =========================================
   الفقرات
========================================= */

.union-about-text > p {
    margin: 0 0 20px;
    color: #5d6978;
    font-size: 16.5px;
    line-height: 2.05;
    font-weight: 400;
}


    .union-about-text > p strong {
        color: #0b1f3a;
        font-weight: 800;
    }


/* =========================================
   قيم الاتحاد
========================================= */

.union-about-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 30px;
}


/* بطاقة القيمة */

.union-value {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 17px 15px;
    border-radius: 17px;
    background: linear-gradient( 145deg, #ffffff, #fafbfd );
    border: 1px solid rgba(11, 31, 58, 0.07);
    box-shadow: 0 8px 20px rgba(11, 31, 58, 0.045);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}


    /* حركة بسيطة عند المرور */

    .union-value:hover {
        transform: translateY(-4px);
        border-color: rgba(201, 162, 39, 0.25);
        box-shadow: 0 14px 28px rgba(11, 31, 58, 0.08);
    }


/* الرقم */

.union-value-number {
    flex-shrink: 0;
    color: #c19a23;
    font-size: 12px;
    font-weight: 900;
    padding-top: 2px;
}


/* عنوان القيمة */

.union-value strong {
    display: block;
    margin-bottom: 4px;
    color: #0b1f3a;
    font-size: 13.5px;
    font-weight: 800;
}


/* وصف القيمة */

.union-value p {
    margin: 0;
    color: #7a8594;
    font-size: 11.5px;
    line-height: 1.7;
}


/* =========================================
   العبارة الختامية
========================================= */

.union-about-quote {
    position: relative;
    margin-top: 27px;
    padding: 22px 27px 22px 24px;
    border-radius: 18px;
    background: linear-gradient( 135deg, rgba(201, 162, 39, 0.07), rgba(11, 31, 58, 0.025) );
    border: 1px solid rgba(201, 162, 39, 0.17);
    border-right: 3px solid #c19a23;
}


/* علامة الاقتباس */

.quote-mark {
    position: absolute;
    top: 5px;
    left: 17px;
    color: rgba(201, 162, 39, 0.25);
    font-size: 52px;
    line-height: 1;
    font-family: Georgia, serif;
}


/* نص الاقتباس */

.union-about-quote p {
    margin: 0;
    color: #25364d;
    font-size: 15.5px;
    line-height: 1.95;
    font-weight: 700;
}


/* =========================================
   تأثير البطاقة الرئيسية
========================================= */

.union-about-container {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}


    .union-about-container:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 70px rgba(11, 31, 58, 0.12), 0 10px 30px rgba(11, 31, 58, 0.05);
    }


/* =========================================
   الأجهزة اللوحية
========================================= */

@media (max-width: 950px) {

    .union-about-container {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 45px;
    }


    .union-about-visual {
        min-height: auto;
    }


    .union-about-values {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =========================================
   الهواتف
========================================= */

@media (max-width: 700px) {

    .union-about-premium {
        padding: 55px 14px;
    }


    .union-about-container {
        padding: 32px 21px;
        border-radius: 25px;
        gap: 35px;
    }


    .union-logo-frame {
        width: 205px;
        height: 205px;
    }


        .union-logo-frame img {
            width: 145px;
            height: 145px;
        }


    .union-about-slogan {
        font-size: 23px;
    }


    .union-about-text h2 {
        font-size: 27px;
        line-height: 1.55;
    }


    .union-about-text > p {
        font-size: 15px;
        line-height: 1.95;
    }


    .union-about-values {
        grid-template-columns: 1fr;
    }


    .union-about-quote {
        padding: 20px 20px 20px 18px;
    }


        .union-about-quote p {
            font-size: 14px;
        }


    .union-about-decoration {
        display: none;
    }
}


/* POST forms for state changes and logout (production security). */
.status-actions form, .details-actions form { display: inline-block; margin: 0; }
.status-actions button, .details-actions button { border: 0; cursor: pointer; font-family: inherit; }
.status-actions button { padding: 7px 10px; border-radius: 9px; font-size: 12px; font-weight: bold; transition: 0.25s ease; }
.details-actions button { padding: 12px 18px; border-radius: 11px; font-size: 14px; font-weight: bold; transition: 0.25s ease; }
.details-actions button:hover { transform: translateY(-3px); }
.logout-form { margin: 0; }
.logout-form button { border: 0; cursor: pointer; font-family: inherit; font-size: inherit; }