/* ============ SURCO — Aéreo theme (blues & whites) ============ */
body.theme-air{
  --ink:#0b1f3a;
  --g1:#eef3fa;
  --g2:#d2dcea;
  --g3:#7d8ca6;
  --g4:#3b4a64;
  --neon:#3aa8ff;
}
.theme-air .logo__mark{filter:invert(1) sepia(1) saturate(4) hue-rotate(175deg) brightness(.45)}
.theme-air .nav.on-dark .logo__mark{filter:none}

/* dark (navy) text panels */
.theme-air .tp--dark p{color:#a3b6d3}
.theme-air .tp--dark .list li{border-bottom-color:#1f3a60}
.theme-air .tp--dark .list small{color:#7d8ca6}
.theme-air .tp--dark .more{color:#a3b6d3}
.theme-air .tp--dark .f input,.theme-air .tp--dark .f select{border-bottom-color:#2a4a78}
.theme-air .tp p.disclaimer{border-top-color:#1f3a60}

/* photos: blue duotone */
.theme-air .pp{background:var(--ink)}
.theme-air .pp img{filter:grayscale(1) contrast(1.12) brightness(.92)}
.theme-air .pp::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#1d5fbf;mix-blend-mode:color;
}
.theme-air .pp::after{
  z-index:1;
  background:linear-gradient(180deg, rgba(11,31,58,.55) 0%, rgba(11,31,58,0) 22%, rgba(11,31,58,0) 58%, rgba(11,31,58,.65) 100%);
}
.theme-air .pp--ph::before{display:none}
.theme-air .pp--ph{background:#c9d7ec}
.theme-air .pp--ph::after{background:linear-gradient(180deg, transparent 55%, rgba(11,31,58,.55) 100%)}
.theme-air .ph{background:repeating-linear-gradient(135deg, #d3e0f1 0 12px, #c2d3ea 12px 24px)}
.theme-air .pp__info .meta b{color:#fff}

/* ===== Step 09 — permit request form over a photo panel ===== */
.pp--form{
  display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px);
  padding:calc(var(--pad) + 64px) calc(var(--pad) + 28px) var(--pad) var(--pad);
  color:#fff;
}
.theme-air .pp--form::after{background:rgba(11,31,58,.86)}
.pp--form > .kicker,.pp--form > .pform{position:relative;z-index:2}
.pp--form > .kicker{color:#a3b6d3}
.pform{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(7px,1.35vh,14px) 20px;
  align-content:start;flex:1;min-height:0;
}
.pform .f{grid-column:span 1}
.pform .f:nth-of-type(n+2):nth-of-type(-n+5){grid-column:span 1}
.pform .f--full{grid-column:1 / -1}
.pform > .f:not(.f--full):not(.f--icao){grid-column:span 1}
.pform .label{color:#a3b6d3;font-size:10.5px}
.pform .f input,.pform .f select{
  color:#fff;border-bottom-color:#2f5487;font-size:14px;padding:5px 0;
}
.pform .f select option{color:var(--ink)}
.pform .f input::placeholder{color:rgba(255,255,255,.3);font-family:var(--mono);letter-spacing:.06em}
.pform .f--icao input{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.pform .f:focus-within .label{color:var(--neon)}
.pform .f input:focus,.pform .f select:focus{border-bottom-color:var(--neon)}
.pform__end{grid-column:1 / -1;display:flex;align-items:center;gap:16px;margin-top:4px}
.pform .btn{background:var(--neon);border-color:var(--neon);color:var(--ink)}
.pform .btn:hover{background:#fff;border-color:#fff}
.pform .sent{color:var(--neon)}
.pform__status{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a3b6d3}
.pform__err{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#ffb4a8}
.pform .btn:disabled{opacity:.5;cursor:wait}
.pform .f.is-bad .label{color:#ffb4a8}
.pform .f.is-bad input,.pform .f.is-bad select{border-bottom-color:#ff8a78}
@keyframes pvFlash{0%{box-shadow:0 0 0 0 rgba(58,168,255,.0)}30%{box-shadow:0 0 0 6px rgba(58,168,255,.35)}100%{box-shadow:0 0 0 0 rgba(58,168,255,0)}}
.pform .f.is-flash select{animation:pvFlash .9s ease-out;border-bottom-color:var(--neon)}
.pform .f.is-flash .label{color:var(--neon)}
/* service list rows that preselect the form */
[data-permit]{cursor:pointer}
[data-permit] .a{opacity:.35}
[data-permit].is-picked{transform:translateX(8px)}
[data-permit].is-picked .a{opacity:1;color:var(--neon)}
[data-permit].is-picked b{color:var(--neon)}
.pform.is-sent .sent{display:block}
.pform.is-sent .f,.pform.is-sent .btn{display:none}

@media (max-height:760px){
  .pform .f input,.pform .f select{padding:3px 0;font-size:13px}
  .pform{gap:6px 16px}
}
@media (max-width:1100px){
  .pform{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .pp--form{padding:calc(var(--pad) + 56px) var(--pad) var(--pad)}
  .pp--form > .kicker span{font-size:10px}
  .pform{grid-template-columns:1fr;gap:4px}
  .pform .label{font-size:9px}
  .pform .f input,.pform .f select{font-size:12px;padding:2px 0}
  .pform .btn{padding:9px 12px;font-size:12px}
}