/**=====================
    cart css
==========================**/
.add_to_cart {
  position: fixed;
  background-color: $white;
  z-index: 1200;
  transition: all 0.5s ease;

  .sidebar-title {
    padding: 0 calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320)));
    padding-bottom: calc(13px + (15 - 13) * ((100vw - 320px) / (1920 - 320)));
    width: 100%;
    text-align: right;

    a {
      color: var(--theme-color);
      font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)));
      font-weight: 600;
    }
  }

  .delete-button {
    border: none;
    background-color: transparent;
    padding: 0;
  }

  ::-webkit-scrollbar {
    width: 3px;
    height: 7px;
  }

  ::-webkit-scrollbar-track {
    background: $round-border;
  }

  ::-webkit-scrollbar-thumb {
    background: $grey5;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: $grey2;
  }

  .cart-inner {
    background-color: $white;
    z-index: 9;
    position: relative;
    top: 0;

    .cart_media {
      /* خففنا قصّ العناصر */
      height: calc(100dvh - 220px);
      /* mobile-safe */
      overflow-y: auto;
      overflow-x: hidden;

      /* مهم: خليه padding-bottom أكبر لأن footer صار sticky */
      padding-bottom: 130px !important;

      @supports not (height: 100dvh) {
        height: calc(100vh - 220px);
      }

      .cart_product {
        display: block !important;
        width: 100% !important;
        overflow-y: visible !important;
        padding: 0 15px;
        padding-inline-start: 15px; // override browser default ul indent
        margin: 0;
        list-style: none;
        box-sizing: border-box;
      }

      // Cart product items — identical horizontal alignment for ALL items
      .cart_product>li {
        position: relative;
        width: 100%;
        padding: 15px 0;
        margin: 0;
        margin-inline-start: 0; // prevent browser default li indent
        display: block !important;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;

        @media (max-width: 575px) {
          padding: 12px 0;
        }

        &:first-child {
          padding-top: 0;
        }

        &:last-child {
          border-bottom: none;
        }

        .media {
          display: flex !important;
          align-items: flex-start;
          position: relative;
          gap: 12px;
          flex-wrap: nowrap;
          width: 100%;
          box-sizing: border-box;
          margin: 0;
          padding: 0;

          @media (max-width: 575px) {
            gap: 10px;
          }

          // Product image — fixed dimensions, no deviation
          >a {
            flex-shrink: 0;
            display: block;
            width: 80px;
            min-width: 80px;
            max-width: 80px;
            margin: 0;
            padding: 0;

            @media (max-width: 575px) {
              width: 65px;
              min-width: 65px;
              max-width: 65px;
            }

            >div {
              width: 100%;
              margin: 0;
              padding: 0;
            }
          }

          img {
            height: 80px;
            width: 80px;
            background-color: #f9f9f9;
            border: 1px solid #eee;
            max-width: 100%;
            object-fit: contain;
            display: block;
            border-radius: 4px;
            margin: 0;
            padding: 0;

            @media (max-width: 575px) {
              height: 65px;
              width: 65px;
            }
          }

          // Product details
          .media-body {
            flex: 1;
            min-width: 0;
            padding-right: 30px;
            display: flex;
            flex-direction: column;
            gap: 4px;

            @media (max-width: 575px) {
              padding-right: 25px;
              gap: 3px;
            }

            // Product name
            a {
              display: block;

              h4 {
                color: #333;
                font-weight: 500;
                font-size: 14px;
                line-height: 1.4;
                margin: 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 100%;

                @media (max-width: 575px) {
                  font-size: 13px;
                }
              }
            }

            // Price and size row
            .price-size-row {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              gap: 8px;
              margin: 2px 0;
            }

            .quantity {
              color: #555;
              font-weight: 600;
              font-size: 14px;
              line-height: 1;
              white-space: nowrap;
              flex-shrink: 0;
            }

            .gram {
              color: var(--theme-color);
              font-size: 12px;
              line-height: 1;

              &::before {
                content: "|";
                margin-right: 8px;
                color: #ddd;
              }
            }

            // Quantity controls - positioned at bottom
            .qty-box {
              position: relative;
              bottom: auto;
              right: auto;
              background-color: #f5f5f5;
              padding: 4px 8px;
              border: 1px solid #eee;
              border-radius: 4px;
              display: inline-flex;
              align-items: center;
              margin-top: 6px;
              width: fit-content;

              .input-group {
                display: flex;
                align-items: center;
                gap: 8px;

                .form-control {
                  width: 30px;
                  height: auto;
                  padding: 0;
                  border: none;
                  text-align: center;
                  background-color: transparent;
                  font-size: 14px;
                  font-weight: 500;

                  &::-webkit-inner-spin-button {
                    display: none;
                  }
                }

                span {
                  button {
                    z-index: 0;
                    border: none;
                    padding: 0;
                    background-color: transparent !important;
                    font-size: 16px;
                    color: #666;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 24px;
                    height: 24px;

                    &:hover {
                      color: var(--theme-color);
                    }
                  }
                }
              }
            }
          }

          // Edit/Delete buttons - top corner
          // NOTE: right/left positioning is in custom.css to avoid specificity issues with RTL
          .close-circle {
            position: absolute;
            top: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;

            button,
            a {
              width: 26px;
              height: 26px;
              background-color: #f5f5f5;
              border: 1px solid #eee;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              transition: all 0.2s ease;

              &:hover {
                background-color: #ffebee;
                border-color: #ffcdd2;
                color: #d32f2f;
              }
            }

            svg {
              font-size: 14px;
            }
          }
        }
      }

      // Cart total section
      .cart_total {
        border-top: 1px solid #eee;
        display: block !important;
        padding: 15px 15px 0;
        margin-top: 10px;
        list-style: none;
        box-sizing: border-box;

        li {
          display: block !important;
          width: 100% !important;
          min-height: auto !important;
          position: relative;
          float: none !important;
          padding: 0;
          margin: 0;
          border: none;

          &:first-child {
            border-top: none;
            padding-top: 0;
            margin-top: 0;
          }

          +li {
            margin: 0;
            padding-top: 12px;
            border-top: none;
          }
        }

        .total {
          width: -webkit-fill-available;
          display: block;
          padding: 0;
          margin-right: 10px;
          margin-left: 10px;

          h5 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin: 0;
            font-size: 16px;
            font-weight: 500;
            color: #333;

            span {
              font-weight: 700;
              color: var(--theme-color);
              font-size: 18px;
            }
          }
        }

        .buttons {
          width: 100%;
          display: flex;
          flex-direction: row;
          gap: 10px;
          margin-top: 0;

          @media (max-width: 400px) {
            flex-direction: column;
            gap: 8px;
          }

          a {
            flex: 1;
            text-align: center;
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 4px;
            color: $white;
            background-color: var(--theme-color);
            border: 1px solid var(--theme-color);
            transition: all 0.2s ease;
            white-space: nowrap;

            @media (max-width: 575px) {
              padding: 10px 15px;
              font-size: 13px;
            }

            &:hover {
              color: var(--theme-color);
              background-color: $white;
            }
          }
        }
      }
    }

    .cart_top {
      display: flex;
      padding: 15px;
      border-bottom: 1px solid #eee;
      margin-bottom: 10px;
      align-items: center;
      flex-shrink: 0;

      @media (max-width: 575px) {
        padding: 12px 15px;
      }

      h3 {
        font-size: 18px;
        color: #222;
        font-weight: 700;
        text-transform: unset;
        margin-bottom: 0;
        letter-spacing: unset;

        @media (max-width: 575px) {
          font-size: 16px;
        }
      }

      .close-cart {
        margin-left: auto;
        line-height: 1;
        width: 30px;
        height: 30px;
        background-color: #f5f5f5;
        border: 1px solid #eee;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          background-color: #ffebee;
        }

        svg {
          font-size: 18px;
          color: #333;
        }
      }
    }

    :not(.pere-text-box) {
      ~.cart_media {
        .empty-cart-box {
          height: 100%;
          @include flex_common;
        }
      }
    }

    .empty-cart-box {
      text-align: center;

      .icon {
        width: 50px;
        height: 50px;
        background-color: $top-header;
        border-radius: 100%;
        color: #6a6a6a;
        border: 1px solid $white-dark;
        @include flex_common;
        margin: 0 auto 4px;
      }

      h5 {
        margin: 0;
        font-weight: 500;
        font-size: 17px;
      }

      *:empty {
        display: unset;
      }
    }

    .pere-text-box {
      padding-inline: 15px;
      padding-bottom: 6px;
      border-bottom: 1px solid #eee;
      margin-bottom: 8px;

      p {
        font-size: 14px;
        text-transform: capitalize;
        line-height: 1.2;
      }

      .progress {
        display: block;
        margin-block: 8px;
        height: 6px;
        background-color: #e6e7e9;
        border-radius: 3px;
        position: relative;
        overflow: unset;

        .progress-bar {
          height: 6px;
          background-color: var(--theme-color);
          border-radius: 3px;
          position: relative;
          overflow: unset;
          max-width: 96%;
          min-width: 3%;

          &.bg-warning {
            .progress-icon {
              background-color: #ffc107;
            }
          }

          &.bg-danger {
            .progress-icon {
              background-color: #dc3545;
            }
          }

          .progress-icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: -12px;
            width: 24px;
            height: 24px;
            border-radius: 100%;
            @include flex_common;
            background-color: var(--theme-color);
            padding: 4px;
            color: $white;
            font-size: 14px;

            svg {
              color: $white;
            }
          }
        }
      }
    }
  }

  // Absolute positioned cart total at bottom
  .cart_total {
    position: relative;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    padding: 10px 15px;
    background-color: $white;
    display: block;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;

    li {
      display: block !important;
      width: 100% !important;
      list-style: none;
      padding: 0;
      margin: 0;
    }
  }

  .overlay {
    visibility: hidden;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // Use top/left/right/bottom: 0 instead of 100vw which includes scrollbar width
    width: auto;
    height: auto;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
    pointer-events: none;
  }

  &.open-side {
    transition: all 0.5s ease;

    .overlay {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
  }

  &.left {
    left: -390px;
    top: 0;
    height: 100vh;
    width: 390px;

    .cart-inner {
      height: 100vh;
      overflow: auto;
    }

    &.open-side {
      left: 0;
    }
  }

  &.right {
    right: -500px;
    height: 100vh;
    height: 100dvh;
    width: 420px;
    max-width: 90vw;
    top: 0;

    .cart-inner {
      height: 100vh;
      height: 100dvh;
      overflow: auto;
    }

    .empty-cart {
      height: calc(100vh - 80px);
      height: calc(100dvh - 80px);
    }

    &.open-side {
      right: 0;
    }

    // Tablet
    @media (max-width: 991px) {
      width: 380px;
    }

    // Mobile landscape
    @media (max-width: 767px) {
      width: 340px;
      max-width: 92vw;
    }

    // Mobile portrait - full width
    @media (max-width: 575px) {
      width: 100vw;
      max-width: 100vw;
      right: -100vw;

      &.open-side {
        right: 0;
      }
    }
  }

  &.top,
  &.bottom {
    height: 218px;
    width: 100%;

    .cart_media {
      display: flex;
      width: 100%;

      .cart_product {
        display: flex;
        width: 75%;
        overflow-y: auto;

        li {
          min-width: 245px;
          max-width: 225px;
          margin-right: 18px;
          padding-bottom: 0;
        }
      }

      .cart_total {
        width: 25%;
      }
    }

    .cart-inner {
      height: 218px;

      .cart_top {
        margin-bottom: 0;
        background-color: #fbfbfb;
        padding: 15px 44px;
        border-bottom: none;
      }

      .cart_media {
        padding: 0;

        .cart_product,
        .cart_total {
          padding: 30px 44px;
        }
      }
    }
  }

  &.top {
    top: -300px;

    &.open-side {
      top: 0;
    }
  }

  &.bottom {
    bottom: -300px;

    &.open-side {
      bottom: 0;
    }
  }
}

