/* === WC My Courses – final CSS (kolory poprawione) === */

:root{
  --ok-bg: #DCFCE7;              /* badge: Pozostało xx dni + 140 pytań */
  --ok-text: #166534;

  --session-active-bg: #1e88e5;  /* aktywna sesja */
  --session-active-text: #FFFFFF;

  --session-inactive-bg: #EFF6FF;/* nieaktywne sesje */
  --session-inactive-text: #1E3A8A;
  --session-hover-bg: #DBEAFE;
}

/* Layout 2 kolumny */
.wcmc-wrap{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:22px;
  margin-top:16px;
}
@media (max-width:980px){
  .wcmc-wrap{ grid-template-columns:1fr; }
}

.wcmc-left{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Kafelek kursu */
.wcmc-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  overflow:hidden;
  background:#fff !important;
  transition: box-shadow .18s ease, transform .18s ease;
  will-change: box-shadow, transform;
}
.wcmc-card:hover{
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.08), inset 4px 0 0 #1E88E5;
  transform: translateY(-1px);
}

/* Lewy nagłówek w karcie */
.wcmc-left-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* Ikona */
.wcmc-left-head > div:first-child{
  width:56px;
  height:56px;
  flex:0 0 56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wcmc-left-head img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:10px;
}

.wcmc-left-head .t1{
  font-weight:800;
  line-height:1.15;
  color:#1E6FDB;
}
.wcmc-left-head .t2{
  opacity:.75;
  font-size:.95em;
  margin-top:6px;
  line-height:1.25;
}

/* Badge: "Pozostało xx dni" + badge obok CTA */
.wcmc-left-head .t3,
.wcmc-cta > span{
  color:var(--ok-text) !important;
  background:var(--ok-bg) !important;
  border:1px solid rgba(22,101,52,.14);
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  line-height:1.1;
  font-size:.95em;
}

/* Lista sesji */
.wcmc-left-list{
  padding:8px 0 10px;
  background:#fff !important;
  border-top:1px solid rgba(15,23,42,.06);
}

/* Sesje nieaktywne */
.wcmc-left-list a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:10px 14px;
  padding:12px 16px;
  border-radius:999px;
  text-decoration:none;
  background:var(--session-inactive-bg) !important;
  box-shadow:0 1px 2px rgba(30,58,138,.10);
  transition: background .18s ease, box-shadow .18s ease;
}
.wcmc-left-list a,
.wcmc-left-list a:visited{
  opacity:1 !important;
}
.wcmc-left-title{
  color:var(--session-inactive-text) !important;
  font-weight:800;
  line-height:1.1;
}
.wcmc-chevron{
  color:var(--session-inactive-text) !important;
  font-size:22px;
  line-height:1;
  opacity:.9;
}

/* Hover nieaktywnej sesji */
.wcmc-left-list a:hover{
  background:var(--session-hover-bg) !important;
  box-shadow:0 1px 2px rgba(30,58,138,.12);
}
.wcmc-left-list a:hover .wcmc-left-title,
.wcmc-left-list a:hover .wcmc-chevron{
  color:var(--session-inactive-text) !important;
}

/* Aktywna sesja */
.wcmc-left-list a.active{
  background:var(--session-active-bg) !important;
  box-shadow:0 1px 3px rgba(37,99,235,.18); /* bardzo lekki cień */
}
.wcmc-left-list a.active .wcmc-left-title,
.wcmc-left-list a.active .wcmc-chevron{
  color:var(--session-active-text) !important;
}
.wcmc-left-list a.active:hover{
  background:var(--session-active-bg) !important; /* bez zmiany tonu */
  box-shadow:0 1px 3px rgba(37,99,235,.20);
}

/* Panel prawy */
.wcmc-panel{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.wcmc-panel-head{ padding:18px 18px 10px; }
.wcmc-panel-title{
  font-size:24px;
  font-weight:900;
  margin:0 0 8px;
  line-height:1.15;
  color:#1E6FDB;
}
.wcmc-panel-desc{
  opacity:.8;
  margin:0 0 14px;
}
.wcmc-panel-body{ padding:18px; }

/* CTA */
.wcmc-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.wcmc-cta > span{ order:0; }
.wcmc-btn{ order:1; }

/* Przycisk */
.wcmc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:12px;
  background:#1E88E5 !important;
  border:1px solid #1E88E5 !important;
  color:#fff !important;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
  text-decoration:none !important;
  filter:none;
  text-shadow:none;
  box-shadow:none;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .06s ease;
}
.wcmc-btn *{
  color:#fff !important;
  fill:currentColor;
}
.wcmc-btn:hover{
  background:#1565C0 !important;
  border-color:#1565C0 !important;
  box-shadow:0 6px 16px rgba(30,136,229,.35);
  transform:none;
}
.wcmc-btn:active{
  background:#0D47A1 !important;
  border-color:#0D47A1 !important;
  box-shadow:none;
  transform:translateY(1px);
}

/* 140 pytań – zielony badge */
.wcmc-quiz-stats{
  order:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--ok-bg) !important;
  color:var(--ok-text) !important;
  border:1px solid rgba(22,101,52,.14);
  font-weight:800;
  line-height:1.2;
  width:auto;
  max-width:100%;
  box-sizing:border-box;
}

/* Usunięcie kropki z poprzedniej wersji */
.wcmc-quiz-stats::before{
  content:none !important;
}
/* --- Dostęp aktywny + boxy: jeden pod drugim --- */

/* "Dostęp aktywny: 26 dni" w osobnej linii */
.wcmc-access{
  display:block !important;
  margin:0 0 8px 0 !important;
  width:100% !important;
  flex:0 0 100% !important;   /* gdy rodzic jest flex */
}

/* Każdy box po .wcmc-access w nowej linii */
.wcmc-access ~ .wcmc-quiz-stats,
.wcmc-access ~ span:not(.wcmc-access){
  display:block !important;
  width:fit-content !important;
  margin:8px 0 0 0 !important;
  flex:0 0 100% !important;   /* gdy rodzic jest flex */
  align-self:flex-start !important;
}
/* 1) Ikona "play" w przycisku Rozpocznij test */
a.wcmc-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px;
}
a.wcmc-btn::before{
  content:"▶";
  font-size:.9em;
  line-height:1;
  transform:translateY(-1px);
  opacity:.95;
}

/* 2) "Dostęp aktywny" w tych samych kolorach co zielone boxy */
.wcmc-access{
  display:inline-flex !important;      /* jeśli chcesz osobną linię, zmień na block */
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  background:#DCFCE7 !important;
  color:#166534 !important;
  border:1px solid rgba(22,101,52,.14);
  font-weight:800;
  line-height:1.2;
}

/* opcjonalna ikonka przy "Dostęp aktywny" */
.wcmc-access::before{
  content:"⏱";
  font-size:.95em;
  line-height:1;
}
/* Mobile: najpierw panel z odpalonym kursem, potem lista */
@media (max-width: 980px){
  .wcmc-wrap{
    display:flex !important;
    flex-direction:column !important;
  }

  /* prawa kolumna (box z informacją o odpalonym kursie) */
  .wcmc-wrap > .wcmc-panel,
  .wcmc-wrap > .wcmc-right{
    order:1 !important;
  }

  /* lewa kolumna (lista) */
  .wcmc-wrap > .wcmc-left{
    order:2 !important;
  }
}