/* Homepage and reusable search controls, measured against Google Flights.
   Keep the existing Travelvoid illustration; fonts are supplied by the bundle. */
.topbar{height:64px;border-bottom:1px solid #dadce0;box-shadow:none;background:#fff;font-family:Roboto,Arial,sans-serif}
.topbar nav a{font-size:14px;font-weight:500;min-height:36px;padding:7px 15px;border-color:#dadce0}
.topbar .icon-button{width:40px;height:40px}
.hero{height:296px;width:100%;max-width:1280px;margin:0 auto;padding:0 0 20px;align-items:flex-end;justify-content:center}
.hero-image{background-position:center 42%;opacity:1}
.hero h1{font-family:"Google Sans",Arial,sans-serif;font-size:56px;line-height:64px;font-weight:400;letter-spacing:-1px;color:#202124;margin:0}
.search-card{width:min(992px,calc(100% - 48px));min-height:156px;margin:32px auto 0;padding:8px 16px 36px;border:0;border-radius:8px;background:#fff;box-shadow:0 2px 6px rgba(32,33,36,.28);font-family:Roboto,Arial,sans-serif;color:#202124;position:relative;z-index:8}
.search-card button,.search-card input,.search-card select{font-family:Roboto,Arial,sans-serif}
.search-card button:focus-visible,.search-card select:focus-visible{outline:2px solid #1a73e8;outline-offset:2px}
.search-options{min-height:36px;height:36px;padding:0;margin:0 0 12px;gap:12px;justify-content:flex-start;font-size:14px;line-height:20px}
.inline-control,.inline-select{height:36px;gap:8px;padding:0 8px;border-radius:4px;color:#3c4043;font-size:14px;font-weight:400;line-height:20px;background:#fff}
.inline-control:hover,.inline-select:hover,.inline-select:focus-within{background:#f1f3f4}
.inline-select select{font-size:14px;font-weight:400;line-height:20px;cursor:pointer;padding-right:20px;background-size:4px 4px;background-position:calc(100% - 5px) 49%,calc(100% - 1px) 49%}
.inline-select>svg,.inline-control>svg{color:#5f6368;flex-shrink:0}
.search-grid{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:16px;align-items:start}
.route-fields{display:grid;grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr);align-items:center;min-width:0}
.airport-field{height:56px;min-width:0;gap:12px;padding:0 14px;border:1px solid #dadce0;border-radius:4px;background:#fff;color:#5f6368}
.airport-field>svg{flex-shrink:0;width:20px;height:20px}
.airport-field input{height:52px;font-family:Roboto,Arial,sans-serif;font-size:16px;font-weight:400;line-height:24px;padding:0;color:#202124}
.airport-field:hover,.date-fields:hover,.multi-city-date:hover{border-color:#bdc1c6}
.airport-field:focus-within{border-color:#1a73e8;box-shadow:inset 0 0 0 1px #1a73e8}
.swap-button{width:36px;height:36px;min-width:36px;margin-left:-13px;border:1px solid #dadce0;border-radius:50%;background:#fff;color:#5f6368;position:relative;z-index:2;padding:0}
.swap-button:hover{background:#f8f9fa}
.date-fields{display:grid;grid-template-columns:1fr 1fr;min-width:0;height:56px;border:1px solid #dadce0;border-radius:4px;background:#fff}
.date-fields:not(:has(>.date-trigger:nth-of-type(2))){grid-template-columns:1fr}
.date-trigger{height:54px;min-width:0;gap:12px;padding:0 16px;color:#202124;font-size:16px;font-weight:400;line-height:24px;border-radius:3px;text-align:left}
.date-trigger>svg{flex-shrink:0;color:#5f6368;width:20px;height:20px}
.date-trigger span{display:block;min-width:0;font-size:16px;line-height:24px;white-space:nowrap}
.date-trigger small{display:none}
.date-trigger+.date-trigger{border-left:1px solid #dadce0;border-radius:0 3px 3px 0}
.date-trigger:hover{background:#f8f9fa}
.date-trigger.active{background:#fff;box-shadow:inset 0 0 0 2px #1a73e8}
.search-button{height:40px;min-width:106px;bottom:-20px;left:50%;right:auto;transform:translateX(-50%);border:0;border-radius:20px;padding:0 22px;gap:8px;background:#1a73e8;color:#fff;font-size:14px;line-height:20px;font-weight:500;box-shadow:0 1px 3px rgba(60,64,67,.3)}
.search-button:hover:not(:disabled){background:#1765cc;box-shadow:0 2px 4px rgba(60,64,67,.3)}
.search-button:disabled{background:#7aa7e3;min-width:180px}
.search-button>svg{width:18px;height:18px}
.form-error{margin:12px 0 0;gap:8px;line-height:20px;font-size:13px}
.form-error button{background:transparent;color:#1a73e8;border:0;border-radius:4px;padding:4px 8px;font-size:13px;white-space:nowrap}

/* Suggestions and passenger controls remain the real, interactive controls. */
.airport-menu{top:59px;left:0;width:min(432px,calc(100vw - 48px));border:0;border-radius:8px;background:#fff;box-shadow:0 4px 16px rgba(60,64,67,.25);z-index:70}
.airport-menu-title{min-height:48px;padding:12px 16px;font-size:14px;line-height:20px;color:#5f6368;border-bottom:1px solid #e8eaed}
.airport-menu button{min-height:56px;padding:10px 16px;grid-template-columns:48px minmax(0,1fr);gap:8px;background:#fff}
.airport-menu button:hover{background:#f1f3f4}
.airport-code{color:#5f6368;font-size:13px;line-height:20px;font-weight:500}
.airport-menu strong{font-size:16px;line-height:22px;font-weight:400}
.airport-menu small{font-size:12px;line-height:18px;color:#70757a;margin-top:2px}
.airport-menu .menu-close{min-height:40px;font-size:13px;padding:8px 16px;border-top:1px solid #e8eaed}
.passenger-popover{top:40px;left:0;width:330px;padding:20px;border:0;border-radius:8px;background:#fff;box-shadow:0 4px 16px rgba(60,64,67,.25);z-index:70}
.passenger-row{min-height:62px;padding:10px 0}
.passenger-row strong{font-size:16px;line-height:22px;font-weight:400;color:#202124}
.passenger-row small{font-size:12px;line-height:18px;margin-top:2px;color:#70757a}
.passenger-row div{gap:16px}
.passenger-row b{font-size:16px;font-weight:400;min-width:10px;text-align:center}
.passenger-row button{width:32px;height:32px;border:1px solid #dadce0;border-radius:50%;background:#fff;color:#1a73e8;font-size:21px;line-height:28px;font-weight:400;padding:0}
.passenger-row button:hover:not(:disabled){background:#e8f0fe}
.passenger-row button:disabled{opacity:1;border-color:#e8eaed;color:#bdc1c6}
.passenger-hint{display:block;margin-top:8px;font-size:12px;line-height:18px;color:#70757a}
.done-button{min-height:36px;margin-top:12px;padding:7px 20px;border-radius:18px;background:#fff;color:#1a73e8;font-size:14px;line-height:20px;font-weight:500}
.done-button:hover{background:#f1f6fe}

/* Flat multi-city rows use the same field rhythm, including the KL date popup. */
.multi-city-list{display:grid;gap:16px}
.multi-city-leg{position:relative;background:transparent;border:0;border-radius:0;padding:0;min-width:0}
.multi-city-leg-head{position:absolute;top:10px;right:0;height:36px;display:flex;align-items:center;margin:0;z-index:1}
.multi-city-leg-head>strong{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.multi-city-leg:has(.remove-leg){padding-right:52px}
.multi-city-route{display:grid;grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 386px;gap:0;align-items:center;min-width:0}
.multi-city-route .airport-field{height:56px}
.multi-city-route>.multi-city-date,.tv-multi-date-wrap{margin-left:16px;min-width:0}
.tv-multi-date-wrap{position:relative}
.multi-city-date{display:flex;align-items:center;gap:12px;height:56px;min-width:0;width:auto;padding:0 16px;border:1px solid #dadce0;border-radius:4px;background:#fff;color:#202124;font-size:16px;line-height:24px;text-align:left}
.tv-multi-date-wrap>.multi-city-date{width:100%;margin:0}
.multi-city-date>svg{color:#5f6368;flex-shrink:0;width:20px;height:20px}
.multi-city-date span{display:block;min-width:0;font-size:16px;line-height:24px;white-space:nowrap}
.multi-city-date small{display:none}
.multi-city-date input{font-size:16px;line-height:24px;font-weight:400}
.multi-city-date:focus-visible{border-color:#1a73e8;outline:1px solid #1a73e8;outline-offset:0}
.remove-leg{font-size:12px;font-weight:400;line-height:20px;min-height:32px;padding:6px 2px;border-radius:4px;color:#1a73e8}
.add-leg{justify-self:start;min-height:32px;margin:0;border:1px solid #dadce0;border-radius:16px;padding:5px 14px;color:#1a73e8;background:#fff;font-size:14px;line-height:20px;font-weight:500}
.add-leg:hover:not(:disabled){background:#f6f9fe}
.add-leg:disabled{color:#9aa0a6;border-color:#e8eaed;cursor:default}

/* No overlay/backdrop is introduced. Position the popup by the card's right edge. */
.date-picker{position:fixed;top:clamp(80px,calc(100dvh - 480px),136px);right:max(16px,calc((100vw - 992px)/2 - 2px));left:auto;bottom:auto;width:min(788px,calc(100vw - 32px));max-height:calc(100dvh - 104px);padding:24px;border:1px solid #dadce0;border-radius:8px;background:#fff;box-shadow:0 4px 16px rgba(60,64,67,.28);overflow:auto;z-index:75;font-family:Roboto,Arial,sans-serif}
.date-picker-head{display:flex;align-items:center;justify-content:space-between;min-height:40px;margin:0 0 16px;gap:16px}
.date-picker-head strong{font-size:14px;line-height:20px;font-weight:500;color:#202124}
.date-picker-head small{font-size:14px;line-height:20px;color:#5f6368;margin-top:2px}
.calendar-nav{display:flex;gap:8px}
.calendar-nav button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#fff;color:#5f6368;font-family:Arial,sans-serif;font-size:26px;line-height:30px;font-weight:400}
.calendar-nav button:hover{background:#f1f3f4}
.calendar-months{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.calendar-month{min-width:0}
.calendar-month h3{font-family:Roboto,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-align:center;margin:0 0 12px;color:#202124}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;text-align:center}
.calendar-weekdays{margin-bottom:8px}
.calendar-weekdays span{font-size:12px;line-height:16px;font-weight:400;color:#70757a}
.calendar-day{display:grid;place-items:center;justify-self:center;align-self:center;width:40px;height:40px;min-width:0;aspect-ratio:1;border:0;border-radius:50%;padding:0;background:#fff;color:#202124;font-size:14px;line-height:20px;font-weight:400}
.calendar-day:not(:disabled):hover{background:#e8f0fe;color:#174ea6}
.calendar-day.selected,.calendar-day.selected:not(:disabled):hover{background:#1a73e8;color:#fff}
.calendar-day:disabled{color:#bdc1c6;background:#fff;cursor:default}
.date-picker-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid #e8eaed}
.date-picker-foot button{min-height:36px;border:0;border-radius:18px;padding:7px 16px;background:#fff;color:#1a73e8;font-size:14px;line-height:20px;font-weight:500}
.date-picker-foot button:hover{background:#f1f6fe}
.date-picker-foot .date-done{min-width:80px;background:#1a73e8;color:#fff}
.date-picker-foot .date-done:hover{background:#1765cc}

.landing-main{width:min(992px,calc(100% - 48px));margin:60px auto 72px;font-family:Roboto,Arial,sans-serif}
.landing-main h2,.landing-main h3{font-family:"Google Sans",Arial,sans-serif;font-weight:500;color:#202124}
.landing-main h2{font-size:24px;line-height:32px;letter-spacing:0}
.landing-main p{font-size:14px;line-height:22px}
.deal-banner{border-radius:12px;padding:20px 24px;background:#e8f0fe}
.deal-banner h2{font-size:18px;line-height:24px;margin-bottom:4px}
.deal-banner a{font-size:14px;line-height:20px;font-weight:500;padding:8px 20px;border-radius:18px;border-color:#dadce0}
.route-section,.tools-section{margin-top:40px}
.route-section h2,.tools-section h2{font-size:22px;line-height:30px;margin-bottom:20px;letter-spacing:0}
.quick-routes,.tool-grid article{border-color:#dadce0;border-radius:8px}
.tool-grid h3{font-size:16px;line-height:24px}

/* The same WL form sits above results; it does not bring the homepage card. */
.tv-google-search{width:100%;max-width:1120px;margin:8px auto 20px;padding:0 0 42px;font-family:Roboto,Arial,sans-serif;position:relative;z-index:22}
.tv-google-search .search-card{width:100%;max-width:none;min-height:126px;margin:0;padding:16px 20px 46px;border:1px solid #dadce0;border-radius:24px;box-shadow:0 2px 8px rgba(60,64,67,.18);background:#fff;z-index:auto}
.tv-google-search .search-options{margin-bottom:14px}
.tv-google-search .search-grid{grid-template-columns:minmax(0,1fr) 370px}
.tv-google-search .search-button{height:40px;min-width:112px;left:auto;right:22px;bottom:-20px;transform:none;border-radius:20px;padding:0 20px;box-shadow:0 2px 5px rgba(60,64,67,.28);font-size:14px;line-height:20px}
.tv-google-search .search-button:disabled{min-width:165px}
.tv-google-search .search-button>svg{width:16px;height:16px}
.tv-google-search .date-picker{right:max(16px,calc((100vw - 1024px)/2 - 2px))}

@media(max-width:1050px){
  .search-grid,.tv-google-search .search-grid{grid-template-columns:minmax(0,1fr) minmax(278px,38.55%)}
  .multi-city-route{grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) calc(38.55% + 16px)}
  .search-options{gap:8px}
  .tv-google-search{width:100%}
}
@media(max-width:760px){
  .topbar{height:64px;padding-inline:16px}
  .hero{height:214px;padding-bottom:18px}
  .hero h1{font-size:44px;line-height:52px;letter-spacing:-.5px}
  .search-card{width:calc(100% - 32px);min-height:216px;margin:24px auto 0;padding:8px 16px 36px;border:0;border-radius:8px}
  .search-options{justify-content:flex-start;gap:8px;margin-bottom:12px;padding:0;height:36px}
  .inline-select,.inline-control{padding:0 6px;font-size:14px}
  .search-grid,.tv-google-search .search-grid{grid-template-columns:1fr;gap:12px}
  .route-fields{grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr)}
  .airport-field,.multi-city-route .airport-field{height:56px;padding-inline:12px;gap:10px}
  .airport-field input{font-size:16px;height:52px}
  .swap-button{width:36px;height:36px;margin-left:-13px}
  .date-trigger{height:54px;padding-inline:16px}
  .date-fields{height:56px}
  .multi-city-list{gap:16px}
  .multi-city-route{grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr);gap:0}
  .multi-city-route>.multi-city-date,.multi-city-route>.tv-multi-date-wrap{grid-column:1/-1;margin:12px 0 0}
  .multi-city-leg:has(.remove-leg){padding-right:0;padding-bottom:34px}
  .multi-city-leg-head{top:auto;bottom:0;right:0;height:32px}
  .multi-city-date{height:56px;padding-inline:16px}
  .airport-menu{position:fixed;top:96px;left:16px;right:16px;width:auto;max-height:calc(100dvh - 120px);overflow:auto}
  .passenger-popover{position:fixed;top:96px;left:16px;right:auto;width:min(330px,calc(100vw - 32px));max-height:calc(100dvh - 120px);overflow:auto}
  .date-picker,.tv-google-search .date-picker{position:fixed;top:80px;right:16px;left:16px;width:auto;max-height:calc(100dvh - 96px);padding:20px;border-radius:8px}
  .calendar-months{grid-template-columns:1fr;gap:28px}
  .calendar-month h3{font-size:15px}
  .calendar-day{width:40px;height:40px;font-size:14px}
  .date-picker-head{position:sticky;top:-20px;background:#fff;z-index:1;padding-top:2px;padding-bottom:8px;margin-bottom:16px}
  .date-picker-foot{position:sticky;bottom:-20px;padding-bottom:4px;background:#fff;z-index:1;gap:8px}
  .date-picker-foot button{font-size:12px;padding-inline:12px}
  .date-picker-foot .date-done{min-width:72px;font-size:14px}
  .landing-main{width:calc(100% - 32px);margin-top:60px}
  .deal-banner{padding:20px 16px}
  .route-section h2,.tools-section h2{font-size:22px;line-height:30px}
  .tv-google-search{width:100%;margin:8px auto 16px;padding-bottom:38px}
  .tv-google-search .search-card{min-height:172px;padding:12px 12px 46px;border-radius:18px}
  .tv-google-search .search-options{margin-bottom:12px}
}
@media(max-width:440px){
  .topbar{padding-inline:12px;gap:8px}
  .hero{height:174px;padding-bottom:18px}
  .hero h1{font-size:40px;line-height:48px}
  .search-card{width:calc(100% - 24px);padding-inline:12px}
  .search-options{gap:5px}
  .inline-select,.inline-control{padding-inline:4px;gap:6px;font-size:13px}
  .inline-select select{font-size:13px;padding-right:16px}
  .inline-select>svg,.inline-control>svg{width:16px;height:16px}
  .airport-field,.multi-city-route .airport-field{padding-inline:10px;gap:8px}
  .airport-field>svg{width:18px;height:18px}
  .airport-field input{font-size:16px}
  .date-trigger{padding-inline:12px;gap:10px}
  .date-trigger span{font-size:16px}
  .date-picker,.tv-google-search .date-picker{left:12px;right:12px;padding:16px;max-height:calc(100dvh - 96px)}
  .date-picker-head{top:-16px}
  .date-picker-foot{bottom:-16px;padding-bottom:2px}
  .calendar-months{gap:24px}
  .calendar-day{width:40px;height:40px}
  .airport-menu{left:12px;right:12px}
  .passenger-popover{left:12px;width:calc(100vw - 24px)}
  .landing-main{width:calc(100% - 24px)}
  .tv-google-search{width:100%}
}
@media(max-width:360px){
  .calendar-day{width:36px;height:36px}
  .inline-select select{font-size:12px}
  .inline-select,.inline-control{gap:4px;padding-inline:2px}
  .search-options{gap:3px}
  .airport-field{gap:6px;padding-inline:8px}
  .airport-field>svg{width:16px;height:16px}
  .date-picker-foot button:first-child{max-width:200px;white-space:normal;text-align:left}
}