/* uploader.css */
/* Styles for the guest upload portal, drag and drop zone, upload form inputs, and compression ratios */

/* Full-page upload mode: centers the card in the viewport */
.upload-fullpage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: radial-gradient(ellipse at top, rgba(245, 158, 11, 0.04) 0%, transparent 60%),
                radial-gradient(ellipse at bottom, rgba(217, 119, 6, 0.03) 0%, transparent 60%);
}

.upload-fullpage .upload-portal-card {
    width: 100%;
    max-width: 30rem;
}

.upload-portal-card {
    background-color: rgba(5, 5, 8, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(245, 158, 11, 0.05) inset;
}

/* Custom interactive input fields */
.form-input-premium {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input-premium:focus {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.5);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Drag & Drop interactive zone */
.media-drop-zone {
    border: 2px dashed rgba(255, 255, 255, 0.08);
    background-color: rgba(255, 255, 255, 0.01);
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.media-drop-zone:hover {
    border-color: rgba(245, 158, 11, 0.4);
    background-color: rgba(255, 255, 255, 0.02);
}

.media-drop-zone.drag-active {
    border-color: var(--amber-premium);
    background-color: rgba(245, 158, 11, 0.05);
    transform: scale(1.01);
}

/* Custom media preview containers inside upload portal */
.preview-render-container {
    background: radial-gradient(circle at center, #0f0f12 0%, #030305 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Optimization dashboard stats */
.analytics-badge-saving {
    background-color: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.15);
}

/* Submit moment action button styling */
.btn-submit-premium {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.btn-submit-premium:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.35);
}

.btn-submit-premium:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.15);
}