/* ── Sportabo Finder – Website Design ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Barlow:wght@400;500;600;700&display=swap');

:root {
  --sa-bg:      #ffffff;
  --sa-bg2:     #f5f7fa;
  --sa-bg3:     #edf0f5;
  --sa-navy:    #0d1b2e;
  --sa-navy2:   #122038;
  --sa-green:   #2bc44a;
  --sa-green2:  #22a83e;
  --sa-border:  #e2e8f0;
  --sa-border2: #d0d9e8;
  --sa-text:    #0d1b2e;
  --sa-muted:   #64748b;
  --sa-muted2:  #94a3b8;
  --sa-font-h:  'Barlow Condensed', sans-serif;
  --sa-font-b:  'Barlow', sans-serif;
  --sa-shadow:  0 4px 24px rgba(0,0,0,0.08);
}

/* ── Root ── */
#sportabo-finder-root {
  font-family: var(--sa-font-b);
  background: var(--sa-bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sa-shadow);
  color: var(--sa-text);
  border: 1px solid var(--sa-border);
}

/* ── Header ── */
.sf-header {
  background: linear-gradient(135deg, #0a1624 0%, #152340 100%);
  border-bottom: 1px solid #1e3a5f;
  padding: 24px 32px 22px;
  position: relative; overflow: hidden;
}
.sf-header::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle,rgba(43,196,74,.08) 0%,transparent 65%);
  pointer-events:none;
}
.sf-header-inner { display:flex; align-items:center; gap:16px; position:relative; z-index:1; }
.sf-logo-mark {
  width:44px; height:44px; background:var(--sa-green); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
  box-shadow: 0 4px 14px rgba(43,196,74,.35);
}
.sf-header h1 {
  font-family:var(--sa-font-h); font-size:24px; font-weight:900;
  letter-spacing:1.5px; text-transform:uppercase; margin:0; line-height:1; color:#fff;
}
.sf-header p { font-size:13px; color:rgba(255,255,255,.55); margin:5px 0 0; }

/* ── Body ── */
.sf-body { padding:24px 32px 32px; background:var(--sa-bg); }

/* ── Steps ── */
.sf-steps { display:flex; gap:6px; margin-bottom:24px; align-items:center; }
.sf-step {
  display:flex; align-items:center; gap:7px;
  font-family:var(--sa-font-h); font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--sa-muted2);
}
.sf-step.active { color:var(--sa-text); }
.sf-step.done   { color:var(--sa-green); }
.sf-step-num {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:var(--sa-bg3); border:1.5px solid var(--sa-border);
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800;
}
.sf-step.active .sf-step-num { background:var(--sa-navy); border-color:var(--sa-navy); color:#fff; }
.sf-step.done   .sf-step-num { background:transparent; border-color:var(--sa-green); color:var(--sa-green); }
.sf-step-div { flex:1; height:1px; background:var(--sa-border); min-width:16px; }

/* ── Labels ── */
.sf-section-label {
  font-family:var(--sa-font-h); font-size:11px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase; color:var(--sa-green);
  margin-bottom:12px; display:block;
}

/* ── Sports Grid ── */
.sf-sports-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:8px; margin-bottom:22px;
}
.sf-sport-btn {
  background:var(--sa-bg); border:1.5px solid var(--sa-border);
  border-radius:10px; padding:14px 8px 12px; cursor:pointer;
  transition:all .18s; display:flex; flex-direction:column;
  align-items:center; gap:7px; color:var(--sa-muted);
  font-family:var(--sa-font-h); font-size:12px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; text-align:center;
}
.sf-sport-btn:hover {
  border-color:var(--sa-green); color:var(--sa-navy);
  background:var(--sa-bg2); transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(43,196,74,.1);
}
.sf-sport-btn.selected {
  border-color:var(--sa-green); background:#f0fdf4;
  color:var(--sa-navy); box-shadow:0 0 0 3px rgba(43,196,74,.12);
}
.sf-sport-icon { font-size:28px; line-height:1; }

