.cp-float,.cp-pop,.cp-btn{display:none!important}

/* ============ MOBILE FIRST ============ */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; }
  body { padding-top: 60px !important; font-size: 14px !important; }
  
  /* All containers stay in viewport */
  *, *::before, *::after { max-width: 100vw !important; box-sizing: border-box !important; }
  .container, section, header, footer, main, article, aside, div { max-width: 100vw !important; }
  
  /* Force single column on all grids */
  .grid, [class*="grid"], [class*="row"], [class*="cols-"], 
  .hero-grid, .cards-grid, .stats-grid, .form-grid, .footer-content,
  .features-grid, .social-grid, .testimonials-grid, .team-grid {
    grid-template-columns: 1fr !important;
    display: block !important;
    width: 100% !important;
  }
  .grid > *, [class*="cols-"] > * { width: 100% !important; margin-bottom: 12px !important; }
  
  /* Stats - keep 2 columns */
  .stats-grid, .stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  
  /* Images */
  img, video, iframe, embed, object, picture { 
    max-width: 100% !important; height: auto !important; display: block !important;
  }
  
  /* Headings */
  h1, .h1 { font-size: 26px !important; line-height: 1.25 !important; word-break: break-word !important; }
  h2, .h2 { font-size: 22px !important; line-height: 1.3 !important; }
  h3, .h3 { font-size: 18px !important; }
  h4, .h4 { font-size: 16px !important; }
  
  /* Text */
  p, li, span, div, a { font-size: 14px !important; line-height: 1.6 !important; word-wrap: break-word !important; }
  
  /* Buttons */
  .btn, button, a.btn, .cta-btn, a.cta-btn, [class*="button"], [class*="-btn"] {
    font-size: 13px !important; padding: 12px 20px !important;
    width: auto !important; max-width: 100% !important;
    white-space: normal !important; text-align: center !important;
    display: inline-block !important;
  }
  .btn-block, .full-width-btn { width: 100% !important; }
  
  /* Spacing */
  section, .section { padding: 30px 12px !important; }
  .container { padding: 0 12px !important; }
  
  /* Hero */
  .hero, [class*="hero"] { padding: 30px 16px !important; text-align: center !important; }
  .hero-image, .hero-img { margin-top: 20px !important; }
  
  /* Header nav */
  .header-content, .nav, nav { 
    flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important;
  }
  nav a, .nav a, .nav-link { font-size: 12px !important; padding: 4px 8px !important; }
  .logo, .site-logo { max-height: 40px !important; }
  
  /* Forms */
  input, textarea, select { 
    width: 100% !important; max-width: 100% !important; 
    font-size: 16px !important; padding: 12px !important;
    box-sizing: border-box !important;
  }
  .form-container, .form-wrapper { padding: 20px 12px !important; }
  
  /* Footer */
  .footer, footer { padding: 24px 12px !important; text-align: center !important; }
  .footer-grid, .footer-content { gap: 16px !important; }
  
  /* Tables */
  table { display: block !important; overflow-x: auto !important; }
  
  /* Video embeds */
  .video-container, .video-wrapper, iframe[src*="youtube"], iframe[src*="vimeo"] {
    width: 100% !important; max-width: 100% !important; aspect-ratio: 16/9 !important; height: auto !important;
  }
  
  /* Remove fixed widths */
  [style*="width:"][style*="px"] { width: auto !important; max-width: 100% !important; }
  
  /* Marquee/scrolling text */
  marquee, .marquee { font-size: 12px !important; }
}

