/*!------------------------------------------------------------------------
  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;
}
/* Reservation code, status and payment status in a status colour (set in
   Statuses), passed in as --sr-status-color. Some templates also keep an
   inline `color` for older copies of this file, hence !important: dark
   themes mix the colour towards white so a dark status colour stays
   readable. */
.sr-status-text {
    color: var(--sr-status-color);
}
[data-bs-theme="dark"] .sr-status-text {
    color: color-mix(in oklab, var(--sr-status-color) 55%, #fff) !important;
}
.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;
}
/* The hyphens in a formatted date are line-break opportunities; keep each date whole. */
.sr-booking-summary__date {
    white-space: nowrap;
}
.rooms-rates-summary-sticky {
    position: fixed;
    top: 0;
    z-index: 999;
    background: inherit;
}
.rooms-rates-summary {
    position: relative;
}
/* Check-in and check-out sit side by side, and the check-out column drops below when the
   sidebar is too narrow for both. */
.stay-info {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
}
.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%;
}
/* Template override check list: every template's table shares one fixed grid, so the
   columns line up from one template to the next; narrow screens scroll it sideways. */
.sr-system__override-table {
    table-layout: fixed;
    min-width: 44rem;
}
.sr-system__override-col--file {
    width: 30%;
}
.sr-system__override-col--version {
    width: 10rem;
}
.sr-system__override-col--status {
    width: 11rem;
}
/* A folder row heads its group of files. Atum drops the border under the last row of a
   tbody, so the next group draws its own; the tokens follow Atum's light and dark themes. */
