/* Hotel detail visual system. Keep all overrides local to this page. */
#hotelDetailContainer {
    --hotel-detail-border: color-mix(in srgb, var(--mainColor) 10%, #fff);
    --hotel-detail-radius: 20px;
    --hotel-detail-shadow: 0 5px 20px color-mix(in srgb, var(--mainColor) 9%, transparent);
    --hotel-detail-ink: #182230;
    --hotel-detail-muted: #667085;
    --hotel-detail-surface: #f5f7fa;
    --hotel-detail-accent: var(--mainColor);
    --hotel-detail-accent-soft: color-mix(in srgb, var(--mainColor) 8%, #fff);
    color: var(--hotel-detail-ink);
    padding-bottom: 32px;
}

#hotelDetailContainer .parent-hotel-details--new {
    column-gap: 28px;
    margin-top: 32px;
}

#hotelDetailContainer .box-hotel--new,
#hotelDetailContainer .side-bar-hotel--new {
    min-width: 0;
}

#hotelDetailContainer .content-detailHotel > .internal-hotel-name,
#hotelDetailContainer .content-detailHotel > .external-hotel-name,
#hotelDetailContainer .hotel-panel,
#hotelDetailContainer .filter_hotel_boxes > .filterBox {
    background: #fff;
    border: 1px solid var(--hotel-detail-border);
    border-radius: var(--hotel-detail-radius);
    box-shadow: var(--hotel-detail-shadow);
    padding: 24px;
}

#hotelDetailContainer .content-detailHotel > .internal-hotel-name,
#hotelDetailContainer .content-detailHotel > .external-hotel-name {
    margin-bottom: 24px;
    gap: 16px;
}

#hotelDetailContainer .hotel-name-rate-parent_detail {
    row-gap: 12px;
}

#hotelDetailContainer .hotel-name-rate-parent_detail h1 {
    font-size: clamp(23px, 2.4vw, 32px);
    font-weight: 800;
    color: var(--hotel-detail-ink);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#hotelDetailContainer .parent-hotel-stars-address {
    margin-top: 8px;
}

#hotelDetailContainer .hotel-panel {
    margin-top: 24px;
}

#hotelDetailContainer .filter_hotel_boxes > .filterBox {
    margin-bottom: 16px;
}

#hotelDetailContainer .hotel-detail-room-list {
    margin: 0 0 20px;
    border-color: var(--hotel-detail-border);
    border-radius: var(--hotel-detail-radius);
    box-shadow: var(--hotel-detail-shadow);
}

@media (max-width: 991px) {
    #hotelDetailContainer .parent-hotel-details--new {
        margin-top: 16px;
    }
}

@media (max-width: 576px) {
    #hotelDetailContainer {
        padding-bottom: 24px;
    }

    #hotelDetailContainer .content-detailHotel > .internal-hotel-name,
    #hotelDetailContainer .content-detailHotel > .external-hotel-name,
    #hotelDetailContainer .hotel-panel,
    #hotelDetailContainer .filter_hotel_boxes > .filterBox {
        padding: 16px;
    }

    #hotelDetailContainer .content-detailHotel > .internal-hotel-name,
    #hotelDetailContainer .content-detailHotel > .external-hotel-name {
        margin-bottom: 16px;
    }

    #hotelDetailContainer .hotel-panel {
        margin-top: 16px;
    }
}

/* Search form, including dynamically added rooms. */
#hotelDetailContainer .sidebar-detailHotel .parent-research-internal-hotel-detail-sidebar,
#hotelDetailContainer .sidebar-detailHotel .parent-research-external-hotel-detail-sidebar {
    gap: 14px;
    padding-top: 0;
    padding-bottom: 0;
}

#hotelDetailContainer .sidebar-detailHotel .parent-data-night-room--new,
#hotelDetailContainer .sidebar-detailHotel .parent-calender--new {
    flex-direction: column;
    gap: 12px;
}

