/**
 * NOVA IP - Styles personnalisés
 * camera-videosurveillance.fr
 * 
 * Structure :
 * 1. IMPORTS

/* ==========================================
   1. IMPORTS
   ========================================== */
@import 'variables.css';
@import 'components.css';

/* Teste temporaire à déplacer */
.cms-id-6 .mx-img {
   width: 100%;
   height: 300px;
   object-fit: cover;
}

.cms-id-6 .mx-flex {
   justify-content: space-between;
}

.carousel .carousel-item figure {
   display: block;
}

.carousel .carousel-inner {
   border-radius: 20px;
}

/* ==========================================
   MODULE OP'ART DEVIS
   ========================================== */

/* Header panier : titre + lien devis */
.page-cart .mx-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Navigation bas panier : Continuer achats + Devis */
.mx-cart-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
    margin-top: var(--space-4);
}

/* Lien Devis : style commun */
.mx-devis-link {
    gap: var(--space-2);
}

/* Hover orange sur lien devis */
.mx-devis-link:hover {
    color: var(--mx-orange-500);
    text-decoration: none;
}

.mx-devis-link:hover svg {
    color: var(--mx-orange-500);
}

/* Bloquer l'animation sur l'icône document */
.mx-devis-link svg:first-of-type {
    transform: none !important;
}

/* ------------------------------------------
   Page Création Devis
   ------------------------------------------ */

/* Container principal */
.mx-devis-create {
    max-width: 1000px;
    margin: 0 auto;
}

.mx-devis-create .mx-page-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-6);
}

/* Headers de section (comme order-detail) */
.mx-devis-create .mx-order-detail-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--mx-gray-200);
    margin-top: var(--space-8);
}

.mx-devis-create .mx-order-detail-section-header:first-of-type {
    margin-top: 0;
}

.mx-devis-create .mx-order-detail-section-header svg {
    width: 20px;
    height: 20px;
    color: var(--mx-blue-500);
}

.mx-devis-create .mx-order-detail-section-header h4 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    margin: 0;
}

/* Tableau produits (comme order-detail) */
.mx-devis-create .mx-order-products-table {
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--mx-blue-100);
    margin-bottom: var(--space-6);
}

.mx-devis-create .mx-order-products {
    width: 100%;
    border-collapse: collapse;
}

.mx-devis-create .mx-order-products th,
.mx-devis-create .mx-order-products td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--mx-blue-100);
}

.mx-devis-create .mx-order-products thead th {
    background: var(--mx-blue-50);
    font-weight: var(--fw-semibold);
    color: var(--mx-gray-700);
}

.mx-devis-create .mx-order-products tbody tr:last-child td {
    border-bottom: none;
}

.mx-devis-create .mx-order-products tfoot td {
    background: var(--mx-gray-50);
    font-weight: var(--fw-medium);
}

.mx-devis-create .mx-order-products tfoot .total-row td {
    background: var(--mx-blue-50);
    font-size: var(--fs-base);
}

.mx-devis-create .mx-order-products .text-right {
    text-align: right;
}

.mx-devis-create .mx-order-products .price {
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

/* Alerte info */
.mx-devis-create .mx-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
}

.mx-devis-create .mx-alert svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.mx-devis-create .mx-alert-info {
    background: var(--mx-blue-50);
    color: var(--mx-blue-700);
    border: 1px solid var(--mx-blue-200);
}

.mx-devis-create .mx-alert-warning {
    background: var(--mx-orange-50);
    color: var(--mx-orange-700);
    border: 1px solid var(--mx-orange-200);
}

/* Sections formulaire */
.mx-devis-section {
    margin-bottom: var(--space-6);
}

.mx-devis-section-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Form groups */
.mx-devis-create .mx-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mx-devis-create .mx-form-label {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    color: var(--mx-gray-700);
}

.mx-devis-create .mx-form-hint {
    font-size: var(--fs-xs);
    color: var(--mx-gray-500);
}

.mx-devis-create .mx-form-hint a {
    color: var(--mx-blue-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mx-devis-create .mx-form-hint a:hover {
    color: var(--mx-blue-700);
}

/* Navigation bas de page */
.mx-devis-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-6);
    margin-top: var(--space-6);
    border-top: 1px solid var(--mx-gray-200);
}

/* Override spécifique pages opartdevis */
body[id^="module-opartdevis"] #content.page-content.card.card-block {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* ------------------------------------------
   Page Confirmation Devis
   ------------------------------------------ */

