/*
  ReploSend Sci‑Fi Login Theme
  - Neon WhatsApp green accents
  - Glassmorphism card with holographic lines
  - Responsive: mobile-first with richer desktop details
  - Non-intrusive: overrides only login page containers
*/

:root{
  --sci-bg:#071118;
  --sci-grid:#0a1e2a;
  --sci-neon:#25d366; /* WhatsApp green */
  --sci-neon-soft:#1db954; /* supporting green */
  --sci-cyan:#39c3ff;
  --sci-purple:#8b5cf6;
  --sci-text:#e6f6ff;
  --sci-muted:#9cc3d8;
}

html, body { height: 100%; }
body.theme-sci{
  background: radial-gradient(1200px 800px at 85% 10%, rgba(33,150,243,.08), transparent 60%),
              radial-gradient(900px 600px at 10% 90%, rgba(37,211,102,.10), transparent 60%),
              #050e14;
  color: var(--sci-text);
  overflow-x: hidden;
}

/* Animated layers container */
.sci-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;min-width:100vw;min-height:100vh}
.sci-layer{position:absolute;inset:0;min-width:100%;min-height:100%}

/* Subtle nebula blur */
.sci-nebula{background:
  radial-gradient(600px 400px at 20% 30%, rgba(57,195,255,.10), transparent 70%),
  radial-gradient(700px 500px at 80% 70%, rgba(139,92,246,.10), transparent 70%);
  filter: blur(30px);
}

/* Futuristic grid (perspective) */
.sci-grid{--g:rgba(0,180,255,.08);
  background-image: linear-gradient(var(--g) 1px, transparent 1px), linear-gradient(90deg, var(--g) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  /* keep perspective even when JS applies translate for parallax */
  transform: perspective(900px) rotateX(60deg) translateY(30%);
  transform-origin: top center;
  mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 60%, transparent 100%);
}

/* Card upgrades */
.sci-card{
  position: relative;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(7,17,24,.72), rgba(7,17,24,.66));
  border: 1px solid rgba(149, 230, 255, .14);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(37,211,102,.10) inset;
  backdrop-filter: blur(10px) saturate(140%);
}
.sci-card:before{
  content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(37,211,102,.20), transparent 30%, transparent 70%, rgba(57,195,255,.18)),
    linear-gradient(0deg, rgba(57,195,255,.15), transparent 40%, transparent 60%, rgba(139,92,246,.12));
  mask-image: linear-gradient(180deg, white, rgba(255,255,255,.2));
}

/* Title glow */
.form-title{
  text-shadow: 0 0 14px rgba(37,211,102,.35), 0 0 32px rgba(57,195,255,.25);
  letter-spacing: .5px;
}
.form-subtitle{color:var(--sci-muted)}

