/* =========================================================
   CRM Form – styles mirrored from hsf-style.css
   Classes use crm_ prefix to avoid collision with HubSpot.
   ========================================================= */

.crm_hbspt-form {
    font-family: "Inter", sans-serif;
    color: #fff;
}

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

/* Hide labels */
.crm_hs-form-field > label {
    display: none;
}

/* Remove field spacing — gap on .crm_hs-custom-style handles it */
.crm_field {
    margin-bottom: 0;
}

.crm_actions {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

/* Email input wrapper */
.crm_hs_email .crm_input {
    position: relative;
}

.crm_hs_email .crm_input::before {
    display: none;
}

/* Email input — envelope icon */
.crm_input input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 16px 14px 40px !important;
    height: 47px;
    border-radius: 8px;
    border: 1px solid #ffffff;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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-position: 16px center;
    background-size: 16.67px 16.33px;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0;
    outline: none;
    transition: border-color 0.2s;
    vertical-align: middle;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
}

/* Tel / Phone input — telephone icon */
.crm_input input[type="tel"] {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 16px 14px 40px !important;
    height: 47px;
    border-radius: 8px;
    border: 1px solid #ffffff;
    background-color: transparent !important;
    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.40175ZM3.20354 5.85433L4.78683 4.72341C4.33789 3.75428 4.03023 2.72653 3.87273 1.66667H1.67423C1.66919 1.80527 1.66667 1.94417 1.66667 2.08333C1.66667 8.2965 6.7035 13.3333 12.9167 13.3333C13.0558 13.3333 13.1948 13.3308 13.3333 13.3258V11.1273C12.2735 10.9698 11.2457 10.6621 10.2766 10.2132L9.14567 11.7965C8.68817 11.6188 8.24633 11.4096 7.82283 11.1718L7.77442 11.1442C6.14142 10.2156 4.78445 8.85858 3.85583 7.22558L3.82828 7.17717C3.59041 6.75367 3.38128 6.31183 3.20354 5.85433Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 16.67px 13.33px;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0;
    outline: none;
    transition: border-color 0.2s;
    vertical-align: middle;
}

/* Text / Password input — same base as tel but no icon */
.crm_input input[type="text"],
.crm_input input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 16px !important;
    height: 47px;
    border-radius: 8px;
    border: 1px solid #ffffff;
    background-color: transparent !important;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0;
    outline: none;
    transition: border-color 0.2s;
    vertical-align: middle;
}

.crm_input input::placeholder {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.crm_input input:focus {
    border-color: #ffffff;
}

.crm_input input[type="email"]:not(:placeholder-shown):valid,
.crm_input input[type="text"]:not(:placeholder-shown):valid,
.crm_input input[type="tel"]:not(:placeholder-shown):valid {
    border-color: #41B37A;
    background-color: transparent;
}

.crm_input .crm_invalid,
.crm_input .crm_error,
.crm_input input.crm_hs-input--error {
    border: 1.5px solid #e53e3e !important;
}

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

.crm_hs-input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 0;
    cursor: pointer;
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    background-color: #ffffff !important;
    transition: border-color 0.15s;
}

.crm_hs-input[type="checkbox"]:checked {
    border: 2px solid #D2042D;
    background-color: #ffffff !important;
    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='%23D2042D' 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_hs-input[type="checkbox"].crm_hs-input--error {
    border: 1.5px solid #e53e3e !important;
}

.crm_hs-form-booleancheckbox-display span {
    padding-left: 10px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 1;
    color: #E3E3E3;
}

@supports (-moz-appearance: none) {
    .crm_hs-form-booleancheckbox-display span {
        font-size: 14px !important;
        display: inline-block;
        transform: scale(0.8);
        transform-origin: left top;
        line-height: 0.8;
        width: 125% !important;
        letter-spacing: -0.3px;
        word-spacing: -1px;
    }

    .crm_hs-submit .crm_hs-button {
        margin: 0;
    }

    .crm_inputs-list {
        margin: 0;
        list-style-type: none;
        padding-left: 0;
    }
}

.crm_inputs-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

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

.crm_hs-form-booleancheckbox-display .crm_hs-form-required {
    display: none;
}

/* Submit button
   Base styles use the ACF default values (radial, #D2042D → #46000E, border #F5C526).
   Dynamic overrides are injected per-page via inline <style> in crm-form.php. */
.crm_hs-submit .crm_hs-button {
    display: block;
    width: 100%;
    height: 53px;
    padding: 12px 32px;
    border-radius: 16px;
    background: radial-gradient(55.37% 390.43% at 50.31% 47.05%, #D2042D 3.37%, #D2042D 29.42%, #46000E 100%);
    border: 3px solid transparent;
    outline: 3px solid #F5C526;
    outline-offset: -3px;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-top: 7px;
    margin-bottom: 15px;
}

.crm_hs-submit .crm_hs-button:hover {
    opacity: 0.9;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    font-family: "Roboto", sans-serif !important;
    line-height: normal !important;
    text-transform: uppercase !important;
}

.crm_hs-submit .crm_hs-button.crm_disabled-button {
    cursor: default;
}

.crm_hs-submit .crm_hs-button[disabled] {
    opacity: 1 !important;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* Error messages */
.crm_hs-error-msgs,
.crm_hs-error-msgs .crm_hs-main-font-element {
    color: #e53e3e;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
    padding-top: 4px;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* ── Success state ─────────────────────────────────────────────────────── */
@keyframes crm-fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes crm-glow-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 38, 0.5),
                            0 0 0 0 rgba(245, 197, 38, 0.25); }
    50%       { box-shadow: 0 0 0 10px rgba(245, 197, 38, 0.15),
                            0 0 0 22px rgba(245, 197, 38, 0.06); }
}

@keyframes crm-bar-fill {
    from { width: 0%; }
    to   { width: 100%; }
}

.crm_submitted-message,
.crm_submitted-message.crm_hs-main-font-element {
    text-align: center !important;
    font-family: "Inter", 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: 16px;
    background: linear-gradient(160deg,
        rgba(70, 0, 14, 0.55) 0%,
        rgba(20, 0, 5, 0.75) 100%);
    border: 1px solid rgba(245, 197, 38, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(245, 197, 38, 0.12);
    animation: crm-fade-in-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Icon wrapper — holds the glow ring */
.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(245, 197, 38, 0.18) 0%, transparent 70%);
    animation: crm-circle-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               crm-glow-ring 2.4s 0.8s ease-in-out infinite;
}

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

.crm_submitted-message__icon circle {
    fill: none;
    stroke: #F5C526;
    stroke-width: 2;
}

.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: crm-checkmark-draw 0.45s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

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

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

.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: crm-fade-in-up 0.4s 0.55s ease both;
    opacity: 0;
}

.crm_submitted-message__redirect-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #D2042D 0%, #F5C526 100%);
    border-radius: 99px;
}

.crm_submitted-message p {
    text-align: center !important;
    width: 100% !important;
}

@media (max-width: 375px) {
    .crm_hs-button,
    .crm_hs-input {
        max-width: 100% !important;
    }
}