:root{
  --ink:#1f1f1f;
  --ink-weak:#4f4f4f;
  --brand:#7c5cff;        /* accentfärg */
  --brand-weak:#ede8ff;
  --ok:#0f8b4c;
  --warn:#b23b00;
  --err:#b00020;
  --radius:14px;
  --space:clamp(12px, 2.2vw, 20px);
  --space-lg:clamp(20px, 3.2vw, 32px);
  --shadow:0 8px 24px rgba(0,0,0,.07);
  --focus: 0 0 0 3px var(--brand-weak), 0 0 0 6px var(--navy);
}

.section{
  border:1px solid #eee;
  border-radius:12px;
  padding:var(--space);
  margin-bottom:var(--space-lg);
  background:#fff
}
.section h2{font-size:1.05rem; margin:0 0 4px}
.section p.hint{color:var(--ink-weak); margin-top:4px; margin-bottom:0; font-size:.95rem}

.grid{display:grid; gap:var(--space);}
@media (min-width:720px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
}
.people-grid{gap:18px}

label{display:block; font-weight:600; margin-bottom:6px}
.req::after{content:" *"; color:var(--err); font-weight:700}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select{
  width:90%;
  border-radius:10px;
  border:1px solid #ddd;
  padding:14px 12px;
  font:inherit;
  background:#fff;
  color:var(--ink);
  outline:none;
  transition:border-color .15s, box-shadow .15s, background .2s;
}
textarea{min-height:120px; resize:vertical;}
input:focus, textarea:focus, select:focus{box-shadow:var(--focus); border-color:transparent}

.choice-row{display:flex; gap:14px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border:1px solid #ddd; border-radius:999px; cursor:pointer; user-select:none;
  background:#fff; transition:all .15s;
}
.chip input{accent-color:var(--navy)}
.chip:hover{border-color:#ccc; background:#faf9ff}

.muted{color:var(--ink-weak); font-size:.95rem}
.danger{color:var(--err)}
.success{color:var(--ok)}
.inline-help{font-size:.9rem; color:var(--ink-weak); margin-top:6px}
.block-gap{margin-top:var(--space)}

.person-card{
  border:1px dashed #ddd; padding:12px; border-radius:10px; background:#fcfcff
}

.footer{
  display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:var(--space-lg)
}

button.rsvp-btn {
  appearance:none; 
  border:none; 
  border-radius:999px; 
  padding:14px 22px; 
  font-weight:700; 
  cursor:pointer;
  background:var(--navy); 
  color:white; 
  transition:transform .05s ease, box-shadow .2s ease, opacity .2s
}
button:hover{transform:translateY(-1px);}
button:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}

.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

.hidden{display:none !important}
.nojs{margin-top:16px}

.error-msg {
  color: #b00020;
  font-size: 0.9rem;
  margin-top: 6px;
  display: block;
}

.choice-row .error-msg {
  /* extra spacing för gruppfel under chips/radio/checkboxar */
  margin-top: 8px;
}


.field-invalid {
  border-color: #b00020 !important;
  box-shadow: 0 0 0 2px rgba(176,0,32,.12);
}