/*
  PREMIUM / 3D-BOLD SITE-WIDE UPGRADE
  ------------------------------------
  This theme (like icon-fix.css already does) shares one CSS file across
  EVERY page - login, new order, orders, services, tickets, refill,
  subscriptions, account, add funds, affiliates, blog, FAQ, etc. all reuse
  the same building blocks: .card, .btn-big-primary/secondary, .table,
  headings, .badge, .tab, .form-control, the navbar and the sidebar.

  So instead of hand-editing 30+ individual .twig files one by one, this
  one file gives all of them a consistent "premium" look at once: deeper
  layered shadows (the 3D look), bolder headings/buttons/table headers,
  and a subtle lift/press interaction on buttons and cards.

  It deliberately does NOT hardcode any brand color (red/blue/cyan/dark/
  etc.) - the panel's color comes from whichever site_theme_alt CSS file
  is active (Coral.css, Blue.css, Dark.css...). Everything here works with
  shadows, font-weight and motion only, so it looks right no matter which
  color theme is selected in the admin panel.

  If any individual page later needs its own bespoke redesign (like the
  custom login page banner), that's a separate, page-specific pass on top
  of this.
*/

/* ---------- Typography: bolder, tighter, a touch of depth ---------- */
.body h1, .body h2, .body h3, .body h4, .body h5, .body h6 {
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
}
.body h1 {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* ---------- Cards: layered "3D" shadow instead of flat 1px border ---------- */
.body .card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 14px 30px -10px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.body .card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 20px 40px -12px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* ---------- Buttons: bevel + lift on hover + press on click ---------- */
.body .btn-big-primary,
.body .btn-big-secondary,
.body .btn-actions {
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px -4px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.body .btn-big-primary:hover,
.body .btn-big-secondary:hover,
.body .btn-actions:hover {
  transform: translateY(-2px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 22px -6px rgba(0, 0, 0, 0.45) !important;
}
.body .btn-big-primary:active,
.body .btn-big-secondary:active,
.body .btn-actions:active {
  transform: translateY(1px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 8px -2px rgba(0, 0, 0, 0.35) !important;
}

/* ---------- Tables: bolder header row + floating card feel ---------- */
.body .table-wr {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05), 0 16px 32px -14px rgba(0, 0, 0, 0.2) !important;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  overflow: hidden;
}
.body .table thead tr th {
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase;
  font-size: 12.5px !important;
}

/* ---------- Badges, tabs, pagination: extra depth on the active state ---------- */
.body .badge {
  font-weight: 800 !important;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.3) !important;
}
.body .tab .nav-item .active {
  box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.35) !important;
}
.body .pagination .pagination-item__active .pagination-link {
  box-shadow: 0 3px 8px -2px rgba(0, 0, 0, 0.3) !important;
}

/* ---------- Form fields: subtle inset depth instead of flat fill ---------- */
.body .form-control {
  font-weight: 600 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow 0.15s ease;
}
.body .form-control:focus {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}

/* ---------- Navbar / sidebar: floats above the page instead of sitting flat ---------- */
.body .component-navbar__navbar-private,
.body .component-navbar__navbar-public {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 26px -16px rgba(0, 0, 0, 0.3) !important;
}
.body .component-sidebar {
  box-shadow: 4px 0 28px -12px rgba(0, 0, 0, 0.4) !important;
}
.body .component-sidebar__menu-item-active .component-sidebar__menu-item-link {
  box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.3) !important;
}

/* ---------- Misc surfaces used across many pages ---------- */
.body .panel-description {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.body .alert {
  font-weight: 700 !important;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.18) !important;
}
.body .faq-block__card,
.body .reviews-slider__slide,
.body .table-responsive-classic tbody tr {
  transition: transform 0.2s ease;
}
.body .faq-block__card:hover {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .body .table thead tr th {
    font-size: 11px !important;
  }
  .body .card {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }
}

/* ==========================================================================
   ROUND 3: Bold rounded font + "Sky Help Network" style reference upgrade
   - Baloo 2 (loaded in header.twig) for all headings/values/titles/buttons
   - Dashboard stat cards (Welcome / Total Invested / Orders / Balance):
     rounded icon box with colored ring + vertical accent divider
   - "Why choose us" feature blocks: green gradient section + icon-left
     stacked cards (was: 4-across, icon-on-top)
   ========================================================================== */

:root {
  --premium-font: "Baloo 2", "Poppins", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
}

.body h1, .body h2, .body h3, .body h4, .body h5, .body h6,
.body .pstat-value,
.body .features-block__header-title,
.body .btn-big-primary, .body .btn-big-secondary, .body .btn-actions,
.body .promo-btn__text b {
  font-family: var(--premium-font) !important;
}

