/**
 * Detection Image IA Landing Page Styles
 * Public-facing page for non-authenticated users
 * 1 free image analysis per day
 * Imports base detection styles with image-specific overrides
 */

@import url('detection-ia.css');

/* Image-specific feature icons */
.feature-icon.image {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

/* Image Upload Area */
.image-upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-3xl);
    text-align: center;
    background: var(--bg-secondary);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
}

.image-upload-area:hover {
    border-color: var(--secondary);
    background: white;
}

.image-upload-area.drag-over {
    border-color: var(--secondary);
    background: var(--overlay-green-05);
}

.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
}

.upload-icon {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.upload-content h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.upload-content p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

.file-formats {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.file-formats .separator {
    color: var(--border-dark);
}

/* Image Preview */
.image-preview {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.preview-header h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.btn-change-image {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--danger);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    transition: var(--transition-base);
}

.btn-change-image:hover {
    background: rgba(239, 68, 68, 0.15);
}

.preview-img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    background: white;
    border: 1px solid var(--border);
}

.image-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    margin-top: var(--spacing-md);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.image-info .separator {
    color: var(--border-dark);
}

.image-name {
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

/* Limit Message */
.limit-message {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    margin-top: var(--spacing-lg);
}

.limit-message svg {
    color: var(--danger);
    flex-shrink: 0;
}

.limit-message span {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

/* Detection Details */
.detection-details {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.detection-details h4 {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.objects-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

.object-tag {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--text-xs);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.object-confidence {
    color: var(--secondary);
    font-weight: var(--font-semibold);
}