/* =============================================================================
   CRM Form – Paid Social Redesign  (complete, self-contained)
   Scoped under .crm-form-section so it never bleeds into other templates.
   All button colours are driven by CSS custom properties set as inline
   styles on the wrapper by template-parts/crm-form.php — that allows the
   ACF-controlled button colour to win without resorting to inline <style>
   blocks or specificity wars.
   Class inventory matches the HTML rendered by
   new-lead-form/template-parts/crm-form/crm-form.php — no orphan rules.
   ============================================================================= */
/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.crm-form-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 100% !important;
    max-width: 466px;
    margin: 0 auto;
    text-align: center;
}


.crm-form-section__heading {
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
    margin-bottom: 16px;
}

.crm-form-section .crm_hbspt-form {
    font-family: 'Barlow', sans-serif;
    color: #fff;
}

.crm-form-section .crm_hs-custom-style {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Per-field wrapper: defeat any default margin so the gap on
   .crm_hs-custom-style is the single source of vertical rhythm. */
.crm-form-section .crm_field {
    margin-bottom: 0;
}

/* Submit row — same reasoning. */
.crm-form-section .crm_actions {
    margin: 0;
    padding: 0;
}

/* ── Text / email / tel / password inputs ─────────────────────────────────── */
.crm-form-section .crm_input input[type="email"],
.crm-form-section .crm_input input[type="tel"],
.crm-form-section .crm_input input[type="text"],
.crm-form-section .crm_input input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 15px;
    min-height: 27px;
    height: 40px;
    border-radius: 15px;
    border: 1px solid rgba(51, 71, 91, 0.3);
    background-color: #ffffff;
    color: #33475b;
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 22px;
    letter-spacing: 0;
    outline: none;
    transition: border-color 0.2s;
    vertical-align: middle;
}

/* Email / tel — reserve left padding for the icon pseudo-element. */
.crm-form-section .crm_input input[type="email"],
.crm-form-section .crm_input input[type="tel"] {
    padding-left: 40px;
}

.crm-form-section .crm_input {
    position: relative;
}

/* Email — envelope icon */
.crm-form-section .crm_input:has(input[type="email"])::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333475b' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M2 7l10 7 10-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    pointer-events: none;
    z-index: 1;
}

/* Tel — phone icon */
.crm-form-section .crm_input:has(input[type="tel"])::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.30463 6.40175C6.085 7.774 7.226 8.915 8.59825 9.69533L9.33533 8.66342C9.58042 8.32042 10.043 8.21442 10.413 8.4165C11.5853 9.05692 12.8809 9.44608 14.2324 9.55308C14.6658 9.58742 15 9.94908 15 10.3838V14.1028C15 14.5301 14.6768 14.8881 14.2518 14.9318C13.8103 14.9772 13.3648 15 12.9167 15C5.78299 15 0 9.217 0 2.08333C0 1.63523 0.0228501 1.18976 0.0682418 0.748133C0.111917 0.323125 0.46995 0 0.897208 0H4.61618C5.05092 0 5.41261 0.3342 5.44692 0.767575C5.55389 2.11907 5.94308 3.4147 6.5835 4.58703C6.78558 4.957 6.67958 5.41962 6.33658 5.66464L5.30463 6.40175Z' fill='%2333475b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 15px 15px;
    pointer-events: none;
    z-index: 1;
}

.crm-form-section .crm_input input::placeholder {
    color: rgba(124, 123, 123, 0.55);
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

/* Defeat the yellow autofill background on webkit/blink browsers. */
.crm-form-section .crm_input input:-webkit-autofill,
.crm-form-section .crm_input input:-webkit-autofill:hover,
.crm-form-section .crm_input input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #33475b !important;
}

.crm-form-section .crm_input input:focus {
    border-color: rgba(51, 71, 91, 0.6);
}

.crm-form-section .crm_input input[type="email"]:not(:placeholder-shown):valid,
.crm-form-section .crm_input input[type="text"]:not(:placeholder-shown):valid,
.crm-form-section .crm_input input[type="tel"]:not(:placeholder-shown):valid {
    border-color: #22c55e;
}

/* Error state — class added by crm-form.js */
.crm-form-section .crm_input input.crm_hs-input--error {
    border-color: #e53e3e;
}

/* ── Checkbox ─────────────────────────────────────────────────────────────── */
.crm-form-section .crm_hs-fieldtype-booleancheckbox label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.crm-form-section .crm_hs-input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
    border: 1.5px solid rgba(51, 71, 91, 0.3);
    background-color: #ffffff;
    transition: border-color 0.15s;
}

