/* =========================================================================
   MOBILE POLISH — loaded last, site-wide. Only phone/tablet breakpoints.
   - visible, thumb-sized menu button + restyled slide-in menu
   - compact header, bottom quick-action bar (partials/mobileActionBar)
   - 44px tap targets, readable minimum text size, no iOS zoom on inputs
   ========================================================================= */

/* Quick-action bar is phones only */
.m-actionbar {
  display: none;
}

@media (max-width: 991px) {
  /* ---- Menu button: was white-on-white (invisible) ---- */
  #mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: 0;
    border-radius: 14px;
    background: var(--pt-ink, #0b1f33) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important; /* stays visible over the dark hero too */
    box-shadow: 0 6px 16px rgba(10, 26, 47, 0.2);
    position: relative;
    z-index: 1001;
  }

  #mobile-nav-toggle i {
    color: #fff !important;
    font-size: 22px;
    line-height: 1;
  }

  body.mobile-nav-active #mobile-nav-toggle {
    background: var(--pt-gold, #f8b600) !important;
  }

  body.mobile-nav-active #mobile-nav-toggle i {
    color: var(--pt-ink, #0b1f33) !important;
  }

  /* ---- Slide-in menu ---- */
  #mobile-nav {
    left: -100%;
    width: min(84vw, 320px);
    padding: 100px 0 32px;
    background:
      radial-gradient(320px 240px at 0% 0%, rgba(248, 182, 0, 0.18), transparent 60%),
      linear-gradient(170deg, var(--pt-navy-950, #050b16), var(--pt-teal-700, #0f3d4a));
    box-shadow: 20px 0 60px rgba(5, 11, 22, 0.45);
    transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.mobile-nav-active #mobile-nav {
    left: 0;
  }

  #mobile-nav ul li a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 14px 56px 14px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.6px;
  }

  #mobile-nav ul li a:hover,
  #mobile-nav ul li a:focus,
  #mobile-nav ul .menu-item-active {
    color: var(--pt-gold-light, #ffd166) !important;
    background: rgba(255, 255, 255, 0.04);
  }

  #mobile-nav ul li li {
    padding-left: 0;
    background: rgba(0, 0, 0, 0.18);
  }

  #mobile-nav ul li li a {
    min-height: 46px;
    padding-left: 40px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
  }

  #mobile-nav ul .menu-has-children i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    top: 0;
    color: rgba(255, 255, 255, 0.8);
  }

  #mobile-body-overly {
    background: rgba(5, 11, 22, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  /* ---- Header ---- */
  .main-menu {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .main-menu > .row {
    flex-wrap: nowrap;
    padding-right: 56px; /* room for the menu button */
  }

  #logo .logo-default {
    height: 50px !important;
  }

  .header-phone i {
    width: 44px !important;
    height: 44px !important;
    font-size: 17px !important;
  }
}

