/*!------------------------------------------------------------------------
  Solidres - Hotel booking extension for Joomla
  ------------------------------------------------------------------------
  @Author    Solidres Team
  @Website   https://www.solidres.com
  @copyright Copyright (C) 2013 Solidres. All Rights Reserved.
  @License   GNU General Public License version 3, or later
------------------------------------------------------------------------*/

/* General
====================================================================== */
#solidres .nodisplay {
    display: none;
}
#solidres .processing {
    height: 18px;
    background: url(../images/ajax-loader2.gif) no-repeat 50% 50%;
}
.align-left,
.sr-align-left,
.table td.align-left {
    text-align: left;
}
.align-right,
.sr-align-right,
.table td.align-right {
    text-align: right !important;
}
.align-center,
.sr-align-center,
.table td.align-center {
    text-align: center;
}
.toggle_indicator {
    color: lightgrey;
}

/* Form element */
.hide {
    display: none !important;
}

/* Navigation
====================================================================== */

/* Custom properties */
.sr-sidenav {
    --sr-sidenav-bg:               #ffffff;
    --sr-sidenav-header-bg:        #f5f5f5;
    --sr-sidenav-accent:           #1f496e;
    --sr-sidenav-text:             #555555;
    --sr-sidenav-hover-bg:         #eeeeee;
    --sr-sidenav-active-accent:    #1f496e;
    --sr-sidenav-item-active-color:#1f496e;
    --sr-sidenav-border:           #dddddd;
}

[data-bs-theme="dark"] .sr-sidenav {
    --sr-sidenav-bg:               #1a1f2b;
    --sr-sidenav-header-bg:        #111621;
    --sr-sidenav-accent:           #4a90d9;
    --sr-sidenav-text:             #c8d0dc;
    --sr-sidenav-hover-bg:         #252b3a;
    --sr-sidenav-active-accent:    #4a90d9;
    --sr-sidenav-item-active-color:#4a90d9;
    --sr-sidenav-border:           #2e3547;
}

/* Sidebar container — override Bootstrap col-* gutter padding */
.sr-sidenav {
    background: var(--sr-sidenav-bg);
    border-right: 1px solid var(--sr-sidenav-border);
    min-height: 100vh;
    padding: 0 !important;
}

/* Header: logo + version + toggle */
.sr-sidenav__header {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--sr-sidenav-header-bg);
    border-bottom: 1px solid var(--sr-sidenav-border);
    padding: 8px 10px;
    flex-wrap: nowrap;
}

.sr-sidenav__logo img {
    display: block;
    max-height: 28px;
    width: auto;
    margin-top: -2px;
}

.sr-sidenav__version {
    flex: 1;
    color: #999;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-sidenav__version a {
    color: inherit;
    text-decoration: none;
}

.sr-sidenav__collapse-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    flex-shrink: 0;
}

.sr-sidenav__collapse-btn:hover {
    color: var(--sr-sidenav-accent);
}

.sr-sidenav__collapse-btn span {
    font-size: 18px;
    vertical-align: middle;
}

/* Nav list */
.sr-sidenav__nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Section wrapper */
.sr-sidenav__section {
    border-bottom: 1px solid var(--sr-sidenav-border);
    margin: 0;
}

/* Section toggle button */
.sr-sidenav__section-btn {
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--sr-sidenav-header-bg);
    border: none;
    border-bottom: 1px solid var(--sr-sidenav-border);
    padding: 7px 10px;
    color: var(--sr-sidenav-text);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    gap: 6px;
}

.sr-sidenav__section-btn:hover,
.sr-sidenav__section-btn:focus-visible {
    background: var(--sr-sidenav-hover-bg);
    outline: none;
}

.sr-sidenav__section-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.sr-sidenav__section-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-sidenav__section-caret {
    font-size: 12px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Rotate caret when section is collapsed */
.sr-sidenav__section-btn[aria-expanded="false"] .sr-sidenav__section-caret {
    transform: rotate(-90deg);
}

/* Active section header */
.sr-sidenav__section--active > .sr-sidenav__section-btn {
    background: var(--sr-sidenav-active-accent);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Items list (Bootstrap 5 collapse-controlled) */
.sr-sidenav__items {
    list-style: none;
    margin: 0;
    padding: 4px 4px 2px;
    background: var(--sr-sidenav-bg);
}

/* Individual item */
.sr-sidenav__item {
    list-style: none;
    margin-bottom: 2px;
}

/* Item link */
.sr-sidenav__link {
    display: block;
    padding: 4px 8px;
    color: var(--sr-sidenav-text);
    text-decoration: none;
    border-radius: 3px;
    text-indent: 4px;
}

.sr-sidenav__link:hover,
.sr-sidenav__link:focus {
    background: var(--sr-sidenav-hover-bg);
    color: var(--sr-sidenav-text);
    text-decoration: none;
}

/* Active item */
.sr-sidenav__item--active .sr-sidenav__link {
    color: var(--sr-sidenav-item-active-color);
    font-weight: bold;
}

/* Badge injected by inline JS (live reservation count / update count) */
#sr_submenu_system .badge {
    padding-left: 0;
}

/* ---- Icon-only collapsed mode ---- */
/* Keep sidebar in document flow — shrink via flex override, no position:fixed */
#sr_panel_left.sr-sidenav--icon-only {
    flex: 0 0 54px;
    width: 54px;
    min-width: 54px;
    max-width: 54px;
    overflow: visible;
    z-index: 10;
}

/* Right panel auto-expands via CSS sibling selector — no JS class toggling needed */
#sr_panel_left.sr-sidenav--icon-only ~ #sr_panel_right {
    flex: 1;
    max-width: calc(100% - 54px);
}

/* Hide text/extra elements in icon-only mode */
#sr_panel_left.sr-sidenav--icon-only .sr-sidenav__logo,
#sr_panel_left.sr-sidenav--icon-only .sr-sidenav__version,
#sr_panel_left.sr-sidenav--icon-only .sr-sidenav__section-label,
#sr_panel_left.sr-sidenav--icon-only .sr-sidenav__section-caret,
#sr_panel_left.sr-sidenav--icon-only #sr-update-note {
    display: none;
}

/* Compact header in icon-only mode */
#sr_panel_left.sr-sidenav--icon-only .sr-sidenav__header {
    justify-content: center;
    padding: 8px 4px;
}

#sr_panel_left.sr-sidenav--icon-only .sr-sidenav__collapse-btn {
    margin-left: 0;
}

/* Section button becomes icon-only square */
#sr_panel_left.sr-sidenav--icon-only .sr-sidenav__section-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    overflow: hidden;
    margin: 2px auto;
    box-sizing: border-box;
    border-radius: 4px;
}

#sr_panel_left.sr-sidenav--icon-only .sr-sidenav__section-icon {
    font-size: 18px;
}

#sr_panel_left.sr-sidenav--icon-only .sr-sidenav__section-btn:hover {
    background: var(--sr-sidenav-active-accent);
    color: #ffffff;
}

/* Flyout submenu on hover in icon-only mode */
#sr_panel_left.sr-sidenav--icon-only .sr-sidenav__section {
    position: relative;
}

#sr_panel_left.sr-sidenav--icon-only .sr-sidenav__items {
    display: none !important;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 9999;
    min-width: 190px;
    background: var(--sr-sidenav-bg);
    border: 1px solid var(--sr-sidenav-border);
    border-left: 2px solid var(--sr-sidenav-accent) !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15), 0 2px 10px 0 rgba(0, 0, 0, 0.1) !important;
    padding: 4px;
}

#sr_panel_left.sr-sidenav--icon-only .sr-sidenav__section:hover .sr-sidenav__items {
    display: block !important;
}

/* Mobile */
@media (max-width: 767px) {
    .sr-sidenav {
        min-height: auto;
    }

    .sr-sidenav__header {
        padding: 6px 8px;
    }

    .sr-inner,
    .js-stools-container-bar {
        margin-top: 20px;
    }
}

@media (max-width: 1500px) {
    .sr-sidenav__version {
        display: none;
    }

    .sr-sidenav__collapse-btn {
        margin-left: auto;
    }
}

@media (max-width: 767px) {
    .sr-sidenav__version {
        display: block;
    }

    .sr-sidenav__collapse-btn {
        margin-left: 0;
    }
}

/* Placeholder shimmer (used globally, not navigation-specific)
====================================================================== */
@-webkit-keyframes srPlaceHolderShimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}
.sr-placeholder {
    display: inline-block;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: srPlaceHolderShimmer;
    animation-name: srPlaceHolderShimmer;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
    background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    -webkit-background-size: 800px 104px;
    background-size: 800px 104px;
    height: inherit;
    position: relative;
    border: inherit;
}
.sr-placeholder,
[sr-placeholder-item] {
    border: none !important;
}

/* Assets
====================================================================== */
.map_canvas {
    width: 100%;
    height: 400px;
    margin: 0 0 10px 0;
}
span.no-roomtype-warning,
span.no-tariff-warning {
    color: #c09853;
}

