/* Gong NIO Proposal Builder — styles */

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

:root {
  --color-bg:        #f4f5f7;
  --color-card:      #ffffff;
  --color-primary:   #0052cc;
  --color-primary-h: #0041a8;
  --color-text:      #172b4d;
  --color-muted:     #6b778c;
  --color-border:    #dfe1e6;
  --color-selected:  #e6f0ff;
  --color-success:   #00875a;
  --color-warn:      #ff5630;
  --color-warn-bg:   #fff4f2;
  --radius:          8px;
  --shadow:          0 2px 12px rgba(0,0,0,.08);
  --transition:      .15s ease;
}

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

/* ---- Card ---- */
.card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 620px;
  padding: 40px 44px;
}

@media (max-width: 520px) {
  .card { padding: 28px 20px; }
}

/* ---- Auth screen ---- */
.auth-logo {
  display: block;
  margin: 0 auto 28px;
  height: 36px;
}
.auth-title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
}
.auth-subtitle {
  font-size: 14px;
  color: var(--color-muted);
  text-align: center;
  margin-bottom: 32px;
}
.auth-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
  display: block;
}
.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition);
}
.form-input:focus {
  border-color: var(--color-primary);
}
.auth-error {
  color: var(--color-warn);
  font-size: 13px;
  text-align: center;
  min-height: 18px;
  margin-bottom: 4px;
}

/* ---- Progress bar ---- */
.progress-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
}
.progress-step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  transition: background var(--transition);
}
.progress-step.done   { background: var(--color-primary); }
.progress-step.active { background: var(--color-primary); opacity: .5; }
.progress-label {
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
  margin-left: 4px;
}

/* ---- Question ---- */
.q-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}
.q-desc {
  font-size: 14px;
  color: var(--color-muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ---- Options ---- */
.option-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  user-select: none;
}
.option-item:hover { border-color: var(--color-primary); }
.option-item.selected {
  border-color: var(--color-primary);
  background: var(--color-selected);
}
.option-item input[type="checkbox"],
.option-item input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.option-label {
  font-size: 15px;
  line-height: 1.4;
}

/* ---- Company input ---- */
.company-wrap {
  margin-bottom: 24px;
}
.other-wrap {
  margin-top: 10px;
}
.hint {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 4px;
}

/* ---- Validation error ---- */
.field-error {
  color: var(--color-warn);
  font-size: 13px;
  margin-bottom: 12px;
  min-height: 18px;
}

/* ---- Buttons ---- */
.btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.btn {
  padding: 10px 22px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background var(--transition), opacity var(--transition);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-h); }
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-selected); }
.btn-ghost {
  background: transparent;
  color: var(--color-muted);
  padding-left: 0;
}
.btn-ghost:hover:not(:disabled) { color: var(--color-text); }

/* ---- Result card ---- */
.result-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  background: #e3fcef;
  color: var(--color-success);
}
.result-company {
  font-size: 14px;
  color: var(--color-muted);
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 14px;
}
.pricing-table th {
  text-align: left;
  color: var(--color-muted);
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: 1.5px solid var(--color-border);
}
.pricing-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-border);
}
.pricing-table td:last-child { text-align: right; font-weight: 600; }
.pricing-table .row-discount td { color: var(--color-success); }
.pricing-table .row-total td {
  font-size: 16px;
  font-weight: 700;
  border-bottom: none;
  padding-top: 14px;
}
.combo-badge {
  display: inline-block;
  background: #e6f0ff;
  color: var(--color-primary);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 14px;
}

/* ---- Escalation ---- */
.escalation-banner {
  background: var(--color-warn-bg);
  border: 1.5px solid #ffbdad;
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.escalation-banner h3 {
  color: var(--color-warn);
  font-size: 17px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.escalation-banner p {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 12px;
}
.escalation-reasons {
  font-size: 13px;
  color: var(--color-muted);
  padding-left: 18px;
}
.escalation-reasons li { margin-bottom: 4px; }

/* ---- Loading spinner ---- */
.spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  gap: 16px;
  color: var(--color-muted);
  font-size: 14px;
}
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }