/* ToUr7 — site-wide mobile app spacing & polish
   Load LAST on every page. Only changes spacing, sizes and tap targets (max-width:720px).
   Page-specific #id rules in your existing CSS still win, so tuned areas (e.g. home hero) stay intact. */

@media(max-width:720px){
  html{-webkit-text-size-adjust:100%;scroll-padding-top:64px}
  body{overflow-x:hidden;-webkit-tap-highlight-color:transparent;line-height:1.5}
  img,video,svg{max-width:100%}
  body .container{padding-left:14px;padding-right:14px}

  /* ---- top bar ---- */
  body .navbar{padding-top:6px;padding-bottom:6px}

  /* ---- page headers / title bands ---- */
  body .page-header{padding:14px 0 12px;margin-bottom:8px}
  body .page-header h1{font-size:1.2rem;line-height:1.25;margin:0}
  body .page-header p{font-size:.78rem;line-height:1.4;margin:3px 0 0}
  body .page-content{padding-top:8px;padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  body .category-hero,body .destination-hero,body .live-hero{padding-top:22px;padding-bottom:18px}
  body .category-hero h1,body .destination-hero h1,body .live-hero h1{font-size:clamp(1.35rem,6.4vw,1.7rem);line-height:1.15}
  body .category-hero p,body .destination-hero p,body .live-hero p{font-size:.84rem;line-height:1.45}

  /* ---- sections ---- */
  body:not(.t7-home) section:not([class*="hero"]):not(.hero):not([role=dialog]){padding-top:28px;padding-bottom:28px}
  body.t7-home section.fade-section{padding-top:34px;padding-bottom:34px}
  body .section-head,body .section-heading{margin-bottom:14px}
  body .section-head h2,body .section-heading h2,body section>.container>h2{font-size:1.25rem;line-height:1.2}
  body .section-head p,body .section-heading p{font-size:.8rem;line-height:1.45;margin-top:4px}
  body .section-kicker{font-size:.62rem;margin-bottom:4px}

  /* ---- cards ---- */
  body .section-card,body .price-card,body .customer-details-card,body .itinerary-card,
  body .google-card,body .side-card,body .sticky-card,body .receipt-wrapper,body .sk-card,body .map-card{
    padding:14px;margin-bottom:12px;border-radius:16px}
  body .card-title{font-size:.98rem;margin-bottom:10px;gap:8px}
  body .card .card-body,body .service-card .card-body{padding:12px}

  /* ---- grids: tighter gaps ---- */
  body [class*="-grid"],body .grid{gap:10px}
  body .choice-grid,body .recommendation-grid{gap:8px}

  /* ---- forms ---- */
  body .form-group{margin-bottom:12px}
  body .form-row{gap:0 10px}
  body label{font-size:.74rem}
  body input:not([type=checkbox]):not([type=radio]):not([type=range]),body select,body textarea{
    font-size:16px;min-height:46px;border-radius:12px}
  body textarea{min-height:88px}

  /* ---- buttons / tap targets ---- */
  body .btn-primary,body .btn-nav,body button.btn{min-height:46px;padding-top:10px;padding-bottom:10px;border-radius:13px}
  body .btn-primary{padding-left:20px;padding-right:20px;font-size:.92rem}
  body .nav-buttons{margin-top:14px;gap:8px}

  /* ---- scrolling chip / tab rows ---- */
  body [class*="chips"],body [class*="pills"],body [class*="-tabs"]{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body [class*="chips"]::-webkit-scrollbar,body [class*="pills"]::-webkit-scrollbar,body [class*="-tabs"]::-webkit-scrollbar{display:none}

  /* ---- fixed bottom bars respect the home indicator ---- */
  body [class*="sticky"][class*="bar"],body .sticky-cta{padding-bottom:calc(9px + env(safe-area-inset-bottom))}

  /* ---- receipts / long text pages ---- */
  body .receipt-grid{gap:8px}
  body .receipt-section-title{margin:14px 0 8px;font-size:.9rem}
  body .page-content h2{font-size:1.1rem}
  body .page-content h3{font-size:.98rem}
  body .page-content p,body .page-content li{font-size:.88rem;line-height:1.55}

  /* ---- footer ---- */
  body footer,body .footer{padding-top:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}

  /* ======== Trip planner (multi-day.html) steps 2–5 ======== */
  #step2 .nav-buttons .right .btn-primary,#step3 .nav-buttons .right .btn-primary,#step4 .nav-buttons .right .btn-primary{display:none}
  #step2 .nav-buttons,#step3 .nav-buttons,#step4 .nav-buttons{margin-top:6px}
  #step2 .nav-buttons .btn-nav,#step3 .nav-buttons .btn-nav,#step4 .nav-buttons .btn-nav{min-height:40px;font-size:.8rem}
  .experience-intro{font-size:.78rem;line-height:1.45;margin-bottom:8px}
  .experience-footer-note,.selfservice-note{display:none!important}
  .day-hotel-section,.experience-google{margin-top:8px}
  .sightseeing-item{padding:10px}
  .stay-type-card{padding:11px}
  .hotel-choice-tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:8px}
  .hotel-choice-tools button{flex:none;min-height:36px}
  /* experience editor → bottom sheet */
  .experience-modal-dialog{left:0!important;right:0;top:auto!important;bottom:0;transform:none!important;width:100%!important;max-width:none;
    max-height:90vh!important;border-radius:22px 22px 0 0!important;padding-bottom:env(safe-area-inset-bottom)}
  .experience-modal-hero{max-height:110px}
  .experience-modal-actions{padding:10px 12px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(0,0,0,.06)}
}

@media(max-width:380px){
  body .container{padding-left:12px;padding-right:12px}
  body .section-card{padding:12px}
  body .page-header h1{font-size:1.1rem}
}