:root{
    --green:        #5ac37d;   /* основная кнопка / акцент      */
    --green-dark:   #46a666;   /* info-иконка / hover            */
    --green-hover:  #4fb673;
    --text:         #36383c;   /* основной тёмный текст          */
    --muted:        #76808a;   /* хлебные крошки / вторичный      */
    --border:       #9caab8;   /* границы полей / placeholder     */
    --panel:        #f3f3f4;   /* серые плашки                    */
    --tip-success:  #dfffea;   /* фон плашки-подсказки (успех)    */
    --red:          #ef4124;   /* ошибка / обязательное поле      */
    --white:        #ffffff;
    --radius:       10px;
}

/**,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
    font-family:var(--font);
    color:var(--text);
    background:var(--white);
    font-size:20px;
    line-height:28px;
    -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }*/

/* ---------- Раскладка ---------- */

/*.page{ display:flex; flex-direction:column; gap:30px; }

.page-banner{ width:100%; }
.page-banner img{ width:100%; height:auto; }

.container{
    width:100%;
    max-width:calc(var(--container) + 280px); /* 1242 + поля по 140 */
/*margin:0 auto;
padding:0 140px;
}*/

/* контентный блок (после баннера) */
/*.content{
    display:flex;
    flex-direction:column;
    gap:80px;
    padding-bottom:82px;
}*/

/* ---------- Хлебные крошки ---------- */

/*.breadcrumbs{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:16px;
    line-height:21px;
    color:var(--muted);
}
.breadcrumbs a{ color:var(--muted); }
.breadcrumbs a:hover{ color:var(--text); }
.breadcrumbs .sep{ color:var(--muted); }*/

/* ---------- Типографика ---------- */

.h1{
    margin:0;
    font-size:38px;
    line-height:1.2;
    font-weight:400;
    color:var(--text);
}
.h2{
    margin:0;
    font-size:28px;
    line-height:34px;
    font-weight:400;
    color:var(--text);
}
.lead{
    margin:0;
    font-size:24px;
    line-height:1.2;
    color:var(--text);
}
.text{
    margin:0;
    font-size:20px;
    line-height:1.4;
    color:var(--text);
}
.text--muted{ color:var(--muted); }

/* ---------- Двухколоночная секция ---------- */

.cols{
    display:flex;
    gap:30px;
    align-items:flex-start;
}
.cols__main{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:48px;
}
.cols__aside{
    flex:0 0 500px;
    max-width:500px;
}
.cols__aside img, .cols__aside object{ width:100%; height:auto; }

.stack{ display:flex; flex-direction:column; }
.stack--24{ gap:24px; }
.stack--30{ gap:30px; }
.stack--48{ gap:48px; }

/* ---------- Плашки ---------- */

.pz-panel{
    background:var(--panel);
    border-radius:var(--radius);
    padding:30px;
}
.pz-panel--row{
    display:flex;
    gap:30px;
    align-items:flex-start;
}
.pz-panel__icon{ flex:0 0 auto; }
.pz-panel__icon img{ display:block; }

.pz-panel--mt6 {margin-top: 6px;}

/* ---------- Плашки на первой странице ---------- */

.pz-panel.pz-panel-main{
    background:var(--panel);
    border-radius:var(--radius);
    padding:30px;
}
.pz-panel.pz-panel-main.pz-panel--row{
    display:flex;
    gap:30px;
    align-items:flex-start;
}
.pz-panel.pz-panel-main .pz-panel__icon{flex:0 0 auto;}

.pz-panel.pz-panel-main .pz-panel__icon.pz-panel__icon-info {
    width: 65px;
    height: 56px;
    overflow: hidden;
}
.pz-panel.pz-panel-main .pz-panel__icon img, .pz-panel.pz-panel-main .pz-panel__icon object{
    display:block;
}

.pz-panel.pz-panel-main .pz-panel__icon.pz-panel__icon-info object {
    width: 71px;
    height: auto;
    margin-top: -6px;
}

