/*
 Theme Name:   MH Magazin Matei
 Template:     mh-magazine-lite
 Author:       Matei Bitea
 Version:      1.0.0
*/
/* stil header favorite */
/* Containerul principal care limitează lă?imea */
.shop-header-tools {
    display: flex;
    align-items: center;
    justify-content: center; /* Schimbăm din space-between în center */
    gap: 40px;               /* Spa?iu generos între LOGO - CĂUTARE - ICONI?E */
    max-width: 1080px;       /* Lă?imea standard a temei MH Magazine */
    margin: 0 auto;          /* Centrează tot blocul în pagină */
    padding: 20px 10px;
    border-bottom: 1px solid #eee;
}

/* Stil pentru grupul de iconi?e din dreapta */
.header-icons {
    display: flex;
    align-items: center;
    gap: 20px;               /* Spa?iu între inima, cont ?i co? */
}

/* Facem caseta de căutare să nu ocupe tot spa?iul, dar să stea central */
.header-search {
    flex-grow: 0; 
    min-width: 300px;        /* O lă?ime fixă pentru căutare ca să nu "joace" */
}

.header-search input[type="search"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 20px;    /* Arată mai modern cu margini rotunjite */
}

/* Ajustări pentru iconi?e */
.icon-link {
    text-decoration: none;
    font-size: 24px;
    position: relative;
    transition: transform 0.2s;
}

.icon-link:hover {
    transform: scale(1.1); /* Efect de mărire la hover */
}

.count-badge {
    background: #e64946;
    color: #fff;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 10px;
    position: absolute;
    top: -8px;
    right: -12px;
}

/* stil header-favorite */

/* Containerul pentru căutare trebuie să fie relativ pentru a pozi?iona butonul */
.header-search form {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 400px;
}

/* Stilul casetei de scris */
.header-search input[type="search"] {
    width: 100%;
    padding: 10px 45px 10px 15px; /* Spa?iu la dreapta (45px) pentru lupă */
    border: 1px solid #ddd;
    border-radius: 25px;
    outline: none;
}

