/**
 * Template B (VaultEdge) — CMS palette bridge (Template G pattern)
 * Maps admin palette to --ve-* tokens and layout surfaces.
 */

 body.cms-active-template-templateB {
  --accent-color: var(--primary);
  --background-color: var(--light);
  --default-color: var(--text);
  --heading-color: var(--dark);
  --surface-color: color-mix(in srgb, var(--light), var(--dark) 14%);
  --contrast-color: var(--secondary);

  --nav-color: color-mix(in srgb, var(--text), var(--dark) 20%);
  --nav-hover-color: var(--primary);
  --nav-mobile-background-color: var(--dark);
  --nav-dropdown-background-color: color-mix(in srgb, var(--dark), var(--primary) 18%);
  --nav-dropdown-color: color-mix(in srgb, var(--secondary), var(--text) 35%);
  --nav-dropdown-hover-color: var(--primary);

  --ve-gold: var(--primary);
  --ve-white: var(--secondary);
  --ve-dark: var(--dark);
  --ve-light: var(--light);
  --ve-text: var(--text);
  --ve-dark2: var(--dark);
  --ve-navy: var(--dark);
  --ve-gold2: var(--primary);
  --ve-border: color-mix(in srgb, var(--text) 25%, var(--light));
  --ve-shadow: 0 8px 30px color-mix(in srgb, var(--dark) 10%, transparent);
}

body.cms-active-template-templateB .light-background {
  --background-color: color-mix(in srgb, var(--light), var(--dark) 6%);
  --default-color: var(--text);
  --heading-color: var(--dark);
  --surface-color: color-mix(in srgb, var(--light), var(--dark) 12%);
  --contrast-color: var(--secondary);
}

body.cms-active-template-templateB .dark-background {
  --background-color: var(--dark);
  --default-color: color-mix(in srgb, var(--secondary) 75%, var(--text));
  --heading-color: var(--secondary);
  --surface-color: color-mix(in srgb, var(--dark), var(--primary) 16%);
  --contrast-color: var(--secondary);
}

/* ── Page shell ── */
body.cms-active-template-templateB .cms-template-b {
  color: var(--text);
  background-color: var(--light);
}

body.cms-active-template-templateB .cms-template-b h1,
body.cms-active-template-templateB .cms-template-b h2,
body.cms-active-template-templateB .cms-template-b h3,
body.cms-active-template-templateB .cms-template-b h4,
body.cms-active-template-templateB .cms-template-b h5,
body.cms-active-template-templateB .cms-template-b h6 {
  color: var(--dark);
}

body.cms-active-template-templateB .cms-template-b p {
  color: var(--text);
}

/* ── Header / nav ── */
body.cms-active-template-templateB .ve-header {
  background: var(--dark) !important;
}

body.cms-active-template-templateB .ve-header.scrolled {
  background: color-mix(in srgb, var(--dark) 97%, transparent) !important;
}

body.cms-active-template-templateB .ve-nav > ul > li > a {
  color: color-mix(in srgb, var(--secondary) 80%, var(--text)) !important;
}

body.cms-active-template-templateB .ve-nav > ul > li > a:hover,
body.cms-active-template-templateB .ve-nav > ul > li > a.active {
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary), transparent 85%) !important;
}

body.cms-active-template-templateB .ve-nav .ve-dropdown,
body.cms-active-template-templateB .ve-mobile-menu .ve-dropdown {
  background: var(--nav-dropdown-background-color) !important;
}

body.cms-active-template-templateB .ve-nav .ve-dropdown a,
body.cms-active-template-templateB .ve-mobile-menu .ve-dropdown a {
  color: var(--nav-dropdown-color) !important;
}

body.cms-active-template-templateB .ve-nav .ve-dropdown a:hover,
body.cms-active-template-templateB .ve-mobile-menu .ve-dropdown a:hover {
  color: var(--nav-dropdown-hover-color) !important;
}

body.cms-active-template-templateB .ve-logo-text {
  color: var(--secondary) !important;
}

body.cms-active-template-templateB .ve-logo-text strong {
  color: var(--primary) !important;
}

body.cms-active-template-templateB .ve-logo-icon {
  background: var(--primary) !important;
  color: var(--dark) !important;
}

/* ── Hero ── */
body.cms-active-template-templateB .ve-hero {
  background: var(--dark) !important;
}

body.cms-active-template-templateB .ve-hero-badge {
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary), transparent 60%) !important;
}

body.cms-active-template-templateB .ve-hero-left h1,
body.cms-active-template-templateB .ve-hero-left h1 .ve-highlight {
  color: var(--secondary) !important;
}

body.cms-active-template-templateB .ve-hero-left h1 .ve-highlight {
  color: var(--primary) !important;
}

body.cms-active-template-templateB .ve-hero-left p {
  color: color-mix(in srgb, var(--secondary) 65%, var(--text)) !important;
}

