[data-ddnayo-room] {
    width: 100%;
    min-width: 0;
    background: #fff;
    color: #000;
    font-family: Arial, var(--font-suit, sans-serif);
    font-size: 13px;
    line-height: 1.5;
}

/* Hide only Ddnayo room scrollbars; retain native scrolling and edge chaining. */
[data-room-rate-fixed][data-rate-provider="ddnayo"],
[data-room-rate-panel][data-rate-provider="ddnayo"],
[data-ddnayo-room] {
    scrollbar-width: none;
    scrollbar-gutter: auto;
}

[data-room-rate-fixed][data-rate-provider="ddnayo"]::-webkit-scrollbar,
[data-room-rate-panel][data-rate-provider="ddnayo"]::-webkit-scrollbar,
[data-ddnayo-room]::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

[data-ddnayo-room] *,
[data-ddnayo-room] *::before,
[data-ddnayo-room] *::after { box-sizing: border-box; }

[data-ddnayo-room-title] {
    margin: 0 0 26px;
    padding: 0;
    font-family: inherit;
    font-size: 28px;
    font-weight: 400;
    line-height: 34px;
    text-align: center;
    overflow-wrap: anywhere;
}
[data-ddnayo-room-title][hidden] { display: none; }

[data-ddnayo-room-price],
[data-ddnayo-room-info] {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

[data-ddnayo-room-price] :is(.week_date, [data-ddnayo-room-controls]) {
    display: grid;
    grid-template-columns: 20px minmax(0, max-content) 20px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 22px;
    margin: 0 0 12px;
    padding: 0;
    text-align: center;
}
[data-ddnayo-room-price] :is(.week_date, [data-ddnayo-room-controls]) > p {
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    word-break: keep-all;
}
[data-ddnayo-room-price] :is(.prv, .next) {
    position: relative;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c2a380;
    color: #fff;
    font-size: 0;
    cursor: pointer;
    touch-action: manipulation;
}
[data-ddnayo-room-price] :is(.prv, .next)::before {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    content: '';
}
[data-ddnayo-room-price] .prv::before { border-right: 6px solid #fff; transform: translateX(-1px) translateY(50%); }
[data-ddnayo-room-price] .next::before { border-left: 6px solid #fff; transform: translateX(1px) translateY(50%); }
/* Keep the reference's 20px circles while providing a larger touch target. */
[data-ddnayo-room-price] :is(.prv, .next)::after { inset: -5px; content: ''; }
[data-ddnayo-room-price] :is(.prv, .next):hover { background: #ab8c6a; }
[data-ddnayo-room-price] :is(.prv, .next):focus-visible { outline: 2px solid #735b40; outline-offset: 3px; }

/* The official room API uses .room_rprice, not the total-rate .rsv_cal_* tables. */
[data-ddnayo-room-price] .room_rprice { width: 100%; min-width: 0; margin: 0; padding: 0; }
[data-ddnayo-room-price] table {
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid #8f8f8f;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11px;
    line-height: 12px;
    text-align: center;
}
[data-ddnayo-room-price] :is(th, td) {
    width: 20%;
    padding: 10px 2px;
    border: 0;
    border-bottom: 1px solid #8f8f8f;
    vertical-align: middle;
    font-size: inherit;
    font-weight: 400;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
[data-ddnayo-room-price] :is(tr, p) { margin: 0; padding: 0; }
[data-ddnayo-room-price] .head { background: #ededed; }
[data-ddnayo-room-price] .head td { padding-top: 10px; padding-bottom: 10px; }
[data-ddnayo-room-price] .head .satur { color: #0000ff; }
[data-ddnayo-room-price] .head .sun { color: #ff0000; }
[data-ddnayo-room-price] .ss td { padding-top: 15px; padding-bottom: 15px; }
[data-ddnayo-room-price] .rprice td { padding-top: 15px; padding-bottom: 15px; }
[data-ddnayo-room-price] .rprice .dc { color: #ff0c00; font-size: 11px; line-height: 12px; }
[data-ddnayo-room-price] .rprice .rate { color: #b3b3b3; font-size: 11px; line-height: 12px; text-decoration: line-through; }
[data-ddnayo-room-price] .rprice .sale { color: #000; font-size: 14px; font-weight: 700; line-height: 17px; white-space: nowrap; }
[data-ddnayo-room-price] .state td { padding-top: 10px; padding-bottom: 10px; }
[data-ddnayo-room-price] .state .rstate { font-size: 11px; line-height: 12px; }
[data-ddnayo-room-price] .state .son { color: #6d9fc5; }
[data-ddnayo-room-price] .state .soff { color: #c6c6c6; }

/* Both layouts show the room name above the price table, without repeating it below. */
[data-ddnayo-room-info] .room_tit { display: none; }
[data-ddnayo-room-info] .room_data {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
}
[data-ddnayo-room-info] .room_data > li { display: block; min-width: 0; margin: 0; padding: 0; border: 0; text-align: left; }
[data-ddnayo-room-info] .room_data .tit { padding: 15px 0 5px; border-bottom: 1px solid #222; color: #222; font-size: 15px; font-weight: 400; line-height: 18px; }
[data-ddnayo-room-info] .room_data .data { padding: 15px 0; font-size: 13px; line-height: 1.5; }
[data-ddnayo-room-info] .room_data p { margin: 0; padding: 0; }
[data-ddnayo-room-info] .person_limit table { width: 100%; margin-top: 5px; border-collapse: collapse; table-layout: fixed; font-size: 12px; line-height: 18px; text-align: center; }
[data-ddnayo-room-info] .person_limit :is(th, td) { padding: 5px 2px; border: 1px solid #222; background: #fff; font-weight: 400; overflow-wrap: anywhere; }
[data-ddnayo-room-info] .person_limit :is(th, td):first-child { width: 28.5%; }
[data-ddnayo-room-info] img { max-width: 100%; height: auto; }
[data-ddnayo-room-status] { display: grid; place-items: center; min-height: 120px; margin: 0; padding: 24px; border: 1px solid #e2e2e2; color: #777; text-align: center; }
[data-ddnayo-room] .is-error > [data-ddnayo-room-status] { color: #8b3a32; background: #fff8f7; }