/**
 * Infineural CRM — Frontend Forms CSS
 *
 * Theme-adaptive: inherits the theme's font and colour, and follows light /
 * dark / system. Everything a form owner can restyle is a custom property, so
 * the visual editor in the form builder only ever has to set variables — never
 * override rules.
 */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
.infcrm-form-wrapper {
    --ifcrm-bg:           transparent;
    --ifcrm-bg-input:     rgba(127, 127, 127, 0.06);
    --ifcrm-bg-input-hover: rgba(127, 127, 127, 0.10);
    --ifcrm-border:       rgba(127, 127, 127, 0.30);
    --ifcrm-border-hover: rgba(127, 127, 127, 0.50);
    --ifcrm-border-focus: var(--ifcrm-primary);
    --ifcrm-text:         currentColor;
    --ifcrm-text-muted:   color-mix(in srgb, currentColor 60%, transparent);
    --ifcrm-placeholder:  var(--ifcrm-text-muted);
    --ifcrm-dropdown-bg:  var(--ifcrm-bg-input);
    --ifcrm-dropdown-text:var(--ifcrm-text);
    --ifcrm-label:        currentColor;
    --ifcrm-primary:      #6366f1;
    --ifcrm-primary-hover:#4f46e5;
    --ifcrm-button:       var(--ifcrm-primary);
    --ifcrm-button-hover: var(--ifcrm-primary-hover);
    --ifcrm-button-text:  #ffffff;
    --ifcrm-required:     #ef4444;
    --ifcrm-danger:       #ef4444;
    --ifcrm-success:      #10b981;
    --ifcrm-radius:       10px;
    --ifcrm-gap:          18px;
    --ifcrm-shadow:       none;
    /* The chevron is a background image, and a data: URI is its own document —
       currentColor does not reach inside it. So the colour is baked in per
       theme rather than inherited, or it goes black on a dark form. */
    --ifcrm-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    /* Derived from the accent, so a custom primary colour carries through to
       the focus ring and the button shadow instead of leaving them indigo. */
    --ifcrm-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ifcrm-border-focus) 28%, transparent);
    --ifcrm-font:         inherit;
}

/* Older engines without color-mix fall back to a neutral ring rather than
   losing the focus indicator altogether. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .infcrm-form-wrapper {
        --ifcrm-text-muted:   #6b7280;
        --ifcrm-placeholder:  #6b7280;
        --ifcrm-shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.25);
    }
}

/* ── Explicit themes ──────────────────────────────────────────────────────── */
[data-theme="dark"] .infcrm-form-wrapper,
.dark .infcrm-form-wrapper,
.theme-dark .infcrm-form-wrapper,
.infcrm-form-wrapper.infcrm-theme-dark {
    --ifcrm-bg:             #1c1c28;
    --ifcrm-bg-input:       #16161f;
    --ifcrm-bg-input-hover: #1a1a26;
    --ifcrm-border:         rgba(255, 255, 255, 0.12);
    --ifcrm-border-hover:   rgba(255, 255, 255, 0.24);
    --ifcrm-text:           #f1f5f9;
    --ifcrm-text-muted:     #94a3b8;
    --ifcrm-label:          #e2e8f0;
    --ifcrm-shadow:         0 1px 3px rgba(0, 0, 0, 0.3);
    --ifcrm-select-arrow:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="light"] .infcrm-form-wrapper,
.infcrm-form-wrapper.infcrm-theme-light {
    --ifcrm-bg:             #ffffff;
    --ifcrm-bg-input:       #f9fafb;
    --ifcrm-bg-input-hover: #f3f4f6;
    --ifcrm-border:         #d1d5db;
    --ifcrm-border-hover:   #9ca3af;
    --ifcrm-text:           #111827;
    --ifcrm-text-muted:     #6b7280;
    --ifcrm-label:          #374151;
    --ifcrm-shadow:         0 1px 3px rgba(0, 0, 0, 0.08);
}

/* "system" deliberately does NOT repaint itself from prefers-color-scheme: the
   OS setting says nothing about the page this form was dropped into, and a
   light site visited by someone in dark mode would lose its borders entirely.
   The default tokens are neutral alphas for exactly that reason — they read on
   any background.

   color-scheme is only declared for the two themes whose background we chose
   ourselves — it decides how the browser paints the parts CSS cannot reach
   (checkboxes, date pickers, autofill). Left off "system" on purpose: keying
   that off the OS paints dark checkboxes onto a light page. */
.infcrm-form-wrapper.infcrm-theme-light  { color-scheme: light; }
.infcrm-form-wrapper.infcrm-theme-dark,
[data-theme="dark"] .infcrm-form-wrapper,
.dark .infcrm-form-wrapper,
.theme-dark .infcrm-form-wrapper          { color-scheme: dark; }

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.infcrm-form-wrapper {
    max-width: 640px;
    margin: 24px auto;
    padding: 32px;
    font-family: var(--ifcrm-font);
    background: var(--ifcrm-bg);
    border: 1px solid var(--ifcrm-border);
    border-radius: calc(var(--ifcrm-radius) * 1.5);
    box-shadow: var(--ifcrm-shadow);
    color: var(--ifcrm-text);
    box-sizing: border-box;
}