/* ---------- SITE-WIDE: every page, every bit of text -> premium font ----------
   Applied to every element on every page (this file loads on all pages via
   header.twig), except icon glyphs which must keep their own icon font or
   the icons turn into blank boxes instead of showing the glyph. Two icon
   systems are used across this theme: Font Awesome (.fa/.fas/.far/.fab/
   .fal/.fad + any .fa-xxx icon name class) and Unicons (.uil/.uis/.uit +
   any uil-xxx/uis-xxx icon name class) - both are excluded below. */
.body,
.body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.uil):not(.uis):not(.uit):not([class*="fa-"]):not([class*="uil-"]):not([class*="uis-"]):not([class*="uit-"]) {
  font-family: var(--premium-font) !important;
}
.body { font-weight: 500; }
/* font-weight normalized on real text containers only - NOT span/i, since
   icons live in those tags and need to keep their own icon-specific weight
   (Font Awesome needs 900, Unicons needs its own weight) to render at all */
.body p, .body td, .body th, .body label,
.body .form-control, .body input, .body textarea, .body select {
  font-weight: 500 !important;
}

/* ---------- Dashboard stat cards (Welcome/Invested/Orders/Balance) ---------- */
.body .pstat-card {
  align-items: center !important;
}
.body .pstat-icon {
  border: 2px solid rgba(0, 0, 0, 0.1) !important;
}
.body .pstat-body {
  border-left: 3px solid rgba(0, 0, 0, 0.15);
  padding-left: 14px !important;
}
.body .pstat-value {
  font-size: 21px !important;
}

/* ---------- "Why choose us" feature blocks: green section + icon-left cards ---------- */
.body .features-block-icons {
  padding: 48px 0 !important;
}
.body .features-block-icons .row {
  row-gap: 18px;
}
/* stack full-width instead of 4-across */
.body .features-block-icons .row > div[class*="col-lg-3"] {
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
.body .features-block__card {
  display: grid !important;
  grid-template-columns: 88px 1fr;
  grid-template-rows: auto auto;
  column-gap: 20px;
  align-items: center;
  padding: 22px 26px !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.22) !important;
}
.body .features-block__header {
  display: contents !important;
}
.body .features-block__header-preview {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 88px !important;
  height: 88px !important;
  border-radius: 20px !important;
  margin-bottom: 0 !important;
}
.body .features-block__header-preview .feature-block__icon {
  font-size: 36px !important;
}
.body .features-block__header-title {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 2px !important;
  text-align: left !important;
}
.body .features-block__header-title p strong {
  font-family: var(--premium-font) !important;
  font-size: 19px !important;
}
.body .features-block__body {
  grid-column: 2;
  grid-row: 2;
}
.body .features-block__body-description {
  text-align: left !important;
}
.body .features-block__body-description p {
  margin-bottom: 0 !important;
  color: #6b7280;
}
@media (max-width: 575px) {
  .body .features-block__card {
    grid-template-columns: 64px 1fr;
    padding: 16px 18px !important;
    gap: 14px;
  }
  .body .features-block__header-preview {
    width: 64px !important;
    height: 64px !important;
    border-radius: 16px !important;
  }
  .body .features-block__header-preview .feature-block__icon {
    font-size: 26px !important;
  }
}

/* ---------- SAFETY NET: force every icon system back to its own font ----------
   Loaded last in this file, so if any icon class was missed above, this
   wins the cascade and restores the icon glyph. Add any other icon class
   prefix used on the site to this list if an icon ever goes blank again. */
.body .fa, .body .fas, .body .far, .body .fab, .body .fal, .body .fad,
.body [class*=" fa-"], .body [class^="fa-"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}
.body .fas, .body .fa, .body .fal, .body .fad { font-weight: 900 !important; }
.body .far { font-weight: 400 !important; }
.body .fab { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; }
.body .uil, .body .uis, .body .uit,
.body [class*=" uil-"], .body [class*=" uis-"], .body [class*=" uit-"] {
  font-family: "unicons-line", "unicons", "uicons" !important;
}

/* ---------- Replace the string-lights decoration with a thin marquee ----------
   The lights are injected by JS as a ".christmas-garland" div inside the
   navbar - hide it here (no need to touch app/init.php's admin-controlled
   decoration settings, and no risk of breaking the JS). The marquee bar is
   inserted right after it by the small script added in header.twig. */
.body .christmas-garland { display: none !important; }

.premium-marquee {
  width: 100%;
  overflow: hidden;
  padding: 6px 0;
}
.premium-marquee__track {
  display: inline-block;
  white-space: nowrap;
  color: #fff;
  font-family: var(--premium-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
  padding-left: 100%;
  animation: premium-marquee-scroll 18s linear infinite;
}
@keyframes premium-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}