@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --primary-color: #2c3e50;
  --secondary-color: #3498db;
  --background-color: #ecf0f1;
  --surface-color: #ffffff;
  --text-color: #34495e;
  --border-color: #dfe4ea;
  --input-bg-color: #ffffff;
  --label-color: #7f8c8d;
}

html.dark-mode {
  --primary-color: #3498db;
  --secondary-color: #2980b9;
  --background-color: #121212;
  --surface-color: #1e1e1e;
  --text-color: #ecf0f1;
  --border-color: #424242;
  --input-bg-color: #282828;
  --label-color: #95a5a6;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.booking-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.form-wrapper {
  position: relative;
  width: 100%;
  max-width: 650px;
  background-color: var(--surface-color);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.form-header {
  margin-top: 20px;
}
.form-header .form-logo {
  max-width: 180px;
  height: auto;
}
.form-header .form-title {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 5px;
  transition: color 0.3s ease;
}
.form-header .form-subtitle {
  font-size: 0.95rem;
  color: var(--label-color);
  transition: color 0.3s ease;
}

.form-control,
.form-select {
  background-color: var(--input-bg-color);
  color: var(--text-color);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  padding: 12px 15px;
  transition: all 0.3s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  outline: none;
}
.form-control:read-only {
  background-color: rgba(149, 165, 166, 0.2);
  cursor: not-allowed;
}

.form-floating > label {
  color: var(--label-color);
}

select option:disabled {
  color: #e74c3c;
  background-color: rgba(231, 76, 60, 0.1);
  font-style: italic;
}
html.dark-mode select option {
  background-color: var(--input-bg-color);
  color: var(--text-color);
}
html.dark-mode select option:disabled {
  color: #e74c3c;
  background-color: rgba(231, 76, 60, 0.1);
}

.btn-primary-custom,
.btn-secondary-custom {
  padding: 14px 25px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
}
.btn-primary-custom {
  background-color: var(--primary-color);
  color: var(--surface-color);
}
.btn-primary-custom:hover {
  background-color: var(--secondary-color);
  color: var(--surface-color);
  transform: translateY(-2px);
}
.btn-primary-custom:disabled {
  background-color: var(--border-color);
  cursor: not-allowed;
  transform: none;
  color: var(--label-color);
}
.btn-secondary-custom {
  background-color: var(--surface-color);
  color: var(--primary-color);
  border: 1px solid var(--border-color);
}
.btn-secondary-custom:hover {
  background-color: var(--background-color);
  color: var(--secondary-color);
}

.animate-fade {
  animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.theme-switcher {
  position: absolute;
  top: 20px;
  right: 20px;
}
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}
.theme-switch {
  display: inline-block;
  height: 24px;
  position: relative;
  width: 50px;
}
.theme-switch input {
  display: none;
}
.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
  border-radius: 24px;
}
.slider:before {
  background-color: #fff;
  bottom: 3px;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  border-radius: 50%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f1c40f"><path d="M12 9c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3zm0-2c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5 2.24-5 5-5zm-5 5H2v2h5v-2zm10 0h5v2h-5v-2zM11 2v5h2V2h-2zm0 15v5h2v-5h-2zM4.22 5.64l1.42-1.42 3.54 3.54-1.42 1.42-3.54-3.54zm12.72 9.18l-1.42 1.42-3.54-3.54 1.42-1.42 3.54 3.54zM5.64 19.78l-1.42-1.42 3.54-3.54 1.42 1.42-3.54 3.54zm12.72-9.18l1.42 1.42-3.54 3.54-1.42-1.42 3.54-3.54z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}
input:checked + .slider {
  background-color: var(--secondary-color);
}
input:checked + .slider:before {
  transform: translateX(25px);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f1c40f"><path d="M12.35 2.05C12.01 2.02 11.66 2 11.31 2 6.18 2 2.02 6.18 2.02 11.31c0 .35.02.69.05 1.04.22 2.19 1.42 4.1 3.25 5.39.26.18.49.26.79.26.21 0 .42-.05.61-.15.48-.25.73-.76.63-1.29-.1-.53-.59-.88-1.13-.88-.23 0-.44.07-.63.2-.84-.58-1.42-1.39-1.74-2.32.22-.07.44-.15.66-.23.63-.23 1.05-.78 1.05-1.44 0-.58-.35-1.1-.86-1.34.22-.64.34-1.32.34-2.03 0-1.84-1.1-3.43-2.69-4.15.4-.68.9-1.28 1.48-1.78.63-.53 1.02-1.31 1.02-2.17 0-.2-.02-.4-.05-.59zM17.5 7c.28 0 .5.22.5.5s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5zM19 11.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 4.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5z"/></svg>');
}

.real-time-clock {
  margin: 25px 0;
  padding: 10px 15px;
  background-color: var(--background-color);
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--label-color);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}
html.dark-mode .real-time-clock {
  background-color: #2c3e50;
  border-color: #4a627a;
}

@media (max-width: 768px) {
  .form-wrapper {
    padding: 25px;
  }
  .form-header .form-logo {
    max-width: 150px;
  }
  .theme-switcher {
    top: 15px;
    right: 15px;
  }
}

html.dark-mode .form-header .form-title,
html.dark-mode .btn-secondary-custom {
  color: var(--text-color);
}