:root {
  --color-primary: #4a89dc;
  --color-primary-dark: #357bd8;
  --color-primary-darker: #3160B6;
  --color-error: rgba(191, 54, 12, 0.8);
  --color-error-light: #ffccbc;
  --color-error-dark: #bf360c;
  --color-success: #1967D2;
  --color-success-light: #e8f0fe;
  --color-gray-light: #b6b6b6;
  --color-gray-medium: #888;
  --color-gray-dark: #636363;
  --color-gray-darker: #6D6D6D;
  --color-gray-hover: #808080;
  --color-button: rgba(170, 170, 170, 1);
  --background-color-button: #F3F4F6;
  --background-body: #eee;
  --background-form: #fafafa;
  --shadow-default: 0px 1px 1px 0px rgba(0,0,0,0.149), 0px 1px 2px 0px rgba(0,0,0,0.098);
}

*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  line-height: normal;
}

body {
  font-family: Helvetica;
  background: var(--background-body);
  -webkit-font-smoothing: antialiased;
  height: calc(var(--vh, 1vh));
}

/* Logo */
.t456__imglogo {
  width: var(--logo-width, 150px);
  height: var(--logo-height, auto);
  transition: all 0.3s ease;
}

.black-gray-logo {filter: brightness(140%) grayscale(0%);}
.darkened-logo { filter: brightness(75%); }
.gray-logo { filter: brightness(400%) grayscale(100%); }
.custom-logo {
  width: var(--logo-width);
  height: var(--logo-height);
}

/* Header */
hgroup {
  text-align: center;
  margin-top: calc(var(--hgroup-top));
}

h1, h3 { font-weight: 300; }
h1 { color: var(--color-gray-dark); }
h3 { color: var(--color-primary); }

/* Form */
form {
  width: 380px;
  margin: var(--hgroup-bot) auto var(--hgroup-bot);
  padding: 3em 2em 2em 2em;
  background: var(--background-form);
  border: 1px solid #ebebeb;
  box-shadow: var(--shadow-default);
}

.form-enu {
  margin: var(--hgroup-bot) auto calc(var(--hgroup-bot) + 4vh);
}

.group, .form-group, .groupTwo, .form-groupTwo, .customGroup {
  position: relative;
  margin-bottom: 25.5px;
}

.groupTwo.activeError, .customgroupTwo, .form-groupTwo.activeError {
  margin-bottom: -4.75px;
}

.customGroup.activeError {
  margin-bottom: -4.8px;
}

/* Input */
input {
  font-size: 16px;
  padding: 10px 40px 10px 5px;
  -webkit-appearance: none;
  display: block;
  background: var(--background-form);
  color: var(--color-gray-medium);
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-gray-light);
  transition: border-color 0.5s;
}

input:focus {
  outline: none;
  border-bottom: 1px solid var(--color-primary);
}

input.error {
  border-bottom: 1px solid rgba(191, 54, 12, 0.5);
}

/* Label */
.group label, .form-group label {
  color: var(--color-gray-light);
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: all 0.2s ease;
  display: inline-block;
  vertical-align: middle;
}

input:focus ~ label, input.used ~ label {
  top: -20px;
  font-size: 14px;
  left: -2px;
  color: var(--color-primary);
}

input ~ label.error {
  color: var(--color-error);
}

/* Button */
.button {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  margin: 0 0 1em 0;
  width: 100%;
  vertical-align: middle;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  letter-spacing: 1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--color-primary-darker);
  cursor: pointer;
  transition: all 0.15s ease;
}

.button:focus { outline: 0; }

.buttonBlue {
  background: var(--color-primary);
  text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}

.buttonBlue:hover { background: var(--color-primary-dark); }

.buttonAlter {
  margin: 0.5rem 0 0 1.5rem;
  background: none;
  vertical-align: middle;
  width: 35%;
  cursor: pointer;
  border: none;
}

.buttonAlter.marginAndWidth {
  margin: 0;
  width: 100%;
}

.buttonFooter {
  font-size: 14px;
  background: none;
  cursor: pointer;
  border: none;
}

.buttonAlter p, .buttonFooter p {
  font-size: 13px;
  white-space: nowrap;
  margin-bottom: 0;
  color: var(--color-primary);
}

/* Ripples */
.ripples {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.ripplesCircle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.ripples.is-active .ripplesCircle {
  animation: ripples .4s ease-in;
}

@keyframes ripples {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}

/* Password toggle */
.toggle-password {
  position: absolute;
  right: 10px;
  top: 14%;
  cursor: pointer;
  color: #dee2e6;
  background: none;
  border: none;
  padding: 0;
}

.toggle-password:focus { outline: none; }
.toggle-password:hover { color: var(--color-gray-light); }

/* Error messages */
#errorMessage {
  display: block;
  text-align: center;
  margin-bottom: calc(var(--vh, 1vh) * 2.1);
  font-size: 13px;
  color: #ff0000;
}

.input-error-msg {
  position: relative;
  top: -10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--color-error);
  font-size: 11px;
  margin-top: 4px;
  margin-left: 6px;
  transition: all 0.3s ease;
}

.input-error-msg.visibleMsg {
  top: 0;
  max-height: 40px;
  opacity: 1;
}

/* Toast */
.toast-notification {
  max-width: 100vw;
  box-sizing: border-box;
  overflow-wrap: break-word;
  width: 100%;
  height: 44.8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: fixed;
  top: 0;
  background-color: #f8f9fa;
  color: white;
  padding: 20px 20px 12px 20px;
  border-bottom: 1px #ccc solid;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 9999;
  user-select: none;
}

