/* ==========================================================================
   Samira Classen — form controls

   Replaces the starter's forms.css and keeps its class contract (.form,
   .field-wrap, .label, .field, .choice, .msg, .hint) plus the WooCommerce
   selectors that join it, so nothing in the theme has to change.

   From the Kontakt frame (285:2549):
   · label above the field, Inter 16 regular — never a placeholder
   · the field is an underline only; 35px from label to rule, 25px between fields
   · the message field is the same underline with a 130px writing area
   · consent text Inter 13; submit "Senden" is an underlined text action
   One deliberate change: Figma draws the underline at 0.5px. On a 1x screen
   that renders at 2.8:1, under the 3:1 a field edge needs, so it is 1px.
   ========================================================================== */

/* ---- layout ---- */
.form { display: flex; flex-direction: column; gap: 25px; max-width: 562px; }
.form__row { display: grid; gap: 25px; }
@media (min-width: 48rem) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__actions { display: flex; gap: var(--space-m); flex-wrap: wrap; }

/* ---- label · helper · error message ---- */
.field-wrap,
.woocommerce form .form-row,
#review_form .comment-form > p { display: flex; flex-direction: column; gap: 0; margin: 0; } /* Figma: label and field are one 55px block */
.label,
.woocommerce-form-row > label,
.woocommerce form .form-row > label { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-text); color: var(--ink); }
.label .req,
.woocommerce form .form-row .required { color: var(--ink); margin-left: 2px; text-decoration: none; }
.hint { font-size: var(--fs-small); line-height: 1.3; color: var(--text-2); margin: 0; }
.msg,
.wpcf7-not-valid-tip { font-size: var(--fs-small); line-height: 1.3; font-weight: var(--fw-medium); color: var(--error); margin: var(--space-2xs) 0 0; display: flex; gap: 6px; align-items: flex-start; }
.msg::before,
.wpcf7-not-valid-tip::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 3px; background: var(--error); }   /* a mark, so the message is not colour alone */

/* ---- text field — underline only ---- */
.field,
.woocommerce-Input {
    width: 100%; background: transparent; color: var(--ink);
    font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-text);
    border: 0; border-bottom: var(--rule) solid var(--ink); border-radius: var(--radius);
    padding: 6px 0 9px; min-height: 36px;
    transition: border-color var(--t);
}
.field::placeholder, .woocommerce-Input::placeholder { color: var(--text-2); opacity: 1; }
.field:hover, .woocommerce-Input:hover { border-bottom-width: 2px; padding-bottom: 8px; }
.field:focus-visible, .woocommerce-Input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.field[aria-invalid="true"], .woocommerce-Input[aria-invalid="true"] { border-color: var(--error); }
.field:disabled, .woocommerce-Input:disabled { color: var(--text-2); border-color: var(--text-2); cursor: not-allowed; }
.field[readonly], .woocommerce-Input[readonly] { cursor: default; }

/* Not drawn in Figma; kept for the theme's search form and the shop */
.field--boxed { border: var(--rule) solid var(--ink); padding: 12px 15px; min-height: 48px; }
.field--boxed[aria-invalid="true"] { border-color: var(--error); }
.field--boxed:disabled { border-color: var(--text-2); }

textarea.field { height: 130px; min-height: 130px; resize: vertical; } /* CF7 prints rows="10"; Figma's area is 130px */

/* ---- select ---- */
.select,
.woocommerce-ordering .orderby,
.variations select {
    width: 100%; background: transparent; color: var(--ink);
    font-family: inherit; font-size: var(--fs-body); line-height: var(--lh-text);
    border: 0; border-bottom: var(--rule) solid var(--ink); border-radius: var(--radius);
    padding: 6px 0 9px; min-height: 35px;
}
.select:focus-visible, .woocommerce-ordering .orderby:focus-visible, .variations select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.select[aria-invalid="true"] { border-color: var(--error); }
.select:disabled, .woocommerce-ordering .orderby:disabled, .variations select:disabled { color: var(--text-2); border-color: var(--text-2); cursor: not-allowed; }

