/* Final overrides for the mobile summary sheet and footer separation. */

/* `overflow-x: clip` instead of `hidden` so the page keeps a single scroll
   container (hidden on html+body creates a second one and makes scrolling
   jump/stick on mobile, and breaks position:sticky). */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* The two decorative blobs used `position:fixed` + `filter:blur(80px)`, which
   forces a full-screen repaint of a blurred layer on every scroll frame. A
   pre-blurred radial gradient looks the same and costs nothing. */
.mix-bg-blob {
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  will-change: auto;
}

.mix-blob-top {
  background-image: radial-gradient(circle closest-side, var(--mix-primary-light), transparent 100%) !important;
}

.mix-blob-bottom {
  display: none !important;
}

/* Radios are visually hidden; keep them 1px so clicking a card can't make the
   browser scroll the focused input into view. */
.mix-box-card-label,
.mix-group-tabs label {
  position: relative;
}

.mix-box-radio,
.mix-group-tabs input[type="radio"] {
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  inset: auto auto 0 0 !important;
  pointer-events: none;
}

.mix-summary-sidebar {
  z-index: 30;
}

.mix-summary-card {
  position: relative;
  z-index: 3;
  border: 1px solid rgba(234, 243, 228, .25);
  box-shadow: 0 28px 65px rgba(18, 31, 15, .5), 0 0 0 3px rgba(155, 197, 130, .32);
}

.mix-close-summary {
  display: none !important;
}

.mix-mobile-cart-toggle > i.fa-chevron-up,
.mix-mobile-cart-toggle > .fa-chevron-up {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mix-mobile-cart-toggle[aria-expanded="true"] > i.fa-chevron-up,
.mix-mobile-cart-toggle[aria-expanded="true"] > .fa-chevron-up,
body.mix-sheet-open .mix-mobile-cart-toggle > i.fa-chevron-up,
body.mix-sheet-open .mix-mobile-cart-toggle > .fa-chevron-up {
  transform: rotate(180deg);
}

.mix-selected-line {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: 9px;
}

.mix-selected-line img {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  object-fit: cover;
  background: #eaf3e4;
}

.mix-remove-item {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  color: #d8ebce;
  cursor: pointer;
}

.mix-remove-item:hover {
  background: #a8cb96;
  color: #20371b;
}

.mix-box-selector {
  margin-top: -36px;
  margin-bottom: 18px;
}

.mix-box-selector h2 {
  margin-bottom: 12px;
}

/*
 * A horizontal scroll carousel here used to clip the first card (e.g. "شیرینی خشک")
 * outside the visible box because it's wider than the row of items, and browsers
 * disagree on how `scrollLeft` works inside a `dir="rtl"` scroll container, which made
 * the clipped part unreachable in some browsers. Since there are only ever a handful
 * of boxes/groups, wrapping them instead of scrolling avoids that whole class of bug.
 */
.mix-box-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 4px 2px 12px;
}

.mix-group-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 4px 2px 12px;
}

.mix-group-tabs label {
  flex: 0 0 clamp(140px, 42vw, 210px);
  width: clamp(140px, 42vw, 210px);
  max-width: 100%;
}

.mix-group-tabs label > span {
  min-height: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 3px solid var(--mix-border);
  border-radius: 22px;
  background: var(--mix-card);
  box-shadow: var(--mix-shadow);
  text-align: center;
  cursor: pointer;
}

.mix-group-tabs label > span img,
.mix-group-tabs label > span i {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  object-fit: cover;
  background: var(--mix-primary-light);
  color: var(--mix-primary-hover);
  font-size: 2rem;
}

.mix-group-tabs input:checked + span {
  border-color: var(--mix-primary-hover);
  background: var(--mix-primary-light);
}

/* A tab that can't be combined with what is already in the box: still clickable,
   but switching to it empties the box. */
.mix-group-tabs label.mix-group-locked > span {
  opacity: .72;
  border-style: dashed;
}

.mix-group-hint {
  margin: 0 0 10px;
  text-align: center;
  font-size: .82rem;
  color: var(--mix-muted, #6a7a63);
}

.mix-box-card-label {
  flex: 0 0 clamp(140px, 42vw, 230px);
  max-width: 100%;
}

.mix-box-card {
  min-height: 138px !important;
  border-radius: 22px !important;
  padding: 14px 12px !important;
  gap: 5px !important;
}

.mix-box-card .mix-box-icon,
.mix-box-icon {
  width: 52px !important;
  height: 52px !important;
  font-size: 2rem !important;
  margin-bottom: 0 !important;
}

.mix-box-card h3 {
  margin: 0;
  font-size: .95rem !important;
}

.mix-box-card span,
.mix-box-card small {
  font-size: .74rem !important;
  line-height: 1.5;
}

@media (max-width: 850px) {
  .mix-type-selector .mix-group-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    width: 100%;
    max-width: 100%;
  }

  .mix-builder {
    padding-bottom: 180px;
  }

  .mix-summary-sidebar {
    position: fixed !important;
    inset: 0 !important;
    display: block;
    z-index: 1001 !important;
    padding: 18px 10px 86px;
    background: rgba(18, 31, 15, .72);
    backdrop-filter: blur(5px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .mix-summary-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .mix-summary-sidebar.mobile-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mix-summary-card {
    width: min(100%, 520px);
    margin: 0 auto;
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(8, 15, 6, .65), 0 0 0 2px rgba(155, 197, 130, .4);
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .mix-summary-card::-webkit-scrollbar,
  .mix-selected-items::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .mix-mobile-cart-toggle {
    z-index: 1002 !important;
    box-shadow: 0 -8px 28px rgba(18, 31, 15, .45), 0 0 0 2px rgba(155, 197, 130, .35);
  }
}