/* Breadcrumb */
.hotel-detail-page .breadcrumb {
    background: var(--white);
    padding: 12px 0;
}

.hotel-detail-page .breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 5px;
}

.hotel-detail-page .breadcrumb-inner a {
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s;
}

.hotel-detail-page .breadcrumb-inner a:hover {
    border-color: var(--btn-border-color);
    background: var(--bg-light);
}

.hotel-detail-page .breadcrumb-inner a.active {
    color: var(--text-dark);
    border-color: var(--btn-border-color);
    background: var(--bg-light);
    pointer-events: none;
}

.hotel-detail-page .breadcrumb-inner .separator {
    font-size: 10px;
    color: var(--text-light);
}

/* Hotel Header */
.hotel-header {
    background: var(--white);
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
}

.hotel-header-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hotel-header .title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.hotel-header .hotel-title {
    font-size: 28px;
    font-weight: 400;
    color: var(--secondary);
    margin: 0;
    line-height: 1.3;
}

.hotel-header .favorite-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--btn-border-color);
    border-radius: 32px;
    background: var(--white);
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}

.hotel-header .favorite-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.hotel-header .favorite-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

@media screen and (max-width: 767px) {
    .hotel-header .favorite-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hotel-detail-page .back-to-top {
        display: none !important;
    }
}

/* Hotel Badges */
.hotel-header .hotel-badges {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hotel-header .page-badges {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}

.hotel-header .badge-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 48px;
    background: var(--white);
    border: 2px solid var(--accent-purple-border);
    border-radius: 8px;
}

.hotel-header .badge-item.location {
    cursor: pointer;
    transition: border-color 0.2s;
}

.hotel-header .badge-item.location:hover {
    border-color: var(--accent-purple);
}

.hotel-header .badge-item.helal .number {
    width: 40px;
    height: 40px;
    background: url("/assets/images/helal-number-bg.svg") no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-purple);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.hotel-header .badge-item.helal .text small {
    font-weight: 400;
    color: var(--text-muted);
}

.hotel-header .badge-item .icon {
    height: 40px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hotel-header .badge-item .icon i {
    font-size: 20px;
    color: var(--accent-purple);
}

.hotel-header .badge-item .text {
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary);
    line-height: 1.4;
}

.hotel-header .badge-item.helal {
    border-color: var(--accent-purple-border);
}

.hotel-header .badge-item.helal .icon {
    width: 40px;
    height: 40px;
    background: url('/assets/images/icons/helal-number-bg.svg') no-repeat center center;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hotel-header .badge-item.helal .icon .percentage {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-purple);
}

.hotel-header .badge-item.helal .text small {
    font-weight: 400;
}

@media screen and (max-width: 767px) {
    .hotel-header {
        padding: 16px 0;
    }

    .hotel-header .hotel-title {
        font-size: 22px;
    }

    .hotel-header .hotel-badges {
        justify-content: center;
        width: 100%;
    }

    .hotel-header .page-badges {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .hotel-header .badge-item {
        padding: 0 12px;
        height: 40px;
    }
}

/* Detail Image Gallery */
.detail-image {
    margin-bottom: 24px;
    position: relative;
}

.detail-image .container {
    position: relative;
}

.detail-image .number-pag {
    border-radius: 100px;
    background: rgba(33, 33, 33, 0.5);
    align-items: center;
    color: var(--white);
    font-size: 11px;
    font-weight: 500;
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 12px;
    z-index: 10;
    display: none;
}

@media screen and (max-width: 1024px) {
    .detail-image .number-pag {
        display: flex;
    }
}

.detail-image .arrow-buttons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    z-index: 10;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .detail-image .arrow-buttons {
        display: none;
    }
}

.detail-image .arrow-buttons a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.2s;
    color: var(--text-dark);
    text-decoration: none;
}

.detail-image .arrow-buttons a:hover {
    background: var(--secondary);
    color: var(--white);
}

.detail-image .arrow-buttons a.prev {
    margin-left: -10px;
}

.detail-image .arrow-buttons a.next {
    margin-right: -10px;
}

.detail-image-swiper-inner {
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
}

@media screen and (max-width: 768px) {
    .detail-image-swiper-inner {
        margin-bottom: 12px;
    }
}

.detail-image-swiper-inner .swiper-slide {
    height: 400px;
}

.detail-image-swiper-inner img {
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .detail-image-swiper-inner .swiper-slide {
        height: 200px;
    }

    .detail-image-swiper-inner img {
        border-radius: 12px;
    }
}

.detail-image-swiper-inner-thumbs {
    overflow: hidden;
}

.detail-image-swiper-inner-thumbs .swiper-slide {
    height: 80px;
}

.detail-image-swiper-inner-thumbs .swiper-slide img {
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-image-swiper-inner-thumbs .swiper-slide.swiper-slide-thumb-active img {
    border-color: var(--secondary);
}

@media screen and (max-width: 768px) {
    .detail-image-swiper-inner-thumbs .swiper-slide {
        height: 60px;
    }
}

/* Helal Features Summary */
.helal-features-summary {
    padding: 24px 0;
    background: var(--white);
}

.helal-features-summary .list-inner {
    display: flex;
    justify-content: space-evenly;
    gap: 16px;
}

@media screen and (max-width: 991px) {
    .helal-features-summary .list-inner {
        justify-content: flex-start;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding-bottom: 8px;
    }

    .helal-features-summary .list-inner::-webkit-scrollbar {
        display: none;
    }
}

.helal-features-summary .list-inner .item {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--btn-border-color);
    min-width: 270px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 991px) {
    .helal-features-summary .list-inner .item {
        flex: 0 0 270px;
    }
}

.helal-features-summary .list-inner .item .heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.helal-features-summary .list-inner .item .heading .title {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary);
}

.helal-features-summary .list-inner .item .heading .count {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dark);
    border-radius: 8px;
    border: 1px solid var(--btn-border-color);
}

.helal-features-summary .list-inner .item .progress-bar {
    position: relative;
    width: 100%;
    background: var(--btn-border-color);
    height: 6px;
    border-radius: 12px;
    margin-bottom: 13px;
    overflow: hidden;
}

.helal-features-summary .list-inner .item .progress-bar .status {
    height: 6px;
    display: block;
    background: var(--success);
    border-radius: 12px;
    transition: width 0.8s ease-out;
    width: 0;
}

.helal-features-summary .list-inner .item .progress-bar .status.animated {
    width: var(--progress-width);
}

.helal-features-summary .list-inner .item .list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 180px;
}

