/* Church Reading Plan — v1.0.0 */
:root {
  --crp-blue:      #3a489b;
  --crp-dark:      #162d68;
  --crp-yellow:    #dddb00;
  --crp-bg:        #f0f2fa;
  --crp-card:      #ffffff;
  --crp-border:    #dde1f0;
  --crp-text:      #111827;
  --crp-muted:     #6b7280;
  --crp-radius:    14px;
  --crp-speed:     0.2s;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.crp-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px;
  padding: 11px 22px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  text-decoration: none !important;
  transition: all var(--crp-speed) !important;
}
.crp-btn-primary {
  background: var(--crp-blue) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(58,72,155,.25) !important;
}
.crp-btn-primary:hover {
  background: var(--crp-yellow) !important;
  color: #111 !important;
  transform: translateY(-1px) !important;
}
.crp-btn-outline {
  background: transparent !important;
  border-color: currentColor !important;
  color: var(--crp-blue) !important;
}
.crp-btn-outline:hover { opacity: .8; }
.crp-btn-ghost {
  background: var(--crp-bg) !important;
  color: var(--crp-muted) !important;
  border-color: var(--crp-border) !important;
}
.crp-btn-ghost:hover { border-color: var(--crp-blue) !important; color: var(--crp-blue) !important; }

/* ── Page header ─────────────────────────────────────────────── */
.crp-page-header { text-align:center; padding: 24px 16px 20px; }
.crp-page-header h2 { font-size:22px; font-weight:900; color:var(--crp-blue); margin:0 0 6px; }
.crp-page-header p  { font-size:14px; color:var(--crp-muted); margin:0; }

/* ── Plans grid ──────────────────────────────────────────────── */
.crp-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 16px;
  padding: 0 16px 40px;
}

.crp-plan-card {
  background: var(--crp-card);
  border: 1px solid var(--crp-border);
  border-radius: var(--crp-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: transform var(--crp-speed), box-shadow var(--crp-speed);
}
.crp-plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(58,72,155,.1);
}
.crp-plan-subscribed { background: #f8f9ff; }
.crp-plan-active-badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--crp-blue); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; letter-spacing: .05em;
}
.crp-plan-icon { font-size: 36px; }
.crp-plan-title { font-size:17px; font-weight:800; color:var(--crp-text); margin:0; line-height:1.3; }
.crp-plan-desc  { font-size:13px; color:var(--crp-muted); margin:0; line-height:1.6; flex:1; }
.crp-plan-meta  { display:flex; gap:12px; font-size:12px; color:var(--crp-muted); flex-wrap:wrap; }

/* ── Progress bar ────────────────────────────────────────────── */
.crp-progress-wrap { display:flex; align-items:center; gap:10px; }
.crp-progress-bar {
  flex:1; height:8px;
  background: var(--crp-border);
  border-radius: 4px; overflow:hidden;
}
.crp-progress-fill {
  height:100%; border-radius:4px;
  background: var(--crp-blue);
  transition: width .5s ease;
}
.crp-progress-pct { font-size:12px; font-weight:700; color:var(--crp-blue); flex-shrink:0; }
.crp-progress-large .crp-progress-bar { height:10px; }

/* ── My plan reader ──────────────────────────────────────────── */
.crp-my-plan { max-width:680px; margin:0 auto; padding:0 16px 40px; }

.crp-plan-reader {
  background: var(--crp-card);
  border: 1px solid var(--crp-border);
  border-radius: var(--crp-radius);
  overflow: hidden;
  margin-bottom: 24px;
}

.crp-reader-header {
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, var(--crp-dark), var(--crp-blue));
  color: #fff;
}
.crp-reader-plan-info { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.crp-reader-plan-name { font-size:15px; font-weight:700; }
.crp-reader-day { font-size:13px; opacity:.8; background:rgba(255,255,255,.15); padding:3px 10px; border-radius:20px; }
.crp-progress-wrap.crp-progress-large { }
.crp-progress-large .crp-progress-bar { background:rgba(255,255,255,.2); }
.crp-progress-large .crp-progress-fill { background: var(--crp-yellow); }
.crp-progress-large .crp-progress-pct { color:var(--crp-yellow); }

.crp-day-title { padding:16px 20px 8px; border-bottom:1px solid var(--crp-border); }
.crp-day-label { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--crp-blue); display:block; margin-bottom:4px; }
.crp-day-title h3 { font-size:16px; font-weight:700; color:var(--crp-text); margin:0; }

/* ── Reading items ───────────────────────────────────────────── */
.crp-readings-list { padding:8px 20px; }

.crp-reading-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--crp-border);
  transition: opacity var(--crp-speed);
}
.crp-reading-item:last-child { border-bottom:none; }
.crp-reading-done { opacity:.55; }

