/* ===== HEADER CSS - PURE CSS HAMBURGER ===== */

/* Base header styles */
.header { position: relative; background: #fff; box-shadow: 0 2px 15px rgba(0,0,0,0.1); }
.header a { text-decoration: none; color: #1a1a1a; }
.header ul { list-style: none; margin: 0; padding: 0; }

/* Logo */
.header .logo { display: flex; align-items: center; gap: 10px; padding: 10px 20px; float: left; }

/* Menu icon (hamburger) - hide on desktop */
.header .menu-icon { display: none; }

/* Checkbox - completely hidden always */
.header .menu-btn { 
    position: absolute !important;
    visibility: hidden !important;
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Nav menu - desktop */
.header .menu {
    float: right;
    display: flex !important;
    align-items: center;
    max-height: none !important;
    overflow: visible !important;
    clear: none !important;
}

.header .menu li { float: left; }
.header .menu li a { 
    display: block; 
    padding: 20px 15px; 
    color: #1a1a1a !important; 
    font-weight: 600;
    white-space: nowrap;
}

/* Add Your Post button */
.header .menu li.add-post-menu a {
    background: linear-gradient(135deg, #7d3c98, #c0392b) !important;
    color: #fff !important;
    border-radius: 4px;
    margin: 10px 20px 10px 10px;
    padding: 10px 16px !important;
}

/* Clear float */
.header::after { content: ''; display: table; clear: both; }

/* ===== MOBILE STYLES ===== */
@media (max-width: 768px) {

    /* Show hamburger */
    .header .menu-icon {
        display: block !important;
        float: right;
        padding: 20px;
        cursor: pointer;
        user-select: none;
    }

    /* Hide menu by default on mobile */
    .header .menu {
        display: none !important;
        float: none !important;
        max-height: 0 !important;
        clear: both !important;
        width: 100%;
        background: #fff;
        position: relative;
        z-index: 9999;
        flex-direction: column;
    }

    /* Show menu when checkbox checked */
    .header .menu-btn:checked ~ .menu {
        display: flex !important;
        max-height: 500px !important;
    }

    .header .menu li { 
        float: none !important; 
        width: 100%;
        border-top: 1px solid #f0f0f0;
    }

    .header .menu li a { 
        padding: 14px 20px !important; 
    }

    .header .menu li.add-post-menu a {
        margin: 10px 20px !important;
        text-align: center;
    }
}

/* ===== DESKTOP FULL WIDTH FIX ===== */
@media (min-width: 769px) {
    .header { 
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .header .logo { float: none !important; }
    .header .menu { float: none !important; }
    .header .menu-icon { display: none !important; }
}

/* ================================================ */

@media (min-width:48em){
    .header li{float:left}
    .header li a{padding:20px 30px}
}

@media (max-width:768px){
.header-form-section{padding:15px !important;margin-top:68px !important;}
.header-form-section form{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;}
.header-form-section .form-group{width:100%;margin-bottom:0;}
.header-form-section select{padding:10px;font-size:1em;border:1px solid #ccc;border-radius:5px;width:100%;background:#fff;color:#333;}
.header-form-section button{width:100%;padding:12px;font-size:1em;border-radius:5px;margin-top:5px;}
.sticky-footer-buttons{position:fixed;bottom:0;left:0;width:100%;display:flex;justify-content:space-around;background-color:#fff;box-shadow:0 -2px 5px rgb(0 0 0 / .1);padding:0;z-index:1000;border-top:1px solid #ccc}
.sticky-footer-buttons a{display:flex;align-items:center;justify-content:center;flex:1;padding:14px;font-size:16px;font-weight:700;transition:background-color 0.3s}
.footer-call-button{background-color:#12c4af;color:#000;text-decoration:none}
.footer-whatsapp-button{background-color:#72c40e;color:#000;text-decoration:none}
.sticky-footer-buttons a:hover{opacity:.8}
.sticky-footer-buttons i{margin-right:8px;font-size:18px}
.product-listing{flex-direction:column;text-align:center}
.product-image{margin:0 auto 16px}
.product-actions{justify-content:center}
.product-detail{flex-direction:column;align-items:center}
.product-images{max-width:100%;margin-bottom:20px}
.product-info{max-width:100%}
.thumbnail-images{justify-content:center}
.thumbnail{width:50px;height:50px}
.tabs{flex-direction:column}
.post-box{width:100%}
.post-title{font-size:1.1em}
.post-location{font-size:.9em}
.city-title-h2{font-size:1.2em !important;line-height:1.3 !important;}
.area-grid{grid-template-columns:repeat(3, 1fr) !important;gap:6px !important;}
.area-tag{height:40px !important;font-size:12px !important;padding:6px 6px !important;white-space:normal !important;word-break:break-word !important;}
}