/* ==========================================================================
   iSeller Restore — Design Tokens, Shading & Mobile UI from isellerserwis.online
   ========================================================================== */

:root {
  /* 1. PALETA BARW I GRADIENTY (OKLCH system from isellerserwis.online) */
  --accent-h: 168;
  --brand-green-top: oklch(0.80 0.13 182); /* świeża luminescencyjna mięta */
  --brand-green: oklch(0.60 0.17 168);     /* szmaragdowa zieleń brandowa */
  --brand-green-deep: oklch(0.54 0.14 165);/* głęboki szmaragd */
  --accent: var(--brand-green);
  --accent-ink: oklch(0.46 0.14 168);
  --accent-soft: oklch(0.96 0.04 168);
  --brand-link: var(--brand-green-top);
  --brand-link-hover: oklch(0.86 0.11 182);
  
  --brand-gradient: linear-gradient(
    135deg,
    var(--brand-green-top) 0%,
    var(--brand-green) 55%,
    var(--brand-green-deep) 100%
  );
  --brand-gradient-hover: linear-gradient(
    135deg,
    oklch(0.84 0.12 182) 0%,
    oklch(0.64 0.17 168) 55%,
    oklch(0.56 0.14 165) 100%
  );
  --brand-glow: color-mix(in oklab, var(--brand-green) 40%, transparent);

  /* 2. CIENIOWANIE I MIKROINTERAKCJE BUTTONÓW */
  --brand-btn-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 22px -10px var(--brand-glow);
  --brand-btn-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 10px 26px -10px var(--brand-glow);
  --brand-btn-shadow-active:
    inset 0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 12px -8px var(--brand-glow);

  /* Papiery i pastelowe zielenie */
  --paper: #ffffff;
  --paper-2: oklch(0.97 0.03 165); /* pastelowe, subtelnie miętowe tło kontenerów */
  --paper-3: oklch(0.94 0.04 165);
  --line: rgba(0, 168, 89, 0.15);  /* delikatne zielonkawe obramowania kontenerów */
  --line-2: rgba(0, 168, 89, 0.08);

  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #475569;
  --muted-2: #64748b;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  /* 3. CIENIOWANIE KONTENERÓW I KART (CONTAINER SHADING) */
  --shadow-sm: 0 1px 0 rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 1px 0 rgba(15,23,42,.04), 0 8px 24px -10px rgba(15,23,42,.10);
  --shadow-lg: 0 1px 0 rgba(15,23,42,.04), 0 24px 48px -20px rgba(15,23,42,.18);
}

.iseller-eco-bar {
  display: none !important;
}

/* ── 1. GŁÓWNE PRZYCISKI (BUTTONS SHADING & GRADIENT) ─────────────────────── */
.btn-primary,
button.btn-primary,
a.btn-primary,
.iseller-cta-wycen,
button[type="submit"].btn-primary,
.bg-emerald-600:not(.w-8):not(.w-2):not(.rounded-full):not(#aios-consent-accept) {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
  box-shadow: var(--brand-btn-shadow) !important;
  border: none !important;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease, opacity .15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.btn-primary:hover,
.iseller-cta-wycen:hover,
button[type="submit"].btn-primary:hover {
  background: var(--brand-gradient-hover) !important;
  box-shadow: var(--brand-btn-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

.btn-primary:active,
.iseller-cta-wycen:active,
button[type="submit"].btn-primary:active {
  transform: translateY(1px) scale(0.97) !important;
  box-shadow: var(--brand-btn-shadow-active) !important;
}

/* Header & Client Panel Buttons */
.iseller-client-panel-btn,
#header-user-btn {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
  box-shadow: var(--brand-btn-shadow) !important;
  border: none !important;
  border-radius: 9999px !important;
  transition: all .15s ease !important;
}

.iseller-client-panel-btn:hover,
#header-user-btn:hover {
  background: var(--brand-gradient-hover) !important;
  box-shadow: var(--brand-btn-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

/* Secondary & Ghost Buttons */
.btn-secondary {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius-sm) !important;
  transition: all .15s ease !important;
}

.btn-secondary:hover {
  background: var(--accent-soft) !important;
  border-color: color-mix(in oklab, var(--brand-green) 32%, var(--line)) !important;
  color: var(--accent-ink) !important;
  box-shadow: 0 4px 14px -6px var(--brand-glow) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  transition: all .15s ease !important;
}

.btn-ghost:hover {
  background: var(--accent-soft) !important;
  border-color: color-mix(in oklab, var(--brand-green) 32%, var(--line)) !important;
  color: var(--accent-ink) !important;
}

/* ── 2. CIENIOWANIE I STYLIZACJA KONTENERÓW I KART ────────────────────────── */
.clean-card,
.product-card-wrapper,
.quote-card,
.page-box,
#dlaczego-restore .p-7,
#jak-dziala .p-7,
#jak-wyslac .p-7,
#root .bg-white.border.border-slate-200.rounded-3xl,
#root .bg-white.border.border-slate-200.rounded-2xl {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

.clean-card:hover,
.product-card-wrapper:hover,
#dlaczego-restore .p-7:hover,
#jak-dziala .p-7:hover,
#jak-wyslac .p-7:hover,
#root .bg-white.border.border-slate-200.rounded-3xl:hover,
#root .bg-white.border.border-slate-200.rounded-2xl:hover {
  border-color: color-mix(in oklab, var(--brand-green) 30%, var(--line)) !important;
  box-shadow: 0 10px 28px -18px var(--brand-glow) !important;
  transform: translateY(-2px) !important;
}

/* Drawer / szuflady menu z glassmorphism */
#iseller-mobile-drawer,
#cart-drawer-panel {
  background: color-mix(in oklab, var(--paper) 95%, transparent) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-left: 1px solid var(--line) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Wyszukiwarki i inputy formularzy */
#restore-unified-search-input,
#global-search-input,
header input[type="text"],
input.quote-input,
#root input[type="text"],
#root input[type="tel"],
#root input[type="email"],
#root select {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all .15s ease !important;
}

