/* Campaign Monitor embeds: same dimensions and states as Gravity Forms. */
body .js-cm-form {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    font: inherit;
}

body .js-cm-form > div {
    display: grid;
    gap: 2rem;
}

body .js-cm-form :is(div, p):has(> input[placeholder]) {
    position: relative;
    min-width: 0;
}

body .js-cm-form input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="file"]),
body .js-cm-form textarea,
body .js-cm-form select {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    border: 0.1rem solid rgba(0, 0, 0, 0.2);
    border-radius: 2.5rem;
    padding: 1.5rem 2rem 0.3rem;
    background-color: #fff;
    color: #3b3b3b;
    font: 400 2rem/1.5 'Alegreya Sans', sans-serif;
}

/* Use the same floating label positions as gf_animate_label / gf_focus_label.
   Only hide placeholders when there is a real label in the field wrapper. */
body .js-cm-form :is(div, p):has(> input[placeholder]) > label {
    position: absolute;
    inset: 0 auto auto 0;
    margin: 0;
    padding: 1rem 2rem 0;
    color: #3b3b3b;
    font-size: 2rem;
    font-weight: 400;
    line-height: 3rem;
    cursor: text;
}

body .js-cm-form :is(div, p):has(> label) > input[placeholder]::placeholder {
    color: transparent;
}

body .js-cm-form :is(div, p):has(> input[placeholder]:focus) > label,
body .js-cm-form :is(div, p):has(> input[placeholder]:not(:placeholder-shown)) > label {
    top: -1rem;
    color: rgba(0, 0, 0, 0.6);
    font-size: 1.2rem;
}

body .js-cm-form :is(div, p):has(> input:is([type="checkbox"], [type="radio"])) {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

/* Keep native inputs focusable, while matching GF's outlined choice icons. */
body .js-cm-form input:is([type="checkbox"], [type="radio"]) {
    appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    inline-size: 1.8rem;
    block-size: 1.8rem;
    margin: 0.6rem 0 0;
    border: 0.1rem solid #aaa;
    border-radius: 0.2rem;
    background: #fff;
    cursor: pointer;
}

body .js-cm-form input[type="checkbox"]:checked {
    border-color: var(--paars, #34019b);
    background: var(--paars, #34019b) center / 80% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

body .js-cm-form input[type="radio"] {
    border-radius: 50%;
}

body .js-cm-form input[type="radio"]:checked {
    border-color: var(--paars, #34019b);
    background: radial-gradient(var(--paars, #34019b) 45%, #fff 50%);
}

body .js-cm-form input:is([type="checkbox"], [type="radio"]) + label {
    margin: 0 0 0.5rem;
    color: #3b3b3b;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

body .js-cm-form p:has(> #cm-privacy-consent-hidden) {
    display: none;
}

body .js-cm-form > p {
    margin: 2rem 0 0;
}

body .js-cm-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin: 0;
    border: 0.2rem solid var(--roze, #d2007f);
    border-radius: 5rem;
    padding: 1.1rem 3rem;
    background-color: var(--roze, #d2007f);
    color: #fff;
    font: 500 2rem/normal 'Barlow', sans-serif;
    cursor: pointer;
    transition: 0.3s color, 0.3s background-color, 0.3s border-color;
}

body .js-cm-form button[type="submit"]::after {
    content: "\f178";
    color: #fff;
    font: 400 1.9rem "Font Awesome 6 Pro";
    margin-left: 1rem;
    transition: transform 0.3s;
}

body .js-cm-form button[type="submit"]:hover::after {
    transform: translateX(0.5rem);
}

body .js-cm-form :is(input, textarea, select):focus {
    outline: #0082bc auto 1px;
}

body .js-cm-form button:focus-visible {
    outline: 2px solid #0082bc;
    outline-offset: 3px;
}

body .js-cm-form :is(input, textarea, select):user-invalid {
    border-color: #d81919;
}

/* Hide the exported embed heading without hiding provider feedback. */
body .last-no-margin > div:has(.js-cm-form) > span:first-child,
body .last-no-margin > div:has(.js-cm-form) h1:empty {
    display: none;
}

@media (max-width:767px) {
    body .js-cm-form button[type="submit"] {
        font-size: 1.8rem;
    }
}

body .js-cm-form :is(div, p):has(> input[required][placeholder]) > label::after {
    content: "*";
    color: #c02b0a;
    font-size: 1.3rem;
    margin-left: 0.3rem;
}