/*
 * Power Kurs Walut – Modern Dark + Mobile Carousel
 * CSS variables na górze – zmień je w motywie.
 * v1.2.0
 */

/* ── Zmienne ────────────────────────────────────────────────────────── */
.pkw-wrap {
  --pkw-bg:            #0f1117;
  --pkw-card-bg:       #161b27;
  --pkw-card-hover:    #1d2438;
  --pkw-border:        rgba(255, 255, 255, 0.07);
  --pkw-text:          #f1f5f9;
  --pkw-text-name:     #8b9dbf;
  --pkw-text-muted:    #4e5d78;
  --pkw-up:            #22c55e;
  --pkw-down:          #ef4444;
  --pkw-spark-up:      #22c55e;
  --pkw-spark-down:    #ef4444;
  --pkw-accent:        #3b82f6;
  --pkw-radius-card:   10px;
  --pkw-radius-input:  6px;
  --pkw-font:          inherit;
}

/* ── Wrapper ────────────────────────────────────────────────────────── */
.pkw-wrap {
  font-family:   var(--pkw-font);
  font-size:     inherit;
  color:         var(--pkw-text);
  background:    var(--pkw-bg);
  border-radius: var(--pkw-radius-card);
  margin:        0em 0;
  overflow:      hidden;
  max-width:     100%;
}

/* ── Nagłówek ───────────────────────────────────────────────────────── */
.pkw-header {
  padding:       .9em 1.1em .65em;
  border-bottom: 1px solid var(--pkw-border);
  display:       flex;
  align-items:   baseline;
  gap:           .7em;
  flex-wrap:     wrap;
}

.pkw-title {
  margin:         0;
  font-size:      .78em;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--pkw-text-name);
}

.pkw-date {
  margin:    0;
  font-size: .72em;
  color:     var(--pkw-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP – lista kart (pionowo)
   ══════════════════════════════════════════════════════════════════════ */
.pkw-cards {
  display:        flex;
  flex-direction: column;
}

.pkw-card {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         .45em 1.1em;
  border-bottom:   1px solid var(--pkw-border);
  transition:      background .15s ease;
  gap:             .75em;
}

.pkw-card:last-child { border-bottom: none; }
.pkw-card:hover      { background: var(--pkw-card-hover); }

/* Lewa kolumna */
.pkw-card-info { flex: 1; min-width: 0; }

.pkw-card-name {
  font-size:      .72em;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--pkw-text-name);
  margin-bottom:  .25em;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.pkw-card-bottom {
  display:     flex;
  align-items: baseline;
  gap:         .55em;
  flex-wrap:   wrap;
}

.pkw-card-rate {
  font-size:            1.45em;
  font-weight:          700;
  color:                var(--pkw-text);
  font-variant-numeric: tabular-nums;
  line-height:          1;
}

.pkw-card-pct {
  font-size:            .82em;
  font-weight:          600;
  font-variant-numeric: tabular-nums;
}

.pkw-card-pct.pkw-up   { color: var(--pkw-up);         }
.pkw-card-pct.pkw-down { color: var(--pkw-down);        }
.pkw-card-pct.pkw-eq   { color: var(--pkw-text-muted);  }

/* Sparkline */
.pkw-card-spark {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            .18em;
  flex-shrink:    0;
}

.pkw-spark {
  display: block;
  width:   130px;
  height:  50px;
}

.pkw-spark-label {
  font-size:      .65em;
  color:          var(--pkw-text-muted);
  letter-spacing: .03em;
}

/* Nav – ukryte na desktop */
.pkw-carousel-nav { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE – karuzela z peek (≤ 599px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {

  /* Kontener karuzeli */
  .pkw-cards {
    flex-direction:          row;
    overflow-x:              scroll;
    scroll-snap-type:        x mandatory;
    scroll-behavior:         smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:         none;
    -ms-overflow-style:      none;
    gap:                     .6em;
    padding:                 .75em .75em .75em .75em;
    /* Peek: prawa krawędź pokazuje ~15% następnej karty */
    padding-right:           calc(15% + .6em);
  }

  .pkw-cards::-webkit-scrollbar { display: none; }

  /* Karta – 85% szerokości kontenera → peek ~15% */
  .pkw-card {
    flex:             0 0 85%;
    scroll-snap-align: start;
    border-bottom:    none;
    border-right:     1px solid var(--pkw-border);
    border-radius:    8px;
    background:       var(--pkw-card-bg);
    padding:          1em .9em;
    box-shadow:       0 2px 12px rgba(0,0,0,.3);
    /* Pełna wysokość karty – wyrównaj karty różnej wysokości */
    align-self:       stretch;
  }

  .pkw-card:last-child { border-right: none; }
  .pkw-card:hover      { background: var(--pkw-card-hover); }

  /* Większy kurs na mobile – karta jest centrum uwagi */
  .pkw-card-rate { font-size: 2em; }
  .pkw-card-name { font-size: .76em; }
  .pkw-card-pct  { font-size: .88em; }

  /* Sparkline nieco większy */
  .pkw-spark { width: 110px; height: 52px; }

  /* ── Nawigacja (kropki + strzałki) ─────────────────────────────── */
  .pkw-carousel-nav {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .65em;
    padding:         .55em 1em .75em;
    border-top:      1px solid var(--pkw-border);
  }

  .pkw-nav-btn {
    background:    rgba(255,255,255,.07);
    border:        1px solid var(--pkw-border);
    border-radius: 50%;
    color:         var(--pkw-text);
    width:         30px;
    height:        30px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    font-size:     1.05em;
    line-height:   1;
    padding:       0;
    transition:    background .15s, opacity .15s;
    flex-shrink:   0;
    -webkit-tap-highlight-color: transparent;
  }

  .pkw-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,.15); }
  .pkw-nav-btn:disabled { opacity: .25; cursor: default; pointer-events: none; }

  .pkw-dots {
    display:     flex;
    gap:         .45em;
    align-items: center;
  }

  .pkw-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--pkw-text-muted);
    border:        none;
    padding:       0;
    cursor:        pointer;
    transition:    background .2s, transform .2s, width .2s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink:   0;
  }

  .pkw-dot.pkw-dot-active {
    background:    var(--pkw-text);
    transform:     scale(1.4);
    width:         12px;            /* aktywna kropka – pill shape */
    border-radius: 4px;
  }
}