#hotelDetailContainer .sidebar-detailHotel .form-hotel-item,
#hotelDetailContainer .sidebar-detailHotel .parent-box-calendar {
    min-width: 0;
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-input {
    box-sizing: border-box;
    min-height: 52px;
    border-color: var(--hotel-detail-border);
    border-radius: 14px;
    background: var(--hotel-detail-surface);
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-input:focus-within {
    border-color: var(--hotel-detail-accent);
    box-shadow: 0 0 0 2px var(--hotel-detail-border);
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-calendar {
    gap: 4px;
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-input > i {
    flex-shrink: 0;
}

#hotelDetailContainer .sidebar-detailHotel .select2-container {
    max-width: 100%;
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-input--h .select2-selection--single {
    height: 50px;
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-input--h .select2-selection__rendered {
    line-height: 50px;
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-input--h .select2-selection__arrow {
    height: 50px;
}

#hotelDetailContainer .sidebar-detailHotel .form-hotel-item-searchBox-btn button {
    min-height: 48px;
    height: auto;
    padding: 10px 12px;
    gap: 8px;
    border-radius: 14px;
    line-height: 1.6;
}

#hotelDetailContainer .sidebar-detailHotel .form-hotel-item-searchBox-btn button:focus-visible {
    outline: 2px solid var(--hotel-detail-accent);
    outline-offset: 3px;
}

#hotelDetailContainer .sidebar-detailHotel .myroom-hotel-item {
    border-color: var(--hotel-detail-border);
    border-radius: 16px;
}

#hotelDetailContainer .sidebar-detailHotel .myroom-hotel-item + .myroom-hotel-item {
    margin-top: 12px;
}

#hotelDetailContainer .sidebar-detailHotel .myroom-hotel-item-title {
    padding: 12px;
    align-items: center;
    gap: 8px;
    border-color: var(--hotel-detail-border);
}

#hotelDetailContainer .sidebar-detailHotel .myroom-hotel-item-tedad {
    gap: 8px;
}

#hotelDetailContainer .sidebar-detailHotel .myroom-hotel-item-tedad > span {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
}

#hotelDetailContainer .sidebar-detailHotel .myroom-hotel-item-tedad > div {
    gap: 4px;
    align-items: center;
}

#hotelDetailContainer .sidebar-detailHotel .myroom-hotel-item-tedad div > i {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border-width: 1px;
    border-radius: 10px;
    background: #f8fafc;
}

#hotelDetailContainer .sidebar-detailHotel .myroom-hotel-item-tedad div input {
    height: 36px;
    line-height: 36px;
    font-size: 14px;
}

/* Header, navigation and content surfaces. */
#hotelDetailContainer .content-detailHotel > .internal-hotel-name,
#hotelDetailContainer .content-detailHotel > .external-hotel-name {
    padding: 8px 0 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

#hotelDetailContainer .hotel-address {
    color: var(--hotel-detail-muted);
    font-size: 14px;
    line-height: 1.9;
}

#hotelDetailContainer .parent-navigation-list-hotel {
    margin: 20px 0 28px;
    padding: 6px;
    background: color-mix(in srgb, var(--hotel-detail-accent) 3%, #fff);
    border: 0;
    box-shadow: var(--hotel-detail-shadow);
    border-radius: 100px;
}

#hotelDetailContainer .parent-navigation-list-hotel ul {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border: 0;
    scrollbar-width: thin;
}

#hotelDetailContainer .parent-navigation-list-hotel li {
    flex: 1 0 auto;
}

#hotelDetailContainer .parent-navigation-list-hotel a {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hotel-detail-muted);
    white-space: nowrap;
    gap: 10px;
    text-decoration: none;
}

#hotelDetailContainer .parent-navigation-list-hotel a:hover,
#hotelDetailContainer .parent-navigation-list-hotel a:focus-visible {
    background: var(--hotel-detail-accent-soft);
    color: var(--hotel-detail-accent);
}

