/* Offcanvas cart unified styles - aligned with handlevagn */
#offcanvas-menu-cart,
#offcanvas-menu-cart .offcanvas-header,
#offcanvas-menu-cart .offcanvas-body,
#offcanvas-menu-cart .list-cart,
#offcanvas-menu-cart .cart-item,
#offcanvas-menu-cart form,
#offcanvas-menu-cart .form-control,
#offcanvas-menu-cart .form-select,
#offcanvas-menu-cart .form-check,
#offcanvas-menu-cart .text-center,
#offcanvas-menu-cart .total-cart,
#offcanvas-menu-cart .div-delivery {
  background-color: #f1ebe0 !important;
}

/*
 * CRITICAL: Override Bootstrap 5 CSS custom properties for ALL buttons
 * EXCEPT the trash button (.remove-cart-item) and Se mer (.se-mer-btn / .btn-link).
 * Bootstrap uses --bs-btn-hover-color etc. internally, which override
 * normal CSS color rules. We must reset them here.
 */
#offcanvas-menu-cart .btn:not(.remove-cart-item):not(.btn-link):not(.btn-close),
#offcanvas-menu-cart .btn-primary:not(.remove-cart-item),
#offcanvas-menu-cart .btn-outline-primary:not(.remove-cart-item) {
  --bs-btn-color: #bf6d4b;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #bf6d4b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bf6d4b;
  --bs-btn-hover-border-color: #bf6d4b;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #bf6d4b;
  --bs-btn-active-border-color: #bf6d4b;
  --bs-btn-focus-shadow-rgb: 191, 109, 75;
  background: transparent !important;
  border: 2px solid #bf6d4b !important;
  color: #bf6d4b !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 12px 40px !important;
}

/* Extra spacing between menu name and Se mer button */
#offcanvas-menu-cart .selected-items {
  margin-top: 12px !important;
}

/* Se mer button: same style as other buttons but smaller padding */
#offcanvas-menu-cart .se-mer-btn {
  padding: 6px 16px !important;
  font-size: 0.8rem !important;
}

#offcanvas-menu-cart .btn:not(.remove-cart-item):not(.btn-link):not(.btn-close):hover,
#offcanvas-menu-cart .btn-primary:not(.remove-cart-item):hover,
#offcanvas-menu-cart .btn-outline-primary:not(.remove-cart-item):hover {
  background: #bf6d4b !important;
  background-color: #bf6d4b !important;
  color: #fff !important;
  border-color: #bf6d4b !important;
}

/* btn-link generic (non Se-mer links inside cart) */
#offcanvas-menu-cart .btn-link:not(.se-mer-btn) {
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: transparent;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-transform: none !important;
  font-weight: 600 !important;
  color: #bf6d4b !important;
}

#offcanvas-menu-cart .btn-link:not(.se-mer-btn):hover {
  color: #fff !important;
  background: transparent !important;
}

/*
 * Trash / remove button: icon-only, no border, no padding.
 * SVG stroke goes white on hover.
 */
#offcanvas-menu-cart .remove-cart-item,
#offcanvas-menu-cart button.remove-cart-item {
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  border: 2px solid #bf6d4b !important;
  background: transparent !important;
  padding: 8px !important;
  cursor: pointer;
  border-radius: 0 !important;
  color: #bf6d4b !important;
  text-transform: none !important;
  font-weight: normal !important;
}

#offcanvas-menu-cart .remove-cart-item:hover,
#offcanvas-menu-cart button.remove-cart-item:hover {
  background: #bf6d4b !important;
  background-color: #bf6d4b !important;
  border-color: #bf6d4b !important;
}

/* Make SVG inside trash button white on hover */
#offcanvas-menu-cart .remove-cart-item:hover svg,
#offcanvas-menu-cart button.remove-cart-item:hover svg {
  stroke: #fff !important;
}

/* Ensure consistent offcanvas width across pages */
#offcanvas-menu-cart {
  width: 800px !important;
}

/* Harmonize cart look (from menu-1 page) */
#offcanvas-menu-cart .offcanvas-header {
  border-bottom: none !important;
}

/* Mobile alignment to handlevagn styles */
@media (max-width: 991.98px) {

  #offcanvas-menu-cart,
  #offcanvas-menu-cart .offcanvas-body,
  #offcanvas-menu-cart .cart-item,
  #offcanvas-menu-cart .list-cart,
  #offcanvas-menu-cart .total-cart,
  #offcanvas-menu-cart .text-center {
    background-color: #f1ebe0 !important;
  }

  #offcanvas-menu-cart .cart-item {
    background: #f1ebe0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 15px 0 !important;
    margin: 0 0 15px 0 !important;
    border-bottom: 1px solid rgba(191, 109, 75, .35) !important;
  }

  #offcanvas-menu-cart .list-cart {
    list-style: none !important;
    padding-left: 0 !important;
  }

  #offcanvas-menu-cart .total-cart {
    color: #bf6d4b !important;
  }

  #offcanvas-menu-cart a {
    color: #000 !important;
    text-decoration: none !important;
  }

  #offcanvas-menu-cart .offcanvas-header {
    text-decoration: none !important;
  }
}

#offcanvas-menu-cart .list-cart .cart-item {
  border-bottom: 2px solid #bf6d4b !important;
  padding-bottom: 20px !important;
  margin-bottom: 20px !important;
}

#offcanvas-menu-cart .total-cart {
  color: #bf6d4b !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
  text-align: left !important;
  width: 100% !important;
  display: block !important;
}

/* Remove duplicate "Total:" text */
#offcanvas-menu-cart .total-cart::before {
  content: "";
}

/* Make all form labels green and uppercase */
#offcanvas-menu-cart label,
#offcanvas-menu-cart .form-label,
#offcanvas-menu-cart label.form-label {
  color: #b4ba93 !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Change people format and make green */
#offcanvas-menu-cart .text-muted {
  color: #b4ba93 !important;
}

/* Inputs styling */
#offcanvas-menu-cart .form-control,
#offcanvas-menu-cart .form-select {
  border: none !important;
  border-bottom: 2px solid #bf6d4b !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Sidecart form padding */
#offcanvas-menu-cart form {
  padding-top: 2vh !important;
}

/* Section headers in cart: orange text, no background/borders */
#offcanvas-menu-cart h6.text-primary.mb-1,
.cart-item h6.text-primary.mb-1,
.menu-items-detail h6.text-primary.mb-1 {
  background: transparent !important;
  color: #bf6d4b !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 0 6px 0 !important;
  display: block !important;
}

/* Force color on all Se mer buttons */
button[onclick^="toggleItemsDetail"],
.handlevagn-se-mer {
  color: #bf6d4b !important;
  text-decoration: none !important;
}

/* Handlevagn mobile-only fixes */
@media (max-width: 991.98px) {
  .container.handlevagn-container {
    background-color: #f1ebe0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .cart-separator {
    display: none !important;
  }
}