/* Reservations
====================================================================== */
.reservation-detail-box > h3 {
    background: #eee;
    border-radius: 2px;
    border: 1px solid #ccc;
    color: black;
    text-indent: 5px;
    margin-top: 0;
    padding: 5px;
    margin-bottom: 10px;
}
.reservation-details {
    margin-left: 0;
    padding-left: 0;
}
.reservation-details li {
    list-style: none;
    border-bottom: 1px solid var(--border-color, var(--bs-border-color, #eee));
    padding: 0 10px 0;
    clear: both;
    line-height: 30px;
}
.reservation-details li label {
    line-height: 30px;
    float: left;
}
.reservation-details li span {
    float: left;
}
.reservation-details.left-details li label {
    width: 45%;
}
.reservation-details.right-details li label {
    width: 55%;
}
.reservation-details.left-details li span {
    width: 55%;
}
.reservation-details.right-details li span {
	text-align: right;
    width: 45%;
}
.reservation-details li span.label {
	float: none;
}
.reservation-details li label,
.reservation-details dd label,
.reservation-details li span {
    display: block;
}
.reservation-details li.sub-line-item label {
    background: none;
}
.reservation-details li.sub-line-item span {
    font-style: italic;
}
.booked_room_extra_info ul {
    margin: 0;
}
.booked_room_extra_info ul li {
    list-style: none;
}
.booked_room_extra_info label {
    display: inline-block;
    width: 50%;
}
.booked_room_cost_wrapper {
    border: 2px solid #efefef;
    margin: 15px 0 15px 0;
    padding: 10px;
}
.booked_room_cost_wrapper ul li {
    border-bottom: 1px dotted #aaa;
    line-height: 25px;
}
.booked_room_cost_wrapper ul li:last-child {
    border: none
}
.booked_room_cost_wrapper ul li label {
    margin: 0;
}
.booked_room_cost_wrapper a:link,
.booked_room_cost_wrapper a:visited,
.booked_room_cost_wrapper a:hover {
    color: inherit;
    text-decoration: none;
}
.booked_room_cost,
.booked_room_extra_cost {
    display: block;
    text-align: right;
    float: right;
}
.reservation-note-item {
    border-left: 4px solid #ccc;
    margin: 5px 0;
    padding: 5px;
}
.reservation-note-item .info {
    font-weight: bold;
}
#solidres .js-stools-field-filter .field-calendar {
    display: inline-block;
}
.approval-notice {
    color: orange;
}
.res-payment-method-id:hover {
    cursor: default;
}
.link-ico {
    text-decoration: none;
    color: #666;
}
.link-ico:hover {
    text-decoration: none;
}

/* Create new Reservation */
.reservation-single-step-holder.backend {
    background: none;
}
#solidres .room_selection_wrapper {
    background: #fafafa;
    padding: 10px 15px;
    border: 1px solid #dfdfdf;
    width: auto;
}
#solidres .room_selection_wrapper:hover {
    border-color: #999;
}
.room_selection_wrapper dd {
    margin-left: 0;
}
.toggle_breakdown:link,
.toggle_extra_details:link,
.toggle_room_confirmation:link {
    border-bottom: 1px dashed;
    text-decoration: none;
    display: inline-block;
}
.toggle_breakdown:hover,
.toggle_extra_details:hover {
    cursor: help;
    text-decoration: none;
}
.extras_row_roomtypeform select.extra_quantity,
#solidres .extras_row_guestform select {
    width: 100px;
    display: inline-block;
}
.room_selection_details .row {
    margin-bottom: 15px;
}
.booking-summary,
.sr-close-overlay {
    display: none;
}
.rooms-rates-summary-sticky {
    position: fixed;
    top: 0;
    z-index: 999;
    background: inherit;
}
.rooms-rates-summary {
    position: relative;
    display: inline-block;
}
.stay-info {
    display: flex;
}
.stay-info div {
    flex-grow: 1;
}
.rooms-rates-summary .sticky-loading {
    position: absolute;
    width: 100%;
    opacity: 0.7;
    background: url("../images/loading.gif") no-repeat center center #EEEEEE;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.summary-los {
    display: flex;
}
.summary-los div {
    flex-grow: 1;
    flex-basis: 50%;
}
@media (max-width: 767px) {
    .booking-summary {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 45px;
        background: teal;
        z-index: 9999;
        color: white;
    }
    .booking-summary-apartment {
        height: auto;
    }
    .booking-summary-apartment .btn {
        margin-bottom: 0;
    }
    .sr-close-overlay {
        position: fixed;
        right: 10px;
        top: 18px;
        z-index: 99;
    }
    .booking-summary p {
        font-size: 12px;
    }
    .booking-summary p.sline {
        line-height: 45px;
        margin: 0 0 0 7px;
    }
    .booking-summary p.dline {
        margin: 7px 0 0 7px;
    }
    .booking-summary p.dline.last {
        margin: 0 0 0 7px;
    }
    .booking-summary a:link,
    .booking-summary a:hover {
        color: white;
        font-weight: bold;
        text-decoration: none;
    }
    .booking-summary div {
        float: left;
    }
    .booking-summary-apartment div {
        float: none;
    }
    .booking-summary .fcol {
        width: 70%;
    }
    .booking-summary .scol {
        width: 30%;
    }
    .booking-summary .scol p {
        line-height: 45px;
        margin: 0;
    }
    .sr-overlay {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 100%;
        background: #e4e4e4;
        z-index: 99999;
        padding: 10px;
        overflow-y: scroll;
    }
    .rooms-rates-summary-sticky {
        position: inherit;
    }
}
.booking-summary-apartment p {
    margin: 10px;
}
.booking-summary-apartment a:link, .booking-summary-apartment a:hover {
    color: #333;
}

/* Step3 - Confirmation */
#reservation-confirmation-box .table tr.nobordered td {
    border-top: none;
}
#reservation-confirmation-box .table tr.nobordered.first td {
    border-top: 1px solid #ddd;
}
#reservation-confirmation-box .table tr.nobordered td.noleftborder {
    border-left: none;
}
#reservation-confirmation-box .table tr.nobordered.termsandconditions td,
#reservation-confirmation-box .table tr.nobordered.sendoutgoingemails td{
    border-top: 1px solid #ddd;
}
#reservation-confirmation-box input[type="text"] {
    text-align: right;
}

/* System Info
====================================================================== */
.sr-system__table th,
.sr-system__table td {
    width: 50%;
}
.sr-system__update {
    display: block;
    margin-top: 5px;
}
.sr-system__update a {
    --sr-update-bg: #fff3cd;
    --sr-update-border: #ffca2c;
    --sr-update-fg: #664d03;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border: 1px solid var(--sr-update-border);
    border-radius: 10rem;
    background: var(--sr-update-bg);
    color: var(--sr-update-fg);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.sr-system__update a::before {
    content: "";
    flex-shrink: 0;
    width: .82em;
    height: .82em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 20 10 15 10 15 22 9 22 9 10 4 10Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 20 10 15 10 15 22 9 22 9 10 4 10Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sr-system__update a:hover,
.sr-system__update a:focus-visible {
    --sr-update-bg: #ffca2c;
    --sr-update-fg: #332701;
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(255, 202, 44, .4);
}
[data-bs-theme="dark"] .sr-system__update a {
    --sr-update-bg: rgba(255, 202, 44, .15);
    --sr-update-border: rgba(255, 202, 44, .5);
    --sr-update-fg: #ffda6a;
}
[data-bs-theme="dark"] .sr-system__update a:hover,
[data-bs-theme="dark"] .sr-system__update a:focus-visible {
    --sr-update-bg: rgba(255, 202, 44, .28);
    --sr-update-fg: #ffe69c;
}
.sr-system__toggle {
    text-decoration: none;
}
.sr-system__log-content {
    max-height: 550px;
    margin-top: 15px;
    overflow-y: auto;
}

/* Channel room ID chip (room types list)
====================================================================== */
.sr-channel-id {
    --sr-channel-id-bg: #eef1f5;
    --sr-channel-id-border: #d3d9e1;
    --sr-channel-id-fg: #38414d;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    max-width: 100%;
    padding: 1px 9px;
    border: 1px solid var(--sr-channel-id-border);
    border-radius: 10rem;
    background: var(--sr-channel-id-bg);
    color: var(--sr-channel-id-fg);
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: .78rem;
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.sr-channel-id::after {
    content: "";
    flex-shrink: 0;
    width: .85em;
    height: .85em;
    background: currentColor;
    opacity: .6;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h9a2 2 0 0 1 2 2v12h-2V4H9V2Zm-3 4h9a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v12h9V8H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h9a2 2 0 0 1 2 2v12h-2V4H9V2Zm-3 4h9a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v12h9V8H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sr-channel-id:hover,
.sr-channel-id:focus-visible {
    --sr-channel-id-bg: #dde3ea;
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(31, 73, 110, .25);
}
.sr-channel-id.is-copied {
    --sr-channel-id-bg: #d1e7dd;
    --sr-channel-id-border: #a3cfbb;
    --sr-channel-id-fg: #0a3622;
}
.sr-channel-id.is-copied::after {
    opacity: 1;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 4.8 11.4l-1.4 1.4 6.2 6.2 12-12-1.4-1.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 4.8 11.4l-1.4 1.4 6.2 6.2 12-12-1.4-1.4Z'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] .sr-channel-id {
    --sr-channel-id-bg: #252b3a;
    --sr-channel-id-border: #3a4257;
    --sr-channel-id-fg: #c8d0dc;
}
[data-bs-theme="dark"] .sr-channel-id:hover,
[data-bs-theme="dark"] .sr-channel-id:focus-visible {
    --sr-channel-id-bg: #313a4d;
    box-shadow: 0 0 0 .2rem rgba(74, 144, 217, .35);
}
[data-bs-theme="dark"] .sr-channel-id.is-copied {
    --sr-channel-id-bg: rgba(25, 135, 84, .25);
    --sr-channel-id-border: rgba(25, 135, 84, .55);
    --sr-channel-id-fg: #75b798;
}
@media (prefers-reduced-motion: reduce) {
    .sr-channel-id {
        transition: none;
    }
}

/* Channel Manager "connected" badge (property list, inline with the name)
====================================================================== */
.sr-channel-badge {
    --sr-channel-badge-bg: #d1e7dd;
    --sr-channel-badge-border: #a3cfbb;
    --sr-channel-badge-fg: #0a3622;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    vertical-align: middle;
    padding: 1px 9px 1px 7px;
    border: 1px solid var(--sr-channel-badge-border);
    border-radius: 10rem;
    background: var(--sr-channel-badge-bg);
    color: var(--sr-channel-badge-fg);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.sr-channel-badge::before {
    content: "";
    flex-shrink: 0;
    width: .95em;
    height: .95em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707M10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707M10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sr-channel-badge:hover,
.sr-channel-badge:focus-visible {
    --sr-channel-badge-bg: #bcdccb;
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .25);
}
.sr-channel-badge.is-copied::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 4.8 11.4l-1.4 1.4 6.2 6.2 12-12-1.4-1.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 4.8 11.4l-1.4 1.4 6.2 6.2 12-12-1.4-1.4Z'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] .sr-channel-badge {
    --sr-channel-badge-bg: rgba(25, 135, 84, .22);
    --sr-channel-badge-border: rgba(25, 135, 84, .5);
    --sr-channel-badge-fg: #75b798;
}
[data-bs-theme="dark"] .sr-channel-badge:hover,
[data-bs-theme="dark"] .sr-channel-badge:focus-visible {
    --sr-channel-badge-bg: rgba(25, 135, 84, .32);
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .35);
}

/* Attention — connected and syncing, but action is due soon (over-tier grace
   window or an imminent expiry). Amber + a distinct warning icon so the state
   is conveyed without relying on colour alone. */
.sr-channel-badge--attention {
    --sr-channel-badge-bg: #fff3cd;
    --sr-channel-badge-border: #ffe69c;
    --sr-channel-badge-fg: #664d03;
}
.sr-channel-badge--attention:hover,
.sr-channel-badge--attention:focus-visible {
    --sr-channel-badge-bg: #ffe9a6;
    box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .3);
}
.sr-channel-badge--attention::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] .sr-channel-badge--attention {
    --sr-channel-badge-bg: rgba(255, 193, 7, .18);
    --sr-channel-badge-border: rgba(255, 193, 7, .5);
    --sr-channel-badge-fg: #ffda6a;
}
[data-bs-theme="dark"] .sr-channel-badge--attention:hover,
[data-bs-theme="dark"] .sr-channel-badge--attention:focus-visible {
    --sr-channel-badge-bg: rgba(255, 193, 7, .28);
    box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .35);
}

/* Lapsed — connected but the relay has stopped pushing (subscription lapsed or
   a passed expiry). Red + a stop icon. */
.sr-channel-badge--lapsed {
    --sr-channel-badge-bg: #f8d7da;
    --sr-channel-badge-border: #f1aeb5;
    --sr-channel-badge-fg: #58151c;
}
.sr-channel-badge--lapsed:hover,
.sr-channel-badge--lapsed:focus-visible {
    --sr-channel-badge-bg: #f5c2c7;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .3);
}
.sr-channel-badge--lapsed::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM5.354 4.646 8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM5.354 4.646 8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] .sr-channel-badge--lapsed {
    --sr-channel-badge-bg: rgba(220, 53, 69, .22);
    --sr-channel-badge-border: rgba(220, 53, 69, .5);
    --sr-channel-badge-fg: #ea868f;
}
[data-bs-theme="dark"] .sr-channel-badge--lapsed:hover,
[data-bs-theme="dark"] .sr-channel-badge--lapsed:focus-visible {
    --sr-channel-badge-bg: rgba(220, 53, 69, .32);
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .35);
}

