/* =========================================================
   MINI CART – FINAL CLEAN FILE (FIXED)
   Overlay + Popup + Header + Scroll + Items + Subtotal + CTA
   ========================================================= */


/* ================= OVERLAY ================= */
#mg-cart-overlay{
  position: fixed;
  inset: 0;
  background: rgba(10,20,50,.25);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 99998;
}
#mg-cart-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}


/* ================= POPUP ================= */
#mg-floating-cart{
  position: fixed;
  width: min(420px, calc(100vw - 24px));
  max-height: 75vh;

  display: flex;
  flex-direction: column;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.40);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  backdrop-filter: blur(22px) saturate(160%);

  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition: opacity .16s ease,
              transform .18s cubic-bezier(.2,1.4,.25,1);

  z-index: 99999;
  overflow: hidden;
}
#mg-floating-cart.is-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}


/* ================= HEADER ================= */
.mg-cart-header{
  position: relative;
  padding: 16px 48px 16px 16px;
  display: flex;
  align-items: center;
}

.mg-cart-header span{
  font-size: 18px;
  font-weight: 800;
  color: #0b1a39;
}

/* Close X */
.mg-cart-close{
  position: absolute;
  top: 10px;
  right: 12px;

  background: none;
  border: none;

  font-size: 22px;
  font-weight: 700;
  color: #0b1a39;

  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.mg-cart-close:hover{ opacity: .6; }


/* ================= INNER FLEX BOX ================= */
#mg-floating-cart .mg-cart-box{
  flex: 1;
  min-height: 0;        /* REQUIRED FOR SCROLL */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


/* ================= SCROLL AREA ================= */
#mg-floating-cart .mg-cart-content{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;

  padding: 0 0 12px;
  box-sizing: border-box;

  overscroll-behavior: contain;

  /* Prevent width jump when scrollbar appears */
  scrollbar-gutter: stable;
}

/* Scrollbar */
#mg-floating-cart .mg-cart-content::-webkit-scrollbar{
  width: 8px;
}
#mg-floating-cart .mg-cart-content::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}


/* ================= FORCE RESET WOO DEFAULTS ================= */
#mg-floating-cart ul.woocommerce-mini-cart,
#mg-floating-cart li.woocommerce-mini-cart-item{
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box;
}


/* ================= LIST ================= */
#mg-floating-cart ul.woocommerce-mini-cart{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* ================= ITEM ================= */
.mg-mini-item{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;

  padding: 12px 16px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  box-sizing: border-box;
  overflow: hidden;

  border-radius: 16px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(255,255,255,.35);
}


/* ================= LEFT SIDE ================= */
.mg-mini-left{
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.mg-mini-thumb{
  flex-shrink: 0;
  display: block;
}
.mg-mini-thumb img{
  width: 46px;
  height: 46px;
  object-fit: contain;
  background: #fff;
  padding: 6px;
  border-radius: 12px;
  display: block;
}

.mg-mini-info{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mg-mini-title{
  font-size: 13px;
  font-weight: 700;
  color: #0b1a39;
  text-decoration: none;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mg-mini-qty{
  font-size: 12px;
  font-weight: 600;
  color: rgba(11,26,57,.65);
}


/* ================= RIGHT SIDE ================= */
.mg-mini-right{
  display: flex;
  align-items: center;
  gap: 10px;

  flex-shrink: 0;
  white-space: nowrap;
}

.mg-mini-price{
  font-size: 13px;
  font-weight: 800;
  color: #0b1a39;
}


/* Remove button */
.mg-mini-remove{
  width: 34px;
  height: 34px;
  border-radius: 12px;

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

  background: rgba(255,90,90,.12);
  color: #ff5a5a !important;
  text-decoration: none;
  font-size: 0;
}
.mg-mini-remove::after{
  content: "\f2ed";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
}
.mg-mini-remove:hover{
  background: rgba(255,90,90,.18);
}


/* ================= SUBTOTAL ================= */
.mg-mini-subtotal{
  margin: 0 16px;
  padding: 12px 0 10px;

  border-top: 1px solid rgba(0,0,0,.08);

  display: flex;
  justify-content: space-between;

  font-size: 14px;
  font-weight: 800;
  color: #0b1a39;
}


/* ================= CTA ================= */
.mg-cart-main-btn{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 320px;
  margin: 14px auto 16px;

  padding: 14px 20px;
  border-radius: 999px;

  background: linear-gradient(135deg,#238CFF,#5b7dff);
  color: #fff !important;

  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-decoration: none;

  box-shadow: 0 6px 18px rgba(35,140,255,.45);
}
.mg-cart-main-btn:hover{
  filter: brightness(1.05);
  box-shadow: 0 10px 28px rgba(35,140,255,.6);
}