/**
*  Styles for 'room/rate card backgrounds'
*  Use below classes for room/rate list tile/card wrapper in your application
*  For rates - <div class="container-fluid rate-list-wrapper amadeus-hos-res-cn-card/"></div>
*  For rooms - <div class="container-fluid room-list-wrapper amadeus-hos-res-cn-card/"></div>
*  For selected rates - <div class="container-fluid rate-list-wrapper amadeus-hos-res-cn-card">
                            <div class="row room-card selected"></div>
                        </div>
*  For selected rooms - <div class="container-fluid room-list-wrapper amadeus-hos-res-cn-card">
                            <div class="row room-card selected"></div>
                        </div>
*  For checkout page card - <div class="container-fluid amadeus-hos-res-cn-card box-shadow-none">
                            </div>
*/
.amadeus-hos-res-cn-card {
    background-color: $rooms-rates-bg;
    @include amadeusHosResWcBorderRadius(var(--amadeus-hos-res-cv-card-border-radius, 0));

    &:hover {
        box-shadow: $default-box-shadow;
    }

    .selected {
        border: 1px solid $body-text-links-color;
        background: $selected-card-background-color;
        box-shadow: $default-box-shadow;

        amadeus-hos-res-ct-title-3 {
            &.text-truncate-after-2-lines:after {
                background: $selected-card-background-color;
            }
        }

        amadeus-hos-res-ct-body-text {
            &.text-truncate-after-5-lines:after {
                background: $selected-card-background-color !important;
            }
        }

        .amadeus-hos-res-cn-cta-btn--primary.lowest-rate-selected {
            background: $primary-button-hover-bg-color;
            border-color: $primary-button-hover-bg-color;
        }
    }

    &.box-shadow-none {
        &:hover {
            box-shadow: none;
        }
    }
}