/* The visitor's airport and the flight search (inc/my-airport.php) on the hubs and in the front page's utility band.
   The airport row stays hidden (no space taken) until assets/js/my-airport.js fills it; its code sits on the
   board's split-flap card (.flap, main.css), a size smaller. The search reuses the field look of the airline search. */

/* "Uw luchthaven: [AMS] Schiphol" with that airport's pages */
.my-airport{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center;margin:0 0 24px;padding:12px 14px 12px 12px;background:var(--air);border-radius:var(--radius)}
.my-airport[hidden]{display:none}
.my-airport-code{--flap-w:52px;--flap-h:44px;--flap-fs:1rem;grid-row:1/3}
.my-airport-name{margin:0;font-size:.9375rem;line-height:1.35;color:var(--muted)}
.my-airport-name strong{font:800 1.125rem/1.2 var(--display);color:var(--deep)}
.my-airport-links{grid-column:2;display:flex;flex-wrap:wrap;gap:0 18px;margin:0;padding:0;list-style:none}
.my-airport-links a{display:inline-flex;align-items:center;min-height:36px;font-weight:700}
.my-airport-forget{grid-row:1/3;grid-column:3;min-height:44px;padding:0 14px;font:700 .9375rem/1 var(--font);color:var(--blue);background:#fff;border:1px solid var(--line);border-radius:999px;cursor:pointer}
.my-airport-forget:hover{border-color:var(--blue);color:var(--blue-d)}
@media (max-width:620px){
  .my-airport{grid-template-columns:auto minmax(0,1fr);column-gap:12px}
  .my-airport-code{--flap-w:42px;--flap-h:34px;--flap-fs:.8125rem;--flap-r:8px;grid-row:auto}
  .my-airport-links,.my-airport-forget{grid-column:1/-1}
  .my-airport-forget{grid-row:auto;justify-self:start;margin-top:4px}
}
.utility .my-airport{margin:0 0 24px}

/* "Zoek uw vlucht": term, airport, button; stacked on a phone */
.flight-find{margin:0 0 32px;padding:18px 20px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.flight-find-title{margin:0 0 12px;font-size:1.3125rem}
.flight-find-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px) auto;gap:12px;align-items:end}
.flight-find label{display:block;margin:0 0 6px;font-weight:700;color:var(--deep)}
.flight-find :is(input,select){width:100%;height:48px;padding:10px 14px;font:inherit;color:var(--ink);background:#fff;border:1px solid #7A8BA1;border-radius:10px}
.flight-find input{padding-left:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B80' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") no-repeat 14px 50%/20px 20px;-webkit-appearance:none;appearance:none}
.flight-find input::placeholder{color:var(--muted);opacity:1}
.flight-find :is(input,select):focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.flight-find .btn{min-height:48px}
.flight-find-note{margin:10px 0 0;font-size:.9375rem;color:var(--muted)}
@media (max-width:760px){
  .flight-find{padding:16px}
  .flight-find-row{grid-template-columns:minmax(0,1fr)}
  .flight-find .btn{width:100%}
}