/* assets/css/brand-discovery-form.css */

/* Brand Discovery - cleaned and deduplicated CSS
   Consolidated duplicates and preserved final overrides (inputs, buttons, card)
*/

/* === Layout & Container === */
.brand-discovery-form-container {
  max-width: 640px;
  margin: 2.5em auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(17,24,39,0.06);
  padding: 2rem 2.25rem;
  position: relative;
  color: #111827;
}

/* Progress */
.bd-multistep .bd-progress {
  margin: -0.5rem -0.75rem 1.5rem;
  padding: 0.5rem 0.75rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.bd-progress-labels { display:flex; justify-content:space-between; align-items:center; margin-bottom:.25em; }
.bd-progress-text { font-weight:600; color:#111827; font-size:.95rem; }
.bd-progress-hint { color:#6b7280; font-size:.75rem; text-transform:uppercase; font-weight:600; }
.bd-progress-bar { height:8px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.bd-progress-fill { height:100%; background:#4f46e5; width:0; transition: width .25s ease; }

/* === Form groups & labels === */
.form-group { margin-bottom: 1.35rem; }
.form-group label {
  display:block;
  margin-bottom:.5em;
  font-weight:700;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#374151;
}
.field-description { margin:.5em 0; font-size:.9em; color:#6b7280; line-height:1.4; max-width:600px; }

/* === Inputs & Textareas ===
   Keep dark text / white background overrides to avoid theme conflicts.
*/
.brand-discovery-form-container input,
.brand-discovery-form-container textarea,
.brand-discovery-form-container select {
  color: #111827 !important;
  background: #ffffff !important;
}
.brand-discovery-form-container input[type="text"],
.brand-discovery-form-container input[type="email"],
.brand-discovery-form-container textarea {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  width:100%;
}
.brand-discovery-form-container textarea { min-height:140px; resize:vertical; }
.brand-discovery-form-container input:focus,
.brand-discovery-form-container textarea:focus {
  outline:none;
  border-color:#6366f1;
  box-shadow:0 0 0 3px rgba(99,102,241,0.25);
}
.brand-discovery-form-container input[disabled] { background:#f3f4f6; cursor:not-allowed; }

/* === Checkboxes displayed as pills === */
.checkbox-group {
  display:flex;
  flex-wrap:wrap;
  gap:.5em;
  margin-top:.5em;
}
.checkbox-wrapper { position:relative; }
.checkbox-wrapper input[type="checkbox"] {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.checkbox-wrapper label {
  display:inline-block;
  padding:.5em 1em;
  border:2px solid #e5e7eb;
  border-radius:20px;
  cursor:pointer;
  transition:all .2s ease;
  background:#ffffff;
  font-weight:normal;
  margin:0;
  color:#111827 !important;
}
.checkbox-wrapper label:hover { background:#f3f4f6; border-color:#d1d5db; }
.checkbox-wrapper input[type="checkbox"]:checked + label {
  background:#4f46e5;
  color:#fff;
  border-color:#4f46e5;
  font-weight:500;
}
.checkbox-wrapper input[type="checkbox"]:checked + label:hover {
  background:#4338ca; border-color:#4338ca;
}
.checkbox-wrapper input[type="checkbox"]:disabled + label,
.checkbox-wrapper.bd-disabled label {
  opacity:.5;
  cursor:not-allowed;
  background:#f3f4f6;
  border-color:#d1d5db;
}

/* === Counters & helper text === */
.bd-note {
  background:#f8fafc;
  border-left:3px solid #4f46e5;
  padding:.75em 1em;
  margin:1em 0;
  font-size:.95em;
  color:#4b5563;
}
.bd-note strong { color:#1f2937; }
.bd-counter,
.bd-select-counter { display:inline-block; padding:.25em .75em; border-radius:15px; background:#f3f4f6; font-size:.875rem; margin-top:.75em; color:#475569; }
.bd-counter.error { color:#dc2626; background:#fef2f2; }

/* Character counter element (created in JS) */
.bd-char-counter { font-size:.85rem; color:#6b7280; text-align:right; margin-top:.35rem; }
.bd-char-counter.bd-limit { color:#dc2626; font-weight:600; }

/* === Step panel styling === */
.bd-step {
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:1.5rem 1.25rem 1.75rem;
  margin-bottom:1.75rem;
  animation: fadeStep .25s ease-in;
}
@keyframes fadeStep { from { opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.bd-step legend { font-size:1.05rem; font-weight:600; padding:0 .4rem; color:#1f2937; letter-spacing:.3px; }

/* === Primary buttons (Next, Submit) ===
   Strong specificity + !important to resist theme overrides.
*/
.brand-discovery-form-container .bd-step-actions button,
.brand-discovery-form-container .bd-next,
.brand-discovery-form-container button[type="submit"] {
  display:inline-flex !important;
  align-items:center !important;
  gap:.5rem !important;
  padding:.65rem 1.25rem !important;
  border-radius:10px !important;
  font-weight:600 !important;
  font-size:.95rem !important;
  background:linear-gradient(180deg,#5b4ff0,#4f46e5) !important;
  color:#ffffff !important;
  border:1px solid rgba(0,0,0,0.06) !important;
  box-shadow:0 8px 20px rgba(79,70,229,0.18) !important;
  cursor:pointer !important;
  text-decoration:none !important;
}
.brand-discovery-form-container .bd-step-actions button:hover,
.brand-discovery-form-container .bd-next:hover,
.brand-discovery-form-container button[type="submit"]:hover {
  background:linear-gradient(180deg,#5146e0,#4338ca) !important;
  transform:translateY(-1px) !important;
}
.brand-discovery-form-container .bd-step-actions button:active,
.brand-discovery-form-container .bd-next:active,
.brand-discovery-form-container button[type="submit"]:active { transform:translateY(0) !important; }
.brand-discovery-form-container .bd-step-actions button:focus,
.brand-discovery-form-container .bd-next:focus,
.brand-discovery-form-container button[type="submit"]:focus {
  outline:3px solid rgba(99,102,241,0.28) !important;
  outline-offset:2px !important;
}

.brand-discovery-form-container .bd-btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  display: none;
}

.brand-discovery-form-container .bd-primary.bd-loading {
  opacity: 0.92;
  cursor: not-allowed !important;
}

.brand-discovery-form-container .bd-primary.bd-loading .bd-btn-spinner {
  display: inline-block;
  animation: bdSpin .8s linear infinite;
}

.brand-discovery-form-container .bd-submit-status {
  margin: .6rem 0 0;
  color: #4b5563;
  font-size: .9rem;
}

@keyframes bdSpin {
  to { transform: rotate(360deg); }
}

/* === Results card styling === */
.brand-discovery-results {
  max-width: 800px;
  margin: 2em auto;
  padding: 2em;
  background: #f9f9f9;
  border-radius: 8px;
}
.brand-discovery-results > div { margin:2.5em 0; padding:1.5em; background:#ffffff; border:1px solid #e5e7eb; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.brand-discovery-results h3 { color:#111827; font-size:1.5em; margin-bottom:1em; padding-bottom:.5em; border-bottom:2px solid #e5e7eb; }

/* Lists, tables, personas and other result helpers */
.brand-discovery-results ul, .brand-discovery-results ol { margin:1em 0; padding-left:1.5em; }
.brand-discovery-results td { padding:.75em; border:1px solid #e5e7eb; }

/* Minor helpers */
.bd-error { color:#dc2626 !important; font-size:.8rem !important; font-weight:500; margin-top:.35rem; }
.step-kpi { margin-top:.5em; padding:.5em; background:#f0f9ff; border-radius:4px; color:#0369a1; }

/* === Responsive tweaks === */
@media (max-width: 768px) {
  .brand-discovery-results > div { padding:1em; }
}
@media (max-width: 640px) {
  .brand-discovery-form-container { padding:1.5rem 1.25rem !important; border-radius:12px; }
  .bd-step { padding:1.25rem 1rem 1.5rem !important; }
  .bd-step-actions button { width:100% !important; justify-content:center !important; }
}
/* Quiz carry-over -------------------------------------------------------- */

/* Shown when a visitor reaches the strategy form from the maturity quiz, so
   the two steps read as one journey rather than two unrelated forms. */

.bd-carried-notice {
	margin: 0 0 1.25em;
	padding: 0.85em 1.1em;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	color: #1e40af;
	font-size: 0.95rem;
}

.bd-carried-tag {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.1em 0.5em;
	background: #dbeafe;
	color: #1e40af;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	vertical-align: middle;
}

.form-group--carried > input,
.form-group--carried > textarea {
	border-color: #bfdbfe;
	background: #f8fbff;
}