/*
 Birthday Planner v2
 Soft Pastel Planner Style
*/


:root {

    --bg: #fffaf7;

    --card: #ffffff;

    --text: #5f5968;

    --pink: #f6c6d8;

    --pink-dark: #e89bb9;

    --blue: #cce8ff;

    --blue-dark: #8fc8f5;

    --lavender: #e8ddff;

    --mint: #d9f4e9;

    --yellow: #fff0bd;

    --border: #f2dbe7;

}







/*
 GLAVNI KONTEJNER
*/


.bp-wrapper {


    max-width:920px;


    margin:50px auto;


    padding:35px;


    background:var(--bg);


    border-radius:45px;


    font-family:

    "Nunito",
    "Quicksand",
    Arial,
    sans-serif;


    color:var(--text);


}





/*
 HEADER
*/


.bp-header {


    text-align:center;


    margin-bottom:45px;


}



.bp-logo {


    max-width:170px !important;


    margin-bottom:15px;


}



.bp-header h1 {


    margin:10px 0 15px;


    color:#db8eae;


    font-size:42px;


    font-weight:900;


    letter-spacing:-1px;


}



.bp-header p {


    margin:0;


    font-size:19px;


    color:#82b9df;


}







/*
 DEO KOJI SE CUVA KAO SLIKA
*/


#bp-export-area {


    background:#ffffff;


    padding:20px;


    border-radius:35px;


}






/*
 KARTICE
*/


.bp-preview-card {


    background:var(--card);


    padding:32px;


    margin-bottom:30px;


    border-radius:28px;


    border:2px solid var(--border);


    box-shadow:

    0 8px 25px rgba(220,190,200,.15);


}






/*
 NASLOVI KARTICA
*/


.bp-preview-card h2 {


    display:flex;


    align-items:center;


    gap:8px;


    margin:

    0 0 28px;


    padding-bottom:12px;


    font-size:23px;


    font-weight:800;


    color:#d889aa;


    border-bottom:

    3px solid #f8dce8;


}





/*
 INFORMACIJE
*/


.bp-fields label {


    display:block;


    margin-top:22px;


    margin-bottom:10px;


    font-size:15px;


    font-weight:700;


    color:#8b7990;


}



.bp-fields input,

.bp-wrapper input,

.bp-wrapper select,

.bp-wrapper textarea {


    width:100%;


    box-sizing:border-box;


    padding:15px 18px;


    border-radius:18px;


    border:

    2px solid #e7edf7;


    background:#ffffff;


    color:var(--text);


    font-size:16px;


    transition:.25s;


    outline:none;


}



.bp-wrapper input:hover,

.bp-wrapper select:hover,

.bp-wrapper textarea:hover {


    border-color:#d7c7ed;


}




.bp-wrapper input:focus,

.bp-wrapper select:focus,

.bp-wrapper textarea:focus {


    border-color:var(--pink);


    background:#fffafd;


    box-shadow:

    0 0 0 4px rgba(246,198,216,.2);


}







/*
 REDOVI
*/


.bp-line {


    display:flex;


    gap:14px;


    align-items:center;


    margin-bottom:16px;


}



.bp-grid {


    display:grid;


    grid-template-columns:

    1fr 1fr auto;


    gap:14px;


}





.bp-line input,

.bp-line select {


    margin:0;


}








/*
 DODAJ DUGMAD
*/


.bp-add {


    margin-top:10px;


    padding:12px 22px;


    border-radius:25px;


    border:

    2px solid #f3d59a;


    background:#fff8dc;


    color:#88704b;


    font-weight:700;


    cursor:pointer;


    transition:.25s;


}



.bp-add:hover {


    background:#ffefb0;


    transform:translateY(-2px);


}







/*
 BRISANJE
*/


.bp-remove {


    flex-shrink:0;


    width:42px;


    height:42px;


    border-radius:50%;


    border:0;


    background:#ffe8ef;


    cursor:pointer;


    font-size:15px;


}



.bp-remove:hover {


    background:#ffd0df;


}







/*
 BUDZET
*/


.bp-total {


    margin-top:22px;


    padding:16px;


    border-radius:20px;


    background:#f3fbff;


    text-align:right;


    color:#75a8d1;


    font-size:18px;


}







/*
 AKCIJE
*/


.bp-actions {


    display:flex;


    gap:18px;


    margin-top:35px;


}



.bp-generate,

.bp-print {


    flex:1;


    padding:18px;


    border-radius:35px;


    border:0;


    font-size:18px;


    font-weight:800;


    cursor:pointer;


    transition:.3s;


}




.bp-generate {


    background:#efa7c3;


    color:white;


    box-shadow:

    0 10px 25px rgba(239,167,195,.3);


}




.bp-generate:hover {


    background:#e48daf;


    transform:translateY(-3px);


}





.bp-print {


    background:#e8f4ff;


    color:#6c9bc5;


}





.bp-print:hover {


    background:#d5ebff;


}








/*
 PRINT / PNG
*/


@media print {


    .bp-header,

    .bp-actions {


        display:none;

    }


    .bp-wrapper {


        margin:0;

        padding:0;

        background:white;

    }


}









/*
 MOBILNI
*/


@media(max-width:700px){


    .bp-wrapper {


        margin:15px;

        padding:18px;


        border-radius:30px;

    }



    .bp-header h1 {


        font-size:32px;

    }



    .bp-preview-card {


        padding:22px;

    }



    .bp-grid {


        grid-template-columns:1fr;

    }



    .bp-line {


        flex-direction:column;

        align-items:stretch;

    }



    .bp-remove {


        width:100%;

        border-radius:18px;

    }



    .bp-actions {


        flex-direction:column;

    }


}