.ppl-kt {
  --kt-red: #f01835;
  width: 100%;
  max-width: none;
  height: 418px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 21px 19px;
  color: #f7f7f8;
  background: linear-gradient(145deg, #151a1f 0%, #101317 58%, #1c0d12 100%);
  border: 1px solid #37404a;
  border-radius: 11px;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .22);
}

/* Elementor może zwężać widżet shortcode do szerokości jego zawartości.
   Rozciągamy wyłącznie widżet zawierający kalendarz, bez wpływu na inne
   shortcode'y użyte na stronie. */
.elementor-widget-shortcode:has(> .elementor-widget-container > .ppl-kt) {
  width: 100%;
  max-width: none;
  align-self: stretch;
}

.elementor-widget-shortcode:has(> .elementor-widget-container > .ppl-kt)
  > .elementor-widget-container {
  width: 100%;
}

.ppl-kt *, .ppl-kt *::before, .ppl-kt *::after { box-sizing: border-box; }
.ppl-kt__kicker { margin-bottom: 10px; color: var(--kt-red); font-size: 11px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.ppl-kt__title { margin: 0 0 8px !important; color: #fff !important; font-size: 20px !important; font-style: italic; font-weight: 800 !important; line-height: 1.15 !important; }
.ppl-kt__events { display: grid; gap: 9px; height: 300px; margin-top: 13px; }
.ppl-kt__events--two { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ppl-kt__events--one { grid-template-rows: 1fr; }
.ppl-kt__event { min-height: 0; padding: 12px 13px; border: 1px solid #39434d; border-radius: 8px; background: rgba(8, 11, 14, .67); display: flex; flex-direction: column; }
.ppl-kt__event--clan { background: linear-gradient(110deg, rgba(8, 11, 14, .82), rgba(27, 7, 13, .62)); }
.ppl-kt__event h3 { margin: 0 0 5px !important; color: #fff !important; font-size: 16px !important; font-style: italic; font-weight: 800 !important; line-height: 1.1 !important; }
.ppl-kt__status { min-height: 14px; overflow: hidden; color: #d9dde1; font-size: 10px; font-weight: 800; letter-spacing: .025em; line-height: 1.35; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.ppl-kt__status.is-expired { color: #8e969e; }
.ppl-kt__timer {
  min-height: 20px;
  padding-top: 4px;
  color: var(--kt-red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .045em;
  line-height: 1.25;
  text-transform: uppercase;
}
.ppl-kt__timer-value {
  color: #d8dde3;
  text-shadow: 0 0 8px rgba(216, 221, 227, .28);
}
.ppl-kt__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.ppl-kt__button { display: flex; min-height: 31px; align-items: center; justify-content: center; border-radius: 6px; font-size: 10px; font-weight: 800; line-height: 1; text-decoration: none !important; text-transform: uppercase; transition: filter .18s ease, transform .18s ease; }
.ppl-kt__button:not(.is-disabled):hover { filter: brightness(1.12); transform: translateY(-1px); }
.ppl-kt__button--info { color: #f2f3f4 !important; background: rgba(11, 14, 17, .4); border: 1px solid #66717d; }
.ppl-kt__button--signup { color: #fff !important; background: var(--kt-red); border: 1px solid var(--kt-red); }
.ppl-kt__button.is-disabled { cursor: not-allowed; color: #b3b6ba !important; background: #555b61; border-color: #555b61; opacity: .72; }
.ppl-kt__button--info.is-disabled { background: rgba(11, 14, 17, .35); border-color: #515a63; }
.ppl-kt__empty { height: 268px; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid #39434d; border-radius: 8px; background: rgba(8, 11, 14, .64); }
.ppl-kt__empty-icon { width: 42px; height: 42px; margin-bottom: 14px; display: grid; place-items: center; color: #fff; background: var(--kt-red); border-radius: 50%; font-size: 24px; font-weight: 900; }
.ppl-kt__empty strong { margin-bottom: 8px; color: #fff; font-size: 16px; font-style: italic; }
.ppl-kt__empty span:last-child { color: #bfc4c9; font-size: 11px; line-height: 1.55; }

@media (max-width: 380px) {
  .ppl-kt { padding-right: 14px; padding-left: 14px; }
}
