/* ============================================================
   CF7 Multi-Step PV Form — Stylesheet
   Matches curaleaf-poland-report.lovable.app exactly.
   All colours use the same HSL tokens from the original app.
   ============================================================ */


/* ── Tokens ─────────────────────────────────────────────────
   Neutral surfaces use white-with-opacity so the form sits on
   ANY background colour. Only the accent (--ms-primary) is a
   fixed brand colour. */
.cf7ms-pv-section {
  --ms-fg:          rgba(255,255,255,0.92);   /* primary text */
  --ms-card:        rgba(255,255,255,0.04);   /* card fill */
  --ms-primary:     #33e1aa;                  /* brand accent (kept) */
  --ms-primary-fg:  #06231a;                  /* text on accent buttons */
  --ms-secondary:   rgba(255,255,255,0.06);   /* step circles, ref box */
  --ms-muted:       rgba(255,255,255,0.06);
  --ms-muted-fg:    rgba(255,255,255,0.55);   /* labels, hints */
  --ms-border:      rgba(255,255,255,0.12);
  --ms-field:       rgba(255,255,255,0.05);   /* input / textarea fill */
  --ms-field-hover: rgba(255,255,255,0.08);
  --ms-destructive: #ef4444;
  --ms-radius:      0.5rem;
}

/* ── Section wrapper ────────────────────────────────────── */
.cf7ms-pv-section {
  background-color: transparent;
  color: var(--ms-fg);
  font-family: "Biennale", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 0;
}

.cf7ms-pv-inner { max-width: 48rem; margin: 0 auto; }

/* ── Header ─────────────────────────────────────────────── */
.cf7ms-pv-header { margin-bottom: 2rem; }

.cf7ms-pv-header-row {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
}
.cf7ms-pv-icon-circle {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgba(51,225,170,0.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cf7ms-pv-icon-circle svg { color: var(--ms-primary); display: block; }

.cf7ms-pv-title {
  font-size: 1.875rem; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--ms-fg); margin: 0;
}
@media (min-width: 768px) { .cf7ms-pv-title { font-size: 2.25rem; } }

.cf7ms-pv-subtitle {
  color: rgba(242,242,242,0.75);
  font-size: 1rem; line-height: 1.6;
  max-width: 36rem; margin-bottom: 0.5rem;
}
.cf7ms-pv-address {
  font-size: 0.75rem; color: var(--ms-muted-fg); margin-bottom: 1rem;
}

/* ── Download buttons ───────────────────────────────────── */
.cf7ms-pv-downloads { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; }

.cf7ms-dl-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ms-secondary); border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius); padding: 0.625rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  color: rgba(242,242,242,0.8); text-decoration: none;
  font-family: inherit;
  transition: color 0.2s, border-color 0.2s;
}
.cf7ms-dl-btn:hover { color: var(--ms-fg); border-color: rgba(51,225,170,0.4); }
.cf7ms-dl-btn svg { color: var(--ms-primary); flex-shrink: 0; display: block; }

/* ── Step indicator ─────────────────────────────────────── */
.cf7ms-steps {
  display: flex; align-items: center; gap: 0.25rem;
  margin-bottom: 2rem; overflow-x: auto; padding-bottom: 0.5rem;
  list-style: none;
}
.cf7ms-step-unit { display: flex; align-items: center; gap: 0.25rem; flex: 1; min-width: 0; }

.cf7ms-step-num {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
  background: var(--ms-secondary); color: var(--ms-muted-fg);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.cf7ms-step-num.active {
  background: var(--ms-primary); color: var(--ms-primary-fg);
  box-shadow: 0 8px 16px -4px rgba(51,225,170,0.35);
}
.cf7ms-step-num.done {
  background: var(--ms-primary); color: var(--ms-primary-fg);
  box-shadow: 0 8px 16px -4px rgba(51,225,170,0.25);
}
.cf7ms-step-num.done svg { display: block; }

.cf7ms-step-label {
  font-size: 0.6875rem; color: var(--ms-muted-fg); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-left: 0.25rem; display: none;
}
@media (min-width: 768px) { .cf7ms-step-label { display: inline; } }

.cf7ms-step-line {
  flex: 1; height: 2px; border-radius: 9999px;
  background: var(--ms-border); margin: 0 0.375rem;
  transition: background 0.3s;
}
.cf7ms-step-line.done { background: var(--ms-primary); }

/* ── Card ───────────────────────────────────────────────── */
/* White-opacity fill so the container reads on any background. */
.cf7ms-pv-card {
  background: var(--ms-card); border: 1px solid var(--ms-border);
  border-radius: 1rem; padding: 1.5rem;
}
@media (min-width: 768px) { .cf7ms-pv-card { padding: 2.5rem; } }

/* ── CF7 form reset ─────────────────────────────────────── */
.cf7ms-pv-card .wpcf7 { margin: 0; }
.cf7ms-pv-card .wpcf7-form { display: block; }

/* Hide CF7's default spinner / ajax loader */
.cf7ms-pv-card .wpcf7-spinner { display: none !important; }

/* ── Step panels ────────────────────────────────────────── */
.cf7ms-step { display: none; }
.cf7ms-step.cf7ms-active { display: block; }

/* ── Step heading ───────────────────────────────────────── */
.cf7ms-step-heading {
  font-size: 1.125rem; font-weight: 700; color: rgba(242,242,242,0.9);
  margin-bottom: 1.25rem; margin-top: 0;
}

/* ── Error banner (per-step) ────────────────────────────── */
.cf7ms-error-banner {
  background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.3);
  border-radius: var(--ms-radius); padding: 0.75rem 1rem;
  font-size: 0.8125rem; color: var(--ms-destructive);
  margin-bottom: 1.25rem; display: none;
}
.cf7ms-error-banner.visible { display: block; }

