@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;600&display=swap');



a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	padding: 0.4em;
	margin: 0 0 0 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

button {
	color: #333;
	background-color: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

button:focus {
	border-color: #666;
}

.icon { font-size: 2rem; }


/* --- Особистий журнал ЦІЛІ --- */

/* Обгортка, що дозволяє флекс-розкладку для карток цілей */
.goals-grid {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;               /* відстань між блоками */
  margin-top: 1rem;
  justify-content: center;
}

/* Кожний блок цілі */
.goal-block {
  min-width: 200px;
  max-width: 400px;
  box-sizing: border-box;
  padding: 1rem;
  background: #fafafd;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
  flex: 0 0 auto;
}

/* Для мобільних екранів — повна ширина */
@media (max-width: 600px) {
  .goal-block {
    flex: 1 1 100%;
  }
}

/* Порожній стан, коли цілей немає */
.goals-empty-state {
  background: #fff;
  border: 1px dashed #ccc;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}

/* Посилання “Перейти до цілі” */
.goal-link {
  color: rgb(0,100,200);
  text-decoration: none;
}
.goal-link:hover {
  text-decoration: underline;
}

/* Кнопка видалення цілі */
.goal-remove-link {
 color: rgb(0,100,200);
  text-decoration: none;
}

/* Додаткова нотатка (якщо знадобиться) */
.goal-instruction {
  color: #555;
  font-size: 0.9em;
  margin-top: 0.5em;
}


/* --- Особистий журнал КУРСИ--- */

/* --- Список активних курсів у журналі--- */
/* обгортка, що дозволяє флекс-розкладку */
.courses-grid {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;               /* відстань між блоками */
  margin-top: 1rem;
  justify-content: center; 
}

/* кожний блок курсу */
.my-course-block {
  
  width: 200px;
  box-sizing: border-box;
  padding: 1rem;
  background: #fafafd;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
  flex: 0 0 auto;
  }

/* для мобільних екранів — повна ширина */
@media (max-width: 600px) {
  .my-course-block {
    flex: 1 1 100%;
  }
}


/* контейнер усіх чекбоксів-днів */
.days-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.7em;
  align-items: center;    /* по центру по вертикалі */
  justify-content: center; /* або center якщо хочеш по центру */
  width: 170px;       /* Ширина, щоб влазило 5 чекбоксів */
}

/* для візуальної підказки, що чекбокс-день не переноситься */
.days-list::-webkit-scrollbar {
  height: 4px;
}

/* кожен лейбл з чекбоксом і цифрою */
.checkbox-day {
  display: inline-flex;  /* щоб поводився як inline-елемент, але з flex-вирівнюванням */
  align-items: center;   /* вирівнюємо checkbox і цифру по центру */
  gap: 0.25em;
  white-space: nowrap;   /* не даємо цифрі обривати рядок під чекбоксом */
  line-height: 1;        /* щоб цифра була на тій же висоті, що й сам чекбокс */
}

/* посилання «Видалити з журналу» */
.remove-link {
  color: #000;
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.95em;
  display: inline-block;
  margin-top: 0.75em;
}

/* додаткова нотатка під блоком */
.mini-instruction {
  color: #555;
  font-size: 0.9em;
  margin-top: 0.5em;
}





/* --- Особистий журнал Історія нейро-сесій --- */

.danger-button {
    background: #e53935;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5em 1.2em;
    margin: 1em 0;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.15s;
}
.danger-button:hover {
    background: #b71c1c;
}


.history-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

textarea::placeholder {
    text-align: center;
}

.session-item,
.history-row {
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 8px;
    background: #f9f9fc;
    box-shadow: 0 2px 4px #0001;
    cursor: pointer;
    transition: background 0.15s;
}
.session-item:hover,
.history-row:hover {
    background: #eef;
}
.text-preview,
.history-short-text {
    color: #666;
    font-size: 0.95em;
}
.comment-preview {
    color: #00897b;
    font-size: 0.95em;
    margin-top: 2px;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-line;
    /* за потреби додатково: */
    max-width: 100%;   /* обмеження по ширині */
    display: block;    /* щоб 100% спрацювало точно */
}
.history-pagination,
.pagination {
    margin-top: 1em;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.modal-backdrop {
    position: fixed;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    background: #0008;
    z-index: 10;
}
.modal,
.modal-window {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: white;
    min-width: 320px;
    max-width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.13);
    padding: 2rem 1.5rem 1.5rem 1.5rem;
}
.session-text,
.session-full-text,
.modal-session-text {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 1em;
}






		
        /* Форма зворотнього зв'язку  */
          .form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
    align-items: center; /* Додаємо вирівнювання по центру */
  }

  .textarea {
    min-height: 100px;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 8px; /* Класичні закруглення */
    width: 100%; /* Щоб textarea займала всю ширину контейнера */
    max-width: 400px;
    text-align: center; /* Центруємо текст в textarea */
    font-size: 1rem;
  }

  .button {
    padding: 0.75rem 1.5rem;
    background-color: #0070f3;
    color: white;
    border: none;
    border-radius: 8px; /* Класичні круглі краї */
    cursor: pointer;
    font-size: 1rem;
    width: 150px;
    text-align: center;
  }
        
  .close-button {
    background-color: #ccc;
    color: #333;
  }

   .thankyou {
    text-align: center;
  }
        /* Форма зворотнього зв'язку КІНЕЦЬ */
        
        
        
        /* Підключення Google Fonts */
	@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;600&display=swap');


    .output-window {
    margin-top: 1rem;
	margin: 0 auto; /* Центрування блока */
    padding: 1rem;
    background-color:transperent !important;
    border-radius: 12px;
    border: 1px solid #222222;
    min-height: 100px;
    width: 100%; /* Окно вывода занимает всю ширину */
    max-width: 600px;
    box-sizing: border-box;
	}

	
	p {
		line-height: 1.6;
		margin-bottom: 1rem;
		color: #222222; /* Темно-сірий для покращеної видимості */
	}


	

	button {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    color: white;
    background-color: #a742e6;
    cursor: pointer;
    overflow: hidden;
    margin-top: 8px;
	  margin-bottom: 8px;
    width: calc(100% - 40px);
    max-width: 400px;
    box-sizing: border-box;
    transition: transform 0.2s ease;
  }

  /* Ефект hover */
