/* =========================================================
   BookLogic — Template 79 booking widget takvim teması (.bl-dp)
   bootstrap-datepicker 1.6.1 üzerine. Sınıf js/bl-datepicker.js ile
   eklenir; vurgu rengi widget'ın "Book Now" butonundan otomatik alınır
   (--bl-dp-accent). Otel bazlı ezmek için Code Settings CSS'ine:
     .datepicker.bl-dp{ --bl-dp-accent:#c0392b; }
   ========================================================= */
.datepicker.bl-dp{
  --bl-dp-accent: #0f7464;
  --bl-dp-accent-dark: #0b5a4d;
  --bl-dp-accent-08: rgba(15,116,100,.08);
  --bl-dp-accent-16: rgba(15,116,100,.16);
  --bl-dp-accent-30: rgba(15,116,100,.30);
  --bl-dp-accent-45: rgba(15,116,100,.45);
  --bl-dp-ink: #1f2933;
  --bl-dp-muted: #8a94a6;
  --bl-dp-line: #edf0f3;
  --bl-dp-faint: #c9cfd8;
}

.datepicker.bl-dp,
.datepicker.bl-dp.datepicker-dropdown{
  z-index: 9999 !important;
  padding: 16px 16px 12px;
  margin-top: 10px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 56px rgba(16,19,26,.22), 0 4px 14px rgba(16,19,26,.10);
  font-family: inherit;
  color: var(--bl-dp-ink);
  /* sabit genişlik: .dropdown-menu float/shrink-to-fit + %100 tablo kombinasyonu
     bazı temalarda takvimi sayfa genişliğine yayıyordu */
  width: 324px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  animation: blDpIn .18s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes blDpIn{
  from{ opacity:0; transform: translateY(8px) scale(.985); }
  to  { opacity:1; transform: none; }
}
/* bootstrap-datepicker'ın üçgen okları */
.datepicker.bl-dp.datepicker-dropdown:before,
.datepicker.bl-dp.datepicker-dropdown:after{ display:none !important; }

.datepicker.bl-dp table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

/* base temanın gri/mavi gradient zeminlerini sıfırla
   (base seçicileri .datepicker table tr td.X (0,3,3) → aynı ön ek şart) */
.datepicker.bl-dp table tr td,
.datepicker.bl-dp table tr th,
.datepicker.bl-dp table tr td.day,
.datepicker.bl-dp table tr td.day:hover,
.datepicker.bl-dp table tr td.focused,
.datepicker.bl-dp table tr td.today,
.datepicker.bl-dp table tr td.today:hover,
.datepicker.bl-dp table tr td.today.active,
.datepicker.bl-dp table tr td.today.active:hover,
.datepicker.bl-dp table tr td.active,
.datepicker.bl-dp table tr td.active:hover,
.datepicker.bl-dp table tr td.active.active,
.datepicker.bl-dp table tr td.selected,
.datepicker.bl-dp table tr td.selected:hover,
.datepicker.bl-dp table tr td.range,
.datepicker.bl-dp table tr td.range:hover,
.datepicker.bl-dp table tr td.disabled,
.datepicker.bl-dp table tr td.disabled:hover,
.datepicker.bl-dp table tr th.prev:hover,
.datepicker.bl-dp table tr th.next:hover,
.datepicker.bl-dp table tr th.datepicker-switch:hover{
  background: transparent;
  background-color: transparent;
  background-image: none;
  border: none;
  border-radius: 0;
  text-shadow: none;
  filter: none;
}

/* --- başlık: ay/yıl + oklar --- */
.datepicker.bl-dp thead tr:first-child th{ padding-bottom: 10px; }
.datepicker.bl-dp .datepicker-switch{
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--bl-dp-ink);
  border-radius: 10px;
  padding: 6px 4px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.datepicker.bl-dp table tr th.datepicker-switch:hover{
  background: var(--bl-dp-accent-08);
  color: var(--bl-dp-accent);
}
.datepicker.bl-dp .prev,
.datepicker.bl-dp .next{
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  color: var(--bl-dp-accent);
  font-size: 15px;
  line-height: 34px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.datepicker.bl-dp table tr th.prev:hover,
.datepicker.bl-dp table tr th.next:hover{
  background: var(--bl-dp-accent);
  color: #fff;
}
.datepicker.bl-dp .prev.disabled,
.datepicker.bl-dp .next.disabled{
  color: var(--bl-dp-faint);
  background: transparent;
  cursor: default;
  visibility: visible;
}

/* --- hafta günü satırı --- */
.datepicker.bl-dp .dow{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bl-dp-muted);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--bl-dp-line);
}
.datepicker.bl-dp tbody tr:first-child td{ padding-top: 8px; }