.helal-features-summary .list-inner .item .list .item-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.helal-features-summary .list-inner .item .list .item-list span {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.helal-features-summary .list-inner .item .list .item-list span::before {
    content: "●";
    font-size: 8px;
    color: var(--text-muted);
}

.helal-features-summary .list-inner .item .list .item-list span.bold {
    font-weight: 700;
    font-size: 14px;
}

.helal-features-summary .list-inner .item .list .detail {
    margin-top: auto;
    padding-top: 16px;
}

.helal-features-summary .list-inner .item .list .detail a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-purple);
    cursor: pointer;
}

.helal-features-summary .list-inner .item .list .detail a i {
    font-size: 10px;
    transition: transform 0.2s;
}

.helal-features-summary .list-inner .item .list .detail a:hover i {
    transform: translateX(3px);
}

.helal-features-summary .all-features-btn {
    display: none;
    justify-content: center;
    margin-top: 16px;
}

@media screen and (max-width: 768px) {
    .helal-features-summary .all-features-btn {
        display: flex;
    }
}

.helal-features-summary .all-features-btn .btn {
    background: var(--secondary);
    border: none;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    padding: 14px 48px;
    border-radius: 8px;
    width: 100%;
    text-align: center;
}

/* Section Heading */
.helal-features-summary .section-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 20px;
}

/* Helal Widget */
.helal-widget {
    border-radius: 8px;
    border: 1px solid var(--btn-border-color);
    background: var(--white);
    padding: 16px 16px 16px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 30px;
}

.helal-widget .widget-heading {
    width: 100%;
    font-size: 24px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 4px;
}

@media screen and (max-width: 768px) {
    .helal-widget {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .helal-widget .widget-heading {
        font-size: 20px;
        margin-bottom: 0;
    }
}

.helal-widget .widget-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

@media screen and (max-width: 768px) {
    .helal-widget .widget-left {
        flex-wrap: wrap;
        gap: 12px;
        border: 1px solid var(--btn-border-color);
        border-radius: 8px;
        padding: 12px;
        width: 100%;
        justify-content: flex-start;
        position: relative;
    }

    .helal-widget .widget-left::after {
        content: '\f054';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 14px;
    }
}

.helal-widget .widget-left .compatibility {
    display: flex;
    align-items: center;
}

.helal-widget .widget-left .compatibility .icon {
    width: 44px;
    height: 44px;
    border: 2px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: var(--btn-border-color);
    position: relative;
    z-index: 5;
    flex-shrink: 0;
}

.helal-widget .widget-left .compatibility .icon .inner {
    width: 36px;
    height: 36px;
    border: 2px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    padding: 4px;
    background: var(--white);
}

.helal-widget .widget-left .compatibility .texting {
    border-radius: 8px;
    border: 1px solid var(--divider);
    background: var(--white);
    padding: 2px;
    display: flex;
    align-items: center;
    margin-left: -20px;
    min-width: 140px;
}

.helal-widget .widget-left .compatibility .texting .texting-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 16px 4px 28px;
    border-radius: 6px;
    width: 100%;
}

.helal-widget .widget-left .compatibility .texting .texting-inner span {
    font-size: 14px;
    font-weight: 500;
}

.helal-widget .widget-left .compatibility .texting .texting-inner strong {
    font-size: 16px;
    font-weight: 700;
}

/* Level 1 - Kısmi */
.helal-widget .widget-left .compatibility.level-1 .texting .texting-inner {
    background: var(--success-ring);
}

.helal-widget .widget-left .compatibility.level-1 .texting .texting-inner span,
.helal-widget .widget-left .compatibility.level-1 .texting .texting-inner strong {
    color: var(--success-dark);
}

.helal-widget .widget-left .compatibility.level-1 .icon svg path {
    fill: var(--success-ring);
}

.helal-widget .widget-left .compatibility.level-1 .icon svg path:last-child {
    fill: var(--success-dark);
}

/* Level 2 - İyi */
.helal-widget .widget-left .compatibility.level-2 .texting .texting-inner {
    background: var(--success-ring-dark);
}

.helal-widget .widget-left .compatibility.level-2 .texting .texting-inner span,
.helal-widget .widget-left .compatibility.level-2 .texting .texting-inner strong {
    color: var(--success-dark);
}

.helal-widget .widget-left .compatibility.level-2 .icon svg path {
    fill: var(--success-ring-dark);
}

.helal-widget .widget-left .compatibility.level-2 .icon svg path:last-child {
    fill: var(--success-dark);
}

/* Level 3 - Çok İyi */
.helal-widget .widget-left .compatibility.level-3 .texting .texting-inner {
    background: var(--success-dark);
}

.helal-widget .widget-left .compatibility.level-3 .texting .texting-inner span,
.helal-widget .widget-left .compatibility.level-3 .texting .texting-inner strong {
    color: var(--white);
}

.helal-widget .widget-left .compatibility.level-3 .icon svg path {
    fill: var(--success-dark);
}

.helal-widget .widget-left .compatibility.level-3 .icon svg path.bg-tree {
    fill: var(--white);
}

.helal-widget .widget-left .compatibility.level-3 .icon svg path:last-child {
    fill: var(--success-dark);
}

.helal-widget .widget-left .detail-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--success);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.helal-widget .widget-left .detail-link:hover {
    text-decoration: none;
}

.helal-widget .widget-left .detail-link i {
    font-size: 12px;
}

.helal-widget .widget-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border-radius: 8px;
    position: relative;
    text-align: right;
    max-width: 380px;
}

@media screen and (max-width: 768px) {
    .helal-widget .widget-right {
        text-align: left;
        max-width: 100%;
        width: 100%;
        padding-left: 0;
    }

    .helal-widget .widget-right::before {
        display: none;
    }
}

.helal-widget .widget-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: var(--white);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.helal-widget .widget-right .info {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-width: 310px;
    text-align: right;
}

@media screen and (max-width: 768px) {
    .helal-widget .widget-right .info {
        text-align: left;
        max-width: 100%;
    }
}

.helal-widget .widget-right .info .info-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.helal-widget .widget-right .info .info-desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-dark);
}

.helal-widget .widget-right .info .info-cert {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}


/* Hotel Rooms Section */
.hotel-rooms {
    padding: 32px 0;
    background-image: linear-gradient(var(--bg-light) 20%, var(--white) 0%);
}

.hotel-rooms .section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 14px;
}

/* Filter Area */
.item-group-list {
    display: flex;
    align-items: center;
    gap: 12px;
}

.item-group-list.filter-area {
    margin-bottom: 44px;
}

@media screen and (max-width: 768px) {
    .item-group-list {
        flex-direction: column;
    }
}

.item-group-list .item-group {
    width: 100%;
    position: relative;
}