/* ── wpautop safety net ─────────────────────────────────────
   Even with wpcf7_autop_or_not disabled, neutralise any stray
   <p>/<br> the editor or theme might inject, so spacing stays
   driven by our own layout classes. */
.cf7ms-pv-card .wpcf7-form p { margin: 0; }
.cf7ms-pv-card .wpcf7-form br { display: none; }
.cf7ms-pv-card .cf7ms-step > p:empty { display: none; }

/* ── Field spacing ──────────────────────────────────────── */
.cf7ms-fields { display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Grid layouts ───────────────────────────────────────── */
.cf7ms-grid-2,
.cf7ms-grid-3 { display: grid; gap: 1.25rem; }
@media (min-width: 640px) {
  .cf7ms-grid-2 { grid-template-columns: 1fr 1fr; }
  .cf7ms-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Labels ─────────────────────────────────────────────── */
.cf7ms-pv-card label,
.cf7ms-pv-card .cf7ms-label {
  display: block;
  font-size: 0.75rem; font-weight: 600;
  color: var(--ms-muted-fg);
  margin-bottom: 0.375rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  font-family: inherit;
}
.cf7ms-sublabel {
  font-size: 0.7rem; color: var(--ms-muted-fg);
  font-weight: 400; text-transform: none; letter-spacing: 0;
  margin-bottom: 0.375rem; display: block;
}

/* ── Inputs / selects / textareas ───────────────────────── */
.cf7ms-pv-card input[type="text"],
.cf7ms-pv-card input[type="email"],
.cf7ms-pv-card input[type="tel"],
.cf7ms-pv-card input[type="number"],
.cf7ms-pv-card input[type="date"],
.cf7ms-pv-card select,
.cf7ms-pv-card textarea {
  width: 100%;
  background: var(--ms-field);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 0.75rem 1rem;
  color: var(--ms-fg);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.cf7ms-pv-card input::placeholder,
.cf7ms-pv-card textarea::placeholder { color: var(--ms-muted-fg); opacity: 1; }

/* Date/time fields: match placeholder colour for the dd/mm/yyyy text.
   Browsers render this via ::-webkit-datetime-edit, not ::placeholder.
   When empty the whole edit area shows the format hint; once filled the
   real value uses --ms-fg. */
.cf7ms-pv-card input[type="date"] { color: var(--ms-muted-fg); }
.cf7ms-pv-card input[type="date"]:valid,
.cf7ms-pv-card input[type="date"].cf7ms-has-value { color: var(--ms-fg); }
.cf7ms-pv-card input[type="date"]::-webkit-datetime-edit-text,
.cf7ms-pv-card input[type="date"]::-webkit-datetime-edit-month-field,
.cf7ms-pv-card input[type="date"]::-webkit-datetime-edit-day-field,
.cf7ms-pv-card input[type="date"]::-webkit-datetime-edit-year-field { color: inherit; }

/* Select placeholder ("Wybierz" = first_as_label) matches other placeholders */
.cf7ms-pv-card select:invalid,
.cf7ms-pv-card select.cf7ms-placeholder { color: var(--ms-muted-fg) !important; }

/* Select: lock appearance + background against theme/Elementor overrides */
.cf7ms-pv-card select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: var(--ms-field) !important;
  background-image: none !important;
  color: var(--ms-fg) !important;
  cursor: pointer;
  padding-right: 2.5rem;   /* room for the custom arrow */
  height: auto;
}
.cf7ms-pv-card select option { color: #111; }  /* readable in native dropdown */

.cf7ms-pv-card input:focus,
.cf7ms-pv-card select:focus,
.cf7ms-pv-card textarea:focus {
  border-color: var(--ms-primary);
  box-shadow: 0 0 0 3px rgba(51,225,170,0.15);
}

/* CF7 validation error state */
.cf7ms-pv-card .wpcf7-not-valid,
.cf7ms-pv-card input.cf7ms-field-error,
.cf7ms-pv-card select.cf7ms-field-error,
.cf7ms-pv-card textarea.cf7ms-field-error {
  border-color: var(--ms-destructive) !important;
}

/* CF7 inline validation tip */
.cf7ms-pv-card .wpcf7-not-valid-tip {
  font-size: 0.75rem; color: var(--ms-destructive);
  margin-top: 0.25rem; display: block;
}

/* Select arrow */
.cf7ms-select-wrap { position: relative; }
.cf7ms-select-wrap::after {
  content: '';
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--ms-muted-fg);
  pointer-events: none;
}

/* Textarea */
.cf7ms-pv-card textarea { resize: vertical; min-height: 6rem; }

/* Number spinner hide */
.cf7ms-pv-card input[type="number"]::-webkit-inner-spin-button,
.cf7ms-pv-card input[type="number"]::-webkit-outer-spin-button { height: auto; }

/* Date picker icon */
.cf7ms-pv-card input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.6); cursor: pointer;
}

