/* Button Arrow Animations */

/* Simple arrow animation for .btn-filled */
.btn-filled {
    position: relative;
    overflow: hidden;
}

.btn-filled::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20%;
    height: 2px;
    width: 0;
    background-color: #efefea;
    transform: translateY(-50%);
    transition: width 0.4s ease;
    z-index: 1;
}

.btn-filled.hovering::before {
    left: 1.5em;
    width: calc(100% - 3em);
}

.btn-filled::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 20%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #efefea;
    border-top: 2px solid #efefea;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0;
    transition: left 0.4s ease, opacity 0.1s ease;
    z-index: 2;
}

.btn-filled.hovering::after {
    left: calc(100% - 1.5em - 8px);
    opacity: 1;
}

/* Gold button variant */
.btn-filled-gold::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20%;
    height: 2px;
    width: 0;
    background-color: #0f1818;
    transform: translateY(-50%);
    transition: width 0.4s ease;
    z-index: 1;
}

.btn-filled-gold.hovering-gold::before {
    left: 1.5em;
    width: calc(100% - 3em);
}

.btn-filled-gold::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 20%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #0f1818;
    border-top: 2px solid #0f1818;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0;
    transition: left 0.4s ease, opacity 0.1s ease;
    z-index: 2;
}

.btn-filled-gold.hovering-gold::after {
    left: calc(100% - 1.5em - 8px);
    opacity: 1;
}

/* Text arrow outlined button */
.btn-text-arrow-outlined {
    border-bottom: 4px solid transparent;
    transition: border-bottom-color 0.6s ease;
}

.btn-text-arrow-outlined:hover,
.btn-text-arrow-outlined:focus {
    border-bottom-color: #BD9148;
}