/* ===================================
   Mobile UX Improvements
   Last Updated: 2026-02-11
   Target: viewport width <= 768px
   Purpose: iOS zoom prevention, sticky CTA, preview overflow fix
   =================================== */

/* =============================================
   1. iOS ズーム防止 (Input Zoom Prevention)
   iOS Safari zooms the viewport when font-size < 16px
   ============================================= */
@media (max-width: 768px) {
  input[type='text'],
  input[type='email'],
  input[type='url'],
  input[type='tel'],
  input[type='number'],
  input[type='search'],
  input[type='password'],
  input[type='date'],
  input[type='time'],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 48px;
    padding: 10px 12px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px;
  }

  /* color/file inputs: tap target only */
  input[type='color'],
  input[type='file'] {
    min-height: 48px;
  }
}

/* =============================================
   2. 追尾固定 CTA ボタン (Sticky CTA Footer)
   ============================================= */
@media (max-width: 768px) {
  .mobile-sticky-cta {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    z-index: 9990;
    display: flex;
    gap: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
  }

  .mobile-sticky-cta button,
  .mobile-sticky-cta a {
    flex: 1;
    min-height: 52px;
    font-size: 16px !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* コンテンツの下部余白 (prevents content from hiding behind footer) */
  body.has-sticky-cta {
    padding-bottom: 84px;
  }

  /* TOPへ戻るボタン等の位置調整 */
  body.has-sticky-cta .fixed.bottom-6.right-6,
  body.has-sticky-cta .fixed.bottom-4.right-4 {
    bottom: 96px;
  }
}

/* Desktop: sticky CTA is just a normal element */
@media (min-width: 769px) {
  .mobile-sticky-cta {
    /* Normal flow on desktop — no fixed positioning */
    position: relative;
  }
}

/* =============================================
   3. ページの横スクロール防止
   ============================================= */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }
}