/* Compact responsive layer. Page-specific styles remain authoritative; this file
   only normalizes shared phone navigation, spacing and touch controls. */
:root {
  --mobile-gutter: clamp(14px, 4vw, 20px);
  --mobile-section: clamp(42px, 9vw, 56px);
  --tap-size: 44px;
}

html { -webkit-text-size-adjust: 100%; }
.pg-wrap, .xp-page, .dash-main, .bd-main, .card, .panel { min-width: 0; }
.pg-card, .xp-panel, .booking-item, .profile-card, .bd-card,
.mobile-card-table td { overflow-wrap: break-word; word-break: normal; }

/* A fixed 62px control sits inside the content column on phones, tablets and
   ordinary laptops. Keep it in the wide-screen gutter where it cannot cover
   form controls, card copy or action buttons. */
@media (max-width: 1400px) {
  .back-to-top { opacity: 0 !important; visibility: hidden; pointer-events: none; }
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  background: rgba(11, 31, 58, .48);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
}

@media (max-width: 1100px) {
  .navbar,
  .navbar.scrolled {
    min-height: calc(60px + env(safe-area-inset-top));
    padding: calc(8px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  }
  .nav-logo {
    min-width: 0;
    max-width: calc(100vw - 132px);
    font-size: clamp(1rem, 3.4vw, 1.2rem);
    letter-spacing: .055em;
  }
  .nav-right { gap: 6px; }
  .lang-btn { min-height: var(--tap-size); padding: 7px 10px; }
  .hamburger {
    min-width: var(--tap-size);
    min-height: var(--tap-size);
    align-items: center;
    justify-content: center;
  }
  .nav-links {
    top: 0;
    right: 0;
    width: min(82vw, 320px);
    max-width: none;
    height: 100vh;
    height: 100dvh;
    gap: 2px;
    padding: calc(66px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) 14px;
    transform: translateX(103%);
    transition: transform 220ms cubic-bezier(.22, .8, .3, 1);
    overscroll-behavior: contain;
  }
  .nav-links.active { transform: translateX(0); }
  .nav-links > li > a,
  .activity-toggle {
    min-height: var(--tap-size);
    padding: 8px 10px;
    font-size: .9rem;
    line-height: 1.35;
  }
  .activity-nav.open .activity-dropdown { padding-top: 4px; }
  .nav-links .activity-card {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
    border-radius: 12px;
  }
  .activity-icon { width: 34px; height: 34px; border-radius: 10px; }
  .activity-copy strong { margin-bottom: 2px; font-size: .82rem; }
  .activity-copy small { font-size: .69rem; line-height: 1.35; }
  .nav-links .nav-btn { margin-top: 3px; text-align: center; }
  .nav-backdrop.active { opacity: 1; visibility: visible; pointer-events: auto; }
  body.nav-open { overflow: hidden; overscroll-behavior: none; }
}

@media (max-width: 768px) {
  .pg-wrap, .xp-page {
    padding: calc(76px + env(safe-area-inset-top)) var(--mobile-gutter) var(--mobile-section);
  }
  .pg-title, .xp-title { font-size: clamp(1.55rem, 6.5vw, 1.9rem); line-height: 1.18; }
  .pg-sub, .xp-lead { font-size: .94rem; line-height: 1.5; margin-bottom: 18px; }
  .pg-card, .xp-panel, .pkg-card { padding: 16px; border-radius: 15px; }
  .pg-btn, .xp-btn,
  .f-field input, .f-field select {
    min-height: 44px;
  }

  .cookie-popup {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    max-height: min(72dvh, 500px);
    overflow-y: auto;
    padding: 16px;
    border-radius: 16px;
  }
  .cookie-icon { width: 34px; height: 34px; margin-bottom: 8px; }
  .cookie-popup h4 { font-size: 1rem; margin-bottom: 4px; }
  .cookie-popup p { font-size: .78rem; line-height: 1.45; margin-bottom: 12px; }
  .cookie-btns { flex-direction: row; gap: 8px; }
  .cookie-btn { min-height: 44px; padding: 9px 11px; font-size: .82rem; }

  .back-to-top {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
  }
  .back-to-top.at-top { opacity: 0; visibility: hidden; pointer-events: none; }

  /* The footer is described in one place, below. */

  /* The homepage owns its own responsive layout in static/css/home.css:
     one file describes that page at every width, rather than the desktop
     rules living there and the phone rules living here. */

  .dash-main { padding: 16px var(--mobile-gutter) 28px; }
  .page-header { margin-bottom: 16px; }
  .page-header h1 { font-size: clamp(1.35rem, 6vw, 1.65rem); }
  .login-page, .register-page {
    min-height: 100dvh;
    padding: calc(70px + env(safe-area-inset-top)) var(--mobile-gutter) 24px;
  }
  .login-form-side { padding: 20px 16px; }
  .login-form-header { margin-bottom: 16px; }
  .login-form-header h3 { font-size: 1.35rem; }
  .login-form { gap: 12px; }
  .form-input-wrapper input, .login-btn { min-height: 48px; }

  .bd-main { padding: 16px var(--mobile-gutter) calc(82px + env(safe-area-inset-bottom)); }
  .bd-top { margin-bottom: 14px; }
  .bd-h1 { font-size: clamp(1.3rem, 5.5vw, 1.55rem); }
  .bd-next { padding: 16px; }
  .bd-empty { padding: 24px 14px; }
}

/* ---------------------------------------------------------------------
   FOOTER ON A PHONE
   The shared footer collapses to one centred column at 768px, which turns
   fifteen links into roughly a thousand pixels of scrolling on every page.
   Same links, same order, same destinations — laid out as two columns under
   the brand, with the legal row back on one line.

   Two columns is what buys the height back; shrinking the type is not, so
   the type stays at the size it is everywhere else and each link carries
   enough padding to be a target rather than a line of text.

   768px, not 767px, so this meets base.html's own footer breakpoint exactly
   and no width falls between the two.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .footer {
    padding: 34px var(--mobile-gutter) calc(18px + env(safe-area-inset-bottom));
  }
  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
    margin-bottom: 20px;
    text-align: left;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand h3 { margin-bottom: 12px; }
  .footer-brand h3 img { height: 44px; width: auto; }
  .footer-brand p {
    margin-bottom: 14px;
    font-size: .86rem;
    line-height: 1.6;
  }
  .footer-socials { justify-content: flex-start; gap: 10px; }
  .footer-col:last-child { text-align: left; }
  .footer-col h4 {
    margin-bottom: 8px;
    font-size: .82rem;
    letter-spacing: .08em;
  }
  /* The padding, rather than the margin, is what the finger lands on. */
  .footer-col ul li { margin-bottom: 0; }
  .footer-col ul a {
    display: block;
    padding: 9px 0;
    font-size: .86rem;
    line-height: 1.35;
  }
  .footer-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    justify-content: space-between;
    padding-top: 14px;
    text-align: left;
  }
  .footer-bottom p { font-size: .78rem; }
  .footer-bottom-links { justify-content: flex-start; gap: 16px; }
  .footer-bottom-links a { display: inline-block; padding: 6px 0; font-size: .78rem; }
}