button:hover {
    background-color: #b495d9; /* Темніший відтінок */
    transform: scale(1.05); /* Легке збільшення */
}

/* Ефект натискання */
button:active {
    transform: scale(0.98); /* Трохи зменшується при натисканні */
}
  
/* Рижа кнопка */
button.button1 {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    color: white;
    background-color: #FD9E85;
    cursor: pointer;
    overflow: hidden;
    margin-top: 15px;
	margin-bottom: 25px;
    width: calc(100% - 40px);
    max-width: 400px;
    box-sizing: border-box;
    transition: transform 0.2s ease;
  }

  /* Ефект hover */
  button.button1:hover {
    background-color: #FF8869; /* Темніший відтінок */
    transform: scale(1.05); /* Легке збільшення */
}

/* Ефект натискання */
button.button1:active {
    transform: scale(0.98); /* Трохи зменшується при натисканні */
}

/* Чорна кнопка */
button.button2 {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    color: white;
    background-color: #222222;
    cursor: pointer;
    overflow: hidden;
    margin-top: 15px;
	margin-bottom: 25px;
    width: calc(100% - 40px);
    max-width: 400px;
    box-sizing: border-box;
    transition: transform 0.2s ease;
  }

  /* Ефект hover */
  button.button2:hover {
    background-color: #370E56; /* Фіолетовіший відтінок */
    transform: scale(1.05); /* Легке збільшення */
}

/* Ефект натискання */
button.button2:active {
    transform: scale(0.98); /* Трохи зменшується при натисканні */
}

/* Лососьова кнопка кнопка */
button.button3 {
    background-color: #F27693;
}




/* Хвиля створюється псевдоелементом */
button::before, button.button1::before, button.button2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100" preserveAspectRatio="none"><path d="M0,30 C150,100 350,0 500,50 C650,100 850,0 1000,50 C1150,100 1300,0 1400,50 L1400,00 L0,0 Z" fill="rgba(255, 255, 255, 0.5)"/></svg>') no-repeat;
    background-size: cover;
    animation: wave-animation 10s ease-in-out infinite;
  }

