/* ShipperShop groups.html CSS */

:root{--primary:#7C3AED;--bg:#f0f2f5;--card:#fff;--border:#e4e6eb;--text:#1C1C1C;--muted:#65676B}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--text);padding-bottom:80px;padding-top:56px}
.top-bar{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;display:flex;align-items:center;padding:10px 12px;gap:10px;border-bottom:1px solid var(--border)}
.top-bar h1{font-size:20px;font-weight:800;flex:1}
.top-bar .tb-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text);background:var(--bg)}
.search-box{background:var(--bg);border-radius:20px;padding:8px 14px;font-size:14px;border:none;width:100%;margin:12px;display:none}
.search-box:focus{outline:2px solid var(--primary);background:#fff}
.search-active .search-box{display:block}

/* Category chips */
.cat-chips{display:flex;gap:8px;padding:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:#fff;border-bottom:1px solid var(--border)}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chip{white-space:nowrap;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;background:var(--bg);color:var(--text);text-decoration:none;border:1px solid var(--border);flex-shrink:0;cursor:pointer;transition:all .2s}
.cat-chip:active,.cat-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Section */
.section{background:#fff;margin-top:8px;padding:16px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;padding:0 16px 12px}
.section-head h2{font-size:16px;font-weight:700}
.section-head a{font-size:13px;color:var(--primary);text-decoration:none;font-weight:600}

/* Group card - COMPACT Reddit-style */
.g-list{padding:0 12px}
.g-card{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f0f0f0}
.g-card:last-child{border-bottom:none}
.g-icon{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex-shrink:0;overflow:hidden}
.g-icon img{width:100%;height:100%;object-fit:cover}
.g-info{flex:1;min-width:0}
.g-name{font-size:14px;font-weight:700;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-name a{color:var(--text);text-decoration:none}
.g-meta{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-desc{display:none}
.g-join{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;border:none;cursor:pointer;flex-shrink:0;transition:all .2s}
.g-join.join{background:var(--primary);color:#fff}
.g-join.joined{background:var(--bg);color:var(--muted);border:1px solid var(--border)}
.g-join:active{transform:scale(.95)}

/* Horizontal scroll - compact */
.g-scroll{display:flex;gap:8px;padding:0 12px;overflow-x:auto;scrollbar-width:none}
.g-scroll::-webkit-scrollbar{display:none}
.g-scroll-card{min-width:220px;max-width:240px;background:#fff;border-radius:10px;border:1px solid var(--border);padding:10px 12px;flex-shrink:0}
.g-scroll-card .g-icon{width:32px;height:32px;font-size:12px}
.g-scroll-card .g-name{font-size:13px}
.g-scroll-card .g-meta{font-size:10px}
.g-scroll-card .g-desc{display:block;font-size:11px;color:#888;line-height:1.3;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Skeleton */
.skel{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skel 1.5s infinite;border-radius:8px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Category page */
.cat-page-head{background:#fff;padding:16px;padding-top:60px;border-bottom:1px solid var(--border)}
.cat-page-head h1{font-size:22px;font-weight:800;display:flex;align-items:center;gap:8px}
.sub-chips{display:flex;gap:8px;padding:12px 16px;overflow-x:auto;scrollbar-width:none;background:#fff;border-bottom:1px solid var(--border)}
.sub-chips::-webkit-scrollbar{display:none}
.sub-chip{white-space:nowrap;padding:6px 14px;border-radius:16px;font-size:12px;font-weight:600;background:var(--bg);color:var(--text);flex-shrink:0;cursor:pointer;border:1px solid var(--border)}
.sub-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Bottom nav */
.bnav{position:fixed;bottom:0;left:0;right:0;background:#fff;display:flex;border-top:1px solid var(--border);z-index:100;padding:4px 0 calc(4px + env(safe-area-inset-bottom))}
.bnav a{flex:1;text-align:center;padding:6px 0;text-decoration:none;font-size:10px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px}
.bnav a i{font-size:20px}
.bnav a.active{color:var(--primary)}
.bnav a.active i{font-weight:900}



/* Search results */
.search-results{display:none;padding:16px}
.search-active .search-results{display:block}
.search-active .main-content{display:none}

/* Toast */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;opacity:0;transition:opacity .3s;z-index:999;pointer-events:none}
.toast.show{opacity:1}

/* === Desktop 3-column layout === */
@media(min-width:769px){
  .top-bar{max-width:1280px;margin:0 auto;position:relative;border-bottom:none;padding:16px 20px 12px}
  .top-bar h1{font-size:26px}
  .cat-chips{max-width:1280px;margin:0 auto;padding:8px 20px;position:relative;border-bottom:1px solid var(--border);background:#fff;border-radius:0}
  .main-content{max-width:1280px;margin:0 auto;padding:20px;display:grid;grid-template-columns:240px 1fr 280px;gap:24px}
  .main-content .section,.main-content #discoverContent,.main-content #catPage,.main-content #searchResults{grid-column:2}
  body{background:#f0f2f5;padding-bottom:0}
  #mobileBottomNav{display:none!important}
  
  /* Left sidebar */
  .dsk-left{grid-column:1;grid-row:1/20;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin}
  .dsk-left::-webkit-scrollbar{width:4px}
  .dsk-left::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}
  .dsk-left .sb-card{background:#fff;border-radius:8px;border:1px solid var(--border);margin-bottom:12px;overflow:hidden}
  .dsk-left .sb-title{padding:10px 14px;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
  .dsk-left .sb-link{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:14px;font-weight:500;color:var(--text);text-decoration:none;transition:.15s}
  .dsk-left .sb-link:hover,.dsk-left .sb-link.active{background:#f0f2f5}
  .dsk-left .sb-link i{width:22px;text-align:center;font-size:16px}
  .dsk-left .sb-footer{padding:12px 14px;font-size:11px;color:#999}
  .dsk-left .sb-footer a{color:#999;text-decoration:none}
  .dsk-left .sb-footer a:hover{text-decoration:underline}
  
  /* Right sidebar */
  .dsk-right{grid-column:3;grid-row:1/20;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin}
  .dsk-right::-webkit-scrollbar{width:4px}
  .dsk-right::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}
  .dsk-right .sb-card{background:#fff;border-radius:8px;border:1px solid var(--border);margin-bottom:12px;overflow:hidden}
  .dsk-right .sb-title{padding:10px 14px;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
  .dsk-right .sb-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:.15s}
  .dsk-right .sb-item:hover{background:#f5f5f5}
  .dsk-right .sb-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
  .dsk-right .sb-name{font-size:13px;font-weight:600}
  .dsk-right .sb-meta{font-size:11px;color:var(--muted)}
  .dsk-right .sb-all{display:block;text-align:center;padding:10px;font-size:13px;font-weight:600;color:var(--primary);text-decoration:none;border-top:1px solid var(--border)}
  .dsk-right .sb-all:hover{background:#f5f5f5}
  .dsk-create{display:block;width:100%;padding:12px;border:none;border-radius:8px;background:var(--primary);color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:12px;transition:.15s}
  .dsk-create:hover{opacity:.9}
  .dsk-create i{margin-right:6px}
  
  /* Center content adjustments */
  .section{background:#fff;border-radius:8px;border:1px solid var(--border);padding:0;margin-bottom:16px;overflow:hidden}
  .section .section-head{padding:14px 16px;border-bottom:1px solid var(--border)}
  .section .section-head h2{font-size:16px;font-weight:700}
  .g-list{padding:0}
  .g-card{padding:10px 16px;border-bottom:1px solid #f0f2f5}
  .g-card:last-child{border-bottom:none}
  .g-scroll{padding:12px 16px}
}
@media(max-width:768px){
  .dsk-left,.dsk-right{display:none}
}