/* =========================
   AÇÕES DA CAPA DO ÁLBUM
   ========================= */

.removerFoto,
.baixarFoto,
.labelText {
    display: none;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

/* Remover capa */
.removerFoto {
    border: 1px solid #E5C7C7;
    background: #FFF8F8;
    color: #A33A3A;
}

.removerFoto:hover {
    background: #FDECEC;
    border-color: #D99A9A;
    color: #8F2929;
    transform: translateY(-1px);
}

.removerFoto:active {
    transform: translateY(0);
}

/* Baixar capa */
.baixarFoto {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 2px 6px rgba(31, 92, 78, .12);
}

.baixarFoto:hover {
    background: #17483E;
    border-color: #17483E;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(31, 92, 78, .18);
}

.baixarFoto:active {
    transform: translateY(0);
}

/* Mudar capa */
.labelText {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
}

.labelText:hover {
    background: var(--bg);
    border-color: #C7CCC2;
    transform: translateY(-1px);
}

.labelText:active {
    transform: translateY(0);
}

/* Foco para teclado */
.removerFoto:focus-visible,
.baixarFoto:focus-visible,
.labelText:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Espaçamento entre os botões */
.removerFoto + .baixarFoto {
    margin-left: 8px;
}

.baixarFoto + .labelText {
    margin-left: 8px;
}

/* Mobile */
@media (max-width: 520px) {
    .removerFoto,
    .baixarFoto,
    .labelText {
        width: 100%;
    }

    .removerFoto + .baixarFoto,
    .baixarFoto + .labelText {
        margin-left: 0;
        margin-top: 8px;
    }
}