/* ── City Cat Hotel — Upitnik o mački ──────────────────────────────────── */

.ca-form-wrap { max-width: 820px; margin: 0 auto; }
.ca-step      { font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-accent,#c8773a); margin-bottom:0.5rem; }
.ca-title     { font-family:'Cooper Black',serif; font-size:clamp(1.6rem,4vw,2.2rem); margin-bottom:0.4rem; }
.ca-subtitle  { color:var(--color-text-light,#7a7a8a); margin-bottom:2rem; }
.ca-section-title { font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-text-light,#7a7a8a); margin:2rem 0 1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--color-border,#e8e0d4); }

/* Row */
.ca-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:0; }

/* Field */
.ca-field { display:flex; flex-direction:column; gap:0.35rem; margin-bottom:1rem; }
.ca-field label, .ca-field > span { font-size:0.88rem; font-weight:600; color:var(--color-text,#1e2330); }
.ca-required { color:var(--color-accent,#c8773a); }
.ca-field input, .ca-field select, .ca-field textarea {
  font-family:'Quicksand',sans-serif; font-size:0.92rem; color:var(--color-text,#1e2330);
  background:#fff; border:1.5px solid var(--color-border,#e8e0d4); border-radius:8px;
  padding:0.65rem 0.9rem; transition:border-color 0.2s,box-shadow 0.2s; outline:none; width:100%;
}
.ca-field input:focus, .ca-field select:focus, .ca-field textarea:focus {
  border-color:var(--color-accent,#c8773a);
  box-shadow:0 0 0 3px rgba(200,119,58,0.12);
}
.ca-field textarea { resize:vertical; min-height:80px; }
.ca-error { font-size:0.78rem; color:#d32f2f; min-height:1em; }

/* Cat card */
.ca-cat-card {
  background:#fff; border:1.5px solid var(--color-border,#e8e0d4);
  border-radius:12px; padding:1.5rem; margin-bottom:1.25rem;
}
.ca-cat-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; }
.ca-cat-title  { font-family:'Cooper Black',serif; font-size:1.05rem; margin:0; }
.ca-remove-cat {
  background:none; border:1.5px solid var(--color-border,#e8e0d4); border-radius:50%;
  width:28px; height:28px; font-size:0.9rem; cursor:pointer; color:var(--color-text-light,#7a7a8a);
  transition:all 0.2s; display:flex; align-items:center; justify-content:center;
}
.ca-remove-cat:hover { background:#fff0f0; border-color:#ffb3b3; color:#d32f2f; }

.ca-subsection { font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-text-light,#7a7a8a); margin:1.25rem 0 0.75rem; }
.ca-optional   { opacity:0.7; }

/* Yes/No grid */
.ca-yesno-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:0.75rem; margin-bottom:0.5rem; }

.ca-yesno { flex-direction:row; align-items:flex-start; gap:0; background:var(--color-bg-alt,#f5f0e8); border-radius:8px; padding:0.75rem 1rem; flex-wrap:wrap; }
.ca-yesno-label { font-size:0.85rem; font-weight:600; color:var(--color-text,#1e2330); flex:1; min-width:120px; margin-bottom:0.4rem; display:block; }
.ca-yesno-btns  { display:flex; gap:0.5rem; flex-shrink:0; }
.ca-yesno-option { display:flex; align-items:center; gap:0.3rem; font-size:0.85rem; cursor:pointer; padding:0.25rem 0.6rem; border-radius:20px; border:1.5px solid var(--color-border,#e8e0d4); background:#fff; transition:all 0.15s; }
.ca-yesno-option:has(input:checked) { border-color:var(--color-accent,#c8773a); background:#fff8f4; }
.ca-yesno-option input { display:none; }

.ca-note-wrap { width:100%; margin-top:0.5rem; }
.ca-note-input { width:100%; font-family:'Quicksand',sans-serif; font-size:0.88rem; border:1.5px solid var(--color-border,#e8e0d4); border-radius:6px; padding:0.5rem 0.75rem; outline:none; }
.ca-note-input:focus { border-color:var(--color-accent,#c8773a); }

/* Add cat */
.ca-add-cat {
  display:flex; align-items:center; gap:0.5rem;
  background:none; border:1.5px dashed var(--color-accent,#c8773a);
  border-radius:10px; padding:0.85rem 1.5rem; color:var(--color-accent,#c8773a);
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.9rem;
  cursor:pointer; width:100%; justify-content:center; margin-bottom:2rem;
  transition:all 0.2s;
}
.ca-add-cat:hover { background:#fff8f4; }

/* Submit */
.ca-submit-wrap { text-align:center; margin-top:1.5rem; }
.ca-submit-note { font-size:0.82rem; color:var(--color-text-light,#7a7a8a); margin-top:0.75rem; }

@media (max-width:600px) {
  .ca-row { grid-template-columns:1fr; }
  .ca-yesno-grid { grid-template-columns:1fr; }
  .ca-yesno { flex-direction:column; }
}