/* ================== КОНТЕЙНЕР ФОРМИ ================== */
.registration-container {
		width: 100%;
		max-width: 500px;
		background-color: rgba(31, 41, 55, 0.4);
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		border: 1px solid rgba(138, 43, 226, 0.3);
		border-radius: 12px;
		padding: 2rem;
		box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.registration-form {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
}

.form-header {
		text-align: center;
		margin-bottom: 1rem;
}

.form-header img {
		width: 150px;
		margin-bottom: 1rem;
}

.form-header h1 {
	/*
		font-family: 'Orbitron', sans-serif;
		font-size: 2.25rem;
		color: #fff;
		letter-spacing: 2px;
		text-shadow: 0 0 5px #8A2BE2;
	*/
		text-transform: uppercase;

}

/* ================== ПОЛЯ ВВОДУ ================== */
.input-group {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
}

.input-group label {
		font-weight: 700;
		color: #00E5FF;
}

.input-group label .optional {
		font-weight: 400;
		color: #9CA3AF;
		font-size: 0.8em;
}

.form-input {
		width: 100%;
		background-color: rgba(13, 17, 23, 0.8);
		border: 1px solid #4A5568;
		border-radius: 6px;
		padding: 0.75rem;
		color: #C9D1D9;
		font-size: 1rem;
		transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input:focus {
		outline: none;
		border-color: #8A2BE2;
		box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
}

.password-wrapper {
		position: relative;
}

.password-toggle {
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		cursor: pointer;
		font-size: 1.2rem;
		user-select: none;
}


#id_div_forgot_password{
	color: red;
	font-weight: 700;
	text-shadow: 0px -1px 1px white;
}


/* ================== АВАТАР ================== */
.avatar-group {
		display: flex;
		align-items: center;
		gap: 1rem;
		background-color: rgba(13, 17, 23, 0.5);
		padding: 0.75rem;
		border-radius: 6px;
}

.avatar-preview {
		width: 64px;
		height: 64px;
		border-radius: 50%;
		border: 2px solid #00E5FF;
}

.avatar-upload-label {

position: relative;

		background-color: transparent;
		color: #00E5FF;
		border: 1px solid #00E5FF;
		padding: 0.5rem 1rem;
		border-radius: 4px;
		cursor: pointer;

		/*transition: all 0.3s ease;*/
}
.avatar-upload-label:hover {
		background-color: rgba(0, 229, 255, 0.2);
}

input[type="file"] {
		display: none;
}
.file-info {
		font-size: 0.8rem;
		color: #9CA3AF;
}



    .avatar-upload-label {
			/*
      position: relative;
      cursor: pointer;
      background: #8A2BE2;
      color: #fff;
      padding: 10px 20px;
      border-radius: 6px;
      font-weight: bold;
			*/
      transition: background 0.3s ease;
    }

    /*.avatar-upload-label:hover {
      background: #6d1db7;
    }*/

    /* Підказка */
    .avatar-upload-label::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 120%; /* над елементом */
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Маленький трикутничок під підказкою */
    .avatar-upload-label::before {
      content: "";
      position: absolute;
      bottom: 110%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 6px;
      border-style: solid;
      border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* Показ при наведенні */
    .avatar-upload-label:hover::after,
    .avatar-upload-label:hover::before {
      opacity: 1;
      transform: translateX(-50%) translateY(-3px);
    }
























/* ================== CHECKBOX ================== */
.checkbox-group {
		display: flex;
		align-items: center;
		gap: 0.75rem;
}

.checkbox-group input[type="checkbox"] {
		width: 1.2em;
		height: 1.2em;
		accent-color: #8A2BE2; /* Сучасний спосіб стилізації */
}

.checkbox-group a {
		color: #00E5FF;
		text-decoration: none;
		transition: text-decoration 0.3s ease;
}
.checkbox-group a:hover {
		text-decoration: underline;
}

/* ================== КНОПКИ ================== */
.button-group {
		display: flex;
		gap: 1rem;
		margin-top: 1rem;
}

.btn {
		flex: 1;
		padding: 0.8rem 1.5rem;
		font-family: 'Orbitron', sans-serif;
		font-weight: 700;
		font-size: 1rem;
		border-radius: 6px;
		border: none;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		transition: all 0.3s ease-in-out;
}

.btn-primary {
		background-color: #e32eed;
		color: white;
		box-shadow: 0 0 5px #8A2BE2, 0 0 15px #8A2BE2;
}
.btn-primary:hover {
		box-shadow: 0 0 10px #8A2BE2, 0 0 25px #8A2BE2;
		transform: scale(1.02);
}

.btn-secondary {
		background-color: transparent;
		color: #C9D1D9;
		border: 2px solid #4A5568;
}
.btn-secondary:hover {
		background-color: #4A5568;
		color: #fff;
}





#success_container,
#failure_container {
	position: absolute;
		padding: 3rem;
		max-width: 500px;
		display: none;
		flex-direction: column;
		align-items: center;

		background-color: rgba(31, 41, 55, 0.4);
		-webkit-backdrop-filter: blur(15px); /* для Safari/iOS */
		backdrop-filter: blur(15px);
		border: 1px solid rgba(0, 229, 255, 0.3);
		border-radius: 12px;
		box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

#success_container h1,
#failure_container h1 {
		font-family: 'Orbitron', sans-serif;
		font-size: 1.5rem;
		color: rgb(0, 230, 255);
		margin-bottom: 1rem;
		text-align: center;
		text-shadow: 0 0 2px rgb(0, 115, 125);
}

#success_container p,
#failure_container p {
		font-size: 1.1rem;
		line-height: 1.6;
		margin-bottom: 2rem;
		text-align: center;
}

#success_container a,
#failure_container button {
		display: inline-block;
		padding: 0.8rem 2.5rem;
		font-family: 'Orbitron', sans-serif;
		font-weight: 700;
		font-size: 1rem;
		border-radius: 6px;
		text-decoration: none;
		transition: all 0.3s ease-in-out;
		background-color: #8A2BE2;
		color: white;
		box-shadow: 0 0 5px #8A2BE2, 0 0 15px #8A2BE2;
}
#success_container a:hover,
#failure_container button:hover {
		box-shadow: 0 0 10px #8A2BE2, 0 0 25px #8A2BE2;
		transform: scale(1.02);
}