/* === PANEL: TYPowanie – kard, siatka, przyciski === */

.card .comingRace {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0 0 14px 0;
}
.card .comingRace::before{
  font-size: 1rem;
}

/* wspólna typografia */
.logPanel,
.registerPanel,
.resetPassword,
.contactText,
.callendarText,
.login3,
.registry,
.statuteText,
.privacyText,
.cookiesText,
.predictionsText{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:'Orbitron', sans-serif;
  font-weight:700;
  letter-spacing:.2px;
}

.card :is(.logPanel,
          .registerPanel,
          .resetPassword,
          .contactText,
          .callendarText,
          .predictionsText) {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  position: relative;
  padding-left: 12px;              /* miejsce na pasek */
}

/* Pasek po lewej (ten sam dla wszystkich powyżej) */
.card :is(.logPanel,
          .registerPanel,
          .resetPassword,
          .contactText,
          .callendarText,
          .predictionsText)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.2em;                   /* wysokość linii tekstu */
  border-radius: 2px;
  background: linear-gradient(180deg,#f5261f,#c90700);
  opacity: .9;
}

.race-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 960px){
  .race-grid.two-col{
    grid-template-columns: 1.2fr .8fr;
    align-items: start;
  }
}

/* Lewa kolumna – tabela terminów */
.race-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: #0f1318;
  border: 1px solid #202630;
  border-radius: 14px;
  overflow: hidden;
}
.race-table tr{
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.race-table tr:last-child{ border-bottom: 0; }
.race-table td{
  padding: 12px 14px;
  vertical-align: middle;
}
.race-table td:first-child{
  width: 170px;
  font-weight: 700;
  color: #e23a3a;                /* czerwone labelki po lewej */
  text-align: right;
  padding-right: 16px;
}
.race-table td:last-child{
  color: #e7ecf3;
}
#countdown, #countdownSprint{
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: #ffd84d;                 /* żółty countdown */
}

/* Pasek “pogoda” */
.wx-card{
  margin-top: 16px;
  background: #0f1318;
  border: 1px solid #202630;
  border-radius: 14px;
  padding: 12px;
}
.wx-h{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  padding: 8px 6px 12px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  color: #dfe7f4;
}
.wx-h i{ opacity: .85; }

.wx-grid{
  display: grid;
  gap: 12px;
  padding-top: 12px;
}
@media (min-width: 760px){
  .wx-grid{ grid-template-columns: repeat(3, 1fr); }
}
.wx-item{
  background: #0a0d12;
  border: 1px solid #1a1f27;
  border-radius: 12px;
  padding: 12px;
}
.wx-date{
  font-weight: 700;
  color: #9fb3d9;
  margin-bottom: 8px;
}
.wx-main{
  display: flex;
  align-items: center;
  gap: 10px;
}
.wx-main i{ font-size: 18px; }
.wx-desc{ font-weight: 700; color: #e7ecf3; }
.wx-vals{
  margin-top: 6px;
  font-size: 14px;
  color: #cbd5e1;
}

/* Prawa kolumna – tytuł + flaga + mapa toru */
.col-right .right-top{
  font-weight: 700;
  color: #dfe7f4;
  margin-bottom: 10px;
}
.col-right .achievementsTitle{
  font-size: 16px;
}

.country-flag{
  display:block;
  width: 260px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  background: #0a0a0a;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset,
              0 8px 20px rgba(0,0,0,.35),
              0 0 22px rgba(148, 181, 255, .12);
  margin-bottom: 12px;
}
.track-map{
  display:block;
  width: 320px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.45))
          drop-shadow(0 0 14px rgba(255,255,255,.05));
}

/* Przyciski akcji */
.typingButtons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 14px;
}
.typingButtons .addTypes,
.typingButtons .checkYourTypes{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #2a313c;
  background: linear-gradient(180deg,#171d24,#10151a);
  color: #e7ecf3;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.typingButtons .addTypes:hover,
.typingButtons .checkYourTypes:hover{
  transform: translateY(-1px);
  border-color: #3a4350;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

/* Nagłówek karty jak na screenie 2 — z czerwonym paskiem po lewej */
.card .comingRace{
  position: relative;
  padding-left: 16px;
}
.card .comingRace::after{
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: #e22d2d;
  border-radius: 2px;
  opacity: .9;
}

.sessions__summary i{ color:#f1c40f; margin-right:6px; }