/* Header-only fix: tidak mengubah layout homepage section */
.site-header-premium{
  position:sticky;
  top:0;
  z-index:1000;
}

.premium-inner{
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  justify-content:space-between!important;
  flex-wrap:nowrap!important;
  min-height:74px;
}

.brand-premium{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  width:196px!important;
  max-width:196px!important;
  min-width:196px!important;
  overflow:visible!important;
}

.brand-premium img{
  display:block!important;
  width:auto!important;
  max-width:184px!important;
  height:48px!important;
  object-fit:contain!important;
}

.nav-premium{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  flex:1 1 auto!important;
  min-width:0!important;
  flex-wrap:nowrap!important;
}

.nav-premium > a,
.ms-dropdown > button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:40px;
  padding:9px 11px!important;
  border:0!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#201a4f!important;
  font-size:.91rem!important;
  font-weight:850!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  cursor:pointer;
  font-family:inherit;
}

.nav-premium > a:hover,
.ms-dropdown:hover > button,
.ms-dropdown:focus-within > button{
  background:#fff5ed!important;
  color:#ff6b35!important;
}

.ms-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.ms-dropdown-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:225px;
  padding:10px;
  border-radius:16px;
  background:#fff;
  border:1px solid #eceaf5;
  box-shadow:0 22px 55px rgba(15,23,42,.13);
  display:none;
}

.ms-dropdown:hover .ms-dropdown-menu,
.ms-dropdown:focus-within .ms-dropdown-menu{
  display:block;
}

.ms-dropdown-menu a{
  display:block!important;
  padding:10px 12px!important;
  border-radius:10px!important;
  color:#342d63!important;
  text-decoration:none!important;
  font-size:.9rem!important;
  font-weight:780!important;
  white-space:nowrap!important;
}

.ms-dropdown-menu a:hover{
  background:#f7f2ff!important;
  color:#7b61ff!important;
}

.header-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
}

.header-auth{
  padding:10px 15px!important;
  border-radius:12px!important;
  font-weight:850!important;
}

.ms-menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid #eceaf5;
  background:#fff;
  color:#241d55;
  font-size:1.25rem;
  font-weight:900;
}

@media (max-width:1180px){
  .premium-inner{
    flex-wrap:wrap!important;
    min-height:auto;
    padding-top:12px;
    padding-bottom:12px;
  }

  .brand-premium{
    width:184px!important;
    min-width:184px!important;
    max-width:184px!important;
  }

  .brand-premium img{
    height:46px!important;
    max-width:178px!important;
  }

  .ms-menu-toggle{
    display:inline-grid;
    place-items:center;
    margin-left:auto;
  }

  .nav-premium,
  .header-actions{
    display:none!important;
  }

  body.ms-menu-open .nav-premium,
  body.ms-menu-open .header-actions{
    display:flex!important;
    width:100%;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
  }

  body.ms-menu-open .header-actions{
    flex-direction:row!important;
    justify-content:flex-start!important;
  }

  .ms-dropdown{
    display:block;
    width:100%;
  }

  .ms-dropdown > button,
  .nav-premium > a{
    width:100%;
    justify-content:flex-start!important;
  }

  .ms-dropdown-menu{
    position:static;
    display:block;
    min-width:0;
    margin:4px 0 8px 14px;
    box-shadow:none;
    border-radius:12px;
    background:#faf8ff;
  }
}

@media (max-width:640px){
  .brand-premium{
    width:168px!important;
    min-width:168px!important;
    max-width:168px!important;
  }

  .brand-premium img{
    height:42px!important;
    max-width:164px!important;
  }

  body.ms-menu-open .header-actions{
    flex-direction:column!important;
    align-items:stretch!important;
  }
}


/* ==========================================================
   MarkasIM Target Pages Header/Topbar Bright Fix
   Pages:
   - /member/upgrade.php
   - /member/products.php
   - /products.php
   - /surf.php

   Purpose:
   Force old header/topbar/body wrappers to Bright UI without
   changing PHP logic or database.
   ========================================================== */

html,
body {
  min-height: 100% !important;
}

