/* ==========================================================================
   PowerX Header Action Widgets (Wishlist, Account, Cart)
   Design Language: Kiosk24 Swiss Pill & Luxury Dark Cart
   ========================================================================== */

/* Container wrapper when placed in Elementor */
.elementor-widget-px-wishlist,
.elementor-widget-px-account,
.elementor-widget-px-cart {
  display: inline-flex;
  vertical-align: middle;
}

.elementor-widget-px-wishlist .elementor-widget-container,
.elementor-widget-px-account .elementor-widget-container,
.elementor-widget-px-cart .elementor-widget-container {
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   1. COMMON PILL BUTTON (WISHLIST & ACCOUNT)
   ========================================================================== */
.k24-btn-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--px-pill-padding, 8px 14px);
  border-radius: var(--px-radius-pill, 9999px);
  background: var(--px-pill-bg, #f8fafc);
  border-width: var(--px-pill-border-width, 1px);
  border-style: var(--px-pill-border-style, solid);
  border-color: var(--px-pill-border, #e2e8f0);
  color: var(--px-pill-text, #334155);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px var(--powerx-overlay-navy, rgba(15, 23, 42, 0.04));
}

.k24-btn-action-pill:focus,
.k24-btn-action-pill:active {
  outline: none;
}

.k24-btn-action-pill .pill-icon {
  width: var(--px-pill-icon-size, 18px);
  height: var(--px-pill-icon-size, 18px);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.k24-btn-action-pill .pill-label {
  display: inline-block;
  line-height: 1;
}

.k24-btn-action-pill:hover {
  background: var(--powerx-neutral-0, #ffffff);
  border-color: var(--powerx-neutral-200, #cbd5e1);
  color: var(--powerx-neutral-900, #0f172a);
  box-shadow: 0 4px 12px var(--powerx-overlay-navy, rgba(15, 23, 42, 0.08));
}

/* --- Favoriten (Wishlist) Custom Hover --- */
.k24-btn-fav:hover .pill-icon {
  stroke: var(--powerx-danger-500, #e11d48);
  fill: var(--powerx-color-alpha, rgba(225, 29, 72, 0.18));
  transform: scale(1.15);
}

/* Ruby Red Count Badge */
.k24-pill-badge {
  background: var(--powerx-danger-500, #e11d48);
  color: var(--powerx-neutral-0, #ffffff);
  font-size: 12px;
  font-weight: 800;
  padding: var(--px-pill-badge-padding, 2px 7px);
  border-radius: var(--px-pill-badge-radius, 9999px);
  min-width: var(--px-pill-badge-min-width, 19px);
  height: var(--px-pill-badge-height, 19px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 5px var(--powerx-color-alpha, rgba(225, 29, 72, 0.35));
  transition: transform 0.2s ease;
}

.k24-btn-fav:hover .k24-pill-badge {
  transform: scale(1.05);
}

/* --- Account Online Dot --- */
.k24-online-dot {
  width: 7px;
  height: 7px;
  background: var(--powerx-success-500, #10b981);
  border-radius: 50%;
  border: 1.5px solid var(--powerx-neutral-0, #ffffff);
  position: absolute;
  top: 9px;
  left: 25px;
  box-shadow: 0 0 0 1px var(--powerx-success-500, #10b981);
}

.k24-btn-account:hover .pill-icon {
  stroke: var(--powerx-primary-500, #2563eb);
}

/* ==========================================================================
   2. LUXURY DARK CART PILL (WARENKORB)
   ========================================================================== */
.k24-btn-cart-dark {
  background: var(--powerx-neutral-900, #0f172a);
  border-width: var(--px-cart-border-width, 1px);
  border-style: var(--px-cart-border-style, solid);
  border-color: var(--px-cart-border, #1e293b);
  color: var(--powerx-neutral-0, #ffffff);
  padding: var(--px-cart-padding, 8px 16px);
  border-radius: var(--px-radius-pill, 9999px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px var(--powerx-overlay-navy, rgba(15, 23, 42, 0.25));
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
}

.k24-btn-cart-dark:focus,
.k24-btn-cart-dark:active {
  outline: none;
}

.k24-btn-cart-dark .cart-icon-svg {
  width: var(--px-cart-icon-size, 19px);
  height: var(--px-cart-icon-size, 19px);
  stroke: var(--powerx-neutral-0, #ffffff);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.k24-btn-cart-dark:hover {
  background: var(--powerx-neutral-900, #1e293b);
  border-color: var(--powerx-neutral-800, #334155);
  box-shadow: 0 6px 20px var(--powerx-overlay-navy, rgba(15, 23, 42, 0.35));
  color: var(--powerx-neutral-0, #ffffff);
}

.k24-btn-cart-dark:hover .cart-icon-svg {
  transform: scale(1.12) rotate(-5deg);
}

.k24-cart-label {
  display: inline-block;
  line-height: 1;
}

.k24-cart-count {
  background: var(--powerx-danger-500, #e11d48);
  color: var(--powerx-neutral-0, #ffffff);
  font-size: 12px;
  font-weight: 800;
  padding: var(--px-cart-count-padding, 2px 8px);
  border-radius: var(--px-cart-count-radius, 9999px);
  min-width: var(--px-cart-count-min-width, 20px);
  height: var(--px-cart-count-height, 20px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px var(--powerx-color-alpha, rgba(225, 29, 72, 0.4));
}

.k24-cart-price-divider {
  color: var(--powerx-color-token, #38bdf8);
  font-weight: 900;
  font-size: 15px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: var(--px-cart-price-pad-left, 10px);
  letter-spacing: -0.2px;
  line-height: 1;
}

/* ==========================================================================
   3. RESPONSIVE / ADAPTIVE BEHAVIOR
   ========================================================================== */
@media (max-width: 1240px) {
  .k24-btn-action-pill .pill-label,
  .k24-btn-cart-dark .cart-label {
    display: none;
  }
  .k24-btn-action-pill {
    padding: var(--px-pill-pad-responsive, 8px 10px);
  }
  .k24-btn-cart-dark {
    padding: var(--px-cart-pad-responsive, 8px 12px);
  }
}