/* Анімація туди-назад */
@keyframes wave-animation {
    0% {
        transform: translateX(0); /* Початкове положення */
    }
    50% {
        transform: translateX(-50%); /* Хвиля рухається вліво */
    }
    100% {
        transform: translateX(0); /* Хвиля повертається до початку */
    }
}



/* Контейнер для dropdown */
.dropdown-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    margin-top: 20px; /* Додаємо простір над контейнером */
	position: relative; /* Для коректного позиціонування списку */
}


/* Стиль для випадаючого списку */
.dropdown {
    appearance: none; /* Видаляє стандартний стиль браузера */
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    color: white;
    background-color: #a742e6;
    cursor: pointer;
    width: 100%; /* Заповнює ширину контейнера */
    max-width: 400px;
    box-sizing: border-box;
    text-align: center; /* Центрує текст всередині кнопки */
    text-align-last: center; /* Центрує вибраний пункт списку у більшості браузерів */
    margin-bottom: 20px; /* Додаємо простір під кнопкою */
    outline: none; /* Видаляє лінію фокусу */
}


/* Ефект hover */
.dropdown:hover {
    background-color: #b495d9; /* Темніший відтінок */
}


/* Випадаючий список з обмеженою шириною і скругленими краями */
.dropdown option {
    border-radius: 15px; /* Скруглені краї для списку */
    color: black; /* Чорний текст */
    background-color: rgba(255, 255, 255, 0.9); /* Прозорий фон */
    width: 100%; /* Встановлюємо ширину відповідно до dropdown */
    max-width: 400px;
}


.dropdown option[disabled] {
    color: white !important; /* Колір тексту */
    font-weight: bold; /* Жирний шрифт */
    background-color: transparent; /* Прозорий фон */
    text-align: center; /* Текст по центру */
    cursor: default; /* Заборона наведення курсора */
}




/* Прихований стандартний select */
.hidden-dropdown {
    opacity: 0; /* Робимо його невидимим */
    position: absolute; /* Абсолютне позиціонування для розташування над кнопкою */
    top: 0;
    left: 0;
    width: 100%; /* Заповнює всю ширину кнопки */
    height: 100%; /* Висота відповідає кнопці */
    cursor: pointer; /* Вказує, що це інтерактивний елемент */
    z-index: 2; /* Вище за інші елементи, але нижче за кастомний список */
	appearance: none; /* Видаляє стандартний стиль браузера */
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    color: white;
    background-color: #a742e6;
     max-width: 400px;
    box-sizing: border-box;
    text-align: center; /* Центрує текст всередині кнопки */
    text-align-last: center; /* Центрує вибраний пункт списку у більшості браузерів */
    margin-bottom: 20px; /* Додаємо простір під кнопкою */
    outline: none; /* Видаляє лінію фокусу */
  }

/* Ефект hover */
.hidden-dropdown:hover {
    background-color: #b495d9; /* Темніший відтінок */
}


/* Випадаючий список з обмеженою шириною і скругленими краями */
.hidden-dropdown option {
    border-radius: 15px; /* Скруглені краї для списку */
    color: black; /* Чорний текст */
    background-color: rgba(255, 255, 255, 0.9); /* Прозорий фон */
    width: 100%; /* Встановлюємо ширину відповідно до dropdown */
    max-width: 400px;
}


.hidden-dropdown option[disabled] {
    color: white !important; /* Колір тексту */
    font-weight: bold; /* Жирний шрифт */
    background-color: transparent; /* Прозорий фон */
    text-align: center; /* Текст по центру */
    cursor: default; /* Заборона наведення курсора */
}




/* Вікна розділів цілі*/
.hidden {
        display: none;
    }


	/* Стилі для рівнів */
/* Стиль для контейнера рівнів */
#levels-container .level-display {
    display: none; /* Приховати всі рівні за замовчуванням */
}

#levels-container .level-display.active {
    display: block; /* Показати тільки активний рівень */
}

.level-display {
    display: none;
}

.level-display.active {
    display: block;
}

/* Стиль для кнопок навігації */
.navigation-buttons button {
    margin: 10px 5px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background-color: #a742e6;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.navigation-buttons button:hover {
    background-color: #b495d9;
}