/* Desktop responsywność (szersze sparkline) */
@media (min-width: 600px) and (max-width: 899px) {
  .pkw-spark { width: 120px; height: 50px; }
}

@media (min-width: 900px) {
  .pkw-spark      { width: 150px; height: 56px; }
  .pkw-card-rate  { font-size: 1.6em; }
}

/* ── Sekcje (przelicznik / wykres) ─────────────────────────────────── */
.pkw-section {
  padding:    1em 1.1em;
  border-top: 1px solid var(--pkw-border);
}

.pkw-section-title {
  margin:         0 0 .7em;
  font-size:      .72em;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--pkw-text-name);
}

/* ── Przelicznik ────────────────────────────────────────────────────── */
.pkw-conv-row {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         .5em;
}

.pkw-conv-amount,
.pkw-conv-from,
.pkw-conv-to {
  background:    rgba(255,255,255,.06);
  border:        1px solid var(--pkw-border);
  border-radius: var(--pkw-radius-input);
  color:         var(--pkw-text);
  font-family:   var(--pkw-font);
  font-size:     .9em;
  padding:       .45em .65em;
  transition:    border-color .15s, background .15s;
}

.pkw-conv-amount:focus,
.pkw-conv-from:focus,
.pkw-conv-to:focus {
  outline:      none;
  border-color: var(--pkw-accent);
  background:   rgba(59,130,246,.08);
}

.pkw-conv-amount {
  width:                90px;
  text-align:           right;
  font-variant-numeric: tabular-nums;
}

.pkw-conv-from, .pkw-conv-to { cursor: pointer; }

.pkw-conv-from option,
.pkw-conv-to   option { background: #1e293b; color: #f1f5f9; }

.pkw-conv-eq {
  font-weight: 700;
  color:       var(--pkw-text-muted);
  padding:     0 .1em;
}

.pkw-conv-result {
  display:              inline-block;
  font-size:            1.05em;
  font-weight:          700;
  font-variant-numeric: tabular-nums;
  color:                var(--pkw-text);
  min-width:            120px;
}

@media (max-width: 480px) {
  .pkw-conv-row        { flex-direction: column; align-items: stretch; }
  .pkw-conv-amount     { width: 100%; text-align: left; }
  .pkw-conv-result     { min-width: 0; }
}

/* ── Wykres ─────────────────────────────────────────────────────────── */
.pkw-chart-header {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           .6em;
  margin-bottom: .8em;
}

.pkw-chart-header .pkw-section-title { margin: 0; }

.pkw-chart-select {
  background:    rgba(255,255,255,.06);
  border:        1px solid var(--pkw-border);
  border-radius: var(--pkw-radius-input);
  color:         var(--pkw-text);
  font-family:   var(--pkw-font);
  font-size:     .82em;
  padding:       .35em .55em;
  cursor:        pointer;
}

.pkw-chart-select option { background: #1e293b; color: #f1f5f9; }

.pkw-chart-loading {
  display:   none;
  font-size: .78em;
  color:     var(--pkw-text-muted);
}

.pkw-chart-canvas {
  width:      100%;
  max-height: 260px;
  transition: opacity .2s ease;
}

/* ── Błąd ───────────────────────────────────────────────────────────── */
.pkw-error {
  padding:     .8em 1.1em;
  color:       var(--pkw-down);
  font-size:   .88em;
  border-left: 3px solid var(--pkw-down);
  background:  rgba(239,68,68,.07);
}