.infcrm-form-wrapper *,
.infcrm-form-wrapper *::before,
.infcrm-form-wrapper *::after { box-sizing: inherit; }

/* ── Field layout ─────────────────────────────────────────────────────────── */
.infcrm-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ifcrm-gap);
}

.infcrm-form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;   /* long placeholders must not push a half-width field wide */
}

.infcrm-width-full  { width: 100%; }
.infcrm-width-half  { width: calc(50% - (var(--ifcrm-gap) / 2)); }
.infcrm-width-third { width: calc(33.333% - (var(--ifcrm-gap) * 2 / 3)); }

@media (max-width: 560px) {
    .infcrm-form-wrapper { padding: 22px 18px; margin: 16px auto; }
    .infcrm-width-half,
    .infcrm-width-third { width: 100%; }
}

/* ── Labels ───────────────────────────────────────────────────────────────── */
.infcrm-label {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ifcrm-label);
    display: block;
    letter-spacing: 0.01em;
}

.infcrm-required { color: var(--ifcrm-required); margin-left: 2px; }

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.infcrm-input,
.infcrm-select {
    width: 100%;
    padding: 11px 14px;
    font-size: 1rem;   /* 16px — anything smaller makes iOS Safari zoom on focus */
    line-height: 1.45;
    font-family: var(--ifcrm-font);
    border: 1.5px solid var(--ifcrm-border);
    border-radius: var(--ifcrm-radius);
    background-color: var(--ifcrm-bg-input);
    color: var(--ifcrm-text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    appearance: none;
    -webkit-appearance: none;
}

.infcrm-input:hover:not(:focus):not(:disabled) {
    border-color: var(--ifcrm-border-hover);
    background-color: var(--ifcrm-bg-input-hover);
}

.infcrm-select:hover:not(:focus):not(:disabled) {
    border-color: var(--ifcrm-border-hover);
    filter: brightness(0.96);
}

.infcrm-select {
    background-color: var(--ifcrm-dropdown-bg);
    color: var(--ifcrm-dropdown-text);
    background-image: var(--ifcrm-select-arrow);
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

.infcrm-input:focus,
.infcrm-select:focus {
    outline: none;
    border-color: var(--ifcrm-border-focus);
    box-shadow: var(--ifcrm-shadow-focus);
}

/* Keyboard users still get a ring where the theme suppresses shadows. */
.infcrm-input:focus-visible,
.infcrm-select:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }

.infcrm-input::placeholder { color: var(--ifcrm-placeholder); opacity: 1; }

.infcrm-input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: var(--ifcrm-text-muted);
    background-image: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    -webkit-mask-size: 16px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    mask-size: 16px;
    mask-repeat: no-repeat;
    mask-position: center;
    cursor: pointer;
}

.infcrm-select option {
    background-color: var(--ifcrm-dropdown-bg);
    color: var(--ifcrm-dropdown-text);
}
.infcrm-input:disabled,
.infcrm-select:disabled { opacity: 0.6; cursor: not-allowed; }

/* Chrome's autofill paints its own background, which turns a dark form's
   inputs white with unreadable text. */
.infcrm-input:-webkit-autofill,
.infcrm-input:-webkit-autofill:hover,
.infcrm-input:-webkit-autofill:focus,
.infcrm-select:-webkit-autofill {
    -webkit-text-fill-color: var(--ifcrm-text);
    -webkit-box-shadow: 0 0 0 1000px var(--ifcrm-bg-input) inset;
    caret-color: var(--ifcrm-text);
}

textarea.infcrm-input {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

/* Validation, but only once the visitor has actually had a go at the field —
   :user-invalid does not fire on an untouched empty required input the way
   :invalid does, so nothing is red before it has been earned. */
.infcrm-input:user-invalid,
.infcrm-select:user-invalid {
    border-color: var(--ifcrm-danger);
}

.infcrm-input:user-invalid:focus,
.infcrm-select:user-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ifcrm-danger) 22%, transparent);
}

/* ── Radio & checkbox ─────────────────────────────────────────────────────── */
.infcrm-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.infcrm-radio-label,
.infcrm-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    font-size: 0.9375rem;
    color: var(--ifcrm-text);
    cursor: pointer;
    line-height: 1.45;
    border: 1.5px solid transparent;
    border-radius: var(--ifcrm-radius);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* A whole-row hit area: tapping the label text selects the option, which on a
   phone is the difference between one tap and three. */
.infcrm-radio-label:hover,
.infcrm-checkbox-label:hover {
    background-color: var(--ifcrm-bg-input);
    border-color: var(--ifcrm-border);
}

.infcrm-radio-label:has(input:checked),
.infcrm-checkbox-label:has(input:checked) {
    border-color: var(--ifcrm-border-focus);
    background-color: color-mix(in srgb, var(--ifcrm-primary) 8%, transparent);
}

.infcrm-radio-label:focus-within,
.infcrm-checkbox-label:focus-within {
    border-color: var(--ifcrm-border-focus);
    box-shadow: var(--ifcrm-shadow-focus);
}

