/**
 * Tenbit Addon - Cart Sidebar Widget Styles
 * Author: Team Tenbit Solution
 * Website: tenbitsol.com
 */

:root {
  --tenbit-brand-red: #c91818;
  --tenbit-brand-red-hover: #a81212;
  --tenbit-brand-dark: #0f1013;
  --tenbit-brand-dark-card: #14151a;
  --tenbit-brand-black: #0c0d10;
  --tenbit-border-dark: rgba(255, 255, 255, 0.08);
  --tenbit-border-hover: rgba(255, 255, 255, 0.16);
  --tenbit-text-light: #9ca3af;
  --tenbit-text-white: #ffffff;
  --tenbit-gold-accent: #e5a93b;
  --tenbit-green-accent: #10b981;
  --tenbit-radius-sm: 4px;
  --tenbit-radius-md: 8px;
  --tenbit-radius-full: 9999px;
  --tenbit-transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tenbit-cart-sidebar-widget-wrapper {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  font-family: inherit;
}

.tenbit-cart-sidebar-widget-wrapper * {
  box-sizing: border-box;
}

/* ==========================================================================
   TRIGGER ICON BUTTON & COUNT BADGE
   ========================================================================== */
.tenbit-cart-trigger-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: var(--tenbit-radius-full) !important;
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1f2937 !important;
  cursor: pointer !important;
  transition: var(--tenbit-transition) !important;
  position: relative !important;
  padding: 0 !important;
  outline: none !important;
}

.tenbit-cart-trigger-btn:hover {
  background: var(--tenbit-brand-red) !important;
  border-color: var(--tenbit-brand-red) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.tenbit-cart-trigger-btn svg {
  width: 19px !important;
  height: 19px !important;
  stroke: currentColor !important;
  pointer-events: none !important;
}

.tenbit-cart-count-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  background: var(--tenbit-brand-red) !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(201, 24, 24, 0.4) !important;
  line-height: 1 !important;
}

/* ==========================================================================
   DRAWER MODAL BACKDROP
   ========================================================================== */
