/* cards.css — Karty kroków i komponenty (chipy usuwalne, podsumowania, dzień planu) */


.card, .step-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: var(--sh-md);
  animation: cardin .45s cubic-bezier(.2,.7,.3,1) both;
}

.card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }

.card-icon-box {
  width: 42px; height: 42px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px;
  flex-shrink: 0;
}

.card-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink);
}

.card-desc { font-size: 13.5px; color: var(--muted); margin-bottom: 16px; line-height: 1.5; }

.icon-blue   { background: #E0F2FE; color: #0369A1; }

.icon-purple { background: #E0EAFF; color: #1D4ED8; }

.icon-pink   { background: #CCFBF1; color: #0F766E; }

.icon-orange { background: #FEF3D8; color: #92600B; }

.icon-green  { background: #DCFCE7; color: #15803D; }

.icon-red    { background: #FEE7E0; color: #B4451F; }

.airline-card {
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
  transition: all .16s ease;
}

.airline-card:hover { border-color: #B9D6F1; transform: translateY(-1px); box-shadow: var(--sh-sm); }

.airline-card.active { background: #E0F2FE; border: 2px solid var(--sky); padding: 13px 15px; }

.mode-card {
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all .16s ease;
}

.mode-card:hover { border-color: #B9D6F1; transform: translateY(-2px); box-shadow: var(--sh-sm); }

.mode-card.single-active { background: #E0F2FE; border: 2px solid var(--sky); padding: 15px; }

.mode-card.tour-active {
  background: linear-gradient(120deg, #E0F2FE 0%, #CCFBF1 100%);
  border: 2px solid var(--teal); padding: 15px;
}

.icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #EEF4FA;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--ink);
  transition: all .15s ease;
}

.icon-btn:hover { background: #DCE9F5; transform: scale(1.08); }

.icon-btn:disabled { opacity: .3; cursor: not-allowed; transform: none; }

.tour-stop { padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); margin-bottom: 8px; background: #fff; }

.tour-stop.first-last { border: 2px solid var(--blue); background: #E0F2FE; }

.stop-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; }

.badge-blue { background: var(--blue); color: #fff; }

.day-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: var(--sh-sm);
}

.day-num {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}

.fact-card {
  background: linear-gradient(120deg, #FFF7E6 0%, #FFEFD6 100%);
  border-left: 4px solid var(--amber);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.fact-icon { font-size: 22px; margin-right: 6px; }

.chip-rm {
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  background: #E0F2FE; color: #0369A1;
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}

.chip-rm button { background: transparent; border: none; color: #0369A1; cursor: pointer; padding: 0; font-size: 16px; }

.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0 12px; }

.summary-cell { padding: 12px 14px; border-radius: 12px; }

.total-box {
  background: var(--grad-brand);
  padding: 16px; border-radius: 14px;
  display: flex; justify-content: space-between; align-items: center;
  color: #fff;
  box-shadow: 0 10px 24px rgba(37,99,235,.28);
}

#gen-msg {
  font-size: 16px; min-height: 26px; color: rgba(255,255,255,.95);
  transition: opacity .3s ease;
}

.leaflet-container { border-radius: 14px; }

.leaflet-popup-content { font-family: var(--font-body); }

/* Karty krajów ze zdjęciem (etap 2.0) — .country-btn.as-card zachowuje klik z bind() */
.country-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}
@media (min-width: 560px) { .country-grid { grid-template-columns: repeat(3, 1fr); } }

.country-btn.as-card {
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  background: #fff;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.country-btn.as-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: #B9D6F1;
  background: #fff;
}
.country-btn.as-card.active {
  border: 2px solid var(--sky);
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
  color: var(--ink);
}
.cc-photo {
  position: relative;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, #0EA5E9 0%, #2563EB 55%, #14B8A6 100%);
  background-size: cover;
  background-position: center;
  transition: filter .2s ease;
  overflow: hidden;
}
.cc-photo::before { /* blask + winieta, żeby gradient nie był płaski */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 25% 12%, rgba(255,255,255,.38), transparent 55%),
    linear-gradient(180deg, transparent 52%, rgba(9,42,80,.30));
  pointer-events: none;
}
.country-btn.as-card:hover .cc-photo { filter: brightness(1.05) saturate(1.05); }
.cc-emoji {
  position: relative; z-index: 1;
  font-size: 40px; line-height: 1;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.4));
  transition: transform .2s ease;
}
.country-btn.as-card:hover .cc-emoji { transform: scale(1.12) rotate(-3deg); }
.cc-photo.has-photo .cc-emoji { font-size: 30px; opacity: .95; }
.cc-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: 9.5px; font-weight: 700;
  background: rgba(255,255,255,.95); color: #B45309;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 1px 5px rgba(0,0,0,.18);
}
.cc-body { padding: 9px 11px 11px; }
.cc-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.2; }
.cc-price { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }