/*
--------------------------------------------------
icons
--------------------------------------------------
*/
.icon-small,
.icon-medium {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-small {
  width: 16px;
  height: 16px;
}

.icon-medium {
  width: 24px;
  height: 24px;
}

.icon-icon {
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  padding: 10px;
}

.icon-glass {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: start;
  transform: scale(0.85);
}

.icon-glass::before {
  width: 16px;
  height: 16px;
  content: '';
  border: 1px solid #fff;
  display: inline-block;
  transform: translateY(-4px) rotate(-45deg);
  border-radius: 100px;
}

.icon-glass::after {
  width: 1px;
  height: 10px;
  border: 1px solid #fff;
  content: '';
  display: inline-block;
  transform: translateY(5px) rotate(-45deg);
  background: #fff;
  border-radius: 100px;
}

.icon-heart {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-suit-heart" viewBox="0 0 16 16"><path d="m8 6.236-.894-1.789c-.222-.443-.607-1.08-1.152-1.595C5.418 2.345 4.776 2 4 2 2.324 2 1 3.326 1 4.92c0 1.211.554 2.066 1.868 3.37.337.334.721.695 1.146 1.093C5.122 10.423 6.5 11.717 8 13.447c1.5-1.73 2.878-3.024 3.986-4.064.425-.398.81-.76 1.146-1.093C14.446 6.986 15 6.131 15 4.92 15 3.326 13.676 2 12 2c-.777 0-1.418.345-1.954.852-.545.515-.93 1.152-1.152 1.595zm.392 8.292a.513.513 0 0 1-.784 0c-1.601-1.902-3.05-3.262-4.243-4.381C1.3 8.208 0 6.989 0 4.92 0 2.755 1.79 1 4 1c1.6 0 2.719 1.05 3.404 2.008.26.365.458.716.596.992a7.6 7.6 0 0 1 .596-.992C9.281 2.049 10.4 1 12 1c2.21 0 4 1.755 4 3.92 0 2.069-1.3 3.288-3.365 5.227-1.193 1.12-2.642 2.48-4.243 4.38z"/></svg>');
}

.icon-box-arrow-up {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1z"/><path fill-rule="evenodd" d="M7.646.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 1.707V10.5a.5.5 0 0 1-1 0V1.707L5.354 3.854a.5.5 0 1 1-.708-.708z"/></svg>');
}

.icon-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-2px);
  border-radius: 100px;
  border: 1px solid #000;
  font-family: serif;
  line-height: 1.6em;
}

.icon-info.icon-small {
  font-size: 0.7em;
}

.icon-photos {
  width: 16px;
  height: 16px;
  position: relative;
  margin-right: 10px;
  display: inline-block;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px #000;
}

.icon-photos::before {
  width: inherit;
  height: inherit;
  transform: translate(5px, 4px);
  content: '';
  background-color: inherit;
  box-shadow: inherit;
  display: inherit;
  border-radius: inherit;
  border: inherit;
}

.icon-photos::after {
  left: 0;
  width: 6px;
  height: 6px;
  transform: translate(11px, 7px);
  position: absolute;
  content: '';
  display: inherit;
  border: 1px solid #000;
  border-radius: 100px;
}

.icon-photos > span {
  left: 0;
  width: 100%;
  height: 1px;
  transform: translate(5px, 15px) rotate(-18deg);
  position: absolute;
  display: inline-block;
  background-color: #000;
}

/*
--------------------------------------------------
elements
--------------------------------------------------
*/

a {
  text-decoration: underline;
}

a.info {
  text-decoration: none;
}

a.info .info-content {
  max-width: 400px;
  z-index: 2;
  display: none;
  padding: 10px 15px;
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.10);
  cursor: default;
  background-color: #fff;
  font-size: 0.8em;
  font-weight: 400;
  color: #333;
}

a:hover .info-content {
  position: absolute;
  display: block;
}

.show-more::after {
  padding-left: 5px;
  transform: translateY(1px);
  display: inline-block;
  content: '\003E';
}

