/**
 * PromXAI Theme 1.4.15.133 — sole phone owner for Request, Explain and PRO.
 * Desktop/tablet geometry remains owned by the original page stylesheets.
 */
.px-service-phone-head { display: none; }

@media (max-width: 760px) {
  html { margin-top: 0 !important; }
  body.admin-bar { margin-top: 0 !important; }
  body.admin-bar #wpadminbar { display: none !important; }

  body.promxai-request-modern-page,
  body.page-template-page-request-design,
  body.promxai-how-modern-page,
  body.page-template-page-how-to-use,
  body.promxai-pro-modern-page,
  body.page-template-page-pro,
  body.promxai-create-page,
  body.page-template-page-create,
  body.promxai-contact-modern-page,
  body.page-template-page-contact {
    min-height: 100dvh;
    background: transparent !important;
  }

  body.promxai-request-modern-page .px-header,
  body.page-template-page-request-design .px-header,
  body.promxai-how-modern-page .px-header,
  body.page-template-page-how-to-use .px-header,
  body.promxai-pro-modern-page .px-header,
  body.page-template-page-pro .px-header,
  body.promxai-create-page .px-header,
  body.page-template-page-create .px-header,
  body.promxai-contact-modern-page .px-header,
  body.page-template-page-contact .px-header,
  body.promxai-request-modern-page .px-account-v3__rail,
  body.page-template-page-request-design .px-account-v3__rail,
  body.promxai-how-modern-page .px-account-v3__rail,
  body.page-template-page-how-to-use .px-account-v3__rail,
  body.promxai-pro-modern-page .px-account-v3__rail,
  body.page-template-page-pro .px-account-v3__rail,
  body.promxai-create-page .px-account-v3__rail,
  body.page-template-page-create .px-account-v3__rail,
  body.promxai-contact-modern-page .px-account-v3__rail,
  body.page-template-page-contact .px-account-v3__rail {
    display: none !important;
  }

  .px-service-phone-head {
    width: 100%;
    margin: 0 0 12px;
    display: grid;
    gap: 12px;
    direction: rtl;
  }

  html[data-ui-lang="en"] .px-service-phone-head { direction: ltr; }

  .px-service-phone-head__hero {
    min-height: 116px;
    padding: 16px;
    border: 1px solid var(--px-mobile-app-line, var(--px-account-line));
    border-radius: 25px;
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    overflow: hidden;
    background: var(--px-mobile-app-surface-solid, var(--px-account-surface));
    box-shadow: 0 18px 42px rgb(22 30 62 / .08), inset 0 1px 0 rgb(255 255 255 / .08);
  }

  .px-service-phone-head__hero::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    top: -64px;
    inset-inline-end: -44px;
    border: 1px solid rgb(var(--px-accent-purple-rgb) / .17);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgb(var(--px-accent-purple-rgb) / .045), 0 0 0 38px rgb(var(--px-accent-blue-rgb) / .026);
    pointer-events: none;
  }

  .px-service-phone-head__icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--px-account-gradient);
    box-shadow: 0 14px 30px rgb(var(--px-accent-purple-rgb) / .23), inset 0 1px 0 rgb(255 255 255 / .22);
  }

  .px-service-phone-head__icon .px-icon { width: 27px; height: 27px; }
  .px-service-phone-head__copy { min-width: 0; position: relative; z-index: 1; }
  .px-service-phone-head__eyebrow {
    color: var(--px-accent-purple);
    font-size: 10px;
    font-weight: 950;
  }
  html[data-theme="dark"] .px-service-phone-head__eyebrow { color: var(--px-accent-violet); }
  .px-service-phone-head .px-service-phone-head__title {
    margin: 5px 0 0;
    color: var(--px-account-strong);
    font-size: clamp(23px, 6.8vw, 31px);
    font-weight: 950;
    line-height: 1.16;
  }
  .px-service-phone-head p {
    max-width: 42ch;
    margin: 8px 0 0;
    color: var(--px-account-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.75;
  }


  /* Shared container reset: one clean owner on phone. */
  .px-request-v4,
  .px-how-v2,
  .px-pro-v2,
  .px-create-v1 {
    min-height: 100dvh !important;
    padding: 10px 0 calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .px-request-v4 .px-account-v3__frame,
  .px-how-v2__frame,
  .px-pro-v2__frame {
    width: min(100% - 16px, 620px) !important;
    margin-inline: auto !important;
  }

  .px-request-v4__workspace,
  .px-how-v2__workspace,
  .px-pro-v2__workspace {
    display: block !important;
  }

  .px-request-v4__canvas,
  .px-how-v2__canvas,
  .px-pro-v2__canvas {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .px-request-v4__panel,
  .px-how-page__container,
  .px-pro-v2__panel {
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Request Design --------------------------------------------------- */
  .px-request-v4__hero {
    margin: 0 0 11px !important;
    padding: 12px !important;
    border: 1px solid var(--px-account-line) !important;
    border-radius: 23px !important;
    display: block !important;
    background: var(--px-account-surface) !important;
    box-shadow: var(--px-account-shadow-soft) !important;
  }
  .px-request-v4__hero-copy { display: none !important; }
  .px-request-v4__process { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  .px-request-v4__process article {
    min-height: 84px !important;
    padding: 11px 12px !important;
    border-radius: 16px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-content: center !important;
    background: var(--px-account-surface-soft) !important;
  }
  .px-request-v4__process article > span { width: 40px !important; height: 40px !important; border-radius: 13px !important; }
  .px-request-v4__process article strong { font-size: 12px !important; }
  .px-request-v4__process article small { font-size: 10.5px !important; line-height: 1.55 !important; }
  .px-request-form-panel,
  .px-request-summary {
    border-radius: 22px !important;
    box-shadow: var(--px-account-shadow-soft) !important;
  }
  .px-request-form-panel { padding: 11px !important; }
  .px-request-step { border-radius: 18px !important; }
  .px-request-progress {
    border-radius: 17px !important;
    background: var(--px-account-surface-soft) !important;
  }
  .px-step-actions { bottom: 10px !important; }

  /* Explain ---------------------------------------------------------- */
  .px-how-hero {
    margin-top: 0 !important;
    padding: 13px !important;
    border-radius: 23px !important;
    background: var(--px-account-surface) !important;
    box-shadow: var(--px-account-shadow-soft) !important;
  }
  .px-how-hero__intro { display: none !important; }
  .px-how-selected,
  .px-how-generic-card { margin: 0 !important; border-radius: 19px !important; }
  .px-how-help-hub,
  .px-how-type-switch,
  .px-how-steps,
  .px-how-troubleshooting,
  .px-how-guide-card {
    border-radius: 22px !important;
    box-shadow: var(--px-account-shadow-soft) !important;
  }
  .px-how-steps__grid { gap: 9px !important; }
  .px-how-step { border-radius: 18px !important; }

  /* PRO -------------------------------------------------------------- */
  .px-pro-v2__heading { display: none !important; }
  .px-pro-v2__hero,
  .px-pro-v2__gate {
    margin-top: 0 !important;
    border-radius: 23px !important;
    box-shadow: var(--px-account-shadow-soft) !important;
  }
  .px-pro-v2__hero {
    min-height: 0 !important;
    padding: 22px 18px !important;
    background:
      radial-gradient(circle at 92% 6%, rgb(var(--px-accent-purple-rgb) / .22), transparent 40%),
      linear-gradient(145deg, var(--px-account-surface-2), var(--px-account-surface)) !important;
  }
  .px-pro-v2__hero h2 { font-size: 31px !important; }
  .px-pro-v2__hero p { font-size: 12px !important; line-height: 1.7 !important; }
  .px-pro-v2__plans {
    margin-top: 13px !important;
    padding: 15px !important;
    border: 1px solid var(--px-account-line);
    border-radius: 23px;
    background: var(--px-account-surface);
    box-shadow: var(--px-account-shadow-soft);
  }
  .px-pro-v2__section-head h2 { font-size: 27px !important; }
  .px-pro-v2__plan-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .px-pro-v2__plan { min-height: 0 !important; padding: 18px !important; border-radius: 19px !important; }
  .px-pro-v2__footer-note { border-radius: 17px !important; }
}



/* 1.4.15.136 — compact guide book presentation on phone. The cover owns
 * the physical left column while title, description and learning points get
 * the larger right column. Read/download actions are intentionally compact. */
@media (max-width: 760px) {
  .px-how-v2 .px-how-guide-card {
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: minmax(128px, .78fr) minmax(0, 1.22fr) !important;
    grid-template-areas:
      "cover head"
      "cover topics"
      "actions actions" !important;
    align-items: start !important;
    gap: 11px 13px !important;
    direction: ltr !important;
  }
  .px-how-v2 .px-how-guide-card__head {
    grid-area: head;
    min-width: 0;
    align-content: start;
    direction: rtl;
  }
  html[data-ui-lang="en"] .px-how-v2 .px-how-guide-card__head { direction: ltr; }
  .px-how-v2 .px-how-guide-card__visual {
    grid-area: cover;
    height: 100%;
    min-height: 238px;
    padding: 9px !important;
    align-self: stretch;
  }
  .px-how-v2 .px-how-guide-card__cover-link {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    max-height: 270px;
  }
  .px-how-v2 .px-how-guide-card__cover-link img { object-fit: cover; object-position: center; }
  .px-how-v2 .px-how-guide-card__topics {
    grid-area: topics;
    padding: 10px !important;
    direction: rtl;
  }
  html[data-ui-lang="en"] .px-how-v2 .px-how-guide-card__topics { direction: ltr; }
  .px-how-v2 .px-how-guide-card__topics ul { margin-top: 7px !important; gap: 5px !important; }
  .px-how-v2 .px-how-guide-card__topics li { font-size: 10.5px !important; line-height: 1.5 !important; }
  .px-how-v2 .px-how-guide-card__actions {
    grid-area: actions;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    direction: rtl;
  }
  html[data-ui-lang="en"] .px-how-v2 .px-how-guide-card__actions { direction: ltr; }
  .px-how-v2 .px-how-guide-card__action {
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }
  .px-how-v2 .px-how-guide-card h2 { font-size: 13.5px !important; line-height: 1.45 !important; }
  .px-how-v2 .px-how-guide-card p { font-size: 10.5px !important; line-height: 1.6 !important; }

  /* Restore the intended premium contrast. The previous light surface kept
   * the inherited white PRO copy and made the hero almost unreadable. */
  .px-pro-v2__hero {
    border-color: rgb(123 99 255 / .32) !important;
    color: #fff !important;
    background:
      radial-gradient(circle at 88% 10%, rgb(181 91 255 / .34), transparent 33%),
      radial-gradient(circle at 12% 95%, rgb(46 151 255 / .26), transparent 38%),
      linear-gradient(135deg, #0b1738 0%, #153f89 52%, #642495 100%) !important;
    box-shadow: 0 22px 54px rgb(25 57 142 / .24), inset 0 1px 0 rgb(255 255 255 / .13) !important;
  }
  .px-pro-v2__hero::before { opacity: .82; }
  .px-pro-v2__hero .px-pro-v2__eyebrow { color: #c9ddff !important; }
  .px-pro-v2__hero h2 { color: #fff !important; text-shadow: 0 2px 18px rgb(0 0 0 / .16); }
  .px-pro-v2__hero p { color: rgb(255 255 255 / .84) !important; font-size: 12px !important; line-height:1.7 !important; }
  .px-pro-v2__hero-points > span {
    color: #fff !important;
    border-color: rgb(255 255 255 / .20) !important;
    background: rgb(255 255 255 / .10) !important;
  }
}

@media (max-width: 430px) {
  .px-how-v2 .px-how-guide-card {
    grid-template-columns: minmax(112px, .72fr) minmax(0, 1.28fr) !important;
    gap: 9px 10px !important;
  }
  .px-how-v2 .px-how-guide-card__visual { min-height: 210px; }
}