/* ==========================================================
   Popup mini-cart (icon giỏ hàng trên header, desktop `.romar-icons` VÀ
   mobile `.romar-icons-mobile`) - KHÔNG có node Figma thiết kế sẵn cho popup
   này (đã kiểm tra qua Figma MCP: chỉ có khung placeholder trắng rỗng + 1 nút
   "Thanh toán", không có layout sản phẩm thật - xem inc/mini-cart-functions.php).
   Tự dựng bằng cách tái dùng ĐÚNG token đã chuẩn hoá toàn site:
   - Màu: var(--romar-teal-dark)/var(--romar-teal) (khai báo sẵn trong style.css)
   - Font: Anuphan (đã @font-face sẵn trong style.css, áp dụng toàn site)
   - Bo góc + kiểu nút pill: cùng ngôn ngữ với .romar-cart-checkout-btn/
     .romar-cart-table .actions .button (cart.css) - chỉ thu nhỏ kích thước cho
     vừa khung popup, không đổi kiểu dáng.
   - Thumbnail tròn + nút xoá tròn: đúng pattern .romar-cart-table đã dùng ở
     trang Giỏ hàng thật.
   ========================================================== */

.romar-mini-cart{ position:relative; }

.romar-mini-cart-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  line-height:0;
}
.romar-mini-cart-toggle img{ display:block; }

/* Badge số lượng - tái dùng màu nhấn CTA (--romar-amber) đã dùng cho nút "Mua
   ngay" ở Hero, để nổi bật rõ trên nền icon teal/trắng của header. */
.romar-mini-cart-count{
  position:absolute;
  top:-6px;
  right:-8px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:9px;
  background:var(--romar-amber);
  color:#1a1a1a;
  font-family:'Anuphan', sans-serif;
  font-weight:700;
  font-size:11px;
  line-height:18px;
  text-align:center;
}
.romar-mini-cart-count:empty{ display:none; }

/* Popup - căn theo icon (icon nằm bên phải header nên popup mở sang trái để
   không tràn ra ngoài viewport, đúng hành vi dropdown chuẩn). */
.romar-mini-cart-panel{
  position:absolute;
  top:calc(100% + 14px);
  right:0;
  width:360px;
  max-width:calc(100vw - 32px);
  max-height:min(70vh, 520px);
  overflow-y:auto;
  background:#FFFFFF;
  border:1px solid var(--romar-teal-pale, #72A7B0);
  border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.16);
  padding:20px;
  z-index:1050;
  font-family:'Anuphan', sans-serif;
}
.romar-mini-cart-panel[hidden]{ display:none; }
/* Reset - `.romar-icons img{width:40px;height:40px}`/`.romar-icons-mobile img{...}`
   (style.css) áp dụng cho MỌI <img> con cháu của `.romar-icons`/`.romar-icons-mobile`,
   kể cả ảnh sản phẩm bên trong popup (popup nằm lồng bên trong 2 khối đó) -
   reset về kích thước tự nhiên trước khi áp lại kích thước riêng cho từng ảnh
   trong popup (`.romar-mini-cart-item-thumb img` bên dưới). */
.romar-mini-cart-panel img{ width:auto; height:auto; }

.romar-mini-cart-list{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.romar-mini-cart-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.romar-mini-cart-item-thumb{ flex:0 0 auto; display:block; }
.romar-mini-cart-item-thumb img{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  background:#D9D9D9;
  display:block;
}
.romar-mini-cart-item-info{ flex:1 1 auto; min-width:0; }
.romar-mini-cart-item-name{
  display:block;
  color:var(--romar-teal-dark);
  font-weight:600;
  font-size:14px;
  line-height:1.4;
  text-decoration:none;
}
.romar-mini-cart-item-name:hover{ text-decoration:underline; }
.romar-mini-cart-item-info dl.variation{ margin:4px 0 0; font-size:12px; color:#666; }
.romar-mini-cart-item-qty{
  display:block;
  margin-top:4px;
  font-size:13px;
  color:#555;
}
.romar-mini-cart-item-remove{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#F2F2F2;
  color:var(--romar-teal-dark) !important;
  font-size:16px;
  line-height:1;
  text-decoration:none !important;
}
.romar-mini-cart-item-remove:hover{ background:var(--romar-teal-dark); color:#FFFFFF !important; }

.romar-mini-cart-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 16px;
  padding-top:16px;
  border-top:1px solid #EFEFEF;
  font-weight:700;
  font-size:16px;
  color:var(--romar-teal-dark);
}
.romar-mini-cart-total .woocommerce-Price-amount{ color:inherit; }

.romar-mini-cart-buttons{
  display:flex;
  gap:10px;
}
.romar-mini-cart-btn{
  flex:1 1 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 16px;
  border-radius:22px;
  font-family:'Anuphan', sans-serif;
  font-weight:600;
  font-size:14px;
  text-decoration:none !important;
  box-sizing:border-box;
  white-space:nowrap;
}
.romar-mini-cart-btn--outline{
  background:#FFFFFF;
  border:1px solid var(--romar-teal-dark);
  color:var(--romar-teal-dark) !important;
}
.romar-mini-cart-btn--outline:hover{ background:var(--romar-bg-soft); }
.romar-mini-cart-btn--filled{
  background:var(--romar-teal-dark);
  border:1px solid var(--romar-teal-dark);
  color:#FFFFFF !important;
}
.romar-mini-cart-btn--filled:hover{ background:#08414c; }

.romar-mini-cart-empty{
  margin:0;
  padding:24px 0;
  text-align:center;
  font-size:14px;
  color:#666;
}

@media (max-width:575.98px){
  /* Icon giỏ hàng mobile nằm sát mép phải header (`.romar-icons-mobile`) -
     neo popup theo `.romar-mini-cart` (vị trí icon) như desktop sẽ tràn ra
     ngoài mép trái màn hình (đã phát hiện qua screenshot thật, chữ bị cắt).
     Chuyển sang `position:fixed` neo theo viewport (không phụ thuộc vị trí
     icon) để luôn nằm gọn trong màn hình. */
  .romar-mini-cart-panel{
    position:fixed;
    top:76px;
    left:12px;
    right:12px;
    width:auto;
    max-width:none;
    max-height:min(70vh, 480px);
  }
}