/* Oum l Eid - Custom Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Noto+Naskh+Arabic:wght@400..700&display=swap');

/* Config polices globales */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

h1, h2, h3, .font-serif {
    font-family: 'Playfair Display', serif;
}

/* Personnalisation des barres de défilement (Scrollbars) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
}

::-webkit-scrollbar-thumb {
    background: #f472b6; /* pink-300 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ec4899; /* pink-500 */
}

/* Animations de transition */
.transition-fade {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style d'impression pour ticket thermique */
@media print {
    /* Cache l'ensemble de la page */
    body * {
        visibility: hidden;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Affiche uniquement le conteneur d'impression */
    #ticket-print-area, #ticket-print-area * {
        visibility: visible;
    }

    #ticket-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 80mm; /* Largeur standard ticket de caisse */
        max-width: 80mm;
        margin: 0;
        padding: 5mm;
        background: white;
        color: black;
        font-family: 'Courier New', Courier, monospace;
        font-size: 12px;
    }

    /* Supprime les marges de page imposées par le navigateur */
    @page {
        size: auto;
        margin: 0mm;
    }
}

/* Styles additionnels pour cartes produits et scroll de caisse */
.magasin-product-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.magasin-product-card:hover {
    transform: translateY(-2px);
}

/* Conteneur d'impression hors-écran en utilisation normale */
#ticket-print-area {
    display: none;
}

@media print {
    #ticket-print-area {
        display: block !important;
    }
}