:root {
    --blue-booking: var(--ocean-blue2);
    --green-score: var(--berry-crush-light);
    --gray-text: #4e4e4e;
}

.booking-card {
    display: flex;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    height: 300px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    margin: 10px auto;
    transition: transform 0.2s ease; 
}

.card-image-container {
    position: relative;
    width: 35%;
    min-width: 265px;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favorite-badge {
    position: absolute;
    top: 10px; right: 10px;
    background: #fff;
    width: 35px; height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--blue-booking);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0; /* Oculto por defecto */
    transform: translateY(-5px);
    transition: all 0.3s ease;
    z-index: 5;
}

.booking-card:hover .favorite-badge {
    opacity: 1;
    transform: translateY(0);
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.nav-arrow.left { left: 10px; }
.nav-arrow.right { right: 10px; }

.card-content {
    display: flex;
    width: 65%;
}

.room-details p {
    display: -webkit-box;
    -webkit-line-clamp: 1;           
    -webkit-box-orient: vertical;     
    overflow: hidden;                
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.main-info {
    padding: 15px 18px;
    flex: 1;
    width: 300px;
}

.ad-label { font-size: 12px; color: #777; }

.card-title { 
    font-size: 1.028rem; 
    margin: 5px 0; 
    color: #222;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;          
    -webkit-box-orient: vertical;     
    overflow: hidden;               
    text-overflow: ellipsis; 
}

.rating-row {
    display: flex;
    flex-direction: row;
    gap: 3px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.score-badge {
    background: var(--green-score);
    color: white;
    padding: 2px 6px;
    margin-right: 2px;
    border-radius: 4px 4px 4px 0;
    font-weight: bold;
    font-size: .85rem;
}

.score-text {
    font-size: .85rem;
    color: var(--gray-text);
}

.location-text { font-size: 13px; color: var(--gray-text); margin-bottom: 5px; }
.location-text a { color: var(--blue-booking); text-decoration: none; font-weight: bold; }

.offer-badge {
    display: inline-block;
    background: var(--purple-offer);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    margin: 8px 0;
}

.text-yellow {
    color: #ffb400 !important;
}

.benefits-list { list-style: none; padding: 0; font-size: 12px; color: #008234; }
.benefits-list li { margin-bottom: 2px; }

.price-section {
    width: 220px;
    padding: 20px;
    border-left: 1px solid #eee;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stay-info { font-size: 12px; color: var(--gray-text); }
.old-price { text-decoration: line-through; color: #777; font-size: 13px; margin: 0; }
.current-price { font-size: 1.5rem; margin: 0; color: #222; } 

.payment-method {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 11px;
    margin-top: 5px;
}

.bank-icon { width: 18px; }

.actions { display: flex; gap: 8px; margin-top: 15px; }

.btn-detail {
    background: var(--blue-booking);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: bold;
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease-in;
}

.btn-detail:hover {
    background-color: transparent;
    border: 1px solid var(--blue-booking);
    color: var(--blue-booking);
}

@media (max-width: 1024px) {
    .col-lg-3 {
        flex: 0 0 auto !important;
        width: 25% !important;
    }
}

@media (max-width: 1060px) {
    .main-info { padding: 15px 16px; }
}

@media (max-width: 768px) {
    .booking-card { flex-direction: column; height: auto; width: 315px; }
    .card-image-container, .card-content { width: 100%; flex-direction: column;}
    .card-image-container { height: 200px; }
    .favorite-badge { opacity: 1; transform: none; } 
    .price-section { width: 100%; border-left: none; border-top: 1px solid #eee; text-align: left; }
}