/* Penweet RTL overrides — loaded only when html[dir=rtl] / locale=ar */

[dir="rtl"] body,
[dir="rtl"] .fw-p,
[dir="rtl"] .fw-sexy,
[dir="rtl"] .fw-20,
[dir="rtl"] .btn,
[dir="rtl"] .form-control,
[dir="rtl"] .form-select,
[dir="rtl"] .nav-link,
[dir="rtl"] .dropdown-item,
[dir="rtl"] .site-footer {
  font-family: "Tajawal", "Open Sans", "Nunito", sans-serif;
}

[dir="rtl"] .dropdown_ul,
[dir="rtl"] .dropdown-menu {
  text-align: right;
}

[dir="rtl"] .navbar .dropdown_ul {
  left: 0;
  right: auto;
}

[dir="rtl"] .penweet-pagination__arrow svg,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left {
  transform: scaleX(-1);
}

[dir="rtl"] .invalid-feedback {
  margin-left: 0;
  margin-right: 21px;
}

[dir="rtl"] .form-control.is-invalid,
[dir="rtl"] .form-control.is-valid {
  background-position: left 16px center;
  padding-right: 0.75rem;
  padding-left: 44px;
}

[dir="rtl"] .discover-modal__close,
[dir="rtl"] .modal .btn-close {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] #homeColorFilterDropdown .home-color-filter-menu {
  left: auto;
  right: 0;
}

[dir="rtl"] .penweet-dropdown-menu,
[dir="rtl"] .penweet-filter-menu {
  text-align: right;
}

[dir="rtl"] #toast-container > div {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] #toast-container.toast-top-right,
[dir="rtl"] #toast-container.toast-top-left {
  right: auto;
  left: 12px;
}

[dir="rtl"] #creativeFieldsModal .form-check[style*="padding-left"] {
  padding-left: 0 !important;
  padding-right: 37px !important;
}

[dir="rtl"] .input-group > .form-control {
  border-radius: inherit;
}

[dir="rtl"] .float-end {
  float: left !important;
}

[dir="rtl"] .float-start {
  float: right !important;
}

[dir="rtl"] .text-start {
  text-align: right !important;
}

[dir="rtl"] .text-end {
  text-align: left !important;
}

/* Responsive text alignment (Bootstrap LTR utilities stay physical without bootstrap.rtl.css) */
@media (min-width: 576px) {
  [dir="rtl"] .text-sm-start { text-align: right !important; }
  [dir="rtl"] .text-sm-end { text-align: left !important; }
}
@media (min-width: 768px) {
  [dir="rtl"] .text-md-start { text-align: right !important; }
  [dir="rtl"] .text-md-end { text-align: left !important; }
}
@media (min-width: 992px) {
  [dir="rtl"] .text-lg-start { text-align: right !important; }
  [dir="rtl"] .text-lg-end { text-align: left !important; }
  [dir="rtl"] .ms-lg-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  [dir="rtl"] .me-lg-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
  }
}
@media (min-width: 1200px) {
  [dir="rtl"] .text-xl-start { text-align: right !important; }
  [dir="rtl"] .text-xl-end { text-align: left !important; }
}

[dir="rtl"] .me-auto {
  margin-right: 0 !important;
  margin-left: auto !important;
}

[dir="rtl"] .ms-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Bootstrap LTR spacing utilities → physical flip for RTL (no bootstrap.rtl.css) */
[dir="rtl"] .me-0 { margin-right: 0 !important; margin-left: 0 !important; }
[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; }

[dir="rtl"] .ms-0 { margin-left: 0 !important; margin-right: 0 !important; }
[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }

[dir="rtl"] .pe-0 { padding-right: 0 !important; padding-left: 0 !important; }
[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; }
[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
[dir="rtl"] .pe-5 { padding-right: 0 !important; padding-left: 3rem !important; }

[dir="rtl"] .ps-0 { padding-left: 0 !important; padding-right: 0 !important; }
[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; }
[dir="rtl"] .ps-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
[dir="rtl"] .ps-5 { padding-left: 0 !important; padding-right: 3rem !important; }

/*
 * Select caret: Bootstrap pins the arrow to the physical right.
 * In RTL place it on the end (left) and keep caret padding even when ps-* flips.
 */
[dir="rtl"] .form-select {
  background-position: left 0.75rem center !important;
  padding-left: 2.25rem !important;
}

/*
 * Filter pills use `px-3 pe-3`. The pe-* flip above zeros the icon-side padding
 * and crushes icons against the pill edge. Restore the original equal 1rem padding
 * and mirror the Bootstrap caret gap (same look as LTR).
 */
[dir="rtl"] .btn.btn-a.dropdown-toggle.rounded-5.border.px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

[dir="rtl"] .btn.btn-a.dropdown-toggle.rounded-5.border::after {
  margin-left: 0;
  margin-right: 0.255em;
}


[dir="rtl"] .auth-oauth-btn,
.auth-oauth-btn {
  width: min(320px, 88%);
  max-width: 100%;
  gap: 0.5rem;
}

/* Auth layout */
.auth-hero-panel {
  inset: 0;
  overflow: hidden;
}

.auth-hero-copy {
  max-width: min(100%, 36rem);
}

[dir="rtl"] .auth-back-chevron {
  transform: scaleX(-1);
}

[dir="rtl"] .auth-verify__lead,
[dir="rtl"] .auth-verify__hint,
[dir="rtl"] .auth-verify__alert,
[dir="rtl"] .auth-verify__resend,
[dir="rtl"] .auth-verify__title {
  font-family: "Tajawal", "Open Sans", sans-serif;
}

[dir="rtl"] .country-select__trigger,
[dir="rtl"] .country-select__search-input,
[dir="rtl"] .country-select__option {
  font-family: "Tajawal", "Open Sans", sans-serif;
}

[dir="rtl"] .country-select__option {
  font-weight: 500;
}

/* Bootstrap form-check without bootstrap.rtl.css */
[dir="rtl"] .form-check:not(.d-flex) {
  padding-left: 0;
  padding-right: 1.5em;
}

[dir="rtl"] .form-check:not(.d-flex) .form-check-input {
  float: right;
  margin-left: 0.5em;
  margin-right: -1.5em;
}

[dir="rtl"] .form-check.d-flex {
  padding-left: 0;
  padding-right: 0;
}

[dir="rtl"] .form-check.d-flex .form-check-input {
  float: none;
  margin: 0;
}

/* Settings / edit-profile side nav active border */
[dir="rtl"] .active-link-side {
  border-left: none !important;
  border-right: 2px solid var(--lilk) !important;
}

[dir="rtl"] .link-side {
  border-left: none !important;
  border-right: 2px solid transparent !important;
}

[dir="rtl"] .settings-nav,
[dir="rtl"] .settings-shell .settings-nav {
  text-align: right;
}

/* Messages + notifications dropdown panels */
.messages-dropdown-panel,
.notif-dropdown-panel {
  right: 0;
  left: auto;
}

[dir="rtl"] .messages-dropdown-panel,
[dir="rtl"] .notif-dropdown-panel,
[dir="rtl"] .navbar .notif-dropdown .dropdown_ul,
[dir="rtl"] .navbar #click + .dropdown_ul {
  right: auto;
  left: 0;
  text-align: right;
}

[dir="rtl"] .notif-dropdown .notif-card,
[dir="rtl"] .notif-dropdown .notif-row,
[dir="rtl"] .dropdown_ul .notif-card,
[dir="rtl"] .dropdown_ul .notif-row {
  text-align: right;
}

[dir="rtl"] .notif-dropdown .request-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .settings-shell .settings-nav .link-side,
[dir="rtl"] .settings-shell .settings-nav .fw-20 {
  text-align: right;
}

[dir="rtl"] .settings-shell .settings-nav .ps-4 {
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}

[dir="rtl"] .settings-shell .border-end {
  border-right: 0 !important;
  border-left: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6) !important;
}

.settings-url-row {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.settings-url-row .settings-url-prefix {
  flex: 0 0 auto;
  white-space: nowrap;
}

.settings-url-row > input {
  min-width: 0;
  flex: 1 1 auto;
}

[dir="rtl"] .settings-shell .settings-card {
  overflow: visible;
}

[dir="rtl"] #penweet_id_input,
[dir="rtl"] #penweet_url_preview {
  text-align: left;
  direction: ltr;
}

/* Mobile safe edge gaps */
@media (max-width: 575.98px) {
  .container-fluid,
  .continer-fluid {
    padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
  }

  [dir="rtl"] .settings-shell .settings-main > .bg-white.shadow,
  [dir="ltr"] .settings-shell .settings-main > .bg-white.shadow {
    padding-inline: 16px !important;
  }
}

[dir="rtl"] .penweet-locale__item-native[lang="en"],
[dir="rtl"] .penweet-locale-pick__native[lang="en"],
[dir="rtl"] .penweet-locale-pick__code[lang="en"] {
  font-family: "Open Sans", "Nunito", sans-serif;
}

[dir="rtl"] .penweet-locale__badge {
  letter-spacing: 0.02em;
}