/*!------------------------------------------------------------------------
  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-s1-band:        #f5f5f5; /* step holders, button rows */
    --sr-s1-band-alt:    #f9f9f9; /* wizard + check-availability bands, chevron fill */
    --sr-s1-panel:       #ffffff; /* terms box, payment-method panel */
    --sr-s1-tariff-bg:   #fafafa;
    --sr-s1-zebra-even:  #f4f6f7;
    --sr-s1-zebra-odd:   #eeeeee;
    --sr-s1-border:      #d4d4d4; /* wizard / band / chevron edge */
    --sr-s1-border-soft: #dddddd; /* tab-content */
    --sr-s1-border-mute: #cccccc; /* tariff box, payment panel */
    --sr-s1-weekday-bg:  #cccccc; /* availability weekday row */
    --sr-s1-cal-line:    #ffffff; /* availability header hairline */
}

/* Asset Information
====================================================================== */
.reservation_asset_item .rating {
    font-size: 24px;
}
.reservation_asset_item .reservation_asset_subinfo {
    display: block;
    color: #999;
    font-style: italic;
}
.reservation_asset_item .social_network {
    margin: 5px 0 15px;
}
.reservation_asset_item .social_network i {
    font-size: 20px;
}

/* Menu Tab
====================================================================== */
.reservation_asset_item .nav-tabs {
    margin-top: 20px;
}
.reservation_asset_item .tab-content {
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: var(--sr-s1-border-soft);
    padding: 20px 20px 10px;
    margin-bottom: 20px;
}

/* Checkavailability Form
====================================================================== */
#asset-checkavailability-form {
    border-top: 1px solid var(--sr-s1-border);
    border-bottom: 1px solid var(--sr-s1-border);
    background: var(--sr-s1-band-alt);
}

/* Wizard
====================================================================== */
.wizard {
    background-color: var(--sr-s1-band-alt);
    border: 1px solid var(--sr-s1-border);
    border-radius: 4px 4px 0 0;
    zoom: 1;
}
.wizard ul li {
    height: 46px;
    padding: 0 10px 0 10px;
    margin: 0;
    font-size: 16px;
    line-height: 46px;
    color: #999999;
    cursor: default;
    font-weight: bold;
}
.wizard ul li .chevron {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    border: 24px solid transparent;
    border-right: 0;
    border-left: 14px solid var(--sr-s1-border);
}
.wizard ul li .chevron:before {
    position: absolute;
    top: -24px;
    right: 1px;
    display: block;
    border: 24px solid transparent;
    border-right: 0;
    border-left: 14px solid var(--sr-s1-band-alt);
    content: "";
}
.wizard ul li.complete {
    color: green;
}
.wizard ul li.complete .badge {
    background-color: green;
}
.wizard ul li .badge {
    margin-right: 10px;
    margin-top: -2px;
    vertical-align: middle;
}

/* Step1 - Roomtypes Row
====================================================================== */
.reservation-single-step-holder {
    background: var(--sr-s1-band);
}
.button-row {
    background: var(--sr-s1-band);
}
.button-row.button-row-top {
    border-bottom: 1px solid var(--sr-s1-border)
}
.button-row.button-row-bottom {
    border-top: 1px solid var(--sr-s1-border);
}
div.even {
    background: var(--sr-s1-zebra-even);
}
div.odd {
    background: var(--sr-s1-zebra-odd);
}
.roomtype_name .label-default {
    margin-right: 5px;
}
#solidres .room-form .inner {
    margin: 10px 0;
}

/* Availability Calendar */
div.availability-calendar table tr th {
    border-bottom: 2px solid var(--sr-s1-cal-line);
}
div.availability-calendar table tr.row-week-day {
    background: var(--sr-s1-weekday-bg);
}

/* Tariff */
.tariff-box {
    background: var(--sr-s1-tariff-bg);
    padding: 10px;
    border: 1px solid var(--sr-s1-border-mute);
    border-left: 3px solid teal;
}
.tariff-box.is-whole {
    border-left: 3px solid #b94a48;
}
.min_tariff, .normal_tariff {
    color: green;
    font-size: 18px;
}
.sr-strikethrough {
    color: orange;
}

/* Step2 - Confirmation
====================================================================== */
.confirmation .termsandconditions {
    background-color: var(--sr-s1-panel);
}
#solidres .payment_method_details {
    background: var(--sr-s1-panel);
    border: 1px solid var(--sr-s1-border-mute);
}

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

/* Responsive
====================================================================== */
@media (max-width: 767px) {
    .wizard ul li .chevron {
        display: none;
    }
}

/* Direction: rtl
====================================================================== */
html[dir="rtl"] .sr-wish-list {
    text-align: left;
}
html[dir="rtl"] .nav-tabs > li:nth-child(1) > a {
    margin-right: 0;
}
html[dir="rtl"] .wizard ul li .badge {
    margin-left: 8px;
}
html[dir="rtl"] .wizard ul li .chevron {
    left: -14px;
    right: inherit;
    border-left: 0;
    border-right: 14px solid var(--sr-s1-border);
}
html[dir="rtl"] .wizard ul li .chevron:before {
    left: 1px;
    border-left: 0;
    border-right: 14px solid var(--sr-s1-band-alt);
}
html[dir="rtl"] .roomtype_name .label-default {
    margin-right: 0;
    margin-left: 5px;
}
html[dir="rtl"] .tariff-box {
    border-right: 3px solid teal;
    border-left: 1px solid var(--sr-s1-border-mute);
}
@media (max-width: 768px) {
    html[dir="rtl"] .sr-wish-list {
        text-align: right;
    }
}

/* Dark mode
====================================================================== */
/* Swap the surface / hairline tokens for dark under BOTH signals: the OS
   preference (prefers-color-scheme) for hosts that follow the system setting,
   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 (e.g. Lumina, scoped under #solidres) keep winning on
   specificity, so this only fills the gap on plain hosts. The chevron fill
   rides --sr-s1-band-alt, so the wizard arrow always matches the wizard band. */
@media (prefers-color-scheme: dark) {
    :root {
        --sr-s1-band:        #22272e;
        --sr-s1-band-alt:    #22272e;
        --sr-s1-panel:       #1b1f24;
        --sr-s1-tariff-bg:   #22272e;
        --sr-s1-zebra-even:  #1d2127;
        --sr-s1-zebra-odd:   #262b32;
        --sr-s1-border:      rgba(255, 255, 255, 0.14);
        --sr-s1-border-soft: rgba(255, 255, 255, 0.14);
        --sr-s1-border-mute: rgba(255, 255, 255, 0.14);
        --sr-s1-weekday-bg:  #262b32;
        --sr-s1-cal-line:    rgba(255, 255, 255, 0.14);
    }
}

[data-bs-theme="dark"] {
    --sr-s1-band:        #22272e;
    --sr-s1-band-alt:    #22272e;
    --sr-s1-panel:       #1b1f24;
    --sr-s1-tariff-bg:   #22272e;
    --sr-s1-zebra-even:  #1d2127;
    --sr-s1-zebra-odd:   #262b32;
    --sr-s1-border:      rgba(255, 255, 255, 0.14);
    --sr-s1-border-soft: rgba(255, 255, 255, 0.14);
    --sr-s1-border-mute: rgba(255, 255, 255, 0.14);
    --sr-s1-weekday-bg:  #262b32;
    --sr-s1-cal-line:    rgba(255, 255, 255, 0.14);
}