@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Playfair+Display:wght@600;700&display=swap');


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Google Sans", Arial, sans-serif;
}


/* =========================
   BODY
========================= */

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
    overflow-y:auto;   /* was: overflow:hidden */
}


/* =========================
   BLURRED BACKGROUND
========================= */

.background{

    position:fixed;

    inset:0;

    background:
    url("assets/background.jpg")
    center/cover
    no-repeat;


    filter:
    blur(5px)
    brightness(.65);


    transform:scale(1.1);

    z-index:-1;

}


/* =========================
   MAIN CONTAINER
========================= */

.container{
    display:flex;
    width:100%;
    max-width:950px;
    /* min-height:600px;  <-- remove this line */
    border-radius:50px;
    overflow:hidden;
    background:rgba(238, 224, 197, 0.719);
    box-shadow:0 30px 70px rgba(0,0,0,.35);
}



/* =========================
   LEFT CARD
========================= */


.card1 {
    flex:2.4;   /* was 2 — nudge up until gap disappears */
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    padding: 0px 0px 0px 30px;
}

.card1-image {
    width:100%;
    height:auto;         /* image dictates its own height again */
    object-fit:contain;
    display:block;
    border-radius:35px;
}



/* =========================
   RIGHT CARD
========================= */


.card2{
    flex:1;
    
    padding:35px 50px;
    overflow-y:auto;     /* scrolls internally instead of stretching the container */
    max-height:100%;     /* capped to match card1's height via flex stretch */
}

.input-group{
    margin-bottom:14px;  /* was 20px */
}



/* RSVP Title */

.card2 h1{

    font-family:"Playfair Display",serif;


    font-size:42px;


    color:#333;


    text-align:left;


    margin-bottom:10px;

}


/* Description */

p{

    color:#444444;

    font-size:16px;

    margin-bottom:35px;

    text-align:left;

}



/* =========================
   FORM
========================= */


.input-group{

    margin-bottom:20px;

}


label{

    display:block;


    font-size:15px;


    font-weight:600;


    color:#555;


    margin-bottom:8px;

}



input,
select{

    width:100%;


    padding:15px 18px;


    border-radius:15px;


    border:1px solid #e5e5e5;


    background:#fafafa;


    font-size:15px;


    outline:none;


    transition:.3s;

}



input:focus,
select:focus{

    background:white;


    border-color:#4968ff;


    box-shadow:
    0 0 12px rgba(73,104,255,.25);

}



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


button{

    width:100%;


    padding:16px;


    border:none;


    border-radius:15px;


    margin-top:10px;


    background:

    linear-gradient(
        135deg,
        #e0d983,
        #fa9e52
    );


    color:white;


    font-size:17px;


    font-weight:bold;


    cursor:pointer;


    transition:.3s;

}



button:hover{

    transform:translateY(-3px);


    box-shadow:

    0 12px 25px rgba(73,104,255,.35);

}


.admin-btn{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:max-content;

    margin:30px auto 20px;

    color:white;

    padding:12px 25px;

    border-radius:30px;

    text-decoration:none;

    font-size:16px;

    transition:.3s;

}

.admin-icon{

    width:35px;

    height:35px;

    vertical-align:middle;

}


.admin-btn:hover{

    background:#444;

    transform:translateY(-3px);

}


/* =========================
   MOBILE RESPONSIVE
========================= */

/* Phone */
@media(max-width:768px){


    body{

        overflow:auto;

        padding:20px;

    }


    .container{

        flex-direction:column;

        border-radius:50px;

    }

    .card1{

        padding: 0px 0px 0px 0px;

    }

    
    .card2{

        padding:35px;

    }



    .card1 h1{

        font-size:38px;

    }



    .card2 h1{

        font-size:35px;

    }

}


/* Tablet */
@media (min-width:769px) and (max-width:1200px){
    .container{
        min-height:auto;
    }
}