/* ================================
   Tabs Bar Styling - Bootstrap Compliant
   ================================ */
.tabs {
  display: flex;
  justify-content: flex-end;
  background: transparent;
  border-bottom: 1px solid #252525;
  margin-bottom: 0;
  z-index: 2;
  gap: 2px;
}

.tab {
  /* Bootstrap btn basics, but custom style for tab look */
  padding: 0.75rem 1.5rem;
  background-color: #23272b;      /* Similar to bg-dark */
  color: #f8f9fa;                 /* text-light */
  border-radius: 0rem 0rem 0 0; /* rounded-top */
  margin-left: 0;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  border: none;
  outline: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-transform: uppercase;
  font-family: var(--bs-font-sans-serif, "Overpass", sans-serif);
  box-shadow: none;
}

.tab:not(.active):hover,
.tab:not(.active):focus {
  background-color: #393e46;   /* bg-dark */
  color: #fff;
}

.tab.active {
  background-color: #393e46;
  color: #fff;
  border-bottom: 3px solid #0d6efd;  /* Use Bootstrap primary if possible */
  font-weight: 600;
  z-index: 3;
}

/* ================================
   Tab Content Styling
   ================================ */
.tab-content {
  display: none;
  width: 100%;
  background: #3b4252;
  color: #f8f9fa;
  padding: 2rem 1.5rem 2.5rem 1.5rem;
  border-radius: 0 0 0.5rem 0.5rem;
  border-top: 0;
  box-shadow: 0 6px 30px rgba(0,0,0,0.13);
  font-family: var(--bs-font-sans-serif, "Overpass", sans-serif);
}

.tab-content.active {
  display: block;
}

/* ================================
   Terms and Policy Section Styling
   ================================ */
.terms-container {
  padding: 0 20px;
}

.terms-section {
  margin-bottom: 2rem;
  background: transparent;
}

.terms-title li {
  list-style: none;
  margin-bottom: 0.6rem;
}

.terms-title li a {
  font-family: var(--bs-font-sans-serif, "Overpass", sans-serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: #b7cdfa;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color 0.2s;
}

.terms-title li a:hover {
  color: #fff;
  text-decoration: underline;
}

.policy-section {
  font: 300 1.12rem/1.8 var(--bs-font-sans-serif, "Overpass", sans-serif);
  margin-bottom: 2rem;
  color: #fafafa;
}

.policy-section h1,
.policy-section h2,
.policy-section h3,
.policy-section h4 {
  font-family: var(--bs-font-sans-serif, "Overpass", sans-serif);
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.policy-section h1 { font-size: 2.2rem; font-weight: 600; }
.policy-section h2 { font-size: 1.65rem; font-weight: 500; }
.policy-section h3 { font-size: 1.3rem; font-weight: 500; }
.policy-section h4 { font-size: 1.08rem; font-weight: 500; }

.policy-section p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  width: 97%;
  color: #f0f0f0;
  padding-right: 1rem;
}

.policy-section ul {
  margin-left: 1.3rem;
  font-size: 1.03rem;
  list-style-type: disc;
  margin-bottom: 1.1rem;
  color: #eaeaea;
}

.policy-section ul li {
  margin-bottom: 0.5rem;
  padding-right: 1rem;
}

@media (max-width: 800px) {
  .tab-content { padding: 1rem 0.5rem 1.5rem 0.5rem; }
  .tabs { flex-direction: column; align-items: stretch; }
  .tab { border-radius: 0.5rem 0.5rem 0 0; margin-bottom: 2px; }
}