/* Disconnected — the property row was disconnected on the channel manager
   side while the local link still exists; no update reaches the channels.
   Same danger palette as lapsed, but an unplugged icon so the two states
   read differently without relying on colour alone. */
.sr-channel-badge--disconnected {
    --sr-channel-badge-bg: #f8d7da;
    --sr-channel-badge-border: #f1aeb5;
    --sr-channel-badge-fg: #58151c;
}
.sr-channel-badge--disconnected:hover,
.sr-channel-badge--disconnected:focus-visible {
    --sr-channel-badge-bg: #f5c2c7;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .3);
}
.sr-channel-badge--disconnected::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.08 2.08 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.92 1.92 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0M5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.08 2.08 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.92 1.92 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0M5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4z'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] .sr-channel-badge--disconnected {
    --sr-channel-badge-bg: rgba(220, 53, 69, .22);
    --sr-channel-badge-border: rgba(220, 53, 69, .5);
    --sr-channel-badge-fg: #ea868f;
}
[data-bs-theme="dark"] .sr-channel-badge--disconnected:hover,
[data-bs-theme="dark"] .sr-channel-badge--disconnected:focus-visible {
    --sr-channel-badge-bg: rgba(220, 53, 69, .32);
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .35);
}

/* Collapse to icon-only on phones so the always-visible name column stays readable */
@media (max-width: 767.98px) {
    .sr-channel-badge {
        padding: 2px 6px;
    }
    .sr-channel-badge__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sr-channel-badge {
        transition: none;
    }
}

/* General CSS for styles in Frontend
====================================================================== */
#solidres .reservation_asset_item a:hover {
    text-decoration: none;
}
#solidres .reservation_asset_item a:focus,
#solidres .reservation_asset_item .btn:focus {
    outline: none;
}
#solidres .inner {
    margin: 10px;
}
#asset-desc hr#system-readmore, .roomtype_desc hr#system-readmore {
    display: none;
}

/* Asset Information */
#solidres .rating {
    color: #ffbb00;
}
#inline_map {
    width: 100%;
    height: 100vh;
}
#inline_map img {
    max-width: none;
}

/* Simple Gallery */
.reservation_asset_item .main-photo img {
    float: none;
    width: 100%;
    margin-bottom: 10px;
}
.reservation_asset_item .other-photos img {
    margin: 0 5px 10px 0;
    padding: 0;
    display: inline-block;
}

/* Menu Tab */
.reservation_asset_item .nav-tabs {
    margin-bottom: 0;
}
.reservation_asset_item .nav-tabs > li > a {
    font-weight: bold;
    text-transform: uppercase;
}

/* Login Form - Coupon Input */
.coupon {
    border-radius: 5px;
    border: 1px dashed #ffbb00;
    background: #fff4c8;
    padding: 10px;
}
.coupon_prop {
    margin: 0 0 20px 0;
}
.coupon input {
    float: left;
}
.coupon > span {
    padding-left: 5px;
}
/* Check Availability Form */
#asset-checkavailability-form {
    margin-bottom: 20px;
}
.room_num_row .room_num_label {
    font-weight: bold;
    font-style: italic;
    margin-top: 6px;
    text-align: center;
}

.room_num_row .room_num_label label {
    display: block;
}
@media (max-width: 767px) {
    .room_num_row .room_num_label label, .action label {
        display: none;
    }
    .room_num_row .room_num_label {
        text-align: left;
        margin-top: 0;
    }
}
.room_num_row fieldset {
    background: #f7f7f7;
    margin-bottom: 1em;
}

.room_num_row fieldset legend {
    font-size: inherit;
    border-bottom: 1px solid #CCC;
    margin-bottom: 10px;
}

/* Date picker */
#ui-datepicker-div {
    z-index: 999999 !important;
}
.datepicker_inline {
    display: block;
    position: absolute;
    z-index: 1100;
}
.disabledCalendar {
    opacity: .6;
}
.ui-datepicker {
    padding: 15px 15px 10px;
}
.ui-datepicker th {
    font-size: 11px;
    color: #555;
}
.ui-datepicker td span, .ui-datepicker td a {
    padding: 5px;
}
.ui-datepicker .ui-widget-header {
    background: none;
    border: none;
    color: teal;
}
.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-header .ui-state-default {
    background: none;
    border: 1px solid #eee;
    color: #777;
}
.ui-datepicker .ui-state-highlight,
.ui-datepicker .ui-widget-content .ui-state-highlight,
.ui-datepicker .ui-widget-header .ui-state-highlight {
    background: #eee;
    border: 1px solid #ddd;
}
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-widget-content .ui-state-active,
.ui-datepicker .ui-widget-header .ui-state-active {
    background: teal;
    color: #fff;
}
.ui-datepicker .ui-state-disabled,
.ui-datepicker .ui-widget-content .ui-state-disabled,
.ui-datepicker .ui-widget-header .ui-state-disabled {
    opacity: 0.5;
}
.ui-datepicker .ui-state-disabled span,
.ui-datepicker .ui-widget-content .ui-state-disabled span,
.ui-datepicker .ui-widget-header .ui-state-disabled span {
    text-decoration: line-through;
}
.ui-datepicker a.ui-state-default:hover {
    background: #eee;
    border: 1px solid #ddd;
    color: teal;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    opacity: 1;
    background: #eee;
    border-color: #ddd;
    color: teal;
    font-size: 13px;
    font-weight: bold;
}
#sr_panel_right button.ui-datepicker-current {
    margin: .5em .2em .4em;
}
.ui-datepicker-next:hover, .ui-datepicker-prev:hover {
    background: none;
    border: 1px solid #aaa;
}
td.bookable a.ui-state-default,
td.bookable.ui-datepicker-unselectable a.ui-state-default {
    background: #edf6f6;
    color: #008489;
}
td.bookable a.ui-state-default:hover,
td.bookable.ui-datepicker-unselectable a.ui-state-default:hover {
    background: #cceeeb;
}
td.ui-datepicker-current-day.bookable a.ui-state-default {
    font-weight: bold;
}

/* Wizard */
.wizard:before,
.wizard:after {
    display: table;
    line-height: 0;
    content: "";
}
.wizard:after {
    clear: both;
}
.wizard ul {
    padding: 0;
    margin: 0;
    list-style: none outside none;
}
.wizard ul li.list-inline-item {
    position: relative;
    margin-right: 0;
}
.wizard ul li .badge {
    text-shadow: none;
}
.wizard ul li.active {
    color: teal;
}
.wizard ul li.active .badge {
    background-color: teal !important;
}
.wizard ul li:nth-child(1) {
    z-index: 10;
}
.wizard ul li:nth-child(2) {
    z-index: 9;
}
.wizard ul li:nth-child(3) {
    z-index: 8;
}
.wizard ul li:nth-child(4) {
    z-index: 7;
}
.wizard ul li:nth-child(5) {
    z-index: 6;
}
.wizard ul li:nth-child(6) {
    z-index: 5;
}
.wizard ul li:nth-child(7) {
    z-index: 4;
}
.wizard ul li:nth-child(8) {
    z-index: 3;
}
.wizard ul li:nth-child(9) {
    z-index: 2;
}
.wizard ul li:nth-child(10) {
    z-index: 1;
}

/* Step1 - Room & Rate
====================================================================== */
.button-row .col-md-4 {
    text-align: right;
}
@media (max-width: 767px) {
    .button-row .col-md-4 {
        text-align: left;
    }
}
.num_rooms_available_msg {
    color: red;
    border-bottom: 1px dashed red;
    font-style: italic;
    font-weight: bold;
}
.reservation_asset_item .more_desc {
    margin: 20px 0 0 0;
}
.btn.toggle_more_desc, .btn.load-calendar, .btn.toggle-tariffs, .btn.show-inquiry-form {
    margin-top: 5px;
}
#sr-inquiry-form-modal .modal-body {
    max-height: initial;
    overflow-y: initial;
}
@media (max-width: 480px) {
    span.rating-wrapper {
        display: block;
    }
}

/* Availability Calendar */
/* ======================================================================
   Public availability overview calendar (read-only) — .availability-calendar
   ----------------------------------------------------------------------
   Server-rendered static month tables (Solidres\Utility\Calendar), AJAX-loaded
   on the property page. Deliberately NOT Vanilla Calendar Pro: this is a
   read-only availability heatmap, not a date picker. Colours ride CSS variables that flip for
   dark mode; "restricted" also carries a diagonal texture and both states an
   AT-only text label (Calendar.php) so status is never conveyed by colour
   alone (WCAG 1.4.1).
   ====================================================================== */
