#targetflow{

    width:92%;

    font-family:Arial,sans-serif;

}

input,
textarea {

    width: 95%;

    padding: 12px;
    
    font-size: 20;

    margin-top: 10px;

    margin-bottom: 10px;

}

.input-row input{

    flex:1;

}

.cards-container {

    display: flex;
    gap: 20px;
    margin-top: 20px;

}

.card-option {

    flex: 1;
    padding: 20px;
    background-color: #ffffff;
    color: #333333;
    border: 2px solid #ddd;
    border-radius: 12px;
    cursor: pointer;
    transition: .2s;

}

.card-option:hover {

    /*border-color: #ff2f86;*/
    background-color: #ff2f86;
    border: 2px solid #ddd;
    color: #ffffff;
    transform: translateY(-2px);

}

@keyframes pulse{

    0%{

        transform:scale(1);
        opacity:1;

    }

    50%{

        transform:scale(1.5);
        opacity:.4;

    }

    100%{

        transform:scale(1);
        opacity:1;

    }

}

.fade-step{

    animation:
    fadeStep .45s cubic-bezier(
        0.22,
        1,
        0.36,
        1
    );

}

@keyframes fadeStep{

    from{

        opacity:0;

        transform:
        translateY(30px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

.next-button{

    width:40px;

    height:40px;

    min-width:40px;

    border:none;
    
    padding-bottom: 10px;

    border-radius:8px;

    color:#fff;

    font-size:30px;

    font-weight:700;

    cursor:pointer;

    background:
    linear-gradient(
        135deg,
        #F06593,
        #ff3f76 48%,
        #ff2f86 100%
    );

    box-shadow:
    0 10px 25px rgba(
        240,
        101,
        147,
        .25
    );

}

.input-row{

    display:flex;

    align-items:center;

    gap:8px;

    width:100%;
    
    flex:1;

}

#field-error{

    display:none;

    margin-top:12px;

    color:#c2410c;

    background:#fff7ed;

    border:1px solid #fdba74;

    border-radius:16px;

    padding:14px 18px;

    font-weight:500;

}

.message-footer{

    display:flex;

    align-items:flex-start;

    gap:16px;

    margin-top:16px;

}

.textarea-wrapper{

    display:flex;
    
    margin-left: 10px;

    align-items:flex-end;

    gap:16px;

}

.textarea-wrapper textarea{

    margin-left: 10px;
    
    flex:1;

}

.textarea-button{

    margin-bottom:8px;

}

.pix-copy-button{

    width:100%;

    margin-top:16px;

    padding:16px 24px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #F06593,
        #ff3f76 48%,
        #ff2f86 100%
    );

    box-shadow:
        0 8px 20px
        rgba(
            240,
            101,
            147,
            .20
        );

    transition:
        all .25s ease;

}

.pix-copy-button:active{

    transform:
        scale(.98);

}

.restart-flow{

    margin-top:32px;

    font-size:14px;

    color:#888;

    cursor:pointer;

    text-align:center;

}

.confirm-card{

    background:#ffffff;

    border:1px solid #F06593;

    border-radius:20px;

    padding:24px;

    margin-top:24px;
    
    color:#666;

}

.confirm-item{

    margin-bottom:24px;

}

.confirm-item:last-child{

    margin-bottom:0;

}

.confirm-item strong{

    display:block;

    margin-bottom:8px;

    font-size:15px;

}

.confirm-item p{

    color:#555;

    line-height:1.6;

    word-break:break-word;

}

.confirm-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:24px;

}

.edit-button{

    background:#fff;

    border:1px solid #ddd;

    color:#555;

    border-radius:12px;

    padding:14px 22px;

    cursor:pointer;

    transition:.2s;

}

.edit-button:hover{

    background:#f5f5f5;

}

.char-counter{

    margin-top:8px;

    margin-left:8px;

    font-size:14px;

    font-weight:600;

    color:#888;

    transition:.2s ease;

}

#targetflow h2{

    font-size:34px;

    font-weight:700;

}

#targetflow input,
#targetflow textarea{

    font-size:18px;

    font-weight:400;

}

#targetflow input::placeholder,
#targetflow textarea::placeholder{

    font-size:18px;

}

.success-button{

    background:
    linear-gradient(
        135deg,
        #F06593 0%,
        #D946EF 100%
    );

    color:#fff;

    border:none;

    border-radius:16px;

    padding:16px 32px;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    box-shadow:
    0 10px 30px rgba(
        240,
        101,
        147,
        .35
    );

}

.success-button:hover{

    transform:
    translateY(-2px);

    box-shadow:
    0 15px 40px rgba(
        240,
        101,
        147,
        .5
    );

}

.success-title{

    font-size:2.2rem;

    font-weight:800;

    margin-bottom:12px;

    color:#fff;

}

.success-text{

    color:#b7b7c7;

    margin-bottom:28px;

}