.vcf{font-family:inherit; overflow:visible !important;}
.vcf-bar{
  display:flex; gap:10px; align-items:stretch; flex-wrap:wrap;
  padding:10px; border-radius:18px; background:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
  overflow:visible !important;
}

.vcf-field{
  display:flex; gap:10px; align-items:center;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px; padding:10px 12px;
  min-width:190px; position:relative; background:#fff;
  overflow:visible !important;
}
.vcf-loc{min-width:260px}

.vcf-ico{width:28px; display:flex; justify-content:center; opacity:.75}
.vcf-body{display:flex; flex-direction:column; width:100%}
.vcf-label{font-size:12px; opacity:.7; line-height:1}
.vcf-input{border:0; outline:0; padding:2px 0 0; font-size:16px; width:100%; background:transparent}

.vcf-swap{
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px; width:44px; min-width:44px;
  background:#fff; cursor:pointer;
}

.vcf-search{
  border:0; border-radius:14px; padding:0 22px;
  background:#1b66ff; color:#fff; font-size:16px; cursor:pointer;
}

/* dropdown */
.vcf-dd{
  position:absolute; left:0; right:0; top:calc(100% + 8px);
  background:#fff; border:1px solid rgba(0,0,0,.12);
  border-radius:14px; overflow:hidden; z-index:999999 !important;
  box-shadow:0 14px 40px rgba(0,0,0,.12);
}
.vcf-dd-item{padding:10px 12px; cursor:pointer}
.vcf-dd-item:hover{background:rgba(0,0,0,.04)}
.vcf-dd-main{font-size:14px}
.vcf-dd-sub{font-size:12px; opacity:.65; margin-top:2px}

.vcf-results{
  display:grid; grid-template-columns:260px 1fr; gap:14px;
  margin-top:14px;
}

.vcf-filters{
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:12px;
  background:#fff;
  height:fit-content;
}

.vcf-filter{margin-bottom:14px}
.vcf-filter-title{font-weight:600; margin-bottom:8px}
.vcf-filter label{display:block; margin:6px 0; cursor:pointer}
.vcf-airline-opt{display:flex; gap:8px; align-items:flex-start}

.vcf-list{
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  background:#fff;
  padding:12px;
}

.vcf-meta{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.vcf-cards{display:grid; gap:10px}

.vcf-card{
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:12px;
}
.vcf-card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.vcf-airline-code{font-weight:700}
.vcf-airline-name{opacity:.75; font-size:13px}
.vcf-price{font-size:18px; font-weight:700}

.vcf-route{
  margin-top:10px;
  display:grid;
  grid-template-columns:auto auto 1fr auto auto;
  align-items:center;
  gap:10px;
}
.vcf-time{font-weight:600}
.vcf-iata{opacity:.8}
.vcf-mid{position:relative}
.vcf-line{height:2px; background:rgba(0,0,0,.12); border-radius:99px}
.vcf-stops{font-size:12px; opacity:.7; margin-top:6px}

.vcf-card-bottom{margin-top:10px; display:flex; justify-content:space-between; align-items:center; gap:10px}
.vcf-small{font-size:12px; opacity:.7}
.vcf-empty{padding:20px; opacity:.8}

/* actions/buttons */
.vcf-actions{display:flex; gap:8px; justify-content:flex-end; width:100%}
.vcf-btn{
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
}
.vcf-btn-outline:hover{background:rgba(0,0,0,.04)}
.vcf-btn-primary{
  background:#1b66ff;
  color:#fff;
  border-color:#1b66ff;
}

/* modal */
.vcf-modal{display:none}
.vcf-modal.is-open{display:block}

.vcf-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:999990;
}

.vcf-sheet{
  position:fixed;
  top:5vh; left:50%;
  transform:translateX(-50%);
  width:min(860px, 92vw);
  max-height:90vh;
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.22);
  z-index:999999;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.vcf-sheet-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.vcf-sheet-title{margin:0; font-size:18px}
.vcf-close{
  border:0; background:transparent; cursor:pointer;
  font-size:18px; width:36px; height:36px;
  border-radius:10px;
}
.vcf-close:hover{background:rgba(0,0,0,.05)}

.vcf-sheet-body{
  padding:14px;
  overflow:auto;
}

.vcf-sheet-foot{
  padding:12px 14px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  justify-content:flex-end;
}

