/* ==========================================================================
   FICHEIRO: consent.css
   DESCRICAO: Banner de cookies + painel de definicoes.
   Usa os tokens do style.css. O foco visivel e herdado da regra global
   (:focus-visible em style.css) — nao se redefine aqui.
   ========================================================================== */

/* --- Banner ------------------------------------------------------------ */

.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    /* Acima da nav mobile (900) e abaixo do modal (1000): o banner nao deve
       tapar um modal aberto, mas nao pode ficar por baixo da navegacao. */
    z-index: 950;
    background: #1a1a1a;
    color: var(--text-color);
    border: 1px solid var(--border-color-dark);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    padding: 1.25rem 1.5rem;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-banner__copy h2 {
    font-size: 1rem;
    margin: 0 0 0.35rem;
    color: var(--text-color);
}

.cookie-banner__copy p {
    margin: 0;
    font-size: var(--font-size-small);
    line-height: 1.5;
    color: var(--text-secondary-color);
}

.cookie-banner__copy a {
    color: var(--text-color);
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* --- Botoes ------------------------------------------------------------
   "Recusar" e "Aceitar" partilham a MESMA classe e o mesmo peso visual.
   Dar destaque ao "Aceitar" tornaria o consentimento menos livre. */

.cookie-btn {
    font-family: inherit;
    font-size: var(--font-size-small);
    padding: 0.6rem 1.1rem;
    border-radius: 6px;
    border: 1px solid var(--text-color);
    background: var(--text-color);
    color: #111;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    /* 44px de alvo tactil mesmo com padding pequeno */
    min-height: 44px;
}

.cookie-btn:hover {
    opacity: 0.85;
}

.cookie-btn--ghost {
    background: transparent;
    color: var(--text-color);
    border-color: var(--border-color-dark);
}

/* --- Painel de definicoes ---------------------------------------------- */

.cookie-panel {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cookie-panel__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.cookie-panel__box {
    position: relative;
    background: #1a1a1a;
    border: 1px solid var(--border-color-dark);
    border-radius: 10px;
    padding: 1.75rem;
    width: min(560px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    color: var(--text-color);
}

.cookie-panel__box h2 {
    font-size: 1.25rem;
    margin: 0 0 1.25rem;
}

.cookie-option {
    border-top: 1px solid var(--border-color-dark);
    padding: 1rem 0;
}

.cookie-option__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.cookie-option__head label {
    cursor: pointer;
}

.cookie-option__head input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--text-color);
    cursor: pointer;
}

.cookie-option__fixed {
    font-size: var(--font-size-small);
    font-weight: 400;
    color: var(--text-muted);
}

.cookie-option p {
    margin: 0;
    font-size: var(--font-size-small);
    line-height: 1.5;
    color: var(--text-secondary-color);
}

.cookie-panel__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* --- Responsivo -------------------------------------------------------- */

@media (max-width: 820px) {
    .cookie-banner__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .cookie-banner__actions {
        flex-wrap: wrap;
    }

    /* Os tres botoes ocupam a largura toda e mantem o mesmo peso entre si. */
    .cookie-banner__actions .cookie-btn {
        flex: 1 1 auto;
    }
}

/* --- Movimento reduzido ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .cookie-banner,
    .cookie-btn {
        transition: none;
    }

    .cookie-banner {
        transform: none;
    }
}

/* --- Ponteiro do rato --------------------------------------------------
   O site esconde o cursor (`cursor: none` no body — o rasto de partículas
   faz de ponteiro). Num banner/painel de consentimento isso é um problema:
   é uma decisão que se pede ao visitante, e ele fica sem ver onde aponta.
   Aqui repõe-se o ponteiro real enquanto o banner ou o painel estiverem
   abertos, sem mexer no efeito do resto do site. */

.cookie-banner,
.cookie-banner *,
.cookie-panel,
.cookie-panel * {
    cursor: auto;
}

.cookie-banner a,
.cookie-panel a,
.cookie-btn,
.cookie-option__head label,
.cookie-option__head input[type="checkbox"],
.cookie-panel__backdrop {
    cursor: pointer;
}