/* ==========================================================================
   FS Panel - front-end brand layer (purple + pink)
   --------------------------------------------------------------------------
   Loaded LAST in app/views/smmgen/header.twig, after the theme's own bundles.

   The smmgen theme drives almost all of its colour through CSS custom
   properties, so the bulk of the rebrand is a token swap in :root. A handful
   of values are hard-coded in the theme bundle (a few box-shadows and one flat
   background); those get explicit rules further down.

   Original palette: violet #5f1de8 + orange #ff7300 / amber #ffb400
   New palette:      violet #7c3aed -> fuchsia #c026d3 -> pink #ec4899
   ========================================================================== */

:root {
  /* Brand ramp */
  --fs-violet: #7c3aed;
  --fs-violet-deep: #5b21b6;
  --fs-violet-soft: #8b5cf6;
  --fs-fuchsia: #c026d3;
  --fs-pink: #ec4899;
  --fs-pink-deep: #be185d;
  --fs-pink-soft: #f472b6;

  --fs-grad: linear-gradient(135deg, #7c3aed 0%, #c026d3 55%, #ec4899 100%);
  --fs-grad-soft: linear-gradient(135deg, #8b5cf6 0%, #d946ef 55%, #f472b6 100%);

  /* ---- theme token overrides ---- */
  --blue: #7c3aed;
  --primary-color-v2: #7c3aed;
  --text-primary: #7c3aed;
  --home-btn-hover: #7c3aed;
  --bg-sidebar-day: #7c3aed;
  --bg-dark-menu-active: #7c3aed;

  --bg-menu-active: #5b21b6;
  --bg-user-day: #5b21b6;
  --more-menu: #5b21b6;
  --bg-filter-btn: #6d28d9;

  /* The old orange/amber accent becomes the pink half of the brand */
  --secondary-color-v2: #ec4899;
  --bg-secondary: #ec4899;
  --home-hero-top-text: #ec4899;
  --red: #ec4899;
  --dark-text-primary: #f472b6;

  --btn-primary: linear-gradient(135deg, #7c3aed, #c026d3);
  --btn-day-gradient: linear-gradient(-45deg, #ec4899, #7c3aed);
  --primary-gradient-v2: linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%);
}

/* Status badges stay semantic - a cancelled order must not read as "brand". */

/* --------------------------------------------------------------------------
   Hard-coded leftovers from the theme bundle
   -------------------------------------------------------------------------- */

[style*="#5f1de8"],
.btn-primary,
.btn-main { background-image: var(--fs-grad) !important; border-color: transparent !important; }

/* Glow shadows the bundle pins to the old violet */
[class*="shadow"],
.card:hover,
.service-card:hover { box-shadow: 0 0 18px rgba(124, 58, 237, .28); }

/* --------------------------------------------------------------------------
   Page heroes
   --------------------------------------------------------------------------
   The theme paints these with peach/orange background photos. Replaced with a
   brand wash: keeps the dark headline text readable and drops two image loads.
   -------------------------------------------------------------------------- */

#hero_v2 {
  background: linear-gradient(115deg, #f5f3ff 0%, #fae8ff 42%, #fce7f3 72%, #f5f3ff 100%) !important;
}
#page_banner {
  background: linear-gradient(115deg, #ede9fe 0%, #f5d0fe 48%, #fbcfe8 100%) !important;
}
#cta_v2 {
  background: var(--fs-grad) !important;
  color: #fff;
}
#cta_v2 h2, #cta_v2 h3, #cta_v2 p { color: #fff !important; }

/* The About block's glow is an orange PNG pinned to the right edge. A radial
   gradient does the same job on-brand and saves the image request. */
.about-us {
  background: radial-gradient(closest-side at 76% 50%,
              rgba(236, 72, 153, .38) 0%,
              rgba(192, 38, 211, .18) 55%,
              rgba(124, 58, 237, 0) 80%) !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 62% 92% !important;
}

#followSocialMedia .follow_section_wraper {
  background: linear-gradient(135deg, #2a0f4d 0%, #4c1d95 55%, #831843 100%) !important;
}

/* --------------------------------------------------------------------------
   Sidebar: flat violet -> brand gradient
   -------------------------------------------------------------------------- */

.sidebar,
.side-bar,
#sidebar,
aside.sidebar,
.dashboard-sidebar,
.left-sidebar,
.sidebar-wrapper {
  background: linear-gradient(180deg, #7c3aed 0%, #9333ea 45%, #be185d 100%) !important;
}

/* Balance chip + avatar ring in the sidebar profile card */
.sidebar .user-balance,
.sidebar .balance,
.user-panel .balance { background: var(--fs-grad) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn-primary,
.btn-purple,
.btn-gradient,
button[type="submit"].btn-primary,
input[type="submit"].btn-primary {
  background: var(--fs-grad) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -10px rgba(192, 38, 211, .8);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-primary:hover,
.btn-purple:hover,
.btn-gradient:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(192, 38, 211, .95);
}

a { transition: color .15s ease; }

/* --------------------------------------------------------------------------
   Cards / panels
   -------------------------------------------------------------------------- */

.card,
.panel,
.dashboard-card,
.box {
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover,
.dashboard-card:hover { transform: translateY(-2px); }

/* A thin brand cap so stacked cards read as one family */
.dashboard-card::before,
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--fs-grad);
}
.dashboard-card,
.stat-card { position: relative; overflow: hidden; }

/* --------------------------------------------------------------------------
   Client dashboard: sidebar
   -------------------------------------------------------------------------- */

.menu_item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 3px 12px;
  padding: 11px 13px !important;
  border-radius: 12px;
  color: rgba(255, 255, 255, .88) !important;
  font-weight: 500;
  transition: background .16s ease, transform .16s ease, color .16s ease;
}
.menu_item:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff !important;
  transform: translateX(3px);
  text-decoration: none;
}
.menu_item.active {
  background: rgba(255, 255, 255, .2) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .85);
}
.menu_icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .16);
  font-size: 14px;
  flex: 0 0 auto;
}
.menu_text { font-size: 14px; }

