/**
 * GlobalServic SMM Panel — Brand Overlay (v6)
 * ---------------------------------------------------------
 * Loaded AFTER panel.css to enforce a unified premium brand:
 *   - Only three brand colors:   #ffffff   #001886   #fd5f21
 *   - Clean white New Order "Choose Network" chips (icon + name, no colored boxes)
 *   - Premium mobile-app feel (bottom dock, spacing, typography)
 *   - Consistent cards / buttons / forms across the panel
 *
 * IMPORTANT: This file ONLY overrides — it never removes existing logic.
 * If you ever want to disable the new brand, simply do not enqueue this file.
 */

/* ===========================================================
   1) BRAND TOKENS — force the 3-color palette
   =========================================================== */
.gs-panel-root,
.gs-ai-tools{
  --gs-brand-white:   #ffffff;
  --gs-brand-navy:    #001886;
  --gs-brand-orange:  #fd5f21;

  --gs-bg:            #f4f6fb;
  --gs-surface:       #ffffff;
  --gs-surface-2:     #f7f9fd;
  --gs-surface-3:     #eef2f9;
  --gs-card-bg:       #ffffff;
  --gs-card-alt:      #f7f9fd;

  --gs-text:          #0b1230;
  --gs-muted:         #5b6478;
  --gs-border:        #e4e8f1;
  --gs-soft-border:   rgba(0, 24, 134, .10);

  --gs-primary:       var(--gs-brand-orange);
  --gs-primary-2:     var(--gs-brand-navy);
  --gs-primary-soft:  rgba(253, 95, 33, .10);
  --gs-accent:        var(--gs-brand-navy);

  --gs-shadow:        0 18px 42px rgba(0, 24, 134, .08);
  --gs-card-glow:     0 12px 28px rgba(0, 24, 134, .06);
}

/* Kill stray legacy hues — keep links/buttons consistent */
.gs-panel-root a{ color: var(--gs-brand-navy); }
.gs-panel-root a:hover{ color: var(--gs-brand-orange); }

/* ===========================================================
   2) BUTTONS — unified premium feel
   =========================================================== */
