/* SLMMmedia Hosting Panel — Provider Blue Theme (no external assets) */

:root{
  --slmm-blue:#1b74e4;
  --slmm-blue-2:#2aa7ff;
  --slmm-cyan:#28c4d8;
  --slmm-ink:#0b1220;
  --slmm-muted:#5c667a;
  --slmm-bg:#f3f8ff;
  --slmm-surface:#ffffff;
  --slmm-border:rgba(15, 23, 42, .10);
  --slmm-shadow: 0 14px 40px rgba(11,18,32,.10);
  --slmm-shadow-sm: 0 8px 22px rgba(11,18,32,.08);
  --slmm-radius: 16px;
  --slmm-radius-sm: 12px;
}

html{ scroll-behavior:smooth; }
body{
  color: var(--slmm-ink);
  background: linear-gradient(180deg, var(--slmm-bg) 0%, #ffffff 55%, #ffffff 100%);
}

a{ text-decoration:none; }
.text-muted{ color: var(--slmm-muted)!important; }
h1,h2,h3,h4{ letter-spacing:-0.02em; }
.lead{ color: var(--slmm-muted); }

/* Topbar (like classic providers) */
.topbar{
  font-size:.92rem;
  background:#fff;
  border-bottom:1px solid var(--slmm-border);
}
.topbar a{
  color: rgba(11,18,32,.78);
  font-weight:600;
}
.topbar a:hover{ color: rgba(11,18,32,.95); }

/* Navbar */
.navbar{
  background:#fff;
  border-bottom:1px solid var(--slmm-border);
}
.navbar .navbar-brand{
  font-weight: 900;
  letter-spacing:.1px;
}
.navbar .nav-link{
  color: rgba(11,18,32,.82) !important;
  font-weight:800;
  padding:.55rem .85rem;
  border-radius: 999px;
}
.navbar .nav-link:hover{
  background: rgba(27,116,228,.08);
}

.btn{
  border-radius: 999px;
  font-weight:900;
}
.btn-primary{
  border:none;
  background: linear-gradient(135deg, var(--slmm-blue), var(--slmm-blue-2));
  box-shadow: 0 14px 30px rgba(27,116,228,.22);
}
.btn-primary:hover{ filter: brightness(.98); transform: translateY(-1px); }
.btn-outline-primary{
  border-color: rgba(27,116,228,.45);
  color: var(--slmm-blue);
}
.btn-outline-primary:hover{
  background: rgba(27,116,228,.08);
  border-color: rgba(27,116,228,.55);
  color: var(--slmm-blue);
}

/* Cards */
.card{
  border:1px solid var(--slmm-border);
  border-radius: var(--slmm-radius);
  box-shadow: var(--slmm-shadow-sm);
}
.card.hoverlift{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card.hoverlift:hover{
  transform: translateY(-4px);
  box-shadow: var(--slmm-shadow);
  border-color: rgba(27,116,228,.18);
}

/* Hero banner (reference-direction: image + blue gradient + big headline) */
.hero-wrap{ padding: 2.25rem 0 1.25rem 0; }
.hero-banner{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(27,116,228,.18);
  background:
    linear-gradient(90deg, rgba(27,116,228,.92) 0%, rgba(42,167,255,.92) 55%, rgba(40,196,216,.90) 100%);
  box-shadow: var(--slmm-shadow);
  position:relative;
}
.hero-banner:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 420px at 15% 25%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(700px 380px at 75% 20%, rgba(255,255,255,.16), transparent 60%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; }
.hero-title{
  font-size: clamp(2.1rem, 3.8vw, 3.1rem);
  font-weight: 950;
  color:#fff;
}
.hero-sub{
  color: rgba(255,255,255,.92);
  font-size: 1.1rem;
}
.hero-people{
  max-width: 520px;
  width:100%;
  height:auto;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.18));
}

/* Domain check bar (classic provider element) */
.domainbar{
  background:#fff;
  border:1px solid var(--slmm-border);
  border-radius: 14px;
  box-shadow: var(--slmm-shadow-sm);
}
.domainbar label{ font-weight:900; color: rgba(11,18,32,.92); }
.domainbar .form-control{
  border-radius: 12px;
}
.domainbar .btn{
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

/* Product tiles */
.tile-img{
  width: 86px;
  height: 86px;
  border-radius: 18px;
  background: rgba(27,116,228,.08);
  border:1px solid rgba(27,116,228,.14);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tile-img img{ width: 56px; height:56px; }

.kicker{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:800;
  font-size:.9rem;
}

/* Section helpers */
.section{ padding: 2.25rem 0; }
.section-title{ font-weight: 950; }

/* Pricing highlight */
.price{
  font-size: 2.2rem;
  font-weight: 950;
  letter-spacing:-.02em;
}
.per{ color: var(--slmm-muted); font-weight:800; }

/* Portal/Admin shell */
.shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 1.25rem;
}
.sidebar{
  position: sticky;
  top: 110px;
  align-self:start;
}
.sidenav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.6rem .8rem;
  border-radius: 14px;
  color: rgba(11,18,32,.84);
  font-weight:900;
}
.sidenav a:hover{ background: rgba(27,116,228,.08); }
.sidenav a.active{
  background: rgba(27,116,228,.12);
  border: 1px solid rgba(27,116,228,.18);
}

/* Motion */
.reveal{ opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn{ transition:none; }
}

/* Footer */
.footer{
  border-top:1px solid var(--slmm-border);
  background:#fff;
}
.footer a{ color: rgba(11,18,32,.72); }
.footer a:hover{ color: rgba(11,18,32,.95); }


/* --- Navbar action buttons (DE/EN etc.) readable on white navbar --- */
.navbar{
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}
.navbar .btn-outline-light{
  color: rgba(11,18,32,.86);
  border-color: rgba(27,116,228,.35);
  background: rgba(27,116,228,.04);
}
.navbar .btn-outline-light:hover,
.navbar .btn-outline-light:focus{
  color: rgba(11,18,32,.95);
  border-color: rgba(27,116,228,.55);
  background: rgba(27,116,228,.10);
}

/* Optional: subtle separator glow under navbar */
.navbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:3px;
  background: linear-gradient(90deg, rgba(27,116,228,.0), rgba(27,116,228,.18), rgba(40,196,216,.16), rgba(27,116,228,.0));
  pointer-events:none;
}
.navbar{ position:relative; }