#hotelDetailContainer .hotel-desc {
    padding: 0;
    margin-top: 0;
}

#hotelDetailContainer .tabHotel__buttons {
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    padding: 5px;
    margin-bottom: 24px;
    border-radius: 14px;
    background: var(--hotel-detail-surface);
    flex-wrap: wrap;
}

#hotelDetailContainer .tabHotel__btns {
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    padding: 10px 16px;
    color: var(--hotel-detail-muted);
    font-size: 13px;
    line-height: 1.7;
}

#hotelDetailContainer .tabHotel__btns--active {
    background: #fff !important;
    color: var(--hotel-detail-ink) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(23, 36, 55, 0.08);
    font-weight: 700;
}

#hotelDetailContainer .rulesHotel__answer {
    padding: 16px;
    border: 0;
    border-radius: 14px;
    background: var(--hotel-detail-surface);
    line-height: 2;
}

#hotelDetailContainer .hotel-fea-title {
    margin-top: 24px;
    font-weight: 700;
    color: var(--hotel-detail-ink);
}

#hotelDetailContainer .hotel-fea-inner .hotel-fea-item-2 {
    box-sizing: border-box;
    padding: 8px;
    font-size: 13px;
    line-height: 1.8;
}

#hotelDetailContainer .hotel-fea-item-2 i {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 9px;
}

#hotelDetailContainer .hotel-rooms-price-col {
    background: #f8fafc;
    border-color: var(--hotel-detail-border);
    border-right-style: solid;
}

#hotelDetailContainer .label_reserve_input {
    min-height: 46px;
    box-sizing: border-box;
    border-radius: 12px;
    font-weight: 700;
}

/* Search and reservation summary. Brand colors continue to come from the theme. */
#hotelDetailContainer .sidebar-detailHotel .form-hotel-item-searchBox-btn button {
    background: var(--hotel-detail-accent-soft) !important;
    color: var(--hotel-detail-accent) !important;
    border-color: var(--hotel-detail-border) !important;
    font-size: 14px;
}

#hotelDetailContainer .sidebar-detailHotel .form-hotel-item-searchBox-btn button:hover {
    background: color-mix(in srgb, var(--hotel-detail-accent) 14%, #fff) !important;
}

#hotelDetailContainer .box-reserve-hotel-fix-items-2 {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--hotel-detail-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--hotel-detail-accent) 3%, #fff);
    gap: 12px;
}

#hotelDetailContainer .box-reserve-hotel-fix-items-2 > .City {
    font-size: 14px;
    font-weight: 700;
    color: var(--hotel-detail-ink);
}

#hotelDetailContainer .box-reserve-hotel-fix-items-2 .parent--price {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

#hotelDetailContainer .roomFinalTxt {
    margin: 0;
    color: var(--hotel-detail-muted);
    font-size: 13px;
}

#hotelDetailContainer .box-reserve-hotel-fix-items-2 .roomFinalPrice {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    color: var(--hotel-detail-accent);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

#hotelDetailContainer .roomFinalPrice > i {
    font-size: 12px;
    color: var(--hotel-detail-muted);
}

#hotelDetailContainer .multi-rooms-price-btn-container button {
    background: var(--hotel-detail-accent);
    color: #fff;
    min-height: 52px;
    height: auto;
    padding: 12px 20px;
    border-radius: 14px;
    line-height: 1.6;
}

#hotelDetailContainer .multi-rooms-price-btn-container button:focus-visible,
#hotelDetailContainer .tabHotel__btns:focus-visible {
    outline: 2px solid var(--hotel-detail-accent);
    outline-offset: 3px;
}

