/* Aspect: antet cu fotografia spitalului, cartonașe cu pictograme, bară de acțiuni fixă pe telefon. */
:root {
  --banner-1: #052F5F;
  --banner-2: #0A4A8C;
  --lock: #7FD9B0;
}

/* Antet */
.banner { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--banner-1), var(--banner-2)); color: #fff; isolation: isolate; }
.banner .hero-photo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 35%; background-repeat: no-repeat; }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(5, 47, 95, 0.94) 0%, rgba(5, 47, 95, 0.82) 48%, rgba(5, 47, 95, 0.5) 100%); }
.banner .brandbar { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.banner .herowrap { max-width: 1120px; margin-inline: auto; padding: 30px clamp(16px, 4vw, 40px) 36px; }
.banner .hero { padding: 0; max-width: 700px; }
.banner .eyebrow { color: #9FC4FF; }
.banner .hero h1 { color: #fff; font-size: clamp(1.9rem, 6vw, 3rem); }
.banner .lede { color: #DCE7F6; font-size: 16.5px; }
.trust { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 13.5px; color: #DCE7F6; max-width: 62ch; }
.trust::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: var(--lock);
  -webkit-mask: var(--ico-lock) center / contain no-repeat; mask: var(--ico-lock) center / contain no-repeat;
}
:root {
  --ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3Cpath d='M12 15v2'/%3E%3C/svg%3E");
  --ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --ico-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M9 15l2 2 4-4'/%3E%3C/svg%3E");
  --ico-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l4 4v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M15 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
  --ico-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M9 11h6M9 14h4'/%3E%3C/svg%3E");
  --ico-pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E");
}

/* Cartonașe pentru tipul solicitării */
.opts:has(input[name="tip"]) { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.opt:has(input[name="tip"]) {
  position: relative; grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 12px; min-height: 68px; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.opt:has(input[name="tip"]):hover { border-color: var(--accent); }
.opt:has(input[name="tip"]:checked) { box-shadow: 0 0 0 1px var(--accent); }
.opt:has(input[name="tip"])::before { content: ""; grid-area: 1 / 1 / 3 / 2; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); }
.opt:has(input[name="tip"])::after {
  content: ""; grid-area: 1 / 1 / 3 / 2; place-self: center; width: 24px; height: 24px; background: var(--accent);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.opt:has(input[name="tip"]:checked)::before { background: var(--accent); }
.opt:has(input[name="tip"]:checked)::after { background: var(--accent-fg); }
.opt:has(input[value="Consult"]) { --ico: var(--ico-user); }
.opt:has(input[value="Control"]) { --ico: var(--ico-cal); }
.opt:has(input[value="Second opinion"]) { --ico: var(--ico-doc); }
.opt:has(input[value="Documente"]) { --ico: var(--ico-chat); }
.opt:has(input[value="Investigații"]) { --ico: var(--ico-pulse); }
.opt:has(input[name="tip"]) .t { grid-column: 2; grid-row: 1; align-self: end; font-size: 16px; }
.opt:has(input[name="tip"]) .d { grid-column: 2; grid-row: 2; align-self: start; }
.opt:has(input[name="tip"]) input { grid-column: 3; grid-row: 1 / 3; align-self: center; margin: 0; width: 20px; height: 20px; }
.opts .opt:last-child:nth-child(odd) { grid-column: auto; }
@media (min-width: 821px) {
  .opts:has(input[name="tip"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts:has(input[name="tip"]) .opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Cardul formularului și câmpuri */
.card { border-radius: 18px; }
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea { border-radius: 10px; min-height: 48px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.btn { border-radius: 10px; min-height: 48px; }
.btn.primary { box-shadow: 0 2px 8px rgba(5, 47, 95, 0.22); }
.drop { border-radius: 14px; background: var(--bg); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.drop .big { font-size: 17px; }

/* Widget anti-robot: centrat, vizibil doar la ultimul pas */
.ts { display: flex; justify-content: center; margin: 18px 0 0; }
.ts.away { height: 0; overflow: hidden; margin: 0; opacity: 0; pointer-events: none; }

/* Subsol */
.foot { text-align: center; margin-inline: auto; margin-top: 28px; }

@media (max-width: 820px) {
  .banner .herowrap { padding-block: 22px 26px; }
  .banner .lede { font-size: 15.5px; }
  .page { padding-top: 18px; }
  .card { padding: 20px 18px 0; }
  /* bara cu butoane rămâne la îndemână în josul ecranului */
  .actions {
    position: sticky; bottom: 0; z-index: 5; flex-wrap: nowrap; gap: 10px;
    margin: 24px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 18px 18px;
    box-shadow: 0 -6px 16px rgba(5, 47, 95, 0.07);
  }
  .actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
  .actions #back { flex: 0 0 34%; }
  .done .actions { position: static; box-shadow: none; margin-bottom: 0; }
  .done { padding-bottom: 20px; }
}