@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;	
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #b1e3fa;
  background-image: url("img/background.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  padding: 0 10px;
}
.wrapper{
  background: #fff;
  padding: 20px;
  width: 900px;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);	
    margin-bottom: 20px; /* Отступ снизу, чтобы .service-cards был ниже */
}
::selection{
  background: rgba(23,162,184,0.3);
}
.wrapper form{
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
}
form .url-icon{
  position: absolute;
  width: 50px;
  text-align: center;
  font-size: 23px;
  color: #c4c4c4;
  pointer-events: none;
}
form input:valid ~ .url-icon{
  color: #02aee3;
}
form input{
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 10% 0 45px;
  font-size: 20px;
  caret-color: #02aee3;
  border: 2px solid #ddd;
  border-radius: 5px;
  transition: all 0.1s ease;
}
form input:valid{
  border-color: #02aee3;
}
form input::placeholder{
  color: #c4c4c4;
}
form input:focus::placeholder{
  color: #d9d9d9;
}
form button{
  position: absolute;
  right: 6px;
  padding: 5px 15px;
  font-size: 18px;
  border-radius: 5px;
  border: none;
  outline: none;
  background: #02aee3;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.buttonContainer {
  display: flex;
  flex-direction: column;
  /*justify-content: space-between; /* Размещает кнопки с равным пространством между ними */
 /* gap: 2%; /* Дополнительно добавляет пространство между кнопками */
  width: 100%;
  padding: 10px; /* Добавляет отступы вокруг кнопок */
  box-sizing: border-box; /* Учитывает padding и ширину в общей ширине контейнера */
}

