/*
 * Hotel page (/hotel/{slug}). Same system as the home and result pages (tokens.css): neutral paper, the production orange for the
 * action and the price, Plus Jakarta Sans, and the ticket: a room is a ticket with its price and its two actions on the stub, the
 * price summary is a ticket too. Everything else is quiet: photos carry the page, panels are flat.
 * Markup: resources/views/hotel/page.blade.php and resources/views/hotel/partials/*.
 */
.hp { background: var(--wj-paper); color: var(--wj-ink); font-family: var(--wj-font); font-size: 14px; line-height: 1.5; padding: 20px 0 64px; }
.hp *:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) { font-family: var(--wj-font) !important; }
.hp a:focus-visible, .hp button:focus-visible, .hp input:focus-visible { outline: 3px solid var(--wj-focus); outline-offset: 2px; }
.hp-section { margin: 0 0 40px; scroll-margin-top: 16px; }
.hp-h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; color: var(--wj-ink); }
.hp-sub { margin: 0 0 16px; padding: 0; color: var(--wj-ink-2); }

/* title */
.hp-head { margin: 0 0 16px; }
.hp-title { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--wj-ink); }
.hp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; color: var(--wj-ink-2); }
.hp .rs-stars { display: inline-flex; gap: 2px; }
.hp .rs-stars svg { width: 16px; height: 16px; fill: var(--wj-star); }
.hp-rating { padding: 1px 9px; border-radius: 8px; background: var(--wj-teal-tint); color: var(--wj-teal-ink); font-weight: 800; text-decoration: none; }
.hp-reviews { margin-left: -6px; }
.hp-place { display: inline-flex; align-items: center; gap: 6px; }
.hp-place svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* photos: one large and four small on a desktop, a swipe row on a phone; one click opens all of them */
.hp-gallery {
    position: relative; display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 200px 200px; width: 100%; margin: 0 0 20px; padding: 0;
    overflow: hidden; border: 0; border-radius: 18px; background: none; cursor: pointer;
}
.hp-gallery .hp-photo { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--wj-line-soft); }
.hp-gallery .hp-photo:first-child { grid-row: 1 / span 2; }
.hp-gallery[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: 400px; }
.hp-gallery[data-count="1"] .hp-photo:first-child, .hp-gallery[data-count="2"] .hp-photo:first-child { grid-row: auto; }
.hp-gallery[data-count="2"] { grid-template-columns: 2fr 1fr; grid-template-rows: 400px; }
.hp-gallery[data-count="3"] { grid-template-columns: 2fr 1fr; }
.hp-gallery[data-count="4"] { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); height: 420px; }
.hp-gallery[data-count="4"] .hp-photo:first-child { grid-row: 1 / span 3; }
.hp-gallery-none { grid-template-columns: 1fr; grid-template-rows: 260px; cursor: default; }
.hp-gallery-none img { width: 100%; height: 100%; object-fit: contain; background: var(--wj-line-soft); }
.hp-photo-count {
    position: absolute; right: 14px; bottom: 14px; padding: 8px 14px; border-radius: 10px; background: var(--wj-card); color: var(--wj-ink); font-size: 13px; font-weight: 700;
    box-shadow: 0 4px 14px rgba(37, 37, 37, .28); /* it sits on top of a photo, so it is lifted off it */
}

/* the stay: what the prices below are for */
.hp-stay { margin: 0 0 28px; padding: 14px 18px; border: 1px solid var(--wj-line); border-radius: 16px; background: var(--wj-card); }
.hp-stay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; }
.hp-stay-item { display: grid; gap: 1px; min-width: 0; }
.hp-stay-label { color: var(--wj-ink-2); font-size: 12px; font-weight: 600; }
.hp-stay-item strong { font-size: 15px; font-weight: 700; }
.hp-btn { margin-left: auto; padding: 9px 16px; border: 1px solid var(--wj-line-strong); border-radius: 10px; background: var(--wj-card); color: var(--wj-ink); font: inherit; font-weight: 700; cursor: pointer; }
.hp-btn:hover { border-color: var(--wj-ink); }
.hp-btn-main { border-color: var(--wj-orange, #F24C00); background: var(--wj-orange, #F24C00); color: #fff; }
.hp-btn-main:hover { border-color: var(--wj-orange-dark); background: var(--wj-orange-dark); }
.hp-stay-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--wj-line-strong); }
.hp-stay-form[hidden], .hp-stay-error[hidden] { display: none; }
.hp-field label { display: block; margin: 0 0 4px; color: var(--wj-ink-2); font-size: 12px; font-weight: 600; }
.hp-field input { padding: 9px 12px; border: 1px solid var(--wj-line-strong); border-radius: 10px; background: var(--wj-card); color: var(--wj-ink); font: inherit; font-weight: 600; }
.hp-stay-actions { display: flex; gap: 8px; }
.hp-stay-actions .hp-btn { margin-left: 0; }
.hp-stay-error { width: 100%; color: var(--wj-danger-ink); font-size: 13px; }

