/* Cadatah final mobile hardening. Loaded after page CSS. */

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

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

/* Landing page */
@media (max-width: 760px) {
  body.landing-page {
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(111, 107, 179, 0.18), transparent 16rem),
      linear-gradient(160deg, #fffdfa 0%, #f7f5fb 58%, #ece9f7 100%) !important;
  }

  body.landing-page::before,
  body.landing-page::after {
    display: none !important;
  }

  .landing-nav,
  .landing-hero,
  .landing-section,
  .landing-flow {
    width: min(100% - 28px, 430px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-inline: auto !important;
  }

  .landing-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
    min-height: auto !important;
    padding: 18px 0 12px !important;
  }

  .landing-brand {
    min-width: 0 !important;
    gap: 12px !important;
  }

  .landing-brand img {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
  }

  .landing-brand span {
    min-width: 0 !important;
    max-width: calc(100vw - 112px) !important;
  }

  .landing-brand strong,
  .landing-brand small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .landing-nav nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 8px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 16px 44px rgba(48, 38, 95, 0.12) !important;
  }

  .landing-nav nav a {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 10px 8px !important;
    justify-content: center !important;
    border-radius: 16px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.05 !important;
    font-size: 0.9rem !important;
  }

  .landing-nav nav .landing-nav-cta {
    grid-column: 1 / -1 !important;
    min-height: 46px !important;
    border-radius: 18px !important;
  }

  .landing-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    padding-block: 22px 42px !important;
    min-height: auto !important;
  }

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

  .landing-eyebrow {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }

  .landing-hero h1 {
    max-width: 100% !important;
    margin: 18px 0 16px !important;
    font-size: clamp(2.25rem, 10.8vw, 2.9rem) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  .landing-hero p {
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  .landing-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 22px !important;
  }

  .landing-button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px !important;
  }

  .landing-proof {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 16px !important;
  }

  .landing-proof span {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  .landing-product-card,
  .landing-window {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .landing-product-card::before {
    inset: -8px !important;
  }
}

@media (max-width: 380px) {
  .landing-nav,
  .landing-hero,
  .landing-section,
  .landing-flow {
    width: min(100% - 20px, 360px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .landing-hero h1 {
    font-size: clamp(2rem, 10.2vw, 2.55rem) !important;
  }
}

/* Onboarding / preview creator */
@media (max-width: 760px) {
  .onboarding-page,
  .onboarding-shell,
  .onboarding-form-panel,
  .onboarding-preview-panel {
    overflow-x: hidden !important;
  }

  .onboarding-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-height: 100dvh !important;
  }

  .onboarding-form-panel,
  .onboarding-preview-panel {
    width: min(100% - 28px, 430px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-inline: auto !important;
  }

  .onboarding-preview-panel {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 26px !important;
  }

  .onboarding-password-stack,
  .onboarding-two,
  .week-time-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .password-input-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .password-input-wrap input,
  .password-input-wrap button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .onboarding-week-grid,
  .weekly-schedule-grid,
  .schedule-days-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .onboarding-preview-wrap,
  .onboarding-site-preview {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .onboarding-site-preview .preview-stage,
  .onboarding-site-preview .layout-split,
  .onboarding-site-preview .layout-compact,
  .onboarding-site-preview .layout-essential {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .onboarding-site-preview .preview-hero,
  .onboarding-site-preview .preview-booking,
  .onboarding-site-preview .preview-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .onboarding-site-preview .service-choice-list,
  .onboarding-site-preview .product-store-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    overflow: visible !important;
  }
}

/* Visual editor mobile */
@media (max-width: 760px) {
  .builder-page {
    overflow-x: hidden !important;
  }

  .builder-workflow-app {
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    overflow-x: hidden !important;
  }

  .builder-wizard-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "brand"
      "mode"
      "tabs"
      "actions" !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    padding: 10px 14px !important;
    overflow-x: hidden !important;
  }

  .workflow-brand {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .workflow-brand strong,
  .workflow-brand small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .build-mode-toggle {
    width: 100% !important;
    justify-content: center !important;
  }

  .workflow-tabs {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    padding: 0 0 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .workflow-tabs > .builder-wizard-tabs,
  .workflow-tabs > .builder-wizard-tabs.top {
    display: flex !important;
    flex: 0 0 max-content !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    gap: 8px !important;
  }

  .workflow-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .workflow-tabs button,
  .workflow-tabs .builder-wizard-tabs button {
    flex: 0 0 94px !important;
    width: 94px !important;
    min-width: 94px !important;
    scroll-snap-align: start !important;
    white-space: normal !important;
  }

  .builder-topbar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .builder-topbar-actions .builder-tools {
    display: none !important;
  }

  .builder-workflow-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .builder-canvas {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding-inline: 14px !important;
  }

  .builder-topbar,
  .mobile-editor-nav {
    width: min(100%, 430px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-inline: auto !important;
  }

  .mobile-editor-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 22px !important;
  }

  .builder-shell[data-mobile-editor-panel="inspector"] .device-frame-viewport,
  .builder-workflow-app[data-mobile-editor-panel="inspector"] .device-frame-viewport {
    display: none !important;
  }

  .builder-shell[data-mobile-editor-panel="inspector"] .builder-inspector,
  .builder-workflow-app[data-mobile-editor-panel="inspector"] .builder-inspector {
    display: block !important;
    width: min(calc(100vw - 28px), 430px) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 14px auto 24px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .builder-shell[data-mobile-editor-panel="preview"] .builder-inspector,
  .builder-workflow-app[data-mobile-editor-panel="preview"] .builder-inspector {
    display: none !important;
  }

  .device-frame-viewport {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 12px 0 24px !important;
  }

  .device-frame.mobile,
  .device-frame.tablet,
  .device-frame.desktop {
    width: min(calc(100vw - 42px), 390px) !important;
    max-width: min(calc(100vw - 42px), 390px) !important;
    min-width: 0 !important;
    min-height: 72dvh !important;
    height: min(78dvh, 780px) !important;
    aspect-ratio: auto !important;
    margin-inline: auto !important;
    overflow: hidden !important;
  }

  .device-frame.mobile .builder-preview,
  .device-frame.tablet .builder-preview,
  .device-frame.desktop .builder-preview {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  .device-frame.mobile .builder-preview .preview-stage,
  .device-frame.mobile .builder-preview .layout-split,
  .device-frame.mobile .builder-preview .layout-center,
  .device-frame.mobile .builder-preview .layout-compact,
  .device-frame.mobile .builder-preview .layout-essential,
  .device-frame.tablet .builder-preview .preview-stage,
  .device-frame.desktop .builder-preview .preview-stage {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
  }

  .device-frame.mobile .builder-preview .preview-hero,
  .device-frame.mobile .builder-preview .preview-booking,
  .device-frame.mobile .builder-preview .preview-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .device-frame.mobile .builder-preview .hero-slot-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: auto !important;
    padding: 20px !important;
  }

  .device-frame.mobile .builder-preview .site-link-row {
    justify-content: center !important;
    max-width: 100% !important;
  }

  .device-frame.mobile .builder-preview .service-choice-list,
  .device-frame.mobile .builder-preview .product-store-list,
  .device-frame.mobile .builder-preview .professional-choice-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .device-frame.mobile .builder-preview .service-choice-list.service-display-carousel,
  .device-frame.mobile .builder-preview .product-store-list.product-display-carousel {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    padding-bottom: 8px !important;
  }

  .device-frame.mobile .builder-preview .service-choice-list.service-display-carousel .service-choice,
  .device-frame.mobile .builder-preview .product-store-list.product-display-carousel .product-card {
    flex: 0 0 min(100%, 286px) !important;
    width: min(100%, 286px) !important;
    min-width: min(100%, 286px) !important;
    scroll-snap-align: start !important;
  }

  .device-frame.mobile .builder-preview .service-choice,
  .device-frame.mobile .builder-preview .product-card {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .device-frame.mobile .builder-preview .service-choice strong,
  .device-frame.mobile .builder-preview .service-choice small,
  .device-frame.mobile .builder-preview .service-choice em,
  .device-frame.mobile .builder-preview .product-card strong,
  .device-frame.mobile .builder-preview .product-card small,
  .device-frame.mobile .builder-preview .product-card p {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
    line-height: 1.18 !important;
  }
}

@media (max-width: 760px) {
  .onboarding-progress {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .onboarding-progress button {
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 8px 6px !important;
    border-radius: 16px !important;
  }

  .onboarding-progress strong {
    font-size: 0.74rem !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }
}

/* Public booking mobile */
@media (max-width: 760px) {
  .public-page,
  .public-site {
    overflow-x: hidden !important;
  }

  .public-site .public-booking-wrap,
  .public-site .preview-stage,
  .public-site .layout-split,
  .public-site .layout-center,
  .public-site .layout-compact,
  .public-site .layout-essential {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .public-site .preview-hero,
  .public-site .preview-booking,
  .public-site .preview-block,
  .public-site .public-step {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .public-site .service-choice-list:not(.service-display-carousel),
  .public-site .product-store-list:not(.product-display-carousel),
  .public-site .professional-choice-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .public-site .service-choice,
  .public-site .product-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .public-site .calendar-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Owner panel mobile */
@media (max-width: 760px) {
  .owner-portal-shell,
  .app-shell {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .owner-hero,
  .owner-portal-main,
  .owner-main-grid,
  .owner-side-column,
  .owner-content-column {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .owner-hero {
    gap: 16px !important;
    padding: 22px !important;
  }

  .owner-hero h1 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
    line-height: 1.08 !important;
  }

  .owner-hero .dashboard-metrics,
  .finance-grid,
  .subscription-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}