/* =========================================================
   MAX BUBBLE STICK
   B2B ENQUIRY CART
========================================================= */


/* =========================================================
   FLOATING ENQUIRY BUTTON
========================================================= */

.enquiry-cart-button {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 25;

  min-height: 52px;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 0 18px;

  border: 0;
  border-radius: 999px;

  background: var(--deep);
  color: #fff;

  cursor: pointer;

  font-family:
    "Nunito Sans",
    sans-serif;

  font-size: 12px;
  font-weight: 900;

  box-shadow:
    0 12px 28px rgba(74, 25, 50, .25);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.enquiry-cart-button:hover {
  background: var(--pink);

  transform:
    translateY(-3px);

  box-shadow:
    0 15px 32px rgba(74, 25, 50, .30);
}


.enquiry-cart-icon {
  font-size: 18px;
}


.enquiry-cart-count {
  min-width: 22px;
  height: 22px;

  padding: 0 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--yellow);
  color: var(--deep);

  font-size: 10px;
  font-weight: 900;
}


/* =========================================================
   CART BACKDROP
========================================================= */

.enquiry-cart {
  position: fixed;

  inset: 0;

  z-index: 40;
}


.enquiry-cart[hidden] {
  display: none;
}


.enquiry-cart-overlay {
  position: absolute;

  inset: 0;

  background:
    rgba(74, 25, 50, .48);

  backdrop-filter:
    blur(4px);

  opacity: 0;

  transition:
    opacity .25s ease;
}


.enquiry-cart.open
.enquiry-cart-overlay {
  opacity: 1;
}


/* =========================================================
   CART PANEL
========================================================= */

.enquiry-cart-panel {
  position: absolute;

  top: 0;
  right: 0;

  width: min(
    470px,
    100%
  );

  height: 100%;

  display: flex;
  flex-direction: column;

  background: #fff8fb;

  box-shadow:
    -18px 0 55px rgba(52, 16, 36, .20);

  transform:
    translateX(100%);

  transition:
    transform .3s cubic-bezier(.22,.61,.36,1);
}


.enquiry-cart.open
.enquiry-cart-panel {
  transform:
    translateX(0);
}


/* =========================================================
   HEADER
========================================================= */

.enquiry-cart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding: 28px 28px 22px;

  border-bottom:
    1px solid var(--line);

  background: #fff;
}


.enquiry-cart-header .kicker {
  margin-bottom: 5px;
}


.enquiry-cart-header h2 {
  margin: 0;

  font:
    800 34px / 1
    "Baloo 2",
    sans-serif;

  letter-spacing: -.03em;
}


.enquiry-cart-close {
  width: 38px;
  height: 38px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;

  background: #ffe5ef;
  color: var(--deep);

  cursor: pointer;

  font-size: 28px;
  line-height: 1;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}


.enquiry-cart-close:hover {
  background: var(--pink);
  color: #fff;

  transform:
    rotate(90deg);
}


/* =========================================================
   ITEMS AREA
========================================================= */

.enquiry-cart-items {
  flex: 1;

  overflow-y: auto;

  padding: 20px 24px;
}


/* =========================================================
   CART ITEM
========================================================= */

.enquiry-cart-item {
  position: relative;

  display: grid;

  grid-template-columns:
    76px 1fr;

  gap: 13px;

  padding: 14px;

  margin-bottom: 12px;

  border:
    1px solid var(--line);

  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 5px 14px rgba(150, 67, 103, .06);
}


.enquiry-cart-item-image {
  width: 76px;
  height: 76px;

  overflow: hidden;

  display: grid;
  place-items: center;

  border-radius: 14px;

  background: #ffe4ee;
}


.enquiry-cart-item-image img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


.enquiry-cart-item-image span {
  font-size: 32px;
}


.enquiry-cart-item-info {
  min-width: 0;

  padding-right: 25px;
}


.enquiry-cart-item-category {
  display: block;

  margin-bottom: 2px;

  color: #d94882;

  font-size: 8px;
  letter-spacing: .1em;
  font-weight: 900;

  text-transform: uppercase;
}


.enquiry-cart-item-name {
  margin: 0 0 8px;

  color: var(--deep);

  font:
    800 17px / 1.1
    "Baloo 2",
    sans-serif;
}


/* =========================================================
   REMOVE
========================================================= */

.enquiry-remove-item {
  position: absolute;

  top: 10px;
  right: 10px;

  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;

  border: 0;

  background: transparent;
  color: #b58b9e;

  cursor: pointer;

  font-size: 18px;

  border-radius: 50%;

  transition:
    background .2s ease,
    color .2s ease;
}