.infcrm-radio-label input,
.infcrm-checkbox-label input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: var(--ifcrm-primary);
    cursor: pointer;
}

/* ── Help text ────────────────────────────────────────────────────────────── */
.infcrm-help-text {
    font-size: 0.8125rem;
    color: var(--ifcrm-text-muted);
    line-height: 1.5;
}

/* ── Submit ───────────────────────────────────────────────────────────────── */
.infcrm-form-submit { margin-top: 26px; }

.infcrm-btn-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 13px 24px;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--ifcrm-font);
    color: var(--ifcrm-button-text);
    background: var(--ifcrm-button);
    border: none;
    border-radius: var(--ifcrm-radius);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background-color 0.18s ease, filter 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ifcrm-button) 35%, transparent);
}

.infcrm-btn-submit:hover:not(:disabled) {
    background: var(--ifcrm-button-hover);
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ifcrm-button) 45%, transparent);
}

.infcrm-btn-submit:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.96);
}

.infcrm-btn-submit:focus-visible {
    outline: 2px solid var(--ifcrm-border-focus);
    outline-offset: 3px;
}

.infcrm-btn-submit:disabled {
    opacity: 0.65;
    cursor: progress;
    transform: none;
    box-shadow: none;
}

/* Sending state: the label stays put and a spinner joins it, so the button
   does not change width mid-submit. */
.infcrm-btn-submit.is-loading .infcrm-btn-label { opacity: 0.75; }

.infcrm-btn-submit.is-loading::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: infcrm-spin 0.7s linear infinite;
}

@keyframes infcrm-spin { to { transform: rotate(360deg); } }

/* ── Messaging ────────────────────────────────────────────────────────────── */
.infcrm-form-messaging {
    font-size: 0.9375rem;
    line-height: 1.6;
    border-radius: var(--ifcrm-radius);
    border: 1px solid transparent;
    padding: 12px 16px;
    margin-top: 16px;
}

.infcrm-form-messaging[hidden] { display: none; }

.infcrm-form-messaging:focus { outline: none; }

.infcrm-form-messaging.is-success {
    color: color-mix(in srgb, var(--ifcrm-success) 75%, var(--ifcrm-text));
    background-color: color-mix(in srgb, var(--ifcrm-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--ifcrm-success) 40%, transparent);
}

.infcrm-form-messaging.is-error {
    color: color-mix(in srgb, var(--ifcrm-danger) 75%, var(--ifcrm-text));
    background-color: color-mix(in srgb, var(--ifcrm-danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--ifcrm-danger) 40%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .infcrm-form-messaging.is-success { color: #065f46; background-color: #d1fae5; border-color: #10b981; }
    .infcrm-form-messaging.is-error   { color: #991b1b; background-color: #fee2e2; border-color: #ef4444; }
}

.infcrm-form-messaging a { color: inherit; text-decoration: underline; }

/* ── Motion ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .infcrm-form-wrapper *,
    .infcrm-btn-submit.is-loading::before {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .infcrm-btn-submit:hover:not(:disabled) { transform: none; }
}

/* ── intl-tel-input overrides ────────────────────────────────────────────── */
.infcrm-form-wrapper .iti {
    width: 100%;
}
.infcrm-form-wrapper .iti input.infcrm-input {
    /* intl-tel-input sets padding dynamically via CSS vars for flag room */
    padding-left: var(--iti-selected-country-arrow-padding, 52px) !important;
}
/* Respect CRM form theme variables for dropdown popup */
.infcrm-form-wrapper .iti {
    --iti-bg: var(--ifcrm-dropdown-bg);
    --iti-text-color: var(--ifcrm-dropdown-text);
    --iti-hover-bg: var(--ifcrm-bg-input-hover);
    --iti-hover-text-color: var(--ifcrm-dropdown-text);
    --iti-border-color: var(--ifcrm-border);
    --iti-search-bg: var(--ifcrm-bg-input);
    --iti-dial-code-color: var(--ifcrm-text-muted);
}
.iti__dropdown-content,
.iti__country-list {
    background: var(--ifcrm-dropdown-bg, #fff) !important;
    border: 1px solid var(--ifcrm-border, #ccc) !important;
    color: var(--ifcrm-dropdown-text, #000) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border-radius: 6px !important;
}
.iti__country.iti__highlight {
    background: var(--ifcrm-bg-input-hover, #eee) !important;
}
.iti__country.iti__active {
    background: var(--ifcrm-primary, #6366f1) !important;
    color: #fff !important;
}
.iti__divider {
    border-bottom: 1px solid var(--ifcrm-border, #ccc) !important;
}
.iti__search-input {
    background: var(--ifcrm-bg-input, #fff) !important;
    border: 1px solid var(--ifcrm-border, #ccc) !important;
    color: var(--ifcrm-dropdown-text, #000) !important;
    border-radius: 4px !important;
}
.iti__dial-code {
    color: var(--ifcrm-text-muted, #666) !important;
}
.iti__selected-country,
.iti__selected-country-primary,
.iti__selected-country-primary:hover,
.iti__country-container,
.iti__country-container:hover {
    background: transparent !important;
}