/**
 * File: header-mini-cart.css
 * Purpose: Styles for the mini cart icon and drawer in the top navigation bar.
 * Usage: Appears inside `.menu-bar` as `.custom-cart-icon` and related DWE Mini Cart elements.
 * Dependencies: DWE Mini Cart plugin, inherits base layout from `header-top-nav-shared.css`.
 *
 * Contents:
 * - Scoped variables for mini cart colors, borders, and transitions
 * - `.custom-cart-icon` layout and responsive handling
 * - DWE mini cart drawer styling, item layout, remove button, and action buttons
 * - Responsive width/position for cart drawer on tablets and mobile
 *
 * Notes:
 * - The mini cart is only used in the top nav, so this file remains within the header CSS structure.
 * - Style assumes DWE plugin structure but integrates seamlessly into site navigation.
 * - `.custom-cart-icon` was created specifically as a wrapper for the mini cart module.
 *
 * Key Class Targets:
 * - `.custom-cart-icon`, `.dwe_mini_cart`, `.dwe_mini_cart_wrapper`, `.dwe_mini_cart_buttons`
 */


/* ---------------------------- */
/* ----- Scoped Variables ----- */
/* ---------------------------- */

.top-nav {
  --top-nav-dwe-cart-icon-hover-color: var(--brand-accent-color);
  --top-nav-dwe-arrow-color: var(--white);
  --top-nav-dwe-bg-color: var(--white);
  --top-nav-dwe-border-color: var(--brand-accent-color);
  --top-nav-dwe-box-shadow-color: var(--black-overlay-lighter);
  --top-nav-dwe-item-border-color: var(--gray-medium);
  --top-nav-dwe-item-remove-button-color: var(--black);
  --top-nav-dwe-item-remove-button-hover-color: var(--brand-accent-color);
  --top-nav-dwe-item-product-name-hover-color: var(--brand-accent-color);
  --top-nav-dwe-button-bg-color: var(--gray-light);
  --top-nav-dwe-button-bg-hover-color: var(--brand-accent-color);
  --top-nav-dwe-button-border-color: var(--gray-medium);
  --top-nav-dwe-button-border-hover-color: var(--brand-accent-color);
  --top-nav-dwe-button-font-color: var(--black);
  --top-nav-dwe-button-font-hover-color: var(--white);

}


/* ========================================================= */
/* ===  Cart Icon and Counter Styling ==================== */
/* ========================================================= */

.custom-cart-icon {
  display: flex;
  flex-direction: row;
  margin: 0 10px;
  cursor: pointer;
}

.custom-cart-icon span.label {
  margin: 0 !important;
}

.custom-cart-icon .et_pb_module.dwe_mini_cart {
  display: flex;
  flex-direction: row;
}

@media all and (max-width: 820px) {
  .custom-cart-icon {
    flex-direction: column;
  }

  .custom-cart-icon .et_pb_module.dwe_mini_cart {
    flex-direction: column;
  }

  .custom-cart-icon .dwe_mini_cart_outer_wrap {
    padding-top: 1px;
  }
}

.custom-cart-icon span.et-pb-icon.dwe_mini_cart_icon {
  font-size: 18px !important;
  transition: all 500ms ease;
}

.custom-cart-icon:hover span.et-pb-icon.dwe_mini_cart_icon {
  color: var(--top-nav-dwe-cart-icon-hover-color);
}

.custom-cart-icon .dwe_mini_cart .dwe_mini_cart_product_count {
  transition: all 500ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 3px;
  right: 12px;
  font-size: 9px;
  line-height: 1;
  font-family: 'Mulish', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 900;
}

@media all and (max-width: 820px) {
  .custom-cart-icon .dwe_mini_cart .dwe_mini_cart_product_count {
    top: 3px;
    right: 9px;
  }
}


/* ========================================================= */
/* ===  Mini Cart Drawer Styling ========================= */
/* ========================================================= */