.mx-devis-confirm {
    max-width: 1200px;
    margin: 0 auto;
}

.mx-devis-confirm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

@media (min-width: 1024px) {
    .mx-devis-confirm-grid {
        grid-template-columns: 1fr 350px;
    }
}

@media (min-width: 1600px) {
    .mx-devis-confirm {
        max-width: 75%;
    }
}

/* Header hors grille */
.mx-devis-confirm-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.mx-devis-confirm-header svg {
    width: 40px;
    height: 40px;
    color: var(--mx-green-500, #22c55e);
}

.mx-devis-confirm-header h1 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    margin: 0;
}

/* Contenu principal */
.mx-devis-confirm-content {
    background: white;
    padding: var(--space-8);
    border-radius: var(--radius-md);
}

/* Alerte succès */
.mx-devis-confirm .mx-alert-success {
    background: var(--mx-green-50, #f0fdf4);
    color: var(--mx-green-700, #15803d);
    border: 1px solid var(--mx-green-200, #bbf7d0);
    width: fit-content;
}

.mx-devis-confirm .mx-alert-success svg {
    color: var(--mx-green-500, #22c55e);
}

/* Actions principales */
.mx-devis-confirm-actions {
    margin: var(--space-6) 0;
}

.mx-devis-confirm-actions .mx-btn-primary {
    display: inline-flex;
    gap: var(--space-2);
}

/* Liens navigation */
.mx-devis-confirm-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--mx-gray-200);
}

/* Banner droite */
.mx-devis-confirm-banner {
    background: linear-gradient(135deg, var(--mx-blue-50) 0%, var(--mx-blue-100) 100%);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mx-devis-confirm-banner-content {
    text-align: center;
}

.mx-devis-confirm-banner-content > svg {
    width: 48px;
    height: 48px;
    color: var(--mx-blue-500);
    margin-bottom: var(--space-4);
}

.mx-devis-confirm-banner-content h3 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-4);
    color: var(--mx-gray-900);
}

.mx-devis-confirm-banner-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.mx-devis-confirm-banner-content li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--fs-sm);
    color: var(--mx-gray-700);
}

.mx-devis-confirm-banner-content li svg {
    width: 16px;
    height: 16px;
    color: var(--mx-blue-500);
    flex-shrink: 0;
}

/* CTA dans la banner */
.mx-devis-confirm-cta {
    margin-top: var(--space-6);
    width: 100%;
    justify-content: center;
}

/* Fix hover CTA bleu - garder texte blanc */
.mx-devis-confirm-cta:hover {
    color: white;
}

.mx-devis-confirm-cta:hover svg {
    color: white;
}

/* Labels alignés à gauche */
body#module-opartdevis-createquotation label,
body#module-opartdevis-createquotation .label {
    text-align: left;
}

/* Selects stylisés */
.mx-devis-create .mx-form-select {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--fs-sm);
    border: 1px solid var(--mx-gray-300);
    border-radius: var(--radius-md);
    background: #fff;
    transition: all var(--transition-fast);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.mx-devis-create .mx-form-select:focus {
    outline: none;
    border-color: var(--mx-blue-500);
    box-shadow: 0 0 0 3px var(--mx-blue-100);
}

/* Textareas stylisés */
.mx-devis-create .mx-form-textarea {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--fs-sm);
    border: 1px solid var(--mx-gray-300);
    border-radius: var(--radius-md);
    background: #fff;
    transition: all var(--transition-fast);
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.mx-devis-create .mx-form-textarea:focus {
    outline: none;
    border-color: var(--mx-blue-500);
    box-shadow: 0 0 0 3px var(--mx-blue-100);
}

/* Inputs stylisés */
.mx-devis-create .mx-form-input {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--fs-sm);
    border: 1px solid var(--mx-gray-300);
    border-radius: var(--radius-md);
    background: #fff;
    transition: all var(--transition-fast);
}

.mx-devis-create .mx-form-input:focus {
    outline: none;
    border-color: var(--mx-blue-500);
    box-shadow: 0 0 0 3px var(--mx-blue-100);
}

/* Responsive mobile */
@media (max-width: 767px) {
    .page-cart .mx-cart-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .mx-cart-navigation {
        flex-direction: column;
        gap: var(--space-3);
        align-items: flex-start;
    }
}

/* ==========================================
   LISTE DES DEVIS (list.tpl)
   Styles cartes copiés depuis account.css (scopé body#history)
   ========================================== */