#hotelDetailContainer .multi-rooms-price-btn-container button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (min-width: 992px) {
    #hotelDetailContainer .parent-hotel-details--new {
        grid-template-columns: minmax(0, 1fr) 310px;
        gap: 28px;
        align-items: start;
    }

    #hotelDetailContainer .parent-hotel-details--new .box-hotel--new {
        grid-area: 1 / 1 / 2 / 2;
    }

    #hotelDetailContainer .parent-hotel-details--new .side-bar-hotel--new {
        grid-area: 1 / 2 / 2 / 3;
    }

    #hotelDetailContainer .parent-hotel-details--new:dir(ltr) {
        grid-template-columns: 310px minmax(0, 1fr);
    }

    #hotelDetailContainer .parent-hotel-details--new:dir(ltr) .box-hotel--new {
        grid-area: 1 / 2 / 2 / 3;
    }

    #hotelDetailContainer .parent-hotel-details--new:dir(ltr) .side-bar-hotel--new {
        grid-area: 1 / 1 / 2 / 2;
    }
}

@media (max-width: 576px) {
    #hotelDetailContainer .parent-navigation-list-hotel {
        margin-bottom: 20px;
    }

    #hotelDetailContainer .hotel-fea-inner .hotel-fea-item-2 {
        flex-basis: 50%;
    }

    #hotelDetailContainer .tabHotel__btns {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* Reference layout: full-width gallery, with hotel details below the photos. */
#hotelDetailContainer .parent-app--new {
    border-radius: 24px;
    background: #fafbfd;
    padding: 16px;
}

/* Hero gallery: large image, caption and overlapping thumbnail strip. */
#hotelDetailContainer .hotel-detail-gallery {
    width: 100%;
    min-width: 0;
    margin-bottom: 8px;
}

#hotelDetailContainer .hotel-gallery-hero {
    position: relative;
    height: 380px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--hotel-detail-surface);
}

#hotelDetailContainer .hotel-gallery-open,
#hotelDetailContainer .hotel-gallery-main-image {
    display: block;
    width: 100%;
    height: 100%;
}

#hotelDetailContainer .hotel-gallery-main-image {
    object-fit: cover;
}

#hotelDetailContainer .hotel-gallery-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 17, 25, .76), rgba(12, 17, 25, .28) 48%, transparent 75%);
    pointer-events: none;
}

#hotelDetailContainer .hotel-gallery-caption {
    position: absolute;
    left: 40px;
    bottom: 104px;
    z-index: 1;
    width: min(45%, 420px);
    color: #fff;
    text-align: start;
    pointer-events: none;
}

#hotelDetailContainer .hotel-gallery-name {
    margin: 0 0 12px;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.6;
    color: inherit;
}

#hotelDetailContainer .hotel-gallery-address {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: inherit;
}

#hotelDetailContainer .hotel-gallery-controls {
    position: absolute;
    right: 20px;
    top: 50%;
    display: flex;
    gap: 8px;
    direction: ltr;
    transform: translateY(-50%);
    z-index: 2;
}

#hotelDetailContainer .hotel-gallery-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #334155;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    cursor: pointer;
}

#hotelDetailContainer .hotel-gallery-arrow > svg {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#hotelDetailContainer .hotel-gallery-thumbnails {
    position: relative;
    display: flex;
    gap: 8px;
    width: fit-content;
    max-width: min(520px, calc(100% - 48px));
    box-sizing: border-box;
    margin: -58px auto 0 24px;
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--hotel-detail-shadow);
    overflow-x: auto;
    scrollbar-width: none;
    direction: ltr;
    z-index: 3;
}

#hotelDetailContainer .hotel-gallery-thumbnails::-webkit-scrollbar {
    display: none;
}

#hotelDetailContainer .hotel-gallery-thumbnail {
    flex: 0 0 120px;
    height: 92px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--hotel-detail-surface);
    cursor: pointer;
}

#hotelDetailContainer .hotel-gallery-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#hotelDetailContainer .hotel-gallery-thumbnail[aria-pressed="true"] {
    border-color: var(--hotel-detail-accent);
}