body.cms-active-template-templateB .ve-hero-dot.active,
body.cms-active-template-templateB .ve-hero-dot:hover {
  background: var(--primary) !important;
}

body.cms-active-template-templateB .ve-hero-nav-btn {
  border-color: color-mix(in srgb, var(--secondary), transparent 50%) !important;
  color: var(--secondary) !important;
}

body.cms-active-template-templateB .ve-hero-nav-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

@media (max-width: 991.98px) {
  body.cms-active-template-templateB .ve-hero.ve-hero--images-synced .ve-hero-img-card:not(.ve-hero-img-card--empty) {
    min-height: var(--ve-hero-card-h) !important;
  }

  body.cms-active-template-templateB .ve-hero.ve-hero--mobile-content-synced .ve-hero-img-card .ve-hero-img-fit[data-cms-field="hero.items.image"] {
    max-height: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body.cms-active-template-templateB .ve-hero-right {
    justify-content: center !important;
    align-items: center !important;
  }

  body.cms-active-template-templateB .ve-hero-visual-stage,
  body.cms-active-template-templateB .ve-hero-img-card-wrap,
  body.cms-active-template-templateB .ve-hero-img-card {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.cms-active-template-templateB .ve-hero-img-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.cms-active-template-templateB .ve-hero-img-card .ve-hero-img-fit {
    object-position: center center !important;
  }
}

@media (max-width: 767.98px) {
  body.cms-active-template-templateB .ve-hero {
    overflow-x: clip !important;
    max-width: 100% !important;
  }

  body.cms-active-template-templateB .ve-hero-left {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    text-align: center !important;
    align-items: center !important;
  }

  body.cms-active-template-templateB .ve-hero-content-stage {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
  }

  body.cms-active-template-templateB .ve-hero-slide-pane {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  body.cms-active-template-templateB .ve-hero-left h1,
  body.cms-active-template-templateB .ve-hero-left p {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  body.cms-active-template-templateB .ve-hero-btns,
  body.cms-active-template-templateB .ve-hero-stats,
  body.cms-active-template-templateB .ve-hero-carousel-nav {
    justify-content: center !important;
    width: 100% !important;
  }

  body.cms-active-template-templateB .ve-hero-right {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.cms-active-template-templateB .ve-hero-img-card-wrap {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  body.cms-active-template-templateB .ve-hero-img-card {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
  }

  body.cms-active-template-templateB .ve-counter-section {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  body.cms-active-template-templateB .ve-counter-section .ve-counter-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body.cms-active-template-templateB .ve-counter-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-items: center !important;
  }

  body.cms-active-template-templateB .ve-counter-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
}

body.cms-active-template-templateB .ve-stat-num {
  color: var(--primary) !important;
}

body.cms-active-template-templateB .ve-stat-label {
  color: color-mix(in srgb, var(--secondary) 70%, var(--text)) !important;
}

/* ── Buttons ── */
body.cms-active-template-templateB .ve-btn-primary,
body.cms-active-template-templateB .ve-cta-btn,
body.cms-active-template-templateB .ve-form-submit,
body.cms-active-template-templateB .ve-nav-cta .ve-cta-btn {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--secondary) !important;
}

body.cms-active-template-templateB .ve-btn-primary:hover,
body.cms-active-template-templateB .ve-cta-btn:hover,
body.cms-active-template-templateB .ve-form-submit:hover,
body.cms-active-template-templateB .ve-nav-cta .ve-cta-btn:hover {
  background: color-mix(in srgb, var(--primary), var(--dark) 15%) !important;
  border-color: color-mix(in srgb, var(--primary), var(--dark) 15%) !important;
  color: var(--secondary) !important;
}

body.cms-active-template-templateB .ve-btn-ghost {
  color: var(--secondary) !important;
  border-color: color-mix(in srgb, var(--secondary), transparent 35%) !important;
}

body.cms-active-template-templateB .ve-btn-ghost:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary), transparent 92%) !important;
}

/* ── Section headers ── */
body.cms-active-template-templateB .ve-section-tag {
  color: var(--primary) !important;
}

body.cms-active-template-templateB .ve-section-header h2 {
  color: var(--dark) !important;
}

body.cms-active-template-templateB .ve-section-header h2 span {
  color: var(--primary) !important;
}

body.cms-active-template-templateB .ve-section-header p {
  color: var(--text) !important;
}

/* Contact — info lines & form labels match primary button text */
body.cms-active-template-templateB .ve-contact-section .ve-section-header p,
body.cms-active-template-templateB .ve-contact-section .ve-footer-contact li,
body.cms-active-template-templateB .ve-contact-section .ve-contact-form .form-label {
  color: var(--secondary) !important;
}

body.cms-active-template-templateB .ve-page-title h1 {
  color: var(--dark) !important;
}

/* Offer — compact centered background frame (cover layer, not section bg) */
body.cms-active-template-templateB .cms-template-b .ve-offer-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 48px;
}

body.cms-active-template-templateB .cms-template-b .ve-cms-bg-frame.ve-offer-cms-frame {
  position: relative;
  width: min(100%, 1200px);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--ve-dark);
}

