/* >>> style-modern.css  (adauga-l lângă style.css)  <<< */
/* Design‑system “Healthcare Soft” – v1.0 26‑07‑2025 */
/* Respectă WCAG 2.2 contrast ≥4.5:1 pentru text normal
   şi ≥3:1 pentru componente UI active :contentReference[oaicite:6]{index=6} */

/* ---------- Variabile globale ---------- */
:root {
  /* Paletă inspirată de Bootstrap 5 primaries, dar cu contrast sporit */
  --hc-primary: #0d6efd;     /* link/buttons */
  --hc-primary-hover: #0b5cd3;
  --hc-success: #198754;
  --hc-danger: #dc3545;
  --hc-warning: #fd7e14;
  --hc-gray-100: #f8f9fa;
  --hc-gray-300: #dee2e6;
  --hc-gray-600: #6c757d;
  --hc-gray-900: #212529;

  --hc-radius: .5rem;
  --hc-box-shadow: 0 2px 6px rgba(0,0,0,.12);

  /* Typography */
  --hc-font-stack: "Inter", "Helvetica Neue", Arial, sans-serif;
  --hc-font-size: 16px;
}

/* ---------- Reset & Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
body{
  margin:0;
  font-family:var(--hc-font-stack);
  font-size:var(--hc-font-size);
  line-height:1.45;
  background:var(--hc-gray-100);
  color:var(--hc-gray-900);
}
h1,h2,h3,h4 { font-weight:600; line-height:1.2; }

/* ---------- Container ---------- */
#calculator-container{
  max-width:640px;
  margin:2rem auto;
  padding:2.5rem 2rem;
  background:#fff;
  border:1px solid var(--hc-gray-300);
  border-radius:var(--hc-radius);
  box-shadow:var(--hc-box-shadow);
}

/* ---------- Form elements ---------- */
.input-container{ margin-bottom:1.5rem; }

label{
  display:block;
  margin-bottom:.35rem;
  font-weight:500;
}

input[type="number"],
input[type="tel"],
input[type="email"],
select{
  width:100%;
  padding:.55rem .75rem;
  border:1px solid var(--hc-gray-300);
  border-radius:var(--hc-radius);
  background:#fff;
  font:inherit;
  transition:border-color .15s ease;
}
input:focus,
select:focus{
  outline:none;
  border-color:var(--hc-primary);
  box-shadow:0 0 0 0.25rem rgba(13,110,253,.15);
}

/* Sliders */
.slider{
  width:100%;
  height:.45rem;
  border-radius:var(--hc-radius);
  background:linear-gradient(90deg,var(--hc-primary) 0%,var(--hc-gray-300) 0);
  appearance:none;
  cursor:pointer;
  transition:background .3s ease;
}
.slider::-webkit-slider-thumb{
  appearance:none;
  width:1.25rem;
  height:1.25rem;
  border-radius:50%;
  background:var(--hc-primary);
  border:2px solid #fff;
  box-shadow:var(--hc-box-shadow);
  transition:background .2s;
}
.slider:focus::-webkit-slider-thumb{ background:var(--hc-primary-hover); }
.slider::-moz-range-thumb{ /* Firefox */
  width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--hc-primary);border:none;
}
.slider::-moz-range-track{ background:transparent; }

/* Update track colour via JS */
input.slider.js-active{ background:linear-gradient(90deg,var(--hc-primary) var(--percent,0%),var(--hc-gray-300) var(--percent,0%)); }

/* Progress bar */
#progress_bar_container{ height:1.5rem; background:var(--hc-gray-300); border-radius:var(--hc-radius); }
#risk_progress{ display:block; height:100%; border-radius:var(--hc-radius); transition:width .4s; }

/* Buttons */
.btn,#send_button{
  display:inline-block;
  padding:.65rem 1.25rem;
  background:var(--hc-primary);
  color:#fff;
  border:none;
  border-radius:var(--hc-radius);
  font-weight:600;
  cursor:pointer;
  text-align:center;
  transition:background .2s, transform .15s;
}
.btn:hover,#send_button:hover{ background:var(--hc-primary-hover); }
.btn:active,#send_button:active{ transform:scale(.97); }

/* Success / Error messages */
.message{ padding:1rem;border-radius:var(--hc-radius);display:none; }
.error{ background:#f8d7da;color:#842029; }
.success{ background:#d1e7dd;color:#0f5132; }

/* Logo */
#logo{ width:auto; max-width:280px; height:auto; }

/* ---------- Responsive ---------- */
@media(max-width:576px){
  #calculator-container{ padding:1.5rem 1rem; }
  label{ font-size:.95rem; }
}

/* Dark‑mode auto (prefers‑color‑scheme) */
@media (prefers-color-scheme: dark){
  :root{
    --hc-gray-100:#1f1f1f;
    --hc-gray-300:#444;
    --hc-gray-600:#aaa;
    --hc-gray-900:#e9ecef;
    --hc-box-shadow:0 2px 6px rgba(0,0,0,.9);
  }
  body{ background:var(--hc-gray-100); color:var(--hc-gray-900); }
  #calculator-container{ background:#2b2b2b; border-color:#555; }
  input,select{ background:#1f1f1f; color:var(--hc-gray-900); border-color:#555; }
}