/* ============================================
   CUSTOM CSS - TEMA ELEGANTE, FEMMINILE E SOFISTICATO
   Per PrestaShop 9 - Tema Hummingbird
   Palette: Grigio rosato, Arancione sofisticato (#ff8b14), Bianco
   Font: Raleway per tutto il sito
   ============================================ */

/* ---------- 1. IMPORT FONT RALEWAY ---------- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');

/* ---------- 0. SOVRASCRITTURA VARIABILI PRESTASHOP BLU ---------- */
:root {
    /* Sostituisce TUTTI i blu di default di PrestaShop con grigio scuro */
    --primary-color: #333333 !important;          /* Grigio scuro invece del blu */
    --primary-hover-color: #FF8B14 !important;    /* Arancione al hover */
    --secondary-color: #666666 !important;        /* Grigio medio */
    --secondary-hover-color: #FF8B14 !important;  /* Arancione al hover */
    
    /* Colori di testo */
    --text-color: #5A5A5A !important;
    --text-hover-color: #FF8B14 !important;
    
    /* Bordi */
    --border-color: #E8DED6 !important;
    --border-hover-color: #FF8B14 !important;
}

/* ---------- CORREZIONI SPECIFICHE PER PULSANTI BLU ---------- */

/* 1. Pulsanti "Vedi dettagli", "Confronta", "Wishlist" */
.btn-outline-primary {
    border-color: #333333 !important;    /* Grigio scuro */
    color: #333333 !important;           /* Grigio scuro */
}
.btn-outline-primary:hover {
    border-color: #FF8B14 !important;    /* Arancione */
    color: #FF8B14 !important;           /* Arancione */
    background-color: transparent !important;
}

/* 2. Link blu nelle descrizioni prodotti e pagine CMS */
.product-description a,
.cms-content a,
.page-content a,
#product-description a,
.rte a {
    color: #333333 !important;           /* Grigio scuro invece di blu */
    text-decoration: underline;
}
.product-description a:hover,
.cms-content a:hover,
.page-content a:hover,
#product-description a:hover,
.rte a:hover {
    color: #FF8B14 !important;           /* Arancione al hover */
}

/* 3. Badge e etichette blu */
.badge.badge-primary,
.label.label-primary,
.product-flag.discount {
    background-color: #333333 !important;    /* Grigio scuro */
    color: white !important;
}

/* 4. Input focus blu */
.form-control:focus,
.form-select:focus {
    border-color: #FF8B14 !important;    /* Arancione invece di blu */
    box-shadow: 0 0 0 0.2rem rgba(255, 139, 20, 0.25) !important;
}

/* 5. Pulsanti dropdown e azioni */
.dropdown-item:focus,
.dropdown-item:hover {
    background-color: rgba(255, 139, 20, 0.1) !important;
    color: #FF8B14 !important;
}

/* 6. Tab attive (spesso blu) */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
    border-bottom-color: #FF8B14 !important;    /* Arancione */
    color: #333333 !important;                  /* Grigio scuro */
}

/* 7. Checkbox e radio button selezionati */
.form-check-input:checked {
    background-color: #333333 !important;       /* Grigio scuro */
    border-color: #333333 !important;
}

/* 8. Pulsanti nella modale carrello */
.modal-footer .btn-primary {
    background-color: #333333 !important;       /* Grigio scuro */
    border-color: #333333 !important;
}
.modal-footer .btn-primary:hover {
    background-color: #FF8B14 !important;       /* Arancione */
    border-color: #FF8B14 !important;
}

/* 9. Link nelle tabelle (ordini, storico) */
.table a {
    color: #333333 !important;                  /* Grigio scuro */
}
.table a:hover {
    color: #FF8B14 !important;                  /* Arancione */
}

* {
    box-sizing: border-box;
}

/* ---------- 2. VARIABILI COLORI AGGIORNATE ---------- */
:root {
    --color-primary: #FAF7F5;     /* Grigio chiaro rosato - sfondo principale */
    --color-accent: #FF8B14;      /* Arancione sofisticato - per accenti */
    --color-secondary: #F5F0ED;   /* Grigio rosato più scuro - per sezioni */
    --color-text: #5A5A5A;        /* Grigio medio - per testo principale */
    --color-text-dark: #333333;   /* Grigio scuro - per titoli */
    --color-border: #E8DED6;      /* Beige-grigio chiaro - per bordi */
    --color-white: #FFFFFF;       /* Bianco puro */
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- 3. CORPO DEL SITO - SFONDO GRIGIO ROSATO ---------- */
body {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 400;
    color: var(--color-text);
    background-color: var(--color-primary) !important;
    line-height: 1.7;
}

/* ---------- 4. TIPOGRAFIA - SOLO RALEWAY ---------- */
h1, h2, h3, h4, h5, h6,
.product-title, .page-header, .h1, .h2, .h3, .h4,
.card-title, .block-title, .feature-name,
.price, .product-price, .modal-title,
.footer-title, .newsletter-title {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important;
    color: var(--color-text-dark) !important;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

h1, .h1 { 
    font-size: 2.8rem; 
    margin-bottom: 1.5rem;
    font-weight: 700 !important;
}
h2, .h2 { 
    font-size: 2.2rem; 
    margin-bottom: 1.2rem;
    position: relative;
    padding-bottom: 15px;
    font-weight: 600 !important;
}
h2:after, .h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: var(--color-accent);
}

/* ---------- 5. LINK - HOVER IN ARANCIONE ---------- */
a {
    color: var(--color-text-dark);
    text-decoration: none;
    transition: var(--transition-smooth);
}
a:hover {
    color: var(--color-accent) !important; /* Sostituisce il blu */
}

/* Applica a tutti i link specifici del sito */
.top-menu a:hover,
.user-info a:hover,
.blockcart a:hover,
.product-title a:hover,
.category-name a:hover,
.footer a:hover,
.breadcrumb a:hover,
.pagination a:hover,
.layered-filter a:hover,
#search_filters a:hover,
#footer a:hover,
#left-column a:hover,
#right-column a:hover {
    color: var(--color-accent) !important;
}