#hotelDetailContainer .hotel-detail-gallery button:focus-visible,
#hotelDetailContainer .hotel-gallery-open:focus-visible {
    outline: 3px solid var(--hotel-detail-accent);
    outline-offset: -3px;
}

#hotelDetailContainer .hotel-detail-gallery .hotel-gallery-source[hidden] {
    display: none;
}

@media (max-width: 767px) {
    #hotelDetailContainer .hotel-gallery-hero {
        height: 300px;
    }

    #hotelDetailContainer .hotel-gallery-caption {
        left: 20px;
        bottom: 80px;
        width: 65%;
    }

    #hotelDetailContainer .hotel-gallery-controls {
        right: 12px;
    }

    #hotelDetailContainer .hotel-gallery-thumbnails {
        max-width: calc(100% - 24px);
        margin-top: -42px;
        margin-left: 12px;
    }

    #hotelDetailContainer .hotel-gallery-thumbnail {
        flex-basis: 88px;
        height: 68px;
    }
}

/* Keep occupancy values in the form for the existing search flow. */
#hotelDetailContainer .sidebar-detailHotel .hotel-detail-search-occupancy {
    display: none;
}

#hotelDetailContainer .hotel-detail-search-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

#hotelDetailContainer .hotel-detail-search-title > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--hotel-detail-accent-soft);
    color: var(--hotel-detail-accent);
    font-size: 20px;
}

#hotelDetailContainer .hotel-detail-search-title h2 {
    margin: 0;
    color: var(--hotel-detail-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-calendar {
    position: relative;
    padding-top: 18px;
}

#hotelDetailContainer .hotel-detail-date-label {
    position: absolute;
    top: 0;
    inset-inline-start: 24px;
    margin: 0;
    color: var(--hotel-detail-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 18px;
    cursor: pointer;
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-input {
    min-height: 62px;
    padding: 4px 12px;
    background: #fff;
    border-color: #e4e7ec;
    border-radius: 12px;
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-input--h {
    min-height: 36px;
    height: auto;
    font-size: 13px;
    color: var(--hotel-detail-muted);
    border: 0;
    background: transparent;
    padding-inline: 0;
}

#hotelDetailContainer .sidebar-detailHotel .parent-box--icon {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

#hotelDetailContainer .sidebar-detailHotel .parent-box--icon > div:first-child {
    color: var(--hotel-detail-muted);
    font-size: 12px;
    line-height: 1.8;
}

#hotelDetailContainer .sidebar-detailHotel .parent-counter-analog {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
    align-items: center;
}

#hotelDetailContainer .sidebar-detailHotel .form-hotel-item-searchBox-btn button i {
    color: inherit;
}

/* A compact search card with a distinct invoice area. */
#hotelDetailContainer .sidebar-detailHotel .filter_hotel_boxes > .filterBox {
    padding: 20px;
    border-radius: 20px;
    border-color: #e8ecf1;
    box-shadow: 0 6px 24px rgba(24, 34, 48, .05);
}

#hotelDetailContainer .sidebar-detailHotel .filtertip-searchbox-box1 {
    border-bottom: 0;
}

#hotelDetailContainer .sidebar-detailHotel .parent-counter-analog > .City {
    font-size: 12px;
    font-weight: 500;
    color: var(--hotel-detail-muted);
    line-height: 1.8;
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-input:focus-within {
    border-color: var(--hotel-detail-accent);
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-input > .fa-angle-down {
    font-size: 12px;
    color: #98a2b3;
}

#hotelDetailContainer .sidebar-detailHotel .parent-box-calendar > .fa-calendar {
    color: var(--hotel-detail-accent);
}

#hotelDetailContainer .box-reserve-hotel-fix-items-2 .hotel-detail-invoice-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

#hotelDetailContainer .hotel-detail-invoice-title > i {
    color: var(--hotel-detail-accent);
    font-size: 16px;
}

