/*
 * MIPB — Contact Form 7 styles
 * Loaded globally so CF7 forms on any page (e.g. /contact/) receive
 * the site's green design-language, matching the recipe calculator pages.
 *
 * Keep this file self-contained: use hardcoded values so it works even
 * when form.css (which defines --g-dark etc.) is NOT loaded on the page.
 */

/* ─────────────────────────────────────────────────────────
   DESIGN TOKENS (self-contained, no external variable deps)
───────────────────────────────────────────────────────── */
:root {
    --mipb-green-dark:   #2d5a27;
    --mipb-green-mid:    #4a8c3f;
    --mipb-green-light:  #7aba6d;
    --mipb-green-pale:   #e8f5e3;
    --mipb-green-xpale:  #f4faf2;
    --mipb-ink:          #1c2b1a;
    --mipb-ink-light:    #6b8264;
    --mipb-border:       #cde0c5;
    --mipb-white:        #ffffff;
    --mipb-terra:        #c4622d;
    --mipb-terra-pale:   #faeee8;
    --mipb-radius-panel: 12px;
    --mipb-radius-input: 8px;
    --mipb-radius-pill:  99px;
    --mipb-shadow:       0 2px 12px rgba(45,90,39,.12);
    --mipb-font-body:    "DM Sans", sans-serif;
    --mipb-font-display: "DM Serif Display", serif;
}

/* ─────────────────────────────────────────────────────────
   FORM WIDTH
───────────────────────────────────────────────────────── */
.wpcf7,
.wpcf7-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────
   TEXT / NUMBER / SELECT / TEXTAREA INPUTS
───────────────────────────────────────────────────────── */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
    font-family: var(--mipb-font-body);
    font-size: 14px;
    color: var(--mipb-ink);
    background: var(--mipb-green-xpale);
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-input);
    padding: 9px 12px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.wpcf7-form input[type="number"] {
    width: 100px !important;
    min-width: 80px;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: var(--mipb-green-mid);
    box-shadow: 0 0 0 3px rgba(74,140,63,0.15);
    background: var(--mipb-white);
}
.wpcf7-form textarea {
    min-height: 100px;
    resize: vertical;
}
.wpcf7-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a8c3f' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ─────────────────────────────────────────────────────────
   SUBMIT BUTTON
───────────────────────────────────────────────────────── */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: var(--mipb-green-dark);
    color: var(--mipb-white);
    border: none;
    border-radius: var(--mipb-radius-pill);
    font-family: var(--mipb-font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    letter-spacing: 0.02em;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
    background: var(--mipb-green-mid);
}
.wpcf7-form input[type="submit"]:disabled,
.wpcf7-form .wpcf7-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────
   VALIDATION MESSAGES
───────────────────────────────────────────────────────── */
.wpcf7-not-valid-tip {
    font-family: var(--mipb-font-body);
    font-size: 12px;
    color: var(--mipb-terra);
    margin-top: 4px;
    display: block;
}
.wpcf7 .wpcf7-response-output {
    font-family: var(--mipb-font-body);
    font-size: 14px;
    border-radius: var(--mipb-radius-input);
    padding: 12px 16px;
    margin-top: 16px;
    border: 1.5px solid var(--mipb-border);
}
.wpcf7 .wpcf7-mail-sent-ok {
    background: var(--mipb-green-pale);
    border-color: var(--mipb-green-light);
    color: var(--mipb-green-dark);
}
.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-aborted {
    background: var(--mipb-terra-pale);
    border-color: var(--mipb-terra);
    color: var(--mipb-terra);
}
.wpcf7-not-valid {
    border-color: var(--mipb-terra) !important;
}

/* ─────────────────────────────────────────────────────────
   SELECT2 OVERRIDES (if used in CF7 forms)
───────────────────────────────────────────────────────── */
.select2-container {
    width: 100% !important;
    box-sizing: border-box;
}
.select2-container--default .select2-selection--single {
    font-family: var(--mipb-font-body);
    font-size: 14px;
    height: 40px;
    background: var(--mipb-green-xpale);
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-input);
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--mipb-ink);
    padding-left: 12px;
    line-height: 38px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 8px;
}
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--mipb-green-mid);
    box-shadow: 0 0 0 3px rgba(74,140,63,0.15);
    outline: none;
}
.select2-dropdown {
    font-family: var(--mipb-font-body);
    font-size: 14px;
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-input);
    box-shadow: var(--mipb-shadow);
    z-index: 99999 !important;
}
.select2-results__option--highlighted {
    background-color: var(--mipb-green-pale) !important;
    color: var(--mipb-green-dark) !important;
}
.select2-results__option[aria-selected="true"] {
    background: var(--mipb-green-pale);
    color: var(--mipb-green-dark);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────
   CHECKBOXES — pill-style toggle look
───────────────────────────────────────────────────────── */
.mipb-checkbox-toggle .wpcf7-list-item {
    margin: 0;
}
.mipb-checkbox-toggle .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--mipb-green-pale);
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-pill);
    font-family: var(--mipb-font-body);
    font-size: 14px;
    color: var(--mipb-green-dark);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}
.mipb-checkbox-toggle .wpcf7-list-item label:hover {
    background: var(--mipb-border);
    border-color: var(--mipb-green-mid);
}
.mipb-checkbox-grid .wpcf7-list-item {
    display: inline-flex;
    margin: 4px 4px 4px 0;
}
.mipb-checkbox-grid .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--mipb-green-pale);
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-pill);
    font-family: var(--mipb-font-body);
    font-size: 13px;
    color: var(--mipb-green-dark);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.mipb-checkbox-grid .wpcf7-list-item label:hover {
    background: var(--mipb-border);
    border-color: var(--mipb-green-mid);
}

/* ─────────────────────────────────────────────────────────
   NOTICE BOXES
───────────────────────────────────────────────────────── */
.mipb-notice {
    padding: 12px 16px;
    border-radius: var(--mipb-radius-input);
    font-family: var(--mipb-font-body);
    font-size: 14px;
    margin-bottom: 16px;
}
.mipb-notice--info {
    background: var(--mipb-green-pale);
    border: 1.5px solid var(--mipb-border);
    color: var(--mipb-green-dark);
}