/* =========================================================
   Arqam CF7 Theme Sync — Base
   All values come from CSS variables generated from the theme.
   logical properties => works in RTL and LTR with no changes.
   ========================================================= */

.wpcf7 form {
    font-family: var(--acf7-font, inherit);
    color: var(--acf7-text);
}

.wpcf7 form p {
    margin-block-end: 1.1rem;
}

/* ---------- Labels ---------- */
.wpcf7 label {
    display: block;
    font-weight: 600;
    color: var(--acf7-heading);
    margin-block-end: 0.4rem;
    font-size: 0.925rem;
}

/* ---------- Inputs / Textarea / Select ---------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
    background: var(--acf7-input-bg);
    color: var(--acf7-text);
    border: 1px solid var(--acf7-border);
    border-radius: var(--acf7-radius);
    padding-block: 0.65rem;
    padding-inline: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color .18s ease, box-shadow .18s ease;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

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

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    outline: none;
    border-color: var(--acf7-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acf7-primary) 18%, transparent);
}

.wpcf7 ::placeholder {
    color: color-mix(in srgb, var(--acf7-text) 45%, transparent);
}

/* ---------- Checkbox / Radio / Acceptance ---------- */
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
    accent-color: var(--acf7-primary);
    width: 1.05rem;
    height: 1.05rem;
    margin-inline-end: 0.45rem;
    vertical-align: middle;
}

.wpcf7 .wpcf7-list-item {
    margin-inline-start: 0;
    margin-inline-end: 1rem;
}

/* ---------- Submit ---------- */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
    display: inline-block;
    background: var(--acf7-primary);
    color: var(--acf7-primary-text);
    border: 1px solid var(--acf7-primary);
    border-radius: var(--acf7-radius);
    padding-block: var(--acf7-btn-py);
    padding-inline: var(--acf7-btn-px);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: filter .18s ease, transform .12s ease;
}

.wpcf7 .wpcf7-submit:hover {
    filter: brightness(0.92);
}

.wpcf7 .wpcf7-submit:active {
    transform: translateY(1px);
}

.wpcf7 .wpcf7-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* spinner next to the button */
.wpcf7 .wpcf7-spinner {
    margin-inline-start: 0.6rem;
}

/* ---------- Validation ---------- */
.wpcf7 .wpcf7-not-valid {
    border-color: var(--acf7-error) !important;
}

.wpcf7 .wpcf7-not-valid-tip {
    color: var(--acf7-error);
    font-size: 0.825rem;
    margin-block-start: 0.3rem;
}

/* ---------- Response output ---------- */
.wpcf7 .wpcf7-response-output {
    border-radius: var(--acf7-radius);
    padding: 0.9rem 1.1rem;
    margin: 1.25rem 0 0;
    border-width: 1px;
    border-style: solid;
    font-size: 0.925rem;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--acf7-success);
    color: var(--acf7-success);
    background: color-mix(in srgb, var(--acf7-success) 8%, transparent);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border-color: var(--acf7-error);
    color: var(--acf7-error);
    background: color-mix(in srgb, var(--acf7-error) 8%, transparent);
}

/* ---------- Fallback for browsers without color-mix ---------- */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .wpcf7 input:focus,
    .wpcf7 textarea:focus,
    .wpcf7 select:focus {
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
    }
}

/* =========================================================
   Manual field layout — paste these classes into the Form tab
   of the Contact Form 7 editor. Always stacks to full width on
   mobile, no matter how many columns are used.
   ========================================================= */
.wpcf7 .acf7-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--acf7-gap, 16px);
    align-items: flex-start;
}

.wpcf7 .acf7-row > p {
    margin-block-end: 0; /* gap handles spacing instead of the default margin */
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    /* flex-basis is intentionally left unset here so the .acf7-col-* rules
       below are the sole source of truth for it (no specificity fight) */
}

.wpcf7 .acf7-col-12 { flex-basis: 100%; }
.wpcf7 .acf7-col-6  { flex-basis: calc(50% - var(--acf7-gap, 16px) / 2); }
.wpcf7 .acf7-col-4  { flex-basis: calc(33.333% - var(--acf7-gap, 16px) * 2 / 3); }
.wpcf7 .acf7-col-3  { flex-basis: calc(25% - var(--acf7-gap, 16px) * 3 / 4); }

/* always stack to full width on mobile */
@media (max-width: 767px) {
    .wpcf7 .acf7-col-6,
    .wpcf7 .acf7-col-4,
    .wpcf7 .acf7-col-3 {
        flex-basis: 100%;
    }
}