/*
Theme Name:  Nellari Resort
Theme URI:   https://nellariresort.com
Author:      Arul Joseph
Author URI:  https://example.com
Description: Nature resort theme for Nellari Resort LLP, Wayanad, Kerala.
Version:     1.0.0
Text Domain: nellari-wp
*/

/* ===== CSS Variables ===== */
:root {
  --primary-color:      #2C3B2D;
  --secondary-color:    #4A5A3A;
  --accent-color:       #C8B99A;
  --text-color:         #2C3B2D;
  --bg-color:           #F5F0E6;
  --heading-color:      #2C3B2D;
  --border-color:       rgba(44,59,45,0.18);
  --header-bg-color:    transparent;
  --header-text-color:  #ffffff;
  --top-bar-bg-color:   #2C3B2D;
  --top-bar-text-color: #F5F0E6;
  --footer-bg-color:    #2C3B2D;
  --footer-text-color:  rgba(245,240,230,0.7);
  --body-font:          'Plus Jakarta Sans', sans-serif;
  --heading-font:       'Cormorant Garamond', Georgia, serif;
  --base-font-size:     17px;
  --base-line-height:   1.6;
  --sage-color:         #8A9A6A;
  --olive-color:        #4A5A3A;
}

/* ===== Base ===== */
body {
  font-family: var(--body-font);
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  background-color: var(--bg-color);
  color: var(--text-color);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--heading-color);
}
p { font-size: 17px; font-weight: 400; color: rgb(28,31,28); }
@media (min-width: 768px) { section h2 { font-size: 56px; } }
@media (max-width: 767px) {
  .hero-slide h1 { font-size: 2rem !important; }
  body { font-size: 0.9rem; }
  .lb-arrow { display: none; }
  .photo-stack { width: 260px; height: 300px; }
  .photo-stack:hover .photo-card:nth-child(1) { transform: rotate(-15deg) translate(-90px, 35px); }
  .photo-stack:hover .photo-card:nth-child(2) { transform: rotate(-6deg) translate(-45px, -35px); }
  .photo-stack:hover .photo-card:nth-child(3) { transform: rotate( 6deg) translate( 45px, -35px); }
  .photo-stack:hover .photo-card:nth-child(4) { transform: rotate( 15deg) translate( 90px, 35px); }
}

