/* =========================
   Alap beállítások
========================= */

* {
    box-sizing: border-box;
}


body {

    margin: 0;
    padding: 0;

    min-height: 100vh;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #111,
            #2b1d05
        );

    color: white;

}



a {

    color: inherit;
    text-decoration: none;

}



.main-container {

    width: 100%;
    max-width: 600px;

    margin: auto;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 20px;

}



/* =========================
   Főoldal
========================= */


.photo-card {

    width: 100%;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.5);

    animation:
        fadeIn .5s ease;

}



.main-photo {

    display: block;

    width: 100%;

    max-height: 75vh;

    object-fit: cover;

}



.swipe-buttons {

    width: 100%;

    display: flex;

    justify-content: center;

    gap: 40px;

    margin-top: 30px;

}



.swipe-btn {

    width: 85px;

    height: 85px;

    border-radius: 50%;

    border: none;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 45px;

    font-weight: bold;

    cursor: pointer;

    transition:
        transform .2s,
        box-shadow .2s;

}



.swipe-btn:hover {

    transform: scale(1.1);

}



.swipe-btn.no {

    background: #e53935;

    color: white;

    box-shadow:
        0 8px 25px rgba(229,57,53,.5);

}



.swipe-btn.yes {

    background: #2ecc71;

    color:white;

    box-shadow:
        0 8px 25px rgba(46,204,113,.5);

}



/* =========================
   Form
========================= */


.form-card,
.success-card {

    width: 100%;

    background:

        rgba(255,255,255,.08);

    backdrop-filter: blur(12px);

    border-radius: 30px;

    padding: 25px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.4);

}



h1 {

    text-align:center;

    color:#ffd166;

}



.intro-text {

    line-height:1.6;

    text-align:center;

    margin-bottom:30px;

}



.input-group {

    margin-bottom:18px;

}



label {

    display:block;

    margin-bottom:7px;

    color:#ffd166;

}



input,
textarea {

    width:100%;

    padding:15px;

    border-radius:15px;

    border:none;

    background:white;

    font-size:16px;

}



textarea {

    resize:none;

}



.submit-button,
.back-button {

    width:100%;

    display:block;

    text-align:center;

    padding:16px;

    border-radius:30px;

    border:none;

    background:

        linear-gradient(
            90deg,
            #ffd166,
            #ff9f1c
        );

    color:#111;

    font-weight:bold;

    font-size:18px;

    cursor:pointer;

}



/* =========================
   Success
========================= */


.success-icon {

    text-align:center;

    font-size:70px;

}



.success-emojis {

    text-align:center;

    font-size:30px;

}



/* =========================
   Admin
========================= */


.admin-container {

    padding:20px;

}



.table-wrapper {

    overflow-x:auto;

}



table {

    width:100%;

    border-collapse:collapse;

    background:white;

    color:#222;

    border-radius:15px;

    overflow:hidden;

}



th {

    background:#ffd166;

}



th,
td {

    padding:10px;

    border-bottom:1px solid #ddd;

    text-align:center;

}



.admin-image {

    width:80px;

    height:80px;

    object-fit:cover;

    border-radius:15px;

}



.message-cell {

    max-width:250px;

}



.delete-button {

    font-size:22px;

}



/* =========================
   Animációk
========================= */


@keyframes fadeIn {

    from {

        opacity:0;

        transform:
            translateY(20px);

    }


    to {

        opacity:1;

        transform:
            translateY(0);

    }

}



/* Nagyobb kijelző */

@media(min-width:768px){


    .main-container {

        max-width:700px;

    }


}

/* =========================
   Kép előnézet
========================= */


.preview-container {

    display:none;

    margin-top:20px;

    text-align:center;

}



.image-preview {

    width:100%;

    max-height:300px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.4);

}



#file-name {

    color:#ffd166;

    margin-top:10px;

    font-size:14px;

}