/* pax / passport form */
.vcf-pax-wrap{display:flex; flex-direction:column; gap:12px}
.vcf-pax-card{
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:12px;
}
.vcf-pax-title{font-weight:800; margin-bottom:10px}
.vcf-pax-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.vcf-pax-grid label{display:flex; flex-direction:column; gap:6px; font-size:12px; opacity:.9}
.vcf-pax-grid input,
.vcf-pax-grid select{
  height:40px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  padding:0 10px;
  font-size:14px;
}
@media (max-width: 700px){
  .vcf-pax-grid{grid-template-columns:1fr}
}

/* details layout */
.vcf-details-section{margin-bottom:18px}
.vcf-details-subtitle{font-size:13px; opacity:.75; margin-bottom:10px}

.vcf-details-card{
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:12px;
  margin-bottom:10px;
}

.vcf-details-card-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:10px;
}

.vcf-details-airline{font-weight:700}
.vcf-details-flightno{opacity:.75; font-size:13px}
.vcf-details-op{opacity:.7; font-size:12px; margin-top:2px}

.vcf-stepper{display:flex; flex-direction:column; gap:10px}
.vcf-step{
  display:grid;
  grid-template-columns:14px 1fr auto;
  gap:10px;
  align-items:start;
}
.vcf-dot{
  width:10px; height:10px; border-radius:50%;
  background:#1b66ff;
  margin-top:6px;
}
.vcf-dot-hollow{
  background:#fff;
  border:2px solid #1b66ff;
}
.vcf-step-main .vcf-step-city{font-weight:700}
.vcf-step-sub{opacity:.7; font-size:12px}
.vcf-step-right{text-align:right}
.vcf-step-time{font-weight:700}
.vcf-step-date{opacity:.7; font-size:12px}

.vcf-step-mid{
  grid-template-columns:14px 1fr;
  align-items:center;
}
.vcf-step-mid .vcf-line{
  height:34px;
  width:2px;
  background:rgba(0,0,0,.12);
  margin-left:4px;
}
.vcf-midtext{opacity:.7; font-size:12px}

.vcf-details-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.vcf-details-grid .k{display:block; font-size:12px; opacity:.7}
.vcf-details-grid .v{display:block; font-weight:600}

.vcf-layover{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.035);
  margin:10px 0;
  font-size:13px;
  opacity:.85;
}

@media (max-width: 900px){
  .vcf-results{grid-template-columns:1fr}
}
/* =========================
   Filters: Tourfic-like UI
   ========================= */

.vcf-filters{
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  background:#fff;
  padding:14px;
}

.vcf-filter{
  padding:12px 0;
  border-top:1px solid rgba(0,0,0,.08);
}
.vcf-filter:first-child{ border-top:0; padding-top:0; }
.vcf-filter:last-child{ padding-bottom:0; }

.vcf-filter-title{
  font-weight:700;
  font-size:14px;
  margin:0 0 10px 0;
}

/* Make every label a nice clickable row */
.vcf-filter > label,
.vcf-airline-opt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;

  line-height:1.2;
  font-size:14px;
}

.vcf-filter > label:hover,
.vcf-airline-opt:hover{
  background:rgba(0,0,0,.04);
}

/* Put checkbox at the right, text on left */
.vcf-filter > label{
  flex-direction:row-reverse;
}
.vcf-airline-opt{
  flex-direction:row-reverse;
}

/* Checkbox size + alignment */
.vcf-filter input[type="checkbox"],
.vcf-airline-opt input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  flex:0 0 auto;
}

/* Label text */
.vcf-filter > label{
  color:#111;
}
.vcf-airline-opt span{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Airlines list: scrollable, clean */
.vcf-airlines{
  display:flex;
  flex-direction:column;
  gap:6px;

  max-height:220px;
  overflow:auto;

  padding-right:4px; /* space for scrollbar */
}
.vcf-airlines::-webkit-scrollbar{ width:8px; }
.vcf-airlines::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.18);
  border-radius:10px;
}
.vcf-airlines::-webkit-scrollbar-track{
  background:transparent;
}

/* Range + select consistent */
.vcf-filter input[type="range"]{
  width:100%;
  margin:6px 0 0;
}
.vcf-filter select{
  width:100%;
  height:40px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:0 10px;
  background:#fff;
  outline:none;
}
.vcf-filter select:focus{
  border-color:rgba(27,102,255,.6);
  box-shadow:0 0 0 3px rgba(27,102,255,.12);
}

/* Small price label nicer */
.vcf-filter .vcf-small{
  margin-top:8px;
  opacity:.8;
}
/* =========================
   TOURFIC-LIKE FLIGHTS SEARCH
   ========================= */

