/* ============================================
   BOLLETTA SMART — UPLOAD PAGE
   Apple Liquid Glass · Dark Enterprise
   ============================================ */

.upload-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-20) var(--space-4);
}

.upload-container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.upload-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.upload-header__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.upload-header__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

/* Utility Selector */
.utility-selector {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Drop Zone */
.dropzone {
  position: relative;
  padding: var(--space-12) var(--space-8);
  background: var(--glass-surface);
  backdrop-filter: var(--glass-blur-light);
  border: 2px dashed rgba(148, 163, 184, 0.15);
  border-radius: var(--radius-2xl);
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  margin-bottom: var(--space-4);
}

.dropzone:hover,
.dropzone--active {
  border-color: var(--primary-400);
  background: rgba(45, 212, 191, 0.04);
  box-shadow: 0 0 40px rgba(45, 212, 191, 0.08);
}

.dropzone--has-file {
  border-color: var(--success-500);
  border-style: solid;
  background: rgba(16, 185, 129, 0.04);
}

.dropzone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dropzone__icon {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}

.dropzone__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.dropzone__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.dropzone__formats {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.dropzone__format {
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-tertiary);
  background: rgba(148, 163, 184, 0.08);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}

/* File Preview */
.file-preview {
  display: none;
  margin-bottom: var(--space-4);
}

.file-preview.active { display: block; }

.file-preview__card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: var(--radius-xl);
}

.file-preview__icon { font-size: var(--text-2xl); }

.file-preview__info { flex: 1; min-width: 0; }

.file-preview__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-preview__size {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.file-preview__remove {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.15);
  border-radius: var(--radius-lg);
  color: var(--danger-400);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.file-preview__remove:hover {
  background: rgba(244, 63, 94, 0.15);
}

/* Consent */
.consent-section {
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
}

.consent-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.consent-section__title-icon { font-size: var(--text-md); }

/* Upload Actions */
.upload-actions { margin-bottom: var(--space-6); }

/* Upload Tip */
.upload-tip {
  text-align: center;
  margin-bottom: var(--space-8);
}

.upload-tip__text {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.upload-tip__icon { font-size: var(--text-md); }

/* Upload Info Cards */
.upload-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.upload-info__card {
  padding: var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.upload-info__card:hover {
  border-color: var(--color-border-strong);
}

.upload-info__icon {
  font-size: var(--text-xl);
  color: var(--primary-400);
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: center;
}

.upload-info__icon svg { stroke: var(--primary-400); }

.upload-info__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.upload-info__desc {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: var(--leading-relaxed);
}