/* === Mini-cart (drawer) — 2025 UX/WCAG polish ============================== */
:root {
  /* Kolory i tokeny UI */
  --accent:#2f6df6;
  --accent-strong:#1747d4;
  --ink:#0f172a;
  --ink-muted:#5b6b85;
  --danger:#ef4444;

  --surface:#ffffff;
  --surface-elev:#ffffff;
  --surface-subtle:#f7f8fb;

  --border: color-mix(in oklab, var(--ink) 10%, #fff);
  --border-soft: color-mix(in oklab, var(--ink) 6%, #fff);

  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, #fff);
  --shadow-lg: -24px 0 48px rgba(15,23,42,.2);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 8px rgba(15,23,42,.05);

  --radius: 14px;
  --radius-sm: 10px;
  --gap: 12px;

  --trans-fast: .18s cubic-bezier(.2,.6,.2,1);
  --trans-med:  .25s cubic-bezier(.2,.6,.2,1);

  /* Pasek stopki i CTA (subtelnie) */
  --footer-grad-start: color-mix(in oklab, var(--accent) 8%, #ffffff);
  --footer-grad-end:   #ffffff;

  /* CTA */
  --cta-grad-start:#2f6df6;
  --cta-grad-end:#1747d4;
  --cta-glow:0 8px 22px rgba(47,109,246,.28), 0 2px 6px rgba(23,71,212,.18);
  --cta-outline-glow:0 6px 18px rgba(15,23,42,.10);
}

@media (prefers-reduced-motion: reduce) {
  :root { --trans-fast: 0s; --trans-med: 0s; }
}

/* Root/overlay */
.tuto-minicart-root{ position:static; display:contents; }

.tuto-minicart-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  backdrop-filter:saturate(120%) blur(2px);
  opacity:0; pointer-events:none; transition:opacity var(--trans-fast);
  z-index:100000;
}
.tuto-minicart-overlay[data-open="1"]{ opacity:1; pointer-events:auto; }

/* Drawer */
.tuto-minicart{
  position:fixed; top:0; right:0; height:100dvh; width:min(92vw, 392px);
  display:flex; flex-direction:column;
  background:var(--surface); color:var(--ink);
  transform:translateX(100%); transition:transform var(--trans-med);
  box-shadow:var(--shadow-lg); z-index:100001; will-change:transform;
}
.tuto-minicart[data-open="1"]{ transform:none; }

/* Header (sticky) */
.tuto-minicart-header{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:14px 16px;
  background:#fff; border-bottom:1px solid var(--border-soft);
}
.tuto-minicart-header h2{ font-size:1.12rem; line-height:1.2; margin:0; font-weight:700; color:var(--ink); }
.tuto-minicart-close{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-size:1.25rem; line-height:1; color:var(--ink-muted);
  border-radius:12px; padding:6px;
  transition:transform var(--trans-fast), background-color var(--trans-fast), color var(--trans-fast);
}
.tuto-minicart-close:hover{ background:var(--surface-subtle); color:var(--ink); transform:scale(1.02); }
.tuto-minicart-close:focus-visible{ outline:none; box-shadow:var(--ring); }

/* Content */
.tuto-minicart-content{
  padding:10px 12px 14px;
  overflow:auto; flex:1; scrollbar-gutter:stable both-edges;
  background:linear-gradient(180deg, transparent 0, transparent 18px, var(--surface) 18px);
}
.tuto-minicart-empty{ padding:28px 16px; color:var(--ink-muted); text-align:center; font-size:.96rem; }

/* Scrollbar */
.tuto-minicart-content::-webkit-scrollbar{ width:10px; }
.tuto-minicart-content::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--ink) 18%, transparent);
  border:3px solid transparent; border-radius:999px; background-clip:padding-box;
}
.tuto-minicart-content::-webkit-scrollbar-track{ background:transparent; }

/* Lista i kafelki */
.tuto-minicart-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gap); }

.tuto-minicart-item{
  position:relative;
  display:grid; grid-template-columns:70px 1fr auto; gap:12px; align-items:center;
  padding:12px; background:var(--surface-elev);
  border:1px solid var(--border-soft); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform var(--trans-fast), box-shadow var(--trans-fast), border-color var(--trans-fast);
}
.tuto-minicart-item:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(47,109,246,.12);
  border-color: color-mix(in oklab, var(--accent) 28%, #e9eeff);
}

.tuto-minicart-thumb img{
  width:70px; height:70px; object-fit:cover; border-radius:12px; background:var(--surface-subtle);
}

.tuto-minicart-meta{ display:grid; gap:6px; min-width:0; }
.tuto-minicart-name{
  font-weight:700; color:var(--ink); text-decoration:none; line-height:1.25; display:inline-block;
}
.tuto-minicart-name:hover{ text-decoration:underline; }
.tuto-minicart-price{ color:var(--ink-muted); font-size:.95rem; }

/* Ilość */
.tuto-minicart-qty{ display:inline-flex; align-items:center; gap:8px; }
.tuto-qty-btn{
  width:32px; height:32px; border-radius:10px; border:1px solid var(--border);
  background:linear-gradient(#fff, #f6f8ff);
  cursor:pointer; font-size:1rem; line-height:1;
  transition:background-color var(--trans-fast), transform var(--trans-fast), border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.tuto-qty-btn:hover{
  background:linear-gradient(#fff, #eef4ff);
  border-color: color-mix(in oklab, var(--accent) 45%, #cfe0ff);
}
.tuto-qty-btn:active{ transform:translateY(1px); }
.tuto-qty-btn:focus-visible{ outline:none; box-shadow:var(--ring); }

.tuto-qty-input{
  width:56px; height:34px; border:1px solid var(--border);
  border-radius:10px; background:#fff; text-align:center;
  font-variant-numeric:tabular-nums; -moz-appearance:textfield;
  transition:border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.tuto-qty-input:focus{
  outline:none;
  border-color: color-mix(in oklab, var(--accent) 50%, #cfe0ff);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, #fff);
}
.tuto-qty-input::-webkit-outer-spin-button,
.tuto-qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Suma pozycji */
.tuto-minicart-line-total{ font-weight:800; white-space:nowrap; letter-spacing:.01em; color:var(--ink); }

/* Usuń */
.tuto-minicart-remove{
  position:absolute; top:8px; right:10px;
  border:0; background:transparent; cursor:pointer;
  font-size:1.05rem; color:#95a0b4;
  border-radius:10px; padding:6px;
  transition:color var(--trans-fast), background-color var(--trans-fast), transform var(--trans-fast);
}
.tuto-minicart-remove:hover{ color:#ef4444; background: color-mix(in oklab, #ef4444 10%, transparent); }
.tuto-minicart-remove:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--danger) 30%, #fff); }
.tuto-minicart-remove:active{ transform:scale(.98); }

/* Podsumowanie */
.tuto-minicart-summary{
  padding:12px 8px 10px; margin-top:8px;
  border-top:1px solid var(--border-soft);
  background:linear-gradient(180deg, #fff 0, rgba(255,255,255,.98) 60%, rgba(255,255,255,.96) 100%);
  position:relative;
}
.tuto-minicart-summary .row{
  display:flex; justify-content:space-between; align-items:center; margin:6px 8px;
}
.tuto-minicart-summary .row span{ color:var(--ink-muted); }
.tuto-minicart-summary .row strong{ font-size:1.02rem; letter-spacing:.01em; }

/* Footer (sticky) — subtelny gradient + bezpieczne odstępy od krawędzi */
.tuto-minicart-footer{
  position:sticky; bottom:0; z-index:1;
  /* większy padding poziomy + wsparcie dla notch (safe-area) */
  padding:12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  border-top:1px solid var(--border-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.92)) padding-box,
    linear-gradient(120deg, var(--footer-grad-start), var(--footer-grad-end)) border-box;
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  backdrop-filter:saturate(120%) blur(6px);
  box-sizing:border-box;
}

/* CTA — mniejsze, ale nadal premium */
.tuto-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  /* ZMNIEJSZONE przyciski */
  padding:.72rem .9rem;
  border-radius:14px;
  text-decoration:none; font-weight:800; letter-spacing:.01em;
  border:1px solid var(--border);
  transition:transform var(--trans-fast), background-color var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast), box-shadow var(--trans-fast);
  will-change: transform;
  text-align:center; line-height:1; white-space:nowrap;
}
.tuto-btn:active{ transform:translateY(0); }
.tuto-btn:focus-visible{ outline:none; box-shadow:var(--ring); }

.tuto-btn.primary{
  color:#fff; border:0;
  background: linear-gradient(180deg, var(--cta-grad-start), var(--cta-grad-end));
  box-shadow: var(--cta-glow);
}
.tuto-btn.primary:hover{
  transform: translateY(-1px);
  background: linear-gradient(175deg, color-mix(in oklab, var(--cta-grad-start) 85%, #000), var(--cta-grad-end));
  box-shadow: 0 10px 26px rgba(47,109,246,.35), 0 4px 10px rgba(23,71,212,.18);
}
.tuto-btn.primary:focus-visible{ box-shadow: var(--ring), var(--cta-glow); }

.tuto-btn.outline{
  color:#0f172a; background:#fff;
  border:2px solid color-mix(in oklab, var(--accent) 40%, #dbe6ff);
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
.tuto-btn.outline:hover{
  border-color: color-mix(in oklab, var(--accent) 55%, #cfdcff);
  transform: translateY(-1px);
  box-shadow: var(--cta-outline-glow);
}
.tuto-btn.outline:focus-visible{ box-shadow: var(--ring), var(--cta-outline-glow); }

/* Mobile — jeszcze większe „guttery” i drobniejsze CTA */
@media (max-width:480px){
  .tuto-minicart{ width:100vw; }
  .tuto-minicart-item{ grid-template-columns:64px 1fr auto; }
  .tuto-minicart-thumb img{ width:64px; height:64px; }
  .tuto-qty-input{ width:52px; }

  /* więcej powietrza po bokach, by przyciski NIE stykały się z krawędziami */
  .tuto-minicart-footer{
    padding:12px max(18px, 5vw, env(safe-area-inset-right)) 12px max(18px, 5vw, env(safe-area-inset-left));
    gap:10px;
  }

  /* minimalnie mniejsze CTA na bardzo małych ekranach */
  .tuto-btn{
    padding:.66rem .84rem;
    border-radius:13px;
  }
}

/* SR-only */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== MiniCart – Free Shipping bar ===== */
.tuto-minicart-free {
  margin-top: 12px;
  padding: 10px 12px;
  background: #0b0b0b;
  color: #fff;
  border-radius: 10px;
  line-height: 1.35;
}
.tuto-minicart-free__msg {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}
.tuto-minicart-free__track {
  height: 6px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  overflow: hidden;
}
.tuto-minicart-free__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00dfa3, #32e0ff);
  border-radius: inherit;
  transition: width .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .tuto-minicart-free__fill { transition: none; }
}

/* ==========================================================================
   TOAST NOTIFICATIONS (Wspólne dla Wishlist & MiniCart)
   ========================================================================== */
.tuto-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  /* z-index wyższy niż minicart (100001) */
  z-index: 100002;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none; /* Żeby nie blokować klikania pod spodem */
}

.tuto-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-width: 320px;
  padding: 14px 18px;
  background: var(--surface, #fff);
  color: var(--ink, #0f172a);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
  border: 1px solid var(--border-soft, #e7ebf3);
  pointer-events: auto;
  overflow: hidden;
  
  /* Animacja wjazdu */
  animation: tutoToastIn 0.35s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
  will-change: transform, opacity;
}

/* Stan: Wyjście (dodawane przez JS) */
.tuto-toast.is-hiding {
  animation: tutoToastOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Wskaźnik koloru (Kropka / Pasek) */
.tuto-toast::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Pasek czasu (opcjonalny, znika z czasem) */
.tuto-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: left;
  animation: tutoToastTimer 3s linear forwards;
}

/* --- WARIANTY KOLORYSTYCZNE --- */

/* 1. Wishlist: Dodano (Czerwony - Danger) */
.tuto-toast.toast--added::before {
  background-color: var(--danger, #ef4444);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger, #ef4444) 20%, transparent);
}
.tuto-toast.toast--added .tuto-toast__progress {
  background: var(--danger, #ef4444);
}

/* 2. Wishlist/Cart: Usunięto (Szary - Muted) */
.tuto-toast.toast--removed::before {
  background-color: var(--ink-muted, #5b687a);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink-muted, #5b687a) 20%, transparent);
}
.tuto-toast.toast--removed .tuto-toast__progress {
  background: var(--ink-muted, #5b687a);
}

/* 3. Cart: Dodano/Update (ZIELONY) - naprawione */
.tuto-toast.toast--cart::before {
  background-color: #10b981; /* Emerald */
  box-shadow: 0 0 0 3px color-mix(in oklab, #10b981 20%, transparent);
}
.tuto-toast.toast--cart .tuto-toast__progress {
  background: #10b981;
}

/* FIX: Blokada podwójnych napisów (ukrycie pseudo-elementów w treści) */
.tuto-toast__content {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}
.tuto-toast__content::before,
.tuto-toast__content::after {
    content: none !important;
    display: none !important;
}

/* Keyframes */
@keyframes tutoToastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tutoToastOut {
  to { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

@keyframes tutoToastTimer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Mobile: na dole ekranu, pełna szerokość minus marginesy */
@media (max-width: 480px) {
  .tuto-toast-container {
    left: 16px;
    right: 16px;
    bottom: 20px;
    align-items: center;
  }
  .tuto-toast {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   WooCommerce notices -> obsługiwane przez toasty mini-carta
   Ukrywamy paski na górze, ale zostawiamy je w DOM
   ========================================================================== */
body .woocommerce-notices-wrapper {
  position: relative;
}

body .woocommerce-notices-wrapper > .woocommerce-message,
body .woocommerce-notices-wrapper > .woocommerce-info,
body .woocommerce-notices-wrapper > .woocommerce-error {
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}