/* ========================================
   VERSION B - STRONGER / MORE DEPTH
======================================== */


/* ========================================
   GLOBAL BUTTON
======================================== */

.brxe-button.bricks-button {
    position: relative !important;
    overflow: hidden !important;

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

    min-height: 52px !important;
    padding: 13px 30px !important;

    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 999px !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        background 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}


/* ========================================
   PRIMARY
======================================== */

/* ========================================
   PRIMARY BUTTON
   DARK NAVY - FIGMA STYLE
======================================== */

.brxe-button.bricks-button.bricks-background-primary {
    color: #FFFFFF !important;

    /* Navy có chiều sâu nhẹ: sáng trên -> tối dưới */
    background: linear-gradient(
        180deg,
        #152845 0%,
        #0D1930 48%,
        #081222 100%
    ) !important;

    background-color: #0D1930 !important;

    /* Viền trắng giống Figma */
    border-width: 2px !important;
    border-style: solid !important;
    border-color: rgba(255, 255, 255, 0.95) !important;

    border-radius: 999px !important;

    /* Highlight nhẹ bên trong */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.14),
        inset 0 -1px 1px rgba(0, 0, 0, 0.25) !important;
}


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

.brxe-button.bricks-button.bricks-background-primary:hover {
    color: #FFFFFF !important;

    border-color: #4FD1E8 !important;

    /*
       Giữ nền navy
       + thêm ánh cyan từ góc trên trái
    */
    background:
        linear-gradient(
            135deg,
            rgba(79, 209, 232, 0.50) 0%,
            rgba(0, 130, 179, 0.24) 28%,
            rgba(0, 130, 179, 0.06) 48%,
            rgba(13, 25, 48, 0) 65%
        ),
        linear-gradient(
            180deg,
            #152845 0%,
            #0D1930 48%,
            #081222 100%
        ) !important;

    background-color: #0D1930 !important;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.16),
        inset 0 -1px 1px rgba(0, 0, 0, 0.20),
        0 0 10px rgba(79, 209, 232, 0.42),
        0 0 22px rgba(0, 130, 179, 0.20) !important;
}

/* ========================================
   SECONDARY
   STRONGER VERSION
======================================== */

.brxe-button.bricks-button.bricks-background-secondary {
    color: #0D1930 !important;

    background: linear-gradient(
        90deg,
        #FFFFFF 0%,
        #E2E8EE 100%
    ) !important;

    background-color: transparent !important;

    border-color: transparent !important;

    box-shadow:
        0 3px 10px rgba(13, 25, 48, 0.06) !important;
}


/* SECONDARY HOVER */

/* ========================================
   SECONDARY BUTTON
   FIGMA MATCH
======================================== */

.brxe-button.bricks-button.bricks-background-secondary {
    color: #0D1930 !important;

    /* Gradient đúng hướng Figma: TOP -> BOTTOM */
    background: linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F0F1F1 12%,
        #DADCDD 28%,
        #C0C3C4 45%,
        #A7ABAC 62%,
        #8E9395 80%,
        #747A7C 100%
    ) !important;

    background-color: transparent !important;

    /* Viền sáng mỏng giống Figma */
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(255, 255, 255, 0.90) !important;

    border-radius: 999px !important;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -1px 1px rgba(13, 25, 48, 0.15) !important;
}


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

.brxe-button.bricks-button.bricks-background-secondary:hover {
    color: #0D1930 !important;

    border-color: #4FD1E8 !important;

    background:
        linear-gradient(
            135deg,
            rgba(79, 209, 232, 0.34) 0%,
            rgba(79, 209, 232, 0.08) 32%,
            rgba(79, 209, 232, 0) 55%
        ),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F0F1F1 12%,
            #DADCDD 28%,
            #C0C3C4 45%,
            #A7ABAC 62%,
            #8E9395 80%,
            #747A7C 100%
        ) !important;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -1px 1px rgba(13, 25, 48, 0.12),
        0 0 10px rgba(79, 209, 232, 0.38),
        0 0 20px rgba(0, 130, 179, 0.16) !important;
}

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

.brxe-button.bricks-button:focus-visible {
    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(79, 209, 232, 0.25),
        0 0 14px rgba(0, 130, 179, 0.30) !important;
}


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

.brxe-button.bricks-button:active {
    box-shadow:
        0 0 6px rgba(79, 209, 232, 0.30) !important;
}

@media (max-width: 767px) {
    body .brxe-button.bricks-button {
    font-size: 1rem !important;
    }
}