:root {
    --bg: rgba(0, 0, 0, 0.6);
    --modal-bg: #fff;
    --accent: #2b6cb0
}

button {
    font: inherit
}





/* Przycisk otwieraj�cy */

.open-btn {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    border: 0;
    background: var(--accent);
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(43, 108, 176, 0.2)
}





/* Overlay i modal */

.overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999999999999;
}

.overlay[aria-hidden="false"] {
    display: flex
}

.modal {
    background: var(--modal-bg);
    border-radius: 12px;
    max-width: 480px;
    width: 90%;
    padding: 1.25rem 1.25rem 1.5rem;
    position: relative;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.2)
}





/* Przycisk X (stylowany) */

.close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-grid;
    place-items: center
}

.close-x:focus {
    outline: 2px solid rgba(43, 108, 176, 0.25)
}

/* Linie X */

.close-x .bar {
    position: absolute;
    width: 18px;
    height: 2px;
    background: #444;
    border-radius: 2px
}

.close-x .bar--a {
    transform: rotate(45deg)
}

.close-x .bar--b {
    transform: rotate(-45deg)
}





/* Tre�� */

.modal h2 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem
}

.modal p {
    margin: 0 0 1rem;
    color: #334155;
    padding: 0 10px;
}

.actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end
}

.btn-secondary {
    background: #e6eef9;
    border: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 8px
}