/**
 * Front-end styles for builder-made forms.
 *
 * Loaded alongside assets/css/styles.css, which still supplies the look of every shared class
 * (.tzd-card, .tzd-input, .tzd-chip…). Only the element types the builder adds are styled here,
 * plus the few overrides needed because styles.css pins the original form to a fixed width.
 */

/* styles.css locks .tzd-form-wrap to --tzd-container-width with width/min-width/max-width;
   builder forms size themselves from their own settings instead. */
.tzd-fb-form {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
}

.tzd-fb-form .tzd-step-panel {
  min-height: 0;
}

/* The step progress bar is drawn by .tzd-step-panel__header::after. */
.tzd-fb-form--no-progress .tzd-step-panel__header::after {
  display: none;
}

.tzd-fb-el {
  position: relative;
}

/* ------------------------------------------------------------------ layout */

.tzd-fb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.tzd-fb-col {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 767px) {
  .tzd-fb-row--stack-mobile,
  .tzd-fb-row--stack-tablet {
    display: block;
  }
  .tzd-fb-row--stack-mobile > .tzd-fb-col,
  .tzd-fb-row--stack-tablet > .tzd-fb-col {
    flex: none !important;
    max-width: 100% !important;
    margin-bottom: 14px;
  }
}

@media (max-width: 1024px) {
  .tzd-fb-row--stack-tablet {
    display: block;
  }
  .tzd-fb-row--stack-tablet > .tzd-fb-col {
    flex: none !important;
    max-width: 100% !important;
    margin-bottom: 14px;
  }
}

.tzd-fb-spacer {
  min-height: 24px;
}

.tzd-fb-divider {
  border: none;
  border-top: 1px solid var(--tzd-border-color, #e4e8f0);
  margin: 16px 0;
  width: 100%;
}

/* ------------------------------------------------------------------- basic */

.tzd-fb-heading {
  margin: 0 0 12px;
  color: var(--tzd-heading, var(--tzd-text, #1f2937));
  line-height: 1.3;
}

.tzd-fb-text p:first-child { margin-top: 0; }
.tzd-fb-text p:last-child { margin-bottom: 0; }

.tzd-fb-image {
  margin: 0 0 14px;
}

.tzd-fb-image__img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--tzd-radius-card, 16px);
}

.tzd-fb-el--image[style*="text-align:center"] .tzd-fb-image__img,
.tzd-fb-image--center .tzd-fb-image__img {
  margin-inline: auto;
}

/* A button that is not full width still needs to honour its wrapper's alignment. */
.tzd-btn--auto {
  width: auto;
  min-width: 160px;
}

.tzd-fb-html {
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------- progress */

.tzd-fb-progress {
  margin: 0 0 18px;
}

.tzd-fb-progress__track {
  background: #eef1f5;
  border-radius: 999px;
  min-height: 10px;
  overflow: hidden;
}

.tzd-fb-progress__fill {
  background: var(--tzd-brand, #ED193A);
  height: 100%;
  min-height: inherit;
  border-radius: inherit;
  transition: width .4s ease;
}

.tzd-fb-progress__stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: .9rem;
  color: var(--tzd-text-muted, #6b7280);
}

.tzd-fb-progress__stats strong {
  color: var(--tzd-text, #111827);
}

/* ------------------------------------------------------- editor placeholders */

/* Only rendered when Renderer::render() runs with $editor_preview = true. */
.tzd-fb-placeholder {
  padding: 14px 16px;
  border: 1px dashed #c3cad6;
  border-radius: 10px;
  color: #6b7280;
  font-size: .86rem;
  background: #f8fafc;
  margin-bottom: 12px;
}

/* -------------------------------------------------------- quantity x price */

.tzd-qty {
  margin: 0 0 18px;
}

.tzd-qty__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.tzd-qty__control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  /* Same default border as every other field (styles.css .tzd-input). */
  border: 1px solid var(--tzd-border-color, #c7cdd8);
  border-radius: var(--tzd-radius-field, 8px);
  background: var(--tzd-field-bg, var(--tzd-card-bg, #fff));
}

.tzd-qty__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--tzd-border-color, #e4e8f0);
  background: #f3f4f6;
  color: var(--tzd-text, #1f2937);
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  padding: 0;
}

.tzd-qty__btn:hover:not(:disabled) {
  background: var(--tzd-brand, #ED193A);
  border-color: var(--tzd-brand, #ED193A);
  color: var(--tzd-button-text, #fff);
}

.tzd-qty__btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.tzd-qty__input {
  width: 56px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tzd-text, #1f2937);
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.tzd-qty__input::-webkit-outer-spin-button,
.tzd-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tzd-qty__input:focus {
  outline: none;
}

.tzd-qty__control:focus-within {
  border-color: var(--tzd-brand, #ED193A);
  box-shadow: 0 0 0 3px var(--tzd-brand-alpha-15, rgba(237, 25, 58, .15));
}

.tzd-qty__total {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--tzd-brand, #ED193A);
  white-space: nowrap;
}

.tzd-qty__breakdown {
  margin: 8px 0 0;
  font-size: .85rem;
  color: var(--tzd-text-muted, #6b7280);
}

/* Elements whose visibility is rule-driven stay hidden until form.js has evaluated them,
   so they do not flash on slow connections. form.js sets the final state on load.
   Never in the editor canvas: it loads this stylesheet too, but has no form.js to reveal
   them — this rule is what made conditional elements vanish from the editor. */
.tzd-fb-form:not(.tzd-fb-form--canvas) .tzd-fb-el--conditional:not([data-tzd-cond-state]) {
  visibility: hidden;
}