/* Broker Detail Page (Template) */

:root {
  --ti-ink: #0b1220;
  --ti-ink-2: #182235;
  --ti-muted: #5b667a;
  --ti-border: rgba(11, 18, 32, 0.10);
  --ti-surface: #ffffff;
  --ti-surface-2: #f6f8fb;
  --highlight-color: #f2932a;

  /* Per-broker brand variables (override inline if needed) */
  --broker-brand: #000000;
}

/* Force a light canvas for the detail pages (brokers.css sets body dark). */
body {
  background: var(--ti-surface-2) !important;
  color: var(--ti-ink);
}

.broker-detail-page {
  background: var(--ti-surface-2);
}

/* Match brokers.html nav background */
#navbar-template.navbar-template-dark {
  background-color: #000000 !important;
}

.broker-hero {
  padding-top: 50px;
  position: relative;
  /* height: 400px; */
  overflow: hidden;
  background: var(--broker-brand);
}

.broker-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.broker-hero .container {
  position: relative;
  z-index: 2;
}

.broker-hero-title {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.8px;
}

.broker-hero-subtitle {
  color: rgb(255, 255, 255);
  max-width: 840px;
}

.broker-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
}

.broker-content {
  background: var(--ti-surface);
}

.broker-content .content-card {
  background: var(--ti-surface-2);
  /* border: 1px solid var(--ti-border); */
  border-radius: 12px;
  /* box-shadow: 0 10px 30px rgba(11, 18, 32, 0.06); */
}

.broker-content h2{
  font-size: 2.5rem;
}

.broker-content h3{
  font-size: 1.25rem !important;
}

.broker-content h2,
.broker-content h3 {
  color: var(--ti-ink);
  letter-spacing: -0.4px;
}

.broker-content p,
.broker-content li {
  color: var(--ti-ink-2);
}

.broker-content .text-muted-ti {
  color: var(--ti-muted) !important;
}

.broker-kicker {
  color: var(--broker-brand);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.broker-feature-list li {
  padding-left: 0.25rem;
}

.broker-feature-list li::marker {
  color: var(--broker-brand);
}

.broker-backlink {
  color: rgba(255, 255, 255, 0.92);
}

.broker-backlink:hover {
  color: #fff;
  text-decoration: underline;
}

/* Double CTA buttons (Overview & About left columns) */
.broker-double-buttons {
  gap: 0.75rem;
  align-items: center;
}

.broker-double-buttons .broker-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  min-height: 2.75rem;
  box-sizing: border-box;
}

.broker-cta-button {
  background-color: #f2932a !important;
  color: #fff !important;
  font-weight: 600;
  border: none !important;
  border-radius: 10px;
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.broker-cta-button:hover {
  background-color: #e08620 !important;
  color: #fff !important;
  opacity: 0.95;
}

/* Brokerage Plus showcase — image pushed flush to right edge of card */
/* Override .p-md-5 / .p-4 right padding (higher specificity so it wins over utility !important) */
.content-card.broker-showcase-card {
  padding-right: 0 !important;
}

@media (min-width: 768px) {
  /* Keep row inside card (no negative margin on right) so image doesn’t overhang */
  .broker-showcase-card .row {
    margin-right: 0;
  }

  /* Image column: no right padding so image ends at card edge */
  .broker-showcase-card .row > .col.pe-0 {
    padding-right: 0 !important;
  }
}

.broker-showcase-img {
  width: 100%;
  max-width: 550px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: 0;
  background: transparent;
}

/* Features-section overrides inside broker (light theme) */
.broker-content .features-section .inner-wrapper {
  background-color: var(--ti-surface-2);
  /* border: 1px solid var(--ti-border); */
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
}

.broker-content .features-section .inner-wrapper h3,
.broker-content .features-section .inner-wrapper h5 {
  color: var(--ti-ink);
}

/* "What You Get" cards — icon absolute top-right, h5 and p flow together */
.broker-whatyouget-card {
  background-color: #f5f5f5 !important;
  padding: 1.5rem 1.75rem !important;
  border-radius: 12px;
  border: none;
}

.broker-whatyouget-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Text block: reserve right space so h5/p don’t overlap icon */
.broker-whatyouget-text {
  padding-right: 4rem;
}

.broker-whatyouget-card h5 {
  font-weight: 600;
  color: var(--ti-ink);
  margin-bottom: 0.25rem;
}

.broker-whatyouget-card p {
  color: var(--ti-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Integration highlights section (features-section-02): no card background, 2-col layout, list items without card style */
.integration-highlights-layout {
  background: transparent;
}

.features-section-02 .broker-whatyouget-item {
  background: var(--ti-surface-2);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.features-section-02 .broker-whatyouget-icon-left {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.features-section-02 .broker-whatyouget-text h5 {
  font-weight: 600;
  color: var(--ti-ink);
  margin-bottom: 0.25rem;
}

.features-section-02 .broker-whatyouget-text p {
  color: var(--ti-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.features-section-02 .broker-whatyouget-text {
  padding-right: 0;
}

/* Overview section (features-section-03): no section background, white cards with shadow */
.broker-overview-layout {
  background: transparent;
}

.features-section-03 .broker-pillar-card {
  position: relative;
  background: var(--ti-surface);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(11, 18, 32, 0.08);
  overflow: visible;
  padding: 1.5rem 1.5rem 3rem 1.5rem;
}

/* Orange band at bottom of card, extending slightly below and following rounded corners */
.features-section-03 .broker-pillar-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--highlight-color);
  border-radius: 0 0 12px 12px;
  z-index: 0;
}

.features-section-03 .broker-pillar-card h3 {
  color: var(--ti-ink);
}

.features-section-03 .broker-pillar-icon-square {
  border-radius: 8px;
}

.features-section-03 .broker-pillar-icon-img {
  display: block;
  width: 56px !important;
  height: 56px !important;
}

.moomoo-disclaimer-wrap {
  position: relative;
}

.moomoo-disclaimer-trigger {
  position: relative;
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: help;
  color: var(--ti-ink-2);
}

.moomoo-disclaimer-trigger:focus-visible {
  outline: 2px solid var(--highlight-color);
  outline-offset: 2px;
  border-radius: 3px;
}

.moomoo-disclaimer-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1050;
  width: min(44rem, 90vw);
  max-height: min(33rem, 75vh);
  overflow-y: auto;
  padding: 0.875rem 1rem;
  border: 1px solid var(--ti-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ti-ink-2);
  box-shadow: 0 12px 30px rgba(11, 18, 32, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-50% + 8px));
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}

.moomoo-disclaimer-wrap.is-open .moomoo-disclaimer-popup,
.moomoo-disclaimer-trigger:hover .moomoo-disclaimer-popup,
.moomoo-disclaimer-trigger:focus .moomoo-disclaimer-popup,
.moomoo-disclaimer-trigger:focus-visible .moomoo-disclaimer-popup {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.moomoo-disclaimer-popup a {
  color: var(--ti-ink);
  text-decoration: underline;
}

/* Small screens */
/* @media (max-width: 576px) {
  .broker-hero {
    height: 400px;
  }
} */