/* main column and the price summary */
.hp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.hp-main { grid-column: 1; min-width: 0; }
.hp-aside { position: sticky; top: 24px; grid-column: 2; grid-row: 1; display: grid; overflow: hidden; border: 1px solid var(--wj-line); border-radius: 18px; background: var(--wj-card); }
.hp-aside-price { display: grid; gap: 2px; padding: 20px 20px 16px; }
.hp-from { color: var(--wj-ink); font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hp-from-none { font-size: 17px; letter-spacing: 0; }
.hp-aside-stub { position: relative; padding: 16px 20px 20px; border-top: 2px dashed var(--wj-line-strong); background: var(--wj-orange-tint); }
.hp-aside-stub::before, .hp-aside-stub::after { content: ""; position: absolute; top: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--wj-paper); box-shadow: inset 0 0 0 1px var(--wj-line); }
.hp-aside-stub::before { left: -15px; }
.hp-aside-stub::after { right: -15px; }
.hp-cta { display: block; width: 100%; padding: 14px 18px; border: 0; border-radius: 12px; background: var(--wj-orange, #F24C00); color: #fff; font: inherit; font-size: 15px; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s; }
.hp-cta:hover { background: var(--wj-orange-dark); color: #fff; }
.hp-note { color: var(--wj-ink-2); font-size: 12.5px; }

/* a room is a ticket */
.hp-room { display: grid; grid-template-columns: 220px minmax(0, 1fr) 224px; margin: 0 0 14px; overflow: hidden; border: 1px solid var(--wj-line); border-radius: 18px; background: var(--wj-card); }
.hp-room-photo { position: relative; margin: 10px; min-height: 170px; overflow: hidden; border-radius: 12px; background: var(--wj-line-soft); }
.hp-room-photo button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.hp-room-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-room-count { position: absolute; left: 8px; bottom: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(37, 37, 37, .78); color: #fff; font-size: 12px; font-weight: 700; }
.hp-room-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 8px 16px 6px; }
.hp-room-name { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
.hp-room-spec, .hp-room-fac { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.hp-room-spec li { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.hp-room-spec svg { width: 16px; height: 16px; fill: none; stroke: var(--wj-ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-room-fac li { display: inline-flex; align-items: center; gap: 6px; color: var(--wj-ink-2); font-size: 13px; }
.hp-room-fac img { width: 16px; height: 16px; object-fit: contain; }
.hp-room-status { margin: auto 0 0; padding: 0; font-size: 13px; font-weight: 700; }
.hp-room-status.is-few { color: var(--wj-orange-ink); }
.hp-room-status.is-off { color: var(--wj-danger-ink); }
.hp-room-stub { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 18px 18px 18px 22px; border-left: 2px dashed var(--wj-line-strong); background: var(--wj-orange-tint); }
.hp-room-stub::before, .hp-room-stub::after { content: ""; position: absolute; left: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--wj-paper); box-shadow: inset 0 0 0 1px var(--wj-line); }
.hp-room-stub::before { top: -15px; }
.hp-room-stub::after { bottom: -15px; }
.hp-was { color: var(--wj-ink-2); font-size: 13px; }
.hp-price { color: var(--wj-ink); font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hp-room-actions { display: grid; gap: 8px; margin-top: 14px; }
.hp .btn-order { padding: 11px 14px; border: 0; border-radius: 12px; background: var(--wj-orange, #F24C00); color: #fff !important; font-size: 14px; font-weight: 800; }
.hp .btn-order:hover:not(:disabled) { background: var(--wj-orange-dark); }
.hp .btn-order:disabled { background: var(--wj-line-strong); color: var(--wj-ink-2) !important; cursor: not-allowed; opacity: 1; }
.hp .btn-primary-outline { padding: 9px 14px; border: 1px solid var(--wj-line-strong); border-radius: 12px; background: var(--wj-card); color: var(--wj-ink) !important; font-size: 14px; font-weight: 700; }
.hp .btn-primary-outline:hover { border-color: var(--wj-ink); }
.hp-room.is-off .hp-room-photo img { filter: grayscale(1); opacity: .6; }
.hp-room.is-off .hp-room-stub { background: var(--wj-fill); }
.hp-room.is-off .hp-price { color: var(--wj-ink-2); }
.hp-empty { margin: 0; padding: 26px 20px; border: 1px dashed var(--wj-line-strong); border-radius: 18px; background: var(--wj-card); color: var(--wj-ink-2); text-align: center; font-size: 15px; }

/* the other blocks keep their own markup (reviews, map, facilities, description, terms) and only change clothes */
.hp-panel { margin: 0 0 28px; padding: 22px 24px; border: 1px solid var(--wj-line) !important; border-radius: 18px !important; background: var(--wj-card); box-shadow: none !important; }
.hp-panel > .card-body { padding: 0; }
.hp-panel .card-title { margin: 0 0 12px; padding: 0; font-size: 22px; line-height: 1.25; font-weight: 800 !important; letter-spacing: -.015em; color: var(--wj-ink); }
.hp-panel p, .hp-panel .card-text { padding: 0; color: var(--wj-ink); }
.hp-panel iframe { display: block; margin-top: 12px; border-radius: 14px; }
.hp-panel .btn-walanja { border: 0; border-radius: 10px; background: var(--wj-teal-ink) !important; }
.hp-panel .text-walanja { color: var(--wj-orange-ink) !important; }
.hp-panel .text-muted { color: var(--wj-ink-2) !important; }
.hp-panel a[onclick] { color: var(--wj-orange-ink) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (max-width: 991.98px) {
    .hp-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hp-main { grid-column: 1; }
    /* the price summary is a bar at the bottom of the screen */
    .hp-aside {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1030; grid-column: auto; grid-row: auto; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--wj-line); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 24px -14px rgba(37, 37, 37, .4);
    }
    .hp-aside-price { padding: 0; }
    .hp-from { font-size: 20px; }
    .hp-from-none { font-size: 14px; }
    .hp-aside-stub { padding: 0; border: 0; background: none; }
    .hp-aside-stub::before, .hp-aside-stub::after { display: none; }
    .hp-cta { width: auto; padding: 12px 22px; }
    body.hp-has-aside .wa-button-container { bottom: 92px !important; }
}

@media (max-width: 767.98px) {
    .hp { padding-top: 12px; }
    .hp-title { font-size: 24px; }
    .hp-gallery { display: flex; height: auto; margin-bottom: 16px; overflow-x: auto; border-radius: 14px; gap: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .hp-gallery::-webkit-scrollbar { display: none; }
    .hp-gallery .hp-photo, .hp-gallery[data-count] .hp-photo { flex: 0 0 88%; height: 240px; border-radius: 12px; scroll-snap-align: start; }
    .hp-gallery[data-count="1"] .hp-photo { flex-basis: 100%; }
    .hp-gallery-none { display: grid; }
    .hp-photo-count { right: 10px; bottom: 10px; padding: 6px 12px; }
    .hp-stay { padding: 12px 14px; }
    .hp-btn { margin-left: 0; }
    .hp-room { grid-template-columns: 1fr; }
    .hp-room-photo { margin: 0; min-height: 0; aspect-ratio: 16 / 10; border-radius: 0; }
    .hp-room-body { padding: 14px 16px 12px; }
    .hp-room-stub { padding: 14px 16px; border-left: 0; border-top: 2px dashed var(--wj-line-strong); }
    .hp-room-stub::before, .hp-room-stub::after { top: -15px; bottom: auto; }
    .hp-room-stub::before { left: -15px; }
    .hp-room-stub::after { left: auto; right: -15px; }
    .hp-room-actions { grid-template-columns: 1fr 1fr; }
    .hp-panel { padding: 18px 16px; }
    .hp-h2, .hp-panel .card-title { font-size: 20px; }
}

/* stay form: rooms and guests are changed here too, with the same two counters as the search card */
.hp-field-label { display: block; margin: 0 0 4px; color: var(--wj-ink-2); font-size: 12px; font-weight: 600; }
.hp-step { display: inline-flex; align-items: center; gap: 10px; padding: 4px; border: 1px solid var(--wj-line-strong); border-radius: 10px; background: var(--wj-card); }
.hp-step button { width: 34px; height: 34px; border: 1px solid var(--wj-line-strong); border-radius: 8px; background: var(--wj-card); color: var(--wj-ink); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.hp-step button:hover:not(:disabled) { border-color: var(--wj-ink); }
.hp-step button:disabled { opacity: .35; cursor: default; }
.hp-step output { min-width: 24px; text-align: center; font-size: 15px; font-weight: 700; }

/* photo viewer (hotel photos and room photos): the photo is the page, everything else is quiet */
.hp-lightbox, .hp-lightbox *:not(.fa):not(.fas):not(.far):not(.fab) { font-family: var(--wj-font, 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif) !important; }
.hp-lightbox .modal-dialog { max-width: none; height: 100%; margin: 0; }
.hp-lightbox .modal-content { display: flex; flex-direction: column; height: 100%; border: 0; border-radius: 0; background: var(--wj-viewer); color: #fff; }
.hp-lb-top { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 24px; }
.hp-lb-title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 17px; font-weight: 700; }
.hp-lb-count { flex: 0 0 auto; color: var(--wj-line-strong); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-lb-close { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.hp-lb-close:hover { background: rgba(255, 255, 255, .14); }
.hp-lb-empty { margin: auto; color: var(--wj-line-strong); }
.hp-lb-carousel { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; outline: 0; }
.hp-lb-carousel .carousel-inner { flex: 1 1 auto; min-height: 0; }
.hp-lb-carousel .carousel-item { height: 100%; }
.hp-lb-carousel .carousel-item img { display: block; width: 100%; height: calc(100vh - 160px); height: calc(100dvh - 160px); padding: 0 72px; object-fit: contain; }
.hp-lb-carousel .carousel-control-prev, .hp-lb-carousel .carousel-control-next { top: 0; bottom: 96px; width: 72px; opacity: 1; }
.hp-lb-carousel .carousel-control-prev svg, .hp-lb-carousel .carousel-control-next svg {
    width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: rgba(0, 0, 0, .55); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.hp-lb-carousel .carousel-control-prev:hover svg, .hp-lb-carousel .carousel-control-next:hover svg { background: rgba(0, 0, 0, .8); }
.hp-lb-carousel .hp-lb-thumbs { position: static; display: flex; justify-content: flex-start; gap: 8px; margin: 0; padding: 12px 24px 18px; overflow-x: auto; list-style: none; }
.hp-lightbox .hp-lb-thumbs [data-bs-target] {
    flex: 0 0 auto; width: 84px; height: 60px; margin: 0; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: none; opacity: .6; text-indent: 0;
    box-sizing: border-box; background-clip: border-box;
}
.hp-lightbox .hp-lb-thumbs [data-bs-target].active { border-color: var(--wj-orange, #F24C00); opacity: 1; }
.hp-lightbox .hp-lb-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-lightbox button:focus-visible { outline: 3px solid var(--wj-focus, rgba(242, 76, 0, .45)); outline-offset: 2px; }

@media (max-width: 767.98px) {
    .hp-lb-top { padding: 8px 10px 8px 16px; }
    .hp-lb-carousel .carousel-item img { padding: 0; height: calc(100vh - 140px); height: calc(100dvh - 140px); }
    .hp-lb-carousel .carousel-control-prev, .hp-lb-carousel .carousel-control-next { width: 56px; bottom: 80px; }
    .hp-lb-carousel .hp-lb-thumbs { padding: 10px 12px 14px; }
    .hp-lightbox .hp-lb-thumbs [data-bs-target] { width: 64px; height: 48px; }
}

/* booking confirmation: a dialog on a desktop, a sheet from the bottom on a phone. It is the step before the booking details page. */
.modal-backdrop { background-color: var(--wj-viewer); }
.hp-order, .hp-order *:not(.fa):not(.fas):not(.far):not(.fab) { font-family: var(--wj-font, 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif) !important; }
.hp-order { --hp-line: var(--wj-line, #E3E3E0); }
.hp-order .modal-dialog { max-width: 520px; }
.hp-order .modal-content { overflow: hidden; max-height: calc(100vh - 32px); border: 0; border-radius: 20px; background: var(--wj-card); color: var(--wj-ink, #252525); }
.hp-order form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 32px); }
.hp-order-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--hp-line); }
.hp-order-head h2 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
.hp-order-close { width: 40px; height: 40px; border: 1px solid var(--wj-line-strong, #C9C9C4); border-radius: 50%; background: var(--wj-card); color: var(--wj-ink, #252525); font-size: 22px; line-height: 1; cursor: pointer; }
.hp-order-close:hover { border-color: var(--wj-ink, #252525); }
.hp-order .modal-body { flex: 1 1 auto; padding: 16px 20px 20px; overflow-y: auto; }
.hp-order-summary { display: grid; gap: 2px; margin-bottom: 16px; }
.hp-order-hotel { font-size: 17px; font-weight: 800; }
.hp-order-place { color: var(--wj-ink-2, #616161); font-size: 13px; }
.hp-order-room { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--wj-orange-tint, #FFF0E8); }
.hp-order-roomname .text-walanja, .hp-order-roomname span { color: var(--wj-ink, #252525) !important; font-size: 16px !important; font-weight: 800 !important; }
.hp-order-unit { display: flex; align-items: baseline; gap: 8px; }
.hp-order-unit .text-walanja { color: var(--wj-ink, #252525) !important; font-weight: 800 !important; }
.hp-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp-order .hp-field label, .hp-order .hp-field-label { display: block; margin: 0 0 4px; color: var(--wj-ink-2, #616161); font-size: 12px; font-weight: 600; }
.hp-order .hp-field input, .hp-order .hp-field select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--wj-line-strong, #C9C9C4); border-radius: 10px; background-color: var(--wj-card); color: var(--wj-ink, #252525); font: inherit; font-weight: 600; }
.hp-order .hp-field select { padding-right: 34px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23252525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m1 1.5 5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.hp-order .hp-step { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 4px; box-sizing: border-box; }
.hp-order .hp-step button { flex: 0 0 34px; }
.hp-order .hp-step input { width: 48px; height: auto; padding: 0; border: 0; box-shadow: none; background: none; text-align: center; font-size: 16px; font-weight: 700; pointer-events: none; }
.hp-order input[type=number]::-webkit-outer-spin-button, .hp-order input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hp-order input[type=number] { -moz-appearance: textfield; }
.hp-order-link { display: inline-block; margin-top: 12px; color: var(--wj-orange-ink, #C73D00); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hp-order-notice { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--wj-danger-tint); color: var(--wj-danger-strong); font-size: 13px; font-weight: 600; white-space: pre-line; }
.hp-order-notice[hidden] { display: none; }
.hp-order-total { display: grid; gap: 2px; margin-top: 16px; padding: 14px 16px; border: 2px dashed var(--wj-line-strong, #C9C9C4); border-radius: 14px; }
.hp-order-total #prices .fs-3, .hp-order-total #prices span { color: var(--wj-ink, #252525) !important; font-size: 28px !important; line-height: 1.15; font-weight: 800 !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hp-order-total #prices .text-secondary { color: var(--wj-ink-2, #616161) !important; font-size: 16px !important; letter-spacing: 0; }
.hp-order-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 16px; }
.hp-order-actions .hp-btn { margin-left: 0; height: 48px; }
.hp-order .hp-cta { height: 48px; padding: 0 16px; }
.hp-order .hp-cta.disable, .hp-order .hp-cta:disabled { background: var(--wj-line-strong); color: var(--wj-ink-2, #616161); pointer-events: none; }
.hp-order button:focus-visible, .hp-order a:focus-visible, .hp-order input:focus-visible, .hp-order select:focus-visible { outline: 3px solid var(--wj-focus, rgba(242, 76, 0, .45)); outline-offset: 2px; }
.hp-avail .item-availabilities { padding: 10px 0; border-bottom: 1px solid var(--hp-line); font-size: 15px !important; font-weight: 600; text-align: left !important; }
.hp-avail .item-availabilities:last-child { border-bottom: 0; }

@media (max-width: 767.98px) {
    .hp-order .modal-dialog { position: fixed; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; margin: 0; min-height: 0; align-items: flex-end; transform: translateY(100%); transition: transform .25s ease-out; }
    .hp-order.show .modal-dialog { transform: none; }
    .hp-order .modal-content { max-height: 92vh; border-radius: 20px 20px 0 0; }
    .hp-order form { max-height: 92vh; }
    .hp-order .modal-body { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .hp-order .modal-dialog { transition: none; } }

/* room detail: reuses the confirmation dialog shell (.hp-order); the facts are a three-up strip, the rest are plain sections */
.hp-detail .modal-dialog { height: auto; max-height: calc(100vh - 32px); }
.hp-detail .modal-content { max-height: calc(100vh - 32px); }
.hp-detail-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 14px; color: var(--wj-ink-2, #616161); font-size: 13px; }
.hp-detail-price strong { color: var(--wj-ink, #252525); font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hp-detail-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 8px; border: 2px dashed var(--wj-line-strong, #C9C9C4); border-radius: 14px; }
.hp-detail-facts > div { min-width: 0; padding: 12px 14px; }
.hp-detail-facts > div + div { border-left: 1px solid var(--hp-line, #E3E3E0); }
.hp-detail-facts dt { margin: 0 0 2px; color: var(--wj-ink-2, #616161); font-size: 12px; font-weight: 600; }
.hp-detail-facts dd { margin: 0; color: var(--wj-ink, #252525); font-size: 14px; overflow-wrap: anywhere; }
.hp-detail-sec { margin-top: 20px; }
.hp-detail-sec h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.hp-detail-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.hp-detail-fac li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.hp-detail-fac img { flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; }
.hp-detail-text { color: var(--wj-ink, #252525); font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .hp-detail .modal-dialog { height: auto; max-height: 92vh; }
    .hp-detail .modal-content { max-height: 92vh; }
    .hp-detail-fac { grid-template-columns: 1fr; }
    .hp-detail-facts > div { padding: 10px; }
}

/* availability by date */
.hp-avail-toggle { display: block; padding: 0; border: 0; background: none; font: inherit; }
.hp-avail-panel { margin-top: 10px; padding: 12px; border: 1px solid var(--hp-line, #E3E3E0); border-radius: 14px; }
.hp-avail-panel[hidden] { display: none; }
.hp-avail-panel .hp-avail-list { max-height: 260px; overflow-y: auto; }
.hp-avail-lead { margin: 0 0 12px; color: var(--wj-ink-2, #616161); font-size: 13px; line-height: 1.5; }
.hp-avail-list { margin: 0; padding: 0; list-style: none; }
.hp-avail-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--hp-line, #E3E3E0); font-size: 14px; }
.hp-avail-list li:last-child { border-bottom: 0; }
.hp-avail-list li.is-stay { border-radius: 10px; background: var(--wj-orange-tint, #FFF0E8); border-bottom-color: transparent; font-weight: 700; }
.hp-avail-day { font-variant-numeric: tabular-nums; }
.hp-avail-state { font-weight: 700; font-variant-numeric: tabular-nums; }
.hp-avail-state.is-ok { color: var(--wj-ok-ink); }
.hp-avail-state.is-few { color: var(--wj-warn-ink); }
.hp-avail-state.is-off { color: var(--wj-ink-2, #616161); font-weight: 600; }
.hp-avail-list li.hp-avail-note { display: block; color: var(--wj-ink-2, #616161); }
.hp-avail-list .hp-order-link { margin: 0; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; }