/* =========================================================
   KLARKÄLLA — CONTACT FORM 7 DEFAULT STYLES
   ========================================================= */

.wpcf7-form {
    --cf7-green: #00452f;
    --cf7-green-dark: #003824;

    --cf7-bg: #fdf9f7;
    --cf7-input-bg: #ffffff;

    --cf7-text: #30302f;
    --cf7-muted: #aaa5a0;
    --cf7-border: #ddd8d4;

    --cf7-error: #a63f3f;

    --cf7-radius: 9px;

    width: 100%;
    max-width: 100%;

    font-family: inherit;
}


/* =========================================================
   FIELD
   ========================================================= */

.wpcf7-form .cf7-field {
    display: flex;
    flex-direction: column;

    gap: 7px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   LABEL
   ========================================================= */

.wpcf7-form .cf7-field label {
    display: block;

    margin: 0;
    padding: 0;

    color: var(--cf7-green-dark);

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* =========================================================
   CF7 WRAPPER
   ========================================================= */

.wpcf7-form .wpcf7-form-control-wrap {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   INPUT / TEXTAREA
   ========================================================= */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
    display: block;

    width: 100%;
    box-sizing: border-box;

    margin: 0;

    padding: 10px 12px;

    background: var(--cf7-input-bg);

    border: 1px solid var(--cf7-border);
    border-radius: var(--cf7-radius);

    color: var(--cf7-text);

    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;

    outline: none;
    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: var(--cf7-muted);
    opacity: 1;
}


/* =========================================================
   HOVER
   ========================================================= */

.wpcf7-form input[type="text"]:hover,
.wpcf7-form input[type="email"]:hover,
.wpcf7-form input[type="tel"]:hover,
.wpcf7-form input[type="url"]:hover,
.wpcf7-form textarea:hover {
    border-color: #b8c7bf;
}


/* =========================================================
   FOCUS
   ========================================================= */

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    outline: none;

    border-color: var(--cf7-green);

    box-shadow:
        0 0 0 3px rgba(0, 69, 47, 0.07);
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.wpcf7-form textarea {
    min-height: 80px;

    resize: vertical;
}


/* =========================================================
   SUBMIT
   ========================================================= */

.wpcf7-form .cf7-field--submit {
    width: auto;
    align-self: flex-start;

    margin: 0;
}


.wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 160px;

    margin: 0;

    padding: 12px 22px;

    background: var(--cf7-green);
    color: #ffffff;

    border: 1px solid var(--cf7-green);
    border-radius: 999px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.wpcf7-form input[type="submit"]:hover {
    background: var(--cf7-green-dark);
    border-color: var(--cf7-green-dark);

    opacity: 1;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(0, 56, 36, 0.13);
}


.wpcf7-form input[type="submit"]:active {
    transform: translateY(0);

    box-shadow: none;
}


.wpcf7-form input[type="submit"]:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


/* =========================================================
   VALIDATION
   ========================================================= */

.wpcf7-form .wpcf7-not-valid {
    border-color: #b94b4b;
}


.wpcf7-form .wpcf7-not-valid-tip {
    display: block;

    margin: 4px 0 0;

    color: var(--cf7-error);

    font-family: inherit;
    font-size: 10px;
    line-height: 1.3;
}


/* =========================================================
   RESPONSE
   ========================================================= */

.wpcf7 form .wpcf7-response-output {
    margin: 10px 0 0;

    padding: 10px 13px;

    border: 0;

    border-radius: 8px;

    background: #dbe9e2;
    color: var(--cf7-green-dark);

    font-family: inherit;
    font-size: 11px;
    line-height: 1.4;
}


.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    background: #fff0ed;

    color: #963e35;
}


/* =========================================================
   SPINNER
   ========================================================= */

.wpcf7-form .wpcf7-spinner {
    margin: 0 0 0 8px;

    vertical-align: middle;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form input[type="url"],
    .wpcf7-form input[type="number"],
    .wpcf7-form select,
    .wpcf7-form textarea {
        font-size: 16px;
    }

}