/* ============================================================
   وقفی نو DESIGN SYSTEM — RESPONSIVE
   Original breakpoints from the homepage template (37.5em / 56.25em)
   + responsive rules for the new shared components.
   ============================================================ */

@media (min-width: 37.5em) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1.2fr; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .mission-vision { grid-template-columns: 1fr 1fr; }
  .investment-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 56.25em) {
  .hero .container { grid-template-columns: .95fr 1.05fr; }
  .hero__content { grid-column: 2; }
  .hero__visual { grid-column: 1; grid-row: 1; }
  .products-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .stats-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid--1 { grid-template-columns: 1fr; }
  .stat-card:not(:first-child) { border-inline-start: 1px solid rgba(255, 255, 255, .14); }
  .network-grid { grid-template-columns: repeat(3, 1fr); }
  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(4, 1fr); }
  .culture-panel { grid-template-columns: .95fr 1.05fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .media-grid { grid-template-columns: repeat(3, 1fr); }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .values-grid { grid-template-columns: repeat(4, 1fr); }
  .investment-grid { grid-template-columns: repeat(3, 1fr); }
  .about-intro { grid-template-columns: 1fr 1.05fr; }
  .newsletter-box { grid-template-columns: 1.1fr 1fr; }
  .detail-hero .container { grid-template-columns: 1.05fr .95fr; }
  .detail-grid--aside { grid-template-columns: 1fr 21rem; }
  .featured-news { grid-template-columns: 1.1fr 1fr; }
}
@media (min-width: 37.5em) and (max-width: 62.99em) {
  .investment-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 68.74em) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: grid; place-items: center; }
}
@media (min-width: 68.75em) and (max-width: 84.99em) {
  /* Just above the nav breakpoint there isn't quite room for the full
     nav plus both the login and the phone-call buttons, so drop the
     phone CTA first (it's also available inside the mobile menu and
     on the contact page) to keep the header from overflowing. */
  .header-cta { display: none; }
}
@media (max-width: 56.24em) {
  .hero { min-height: auto; }
  .hero__visual { width: min(100%, 30rem); justify-self: center; }
  .hero__content { max-width: none; }
  .hero__visual { order: 2; }
  .hero__content { order: 1; }
  .header-auth span { display: none; }
  .header-auth { padding-inline: .65rem; }
}
@media (max-width: 61.99em) {
  .app-menu-btn { display: grid; place-items: center; }
  .app-topbar__search { display: none; }
}
@media (min-width: 62em) {
  body.app-nav-open { overflow: visible; }
  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    transform: none;
    visibility: visible;
    flex-shrink: 0;
  }
  .app-menu-btn { display: none; }
}
@media (max-width: 37.49em) {
  .featured-news__media { min-height: 12rem; }
  .sort-bar { justify-content: center; }
  .newsletter-form .btn { width: 100%; }
  .detail-aside { position: static; }
  .otp-row input { width: 2.6rem; height: 2.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .partners-viewport { overflow-x: auto; }
  .partners-track { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
}
/* ============================================================
   v50 responsive foundation
   The site is RTL-first and must remain usable between the designed
   desktop breakpoints, not only at 390px and 1440px.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { min-width: 0; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
.container, .app-content { width: min(100% - 2rem, var(--container-max, 78rem)); }

/* Never let a wide child create a phantom horizontal page. Wide data remains scrollable in its own frame. */
:is(.grid, .form-row, .form-grid, .widgets-row, .dashboard-stats, .visit-stats, .visit-charts, .network-grid, .features-grid, .products-grid, .news-grid, .gallery-grid, .settings-sidebar-layout) > * { min-width: 0; }
.table-wrap, .data-table, .chart-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre, code { overflow-wrap: anywhere; }

@media (max-width: 63.9375em) {
  .site-header .nav-wrap { gap: .6rem; }
  .site-header .brand__tag { display: none; }
  .main-nav { display: none; }
  .site-header .header-actions { margin-inline-start: auto; }
  .site-header .header-cta { display: none; }
  .site-header .nav-toggle { display: grid; place-items: center; }
  .section { padding-block: clamp(3rem, 8vw, 5rem); }
  .section-head { margin-bottom: 1.6rem; }
}
@media (max-width: 37.49em) {
  .container, .app-content { width: min(100% - 1.25rem, var(--container-max, 78rem)); }
  .site-header .nav-wrap { min-height: 4.25rem; }
  .site-header .brand__name { font-size: .95rem; }
  .site-header .brand__mark { width: 2.35rem; height: 2.35rem; }
  .section-head__title { font-size: clamp(1.45rem, 7vw, 2rem); line-height: 1.5; }
  .section-head__desc { font-size: .9rem; line-height: 1.9; }
  .btn { min-height: 2.7rem; max-width: 100%; }
  .form-row, .form-grid, .swap-grid { grid-template-columns: 1fr !important; }
  .form-actions { position: static; flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .table { min-width: 42rem; }
  .table-wrap { margin-inline: -.35rem; border-radius: 12px; }
  .modal { width: min(100% - 1rem, 34rem); max-height: calc(100dvh - 1rem); overflow-y: auto; }
  .modal__actions { flex-direction: column-reverse; }
  .modal__actions .btn { width: 100%; justify-content: center; }
  .toast { inset-inline: .75rem; width: auto; bottom: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}