/**
 * Unified form field styles — mirrors Soleil theme CF7 form-style-7 (.style-line).
 * Applies to quiz, calculator, WooCommerce, and any [data-suntime-form] block.
 */

:root {
  --suntime-text-body: rgba(99, 105, 123, 0.8);
  --suntime-text-heading: rgba(3, 16, 54, 1);
  --suntime-panel-bg: #fff;
  --suntime-panel-border: #ebe4dc;
  --suntime-panel-radius: 14px;
  --suntime-panel-shadow: 0 8px 30px rgba(239, 83, 63, 0.22);
  --suntime-panel-padding: 24px 26px;
}

.stq .style-line,
.calculator__container .style-line,
.woocommerce .style-line,
[data-suntime-form] .style-line {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

.stq .style-line .line,
.calculator__container .style-line .line,
.woocommerce .style-line .line,
[data-suntime-form] .style-line .line {
  display: block;
  height: 1px;
  width: 100%;
  position: relative;
  background-color: var(--theme-color-input_bd_color, #e0e0e0);
  transition: all 0.4s ease;
  z-index: 1;
  margin-top: -1px;
}

.stq .style-line .line::before,
.calculator__container .style-line .line::before,
.woocommerce .style-line .line::before,
[data-suntime-form] .style-line .line::before {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: var(--theme-color-text_dark, #0f172a);
  transition: all 0.4s ease;
}

/* Text fields — form-style-7 */
.stq .style-line input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.stq .style-line select,
.stq .style-line textarea,
.calculator__container .style-line input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.calculator__container .style-line select,
.calculator__container .style-line textarea,
.woocommerce .style-line input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.woocommerce .style-line select,
.woocommerce .style-line textarea,
[data-suntime-form] .style-line input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
[data-suntime-form] .style-line select,
[data-suntime-form] .style-line textarea {
  width: 100%;
  margin-bottom: 0;
  padding: 13px 0;
  line-height: 1.5em;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0;
  box-shadow: 0 15px 15px -14px rgba(0, 0, 0, 0.025);
  color: var(--theme-color-input_text, inherit);
  background-color: var(--theme-color-input_bg_color, transparent);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

/* CF7 form-style-1: іконки зліва — не знімати padding теми */
[data-suntime-form] .form-style-1 .style-line[class*="icon-"] input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
[data-suntime-form] .form-style-1 .style-line[class*="icon-"] textarea {
  padding: 13px 0 13px 40px !important;
}

.stq .style-line input::placeholder,
.stq .style-line textarea::placeholder,
.calculator__container .style-line input::placeholder,
.calculator__container .style-line textarea::placeholder,
.woocommerce .style-line input::placeholder,
.woocommerce .style-line textarea::placeholder,
[data-suntime-form] .style-line input::placeholder,
[data-suntime-form] .style-line textarea::placeholder {
  color: var(--theme-color-input_text, #94a3b8);
  opacity: 1;
}

.stq .style-line input:focus,
.stq .style-line input:active,
.stq .style-line select:focus,
.stq .style-line select:active,
.stq .style-line textarea:focus,
.stq .style-line textarea:active,
.calculator__container .style-line input:focus,
.calculator__container .style-line input:active,
.calculator__container .style-line select:focus,
.calculator__container .style-line select:active,
.calculator__container .style-line textarea:focus,
.calculator__container .style-line textarea:active,
.woocommerce .style-line input:focus,
.woocommerce .style-line input:active,
.woocommerce .style-line select:focus,
.woocommerce .style-line select:active,
.woocommerce .style-line textarea:focus,
.woocommerce .style-line textarea:active,
[data-suntime-form] .style-line input:focus,
[data-suntime-form] .style-line input:active,
[data-suntime-form] .style-line select:focus,
[data-suntime-form] .style-line select:active,
[data-suntime-form] .style-line textarea:focus,
[data-suntime-form] .style-line textarea:active {
  color: var(--theme-color-input_dark, inherit);
  background-color: var(--theme-color-input_bg_hover, transparent);
}

.stq .style-line:hover .line::before,
.calculator__container .style-line:hover .line::before,
.woocommerce .style-line:hover .line::before,
[data-suntime-form] .style-line:hover .line::before {
  width: 100%;
}

.stq .style-line input:focus ~ .line::before,
.stq .style-line input:active ~ .line::before,
.stq .style-line select:focus ~ .line::before,
.stq .style-line select:active ~ .line::before,
.stq .style-line textarea:focus ~ .line::before,
.stq .style-line textarea:active ~ .line::before,
.calculator__container .style-line input:focus ~ .line::before,
.calculator__container .style-line input:active ~ .line::before,
.calculator__container .style-line select:focus ~ .line::before,
.calculator__container .style-line select:active ~ .line::before,
.calculator__container .style-line textarea:focus ~ .line::before,
.calculator__container .style-line textarea:active ~ .line::before,
.woocommerce .style-line input:focus ~ .line::before,
.woocommerce .style-line input:active ~ .line::before,
.woocommerce .style-line select:focus ~ .line::before,
.woocommerce .style-line select:active ~ .line::before,
.woocommerce .style-line textarea:focus ~ .line::before,
.woocommerce .style-line textarea:active ~ .line::before,
[data-suntime-form] .style-line input:focus ~ .line::before,
[data-suntime-form] .style-line input:active ~ .line::before,
[data-suntime-form] .style-line select:focus ~ .line::before,
[data-suntime-form] .style-line select:active ~ .line::before,
[data-suntime-form] .style-line textarea:focus ~ .line::before,
[data-suntime-form] .style-line textarea:active ~ .line::before {
  width: 100%;
}

/* Одна лінія під select: прибираємо border-bottom теми Soleil, лишається .style-line .line */
.stq .style-line select,
.calculator__container .style-line select,
.woocommerce .style-line select,
[data-suntime-form] .style-line select,
.woocommerce .select_container .style-line select,
.calculator__container .select_container .style-line select {
  border: none !important;
  border-bottom: none !important;
}

.stq .select_container .style-line,
.calculator__container .select_container .style-line,
.woocommerce .select_container .style-line,
[data-suntime-form] .select_container .style-line {
  display: block;
  width: 100%;
}

/* Invalid */
.stq .style-line .is-invalid ~ .line,
.calculator__container .style-line .is-invalid ~ .line,
.woocommerce .style-line .is-invalid ~ .line,
[data-suntime-form] .style-line .is-invalid ~ .line {
  opacity: 0;
}

/* Field labels (visible labels above inputs) */
.calculator__container .calc-label,
.calculator__container .calculator__wrp-input > p:not(.calculator__field-error):first-child,
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.4;
  color: var(--suntime-text-heading, var(--theme-color-text_dark, #0f172a));
}

.calculator__container .calc-label,
.calculator__container .calculator__wrp-input > p:not(.calculator__field-error):first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
}

/* Error messages */
.stq .stq-field-error,
.calculator__container .calculator__field-error,
.woocommerce .woocommerce-error li,
.suntime-field-error {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: #da6f5b;
}

.stq .stq-field-error:empty,
.calculator__container .calculator__field-error:empty {
  display: none;
}

/* Spacing between wrapped fields */
.stq .stq-step .style-line + .stq-field-error + .style-line,
.stq .stq-step.is-active > .style-line ~ .style-line {
  margin-top: 18px;
}

.calculator__container .calculator__wrp-input .style-line {
  margin-bottom: 4px;
}

/* Select2 inside unified blocks — inherit theme bottom-border style */
.stq .select2-container,
.calculator__container .select2-container,
.woocommerce .select2-container,
[data-suntime-form] .select2-container {
  width: 100% !important;
}

.stq .select2-container--default .select2-selection--single,
.calculator__container .select2-container--default .select2-selection--single,
.woocommerce .select2-container--default .select2-selection--single,
[data-suntime-form] .select2-container--default .select2-selection--single {
  height: auto;
  min-height: 0;
  border: none;
  border-bottom: 1px solid var(--theme-color-input_bd_color, #e0e0e0);
  border-radius: 0;
  padding: 13px 0;
  background-color: var(--theme-color-input_bg_color, transparent);
  box-shadow: 0 15px 15px -14px rgba(0, 0, 0, 0.025);
  transition: all 0.3s ease;
}

.stq .select2-container--default .select2-selection--single .select2-selection__rendered,
.calculator__container .select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-suntime-form] .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  line-height: 1.5em;
  color: var(--theme-color-input_text, inherit);
}

.stq .select2-container--default.select2-container--open .select2-selection--single,
.stq .select2-container--default.select2-container--focus .select2-selection--single,
.calculator__container .select2-container--default.select2-container--open .select2-selection--single,
.calculator__container .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce .select2-container--default.select2-container--focus .select2-selection--single,
[data-suntime-form] .select2-container--default.select2-container--open .select2-selection--single,
[data-suntime-form] .select2-container--default.select2-container--focus .select2-selection--single {
  color: var(--theme-color-input_dark, inherit);
  border-color: var(--theme-color-input_bd_hover, var(--theme-color-text_dark, #0f172a));
  background-color: var(--theme-color-input_bg_hover, transparent);
}

/* Native selects in calculator — залишаємо власну стрілку в calc-select-wrap */
.calculator__container .calc-select-wrap select,
.calculator__container .style-line select {
  background-image: none;
  padding-right: 36px !important;
}

.calculator__container .calc-select-wrap::after {
  display: block !important;
}

/* Checkout Zen UI — узгоджено з .style-line */
.woocommerce-checkout .zen-ui-select__value,
.woocommerce-checkout .zen-ui-select__trigger {
  width: 100%;
  padding: 13px 28px 13px 0;
  line-height: 1.5em;
  border: none;
  border-bottom: 1px solid var(--theme-color-input_bd_color, #e0e0e0);
  border-radius: 0;
  background-color: var(--theme-color-input_bg_color, transparent);
  color: var(--theme-color-input_text, inherit);
  font-family: inherit;
  font-size: inherit;
  box-shadow: 0 15px 15px -14px rgba(0, 0, 0, 0.025);
  box-sizing: border-box;
}

.woocommerce-checkout .zen-ui-select:focus-within .zen-ui-select__value,
.woocommerce-checkout .zen-ui-select.is-open .zen-ui-select__value {
  color: var(--theme-color-input_dark, inherit);
  border-bottom-color: var(--theme-color-text_dark, #0f172a);
  background-color: var(--theme-color-input_bg_hover, transparent);
}

/* Disabled / readonly result field */
.calculator__container .style-line input[disabled],
.calculator__container .style-line input[readonly] {
  opacity: 0.85;
  cursor: default;
}

/* Zen UI select — одна лінія через .line, без дубля border на value */
.woocommerce-checkout .style-line .zen-ui-select__value,
.woocommerce-checkout .style-line .zen-ui-select__trigger {
  border: none !important;
  border-bottom: none !important;
}