@media (max-width: 767px) {
  /* The bottom bar carries "Plan your trip", so the header stays uncluttered */
  .header-cta.primary-btn {
    display: none !important;
  }

  /* ---- Bottom quick-action bar ---- */
  .m-actionbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 996; /* under the slide-in menu (998) and modals */
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
    gap: 6px;
    padding: 6px;
    border-radius: 20px;
    background: rgba(10, 26, 47, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 14px 36px rgba(5, 11, 22, 0.35);
  }

  .m-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    border-radius: 14px;
    color: #fff !important;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s ease;
  }

  .m-action i {
    color: var(--pt-gold-light, #ffd166);
    font-size: 19px;
  }

  .m-action:active {
    background: rgba(255, 255, 255, 0.1);
  }

  .m-action-wa i {
    color: #25d366;
  }

  .m-action-primary {
    flex-direction: row;
    gap: 8px;
    background: var(--pt-gold, #f8b600);
    color: var(--pt-ink, #0b1f33) !important;
    font-size: 13.5px;
    font-weight: 800;
  }

  .m-action-primary i {
    color: var(--pt-ink, #0b1f33);
    font-size: 16px;
  }

  /* keep page content (footer) clear of the bar */
  body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  body.mobile-nav-active .m-actionbar {
    display: none;
  }

  /* cookie banner sits above the bar */
  .ck-banner {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* =========================================================================
   APP-STYLE SWIPE ROWS (phones/small tablets)
   Long vertical stacks of cards become horizontal, snap-scrolling rows with
   the next card peeking in. Rows bleed to the screen edge (container padding
   is 6vw at these widths, see premium-theme.css §17).
   ========================================================================= */
@media (max-width: 767px) {
  .ptv-grid,
  .bt-windows,
  .wx-grid,
  .pm-types,
  .pm-dest-grid,
  .fc-culture,
  .td-grid,
  .tr-modes,
  .tr-origins,
  .pk-durations,
  .pk-styles,
  .tv-grid,
  .offer-grid,
  .bl-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(82vw, 340px) !important;
    grid-auto-rows: auto !important;
    align-items: stretch;
    gap: 14px !important;
    margin-left: -6vw;
    margin-right: -6vw;
    padding: 6px 6vw 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 6vw;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ptv-grid::-webkit-scrollbar,
  .bt-windows::-webkit-scrollbar,
  .wx-grid::-webkit-scrollbar,
  .pm-types::-webkit-scrollbar,
  .pm-dest-grid::-webkit-scrollbar,
  .fc-culture::-webkit-scrollbar,
  .td-grid::-webkit-scrollbar,
  .tr-modes::-webkit-scrollbar,
  .tr-origins::-webkit-scrollbar,
  .pk-durations::-webkit-scrollbar,
  .pk-styles::-webkit-scrollbar,
  .tv-grid::-webkit-scrollbar,
  .offer-grid::-webkit-scrollbar,
  .bl-grid::-webkit-scrollbar {
    display: none;
  }

  /* every card: one column, one row, snaps to the start */
  .ptv-grid > *,
  .bt-windows > *,
  .wx-grid > *,
  .pm-types > *,
  .pm-dest-grid > *,
  .fc-culture > *,
  .td-grid > *,
  .tr-modes > *,
  .tr-origins > *,
  .pk-durations > *,
  .pk-styles > *,
  .tv-grid > *,
  .offer-grid > *,
  .bl-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0;
    scroll-snap-align: start;
  }

  /* hover "lift" effects look odd on touch while swiping */
  .ptv-grid > *:hover,
  .td-grid > *:hover,
  .pk-styles > *:hover,
  .tv-grid > *:hover,
  .offer-grid > *:hover,
  .wx-grid > *:hover,
  .bt-windows > *:hover {
    transform: none;
  }

  /* rows inside padded dark panels bleed to the panel edge */
  .pm-dest .pm-dest-grid {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-inline: 16px;
  }

  /* photo cards need an explicit height in a single-row grid */
  .ptv-grid {
    grid-auto-rows: 300px !important;
  }

  .ptv-card-feature .ptv-card-name {
    font-size: 22px;
  }

  .bl-card-feature .bl-card-link {
    min-height: 100%;
  }

  .bl .bl-card-link {
    grid-template-columns: 1fr !important;
  }

  .fc-tile-festivals {
    min-height: 100%;
  }

  /* testimonial stars no longer run under the quote badge */
  .premium-home .single-testimonial .star {
    display: inline-flex;
    padding-right: 56px;
  }
}

@media (max-width: 575px) {
  /* ---- Comfortable section rhythm ---- */
  .premium-home .section-gap {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .premium-home .banner-area-split {
    padding-top: 96px !important;
    padding-bottom: 64px !important;
  }

  .premium-home .title h2,
  .premium-home h2 {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* ---- Tap targets: at least ~44px tall ---- */
  .ptv-more-btn,
  .offer-more-btn,
  .dp-days-toggle,
  .enq-legal a,
  .enq-text a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .ex-row-link {
    min-height: 44px;
  }

  /* ---- Minimum readable size for small uppercase labels ---- */
  .premium-home small,
  .dp-day,
  .dp-pkg-num,
  .fc-split-label,
  .ptv-card-tag,
  .rp-card-label,
  .td-card-cat,
  .ticket-price-label,
  .ticket-tag,
  .tr-branch-tag,
  .tv-best-label,
  .wx-year-season,
  .bt-pill,
  .dp-price-note,
  .ex-best-label,
  .pm-applies,
  .dp-tab span,
  .pk-dur-days span,
  .ticket-tags span,
  .premium-home dt,
  .premium-home thead th,
  .td-bar-varies em {
    font-size: 12px !important;
  }

  /* remaining sub-44px buttons */
  .premium-home .primary-btn,
  .pk .pk-dur-cta {
    min-height: 44px;
  }

  .pk .pk-dur-cta {
    flex-basis: 44px;
    width: 44px;
  }

  /* ---- Stop iOS Safari zooming into form fields (needs >= 16px) ---- */
  input.form-control,
  select.form-control,
  textarea.form-control,
  .booking-from-control,
  .contact-page-area .form-area input,
  .contact-page-area .form-area textarea {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mobile-nav {
    transition: none;
  }
}

/* =========================================================================
   APP-STYLE TYPOGRAPHY & ALIGNMENT (phones)
   One consistent system for every home section: left-aligned headers,
   26px titles, readable 15px body copy, smaller swipe cards with more peek.
   ========================================================================= */
@media (max-width: 575px) {
  /* ---- Section headers: left aligned like an app screen ---- */
  .premium-home .title,
  .premium-home .title.text-center,
  .ptv-head, .bt-head, .wx-head, .pm-head, .fc-head, .td-head,
  .tr-head, .ex-head, .bl-head, .tv-head, .dp-head {
    text-align: left !important;
    max-width: none;
    margin-bottom: 22px;
  }

  .premium-home .title h2,
  .ptv .ptv-title, .bt .bt-title, .wx .wx-title, .pm .pm-title,
  .fc .fc-title, .td .td-title, .tr .tr-title, .ex .ex-title,
  .sbr .sbr-title, .bl .bl-title, .tv-head h3, .dp-head h3,
  .premium-home .container-xxl h2,
  .premium-home .ab h2, .premium-home .ab-famous h2,
  .wb .wb-intro h2, .premium-home .home-about-center h2,
  .premium-home section.py-4 h2, .premium-home .post-content-area h2 {
    font-size: 26px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.3px;
    margin-top: 10px;
  }

  /* underline bars start at the left edge too */
  .ptv-title::after, .bt-title::after, .wx-title::after, .pm-title::after,
  .fc-title::after, .td-title::after, .tr-title::after, .ex-title::after,
  .bl-title::after {
    margin-left: 0 !important;
    margin-top: 12px !important;
  }

  .premium-home .title h2::after {
    left: 0 !important;
    transform: none !important;
  }

  /* ---- Readable body copy ---- */
  .premium-home .title p,
  .ptv-lead, .bt-lead, .wx-lead, .pm-lead, .fc-lead, .td-lead,
  .tr-lead, .ex-lead, .bl-head p, .tv-head p, .dp-head p,
  .premium-home p.mobile_font_13,
  .premium-home .mobile_font_13 {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: var(--pt-slate, #4a5a6b);
  }

  .premium-home .title p {
    margin-left: 0;
    margin-right: 0;
  }

  /* sub-headings inside sections */
  .bt .bt-subtitle, .pm .pm-subtitle, .ptv-region h3, .rp h3,
  .tr-reach-copy h3, .ex-panel h3, .dp-panel-intro h4 {
    font-size: 21px !important;
    line-height: 1.3 !important;
  }

  /* ---- Smaller swipe cards, more of the next card peeking ---- */
  .ptv-grid, .bt-windows, .wx-grid, .pm-types, .pm-dest-grid, .fc-culture,
  .td-grid, .tr-modes, .tr-origins, .pk-durations, .pk-styles, .tv-grid,
  .offer-grid, .bl-grid {
    grid-auto-columns: min(76vw, 300px) !important;
    gap: 12px !important;
  }

  .ptv-grid {
    grid-auto-rows: 260px !important;
  }

  /* compact card padding */
  .td-card, .tr-mode, .tr-origin, .pm-type, .pm-dest-card, .wx-card,
  .bt-window, .tv-card, .fc-tile, .offer-content {
    padding: 20px 18px !important;
  }

  .fc-tile-festivals {
    padding: 0 !important;
  }

  .fc-tile-festivals .fc-tile-body {
    padding: 20px 18px !important;
  }

  .td-card h3, .tr-mode h3, .tr-origin h3, .pm-type h4, .pm-dest-card h4,
  .wx-card h3, .bt-window h4, .tv-card h4, .fc-tile h3,
  .premium-home .offer-content h3 {
    font-size: 18px !important;
  }

  .premium-home .offer-media {
    height: 190px !important;
  }

  /* ---- Featured package cards become a swipe row too ---- */
  .price-area > .container > .row:has(> .packages-cards) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(80vw, 320px);
    gap: 12px;
    margin: 0 -6vw;
    padding: 6px 6vw 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 6vw;
    scrollbar-width: none;
  }

  .price-area > .container > .row:has(> .packages-cards)::-webkit-scrollbar {
    display: none;
  }

  .price-area > .container > .row > .packages-cards {
    max-width: none;
    width: auto;
    padding: 0;
    margin: 0;
    scroll-snap-align: start;
  }

  .price-area > .container > .row > .packages-cards .single-price {
    height: 100%;
    margin: 0;
  }

  /* ---- Long text sections: comfortable card padding ---- */
  .sbr-card, .ab-card, .rp-box, .ex-panel, .pk-in, .pk-ex {
    padding: 20px 18px !important;
  }

  .sbr-panel, .ab-famous, .bt-seasons, .pk-book, .tv-compare, .td-planner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =========================================================================
   NOTE / CTA BOXES (phones + small tablets)
   Icon + text share the first row at full width; the button drops below and
   spans the box, instead of squeezing the text into a narrow column.
   ========================================================================= */
@media (max-width: 991px) {
  .td-note,
  .tr-note,
  .ex-note {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 12px 14px !important;
    padding: 18px !important;
  }

  .td-note > i,
  .tr-note > .tr-note-icon,
  .ex-note > .ex-note-icon {
    margin-top: 2px;
  }

  .td-note p,
  .tr-note p,
  .ex-note p {
    min-width: 0;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
  }

  .td .td-note-btn,
  .tr .tr-note-btn,
  .ex .ex-note-btn {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
    min-height: 48px;
  }

  /* boxes whose copy is already wrapped in its own div */
  .dp-note,
  .bt-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  .dp-note-copy,
  .bt-cta-copy {
    align-items: flex-start !important;
  }

  .dp .dp-note-btn,
  .bt .bt-cta-btn {
    justify-content: center;
    width: 100%;
    min-height: 48px;
  }

  .bt-cta p {
    font-size: 16px !important;
  }
}

/* =========================================================================
   TRANSPORT DISTANCE TABLE (phones): each row becomes a compact card
   name on top, distance + time side by side, best option labelled below
   ========================================================================= */
@media (max-width: 767px) {
  .tr-table-wrap {
    padding: 18px 14px !important;
  }

  .tr .tr-table-title {
    align-items: flex-start;
    font-size: 17px !important;
    line-height: 1.35;
  }

  .tr-table-title i {
    margin-top: 3px;
  }

  .tr-table tbody {
    display: grid !important;
    gap: 12px;
  }

  .tr-table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name name"
      "km   time"
      "best best";
    gap: 12px 14px;
    align-items: center;
    padding: 16px !important;
    border: 1px solid rgba(10, 26, 47, 0.08) !important;
    border-radius: 18px;
    background: #f7fafc;
  }

  .tr-table tbody tr > * {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  .tr-table tbody th {
    grid-area: name;
    display: flex !important;
    align-items: center;
    font-size: 16px !important;
  }

  .tr-table .tr-td-km {
    grid-area: km;
  }

  .tr-table .tr-td-time {
    grid-area: time;
    text-align: right;
  }

  .tr-table .tr-td-best {
    grid-area: best;
    padding-top: 12px !important;
    border-top: 1px dashed rgba(10, 26, 47, 0.12) !important;
    color: var(--pt-ink, #0b1f33) !important;
    font-weight: 600;
  }

  .tr-table .tr-td-best::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--pt-slate, #4a5a6b);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }

  .tr-km {
    margin-bottom: 8px !important;
    font-size: 17px;
  }

  .tr-km-bar {
    width: 100% !important;
    max-width: 180px;
  }
}