/* =============================================================================
 * Pardot Form Generator — front-end form styles.
 *
 * Theme-conflict strategy:
 *   1) Every selector is prefixed with `.pfg-form.pfg-form` (doubled class).
 *      This bumps specificity to (0,2,X) — high enough to beat most theme
 *      selectors like `body .form-control` (0,1,1) without resorting to
 *      !important. Inline style="..." from the form config still wins, so
 *      per-form button colours configured in ACF stay intact.
 *
 *   2) A scoped reset at the top neutralises the properties themes most
 *      often inherit into the form (box-sizing, font, border-radius, etc.).
 *      We avoid `all: revert` because it nukes our own utility classes too.
 *
 *   3) Every visual value lives behind a CSS custom property. Sites can
 *      override via the WP customizer, a child theme, or the
 *      `pfg/extra_form_css` filter, without editing this file.
 *
 *   4) Plugin CSS is enqueued with priority 999 (see PFG_Assets), so when
 *      specificity ties, source order makes us win.
 * ============================================================================= */

/* -- Custom properties --------------------------------------------------- */
.pfg-form.pfg-form {
    --pfg-field-bg:           transparent;
    --pfg-field-color:        inherit;
    --pfg-field-border:       1px solid rgba(66, 80, 86, 0.10);
    --pfg-field-radius:       12px;
    --pfg-field-padding:      .50rem 1rem;
    --pfg-field-font-size:    14px;
    --pfg-field-font-family:  inherit;
    --pfg-field-font-weight:  500;
    --pfg-field-line-height:  1.4;
    --pfg-field-min-height:   43px;
    --pfg-field-max-height:   44px;
    --pfg-field-gap:          .5rem;

    --pfg-textarea-radius:    20px 20px 5px 20px;

    --pfg-row-gap:            5px;
    --pfg-field-margin:       1rem;

    --pfg-btn-radius:         25px;
    --pfg-btn-padding:        .75rem 1.25rem;
    --pfg-btn-font-size:      1rem;

    --pfg-consent-color:      #555;
    --pfg-consent-size:       14px;

    --pfg-error-color:        #d63638;
    --pfg-error-bg:           #ffeaea;
    --pfg-error-border:       #f5c6cb;
}

/* -- Scoped reset -------------------------------------------------------- *
 * Re-establish predictable defaults for the elements themes most often
 * style globally. We intentionally do NOT touch button background/colour —
 * those come from inline ACF config so the admin's choices win.            */
.pfg-form.pfg-form,
.pfg-form.pfg-form * {
    box-sizing: border-box;
}

.pfg-form.pfg-form .pfg-field-wrapper input,
.pfg-form.pfg-form .pfg-field-wrapper select,
.pfg-form.pfg-form .pfg-field-wrapper textarea {
    font-family: var(--pfg-field-font-family);
    font-weight: var(--pfg-field-font-weight);
    line-height: var(--pfg-field-line-height);
    background-color: var(--pfg-field-bg);
    color: var(--pfg-field-color);
    margin: 0;
    box-shadow: none;
    outline: none;
}

/* -- Layout -------------------------------------------------------------- */
.pfg-form.pfg-form .pfg-steps-wrapper {
    position: relative;
}

.pfg-form.pfg-form .pfg-step {
    display: none;
    opacity: 0;
    flex-wrap: wrap;
    column-gap: var(--pfg-row-gap);
    justify-content: space-between;
    transition: opacity .3s ease-in-out;
}

.pfg-form.pfg-form .pfg-step.active {
    display: flex;
    opacity: 1;
}

.pfg-form.pfg-form .pfg-field-wrapper {
    margin-bottom: var(--pfg-field-margin);
    box-sizing: border-box;
}

.pfg-form.pfg-form .pfg-field-wrapper.col-full    { flex: 0 0 100%; }
.pfg-form.pfg-form .pfg-field-wrapper.col-half    { flex: 0 0 calc(50%     - 0.4rem); }
.pfg-form.pfg-form .pfg-field-wrapper.col-third   { flex: 0 0 calc(33.333% - 0.4rem); }
.pfg-form.pfg-form .pfg-field-wrapper.col-quarter { flex: 0 0 calc(25%     - 0.4rem); }

