/*==================================================
  Safary
  style.css
  الجزء 1 من 20
==================================================*/

/*==================================================
  الخط
==================================================*/

@font-face {

    font-family: "Safary";

    src: url("safary-font.woff2") format("woff2");

    font-weight: 100 900;

    font-style: normal;

    font-display: swap;

}

/*==================================================
  المتغيرات
==================================================*/

:root {

    --primary: #2563eb;

    --primary-dark: #1d4ed8;

    --background: #f8fafc;

    --surface: #ffffff;

    --text: #111827;

    --text-light: #6b7280;

    --border: #e5e7eb;

    --danger: #ef4444;

    --success: #22c55e;

    --radius: 18px;

    --shadow:

        0 10px 30px rgba(0,0,0,.08);

}

/*==================================================
  إعادة الضبط
==================================================*/

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

/*==================================================
  الصفحة
==================================================*/

html {

    scroll-behavior: smooth;

}

body {

    font-family: "Safary", sans-serif;

    background: var(--background);

    color: var(--text);

    min-height: 100vh;

    overflow-x: hidden;

}

/*==================================================
  العناصر العامة
==================================================*/

img {

    display: block;

    max-width: 100%;

}

button {

    font-family: inherit;

    cursor: pointer;

    border: none;

    outline: none;

}

input,

select,

textarea {

    font-family: inherit;

    outline: none;

}

a {

    text-decoration: none;

    color: inherit;

}

/*==================================================
  Safary
  style.css
  الجزء 2 من 20
==================================================*/

/*==================================================
  إخفاء العناصر
==================================================*/

.hidden {

    display: none !important;

}

/*==================================================
  الشاشات
==================================================*/

.screen {

    display: flex;

    flex-direction: column;

    width: 100%;

    min-height: 100vh;

    background: var(--background);

}

.screen.hidden {

    display: none !important;

}

/*==================================================
  شاشة التحميل
==================================================*/

.loading-screen {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--surface);

    transition:

        opacity .35s ease,

        visibility .35s ease;

}

.loading-screen.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

/*==================================================
  محتوى شاشة التحميل
==================================================*/

.loading-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 32px;

    gap: 18px;

}

/*==================================================
  Safary
  style.css
  الجزء 3 من 20
==================================================*/

/*==================================================
  شعار شاشة التحميل
==================================================*/

.loading-logo {

    width: 120px;

    height: 120px;

    object-fit: contain;

    user-select: none;

    -webkit-user-drag: none;

}

/*==================================================
  دائرة التحميل
==================================================*/

.loading-spinner {

    width: 54px;

    height: 54px;

    border: 5px solid var(--border);

    border-top-color: var(--primary);

    border-radius: 50%;

    animation:

        spinner 1s linear infinite;

}

/*==================================================
  عنوان شاشة التحميل
==================================================*/

.loading-title {

    font-size: 26px;

    font-weight: 700;

    color: var(--text);

}

/*==================================================
  وصف شاشة التحميل
==================================================*/

.loading-description {

    font-size: 15px;

    color: var(--text-light);

}

/*==================================================
  إصدار التطبيق
==================================================*/

.loading-version {

    font-size: 13px;

    color: var(--text-light);

}

/*==================================================
  حركة التحميل
==================================================*/

@keyframes spinner {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/*==================================================
  Safary
  style.css
  الجزء 4 من 20
==================================================*/

/*==================================================
  شاشة تسجيل الدخول
==================================================*/

.login-container {

    width: 100%;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 32px 24px;

    text-align: center;

    gap: 20px;

}

/*==================================================
  شعار التطبيق
==================================================*/

.login-logo {

    width: 130px;

    height: 130px;

    object-fit: contain;

}

/*==================================================
  عنوان تسجيل الدخول
==================================================*/

.login-title {

    font-size: 30px;

    font-weight: 800;

    color: var(--text);

}

/*==================================================
  وصف تسجيل الدخول
==================================================*/

.login-description {

    max-width: 340px;

    line-height: 1.8;

    color: var(--text-light);

    font-size: 15px;

}

/*==================================================
  زر Google
==================================================*/

.google-login-button {

    width: 100%;

    max-width: 340px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 16px;

    box-shadow: var(--shadow);

    transition: .25s;

}

.google-login-button:hover {

    transform: translateY(-2px);

}

.google-login-button:active {

    transform: scale(.98);

}

/*==================================================
  أيقونة Google
==================================================*/

.google-icon {

    width: 24px;

    height: 24px;

}

/*==================================================
  Safary
  style.css
  الجزء 5 من 20
==================================================*/

/*==================================================
  نصوص تسجيل الدخول
==================================================*/

.login-policy {

    max-width: 340px;

    font-size: 13px;

    line-height: 1.8;

    color: var(--text-light);

    text-align: center;

}

.login-version {

    margin-top: 6px;

    font-size: 13px;

    color: var(--text-light);

}

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

.primary-button {

    width: 100%;

    max-width: 340px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background: var(--primary);

    color: #ffffff;

    border-radius: 16px;

    font-size: 16px;

    font-weight: 700;

    transition: .25s;

}

.primary-button:hover {

    background: var(--primary-dark);

}

.primary-button:active {

    transform: scale(.98);

}

/*==================================================
  الأزرار الثانوية
==================================================*/

.secondary-button {

    width: 100%;

    max-width: 340px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--surface);

    color: var(--text);

    border: 1px solid var(--border);

    border-radius: 16px;

    transition: .25s;

}