.availability-calendar {
    --sr-cal-busy:            #e06666;
    --sr-cal-busy-text:       #2b0f0f;
    --sr-cal-restricted:      #ffd966;
    --sr-cal-restricted-text: #3a2f00;
    --sr-cal-stripe:          rgba(0, 0, 0, 0.16);
    --sr-cal-past:            var(--bs-secondary-color, #adb5bd);
    --sr-cal-border:          var(--bs-border-color, #dee2e6);
    --sr-cal-heading:         var(--bs-primary, teal);

    text-align: center;
    padding-top: 20px;
    margin-bottom: 20px;
}

@media (prefers-color-scheme: dark) {
    .availability-calendar {
        --sr-cal-busy:            #a83232;
        --sr-cal-busy-text:       #ffe3e3;
        --sr-cal-restricted:      #b8860b;
        --sr-cal-restricted-text: #fff6d6;
        --sr-cal-stripe:          rgba(255, 255, 255, 0.22);
    }
}

[data-bs-theme="dark"] .availability-calendar {
    --sr-cal-busy:            #a83232;
    --sr-cal-busy-text:       #ffe3e3;
    --sr-cal-restricted:      #b8860b;
    --sr-cal-restricted-text: #fff6d6;
    --sr-cal-stripe:          rgba(255, 255, 255, 0.22);
}

.availability-calendar table {
    margin: 10px auto;
}
div.availability-calendar table tr th {
    color: var(--sr-cal-heading);
    border-top: none;
    padding-bottom: 5px;
    text-align: left;
}
/* Weekday column headers stay centred and muted (they are <th scope="col"> now). */
div.availability-calendar table tr.row-week-day th {
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
    text-align: center;
}
div.availability-calendar table tr td {
    border-top: none;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
div.availability-calendar table tr.row-month-day {
    border-bottom: 1px solid var(--sr-cal-border);
}
div.availability-calendar table tr td span.today {
    font-weight: bold;
    text-decoration: underline;
}
div.availability-calendar table tr td.past {
    color: var(--sr-cal-past);
}

/* Inert day fill element (was an <a>, now <span class="cal-day">). */
div.availability-calendar table tr td .cal-day {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 30px;
    color: inherit;
}
div.availability-calendar table tr td.busy .cal-day {
    background: var(--sr-cal-busy);
    color: var(--sr-cal-busy-text);
}
div.availability-calendar table tr td.restricted .cal-day {
    /* Diagonal texture distinguishes "restricted" from "busy" without relying on hue. */
    background:
        repeating-linear-gradient(45deg, var(--sr-cal-stripe) 0 2px, transparent 2px 6px),
        var(--sr-cal-restricted);
    color: var(--sr-cal-restricted-text);
}

/* Partial check-in / check-out days (legacy style only). */
div.availability-calendar table.btype-0 tr td.busy.ci .cal-day {
    background: linear-gradient(135deg, transparent 48%, var(--sr-cal-busy) 50%);
}
div.availability-calendar table.btype-0 tr td.restricted.ci .cal-day {
    background: linear-gradient(135deg, transparent 48%, var(--sr-cal-restricted) 50%);
}
div.availability-calendar table.btype-1 tr td.busy.ci .cal-day {
    background: var(--sr-cal-busy);
}
div.availability-calendar table.btype-1 tr td.restricted.ci .cal-day {
    background: var(--sr-cal-restricted);
}
div.availability-calendar table tr td.busy.co .cal-day {
    background: linear-gradient(-45deg, transparent 48%, var(--sr-cal-busy) 50%);
    width: 100%;
    height: 100%;
}
div.availability-calendar table tr td.restricted.co .cal-day {
    background: linear-gradient(-45deg, transparent 48%, var(--sr-cal-restricted) 50%);
    width: 100%;
    height: 100%;
}
div.availability-calendar table tr td.busy.ci.co .cal-day {
    background: var(--sr-cal-busy);
}
div.availability-calendar table tr td.restricted.ci.co .cal-day {
    background: var(--sr-cal-restricted);
}

/* Legend swatches (decorative — aria-hidden; the adjacent text is the label). */
span.legend-busy,
span.legend-restricted {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
}
span.legend-busy {
    background: var(--sr-cal-busy);
}
span.legend-restricted {
    background:
        repeating-linear-gradient(45deg, var(--sr-cal-stripe) 0 2px, transparent 2px 6px),
        var(--sr-cal-restricted);
}

/* AT-only text: the caption (month name) + per-cell status ("Not available" / "Restricted"). */
.availability-calendar .sr-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Tariff */
.tariff-box {
    margin: 0 0 10px 0;
    -webkit-transition: background-color 3000ms linear;
    -moz-transition: background-color 3000ms linear;
    -o-transition: background-color 3000ms linear;
    transition: background-color 3000ms linear;
}
.tariff-box p {
    margin: 0;
}
.tariff-value {
    text-align: right;
}
.starting_from, .min_tariff, .normal_tariff, .tariff_suffix {
    display: block;
}
@media (max-width: 767px) {
    .tariff-title-desc, .tariff-value {
        text-align: center;
        margin-bottom: 10px;
    }
}
.sr-strikethrough {
    font-size: 15px;
    display: block;
    text-decoration: line-through;
}
p.last_chance {
    color: red;
    font-weight: bold;
}
select.last_chance {
    border: 1px solid red;
    color: red
}
.prioritizing-roomtype-notice {
    background: white;
    border-top: 2px dashed #d2d2d2;
    border-bottom: 2px dashed #d2d2d2;
    padding: 20px;
    font-size: 15px;
    margin-bottom: 15px;
}

.tariff-break-down span {
    font-weight: bold;
    display: block;
    margin-right: 10px;
}
.tariff-break-down span.gross,
.tariff-break-down span.tax {
    font-weight: normal;
    margin: 0;
}
.tariff-break-down td {
    padding: 10px;
}
.tariff-sep {
    border: 1px dashed #ccc;
    margin-bottom: 10px;
}

/* Roomtype form */
.room_index_form_heading h4 {
    margin: 15px 0 5px 0;
}
.breakdown {
    background: #f4f4f4;
    border: 1px solid #e7e7e7;
    padding: 10px;
    margin: 10px 0;
    display: block;
    font-size: 12px;
    font-weight: normal;
}
.breakdown table {
    margin-bottom: 0;
}
.breakdown table .sr-align-right {
    font-weight: bold;
}
.breakdown .breakdown-row {
    text-align: center;
}
.breakdown-row > div {
    margin: 5px 0 10px 0;
}
.breakdown-row .breakdown-wday {
    background: lightgrey;
    font-weight: bold;
}
.breakdown-row .breakdown-adult, .breakdown-row .breakdown-child {
    margin-bottom: 0;
}
.breakdown-row .breakdown-child {
    padding-top: 5px;
}
.breakdown-row span.gross {
    color: teal;
    font-weight: bold;
}
.extras_row_roomtypeform input[type="checkbox"],
.extras_row_guestform input[type="checkbox"] {
    vertical-align: middle;
    margin: 0;
}
#solidres .extras_row_roomtypeform input,
#solidres .extras_row_roomtypeform select,
#solidres .extras_row_guestform input,
#solidres .extras_row_guestform select {
    margin-right: 5px;
}

.extras_toggle:hover {
    cursor: pointer;
}
.extra_details {
    padding: 10px;
    border: 1px solid #e7e7e7;
    margin: 10px 0;
    clear: left;
    background: #f4f4f4;
    display: block;
    font-size: 12px;
    line-height: 18px;
}
.extra_details p {
    margin-bottom: 0;
}
.extra_details img {
    float: none;
}

/* Facilities - Policies */
.custom-field-row {
    border-bottom: 1px solid #eee;
    padding:  5px 0 5px 0;
}
.custom-field-row.last {
    border-bottom: none;
}
.info-heading {
    font-weight: bold;
}

/* Powered */
.powered {
    text-align: center;
    margin: 10px 0 0 0;
}
.powered a {
    color: teal;
    font-weight: bold;
}

/* Step2 - Guest Info
====================================================================== */
#sr-exp-toc {
    margin: 0;
}
#solidres .popover {
    max-width: 450px !important;
}
.popover-title {
    font-weight: bold;
}
#solidres .payment_method_details {
    background: #fafafa;
    border: 1px solid #dfdfdf;
    padding: 15px 20px 10px;
}
.popover_payment_methods:hover {
    cursor: help;
}

/* Form validation */
.sr-validate input.error,
.sr-validate select.error ,
.sr-validate textarea.error,
.room-form input.error,
.room-form select.error,
.room-form textarea.error,
.sr-experience input.error,
.sr-experience select.error,
.sr-experience textarea.error {
    border-color: #b94a48;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #b94a48;
}

.sr-validate label.error,
.room-form label.error,
.sr-experience label.error {
    color: #b94a48;
}
input[type="checkbox"]#processonlinepayment {
    margin: 0
}

/* Step3 - Confirmation
====================================================================== */
.confirmation table {
    margin-top: 10px
}
.toggle_extracost_confirmation:link {
    border-bottom: 1px dashed;
    text-decoration: none;
    color: inherit;
}
.toggle_extracost_confirmation:hover {
    cursor: help;
}

/* Customer Dashboard
====================================================================== */
.reservation-row {
    border: 1px solid #eee;
    margin-bottom: 10px;
}
.reservation-row .checkinout {
    text-align: center;
}
.reservation-row .dayt,
.reservation-row .dayn,
.reservation-row .montht,
.reservation-row .yearn {
    display: block;
}
.reservation-row .dayn {
    font-size: 48px;
    line-height: 48px;
}
.reservation-row h3 i {
    color: #ffbb00;
}
.reservation-row img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .reservation-row .checkinout .col-md-6 {
        width: 50%;
        float: left;
    }
}
.reservation-cancelled {
    color: red;
    font-weight: bold;
}

#toolbar joomla-toolbar-button {
    margin-inline-start: .75rem;
}

#toolbar joomla-toolbar-button:first-child {
    margin-inline-start: 0;
}
nav .btn {
    margin: 5px 0;
}

/* API */
p.api_credentials {
    height: inherit;
    padding: 4px 6px;
    border: 1px solid #ccc;
}

/* Single Room types
====================================================================== */
.single_room_type_view #system-readmore {
    display: none;
}
.single_room_type_view .call_to_action {
    text-align: center;
}

/* Direction: rtl
====================================================================== */
html[dir="rtl"] .coupon input {
    float: right;
}
html[dir="rtl"] .button-row .col-md-4 {
    text-align: left;
}
html[dir="rtl"] .extras_row_roomtypeform input[type="checkbox"],
html[dir="rtl"] .extras_row_guestform input[type="checkbox"] {
     float: right;
}
html[dir="rtl"] #solidres .extras_row_roomtypeform input,
html[dir="rtl"] #solidres .extras_row_guestform input {
    margin-right: 0;
    margin-left: 5px;
}
html[dir="rtl"] #solidres .extras_row_roomtypeform select,
html[dir="rtl"] #solidres .extras_row_guestform select {
    margin-left: 5px;
    margin-right: 0;
}
html[dir="rtl"] #solidres .breakdown-row .col-md-2 {
    float: right;
}
html[dir="rtl"] .guestinfo .checkbox input[type="checkbox"] {
    margin-right: 0;
    margin-left: 5px;
}
html[dir="rtl"] .payment_method_list .popover {
    right: inherit !important;
}
html[dir="rtl"] .confirmation .table-bordered td {
    border-left: inherit;
    border-right: 1px solid #ddd;
}
html[dir="rtl"] .confirmation ul {
    margin-right: 25px;
}
html[dir="rtl"] .statistics-box.dark i {
    right: auto;
    left: 0;
}
html[dir="rtl"] div#navigation_links_wrapper div#left_nav_links {
    width: auto;
}
html[dir="rtl"] div.sr_freeze_columns_wrapper {
    float: right;
}
html[dir="rtl"] .navbar .nav > li > a {
    color: #555;
}
@media (max-width: 767px) {
    html[dir="rtl"] .room_num_row > div > div:nth-child(1) {
        text-align: right;
    }
}
/* Wishlist and share box
====================================================================== */
#sr-wishlist .rating {
    color: #f7ba0c;
    font-size: 13px;
    width: 7px;
}
#sr-wishlist .review_stars,
#sr-wishlist .review_count {
    display: inline-block;
    font-weight: 700;
    float: right;
}
#sr-wishlist .room-type-row {
    border-top: 1px solid #eee;
    font-size: 11px;
    padding-top: 5px;
}
#sr-wishlist .name {
    margin-top: 0;
    margin-bottom: 5px;
}
#sr-wishlist .asset-row,
#sr-wishlist .exp-row{
    position: relative;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .4s all ease;
    -moz-transition: .4s all ease;
    -o-transition: .4s all ease;
    transition: .4s all ease;
}
#sr-wishlist .asset-row:hover,
#sr-wishlist .exp-row:hover{
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#sr-wishlist .asset-row a.icon,
#sr-wishlist .exp-row a.icon{
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
}

