/* ==========================================================================
   باران پیام — Responsive / RTL / Mobile UX
   ========================================================================== */

/* ---------- Laptop / small desktop ---------- */
@media (max-width:1120px){
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .footer-top{grid-template-columns:1.4fr 1fr 1fr;gap:28px}
  .footer-col.col-services{grid-column:span 1}
}

@media (max-width:992px){
  :root{--header-h:64px}

  /* Hide desktop nav, show mobile header */
  .main-nav,.header-actions .theme-switch,.header-actions .desk-only{display:none}
  .hamburger{display:grid}
  .header-glass{margin-top:8px;padding-inline:12px}
  .header-glass .btn-sm{--btn-h:38px;padding:0 12px}

  /* Hero single column */
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:20px}
  .hero-copy{margin-inline:auto;max-width:640px}
  .hero .lead{margin-inline:auto}
  .hero-cta,.hero-trust{justify-content:center}
  .hero-visual{order:-1;min-height:auto;margin-top:10px}
  .phone-stage{width:250px;height:470px}
  .hf-1{right:2%}.hf-2{left:2%}.hf-3{right:0}

  .split{grid-template-columns:1fr;gap:34px}
  .split.rev .media{order:-1}
  .otp-grid,.discount-grid{grid-template-columns:1fr;text-align:center}
  .otp-visual{margin-top:10px}
  .contact-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .code-body{font-size:.8rem}
}

/* ---------- Tablet ---------- */
@media (max-width:820px){
  .section{padding-block:clamp(46px,8vw,80px)}
  .grid-2{grid-template-columns:1fr}
  .tabs:not(.scroll-x){gap:8px}
}

/* ---------- Mobile ---------- */
@media (max-width:768px){
  html{scroll-padding-top:80px}
  .container,.container-wide{padding-inline:16px}
  body{font-size:15px;line-height:1.8}

  /* Show mobile sticky header */
  .mobile-header{
    display:flex;position:sticky;top:0;z-index:920;
    align-items:center;justify-content:space-between;gap:10px;
    height:60px;padding-inline:14px;
    background:var(--glass);border-bottom:1px solid var(--glass-brd);
    backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
    box-shadow:var(--shadow-sm);
  }
  .mobile-header::after{content:"";position:absolute;bottom:0;inset-inline:0;height:2px;background:var(--grad-brand);opacity:.55}
  .mh-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.02rem}
  .mh-brand img.icon{width:38px;height:38px;border-radius:11px;object-fit:cover}
  .mh-brand img.logo{height:36px;width:auto}
  .mh-actions{display:flex;align-items:center;gap:8px}
  .mh-btn{position:relative;width:42px;height:42px;min-height:44px;min-width:44px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--border);display:grid;place-items:center;color:var(--text);transition:.25s var(--ease)}
  .mh-btn svg{width:21px;height:21px}
  .mh-btn:active{transform:scale(.92)}
  .mh-btn .status-dot{position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--turquoise);border:2px solid var(--bg-elev);box-shadow:0 0 0 0 rgba(16,201,165,.5);animation:pulse 2s infinite}

  /* Hide the desktop header entirely on phones */
  .site-header{display:none}

  /* Action bar visible */
  .action-bar{display:block}
  .site-footer{margin-bottom:74px}

  /* Grids collapse */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .stats-band{margin-top:-30px}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:26px;padding-block:42px 30px}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column;text-align:center;justify-content:center}
  .cta-band{flex-direction:column;text-align:center;padding:30px 22px}

  /* Horizontal scroll cards (features / plugins / pricing on phones) */
  .hscroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .hscroll>*{flex:0 0 82%;max-width:320px;scroll-snap-align:center}
  .hscroll.tabs{flex-wrap:nowrap}
  .hscroll.tabs>*{flex:0 0 auto;max-width:none}

  /* Hero */
  .hero{padding-block:26px 60px}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .hero-cta{gap:12px}
  .phone-stage{width:230px;height:430px}
  .msg{font-size:.74rem}

  /* keep floating chips INSIDE viewport (fix right-edge overflow) */
  .hero-visual{overflow:hidden;padding-block:6px}
  .hf-1{top:4%;right:0}
  .hf-2{bottom:12%;left:0}
  .hf-3{bottom:42%;right:0}
  .hero-float{font-size:.72rem;padding:8px 10px;gap:7px}
  .hero-float svg{width:16px;height:16px}

  /* Coupon notches smaller */
  .coupon{padding:24px 18px}
  .coupon .code{font-size:1.4rem;letter-spacing:3px}

  /* Toast above action bar */
  .toast-region{bottom:calc(84px + env(safe-area-inset-bottom));inset-inline:16px;align-items:stretch}
  .toast{max-width:none;width:100%}
}

@media (max-width:480px){
  .container,.container-wide{padding-inline:13px}
  h1{font-size:1.72rem}
  h2{font-size:1.42rem}
  .btn{padding:0 18px}
  .btn-lg{--btn-h:52px;padding:0 22px;font-size:1rem}
  .stat-card{padding:18px 12px}
  .stat-card .num{font-size:1.4rem}
  .otp-box span{width:38px;height:50px;font-size:1.2rem}
  .otp-box{gap:7px}
  .countdown .cd{min-width:44px}
  .social-row a{min-width:56px;padding:12px 6px;font-size:.72rem}
  .contact-line{padding:14px}
  .contact-line b{font-size:.96rem}
  .hscroll>*{flex-basis:88%}
  .footer-top{grid-template-columns:1fr}
  .section-head{margin-bottom:26px}
  .hero-trust{gap:14px}
}

/* Very small */
@media (max-width:360px){
  .brand,.mh-brand{font-size:.95rem}
  .phone-stage{width:205px;height:390px}
  .otp-box span{width:34px;height:46px;font-size:1.05rem}
}

/* Landscape phones — reduce hero min height */
@media (max-height:520px) and (orientation:landscape){
  .hero-visual{min-height:auto}
  .phone-stage{width:190px;height:340px}
}

/* Prevent horizontal overflow safety net everywhere */
body,.container,.container-wide,.section,*{max-width:100%}
img,table,pre,iframe{max-width:100%}
pre,.code-window{overflow-x:auto}
table{width:100%;border-collapse:collapse;table-layout:fixed}

@media (max-width:992px){.bp-course-hero-grid{grid-template-columns:1fr}.bp-course-hero-grid .bp-buybox{max-width:480px;margin-inline:auto}.bp-admin-foot{margin-inline-start:36px}}
@media (max-width:768px){.bp-search-panel{padding:20px}.bp-curriculum li{flex-wrap:wrap}}