/* --- gün hücreleri --- */
.datepicker.bl-dp table tr td.day{
  position: relative;
  z-index: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bl-dp-ink);
  cursor: pointer;
  transition: color .18s ease;
}
/* daire katmanı (metnin altında) */
.datepicker.bl-dp table tr td.day::before{
  content: "";
  position: absolute;
  top: 3px; right: 3px; bottom: 3px; left: 3px;
  border-radius: 50%;
  z-index: -1;
  background: transparent;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.datepicker.bl-dp table tr td.day.old,
.datepicker.bl-dp table tr td.day.new{ color: var(--bl-dp-faint); }

.datepicker.bl-dp table tr td.day:hover:not(.disabled){ color: var(--bl-dp-accent-dark); }
.datepicker.bl-dp table tr td.day:hover:not(.disabled)::before{ background: var(--bl-dp-accent-08); }

/* bugün */
.datepicker.bl-dp table tr td.day.today:not(.active):not(.bl-range-start):not(.bl-range-end){
  color: var(--bl-dp-accent);
  font-weight: 700;
}
.datepicker.bl-dp table tr td.day.today:not(.active):not(.bl-range-start):not(.bl-range-end)::before{
  box-shadow: inset 0 0 0 1px var(--bl-dp-accent-30);
}

/* --- giriş↔çıkış arası: kesintisiz şerit (bl-datepicker.js beforeShowDay) --- */
.datepicker.bl-dp table tr td.day.bl-range{
  background: var(--bl-dp-accent-16);
  color: var(--bl-dp-accent-dark);
}
.datepicker.bl-dp table tr td.day.bl-range:hover::before{ background: var(--bl-dp-accent-30); }
.datepicker.bl-dp table tr td.day.bl-range-start{
  background: linear-gradient(to right, transparent 50%, var(--bl-dp-accent-16) 50%);
}
.datepicker.bl-dp table tr td.day.bl-range-end{
  background: linear-gradient(to left, transparent 50%, var(--bl-dp-accent-16) 50%);
}
.datepicker.bl-dp table tr td.day.bl-range-start.bl-range-end{ background: transparent; }
.datepicker.bl-dp table tbody tr td.day.bl-range:first-child{ border-top-left-radius: 19px; border-bottom-left-radius: 19px; }
.datepicker.bl-dp table tbody tr td.day.bl-range:last-child{ border-top-right-radius: 19px; border-bottom-right-radius: 19px; }

/* --- seçili uçlar (şeritten sonra gelmeli) --- */
.datepicker.bl-dp table tr td.day.active,
.datepicker.bl-dp table tr td.day.active:hover,
.datepicker.bl-dp table tr td.day.bl-range-start,
.datepicker.bl-dp table tr td.day.bl-range-end{
  color: #fff;
  font-weight: 600;
}
.datepicker.bl-dp table tr td.day.active::before,
.datepicker.bl-dp table tr td.day.bl-range-start::before,
.datepicker.bl-dp table tr td.day.bl-range-end::before{
  background: var(--bl-dp-accent);
  box-shadow: 0 6px 16px var(--bl-dp-accent-45);
}

/* --- geçmiş / kapalı günler --- */
.datepicker.bl-dp table tr td.day.disabled,
.datepicker.bl-dp table tr td.day.disabled:hover{
  color: var(--bl-dp-faint);
  cursor: not-allowed;
}
.datepicker.bl-dp table tr td.day.disabled::before,
.datepicker.bl-dp table tr td.day.disabled:hover::before{ background: transparent; box-shadow: none; }

/* --- ay / yıl görünümleri --- */
.datepicker.bl-dp .datepicker-months td,
.datepicker.bl-dp .datepicker-years td,
.datepicker.bl-dp .datepicker-decades td,
.datepicker.bl-dp .datepicker-centuries td{ padding: 6px 0 0; }
.datepicker.bl-dp table tr td span{
  width: 30.5%;
  height: 44px;
  line-height: 44px;
  margin: 1.3%;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bl-dp-ink);
  background: transparent;
  background-image: none;
  transition: background-color .18s ease, color .18s ease;
}
.datepicker.bl-dp table tr td span:hover{ background: var(--bl-dp-accent-08); color: var(--bl-dp-accent-dark); }
.datepicker.bl-dp table tr td span.active,
.datepicker.bl-dp table tr td span.active:hover{
  background: var(--bl-dp-accent);
  background-image: none;
  color: #fff;
  text-shadow: none;
}
.datepicker.bl-dp table tr td span.disabled,
.datepicker.bl-dp table tr td span.disabled:hover{ background: transparent; color: var(--bl-dp-faint); cursor: not-allowed; }
.datepicker.bl-dp table tr td span.old,
.datepicker.bl-dp table tr td span.new{ color: var(--bl-dp-faint); }

/* alt satır (today/clear butonları kullanılmıyor ama görünürse) */
.datepicker.bl-dp tfoot th{ padding-top: 8px; font-size: 12px; color: var(--bl-dp-muted); }

@media (max-width: 420px){
  .datepicker.bl-dp,
  .datepicker.bl-dp.datepicker-dropdown{ width: 292px !important; padding: 12px 10px 10px; }
  .datepicker.bl-dp table tr td.day{ width: 34px; height: 34px; font-size: 13px; }
}

/* =========================================================
   BOOKING WIDGET (.widgetForm) — takvim temasıyla uyumlu alanlar
   Buton rengi siteye ait kalır (yalnızca biçim). Vurgu değişkenleri
   bl-datepicker.js tarafından .widgetForm üzerine yazılır.
   ========================================================= */
