* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; line-height: 1.6; color: #333; }
h1, h2, h3 { margin-bottom: .5em; }
p { margin-bottom: 1em; }

.section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.section.in-view {
  opacity: 1;
  transform: translateY(0);
}

.hero {
  padding: 2em 1em;
  text-align: center;
}
.hero-text { margin-bottom: 1em; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16/6;
  margin: 0 auto;
}
.gallery-item:first-child {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.gallery-item img:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.gallery-item:nth-child(5) { position: relative; }
.gallery-item:nth-child(5) img { filter: blur(4px); }
.gallery-item:nth-child(5) .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-size: 1.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  z-index: 1;
  transition: transform .3s ease;
}
.gallery-item:nth-child(5):hover img {
  transform: scale(1.01);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.gallery-item:nth-child(5):hover .overlay { transform: scale(1.01); }

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2em 1em;
}

.amenities-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.amenities-list li { display: flex; align-items: center; }
.amenities-list i {
  margin-right: 8px;
  font-size: 1.2em;
  color: #5FBD6D;
  transition: transform .3s ease;
}
.amenities-list li:hover i { transform: rotate(15deg) scale(1.1); }

#map-container {
  position: relative;
  width: 100%;
  height: 400px;
  margin-top: 1em;
  border-radius: 8px;
  overflow: hidden;
}
#map {
  width: 100%;
  height: 100%;
  transition: opacity .3s ease;
}

.booking-content {
  display: grid !important;
  grid-template-columns: minmax(0,1fr);
  grid-template-areas:
    "calendar"
    "widget";
  gap: 2rem;
  align-items: start !important;
  overflow: visible !important;
  width: 100%;
}
@media (min-width: 640px) {
  .booking-content {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-areas: "calendar widget";
  }
}

#calendar {
  grid-area: calendar;
  width: 100%;
  max-width: none;
  overflow: visible !important;
}

.booking-widget { 
  grid-area: widget;
  width: 100%;
  max-width: none;
  border: 1px solid #ddd;
  padding: 1em;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  height: fit-content;
  position: sticky;
  top: 2em;
}
@media (max-width: 767.98px) {
  .booking-widget { position: static; top: auto; }
}

#calendar .litepicker .is-locked,
#calendar .litepicker .day-item.is-locked,
#calendar .litepicker .litepicker-day.is-locked {
  opacity: .35;
  cursor: not-allowed;
}

#calendar .litepicker .day-item[aria-disabled="true"],
#calendar .litepicker .day-item[aria-disabled="1"],
#calendar .litepicker .day-item.locked-manual,
#calendar .litepicker .litepicker-day[aria-disabled="true"],
#calendar .litepicker .litepicker-day[aria-disabled="1"],
#calendar .litepicker .litepicker-day.locked-manual {
  opacity: .28 !important;
  color: #bcbcbc !important;
  background: transparent !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  text-decoration: line-through;
}

#calendar .litepicker .day-item[aria-disabled="true"].is-start-date,
#calendar .litepicker .day-item[aria-disabled="true"].is-end-date,
#calendar .litepicker .day-item[aria-disabled="true"].is-in-range,
#calendar .litepicker .litepicker-day[aria-disabled="true"].is-start-date,
#calendar .litepicker .litepicker-day[aria-disabled="true"].is-end-date,
#calendar .litepicker .litepicker-day[aria-disabled="true"].is-in-range {
  opacity: .28 !important;
  color: #bcbcbc !important;
  background: transparent !important;
  box-shadow: none !important;
}

.price { font-size: 1.5em; font-weight: bold; margin-bottom: 1em; }
.check-info { margin-bottom: .5em; }
.guests { margin-bottom: 1em; }
.guests label { margin-right: .5em; }

.btn {
  background: #5FBD6D;
  color: #fff;
  border: none;
  padding: .8em 1.2em;
  border-radius: 8px;
  cursor: pointer;
  transition: background .3s ease;
}
.btn:hover { background: #4AA35A; }

.cost-summary { margin-top: 1em; }
.cost-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: .5em;
}
.cost-row.total {
  font-weight: bold;
  border-top: 1px solid #ddd;
  padding-top: .5em;
}

.gallery-grid .gallery-item:nth-child(n+6) { display: none; }

#photo-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  overflow-y: auto;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: scale(.93);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease, visibility 0s .4s;
}
#photo-modal.active,
#photo-modal:target {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
  transition: opacity .4s ease, transform .4s ease;
}
body.modal-open { overflow: hidden; }