/* ===== Floating CTA Buttons ===== */
.float-btns {
  position: fixed; bottom: 28px; right: 24px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 999;
}
.float-btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  transition: transform 0.25s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.25s;
  cursor: pointer; text-decoration: none;
}
.float-btn:hover { transform: scale(1.12); box-shadow: 0 10px 32px rgba(0,0,0,0.28); }
.float-btn.whatsapp { background: #25D366; }
.float-btn.call     { background: var(--accent-color); }
.float-btn svg      { width: 24px; height: 24px; fill: #fff; }
.float-btn.call svg { fill: var(--primary-color); }
@media (max-width: 767px) {
  .float-btns { bottom: 20px; right: 16px; }
  .float-btn  { width: 46px; height: 46px; }
  .float-btn svg { width: 20px; height: 20px; }
}

/* ===== CTA Background ===== */
.cta-bg {
  background-image: url('images/mist/image00001.jpeg');
  background-size: cover;
  background-position: center;
}

/* ===== Photo Stack ===== */
.photo-stack { position: relative; width: 260px; height: 300px; }
@media (min-width: 768px) { .photo-stack { width: 400px; height: 460px; } }
.photo-card {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(44,59,45,0.22);
  transition: transform 0.65s cubic-bezier(0.34,1.4,0.64,1);
  will-change: transform;
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-card:nth-child(1) { transform: rotate(-9deg) translate(-12px, 18px); z-index: 1; }
.photo-card:nth-child(2) { transform: rotate(-4deg) translate(-6px, 10px);  z-index: 2; }
.photo-card:nth-child(3) { transform: rotate( 5deg) translate( 7px, 8px);   z-index: 3; }
.photo-card:nth-child(4) { transform: rotate( 1deg);                         z-index: 4; }
.photo-stack:hover .photo-card:nth-child(1) { transform: rotate(-22deg) translate(-160px, 55px); }
.photo-stack:hover .photo-card:nth-child(2) { transform: rotate(-10deg) translate(-75px, -55px); }
.photo-stack:hover .photo-card:nth-child(3) { transform: rotate( 10deg) translate( 75px, -55px); }
.photo-stack:hover .photo-card:nth-child(4) { transform: rotate( 22deg) translate( 160px, 55px); }

/* ===== Mobile Menu ===== */
#mobile-menu {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(44,59,45,0.97);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
#mobile-menu.open { opacity: 1; visibility: visible; }

/* ===== Hamburger ===== */
#hamburger {
  --size: 40px; --step: 0.2s; --line: #fff;
  background: transparent; border: none;
  height: var(--size); width: var(--size);
  padding: calc(var(--size) * 0.15);
  flex-direction: column; overflow: hidden; cursor: pointer;
  display: none;
}
@media (max-width: 767px) { #hamburger { display: flex; } }
#hamburger span {
  flex: 1; width: 100%;
  background: linear-gradient(transparent 0 35%, var(--line) 35% 65%, transparent 65%);
  translate: var(--x, 0) var(--y, 0);
  rotate: var(--rotate, 0deg);
  transition-property: translate, rotate;
  transition-duration: var(--step);
  transition-delay: calc(var(--step) * var(--translate-index, 0)), calc(var(--step) * var(--rotate-index, 0));
  transition-timing-function: cubic-bezier(.5,1.75,.75,1.25);
}
#hamburger[aria-pressed="true"] span:nth-of-type(1) { --y: 100%; --rotate: 45deg; }
#hamburger[aria-pressed="true"] span:nth-of-type(2) { --x: 200%; }
#hamburger[aria-pressed="true"] span:nth-of-type(3) { --y: -100%; --rotate: -45deg; }
#hamburger[aria-pressed="true"] span:nth-of-type(2)                       { --translate-index: 0; }
#hamburger[aria-pressed="true"] span:is(:nth-of-type(1),:nth-of-type(3))  { --translate-index: 1.5; --rotate-index: 2.5; }
#hamburger[aria-pressed="false"] span:nth-of-type(2)                      { --translate-index: 2; }
#hamburger[aria-pressed="false"] span:is(:nth-of-type(1),:nth-of-type(3)) { --translate-index: 1; --rotate-index: 0; }

/* ===== Header ===== */
header { transition: background 0.3s ease; }
header.scrolled { background: var(--primary-color); }

/* ===== Hero Swiper ===== */
.hero-swiper { width: 100%; height: 60vh; }
@media (min-width: 768px) { .hero-swiper { height: 100vh; } }
.hero-slide { position: relative; overflow: hidden; }
.hero-slide .slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.08); transition: transform 8s ease;
}
.swiper-slide-active .slide-bg { transform: scale(1); }
.slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.45) 100%);
}
.hero-slide .slide-content {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.9s ease 0.5s, transform 0.9s ease 0.5s;
}
.swiper-slide-active .slide-content { opacity: 1; transform: translateY(0); }
.hero-swiper .swiper-pagination-bullet {
  width: 28px; height: 2px; border-radius: 0;
  background: rgba(255,255,255,0.45); opacity: 1;
  transition: background 0.3s, width 0.3s;
}
.hero-swiper .swiper-pagination-bullet-active { background: #fff; width: 48px; }

/* ===== Resort Cards ===== */
.resort-card {
  background: url('images/crd-bg.jpg') center/cover;
  box-shadow: 0 18px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.1);
  transition: transform 0.5s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.5s ease;
  overflow: hidden;
}
.resort-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 80px rgba(0,0,0,0.26), 0 8px 24px rgba(0,0,0,0.14);
}
.resort-card-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(0.25,0.8,0.25,1);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cpath d='M-10,20 C30,-5 80,5 130,0 C180,-5 220,8 270,2 C320,-4 370,10 410,5 L415,280 C370,295 320,285 270,290 C220,295 175,282 130,288 C85,294 35,280 -10,290 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cpath d='M-10,20 C30,-5 80,5 130,0 C180,-5 220,8 270,2 C320,-4 370,10 410,5 L415,280 C370,295 320,285 270,290 C220,295 175,282 130,288 C85,294 35,280 -10,290 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.resort-card:hover .resort-card-img { transform: scale(1.05); }
.resort-card-divider {
  width: 40px; height: 1px;
  background: linear-gradient(to right, var(--accent-color), transparent);
  margin: 10px 0 12px;
}
.resort-explore-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(44,59,45,0.3); color: var(--primary-color);
  font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 8px 18px; transition: all 0.3s;
}
.resort-card:hover .resort-explore-btn { background: var(--primary-color); color: var(--bg-color); border-color: var(--primary-color); }

