/* =====================================================================
   responsive.css — loaded LAST on every page.
   Makes the whole site fit phones, tablets, laptops and big screens.
   (Screen only: receipts / printing are not touched.)
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; min-width: 0; }
img, video, svg, canvas { max-width: 100%; }
img { height: auto; }
iframe { max-width: 100%; }
.container { width: min(92%, 1280px); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
input, select, textarea, button { max-width: 100%; }
table { max-width: 100%; }
.table-responsive-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
p, h1, h2, h3, h4, a, span, li, td, th { overflow-wrap: anywhere; }

/* ---------- hamburger button (added by responsive.js) ---------- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(43,33,24,.72); color: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .3s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================= TABLET & BELOW (<= 900px) ================= */
@media screen and (max-width: 900px) {

  .overlay-nav { padding: 14px 0; }
  .nav-content { position: relative; flex-wrap: nowrap !important; justify-content: space-between !important; gap: 12px; }
  .hero-logo { width: auto !important; flex: 1 1 auto; min-width: 0; font-size: 12px; }
  .nav-icons { gap: 10px; flex: 0 0 auto; }
  .nav-toggle { display: inline-flex; }

  /* the link bar becomes a dropdown panel under the header */
  .nav-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important;
    gap: 0 !important; padding: 8px !important; border-radius: 18px !important;
    background: rgba(35,26,18,.96) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    z-index: 50;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a {
    display: block; padding: 14px 16px; font-size: 15px !important;
    color: #fff !important; border-radius: 12px; text-align: left;
  }
  .nav-links a::after { display: none !important; }
  .nav-links a.active, .nav-links a:hover { background: rgba(216,171,115,.18); color: #f1c98f !important; }

  /* two-column layouts → one column */
  .hiraya-layout, .visit-content, .stay-grid, .footer-content,
  .auth-layout, .checkout-layout, .cart-layout, .checkout-grid, .cart-grid { grid-template-columns: 1fr !important; }
}

/* ================= PHONES (<= 640px) ================= */
@media screen and (max-width: 640px) {

  html { font-size: 15.5px; }
  .container { width: min(94%, 1280px); }

  h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); }

  /* iOS zooms into inputs below 16px — stop that */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }

  /* comfortable touch targets */
  button, .btn, [type="submit"], .checkout-btn, .auth-btn, .side-link { min-height: 44px; }

  .hero { min-height: 560px !important; }
  .hero-script { font-size: clamp(3rem, 15vw, 4.4rem) !important; }
  .hero-buttons { width: 100%; flex-direction: column; align-items: stretch !important; }
  .hero-buttons a, .hero-buttons button { width: 100%; text-align: center; justify-content: center; }

  /* every multi-column grid on the site → single column */
  .amenities-grid, .trabi-grid, .stay-grid, .menu-grid, .product-grid,
  .form-grid, .form-row, .two-col, .address-grid { grid-template-columns: 1fr !important; }

  /* fixed-width bits */
  [class*="modal"] > [class*="content"], .modal-box, .modal-card, .drink-modal, .feedback-modal { width: min(94vw, 460px) !important; max-width: 94vw !important; }

  .footer-bottom { text-align: center; }
  .visit-map iframe { height: 260px; }

  /* sticky summaries shouldn't float over content on small screens */
  .cart-summary, .order-summary, .summary-card { position: static !important; }

  /* long buttons / pills wrap instead of overflowing */
  .btn, button, .pill, .tag { white-space: normal; }
}

/* very small phones */
@media screen and (max-width: 380px) {
  html { font-size: 14.5px; }
  .hero-logo { font-size: 11px; }
  .nav-icons .transparent-btn, .profile-circle, .nav-toggle { width: 40px; height: 40px; }
}

/* landscape phones: don't let the hero eat the whole screen */
@media screen and (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 420px !important; }
  .nav-links { max-height: 70vh; overflow-y: auto; }
}

/* big screens: keep line lengths sane */
@media screen and (min-width: 1600px) {
  .container { width: min(90%, 1440px); }
}

/* touch devices: no sticky hover states */
@media (hover: none) {
  .transparent-btn:hover { transform: none; }
}

/* ---------- account pages (profile / settings): card must fit and scroll ---------- */
body > .card, .card { width: min(900px, 95vw); min-width: 0; }
.card > *, .settings-content, .profile-content { min-width: 0; }
@media screen and (max-width: 768px) {
  body:has(> .card) { height: auto !important; min-height: 100vh; align-items: flex-start !important; padding: 16px 0 28px; background-attachment: scroll; }
  .card { padding: 20px !important; gap: 20px !important; border-radius: 18px !important; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sidebar h1 { grid-column: 1 / -1; margin-bottom: 4px; }
  .sidebar button, .sidebar a { margin-bottom: 0 !important; }
}
@media screen and (max-width: 420px) { .sidebar { grid-template-columns: 1fr; } }

/* ---------- payment pages (GCash mock: pay / otp) ---------- */
.otp-box, .gcash-box { width: min(300px, 90vw) !important; box-sizing: border-box; }
.otp-input { width: 100% !important; letter-spacing: 6px !important; }
.container[style], .gcash-bg { max-width: 100%; }

/* ---------- custom modals / side panels with fixed widths ---------- */
@media screen and (max-width: 640px) {
  .modal-dialog { margin: 12px; max-width: calc(100vw - 24px); }
  [class*="panel"][style*="width"], .history-panel, .feedback-panel { width: 100vw !important; max-width: 100vw !important; }
}

@media screen and (max-width: 768px) {
  /* let the whole page scroll instead of a small scroll box inside the card */
  .settings-content, .profile-content { max-height: none !important; overflow: visible !important; }
  .card { margin: 0 auto; }
}
.overlay { position: fixed !important; }