html {
    scroll-behavior: smooth;
}

.Members_card .Member_img {
  width: 108px !important;
  max-width: 108px !important;
  min-width: 108px !important;
  height: 170px !important;
}

/* ========================================
   HOME PAGE - RTL LAYOUT OVERRIDES
======================================== */
html[dir="rtl"] .custom_pr {
    padding-left: 60px;
    padding-right: 0;
}

html[dir="rtl"] .custom_pl {
    padding-right: 60px;
    padding-left: 0;
}

html[dir="rtl"] .why-txt {
    padding-right: 60px;
    padding-left: 0;
}

@media (min-width: 1200px) and (max-width: 1600px) {
    html[dir="rtl"] .custom_pr {
        padding-left: 40px;
        padding-right: 0;
    }

    html[dir="rtl"] .custom_pl {
        padding-right: 40px;
        padding-left: 0;
    }

    html[dir="rtl"] .why-txt {
        padding-right: 40px;
        padding-left: 0;
    }
}

@media (max-width: 1199px) {
    html[dir="rtl"] .custom_pr {
        padding-left: 30px;
        padding-right: 0;
    }

    html[dir="rtl"] .custom_pl {
        padding-right: 30px;
        padding-left: 0;
    }

    html[dir="rtl"] .why-txt {
        padding-right: 30px;
        padding-left: 0;
    }
}

@media (max-width: 991px) {
    html[dir="rtl"] .why-txt {
        padding-right: 0;
        padding-left: 0;
    }

    html[dir="rtl"] .custom_pr,
    html[dir="rtl"] .custom_pl {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 992px) {
    html[dir="rtl"] .Download_sec .Download_imges {
        right: 0;
        left: auto;
    }
}

html[dir="rtl"] #Testimonials .owl-nav,
html[dir="rtl"] #owlprovider .owl-nav {
    right: auto;
    left: 0;
}

/* ========================================
   UNIVERSAL RTL OVERRIDES
======================================== */

/* 1. Split Panels layout flipping */
html[dir="rtl"] .left-panel {
    right: 0;
    left: auto;
}

html[dir="rtl"] .right-panel {
    margin-right: 50%;
    margin-left: 0;
}

@media (max-width: 991px) {
    html[dir="rtl"] .right-panel {
        margin-right: 0;
        margin-left: 0;
    }
}

/* 2. Absolute positioning of inputs eye and calendar icons */
html[dir="rtl"] .toggle-hide-show {
    right: auto !important;
    left: 0 !important;
    margin: 0 0 15px 15px !important;
}

html[dir="rtl"] .frm-icon {
    right: auto !important;
    left: 0 !important;
    margin: 42px 0 0 15px !important;
}

/* Left padding on input boxes that contain eye/calendar icons to avoid overlapping text */
html[dir="rtl"] .input-wrapper input.form-control,
html[dir="rtl"] .form-group input#dob.form-control {
    padding-left: 45px !important;
    padding-right: 16px !important;
}

/* 3. Gender option card alignment */
html[dir="rtl"] .gender-option-content {
    flex-direction: row-reverse !important;
}

/* 4. Select Dropdown Arrow positioning */
html[dir="rtl"] .form-group-wrapper select {
    background-position: 7% center !important;
}

@media (max-width: 768px) {
    html[dir="rtl"] .form-group-wrapper select {
        background-position: 4% center !important;
    }
}

/* 5. Force OTP digits input block to LTR layout */
.otp-inputs {
    direction: ltr !important;
    justify-content: center !important;
}

/* 6. Setup / Wizard back button arrow flip */
html[dir="rtl"] #prev-btn svg {
    transform: scaleX(-1);
}

/* 7. Dashboard Sidebar and Main panel layout */
html[dir="rtl"] .sidebar {
    right: 0;
    left: auto;
}

html[dir="rtl"] .main-content {
    margin-right: 260px;
    margin-left: 0;
}

html[dir="rtl"] .main-content.expanded {
    margin-right: 80px;
    margin-left: 0;
}

html[dir="rtl"] .sidebar-close-btn {
    right: auto;
    left: 10px;
}

html[dir="rtl"] .userProfile-img {
    margin-left: 5px;
    margin-right: 0;
}

/* Dashboard responsive sidebar (translates from right side in mobile view) */
@media (max-width: 991px) {
    html[dir="rtl"] .sidebar {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        left: auto;
        right: 0;
    }

    html[dir="rtl"] .sidebar.active {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }

    html[dir="rtl"] .main-content,
    html[dir="rtl"] .main-content.expanded {
        margin-right: 0;
        margin-left: 0;
    }
}

/* ========================================
   RTL Fixes for Modal Right
======================================== */
html[dir="rtl"] .modal.modal-right .modal-dialog {
    right: auto;
    left: 0;
    transform: translate3d(-100%, 0, 0);
}

html[dir="rtl"] .modal.modal-right.show .modal-dialog {
    transform: translate3d(0, 0, 0);
}

