/* "Akceptujemy płatności kartą" card (pages/_payment_accepted), same family as the
   opening-hours, welcome and Rodo cards. */

.payment-wrap {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin: 0 0 26px;
  padding: 18px 22px;
  border: 1px solid #e3ddee;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff 55%, #faf7fd);
  box-shadow: 0 1px 3px rgba(78, 47, 138, 0.08);
}

.payment-wrap__head { display: flex; align-items: center; gap: 14px; }

.payment-wrap__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fdecee;
  color: #ef2c42;
}

.payment-wrap .payment {
  margin: 0;
  font: normal 19px/1.25 'museo300', Arial, Helvetica, sans-serif;
  color: #4e2f8a;
}

.payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.payment-list li {
  display: grid;
  place-items: center;
  width: 68px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 1px solid #eee9f4;
  border-radius: 10px;
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.payment-list li:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(78, 47, 138, 0.1); }

.payment-list img { display: block; max-width: 54px; max-height: 32px; width: auto; height: auto; }

/* Narrow desktops: label above, logos spread across the full width. */
@media only screen and (max-width: 1103px) {
  .payment-list { width: 100%; justify-content: space-between; }
}

@media only screen and (max-width: 767px) {
  .payment-wrap { padding: 16px; margin-bottom: 20px; }
  .payment-wrap .payment { font-size: 17px; }
  .payment-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .payment-list li { width: auto; height: 46px; }
  .payment-list img { max-width: 80%; max-height: 30px; }
}

@media print { .payment-wrap { display: none; } }