/* =========================================
   ANTI FLICKER
========================================= */

body.page-refino {

    visibility: hidden;

    background: #09090b;
}

body.page-refino.ready {

    visibility: visible;
}

/* =========================================
   LISTA
========================================= */

.menu-list {

    padding:
        10px
        15px
        90px
        15px;

    display: flex;

    flex-direction: column;

    gap: 6px;

    margin-top: 10px;
}

/* =========================================
   CATEGORY
========================================= */

.menu-category {

    font-size: 10px;

    color: #71717a;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    margin:
        14px
        0
        4px
        5px;

    font-weight: 800;
}

/* =========================================
   VOLTAR
========================================= */

.menu-voltar {

    background: #111113;

    border: 1px solid #27272a;

    padding: 10px 12px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 46px;

    margin-bottom: 8px;

    transition:
        transform .08s ease,
        border-color .15s ease;
}

.menu-voltar:active {

    transform: scale(.985);
}

.menu-voltar:hover {

    border-color: #3f3f46;
}

/* =========================================
   ITEM
========================================= */

.menu-item {

    background: #111113;

    border: 1px solid #27272a;

    padding: 10px 12px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    min-height: 46px;

    transition:
        transform .08s ease,
        border-color .15s ease;
}

.menu-item:active {

    transform: scale(.985);
}

.menu-item:hover {

    border-color: #3f3f46;
}

/* =========================================
   INFO
========================================= */

.menu-info {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 2px;

    flex: 1;
}

/* =========================================
   ICON
========================================= */

.menu-icon {

    width: 30px;

    height: 30px;

    background: #09090b;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    font-size: 16px;

    border: 1px solid #18181b;

    flex-shrink: 0;
}

/* =========================================
   TITULO
========================================= */

.refino-nome {

    font-weight: 800;

    color: #facc15;

    font-size: 12px;
}

/* =========================================
   NIVEL
========================================= */

.refino-level {

    font-size: 10px;

    color: #a1a1aa;
}

/* =========================================
   STATS
========================================= */

.refino-stat {

    font-size: 10px;

    color: #71717a;

    line-height: 1.35;
}

.refino-power {

    color: #22c55e;

    font-weight: 800;
}

.refino-gold {

    color: #facc15;

    font-weight: 800;
}

.refino-silver {

    color: #d4d4d8;

    font-weight: 700;
}

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

.refinar-btn {

    border: none;

    background:
        linear-gradient(
            135deg,
            #facc15,
            #eab308
        );

    color: #111113;

    font-weight: 900;

    border-radius: 8px;

    padding:
        0
        12px;

    cursor: pointer;

    min-width: 74px;

    height: 34px;

    font-size: 11px;

    transition:
        transform .12s ease,
        filter .15s ease;

    flex-shrink: 0;
}

.refinar-btn:hover {

    filter: brightness(1.04);
}

.refinar-btn:active {

    transform: scale(.96);
}

.refinar-btn:disabled {

    opacity: .5;
}

/* =========================================
   SETA
========================================= */

.arrow {

    color: #facc15;

    opacity: 1;

    font-size: 11px;

    font-weight: 800;
}


/* =========================================
   MODAL REFINAMENTO
========================================= */

.refino-dialog {

    text-align: left;
}

.refino-dialog-title {

    text-align: center;

    color: #facc15;

    font-size: 18px;

    font-weight: 900;

    margin-bottom: 18px;

    text-transform: capitalize;
}

.refino-dialog-line {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    padding: 8px 0;

    border-bottom:
        1px solid rgba(255,255,255,.04);

    font-size: 14px;

    color: #d4d4d8;
}

.refino-dialog-line:last-child {

    border-bottom: none;
}

.refino-value-yellow {

    color: #facc15;

    font-weight: 800;
}

.refino-value-green {

    color: #22c55e;

    font-weight: 800;
}

.refino-value-white {

    color: #f4f4f5;

    font-weight: 700;
}

.refino-loading {

    opacity: .6;

    pointer-events: none;
}


/* =========================================
   KEEP OPEN DIALOG
========================================= */

.dialog-backdrop.keep-open {

    display: flex !important;

    opacity: 1 !important;

    visibility: visible !important;
}