/* Char counter */
.cf7ms-char-count {
  font-size: 0.75rem; color: var(--ms-muted-fg);
  margin-top: 0.25rem; text-align: right;
}

/* ── Radio groups ───────────────────────────────────────── */
/* CF7 renders: .wpcf7-radio > .wpcf7-list-item > label > (input + &nbsp; + .wpcf7-list-item-label)
   We avoid relying on flex gap (the &nbsp; text node interferes) and use an
   explicit margin on the input instead, which can't be defeated by the theme. */
.cf7ms-radio-group { display: flex; flex-direction: column; gap: 0.5rem; }
.cf7ms-radio-question {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ms-muted-fg);
}
.cf7ms-pv-card .wpcf7-radio,
.cf7ms-radio-options {
  display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center;
}
.cf7ms-pv-card .wpcf7-radio .wpcf7-list-item {
  margin: 0 !important; display: inline-flex; align-items: center;
}
.cf7ms-pv-card .wpcf7-radio .wpcf7-list-item label {
  display: inline-flex !important; align-items: center;
  margin: 0; cursor: pointer;
  font-size: 0.875rem; color: var(--ms-fg);
  text-transform: none; letter-spacing: 0; font-weight: 400; line-height: 1;
}
.cf7ms-pv-card .wpcf7-radio input[type="radio"] {
  accent-color: var(--ms-primary);
  width: 1.05rem; height: 1.05rem; cursor: pointer;
  margin: 0 0.5rem 0 0 !important;   /* the gap between dot and text */
  flex-shrink: 0; vertical-align: middle;
}
.cf7ms-pv-card .wpcf7-radio .wpcf7-list-item-label {
  line-height: 1; display: inline-block;
}

/* ── Checkbox (RODO) ────────────────────────────────────── */
.cf7ms-pv-card .wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.cf7ms-pv-card .wpcf7-checkbox .wpcf7-list-item label {
  display: flex; align-items: flex-start; gap: 0.625rem;
  font-size: 0.875rem; color: var(--ms-fg); cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 400; line-height: 1.5;
}
.cf7ms-pv-card .wpcf7-checkbox input[type="checkbox"] {
  accent-color: var(--ms-primary);
  width: 1rem; height: 1rem; margin-top: 0.15rem; flex-shrink: 0; cursor: pointer;
}

/* ── Privacy box ────────────────────────────────────────── */
.cf7ms-privacy-box {
  background: var(--ms-field); border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius); padding: 1.5rem;
}
.cf7ms-privacy-title {
  font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;
  color: var(--ms-fg);
}
.cf7ms-privacy-text {
  font-size: 0.75rem; color: var(--ms-muted-fg); line-height: 1.65;
  margin-bottom: 0.85rem;
}
.cf7ms-privacy-text:last-of-type { margin-bottom: 0; }
.cf7ms-privacy-text strong { color: var(--ms-fg); }

/* Consent checkbox sits below the legal text with clear separation */
.cf7ms-privacy-box .wpcf7-form-control-wrap {
  display: block; margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--ms-border);
}
.cf7ms-privacy-box .wpcf7-checkbox .wpcf7-list-item label {
  align-items: flex-start; gap: 0.625rem; font-size: 0.8125rem;
  color: var(--ms-fg); line-height: 1.5;
}

