/*
 * Miarto Studio – Formulare
 *
 * Einheitliche Stile für alle Formularelemente.
 * Gilt für native HTML-Formulare und WordPress-Kommentarformulare.
 */

/* ---- Basis-Reset ---- */

input,
textarea,
select,
button {
    font-family: inherit;
    font-size:   inherit;
}

/* ---- Formular-Gruppe ---- */

.ms-form-group {
    margin-bottom: var(--ms-space-5);
}

/* ---- Labels ---- */

label,
.ms-label {
    display:       block;
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--ms-text);
    margin-bottom: var(--ms-space-2);
}

.ms-label--required::after {
    content: ' *';
    color:   var(--ms-color-error-field);
}

/* ---- Eingabefelder ---- */

.ms-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select {
    display:       block;
    width:         100%;
    padding:       var(--ms-space-3) var(--ms-space-4);
    background:    var(--ms-bg);
    color:         var(--ms-text);
    border:        1px solid var(--ms-border);
    border-radius: var(--ms-radius-sm);
    font-size:     0.9375rem;
    line-height:   1.5;
    transition:    border-color var(--ms-transition), box-shadow var(--ms-transition);
    outline:       none;
    appearance:    none;
}

.ms-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--ms-accent);
    box-shadow:   0 0 0 3px var(--ms-focus-ring-accent);
}

.ms-input::placeholder,
input::placeholder,
textarea::placeholder {
    color:   var(--ms-text-subtle);
    opacity: 1;
}

/* ---- Textarea ---- */

textarea {
    min-height: 140px;
    resize:     vertical;
}

/* ---- Select ---- */

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right var(--ms-space-3) center;
    padding-right:       var(--ms-space-10);
    cursor:              pointer;
}

/* ---- Checkbox & Radio ---- */

.ms-check {
    display:     flex;
    align-items: flex-start;
    gap:         var(--ms-space-3);
    cursor:      pointer;
    font-size:   0.9375rem;
    color:       var(--ms-text);
}

.ms-check input[type="checkbox"],
.ms-check input[type="radio"] {
    width:         18px;
    height:        18px;
    flex-shrink:   0;
    margin-top:    2px;
    accent-color:  var(--ms-accent);
    cursor:        pointer;
}

/* ---- Fehlermeldung ---- */

.ms-form-error {
    display:    block;
    margin-top: var(--ms-space-2);
    font-size:  0.8125rem;
    color:      var(--ms-color-error-field);
}

.ms-input--error,
.ms-form-group--error input,
.ms-form-group--error textarea,
.ms-form-group--error select {
    border-color: var(--ms-color-error-field);
}

.ms-form-group--error input:focus,
.ms-form-group--error textarea:focus,
.ms-form-group--error select:focus {
    box-shadow: 0 0 0 3px var(--ms-focus-ring-error);
}

/* ---- Hilfetext ---- */

.ms-form-help {
    display:    block;
    margin-top: var(--ms-space-2);
    font-size:  0.8125rem;
    color:      var(--ms-text-subtle);
}

/* ---- WordPress Kommentarformular ---- */

.comment-form label {
    font-weight: 600;
    font-size:   0.875rem;
}

.comment-form input[type="submit"] {
    display:         inline-flex;
    align-items:     center;
    padding:         var(--ms-space-3) var(--ms-space-6);
    background:      var(--ms-text);
    color:           var(--ms-bg);
    border:          none;
    border-radius:   var(--ms-radius-sm);
    font-family:     var(--ms-font-body);
    font-size:       0.875rem;
    font-weight:     600;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    cursor:          pointer;
    transition:      background var(--ms-transition);
}

.comment-form input[type="submit"]:hover {
    background: var(--ms-accent);
}