.dwe_mini_cart_wrapper:before {
  content: '';
  position: absolute;
  top: -8px;
  left: calc(50% - 8px);
  margin: 0 auto;
  width: 0;
  height: 0;
  border-bottom: 8px solid var(--top-nav-dwe-arrow-color);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  transition: opacity 80ms linear;
}

.dwe_mini_cart_items {
  border: solid var(--top-nav-dwe-item-border-color);
  border-width: 0 0 1px 0;
  padding: 0 0 15px 0;
}

.dwe_mini_cart_product_thumbnail_wrapper a {
  margin: auto;
}

.dwe_mini_cart_product_content_wrapper {
  margin-left: 10px;
}

.dwe_mini_cart_item {
  align-items: center;
  grid-column-gap: 0px;
}

.dwe_mini_cart_item .dwe_mini_cart_remove_from_cart_button,
a.dwe_mini_cart_remove_from_cart_button,
.et-db #et-boc .et-l a.dwe_mini_cart_remove_from_cart_button {
  color: var(--top-nav-dwe-item-remove-button-color);
}

.dwe_mini_cart_item .dwe_mini_cart_remove_from_cart_button:hover,
a.dwe_mini_cart_remove_from_cart_button:hover,
.et-db #et-boc .et-l a.dwe_mini_cart_remove_from_cart_button:hover {
  color: var(--top-nav-dwe-item-remove-button-hover-color);
}

.dwe_mini_cart_module .dwe_mini_cart_product_name,
h2.dwe_mini_cart_product_name,
.et-db #et-boc .et-l h2.dwe_mini_cart_product_name {
  padding: 0 0 5px 0;
  font-size: 12px;
  font-weight: 700;
  text-indent: -0.82em;
}

.dwe_mini_cart_module .dwe_mini_cart_product_name:hover {
  color: var(--top-nav-dwe-item-product-name-hover-color) !important;
}

.dwe_mini_cart_module .dwe_mini_cart_buttons {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.dwe_mini_cart_module .dwe_mini_cart_buttons .dwe_mini_cart_button {
  border: solid var(--top-nav-dwe-button-border-color);
  margin: 10px 1px;
  color: var(--top-nav-dwe-button-font-color);
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  line-height: 2em !important;
  border-width: 2px 1px !important;
  letter-spacing: 0.5px;
  background-color: var(--top-nav-dwe-button-bg-color);
  font-size: 13px;
  width: 100%;
  text-align: center;
  transition: all 500ms ease;
}

.et-db #et-boc .et-l .et_pb_button:after,
.et-db #et-boc .et-l .et_pb_button:before {
  display: none !important;
}

.dwe_mini_cart_module .dwe_mini_cart_buttons .dwe_mini_cart_button.dwe_view_cart_button {
  border-radius: 5px 0px 0px 5px !important;
}

.dwe_mini_cart_module .dwe_mini_cart_buttons .dwe_mini_cart_button.dwe_mini_cart_checkout_button {
  border-radius: 0px 5px 5px 0px !important;
}

.dwe_mini_cart_module .dwe_mini_cart_buttons .dwe_mini_cart_button:hover {
  color: var(--top-nav-dwe-button-font-hover-color);
  background-color: var(--top-nav-dwe-button-bg-hover-color);
  border-color: var(--top-nav-dwe-button-border-hover-color);
}

.dwe_mini_cart_module .dwe_mini_cart_total {
  margin-top: 15px;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 11px;
}

.dwe_mini_cart_module .dwe_mini_cart_total strong {
  font-weight: 800;
}

@media all and (max-width: 820px) and (min-width: 769px) {
  .custom-cart-icon .dwe_mini_cart_wrapper {
    width: 65vw;
    left: 12px;
    top: calc(2.4em + var(--top-offset, 0px));
  }
}

@media all and (max-width: 768px) {
  .custom-cart-icon .dwe_mini_cart_wrapper {
    width: 90vw;
    left: -12px;
    top: calc(2.05em + var(--top-offset, 0px));
  }
}