/* =========================
   Forsíðu-takkar
   ========================= */

/* Secondary buttons – sami litur og sidebar */
.btn-sidebar {
    background-color: #1f2a35;
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

    .btn-sidebar:hover {
        background-color: #2a3846;
    }

    .btn-sidebar:active {
        transform: translateY(1px);
    }

/* Primary CTA – ljósari útgáfa */
.btn-sidebar-primary {
    background-color: #2f80ed; /* ljósari, “kallandi” */
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

    .btn-sidebar-primary:hover {
        background-color: #3a8bfd;
    }

    .btn-sidebar-primary:active {
        transform: translateY(1px);
    }
}
/* =========================
   Buttons (cushy / 3D)
   ========================= */

:root {
    /* Þú getur breytt þessum ef þú vilt fínstilla */
    --btn-radius: 10px;
    --btn-shadow: 0 10px 18px rgba(0,0,0,0.18);
    --btn-shadow-hover: 0 14px 24px rgba(0,0,0,0.22);
    --btn-outline: rgba(255,255,255,0.22);
}

/* Secondary – sami “sidebar” tónn, en kúptur */
button.btn-sidebar {
    background: linear-gradient(to bottom, #233140 0%, #1f2a35 60%, #1a232c 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--btn-radius);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    /* kúpt feel */
    box-shadow: var(--btn-shadow), inset 0 1px 0 var(--btn-outline), inset 0 -1px 0 rgba(0,0,0,0.25);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    button.btn-sidebar:hover {
        box-shadow: var(--btn-shadow-hover), inset 0 1px 0 rgba(255,255,255,0.26), inset 0 -1px 0 rgba(0,0,0,0.22);
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

    button.btn-sidebar:active {
        transform: translateY(1px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.20), inset 0 2px 6px rgba(0,0,0,0.25);
    }

/* Primary – aðeins ljósari (CTA) + meiri “pop” */
button.btn-sidebar-primary {
    background: linear-gradient(to bottom, #3f5872 0%, #34495e 65%, #2c3f52 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--btn-radius);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.25);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    button.btn-sidebar-primary:hover {
        transform: translateY(-2px);
        filter: brightness(1.06);
        box-shadow: 0 16px 30px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -1px 0 rgba(0,0,0,0.22);
    }

    button.btn-sidebar-primary:active {
        transform: translateY(1px);
        box-shadow: 0 7px 14px rgba(0,0,0,0.24), inset 0 2px 8px rgba(0,0,0,0.28);
    }

    /* Optional: focus (lyklaborð) – snyrtilegt */
    button.btn-sidebar:focus-visible,
    button.btn-sidebar-primary:focus-visible {
        outline: 3px solid rgba(74, 144, 226, 0.45);
        outline-offset: 2px;
    }