.crm-form-section .crm_hs-input[type="checkbox"]:checked {
    border-color: var(--psr-crm-btn-bg, #3b82f6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.crm-form-section .crm_hs-input[type="checkbox"].crm_hs-input--error {
    border-color: #e53e3e;
}

.crm-form-section .crm_hs-form-booleancheckbox-display span {
    padding-left: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
}

.crm-form-section .crm_hs-form-booleancheckbox-display span a {
    color: #fff;
    text-decoration: underline;
}

/* The <ul> that wraps each input/checkbox row — flatten its default style. */
.crm-form-section .crm_inputs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ── Submit button ────────────────────────────────────────────────────────── */
/*
   Colours come from CSS custom properties set on .crm-form-section by
   template-parts/crm-form.php (--psr-crm-btn-bg / --psr-crm-btn-color).
   Defaults match PSR primary blue when the editor leaves the ACF fields
   on their default values.
*/
.crm_hs-submit .crm_actions {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 17px 0px;
    text-align: center;
}


.crm-form-section .crm_hs-submit .crm_hs-button {
    display: block;
    width: fit-content;
    height: 47px;
    padding: 12px 32px;
    border-radius: 15px;
    background: var(--psr-crm-btn-bg, #d2042d);
    border: none;
    outline: none;
    color: var(--psr-crm-btn-color, #ffffff);
    font-family: 'Barlow', sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s ease;
    margin-top: 4px;
    margin-bottom: 12px;
}


.crm-form-section .crm_actions {
    display: flex;
    justify-content: center;
}


.crm-form-section .crm_hs-submit .crm_hs-button:hover {
    opacity: 0.9;
}

/* Loading state — class toggled by crm-form.js during submission. */
.crm-form-section .crm_hs-submit .crm_hs-button.crm_disabled-button,
.crm-form-section .crm_hs-submit .crm_hs-button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Inline error messages ────────────────────────────────────────────────── */
.crm-form-section .crm_hs-error-msgs {
    list-style: none;
    margin: 0;
    padding: 4px 0 0 0;
    text-align: left;
}

.crm-form-section .crm_hs-error-msgs .crm_hs-main-font-element {
    color: #fc8181;
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: normal;
}

/* ── Success state ────────────────────────────────────────────────────────── */
/*
   The inner DOM of .crm_submitted-message is injected by crm-form.js after
   a successful submit. Only the classes that crm-form.js actually emits are
   styled here — no orphan rules.
*/
@keyframes psr-crm-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes psr-crm-checkmark-draw {
    from {
        stroke-dashoffset: 60;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes psr-crm-circle-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    65% {
        transform: scale(1.12);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

.crm-form-section .crm_submitted-message {
    text-align: center;
    font-family: 'Barlow', sans-serif;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 219px;
    gap: 16px;
    padding: 28px 20px;
    border-radius: 12px;
    background: linear-gradient(160deg,
    rgba(59, 130, 246, 0.15) 0%,
    rgba(15, 23, 42, 0.85) 100%);
    border: 1px solid rgba(59, 130, 246, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(59, 130, 246, 0.1);
    animation: psr-crm-fade-in-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The fallback <p> rendered server-side before JS injects the rich layout. */
.crm-form-section .crm_submitted-message p {
    margin: 0;
    width: 100%;
}

.crm-form-section .crm_submitted-message__icon-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
    animation: psr-crm-circle-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.crm-form-section .crm_submitted-message__icon {
    width: 52px;
    height: 52px;
    overflow: visible;
}

.crm-form-section .crm_submitted-message__icon circle {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 2;
}

.crm-form-section .crm_submitted-message__icon polyline {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: psr-crm-checkmark-draw 0.45s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.crm-form-section .crm_submitted-message__title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0;
    background: linear-gradient(90deg, #ffffff 30%, #93c5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: psr-crm-fade-in-up 0.45s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
    opacity: 0;
}

.crm-form-section .crm_submitted-message__divider {
    width: 40px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #3b82f6, #93c5fd);
    animation: psr-crm-fade-in-up 0.4s 0.38s ease both;
    opacity: 0;
}

.crm-form-section .crm_submitted-message__sub {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    letter-spacing: 0.2px;
    animation: psr-crm-fade-in-up 0.4s 0.45s ease both;
    opacity: 0;
}

.crm-form-section .crm_submitted-message__redirect-bar-wrap {
    width: 100%;
    max-width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    overflow: hidden;
    animation: psr-crm-fade-in-up 0.4s 0.55s ease both;
    opacity: 0;
}

/* The bar element width is animated inline by crm-form.js
   (transition: width 2s linear; width: 100%) — no @keyframes needed. */
.crm-form-section .crm_submitted-message__redirect-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6 0%, #93c5fd 100%);
    border-radius: 99px;
}

/* ── Validation toast ─────────────────────────────────────────────── */

.clf-val-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    background: #1a1a2e;
    color: #fff;
    border-left: 4px solid #f5c526;
    border-radius: 8px;
    padding: 16px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 420px;
    width: calc(100% - 32px);
    font-size: 14px;
    line-height: 1.5;
    animation: clfToastIn 0.3s ease forwards;
}

.clf-val-toast-label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 15px;
    color: #f5c526;
}

.clf-val-toast-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clf-val-toast-list li {
    padding: 4px 0;
    padding-left: 16px;
    position: relative;
}

.clf-val-toast-list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: #f5c526;
}

.clf-val-toast--out {
    animation: clfToastOut 0.3s ease forwards;
}

@keyframes clfToastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes clfToastOut {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
}