/* ========== BASE & CUSTOM PROPERTIES ========== */
:root {
  --forest-500: #4A6741;
  --cabin-800: #3D3226;
}

/* scroll-behavior: smooth is handled by JS for click events only */

body {
  overflow-x: hidden;
}

/* ========== HERO ========== */
.hero-bg {
  background:
    linear-gradient(135deg, #1a2a1a 0%, #2d4a2d 30%, #4A6741 60%, #3D3226 100%);
  background-size: cover;
  background-position: center;
}

.setcases-bg {
  background:
    linear-gradient(160deg, #2A2219 0%, #3D3226 40%, #32442d 100%);
}

/* ========== NAVIGATION ========== */
#navbar {
  background: transparent;
}

#navbar.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

#navbar.scrolled .nav-logo-text {
  color: #3D3226;
}

#navbar.scrolled .nav-link {
  color: rgba(61, 50, 38, 0.7);
}

#navbar.scrolled .nav-link:hover {
  color: #3D3226;
}

#navbar.scrolled #menu-toggle {
  color: #3D3226;
}

#navbar.scrolled a[href^="tel"] {
  background: #4A6741;
  color: white;
}

#navbar.scrolled a[href^="tel"]:hover {
  background: #3d5536;
}

#navbar.menu-open {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

#navbar.menu-open .nav-logo-text {
  color: #3D3226;
}

#navbar.menu-open button {
  color: #3D3226;
}

#navbar.menu-open a[href^="tel"] {
  background: #4A6741;
  color: white;
}

#navbar.menu-open a[href^="tel"]:hover {
  background: #3d5536;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 1s ease-out both;
}

.animate-fade-in-up {
  animation: fadeInUp 1s ease-out 0.2s both;
}

.animate-fade-in-up-delay {
  animation: fadeInUp 1s ease-out 0.4s both;
}

.animate-fade-in-up-delay-2 {
  animation: fadeInUp 1s ease-out 0.6s both;
}

/* ========== GUESTS DROPDOWN ========== */
#guests-dropdown {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid #E8E3DC;
  font-family: 'Inter', sans-serif;
}

/* ========== SEARCH WIDGET ========== */
/* Evita el flash de bordes quadrats al obrir el calendari */
#search-form,
#search-form *,
#search-form *:focus,
#search-form *:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}


.search-widget select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.search-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.25rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-right: 1.75rem;
}

/* ========== APARTMENT CARDS ========== */
.apt-card {
  transform: translateY(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.apt-card .relative img {
  transition: transform 0.6s ease;
}

/* Hover effects only on devices with true hover (not touch screens) */
@media (hover: hover) {
  .apt-card:hover {
    transform: translateY(-4px);
  }

  .apt-card:hover .relative img {
    transform: scale(1.05);
  }
}

/* ========== MODAL AMENITY (reused on detail pages) ========== */
.modal-amenity {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: #F0EDE8;
  color: #5A4A37;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ========== FLATPICKR CUSTOMIZATION ========== */
.flatpickr-calendar {
  border-radius: 0.75rem !important;
  z-index: 99999 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid #E8E3DC !important;
  font-family: 'Inter', sans-serif !important;
  padding: 8px !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #4A6741 !important;
  border-color: #4A6741 !important;
}

.flatpickr-day.inRange {
  background: #dce8d5 !important;
  border-color: #dce8d5 !important;
  box-shadow: -5px 0 0 #dce8d5, 5px 0 0 #dce8d5 !important;
}

.flatpickr-day:hover {
  background: #f0f5ed !important;
  border-color: #f0f5ed !important;
}

/* ========== CUSTOM HEADER (mes | any amb fletxes pròpies) ========== */
.fp-custom-header {
  display: flex;
  border-bottom: 1px solid #EDE8E0;
  border-radius: 0.6rem 0.6rem 0 0;
  background: #FAF9F7;
  overflow: hidden;
}

.fp-half {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 7px 4px;
}

.fp-half + .fp-half {
  border-left: 1px solid #EDE8E0;
}

.fp-lbl {
  flex: 1;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: #3D3226;
  pointer-events: none;
  user-select: none;
}

.fp-nav {
  background: none;
  border: none;
  cursor: pointer;
  color: #A0917F;
  font-size: 1.3rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.fp-nav:hover {
  background: #EDE8E0;
  color: #3D3226;
}

/* Dies de la setmana */
span.flatpickr-weekday {
  color: #A0917F !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Fix: elimina el doble border entre celdas de dies */
.flatpickr-day {
  border-color: transparent !important;
}

/* Dia d'avui */
.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
  color: white !important;
  font-weight: 600 !important;
  background: transparent !important;
  border-color: transparent !important;
  position: relative;
  z-index: 0;
}

.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange)::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  background: #4A6741;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 1px));
  pointer-events: none;
  z-index: -1;
}

/* Dias ocupats - pàgines d'apartament (classe custom, no seleccionables) */
.flatpickr-day.apt-ocupat,
.flatpickr-day.apt-ocupat:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  color: rgba(185, 28, 28, 0.5) !important;
  text-decoration: line-through !important;
  cursor: not-allowed !important;
  border-color: rgba(220, 38, 38, 0.12) !important;
}

/* Dia de sortida (checkout): triangle superior-esquerra bloquejat, inferior-dret lliure */
.flatpickr-day.apt-checkout:not(.selected):not(.startRange):not(.endRange):not(.inRange) {
  background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.12) 50%, transparent 50%) !important;
  color: rgba(185, 28, 28, 0.55) !important;
  text-decoration: none !important;
  border-color: transparent !important;
  cursor: pointer !important;
}

/* Dia d'entrada (checkin): triangle superior-esquerra lliure, inferior-dret bloquejat */
.flatpickr-day.apt-checkin:not(.selected):not(.startRange):not(.endRange):not(.inRange) {
  background: linear-gradient(to bottom right, transparent 50%, rgba(220, 38, 38, 0.12) 50%) !important;
  color: rgba(185, 28, 28, 0.55) !important;
  text-decoration: none !important;
  border-color: transparent !important;
  cursor: pointer !important;
}


/* ========== BOOKING FORM ========== */
#booking-form input:focus,
#booking-form select:focus,
#booking-form textarea:focus {
  box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.15);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 640px) {
  #inici h1 {
    font-size: 2.75rem;
    line-height: 1.1;
  }

  /* Panorama més alt en mobile → imatge proporcionalment més ampla → més recorregut lateral */
  #pano-container {
    aspect-ratio: 1 / 1 !important;
  }
}

/* ========== GALLERY SCROLL-SNAP ========== */
#gallery-main-wrap::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ========== PRINT ========== */
@media print {
  #navbar,
  .animate-bounce {
    display: none !important;
  }
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #FAF9F7;
}

::-webkit-scrollbar-thumb {
  background: #D4CCC1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #B5A898;
}