/**
 * CSS Fixes
 * Risolve conflitti tra diversi file CSS
 */

/* 
 * Fix per il conflitto user-avatar tra header.css e item-card.css
 * - Nel header.css: .user-avatar ha dimensioni 42x42px e z-index alto per header sticky
 * - Nel item-card.css: .user-avatar ha dimensioni 28x28px e z-index normale
 * - In history.css: .user-avatar ha dimensioni 50x50px e z-index normale
 * 
 * Fix for user-avatar conflict between header.css and item-card.css
 * - In header.css: .user-avatar has 42x42px dimensions and high z-index for sticky header
 * - In item-card.css: .user-avatar has 28x28px dimensions and normal z-index
 * - In history.css: .user-avatar has 50x50px dimensions and normal z-index
 */

/* Ripristiniamo lo stile corretto per l'avatar utente nell'header con z-index alto */
/* Restore correct style for user avatar in header with high z-index */
.header .user-avatar,
.header-actions .user-avatar,
.header-icons .user-avatar {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: var(--spacing-sm);
  border: none;
  cursor: pointer;
  position: relative;
  z-index: calc(var(--z-index-sticky) + 5);
}

/* Stile per l'avatar nelle card - z-index basso per non interferire */
/* Style for avatar in cards - low z-index to not interfere */
.card-user .user-avatar,
.card-footer .user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: auto;
  position: relative;
  z-index: 1;
}

/* Stile per l'avatar nella pagina history - z-index normale */
/* Style for avatar in history page - normal z-index */
.history-page .user-avatar,
.offer-history-item .user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  position: relative;
  z-index: 1;
}

/*
 * Fix per il conflitto tra .user-avatar nella pagina offers e header
 * - Rinominata in .offer-user-avatar nella pagina offers/list.php
 * - Rinominata in .exchange-user-avatar nella pagina offers/exchange-details.php
 */

/* Aggiorniamo anche il menu utente per garantire che sia visibile */
#userMenuDropdown.visible {
  display: flex !important;
}

/* 
 * Fix per migliorare il contrasto e l'usabilità del menu utente 
 */
.user-menu-dropdown {
  border: 1px solid #eee;
}

.user-menu-header {
  background-color: #81cdc7;
  color: white;
}

/* Stile hover per evidenziare meglio le voci selezionate */
.user-menu-item a:hover {
  background-color: rgba(129, 205, 199, 0.1);
}

/* Fix specifico per la pagina di scambio con griglia unificata */
.exchange-container-unified {
    max-width: 550px !important;
    margin: 0 auto !important;
}

/* Fix per il gap specifico nella pagina di scambio */
.exchange-container-flex {
    gap: 5px !important;
}

/* Fix specifico per la visualizzazione uniforme nella pagina di scambio */
.uniform-view .item-card {
    width: 110px !important;
    height: 200px !important;
    margin: 0 !important;
}

@media (max-width: 480px) {
    .uniform-view .unified-items-grid {
        grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)) !important;
        max-width: 100% !important;
    }
}

@media (max-width: 360px) {
    .uniform-view .unified-items-grid {
        grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)) !important;
        max-width: 100% !important;
    }
}

/* 
 * Fix per conflitti tra .btn e .btn-gold
 * Risolve problemi nelle pagine exchange e 404
 * Fix for conflicts between .btn and .btn-gold
 * Resolves issues in exchange pages and 404
 */