.item-group-list .item-group .input-group {
    border-radius: 8px;
    border: 1px solid var(--btn-border-color);
    background: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.item-group-list .item-group .input-group:hover {
    border-color: var(--secondary);
}

.item-group-list .item-group.open .input-group {
    border-color: var(--secondary);
}

.item-group-list .item-group .input-group .input {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 3px;
    padding: 10px 14px;
}

.item-group-list .item-group .input-group .input label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-gray);
    margin: 0;
}

.item-group-list .item-group .input-group .input .selected-value {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-dark);
}

.item-group-list .item-group .input-group .icon {
    font-size: 20px;
    margin-right: 14px;
    color: var(--text-light);
}

.item-group-list .item-group button.search-btn {
    width: 100%;
    height: 56px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
}

/* Filter Dropdown */
.filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--btn-border-color);
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
}

.item-group.open .filter-dropdown {
    display: block;
}

.filter-dropdown .mobile-heading {
    display: none;
    align-items: center;
    padding: 16px;
    justify-content: space-between;
    border-bottom: 1px solid var(--bg-light);
}

.filter-dropdown .mobile-heading span {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-dark);
}

.filter-dropdown .mobile-heading .close-btn,
.filter-dropdown .mobile-heading .back-btn {
    border: none;
    background: transparent;
    color: var(--text-placeholder);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}

.filter-dropdown .dropdown-body {
    padding: 16px;
}

.filter-dropdown .dropdown-body .section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--secondary);
    margin: 0 0 16px 0;
}

/* Guest Dropdown */
.filter-dropdown.guest-dropdown {
    width: 380px;
    right: 0;
    left: auto;
    border-radius: 12px;
}

.filter-dropdown.guest-dropdown .rooms-container {
    padding: 0;
}

.filter-dropdown.guest-dropdown .room-card {
    border-bottom: 1px solid var(--bg-light);
}

.filter-dropdown.guest-dropdown .room-card:last-child {
    border-bottom: none;
}

.filter-dropdown.guest-dropdown .room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
}

.filter-dropdown.guest-dropdown .room-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
}

.filter-dropdown.guest-dropdown .remove-room-btn {
    font-size: 14px;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
}

.filter-dropdown.guest-dropdown .room-body {
    padding: 0 18px 16px;
}

.filter-dropdown.guest-dropdown .room-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--bg-light);
}

.filter-dropdown.guest-dropdown .room-row:last-of-type {
    border-bottom: none;
}

.filter-dropdown.guest-dropdown .room-label .label-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-dark);
    display: block;
}

.filter-dropdown.guest-dropdown .room-label .label-sub {
    font-size: 12px;
    color: var(--text-light);
}

.filter-dropdown.guest-dropdown .add-room-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 16px;
}

.filter-dropdown.guest-dropdown .submit-button {
    display: none;
    padding: 16px;
}

.filter-dropdown.guest-dropdown .submit-button span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    background: var(--secondary);
    color: var(--white);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* Child Ages */
.child-ages-container {
    padding-top: 12px;
    border-top: 1px solid var(--bg-light);
    margin-top: 12px;
}

.child-ages-container:empty {
    display: none;
}

.child-ages-header {
    margin-bottom: 12px;
}

.child-ages-header .label-text {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.child-ages-header .label-sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-light);
}

.child-ages-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.child-age-select {
    flex: 0 0 calc(50% - 5px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-light);
    border: 1px solid var(--btn-border-color);
    border-radius: 8px;
    padding: 10px 14px;
    position: relative;
}

.child-age-select label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

.child-age-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
}

.child-dropdown {
    display: none;
    position: absolute;
    border-radius: 8px;
    border: 1px solid var(--btn-border-color);
    background: var(--white);
    left: 0;
    width: 100%;
    bottom: calc(100% + 4px);
    flex-direction: column;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.child-dropdown.active {
    display: flex;
}

.child-dropdown a {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    padding: 12px 16px;
    border-bottom: 1px solid var(--bg-light);
    cursor: pointer;
    text-decoration: none;
}

.child-dropdown a:last-child {
    border-bottom: none;
}

.child-dropdown a:hover {
    background: var(--bg-light);
}

.child-age-select.novalid {
    border-color: var(--error);
    background: var(--error-light);
}

.child-age-select.novalid label {
    color: var(--error);
}

.child-age-select.novalid .child-age-value {
    color: var(--error);
}

/* Guest Filter Invalid State */
.guest-filter.novalid .input-group {
    border-color: var(--error);
    background: var(--error-light);
}

.guest-filter.novalid .input-group label,
.guest-filter.novalid .input-group .selected-value,
.guest-filter.novalid .input-group .icon {
    color: var(--error);
}

.guest-filter.novalid .input-group.shake {
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* Date Filter */
.date-filter .input-group {
    position: relative;
}

.date-filter .input-group .input.checkin {
    flex: 1;
    padding-right: 24px;
    position: relative;
}

.date-filter .input-group .input.checkin::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--btn-border-color);
}

.date-filter .input-group .input.checkout {
    flex: 1;
    padding-left: 24px;
}

.item-group-list .date-filter .input-group > .icon {
    position: absolute !important;
    left: 47% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    background: var(--white) !important;
    border: 1px solid var(--btn-border-color) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-placeholder) !important;
    font-size: 14px !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.date-filter.open .input-group {
    border-color: var(--secondary);
}

/* Selected date - green background */
.date-filter .input-group .input.has-value {
    background: var(--success-bg);
    border-radius: 6px;
    margin: 4px;
    padding: 6px 10px;
}

.date-filter .input-group .input.checkin.has-value {
    padding-right: 20px;
    margin-right: 0;
    border-radius: 6px 0 0 6px;
}

.date-filter .input-group .input.checkout.has-value {
    padding-left: 20px;
    margin-left: 0;
    border-radius: 0 6px 6px 0;
}

/* Date Picker Container */
.date-filter .date-picker-container {
    position: relative;
}

/* Mobile elements - hidden on desktop */
.date-filter .date-picker-container .mobile-date-header { display: none; }
.date-filter .date-picker-container .mobile-date-display { display: none; }
.date-filter .date-picker-container .mobile-date-apply { display: none; }

/* Lightpick Custom Styling */
.date-filter .lightpick {
    position: absolute !important;
    top: 20px !important;
    left: -30px !important;
    border-radius: 12px !important;
    background: var(--white);
    box-shadow: 0 30px 74px 0 rgba(67, 12, 12, 0.14) !important;
    min-width: 370px;
    font-family: 'Inter', sans-serif !important;
    z-index: 1050;
    padding: 0;
}

.date-filter .lightpick .lightpick__inner {
    padding: 16px;
}

.date-filter .lightpick .lightpick__close-action {
    display: none;
}

.date-filter .lightpick .lightpick__months {
    background-color: var(--white) !important;
    grid-gap: 0;
}

