/**
 * Pick Point — Site Header CSS
 *
 * Moved out of an inline <style> block that was being echoed into every
 * single page's <head> (header.php loads on every page). As an inline
 * block it had to be re-parsed on every page load with zero caching; as
 * an external file it's fetched once and cached by the browser across
 * every page the visitor views. Loaded via wp_enqueue_style() in
 * functions.php (pluspoint_header_footer_assets()).
 */

        * { box-sizing: border-box; }
        body { margin: 0; padding: 0; }
        .container { width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 15px; }
        .site-header { background-color: #FFFFFF; position: sticky; top: 0; z-index: 9999; box-shadow: 0 4px 20px rgba(0,0,0,0.04); transition: all 0.3s ease; }
        .header-main-row { display: flex; align-items: center; justify-content: space-between; height: 90px; }
        .site-branding { flex: 0 0 260px; display: flex; justify-content: flex-start; align-items: center; }
        .site-branding a { font-size: 32px; font-weight: 800; letter-spacing: -0.8px; text-transform: lowercase; text-decoration: none; display: inline-block; line-height: 1; transition: opacity 0.4s ease; animation: colorPulse 3s infinite alternate ease-in-out; }
        /* Uploaded logo (Site Identity → Logo): fixed max box, aspect ratio preserved, never stretched/distorted */
        .pp-logo-wrap { display: flex; align-items: center; height: 100%; }
        .pp-logo-wrap .custom-logo-link { display: block; line-height: 0; }
        .pp-logo-wrap img.custom-logo { max-width: 170px; max-height: 56px; width: auto; height: auto; object-fit: contain; display: block; }
        @media (max-width: 768px) {
            .pp-logo-wrap img.custom-logo { max-width: 130px; max-height: 42px; }
        }
        @keyframes colorPulse { 0% { color: #FA5053; } 100% { color: #111111; } }
        .font-en { font-family: 'Poppins', sans-serif; }
        .font-bn { font-family: 'Anek Bangla', sans-serif; font-size: 38px; }
        .nav-badge { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; color: #fff; padding: 2px 7px; border-radius: 12px; margin-left: 6px; text-transform: uppercase; vertical-align: middle; position: relative; top: -2px; letter-spacing: 0.5px; }
        .hot-badge { background: linear-gradient(45deg, #FA5053, #E63A3D); }
        /* Ring-pulse via a pseudo-element animated with transform/opacity
           instead of box-shadow — this badge is in the header, which
           loads on every single page, so the old box-shadow keyframe
           forced a continuous main-thread repaint site-wide. transform +
           opacity are GPU-composited and don't repaint. */
        .hot-badge::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: rgba(250, 80, 83, 0.55);
            animation: badgePulseRing 2s infinite;
            pointer-events: none;
        }
        .free-badge { background: linear-gradient(45deg, #11998e, #38ef7d); }
        @keyframes badgePulseRing {
            0%   { transform: scale(1);   opacity: 0.55; }
            70%  { transform: scale(1.7); opacity: 0; }
            100% { transform: scale(1.7); opacity: 0; }
        }
        .desktop-menu { flex: 1; display: flex; justify-content: center; font-family: 'Anek Bangla', sans-serif; }
        .desktop-menu ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; align-items: center; }
        .desktop-menu a { font-size: 18px; font-weight: 600; color: #111111; text-decoration: none; position: relative; padding: 8px 0; transition: color 0.3s ease; display: flex; align-items: center; }
        .desktop-menu a:hover { color: #FA5053; }
        .desktop-menu a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; background-color: #FA5053; transition: all 0.3s ease; transform: translateX(-50%); }
        .desktop-menu a:hover::after { width: 100%; }
        .header-actions { flex: 0 0 220px; display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
        .action-btn { background: none; border: none; cursor: pointer; color: #111111; padding: 5px; display: flex; align-items: center; transition: transform 0.3s, color 0.3s; }
        .action-btn:hover { color: #FA5053; transform: translateY(-2px); }
        .action-btn svg { width: 24px; height: 24px; pointer-events: none; }
        .cart-wrapper { position: relative; }
        .cart-count { position: absolute; top: -4px; right: -6px; background: #FA5053; color: #fff; font-size: 12px; font-weight: 700; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: 'Poppins', sans-serif; pointer-events: none; }
        .mobile-toggle-btn { display: none; background: none; border: none; padding: 10px; cursor: pointer; color: #111; margin-left: -10px; touch-action: manipulation; }
        .mega-search-box { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; padding: 30px 15px; box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-top: 1px solid #f0f0f0; visibility: hidden; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; }
        .mega-search-box.is-active { visibility: visible; opacity: 1; transform: translateY(0); }
        .search-inner { max-width: 800px; margin: 0 auto; display: flex; height: 55px; border: 2px solid #eaeaea; border-radius: 8px; overflow: hidden; }
        .search-inner:focus-within { border-color: #FA5053; }
        .search-inner input { flex: 1; padding: 0 25px; font-size: 18px; border: none; outline: none; font-family: 'Anek Bangla', sans-serif; color: #333; }
        .search-inner button { padding: 0 40px; background: #FA5053; color: #fff; border: none; font-weight: 700; font-size: 18px; font-family: 'Anek Bangla', sans-serif; cursor: pointer; }
        
        .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 10000; visibility: hidden; opacity: 0; transition: all 0.4s ease; }
        .sidebar-overlay.is-active { visibility: visible; opacity: 1; }
        
        .mobile-sidebar { 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 320px; 
            max-width: 85vw; 
            height: 100%;
            height: -webkit-fill-available;
            height: 100dvh;
            background: #ffffff; 
            z-index: 10001; 
            transform: translateX(-110%); 
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
            display: flex; 
            flex-direction: column; 
            box-shadow: 10px 0 40px rgba(0,0,0,0.15); 
            font-family: 'Anek Bangla', sans-serif; 
        }
        .mobile-sidebar.is-active { transform: translateX(0); }
        
        .sidebar-header { padding: 25px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5; background: #fff; }
        .sidebar-header span { font-size: 22px; font-weight: 800; color: #111; font-family: 'Poppins', sans-serif; }
        .sidebar-nav { padding: 10px 25px 20px; flex: 1; overflow-y: auto; }
        .sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
        .sidebar-nav li { margin-bottom: 0; }
        .sidebar-nav a { display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 600; color: #222; padding: 18px 0; background: transparent; border-bottom: 1px solid #f0f0f0; text-decoration: none; transition: all 0.3s ease; }
        .menu-text-wrap { display: flex; align-items: center; }
        .sidebar-nav a svg { width: 20px; height: 20px; color: #999; transition: transform 0.3s, color 0.3s; }
        .sidebar-nav a:hover, .sidebar-nav a:active { color: #FA5053; }
        .sidebar-nav a:hover svg, .sidebar-nav a:active svg { color: #FA5053; transform: translateX(5px); }
        
        .sidebar-footer { 
            margin-top: auto; 
            padding: 20px 20px 30px; 
            padding-bottom: calc(30px + env(safe-area-inset-bottom));
            background: #fdfdfd; 
            border-top: 1px solid #f0f0f0; 
            text-align: center; 
        }
        .support-title { font-size: 15px; color: #555; margin-bottom: 10px; font-weight: 600; }
        .support-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; color: #FA5053; text-decoration: none; margin-bottom: 15px; }
        .support-phone svg { width: 22px; height: 22px; }
        .social-icons { display: flex; justify-content: center; gap: 15px; }
        .social-icons a { width: 42px; height: 42px; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #111; transition: all 0.3s; text-decoration: none; }
        .social-icons a:hover { background: #FA5053; color: #fff; transform: translateY(-3px); }
        .social-icons svg { width: 20px; height: 20px; }

        @media (max-width: 1050px) {
            .desktop-menu ul { gap: 15px; }
            .desktop-menu a { font-size: 16px; }
            .site-branding a { font-size: 32px; }
        }
        @media (max-width: 991px) {
            .desktop-menu { display: none; }
            .mobile-toggle-btn { display: block; flex: 0 0 80px; }
            .header-main-row { height: 75px; }
            .site-branding { flex: 1; justify-content: center; }
            .site-branding a { font-size: 34px; }
            .header-actions { flex: 0 0 80px; gap: 12px; }
            .action-btn svg { width: 24px; height: 24px; }
        }
        @media (max-width: 480px) {
            .header-main-row { height: 65px; }
            .site-branding a.font-en { font-size: 28px; }
            .site-branding a.font-bn { font-size: 30px; }
            .action-btn svg { width: 22px; height: 22px; }
            .header-actions { gap: 8px; }
            .mobile-toggle-btn svg { width: 28px; height: 28px; }
            .search-inner input { font-size: 15px; padding: 0 15px; }
            .search-inner button { padding: 0 20px; font-size: 16px; }
            .mobile-sidebar { width: 85vw; }
            .sidebar-footer { padding-bottom: 50px !important; }
        }