#sr-wishlist .asset-row:hover a.icon,
#sr-wishlist .exp-row:hover a.icon{
    display: block;
}
#share-box:after,
.sr-wish-list:after {
    display: table;
    content: "";
    clear: both;
}
.sr-wish-list > a,
.sr-wish-list > a:hover,
.sr-wish-list > a:focus {
    display: inline-block!important;
    font-size: 1.2em;
    line-height: 20px;
    border-radius: 50%;
    padding: 5px;
    text-align: center;
    overflow: visible;
}
#share-box p {
    margin: 10px;
}
#share-box p a {
    display: block;
    line-height: 36px;
    background: #EEE;
    padding: 10px;
    font-size: 18px;
}
.sr-wish-list a i.added {
    color: red;
}
#search-results .fa-heart.added {
    color: red;
}
.sr-wish-list {
    text-align: right;
}
#sr-wishlist .room-type-row .inner {
    padding: 5px;
}
@media (max-width: 767px){
    .sr-wish-list {
        text-align: left;
        padding: 5px 0;
    }
}

/* Bootstrap vs UIKit conflicts
====================================================================== */
body {
    padding-left: 0;
    padding-right: 0;
    background-color: transparent;
}
ul.inline,
ol.inline,
ul.unstyled,
ol.unstyled,
.list-striped,
.list-condensed,
.nav:not(.nav-list),
.pager,
.pagination ul {
    padding-left: 0;
}

ul.sr-list-short-code {
    list-style: none;
    width: 450px;
    margin-left: -5px;
}

ul.sr-list-short-code > li {
    display: inline-block;
    margin: 0 5px 5px 5px;
}

ul.sr-list-short-code > li > a {
    width: auto !important;
}

.sr-field-ui-datepicker-container input[type="text"] {
    background: transparent;
}

.nav-tabs .nav-link,
.nav .nav-item,
.form-horizontal .control-label {
    display: block !important;
}

.element-invisible {
    position: absolute;
    padding: 0;
    margin: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
.element-invisible:focus {
    width: auto;
    height: auto;
    overflow: auto;
    background: #eee;
    color: #000;
    padding: 1em;
}

select.ui-datepicker-month {
    float: left;
}

/* Fix conflicts with Helix framework */
.contentpane.com-solidres {
    padding: 0 !important;
}

/* Apartment layout
====================================================================== */
.sr-apartment-container address {
    margin: 0;
}
.sr-apartment-box {
    margin: 0 0 15px 0;
    padding: 15px;
    border: 1px solid #EEE;
}
.sr-apartment-box .sr-review,
.sr-apartment-detail-label .fa {
    color: #f67921;
}
.sr-apartment-box .sr-review {
    padding-top: 8px;
}
.sr-apartment-container .sr-gallery {
    overflow: hidden;
    margin-bottom: 20px;
}
.sr-flex-box {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    flex-wrap: wrap;
}
.sr-apartment-detail-container {
    align-items: center;
}
.sr-apartment-detail {
    text-align: center;
    flex-grow: 1;
    width: 95px;
}
.sr-apartment-detail-value {
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
}
.sr-apartment-container .leader {
    margin-bottom: 20px;
    margin-top: 20px;
    font-weight: bold;
}
#sr-apartment-map {
    height: 280px;
    width: 100%;
}
.sr-apartment-review ul {
    list-style: none;
    margin: 0;
}
.sr-apartment-review .progress {
    margin-bottom: 5px;
}
.sr-apartment-review .bar strong {
    color: #fff;
}
.sr-apartment-review .sr-review {
    border: 1px solid #ddd;
    width: 150px;
    height: 150px;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-weight: bold;
}
.sr-apartment-review .sr-review header {
    font-size: 32px;
    line-height: 34px;
}
#solidres .apartment-form-holder .inner {
    margin: 0;
}
.sr-apartment-top-info p {
    line-height: 28px;
}
.apartment-form-holder .breakdown {
    background: none;
    border: none;
    padding: 0;
}
.apartment-form-holder .breakdown table th,
.apartment-form-holder .breakdown table td {
    border: none;
    padding-left: 0;
    padding-right: 0;
}
.apartment-form-holder .breakdown table td:first-child {
    text-decoration: underline;
}
.sr-apartment-container .sr-list-icon li {
    color: inherit;
}
.sr-apartment-container .sr-list-icon svg[class^="sr-icon-"] {
    fill: currentColor;
}
#session_expiration .modal-body {
    text-align: center;
}
#session_expiration .modal-body .countdown {
    font-size: 24px;
    margin: 15px 0
}
#session_expiration .modal-body .countdown > span {
    display: inline-block;
    padding: 5px 15px;
    background: #222;
    color: #fff;
    border-radius: 4px
}
.payment_processing {
    text-align: center;
}
.processing_screen {
    background: url('../images/loading.gif') center center no-repeat;
    display: block;
    width: 100%;
    height: 68px;
    margin-bottom: 15px;
}

#solidres .modal:not(.in):not(.show) {
    visibility: hidden;
}

.sr-payment-history .alert.alert-info {
    margin: inherit;
}

#solidres a[target="_blank"]::before {
    content: inherit;
}

#solidres #adminForm table tbody td > .alert.alert-warning {
    margin: 0;
    padding: 0.5em;
}

/* Joomla modal width height modifier
====================================================================== */
.jviewport-height10 {
    height: 10vh;
}
.jviewport-height20 {
    height: 20vh;
}
.jviewport-height30 {
    height: 30vh;
}
.jviewport-height40 {
    height: 40vh;
}
.jviewport-height50 {
    height: 50vh;
}
.jviewport-height60 {
    height: 60vh;
}
.jviewport-height70 {
    height: 70vh;
}
.jviewport-height80 {
    height: 80vh;
}
.jviewport-height90 {
    height: 90vh;
}
.jviewport-height100 {
    height: 100vh;
}

[class*=jviewport-height] iframe {
    height: 100%;
}

.modal-dialog.jviewport-width10 {
    width: 10vw;
    max-width: none;
}
.modal-dialog.jviewport-width20 {
    width: 20vw;
    max-width: none;
}
.modal-dialog.jviewport-width30 {
    width: 30vw;
    max-width: none;
}
.modal-dialog.jviewport-width40 {
    width: 40vw;
    max-width: none;
}
.modal-dialog.jviewport-width50 {
    width: 50vw;
    max-width: none;
}
.modal-dialog.jviewport-width60 {
    width: 60vw;
    max-width: none;
}
.modal-dialog.jviewport-width70 {
    width: 70vw;
    max-width: none;
}
.modal-dialog.jviewport-width80 {
    width: 80vw;
    max-width: none;
}
.modal-dialog.jviewport-width90 {
    width: 90vw;
    max-width: none;
}
.modal-dialog.jviewport-width100 {
    width: 100vw;
    max-width: none;
}

.modal iframe {
    width: 100%;
}

/* ======================================================================
   Modern booking date picker — sr-booking-calendar (Vanilla Calendar Pro)
   ----------------------------------------------------------------------
   VCP ships its own light/dark themes and is mounted with
   selectedTheme:'system', so the calendar internals
   already follow prefers-color-scheme. These BEM rules add the Solidres layout
   chrome, a brand accent over VCP's default slate/orange palette, and tokenised
   dark-mode values (both prefers-color-scheme and Joomla's [data-bs-theme]).
   The legacy .ui-datepicker rules above stay for datepicker_engine=legacy.
   ====================================================================== */
.sr-booking-calendar {
    --sr-bc-accent:      #1f496e;
    --sr-bc-accent-text: #ffffff;
    --sr-bc-range-bg:    rgba(31, 73, 110, 0.14);
    --sr-bc-focus:       #1f496e;

    display: block;
    margin: 0 auto;
}

@media (prefers-color-scheme: dark) {
    .sr-booking-calendar {
        --sr-bc-accent:      #4a90d9;
        --sr-bc-accent-text: #0d1117;
        --sr-bc-range-bg:    rgba(74, 144, 217, 0.22);
        --sr-bc-focus:       #4a90d9;
    }
}

[data-bs-theme="dark"] .sr-booking-calendar {
    --sr-bc-accent:      #4a90d9;
    --sr-bc-accent-text: #0d1117;
    --sr-bc-range-bg:    rgba(74, 144, 217, 0.22);
    --sr-bc-focus:       #4a90d9;
}

/* Selected range endpoints (check-in / check-out) — brand accent */
.sr-booking-calendar [data-vc-date-selected] .vc-date__btn,
.sr-booking-calendar [data-vc-date-selected=first] .vc-date__btn,
.sr-booking-calendar [data-vc-date-selected=last] .vc-date__btn,
.sr-booking-calendar [data-vc-date-selected=first-and-last] .vc-date__btn {
    background-color: var(--sr-bc-accent) !important;
    color: var(--sr-bc-accent-text) !important;
}

/* Range middle — subtle accent tint */
.sr-booking-calendar [data-vc-date-selected=middle] .vc-date__btn {
    background-color: var(--sr-bc-range-bg) !important;
    color: inherit !important;
    border-radius: 0 !important;
}

/* Visible keyboard focus ring (WCAG 2.1 AA) */
.sr-booking-calendar [data-vc=calendar] [tabindex="0"]:focus-visible,
.sr-booking-calendar [data-vc=calendar] button:focus-visible,
.sr-booking-calendar[data-vc=calendar]:focus-visible {
    outline-color: var(--sr-bc-focus) !important;
}

/* ----------------------------------------------------------------------
   Unified OTA-style check-in / check-out trigger (Agoda-style split box).
   One bordered box with a check-in cell and a check-out cell separated by a
   divider; each cell is its own focusable <button> so keyboard + screen-reader
   users keep two distinct controls. booking-calendar.js writes the date +
   weekday into the inner spans and toggles the popup; the hidden checkin/checkout
   inputs stay the source of truth. Tokens live on __fields (a sibling of the
   .sr-booking-calendar mount, so it can't inherit the mount's variables).
   ---------------------------------------------------------------------- */
.sr-booking-calendar__fields {
    --sr-bc-field-bg:     #ffffff;
    --sr-bc-field-border: rgba(0, 0, 0, 0.18);
    --sr-bc-field-hover:  rgba(0, 0, 0, 0.04);
    --sr-bc-field-accent: #1f496e;
    --sr-bc-field-focus:  #1f496e;

    display: flex;
    align-items: stretch;
    margin-bottom: 0.75rem;
    border: 1px solid var(--sr-bc-field-border);
    border-radius: 0.5rem;
    background-color: var(--sr-bc-field-bg);
    overflow: hidden;
}

@media (prefers-color-scheme: dark) {
    .sr-booking-calendar__fields {
        --sr-bc-field-bg:     #1b1f24;
        --sr-bc-field-border: rgba(255, 255, 255, 0.2);
        --sr-bc-field-hover:  rgba(255, 255, 255, 0.06);
        --sr-bc-field-accent: #4a90d9;
        --sr-bc-field-focus:  #4a90d9;
    }
}

[data-bs-theme="dark"] .sr-booking-calendar__fields {
    --sr-bc-field-bg:     #1b1f24;
    --sr-bc-field-border: rgba(255, 255, 255, 0.2);
    --sr-bc-field-hover:  rgba(255, 255, 255, 0.06);
    --sr-bc-field-accent: #4a90d9;
    --sr-bc-field-focus:  #4a90d9;
}

