body{
background:var(--bg);
font-family:var(--font-body);
}

/* ================= HERO ================= */

.hero{
    background: linear-gradient(135deg, var(--brand-darker), var(--brand) 60%, #0891b2);
    color:white;
    text-align:center;
    padding:90px 20px 70px;
    position:relative;
}

.hero-content{
    max-width:760px;
    margin:0 auto;
}

.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.25);
    padding:8px 16px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    margin-bottom:18px;
}

.hero h1{
    color:#fff;
    font-family:var(--font-head);
    font-size: clamp(32px, 4.5vw, 54px);
    font-weight:800;
    line-height:1.15;
    margin-bottom:16px;
}

.hero p{
    font-size: clamp(16px, 1.6vw, 19px);
    max-width:620px;
    margin:0 auto 28px;
    line-height:1.7;
    color:rgba(255,255,255,.9);
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}

.hero-buttons .btn{
    border-radius:999px;
    padding:13px 26px;
    font-weight:700;
    border:none;
}

.hero-buttons .btn-light{
    color:var(--brand-darker);
}

.hero-buttons .btn-success{
    background:#16a34a;
}

/* ================= APPOINTMENT CARD ================= */

.appointment-card{

background:var(--surface);

padding:44px;

border-radius: var(--radius-lg);

box-shadow: var(--shadow-lg);

border:1px solid var(--border);

margin-top:-70px;

position:relative;

z-index:2;
}

.appointment-card h2{
    font-family:var(--font-head);
    font-weight:800;
    color:var(--ink);
}

.appointment-card label{

font-weight:600;
margin-bottom:6px;
color:var(--ink-soft);
font-size:14.5px;
}

.form-control,
.form-select{

padding:12px 14px;
border-radius:10px;
border:1.5px solid var(--border);
font-size:15px;
}

.form-control:focus,
.form-select:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 .2rem rgba(14,116,144,.15);
}

#submitBtn{
    border-radius:999px;
    padding:14px;
    font-weight:700;
    font-size:16px;
    background:var(--brand);
    border:none;
}

#submitBtn:hover{
    background:var(--brand-dark);
}

#appointmentMessage{

margin-top:20px;
text-align:center;
font-size:18px;
font-weight:700;
}

.ai-summary {
    max-width: 350px;
    max-height: 100px;
    overflow-y: auto;
    white-space: normal;
    line-height: 1.4;
}

.success-box{
    background: var(--success-bg);
    border-left:6px solid var(--success);
    padding:24px;
    margin-top:20px;
    border-radius:16px;
    box-shadow: var(--shadow-sm);
    text-align:left;
}

.success-box h2{
    color: var(--success);
    margin-bottom:15px;
    font-size:22px;
}

.success-box p{
    font-size:15.5px;
    margin:10px 0;
    line-height:1.6;
}

.success-box strong{
    color:var(--ink);
}

.success-box .ai-note{
    font-size:13px;
    color:var(--muted);
    background:#f1f5f9;
    border-left:3px solid #94a3b8;
    border-radius:8px;
    padding:10px 12px;
}

@media (max-width: 600px){
    .appointment-card{
        padding:28px 20px;
        margin-top:-40px;
        border-radius:20px;
    }
}


/* ---------- Consent tick-boxes (all required) ---------- */

.consent-heading {
  font-weight: 700;
  color: #0f172a;
  margin: 6px 0 8px;
  font-size: 14px;
}

.consent-req {
  color: #dc2626;
  font-weight: 700;
}

.consent-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 8px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.consent-item:hover {
  border-color: #0e7490;
}

.consent-item:has(.consent-check:checked) {
  border-color: #16a34a;
  background: #f0fdf4;
}

.consent-emergency {
  background: #fff7ed;
  border-color: #fdba74;
}

.consent-ai {
  background: #f5f3ff;
  border-color: #c4b5fd;
}

.consent-item:has(.consent-check:checked) {
  border-color: #16a34a;
  background: #f0fdf4;
}

/* the tick-box itself: big, dark border, impossible to miss */
.consent-check {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  cursor: pointer;
  accent-color: #0e7490;
  appearance: auto;
  -webkit-appearance: checkbox;
  outline: 1.5px solid #0e7490;
  outline-offset: 1px;
  border-radius: 3px;
}

.consent-check:focus-visible {
  outline: 3px solid #f59e0b;
}

.consent-text {
  flex: 1;
  cursor: pointer;
  line-height: 1.4;
  font-size: 13.5px;
  color: #0f172a;
}

.consent-text small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #475569;
}