.togglebox {
  width: 1px;
  height: 1px;
  position: absolute;
  clip-path: circle(0%);
  oapcity: 0;
}

.togglelabel {
  display: block;
  cursor: pointer;
}

/*
--------------------------------------------------
layout
--------------------------------------------------
*/
main {
  padding-bottom: 50px;
  background-color: #f9f9f9;
}


a.show-more {
  font-weight: 400;
  color: #000;
}

h3:not(.listing-price) {
  margin-bottom: 15px;
}

h4 {
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.8em;
}

.primary-columns {
  display: flex;
  justify-content: space-between;
}

.primary-columns .container {
  display: grid;
  gap: 20px;
  grid-template-columns: 70% calc(30% - 20px);
  justify-content: space-between;
}

.primary-columns .secondary-column {
  position: relative;
}

.primary-columns .secondary-column .listing-contact {
  top: 25px;
  position: sticky;
}

.base {
  margin: 25px 0;
  padding: 25px;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #ececec;
}

.listing-heading {
  width: 100%;
  padding: 25px 0 50px;
  background: var(--primary-color);
  color: #fff;
}

.listing-heading .container {
  display: flex;
  justify-content: space-between;
}

.listing-heading .content {
  max-width: 100%;
}

.listing-actions {
  display: flex;
}

