/*!------------------------------------------------------------------------
  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
------------------------------------------------------------------------*/

/* Colour tokens
====================================================================== */
/* Every surface / hairline colour below rides a token so dark mode is a
   token swap (see the bottom of this file) rather than a per-rule override.
   The light values here are the defaults — rules must not hardcode colours. */
:root {
    --sr-s2-band:      #f0f1f2; /* wizard, button-row, calendar, tariff, breakdown, panels */
    --sr-s2-form-bg:   #dbdbdb; /* check-availability form band */
    --sr-s2-panel:     #ffffff; /* wish-list button, badge ring, week-day row, room/checkinout form */
    --sr-s2-border:    #dbdbdb; /* hairline borders + idle wizard step chrome (badge bg, connector, label) */
    --sr-s2-connector: #dedede; /* wizard idle connector (right half) */
}

/* Asset Information
====================================================================== */
.asset-info {
    border: 1px solid var(--sr-s2-border);
    padding: 20px;
    text-align: center;
}
.asset-name h1 {
    color: #339900;
    margin-top: 0;
    text-transform: uppercase;
    border-bottom: 2px solid var(--sr-s2-border);
    padding-bottom: 10px;
}
.asset-rating {
    color: #ffbb00;
    font-size: 18px;
    margin-bottom: 5px;
}
.asset-call-action {
    margin-bottom: 15px;
}
.asset-contact, .asset-social {
    text-align: left;
}
.asset-contact i {
    color: #339900;
}
.asset-social i {
    font-size: 24px;
}
.asset-wish-list .sr-wish-list {
    text-align: center;
    border-bottom: 2px solid var(--sr-s2-border);
    margin: 10px 0 20px;
    padding-bottom: 15px;
}
.asset-wish-list .sr-wish-list > a,
.asset-wish-list .sr-wish-list > a:hover,
.asset-wish-list .sr-wish-list > a:focus {
    background-color: var(--sr-s2-panel);
    border-radius: inherit;
}
.asset-wish-list .sr-wish-list > a {
    border: 1px solid var(--sr-s2-border);
}

/* Menu Tab
====================================================================== */
.asset-tabs .nav-tabs {
    border-bottom: 2px solid #909090;
}
.asset-tabs .nav-tabs > li {
    margin-bottom: 0;
}
.asset-tabs .nav-tabs > li > a {
    border: 1px solid var(--sr-s2-border);
    border-radius: inherit !important;
    margin-right: 5px;
}
.asset-tabs .nav-tabs > .active > a,
.asset-tabs .nav > li > a:hover,
.asset-tabs .nav > li > a:focus {
    color: #fff;
    background-color: #909090;
    border: 1px solid #909090;
}
.asset-tabs .tab-content {
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: var(--sr-s2-border);
    padding: 20px 20px 10px;
}

/* Login Form - Coupon Input
====================================================================== */
.reservation_asset_item .sr-login-form, .coupon {
    padding: 10px 20px;
}

/* Checkavailability Form
====================================================================== */
#asset-checkavailability-form h2 {
    color: #fff;
    background-color: #909090;
    padding: 10px 20px;
    margin: 0;
}
#asset-checkavailability-form form {
    background-color: var(--sr-s2-form-bg);
    padding: 10px 20px;
}

/* Availability Search
====================================================================== */
.availability-search {
    border-bottom: 2px solid var(--sr-s2-border);
    margin-bottom: 20px;
}
.availability-search h2 {
    color: #339900;
    text-transform: uppercase;
}
.availability-search-info {
    padding-bottom: 20px;
}

/* Wizard
====================================================================== */
.wizard-style {
    background-color: var(--sr-s2-band);
    border: 1px solid var(--sr-s2-border);
    padding: 20px 20px 10px;
}
.wizard-style ul li {
    color: var(--sr-s2-border);
    text-align: center;
    text-transform: uppercase;
}
.wizard-style ul li .badge {
    background-color: var(--sr-s2-border);
    border: 5px solid var(--sr-s2-panel);
    border-radius: 100%;
    padding: 7px 10px;
    font-size: 15px;
    line-height: 14px;
}
.wizard-style .badge:before {
    content: "";
    position: absolute;
    border: 5px solid var(--sr-s2-border);
    left: 0;
    right: calc(50% + 10px);
    top: 15px;
}
.wizard-style .badge:after {
    content: "";
    position: absolute;
    border: 5px solid var(--sr-s2-connector);
    left: calc(50% + 10px);
    right: 0;
    top: 15px;
}
.wizard-style .active .badge:before, .wizard-style .active .badge:after {
    border: 5px solid #008080;
}
.wizard-style .complete .badge:before, .wizard-style .complete .badge:after {
    border: 5px solid #909090;
}
.wizard-style ul li.complete {
    color: #909090;
}
.wizard-style ul li.complete .badge {
    background: url(../images/complete.png) no-repeat center center;
    text-indent: -10000px;
    background-color: #909090;
}

