:root {
  --bs-primary: rgb(35, 12, 4);
  --bs-secondary: #eec84d;
}

body {
  /* background-image: rgba(35, 12, 4, .1), url("https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=1470&auto=format&fit=crop"); */
  background-image: linear-gradient(
      to top,
      rgba(35, 12, 4, 1),
      rgba(35, 12, 4, 0.9)
    ),
    url("../../img/connect2025/1.JPG");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Inter", sans-serif;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Libre Baskerville", serif;
}

.form-control.underline,
.form-select.underline,
.select2 {
  border: none;
  border-bottom: 1px solid var(--bs-secondary);
  border-radius: 0px;
  background-color: transparent;
  box-shadow: none;
  text-align: center;
  color: var(--bs-secondary);
}

#heading {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.form-control.underline.animated,
.form-select.underline.animated .select2.animated,
.hint-block.animated,
.btn-primary.animated,
.btn-secondary.animated,
#heading.animated,
.input-mod.animated,
.select2-mod.animated {
  opacity: 1;
  transform: translateY(0);
}

.form-select.underline option {
  color: #231204;
  /* Use your --bs-primary or any dark color */
  background-color: #f8f9fa;
  /* Optional: light background for contrast */
}

.form-control.underline::placeholder,
.form-select.underline::selection {
  color: #a8a8a8;
}

.form-control.underline:focus,
.form-select.underline:focus {
  border-color: var(--bs-secondary);
  box-shadow: none;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.btn-primary {
  background-color: var(--bs-primary);
  border: 0;
  border-radius: 0;
  color: var(--bs-secondary);
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border: 0;
  border-radius: 0;
  color: var(--bs-primary);
  font-weight: 600;
}

.btn-primary,
.btn-secondary {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Make select arrow icon light */
.form-select.underline {
  color-scheme: light dark;
  /* Helps on some browsers */
}

/* Chrome, Safari, Edge: style the select arrow */
.form-select.underline {
  /* Remove default arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5.516 7.548a.625.625 0 0 1 .884-.032L10 10.857l3.6-3.341a.625.625 0 1 1 .852.914l-4 3.715a.625.625 0 0 1-.852 0l-4-3.715a.625.625 0 0 1-.032-.884z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.2em;
  padding-right: 2.5em;
}

/* Chrome, Safari, Edge: style the calendar icon */
input[type="date"].form-control.underline::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 1;
}

/* Firefox: style the calendar icon */
input[type="date"].form-control.underline::-moz-calendar-picker-indicator {
  filter: invert(1);
  opacity: 1;
}

/* Edge/IE: style the calendar icon */
input[type="date"].form-control.underline::-ms-input-placeholder {
  color: #f8f9fa;
}

.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.help-block {
  margin-top: 7px;
  font-size: small;
  color: #ff5757;
}

.hint-block {
  margin-top: 7px;
  font-size: small;
  color: #dcdcdc;
}

.control-label {
  color: var(--bs-light);
  font-size: medium;
}

.input-mod,
.select2-mod,
.form-control.underline {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

#asal-kota-dropdown option {
  color: #212529;
}

#wa-float-btn {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 30px;
  right: 30px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 2rem;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

#wa-float-btn:hover {
  background-color: #1daa51;
  color: #fff;
  text-decoration: none;
  animation: wa-bounce 0.7s ease-in-out infinite;
}

@keyframes wa-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
  }
  20%,
  60% {
    transform: translateY(-8px);
  }
  40% {
    transform: translateY(-16px);
  }
}