/* ========== Registration / Sicherheit styles (clean) ========== */

/* Базовый box-sizing для секции */
section#sicherheit,
section#sicherheit .container,
section#sicherheit .container .security-grid {
  box-sizing: border-box !important;
}

/* Карточки */
section#sicherheit .container .security-grid article.security-card {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background-clip: padding-box !important;
}

/* Hero card */
section#sicherheit .container .security-grid article.security-card.security-card--hero {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1.25rem 1.5rem !important;
}
section#sicherheit .container .security-grid article.security-card.security-card--hero .sec-hero-inner {
  text-align: center !important;
  display: block !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Role list */
section#sicherheit .container .security-grid .hero-role-list {
  display: block !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 0.5rem auto 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
section#sicherheit .container .security-grid .hero-role-list .hero-role-item {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.25rem 0 !important;
  box-sizing: border-box !important;
}
section#sicherheit .container .security-grid .hero-role-item input[type="radio"].hero-role-input {
  margin: 0 0.5rem 0 0 !important;
  flex: 0 0 auto !important;
}
section#sicherheit .container .security-grid .hero-role-item label.hero-role-text {
  margin: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

/* Registration row & card sizing */
section#sicherheit .container .security-grid div.registration-row {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  margin: 1.25rem 0 !important;
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
}
section#sicherheit .container .security-grid div.registration-row > article#registration-card.security-card {
  width: 66% !important;
  max-width: 980px !important;
  min-width: 320px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;
  padding: 1rem !important;
  align-self: center !important;
}
section#sicherheit .container .security-grid div.registration-row > article#registration-card.security-card.is-hidden {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* Контент внутри карточки */
section#sicherheit .container .security-grid div.registration-row article#registration-card.security-card .registration-content {
  text-align: left !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Верхняя декоративная полоска карточки */
section#sicherheit .container .security-grid article.security-card::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 12px;
  right: 12px;
  height: 6px;
  background: linear-gradient(90deg, #6b46ff 0%, #4f46e5 45%, #00c6a7 100%) !important;
  border-radius: 6px !important;
  z-index: 6;
  pointer-events: none;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 6px, 100% 100%, 0% 100%, 0 6px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* Мобильные корректировки */
@media (max-width: 720px) {
  section#sicherheit .container .security-grid article.security-card::before {
    left: 8px;
    right: 8px;
    top: -5px;
    height: 5px;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 5px, 100% 100%, 0% 100%, 0 5px) !important;
  }

  section#sicherheit .container .security-grid div.registration-row > article#registration-card.security-card {
    width: 92% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  section#sicherheit .container .security-grid .hero-role-list {
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Базовые элементы карточки и заголовок */
section#sicherheit .container .security-grid .reg-block {
  box-sizing: border-box !important;
}
section#sicherheit .container .security-grid .sec-header {
  display: flex !important;
  gap: 0.75rem !important;
  align-items: center !important;
}

/* ========== Form fields spacing ========== */
/* Увеличенный зазор между колонками/строками в адресном ряду на странице регистрации */
#registration-card .row.g-3 {
  gap: 1rem;
  column-gap: 1rem;
  row-gap: 1rem;
}

/* Отступы между отдельными полями */
#registration-card .reg-block .mb-3,
#registration-card .mb-3,
#registration-card .row.g-3 > .col-md-4.mb-3 {
  margin-bottom: 1.25rem !important;
}

/* Список выбранных файлов */
#registration-card #documents_list {
  font-size: .95rem;
  color: var(--muted);
  max-width: 48ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 0.5rem;
  align-self: center;
}

/* ========== Custom file picker behavior ========== */
/* Скрываем нативный input визуально, но оставляем доступным для assistive tech и label */
#registration-card input[type="file"] {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  background: transparent;
}

/* Layout для кнопки и списка файлов */
#registration-card .d-flex.align-items-center {
  gap: 1rem !important;
  align-items: center !important;
}

/* Фирменная кнопка загрузки (label или button) */
#registration-card label#documents_btn.btn,
#registration-card .btn#documents_btn {
  background-image: linear-gradient(90deg,#4f46e5 0%,#22c55e 50%,#0ea5e9 100%) !important;
  color: #fff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
  padding: 6px 12px !important;
  height: 34px !important;
  min-height: 34px !important;
  font-size: .9rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}

/* Hover / active */
#registration-card label#documents_btn.btn:not(:disabled):hover,
#registration-card .btn#documents_btn:not(:disabled):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.10) !important;
}

/* Если где-то по ошибке стоит disabled — оставляем интерактивность для файлового picker'а */
#registration-card label#documents_btn[disabled],
#registration-card .btn#documents_btn[disabled],
#registration-card label#documents_btn.disabled,
#registration-card .btn#documents_btn.disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Мелкая адаптация для узких экранов */
@media (max-width: 480px) {
  #registration-card .btn#documents_btn,
  #registration-card label#documents_btn.btn {
    padding: .36rem .9rem !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: .92rem !important;
  }
}