#photo-modal .modal-header {
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 2em;
  border-bottom: 1px solid #ddd;
  z-index: 1001;
}
#photo-modal .modal-header h3 { margin: 0; }
#photo-modal #close-modal{
  font-size:2em;
  background:none;
  border:none;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
}
#photo-modal #close-modal:hover { color: #5FBD6D; }
#photo-modal .modal-body { padding: 1em 2em 2em; }

.tour-grid{
  display:flex;
  gap:10px;
}
.tour-col{
  width:50%;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tour-col img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  transition:transform .3s ease, box-shadow .3s ease;
  cursor:pointer;
}
.tour-col img:hover{
  transform:scale(1.01);
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
}

@media(max-width:640px){
  .tour-grid{ flex-direction:column; }
  .tour-col{ width:100%; }
}
@media (min-width: 1024px) {
  .tour-grid {
    max-width: 820px;
    margin: 0 auto;
  }
}

.lightbox-overlay{
  display:none;
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  justify-content:center;
  align-items:center;
  z-index:1002
}
.lightbox-overlay.active { display: flex; }
.lightbox-img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  border-radius: 4px;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next { cursor: pointer; }
.lightbox-close {
  position: absolute;
  top: 20px; right: 30px;
  color: #fff;
  font-size: 2em;
  user-select: none;
}
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 3em;
  padding: 0 20px;
  user-select: none;
}
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-rows: repeat(2, 1fr);
  }
  .gallery-item:first-child {
    grid-column: auto;
    grid-row: auto;
  }
}

.photo-tour-link{ display:block; width:100%; height:100%; border-radius:8px }
.photo-tour-link img{border-radius:inherit}
#photo-modal:target{display:block}
html:has(#photo-modal:target),body:has(#photo-modal:target){overflow:hidden}

@keyframes imageIn{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

#photo-modal{ transform-origin:center; }
#photo-modal:target .tour-grid img {
  opacity: 0;
  animation: imageIn .35s ease forwards;
  animation-delay: calc(var(--i, 1) * .1s + .3s);
}

.lightbox-overlay.closing {animation: fadeOut .35s ease forwards;}
.lightbox-img.closing {animation: fadeOut .35s ease forwards;}
.lightbox-overlay.active:not(.closing) {animation: fadeIn .35s ease forwards;}
.lightbox-img.fade-in {animation: fadeIn .35s ease forwards;}

.lightbox-img{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  max-width:90%; max-height:90%;
  border-radius:4px;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
  transition:opacity .25s ease;
  opacity:0;
}
.lightbox-img.fading { opacity: 0; }
.lightbox-prev, .lightbox-next{ z-index: 2; }
.lightbox-img.show   { opacity:1; }
.lightbox-img.hidden { opacity:0; }
.lightbox-prev, .lightbox-next{ z-index:3; }

.more-amenities{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2em;
  padding-top: 1.2em;
  height:0;
  overflow:hidden;
  transition:height .5s ease;
}
.amenities-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2em;
}
.amenities-grid i,
.more-amenities i{ color:#5FBD6D; }

@media(max-width:900px){
  .amenities-grid,
  .more-amenities{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px){
  .amenities-grid,
  .more-amenities{ grid-template-columns:1fr; }
}

.more-btn{
  margin:1em auto;
  display:flex;
  align-items:center;
  gap:.4em;
}
.more-amenities.open{ height:auto; }

.desc-more{
  height:0;
  overflow:hidden;
  transition:height .5s ease;
}
.desc-more.open{height:auto}

.nearby-grid,
.nearby-more{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2em;
}
@media(max-width:900px){
  .nearby-grid,
  .nearby-more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .nearby-grid,
  .nearby-more{grid-template-columns:1fr}
}

.nearby-grid p{margin:0;line-height:1.45}
.nearby-grid i{margin-right:8px;color:#5FBD6D}

.nearby-more{
  height: 0;
  overflow: hidden;
  padding-top: 1.2em;
  transition: height .5s ease, padding .5s ease;
}
.nearby-more.open{ height: auto; }

.amenities-grid > div,
.more-amenities > div,
.nearby-grid > div,
.nearby-more > div {
  text-align: left;
  list-style-position: inside;
}

#distance-tool{
  margin: 2.5em auto 0;
  max-width: 600px;
  text-align: center;
}
.distance-form{
  display: flex;
  gap: .8em;
  justify-content: center;
  flex-wrap: wrap;
}
#dest-input{
  flex: 1 1 260px;
  padding: .7em 1.1em;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
#dest-input:focus{
  outline: none;
  border-color: #5FBD6D;
  box-shadow: 0 0 0 3px rgba(95,189,109,.25);
}
.distance-form .btn{ padding: .7em 1.4em; }

#distance-result {
  height: 1.5em;
  font-size: 1.2rem;  
  font-weight: 600;    
  line-height: 1.5em;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .4s ease, transform .4s ease;
  margin-top: 0; 
}
#distance-result.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
#distance-tool { padding-bottom: 1.5em; }