/* Controls */
.form-control{
  background: rgba(2,8,12,.6);
  border: 1px solid rgba(120,220,255,.16);
  color: var(--sci-text);
}
.form-control:focus{outline:none;border-color:var(--sci-neon);box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.input-error{border-color:#ef4444 !important; box-shadow:0 0 0 2px rgba(239,68,68,.28)}

.password-wrapper .toggle-password-btn{
  background: rgba(14,38,48,.6); color: var(--sci-text); border:1px solid rgba(120,220,255,.14);
}
.password-wrapper .toggle-password-btn:hover{box-shadow:0 0 0 2px rgba(57,195,255,.22)}

/* Buttons */
.brand-btn, .btn.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;border-radius:12px;padding:12px 16px;
  background: linear-gradient(180deg, rgba(45,185,102,1) 0%, rgba(37,211,102,1) 55%, rgba(24,160,82,1) 100%);
  color:#072011;border:1px solid rgba(7,40,18,.2);font-weight:800;letter-spacing:.2px;
  box-shadow: 0 10px 24px rgba(37,211,102,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.brand-btn:hover{filter: brightness(1.03); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(37,211,102,.33), inset 0 0 0 1px rgba(255,255,255,.08)}
.brand-btn:active{transform: translateY(0)}
.brand-btn i{font-size:18px;color:#083a1c}
.brand-btn .btn-label{display:inline-block}

/* Google button (glass card style) */
.social-login-wrap{display:flex;justify-content:center;margin:10px 0}
.btn-google{max-width:340px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;border-radius:12px;padding:12px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,247,249,.96));
  color:#1f2937;border:1px solid #e5e7eb; box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.6) inset;
  font-weight:700;
}
.btn-google:hover{filter: brightness(1.02); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.7) inset}
.btn-google:active{transform: translateY(0)}
.btn-google img{border-radius:2px}

/* Captcha */
.captcha-image{box-shadow:0 6px 20px rgba(0,0,0,.25)}
.captcha-refresh{background: rgba(37,211,102,.12); color: var(--sci-neon); border:1px solid rgba(37,211,102,.35)}
.captcha-refresh:hover{background: rgba(37,211,102,.18)}

/* Features ticker accents */
.features-ticker{border-color: rgba(120,220,255,.18); background: rgba(10,60,80,.22)}
.features-ticker span{color:#ccf5ff}
.features-ticker span i{color: var(--sci-neon)}

/* WhatsApp floating pulse */
.wa-floating{box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 22px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* Helper promo banner above WhatsApp button */
.wa-helper-banner{position:fixed;right:25px;bottom:90px;z-index:1201;max-width:280px;font-size:13px;direction:rtl;pointer-events:none;opacity:0;transform:translateY(8px) scale(.95);transition:opacity .35s ease, transform .35s ease}
.wa-helper-banner.is-visible{opacity:1;transform:translateY(0) scale(1)}
.wa-helper-inner{background:#0d3328;border:1px solid rgba(37,211,102,.5);padding:10px 14px 12px;border-radius:16px;box-shadow:0 12px 28px -6px rgba(0,0,0,.55),0 0 0 1px rgba(37,211,102,.25) inset,color-mix(in srgb,#e9fff5,#25d366 10%);color:#e9fff5;position:relative;overflow:hidden;font-weight:400;line-height:1.5}
.wa-helper-inner:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 12%,rgba(37,211,102,.55),transparent 62%);opacity:.25;pointer-events:none}
/* Tail arrow pointing to the WhatsApp button */
.wa-helper-inner:after{content:'';position:absolute;right:18px;bottom:-9px;width:22px;height:22px;background:#0d3328;border:1px solid rgba(37,211,102,.5);border-top:none;border-left:none;transform:rotate(45deg);box-shadow:0 7px 14px -4px rgba(0,0,0,.55);}
.wa-helper-title{display:block;font-weight:600;font-size:14px;margin:0 0 4px;color:#25d366;text-shadow:0 0 6px rgba(37,211,102,.4)}
.wa-helper-text strong{color:#39c3ff;font-weight:600}
.wa-helper-close{position:absolute;top:6px;left:8px;width:26px;height:26px;border-radius:8px;border:1px solid rgba(37,211,102,.4);background:rgba(0,0,0,.25);color:#d9fff3;cursor:pointer;line-height:22px;text-align:center;font-size:16px;font-weight:600;pointer-events:auto}
.wa-helper-close:hover{background:rgba(0,0,0,.35)}
.wa-helper-banner:hover .wa-helper-inner{border-color:rgba(37,211,102,.65);box-shadow:0 16px 36px -8px rgba(0,0,0,.65),0 0 0 1px rgba(37,211,102,.32) inset}
@media (max-width:720px){
  .wa-helper-banner{right:12px;bottom:96px;max-width:74%;font-size:12px}
  .wa-helper-inner{padding:9px 12px 11px}
  .wa-helper-title{font-size:13px}
  .wa-helper-inner:after{right:14px;bottom:-9px}
}

/* RTL Support for WhatsApp Helper */
html[dir="rtl"] .wa-helper-banner { right: auto; left: 25px; }
html[dir="rtl"] .wa-helper-inner:after { right: auto; left: 18px; }
@media (max-width:720px){
  html[dir="rtl"] .wa-helper-banner { right: auto; left: 12px; }
  html[dir="rtl"] .wa-helper-inner:after { right: auto; left: 14px; }
}

/* Iconic auth actions */
.icon-row{display:flex;justify-content:center;gap:16px;margin:10px 0 2px}
.action-icon{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;
  background: linear-gradient(180deg, rgba(7,17,24,.85), rgba(7,17,24,.72));
  border:1px solid rgba(149,230,255,.18);
  box-shadow: 0 10px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(57,195,255,.08) inset;
  color: var(--sci-text); position: relative; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.action-icon i{font-size:20px;color:var(--sci-neon)}
.action-icon:hover{transform: translateY(-2px); filter: brightness(1.06);
  box-shadow:0 14px 28px rgba(0,0,0,.38), 0 0 0 1px rgba(57,195,255,.12) inset, 0 0 24px rgba(37,211,102,.22)}
.action-icon:active{transform: translateY(0)}
.action-icon[aria-label*="حساب" ] i{color:#39c3ff}
.action-icon[aria-label*="كلمة" ] i{color:#8b5cf6}
.action-icon#show-packages i{color:#eab308}

/* Screen reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =============================
   Service Cubes (3D showcase)
   ============================= */
.sci-services{position:fixed;inset:0;z-index:-1;pointer-events:none;contain:layout paint;perspective:1200px;overflow:visible}
.sci-services .cube{position:absolute;width:84px;height:84px;transform-style:preserve-3d;will-change:transform;opacity:.95}
.sci-services .cube .face{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,17,24,.85),rgba(7,17,24,.75));border:1px solid rgba(149,230,255,.16);display:flex;align-items:center;justify-content:center;border-radius:10px;backdrop-filter:blur(2px)}
.sci-services .cube .face i{font-size:26px;color:var(--sci-neon)}
.sci-services .cube .face .label{position:absolute;bottom:6px;font-size:11px;color:#d9fbff;letter-spacing:.3px;text-shadow:0 0 8px rgba(57,195,255,.6)}
.sci-services .cube .edge{position:absolute;inset:-1px;border-radius:12px;pointer-events:none;box-shadow:0 0 18px rgba(37,211,102,.18) inset}

/* 3D faces (translate half-size) */
.sci-services .cube .front{transform:translateZ(42px)}
.sci-services .cube .back{transform:rotateY(180deg) translateZ(42px)}
.sci-services .cube .right{transform:rotateY(90deg) translateZ(42px)}
.sci-services .cube .left{transform:rotateY(-90deg) translateZ(42px)}
.sci-services .cube .top{transform:rotateX(90deg) translateZ(42px)}
.sci-services .cube .bottom{transform:rotateX(-90deg) translateZ(42px)}

/* color accents per type */
.sci-services .cube[data-type="api"] .face i{color:#39c3ff}
.sci-services .cube[data-type="ai"] .face i{color:#8b5cf6}
.sci-services .cube[data-type="schedule"] .face i{color:#25d366}
.sci-services .cube[data-type="groups"] .face i{color:#22d3ee}
.sci-services .cube[data-type="auto_groups"] .face i{color:#22d3ee}
.sci-services .cube[data-type="webhook"] .face i{color:#f97316}
.sci-services .cube[data-type="analytics"] .face i{color:#eab308}
.sci-services .cube[data-type="security"] .face i{color:#22c55e}
.sci-services .cube[data-type="automation"] .face i{color:#fb7185}

@media (max-width: 720px){
  .sci-services .cube{width:68px;height:68px}
  .sci-services .cube .front{transform:translateZ(34px)}
  .sci-services .cube .back{transform:rotateY(180deg) translateZ(34px)}
  .sci-services .cube .right{transform:rotateY(90deg) translateZ(34px)}
  .sci-services .cube .left{transform:rotateY(-90deg) translateZ(34px)}
  .sci-services .cube .top{transform:rotateX(90deg) translateZ(34px)}
  .sci-services .cube .bottom{transform:rotateX(-90deg) translateZ(34px)}
}

/* Responsive refinements */
@media (min-width: 900px){
  .brand-header{transform: translateY(-4px)}
  .sci-card{padding-top: 18px}
}

/* =============================
   Hologram Service Panels
   ============================= */
.sci-panels{position:fixed;inset:0;z-index:-1;pointer-events:none}
.sci-panels .panel{position:absolute;min-width:260px;max-width:320px;padding:12px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(5,14,20,.6),rgba(5,14,20,.45));border:1px solid rgba(149,230,255,.18);box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px rgba(37,211,102,.08) inset; color:#dffaff;backdrop-filter: blur(8px) saturate(140%);transform:translateZ(0);opacity:0;animation:intro .9s ease-out forwards, floaty 6s ease-in-out infinite}
.sci-panels .panel.holo{position:absolute;overflow:hidden}
.sci-panels .panel.holo:before{content:"";position:absolute;inset:0;border-radius:inherit;background:conic-gradient(from 0deg, rgba(37,211,102,.0), rgba(37,211,102,.35), rgba(57,195,255,.35), rgba(139,92,246,.35), rgba(37,211,102,.0));filter:blur(22px);opacity:.35;animation:holo-sweep 8s linear infinite}
.sci-panels .panel.holo:after{content:"";position:absolute;inset:1px;border-radius:12px;pointer-events:none;background:linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,0) 35%);mask-image:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.05));transform:translateY(-60%);animation:holo-glint 5.4s ease-in-out infinite}

@keyframes holo-sweep{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes holo-glint{0%{transform:translateY(-80%)}50%{transform:translateY(0%)}100%{transform:translateY(120%)}}
.sci-panels .panel .title{font-weight:900;letter-spacing:.4px;margin-bottom:6px;color:#b7f7ff;text-shadow:0 0 16px rgba(57,195,255,.4)}
.sci-panels .panel .desc{font-size:13px;color:#cfeefe;opacity:.9}
.sci-panels .panel .chips{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.sci-panels .panel .chip{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid rgba(120,220,255,.24);background:rgba(8,28,40,.5);color:#d9fbff}
.sci-panels .panel .icon{position:absolute;inset:auto 10px 10px auto;font-size:36px;color:var(--sci-neon);text-shadow:0 0 16px rgba(37,211,102,.45)}
.sci-panels .panel[data-type="ai"] .icon{color:#8b5cf6}
.sci-panels .panel[data-type="api"] .icon{color:#39c3ff}
.sci-panels .panel[data-type="analytics"] .icon{color:#eab308}
.sci-panels .panel[data-type="groups"] .icon{color:#22d3ee}
.sci-panels .panel[data-type="schedule"] .icon{color:#25d366}
.sci-panels .panel[data-type="webhook"] .icon{color:#f97316}

@keyframes floaty{0%{transform:translateZ(0) translateY(0)}50%{transform:translateZ(0) translateY(-10px)}100%{transform:translateZ(0) translateY(0)}}
@keyframes intro{from{opacity:0}to{opacity:1}}

@media (max-width: 820px){
  .sci-panels .panel{min-width:220px;max-width:260px}
}

/* Connective lines canvas */
.sci-links{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .wa-floating, 
  .sci-panels .panel, 
  .sci-panels .panel.holo:before, 
  .sci-panels .panel.holo:after, 
  .sci-links,
  .sci-services .cube {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Login Announcements */
.login-announcements {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 20px;
  position: relative;
  z-index: 10;
}
.announcement-slider {
  position: relative;
  min-height: 80px;
  background: rgba(7, 17, 24, 0.85);
  border: 1px solid rgba(149, 230, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
}
.announcement-slide {
  position: absolute;
  inset: 0;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.announcement-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative; /* Allow height to adapt if needed, though absolute is better for cross-fading. For simple text, relative on active works if we hide others. But for smooth crossfade, absolute is best. Let's stick to absolute and fixed min-height or JS height calc. For simplicity, we'll use absolute and let container have min-height. */
}
/* Override for smooth height transition if needed, but fixed min-height is safer for layout stability */
.announcement-slide.active {
  position: relative; 
}
.announcement-slide:not(.active) {
  position: absolute;
  top: 0; left: 0; right: 0;
}

.ann-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.ann-content {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: #e6f6ff;
}
.ann-content strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: #fff;
}
/* Styles */
.announcement-slide.info .ann-icon { color: #39c3ff; background: rgba(57, 195, 255, 0.1); }
.announcement-slide.success .ann-icon { color: #25d366; background: rgba(37, 211, 102, 0.1); }
.announcement-slide.warning .ann-icon { color: #eab308; background: rgba(234, 179, 8, 0.1); }
.announcement-slide.danger .ann-icon { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

/* Marquee / Ticker Styles */
.announcement-marquee-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: rgba(7, 17, 24, 0.85);
  border: 1px solid rgba(149, 230, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  height: auto;
  direction: rtl;
  margin-bottom: 20px;
}

.ann-fixed-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border-left: none;
  border-bottom: 1px solid rgba(149, 230, 255, 0.1);
  z-index: 2;
  font-weight: 700;
  color: #fff;
}

.ann-marquee-wrapper {
  position: relative;
  height: 40px;
  width: 100%;
  overflow: hidden;
}

.ann-marquee-content {
  position: absolute;
  top: 50%;
  white-space: nowrap;
  will-change: transform, left;
  animation: marquee-lr 20s linear infinite;
  color: #e6f6ff;
  font-size: 13px;
  font-weight: 500;
  transform: translate3d(0, -50%, 0);
}

@keyframes marquee-lr {
  0% {
    left: 0;
    transform: translate3d(-100%, -50%, 0);
  }
  100% {
    left: 100%;
    transform: translate3d(0, -50%, 0);
  }
}

.announcement-marquee-container.info .ann-fixed-title { border-bottom-color: rgba(57, 195, 255, 0.3); }
.announcement-marquee-container.success .ann-fixed-title { border-bottom-color: rgba(37, 211, 102, 0.3); }
.announcement-marquee-container.warning .ann-fixed-title { border-bottom-color: rgba(234, 179, 8, 0.3); }
.announcement-marquee-container.danger .ann-fixed-title { border-bottom-color: rgba(239, 68, 68, 0.3); }

.announcement-marquee-container.info .ann-icon { color: #39c3ff; }
.announcement-marquee-container.success .ann-icon { color: #25d366; }
.announcement-marquee-container.warning .ann-icon { color: #eab308; }
.announcement-marquee-container.danger .ann-icon { color: #ef4444; }


/* Logo & Brand adjustments for Sci-Fi Theme */
.brand-header {
  gap: 0;
  margin-top: 0; /* Remove top margin */
}
.brand-header .brand-logo {
  width: 240px;
  height: auto;
  filter: drop-shadow(0 0 25px rgba(57,195,255,.6));
  margin-bottom: -35px; /* Pull text closer */
}
.brand-header .brand-wordmark {
  font-size: 32px;
  margin-top: 10px;
  text-shadow: 0 0 10px rgba(37,211,102,.3);
}
.brand-header .brand-wordmark .wm-left {
  color: var(--sci-cyan);
}
.brand-header .brand-wordmark .wm-right {
  color: var(--sci-neon);
}
.brand-header .brand-tagline {
  color: var(--sci-muted);
  font-size: 15px;
  letter-spacing: 0.5px;
}