/* A page carrying the fixed mobile tab bar has to reserve room for it, or the
   bar sits on top of the last rows of the footer. Keyed to the bar actually
   being present, so every other page keeps the footer padding it has. */
@media (max-width: 767px) {
  body:has(.m-tabbar) .footer {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 600px) {
  body { font-size: 15px; }

  .modal-overlay, .rmodal { padding: 0; align-items: flex-end; }
  .modal-box, .rmodal .bx {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    padding: 18px var(--mobile-gutter) calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
}

@media (max-width: 420px) {
  .nav-links { width: min(84vw, 300px); }
  .lang-btn .globe { display: none; }
  .lang-btn { min-width: 54px; }
  .profile-dropdown { width: min(288px, calc(100vw - 20px)); min-width: 0; right: -4px; }
  .bx-actions { flex-direction: column; }
  .bx-actions .pg-btn { width: 100%; min-width: 0; }
}

@media (max-width: 340px) {
  .nav-logo { max-width: 150px; font-size: .94rem; white-space: normal; line-height: 1.05; }
  .bd-stats, .bd-live-acts { grid-template-columns: 1fr; }
  .cookie-btns { flex-direction: column; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .nav-links { padding-top: calc(58px + env(safe-area-inset-top)); }
  .cookie-popup, .modal-box, .rmodal .bx { max-height: calc(100dvh - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-backdrop { transition: none !important; }
}