/* Step1 - Roomtypes Row List
====================================================================== */
.step-content {
    margin-top: 20px;
}
.button-row.button-row-top, .button-row.button-row-bottom {
    background-color: var(--sr-s2-band);
    border-top: 1px solid var(--sr-s2-border);
    border-bottom: 1px solid var(--sr-s2-border);
    margin-bottom: 20px;
}
.room_type_row, .room_type_gallery, .room_type_details {
    margin-bottom: 20px;
}
.roomtype_name {
    border-bottom: 2px solid var(--sr-s2-border);
    margin-bottom: 10px;
}
.roomtype_name h2 {
    margin: 0 0 5px 0;
}
.roomtype_name .badge {
    float: right;
}
.roomtype_more_desc i {
    color: #339900;
}

/* Carousel Slide */
.carousel .item img {
    width: 100%;
}

/* Availability Calendar */
.room_type_row  > div:nth-child(2) > div {
    min-height: 1px;
}
.availability-calendar {
    background-color: var(--sr-s2-band);
}
div.availability-calendar table tr th {
    border-bottom: 2px solid #008080;
}
div.availability-calendar table tr.row-week-day {
    background: var(--sr-s2-panel);
}

/* Tariff */
.tariff-box {
    background-color: var(--sr-s2-band);
}
.tariff-box.is-whole .tariff-value {
    background-color: #b94a48;
}
.room-list .tariff-value {
    background-color: #008080;
    padding: 10px 20px;
    color: #fff;
    float: left;
    min-width: 150px;
}
.room-list .normal_tariff {
    min-width: 185px;
}
.starting_from, .tariff_suffix, .tariff_type {
    font-size: 12px;
    font-weight: bold;
}
.tariff_type {
    font-style: italic;
}
.min_tariff, .normal_tariff {
    color: #fff;
    font-size: 24px;
}
.sr-strikethrough {
    color: #ffbb00;
}
.tariff-title-desc {
    overflow: hidden;
    padding: 10px 20px;
}
.tariff-button {
    padding: 10px 20px;
    text-align: center;
}
.tariff-button .tariff_type {
    color: #008080;
}
#solidres .checkinoutform .inner {
    background-color: var(--sr-s2-panel);
    margin: 20px;
    padding: 10px;
}

/* Roomtype form */
.room-form {
    background-color: var(--sr-s2-panel);
    margin: 20px;
}
.breakdown, .extra_details {
    background-color: var(--sr-s2-band);
    border: 1px solid var(--sr-s2-border);
}

/* Step2 - Guest Info
====================================================================== */
.guestinfo h3 {
    border-bottom: 1px solid var(--sr-s2-border);
    padding-bottom: 5px;
}
#solidres .payment_method_cielo_details,
#solidres .payment_method_details {
    background: var(--sr-s2-band);
    border: 1px solid var(--sr-s2-border);
}
#solidres .guestinfo .inner {
    margin: 0;
}
#solidres .guestinfo .button-row .inner {
    margin: 10px;
}

/* Step3 - Confirmation
====================================================================== */
.confirmation .termsandconditions {
    background-color: var(--sr-s2-band);
}

/* Responsive
====================================================================== */
@media (max-width: 767px) {
    .asset-tabs {
        margin-top: 20px;
    }
    .input-prepend input, .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] {
        display: inline-block;
        width: auto;
    }
    .room-list .tariff-value {
        float: none;
    }
    .room-form {
        margin-top: 0;
    }
    .tariff-button {
        padding-top: 0;
    }
}

/* Direction: rtl
====================================================================== */
html[dir="rtl"] .asset-contact,
html[dir="rtl"] .asset-social {
    text-align: right;
}
html[dir="rtl"] .nav-tabs > li:nth-child(1) > a {
    margin-right: 0;
}
html[dir="rtl"] .roomtype_name .badge {
    float: left;
}
html[dir="rtl"] .room-list .tariff-value {
    float: right;
}
@media (max-width: 480px) {
    html[dir="rtl"] .room-list .tariff-value {
        float: none;
    }
}

/* Dark mode
====================================================================== */
/* Swap the surface / hairline tokens for dark under BOTH signals: the colour
   scheme the page declares (color-scheme, through light-dark()), so a light-only
   template stays light whatever the system prefers, and Bootstrap's
   [data-bs-theme="dark"] for hosts that toggle the attribute.
   Mirrors the approach in Solidres' main.css. Templates that restyle these
   elements themselves (scoped under #solidres) keep winning on specificity, so
   this only fills the gap on plain hosts. The idle wizard badge, connector and
   step label ride --sr-s2-border, so they stay muted like light mode. */
@supports (color: light-dark(#000, #fff)) {
    :root {
        --sr-s2-band:      light-dark(#f0f1f2, #22272e);
        --sr-s2-form-bg:   light-dark(#dbdbdb, #22272e);
        --sr-s2-panel:     light-dark(#ffffff, #1b1f24);
        --sr-s2-border:    light-dark(#dbdbdb, rgba(255,255,255,0.14));
        --sr-s2-connector: light-dark(#dedede, rgba(255,255,255,0.14));
    }
}

[data-bs-theme="dark"] {
    --sr-s2-band:      #22272e;
    --sr-s2-form-bg:   #22272e;
    --sr-s2-panel:     #1b1f24;
    --sr-s2-border:    rgba(255,255,255,0.14);
    --sr-s2-connector: rgba(255,255,255,0.14);
}