/* ====== PROMO BANNER SECTION ====== */

/* Outer wrapper: full-width, centers the carousel horizontally */
.promo-banner-section {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Carousel root: relative container for absolutely-positioned slides & overlays */
.promo-banner-carousel {
  position: relative;
  width: 100%;
}

/* ====== CONSTRAINED ARROW OVERLAY ====== */

/* Centered overlay that constrains prev/next arrows to max-content-width.
   pointer-events: none lets clicks pass through; arrows re-enable their own. */
.promo-banner-constrained {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 72px;
  pointer-events: none;
  box-sizing: border-box;
}

/* ====== CAROUSEL ARROWS ====== */

/* Circular prev/next navigation buttons with frosted-glass effect.
   Native <button> + <md-ripple> replaces md-filled-tonal-icon-button
   to avoid duplicate CustomElementRegistry errors from esm.run.
   pointer-events: auto re-enables clicks inside the no-pointer overlay. */
.promo-banner-arrow {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;   /* clickable inside the no-pointer overlay */
  flex-shrink: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0px 12px 48px 0px rgba(0, 0, 0, 0.4);

  /* md-ripple overrides */
  --md-ripple-hover-color: white;
  --md-ripple-pressed-color: white;
  --md-ripple-hover-opacity: 0.08;
  --md-ripple-pressed-opacity: 0.12;
}

/* Force arrow icons to white */
.promo-banner-arrow img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

/* Flip the "prev" arrow to point left (same SVG reused for both directions) */
.promo-banner-arrow--prev img {
  transform: rotate(180deg);
}

/* ====== CAROUSEL VIEWPORT ====== */

/* Visible area that clips slide animations; min-height prevents layout collapse */
.promo-banner-viewport {
  position: relative;
  overflow: hidden;
  min-height: 500px;
}

/* ====== CONFETTI OVERLAY ====== */

/* Canvas overlay for Rive confetti one-shot animation; hidden until JS triggers it */
.promo-banner-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

/* Visible while Rive animation is playing */
.promo-banner-confetti.playing {
  opacity: 1;
}

/* Tracks relative positioning context for slide cards */
.promo-banner-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Hidden layer used by JS to measure card heights without showing content */
.promo-banner-measure-layer {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

/* ====== BANNER CARD ====== */

/* Each slide card. Off-screen cards are position:absolute so they can
   animate in/out on top of the active card which is position:relative. */
.promo-banner-card {
  width: 100%;
  height: 100%;
  min-height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--promo-banner-active-padding-y) var(--promo-banner-active-padding-x);
  box-sizing: border-box;
  overflow: hidden;
  will-change: transform;      /* hint for GPU-accelerated slide animations */
  backface-visibility: hidden; /* prevents flicker on some browsers during transform */
}

/* Variant used inside the measure layer for height calculation */
.promo-banner-card--measure {
  position: relative;
  top: auto;
  left: auto;
  height: auto;
}

/* The active (current) card stays in normal flow to set the viewport height */
.promo-banner-card.promo-active {
  position: relative;
  padding: var(--promo-banner-active-padding-y) var(--promo-banner-active-padding-x);
}

/* ====== SLIDE ANIMATIONS (mirrors Flutter AnimatedSwitcher + SlideTransition) ====== */

:root {
  --promo-slide-overlap: 2px;                        /* slight overlap so no gap appears between slides */
  --promo-banner-active-padding-y: 72px;             /* vertical padding inside each card */
  --promo-banner-active-padding-x: 72px;             /* horizontal padding inside each card */
  --promo-banner-dot-active-height: 12px;            /* height of an active navigation dot */
  --promo-banner-read-details-gap-to-dots: 32px;     /* space between "Read details" button and dots */
}

/* Forward direction: incoming card enters from the right edge */
@keyframes slideInFromRight {
  from { transform: translateX(calc(100% - var(--promo-slide-overlap))); }
  to   { transform: translateX(0); }
}

/* Forward direction: outgoing card exits to the left edge */
@keyframes slideOutToLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% + var(--promo-slide-overlap))); }
}