.gs-panel-root .gs-btn.primary,
.gs-panel-root .gs-btn-primary{
  background: var(--gs-brand-orange) !important;
  border: 1px solid var(--gs-brand-orange) !important;
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .01em;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(253, 95, 33, .22);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.gs-panel-root .gs-btn.primary:hover,
.gs-panel-root .gs-btn-primary:hover{
  background: #e9551a !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(253, 95, 33, .28);
}
.gs-panel-root .gs-btn.gs-btn-soft{
  background: rgba(0, 24, 134, .06) !important;
  border: 1px solid rgba(0, 24, 134, .12) !important;
  color: var(--gs-brand-navy) !important;
  font-weight: 700;
}
.gs-panel-root .gs-btn.gs-btn-ghost{
  background: #fff !important;
  border: 1px solid var(--gs-border) !important;
  color: var(--gs-brand-navy) !important;
}

/* ===========================================================
   3) SIDEBAR + ACTIVE MENU
   =========================================================== */
.gs-panel-root .gs-sidebar{
  background: #fff;
  border-right: 1px solid var(--gs-border);
}
.gs-panel-root .gs-menu-item.active{
  background: linear-gradient(135deg, var(--gs-brand-navy), #1226a8) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 24, 134, .22);
}
.gs-panel-root .gs-menu-item.active .gs-menu-ico,
.gs-panel-root .gs-menu-item.active .gs-menu-txt{ color:#fff !important; }
.gs-panel-root .gs-menu-item:hover{ background: rgba(0, 24, 134, .05); }

/* ===========================================================
   4) CARDS — consistent radius, shadow, padding
   =========================================================== */
.gs-panel-root .gs-card{
  background: #fff !important;
  border: 1px solid var(--gs-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--gs-card-glow);
}

/* ===========================================================
   5) NEW ORDER → CLEAN WHITE NETWORK CHIPS (icon + name)
   This is the section the user explicitly asked to redesign.
   =========================================================== */
.gs-panel-root .gs-neworder-gridwrap{
  background: #fff !important;
  border: 1px solid var(--gs-border) !important;
  border-radius: 16px !important;
  padding: 14px !important;
}

.gs-panel-root .gs-net-chip{
  background: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: var(--gs-text) !important;
  border-radius: 14px !important;
  min-height: 84px !important;
  padding: 10px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}
.gs-panel-root .gs-net-chip:hover{
  transform: translateY(-2px);
  border-color: rgba(0, 24, 134, .12) !important;
  box-shadow: 0 10px 24px rgba(0, 24, 134, .08) !important;
}
.gs-panel-root .gs-net-chip.is-active,
.gs-panel-root .gs-net-chip.active{
  background: #fff !important;
  border-color: var(--gs-brand-orange) !important;
  box-shadow: 0 10px 24px rgba(253, 95, 33, .18) !important;
  transform: translateY(-2px) !important;
}

/* The icon — clean circle, brand-original colors come from the inner SVG/emoji */
.gs-panel-root .gs-net-chip .gs-net-icon{
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid var(--gs-border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: var(--gs-brand-navy) !important;
  box-shadow: 0 4px 10px rgba(0, 24, 134, .06);
  transition: transform .18s ease;
}
.gs-panel-root .gs-net-chip:hover .gs-net-icon{ transform: scale(1.06); }

.gs-panel-root .gs-net-chip .gs-net-label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gs-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Slightly tighter on mobile */
@media (max-width: 640px){
  .gs-panel-root .gs-net-chip{
    min-height: 76px !important;
    padding: 8px 4px !important;
  }
  .gs-panel-root .gs-net-chip .gs-net-icon{
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  .gs-panel-root .gs-net-chip .gs-net-label{ font-size: 11px; }
}

/* New Order tab pills + active state aligned to brand */
.gs-panel-root .gs-no-tab.is-active{
  background: var(--gs-brand-orange) !important;
  color:#fff !important;
  border-color: var(--gs-brand-orange) !important;
}

/* ===========================================================
   6) FORMS — inputs, selects, focus
   =========================================================== */
.gs-panel-root input[type="text"],
.gs-panel-root input[type="number"],
.gs-panel-root input[type="search"],
.gs-panel-root input[type="email"],
.gs-panel-root input[type="url"],
.gs-panel-root textarea,
.gs-panel-root select{
  border-radius: 12px !important;
  border: 1px solid var(--gs-border) !important;
  background: #fff !important;
  color: var(--gs-text) !important;
}
.gs-panel-root input:focus,
.gs-panel-root textarea:focus,
.gs-panel-root select:focus{
  outline: none !important;
  border-color: var(--gs-brand-orange) !important;
  box-shadow: 0 0 0 3px rgba(253, 95, 33, .15) !important;
}

/* ===========================================================
   7) MOBILE — premium native-app feel
   =========================================================== */
@media (max-width: 980px){
  .gs-panel-root .gs-page{ padding-bottom: 96px !important; } /* room for dock */
  .gs-panel-root .gs-card{ border-radius: 18px !important; }
  .gs-panel-root .gs-topbar{
    border-bottom: 1px solid var(--gs-border);
    background: #fff !important;
    backdrop-filter: blur(8px);
  }
}

/* Bottom dock — premium app bar */
.gs-panel-root .gs-mobile-dock{
  display: none;
}
@media (max-width: 980px){
  .gs-panel-root .gs-mobile-dock{
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 8px; right: 8px; bottom: 10px;
    z-index: 9999;
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid var(--gs-border);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(0, 24, 134, .14);
    padding: 8px 6px;
    gap: 4px;
  }
  .gs-panel-root .gs-mobile-dock__item{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    padding: 8px 6px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--gs-muted);
    font-size: 11px;
    font-weight: 700;
    transition: background .2s ease, color .2s ease, transform .15s ease;
  }
  .gs-panel-root .gs-mobile-dock__item span{ font-size: 18px; line-height: 1; }
  .gs-panel-root .gs-mobile-dock__item strong{ font-weight: 700; font-size: 11px; }
  .gs-panel-root .gs-mobile-dock__item:active{ transform: scale(.96); }
  .gs-panel-root .gs-mobile-dock__item.is-active{
    color: #fff;
    background: linear-gradient(135deg, var(--gs-brand-navy), #1d2eb0);
    box-shadow: 0 8px 18px rgba(0, 24, 134, .25);
  }
}

/* ===========================================================
   8) FREE AI TOOLS — premium polish
   =========================================================== */
.gs-ai-tools .gs-ai-hero{
  background: linear-gradient(135deg, var(--gs-brand-navy), #1226a8) !important;
  color: #fff !important;
  border: none !important;
}
.gs-ai-tools .gs-ai-hero__title{ color:#fff !important; font-weight: 800; letter-spacing:-.01em; }
.gs-ai-tools .gs-ai-hero__desc{ color: rgba(255,255,255,.85) !important; }
.gs-ai-tools .gs-ai-hero__badge{
  background: var(--gs-brand-orange) !important;
  color:#fff !important;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 800;
}

.gs-ai-tools .gs-ai-cat{
  background: #fff !important;
  border: 1px solid var(--gs-border) !important;
  color: var(--gs-brand-navy) !important;
  border-radius: 999px !important;
  font-weight: 700;
}
.gs-ai-tools .gs-ai-cat.is-active{
  background: var(--gs-brand-navy) !important;
  border-color: var(--gs-brand-navy) !important;
  color:#fff !important;
}

.gs-ai-tools .gs-ai-card{
  border: 1px solid var(--gs-border) !important;
  border-radius: 18px !important;
  background: #fff !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gs-ai-tools .gs-ai-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0, 24, 134, .14) !important;
  box-shadow: 0 18px 36px rgba(0, 24, 134, .10) !important;
}
.gs-ai-tools .gs-ai-card__icon{
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(0, 24, 134, .06);
  color: var(--gs-brand-navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.gs-ai-tools .gs-ai-card__title{ font-weight: 800; color: var(--gs-text); }
.gs-ai-tools .gs-ai-card__cta{
  background: var(--gs-brand-orange) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 800;
}

.gs-ai-tools .gs-ai-result{
  border: 1px solid var(--gs-border);
  border-radius: 14px;
  background: #fff;
  padding: 12px 14px;
  margin-bottom: 10px;
}

/* ===========================================================
   9) TYPOGRAPHY HIERARCHY POLISH
   =========================================================== */
.gs-panel-root h1, .gs-panel-root h2, .gs-panel-root h3{
  color: var(--gs-text);
  letter-spacing: -.01em;
}
.gs-panel-root .gs-muted{ color: var(--gs-muted); }
.gs-panel-root .gs-topbar-title{
  font-weight: 800;
  font-size: 18px;
  color: var(--gs-brand-navy);
}