/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Base Styles */
html, body {
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', Arial, sans-serif;
    background-color: #ffffff;
    color: #222222;
}

/* Header */
header.site-header {
  background-color: #ffffff;
  /* let padding define the visual height */
  height: auto;                 /* ← remove fixed height */
  min-height: 55px;             /* ← comfortable minimum */
  padding: 12px var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  flex-wrap: wrap;
}

.logo-link {
    display: flex;
    align-items: center;
}

.logo {
    height: 50px;
    transition: transform 0.3s ease;
    max-height: 50px;
    width: auto;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-wrapper {
    flex-shrink: 0;
}

/* Navigation */
.main-nav {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.center-nav,
.right-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 0;
}

.center-nav {
    justify-content: center;
    flex: 1;
    gap: 25px;
}

.right-nav {
    justify-content: flex-end;
    gap: 10px;
}

.center-nav a,
.right-nav a {
    color: #222;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 6px;
    transition: background-color 0.3s, color 0.3s;
}

.center-nav a:hover,
.right-nav a:hover {
    color: #3bb5be;
    background-color: rgba(59, 181, 190, 0.1);
}

.active-link {
    color: #3bb5be;
    background-color: rgba(59, 181, 190, 0.1);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropbtn {
    background: none;
    color: #222;
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

.dropbtn:hover {
    color: #3bb5be;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 35px;
    right: 0;
    background-color: white;
    min-width: 150px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-content a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

.dropdown-content a:hover {
    background-color: #f2f2f2;
}

/* Hamburger */
/* Hide hamburger by default */
.hamburger {
    display: none;
}

/* Show only on mobile */
@media (max-width: 768px) {
    .hamburger {
        display: block;
        font-size: 28px;
        background: transparent;
        border: none;
        color: #222;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
        transition: color 0.3s ease;
    }

    .hamburger:focus,
    .hamburger:active {
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        color: #222 !important; /* keep text black */
    }   
}

.hamburger {
    -webkit-tap-highlight-color: transparent; /* Prevent grey tap background on mobile */
    background-color: transparent !important;
}


/* Mobile Menu */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: #fff;
    position: fixed;
    top: var(--site_hdr_h, 64px);
    left: 0;
    width: 100%;
    z-index: 10050;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    body.menu-open .page-wrapper { pointer-events: none; }
    body.menu-open #mobile-menu   { pointer-events: auto; }
}

.mobile-menu.open {
    display: flex;
}

.mobile-menu a {
    display: block;
    padding: 12px 0;
    font-size: 16px;
    color: #222;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid #eee;
}

.mobile-menu a:hover {
    color: #3bb5be;
}

.menu-separator {
    height: 1px;
    background-color: #3bb5be;
    margin: 16px 0;
}

.mobile-menu-links,
.mobile-menu-bottom {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .main-nav {
        display: none;
    }

    .main-nav.show {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: white;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        height: calc(100vh - 80px);
        padding: 20px;
        overflow-y: auto;
        z-index: 999;
    }

    .center-nav,
    .right-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .right-nav {
        margin-top: auto;
        border-top: 1px solid #eee;
        padding-top: 10px;
    }

}

/* Container */
.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Alerts */
.alert {
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
}

.alert-success {
    background-color: #27ae60;
    color: white;
}

.alert-error {
    background-color: #e74c3c;
    color: white;
}

/* Forms */
.auth-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-form label {
    font-weight: bold;
    margin-bottom: 8px;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
    width: 100%;
    padding: 12px;
    background-color: #ffffff;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    margin-bottom: 10px;
}

.auth-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Buttons */
button,
.btn {
    background-color: #3bb5be;
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
    font-weight: bold;
}

button:hover,
.btn:hover {
    background-color: #319aa1;
}

/* Spinner */
.spinner {
    border: 5px solid #ccc;
    border-top: 5px solid #3bb5be;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Table */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

th, td {
    padding: 12px 15px;
    text-align: center;
}

thead th {
    background-color: #f5f5f5;
    color: #222;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

tbody td {
    border-bottom: 1px solid #eee;
}

table input[type="number"],
table input[type="text"] {
    width: 100%;
    min-width: 140px;
    max-width: 260px;
    padding: 8px;
    background-color: #ffffff;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
}

/* Flight Cards */
.flights-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

@media (max-width: 1200px) {
    .flights-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .flights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.flight-card {
    position: relative;
}

.flight-card input[type="radio"] {
    display: none;
}

.flight-card label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #f9f9f9;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    height: 180px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.flight-card label:hover {
    border-color: #3bb5be;
    background-color: #ffffff;
}

.flight-card input[type="radio"]:checked + label {
    border-color: #3bb5be;
    background-color: #ffffff;
}

.flight-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.flight-info strong {
    font-size: 16px;
}

/* Ticket Cards */
.ticket-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px 30px;
    margin-bottom: 30px;
    overflow: hidden;
    border-left: 6px solid #ccc;
}

.ticket-card.virgin_atlantic {
    border-left-color: #d21f3c;
    background: linear-gradient(to right, #fff 70%, #fbeaec);
}

.ticket-card.british_airways {
    border-left-color: #075aaa;
    background: linear-gradient(to right, #fff 70%, #e3ecf7);
}

.ticket-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ticket-card input[type="number"] {
    width: 80px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    color: #000000;
    padding: 10px 15px;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    z-index: 9999;
    font-size: 14px;
    max-width: 90%;
}

.cookie-banner button {
    background-color: #3bb5be;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: background 0.3s;
}

.cookie-banner button:hover {
    background-color: #319aa1;
}

/* Scroll Lock */
body.menu-open {
  overflow: hidden;
}

.page-wrapper {
    overflow: visible;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Responsive overrides */
@media (max-width: 768px) {
    .flights-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    .flight-card label {
        padding: 12px;
        font-size: 14px;
    }

    .flight-info div {
        font-size: 13px;
    }

    h1, h2 {
        font-size: 20px;
        text-align: center;
    }

    button.btn {
        width: 100%;
        font-size: 16px;
        padding: 14px;
    }
}
@media (max-width: 768px) {
    .flights-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 per row */
        gap: 10px;
    }

    .flight-card label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: #f9f9f9;
        padding: 12px;
        border: 2px solid #ddd;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        height: auto; /* 👈 let it shrink naturally */
        min-height: 100px; /* 👈 optional safety minimum */
    }

    .flight-info {
        gap: 2px;
    }

    .flight-info strong {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .flight-info div {
        font-size: 15px;
    }

    h1, h2 {
        font-size: 18px;
        margin: 10px 0;
        text-align: center;
    }

    .btn {
        width: 100%;
        font-size: 15px;
        padding: 12px;
    }
}
.secondary-btn {
    background-color: #f5f5f5;
    color: #3bb5be;
    border: 2px solid #3bb5be;
    margin-top: 10px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

.secondary-btn:hover {
    background-color: #3bb5be;
    color: white;
}
.secondary-btn {
    display: inline-block;
    background-color: transparent;
    color: #3bb5be;
    border: 2px solid #3bb5be;
    padding: 14px 20px; /* Match .btn */
    border-radius: 6px;
    font-size: 1em; /* Match .btn */
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
    line-height: 1; /* Ensures vertical alignment */
}

.secondary-btn:hover {
    background-color: #3bb5be;
    color: white;
}

/* Mobile override */
@media (max-width: 768px) {
    .secondary-btn {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .ticket-card {
      padding: 15px 20px;
      font-size: 14px;
    }
  
    .ticket-card table {
      font-size: 13px;
      display: block;
      overflow-x: auto;
      width: 100%;
    }
  
    .ticket-card th,
    .ticket-card td {
      padding: 8px;
      min-width: 80px;
    }
  
    .ticket-card form {
      flex-direction: column;
    }
  
    .ticket-card input[type="number"] {
      width: 100%;
      max-width: 100px;
    }
  
    .ticket-card .btn {
      width: 100%;
      margin-top: 10px;
    }
  
    .ticket-card .btn + .btn {
      margin-top: 10px;
    }
  }
  @media (max-width: 768px) {
    .search-action-buttons {
      flex-direction: column;
      align-items: stretch;
    }
  
    .search-action-buttons .btn {
      width: 100%;
    }
  }
  .desktop-only {
    display: block;
}
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
}
.banner-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100vh; /* prevents the image from exceeding viewport height */
    object-fit: cover;
}
.home-banner img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    padding-top: 0px;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.container.page-wrapper {
    flex: 1;
}

.close-history {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 28px;
    font-weight: bold;
    color: #3bb5be;   /* 👈 default: site’s primary colour */
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}
.close-history:hover {
    color: #fff;      /* 👈 white on hover */
}
.btn-primary {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #3bb5be !important;  /* site primary colour */
  color: #fff !important;
  border: 0 !important;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: #329ca3 !important;  /* slightly darker teal */
}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;margin:2rem 0}
@media (max-width:1000px){.hero{grid-template-columns:1fr}}
.hero-left h1{font-size:2.2rem;margin:0 0 .5rem}
.hero-sub{color:#4b5563;margin:0 0 1rem}
.hero-right img{width:100%;height:auto;border-radius:1rem}
.grow{flex:1}

/* Sidebar */
.pv-sidebar{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1rem;
             display:flex; flex-direction:column; gap:1rem; }
.pv-side-title{ font-size:1.1rem; font-weight:700; }
.pv-field{ display:flex; flex-direction:column; gap:.5rem; padding-bottom:.75rem; border-bottom:1px solid #eef2f7; }
.pv-field:last-child{ border-bottom:0; padding-bottom:0; }
.pv-label{ font-size:.95rem; color:#4b5563; font-weight:600; }

/* Stacked radios */
.pv-radio-list label{ display:flex; align-items:center; gap:.55rem; margin:.15rem 0; cursor:pointer; }
.pv-radio-list input{ transform:scale(1.15); }

/* Small heatmap switch */
.pv-switch{ position:relative; display:inline-block; width:38px; height:20px; }
.pv-switch input{ opacity:0; width:0; height:0; }
.pv-slider{ position:absolute; inset:0; cursor:pointer; background:#ccc; border-radius:20px; transition:.3s; }
.pv-slider:before{ content:""; position:absolute; width:14px; height:14px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s; }
.pv-switch input:checked + .pv-slider{ background:#22c55e; }
.pv-switch input:checked + .pv-slider:before{ transform:translateX(18px); }

/* Legend */
.pv-legend{ display:flex; align-items:center; gap:.5rem; }
.pv-gradient{ flex:1; height:12px; border-radius:6px;
  background:linear-gradient(90deg,#22c55e,#facc15,#f97316,#ef4444); }

/* Actions */
.pv-btn{ display:inline-block; padding:.5rem .9rem; border:1px solid #e5e7eb; border-radius:.6rem; text-decoration:none; font-weight:600; }

/* Two calendar columns (Outbound/Inbound) */
/* Make the info banner span both columns of the grid */
#pv-columns .pv-calendar-note {
  grid-column: 1 / -1;
}
.pv-col{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:1rem; }
.pv-col-head{ font-weight:800; margin-bottom:.25rem; }
.pv-col-sub{ display:block; color:#6b7280; font-weight:600; margin-top:.1rem; }

/* Month card */
.pv-month{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:1rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.pv-month-title{ margin:0 0 .5rem; font-size:1.25rem; }

/* Weekday header */
.pv-weekdays{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(7,1fr);
              gap:.6rem; margin:.25rem 0 .6rem; }
.pv-w{ text-align:center; font-weight:600; color:#9ca3af; }

/* Day grid + cells (perfect squares) */
.pv-grid{ display:grid; grid-template-columns:repeat(7, minmax(54px,1fr)); gap:.6rem; }
.pv-cell{ appearance:none; -webkit-appearance:none; border:1px solid #e5e7eb; border-radius:16px;
          background:#f8fafc; display:flex; align-items:center; justify-content:center;
          padding:0; aspect-ratio:1 / 1; font-weight:800; font-size:1.1rem; line-height:1; }
.pv-cell.pv-empty{ background:transparent; border:0; pointer-events:none; }
.pv-cell.pv-none{ background:#cfcfcf !important; border-color:#c7c7c7 !important; color:#333 !important; }

/* Tooltip */
.pv-tip{ position:fixed; pointer-events:none; background:#111827; color:#fff; border-radius:.75rem;
         padding:.6rem .7rem; transition:opacity .12s ease; opacity:0; z-index:60; max-width:280px; }
.pv-tip-inner{ display:flex; flex-direction:column; gap:.35rem; }
.pv-tip-date{ font-weight:700; font-size:.9rem; margin-bottom:.2rem; }
.pv-tip-row{ display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:center; }
.pv-tip-foot{ opacity:.7; font-size:.75rem; margin-top:.2rem; }

/* Container text around calendar (title/sub) */
.pv-title{ font-size:1.8rem; margin:0; }
.pv-sub{ display:block; font-size:.95rem; color:#6b7280; font-weight:500; }

/* Error chip */
.pv-error{ padding:1rem; background:#fef2f2; border:1px solid #fecaca; border-radius:.75rem; }
/* Bar-only heatmap legend */
.pv-legend-only { display:block; }
.pv-legend-only .pv-gradient{
  width:100%;
  height:14px;               /* slightly taller than before */
  border-radius:8px;         /* capsule look */
  background:linear-gradient(90deg,#22c55e,#facc15,#f97316,#ef4444);
  border:1px solid #e5e7eb;
}
/* Bar-only legend with labels under it */
.pv-legend-only { display: block; }
.pv-legend-only .pv-gradient {
  width: 100%;
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, #22c55e, #facc15, #f97316, #ef4444);
  border: 1px solid #e5e7eb;
  margin-bottom: .35rem;
}
.pv-legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;     /* small text */
  color: #6b7280;         /* subtle grey */
  font-weight: 500;
}
/* Search form row */
.pv-hero-row {
  display: flex;
  flex-wrap: wrap;       /* wrap on small screens */
  gap: 0.75rem;
  align-items: flex-end; /* align selects + button baseline */
  margin: 1rem 0;
}

.pv-select {
  flex: 1;               /* allow selects to expand */
}

.pv-search {
  flex: 0 0 auto;         /* keep button fixed size */
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background: #14b8a6;    /* teal */
  border: none;
  color: #fff;
  cursor: pointer;
}

.pv-search:hover {
  background: #0d9488;
}

/* Center all page content area */
.container.page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px var(--page-gutter) 20px;  /* unified gutters */
}

/* Home hero form alignment (Outbound / Inbound / button) */
.pv-hero-row {
  display: flex;
  flex-wrap: wrap;           /* wrap cleanly on small screens */
  gap: 0.75rem;
  align-items: flex-end;     /* baseline alignment of selects/button */
  margin: 1rem 0;
}
.pv-select { flex: 1; }      /* selects stretch evenly */
.pv-search {
  flex: 0 0 auto;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background: #14b8a6;
  border: none;
  color: #fff;
  cursor: pointer;
}
.pv-search:hover { background: #0d9488; }

/* Force equal styling for search dropdowns */
.pv-hero-form select {
  min-width: 220px;      /* same width for both */
  height: 42px;          /* equal height */
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 1rem;
  appearance: none;       /* remove default browser styles */
  -webkit-appearance: none;
  -moz-appearance: none;
}
/* Make outbound & inbound selects equal width in one row */
.pv-hero-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;   /* space between selects */
  flex-wrap: wrap;
}

.pv-hero-row .pv-select {
  flex: 1;   /* each child takes equal width */
}

.pv-hero-row select {
  width: 100%;   /* stretch to fill flex box */
  height: 42px;
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 1rem;
}

/* Make the image fill the width and crop gracefully on very wide screens */
.hero-image{
  display: block;
  width: 100%;
  height: clamp(380px, 42vw, 580px);  /* a touch taller so less crop */
  object-fit: cover;
  object-position: center 20%;        /* show more of the top */
}
@media (max-width: 640px){
  .hero-image{
    object-position: center 30%;      /* mobile: bias top a bit more */
  }
}

/* Overlay search panel (bottom center) */
.hero-search{
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 4vw, 36px);     /* responsive offset from bottom */
  transform: translateX(-50%);
  z-index: 2;

  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(120%) blur(2px);
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 14px 16px;
  width: min(960px, 92vw);
}

/* Inside layout: equal dropdowns + button */
.pv-hero-row{
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;            /* stack on small screens */
  margin: 0;
}

.pv-hero-row .pv-select{ 
  flex: 1 1 200px; 
  min-width: 160px; 
}

.pv-hero-row label{ 
  font-size:.75rem; 
  margin-bottom:.2rem; 
}

.pv-hero-row select{
  width: 100%;
  height: 40px;              /* smaller */
  padding: .4rem .6rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: .9rem;          /* slightly smaller text */
  background: #fff;
}

.pv-swap{
  font-size: 1rem;
  margin: 0 .25rem;
}

.pv-search{
  flex: 0 0 auto;
  height: 40px;              /* match dropdown height */
  padding: 0 .75rem;
  border-radius: 8px;
  border: none;
  background: #10b981;
  color: #fff;
  font-size: .95rem;
  cursor: pointer;
}
.pv-search:hover{ background:#0ea371; }

/* Mobile stacking */
@media (max-width: 640px){
  .pv-hero-row{ gap: .6rem; }
  .pv-swap{ display:none; }
  .pv-search{ width: 100%; }
}

/* Apply hero sizing/focal point whether it's .hero-image or the legacy .home-banner img */
.hero-image,
.home-banner img {
  display: block;
  width: 100%;
  height: clamp(380px, 42vw, 580px);  /* taller = less perceived crop */
  object-fit: cover;
  object-position: center 20%;        /* show a bit more of the top */
}
@media (max-width: 640px){
  .hero-image,
  .home-banner img {
    object-position: center 30%;      /* on mobile, bias top even more */
  }
}
/* One clean hero container with breathing room */
.hero-banner{
  position: relative;
  width: 100%;
  overflow: hidden;
  /* more space above/below the image */
  margin: 8px 0 20px;
  /* small horizontal breathing room on very small screens */
  padding-inline: clamp(0px, 3vw, 16px);
}
/* 1) Kill the collapsed top margin from the first child on every page */
.container.page-wrapper > :first-child {
  margin-top: 0 !important;
}

/* 2) If the first thing is a heading, keep a tiny, consistent gap */
.container.page-wrapper h1:first-child,
.container.page-wrapper .title:first-child {
  margin-top: .25rem !important;
}

/* 3) Home-specific: neutralize big hero/banner top margins */
.home-page .hero,
.home-page .home-banner,
.home-page .hero-banner {
  margin-top: 0 !important;
}

:root { --page-gutter: 28px; }          /* desktop gutter */
@media (max-width: 768px){
  :root { --page-gutter: 16px; }        /* mobile gutter */
}

/* Calendar grid: sidebar (260) + main + mirrored spacer (260) */
.pv-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px; /* ← spacer on the right */
  column-gap: 1.5rem;
  max-width: 1200px;     /* same as your site width */
  margin: 16px auto 0;   /* center the whole grid */
  padding: 0;
  box-sizing: border-box;
  align-items: start;     /* don’t stretch the sidebar */
}

/* Place items explicitly (clarity, future-proof) */
.pv-sidebar { grid-column: 1; }
.pv-main    { grid-column: 2; }
.pv-spacer  { grid-column: 3; }

/* Mobile: stack, hide the spacer */
@media (max-width: 900px) {
  .pv-layout  { grid-template-columns: 1fr; }
  .pv-spacer  { display: none; }
}
/* Centering shell: left spacer | content | right spacer */
.pv-center{
  display:grid;
  grid-template-columns: 1fr min(1200px, 100%) 1fr;
  /* optional page gutters for small screens */
  padding-inline: 16px;
}

/* Put the actual layout in the middle track */
.pv-layout{
  grid-column: 2;
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1.5rem;
}

/* Don’t let long content force overflow (keeps centering true) */
.pv-sidebar, .pv-main{ min-width: 0; }

@media (max-width: 900px){
  .pv-layout{ grid-template-columns: 1fr; }
}
/* Replace the existing .pv-center and .pv-layout styles with these: */

/* Centering container */
.pv-center {
  display: grid;
  grid-template-columns: 1fr min(1200px, 100%) 1fr;
  width: 100%;
  padding-inline: var(--page-gutter);
  box-sizing: border-box;
}

.pv-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 16px auto 0;
  padding: 0;
  box-sizing: border-box;
  align-items: start;
}

.pv-sidebar { grid-column: 1; }
.pv-main    { grid-column: 2; }

/* Remove the .pv-spacer styles entirely */

/* Mobile: stack sidebar and main content */
@media (max-width: 900px) {
  .pv-layout {
    grid-template-columns: 1fr;
  }
  
  .pv-sidebar, .pv-main {
    grid-column: 1;
  }
}

.pv-layout {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  width: 100%;
}

/* Alternatively, try this simpler approach: */
.container.page-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.pv-center {
  padding: 0 var(--page-gutter);
}
/* Sidebar inputs */
.pv-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

/* Info banner between months */
.pv-info-banner {
  margin: 2rem 0;
  padding: 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-align: center;
  font-size: 0.95rem;
  color: #374151;
}
.pv-info-banner a {
  color: #3bb5be;
  font-weight: 600;
  text-decoration: none;
}
.pv-info-banner a:hover {
  text-decoration: underline;
}

/* Sidebar selects */
.pv-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

/* Banner between months */
.pv-info-banner {
  margin: 1rem 0 1.5rem;
  padding: 0.8rem 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-align: center;
  font-size: 0.95rem;
  color: #374151;
}
.pv-info-banner a { color: #3bb5be; font-weight: 600; text-decoration: none; }
.pv-info-banner a:hover { text-decoration: underline; }

/* Avoid awkward breaks if the browser tries to columnize */
.pv-month { break-inside: avoid; }
/* ——— Mobile hero fixes ——— */
@media (max-width: 640px){
  /* Show more of the top of the hero (plane + headline),
     keep it tall enough without cutting off */
  .hero-image{
    height: 72vh;                 /* was taller; this shows more of the image */
    object-position: center 6%;   /* shift focal point toward the top */
  }

  /* Make the overlay panel truly sit on the bottom, tighter padding */
  .hero-search{
    bottom: 8px;                  /* closer to the edge */
    padding: 10px 12px;           /* tighter panel */
    border-radius: 12px;
    width: min(560px, 92vw);
    box-shadow: 0 6px 18px rgba(0,0,0,.16);
  }

  /* Compact row spacing */
  .pv-hero-row{
    gap: 6px;
  }

  /* Compact inputs */
  .pv-hero-row select{
    height: 36px;                 /* smaller controls */
    font-size: .95rem;
    padding: .35rem .55rem;
    border-radius: 10px;
  }

  /* Compact search button */
  .pv-hero-row .pv-search{
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 1rem;
  }

  /* Hide visible labels on mobile to save vertical space
     (the first <option> acts as the placeholder) */
  .pv-hero-row label{ 
    position: absolute;
    width: 1px; height: 1px; 
    padding: 0; margin: -1px; 
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* Tablet landscape (<= 1024px) */
@media (max-width: 1024px) {
  .flights-grid { grid-template-columns: repeat(2, 1fr); }
  .main-nav .center-nav a { padding: 10px 12px; }
}

/* Small phones (<= 576px) */
@media (max-width: 576px) {
  .hero-search .pv-hero-row { flex-direction: column; gap: 8px; }
  .pv-search { width: 100%; }
}
.flight-card label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 14px;           /* ↑ from default for better touch */
  min-height: 120px;
}

.history-btn {
  margin-top: 10px;
}

@media (max-width: 576px) {
  .flight-card label { padding: 16px; }
  .history-btn { width: 100%; }
}
.desktop-only { display: block; }
.mobile-only  { display: none; }

@media (max-width: 1024px) {  /* was 768px */
  .desktop-only { display: none; }
  .mobile-only  { display: block; }
}
@media (max-width: 576px) {
  input[type="text"],
  input[type="number"],
  select {
    max-width: 100%;
  }
}
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

header.site-header {
  padding-top: calc(12px + var(--safe-top));
}

.mobile-menu {
  padding-bottom: calc(20px + var(--safe-bottom));
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
h1 { font-size: clamp(1.4rem, 2.2vw, 2.2rem); }
h2 { font-size: clamp(1.2rem, 1.8vw, 1.6rem); }
p, li, a { font-size: clamp(0.95rem, 1.1vw, 1.05rem); }

.hero-banner { padding-inline: clamp(8px, 3vw, 24px); }
.hero-banner { position: relative; }
.hero-search { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4%; }

/* Calendar layout: stack at 1024px instead of 900px */
@media (max-width: 1024px){
  .pv-layout{ grid-template-columns: 1fr; }
}
/* Base calendar grid (no change for desktop) */
.pv-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(54px, 1fr));
  gap:.6rem;
}

/* Tablet downsizing */
@media (max-width: 1024px){
  .pv-col{ padding: .85rem; }
  .pv-month{ padding: .85rem; border-radius: 14px; }
  .pv-weekdays{ gap:.5rem; }
  .pv-grid{ grid-template-columns: repeat(7, minmax(46px, 1fr)); gap:.5rem; }
  .pv-cell{ border-radius:14px; font-size:1rem; }
}

/* Phone downsizing */
@media (max-width: 768px){
  .pv-col{ padding: .7rem; }
  .pv-month{ padding: .7rem; border-radius: 12px; }
  .pv-weekdays{ gap:.4rem; }
  .pv-grid{ grid-template-columns: repeat(7, minmax(40px, 1fr)); gap:.4rem; }
  .pv-cell{ border-radius:12px; font-size:.95rem; }
}

/* Small phones (narrow viewports) */
@media (max-width: 420px){
  .pv-month{ padding: .6rem; }
  .pv-grid{ grid-template-columns: repeat(7, minmax(34px, 1fr)); gap:.3rem; }
  .pv-cell{ font-size:.9rem; }
}

.pv-main { overflow: visible; }   /* allows full-width on desktop */

/* Scope all calendar sizing safely */
.pv-layout, .pv-main, .pv-month, .pv-grid, .pv-weekdays {
  box-sizing: border-box;
}

/* Let the layout columns shrink instead of pushing the page wider */
.pv-layout {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr); /* sidebar + content */
  gap: 1rem;
}

/* If you use flex anywhere for the two columns, also add: */
.pv-layout > * { min-width: 0; }  /* critical: allows children to shrink */
/* Weekday header lines up with the day grid */
.pv-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(4px, 0.8vw, 10px);
  font-size: clamp(.72rem, .9vw, .9rem);
}

/* Days grid */
.pv-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));   /* ← no fixed min px */
  gap: clamp(4px, 0.8vw, 12px);
}

/* Day cell: keep squares without fixed widths */
.pv-cell {
  aspect-ratio: 1 / 1;                 /* square cells */
  padding: clamp(6px, 1.2vw, 12px);
  border-radius: clamp(8px, 1.2vw, 14px);
  font-size: clamp(.8rem, 1.1vw, 1rem);
  line-height: 1.2;
  min-width: 0;                         /* prevents overflow from inner content */
  overflow: hidden;                     /* keeps long labels/icons inside */
}

/* Month card chrome scales too */
.pv-month {
  padding: clamp(8px, 1.6vw, 16px);
  border-radius: clamp(10px, 1.4vw, 16px);
}
/* iPad & similar */
@media (max-width: 1024px) {
  .pv-layout { grid-template-columns: 1fr; }      /* stack sidebar */
  .pv-month  { padding: clamp(8px, 2vw, 14px); }
  .pv-cell   { padding: clamp(6px, 1.8vw, 10px); }
}

/* Phones */
@media (max-width: 600px) {
  .pv-weekdays { gap: clamp(2px, 1.5vw, 6px); }
  .pv-grid     { gap: clamp(2px, 1.5vw, 6px); }
  .pv-cell     { font-size: clamp(.78rem, 3.5vw, .92rem); }
}
.pv-cell .pv-day-label,
.pv-cell .pv-badge {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* If you have a row of badges: */
.pv-cell .pv-badges {
  display: flex;
  gap: .25rem;
  min-width: 0;
  overflow: hidden;
  flex-wrap: nowrap;
}
/* ============ HOME PAGE ONLY ============ */

/* Kill any fixed/min heights that blow the card up on mobile */
.home-page .hero-search,
.home-page .pv-hero-form,
.home-page .search-card,
.home-page .pv-hero-card {
  height: auto !important;
  min-height: 0 !important;
}

/* Make the search area breathe a bit on small screens */
@media (max-width: 768px) {
  .home-page .hero-banner { padding: 12px; }
  .home-page .pv-hero-form { padding: 12px; }
}

/* Ensure the fields STACK and stretch full width on mobile */
@media (max-width: 768px) {
  /* If your fields are in a row/grid */
  .home-page .pv-hero-row,
  .home-page .pv-search .fields,
  .home-page .pv-search .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
  }

  /* Don’t let layout rules keep half-widths */
  .home-page .pv-hero-row > *,
  .home-page .pv-search .field,
  .home-page .pv-search .field > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  /* Inputs/selects/select2 all full width */
  .home-page .pv-search input[type="text"],
  .home-page .pv-search input[type="number"],
  .home-page .pv-search select,
  .home-page .pv-search .select2,
  .home-page .pv-search .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* In case a “space-between” is pushing the second field right */
  .home-page .pv-search .row,
  .home-page .pv-hero-row {
    justify-content: flex-start !important;
  }

  /* Submit button: full-width and centered label+icon */
  .home-page .pv-search .submit,
  .home-page .pv-search button[type="submit"] {
    width: 100% !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  /* If a mobile rule hid the label previously, re-enable it */
  .home-page .pv-search button .label { display: inline !important; }
}

/* Make sure nothing inside the card forces a wider-than-screen layout */
.home-page .pv-hero-form,
.home-page .search-card {
  box-sizing: border-box;
  max-width: 100%;
}
.home-page .pv-hero-form * { min-width: 0; } /* fixes flex children overflow */

/* === Calendar sidebar: sticky === */
/* Let the grid stop stretching the sidebar (sticky needs the element’s own height) */
.pv-layout { align-items: start; }

/* Make the sidebar stick below your sticky header */
.pv-layout > .pv-sidebar,
.pv-layout .pv-sidebar {
  position: sticky;
  position: -webkit-sticky;      /* Safari */
  top: 84px;                      /* adjust if your header is taller/shorter */
  align-self: start;              /* important in CSS Grid */
  height: fit-content;            /* shrink-wrap the content */
  max-height: calc(100vh - 96px); /* keeps it inside the viewport */
  overflow: auto;                 /* scroll inside when taller than screen */
  z-index: 2;
}

/* Ensure no ancestor blocks sticky with overflow */
.pv-center, .pv-layout, .pv-main { overflow: visible; }

/* === Calendar sidebar — force Roboto everywhere === */
.pv-sidebar,
.pv-sidebar * {
  font-family: 'Roboto', Arial, sans-serif !important;
}

/* Controls + options inside the selects */
.pv-sidebar select,
.pv-sidebar select option,
.pv-sidebar input,
.pv-sidebar textarea,
.pv-sidebar button,
.pv-sidebar label {
  font-family: inherit !important;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* iOS/Safari: remove native styling so custom font is honored */
.pv-sidebar select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 10px;
}

/* Extra safety: some engines read 'option' outside the sidebar scope */
select, option { font-family: 'Roboto', Arial, sans-serif !important; }

/* If you use Select2 anywhere */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-container .select2-selection__rendered,
.select2-dropdown,
.select2-results__option {
  font-family: 'Roboto', Arial, sans-serif !important;
  font-size: 0.95rem;
  line-height: 1.35;
}
/* =======================
   MOBILE CALENDAR LAYOUT
   (≤ 640px)
   ======================= */
@media (max-width: 640px){

  /* 1) Sidebar becomes a sticky top toolbar */
  .pv-sidebar{
    position: sticky;
    top: calc(var(--safe-top, 0px) + 8px); /* sits under your sticky header */
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    overflow-x: auto;         /* allow horizontal scroll if needed */
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }

  /* make each field compact & inline */
  .pv-field{ 
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    border: 0;              /* remove dividers */
  }

  /* labels + controls shrink a touch */
  .pv-label{ font-size: .85rem; margin: 0; }
  .pv-input,
  .pv-sidebar select{
    font-size: .9rem;
    height: 36px;
    padding: 6px 10px;
    min-width: 140px;        /* keeps selects usable but not huge */
    width: auto;
  }

  /* radio group inline */
  .pv-radio-list{ display:flex; align-items:center; gap:10px; }
  .pv-radio-list label{ margin:0; }

  /* primary button compact */
  .pv-sidebar .btn,
  .pv-sidebar button{
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    white-space: nowrap;
  }

  /* optional: tone down title & hide sublines to save space */
  .pv-side-title{ margin: 0 8px 0 0; font-size: .95rem; }
  .pv-col-sub{ display:none; }

  /* 2) Main area under the toolbar (normal flow) */
  .pv-layout{
    grid-template-columns: 1fr;   /* single content column; toolbar sits above */
    gap: 12px;
  }
  .pv-sidebar{ grid-column: 1; }
  .pv-main{ grid-column: 1; }

  /* tighten month cards for small screens */
  .pv-month{
    padding: .65rem;
    border-radius: 12px;
  }
  .pv-weekdays{ gap:.35rem; font-size:.8rem; }
  .pv-grid{
    grid-template-columns: repeat(7, minmax(0,1fr));
    gap: .35rem;
  }
  .pv-cell{
    border-radius: 10px;
    font-size: .9rem;
    padding: 6px;
  }
}
/* =========================
   Extra-compact mobile tune
   ========================= */
@media (max-width: 640px){

  /* Options bar (sidebar → toolbar) */
  .pv-sidebar{
    padding: 8px 10px;         /* tighter */
    gap: 8px;                  /* less spacing */
  }
  .pv-field{
    gap: 4px;
    margin: 0;
  }
  .pv-label{
    font-size: .8rem;
    margin: 0;
  }
  .pv-input,
  .pv-sidebar select{
    height: 32px;              /* was 36–40 */
    min-width: 120px;          /* was 140 */
    padding: 4px 8px;
    font-size: .85rem;
  }
  .pv-radio-list{ gap: 8px; }
  .pv-radio-list input{ transform: scale(1.0); } /* slightly smaller ticks */
  .pv-sidebar .btn,
  .pv-sidebar button{
    height: 34px;
    padding: 0 10px;
    font-size: .9rem;
    border-radius: 8px;
  }

  /* Calendar cells: smaller number inside the circle */
  .pv-weekdays{
    gap: .3rem;
    font-size: .75rem;
  }
  .pv-grid{
    gap: .3rem;
  }
  .pv-cell{
    font-size: clamp(.68rem, 3.2vw, .8rem);  /* ↓ number size */
    font-weight: 700;                         /* a bit lighter for clarity */
    border-radius: 10px;
    padding: 5px;
  }

  /* “To save searches …” banner smaller */
  .pv-info-banner{
    font-size: .85rem;     /* ↓ text size */
    padding: .6rem .8rem;  /* tighter */
    margin: .8rem 0 1rem;
  }
}

/* ——— Calendar: Mobile options toggle / compact sidebar ——— */
@media (max-width: 640px) {
  /* The slim toggle bar */
  .pv-options-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .55rem .75rem;
    margin: 8px 0 10px 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
  }

  /* Sidebar collapsed by default; only show when .is-open */

  .pv-sidebar:not(.is-open) {
    display: none;
  }

  /* When open on mobile, reduce internal spacing to save height */
  .pv-sidebar.is-open {
    padding: .75rem;
    gap: .75rem;
    border-radius: 10px;
  }

  .pv-side-title {
    margin: 0 0 .25rem 0;
    font-size: 1rem;
  }

  .pv-field {
    padding-bottom: .5rem;
    gap: .4rem;
  }

  .pv-label {
    font-size: .9rem;
  }

  .pv-radio-list label {
    font-size: .95rem;
    margin: .1rem 0;
  }

  .pv-switch { transform: scale(0.95); }

  .pv-legend-only .pv-gradient { height: 8px; }
}

/* Consistent select sizing on all breakpoints */
.pv-select {
  width: 100%;
  height: 44px;           /* same on desktop & mobile */
  padding: 8px 12px;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 16px;        /* prevents iOS zoom + matches desktop */
  line-height: 1.2;
}
/* === Calendar dropdown normalization (mobile + desktop) === */
.pv-select {
  width: 100%;
  box-sizing: border-box;
  height: 44px;                  /* identical height everywhere */
  padding: 8px 40px 8px 12px;    /* space for text + arrow */
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background-color: #fff;

  /* remove native/mobile styling differences */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* keep text size consistent & avoid iOS zoom */
  font-size: 16px;
}

/* Hide old IE arrow (harmless elsewhere) */
.pv-select::-ms-expand { display: none; }

/* Consistent down-arrow */
.pv-select {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

/* Focus style (optional but nice) */
.pv-select:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}

/* Make sure the two selects share space neatly on mobile */
@media (max-width: 640px) {
  .pv-route-grid > .pv-control { min-width: 0; }
}
/* === FIX: Equal dropdowns on mobile (calendar Options) === */
@media (max-width: 640px) {
  /* Keep the route picker as a 2-col grid so each cell is 1fr */
  .pv-route-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: end;
  }

  /* Allow the two cells to actually shrink evenly */
  .pv-route-grid .pv-control { min-width: 0; }

  /* Force both selects to fill their cell equally */
  .pv-route-grid .pv-select,
  .pv-route-grid select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;      /* match desktop, pick 36px if you prefer smaller */
    padding: 8px 40px 8px 12px;    /* keep room for the arrow */
    box-sizing: border-box;
  }

  /* Neutralize earlier toolbar rule that set width:auto/min-width:120–140px */
  .pv-sidebar select {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* Mobile-only: compact banner, clamp to 2 lines */
@media (max-width: 640px) {
  #pv-columns .pv-info-banner {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    padding: 0.55rem 0.75rem !important;
    margin: 0.6rem 0 0.8rem !important;

    /* clamp to two lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;                 /* newer spec */
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: normal;           /* allow wrapping */
    overflow-wrap: anywhere;       /* break long words if needed */
  }

  #pv-columns .pv-info-banner a {
    font-size: inherit !important;
  }
}
/* Mobile-only banner: smaller + clamp to 2 lines (wins over everything) */
@media (max-width: 768px) {
  #pv-columns .pv-month + .pv-calendar-note.pv-info-banner {
    font-size: 0.76rem !important;
    line-height: 1.28 !important;
    padding: 0.5rem 0.7rem !important;
    margin: 0.55rem 0 0.75rem !important;

    /* clamp to two lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #pv-columns .pv-month + .pv-calendar-note.pv-info-banner a {
    font-size: inherit !important;
  }
}
/* Calendar mobile: remove any residual top spacing under the header */
@media (max-width: 768px) {
  .pv-center,
  .pv-layout,
  .container.page-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Prevent accidental extra gap on the toolbar itself */
  .pv-sidebar {
    margin-top: 0 !important;
  }
}
/* === Mobile fix: make the entire switch tappable === */
@media (max-width: 768px) {
  /* Increase the hit area a touch */
  .pv-sidebar .pv-switch {
    position: relative;
    display: inline-block;
    width: 44px;   /* was 38 */
    height: 24px;  /* was 20 */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Make the (invisible) checkbox cover the whole control so taps toggle it */
  .pv-sidebar .pv-switch input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    opacity: 0;              /* still invisible */
    z-index: 2;              /* above the slider */
    cursor: pointer;
  }

  /* Let taps pass through the decorative slider to the checkbox */
  .pv-sidebar .pv-switch .pv-slider {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }
}
/* === Mobile: fix Heatmap switch visuals (size + knob travel) === */
@media (max-width: 768px) {
  .pv-sidebar .pv-switch {
    width: 44px;              /* larger pill */
    height: 24px;
  }
  .pv-sidebar .pv-switch .pv-slider {
    border-radius: 24px;      /* fully rounded pill */
  }
  .pv-sidebar .pv-switch .pv-slider:before {
    width: 18px;              /* knob sized for 24px height with 3px padding */
    height: 18px;
    left: 3px;
    bottom: 3px;
  }
  /* When checked, move the knob all the way to the right edge */
  .pv-sidebar .pv-switch input:checked + .pv-slider:before {
    transform: translateX(20px); /* 44 - 18 - (3*2) = 20 */
  }
}
/* Mobile: push Heatmap switch to the right and separate from classes */
@media (max-width: 768px) {
  .pv-heatmap-field {
    margin-left: auto;            /* pushes it to the far right */
    padding-left: 12px;           /* space before the divider */
    border-left: 1px solid #e5e7eb;  /* subtle separation line */
    display: inline-flex;         /* ensure horizontal layout */
    align-items: center;
    gap: 8px;
    flex-shrink: 0;               /* don't collapse on narrow screens */
    white-space: nowrap;          /* keep label + switch on one line */
  }
  .pv-heatmap-field .pv-label {
    margin: 0;                    /* tighter label */
  }
}
/* === CALENDAR ONLY: keep the custom select look inside the sidebar === */
.pv-sidebar .pv-select {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 8px 40px 8px 12px;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background-color: #fff;

  /* custom arrow + neutralize native styling */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.pv-sidebar .pv-select::-ms-expand { display: none; }

/* === HOME PAGE: restore native selects so the hero doesn't go weird === */
.home-page .pv-hero-row select,
.home-page .pv-hero-form select {
  /* bring back native UI */
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;

  /* remove our custom arrow */
  background-image: none !important;

  /* sane sizing for the hero */
  height: 40px !important;
  line-height: normal !important;
  padding: 0.45rem 0.65rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  box-sizing: border-box;
}

/* -------------------------------
   1) Calendar-only custom selects
   ------------------------------- */
.pv-sidebar .pv-select {
  width: 100%;
  height: 44px;
  padding: 8px 40px 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-sizing: border-box;
  background: #fff;

  /* custom arrow + neutralize native look */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.pv-sidebar .pv-select::-ms-expand { display: none; }

/* ---------------------------------
   2) Home hero: restore native UI
   --------------------------------- */
.home-page .pv-hero-row select,
.home-page .pv-hero-form select {
  /* hard reset to native dropdowns */
  appearance: menulist !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;

  /* remove any custom arrow/background */
  background-image: none !important;

  /* sane sizing and look */
  height: 44px !important;
  line-height: normal !important;
  padding: 0.6rem 0.8rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  box-shadow: none !important;

  /* ensure the open dropdown overlays correctly */
  position: relative !important;
  z-index: 1 !important;
}

/* Emergency: keep custom select skin ONLY inside the calendar sidebar */
.pv-sidebar .pv-select {
  width: 100%;
  height: 44px;
  padding: 8px 40px 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.pv-sidebar .pv-select::-ms-expand { display: none; }

/* Reset ANY .pv-select outside the calendar sidebar (e.g., home hero) */
:not(.pv-sidebar) .pv-select {
  appearance: menulist !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  background-image: none !important;
  height: 44px !important;
  padding: 0.6rem 0.8rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
/* ==== HOME HERO (restore native selects + treat .pv-select as wrapper) ==== */
.home-page .pv-hero-row .pv-select {
  /* wrapper only */
  flex: 1 1 200px;
  min-width: 160px;
  padding: 0;
  border: 0;
  background: transparent;
}

.home-page .pv-hero-form select {
  /* bring back the native dropdown */
  appearance: menulist !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;

  background-image: none !important;   /* remove any custom arrow */
  height: 40px !important;
  padding: .4rem .6rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  line-height: normal !important;
}

/* ==== CALENDAR ONLY (skin the select inputs inside the sidebar) ==== */
.pv-sidebar select.pv-select {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 8px 40px 8px 12px;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background-color: #fff;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.pv-sidebar select.pv-select::-ms-expand { display: none; }
/* === HOME HERO ONLY (new wrapper class to avoid .pv-select collisions) === */
.home-page .pv-hero-row .pv-hero-field {
  flex: 1 1 200px;
  min-width: 160px;
  padding: 0;
  border: 0;
  background: transparent;
}

.home-page .pv-hero-row .pv-hero-field label {
  font-size: .75rem;
  margin-bottom: .2rem;
}

.home-page .pv-hero-row .pv-hero-field select {
  width: 100%;
  height: 40px;
  padding: .4rem .6rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: .95rem;

  /* make them native; remove any custom arrow */
  appearance: menulist !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  background-image: none !important;
  line-height: normal !important;
  box-shadow: none !important;
}

@media (max-width: 640px){
  .home-page .pv-hero-row .pv-hero-field select {
    height: 36px;
    padding: .35rem .55rem;
    border-radius: 10px;
  }
}
/* Make the banner sit above any clickable calendar overlay */
.pv-calendar-note { position: relative; z-index: 5; }
.pv-calendar-note a { position: relative; z-index: 6; pointer-events: auto; }

/* Global: fixed header everywhere */
header.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
}
body { padding-top: var(--site_hdr_h, 64px); }
/* --- Where Can I Fly layout --- */
:root {
  /* Adjust this if you have a fixed header; 72px is a good default */
  --wcif-sticky-top: 72px;
}

.wcif-layout {
  display: flex;
  gap: 24px;
}

.wcif-sidebar {
  width: 320px;              /* tweak as you like */
  flex: 0 0 320px;
  position: sticky;
  top: var(--wcif-sticky-top);
  align-self: flex-start;    /* prevents sidebar from stretching */
}

.wcif-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.wcif-sidebar h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.wcif-group { margin-bottom: 14px; }
.wcif-group label { display:block; font-size: 13px; margin-bottom: 6px; font-weight: 600; }
.wcif-group select,
.wcif-group input[type="text"],
.wcif-group input[type="date"],
.wcif-group input[type="number"] {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  background: #fff;
}

.wcif-actions { display:flex; gap:8px; }
.wcif-btn {
  display:inline-block;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
}
.wcif-btn-primary { background:#0d9488; color:#fff; }
.wcif-btn-primary:hover { background:#0d9488; }
.wcif-btn-ghost { background:#fff; border-color:#d1d5db; color:#111827; }
.wcif-btn-ghost:hover { background:#f9fafb; }

.wcif-content { flex: 1 1 auto; min-width: 0; }

.wcif-table-wrap { overflow-x: auto; }
.wcif-table { width:100%; border-collapse: separate; border-spacing: 0; }
.wcif-table thead th {
  text-align: left; padding: 10px; font-weight: 700; background:#f9fafb; border-bottom:1px solid #e5e7eb;
}
.wcif-table tbody td { padding:10px; border-bottom:1px solid #f3f4f6; }
.wcif-table tbody tr:hover { background:#f9fafb; }

.wcif-meta { font-size:12px; color:#6b7280; margin-top:8px; }

/* Mobile */
@media (max-width: 900px) {
  .wcif-layout { flex-direction: column; }
  .wcif-sidebar { position: static; width:auto; flex: 1 1 auto; }
}
/* Keep everything inside the rounded card */
.wcif-card {
  border-radius: 14px;
  overflow: hidden;          /* <- stops children from visually spilling out */
}

/* Ensure form controls never exceed the card width */
.wcif-card * { box-sizing: border-box; }
.wcif-group select,
.wcif-group input[type="text"],
.wcif-group input[type="date"],
.wcif-group input[type="number"] {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* If your inputs have strong box-shadows that get clipped, soften them a bit */
.wcif-group select,
.wcif-group input { box-shadow: 0 0 0 rgba(0,0,0,0); }

/* Results card: clip the scrolling area inside the rounded border */
.wcif-table-clip {
  border-radius: 14px;
  overflow: hidden;          /* clips the sticky header + rows to the card radius */
}
/* Same height for all controls (iOS-friendly) */
.wcif-group select,
.wcif-group input[type="text"],
.wcif-group input[type="date"],
.wcif-group input[type="number"]{
  height: 44px;               /* unify */
  padding: 10px 12px;
  line-height: 1.2;
}

/* ---- Mobile / portrait tablet: grid layout for clean alignment ---- */
@media (max-width: 1024px){
  #wcif-form{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 10px;
    row-gap: 8px;
    align-items: center;       /* vertical alignment */
  }
  /* simple span helpers */
  .col-12{ grid-column: span 12; }
  .col-8 { grid-column: span 8; }
  .col-6 { grid-column: span 6; }
  .col-4 { grid-column: span 4; }
  .col-3 { grid-column: span 3; }
  .col-2 { grid-column: span 2; }

  /* keep labels visually hidden to save space */
  @media (max-width: 1024px){
    .wcif-group > label{
      position:absolute!important; height:1px; width:1px; overflow:hidden;
      clip:rect(1px,1px,1px,1px); white-space:nowrap; padding:0; border:0; margin:-1px;
    }
  }

  /* buttons aligned to the right on their own row */
  .wcif-actions { grid-column: 1 / -1; justify-self: end; margin-top: 2px; }
}
/* Desktop shows full 7 cols; mobile shows compact 5 cols */
.only-mobile { display: none; }
.only-desktop { display: table-cell; }

@media (max-width: 1024px) {
  .only-desktop { display: none !important; }
  .only-mobile  { display: table-cell !important; }

  /* Slightly tighter table on mobile */
  .wcif-table thead th,
  .wcif-table tbody td {
    padding: 8px 10px;
    font-size: 14px;
    vertical-align: middle;
  }
}

/* Tablet PORTRAIT: keep hamburger left, logo truly centered */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {

  /* Keep it one row and vertically centered */
  header.site-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
  }

  /* Cancel absolute centering only on tablet portrait */
  header.site-header .logo-wrapper {
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    text-align: center;
    flex: 1;
  }

  header.site-header .logo-wrapper .logo {
    display: inline-block;
    height: 48px;     /* or whatever your normal mobile size is */
    width: auto;
  }

  .hamburger {
    display: block !important;
    order: -1;
    margin-right: auto;
    align-self: center;
    line-height: 1;
    font-size: 28px;
    background: none;
    border: none;
  }

  /* Hide desktop nav here */
  nav.main-nav { display: none !important; }
}

/* 2) Portrait tablet: center the logo and pin the burger left */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
  .site-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;            /* centers the logo wrapper */
  }
  .logo-wrapper {
    margin: 0 auto;                     /* reinforce centering */
    text-align: center;
  }
  .logo-wrapper .logo {
    display: inline-block;              /* keeps the image centered */
    vertical-align: middle;
  }
  .hamburger {
    position: absolute;
    left: 16px;                         /* burger sits on the left */
    top: 50%;
    transform: translateY(-50%);
  }
}
/* ==== PORTRAIT TABLET FIX (iPad-size) ==== */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Make header a simple 3-col grid: [burger] [logo centered] [spacer] */
  header.site-header {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    justify-items: center;
    margin: 0;
    padding: 8px 16px;                 /* tweak header height */
    min-height: 56px;
    background: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  /* Show burger and pin it left */
  header.site-header .hamburger {
    display: block !important;         /* force visible */
    grid-column: 1;
    justify-self: start;
    margin-left: 8px;
    z-index: 10;
    /* make it obvious & clickable */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: #111;
    padding: 4px 8px;
    cursor: pointer;
  }

  /* Center the logo */
  header.site-header .logo-wrapper {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    margin: 0;
  }
  header.site-header .logo-wrapper .logo {
    display: inline-block;
    vertical-align: middle;
  }

  /* Hide the desktop nav completely so it doesn't create extra height */
  header.site-header nav.main-nav {
    display: none !important;
  }
}

/* Fallback for tablets that don't report orientation consistently */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  header.site-header .hamburger { display: block !important; }
}

/* Ensure no default page top margin causes a white strip */
html, body { margin: 0; }
/* ---- iPad / Portrait tablet: burger on, no whitespace, logo centered ---- */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Use a 3-col grid: [burger] [logo centered] [spacer] */
  header.site-header {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    justify-items: center;
    /* kill any theme spacing creating the white gap */
    margin: 0 !important;
    padding: 8px 16px !important;
    min-height: 56px;
    background: #fff;
    border-bottom: 1px solid #eee;
  }

  /* Ensure the burger is visible and pinned left */
  header.site-header .hamburger {
    display: block !important;
    grid-column: 1;
    justify-self: start;
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: #111;
    padding: 4px 8px;
    cursor: pointer;
  }

  /* Center the logo */
  header.site-header .logo-wrapper {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    margin: 0 !important;
  }
  header.site-header .logo-wrapper .logo { display: inline-block; vertical-align: middle; }

  /* Hide desktop nav so it can't create extra height */
  header.site-header nav.main-nav { display: none !important; }

  /* If the JS offset added top padding for a sticky header, neutralize it here */
  .page-wrapper { padding-top: 0 !important; }
}

/* Fallback in case the device doesn't report orientation reliably */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  header.site-header .hamburger { display: block !important; }
}
/* ===== FINAL OVERRIDES: iPad / portrait tablet (768–1024px) ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Header layout: [burger] [logo centered] [spacer] */
  header.site-header {
    display: grid !important;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    justify-items: center;
    position: fixed !important;     /* keep it fixed at the very top */
    top: 0 !important; left: 0; right: 0;
    z-index: 9999;
    margin: 0 !important;
    padding: 8px 16px !important;   /* remove the extra safe-area top padding */
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }

  /* Show burger & pin left */
  #menu-toggle.hamburger {
    display: block !important;
    grid-column: 1;
    justify-self: start;
    font-size: 28px;
    line-height: 1;
    padding: 4px 8px;
    background: none;
    border: 0;
    cursor: pointer;
    color: #111;
  }

  /* Center the logo */
  header.site-header .logo-wrapper {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    margin: 0 !important;
  }
  header.site-header .logo-wrapper .logo {
    display: inline-block;
    vertical-align: middle;
  }

  /* Hide desktop nav completely so it can't create extra height/whitespace */
  header.site-header nav.main-nav { display: none !important; }

  /* Keep content and drawer aligned with the fixed header height */
  body { padding-top: var(--site_hdr_h, 64px) !important; }
  .mobile-menu { top: var(--site_hdr_h, 64px) !important; }
}

/* Safety net: any tablet in 768–1024 range shows the burger */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #menu-toggle.hamburger { display: block !important; }
}
/* Tablet PORTRAIT should look like mobile */
@media (max-width: 767px),
       (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {

  /* Header: force mobile state */
  .hamburger { display: block !important; }
  .main-nav .center-nav,
  .main-nav .right-nav,
  header.site-header nav.main-nav { display: none !important; }

  /* Home hero form: copy the mobile feel */
  .pv-hero-row { gap: .6rem; }
  .pv-swap { display: none; }          /* hide the ↔ on tablet portrait like mobile */
  .pv-search { width: 100%; }          /* button full-width on a new row */

  /* Keep the same mobile hero image framing */
  .hero-image { height: 72vh; object-position: center 6%; }

  /* Inputs sized like mobile */
  .home-page .pv-hero-row .pv-hero-field select {
    height: 36px;
    padding: .35rem .55rem;
    border-radius: 10px;
  }
}
/* Fix header alignment on phones + tablet portrait */
@media (max-width: 767px),
       (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {

  header.site-header {
    display: flex !important;          /* use flex, not grid */
    align-items: center !important;    /* vertical centering */
    justify-content: center !important;
    position: relative;
  }

  /* Cancel the absolute centering hack */
  header.site-header .logo-wrapper {
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
    text-align: center;
    flex: 1;                           /* take available space */
  }

  /* Logo sits naturally in the middle */
  header.site-header .logo-wrapper .logo {
    height: 48px;                      /* back to normal size */
    width: auto;
  }

  /* Hamburger stays left, in the same line */
  .hamburger {
    order: -1;                         /* push it to the left edge */
    margin-right: auto;
    display: block !important;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
  }

  /* Hide desktop nav in this mode */
  nav.main-nav {
    display: none !important;
  }
}
/* Force logo to true center on phones + tablet portrait */
@media (max-width: 767px),
       (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {

  header.site-header .logo-wrapper {
    position: relative !important;    /* cancel absolute positioning */
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;        /* flex/grid will center it */
    text-align: center;
  }

  header.site-header .logo-wrapper .logo {
    display: block;
    margin: 0 auto;
    height: 48px;                     /* restore normal size */
    width: auto;
  }
}
/* === PHONE ONLY (<= 767px): lock header to one row, centered logo, left hamburger === */
@media (max-width: 767px) {
  header.site-header {
    position: relative !important;
    display: block !important;
    height: calc(56px + var(--safe-top, 0px)) !important;  /* consistent height */
    padding-top: var(--safe-top, 0px) !important;          /* iOS notch */
    box-sizing: content-box !important;
  }

  /* Logo: dead center, regardless of hamburger width */
  header.site-header .logo-wrapper {
    position: absolute !important;
    left: 50% !important;
    top: calc(var(--safe-top, 0px) + 50%) !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    text-align: center !important;
    width: auto !important;
  }
  header.site-header .logo-wrapper .logo {
    display: block !important;
    height: 44px !important;   /* adjust 40–48px to taste */
    width: auto !important;
  }

  /* Hamburger: same line, pinned left, vertically centered */
  header.site-header #menu-toggle.hamburger,
  header.site-header .hamburger {
    display: block !important;
    position: absolute !important;
    left: 12px !important;
    top: calc(var(--safe-top, 0px) + 50%) !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    line-height: 1 !important;
    z-index: 1001 !important;
  }

  /* Hide desktop nav on phones */
  header.site-header nav.main-nav { display: none !important; }
}
/* === PHONE ONLY (<= 767px): one-row header, centered logo, left hamburger === */
@media (max-width: 767px) {
  /* Keep header one line & vertically centered */
  header.site-header {
    position: fixed;              /* you already use fixed later; keep it consistent */
    top: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 56px;             /* consistent bar height */
    padding: calc(12px + var(--safe-top, 0px)) var(--page-gutter) 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background: #fff;
  }

  /* Logo truly centered via flex (no absolute/translate) */
  header.site-header .logo-wrapper {
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    text-align: center !important;
    flex: 1 1 auto !important;   /* lets it sit in the middle */
  }
  header.site-header .logo-wrapper .logo {
    height: 44px;
    width: auto;
    display: inline-block;
  }

  /* Hamburger pinned to the left, same vertical center as logo */
  header.site-header .hamburger {
    display: block !important;
    position: absolute !important;
    left: 16px !important;
    top: calc(var(--safe-top, 0px) + 50%) !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
    font-size: 28px;
    background: none;
    border: 0;
    cursor: pointer;
    z-index: 1001 !important;
  }

  /* Hide desktop nav on phones */
  header.site-header nav.main-nav { display: none !important; }

  /* Keep content below the fixed header */
  body { padding-top: var(--site_hdr_h, 64px) !important; }
}
/* Ensure hamburger is clickable on mobile/tablet */
header.site-header .hamburger {
  width: 44px !important;       /* large tap target */
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 2000 !important;     /* sit above logo */
}
@media (max-width: 767px),
       (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
  .mobile-menu-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 10px 0 6px;
    color: #3bb5be; /* inherit for SVG currentColor */
  }
  .mobile-menu-socials a {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
  }
}
.pv-points-filter { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.pv-points-filter input[type="range"] { width: 260px; }
.pv-hidden-by-price { opacity: .25; filter: grayscale(1); pointer-events:none; }

/* WCIF: keep options panel unstuck on mobile/tablet */
@media (max-width:1024px){
  .wcif-sidebar{ position: static !important; top:auto !important; z-index:auto !important; }
}

/* WCIF mobile: make Points+People and From+To sit on the same line */
@media (max-width:1024px){
  #wcif-form .pp-left, #wcif-form .pp-right,
  #wcif-form .date-left, #wcif-form .date-right{
    grid-column: span 6 !important;
  }
}

/* WCIF mobile: ensure cabin checkboxes and their labels are visible */
@media (max-width:1024px){
  #wcif-form .wcif-cabins label{
    position: static !important; clip:auto !important;
    width:auto !important; height:auto !important; margin:0 !important;
    display:inline-flex !important; align-items:center; gap:6px;
  }
  #wcif-form .wcif-cabins input[type="checkbox"]{
    appearance:auto !important; -webkit-appearance:checkbox !important;
    width:16px !important; height:16px !important; opacity:1 !important;
    position: static !important;
  }
}

/* WCIF results: center the inline ad (mobile & desktop) */
.wcif-table .ad-row td{ text-align:center; }
.wcif-table .ad-slot{ display:flex; justify-content:center; }
.wcif-table .ad-slot img{ max-width:100%; height:auto; }
/* Make the calendar a real 2-col grid on desktop, 1-col on mobile */
#pv-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px; /* tweak to taste */
}
@media (max-width: 640px) {
  #pv-columns { grid-template-columns: 1fr 1fr; }
}

/* Banners occupy a full row spanning both columns */
#pv-columns .pv-calendar-note {
  grid-column: 1 / -1;
  margin: 8px 0; /* optional spacing */
}

/* Normalize spacing for banners inside the calendar grid */
#pv-columns .pv-info-banner { margin: 8px 0; }

/* Calendar row ad slot spans across both columns */
#pv-columns .pv-calendar-ad {
  grid-column: 1 / -1;
  margin: 8px 0;                 /* match banner spacing */
  display: block;
}
/* Center ad content inside the slot (img/iframe/etc.) */
#pv-columns .pv-calendar-ad, 
#pv-columns .pv-calendar-ad .pv-ad-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Calendar ads: use the same .ad-slot structure WCIF uses */
#pv-columns .pv-calendar-ad .ad-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#pv-columns .pv-calendar-ad .ad-slot img,
#pv-columns .pv-calendar-ad .ad-slot picture,
#pv-columns .pv-calendar-ad .ad-slot iframe {
  max-width: 100%;
  height: auto;
}

/* Keep banners and ads above any overlay layers (e.g., tooltips) */
#pv-columns .pv-calendar-ad { position: relative; z-index: 5; }

/* Toggle ad variants by viewport */
@media (max-width: 640px) {
  .pv-calendar-ad.pv-ad--desktop { display: none !important; }
  .pv-calendar-ad.pv-ad--mobile  { display: flex !important; }
}
@media (min-width: 641px) {
  .pv-calendar-ad.pv-ad--desktop { display: flex !important; }
  .pv-calendar-ad.pv-ad--mobile  { display: none !important; }
}

/* === Alexandro: minor homepage hero tune === */
.hero-banner .pv-hero-row .pv-hero-field select {
  background-color: rgba(255,255,255,0.96);
  backdrop-filter: blur(4px);
}
/* Amazon light banner skin (728x90) */
.pv-ad-wrap {
  width: 728px;
  height: 90px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.pv-ad-wrap img.pv-ad-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

/* Soft left-to-right fade for copy area */
.pv-ad-gradient {
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 62%;
  background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 60%, rgba(255,255,255,0) 100%);
}

.pv-ad-copy {
  position: absolute; left: 14px; right: 190px; top: 10px; bottom: 10px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 2px;
}

.pv-ad-title {
  font-size: 16px;
  line-height: 1.15;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: .1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pv-ad-sub {
  font-size: 12px; color: #4b5563;
}

.pv-ad-cta {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  background: #3bb5be; color: #fff; border-radius: 999px;
  padding: 8px 14px; font-weight: 700; font-size: 13px; text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.08);
}

.pv-amz-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #111827; border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px; padding: 4px 10px; font-weight: 600; font-size: 12px;
  position: absolute; right: 10px; bottom: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.pv-amz-smile {
  width: 16px; height: 16px; display: inline-block; border-radius: 2px;
  background: linear-gradient(#232f3e, #232f3e) padding-box, linear-gradient(#232f3e, #232f3e) border-box;
  position: relative;
}
.pv-amz-smile::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 3px; height: 2px;
  background: #ff9900; border-radius: 2px;
}

/* Generic ad slot */
.ad-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px auto;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;           /* light background as requested */
}

/* Use the JSON w/h to size the slot */
.ad-slot--728x90 { max-width: 728px; width: 100%; height: 90px; }
.ad-slot--468x60 { max-width: 468px; width: 100%; height: 60px; }
.ad-slot--320x50 { max-width: 320px; width: 100%; height: 50px; }

/* Make any ad image scale to the slot, never exceed it */
.ad-slot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;  /* keep aspect ratio without cropping */
  display: block;
}

/* Optional: shrink tall banners slightly on small screens */
@media (max-width: 768px) {
  .ad-slot--728x90 { height: 60px; }
}