/* ============================================================
   SettlementRadar — In-reader Upsell Callout Cards
   Task #1529249: Mid-chapter product callouts in book reader

   Typography: Fraunces (display) + DM Sans (body) — matches books-1527573.css
   WCAG AA contrast throughout
   ============================================================ */

/* ─── Callout container ─────────────────────────────────────── */
.ru-callout {
  position: relative;
  margin: 36px 0;
  background: #ffffff;
  border: 1.5px solid #E5E7EB;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}

/* Subtle left accent stripe */
.ru-callout::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #00875A 0%, #00e5a0 100%);
  border-radius: 14px 0 0 14px;
}

.ru-callout--hiding {
  opacity: 0;
  transform: translateY(-4px);
}

/* ─── Dismiss button ────────────────────────────────────────── */
.ru-callout__dismiss {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: #9CA3AF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  font-family: inherit;
}

.ru-callout__dismiss:hover,
.ru-callout__dismiss:focus-visible {
  background: #F3F4F6;
  color: #374151;
  outline: 2px solid #00875A;
  outline-offset: 1px;
}

/* ─── Inner layout ──────────────────────────────────────────── */
.ru-callout__inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 44px 20px 20px; /* right pad for dismiss btn */
}

/* Autopilot variant — dark accent */
.ru-callout__inner--autopilot {
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

.ru-callout__inner--autopilot .ru-callout__label {
  color: #4F46E5;
}

/* Override left stripe for autopilot */
.ru-callout__inner--autopilot ~ .ru-callout::before,
.ru-callout:has(.ru-callout__inner--autopilot)::before {
  background: linear-gradient(180deg, #4F46E5 0%, #818CF8 100%);
}

/* ─── Icon ──────────────────────────────────────────────────── */
.ru-callout__icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ─── Body ──────────────────────────────────────────────────── */
.ru-callout__body {
  flex: 1;
  min-width: 0;
}

.ru-callout__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00643E;
  margin-bottom: 5px;
}

.ru-callout__text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #374151; /* #374151 on white = 9.7:1 contrast ✓ */
  line-height: 1.55;
  margin: 0 0 14px;
}

.ru-callout__text strong {
  color: #111827;
  font-weight: 700;
}

/* ─── CTA button ────────────────────────────────────────────── */
.ru-callout__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #00875A;
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  /* #00875A bg + white text = 4.6:1 — meets WCAG AA ✓ */
}

.ru-callout__btn:hover {
  background: #00643E;
  transform: translateY(-1px);
  color: #ffffff;
}

.ru-callout__btn:focus-visible {
  outline: 2px solid #00875A;
  outline-offset: 3px;
  color: #ffffff;
}

.ru-callout__btn--dark {
  background: #312E81;
  /* #312E81 bg + white text = 11.1:1 ✓ */
}

.ru-callout__btn--dark:hover {
  background: #1E1B4B;
  color: #ffffff;
}

.ru-callout__btn--dark:focus-visible {
  outline-color: #312E81;
  color: #ffffff;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ru-callout__inner {
    flex-direction: column;
    gap: 10px;
    padding: 18px 40px 18px 18px;
  }

  .ru-callout__icon {
    font-size: 28px;
  }

  .ru-callout__btn {
    width: 100%;
    justify-content: center;
  }
}