/* ============================================================
   MegaStation — Landing redesign theme + Dark mode
   Loaded after main.css. Scoped to keep layout, restyle look.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

:root{
  --ms-navy:#0D1B2A;
  --ms-navy-2:#12263B;
  --ms-teal:#12B48A;
  --ms-teal-2:#17C79A;
  --ms-teal-deep:#0B7D60;
  --ms-ink:#0D1B2A;
  --ms-soft:#5b6b78;
  --ms-bg:#ffffff;
  --ms-card:#ffffff;
  --ms-border:#e9eef2;
  --ms-shadow:0 12px 30px rgba(13,27,42,.08);
  --ms-shadow-hover:0 20px 46px rgba(13,27,42,.14);
}

/* ---------- Typography ---------- */
body, .landing-page, h1,h2,h3,h4,h5,h6,.title,.menu a,.cmn--btn,p,span,a,button,input,select,textarea{
  font-family:'Cairo','Segoe UI',Tahoma,sans-serif !important;
}
body{ color:var(--ms-ink); background:var(--ms-bg); }

/* ---------- Header / navbar ---------- */
header .navbar-bottom{ backdrop-filter:saturate(1.1) blur(6px); }
.navbar-bottom-wrapper{ padding-block:10px; }
header .logo img{ max-height:56px; width:auto; transition:.3s; }
.menu a span{ font-weight:700; }
.menu a.active span, .menu a:hover span{ color:var(--ms-teal-deep) !important; }

/* ---------- Buttons ---------- */
.cmn--btn, .btn--base, a.cmn--btn{
  background:linear-gradient(135deg,var(--ms-teal-2),var(--ms-teal-deep)) !important;
  border:0 !important; border-radius:40px !important;
  box-shadow:0 8px 20px rgba(18,180,138,.28); font-weight:800 !important;
  transition:.25s;
}
.cmn--btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(18,180,138,.4); filter:brightness(1.05); }

/* ---------- Hero / banner ---------- */
.banner-section{
  position:relative; overflow:hidden;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(23,199,154,.16), transparent 60%),
    linear-gradient(180deg,#f4fbf9 0%, #ffffff 62%);
  padding-top:120px;
}
.banner-section .banner-content{ position:relative; z-index:2; }
.banner-section .banner-content img,
.banner-section .banner-content img.w-100{
  width:auto !important; max-width:440px; height:auto; max-height:150px;
  display:block; margin:10px auto 6px;
  filter:drop-shadow(0 16px 34px rgba(13,27,42,.18));
}
@media (max-width:576px){
  .banner-section .banner-content img,
  .banner-section .banner-content img.w-100{ max-width:82%; }
}

