/* UI/CRO V4 - Warenkorb-Drawer (de/_cart_drawer_v4.php) - 2026-09-29
   Nur geladen, wenn der Bereich "Warenkorb-Drawer" im Admin (/admin/ui_v4.php) aktiv ist. */

.v4-drawer { position: fixed; inset: 0; z-index: 2000; }
.v4-drawer[hidden] { display: none; }
.v4-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 38, 64, .45);
  opacity: 0;
  transition: opacity .25s ease;
}
.v4-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -12px 0 36px rgba(6, 38, 64, .18);
  transform: translateX(100%);
  transition: transform .25s ease;
  font-family: Inter, Arial, sans-serif;
  color: var(--ink, #142437);
}
.v4-drawer.is-open .v4-drawer-backdrop { opacity: 1; }
.v4-drawer.is-open .v4-drawer-panel { transform: none; }
html.v4-drawer-lock, html.v4-drawer-lock body { overflow: hidden; }
/* Schwebender Warenkorb-Button (z-index 9999) liegt sonst ueber dem Drawer */
html.v4-drawer-lock #floating-cart-btn { display: none !important; }
.v4-drawer-panel { text-align: left; }

.v4-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line, #dfe4e8);
}
.v4-drawer-title { margin: 0; font-weight: 700; color: var(--navy, #062640); font-size: 15px; }
.v4-drawer-title span { color: #2a8f4a; margin-right: 4px; }
.v4-drawer-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: var(--soft, #f3f4f5);
  color: var(--navy, #062640);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.v4-drawer-items { list-style: none; margin: 0; padding: 0 20px; flex: 1 1 auto; overflow-y: auto; }
.v4-drawer-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line, #dfe4e8);
}
.v4-drawer-item:last-child { border-bottom: 0; }
.v4-drawer-item.is-added { margin: 0 -20px; padding: 16px 20px; background: #fff7fb; }
.v4-drawer-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--soft, #f3f4f5); }
.v4-drawer-added {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pink, #ed0b87);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.v4-drawer-item img[hidden] { display: block; visibility: hidden; }
.v4-drawer-name { margin: 0 0 4px; font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--navy, #062640); }
.v4-drawer-meta { margin: 0 0 2px; font-size: 13px; color: var(--muted, #5e6976); }
.v4-drawer-price { margin: 0; font: 700 20px/1 "Barlow Condensed", Arial, sans-serif; color: var(--navy, #062640); white-space: nowrap; }

.v4-drawer-foot {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--line, #dfe4e8);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v4-drawer-sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.v4-drawer-sum strong { font: 700 24px/1 "Barlow Condensed", Arial, sans-serif; color: var(--navy, #062640); }
.v4-drawer-ship {
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff0f8;
  color: var(--pink, #e2007a);
  font-weight: 600;
  font-size: 13px;
}
.v4-drawer-ship[hidden] { display: none; }
.v4-drawer-ship-note { margin: -6px 0 0; font-size: 12px; color: var(--muted, #5e6976); }
.v4-drawer-ship-note[hidden] { display: none; }
.v4-drawer-foot form { margin: 0; }
.v4-drawer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  border-radius: 8px;
  font: 700 18px/1 "Barlow Condensed", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
}
.v4-drawer-btn--primary { border: 0; background: var(--pink, #ed0b87); color: #fff; }
.v4-drawer-btn--primary:hover { background: var(--pink-dark, #c90070); }
.v4-drawer-btn--secondary { border: 1px solid var(--navy, #062640); background: #fff; color: var(--navy, #062640); }
.v4-drawer-btn--secondary:hover { background: var(--navy, #062640); color: #fff; }
.v4-drawer-link {
  border: 0;
  background: none;
  padding: 6px;
  color: var(--muted, #5e6976);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .v4-drawer-backdrop, .v4-drawer-panel { transition: none; }
}