@media screen {
/* NAVATIK Responsive Layer — mobile, tablet, iOS Safari and desktop safeguards.
   Screen-only by design: does not change ticket/PDF print layouts. */
:root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { width: 100%; min-width: 0; scroll-padding-top: 5rem; }
body { min-width: 0; max-width: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { max-width: 100%; }
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font: inherit; }
:where(input, select, textarea) { min-width: 0; }
:where(button, input[type="button"], input[type="submit"], a.nova-btn, .nova-btn, .admin-primary-btn, .admin-secondary-link) { touch-action: manipulation; }
:where(table) { max-width: 100%; }
:where(pre, code) { overflow-wrap: anywhere; }
:where(.page-shell, .checkout-shell, .checkout-page, .checkout-main, .event-main, .event-side, .admin-main, .admin-page, .admin-panel, .account-panel, .nova-content-page) { min-width: 0; }
:where(.site-header, .header-inner, .header-actions, .main-nav, .auth-actions, .section-head, .section-heading, .footer-main, .footer-bottom, .admin-topbar, .admin-panel-head, .admin-form-actions, .ticket-actions) { flex-wrap: wrap; }
:where(.location-event-grid, .past-events-grid, .sessions-grid, .event-extra-grid, .purchase-steps, .admin-stat-grid, .revenue-stat-grid, .admin-quick-grid, .admin-two-col, .admin-export-grid, .checkout-steps, .ticket-grid, .ticket-order-grid, .ticket-purchase-grid, .event-main) { min-width: 0; }
@media (max-width: 1024px) {
  .page-shell, .checkout-shell, .footer-container { width: min(100% - 2rem, 100%); }
  .admin-sidebar { max-width: 100%; }
  .admin-main, .admin-page, .admin-canvas-wrap { min-width: 0; max-width: 100%; }
  .admin-two-col, .event-main { grid-template-columns: minmax(0, 1fr); }
  .admin-stat-grid, .revenue-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .location-event-grid, .past-events-grid, .sessions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  html { scroll-padding-top: 1rem; }
  body { font-size: 15px; }
  .page-shell, .checkout-shell, .footer-container { width: min(100% - 1.25rem, 100%); }
  .site-header { position: relative; }
  .header-inner { gap: .75rem; padding-inline: .25rem; }
  .header-actions, .auth-actions, .main-nav { gap: .5rem; }
  .main-nav { flex-wrap: wrap; justify-content: center; }
  .location-event-grid, .past-events-grid, .sessions-grid, .event-extra-grid,
  .admin-stat-grid, .revenue-stat-grid, .admin-quick-grid, .admin-two-col,
  .admin-export-grid, .checkout-steps, .ticket-grid, .ticket-order-grid,
  .ticket-purchase-grid, .footer-main { grid-template-columns: minmax(0, 1fr); }
  .section-head, .section-heading, .admin-panel-head, .admin-topbar { align-items: stretch; gap: .75rem; }
  .section-head > *, .section-heading > *, .admin-panel-head > * { min-width: 0; }
  .nova-btn, .admin-primary-btn, .admin-danger-btn, .admin-secondary-link,
  .payment-button { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  .nova-input, .nova-form input, .nova-form select, .nova-form textarea,
  .admin-form input, .admin-form select, .admin-form textarea { width: 100%; min-width: 0; }
  .checkout-main, .checkout-summary, .payment-card, .account-panel, .nova-card { min-width: 0; }
  .admin-sidebar { width: 100%; }
  .admin-nav { flex-wrap: wrap; }
  .admin-nav a, .admin-nav button { max-width: 100%; }
  .admin-form, .admin-settings-form { grid-template-columns: minmax(0, 1fr); }
  .admin-form-actions { gap: .5rem; }
  .admin-form-actions > *, .coupon-actions > *, .admin-media-controls > * { min-width: 0; max-width: 100%; }
  .table-responsive, .admin-table-wrap, .table-wrap, .ticket-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { width: 100%; }
  .ticket-page, .ticket-main, .ticket-stub { min-width: 0; max-width: 100%; }
  .ticket-actions { gap: .5rem; }
  .seat-layout-shell, .custom-seat-canvas-wrap, .admin-seat-canvas, .event-map { max-width: 100%; min-width: 0; }
  .custom-seat-canvas-wrap, .seat-layout-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .support-panel { width: min( calc(100vw - 1.5rem), 380px); max-width: calc(100vw - 1.5rem); }
  .support-input-row { gap: .4rem; }
  .support-input-row input { min-width: 0; }
  .footer-bottom { gap: .75rem; }
}
@media (max-width: 480px) {
  .page-shell, .checkout-shell, .footer-container { width: calc(100% - 1rem); }
  .brand-copy { min-width: 0; }
  .brand, .header-inner { max-width: 100%; }
  .header-actions { width: 100%; justify-content: flex-start; }
  .location-event-grid, .past-events-grid, .sessions-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-stat-grid, .revenue-stat-grid { grid-template-columns: minmax(0, 1fr); }
  .nova-card, .payment-card, .checkout-summary, .account-panel { padding: clamp(.75rem, 4vw, 1rem); }
  .admin-panel { padding: .75rem; }
  .admin-panel-head { flex-direction: column; }
  .admin-form-actions > button, .admin-form-actions > a, .coupon-actions > button { flex: 1 1 100%; }
  .ticket-qr, .ticket-barcode { max-width: 100%; }
  h1 { overflow-wrap: anywhere; }
}
@media (hover: none) and (pointer: coarse) {
  button, a, input[type="checkbox"], input[type="radio"], select { min-height: 44px; }
}
@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

}


/* NAVATIK mobile header alignment + seat map stability */
@media (max-width: 768px) {
  .site-header .header-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .site-header .brand {
    align-self: flex-end;
    order: 1;
  }
  .site-header .header-actions {
    order: 2;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
  }
  .site-header .auth-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
  .site-header .theme-switch {
    flex: 0 0 auto;
  }
  .seat-layout-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .custom-seat-canvas-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden !important;
    touch-action: pan-y;
  }
  .buyer-seat-canvas {
    transform-origin: top left !important;
    will-change: transform;
  }
}