/* Stilul butonului transformat în lupă */
.header-search button[type="submit"], 
.header-search input[type="submit"] {
    position: absolute;
    right: 5px;
    background: transparent;
    border: none;
    color: #333;
    font-size: 18px;
    cursor: pointer;
    width: 35px;
    height: 35px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dacă butonul are text, îl ascundem ?i punem simbolul de lupă */
.header-search button[type="submit"] {
    text-indent: -9999px; /* Ascunde textul "Caută" */
}

.header-search button[type="submit"]::before {
    content: 'Caută'; /* Simbolul de lupă */
    text-indent: 0;
    display: block;
    position: absolute;
}

/* pentru mobil

/* --- OPTIMIZARE MOBIL (Ecrane sub 768px) --- */
@media screen and (max-width: 768px) {
    
    .shop-header-tools {
        flex-wrap: wrap; /* Permite elementelor să treacă pe rândul următor */
        justify-content: space-between;
        gap: 10px;
        padding: 10px;
    }

    /* 1. Logo-ul rămâne în stânga, dar mai mic */
    .header-logo {
        order: 1;
        flex: 0 0 auto;
    }
    .header-logo img {
        max-width: 120px; /* Ajustează dimensiunea logo-ului pe mobil */
        height: auto;
    }

    /* 2. Iconi?ele (inima, cont, co?) se duc în dreapta, pe acela?i rând cu logo-ul */
    .header-icons {
        order: 2;
        flex: 0 0 auto;
        gap: 12px;
    }
    .icon-link {
        font-size: 20px; /* Pu?in mai mici să încapă toate */
    }

    /* 3. Căutarea trece SINGURĂ pe rândul de jos ?i ocupă tot spa?iul */
    .header-search {
        order: 3;
        flex: 0 0 100%; /* Ocupă 100% din lă?ime */
        margin-top: 10px;
    }
    
    .header-search input[type="search"] {
        width: 100%;
        height: 40px; /* Mai u?or de atins cu degetul */
    }
}


/* Stil Buton WhatsApp */
.whatsapp-float {
    /* ... restul codului rămâne la fel ... */
    right: auto !important; /* Anulăm pozi?ia din dreapta */
    left: 20px !important;  /* Îl fixăm în stânga */
    background-color: #25d366;
    color: #fff !important;
    border-radius: 50px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 999999; /* Să fie deasupra tuturor elementelor */
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    transform: translateY(-5px);
    background-color: #128c7e;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.whatsapp-float img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.wa-text {
    font-family: sans-serif;
    font-weight: 600;
    font-size: 14px;
}

/* Adaptare pentru Mobil */
@media screen and (max-width: 768px) {
    .wa-text {
        display: none; /* Ascundem textul pe ecrane mici ca să nu ocupe tot spa?iul */
    }
    .whatsapp-float {
        padding: 12px;
        bottom: 20px;
        right: 20px;
        border-radius: 50%; /* Devine un cerc perfect pe mobil */
    }
    .whatsapp-float img {
        margin-right: 0;
        width: 30px;
        height: 30px;
    }
}

/* =========================================
   SOLU?IA FINALĂ PENTRU FULL WIDTH SHOP
   ========================================= */

/* 1. Eliminăm complet prezen?a vizuală a sidebar-ului */
.woocommerce aside, 
.woocommerce .sidebar, 
.woocommerce #secondary, 
.woocommerce [class*="sidebar"],
.woocommerce .widget-area { 
    display: none !important; 
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* =========================================
   FOR?ARE FULL WIDTH - SPECIFIC MH THEMES
   ========================================= */

/* 1. Ascundem sidebar-ul pe WooCommerce */
.woocommerce .mh-sidebar, 
.woocommerce aside {
    display: none !important;
}

/* 2. For?ăm con?inutul principal să ocupe 100% */
/* MH Magazine folose?te de obicei 66.6% sau 70% aici */
.woocommerce #main-content.mh-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    border: none !important;
}

/* 3. Ajustăm wrapper-ul general să permită lă?imea maximă */
.woocommerce .mh-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

/* 4. Dacă produsele sunt încă înghesuite, for?ăm rândul de produse */
.woocommerce ul.products {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* 5. Eliminăm eventuale margini reziduale */
.woocommerce .mh-content-inner {
    padding-right: 0 !important;
}

/* Ajustare vizuală pentru 5 produse pe rând */
.woocommerce ul.products li.product {
    width: 18% !important; /* 20% minus un mic spa?iu între ele */
    margin-right: 2% !important;
    float: left !important;
    clear: none !important;
}

/* Eliminăm marginea din dreapta pentru ultimul produs de pe rând */
.woocommerce ul.products li.product:nth-child(5n) {
    margin-right: 0 !important;
}

/* Resetăm regula pentru mobil (să nu rămână 5 ?i pe telefon că nu se mai vede nimic) */
@media (max-width: 768px) {
    .woocommerce ul.products li.product {
        width: 48% !important; /* 2 pe rând pe mobil */
        margin-right: 4% !important;
    }
    .woocommerce ul.products li.product:nth-child(2n) {
        margin-right: 0 !important;
    }
}

/* 1. Ne asigurăm că selectorul de cantitate stă pe un singur rând */
.vartable_qty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px; /* Spa?iu mic între butoane ?i cifră */
    white-space: nowrap !important; /* Interzice trecerea pe rândul următor */
    min-width: 200px !important; /* Îi rezervăm spa?iu minim să nu se sufoce */
}


/* 1. REPARAREA COLOANEI DE CANTITATE (+ CIFRĂ -) */
.vartable_qty {
    display: inline-flex !important; /* For?ează a?ezarea pe orizontală */
    flex-wrap: nowrap !important;   /* Interzice trecerea pe rândul doi */
    align-items: center !important;  /* Aliniere verticală la mijloc */
    justify-content: center !important; /* Centrare orizontală în celulă */
    width: auto !important;          /* Elimină cei 70px care blocau totul */
    min-width: 120px !important;     /* Rezervă spa?iu suficient pentru un rând */
    gap: 5px;                        /* Spa?iu mic între butoane ?i cifră */
}

/* 2. AJUSTAREA INPUT-ULUI (Cifra de cantitate) */
.vartable_qty input[type="number"] {
    width: 45px !important;          /* O facem destul de îngustă cât să lase loc butoanelor */
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. ALINIEREA ÎNTREGULUI TABEL */
.wc-variations-table td, 
.wc-variations-table th {
    text-align: center !important;   /* Centrează tot: Pre?, Stoc, Dimensiune */
    vertical-align: middle !important;
    padding: 10px 5px !important;    /* Spa?iere curată între rânduri */
}

/* 4. REGLAREA LĂ?IMII COLOANELOR (Pentru cele 5 coloane) */
/* Ajustăm procentele ca să nu mai fie "largi" aiurea */
.wc-variations-table th:nth-child(1), .wc-variations-table td:nth-child(1) { width: 30%; } /* Varia?ie */
.wc-variations-table th:nth-child(2), .wc-variations-table td:nth-child(2) { width: 15%; } /* Pre? */
.wc-variations-table th:nth-child(3), .wc-variations-table td:nth-child(3) { width: 15%; } /* Stoc */
.wc-variations-table th:nth-child(4), .wc-variations-table td:nth-child(4) { width: 15%; } /* Cod/SKU */
.wc-variations-table th:nth-child(5), .wc-variations-table td:nth-child(5) { width: 25%; } /* Cantitate */

/*________________

/* 1. ELIBERĂM WRAPPER-UL (Miezul problemei) */
.qtywrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto !important;          /* Eliminăm lă?imea fixă */
    min-width: 120px !important;     /* Îi dăm spa?iu să respire */
    max-width: 200px !important;
    margin: 0 auto !important;       /* Îl centrăm în coloană */
    align-items: center !important;
    justify-content: center !important;
    border: none !important;         /* Op?ional: scoatem bordurile inutile dacă există */
}

/* 2. REGLĂM BUTOANELE DIN INTERIORUL QTYWRAP */
.qtywrap button, 
.qtywrap .plus, 
.qtywrap .minus {
    width: 35px !important;
    height: 35px !important;
    flex: 0 0 35px !important;      /* Nu le lăsăm să se deformeze */
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    cursor: pointer;
}

/* 3. REGLĂM CĂSU?A CU CIFRA */
.qtywrap input.qty, 
.qtywrap input[type="number"] {
    width: 45px !important;
    flex: 0 0 45px !important;
    text-align: center !important;
    margin: 0 5px !important;
    border: 1px solid #ccc !important; /* Îi dăm o formă clară */
}