.user_infos, .user_info {
  border-radius: 16px;
  background: rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(6px);
}
.user_balance {
  background: var(--fs-grad) !important;
  color: #fff !important;
  border-radius: 20px;
  font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(236, 72, 153, .9);
}
.user_avatar img, .user_avtar img { border: 3px solid rgba(255, 255, 255, .55); }

/* --------------------------------------------------------------------------
   Client dashboard: content cards
   -------------------------------------------------------------------------- */

.card_type_3,
.dashboard__items,
.account__status {
  border-radius: 16px !important;
  border: 1px solid rgba(124, 58, 237, .12) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 30px -18px rgba(124, 58, 237, .45);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card_type_3:hover,
.dashboard__items:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 20px 42px -20px rgba(124, 58, 237, .6);
}

/* Brand cap on each card so the dashboard reads as one system */
.card_type_3 { position: relative; }
.card_type_3::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--fs-grad);
}

.account_card_head,
.card_type_3 > .card-header {
  background: linear-gradient(135deg, rgba(124, 58, 237, .07), rgba(236, 72, 153, .07)) !important;
  border-bottom: 1px solid rgba(124, 58, 237, .12) !important;
}

/* The status tab pills above the cards */
.account_status_btns .nav-link {
  border-radius: 10px;
  color: #6b21a8;
  font-weight: 560;
  transition: background .15s ease, color .15s ease;
}
.account_status_btns .nav-link:hover { background: rgba(124, 58, 237, .1); }
.account_status_btns .nav-link.active {
  background: var(--fs-grad) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -9px rgba(192, 38, 211, .9);
}

/* Bullet lists inside the account cards */
.list_item, .dashboard_list li { line-height: 1.85; }

