/* Médaille Configurator Styles */

.medaille-configurator {
    font-family: inherit !important; /* Utilise la police du thème */
}

/* Retire le container blanc qui fait bizarre */
.medaille-configurator > div:first-child {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Retire aussi la box avec rounded-2xl et shadow-xl */
.medaille-configurator .w-full.bg-white.rounded-2xl.shadow-xl {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Cache le titre et sous-titre du configurateur (déjà présent dans le titre du produit) */
.medaille-configurator .text-3xl.font-bold.text-center,
.medaille-configurator .text-center.text-gray-500.mb-6 {
    display: none !important;
}

/* Animation des tabs Recto/Verso - Version subtile */
.medaille-configurator button[id^="tab-"] {
    transition: all 0.25s ease !important;
}

/* Style for active tab - couleurs du thème avec transition douce */
.medaille-configurator .tab-active {
    border-color: var(--wd-primary-color, #83b735) !important;
    background-color: var(--wd-primary-color, #83b735) !important;
    color: white !important;
}

/* Hover effect subtil sur tabs inactifs */
.medaille-configurator button[id^="tab-"]:not(.tab-active):hover {
    background-color: rgba(131, 183, 53, 0.1) !important;
    border-color: rgba(131, 183, 53, 0.4) !important;
}

/* Style for disabled tab */
.medaille-configurator button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Limiter la hauteur du textarea message à 4 lignes */
.medaille-configurator #phone-text {
    max-height: 5.5rem !important; /* Environ 4 lignes */
    min-height: 5.5rem !important;
    height: 5.5rem !important;
    overflow-y: auto !important;
    line-height: 1.4 !important;
}

/* Style Cards pour les boutons (Taille et Matière) - Tailwind Style propre */
.medaille-configurator .size-option,
.medaille-configurator .material-option {
    border-color: #e5e7eb !important;
    transition: all 0.15s ease-in-out !important;
    padding: 0.375rem 0.5rem !important; /* Padding encore plus réduit - très fin */
}

.medaille-configurator .size-option:hover,
.medaille-configurator .material-option:hover {
    border-color: #d1d5db !important;
    background-color: #f9fafb !important;
}

/* Option sélectionnée */
.medaille-configurator .size-option:has(input:checked),
.medaille-configurator .material-option:has(input:checked) {
    background-color: var(--wd-primary-color, #83b735) !important;
    border-color: var(--wd-primary-color, #83b735) !important;
    border-width: 2px !important;
}

.medaille-configurator .size-option:has(input:checked) span,
.medaille-configurator .material-option:has(input:checked) span {
    color: white !important;
}

/* Focus state */
.medaille-configurator .size-option:focus-within,
.medaille-configurator .material-option:focus-within {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(131, 183, 53, 0.1) !important;
}

/* Style for canvas text dragging cursor */
.medaille-configurator .grabbable {
    cursor: grab;
}

.medaille-configurator .grabbing {
    cursor: grabbing;
}

/* Styling for the font picker modal */
.medaille-configurator #font-modal-bg.hidden {
    display: none;
}

.medaille-configurator #font-modal-bg {
    background-color: rgba(0, 0, 0, 0.6) !important; /* Background plus sombre mais pas noir */
    z-index: 99999 !important; /* Au-dessus de tous les menus */
}

.medaille-configurator #font-modal {
    max-height: 70vh !important; /* Plus petit pour mobile */
    margin: auto !important;
}

/* Indicateur de scroll pour les polices */
.medaille-configurator #font-list {
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--wd-primary-color, #83b735) #f3f4f6;
}

.medaille-configurator #font-list::-webkit-scrollbar {
    width: 8px;
}

.medaille-configurator #font-list::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.medaille-configurator #font-list::-webkit-scrollbar-thumb {
    background: var(--wd-primary-color, #83b735);
    border-radius: 4px;
}

.medaille-configurator #font-list::-webkit-scrollbar-thumb:hover {
    background: var(--wd-primary-color-hover, #6fa02a);
}

/* Indicateur visuel qu'il y a plus de contenu en bas */
.medaille-configurator #font-list::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.9));
    pointer-events: none;
}

/* Style for selected style */
.medaille-configurator .style-selected {
    outline: 2px solid var(--wd-primary-color, #83b735) !important;
    outline-offset: 2px;
}

/* Three.js 3D Container */
.medaille-configurator .canvas-container {
    position: relative;
}

.medaille-configurator #threejs-container {
    border-radius: 0.5rem !important;
}

.medaille-configurator #threejs-container canvas {
    display: block !important;
    border-radius: 0.5rem !important;
}

/* Sticky preview on mobile after scroll */
@media (max-width: 768px) {
    .medaille-configurator .mobile-preview-container {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--header-height, 101px) + 0.5rem);
        z-index: 300; /* Will be dynamically adjusted by JS to be below header */
        background: white;
        padding: 0.75rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-radius: 0.75rem;
        margin-bottom: 1rem;
        transition: all 0.3s ease-in-out;
    }

    /* Reduce canvas size on mobile */
    .medaille-configurator .canvas-container {
        max-width: 240px !important;
        transition: all 0.3s ease-in-out;
    }

    .medaille-configurator .canvas-sticky .mt-4 {
        margin-top: 0.25rem !important;
    }

    .medaille-configurator .canvas-sticky .text-sm {
        font-size: 0.7rem !important;
    }

    /* Controls don't need extra padding with sticky */
    .medaille-configurator .controls-wrapper {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Compact mode when scrolled - use fixed position */
    .medaille-configurator .mobile-preview-container.compact {
        position: fixed !important;
        top: var(--header-height, 101px) !important; /* Stick below header, not at top */
        left: 0;
        right: 0;
        z-index: 300; /* Below header (header is 390) but above content */
        padding: 0.5rem 1rem;
        margin-bottom: 0;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        border-radius: 0 !important;
    }

    .medaille-configurator .mobile-preview-container.compact .canvas-container {
        max-width: 80px !important;
    }

    .medaille-configurator .mobile-preview-container.compact #threejs-container {
        width: 80px !important;
        height: 80px !important;
    }

    /* Hide price display in compact mode */
    .medaille-configurator .mobile-preview-container.compact .canvas-sticky .mt-4 {
        display: none;
    }
}

