/* Atlas V16 — final visual system. Loaded last. Visual/UX only. */
:root{--atlas-red:#ef3740;--atlas-red-soft:#ff5962;--atlas-bg:#090a0d;--atlas-panel:#111319;--atlas-line:rgba(255,255,255,.085)}
html{scroll-behavior:smooth;background:var(--atlas-bg);text-rendering:optimizeLegibility}
body{-webkit-font-smoothing:antialiased}
button,a{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid rgba(239,55,64,.75);outline-offset:3px}

/* HOME: stronger hierarchy without changing content/i18n */
.hero-section{isolation:isolate;overflow:hidden}
.hero-section::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(42rem 24rem at 76% 50%,rgba(239,55,64,.12),transparent 68%),linear-gradient(90deg,rgba(5,6,9,.93) 0%,rgba(5,6,9,.68) 45%,rgba(5,6,9,.28) 100%)}
.hero-section .hero-content{position:relative;z-index:2}
.hero-section .hero-badge{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.hero-section .hero-title{max-width:820px;letter-spacing:-.055em;text-wrap:balance}
.hero-section .hero-sub{max-width:680px}
.hero-section .hero-actions .btn-primary,.hero-section .hero-actions .btn-secondary{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}
.hero-section .hero-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(239,55,64,.22)}
.hero-section .hero-actions .btn-secondary:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22)}
.hero-counter{font-variant-numeric:tabular-nums}

/* Section rhythm */
section[class$="-section"]{scroll-margin-top:86px}
.section-label{letter-spacing:.24em!important}
.section-title{text-wrap:balance}

/* Pricing: premium focus */
.pricing-grid .plan-card{transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease;will-change:transform}
.pricing-grid .plan-card:hover{transform:translateY(-5px);border-color:rgba(239,55,64,.35)!important;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.pricing-grid .plan-card.popular{box-shadow:0 18px 48px rgba(239,55,64,.09)}

/* Compatibility cards */
.compat-grid .platform-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.compat-grid .platform-card:hover{transform:translateY(-4px);border-color:rgba(239,55,64,.30)!important;box-shadow:0 18px 45px rgba(0,0,0,.22)}
.compat-grid img{transition:transform .28s ease;will-change:transform}
.compat-grid .platform-card:hover img{transform:scale(1.035)}

/* FAQ interaction */
.faq-item{transition:border-color .2s ease,background .2s ease,transform .2s ease}
.faq-item:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.14)!important}
.faq-q{cursor:pointer}

/* Cart / CTAs */
.cart-btn,.nav-cta,.btn-primary,.btn-secondary{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease}
.navbar.scrolled{box-shadow:0 12px 35px rgba(0,0,0,.16)}

/* Better desktop content width */
.page-section-top{min-height:calc(100vh - 76px);box-sizing:border-box}

/* Mobile-first pass */
@media(max-width:720px){
  .navbar{min-height:66px!important;padding-left:12px!important;padding-right:12px!important}
  .nav-logo{font-size:.88rem!important;letter-spacing:.11em!important}
  .nav-links,.lang-toggle{display:none!important}
  .nav-right{gap:7px!important}
  .cart-btn{width:36px!important;height:36px!important}
  .nav-cta{min-width:104px!important;min-height:38px!important;padding:0 11px!important;font-size:.60rem!important;letter-spacing:.09em!important}
  .mobile-toggle{width:40px!important;height:40px!important;display:grid!important;place-items:center}
  .mobile-menu{z-index:1100!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:6px!important;background:rgba(12,13,17,.98)!important;box-shadow:0 24px 70px rgba(0,0,0,.45)!important}
  .mobile-menu .nav-link{padding:14px 12px!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
  .hero-section{min-height:720px!important;padding-top:120px!important;padding-bottom:74px!important}
  .hero-section::after{background:linear-gradient(180deg,rgba(5,6,9,.55),rgba(5,6,9,.78) 48%,rgba(5,6,9,.96) 100%),radial-gradient(28rem 22rem at 70% 32%,rgba(239,55,64,.15),transparent 70%)}
  .hero-section .hero-title{font-size:clamp(2.35rem,11vw,4.3rem)!important;line-height:.94!important}
  .hero-section .hero-sub{font-size:.92rem!important;line-height:1.65!important}
  .hero-section .hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}
  .hero-section .hero-actions>*{width:100%!important;box-sizing:border-box}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pricing-grid{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:12px!important;padding:5px 4px 18px!important;scrollbar-width:none}
  .pricing-grid::-webkit-scrollbar{display:none}
  .pricing-grid .plan-card{flex:0 0 min(82vw,330px)!important;scroll-snap-align:center!important}
  .compat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .features-grid{grid-template-columns:1fr!important}
  .testimonials-slider{overflow:hidden!important}
  .cta-box{padding:34px 20px!important}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:28px!important}
}
@media(max-width:390px){
  .nav-cta{min-width:92px!important;font-size:.56rem!important;padding:0 8px!important}
  .cart-btn{width:34px!important;height:34px!important}
  .mobile-toggle{width:38px!important;height:38px!important}
  .hero-section{min-height:680px!important}
  .hero-section .hero-actions{grid-template-columns:1fr!important}
  .compat-grid{grid-template-columns:1fr!important}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* =========================================================
   FIX — PRICING BADGES
   Keep trial / popular badges fully inside their cards
   ========================================================= */

.pricing-grid .plan-card {
  position: relative;
  overflow: visible;
}

.pricing-grid .plan-card > .plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  white-space: nowrap;
}

