/* =============================================================================
   GoMedPay — Component Styles
   Split from gomedpay.css (CAB-012). Load order: tokens → components → utilities.
   ============================================================================= */

/* --- Buttons ------------------------------------------------ */
.btn-primary {
  background-color: var(--gmp-navy);
  border-color: var(--gmp-navy);
  font-weight: 500;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--gmp-navy-dark);
  border-color: var(--gmp-navy-dark);
}
.btn-outline-primary {
  color: var(--gmp-navy);
  border-color: var(--gmp-navy);
}
.btn-outline-primary:hover {
  background-color: var(--gmp-navy);
  border-color: var(--gmp-navy);
}
.btn-success {
  background-color: var(--gmp-teal);
  border-color: var(--gmp-teal);
}

/* Teal CTA — navbar primary action */
.btn-cta {
  background-color: var(--gmp-teal);
  border-color: var(--gmp-teal);
  color: #fff !important;
  font-weight: 600;
  border-radius: 6px;
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}
.btn-cta:hover,
.btn-cta:focus {
  background-color: var(--gmp-teal-dark);
  border-color: var(--gmp-teal-dark);
  box-shadow: 0 4px 14px rgba(0, 137, 123, 0.32);
}

/* --- Navbar ------------------------------------------------- */
.gmp-navbar {
  background-color: var(--gmp-white);
  border-bottom: 1px solid var(--gmp-border);
  padding-top: 0;
  padding-bottom: 0;
  min-height: 70px;
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--gmp-navy) !important;
  letter-spacing: -0.02em;
  padding: 14px 0;
}
.navbar-brand:hover {
  color: var(--gmp-navy-dark) !important;
}
.navbar-brand .brand-icon {
  color: var(--gmp-teal);
  margin-right: 7px;
}

.gmp-navbar .nav-link {
  color: var(--gmp-slate) !important;
  font-weight: 500;
  font-size: 0.93rem;
  padding: 22px 13px !important;
  border-bottom: 3px solid transparent;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.gmp-navbar .nav-link:hover,
.gmp-navbar .nav-link.show {
  color: var(--gmp-navy) !important;
  border-bottom-color: var(--gmp-teal);
}
.gmp-navbar .dropdown-toggle::after {
  margin-left: 5px;
  vertical-align: 0.18em;
}

/* Dropdown panels */
.gmp-dropdown {
  border: 1px solid var(--gmp-border);
  border-radius: 10px;
  box-shadow: 0 10px 36px rgba(27, 79, 138, 0.13);
  padding: 8px 0;
  min-width: 240px;
  margin-top: 1px !important;
}
.gmp-dropdown .dropdown-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gmp-slate-mid);
  padding: 8px 16px 3px;
  font-weight: 700;
}
.gmp-dropdown .dropdown-divider {
  border-color: var(--gmp-border);
  margin: 5px 0;
}
.gmp-dropdown .dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 16px;
  color: var(--gmp-slate);
  font-size: 0.89rem;
  transition: background-color 0.12s;
}
.gmp-dropdown .dropdown-item:hover {
  background-color: var(--gmp-ice);
  color: var(--gmp-navy);
}
.gmp-dropdown .dd-icon {
  color: var(--gmp-teal);
  font-size: 1.05rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  padding-top: 1px;
}
.gmp-dropdown .dd-label strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gmp-navy);
  line-height: 1.3;
}
.gmp-dropdown .dd-label small {
  display: block;
  font-size: 0.77rem;
  color: #556a76; /* #607d8b was 4.27:1 on white — fails WCAG AA. #556a76 = 5.68:1 */
  line-height: 1.35;
  margin-top: 1px;
}

/* CTA in navbar */
.navbar-cta {
  margin-left: 10px !important;
  padding: 9px 16px !important;
  font-size: 0.875rem !important;
  border-bottom: none !important;
  border-radius: 6px;
}
.navbar-cta:hover {
  border-bottom: none !important;
}

@media (max-width: 991.98px) {
  .gmp-navbar .nav-link {
    padding: 11px 4px !important;
    border-bottom: none;
  }
  .gmp-dropdown {
    box-shadow: none;
    border: none;
  }
  .navbar-cta {
    margin-left: 0 !important;
    margin: 10px 0 !important;
    display: inline-block;
  }
}

/* --- Footer ------------------------------------------------- */
footer {
  background-color: #0d2137;
  color: #b0c4d8;
}
footer h5,
footer h6 {
  color: #ffffff;
  margin-bottom: 0.75rem;
}
footer a {
  color: #b0c4d8;
  text-decoration: none;
}
footer a:hover {
  color: var(--gmp-teal-light);
}
footer hr {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Card headers with coloured backgrounds must override the global h5/h6 navy rule */
.card-header.bg-danger h5,
.card-header.bg-success h5,
.card-header.bg-primary h5,
.card-header.bg-danger h4,
.card-header.bg-success h4,
.card-header.bg-primary h4 {
  color: #fff !important;
}