/* LoyaBuzz flat brand theme — loaded after the legacy component styles. */
:root {
  --blue: #1DA1F2;
  --teal: #1DA1F2;
  --orange: #FF8A00;
  --purple: #1DA1F2;
  --award-blue: #1DA1F2;
  --award-orange: #FF8A00;
  --award-purple: #1DA1F2;
  --loya-ai-start: #1DA1F2;
  --loya-ai-middle: #1DA1F2;
  --loya-ai-end: #FF8A00;
  --loya-ai-badge: #e9f6ff;
  --loya-ai-button: #1DA1F2;
  --brand-blue-soft: #eef8ff;
  --brand-orange-soft: #fff5e8;
  --brand-navy: #0b1f33;
}

::selection { color: #fff; background: #1DA1F2; }
body,
.hero,
.loyalty-section,
.customer-focus,
.faq,
.contact,
.result-body { background-image: none !important; }
body { background-color: #fff; }

/* Flat homepage surfaces */
.hero { background-color: #f8fcff !important; }
.hero-glow.glow-one { background: rgba(29,161,242,.12) !important; }
.hero-glow.glow-two { background: rgba(255,138,0,.10) !important; }
.hero-ai-network .network-signals path { stroke: #1DA1F2 !important; }
.hero-ai-network .network-signals path:nth-child(2) { stroke: #FF8A00 !important; }
.hero-ai-network .network-nodes circle { stroke: #1DA1F2 !important; }
.hero-ai-network .network-nodes circle:nth-child(3n) { stroke: #FF8A00 !important; }
.hero-growth-art .growth-line { stroke: #1DA1F2 !important; }
.hero-growth-art .growth-area { fill: rgba(29,161,242,.10) !important; }
.hero-growth-art .growth-bars rect:nth-child(odd) { fill: rgba(29,161,242,.12) !important; }
.hero-growth-art .growth-bars rect:nth-child(even) { fill: rgba(255,138,0,.12) !important; }
.hero-growth-art .growth-points circle { stroke: #1DA1F2 !important; }
.hero-growth-art .growth-points circle:last-child { stroke: #FF8A00 !important; }
.hero .hero-proof .proof-ai { background: #FF8A00 !important; }
.hero .hero-proof .proof-cash,
.hero .hero-proof .proof-deals { background: #1DA1F2 !important; }

.promogen-section { background: #f8fcff !important; }
.promo-gallery-studio { background: #eef8ff !important; }
.promo-message { color: #0b1f33 !important; }
.promo-message h2,
.promo-message .check-list strong { color: #0b1f33 !important; }
.promo-message > p,
.promo-message .check-list small,
.promo-action-row > span { color: #667684 !important; }
.promo-message .brand-kicker { color: #1DA1F2 !important; }
.promo-message .check-list li { background: #fff !important; }
.promo-message .check-list li > span { background: #1DA1F2 !important; }
.promo-message .check-list li:first-child > span { background: #FF8A00 !important; }
.promo-action-row .button.primary {
  color: #fff !important;
  background: #FF8A00 !important;
  box-shadow: 0 16px 34px rgba(255,138,0,.24) !important;
}
.merchant-slider { background: #fff !important; }

.loyalty-section { background-color: #f4faff !important; }
.loyalty-section .step-card { background: #fff !important; }
.loyalty-section .step-card:nth-child(1),
.loyalty-section .step-card:nth-child(3) { border-top-color: #1DA1F2 !important; }
.loyalty-section .step-card:nth-child(2) { border-top-color: #FF8A00 !important; }
.loyalty-discover { background: #1DA1F2 !important; }
.customer-focus { background-color: #fff8ef !important; }
.business-features article { background: rgba(255,255,255,.86) !important; }
.faq { background-color: #fff !important; }
.download-card { background: #eef8ff !important; border-color: rgba(29,161,242,.16) !important; }
.download-card::after { border-color: rgba(29,161,242,.08) !important; }
.contact { background-color: #f8fcff !important; }
.nav-cta,
.button.primary,
.gallery-hint i { background: #1DA1F2 !important; }
.button.white { color: #1DA1F2 !important; }
footer { background: #0b1f33 !important; }

/* Flat PromoGen checkout */
.promogen-dialog { background: #f7fbff !important; }
.promogen-dialog-head,
.promo-mode-panel,
.payment-panel,
.mode-card,
.category-card,
.optional-details,
.image-upload-card,
.guest-contact-section { background: #fff !important; }
.mode-card.active,
.category-card.active,
.image-upload-card.has-preview {
  border-color: #1DA1F2 !important;
  background: #eef8ff !important;
  box-shadow: 0 10px 26px rgba(29,161,242,.12) !important;
}
.mode-card.active > span,
.category-card.active i,
.payment-actions .button.primary { background: #1DA1F2 !important; color: #fff !important; }
.category-heading > span { color: #147fc0 !important; background: #e9f6ff !important; }
.promogen-steps i { background: rgba(29,161,242,.22) !important; }
.promogen-steps span.active::before { background: #FF8A00 !important; }
.promogen-form input:focus,
.promogen-form textarea:focus,
.promogen-form select:focus { border-color: #1DA1F2 !important; box-shadow: 0 0 0 4px rgba(29,161,242,.12) !important; }
.promogen-dialog .consent-row input:checked + .consent-check { border-color: #1DA1F2 !important; background: #1DA1F2 !important; }

/* Flat result experience */
.result-body { background-color: #f4faff !important; }
.result-wait-card,
.result-card { background: #fff !important; }
.result-image-placeholder,
.result-image { background: #eef8ff !important; }
.progress-track i,
.working-pill,
.result-actions .button.primary { background: #1DA1F2 !important; }
.working-pill { color: #fff !important; }
.countdown-value { stroke: #1DA1F2 !important; }
.result-header > span { color: #147fc0 !important; background: #e9f6ff !important; }

/* New supplied assets are transparent and should not be clipped. */
.brand-kicker img,
.customer-badge .badge-bee img,
.download-bee img,
.growth-badge img { object-fit: contain !important; }
.footer-wordmark { filter: none !important; }

/* Supplied bee + wordmark lockup */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand .brand-bee,
.result-brand .brand-bee {
  display: block;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.brand .brand-wordmark { width: 178px; height: auto; }
.result-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.result-header .result-brand .brand-wordmark { display: block; width: 164px; height: auto; }

/* PromoGen: compact, conversion-focused two-column showcase. */
.promogen-section { padding: clamp(92px, 8vw, 126px) 0 !important; }
.promogen-section .promo-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(54px, 6vw, 82px) !important;
  align-items: center !important;
}
.promogen-section .promo-gallery-studio {
  min-height: 0 !important;
  padding: 22px !important;
  border: 1px solid rgba(29,161,242,.12) !important;
  box-shadow: 0 24px 54px rgba(29,161,242,.13) !important;
}
.promogen-section .gallery-heading span { color: #147fc0 !important; background: #fff !important; }
.promogen-section .gallery-heading strong,
.promogen-section .gallery-hint { color: #536b7a !important; }
.promogen-section .promo-gallery {
  grid-auto-columns: calc((100% - 48px) / 5) !important;
  padding: 14px !important;
}
.promogen-section .promo-message {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}
.promogen-section .promo-message h2 {
  max-width: 820px;
  margin: 14px auto 18px;
  font-size: clamp(3.2rem, 5vw, 5.2rem);
}
.promogen-section .promo-message > p { max-width: 760px; margin: 0 auto; }
.promogen-section .promo-message .check-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
  text-align: left;
}
.promogen-section .promo-message .check-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 13px;
  align-items: start;
  padding: 15px 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(29,161,242,.08) !important;
}
.promogen-section .promo-message .check-list li > span { width: 30px; height: 30px; }
.promogen-section .promo-action-row { justify-content: center; margin-top: 28px; }

/* Download CTA: clean solid brand panel, no inherited decorative rings. */
.download { padding: clamp(78px, 8vw, 116px) 0 !important; background: #fff !important; }
.download .download-card {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(38px, 5vw, 72px);
  min-height: 340px;
  padding: 54px 68px;
  overflow: hidden;
  border: 0 !important;
  border-left: 8px solid #FF8A00 !important;
  border-radius: 4px !important;
  color: #fff !important;
  background: #1DA1F2 !important;
  box-shadow: 0 26px 58px rgba(29,161,242,.22) !important;
}
.download .download-card::after { display: none !important; }
.download .download-bee {
  width: 210px;
  height: 210px;
  min-height: 0;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: 50%;
  background: #fff !important;
  box-shadow: 0 18px 40px rgba(4,61,96,.18);
}
.download .download-bee img { width: 100%; height: 100%; }
.download .download-card > div:last-child { align-self: center; max-width: 650px; }
.download .download-card .kicker.light { color: #fff !important; opacity: .78; }
.download .download-card h2 { color: #fff; margin: 8px 0 10px; }
.download .download-card p { max-width: 560px; color: rgba(255,255,255,.86) !important; }
.download .store-buttons a { background: #0b1f33 !important; box-shadow: 0 12px 26px rgba(4,61,96,.18); }

@media (max-width: 900px) {
  .promogen-section .promo-layout { grid-template-columns: 1fr !important; }
  .promogen-section .promo-gallery { grid-auto-columns: calc((100% - 24px) / 3) !important; }
  .promogen-section .promo-message { max-width: 760px; }
  .promogen-section .promo-message .check-list { grid-template-columns: 1fr; }
  .download .download-card { grid-template-columns: 160px 1fr; padding: 42px; }
  .download .download-bee { width: 160px; height: 160px; padding: 18px; }
}

@media (max-width: 620px) {
  .brand { gap: 7px; }
  .brand .brand-bee { width: 29px; height: 29px; }
  .brand .brand-wordmark { width: 142px; }
  .promogen-section .promo-gallery { grid-auto-columns: calc((100% - 12px) / 2) !important; }
  .promogen-section .promo-message { text-align: center; }
  .promogen-section .promo-message h2 { font-size: 3.25rem; }
  .promogen-section .promo-action-row { align-items: stretch; }
  .download .download-card {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 36px 22px;
    text-align: center;
  }
  .download .download-bee { width: 138px; height: 138px; margin: 0 auto; padding: 15px; }
  .download .download-card p { margin-left: auto; margin-right: auto; }
  .download .store-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download .store-buttons a { min-width: 0; justify-content: center; }
  .result-brand .brand-bee { width: 30px; height: 30px; }
  .result-header .result-brand .brand-wordmark { width: 128px; }
}