/* ClickAndFly / BACC Travel — Formulário de Cotação
   Reaproveita as custom properties já definidas em
   https://bacctravel.com/css/styles.css (--sun, --ocean, --teal, --ink,
   --sand, --line, --stone, --display, --body, --mono). Os fallbacks só
   entram em ação se essas variáveis não existirem por algum motivo. */

#cf-quote-wrap, #cf-quote-wrap * { box-sizing: border-box; }

#cf-quote-wrap {
  --cf-sun:   var(--sun, #FFB020);
  --cf-sund:  var(--sun-deep, #F59300);
  --cf-ocean: var(--ocean, #0B302E);
  --cf-teal:  var(--teal, #0E6F68);
  --cf-ink:   var(--ink, #08201E);
  --cf-sand:  var(--sand, #FAF6EC);
  --cf-line:  var(--line, rgba(8,32,30,.12));
  --cf-stone: var(--stone, #5C6B68);
  font-family: var(--body, system-ui, sans-serif);
  color: var(--cf-ink);
  width: 100%;
  text-align: left;
}

#cf-quote-wrap .cf-langs {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--mono, ui-monospace, monospace);
}
#cf-quote-wrap .cf-lang-sep { color: var(--cf-line); }
#cf-quote-wrap .cf-lang-btn {
  background: transparent;
  border: none;
  color: var(--cf-stone);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  cursor: pointer;
  padding: 2px 4px;
}
#cf-quote-wrap .cf-lang-btn.is-active { color: var(--cf-ink); border-bottom: 2px solid var(--cf-sun); }

/* Tipo de viagem — pílulas */
#cf-quote-wrap .cf-triptype { display: flex; gap: 8px; margin-bottom: 16px; }
#cf-quote-wrap .cf-radio-trip { padding: 7px 16px; font-size: .85rem; font-weight: 600; }

#cf-quote-wrap .cf-field { margin-bottom: 16px; position: relative; }
#cf-quote-wrap .cf-field label {
  display: block;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cf-stone);
  margin-bottom: 8px;
}
#cf-quote-wrap .cf-optional { text-transform: none; font-size: .65rem; letter-spacing: 0; opacity: .8; }

#cf-quote-wrap .cf-input {
  width: 100%;
  background: var(--cf-sand);
  border: 1px solid var(--cf-line);
  border-radius: 10px;
  padding: 13px 15px;
  color: var(--cf-ink);
  font-family: var(--body, inherit);
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
#cf-quote-wrap .cf-field-icon .cf-input { padding-left: 36px; }
#cf-quote-wrap .cf-field-icon .cf-input-icon {
  position: absolute;
  left: 11px;
  top: 38px;
  font-size: .95rem;
  line-height: 1;
  pointer-events: none;
}
#cf-quote-wrap .cf-input:focus {
  outline: none;
  border-color: var(--cf-sun);
  box-shadow: 0 0 0 3px rgba(255,176,32,.18);
}

#cf-quote-wrap .cf-dep-date-row { max-width: 260px; }

#cf-quote-wrap .cf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#cf-quote-wrap .cf-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 640px) {
  #cf-quote-wrap .cf-grid-2, #cf-quote-wrap .cf-grid-3 { grid-template-columns: 1fr; }
}

/* Dropdown de aeroportos — lista alfabética com scroll infinito */
#cf-quote-wrap .cf-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--cf-line);
  border-top: none;
  border-radius: 0 0 10px 10px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 60;
  display: none;
  box-shadow: 0 16px 34px -14px rgba(8,32,30,.35);
  -webkit-overflow-scrolling: touch;
}
#cf-quote-wrap .cf-suggestions.is-open { display: block; }
#cf-quote-wrap .cf-suggestion {
  padding: 9px 13px;
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--cf-sand);
}
#cf-quote-wrap .cf-suggestion:last-child { border-bottom: none; }
#cf-quote-wrap .cf-suggestion:hover,
#cf-quote-wrap .cf-suggestion.is-active { background: var(--cf-sand); }
#cf-quote-wrap .cf-suggestion .cf-sug-city { font-weight: 600; }
#cf-quote-wrap .cf-suggestion .cf-sug-city small { color: var(--cf-stone); font-weight: 400; }
#cf-quote-wrap .cf-suggestion .cf-sug-code {
  background: var(--cf-ocean);
  color: #fff;
  font-family: var(--mono, monospace);
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  align-self: center;
  white-space: nowrap;
}
#cf-quote-wrap .cf-suggestion.cf-no-results,
#cf-quote-wrap .cf-suggestion.cf-loading { color: var(--cf-stone); cursor: default; justify-content: center; font-style: italic; }
#cf-quote-wrap .cf-suggestion.cf-no-results:hover,
#cf-quote-wrap .cf-suggestion.cf-loading:hover { background: #fff; }
#cf-quote-wrap .cf-sug-more {
  padding: 8px 13px;
  text-align: center;
  font-size: .72rem;
  color: var(--cf-stone);
  font-family: var(--mono, monospace);
  letter-spacing: .06em;
}

/* Flexibilidade */
#cf-quote-wrap .cf-flex-group { margin-top: 10px; }
#cf-quote-wrap .cf-flex-group-top { margin-top: -6px; }
#cf-quote-wrap .cf-flex-label {
  font-family: var(--mono, monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cf-stone);
}
#cf-quote-wrap .cf-radio-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
#cf-quote-wrap .cf-radio {
  display: flex; align-items: center; gap: 5px;
  font-size: .78rem;
  border: 1px solid var(--cf-line);
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--cf-sand);
}
#cf-quote-wrap .cf-radio input { accent-color: var(--cf-sun); margin: 0; }
#cf-quote-wrap .cf-radio:has(input:checked) {
  border-color: var(--cf-sun);
  background: rgba(255,176,32,.12);
  color: var(--cf-sund);
  font-weight: 700;
}

#cf-quote-wrap .cf-return-block {
  border-top: 1px dashed var(--cf-line);
  margin: 4px 0 16px;
  padding-top: 16px;
}
#cf-quote-wrap .cf-return-block .cf-field-icon { max-width: 260px; }

/* Passageiros */
#cf-quote-wrap .cf-pax-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { #cf-quote-wrap .cf-pax-grid { grid-template-columns: 1fr; } }
#cf-quote-wrap .cf-stepper {
  border: 1px solid var(--cf-line);
  border-radius: 10px;
  padding: 11px 13px;
  background: var(--cf-sand);
}
#cf-quote-wrap .cf-stepper > span {
  display: block;
  font-size: .72rem;
  color: var(--cf-stone);
  margin-bottom: 8px;
}
#cf-quote-wrap .cf-stepper-ctrl { display: flex; align-items: center; justify-content: space-between; }
#cf-quote-wrap .cf-step-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--cf-ocean);
  background: #fff;
  color: var(--cf-ocean);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
#cf-quote-wrap .cf-step-btn:hover { background: var(--cf-ocean); color: #fff; }
#cf-quote-wrap .cf-step-value { font-weight: 700; font-size: 1rem; min-width: 20px; text-align: center; }

#cf-quote-wrap .cf-hp { position: absolute; left: -9999px; top: -9999px; }

#cf-quote-wrap .cf-submit { width: 100%; justify-content: center; margin-top: 4px; }
#cf-quote-wrap .cf-feedback { margin-top: 12px; font-size: .85rem; text-align: center; min-height: 18px; }
#cf-quote-wrap .cf-feedback.is-error { color: #C1361B; }
#cf-quote-wrap .cf-feedback.is-ok { color: var(--cf-teal); font-weight: 600; }

#cf-quote-wrap .cf-input:focus-visible,
#cf-quote-wrap .cf-step-btn:focus-visible,
#cf-quote-wrap .cf-submit:focus-visible { outline: 2px solid var(--cf-sun); outline-offset: 2px; }