/**
 * Visual Builder PoC — shop FE utilities for widget HTML (#box_wrapper).
 * Pairs with builder-content.js and builder-animations.css (legacy keyframes).
 */

/* --- Section background (grid-section) --- */
.vb-section-bg {
  background-image: var(--vb-section-bg);
}

/* --- Section background colors (grid-section) --- */
.vb-grid-section.vb-section-white {
  background-color: #ffffff;
}

.vb-grid-section.blog-compact-section-bg {
  background-color: #e5eeda;
}

.vb-grid-section.vb-section-gray {
  background-color: #f5f5f5;
}

.vb-grid-section.vb-section-dark-green {
  background-color: #00190b;
  color: #ffffff;
}

.vb-grid-section.vb-section-dark-green h1,
.vb-grid-section.vb-section-dark-green h2,
.vb-grid-section.vb-section-dark-green h3,
.vb-grid-section.vb-section-dark-green h4,
.vb-grid-section.vb-section-dark-green h5,
.vb-grid-section.vb-section-dark-green h6,
.vb-grid-section.vb-section-dark-green p,
.vb-grid-section.vb-section-dark-green a {
  color: inherit;
}

.vb-grid-section.vb-section-dark-green a:hover {
  color: #e5eeda;
}

.vb-bg-cover,
.vb-section-bg.vb-bg-cover {
  background-size: cover;
}

.vb-bg-contain {
  background-size: contain;
}

.vb-bg-stretch-x {
  background-size: 100% auto;
}

.vb-bg-no-repeat {
  background-repeat: no-repeat;
}

.vb-bg-repeat {
  background-repeat: repeat;
}

.vb-bg-repeat-x {
  background-repeat: repeat-x;
}

.vb-bg-center {
  background-position: center center;
}

.vb-bg-top {
  background-position: center top;
}

.vb-bg-bottom {
  background-position: center bottom;
}

.vb-grid-section.vb-section-bg,
section.vb-section-bg {
  position: relative;
}

/* --- Parallax (grid-section checkbox + legacy widget class) --- */
.vb-grid-section.vb-parallax.vb-section-bg,
.vb-section-bg.vb-parallax {
  background-image: none !important;
  overflow: hidden;
}

.vb-grid-section.vb-parallax.vb-section-bg::before,
.vb-section-bg.vb-parallax::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--vb-section-bg);
  background-size: cover;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.vb-grid-section.vb-parallax > .container,
.vb-grid-section.vb-parallax > .container-fluid,
.vb-section-bg.vb-parallax > .container,
.vb-section-bg.vb-parallax > .container-fluid {
  position: relative;
  z-index: 1;
}

/* Legacy parallax: direct background-image on section (no CSS variable) */
.vb-section-bg.parallax,
.vb-grid-section.vb-parallax:not(.vb-section-bg),
section.vb-parallax:not(.vb-section-bg),
.parallax:not(.vb-section-bg) {
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 0;
  background-repeat: no-repeat;
  position: relative;
}