/* ---- checkbox · radio — the NATIVE control, styled ----
   The consent row: 13px text, the box aligned to its first line. The whole
   label is the target: two lines by the form's width, well over 24px. */
.choice,
.woocommerce-form__label-for-checkbox,
.wpcf7-acceptance label { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--fs-small); line-height: 1.25; color: var(--ink); cursor: pointer; }
.choice input,
.woocommerce-form__input-checkbox,
.wpcf7-acceptance input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; flex: none;
    width: 14px; height: 14px; margin: 1px 0 0;
    background: transparent; border: var(--rule) solid var(--ink); border-radius: var(--radius);
    display: grid; place-content: center; cursor: pointer;
    transition: background-color var(--t);
}
.choice input:focus-visible, .woocommerce-form__input-checkbox:focus-visible, .wpcf7-acceptance input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.choice input:checked, .woocommerce-form__input-checkbox:checked, .wpcf7-acceptance input[type="checkbox"]:checked { background: var(--ink); }
/* the mark is a mask, so it takes --on-ink in every tone */
.choice input[type="checkbox"]:checked::before,
.woocommerce-form__input-checkbox[type="checkbox"]:checked::before,
.wpcf7-acceptance input[type="checkbox"]:checked::before {
    content: ""; width: 9px; height: 9px; background: var(--on-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* radio: the one round control — a radio is a circle by convention */
.choice input[type="radio"] { border-radius: 50%; }
.choice input[type="radio"]:checked { background: transparent; }
.choice input[type="radio"]:checked::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.choice input[aria-invalid="true"], .woocommerce-form__input-checkbox[aria-invalid="true"], .wpcf7-not-valid .wpcf7-acceptance input[type="checkbox"] { border-color: var(--error); }
.choice input:disabled, .woocommerce-form__input-checkbox:disabled, .wpcf7-acceptance input[type="checkbox"]:disabled { border-color: var(--text-2); cursor: not-allowed; }
.choice:has(input:disabled) { color: var(--text-2); cursor: not-allowed; }

/* ---- submit — "Senden": underlined text, the design's only form action ---- */
.form__submit {
    appearance: none; background: none; border: 0; border-radius: var(--radius);
    padding: 0; min-height: 44px; cursor: pointer;
    margin-block: calc((var(--lh-text) * 1em - 44px) / 2); /* the 44px target overhangs Figma's 19px line */
    font-family: inherit; font-size: var(--fs-body); line-height: var(--lh-text); color: var(--ink);
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: var(--rule);
}
.form__submit:hover { text-decoration-thickness: 2px; }
.form__submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- groups ---- */
.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.fieldset legend { font-size: var(--fs-body); color: var(--ink); padding: 0; margin-bottom: var(--space-xs); }

/* ---- Contact Form 7 ----
   The form template gives every control our class (class:field,
   class:form__submit) and the shortcode gives the form .form, so most of
   CF7 is already covered above. Joined by selector: the acceptance label
   (.choice) and the validation tip (.msg). The template is in WORDPRESS.md. */
.wpcf7-form-control-wrap { display: block; }
.wpcf7-acceptance .wpcf7-list-item { display: block; margin: 0; }
.wpcf7-form .form__actions { align-items: center; }
.wpcf7-response-output { margin: 0; font-size: var(--fs-small); line-height: 1.3; }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output { color: var(--error); }

/* CF7's own furniture, which its stylesheet (switched off) used to style:
   the fieldset round its hidden inputs drew a browser-default border, the
   screen-reader status must stay readable but invisible, and the spinner
   only shows while the form is sending. */
.wpcf7 .hidden-fields-container { display: none; } /* hidden inputs only; still submitted, and no empty row in the form's gap */
.wpcf7-response-output:empty { display: none; }
.wpcf7 .screen-reader-response {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wpcf7-spinner { display: none; }
.wpcf7-form.submitting .wpcf7-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: var(--rule) solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: sc-spin .8s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }