/* Labout Child Theme - Custom Styles */


:root{
  --theme-color: #186E52;
  --secondary-color: #F2994A;
  --pink-color: #FFC0CB;
  --violet-color: #7F00FF;
  --crimson-color: #DC143C;
  --orange-color: #FFA500;
  --text-color: #5A5A5A;
  --title-color: #1A1A1A;
  --text-font: 'Inter', sans-serif;
  --title-font: 'Afacad', sans-serif;
}






.theme-btn {
    background: #186E52 !important;
    background-color: #186E52 !important;
    border-color: #186E52 !important;
}

.theme-btn:before {
    background: #186E52 !important;
    background-color: #28AA7E !important;
}





/* ===========================
   Labout Child Theme - Button Fix
   Complete coverage on hover
   =========================== */

/* Base button */
.theme-btn {
    position: relative !important;
    display: inline-block !important;
    overflow: hidden !important;
    vertical-align: middle !important;
    font-size: 16px !important;
    line-height: 30px !important;
    font-weight: 500 !important;
    font-family: var(--title-font) !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 35px !important;
    padding: 10px 30px !important;
    z-index: 1 !important;
    transition: background 1000ms ease !important;
    background: #186E52 !important;  /* ← Your primary button color */
}

/* On hover, transition the base background too as a fallback */
.theme-btn:hover {
    background: #F2994A !important;  /* ← Your hover color as fallback */
}

/* The 4 animated bubble spans */
.theme-btn span {
    position: absolute !important;
    width: 25% !important;
    height: 100% !important;
    transform: translateY(150%) !important;
    border-radius: 50% !important;
    left: calc((var(--n) - 1) * 25%) !important;
    transition: transform 0.5s ease !important;
    transition-delay: calc((var(--n) - 1) * 0.1s) !important;
    z-index: -1 !important;
    background: #F2994A !important;  /* ← Your hover color */
    color: transparent !important;
    font-size: 0 !important;
    pointer-events: none !important;
}

/* Scale increased to 3 to ensure FULL coverage including corners */
.theme-btn:hover span {
    transform: translateY(0) scale(3) !important;
}

/* Each span's position */
.theme-btn span:nth-child(1) { --n: 1; }
.theme-btn span:nth-child(2) { --n: 2; }
.theme-btn span:nth-child(3) { --n: 3; }
.theme-btn span:nth-child(4) { --n: 4; }






/* ===========================
   Royal Addons Promo Box - Theme Button Style & Animation
   =========================== */

/* Base button style matching .theme-btn */
.wpr-promo-box-btn {
    position: relative !important;
    display: inline-block !important;
    overflow: hidden !important;
    vertical-align: middle !important;
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 500 !important;
    font-family: var(--title-font) !important;
    color: #F2994A !important;
    text-align: center !important;
    border-radius: 35px !important;
    padding: 10px 30px !important;
    z-index: 1 !important;
    transition: background 500ms ease !important;
    background: #F2994A !important;  /* ← Your primary color */
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* Fallback full background color on hover */
.wpr-promo-box-btn:hover {
    background: #186E52 !important;
    color: #fff !important;
}

/* Keep the button text ABOVE the animation spans */
.wpr-promo-box-btn .wpr-promo-box-btn-text {
    position: relative !important;
    z-index: 2 !important;
    color: #fff !important;
    /* Reset any properties that could interfere */
    width: auto !important;
    height: auto !important;
    transform: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    left: auto !important;
    transition: none !important;
    font-size: inherit !important;
    pointer-events: none !important;
}

/* Animation spans — ONLY target spans WITHOUT the text class */
.wpr-promo-box-btn span:not(.wpr-promo-box-btn-text) {
    position: absolute !important;
    width: 25% !important;
    height: 100% !important;
    transform: translateY(150%) !important;
    border-radius: 50% !important;
    left: calc((var(--n) - 1) * 25%) !important;
    transition: transform 0.5s ease !important;
    transition-delay: calc((var(--n) - 1) * 0.1s) !important;
    z-index: -1 !important;
    background: #F2994A !important;  /* ← Your hover color */
    color: transparent !important;
    font-size: 0 !important;
    pointer-events: none !important;
    display: block !important;
}

/* Bubble animation trigger on hover */
.wpr-promo-box-btn:hover span:not(.wpr-promo-box-btn-text) {
    transform: translateY(0) scale(3) !important;
}

/* Position each animation span */
.wpr-promo-box-btn span:not(.wpr-promo-box-btn-text):nth-of-type(1) { --n: 1; }
.wpr-promo-box-btn span:not(.wpr-promo-box-btn-text):nth-of-type(2) { --n: 2; }
.wpr-promo-box-btn span:not(.wpr-promo-box-btn-text):nth-of-type(3) { --n: 3; }
.wpr-promo-box-btn span:not(.wpr-promo-box-btn-text):nth-of-type(4) { --n: 4; }







/* ===========================
   Premium Addons Modal Box
   Trigger Button - Theme Animation
   =========================== */

/* Base button style */
.premium-modal-trigger-btn {
    position: relative !important;
    display: inline-block !important;
    overflow: hidden !important;
    vertical-align: middle !important;
    font-size: 16px !important;
    line-height: 30px !important;
    font-weight: 500 !important;
    font-family: var(--title-font) !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 35px !important;
    padding: 10px 30px !important;
    z-index: 1 !important;
    transition: background 500ms ease !important;
    background: #186E52 !important;        /* --theme-color */
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    /* Fix overflow clipping on <button> in some browsers */
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    transform: translateZ(0) !important;
}

/* Fallback full color on hover */
.premium-modal-trigger-btn:hover {
    background: #F2994A !important;        /* --secondary-color */
    color: #fff !important;
}

/* Keep the text/icon wrapper ABOVE animation spans */
.premium-modal-trigger-btn .premium-button-text-icon-wrapper {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: none !important;
    display: inline-block !important;
}

/* Keep the text span inside wrapper above animation */
.premium-modal-trigger-btn .premium-button-text-icon-wrapper span {
    position: relative !important;
    z-index: 2 !important;
    color: #fff !important;
    /* Critical: prevent this span from being
       mistaken for an animation span */
    width: auto !important;
    height: auto !important;
    transform: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    left: auto !important;
    transition: none !important;
    font-size: inherit !important;
    pointer-events: none !important;
    display: inline !important;
    transition-delay: 0s !important;
}

/* Animation bubble spans — only pure empty spans
   directly inside the button (not inside the wrapper div) */
.premium-modal-trigger-btn > span:not([class]) {
    position: absolute !important;
    width: 25% !important;
    height: 100% !important;
    transform: translateY(150%) !important;
    border-radius: 50% !important;
    left: calc((var(--n) - 1) * 25%) !important;
    transition: transform 0.5s ease !important;
    transition-delay: calc((var(--n) - 1) * 0.1s) !important;
    z-index: 0 !important;
    background: #F2994A !important;        /* --secondary-color */
    color: transparent !important;
    font-size: 0 !important;
    pointer-events: none !important;
    display: block !important;
}

/* Bubble animation on hover */
.premium-modal-trigger-btn:hover > span:not([class]) {
    transform: translateY(0) scale(3) !important;
}

/* Span positions */
.premium-modal-trigger-btn > span:not([class]):nth-of-type(1) { --n: 1; }
.premium-modal-trigger-btn > span:not([class]):nth-of-type(2) { --n: 2; }
.premium-modal-trigger-btn > span:not([class]):nth-of-type(3) { --n: 3; }
.premium-modal-trigger-btn > span:not([class]):nth-of-type(4) { --n: 4; }