/* ---------- Кнопки ---------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:56px;
    padding:10px 20px;
    border-radius:var(--radius);
    border:1px solid transparent;
    font-family:inherit;
    font-size:20px;
    line-height:1.4;
    cursor:pointer;
    white-space:nowrap;
    transition:background .15s, border-color .15s, color .15s;
}
.btn svg,.btn img{ width:24px; height:24px; flex:none; }

.btn--primary{ background:var(--green); color:var(--white); }
.btn--primary:hover{ background:var(--green-hover); }

.btn--outline{ background:var(--white); color:var(--text); border-color:var(--text); }
.btn--outline:hover, .btn--outline:focus{
    color:var(--text);
    border-color:var(--text);
    background:#f7f8f9;
}

.btn:disabled,.btn--disabled{ background:#cdcdcd; color:var(--white); cursor:default; pointer-events:none; border-color:transparent; }

.btn--block{ width:100%; }

/* кнопка внутри вертикального стека не должна растягиваться на всю ширину */
.stack > .btn{ align-self:flex-start; }

/* ---------- Формы ---------- */

.field{ display:flex; flex-direction:column; gap:10px; }
.field--sm{ max-width:288px; }
.field--md{ max-width:341px; }
.field--lg{ max-width:none; }
.field__label{ font-size:20px; line-height:1.4; color:var(--text); }

.field.field--lg .input {max-width:288px;}

.field-tip-box {
    display: flex;
    align-items: center;
    gap: 7px;
}

.field-tip-box .form-block__tip {
    line-height: 0;
    margin-left: 0;
}

.field-tip-box .form-block__tip .tip {
    width: 20px;
    height: 20px;
}

.field-tip-box .form-block__tip .tip.tip--sm {display: none;}

.input{
    width:100%;
    height:56px;
    padding:10px 20px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--white);
    font-family:inherit;
    font-size:20px;
    line-height:1.4;
    color:var(--text);
}
.input::placeholder{ color:var(--border); }
.input:focus{ outline:none; border-color:var(--green); }

