/* ============================================================
   CGT DESIGN SYSTEM v3.0 — GLOBAL MOBILE RESPONSIVE STYLES
   File: style_css/global/mobile.css
   ============================================================ */

/* ── TABLET (max 991px) ── */
@media(max-width:991px){
  .main-header{top:28px;padding:8px 12px;}
  .desktop-only{display:none!important;}
  .nav-toggler{display:block!important;}
  .search-wrap input{width:100%;}
  .search-wrap{width:100%;margin:6px 0;}
  .nav-link-cgt{width:100%;padding:10px 14px;font-size:.88rem;}
  .brand-logo{width:200px;height:50px;}
  .brand-text{font-size:1.1rem;}
}

/* ── MOBILE HEADER (max 768px) ── */
@media(max-width:768px){
  .top-bar{display:none!important;}

  /* ── KEY FIX: flex-wrap so nav-collapse sits below header-inner ── */
  .main-header{
    top:0;padding:10px 16px 0;min-height:60px;
    display:flex;align-items:center;flex-wrap:wrap;
    box-shadow:0 2px 12px rgba(0,0,0,.09);
  }
  .header-inner{
    flex:0 0 100%;display:flex;align-items:center;
    flex-wrap:nowrap;gap:0;padding-bottom:10px;
  }
  .brand-text{display:none!important;}
  .brand-logo{width:150px;height:40px;object-fit:contain;}

  /* Hamburger */
  .nav-toggler{
    margin-left:auto;flex-shrink:0;
    width:38px;height:38px;
    display:flex!important;align-items:center;justify-content:center;
    border-radius:50%;
    background:var(--green-light);
    border:none;
    font-size:1.05rem;color:var(--green);
    transition:all .25s var(--ease);padding:0;
  }
  .nav-toggler:hover,.nav-toggler:active{background:var(--green);color:#fff;}

  .filter-bar{top:58px;}
  .filter-tags{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
  .filter-tags::-webkit-scrollbar{display:none;}
  .filter-tag{flex-shrink:0;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}

  /* ══ Mobile Nav Collapse — full-width professional dropdown ══ */
  .nav-collapse{
    flex:0 0 100%;          /* take full width in the flex-wrap row */
    margin:0 -16px;         /* bleed to header edges */
    width:calc(100% + 32px);
    background:var(--white);
    border-top:3px solid var(--green);
    box-shadow:0 14px 36px rgba(0,0,0,.13);
    border-radius:0 0 20px 20px;
    padding:0 0 14px;
    overflow:hidden;
    animation:navDrop .22s var(--ease);
  }
  @keyframes navDrop{
    from{opacity:0;transform:translateY(-6px);}
    to{opacity:1;transform:translateY(0);}
  }

  /* ── User greeting bar (shown when logged-in) ── */
  .nav-mob-user{
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;
    background:var(--green-50);
    border-bottom:1px solid rgba(46,125,50,.12);
    margin-bottom:6px;
  }
  .nav-mob-avatar{
    width:38px;height:38px;border-radius:50%;
    object-fit:cover;border:2px solid var(--green);flex-shrink:0;
  }
  .nav-mob-avatar-ph{
    width:38px;height:38px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--green),var(--green-dark));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:.9rem;
  }
  .nav-mob-uname{font-size:.84rem;font-weight:700;color:var(--text);line-height:1.2;}
  .nav-mob-ubal{font-size:.72rem;color:var(--green);font-weight:600;margin-top:1px;}
  .nav-mob-ubal i{font-size:.65rem;}
  .nav-mob-logout-x{
    margin-left:auto;width:30px;height:30px;border-radius:50%;
    background:#ffebee;color:#e53935;
    display:flex;align-items:center;justify-content:center;
    font-size:.8rem;text-decoration:none;flex-shrink:0;
    transition:all .2s var(--ease);
  }
  .nav-mob-logout-x:hover{background:#e53935;color:#fff;}

  /* Search inside nav */
  .nav-mob-search{width:100%;margin-bottom:6px;padding:0 12px;}
  .nav-mob-search input{width:100%;}

  /* Nav links */
  .nav-mob-links{
    display:flex;flex-direction:column;gap:1px;padding:0 10px;
  }
  .nav-mob-links .nav-link-cgt{
    border-radius:10px;padding:11px 14px;font-size:.88rem;gap:10px;
    border-left:3px solid transparent;
    transition:all .18s var(--ease);
  }
  .nav-mob-links .nav-link-cgt:hover,
  .nav-mob-links .nav-link-cgt.active{
    background:var(--green-light);color:var(--green);
    border-left-color:var(--green);
  }
  .nav-mob-links .nav-link-cgt i{
    width:18px;text-align:center;font-size:.82rem;
  }

  /* Actions row */
  .nav-mob-actions{
    display:flex;align-items:center;flex-wrap:wrap;
    gap:8px;margin-top:10px;
    padding:12px 14px 0;
    border-top:1px solid var(--border);
  }

  /* Square labeled icon tiles */
  .nav-mob-icon{
    display:inline-flex!important;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;
    width:54px;height:54px;padding:0!important;
    border-radius:12px;background:var(--bg);
    font-size:.92rem;color:var(--text-muted);
    text-decoration:none;transition:all .2s var(--ease);position:relative;
  }
  .nav-mob-icon:hover{background:var(--green-light);color:var(--green);}
  .nav-mob-icon .icon-lbl{
    font-size:.5rem;font-weight:600;color:var(--text-muted);
    line-height:1;letter-spacing:.2px;
  }
  .nav-mob-icon:hover .icon-lbl{color:var(--green);}

  /* Wallet balance badge */
  .nav-wallet-bal{
    position:absolute;top:-4px;right:-4px;
    font-size:.48rem;background:var(--green);color:#fff;
    padding:2px 5px;border-radius:6px;font-weight:700;
    line-height:1.3;white-space:nowrap;border:1.5px solid #fff;
  }

  /* Logout pill — pushed right */
  .nav-mob-logout{
    margin-left:auto;
    background:linear-gradient(135deg,#e53935,#c62828);
    color:#fff;border-radius:var(--radius-pill);
    padding:10px 18px;font-size:.8rem;font-weight:600;
    text-decoration:none;display:inline-flex;align-items:center;gap:7px;
    transition:all .2s var(--ease);
    box-shadow:0 2px 10px rgba(229,57,53,.28);
  }
  .nav-mob-logout:hover{opacity:.9;color:#fff;transform:translateY(-1px);}

  /* Full-width login CTA (shown when not logged in) */
  .nav-mob-login-cta{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin:12px 14px 0;
    padding:13px;
    background:linear-gradient(135deg,var(--green),var(--green-dark));
    color:#fff;border-radius:var(--radius);
    font-size:.9rem;font-weight:700;
    text-decoration:none;
    box-shadow:0 4px 14px rgba(46,125,50,.28);
    transition:all .2s var(--ease);
  }
  .nav-mob-login-cta:hover{opacity:.93;color:#fff;}
}

/* ── SMALL MOBILE (max 576px) ── */
@media(max-width:576px){
  .section-title{font-size:1.2rem;}
  .container{padding:0 12px;}
  .page-banner{padding:28px 0;}
  .page-banner h2{font-size:1.3rem;}

  .hero-slide{min-height:220px;padding:28px 14px 52px 18px;}
  .hero-slide h1{font-size:1.25rem;line-height:1.3;}
  .hero-slide p{font-size:.8rem;margin:8px 0 14px;}
  .carousel-indicators{bottom:8px;}

  .btn-hero,.btn-hero-outline{
    padding:10px 18px;font-size:.8rem;
    width:100%;justify-content:center;
  }
  .carousel-control-prev,.carousel-control-next{display:none!important;}

  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .site-footer{padding-bottom:70px;}
  #cartToast{bottom:80px;}
  #queryPopup{bottom:80px;left:12px;right:12px;max-width:100%;min-width:0;}
}

/* ── MOBILE BOTTOM NAV ── */
.mobile-bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  z-index:1050;background:var(--white);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
  padding:6px 0 env(safe-area-inset-bottom,6px);height:60px;
}
.mobile-bottom-nav .nav-items{
  display:flex;align-items:center;justify-content:space-around;
  height:100%;padding:0 4px;
}
.mobile-bottom-nav .nav-item{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;text-decoration:none;
  color:var(--text-muted);font-size:.6rem;font-weight:500;
  padding:4px 10px;border-radius:var(--radius-sm);
  transition:all .2s var(--ease);position:relative;min-width:48px;
}
.mobile-bottom-nav .nav-item i{font-size:1.1rem;line-height:1;}
.mobile-bottom-nav .nav-item.active,
.mobile-bottom-nav .nav-item:hover{color:var(--green);}
.mobile-bottom-nav .nav-badge{
  position:absolute;top:2px;right:6px;
  background:var(--accent);color:#fff;
  font-size:.5rem;min-width:14px;height:14px;
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;border:1.5px solid var(--white);
}

@media(max-width:991px){
  .mobile-bottom-nav{display:block;}
  main{padding-bottom:60px;}
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-light);}