#hotelDetailContainer .hotel-detail-total {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--hotel-detail-border);
}

#hotelDetailContainer .box-reserve-hotel-fix-items-2 .hotel-detail-total-label {
    font-size: 11px;
    color: var(--hotel-detail-muted);
}

#hotelDetailContainer .box-reserve-hotel-fix-items-2 .parent-advance--payment {
    gap: 8px;
    flex-wrap: wrap;
}

#hotelDetailContainer .box-reserve-hotel-fix-items-2 .parent-advance--payment p {
    margin: 0;
    font-size: 12px;
    color: var(--hotel-detail-muted);
}

#hotelDetailContainer .sidebar-detailHotel .roomFinalPrepaymentPackagePrice {
    margin: 0;
    font-size: 12px;
    line-height: 1.8;
}

#hotelDetailContainer .sidebar-detailHotel .multi-rooms-price-btn-container button {
    min-height: 48px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
}

/* Room cards retain the original quantity inputs and plus/minus handlers. */
#hotelDetailContainer .hotel-detail-room-list-local > .hotel-rooms-name-container {
    box-sizing: border-box;
    padding: 24px;
}

#hotelDetailContainer .hotel-detail-room-list-local .hotel-rooms-name > .name {
    padding-bottom: 16px;
    border-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
}

#hotelDetailContainer .hotel-detail-room-list-local .hotel-rooms-price-col {
    background: #fff;
    padding: 20px 16px;
}

#hotelDetailContainer .price_number > .site-main-text-color {
    color: var(--hotel-detail-accent);
    font-size: 20px;
    font-weight: 800;
}

#hotelDetailContainer .title_price {
    color: var(--hotel-detail-muted);
    font-size: 12px;
}

#hotelDetailContainer .parent-box-room-selection {
    margin-top: 12px;
}

#hotelDetailContainer .number_room {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--hotel-detail-border);
    border-radius: 14px;
    background: #fff;
}

#hotelDetailContainer .number_room .plus_room,
#hotelDetailContainer .number_room .minus_room {
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 10px;
    background: var(--hotel-detail-accent);
    color: #fff;
}

#hotelDetailContainer .number_room .minus_room {
    background: var(--hotel-detail-accent-soft);
    color: var(--hotel-detail-accent);
}

#hotelDetailContainer .number_room .val_number_room {
    width: 36px;
    height: 36px;
    color: var(--hotel-detail-ink);
    font-size: 16px;
    border-radius: 8px;
}

#hotelDetailContainer .number_room .val_number_room:focus-visible {
    outline: 2px solid var(--hotel-detail-accent);
    outline-offset: 1px;
}

@media (max-width: 991px) {
    #hotelDetailContainer .parent-app--new {
        padding: 8px;
    }

}

@media (max-width: 576px) {
    #hotelDetailContainer .parent-app--new {
        padding: 0;
    }


    #hotelDetailContainer .hotel-detail-room-list-local > .hotel-rooms-name-container {
        padding: 16px;
    }

    #hotelDetailContainer .hotel-detail-room-list-local .hotel-rooms-price-col {
        padding: 16px;
        border-right: 0;
        border-top: 1px solid var(--hotel-detail-border);
    }
}

/* Reference navigation and independent information cards. */
#hotelDetailContainer .parent-navigation-list-hotel a > i {
    color: var(--hotel-detail-accent);
    font-size: 19px;
}

#hotelDetailContainer .parent-navigation-list-hotel a.is-active {
    background: var(--hotel-detail-accent);
    color: #fff;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--hotel-detail-accent) 20%, transparent);
}

#hotelDetailContainer .parent-navigation-list-hotel a.is-active > i {
    color: inherit;
}

#hotelDetailContainer .hotel-section-card,
#hotelDetailContainer .hotel-about-card {
    box-sizing: border-box;
    width: 100%;
    margin: 20px 0 0;
    padding: 20px;
    border: 1px solid var(--hotel-detail-border);
    border-radius: 18px;
    background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--hotel-detail-accent) 2%, #fff));
    box-shadow: var(--hotel-detail-shadow);
    scroll-margin-top: 24px;
}

