/* Bag drawer + notifications (Blumen design)
   Loaded on every page. The drawer (#mini-cart, footer.php) slides in from
   the inline start: the left in English, the right in Arabic. Its contents
   are woocommerce/cart/mini-cart.php; the toast is built by showNotification()
   in assets/js/woocommerce.js.
--------------------------------------------- */

/* Overlay + drawer shell
--------------------------------------------- */
.bluthe_cart_overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(11, 20, 32, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
.bluthe_cart_overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.bluthe_cart {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 9999;
  width: min(440px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--bl-cream);
  color: var(--bl-navy);
  font-family: var(--bl-serif);
  box-shadow: 0 0 0 1px var(--bl-line), 0 24px 60px rgba(11, 20, 32, 0.18);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.38s;
}
html[dir="rtl"] .bluthe_cart:not(.is-open) {
  transform: translateX(100%);
}
.bluthe_cart.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
/* The fragment wrapper WooCommerce swaps; it must fill the drawer. */
.bluthe_cart .widget_shopping_cart_content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* While an item is being removed WooCommerce blocks the drawer. */
.bluthe_cart .blockUI.blockOverlay {
  background: var(--bl-cream) !important;
  opacity: 0.55 !important;
}

/* Page lock while the drawer is open (position: fixed is what stops iOS). */
body.bluthe_cart-open {
  overflow: hidden;
  position: fixed;
  inset-inline: 0;
  width: 100%;
}

/* Head
--------------------------------------------- */
.bluthe_cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px 20px;
  border-bottom: 1px solid var(--bl-line);
}
.bluthe_cart__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--bl-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--bl-navy);
}
.bluthe_cart__count {
  font-size: 13px;
  color: var(--bl-text-muted);
  letter-spacing: 0.02em;
}
.bluthe_cart__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--bl-navy);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.bluthe_cart__close:hover {
  background: var(--bl-pill);
  border-color: var(--bl-line);
}

/* Items
--------------------------------------------- */
.bluthe_cart__items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: 4px 28px 12px;
  scrollbar-gutter: stable;
}
.bluthe_cart__item {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--bl-line);
}
.bluthe_cart__item:last-child {
  border-bottom: 0;
}
.bluthe_cart__thumb {
  flex: 0 0 78px;
  width: 78px;
  aspect-ratio: 4 / 5;
  background: var(--bl-panel);
  overflow: hidden;
}
.bluthe_cart__thumb a {
  display: block;
  height: 100%;
}
.bluthe_cart__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bluthe_cart__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bl-text-soft);
}
.bluthe_cart__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.bluthe_cart__name {
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--bl-navy);
  text-decoration: none;
}
a.bluthe_cart__name:hover {
  color: var(--bl-brown);
}
/* Attribute / personalisation lines WooCommerce prints for the item. */
.bluthe_cart__body dl.variation {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 8px;
  margin: 0;
  font-size: 12.5px;
  color: var(--bl-text-muted);
}
.bluthe_cart__body dl.variation dt,
.bluthe_cart__body dl.variation dd,
.bluthe_cart__body dl.variation p {
  margin: 0;
  font-weight: 400;
}
.bluthe_cart__qty {
  color: var(--bl-navy);
  font-size: 14px;
}
.bluthe_cart__qty .woocommerce-Price-amount {
  font-weight: 500;
}
/* The remove link comes from WooCommerce; reset the legacy pill look. */
.bluthe_cart .bluthe_cart__remove,
.bluthe_cart .remove_from_cart_button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: -3px 0 0;
  padding: 0;
  border: 1px solid rgba(22, 40, 63, 0.25);
  border-radius: 50%;
  background: transparent;
  color: var(--bl-text-muted);
  font-family: var(--bl-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.bluthe_cart .remove_from_cart_button:hover {
  color: var(--bl-cream);
  background: var(--bl-navy);
  border-color: var(--bl-navy);
}

/* Foot
--------------------------------------------- */
.bluthe_cart__foot {
  flex: 0 0 auto;
  padding: 20px 28px 28px;
  border-top: 1px solid var(--bl-line);
  background: var(--bl-cream);
}
.bluthe_cart__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: var(--bl-navy);
}
.bluthe_cart__amount {
  font-size: 18px;
  font-weight: 500;
}
.bluthe_cart__note {
  margin: 6px 0 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bl-text-muted);
}
.bluthe_cart__actions {
  display: grid;
  gap: 10px;
  margin: 0;
}
.bluthe_cart__actions .bluthe_btn {
  width: 100%;
}