.booking-widget .field { margin-bottom: 0.75em; }
.booking-widget .field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3em;
}
.booking-widget .field input,
.booking-widget .field select {
  width: 100%;
  padding: 0.6em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
.booking-widget .field textarea#message {
  width: 100%;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  margin-bottom: 1em;
  resize: vertical;
}
#calendar{
  display:flex;
  justify-content:center;
}
#calendar .litepicker{
  margin: 0 auto;
}

#calendar .litepicker{
  font-size: 1.3rem;
}
#calendar .litepicker,
#calendar .litepicker * {
  box-shadow: none !important;
  border: none !important;
  outline: 0 !important;
  background-clip: padding-box !important;
}

#calendar .litepicker .month-item,
#calendar .litepicker .month-item-header {
  background: transparent !important;
}

#calendar .litepicker .l-calendar,
#calendar .litepicker .l-calendar__month,
#calendar .litepicker .l-pick-date__header {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

#calendar .litepicker table,
#calendar .litepicker thead,
#calendar .litepicker tbody,
#calendar .litepicker th,
#calendar .litepicker td {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#calendar .litepicker .month-item{
  position: relative;
}
#calendar .litepicker .month-item:not(:last-child)::after{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: 0rem;
  width: 1px;
  background:#d0d0d0;
  pointer-events:none;
}

.booking-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:stretch;
}
@media(max-width:640px){ .booking-grid{ grid-template-columns:1fr; } }
.booking-col{ display:flex; flex-direction:column; }
.form-col .card{ flex:1; }
.info-col{ gap:1.5rem; }

.card{
  background:#fff;
  padding:1rem 1.1rem;
  border:1px solid #ddd;
  border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}