/* -- Inputs / selects --------------------------------------------------- */
.pfg-form.pfg-form .pfg-field-wrapper input,
.pfg-form.pfg-form .pfg-field-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: var(--pfg-field-padding);
    border: var(--pfg-field-border);
    border-radius: var(--pfg-field-radius);
    font-size: var(--pfg-field-font-size);
    min-height: var(--pfg-field-min-height);
    max-height: var(--pfg-field-max-height);
}

.pfg-form.pfg-form .pfg-field-wrapper input[type=checkbox],
.pfg-form.pfg-form .pfg-field-wrapper input[type=radio] {
    width: auto;
    min-width: 0;
    padding: 0;
    min-height: auto;
    max-height: none;
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

/* -- Selects (employees, country, custom selects) ---------------------- *
 * appearance: none above strips the native arrow, so add a custom SVG
 * caret so dropdowns are visually identifiable across all themes.        */
.pfg-form.pfg-form .pfg-field-wrapper select {
    padding-right: 2.25rem;
    cursor: pointer;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23425056' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
}

.pfg-form.pfg-form .pfg-field-wrapper select::-ms-expand {
    display: none;
}

.pfg-form.pfg-form .pfg-field-wrapper select option {
    color: #1d2327;
    background: #fff;
    font-size: var(--pfg-field-font-size);
}

.pfg-form.pfg-form .pfg-field-wrapper select option[value=""][disabled] {
    color: #888;
}

/* -- Named-field hard overrides ---------------------------------------- *
 * Themes occasionally style inputs by name/type (e.g. input[type=tel]).
 * We re-state the values here with `.pfg-field-wrapper input.<name>` so
 * specificity beats those (0,3,2). This is what makes the .phone /
 * .employees / .country fields look identical on every site.            */
.pfg-form.pfg-form .pfg-field-wrapper input.first_name,
.pfg-form.pfg-form .pfg-field-wrapper input.last_name,
.pfg-form.pfg-form .pfg-field-wrapper input.email,
.pfg-form.pfg-form .pfg-field-wrapper input.phone,
.pfg-form.pfg-form .pfg-field-wrapper input.company,
.pfg-form.pfg-form .pfg-field-wrapper input.job_title,
.pfg-form.pfg-form .pfg-field-wrapper input.number_of_stores,
.pfg-form.pfg-form .pfg-field-wrapper select.employees,
.pfg-form.pfg-form .pfg-field-wrapper select.country,
.pfg-form.pfg-form .pfg-field-wrapper textarea.comment {
    width: 100%;
    padding: var(--pfg-field-padding);
    border: var(--pfg-field-border);
    border-radius: var(--pfg-field-radius);
    font-size: var(--pfg-field-font-size);
    font-family: var(--pfg-field-font-family);
    font-weight: var(--pfg-field-font-weight);
    line-height: var(--pfg-field-line-height);
    min-height: var(--pfg-field-min-height);
    max-height: var(--pfg-field-max-height);
    background-color: var(--pfg-field-bg);
    color: var(--pfg-field-color);
    box-shadow: none;
    outline: none;
    margin: 0;
}

.pfg-form.pfg-form .pfg-field-wrapper textarea.comment {
    border-radius: var(--pfg-textarea-radius);
    max-height: none;
    resize: vertical;
}

.pfg-form.pfg-form .pfg-field-wrapper select.employees,
.pfg-form.pfg-form .pfg-field-wrapper select.country {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23425056' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
}

.pfg-form.pfg-form .pfg-field-wrapper textarea {
    width: 100%;
    padding: var(--pfg-field-padding);
    border: var(--pfg-field-border);
    border-radius: var(--pfg-textarea-radius);
    font-size: var(--pfg-field-font-size);
    resize: vertical;
}

.pfg-form.pfg-form div.checkboxes,
.pfg-form.pfg-form div.radios {
    display: inline-block;
    padding: 0 20px;
}

.pfg-form.pfg-form div.checkboxes label,
.pfg-form.pfg-form div.radios label {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* -- Step navigation / buttons ------------------------------------------ */
.pfg-form.pfg-form .pfg-step-nav {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 0.5rem;
    align-items: center;
    width: 100%;
}

.pfg-form.pfg-form .pfg-step-nav button {
    padding: var(--pfg-btn-padding);
    border: none;
    border-radius: var(--pfg-btn-radius);
    cursor: pointer;
    font-size: var(--pfg-btn-font-size);
    font-family: inherit;
    line-height: 1.2;
    transition: all .3s;
}

.pfg-form.pfg-form .pfg-step-nav button:disabled {
    opacity: .6;
    cursor: default;
}

.pfg-form.pfg-form .pfg-steps-wrapper button.pfg-next {
    width: 100%;
    border-radius: 12px;
    cursor: pointer;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 700;
}

.pfg-form.pfg-form .pfg-steps-wrapper button.pfg-prev {
    width: 45%;
    min-height: 45px;
}

.pfg-form.pfg-form .pfg-steps-wrapper button.pfg-submit-btn {
    width: 100%;
    min-height: 45px;
}

/* -- Privacy consent ---------------------------------------------------- */
.pfg-form.pfg-form .pfg-privacy-consent {
    margin: 0 0 0.5rem 0;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pfg-form.pfg-form .pfg-privacy-consent,
.pfg-form.pfg-form .pfg-privacy-consent * {
    font-size: var(--pfg-consent-size);
    color: var(--pfg-consent-color);
    text-align: center;
}

.pfg-form.pfg-form .pf-radio,
.pfg-form.pfg-form .pf-checkbox {
    display: flex;
    gap: 5px;
    color: #666;
}

/* -- Turnstile ---------------------------------------------------------- */
.pfg-form.pfg-form .pfg-turnstile {
    width: 100%;
    text-align: center;
    min-height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.pfg-form.pfg-form .pfg-turnstile[data-ts-rendered="true"] {
    min-height: auto;
}

.pfg-form.pfg-form .pfg-turnstile:not([data-ts-rendered="true"])::before {
    content: "Loading verification...";
    display: block;
    color: #666;
    font-size: 14px;
    padding: 20px;
    background: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 8px;
    animation: pfg-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes pfg-pulse {
    from { opacity: 0.6; }
    to   { opacity: 1; }
}

.pfg-form.pfg-form .pfg-turnstile-error,
.pfg-form.pfg-form .pfg-ts-error {
    color: var(--pfg-error-color);
    font-size: 14px;
    margin: 8px 0;
    text-align: center;
    padding: 8px;
    background: var(--pfg-error-bg);
    border: 1px solid var(--pfg-error-border);
    border-radius: 4px;
    display: none;
}

.pfg-form.pfg-form .pfg-turnstile-error[style*="display: block"],
.pfg-form.pfg-form .pfg-turnstile-error[style*="display:block"],
.pfg-form.pfg-form .pfg-ts-error[style*="display: block"],
.pfg-form.pfg-form .pfg-ts-error[style*="display:block"] {
    display: block !important;
}

/* -- Submit-button loading state --------------------------------------- */
.pfg-form.pfg-form .pfg-submit-btn {
    position: relative;
    overflow: hidden;
}

.pfg-form.pfg-form .pfg-submit-btn:disabled,
.pfg-form.pfg-form .pfg-submit-btn[aria-disabled="true"] {
    opacity: .7;
    cursor: not-allowed;
}

.pfg-form.pfg-form .pfg-submit-btn.is-loading {
    pointer-events: none;
    opacity: .9;
}

.pfg-form.pfg-form .pfg-submit-btn .pfg-btn-text {
    transition: opacity .2s ease;
}

.pfg-form.pfg-form .pfg-submit-btn.is-loading .pfg-btn-text {
    opacity: 0;
}

.pfg-form.pfg-form .pfg-submit-btn.is-loading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    animation: pfg-spin .8s linear infinite;
}

@keyframes pfg-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* -- intl-tel-input ----------------------------------------------------- *
 * intl-tel-input wraps `<input class="phone">` into:
 *
 *   <div class="iti iti--allow-dropdown [iti--separate-dial-code]">
 *     <div class="iti__flag-container">…flag + caret…</div>
 *     <input class="phone" type="tel">
 *   </div>
 *
 * Our `.pfg-field-wrapper input` rules (specificity 0,3,1) outrank the
 * library's own `.iti--allow-dropdown input[type=tel]` rules (0,1,2),
 * which means the input loses the left padding that makes room for the
 * flag — the flag would overlap the typed text. The block below
 * re-applies the correct geometry with higher specificity, and aligns
 * the flag container vertically with the input's own min/max height.    */
.pfg-form.pfg-form .pfg-field-wrapper .iti,
.pfg-form.pfg-form .pfg-field-wrapper .iti.iti--allow-dropdown {
    width: 100%;
    display: block;
    position: relative;
}

.pfg-form.pfg-form .pfg-field-wrapper .iti input,
.pfg-form.pfg-form .pfg-field-wrapper .iti input[type="tel"],
.pfg-form.pfg-form .pfg-field-wrapper .iti input.phone {
    width: 100%;
    border: var(--pfg-field-border);
    border-radius: var(--pfg-field-radius);
    font-size: var(--pfg-field-font-size);
    font-family: var(--pfg-field-font-family);
    font-weight: var(--pfg-field-font-weight);
    line-height: var(--pfg-field-line-height);
    min-height: var(--pfg-field-min-height);
    max-height: var(--pfg-field-max-height);
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 1rem;
    padding-left: 52px;
    background-color: var(--pfg-field-bg);
    color: var(--pfg-field-color);
    box-shadow: none;
    outline: none;
    margin: 0;
}

.pfg-form.pfg-form .pfg-field-wrapper .iti--separate-dial-code input,
.pfg-form.pfg-form .pfg-field-wrapper .iti--separate-dial-code input[type="tel"],
.pfg-form.pfg-form .pfg-field-wrapper .iti--separate-dial-code input.phone {
    padding-left: 84px;
}

.pfg-form.pfg-form .pfg-field-wrapper .iti__flag-container {
    top: 0;
    bottom: 0;
    height: auto;
}

.pfg-form.pfg-form .pfg-field-wrapper .iti__selected-flag {
    height: 100%;
    padding: 0 6px 0 12px;
    border-top-left-radius: var(--pfg-field-radius);
    border-bottom-left-radius: var(--pfg-field-radius);
    background-color: transparent;
}

.pfg-form.pfg-form .pfg-field-wrapper .iti__selected-flag:hover,
.pfg-form.pfg-form .pfg-field-wrapper .iti__selected-flag:focus {
    background-color: rgba(0, 0, 0, .03);
}

.pfg-form.pfg-form .pfg-field-wrapper .iti__country-list {
    max-height: 240px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    z-index: 5;
}

.pfg-form.pfg-form .pfg-field-wrapper .iti__country {
    font-size: var(--pfg-field-font-size);
}

/* -- Responsive --------------------------------------------------------- */
@media (max-width: 768px) {
    .pfg-form.pfg-form .pfg-field-wrapper.col-half,
    .pfg-form.pfg-form .pfg-field-wrapper.col-third,
    .pfg-form.pfg-form .pfg-field-wrapper.col-quarter {
        flex: 0 0 100%;
        margin-bottom: 0.8rem;
    }
    .pfg-form.pfg-form .pfg-step-nav {
        flex-direction: column;
        gap: 0.3rem;
    }
    .pfg-form.pfg-form .pfg-step-nav button {
        width: 100%;
        padding: 0.8rem 1rem;
    }
    .pfg-form.pfg-form .pfg-turnstile { margin: 0.8rem 0; }
}

/* -- A11y / system preferences ----------------------------------------- */
@media (prefers-color-scheme: dark) {
    .pfg-form.pfg-form .pfg-turnstile:not([data-ts-rendered="true"])::before {
        background: #2a2a2a; color: #ccc; border-color: #444;
    }
    .pfg-form.pfg-form .pfg-turnstile-error,
    .pfg-form.pfg-form .pfg-ts-error {
        background: #3a1a1a; border-color: #5a3a3a; color: #ff6b6b;
    }
}

@media (prefers-contrast: high) {
    .pfg-form.pfg-form .pfg-turnstile:not([data-ts-rendered="true"])::before {
        border: 2px solid; font-weight: bold;
    }
    .pfg-form.pfg-form .pfg-turnstile-error,
    .pfg-form.pfg-form .pfg-ts-error {
        border: 2px solid; font-weight: bold;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pfg-form.pfg-form .pfg-step,
    .pfg-form.pfg-form .pfg-submit-btn .pfg-btn-text { transition: none; }
    .pfg-form.pfg-form .pfg-turnstile:not([data-ts-rendered="true"])::before { animation: none; }
    .pfg-form.pfg-form .pfg-submit-btn.is-loading::after {
        animation: none; border: 2px solid currentColor; border-radius: 0;
    }
}

@media print {
    .pfg-form.pfg-form .pfg-turnstile,
    .pfg-form.pfg-form .pfg-turnstile-error,
    .pfg-form.pfg-form .pfg-ts-error {
        display: none !important;
    }
}