.listing-actions .button {
  max-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.listing-actions .button:not(:last-child) {
  margin-right: 15px;
}

.listing-actions .button .icon {
  margin-right: 10px;
}

.listing-hero .container {
  position: relative;
}

.listing-gallery-view {
  z-index: 2;
  right: 0;
  bottom: 0;
  display: flex;
  transform: translate(-40px, -20px);
  position: absolute;
}

.listing-gallery-view .show-all-photos {
  background-color: #fff;
  border: 0;
}

.listing-tag .status-indicator {
  width: 10px;
  height: 10px;
  margin-right: 10px;
  display: inline-block;
  border-radius: 100%;
  background-color: #ccc;
}

.status-indicator.red       { background-color: red }
.status-indicator.gold      { background-color: gold }
.status-indicator.limegreen { background-color: limegreen }

.listing-tag {
  z-index: 2;
  transform: translate(20px, 20px);
  padding: 4px 12px 4px 10px;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  background-color: #fff;
  font-weight: 500;
  border-radius: 100px;
  font-size: 0.85em;
  letter-spacing: 0.03em;
  color: #000;
}

.listing-info .base {
  padding: 0;
  display: flex;
  overflow: hidden;
}

.listing-info > .base > div:nth-child(1) {
  width: 60%;
  padding: 20px;
}

.listing-location {
  width: 40%;
  height: 150px;
  overflow: hidden;
  background: #eee;
}

.listing-location .map {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-stats {
  margin-bottom: 10px;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  list-style-type: none;
  font-weight: 300;
  color: #444;
}

.listing-stats li:not(:last-child)::after {
  margin-left: 10px;
  content: '\2219';
  color: #000;
}

.listing-price {
  margin-bottom: 5px;
  display: flex;
}

.listing-approval .pre-approval {
  padding: 3px 3px;
  display: inline-block;
  color: #000;
}

.listing-gallery {
  margin-top: -30px;
  height: 50vh;
  min-height: 300px;
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.listing-gallery-item {
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

.listing-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s;
}

.listing-gallery-item:hover img {
  transform: scale(1.05);
}

.listing-gallery-item.large {
  grid-column: span 2;
  grid-row: span 2;
}

.listing-contact .base {
  display: grid;
  gap: 15px;
}

.list-item {
  display: grid;
  gap: 15px;
  list-style: none;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row;
}

.list-item .list-item {
  margin-left: 10px;
}

.list-caption {
  margin-bottom: 10px;
  font-weight: 600;
}

.list-item.list-date {
  display: flex;
}

.list-item a,
.listing-showings a {
  color: #000;
}

.list-item a {
  font-weight: 500;
}

.listing-showings .show-all-dates {
  margin-bottom: 8px;
  font-weight: 400;
}

.list-date li:not(:last-child)::after {
  margin-left: 10px;
  content: '\2219';
  color: #000;
}

.listing-calculator {

}

.listing-calculator .payment-kinds {
  margin-bottom: 30px;
}

.listing-calculator .payment-kinds .list-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.listing-calculator .payment-kinds .list-item li {
  padding-left: 20px;
  position: relative;
}

.listing-calculator .payment-kinds .list-item li::before {
  top: 8px;
  left: 0;
  width: 10px;
  height: 10px;
  position: absolute;
  content: '';
  border-radius: 100px;
}

.listing-calculator .payment-kinds .label {
  font-weight: 500;
}

.listing-calculator .payment-kinds .price {
  font-weight: 300;
}

.payment-divide {
  display: flex;
  background-color: #f5f5f5;
  border-radius: 6px;
  overflow: hidden;
}

.payment-divide .bar {
  height: 10px;
}

.listing-calculator .payment-kinds .primary-bullet::before,
.payment-divide .primary-bar {
  background: indigo;
}

.listing-calculator .payment-kinds .secondary-bullet::before,
.payment-divide .secondary-bar {
  background: royalblue;
}

.listing-calculator .payment-kinds .tertiary-bullet::before,
.payment-divide .tertiary-bar {
  background: hotpink;
}

.payment-divide .primary-bar   { width: 75% }
.payment-divide .secondary-bar { width: 20% }
.payment-divide .tertiary-bar  { width: 10% }

.tabs {
  overflow: hidden;
}

.tab-content {
  width: 100%;
  padding-top: 25px;
  display: none;
  float: left;
}

.tab-caption {
  margin-left: -4px;
  padding: 10px;
  border-bottom: 1px solid #ddd; 
  cursor: pointer;
  color: #777;
}

input[type='radio'][name='tab'] {
 display: none;
}

input[type='radio'][name='tab'] + .tab-caption  {
  display: inline-block;
  position: relative;
  z-index: 1;
}

input[type='radio'][name='tab']:checked + .tab-caption {
  border-bottom-color: #000;
  font-weight: 500;
  color: #000;
}

input[type='radio'][name='tab']:checked + .tab-caption + .tab-content {
  display: block; 
}

.list-timeline {
  margin: 10px 0 50px;
  transform: translateX(7px);
  border-left: 1px solid #777;
  list-style: none;
}

.list-timeline .list-item {
  grid-template-columns: repeat(3, 1fr);
}

.timeline-point {
  padding-bottom: 50px;
}

.timeline-point:last-child {
  padding-bottom: 0;
}

.timeline-point::before {
  width: 13px;
  height: 13px;
  position: absolute;
  display: inline-block;
  transform: translate(-7px, -5px);
  background-color: #333;
  box-shadow: inset 0 0 0 3px #fff;
  border: 1px solid #000;
  border-radius: 100px;
  content: '';
}

.timeline-caption {
  padding-left: 25px;
  transform: translateY(-10px);
  display: inline-block;
  font-weight: 600;
}

.timeline-content {
  padding-left: 25px;
}

.timeline-content small {
  font-weight: 300;
  color: #777;
}

.list-numbers {
  display: block;
}

.list-numbers .list-caption {
  font-weight: 500;
}

.list-numbers li {
  margin-bottom: 20px;
  font-weight: 300;
  font-size: 0.98em;
}

.list-numbers .list-item {
  margin: 0 25px 25px 0;
  display: inline-block;
  grid-template-columns: initial;
  grid-auto-flow: initial;
}

.list-numbers mark.positive {
  background-color: transparent;
  color: green;
}

.list-numbers mark.negative {
  background-color: transparent;
  color: red;
}

.list-numbers mark.positive,
.list-numbers mark.negative {
  margin-left: 5px;
  padding: 3px 6px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  font-size: 0.85em;
}

.list-numbers .list-item:last-child {
  margin-right: 0;
}

.search-mini {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
  color: #fff;
}

.search-mini .button-primary {
  margin-top: 10px;
}

.query-form {
  display: flex;
}

.query-wrapper .container {
  left: 0;
  right: 0;
}

.query-primary {
  width: 100%;
  height: 40px;
  padding: 0;
  display: flex;
  justify-content: start;
  background: transparent;
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  font-size: 0.90em;
}

.query-primary .query-input {
  width: 100%;
  height: inherit;
  margin: 0;
  padding: 10px 20px;
  flex-grow: 1;
  box-sizing: border-box;
  background: #fff;
  border: 0;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid #ddd;
  outline: none;
  font-size: inherit;
}

.query-primary .query-filter {
  height: inherit;
  max-width: 90px;
  padding: 10px 5px 10px 20px;
  box-sizing: border-box;
  background: #fff;
  border: 0;
  border-radius: 0;
  outline: none;
  text-align: left;
  font-size: inherit;
  color: #000;
 -webkit-appearance: none;
 -moz-appearance: none;
 -ms-appearance: none;
 -o-appearance: none;
  appearance: none;
}

.query-primary .query-button {
  min-width: 70px;
  height: inherit;
  margin: 0;
  border: 0;
  background-color: #685BC6;
  border-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  font-size: inherit;
  color: #fff;
}

.calendar-container {
  /*width: 300px;*/
  margin: auto;
  text-align: center;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calendar-footer {
  display: flex;
  align-items: center;
  justify-content: end;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: 10px;
}

.calendar-grid div {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  font-weight: 500;
  font-size: 0.90em;
}

.calendar-grid div.date:not(.disabled):hover {
  box-shadow: inset 0 0 0 1.6px black;
  cursor: pointer;
}

.calendar-grid .disabled {
  cursor: default;
  text-decoration: line-through;
  font-weight: 300;
  color: #ccc;
}
.clear-calendar {
  margin-top: 30px;
}

.listing-calendar {
  cursor: default;
}

.listing-calendar .prev-month,
.listing-calendar .next-month {
  width: 40px;
  height: 40px;
  display: flex;
  background-color: transparent;
  align-items: center;
  justify-content: center;
  font-size: 1.6em;
  font-weight: 300;
  color: #000;
}

.listing-calendar .prev-month:not(:disabled):hover,
.listing-calendar .next-month:hover {
  background-color: #F9F9F9;
}

.listing-calendar .prev-month:disabled {
  cursor: not-allowed!important;
}

.listing-calendar .list-days {
  margin-top: 25px;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  font-size: 0.90em;
}

.listing-calendar .list-days li {
  width: 50px;
  color: #777;
}

.listing-calendar .month-year {
  font-weight: 500;
}

.listing-calendar .selected-dates {
  margin-top: 20px;
}

.listing-details  {
  position: relative;
}

.togglebox:not(:checked) + .togglelabel + .list-item {
  display: none;
}

.togglebox:checked + .togglelabel + .list-item {
  display: block;
}

.listing-detail {
  border-bottom: 1px solid #ececec;
}

.listing-detail {
  padding-top: 25px;
}

.listing-detail .title {
  position: relative;
  user-select: none;
  font-weight: 500;
  font-size: 1.2em;
}

.listing-detail .title::after {
  right: 0;
  position: absolute;
  transform: rotate(90deg) translate(0, 5px);
  content: '\003E';
  display: inline-block;
  font-size: 1.3em;
  font-weight: 300;
}

.listing-detail .title::before {
  top: 5px;
  right: 0;
  position: absolute;
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
}

.listing-detail .list-item {
  margin-bottom: 25px;
}

.listing-detail.first {
  padding-top: 15px;
}

.togglebox:checked + .togglelabel .title::after {
  transform: rotate(-90deg) translate(0, -1px);
}

@media (max-width: 768px) {
  .listing-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}