.buttonDonate {
  flex: 1 1 30%; /* Каждая кнопка занимает 30% ширины контейнера */
  max-width: 30%; /* Ограничивает ширину кнопок до 30% */
  padding: 5px 15px;
  font-size: 18px;
  border-radius: 5px;
  border: none;
  outline: none;
  background: #02aee3;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}
form button:hover{
  background: #1fada6;
}
.wrapper form button{
  opacity: 0;
  pointer-events: none;
}
.wrapper form input:valid ~ button{
  opacity: 1;
  pointer-events: auto;
}
.wrapper a{
  color: #000;
}

.wrapper .statistics{
  margin: 20px 0;
  display: flex;
  padding-right: 5px;
  align-items: center;
  justify-content: space-between;
}
.statistics span{
  font-size: 17px;
}
.statistics span span{
  font-weight: 500;
}
.statistics a:hover{
  color: #02aee3;
}

.wrapper .urls-area{
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 5px;
  max-height: 400px;
  overflow-y: scroll;
}
.urls-area::-webkit-scrollbar{
  width: 0px;
}
.urls-area :is(.title, .data){
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.urls-area li{
  width: 100%;
  list-style: none;
  border-right: 1px solid #ddd;
}
.urls-area li:last-child{
  border-right: 0px;
}
.urls-area .title li{
  text-align: center;
  background: #f2f2f2;
  padding: 10px 0;
}
.urls-area .data li{
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all;
}
.urls-area .data li:last-child a{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.urls-area .data li a:hover{
  color: #02aee3;
  text-decoration: underline;
}
.urls-area .data li:last-child a:hover{
  text-decoration: none;
}
.urls-area .data:nth-child(odd){
  background: #f2f2f2;
}
.urls-area li:nth-child(1){
  max-width: 6%;
}
.urls-area li:nth-child(2){
  max-width: 30%;
}
.urls-area li:nth-child(3){
  max-width: 40%;
}
.urls-area li:nth-child(4){
  max-width: 16%;
}

.blur-effect{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(2px);
  background: rgba(0,0,0,0.01);
  display: none;
}
.popup-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #fff;
  padding: 25px;
  max-width: 480px;
  width: 100%;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
}
.popup-box.show{
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.popup-box .info-box{
  color: #0f5753;
  background: #bef4f1;
  border: 1px solid #7de8e3;
  padding: 10px;
  text-align: center;
  font-size: 17px;
  border-radius: 5px;
}
.popup-box .info-box.error{
  color: #721c24;
  background: #f8d7da;
  border-color: #f5c6cb;
}
.popup-box form{
  margin-top: 10px;
  position: relative;
}
.popup-box form label{
  font-size: 18px;
}
.popup-box form .copy-icon{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-100%);
  font-size: 20px;
  cursor: pointer;
}
.copy-icon:hover{
  color: #02aee3;
}
.popup-box form input{
  height: 45px;
  padding: 0 35px 0 15px;
  margin-top: 3px;
  border: 1px solid #ccc;
}
.popup-box form input:focus{
  border-color: #02aee3;
}
.popup-box form button{
  width: 100%;
  height: 45px;
  position: relative;
  right: 0;
  font-size: 20px;
  margin-top: 10px;
}






	
/* Модальный (фон) */
.modalb2a {
  display: none; /* Скрыто по умолчанию */
  position: fixed; /* Оставаться на месте */
  z-index: 1; /* Сидеть на вершине */
  padding-top: 100px; /* Расположение коробки */
  left: 0;
  top: 0;
  width: 100%; /* Полная ширина */
  height: 100%; /* Полная высота */
  overflow: auto; /* Включите прокрутку, если это необходимо */
  background-color: rgb(0,0,0); /* Цвет запасной вариант  */
  background-color: rgba(0,0,0,0.4); /*Черный с непрозрачностью */
}

/* Модальное содержание */
.modal-contentb2a {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Добавить анимацию */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* Кнопка закрытия */
.closeb2a {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeb2a:hover,
.closeb2a:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-headerb2a {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-bodyb2a {padding: 2px 16px;}

.modal-footerb2a {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

        /* Общие стили для контейнера карточек */
.containerCards {
	border-radius: 7px;
    display: flex;	
    background: #b1e3fa;
    flex-direction: column; /* Выстраивает блоки по вертикали */
    gap: 20px; /* Отступы между блоками */
}
.service-cards {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    padding: 20px;
}


        /* Стили для каждой карточки */

        .card {
            background-color: #ffffff;
            border-radius: 10px;
            width: 250px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }

        /* Стили для содержимого карточки */
        .card-content {
            padding: 10px;
            text-align: center;
        }

        .card h3 {
            font-size: 1.2em;
            color: #007BFF; /* Синий цвет для заголовков */
            margin-bottom: 10px;
        }

        .card h2 {
            font-size: 1.5em;
            color: red; /* Синий цвет для заголовков */
            margin-bottom: 10px;
        }

        .card p {
            font-size: 0.8em;
            color: #333;
        }

        /* Стили для ссылок */
        .card a {
            display: block;
            text-decoration: none;
            color: inherit;
        }

/* qr code brand style */
#qrcode {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

#qr-code-canvas {
    display: block;
    margin: 0 auto;
    border: 1px solid #ccc; /* Опционально: рамка вокруг QR-кода */
}

/* login page */

.regwrapper{
  background: #fff;
  padding: 20px;
  width: 900px;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);	
    margin-bottom: 20px; /* Отступ снизу, чтобы .service-cards был ниже */
}
.logwrapper{
  background: #fff;
  padding: 20px;
  width: 400px;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);	
    margin-bottom: 20px; /* Отступ снизу, чтобы .service-cards был ниже */
}
.logwrapper form{
    display: flex;	
    flex-direction: column; /* Выстраивает блоки по вертикали */
    gap: 5px; /* Отступы между блоками */
}
.logbutton{
  background: #02aee3;
  color: #fff;
  width: 400px;
  cursor: pointer;
  transition: all 0.3s ease;
}



.donation-banner {
    /* Если у вашей синей полосы уже есть фон и отступы, background и padding можно убрать */
    background-color: #b5e0f5; 
    border-radius: 6px;
    padding: 12px 15px;
    font-family: inherit;
    color: #1a4f76;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
  }
  
  .donation-banner strong {
    font-size: 15px;
    color: #0d3859;
  }

  .donation-progress-container {
    max-width: 350px;
    margin: 8px auto 4px;
  }

  .donation-progress-bar {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    height: 10px;
    width: 100%;
    overflow: hidden;
  }

  .donation-progress-fill {
    background-color: #3b8cc6;
    height: 100%;
    width: 100%; /* 11210 от 22420 это ровно 50% */
    border-radius: 10px;
  }

  .donation-progress-text {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
  }

  .donation-kaspi {
    margin-top: 8px;
    font-size: 13px;
  }
  
  .donation-bonus {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 2px 8px;
    border-radius: 12px;
  }


/* Контейнер для позиционирования в правом верхнем углу */
.top-right-nav {
    position: absolute;
    top: 20px;
    right: 30px;
    font-family: inherit;
    z-index: 100;
  }

  .dropdown-teacher {
    position: relative;
    display: inline-block;
  }

  /* Идеальный невидимый мостик для курсора, не ломающий верстку */
  .dropdown-teacher::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px; 
    background: transparent;
  }

  .dropbtn-teacher {
    background-color: white;
    color: #3b8cc6;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s, background-color 0.2s;
  }

  /* Кнопка остается "нажатой" (подсвеченной), пока открыто меню */
  .dropbtn-teacher:hover, .dropdown-teacher:hover .dropbtn-teacher {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    background-color: #fafafa;
  }

  .dropdown-content-teacher {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px); /* Возвращаем красивый зазор */
    background-color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    white-space: nowrap; /* 🔥 Главный фикс: меню само расширится под любой длинный текст */
  }

  .dropdown-content-teacher a {
    color: #1a4f76;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s, color 0.2s;
  }

  .dropdown-content-teacher a:last-child {
    border-bottom: none;
  }

  .dropdown-content-teacher a:hover {
    background-color: #f1f8fc;
    color: #3b8cc6;
  }

  .dropdown-teacher:hover .dropdown-content-teacher {
    display: block;
  }



       /* Container for the background text blocks */
        .bg-text-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Let clicks pass through the text to the app below */
            z-index: 1;
        }

        /* 1. Top Block - Biggest text size, centered, avoids top-right */
        .block-top {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            font-size: 24px;
            line-height: 1.5;
            width: 60%;
            max-width: 800px;
        }
        
        .block-top h1 {
            font-size: 32px;
            font-weight: 600;
            margin: 0 0 15px 0;
            color: #000; /* Darker heading to match the design */
        }

        /* 2. Left Block - Second biggest text size, right-aligned */
        .block-left {
            position: absolute;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
            text-align: right;
            font-size: 20px;
            line-height: 1.6;
            width: calc(40% - 330px); /* Leave room for center content */
            padding-right: 20px;
        }

        /* 3. Right Block - Third biggest text size, center-aligned, stays below top-right */
        .block-right {
            position: absolute;
            top: 40%;
            right: 20px;
            transform: translateY(-40%); /* Slightly lower to stay clear of top-right menu space */
            text-align: center;
            font-size: 16px;
            line-height: 1.6;
            width: calc(50% - 330px); /* Leave room for center content */
            padding-left: 20px;
            padding-top: 40px; /* Extra padding to ensure top-right is empty */
        }

        /* 4. Bottom Block - Smallest text size, center-aligned */
        .block-bottom {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 18px;
            line-height: 1.7;
            padding: 0 40px;
        }