/* ==========================
   Caixa da frase
========================== */

.cfp-box{
    position:relative;
    margin:20px 0;
    padding:24px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    transition:all .25s ease;
}

.cfp-box:hover{
    border-color:#d1d5db;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

/* ==========================
   Texto
========================== */

.cfp-text{
    font-size:18px;
    line-height:1.7;
    color:#111827;

    /* espaço para o botão */
    padding-right:60px;
}

/* ==========================
   Botão copiar
========================== */

.cfp-copy{

    position:absolute;
    top:16px;
    right:16px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    width:36px;
    height:36px;

    border:none;
    border-radius:8px;

    background:transparent;

    color:#6b7280;

    cursor:pointer;

    overflow:hidden;

    transition:all .25s ease;
}

/* Hover */

.cfp-copy:hover{

    width:95px;

    background:#f3f4f6;

    color:#111827;

}

/* Ícone */

.cfp-copy svg{

    width:18px;
    height:18px;

    flex-shrink:0;

}

/* Texto do botão */

.cfp-label{

    opacity:0;

    width:0;

    overflow:hidden;

    white-space:nowrap;

    transition:all .25s ease;

    font-size:14px;

}

/* Mostrar texto apenas no hover */

.cfp-copy:hover .cfp-label{

    opacity:1;

    width:auto;

}

/* Depois de copiar */

.cfp-copy.copied{

    color:#16a34a;

}

/* ==========================
   Mobile
========================== */

@media(max-width:768px){

    .cfp-text{

        padding-right:0;

    }

    .cfp-copy{

        position:relative;

        top:auto;
        right:auto;

        width:auto;

        margin-top:18px;

    }

    .cfp-label{

        opacity:1;

        width:auto;

    }

}