.sr-booking-calendar__cell {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    margin: 0;
    padding: 0.55rem 0.8rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sr-booking-calendar__cell:hover {
    background-color: var(--sr-bc-field-hover);
}

.sr-booking-calendar__cell:focus-visible {
    outline: 2px solid var(--sr-bc-field-focus);
    outline-offset: -2px;
}

.sr-booking-calendar__cell-icon {
    flex: 0 0 auto;
    color: var(--sr-bc-field-accent);
    font-size: 1rem;
    line-height: 1;
}

.sr-booking-calendar__cell-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.sr-booking-calendar__cell-caption {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-booking-calendar__date {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-booking-calendar__cell.is-empty .sr-booking-calendar__date {
    font-weight: 400;
    opacity: 0.55;
}

.sr-booking-calendar__weekday {
    min-height: 1em;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.6;
}

.sr-booking-calendar__sep {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 0.4rem 0;
    background-color: var(--sr-bc-field-border);
}

/* Narrow hosts (e.g. sidebar/search modules): stack the two cells and flip the
   divider. Scoped to .sr-booking-calendar-host (set on the modern layout roots),
   so the containment context never touches the shared legacy .sr-datepickers. */
.sr-booking-calendar-host {
    container-type: inline-size;
}

@container (max-width: 20rem) {
    .sr-booking-calendar__fields {
        flex-direction: column;
    }

    .sr-booking-calendar__sep {
        margin: 0 0.8rem;
    }
}

/* Popup mode — booking-calendar.js wraps the Vanilla Calendar Pro mount in a
   .sr-booking-calendar-popup container it owns and toggles .is-open. The calendar
   is hidden until a check-in / check-out display field is activated, then floats as
   a dropdown below those fields (JS sets the exact `top`; top:100% is the fallback).
   Styling the wrapper — not the mount — avoids fighting VCP's own
   [data-vc=calendar]{display:flex} on the mount element. The VCP root already paints
   its themed background + rounded corners, so the wrapper only adds the drop shadow
   and the positioning. The mount's parent is made a positioning context in JS, so no
   global rule is forced onto the shared .sr-datepickers. */
.sr-booking-calendar-popup {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1050;
    display: none;
    width: max-content;
    max-width: min(100vw, 40rem);
    margin: 0;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}

.sr-booking-calendar-popup.is-open {
    display: block;
}

/* ======================================================================
   OTA-style occupancy field — sr-occupancy (Guests & rooms popover)
   ----------------------------------------------------------------------
   A trigger button ("2 adults · 2 children · 1 room") + a popover panel
   with a Rooms stepper and per-room
   Adults/Children (or Guests) steppers; child ages stay dropdowns. search-occupancy.js
   drives the hidden room_opt[...] <select> controls behind these steppers.
   Tokens mirror the sr-booking-calendar accent, with dark mode via both
   prefers-color-scheme and Joomla's [data-bs-theme].
   ====================================================================== */
.sr-occupancy {
    --sr-occ-accent:  #1f496e;
    --sr-occ-bg:      #ffffff;
    --sr-occ-fg:      inherit;
    --sr-occ-border:  rgba(0, 0, 0, 0.18);
    --sr-occ-muted:   rgba(0, 0, 0, 0.55);
    --sr-occ-hover:   rgba(0, 0, 0, 0.04);

    position: relative;
    display: block;
}

@media (prefers-color-scheme: dark) {
    .sr-occupancy {
        --sr-occ-accent: #4a90d9;
        --sr-occ-bg:     #1b1f24;
        --sr-occ-border: rgba(255, 255, 255, 0.2);
        --sr-occ-muted:  rgba(255, 255, 255, 0.55);
        --sr-occ-hover:  rgba(255, 255, 255, 0.06);
    }
}

[data-bs-theme="dark"] .sr-occupancy {
    --sr-occ-accent: #4a90d9;
    --sr-occ-bg:     #1b1f24;
    --sr-occ-border: rgba(255, 255, 255, 0.2);
    --sr-occ-muted:  rgba(255, 255, 255, 0.55);
    --sr-occ-hover:  rgba(255, 255, 255, 0.06);
}

.sr-occupancy__field-label {
    display: block;
}

/* Trigger — a form-control-height button that reads as a sibling field. */
.sr-occupancy__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--sr-occ-border);
    border-radius: 0.375rem;
    background-color: var(--sr-occ-bg);
    color: var(--sr-occ-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sr-occupancy__trigger:hover {
    background-color: var(--sr-occ-hover);
}

.sr-occupancy__trigger:focus-visible {
    outline: 2px solid var(--sr-occ-accent);
    outline-offset: -2px;
}

.sr-occupancy__summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wraps the (optional) caption + the summary as a stacked text block. The icon
   and caption are shown only inside the unified .sr-search-bar (see below); in
   standalone mode the trigger reads exactly as before — just the summary. */
.sr-occupancy__trigger-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.sr-occupancy__trigger-icon,
.sr-occupancy__caption {
    display: none;
}

.sr-occupancy__chevron {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 0.32em solid transparent;
    border-right: 0.32em solid transparent;
    border-top: 0.34em solid currentColor;
    opacity: 0.6;
}

/* Popover panel. */
.sr-occupancy__panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 16rem;
    max-width: min(100vw, 22rem);
    margin-top: 0.35rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--sr-occ-border);
    border-radius: 0.5rem;
    background-color: var(--sr-occ-bg);
    color: var(--sr-occ-fg);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}

.sr-occupancy__panel[hidden] {
    display: none;
}

.sr-occupancy__row--rooms,
.sr-occupancy__room {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sr-occ-border);
}

.sr-occupancy__room:last-of-type {
    border-bottom: 0;
}

.sr-occupancy__room-title {
    margin-bottom: 0.25rem;
    font-weight: 600;
    font-size: 0.85rem;
}

/* A control row: label on the left, stepper on the right. */
.sr-occupancy__control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0;
}

.sr-occupancy__control-label {
    font-size: 0.9rem;
}

.sr-occupancy__stepper {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sr-occupancy__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--sr-occ-accent);
    border-radius: 50%;
    background: transparent;
    color: var(--sr-occ-accent);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.sr-occupancy__step:hover:not(:disabled) {
    background-color: var(--sr-occ-hover);
}

.sr-occupancy__step:focus-visible {
    outline: 2px solid var(--sr-occ-accent);
    outline-offset: 2px;
}

.sr-occupancy__step:disabled {
    opacity: 0.4;
    cursor: default;
}

.sr-occupancy__count {
    min-width: 1.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* The real <select> controls stay in the DOM but are driven by the steppers. */
.sr-occupancy__stepper > select {
    display: none !important;
}

.sr-occupancy__ages {
    margin-top: 0.25rem;
}

.sr-occupancy__age {
    margin-top: 0.4rem;
}

.sr-occupancy__age-label {
    display: block;
    font-size: 0.78rem;
    color: var(--sr-occ-muted);
}

.sr-occupancy__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
}

/* ======================================================================
   OTA-style unified search bar — sr-search-bar
   ----------------------------------------------------------------------
   Joins the date box (field.daterange_fields), the occupancy trigger
   (field.occupancy) and the
   submit button into ONE segmented control — a single outer border, internal
   dividers and equal-height segments — so a search surface reads as one
   [ Dates ] [ Guests & rooms ] [ Search ] control (Booking.com / Agoda pattern).
   Opt-in: only markup wrapped in .sr-search-bar is affected, so surfaces not yet
   migrated keep the standalone component styling. Presentation only — the hidden
   checkin/checkout inputs, the room_opt[...] payload and the JS
   (booking-calendar.js / search-occupancy.js) are untouched. The bar is its own
   inline-size container so it folds from a row into a stacked card based on the
   slot it occupies (sidebar / mobile), not the viewport.
   ====================================================================== */
.sr-search-bar {
    --sr-sb-bg:          #ffffff;
    --sr-sb-border:      rgba(0, 0, 0, 0.18);
    --sr-sb-accent:      #1f496e;
    --sr-sb-accent-text: #ffffff;

    display: flex;
    /* flex-wrap + the container query below drive the responsive fold. The bar
       cannot restyle ITSELF from its own @container (a container query only reaches
       descendants), so the fold widens the *segments* to 100% and lets them wrap
       onto their own rows — turning the row into a stacked card without the bar
       element itself having to change flex-direction. */
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 0.75rem;
    border: 1px solid var(--sr-sb-border);
    border-radius: 0.6rem;
    background-color: var(--sr-sb-bg);
    container-type: inline-size;
    container-name: sr-search-bar;
}

@media (prefers-color-scheme: dark) {
    .sr-search-bar {
        --sr-sb-bg:          #1b1f24;
        --sr-sb-border:      rgba(255, 255, 255, 0.2);
        --sr-sb-accent:      #4a90d9;
        --sr-sb-accent-text: #0d1117;
    }
}

[data-bs-theme="dark"] .sr-search-bar {
    --sr-sb-bg:          #1b1f24;
    --sr-sb-border:      rgba(255, 255, 255, 0.2);
    --sr-sb-accent:      #4a90d9;
    --sr-sb-accent-text: #0d1117;
}

/* Direct children are the segments; a divider sits between them. */
.sr-search-bar > * {
    min-width: 0;
}

.sr-search-bar > * + * {
    border-left: 1px solid var(--sr-sb-border);
}

/* --- Date segment: drop the standalone box, keep the two inner cells + divider. --- */
.sr-search-bar .sr-booking-calendar-wrap {
    flex: 1.6 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.sr-search-bar .sr-booking-calendar__fields {
    flex: 0 0 auto;
    /* Force the two cells side-by-side inside the bar, overriding the date box's
       own `sr-booking-calendar-host` 20rem container query (higher specificity):
       only the bar-level fold below should stack them, never an intermediate width. */
    flex-direction: row;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.sr-search-bar .sr-booking-calendar__sep {
    margin: 0.4rem 0;
}

/* --- Guests segment: the trigger becomes a borderless caption + summary cell. --- */
.sr-search-bar .sr-occupancy {
    flex: 1.1 1 0;
    display: flex;
    align-items: stretch;
}

.sr-search-bar .sr-occupancy__field-label {
    display: none;
}

.sr-search-bar .sr-occupancy__trigger {
    flex: 1 1 auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 0;
    padding: 0.55rem 0.85rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sr-search-bar .sr-occupancy__trigger-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--sr-sb-accent);
    font-size: 1rem;
    line-height: 1;
}

.sr-search-bar .sr-occupancy__caption {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-search-bar .sr-occupancy__summary {
    font-size: 0.95rem;
    font-weight: 600;
}

/* --- Generic select segment (e.g. the room-type dropdown): a borderless native
       <select> presented as an icon + caption + value cell, matching the peers. --- */
.sr-search-bar__seg--select {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1.1 1 0;
    min-width: 0;
    padding: 0.55rem 0.85rem;
}

.sr-search-bar__seg-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--sr-sb-accent);
    font-size: 1rem;
    line-height: 1;
}

.sr-search-bar__seg-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
}

