/* ======================================================================
   CYMART HELP MENU V1
   Adds the Ayuda menu after Client Area on desktop and mobile.
   Scope is intentionally limited to .cymart-help-menu.
   ====================================================================== */

/* ---------------- Desktop (>= 992px) ---------------- */
@media (min-width: 992px) {
  .header-middle .navbar-mastermenu > .cymart-help-menu {
    position: relative !important;
  }

  .header-middle .navbar-mastermenu > .cymart-help-menu > .cymart-help-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    border-radius: 9px !important;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  }

  .header-middle .navbar-mastermenu > .cymart-help-menu:hover > .cymart-help-trigger,
  .header-middle .navbar-mastermenu > .cymart-help-menu.show > .cymart-help-trigger,
  .header-middle .navbar-mastermenu > .cymart-help-menu > .cymart-help-trigger[aria-expanded="true"] {
    transform: translateY(-1px) !important;
  }

  /* Keep the help dropdown available by mouse hover, matching the current menu behavior. */
  .header-middle .navbar-mastermenu > .cymart-help-menu:hover > .cymart-help-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .header-middle .cymart-help-dropdown {
    min-width: 268px !important;
    padding: 8px !important;
    margin-top: 2px !important;
    border-radius: 13px !important;
    overflow: hidden !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
  }

  .header-middle .cymart-help-menu.show > .cymart-help-dropdown,
  .header-middle .cymart-help-trigger[aria-expanded="true"] + .cymart-help-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .header-middle .cymart-help-dropdown .cymart-help-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    padding: 7px 9px !important;
    margin: 1px 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    transition: background .16s ease, color .16s ease, transform .16s ease !important;
  }

  .header-middle .cymart-help-dropdown .cymart-help-link:hover,
  .header-middle .cymart-help-dropdown .cymart-help-link:focus {
    transform: translateX(2px) !important;
  }

  .header-middle .cymart-help-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
  }

  .header-middle .cymart-help-out {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    opacity: .68 !important;
  }
}

/* ---------------- Shared icon treatment ---------------- */
.cymart-help-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  flex: 0 0 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 5px 12px rgba(11, 28, 56, .18) !important;
}

.cymart-help-icon i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

@media (min-width: 992px) {
  html body .header-middle .cymart-help-menu .cymart-help-icon,
  html body .header-middle .cymart-help-menu .cymart-help-icon i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
}

