/* Legacy mobile fallbacks — low-end Android / old WebView (IN/ID/etc.) */

/* Prefer block display when flex unsupported is rare; still help older engines */
.mylove-register {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  min-height: 100vh;
}

.mylove-register__cta,
.mylove-register__continue,
.mylove-register__primer-action,
.mylove-register__tip-retry-btn,
.mylove-register__modal-action,
.mylove-register__retry {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Old Android / WebView without color-mix: keep visible pill buttons */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .mylove-register__cta {
    background: linear-gradient(135deg, #ff446d, #ff6d7f 46%, #ff9a7b 100%);
    box-shadow: 0 16px 34px rgba(255, 109, 127, 0.36);
    color: #fff;
  }

  .mylove-register__continue,
  .mylove-register__modal-action,
  .mylove-register__retry {
    background: linear-gradient(135deg, #8f3fff, #cc62ff 60%, #ff8f8f 100%);
    color: #fff;
  }
}

/* gap is unsupported on very old flexbox — approximate with margins */
.mylove-register__brand-panel > * + *,
.mylove-register__form-copy > * + *,
.mylove-register__phone-row > * + *,
.mylove-register__code-grid > * + *,
.mylove-register__tip-overlay > * + * {
  margin-top: 0; /* keep layout; primary spacing remains in index.css */
}

.mylove-register__phone-row > * + * {
  margin-left: 8px;
}

.mylove-register__code-grid > * + * {
  margin-left: 5px;
}

/* backdrop-filter optional — keep solid overlays */
.mylove-register__form-layer,
.mylove-register__sheet-overlay,
.mylove-register__modal-overlay,
.mylove-register__loading-overlay {
  background-color: rgba(0, 0, 0, 0.82);
}

/* place-items fallback */
.mylove-register__success-mark {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

img {
  max-width: 100%;
  height: auto;
}

input,
button {
  font-size: 16px; /* reduce iOS zoom; helps old Android forms */
}

/* Safe area: ignore if unsupported */
@supports (padding: env(safe-area-inset-bottom)) {
  .mylove-register {
    padding-bottom: env(safe-area-inset-bottom);
  }
}