/*=====================================
    WISHES - FELICITAÇÕES
======================================*/

.wishes{

    position:relative;
    padding:120px 20px;
    overflow:hidden;
    background:
    linear-gradient(
        180deg,
        #ffffff,
        #faf8ff
    );

}


/* decoração */

.wishes-decoration{

    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    top:-150px;

    background:
    radial-gradient(
        circle,
        rgba(91,61,245,.12),
        transparent 70%
    );

    border-radius:50%;

}


.wishes-container{

    max-width:850px;
    margin:auto;
    text-align:center;
    position:relative;
    z-index:2;

}


/* badge */

.wishes-badge{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 20px;

    border-radius:50px;

    background:#fff;

    color:#e22626;

    font-size:12px;
    font-weight:700;

    letter-spacing:1.5px;

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

}



/* titulo */

.wishes h2{

    margin-top:25px;

    font-size:42px;

    line-height:1.2;

    color:#172033;

    font-weight:700;

}



.wishes-container > p{

    max-width:650px;

    margin:20px auto 45px;

    color:#556070;

    line-height:1.8;

    font-size:16px;

}



/* CARD PRINCIPAL */

.wishes-card{

    background:#ffffff;

    padding:45px;

    border-radius:35px;

    box-shadow:

    0 25px 70px rgba(23,32,51,.10);

    border:1px solid rgba(255,255,255,.8);

}



/* inputs */


.wish-group{

    text-align:left;

    margin-bottom:25px;

}



.wish-group label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    color:#172033;

}



.wish-group input,
.wish-group textarea{

    width:100%;

    padding:16px 18px;

    border-radius:18px;

    border:1px solid #E5E7EB;

    outline:none;

    font-size:15px;

    background:#fafafa;

    transition:.3s;

}



.wish-group textarea{

    resize:none;

}



.wish-group input:focus,
.wish-group textarea:focus{

    background:white;

    border-color:#5B3DF5;

    box-shadow:
    0 0 0 4px rgba(91,61,245,.10);

}



/* botão enviar */


.wish-submit{

    width:100%;

    padding:17px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    color:rgba(255, 255, 255, 0.749);

    font-size:15px;

    font-weight:600;

    background:

    linear-gradient(
        135deg,
        #898989de,
        #969595e6
    );


    box-shadow:

    0 15px 35px rgb(239, 234, 234);

    transition:.35s;

}


.wish-submit:hover{

    transform:translateY(-3px);

    box-shadow:

    0 20px 45px rgba(238, 238, 240, 0.977);

}



/* BOTÃO VER */


.toggle-wishes{

    margin-top:25px;

    background:white;

    border:1px solid #E5E7EB;

    padding:15px 35px;

    border-radius:50px;

    cursor:pointer;

    font-weight:600;

    color:#f53d3d;

    transition:.35s;

}



.toggle-wishes:hover{

    background:#ff6e6e;

    color:white;

    transform:translateY(-3px);

}



/* PAINEL */


.wishes-panel{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transform:translateY(30px);

    transition:

    max-height .8s ease,
    opacity .5s ease,
    transform .6s ease;

}



.wishes-panel.active{

    max-height:700px;

    opacity:1;

    transform:translateY(0);

}



/* lista */


.wishes-scroll{

    margin-top:35px;

    display:grid;

    gap:18px;

}



/* mini cartões */


.wish-item{

    text-align:left;

    padding:25px;

    border-radius:25px;

    background:white;

    border:1px solid #eee;

    box-shadow:

    0 15px 35px rgba(0,0,0,.06);

    opacity:0;

    transform:
    translateY(40px)
    scale(.95);

    transition:.6s;

    position:relative;

    overflow:hidden;

}


.wish-item::before{

    content:"❤";

    position:absolute;

    right:20px;

    top:15px;

    font-size:30px;

    color:rgba(91,61,245,.08);

}



.wish-item.show-card{

    opacity:1;

    transform:

    translateY(0)
    scale(1);

}



.wish-item h4{

    margin-bottom:10px;

    color:#172033;

    font-size:17px;

}



.wish-item p{

    color:#556070;

    line-height:1.7;

    font-size:14px;

}



.wish-item small{

    display:block;

    margin-top:15px;

    color:#999;

}



/* RESPONSIVO */


@media(max-width:768px){


.wishes{

    padding:80px 15px;

}


.wishes h2{

    font-size:30px;

}


.wishes-card{

    padding:25px;

}


}