/* ============================================================================
   FACEM.LIVE - MOBILE FIX v8.5 - FINAL - Separate Hamburger
   ============================================================================
   Tot funcționează! Doar separă hamburger-ul de buton
   ============================================================================ */

@media (max-width: 768px) {
    
    /* ============================================
       1. NAVBAR
       ============================================ */
    
    nav,
    .navbar,
    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 60px !important;
        background: rgba(10, 10, 10, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        padding: 0 !important;
        z-index: 10000 !important;
    }
    
    /* Ascunde tot din navbar */
    nav > *,
    .navbar > *,
    nav a,
    .navbar a,
    nav button,
    .navbar button {
        display: none !important;
    }
    
    /* Ascunde "Acasă" loose */
    body > a[href="/"]:not([class*="btn"]):not([class*="cta"]):not(:has(img)):not(.navbar-toggler) {
        position: absolute !important;
        left: -9999px !important;
        visibility: hidden !important;
    }
    
    /* ============================================
       2. LOGO
       ============================================ */
    
    img[alt*="Logo"],
    img[alt*="logo"],
    img[src*="logo"] {
        position: fixed !important;
        top: 15px !important;
        left: 1rem !important;
        max-width: 70px !important;
        max-height: 30px !important;
        z-index: 10002 !important;
        display: block !important;
        object-fit: contain !important;
    }
    
    a[href="/"]:has(img) {
        position: fixed !important;
        top: 15px !important;
        left: 1rem !important;
        z-index: 10002 !important;
        display: block !important;
    }
    
    /* ============================================
       3. HAMBURGER - MAI MULT LA STÂNGA!
       ============================================ */
    
    body > .navbar-toggler:first-of-type,
    body > .hamburger:first-of-type,
    body > button.navbar-toggler:first-of-type {
        position: fixed !important;
        top: 8px !important;
        right: 135px !important; /* Mai mult spațiu! 135px în loc de 120px */
        width: 44px !important;
        height: 44px !important;
        z-index: 10003 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 10px !important;
    }
    
    /* Ascunde duplicate */
    body > button:not(:first-of-type),
    header button,
    nav button {
        display: none !important;
    }
    
    /* Hamburger spans */
    .navbar-toggler span,
    body > button span {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        background: white !important;
        margin: 3px 0 !important;
        transition: all 0.3s ease !important;
        border-radius: 2px !important;
        pointer-events: none !important;
    }
    
    /* Active animation */
    .navbar-toggler.active span:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px) !important;
        background: #f60b8b !important;
    }
    
    .navbar-toggler.active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .navbar-toggler.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px) !important;
        background: #f60b8b !important;
    }
    
    /* ============================================
       4. BUTON "CERE OFERTĂ" - MAI MIC
       ============================================ */
    
    a[class*="btn"],
    a[class*="cta"],
    .btn:not(button),
    .cta-button {
        position: fixed !important;
        top: 14px !important;
        right: 10px !important;
        z-index: 10002 !important;
        display: block !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 0.5rem 0.9rem !important;
        white-space: nowrap !important;
        border-radius: 22px !important;
        text-decoration: none !important;
        max-width: 110px !important;
        text-align: center !important;
    }
    
    /* ============================================
       5. MOBILE MENU
       ============================================ */
    
    .navbar-collapse,
    .mobile-menu {
        display: none !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 60px) !important;
        background: rgba(10, 10, 10, 0.98) !important;
        backdrop-filter: blur(30px) !important;
        padding: 2rem 1.5rem !important;
        z-index: 9998 !important;
        overflow-y: auto !important;
    }
    
    .navbar-collapse.show,
    .mobile-menu.show {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .navbar-collapse a,
    .mobile-menu a {
        display: block !important;
        width: 100% !important;
        padding: 1.25rem 0 !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        color: white !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(246, 11, 139, 0.2) !important;
        transition: all 0.3s ease !important;
    }
    
    .navbar-collapse a:hover,
    .mobile-menu a:hover {
        color: #f60b8b !important;
        padding-left: 10px !important;
        background: rgba(246, 11, 139, 0.05) !important;
    }
    
    /* ============================================
       6. HERO
       ============================================ */
    
    .hero,
    section:first-of-type {
        min-height: 400px !important;
        padding-top: 80px !important;
        padding-bottom: 2rem !important;
    }
    
    main {
        padding-top: 60px !important;
    }
    
    /* ============================================
       7. SPACING
       ============================================ */
    
    section {
        padding: 2rem 1rem !important;
    }
    
    .container {
        padding: 0 1rem !important;
    }
    
    /* ============================================
       8. TYPOGRAPHY
       ============================================ */
    
    h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.4rem !important; line-height: 1.3 !important; }
    h3 { font-size: 1.15rem !important; }
    p { font-size: 14px !important; line-height: 1.6 !important; }
    
    /* ============================================
       9. COMPONENTS
       ============================================ */
    
    .card { padding: 1rem !important; margin-bottom: 1rem !important; }
    
    .grid,
    .row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    img:not([alt*="Logo"]):not([src*="logo"]) {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* ============================================
       10. FOOTER
       ============================================ */
    
    footer {
        padding: 2rem 1rem !important;
    }
    
    footer > div {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* ============================================
       11. BODY SCROLL LOCK
       ============================================ */
    
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
}

/* ============================================================================
   FINAL LAYOUT:
   
   [Logo]                           [☰]  [CERE OFERTĂ]
   70px                            44px    110px max
   left:1rem                  right:135px  right:10px
   z:10002                       z:10003    z:10002
   
   Hamburger la 135px = mai mult spațiu față de buton!
   Buton max-width: 110px = mai compact
   ============================================================================ */