/**
 * Composant : zone d'upload de média (icône / image)
 *
 * Partagé par le modal d'édition de catégorie et le modal d'édition d'étiquette.
 * Aperçu, bouton « Choisir » (label enrobant un input file caché) et bouton de
 * suppression.
 *
 * @file        cc-upload-media.css
 * @package     CaisseConnect
 * @subpackage  CSS\Components
 * @since       1.7.2
 * @version     1.7.2
 * @author      Microlibre <contact@microlibre.net>
 * @copyright   2026 Microlibre
 * @license     GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 * @link        https://microlibre.net/caisse-connect
 */

.cc-upload-zone {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cc-upload-apercu {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 1px solid var(--cc-menu-border, #e5e7eb);
    border-radius: 4px;
    background: #fafafa;
}

.cc-upload-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.cc-upload-btn {
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}

.cc-upload-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

.cc-upload-btn input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.cc-upload-remove {
    color: var(--cc-error, #dc3545) !important;
    border-color: var(--cc-error-border, #f5c6cb) !important;
}

.cc-upload-remove:hover {
    background: var(--cc-error-bg, #f8d7da) !important;
}

.cc-upload-remove .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .cc-upload-zone {
        flex-wrap: wrap;
    }
}