/* Spiritual Growth Path — styles v2
   Palette matches beliefs.php (navy + gold, Playfair Display + Inter)
   Icons: Flaticon UIcons (regular-rounded), loaded in includes/header.php */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --primary:#1a3a5c;--primary-light:#2a5a8c;--accent:#c9a84c;--accent-light:#e8c96a;
  --offwhite:#f8f6f2;--text:#1f2937;--gray:#6b7280;--dark:#111827;
  --card-bg:#ffffff;--border:#e5e0d8;
  --shadow:0 4px 24px rgba(26,58,92,0.1);--shadow-lg:0 12px 48px rgba(26,58,92,0.18);
  --radius:16px;--transition:0.25s ease;
  --success:#2f7d4f;--success-light:#e6f4ea;
  --hero-bg:#12283f;
}
html{scroll-behavior:smooth;}
body{font-family:'Inter',Arial,sans-serif;color:var(--text);background:var(--offwhite);min-height:100vh;display:flex;flex-direction:column;}
.page-main{flex:1 0 auto;display:flex;flex-direction:column;width:100%;}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;line-height:1.25;color:var(--dark);}
a{text-decoration:none;color:inherit;}
.container{max-width:1100px;margin:0 auto;padding:0 24px;}
i.fi{line-height:1;}

