/* Auto-extracted page-specific styles for mobile */

/* Mobile page hero must be self-contained in this file. */
.hero-bg {
  background: url("../../img/dark-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #161616;
}

/* Scope all fixes to the mobile page only. */
#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase h2,
#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_features h2,
#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps h2,
#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo h2,
#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase_banner h2 {
  font-weight: 800 !important;
}

#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps h2 {
  font-size: 30px !important;
  line-height: 1.08 !important;
}

@media (min-width: 640px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps h2 {
    font-size: 40px !important;
  }
}

@media (min-width: 1024px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps h2 {
    font-size: 50px !important;
  }
}

#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase h2 {
  font-size: 34px !important;
  line-height: 1.05 !important;
}

@media (min-width: 640px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase h2 {
    font-size: 42px !important;
  }
}

@media (min-width: 1024px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase h2 {
    font-size: 52px !important;
  }
}

#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_features h2 {
  font-size: 30px !important;
  line-height: 1.1 !important;
}

@media (min-width: 640px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_features h2 {
    font-size: 40px !important;
  }
}

@media (min-width: 1024px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_features h2 {
    font-size: 54px !important;
  }
}

#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo h2 {
  font-size: 34px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
}

@media (min-width: 640px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo h2 {
    font-size: 42px !important;
  }
}

@media (min-width: 1024px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo h2 {
    font-size: 54px !important;
  }
}

#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase_banner h2 {
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

@media (min-width: 640px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase_banner h2 {
    font-size: 48px !important;
  }
}

@media (min-width: 1024px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase_banner h2 {
    font-size: 68px !important;
  }
}

/* ERP accent must stay teal (Odoo/Bootstrap sometimes flatten nested spans). */
#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase_banner h2 span {
  color: #1fb7c4 !important;
}

/*
 * Restored from theme.css (that file is not on web.assets_frontend).
 * Tailwind lg:* utilities lose to Odoo/Bootstrap without these hooks.
 */
@media (min-width: 1024px) {
  #wrapwrap #wrap.tarmez-design-exact .tw-lg-flex {
    display: flex !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .tw-lg-flex-col {
    flex-direction: column !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .tw-lg-order-1 {
    order: 1 !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .tw-lg-order-2 {
    order: 2 !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .tw-lg-order-3 {
    order: 3 !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .tw-lg-mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .tw-lg-mt-14 {
    margin-top: 3.5rem !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .tw-lg-nowrap {
    white-space: nowrap !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .s_mobile_features_layout {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
  }
}

/* Step titles: beat Odoo h3 / generic rules so designer sizes apply. */
#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps h3 {
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

@media (min-width: 640px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps h3 {
    font-size: 26px !important;
  }
}

@media (min-width: 1024px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps h3 {
    font-size: 34px !important;
  }
}

/* Feature card titles (uppercase) — designer mauve, not body text black */
#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_features h3 {
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #8d7188 !important;
}

@media (min-width: 640px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_features h3 {
    font-size: 22px !important;
  }
}

@media (min-width: 1024px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_features h3 {
    font-size: 26px !important;
  }
}

.s_tarmez_mobile_showcase .tarmez-mobile-device {
  max-width: 320px;
  margin: 0 auto;
  border-radius: 2rem;
}

.s_tarmez_mobile_showcase .tarmez-feature-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background-color: #1cbbbf;
  display: inline-block;
  margin-inline-end: 0.5rem;
}

/* Desktop alignment/order hard-lock (same approach used in other pages). */
@media (min-width: 1024px) {
  #wrapwrap #wrap.tarmez-design-exact .tw-lg-text-left {
    text-align: left !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .tw-lg-text-right {
    text-align: right !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .tw-lg-justify-start {
    justify-content: flex-start !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .tw-lg-justify-end {
    justify-content: flex-end !important;
  }

  /*
   * Keep features desktop layout identical across languages.
   * In RTL, flex row/start/end can flip horizontally; forcing LTR here
   * preserves the same "inward toward phone" alignment as English.
   */
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_features .s_mobile_features_layout {
    direction: ltr !important;
  }
}

/* Mobile page: avoid horizontal scroll from wide mockups / negative margins. */
#wrapwrap #wrap.tarmez-design-exact {
  overflow-x: hidden;
}

/* Promo: force left stack on lg (beats Bootstrap text-center on parents). */
@media (min-width: 1024px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text {
    text-align: left !important;
    align-items: flex-start !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text p {
    text-align: left !important;
  }
}

/*
 * Arabic / RTL: center blocks like designer reference (hero, promo, steps lead column).
 * Scoped to mobile product page wrapper only.
 */
html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase .relative.z-10.grid > div:first-child,
html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase .relative.z-10.grid > div:first-child p,
html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase .relative.z-10.grid > div:first-child,
html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase .relative.z-10.grid > div:first-child p {
  text-align: center !important;
}

html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase .relative.z-10.grid > div:first-child .mt-8,
html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase .relative.z-10.grid > div:first-child .mt-8 {
  justify-content: center !important;
}

@media (min-width: 1024px) {
  html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase .relative.z-10.grid > div:first-child,
  html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase .relative.z-10.grid > div:first-child p,
  html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase .relative.z-10.grid > div:first-child,
  html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase .relative.z-10.grid > div:first-child p {
    text-align: center !important;
  }

  html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase .relative.z-10.grid > div:first-child .mt-8,
  html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase .relative.z-10.grid > div:first-child .mt-8 {
    justify-content: center !important;
  }
}

html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text,
html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text {
  text-align: center !important;
  align-items: center !important;
}

html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text p,
html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text p {
  text-align: center !important;
}

html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text .mt-8,
html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text .mt-8 {
  justify-content: center !important;
}

@media (min-width: 1024px) {
  html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text,
  html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text p,
  html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text,
  html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text p {
    text-align: center !important;
  }

  html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text,
  html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_promo .s_mobile_promo_text {
    align-items: center !important;
  }
}

html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps h2,
html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps h2 {
  text-align: center !important;
}

/*
 * Showcase banner phones: same scale as designer file (155% / 125% caps), clip in row (no horizontal scroll).
 */
#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase_banner .s_mobile_showcase_banner_phones {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

#wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase_banner .s_mobile_showcase_banner_phones img {
  width: 980px !important;
  max-width: 155% !important;
  height: auto !important;
}

@media (min-width: 640px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase_banner .s_mobile_showcase_banner_phones img {
    width: 1120px !important;
    max-width: 125% !important;
  }
}

@media (min-width: 1024px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_showcase_banner .s_mobile_showcase_banner_phones img {
    width: 1300px !important;
    max-width: none !important;
  }
}

@media (min-width: 1024px) {
  html[lang^="ar"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps h2,
  html[dir="rtl"] #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps h2 {
    text-align: center !important;
  }
}

/* Mobile steps: prevent copy block overlapping phone mockup below. */
@media (max-width: 1023.98px) {
  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps .grid {
    row-gap: 2.5rem !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps .s_mobile_step_copy {
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps .s_mobile_step_copy p {
    margin-top: 1rem !important;
  }

  #wrapwrap #wrap.tarmez-design-exact .s_tarmez_mobile_steps .s_mobile_step_visual {
    margin-top: 0.5rem !important;
    isolation: isolate;
  }
}