.date-filter .lightpick .lightpick__month {
    width: 100% !important;
    padding: 4px;
}

.date-filter .lightpick .lightpick__month:last-child {
    display: none;
}

.date-filter .lightpick .lightpick__month-title-bar {
    margin-bottom: 12px;
    justify-content: center !important;
}

.date-filter .lightpick .lightpick__month-title {
    position: initial;
    z-index: 9 !important;
}

.date-filter .lightpick .lightpick__month-title select {
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
}

.date-filter .lightpick .lightpick__toolbar {
    position: absolute;
    width: 100%;
    left: 0;
    top: 16px;
    justify-content: space-between;
    padding: 0 16px;
}

.date-filter .lightpick .lightpick__toolbar button {
    background: none;
    font-size: 18px;
    color: var(--text-muted);
    cursor: pointer;
}

.date-filter .lightpick .lightpick__toolbar button:hover {
    color: var(--primary);
}

.date-filter .lightpick .lightpick__day-of-the-week {
    font-size: 12px !important;
    font-style: normal;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--text-muted);
    height: 32px;
}

.date-filter .lightpick .lightpick__day {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    color: var(--text-dark);
    width: 54px;
    height: 43px;
    background-image: none !important;
}

.date-filter .lightpick .lightpick__day.is-today {
    color: var(--text-dark);
    background: none !important;
    font-weight: 700;
}

.date-filter .lightpick .lightpick__day.is-in-range {
    background: var(--error-bg) !important;
    color: var(--primary);
    border-radius: 0;
}

.date-filter .lightpick .lightpick__day:not(.is-disabled):not(.is-start-date):not(.is-end-date):hover {
    background: var(--error-bg) !important;
    color: var(--primary);
    border-radius: 0;
}

.date-filter .lightpick .lightpick__day.is-start-date {
    border-radius: 8px 0 0 8px !important;
    background: var(--primary) !important;
    color: var(--white) !important;
}

.date-filter .lightpick .lightpick__day.is-end-date {
    border-radius: 0 8px 8px 0 !important;
    background: var(--primary) !important;
    color: var(--white) !important;
}

.date-filter .lightpick .lightpick__day.is-start-date.is-end-date {
    border-radius: 8px !important;
}

.date-filter .lightpick .lightpick__tooltip {
    display: none !important;
}

/* Result Button */
.date-filter .lightpick .result-button {
    padding: 16px;
    border-top: 1px solid var(--btn-border-color);
}

.date-filter .lightpick .result-button a {
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--secondary);
    color: var(--white);
    gap: 4px;
    padding: 12px 8px;
    text-decoration: none;
}

.date-filter .lightpick .result-button a:hover {
    opacity: 0.9;
}

.date-filter .lightpick .result-button a span {
    color: var(--primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

/* Room List */
.room-list-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 23px;
}

.room-list-inner .item {
    border-radius: 8px;
    border: 1px solid var(--btn-border-color);
    width: 100%;
    background: var(--white);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s;
}

.room-list-inner .item:hover {
    border-color: var(--secondary);
}

.room-list-inner .item.active {
    border-color: var(--success);
}

.room-list-inner .item .room-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.room-list-inner .item .room-list .room {
    border-bottom: 1px solid var(--btn-border-color);
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.room-list-inner .item .room-list .room:last-child {
    border-bottom: none;
}

.room-list-inner .item .room-list .room .mobile-heading {
    display: none;
    margin-bottom: 12px;
}

.room-list-inner .item .room-list .room .mobile-heading .heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.room-list-inner .item .room-list .room .room-inner-detail {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
}

.room-list-inner .item .room-list .room .room-inner-detail .first .image {
    position: relative;
    flex-shrink: 0;
}

.room-list-inner .item .room-list .room .room-inner-detail .first .image img {
    width: 7rem;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
}

.room-list-inner .item .room-list .room .room-inner-detail .last {
    width: 100%;
}

.room-list-inner .item .room-list .room .heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.room-list-inner .item .room-list .room .heading .room-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.room-list-inner .item .room-list .room .heading .person {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
}

.room-list-inner .item .room-list .room .extras {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.room-list-inner .item .room-list .room .extras .room-type .title {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary);
}

.room-list-inner .item .room-list .room .extras .badge {
    background: var(--accent-purple-light);
    padding: 4px 10px;
    border-radius: 4px;
}

.room-list-inner .item .room-list .room .extras .badge span {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-purple);
}

/* Room Detail Price Section */
.room-list-inner .item .room-detail {
    border-radius: 0 8px 8px 0;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    border-left: 1px solid var(--btn-border-color);
    gap: 28px;
    padding: 16px;
}

.room-list-inner .item.active .room-detail {
    background: var(--success-bg);
}

.room-list-inner .item .room-detail .left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--secondary);
}

.room-list-inner .item .room-detail .left .person {
    font-size: 12px;
    font-weight: 700;
}

.room-list-inner .item .room-detail .left .day {
    font-size: 12px;
    font-weight: 400;
}

.room-list-inner .item .room-detail .left .day::after {
    width: 18px;
    height: 3px;
    border-radius: 8px;
    background: var(--divider);
    display: block;
    content: '';
    margin-top: 4px;
}

.room-list-inner .item .room-detail .left > .price {
    color: var(--success);
    font-size: 18px;
    font-weight: 700;
}

.room-list-inner .item .room-detail .left .old-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-list-inner .item .room-detail .left .old-price .price {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-light);
    text-decoration: line-through;
}

.room-list-inner .item .room-detail .left .old-price .discount {
    border-radius: 8px;
    background: var(--success-light);
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary);
}

/* Room Selection Radio */
.room-list-inner .item .room-detail .right label {
    display: flex;
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    color: var(--secondary);
    font-size: 12px;
    font-weight: 700;
    border: 2px solid var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.room-list-inner .item .room-detail .right label:hover {
    border-color: var(--secondary);
}

.room-list-inner .item .room-detail .right input {
    display: none;
}

.room-list-inner .item .room-detail .right input:checked + label {
    border-color: transparent;
    background: var(--success);
    color: var(--white);
}

.room-list-inner .item .room-detail .right input:checked + label span {
    display: none;
}

.room-list-inner .item .room-detail .right input:checked + label::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: "\f00c";
    color: var(--white);
    font-size: 16px;
}

/* Load More Rooms Button */
.load-more-rooms-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    background: var(--secondary);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.load-more-rooms-btn:hover {
    background: #502191;
    color: var(--white);
}

.load-more-rooms-btn span {
    color: var(--white);
}

/* Booking Summary */
.booking-summary {
    padding: 16px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid var(--btn-border-color);
    box-shadow: 0 14px 34px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 100px;
}

.booking-summary .summary-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.booking-summary .heading .desktop {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 0;
}

