/*
 * Correctifs viewport mobile — toutes les pages (layout application).
 * Honor Magic V3 / pliables : éviter 100vw, min-width rigides et débordement horizontal.
 */

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#content,
#global-banner,
main {
  min-width: 0;
  max-width: 100%;
}

/* Turbo Native — plein écran, sans navbar web, charte forcée (WebView) */
html.turbo-native {
  --navbar-height: 0px;
}

.turbo-native-shell {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.turbo-native-shell .feature-info-banner {
  top: env(safe-area-inset-top, 0px) !important;
  background-color: #FFF3F7 !important;
  border-color: #B399D4 !important;
}

.turbo-native-shell .feature-info-banner__icon {
  background-color: #F0EBF6 !important;
  color: #FF8C69 !important;
}

.turbo-native-shell .feature-info-banner__cta {
  background-color: #B399D4 !important;
}

.turbo-native-shell .feature-info-banner__dismiss {
  background-color: #FF8C69 !important;
}

/* Legacy markup (main prod) + WebView : #id !important > inline color-mix sans !important */
#feature_info_banner {
  background-color: #FFF3F7 !important;
  border-color: #B399D4 !important;
}

html.turbo-native #feature_info_banner,
body.turbo-native-shell #feature_info_banner {
  top: env(safe-area-inset-top, 0px) !important;
}

#feature_info_banner .feature-info-banner__icon,
#feature_info_banner span.rounded-full.h-8.w-8 {
  background-color: #F0EBF6 !important;
  color: #FF8C69 !important;
}

#feature_info_banner .feature-info-banner__dismiss,
#feature_info_banner button[data-dismiss-target="#feature_info_banner"] {
  background-color: #FF8C69 !important;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
}

/* Tables larges : scroll local, pas sur tout le document */
#content table {
  max-width: 100%;
}

#content .overflow-x-auto,
#content [class*="overflow-x-auto"] {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Grilles type « steps » (cobeauty_theme) */
@media (max-width: 640px) {
  .steps .step {
    min-width: 0;
    flex: 1 1 100%;
  }

  .max-w-screen-xl,
  .max-w-screen-2xl,
  .max-w-screen-lg,
  .max-w-screen-md {
    max-width: 100%;
  }
}

/* Disponibilités récurrentes — mobile : jours en colonne (indépendant du build Tailwind) */
@media (max-width: 767px) {
  [data-recurring-days-target="list"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    grid-auto-flow: unset !important;
    grid-template-columns: unset !important;
  }

  [data-recurring-days-target="list"] > li {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0;
  }

  [data-recurring-days-target="list"] .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .recurring-days-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  [data-recurring-days-target="list"].recurring-days-scroll-inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(12rem, 12rem);
    gap: 0.75rem;
    min-width: max-content;
    width: max-content;
    max-width: none;
  }
}