/* Velocity Design System — Base Styles & Design Tokens
   =====================================================
   Fifth Third brand tokens extracted from Figma.
   Open Sans font + global resets for all velocity components.
   Loaded via red.velocity.base clientlib dependency.

   Typography scale: 8px base-unit spacing grid, Open Sans.
   Mobile-first responsive approach. */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600&display=swap");

/* ══════════════════════════════════════════════════════
   1. DESIGN TOKENS (CSS Custom Properties)
   ══════════════════════════════════════════════════════ */
:root {
.velocity-ui {

  /* ── Colors — Brand ── */
  --vel-color-opal: #0064D1;
  --vel-color-azurite: #1D4094;
  --vel-color-navy: #1C2758;
  --vel-color-green: #08AA66;
  --vel-color-banner-blue: #EEF7FE;
  --vel-color-emerald: #26D07C;

  /* ── Colors — Extended Brand Palette ── */
  --vel-color-green-dark: #08AA66;
  --vel-color-green-light: #0DAA66;
  --vel-color-green-hover: #07965A;
  --vel-color-green-active: #068A50;
  --vel-color-topaz: #78C8F9;
  --vel-color-lapis: #00205B;
  --vel-color-moonstone: #696969;
  --vel-color-pearl: #E8E8E8;
  --vel-color-gray-bg: #F1F1F1;
  --vel-color-gray-border: #D9D9D9;
  --vel-color-gray-muted: #BEBFBF;
  --vel-color-dark-gray: #3E3E3E;
  --vel-color-mid-gray: #444444;
  --vel-color-gray-100: #F3F4F6;
  --vel-color-gray-200: #E5E7EB;
  --vel-color-gray-300: #D1D5DB;
  --vel-color-gray-400: #9CA3AF;
  --vel-color-gray-500: #6B7280;
  --vel-color-gray-600: #4B5563;
  --vel-color-gray-700: #374151;
  --vel-color-gray-800: #1F2937;
  --vel-color-gray-900: #111827;

  /* ── Colors — Text ── */
  --vel-color-text: #333333;
  --vel-color-text-dark: #0A0F0F;
  --vel-color-text-heading: #1A1A1A;
  --vel-color-text-muted: #6B7280;
  --vel-color-text-light: #4B5563;
  --vel-color-link: #1B4695;
  --vel-color-link-hover: #153A7A;
  --vel-color-white: #FFFFFF;

  /* ── Colors — Semantic ── */
  --vel-color-success: #08AA66;
  --vel-color-info: #0064D1;
  --vel-color-warning: #F59E0B;
  --vel-color-error: #DC2626;
  --vel-color-error-light: #EF4444;
  --vel-color-surface-light: #EEF7FE;
  --vel-color-surface-gray: #F1F1F1;
  --vel-color-divider: #BEBFBF;
  --vel-color-focus-ring: rgba(21, 128, 61, 0.35);
  --vel-color-overlay-light: rgba(255, 255, 255, 0.9);
  --vel-color-overlay-hover: rgba(0, 0, 0, 0.08);

  /* ── Typography — Font Family ── */
  --vel-font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* ── Typography — Display Scale (Hero headings) ── */
  --vel-display-xl-size: 48px;
  --vel-display-xl-line: 58px;
  --vel-display-xl-weight: 700;

  --vel-display-lg-size: 36px;
  --vel-display-lg-line: 44px;
  --vel-display-lg-weight: 700;

  --vel-display-md-size: 28px;
  --vel-display-md-line: 38px;
  --vel-display-md-weight: 700;

  /* ── Typography — Heading Scale ── */
  --vel-heading-xl-size: 32px;
  --vel-heading-xl-line: 44px;
  --vel-heading-xl-weight: 700;

  --vel-heading-lg-size: 27px;
  --vel-heading-lg-line: 32.4px;
  --vel-heading-lg-weight: 700;

  --vel-heading-md-size: 24px;
  --vel-heading-md-line: 28px;
  --vel-heading-md-weight: 700;

  --vel-heading-sm-size: 20px;
  --vel-heading-sm-line: 28px;
  --vel-heading-sm-weight: 700;

  /* ── Typography — Subheading ── */
  --vel-subheading-lg-size: 28px;
  --vel-subheading-lg-line: 39.2px;
  --vel-subheading-lg-weight: 600;

  --vel-subheading-md-size: 22.4px;
  --vel-subheading-md-line: 33.6px;
  --vel-subheading-md-weight: 400;

  /* ── Typography — Body Scale ── */
  --vel-body-xl-size: 20px;
  --vel-body-xl-line: 30px;
  --vel-body-xl-weight: 400;

  --vel-body-lg-size: 18px;
  --vel-body-lg-line: 28px;
  --vel-body-lg-weight: 400;

  --vel-body-md-size: 16px;
  --vel-body-md-line: 24px;
  --vel-body-md-weight: 400;

  --vel-body-sm-size: 14px;
  --vel-body-sm-line: 20px;
  --vel-body-sm-weight: 400;

  /* ── Typography — Small Scale ── */
  --vel-caption-size: 12px;
  --vel-caption-line: 16px;
  --vel-caption-weight: 400;

  --vel-overline-size: 11px;
  --vel-overline-line: 12.6px;
  --vel-overline-weight: 600;

  /* ── Typography — Button ── */
  --vel-btn-label-size: 20px;
  --vel-btn-label-line: 20px;
  --vel-btn-label-weight: 700;
  --vel-btn-label-spacing: 1px;

  --vel-body-bold-weight: 700;

  /* ── Typography — Legacy aliases (backward compat) ── */
  --vel-title-xl-size: var(--vel-display-xl-size);
  --vel-title-xl-line: var(--vel-display-xl-line);

  --vel-title-lg-size: var(--vel-display-xl-size);
  --vel-title-lg-line: var(--vel-display-xl-line);
  --vel-title-lg-weight: var(--vel-display-xl-weight);

  --vel-title-md-size: var(--vel-heading-xl-size);
  --vel-title-md-line: var(--vel-heading-xl-line);
  --vel-title-md-weight: var(--vel-heading-xl-weight);

  --vel-title-md-mobile-size: var(--vel-display-md-size);
  --vel-title-md-mobile-line: var(--vel-display-md-line);

  --vel-title-sm-size: var(--vel-heading-sm-size);
  --vel-title-sm-line: var(--vel-heading-sm-line);
  --vel-title-sm-weight: var(--vel-heading-sm-weight);

  --vel-section-heading-size: var(--vel-heading-lg-size);
  --vel-section-heading-line: var(--vel-heading-lg-line);
  --vel-section-heading-weight: var(--vel-heading-lg-weight);

  --vel-body-size: var(--vel-body-md-size);
  --vel-body-line: var(--vel-body-md-line);

  --vel-label-xs-size: var(--vel-overline-size);
  --vel-label-xs-line: var(--vel-overline-line);

  --vel-label-sm-size: var(--vel-caption-size);
  --vel-label-sm-line: var(--vel-caption-line);

  --vel-card-title-size: var(--vel-subheading-lg-size);
  --vel-card-title-line: var(--vel-subheading-lg-line);
  --vel-card-title-weight: var(--vel-subheading-lg-weight);

  --vel-quote-size: var(--vel-subheading-md-size);
  --vel-quote-line: 1.5;

  --vel-faq-q-size: var(--vel-body-md-size);
  --vel-faq-q-line: 18.4px;

  /* ── Spacing Scale (8px base unit) ── */
  --vel-space-0: 0;
  --vel-space-1: 4px;
  --vel-space-2: 8px;
  --vel-space-3: 12px;
  --vel-space-4: 16px;
  --vel-space-5: 20px;
  --vel-space-6: 24px;
  --vel-space-8: 32px;
  --vel-space-10: 40px;
  --vel-space-12: 48px;
  --vel-space-16: 64px;
  --vel-space-20: 80px;
  --vel-space-24: 96px;
  --vel-space-32: 128px;

  /* ── Spacing — Legacy aliases (backward compat) ── */
  --vel-spacing-xs: var(--vel-space-2);
  --vel-spacing-sm: var(--vel-space-4);
  --vel-spacing-md: var(--vel-space-6);
  --vel-spacing-lg: var(--vel-space-8);
  --vel-spacing-xl: var(--vel-space-10);
  --vel-spacing-2xl: var(--vel-space-12);
  --vel-spacing-3xl: var(--vel-space-16);
  --vel-spacing-4xl: var(--vel-space-24);
  --vel-spacing-5xl: 72px;
  --vel-spacing-6xl: 108px;
  --vel-spacing-7xl: 120px;
  --vel-spacing-8xl: 160px;

  /* ── Section Padding ── */
  --vel-section-py-sm: var(--vel-space-8);
  --vel-section-py-md: var(--vel-space-12);
  --vel-section-py-lg: var(--vel-space-16);
  --vel-section-py-xl: var(--vel-space-24);

  /* Legacy section padding aliases */
  --vel-section-pad-y: var(--vel-section-py-lg);
  --vel-section-pad-y-sm: var(--vel-section-py-sm);
  --vel-section-pad-y-lg: var(--vel-section-py-xl);

  /* ── Layout ── */
  --vel-max-width: 1440px;
  --vel-content-width: 1200px;
  --vel-gutter: 120px;
  --vel-gutter-tablet: 48px;
  --vel-gutter-mobile: 16px;
  --vel-gutter-narrow: 108px;
  --vel-gutter-wide: 160px;

  /* ── Border Radius ── */
  --vel-radius-sm: 4px;
  --vel-radius-md: 8px;
  --vel-radius-lg: 12px;
  --vel-radius-pill: 32px;
  --vel-radius-circle: 50%;
  --vel-radius-full: 9999px;

  /* ── Shadows ── */
  --vel-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --vel-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --vel-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --vel-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --vel-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --vel-shadow-desktop: 8px 24px 25px rgba(0, 0, 0, 0.3);
  --vel-shadow-mobile: 4px 16px 25px rgba(0, 0, 0, 0.3);
  --vel-shadow-soft: 0 0 10px rgba(0, 0, 0, 0.06);

  /* ── Button ── */
  --vel-btn-height: 56px;
  --vel-btn-pad-x: var(--vel-space-8);
  --vel-btn-pad-y: 15px;
  --vel-btn-border: 2px;
  --vel-btn-radius-pill: var(--vel-radius-pill);
  --vel-btn-radius-default: var(--vel-radius-sm);
  --vel-btn-primary-bg: #08AA66;
  --vel-btn-primary-hover: #07965A;
  --vel-btn-primary-active: #068A50;
  --vel-btn-primary-text: #FFFFFF;
  --vel-btn-outline-border: #1B4695;
  --vel-btn-outline-text: #1B4695;
  --vel-btn-outline-hover-bg: #F0F4FA;
  --vel-btn-outline-hover-border: #153A7A;
  --vel-btn-secondary-bg: #1F2937;
  --vel-btn-secondary-hover: #111827;
  --vel-btn-secondary-active: #030712;

  /* ── Counter ── */
  --vel-counter-size: var(--vel-space-12);
  --vel-counter-font-size: var(--vel-heading-xl-size);

  /* ── Transitions ── */
  --vel-transition: 200ms ease;
  --vel-transition-fast: 150ms ease;
  --vel-transition-slow: 400ms ease-in-out;

  /* ── Icon Sizes ── */
  --vel-icon-xs: 16px;
  --vel-icon-sm: 20px;
  --vel-icon-md: 24px;
  --vel-icon-lg: 32px;
  --vel-icon-xl: 40px;
}


/* ══════════════════════════════════════════════════════
   6. VEL-PROSE — Rich Text / RTE output styling
   Applied to the .vel-prose wrapper in rich-text.html.
   Styles all HTML elements emitted by the AEM RTE
   (links, lists, inline formats, headings, etc.).
   ══════════════════════════════════════════════════════ */

/* ── Heading links (Heading component — classless RTE output) ──
   Links inside heading elements inherit the heading color and
   keep an underline so they remain identifiable as links. */
.velocity-ui h1 a, .velocity-ui h2 a, .velocity-ui h3 a, .velocity-ui h4 a, .velocity-ui h5 a, .velocity-ui h6 a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Global link underline — beats Tailwind preflight's no-decoration default ──
   Ensures all <a href> inside any velocity component are always underlined.
   Excludes buttons and nav elements where underline would be wrong. */
.velocity-ui a[href]:not([role="button"]):not([class*="button"]):not([class*="btn"]):not([class*="no-underline"]) {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.velocity-ui a[href]:not([role="button"]):not([class*="button"]):not([class*="btn"]):not([class*="no-underline"]):hover {
  text-decoration-thickness: 2px !important;
}
/* Buttons rendered as <a> tags — never underline */
.velocity-ui a[href][role="button"],
.velocity-ui a[href][class*="button"],
.velocity-ui a[href][class*="btn"],
.velocity-ui a[href][class*="no-underline"] {
  text-decoration: none !important;
}

/* ── Bold/italic inside headings (Heading component — classless RTE output) ──
   Tailwind preflight sets `strong { font-weight: bolder }` which is invisible
   when the parent heading is already 700 and Open Sans has no heavier variant.
   Explicit 800 ensures bold is visually heavier. Open Sans 800 is loaded in
   the Google Fonts import above. */
.velocity-ui h1 strong, .velocity-ui h1 b,
.velocity-ui h2 strong, .velocity-ui h2 b,
.velocity-ui h3 strong, .velocity-ui h3 b,
.velocity-ui h4 strong, .velocity-ui h4 b,
.velocity-ui h5 strong, .velocity-ui h5 b,
.velocity-ui h6 strong, .velocity-ui h6 b {
  font-weight: 800;
}
.velocity-ui h1 em, .velocity-ui h1 i,
.velocity-ui h2 em, .velocity-ui h2 i,
.velocity-ui h3 em, .velocity-ui h3 i,
.velocity-ui h4 em, .velocity-ui h4 i,
.velocity-ui h5 em, .velocity-ui h5 i,
.velocity-ui h6 em, .velocity-ui h6 i {
  font-style: italic;
}

/* ── Paragraphs ── */
.vel-prose p {
  margin-top: 0;
  margin-bottom: 1rem;
}
.vel-prose p:last-child { margin-bottom: 0; }

/* ── Links ── */
.vel-prose a {
  color: var(--vel-color-link, #1B4695);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
.vel-prose a:hover {
  color: var(--vel-color-opal, #0064D1);
  text-decoration-thickness: 2px;
}
/* Dark background: author chose "Dark background" → text-vel-white on wrapper.
   Links use Topaz (#78C8F9) — WCAG AA contrast on lapis/navy/opal/azurite. */
.vel-prose.text-vel-white a {
  color: var(--vel-color-topaz, #78C8F9);
}
.vel-prose.text-vel-white a:hover {
  color: #FFFFFF;
}

/* ── Inline formats ── */
.vel-prose strong,
.vel-prose b { font-weight: 700; }
.vel-prose em,
.vel-prose i  { font-style: italic; }
.vel-prose u  { text-decoration: underline; text-underline-offset: 2px; }

/* ── Super/subscript — global override; beats legacy style.css fixed rem values ── */
/* Covers rich-text, card body/heading, carousel, list, accordion, hero, section, banner */
.velocity-ui sup,
.velocity-ui sub {
  font-size: 0.65em !important;
  line-height: 0 !important;
  position: relative !important;
  vertical-align: baseline !important;
}
.velocity-ui sup { top: -0.5em !important; }
.velocity-ui sub { bottom: -0.25em !important; }

/* ── Lists ── */
.vel-prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.vel-prose ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.vel-prose ul:last-child,
.vel-prose ol:last-child { margin-bottom: 0; }
.vel-prose li { margin-bottom: 0.25rem; line-height: 1.6; }
.vel-prose li > ul,
.vel-prose li > ol { margin-top: 0.25rem; margin-bottom: 0.25rem; }

/* ── Headings inside rich text ── */
.vel-prose h1,
.vel-prose h2,
.vel-prose h3,
.vel-prose h4,
.vel-prose h5,
.vel-prose h6 {
  font-family: var(--vel-font-family);
  font-weight: 700 !important;
  color: inherit !important;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
.vel-prose h1:first-child,
.vel-prose h2:first-child,
.vel-prose h3:first-child,
.vel-prose h4:first-child,
.vel-prose h5:first-child,
.vel-prose h6:first-child { margin-top: 0; }
.vel-prose h1 { font-size: 48px !important; line-height: 56px; }
.vel-prose h2 { font-size: 36px !important; line-height: 44px; }
.vel-prose h3 { font-size: 30px !important; line-height: 40px; }
.vel-prose h4 { font-size: 24px !important; line-height: 32px; }
.vel-prose h5 { font-size: 20px !important; line-height: 28px; }
.vel-prose h6 { font-size: 16px !important; line-height: 24px; }

/* ── Horizontal rule ── */
.vel-prose hr {
  border: none;
  border-top: 1px solid var(--vel-color-divider, #BEBFBF);
  margin: 1.5rem 0;
}

/* ── Blockquote ── */
.vel-prose blockquote {
  border-left: 4px solid var(--vel-color-opal, #0064D1);
  margin: 1rem 0;
  padding: 0.5rem 0 0.5rem 1rem;
  color: var(--vel-color-text-muted, #6B7280);
  font-style: italic;
}

/* ── Tables ── */
.vel-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 14px;
}
.vel-prose th,
.vel-prose td {
  border: 1px solid var(--vel-color-gray-border, #D9D9D9);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.vel-prose th {
  font-weight: 600;
  background-color: var(--vel-color-gray-100, #F3F4F6);
}


/* ══════════════════════════════════════════════════════
   7. E-COUPON FORM — Velocity Design System overrides
   Figma: node 11645-17576 (mobile) / 11645-17546 (desktop)
   Blue bg, white label, white-bg pill button + blue text.
   Mobile: stacked full-width input then button, 16px gap.
   Desktop: label row, then input (flex-grow) + button inline.
   ══════════════════════════════════════════════════════ */

/* Container */
[data-vel-section] .e-coupon-container {
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--vel-font-family, 'Open Sans', Arial, sans-serif) !important;
  width: 100% !important;
}

/* Form wrapper — mobile-first: column stack with 16px row gap */
[data-vel-section] .e-coupon-container .e-coupon-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;          /* 16px between all rows */
  width: 100% !important;
  margin: 0 !important;
  align-items: stretch !important;
}

/* Mobile only: button full width */
@media (max-width: 767px) {
  [data-vel-section] .e-coupon-container .e-coupon-form .primary-button,
  [data-vel-section] .e-coupon-container .e-coupon-form .cta-button {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
}

/* Desktop: label full row, then input+button inline */
@media (min-width: 768px) {
  [data-vel-section] .e-coupon-container .e-coupon-form {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    row-gap: 1rem !important;
    column-gap: 1rem !important;
  }
  /* Label spans full row at desktop */
  [data-vel-section] .e-coupon-container .e-coupon-form label {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  /* 2/3 input, 1/3 button — exact ratio accounting for column-gap */
  [data-vel-section] .e-coupon-container .e-coupon-form .email-input {
    flex: 2 1 calc(66.6667% - 0.5rem) !important;
    width: auto !important;
    min-width: 0 !important;
  }
  [data-vel-section] .e-coupon-container .e-coupon-form .primary-button,
  [data-vel-section] .e-coupon-container .e-coupon-form .cta-button {
    flex: 1 1 calc(33.3333% - 0.5rem) !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Label — dark text by default (light bg), white on dark-bg sections */
[data-vel-section] .e-coupon-container .e-coupon-form label {
  flex: 0 0 auto !important;
  width: 100% !important;
  font-family: var(--vel-font-family, 'Open Sans', Arial, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 19px !important;
  color: var(--vel-color-text-heading, #1F2937) !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 0 !important;
}
[data-vel-section][data-vel-bg="bg-vel-lapis"] .e-coupon-container .e-coupon-form label,
[data-vel-section][data-vel-bg="bg-vel-navy"] .e-coupon-container .e-coupon-form label,
[data-vel-section][data-vel-bg="bg-vel-opal"] .e-coupon-container .e-coupon-form label,
[data-vel-section][data-vel-bg="bg-vel-azurite"] .e-coupon-container .e-coupon-form label {
  color: #FFFFFF !important;
}

/* Email input */
[data-vel-section] .e-coupon-container .e-coupon-form .email-input {
  flex: 1 1 auto !important;
  font-family: var(--vel-font-family, 'Open Sans', Arial, sans-serif) !important;
  font-size: 16px !important;
  color: #1F2937 !important;
  background-color: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;  /* Figma: rounded corners */
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 1rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  order: 1 !important;
}
[data-vel-section] .e-coupon-container .e-coupon-form .email-input:focus {
  border-color: #0064D1 !important;
  box-shadow: 0 0 0 1px #0064D1 !important;
}
[data-vel-section] .e-coupon-container .e-coupon-form .email-input::placeholder {
  font-style: normal !important;
  color: #6B7280 !important;
}

/* Submit button — structure + default color (no variant) */
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button,
[data-vel-section] .e-coupon-container .e-coupon-form .cta-button {
  flex: 0 0 auto !important;
  font-family: var(--vel-font-family, 'Open Sans', Arial, sans-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: #FFFFFF !important;
  background-color: #08AA66 !important;
  border: none !important;
  border-radius: 9999px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 2rem !important;
  margin: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  text-transform: none !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 200ms ease, color 200ms ease !important;
  outline: none !important;
  order: 2 !important;
}
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button:hover,
[data-vel-section] .e-coupon-container .e-coupon-form .cta-button:hover {
  background-color: #07965A !important;
  color: #FFFFFF !important;
}
/* Variant: --opal = FT Blue */
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button--opal {
  background-color: #0064D1 !important;
  color: #FFFFFF !important;
}
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button--opal:hover {
  background-color: #004FA8 !important;
  color: #FFFFFF !important;
}
/* Variant: --ftgreen = FT Green */
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button--ftgreen {
  background-color: #08AA66 !important;
  color: #FFFFFF !important;
}
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button--ftgreen:hover {
  background-color: #07965A !important;
  color: #FFFFFF !important;
}
/* Variant: --azurite = Dark Blue */
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button--azurite {
  background-color: #1D4094 !important;
  color: #FFFFFF !important;
}
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button--azurite:hover {
  background-color: #163073 !important;
  color: #FFFFFF !important;
}
/* Variant: --topaz = Light Blue */
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button--topaz {
  background-color: #78C8F9 !important;
  color: #000000 !important;
}
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button--topaz:hover {
  background-color: #4AAEE8 !important;
  color: #000000 !important;
}
/* On dark-bg sections with NO variant selected: white pill + blue text */
[data-vel-section][data-vel-bg="bg-vel-lapis"] .e-coupon-container .e-coupon-form .primary-button:not([class*="primary-button--"]),
[data-vel-section][data-vel-bg="bg-vel-lapis"] .e-coupon-container .e-coupon-form .cta-button:not([class*="primary-button--"]),
[data-vel-section][data-vel-bg="bg-vel-navy"] .e-coupon-container .e-coupon-form .primary-button:not([class*="primary-button--"]),
[data-vel-section][data-vel-bg="bg-vel-navy"] .e-coupon-container .e-coupon-form .cta-button:not([class*="primary-button--"]),
[data-vel-section][data-vel-bg="bg-vel-opal"] .e-coupon-container .e-coupon-form .primary-button:not([class*="primary-button--"]),
[data-vel-section][data-vel-bg="bg-vel-opal"] .e-coupon-container .e-coupon-form .cta-button:not([class*="primary-button--"]),
[data-vel-section][data-vel-bg="bg-vel-azurite"] .e-coupon-container .e-coupon-form .primary-button:not([class*="primary-button--"]),
[data-vel-section][data-vel-bg="bg-vel-azurite"] .e-coupon-container .e-coupon-form .cta-button:not([class*="primary-button--"]) {
  background-color: #FFFFFF !important;
  color: #0064D1 !important;
}
[data-vel-section][data-vel-bg="bg-vel-lapis"] .e-coupon-container .e-coupon-form .primary-button:not([class*="primary-button--"]):hover,
[data-vel-section][data-vel-bg="bg-vel-lapis"] .e-coupon-container .e-coupon-form .cta-button:not([class*="primary-button--"]):hover,
[data-vel-section][data-vel-bg="bg-vel-navy"] .e-coupon-container .e-coupon-form .primary-button:not([class*="primary-button--"]):hover,
[data-vel-section][data-vel-bg="bg-vel-navy"] .e-coupon-container .e-coupon-form .cta-button:not([class*="primary-button--"]):hover,
[data-vel-section][data-vel-bg="bg-vel-opal"] .e-coupon-container .e-coupon-form .primary-button:not([class*="primary-button--"]):hover,
[data-vel-section][data-vel-bg="bg-vel-opal"] .e-coupon-container .e-coupon-form .cta-button:not([class*="primary-button--"]):hover,
[data-vel-section][data-vel-bg="bg-vel-azurite"] .e-coupon-container .e-coupon-form .primary-button:not([class*="primary-button--"]):hover,
[data-vel-section][data-vel-bg="bg-vel-azurite"] .e-coupon-container .e-coupon-form .cta-button:not([class*="primary-button--"]):hover {
  background-color: #E6F0FF !important;
  color: #0064D1 !important;
}
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button:focus-visible,
[data-vel-section] .e-coupon-container .e-coupon-form .cta-button:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 4px !important;
}
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button[disabled],
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button[disabled="disabled"] {
  background-color: #F4F4F4 !important;
  color: #949595 !important;
  cursor: not-allowed !important;
}

/* Ghost — default: blue outline on light bg */
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button--ghost {
  background-color: transparent !important;
  color: #0064D1 !important;
  border: 2px solid #0064D1 !important;
}
[data-vel-section] .e-coupon-container .e-coupon-form .primary-button--ghost:hover {
  background-color: #0064D1 !important;
  color: #FFFFFF !important;
}
/* Ghost on dark-bg sections: white outline */
[data-vel-section][data-vel-bg="bg-vel-lapis"] .e-coupon-container .e-coupon-form .primary-button--ghost,
[data-vel-section][data-vel-bg="bg-vel-navy"] .e-coupon-container .e-coupon-form .primary-button--ghost,
[data-vel-section][data-vel-bg="bg-vel-opal"] .e-coupon-container .e-coupon-form .primary-button--ghost,
[data-vel-section][data-vel-bg="bg-vel-azurite"] .e-coupon-container .e-coupon-form .primary-button--ghost {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}
[data-vel-section][data-vel-bg="bg-vel-lapis"] .e-coupon-container .e-coupon-form .primary-button--ghost:hover,
[data-vel-section][data-vel-bg="bg-vel-navy"] .e-coupon-container .e-coupon-form .primary-button--ghost:hover,
[data-vel-section][data-vel-bg="bg-vel-opal"] .e-coupon-container .e-coupon-form .primary-button--ghost:hover,
[data-vel-section][data-vel-bg="bg-vel-azurite"] .e-coupon-container .e-coupon-form .primary-button--ghost:hover {
  background-color: #FFFFFF !important;
  color: #0064D1 !important;
}

/* Success / error */
[data-vel-section] .e-coupon-container > .success {
  font-family: var(--vel-font-family, 'Open Sans', Arial, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--vel-color-emerald, #08AA66) !important;
  padding: 0 0 1rem 0 !important;
  width: 100% !important;
}
[data-vel-section][data-vel-bg="bg-vel-lapis"] .e-coupon-container > .success,
[data-vel-section][data-vel-bg="bg-vel-navy"] .e-coupon-container > .success,
[data-vel-section][data-vel-bg="bg-vel-opal"] .e-coupon-container > .success,
[data-vel-section][data-vel-bg="bg-vel-azurite"] .e-coupon-container > .success {
  color: #FFFFFF !important;
}
[data-vel-section] .e-coupon-container .e-coupon-form > .error {
  font-family: var(--vel-font-family, 'Open Sans', Arial, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #FCA5A5 !important;
  padding: 0 !important;
  order: 3 !important;
  flex: 0 0 100% !important;
  margin-top: 0 !important;
}

/* Mobile: input and button each full-width */
@media (max-width: 767px) {
  [data-vel-section] .e-coupon-container .e-coupon-form .email-input,
  [data-vel-section] .e-coupon-container .e-coupon-form .primary-button,
  [data-vel-section] .e-coupon-container .e-coupon-form .cta-button {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}

/* Desktop: button below input (wrapped row) — stretch to full width */
@media (min-width: 768px) {
  [data-vel-section] .e-coupon-container .e-coupon-form .primary-button,
  [data-vel-section] .e-coupon-container .e-coupon-form .cta-button {
    flex: 1 1 calc(33.3333% - 0.5rem) !important;
    width: auto !important;
    min-width: fit-content !important;
    max-width: 100% !important;
  }
}