/* Countdown — standalone CSS (do not touch panel.css/style.css) */

.cd-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}
.cd-sub{
  margin:6px 0 0 0;
  color:rgba(246,240,226,.72);
  font-size:13px;
}
.cd-badges{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.cd-card{
  border-radius:10px;
}
.cd-ok{ border-color: rgba(34,197,94,.35) !important; }
.cd-err{ border-color: rgba(239,68,68,.35) !important; }

.cd-pricing__text{
  margin-top:6px;
  color:rgba(246,240,226,.84);
}
.cd-pricing__range{
  margin-top:6px;
  color:rgba(246,240,226,.62);
  font-size:12px;
}

/* Calendar */
.cd-cal{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

.cd-month{
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.15);
}

.cd-month__title{
  font-weight:700;
  margin-bottom:8px;
  color:rgba(246,240,226,.92);
}

.cd-grid{
  display:block;
}

.cd-week{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:6px;
  font-size:11px;
  color:rgba(246,240,226,.70);
  margin-bottom:6px;
  user-select:none;
}
.cd-week > div{
  text-align:center;
  padding:4px 0;
  border-radius:6px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.cd-days{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:6px;
}

.cd-pad{
  height:30px;
}

.cd-day{
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: rgba(246,240,226,.92);
  font-size:12px;
  cursor:pointer;
  user-select:none;
  padding:0;
  line-height:1;
}

.cd-day:hover{
  border-color: rgba(245,158,11,.55);
  background: rgba(245,158,11,.10);
}

.cd-day.is-taken{
  cursor:not-allowed;
  opacity:.85;
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
  color: rgba(246,240,226,.78);
}

.cd-day.is-past{
  cursor:not-allowed;
  opacity:.45;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(246,240,226,.55);
}

.cd-day.is-selected{
  border-color: rgba(34,197,94,.65);
  background: rgba(34,197,94,.12);
}

/* Form */
.cd-form{
  margin-top:12px;
}

.cd-form__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
.cd-form__grid label span{
  display:block;
  margin-bottom:6px;
  color: rgba(246,240,226,.86);
  font-size:12px;
}
.cd-form__grid input,
.cd-form__grid select{
  width:100%;
}

@media (max-width: 1100px){
  .cd-form__grid{
    grid-template-columns: 1fr;
  }
}

.cd-cost{
  margin-top:10px;
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  color: rgba(246,240,226,.92);
}
.cd-cost__hint{
  margin-left:8px;
  color: rgba(246,240,226,.65);
  font-size:12px;
}

.cd-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* HOME gold boxes */
.cd-home{
  margin-top:12px;
  margin-bottom:12px;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(245,158,11,.40);
  background: linear-gradient(180deg, rgba(245,158,11,.14), rgba(0,0,0,.10));
}

.cd-home__title{
  font-weight:800;
  margin-bottom:10px;
  color: rgba(246,240,226,.95);
  letter-spacing:.2px;
}

.cd-item{
  border-radius:10px;
  border:1px solid rgba(245,158,11,.28);
  background: rgba(0,0,0,.12);
  padding:10px;
  margin-top:10px;
}

/* === układ: lewo nazwa, środek opis, prawo timer === */
.cd-item__row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center; /* ważne: wyśrodkowanie pionowe */
  flex-wrap:nowrap;
}

.cd-item__left{
  min-width:170px;
  flex:0 0 auto;
}

.cd-item__center{
  flex:1 1 auto;
  min-width:220px;
}

/* nazwa ma kolor odliczania (złoto) */
.cd-item__name{
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
  margin:0;
}
.cd-item__name a{
  color: rgba(245,158,11,.95);
  text-decoration:none;
}
.cd-item__name a:hover{
  text-decoration:underline;
}

.cd-item__tag{
  margin-top:4px;
  color: rgba(246,240,226,.86);
  font-size:12px;
}

.cd-item__meta{
  margin-top:6px;
  color: rgba(246,240,226,.78);
  font-size:12px;
  line-height:1.35;
}

/* === PIERWOTNY TIMER: RAMKA PO PRAWEJ + ŚRODEK === */
.cd-item__right{
  flex:0 0 170px;
  min-width:170px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(245,158,11,.35);
  background: rgba(0,0,0,.10);
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}

.cd-clock{
  font-weight:900;
  font-size:16px;
  letter-spacing:.3px;
  color: rgba(245,158,11,.95);
  line-height:1.05;
}

.cd-clock__sub{
  margin-top:0;
  color: rgba(246,240,226,.60);
  font-size:11px;
  line-height:1.05;
}

/* responsywka: na wąsko timer spada pod opis */
@media (max-width: 900px){
  .cd-item__row{
    flex-wrap:wrap;
  }
  .cd-item__right{
    flex:1 1 100%;
    min-width:0;
  }
}