/* NAV */
#gnav{background:var(--primary);padding:16px 0;box-shadow:0 2px 20px rgba(0,0,0,0.2);position:relative;z-index:5;}
.gnav-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.gnav-logo{color:#fff;font-family:'Playfair Display',serif;font-weight:700;font-size:1.05rem;}
.gnav-logo span{display:block;color:var(--accent);font-size:0.68rem;font-family:'Inter',sans-serif;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;}
.gnav-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.gnav-link{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,0.8);font-size:0.87rem;font-weight:500;padding:8px 16px;border-radius:50px;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.08);transition:var(--transition);}
.gnav-link:hover{color:#fff;border-color:rgba(201,168,76,0.6);}
.gnav-link.accent{background:var(--accent);color:#1a2a3a;border-color:var(--accent);font-weight:700;}
.gnav-link.accent:hover{background:var(--accent-light);}

/* SUBNAV (My Dashboard / My Progress pills, shown below hero) */
.subnav-bar{background:#fff;border-bottom:1px solid var(--border);padding:14px 0;}
.subnav-inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;row-gap:12px;}
.subnav-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.subnav-group-features{border-left:2px solid var(--border);padding-left:14px;margin-left:auto;}
@media(max-width:700px){
  .subnav-group-features{border-left:none;border-top:2px solid var(--border);padding-left:0;padding-top:12px;margin-left:0;width:100%;}
}
.subnav-link{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:50px;font-size:0.86rem;font-weight:700;color:var(--primary);border:1.5px solid var(--border);background:var(--offwhite);transition:var(--transition);}
.subnav-link:hover{border-color:var(--primary-light);color:var(--primary-light);}
.subnav-link.current{background:var(--primary);color:#fff;border-color:var(--primary);}

.subnav-link-primary{color:#1f6d43;border-color:transparent;background:#e3f6ea;}
.subnav-link-primary:hover{border-color:#2f9d5c;color:#1a5c38;}
.subnav-link-primary.current{background:#2f9d5c;color:#fff;border-color:#2f9d5c;}
.subnav-link-primary.current:hover{color:#fff;}

/* PAGE HERO — visually separated from the nav bar */
.g-hero{background:var(--hero-bg);padding:56px 0 42px;text-align:center;position:relative;overflow:hidden;border-top:3px solid var(--accent);}
.g-hero h1{color:#fff;font-size:clamp(1.9rem,4.5vw,2.8rem);margin-bottom:12px;}
.g-hero h1 em{color:var(--accent);font-style:normal;}
.g-hero p{color:rgba(255,255,255,0.75);font-size:1.02rem;max-width:600px;margin:0 auto;line-height:1.7;}

/* GENERIC SECTIONS */
.g-section{padding:48px 0;}
.g-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);}
.g-card + .g-card{margin-top:24px;}

/* AUTH FORMS */
.auth-wrap{max-width:440px;margin:56px auto;padding:0 24px;}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:40px 36px;box-shadow:var(--shadow-lg);}
.auth-card h1{font-size:1.6rem;color:var(--primary);margin-bottom:6px;text-align:center;}
.auth-sub{color:var(--gray);text-align:center;font-size:0.92rem;margin-bottom:28px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:0.85rem;font-weight:600;color:var(--dark);margin-bottom:6px;}
.field input,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:0.95rem;font-family:inherit;color:var(--text);background:#fbfaf8;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--primary-light);}
/* Honeypot field for signup spam protection -- invisible to real visitors
   (off-screen, not display:none, since some bots skip hidden fields), but
   still present in the DOM for simple bots that auto-fill every input. */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;text-align:center;background:var(--accent);color:#1a2a3a;padding:13px 20px;border-radius:50px;font-weight:700;font-size:0.95rem;border:none;cursor:pointer;transition:var(--transition);}
.btn:hover{background:var(--accent-light);}
.btn-secondary{background:transparent;border:2px solid var(--primary);color:var(--primary);}
.btn-secondary:hover{background:var(--primary);color:#fff;}
.auth-flip{text-align:center;margin-top:18px;font-size:0.88rem;color:var(--gray);}
.auth-flip a{color:var(--primary-light);font-weight:600;}
.alert{padding:12px 16px;border-radius:10px;font-size:0.87rem;margin-bottom:18px;}
.alert-error{background:#fdecec;color:#9b2c2c;border:1px solid #f3b8b8;}
.alert-success{background:var(--success-light);color:var(--success);border:1px solid #b9e0c6;}

/* Gender choice on signup */
.gender-choice{display:flex;gap:14px;}
.gender-option{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:0.9rem;font-weight:600;color:var(--text);background:#fbfaf8;cursor:pointer;transition:var(--transition);}
.gender-option i.fi{color:var(--primary-light);}
.gender-option:has(input:checked){border-color:var(--primary);background:#eef3f8;}
.gender-option input{accent-color:var(--primary);}

/* CENTERED PILL BUTTON (Back to Dashboard / Back to Module, etc.) */
.btn-center-row{display:flex;justify-content:center;margin-top:28px;}
.btn-outline-accent{display:inline-flex;align-items:center;gap:9px;padding:13px 30px;border-radius:50px;font-weight:700;font-size:0.9rem;color:#1a2a3a;background:var(--accent);border:2px solid var(--accent);transition:var(--transition);}
.btn-outline-accent:hover{background:var(--accent-light);border-color:var(--accent-light);transform:translateY(-2px);box-shadow:var(--shadow);}

/* DASHBOARD */
.welcome-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:32px;}
.welcome-row h1{display:flex;align-items:center;gap:12px;font-size:1.9rem;color:var(--primary);}
.welcome-row p{color:var(--gray);margin-left:46px;}

/* Colored gender icon shown before the member's name */
.gender-icon{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem;flex-shrink:0;background:var(--gray);}
.gender-icon.male{background:#2f6f9e;}
.gender-icon.female{background:#d6598f;}

/* AVATARS (profile picture picker + display badges reused across the app) */
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:12px;margin-top:6px;max-width:520px;}
.avatar-choice{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:50%;border:3px solid transparent;cursor:pointer;overflow:hidden;background:#fbfaf8;transition:var(--transition);}
.avatar-choice img{width:100%;height:100%;object-fit:cover;display:block;}
.avatar-choice input{position:absolute;opacity:0;width:0;height:0;}
.avatar-choice:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.avatar-choice.selected,.avatar-choice:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 3px rgba(42,90,140,0.15);}
.avatar-choice-none{flex-direction:column;gap:3px;border:1.5px dashed var(--border);}
.avatar-none-box{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gray);font-size:0.95rem;background:#eee;}
.avatar-choice-label{font-size:0.62rem;color:var(--gray);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;}
.avatar-group-label{font-size:0.78rem;font-weight:700;color:var(--dark);margin:14px 0 4px;text-transform:uppercase;letter-spacing:0.04em;}

/* Tabbed avatar picker (None / Male / Female) — keeps the form compact by
   hiding the 40-wide grids until a tab is actually clicked. */
.avatar-tabs{display:flex;gap:8px;margin-top:6px;}
.avatar-tab-btn{padding:8px 18px;border-radius:50px;border:1.5px solid var(--border);background:#fbfaf8;color:var(--text);font-weight:600;font-size:0.85rem;cursor:pointer;transition:var(--transition);}
.avatar-tab-btn:hover{border-color:var(--primary-light);}
.avatar-tab-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.avatar-tab-panel{margin-top:12px;max-height:340px;overflow-y:auto;padding-right:4px;}

/* Small circular avatar image used anywhere a member/child's chosen avatar
   is displayed (falls back to the gender-icon badge when no avatar is set —
   just render one or the other, never both). */
.avatar-badge{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;display:inline-block;border:1.5px solid var(--border);background:#fbfaf8;}
.avatar-badge.lg{width:76px;height:76px;border:2px solid var(--border);}
.avatar-badge.sm{width:26px;height:26px;border-width:1px;}
.chat-msg-meta .avatar-badge{align-self:center;}

.badge-pill{display:inline-flex;align-items:center;gap:11px;background:var(--primary);color:#fff;padding:11px 24px;border-radius:50px;}
.badge-pill i.fi{font-size:1.25rem;color:var(--accent);}
.badge-pill-text{display:flex;flex-direction:column;line-height:1.2;text-align:left;}
.badge-kicker{font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);font-weight:700;}
.badge-label{font-size:1.2rem;font-weight:800;}
.badge-pill.tier-0{background:#8a8f98;}
.badge-pill.tier-1{background:#6b7f5e;}
.badge-pill.tier-2{background:#3f7d5c;}
.badge-pill.tier-3{background:#2a6a8c;}
.badge-pill.tier-4{background:#2a5a8c;}
.badge-pill.tier-5{background:var(--accent);color:#1a2a3a;}
.badge-pill.tier-5 i.fi{color:#1a2a3a;}
.badge-pill.tier-5 .badge-kicker{color:#1a2a3a;opacity:0.65;}

.overall-progress{margin-bottom:36px;}
.progress-bar-track{background:#e9e4d9;border-radius:50px;height:16px;overflow:hidden;}
.progress-bar-fill{background:linear-gradient(90deg,var(--accent),var(--accent-light));height:100%;border-radius:50px;transition:width 0.5s ease;}
.progress-label{display:flex;justify-content:space-between;font-size:0.85rem;color:var(--gray);margin-top:8px;}

.track-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media(max-width:700px){.track-grid{grid-template-columns:1fr;}}
.track-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:var(--transition);position:relative;}
.track-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.track-card-top{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
.track-icon{width:42px;height:42px;border-radius:12px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;}
.track-icon i.fi{color:var(--accent);}
.track-card h3{font-size:1.2rem;color:var(--dark);}
.track-card p{color:var(--gray);font-size:0.88rem;line-height:1.6;margin-bottom:16px;}
.track-progress-label{display:flex;justify-content:space-between;font-size:0.8rem;color:var(--gray);margin-top:6px;margin-bottom:16px;}
.track-mini-bar{background:#e9e4d9;border-radius:50px;height:8px;overflow:hidden;}
.track-mini-fill{background:var(--primary);height:100%;border-radius:50px;}
.track-cta{display:inline-flex;align-items:center;gap:6px;font-size:0.85rem;font-weight:700;color:var(--primary-light);}
.track-cert-badge{position:absolute;top:20px;right:20px;color:var(--accent);font-size:1.3rem;}

/* LESSON LIST (per track) */
.lesson-list{display:flex;flex-direction:column;gap:12px;}
.lesson-row{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 20px;transition:var(--transition);}
.lesson-row:hover{box-shadow:var(--shadow);}
.lesson-row.done{border-color:#b9e0c6;background:var(--success-light);}
.lesson-row.locked{opacity:0.55;cursor:not-allowed;background:#f3f2ef;}
.lesson-num{width:36px;height:36px;flex-shrink:0;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;font-family:'Playfair Display',serif;}
.lesson-row.done .lesson-num{background:var(--success);}
.lesson-row.locked .lesson-num{background:#a8a8a8;}
.lesson-row-title{flex:1;}
.lesson-row-title h4{font-size:1.02rem;color:var(--dark);}
.lesson-row-title span{font-size:0.8rem;color:var(--gray);}
.lesson-status{display:inline-flex;align-items:center;gap:6px;font-size:0.78rem;font-weight:700;padding:6px 14px;border-radius:50px;background:#eee;color:var(--gray);white-space:nowrap;}
.lesson-status.done{background:var(--success);color:#fff;}
.lesson-status.locked{background:#dcdcdc;color:#777;}

/* CERTIFICATE CTA on track page */
.cert-cta{background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:var(--radius);padding:28px 32px;text-align:center;color:#fff;margin-bottom:28px;}
.cert-cta i.fi{font-size:2rem;color:var(--accent);display:block;margin-bottom:10px;}
.cert-cta h3{color:#fff;font-size:1.3rem;margin-bottom:8px;}
.cert-cta p{color:rgba(255,255,255,0.8);font-size:0.9rem;margin-bottom:18px;}

/* LESSON DETAIL */
.lesson-top-back{display:inline-flex;align-items:center;gap:6px;font-size:0.85rem;font-weight:600;color:var(--gray);margin-bottom:18px;transition:var(--transition);}
.lesson-top-back:hover{color:var(--primary-light);}
.lesson-top-back i{font-size:0.8rem;}
.lesson-header{margin-bottom:28px;}
.lesson-tag{display:inline-block;font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.lesson-header h1{font-size:clamp(1.6rem,3.5vw,2.3rem);color:var(--primary);}
.lesson-header .subtitle{color:var(--gray);font-size:1rem;margin-top:4px;}

.verse-box{background:var(--primary);color:#fff;border-radius:16px;padding:28px 32px;margin:24px 0;position:relative;}
.verse-box p{font-family:'Playfair Display',serif;font-style:italic;font-size:1.15rem;line-height:1.6;margin-bottom:10px;}
.verse-box span{color:var(--accent);font-weight:700;font-size:0.85rem;}

.lesson-block{margin-bottom:24px;}
.lesson-block h3{display:flex;align-items:center;gap:8px;font-size:0.78rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.lesson-block p{color:var(--text);line-height:1.8;font-size:1.02rem;white-space:pre-line;}

.reflection-box textarea{width:100%;min-height:110px;padding:14px;border:1.5px solid var(--border);border-radius:12px;font-family:inherit;font-size:0.98rem;resize:vertical;}

/* Bottom action row: Save for Later (left) + Mark Complete (right), small, centered as a group */
.lesson-bottom-actions{display:flex;justify-content:center;gap:14px;margin-top:20px;flex-wrap:wrap;}
.btn-sm{width:auto;padding:10px 22px;font-size:0.85rem;}

/* Prev / Next navigation: big, yellow, centered */
.lesson-prevnext{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap;}
.prevnext-btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#1a2a3a;padding:16px 28px;border-radius:50px;font-weight:700;font-size:0.95rem;border:2px solid var(--accent);transition:var(--transition);max-width:320px;}
.prevnext-btn:hover{background:var(--accent-light);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.prevnext-btn.disabled{background:#e5e0d8;border-color:#e5e0d8;color:#9a9a9a;pointer-events:none;}
.prevnext-btn span.label{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;display:block;opacity:0.75;}
.prevnext-btn span.title{display:block;font-size:0.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}

/* QUIZ */
.quiz-block{background:#fbfaf6;border:1.5px dashed var(--accent);border-radius:var(--radius);padding:26px 28px;margin-bottom:24px;}
.quiz-block h3{display:flex;align-items:center;gap:8px;color:var(--primary);font-size:1.05rem;margin-bottom:4px;font-family:'Playfair Display',serif;}
.quiz-intro{color:var(--gray);font-size:0.86rem;margin-bottom:18px;}
.quiz-question{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.quiz-question:last-of-type{border-bottom:none;margin-bottom:8px;}
.quiz-question-text{font-weight:700;color:var(--dark);margin-bottom:10px;font-size:0.96rem;}
.quiz-options{display:flex;flex-direction:column;gap:8px;}
.quiz-option{display:flex;align-items:center;gap:10px;padding:9px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:0.9rem;cursor:pointer;background:#fff;transition:var(--transition);}
.quiz-option:hover{border-color:var(--primary-light);}
.quiz-option input{accent-color:var(--primary);}
.quiz-option.correct{border-color:var(--success);background:var(--success-light);}
.quiz-option.incorrect{border-color:#d9534f;background:#fdecec;}
.quiz-score{text-align:center;padding:14px;border-radius:10px;font-weight:700;margin-top:8px;}
.quiz-score.good{background:var(--success-light);color:var(--success);}
.quiz-score.okay{background:#fff6e0;color:#8a6d1c;}

/* PROGRESS / REPORT PAGE */
.report-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.report-table th,.report-table td{text-align:left;padding:14px 18px;font-size:0.9rem;border-bottom:1px solid var(--border);}
.report-table th{background:var(--primary);color:#fff;font-weight:600;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em;}
.report-table tr:last-child td{border-bottom:none;}
.empty-state{text-align:center;padding:60px 20px;color:var(--gray);}
.empty-state .big-icon{font-size:3rem;margin-bottom:16px;display:block;color:var(--accent);}

/* CERTIFICATE */
.cert-page-wrap{max-width:900px;margin:0 auto;padding:40px 20px 60px;}
.certificate{position:relative;background:#fdfbf3;border:2px solid var(--accent);border-radius:8px;padding:16px;box-shadow:var(--shadow-lg);}
.certificate-inner{border:1.5px solid var(--accent);border-radius:6px;padding:52px 48px;text-align:center;position:relative;}
.certificate-inner::before,.certificate-inner::after{content:'';position:absolute;width:64px;height:64px;border:2px solid var(--accent);opacity:0.55;}
.certificate-inner::before{top:10px;left:10px;border-right:none;border-bottom:none;}
.certificate-inner::after{bottom:10px;right:10px;border-left:none;border-top:none;}
.cert-kicker{font-size:0.78rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px;}
.cert-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--primary);letter-spacing:0.04em;}
.cert-subtitle{font-size:0.85rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gray);margin-top:4px;margin-bottom:26px;}
.cert-presented{font-size:0.92rem;color:var(--gray);margin-bottom:6px;}
.cert-name{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:clamp(1.8rem,4vw,2.4rem);color:var(--dark);margin:8px 0 20px;border-bottom:2px solid var(--accent);display:inline-block;padding-bottom:8px;}
.cert-body-text{max-width:560px;margin:0 auto 30px;color:var(--text);font-size:1rem;line-height:1.8;}
.cert-body-text b{color:var(--primary);}
.cert-seal{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,var(--accent-light),var(--accent));display:flex;align-items:center;justify-content:center;margin:0 auto 8px;box-shadow:0 6px 18px rgba(201,168,76,0.5);}
.cert-seal i.fi{font-size:2rem;color:#1a2a3a;}
.cert-footer{display:flex;justify-content:space-between;align-items:flex-start;margin-top:40px;gap:20px;flex-wrap:wrap;}
.cert-sign{flex:1;min-width:180px;text-align:center;}
.cert-sign .signer-name{font-family:'Dancing Script',cursive;font-weight:700;font-size:2.1rem;color:var(--primary);line-height:1.2;margin-bottom:6px;}
.cert-sign .line{border-top:1.5px solid var(--dark);padding-top:6px;}
.cert-sign small{display:block;font-size:0.72rem;color:var(--gray);text-transform:uppercase;letter-spacing:0.08em;}
.cert-date{font-size:0.85rem;color:var(--gray);margin-top:22px;}
.cert-actions{display:flex;justify-content:center;gap:14px;margin-top:32px;flex-wrap:wrap;}

@media print{
  #gnav,.subnav-bar,footer.g-footer,.cert-actions{display:none !important;}
  body{background:#fff;}
  .cert-page-wrap{padding:0;max-width:100%;}
  .certificate{box-shadow:none;border:2px solid var(--accent);}
}

footer.g-footer{background:#0d2240;color:rgba(255,255,255,0.6);padding:28px 0;text-align:center;font-size:0.85rem;margin-top:48px;flex-shrink:0;}
footer.g-footer a{color:var(--accent);}

/* ============================================================
 * PRAYER WALL
 * ========================================================== */
.prayer-list{display:flex;flex-direction:column;gap:16px;margin-top:20px;}
.prayer-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);position:relative;}
.prayer-card.answered{border-color:var(--success);background:var(--success-light);}
.prayer-answered-tag{display:inline-flex;align-items:center;gap:6px;background:var(--success);color:#fff;padding:3px 12px;border-radius:50px;font-size:0.72rem;font-weight:700;margin-bottom:10px;}
.prayer-text{color:var(--text);font-size:0.98rem;line-height:1.6;margin-bottom:14px;}
.prayer-meta{display:flex;justify-content:space-between;font-size:0.8rem;color:var(--gray);margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.prayer-meta i{margin-right:4px;}
.prayer-actions{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:14px;}
.btn-sm-inline{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:50px;font-weight:700;font-size:0.82rem;color:#1a2a3a;background:var(--accent);transition:var(--transition);}
.btn-sm-inline:hover{background:var(--accent-light);}
.btn-sm-inline.active{background:var(--primary);color:#fff;}

/* ============================================================
 * SMALL GROUPS
 * ========================================================== */
.group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:20px;}
.group-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.group-card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.group-card-top h3{font-size:1.1rem;margin:0;}
.group-card p{color:var(--gray);font-size:0.88rem;margin-bottom:12px;}
.group-facts{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:6px;}
.group-facts li{font-size:0.82rem;color:var(--text);display:flex;align-items:center;gap:8px;}
.group-facts li i{color:var(--primary-light);width:14px;}
.group-status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:50px;font-size:0.78rem;font-weight:700;margin-top:auto;}
.group-status-pill.approved{background:var(--success-light);color:var(--success);}
.group-status-pill.pending{background:#fff3d6;color:#9a7300;}

/* ============================================================
 * FAMILY / CHILD PROFILES (reuses gender-icon + track-card classes)
 * ========================================================== */
.gender-icon.male{background:#e5f0fb;color:#2e6fb5;}
.gender-icon.female{background:#fbe9f2;color:#c14f8a;}

/* ============================================================
 * SERMONS
 * ========================================================== */
.sermon-list{display:flex;flex-direction:column;gap:14px;margin-top:20px;}
.sermon-card{display:flex;align-items:center;gap:18px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow);transition:var(--transition);}
.sermon-card:hover{border-color:var(--primary-light);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.sermon-card-icon{width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.sermon-card-body{flex:1;}
.sermon-card-body h3{font-size:1.05rem;margin:0 0 6px;}
.sermon-card-body p{color:var(--gray);font-size:0.86rem;margin:6px 0 0;}
.sermon-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:0.85rem;color:var(--gray);margin:0;font-weight:500;}
.sermon-meta i{margin-right:4px;}
.sermon-card-arrow{color:var(--gray);font-size:1.1rem;}

.sermon-save-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1.5px solid var(--border);color:var(--gray);padding:8px 16px;border-radius:50px;font-size:0.82rem;font-weight:600;cursor:pointer;transition:var(--transition);font-family:'Inter',sans-serif;}
.sermon-save-btn:hover{border-color:var(--success);color:var(--success);}
.sermon-save-btn.saved{background:var(--success);border-color:var(--success);color:#fff;}
.saved-sermons-section{margin-top:36px;padding-top:28px;border-top:1px solid var(--border);}
.saved-sermons-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;}
.saved-sermons-actions{display:flex;gap:10px;flex-wrap:wrap;}
.saved-sermon-row{display:flex;align-items:center;gap:14px;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:10px;}
.saved-sermon-row input[type=checkbox]{width:18px;height:18px;cursor:pointer;flex-shrink:0;}
.saved-sermon-row .ss-info{flex:1;min-width:0;}
.saved-sermon-row .ss-title{font-weight:600;font-size:0.95rem;display:block;}
.saved-sermon-row .ss-meta{font-size:0.8rem;color:var(--gray);}
.saved-sermon-row a.ss-watch{color:var(--primary);font-weight:600;font-size:0.85rem;white-space:nowrap;}

/* ============================================================
 * DAILY READING PLAN
 * ========================================================== */
.reading-plan-list{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.reading-plan-row{display:flex;align-items:flex-start;gap:16px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;transition:var(--transition);}
.reading-plan-row.done{background:rgba(201,168,76,0.06);border-color:var(--accent);}
.reading-plan-check{background:transparent;border:none;cursor:pointer;font-size:1.5rem;color:var(--gray);flex-shrink:0;padding:2px 0 0;line-height:1;}
.reading-plan-row.done .reading-plan-check{color:var(--accent);}
.reading-plan-body{flex:1;display:flex;flex-direction:column;gap:2px;}
.reading-plan-day{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent);}
.reading-plan-title{font-size:1rem;font-weight:600;color:var(--dark);}
.reading-plan-ref{font-size:0.85rem;color:var(--primary);font-weight:500;}
.reading-plan-desc{font-size:0.85rem;color:var(--gray);margin-top:4px;}

/* ============================================================
 * PERSONAL LESSON JOURNAL
 * ========================================================== */
.journal-box{border-left:3px solid var(--accent);padding-left:20px;}
.journal-list{display:flex;flex-direction:column;gap:14px;margin-top:20px;}
.journal-entry{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);}
.journal-entry-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.journal-entry-lesson{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent);}
.journal-entry-title{font-size:1.05rem;font-weight:600;color:var(--dark);margin-top:2px;}
.journal-entry-date{font-size:0.78rem;color:var(--gray);white-space:nowrap;}
.journal-entry-note{font-size:0.92rem;color:var(--text);line-height:1.7;}
.journal-entry-note p{margin-bottom:10px;}
.journal-entry-note p:last-child{margin-bottom:0;}
.journal-entry-note ul,.journal-entry-note ol{margin:0 0 10px 22px;}
.journal-entry-note blockquote{border-left:3px solid var(--border);padding-left:14px;color:var(--gray);margin:0 0 10px;}
.journal-entry-note strong{font-weight:700;}

/* ============================================================
 * NEXT-STEP PILL (used in admin, but styled here alongside badges)
 * ========================================================== */
.next-step-pill{border:none;border-radius:50px;padding:6px 14px;font-size:0.78rem;font-weight:700;cursor:pointer;color:#fff;background:var(--gray);}
.next-step-visitor{background:#9ca3af;}
.next-step-connected{background:#3b82f6;}
.next-step-in_group{background:#8b5cf6;}
.next-step-baptized{background:#0ea5e9;}
.next-step-serving{background:var(--success);}

/* ============================================================
 * MEMBER-FACING FORM FIELDS (used on prayer/groups/family/giving)
 * Bigger, clearer inputs with labels — mirrors the admin form
 * styling but sized up for member-facing pages.
 * ========================================================== */
.g-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:6px;}
@media(max-width:640px){.g-form-grid{grid-template-columns:1fr;}}
.g-field{margin-bottom:18px;}
.g-field.full{grid-column:1 / -1;}
.g-field label{display:block;font-size:0.88rem;font-weight:700;color:var(--dark);margin-bottom:7px;}
.g-field .hint{display:block;font-weight:400;color:var(--gray);font-size:0.78rem;margin-top:3px;}
.g-field input[type=text],
.g-field input[type=number],
.g-field input[type=email],
.g-field input[type=date],
.g-field input[type=password],
.g-field select,
.g-field textarea{
  width:100%;
  padding:13px 15px;
  border:1.5px solid var(--border);
  border-radius:11px;
  font-size:1rem;
  font-family:inherit;
  color:var(--text);
  background:#fbfaf8;
  transition:var(--transition);
}
.g-field input[type=date]{cursor:pointer;color-scheme:light;}
.g-field select{cursor:pointer;appearance:auto;}
.g-field textarea{min-height:100px;resize:vertical;}
.g-field input:focus,.g-field select:focus,.g-field textarea:focus{
  outline:none;border-color:var(--primary-light);background:#fff;
  box-shadow:0 0 0 3px rgba(42,90,140,0.12);
}

/* A fixed-size textarea that can't be dragged/resized by the user
   (used for the Prayer Wall's "share a request" box). */
.fixed-textarea{
  width:100%;
  height:130px;
  resize:none;
  padding:14px;
  border:1.5px solid var(--border);
  border-radius:12px;
  font-family:inherit;
  font-size:0.98rem;
  background:#fbfaf8;
  transition:var(--transition);
}
.fixed-textarea:focus{outline:none;border-color:var(--primary-light);background:#fff;box-shadow:0 0 0 3px rgba(42,90,140,0.12);}

/* Member-facing data table (e.g. Giving history) — mirrors the
   admin table's spacing so columns aren't crammed together. */
.g-table{width:100%;border-collapse:collapse;}
.g-table th,.g-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:0.9rem;}
.g-table th{font-size:0.76rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--gray);font-weight:700;}
.g-table tr:last-child td{border-bottom:none;}
.g-table .g-table-btn{border:none;background:#fdecec;color:#9b2c2c;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:0.85rem;transition:var(--transition);}
.g-table .g-table-btn:hover{background:#f9d3d3;}

/* Family card polish */
.child-age-tag{display:inline-block;color:var(--gray);font-weight:600;font-size:0.95rem;font-family:'Inter',sans-serif;margin-left:6px;}
.child-card-actions summary{cursor:pointer;color:var(--primary-light);font-size:0.88rem;font-weight:600;margin-top:16px;list-style:none;display:inline-flex;align-items:center;gap:6px;}
.child-card-actions summary::-webkit-details-marker{display:none;}
.child-card-actions summary:before{content:"\25B8";font-size:0.75rem;transition:transform 0.2s ease;}
.child-card-actions[open] summary:before{transform:rotate(90deg);}
.child-edit-form{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);}

/* ============================================================
 * NOTIFICATION BELL (in nav)
 * ========================================================== */
.gnav-bell{position:relative;padding:8px 12px;}
.gnav-bell-badge{position:absolute;top:0;right:2px;background:#e64b4b;color:#fff;font-size:0.62rem;font-weight:800;border-radius:50px;padding:1px 5px;line-height:1.3;min-width:16px;text-align:center;}

.notification-actions{display:flex;justify-content:flex-end;gap:10px;margin-bottom:14px;}
.notification-list{display:flex;flex-direction:column;gap:10px;}
.notification-row{display:flex;align-items:stretch;gap:8px;}
.notification-open-form{flex:1;min-width:0;}
.notification-item{width:100%;display:flex;align-items:center;gap:14px;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:16px 18px;text-align:left;cursor:pointer;transition:var(--transition);position:relative;}
.notification-item:hover{border-color:var(--primary-light);}
.notification-item.unread{background:#eef4fa;border-color:var(--primary-light);}
.notification-icon{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.notification-body{display:flex;flex-direction:column;gap:3px;flex:1;}
.notification-message{font-size:0.92rem;color:var(--text);font-weight:500;}
.notification-date{font-size:0.76rem;color:var(--gray);}
.notification-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.notification-delete-form{flex-shrink:0;display:flex;}
.notification-delete-btn{width:40px;border:1px solid var(--border);border-radius:12px;background:var(--card-bg);color:var(--gray);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:var(--transition);}
.notification-delete-btn:hover{background:#fdeaea;border-color:#e6b3b3;color:#c0392b;}

/* ============================================================
 * EVENTS & SERVING SLOTS (shared "event-card" layout)
 * ========================================================== */
.event-list{display:flex;flex-direction:column;gap:14px;margin-top:16px;}
.event-card{display:flex;gap:18px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);}
.event-card.past{opacity:0.65;}
.event-date-block{flex-shrink:0;width:64px;height:64px;border-radius:12px;background:var(--primary);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.event-month{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;font-weight:700;}
.event-day{font-size:1.5rem;font-weight:800;line-height:1;}
.event-card-body{flex:1;}
.event-card-body h3{font-size:1.05rem;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.event-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:0.82rem;color:var(--gray);margin-bottom:8px;}
.event-meta i{margin-right:4px;}
.event-desc{color:var(--text);font-size:0.9rem;margin-bottom:12px;}

/* ============================================================
 * ANNOUNCEMENTS
 * ========================================================== */
.announcement-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);position:relative;}
.announcement-card.pinned{border-color:var(--accent);}
.announcement-card h3{font-size:1.05rem;margin-bottom:10px;display:flex;align-items:center;gap:8px;}

.announcement-banner{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin-bottom:24px;box-shadow:var(--shadow);}
.announcement-banner-item{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--border);}
.announcement-banner-item:last-of-type{border-bottom:none;}
.announcement-banner-item i{color:var(--primary);font-size:1.1rem;margin-top:2px;}
.announcement-banner-item strong{display:block;color:var(--dark);font-size:0.95rem;margin-bottom:2px;}
.announcement-banner-item p{color:var(--gray);font-size:0.85rem;margin:0;}
.announcement-banner-more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:0.82rem;font-weight:700;color:var(--primary-light);}

/* Testimonies (reuses .prayer-card) */
.prayer-card.featured{border-color:var(--accent);}

/* ============================================================
 * RESOURCE LIBRARY
 * ========================================================== */
.resource-list{display:flex;flex-direction:column;gap:12px;}
.resource-card{display:flex;align-items:center;gap:16px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow);transition:var(--transition);}
.resource-card:hover{border-color:var(--primary-light);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.resource-icon{width:46px;height:46px;border-radius:10px;background:var(--offwhite);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.15rem;flex-shrink:0;}
.resource-body{flex:1;}
.resource-body h4{font-size:0.98rem;margin-bottom:3px;}
.resource-body p{color:var(--gray);font-size:0.85rem;margin:0 0 4px;}
.resource-meta{font-size:0.74rem;color:var(--gray);text-transform:uppercase;letter-spacing:0.03em;font-weight:700;}
.resource-arrow{color:var(--primary-light);font-size:1.1rem;}

/* ============================================================
 * SEARCH RESULTS
 * ========================================================== */
.search-result-list{display:flex;flex-direction:column;gap:8px;}
.search-result-item{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:14px 18px;transition:var(--transition);}
.search-result-item:hover{border-color:var(--primary-light);background:#f5f8fb;}
.search-result-item span{font-weight:600;color:var(--dark);font-size:0.92rem;}
.search-result-item small{color:var(--gray);font-size:0.8rem;text-align:right;flex-shrink:0;}

/* ============================================================
 * BIRTHDAY / ANNIVERSARY "CAKE" BANNERS
 * Purely date-driven — appears the day of, gone automatically the
 * next day since it's just comparing today's month/day to the DB.
 * ========================================================== */
.cake-banner-big{display:flex;align-items:center;gap:22px;background:linear-gradient(120deg,#fff7e6,#fdf0d8);border:2px solid var(--accent);border-radius:var(--radius);padding:26px 30px;margin-bottom:24px;box-shadow:var(--shadow-lg);}
.cake-banner-icon{flex-shrink:0;width:74px;height:74px;border-radius:50%;background:var(--accent);color:#1a2a3a;display:flex;align-items:center;justify-content:center;font-size:2.1rem;box-shadow:0 6px 18px rgba(201,168,76,0.4);}
.cake-banner-text h2{color:var(--primary);font-size:1.5rem;margin-bottom:4px;}
.cake-banner-text p{color:var(--text);font-size:0.95rem;margin:0;}
.cake-banner-small{background:#fff;border:1px dashed var(--accent);border-radius:12px;padding:14px 18px;margin-bottom:20px;font-size:0.88rem;color:var(--text);}
.cake-banner-small i{color:var(--accent);font-size:1.3rem;flex-shrink:0;}
.cake-banner-small strong{color:var(--dark);}
.cake-banner-small-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.celebration-chips{display:flex;flex-wrap:wrap;gap:10px;}
.celebration-chip{display:flex;align-items:center;gap:8px;background:var(--offwhite);border:1px solid var(--border);border-radius:999px;padding:5px 14px 5px 5px;}
.celebration-chip-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;object-fit:cover;}
.celebration-chip-icon{display:flex;align-items:center;justify-content:center;background:var(--accent-light);color:var(--primary);font-size:0.95rem;}
.celebration-chip-icon.female{background:#fde2e9;color:#c0447a;}
.celebration-chip-icon.male{background:#dcebfd;color:#2a5a8c;}
.celebration-chip-text{font-size:0.85rem;color:var(--text);}
.celebration-chip-sub{color:var(--gray);font-weight:400;}

/* ============================================================
 * GROUP CHAT
 * ========================================================== */
.chat-shell{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start;}
@media(max-width:820px){.chat-shell{grid-template-columns:1fr;}}
.chat-main{padding:0;overflow:hidden;display:flex;flex-direction:column;height:560px;}
.chat-messages{flex:1;overflow-y:auto;padding:22px 24px;display:flex;flex-direction:column;gap:14px;}
.chat-empty{color:var(--gray);text-align:center;margin:auto;font-size:0.9rem;}
.chat-msg{max-width:80%;background:var(--offwhite);border:1px solid var(--border);border-radius:14px;padding:10px 14px;align-self:flex-start;}
.chat-msg-mine{align-self:flex-end;background:#eef3f8;border-color:var(--primary-light);}
.chat-msg-meta{display:flex;gap:8px;align-items:baseline;margin-bottom:3px;}
.chat-msg-meta strong{font-size:0.8rem;color:var(--primary);}
.chat-msg-meta span{font-size:0.7rem;color:var(--gray);}
.chat-msg-text{font-size:0.92rem;color:var(--text);word-wrap:break-word;white-space:pre-wrap;}
.chat-msg-text s.chat-censored{color:#9b2c2c;text-decoration-thickness:2px;}
.chat-composer{border-top:1px solid var(--border);padding:14px 18px;background:#fbfaf8;}
.chat-composer-row{display:flex;gap:10px;align-items:flex-end;}
.chat-composer-row textarea{flex:1;resize:none;min-height:42px;max-height:100px;padding:10px 14px;border:1.5px solid var(--border);border-radius:12px;font-family:inherit;font-size:0.92rem;}
.chat-composer-row textarea:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(42,90,140,0.12);}
.chat-composer-row .btn{width:auto;padding:11px 20px;}
.chat-emoji-toggle{flex-shrink:0;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--border);background:#fff;color:var(--accent);font-size:1.15rem;cursor:pointer;transition:var(--transition);}
.chat-emoji-toggle:hover{border-color:var(--accent);}
.chat-emoji-row{display:none;flex-wrap:wrap;gap:4px;margin-bottom:10px;}
.chat-emoji-row.chat-emoji-row-open{display:flex;}
.chat-emoji-btn{background:none;border:none;font-size:1.25rem;cursor:pointer;padding:4px 6px;border-radius:8px;transition:var(--transition);}
.chat-emoji-btn:hover{background:var(--offwhite);}
.chat-leave-btn{margin-top:10px;background:none;border:none;color:var(--gray);font-size:0.78rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.chat-leave-btn:hover{color:#9b2c2c;}
.chat-join-row{text-align:center;padding:6px 0;}
.chat-join-row p{color:var(--gray);font-size:0.88rem;margin-bottom:12px;}
.chat-join-row .btn{width:auto;padding:12px 26px;}
.chat-sidebar h3{font-size:1rem;color:var(--primary);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.chat-active-list{list-style:none;display:flex;flex-direction:column;gap:9px;}
.chat-active-list li{display:flex;align-items:center;gap:8px;font-size:0.86rem;color:var(--text);}
.chat-active-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex-shrink:0;box-shadow:0 0 0 3px var(--success-light);}
.chat-active-empty{color:var(--gray);font-size:0.85rem;}

.gnav-chat-badge{background:#7a8593;}
.gnav-chat-badge.gnav-chat-badge-active{background:var(--success);}

/* ============================================================
 * SERMON VIDEO PLAYER
 * Click-to-play inline YouTube embed — no autoplay on page load;
 * shows the video thumbnail with a play button until clicked.
 * ========================================================== */
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,var(--primary) 0%,#0d2b4a 60%,#1a1a2e 100%);cursor:pointer;box-shadow:var(--shadow);}
/* Branded fallback shown behind the YouTube thumbnail -- stays visible if
   the thumbnail image fails to load (e.g. an invalid/removed video id),
   so visitors see the church logo instead of a broken image icon. */
.video-frame-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.video-frame-fallback-logo{width:30%;max-width:150px;opacity:0.92;filter:brightness(0) invert(1);}
.video-frame-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.video-frame-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:#FFD400;border:4px solid #fff;color:#1a2a3a;font-size:2.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);box-shadow:0 8px 28px rgba(0,0,0,0.45),0 0 0 7px rgba(255,212,0,0.28);z-index:2;}
.video-frame-play i{margin-left:5px;}
.video-frame:hover .video-frame-play{background:#FFC400;transform:translate(-50%,-50%) scale(1.08);}
.video-frame.video-frame-playing{cursor:default;}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-unavailable{display:flex;align-items:center;gap:10px;background:var(--offwhite);border:1.5px dashed var(--border);border-radius:12px;padding:16px 20px;color:var(--gray);font-weight:600;font-size:0.92rem;}
.video-unavailable i{font-size:1.2rem;}