/* DiveScanner - compact mobile search (phones / narrow screens, <=1024px).
 *
 * These are the STYLES for the mobile search that mobile-search.js builds. The
 * script only handles behaviour (collapsing When/Filters, chips, partner card);
 * all presentation lives here in this stylesheet, loaded with <link>.
 *
 * The injected app-view chrome (.ds-sbar/.ds-steps/.ds-chips/.ds-partner/
 * .ds-dest-hint) is hidden by default so it never leaks onto the desktop layout
 * when the window is resized past the breakpoint; the media query below reveals
 * each piece only within the mobile range. Everything else is scoped under the
 * .ds-msearch body class, which the script adds only within that range.
 */
.ds-sbar,.ds-steps,.ds-chips,.ds-partner,.ds-dest-hint{display:none}

@media (max-width:1024px){
  .ds-msearch .search-intro,.ds-msearch .when-tagline,.ds-msearch .dest-coming-label,.ds-msearch .dest-coming,.ds-msearch .label-help{display:none}

  /* compact hero to match the mockup: no eyebrow pill, smaller heading + subtitle */
  .ds-msearch .hero{padding-top:14px}
  .ds-msearch .hero .eyebrow{display:none}
  .ds-msearch .hero h1{font-size:18px;letter-spacing:-.3px;line-height:1.24;max-width:320px;margin-bottom:6px}
  .ds-msearch .hero p{font-size:12px;line-height:1.45;margin-bottom:12px;max-width:320px}

  /* weather: its OWN distinct widget - a teal-glass pill that sits between the
     intro description and the Where/Step 1 header, with space before the steps */
  .ds-msearch .wx{text-align:center;margin:6px auto 20px}
  .ds-msearch .wxcard{display:inline-flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;background:linear-gradient(135deg,rgba(66,245,230,.20),rgba(10,106,138,.26));border:1px solid rgba(66,245,230,.5);box-shadow:0 5px 16px rgba(3,20,35,.22);border-radius:13px;padding:9px 16px}
  .ds-msearch .wx-dest{font-size:12.5px}
  .ds-msearch .wx-temp{font-size:12.5px}
  .ds-msearch .wx-emoji{font-size:15px}
  .ds-msearch .wx-time{font-size:12px}

  .ds-steps{display:flex;justify-content:center;align-items:center;gap:7px;font-size:12px;font-weight:700;color:rgba(255,255,255,.72);margin:0 0 15px}
  .ds-steps b{color:#42f5e6;margin-right:4px;font-weight:800}
  .ds-steps .d{color:#8fe9df}

  .ds-msearch .dest-section .sec-label{font-size:11.5px;margin-bottom:8px}

  /* Where input: keep 16px body (readability / no iOS zoom); placeholder 14px hint */
  .ds-msearch .dest-search-hero .dest-input{font-size:16px;padding-top:13px;padding-bottom:13px}
  /* placeholder matches the When/Filters label weight/colour for a consistent set */
  .ds-msearch .dest-search-hero .dest-input::placeholder{font-size:14px;color:#0b1b2b;opacity:1;font-weight:700}
  /* one consistent expand chevron, pinned to the right end of every field */
  .ds-msearch .dest-search-hero .dest-caret{color:#6b7b8f;font-size:17px}

  .ds-dest-hint{font-size:12px;font-weight:600;color:#6b7b8f;margin:7px 2px 0}
  .ds-dest-hint b{color:#0f9f9b;font-weight:700}

  .ds-msearch .search-btn{font-size:14px;padding:13px}

  .ds-sbar{display:flex;align-items:center;gap:10px;width:100%;background:#fff;border:1px solid #dbe4ec;border-radius:13px;padding:13px 15px;font:inherit;font-size:14px;font-weight:700;color:#0b1b2b;margin:0 0 10px;cursor:pointer;text-align:left;box-shadow:0 3px 10px rgba(3,20,35,.05)}
  .ds-sbar svg{width:18px;height:18px;flex:0 0 auto}
  .ds-sbar-lab{flex:1 1 auto}
  .ds-sbar-val{color:#8a97a6;font-weight:600;font-size:12px}
  .ds-sbar-cnt{background:#e7fff9;color:#0f9f9b;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:20px}
  .ds-sbar-chev{color:#6b7b8f;font-size:17px;transition:transform .15s;margin-left:8px;flex:0 0 auto}
  .ds-sbar.open{border-color:#42f5e6;box-shadow:0 0 0 3px rgba(66,245,230,.2)}
  .ds-sbar.open .ds-sbar-chev{transform:rotate(180deg)}

  .ds-collapse{display:none;margin:0 0 10px}
  .ds-collapse.open{display:block}

  .ds-chips{display:flex;gap:9px;overflow-x:auto;padding:2px 0 4px;margin:2px 0 0;-webkit-overflow-scrolling:touch}
  .ds-chips::-webkit-scrollbar{display:none}
  .ds-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #dbe4ec;border-radius:999px;padding:8px 14px;font:inherit;font-size:12.5px;font-weight:700;color:#0b1b2b;text-decoration:none;cursor:pointer}
  .ds-chip svg{width:17px;height:17px;stroke:#0d3d6b;fill:none;stroke-width:1.7}
  .ds-chip.deal{background:#fff5ea;border-color:#f5d8b3}
  .ds-chip.deal svg{stroke:#e07d10}

  /* Divebooker sits below the featured article now, on WHITE (owner swap) */
  .ds-partner{max-width:780px;margin:14px auto 0;background:#fff;border:1px solid #e2ebf1;border-radius:14px;padding:13px 15px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 20px rgba(6,47,58,.06)}
  /* Featured article takes the top slot, on LIGHT TEAL (owner swap) - mobile only */
  .ds-msearch .hero-teaser{margin:14px auto 0}
  .ds-msearch .fteaser{background:#eafaf8;border-color:#bfe9e3}
  .ds-partner .pl{font-size:10px;font-weight:800;color:#0f9f9b;text-transform:uppercase;letter-spacing:.4px}
  .ds-partner .nm{font-weight:800;color:#0d3d6b;font-size:15px}
  .ds-partner .sub{font-size:11px;color:#5a6b7b}
  .ds-partner .go{margin-left:auto;background:#f08a1e;color:#fff;font-weight:800;font-size:13px;padding:10px 15px;border-radius:10px;white-space:nowrap;text-decoration:none;flex:0 0 auto}
}