/* ============================================================
   Elementor 3D Press Button – style.css
   ============================================================ */

/* Wrapper: handles alignment via Elementor responsive control */
.e3d-btn-wrapper {
    display: flex;
    width: 100%;
}

/* Container: positioned parent for the three layers */
.e3d-btn-container {
    position: relative;
    /* width is set by Elementor slider control */
    width: 160px;
}

/* ── Main Button ── */
.e3d-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;           /* overridden by Elementor slider */
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;     /* overridden by Elementor slider */
    position: relative;
    z-index: 2;
    transition: transform 200ms ease;
    text-decoration: none;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    /* prevent text selection on rapid clicks */
    user-select: none;
}

/* ── Primary (Filled) ── */
.e3d-btn.primary {
    background: #f25c05;
    color: #ffffff;
}

/* ── Outline ── */
.e3d-btn.outline {
    background: #151822;
    color: #f25c05;
    border: 2px solid #f25c05;
}

/* ── Bottom (depth) Layer ── */
.e3d-btn__bottom {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 50px;           /* matches button height */
    border-radius: 8px;
    background: #d94e00;
    z-index: 1;
}

/* ── Shadow Layer ── */
.e3d-btn__shadow {
    position: absolute;
    top: 14px;
    left: -4px;
    width: calc(100% + 8px);
    height: 50px;           /* matches button height */
    border-radius: 8px;
    background: rgba(217, 78, 0, 0.20);
    z-index: 0;
}

/* ── Press / Active Effect ── */
.e3d-btn:active {
    transform: translateY(8px); /* overridden by Elementor slider */
}

/* ── Hover subtle lift (optional polish) ── */
.e3d-btn:hover:not(:active) {
    transform: translateY(-2px);
}

/* ── Focus ring for accessibility ── */
.e3d-btn:focus-visible {
    outline: 3px solid #f25c05;
    outline-offset: 4px;
}