/* ==========================================================================
   pp-rtl.css — Arabic / RTL patch for the PerfectPanel dark theme
   Loaded AFTER pp-bootstrap.css + pp-theme.css.
   The upstream theme is LTR-only, so this file (a) loads an Arabic font,
   (b) mirrors the directional offsets and (c) flips the directional icons.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

/* ---------------------------------------------------------------- base ---- */
html { scroll-behavior: smooth; }

body,
body.dark {
  font-family: 'Tajawal', 'Poppins', system-ui, -apple-system, sans-serif;
  letter-spacing: 0 !important;
  background-color: var(--color-2);
  color: var(--color-3);
}
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body span, body a, body li, body div, body button, body input, body small {
  letter-spacing: 0 !important;
  font-family: 'Tajawal', 'Poppins', system-ui, -apple-system, sans-serif;
}
body p, body li { line-height: 1.9; }
::selection { background: var(--color-6); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #111620; }
::-webkit-scrollbar-thumb { background: #2a3346; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-6); }

/* ------------------------------------------------------------- header ----- */
.header .mh-menu .menu { justify-content: flex-start; }
.header .mh-menu .menu li a { letter-spacing: 0; }

/* -------------------------------------------------------------- hero ------ */
.homeHeader .homeBg { inset: 0; right: 0; left: 0; }
.homeHeader .homeBg img { width: 100%; height: 100%; object-fit: cover; }
.nk-section-title { font-size: 42px !important; line-height: 1.5 !important; }

/* hero buttons: the icon sits on the inline-start side in RTL */
.header-btn,
.nk-btn-group .header-btn { padding: 9px 30px 9px 9px !important; }
.nk-btn-group .header-btn { min-width: 225px; justify-content: flex-start; }
.header-btn .icon::after,
.nk-btn-group .header-btn .icon::after { left: auto; right: 0; }

/* --------------------------------------------------------- login card ----- */
.home-login .f-pass { right: auto !important; left: 25px !important; }
.home-login .card .form-control { text-align: right; }
.home-login .hm-remember { display: block; }

/* Google sign-in pill (the upstream markup relies on an inline <style> block) */
.google-login-wrap {
  position: relative;
  width: 100%;
  height: 48px;
  border-radius: 10px;
  background-color: #7750f6;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: .2s ease;
}
.google-login-wrap:hover { background-color: #8756ff; }
.google-login {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.google-login svg,
.google-login .LgbsSe-Bz112c { width: 20px !important; height: 20px !important; display: inline-block; flex-shrink: 0; }
.google-btn { position: absolute; inset: 0; height: 100%; width: 100%; overflow: hidden; opacity: 0; }
@media (min-width: 991.98px) {
  .google-login-wrap {
    position: absolute;
    inset-inline-start: 15px;
    width: 245px;
    top: -135px;
  }
}
@media (max-width: 991.98px) {
  .google-login-wrap { margin-top: 14px; }
}

/* --------------------------------------------------------- section title -- */
.section-title__content { align-items: center; text-align: center; }
.section-title_title { transform: none; line-height: 1.45; letter-spacing: 0; }
.section-title_title span { letter-spacing: 0; }
.section-title_text { line-height: 1.9; }

.label.label-home { padding: 8px 8px 8px 20px !important; }
.label.label-home .label-text { letter-spacing: 0; }

/* ------------------------------------------------------------- steps ------ */
.step-box-item h3 { text-align: right; }
.step-box-item p { text-align: right; }
.step-arrow { transform: scaleX(-1); }
.step-card { text-align: right; }

/* --------------------------------------------------- recommended list ----- */
.recomm-header > i { margin-right: 0 !important; margin-left: 7px !important; }
.recomm-header .recomm-all { margin-left: 0 !important; margin-right: auto !important; }
.recomm-header .recomm-all i { transform: scaleX(-1); }
.item-row .sr-title { text-align: right !important; padding-left: 0 !important; padding-right: 15px !important; align-items: flex-start; }
.item-row .sr-price { justify-content: flex-start !important; }
.item-row { direction: rtl; }

/* ----------------------------------------------------- features slider ---- */
.step-box-container .step-box-wrapper li.step-box .text { text-align: right; }
.step-box-container .step-box-wrapper li.step-box .text span { letter-spacing: 0; }
.stepbox-controls { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.stepbox-controls .btn-step svg { transform: scaleX(-1); }
.stepbox-controls .btn-step:disabled { opacity: .35; cursor: not-allowed; }

/* -------------------------------------------------------- comparison ------ */
.diff-card .diff-body .diff-body-item { text-align: right; }
.diff-card .diff-head .title { letter-spacing: 0; }
.diff-footer-result { letter-spacing: 0; }

/* ------------------------------------------------------------- tabs ------- */
.tab-content-area { flex-direction: row; }
.tab-content-area .tc-menu {
  border-right: none !important;
  border-left: 1px solid var(--color-8);
}
.tab-content-area .tc-menu .nav {
  flex-direction: column !important;
  flex-wrap: nowrap;
  align-items: stretch;
  padding: 9px;
}
.tab-content-area .tc-menu .nav .nav-item { width: 100%; }
.tab-content-area .tc-menu .nav .nav-link { justify-content: flex-start; white-space: normal; }
.tc-content .tab-pane { display: none; }
.tc-content .tab-pane.active { display: block; }
.tc-content .tab-header { display: flex; align-items: center; gap: 7px; }
@media (max-width: 991.98px) {
  .tab-content-area { flex-direction: column; }
  .tab-content-area .tc-menu { border-left: none !important; }
  .tab-content-area .tc-menu .nav { flex-direction: row !important; flex-wrap: wrap; }
}

/* ------------------------------------------------------------ growth ------ */
#home-growth .growth-wrapper nav { flex-wrap: wrap; }
#home-growth nav .growth-tag { letter-spacing: 0; }
#home-growth .social-buttons { flex-direction: row; }
.sgb-row { display: flex; align-items: center; justify-content: space-between; }
.sgb-back i { transform: scaleX(-1); }
.sgb-chat-left, .sgb-chat-right { text-align: right; }

/* ---------------------------------------------------------- countries ----- */
.country-item .country-text { text-align: right; }
.country-text h3 { letter-spacing: 0; }

/* --------------------------------------------------------------- faq ------ */
.faq-wrapper .faq-item .faq-head,
.faq-wrapper .faq-item .faq-head h3 { letter-spacing: 0; line-height: 1.7; }
.faq-wrapper .faq-item .faq-content { line-height: 1.95; text-align: right; }
.faq-item .fh-left .text h3 { margin: 0; }

/* -------------------------------------------------------- article --------- */
.product-article-content h2 { line-height: 1.6; }
.product-article-content p,
.product-article-content li { text-align: right !important; line-height: 2; }
.product-article-content ul { padding-inline-start: 22px; }
.product-article-more { letter-spacing: 0; }

/* ---------------------------------------------------------- payments ------ */
.login-pm img { max-height: 46px; width: auto; object-fit: contain; }

/* ------------------------------------------------------------ footer ------ */
.footer-top { text-align: right; }
.footer__description { line-height: 1.95; }
.footer-card { padding: 18px 20px 18px 35px !important; }
.footer-card .menu { margin-left: 0 !important; margin-right: auto !important; }
.footer-quality__title { text-align: right; }
.footer-ranks { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.f-ranks-stars { display: flex; align-items: center; gap: 8px; }
.f-ranks-rating-area { margin: 0; font-size: 13px; color: var(--color-3); }

/* ----------------------------------------------------------- bottom bar --- */
.bottom-bar { direction: rtl; }
.bottom-bar .bottom-item a { letter-spacing: 0; }

/* ---------------------------------------------------------- scroll top ---- */
#scrollTopBtn { position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 500;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--color-6);
  background: var(--color-1); display: none; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; }
#scrollTopBtn.show { display: flex; }
#scrollTopBtn label { display: none; }

/* --------------------------------------------------------- telegram ------- */
.telegram-container { position: relative; }
.telegram-button { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: #fff !important; border-radius: 50%; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.telegram-button svg { width: 32px; fill: #24A1DE; }

/* ------------------------------------------------------------ helpers ----- */
.text-center-rtl { text-align: center; }
.d-none { display: none !important; }

/* --------------------------------------------------------- responsive ----- */
@media (max-width: 991.98px) {
  .header .mh-menu-wrapper { height: 0; overflow: hidden; }
  body.menu-active .header .mh-menu-wrapper { height: auto; }
  .step-arrow { display: none; }
  .homeHeader .homeBg { position: absolute; }
  .nk-section-title { font-size: 30px !important; }
  .recomm-wrapper.recomm-toplist { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .bottom-bar { display: grid; }
  body { padding-bottom: 78px; }
  .homeSection { padding: 60px 0 30px; }
  #scrollTopBtn { bottom: 92px; }
}

/* ------------------------------------------------------------- logo ------- */
.logo-text {
  display: inline-block;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.5px !important;
  color: #fff;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #cbb8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.footer__logo .logo-text { font-size: 24px; }

/* ---------------------------------------------- footer rating block ------- */
.footer-quality__title {
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 4px;
}
.footer-ranks {
  display: flex !important;
  flex-flow: row wrap;
  align-items: center;
  gap: 14px;
  margin-top: 15px;
  text-decoration: none;
}
.footer-ranks .f-ranks-stars {
  display: flex !important;
  flex-flow: row !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 4px;
  color: #00B67A;
  font-size: 19px;
  line-height: 1;
}
.f-ranks-rating-area { color: #bdc5fd !important; margin: 0 !important; font-size: 13px; }
.f-ranks-rating-area .gOzFlP { color: #bdc5fd !important; }

/* --------------------------------------------- features slider (RTL) ------ */
.step-box-container .step-box { align-items: flex-start !important; text-align: right; }
.step-box-container .step-box .text { text-align: right; }
.step-box-container .step-box .text span { line-height: 1.5; }

/* ------------------------------------------------- comparison logo -------- */
.diff-logo { font-size: 24px; }

/* --------------------------------------------------- step cards (RTL) ----- */
.step-box .step-box-item h3,
.step-box .step-box-item p { text-align: right; }
.step-card .step-box .title,
.step-card .step-box .text { text-align: right; }

/* --------------------------------------------------- language switcher ---- */
.pp-lang { position: relative; display: inline-block; }
.pp-lang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; font-size: 13px; }
.pp-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 150px;
  background: var(--color-1);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  padding: 6px;
  display: none;
  flex-direction: column;
  z-index: 1200;
}
.pp-lang-menu.open { display: flex; }
.pp-lang-menu a {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-3);
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.pp-lang-menu a:hover { background: rgba(170, 86, 255, .14); color: #fff; }

/* ------------------------------------------------ scroll reveal (home) ---- */
.homeSection, #home-diff { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s ease; }
.homeSection.in, #home-diff.in { opacity: 1; transform: none; }
.homeHeader, .home-login { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .homeSection, #home-diff { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------- mobile menu polish ----- */
body.menu-active { overflow: hidden; }
@media (max-width: 991.98px) {
  /* NOTE: this padding must only apply while the drawer is OPEN.
     `height:0 + overflow:hidden` clips the children but NOT the element's own
     padding box, so an unconditional `padding-bottom` left a 14px strip of the
     menu leaking out under the header on every page load. */
  body.menu-active .header .mh-menu-wrapper { padding-bottom: 14px; }
  .header .mh-buttons { flex-wrap: wrap; gap: 8px; }
  /* Scoped to the drawer's switcher only — so the compact header switcher
     (.mh-lang-quick) is NOT stretched to full width. */
  .header .mh-buttons .pp-lang { flex: 1 1 100%; }
  .header .mh-buttons .pp-lang-btn { width: 100%; justify-content: center; }
  .header .mh-buttons .pp-lang-menu { inset-inline: 0; width: 100%; }
}

/* ------------------------- mobile header language toggle ---------------- */
/* Compact, icon-only globe in the mobile header bar, sitting next to the
   hamburger with the exact same footprint. Tapping it switches straight to
   the other language — there is NO dropdown. Hidden on desktop (the nav
   already has a full switcher). It reuses the glass-pill classes
   (.btn-light) so it matches the hamburger in every theme. */
.mh-lang-quick { display: none; }

@media (max-width: 991.98px) {
  .mh-lang-quick { display: inline-block; }
  .header .mh-menu-btn { align-items: center; gap: 8px; }

  /* Icon-only button — identical 44px footprint to the hamburger. */
  .header .mh-menu-btn .mh-lang-quick__btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    border-radius: 12px;
    text-decoration: none;
  }
}