/* STRANDVERGNÜGEN — shared app styles */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdc6ba; border-radius: 10px; }

.glass {
  background: rgba(250, 249, 246, 0.78);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 8px 40px rgba(102, 94, 75, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.dark .glass {
  background: rgba(42, 44, 42, 0.85);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

.glass-dark {
  background: rgba(26, 28, 26, 0.68);
  backdrop-filter: blur(28px) saturate(180%);
}

.btn-shimmer { position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -60%; left: -80%;
  width: 50%; height: 220%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}
.btn-shimmer:hover::after { left: 130%; }
.btn-shimmer:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(102, 94, 75, 0.26); }

.card-lift {
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s;
}
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(102, 94, 75, 0.14); }

.staggered-entrance {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s;
}
.staggered-entrance.visible { opacity: 1; transform: translateY(0); }

#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
  opacity: 0;
}
#mobile-menu.open { max-height: 520px; opacity: 1; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #665e4b;
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: #ede1c9; color: #211b0c; }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, rgba(102, 94, 75, 0.08) 25%, rgba(102, 94, 75, 0.14) 50%, rgba(102, 94, 75, 0.08) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: 0.5rem;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Spinner */
.spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid rgba(102, 94, 75, 0.2);
  border-top-color: #665e4b;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
#toast-root {
  position: fixed;
  bottom: 5.5rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(24rem, calc(100vw - 2rem));
}
.toast {
  padding: 0.875rem 1.125rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-family: Manrope, sans-serif;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  animation: toast-in 0.35s ease;
}
.toast-success { background: #e8f5e9; color: #1b5e20; border: 1px solid rgba(27, 94, 32, 0.2); }
.toast-error { background: #ffdad6; color: #93000a; border: 1px solid rgba(147, 0, 10, 0.2); }
.toast-info { background: #faf9f6; color: #1a1c1a; border: 1px solid rgba(102, 94, 75, 0.2); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Form */
.co-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid rgba(102, 94, 75, 0.2);
  border-radius: 0.75rem;
  background: rgba(250, 249, 246, 0.7);
  font-family: Manrope, sans-serif;
  font-size: 0.9rem;
  color: #1a1c1a;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.dark .co-input { background: rgba(42, 44, 42, 0.6); color: #f2f1ee; }
.co-input:focus { border-color: #665e4b; box-shadow: 0 0 0 3px rgba(102, 94, 75, 0.12); }
.co-input.error { border-color: #ba1a1a; }
.co-input--readonly {
  cursor: default;
  opacity: 0.92;
  pointer-events: none;
  background: rgba(102, 94, 75, 0.06);
}

.bw-date-hint {
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: rgba(102, 94, 75, 0.1);
  border: 1px solid rgba(102, 94, 75, 0.28);
  font-size: 0.88rem;
  line-height: 1.45;
  color: #3d3729;
}

.bw-date-hint--error {
  background: rgba(180, 60, 60, 0.1);
  border-color: rgba(180, 60, 60, 0.35);
  color: #6b2020;
}

.bw-date-hint-sub {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  opacity: 0.9;
}
.co-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(61, 55, 41, 0.65);
  margin-bottom: 0.4rem;
}
.field-error { font-size: 0.75rem; color: #ba1a1a; margin-top: 0.25rem; }

/* Property card */
.property-card-img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* Gallery lightbox */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.gallery-lightbox img { max-height: 90vh; max-width: 100%; object-fit: contain; }

/* Sticky booking bar mobile */
.mobile-book-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 0.75rem 1rem;
  background: rgba(250, 249, 246, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(102, 94, 75, 0.15);
}
.dark .mobile-book-bar { background: rgba(26, 28, 26, 0.95); }
@media (min-width: 1024px) { .mobile-book-bar { display: none; } }

/* Checkout steps */
.checkout-step { display: none; }
.checkout-step.active { display: block; }
.step-dot.active { background: #665e4b; color: #fff; }
.step-dot.done { background: #406375; color: #fff; }

/* FAQ */
.faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-panel { max-height: 24rem; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

@media (max-width: 767px) {
  .px-container-padding { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .py-section-gap { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}