/* ─────────────────────────────
   CONSULENZA.CSS — Lo Castro consultation quiz
   wp-content/themes/twentytwentyfive-child/styles/consulenza.css

   Ports the Next.js frontend's Consulenza page (styled-components) into
   plain CSS on [lc_consulenza]'s markup, using the same --lc-* tokens
   as the rest of the WooCommerce side.
   ───────────────────────────── */

:root {
  --lc-border-strong: rgba(74, 47, 27, 0.32);
  --lc-track-wide: 0.14em;
  --lc-track-default: 0.06em;
}

.lc-consulenza {
  font-family: var(--lc-font-serif);
  color: var(--lc-text);
}

.lc-consulenza-loading {
  text-align: center;
  padding: 80px 20px;
  font-size: 13px;
  opacity: 0.6;
}

/* WordPress's block-theme "constrained" layout (applied by the Post
   Content block itself, regardless of page template) caps width and
   adds side padding. Since this file only ever loads on the Consulenza
   page (is_page('consulenza') in functions.php), it's safe to fully
   neutralize it here — same fix as wishlist.css / nostra-storia.css. */
.entry-content.is-layout-constrained {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* WordPress's global block-spacing style also injects max-width and
   margin-block-start on every direct child of .is-layout-constrained
   (all via low-specificity :where() selectors, easily overridden
   here) — neutralize both, or the first section gets squeezed width
   and an unwanted gap under the header. */
.entry-content.is-layout-constrained > * {
  max-width: none !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ── Hero ── */
.lc-consulenza-hero {
  padding: 34px 20px;
  text-align: center;
  border-bottom: 1px solid var(--lc-border-subtle);
}

.lc-consulenza-hero-title {
  margin: 12px 0 0;
  font-family: var(--lc-font-display);
  font-size: 14px;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  font-weight: 600;
}

.lc-consulenza-hero-desc {
  margin: 14px auto 0;
  max-width: 70ch;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.7;
}

/* ── Toolbar / progress bar ── */
.lc-consulenza-toolbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--lc-border-subtle);
}

@media (max-width: 900px) {
  .lc-consulenza-toolbar {
    padding: 12px 20px;
  }
}

.lc-consulenza-progress-wrap {
  display: grid;
  gap: 8px;
  width: min(560px, 70vw);
}

@media (max-width: 900px) {
  .lc-consulenza-progress-wrap {
    width: 100%;
  }
}

.lc-consulenza-progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--lc-font-display);
  font-size: 11px;
  letter-spacing: var(--lc-track-default);
  text-transform: uppercase;
  opacity: 0.7;
}

.lc-consulenza-bar {
  height: 8px;
  background: var(--lc-surface);
  overflow: hidden;
}

.lc-consulenza-bar-fill {
  height: 100%;
  background: var(--lc-text);
  transition: width 0.25s ease;
}

.lc-consulenza-toolbtn {
  appearance: none;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: var(--lc-text);
  font-family: var(--lc-font-display);
  font-size: 12px;
  letter-spacing: var(--lc-track-default);
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.lc-consulenza-toolbtn:hover {
  opacity: 1;
}

/* ── Shell: two-panel bordered fold ── */
.lc-consulenza-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 20px 70px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  border-top: 1px solid var(--lc-border-strong);
  border-left: 1px solid var(--lc-border-strong);
  box-sizing: border-box;
}

@media (max-width: 980px) {
  .lc-consulenza-shell {
    grid-template-columns: 1fr;
  }
}

.lc-consulenza-panel {
  border-right: 1px solid var(--lc-border-strong);
  border-bottom: 1px solid var(--lc-border-strong);
  padding: 48px 34px 54px;
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .lc-consulenza-panel {
    padding: 28px 18px 32px;
  }
}

.lc-consulenza-step-kicker {
  margin: 0 0 10px;
  font-family: var(--lc-font-display);
  font-size: 10px;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  opacity: 0.7;
}

.lc-consulenza-step-title {
  margin: 0;
  font-family: var(--lc-font-display);
  font-size: 16px;
  letter-spacing: var(--lc-track-default);
  text-transform: uppercase;
  font-weight: 600;
}

/* ── Options (single/multi choice) ── */
.lc-consulenza-options {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}

.lc-consulenza-optionbtn {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--lc-border);
  color: var(--lc-text);
  padding: 12px;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  opacity: 0.75;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.lc-consulenza-optionbtn:hover {
  opacity: 1;
  border-color: var(--lc-border-strong);
}

.lc-consulenza-optionbtn.is-active {
  opacity: 1;
  border-color: var(--lc-border-strong);
}