.secondary-button:hover {

    background: #f3f4f6;

}

/*==================================================
  Safary
  style.css
  الجزء 6 من 20
==================================================*/

/*==================================================
  رأس الصفحات
==================================================*/

.page-header {

    width: 100%;

    padding: 26px 22px 18px;

    background: var(--surface);

    border-bottom: 1px solid var(--border);

    box-shadow: 0 2px 10px rgba(0,0,0,.04);

}

.page-header-text {

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.page-title {

    font-size: 28px;

    font-weight: 800;

    color: var(--text);

}

.page-subtitle {

    font-size: 14px;

    color: var(--text-light);

}

/*==================================================
  محتوى الصفحة
==================================================*/

.home-content,

.services-grid,

.trips-content,

.account-content {

    width: 100%;

    padding: 22px;

}

/*==================================================
  بطاقة الترحيب
==================================================*/

.welcome-card {

    width: 100%;

    background: var(--surface);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 22px;

    margin-bottom: 20px;

}

.welcome-card-content {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.welcome-card h2 {

    font-size: 24px;

    font-weight: 700;

    color: var(--text);

}

.welcome-card p {

    line-height: 1.8;

    color: var(--text-light);

    font-size: 15px;

}
/*==================================================
  Safary
  style.css
  الجزء 7 من 20
==================================================*/

/*==================================================
  بطاقات الإحصائيات
==================================================*/

.statistics-section {

    width: 100%;

    padding: 0 22px 22px;

}

.statistics-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

}

.stat-card {

    background: var(--surface);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    text-align: center;

    transition: .25s;

}

.stat-card:hover {

    transform: translateY(-4px);

}

.stat-icon {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: rgba(37,99,235,.1);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}

.stat-number {

    font-size: 26px;

    font-weight: 800;

    color: var(--text);

}

.stat-title {

    font-size: 13px;

    color: var(--text-light);

}

/*==================================================
  استجابة الشاشات الصغيرة
==================================================*/

@media (max-width: 480px) {

    .statistics-grid {

        grid-template-columns: 1fr;

    }

}

/*==================================================
  Safary
  style.css
  الجزء 8 من 20
==================================================*/

/*==================================================
  صفحة الخدمات
==================================================*/

.services-grid {

    display: grid;

    grid-template-columns: repeat(

        auto-fit,

        minmax(160px,1fr)

    );

    gap: 18px;

}

.service-card {

    background: var(--surface);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 24px 18px;

    text-align: center;

    transition: .25s;

    border: 1px solid transparent;

}

.service-card:hover {

    transform: translateY(-5px);

    border-color: var(--primary);

}

.service-card i {

    font-size: 34px;

    color: var(--primary);

    margin-bottom: 16px;

}

.service-card h3 {

    font-size: 18px;

    font-weight: 700;

    color: var(--text);

    margin-bottom: 10px;

}

.service-card p {

    font-size: 14px;

    color: var(--text-light);

    line-height: 1.7;

}
/*==================================================
  Safary
  style.css
  الجزء 9 من 20
==================================================*/

/*==================================================
  صفحة الرحلات
==================================================*/

.trips-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.trip-card {

    background: var(--surface);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 20px;

    border: 1px solid var(--border);

    transition: .25s;

}

.trip-card:hover {

    transform: translateY(-3px);

}

.trip-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 18px;

}

