/* South Bay Music Conservatory — Form Styles
   Brand: turquoise (#15B0CC) accent, near-black (#1A1A1A) text,
   Lato body, Playfair Display headings, 6px radius buttons
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Lato:wght@300;400;700&display=swap');

/* ── Base typography ── */
body {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  color: #1A1A1A;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .success-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: #1A1A1A;
  letter-spacing: 0.01em;
}

/* ── Inputs ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  background: #fafeff !important;
  border: 1px solid #c7c7c7 !important;
  border-radius: 6px !important;
  color: #1A1A1A !important;
  font-family: 'Lato', Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: #15B0CC !important;
  box-shadow: 0 0 0 3px rgba(21, 176, 204, 0.12) !important;
  outline: none !important;
}

/* ── Submit button ── */
button[type="submit"],
input[type="submit"],
.btn-submit {
  background: #15B0CC !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: 'Lato', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  padding: 16px 40px !important;
  transition: background 0.2s ease !important;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-submit:hover {
  background: #0d8fa8 !important;
  opacity: 1 !important;
}

/* ── Labels ── */
label,
.form-label,
.field-label {
  font-family: 'Lato', Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
}

/* ── Required star ── */
.req,
.required,
.required-star,
.required-marker {
  color: #15B0CC !important;
}

/* ── Section headings ── */
.form-section-heading,
.section-title {
  font-family: 'Lato', Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #444444 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #e8e8e8 !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
}

/* ── Checkboxes ── */
input[type="checkbox"]:checked {
  accent-color: #15B0CC;
}

.check-row {
  border-radius: 6px !important;
  border-color: #d8d8d8 !important;
  background: #fafeff !important;
}

.check-label {
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #333333 !important;
}

/* ── Waiver box ── */
.waiver-box {
  background: #f5fdff !important;
  border: 1px solid #c4e8f0 !important;
  border-radius: 6px !important;
}

.waiver-text {
  color: #555555 !important;
  font-size: 13px !important;
}

.waiver-link {
  color: #15B0CC !important;
}

.waiver-box .check-row {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Error states ── */
.field-error input,
.field-error select,
.field-error textarea {
  border-color: #b91c1c !important;
}

.error-msg,
.field-error,
.form-error,
.errorlist {
  color: #b91c1c !important;
  font-size: 12px !important;
  font-family: 'Lato', Helvetica, Arial, sans-serif !important;
}

/* ── Help text ── */
.form-help-text,
.help-text,
small {
  color: #666666 !important;
  font-size: 12px !important;
  font-family: 'Lato', Helvetica, Arial, sans-serif !important;
}

/* ── Success state ── */
.success-icon {
  color: #15B0CC !important;
}

.success-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
}

/* ── Form header (apply_form.html) ── */
.school-form-header {
  background: #1A1A1A;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.school-form-header .school-name {
  color: #ffffff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.school-form-header .school-tagline {
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  margin-top: 2px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  button[type="submit"],
  input[type="submit"],
  .btn-submit {
    border-radius: 6px !important;
    padding: 14px 28px !important;
  }
}

/* Approved website theme for SBMC lead/trial forms only. Keep the enrollment
   application theme above unchanged. Fonts are served with the application. */
@font-face {
  font-family: 'SBMC Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('sbmc-fonts/manrope-400.ttf') format('truetype');
}
@font-face {
  font-family: 'SBMC Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('sbmc-fonts/manrope-700.ttf') format('truetype');
}
body.lead-form {
  --primary: #193d8f;
  --accent: #193d8f;
  --bg: #fdf5e7;
  --card: #edf1fa;
  --text: #19253d;
  --muted: #626c7e;
  --border: #d7ddeb;
  --radius: 12px;
  --font: 'SBMC Manrope', sans-serif;
  --heading-font: var(--font);
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
body.lead-form--embedded { background: transparent; }
.lead-form :is(h1, h2, h3, h4, .success-title) {
  font-family: var(--font) !important;
  color: var(--primary);
}
.lead-form :is(label, .form-label, .field-label) {
  font-family: var(--font) !important;
  font-size: 14px !important;
  color: var(--text) !important;
}
.lead-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea) {
  font-family: var(--font) !important;
  font-size: 16px !important;
  background: #ffffff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  border-radius: 8px !important;
  min-height: 48px;
}
.lead-form :is(input, select, textarea):focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgb(25 61 143 / 18%) !important;
}
.lead-form .btn-submit {
  background: #f8a327 !important;
  color: #19253d !important;
  border-radius: 999px !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  padding: 14px 20px !important;
  min-height: 48px;
}
.lead-form .btn-submit:hover { background: #ef9714 !important; }
.lead-form .btn-submit:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}
.lead-form :is(.req, .required, .required-star, .required-marker, .success-icon) {
  color: var(--primary) !important;
}
.lead-form input[type="checkbox"] { accent-color: var(--primary); }
.lead-form :is(.error-msg, .field-error, .form-error, .errorlist, .form-help-text, .help-text, small) {
  font-family: var(--font) !important;
}
.lead-form .field-error :is(input, select, textarea) {
  border-color: #b91c1c !important;
}