/*==========================================================
  MODERN BEAUTY EDUCATION
  BUTTON SYSTEM
==========================================================*/


/*==========================================================
  1. SHARED BUTTON ANIMATION
==========================================================*/

/*
 * The actual button gets the hover layer.
 * Existing colour variables are retained.
 */

.mbe-btn-animation {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.mbe-btn-animation::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mb-btn-hover);
    transform: translateX(-101%);
    transition: transform var(--mb-btn-transition);
    z-index: -1;
}

.mbe-btn-animation:hover::before {
    transform: translateX(0);
}


/*==========================================================
  2. NORMAL PAGE GUTENBERG BUTTONS
==========================================================*/

.entry-content .wp-block-button .wp-block-button__link,
.entry-content .wp-block-button .wp-element-button {

    position: relative;
    overflow: hidden;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 7px 18px;

    border: var(--mb-btn-border-width) solid var(--mb-btn-border);

    border-radius: 0;

    background: var(--mb-btn-bg);
    color: var(--mb-btn-text);

    font-family: var(--mb-btn-font);
    font-size: 18px;
    font-weight: 500;

    line-height: 1;
    letter-spacing: 0;

    text-transform: uppercase;
    text-decoration: none;

    cursor: pointer;

    transition:
        color .25s ease,
        transform .15s ease;
}


/* transparent gap around button */

.entry-content .wp-block-button {
    padding: 3px;
    background: transparent;
    border: var(--mb-btn-border-width) solid var(--mb-btn-border);
    line-height: 0;
}


/* Page hover layer */

.entry-content .wp-block-button .wp-block-button__link::before {

    content: "";
    position: absolute;
    inset: 0;

    background: var(--mb-btn-hover);

    transform: translateX(-101%);
    transition: transform var(--mb-btn-transition);

    z-index: -1;
}


.entry-content .wp-block-button:hover .wp-block-button__link::before {

    transform: translateX(0);
}


.entry-content .wp-block-button:hover .wp-block-button__link {

    color: var(--mb-btn-text-hover);
}


/*==========================================================
  3. COURSE CPT BUTTONS
==========================================================*/

/*
 * Covers both:
 *
 * Header image:
 * FIND A LOCATION
 *
 * Content:
 * GET STARTED
 */

.single-mbe_course .wp-block-button {

    padding: 3px;

    background: transparent;

    border: var(--mb-btn-border-width) solid var(--mb-btn-border);

    line-height: 0;
}


.single-mbe_course .wp-block-button .wp-block-button__link,
.single-mbe_course .wp-block-button .wp-element-button {

    position: relative;
    overflow: hidden;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 7px 18px;

    border: var(--mb-btn-border-width) solid var(--mb-btn-border);

    border-radius: 0;

    background: var(--mb-btn-bg);
    color: var(--mb-btn-text);

    font-family: var(--mb-btn-font);
    font-size: 18px;
    font-weight: 500;

    line-height: 1;
    letter-spacing: 0;

    text-transform: uppercase;
    text-decoration: none;

    cursor: pointer;

    transition:
        color .25s ease,
        transform .15s ease;
}


/* Course hover animation */

.single-mbe_course .wp-block-button .wp-block-button__link::before {

    content: "";

    position: absolute;
    inset: 0;

    background: var(--mb-btn-hover);

    transform: translateX(-101%);

    transition: transform var(--mb-btn-transition);

    z-index: -1;
}


.single-mbe_course .wp-block-button:hover .wp-block-button__link::before {

    transform: translateX(0);
}


.single-mbe_course .wp-block-button:hover .wp-block-button__link {

    color: var(--mb-btn-text-hover);
}



/*==========================================================
  ASTRA HEADER BUTTONS
==========================================================*/

.ast-header-button-1 .ast-builder-button-wrap,
.ast-header-button-2 .ast-builder-button-wrap {

    padding: 3px;

    background: transparent;

    border: 2px solid var(--mb-btn-border);

    line-height: 0;
}


