/* ============================ [ Hubspot Form CSS Start ] ============================ */

.hbspt-form {
    /* Font Family */
    --hs-font-family: "DM Sans", sans-serif;

    /* Font Sizes */
    --hs-font-size-12: 12px;
    --hs-font-size-14: 14px;
    --hs-font-size-16: 16px;
    --hs-font-size-18: 18px;
    --hs-font-size-20: 20px;
    --hs-font-size-24: 24px;
    --hs-font-size-28: 28px;
    --hs-font-size-32: 32px;
    --hs-font-size-40: 40px;

    /* Line Heights */
    --hs-line-height-heading: 1.3;
    --hs-line-height-body: 1.5;

    /* Font Weights */
    --hs-fw-400: 400;
    --hs-fw-500: 500;
    --hs-fw-600: 600;
    --hs-fw-700: 700;

    /* Brand Colors */
    --hs-color-primary: #1d4ed8;
    --hs-color-primary-hover: #163ea8;

    --hs-color-secondary: #0f172a;

    --hs-color-accent-orange: #f97316;
    --hs-color-accent-yellow: #facc15;
    --hs-color-accent-green: #65a30d;
    --hs-color-accent-red: #ef4444;

    --hs-color-text: #181818;
    --hs-color-text-light: #4c4c4c;

    --hs-color-border: #d1d5db;
    --hs-color-border-focus: #1d4ed8;

    --hs-color-bg: #ffffff;
    --hs-color-input-bg: #ffffff;

    --hs-color-error: #dc2626;
    --hs-color-success: #16a34a;

    --hs-color-black: #000000;

    /* Radius */
    --hs-radius-4: 4px;
    --hs-radius-6: 6px;
    --hs-radius-8: 8px;
    --hs-radius-12: 12px;
    --hs-radius-16: 16px;

    /* Spacing */
    --hs-space-4: 4px;
    --hs-space-6: 6px;
    --hs-space-8: 8px;
    --hs-space-12: 12px;
    --hs-space-16: 16px;
    --hs-space-20: 20px;
    --hs-space-24: 24px;
    --hs-space-32: 32px;

    /* Shadows */
    --hs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --hs-shadow-md: 0 6px 20px rgba(29, 78, 216, 0.08);

    font-family: var(--hs-font-family);
    color: var(--hs-color-text);
    max-width: 500px;
    width: 100%;
}


/* Headings */

.hbspt-form h1,
.hbspt-form h2,
.hbspt-form h3,
.hbspt-form h4,
.hbspt-form h5,
.hbspt-form h6 {
    margin: 0;

    font-family: var(--hs-font-family);
    font-weight: var(--hs-fw-700);
    line-height: var(--hs-line-height-heading);

    color: var(--hs-color-secondary);
}


.hbspt-form h1 { font-size: var(--hs-font-size-24); }
.hbspt-form h2 { font-size: var(--hs-font-size-20); }
.hbspt-form h3 { font-size: var(--hs-font-size-18); }
.hbspt-form h4 { font-size: var(--hs-font-size-16); }
.hbspt-form h5 { font-size: var(--hs-font-size-14); }
.hbspt-form h6 { font-size: var(--hs-font-size-12); }

.hbspt-form ul li { margin-block: 0; }

/* Paragraph */
.hbspt-form p {
    margin: var(--hs-space-8);

    font-size: var(--hs-font-size-16);
    font-weight: var(--hs-fw-400);
    line-height: var(--hs-line-height-body);

    color: var(--hs-color-text);
}

.hbspt-form h1 span { font-size: var(--hs-font-size-24) !important; color: var(--hs-color-secondary) !important; }
.hbspt-form p span { margin: 0; font-size: var(--hs-font-size-16) !important; line-height: var(--hs-line-height-body) !important; color: var(--hs-color-text) !important; }


/* Strong */
.hbspt-form strong { font-weight: var(--hs-fw-700); color: var(--hs-color-secondary); }

/* Anchor */
.hbspt-form a { color: var(--hs-color-primary); font-size: inherit; font-weight: var(--hs-fw-500); line-height: var(--hs-line-height-body); text-decoration: none; transition: color 0.2s ease; }
.hbspt-form a:hover { color: var(--hs-color-primary-hover); text-decoration: underline; }

/* Form */
.hbspt-form form { display: flex; flex-direction: column; gap: var(--hs-space-20); }

.hbspt-form .input { margin-right: 0 !important; }
.hbspt-form .form-columns-2 { display: flex; align-items: start; gap: var(--hs-space-16); }

/* Field Wrapper */

.hbspt-form .hs-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--hs-space-6);
    margin-bottom: 0;
}

/* Labels */

.hbspt-form label {
    font-size: var(--hs-font-size-14);
    font-weight: var(--hs-fw-600);
    color: var(--hs-color-secondary);
    line-height: 1.4;
}

.hbspt-form .hs-form-required {
    color: var(--hs-color-accent-red);
    margin-left: 2px;
}

/* Inputs */

.hbspt-form input[type="text"],
.hbspt-form input[type="email"],
.hbspt-form input[type="tel"],
.hbspt-form input[type="number"],
.hbspt-form input[type="password"],
.hbspt-form input[type="date"],
.hbspt-form textarea,
.hbspt-form select {
    width: 100%;
    min-height: 44px;

    padding: 0 16px;

    border: 1px solid var(--hs-color-border);
    border-radius: var(--hs-radius-12);

    background: var(--hs-color-input-bg);
    color: var(--hs-color-text);

    font-size: var(--hs-font-size-16);
    font-weight: var(--hs-fw-400);
    font-family: inherit;

    box-shadow: var(--hs-shadow-sm);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;

    outline: none;
}