.toast-notification {
  padding: 18px 20px 15px 20px;
}

.toastInfo { height: 24px; }

.toast-notification.success {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.toast-notification.error {
  background-color: var(--color-error-light);
  color: var(--color-error-dark);
}

.toast-notification.active {
  opacity: 1;
  transform: translateY(0);
}

.toast-progress-bar.success {
  background-color: #CCDEFD;
}

.toast-progress-bar.error {
  background-color: #FFA282;
}

.toast-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 5s linear;
}


#toastMessage {
  margin-left: 10px;
  font-size: 14px;
  flex: 1;
  pointer-events: none;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.toast-email, .toast-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  opacity: 1;
  align-self: center;
}

.toast-close { width: 24px; height: 24px; }
.toast-close i { font-size: 24px; }
.toast-email-div { border-radius: 10px; }
.toast-email-div span { padding: 0 20px; }

.toast-close:hover, .toast-email-div:hover {
  background-color: rgba(0, 0, 0, .12);
}

/* Footer styles */
footer {
  text-align: center;
}

footer p {
  color: var(--color-gray-light);
  font-size: 13px;
  letter-spacing: .4px;
}

footer a {
  color: var(--color-primary);
  text-decoration: none;
  transition: all .2s ease;
}

footer a:hover {
  color: var(--color-gray-light);
  text-decoration: underline;
}

footer img {
  width: 80px;
  transition: all .2s ease;
}

footer img:hover { opacity: .83; }
footer img:focus, footer a:focus { outline: none; }

/* Tooltip styles */
.info-icon {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: inline-block;
  cursor: help;
  color: var(--color-gray-light);
  font-size: 20px;
  vertical-align: middle;
  transition: color 0.3s ease;
  text-decoration: none;
}

#loginInput:focus ~ .info-icon,
#loginInput.used ~ .info-icon {
  color: var(--color-primary);
}

.info-icon:hover::after {
  color: var(--color-primary);
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
}

.info-tooltip {
  position: absolute;
  top: calc(100% + 2px);
  left: 65%;
  transform: translateX(-50%);
  padding: 15px;
  background-color: #fff;
  color: var(--color-gray-light);
  font-size: 13px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 230px;
  text-align: left;
  white-space: normal;
  z-index: 2;
}

.group:hover .info-tooltip {
  opacity: 1;
}

/* Reset modal */
.reset-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  justify-content: center;
  align-items: center;
}

.reset-modal-content {
  background-color: white;
  padding: 10px;
  border-radius: 4px;
  width: 350px;
  max-width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  animation: modalFadeIn 0.3s;
}

.reset-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.reset-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #444;
}

.reset-modal-body {
  margin: 10px;
  font-size: 0.95rem;
}

.reset-modal-footer {
  margin-right: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.reset-modal-btn {
  padding: 4px 20px;
  border-radius: 1px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.input-reset-modal {
  width: 100%;
  padding: 6px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#iinError {
  text-align: center;
  font-size: 13px;
  color: #ff0000;
  margin-top: 6px;
  display: none;
}

.btn-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}


/* --- JS-классы стилей --- */
.hidden { visibility: hidden; }
.rounded-md { border-radius: 0.375rem; border: none; }
.card-body2 { flex: 1 1 auto; min-height: 1px; }
.g-recaptcha { border: none; }


/* --- Анимации --- */
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes autofillStart {
  from {}
  to {}
}

/* --- Адаптивность --- */
@media (max-height: 600px) {
  .t456__imglogo {
    width: calc(var(--logo-width) * 0.8);
    height: calc(var(--logo-height) * 0.8);
  }

  .buttonBlue { margin-top: 20px; }

  .group, .form-group { margin-bottom: 0; }

  .groupTwo, .form-groupTwo {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  #errorMessage { margin-bottom: 0; }
  #errorMessage.activeErrorConfirm { margin-top: 20px; }
  
  form {
    margin: var(--hgroup-bot) auto var(--hgroup-bot);
  }
}

@media (max-height: 900px) and (max-width: 900px) {
  .buttonBlue { margin-top: 20px; }

  .group, .form-group { margin-bottom: 0; }

  .groupTwo, .form-groupTwo { margin-top: 20px; }

  #errorMessage { margin-bottom: 0; }
  #errorMessage.activeErrorConfirm { margin-top: 20px; }
  
  .form-enu {
    margin: var(--hgroup-bot) auto var(--hgroup-bot);
  }
}

@media (max-height: 501px) {
  .input-error-msg.visibleMsg {
    top: -0.6vh;
  }

  .groupTwo,
  .form-groupTwo {
    margin-top: 2vh;
  }

  hgroup {
    margin-top: calc(var(--hgroup-top, 5vh) * 0.7);
  }

  form {
    width: 50vw;
    height: 55vh;
    padding: 7.5vh 2vw 2vw 2vw;
  }

  form .group span,
  form .group label,
  form .group small,
  .buttonAlter p,
  button span {
    font-size: 2.6vh;
  }

  input:focus ~ label,
  input.used ~ label {
    top: -2vh;
    left: -0.3vw;
  }

  .button {
    padding: 1vh 2vw;
    margin: 0 0 2vh 0;
  }

  .groupTwo.activeError, .customgroupTwo, .form-groupTwo.activeError {
    margin-bottom: -4.75px;
  }

  .buttonBlue {
    margin-top: 2vh;
  }

  .groupTwo.activeError,
  .customgroupTwo,
  .form-groupTwo.activeError {
    margin-bottom: 0;
  }
}