/* ---------- 6. HEADER CHIARO ---------- */
#header {
    background-color: var(--color-white) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: var(--transition-smooth);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

/* Menu di navigazione */
#header .top-menu > li > a {
    color: var(--color-text-dark) !important;
    font-weight: 500;
    text-transform: none;
    font-size: 1rem;
    letter-spacing: 0.5px;
    padding: 8px 22px !important;
    border-radius: 20px;
    transition: var(--transition-smooth);
}
#header .top-menu > li > a:hover,
#header .top-menu > li > a.active {
    color: var(--color-accent) !important;
    background-color: rgba(255, 139, 20, 0.08);
}

/* ---------- 7. PULSANTI ---------- */
.btn-primary, .add-to-cart {
    background-color: transparent !important;
    border: 2px solid var(--color-accent) !important;
    color: var(--color-accent) !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    padding: 12px 32px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: var(--transition-smooth) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-primary:before, .add-to-cart:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
    z-index: -1;
}
.btn-primary:hover, .add-to-cart:hover {
    color: white !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 139, 20, 0.25) !important;
}
.btn-primary:hover:before, .add-to-cart:hover:before {
    width: 100%;
}

/* ---------- 8. PRODOTTI ---------- */
.product-miniature {
    background-color: var(--color-white);
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: var(--transition-smooth);
    margin-bottom: 30px;
}
.product-miniature:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--color-accent) !important;
}

/* PREZZO - in arancione */
.product-price-and-shipping .price {
    color: var(--color-accent) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
}

/* ---------- 9. FOOTER - TESTO BIANCO, HOVER ARANCIONE ---------- */
#footer {
    background-color: #3A3A3A !important; /* Grigio scuro per contrasto */
    color: var(--color-white) !important;
    border-top: 3px solid var(--color-accent) !important;
    padding-top: 60px !important;
    margin-top: 80px;
}

/* Testo base del footer in bianco */
#footer,
#footer p,
#footer span:not(.price):not(.product-price),
#footer li,
#footer div:not(.btn):not(button):not(input):not(select) {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Titoli footer in bianco (SOLO di default) */
#footer h4, 
#footer h5, 
#footer .footer-title,
#footer .block-title,
#footer .h4,
#footer .h5 {
    color: var(--color-white) !important;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
    font-weight: 600 !important;
}
#footer h4:after, 
#footer h5:after,
#footer .footer-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--color-accent);
}

/* IMPORTANTE: Link footer - bianco di default, ARANCIONE al hover */
#footer a,
#footer a:link,
#footer a:visited,
#footer .link,
#footer .menu-item {
    color: var(--color-white) !important;
    transition: var(--transition-smooth) !important;
    opacity: 0.9;
}

/* HOVER: diventa arancione */
#footer a:hover,
#footer a:focus,
#footer a:active,
#footer .link:hover,
#footer .menu-item:hover,
#footer li a:hover,
#footer .block a:hover,
#footer .links a:hover {
    color: var(--color-accent) !important; /* ARANCIONE al passaggio mouse */
    opacity: 1;
}

/* Effetto spostamento per i link di navigazione */
#footer ul.links a:hover,
#footer ul.menu a:hover,
#footer .footer-block a:hover {
    padding-left: 5px;
}

/* Newsletter - mantiene il comportamento normale */
#footer .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--color-white) !important;
}
#footer .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Pulsanti nel footer - comportamento speciale */
#footer .btn-primary,
#footer .btn-secondary,
#footer .newsletter-btn {
    color: initial !important; /* Non forzare bianco sui pulsanti */
}
#footer .btn-primary:hover,
#footer .newsletter-btn:hover {
    color: white !important; /* Testo bianco su sfondo arancione */
}

/* ---------- 10. ALTRE SEZIONI CON SFONDO DIVERSO ---------- */
/* Sezioni che devono contrastare con lo sfondo grigio rosato */
#wrapper,
#content-wrapper,
#main,
#main .container,
#left-column,
#right-column,
.breadcrumb,
.pagination,
.card,
.panel,
.module-block {
    background-color: var(--color-white) !important;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--color-border) !important;
}

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 768px) {
    #header {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    h1, .h1 { font-size: 2.2rem; }
    h2, .h2 { font-size: 1.8rem; }
    
    .product-miniature:hover {
        transform: translateY(-5px);
    }
    
    #footer {
        padding-top: 40px !important;
    }
}

/* ---------- 12. CORREZIONI SPECIFICHE ---------- */
/* Assicura che tutti i titoli usino Raleway */
.block .title-block,
.block h3,
.section-title,
.popular-title,
.feature-name,
.product-title,
.category-title,
.manufacturer-title,
.supplier-title,
.cms-title,
.page-title {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important;
}

/* Link di navigazione */
.breadcrumb a,
.breadcrumb .navigation-item a,
.pagination a,
.pagination .page-link {
    color: var(--color-text) !important;
}
.breadcrumb a:hover,
.pagination a:hover,
.pagination .page-link:hover {
    color: var(--color-accent) !important;
}

/* Assicura che i pulsanti nel footer mantengano i loro colori */
#footer .btn-primary,
#footer .btn-secondary,
#footer .newsletter-btn,
#footer button[type="submit"] {
    color: initial !important;
}
#footer .btn-primary:hover,
#footer .newsletter-btn:hover {
    color: white !important;
}