.booking-summary .heading .mobile {
    display: none;
    align-items: center;
    justify-content: space-between;
}

.booking-summary .heading .mobile .text {
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary);
}

.booking-summary .heading .mobile .close {
    font-size: 22px;
    color: var(--text-placeholder);
    cursor: pointer;
}

/* Date Section */
.booking-summary .date {
    display: flex;
    justify-content: space-evenly;
    border-radius: 8px;
    border: 1px solid var(--btn-border-color);
}

.booking-summary .date .item {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.booking-summary .date .item:first-child {
    border-right: 1px solid var(--btn-border-color);
}

.booking-summary .date .item span {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-gray);
}

.booking-summary .date .item span.title {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-purple);
}

/* Room Detail */
.booking-summary .room-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.booking-summary .room-detail .item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.booking-summary .room-detail .item .room {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-purple);
}

.booking-summary .room-detail .item .room-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--secondary);
}

.booking-summary .room-detail .item .badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.booking-summary .room-detail .item .person-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 12px;
    border-radius: 4px;
    background: var(--primary);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
}

.booking-summary .room-detail .item .room-type-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 12px;
    border-radius: 4px;
    background: var(--secondary);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
}

/* Hotel Price Row */
.booking-summary .hotel-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.booking-summary .hotel-price-row .label {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-gray);
}

.booking-summary .hotel-price-row .value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

/* Installment Promo */
.booking-summary .installment-promo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--success-bg);
    border: 1px solid var(--success-ring);
    border-radius: 8px;
    margin-top: 4px;
}

.booking-summary .installment-promo i {
    font-size: 18px;
    color: var(--success);
}

.booking-summary .installment-promo span {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-dark);
}

.booking-summary .installment-promo strong {
    font-weight: 700;
    color: var(--success);
}

/* Total Summary */
.booking-summary .total-summary {
    display: flex;
    flex-direction: column;
}

.booking-summary .total-summary .first {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-summary .total-summary .first .room {
    font-size: 12px;
    font-weight: 400;
    color: var(--secondary);
}

.booking-summary .total-summary .first .room strong {
    font-weight: 700;
}

.booking-summary .total-summary .first .day {
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary);
}

.booking-summary .total-summary .first .day::after {
    width: 18px;
    height: 3px;
    border-radius: 8px;
    background: var(--divider);
    display: block;
    content: "";
    margin-top: 4px;
}

.booking-summary .total-summary .first .old-price {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-light);
    text-decoration: line-through;
}

.booking-summary .total-summary .first .price {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    color: var(--success);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-summary .total-summary .first .price .discount {
    border-radius: 8px;
    background: var(--success-light);
    padding: 0 11px;
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary);
    height: 24px;
    display: flex;
    align-items: center;
}

.booking-summary .total-summary .arrow-btn {
    display: none;
}

.booking-summary .total-summary .button a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    border-radius: 8px;
    background: var(--success);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.booking-summary .total-summary .button a:hover {
    background: var(--success-hover);
}

/* Hotel Details Tabs */
.hotel-details {
    padding: 40px 0 60px;
    background: var(--bg-light);
}

.hotel-details > .container > .section-title {
    display: none;
    font-size: 24px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .hotel-details > .container > .section-title {
        display: block;
    }
}

.tabs {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.tab-nav {
    display: flex;
    gap: 4px;
    padding: 0 24px;
    border-bottom: 1px solid var(--btn-border-color);
    overflow-x: auto;
    scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    flex: 0 0 auto;
    padding: 14px 18px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--primary);
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.tab-content {
    padding: 24px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Helal Info Widget */
.helal-info-widget {
    display: flex;
    gap: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(145, 97, 241, 0.08) 0%, rgba(145, 97, 241, 0.02) 100%);
    border-radius: 12px;
    margin-bottom: 24px;
}

.helal-badge-large {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.helal-badge-large img {
    width: 64px;
    height: 64px;
}

.helal-badge-large .badge-content {
    display: flex;
    flex-direction: column;
}

.helal-badge-large .percentage {
    font-size: 32px;
    font-weight: 700;
    color: var(--accent-purple);
    line-height: 1;
}

.helal-badge-large .label {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary);
}

.helal-description p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .helal-info-widget {
        flex-direction: column;
        gap: 16px;
    }
}

/* Helal Categories */
.helal-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media screen and (max-width: 768px) {
    .helal-categories {
        grid-template-columns: 1fr;
    }
}

.helal-category {
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--btn-border-color);
    border-radius: 12px;
}

.helal-category .category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.helal-category .category-header i {
    font-size: 18px;
    color: var(--accent-purple);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-purple-light);
    border-radius: 8px;
}

.helal-category .category-header .title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--secondary);
}

.helal-category .category-header .percentage {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-purple);
}

.helal-category .category-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.helal-category .feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-dark);
}

.helal-category .feature i {
    color: var(--success);
    font-size: 12px;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media screen and (max-width: 768px) {
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.info-item {
    padding: 16px;
    background: var(--bg-light);
    border-radius: 8px;
}

.info-item .info-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.info-item .info-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--secondary);
}

.general-description h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary);
    margin: 0 0 12px 0;
}

.general-description p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.7;
    margin: 0 0 12px 0;
}

.general-description p:last-child {
    margin-bottom: 0;
}

/* Facilities Grid */
.facilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media screen and (max-width: 991px) {
    .facilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 576px) {
    .facilities-grid {
        grid-template-columns: 1fr;
    }
}

.facility-category {
    padding: 16px;
    background: var(--bg-light);
    border-radius: 12px;
}

.facility-category h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--secondary);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.facility-category h4 i {
    color: var(--accent-purple);
}

.facility-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.facility-category ul li {
    font-size: 13px;
    color: var(--text-gray);
    padding: 6px 0;
    border-bottom: 1px solid var(--btn-border-color);
}

.facility-category ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Location Info */
.location-info .address-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 12px;
    margin-bottom: 20px;
}

.location-info .address-box i {
    font-size: 20px;
    color: var(--primary);
    margin-top: 2px;
}

.location-info .address-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.location-info .address-text strong {
    font-size: 15px;
    color: var(--secondary);
}

.location-info .address-text span {
    font-size: 13px;
    color: var(--text-gray);
}

.location-info .distances {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.location-info .distance-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-gray);
}

.location-info .distance-item i {
    color: var(--accent-purple);
}

.location-info .map-container {
    border-radius: 12px;
    overflow: hidden;
    height: 300px;
}

.location-info .map-container iframe {
    width: 100%;
    height: 100%;
}

/* Location Popup */
.location-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: none;
}

.location-popup.active {
    display: block;
}

