/* ==========================================================================
   TEC MOBILE PREMIUM — final polish layer
   Loaded LAST on every customer page. Almost everything is scoped inside
   @media (max-width: 768px) so the desktop layout is untouched.
   Palette + type come from the existing design system (dark cinema base,
   warm gold accent) — this file tunes rhythm, touch targets, and overflow
   discipline to a premium cinema-app standard.
   ========================================================================== */

/* ---------- Quality floor (all viewports, non-visual on desktop) ---------- */
:where(a, button, .btn, .pay-btn, .menu-toggle, .tec-search-toggle, input, select, textarea):focus-visible{
  outline: 2px solid #f4c45b;
  outline-offset: 2px;
  border-radius: 6px;
}

.tec-marketing-consent{
  display:flex!important;
  align-items:flex-start;
  gap:10px;
  margin:12px 0 14px!important;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.86);
  font-size:13px;
  line-height:1.45;
}

.tec-marketing-consent input{
  width:18px!important;
  height:18px!important;
  min-width:18px;
  margin:1px 0 0!important;
  accent-color:#f4c45b;
}

.tec-marketing-consent span{
  flex:1;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================ MOBILE ≤ 768px ============================ */
@media (max-width: 768px){

  /* ---------- 1. Overflow discipline: no horizontal page scroll, ever ----- */
  html, body{
    overflow-x: clip !important;
    max-width: 100vw;
  }
  body{
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  img, video, svg, iframe, canvas{
    max-width: 100% !important;
  }
  h1, h2, h3, h4, p, a, li, td, th, strong{
    overflow-wrap: break-word;
  }
  .card-grid > *,
  .booking-grid > *,
  .tec-ticket-grid > *,
  .phone-row > *{
    min-width: 0;
  }

  /* ---------- 2. Type scale: fluid, calm, readable ----------------------- */
  body{ font-size: 16px; line-height: 1.55; }
  .hero-title{
    font-size: clamp(2.05rem, 8.5vw, 2.8rem) !important;
    line-height: 1.08 !important;
    letter-spacing: .01em;
  }
  .hero-text{
    font-size: clamp(.95rem, 3.8vw, 1.05rem) !important;
    line-height: 1.55 !important;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }
  .eyebrow{
    font-size: .72rem !important;
    letter-spacing: .22em !important;
    text-transform: uppercase;
  }
  .section h2,
  .section-head h2,
  .booking-copy h2{
    font-size: clamp(1.35rem, 5.6vw, 1.65rem) !important;
    line-height: 1.15 !important;
  }
  .payment-card h1,
  .success-card h1{
    font-size: clamp(1.45rem, 6vw, 1.8rem) !important;
    line-height: 1.12 !important;
  }

  /* ---------- 3. Touch targets: 48px minimum, no accidental zoom --------- */
  .btn,
  .pay-btn,
  .view-link,
  .nav-ticket-button,
  #bookingButton,
  #continuePayment,
  #payNowBtn,
  button[type="submit"],
  .show-actions a,
  .show-actions button{
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(244, 196, 91, .18);
  }
  input, select, textarea{
    min-height: 48px !important;
    font-size: 16px !important; /* prevents iOS focus zoom */
    border-radius: 12px !important;
    touch-action: manipulation;
  }
  textarea{ min-height: 110px !important; }
  #mainNav a,
  .tec-mobile-menu-links a{
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .menu-toggle,
  .tec-search-toggle{
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }

  /* ---------- 4. Header: compact, steady, thumb-reachable ---------------- */
  header.navbar,
  .seat-header{
    padding-top: max(10px, env(safe-area-inset-top)) !important;
  }
  header.navbar .logo img,
  .seat-header .logo img{
    max-height: 42px !important;
    width: auto !important;
  }
  header.navbar .logo span{
    font-size: 15px !important;
    letter-spacing: .02em;
  }

  /* ---------- 5. Hero: mobile video, readable overlay, stacked actions ---- */
  .hero{
    min-height: min(76svh, 680px);
    display: flex;
    align-items: center;
  }
  .hero.mobile-hero{
    background:
      linear-gradient(90deg,rgba(0,0,0,.95),rgba(0,0,0,.66),rgba(0,0,0,.9)),
      url("images/backgroup.png");
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  .hero.mobile-hero .hero-video{
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }
  .hero.mobile-hero .hero-overlay{
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(0,0,0,.56), rgba(0,0,0,.76)),
      linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.34), rgba(0,0,0,.82));
  }
  .hero-content{
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 26px 18px calc(30px + env(safe-area-inset-bottom)) !important;
    text-align: center;
  }
  .hero-actions{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }
  .hero-actions .btn{
    width: 100% !important;
    font-size: 15px !important;
  }

  /* ---------- 6. Section rhythm: consistent 4px-grid spacing ------------- */
  .section,
  .tec-rail-section{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .section-head{
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }
  .section-head .view-link{
    white-space: nowrap;
    min-height: 44px !important;
    padding: 0 4px;
  }
  footer{
    padding: 26px 16px calc(26px + env(safe-area-inset-bottom)) !important;
    text-align: center;
  }

  /* ---------- 7. Cards: identical frames (poster ratio set by tec-premium) - */
  .show-card .tec-card-title,
  .show-card h3{
    word-break: break-word;
    hyphens: auto;
  }
  .show-card{
    -webkit-tap-highlight-color: rgba(244, 196, 91, .12);
  }
  #listingGrid.card-grid{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .tec-rail-section .card-grid,
  #comingSoonGrid.card-grid,
  #featuredGrid.card-grid,
  #screenedGrid.card-grid,
  #eventsGrid.card-grid,
  #listingGrid.card-grid,
  .movie-grid,
  .event-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    grid-auto-rows: auto !important;
  }
  .show-card.tec-premium-show-card,
  .movie-card,
  .event-card{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }
  .show-card.tec-premium-show-card .tec-poster-wrap,
  .movie-card-image,
  .poster-wrap{
    aspect-ratio: 2 / 3 !important;
    width: 100% !important;
    background: #080808 !important;
  }
  .show-card.tec-premium-show-card .tec-poster-wrap img,
  .movie-card img,
  .event-card img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .show-card.tec-premium-show-card .tec-card-tagline,
  .movie-info p,
  .event-info p{
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ---------- 8. Booking form: one calm column ---------------------------- */
  .booking-page{
    padding: 22px 16px 34px !important;
    gap: 22px !important;
  }
  .booking-box{
    width: 100% !important;
    max-width: none !important;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
  }
  .booking-box label{
    display: block;
    margin: 14px 0 6px !important;
    font-size: 13px !important;
    letter-spacing: .04em;
  }
  .booking-box input,
  .booking-box select{
    width: 100% !important;
  }
  .phone-row{
    display: grid !important;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
    gap: 10px !important;
  }
  .booking-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #bookingButton{
    width: 100% !important;
    min-height: 52px !important;
    font-size: 16px !important;
    margin-top: 18px !important;
  }
  .booking-features{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    font-size: 13px !important;
  }

  /* ---------- 9. Seat map: aisle-light pan affordance (signature) --------- */
  .seat-page{
    padding: 14px 12px calc(120px + env(safe-area-inset-bottom)) !important;
  }
  .seat-area{
    position: relative;
    border-radius: 16px;
  }
  /* Soft gold fades at the pan edges — the "aisle lights". They signal that
     the hall continues sideways without a single word of UI chrome. */
  .seat-area::before,
  .seat-area::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 26px;
    pointer-events: none;
    z-index: 5;
  }
  .seat-area::before{
    left: 0;
    background: linear-gradient(90deg, rgba(244, 196, 91, .10), transparent);
    border-radius: 16px 0 0 16px;
  }
  .seat-area::after{
    right: 0;
    background: linear-gradient(270deg, rgba(244, 196, 91, .10), transparent);
    border-radius: 0 16px 16px 0;
  }
  .seat-map-wrap,
  .seat-map-container,
  #seatMap{
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #seatMap::-webkit-scrollbar{ display: none; }
  .seat{
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 8px 8px 4px 4px !important; /* cinema-chair silhouette */
    touch-action: manipulation;
  }
  .legend{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 16px !important;
    font-size: 12.5px !important;
    padding: 12px 4px !important;
  }
  .summary-card{
    border-radius: 18px !important;
    padding: 16px !important;
  }
  .selected-chip{
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
  .mobile-sticky-book{
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  /* ---------- 10. Payment page: decisive, single-column checkout ---------- */
  .payment-shell{
    padding: 18px 14px calc(30px + env(safe-area-inset-bottom)) !important;
  }
  .payment-card{
    padding: 22px 16px !important;
    border-radius: 20px !important;
  }
  .summary-panel{
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .summary-panel p{
    font-size: 12px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 12px 0 2px !important;
    opacity: .75;
  }
  .summary-panel h3{
    font-size: 16px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }
  .summary-panel h2{
    font-size: 22px !important;
  }
  .payment-hold-panel{
    padding: 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }
  .payment-methods{
    display: grid !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 18px 0 !important;
    border: 0 !important;
  }
  .payment-option{
    min-height: 64px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    align-items: center !important;
    gap: 12px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(244, 196, 91, .16);
  }
  .payment-option strong{ font-size: 15px !important; }
  .payment-option small{ font-size: 12.5px !important; line-height: 1.4; }
  .payid-box{
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .payid-detail{
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
  }
  .upload-drop{
    min-height: 120px !important;
    padding: 18px 14px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center;
    touch-action: manipulation;
  }
  #payNowBtn{
    width: 100% !important;
    min-height: 54px !important;
    font-size: 16px !important;
    letter-spacing: .04em;
  }
  .payment-status{
    font-size: 14px !important;
    line-height: 1.5;
  }
  .payment-status .pay-btn{
    width: 100%;
    margin-top: 10px;
  }

  /* ---------- 11. Success / ticket: the QR is the hero -------------------- */
  .success-container{
    padding: 20px 14px calc(34px + env(safe-area-inset-bottom)) !important;
  }
  .success-card{
    padding: 24px 16px !important;
    border-radius: 20px !important;
  }
  .tec-ticket-card{
    width: 100% !important;
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
  .tec-qr-wrap img{
    width: min(240px, 68vw) !important;
    height: auto !important;
    margin: 0 auto;
    display: block;
  }
  .tec-ticket-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    text-align: left;
  }
  .tec-ticket-grid div{
    padding: 10px !important;
    border-radius: 10px !important;
  }
  .tec-ticket-grid span{ font-size: 11.5px !important; opacity: .7; }
  .tec-ticket-grid strong{ font-size: 14px !important; word-break: break-word; }
  .success-actions{
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
    margin-top: 18px !important;
  }
  .success-actions .pay-btn{
    width: 100% !important;
  }

  /* ---------- 12. Support / contact / feedback / find-ticket forms -------- */
  .support-form input,
  .support-form textarea,
  .contact-form input,
  .contact-form textarea,
  .feedback-form input,
  .feedback-form textarea,
  .ticket-search input{
    width: 100% !important;
  }
}

/* ============== Very small phones (≤ 380px): tighten, never crush ========= */
@media (max-width: 380px){
  .hero-title{ font-size: 1.9rem !important; }
  .tec-ticket-grid{ grid-template-columns: 1fr !important; }
  .booking-grid{ grid-template-columns: 1fr !important; }
  .phone-row{ grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important; }
}

/* ============== Public Page Mobile Card Polish (20260720) ================ */
@media (max-width: 760px){
  html,
  body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .page,
  .about-hero,
  .contact-hero-section,
  .donation-shell{
    padding: 22px 14px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .about-content,
  .contact-content,
  .donation-shell{
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-title,
  .about-content h1,
  .contact-content h1,
  .donation-shell > h1{
    font-size: clamp(1.85rem, 9vw, 2.45rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 14px !important;
    text-wrap: balance;
  }

  .about-intro,
  .contact-intro,
  .donation-shell > .mini-note{
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
  }

  .about-grid,
  .team-grid,
  .contact-grid-new,
  .donation-grid,
  .card-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .about-box,
  .team-card,
  .about-contact,
  .contact-card-new,
  .donation-card,
  .card-grid > article,
  .card-grid > .empty-note,
  #listingGrid > p,
  #campaigns > p{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(244, 196, 91, .18) !important;
    background: linear-gradient(145deg, rgba(18, 18, 24, .92), rgba(8, 8, 12, .96)) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    overflow: hidden !important;
  }

  .about-box h2,
  .about-contact h2,
  .contact-card-new h2,
  .donation-card h2,
  .team-title{
    font-size: 1.18rem !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  .about-box p,
  .about-box li,
  .about-contact p,
  .contact-card-new p,
  .contact-card-new li,
  .donation-card p,
  .team-card p,
  .team-card h4{
    font-size: 14px !important;
    line-height: 1.55 !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .team-card img,
  .donation-card img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 14px !important;
  }

  .team-card img{
    aspect-ratio: 1 / 1;
    max-width: 180px !important;
    margin-inline: auto;
  }

  .filter-bar{
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 4px 2px 12px !important;
    margin: 0 -2px 16px !important;
    scrollbar-width: none;
  }

  .filter-bar::-webkit-scrollbar{
    display: none;
  }

  .filter-bar button{
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    scroll-snap-align: start;
    white-space: nowrap;
    touch-action: manipulation;
  }

  .social-links-new{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .social-btn-new,
  .support-contact-card .btn,
  .donation-card .pay-btn{
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
  }

  .tec-search-panel,
  .payment-glow{
    max-width: 100vw !important;
    overflow: hidden !important;
  }
}

.booking-box label.tec-marketing-consent{
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr);
  align-items:start;
  gap:10px;
  margin:10px 0 16px!important;
  padding:11px 12px!important;
  border:1px solid rgba(244,196,91,.18)!important;
  border-radius:10px!important;
  background:rgba(244,196,91,.055)!important;
  color:rgba(255,255,255,.78)!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.45!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

.booking-box label.tec-marketing-consent #marketingConsent{
  appearance:auto!important;
  -webkit-appearance:auto!important;
  display:block!important;
  width:16px!important;
  min-width:16px!important;
  max-width:16px!important;
  height:16px!important;
  min-height:16px!important;
  margin:2px 0 0!important;
  padding:0!important;
  border-radius:3px!important;
  accent-color:#f4c45b;
  box-shadow:none!important;
}

.booking-box label.tec-marketing-consent span{
  display:block;
  min-width:0;
  color:inherit;
}