/* ===== MODAL ===== */
#requestModal {
  display: none;
  position: fixed;
  inset: 0;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
}

.modal-bg {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: rgba(0,0,0,0.55);
}

/* ===== MODAL CONTENT ===== */
#requestModal .modal-content {
  position: relative;
  z-index: 2;
  background: #f0f5fb;
  padding: 40px 30px;
  border-radius: 14px;
  max-width: 450px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  animation: fadeInScale 0.3s ease;
  box-sizing: border-box;
  max-height: 90vh;
  overflow-y: auto;
}

/* ===== ANIMATION ===== */
@keyframes fadeInScale {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ===== FORM ===== */
#requestForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== TITLE ===== */
#requestForm h2 {
  text-align: center;
  font-size: 22px;
  color: #0b1626;
  margin-bottom: 5px;
}

/* ===== INPUT GROUP ===== */
.form-group {
  position: relative;
}

/* ===== INPUTS ===== */
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid #c7d7ea;
  background: #fff;
  font-size: 14px;
  outline: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #0073c6;
  box-shadow: 0 0 0 3px rgba(0,115,198,0.15);
}

/* ===== LABEL ===== */
.form-group label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #5a6b7d;
  pointer-events: none;
  transition: 0.2s ease;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
  top: -7px;
  font-size: 11px;
  color: #0073c6;
  background: #eef4fb;
  padding: 0 5px;
}

/* ===== FILE INPUT ===== */
.form-group input[type="file"] {
  padding: 10px;
  cursor: pointer;
}

/* ===== FILE ITEMS ===== */
.file-list {
  display: flex;
  flex-direction: column; /* каждый файл в новой строке */
  gap: 8px;               /* расстояние между файлами */
  margin-top: 8px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eef4fb;   /* светлый фон файла */
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #004080;
}

/* кнопка удаления файла */
.remove-file {
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23c0392b' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h18v2H3V6zm3 3h12v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9zm3 2v8h2v-8H9zm4 0v8h2v-8h-2zM10 4h4v2h-4V4z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  vertical-align: middle;
  text-indent: -9999px;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.remove-file:hover {
  transform: scale(1.3);
  filter: brightness(1.3);
}

/* ===== BUTTONS ===== */
.modal-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

#requestModal .modal-buttons button {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  background: linear-gradient(135deg,#0b1626,#13233a);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: 0.3s;
}

#requestModal .modal-buttons button:hover {
  background: linear-gradient(135deg,#13233a,#1f2a42);
  box-shadow:
    0 0 8px rgba(0,115,198,0.7) inset,
    0 0 10px rgba(0,115,198,0.6),
    0 6px 16px rgba(0,0,0,0.4);
}

/* ===== ERROR ===== */
.validation-error {
  color: #c0392b;
  font-size: 13px;
}

/* ===================================================== */
/* ===== SUCCESS MESSAGE (ИСПРАВЛЕННАЯ ВЕРСИЯ) ===== */
/* ===================================================== */

.success-message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 999999; /* КРИТИЧНО — выше всех */
}

/* затемнение */
.success-message::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 0;
}

/* карточка */
.success-box {
  position: relative;
  z-index: 1;

  background: linear-gradient(135deg, #0b1626, #13233a);
  color: #fff;

  padding: 30px 25px;
  border-radius: 18px;

  max-width: 420px;
  width: 90%;

  text-align: center;

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.05);

  animation: fadeInScale 0.3s ease;
}

/* текст */
.success-box h3 {
  margin-bottom: 10px;
  font-size: 20px;
}

.success-box p {
  font-size: 14px;
  color: #cfd8e3;
  margin-bottom: 20px;
}

/* кнопка */
.success-box button,
.success-box .success-close {
  padding: 12px 26px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;

  background: linear-gradient(135deg,#0b1626,#13233a);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all 0.3s ease;
}

.success-box button:hover,
.success-box .success-close:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg,#13233a,#1f2a42);
  box-shadow:
    0 0 8px rgba(0,115,198,0.7) inset,
    0 0 10px rgba(0,115,198,0.6),
    0 6px 16px rgba(0,0,0,0.4);
}

/* крестик */
.success-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.7;
}

.success-close:hover {
  opacity: 1;
}

/* Drag & drop область */
.drop-zone {
  border: 2px dashed #aaa;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.3s, border-color 0.3s;
}

.drop-zone.dragover {
  background-color: #f0f8ff;
  border-color: #0073c6;
}