.book-elsewhere h4{ margin-top:0; }
.platform-list{ list-style:none; padding:0; margin:0; }
.platform-list li{ margin-bottom:.6rem; }
.book-elsewhere a{ color:#5FBD6D; text-decoration:none; font-weight:500; }
.book-elsewhere a:hover{ text-decoration:underline; }
.note{ font-size:.85em; color:#666; }
.prices{ margin-left:1.2rem; font-size:.9em; line-height:1.4; }

.host-card{ display:flex; align-items:center; }
.host-avatar img{
  width:80px; height:80px; border-radius:50%;
  object-fit:cover; margin-right:1rem;
}
.host-info h4{ margin:.2rem 0 .45rem; }
.host-info p{ margin:.3rem 0; line-height:1.45; }
.host-info a{ color:#5FBD6D; text-decoration:none; }
.host-info a:hover{ text-decoration:underline; }

.fill-space{ flex:1 1 auto; display:flex; flex-direction:column; }
.fill-space form{ flex:1 1 auto; display:flex; flex-direction:column; }
.fill-space .grow-area{ flex:1 1 auto; display:flex; flex-direction:column; }
.fill-space textarea{ flex:1 1 auto; resize:vertical; }

.field{ margin-bottom:.75rem; }
.field.half{ width:48%; display:inline-block; }
label{ display:block; font-weight:600; margin-bottom:.25rem; }
input, textarea{
  width:100%; padding:.55rem .6rem;
  border:1px solid #ccc; border-radius:4px;
  font-size:1rem;
}
textarea{ resize:vertical; }

.btn{
  background:#5FBD6D; color:#fff;
  border:none; border-radius:6px;
  padding:.6rem 1.2rem; cursor:pointer;
  transition:background .25s ease;
}
.btn:hover{ background:#4AA35A; }
.primary-btn{ margin-top:1rem; }
.ask-btn{ margin-top:.6rem; }

.check-info{ margin:.4rem 0; }
.cost-summary{ margin:1rem 0 0; font-size:.95em; }
.cost-row{ display:flex; justify-content:space-between; margin:.3rem 0; }
.cost-row.total{ font-weight:700; border-top:1px solid #eee; padding-top:.5rem; }

.book-elsewhere .be-header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:.6rem;
}
.book-elsewhere .be-title{
  margin:0;
  font-size:1rem;
  font-weight:700;
}

.book-elsewhere .be-list{
  list-style:none;
  margin:0;
  padding:0;
}
.book-elsewhere .platform{
  display:grid;
  grid-template-columns: auto 1fr;
  align-items:center;
  gap:.9rem 1rem;
  padding:.55rem 0;
  border-top:1px solid #eee;
}
.book-elsewhere .platform:first-child{ border-top:0; }

.book-elsewhere .platform-left a{
  font-weight:600;
  text-decoration:none;
  color:#5FBD6D;
}
.book-elsewhere .platform-left a:hover{ text-decoration:underline; }
.book-elsewhere .platform-left .note{
  margin-left:.5rem;
  font-size:.85em;
  color:#666;
}

.book-elsewhere .platform-right{
  text-align:right;
}
.book-elsewhere .platform-right .price-line{
  font-size:.95em;
  line-height:1.35;
}

@media (max-width: 520px){
  .book-elsewhere .platform{
    grid-template-columns: 1fr;
    align-items:flex-start;
  }
  .book-elsewhere .platform-right{
    text-align:left;
    margin-top:.2rem;
  }
}

#calendar .lp-month-price{
  display: block;
  width: 100%;
  text-align: center;
  margin: .35rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: #666;
}

#calendar .lp-month-price.is-peak{
  color: #5FBD6D;
}

html { scroll-behavior: smooth; }

#calendar { scroll-margin-top: 300px; }

.choose-dates {
  display: inline-block;
  margin: .25rem 0 .75rem;
  background: transparent;
  color: #5FBD6D;
  border: 0;
  padding: .35rem 0;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.choose-dates:hover { color: #4AA35A; }

#calendar { position: relative; }

.calendar-status{
  margin: .25rem 0 .75rem;
  text-align: center;
  font-size: .95rem;
  color: #555;
}

.calendar-status.hidden{ display:none; }

.hidden { display: none !important; }

#calendar-status {
  color: #5FBD6D;
  font-weight: 600;
  margin: 0 0 .5rem 0;
  font-size: 1.25rem;
}

.amenities-grid,
.more-amenities,
.nearby-grid,
.nearby-more {
  justify-content: center;
  justify-items: center;
}

.amenities-grid > div,
.more-amenities > div,
.nearby-grid > div,
.nearby-more > div {
  text-align: center;
}

.amenities-grid ul,
.more-amenities ul,
.nearby-grid ul,
neary-by-more ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.amenities-grid li::marker,
.more-amenities li::marker,
.nearby-grid li::marker,
.nearby-more li::marker {
  content: none;
}

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

  .gallery-item:first-child {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }

  .gallery-item:nth-child(3),
  .gallery-item:nth-child(4) {
    display: none;
  }

  .gallery-item:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }
  .gallery-item:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
  }
}

@media (max-width: 700px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    aspect-ratio: auto;
  }

  .gallery-item:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .gallery-item:nth-child(3),
  .gallery-item:nth-child(4) {
    display: none;
  }

  .gallery-item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .gallery-item:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
  }
}
.info-col .host-card {
  flex: 1 1 auto;
}

.card.host-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
}

.card.host-card .host-avatar img{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin: .25rem 0 .5rem;
}

.card.host-card .host-title{
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.card.host-card .host-info{
  align-self: stretch;
  width: 100%;
}

.card.host-card .host-info p{
  margin: .35rem 0;
}

.card.host-card .host-contact-title{
  margin-top: .25rem;
  font-weight: 700;
  opacity: .85;
}

.host-section-title{
  margin: .75rem 0 .35rem;
  font-weight: 700;
  opacity: .85;
}

.card.host-card .host-info .host-section-title,
.card.host-card .host-info .host-list{
  width: 100%;
  text-align: left;
}

.host-list{
  list-style: none;
  margin: 0 0 .5rem;
  padding: 0;
  display: grid;
  gap: .35rem;
  justify-items: start;
}

.host-list li{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  line-height: 1.4;
  width: 100%;
}

.host-list i{ color: #5FBD6D; }