/* =====================================================================
   Noctra - Mobile text rendering
   Load AFTER page CSS (last <link> in base.html / base_public.html / docs)
   ===================================================================== */

@media (max-width: 768px) {
  :root {
    --mobile-text-primary: #ffffff;
    --mobile-text-secondary: #b7c0d4;
    --mobile-text-nav: #d7ddea;
    --mobile-text-code: #ff8fb1;
  }

  :is(.app-layout, .home-wrapper, .auth-wrapper, .docs-body) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :is(.app-layout, .home-wrapper, .auth-wrapper, .docs-body) * {
    -webkit-text-fill-color: currentColor;
  }

  :is(
    .topbar,
    .section-card,
    .container-header,
    .dashboard-kpi,
    .dashboard-panel,
    .dashboard-feed,
    .dashboard-revenue,
    .module-card,
    .plan-badge,
    .plan-card,
    .active-plan-card,
    .user-name-mobile,
    .project-card,
    .form-container,
    .installation-page .installation-card,
    .support-panel,
    .integration-card-box,
    .marketplace-card,
    .link-builder-page .link-builder-card,
    .notification-status-card,
    .notification-steps-card,
    .notification-config-card,
    .referral-cookie-banner,
    .toast,
    .block-ui,
    .noctra-confirm-overlay,
    .noctra-confirm-modal,
    .noctra-datepicker,
    .noctra-modal-backdrop,
    .noctra-modal-panel,
    .account-card,
    .sub-summary-widget,
    .developers-card,
    .referrals-kpi,
    .referrals-panel,
    .home-nav,
    .home-nav.scrolled,
    .legal-page .home-nav,
    .company-page .home-nav,
    .blog-page .home-nav,
    .nav-links,
    .seo-hero,
    .seo-section,
    .docs-sidebar
  ) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  :is(
    .kpi-value,
    .kpi-value-money,
    .section-kpi-value,
    .projects-header .title,
    .form-title,
    .container-header .title,
    .billing-page .title,
    .billing-page-onboarding .title,
    .tools-page .title,
    .referrals-header .title,
    .developers-hero .title,
    .card-title-header h3,
    .marketplace-card h3,
    .plan-title,
    .plan-price
  ) {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
  }

  .nav-item {
    color: var(--mobile-text-nav) !important;
    -webkit-text-fill-color: var(--mobile-text-nav) !important;
    text-shadow: none !important;
  }

  :is(
    .sidebar .label,
    .user-name-mobile,
    .container-header .title,
    .projects-header .title,
    .form-title,
    .kpi-value,
    .kpi-value-money,
    .dashboard-commission,
    .section-kpi-value,
    .billing-page .title,
    .billing-page-onboarding .title,
    .tools-page .title,
    .referrals-header .title,
    .developers-hero .title,
    .developers-reveal-card h2,
    .dashboard-panel-title,
    .dashboard-chart-value,
    .dashboard-feed-title,
    .dashboard-revenue-value,
    .card-title-header h3,
    .marketplace-card h3,
    .module-header h3,
    .chart-main-title,
    .analytics-event-value,
    .referrals-kpi strong,
    .referrals-panel-head h2,
    .referrals-panel :is(p, td, th) strong,
    .settings-nav-item.active,
    .settings-content .account-card > h2,
    .support-panel-title,
    .info-title,
    .plan-title,
    .plan-price,
    .noctra-confirm-title,
    .noctra-modal-title,
    .app-content strong,
    .app-content b,
    .section-card strong,
    .section-card b,
    .container-header strong,
    .container-header b,
    .hero-title,
    .hero-mobile-title,
    .hero-stat-value,
    .section-title,
    .story-step strong,
    .problem-card h3,
    .feature-map-header h3,
    .feature-map-list strong,
    .pricing-name,
    .pricing-price,
    .pricing-badge,
    .company-title,
    .legal-block h2,
    .nav-logo span,
    .auth-title,
    .referral-cookie-banner__title,
    .seo-hero h1,
    .seo-section h2,
    .faq h2,
    .blog-list h1,
    .blog-article h1,
    .brand,
    .docs-mobile-brand,
    .docs-menu-btn,
    .docs-header h1,
    .doc-block h2,
    .app-layout .title
  ) {
    color: var(--mobile-text-primary) !important;
    -webkit-text-fill-color: var(--mobile-text-primary) !important;
    text-shadow: none !important;
  }

  .app-content :is(code, pre, .token-badge, .badge, .analytics-badge-muted) {
    background: #151b29 !important;
    background-color: #151b29 !important;
    color: var(--mobile-text-code) !important;
    -webkit-text-fill-color: var(--mobile-text-code) !important;
    border: 1px solid rgba(124, 92, 255, 0.22) !important;
    box-shadow: none !important;
  }

  .app-content pre code {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
  }

  :is(
    .container-header .subtitle,
    .dashboard-subtitle,
    .kpi-label,
    .dashboard-panel-subtitle,
    .dashboard-chart-label,
    .dashboard-feed-detail,
    .dashboard-feed-time,
    .dashboard-revenue-label,
    .section-kpi-label,
    .referrals-kpi .label,
    .app-content label.label,
    .field-label,
    .hero-subtitle,
    .hero-mobile-subtitle,
    .hero-stat-label,
    .section-subtitle,
    .story-step p,
    .problem-card p,
    .pricing-desc,
    .pricing-price span,
    .plan-desc,
    .plan-price span,
    .company-subtitle,
    .auth-subtitle,
    .referral-cookie-banner__text,
    .noctra-confirm-message,
    .noctra-modal-subtitle,
    .docs-header p,
    .doc-block p,
    .doc-block li,
    .app-layout .subtitle
  ) {
    color: var(--mobile-text-secondary) !important;
    -webkit-text-fill-color: var(--mobile-text-secondary) !important;
    text-shadow: none !important;
  }

  :is(.coupon-input, .app-content input, .app-content textarea)::placeholder {
    color: rgba(183, 192, 212, 0.72) !important;
    -webkit-text-fill-color: rgba(183, 192, 212, 0.72) !important;
    opacity: 1 !important;
  }

  /* Home: anchor buttons inside link-styled regions (nav, hero, pricing, CTA) */
  .home-wrapper .button {
    -webkit-text-fill-color: currentColor !important;
  }

  .home-wrapper :is(.button-primary, .button-outline),
  .home-wrapper :is(.button-primary, .button-outline):hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .home-wrapper .button-secondary {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
  }

  .home-wrapper .button-secondary:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .home-wrapper .nav-user-badge-mobile {
    display: flex !important;
    color: #e6e8ee !important;
    -webkit-text-fill-color: #e6e8ee !important;
  }

  .home-wrapper .nav-user-badge-mobile:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}