/*
 * Kontrol form tema Clay (LEX-246): select + daftar opsinya, checkbox, radio,
 * dan kalender (flatpickr) -- bahasa yang sama dengan kalender keberangkatan
 * detail tur (`.tour-kalender` di tour_detail.html), yang jadi acuannya.
 *
 * Dimuat di SEMUA halaman Clay, sesudah gerak.css (base.html).
 * - Hampir semua selektor dibungkus `:where()` (spesifisitas 0), jadi gaya
 *   khusus halaman yang sudah ada -- kotak cari beranda, kalender inline
 *   detail tur, daterangepicker detail kapal -- tetap menang tanpa `!important`.
 * - Daftar opsi `<select>` hanya bisa digayakan lewat `appearance: base-select`
 *   (Chrome/Edge 135+). Browser lain tetap memakai daftar bawaan, tapi tombol
 *   select-nya sudah clay.
 * - Input `type=date` diganti kalender clay oleh app.js (flatpickr); tanpa JS
 *   tetap input tanggal bawaan.
 */
:root {
  --kontrol-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23756b82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --kontrol-centang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 4.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --kontrol-cekung: inset 0 2px 5px rgba(78, 52, 96, .1), inset 0 -2px 4px rgba(255, 255, 255, .8);
  --kontrol-cincin: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* ---- Select ---- */
/* Panah bawaan dibiarkan di browser tanpa base-select: banyak aturan halaman
   memakai `background:` lengkap (kotak cari, form ulasan, panel pesan) yang
   akan menghapus chevron berupa gambar latar, menyisakan select tanpa panah. */
:where(select:not(.flatpickr-monthDropdown-months)) {
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 16px;
  background-color: var(--surface);
  box-shadow: 0 8px 18px rgba(83, 60, 101, .1), inset 0 -2px 5px rgba(78, 52, 96, .06), inset 0 2px 5px rgba(255, 255, 255, .8);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .32s var(--clay-pegas, ease);
}
/* Kotak cari beranda: select-nya sengaja polos di dalam kapsul; cukup panahnya. */
:where(.search-field select) { min-height: 0; padding: 0 26px 0 0; border: 0; background-color: transparent; box-shadow: none; }
:where(select:not(.flatpickr-monthDropdown-months)):focus-visible { outline: 0; box-shadow: var(--kontrol-cincin), 0 8px 18px rgba(83, 60, 101, .1); }
:where(.search-field select):focus-visible { box-shadow: none; }

@supports (appearance: base-select) {
  /* Satu-satunya aturan yang sengaja TIDAK `:where()`: halaman yang menulis
     `appearance:none` sendiri (mis. filter daftar tur) akan mengembalikan
     daftar opsi bawaan browser. `html` menaikkan spesifisitasnya di atas itu. */
  html select:not(.flatpickr-monthDropdown-months),
  html select:not(.flatpickr-monthDropdown-months)::picker(select) { appearance: base-select; }
  :where(select:not(.flatpickr-monthDropdown-months)) { display: inline-flex; align-items: center; gap: 10px; padding-right: 16px; }
  :where(.search-field select) { padding-right: 0; }
  /* Filter daftar tur sudah melukis chevron sebagai gambar latar
     (halaman-tur.css, dimuat sesudah berkas ini) -- jangan sampai dobel. */
  form.tour-filter-form select { background-image: none; padding-right: 16px; }
  :where(select:not(.flatpickr-monthDropdown-months))::picker-icon {
    content: ""; width: 12px; height: 8px; margin-left: auto; background: var(--kontrol-chevron) no-repeat center / contain;
    transition: rotate .32s var(--clay-pegas, ease);
  }
  :where(select:not(.flatpickr-monthDropdown-months)):open::picker-icon { rotate: 180deg; }
  :where(select:not(.flatpickr-monthDropdown-months))::picker(select) {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 24px 50px rgba(66, 47, 78, .22), inset 0 2px 0 rgba(255, 255, 255, .8);
    max-height: min(360px, 60vh);
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    transform-origin: top center;
    transition: opacity .2s ease, transform .3s var(--clay-pegas, ease), display .3s allow-discrete, overlay .3s allow-discrete;
  }
  :where(select:not(.flatpickr-monthDropdown-months)):open::picker(select) { opacity: 1; transform: none; }
  @starting-style {
    :where(select:not(.flatpickr-monthDropdown-months)):open::picker(select) { opacity: 0; transform: translateY(-6px) scale(.97); }
  }
  :where(select:not(.flatpickr-monthDropdown-months)) option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 14px;
    color: var(--muted); font-weight: 700;
    transition: background-color .15s ease, color .15s ease, transform .25s var(--clay-pegas, ease);
  }
  :where(select:not(.flatpickr-monthDropdown-months)) option::checkmark { order: 1; margin-left: auto; content: "✓"; color: var(--brand); font-weight: 900; }
  :where(select:not(.flatpickr-monthDropdown-months)) option:hover,
  :where(select:not(.flatpickr-monthDropdown-months)) option:focus-visible { outline: 0; background: var(--lavender); color: var(--ink); transform: translateX(3px); }
  :where(select:not(.flatpickr-monthDropdown-months)) option:checked {
    color: var(--ink); background: var(--lavender);
    box-shadow: inset 0 -3px 7px rgba(89, 66, 112, .12), inset 0 3px 7px rgba(255, 255, 255, .72);
  }
  :where(select:not(.flatpickr-monthDropdown-months)) option:disabled { opacity: .45; }
}

