@media (max-width: 767px) {
    .ui-spinner-down i {
        padding: 10px 8px !important;
    }

    .ui-spinner-up i {
        padding: 10px 8px !important;
    }
}
.voucher-code, .mobile__checkin{
    border-top-left-radius:6px !important; border-bottom-left-radius:6px !important;
}
.offer-link{
    font-family:"Public Sans Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
    color:#919EAB;
    font-size:12px;
    font-style:italic;
    white-space: nowrap;
    line-height:16px;

}
#voucherCodeFormMobile{
    margin-top:5px;
}
.voucher-code{
    border-top-right-radius:0px !important; border-bottom-right-radius:0px !important;
}


.rooms-list-footer:has(+ .panel-default > .panel-collapse:not(.in)) {
    border-bottom: none !important;
}





.voucher-code-button, .mobile__checkout{
    border-top-right-radius:6px !important; border-bottom-right-radius:6px !important;
}

.mobile-img-room-container{ border-top-right-radius:6px !important; }



/* --- Room title --- */


/* --- Buttons / inputs --- */
.voucher-code-button{ border:1px solid #ccc; }
.voucher-code-button{ border-left:0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important
}
.fotorama__stage__frame{
    border-radius: 6px;
}

/* --- Booking list borders logic --- */
.booking-list-items:not(:has(.rooms-list-footer)){ border:none !important; }
.booking-list-items .rooms-list-footer:last-child{ border-bottom:none !important; }

/* --- Cards / shadows --- */


.btn-ghost .ui-button-text{
    font-weight:400;
    font-family:"Public Sans Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
}

/* --- Booking last booked --- */
.booking-item-last-booked a{ text-decoration:underline; display:flex; align-items:center; }
.booking-item-last-booked b{ font-weight:500; margin-right:5px; }

/* --- Calendar UI tweaks --- */
.cal-current-year{ display:none; }
#cal-nights{ line-height:20px; }
#cal-nights div{ display:flex; align-items:center; }
.cal-arrow-up{ font-size:28px; }
#cal-info{
    font-size:12px; font-weight:400; line-height:16px; color:#70757a;
    overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
    -webkit-box-orient:vertical; -webkit-line-clamp:1; max-height:16px; max-width:100%; white-space:normal;
}
.cal-footer .row{ display:flex; margin:0; }
.cal-footer .row .col-xs-4, .cal-footer .row .col-xs-8{ width:auto !important; padding:0 !important; }
.cal-footer .row .col-xs-4{
    flex:10000 0 auto; max-width:100%; padding:4px; white-space:nowrap;
}
.cal-footer .row .col-xs-8{
    display:flex; flex:1 0 auto; padding:4px; flex-shrink:0;
}

/* --- Calendar desktop --- */
@media (min-width:767px){
    .chrbox>.row:first-child{ margin-top:10px; }
    #calendarBox{ overflow:initial !important; }
    .cal-panel-container{ display:flex; }
    .cal-panel-container .col-md-6{ padding:0 !important; margin-right:20px; }
    .cal-panel-container .calendar{ width:320px; }
    .cal-panel{ overflow:scroll; scrollbar-width:none; -ms-overflow-style:none; }
    .cal-panel::-webkit-scrollbar{ display:none; }
    #calendarBox table td a{ border-color:transparent !important; }
    .cal-arrow-right:active, .cal-arrow-left:active,
    .cal-arrow-right:focus, .cal-arrow-left:focus,
    .cal-arrow-right:hover, .cal-arrow-left:hover{ text-decoration:none; }
    .hidden-force{ display:none !important; }
    .cal-arrow-right:hover, .cal-arrow-left:hover{
        box-shadow:0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
        background:#f8f9fa !important;
    }
    .cal-arrow-right, .cal-arrow-left{
        font-size:24px; text-decoration:none; z-index:1; position:absolute !important; top:43% !important;
        padding:0 !important; height:48px; width:48px; display:flex; align-items:center; justify-content:center;
        border-radius:50% !important; box-shadow:0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
    }
    .cal-arrow-right{ right:-24px !important; }
    .cal-arrow-left{ left:-24px !important; }
}

/* --- Calendar mobile --- */
@media (max-width:767px){
    #cal-info{
        position:absolute; bottom:5px; height:20px; background:#fff !important;
        left:0; right:0; width:100%; text-align:left; padding-left:20px;
    }
    .cal-footer .row .col-xs-4{ display:flex; align-items:center; position:initial !important; }
    .cal-footer{ padding-bottom:30px !important; height:78px !important; }
    #cal-panel-container{ margin-left:0 !important; }
    .cal-mobile-blank{ height:300px; }
    .cal-month{ margin-top:20px; }
    .cal-panel{ overflow:hidden; }
}

