@import "/fonts/Raleway/Raleway.css";
:root {
    --margin-deault: 8px;
    --margin-middle: 20px;
    --text-color-white: #fff;
    --bg-color-white: #fff;
    --text-color-primary: #000000;
    --text-color-heading: #111827;
    --text-color-body: #4B5563;
    --text-color-secondary: #374151;
    --text-color-placeholder: #6B7280;
    --text-color-red: #EF4444;
    --text-btn-color-secondary: #374151;

    --color-primary: #456DB1;
    --color-primary-dark: #29549F;


    --color-secondary: #527CC533;
    --color-secondary-dark: #527CC559;
    --color-border-primary:#D1D5DB;
    --color-border-active:#0072DE;
    --color-border-secondary: rgba(209, 213, 219, 0.05);
    --color-border-error: #FCA5A5;
    
    --color-purple: #7D52F4;
}

html * { max-height: 1000000px; }
* { -webkit-text-size-adjust: none; margin: 0; padding: 0; box-sizing: border-box; outline: none; }
html, body { font-family: "Raleway", Arial, sans-serif; font-size: 16px; line-height: 1.375;  color: var(--text-color-primary); width: 100%; height: 100%;}

li { list-style: none; }
img { display: block; height: auto; max-width: 100%; }
a img { border: none; }
a { text-decoration: none; color: inherit; }
input, select, button, textarea { outline: none;
    font-family: "Raleway", Arial, sans-serif; font-size: 14px;
    -moz-appearance: none;-webkit-border-radius: 0; -moz-border-radius: 0; -webkit-appearance: none;
}
input[type=file], button, input[type="submit"],
input[type=file]::-webkit-file-upload-button { cursor: pointer; }
.bg-blue {background-color: #F3F2F8}

.btn {display: inline-block; font-size: 18px; font-weight: 600; color:var(--text-color-white); padding: 10px 32px;  text-align: center; line-height: 1.5; cursor: pointer; transition: 0.2s; border: 0px solid transparent;border-radius: 12px;}
.btn.btn-small {font-size: 14px; padding: 6px 16px; border-radius: 10px;}
.btn.btn-primary{background-color: var(--color-primary);color:var(--text-color-white);
    box-shadow: 0 2px 4px 0 rgba(27, 78, 163, 0.2),0 4px 8px 0 rgba(41, 121, 255, 0.2);}
.btn.btn-primary:hover{  background-color: var(--color-primary-dark);}
.btn.btn-secondary{background-color: var(--color-secondary); color:var(--color-primary);}
.btn.btn-secondary:hover{background-color: var(--color-secondary-dark);}
.btn.btn-icon {background-repeat:  no-repeat; background-position: center; background-size: 24px;font-size: 0;padding: 24px;}
.btn.close {background-image: url("/img/icon_close.svg");}
.btn.logout {background-image: url("/img/icon_logout.svg"); }
.btn.menu {background-image: url("/img/icon_menu.svg"); border:1px solid var(--color-primary); }

.link {color: var(--color-primary);font-size: 14px; cursor: pointer; line-height: 20px;font-weight: 600; transition: 0.2s;}
.link.link-primary {color: var(--color-primary);}
.link.link-primary:hover{color: var(--color-primary-dark);}
.link:focus:not(:hover){text-shadow: 0 0 1px #29549fd1;}

.badge {font-size: 12px; line-height: 16px; font-weight: 500; color:var(--text-color-white); font-family: Inter, 'Raleway', sans-serif;background-color: var(--color-purple); padding:2px 8px;border-radius: 16px;}


h2 {font-size: 32px;font-weight: 700; color: var(--text-color-primary);}
.page-subtitle {font-size: 24px;font-weight: 400; color: var(--text-color-primary);margin-top: 36px;}
.admin-line .page-subtitle{margin-top: 0;}
/* Не меньше экрана за вычетом шапки, чтобы слайдер проектов прижимался к низу, когда контент помещается */
main {width: 100%; min-height: calc(100vh - 106px); min-height: calc(100dvh - 106px); display: flex; flex-direction: column; justify-content: space-between; }
section { min-height: 100vh !important; display: flex !important; flex-direction: column !important; height: auto !important; position: relative !important; overflow-anchor: none !important; padding-top: 40px; padding-bottom: 60px;}
html, body { height: auto !important; min-height: 100% !important; }

.container { max-width: 1360px; width: 100%; padding: 0 40px; margin: 0 auto; }


header{width: 100%; height: auto; display: block;padding: 24px 0;}
header nav {display: flex; justify-content: space-between; align-items: center;}

header nav > div {display: flex; justify-content: flex-start; align-items: center}
header nav > div:last-child {justify-content: flex-end;}
header nav > div:last-child .btn{margin-right: 12px;}
header nav > div:last-child .btn:last-child{margin-right: 0;}
header nav .main_logo{display: flex; justify-content: flex-start; align-items: center; position: relative;}
header nav .main_logo img {width: 60px; height: auto; object-position: center; object-fit: contain;}
header nav .main_logo span{font-size: 13px;  font-weight: 500; line-height: 1.5; color: #2E364A;margin-left: 6px;}
header nav .main_logo a{width: 100%; height: 100% ;display: block ; position: absolute; top:0; left:0;}
header nav  > ul{flex:  0 0 auto; display: flex; align-items: center; justify-content: space-between; }

header nav  > ul > li {flex: 1 1 auto;margin: 0 14px; position: relative; display: flex; align-items: center;}
header nav  > ul > li.with_submenu:after {content: ""; background-image: url("/img/icon_arrow_bottom.svg"); background-size: 12px auto; background-position: center; height: 24px; width: 24px;display: inline-block; background-repeat: no-repeat;}

header nav  > ul a  {font-weight: 600; color:var(--text-color-primary);font-size: 18px;transition: 0.3s; cursor: pointer;}
header nav  > ul a:hover {color:var(--color-primary);}

header nav  > ul > li > ul{display: none; background-color: var(--bg-color-white); position: absolute; top: 100%;  padding: var(--margin-deault); box-shadow: 0 0 2px 0 rgba(0,0,0,0.06), 0 6px 12px 0 rgba(17, 19, 35, 0.12); border-radius: 10px; min-width: 200px}
header nav  > ul > li > ul > li{padding:12px; }
header nav  > ul > li > ul > li > a {font-size: 15px; font-weight: 500; color: var(--text-color-primary); line-height: 1.5;}
header nav > ul > li:hover > ul, header nav > ul > li.active > ul {display: block;z-index: 50;}
header nav .btn.menu {display: none;}
.main_page_block {display: flex; align-content: center; justify-content: space-between;padding: 80px 0;}
.main_page_block .btn {border-radius: 16px; padding: 14px 32px;}
.main_page_block .left_side{max-width: 715px;padding-top: 65px;}
.main_page_block .right_side{width: 33%; flex: 0 0 auto;margin-right: 60px;}

.square_slider {position: relative;}
.square_slider:before {content: "";background-color: rgba(89, 136, 227, 0.2); filter: blur(60px);     width: 125%;height: 100%;position: absolute;top: 10%;left: -2%;border-radius: 50%;}
.square_slider .slide{  background-repeat: no-repeat; background-position: center;position: relative;}
.square_slider .slide > div {width: 335px; height: 335px; display: block;}
.square_slider .slide > div img {width: 100% ;height: 100%; object-fit: contain; object-position: center;}
.square_slider .slide > div:last-child{position: absolute; top:55px; left: 100px;}


.container.with_square_slider .right_side form {display: none;}
.form-activated .btn-form-activator {display: none;}
.form-activated .right_side form{display: block !important;}
.form-activated .right_side .square_slider {display: none;}


.main_page_block .left_side h1 {font-size: 72px;line-height: 68px;font-weight: bold; }
.main_page_block .left_side p { font-size: 24px;line-height: 1.5; color:var(--text-color-primary); font-weight: 400;margin-top: 20px;margin-bottom: 20px;}

.center_block {display: flex; justify-content: center; align-items: center; flex-direction: column;
    margin-top: 100px;}
.center_block .block_image{max-height: 175px; width: 100%; text-align: center; display: flex; justify-content: center;}
.center_block .block_image img{height: 100%; width: auto; object-fit: contain; object-position: center; display: block;}
.center_block h2 {font-size: 48px; color: var(--text-color-primary); text-align: center;margin-top: 40px; font-weight: 500;line-height: 50px;}
.center_block p{margin-top: var(--margin-deault);
    font-size: 18px;
    line-height: 28px; color:var(--text-color-body);}
.button_group .btn {text-wrap: nowrap;}
.center_block .button_group{max-width: 554px; display: flex; justify-content: space-between; align-items: center;
    margin-top: 40px;}
.center_block .button_group .btn{margin-left: 12px;display: block; flex:1 1  auto;}
.center_block .button_group .btn:first-child{margin-left: 0;}



form { display: block; background-color: var(--bg-color-white);    padding:40px;border-radius: 24px;}

.gradient_border {background-clip: padding-box; border: solid 1px transparent;
    position: relative;border-radius: 24px;}

.gradient_border:before {content: ""; position: absolute; top:0 ;left:0; right:0; bottom:0;
    z-index: -1; background: linear-gradient(50deg, #d633ff7a, #33CEFF );margin:-1px;border-radius: 24px;box-shadow: 0 1px 2px rgba(27,76,163,24) ; transition: 0.3s; opacity: 1}
.gradient_border_on_hover:before{opacity: 0}
.gradient_border_on_hover:hover:before{opacity: 1}
.container.with_square_slider .right_side form {max-width: 424px}
.form-group {margin-top: 20px;}
.form-group .error-message{display: none;}
.form-group.inline {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.form-title {color:var(--text-color-primary);font-size: 24px; font-weight: 700 ; text-align: center; width: 100%; }
.form-description {color:var(--text-color-primary);font-size: 16px; line-height: 1.5; text-align: center; width: 100%;margin-top: 20px;}
.form-error{}
.form-label { display:block; font-weight: 500;font-size: 14px;line-height: 20px;color: var(--text-color-secondary);}
.form-control {border:1px solid var(--color-border-secondary); line-height: 24px; font-size: 16px; font-weight: 400;color:var(--text-color-heading);width:100%;padding:10px 12px;margin-top: var(--margin-deault);box-shadow:0 0 2px 0 #121A2B; border-radius: 10px;}
.form-control::placeholder { color:var(--text-color-placeholder);}
.form-control:active, .form-control:focus {border-width: 1px; border-color:transparent;box-shadow: 0 0 0 3px #B3DAFF;}

.form-group.validation-error {}
.form-group.validation-error .error-message, .form-group .form-control.invalid {border-width: 2px; border-color:var(--color-border-error);box-shadow:0 0 2px 0 #121A2B;}
.form-group.validation-error .error-message, .form-group .form-control.invalid ~ .error-message{display: block}
.error-message{color:var(--text-color-red);font-size: 14px; font-weight: 400; line-height: 20px;
    margin-top: var(--margin-deault); text-align: center;}
.form-group .error-message {text-align: left;}
.form-group .checkbox{position: relative;color:var(--text-color-body);font-size: 14px; font-weight: 400; line-height: 20px;display: flex; justify-content: flex-start; align-items: center;cursor: pointer;user-select: none;
     }
.form-group .checkbox input{width:0; height: 0; position: absolute; opacity: 0; }
.form-group .checkbox input ~ i {width: 16px; height: 16px;margin-right: var(--margin-deault);border: 1px solid var(--color-border-primary); border-radius: 4px;background-color: transparent;transition:0.2s;background-position: center; background-size: 8px auto; background-repeat: no-repeat;}
.form-group .checkbox input:focus ~ i {border-color: #0072DE;}
.form-group .checkbox input:checked ~ i { background-image: url('/img/icon_checkbox.svg'); background-color: #F0F8FF;}


form .btn {width: 100%;}  
.form-footer {width: 100%;margin-top: var(--margin-middle); text-align: center;}
.form-footer p{
    font-size: 14px;}

.information_block {}
.information_block > * {width: 100%;margin-top: var(--margin-middle);}


.information_block h3{color:var(--text-color-primary);font-size: 24px; font-weight: 700 ; text-align: center; width: 100%; }
.information_block p{color:var(--text-color-primary);font-size: 16px; line-height: 1.5; text-align: center; width: 100%;margin-top: var(--margin-middle);}
.information_block .information_image {display: flex; justify-content: center;}
.information_block .information_image img{width: 100% ;height: auto; object-fit: contain; object-position: center;display: block;}
.information_block .btn {
    }

.services_list {display: flex; justify-content: flex-start; align-items: center;margin: 24px calc(0px - var(--margin-deault));  flex-wrap: wrap;}
.services_list > .service {position: relative;padding: var(--margin-middle);background-color: var(--bg-color-white);border-radius: 24px; margin: 8px; min-height: 184px; width:calc(100% / 4 - 16px); 
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);  
}
/*.services_list > .service:active:before{content: ""; border: 2px solid red;   position: absolute;top: -2px;left: -2px; right: -2px; bottom: -2px; border-radius: 24px;  background-color: var(--bg-color-white);}*/
.services_list .service:active{box-shadow: 0 0 0 3px #B3DAFF;}
.services_list > .service .service_image_box {height: 52px; width: 100%;}
.services_list > .service .service_image_box img {width: auto; height: 100%; object-position: left;object-fit: contain;}
.services_list > .service p {font-size: 18px;font-weight: 500; color:var(--text-color-primary);line-height: 1.5; text-align: left;margin-top: var(--margin-deault);}
.services_list > .service .badge {display: inline-block; margin-top: var(--margin-deault);}
.services_list > .service a{position: absolute; top:0; left: 0; width: 100%; height: 100%;}

.bottom_project_slider {position: relative; flex: none; margin-top: auto; margin-bottom: 24px; max-height: 100px; overflow: hidden;}
.bottom_project_slider:before, .bottom_project_slider:after {content: ""; height: 100%; width: 180px; top:0; bottom: 0; position: absolute; z-index: 5; pointer-events: none;}
.bottom_project_slider:before{left:0; background:linear-gradient(to right, #fff, rgba(255, 255, 255, 0.15));}
.bottom_project_slider:after{right:0; background:linear-gradient(to right, rgba(255, 255, 255, 0.15), #fff);}

.bottom_project_slider__track {display: flex; width: max-content; animation: bottom-project-slider 45s linear infinite;}
.bottom_project_slider:hover .bottom_project_slider__track, .bottom_project_slider:focus-within .bottom_project_slider__track {animation-play-state: paused;}
@keyframes bottom-project-slider {to {transform: translateX(-50%);}}
@media (prefers-reduced-motion: reduce) {
    .bottom_project_slider {overflow-x: auto;}
    .bottom_project_slider__track {animation: none;}
}

.bottom_project_slider .slide{position: relative; flex: none; height: 66px; display: flex; justify-content: flex-start; align-items: center;margin:0 46px;}
.bottom_project_slider .slide img{height: 100%; width: auto; object-position: center; object-fit: contain; display: block; flex:  0 1 auto;}
.bottom_project_slider .slide p{font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--text-color-primary);  margin-left: var(--margin-deault); white-space: nowrap;}
.bottom_project_slider .slide p:empty{display: none;}
.bottom_project_slider .slide a{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.notification{padding: 16px 48px 16px 48px; z-index: 50; display: block; position: fixed; top:24px; left:0; right:0; margin:auto;box-shadow: 0 4px 12px 0 rgba(0,0,0,0.12); background-color: #fff;border:1px solid var(--color-border-primary); border-radius: 10px;max-width: 680px; width: 100%;}
.notification:before{content:""; left: 16px; top:16px; width: 32px; height: 32px; display: block; background-size: contain;position:absolute;}

.notification.notification_success{padding-left: 60px;}
.notification.notification_success:before{ background-image: url('/img/icon_success.svg'); }
.notification.notification_warning{padding-left: 60px;}
.notification.notification_warning:before{ background-image: url('/img/icon_warning.svg'); }
.notification.notification_error{}
.notification.notification_error:before{margin-left: 60px;}

.notification h6{font-weight: 500; font-size: 18px; line-height: 20px; color:var(--text-color-heading);}
.notification p{margin-top: var(--margin-deault); font-weight: 400; font-size: 15px; line-height: 20px; color: var(--text-color-body); }

.notification .btn-small{margin-top:var(--margin-deault);}
.notification .btn.close{position: absolute; right: 16px; top:16px; width: 20px; height: 20px; cursor: pointer;padding:0;background-size: 20px; background-position: top;  }

.inline_notification { border-radius: 16px; background: #ECF1FE; padding: 14px 46px;  position: relative}
.inline_notification:after { content: ""; top: 14px; left:14px; position: absolute; background-image: url('../img/icon-info.svg'); width: 20px; height: 20px; display: block; background-position: center; background-repeat: no-repeat; background-size: contain;   }
.inline_notification  h4{font-weight: 600;font-size: 14px;line-height: 20px; color: var(--text-color-primary); }
.inline_notification  p{ font-size: 14px; font-weight: 400; color:##0E121B;margin-top: 4px; } 
.inline_notification  p.link{margin-top: 10px;  }
.inline_notification  p.link a {  font-size: 14px; font-weight: 600; border-bottom:  1px solid black;color: var(--text-color-primary);display: inline-block; line-height: 1;}

.only_mobile_br br {display: none;}
.only_mobile {display: none;}
.only_table_desktop{display: block;}
.cursor-pointer { cursor: pointer; }
.center_block p { text-align: center; }
.error-message{ display: block !important; }
.admin-line { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; margin-top: 10px; }

@media (max-width: 1440px){
    .main_page_block .left_side{max-width: 670px;}
}
@media (max-width: 1200px) {
    .services_list > .service {width: calc(100% / 3 - 16px);}
    .support_button{background-image: url("/img/icon_support.svg"); background-position: center; background-repeat: no-repeat; background-size: 24px; font-size: 0;    padding: 24px;}
    
}
@media (max-width: 1140px) {
    header nav .main_logo span {display: none;}
}
@media (max-width: 1024px){
    h2 {font-size: 24px;}
    .page-subtitle {font-size: 20px;}
    
    header nav > ul a {font-size: 15px;}
    .square_slider .slide > div {width:280px; height: 280px;}
    .main_page_block {padding-top: 36px;}
    .main_page_block .left_side {padding-top: 48px;}
    .main_page_block .left_side h1 {font-size: 64px;  }
    .main_page_block .left_side p {font-size:24px;line-height: 1.5;}
    .main_page_block .right_side {width: 44%;margin-right: 0px;}
    .services_list > .service {width: calc(100% / 2 - 16px);}
    .fz-m-12 {font-size: 12px !important;}
    .fz-m-12 a {font-size: 12px !important;}
}

@media (max-width: 768px){
    h2 {font-size: 20px;}
    
    .page-subtitle {font-size: 18px;} 
    .container {padding: 0 32px;}
    header nav .btn.menu {display: block;}
    header nav .main_logo img {max-width: 60px;}
    header nav > ul {display: none; position: fixed; top:100px;left:0; width: 100% ; bottom:0; background-color: var(--bg-color-white); z-index: 50;padding: 0 32px;}
    header nav.active > ul{display: block;}
    header nav.active .btn.menu{background-image: url("/img/icon_close.svg");}
    
    header nav  > ul > li.with_submenu:after{display: none;}
    header nav > ul > li  {padding:0;}
    header nav > ul > li > a {font-size: 40px;font-weight: 500; line-height: 1.5}
    header nav > ul > li > ul {display: block;width: 100%; background-color: transparent; box-shadow: none;min-width: 0; padding-inline: 0}
    header nav > ul > li > ul > li {padding: 0}
    header nav > ul > li > ul > li > a{font-size: 30px; }
    .main_page_block {flex-wrap: wrap;}
    
    .main_page_block .left_side {max-width: 100%; width: 100%;text-align: center;padding-top: 0;}
    .main_page_block .left_side h1{font-size:48px;line-height: 48px;}
    .main_page_block .left_side p{font-size:24px;margin-top: 16px;margin-bottom: 16px;}
    .main_page_block .right_side {max-width: 100%; width: 100%;}
    .main_page_block .right_side {margin-top: 40px    ;}
    .container.with_square_slider .right_side form {width: 100%; max-width: 100%;}
    .with_square_slider:not(.form-activated) .left_side{order:2;margin-top: 80px;}
    .with_square_slider:not(.form-activated) .right_side{order:1;margin-top: 0;    display: flex;justify-content: center;margin-left: -50px;}
    .with_square_slider:not(.form-activated) .right_side .square_slider:before{width: 146%;height: 123%;}
    .center_block h2 {font-size: 32px;line-height: 34px}
}
@media (max-width: 700px) {
    .container {padding: 0 12px;}
    .services_list {margin: 24px 0;}
    .services_list > .service {width: calc(100%);}
    main{padding-bottom: 0px;}
    header nav .main_logo span {display: block;}
    .main_page_block {
        padding-bottom: 34px;}
    .main_page_block .btn {width: 100%;}
 
   section{ padding-top: 28px;}
    .only_mobile_br br {display: block;}
    .only_mobile {display: block;}
    .only_table_desktop {display: none;}
    .page-subtitle {margin-top: 22px;}
    .center_block .button_group {flex-wrap: wrap;}
    .center_block .button_group .btn{display: block; width: 100%; flex: 0 0 auto;margin-left: 0;
        margin-bottom: 10px;}
    .center_block p {text-align: center;}
    .bottom_project_slider:before, .bottom_project_slider:after {width:50px}
    header nav > ul > li > a {font-size: 22px;}
    header nav > ul > li > ul > li > a {font-size: 18px;}
    header nav.active > ul {  padding-bottom: 50px;}
    .only_mobile.logout {background-image: none;font-size: 18px;color: white;padding: 10px 32px;position:absolute; bottom:0;left: 0;right: 0;margin: 0 32px;}
    .center_block .button_group {width: 100%;}
    
}
@media (max-width: 400px) {
    .main_page_block .left_side h1 {font-size: 36px; line-height: 40px;}
    .main_page_block .left_side p {font-size: 18px;margin-top: 12px;}
    .main_page_block .right_side form {border:0;}
    .main_page_block .right_side form:before {display: none}
    form{padding:0;}
    
    .form-description {margin-top: 16px;}
    header nav > ul > li {padding: 9px 0}
    header nav > ul > li > a {font-size: 20px;}
    header nav > ul > li > ul > li > a {font-size: 16px;}
    header nav > ul {padding: 0 12px;}
    .main_page_block .right_side {margin-top: 20px;}
}

.metrika {position:absolute; left:-9999px;}

/* Согласие на обработку персональных данных */
.pd-consent .container {display: flex; justify-content: center;}
.pd-consent__card {width: 100%; max-width: 860px; margin-top: 40px; padding: 48px; background-color: var(--bg-color-white); border-radius: 24px; box-shadow: 0 4px 24px 0 rgba(27, 76, 163, 0.08); display: flex; flex-direction: column; align-items: center; text-align: center;}
.pd-consent__card form {padding: 0; background-color: transparent; border-radius: 0; width: 100%;}
.pd-consent__card h2 {font-size: 32px; line-height: 1.25; margin-top: 32px;}
.pd-consent__text {margin-top: 12px; font-size: 18px; line-height: 1.6; color: var(--text-color-body); max-width: 640px;}
.pd-consent__text .link, .pd-consent__card .checkbox .link {font-size: inherit; line-height: inherit; font-weight: 500;}

.pd-consent__icon {width: 104px; height: 104px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex: 0 0 auto;}
.pd-consent__icon_info {color: #1A73E8; background: linear-gradient(180deg, #A9C9FF 0%, #E8F0FF 70%, rgba(255, 255, 255, 0) 100%);}
.pd-consent__icon_warning {color: #E11D48; background: radial-gradient(circle, #FFE4E6 0%, #FFF1F2 55%, rgba(255, 255, 255, 0) 72%);}
.pd-consent__icon svg {width: 24px; height: 24px; padding: 16px; box-sizing: content-box; border-radius: 50%; background-color: var(--bg-color-white); box-shadow: 0 2px 8px 0 rgba(27, 76, 163, 0.12);}

.pd-consent__card .form-group {margin-top: 32px; display: flex; justify-content: center;}
.pd-consent__card .form-group .checkbox {font-size: 16px; line-height: 24px; color: var(--text-color-primary); text-align: left; align-items: flex-start;}
.pd-consent__card .form-group .checkbox input ~ i {width: 24px; height: 24px; flex: 0 0 auto; margin-right: 12px; border-radius: 6px; background-size: 12px auto;}
.pd-consent__card .form-group .checkbox input:invalid:focus ~ i {box-shadow: 0 0 0 3px #B3DAFF;}

.pd-consent__card .button_group {display: flex; justify-content: center; gap: 24px; margin-top: 32px;}
.pd-consent__card .button_group .btn {flex: 1 1 0; max-width: 400px; width: auto; display: inline-flex; justify-content: center; align-items: center; gap: 12px;}

.btn.btn-danger-outline {background-color: transparent; color: #E11D48; border: 1px solid #E11D48; box-shadow: none;}
.btn.btn-danger-outline:hover {background-color: #FFF1F2;}
.btn.btn-arrow:after {content: ""; width: 20px; height: 20px; flex: 0 0 auto; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");}
.btn.btn-logout:after {content: ""; width: 22px; height: 22px; flex: 0 0 auto; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E11D48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4.6A8 8 0 1 0 15 19.4M10 12h11M17 8l4 4-4 4'/%3E%3C/svg%3E");}

@media (max-width: 768px) {
    .pd-consent__card {padding: 32px 20px; margin-top: 0;}
    .pd-consent__card h2 {font-size: 26px; margin-top: 24px;}
    .pd-consent__text {font-size: 16px;}
    .pd-consent__card .form-group .checkbox {font-size: 14px; line-height: 22px;}
    .pd-consent__card .button_group {flex-direction: column; gap: 12px;}
    .pd-consent__card .button_group .btn {max-width: none; width: 100%;}
}

/* Окно с документом согласия на обработку ПД */
.pd-document {width: calc(100% - 32px); max-width: 820px; max-height: min(88vh, 960px); margin: auto; padding: 0; border: none; border-radius: 24px; background-color: var(--bg-color-white); box-shadow: 0 24px 64px 0 rgba(17, 24, 39, 0.24); color: var(--text-color-primary);}
.pd-document[open] {display: flex; flex-direction: column; animation: pd-document-in 0.2s ease-out;}
.pd-document::backdrop {background-color: rgba(17, 24, 39, 0.45); backdrop-filter: blur(2px);}
@keyframes pd-document-in {from {opacity: 0; transform: translateY(12px);} to {opacity: 1; transform: none;}}

.pd-document__header {display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 32px; border-bottom: 1px solid #E5E7EB;}
.pd-document__header h3 {font-size: 22px; line-height: 1.3; font-weight: 700;}
.pd-document__close {flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 10px; background: var(--color-secondary) no-repeat center / 20px url("/img/icon_close.svg"); transition: 0.2s;}
.pd-document__close:hover {background-color: var(--color-secondary-dark);}

.pd-document__body {flex: 1 1 auto; overflow-y: auto; padding: 24px 32px; font-size: 16px; line-height: 1.6; color: var(--text-color-secondary); overscroll-behavior: contain;}
.pd-document__body p, .pd-document__body ul, .pd-document__body dl {margin-top: 10px;}
.pd-document__body h4 {margin-top: 24px; font-size: 17px; font-weight: 700; color: var(--text-color-primary); text-transform: uppercase; letter-spacing: 0.02em;}
.pd-document__body ul {padding-left: 24px;}
.pd-document__body li {list-style: disc; margin-top: 4px;}
.pd-document__body a {color: var(--color-primary); font-weight: 500;}
.pd-document__body .doc-subtitle {margin-top: 0; text-align: center; font-weight: 600; color: var(--text-color-primary);}
.pd-document__body .doc-date {font-size: 14px; color: var(--text-color-placeholder); text-align: center; margin-top: 4px;}
.pd-document__body .doc-requisites {display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; padding: 16px; border-radius: 12px; background-color: #F3F2F8;}
.pd-document__body .doc-requisites dt {font-weight: 600; color: var(--text-color-primary);}

.pd-document__footer {display: flex; justify-content: flex-end; gap: 12px; padding: 20px 32px; border-top: 1px solid #E5E7EB;}
.pd-document__footer .btn {display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px;}
.btn.btn-download:before {content: ""; width: 20px; height: 20px; flex: 0 0 auto; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23456DB1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");}

@media (max-width: 768px) {
    .pd-document {width: 100%; max-width: none; max-height: 92vh; margin: auto 0 0; border-radius: 20px 20px 0 0;}
    .pd-document__header {padding: 16px 20px;}
    .pd-document__header h3 {font-size: 18px;}
    .pd-document__body {padding: 16px 20px; font-size: 15px;}
    .pd-document__body .doc-requisites {grid-template-columns: 1fr; gap: 2px;}
    .pd-document__body .doc-requisites dd {margin-bottom: 8px;}
    .pd-document__footer {padding: 16px 20px; flex-direction: column-reverse;}
    .pd-document__footer .btn {width: 100%;}
}