/* ========== Utilities ========== */
/* Центрирование и предотвращение float для всех внутренних элементов */
section#sicherheit .container .security-grid div.registration-row > article#registration-card.security-card * {
  float: none !important;
}
/* Вернуть для label#documents_btn стандартный фирменный .btn-primary стиль */
#documents_btn {
  /* убирать локальные переопределения */
  background-image: none !important;
  background: var(--btn-primary-bg, var(--bs-primary, #4f46e5)) !important;
  color: var(--btn-primary-color, #fff) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--btn-primary-shadow, 0 8px 24px rgba(15,23,42,.06)) !important;
  border-radius: var(--btn-border-radius, 0.375rem) !important;
  padding: 0.375rem 0.9rem !important;
  height: auto !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}

/* Hover/active как у .btn-primary */
#documents_btn:not([disabled]):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.10) !important;
}

/* Если aria-disabled ставится — не менять внешний вид (оставляем кликабельность) */
#documents_btn[aria-disabled="true"],
#documents_btn.disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* make #documents_btn match overview pill buttons */
#documents_btn {
  background-image: none !important;
  background-color: #fff !important;         /* белый фон */
  color: #6366f1 !important;                 /* фиолетовый текст */
  border: 1.5px solid #6366f1 !important;    /* фиолетовая рамка */
  border-radius: 999px !important;           /* pill */
  padding: 6px 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* hover — чуть насыщеннее */
#documents_btn:hover {
  background-color: #fff !important;
  color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  transform: translateY(-2px) !important;
}

/* если нужно сохранить кликабельность при aria-disabled */
#documents_btn[aria-disabled="true"],
#documents_btn.disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* Сделать кнопку загрузки документов как overview-footer .btn */
#registration-card label#documents_btn.btn,
label#documents_btn.btn {
  background-image: none !important;
  background-color: #ffffff !important;       /* белый фон как у overview */
  color: #6366f1 !important;                  /* фиолетовый текст */
  border: 1.5px solid #6366f1 !important;     /* фиолетовая рамка */
  border-radius: 999px !important;            /* pill */
  padding: 6px 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}

/* hover — как в overview (более насыщенный фиолетовый) */
#registration-card label#documents_btn.btn:not([disabled]):hover,
label#documents_btn.btn:not([disabled]):hover {
  transform: translateY(-3px) !important;
  color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.10) !important;
}

/* если где-то ставят aria-disabled — не менять вид */
#registration-card label#documents_btn[aria-disabled="true"],
label#documents_btn[aria-disabled="true"],
#registration-card label#documents_btn.disabled,
label#documents_btn.disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
label#documents_btn {
  display: inline-block !important;
  margin: 12px 10px 14px 0 !important;
}


.is-hidden { display: none !important; }
.hidden { display: none !important; } /* уже используется в шаблоне */



/* подсказки-плейсхолдеры */
.register-card input::placeholder {
  color: #9ca3af;          /* светло-серый */
  font-style: italic;
  opacity: 1;
  transition: color .12s ease, opacity .12s ease;
}

/* при фокусе поле и плейсхолдер подсвечиваются ярче */
.register-card input:focus {
  box-shadow: 0 0 0 4px rgba(99,102,241,0.08); /* слабая фиолетовая подсветка */
  border-color: #6366f1;
  outline: none;
}

.register-card input:focus::placeholder {
  color: #6b7280; /* темнее для лучшей читаемости */
  opacity: 0.95;
  font-style: normal;
}








/* Строка файла — горизонтальный ряд */
.doc-item {
  display: flex;
  flex-direction: row;      /* гарантируем горизонтальное размещение */
  align-items: center;      /* выравнивание по середине строки */
  gap: 0.5rem;              /* расстояние между кнопкой, именем и размером */
  padding: .125rem .25rem;
  min-width: 0;
  white-space: nowrap;      /* предотвращаем перенос имени на новую строку */
}

/* Имя файла растёт и обрезается при нехватке места */
.doc-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Размер файла — фиксированная область справа */
.doc-size {
  flex: 0 0 auto;
  color: #6b7280;
  font-size: .9rem;
  margin-left: .5rem;
}

/* Корзина — всегда справа: ставим order=2 и убираем вертикальные отступы */
.doc-remove-btn {
  order: 2;                 /* помещаем кнопку в конец ряда */
  margin: 0 0 0 0.5rem;     /* небольшой отступ слева от имени/размера */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #dc2626;
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: 8px;
}

/* Если JS создаёт кнопку перед именем — переопределить порядок имени/размера */
.doc-name { order: 0; }
.doc-size { order: 1; }

/* Hover/focus для заметности */
.doc-remove-btn:hover { transform: translateY(-2px); color: #b91c1c; }
.doc-remove-btn:focus { box-shadow: 0 0 0 4px rgba(220,38,38,0.12); outline: none; }

#documents {
  display: none;
}

/* Hidden utility class */
.hidden {
  display: none !important;
}