/* =========================
   BUTTON OUTLINE PRIMARY
========================= */

.btn-outline-primary {
    padding: 12px 18px;
    border-radius: 12px;

    border: 2px solid #0b1120;
    background: transparent;
    color: #0b1120;

    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;

    cursor: pointer;
    text-decoration: none;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.btn-outline-primary:hover {
    background: #0b1120;
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-outline-primary:focus-visible {
    outline: 3px solid rgba(29, 78, 216, 0.6);
    outline-offset: 3px;
}


/* =========================
   BUTTON OUTLINE ACCENT
========================= */

.btn-outline-accent {
    padding: 12px 18px;
    border-radius: 12px;

    border: 2px solid var(--na-icon-color);
    background: transparent;
    color: var(--na-icon-color);

    font-family: inherit;
    font-weight: 900;
    font-size: 1rem;

    cursor: pointer;
    text-decoration: none;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.btn-outline-accent:hover {
    background: var(--na-icon-color);
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-outline-accent:focus-visible {
    outline: 3px solid rgba(139, 44, 44, 0.45);
    outline-offset: 3px;
}


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

.btn-lang {
    padding: 6px 12px;
    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    color: white;

    font-size: 0.85rem;
    cursor: pointer;
    margin-left: 8px;

    backdrop-filter: blur(4px);

    transition:
        background 0.2s ease,
        transform 0.1s ease;
}

.btn-lang:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.btn-lang:focus-visible {
    outline: 2px solid rgba(147, 197, 253, 0.8);
    outline-offset: 2px;
}