:root{
  --bg:#f5f6fb; --card:#fff; --text:#1d1b20; --muted:#6a6a75;
  --brand:#6c2bdb; --brand-2:#7b38ef; --chip:#f1eefc; --chip-t:#4b2bb3;
  --border:#e6e6ef; --ok:#12a150; --danger:#e5484d;
  --shadow:0 10px 30px rgba(18,17,36,.08);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:Rubik,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  color:var(--text); background:linear-gradient(180deg,#6f2ae6 0%,#9c6ef8 100%) fixed;
}
.container{ max-width:860px; margin:32px auto; padding:16px; }
.card{
  background:var(--card); border-radius:18px; padding:24px; box-shadow:var(--shadow);
}
h2{ margin:0 0 18px; font-size:28px; line-height:1.2 }
.row{ margin-bottom:16px }
.label{ display:block; font-size:13px; color:var(--muted); margin:0 0 6px; }
.field{ position:relative }
.field input{
  width:100%; height:48px; border:2px solid var(--border); border-radius:14px;
  padding:0 12px; font-size:16px; outline:none; transition:.15s;
}
.field input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(123,56,239,.12) }
.swap{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:var(--chip); color:var(--brand); border:0; border-radius:10px;
  padding:6px 10px; font-weight:600; cursor:pointer;
}
.with-tag .inline-tag{
  position:absolute; right:48px; top:50%; transform:translateY(-50%);
  background:var(--chip); color:var(--brand); border-radius:10px; padding:4px 8px; font-size:12px;
}
.hidden{ display:none !important }

.radio-pill-group{ display:inline-grid; grid-template-columns:1fr 1fr; gap:8px; background:#f2eefc; padding:6px; border-radius:12px }
.radio-pill-group input{ display:none }
.radio-pill-group label{
  padding:10px 14px; border-radius:10px; text-align:center; cursor:pointer; user-select:none
}
.radio-pill-group input:checked + label{
  background:var(--brand); color:#fff; box-shadow:0 3px 10px rgba(108,43,219,.35);
}

.field-group-dates{ display:grid; grid-template-columns:1fr 1fr; gap:14px }

.btn{
  margin-top:8px; width:100%; height:52px; border:0; border-radius:16px; color:#fff;
  background:linear-gradient(180deg,var(--brand),var(--brand-2)); font-weight:700; font-size:18px;
  box-shadow:0 8px 20px rgba(108,43,219,.3); cursor:pointer; transition:opacity .15s ease;
}
.btn:disabled{ opacity:.5; cursor:not-allowed }
.btn-ghost{ background:#f4f2ff; color:var(--brand); border:1px solid var(--border); border-radius:10px; padding:8px 12px; cursor:pointer }

.footer-note{ margin:14px 0; font-size:12px; color:var(--muted) }
.error-message{ color:var(--danger); min-height:18px; margin-top:8px }

/* QUOTE */
.quote{ border:2px dashed var(--border); border-radius:16px; padding:14px; margin-top:10px; background:#faf9ff }
.quote .line{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0 }
.quote .badge{ background:#efeaff; color:var(--brand); padding:4px 8px; border-radius:10px; font-size:12px }
.quote .total{ font-weight:700; font-size:18px }

/* RESULTS */
.results-container{ margin-top:22px }
.results-bar{ display:flex; align-items:baseline; gap:10px }
.results-bar h3{ margin:0; }
.muted{ color:var(--muted); font-size:13px }

.results-list{ display:grid; gap:14px }
.result-card{
  display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:16px; border:1px solid var(--border); border-radius:16px; background:#fff;
  box-shadow:var(--shadow);
}
.company-line{ display:flex; align-items:center; gap:10px }
.company-logo{ width:120px; height:36px; object-fit:contain }
.company{ font-weight:700; font-size:18px }
.class{ color:var(--muted); font-size:14px }
.meta{ color:var(--muted); font-size:14px; display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
.seat-badge{ background:#f1f1fb; color:#4b4b70; padding:2px 8px; border-radius:12px; font-size:12px }
.scarcity{ background:#fde8e8; color:#b42318; padding:2px 8px; border-radius:12px; font-size:12px }
.extras{ color:var(--muted); font-size:12px; margin-top:6px }
.price{ color:#5b21b6; font-weight:800; font-size:20px; white-space:nowrap }
.btn-ghost{ white-space:nowrap }

/* DROPDOWN */
.search-results-container{
  position:absolute; z-index:50; background:#fff; border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow); max-height:340px; overflow:auto; width:360px;
}
.s-option{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; cursor:pointer; border-bottom:1px solid #f4f3fb }
.s-option:last-child{ border-bottom:0 }
.s-ico{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  background:#f4f2ff; color:var(--brand); border-radius:8px; font-size:14px; }
.s-name{ font-weight:600 }
.s-tag{ display:inline-block; background:#f4f2ff; color:var(--brand); border-radius:10px; padding:2px 8px; font-size:12px; margin-top:4px }

@media (max-width:680px){
  .field-group-dates{ grid-template-columns:1fr }
  .search-results-container{ width:min(92vw,420px) }
  .result-card{ grid-template-columns:1fr; gap:8px }
  .price{ font-size:22px }
}
/* ===== Topbar ===== */
body.has-topbar { padding-top: 64px; } /* evita que o conteúdo fique embaixo do topo fixo */

.topbar{
  position: fixed; top: 0; left: 0; right: 0;
  background: #ffffff; color: #fff; z-index: 1000;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.topbar__inner{
  max-width: 1100px; margin: 0 auto;
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand__logo{ height: 28px; display: block; }

.main-nav{ display: flex; align-items: center; gap: 12px; }
.main-nav .pill{
  background: #111; border: 1px solid #2d2d38;
  color: #fff; padding: 8px 14px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
}
.main-nav .link{
  color: #9ca3af; text-decoration: none;
}
.main-nav .link::before{
  content: "|"; margin: 0 8px; color: #6b7280;
}

.hamburger{
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px; border: 1px solid #2d2d38;
  background: #121216; cursor: pointer;
  align-items: center; justify-content: center;
}
.hamburger span{
  display: block; width: 18px; height: 2px; background: #fff; margin: 3px 0;
}

/* Mobile */
@media (max-width: 640px){
  .main-nav{
    position: absolute; top: 56px; right: 16px;
    background: #111015; border: 1px solid #2d2d38;
    padding: 10px; border-radius: 12px;
    display: none; flex-direction: column; gap: 8px;
  }
  .main-nav.open{ display: flex; }
  .hamburger{ display: flex; }
}
.main-nav{ display:none !important; }