/* --- Calendar cells --- */
#calendarBox table td a{
    padding:0 !important; flex:1 0 44px !important; height:44px !important; width:44px !important;
    margin:0 auto; display:flex; flex-direction:column; outline:none; align-items:center; justify-content:center;
}
#calendarBox table td a span.day-num{ line-height:20px !important; color:#1a1a1a; }
#calendarBox table td a span.day-price{
    line-height:14px !important; text-align:center; font-weight:400 !important; font-size:10px;
    font-family:Roboto,Arial,sans-serif !important; letter-spacing:.2px !important; margin-top:0; position:relative; color:#a2a2a2 !important;
}
.room-avail .day-price{ color:#444; }
.room-checked .day-price,
#calendarBox table td a.room-checked span.day-price,
#calendarBox table td a.room-checkout span.day-price{ color:#FFF !important; }

/* --- Calendar states --- */
#calendarBox table td span.room-checked-interval{
    background:#33DACD !important; border:2px solid #33DACD !important; color:#444 !important;
}
#calendarBox .legend span.room-noavail,
#calendarBox table td span.room-noavail{ color:#d8d8d8; border:2px solid transparent; }
#calendarBox table td span.room-noavail{ border-width:2px !important; display:block; overflow:hidden; }
#calendarBox table td .room-checkout-dark .day-bg{
    background:#33DACD; position:absolute; inset:0 auto 0 0; width:50%; z-index:-1;
}
#calendarBox table td span.room-checkout-dark{
    background:#008489 !important; color:#FFF !important; border-radius:100%;
    border:2px solid #008489 !important; position:static !important;
}

