/* CrossCare Dashboard — branded login pages
   Uses the CrossCare India theme's CSS variables where available
   (--cc-green, --cc-radius-lg, --cc-font, etc.) with sane fallbacks,
   so this looks right whether or not the theme's stylesheet has
   loaded on this particular page. */

.cc-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 48px 20px;
}

.cc-login-card {
  background: #ffffff;
  border-radius: var(--cc-radius-lg, 16px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  padding: 40px 36px;
  max-width: 420px;
  width: 100%;
}

.cc-login-brand { text-align: center; margin-bottom: 28px; }
.cc-login-icon { font-size: 40px; line-height: 1; display: block; margin-bottom: 10px; }
.cc-login-brand h1 { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--cc-text, #1a1a1a); }
.cc-login-brand p { font-size: 13.5px; color: var(--cc-muted, #666); line-height: 1.6; margin: 0; }

/* Patient pages: warm teal/green, matching the main site's brand */
.cc-login-page-patient .cc-login-card { border-top: 5px solid var(--cc-green, #0F6E56); }
.cc-login-page-patient .cc-login-submit { background: var(--cc-green, #0F6E56); }
.cc-login-page-patient .cc-login-submit:hover { background: var(--cc-green-dark, #0A4A3A); }

/* Staff pages: deliberately distinct, cooler/more "internal tool"
   toned slate-blue, so an employee can tell at a glance they're on
   the internal tool, not the patient-facing site. */
.cc-login-page-staff .cc-login-card { border-top: 5px solid #2C3E50; }
.cc-login-page-staff .cc-login-submit { background: #2C3E50; }
.cc-login-page-staff .cc-login-submit:hover { background: #1A252F; }

/* Referral partner pages: warm gold/amber, distinct from both the
   patient teal and the staff slate — signals "partner program"
   rather than either the patient-facing site or an internal tool. */
.cc-login-page-partner .cc-login-card { border-top: 5px solid #B8860B; }
.cc-login-page-partner .cc-login-submit { background: #B8860B; }
.cc-login-page-partner .cc-login-submit:hover { background: #8F6A08; }
.cc-login-page-partner .cc-login-field input:focus { outline-color: #B8860B; border-color: #B8860B; }

.cc-signup-card { max-width: 480px; }
.cc-signup-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FFF9EC;
  border: 1px solid #F0E0B8;
  border-radius: var(--cc-radius, 8px);
  padding: 14px 16px;
  margin-bottom: 22px;
}
.cc-signup-perk { font-size: 12.5px; font-weight: 600; color: #8F6A08; display: flex; align-items: center; gap: 8px; }
.cc-signup-perk span { font-size: 15px; }

.cc-login-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
  .cc-login-field-row { grid-template-columns: 1fr; }
}

.cc-login-field { margin-bottom: 16px; }
.cc-login-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--cc-muted, #555); margin-bottom: 6px; }
.cc-login-field input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--cc-border, #ddd);
  border-radius: var(--cc-radius, 8px);
  font-size: 14.5px;
  font-family: var(--cc-font, inherit);
  box-sizing: border-box;
}
.cc-login-field input:focus { outline: 2px solid var(--cc-green, #0F6E56); border-color: var(--cc-green, #0F6E56); }

.cc-login-submit {
  width: 100%;
  color: #fff;
  border: none;
  border-radius: var(--cc-radius, 8px);
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--cc-font, inherit);
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.15s;
}
.cc-login-submit:disabled { opacity: 0.7; cursor: default; }

.cc-login-feedback { font-size: 12.5px; margin-top: 12px; min-height: 1em; text-align: center; }
.cc-login-feedback-success { color: #0F6E56; font-weight: 600; }
.cc-login-feedback-error { color: #B91C3C; font-weight: 600; }

.cc-login-footer { margin-top: 22px; text-align: center; }
.cc-login-footer a { font-size: 13px; color: var(--cc-green, #0F6E56); font-weight: 600; text-decoration: none; }
.cc-login-footer a:hover { text-decoration: underline; }
.cc-login-help { font-size: 12px; color: var(--cc-muted, #888); line-height: 1.6; margin-top: 16px; }
.cc-login-switch { font-size: 12.5px; color: var(--cc-muted, #888); margin-top: 14px; }

@media (max-width: 480px) {
  .cc-login-card { padding: 30px 22px; }
}