/* Backward direction: incoming card enters from the left edge */
@keyframes slideInFromLeft {
  from { transform: translateX(calc(-100% + var(--promo-slide-overlap))); }
  to   { transform: translateX(0); }
}

/* Backward direction: outgoing card exits to the right edge */
@keyframes slideOutToRight {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100% - var(--promo-slide-overlap))); }
}

/* Animation utility classes — applied by JS during slide transitions (400ms ease-in-out) */
.promo-slide-in-right {
  animation: slideInFromRight 400ms ease-in-out forwards;
}

.promo-slide-out-left {
  animation: slideOutToLeft 400ms ease-in-out forwards;
}

.promo-slide-in-left {
  animation: slideInFromLeft 400ms ease-in-out forwards;
}

.promo-slide-out-right {
  animation: slideOutToRight 400ms ease-in-out forwards;
}

/* Gradient backgrounds per promotion type (matches Flutter brand colors) */
.promo-banner-card[data-type="local"] {
  background: linear-gradient(135deg, #189366, #079DD9); /* green-to-blue: local Cuban promotions */
}

.promo-banner-card[data-type="source"] {
  background: linear-gradient(135deg, #850B3E, #301759); /* magenta-to-purple: source/international promotions */
}

/* Default slide shown when no promotions are active (brand blue-to-purple) */
.promo-banner-card[data-default-slide="true"] {
  background: linear-gradient(130.52373215517412deg, rgb(40, 87, 215) 17.175%, rgb(129, 48, 242) 87.071%);
}

/* Fallback gradient when promotion type is unknown */
.promo-banner-card:not([data-type]) {
  background: linear-gradient(135deg, #850B3E, #301759);
}

/* ====== BACKGROUND SVG ====== */

/* Decorative SVG centered behind card content */
.promo-banner-bg-image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 377px;
  height: 377px;
  pointer-events: none;
}

/* Smaller background for the default (no-promo) slide */
.promo-banner-card[data-default-slide="true"] .promo-banner-bg-image {
  width: 349px;
  height: 349px;
}

/* ====== CARD CONTENT ====== */

/* 3-row grid layout: top (icon+name) | middle (title+subtitle) | bottom (date+button).
   The grid keeps the middle content vertically centered even when top/bottom vary. */
.promo-banner-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 0;
  align-items: start;
  justify-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
}

/* Default slide uses simple flex column instead of grid (simpler layout) */
.promo-banner-card[data-default-slide="true"] .promo-banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* Top group: Rive animation icon + promotion name */
.promo-banner-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: start;
  padding-bottom: 32px;
}

/* Rive animation canvas for the promotion icon */
.promo-banner-rive {
  width: 48px;
  height: 48px;
  display: block;
}

/* Promotion name label below the Rive icon */
.promo-banner-name {
  font-family: var(--promo-banner-name-font-family);
  font-size: var(--promo-banner-name-font-size);
  line-height: var(--promo-banner-name-line-height);
  font-weight: var(--promo-banner-name-font-weight);
  letter-spacing: var(--promo-banner-name-letter-spacing);
  color: #FDFDFF;
}

/* Middle group: subtitle text + main title (vertically centered in grid) */
.promo-banner-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  gap: 16px;
  align-self: center;
}

.promo-banner-card[data-default-slide="true"] .promo-banner-middle {
  gap: 32px;
}

.promo-banner-subtitle {
  font-family: var(--body-body-large-font-family);
  font-size: var(--body-body-large-font-size);
  line-height: var(--body-body-large-line-height);
  font-weight: var(--body-body-large-font-weight);
  color: #FDFDFF;
}

.promo-banner-card[data-default-slide="true"] .promo-banner-subtitle {
  font-family: var(--body-body-large-font-family);
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
}