/* ===== Stay Cards ===== */
.stay-card {
  transition: transform 0.5s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.5s ease;
  border-radius: 12px;
}
.stay-card:hover { transform: translateY(-10px); box-shadow: 0 28px 60px rgba(0,0,0,0.35); }
.stay-card:hover .stay-img { transform: scale(1.07); }
.stay-img { transition: transform 0.7s cubic-bezier(0.25,0.8,0.25,1); }
.stay-card:hover .stay-overlay { opacity: 0.75; }
.stay-overlay { opacity: 1; transition: opacity 0.5s ease; }
.stay-pill {
  transform: translateY(6px); opacity: 0;
  transition: transform 0.4s ease 0.05s, opacity 0.4s ease 0.05s;
}
.stay-card:hover .stay-pill { transform: translateY(0); opacity: 1; }

/* ===== Gallery Marquee ===== */
.gallery-marquee-wrapper { width: 100%; overflow: hidden; padding: 70px 0 90px; }
.gallery-marquee-track {
  display: flex; gap: 32px; width: max-content;
  animation: gallery-scroll 50s linear infinite;
}
.gallery-marquee-wrapper:hover .gallery-marquee-track { animation-play-state: paused; }
@keyframes gallery-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.gframe {
  flex-shrink: 0; cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.34,1.3,0.64,1);
}
.gframe:hover { transform: rotate(0deg) translateY(0) scale(1.05) !important; z-index: 10; position: relative; }
.photo-frame {
  background: url('images/pt.jpg') repeat;
  padding: 14px 14px 52px 14px;
  box-shadow: 0 8px 32px rgba(44,59,45,0.14), 0 2px 8px rgba(44,59,45,0.08);
}
.photo-frame img { width: 280px; height: 290px; object-fit: cover; display: block; }

/* ===== Lightbox ===== */
#lb-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
#lb-overlay.active { opacity: 1; pointer-events: all; }
#lb-img-wrap {
  position: relative; max-width: 88vw; max-height: 86vh;
  transform: scale(0.94); transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1);
}
#lb-overlay.active #lb-img-wrap { transform: scale(1); }
#lb-img-wrap .lb-frame { background: url('images/pt.jpg') repeat; padding: 12px 12px 48px 12px; box-shadow: 0 24px 80px rgba(0,0,0,0.5); }
#lb-img-wrap img { display: block; max-width: 80vw; max-height: 72vh; object-fit: contain; transition: opacity 0.25s ease; }
#lb-img-wrap img.fading { opacity: 0; }
.lb-arrow {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 20px; display: none; align-items: center; justify-content: center;
  cursor: pointer; z-index: 1001; transition: background 0.2s; user-select: none;
}
.lb-arrow:hover { background: rgba(255,255,255,0.25); }
#lb-prev { left: 24px; } #lb-next { right: 24px; }
#lb-close {
  position: fixed; top: 20px; right: 24px; z-index: 1001;
  color: rgba(255,255,255,0.7); font-size: 28px; cursor: pointer;
  width: 40px; height: 40px; display: none; align-items: center; justify-content: center;
  border-radius: 50%; transition: color 0.2s, background 0.2s;
}
#lb-close:hover { color: #fff; background: rgba(255,255,255,0.12); }
#lb-counter {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.5); font-size: 11px; letter-spacing: 0.2em;
  font-family: var(--body-font); z-index: 1001; display: none;
}
#lb-overlay.active ~ .lb-arrow { display: flex; }
#lb-overlay.active ~ #lb-close { display: flex; }
#lb-overlay.active ~ #lb-counter { display: block; }
@media (max-width: 767px) {
  #lb-overlay.active ~ .lb-arrow { display: none; }
  #lb-img-wrap { max-width: 95vw; max-height: 90vh; }
  #lb-img-wrap .lb-frame { padding: 8px; }
  #lb-img-wrap img { max-width: 95vw; max-height: 80vh; }
}