/* NAVATIK HOTFIX 2026-10-13: override the absolute-positioned desktop header on phones.
   This is presentation-only and does not touch seat/order data. */
@media screen and (max-width: 860px) {
  .site-header .header-inner {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 12px 0 !important;
  }
  .site-header .brand {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    align-self: flex-end !important;
    order: 1 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .site-header .main-nav { display: none !important; }
  .site-header .header-actions {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    direction: ltr !important;
  }
  .site-header .auth-actions {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 !important;
    direction: ltr !important;
  }
  .site-header .theme-switch { flex: 0 0 auto !important; margin: 0 !important; }
  .site-header .login-link,
  .site-header .register-link { flex: 0 0 auto !important; white-space: nowrap !important; }
}

/* Seat map: preserve the hall's original coordinate system; only keep its
   viewport measurable and prevent mobile CSS from stretching the canvas. */
@media screen and (max-width: 860px) {
  .seat-layout-shell,
  .custom-seat-canvas-wrap { min-width: 0 !important; max-width: 100% !important; }
  .custom-seat-canvas-wrap { position: relative !important; display: block !important; }
  .buyer-seat-canvas { flex: 0 0 auto !important; height: auto; }
}

/* NAVATIK MOBILE REPAIR — 2026-10-13
   Keep header actions visible on phones and prevent touch-target rules from
   changing the geometry of the absolute-positioned seat buttons. */
@media screen and (max-width: 860px) {
  .site-header .header-inner {
    width: calc(100% - 24px) !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "brand actions" !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
    padding: 10px 0 !important;
  }
  .site-header .brand {
    grid-area: brand !important;
    justify-self: start !important;
    align-self: center !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    direction: ltr !important;
  }
  .site-header .brand-copy { min-width: 0 !important; }
  .site-header .brand-copy strong { font-size: 17px !important; }
  .site-header .brand-copy small { display: none !important; }
  .site-header .header-actions {
    grid-area: actions !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
    direction: ltr !important;
  }
  .site-header .auth-actions {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    min-width: 0 !important;
    margin: 0 !important;
    direction: rtl !important;
  }
  .site-header .theme-switch {
    width: 42px !important;
    min-width: 42px !important;
    height: 40px !important;
    padding: 0 !important;
    flex: 0 0 42px !important;
    justify-content: center !important;
  }
  .site-header .theme-label { display: none !important; }
  .site-header .login-link,
  .site-header .register-link {
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media screen and (max-width: 380px) {
  .site-header .header-inner { width: calc(100% - 16px) !important; column-gap: 5px !important; }
  .site-header .brand-copy strong { font-size: 15px !important; }
  .site-header .theme-switch { width: 36px !important; min-width: 36px !important; flex-basis: 36px !important; }
  .site-header .login-link,
  .site-header .register-link { padding-inline: 7px !important; font-size: 10px !important; }
}

/* Touch devices receive large tap targets generally, but seat buttons must
   retain equal width/height so the hall map remains a clean square grid. */
@media screen and (max-width: 860px), (hover: none) and (pointer: coarse) {
  .buyer-seat-canvas .custom-seat {
    box-sizing: border-box !important;
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
    padding: 0 !important;
    line-height: 1 !important;
    aspect-ratio: 1 / 1 !important;
    flex: none !important;
    border-radius: 4px !important;
    font-size: 7px !important;
  }
  .buyer-seat-canvas {
    height: auto;
    min-height: 0;
  }
}