.resend-line{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.resend-line .input{ max-width:288px; }
.resend-timer{ color:var(--muted); font-size:16px; line-height:1.3; white-space:nowrap; }

/* заполненное «неактивное» поле (серый фон) и активное (тёмная граница) */
.input--filled{
    background:var(--panel);
    color:var(--border);
}

.input.input--filled:focus,
.input.input--filled:active { outline:none; border-color:var(--border); color:var(--border);}

.input--active{ border-color:var(--text); }

.pz-spinner{
    display:inline-block; width:18px; height:18px; flex:none;
    border:4px solid var(--border);
    border-top-color:var(--green);
    border-radius:50%;
    animation:pz-spin .7s linear infinite;
}
@keyframes pz-spin{ to{ transform:rotate(360deg); } }

.els-wrap{ position:relative; display:inline-block; width:100%; max-width:288px; }
.els-wrap .input{ padding-right:44px; }                 /* место под спиннер, чтобы текст не залезал */
.els-wrap .pz-spinner{
    position:absolute;
    right:14px;
    top:calc(50% - 9px);                                  /* 9px = половина высоты 18px */
}

/* строка «поле + кнопка» */
.field-row{
    display:flex;
    gap: 20px;
    align-items:flex-end;
}
.field-row .field{ flex:1 1 auto; min-width:0; }
.field-row .btn{ flex:0 0 auto; }

.field-row.field-row__email {gap: 30px;}

.field-row.field-row__email .field,
.field-row.field-row__email .btn {flex:1 1 50% !important;}

/* равные половины: поле и кнопка по 50% (как в макете) */
.pz-panel.pz-panel-main .field-row--even > .field,
.pz-panel.pz-panel-main .field-row--even > .btn{ flex:1 1 50%; min-width:0; width:auto; max-width:none; }

.mb-show {display: none;}

/* ===========================================================
   Иконки (окраска через mask → currentColor)
   =========================================================== */
.ic{
    display:inline-block; width:24px; height:24px; flex:none;
    background-color:currentColor;
    -webkit-mask:var(--ic) center/contain no-repeat;
    mask:var(--ic) center/contain no-repeat;
}
.ic-arrow-right{ --ic:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik01IDEyaDE0Ii8+PHBhdGggZD0iTTEzIDVsNyA3LTcgNyIvPjwvc3ZnPg=="); }
.ic-chevron-down{ --ic:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg=="); }
.ic-chevron-left{ --ic:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNSAxOGwtNi02IDYtNiIvPjwvc3ZnPg=="); }
.ic-chevron-right{ --ic:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDE4bDYtNi02LTYiLz48L3N2Zz4="); }
.ic-upload{ --ic:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ii8+PHBhdGggZD0iTTE3IDhsLTUtNS01IDUiLz48cGF0aCBkPSJNMTIgM3YxMiIvPjwvc3ZnPg=="); }
.ic-x{ --ic:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xOCA2TDYgMTgiLz48cGF0aCBkPSJNNiA2bDEyIDEyIi8+PC9zdmc+"); }
.ic-copy{ --ic:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjkiIHk9IjkiIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgcng9IjIiLz48cGF0aCBkPSJNNSAxNUg0YTIgMiAwIDAgMS0yLTJWNGEyIDIgMCAwIDEgMi0yaDlhMiAyIDAgMCAxIDIgMnYxIi8+PC9zdmc+"); }
.ic-clip{ --ic:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMS40NCAxMS4wNWwtOS4xOSA5LjE5YTYgNiAwIDAgMS04LjQ5LTguNDlsOS4xOS05LjE5YTQgNCAwIDAgMSA1LjY2IDUuNjZsLTkuMiA5LjE5YTIgMiAwIDAgMS0yLjgzLTIuODNsOC40OS04LjQ4Ii8+PC9zdmc+"); }
.ic-calendar{ --ic:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiLz48cGF0aCBkPSJNMTYgMnY0Ii8+PHBhdGggZD0iTTggMnY0Ii8+PHBhdGggZD0iTTMgMTBoMTgiLz48L3N2Zz4="); }
.ic-clock{ --ic:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjkiLz48cGF0aCBkPSJNMTIgN3Y1bDMgMyIvPjwvc3ZnPg=="); }
.ic-check{ --ic:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCA2TDkgMTdsLTUtNSIvPjwvc3ZnPg=="); }
.ic-video{ --ic:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyIDhMMTYgMTJMMjIgMTZWOFoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTQgNkg0QzIuODk1NDMgNiAyIDYuODk1NDMgMiA4VjE2QzIgMTcuMTA0NiAyLjg5NTQzIDE4IDQgMThIMTRDMTUuMTA0NiAxOCAxNiAxNy4xMDQ2IDE2IDE2VjhDMTYgNi44OTU0MyAxNS4xMDQ2IDYgMTQgNloiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4="); }
.ic-menu{ --ic:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik00IDdoMTYiLz48cGF0aCBkPSJNNCAxMmgxNiIvPjxwYXRoIGQ9Ik00IDE3aDE2Ii8+PC9zdmc+"); }
.ic--green{ color:var(--green-dark); }
.ic--red{ color:var(--red); }
.ic--16{ width:16px; height:16px; }
.ic--20{ width:20px; height:20px; }

/* ---------- Плашка-подсказка (Small Tip) ---------- */
.pz-tip{
    display:flex; gap:16px; align-items:center;
    background:var(--panel); border-radius:var(--radius); padding:16px;
    font-size:20px; line-height:1.4; color:var(--text);
}
.pz-tip--success{ background:var(--panel); width: 100%; margin-top: auto;}
.pz-tip--success.pz-tip--success-d3 {background:var(--tip-success);}
.pz-tip__icon{
    flex:0 0 auto;
    width: 29px;
    height: 24px;
    overflow: hidden;
}
.pz-tip__icon img { display:block; width:29px; height:24px; }

.pz-tip__icon object{
    display:block;
    width: 31px;
    height: auto;
    margin-top: -3px;
}

/* ---------- Ссылка-акцент ---------- */
.link{ color:var(--green-dark); text-decoration:underline; text-underline-offset:2px; }
.link:hover{ color:var(--green); }

/* ---------- Кнопки: загрузка / обязательное ---------- */
.btn--upload{ background:var(--white); color:var(--text); border-color:var(--text); }
.btn--upload:hover{ background:#f7f8f9; }
.btn--required{ border-color:var(--red); }

/* ---------- Select (поле с шевроном) ---------- */
.select{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    height:56px; padding:10px 20px;
    background:var(--white); border:1px solid var(--text); border-radius:var(--radius);
    font-size:20px; line-height:28px; color:var(--text); cursor:pointer;
}
.select .ic{ color:var(--green-dark); }

/* ---------- Блок загрузки файла ---------- */
.file{ display:flex; flex-direction:column; gap:16px; }
.file__title{ font-size:20px; line-height:28px; color:var(--text); }
.file__title--required::after{ content:" *"; color:var(--red); }
.attached{ display:flex; align-items:center; gap:8px; font-size:20px; line-height:28px; color:var(--text); }
.attached .ic-clip{ color:var(--green-dark); }
.attached__remove{ color:var(--red); background:none; border:0; padding:0; cursor:pointer; display:inline-flex; }

.note{ font-size:16px; line-height:21px; color:var(--text); }

/* ---------- Код подключения ---------- */
.code-block{ display:flex; flex-direction:column; gap:4px; }
.code-value{ display:flex; align-items:center; gap:8px; }
.code-value b{ font-size:38px; line-height:1.2; font-weight:400; color:var(--text); }
.code-value .ic-copy{ color:var(--green-dark); cursor:pointer; }

.booking {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.booking__label{ font-size:16px; line-height:1.3; color:var(--muted); }
.booking__value{ font-size:38px; line-height:1.2; color:var(--text); }

/* ---------- Виджет оценки (Rate) ---------- */
.rate{
    background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
    padding:30px; display:flex; flex-direction:column; gap:30px; max-width:483px;
}
.rate__head{ display:flex; gap:24px; align-items:center; }
.rate__head img{ width:68px; height:56px; flex:none; }
.rate__head .rate__head-icon {
    width:68px;
    height:56px;
    flex:0 0 auto;
    overflow: hidden;
}
.rate__head .rate__head-icon object{
    display: block;
    width: 74px;
    height: auto;
    margin-top: -5px;
    margin-left: -4px;
}

.rate__scale{ display:flex; flex-direction:column; gap:16px; }
.rate__slots{ display:flex; gap: 10px; justify-content: center; }
.rate__slot{
    width: 76px; height:76px; border:0; background:var(--panel); border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    font-size:24px; color:var(--text); transition:background .15s; line-height: 1.4;
}
.rate__slot:hover{ background:#e7f7ee; }
.rate__legend{ display:flex; justify-content:space-between; font-size:14px; line-height:1.3; color:var(--muted); }

.rate__legend span {max-width: 104px;}

.rate__legend span:last-child {text-align: right;}

.rate__body .btn--outline:disabled {
    background:var(--white);
    color: #CDCDCD;
    border-color: #CDCDCD;
}

/* ---------- Чекбокс ---------- */
.check{ display:flex; align-items:center; gap:10px; font-size:20px; line-height:28px; color:var(--text); cursor:pointer; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
    flex:0 0 auto; width:25px; height:25px; border:1px solid var(--text); border-radius:6px;
    display:flex; align-items:center; justify-content:center;
}
.check__box::after{ content:""; width:17px; height:17px; border-radius:3px; background:var(--green-dark); opacity:0; transition:opacity .1s; }
.check input:checked + .check__box::after{ opacity:1; }

/* ---------- Календарь ---------- */
.datepick{ display:flex; flex-direction:column; gap:24px; margin-top: 30px;}
.datepick__title{ font-size:24px; line-height:1.2; color:var(--text); font-weight: bold;}
.datepick__today{ display:flex; flex-direction:column; gap:4px; }
.datepick__today small{ font-size:16px; line-height:1.3; color:var(--muted); }
.datepick__today b{ font-size:20px; line-height:1.4; font-weight:400; color:var(--text); }

.calendar{ width:499px; max-width:100%; }
.calendar__head{ display:flex; align-items:center; justify-content:space-between; height:28px; margin-bottom:1px; }
.calendar__title{ font-size:20px; line-height:1.4; color:var(--text); font-weight: bold;}
.calendar__nav{ background:none; border:0; padding:0; cursor:pointer; color:#000; display:inline-flex; }
.calendar__nav .ic{ width:24px; height:24px; }
.calendar__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.calendar__wd{ height:48px; display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1.4; color:var(--text); font-weight: bold;}
.cal-cell{
    height:48px; border:0; border-radius:4px; background:transparent;
    font-family:inherit; font-size:20px; line-height:1.4; color:var(--text);
    display:flex; align-items:center; justify-content:center; cursor:default;
}
.cal-cell--off{ background:var(--panel); color:var(--muted); }
.cal-cell--free{ background:var(--tip-success); color:var(--text); cursor:pointer; }
.cal-cell--free:hover{ background:#c8f6d9; }
.cal-cell--sel{ background:var(--green-dark); color:var(--white); cursor:pointer; }
.cal-cell--out{ opacity:.55; }                        /* день соседнего месяца — приглушённая цифра */
.cal-cell--sel.cal-cell--out{ opacity:1; }            /* выбранный — не приглушаем */

/* ===========================================================
   Мобильные экраны (отдельные файлы, ширина фрейма 402px)
   =========================================================== */
.m-body{ background:var(--white); }
.mheader{
    display:flex; align-items:stretch; height:62px;
    box-shadow:0 2px 8px rgba(0,0,0,.08); position:sticky; top:0; background:var(--white); z-index:10;
}
.mheader__burger{
    flex:0 0 62px; width:62px; border:0; cursor:pointer;
    background:#ffb300; color:#fff;
    display:flex; align-items:center; justify-content:center;
}
.mheader__burger .ic{ width:24px; height:24px; }
.mheader__logo{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
.mheader__logo img{ height:40px; width:auto; }

.mcontent{
    max-width:480px; margin:0 auto; padding:20px;
    display:flex; flex-direction:column; gap:20px;
}
.mcontent .h1{ font-size:30px; line-height:36px; }
.mcontent .lead{ font-size:20px; line-height:26px; }
.mcontent .pz-panel{ padding:20px; }
.mcontent .pz-panel--row{ flex-direction:row; gap:16px; }
.mcontent .field--sm,.mcontent .field--md{ max-width:none; }
.mcontent .field-row{ flex-direction:column; align-items:stretch; gap:16px; }
.mcontent .field-row .btn{ width:100%; }
.mcontent .stack > .btn,.mcontent .btn{ width:100%; }
.mcontent .calendar{ width:100%; }
.mcontent .calendar__wd,.mcontent .cal-cell{ font-size:16px; }

/* поле и кнопка равными половинами (блок «Перейти к видеозвонку») */
.field-row--even{ align-items:flex-end; }
.field-row--even .field{ flex:1 1 0; min-width:0; }
.field-row--even .btn{ flex:1 1 0; }

/* неактивная стрелка навигации календаря */
.calendar__nav:disabled{ opacity:.28; cursor:default; }

/* --- состояние ошибки поля и скрытие flex-блоков --- */
[hidden]{ display:none !important; }
.input--error{ border-color:var(--red); }
.field__error{ font-size:16px; line-height:21px; color:var(--red); }

/* ---------- Автоподсказки адреса (DaData) ---------- */
.suggest-wrap{ position:relative; }
.suggest{
    position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
    background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:0 10px 28px rgba(54,56,60,.12); overflow:hidden auto; max-height:320px;
}
.suggest__item{
    padding:12px 20px; font-size:18px; line-height:24px; color:var(--text); cursor:pointer;
}
.suggest__item + .suggest__item{ border-top:1px solid #eef0f2; }
.suggest__item:hover,
.suggest__item--active{ background:var(--tip-success); }
.suggest__empty{ padding:12px 20px; font-size:16px; line-height:21px; color:var(--muted); }

/* ---------- Дата + время рядом ---------- */
.booking-grid{ display:flex; gap:30px; align-items:stretch; flex-wrap:wrap; }
.booking-grid .calendar{ flex:0 0 auto; }
/* правая колонка: время + подтверждение + кнопка */
.booking-col{ flex:1 1 380px; min-width:280px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }

/* ---------- Слоты времени (SelectedDateApi) ----------
   !important и сброс маркеров li — чтобы глобальный CSS сайта
   (стили ul/li, тире-маркеры) не ломал сетку. */
.timeslots{
    list-style:none !important;
    margin:0 !important; padding:0 !important;
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)) !important;
    gap:12px !important;
    align-content:flex-start;
}
.timeslots li{
    list-style:none !important;
    margin:0 !important; padding:0 !important;
    display:block !important;
}
.timeslots li::before,
.timeslots li::after{ content:none !important; display:none !important; }
.timeslots li::marker{ content:"" !important; }
.timeslots li a{
    display:flex !important; align-items:center; justify-content:center;
    height:44px; border-radius:8px;
    background:var(--tip-success) !important; color:var(--text) !important;
    font-size:20px; line-height:1.4; text-decoration:none !important; cursor:pointer;
    transition:background .15s, color .15s;
}
.timeslots li a:hover{ background:#c8f6d9 !important; }
.timeslots li.is-selected a{ background:var(--green-dark) !important; color:#fff !important; }
.timeslots li.deActivate a{ background:var(--panel) !important; color:var(--muted) !important; cursor:default; pointer-events:none; }
.timeslots__empty{ grid-column:1 / -1; color:var(--muted); font-size:16px; line-height:22px; }

/* кнопка «Отправить заявку» — по контенту, не на всю ширину */
.datepick [data-booking-submit]{ align-self:flex-start; width:auto !important; }

/* ---------- Оценка: состояния выбора (по Figma) ---------- */
.rate__body{ display:flex; flex-direction:column; gap:30px; }
.rate__slot.is-selected{ color:#fff !important; font-weight:600; }
.rate__slot.sel-red{ background:#ef4124 !important; }
.rate__slot.sel-yellow{ background:#FBBA00 !important; }
.rate__slot.sel-green{ background:#46a666 !important; }
.rate__comment{ display:flex; flex-direction:column; gap:10px; }
.rate__comment label{ font-size:20px; line-height:1.4; color:var(--text); }
.rate__textarea{ height:auto; min-height:96px; padding:12px 20px; line-height:1.4; resize:vertical; }

/* ===========================================================
   Тема обращения — список документов
   =========================================================== */
.docs-list{ display:flex; flex-direction:column; gap:8px; }
.docs-list__item{ font-size: 20px; line-height: 1.4; color:var(--text); }
.docs-list__num{ color:var(--text); }                      /* номер документа */
.docs-list__req{ color:var(--red); font-weight:700; }      /* звёздочка обязательного документа */
.docs-list__empty{ font-size:15px; line-height:1.5; color:var(--muted); }

/* ===========================================================
   Кастомный выпадающий список темы (как в Figma, компактно)
   Нативный <select> скрыт и служит источником данных.
   =========================================================== */
.pz-select{ position:relative; width:100%; font-family:inherit; }
.pz-select__native{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }

.pz-select__trigger{
    -webkit-appearance:none; appearance:none;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; min-height:56px; padding:12px 18px;
    border:1px solid var(--text); border-radius:var(--radius);
    background:var(--white);
    color:var(--text);
    font-family:inherit; font-size:20px; line-height:1.4; text-align:left; cursor:pointer;
}
.pz-select.is-open .pz-select__trigger{ border-color:var(--green); }
.pz-select__trigger--placeholder .pz-select__label{ color:var(--text); }
.pz-select__label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pz-select__chev{
    flex:0 0 auto; width:9px; height:9px; margin-top:-4px;
    border-right:2px solid var(--green-dark); border-bottom:2px solid var(--green-dark);
    transform:rotate(45deg); transition:transform .18s ease;
}
.pz-select.is-open .pz-select__chev{ transform:rotate(-135deg); margin-top:2px; }

.pz-select__panel{
    position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:1000;
    max-height:340px; overflow-y:auto;
    background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:0 12px 32px rgba(0,0,0,.12); padding:6px 0;
    /* тонкий кастомный скроллбар, чтобы не залезал на скруглённые углы */
    scrollbar-width:thin; scrollbar-color:#c7ced6 transparent;
}
.pz-select__panel::-webkit-scrollbar{ width:8px; }
.pz-select__panel::-webkit-scrollbar-button{ display:none; height:0; width:0; }   /* убрать стрелки */
.pz-select__panel::-webkit-scrollbar-track{ background:transparent; margin:10px 0; } /* отступ от углов */
.pz-select__panel::-webkit-scrollbar-thumb{
    background:#c7ced6; border-radius:8px;
    border:2px solid transparent; background-clip:padding-box;
}
.pz-select__group{ padding:10px 18px 4px; font-size:15px; font-weight:700; line-height:1.35; color:var(--text); }
.pz-select__opt{ padding:8px 18px; font-size:15px; line-height:1.4; color:var(--text); cursor:pointer; }
.pz-select__opt--sub{ padding-left:34px; }
.pz-select__opt:hover, .pz-select__opt.is-active{ background:var(--panel); }

/* ===========================================================
   Копирование кода подключения — всплывающий бабл
   =========================================================== */
.code-value{ position:relative; align-self:flex-start; } /* сжать по содержимому — бабл встаёт вплотную к иконке */
.copy-bubble{
    position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(-6px);
    background:var(--text); color:var(--white);
    font-size:13px; line-height:1; white-space:nowrap;
    padding:8px 11px; border-radius:8px;
    opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:5;
}
.copy-bubble::before{
    content:""; position:absolute; right:100%; top:50%; transform:translateY(-50%);
    border:5px solid transparent; border-right-color:var(--text);
}
.copy-bubble.is-show{ opacity:1; transform:translateY(-50%) translateX(0); }

.mt80 {margin-top: 80px;}

/* ===========================================================
   Адаптив: планшет / мобильные экраны (Figma mobile = 402px)
   =========================================================== */

@media (max-width:1024px){
    .cols{ flex-direction:column; }
    .cols__aside{ flex:0 0 auto; max-width:100%; align-self:center; }

    .cols__aside.cols__aside-mb-hide {display: none;}

    .cols__main.cols__main-d2 {width: 100%;}

    .cols__main.cols__main-d2 .stack.stack--30 {
        width: 100%;
        max-width: none !important;
    }
}

@media (max-width:640px){
    .h1{ font-size:28px;}
    .cols__main {
        width: 100%;
        gap: 30px;
    }
    .lead{ font-size:16px; line-height:1.4; }
    .text,.field__label,.input,.btn{ font-size:16px; line-height:1.4; }
    .stack--30, .cols__main--20 {gap: 20px;}
    .pz-panel{ padding:20px; }
    .pz-panel--row{ flex-direction:column; gap:16px; }
    .pz-panel.pz-panel-main { padding:20px; }
    .pz-panel.pz-panel-main.pz-panel--row{
        flex-direction:row;
        gap:20px;
    }
    .field-row{ flex-direction:column; align-items:stretch; gap:16px; }
    .field-row .btn{ width:100%; }

    .pz-panel.pz-panel-main .pz-panel__icon.pz-panel__icon-info {
        width: 27px;
        height: 24px;
    }

    .pz-panel.pz-panel-main .pz-panel__icon.pz-panel__icon-info object {
        width: 30px;
        margin-top: -2px;
    }

    .stack.stack--24 {width: calc(100% - 47px);}

    .btn.btn--primary {
        width: 100% !important;
        line-height: 1.4;
    }

    .pz-panel.pz-panel-main .btn.btn--primary {line-height: 1.2;}

    .mb-show {display: block;}

    .cols__aside.cols__aside-sm-hide {display: none;}

    .pz-panel.pz-panel-main.stack.stack--30 {
        padding: 30px;
        gap: 30px;
    }

    .pz-panel.pz-panel-main .field-row--even > .btn{ flex:1 1 auto;}

    .field.field--sm,
    .field.field--lg,
    .field.field--lg .input {
        width: 100%;
        max-width: none;
    }

    .copy-bubble{
        left:auto; right:0; top:auto; bottom:calc(100% + 8px);
        transform:translateY(-4px);
    }
    .copy-bubble.is-show{ transform:translateY(0); }
    .copy-bubble::before{ display:none; }

    .booking-grid {gap: 24px;}

    .datepick {margin-top: 20px;}

    .datepick__title {font-size: 18px;}

    .datepick__today small,
    .booking__label {font-size: 14px;}

    .datepick__today b,
    .calendar__title,
    .calendar__wd,
    .cal-cell,
    .pz-tip,
    .timeslots li a,
    .pz-select__label,
    .docs-list__item,
    .rate__comment label {font-size: 16px;}

    .calendar__head {height: 24px;}

    .calendar__wd,
    .cal-cell {height: 42px;}

    .timeslots {
        gap: 8px !important;
        grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)) !important;
    }

    .timeslots li a {height: 38px;}

    .pz-tip--success {margin-top: 20px;}

    .pz-tip--success.pz-tip--success-d3 {margin-top: 0;}

    .field-row.field-row__email {gap: 10px;}

    .field-row.field-row__email .btn {
        flex: 1 1 auto !important;
        max-width: none !important;
    }

    /*.field-row.field-row__email + .pz-tip.pz-tip--success.pz-tip--success-d3 {margin-top: -10px;}*/

    .mt80 {margin-top: 50px;}

    .stack--30.stack--sm30 {gap: 30px;}

    .docs-list {gap: 4px;}

    .rate {
        padding: 20px;
        gap: 20px;
    }

    .rate__body {gap: 20px;}

    .rate__slots {gap: 5.5px;}

    .rate__slot {
        width: calc(20% - 2.75px);
        height: auto;
        aspect-ratio: 1 / 1;
        font-size: 16px;
    }

    .field-tip-box .form-block__tip .tip.tip--lg {display: none;}

    .field-tip-box .form-block__tip .tip.tip--sm {display: block;}

    .resend-line .input {max-width: none;}

    .els-wrap {max-width: none;}

    .resend-line .btn.btn--outline {width: 100%;}
}

@media (max-width:415px){

    .datepick .btn.btn--outline {padding: 10px;}

}

@media (max-width:370px){

    .datepick .btn.btn--outline {font-size: 14px;}

}

@media (max-width:320px){

    .datepick .btn.btn--outline {
        font-size: 13px;
        gap: 5px;
    }

    .datepick .btn.btn--outline .ic.ic-arrow-right {
        width: 20px;
        height: 20px;
    }

}