/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 12 2026 | 05:40:46 */
/* Wadah Kartu Formulir */
.container-book .booking-card {
  background-color: #ffffff;
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  overflow: hidden;
}

/* Header Tab */
.container-book .tabs-container {
  display: flex;
  background-color: #f0f0f0; /* Latar belakang tab */
}

.container-book .tab {
  flex: 1;
  padding: 10px 15px;
  text-align: center;
  cursor: pointer; /* Penting agar terlihat bisa diklik */
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, background-color 0.2s; /* Animasi halus */
}

/* Gaya Tab Aktif */
.container-book .tab-active {
  color: #007bff; /* Biru aktif */
  border-bottom: 2px solid #007bff;
  background-color: #ffffff;
}

/* Gaya Tab Non-Aktif */
.container-book .tab-inactive {
  color: #777; /* Abu-abu non-aktif */
}

/* Konten Formulir (Default disembunyikan) */
.container-book .tab-content {
  display: none;
  padding: 25px;
}

/* Tampilkan konten aktif */
.container-book .active-content {
  display: block;
}

.container-book .form-title {
  text-align: center;
  font-size: 22px;
  margin-bottom: 25px;
  color: #333;
  font-weight: 700;
}

.container-book .form-title span {
  color: #007bff;
}

/* Baris Formulir untuk Penjajaran Elemen */
.container-book .form-row {
  display: flex;
  gap: 15px; /* Jarak antara input */
  margin-bottom: 15px;
}

/* Grup Formulir (Label + Input) */
.container-book .form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

/* Grup Formulir Penuh (Hanya satu input per baris) */
.container-book .form-group-full {
  width: 100%;
  margin-bottom: 15px;
}

.container-book label {
  font-size: 12px;
  color: #555;
  margin-bottom: 5px;
  font-weight: 500;
}

/* Tanda Bintang Wajib Merah */
.container-book .label-required {
  color: #ff0000;
}

/* Gaya Input Teks dan Tanggal */
.container-book input[type="text"],
.container-book input[type="email"],
.container-book input[type="tel"],
.container-book input[type="date"],
.container-book input[type="number"] {
  padding: 7px 12px;
  width: 100%;
  height: 30px;
  color: #333;
  font-size: 12px;
  line-height: 17px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
}

/* Warna Teks Placeholder */
::placeholder {
  color: #888;
  opacity: 1;
}

/* Menghilangkan Indikator Kalender Default */
.container-book input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
}

/* Gaya Dropdown Select kustom */
.container-book .select-wrapper {
  position: relative;
  width: 100%;
}

.container-book select {
  padding: 6px 12px;
  padding-right: 30px; /* Jarak untuk ikon panah */
  width: 100%;
  height: 30px;
  color: #333;
  font-size: 12px;
  line-height: 15px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  appearance: none; /* Menghilangkan panah default */
  -webkit-appearance: none;
  box-sizing: border-box;
}

/* Ikon Panah Kustom untuk Select */
.container-book .select-wrapper::after {
  content: '\25BC'; /* Simbol panah bawah unicode */
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 12px;
  color: #555;
  pointer-events: none; /* Klik tembus ke select */
}

/* Wadah Tombol untuk Penjajaran */
.container-book .button-container {
  text-align: center;
  margin-top: 25px;
}

/* Tombol 'Book Now' / 'Book Tour' */
.container-book .book-button {
  background-color: #008000; /* Hijau cerah */
  color: #ffffff;
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.container-book .book-button:hover {
  background-color: #006600; /* Hijau yang lebih gelap saat kursor di atas */
}

/* Penyesuaian Responsif untuk Perangkat Seluler */
@media (max-width: 480px) {
  .container-book .form-row {
    flex-direction: column;
    gap: 15px;
  }

  .container-book .tabs-container {
    flex-direction: column;
  }

  .container-book .tab {
    border-bottom: none;
    border-right: 2px solid transparent;
    text-align: left;
  }

  .container-book .tab-active {
    border-right: 2px solid #007bff;
  }
}