/* ======================================================================
   CYMART — Desktop quick links in the global top bar
   Scope: desktop only (>= 992px). Mobile is intentionally untouched.
   ====================================================================== */

@media (min-width: 992px) {
  /* Keep the existing CYMART identity while making the top strip a little
     taller so the five glass buttons fit comfortably. */
  html body .header-top,
  html body.cymart-theme-light .header-top {
    min-height: 50px !important;
    background: linear-gradient(90deg, #16bdf2 0%, #268bff 22%, #6f5bf4 48%, #b643e9 72%, #f44da8 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.22) !important;
    box-shadow: 0 6px 20px rgba(51,69,194,.20) !important;
  }

  html body.cymart-theme-dark .header-top {
    background: linear-gradient(90deg, #08aeea 0%, #2478f4 22%, #6248e8 48%, #a637dc 72%, #e83e9b 100%) !important;
    border-bottom-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 20px rgba(117,67,255,.13) !important;
  }

  html body .header-top > .container {
    width: 100% !important;
    max-width: 1460px !important;
    min-height: 50px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html body .header-top nav.nav {
    width: 100% !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    background: transparent !important;
  }

  /* Remove only the old phone + Telegram text block on desktop.
     Their original markup is preserved for safety and mobile remains untouched. */
  html body .header-top .cymart-legacy-top-contact {
    display: none !important;
  }

  /* The new five-button desktop group. */
  html body .header-top .cymart-desktop-quicklinks {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 5px 0 !important;
    margin: 0 !important;
  }

  html body .header-top .cymart-top-action {
    position: relative !important;
    isolation: isolate;
    height: 38px !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 0 17px !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.075)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 4px 12px rgba(25,24,94,.12) !important;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transform: translateY(0) scale(1) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
    -webkit-backdrop-filter: blur(8px) saturate(125%);
    backdrop-filter: blur(8px) saturate(125%);
  }

  html body .header-top .cymart-top-action::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -1px;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.24), transparent 68%);
    transition: opacity .18s ease;
    pointer-events: none;
  }

  html body .header-top .cymart-top-action:hover,
  html body .header-top .cymart-top-action:focus-visible {
    color: #fff !important;
    border-color: rgba(255,255,255,.72) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.12)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 0 0 1px rgba(255,255,255,.10), 0 7px 17px rgba(25,20,102,.20), 0 0 16px rgba(255,255,255,.16) !important;
    transform: translateY(-2px) scale(1.015) !important;
    outline: none !important;
  }

  html body .header-top .cymart-top-action:hover::after,
  html body .header-top .cymart-top-action:focus-visible::after {
    opacity: 1;
  }

  html body .header-top .cymart-top-action:active {
    transform: translateY(0) scale(.985) !important;
    box-shadow: inset 0 2px 5px rgba(20,18,88,.22), 0 2px 7px rgba(25,20,102,.14) !important;
  }

  html body .header-top .cymart-top-action-icon {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 7px rgba(22,18,86,.14) !important;
  }

  html body .header-top .cymart-top-action-icon i {
    font-size: 15px !important;
    line-height: 1 !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.16) !important;
  }

  /* Brand accents, matching the approved concept without changing the button system. */
  html body .header-top .cymart-top-action-whatsapp .cymart-top-action-icon {
    background: #18c86f !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 0 13px rgba(24,200,111,.40) !important;
  }

  html body .header-top .cymart-top-action-telegram .cymart-top-action-icon {
    background: #27a9e8 !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.16), 0 0 13px rgba(39,169,232,.38) !important;
  }

  html body .header-top .cymart-top-action-channel .cymart-top-action-icon {
    background: linear-gradient(135deg,#ff4bb1,#b54cff) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 0 13px rgba(218,65,221,.34) !important;
  }

  html body .header-top .cymart-top-action-support .cymart-top-action-icon {
    background: linear-gradient(135deg,#8d67ff,#684be7) !important;
  }

  html body .header-top .cymart-top-action-tutorials .cymart-top-action-icon {
    background: linear-gradient(135deg,#ff5ba8,#e239a0) !important;
  }

  html body .header-top .cymart-top-action-label {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(37,22,105,.22) !important;
  }

  /* Keep the original theme/settings control at the far right, as requested. */
  html body .header-top .ml-auto.d-flex {
    position: relative !important;
    flex: 0 0 auto !important;
    margin-left: 16px !important;
    padding-left: 16px !important;
    min-height: 36px !important;
    align-items: center !important;
    gap: 4px !important;
  }

  html body .header-top .ml-auto.d-flex::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 1px;
    background: rgba(255,255,255,.28);
    border-radius: 1px;
  }

  html body .header-top .ml-auto.d-flex > .nav-item > .nav-link,
  html body .header-top .ml-auto.d-flex > li > .nav-link {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  }

  html body .header-top .ml-auto.d-flex > .nav-item > .nav-link:hover,
  html body .header-top .ml-auto.d-flex > li > .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.13) !important;
    border-color: rgba(255,255,255,.24) !important;
    box-shadow: 0 0 14px rgba(255,255,255,.12) !important;
    transform: translateY(-1px) !important;
  }

  html body .header-top .ml-auto.d-flex .fa-cog {
    font-size: 16px !important;
    color: #fff !important;
    text-shadow: 0 0 8px rgba(255,255,255,.20) !important;
  }

  /* On smaller desktop widths, keep all five buttons on one line. */
  @media (max-width: 1199.98px) {
    html body .header-top > .container {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    html body .header-top .cymart-desktop-quicklinks {
      gap: 7px !important;
    }

    html body .header-top .cymart-top-action {
      gap: 6px !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    html body .header-top .cymart-top-action-label {
      font-size: 11px !important;
    }

    html body .header-top .cymart-top-action-icon {
      width: 23px !important;
      height: 23px !important;
      flex-basis: 23px !important;
    }

    html body .header-top .cymart-top-action-icon i {
      font-size: 13px !important;
    }

    html body .header-top .ml-auto.d-flex {
      margin-left: 8px !important;
      padding-left: 9px !important;
    }
  }
}

/* Explicit mobile safety: the new controls do not render and none of the
   existing mobile header styles are overridden by this file. */
@media (max-width: 991.98px) {
  html body .cymart-desktop-quicklinks {
    display: none !important;
  }
}