/*----------------------------------------------------------
  BUTTON
----------------------------------------------------------*/

.ast-header-button-1 .ast-custom-button,
.ast-header-button-2 .ast-custom-button {

    position: relative;

    overflow: hidden;

    isolation: isolate;

    min-height: 46px;

    padding: 8px 18px;

    border: 2px solid var(--mb-btn-border);

    border-radius: 0;

    white-space: nowrap;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    font-family: var(--mb-btn-font);

    font-size: 18px;

    font-weight: 500;

    line-height: 1;

    text-transform: uppercase;
}


/*----------------------------------------------------------
  GET STARTED
----------------------------------------------------------*/

.ast-header-button-1 .ast-custom-button {
    min-width: 140px;
}


/*----------------------------------------------------------
  PHONE
----------------------------------------------------------*/

.ast-header-button-2 .ast-custom-button {
    min-width: 155px;
}


/*==========================================================
  HOVER ANIMATION
==========================================================*/

.ast-header-button-1 .ast-custom-button::before,
.ast-header-button-2 .ast-custom-button::before {

    content: "";

    position: absolute;

    inset: 0;

    background: var(--mb-btn-hover);

    transform: translateX(-101%);

    transition: transform var(--mb-btn-transition);

    z-index: -1;
}


.ast-header-button-1:hover .ast-custom-button::before,
.ast-header-button-2:hover .ast-custom-button::before {

    transform: translateX(0);
}


/*==========================================================
  HOVER TEXT COLOUR
==========================================================*/

.ast-header-button-1:hover .ast-custom-button,
.ast-header-button-2:hover .ast-custom-button {

    color: var(--mb-btn-text-hover);
}








/*==========================================================
  FLUENT FORMS BUTTON
==========================================================*/

.ff-btn.ff-btn-submit.ff_btn_style {

    position: relative;

    overflow: hidden;

    isolation: isolate;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 7px 18px;

    /* INNER BORDER */
    border: 2px solid var(--mb-btn-border);

    border-radius: 0;

    background: var(--mb-btn-bg) !important;

    color: var(--mb-btn-text) !important;

    /* OUTER BORDER + TRANSPARENT GAP */
    outline: 2px solid var(--mb-btn-border);

    outline-offset: 5px;

    font-family: var(--mb-btn-font);

    font-size: 18px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0;

    text-transform: uppercase;

    text-decoration: none;

    cursor: pointer;

    transition:
        color .25s ease,
        transform .15s ease;
}


/*==========================================================
  HOVER ANIMATION
==========================================================*/

.ff-btn.ff-btn-submit.ff_btn_style::before {

    content: "";

    position: absolute;

    inset: 0;

    background: var(--mb-btn-hover);

    transform: translateX(-101%);

    transition: transform var(--mb-btn-transition);

    z-index: -1;
}


.ff-btn.ff-btn-submit.ff_btn_style:hover::before {

    transform: translateX(0);
}


/*==========================================================
  HOVER
==========================================================*/

.ff-btn.ff-btn-submit.ff_btn_style:hover {

    background: var(--mb-btn-bg) !important;

    border: 2px solid var(--mb-btn-border) !important;

    outline: 2px solid var(--mb-btn-border) !important;

    outline-offset: 5px !important;

    color: var(--mb-btn-text-hover) !important;
}


.ff-btn.ff-btn-submit.ff_btn_style:hover::before {

    transform: translateX(0);
}


/*==========================================================
  ACTIVE
==========================================================*/

.ff-btn.ff-btn-submit.ff_btn_style:active {

    transform: scale(.97);
}


/*==========================================================
  FOCUS
==========================================================*/

.ff-btn.ff-btn-submit.ff_btn_style:focus-visible {

    outline: 2px solid var(--mb-btn-border);

    outline-offset: 5px;
}


/*==========================================================
  MOBILE
==========================================================*/

@media (max-width: 768px) {

    .ff-btn.ff-btn-submit.ff_btn_style {

        min-height: 40px;

        padding: 7px 16px;

        font-size: 17px;
    }
}