.crp-check-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--crp-border) !important;
  background: transparent !important;
  color: var(--crp-muted);
  cursor: pointer !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--crp-speed) !important;
  padding: 0 !important;
}
.crp-check-btn:hover { border-color: var(--crp-blue) !important; color: var(--crp-blue) !important; }
.crp-check-btn.crp-checked {
  background: var(--crp-blue) !important;
  border-color: var(--crp-blue) !important;
  color: #fff !important;
}

.crp-reading-info { flex:1; min-width:0; }
.crp-reading-ref { font-size:15px; font-weight:600; color:var(--crp-text); }

.crp-read-btn {
  display: inline-flex; align-items:center; gap:4px;
  padding: 5px 12px !important;
  border: 1.5px solid var(--crp-border) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--crp-blue) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  flex-shrink: 0;
  transition: all var(--crp-speed) !important;
}
.crp-read-btn:hover { background: var(--crp-blue) !important; color:#fff !important; border-color:var(--crp-blue) !important; }

/* Mark all + navigation */
.crp-mark-all-btn { margin:8px 20px 16px; }
.crp-day-nav {
  display: flex; justify-content: space-between; align-items:center;
  padding: 12px 20px; border-top: 1px solid var(--crp-border);
  gap: 10px; flex-wrap: wrap;
}

/* Day done */
.crp-day-done-msg {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 20px; padding: 14px 16px;
  background: linear-gradient(135deg,#f0fdf4,#dcfce7);
  border: 1.5px solid #86efac;
  border-radius: 10px;
  font-size: 14px; color: #15803d;
}
.crp-day-done-msg span { font-size:28px; }
.crp-day-done-msg strong { display:block; font-weight:700; margin-bottom:2px; }
.crp-day-done-msg p { margin:0; opacity:.8; font-size:13px; }

/* Complete banner */
.crp-complete-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 20px; background: linear-gradient(135deg,#fef9c3,#fef3c7);
  border-top: 3px solid var(--crp-yellow);
  font-size: 14px;
}
.crp-complete-banner span { font-size:36px; }
.crp-complete-banner strong { display:block; font-weight:800; color:var(--crp-dark); margin-bottom:4px; }
.crp-complete-banner p { margin:0; color:var(--crp-muted); }

/* Plan separator */
.crp-plan-sep { border:none; border-top:2px dashed var(--crp-border); margin:0 0 24px; }

/* Empty state */
.crp-empty { text-align:center; padding:60px 20px; color:var(--crp-muted); }
.crp-empty-icon { font-size:52px; display:block; margin-bottom:16px; }
.crp-empty h3 { font-size:18px; font-weight:700; color:var(--crp-text); margin:0 0 8px; }
.crp-empty p { margin:0 0 20px; }

/* Login prompt */
.crp-login-prompt { text-align:center; padding:40px 20px; }
.crp-login-prompt p { font-size:15px; color:var(--crp-muted); margin-bottom:16px; }

/* Mobile */
@media (max-width:600px) {
  .crp-plans-grid { grid-template-columns:1fr; }
  .crp-reading-ref { font-size:14px; }
}

/* ── Bible Reader Panel (slide-in) ──────────────────────────── */
.crp-bible-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.crp-bible-panel[hidden] { display: none; }

.crp-bible-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.crp-bible-panel-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  height: 85vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: crpSlideUp .3s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.2);
}

@keyframes crpSlideUp {
  from { transform: translateY(100%); opacity: .6; }
  to   { transform: translateY(0);    opacity: 1; }
}

@media (min-width: 768px) {
  .crp-bible-panel {
    align-items: stretch;
    justify-content: flex-end;
  }
  .crp-bible-panel-inner {
    width: 480px;
    max-width: 480px;
    height: 100vh;
    border-radius: 20px 0 0 20px;
    animation: crpSlideRight .3s cubic-bezier(.32,.72,0,1);
  }
  @keyframes crpSlideRight {
    from { transform: translateX(100%); opacity: .6; }
    to   { transform: translateX(0);    opacity: 1; }
  }
}

.crp-bible-panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--crp-border);
  background: linear-gradient(135deg, #162d68, #3a489b);
  color: #fff;
}
.crp-bible-panel-ref {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.crp-bible-panel-close {
  width: 32px; height: 32px;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  flex-shrink: 0;
}
.crp-bible-panel-close:hover { background: rgba(255,255,255,.3); }

#crp-bible-reader-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Override Bible Reader styles inside the panel */
#crp-bible-reader-container .cbr-reader {
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
}

@keyframes crpSpin { to { transform: rotate(360deg); } }