/* Liste des devis */
body#module-opartdevis-listquotation .mx-orders-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Carte devis */
body#module-opartdevis-listquotation .mx-order-card {
    background: #fff;
    border: 1px solid var(--mx-gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Header carte */
body#module-opartdevis-listquotation .mx-order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: var(--mx-gray-50);
    border-bottom: 1px solid var(--mx-gray-200);
}

body#module-opartdevis-listquotation .mx-order-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

body#module-opartdevis-listquotation .mx-order-ref {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--mx-gray-900);
}

body#module-opartdevis-listquotation .mx-order-date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-sm);
}

body#module-opartdevis-listquotation .mx-order-date svg {
    width: 14px;
    height: 14px;
}

body#module-opartdevis-listquotation .mx-order-date--date {
    color: var(--mx-gray-700);
    font-weight: var(--fw-medium);
}

body#module-opartdevis-listquotation .mx-order-date--time {
    color: var(--mx-gray-500);
}

body#module-opartdevis-listquotation .mx-order-status {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Body carte */
body#module-opartdevis-listquotation .mx-order-card-body {
    padding: var(--space-4);
}

body#module-opartdevis-listquotation .mx-order-details {
    display: flex;
    gap: var(--space-8);
    background: var(--mx-blue-50);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

body#module-opartdevis-listquotation .mx-order-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

body#module-opartdevis-listquotation .mx-order-detail-label {
    font-size: var(--fs-xs);
    color: var(--mx-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body#module-opartdevis-listquotation .mx-order-detail-value {
    font-size: var(--fs-sm);
    color: var(--mx-gray-700);
}

/* Footer carte */
body#module-opartdevis-listquotation .mx-order-card-footer {
    padding: var(--space-3) var(--space-4);
    background: var(--mx-gray-50);
    border-top: 1px solid var(--mx-gray-200);
}

body#module-opartdevis-listquotation .mx-order-actions {
    display: flex;
    gap: var(--space-4);
}

body#module-opartdevis-listquotation .mx-order-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--mx-black);
    text-decoration: none;
    transition: color var(--transition-fast);
}

body#module-opartdevis-listquotation .mx-order-action:hover {
    color: var(--mx-orange-500);
    text-decoration: none;
}

body#module-opartdevis-listquotation .mx-order-action svg {
    width: 16px;
    height: 16px;
}

/* Statuts des devis */
body#module-opartdevis-listquotation .mx-quotation-status--validated {
    background-color: var(--mx-green-500);
}

body#module-opartdevis-listquotation .mx-quotation-status--ordered {
    background-color: var(--mx-blue-500);
}

body#module-opartdevis-listquotation .mx-quotation-status--expired {
    background-color: var(--mx-gray-400);
}

body#module-opartdevis-listquotation .mx-quotation-status--pending {
    background-color: var(--mx-orange-500);
}

/* Mobile : layout devis */
@media (max-width: 767px) {
    body#module-opartdevis-listquotation .mx-order-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    body#module-opartdevis-listquotation .mx-order-status {
        padding: var(--space-1) var(--space-2);
        font-size: 0.65rem;
        white-space: nowrap;
    }
}

/* Action supprimer */
body#module-opartdevis-listquotation .mx-order-action--delete {
    color: var(--mx-red-500, #ef4444);
}

body#module-opartdevis-listquotation .mx-order-action--delete:hover {
    color: var(--mx-red-600, #dc2626);
}

/* État vide liste devis */
body#module-opartdevis-listquotation .mx-history-empty {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8);
    background: var(--mx-blue-50);
    border-radius: var(--radius-md);
}

body#module-opartdevis-listquotation .mx-history-empty > svg {
    width: 32px;
    height: 32px;
    color: var(--mx-blue-400);
    flex-shrink: 0;
}

body#module-opartdevis-listquotation .mx-history-empty p {
    font-size: var(--fs-base);
    color: var(--mx-gray-600);
    margin: 0;
}

body#module-opartdevis-listquotation .mx-history-empty .mx-btn {
    margin-left: auto;
}

/* ==========================================
   ALERTE PANIER LIE A UN DEVIS
   ========================================== */

.mx-devis-cart-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.mx-devis-cart-alert > svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.mx-devis-cart-alert .mx-alert-content p {
    display: block;
    margin: 0 0 var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: inherit;
}

.mx-devis-cart-alert .mx-alert-content p:last-child {
    margin-bottom: 0;
}

