/**
 * Infoptic Action Bar Widget Styles
 *
 * Full-width centered Brand & Advertisers CTA section
 * Background: Deep Navy (#062345)
 * Centered headline, description, primary & secondary action buttons, and contact email.
 *
 * @package InfopticCore
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@600;700;800&display=swap');

:root {
  --infoptic-ab-navy: #062345;
  --infoptic-ab-navy-2: #0b2f5b;
  --infoptic-ab-blue: #2345A3;
  --infoptic-ab-blue-hover: #1a3688;
  --infoptic-ab-sky: #77C5F1;
  --infoptic-ab-soft-2: #eef2f7;
  --infoptic-ab-line-strong: #d6dce7;
  --infoptic-ab-ink: #1b2330;
  --infoptic-ab-muted: #5a6577;
  --infoptic-ab-muted-light: #c7d6ea;
  --infoptic-ab-shadow-sm: 0 4px 14px rgba(0, 0, 0, .14);
  --infoptic-ab-shadow-blue: 0 4px 14px rgba(35, 69, 163, .18);
  --infoptic-ab-shadow-navy: 0 8px 22px rgba(6, 35, 69, .18);
  --infoptic-ab-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   Section Wrapper & Centered Container
   ========================================================================== */

section.infoptic-action-bar,
.elementor-widget-infoptic-action-bar section.infoptic-action-bar {
  padding: 0;
  background-color: var(--infoptic-ab-navy, #062345) !important;
  background: var(--infoptic-ab-navy, #062345) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden;
}

section.infoptic-action-bar *,
.elementor-widget-infoptic-action-bar * {
  box-sizing: border-box !important;
}

.infoptic-action-bar .infoptic-action-bar__dual-paths,
.infoptic-action-bar .dual-paths,
.infoptic-action-bar .infoptic-action-bar__container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Centered CTA Card / Path Box */
.infoptic-action-bar .infoptic-action-bar__path-box,
.infoptic-action-bar .path-box,
.infoptic-action-bar .infoptic-action-bar__path-box--right,
.infoptic-action-bar .path-box.brand-advertisers,
.infoptic-action-bar .infoptic-action-bar__content {
  background-color: transparent !important;
  color: #ffffff !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 68px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* ==========================================================================
   Typography: Title & Lead Paragraph
   ========================================================================== */

.infoptic-action-bar .infoptic-action-bar__title,
.infoptic-action-bar .infoptic-action-bar__title--right,
.infoptic-action-bar .path-box.brand-advertisers h2 {
  font-family: 'Orbitron', system-ui, -apple-system, sans-serif !important;
  font-size: clamp(1.6rem, 2.8vw, 2.35rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 auto 16px auto !important;
  text-align: center !important;
  border: none !important;
  padding: 0 !important;
  max-width: 780px !important;
}

.infoptic-action-bar .infoptic-action-bar__desc,
.infoptic-action-bar .infoptic-action-bar__desc--right,
.infoptic-action-bar .path-box.brand-advertisers p.path-lead {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  line-height: 1.65 !important;
  color: var(--infoptic-ab-muted-light, #c7d6ea) !important;
  margin: 0 auto 28px auto !important;
  max-width: 62ch !important;
  text-align: center !important;
}

/* ==========================================================================
   Buttons Row & CTAs
   ========================================================================== */

.infoptic-action-bar .infoptic-action-bar__ctas,
.infoptic-action-bar .hero-ctas {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Primary Button (White) */
.infoptic-action-bar .infoptic-action-bar__btn-primary,
.infoptic-action-bar .btn.btn-light {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 24px !important;
  border-radius: 6px !important;
  border: 1.5px solid #ffffff !important;
  background: #ffffff !important;
  color: var(--infoptic-ab-navy, #062345) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: var(--infoptic-ab-shadow-sm, 0 4px 14px rgba(0, 0, 0, .14)) !important;
  transition: background .2s var(--infoptic-ab-ease), border-color .2s var(--infoptic-ab-ease), color .2s var(--infoptic-ab-ease), transform .2s var(--infoptic-ab-ease), box-shadow .2s var(--infoptic-ab-ease) !important;
  min-height: 46px !important;
}

.infoptic-action-bar .infoptic-action-bar__btn-primary:hover,
.infoptic-action-bar .btn.btn-light:hover {
  background: var(--infoptic-ab-sky, #77C5F1) !important;
  border-color: var(--infoptic-ab-sky, #77C5F1) !important;
  color: var(--infoptic-ab-navy, #062345) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important;
}

.infoptic-action-bar .infoptic-action-bar__chevron,
.infoptic-action-bar .btn .chevron {
  font-weight: 700 !important;
  transition: transform .18s var(--infoptic-ab-ease) !important;
  display: inline-block !important;
}

.infoptic-action-bar .infoptic-action-bar__btn-primary:hover .infoptic-action-bar__chevron,
.infoptic-action-bar .btn.btn-light:hover .chevron {
  transform: translateX(3px) !important;
}

/* Secondary Button (Outline) */
.infoptic-action-bar .infoptic-action-bar__btn-secondary,
.infoptic-action-bar .btn.btn-outline-light {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 24px !important;
  border-radius: 6px !important;
  border: 1.5px solid rgba(255, 255, 255, .38) !important;
  background: transparent !important;
  color: #ffffff !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .2s var(--infoptic-ab-ease), border-color .2s var(--infoptic-ab-ease), color .2s var(--infoptic-ab-ease), transform .2s var(--infoptic-ab-ease) !important;
  min-height: 46px !important;
}

.infoptic-action-bar .infoptic-action-bar__btn-secondary:hover,
.infoptic-action-bar .btn.btn-outline-light:hover {
  background: rgba(255, 255, 255, .1) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   Contact Info (Email only, centered)
   ========================================================================== */

.infoptic-action-bar .infoptic-action-bar__contact-info,
.infoptic-action-bar .brand-contact-info {
  margin-top: 26px !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: .92rem !important;
  color: var(--infoptic-ab-muted-light, #c7d6ea) !important;
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  text-align: center !important;
}

.infoptic-action-bar .infoptic-action-bar__contact-item,
.infoptic-action-bar .brand-contact-info a {
  color: #ffffff !important;
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: color .15s ease !important;
  font-weight: 500 !important;
}

.infoptic-action-bar .infoptic-action-bar__contact-item:hover,
.infoptic-action-bar .brand-contact-info a:hover {
  color: var(--infoptic-ab-sky, #77C5F1) !important;
}

.infoptic-action-bar .infoptic-action-bar__contact-item svg,
.infoptic-action-bar .brand-contact-info svg {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

.infoptic-action-bar .infoptic-action-bar__contact-divider {
  display: none !important;
}

/* ==========================================================================
   Responsive Breakpoints & Stacking
   ========================================================================== */

@media (max-width: 860px) {
  .infoptic-action-bar .infoptic-action-bar__path-box,
  .infoptic-action-bar .path-box,
  .infoptic-action-bar .infoptic-action-bar__path-box--right,
  .infoptic-action-bar .path-box.brand-advertisers,
  .infoptic-action-bar .infoptic-action-bar__content {
    padding: 54px 24px !important;
  }
}

@media (max-width: 560px) {
  .infoptic-action-bar .infoptic-action-bar__path-box,
  .infoptic-action-bar .path-box,
  .infoptic-action-bar .infoptic-action-bar__path-box--right,
  .infoptic-action-bar .path-box.brand-advertisers,
  .infoptic-action-bar .infoptic-action-bar__content {
    padding: 44px 18px !important;
  }

  .infoptic-action-bar .infoptic-action-bar__ctas,
  .infoptic-action-bar .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 340px !important;
  }

  .infoptic-action-bar .infoptic-action-bar__btn-primary,
  .infoptic-action-bar .infoptic-action-bar__btn-secondary,
  .infoptic-action-bar .hero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .infoptic-action-bar .infoptic-action-bar__contact-info,
  .infoptic-action-bar .brand-contact-info {
    justify-content: center !important;
    align-items: center !important;
    margin-top: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .infoptic-action-bar .btn,
  .infoptic-action-bar .chevron {
    transition-duration: .01ms !important;
  }
}