/* ===== Testimonial Stack ===== */
.testi-stack { position: relative; width: 400px; height: 320px; cursor: pointer; }
.testi-photo {
  position: absolute; width: 260px;
  transition: transform 0.6s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.6s ease;
}
.testi-photo .pf { background: url('images/pt.jpg') repeat; padding: 10px 10px 34px 10px; }
.testi-photo img { width: 100%; height: 200px; object-fit: cover; display: block; }
.testi-photo.back  { top: 28px; left: 0; transform: rotate(-5deg); z-index: 1; box-shadow: 0 8px 28px rgba(44,59,45,0.14); }
.testi-photo.front { top: 0; left: 110px; transform: rotate(4deg); z-index: 2; box-shadow: 0 10px 36px rgba(44,59,45,0.20); }
.testi-stack:hover .testi-photo.back  { transform: rotate(-18deg) translate(-70px, 20px); box-shadow: 0 18px 50px rgba(44,59,45,0.18); }
.testi-stack:hover .testi-photo.front { transform: rotate(14deg) translate(70px, 20px); box-shadow: 0 18px 50px rgba(44,59,45,0.22); }

/* ===== Fog / CTA Animation ===== */
.fogwrapper {
  height: 100%; position: absolute; top: 0; width: 100%;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
}
#foglayer_01, #foglayer_02, #foglayer_03 { height: 100%; position: absolute; width: 200%; }
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 { float: left; height: 100%; width: 50%; }
#foglayer_01 { animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite; }
#foglayer_02, #foglayer_03 { animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite; }
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png") center center/cover no-repeat transparent;
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png") center center/cover no-repeat transparent;
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; } 22% { opacity: .5; } 40% { opacity: .28; }
  58% { opacity: .4; } 80% { opacity: .16; } 100% { opacity: .1; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; } 25% { opacity: .2; } 50% { opacity: .1; }
  80% { opacity: .3; } 100% { opacity: .5; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .8; } 27% { opacity: .2; } 52% { opacity: .6; }
  68% { opacity: .3; } 100% { opacity: .8; }
}
@keyframes foglayer_moveme { 0% { left: 0; } 100% { left: -100%; } }
@media only screen and (min-width: 280px) and (max-width: 767px) {
  #foglayer_01 .image01, #foglayer_01 .image02,
  #foglayer_02 .image01, #foglayer_02 .image02,
  #foglayer_03 .image01, #foglayer_03 .image02 { width: 100%; }
}

