/* ═══════════════════════════════════════════════
   Scheda Clienti — Frontend Form CSS
═══════════════════════════════════════════════ */

.sc-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 960px;
  margin: 0 auto;
  color: #1a1a2e;
}

/* Alert */
.sc-alert {
  padding: 14px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 15px;
}
.sc-alert--success {
  background: #e8f8f2;
  border: 1px solid #5cb89e;
  color: #1a5c44;
}
.sc-alert--error {
  background: #fef0f0;
  border: 1px solid #e07070;
  color: #7a1a1a;
}

/* Form wrapper */
.sc-form { }

/* Header bar */
.sc-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a1a2e;
  color: #fff;
  padding: 16px 24px;
  border-radius: 10px 10px 0 0;
  gap: 24px;
  flex-wrap: wrap;
}
.sc-header-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sc-header-code-info {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  font-style: italic;
}
.sc-header-code-info strong { color: #fff; }

/* Codice assegnato nel messaggio di successo */
.sc-codice-box {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 18px;
  background: #1a1a2e;
  color: #fff;
  border-radius: 6px;
  font-family: monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
}


/* Section */
.sc-section {
  border: 1px solid #e0dfe8;
  border-top: none;
  padding: 20px 24px;
  background: #fff;
}
.sc-section--flat {
  background: #f8f7fc;
}
.sc-section:last-of-type {
  border-radius: 0 0 10px 10px;
}
.sc-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b67a0;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eeedf5;
}
.sc-section-title small {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #999;
  margin-left: 6px;
}

/* Radio row */
.sc-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sc-radio {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 8px 16px;
  background: #f4f3fb;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: background .15s, border-color .15s;
}
.sc-radio:has(input:checked) {
  background: #e8e5f7;
  border-color: #6b67a0;
  color: #3a3670;
  font-weight: 600;
}
.sc-radio input { accent-color: #6b67a0; }

/* Checkbox grid */
.sc-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sc-check {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 12px;
  background: #f4f3fb;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  transition: background .15s;
}
.sc-check:has(input:checked) {
  background: #e8e5f7;
  border-color: #6b67a0;
  color: #3a3670;
}
.sc-check input { accent-color: #6b67a0; }

/* Grid layout */
.sc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px 16px;
}

.sc-field { display: flex; flex-direction: column; gap: 5px; }
.sc-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #666;
}
.sc-field label small { font-weight:400; text-transform:none; color:#999; }

.sc-field input,
.sc-field select,
.sc-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #c0c0c0 !important;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #000 !important;
  background: #e2e2e2 !important;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.sc-field input:focus,
.sc-field select:focus,
.sc-field textarea:focus {
  border-color: #6b67a0 !important;
  box-shadow: 0 0 0 3px rgba(107,103,160,.12) !important;
  background: #ececec !important;
}
.sc-field input::placeholder,
.sc-field textarea::placeholder {
  color: #878787 !important;
  opacity: 1 !important;
}
.sc-field textarea { resize: vertical; min-height: 80px; }

/* Column spans */
.sc-field--full { grid-column: 1 / -1; }
.sc-field--4    { grid-column: span 4; }
.sc-field--3    { grid-column: span 3; }
.sc-field--2    { grid-column: span 2; }
.sc-field--1    { grid-column: span 1; }

/* Error state */
.sc-field--error input,
.sc-field--error select { border-color: #e07070; background: #fff8f8; }
.sc-err-msg { font-size: 12px; color: #c0392b; }
.sc-req { color: #c0392b; }

/* Submit row */
.sc-submit-row {
  padding: 24px;
  background: #f8f7fc;
  border: 1px solid #e0dfe8;
  border-top: none;
  border-radius: 0 0 10px 10px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.sc-btn-submit {
  padding: 13px 36px;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .2s, transform .15s;
}
.sc-btn-submit:hover { background: #3a3670; transform: translateY(-1px); }
.sc-required-note { font-size: 13px; color: #999; }

@media (max-width: 700px) {
  .sc-grid { grid-template-columns: 1fr 1fr; }
  .sc-field--4, .sc-field--3 { grid-column: span 2; }
  .sc-field--1 { grid-column: span 1; }
}
@media (max-width: 480px) {
  .sc-grid { grid-template-columns: 1fr; }
  .sc-field--4,.sc-field--3,.sc-field--2,.sc-field--1 { grid-column: span 1; }
  .sc-header-bar { flex-direction: column; align-items: flex-start; }
}