/* ==========================================================================
   Language Toggle & Global i18n Stylesheet
   ========================================================================== */

/* --- Language Toggle Pill Switch --- */
.lang-toggle-container {
    display: inline-flex;
    align-items: center;
}

.lang-toggle-btn {
    direction: ltr !important;
    position: relative;
    width: 65px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    outline: none;
    border: none;
    transition: all 0.3s ease;
}

/* Dashboard or Solid Header Variations */
.dashboard-header .lang-toggle-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.lang-pill {
    position: absolute;
    top: 3px;
    width: 26px;
    height: 24px;
    background-color: #e05e2b; /* Primary Brand Color */
    border-radius: 15px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* LTR layout (locale = en): pill is on the left */
.lang-toggle-btn.active-en .lang-pill {
    left: 5px;
    transform: translateX(0px);
}

/* RTL layout (locale = ar): pill is on the right */
.lang-toggle-btn.active-ar .lang-pill {
    left: 5px;
    transform: translateX(29px);
}

.lang-toggle-btn span.lang-text-en,
.lang-toggle-btn span.lang-text-ar {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    z-index: 2;
    transition: color 0.3s ease;
    width: 24px;
    text-align: center;
}

.dashboard-header .lang-toggle-btn span.lang-text-en,
.dashboard-header .lang-toggle-btn span.lang-text-ar {
    color: #888;
}

.lang-toggle-btn.active-en span.lang-text-en {
    color: #fff !important;
}

.lang-toggle-btn.active-ar span.lang-text-ar {
    color: #fff !important;
}

/* ==========================================================================
   LTR / English Layout Overrides
   ========================================================================== */
html[dir="ltr"] {
    --font-family-primary: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Header Overrides */
html[dir="ltr"] .header-logo-wrapper {
    justify-content: flex-start !important;
}

html[dir="ltr"] .logo-wrapper {
    justify-content: flex-start !important;
}

html[dir="ltr"] .nav-dropdown-menu {
    right: auto !important;
    left: 0 !important;
}

html[dir="ltr"] .nav-dropdown-item {
    text-align: left !important;
    transition: background-color 0.2s ease, padding-left 0.2s ease !important;
}

html[dir="ltr"] .nav-dropdown-item:hover {
    padding-left: 24px !important;
    padding-right: 20px !important;
}

html[dir="ltr"] .nav-dropdown-nested-toggle {
    text-align: left !important;
    transition: background-color 0.2s ease, padding-left 0.2s ease !important;
}

html[dir="ltr"] .nav-dropdown-nested-toggle:hover {
    padding-left: 24px !important;
    padding-right: 20px !important;
}

html[dir="ltr"] .nav-dropdown-nested-menu .nav-dropdown-item {
    padding-left: 40px !important;
    padding-right: 20px !important;
}

html[dir="ltr"] .dropdown-chevron-nested {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* Hero Section Overrides */
html[dir="ltr"] .hero-text-content-wrapper {
    text-align: left !important;
    align-items: flex-start !important;
}

html[dir="ltr"] .hero-text-content {
    align-items: flex-start !important;
    text-align: left !important;
}

html[dir="ltr"] .hero-title {
    text-align: left !important;
    font-family: var(--font-family-primary) !important;
}

html[dir="ltr"] .hero-subtitle {
    text-align: left !important;
}

/* Centered Hero on About Us Page for LTR */
html[dir="ltr"] .about-us-hero-content .hero-title,
html[dir="ltr"] .about-us-hero-content .hero-subtitle {
    text-align: center !important;
}

html[dir="ltr"] .hero-buttons {
    justify-content: flex-start !important;
}

/* Button Chevron Flip in LTR */
html[dir="ltr"] .hero-btn .btn-icon img,
html[dir="ltr"] .about-mawaddah-btn .btn-chevron-icon,
html[dir="ltr"] .programs-view-all-btn .btn-chevron-icon,
html[dir="ltr"] .btn-chevron-icon-flip {
    transform: rotate(180deg) !important;
}

/* Strategy Section Overrides */
html[dir="ltr"] .strategy-content {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="ltr"] .strategy-title {
    text-align: left !important;
}

html[dir="ltr"] .strategy-description {
    text-align: left !important;
}

html[dir="ltr"] .strategy-signature-desktop {
    text-align: left !important;
}

html[dir="ltr"] .strategy-signature-desktop .signature-title,
html[dir="ltr"] .strategy-signature-desktop .signature-name {
    text-align: left !important;
}

/* About Section Overrides */
html[dir="ltr"] .about-right-content {
    border-top-right-radius: 200px !important;
    border-bottom-right-radius: 200px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    padding: 0 64px 0 15.5% !important;
}

html[dir="ltr"] .about-mawaddah-logo {
    justify-content: flex-start !important;
}

html[dir="ltr"] .about-mawaddah-title {
    text-align: left !important;
    font-family: var(--font-family-primary) !important;
    font-size: 64px !important;
}

html[dir="ltr"] .about-mawaddah-description {
    text-align: left !important;
}

html[dir="ltr"] .about-mawaddah-btn {
    flex-direction: row !important;
}

html[dir="ltr"] .about-center-content {
    margin-left: 0 !important;
    margin-right: 15.5% !important;
    padding-right: 15px !important;
    padding-left: 0 !important;
}

html[dir="ltr"] .about-card-title,
html[dir="ltr"] .about-card-text {
    text-align: left !important;
}

/* About Us Page Tab Overrides */
html[dir="ltr"] .about-tab,
html[dir="ltr"] .about-tab-title {
    text-align: left !important;
}

/* Programs Section Overrides */
html[dir="ltr"] .programs-view-all-btn {
    flex-direction: row !important;
}

html[dir="ltr"] .program-card-title,
html[dir="ltr"] .program-card-description {
    text-align: left !important;
}

html[dir="ltr"] .program-icon img {
    transform: rotate(180deg) !important;
}

/* Quick Donation Section Overrides */
html[dir="ltr"] .quick-donation-title {
    text-align: left !important;
}

html[dir="ltr"] .quick-donation-subtitle {
    text-align: left !important;
}

html[dir="ltr"] .quick-donation-content .hero-btn {
    flex-direction: row !important;
}

html[dir="ltr"] .quick-donation-wrapper {
    justify-content: flex-start !important;
    padding: 0 0 0 80px !important;
}

html[dir="ltr"] .donation-bg-image {
    transform: scaleX(-1) !important;
}

html[dir="ltr"] .donation-overlay {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%) !important;
}

@media (max-width: 1400px) {
    html[dir="ltr"] .quick-donation-wrapper {
        padding: 0 0 0 60px !important;
    }
}

@media (max-width: 991.98px) {
    html[dir="ltr"] .quick-donation-wrapper {
        padding: 0 0 0 40px !important;
    }
}

@media (max-width: 767.98px) {
    html[dir="ltr"] .quick-donation-wrapper {
        padding: 0 20px !important;
        justify-content: center !important;
    }
    html[dir="ltr"] .quick-donation-content {
        align-items: center !important;
        text-align: center !important;
    }
}

/* Memberships Section Overrides */
html[dir="ltr"] .membership-btn {
    flex-direction: row !important;
}

/* Login and Password Input Overrides for LTR */
html[dir="ltr"] .login-input {
    direction: ltr !important;
    text-align: left !important;
}

html[dir="ltr"] .password-input {
    direction: ltr !important;
    text-align: left !important;
    padding-left: 16px !important;
    padding-right: 40px !important;
}

html[dir="ltr"] .password-toggle-btn {
    left: auto !important;
    right: 16px !important;
}