.mx-devis-cart-alert.mx-alert-warning {
    background: var(--mx-orange-50);
    border: 1px solid var(--mx-orange-200);
    color: var(--mx-orange-800);
}

.mx-devis-cart-alert.mx-alert-warning > svg {
    color: var(--mx-orange-500);
}

.mx-devis-cart-alert.mx-alert-info {
    background: var(--mx-blue-50);
    border: 1px solid var(--mx-blue-200);
    color: var(--mx-blue-700);
}

.mx-devis-cart-alert.mx-alert-info > svg {
    color: var(--mx-blue-500);
}

.mx-devis-cart-alert .mx-alert-link {
    color: inherit;
    font-weight: var(--fw-medium);
    text-decoration: underline;
}

.mx-devis-cart-alert .mx-alert-link:hover {
    color: var(--mx-orange-500);
}

/* Alerte panier vide page création devis */
.mx-devis-empty-cart {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--mx-orange-50);
    border: 1px solid var(--mx-orange-200);
    border-radius: var(--radius-md);
    color: var(--mx-orange-700);
}

.mx-devis-empty-cart > svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--mx-orange-500);
}

.mx-devis-empty-cart .mx-alert-content p {
    display: block;
    margin: 0 0 var(--space-4);
    color: var(--mx-orange-700);
}

.mx-devis-empty-cart .mx-btn {
    margin-top: var(--space-2);
}

/* ==========================================
   MODULE ETS ONEPAGE CHECKOUT - SOCIAL LOGIN
   ========================================== */

/* Masquer notre séparateur natif quand le module social est présent */
.opc_social_form ~ .mx-auth-separator,
.opc_social_form + .mx-auth-separator,
#nvAuthSeparator:has(~ .opc_social_form),
.login-form .mx-auth-separator {
    display: none;
}

/* Container social login */
.opc_social_form {
    margin-top: var(--space-6) !important;
}

/* Style du séparateur module - comme notre mx-auth-separator */
.opc_solo_or {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-4) !important;
    margin: 0 0 var(--space-4) 0 !important;
    text-align: center;
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* Reset du style module (ligne absolute) et appliquer notre style flex */
.opc_solo_or::before,
.opc_solo_or::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--mx-gray-300) !important;
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

.opc_solo_or span {
    font-size: var(--fs-sm) !important;
    color: var(--mx-gray-500) !important;
    text-transform: uppercase !important;
    padding: 0 var(--space-2) !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1;
}

/* Page inscription - texte différent pour le séparateur */
body.registration .opc_solo_or span,
body.page-registration .opc_solo_or span {
    font-size: 0 !important;
}

body.registration .opc_solo_or span::after,
body.page-registration .opc_solo_or span::after {
    content: 'CRÉEZ VOTRE COMPTE EN 1 CLIC';
    font-size: var(--fs-sm);
}

/* Mobile - réduire lignes pour laisser place au texte */
@media (max-width: 767px) {
    .opc_solo_or {
        gap: var(--space-1) !important;
    }

    .opc_solo_or::before,
    .opc_solo_or::after {
        flex: 0 0 40px !important;
        max-width: 40px !important;
    }

    .opc_solo_or span {
        padding: 0 var(--space-1) !important;
        font-size: var(--fs-xs) !important;
    }
}

/* Boutons Social Login - Juste les icônes en gros */
.opc_social {
    display: flex !important;
    justify-content: center !important;
    gap: var(--space-4) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.opc_social .opc_social_item,
.opc_social .opc_social_item.google,
.opc_social .opc_social_item.google.light,
.opc_social .opc_social_item.paypal,
.opc_social .opc_social_item.facebook,
li.opc_social_item.google.light,
li.opc_social_item {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: auto !important;
    border-radius: 0 !important;
}

.opc_social_btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    border: 1px solid var(--mx-gray-200) !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    padding: var(--space-2) !important;
    font-size: 0 !important; /* Masque le texte */
    color: transparent !important;
    cursor: pointer;
    transition: all var(--transition-fast) !important;
}

.opc_social_btn:hover {
    opacity: 0.7 !important;
}

.opc_social_btn .ets_svg_icon,
.opc_social_item i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

.opc_social_btn .ets_svg_icon svg {
    width: 32px !important;
    height: 32px !important;
}

/* PayPal - couleur bleue */
.opc_social_item.paypal .ets_svg_icon svg {
    fill: #0070ba !important;
}

.opc_social_item.paypal .ets_svg_icon svg path {
    fill: #0070ba !important;
}