*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand: #5C0D35;
  --brand-light: #7a1148;
  --text: #1a1a1a;
  --muted: #5a6a72;
  --border: #c8d0d4;
  --bg: #ffffff;
  --input-radius: 4px;
  --field-gap: 20px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px 60px;
}

.card {
  width: 100%;
  max-width: 420px;
}

/* Star icon */
.brand-icon {
  text-align: center;
  margin-bottom: 12px;
}
.brand-icon svg {
  width: 36px;
  height: 36px;
  fill: var(--brand);
}

h1 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 28px;
}

/* Form */
form { display: flex; flex-direction: column; gap: var(--field-gap); }

.field { display: flex; flex-direction: column; gap: 6px; }

label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
label .req { color: var(--brand); margin-left: 1px; }

.hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: -2px;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--input-radius);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.15s;
  outline: none;
}

input:focus {
  border-color: var(--brand);
}

input.error {
  border-color: #c0392b;
}

/* Phone row */
.phone-row {
  display: flex;
  gap: 8px;
}

.country-select {
  position: relative;
  flex-shrink: 0;
}

.country-select select {
  appearance: none;
  height: 48px;
  padding: 0 28px 0 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--input-radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.country-select select:focus { border-color: var(--brand); }

.country-select::after {
  content: '';
  pointer-events: none;
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
  margin-top: 3px;
}

.phone-row input[type="tel"] { flex: 1; }

/* Submit */
.btn-submit {
  width: 100%;
  height: 52px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--input-radius);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}

.btn-submit:hover { background: var(--brand-light); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Footer */
.footer-link {
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 24px;
}

.footer-link a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.footer-link a:hover { text-decoration: underline; }

/* Field-level error message */
.field-error {
  font-size: 0.78rem;
  color: #c0392b;
  display: none;
}
.field-error.visible { display: block; }

/* OTP page */
.otp-subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: -16px;
  margin-bottom: 28px;
  line-height: 1.5;
}
.otp-subtitle strong { color: var(--text); }

.otp-inputs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 4px;
}

.otp-digit {
  width: 48px !important;
  height: 56px !important;
  padding: 0 !important;
  text-align: center;
  font-size: 1.5rem !important;
  font-weight: 700;
  border: 1.5px solid var(--border);
  border-radius: var(--input-radius);
  caret-color: var(--brand);
  transition: border-color 0.15s;
}

.otp-digit:focus { border-color: var(--brand); }
.otp-digit.error { border-color: #c0392b; }

#otp-error {
  text-align: center;
  margin-top: -8px;
}

/* Callback / success page */
.status-box {
  text-align: center;
  padding: 48px 24px;
}
.status-box h2 { color: var(--brand); margin-bottom: 12px; }
.status-box p  { color: var(--muted); font-size: 0.9rem; }
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }