/* ========================================================= */

/* SOLGATE PRO - FRONTEND UI STYLES                          */

/* ========================================================= */



.solgate-wrapper {

    position: relative;

    display: inline-block;

    font-family: inherit;

}



/* Base Pill inheriting from Admin settings */

.solgate-pill {

    background-color: var(--sg-bg, #111111);

    color: var(--sg-text, #ffffff) !important;

    padding: 12px 18px;

    border-radius: var(--sg-radius, 30px);

    font-weight: bold;

    font-size: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.1);

    cursor: pointer;

    text-decoration: none;

    transition: all 0.2s ease-in-out;

    text-transform: uppercase;

    min-width: 100px;

}



.solgate-pill i {

    margin-right: 8px;

}



.solgate-pill:hover {

    opacity: 0.9;

}



/* Wallet Dropdown Menu */

.solgate-dropdown {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    margin: 8px 0 0 0;

    padding: 0;

    list-style: none;

    background-color: var(--sg-bg, #111111);

    border-radius: 12px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

    overflow: hidden;

    z-index: 9999;

    border: 1px solid rgba(255, 255, 255, 0.1);

    display: none; /* Hidden by default */

}



/* Class toggled by JS */

.solgate-dropdown.show {

    display: block;

    animation: fadeInDown 0.2s ease-out forwards;

}



/* Individual Wallet Options */

.solgate-wallet-option {

    padding: 14px 20px;

    color: var(--sg-text, #ffffff);

    cursor: pointer;

    font-size: 14px;

    font-weight: 600;

    display: flex;

    align-items: center;

    transition: background-color 0.2s ease;

}



.solgate-wallet-option:hover {

    background-color: rgba(255, 255, 255, 0.1);

}



/* Status Messages */

#solgate-status-message {

    margin-top: 12px;

    font-size: 12px;

    font-weight: bold;

    text-align: center;

    text-transform: uppercase;

}



/* Simple animation for the dropdown */

@keyframes fadeInDown {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}