#restore-unified-search-input:focus,
#global-search-input:focus,
header input[type="text"]:focus,
input.quote-input:focus,
#root input:focus,
#root select:focus {
  background: var(--paper) !important;
  border-color: var(--brand-green) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-green) 18%, transparent) !important;
}

/* ── 3. INTERFEJS I PRZYCISKI NA URZĄDZENIACH MOBILNYCH (STICKY BAR) ────────── */

/* Ukryj stary ciemny pasek Reacta (#1a1d21) jeśli był jeszcze renderowany */
.md\:hidden.fixed.bottom-0[style*="1a1d21"],
div.pb-safe[style*="1a1d21"] {
  display: none !important;
}

/* Dolny pasek mobilny — nowoczesny sticky bar WYŁĄCZNIE na urządzeniach mobilnych */
#iseller-mobile-bottom-bar {
  display: none !important;
}

@media (max-width: 768px) {
  #iseller-mobile-bottom-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: color-mix(in oklab, var(--paper) 92%, transparent) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08) !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 12px !important;
    gap: 8px !important;
  }
}

@media (min-width: 769px) {
  #iseller-mobile-bottom-bar {
    display: none !important;
  }
}

/* Przyciski w dolnym pasku */
#iseller-mobile-bottom-bar > a,
.iseller-mobile-btn {
  flex: 1 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 6px !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease, border-color .15s ease !important;
  border: 1px solid var(--line) !important;
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
  min-width: 0 !important;
}

#iseller-mobile-bottom-bar > a:active,
.iseller-mobile-btn:active {
  transform: scale(0.97) !important;
}

/* Przycisk Główny CTA w dolnym pasku (Wycena online / Wycena w 60s z gradientem isellerserwis) */
#iseller-mobile-bottom-bar > a:last-child,
.iseller-mobile-btn--primary {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: var(--brand-btn-shadow) !important;
}

#iseller-mobile-bottom-bar > a:last-child:active,
.iseller-mobile-btn--primary:active {
  box-shadow: var(--brand-btn-shadow-active) !important;
  transform: scale(0.97) !important;
}

#iseller-mobile-bottom-bar > a:last-child svg,
.iseller-mobile-btn--primary svg {
  stroke: #ffffff !important;
}

#iseller-mobile-bottom-bar > a:last-child span,
.iseller-mobile-btn--primary span {
  color: #ffffff !important;
}

#iseller-mobile-bottom-bar > a:last-child span:nth-child(2),
.iseller-mobile-btn--primary span:nth-child(2) {
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

#iseller-mobile-bottom-bar > a:last-child span:nth-child(3),
.iseller-mobile-btn--primary span:nth-child(3) {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 9.5px !important;
}

/* Przyciski pomocnicze: Zadzwoń & WhatsApp */
#iseller-mobile-bottom-bar > a:first-child span:nth-child(2),
#iseller-mobile-bottom-bar > a:nth-child(2) span:nth-child(2) {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

#iseller-mobile-bottom-bar > a:first-child span:nth-child(3),
#iseller-mobile-bottom-bar > a:nth-child(2) span:nth-child(3) {
  color: var(--muted) !important;
  font-size: 9.5px !important;
}

#iseller-mobile-bottom-bar > a:first-child svg {
  stroke: var(--brand-green) !important;
}

#iseller-mobile-bottom-bar > a:first-child:hover,
#iseller-mobile-bottom-bar > a:nth-child(2):hover {
  background: var(--accent-soft) !important;
  border-color: color-mix(in oklab, var(--brand-green) 32%, var(--line)) !important;
}

/* Mobilne pigułki kategorii (#iseller-mobile-nav-strip, .iseller-mnav-chip, #iseller-mobile-cats) */
#iseller-mobile-nav-strip,
#iseller-mobile-cats {
  background: color-mix(in oklab, var(--paper) 95%, transparent) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border-bottom: 1px solid var(--line) !important;
  gap: 8px !important;
  padding: 8px 12px !important;
}

.iseller-mnav-chip,
#iseller-mobile-cats a {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 7px 12px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all .15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.iseller-mnav-chip:hover,
.iseller-mnav-chip:active,
.iseller-mnav-chip--accent,
#iseller-mobile-cats a:hover,
#iseller-mobile-cats a:active {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: var(--brand-btn-shadow) !important;
  transform: translateY(-1px) !important;
}

/* Bezpieczna strefa dolna na telefonach (iOS / Android safe-area-inset-bottom) */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}