.location-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay);
    backdrop-filter: blur(4px);
}

.location-popup .location-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
}

.location-popup .popup-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.location-popup .popup-header .desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-popup .popup-header .desktop .title {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary);
}

.location-popup .popup-header .desktop .close {
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
}

.location-popup .popup-header .mobile {
    display: none;
    align-items: center;
    gap: 12px;
}

.location-popup .popup-header .mobile .back {
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
}

.location-popup .popup-header .mobile .title {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary);
}

.location-popup .popup-map {
    height: 400px;
}

.location-popup .popup-map iframe {
    width: 100%;
    height: 100%;
}

.location-popup .popup-address {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.location-popup .popup-address strong {
    font-size: 15px;
    color: var(--secondary);
}

.location-popup .popup-address span {
    font-size: 13px;
    color: var(--text-gray);
}

.location-popup .popup-address span i {
    color: var(--primary);
    margin-right: 6px;
}

@media screen and (max-width: 768px) {
    .location-popup .location-inner {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        max-width: none;
        border-radius: 0;
    }

    .location-popup .popup-header .desktop {
        display: none;
    }

    .location-popup .popup-header .mobile {
        display: flex;
    }

    .location-popup .popup-map {
        height: calc(100vh - 140px);
    }
}

/* Gallery Modal */
.room-detail-gallery {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--white);
    z-index: 100001;
    display: none;
    overflow-y: auto;
}

.room-detail-gallery.active {
    display: block;
}

.room-detail-gallery .heading-mobile {
    display: none;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
}

@media screen and (max-width: 768px) {
    .room-detail-gallery .heading-mobile {
        display: flex;
    }
}

.room-detail-gallery .heading-mobile .close {
    font-size: 22px;
    color: var(--text-light);
    cursor: pointer;
}

.room-detail-gallery .heading-mobile .title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-dark);
}

.room-detail-gallery .heading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px 30px;
    position: relative;
}

@media screen and (max-width: 768px) {
    .room-detail-gallery .heading {
        display: none;
    }
}

.room-detail-gallery .heading .title {
    font-size: 32px;
    font-weight: 400;
    color: var(--secondary);
}

.room-detail-gallery .heading .close {
    cursor: pointer;
    font-size: 32px;
    color: var(--secondary);
    position: absolute;
    right: 30px;
}

/* Gallery Summary */
.room-detail-gallery .gallery-summary {
    border-radius: 12px;
    border: 1px solid var(--btn-border-color);
    background: var(--white);
    padding: 16px;
    box-shadow: 0 14px 34px 0 rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 100px;
}

.room-detail-gallery .gallery-summary .summary-inner {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.room-detail-gallery .gallery-summary .summary-inner .first {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.room-detail-gallery .gallery-summary .summary-inner .first .room {
    font-size: 14px;
    font-weight: 400;
    color: var(--secondary);
}

.room-detail-gallery .gallery-summary .summary-inner .first .room strong {
    font-weight: 700;
}

.room-detail-gallery .gallery-summary .summary-inner .first .day {
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary);
}

.room-detail-gallery .gallery-summary .summary-inner .first .day::after {
    width: 18px;
    height: 3px;
    border-radius: 8px;
    background: var(--divider);
    display: block;
    content: "";
    margin-top: 8px;
}

.room-detail-gallery .gallery-summary .summary-inner .first .price {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    color: var(--success);
    margin-bottom: 14px;
}

.room-detail-gallery .gallery-summary .summary-inner .button {
    margin-bottom: 12px;
}

.room-detail-gallery .gallery-summary .summary-inner .button:last-child {
    margin-bottom: 0;
}

.room-detail-gallery .gallery-summary .summary-inner .button a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    border-radius: 8px;
    background: var(--success);
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}

.room-detail-gallery .gallery-summary .summary-inner .button a:hover {
    background: var(--success-hover);
}

.room-detail-gallery .gallery-summary .summary-inner .button.room-button a {
    background: var(--white);
    color: var(--text-dark);
    border: 2px solid var(--text-dark);
}

.room-detail-gallery .gallery-summary .summary-inner .button.room-button a:hover {
    background: var(--bg-light);
}

/* Gallery Total Summary (Mobile) */
.room-detail-gallery .gallery-summary .total-summary {
    display: none;
}

.gallery-hotel-title {
    display: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 16px;
    padding: 0 16px;
}

@media screen and (max-width: 768px) {
    .gallery-hotel-title {
        display: block;
    }
}

.gallery-inner .gallery-item {
    display: none;
}

.gallery-inner .gallery-item.active {
    display: block;
}

.gallery-detail-image {
    position: relative;
    margin-bottom: 16px;
}

.gallery-detail-image .arrow-buttons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -25px;
    right: -25px;
    display: flex;
    justify-content: space-between;
    z-index: 10;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .gallery-detail-image .arrow-buttons {
        display: none;
    }
}

.gallery-detail-image .arrow-buttons a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.2s;
    color: var(--text-dark);
    text-decoration: none;
}

.gallery-detail-image .arrow-buttons a:hover {
    background: var(--secondary);
    color: var(--white);
}

.gallery-swiper-image {
    overflow: hidden;
    position: relative;
}

.gallery-swiper-image .number-pag {
    position: absolute;
    top: 16px;
    right: 16px;
    border-radius: 100px;
    background: rgba(33, 33, 33, 0.5);
    color: var(--white);
    font-size: 11px;
    font-weight: 500;
    padding: 6px 12px;
    z-index: 10;
    display: flex;
    align-items: center;
}

.gallery-swiper-image .swiper-slide {
    height: 500px;
}

.gallery-swiper-image img {
    border-radius: 12px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .gallery-swiper-image .swiper-slide {
        height: 300px;
    }

    .gallery-swiper-image img {
        border-radius: 0;
    }
}

/* Gallery Tab Head */
.gallery-item .tab-head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

.gallery-item .tab-head a {
    padding: 11px 14px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--btn-border-color);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.gallery-item .tab-head a:hover,
.gallery-item .tab-head a.active {
    color: var(--primary);
    border-color: var(--primary);
}

.gallery-item .tab-head a strong {
    font-weight: 700;
    margin-left: 4px;
}

/* Gallery Thumbs */
.gallery-detail-image-thumbs {
    position: relative;
}

.gallery-detail-image-thumbs .arrow-buttons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -25px;
    right: -25px;
    display: flex;
    justify-content: space-between;
    z-index: 10;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .gallery-detail-image-thumbs .arrow-buttons {
        display: none;
    }
}

.gallery-detail-image-thumbs .arrow-buttons a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    pointer-events: auto;
    font-size: 12px;
    color: var(--text-dark);
    text-decoration: none;
}

.gallery-swiper-thumb-image {
    overflow: hidden;
}