/* --- Restrictions & legends --- */
.day-min{ position:absolute; left:5px; top:7px; font-size:10px !important; }
.room-availability .calendar-details{ padding:0; }
.legend{ margin:0 -30px !important; }
.room-availability:not(.checkin-set) .room-no-arrival .day-restriction, .no-arrival-legend{ color:#ee7f6d; }
.svg-no-departure{ display:none; }
.room-availability.checkin-set .room-avail:not(.room-checkin) .svg-no-departure{ display:block; }
.room-availability.checkin-set .room-no-departure .day-restriction, .no-departure-legend{ color:#f6bb42; }
.room-availability.checkin-set .room-no-arrival.room-checkin .svg-no-arrival{ display:inline-block; }
.room-availability.checkin-set .room-no-arrival.room-checkin .day-restriction{ color:#FFF; }
.room-checked .svg-no-departure,
.room-checkout-border .svg-no-departure{ display:none !important; }
.room-checkout-day .svg-no-departure{ display:block !important; }

@media (max-width:767px){
    .day-restriction{ top:7px; display:flex !important; }
    .svg-no-arrival, .svg-no-departure{ width:12px !important; height:12px !important; line-height:12px !important; }
    .room_price_extra span.booking-item-price{ margin-right:15px !important; }
    .rooms-list-footer .room_price_extra, .pyn-extra-box{ text-align:right !important; }
}

/* --- Misc --- */
.collapse-link{ color:#626262; }
.room-availability{ padding:20px 35px; }
.booking-single-use{
    background:#FFF; height:30px; line-height:30px; bottom:-20px; left:-1px;
    box-shadow:0 1px 1px rgba(0,0,0,.2); -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
}
.widget-posts-link a{ text-decoration:none !important; }
.widget-posts-link{
    float:left; position:relative; cursor:pointer; font-weight:bold; color:#4d4d4d; font-size:12px; top:10px;
}
.widget-posts-link span{
    float:right; width:24px; height:24px; line-height:24px; border-radius:50%; margin-left:10px; color:#fff; font-size:10px;
    background:#4d4d4d; text-align:center;
}
.widget-posts-link:hover{ color:#444; }
#totalPrice small{ font-size:12px; letter-spacing:0; }
.mobile__left{ color:#626262; }
.mobile__right-label{ font-size:11px; font-weight:600; }
.booking-item-payment .booking-item-payment-details>li .booking-item-payment-price>li{ border-bottom:1px solid #EBEBEB; }

.booking-message{
    position:fixed; width:220px; color:#fff; font-size:12px; z-index:1030;
    box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.booking-message.bottom-left{ left:10px; bottom:10px; }
.booking-message.top-right{ right:20px; top:70px; }
.booking-message.featured{ background:#4611a7; }
.booking-message .title{ font-size:18px; font-weight:700; margin:0 0 5px; }
.booking-message .close{
    opacity:.5; position:absolute; right:10px; top:7px; color:#fff; z-index:1030; padding:5px; font-size:12px;
}
.booking-message p{ opacity:.8; margin:0; padding:10px; font-size:10px; }

[data-show-after-time],
[data-show-after-scroll]{ opacity:0; transition:.3s ease; visibility:hidden; }
[data-show-after-time].show,
[data-show-after-scroll].show{ visibility:visible; opacity:1; }

.green{ color:green; }

#whatsapp-button{
    background:#4DCA59; width:50px; height:50px; position:fixed; bottom:20px; right:20px;
    border-radius:6px; z-index:1040; padding:5px; text-align:center;
}
#whatsapp-button:before{
    content:"\f232"; color:#fff; font:normal normal normal 40px/1 FontAwesome; display:inline-block; vertical-align:middle;
}

/* Age modal */
#booking_age .modal-dialog{ margin-top:80px; }
#booking_age .modal-content{
    box-shadow:0 14px 36px 2px rgba(0,0,0,.15) !important; overflow-y:auto !important; overflow-x:hidden !important;
    background:#fff !important; border:1px solid rgba(0,0,0,.2) !important; border-radius:4px !important; padding:0;
}
#booking_age .modal-header{
    background:#fafafa; padding:12px 20px 6px;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
}
#booking_age .modal-title{ line-height:36px; }
#booking_age .modal-header .close{ color:#333; }
#booking_age .modal-header .close:before{ display:none; }
#booking_age .modal-header .close span{ line-height:56px; font-size:24px; }

/* Typography tweaks */
.ui-button-text{ font-weight:600; }
.text-red.fs10{ font-weight:500 !important; }

/* Spinner buttons (extras) */
.btn-extra .ui-spinner-up i, .btn-extra .ui-spinner-down i{ color:#555 !important; }
.btn-extra .ui-spinner-down i{
    border-right:1px solid #e6e6e6 !important; background:#f7f7f7; height:36px;
    margin-top:-37px !important; margin-left:1px; border-radius:3px 0 0 3px;
}
.btn-extra .ui-spinner-up i{
    border-left:1px solid #e6e6e6 !important; background:#f7f7f7; height:36px;
    margin-top:-37px !important; margin-right:1px; border-radius:0 3px 3px 0;
}
.calendar-selected-min-stay{ font-weight:bold !important; }

.calendar-selected-period .calendar-selected-min-stay {
    text-align: left;
    font-size: 13px;
    font-style: italic;
}

/* Small-screen pills */
@media (max-width:600px){
    .tabbable .nav-pills{ float:left !important; }
    .pyn-children-age{ display:inline !important; }
    .pyn-children-age .room-children{ margin:5px 0; }
    .ex-title{ line-height:normal !important; }
    .calendar-selected-period{ width:280px; text-align:center; margin:0 auto; }
    .calendar-selected-period .calendar-selected-min-stay{ text-align:center; }
}

/* Misc small utilities */
.calendar-details{ margin:0 auto !important; }
.collapse-link{ color:#626262; }
.day-restriction{ position:absolute; top:33px; left:5px; }
.room-availability .calendar-details{ padding:0; }
.ex-title{ line-height:36px; }
.ico-box-green i{ color:#008489; border:1px solid #008489; }

/* Fotorama arrows */
.fotorama__arr{ background:rgba(0,0,0,.4); }

/* Buttons hover fixes */
.change-dates .btn:hover{ color:#FFF; }

/* Carousel bits */
.owl-carousel{ padding:0; margin-bottom:0; }
.owl-carousel .item{ opacity:.4; transition:.4s; margin:0 20px; transform:scale(.8); }
@media (max-width:1000px){ .owl-carousel .item{ margin:0; transform:scale(.9); } }
.owl-carousel .active .item{ opacity:1; transform:scale(1); }
.owl-carousel .owl-item{ -webkit-backface-visibility:hidden; -webkit-transform:translateZ(0) scale(1); }
.owl-carousel .inner{ background:#000; opacity:.7; padding:10px; }
.owl-carousel .inner a{ color:#fff; text-decoration:none; font-size:14px; }
.owl-carousel .inner a:hover{ border-color:#fff; }
.owl-carousel .black .inner a{ color:#000; border-color:rgba(0,0,0,.4); }
.owl-carousel .black .inner a:hover{ border-color:#000; }
@media (max-width:767px){
    .owl-carousel .inner{ padding:5px 10px; }
    .owl-carousel .inner{ padding:5px 10px; }
    .owl-carousel .inner a{ font-size:12px; }

}

.hotel_description{
    max-height: 185px;

}
.hotel_info{
    line-height: 1.5;
    font-size:14px;
    font-family:"Public Sans Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;

}
.hotel_description:before{
    content:none !important;
}
.owl-carousel:after{
    content:""; position:absolute; width:8%; top:0; bottom:0; left:50%; margin-left:-4%; pointer-events:none; display:block;
}
.owl-carousel .owl-controls{ display:none; }

/* Icons boxed */
.ico-box svg{
    height:35px; width:35px; display:block; font-size:23px; color:#686868; float:left;
    border:1px solid #ccc; border-radius:5px; text-align:center; line-height:35px; transition:.3s;
}
.booking-details,.booking-details .text-small, .booking-details b{
    font-family:"Public Sans Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
    font-size:14px!important;
}


.sticky-calendar.affix {
    position: relative!important;
}




@media (max-width: 767px) {
    .calendar-box {
        margin:  15px 0 !important;
    }

    .sticky-calendar.affix {
        position: fixed!important;
        top: 0px;     /* cât ai headerul */
        z-index: 10000;   /* ca să nu intre sub headerul fix */
        background-color: #FFFF;
        left:0px;
        right:0px;
        padding: 0px 15px;
        border-bottom: 1px solid #DDD;
        width: 100% !important;
    }
}

.mobile__checkin, .mobile__checkout, .mobile__occupancy{
    box-shadow: none !important;
    border:1px solid #DDD!important;
}


.offers-viewport{
    position: relative;
    overflow: hidden;
}
.offers-track{
    border-radius: 16px;
    display: grid;
    grid-auto-flow: column;
    gap: 16px;
    --cards-per-view: 1.1;
    grid-auto-columns: calc(100% / var(--cards-per-view));
    padding-right: 6px;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 0.01px;
}

/* 🔒 scrollbar complet ascuns */
.offers-track::-webkit-scrollbar { display: none; }
.offers-track { -ms-overflow-style: none; scrollbar-width: none; }

/* -------- Card -------- */
.offer-card{
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
    transition: transform .18s ease, filter .18s ease;
}
.offer-card:hover{ transform: translateY(-2px); }

/* Container imagine + overlay gradient */
.offer-media{
    position: relative;
    aspect-ratio: 16/9;
    /* poți seta variabila la nivelul paginii sau pe .offer-media */
    --palette-common-black: #000000;
}

/* OVERLAY: gradient peste imagine (vizibil!) */
.offer-media::after{
    content:"";
    position:absolute; inset:0;
    background-image: linear-gradient(to bottom, transparent 0%, #000 105%);
    pointer-events:none;
    z-index:1; /* peste img */
}

/* Imaginea rămâne sub overlay */
.offer-media img{
    width:100%; height:100%; object-fit:cover; display:block;
    z-index:0; position:relative;
}



/* -------- Săgeți -------- */
.offer-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    border: none;
    outline: none;
    cursor: pointer;
    width: 40px; height: 40px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 20px;
    display: grid;
    place-items: center;
    transition: background .15s ease, transform .15s ease;
}
.offer-nav:hover{ background: rgba(0,0,0,.6); transform: translateY(-50%) scale(1.05); }
.offer-nav-prev{ left: 6px; }
.offer-nav-next{ right: 6px; }

@media (min-width: 768px){
    .offers-track{ --cards-per-view: 1.25; }
    .offer-title{ font-size:1.05rem }
}
@media (min-width: 1200px){
    .offers-track{ --cards-per-view: 1.65; }
    .offer-title{ font-size:1.1rem }
}
.offer-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    border: none;
    outline: none;
    cursor: pointer;
    width: 40px; height: 40px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 20px;
    display: grid;
    place-items: center;
    transition: background .15s ease, transform .15s ease, opacity .2s ease;
    opacity: 1;
    pointer-events: all;
}
.offer-nav.hidden {
    opacity: 0;
    pointer-events: none;
}

.offer-nav:hover{ background: rgba(0,0,0,.6); transform: translateY(-50%) scale(1.05); }
.offer-nav-prev{ left: 6px; }
.offer-nav-next{ right: 6px; }


/* Container imagine + overlay gradient */
.offer-media{
    position: relative;
    aspect-ratio: 16/9;
    --palette-common-black: #000000;
}

/* Overlay gradient peste imagine */
.offer-media::after{
    content:"";
    position:absolute; inset:0;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--palette-common-black) 100%);
    pointer-events:none;
    z-index:1;
}

/* Imaginea rămâne sub overlay */
.offer-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    position:relative;
    z-index:0;
}

.offer-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 20px 20px 15px 20px;
    display: flex;
    flex-direction: column;

    z-index: 2;
    min-height: 30%;
}

/* titlul mare, pe toată lățimea */
.offer-title {
    margin: 0;
    color: #fff;
    font-weight: 700;
    font-size: 16px!important;
    line-height: 1.35;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 6px rgba(0,0,0,.6), 0 0 6px rgba(0,0,0,.35);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor:pointer;
}

/* linia de jos: Rezervă acum (stânga) + Ofertă specială (dreapta) */
.offer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* link Rezervă acum alb cu săgeată */
.offer-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 0 2px 4px rgba(0,0,0,.45);
    transition: transform .2s ease, opacity .2s ease;
}



.offer-cta:hover {
    transform: translateY(-1px);
    text-shadow: 0 3px 6px rgba(0,0,0,.55);
    text-decoration: underline;
}


/* textul "🔥 Ofertă specială" pe dreapta */
.offer-tag {
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    opacity: 0.95;
    text-shadow: 0 2px 4px rgba(0,0,0,.45);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}



/* responsive adjustments */
@media (min-width: 768px){
    .offer-title{ font-size:1.35rem; }
}
@media (min-width: 1200px){
    .offer-title{ font-size:1.45rem; }
}
/* Layout caption cu meta + CTA */


.offer-meta{ max-width: calc(100% - 148px); }

.offer-title{
    margin:0; color:#fff; font-weight:700;
    font-size:1.2rem; line-height:1.35; letter-spacing:.2px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    text-shadow:0 2px 6px rgba(0,0,0,.6), 0 0 6px rgba(0,0,0,.35);
}

.offer-subtitle{
    margin:.35rem 0 0; color:rgba(255,255,255,.9);
    font-size:.92rem; line-height:1.35; font-weight:500;
    text-shadow:0 1px 3px rgba(0,0,0,.45);
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
    cursor: pointer;
}

/* Buton “Rezervă acum” – doar stil, tot cardul e link */
:root{ --brand-primary:#0ea5e9; } /* schimbă cu culoarea brandului tău */



.offer-cta {
    font-size: 14px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: rgb(255, 255, 255); /* alb pur */
    font-weight: 400;
    opacity: 0.72;
    padding: 6px 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0,0,0,.45);
    transition: color .2s ease, transform .2s ease;

}



/* Hover efect fin: ușor mai intens și săgeata se deplasează */
.offer-cta:hover {
    color: #fff;


    text-shadow: 0 3px 6px rgba(0,0,0,.55);
}

.offer-cta:hover::after {
    transform: translateX(4px);
    opacity: 1;
}
/* Responsive tweaks */

@media (min-width: 1200px){
    .offer-title{ font-size:1.35rem; }
}
.offers-wrap{
    margin-bottom: 30px;
}

.day-min {
    position: absolute;
    left: 5px;
    top: 7px;
    font-size: 10px !important;
}

.room-availability .room-checkout-border .day-min {
    display: none;
}

.room-availability {
    padding: 20px 35px;
}


@media screen and (max-width: 600px) {

    .day-min {
        position: absolute;
        right: 0px;
        top: 12px;
        font-size: 6px !important;
    }

    .room_price_extra span.booking-item-price {
        margin-right: 15px !important;
    }

    .rooms-list-footer .room_price_extra {
        text-align: right !important;
    }

    .pyn-extra-box {
        text-align: right !important;
    }
}

.day-restriction {
    position: absolute;
    top: 33px;
    left: 5px;
}

.room-availability.checkin-set .room-no-arrival .svg-no-arrival {
    display: none;
}

.legend {

    margin-right: -30px !important;
    margin-left: -30px !important;

}

.room-availability:not(.checkin-set) .room-no-arrival .day-restriction, .no-arrival-legend {
    color: #ee7f6d;
}

.svg-no-departure {
    display: none;
}

.room-availability.checkin-set .room-avail:not(.room-checkin) .svg-no-departure {
    display: block;

}

.room-availability.checkin-set .room-no-departure .day-restriction, .no-departure-legend {
    color: #f6bb42;
}

.room-availability.checkin-set .room-no-arrival.room-checkin .svg-no-arrival {
    display: inline-block;
}

.room-availability.checkin-set .room-no-arrival.room-checkin .day-restriction {
    color: #FFF;
}

@media (max-width: 767px) {
    .day-restriction {

        top: 7px;
        display: flex !important;
    }

    .svg-no-arrival, .svg-no-departure {
        width: 12px !important;
        height: 12px !important;
        line-height: 12px !important;

    }
}

.room-checked .svg-no-departure {
    display: none !important;
}

.room-checkout-border .svg-no-departure {
    display: none !important;
}

.room-checkout-day .svg-no-departure {
    display: block !important;
}