.trip-title {

    font-size: 20px;

    font-weight: 700;

    color: var(--text);

}

.trip-location {

    margin-top: 6px;

    font-size: 14px;

    color: var(--text-light);

}

.trip-status {

    padding: 6px 14px;

    border-radius: 999px;

    background: rgba(34,197,94,.12);

    color: var(--success);

    font-size: 13px;

    font-weight: 700;

}

.trip-dates {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 14px;

    margin-bottom: 18px;

}

.trip-dates div {

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.trip-dates strong {

    font-size: 13px;

    color: var(--text-light);

}

.trip-dates span {

    font-size: 15px;

    color: var(--text);

    font-weight: 600;

}
/*==================================================
  Safary
  style.css
  الجزء 10 من 20
==================================================*/

/*==================================================
  أزرار بطاقة الرحلة
==================================================*/

.trip-actions {

    display: flex;

    gap: 12px;

    margin-top: 10px;

}

.trip-button {

    flex: 1;

    height: 46px;

    border: none;

    border-radius: 14px;

    background: var(--primary);

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition: .25s;

}

.trip-button:hover {

    background: var(--primary-dark);

}

.trip-button:active {

    transform: scale(.97);

}

.trip-button.delete {

    background: var(--danger);

}

.trip-button.delete:hover {

    background: #dc2626;

}

/*==================================================
  لا توجد رحلات
==================================================*/

.empty-state {

    background: var(--surface);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 48px 24px;

    text-align: center;

}

.empty-state i {

    font-size: 58px;

    color: var(--primary);

    margin-bottom: 18px;

}

.empty-state h3 {

    font-size: 22px;

    color: var(--text);

    margin-bottom: 10px;

}

.empty-state p {

    color: var(--text-light);

    font-size: 15px;

    line-height: 1.8;

}
/*==================================================
  Safary
  style.css
  الجزء 11 من 20
==================================================*/

/*==================================================
  صفحة الحساب
==================================================*/

.profile-card {

    background: var(--surface);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 32px 24px;

    text-align: center;

    margin-bottom: 24px;

}

.profile-photo {

    width: 110px;

    height: 110px;

    border-radius: 50%;

    object-fit: cover;

    margin: 0 auto 18px;

    border: 4px solid var(--border);

    background: #ffffff;

}

.profile-name {

    font-size: 24px;

    font-weight: 700;

    color: var(--text);

    margin-bottom: 8px;

}

.profile-email {

    font-size: 15px;

    color: var(--text-light);

    word-break: break-word;

}

.account-actions {

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.logout-button {

    width: 100%;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background: var(--danger);

    color: #ffffff;

    border: none;

    border-radius: 16px;

    font-size: 16px;

    font-weight: 700;

    transition: .25s;

}

.logout-button:hover {

    background: #dc2626;

}

.logout-button:active {

    transform: scale(.98);

}
/*==================================================
  Safary
  style.css
  الجزء 12 من 20
==================================================*/

/*==================================================
  النوافذ المنبثقة
==================================================*/

.modal {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    background: rgba(0,0,0,.45);

    backdrop-filter: blur(6px);

    z-index: 2000;

}

.modal.hidden {

    display: none !important;

}

/*==================================================
  محتوى النافذة
==================================================*/

.modal-content {

    width: 100%;

    max-width: 520px;

    max-height: 90vh;

    overflow-y: auto;

    background: var(--surface);

    border-radius: 24px;

    box-shadow: var(--shadow);

    animation: modalShow .25s ease;

}

/*==================================================
  رأس النافذة
==================================================*/

.modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 22px;

    border-bottom: 1px solid var(--border);

}

.modal-header h2 {

    font-size: 22px;

    font-weight: 700;

    color: var(--text);

}

.modal-close {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #f3f4f6;

    color: var(--text);

    font-size: 18px;

}

.modal-close:hover {

    background: #e5e7eb;

}

/*==================================================
  جسم النافذة
==================================================*/

.modal-body {

    padding: 22px;

}

/*==================================================
  حركة ظهور النافذة
==================================================*/

@keyframes modalShow {

    from {

        opacity: 0;

        transform: scale(.95);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}
/*==================================================
  Safary
  style.css
  الجزء 13 من 20
==================================================*/

/*==================================================
  الحقول
==================================================*/

.form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 18px;

}

.form-group label {

    font-size: 14px;

    font-weight: 600;

    color: var(--text);

}

.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    height: 52px;

    padding: 0 16px;

    border: 1px solid var(--border);

    border-radius: 14px;

    background: #ffffff;

    color: var(--text);

    font-size: 15px;

    transition: .25s;

}

