/* KaylaWina Mobile Hardening v1
   Conservative responsive overrides based on the 2026-10-20 read-only audit.
   Does NOT replace the existing public mobile-nav v3. */

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

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

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  button, .btn, a.btn { min-height: 44px; }

  .container,
  .nav-container,
  .hero-wrap,
  .b2b-section,
  #daftar-tabs,
  #portal-forms,
  .wrap {
    max-width: 100% !important;
  }

  .container,
  .nav-container,
  .hero-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-title,
  .ph-title { overflow-wrap: anywhere; }

  .services-grid,
  .doc-grid { grid-template-columns: 1fr !important; }

  .gallery-grid,
  .galeri-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .contact-grid,
  .form-row,
  .lead-form .form-row,
  .lead-form .row2 {
    grid-template-columns: 1fr !important;
  }

  .newsletter-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 520px !important;
  }

  .newsletter-form input,
  .newsletter-form button { width: 100% !important; }

  #kontak .contact-form,
  .contact-form-centered,
  #ajukan .container {
    width: 100% !important;
    max-width: 760px !important;
  }

  .lead-form label,
  .contact-form label { min-width: 0 !important; }

  .floating-wa {
    width: 48px !important;
    height: 48px !important;
    right: 14px !important;
    bottom: 14px !important;
  }

  #kw-recent-booking {
    right: 12px !important;
    bottom: 76px !important;
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
  }

  #kw7-modal { padding: 12px !important; }

  #kw7-modal .kw7-modal-content,
  #kw7-modal .kw7-modal-card,
  #kw7-modal [class*="modal-content"] {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: 100% !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #kw7-modal .kw7-modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #kw7-modal .kw7-modal-actions > * { width: 100% !important; }

  .b2b-section,
  #daftar-tabs,
  #portal-forms,
  .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .instagram-media {
    min-width: 0 !important;
    width: 100% !important;
  }

  .modal-ov { padding: 12px !important; }

  .modal-ov .modal-box {
    width: 100% !important;
    max-width: 560px !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .agent-welcome-stats,
  .b2b-stats { flex-wrap: wrap !important; }

  .agent-welcome-stats > div,
  .b2b-stats > div {
    min-width: 0 !important;
    flex: 1 1 44% !important;
  }

  .cta-band {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  #kw-agent-recent-booking {
    right: 12px !important;
    bottom: 132px !important;
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
  }

  .agent-toast {
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
    max-width: none !important;
  }

  body:has(.wrap) .wrap { width: 100% !important; }

  .row2 { grid-template-columns: 1fr !important; }
  .pkg { max-width: 100% !important; }
}

@media (max-width: 480px) {
  .container,
  .nav-container,
  .hero-wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .gallery-grid,
  .galeri-grid { gap: 8px !important; }

  .kwsp-toast { padding: 14px 15px !important; }
  .cta-band { padding: 22px 18px !important; }
}