/* ===== About: Commit Cards ===== */
.commit-card {
  position: relative;
  background: url('images/crd-bg.jpg') repeat;
  padding: 40px 36px 44px; overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.45s ease;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
.commit-card:hover { transform: translateY(-8px); box-shadow: 0 24px 64px rgba(0,0,0,0.2); }
.commit-card .commit-num {
  font-family: var(--heading-font); font-size: 5rem; font-weight: 300; line-height: 1;
  color: rgba(200,185,154,0.18);
  position: absolute; top: 16px; right: 24px;
  pointer-events: none; user-select: none;
}
.commit-icon {
  width: 52px; height: 52px;
  border: 1px solid rgba(200,185,154,0.35);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.commit-icon svg { width: 22px; height: 22px; stroke: var(--accent-color); fill: none; stroke-width: 1.4; }
.commit-tag {
  display: inline-block;
  font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent-color); border: 1px solid rgba(200,185,154,0.3);
  padding: 4px 10px; margin-bottom: 14px;
}
.commit-divider {
  width: 32px; height: 1px;
  background: linear-gradient(to right, var(--accent-color), transparent);
  margin: 14px 0 16px;
}

/* ===== Contact Page ===== */
.contact-hero { height: 450px; max-height: 450px; display: grid; place-items: center; position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; transform: scale(1.08); transition: transform 0.1s linear; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(44,59,45,0.55) 0%, rgba(44,59,45,0.35) 50%, rgba(44,59,45,0.75) 100%);
}
.info-tile { border-left: 2px solid rgba(44,59,45,0.12); padding-left: 1.25rem; transition: border-color 0.3s; }
.info-tile:hover { border-left-color: var(--accent-color); }
.journey-step { position: relative; padding-left: 2.5rem; }
.journey-step::before { content: ''; position: absolute; left: 10px; top: 24px; bottom: -24px; width: 1px; background: rgba(44,59,45,0.1); }
.journey-step:last-child::before { display: none; }
.journey-dot {
  position: absolute; left: 0; top: 4px;
  width: 22px; height: 22px;
  border: 1.5px solid rgba(44,59,45,0.25); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: white; font-size: 0.6rem; color: rgba(44,59,45,0.5);
  font-family: var(--body-font); font-weight: 500;
}
.exp-card { border: 1px solid rgba(44,59,45,0.15); padding: 1.5rem; cursor: pointer; transition: all 0.35s cubic-bezier(0.34,1.2,0.64,1); position: relative; overflow: hidden; background: white; }
.exp-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(44,59,45,0.05), rgba(200,185,154,0.1)); opacity: 0; transition: opacity 0.35s; }
.exp-card:hover::before, .exp-card.active::before { opacity: 1; }
.exp-card:hover, .exp-card.active { border-color: rgba(44,59,45,0.5); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(44,59,45,0.12); }
.exp-card.active { border-color: var(--primary-color); }
.field-wrap { position: relative; }
.field-line { width: 100%; background: transparent; border: 1px solid rgba(44,59,45,0.2); border-radius: 4px; padding: 14px; font-family: var(--body-font); font-size: 0.875rem; color: var(--primary-color); outline: none; transition: border-color 0.3s; }
.field-line::placeholder { color: rgba(44,59,45,0.3); }
.field-line:focus { border-color: var(--primary-color); }
.field-label { position: absolute; top: -10px; left: 12px; font-size: 18px; font-weight: 500; color: rgba(44,59,45,0.65); background: var(--bg-color); padding: 0 4px; letter-spacing: 0.01em; pointer-events: none; transition: all 0.25s; }
select.field-line { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232C3B2D' stroke-opacity='0.4' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
/* .reveal handled by GSAP — no CSS opacity:0 here to avoid broken layouts without JS */
.reveal { opacity: 1; transform: none; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,185,154,0.4); } 50% { box-shadow: 0 0 0 14px rgba(200,185,154,0); } }
.btn-breathe:hover { animation: breathe 1.8s ease-in-out infinite; }

/* ===== Property Page ===== */
.amenity-tag { display: inline-block; border: 1px solid rgba(44,59,45,0.18); color: rgba(44,59,45,0.65); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; }
.property-tab { cursor: pointer; transition: color 0.25s, border-color 0.25s; }
.property-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.property-panel { display: none; }
.property-panel.active { display: block; }
.prop-swiper { width: 100%; }
.prop-swiper .swiper-slide img { width: 100%; height: 560px; object-fit: cover; display: block; }