/* Assicura che .btn-gold nell'header non sia influenzato da stili .btn nelle pagine */
/* Ensure .btn-gold in header is not affected by .btn styles in pages */
/* NOTA: Non forziamo display e border-radius qui per permettere alle regole desktop/mobile di funzionare */
/* NOTE: We don't force display and border-radius here to allow desktop/mobile rules to work */
.header .desktop-add-btn.btn-gold,
.header-actions .desktop-add-btn.btn-gold {
    background-color: transparent !important;
    border: 2px solid var(--color-secondary) !important;
    color: var(--color-secondary) !important;
    font-weight: var(--font-weight-medium) !important;
    padding: var(--spacing-xs) var(--spacing-lg) !important;
    border-radius: 30px !important; /* Desktop: border-radius arrotondato */
    transition: all var(--transition-fast) !important;
    font-size: 1.1rem !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    box-shadow: none !important;
    transform: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    user-select: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* Mobile: border-radius circolare gestito da header.css - non sovrascrivere */
/* Mobile: circular border-radius managed by header.css - don't override */

/* Desktop: forza display solo per desktop-add-btn */
/* Desktop: force display only for desktop-add-btn */
@media (min-width: 601px) {
    .header .desktop-add-btn.btn-gold,
    .header-actions .desktop-add-btn.btn-gold {
        display: inline-block !important;
        border-radius: 30px !important; /* Desktop: arrotondato */
    }
    
    .header .mobile-add-btn.btn-gold,
    .header-actions .mobile-add-btn.btn-gold {
        display: none !important;
    }
}

/* Mobile: assicura che il pulsante mobile sia sempre circolare */
/* Mobile: ensure mobile button is always circular */
@media (max-width: 600px) {
    .header .mobile-add-btn.btn-gold,
    .header-actions .mobile-add-btn.btn-gold {
        border-radius: 50% !important; /* Mobile: sempre circolare */
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        background-color: #f9a621 !important;
        color: white !important;
        border: 2px solid #f9a621 !important;
    }
}

/* Previeni che stili .btn nelle pagine exchange interferiscano con .btn-gold - Desktop */
/* Prevent .btn styles in exchange pages from interfering with .btn-gold - Desktop */
.header .desktop-add-btn.btn-gold:hover,
.header-actions .desktop-add-btn.btn-gold:hover {
    color: white !important;
    background-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Mobile: hover state per pulsante circolare */
/* Mobile: hover state for circular button */
.header .mobile-add-btn.btn-gold:hover,
.header-actions .mobile-add-btn.btn-gold:hover {
    background-color: #e8941d !important; /* Orange più scuro al hover */
    border-color: #e8941d !important;
    color: white !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Assicura che .btn nelle pagine exchange non interferisca con .btn-gold */
/* Ensure .btn in exchange pages doesn't interfere with .btn-gold */
.offers-exchange-page .btn:not(.btn-gold),
.exchange-shipping-page .btn:not(.btn-gold),
.exchange-payment-page .btn:not(.btn-gold),
.in-progress-page .btn:not(.btn-gold) {
    /* Questi stili sono specifici per le pagine exchange e non influenzano .btn-gold */
    /* These styles are specific to exchange pages and don't affect .btn-gold */
}

/* REGOLA CRITICA: Escludi esplicitamente .btn-gold da qualsiasi stile .btn generico */
/* CRITICAL RULE: Explicitly exclude .btn-gold from any generic .btn style */
.btn:not(.btn-gold),
.offers-exchange-page .btn:not(.btn-gold),
.exchange-shipping-page .btn:not(.btn-gold),
.exchange-payment-page .btn:not(.btn-gold),
.in-progress-page .btn:not(.btn-gold),
.error-page .btn:not(.btn-gold) {
    /* Questi stili NON si applicano a .btn-gold */
    /* These styles do NOT apply to .btn-gold */
}

/* Assicura che .btn nella pagina 404 non interferisca con .btn-gold */
/* Ensure .btn in 404 page doesn't interfere with .btn-gold */
.error-page .btn {
    /* Stili specifici per la pagina 404 */
    /* Specific styles for 404 page */
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    min-width: 140px !important;
    justify-content: center !important;
}

/* Previeni che .btn-gold erediti stili da .btn - MASSIMA PRIORITÀ */
/* Prevent .btn-gold from inheriting styles from .btn - MAXIMUM PRIORITY */
/* NOTA: display e border-radius gestiti separatamente per desktop/mobile */
/* NOTE: display and border-radius managed separately for desktop/mobile */
.header .desktop-add-btn.btn-gold,
.header-actions .desktop-add-btn.btn-gold,
.header-top .desktop-add-btn.btn-gold {
    /* Reset completo per evitare ereditarietà da .btn - SOLO DESKTOP */
    /* Complete reset to avoid inheritance from .btn - DESKTOP ONLY */
    /* display e border-radius gestiti dalle regole desktop/mobile - non forzare qui */
    /* display and border-radius managed by desktop/mobile rules - don't force here */
    font-weight: var(--font-weight-medium) !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    user-select: none !important;
    border: 2px solid var(--color-secondary) !important;
    padding: var(--spacing-xs) var(--spacing-lg) !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    border-radius: 30px !important; /* Desktop: arrotondato */
    transition: all var(--transition-fast) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    color: var(--color-secondary) !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transform: none !important;
    /* Previeni override da stili inline nelle pagine */
    /* Prevent override from inline styles in pages */
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0 !important;
    flex: none !important;
}

/* Protezione aggiuntiva per hover state - Desktop */
/* Additional protection for hover state - Desktop */
.header .desktop-add-btn.btn-gold:hover,
.header-actions .desktop-add-btn.btn-gold:hover,
.header-top .desktop-add-btn.btn-gold:hover {
    color: white !important;
    background-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Protezione aggiuntiva per hover state - Mobile */
/* Additional protection for hover state - Mobile */
.header .mobile-add-btn.btn-gold:hover,
.header-actions .mobile-add-btn.btn-gold:hover {
    background-color: #e8941d !important; /* Orange più scuro al hover */
    border-color: #e8941d !important;
    color: white !important;
    transform: none !important;
    box-shadow: none !important;
}