.cymart-help-whatsapp { background: linear-gradient(145deg,#25d366,#16a84c) !important; }
.cymart-help-telegram { background: linear-gradient(145deg,#35b7f2,#168bd2) !important; }
.cymart-help-channel  { background: linear-gradient(145deg,#4aa9ff,#2569d8) !important; }
.cymart-help-support  { background: linear-gradient(145deg,#b13cff,#7924d2) !important; }
.cymart-help-tutorial { background: linear-gradient(145deg,#ff5261,#e32238) !important; }

/* ---------------- Desktop light theme ---------------- */
@media (min-width: 992px) {
  html body.cymart-theme-light .header-middle .cymart-help-menu > .cymart-help-trigger,
  html body:not(.cymart-theme-dark) .header-middle .cymart-help-menu > .cymart-help-trigger {
    color: #17223a !important;
    -webkit-text-fill-color: #17223a !important;
  }

  html body.cymart-theme-light .header-middle .cymart-help-menu:hover > .cymart-help-trigger,
  html body.cymart-theme-light .header-middle .cymart-help-menu.show > .cymart-help-trigger,
  html body:not(.cymart-theme-dark) .header-middle .cymart-help-menu:hover > .cymart-help-trigger {
    background: linear-gradient(135deg,rgba(91,126,255,.13),rgba(207,70,255,.12)) !important;
    box-shadow: 0 5px 15px rgba(88, 95, 220, .13) !important;
    color: #273b88 !important;
    -webkit-text-fill-color: #273b88 !important;
  }

  html body.cymart-theme-light .header-middle .cymart-help-dropdown,
  html body:not(.cymart-theme-dark) .header-middle .cymart-help-dropdown {
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(92,125,190,.22) !important;
    box-shadow: 0 16px 38px rgba(48,72,125,.18), 0 1px 0 rgba(255,255,255,.92) inset !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  }

  html body.cymart-theme-light .header-middle .cymart-help-dropdown .cymart-help-link,
  html body:not(.cymart-theme-dark) .header-middle .cymart-help-dropdown .cymart-help-link {
    background: transparent !important;
    color: #17223a !important;
    -webkit-text-fill-color: #17223a !important;
  }

  html body.cymart-theme-light .header-middle .cymart-help-dropdown .cymart-help-link:hover,
  html body.cymart-theme-light .header-middle .cymart-help-dropdown .cymart-help-link:focus,
  html body:not(.cymart-theme-dark) .header-middle .cymart-help-dropdown .cymart-help-link:hover,
  html body:not(.cymart-theme-dark) .header-middle .cymart-help-dropdown .cymart-help-link:focus {
    background: linear-gradient(90deg,rgba(56,136,255,.09),rgba(183,74,255,.08)) !important;
    color: #1a57bc !important;
    -webkit-text-fill-color: #1a57bc !important;
  }
}

/* ---------------- Desktop dark theme ---------------- */
@media (min-width: 992px) {
  html body.cymart-theme-dark .header-middle .cymart-help-menu > .cymart-help-trigger {
    color: #edf6ff !important;
    -webkit-text-fill-color: #edf6ff !important;
  }

  html body.cymart-theme-dark .header-middle .cymart-help-menu:hover > .cymart-help-trigger,
  html body.cymart-theme-dark .header-middle .cymart-help-menu.show > .cymart-help-trigger {
    background: linear-gradient(135deg,rgba(0,155,255,.16),rgba(140,52,255,.16)) !important;
    box-shadow: 0 0 16px rgba(73,125,255,.18) !important;
    color: #8fe7ff !important;
    -webkit-text-fill-color: #8fe7ff !important;
  }

  html body.cymart-theme-dark .header-middle .cymart-help-dropdown {
    background: linear-gradient(145deg,rgba(4,18,43,.98),rgba(15,17,48,.98)) !important;
    border: 1px solid rgba(65,150,255,.45) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.5), 0 0 20px rgba(98,57,255,.16) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  }

  html body.cymart-theme-dark .header-middle .cymart-help-dropdown .cymart-help-link {
    background: transparent !important;
    color: #edf6ff !important;
    -webkit-text-fill-color: #edf6ff !important;
  }

  html body.cymart-theme-dark .header-middle .cymart-help-dropdown .cymart-help-link:hover,
  html body.cymart-theme-dark .header-middle .cymart-help-dropdown .cymart-help-link:focus {
    background: linear-gradient(90deg,rgba(0,153,255,.13),rgba(146,54,255,.13)) !important;
    color: #8fe7ff !important;
    -webkit-text-fill-color: #8fe7ff !important;
  }
}

/* ---------------- Mobile / tablet (< 992px) ----------------
   The site's approved mobile drawer remains unchanged: white in both
   themes. We only add the Ayuda section and colored service icons.
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #navbarToggler1.modal-menu .cymart-help-menu > .cymart-help-trigger {
    text-transform: uppercase !important;
  }

  #navbarToggler1.modal-menu .cymart-help-menu > .cymart-help-dropdown {
    display: block !important;
    position: relative !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #navbarToggler1.modal-menu .cymart-help-dropdown .cymart-help-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 47px !important;
    padding: .55rem 2.3rem .55rem 1.1rem !important;
  }

  #navbarToggler1.modal-menu .cymart-help-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-weight: 500 !important;
  }

  #navbarToggler1.modal-menu .cymart-help-out {
    display: none !important;
  }

  #navbarToggler1.modal-menu .cymart-help-icon,
  #navbarToggler1.modal-menu .cymart-help-icon i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* Existing drawer supplies its own right chevron via :after. */
  #navbarToggler1.modal-menu .cymart-help-dropdown .cymart-help-link:after {
    top: 14px !important;
  }
}

/* ======================================================================
   CYMART DESKTOP MENU READABILITY V10
   Requested adjustment: DESKTOP ONLY. Mobile/tablet drawer is untouched.
   Improves first-level menu readability without changing menu structure.
   ====================================================================== */
@media (min-width: 1200px) {
  html body .header-middle .navbar-mastermenu {
    column-gap: 6px !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item > .nav-link {
    font-size: 13px !important;
    line-height: 1.15 !important;
    padding: 9px 9px !important;
    letter-spacing: .005em !important;
  }

  html body .header-middle .navbar-mastermenu > .cymart-help-menu > .cymart-help-trigger {
    gap: 6px !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  html body .header-middle .navbar-mastermenu {
    column-gap: 3px !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item > .nav-link {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    padding: 7px 4px !important;
  }
}

/* ======================================================================
   CYMART DESKTOP MENU READABILITY + DROPDOWN LAYER V11
   Requested adjustment: PC/DESKTOP ONLY.
   IMPORTANT: No rule in this block applies below 992px, so the approved
   mobile drawer and its spacing remain exactly as they were.
   ====================================================================== */

/* Desktop: guarantee every first-level submenu renders above page content. */
@media (min-width: 992px) {
  html body header,
  html body .header-middle {
    position: relative !important;
    z-index: 10000 !important;
    overflow: visible !important;
  }

  html body .header-middle > .container,
  html body .header-middle > .container > nav.navbar-xl,
  html body .header-middle > .container > nav > .d-none.d-lg-block,
  html body .header-middle .navbar-mastermenu,
  html body .header-middle .navbar-mastermenu > .nav-item,
  html body .header-middle .navbar-mastermenu > .nav-item.dropdown {
    overflow: visible !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item.dropdown {
    position: relative !important;
    z-index: 10020 !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item.dropdown.show,
  html body .header-middle .navbar-mastermenu > .nav-item.dropdown:hover {
    z-index: 10040 !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item > .dropdown-menu,
  html body .header-middle .cymart-help-dropdown {
    position: absolute !important;
    z-index: 10060 !important;
  }

  /* Keep the profile/account dropdown above the page as well. */
  html body .header-middle > .container > nav > ul.navbar-nav:last-child,
  html body .header-middle > .container > nav > ul.navbar-nav:last-child > li {
    overflow: visible !important;
    position: relative !important;
  }

  html body .header-middle > .container > nav > ul.navbar-nav:last-child .dropdown-menu {
    z-index: 10060 !important;
  }
}

/* Wide desktop: larger type and noticeably more breathing room. */
@media (min-width: 1400px) {
  html body .header-middle > .container > nav > .d-none.d-lg-block {
    padding-left: 110px !important;
    padding-right: 110px !important;
  }

  html body .header-middle .navbar-mastermenu {
    column-gap: 7px !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item {
    margin-left: 2px !important;
    margin-right: 2px !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item > .nav-link {
    font-size: 14.5px !important;
    line-height: 1.2 !important;
    padding: 10px 10px !important;
    letter-spacing: .006em !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item > .nav-link .fa-chevron-down,
  html body .header-middle .navbar-mastermenu > .nav-item > .nav-link .fal.fa-chevron-down {
    margin-left: 4px !important;
  }

  html body .header-middle > .container > nav > ul.navbar-nav:last-child {
    margin-left: 15px !important;
    gap: 7px !important;
  }

  html body .header-middle > .container > nav > ul.navbar-nav:last-child > li > .nav-link,
  html body .header-middle .profile .nav-link {
    font-size: 12.5px !important;
    line-height: 1.15 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Standard desktop/laptop: larger than V10 but still protected from overflow. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  html body .header-middle > .container > nav > .d-none.d-lg-block {
    padding-left: 115px !important;
    padding-right: 115px !important;
  }

  html body .header-middle .navbar-mastermenu {
    column-gap: 4px !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item {
    margin-left: 1px !important;
    margin-right: 1px !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item > .nav-link {
    font-size: 13.25px !important;
    line-height: 1.18 !important;
    padding: 9px 8px !important;
  }

  html body .header-middle > .container > nav > ul.navbar-nav:last-child {
    margin-left: 12px !important;
    gap: 5px !important;
  }

  html body .header-middle > .container > nav > ul.navbar-nav:last-child > li > .nav-link,
  html body .header-middle .profile .nav-link {
    font-size: 11.5px !important;
  }
}

/* Compact desktop only. Mobile starts below 992px and is untouched. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  html body .header-middle .navbar-mastermenu {
    column-gap: 3px !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item > .nav-link {
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    padding: 8px 5px !important;
  }

  html body .header-middle > .container > nav > ul.navbar-nav:last-child {
    gap: 3px !important;
  }

  html body .header-middle > .container > nav > ul.navbar-nav:last-child > li > .nav-link,
  html body .header-middle .profile .nav-link {
    font-size: 10.5px !important;
  }
}

/* ======================================================================
   CYMART DESKTOP MENU SPACING V13
   User-requested refinement: more separation and slightly larger text.
   DESKTOP ONLY. Nothing below 992px is touched.
   Dropdown stacking from V11 remains intact and above page content.
   ====================================================================== */

/* Large desktop screens */
@media (min-width: 1400px) {
  html body .header-middle .navbar-mastermenu {
    column-gap: 13px !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item {
    margin-left: 2px !important;
    margin-right: 2px !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item > .nav-link {
    font-size: 15.25px !important;
    line-height: 1.22 !important;
    padding: 10px 11px !important;
    white-space: nowrap !important;
  }

  html body .header-middle > .container > nav > ul.navbar-nav:last-child {
    margin-left: 22px !important;
    gap: 12px !important;
  }

  html body .header-middle > .container > nav > ul.navbar-nav:last-child > li > .nav-link,
  html body .header-middle .profile .nav-link {
    font-size: 13.25px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
  }
}

/* Normal desktop / laptop */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  html body .header-middle .navbar-mastermenu {
    column-gap: 8px !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item {
    margin-left: 1px !important;
    margin-right: 1px !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item > .nav-link {
    font-size: 13.75px !important;
    line-height: 1.2 !important;
    padding: 9px 9px !important;
    white-space: nowrap !important;
  }

  html body .header-middle > .container > nav > ul.navbar-nav:last-child {
    margin-left: 16px !important;
    gap: 8px !important;
  }

  html body .header-middle > .container > nav > ul.navbar-nav:last-child > li > .nav-link,
  html body .header-middle .profile .nav-link {
    font-size: 12px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

/* Compact desktop. Mobile/tablet below 992px remains untouched. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  html body .header-middle .navbar-mastermenu {
    column-gap: 5px !important;
  }

  html body .header-middle .navbar-mastermenu > .nav-item > .nav-link {
    font-size: 11.75px !important;
    line-height: 1.16 !important;
    padding: 8px 6px !important;
    white-space: nowrap !important;
  }

  html body .header-middle > .container > nav > ul.navbar-nav:last-child {
    margin-left: 8px !important;
    gap: 5px !important;
  }
}