/* ── Nav bar ────────────────────────────────────────────── */
.cf7ms-nav-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ms-border);
}
.cf7ms-nav-right { display: flex; }

.cf7ms-pv-card .cf7ms-btn-back {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: none !important; background-image: none !important;
  border: none !important; cursor: pointer; box-shadow: none !important;
  color: var(--ms-muted-fg); font-size: 0.875rem;
  font-family: inherit; font-weight: 500;
  padding: 0.5rem 0; transition: color 0.2s;
  text-decoration: none; text-transform: none; letter-spacing: normal;
}
.cf7ms-pv-card .cf7ms-btn-back:hover,
.cf7ms-pv-card .cf7ms-btn-back:focus,
.cf7ms-pv-card .cf7ms-btn-back:active {
  background: none !important; background-image: none !important;
  color: var(--ms-fg) !important; box-shadow: none !important;
}
.cf7ms-pv-card .cf7ms-btn-back svg { display: block; }

.cf7ms-pv-card .cf7ms-btn-next,
.cf7ms-pv-card .cf7ms-btn-submit {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ms-primary) !important;
  background-image: none !important;
  color: var(--ms-primary-fg) !important;
  padding: 0.75rem 1.75rem; border-radius: var(--ms-radius);
  font-family: inherit;
  font-weight: 600; font-size: 0.875rem; border: none; cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
  box-shadow: none !important;
  text-decoration: none; text-transform: none; letter-spacing: normal;
  line-height: 1.2; width: auto;
}
/* Lock hover/focus/active against theme + Elementor button rules */
.cf7ms-pv-card .cf7ms-btn-next:hover,
.cf7ms-pv-card .cf7ms-btn-submit:hover,
.cf7ms-pv-card .cf7ms-btn-next:focus,
.cf7ms-pv-card .cf7ms-btn-submit:focus,
.cf7ms-pv-card .cf7ms-btn-next:active,
.cf7ms-pv-card .cf7ms-btn-submit:active {
  background: var(--ms-primary) !important;
  background-image: none !important;
  color: var(--ms-primary-fg) !important;
  filter: brightness(1.1);
  box-shadow: none !important;
}
.cf7ms-pv-card .cf7ms-btn-next:active,
.cf7ms-pv-card .cf7ms-btn-submit:active { transform: scale(0.98); }
.cf7ms-pv-card .cf7ms-btn-next svg,
.cf7ms-pv-card .cf7ms-btn-submit svg { display: block; }

/* disabled state while CF7 is submitting */
.cf7ms-btn-submit:disabled { opacity: 0.7; cursor: not-allowed; }

/* ── CF7 response output ────────────────────────────────── */
.cf7ms-pv-card .wpcf7-response-output {
  margin-top: 1.5rem; padding: 0.75rem 1rem;
  border-radius: var(--ms-radius); font-size: 0.875rem;
  border: 1px solid var(--ms-border);
}
.cf7ms-pv-card .wpcf7-mail-sent-ok {
  background: rgba(51,225,170,0.1);
  border-color: rgba(51,225,170,0.4);
  color: var(--ms-primary);
}
.cf7ms-pv-card .wpcf7-mail-sent-ng,
.cf7ms-pv-card .wpcf7-spam-blocked,
.cf7ms-pv-card .wpcf7-aborted {
  background: rgba(220,38,38,0.1);
  border-color: rgba(220,38,38,0.3);
  color: var(--ms-destructive);
}

/* ── Success overlay (shown after CF7 mail-sent event) ──── */
.cf7ms-success {
  display: none; text-align: center; padding: 1.5rem 1rem;
}
.cf7ms-success.visible { display: block; }
.cf7ms-pv-card .wpcf7-form.sent .cf7ms-success { display: block; }

.cf7ms-success-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: rgba(51,225,170,0.2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.cf7ms-success-icon svg { color: var(--ms-primary); display: block; }
.cf7ms-success-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--ms-fg); }
.cf7ms-success-subtitle { color: var(--ms-muted-fg); margin-bottom: 1.5rem; }

.cf7ms-ref-box {
  background: var(--ms-secondary); border: 1px solid var(--ms-border);
  border-radius: 0.75rem; padding: 1.25rem 1.5rem; display: inline-block;
  min-width: 18rem; margin-bottom: 1.25rem;
}
.cf7ms-ref-label { font-size: 0.75rem; color: var(--ms-muted-fg); margin-bottom: 0.375rem; }
.cf7ms-ref-number { font-size: 1.25rem; font-weight: 700; color: var(--ms-primary); letter-spacing: 0.05em; }
.cf7ms-success-note { font-size: 0.8rem; color: var(--ms-muted-fg); margin: 0; }
.cf7ms-success-note a { color: var(--ms-primary); }