.sr-search-bar__seg-caption {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-search-bar__seg-select {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.sr-search-bar__seg-select:focus-visible {
    outline: 2px solid var(--sr-sb-accent);
    outline-offset: 2px;
}

/* --- Action segment: the submit button as a full-height accent end cap. --- */
.sr-search-bar__action {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

.sr-search-bar > .sr-search-bar__action {
    border-left: 0;
}

.sr-search-bar__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 0 0.6rem 0.6rem 0;
    background-color: var(--sr-sb-accent);
    color: var(--sr-sb-accent-text);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.sr-search-bar__submit:hover {
    filter: brightness(1.08);
}

.sr-search-bar__submit:focus-visible {
    outline: 2px solid var(--sr-sb-accent);
    outline-offset: 2px;
}

/* Narrow slot: fold the row into one stacked card — dividers flip to rows and
   the action spans full width. */
@container sr-search-bar (max-width: 46rem) {
    /* Widen every segment to a full row so flex-wrap stacks them into a card.
       Targeted per-segment (not `.sr-search-bar { flex-direction:column }`, which
       would try — and fail — to restyle the container from its own query). */
    .sr-search-bar .sr-booking-calendar-wrap,
    .sr-search-bar .sr-occupancy,
    .sr-search-bar .sr-search-bar__seg--select,
    .sr-search-bar .sr-search-bar__action {
        flex: 1 1 100%;
    }

    .sr-search-bar > * + * {
        border-left: 0;
        border-top: 1px solid var(--sr-sb-border);
    }

    .sr-search-bar .sr-booking-calendar__fields {
        flex-direction: column;
    }

    .sr-search-bar .sr-booking-calendar__sep {
        align-self: stretch;
        width: auto;
        height: 1px;
        margin: 0 0.85rem;
    }

    .sr-search-bar__submit {
        width: 100%;
        border-radius: 0 0 0.6rem 0.6rem;
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }
}

/* ======================================================================
   Inline availability calendar — sr-availability-calendar
   ----------------------------------------------------------------------
   Vanilla Calendar Pro in multi-select mode for the admin availability
   fields (multi-date toggle).
   VCP ships its own light/dark theme (selectedTheme:'system'); these rules
   add the Solidres brand accent on selected days + a visible focus ring.
   ====================================================================== */
.sr-availability-calendar {
    --sr-ac-accent:      #1f496e;
    --sr-ac-accent-text: #ffffff;

    display: block;
}

@media (prefers-color-scheme: dark) {
    .sr-availability-calendar {
        --sr-ac-accent:      #4a90d9;
        --sr-ac-accent-text: #0d1117;
    }
}

[data-bs-theme="dark"] .sr-availability-calendar {
    --sr-ac-accent:      #4a90d9;
    --sr-ac-accent-text: #0d1117;
}

.sr-availability-calendar [data-vc-date-selected] .vc-date__btn {
    background-color: var(--sr-ac-accent) !important;
    color: var(--sr-ac-accent-text) !important;
}

.sr-availability-calendar [data-vc=calendar] [tabindex="0"]:focus-visible,
.sr-availability-calendar [data-vc=calendar] button:focus-visible {
    outline-color: var(--sr-ac-accent) !important;
}

/* Bulk-action toolbar — keyboard-accessible "Select all shown" / "Clear" that replace the
   legacy month-header-click gesture. Colours ride Bootstrap/Atum tokens, so they flip under
   [data-bs-theme="dark"] automatically; prefers-color-scheme fallbacks cover non-Atum hosts. */
.sr-availability-calendar__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.sr-availability-calendar__bulk {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .25rem .6rem;
    font-size: .8125rem;
    line-height: 1.4;
    cursor: pointer;
    color: var(--bs-body-color, #212529);
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
}

.sr-availability-calendar__bulk:hover {
    background-color: var(--bs-secondary-bg, #e9ecef);
}

.sr-availability-calendar__bulk:focus-visible {
    outline: 2px solid #1f496e;
    outline-offset: 1px;
}

.sr-availability-calendar__hint {
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Make VCP's week-number column read as an interactive toggle (mouse enhancement; the
   toolbar buttons are the keyboard-accessible path). */
.sr-availability-calendar [data-vc-week-number] {
    cursor: pointer;
}

.sr-availability-calendar [data-vc-week-number]:hover {
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .sr-availability-calendar__bulk {
        color: var(--bs-body-color, #e6edf3);
        background-color: var(--bs-tertiary-bg, #21262d);
        border-color: var(--bs-border-color, #30363d);
    }
    .sr-availability-calendar__bulk:hover {
        background-color: var(--bs-secondary-bg, #30363d);
    }
    .sr-availability-calendar__bulk:focus-visible {
        outline-color: #4a90d9;
    }
    .sr-availability-calendar__hint {
        color: var(--bs-secondary-color, #8b949e);
    }
}

[data-bs-theme="dark"] .sr-availability-calendar__bulk:focus-visible {
    outline-color: #4a90d9;
}

/* ======================================================================
   Dark mode — legacy rules
   ----------------------------------------------------------------------
   Append-only overrides for the older, non-tokenised rules above that still
   hardcode light surfaces / borders / forced-dark text. The tokenised
   components (availability + booking calendars, occupancy, search bar, the
   sidenav) already ship their own dark blocks and are NOT touched here. Each
   rule is repeated under BOTH dark signals: inside
   @media (prefers-color-scheme: dark) the same selector wins by source order
   (it is later in the file); the [data-bs-theme="dark"] copy wins by higher
   specificity for hosts that toggle Bootstrap's attribute instead of following
   the OS. Light mode is never affected — nothing here applies without a dark
   signal, and only colours are changed (no layout / spacing / sizing).
   Shared palette: surface #1b1f24 · raised band #22272e · zebra #262b32 ·
   hairline rgba(255,255,255,0.14) · stronger rgba(255,255,255,0.22) ·
   forced text #e6e6e6 · amber-tint callout rgba(255,187,0,0.12)/#b58a00.
   ====================================================================== */
@media (prefers-color-scheme: dark) {
    /* Reservation detail box heading — was light band (#eee) + black text. */
    .reservation-detail-box > h3 {
        background-color: #262b32;
        border-color: rgba(255, 255, 255, 0.14);
        color: #e6e6e6;
    }
    .reservation-details li {
        border-bottom-color: rgba(255, 255, 255, 0.14);
    }
    .booked_room_cost_wrapper {
        border-color: rgba(255, 255, 255, 0.14);
    }
    .reservation-note-item {
        border-left-color: rgba(255, 255, 255, 0.22);
    }
    #solidres .room_selection_wrapper {
        background-color: #22272e;
        border-color: rgba(255, 255, 255, 0.14);
    }
    .rooms-rates-summary .sticky-loading {
        background-color: #1b1f24;
    }
    .sr-overlay {
        background-color: #1b1f24;
    }

    /* Confirmation table hairlines (#ddd). */
    #reservation-confirmation-box .table tr.nobordered.first td,
    #reservation-confirmation-box .table tr.nobordered.termsandconditions td,
    #reservation-confirmation-box .table tr.nobordered.sendoutgoingemails td {
        border-top-color: rgba(255, 255, 255, 0.14);
    }

    /* Coupon callout — was pale-amber tint (#fff4c8) with amber dashed edge. */
    .coupon {
        background-color: rgba(255, 187, 0, 0.12);
        border-color: #b58a00;
    }

    /* Room-count fieldset. */
    .room_num_row fieldset {
        background-color: #22272e;
    }
    .room_num_row fieldset legend {
        border-bottom-color: rgba(255, 255, 255, 0.14);
    }

    /* Legacy jQuery-UI datepicker (only used when datepicker_engine=legacy). */
    .ui-datepicker .ui-state-default,
    .ui-datepicker .ui-widget-content .ui-state-default,
    .ui-datepicker .ui-widget-header .ui-state-default {
        border-color: rgba(255, 255, 255, 0.14);
    }
    .ui-datepicker .ui-state-highlight,
    .ui-datepicker .ui-widget-content .ui-state-highlight,
    .ui-datepicker .ui-widget-header .ui-state-highlight {
        background-color: #262b32;
        border-color: rgba(255, 255, 255, 0.14);
    }
    .ui-datepicker a.ui-state-default:hover {
        background-color: #262b32;
        border-color: rgba(255, 255, 255, 0.14);
    }
    .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
        background-color: #262b32;
        border-color: rgba(255, 255, 255, 0.14);
    }
    /* Bookable days: pale-teal fill (#edf6f6) → dark teal tint; the teal text is
       lifted so it keeps AA contrast on the darker cell. */
    td.bookable a.ui-state-default,
    td.bookable.ui-datepicker-unselectable a.ui-state-default {
        background-color: rgba(0, 132, 137, 0.22);
        color: #63c7cb;
    }
    td.bookable a.ui-state-default:hover,
    td.bookable.ui-datepicker-unselectable a.ui-state-default:hover {
        background-color: rgba(0, 132, 137, 0.4);
    }

    /* Prioritised room-type notice — was solid white panel + light dashed edges. */
    .prioritizing-roomtype-notice {
        background-color: #1b1f24;
        border-color: rgba(255, 255, 255, 0.14);
    }
    .tariff-sep {
        border-color: rgba(255, 255, 255, 0.14);
    }

    /* Price-breakdown + extras boxes (#f4f4f4 / #e7e7e7). */
    .breakdown {
        background-color: #22272e;
        border-color: rgba(255, 255, 255, 0.14);
    }
    .breakdown-row .breakdown-wday {
        background-color: #262b32;
    }
    .extra_details {
        background-color: #22272e;
        border-color: rgba(255, 255, 255, 0.14);
    }

    .custom-field-row {
        border-bottom-color: rgba(255, 255, 255, 0.14);
    }
    #solidres .payment_method_details {
        background-color: #22272e;
        border-color: rgba(255, 255, 255, 0.14);
    }
    .reservation-row {
        border-color: rgba(255, 255, 255, 0.14);
    }
    p.api_credentials {
        border-color: rgba(255, 255, 255, 0.14);
    }
    #sr-wishlist .room-type-row {
        border-top-color: rgba(255, 255, 255, 0.14);
    }
    #share-box p a {
        background-color: #262b32;
    }

    /* Skip-link / accessibility focus reveal — was light band + black text. */
    .element-invisible:focus {
        background-color: #262b32;
        color: #e6e6e6;
    }

    /* Apartment layout. */
    .sr-apartment-box {
        border-color: rgba(255, 255, 255, 0.14);
    }
    .sr-apartment-review .sr-review {
        border-color: rgba(255, 255, 255, 0.14);
    }

    /* Loading skeleton shimmer — light gradient → dark grey shimmer. */
    .sr-placeholder {
        background-color: #262b32;
        background-image: linear-gradient(to right, #262b32 8%, #2f353d 18%, #262b32 33%);
    }
}

/* [data-bs-theme="dark"] mirror — wins by specificity on hosts that toggle
   Bootstrap's attribute rather than following the OS preference. */
[data-bs-theme="dark"] .reservation-detail-box > h3 {
    background-color: #262b32;
    border-color: rgba(255, 255, 255, 0.14);
    color: #e6e6e6;
}
[data-bs-theme="dark"] .reservation-details li {
    border-bottom-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .booked_room_cost_wrapper {
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .reservation-note-item {
    border-left-color: rgba(255, 255, 255, 0.22);
}
[data-bs-theme="dark"] #solidres .room_selection_wrapper {
    background-color: #22272e;
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .rooms-rates-summary .sticky-loading {
    background-color: #1b1f24;
}
[data-bs-theme="dark"] .sr-overlay {
    background-color: #1b1f24;
}
[data-bs-theme="dark"] #reservation-confirmation-box .table tr.nobordered.first td,
[data-bs-theme="dark"] #reservation-confirmation-box .table tr.nobordered.termsandconditions td,
[data-bs-theme="dark"] #reservation-confirmation-box .table tr.nobordered.sendoutgoingemails td {
    border-top-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .coupon {
    background-color: rgba(255, 187, 0, 0.12);
    border-color: #b58a00;
}
[data-bs-theme="dark"] .room_num_row fieldset {
    background-color: #22272e;
}
[data-bs-theme="dark"] .room_num_row fieldset legend {
    border-bottom-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .ui-datepicker .ui-state-default,
[data-bs-theme="dark"] .ui-datepicker .ui-widget-content .ui-state-default,
[data-bs-theme="dark"] .ui-datepicker .ui-widget-header .ui-state-default {
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .ui-datepicker .ui-state-highlight,
[data-bs-theme="dark"] .ui-datepicker .ui-widget-content .ui-state-highlight,
[data-bs-theme="dark"] .ui-datepicker .ui-widget-header .ui-state-highlight {
    background-color: #262b32;
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .ui-datepicker a.ui-state-default:hover {
    background-color: #262b32;
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    background-color: #262b32;
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] td.bookable a.ui-state-default,
[data-bs-theme="dark"] td.bookable.ui-datepicker-unselectable a.ui-state-default {
    background-color: rgba(0, 132, 137, 0.22);
    color: #63c7cb;
}
[data-bs-theme="dark"] td.bookable a.ui-state-default:hover,
[data-bs-theme="dark"] td.bookable.ui-datepicker-unselectable a.ui-state-default:hover {
    background-color: rgba(0, 132, 137, 0.4);
}
[data-bs-theme="dark"] .prioritizing-roomtype-notice {
    background-color: #1b1f24;
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .tariff-sep {
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .breakdown {
    background-color: #22272e;
    border-color: rgba(255, 255, 255, 0.14);
}
/* Keep the apartment layout's intentionally chrome-less breakdown transparent
   (mirrors the light-mode .apartment-form-holder .breakdown reset, which the
   OS-preference block above already keeps via its higher specificity). */
[data-bs-theme="dark"] .apartment-form-holder .breakdown {
    background-color: transparent;
}
[data-bs-theme="dark"] .breakdown-row .breakdown-wday {
    background-color: #262b32;
}
[data-bs-theme="dark"] .extra_details {
    background-color: #22272e;
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .custom-field-row {
    border-bottom-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] #solidres .payment_method_details {
    background-color: #22272e;
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .reservation-row {
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] p.api_credentials {
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] #sr-wishlist .room-type-row {
    border-top-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] #share-box p a {
    background-color: #262b32;
}
[data-bs-theme="dark"] .element-invisible:focus {
    background-color: #262b32;
    color: #e6e6e6;
}
[data-bs-theme="dark"] .sr-apartment-box {
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .sr-apartment-review .sr-review {
    border-color: rgba(255, 255, 255, 0.14);
}
[data-bs-theme="dark"] .sr-placeholder {
    background-color: #262b32;
    background-image: linear-gradient(to right, #262b32 8%, #2f353d 18%, #262b32 33%);
}

/* ======================================================================
   Mobile fullscreen sheet shell — sr-sheet
   ----------------------------------------------------------------------
   Below the mobile breakpoint the OTA popups (date range picker, occupancy
   popover) stop being
   anchored dropdowns and become fullscreen sheets, Agoda-style: sticky titled
   header with a back control, scrolling body, sticky footer.

   sr-sheet.js portals the shell to <body> — a `transform` on any ancestor
   would otherwise trap `position: fixed` — so these selectors must NOT be scoped
   under #solidres or any form wrapper. The shell is only ever mounted below the
   breakpoint (JS is the gate), and it closes itself if the viewport crosses back.
   ====================================================================== */
.sr-sheet {
    --sr-sheet-bg:      #ffffff;
    --sr-sheet-fg:      #1a1a1a;
    --sr-sheet-accent:  #1f496e;
    --sr-sheet-on-accent: #ffffff;
    --sr-sheet-border:  rgba(0, 0, 0, 0.12);
    --sr-sheet-muted:   rgba(0, 0, 0, 0.55);

    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;         /* iOS Safari: 100vh overshoots behind the URL bar */
    background-color: var(--sr-sheet-bg);
    color: var(--sr-sheet-fg);
    overscroll-behavior: contain;
}

/* display:flex would otherwise beat the hidden attribute. */
.sr-sheet[hidden] {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .sr-sheet {
        --sr-sheet-bg:     #16191d;
        --sr-sheet-fg:     #e8eaed;
        --sr-sheet-accent: #2c6fa8;
        --sr-sheet-border: rgba(255, 255, 255, 0.16);
        --sr-sheet-muted:  rgba(255, 255, 255, 0.62);
    }
}

[data-bs-theme="dark"] .sr-sheet,
.sr-sheet[data-bs-theme="dark"] {
    --sr-sheet-bg:     #16191d;
    --sr-sheet-fg:     #e8eaed;
    --sr-sheet-accent: #2c6fa8;
    --sr-sheet-border: rgba(255, 255, 255, 0.16);
    --sr-sheet-muted:  rgba(255, 255, 255, 0.62);
}

.sr-sheet__header {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    background-color: var(--sr-sheet-accent);
    color: var(--sr-sheet-on-accent);
}

.sr-sheet__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;         /* >= 44px touch target (WCAG 2.5.5) */
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.sr-sheet__back:focus-visible {
    outline: 2px solid var(--sr-sheet-on-accent);
    outline-offset: -2px;
}

.sr-sheet__title {
    flex: 1 1 auto;
    margin: 0;
    padding-inline-end: 2.75rem;   /* balance the back button so the title centres */
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: inherit;
}

/* Optional region under the header — the date sheet puts its relocated
   check-in / check-out fields here, on the accent background. */
.sr-sheet__slot:not(:empty) {
    flex: none;
    padding: 0 0.75rem 0.75rem;
    background-color: var(--sr-sheet-accent);
    color: var(--sr-sheet-on-accent);
}

.sr-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.sr-sheet__footer:not(:empty) {
    flex: none;
    padding: 0.75rem;
    border-top: 1px solid var(--sr-sheet-border);
    background-color: var(--sr-sheet-bg);
    /* Keep the confirm button clear of the iOS home indicator. */
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* ----------------------------------------------------------------------
   Date sheet (.sr-sheet--dates)
   ---------------------------------------------------------------------- */

/* The popup wrapper keeps its identity when moved into the sheet, so its
   dropdown positioning/chrome has to be neutralised here. */
.sr-sheet--dates .sr-booking-calendar-popup {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
}

.sr-sheet--dates .sr-booking-calendar,
.sr-sheet--dates .sr-booking-calendar [data-vc=calendar] {
    width: 100%;
    max-width: none;
}

/* Vertical month stack — VCP lays [data-vc=grid] out as a wrapping flex row. */
.sr-sheet--dates [data-vc=grid] {
    flex-direction: column;
    gap: 1.25rem;
}

/* The relocated fields block sits on the accent header: drop the standalone box
   chrome and let it inherit the header's colours. */
.sr-sheet--dates .sr-booking-calendar__fields {
    margin-bottom: 0;
    border-color: rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.12);
}

.sr-sheet--dates .sr-booking-calendar__cell {
    color: var(--sr-sheet-on-accent);
}

.sr-sheet--dates .sr-booking-calendar__cell-caption,
.sr-sheet--dates .sr-booking-calendar__weekday {
    color: rgba(255, 255, 255, 0.8);
}

.sr-sheet--dates .sr-booking-calendar__cell:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sr-sheet--dates .sr-booking-calendar__sep {
    border-color: rgba(255, 255, 255, 0.35);
}

.sr-booking-calendar__sheet-confirm {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 2rem;
    background-color: var(--sr-sheet-accent);
    color: var(--sr-sheet-on-accent);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.sr-booking-calendar__sheet-confirm:disabled {
    opacity: 0.45;
    cursor: default;
}

.sr-booking-calendar__sheet-confirm:focus-visible {
    outline: 2px solid var(--sr-sheet-fg);
    outline-offset: 2px;
}

/* Zero-height probe watched by an IntersectionObserver to extend the month stack. */
.sr-booking-calendar__sheet-sentinel {
    height: 1px;
}

/* ----------------------------------------------------------------------
   Occupancy sheet (.sr-sheet--occupancy)
   ---------------------------------------------------------------------- */

/* Only the panel is portalled to <body> — .sr-occupancy, which declares the
   --sr-occ-* tokens, stays behind in the form, so every token the panel's rules
   reference is undefined inside the sheet (steppers lose their accent circle,
   age labels lose their muted colour). Re-declare them on the shell, mapped onto
   the sheet's own tokens so light and dark stay in step. */
.sr-sheet--occupancy {
    --sr-occ-accent: var(--sr-sheet-accent);
    --sr-occ-bg:     var(--sr-sheet-bg);
    --sr-occ-fg:     var(--sr-sheet-fg);
    --sr-occ-border: var(--sr-sheet-border);
    --sr-occ-muted:  var(--sr-sheet-muted);
    /* The sheet has no hover token; a neutral translucent grey reads correctly
       on both the light and the dark sheet ground. */
    --sr-occ-hover:  rgba(127, 127, 127, 0.16);
}

.sr-sheet--occupancy .sr-occupancy__panel {
    position: static;
    min-width: 0;
    max-width: none;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Full-width rows with dividers and comfortable touch targets. */
.sr-sheet--occupancy .sr-occupancy__row--rooms,
.sr-sheet--occupancy .sr-occupancy__room {
    padding: 0;
    border: 0;
}

.sr-sheet--occupancy .sr-occupancy__control {
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--sr-sheet-border);
}

.sr-sheet--occupancy .sr-occupancy__control-label {
    font-size: 1.0625rem;
}

.sr-sheet--occupancy .sr-occupancy__count {
    min-width: 2.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.sr-sheet--occupancy .sr-occupancy__step {
    width: 2.75rem;
    height: 2.75rem;
}

.sr-sheet--occupancy .sr-occupancy__room-title {
    padding: 0.75rem 1rem 0;
    color: var(--sr-sheet-muted);
}

.sr-sheet--occupancy .sr-occupancy__ages {
    padding: 0 1rem 1rem;
}

/* Child-age dropdowns get the same touch sizing as the steppers beside them. */
.sr-sheet--occupancy .sr-occupancy__age {
    margin-top: 0.75rem;
}

.sr-sheet--occupancy .sr-occupancy__age-label {
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
}

.sr-sheet--occupancy .sr-occupancy__age select {
    width: 100%;
    min-height: 2.75rem;
}

/* The relocated footer already carries the Done button — make it the primary
   full-width confirm, matching the date sheet. */
.sr-sheet--occupancy .sr-occupancy__footer {
    margin: 0;
    padding: 0;
    border: 0;
}

.sr-sheet--occupancy .sr-occupancy__done {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 600;
}