/* ============ LIVE BANNER + CHAT ============ */
.cjp-live{position:fixed;top:0;left:0;background:#000;color:#fff;padding:6px 12px;z-index:99999;font-family:Space Mono,monospace;font-size:11px;font-weight:700;display:flex;align-items:center;gap:8px;border-bottom-right-radius:6px}
.cjp-live .dot{width:8px;height:8px;background:#22c55e;border-radius:50%;animation:cjpBlink 1.2s infinite}
@keyframes cjpBlink{0%,100%{opacity:1}50%{opacity:.4}}
.cjp-banner{position:fixed;top:0;left:170px;right:0;background:linear-gradient(90deg,#C94B0C,#1B4D2E);color:#fff;padding:8px 0;z-index:99998;overflow:hidden;font-family:Space Mono,monospace;font-size:12px}
.cjp-banner-track{display:inline-block;white-space:nowrap;animation:cjpScroll 40s linear infinite;padding-left:100%}
.cjp-banner-track:hover{animation-play-state:paused}
.cjp-banner-item{display:inline-block;margin-right:60px}
.cjp-banner-item b{color:#fff}
.cjp-banner-item span{opacity:.85;font-size:10px}
@keyframes cjpScroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
body{padding-top:34px!important}
.cjp-chat-btn{position:fixed;bottom:20px;right:20px;background:#C94B0C;color:#fff;border:none;cursor:pointer;z-index:99999;box-shadow:0 4px 20px rgba(201,75,12,.5);animation:cjpPulse 2s infinite;padding:14px 22px;border-radius:30px;font-size:14px;display:flex;align-items:center;gap:8px;font-family:Space Mono,monospace;font-weight:700}
.cjp-dot-live{width:8px;height:8px;background:#22c55e;border-radius:50%;display:inline-block;animation:cjpBlink 1.2s infinite}
.cjp-notif{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:2px solid #fff;animation:cjpShake .8s infinite}
@keyframes cjpShake{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-8px) rotate(-12deg)}40%{transform:translateY(0)}60%{transform:translateY(-5px) rotate(12deg)}80%{transform:translateY(0)}}
@keyframes cjpPulse{0%,100%{box-shadow:0 4px 20px rgba(201,75,12,.5)}50%{box-shadow:0 4px 30px rgba(201,75,12,.9)}}
.cjp-chat-box{position:fixed;bottom:80px;right:20px;width:350px;max-width:calc(100vw - 40px);height:500px;max-height:75vh;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.2);z-index:99999;display:none;flex-direction:column;border:2px solid #C94B0C;font-family:Libre Baskerville,serif}
.cjp-chat-box.open{display:flex}
.cjp-chat-head{background:linear-gradient(90deg,#C94B0C,#e05a1a);color:#fff;padding:14px;border-radius:10px 10px 0 0;font-weight:700}
.cjp-chat-head .title{display:flex;justify-content:space-between;align-items:center}
.cjp-chat-close{background:none;border:none;color:#fff;font-size:22px;cursor:pointer}
.cjp-chat-msgs{flex:1;overflow-y:auto;padding:12px;background:#EADED0}
.cjp-msg{margin-bottom:10px;padding:8px 12px;background:#fff;border-radius:8px;font-size:13px;border-left:3px solid #C94B0C}
.cjp-msg b{color:#C94B0C;font-size:11px;display:block;margin-bottom:2px}
.cjp-msg small{color:#8B7D6B;font-size:10px;float:right}
.cjp-chat-form{display:flex;border-top:1px solid #eee;padding:10px;gap:6px}
.cjp-chat-form input{flex:1;padding:10px;border:1px solid #ddd;border-radius:20px;font-size:13px}
.cjp-chat-form button{background:#C94B0C;color:#fff;border:none;padding:10px 16px;border-radius:20px;cursor:pointer;font-weight:700}
.cjp-register-btn{display:inline-block;background:#22c55e;color:#fff;text-decoration:none;padding:6px 14px;border-radius:20px;font-size:11px;font-weight:700;margin-top:6px}
@media(max-width:768px){.cjp-banner{left:130px;font-size:10px}.cjp-chat-btn{padding:10px 14px!important;font-size:11px!important;bottom:15px!important;right:15px!important}.cjp-chat-box{right:10px!important;bottom:75px!important;width:calc(100vw - 20px)!important}.cjp-live{font-size:9px!important;padding:4px 8px!important}}

/* Fix checkbox layout on mobile */
@media (max-width: 768px) {
  /* Force checkbox + label to wrap nicely */
  label, .checkbox-label, .form-check {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
    flex-wrap: nowrap !important;
  }
  
  /* Checkbox stays compact */
  input[type="checkbox"], input[type="radio"] {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    margin: 2px 0 0 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Text wraps properly next to checkbox */
  label > span, label > div, .form-check label {
    flex: 1 !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  /* Form rows - stack vertically */
  .form-row, .checkbox-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* Desktop also gets cleaner spacing */
input[type="checkbox"], input[type="radio"] {
  margin-right: 8px !important;
  vertical-align: middle !important;
}

/* TARGETED FIX: checkbox + label as siblings in div */
div:has(> input[type="checkbox"]) {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  flex-wrap: nowrap !important;
}

div:has(> input[type="checkbox"]) input[type="checkbox"] {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin: 3px 0 0 0 !important;
  flex-shrink: 0 !important;
  accent-color: #C94B0C !important;
}

div:has(> input[type="checkbox"]) > label {
  flex: 1 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  div:has(> input[type="checkbox"]) > label {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  div:has(> input[type="checkbox"]) {
    gap: 8px !important;
  }
}

/* ============ BANNER AVATARS ============ */
.cjp-banner-avatar{width:20px;height:20px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:6px;border:1px solid rgba(255,255,255,0.4);display:inline-block}
.cjp-banner-city{opacity:.8;font-size:10px}

/* ============ JOIN BUTTONS — BOUNCY SAFFRON→GREEN GLOW ============ */
@keyframes cjp-bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes cjp-glow{
  0%,100%{box-shadow:0 0 14px rgba(255,153,51,.85),0 0 28px rgba(255,153,51,.4),0 2px 8px rgba(0,0,0,.2)}
  50%{box-shadow:0 0 14px rgba(27,77,46,.85),0 0 28px rgba(27,77,46,.4),0 2px 8px rgba(0,0,0,.2)}
}
.cjp-join-btn{animation:cjp-bounce 2s ease-in-out infinite,cjp-glow 3s ease-in-out infinite!important;position:relative!important;cursor:pointer!important}

/* ============ CHAT BADGE — VERTICAL BOUNCE ============ */
@keyframes cjpNotifBounce{0%,100%{transform:translateY(0)}35%{transform:translateY(-5px)}65%{transform:translateY(-3px)}}
.cjp-notif{animation:cjpNotifBounce 1.5s ease-in-out infinite!important}

/* ============ FOOTER DISCLAIMER STRIP ============ */
#cjpFooterStrip{background:#111;color:#aaa;font-size:11px;padding:16px;text-align:center;font-family:Space Mono,monospace;border-top:1px solid #2a2a2a;line-height:2;letter-spacing:.02em}
#cjpFooterStrip strong{color:#ccc}
#cjpFooterStrip a{color:#C94B0C!important;text-decoration:none}
#cjpFooterStrip a:hover{text-decoration:underline}
/* FIX: Marquee profile pics small + popups mobile-friendly */
.cjp-banner-item img,
.cjp-marquee-item img,
[class*="marquee"] img,
[class*="banner"] img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}

.cjp-banner-item,
.cjp-marquee-item,
[class*="marquee"] > * {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  height: 32px !important;
}

[class*="marquee"],
[class*="banner-strip"] {
  height: 36px !important;
  overflow: hidden !important;
}

/* Mobile popup smaller */
@media (max-width: 768px) {
  #cjpJoinPopup, [id*="JoinPopup"], [class*="join-popup"] {
    max-width: 220px !important;
    font-size: 11px !important;
    padding: 8px 12px !important;
    bottom: 70px !important;
    left: 10px !important;
  }
  #cjpJoinPopup img, [id*="JoinPopup"] img {
    width: 24px !important;
    height: 24px !important;
  }
}