/* ==================== TWILIGHT UPLOAD PAGE ====================
   Scoped to page-upload.php. Background image lives at
   /assets/pages/upload.jpg (blurred, same technique as login/register).
*/

.upload-page-body {
  background: #000 !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 6rem 1.5rem 3rem !important;
  box-sizing: border-box !important;
}

.upload-page-body::before {
  content: '' !important;
  position: absolute !important;
  inset: -20px !important;
  background:
    radial-gradient(ellipse 60% 50% at 15% 15%, rgba(139, 92, 246, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 85%, rgba(79, 140, 255, 0.14) 0%, transparent 60%),
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('../assets/pages/upload.jpg') center/cover no-repeat fixed !important;
  filter: blur(8px) !important;
  opacity: 0.6 !important;
  z-index: 0 !important;
}

.tw-upload-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
}

.tw-upload-card {
  background: rgba(10, 11, 16, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 2.75rem 2.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
}

/* ---------- Loading state ---------- */
.tw-upload-loading {
  text-align: center;
  padding: 3rem 0;
  color: var(--text-secondary);
}

.tw-upload-loading p {
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* ---------- Denied state ---------- */
.tw-upload-denied {
  text-align: center;
  padding: 1.5rem 0;
}

.tw-upload-denied-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff8fb4;
  background: rgba(255, 45, 120, 0.1);
  border: 1px solid rgba(255, 45, 120, 0.3);
}

.tw-upload-denied h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.75rem;
}

.tw-upload-denied p {
  color: #8892b0;
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 380px;
  margin: 0 auto 1.75rem;
}

/* ---------- Form header ---------- */
.tw-upload-header {
  text-align: center;
  margin-bottom: 2rem;
}

.tw-upload-header .tw-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #7db2ff;
  margin-bottom: 0.6rem;
}

.tw-upload-header h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.5rem;
}

.tw-upload-header p {
  color: #8892b0;
  font-size: 0.88rem;
}

/* ---------- Form groups (matches login/register conventions) ---------- */
.tw-upload-form .form-group {
  margin-bottom: 1.25rem;
}

.tw-upload-form .form-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}

.tw-upload-form .input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.tw-upload-form .form-input {
  width: 100%;
  background: #0e0f18;
  border: 1px solid #26273a;
  border-radius: 10px;
  padding: 13px 16px;
  color: #fff;
  font-size: 0.95rem;
  font-family: 'Montserrat', sans-serif;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.tw-upload-form .form-input::placeholder {
  color: #4a5070;
}

.tw-upload-form .form-input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
}

.tw-upload-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237db2ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px 7px;
  padding-right: 40px;
  cursor: pointer;
}

.tw-upload-select option {
  background: #0e0f18;
  color: #fff;
}

.form-hint {
  font-size: 0.76rem;
  color: #6b7280;
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ---------- Media: preview box (above) + upload button (below) ---------- */
.tw-upload-media {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Sized to fit the placeholder text when empty (no leftover empty space);
   expands to the full 7:9 card shape once an image is selected. */
.tw-upload-preview-box {
  position: relative;
  width: 100%;
  max-width: 220px;
  margin: 0 auto !important;
  border: 1.5px dashed #3a3b52;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  transition: border-color 0.25s ease, background 0.25s ease, aspect-ratio 0.25s ease;
}

.tw-upload-preview-box.has-image {
  aspect-ratio: 7 / 9;
  border-style: solid;
  border-color: #8b5cf6;
}

.tw-upload-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  padding: 1rem;
  text-align: center;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  white-space: normal;
}

.tw-upload-preview-placeholder span {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  display: block;
  max-width: 90%;
}

.tw-upload-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 auto;
}

.tw-upload-media-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 220px;
  margin: 0.85rem auto 0;
  padding: 11px 16px;
  border-radius: 100px;
  border: 1.5px dashed #3a3b52;
  background: rgba(255, 255, 255, 0.02);
  color: #9aa1c2;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.tw-upload-media-btn:hover,
.tw-upload-media-btn:focus-visible {
  border-style: solid;
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
  color: #fff;
  outline: none;
}

.tw-upload-media-btn.has-image {
  border-style: solid;
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.06);
  color: #fff;
}

/* ---------- Submit ---------- */
.tw-upload-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 30px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  border: none;
  background: #8b5cf6;
  color: #000;
  transition: all 0.25s ease;
  margin-top: 0.5rem;
}

.tw-upload-submit:hover {
  background: #7db2ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45);
}

.tw-upload-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Alerts (matches login/register) ---------- */
.tw-upload-form .alert {
  padding: 11px 15px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.84rem;
  margin-bottom: 1.25rem;
  display: none;
}

.tw-upload-form .alert.error {
  display: block;
  background: rgba(220, 38, 38, 0.12);
  color: #ff5555;
  border: 1px solid rgba(220, 38, 38, 0.35);
}

.tw-upload-form .alert.success {
  display: block;
  background: rgba(0, 255, 136, 0.1);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.3);
}

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  .tw-upload-card {
    padding: 2rem 1.5rem;
  }

  .tw-upload-header h1 {
    font-size: 1.4rem;
  }
}

/* ---------- Mobile performance fix ----------
   background-attachment: fixed + a blurred layer forces the browser to
   repaint that layer on every scroll frame, which is what causes the lag
   on mobile. Switching to scroll (mobile browsers largely ignore "fixed"
   for parallax anyway) and lightening the blur amounts fixes it. */
@media (max-width: 768px) {
  .upload-page-body::before {
    background-attachment: scroll !important;
    filter: blur(4px) !important;
  }

  .tw-upload-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}