/* ---- Checkbox & radio ---- */
:where(input[type="checkbox"], input[type="radio"]) {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid rgba(117, 107, 130, .22);
  border-radius: 8px;
  background: var(--surface) no-repeat center / 14px 14px;
  box-shadow: var(--kontrol-cekung);
  vertical-align: -5px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .32s var(--clay-pegas, ease);
}
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"]):checked {
  border-color: var(--brand);
  background-color: var(--brand);
  background-image: var(--kontrol-centang);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 35%, transparent), inset 0 -2px 4px rgba(0, 0, 0, .12), inset 0 2px 4px rgba(255, 255, 255, .35);
  animation: kontrol-pop .4s var(--clay-pegas, ease);
}
:where(input[type="radio"]):checked {
  border-color: var(--brand);
  background: radial-gradient(circle, #fff 0 4px, var(--brand) 5px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 35%, transparent), inset 0 -2px 4px rgba(0, 0, 0, .12);
  animation: kontrol-pop .4s var(--clay-pegas, ease);
}
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 0; box-shadow: var(--kontrol-cincin), var(--kontrol-cekung); }
:where(input[type="checkbox"], input[type="radio"]):disabled { opacity: .45; cursor: not-allowed; }
:where(input[type="checkbox"], input[type="radio"]):active { transform: scale(.88); }
@media (hover: hover) and (pointer: fine) {
  :where(input[type="checkbox"], input[type="radio"]):not(:checked):not(:disabled):hover { border-color: color-mix(in srgb, var(--brand) 55%, transparent); transform: scale(1.08); }
  :where(select:not(.flatpickr-monthDropdown-months)):hover { box-shadow: 0 12px 24px rgba(83, 60, 101, .14), inset 0 -2px 5px rgba(78, 52, 96, .06), inset 0 2px 5px rgba(255, 255, 255, .8); }
  :where(.search-field select):hover { box-shadow: none; }
}
@keyframes kontrol-pop { 0% { transform: scale(1); } 35% { transform: scale(.82); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* ---- Kalender (flatpickr) sembulan untuk input tanggal ----
   `.clay-kalender` dipasang app.js. Kalender inline detail tur punya gayanya
   sendiri (.tour-kalender) dan tidak memakai kelas ini. */
.flatpickr-calendar.clay-kalender {
  width: 324px;
  padding: 14px 14px 10px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 26px 56px rgba(66, 47, 78, .24), inset 0 2px 0 rgba(255, 255, 255, .8);
  font-family: inherit;
}
.flatpickr-calendar.clay-kalender.open { animation: kontrol-muncul .3s var(--clay-pegas, ease); }
.flatpickr-calendar.clay-kalender::before, .flatpickr-calendar.clay-kalender::after { display: none; }
.clay-kalender .flatpickr-months { position: relative; align-items: center; }
.clay-kalender .flatpickr-months .flatpickr-month { height: 40px; color: var(--ink); fill: var(--ink); }
.clay-kalender .flatpickr-current-month { padding-top: 8px; font: 800 .98rem/1 var(--clay-heading-font) !important; color: var(--ink) !important; }
.clay-kalender .flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 800; border-radius: 10px; }
.clay-kalender .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--lavender); }
.clay-kalender .flatpickr-current-month input.cur-year { font-weight: 800; }
.clay-kalender .numInputWrapper:hover { background: transparent; }
.clay-kalender .flatpickr-prev-month, .clay-kalender .flatpickr-next-month {
  top: 14px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border-radius: 12px; background: var(--lavender);
  transition: transform .25s var(--clay-pegas, ease);
}
.clay-kalender .flatpickr-prev-month { left: 14px; }
.clay-kalender .flatpickr-next-month { right: 14px; }
.clay-kalender .flatpickr-prev-month:hover, .clay-kalender .flatpickr-next-month:hover { transform: scale(1.1); }
.clay-kalender .flatpickr-prev-month:hover svg, .clay-kalender .flatpickr-next-month:hover svg { fill: var(--brand); }
.clay-kalender .flatpickr-prev-month svg, .clay-kalender .flatpickr-next-month svg { width: 12px; height: 12px; fill: var(--ink); }
.clay-kalender .flatpickr-prev-month.flatpickr-disabled { opacity: .35; }
.clay-kalender .flatpickr-innerContainer, .clay-kalender .flatpickr-rContainer { display: block; width: 100%; }
.clay-kalender .flatpickr-weekdays { height: 30px; margin-top: 4px; }
.clay-kalender span.flatpickr-weekday { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.clay-kalender .flatpickr-days { width: 100% !important; }
.clay-kalender .dayContainer { width: 100%; min-width: 0; max-width: none; }
.clay-kalender .flatpickr-day {
  max-width: none; flex-basis: calc(14.2857% - 4px); width: calc(14.2857% - 4px);
  height: 38px; line-height: 34px; margin: 2px;
  border: 2px solid transparent; border-radius: 12px;
  color: var(--ink); font-weight: 700; font-size: .86rem;
  transition: transform .25s var(--clay-pegas, ease), background-color .15s ease, border-color .15s ease;
}
.clay-kalender .flatpickr-day:not(.flatpickr-disabled):not(.selected):hover { background: var(--lavender); border-color: var(--lavender-strong, #cbb8ff); transform: translateY(-2px); }
.clay-kalender .flatpickr-day.prevMonthDay, .clay-kalender .flatpickr-day.nextMonthDay { color: #cdbfcf; }
.clay-kalender .flatpickr-day.flatpickr-disabled, .clay-kalender .flatpickr-day.flatpickr-disabled:hover { color: #d9cedb; background: transparent; cursor: default; }
.clay-kalender .flatpickr-day.today:not(.selected) { border-color: var(--lavender-strong, #cbb8ff); }
.clay-kalender .flatpickr-day.selected, .clay-kalender .flatpickr-day.selected:hover {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 38%, transparent);
  animation: kontrol-pop .4s var(--clay-pegas, ease);
}
@keyframes kontrol-muncul { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---- Kalender daterangepicker (detail kapal) disamakan dengan acuan detail tur ----
   Gaya dasarnya di blok <style> boat_detail.html (T-186), dimuat SESUDAH berkas
   ini; `html` menaikkan spesifisitas. Status penuh (merah) dan sebagian (kuning)
   memakai !important di sana dan tetap menang. */
html .daterangepicker th.prev, html .daterangepicker th.next { background: var(--lavender); transition: transform .25s var(--clay-pegas, ease); }
html .daterangepicker th.prev:hover, html .daterangepicker th.next:hover { transform: scale(1.1); }
html .daterangepicker td.available:not(.off):not(.disabled):not(.active) { background: var(--mint); color: #1f6b47; }
html .daterangepicker td.available:not(.off):not(.disabled):not(.active):hover { background: var(--mint); box-shadow: inset 0 0 0 2px #8fd3b0; transform: translateY(-1px); }
html .daterangepicker td.today:not(.active) { box-shadow: inset 0 0 0 2px var(--lavender-strong, #cbb8ff); }
html .daterangepicker td { transition: transform .25s var(--clay-pegas, ease), background-color .15s ease; }
html .daterangepicker td.active { animation: kontrol-pop .4s var(--clay-pegas, ease); }
/* Sebelum pengunjung memilih, kalender kabin menandai tanggal awal tanpa warna
   merek (boat_detail.html); ubinnya kembali mint, bukan putih. */
html .inline-calendar-container:not(.sudah-pilih) .daterangepicker td.active.available:not(:hover) { background: var(--mint) !important; color: #1f6b47 !important; animation: none; }

/* Input tampilan (altInput) mengikuti gaya input teks di sekitarnya; cukup ikon kalender. */
.clay-kalender-input {
  cursor: pointer;
  padding-right: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='4' fill='none' stroke='%23756b82' stroke-width='1.8'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4' stroke='%23756b82' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;
}

@media (prefers-reduced-motion: reduce) {
  :where(input[type="checkbox"], input[type="radio"]):checked,
  .flatpickr-calendar.clay-kalender.open,
  .clay-kalender .flatpickr-day.selected { animation: none; }
}