/* DIRECT TARGETING FOR TOP BAR ELEMENTS */

/* Force top bar region to be a proper flex container */
.region-top-bar-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Force direct display of block containers */
#block-twbase-epragmamyaccountmenu,
#block-twbase-epragmamyaccountsidebarmenu,
#block-twbase-kalathi {
  display: inline-flex !important;
  float: none !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

/* Dark mode only text colors */
/* Light mode styling removed as requested */

.dark .myaccount-menu-toggle,
.dark .myaccount-user-wrapper,
body.dark .myaccount-menu-toggle,
body.dark .myaccount-user-wrapper,
.tw-bg-gray-900 .myaccount-menu-toggle,
.tw-bg-gray-900 .myaccount-user-wrapper,
.dark-mode .myaccount-menu-toggle,
.dark-mode .myaccount-user-wrapper,
.tw-dark .myaccount-menu-toggle,
.tw-dark .myaccount-user-wrapper {
  color: #fff !important;
}


/* Fix user wrapper */
.myaccount-user-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* Direct img targeting */
/* Light mode - force black */
.myaccount-user-icon {
  filter: brightness(0) !important;
  -webkit-filter: brightness(0) !important;
}

/* Position user icon properly */
.myaccount-user-icon {
  margin-right: 4px;
  vertical-align: middle;
}

/* Fix the container wrapper from template */
.top-bar-region-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Extra selector strength for deeper nesting */
.region-top-bar-left > div,
.region-top-bar-left > div > div,
.top-bar-region-wrapper > div {
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
}

/* Override any block display */
.block-epragma-myaccount-menu {
  max-width: fit-content !important;
}

/* Cart block links should have white text */
.cart--cart-block .cart-block--contents a {
  color: white !important;
}

/* Add dark mode color support for cart links */
.tw-dark .cart--cart-block .cart-block--contents a {
  color: white !important;
}

:not(.tw-dark) .cart--cart-block .cart-block--contents a {
  color: #333 !important;
}

/* SVG Cart Icon */
/* .cart-block--summary__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../img/cart-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
} */

/* Hide the original image */
/* .cart-block--summary__icon img {
  display: none !important;
} */

/* Color for light mode */
:not(.dark) .cart-block--summary__icon {
  filter: brightness(0) !important;
}

/* Color for dark mode */
.dark .cart-block--summary__icon,
html.dark .cart-block--summary__icon,
body.dark .cart-block--summary__icon,
.dark-theme .cart-block--summary__icon,
.tw-dark .cart-block--summary__icon,
.tw-bg-gray-900 .cart-block--summary__icon {
  filter: invert(1) !important;
}

/* Mobile cart icon styling */
/* Improved mobile cart styling */
.mobile-cart-wrapper .cart-block--summary {
  display: flex;
  align-items: center;
  position: relative;
  padding: 4px 0;
}

/* Hide username on mobile but keep icon */
@media (max-width: 1023px) {
  .myaccount-user-wrapper {
    display: flex;
    align-items: center;
  }

  .myaccount-user-wrapper img {
    margin-right: 0 !important;
  }

  /* Hide the username text */
  .myaccount-user-wrapper::after {
    content: "";
    display: inline;
  }

  .myaccount-user-wrapper {
    font-size: 0 !important;
    line-height: 0 !important;
  }
}

.mobile-cart-wrapper .cart-block--summary__icon {
  margin-right: 0;
}

.mobile-cart-wrapper .cart-block--summary__count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: #d9262c;
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 0;
  right: -6px;
  padding: 0;
  border: 1px solid white;
}

/* Adjust mobile menu icons alignment */
.lg\:tw-hidden.tw-flex.tw-items-center.tw-gap-3 {
  gap: 1.25rem !important;
}

.cart-block--summary__icon,
.tw-dark .cart-block--summary__icon,
.tw-bg-gray-900 .cart-block--summary__icon {
  filter: invert(1) !important;
}