@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");*{font-family:"Montserrat", sans-serif}h1,h2,h3,h4,h5,p{margin:0}html{scroll-behavior:smooth}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#333333;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#333333}body{margin:0;width:100%;height:100%;background-color:#003c2f;background-image:url("../integrated/background.jpg");background-repeat:no-repeat;background-size:cover}.wrapper{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;box-sizing:border-box}header{background-color:#00a884;border-bottom:1px solid #008a6d}header .wrapper{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:10px 20px}header .wrapper .left{display:flex;align-items:center;gap:20px}header .wrapper .left .logo{width:100%;max-width:32px}header .wrapper .left .logo img{width:100%;height:100%;object-fit:contain}header .wrapper .left .items{display:flex;align-items:center;gap:20px}header .wrapper .left .items .item{color:#ffffff;font-size:16px;font-weight:500;text-decoration:none;cursor:pointer}header .wrapper .right button{display:flex;align-items:center;gap:10px;background:transparent;border:none;color:#ffffff;font-size:16px;font-weight:500;cursor:pointer}section .header{margin:50px 0;text-align:center;color:#00a884;font-size:40px}section .block{display:flex;justify-content:center;align-items:center;gap:100px;padding:30px;border-radius:20px;background-color:#00a88433}section .button{display:flex;align-items:center;gap:10px;font-weight:500;font-size:16px;border-radius:30px;padding:10px 30px;border:none;cursor:pointer}section .button.primary{color:#ffffff;background-color:#00a884}section.participants .items{flex-wrap:wrap}section.participants .items .item .image{width:260px;height:260px;border-radius:50%;margin:0 auto}section.participants .items .item .image img{width:100%;height:100%;object-fit:cover;border-radius:50%}section.participants .items .item h3{color:#ffffff;font-size:26px;text-align:center;margin-top:10px}section.participants .items .item p{color:#ffffff;font-size:15px;text-align:center;margin-top:10px}section.participants .items .item button{margin:15px auto 0}section.socials .items{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:100px}section.socials .items .item{width:100%;max-width:max-content;text-align:center}section.socials .items .item h3{color:#ffffff;font-size:32px}section.socials .items .item p{color:#c8c7ca;font-size:16px;margin-top:5px}section.socials .block{flex-direction:column;margin-top:50px;gap:40px}section.socials .block .items{gap:80px}section.socials .block .items .item{width:100%;max-width:300px;text-align:center}section.socials .block .items .item .image{width:100%;max-width:150px;height:150px;margin:0 auto}section.socials .block .items .item .image img{width:100%;height:100%;object-fit:contain}section.socials .block .items .item h3{font-size:28px;margin-top:10px}section.socials .block .items .item p{font-size:14px;margin-top:10px}section.questions .accordion{display:flex;flex-direction:column;gap:10px}section.questions .accordion .question{border-radius:20px;background-color:#00a88433}section.questions .accordion .question .title{padding:30px;position:relative;cursor:pointer;color:#ffffff;font-weight:600;font-size:20px;display:flex;align-items:center}section.questions .accordion .question .title::before,section.questions .accordion .question .title::after{content:"";width:24px;height:2px;background-color:#00a884;position:absolute;top:41px;right:25px;transition:.3s ease}section.questions .accordion .question .title::before{transform:rotate(0)}section.questions .accordion .question .title::after{transform:rotate(90deg)}section.questions .accordion .question .title.active::before{transform:rotate(-45deg)}section.questions .accordion .question .title.active::after{transform:rotate(45deg)}section.questions .accordion .question .text{display:none;padding:30px;background-color:#00a88433;border-radius:0 0 20px 20px;color:#ffffff;font-weight:500}footer{margin-top:50px;padding:20px;color:#c8c7ca}@media screen and (max-width: 768px){section .header{font-size:26px}section .block{padding:25px}section.participants .block{gap:50px}section.participants .items .item .image{width:200px;height:200px}section.socials .items{gap:50px !important}section.questions .accordion .question{border-radius:10px}section.questions .accordion .question .title{padding:15px;font-size:15px}section.questions .accordion .question .title:before,section.questions .accordion .question .title:after{width:15px;top:25px;right:15px}section.questions .accordion .question .title p{width:100%;max-width:90%}section.questions .accordion .question .text{border-radius:10px;padding:15px;font-size:15px}footer p{font-size:13px;text-align:center}}
.auth {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*SPINNER*/

/*SPINNER*/
.qr-container {
  position: relative;
    width: 276px;
    height: 276px;
    border-radius: 13px;
    border: 20px solid #1d3957;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.qr-loading p {
    margin-top: 10px;
    color: #666;
    font-size: 14px;
    text-align: center;
}
.imageqr {
  width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.auth-wrapper {
  display: flex;
  align-items: center;
  min-height: 90vh;
  gap: 100px;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.qr-block {
  width: 100%;
}

.code-display {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* фон */
.modal-overlay {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* окно */
.modal-window {
  width: 90%;
  max-width: 420px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 0 40px rgba(160, 100, 255, 0.4);
  color: #fff;
  animation: modalShow 0.25s ease-out;
}

@keyframes modalShow {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* крестик */
.close-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 22px;
  cursor: pointer;
}

.close-btn:hover {
  color: #fff;
}

/* код */
.code-box {
  margin: 20px 0;
  padding: 18px;
  background: #0f0f1a;
  border-radius: 12px;
  text-align: center;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
}

.verification-code {
  font-size: 26px;
  letter-spacing: 6px;
  font-weight: bold;
  color: #7cf3ff;
  font-family: Consolas, monospace;
}

/* кнопка */
.copy-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(90deg, #9b5cff, #5f9cff);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: 0.2s;
}

.copy-btn.copied {
  background: linear-gradient(90deg, #3ddc97, #1fbf75);
}


.auth-left {
  gap: 25px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  align-content: center;
  justify-content: center;
  align-items: baseline;
}

.auth-left h1 {
  font-size: 65px;
  font-weight: 700;
}

.auth-left p {
  
  max-width: 480px;
  opacity: .85;
}
.block-right {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; 
  padding: 30px;
  border-radius: 20px;
}

.auth-right {
  max-width: 480px;
  flex-direction: column;
  gap: 20px;
}

.country-select {
  position: relative;
}

.country-current {
  background: #1f0038;
  padding: 14px 20px;
  border-radius: 30px;
  cursor: pointer;
  color: #fff;
}

.country-dropdown {
  display: none;
  position: absolute;
  top: 55px;
  width: 100%;
  background: #1f0038;
  border-radius: 20px;
  overflow: hidden;
  z-index: 10;
}

.country-item {
  padding: 12px 20px;
  cursor: pointer;
  color: #fff;
}

.country-item:hover {
  background: #53156f;
}

.phone-row {
  display: flex;
  gap: 10px;
}

.phone-row input {
  background: #1f0038;
  border: none;
  border-radius: 30px;
  padding: 14px 20px;
  color: #fff;
  font-size: 16px;
}

#phone-code {
  width: 90px;
  text-align: center;
}



.qr-link {
  margin-top: 10px;
  text-align: center;
  color: #a036f7;
  cursor: pointer;
}
.phone-block {
  width: 100%;
}

.phone-block input {
  width: 100%;
  background: #1f0038;
  border: none;
  border-radius: 30px;
  padding: 14px 20px;
  color: #ffffff;
  font-size: 16px;
}

/* intl-tel-input override */
.iti {
  width: 100%;
}

.iti__country-list {
  background: #1f0038;
  color: #ffffff;
  border-radius: 15px;
}

.iti__country {
  color: #ffffff;
}

.iti__country:hover {
  background: #53156f;
}

.iti__selected-flag {
  background: transparent !important;
}

.iti__dial-code {
  color: #a036f7;
}
.country-select {
  position: relative;
}

.country-current {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1f0038;
  padding: 14px 20px;
  border-radius: 30px;
  cursor: pointer;
  color: #ffffff;
  margin-bottom: 10px;
}

.country-dropdown {
  position: absolute;
  top: 55px;
  width: 100%;
  background: #1f0038;
  border-radius: 20px;
  overflow: hidden;
  display: none;
  z-index: 20;
}

.country-search {
  width: 100%;
  padding: 12px 20px;
  border: none;
  outline: none;
  background: #53156f;
  color: #ffffff;
}

.country-search::placeholder {
  color: #c8c7ca;
}

.country-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  cursor: pointer;
  color: #ffffff;
}

/* добавлен стиль для отображения кода справа */
.country-dial {
  margin-left: auto;
  color: #1d9ce0E6;
  font-weight: 600;
  font-size: 14px;
}

/* Reset / base */
body {
    background-color: #2f0255;
    background-image: url("../img/background.jpg");
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Общая обёртка */
.wrapper.auth-wrapper {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    justify-content: center;
    max-width: 1100px;
    margin: 36px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.auth-left {
    flex: 1 1;
    min-width: 240px;
    color: #ffffff;
}
.auth-left h1 {
    font-size: 34px;
    line-height: 1.05;
    margin: 0 0 12px 0;
}
.auth-left p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 18px;
}

header {
    background-color: #a036f7;
    border-bottom: 1px solid #53008a;
}
header .wrapper .left .items .item {
    color: #ffffff;
}
header .wrapper .right button {
    color: #ffffff;
}
section .header {
    color: #a036f7;
}
section .block {
    background-color: #1f0038;
}
section .button.primary {
    color: #ffffff;
    background-color: #1d9ce0E6;
}
section.participants .items .item h3 {
    color: #ffffff;
}
section.participants .items .item p {
    color: #ffffff;
}
section.socials .items .item h3 {
    color: #ffffff;
}
section.socials .items .item p {
    color: #ffffff;
}
section.questions .accordion .question {
    background-color: #1f0038;
}
section.questions .accordion .question .title {
    color: #ffffff;
}
section.questions .accordion .question .title::before,
section.questions .accordion .question .title::after {
    background-color: #a036f7;
}
section.questions .accordion .question .text {
    background-color: #53156f;
    color: #ffffff;
}
footer {
    color: #ffffff;
}

/* Правый блок авторизации — цветной и чуть больше */
.auth-right {
    background-color: #1d3957; /* запрошенный цвет */
    padding: 28px;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(13,25,40,0.35);
    color: #ffffff;
    width: 460px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Внутренние элементы блока */
.phone-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* выбранная страна */
.country-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.02);
    color: #ffffff;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
}

/* dropdown — плотный, не прозрачный фон */
.country-dropdown {
    background: #1d3957; /* не прозрачный фон при открытии */
    border-radius: 10px;
    padding: 8px;
    max-height: 320px;
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.06);
}

/* поле поиска внутри dropdown */
.country-search {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.02);
    color: #ffffff;
    box-sizing: border-box;
    font-size: 15px;
}

/* Сделать поля прозрачными, чтобы было видно цвет блока под ними */
.auth-right input[type="tel"],
.auth-right .country-search,
.auth-right .country-current {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: #ffffff;
    padding: 12px;
    border-radius: 8px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    height: 48px;
}

/* специально для телефона: поле телефона занимает всю ширину и видимое */
.auth-right input[type="tel"] {
    background: rgba(255,255,255,0.02);
    height: 50px;
}

/* Кнопки внутри блока */
.auth-right .button.primary {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 10px;
    margin-top: 8px;
}

/* qr ссылка */
.qr-link {
    margin-top: 12px;
    color: #1d9ce0E6;
    font-size: 14px;
}

/* При фокусе — лёгкая подсветка */
.auth-right input[type="tel"]:focus,
.auth-right .country-search:focus,
.auth-right .country-current:focus {
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 6px rgba(29,57,87,0.16);
}

/* Адаптация под планшеты/мобильные устройства */
@media (max-width: 1000px) {
    .wrapper.auth-wrapper {
        gap: 18px;
        margin: 20px auto;
        max-width: 920px;
    }
    .auth-right {
        width: 420px;
        padding: 22px;
    }
    .auth-left h1 { font-size: 30px; }
}

@media (max-width: 800px) {
    .auth {
      margin-top: 90px;
      align-items: flex-start;
    }
    .wrapper.auth-wrapper {
        flex-direction: column-reverse; /* при мобильном показываем сначала форма */
        align-items: stretch;
        margin: 12px auto;
        padding: 0 14px;
        min-height:auto;
    }
    .auth-left {
        text-align: center;
        order: 2;
        padding-top: 12px;
    }
    .auth-left h1, p, button {
        text-align: center;
    }
    .auth-right {
        order: 1;
        width: 100%;
        padding: 18px;
        border-radius: 12px;
    }
    .auth-left h1 {
        font-size: 28px;
        margin-bottom: 8px;
    }
    .auth-left p { font-size: 14px; }
    .auth-right input[type="tel"],
    .auth-right .country-search,
    .auth-right .country-current {
        height: 54px;
        font-size: 16px;
    }
    .country-dropdown {
        max-height: 260px;
    }
    .auth-right .button.primary {
        font-size: 16px;
        padding: 12px;
    }
}

/* Небольшая доработка для очень маленьких экранов */
@media (max-width: 420px) {
    .auth-left h1 { font-size: 28px; }
    .auth-right { padding: 14px; }
    .country-current, .country-search { padding: 10px; }
}