/* Theme-first styling + UX safety
   - Avoids white-on-white
   - Keeps layout clean
   - Forces button to black with white text for readability
*/

.brt-wrap {
  padding: 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
}

.brt-header { margin-bottom: 14px; }

.brt-kicker {
  font-size: 0.85em;
  opacity: 0.8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brt-title { margin: 8px 0 10px; line-height: 1.2; }
.brt-subtitle { margin: 0; max-width: 75ch; }

.brt-form {
  padding: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
}

.brt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 820px) {
  .brt-grid { grid-template-columns: 1fr; }
}

.brt-field { display: flex; flex-direction: column; gap: 6px; }

.brt-label {
  font-size: 0.95em;
  opacity: 0.9;
}

.brt-input {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.20);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 40px;
}

.brt-input:focus {
  outline: 2px solid rgba(0,0,0,0.35);
  outline-offset: 2px;
}

.brt-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Button readability fix */
.brt-btn {
  font: inherit;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  cursor: pointer;
}

.brt-btn:hover { background: #111; }

.brt-btn:focus {
  outline: 3px solid rgba(0,0,0,0.35);
  outline-offset: 2px;
}

.brt-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.brt-results { margin-top: 14px; }

.brt-summary,
.brt-upgrade,
.brt-card,
.brt-error {
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 12px 14px;
}

.brt-summary { margin-bottom: 12px; }
.brt-summary-title { font-weight: 600; margin-bottom: 6px; }
.brt-summary-meta { opacity: 0.9; }

.brt-upgrade { margin-bottom: 12px; }

.brt-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

@media (max-width: 980px) {
  .brt-cards { grid-template-columns: 1fr; }
}

.brt-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.brt-card-country { font-weight: 700; }
.brt-iso { opacity: 0.7; margin-left: 6px; }
.brt-score { font-size: 0.95em; opacity: 0.9; }

.brt-badges {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brt-badge {
  font-size: 0.9em;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.02);
}

.brt-section { margin-top: 12px; }
.brt-section-title { font-size: 0.95em; font-weight: 600; margin-bottom: 6px; }

.brt-links a { text-decoration: underline; text-underline-offset: 3px; }
.brt-list { margin: 0; padding-left: 18px; }

.brt-error { border-color: rgba(255, 0, 0, 0.25); }

.brt-disclaimer {
  margin-top: 16px;
  font-size: 0.9em;
  opacity: 0.9;
}

.brt-how { margin-top: 18px; }
.brt-how h3 { margin-top: 0; }