@media (max-width: 767px) {
  .vb-grid-section.vb-parallax.vb-section-bg::before,
  .vb-section-bg.vb-parallax::before,
  .vb-section-bg.parallax,
  .vb-grid-section.vb-parallax,
  section.vb-parallax,
  .parallax {
    background-attachment: scroll !important;
    background-size: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vb-grid-section.vb-parallax.vb-section-bg::before,
  .vb-section-bg.vb-parallax::before,
  .vb-section-bg.parallax,
  .vb-grid-section.vb-parallax,
  section.vb-parallax,
  .parallax {
    background-attachment: scroll !important;
  }
}

/* --- Scroll reveal (column to_animate + data-animation) --- */
.to_animate {
  visibility: hidden;
}

.animated {
  visibility: visible !important;
}

/* --- Section padding (on section — background includes padding) --- */
.vb-grid-section.section_padding_top_0 { padding-top: 0; }
.vb-grid-section.section_padding_top_5 { padding-top: 5px; }
.vb-grid-section.section_padding_top_15 { padding-top: 15px; }
.vb-grid-section.section_padding_top_25 { padding-top: 25px; }
.vb-grid-section.section_padding_top_30 { padding-top: 30px; }
.vb-grid-section.section_padding_top_50 { padding-top: 50px; }
.vb-grid-section.section_padding_top_75 { padding-top: 75px; }
.vb-grid-section.section_padding_top_100 { padding-top: 100px; }

.vb-grid-section.section_padding_bottom_0 { padding-bottom: 0; }
.vb-grid-section.section_padding_bottom_5 { padding-bottom: 5px; }
.vb-grid-section.section_padding_bottom_15 { padding-bottom: 15px; }
.vb-grid-section.section_padding_bottom_25 { padding-bottom: 25px; }
.vb-grid-section.section_padding_bottom_30 { padding-bottom: 30px; }
.vb-grid-section.section_padding_bottom_50 { padding-bottom: 50px; }
.vb-grid-section.section_padding_bottom_75 { padding-bottom: 75px; }
.vb-grid-section.section_padding_bottom_100 { padding-bottom: 100px; }

/* --- Spacing before section (margin-top, outside background) --- */
.vb-grid-section.section_spacing_before_0 { margin-top: 0; }
.vb-grid-section.section_spacing_before_5 { margin-top: 5px; }
.vb-grid-section.section_spacing_before_15 { margin-top: 15px; }
.vb-grid-section.section_spacing_before_25 { margin-top: 25px; }
.vb-grid-section.section_spacing_before_30 { margin-top: 30px; }
.vb-grid-section.section_spacing_before_50 { margin-top: 50px; }
.vb-grid-section.section_spacing_before_75 { margin-top: 75px; }
.vb-grid-section.section_spacing_before_100 { margin-top: 100px; }

/* --- Row gap (direct sibling rows in section container only) --- */
.vb-grid-section.section_row_gap_0 > .container > .row + .row,
.vb-grid-section.section_row_gap_0 > .container-fluid > .row + .row {
  margin-top: 0;
}

.vb-grid-section.section_row_gap_5 > .container > .row + .row,
.vb-grid-section.section_row_gap_5 > .container-fluid > .row + .row {
  margin-top: 5px;
}

.vb-grid-section.section_row_gap_15 > .container > .row + .row,
.vb-grid-section.section_row_gap_15 > .container-fluid > .row + .row {
  margin-top: 15px;
}

.vb-grid-section.section_row_gap_25 > .container > .row + .row,
.vb-grid-section.section_row_gap_25 > .container-fluid > .row + .row {
  margin-top: 25px;
}

.vb-grid-section.section_row_gap_30 > .container > .row + .row,
.vb-grid-section.section_row_gap_30 > .container-fluid > .row + .row {
  margin-top: 30px;
}

.vb-grid-section.section_row_gap_50 > .container > .row + .row,
.vb-grid-section.section_row_gap_50 > .container-fluid > .row + .row {
  margin-top: 50px;
}

.vb-grid-section.section_row_gap_75 > .container > .row + .row,
.vb-grid-section.section_row_gap_75 > .container-fluid > .row + .row {
  margin-top: 75px;
}

.vb-grid-section.section_row_gap_100 > .container > .row + .row,
.vb-grid-section.section_row_gap_100 > .container-fluid > .row + .row {
  margin-top: 100px;
}

/* --- Column padding (horizontal gutter on direct rows/cols) --- */
.vb-grid-section.columns_padding_0 > .container > .row,
.vb-grid-section.columns_padding_0 > .container-fluid > .row {
  margin-left: 0;
  margin-right: 0;
}

.vb-grid-section.columns_padding_0 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_0 > .container-fluid > .row > [class*='col-'] {
  padding-left: 0;
  padding-right: 0;
}

.vb-grid-section.columns_padding_5 > .container > .row,
.vb-grid-section.columns_padding_5 > .container-fluid > .row {
  margin-left: -5px;
  margin-right: -5px;
}

.vb-grid-section.columns_padding_5 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_5 > .container-fluid > .row > [class*='col-'] {
  padding-left: 5px;
  padding-right: 5px;
}

.vb-grid-section.columns_padding_15 > .container > .row,
.vb-grid-section.columns_padding_15 > .container-fluid > .row {
  margin-left: -15px;
  margin-right: -15px;
}

.vb-grid-section.columns_padding_15 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_15 > .container-fluid > .row > [class*='col-'] {
  padding-left: 15px;
  padding-right: 15px;
}

.vb-grid-section.columns_padding_25 > .container > .row,
.vb-grid-section.columns_padding_25 > .container-fluid > .row {
  margin-left: -25px;
  margin-right: -25px;
}

.vb-grid-section.columns_padding_25 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_25 > .container-fluid > .row > [class*='col-'] {
  padding-left: 25px;
  padding-right: 25px;
}

.vb-grid-section.columns_padding_30 > .container > .row,
.vb-grid-section.columns_padding_30 > .container-fluid > .row {
  margin-left: -30px;
  margin-right: -30px;
}

.vb-grid-section.columns_padding_30 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_30 > .container-fluid > .row > [class*='col-'] {
  padding-left: 30px;
  padding-right: 30px;
}

.vb-grid-section.columns_padding_50 > .container > .row,
.vb-grid-section.columns_padding_50 > .container-fluid > .row {
  margin-left: -50px;
  margin-right: -50px;
}

.vb-grid-section.columns_padding_50 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_50 > .container-fluid > .row > [class*='col-'] {
  padding-left: 50px;
  padding-right: 50px;
}

.vb-grid-section.columns_padding_75 > .container > .row,
.vb-grid-section.columns_padding_75 > .container-fluid > .row {
  margin-left: -75px;
  margin-right: -75px;
}

.vb-grid-section.columns_padding_75 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_75 > .container-fluid > .row > [class*='col-'] {
  padding-left: 75px;
  padding-right: 75px;
}

.vb-grid-section.columns_padding_100 > .container > .row,
.vb-grid-section.columns_padding_100 > .container-fluid > .row {
  margin-left: -100px;
  margin-right: -100px;
}

.vb-grid-section.columns_padding_100 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_100 > .container-fluid > .row > [class*='col-'] {
  padding-left: 100px;
  padding-right: 100px;
}

/* Legacy column padding (older documents) */
.vb-grid-section.columns_padding_1 > .container > .row,
.vb-grid-section.columns_padding_1 > .container-fluid > .row {
  margin-left: 0;
  margin-right: -1px;
}

.vb-grid-section.columns_padding_1 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_1 > .container-fluid > .row > [class*='col-'] {
  padding-left: 0;
  padding-right: 1px;
}

.vb-grid-section.columns_padding_2 > .container > .row,
.vb-grid-section.columns_padding_2 > .container-fluid > .row {
  margin-left: -1px;
  margin-right: -1px;
}

.vb-grid-section.columns_padding_2 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_2 > .container-fluid > .row > [class*='col-'] {
  padding-left: 1px;
  padding-right: 1px;
}