/* ============================================================================
   CARDS PREVIEW STYLES - POE1 Items
   Styles configurables pour les previews des cards d'items POE1
   ============================================================================ */

/* ============================================================================
   SECTION 1: GLOBAL PREVIEW STYLES (base pour tous les modes)
   ============================================================================ */

/* Force normal scale for all previews */
.card-preview [data-poe-item] {
    transform: scale(1) !important;
}

/* Remove margins from all item-hover elements */
.item-hover {
    margin: 0 !important;
}

/* Common styles for all static preview modes */
.item-card[data-preview-mode="static"] .card-preview,
.item-card[data-preview-mode="minimaliste"] .card-preview,
.item-card[data-preview-mode="minimaliste-extra"] .card-preview {
    margin: 0 !important;
    padding: 0 !important;
    animation: slideDownPreview 0.5s ease-out;
}

/* Animation slide-down pour l'apparition de la preview */
@keyframes slideDownPreview {
    from {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 1000px;
    }
}

.item-card[data-preview-mode="static"] .poe1-static-wrapper,
.item-card[data-preview-mode="minimaliste"] .poe1-static-wrapper,
.item-card[data-preview-mode="minimaliste-extra"] .poe1-static-wrapper {
    padding: 0 !important;
}

.item-card[data-preview-mode="static"] .item-hover,
.item-card[data-preview-mode="minimaliste"] .item-hover,
.item-card[data-preview-mode="minimaliste-extra"] .item-hover {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}


/* ============================================================================
   SECTION 2: PREVIEW MODE - HOVER (mode actuel par défaut)
   ============================================================================ */

/* Aucun style spécifique - comportement par défaut */


/* ============================================================================
   SECTION 3: PREVIEW MODE - STATIC (mode actuel static)
   ============================================================================ */

/* Réduction progressive de la taille de police */
.item-card[data-preview-mode="static"] .item-hover {
    font-size: 0.95em;
}


/* ============================================================================
   SECTION 4: PREVIEW MODE - MINIMALISTE (style Beta)
   ============================================================================ */

/* Pas besoin de désactiver pointer-events, géré par JavaScript */
.item-card[data-preview-mode="minimaliste"] {
    cursor: pointer;
}

/* Réduction progressive de la taille de police */
.item-card[data-preview-mode="minimaliste"] .item-hover {
    font-size: 0.9em;
}

/* Masquer le header de la card (titre + prix) */
.item-card[data-preview-mode="minimaliste"][data-game="poe1"] .card-header {
    display: none !important;
}

/* Retirer la bordure du body quand le header est masqué */
.item-card[data-preview-mode="minimaliste"][data-game="poe1"] .card-body {
    border-top: none !important;
}

/* Positionner le prix en float sur l'image */
.item-card[data-preview-mode="minimaliste"][data-game="poe1"] .h-48 {
    position: relative;
}

/* Afficher le prix en overlay sur l'image - sera injecté dynamiquement */
.item-card[data-preview-mode="minimaliste"][data-game="poe1"] .h-48 .price-overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.625rem;
    background: rgb(111, 47, 95);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
    z-index: 10;
}


/* ============================================================================
   SECTION 5: PREVIEW MODE - MINIMALISTE EXTRA (style Beta optimisé)
   ============================================================================ */

/* Pas besoin de désactiver pointer-events, géré par JavaScript */
.item-card[data-preview-mode="minimaliste-extra"] {
    cursor: pointer;
}

/* Réduction progressive de la taille de police - ultra compact */
.item-card[data-preview-mode="minimaliste-extra"] .item-hover {
    font-size: 0.82em;
    line-height: 1.3;
}

/* Hérite de tous les styles minimaliste */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe1"] .card-header {
    display: none !important;
}

/* Retirer la bordure du body quand le header est masqué */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe1"] .card-body {
    border-top: none !important;
}

.item-card[data-preview-mode="minimaliste-extra"][data-game="poe1"] .h-48 {
    position: relative;
}

.item-card[data-preview-mode="minimaliste-extra"][data-game="poe1"] .h-48 .price-overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.625rem;
    background: rgb(111, 47, 95);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
    z-index: 10;
}

/* Optimisations supplémentaires pour minimaliste-extra */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe1"] .card-preview {
    padding: 0 !important;
}

.item-card[data-preview-mode="minimaliste-extra"][data-game="poe1"] .item-hover {
    padding: 0.125rem !important;
}

.item-card[data-preview-mode="minimaliste-extra"][data-game="poe1"] .item-hover * {
    margin: 0 !important;
}

.item-card[data-preview-mode="minimaliste-extra"][data-game="poe1"] .flex.gap-2 {
    gap: 0 !important;
}