/* ── Selects ── */
.sf-selects { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:22px; }
.sf-select-group { display:flex; flex-direction:column; gap:7px; }
.sf-select {
  appearance:none; -webkit-appearance:none;
  background:var(--sa-bg); border:1.5px solid var(--sa-border2);
  border-radius:9px; color:var(--sa-text); padding:0 38px 0 14px; height:46px;
  font-family:var(--sa-font-b); font-size:14px; font-weight:500;
  cursor:pointer; transition:border-color .15s; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.sf-select:focus { outline:none; border-color:var(--sa-green); box-shadow:0 0 0 3px rgba(43,196,74,.1); }
.sf-select option { background:#fff; color:var(--sa-text); }

/* ── Search Button ── */
.sf-search-btn {
  width:100%; padding:15px 24px; background:var(--sa-navy); color:#fff;
  border:none; border-radius:10px; font-family:var(--sa-font-h);
  font-size:18px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; transition:all .18s; display:flex; align-items:center;
  justify-content:center; gap:8px;
}
.sf-search-btn:hover:not(:disabled) {
  background:var(--sa-navy2); transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(13,27,46,.25);
}
.sf-search-btn:disabled { opacity:.3; cursor:not-allowed; }

/* ── Loading ── */
.sf-loading { display:flex; align-items:center; justify-content:center; padding:36px; gap:12px; color:var(--sa-muted); font-size:14px; }
.sf-spinner { width:20px; height:20px; border:2px solid var(--sa-border); border-top-color:var(--sa-green); border-radius:50%; animation:sa-spin .7s linear infinite; }
@keyframes sa-spin { to { transform:rotate(360deg); } }

/* ── Error ── */
.sf-api-error {
  background:#fef2f2; border:1.5px solid #fecaca; border-radius:9px;
  padding:12px 16px; font-size:13px; color:#dc2626; margin-bottom:16px; line-height:1.5;
}
.sf-api-error a { color:#dc2626; font-weight:600; }

/* ── Results ── */
.sf-results { margin-top:26px; animation:sa-up .28s ease; }
@keyframes sa-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.sf-results-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sf-results-title { font-family:var(--sa-font-h); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--sa-green); }
.sf-results-subtitle { font-size:12px; color:var(--sa-muted); background:var(--sa-bg2); padding:3px 10px; border-radius:20px; border:1px solid var(--sa-border); }

/* ── Comp tags ── */
.sf-comp-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.sf-comp-tag {
  background:#f0fdf4; border:1px solid #bbf7d0; border-radius:6px;
  padding:4px 10px; font-size:12px; font-weight:600; color:#15803d;
  display:flex; align-items:center; gap:5px;
}
.sf-comp-tag span { color:var(--sa-muted); font-weight:400; }

/* ── Provider Grid ── */
.sf-providers { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:12px; }

/* ── Provider Card ── */
.sf-provider-card {
  background:#fff; border:1.5px solid var(--sa-border);
  border-radius:12px; overflow:hidden; transition:transform .18s,box-shadow .18s,border-color .18s;
}
.sf-provider-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.1); border-color:var(--sa-border2); }
.sf-provider-card.is-free { border-color:#bbf7d0; }
.sf-provider-stripe { height:4px; }
.sf-provider-top { padding:16px 16px 10px; display:flex; align-items:flex-start; gap:12px; }
.sf-provider-logo {
  width:46px; height:46px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sa-font-h); font-size:10px; font-weight:900;
  letter-spacing:.3px; text-transform:uppercase; color:#fff;
}
.sf-provider-info { flex:1; min-width:0; }
.sf-provider-name {
  font-family:var(--sa-font-h); font-size:19px; font-weight:900;
  text-transform:uppercase; letter-spacing:.5px; line-height:1;
  margin-bottom:3px; color:var(--sa-navy);
}
.sf-provider-desc { font-size:11.5px; color:var(--sa-muted); line-height:1.35; }
.sf-provider-badge { font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; padding:3px 8px; border-radius:20px; flex-shrink:0; }
.sf-provider-badge.free { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.sf-provider-badge.paid { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }

.sf-provider-comps { padding:0 16px 10px; display:flex; flex-direction:column; gap:5px; }
.sf-provider-comp { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; }
.sf-provider-comp-icon { width:16px; height:16px; border-radius:4px; flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:7px; }
.sf-provider-comp.full    .sf-provider-comp-icon { background:#dcfce7; color:#15803d; }
.sf-provider-comp.partial .sf-provider-comp-icon { background:#fef9c3; color:#854d0e; }
.sf-provider-comp-text { line-height:1.4; }
.sf-provider-comp-name { color:var(--sa-text); font-weight:600; }
.sf-provider-comp-note { color:var(--sa-muted); font-size:11px; }

.sf-provider-footer {
  padding:10px 16px 14px; display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--sa-border); margin-top:4px;
}
.sf-provider-price { font-family:var(--sa-font-h); font-size:22px; font-weight:900; color:var(--sa-navy); line-height:1; }
.sf-provider-price small { font-size:12px; color:var(--sa-muted); font-family:var(--sa-font-b); font-weight:400; }
.sf-cta-btn {
  padding:8px 15px; border-radius:8px; font-family:var(--sa-font-h);
  font-size:12px; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  text-decoration:none; transition:all .15s; border:none; cursor:pointer;
  background:var(--sa-navy); color:#fff;
}
.sf-cta-btn:hover { opacity:.85; transform:translateY(-1px); color:#fff; }

/* ── Total ── */
.sf-total {
  margin-top:20px; padding:18px 22px;
  background:var(--sa-navy); border-radius:12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.sf-total-label { font-family:var(--sa-font-h); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,.5); }
.sf-total-amount { font-family:var(--sa-font-h); font-size:30px; font-weight:900; color:var(--sa-green); white-space:nowrap; }
.sf-total-amount small { font-size:14px; color:rgba(255,255,255,.45); font-family:var(--sa-font-b); font-weight:400; }

/* ── Empty / Reset ── */
.sf-empty { text-align:center; padding:40px 20px; }
.sf-empty-icon { font-size:42px; margin-bottom:10px; }
.sf-empty h3 { font-family:var(--sa-font-h); font-size:22px; font-weight:900; text-transform:uppercase; letter-spacing:1px; color:var(--sa-navy); margin:0 0 7px; }
.sf-empty p { font-size:14px; color:var(--sa-muted); margin:0; }
.sf-reset {
  display:inline-flex; align-items:center; gap:5px; margin-top:22px;
  font-size:13px; font-weight:600; color:var(--sa-muted); cursor:pointer;
  border:none; background:none; padding:0; transition:color .15s; font-family:var(--sa-font-b);
}
.sf-reset:hover { color:var(--sa-navy); }

/* ── Sub-section ── */
.sf-sub-section {
  font-family:var(--sa-font-h); font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:2px; color:var(--sa-green);
  margin:20px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--sa-border); display:block;
}

/* ── Responsive ── */
@media(max-width:580px){
  .sf-body{padding:18px 16px 24px}
  .sf-header{padding:18px 16px}
  .sf-header h1{font-size:19px}
  .sf-sports-grid{grid-template-columns:repeat(3,1fr)}
  .sf-selects{grid-template-columns:1fr}
  .sf-providers{grid-template-columns:1fr}
  .sf-total{flex-direction:column;text-align:center;gap:8px}
}