/* ============================================ */
/* Loading Spinner Animation */
/* ============================================ */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================ */
/* Vanilla Calendar Pro - Bugün Stili */
/* ============================================ */
/* Bugün için sadece button arka planı siyah + beyaz rakam (container değil!) */
.vc-date[data-vc-date-today] .vc-date__btn {
  background-color: var(--vc-today-bg, #000000) !important;
  color: var(--vc-today-text, #ffffff) !important;
}

/* Bugün + hafta sonu kombinasyonu: yazı rengi beyaz kalmalı */
.vc-date[data-vc-date-today][data-vc-date-week-day="6"] .vc-date__btn,
.vc-date[data-vc-date-today][data-vc-date-week-day="0"] .vc-date__btn {
  color: var(--vc-today-text, #ffffff) !important;
}

/* Seçili gün (1. veya 2. tıklanan) için arka plan yeşil + beyaz rakam */
.vc-date[data-vc-date-selected] .vc-date__btn {
  background-color: var(--vc-selected-bg, #008800) !important;
  color: var(--vc-selected-text, #ffffff) !important;
  border-radius: 6px 0 0 6px !important; /* Varsayılan: Sol yuvarlaklık, sağ düz */
}

/* Range başlangıç: Sol yuvarlaklık, sağ düz (aynı) */
.vc-date[data-vc-date-selected="start"] .vc-date__btn {
  border-radius: 6px 0 0 6px !important;
}

/* Range bitiş: Sol düz, sağ yuvarlaklık */
.vc-date[data-vc-date-selected="end"] .vc-date__btn {
  border-radius: 0 6px 6px 0 !important;
}

/* Range içindeki günler (middle) açık yeşil arka plan + tüm köşeler düz */
.vc-date[data-vc-date-selected="middle"] .vc-date__btn {
  background-color: var(--vc-range-middle-bg, #E6F2E6) !important;
  color: var(--vc-range-middle-text, rgb(15, 23, 42)) !important;
  border-radius: 0 !important;
}

/* Seçili günün hover'ı da yeşil */
.vc-date[data-vc-date-selected] .vc-date__btn:hover {
  background-color: var(--vc-selected-bg, #008800) !important;
  color: var(--vc-selected-text, #ffffff) !important;
}

/* ============================================ */
/* Range Hover Preview (ilk tarih seçildiğinde) */
/* ============================================ */
/* Hover preview middle (ara günler): açık yeşil */
.vc-date[data-vc-date-hover-preview="middle"] .vc-date__btn {
  background-color: var(--vc-range-middle-bg, #E6F2E6) !important;
  color: var(--vc-range-middle-text, rgb(15, 23, 42)) !important;
  border-radius: 0 !important;
}

/* Hover preview end (hover edilen gün): yeşil + sağ yuvarlaklık */
.vc-date[data-vc-date-hover-preview="end"] .vc-date__btn {
  background-color: var(--vc-selected-bg, #008800) !important;
  color: var(--vc-selected-text, #ffffff) !important;
  border-radius: 0 6px 6px 0 !important;
}

/* Tüm gün başlıklarını (hafta içi + hafta sonu) aynı renge çevir */
.vc-week__day {
  color: var(--vc-range-middle-text, rgb(15, 23, 42)) !important;
}

/* Takvim footer: grid sıkışmasını önle */
#vanilla-calendar-footer {
  align-items: start !important; /* center yerine start (alt satır için) */
}

/* Takvim footer status text rengi ve alt satıra geçiş */
#vanilla-status-text {
  color: var(--vc-status-error, rgba(217, 20, 16, 1.0)) !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  min-width: 0 !important; /* Grid sıkışmasını önle */
  line-height: 1.4 !important; /* Çok satırlı metin için */
}

/* Ay seçicide aktif ayların (disabled olmayan) yazı rengi gün başlıkları ile aynı */
.vc-months__month:not([disabled]) {
  color: var(--vc-range-middle-text, rgb(15, 23, 42)) !important;
}

/* Ay seçicide aktif ayların (seçili olmayan) hover: siyah arka plan + beyaz yazı */
.vc-months__month:not([disabled]):not([data-vc-months-month-selected]):hover {
  background-color: var(--vc-month-hover-bg, #000000) !important;
  color: var(--vc-month-hover-text, #ffffff) !important;
}

/* Ay seçicide seçili ayın arka plan rengi yeşil + beyaz yazı */
.vc-months__month[data-vc-months-month-selected] {
  background-color: var(--vc-month-selected-bg, #008800) !important;
  color: var(--vc-month-selected-text, #ffffff) !important;
}

/* Ay seçicide seçili ayın hover'ı da yeşil */
.vc-months__month[data-vc-months-month-selected]:hover {
  background-color: var(--vc-month-selected-bg, #008800) !important;
  color: var(--vc-month-selected-text, #ffffff) !important;
}

/* Yıl seçicide aktif yılların (disabled olmayan) yazı rengi gün başlıkları ile aynı */
.vc-years__year:not([disabled]) {
  color: var(--vc-range-middle-text, rgb(15, 23, 42)) !important;
}

/* Yıl seçicide aktif yılların (seçili olmayan) hover: siyah arka plan + beyaz yazı */
.vc-years__year:not([disabled]):not([data-vc-years-year-selected]):hover {
  background-color: var(--vc-month-hover-bg, #000000) !important;
  color: var(--vc-month-hover-text, #ffffff) !important;
}

/* Yıl seçicide seçili yılın arka plan rengi yeşil + beyaz yazı */
.vc-years__year[data-vc-years-year-selected] {
  background-color: var(--vc-month-selected-bg, #008800) !important;
  color: var(--vc-month-selected-text, #ffffff) !important;
}

/* Yıl seçicide seçili yılın hover'ı da yeşil */
.vc-years__year[data-vc-years-year-selected]:hover {
  background-color: var(--vc-month-selected-bg, #008800) !important;
  color: var(--vc-month-selected-text, #ffffff) !important;
}

/* Hafta sonu günlerini (Cumartesi/Pazar) normal (koyu) renge çevir */
.vc-date[data-vc-date-week-day="6"] .vc-date__btn,
.vc-date[data-vc-date-week-day="0"] .vc-date__btn {
  color: var(--vc-range-middle-text, rgb(15, 23, 42)) !important;
}

/* Hafta sonu günleri seçilince yazı rengi beyaz (1. veya 2. gün) */
.vc-date[data-vc-date-week-day="6"][data-vc-date-selected] .vc-date__btn,
.vc-date[data-vc-date-week-day="0"][data-vc-date-selected] .vc-date__btn {
  color: var(--vc-selected-text, #ffffff) !important;
}

/* Hafta sonu günleri seçilince hover da yeşil arka plan */
.vc-date[data-vc-date-week-day="6"][data-vc-date-selected] .vc-date__btn:hover,
.vc-date[data-vc-date-week-day="0"][data-vc-date-selected] .vc-date__btn:hover {
  background-color: var(--vc-selected-bg, #008800) !important;
  color: var(--vc-selected-text, #ffffff) !important;
}

/* Hafta sonu günleri range içinde (middle) ise yazı rengi koyu */
.vc-date[data-vc-date-week-day="6"][data-vc-date-selected="middle"] .vc-date__btn,
.vc-date[data-vc-date-week-day="0"][data-vc-date-selected="middle"] .vc-date__btn {
  color: var(--vc-range-middle-text, rgb(15, 23, 42)) !important;
}

/* Hafta sonu günlerinin hover'ını hafta içi ile aynı yap */
.vc-date[data-vc-date-week-day="6"] .vc-date__btn:hover,
.vc-date[data-vc-date-week-day="0"] .vc-date__btn:hover {
  background-color: var(--vc-day-hover-bg, rgb(241, 245, 249)) !important;
  color: var(--vc-day-hover-text, rgb(15, 23, 42)) !important;
}

/* Hafta sonu günlerinin range hover'ını (henüz 2. tarih seçilmediğinde) hafta içi ile aynı yap */
.vc-date[data-vc-date-weekend][data-vc-date-hover]:not([data-vc-date-selected]) .vc-date__btn {
  background-color: var(--vc-day-hover-bg, rgb(241, 245, 249)) !important;
  color: var(--vc-day-hover-text, rgb(15, 23, 42)) !important;
}

/* ============================================ */
/* Disabled Günler (maxDate sonrası) - EN YÜKSEK ÖNCELİK */
/* ============================================ */
/* Tüm disabled günler (hafta sonu dahil) aynı soluk renkte */
.vc-date[data-vc-date-disabled] .vc-date__btn {
  color: var(--vc-disabled-text, #cbd5e1) !important;
  background-color: transparent !important;
  cursor: not-allowed !important;
}

/* Disabled günlerde hover efekti olmasın */
.vc-date[data-vc-date-disabled] .vc-date__btn:hover {
  color: var(--vc-disabled-text, #cbd5e1) !important;
  background-color: transparent !important;
}

/* Number inputs: hide native spinners for consistent layout */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] { -moz-appearance: textfield; }
/* Subtle right nudge for values (now 4px closer to arrows) */
#adults, #children { padding-right: calc(2.5rem - 4px) !important; }

/* Temel reset: html/body boşluklarını kaldır, tam ekran overlay için gerekli */
html, body { margin: 0 !important; padding: 0 !important; background-color: var(--theme-page-bg); }
/* Scrollbar genişliğini sabitle (yenilemede layout kaymasını önle) */
html { scrollbar-gutter: stable both-edges; }
body { scrollbar-gutter: stable both-edges; }

/* Global overlay tam ekran kapsama */
#global-loading-overlay { position: fixed !important; inset: 0 !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; }

/* Page fade-in (all views): very slight fade on refresh */
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
html:not(.fade-in-ready) main { opacity: 0; }
html.fade-in-ready main { animation: pageFadeIn 320ms ease-out; }
/* Slower fade when global overlay is used (showprices=1 at load) */
html.fade-in-ready.fade-in-slow main { animation: pageFadeIn 1200ms ease-out; }

/* Desktop-only: showprices=1 iken search box ve unselected segmented buton arka planları */
@media (min-width: 768px) {
  /* Form (search box) arka planını override et */
  html[data-showprices="1"] form { background-color: var(--sp-desktop-searchbox-bg) !important; }
  /* Para birimi segmented (sadece unselected) */
  html[data-showprices="1"] #currency-buttons .btn-currency[aria-pressed="false"]:not(:hover):not(:focus):not(:active) { background-color: var(--sp-desktop-unselected-bg) !important; }
  /* Dil segmented (sadece unselected) */
  html[data-showprices="1"] #lang-buttons .btn-lang[aria-pressed="false"]:not(:hover):not(:focus):not(:active) { background-color: var(--sp-desktop-unselected-bg) !important; }
}

/* Mobile-only: check-in başlığı ile form üst sınırı arasına +2px ekle */
@media (max-width: 767px) {
  #label-checkin { margin-top: 2px !important; }
  /* Mobile-only: check-out başlığını 3px yukarı çek (üstteki check-in input alt sınırına yaklaşsın) */
  #label-checkout { margin-top: -3px !important; }
}
/* Price buttons split layout */
.js-price-btn-1, .js-price-btn-2 {
  position: relative;
  /* Layout kaymasını önlemek için tüm butonlara 1px transparent border */
  border: 1px solid transparent;
}
/* Seçili olmayan butonlar: gri arka plan ve koyu sınır */
.js-price-btn-1:not([data-selected="true"]), .js-price-btn-2:not([data-selected="true"]) {
  background-color: var(--price-btn-default-bg, #646464) !important;
  border-color: var(--price-btn-default-border, #323232) !important;
}
/* Hover rengi */
.js-price-btn-1:hover, .js-price-btn-2:hover { 
  background-color: var(--price-btn-hover-bg, #008800) !important; 
}
/* Seçili buton: arka plan + 1px siyah border */
.js-price-btn-1[data-selected="true"], .js-price-btn-2[data-selected="true"] {
  background-color: var(--price-btn-selected-bg, #008800) !important;
  border-color: var(--price-selected-border-color, #000000) !important;
}
/* Seçili + hover: hover bg korunurken border da siyah kalır */
.js-price-btn-1[data-selected="true"]:hover, .js-price-btn-2[data-selected="true"]:hover {
  border-color: var(--price-selected-border-color, #000000) !important;
}
.js-price-btn-1 .btn-left, .js-price-btn-2 .btn-left {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%;
  font-size: 13px !important; text-shadow: 0 0 2px var(--price-btn-text-shadow, #fff) !important;
}
.js-price-btn-1 .btn-right, .js-price-btn-2 .btn-right {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 35%;
  text-align: right; font-size: 13px !important; text-shadow: 0 0 2px var(--price-btn-text-shadow, #fff) !important; font-weight: 700 !important;
}
/* Grid tabanlı buton yapısı kullanıldığında sağ hücreyi kalınlaştır */
.js-price-btn-1 .btn-grid-right, .js-price-btn-2 .btn-grid-right { font-weight: 700 !important; }

/* Seçili vitrin kartında (showprices=1 iken) oda adı */
html[data-showprices="1"] [data-room-code][data-selected="true"] .card-title {
  color: var(--card-title-selected, #008800) !important;
}
/* Sayfa alt boşluğu: +3px */
main { padding-bottom: calc(1rem + 3px) !important; }

:root {
  /* Scrollbar colors sourced from theme at runtime via style sync */
  --sp-right-track-bg: var(--sp-scrollbar-track, #c7d8c7);
  --sp-right-thumb: var(--sp-scrollbar-thumb, #008800);
}

/* ============================================ */
/* Native Scrollbar Customization (#side-panel-col-right) */
/* ============================================ */
/* Okları (Arrows) geri getirmek için Native Scrollbar kullanıyoruz */

#side-panel-col-right {
  overflow-y: scroll !important; /* Scrollbar her zaman aktif */
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  cursor: pointer !important;
  
  /* Padding (JS override etmemeli) */
  padding-left: 0px !important;
  padding-right: 0px !important; /* Tablo 100% olsun */
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--sp-right-thumb, #008800) var(--sp-right-track-bg, #c7d8c7);
}

/* Tablo ayarları */
#side-panel-col-right table {
  width: 100% !important;
  margin: 0 !important;
  padding-right: 4px !important; /* İçeriği scrollbar'dan biraz uzaklaştır */
}

/* --- Webkit Scrollbar (Chrome, Edge, Safari) --- */

/* Scrollbar Genişliği */
#side-panel-col-right::-webkit-scrollbar {
  width: 16px !important; /* Okların rahat görünmesi için genişlik */
  display: block !important;
}

/* Track (Zemin) */
#side-panel-col-right::-webkit-scrollbar-track {
  background-color: var(--sp-right-track-bg, #c7d8c7) !important;
  border-left: 1px solid rgba(0,0,0,0.1); /* Hafif ayrım çizgisi */
}

/* Thumb (Kaydırma Çubuğu) */
#side-panel-col-right::-webkit-scrollbar-thumb {
  background-color: var(--sp-right-thumb, #008800) !important;
  border: 3px solid var(--sp-right-track-bg, #c7d8c7) !important; /* Etrafında boşluk hissi */
  border-radius: 99px !important; /* Tam yuvarlak */
  min-height: 40px; /* Çok kısa olmasın */
}
#side-panel-col-right::-webkit-scrollbar-thumb:hover {
  background-color: #0a7a0a !important; /* Hover rengi */
  border-color: var(--sp-right-track-bg, #c7d8c7) !important;
}

/* --- Butonlar (Oklar) --- */
#side-panel-col-right::-webkit-scrollbar-button {
  display: block !important;
  height: 16px !important;
  width: 16px !important;
  background-color: var(--sp-right-track-bg, #c7d8c7) !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  border: 1px solid rgba(0,0,0,0.05); /* Hafif sınır */
}
/* Buton Hover */
#side-panel-col-right::-webkit-scrollbar-button:hover {
  background-color: #b5c6b5 !important;
}

/* Yukarı Ok (SVG Data URI - Koyu Yeşil) */
#side-panel-col-right::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23006400'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E") !important;
}

/* Aşağı Ok (SVG Data URI - Koyu Yeşil) */
#side-panel-col-right::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23006400'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") !important;
}

/* Sağ panel tablo: margin sıfırla */
#side-panel-col-right table { margin: 0 !important; margin-top: 0 !important; }
/* İlk satırın td'lerine padding-top ekle (container padding-top ile uyumlu) - IPTAL: Container padding zaten var */
/* #side-panel-col-right table tr:first-child td { padding-top: 8px !important; } */
/* Sağ panel tablo sol hücreleri: 10px sol padding */
#side-panel-col-right table td:first-child { padding-left: 10px !important; }
/* Left column: scrollbar gizli ama mouse ile scroll açık; imleç her zaman el işareti */
#side-panel-col-left { scrollbar-width: none; cursor: pointer !important; border-right: 1px solid var(--sp-panel-border, #c5cbd3) !important; }
#side-panel-col-left::-webkit-scrollbar { width: 0; height: 0; }