#hotelDetailContainer .hotel-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    color: var(--hotel-detail-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
}

#hotelDetailContainer .hotel-section-heading > i {
    color: var(--hotel-detail-accent);
    font-size: 22px;
}

#hotelDetailContainer .hotel-amenities-card .hotel-fea-inner:has(> .hotel-fea-item-2) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 12px;
}

#hotelDetailContainer .hotel-amenities-card .hotel-fea-item-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0 4px 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

#hotelDetailContainer .hotel-amenities-card .hotel-fea-item-2 > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    color: var(--hotel-detail-accent) !important;
    background: var(--hotel-detail-accent-soft) !important;
    font-size: 22px;
}

#hotelDetailContainer .hotel-amenities-card .hotel-fea-inner:empty,
#hotelDetailContainer .hotel-about-empty {
    display: none;
}

#hotelDetailContainer .hotel-about-card .tabHotel__buttons {
    margin-bottom: 16px;
    padding: 0;
    background: transparent;
}

#hotelDetailContainer .hotel-about-card .tabHotel__btns {
    padding: 6px 10px;
    font-size: 12px;
}

#hotelDetailContainer .hotel-about-card .tabHotel__btns--active {
    color: var(--hotel-detail-accent) !important;
    background: var(--hotel-detail-accent-soft) !important;
    box-shadow: none;
}

#hotelDetailContainer .hotel-about-card .tabHotel__box p {
    font-size: 14px;
    line-height: 2.2;
}

#hotelDetailContainer .hotel-location-card {
    position: relative;
    padding: 8px;
    overflow: hidden;
}

#hotelDetailContainer .hotel-location-card .hotel-section-heading {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 401;
    margin: 0;
    padding: 8px 12px;
    border-radius: 12px;
    background: #fff;
    pointer-events: none;
}

#hotelDetailContainer .hotel-location-card .rp-hotel-box {
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
}

#hotelDetailContainer .hotel-location-card .gmap3 {
    height: 230px;
    border-radius: 12px;
}

#hotelDetailContainer .hotel-map-link {
    position: absolute;
    left: 20px;
    bottom: 24px;
    z-index: 401;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    color: var(--hotel-detail-accent);
    box-shadow: var(--hotel-detail-shadow);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 576px) {
    #hotelDetailContainer .parent-navigation-list-hotel a {
        padding: 10px 12px;
        font-size: 12px;
    }

    #hotelDetailContainer .hotel-section-card,
    #hotelDetailContainer .hotel-about-card {
        padding: 16px;
    }

    #hotelDetailContainer .hotel-location-card {
        padding: 6px;
    }

    #hotelDetailContainer .hotel-section-heading {
        font-size: 14px;
    }
}

/* استایل مشترک برای جلوگیری از ستون‌ستون شدن */
.tabHotel__box {
    columns: auto !important;
    column-count: auto !important;
    width: 100% !important;
}

.tabHotel__box p {
    columns: auto !important;
    column-count: auto !important;
    display: block;
}

/* تب ۱: توضیحات اقامتگاه (متن انگلیسی - چپ به راست) */
#tabHotel__box1 {
    direction: ltr !important;
    text-align: left !important;
}

/* تب ۲: قوانین و مقررات (متن فارسی - راست به چپ) */
#tabHotel__box2 {
    direction: rtl !important;
    text-align: right !important;
}

/* اصلاح چیدمان لیست قوانین */
.rulesHotel .hotel-rules-list {
    list-style: disc inside;
    direction: rtl;
    text-align: right;
    line-height: 2;
    padding: 0;
    margin: 0;
}

.rulesHotel .hotel-rules-list li {
    direction: rtl;
    text-align: right;
}