/*
 * settlement-detail-bugfixes-1581841.css — Task #1581841
 * Owns: Fixes for 4 bugs on settlement detail pages
 * Does NOT own: layout, typography, colors, component design
 *
 * Bug 1: Overlapping banner text — force display:none on inactive rotator messages
 * Bug 2: Countdown timer blank digits — ensure .cd-num / .tdt-num are visible
 * Bug 3: 4+ sticky bars stacking — consolidate to max 2 sticky elements
 * Bug 4: Dual button states — hide success messages (fixed via inline style in EJS)
 */

/* ═══════════════════════════════════════════════════════════════════════
   BUG 1: Announcement bar — only ONE message visible at a time.
   The opacity-based transition allows both messages to bleed through
   during the 0.5s crossfade. Switch to display toggling so only the
   active message renders in the DOM flow.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide all inactive messages completely — not just opacity */
#sr-announcement-bar .sr-anbar-msg:not(.sr-anbar-msg--active) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Active message: visible, no transition delay for instant swap */
#sr-announcement-bar .sr-anbar-msg.sr-anbar-msg--active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUG 2: Countdown timer blank digits — ensure number elements are
   visible with correct size, color, and display.
   Multiple countdown implementations exist; fix all of them.
   ═══════════════════════════════════════════════════════════════════════ */

/* Segmented countdown (detail stats area) — .cd-num */
.deadline-countdown-block {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin: 8px 0;
}
.cd-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
}
.cd-num {
  display: block !important;
  visibility: visible !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #00B37D !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.cd-label {
  display: block !important;
  font-size: 0.65rem;
  font-weight: 600;
  color: #6B7280;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.cd-sep {
  font-size: 1.1rem;
  font-weight: 700;
  color: #D1D5DB;
  padding-bottom: 14px;
}
/* Urgency color variants */
.deadline-countdown-block.cd-urgent .cd-num,
.deadline-countdown-block.cd-critical .cd-num {
  color: #DC2626 !important;
}
.deadline-countdown-block.cd-warn .cd-num {
  color: #D97706 !important;
}
.deadline-countdown-block.cd-expired .cd-num {
  color: #9CA3AF !important;
}

/* Top deadline timer — .tdt-num */
.tdt-num {
  display: block !important;
  visibility: visible !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #00B37D !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.tdt-lbl {
  display: block !important;
  visibility: visible !important;
}
.top-deadline-timer.tdt-critical .tdt-num,
.top-deadline-timer.tdt-emergency .tdt-num {
  color: #DC2626 !important;
}
.top-deadline-timer.tdt-warn .tdt-num {
  color: #D97706 !important;
}

/* JS-rendered countdown banner — .sr-countdown-num */
.sr-countdown-num {
  display: block !important;
  visibility: visible !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUG 3: Sticky bar stacking — reduce to MAX 2 sticky elements.
   Keep: announcement bar (top) + ONE mobile sticky CTA (bottom).
   Convert everything else to inline or hide duplicates.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Convert deadline urgency bar from sticky to inline --- */
.sr-deadline-urgency-bar {
  position: static !important;
}

/* --- Convert sr-countdown-banner from sticky to inline --- */
.sr-countdown-banner {
  position: static !important;
}

/* --- The top deadline timer: make inline, not sticky --- */
.top-deadline-timer {
  position: static !important;
}

/* --- The FOMO / urgency banners at page top: inline --- */
.ue-page-banner {
  position: static !important;
}
#urgentDeadlineBanner {
  position: static !important;
}

/* --- stickyCtaBar (email capture bar): hide — stacks on top of mobile CTA --- */
#stickyCtaBar {
  position: static !important;
  display: none !important;
}

/* --- Desktop sticky CTA: convert to inline --- */
.sd-sticky-cta {
  position: static !important;
}
#sdStickyCta {
  position: static !important;
}

/* --- srStickyMobileBar: hide — redundant with #mobileStickyFileCta --- */
#srStickyMobileBar {
  display: none !important;
}

/* --- sd-mobile-sticky-cta: hide — redundant with primary mobile CTA --- */
#sdMobileStickyCta {
  display: none !important;
}

/* --- Keep ONLY the primary mobile sticky CTA at the bottom --- */
/* #mobileStickyFileCta is the feature-rich version with doom clock + dismiss + GA4 */
.mobile-sticky-cta {
  z-index: 8800;
}
#sr-mobile-sticky-cta {
  z-index: 8800;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUG 4: Dual button states — success messages hidden by default.
   Fixed via inline style="display:none" in EJS template.
   CSS fallback below uses regular specificity (no !important) so that
   inline style.display='inline' set by JS can override it.
   ═══════════════════════════════════════════════════════════════════════ */

/* Fallback: hide success states in case inline style is somehow stripped */
.drw-success,
.pww-success,
.remind-me-success {
  display: none;
}

/* Remind Me form: hidden by default until toggle opens it */
.remind-me-form-wrap {
  display: none;
}