/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   Global Slide-Up Button Styling (Jitter-Free)
   ========================================================================== */
.bricks-button,
.slide-btn,
.tnp-submit {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Fix 1: Force persistent hardware rendering & anti-aliasing */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Typography */
  font-family: "Asap", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  line-height: 1 !important; /* Fix 2: Explicit line-height prevents vertical rounding shifts */
  text-decoration: none !important;

  /* Box & Borders */
  background-color: #fff !important;
  color: var(--bricks-color-grey-900) !important;
  border: 2px solid var(--bricks-color-grey-700) !important;
  border-radius: 0 !important;
  padding: 10px 24px !important;
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease !important;
}

/* Sliding Lime Layer */
.bricks-button::before,
.slide-btn::before,
.tnp-submit::before {
  content: '' !important;
  position: absolute !important;
  bottom: -100% !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--bricks-color-lime) !important;
  
  /* Fix 3: Keep GPU transform pipeline stable on the sliding layer */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  
  transition: transform 0.3s ease-in-out !important;
  transform: translateY(0) translateZ(0) !important;
  z-index: -1 !important;
}

/* Hover Trigger */
.bricks-button:hover::before,
.slide-btn:hover::before,
.tnp-submit:hover::before {
  transform: translateY(-100%) translateZ(0) !important;
}

/* Hover Text Colour */
.bricks-button:hover,
.slide-btn:hover,
.tnp-submit:hover {
  color: var(--bricks-color-grey-900) !important;
}

/* ==========================================================================
   Bricksforge Pro Forms: Slide Down/Up with Auto-Collapsing Margin
   ========================================================================== */
@keyframes brfSlideDownAndUpSlower {
  /* 0%: Hidden, no height, no top margin */
  0% {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-100%);
    overflow: hidden;
    visibility: hidden;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  /* 14% (~0.95s): Full 85px height + 20px top gap visible */
  14% {
    max-height: 85px;
    margin-top: 20px;
    transform: translateY(0);
    overflow: hidden;
    visibility: visible;
    animation-timing-function: linear;
  }

  /* 86% (~5.8s): Hold 20px gap and full height for ~4.8s */
  86% {
    max-height: 85px;
    margin-top: 20px;
    transform: translateY(0);
    overflow: hidden;
    visibility: visible;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 100% (~6.8s): Slide back up and collapse top margin completely to 0 */
  100% {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    transform: translateY(-100%);
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Target all Pro Forms success banners */
.brxe-brf-pro-forms [class*="success"],
.brxe-brf-pro-forms [class*="response"],
.brxe-brf-pro-forms [class*="message"],
.brxe-brf-pro-forms .brf-alert,
.brxe-brf-pro-forms .brf-pro-forms__message,
.brxe-brf-pro-forms .brf-pro-forms-message {
  opacity: 1 !important;
  animation: brfSlideDownAndUpSlower 6.8s forwards !important;
  will-change: transform, max-height, margin-top;
  color: var(--bricks-color-grey-900);
  background-color: var(--bricks-color-light-green);
}

/* ==========================================================================
 Bricksforge Pro Forms: Button
 ========================================================================== */

.bricks-button {
  margin: 0; 
}