.widgetForm{
  --bl-dp-accent: #0f7464;
  --bl-dp-accent-30: rgba(15,116,100,.30);
  background: rgba(10,14,20,.58) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 18px 0 !important;
}
.widgetForm form{ margin: 0; }
.widgetForm ul{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  padding: 0 16px !important;
  margin: 0 !important;
  text-align: left;
}
.widgetForm ul li{
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}
.widgetForm ul li > span{
  display: block;
  margin: 0 0 6px 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  text-align: left;
  white-space: nowrap;
}
.widgetForm ul li input,
.widgetForm ul li select,
.widgetForm ul li .smallSelect{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: 46px;
  margin: 0;
  padding: 0 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 10px !important;
  background-color: #fff;
  color: #1f2933 !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 44px;
  text-align: left !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
  outline: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.widgetForm ul li input::placeholder{ color: #98a2b3; font-weight: 400; }
.widgetForm ul li input.datepicker{
  width: 158px;
  padding-left: 42px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='3'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 16px 16px;
}
.widgetForm ul li select,
.widgetForm ul li .smallSelect{
  width: 88px !important;
  padding-right: 34px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}
.widgetForm ul li select::-ms-expand{ display: none; }
.widgetForm ul li input:hover,
.widgetForm ul li select:hover{ border-color: rgba(0,0,0,.08) !important; box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.widgetForm ul li input:focus,
.widgetForm ul li select:focus{
  border-color: var(--bl-dp-accent) !important;
  box-shadow: 0 0 0 3px var(--bl-dp-accent-30);
}
.widgetForm ul li button{
  box-sizing: border-box;
  height: 46px;
  margin: 0;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 46px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.widgetForm ul li button:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.34);
}
.widgetForm ul li button:active{ transform: translateY(0); filter: brightness(.96); }
.widgetForm ul li button:focus-visible{ outline: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.45), 0 8px 20px rgba(0,0,0,.28); }
@media (max-width: 991px){
  .widgetForm ul{ gap: 10px; }
  .widgetForm ul li input.datepicker{ width: 140px; }
  .widgetForm ul li select,
  .widgetForm ul li .smallSelect{ width: 80px !important; }
}

/* =========================================================
   ÖZEL SELECT (.bl-sel) — Adults/Children/Infant açılır listesi
   Tarayıcının <option> listesi biçimlenemediği için bl-datepicker.js
   her .widgetForm select'i için tetik + liste üretir; gerçek select
   gizli kalır ve formla gönderilir.
   ========================================================= */
.widgetForm ul li select.bl-sel-native{
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px; padding: 0 !important; border: 0 !important;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none;
}
.widgetForm ul li .bl-sel{ position: relative; display: block; }
.widgetForm ul li .bl-sel-btn{
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
  display: block;
  width: 88px;
  height: 46px;
  margin: 0;
  padding: 0 34px 0 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 10px !important;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  color: #1f2933 !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 44px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
  outline: 0;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.widgetForm ul li .bl-sel-btn:hover{ border-color: rgba(0,0,0,.08) !important; box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.widgetForm ul li .bl-sel-btn:focus-visible,
.widgetForm ul li .bl-sel.is-open .bl-sel-btn{
  border-color: var(--bl-dp-accent) !important;
  box-shadow: 0 0 0 3px var(--bl-dp-accent-30);
}
.widgetForm ul li .bl-sel.is-open .bl-sel-btn{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'/></svg>"); }

/* liste body'ye eklenir (overflow kırpmalarından etkilenmesin) */
.bl-sel-menu{
  --bl-dp-accent: #0f7464;
  --bl-dp-accent-08: rgba(15,116,100,.08);
  --bl-dp-accent-45: rgba(15,116,100,.45);
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  min-width: 112px;
  max-height: 272px;
  overflow-y: auto;
  padding: 6px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 56px rgba(16,19,26,.22), 0 4px 14px rgba(16,19,26,.10);
  font-family: inherit;
  color: #1f2933;
  animation: blDpIn .16s cubic-bezier(.2,.8,.3,1) both;
  scrollbar-width: thin;
}
.bl-sel-menu[hidden]{ display: none; }
.bl-sel-opt{
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 38px;
  color: #1f2933;
  cursor: pointer;
  user-select: none;
  transition: background-color .14s ease, color .14s ease;
}
.bl-sel-opt + .bl-sel-opt{ margin-top: 2px; }
.bl-sel-opt:hover,
.bl-sel-opt.is-focus{ background: var(--bl-dp-accent-08); color: var(--bl-dp-accent); }
.bl-sel-opt.is-selected{ background: var(--bl-dp-accent); color: #fff; box-shadow: 0 6px 16px var(--bl-dp-accent-45); }
.bl-sel-opt.is-selected::after{
  content: "";
  width: 14px; height: 14px; margin-left: 10px; flex: 0 0 auto;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px no-repeat;
}

/* tetik içindeki değer — etiket (li > span) kurallarından etkilenmesin */
.widgetForm ul li .bl-sel-btn .bl-sel-val{
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  color: #1f2933 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}