/* ================================================
   Cart z-index hierarchy (single source of truth)
   ================================================
   #cart_side  : 9999  (above all page content)
     .overlay  : 1     (behind cart-inner, but still
                         covers page via parent 9999)
     .cart-inner: 2    (above overlay)
   ================================================ */
#cart_side.add_to_cart {
  z-index: 9999 !important;

  .overlay {
    z-index: 1 !important;
  }

  .cart-inner {
    position: relative;
    z-index: 2 !important;
  }
}

/* Lock body scroll when cart is open */
body.cart-open {
  overflow: hidden !important;
  touch-action: none;
}

/* Keep cart summary pinned to the bottom in right cart sidebar */
#cart_side.add_to_cart.right {
  .cart-inner {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .cart-inner .cart_media {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
    padding-bottom: 0 !important;
  }

  .cart-inner .cart_media .cart_product {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  .cart-inner .cart_media .cart_total {
    flex-shrink: 0;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 3;
    background-color: $white;
    padding-bottom: 12px;
    max-width: 100%;
    box-sizing: border-box;
  }
}

.cart_qty_cls {
  background: var(--theme-color);
  width: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
  height: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
  color: $white;
  border-radius: 20px;
  text-align: center;
  font-size: calc(10px + (12 - 10) * ((100vw - 320px) / (1920 - 320)));
  line-height: 14px;
  font-weight: 600;
  top: 20%;
  right: calc(-5px + (-8 - -5) * ((100vw - 320px) / (1920 - 320)));
  padding: 3px;
  @include flex_common;
}