.pricing-grid .plan-card > .plan-badge.plan-badge-trial {
  top: 0;
}

.pricing-grid .plan-card > .plan-save {
  position: absolute;
  top: 14px;
  right: 10px;
  z-index: 6;
  white-space: nowrap;
}

/* 24h trial badge: don't let it get clipped */
.pricing-grid .plan-card[data-plan-id="test24h"] > .plan-badge {
  top: 14px;
}

/* 6 months: popular + saving badges must have their own space */
.pricing-grid .plan-card[data-plan-id="6months"] > .plan-badge {
  top: 14px;
  left: 50%;
}

.pricing-grid .plan-card[data-plan-id="6months"] > .plan-save {
  top: 14px;
  right: 10px;
}

/* Prevent badge collisions on narrower desktop widths */
@media (max-width: 1100px) {
  .pricing-grid .plan-card[data-plan-id="6months"] > .plan-badge {
    left: 10px;
    transform: none;
  }

  .pricing-grid .plan-card[data-plan-id="6months"] > .plan-save {
    right: 10px;
  }
}

/* Mobile: badges remain inside and never create horizontal overflow */
@media (max-width: 700px) {
  .pricing-grid .plan-card > .plan-badge,
  .pricing-grid .plan-card[data-plan-id="6months"] > .plan-badge {
    top: 10px;
    left: 10px;
    transform: none;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pricing-grid .plan-card > .plan-save {
    top: 10px;
    right: 10px;
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* =========================================================
   PRICING — BADGES ABOVE CARD
   ========================================================= */

.pricing-grid {
  overflow: visible !important;
}

.pricing-grid .plan-card {
  overflow: visible !important;
}

/* 24h Trial badge */
.pricing-grid .plan-card[data-plan-id="test24h"] > .plan-badge {
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  white-space: nowrap !important;
}

/* 6 months — Most Popular badge */
.pricing-grid .plan-card[data-plan-id="6months"] > .plan-badge {
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  white-space: nowrap !important;
}

/* Keep the saving badge inside the card */
.pricing-grid .plan-card > .plan-save {
  top: 14px !important;
  z-index: 10 !important;
}

/* Never clip the pricing section */
.pricing-grid,
.pricing-section,
.subscriptions-page {
  overflow: visible !important;
}


/* =========================================================
   ATLAS — GLOBAL MOBILE RESPONSIVE FIX
   Desktop layout remains unchanged
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------- TABLET ---------- */
@media (max-width: 900px) {

  .container,
  .section-container,
  .page-container,
  .content-container {
    width: 100%;
    max-width: 100%;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .plan-card {
    min-width: 0 !important;
    width: 100% !important;
  }

  img,
  video,
  svg {
    max-width: 100%;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {

  /* Global spacing */
  .container,
  .section-container,
  .page-container,
  .content-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  section {
    max-width: 100%;
  }

  /* Typography */
  h1 {
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.05 !important;
  }

  h2 {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.15 !important;
  }

  h3 {
    font-size: 20px !important;
  }

  p {
    max-width: 100%;
  }

  /* ---------- NAVBAR ---------- */

  header,
  nav {
    max-width: 100%;
  }

  .navbar,
  .nav-inner,
  .header-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Prevent desktop nav from forcing horizontal overflow */
  .nav-links {
    gap: 12px !important;
  }

  /* ---------- HERO ---------- */

  .hero-section {
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 50px !important;
  }

  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-actions,
  .hero-buttons {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-actions .btn,
  .hero-buttons .btn {
    max-width: 100%;
  }

  /* ---------- PRICING ---------- */

  .pricing-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 24px !important;
  }

  .pricing-grid .plan-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Keep the badges visible above cards */
  .pricing-grid .plan-card > .plan-badge {
    z-index: 30 !important;
  }

  .pricing-grid .plan-card > .plan-save {
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---------- BUTTONS ---------- */

  .btn,
  button {
    max-width: 100%;
  }

  /* ---------- CARDS / CONTENT ---------- */

  .cards-grid,
  .features-grid,
  .stats-grid,
  .content-grid {
    grid-template-columns: 1fr !important;
  }

  .card,
  .feature-card,
  .content-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---------- IMAGES ---------- */

  img {
    height: auto;
    max-width: 100%;
  }

  /* ---------- TABLES ---------- */

  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- LONG TEXT / URLS ---------- */

  p,
  li,
  a,
  span,
  div {
    overflow-wrap: break-word;
  }

  /* ---------- FOOTER ---------- */

  footer {
    width: 100%;
    max-width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ---------- MODALS / DRAWERS ---------- */

  .modal,
  .modal-content,
  .drawer,
  .cart-drawer {
    max-width: calc(100vw - 24px) !important;
  }

}

/* ---------- SMALL PHONES ---------- */
@media (max-width: 380px) {

  .container,
  .section-container,
  .page-container,
  .content-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .pricing-grid {
    gap: 20px !important;
  }

  .plan-card {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-actions,
  .hero-buttons {
    flex-direction: column;
  }

  .hero-actions .btn,
  .hero-buttons .btn {
    width: 100%;
  }

}


/* =========================================================
   PRICING — CENTER CARDS ON MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .pricing-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 390px) !important;
    justify-content: center !important;
    justify-items: center !important;
  }

  .pricing-grid .plan-card {
    width: 100% !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}

@media (max-width: 420px) {

  .pricing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .pricing-grid .plan-card {
    width: 100% !important;
    max-width: 360px !important;
  }

}


/* =========================================================
   FINAL MOBILE PRICING ALIGNMENT
   Center pricing cards relative to the viewport
   ========================================================= */

@media (max-width: 600px) {

  .pricing-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 390px) !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: 50% !important;
    margin-right: 0 !important;

    transform: translateX(-50%) !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    justify-content: center !important;
    justify-items: center !important;

    gap: 24px !important;
  }

  .pricing-grid .plan-card {
    width: min(390px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    justify-self: center !important;
  }

}

@media (max-width: 420px) {

  .pricing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pricing-grid .plan-card {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

}


/* =========================================================
   ATLAS — UNIVERSAL MOBILE PRICING FIX
   Arabic / RTL / all phone widths
   ========================================================= */

@media screen and (max-width: 720px) {

  .pricing-section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .pricing-section .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .pricing-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .pricing-grid > *,
  .pricing-grid .plan-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* RTL only affects content, never the grid positioning */
  html[dir="rtl"] .pricing-grid {
    direction: ltr !important;
  }

  html[dir="rtl"] .pricing-grid .plan-card {
    direction: rtl !important;
    text-align: right;
  }

  .pricing-grid .plan-card * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .pricing-grid .plan-card h1,
  .pricing-grid .plan-card h2,
  .pricing-grid .plan-card h3,
  .pricing-grid .plan-card h4,
  .pricing-grid .plan-card p,
  .pricing-grid .plan-card span,
  .pricing-grid .plan-card div {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .pricing-grid .plan-card button,
  .pricing-grid .plan-card a {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Very small phones */
@media screen and (max-width: 380px) {

  .pricing-section .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .pricing-grid {
    gap: 14px !important;
  }
}


/* =========================================================
   FINAL FIX — MOBILE PRICING / ALL LANGUAGES
   /plans — EN / FR / AR
   ========================================================= */

@media screen and (max-width: 720px) {

  .subscriptions-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .subscriptions-page .pricing-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 12px !important;

    gap: 16px !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    /* RTL must not change the physical grid width/position */
    direction: ltr !important;

    transform: none !important;
  }

  .subscriptions-page .pricing-grid .plan-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    /* Arabic text stays RTL */
    direction: rtl !important;
  }

  html[dir="ltr"] .subscriptions-page .pricing-grid .plan-card {
    direction: ltr !important;
    text-align: left !important;
  }

  html[dir="rtl"] .subscriptions-page .pricing-grid .plan-card {
    direction: rtl !important;
    text-align: right !important;
  }

  .subscriptions-page .pricing-grid .plan-card * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .subscriptions-page .pricing-grid .plan-card h1,
  .subscriptions-page .pricing-grid .plan-card h2,
  .subscriptions-page .pricing-grid .plan-card h3,
  .subscriptions-page .pricing-grid .plan-card h4,
  .subscriptions-page .pricing-grid .plan-card p,
  .subscriptions-page .pricing-grid .plan-card span {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

}

@media screen and (max-width: 380px) {

  .subscriptions-page .pricing-grid {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 14px !important;
  }

  .subscriptions-page .pricing-grid .plan-card {
    width: 100% !important;
    max-width: 100% !important;
  }

}