/* ─── Request Care Flow Styles — DomiCare green design system ─── */

/* Progress indicator */
.care-progress { margin-bottom: 24px; }
.care-progress-list {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
}
.care-progress-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--p-body, #52665a);
  background: var(--p-surface, #fff);
  border: 1px solid var(--p-border, #e5e9e7);
}
.care-progress-current {
  background: var(--p-primary, #0a6c47);
  color: #fff;
  border-color: var(--p-primary, #0a6c47);
  font-weight: 600;
}
.care-progress-done {
  background: var(--p-accent, #0d9464);
  color: #fff;
  border-color: var(--p-accent, #0d9464);
}
.care-progress-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
}
.care-progress-done .care-progress-dot { background: rgba(255, 255, 255, 0.3); }

/* Completed steps are clickable for editing */
.care-progress-editable {
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.care-progress-editable:hover {
  filter: brightness(0.92);
  transform: scale(0.97);
}

.care-progress-editable:active {
  transform: scale(0.95);
}

/* Patient selection */
.care-patient-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid var(--p-border, #e5e9e7);
  border-radius: 16px;
  background: var(--p-surface, #fff);
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.care-patient-option:hover { border-color: var(--p-primary, #0a6c47); }
.care-patient-option.care-patient-selected {
  border-color: var(--p-primary, #0a6c47);
  background: var(--p-mint-50, #f0f8f4);
}
.care-patient-option strong { display: block; color: var(--p-ink-2, #1b3527); }
.care-patient-option span { color: var(--p-body, #52665a); font-size: 14px; }
.care-no-dependants { color: var(--p-body, #52665a); font-size: 14px; margin-top: 8px; }

/* Step actions */
.care-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--p-border-soft, #eef2f0);
}
.care-step-actions .patient-primary-action { margin-left: auto; }
.care-step-nav { margin-top: 16px; }

/* Triage — the one-page Safety Check */
/* Keeps a readable form column on desktop instead of stretching across the full
   Patient content frame. One page, five YES/NO questions, one Continue. */
.care-triage-form { max-width: 760px; }
.care-triage-intro {
  margin: 0;
  font-size: 14px;
  color: var(--p-body, #52665a);
}

.care-triage-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
/* Comfortable vertical separation between the five questions on one page. */
.care-triage-fieldset + .care-triage-fieldset {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--p-border-soft, #eef2f0);
}
.care-triage-number {
  display: inline-block;
  min-width: 18px;
  color: var(--p-primary, #0a6c47);
}
.care-triage-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin-bottom: 16px;
}
.care-triage-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--p-ink, #14261c);
  font-family: var(--p-font-head, 'Plus Jakarta Sans', sans-serif);
}
/* Focus target when validation sends the Patient to an unanswered question. */
.care-triage-title:focus-visible {
  outline: 2px solid var(--p-primary, #0a6c47);
  outline-offset: 4px;
  border-radius: 6px;
}
/* Optional short helper line under a question — approved clinical wording,
   never a checklist of the retired questions. */
.care-triage-help {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--p-body, #52665a);
}

.care-triage-question-error {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #b91c1c;
}
.care-triage-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Answers stack so the sometimes-long clinical question wording stays readable
   and every control keeps a full-width, accessible touch target. */
.care-triage-options-stacked {
  flex-direction: column;
  align-items: stretch;
}
/* `display` and the radio reset are declared here on purpose: the generic
   `.patient-form label` / `.patient-form :is(input, select, textarea)` rules in
   patient-pages.css would otherwise make the option a grid and stretch the
   radio into a full-width bordered box, stacking each answer vertically. */
.care-triage-options-stacked .care-triage-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 14px;
  line-height: 1.35;
  font-size: 15px;
  font-weight: 500;
}
.care-triage-options-stacked .care-triage-option > span {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--p-ink, #14261c);
}
.care-triage-options-stacked .care-triage-option input[type="radio"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  accent-color: var(--p-primary, #0a6c47);
}
.care-triage-options[aria-invalid="true"] {
  border-radius: 14px;
  outline: 2px solid #b91c1c;
  outline-offset: 4px;
}
.care-triage-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 80px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1.5px solid var(--p-border, #e5e9e7);
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  background: var(--p-surface, #fff);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.care-triage-option:hover { border-color: var(--p-primary, #0a6c47); }
.care-triage-option input:checked + span {
  color: var(--p-primary, #0a6c47);
  font-weight: 600;
}
.care-triage-option:has(input:checked) {
  border-color: var(--p-primary, #0a6c47);
  background: var(--p-mint-50, #f0f8f4);
}
.care-triage-option:has(input:focus-visible) {
  outline: 2px solid var(--p-primary, #0a6c47);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .care-triage-option { transition: none; }
}

/* Triage result */
.care-triage-result { text-align: center; padding: 32px 20px; }
.care-triage-status { margin-bottom: 16px; }
.care-triage-badge {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}
.care-triage-badge-routine { background: var(--p-tint, #e8f5ed); color: var(--p-primary, #0a6c47); }
.care-triage-badge-priority { background: #fef3c7; color: #92400e; }
.care-triage-badge-emergency,
.care-triage-badge-emergency_blocked { background: #fee2e2; color: #b91c1c; }
.care-triage-badge-clinical_review_required { background: #fef3c7; color: #92400e; }
.care-triage-badge-pending_review { background: var(--p-neutral-bg, #f1f5f9); color: var(--p-muted, #64748b); }
.care-triage-badge-disposition_configuration_pending { background: var(--p-neutral-bg, #f1f5f9); color: var(--p-muted, #64748b); }

/* Emergency panel */
.care-emergency-panel {
  text-align: center;
  padding: 32px 20px;
  background: var(--p-red-bg, #fef2f2);
  border: 1.5px solid #fecaca;
  border-radius: 20px;
}
.care-emergency-icon { font-size: 48px; margin-bottom: 16px; }
.care-emergency-heading {
  font-size: 22px;
  font-weight: 700;
  color: #b91c1c;
  margin: 0 0 12px;
  font-family: var(--p-font-head, 'Plus Jakarta Sans', sans-serif);
}
.care-emergency-text {
  font-size: 16px;
  color: var(--p-ink, #14261c);
  margin: 0 0 20px;
}
.care-emergency-guidance {
  background: #fff;
  border: 1px solid var(--p-border, #e5e9e7);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 24px;
  text-align: left;
}
.care-emergency-guidance h2 { font-size: 18px; margin: 0 0 8px; color: var(--p-ink, #14261c); }
.care-emergency-placeholder {
  color: var(--p-muted, #64748b);
  font-size: 14px;
  font-style: italic;
}
.care-emergency-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  margin: 0 auto;
}

/* Location */
.care-location-modes { display: flex; flex-direction: column; gap: 24px; }
.care-location-mode h2 { font-size: 18px; margin: 0 0 12px; color: var(--p-ink, #14261c); font-family: var(--p-font-head, 'Plus Jakarta Sans', sans-serif); }
.care-location-addresses { display: flex; flex-direction: column; gap: 8px; }
/* Saved-address card — a display-only information block. The explicit
   "Use this address" button INSIDE it performs the selection, so the card
   itself carries no pointer affordance. The button sits in normal document
   flow and the card grows downward: nothing is overlaid or absolutely
   positioned, so a card can never cover the next card or the manual form. */
.care-location-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--p-border, #e5e9e7);
  border-radius: 14px;
  background: var(--p-surface, #fff);
  text-align: left;
  font-size: 15px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.care-location-card.care-location-selected { border-color: var(--p-primary, #0a6c47); background: var(--p-mint-50, #f0f8f4); }
.care-location-card strong { display: block; margin-bottom: 4px; color: var(--p-ink-2, #1b3527); }
.care-location-card address { font-style: normal; color: var(--p-body, #52665a); font-size: 14px; margin: 0; }
.care-location-card p { margin: 4px 0 0; font-size: 13px; color: var(--p-body, #52665a); }
.care-location-card[aria-busy="true"] { opacity: 0.75; }

/* Explicit selection action — a real semantic button with a comfortable touch
   target. Full-width on phones; a compact bottom-right action from tablet up.
   Never absolutely positioned. */
.care-location-use {
  align-self: stretch;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--p-primary, #0a6c47);
  border-radius: 11px;
  background: var(--p-surface, #fff);
  color: var(--p-primary, #0a6c47);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.care-location-use:hover { background: var(--p-mint-50, #f0f8f4); }
.care-location-use:focus-visible { outline: 2px solid var(--p-primary, #0a6c47); outline-offset: 2px; }
.care-location-use[disabled] { cursor: default; opacity: 0.7; }
.care-location-selected .care-location-use { background: var(--p-primary, #0a6c47); color: #fff; }

@media (min-width: 768px) {
  .care-location-use { align-self: flex-end; min-width: 176px; }
}

/* Time */
.care-time-fieldset { border: none; padding: 0; margin: 0 0 16px; }
.care-time-fieldset legend { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--p-ink, #14261c); }
.care-time-options { display: flex; flex-direction: column; gap: 8px; }
.care-time-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid var(--p-border, #e5e9e7);
  border-radius: 14px;
  cursor: pointer;
  background: var(--p-surface, #fff);
  transition: border-color 0.15s ease;
}
.care-time-option:hover { border-color: var(--p-primary, #0a6c47); }
.care-time-option:has(input:checked) { border-color: var(--p-primary, #0a6c47); background: var(--p-mint-50, #f0f8f4); }
.care-time-option span { font-weight: 500; color: var(--p-ink, #14261c); }
.care-time-option small { display: block; color: var(--p-body, #52665a); font-size: 13px; }
.care-scheduled-fields { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }

/* Review */
.care-review-card { display: flex; flex-direction: column; gap: 0; }
.care-review-row {
  padding: 16px 4px;
  border-bottom: 1px solid var(--p-border-soft, #eef2f0);
}
.care-review-row:last-child { border-bottom: none; }
.care-review-row h2 { font-size: 12px; font-weight: 700; color: var(--p-body, #52665a); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.care-review-row p { margin: 2px 0; font-size: 15px; color: var(--p-ink-2, #1b3527); }
.care-review-row address { font-style: normal; font-size: 15px; color: var(--p-ink-2, #1b3527); }
.care-review-row a { font-size: 14px; color: var(--p-primary, #0a6c47); text-decoration: none; margin-top: 6px; display: inline-block; font-weight: 600; }
.care-review-row a:hover { text-decoration: underline; }
.care-review-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--p-border-soft, #eef2f0);
}

/* Submitted */
.care-submitted-panel { text-align: center; padding: 40px 20px; }
.care-submitted-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--p-primary, #0a6c47);
  color: #fff;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 6px 16px rgba(10, 108, 71, 0.24);
}
.care-submitted-panel h1 { font-size: 24px; margin: 0 0 8px; color: var(--p-ink, #14261c); font-family: var(--p-font-head, 'Plus Jakarta Sans', sans-serif); }
.care-submitted-panel p { font-size: 16px; color: var(--p-body, #52665a); margin: 0 0 24px; }
.care-submitted-actions {
  /* Two equal action buttons in the same row: equal grid tracks, not
     text-width-sized flex items — both buttons must render identically. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
/* A single action (payment action unavailable) spans the full row instead of
   being squeezed into the first of two equal tracks. */
.care-submitted-actions > :only-child { grid-column: 1 / -1; }

.care-submitted-actions .patient-primary-action,
.care-submitted-actions .patient-secondary-action {
  width: 100%;
  margin-top: 0;
  min-height: 48px;
  padding: 0 28px;
  font-size: 0.95rem;
  border-radius: 14px;
  font-family: var(--p-font-head, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  align-items: center;
  justify-content: center;
}

/* Below ~520px the two actions stack — both still use the same full width. */
@media (max-width: 520px) {
  .care-submitted-actions { grid-template-columns: 1fr; }
}

/* Active request dialog */
.care-active-dialog { padding: 24px 0; }
.care-active-dialog-body { text-align: center; }
.care-active-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* Confirm dialog */
.care-confirm-dialog {
  border: 1px solid var(--p-border, #e5e9e7);
  border-radius: 18px;
  padding: 0;
  max-width: 400px;
  width: 90%;
  background: var(--p-surface, #fff);
  box-shadow: 0 20px 60px rgba(12, 31, 22, 0.2);
  font: inherit;
  color: var(--p-ink, #14261c);
}
.care-confirm-dialog::backdrop { background: rgba(12, 31, 22, 0.45); }
.care-confirm-panel { padding: 24px; }
.care-confirm-panel h2 { font-size: 20px; margin: 0 0 8px; color: var(--p-ink, #14261c); font-family: var(--p-font-head, 'Plus Jakarta Sans', sans-serif); }
.care-confirm-panel p { font-size: 15px; color: var(--p-body, #52665a); margin: 0 0 20px; }
.care-confirm-actions { display: flex; flex-direction: column; gap: 8px; }

/* Service selection in flow */
.care-service-btn { cursor: pointer; text-align: left; }

/* In-flow back link */
.care-step-actions .patient-back { margin-right: auto; }

/* Mobile responsive */
@media (max-width: 480px) {
  .care-progress-list { gap: 3px; }
  .care-progress-item { padding: 5px 9px; font-size: 12px; }
  .care-step-actions { flex-direction: column-reverse; gap: 8px; }
  .care-step-actions .patient-primary-action { margin-left: 0; width: 100%; text-align: center; }
  .care-review-actions { flex-direction: column-reverse; }
  .care-emergency-actions { flex-direction: column; }
}

/* Desktop wider */
@media (min-width: 768px) {
  .care-progress-list { justify-content: center; }
  .care-emergency-panel { max-width: 620px; margin: 0 auto; }
  .care-submitted-panel { max-width: 520px; margin: 0 auto; }
}