.hotel-card-modern{

    background:#fff;
    border-radius:14px;
    overflow:hidden;

    display:flex;
    gap:12px;

    border:1px solid #e5e7eb;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

    transition:.25s;

    margin-bottom:15px;

}

.hotel-card-modern:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}


/*=============================================================
IMAGEM
=============================================================*/

.hotel-image{

    width:220px;

    min-width:220px;

    height:180px;

}

.hotel-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hotel-card-modern:hover .hotel-image img{

    transform:scale(1.06);

}

/*=============================================================
BADGES
=============================================================*/

.badge-premium{

    position:absolute;

    top:15px;

    left:15px;

    background:#FFD700;

    color:#000;

    font-size:12px;

    font-weight:700;

    padding:4px 10px;

    border-radius:50px;

    z-index:10;

}

.badge-desconto{

    position:absolute;

    top:55px;

    left:15px;

    background:#dc3545;

    color:#fff;

    font-size:11px;

    font-weight:700;

    padding:4px 10px;

    border-radius:50px;

}

.favorite-btn{

    position:absolute;

    right:15px;

    top:15px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#dc3545;

    font-size:18px;

    box-shadow:0 2px 10px rgba(0,0,0,.15);

}

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

.hotel-body{

    flex:1;

    padding:14px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.hotel-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:8px;

}

.hotel-name{

    font-size:18px;

    font-weight:700;

    line-height:1.2;

    color:#111827;

    text-decoration:none;

}

.hotel-name:hover{

    color:#0d6efd;

}

.hotel-meta{

    font-size:13px;

    color:#6b7280;

    margin-top:4px;

}

.hotel-stars{

    font-size:12px;

    margin-top:3px;

    color:#f59e0b;

}

/*=============================================================
AVALIAÇÃO
=============================================================*/

.rating-box{

    background:#003580;

    color:#ffffff;

    min-width:70px;

    padding:8px;

    border-radius:10px;

    font-weight:700;

    text-align:center;

}

.rating-value{

    font-size:18px;

    font-weight:800;

}

.rating-label{

    font-size:11px;

}

.rating-box small{

    display:block;

    margin-top:5px;

    opacity:.9;

    font-size:11px;

}

/*=============================================================
SERVIÇOS
=============================================================*/

.hotel-services{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:18px 0;

}

.hotel-services span{

    background:#f8fafc;

    color:#166534;

    font-size:13px;

    padding:7px 12px;

    border-radius:30px;

}

.hotel-services i{

    margin-right:5px;

}

/*=============================================================
BENEFÍCIOS
=============================================================*/

.hotel-benefits{

    display:flex;

    gap:6px;

    flex-wrap:wrap;

    margin:8px 0;

}

.benefit{

    padding:4px 8px;

    font-size:11px;

    border-radius:8px;

}

.success{

    background:#dcfce7;

    color:#166534;

}

.primary{

    background:#dbeafe;

    color:#1d4ed8;

}

/*=============================================================
RODAPÉ
=============================================================*/

.hotel-footer{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:20px;

}

.hotel-price-area{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.hotel-price{

    display:flex;

    flex-direction:column;

}

.old-price{

    color:#6b7280;

    text-decoration:line-through;

    font-size:12px;

}

.current-price{

    font-size:24px;

    font-weight:800;

    line-height:1;

}

.price-description{

    color:#64748b;

    font-size:11px;

}

/*=============================================================
DISPONIBILIDADE
=============================================================*/

.availability{

    font-size:12px;

    margin-bottom:5px;

}

.availability.success{

    background:#dcfce7;

    color:#166534;

}

.availability.warning{

    background:#fff7ed;

    color:#ea580c;

}

.availability.danger{

    background:#fee2e2;

    color:#dc2626;

}

/*=============================================================
PROCURA
=============================================================*/

.hotel-demand{

    color:#ea580c;

    font-size:13px;

    font-weight:700;

}

/*=============================================================
AÇÕES
=============================================================*/

.hotel-actions{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:10px;

}

.recommend-box{

    background:#ecfeff;

    color:#0369a1;

    padding:8px 12px;

    border-radius:8px;

    font-size:13px;

    font-weight:700;

}

.btn-view{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    height:40px;

    padding:0 16px;

    border-radius:10px;

    background:#003580;

    color:#fff;

    font-size:13px;

    text-decoration:none;

    font-weight:800;

    transition:.30s;

}

.btn-view:hover{

    background:#0b5ed7;

    color:#fff;

}

.instant-confirmation{

    color:#64748b;

    font-size:12px;

}

/*=============================================================
RESPONSIVO
=============================================================*/

@media(max-width:768px){

    .hotel-card-modern{

        flex-direction:column;

    }

    .hotel-image{

        width:100%;

        height:200px;

    }

    .hotel-footer{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .hotel-actions{

        width:100%;

    }

    .btn-view{

        width:100%;

    }

    .hotel-image img{

        height:240px;

    }

    .hotel-header{

        flex-direction:column;

    }


}

@media(max-width:576px){

    .hotel-body{

        padding:15px;

    }

    .hotel-name{

        font-size:20px;

    }

    .current-price{

        font-size:28px;

    }

    .hotel-services{

        gap:6px;

    }

    .hotel-services span{

        font-size:12px;

    }

}