:root{
  --cc-primary: #0b3d6d;      /* deep navy */
  --cc-primary-600:#0a355f;
  --cc-primary-700:#082a4b;
  --cc-accent:  #c9a227;      /* gold accent */
  --cc-accent-700:#b2891e;
  --cc-bg:      #f7f7f7;      /* page background */
  --cc-surface: #ffffff;      /* cards/nav/footer */
  --cc-muted:   #6b7280;      /* text-muted */
  --cc-border:  #e5e7eb;      /* light borders */
  --cc-text:    #1f2937;      /* body text */
  --cc-link:    #0b3d6d;      /* link color */
  --cc-link-hover:#082a4b;
  --cc-focus:   #f3d36b88;    /* soft gold focus ring */
  --radius:     12px;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 6px 14px rgba(0,0,0,.08);
  --container:  1100px;
}

/* Base reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--cc-bg);
  color:var(--cc-text);
  font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Containers & layout */
.container{max-width:var(--container); margin-inline:auto; padding:24px}
.section{padding:32px 0}
.card{
  background:var(--cc-surface);
  border:1px solid var(--cc-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:20px;
}

/* Typography */
h1,h2,h3,h4{margin:0 0 .4em; line-height:1.2; font-weight:650}
h1{font-size:clamp(28px,3vw,36px)}
h2{font-size:clamp(22px,2.3vw,28px)}
h3{font-size:clamp(18px,2vw,22px)}
p{margin:0 0 1em}
.lede{font-size:1.05rem; color:#374151}

/* Links */
a{color:var(--cc-link); text-decoration:none}
a:hover{color:var(--cc-link-hover); text-decoration:underline}

/* Buttons */
.btn{
  appearance:none; border:0; cursor:pointer; user-select:none;
  font-weight:600; letter-spacing:.2px;
  padding:.65rem 1rem; border-radius:999px;
  transition:transform .02s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn:focus{outline:3px solid var(--cc-focus); outline-offset:2px}
.btn:active{transform:translateY(1px)}

.btn.primary{background:var(--cc-primary); color:#fff; box-shadow:var(--shadow-sm)}
.btn.primary:hover{background:var(--cc-primary-600)}
.btn.secondary{background:#e9eef5; color:var(--cc-primary); border:1px solid #d7dee7}
.btn.secondary:hover{background:#e1e8f1}
.btn.accent{background:var(--cc-accent); color:#1b1b1b}
.btn.accent:hover{background:var(--cc-accent-700)}

/* Forms */
input[type=text], input[type=email], input[type=date],
input[type=tel], select{
  width:100%; background:#fff; color:var(--cc-text);
  border:1px solid var(--cc-border); border-radius:10px;
  padding:.65rem .8rem; outline:none; transition:border .2s, box-shadow .2s;
}
input:focus, select:focus{
  border-color:#d9b74a; box-shadow:0 0 0 4px var(--cc-focus);
}
label{font-weight:600; color:#374151; display:block; margin:.5rem 0 .3rem}

/* Alerts (matches your template classes) */
.alert{
  border-radius:12px; padding:12px 14px; margin:12px 0; border:1px solid transparent;
}
.alert.error{background:#fde8e8; color:#7a1d1d; border-color:#f5c2c2}
.alert.info{background:#eef6ff; color:#0b3d6d; border-color:#cfe5ff}
.alert.success{background:#e9f6ea; color:#275c2a; border-color:#cfe7d1}
.alert.warning{background:#fff6e5; color:#6b4e00; border-color:#ffe3a3}

/* Tables (gov style) */
table{width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-sm)}
th, td{padding:10px 12px; border-bottom:1px solid var(--cc-border); text-align:left}
th{background:#f2f5f8; color:#334155; font-weight:700}
tr:hover td{background:#fafafa}

/* Nav/Top bar (if your base.html has a header) */
.site-header{
  background:var(--cc-surface); border-bottom:1px solid var(--cc-border);
}
.site-header .brand{
  display:flex; align-items:center; gap:.6rem; padding:10px 0;
  font-weight:800; color:var(--cc-primary); text-decoration:none;
}

/* Footer */
.site-footer{
  background:var(--cc-surface); border-top:1px solid var(--cc-border);
  color:#4b5563; padding:24px 0; margin-top:40px;
}

/* Slots list (your time selection pills) */
.slots{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.slots label{
  background:#fff; border:1px solid var(--cc-border); border-radius:14px;
  padding:.75rem .9rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:var(--shadow-sm); transition:box-shadow .2s, border .2s, background .2s;
}
.slots label:hover{box-shadow:var(--shadow-md)}
.slots input[type=radio]{accent-color:var(--cc-primary)}
/* Make selected slot look “active” */
.slots input[type=radio]:checked + span,
.slots input[type=radio]:checked ~ span{
  font-weight:700; color:var(--cc-primary)
}

/* Utility classes */
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem}
.text-muted{color:var(--cc-muted)}
.center{text-align:center}

/* Spinner (used on payment redirect) */
.spinner-border{
  width:3rem; height:3rem; border:4px solid #e5e7eb; border-top-color:var(--cc-primary);
  border-radius:50%; animation:cc-spin 1s linear infinite; display:inline-block;
}
@keyframes cc-spin{to{transform:rotate(360deg)}}