/* Свои формы сайта braslet24.ru (задание 4): вид — как у веб-форм Б24 «classic» (кадры 1440 и 360). */
.b24f-overlay, .b24f-overlay *, .braslet24-form-inline, .braslet24-form-inline *, .b24f-consent-overlay, .b24f-consent-overlay * {
    box-sizing: border-box;
}
.b24f-form {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000;
    background: #fff;
    text-align: left;
    font-size: 14px;
    line-height: 1.35;
}
html.b24f-lock, html.b24f-lock body { overflow: hidden; }

/* панель справа и затемнение */
.b24f-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(51, 51, 51, 0); transition: background .25s;
}
.b24f-overlay.b24f-open { background: rgba(51, 51, 51, .55); }
.b24f-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: 510px; max-width: 100%;
    background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border-bottom: 4px solid #00aeef;
    transform: translateX(100%); transition: transform .25s;
}
.b24f-overlay.b24f-open .b24f-panel { transform: none; }
@media (max-width: 600px) {
    .b24f-panel { width: 100%; }
}

/* шапка */
.b24f-head { position: relative; padding: 18px 50px 18px; border-bottom: 1px solid #e8e8e8; text-align: center; }
.b24f-title { font-size: 24px; line-height: 1.25; font-weight: 400; margin: 0 0 6px; }
.b24f-desc { font-size: 15px; color: #333; }
.b24f-close {
    position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 50%; background: #7fd6f7; cursor: pointer;
}
.b24f-close::before, .b24f-close::after {
    content: ""; position: absolute; left: 7px; top: 13px; width: 14px; height: 2px; background: #fff;
}
.b24f-close::before { transform: rotate(45deg); }
.b24f-close::after { transform: rotate(-45deg); }
.b24f-close:hover { background: #00aeef; }

/* поля */
.b24f-body { padding: 14px 30px 24px; margin: 0; }
.b24f-field { position: relative; display: block; margin: 0 0 14px; cursor: text; }
.b24f-field input, .b24f-field textarea {
    display: block; width: 100%; height: 52px; margin: 0; padding: 14px 10px 0;
    font: inherit; font-size: 16px; color: #000;
    background: rgba(0, 0, 0, .05); border: 1px solid rgba(0, 0, 0, .07); border-radius: 2px;
    outline: none; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.b24f-field textarea { height: 104px; padding-top: 22px; resize: vertical; }
.b24f-field input:focus, .b24f-field textarea:focus { background: #fff; border-color: #00aeef; }
.b24f-ph {
    position: absolute; left: 11px; top: 16px; font-size: 16px; color: #777; pointer-events: none;
    transition: top .15s, font-size .15s;
}
.b24f-ph i, .b24f-agree-text i { color: #e00; font-style: normal; }
.b24f-field input:focus + .b24f-ph, .b24f-field input:not(:placeholder-shown) + .b24f-ph,
.b24f-field textarea:focus + .b24f-ph, .b24f-field textarea:not(:placeholder-shown) + .b24f-ph {
    top: 5px; font-size: 12px;
}
.b24f-err { display: block; font-size: 12px; color: #e00; min-height: 0; margin-top: 3px; }
.b24f-err:empty { display: none; }
.b24f-bad input, .b24f-bad textarea { border-color: #e00; background: #fff4f4; }

/* ловушка: не видна и не доступна человеку */
.b24f-trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* согласие */
.b24f-agree { display: block; position: relative; padding-left: 26px; margin: 4px 0 18px; font-size: 11px; line-height: 1.3; color: #777; cursor: pointer; }
.b24f-agree input {
    position: absolute; left: 0; top: 0; width: 17px; height: 17px; margin: 0; padding: 0; cursor: pointer;
    -webkit-appearance: none; appearance: none; border: 1px solid #b8c0c7; border-radius: 2px; background: #fff;
    opacity: 1; visibility: visible; display: block;   /* стили сайта перекрашивают чекбоксы — свой вид, как у Б24 */
}
.b24f-agree input:checked {
    border-color: #1a73e8; background: #1a73e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.b24f-agree input::before, .b24f-agree input::after { display: none !important; content: none !important; }
.b24f-agree-link { color: #777; text-decoration: none; border-bottom: 1px dashed #aaa; }
.b24f-agree-link:hover { color: #00aeef; border-color: #00aeef; }
.b24f-bad .b24f-agree-text { color: #e00; }

/* кнопка */
.b24f-button {
    display: block; width: 100%; height: 52px; margin: 0; padding: 0 10px;
    font: inherit; font-size: 15px; font-weight: 700; color: #fff;
    background: #00aeef; border: 0; border-radius: 4px; cursor: pointer;
}
.b24f-button:hover { background: #009bd6; }
.b24f-button:disabled { opacity: .7; cursor: default; }
.b24f-note { margin-top: 12px; font-size: 14px; text-align: center; }
.b24f-note:empty { display: none; }
.b24f-note-fail { color: #e00; }
.b24f-note-fail a { color: #e00; font-weight: 700; white-space: nowrap; }

/* «Спасибо» */
.b24f-thanks { padding: 40px 10px 30px; text-align: center; }
.b24f-thanks-icon {
    width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: #00aeef; position: relative;
}
.b24f-thanks-icon::after {
    content: ""; position: absolute; left: 23px; top: 14px; width: 16px; height: 28px;
    border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg);
}
.b24f-thanks-title { font-size: 24px; margin-bottom: 8px; }
.b24f-thanks-text { font-size: 15px; color: #333; }

/* №11 — встроенный блок */
.braslet24-form-inline .b24f-form { border-bottom: 4px solid #00aeef; border-radius: 2px; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.braslet24-form-inline .b24f-head { padding: 16px 20px; }
.braslet24-form-inline .b24f-body { padding: 14px 20px 20px; }

/* окно с текстом согласия */
.b24f-consent-overlay { position: fixed; inset: 0; z-index: 100001; background: rgba(51, 51, 51, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.b24f-consent {
    position: relative; width: 640px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: #fff;
    padding: 24px 28px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000;
}
.b24f-consent .b24f-close { top: 10px; right: 10px; }
.b24f-consent-title { font-size: 20px; margin: 0 30px 14px 0; }
.b24f-consent-text { white-space: pre-wrap; font-size: 13px; line-height: 1.45; color: #333; }