/* Masquer les séparateurs */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe1"] img[alt="separator"] {
    display: none !important;
}

/* Masquer le header double */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe1"] .rare-header__double {
    display: none !important;
}


/* ============================================================================
   SECTION 6: POE2 ITEMS - PREVIEW MODES
   POE2 utilise la librairie poe-item-display avec structure différente
   ============================================================================ */

/* Common styles for all POE2 static preview modes */
.item-card[data-preview-mode="static"][data-game="poe2"] .card-preview,
.item-card[data-preview-mode="minimaliste"][data-game="poe2"] .card-preview,
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .card-preview {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Force POE2 item to fit card width */
.item-card[data-preview-mode="static"][data-game="poe2"] .poe2-item,
.item-card[data-preview-mode="minimaliste"][data-game="poe2"] .poe2-item,
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .poe2-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Reduce padding on item content wrapper */
.item-card[data-preview-mode="static"][data-game="poe2"] .item-content-wrapper,
.item-card[data-preview-mode="minimaliste"][data-game="poe2"] .item-content-wrapper,
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .item-content-wrapper {
    padding: 0.25rem !important;
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Reduce horizontal padding on item content */
.item-card[data-preview-mode="static"][data-game="poe2"] .item-content,
.item-card[data-preview-mode="minimaliste"][data-game="poe2"] .item-content,
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .item-content {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Reduce spacing in item content and prevent overflow */
.item-card[data-preview-mode="static"][data-game="poe2"] .item-content-inner,
.item-card[data-preview-mode="minimaliste"][data-game="poe2"] .item-content-inner,
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .item-content-inner {
    gap: 0.125rem !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Prevent text overflow on spans */
.item-card[data-preview-mode="static"][data-game="poe2"] .item-content-inner span,
.item-card[data-preview-mode="minimaliste"][data-game="poe2"] .item-content-inner span,
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .item-content-inner span {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Allow wrapping for item header */
.item-card[data-preview-mode="static"][data-game="poe2"] .item-header span,
.item-card[data-preview-mode="minimaliste"][data-game="poe2"] .item-header span,
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .item-header span {
    white-space: normal !important;
    word-break: break-word !important;
}

/* ============================================================================
   POE2 - PREVIEW MODE STATIC
   ============================================================================ */

.item-card[data-preview-mode="static"][data-game="poe2"] .poe2-item {
    font-size: 0.95em;
}

/* ============================================================================
   POE2 - PREVIEW MODE MINIMALISTE
   ============================================================================ */

/* Pas besoin de désactiver pointer-events, géré par JavaScript */
.item-card[data-preview-mode="minimaliste"][data-game="poe2"] {
    cursor: pointer;
}

/* Réduction de la taille de police */
.item-card[data-preview-mode="minimaliste"][data-game="poe2"] .poe2-item {
    font-size: 0.9em;
}

/* Masquer le header de la card */
.item-card[data-preview-mode="minimaliste"][data-game="poe2"] .card-header {
    display: none !important;
}

/* Retirer la bordure du body quand le header est masqué */
.item-card[data-preview-mode="minimaliste"][data-game="poe2"] .card-body {
    border-top: none !important;
}

/* Positionner le prix en overlay sur l'image */
.item-card[data-preview-mode="minimaliste"][data-game="poe2"] .h-48 {
    position: relative;
}

.item-card[data-preview-mode="minimaliste"][data-game="poe2"] .h-48 .price-overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.625rem;
    background: rgb(111, 47, 95);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
    z-index: 10;
}

/* ============================================================================
   POE2 - PREVIEW MODE MINIMALISTE EXTRA
   ============================================================================ */

/* Pas besoin de désactiver pointer-events, géré par JavaScript */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] {
    cursor: pointer;
}

/* Réduction ultra-compacte */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .poe2-item {
    font-size: 0.82em;
    line-height: 1.3;
}

/* Réduire encore plus le padding pour minimaliste-extra */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .item-content-wrapper {
    padding: 0.125rem !important;
}

/* Masquer le header */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .card-header {
    display: none !important;
}

/* Retirer la bordure du body quand le header est masqué */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .card-body {
    border-top: none !important;
}

/* Prix en overlay */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .h-48 {
    position: relative;
}

.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .h-48 .price-overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.625rem;
    background: rgb(111, 47, 95);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
    z-index: 10;
}

/* Réduire les espacements internes */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .item-content-inner {
    gap: 0 !important;
}

.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .item-content-inner span {
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Réduire l'espacement du séparateur */
.item-card[data-preview-mode="minimaliste-extra"][data-game="poe2"] .item-separator {
    margin: 0.125rem 0 !important;
    height: 1px !important;
}