/* Textarea */

.hbspt-form textarea {
    min-height: 140px;
    padding-top: 14px;
    resize: vertical;
}

/* Placeholder */

.hbspt-form input::placeholder,
.hbspt-form textarea::placeholder {
    color: var(--hs-color-text-light);
}

/* Focus State */

.hbspt-form input:focus,
.hbspt-form textarea:focus,
.hbspt-form select:focus {
    border-color: var(--hs-color-border-focus);

    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12);

    transform: translateY(-1px);
}

/* Checkbox & Radio */

.hbspt-form .inputs-list {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: var(--hs-space-12);
}

.hbspt-form .inputs-list label {
    display: flex;
    align-items: center;
    gap: var(--hs-space-12);

    font-size: var(--hs-font-size-14);
    font-weight: var(--hs-fw-500);

    cursor: pointer;
}

.hbspt-form input[type="checkbox"],
.hbspt-form input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;

    accent-color: var(--hs-color-primary);
    cursor: pointer;
}

/* Errors */

.hbspt-form .hs-error-msgs {
    margin: var(--hs-space-6) 0 0;
    padding: 0;
    list-style: none;
}

.hbspt-form .hs-error-msg {
    font-size: var(--hs-font-size-12);
    font-weight: var(--hs-fw-500);
    color: var(--hs-color-error);
}

.hbspt-form .error input,
.hbspt-form .error textarea,
.hbspt-form .error select {
    border-color: var(--hs-color-error);
}

/* Submit Button */

.hbspt-form .hs-submit {
    margin-top: var(--hs-space-8);
}

.hbspt-form .hs-button,
.hbspt-form input[type="submit"] {
    appearance: none;
    border: none;

    width: 100%;
    min-height: 44px;

    padding: 0 24px;

    border-radius: var(--hs-radius-12);

    background: linear-gradient(135deg,
            var(--hs-color-primary),
            #2563eb);

    color: #ffffff;

    font-size: var(--hs-font-size-16);
    font-weight: var(--hs-fw-600);
    font-family: inherit;

    cursor: pointer;

    box-shadow: var(--hs-shadow-md);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

/* Button Hover */

.hbspt-form .hs-button:hover,
.hbspt-form input[type="submit"]:hover {
    transform: translateY(-2px);

    box-shadow: 0 10px 24px rgba(29, 78, 216, 0.2);
}

/* Button Active */

.hbspt-form .hs-button:active,
.hbspt-form input[type="submit"]:active {
    transform: translateY(0);
}

/* Button Disabled */

.hbspt-form .hs-button:disabled,
.hbspt-form input[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Rich Text */

.hbspt-form .hs-richtext,
.hbspt-form .legal-consent-container {
    font-size: var(--hs-font-size-14);
    line-height: var(--hs-line-height-body);
    color: var(--hs-color-text-light);
}

.hbspt-form .legal-consent-container p { margin: 0 !important; }
.hbspt-form .legal-consent-container .hs-richtext { margin-top: var(--hs-space-12) !important; }

.hbspt-form .hs-richtext a,
.hbspt-form .legal-consent-container a {
    color: var(--hs-color-primary);
    text-decoration: none;
    font-weight: var(--hs-fw-500);
}

.hbspt-form .hs-richtext a:hover,
.hbspt-form .legal-consent-container a:hover {
    text-decoration: underline;
}

/* Success Message */

.hbspt-form .submitted-message {
    padding: var(--hs-space-20);

    border-radius: var(--hs-radius-12);

    background: rgba(101, 163, 13, 0.08);

    color: var(--hs-color-success);

    font-size: var(--hs-font-size-16);
    font-weight: var(--hs-fw-500);
}

/* Google Translate Fix */

.hbspt-form .gtx-trans-icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove Extra Spacing */

.hbspt-form .gtx-trans {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

.hbspt-form .hs-dependent-field:has(.inputs-list) { margin-top: var(--hs-space-16); }
.legal-consent-container .hs-form-booleancheckbox-display>span { margin-left: 0 !important; font-size: var(--hs-font-size-14); font-weight: var(--hs-fw-600); color: var(--hs-color-black); }
.legal-consent-container .inputs-list label { align-items: start; }

.hbspt-form form .hs-richtext span {
    font-size: 16px !important;
}

.hbspt-form form .hs-submit .hs-button {
    color: #021422;
    background: #f79321;
    border-radius: 30px;
    border: 1px solid transparent;
    padding: 16px 32px 16px 32px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.hbspt-form form .hs-submit .hs-button:hover {
    color: #f79321;
    background: transparent;
    border: 1px solid #f79321;
    box-shadow: none;
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
}

/* Responsive */

@media (max-width: 575px) {
    .hbspt-form { max-width: 100%; width: 100%; }
    .hbspt-form fieldset.form-columns-2 .hs-form-field { width: 100% !important; }
    .hbspt-form .form-columns-2 { flex-direction: column; }
}

/* ============================ [ Hubspot Form CSS End ] ============================ */