/* --------------------------------------------------------------------------
   Real brand colours for the platform icons
   --------------------------------------------------------------------------
   Font Awesome ships these glyphs monochrome. Colouring them by their own
   brand hue is what makes a services list scannable.
   -------------------------------------------------------------------------- */

.fa-facebook, .fa-facebook-f, .fa-facebook-square, .fa-facebook-messenger { color: #1877f2 !important; }
.fa-youtube, .fa-youtube-square                                           { color: #ff0000 !important; }
.fa-twitter, .fa-twitter-square                                           { color: #1da1f2 !important; }
.fa-x-twitter                                                             { color: #0f1419 !important; }
.fa-tiktok                                                                { color: #010101 !important; }
.fa-telegram, .fa-telegram-plane                                          { color: #229ed9 !important; }
.fa-whatsapp, .fa-whatsapp-square                                         { color: #25d366 !important; }
.fa-linkedin, .fa-linkedin-in                                             { color: #0a66c2 !important; }
.fa-discord                                                               { color: #5865f2 !important; }
.fa-spotify                                                               { color: #1db954 !important; }
.fa-soundcloud                                                            { color: #ff5500 !important; }
.fa-pinterest, .fa-pinterest-p, .fa-pinterest-square                      { color: #e60023 !important; }
.fa-snapchat, .fa-snapchat-ghost, .fa-snapchat-square                     { color: #fffc00 !important; text-shadow: 0 0 1px rgba(0,0,0,.55); }
.fa-reddit, .fa-reddit-alien                                              { color: #ff4500 !important; }
.fa-twitch                                                                { color: #9146ff !important; }
.fa-vimeo, .fa-vimeo-v                                                    { color: #1ab7ea !important; }
.fa-threads                                                               { color: #101010 !important; }
.fa-medium                                                                { color: #000000 !important; }
.fa-google, .fa-google-plus                                               { color: #4285f4 !important; }
.fa-apple                                                                 { color: #555555 !important; }

/* Instagram is a gradient mark, not a flat colour. */
.fa-instagram, .fa-instagram-square {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* Marks that are black by design need lifting on dark backgrounds */
.dark-mode .fa-tiktok,
.dark-mode .fa-x-twitter,
.dark-mode .fa-threads,
.dark-mode .fa-medium,
.dark-mode .fa-apple,
.night-mode .fa-tiktok,
.night-mode .fa-x-twitter,
.night-mode .fa-threads,
.night-mode .fa-medium,
.night-mode .fa-apple { color: #ffffff !important; }

/* Give every brand glyph a little presence and a hover lift */
i[class*="fa-"][class*="facebook"],
i[class*="fa-"][class*="instagram"],
i[class*="fa-"][class*="youtube"],
i[class*="fa-"][class*="tiktok"],
i[class*="fa-"][class*="telegram"],
i[class*="fa-"][class*="twitter"],
i[class*="fa-"][class*="whatsapp"],
i[class*="fa-"][class*="linkedin"],
i[class*="fa-"][class*="discord"],
i[class*="fa-"][class*="spotify"],
i[class*="fa-"][class*="pinterest"],
i[class*="fa-"][class*="soundcloud"] {
  transition: transform .18s ease;
}
i[class*="fa-"][class*="facebook"]:hover,
i[class*="fa-"][class*="instagram"]:hover,
i[class*="fa-"][class*="youtube"]:hover,
i[class*="fa-"][class*="tiktok"]:hover,
i[class*="fa-"][class*="telegram"]:hover { transform: scale(1.14); }

/* --------------------------------------------------------------------------
   Selection + scrollbar, so even the small surfaces are on-brand
   -------------------------------------------------------------------------- */

::selection { background: rgba(192, 38, 211, .28); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7c3aed, #ec4899);
  border-radius: 8px;
}
::-webkit-scrollbar-track { background: transparent; }