.gallery-swiper-thumb-image .swiper-slide {
    cursor: pointer;
    height: 70px;
}

.gallery-swiper-thumb-image .swiper-slide img {
    border-radius: 8px;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-swiper-thumb-image .swiper-slide.swiper-slide-thumb-active img {
    border-color: var(--secondary);
}

/* Room Gallery Modal */
.room-gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100002;
    display: none;
}

.room-gallery-modal.active {
    display: block;
}

.room-gallery-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay);
    backdrop-filter: blur(4px);
}

.room-gallery-modal .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
}

.room-gallery-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.room-gallery-modal .modal-header .desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.room-gallery-modal .modal-header .desktop .title {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary);
}

.room-gallery-modal .modal-header .desktop .close-btn {
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
}

.room-gallery-modal .modal-header .mobile {
    display: none;
    align-items: center;
    gap: 12px;
}

.room-gallery-modal .modal-header .mobile .back-btn {
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
}

.room-gallery-modal .modal-header .mobile .title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-dark);
}

.room-gallery-modal .modal-body {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.room-gallery-modal .room-gallery-swiper {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.room-gallery-modal .room-gallery-swiper .swiper-slide {
    height: 350px;
}

.room-gallery-modal .room-gallery-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room-gallery-modal .room-gallery-swiper .arrow-buttons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    z-index: 10;
    pointer-events: none;
}

.room-gallery-modal .room-gallery-swiper .arrow-buttons a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    pointer-events: auto;
    color: var(--text-dark);
    text-decoration: none;
}

.room-gallery-modal .room-info {
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.room-gallery-modal .room-info .room-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary);
}

.room-gallery-modal .room-info .room-board {
    font-size: 13px;
    color: var(--text-muted);
}

.room-gallery-modal .room-info .room-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--success);
}

.room-gallery-modal .room-info .select-room-btn {
    margin-top: auto;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .room-gallery-modal .modal-content {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        max-width: none;
        border-radius: 0;
    }

    .room-gallery-modal .modal-header .desktop {
        display: none;
    }

    .room-gallery-modal .modal-header .mobile {
        display: flex;
    }

    .room-gallery-modal .modal-body {
        flex-direction: column;
        padding: 16px;
    }

    .room-gallery-modal .room-info {
        width: 100%;
    }

    .room-gallery-modal .room-gallery-swiper .swiper-slide {
        height: 250px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .room-list-inner .item {
        flex-direction: column;
    }

    .room-list-inner .item .room-list .room {
        flex-direction: column;
        align-items: flex-start;
    }

    .room-list-inner .item .room-list .room .mobile-heading {
        display: block;
        width: 100%;
    }

    .room-list-inner .item .room-list .room .room-inner-detail .last .heading {
        display: none;
    }

    .room-list-inner .item .room-list .room .room-inner-detail .first .image {
        width: 100%;
        height: 120px;
    }

    .room-list-inner .item .room-detail {
        border-radius: 0 0 8px 8px;
        justify-content: space-between;
        border-left: none;
        border-top: 1px solid var(--btn-border-color);
        width: 100%;
    }

    /* Booking Summary Mobile */
    .booking-summary {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        position: static !important;
    }

    .booking-summary .summary-inner {
        display: none !important;
    }

    .booking-summary .summary-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 998;
    }

    .booking-summary.active .summary-overlay {
        display: block;
    }

    .booking-summary.active .summary-inner {
        border-radius: 16px 16px 0 0;
        display: flex !important;
        flex-direction: column;
        position: fixed;
        left: 0;
        bottom: 60px;
        background: var(--white);
        width: 100%;
        padding: 16px !important;
        z-index: 1000;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }

    .booking-summary .heading .desktop {
        display: none;
    }

    .booking-summary .heading .mobile {
        display: flex;
    }

    .booking-summary .total-summary {
        flex-direction: row;
        border-top: 1px solid var(--btn-border-color);
        background: var(--white);
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 12px 16px;
        z-index: 999;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .booking-summary .total-summary .first {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .booking-summary .total-summary .first .day {
        font-size: 12px;
        font-weight: 700;
        color: var(--secondary);
    }

    .booking-summary .total-summary .first .day::after {
        width: 18px;
        height: 3px;
        border-radius: 8px;
        background: var(--divider);
        display: block;
        content: "";
        margin-top: 4px;
    }

    .booking-summary .total-summary .first .price {
        margin-bottom: 0;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--success);
    }

    .booking-summary .total-summary .arrow-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        cursor: pointer;
        gap: 0;
        line-height: 1;
    }

    .booking-summary .total-summary .arrow-btn i {
        font-size: 14px;
        color: var(--text-dark);
    }

    .booking-summary.active .total-summary {
        z-index: 1001;
    }

    .booking-summary .total-summary .button a {
        padding: 12px 20px;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Guest Dropdown Mobile */
    .filter-dropdown.guest-dropdown {
        width: 100%;
        position: fixed;
        left: 0;
        top: auto;
        bottom: 0;
        z-index: 999999;
        height: auto;
        max-height: calc(100vh - 10px);
        border-radius: 20px 20px 0 0;
    }

    .filter-dropdown.guest-dropdown .mobile-heading {
        display: flex;
    }

    .filter-dropdown.guest-dropdown .submit-button {
        display: block;
    }

    body.guest-overlay-open::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--overlay);
        backdrop-filter: blur(4px);
        z-index: 999998;
    }

    /* Date Picker Mobile - Full Screen */
    .date-filter .date-picker-container {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: var(--white);
        z-index: 999999 !important;
        display: none;
        flex-direction: column;
    }

    .date-filter .date-picker-container.active {
        display: flex;
    }

    /* Mobile Date Header */
    .date-filter .date-picker-container .mobile-date-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid var(--bg-light);
    }

    .date-filter .date-picker-container .mobile-date-header .reset-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        color: var(--error-hover);
        font-size: 14px;
    }

    .date-filter .date-picker-container .mobile-date-header .reset-btn span {
        font-size: 14px;
        font-weight: 500;
    }

    .date-filter .date-picker-container .mobile-date-header .close-btn {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        color: var(--text-placeholder);
        font-size: 22px;
    }

    /* Mobile Date Display */
    .date-filter .date-picker-container .mobile-date-display {
        display: flex;
        align-items: center;
        padding: 0;
        gap: 0;
        background: var(--white);
        border: 1px solid var(--text-dark);
        border-radius: 8px;
        margin: 16px;
        position: relative;
    }

    .date-filter .date-picker-container .mobile-date-display .date-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 10px 12px;
    }

    .date-filter .date-picker-container .mobile-date-display .date-item.checkin-display {
        padding-right: 20px;
        border-right: 1px solid var(--text-dark);
    }

    .date-filter .date-picker-container .mobile-date-display .date-item.checkout-display {
        padding-left: 20px;
    }

    .date-filter .date-picker-container .mobile-date-display .date-item label {
        font-size: 10px;
        font-weight: 700;
        color: var(--text-muted);
        margin-bottom: 2px;
    }

    .date-filter .date-picker-container .mobile-date-display .date-item .date-value {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-dark);
    }

    .date-filter .date-picker-container .mobile-date-display .date-item .date-value.placeholder {
        color: var(--text-placeholder);
    }

    .date-filter .date-picker-container .mobile-date-display .date-separator {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        background: var(--white);
        border: 1px solid var(--text-dark);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-dark);
        font-size: 12px;
        z-index: 2;
    }

    /* Lightpick inside container */
    .date-filter .date-picker-container .lightpick {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        flex: 1;
        overflow-y: auto;
    }

    .date-filter .date-picker-container .lightpick .lightpick__months {
        grid-template-columns: 1fr;
    }

    .date-filter .date-picker-container .lightpick .lightpick__month {
        width: 100% !important;
    }

    .date-filter .date-picker-container .lightpick .lightpick__month:last-child {
        display: block;
    }

    .date-filter .date-picker-container .lightpick .lightpick__days {
        grid-gap: 2px;
    }

    .date-filter .date-picker-container .lightpick .lightpick__month-title select {
        font-size: 14px;
    }

    .date-filter .date-picker-container .lightpick .lightpick__day-of-the-week {
        font-size: 10px !important;
        height: 28px;
    }

    .date-filter .date-picker-container .lightpick .lightpick__day {
        font-size: 12px;
        height: 38px;
        width: 44px;
    }

    .date-filter .date-picker-container .lightpick .result-button {
        display: none;
    }

    /* Mobile Apply Button */
    .date-filter .date-picker-container .mobile-date-apply {
        display: block;
        padding: 16px;
        background: var(--white);
        border-top: 1px solid var(--btn-border-color);
        order: 99;
        flex-shrink: 0;
    }

    .date-filter .date-picker-container .mobile-date-apply button {
        width: 100%;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: var(--secondary);
        color: var(--white);
        gap: 4px;
        padding: 12px 8px;
        border: none;
    }

    .date-filter .date-picker-container .mobile-date-apply button span {
        color: var(--primary);
        font-size: 11px;
        font-weight: 700;
    }

    /* Date item with value - green background */
    .date-filter .date-picker-container .mobile-date-display .date-item.has-value {
        background: var(--success-bg);
        border-radius: 8px;
    }
}