body.cms-active-template-templateB .cms-template-b .ve-offer-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

body.cms-active-template-templateB .cms-template-b .ve-offer-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--cms-image-overlay) !important;
}

body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-cta-overlay {
  background: var(--cms-image-overlay) !important;
}

body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-cta-banner__content {
  position: relative;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding-top: 90px !important;
  padding-bottom: 90px !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}

@media (min-width: 992px) {
  body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-cta-banner__content {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
}

@media (max-width: 767.98px) {
  body.cms-active-template-templateB .cms-template-b .ve-offer-section {
    overflow-x: clip !important;
    max-width: 100% !important;
  }

  body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame {
    overflow-x: clip !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-cta-banner__content {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Offer description — palette secondary (overrides theme rgba white) */
body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-cta-banner__content p {
  color: var(--secondary) !important;
}

/* Offer copy selection — white highlight (Know More button bg); dark text for contrast */
body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-cta-banner__content p::selection,
body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-cta-banner__content p *::selection {
  background-color: #fff !important;
  color: var(--dark) !important;
}

body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-cta-banner__content p::-moz-selection,
body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-cta-banner__content p *::-moz-selection {
  background-color: #fff !important;
  color: var(--dark) !important;
}

/* Offer Know More — CMS palette; hover text stays readable on primary fill */
body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-btn-white,
body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-btn-white:hover,
body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-btn-white:focus,
body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-btn-white:active,
body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-btn-white:visited {
  text-decoration: none !important;
}

body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-btn-white {
  background: var(--secondary) !important;
  color: var(--dark) !important;
  border: 2px solid transparent !important;
}

body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-btn-white:hover,
body.cms-active-template-templateB .cms-template-b .ve-offer-cms-frame .ve-btn-white:focus {
  background: color-mix(in srgb, var(--primary), var(--dark) 15%) !important;
  border-color: color-mix(in srgb, var(--primary), var(--dark) 15%) !important;
  color: var(--secondary) !important;
}

/* ── Overlays ── */
body.cms-active-template-templateB .ve-cta-overlay,
body.cms-active-template-templateB .ve-page-hero-overlay,
body.cms-active-template-templateB .ve-page-hero .ve-page-hero-overlay {
  background: var(--cms-image-overlay) !important;
}

/* ── About feature icons (48×48 admin spec) ── */
body.cms-active-template-templateB .ve-about-feature-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

body.cms-active-template-templateB .ve-about-feature-icon-img,
body.cms-active-template-templateB .ve-check-item .about-feature-icon {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  object-position: center center !important;
  flex-shrink: 0 !important;
}

body.cms-active-template-templateB .ve-check-item__text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.cms-active-template-templateB .ve-whyus-content--full {
  padding-left: 0 !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Cards & accents ── */
body.cms-active-template-templateB .ve-insight-meta,
body.cms-active-template-templateB .ve-process-num,
body.cms-active-template-templateB .ve-contact-info-card i {
  color: var(--primary) !important;
}

body.cms-active-template-templateB .ve-team-social a:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--secondary) !important;
}

/* ── Footer ── */
body.cms-active-template-templateB .ve-footer {
  background: var(--dark) !important;
}

body.cms-active-template-templateB .ve-footer h4,
body.cms-active-template-templateB .ve-footer .ve-logo-text {
  color: var(--secondary) !important;
}

body.cms-active-template-templateB .ve-footer p,
body.cms-active-template-templateB .ve-footer a,
body.cms-active-template-templateB .ve-footer-links a {
  color: color-mix(in srgb, var(--secondary) 80%, var(--text)) !important;
}

body.cms-active-template-templateB .ve-footer a:hover,
body.cms-active-template-templateB .ve-footer-links a:hover {
  color: var(--primary) !important;
}

body.cms-active-template-templateB .ve-footer .ve-social a:hover {
  color: var(--primary) !important;
}

/* MVV dark section */
body.cms-active-template-templateB .ve-mvv-section {
  background: var(--dark) !important;
}

body.cms-active-template-templateB .ve-mvv-section .ve-section-header h2 {
  color: var(--secondary) !important;
}

body.cms-active-template-templateB .ve-mvv-section .ve-section-header p {
  color: color-mix(in srgb, var(--secondary) 60%, var(--text)) !important;
}

/* Text selection: palette-driven (override browser default blue) */
body.cms-active-template-templateB ::selection,
body.cms-active-template-templateB *::selection {
  background: var(--primary) !important;
  color: var(--secondary) !important;
}
body.cms-active-template-templateB ::-moz-selection,
body.cms-active-template-templateB *::-moz-selection {
  background: var(--primary) !important;
  color: var(--secondary) !important;
}