/* Empty state
--------------------------------------------- */
.bluthe_cart__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 32px 56px;
  text-align: center;
}
.bluthe_cart__empty_icon {
  color: var(--bl-accent);
  margin-bottom: 10px;
}
.bluthe_cart__empty_title {
  margin: 0;
  font-size: 20px;
  color: var(--bl-navy);
}
.bluthe_cart__empty_text {
  max-width: 260px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bl-text-muted);
}

/* Notifications (toast)
--------------------------------------------- */
.bluthe_notifications_div {
  position: fixed;
  top: 24px;
  inset-inline-end: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.bluthe_notification {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  padding-inline-end: 44px;
  background: var(--bl-cream);
  color: var(--bl-navy);
  border: 1px solid var(--bl-line);
  border-inline-start: 3px solid var(--bl-accent);
  box-shadow: 0 14px 36px rgba(22, 40, 63, 0.14);
  font-family: var(--bl-serif);
  font-size: 14px;
  line-height: 1.45;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.bluthe_notification.show {
  opacity: 1;
  transform: none;
}
.bluthe_notification.hide {
  opacity: 0;
  transform: translateY(-10px);
}
.bluthe_notification.info {
  border-inline-start-color: var(--bl-navy);
}
.bluthe_notification.error {
  border-inline-start-color: #B4534B;
}
/* Icon: check (success), i (info), ! (error), drawn in the accent colour. */
.bluthe_notification::before {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: var(--bl-accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9.25' fill='none' stroke='black' stroke-width='1.3'/><path d='M6 10.3l2.7 2.7L14 7.6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9.25' fill='none' stroke='black' stroke-width='1.3'/><path d='M6 10.3l2.7 2.7L14 7.6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.bluthe_notification.info::before {
  background-color: var(--bl-navy);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9.25' fill='none' stroke='black' stroke-width='1.3'/><circle cx='10' cy='6.4' r='1' fill='black'/><path d='M10 9v5.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9.25' fill='none' stroke='black' stroke-width='1.3'/><circle cx='10' cy='6.4' r='1' fill='black'/><path d='M10 9v5.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>");
}
.bluthe_notification.error::before {
  background-color: #B4534B;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9.25' fill='none' stroke='black' stroke-width='1.3'/><path d='M10 5.5v5.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/><circle cx='10' cy='13.8' r='1' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9.25' fill='none' stroke='black' stroke-width='1.3'/><path d='M10 5.5v5.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/><circle cx='10' cy='13.8' r='1' fill='black'/></svg>");
}
.bluthe_notification__body {
  flex: 1 1 auto;
  min-width: 0;
}
.bluthe_notification__body a {
  color: var(--bl-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bluthe_notification__body ul,
.bluthe_notification__body li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bluthe_notification .close-btn {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bl-text-muted);
  font-family: var(--bl-serif);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.bluthe_notification .close-btn:hover {
  color: var(--bl-navy);
}

@media (max-width: 767px) {
  .bluthe_cart__head {
    padding: 20px 20px 16px;
  }
  .bluthe_cart__title {
    font-size: 21px;
  }
  .bluthe_cart__items {
    padding-inline: 20px;
  }
  .bluthe_cart__foot {
    padding: 16px 20px 24px;
  }
  /* Toasts sit at the bottom on phones, clear of the drawer's heading. */
  .bluthe_notifications_div {
    top: auto;
    bottom: 16px;
    inset-inline: 0;
    align-items: center;
    width: auto;
    padding: 0 12px;
  }
  .bluthe_notification {
    width: 100%;
    max-width: 480px;
    transform: translateY(10px);
  }
  .bluthe_notification.hide {
    transform: translateY(10px);
  }
}