/* Desktop: Sticky preview on the left */
@media (min-width: 769px) {
    .medaille-configurator .mobile-preview-container {
        position: -webkit-sticky;
        position: sticky;
        top: 130px; /* Below the header (header ~100px + spacing) */
        align-self: flex-start; /* Important: stick to the top of the flex container */
        background: none;
        padding: 0;
        margin: 0;
    }
}

/* Prevent scroll while dragging */
body.dragging {
    overflow: hidden;
    touch-action: none;
}

/* Boutons avec les couleurs du thème */
.medaille-configurator button[id*="add-to-cart"],
.medaille-configurator .bg-blue-600,
.medaille-configurator .text-blue-600,
.medaille-configurator .border-blue-500,
.medaille-configurator .focus\:border-blue-500:focus,
.medaille-configurator .focus\:ring-blue-500:focus {
    --tw-bg-opacity: 1 !important;
    background-color: var(--wd-primary-color, #83b735) !important;
    color: white !important;
}

.medaille-configurator button[id*="add-to-cart"]:hover,
.medaille-configurator .hover\:bg-blue-700:hover {
    background-color: var(--wd-primary-color-hover, #6fa02a) !important;
}

/* Checkboxes et radios - Style "Small cards" moderne */
.medaille-configurator input[type="checkbox"],
.medaille-configurator input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 4px !important;
    background-color: white !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.medaille-configurator input[type="radio"] {
    border-radius: 50% !important;
}

.medaille-configurator input[type="checkbox"]:checked,
.medaille-configurator input[type="radio"]:checked {
    background-color: var(--wd-primary-color, #83b735) !important;
    border-color: var(--wd-primary-color, #83b735) !important;
}

/* Checkmark icon pour checkbox checked */
.medaille-configurator input[type="checkbox"]:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

/* Dot pour radio checked */
.medaille-configurator input[type="radio"]:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: white !important;
}

.medaille-configurator input[type="checkbox"]:focus,
.medaille-configurator input[type="radio"]:focus {
    outline: none !important;
    border-color: var(--wd-primary-color, #83b735) !important;
    box-shadow: 0 0 0 3px rgba(131, 183, 53, 0.1) !important;
}

/* Style des labels - Small cards style */
.medaille-configurator label.flex.items-center {
    position: relative !important;
    padding: 12px 16px !important;
    background-color: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.medaille-configurator label.flex.items-center:hover {
    background-color: #fafafa !important;
    border-color: #d1d5db !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

/* Quand l'input est checked - Style "card" sélectionné */
.medaille-configurator label:has(input:checked) {
    background-color: rgba(131, 183, 53, 0.08) !important;
    border-color: var(--wd-primary-color, #83b735) !important;
    border-width: 2px !important;
    box-shadow: 0 2px 8px rgba(131, 183, 53, 0.15) !important;
}

/* Section bleue en couleur du thème */
.medaille-configurator .bg-blue-50 {
    background-color: rgba(131, 183, 53, 0.08) !important;
}

/* Séparation visuelle entre les sections */
.medaille-configurator .bg-gray-50 {
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Section "Informations de la médaille" plus visible */
.medaille-configurator .bg-blue-50.rounded-lg {
    border: 2px solid rgba(131, 183, 53, 0.2) !important;
    box-shadow: 0 2px 4px rgba(131, 183, 53, 0.1) !important;
}

/* Titres de sections plus visibles */
.medaille-configurator .bg-gray-50 h3,
.medaille-configurator .bg-blue-50 h3 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
}

.medaille-configurator .bg-blue-50 h3 {
    border-bottom-color: rgba(131, 183, 53, 0.3) !important;
    color: #166534 !important;
}

/* Espacement entre sections */
.medaille-configurator .bg-gray-50,
.medaille-configurator .bg-blue-50 {
    margin-bottom: 1.5rem !important;
}

/* Espacement spécial pour la dernière section avant le bouton */
.medaille-configurator .bg-blue-50.mt-4 {
    margin-top: 2rem !important;
}

/* Bouton "Enlever le style" avec icône poubelle */
.medaille-configurator button[id$="-remove-style-btn"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    padding: 8px 12px !important;
    margin-top: 12px !important;
    font-size: 0.875rem !important;
    background-color: transparent !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.medaille-configurator button[id$="-remove-style-btn"]:hover {
    background-color: #fef2f2 !important;
    border-color: #dc2626 !important;
}

/* Icône poubelle avant le texte */
.medaille-configurator button[id$="-remove-style-btn"]::before {
    content: '🗑️';
    font-size: 1rem;
}

/* Mobile: modal encore plus petit sur petits écrans */
@media (max-width: 640px) {
    .medaille-configurator #font-modal {
        max-height: 60vh !important;
        max-width: 90vw !important;
    }
}

/* Bouton "Créer une nouvelle médaille" en mode édition */
.medaille-configurator .medaille-new-button {
    display: block !important;
    width: 100% !important;
    margin-top: 1rem !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #374151 !important;
    background-color: white !important;
    border: 2px solid var(--wd-primary-color, #83b735) !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.medaille-configurator .medaille-new-button:hover {
    background-color: rgba(131, 183, 53, 0.05) !important;
    border-color: var(--wd-primary-color-hover, #6fa02a) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
}