/* =========================================
   Header Cart Dropdown (Mini Cart) — Premium (FINAL REPLACE)
   File: assets/css/header-cart.css

   Requirements:
   - Badge: 0 items = BLACK, >0 items = GREEN + WHITE text
   - No "loading" UI in CSS (JS prefetch handles instant render)
   - Premium item layout + strong fallbacks for Woo default mini-cart HTML
   - ✅ Mobile/Tablet: panel center open (fixed)
   - ✅ Buttons: brand orange + white, hover dark
========================================= */

.stm-cart{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* =========================
   Toggle
========================= */
.stm-cart__toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;
  border-radius: 14px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.12);

  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .14s ease, transform .14s ease;
}
.stm-cart__toggle:hover{ border-color: rgba(0,0,0,.22); }
.stm-cart__toggle:active{ transform: translateY(1px); }

/* Icon (inline svg) */
.stm-cart__icon{
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 18px !important;
}
.stm-cart__icon svg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  color: #111 !important;
}

.stm-cart__total{
  font-size: 13px;
  font-weight: 900;
  color: #111;
  white-space: nowrap;
  pointer-events: none;
}

/* =========================
   Badge (BLACK -> GREEN)
========================= */
.stm-cart__badge{
  position: absolute;
  top: -6px;
  right: -6px;

  min-width: 18px;
  height: 18px;
  padding: 0 6px;

  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;

  background: #111;
  color: #fff;

  pointer-events: none;
}

/* ✅ Active badge (green) — works if JS toggles .is-active on wrapper */
.stm-cart.is-active .stm-cart__badge{
  background: #19a33a;
  color: #fff;
}

/* =========================
   Panel
========================= */
.stm-cart__panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  width: 390px;
  max-width: calc(100vw - 24px);

  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  overflow: hidden;

  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;

  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index: 99999;
}
.stm-cart.is-open .stm-cart__panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ✅ Mobile/Tablet: center open (fixed, no drift, size SAME) */
@media (max-width: 1023px){
  .stm-cart__panel{
    position: fixed;
    left: 50%;
    right: auto;
    top: 86px; /* header ke niche safe */
    transform: translateX(-50%) translateY(10px);
  }
  .stm-cart.is-open .stm-cart__panel{
    transform: translateX(-50%) translateY(0);
  }
}

/* If [hidden] attribute appears anywhere */
.stm-cart__panel[hidden]{ display: none !important; }

