/* ============================================================
   REHAN SHAHID v14 FINAL FIXES
   - Real social brand colors protected from theme overrides
   - Old left-side live drawer button restored
   - Standalone page header overlap fixed
   ============================================================ */

/* ---------- 1) SOCIAL BUTTONS: BRAND COLORS ALWAYS VISIBLE ---------- */
.social-cta-row{
  position:relative!important;
  z-index:4!important;
}
.social-cta-row .btn{
  min-height:58px!important;
  border-radius:24px!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.20)!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.social-cta-row .btn::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  opacity:.18!important;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.32) 45%,transparent 70%)!important;
  transform:translateX(-120%)!important;
  transition:transform .62s ease!important;
  pointer-events:none!important;
}
.social-cta-row .btn:hover::before{transform:translateX(120%)!important;}
.social-cta-row .btn .icon{
  width:25px!important;
  height:25px!important;
  display:inline-grid!important;
  place-items:center!important;
  color:currentColor!important;
  opacity:1!important;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.22))!important;
}
.social-cta-row .btn .icon svg{width:22px!important;height:22px!important;display:block!important;fill:currentColor!important;}

.social-cta-row a.btn.whatsapp,
.social-cta-row a.btn[href*="wa.me"]{
  background:linear-gradient(135deg,#25D366 0%,#128C7E 100%)!important;
  color:#06140a!important;
  border-color:rgba(37,211,102,.65)!important;
  box-shadow:0 18px 52px rgba(37,211,102,.26), inset 0 1px 0 rgba(255,255,255,.24)!important;
}
.social-cta-row a.btn.btn-telegram,
.social-cta-row a.btn[href*="t.me"]{
  background:linear-gradient(135deg,#2AABEE 0%,#168ACD 100%)!important;
  color:#fff!important;
  border-color:rgba(42,171,238,.68)!important;
  box-shadow:0 18px 52px rgba(42,171,238,.24), inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.social-cta-row a.btn.instagram,
.social-cta-row a.btn[href*="instagram.com"]{
  background:linear-gradient(135deg,#FEDA75 0%,#FA7E1E 22%,#D62976 56%,#962FBF 78%,#4F5BD5 100%)!important;
  color:#fff!important;
  border-color:rgba(214,41,118,.66)!important;
  box-shadow:0 18px 52px rgba(214,41,118,.24), inset 0 1px 0 rgba(255,255,255,.24)!important;
}
.social-cta-row a.btn.threads,
.social-cta-row a.btn[href*="threads.com"]{
  background:linear-gradient(135deg,#242424 0%,#000 100%)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.35)!important;
}
.social-cta-row a.btn.tiktok,
.social-cta-row a.btn[href*="tiktok.com"]{
  background:linear-gradient(135deg,#00F2EA 0%,#111 46%,#FF0050 100%)!important;
  color:#fff!important;
  border-color:rgba(0,242,234,.56)!important;
}
.social-cta-row a.btn.facebook,
.social-cta-row a.btn[href*="facebook.com"]{
  background:linear-gradient(135deg,#1877F2 0%,#0f5bc9 100%)!important;
  color:#fff!important;
  border-color:rgba(24,119,242,.66)!important;
}
.social-cta-row a.btn.btn-email,
.social-cta-row a.btn[href^="mailto:"]{
  background:linear-gradient(135deg,#EA4335 0%,#FBBC05 45%,#34A853 100%)!important;
  color:#fff!important;
  border-color:rgba(234,67,53,.55)!important;
}
.social-cta-row a.btn.btn-reddit,
.social-cta-row a.btn[href*="reddit.com"]{
  background:linear-gradient(135deg,#FF4500 0%,#ff7a45 100%)!important;
  color:#fff!important;
  border-color:rgba(255,69,0,.66)!important;
}
.social-cta-row a.btn.btn-x,
.social-cta-row a.btn[href*="x.com"],
.social-cta-row a.btn[href*="twitter.com"]{
  background:linear-gradient(135deg,#0b0b0b 0%,#242424 100%)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.34)!important;
}
.social-cta-row a.btn.btn-youtube,
.social-cta-row a.btn[href*="youtube.com"]{
  background:linear-gradient(135deg,#FF0000 0%,#CC0000 100%)!important;
  color:#fff!important;
  border-color:rgba(255,0,0,.68)!important;
}
.social-cta-row a.btn.btn-spotify,
.social-cta-row a.btn[href*="spotify.com"]{
  background:linear-gradient(135deg,#1DB954 0%,#1ED760 100%)!important;
  color:#031407!important;
  border-color:rgba(29,185,84,.66)!important;
}
.social-cta-row a.btn.btn-linkedin,
.social-cta-row a.btn[href*="linkedin.com"]{
  background:linear-gradient(135deg,#0A66C2 0%,#0077B5 100%)!important;
  color:#fff!important;
  border-color:rgba(10,102,194,.66)!important;
}

/* Contact/social list icons: keep logo + brand square even in themed mode */
.social .social-icon{
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  box-shadow:0 16px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.social .social-icon .icon,
.social .social-icon svg{display:block!important;opacity:1!important;visibility:visible!important;}
.social .social-icon.w,
a.social[href*="wa.me"] .social-icon{background:linear-gradient(135deg,#25D366,#128C7E)!important;color:#06140a!important;}
.social .social-icon.i,
a.social[href*="instagram.com"] .social-icon{background:linear-gradient(135deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5)!important;color:#fff!important;}
.social .social-icon.f,
a.social[href*="facebook.com"] .social-icon{background:linear-gradient(135deg,#1877F2,#0f5bc9)!important;color:#fff!important;}
a.social[href^="mailto:"] .social-icon,.social-icon.e{background:linear-gradient(135deg,#EA4335,#FBBC05,#34A853)!important;color:#fff!important;}
a.social[href*="reddit.com"] .social-icon{background:linear-gradient(135deg,#FF4500,#FF7A45)!important;color:#fff!important;}
a.social[href*="x.com"] .social-icon,a.social[href*="twitter.com"] .social-icon{background:linear-gradient(135deg,#000,#222)!important;color:#fff!important;}
a.social[href*="youtube.com"] .social-icon{background:linear-gradient(135deg,#FF0000,#CC0000)!important;color:#fff!important;}
a.social[href*="spotify.com"] .social-icon,.social-icon.spotify{background:linear-gradient(135deg,#1DB954,#1ED760)!important;color:#031407!important;}
a.social[href*="linkedin.com"] .social-icon,.social-icon.linkedin{background:linear-gradient(135deg,#0A66C2,#0077B5)!important;color:#fff!important;}

/* ---------- 2) OLD LEFT-SIDE LIVE DRAWER BUTTON RESTORED ---------- */
#rs-drawer-toggle{
  position:fixed!important;
  left:0!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:32px!important;
  height:78px!important;
  border-radius:0 18px 18px 0!important;
  border:1px solid rgba(215,168,77,.34)!important;
  border-left:0!important;
  background:linear-gradient(180deg,rgba(16,14,8,.94),rgba(62,50,20,.84))!important;
  box-shadow:8px 0 30px rgba(0,0,0,.42), inset 1px 0 0 rgba(255,232,162,.16)!important;
  backdrop-filter:blur(16px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.18)!important;
  z-index:2147483050!important;
  opacity:.98!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}
#rs-drawer-toggle:hover,
#rs-drawer-toggle.hovered{
  width:39px!important;
  background:linear-gradient(180deg,rgba(215,168,77,.32),rgba(20,17,8,.92))!important;
  box-shadow:10px 0 34px rgba(215,168,77,.20),8px 0 30px rgba(0,0,0,.38)!important;
}
#rs-drawer-toggle .dt-icon{gap:4px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;}
#rs-drawer-toggle .dt-line,
#rs-drawer-toggle.open .dt-line,
#rs-drawer-toggle.open .dt-line:nth-child(1),
#rs-drawer-toggle.open .dt-line:nth-child(2),
#rs-drawer-toggle.open .dt-line:nth-child(3){
  width:16px!important;
  height:2px!important;
  opacity:1!important;
  transform:none!important;
  border-radius:99px!important;
  background:linear-gradient(90deg,#fff2bf,#d7a84d)!important;
  box-shadow:0 0 10px rgba(215,168,77,.38)!important;
}
#rs-drawer-toggle .dt-badge{display:none!important;}
#rs-live-panel{
  max-width:min(390px,88vw)!important;
  z-index:2147483200!important;
}
#rs-live-panel.drawer-open{transform:translate3d(0,0,0)!important;visibility:visible!important;pointer-events:auto!important;}

/* ---------- 3) STANDALONE PAGE HEADER OVERLAP FIX ---------- */
.standalone-shell{
  padding-top:calc(78px + env(safe-area-inset-top))!important;
}
.page-topbar{
  min-height:64px!important;
  padding:14px max(18px,env(safe-area-inset-left)) 14px max(18px,env(safe-area-inset-left))!important;
  background:linear-gradient(180deg,rgba(6,5,3,.94),rgba(6,5,3,.78))!important;
  border-bottom:1px solid rgba(215,168,77,.26)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.34)!important;
}
#atlPageOverlay .atl-onav,
#friendsPageOverlay .cpo-nav,
#integrationsPageOverlay .ilab-nav{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  z-index:3!important;
  width:min(100% - 28px,1180px)!important;
  min-height:68px!important;
  height:auto!important;
  margin:18px auto 30px!important;
  border:1px solid rgba(215,168,77,.26)!important;
  border-radius:28px!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,rgba(16,14,8,.88),rgba(6,5,3,.82))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,232,162,.10)!important;
}
#friendsPageOverlay .cpo-nav-inner{width:100%!important;padding:12px 18px!important;}
#friendsPageOverlay .cpo-back-btn{display:inline-flex!important;}
#friendsPageOverlay .cpo-body{
  padding-top:18px!important;
}
#atlPageOverlay .atl-ohero,
#integrationsPageOverlay .ilab-hero{
  padding-top:34px!important;
}
#integrationsPageOverlay,
#atlPageOverlay,
#friendsPageOverlay{
  overflow-x:hidden!important;
}
#integrationsPageOverlay .ilab-body{padding-top:4px!important;}
#integrationsPageOverlay .section:first-child{margin-top:0!important;}

/* Header text responsive guard */
.page-topbar a,.page-topbar small,
.atl-onav-title,.cpo-brand strong,.ilab-nav-brand strong{
  min-width:0!important;
  max-width:58vw!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

@media (max-width:768px){
  .standalone-shell{padding-top:calc(72px + env(safe-area-inset-top))!important;}
  .page-topbar{min-height:60px!important;border-radius:0 0 24px 24px!important;}
  #atlPageOverlay .atl-onav,
  #friendsPageOverlay .cpo-nav,
  #integrationsPageOverlay .ilab-nav{
    width:min(100% - 24px,680px)!important;
    margin:14px auto 24px!important;
    border-radius:24px!important;
  }
  #atlPageOverlay .atl-onav{padding:12px 14px!important;gap:12px!important;}
  #atlPageOverlay .atl-onav-back,
  #friendsPageOverlay .cpo-back-btn,
  #integrationsPageOverlay .ilab-back-btn{
    padding:10px 14px!important;
    font-size:12px!important;
    line-height:1.3!important;
    max-width:45%!important;
    white-space:normal!important;
    text-align:center!important;
    justify-content:center!important;
  }
  #friendsPageOverlay .cpo-nav-inner,
  #integrationsPageOverlay .ilab-nav{
    gap:12px!important;
  }
  #friendsPageOverlay .cpo-brand,
  #integrationsPageOverlay .ilab-nav-brand,
  #atlPageOverlay .atl-onav-brand{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  #friendsPageOverlay .cpo-body{padding-top:8px!important;}
  #atlPageOverlay .atl-ohero,
  #integrationsPageOverlay .ilab-hero{padding-top:26px!important;}
  .social-cta-row{grid-template-columns:1fr 1fr!important;gap:12px!important;}
  .social-cta-row .btn{min-height:58px!important;font-size:13px!important;padding:0 12px!important;letter-spacing:.05em!important;}
  #rs-drawer-toggle{left:0!important;top:50%!important;bottom:auto!important;width:32px!important;height:78px!important;border-radius:0 18px 18px 0!important;}
}

@media (max-width:420px){
  .social-cta-row .btn{font-size:12px!important;}
  .social-cta-row .btn .icon{width:22px!important;height:22px!important;}
  .page-topbar a,.page-topbar small{font-size:clamp(.78rem,3.5vw,.95rem)!important;max-width:50vw!important;}
  #atlPageOverlay .atl-onav-title,
  #friendsPageOverlay .cpo-brand strong,
  #integrationsPageOverlay .ilab-nav-brand strong{font-size:13px!important;}
}