/* ============================================================
   CHRIST FAMILY CHURCH — COMPONENTS STYLESHEET
   Reusable UI components across all pages
   ============================================================ */

/* ── Cards (base) ── */
.cfc-card {
  background: linear-gradient(145deg, rgba(75,0,130,.18), rgba(13,27,62,.92));
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 16px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.cfc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 20px rgba(201,168,76,.1);
  border-color: rgba(201,168,76,.5);
}

/* ── Stat Badges ── */
.stat-badge {
  background: linear-gradient(145deg, rgba(75,0,130,.2), rgba(13,27,62,.9));
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}

/* ── Ministry Tags ── */
.ministry-tag {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .65rem;
  letter-spacing: .06em;
  font-family: 'Cinzel', serif;
}

/* ── Day Badges (Events) ── */
.day-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: .65rem;
  letter-spacing: .08em;
}
.day-sunday    { background: rgba(201,168,76,.15); color: var(--gold); border: 1px solid rgba(201,168,76,.4); }
.day-monday    { background: rgba(96,165,250,.1);  color: #60a5fa;    border: 1px solid rgba(96,165,250,.3); }
.day-tuesday   { background: rgba(167,139,250,.1); color: #a78bfa;    border: 1px solid rgba(167,139,250,.3); }
.day-wednesday { background: rgba(52,211,153,.1);  color: #34d399;    border: 1px solid rgba(52,211,153,.3); }
.day-thursday  { background: rgba(232,121,249,.1); color: #e879f9;    border: 1px solid rgba(232,121,249,.3); }
.day-friday    { background: rgba(251,146,60,.1);  color: #fb923c;    border: 1px solid rgba(251,146,60,.3); }
.day-saturday  { background: rgba(244,114,182,.1); color: #f472b6;    border: 1px solid rgba(244,114,182,.3); }

/* ── Form Fields ── */
.form-field {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 6px;
  padding: .85rem 1rem;
  color: #f0e8d0;
  font-family: 'Lato', sans-serif;
  font-size: .9rem;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
  outline: none;
}
.form-field:focus {
  border-color: var(--gold);
  background: rgba(201,168,76,.07);
  box-shadow: 0 0 0 4px rgba(201,168,76,.15), 0 0 20px rgba(201,168,76,.08);
  transform: scale(1.005);
}
.form-field::placeholder { color: #4b5563; }

select.form-field option { background: var(--navy); color: #f0e8d0; }

/* ── Series / Filter Badges ── */
.series-badge {
  display: inline-block;
  padding: .25rem .8rem;
  border-radius: 999px;
  font-size: .65rem;
  letter-spacing: .1em;
  font-family: 'Cinzel', serif;
  background: rgba(75,0,130,.3);
  border: 1px solid rgba(167,139,250,.4);
  color: #c4b5fd;
}

.filter-btn {
  padding: .45rem 1rem;
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  letter-spacing: .08em;
  border: 1px solid rgba(201,168,76,.3);
  color: rgba(240,232,208,.7);
  background: transparent;
  cursor: pointer;
  transition: all .2s;
}
.filter-btn:hover,
.filter-btn.active {
  background: linear-gradient(135deg, var(--gold-l), var(--gold));
  color: var(--navy);
  border-color: var(--gold);
}

/* ── Time Pills ── */
.time-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.25);
  color: var(--gold);
  font-size: .72rem;
  font-family: 'Cinzel', serif;
  letter-spacing: .06em;
}

/* ── Copy Button ── */
.copy-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.3);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
  font-size: .7rem;
  flex-shrink: 0;
}
.copy-btn:hover { background: rgba(201,168,76,.25); }
.copy-btn.copied { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.4); color: #4ade80; }

/* ── Video Wrapper (16:9) ── */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  border: 1px solid rgba(201,168,76,.2);
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* ── Progress Bar ── */
.progress-track {
  width: 100%;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(201,168,76,.2);
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9E7B2E, var(--gold-l));
  transition: width 2s ease;
  width: 0%;
}

/* ── Countdown Boxes ── */
.countdown-box-glass {
  width: 72px; height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(201,168,76,.4);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
}
.countdown-num {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 0 20px rgba(201,168,76,.5);
}
.countdown-lbl {
  font-size: .6rem;
  color: rgba(240,232,208,.7);
  letter-spacing: .12em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .countdown-box-glass { width: 90px; height: 90px; border-radius: 18px; }
  .countdown-num { font-size: 2.2rem; }
}
@media (max-width: 375px) {
  .countdown-box-glass { width: 58px !important; height: 58px !important; }
  .countdown-num { font-size: 1.4rem !important; }
}