/* CA Smart Staycation — universal mobile responsive layer */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
*, *::before, *::after { min-width: 0; }
button, input, select, textarea { max-width: 100%; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

@media (max-width: 900px) {
  .header { padding: 0 24px; height: 70px; }
  .logo-area { gap: 10px; }
  .logo-icon { width: 46px; height: 46px; font-size: 18px; }
  .logo-area h1 { font-size: 23px; }
  .logo-area p { font-size: 9px; letter-spacing: 1px; }
  .header-button { padding: 9px 13px; font-size: 12px; }
  .hero-overlay { padding: 0 24px; }
  .hero-content { max-width: 100%; padding: 24px; transform: none; }
  .booking-container { width: calc(100% - 32px); padding: 36px 24px; border-radius: 18px; }
  .form-card { padding: 25px 20px; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .full-width { grid-column: auto; }
  .summary-box, .summary-card, .booking-summary { max-width: 100%; overflow-wrap: anywhere; }
}

@media (max-width: 600px) {
  html { font-size: 15px; }
  body { width: 100%; overflow-x: hidden; }

  /* Clear emerald glass header: visible green tint with very light blur. */
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    background: rgba(36,78,66,.62) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    border-bottom: 1px solid rgba(234,215,156,.30) !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.10) !important;
    z-index: 9999 !important;
  }
  .header.scrolled {
    background: rgba(24,65,54,.82) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border-bottom: 1px solid rgba(234,215,156,.34) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.15) !important;
  }
  .logo-area { flex: 1 1 auto; min-width: 0; }
  .logo-area h1 {
    font-size: clamp(18px, 5vw, 22px);
    white-space: normal;
    overflow-wrap: anywhere;
    color: #fff !important;
    text-shadow: 0 2px 7px rgba(0,0,0,.26);
  }
  .logo-area p { display: none; }
  .logo-icon { width: 40px; height: 40px; flex: 0 0 40px; }
  .header-button {
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 11px;
    background: rgba(6,59,50,.10) !important;
    border-color: rgba(234,215,156,.92) !important;
    color: #f4dfa1 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.22);
  }

  /* Prevent the fixed two-row header from covering the hero headline. */
  .hero { min-height: 78vh; padding-top: 118px !important; }
  .hero-overlay { padding: 0 12px; }
  .hero-content { padding: 20px 16px; border-radius: 14px; }
  .hero h2 { font-size: clamp(32px, 11vw, 48px); }
  .hero-description { margin: 16px 0 22px; font-size: 14px; }
  .gold-button { width: 100%; text-align: center; padding: 13px 16px; }

  .booking-container { width: calc(100% - 20px); margin: -35px auto 35px; padding: 24px 12px; border-radius: 15px; }
  .booking-heading { margin-bottom: 28px; }
  .booking-heading h2 { font-size: clamp(28px, 8vw, 40px); }
  .booking-heading p { font-size: 14px; }
  .form-card { padding: 18px 12px; border-radius: 12px; }
  .step-title { gap: 10px; padding-bottom: 16px; margin-bottom: 18px; }
  .step-title > span { width: 36px; height: 36px; font-size: 14px; }
  .step-title h3 { font-size: 19px; }
  .step-title p { font-size: 12px; }

  input, select, textarea { width: 100%; max-width: 100%; padding: 13px 12px; font-size: 16px; }
  .upload-box { padding: 25px 12px; }
  .upload-box strong { font-size: 16px; }
  .summary-box { padding: 16px !important; }
  .summary-box * { overflow-wrap: anywhere; }

  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modal, .modal-content, .dialog, .popup, .booking-modal { width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; margin: 10px auto !important; }
  .modal-body, .modal-content { max-height: calc(100dvh - 30px); overflow-y: auto; }
  .actions, .button-group, .form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .actions button, .button-group button, .form-actions button { flex: 1 1 140px; max-width: 100%; }
}

/* Guest account / booking dashboard */
@media (max-width: 700px) {
  .dashboard, .dashboard-container, .guest-dashboard, .guest-container, .main-container { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 10px !important; padding-right: 10px !important; }
  .dashboard-header, .guest-header, .topbar { padding: 12px 10px !important; flex-wrap: wrap; }
  .tabs, .tab-nav, .dashboard-tabs, .nav-tabs { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; overflow: visible !important; }
  .tabs button, .tab-nav button, .dashboard-tabs button, .nav-tabs button, .tab-button { flex: 1 1 120px; min-height: 42px; white-space: normal; }
  .booking-card, .message-card, .notification-card, .card { width: 100% !important; max-width: 100% !important; overflow-wrap: anywhere; }
  .booking-card .details, .message-panel, .notification-panel { width: 100% !important; max-width: 100% !important; }
  .booking-card .row, .details .row { grid-template-columns: 1fr !important; display: block !important; }
  .booking-card .row .label, .details .row .label { display: block; margin-bottom: 3px; }
  .booking-card button, .message-panel button, .notification-panel button { max-width: 100%; }
  .message-panel, .notification-panel { overflow-x: hidden !important; }
  .message-panel img, .notification-panel img, .booking-card img { max-width: 100%; height: auto; }
  .extra-request-box, [data-extra-payment-request], [data-companion-form] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .header { padding-left: 10px !important; padding-right: 10px !important; }
  .logo-area h1 { font-size: 18px; }
  .hero-overlay { padding: 0 8px; }
  .hero-content { padding: 16px 12px; }
  .booking-container { width: calc(100% - 12px); padding: 18px 8px; }
  .form-card { padding: 15px 9px; }
  .step-title h3 { font-size: 17px; }
  .step-title p { font-size: 11px; }
  .actions button, .button-group button, .form-actions button { flex-basis: 100%; width: 100%; }
}

@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}