/* إخفاء قسم Earn Money */
.earn-money-section{ display:none !important; }
.banner-section .title{
  font-weight:900 !important; letter-spacing:.3px;
  background:linear-gradient(120deg,var(--ms-navy),var(--ms-teal-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.banner-section .text{ color:var(--ms-soft); font-size:1.05rem; max-width:640px; margin-inline:auto; }
.banner-section::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:120px;
  background:linear-gradient(180deg,transparent,var(--ms-bg));
}

/* ---------- Section headers ---------- */
.section-header .title, .ecommerce-venture-section .title{ font-weight:800 !important; color:var(--ms-navy); }
.section-header .title::after{
  content:""; display:block; width:64px; height:4px; border-radius:4px; margin:14px auto 0;
  background:linear-gradient(90deg,var(--ms-teal-2),var(--ms-teal-deep));
}

/* ---------- Generic cards / boxes ---------- */
.single-box, .feature-card, .card, .venture-card, .nav--tabs .item, .app-download-content{
  border-radius:18px !important;
}
.single-box:hover, .feature-card:hover{ transform:translateY(-4px); box-shadow:var(--ms-shadow-hover); }

/* module tabs pills */
.nav--tabs .item{ transition:.25s; }
.nav--tabs .item:hover{ transform:translateY(-3px); }

/* ---------- Footer ---------- */
footer{ background:linear-gradient(180deg,#0d1b2a,#0a1622) !important; color:#c7d2da; }
footer a, footer p, footer span, footer li{ color:#aeb9c4 !important; }
footer a:hover{ color:var(--ms-teal-2) !important; }
.footer-logo img{ max-height:64px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.4)); }

/* ---------- Dark-mode toggle button ---------- */
#ms-theme-toggle{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--ms-border);
  background:#fff; color:var(--ms-navy); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; margin-inline-start:8px; transition:.25s; box-shadow:0 4px 12px rgba(13,27,42,.1);
}
#ms-theme-toggle:hover{ transform:translateY(-2px); color:var(--ms-teal-deep); }
#ms-theme-toggle svg{ width:20px; height:20px; }

/* ============================================================
   DARK MODE  (body.ms-dark)
   ============================================================ */
body.ms-dark{
  --ms-bg:#0A1622; --ms-card:#0F1E2E; --ms-border:#1c2f42; --ms-ink:#E6EDF3; --ms-soft:#93A1AD;
  background:#0A1622; color:#E6EDF3;
}
body.ms-dark header .navbar-bottom, body.ms-dark .navbar-bottom{ background:#0c1a29 !important; border-bottom:1px solid #16293c; }
body.ms-dark .menu a span{ color:#cdd8e2 !important; }
body.ms-dark .menu a.active span, body.ms-dark .menu a:hover span{ color:var(--ms-teal-2) !important; }
body.ms-dark .banner-section{
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(23,199,154,.20), transparent 60%),
    linear-gradient(180deg,#0b1826 0%, #0A1622 70%);
}
body.ms-dark .banner-section .title{
  background:linear-gradient(120deg,#ffffff,#5fe6c2);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
body.ms-dark .banner-section .text{ color:#aab6c1; }
body.ms-dark .banner-section::after{ background:linear-gradient(180deg,transparent,#0A1622); }
body.ms-dark section{ background-color:transparent !important; }
body.ms-dark .section-header .title, body.ms-dark .title, body.ms-dark h1, body.ms-dark h2, body.ms-dark h3, body.ms-dark h4, body.ms-dark h5{ color:#E6EDF3 !important; }
body.ms-dark p, body.ms-dark .text, body.ms-dark li, body.ms-dark span{ color:#aab6c1; }
body.ms-dark .single-box, body.ms-dark .card, body.ms-dark .feature-card, body.ms-dark .venture-card,
body.ms-dark .nav--tabs .item, body.ms-dark .app-download-content, body.ms-dark .bg-white, body.ms-dark .bg-light{
  background:#0F1E2E !important; border-color:#1c2f42 !important; color:#E6EDF3 !important;
}
body.ms-dark .form-control, body.ms-dark input, body.ms-dark select, body.ms-dark textarea{
  background:#0c1a29 !important; border-color:#22384e !important; color:#E6EDF3 !important;
}
body.ms-dark #ms-theme-toggle{ background:#0f1e2e; color:#ffd66b; border-color:#22384e; }
body.ms-dark #landing-loader{ background:#0A1622; }
body.ms-dark .dropdown-list{ background:#0f1e2e !important; border:1px solid #1c2f42; }
body.ms-dark .dropdown-list a{ color:#cdd8e2 !important; }
body.ms-dark footer{ background:linear-gradient(180deg,#08111c,#060d16) !important; }

/* smooth theme transition */
body, header .navbar-bottom, section, .single-box, .card, footer{ transition:background-color .3s ease, color .3s ease, border-color .3s ease; }

/* ---------- Footer (professional dark, brand) ---------- */
footer .footer-bottom{ background:linear-gradient(180deg,#0D1B2A 0%,#0A1622 100%) !important; color:#c3ced8; }
footer .footer-bottom .footer-logo img{ max-height:60px; width:auto; filter:drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
footer .footer-bottom .txt{ color:#9fb0bd !important; }
footer .footer-bottom .widget-links h5, footer .footer-bottom .subtitle, footer .footer-bottom .subtitle.text-white{ color:#ffffff !important; font-weight:800; }
footer .footer-bottom .widget-links ul li a{ color:#b9c6d1 !important; transition:.2s; }
footer .footer-bottom .widget-links ul li a:hover{ color:var(--ms-teal-2) !important; }
footer .footer-bottom .widget-links ul li a svg path{ fill:var(--ms-teal-2) !important; }
footer .footer-bottom .copyright{ color:#8fa0ad !important; border-top:1px solid #1c2f42; margin-top:22px !important; padding-top:16px; }
footer .footer-bottom .social-icon a{ opacity:.85; transition:.2s; display:inline-flex; }
footer .footer-bottom .social-icon a:hover{ opacity:1; transform:translateY(-2px); }
footer .footer-bottom .app-btn-grp a img{ border-radius:8px; }
body.ms-dark footer .footer-bottom{ background:linear-gradient(180deg,#0A1622 0%,#060d16 100%) !important; }

/* ---------- Footer redesign polish ---------- */
footer .footer-bottom{ position:relative; padding-top:58px; padding-bottom:24px; border-radius:30px 30px 0 0; overflow:hidden; }
footer .footer-bottom::before{ content:""; position:absolute; top:0; left:10%; right:10%; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--ms-teal-2),var(--ms-teal-deep),transparent); }
footer .footer-bottom::after{ content:""; position:absolute; top:-120px; inset-inline-start:-80px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(23,199,154,.12), transparent 70%); pointer-events:none; }
footer .footer-bottom .footer-widget{ position:relative; z-index:1; }
footer .footer-bottom .footer-logo img{ max-height:66px; }
footer .footer-bottom .txt{ line-height:1.9; max-width:380px; margin-top:12px; }
footer .footer-bottom .widget-links h5{ position:relative; padding-bottom:12px; margin-bottom:16px; letter-spacing:.3px; }
footer .footer-bottom .widget-links h5::after{ content:""; position:absolute; bottom:0; inset-inline-start:0; width:36px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--ms-teal-2),var(--ms-teal-deep)); }
footer .footer-bottom .widget-links ul li{ margin-bottom:10px; }
footer .footer-bottom .widget-links ul li a{ display:inline-flex; align-items:center; gap:8px; }
footer .footer-bottom .app-btn-grp{ display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; }
footer .footer-bottom .app-btn-grp a img{ height:52px; width:auto; transition:.25s; border-radius:10px; }
footer .footer-bottom .app-btn-grp a:hover img{ transform:translateY(-3px); filter:brightness(1.06); }
footer .footer-bottom .social-icon{ display:flex; gap:10px; margin-top:16px; }
footer .footer-bottom .social-icon a{ width:38px; height:38px; border-radius:50%; background:#12263B; border:1px solid #1c2f42;
  align-items:center; justify-content:center; opacity:1; }
footer .footer-bottom .social-icon a:hover{ background:var(--ms-teal-deep); border-color:var(--ms-teal-deep); }
footer .footer-bottom .copyright{ margin-top:30px !important; }