.form-group textarea {

    min-height: 120px;

    resize: vertical;

    padding: 14px 16px;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    border-color: var(--primary);

    box-shadow:

        0 0 0 4px rgba(37,99,235,.12);

}

/*==================================================
  صف الحقول
==================================================*/

.form-row {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 16px;

}

@media (max-width: 600px) {

    .form-row {

        grid-template-columns: 1fr;

    }

}
/*==================================================
  Safary
  style.css
  الجزء 14 من 20
==================================================*/

/*==================================================
  الإشعارات (Toast)
==================================================*/

.toast {

    position: fixed;

    top: 24px;

    left: 50%;

    transform: translateX(-50%);

    width: calc(100% - 32px);

    max-width: 420px;

    background: var(--surface);

    border-radius: 18px;

    box-shadow: var(--shadow);

    z-index: 3000;

    animation: toastShow .25s ease;

}

.toast.hidden {

    display: none !important;

}

.toast-content {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 18px;

}

.toast-icon {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    background: rgba(34,197,94,.12);

    color: var(--success);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

}

.toast-body {

    flex: 1;

}

.toast-body h3 {

    font-size: 16px;

    font-weight: 700;

    color: var(--text);

    margin-bottom: 4px;

}

.toast-body p {

    font-size: 14px;

    color: var(--text-light);

    line-height: 1.6;

}

.toast-close {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: transparent;

    color: var(--text-light);

}

.toast-close:hover {

    background: #f3f4f6;

}

@keyframes toastShow {

    from {

        opacity: 0;

        transform: translate(-50%, -18px);

    }

    to {

        opacity: 1;

        transform: translate(-50%, 0);

    }

}
/*==================================================
  Safary
  style.css
  الجزء 15 من 20
==================================================*/

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

.bottom-navigation {

    position: fixed;

    right: 0;

    bottom: 0;

    left: 0;

    height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    background: var(--surface);

    border-top: 1px solid var(--border);

    box-shadow: 0 -4px 20px rgba(0,0,0,.06);

    z-index: 1000;

    padding-bottom: env(safe-area-inset-bottom);

}

.nav-button {

    flex: 1;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    background: transparent;

    color: var(--text-light);

    transition: .25s;

}

.nav-button i {

    font-size: 22px;

}

.nav-button span {

    font-size: 12px;

    font-weight: 600;

}

.nav-button.active {

    color: var(--primary);

}

.nav-button:hover {

    background: rgba(37,99,235,.06);

}

.nav-button:active {

    transform: scale(.96);

}

/*==================================================
  مساحة أسفل الصفحات
==================================================*/

.home-content,

.services-grid,

.trips-content,

.account-content {

    padding-bottom: 110px;

}
/*==================================================
  Safary
  style.css
  الجزء 16 من 20
==================================================*/

/*==================================================
  طبقة التعتيم
==================================================*/

.modal-overlay,

.page-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.35);

    backdrop-filter: blur(4px);

    z-index: 1900;

}

.modal-overlay.hidden,

.page-overlay.hidden {

    display: none !important;

}

/*==================================================
  شاشة التحميل الصغيرة
==================================================*/

.loading-overlay {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,255,255,.75);

    backdrop-filter: blur(6px);

    z-index: 4000;

}

.loading-overlay.hidden {

    display: none !important;

}

.loading-overlay-content {

    width: 170px;

    padding: 22px;

    background: var(--surface);

    border-radius: 18px;

    box-shadow: var(--shadow);

    text-align: center;

}

.loading-overlay-content p {

    margin-top: 14px;

    font-size: 14px;

    color: var(--text-light);

}

.loading-spinner.small {

    width: 42px;

    height: 42px;

    margin: auto;

    border-width: 4px;

}

/*==================================================
  حاويات ديناميكية
==================================================*/

#dialogContainer,

#modalContainer,

#toastContainer,

#dynamicContent,

#dynamicRoot,

#temporaryContainer {

    width: 100%;

}
/*==================================================
  Safary
  style.css
  الجزء 17 من 20
==================================================*/

/*==================================================
  تأثيرات الظهور
==================================================*/