/* =========================
   Head
========================= */
.stm-cart__head{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.stm-cart__title{
  font-size: 14px;
  font-weight: 950;
  color: #111;
}

.stm-cart__view{
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  color: #111;
  opacity: .8;
}
.stm-cart__view:hover{ opacity: 1; text-decoration: underline; }

/* =========================
   Body
========================= */
.stm-cart__body{ padding: 10px 16px 12px; }

.stm-cart__empty{
  font-size: 13px;
  color: rgba(0,0,0,.70);
  padding: 10px 0;
}

/* Ensure JS list starts clean (no “Loading” block styles needed) */
.stm-cart__loading{ display: none !important; }

/* =========================
   Premium list (JS markup)
========================= */
.stm-cart__list{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  gap: 12px;

  max-height: 310px; /* ~5 items then scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.stm-cart__list::-webkit-scrollbar{ width: 10px; }
.stm-cart__list::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.95);
}

.stm-cart__item{
  display: grid;
  grid-template-columns: 56px minmax(0,1fr) 32px;
  gap: 12px;
  align-items: start;

  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.01);
}
.stm-cart__item:hover{ background: rgba(0,0,0,.03); }

.stm-cart__thumb{
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
}
.stm-cart__thumb img{
  width: 56px !important;
  height: 56px !important;
  object-fit: cover !important;
  display: block !important;
}

.stm-cart__meta{ min-width: 0; }

/* ✅ title clamp (3 lines) */
.stm-cart .stm-cart__name{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;

  overflow: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;

  text-decoration: none !important;
  color: #111 !important;

  font-size: 13px;
  font-weight: 900;
  line-height: 1.25 !important;

  max-height: calc(1.25em * 3) !important;
}
.stm-cart .stm-cart__name:hover{ text-decoration: underline !important; }

.stm-cart__line{
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  font-size: 12px;
  color: rgba(0,0,0,.65);
}
.stm-cart__qty{ white-space: nowrap; }
.stm-cart__price,
.stm-cart__lineTotal{
  font-weight: 950;
  color: #111;
  white-space: nowrap;
}

/* Remove button (premium) */
.stm-cart__remove{
  width: 32px;
  height: 32px;
  border-radius: 12px;

  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  cursor: pointer;

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

  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  color: #111;

  transition: border-color .14s ease, transform .14s ease, background .14s ease;
}
.stm-cart__remove:hover{
  border-color: rgba(0,0,0,.22);
  background: rgba(0,0,0,.02);
}
.stm-cart__remove:active{ transform: translateY(1px); }

/* =========================
   Footer
========================= */
.stm-cart__foot{
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: #fff;
}

.stm-cart__subtotal{
  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 13px;
  color: rgba(0,0,0,.70);
  margin-bottom: 10px;
}
.stm-cart__subtotal strong{
  color: #111;
  font-weight: 950;
}

.stm-cart__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ✅ Default buttons: BRAND ORANGE */
.stm-cart__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 11px 12px;
  border-radius: 14px;
  text-decoration: none;

  font-weight: 950;
  font-size: 13px;

  background: #ff7a00;
  border: 1px solid rgba(255,122,0,.85);
  color: #fff;

  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.stm-cart__btn:hover{
  background: #e86f00;
  border-color: #e86f00;
  opacity: 1;
}

/* Ghost button stays as-is (white) */
.stm-cart__btn--ghost{
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.14);
}
.stm-cart__btn--ghost:hover{
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.22);
}

/* ======================================================
   Woo default mini-cart fallback (if any plugin injects it)
====================================================== */
.stm-cart__panel .woocommerce-mini-cart{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  gap: 12px !important;

  max-height: 310px !important;
  overflow: auto !important;
}

.stm-cart__panel .woocommerce-mini-cart-item{
  display: grid !important;
  grid-template-columns: 56px minmax(0,1fr) 32px !important;
  gap: 12px !important;
  align-items: start !important;

  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: rgba(0,0,0,.01) !important;
}
.stm-cart__panel .woocommerce-mini-cart-item:hover{
  background: rgba(0,0,0,.03) !important;
}

.stm-cart__panel .woocommerce-mini-cart-item > a{
  text-decoration: none !important;
  color: #111 !important;
  min-width: 0 !important;
}

.stm-cart__panel .woocommerce-mini-cart-item img{
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  display: block !important;
  float: none !important;
  margin: 0 !important;
}

.stm-cart__panel .woocommerce-mini-cart-item .quantity{
  display: block !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  color: rgba(0,0,0,.65) !important;
}
.stm-cart__panel .woocommerce-mini-cart-item .quantity .amount{
  font-weight: 950 !important;
  color: #111 !important;
}

/* Clamp fallback title inside Woo mini cart link */
.stm-cart__panel .woocommerce-mini-cart-item > a:not(.remove){
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}

.stm-cart__panel a.remove{
  width: 32px !important;
  height: 32px !important;
  border-radius: 12px !important;

  border: 1px solid rgba(0,0,0,.10) !important;
  background: #fff !important;
  color: #111 !important;

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

  text-decoration: none !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
.stm-cart__panel a.remove:hover{
  border-color: rgba(0,0,0,.22) !important;
  background: rgba(0,0,0,.02) !important;
}

/* ======================================================
   Responsive
====================================================== */
@media (max-width: 640px){
  .stm-cart__toggle{ padding: 8px 10px; }
  .stm-cart__total{ display: none !important; }

  .stm-cart__panel{
    width: 360px;
    max-width: calc(100vw - 20px);
  }
}

@media (max-width: 480px){
  .stm-cart__panel{ top: 78px; }
}

@media (prefers-reduced-motion: reduce){
  .stm-cart__panel{ transition: none !important; }
  .stm-cart__toggle:active{ transform: none !important; }
  .stm-cart__remove:active{ transform: none !important; }
}