.promo-banner-title {
  color: var(--light-inverseonsurface, #FDFDFF);
  text-align: center;
  font-family: var(--headline-headline-medium-font-family);
  font-size: var(--headline-headline-medium-font-size);
  font-style: var(--headline-headline-medium-font-style);
  font-weight: var(--headline-headline-medium-font-weight);
  line-height: var(--headline-headline-medium-line-height);
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
}

.promo-banner-card[data-default-slide="true"] .promo-banner-title {
  font-family: var(--headline-headline-large-font-family);
  font-size: 32px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

/* Desktop title override: bumps to headline-large typography tokens */
@media (min-width: 1080px) {
  .promo-banner-title {
    font-family: var(--headline-headline-large-font-family);
    font-size: var(--headline-headline-large-font-size);
    font-style: var(--headline-headline-large-font-style);
    font-weight: var(--headline-headline-large-font-weight);
    line-height: var(--headline-headline-large-line-height);
  }

  .promo-banner-card[data-default-slide="true"] .promo-banner-title {
    font-size: 32px;
    line-height: 32px;
  }
}

/* ====== BOTTOM GROUP: date badge + action button ====== */

/* Anchored to the bottom of the grid; margin-bottom reserves space for the navigation dots */
.promo-banner-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  align-self: end;
  padding-top: 32px;
  margin-bottom: calc(var(--promo-banner-dot-active-height) + var(--promo-banner-read-details-gap-to-dots));
}

/* "Now available" / "Coming soon" status label above the date badge */
.promo-banner-status {
  font-family: var(--label-label-small-font-family);
  font-size: var(--label-label-small-font-size);
  line-height: var(--label-label-small-line-height);
  font-weight: var(--label-label-small-font-weight);
}

.promo-banner-status.available {
  color: var(--fixed-tertiaryfixed);
}

.promo-banner-status.upcoming {
  color: var(--fixed-onprimaryfixed);
}

/* Date badge pill: icon + date text. Color varies by availability status. */
.promo-banner-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px 4px 4px;
  border-radius: 16px;
}

.promo-banner-date-badge.available {
  background-color: var(--fixed-tertiaryfixed);
}

.promo-banner-date-badge.upcoming {
  background-color: var(--fixed-onprimaryfixed);
}

.promo-banner-date-badge-icon {
  width: 24px;
  height: 24px;
}