.lc-consulenza-dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--lc-border);
  background: transparent;
}

.lc-consulenza-dot.is-active {
  border-color: var(--lc-border-strong);
  background: var(--lc-text);
}

.lc-consulenza-option-text {
  font-size: 13px;
  line-height: 1.5;
}

.lc-consulenza-assist {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.7;
}

.lc-consulenza-error {
  color: #a33f3f;
  opacity: 1;
}

/* ── Text/lead inputs ── */
.lc-consulenza-textarea {
  width: 100%;
  min-height: 130px;
  border: 1px solid var(--lc-border);
  background: transparent;
  color: var(--lc-text);
  padding: 12px;
  outline: none;
  font-size: 13px;
  line-height: 1.6;
  font-family: var(--lc-font-serif);
  box-sizing: border-box;
  resize: vertical;
}

.lc-consulenza-textarea:focus {
  border-color: var(--lc-border-strong);
}

.lc-consulenza-input {
  width: 100%;
  border: 1px solid var(--lc-border);
  background: transparent;
  color: var(--lc-text);
  padding: 12px;
  outline: none;
  font-size: 13px;
  font-family: var(--lc-font-serif);
  box-sizing: border-box;
  margin-bottom: 10px;
}

.lc-consulenza-input:focus {
  border-color: var(--lc-border-strong);
}

/* ── Nav row (Indietro / Avanti / Invia) ── */
.lc-consulenza-nav-row {
  margin-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lc-consulenza-navbtn {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--lc-border);
  background: transparent;
  color: var(--lc-text);
  padding: 10px 12px;
  font-family: var(--lc-font-display);
  font-size: 12px;
  letter-spacing: var(--lc-track-default);
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.lc-consulenza-navbtn:hover:not(:disabled) {
  opacity: 1;
}

.lc-consulenza-navbtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.lc-consulenza-navbtn svg {
  width: 16px;
  height: 16px;
}

.lc-consulenza-navbtn-primary {
  border-color: var(--lc-text);
  background: var(--lc-text);
  color: var(--lc-bg);
  opacity: 1;
}

.lc-consulenza-navbtn-primary:hover:not(:disabled) {
  opacity: 0.85;
}

.lc-consulenza-navbtn-primary:disabled {
  opacity: 0.35;
}

/* ── Summary panel ── */
.lc-consulenza-summary-title {
  margin: 0;
  font-family: var(--lc-font-display);
  font-size: 14px;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.75;
}

.lc-consulenza-summary-list {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.lc-consulenza-summary-item {
  border-top: 1px solid var(--lc-border-subtle);
  padding-top: 12px;
}

.lc-consulenza-summary-item:first-child {
  border-top: none;
  padding-top: 0;
}

.lc-consulenza-summary-krow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.lc-consulenza-summary-k {
  font-family: var(--lc-font-display);
  font-size: 10px;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  opacity: 0.7;
}

.lc-consulenza-summary-v {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  text-transform: capitalize;
}

.lc-consulenza-edit-btn {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--lc-border);
  background: transparent;
  color: var(--lc-text);
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.lc-consulenza-edit-btn:hover {
  opacity: 1;
  border-color: var(--lc-border-strong);
}

.lc-consulenza-edit-btn svg {
  width: 14px;
  height: 14px;
}

/* ── Success state ── */
.lc-consulenza-success-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 20px 70px;
  border-top: 1px solid var(--lc-border-strong);
  border-left: 1px solid var(--lc-border-strong);
  box-sizing: border-box;
}

.lc-consulenza-success-card {
  border-right: 1px solid var(--lc-border-strong);
  border-bottom: 1px solid var(--lc-border-strong);
  padding: 64px 34px 70px;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .lc-consulenza-success-card {
    padding: 44px 18px 54px;
  }
}

.lc-consulenza-success-kicker {
  margin: 0;
  font-family: var(--lc-font-display);
  font-size: 10px;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  opacity: 0.7;
}

.lc-consulenza-success-title {
  margin: 14px 0 0;
  font-family: var(--lc-font-display);
  font-size: 16px;
  letter-spacing: var(--lc-track-default);
  text-transform: uppercase;
  font-weight: 600;
}

.lc-consulenza-success-text {
  margin: 14px auto 0;
  max-width: 64ch;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.7;
}

.lc-consulenza-shoplink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  padding: 10px 14px;
  border: 1px solid var(--lc-text);
  background: var(--lc-text);
  color: var(--lc-bg);
  font-family: var(--lc-font-display);
  font-size: 12px;
  letter-spacing: var(--lc-track-default);
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.lc-consulenza-shoplink:hover {
  opacity: 0.85;
}