.vcf{
  --vcf-radius: 18px;
  --vcf-radius-sm: 14px;
  --vcf-border: rgba(0,0,0,.10);
  --vcf-border2: rgba(0,0,0,.14);
  --vcf-shadow: 0 10px 35px rgba(0,0,0,.10);
  --vcf-shadow2: 0 8px 24px rgba(0,0,0,.08);
  --vcf-brand: #2b67ff;
  --vcf-text: #0f172a;
  --vcf-muted: rgba(15,23,42,.62);
  --vcf-bg: #ffffff;
}

/* Whole search bar container */
.vcf-bar{
  background: var(--vcf-bg);
  border: 1px solid var(--vcf-border);
  border-radius: calc(var(--vcf-radius) + 6px);
  box-shadow: var(--vcf-shadow);
  padding: 14px;
  gap: 12px;
  align-items: stretch;
  overflow: visible !important;
}

/* Make everything same height like Tourfic */
.vcf-field,
.vcf-search,
.vcf-swap{
  min-height: 64px;
}

/* Each field (pill) */
.vcf-field{
  border: 1px solid var(--vcf-border);
  border-radius: var(--vcf-radius);
  padding: 12px 14px;
  background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  overflow: visible !important;
}

.vcf-field:hover{
  box-shadow: var(--vcf-shadow2);
  border-color: rgba(43,103,255,.28);
}

.vcf-field:focus-within{
  border-color: rgba(43,103,255,.55);
  box-shadow: 0 0 0 4px rgba(43,103,255,.12), var(--vcf-shadow2);
}

/* icon */
.vcf-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(43,103,255,.08);
  opacity: 1;
}

/* label like Tourfic */
.vcf-label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--vcf-muted);
  margin-bottom: 4px;
}

/* input typography */
.vcf-input{
  font-size: 16px;
  font-weight: 600;
  color: var(--vcf-text);
}
.vcf-input::placeholder{
  color: rgba(15,23,42,.38);
  font-weight: 500;
}

/* Swap button */
.vcf-swap{
  border: 1px solid var(--vcf-border);
  background:#fff;
  border-radius: 999px;
  width: 54px;
  min-width: 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.vcf-swap:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  border-color: rgba(43,103,255,.35);
}

/* Search button like Tourfic CTA */
.vcf-search{
  border: 0;
  border-radius: var(--vcf-radius);
  padding: 0 22px;
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--vcf-brand), #1b49ff);
  color:#fff;
  box-shadow: 0 12px 26px rgba(43,103,255,.24);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space: nowrap;
}
.vcf-search:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(43,103,255,.28);
  filter: brightness(1.02);
}
.vcf-search:active{
  transform: translateY(0px);
}

/* Dropdown (autocomplete) – Tourfic-ish */
.vcf-dd{
  border-radius: var(--vcf-radius);
  border: 1px solid var(--vcf-border2);
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  z-index: 999999 !important;
  overflow: hidden;
}
.vcf-dd-item{
  padding: 12px 14px;
}
.vcf-dd-item:hover{
  background: rgba(43,103,255,.06);
}
.vcf-dd-main{
  font-weight: 700;
  font-size: 14px;
  color: var(--vcf-text);
}
.vcf-dd-sub{
  font-size: 12px;
  color: var(--vcf-muted);
  margin-top: 2px;
}

/* Trip bar (one-way/round-trip/nonstop) if you added it */
.vcf-tripbar{
  width: 100%;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.vcf-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--vcf-border);
  border-radius: 999px;
  background:#fff;
  cursor:pointer;
  user-select:none;
  font-weight: 700;
  color: var(--vcf-text);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vcf-pill:hover{
  background: rgba(0,0,0,.03);
  border-color: rgba(43,103,255,.25);
}
.vcf-pill input{
  width: 16px;
  height: 16px;
  margin: 0;
}
.vcf-pill-right{ margin-left: auto; }

/* Responsive: mimic Tourfic stacking on small screens */
@media (max-width: 1100px){
  .vcf-loc{ min-width: 240px; }
}
@media (max-width: 900px){
  .vcf-bar{
    padding: 12px;
    border-radius: var(--vcf-radius);
  }
  .vcf-loc{ min-width: 100%; }
  .vcf-field{ width: 100%; }
  .vcf-swap{ width: 100%; min-width: 100%; border-radius: var(--vcf-radius); }
  .vcf-search{ width: 100%; }
}