.btn-submit {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    color: #ff9c00;
    padding: 12px 24px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    width: 160px;
    height: 48px;
}

.btn-submit:hover {
    background: rgba(255, 255, 255, 0.2);
}

.button-text {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.button-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

/* Sending state */
.btn-submit.sending {
    background: #ffc107;
    color: #000;
    pointer-events: none;
}

.btn-submit.sending .button-text {
    animation: pulse 1.5s infinite;
}

/* Success state */
.btn-submit.success {
    background: #05ca0b;
    color: #fff;
}

.btn-submit.success .button-text {
    animation: none;
}

/* Loading animation */
.circular {
    width: 24px;
    height: 24px;
    animation: rotate 2s linear infinite;
}

.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke: currentColor;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}