/*
 * FollowerAbzar 80.3.3 - public background + dark-mode compatibility bridge.
 * The visual recipe is based on the supplied .social-services-bg reference:
 * diamond grid, low-opacity digital dots and restrained brand glows.
 */

.social-services-bg,
body.fasmm-social-front-bg{
  --brand-cyan:0,220,225;
  --brand-blue:30,110,235;
  --brand-purple:155,65,245;
  --brand-pink:240,60,165;
  --brand-orange:255,145,20;
}

/* Reusable section background requested by the design reference. */
.social-services-bg{
  position:relative;
  isolation:isolate;
  width:100%;
  height:auto;
  min-height:0;
  margin-top:0;
  margin-bottom:0;
  overflow:hidden;
  background-color:#f7f9ff;
  background-image:
    radial-gradient(circle at 92% 5%,rgba(var(--brand-cyan),.14) 0%,rgba(var(--brand-cyan),.065) 18%,rgba(var(--brand-cyan),.025) 32%,transparent 48%),
    radial-gradient(circle at 5% 18%,rgba(var(--brand-purple),.085) 0%,rgba(var(--brand-purple),.035) 24%,transparent 43%),
    radial-gradient(circle at 55% 48%,rgba(var(--brand-blue),.04) 0%,transparent 37%),
    radial-gradient(circle at 8% 95%,rgba(var(--brand-pink),.065) 0%,rgba(var(--brand-pink),.02) 24%,transparent 42%),
    radial-gradient(circle at 96% 92%,rgba(var(--brand-orange),.025) 0%,transparent 30%),
    repeating-linear-gradient(45deg,rgba(65,82,120,.052) 0,rgba(65,82,120,.052) 1px,transparent 1px,transparent 42px),
    repeating-linear-gradient(-45deg,rgba(65,82,120,.052) 0,rgba(65,82,120,.052) 1px,transparent 1px,transparent 42px);
  background-position:center;
  background-repeat:no-repeat;
}
.elementor .social-services-bg.e-con,.elementor .social-services-bg.elementor-element,.social-services-bg.e-con,.social-services-bg.e-flex{height:auto;min-height:0;margin-bottom:0}
.social-services-bg:before{
  content:"";position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(var(--brand-cyan),.24) 0,rgba(var(--brand-cyan),.24) 1px,transparent 1.5px);
  background-size:84px 84px;background-position:center;opacity:.22;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 84%,transparent 100%)
}
.social-services-bg:after{
  content:"";position:absolute;width:600px;height:600px;top:-320px;right:-240px;pointer-events:none;z-index:0;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--brand-cyan),.14) 0%,rgba(var(--brand-blue),.075) 27%,rgba(var(--brand-purple),.035) 48%,transparent 70%);
  filter:blur(28px);animation:followerabzarGlow 15s ease-in-out infinite alternate
}
.social-services-bg>*{position:relative;z-index:1}
@keyframes followerabzarGlow{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-35px,40px,0) scale(1.07)}100%{transform:translate3d(-70px,75px,0) scale(1.12)}}

/* Same visual language across the public frontend, without body overflow hacks. */
body.fasmm-social-front-bg{
  background-color:#f7f9ff;
  background-image:
    radial-gradient(circle at 92% 3%,rgba(var(--brand-cyan),.11) 0%,rgba(var(--brand-cyan),.035) 24%,transparent 45%),
    radial-gradient(circle at 4% 22%,rgba(var(--brand-purple),.07) 0%,rgba(var(--brand-purple),.025) 26%,transparent 44%),
    radial-gradient(circle at 58% 54%,rgba(var(--brand-blue),.028) 0%,transparent 38%),
    radial-gradient(circle at 8% 94%,rgba(var(--brand-pink),.045) 0%,transparent 40%),
    radial-gradient(circle,rgba(var(--brand-cyan),.09) 0,rgba(var(--brand-cyan),.09) 1px,transparent 1.5px),
    repeating-linear-gradient(45deg,rgba(65,82,120,.036) 0,rgba(65,82,120,.036) 1px,transparent 1px,transparent 42px),
    repeating-linear-gradient(-45deg,rgba(65,82,120,.036) 0,rgba(65,82,120,.036) 1px,transparent 1px,transparent 42px);
  background-size:auto,auto,auto,auto,84px 84px,auto,auto;
  background-attachment:fixed;
  color:var(--fasmm-text-primary,#182230)
}

/* Optional reusable glass card from the reference, token-aware for production pages. */
.social-glass-card{
  background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.92);border-radius:18px;
  box-shadow:0 8px 30px rgba(30,60,110,.055);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}
