/* custom.css - Medical Company UI/UX Improvements */

:root {
  --primary-blue: #1976d2;
  --primary-green: #43a047;
  --accent: #00bcd4;
  --background: #f4f8fb;
  --navbar-dark: #17406d;
  --footer-dark: #13304a;
  --text-main: #222;
  --text-light: #fff;
  --border-radius: 18px;
}

body {
  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
  background-color: var(--background);
  color: var(--text-main);
}

.navbar {
  background: var(--navbar-dark) !important;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.navbar-brand img {
  filter: drop-shadow(0 2px 4px rgba(25, 118, 210, 0.10));
}

.nav-link, .navbar-brand, .navbar-dark .navbar-nav .nav-link {
  color: var(--text-light) !important;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}

.nav-link:hover, .navbar-brand:hover {
  color: var(--accent) !important;
}

.btn-primary {
  background: var(--primary-blue);
  border: none;
  color: var(--text-light);
  border-radius: 25px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
  background: var(--accent);
  color: var(--text-light);
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.10);
  opacity: 0.96;
}

.btn-success {
  background: var(--primary-green);
  border: none;
  color: var(--text-light);
  border-radius: 25px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.btn-success:hover {
  background: #388e3c;
  color: var(--text-light);
  box-shadow: 0 4px 16px rgba(67, 160, 71, 0.10);
  opacity: 0.96;
}

.btn-danger {
  background: #e53935;
  border: none;
  color: var(--text-light);
  border-radius: 25px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.btn-danger:hover {
  background: #b71c1c;
  color: var(--text-light);
  box-shadow: 0 4px 16px rgba(229, 57, 53, 0.10);
  opacity: 0.96;
}

.card, .border, .shadow-sm {
  border-radius: var(--border-radius) !important;
  border: 1px solid #e3eaf1 !important;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.04);
}

input, textarea, select {
  border-radius: 8px !important;
  border: 1px solid #b0bec5 !important;
  background: #f9fcff;
  transition: border 0.2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary-blue) !important;
  outline: none;
}

footer {
  background: var(--footer-dark);
  color: var(--text-light);
  padding: 32px 0 16px 0;
  border-radius: 24px 24px 0 0;
  margin-top: 48px;
  box-shadow: 0 -2px 8px rgba(19, 48, 74, 0.08);
}

footer a { color: var(--accent); }
footer a:hover { color: var(--primary-green); text-decoration: underline; }

hr {
  border-top: 2px solid #e3eaf1;
}

.accordion-button {
  background: #e3f2fd;
  color: var(--primary-blue);
  font-weight: 500;
}

.accordion-button:not(.collapsed) {
  background: var(--primary-blue);
  color: var(--text-light);
}

.accordion-body {
  background: #f9fcff;
}

@media (max-width: 767.98px) {
  .navbar-brand img {
    width: 120px !important;
    height: auto !important;
  }
  .container, .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }
  .card, .border, .shadow-sm {
    border-radius: 12px !important;
  }
  footer {
    border-radius: 18px 18px 0 0;
    padding: 20px 0 10px 0;
  }
}