.sr-system__override-table .sr-system__override-folder {
    background-color: var(--tertiary-bg, var(--bs-tertiary-bg, #f8f9fa));
}
.sr-system__override-table tbody + tbody .sr-system__override-folder {
    border-top: var(--border-width, 1px) solid var(--border-color, var(--bs-border-color, #dee2e6));
}
.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;
}

/* Property card in a single-property map popup (property-map.js). The popup sits on the map
   provider's own light surface, so the card takes its text colour from there — the title
   inherits rather than picking up a dark-mode heading colour from the page. */
.sr-property-map__popup-title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    color: inherit;
}
.sr-property-map__popup-summary {
    margin: 0 0 0.5rem;
}
.sr-property-map__popup-details {
    margin: 0;
    padding: 0;
    list-style: 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 (Legacy engine: jQuery UI). Colours use Bootstrap 5.3's theme
   variables, with the old literals as fallbacks, so the calendar follows a
   dark theme; the panel itself is jQuery UI's white .ui-widget-content. */
#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.ui-widget-content {
    background: var(--bs-body-bg, #fff);
    border-color: var(--bs-border-color, #c5c5c5);
    color: var(--bs-body-color, #333);
}
.ui-datepicker th {
    font-size: 11px;
    color: var(--bs-secondary-color, #555);
}
.ui-datepicker td span, .ui-datepicker td a {
    padding: 5px;
}
.ui-datepicker .ui-widget-header {
    background: none;
    border: none;
    color: var(--bs-info-text-emphasis, 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 var(--bs-border-color, #eee);
    color: var(--bs-secondary-color, #777);
}
.ui-datepicker .ui-state-highlight,
.ui-datepicker .ui-widget-content .ui-state-highlight,
.ui-datepicker .ui-widget-header .ui-state-highlight {
    background: var(--bs-secondary-bg, #eee);
    border: 1px solid var(--bs-border-color, #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: var(--bs-secondary-bg, #eee);
    border: 1px solid var(--bs-border-color, #ddd);
    color: var(--bs-info-text-emphasis, teal);
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    opacity: 1;
    background: var(--bs-secondary-bg, #eee);
    border-color: var(--bs-border-color, #ddd);
    color: var(--bs-info-text-emphasis, 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 var(--bs-border-color, #aaa);
}
td.bookable a.ui-state-default,
td.bookable.ui-datepicker-unselectable a.ui-state-default {
    background: var(--bs-info-bg-subtle, #edf6f6);
    color: var(--bs-info-text-emphasis, #008489);
}
td.bookable a.ui-state-default:hover,
td.bookable.ui-datepicker-unselectable a.ui-state-default:hover {
    background: var(--bs-info-border-subtle, #cceeeb);
}
td.ui-datepicker-current-day.bookable a.ui-state-default {
    font-weight: bold;
}
/* jQuery UI draws the month arrows from a dark sprite. */
[data-bs-theme="dark"] .ui-datepicker .ui-icon {
    filter: invert(1);
}

/* 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 screen and (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-inline-end: 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;
}

/* Room type form extras. Each row is a grid — [checkbox] [name] [quantity],
   then the Details toggle under the name and the details panel full width —
   so a long name wraps inside its own column instead of flowing under the
   checkbox and the quantity select. Scoped under #solidres to outrank the
   legacy .extras_row_roomtypeform rules the same markup still carries. */
#solidres .sr-roomtype-extras {
    margin-bottom: 1rem;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__heading {
    margin-bottom: .5rem;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border-color, var(--bs-border-color, #dee2e6));
    border-radius: var(--border-radius, var(--bs-border-radius, .375rem));
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 .75rem;
    margin: 0;
    padding: .625rem .75rem;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__item + .sr-roomtype-extras__item {
    border-top: 1px solid var(--border-color, var(--bs-border-color, #dee2e6));
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__check {
    grid-column: 1;
    margin: 0;
    cursor: pointer;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__name {
    grid-column: 2;
    display: block;
    margin: 0;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
    cursor: pointer;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__check:disabled,
#solidres .sr-roomtype-extras .sr-roomtype-extras__check:disabled ~ .sr-roomtype-extras__name {
    cursor: default;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__quantity {
    grid-column: 3;
    width: auto;
    min-width: 4.5rem;
    margin: 0;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__meta {
    grid-column: 2 / -1;
    font-size: .875rem;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__details-toggle,
#solidres .sr-room-cost .sr-room-cost__toggle {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--link-color, var(--bs-link-color, #0d6efd));
    font: inherit;
    cursor: pointer;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__details-toggle:hover,
#solidres .sr-room-cost .sr-room-cost__toggle:hover {
    color: var(--link-hover-color, var(--bs-link-hover-color, #0a58ca));
    text-decoration: underline;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__toggle:focus-visible,
#solidres .sr-roomtype-extras .sr-roomtype-extras__details-toggle:focus-visible,
#solidres .sr-room-cost .sr-room-cost__toggle:focus-visible {
    outline: 2px solid var(--link-color, var(--bs-link-color, #0d6efd));
    outline-offset: 2px;
    border-radius: 2px;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__chevron,
#solidres .sr-room-cost .sr-room-cost__chevron {
    font-size: .7em;
    transition: transform .15s ease-in-out;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__details-toggle[aria-expanded="true"] .sr-roomtype-extras__chevron,
#solidres .sr-room-cost .sr-room-cost__toggle[aria-expanded="true"] .sr-room-cost__chevron {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    #solidres .sr-roomtype-extras .sr-roomtype-extras__chevron,
    #solidres .sr-room-cost .sr-room-cost__chevron {
        transition: none;
    }
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__details {
    grid-column: 1 / -1;
    margin: .5rem 0 0;
    border-radius: var(--border-radius-sm, var(--bs-border-radius-sm, .25rem));
    font-size: .875rem;
    line-height: 1.5;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__price {
    margin: 0;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__description {
    margin-top: .375rem;
}
#solidres .sr-roomtype-extras .sr-roomtype-extras__description img {
    max-width: 100%;
    height: auto;
}

/* Room cost heading: the room's price, the Details toggle beside it and the
   tariff breakdown below — outside the <h4>, so the heading is just the price
   and the breakdown's own content (a list and a table) is valid there. The
   toggle shares the extras' Details toggle styles above. */
#solidres .sr-room-cost {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .75rem;
}
#solidres .sr-room-cost .sr-room-cost__breakdown {
    flex-basis: 100%;
    min-width: 0;
    padding: .75rem;
    border-radius: var(--border-radius, var(--bs-border-radius, .375rem));
    font-size: .875rem;
    line-height: 1.5;
}

/* Tariff breakdown: one tile per night (or per package), then the cost
   summary. The tiles wrap to as many columns as fit, so a long stay stays
   short on a phone instead of stacking one night per row. */
#solidres .sr-breakdown .sr-breakdown__rates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr));
    gap: .5rem;
    margin: 0 0 .75rem;
}
#solidres .sr-breakdown .sr-breakdown__rates--per-person {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
#solidres .sr-breakdown .sr-breakdown__rate {
    padding: .375rem .5rem;
    border: 1px solid var(--border-color, var(--bs-border-color, #dee2e6));
    border-radius: var(--border-radius-sm, var(--bs-border-radius-sm, .25rem));
    background-color: var(--body-bg, var(--bs-body-bg, #fff));
}
#solidres .sr-breakdown .sr-breakdown__label,
#solidres .sr-breakdown .sr-breakdown__guest {
    color: var(--secondary-color, var(--bs-secondary-color, #6c757d));
    font-weight: normal;
}
#solidres .sr-breakdown .sr-breakdown__label {
    margin: 0;
    font-size: .75rem;
    line-height: 1.4;
}
#solidres .sr-breakdown .sr-breakdown__amount {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#solidres .sr-breakdown .sr-breakdown__rates--per-person .sr-breakdown__amount {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}
#solidres .sr-breakdown .sr-breakdown__summary {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
#solidres .sr-breakdown .sr-breakdown__summary th,
#solidres .sr-breakdown .sr-breakdown__summary td {
    padding: .375rem 0;
    border: 0;
    border-top: 1px solid var(--border-color, var(--bs-border-color, #dee2e6));
    background: none;
    color: inherit;
    vertical-align: baseline;
}
#solidres .sr-breakdown .sr-breakdown__summary tr:first-child > * {
    border-top: 0;
}
#solidres .sr-breakdown .sr-breakdown__summary th {
    padding-inline-end: .75rem;
    font-weight: normal;
    text-align: start;
}
#solidres .sr-breakdown .sr-breakdown__summary td {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
}

/* 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 */
/* The property page outline is h1 (property) > h2 (room type, the description's
   facilities) > h3 (a room's facilities); the sizes stay where the old h4/h5
   had them so templates without their own heading styles do not jump. In
   layout styles 2 and 3 .roomtype_name is the wrapper around the badges and
   the heading, and the heading keeps its old size through Bootstrap's .h4. */
h2.roomtype_name {
    font-size: 1.5rem;
}
.roomtype_facilities_title {
    font-size: 1.25rem;
}
.sr-asset-facilities-title {
    font-size: 1.75rem;
}

/* The "Read more" that opens the description modal is a control, not a link:
   a button drawn as inline text so it is crawl-safe and keyboard-operable.
   `.btn.sr-readmore` outranks Bootstrap's `.btn` padding whatever the load
   order; a template can still restyle it (no `!important` utility). */
.sr-readmore,
.btn.sr-readmore {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.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: var(--bs-form-invalid-border-color, #b94a48);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: var(--bs-form-invalid-color, #b94a48);
}

.sr-validate label.error,
.room-form label.error,
.sr-experience label.error {
    color: var(--bs-form-invalid-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 .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: var(--bs-progress-bar-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;

    /* This class sits ON the Vanilla Calendar Pro root (booking-calendar.js folds it
       into styles.calendar), so VCP owns `display` here — do not set it. */
    margin: 0 auto;
}

@media screen and (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). The mount is the VCP root itself, so
   the grid is a descendant of .sr-booking-calendar, never a [data-vc=calendar] under it. */
.sr-booking-calendar [tabindex="0"]:focus-visible,
.sr-booking-calendar button:focus-visible,
.sr-booking-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 screen and (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.75;
    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.75;
}

.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;
    }
}

/* Form-field variant — the date box as one field of a labelled form grid (the admin
   and Hub reservation forms). The field label above the box names the two dates, so
   the captions are kept for assistive technology only and the weekday moves inline:
   the box is one text line, and it stretches to the height its grid row gets from the
   input in the neighbouring column, whatever height the template gives its inputs. */
.sr-daterange-field {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sr-daterange-field .sr-booking-calendar-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.sr-daterange-field .sr-booking-calendar__fields {
    flex: 1 1 auto;
    /* Height of an input, for when the field has a grid row of its own (small screens) */
    min-height: calc(1.5em + 1rem + 2px);
    margin-bottom: 0;
    border-color: var(--input-border-color, var(--bs-border-color, var(--sr-bc-field-border)));
    border-radius: var(--border-radius, var(--bs-border-radius, 0.375rem));
    background-color: var(--form-control-bg, var(--bs-body-bg, var(--sr-bc-field-bg)));
}

.sr-daterange-field .sr-booking-calendar__cell {
    position: relative;
    padding: 0.25rem 0.75rem;
}

.sr-daterange-field .sr-booking-calendar__cell-text {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    line-height: 1.5;
}

.sr-daterange-field .sr-booking-calendar__cell-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

/* The date is never the part that gives way; a weekday that runs out of room is */
.sr-daterange-field .sr-booking-calendar__date {
    flex: 0 0 auto;
    max-width: 100%;
    font-size: 1rem;
    font-weight: 400;
}

.sr-daterange-field .sr-booking-calendar__weekday {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    font-size: 0.875rem;
}

/* Side by side in a box too narrow for two dates with their weekdays: both weekdays
   go, together — deciding per cell would keep "Friday" and drop "Wednesday". They stay
   available to assistive technology. Below 20rem the cells stack and have the room. */
@container (width > 20rem) and (width <= 32rem) {
    .sr-daterange-field .sr-booking-calendar__weekday {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
    }
}

/* 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 screen and (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 screen and (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.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* --- Generic select / text segments (room-type dropdown, location, category,
       property name): a borderless native <select> or <input type="text"> presented
       as an icon + caption + value cell, matching the date and guests peers. --- */
.sr-search-bar__seg--select,
.sr-search-bar__seg--input {
    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,
.sr-search-bar__seg-input {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    line-height: inherit;
}

.sr-search-bar__seg-select {
    cursor: pointer;
}

.sr-search-bar__seg-input::placeholder {
    color: inherit;
    font-weight: 400;
    opacity: 0.6;
}

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

/* Awesomplete (location / universal autocomplete) wraps the text input in a
   .awesomplete <div> at runtime; keep that wrapper a full-width block inside the
   segment so the input keeps its cell and the suggestion list drops below it. */
.sr-search-bar .awesomplete {
    display: block;
    min-width: 0;
}

.sr-search-bar .awesomplete > ul {
    font-weight: 400;
    text-align: left;
}

/* --- 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__seg--input,
    .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;
    /* On the VCP root (availability-calendar.js folds it into styles.calendar),
       so VCP owns `display` here. */
}

@media screen and (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 [tabindex="0"]:focus-visible,
.sr-availability-calendar button:focus-visible,
.sr-availability-calendar: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(--body-color, var(--bs-body-color, #212529));
    background-color: var(--tertiary-bg, var(--bs-tertiary-bg, #f8f9fa));
    border: 1px solid var(--border-color, var(--bs-border-color, #dee2e6));
    border-radius: var(--border-radius, var(--bs-border-radius, .375rem));
}

.sr-availability-calendar__bulk:hover {
    background-color: var(--secondary-bg, 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(--secondary-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 screen and (prefers-color-scheme: dark) {
    .sr-availability-calendar__bulk {
        color: var(--body-color, var(--bs-body-color, #e6edf3));
        background-color: var(--tertiary-bg, var(--bs-tertiary-bg, #21262d));
        border-color: var(--border-color, var(--bs-border-color, #30363d));
    }
    .sr-availability-calendar__bulk:hover {
        background-color: var(--secondary-bg, var(--bs-secondary-bg, #30363d));
    }
    .sr-availability-calendar__bulk:focus-visible {
        outline-color: #4a90d9;
    }
    .sr-availability-calendar__hint {
        color: var(--secondary-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 screen and (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).
   Every system dark query in Solidres is `screen and`: Chromium matches
   prefers-color-scheme when printing too, and browsers drop backgrounds on
   paper, so the forced-light text here would print near-invisible.
   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 screen and (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;
    /* Above the mobile booking layers it can be opened from: the fixed .booking-summary
       bar (9999), which would cover the sheet's confirm footer, and the .sr-overlay
       apartment/rooms form (99999), which would hide the sheet entirely. */
    z-index: 100000;
    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 screen and (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 {
    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;
}

/* ======================================================================
   Staff override of the tourist tax — sr-tourist-tax-override
   ----------------------------------------------------------------------
   The block sits in a cell of the amend screen's cost table, which is rendered
   in the administrator and in the Hub partner dashboard alike, so it cannot
   lean on either template's form styling — a bare `.form-control` there leaves
   the reason box at its default two-column width with the label beside it. Its
   own layout lives here, and the panel groups the switch, the reason and their
   help text into one thing between the money rows above and below it.

   Tokens follow this file's convention: light values on the block, overridden
   for `prefers-color-scheme` (the site) and for `[data-bs-theme="dark"]`
   (Joomla's own switch in the administrator).
   ====================================================================== */
.sr-tourist-tax-override {
    --sr-tto-accent:    #1f496e;
    --sr-tto-surface:   rgba(31, 73, 110, 0.05);
    --sr-tto-border:    rgba(0, 0, 0, 0.18);
    --sr-tto-field-bg:  #ffffff;
    --sr-tto-hint:      #5b6572;
    --sr-tto-required:  #9a2b2b;

    padding: 0.9rem 1rem;
    border-left: 3px solid var(--sr-tto-accent);
    background-color: var(--sr-tto-surface);
}

@media screen and (prefers-color-scheme: dark) {
    .sr-tourist-tax-override {
        --sr-tto-accent:   #4a90d9;
        --sr-tto-surface:  rgba(74, 144, 217, 0.10);
        --sr-tto-border:   rgba(255, 255, 255, 0.24);
        --sr-tto-field-bg: #1b1f24;
        --sr-tto-hint:     #a7b0ba;
        --sr-tto-required: #f08a8a;
    }
}

[data-bs-theme="dark"] .sr-tourist-tax-override {
    --sr-tto-accent:   #4a90d9;
    --sr-tto-surface:  rgba(74, 144, 217, 0.10);
    --sr-tto-border:   rgba(255, 255, 255, 0.24);
    --sr-tto-field-bg: #1b1f24;
    --sr-tto-hint:     #a7b0ba;
    --sr-tto-required: #f08a8a;
}

.sr-tourist-tax-override .sr-tourist-tax-override__switch-label {
    font-weight: 600;
}

/* The two help sentences: the one under the switch and the one under the box. */
.sr-tourist-tax-override .sr-tourist-tax-override__hint {
    max-width: 78ch;
    margin: 0.35rem 0 0;
    color: var(--sr-tto-hint);
    font-size: 0.875em;
    line-height: 1.45;
}

.sr-tourist-tax-override .sr-tourist-tax-override__field {
    max-width: 44rem;
    margin-top: 0.9rem;
}

.sr-tourist-tax-override .sr-tourist-tax-override__label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
}

/* Joomla's required asterisk, tinted to a token that keeps its contrast in both
   themes. The box is required exactly while it is enabled, so the marker reads
   the field's own state instead of a class the script would have to keep up. */
.sr-tourist-tax-override .sr-tourist-tax-override__required {
    color: var(--sr-tto-required);
    font-weight: 700;
}

.sr-tourist-tax-override .sr-tourist-tax-override__field:has(.sr-tourist-tax-override__reason:disabled)
    .sr-tourist-tax-override__required {
    display: none;
}

.sr-tourist-tax-override .sr-tourist-tax-override__reason {
    display: block;
    width: 100%;
    min-height: 4.75rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--sr-tto-border);
    border-radius: 0.375rem;
    background-color: var(--sr-tto-field-bg);
    color: inherit;
    font: inherit;
    line-height: 1.45;
    resize: vertical;
}

.sr-tourist-tax-override .sr-tourist-tax-override__reason::placeholder {
    color: var(--sr-tto-hint);
}

.sr-tourist-tax-override .sr-tourist-tax-override__reason:focus-visible {
    border-color: var(--sr-tto-accent);
    outline: 2px solid var(--sr-tto-accent);
    outline-offset: 1px;
}

.sr-tourist-tax-override .sr-tourist-tax-override__reason:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}