<style>
/* ====== SCOPE: This Form Only ====== */
.hbspt-form form {
    --hs-gap: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--hs-gap);
    align-items: flex-start !important;
    max-width: 1200px;
}

/* Remove HubSpot's containers to make fields direct flex-items */
.hbspt-form form fieldset.form-columns-1,
.hbspt-form form fieldset.form-columns-2 {
    display: contents !important;
}

/* Dependent field (checkbox) should take full width */
.hbspt-form form .hs-dependent-field {
    flex-basis: 100%;
    margin: 0;
    padding: 0;
}

/* Default to a 2-column grid */
.hbspt-form form .hs-form-field {
    flex: 0 1 calc((100% - var(--hs-gap)) / 2); /* 2 columns */
    margin: 0;
    position: relative;
}

/* 'MESSAGE' field takes full width and is always at the end */
.hbspt-form form .hs_message {
    flex-basis: 100% !important;
    order: 999;
}

/* Submit button container */
.hbspt-form form .hs_submit {
    flex-basis: 100%;
    order: 1000;
    margin-top: 12px;
}


/* ====== Inputs / Selects / Textarea ====== */
/* Common styles for all input fields */
.hbspt-form form input.hs-input,
.hbspt-form form select.hs-input,
.hbspt-form form textarea.hs-input {
    width: 100% !important;
    background: transparent !important;
    color: #000 !important;
    border: 0 !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    /* [IMPROVEMENT] Set font-size to 16px to prevent auto-zoom on iOS */
    font-size: 16px !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

/* Align height for inputs and selects */
.hbspt-form form input.hs-input,
.hbspt-form form select.hs-input {
    height: 50px;
    box-sizing: border-box;
    padding: 22px 0 12px 0 !important;
}

/* Specific styles for textarea */
.hbspt-form form textarea.hs-input {
    min-height: 120px !important;
    resize: vertical;
    padding: 14px 0 !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word;
}

/* Hide placeholder text on select, but keep the space */
.hbspt-form form select.hs-input.is-placeholder {
    color: transparent !important;
}

/* Style for select options */
.hbspt-form form select.hs-input option {
    color: #000;
}

/* Focus state for all fields */
.hbspt-form form input.hs-input:focus,
.hbspt-form form select.hs-input:focus,
.hbspt-form form textarea.hs-input:focus {
    border-bottom-color: #000 !important;
}


/* ====== "Label as Placeholder" Effect ====== */
.hbspt-form form .hs-form-field > label {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    color: #000;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    transition: opacity .18s ease, visibility .18s ease;
    /* [FIX] Add z-index to ensure the label is on top of the field in iOS */
    z-index: 1;
}

/* Exclude checkbox labels from this effect */
.hbspt-form form .hs-fieldtype-booleancheckbox > label {
    display: none;
}

/* [FIX] Simplified and more robust rules to hide the label */
/* The label is hidden if the field is in focus OR if it has input */
.hbspt-form form .hs-form-field:focus-within > label,
.hbspt-form form .hs-form-field:has(input:not(:placeholder-shown)) > label,
.hbspt-form form .hs-form-field:has(textarea:not(:placeholder-shown)) > label,
.hbspt-form form .hs-form-field:has(select:not(.is-placeholder)) > label,
.hbspt-form form .hs-form-field:has(input:-webkit-autofill) > label {
    opacity: 0;
    visibility: hidden;
}

/* Hide label if the field has an error */
.hbspt-form form .hs-form-field:has(.hs-input.error) > label {
    display: none !important;
}


/* ====== Custom Checkbox Styling ====== */
.hbspt-form form .inputs-list {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hbspt-form form .hs-fieldtype-booleancheckbox .inputs-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hbspt-form form .hs-fieldtype-booleancheckbox input[type="checkbox"] {
    display: none;
}

.hbspt-form form .hs-fieldtype-booleancheckbox label span {
    color: #000;
    font-size: 13px;
    cursor: pointer;
}

.hbspt-form form .hs-fieldtype-booleancheckbox label span::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    background-color: transparent;
    vertical-align: middle;
    margin-right: 12px;
    transition: background-color 0.2s ease;
}

.hbspt-form form .hs-fieldtype-booleancheckbox input[type="checkbox"]:checked + span::before {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
}


/* ====== Error Messages ====== */
.hbspt-form form .hs-error-msgs {
    position: absolute;
    top: 50px;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.hbspt-form form .hs-error-msgs ul,
.hbspt-form form .hs-error-msgs li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.hbspt-form form .hs-error-msg {
    color: #ff4747 !important;
    font-size: 12px !important;
}


/* ====== Submit Button ====== */
.hbspt-form form .actions {
    width: 270px !important;
    margin: 20px auto 0 0 !important;
    padding: 0 !important;
}
.hbspt-form form .hs-button {
    width: 100% !important;
    height: 54px !important;
    line-height: 54px !important;
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-align: center;
    margin-top: 25px;
}


/* ====== Responsiveness ====== */
@media (max-width: 600px) {
    .hbspt-form form .hs-form-field {
        flex-basis: 100%; /* 1 column */
    }
}


/* Specific field override example */
.hs_i_acknowledge_that_data_packages_start_from__5_000.hs-i_acknowledge_that_data_packages_start_from__5_000.hs-fieldtype-booleancheckbox.field.hs-form-field {
    width: 50%;
    margin-top: 4px;
    margin-right: 10px;
}

/* ====== «Лейбл как плейсхолдер» (Улучшенная версия с Floating Label) ====== */
/* Этот блок полностью заменяет ваш оригинальный блок «Лейбл как плейсхолдер» */

/* Позиция лейбла по умолчанию (выглядит как плейсхолдер) */
.hbspt-form form .hs-form-field > label {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    color: #000;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    transform: translateY(-50%); /* Для более точного вертикального центрирования */
    transition: top .2s ease, font-size .2s ease, transform .2s ease, color .2s ease;
}

/* Исключаем лейбл для кастомного чекбокса, как и раньше */
.hbspt-form form .hs-fieldtype-booleancheckbox > label {
    display: none;
}

/* "Активное" состояние лейбла (когда он "всплывает") */
/* Это происходит при фокусе или когда в поле есть значение. */
.hbspt-form form .hs-form-field:focus-within > label,
.hbspt-form form .hs-form-field:has(input:not(:placeholder-shown)) > label,
.hbspt-form form .hs-form-field:has(textarea:not(:placeholder-shown)) > label,
.hbspt-form form .hs-form-field:has(select:not(.is-placeholder)) > label, /* Более надежный селектор для select */
.hbspt-form form .hs-form-field:has(input:-webkit-autofill) > label {
    top: 8px; /* Поднимаем лейбл вверх */
    font-size: 10px; /* Уменьшаем шрифт */
    transform: translateY(0); /* Сбрасываем центрирование */
}

/* Убираем правило, которое полностью скрывало лейбл при ошибке */
.hbspt-form form .hs-form-field:has(.hs-input.error) > label {
    display: block !important;
}
</style>