body,
body.theme-marketing,
body.marketing-premium,
body.theme-marketing.marketing-premium {
  background:
    radial-gradient(circle at 8% 10%, rgba(255,122,26,.10), transparent 270px),
    radial-gradient(circle at 92% 8%, rgba(236,26,167,.10), transparent 300px),
    radial-gradient(circle at 50% 100%, rgba(123,53,255,.09), transparent 360px),
    linear-gradient(180deg, #fffaff 0%, #f8fbff 42%, #ffffff 100%) !important;
  background-attachment: fixed !important;
}

/* Neutralize old page wrappers */
body .site-main,
body main,
body .main,
body .page-wrap,
body .page-wrap-premium,
body .container.page-wrap,
body .content,
body .content-wrapper,
body .member-wrapper,
body .member-content,
body .dashboard-wrapper,
body .dashboard-content,
body .admin-wrapper,
body .admin-content {
  background: transparent !important;
}

/* Force header/topbar to Bright UI */
body .site-header,
body header.site-header,
body .site-header-premium,
body .main-header,
body .header,
body .header-area,
body .header-wrap,
body .site-topbar,
body .topbar,
body .top-bar,
body .navbar,
body .navbar-wrap,
body .app-topbar,
body .dashboard-topbar {
  background: rgba(255,255,255,.94) !important;
  background-image: none !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 0 !important;
  border-bottom: 1px solid #edf0f7 !important;
  box-shadow: 0 12px 32px rgba(17,19,60,.06) !important;
  color: #17133f !important;
}

/* Header inner container */
body .site-header .header-inner,
body .site-header .premium-inner,
body .site-header .container,
body .site-header-premium .header-inner,
body .site-header-premium .premium-inner,
body .main-header .container,
body .topbar .container,
body .navbar .container {
  background: transparent !important;
}

/* Brand/logo spacing */
body .site-header .brand,
body .site-header-premium .brand,
body .brand-premium {
  color: #17133f !important;
  text-decoration: none !important;
}

body .site-header .brand img,
body .site-header-premium .brand img,
body .brand-premium img {
  max-height: 48px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Navigation text */
body .site-header a,
body header.site-header a,
body .site-header-premium a,
body .main-header a,
body .header a,
body .topbar a,
body .top-bar a,
body .navbar a,
body .nav a,
body .nav-premium a,
body .nav-app-compact a,
body .nav-home-compact a,
body .ms-dropdown button {
  color: #17133f !important;
  text-decoration: none !important;
}

/* Navigation hover */
body .site-header a:hover,
body .site-header-premium a:hover,
body .nav a:hover,
body .nav-premium a:hover,
body .ms-dropdown button:hover {
  color: #ec1aa7 !important;
}

/* Dropdown button */
body .ms-dropdown button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

/* Dropdown menu */
body .ms-dropdown-menu,
body .site-header .ms-dropdown-menu,
body .site-header-premium .ms-dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #edf0f7 !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 44px rgba(17,19,60,.12) !important;
  overflow: hidden !important;
}

body .ms-dropdown-menu a {
  color: #17133f !important;
  background: #ffffff !important;
}

body .ms-dropdown-menu a:hover {
  color: #ec1aa7 !important;
  background: #fff7fd !important;
}

/* Header action buttons */
body .site-header .btn,
body .site-header-premium .btn,
body .main-header .btn,
body .navbar .btn,
body .header-actions .btn {
  border-radius: 999px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

body .site-header .btn-primary,
body .site-header-premium .btn-primary,
body .main-header .btn-primary,
body .navbar .btn-primary,
body .header-actions .btn-primary,
body .site-header .btn-small,
body .site-header-premium .btn-small {
  color: #ffffff !important;
  background: linear-gradient(90deg, #ff7a1a, #ff4d65, #ec1aa7) !important;
  border: 0 !important;
  box-shadow: 0 12px 26px rgba(236,26,167,.18) !important;
}

body .site-header .btn-ghost,
body .site-header-premium .btn-ghost,
body .main-header .btn-ghost,
body .navbar .btn-ghost,
body .header-actions .btn-ghost {
  color: #17133f !important;
  background: #ffffff !important;
  border: 1px solid #e7eaf2 !important;
  box-shadow: 0 10px 22px rgba(17,19,60,.05) !important;
}

/* Mobile menu button */
body .ms-menu-toggle {
  color: #17133f !important;
  background: #ffffff !important;
  border: 1px solid #e7eaf2 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 22px rgba(17,19,60,.06) !important;
}

/* Mobile opened menu */
body.ms-menu-open .nav,
body.ms-menu-open .nav-premium,
body.ms-menu-open .nav-app-compact,
body.ms-menu-open .nav-home-compact {
  background: #ffffff !important;
  border: 1px solid #edf0f7 !important;
  box-shadow: 0 18px 44px rgba(17,19,60,.12) !important;
  border-radius: 18px !important;
}

/* Old alert style normalization */
body .alert {
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 26px rgba(17,19,60,.08) !important;
}

body .alert.success {
  background: #dbffe4 !important;
  color: #146c2e !important;
}

body .alert.error {
  background: #ffe6ef !important;
  color: #b31345 !important;
}

/* Keep target page bright sections transparent when old CSS applies background */
.ccf-page,
.mpex-page,
.mpb-page,
.pbr-page,
.product-bright-page,
.clean-page,
.marketplace-page {
  background: transparent !important;
  position: relative !important;
  isolation: isolate !important;
}

@media (max-width: 760px) {
  body,
  body.theme-marketing,
  body.marketing-premium {
    background-attachment: scroll !important;
  }

  body .site-header .brand img,
  body .site-header-premium .brand img,
  body .brand-premium img {
    max-height: 42px !important;
  }
}