.tenbit-cart-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.tenbit-cart-drawer-backdrop.open {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================================
   DRAWER PANEL
   ========================================================================== */
.tenbit-cart-drawer {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 380px !important;
  height: 100% !important;
  background: var(--tenbit-brand-black) !important;
  display: flex !important;
  flex-direction: column !important;
  color: #ffffff !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.6) !important;
  z-index: 1000000 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Direction: Right (Default) */
.tenbit-drawer-dir-right .tenbit-cart-drawer {
  right: 0 !important;
  border-left: 1px solid var(--tenbit-border-dark) !important;
  transform: translateX(100%) !important;
}

.tenbit-cart-drawer-backdrop.open .tenbit-cart-drawer {
  transform: translateX(0) !important;
}

/* Direction: Left */
.tenbit-drawer-dir-left .tenbit-cart-drawer {
  left: 0 !important;
  border-right: 1px solid var(--tenbit-border-dark) !important;
  transform: translateX(-100%) !important;
}

/* ==========================================================================
   DRAWER HEADER
   ========================================================================== */
.tenbit-cart-drawer-header {
  padding: 1.1rem 1.4rem !important;
  border-bottom: 1px solid var(--tenbit-border-dark) !important;
  background: #0e0f13 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  gap: 1rem !important;
}

.tenbit-drawer-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
}

.tenbit-cart-drawer-title {
  font-size: 1rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.tenbit-title-count-pill {
  background: var(--tenbit-brand-red) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tenbit-close-cart-btn {
  color: #9ca3af !important;
  font-size: 1.25rem !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: var(--tenbit-transition) !important;
  flex-shrink: 0 !important;
}

.tenbit-close-cart-btn:hover {
  background: var(--tenbit-brand-red) !important;
  border-color: var(--tenbit-brand-red) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   FREE SHIPPING GOAL PROGRESS BAR
   ========================================================================== */
.tenbit-shipping-progress-wrapper {
  padding: 0.65rem 1.4rem !important;
  background: rgba(16, 185, 129, 0.06) !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.12) !important;
}

.tenbit-shipping-progress-text {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #a7f3d0 !important;
  margin-bottom: 0.4rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  line-height: 1.3 !important;
}

.tenbit-shipping-progress-text strong {
  color: #ffffff !important;
}

.tenbit-shipping-progress-bar {
  width: 100% !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--tenbit-radius-full) !important;
  overflow: hidden !important;
}

.tenbit-shipping-progress-fill {
  height: 100% !important;
  background: #10b981 !important;
  border-radius: var(--tenbit-radius-full) !important;
  transition: width 0.3s ease !important;
}

/* ==========================================================================
   CART ITEMS BODY
   ========================================================================== */
.tenbit-cart-items-body {
  padding: 1rem 1.4rem !important;
  flex: 1 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  scrollbar-width: thin !important;
  position: relative !important;
}

.tenbit-cart-items-body::-webkit-scrollbar {
  width: 4px !important;
}

.tenbit-cart-items-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
}

/* ==========================================================================
   ITEM CARD
   ========================================================================== */
.tenbit-cart-item-card {
  background: var(--tenbit-brand-dark-card) !important;
  border: 1px solid var(--tenbit-border-dark) !important;
  border-radius: var(--tenbit-radius-md) !important;
  padding: 0.75rem 0.85rem !important;
  display: flex !important;
  gap: 0.85rem !important;
  align-items: center !important;
  position: relative !important;
  transition: var(--tenbit-transition) !important;
}

.tenbit-cart-item-card:hover {
  border-color: var(--tenbit-border-hover) !important;
  background: #181a20 !important;
}

.tenbit-cart-item-thumb {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--tenbit-radius-sm) !important;
  overflow: hidden !important;
  background: #1a1b22 !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.tenbit-cart-item-thumb img,
.tenbit-cart-item-thumb .tenbit-cart-item-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.tenbit-cart-item-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.tenbit-cart-item-name {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.tenbit-cart-item-desc {
  font-size: 0.72rem !important;
  color: var(--tenbit-text-light) !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tenbit-cart-item-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-top: 2px !important;
}

.tenbit-cart-item-price {
  font-size: 0.92rem !important;
  color: var(--tenbit-brand-red) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Quantity Stepper (+ / -) */
.tenbit-cart-qty-stepper {
  display: inline-flex !important;
  align-items: center !important;
  background: #0a0b0e !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--tenbit-radius-sm) !important;
  overflow: hidden !important;
  height: 24px !important;
}

.tenbit-qty-btn {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  width: 22px !important;
  height: 100% !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background 0.15s !important;
}

.tenbit-qty-btn:hover {
  background: var(--tenbit-brand-red) !important;
}

.tenbit-qty-val {
  padding: 0 4px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  min-width: 18px !important;
  text-align: center !important;
  line-height: 1 !important;
}

.tenbit-remove-cart-item-btn {
  background: none !important;
  border: none !important;
  color: #ef4444 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: var(--tenbit-transition) !important;
  opacity: 0.75 !important;
  margin-left: 4px !important;
}

.tenbit-remove-cart-item-btn:hover {
  opacity: 1 !important;
  transform: scale(1.2) !important;
}

/* ==========================================================================
   EMPTY CART STATE
   ========================================================================== */
.tenbit-empty-cart-state {
  text-align: center !important;
  padding: 2.5rem 1rem !important;
  color: var(--tenbit-text-light) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
}

.tenbit-empty-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6b7280 !important;
}

.tenbit-empty-cart-msg {
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ==========================================================================
   DRAWER FOOTER
   ========================================================================== */
.tenbit-cart-drawer-footer {
  padding: 1.15rem 1.4rem !important;
  border-top: 1px solid var(--tenbit-border-dark) !important;
  background: #0e0f13 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  flex-shrink: 0 !important;
}

.tenbit-cart-subtotal-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.tenbit-cart-subtotal-val {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
}

.tenbit-shipping-perk-badge {
  font-size: 0.74rem !important;
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: var(--tenbit-radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-weight: 700 !important;
}

.tenbit-cart-checkout-btn {
  height: 46px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--tenbit-brand-red) !important;
  color: #ffffff !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--tenbit-radius-sm) !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--tenbit-transition) !important;
  box-shadow: 0 4px 15px rgba(201, 24, 24, 0.3) !important;
}

.tenbit-cart-checkout-btn:hover {
  background: var(--tenbit-brand-red-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(201, 24, 24, 0.4) !important;
}

.tenbit-view-full-cart-link {
  text-align: center !important;
  display: block !important;
  color: #9ca3af !important;
  font-size: 0.78rem !important;
  text-decoration: underline !important;
  transition: color 0.2s !important;
  font-weight: 600 !important;
}

.tenbit-view-full-cart-link:hover {
  color: #ffffff !important;
}

/* Generic Button helpers */
.tenbit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.65rem 1.25rem !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--tenbit-radius-sm) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: var(--tenbit-transition) !important;
}

.tenbit-btn-primary {
  background: var(--tenbit-brand-red) !important;
  color: #ffffff !important;
}

.tenbit-btn-primary:hover {
  background: var(--tenbit-brand-red-hover) !important;
}

.tenbit-btn-block {
  width: 100% !important;
}