@media (max-width: 767px) {
    .hotel-detail-page .breadcrumb {
        display: none;
    }

    .hotel-details {
        padding: 24px 0 100px;
    }

    .tabs {
        border-radius: 8px;
    }

    .tab-nav {
        padding: 0 16px;
    }

    .tab-btn {
        padding: 12px 14px;
        font-size: 13px;
    }

    .tab-content {
        padding: 16px;
    }
}

/* Hotel Attr - Tesis Bilgileri */
.hotel-attr {
    padding: 40px 0;
    background: var(--white);
}

.hotel-attr .heading .desktop {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 16px;
}

.hotel-attr .heading .mobile {
    display: none;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
}

.hotel-attr .heading .mobile .title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-dark);
}

.hotel-attr .heading .mobile .close {
    font-size: 22px;
    color: var(--text-placeholder);
    cursor: pointer;
}

.hotel-attr .tab-inner .tab-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hotel-attr .tab-inner .tab-head::-webkit-scrollbar {
    display: none;
}

.hotel-attr .tab-inner .tab-head a {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    border: none;
    border-bottom: 2px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
}

.hotel-attr .tab-inner .tab-head a span {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.hotel-attr .tab-inner .tab-head a:hover {
    color: var(--primary);
}

.hotel-attr .tab-inner .tab-head a.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.hotel-attr .tab-inner .tab-body .item {
    display: none;
}

.hotel-attr .tab-inner .tab-body .item.active {
    display: block;
}

/* Helal Widget in Tabs */
.hotel-attr .helal-widget {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
    background: var(--accent-purple-light);
    border: 1px solid var(--accent-purple-border);
    border-radius: 12px;
    margin-bottom: 24px;
}

.hotel-attr .helal-widget .icon {
    flex-shrink: 0;
    width: 160px;
}

.hotel-attr .helal-widget .icon img {
    width: 100%;
    height: auto;
}

.hotel-attr .helal-widget .text {
    flex: 1;
    margin-top:16px;
}

.hotel-attr .helal-widget .text .title {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 12px;
}

.hotel-attr .helal-widget .text .desc {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.6;
}

/* List Inner */
.hotel-attr .list-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hotel-attr .list-inner .list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--white);
}

.hotel-attr .list-inner .list-item .heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 12px;
}

.hotel-attr .list-inner .list-item .body {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-dark);
}

.hotel-attr .list-inner .list-item .body .child-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hotel-attr .list-inner .list-item .body .child-item .child-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hotel-attr .list-inner .list-item .body .child-item .child-list span {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hotel-attr .list-inner .list-item .body .child-item .child-list span::before {
    content: '•';
    color: var(--text-muted);
}

.hotel-attr .list-inner .list-item .body .child-item .child-list span.bold {
    font-weight: 700;
    color: var(--text-dark);
}

/* Amenity List */
.hotel-attr .amenity-list {
    display: flex;
    flex-direction: column;
}

.hotel-attr .amenity-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.hotel-attr .amenity-item {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 2;
}

/* Mobile Styles */
@media screen and (max-width: 767px) {
    .hotel-attr {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: var(--white);
        display: none;
        flex-direction: column;
        padding: 0;
    }

    .hotel-attr.active {
        display: flex;
    }

    .hotel-attr .container {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0;
    }

    .hotel-attr .heading .desktop {
        display: none;
    }

    .hotel-attr .heading .mobile {
        display: flex;
    }

    .hotel-attr .tab-inner {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
    }

    .hotel-attr .tab-inner .tab-head {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 16px;
        margin-bottom: 0;
        gap: 8px;
    }

    .hotel-attr .tab-inner .tab-head a {
        flex: 0 0 auto;
        padding: 14px 12px;
    }

    .hotel-attr .tab-inner .tab-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        padding-bottom: 100px;
    }

    .hotel-attr .helal-widget {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .hotel-attr .helal-widget .icon {
        width: 100px;
    }

    .hotel-attr .helal-widget .text .title {
        font-size: 16px;
    }

    .hotel-attr .helal-widget .text .desc {
        font-size: 14px;
    }

    .hotel-attr .helal-widget .icon {
        width: 60px;
    }
}