/* ===== TYPOGRAFIA ===== */

body,
h1, h2, h3, p, ul,
.nav-item {
    font-family: 'Press Start 2P', monospace;
}

.nav-item {
    text-transform: uppercase;
    letter-spacing: 0.35em;
}

/* ===== TŁO STRONY ===== */

body{
    background-color:black;
    background-image:url('../gfx/dotts.jpg');
    background-repeat:repeat-x;
    color:#eeeeee;
}

/* ===== HERO ===== */

.hero{
    background:linear-gradient(90deg,#090016,#1a0033);
    border-bottom:3px solid #00f7ff;
}

/* ===== KOLORY NAGŁÓWKÓW ===== */

h1,h2,h3{
    color:#00ffff;
}

/* ===== SEPARATOR MENU ===== */

.divider{
    width:1px;
    background:rgba(255,255,255,.3);
    margin:0 1rem;
}

/* ===== BLOKI ===== */

.darkgray{
    background-color:black;
    color:white;
    opacity:0.9;
}

/* ===== TYTUŁY SEKCJI ===== */

.section-title{
    border-left:5px solid #00f7ff;
    border-bottom:1px solid #00f7ff;
    padding-left:12px;
    margin-bottom:25px;
    background-color:black;
}

/* ===== LISTY SERDUSZKA ===== */

.heart-list{
    list-style:none !important;
    padding-left:0;
    margin-left:0;
}

.heart-list li{
    list-style:none !important;
    position:relative;
    padding-left:28px;
    margin:8px 0;
}

.heart-list li::marker{
    content:"";
}

.heart-list li::before{
    content:"❤";
    position:absolute;
    left:0;
    color:#ff2bd6;
    text-shadow:0 0 6px #ff2bd6;
}




/* ===== OBRAZ W KONTENERZE ===== */

.promo-image-wrapper{
    margin: 40px auto;
    padding: 0 20px; /* lekki margines po bokach */
}

.promo-image{
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    border: 3px solid #00f7ff;
    box-shadow: 0 0 20px #00f7ff55;
    transition: transform .3s ease, box-shadow .3s ease;
}

.promo-image:hover{
    transform: scale(1.02);
    box-shadow: 0 0 30px #00f7ff;
}

/* ===== FULLSCREEN MODAL ===== */

.image-modal{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

.image-modal.active{
    display: flex;
}

.modal-content{
    max-width: 95vw;
    max-height: 95vh;
    animation: zoomIn .25s ease;
    box-shadow: 0 0 40px #00f7ff;
}

@keyframes zoomIn{
    from{ transform: scale(.9); opacity:0; }
    to{ transform: scale(1); opacity:1; }
}

.modal-close{
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 40px;
    color: #00ffff;
    cursor: pointer;
    text-shadow: 0 0 10px #00ffff;
    transition: transform .2s ease;
}

.modal-close:hover{
    transform: scale(1.2);
}