@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Montserrat:wght@500;600;700&display=swap');

/* SHATTA FANS — SKY LUXE (sky blue + gold + purple).
   Scoped to body.sky so dark functional pages (dashboard/lounge) stay untouched. */

body.sky {
  --bg: #e9f6ef; --bg2: #ffffff; --bg3: #eef9f3;
  --gold: #caa028; --gold2: #e8c84b; --purple: #0b6e4f;
  --border: #cfe7dd; --border2: #bfe0d2;
  --text: #16335c; --text2: #46618a; --text3: #7a90b0;
  background:
    radial-gradient(950px 520px at 50% -8%, rgba(11,110,79,0.18), transparent 60%),
    radial-gradient(700px 420px at 88% 6%, rgba(232,200,75,0.12), transparent 55%),
    linear-gradient(170deg, #e7f5ee 0%, #eef9f3 42%, #f3f9f0 100%);
  background-attachment: fixed;
  color:var(--ink);
}
body.sky .donation-top-banner { background: linear-gradient(90deg,#e9f6ef,#eef9f3 50%,#fbf3d6); border-bottom: 1px solid #cfe7dd; }
body.sky .donation-top-inner p { color: #2a3f66; }

/* ===== FUTURISTIC 2030 NAVBAR ===== */
body.sky .navbar {
  background: linear-gradient(180deg, rgba(245,250,255,0.82), rgba(232,242,255,0.70));
  border-bottom: 1px solid rgba(11,110,79,0.18);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  box-shadow: 0 8px 34px rgba(8,66,50,0.14);
  position: sticky; top: 0;
}
body.sky .navbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: linear-gradient(90deg, transparent, #0b6e4f 18%, #0e8a5f 50%, #e8c84b 82%, transparent);
  opacity: 0.75; box-shadow: 0 0 16px rgba(11,110,79,0.55);
}
body.sky .nav-container { height: 74px; }

/* Logo emblem chip — dark frame so the shield's black background blends in,
   with a slow rotating gradient halo. */
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; flex: none; position: relative; padding: 3px;
  background: radial-gradient(circle at 30% 25%, #1c1933, #0a0a12);
  border: 1px solid rgba(232,200,75,0.55);
  box-shadow: 0 6px 18px rgba(20,20,50,0.35), inset 0 0 12px rgba(232,200,75,0.12);
}
.brand-logo::before {
  content: ''; position: absolute; inset: -3px; border-radius: 16px; z-index: -1;
  background: conic-gradient(from 0deg, #e8c84b, #0b6e4f, #0e8a5f, #34d399, #e8c84b);
  filter: blur(7px); opacity: 0.5; animation: brandSpin 8s linear infinite;
}
@keyframes brandSpin { to { transform: rotate(360deg); } }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; display: block; }

/* Neon-gradient wordmark */
body.sky .nav-brand { color:var(--ink); gap: 12px; }
body.sky .brand-fans {
  font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: 3px; font-size: 15px; line-height: 1.05;
  background: linear-gradient(100deg, #16335c, #075e43 55%, #a9851d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Nav links with animated underline */
body.sky .nav-link { color: #46618a; position: relative; font-weight: 600; }
body.sky .nav-link::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #0b6e4f, #0e8a5f);
  transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease;
}
body.sky .nav-link:hover { color:var(--ink); background: rgba(11,110,79,0.08); }
body.sky .nav-link:hover::after { transform: scaleX(1); }
body.sky .nav-link.gold { color: #a9851d; }
body.sky .nav-link.gold:hover { color: #a9851d; background: rgba(232,200,75,0.12); }
body.sky .nav-link.gold:hover::after { background: linear-gradient(90deg, #e8c84b, #caa028); }
body.sky .nav-toggle span { background: #075e43; }

/* Join Now — glowing pill */
body.sky .navbar .btn-gold { box-shadow: 0 0 0 1px rgba(232,200,75,0.5), 0 6px 22px rgba(200,160,40,0.48); }
body.sky .lang-btn { background: rgba(11,110,79,0.1); border-color: rgba(11,110,79,0.32); color:var(--em-link); }
body.sky .lang-btn:hover { background: rgba(11,110,79,0.18); }

body.sky .hero { background: transparent; min-height: auto; padding-top: 8px; }
body.sky .hero::before { display: none; }
body.sky .hero-overlay { display: none; }
body.sky .hero-title { color:var(--ink); font-family: 'Inter',sans-serif; letter-spacing: -1.5px; }
body.sky .hero-title .gold { background: linear-gradient(135deg,#caa028,#e8c84b); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.sky .hero-slogan { color: #3a5680; }
body.sky .hero-sub { color: #5a73a0; }
body.sky .hero-badge { background: rgba(11,110,79,0.12); border-color: rgba(11,110,79,0.35); color:var(--em-link); }
body.sky .hero-donation-cta { background: rgba(255,255,255,0.85); border-color: rgba(11,110,79,0.25); }
body.sky .hero-donation-copy { color: #2a3f66; }

body.sky .gold { color: #a9851d; }
body.sky .section-title { color:var(--ink); font-family: 'Inter',sans-serif; }
body.sky .section-title .gold { background: linear-gradient(135deg,#caa028,#e8c84b); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.sky .section-sub { color: #5a73a0; }
body.sky .section-dark { background: rgba(255,255,255,0.55); }

body.sky .stats-bar { background: rgba(255,255,255,0.65); border-color: #cfe7dd; }
body.sky .stat-number { background: linear-gradient(135deg,#0b6e4f,#0e8a5f); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.sky .stat-label { color: #5a73a0; }
body.sky .stat-divider { background: #cfe7dd; }

body.sky .btn-gold { background: linear-gradient(135deg,#f5e07a,#e8c84b 45%,#caa028) !important; color: #1a1200 !important; box-shadow: 0 8px 22px rgba(200,160,40,0.32); border-radius: 999px; }
body.sky .btn-gold:hover { box-shadow: 0 10px 28px rgba(200,160,40,0.5); transform: translateY(-1px); color:#1a1200 !important; }
body.sky .btn-outline { border: 1px solid #0b6e4f; color:var(--em-link); border-radius: 999px; }
body.sky .btn-outline:hover { background: rgba(11,110,79,0.1); color: #4a2fb0; border-color:#0b6e4f; }
body.sky .btn { border-radius: 999px; }

body.sky .ann-card, body.sky .ann-item, body.sky .fb-card, body.sky .country-card, body.sky .dir-card,
body.sky .form-block, body.sky .perk-item, body.sky .step-content, body.sky .onegh-card, body.sky .onegh-step,
body.sky .onegh-note, body.sky .card-cta, body.sky .add-fanbase-cta, body.sky .legal-card, body.sky .recent-fan-card {
  background: #ffffff; border-color: #cfe7dd; box-shadow: 0 6px 20px rgba(8,66,50,0.08); color:var(--ink);
}
body.sky .ann-title, body.sky .fb-card-name, body.sky .country-name, body.sky .dir-name, body.sky .perk-text strong, body.sky .step-content h3, body.sky .rfc-name { color:var(--ink); }
body.sky .ann-body, body.sky .fb-card-location, body.sky .perk-text span, body.sky .step-content p, body.sky .rfc-location { color: #5a73a0; }
body.sky .country-card:hover, body.sky .dir-card:hover { border-color: #0b6e4f; }
body.sky .ann-cat, body.sky .ann-category, body.sky .form-badge, body.sky .onegh-badge, body.sky .continent-title, body.sky .continent-heading { color: #a9851d; background: rgba(232,200,75,0.12); border-color: rgba(232,200,75,0.3); }
body.sky .continent-title, body.sky .continent-heading { background: none; }

body.sky .form-header h1, body.sky .form-block-title { color:var(--ink); }
body.sky .form-group label, body.sky .form-header p { color: #46618a; }
body.sky .form-control, body.sky .onegh-proof-form input { background: #fff; border: 1px solid #cfe7dd; color:var(--ink); border-radius: 12px; padding: 13px 15px; font-size: 15px; }
body.sky .form-control:focus, body.sky .onegh-proof-form input:focus { outline: none; border-color: #0b6e4f; box-shadow: 0 0 0 3px rgba(11,110,79,0.18); }
body.sky .onegh-proof-form label { color:var(--ink); }

body.sky .footer { background: linear-gradient(180deg,#eef9f3,#dcefe3); border-top: 1px solid #cfe7dd; }
body.sky .footer-logo { color:var(--ink); }
body.sky .footer-slogan, body.sky .footer-sub, body.sky .footer-link-group a, body.sky .footer-social a, body.sky .footer-location, body.sky .footer-bottom, body.sky .footer-bottom a { color: #46618a; }
body.sky .footer-link-group h4, body.sky .footer-contact h4 { color:var(--ink); }
body.sky .footer-link-group a:hover, body.sky .footer-social a:hover, body.sky .footer-bottom a:hover { color:var(--em-link); }
body.sky .footer-bottom { border-top: 1px solid #cfe7dd; }

/* ===== 3D PHOTO BANNER (your pictures rotating) ===== */
.sky-stage { height: 250px; perspective: 1100px; position: relative; margin: 6px auto 8px; max-width: 540px; }
.sky-ring { position: absolute; left: 50%; top: 50%; width: 154px; height: 206px; margin: -103px 0 0 -77px; transform-style: preserve-3d; animation: skySpin 26s linear infinite; }
.sky-ring:hover { animation-play-state: paused; }
@keyframes skySpin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.sky-card { position: absolute; width: 154px; height: 206px; border-radius: 16px; overflow: hidden; border: 3px solid #ffffff; box-shadow: 0 20px 44px rgba(8,66,50,0.32); background-size: cover; background-position: center 18%; background-repeat: no-repeat; background-color: #0b6e4f; image-rendering: auto; }
.sky-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20,30,80,0.35)); }
.sky-cap { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; color: #fff; font: 800 11px 'Inter',sans-serif; letter-spacing: 1px; z-index: 2; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
@media (max-width: 768px) { body.sky { background-attachment: scroll; } .sky-stage { max-width: 100%; } }