/* ================================================
   Hotel Rooms Page - Sakura Hotels
   Luxury Horizontal List Design
   ================================================ */

.hr-page-wrapper {
    background-color: var(--clr-canvas);
    min-height: 100vh;
}

.hr-hero-section {
    background-color: var(--clr-surface-card);
    padding-bottom: var(--sp-section);
    text-align: center;
    padding-top: calc(var(--nav-height) + var(--sp-section));
}

.hr-container-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-gutter);
}

.hr-rooms-section {
    padding-bottom: var(--sp-section);
}

.hr-rooms-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-section);
}

.hr-img-wrapper {
    position: relative;
}

.hr-specs-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-lg);
    border-bottom: 1px solid var(--clr-hairline);
    padding-bottom: var(--sp-md);
    margin-bottom: var(--sp-md);
}

.hr-spec-item {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    color: var(--clr-mute);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
}

.hr-spec-icon {
    font-size: var(--fs-heading-sm);
}

.hr-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--sp-sm);
    margin-top: var(--sp-md);
}

.hr-amenity-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    color: var(--clr-body);
    font-size: var(--fs-caption-md);
}

.hr-amenity-icon {
    font-size: var(--fs-body-lg);
    color: var(--clr-mute);
}

.hr-actions-container {
    display: flex;
    gap: var(--sp-md);
    margin-top: var(--sp-xl);
    flex-wrap: wrap;
}

.hr-action-icon {
    margin-right: 4px;
    font-size: var(--fs-body-lg);
}

.hr-empty-icon {
    font-size: var(--fs-display-md);
    margin-bottom: var(--sp-md);
}

/* --- Accordion Variants --- */
.hr-variants-accordion {
    margin-top: var(--sp-xl);
    border-top: 1px solid var(--clr-hairline);
}

.hr-accordion-item {
    border-bottom: 1px solid var(--clr-hairline);
}

.hr-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-md) 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--clr-on-surface);
    transition: color 0.2s ease;
}

.hr-accordion-header:hover {
    color: var(--clr-primary);
}

.hr-accordion-title {
    font-family: var(--ff-primary);
    font-size: var(--fs-body-md);
    font-weight: var(--fw-semibold);
    text-transform: capitalize;
}

.hr-accordion-icon {
    font-size: var(--fs-heading-md);
    transition: transform 0.3s ease;
    color: var(--clr-on-surface-variant);
}

.hr-accordion-header[aria-expanded="true"] .hr-accordion-icon {
    transform: rotate(180deg);
}

.hr-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.hr-accordion-inner {
    padding-bottom: var(--sp-md);
    font-family: var(--ff-primary);
    font-size: var(--fs-body-sm);
    color: var(--clr-on-surface-variant);
    line-height: var(--lh-body-md);
}

/* --- Empty State --- */
.hr-empty-state {
    text-align: center;
    padding: var(--sp-xxl) 0;
    color: var(--clr-on-surface-variant);
    background: var(--clr-surface-card);
    border-radius: var(--rd-xl);
    border: 1px solid var(--clr-hairline);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .hr-actions-container {
        flex-direction: column;
    }
    .hr-actions-container > * {
        width: 100%;
    }
    .hr-amenities-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

@media (max-width: 480px) {
    .hr-specs-container {
        gap: var(--sp-md);
        flex-direction: column;
    }
    .hr-empty-icon {
    font-size: var(--fs-heading-xl);
    }
}

/* FAQ Section specific */
.hr-faq-section {
    padding-bottom: var(--sp-section);
}
.hr-faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--container-gutter);
}
.hr-faq-header {
    text-align: center;
    margin-bottom: var(--sp-xl);
}
.hr-faq-title {
    font-family: var(--ff-primary);
    font-size: var(--fs-heading-xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--sp-md);
}
.hr-faq-desc {
    color: var(--clr-body);
    font-family: var(--ff-primary);
}
.hr-faq-accordion {
    background: var(--clr-canvas);
    border-radius: var(--rd-md);
    border: 1px solid var(--clr-hairline);
    overflow: hidden;
}
.hr-faq-item {
    border-bottom: 1px solid var(--clr-hairline);
}
.hr-faq-item:last-child {
    border-bottom: none;
}
.hr-faq-header-btn {
    padding: var(--sp-lg);
}
.hr-faq-title-span {
    font-size: var(--fs-body-lg);
}
.hr-faq-inner {
    padding: 0 var(--sp-lg) var(--sp-lg) var(--sp-lg);
    color: var(--clr-body);
}