:root {
    --e24-primary: hsla(353, 100%, 57%, 1);
    --e24-text: hsla(0, 0%, 20%, 1);
    --e24-text-l-1: hsla(0, 0%, 45%, 1);
    --e24-stroke: hsla(0, 0%, 87%, 1);
    --e24-green: hsla(148, 83%, 40%, 1);
    --e24-green-l-1: hsla(148, 83%, 40%, 0.1);
    --e24-white: hsla(0, 0%, 100%, 1);
    --e24-gold: hsla(40, 88%, 41%, 1);
    --e24-gold-l-1: hsla(44, 98%, 49%, 1);
}

@font-face {
    font-family: IranSansXV;
    src: url(../fonts/IRANSansXV.woff2) format('woff2');
}
@font-face {
    font-family: IranSansX;
    src: url(../fonts/IRANSansXFaNum-Regular.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: IranSansX;
    src: url(../fonts/IRANSansXFaNum-Medium.woff) format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: IranSansX;
    src: url(../fonts/IRANSansXFaNum-Bold.woff) format('woff');
    font-weight: 700;
    font-style: normal;
}
* {
    -moz-font-feature-settings: "ss01";
    -webkit-font-feature-settings: "ss01";
    font-feature-settings: "ss01";
}
.e24-hotel-card-wrapper {
    max-width: 1100px;
    margin: 20px auto;
    font-family: IranSansXV, sans-IranSansX;
    direction: rtl;
}

.e24-hotel-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 16px;
    height: 156px;
    position: relative;
    overflow: hidden;
}

.e24-hotel-card.is-loading::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.8s infinite;
    transform: translateX(-100%);
    z-index: 10;
    pointer-events: none;
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

.e24-hotel-card.is-loading .skeleton-line {
    display: block;
    background: #eee;
    border-radius: 6px;
    height: 16px;
    width: 100%;
}

.e24-hotel-card.is-loading .skeleton-line.title    { height: 20px; width: 70%; }
.e24-hotel-card.is-loading .skeleton-line.stars    { width: 100px; height: 16px; }
.e24-hotel-card.is-loading .skeleton-line.rating   { width: 110px; height: 32px; border-radius: 8px; }
.e24-hotel-card.is-loading .skeleton-line.address  { width: 85%; }
.e24-hotel-card.is-loading .skeleton-line.discount { width: 92px; height: 24px; border-radius: 5px; }
.e24-hotel-card.is-loading .skeleton-line.price    { width: 160px; height: 24px; }
.e24-hotel-card.is-loading .skeleton-line.button   { border-radius: 10px; }
.e24-hotel-card.is-loading a.e24-hotel-btn { width: 207px; }
.e24-hotel-card.is-loading .skeleton-placeholder {
    width: 124px;
    height: 124px;
    border-radius: 10px;
    background: #eee;
}

.e24-hotel-card.is-loading * {
    color: transparent !important;
}
.e24-hotel-card.is-loading .e24-hotel-btn,
.e24-hotel-card.is-loading .e24-hotel-discount {
    background: #eee !important;
}
.e24-hotel-card.is-loading .e24-hotel-stars-text::before,
.e24-hotel-card.is-loading .e24-price::before,
.e24-hotel-card.is-loading .e24-price::after,
.e24-hotel-card.is-loading .e24-hotel-discount::after {
    display:none !important;
}

.e24-hotel-card-main { display: flex; gap: 16px; flex: 1; }
.e24-hotel-card-media img { width: 124px; height: 124px; object-fit: cover !important; border-radius: 10px; }
.e24-hotel-details-wrapper { display: flex; flex-direction: column; gap: 8px; flex: 1; }
article.e24-hotel-title { margin: 0; font-size: 18px; font-weight: 500; line-height: 32px; }
.e24-hotel-rating-wrapper { display: flex; gap: 12px; align-items: center; }
.e24-hotel-stars { display: flex; align-items: center; }
span.e24-hotel-stars-text { font-size: 12px; margin-right: 6px; color: var(--e24-gold);font-weight:500;line-height:24px; }
span.e24-hotel-stars-text:before { content: "هتل "; }
.rating-divider { width: 1px; background: var(--e24-stroke); height: 12px; }
.e24-hotel-rating { display: flex; align-items: center; gap: 8px; }
.e24-hotel-rating__inner-wrapper { display: flex; gap: 4px; font-size: 12px; line-height: 24px; }
.e24-hotel-rating__rate-wrapper { display: flex; font-weight: 500; color: var(--e24-text); }
span.hotel-rate { margin-right: 4px; }
.viewers-count, .max-rate { color: var(--e24-text-l-1); }
p.e24-hotel-address { margin: 0; font-size: 12px; line-height: 24px; }
.e24-hotel-divider { height: 100%; width: 1px; background-color: var(--e24-stroke); }
.e24-hotel-card-left-wrapper { display: flex; flex-direction: column; align-items: center; }
.e24-hotel-price-wrapper { display: flex; flex-direction: column; align-items: center;order:-1; }
span.e24-hotel-discount { background: var(--e24-green-l-1); color: var(--e24-green); padding: 0 8px; border-radius: 5px; font-size: 12px; font-weight: 700; line-height: 24px; margin-bottom: 8px; }
span.e24-hotel-discount:after { content: "تخفیف"; margin-right: 4px; }
.e24-price { color: var(--e24-text); font-weight: 500; font-size: 16px; line-height: 24px; margin-bottom: 16px; }
.e24-price:before { content: "از"; margin-left: 4px; font-size: 12px; color: var(--e24-text-l-1); }
.e24-price:after { content: " / ۱ شب"; margin-right: 4px; font-size: 12px; color: var(--e24-text-l-1); }
a.e24-hotel-btn { background: var(--e24-primary); color: #fff !important; padding: 8px 41px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none;line-height:24px; }

@media screen and (max-width:768px){
    .e24-hotel-stars-text::before,.e24-price:after,.e24-hotel-discount:after{
        display:none;
        content:'';
    }
    .e24-hotel-address,.e24-hotel-stars svg,.e24-hotel-divider{
        display:none;
    }
    .e24-price,.e24-hotel-stars-text{
        margin:0 !important;
        padding:0;
    }
    .e24-hotel-card{
        padding:12px;
        height:auto;
    }
    .e24-hotel-card-media img{
        width:92px;
        height:92px;
    }
    article.e24-hotel-title{
        font-size:16px;
        line-height:24px;
    }
    .e24-hotel-price-wrapper {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 12px;
        justify-content: flex-end;
        margin-top:4px;
        order:4;
    }
    .e24-hotel-discount{
        margin:0 !important;
        padding:8px 0;
    }
    .e24-hotel-card {
        flex-direction: column;
        align-items:flex-start;
    }
    .e24-hotel-card-left-wrapper{
        width:100%;
    }
    a.e24-hotel-btn {
        width: 100%;
        text-align: center;
    }
}