.promo-banner-date-badge-text {
  font-family: var(--body-body-medium-font-family);
  font-size: var(--body-body-medium-font-size);
  line-height: var(--body-body-medium-line-height);
  font-weight: var(--body-body-medium-font-weight);
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gradient text effect on badge date — mimics Flutter ShaderMask.
   The text is transparent; a gradient background shows through via background-clip. */
.promo-banner-card[data-type="local"] .promo-banner-date-badge-text {
  background: linear-gradient(135deg, #189366, #079DD9);
  -webkit-background-clip: text;
  background-clip: text;
}

.promo-banner-card[data-type="source"] .promo-banner-date-badge-text {
  background: linear-gradient(135deg, #850B3E, #301759);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Gap wrapper between the date badge and the action button */
.promo-banner-date-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

/* "Read details" button */
.promo-banner-details-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 8px 16px;
  border: none;
  cursor: pointer;

  /* Material overrides */
  --md-filled-tonal-button-container-color: transparent;
  --md-filled-tonal-button-container-shape: 24px;
  --md-filled-tonal-button-container-elevation: 0;
  --md-filled-tonal-button-hover-container-elevation: 0;
  --md-filled-tonal-button-focus-container-elevation: 0;
  --md-filled-tonal-button-pressed-container-elevation: 0;
  --md-filled-tonal-button-label-text-color: #FFFFFF;
  --md-filled-tonal-button-hover-label-text-color: #FFFFFF;
  --md-filled-tonal-button-focus-label-text-color: #FFFFFF;
  --md-filled-tonal-button-pressed-label-text-color: #FFFFFF;
  --md-filled-tonal-button-hover-state-layer-color: white;
  --md-filled-tonal-button-hover-state-layer-opacity: 0.08;
  --md-filled-tonal-button-pressed-state-layer-color: white;
  --md-filled-tonal-button-pressed-state-layer-opacity: 0.12;
  --md-filled-tonal-button-focus-state-layer-color: white;
  --md-filled-tonal-button-icon-color: #FFFFFF;
  --md-filled-tonal-button-hover-icon-color: #FFFFFF;
  --md-filled-tonal-button-focus-icon-color: #FFFFFF;
  --md-filled-tonal-button-pressed-icon-color: #FFFFFF;
  --md-filled-tonal-button-icon-size: 24px;
}

.promo-banner-details-btn-label {
  font-family: var(--label-label-large-font-family);
  font-size: var(--label-label-large-font-size);
  line-height: var(--label-label-large-line-height);
  font-weight: var(--label-label-large-font-weight);
  color: #FFFFFF;
}

.promo-banner-details-btn-icon {
  width: 24px;
  height: 24px;
  fill: #FFFFFF;
  stroke: #FFFFFF;
}

/* ====== CAROUSEL DOTS ====== */

/* Dot strip: centered at the bottom of the viewport, above card padding */
.promo-banner-dots {
  position: absolute;
  bottom: var(--promo-banner-active-padding-y);
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-bottom: 0;
}

/* Inactive dot: small circle */
.promo-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: default;
  padding: 0;
  transition: width var(--transition-fast), height var(--transition-fast), border-radius var(--transition-fast);
  overflow: hidden;
  position: relative;
}

/* Active dot: wider pill shape to hold the progress fill animation */
.promo-banner-dot.active {
  width: 32px;
  height: 12px;
  border-radius: 6px;
}

/* Progress fill bar inside the active dot: animates width 0→100% over 8s (auto-advance timer) */
.promo-banner-dot-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  border-radius: 6px;
  background: #DDFF57;
}

.promo-banner-dot.active .promo-banner-dot-fill {
  animation: dotProgress 8s linear forwards;
}

@keyframes dotProgress {
  from { width: 0; }
  to { width: 100%; }
}

/* ====== READ DETAILS DIALOG ====== */

/* Modal dialog for expanded promotion details; uses native <dialog> element */
.promo-details-dialog {
  border: none;
  border-radius: 32px;
  padding: 0;
  max-width: 560px;
  width: 90vw;
  max-height: 80vh;
  max-height: 80dvh;
  margin: auto;
  overflow: clip;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  background: var(--light-surface);
}

/* When open, use flex column so scroll area + footer divide space properly */
.promo-details-dialog[open] {
  display: flex;
  flex-direction: column;
}

/* Frosted-glass scrim behind the dialog */
.promo-details-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Lock body scroll while dialog is open */
html.promo-dialog-open,
body.promo-dialog-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Scrollable area for dialog content (prevents dialog itself from scrolling) */
.promo-details-dialog-scroll {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  /* Prevent Safari from collapsing flex child to 0 inside <dialog> */
  min-height: 120px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Dialog header: colored gradient matching the promotion type */
.promo-details-dialog-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
}

.promo-details-dialog-header[data-type="local"] {
  background: linear-gradient(135deg, #189366, #079DD9);
}

.promo-details-dialog-header[data-type="source"] {
  background: linear-gradient(135deg, #850B3E, #301759);
}

/* Rive icon inside the dialog header */
.promo-details-dialog-rive {
  width: 40px;
  height: 40px;
  display: block;
  margin-bottom: 8px;
}

/* Promotion name in the dialog header */
.promo-details-dialog-name {
  font-family: var(--title-title-medium-font-family);
  font-size: var(--title-title-medium-font-size);
  line-height: var(--title-title-medium-line-height);
  font-weight: var(--title-title-medium-font-weight);
  color: #FDFDFF;
  margin-bottom: 32px;
}

.promo-details-dialog-subtitle {
  font-family: var(--label-label-large-font-family);
  font-size: var(--label-label-large-font-size);
  line-height: var(--label-label-large-line-height);
  font-weight: var(--label-label-large-font-weight);
  color: #FDFDFF;
  text-align: center;
}

.promo-details-dialog-title {
  font-family: var(--headline-headline-medium-font-family);
  font-size: var(--headline-headline-medium-font-size);
  line-height: var(--headline-headline-medium-line-height);
  font-weight: var(--headline-headline-medium-font-weight);
  color: #FDFDFF;
  text-align: center;
  margin-top: 16px;
}

/* Dialog body: rendered Markdown content (paragraphs, lists, code, etc.) */
.promo-details-dialog-body {
  padding: 32px;
  font-family: var(--body-body-large-font-family);
  font-size: var(--body-body-large-font-size);
  line-height: var(--body-body-large-line-height);
  font-weight: var(--body-body-large-font-weight);
  color: var(--light-onsurfacevariant);
}

.promo-details-dialog-body h1,
.promo-details-dialog-body h2,
.promo-details-dialog-body h3 {
  font-family: var(--title-title-large-font-family);
  font-size: var(--title-title-large-font-size);
  line-height: var(--title-title-large-line-height);
  font-weight: var(--title-title-large-font-weight);
  color: var(--light-onsurface);
  margin: 16px 0 8px;
}

.promo-details-dialog-body p {
  margin: 0 0 12px;
}

.promo-details-dialog-body ul,
.promo-details-dialog-body ol {
  padding-left: 20px;
  margin: 0 0 12px;
}

.promo-details-dialog-body ul {
  list-style-type: disc;
}

.promo-details-dialog-body ol {
  list-style-type: decimal;
}

.promo-details-dialog-body li {
  display: list-item;
  margin-bottom: 4px;
}

.promo-details-dialog-body strong {
  font-weight: 700;
}

.promo-details-dialog-body em {
  font-style: italic;
}

.promo-details-dialog-body blockquote {
  margin: 0 0 12px;
  padding-left: 16px;
  border-left: 4px solid var(--light-outline);
  color: var(--light-onsurfacevariant);
}

.promo-details-dialog-body code {
  font-family: monospace;
  font-size: 0.9em;
  background: var(--light-surfacecontainerlow);
  padding: 2px 6px;
  border-radius: 4px;
}

.promo-details-dialog-body pre {
  margin: 0 0 12px;
  padding: 12px;
  background: var(--light-surfacecontainerlow);
  border-radius: 8px;
  overflow-x: auto;
}

.promo-details-dialog-body pre code {
  background: none;
  padding: 0;
}

.promo-details-dialog-body a {
  color: var(--light-primary);
  text-decoration: underline;
}

.promo-details-dialog-body hr {
  border: none;
  border-top: 1px solid var(--light-outline);
  margin: 16px 0;
}

/* Dialog footer: sticky close button area */
.promo-details-dialog-footer {
  display: flex;
  justify-content: center;
  padding: 24px 32px;
  background: var(--light-surface);
}

.promo-details-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 48px;
  padding: 0 24px;

  font-family: var(--label-label-large-font-family);
  font-size: var(--label-label-large-font-size);
  line-height: var(--label-label-large-line-height);
  font-weight: var(--label-label-large-font-weight);

  /* Material overrides */
  --md-filled-tonal-button-container-color: var(--light-secondary);
  --md-filled-tonal-button-container-shape: 24px;
  --md-filled-tonal-button-container-height: 48px;
  --md-filled-tonal-button-container-elevation: 0;
  --md-filled-tonal-button-hover-container-elevation: 0;
  --md-filled-tonal-button-focus-container-elevation: 0;
  --md-filled-tonal-button-pressed-container-elevation: 0;
  --md-filled-tonal-button-label-text-color: var(--light-onsecondary);
  --md-filled-tonal-button-hover-label-text-color: var(--light-onsecondary);
  --md-filled-tonal-button-focus-label-text-color: var(--light-onsecondary);
  --md-filled-tonal-button-pressed-label-text-color: var(--light-onsecondary);
  --md-filled-tonal-button-hover-state-layer-color: black;
  --md-filled-tonal-button-hover-state-layer-opacity: 0.06;
  --md-filled-tonal-button-pressed-state-layer-color: black;
  --md-filled-tonal-button-pressed-state-layer-opacity: 0.10;
  --md-filled-tonal-button-focus-state-layer-color: black;
  --md-focus-ring-width: 0;
  --md-focus-ring-active-width: 0;
}

/* ====== CTA BUTTON ====== */

/* Lime "Get started" / "Recharge now" call-to-action on the default slide */
.promo-banner-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  max-width: 240px;
  padding: 0 16px 0 12px;
  border: none;
  cursor: pointer;

  /* Material overrides */
  --md-filled-tonal-button-container-color: #DDFF57;
  --md-filled-tonal-button-container-shape: 35px;
  --md-filled-tonal-button-container-height: 48px;
  --md-filled-tonal-button-container-elevation: 0;
  --md-filled-tonal-button-hover-container-elevation: 0;
  --md-filled-tonal-button-focus-container-elevation: 0;
  --md-filled-tonal-button-pressed-container-elevation: 0;
  --md-filled-tonal-button-label-text-color: #2A2B33;
  --md-filled-tonal-button-hover-label-text-color: #2A2B33;
  --md-filled-tonal-button-focus-label-text-color: #2A2B33;
  --md-filled-tonal-button-pressed-label-text-color: #2A2B33;
  --md-filled-tonal-button-hover-state-layer-color: black;
  --md-filled-tonal-button-hover-state-layer-opacity: 0.06;
  --md-filled-tonal-button-pressed-state-layer-color: black;
  --md-filled-tonal-button-pressed-state-layer-opacity: 0.10;
  --md-filled-tonal-button-focus-state-layer-color: black;
  --md-filled-tonal-button-icon-color: #2A2B33;
  --md-filled-tonal-button-hover-icon-color: #2A2B33;
  --md-filled-tonal-button-focus-icon-color: #2A2B33;
  --md-filled-tonal-button-pressed-icon-color: #2A2B33;
  --md-filled-tonal-button-icon-size: 24px;
}

/* Convert white SVG icon to dark (#2A2B33) to contrast lime background */
.promo-banner-cta-btn-icon {
  width: 24px;
  height: 24px;
  /* Convert white SVG to dark */
  filter: brightness(0) saturate(100%) invert(13%) sepia(10%) saturate(746%) hue-rotate(201deg) brightness(97%) contrast(93%);
}

.promo-banner-cta-btn-label {
  font-family: var(--label-label-large-font-family);
  font-size: var(--label-label-large-font-size);
  line-height: var(--label-label-large-line-height);
  font-weight: var(--label-label-large-font-weight);
  color: #2A2B33;
  white-space: nowrap;
}

/* ====== DATE TEXT ====== */

/* Plain date string shown beneath the title on default/loading slides */
.promo-banner-date-text {
  font-family: var(--body-body-large-font-family);
  font-size: var(--body-body-large-font-size);
  line-height: var(--body-body-large-line-height);
  font-weight: var(--body-body-large-font-weight);
  color: #FDFDFF;
  text-align: center;
}

/* ====== RESPONSIVE ====== */

/* Mobile: tighter padding, hide constrained arrows (swipe-only), wider dialog */
@media (max-width: 1080px) {
  :root {
    --promo-banner-active-padding-y: 56px;
    --promo-banner-active-padding-x: 24px;
  }

  .promo-banner-constrained {
    display: none;
  }

  .promo-banner-bg-image {
    width: 377px;
    height: 377px;
  }

  .promo-details-dialog {
    width: 95vw;
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: 24px;
  }
}