@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Cairo-Light.ttf") format('truetype');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Cairo-Medium.ttf") format('truetype');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Cairo-Regular.ttf") format('truetype');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Cairo-SemiBold.ttf") format('truetype');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/Cairo-Bold.ttf") format('truetype');
}

:root {
    --color-head: #131416;
    --color-base: #002E43;
    --color-label: #717680;
    --color-input: #A4A7AE;
    --color-hover: #131416;
}

body {
    font-family: 'Cairo', sans-serif;
    font-size: 16px;
    overflow: hidden auto;
    scrollbar-color: var(--gray-400) var(--gray-100);
    scrollbar-width: thin;
}

* {
    scrollbar-color: var(--gray-400) var(--gray-100);
    scrollbar-width: thin;

}

html[dir="rtl"] {
    .form-control {
        direction: rtl;
    }
}

a {
    text-decoration: none;
}

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

.btn {
    max-height: 44px;
    line-height: 1;
}

.btn-primary {
    background-color: var(--color-base);
    color: #fff;
    border: none;
    padding: 10px 32px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;

    &:hover {
        background-color: var(--gray-700);
    }
}

.btn-outline-primary {
    color: var(--color-base);
    border-color: var(--color-base);
    padding: 10px 32px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;

    &:hover {
        background-color: var(--color-base);
        border-color: var(--color-base);

        img {
            filter: grayscale(1) brightness(1000%);
            -webkit-filter: grayscale(1) brightness(1000%);
        }
    }
}

.btn-outline-secondary {
    color: var(--color-base);
    border-color: var(--gray-300);
    padding: 10px 32px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;

    &:hover {
        background-color: var(--color-base);
        border-color: var(--color-base);

        img {
            filter: grayscale(1) brightness(1000%);
            -webkit-filter: grayscale(1) brightness(1000%);
        }
    }
}

.btn-gray {
    background-color: var(--brand-color-50);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;

    &:hover {
        background-color: var(--brand-color-200);
    }
}

label {
    color: var(--gray-500);
    font-size: 14px;
    font-weight: 500;
}

input {
    color: var(--gray-900);
}

.form-control:disabled,
.form-select:disabled {
    background-color: transparent;
    color: var(--gray-900);
    border: 0;
    border-bottom: 1px solid var(--gray-200);
}


/* 2. الـ Overlay الذي يغطي الشاشة عند التحميل */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* خلفية داكنة شفافة */
    display: none; /* مهم: إخفاء الـ Overlay مبدئياً */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 3. حاوية الـ Loader */
.loader-container {
    width: 120px;
    height: auto;
}

/* 4. كود الـ Infinity Loop (SVG) */
.infinity-path {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 100 400;
    animation: dash-animation 2s linear infinite;
}

@keyframes dash-animation {
    from {
        stroke-dashoffset: 500;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* تنسيق زر التشغيل */
#process-button {
    padding: 12px 25px;
    font-size: 18px;
    cursor: pointer;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

    #process-button:hover {
        background-color: #2980b9;
    }