/* Вікно Що таке Нейролюшінарі*/  
.stage-display {
    display: none; /* Приховуємо всі елементи за замовчуванням */
}
.stage-display.active {
    display: block; /* Показуємо лише активний елемент */
}



/* Для дня курсу */
.course-day-display {
    display: none;
}
.course-day-display.active {
    display: block;
}



/* Вбудований віджет liqpay*/

#liqpay_checkout_container {
  display: none; /* За замовчуванням прихований */
  width: 100%; /* Займає всю ширину доступного простору */
  max-width: 600px; /* Обмеження максимальної ширини */
  margin: 20px auto; /* Центрування на сторінці */
  padding: 20px; /* Відступи всередині контейнера */
  border: 1px solid #ccc; /* Легкий бордер */
  border-radius: 5px; /* Закруглені кути */
  background-color: #fff; /* Білий фон */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Тінь для ефекту */
  position: relative; /* Позиціонування для кнопки закриття */
}

#close_liqpay_checkout {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #333;
}

#close_liqpay_checkout:hover {
  color: #ff0000; /* Зміна кольору при наведенні */
}


/* Текстові вікна для планера */
textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  resize: vertical;
  font-size: 1rem;
  box-sizing: border-box;
  margin-bottom: 1rem;
}


/* Кнопка копіювати */

.copy-feedback {
	color: green;
	margin-left: 10px;
	font-size: 0.9rem;
}

html {
  scroll-behavior: smooth;
}

.neon-checkbox.svelte-cqwree.svelte-cqwree{--primary:#b36ff7;--primary-dark:#a964e8;--primary-light:#dfc7ff;--gradient:linear-gradient(135deg, #b36ff7 0%, #a964e8 100%);--size:30px;position:relative;display:flex;align-items:center;width:auto;min-height:var(--size);cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;gap:12px}.neon-checkbox__frame.svelte-cqwree.svelte-cqwree{min-width:var(--size);min-height:var(--size);width:var(--size);height:var(--size);display:inline-block;vertical-align:middle;position:relative}.neon-checkbox.svelte-cqwree input.svelte-cqwree{display:none}.neon-checkbox__box.svelte-cqwree.svelte-cqwree{position:absolute;inset:0;background:var(--gradient);border-radius:50%;border:2px solid var(--primary-dark);box-shadow:0 0 0 2px var(--primary-light) inset;transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1)}.neon-checkbox__glow.svelte-cqwree.svelte-cqwree{position:absolute;inset:-4px;border-radius:50%;background:var(--primary-light);opacity:0;filter:blur(8px);transform:scale(1.2);transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1)}.neon-checkbox__check-container.svelte-cqwree.svelte-cqwree{position:absolute;inset:3px;display:flex;align-items:center;justify-content:center}.neon-checkbox__check.svelte-cqwree.svelte-cqwree{width:90%;height:90%;fill:none;stroke:#222;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transform-origin:center;transition:stroke-dashoffset 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.1s;opacity:0}.neon-checkbox.svelte-cqwree:hover .neon-checkbox__box.svelte-cqwree{border-color:var(--primary);box-shadow:0 0 8px 0 var(--primary-light), 0 0 0 2px var(--primary) inset;transform:scale(1.05)}.neon-checkbox.svelte-cqwree input:checked~.neon-checkbox__frame .neon-checkbox__box.svelte-cqwree{border-color:var(--primary);background:var(--gradient);box-shadow:0 0 16px 2px var(--primary-light)}.neon-checkbox.svelte-cqwree input:checked~.neon-checkbox__frame .neon-checkbox__check.svelte-cqwree{stroke-dashoffset:0;transform:scale(1.1);opacity:1;transition:stroke-dashoffset 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.1s}.neon-checkbox.svelte-cqwree input:not(:checked)~.neon-checkbox__frame .neon-checkbox__check.svelte-cqwree{stroke-dashoffset:40;opacity:0;transition:stroke-dashoffset 0s,
    transform 0.2s,
    opacity 0.1s}.neon-checkbox.svelte-cqwree input:checked~.neon-checkbox__frame .neon-checkbox__glow.svelte-cqwree{opacity:0.5}.neon-checkbox__label.svelte-cqwree.svelte-cqwree{margin-left:14px;font-size:1.08rem;color:#32215b;font-weight:500;user-select:none}