@media (min-width: 577px) {
    html[dir="rtl"] .modal.modal-right .modal-close-btn {
        left: auto;
        right: -45px;
    }
}

html[dir="rtl"] .profile-menu-dropdown {
    right: auto;
    left: 0;
}

html[dir="rtl"] .profile-menu-item {
    text-align: right;
}
/* RTL for Connections Search Bar */
html[dir="rtl"] .search-btn {
    right: auto;
    left: 8px;
}
html[dir="rtl"] .search-input {
    padding: 12px 16px 12px 50px;
}

/* ========================================
   RTL FIXES — JOBS PAGE
   ======================================== */

/* Filter modal: flip select/input padding so text isn't hidden under the icon */
html[dir="rtl"] .jobs-filter-input,
html[dir="rtl"] .jobs-filter-select {
    padding-right: 16px !important;
    padding-left: 40px !important;
    text-align: right;
}

/* Move the icon (svg absolute) to the LEFT side in RTL */
html[dir="rtl"] .jobs-filter-icon {
    right: auto !important;
    left: 16px !important;
}

/* Offcanvas close button: flip to the RIGHT side in RTL (since panel opens from left) */
html[dir="rtl"] .jobs-offcanvas-close {
    left: auto !important;
    right: -40px !important;
}

/* Phone country-code select in apply form */
html[dir="rtl"] .jobs-phone-select {
    text-align: right;
}

/* Filter tag close icon margin flip */
html[dir="rtl"] .filter-tag svg {
    margin-left: 0 !important;
    margin-right: 8px;
}

/* Offcanvas detail row icon margin flip (me-3 → ms-3 equivalent) */
html[dir="rtl"] .jobs-offcanvas-detail-row svg {
    margin-right: 0 !important;
    margin-left: 12px;
}

/* Job card location icon margin flip */
html[dir="rtl"] .job-card-location svg {
    margin-right: 0 !important;
    margin-left: 4px;
}

/* Spinner margin in load-more button */
html[dir="rtl"] .jobs-load-more-btn .spinner-border {
    margin-left: 0 !important;
    margin-right: 8px;
}

/* RTL for Help Page Tab Arrow */
html[dir="rtl"] .help-tab-arrow {
    transform: rotate(180deg);
}

/* GLOBAL LOADER */
.global-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
html[data-theme="dark"] .global-loader-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}
.stylish-spinner {
    width: 70px;
    height: 70px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stylish-spinner::before,
.stylish-spinner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    animation: stylish-spin 1.5s linear infinite;
}

.stylish-spinner::before {
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-top-color: #037ABD;
    border-bottom-color: #037ABD;
    opacity: 0.8;
    filter: drop-shadow(0 0 8px rgba(3,122,189,0.5));
}

.stylish-spinner::after {
    width: 70%;
    height: 70%;
    border: 4px solid transparent;
    border-left-color: #037ABD;
    border-right-color: #037ABD;
    animation-direction: reverse;
    animation-duration: 1s;
    opacity: 0.6;
}

.stylish-spinner-core {
    width: 25%;
    height: 25%;
    background-color: #037ABD;
    border-radius: 50%;
    box-shadow: 0 0 15px #037ABD;
    animation: stylish-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes stylish-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes stylish-pulse {
    0% { transform: scale(0.8); opacity: 0.7; }
    100% { transform: scale(1.2); opacity: 1; }
}

/* ========================================
   EXTRACTED INLINE CSS FROM BLADE FILES
======================================== */

/* From guest.blade.php / app.blade.php - Tajawal font for RTL (Kurdish) */
html[dir="rtl"] body, 
html[dir="rtl"] h1, 
html[dir="rtl"] h2, 
html[dir="rtl"] h3, 
html[dir="rtl"] h4, 
html[dir="rtl"] h5, 
html[dir="rtl"] h6, 
html[dir="rtl"] p, 
html[dir="rtl"] a, 
html[dir="rtl"] button, 
html[dir="rtl"] span, 
html[dir="rtl"] input, 
html[dir="rtl"] select, 
html[dir="rtl"] textarea {
  /* font-family: 'Tajawal', sans-serif !important; */
  /* font-family: 'Noto Sans Arabic', sans-serif; */
  /* font-family: "Rabar", "Noto Sans Arabic", sans-serif; */
   font-family: "Noto Kufi Arabic", "Rabar", sans-serif;
}

/* From guest.blade.php - Invalid form controls */
.form-control.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.5) !important;
  background-image: none !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.invalid-feedback {
  display: block;
  color: #dc3545;
  font-size: 13px;
  margin-top: 6px;
  font-weight: 500;
  animation: slideDown 0.2s ease-out forwards;
}

html[dir="rtl"] .invalid-feedback {
  text-align: right;
}
html[dir="ltr"] .invalid-feedback {
  text-align: left;
}

/* From signup.blade.php - Gender option validation */
.gender-flx.is-invalid .gender-option-content {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2) !important;
}