:root{
  /* --hm-primary:#313a60;
  --hm-primary-dark: #192246; */
  --hm-primary: #00a090;
  --hm-primary-dark: #006b60;
  --hm-secondary: #fdf8e9;
  --hm-secondary-dark: #fff4d2;
  --hm-alert: #ff3939;
  --hm-alert-dark: #d62121;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

body{
  background-color: var(--hm-secondary) !important;
  margin: 0;
}

.demo-mode {
  background-color: var(--hm-primary-dark); 
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; gap: 12px;
  font-size: 13px; font-weight: 500; color: white;
}
.demo-left { display: flex; align-items: center; gap: 10px; }
.demo-badge {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px; padding: 2px 10px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap; letter-spacing: 0.05em;
}
.demo-text { font-size: 13px; font-weight: 500; }
.demo-right {
  display: flex; align-items: center;
  gap: 6px; font-size: 12px; opacity: 0.9;
}
.demo-right i { font-size: 12px; }
.demo-divider { opacity: 0.4; margin: 0 4px; }

@media (max-width:920px) {
  .demo-mode { flex-direction: column; }
}

@media (max-width:430px) {
  .demo-right { flex-direction: column; }
}

.btn-custom {
  background-color: var(--hm-primary);
  color: white;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  transition: 0.3s;
  font-family: var(--font-heading);
  font-size: 17px;
  border: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-custom:hover {
  background-color: var(--hm-primary-dark); 
  transform: translateY(-3px);
  color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.form-label{
  color: var(--hm-primary-dark);
  font-weight: 600;
}
.form-control:focus, .form-select:focus {
  border-color: var(--hm-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 87, 78, 0.249) !important;
}

.action-buttons{
  display: flex;
  justify-content: space-between;
}
.action-buttons button, .btn-custom{
  font-size: 15px;
}
.btn-del{
  background-color: var(--hm-alert) !important;
}
.btn-del:hover{
  background-color: var(--hm-alert-dark) !important;
}

.important-field{
  color: red;
  font-size: 15px;
}

@media (max-width:426px) {
  .btn-custom{
    padding: 8px 12px;
    font-size: 14px !important;
  }
  .action-buttons{
    gap: 30px;
  }
}

@media (max-width:321px) {
  .action-buttons{
    gap: 15px;
  }
}