.enquiry-remove-item:hover {
  background: #ffe5ef;
  color: #d94882;
}


/* =========================================================
   QUANTITY AREA
========================================================= */

.enquiry-item-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;
}


.enquiry-item-quantity {
  display: flex;

  align-items: center;

  gap: 7px;
}


.enquiry-item-quantity-label {
  color: var(--muted);

  font-size: 9px;
  font-weight: 900;

  text-transform: uppercase;
}


.enquiry-qty-control {
  display: flex;

  align-items: center;

  border:
    1px solid var(--line);

  border-radius: 999px;

  overflow: hidden;

  background: #fff8fb;
}


.enquiry-qty-control button {
  width: 27px;
  height: 27px;

  border: 0;

  background: transparent;
  color: var(--deep);

  cursor: pointer;

  font-size: 16px;
  font-weight: 900;
}


.enquiry-qty-control button:hover {
  background: #ffe5ef;
}


.enquiry-qty-control span {
  min-width: 28px;

  text-align: center;

  color: var(--deep);

  font-size: 11px;
  font-weight: 900;
}


.enquiry-item-pieces {
  color: var(--muted);

  font-size: 9px;
  font-weight: 800;

  text-align: right;
}


/* =========================================================
   EMPTY CART
========================================================= */

.enquiry-cart-empty {
  flex: 1;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding: 30px;

  text-align: center;
}


.enquiry-cart-empty[hidden] {
  display: none;
}


.enquiry-empty-icon {
  width: 70px;
  height: 70px;

  margin-bottom: 15px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #ffe5ef;

  font-size: 30px;
}


.enquiry-cart-empty h3 {
  margin: 0 0 5px;

  font:
    800 25px / 1.1
    "Baloo 2",
    sans-serif;
}


.enquiry-cart-empty p {
  max-width: 300px;

  margin: 0 0 20px;

  color: var(--muted);

  font-size: 12px;
}


.enquiry-browse-button {
  padding: 11px 18px;

  border: 0;
  border-radius: 999px;

  background: var(--pink);
  color: #fff;

  cursor: pointer;

  font-family: inherit;

  font-size: 11px;
  font-weight: 900;
}


/* =========================================================
   SUMMARY
========================================================= */

.enquiry-cart-summary {
  padding: 20px 24px 24px;

  border-top:
    1px solid var(--line);

  background: #fff;
}


.enquiry-cart-summary[hidden] {
  display: none;
}


.enquiry-summary-row {
  display: flex;

  justify-content: space-between;

  padding: 5px 0;

  color: var(--muted);

  font-size: 11px;
  font-weight: 700;
}


.enquiry-summary-row strong {
  color: var(--deep);

  font-size: 12px;
}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.send-whatsapp-button {
  width: 100%;

  min-height: 52px;

  margin-top: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 20px;

  border: 0;
  border-radius: 999px;

  background: #1fa463;
  color: #fff;

  cursor: pointer;

  font-family: inherit;

  font-size: 12px;
  font-weight: 900;

  box-shadow:
    0 8px 18px rgba(31, 164, 99, .20);

  transition:
    transform .2s ease,
    background .2s ease;
}


.send-whatsapp-button:hover {
  background: #178a51;

  transform:
    translateY(-2px);
}


.send-whatsapp-button b {
  font-size: 18px;
}


/* =========================================================
   CLEAR BUTTON
========================================================= */

.clear-enquiry-button {
  width: 100%;

  margin-top: 10px;

  padding: 9px;

  border: 0;

  background: transparent;

  color: #b45d7d;

  cursor: pointer;

  font-family: inherit;

  font-size: 10px;
  font-weight: 900;

  text-decoration: underline;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 500px) {

  .enquiry-cart-button {
    right: 15px;
    bottom: 15px;

    min-height: 48px;

    padding: 0 15px;
  }


  .enquiry-cart-panel {
    width: 100%;
  }


  .enquiry-cart-header {
    padding:
      23px
      20px
      18px;
  }


  .enquiry-cart-header h2 {
    font-size: 30px;
  }


  .enquiry-cart-items {
    padding:
      15px;
  }


  .enquiry-cart-summary {
    padding:
      17px
      15px
      20px;
  }


  .enquiry-cart-item {
    grid-template-columns:
      65px 1fr;

    padding: 11px;
  }


  .enquiry-cart-item-image {
    width: 65px;
    height: 65px;
  }


  .enquiry-cart-item-name {
    font-size: 15px;
  }

}