/* ---- Sick Notes page (scoped) ---- */

:root{
  --hero-overlay: linear-gradient(0deg, rgba(8,29,23,.45), rgba(8,29,23,.45));
}

.hero.hero--image.sn-hero{
  --overlay: var(--hero-overlay);
}

.price-pill{
  display:inline-block;
  margin:.35rem 0 .25rem;
  padding:.45rem .85rem;
  font-weight:700;
  letter-spacing:.2px;
  background: color-mix(in oklab, var(--brand-600) 12%, #fff);
  border:1px solid color-mix(in oklab, var(--brand-600) 45%, #fff);
  color:#0b3d2c;
  border-radius:999px;
  box-shadow:var(--shadow-2);
}

.price-inline{
  margin-top:.25rem;
  font-size:.95rem;
  color:var(--text);
}

/* What is a fit note */
.sn-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items:center;
}
.sn-figure img{
  width:100%;
  height:auto;
  border-radius:1rem;
  box-shadow:var(--shadow-2);
}
.sn-definition{
  padding:1rem 1.25rem;
  border:1px solid var(--border);
  border-radius:1rem;
  background:var(--surface);
}

/* Form card */
.sn-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:1rem;
  padding:clamp(1rem, 2vw, 1.25rem);
  box-shadow:var(--shadow-1);
}
.sn-fieldset{
  border:none;
  padding:0;
  margin:0 0 1rem 0;
}
.sn-fieldset > legend{
  font-weight:800;
  margin-bottom:.5rem;
}
.field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-bottom:.75rem;
}
.field label{ font-weight:600; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field textarea,
.field select{
  border:1px solid var(--border);
  border-radius:.75rem;
  padding:.65rem .8rem;
  font:inherit;
  background:#fff;
}
.field textarea{ min-height:140px; resize:vertical; }

.grid-2{ display:grid; grid-template-columns:1fr; gap:.75rem; }
.grid-3{ display:grid; grid-template-columns:1fr; gap:.75rem; }

@media (min-width: 720px){
  .sn-grid{ grid-template-columns: 1fr 1fr; }
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-3{ grid-template-columns: repeat(3, 1fr); }
}

/* File input */
.file{
  position:relative;
  border:1px dashed var(--border);
  border-radius:.75rem;
  padding:1rem;
  text-align:center;
  background:var(--surface);
}
.file input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.file-trigger{
  display:inline-block;
  font-weight:600;
}
.file-name{
  display:block;
  margin-top:.5rem;
  color:var(--muted);
}

/* Agree + actions */
.agree{
  display:flex;
  align-items:start;
  gap:.6rem;
  line-height:1.4;
}
.actions{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:.5rem;
}

.form-success, .form-error{
  margin-top: .85rem;
  padding: .75rem .9rem;
  border-radius: .6rem;
  border: 1px solid;
}
.form-success{
  background: #ecfdf5;
  border-color: #a7f3d0;
  color:#065f46;
}
.form-error{
  background: #fef2f2;
  border-color: #fecaca;
  color:#7f1d1d;
}

/* Tiny helpers */
.muted{ color:var(--muted); }
.tiny{ font-size:.9rem; }
.visually-hidden{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  padding:0; border:0; height:1px; width:1px; overflow:hidden;
}