.fade-in {

    animation:

        fadeIn .35s ease;

}

.slide-up {

    animation:

        slideUp .35s ease;

}

.scale-in {

    animation:

        scaleIn .25s ease;

}

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes scaleIn {

    from {

        opacity: 0;

        transform: scale(.96);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

/*==================================================
  التمرير
==================================================*/

::-webkit-scrollbar {

    width: 8px;

}

::-webkit-scrollbar-track {

    background: transparent;

}

::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover {

    background: #94a3b8;

}

/*==================================================
  تحديد النص
==================================================*/

::selection {

    background: rgba(37,99,235,.18);

    color: var(--text);

}
/*==================================================
  Safary
  style.css
  الجزء 18 من 20
==================================================*/

/*==================================================
  توافق iPhone و Android
==================================================*/

@supports (

    padding: max(0px)

) {

    body {

        padding-top:

            env(safe-area-inset-top);

        padding-left:

            env(safe-area-inset-left);

        padding-right:

            env(safe-area-inset-right);

        padding-bottom:

            env(safe-area-inset-bottom);

    }

}

/*==================================================
  تحسين الصور
==================================================*/

img {

    user-select: none;

    -webkit-user-drag: none;

    image-rendering: auto;

}

/*==================================================
  تحسين الأزرار
==================================================*/

button {

    -webkit-tap-highlight-color:

        transparent;

    touch-action: manipulation;

}

button:disabled {

    opacity: .6;

    cursor: not-allowed;

}

/*==================================================
  الحقول
==================================================*/

input,

select,

textarea {

    -webkit-appearance: none;

    appearance: none;

    background: #ffffff;

}

/*==================================================
  منع تكبير الحقول في iOS
==================================================*/

input,

select,

textarea,

button {

    font-size: 16px;

}

/*==================================================
  تحسين الأداء
==================================================*/

.screen,

.modal,

.trip-card,

.service-card,

.stat-card {

    will-change:

        transform,

        opacity;

}
/*==================================================
  Safary
  style.css
  الجزء 19 من 20
==================================================*/

/*==================================================
  الاستجابة للشاشات الصغيرة
==================================================*/

@media (max-width: 768px) {

    .page-header {

        padding: 20px 18px 16px;

    }

    .page-title {

        font-size: 24px;

    }

    .welcome-card,

    .trip-card,

    .profile-card,

    .service-card,

    .stat-card {

        padding: 18px;

    }

    .statistics-grid {

        grid-template-columns: 1fr;

    }

    .services-grid {

        grid-template-columns: 1fr;

    }

    .trip-dates {

        grid-template-columns: 1fr;

    }

    .trip-actions {

        flex-direction: column;

    }

    .modal-content {

        max-width: 100%;

        border-radius: 20px 20px 0 0;

        margin-top: auto;

    }

}

/*==================================================
  الشاشات الكبيرة
==================================================*/

@media (min-width: 1024px) {

    body {

        max-width: 500px;

        margin: 0 auto;

        background: #eef2f7;

    }

    .loading-screen,

    .loading-overlay,

    .modal,

    .page-overlay,

    .modal-overlay {

        max-width: 500px;

        left: 50%;

        transform: translateX(-50%);

    }

    .bottom-navigation {

        max-width: 500px;

        left: 50%;

        transform: translateX(-50%);

    }

}
/*==================================================
  Safary
  style.css
  الجزء 20 من 20
==================================================*/

/*==================================================
  تحسينات عامة
==================================================*/

html,
body {

    width: 100%;

    min-height: 100%;

    overflow-x: hidden;

}

body {

    display: flex;

    flex-direction: column;

}

/*==================================================
  تحسين الصور
==================================================*/

img {

    max-width: 100%;

    height: auto;

}

/*==================================================
  تحسين الأزرار
==================================================*/

button {

    user-select: none;

}

button:focus,

input:focus,

select:focus,

textarea:focus {

    outline: none;

}

/*==================================================
  الروابط
==================================================*/

a {

    color: inherit;

    text-decoration: none;

}

/*==================================================
  عدم ظهور أي عنصر مخفي
==================================================*/

.hidden {

    display: none !important;

}

/*==================================================
  نهاية الملف
==================================================*/

html {

    scroll-behavior: smooth;

}

body::before {

    content: "";

    display: none;

}

/*==================================================
  نهاية style.css
==================================================*/