@media(hover:hover){.social-glass-card:hover{border-color:rgba(var(--brand-cyan),.22);box-shadow:0 14px 38px rgba(30,60,110,.085)}}

/* Current dark attribute + legacy body-class compatibility. */
html[data-fasmm-theme="dark"] body.fasmm-social-front-bg,
body.fasmm-dark.fasmm-social-front-bg,
body.dark-mode.fasmm-social-front-bg{
  background-color:#080b14;
  background-image:
    radial-gradient(circle at 92% 5%,rgba(var(--brand-cyan),.14) 0%,rgba(var(--brand-cyan),.065) 20%,transparent 46%),
    radial-gradient(circle at 5% 18%,rgba(var(--brand-purple),.12) 0%,rgba(var(--brand-purple),.045) 25%,transparent 44%),
    radial-gradient(circle at 55% 48%,rgba(var(--brand-blue),.065) 0%,transparent 39%),
    radial-gradient(circle at 8% 95%,rgba(var(--brand-pink),.07) 0%,transparent 40%),
    radial-gradient(circle,rgba(var(--brand-cyan),.13) 0,rgba(var(--brand-cyan),.13) 1px,transparent 1.5px),
    repeating-linear-gradient(45deg,rgba(255,255,255,.038) 0,rgba(255,255,255,.038) 1px,transparent 1px,transparent 42px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.038) 0,rgba(255,255,255,.038) 1px,transparent 1px,transparent 42px);
  color:var(--fasmm-text-primary,#f5f3ff)
}
html[data-fasmm-theme="dark"] .social-services-bg,body.fasmm-dark .social-services-bg,body.dark-mode .social-services-bg{
  background-color:#080b14;
  background-image:
    radial-gradient(circle at 92% 5%,rgba(var(--brand-cyan),.14) 0%,rgba(var(--brand-cyan),.065) 20%,transparent 46%),
    radial-gradient(circle at 5% 18%,rgba(var(--brand-purple),.12) 0%,rgba(var(--brand-purple),.045) 25%,transparent 44%),
    radial-gradient(circle at 55% 48%,rgba(var(--brand-blue),.065) 0%,transparent 39%),
    radial-gradient(circle at 8% 95%,rgba(var(--brand-pink),.07) 0%,transparent 40%),
    radial-gradient(circle at 96% 92%,rgba(var(--brand-orange),.025) 0%,transparent 30%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.042) 0,rgba(255,255,255,.042) 1px,transparent 1px,transparent 42px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.042) 0,rgba(255,255,255,.042) 1px,transparent 1px,transparent 42px)
}
html[data-fasmm-theme="dark"] .social-services-bg:before,body.fasmm-dark .social-services-bg:before,body.dark-mode .social-services-bg:before{opacity:.22;background-image:radial-gradient(circle,rgba(var(--brand-cyan),.35) 0,rgba(var(--brand-cyan),.35) 1px,transparent 1.5px)}
html[data-fasmm-theme="dark"] .social-glass-card,body.fasmm-dark .social-glass-card,body.dark-mode .social-glass-card{background:rgba(13,18,31,.84);border-color:rgba(255,255,255,.07);color:#f4f7ff;box-shadow:0 10px 35px rgba(0,0,0,.20)}

/* Dark fallback for public FASMM components that previously depended only on body.fasmm-dark. */
html[data-fasmm-theme="dark"] body.fasmm-social-front-bg :is(
  .fasmm-public-card,.fasmm-card,.fasmm-panel-card,.fasmm-wallet-card,.fasmm-ticket-card,.fasmm-profile-card,
  .fasmm-orders-wrap,.fasmm-order-card,.fasmm-modal__dialog,.fasmm-public-modal__dialog,.fasmm-payment-card-choice,
  .fasmm-identity-card-shell,.fasmm-identity-card-form,.fasmm-identity-card-row
){background-color:var(--fasmm-bg-surface,#242136);border-color:var(--fasmm-border,#49445f);color:var(--fasmm-text-primary,#f5f3ff)}
html[data-fasmm-theme="dark"] body.fasmm-social-front-bg :is(input,select,textarea){background-color:var(--fasmm-input-bg,var(--fasmm-bg-surface-2,#2d2941));border-color:var(--fasmm-input-border,var(--fasmm-border,#49445f));color:var(--fasmm-input-text,var(--fasmm-text-primary,#f5f3ff))}
html[data-fasmm-theme="dark"] body.fasmm-social-front-bg :is(input,textarea)::placeholder{color:var(--fasmm-input-placeholder,var(--fasmm-text-muted,#9f9ab2))}

@media(max-width:1024px){body.fasmm-social-front-bg{background-attachment:scroll}.social-services-bg:after{width:500px;height:500px;top:-270px;right:-230px}}
@media(max-width:767px){
  .social-services-bg{height:auto;min-height:0;background-image:
    radial-gradient(circle at 100% 0%,rgba(var(--brand-cyan),.11),transparent 40%),
    radial-gradient(circle at 0% 35%,rgba(var(--brand-purple),.055),transparent 38%),
    radial-gradient(circle at 20% 100%,rgba(var(--brand-pink),.04),transparent 38%),
    repeating-linear-gradient(45deg,rgba(65,82,120,.043) 0,rgba(65,82,120,.043) 1px,transparent 1px,transparent 35px),
    repeating-linear-gradient(-45deg,rgba(65,82,120,.043) 0,rgba(65,82,120,.043) 1px,transparent 1px,transparent 35px)}
  .social-services-bg:before{background-size:70px 70px;opacity:.17}.social-services-bg:after{width:380px;height:380px;top:-220px;right:-220px;opacity:.75}
  body.fasmm-social-front-bg{background-size:auto,auto,auto,auto,70px 70px,auto,auto}
}
@media(prefers-reduced-motion:reduce){.social-services-bg:after{animation:none}.social-glass-card{transition:none}}


/* Legacy customer panel still carried important page backgrounds. The late owner below
 * only clears those geometry-era fills so the requested social background remains visible. */
body.fasmm-social-front-bg.fasmm-panel-fullscreen{
  background-color:#f7f9ff!important;
  background-image:
    radial-gradient(circle at 92% 3%,rgba(var(--brand-cyan),.11) 0%,rgba(var(--brand-cyan),.035) 24%,transparent 45%),
    radial-gradient(circle at 4% 22%,rgba(var(--brand-purple),.07) 0%,rgba(var(--brand-purple),.025) 26%,transparent 44%),
    radial-gradient(circle at 8% 94%,rgba(var(--brand-pink),.045) 0%,transparent 40%),
    repeating-linear-gradient(45deg,rgba(65,82,120,.036) 0,rgba(65,82,120,.036) 1px,transparent 1px,transparent 42px),
    repeating-linear-gradient(-45deg,rgba(65,82,120,.036) 0,rgba(65,82,120,.036) 1px,transparent 1px,transparent 42px)!important;
}
body.fasmm-social-front-bg.fasmm-panel-fullscreen :is(.fasmm-adminator-shell,.fasmm-shell,.layout-wrapper,.layout-container,.layout-page,.content-wrapper){background:transparent!important}
html[data-fasmm-theme="dark"] body.fasmm-social-front-bg.fasmm-panel-fullscreen,
body.fasmm-dark.fasmm-social-front-bg.fasmm-panel-fullscreen{
  background-color:#080b14!important;
  background-image:
    radial-gradient(circle at 92% 5%,rgba(var(--brand-cyan),.14) 0%,rgba(var(--brand-cyan),.065) 20%,transparent 46%),
    radial-gradient(circle at 5% 18%,rgba(var(--brand-purple),.12) 0%,rgba(var(--brand-purple),.045) 25%,transparent 44%),
    radial-gradient(circle at 8% 95%,rgba(var(--brand-pink),.07) 0%,transparent 40%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.038) 0,rgba(255,255,255,.038) 1px,transparent 1px,transparent 42px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.038) 0,rgba(255,255,255,.038) 1px,transparent 1px,transparent 42px)!important;
}