/* ==========================================================================
   The Church in Sepang -- Global Stylesheet
   Shared design system + page styles, consolidated from every page.
   ========================================================================== */

:root{
    --navy:#1b3a5c;
    --navy-dark:#122844;
    --gold:#c8a24d;
    --gold-dark:#a9822f;
    --bg:#f7f6f2;
    --card:#ffffff;
    --text:#2c3238;
    --muted:#6b7480;
    --border:#e6e2d8;
    --radius:14px;
    --shadow:0 4px 18px rgba(27,58,92,0.08);
    --shadow-hover:0 10px 26px rgba(27,58,92,0.14);
    --maxw:1180px;
  }
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:'Poppins','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.6;
  }
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
h1,h2,h3{font-weight:600;margin:0 0 12px;color:var(--navy-dark);}
.eyebrow{
    display:inline-block;
    font-size:12.5px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--gold-dark);
    font-weight:600;
    margin-bottom:8px;
  }
.section-head{text-align:center;max-width:680px;margin:0 auto 40px;}
.section-head p{color:var(--muted);margin:0;}
section{padding:64px 0;}
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 24px;border-radius:999px;font-size:14.5px;font-weight:600;
    border:1.5px solid transparent;cursor:pointer;transition:all .18s ease;
    white-space:nowrap;
  }
.btn-primary{background:var(--gold);color:#2b2205;}
.btn-primary:hover{background:var(--gold-dark);transform:translateY(-1px);}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-dark);}
.btn-ghost-navy{background:transparent;border-color:var(--navy);color:var(--navy);}
.btn-ghost-navy:hover{background:var(--navy);color:#fff;}

/* ===== Top utility bar ===== */
.topbar{background:var(--navy-dark);color:#dbe4ee;font-size:13px;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:36px;}
.topbar .contact-line{display:flex;gap:18px;align-items:center;}
.topbar .contact-line span{display:flex;align-items:center;gap:6px;opacity:.9;}
.lang-switch{display:flex;gap:2px;align-items:center;}
.lang-switch button{
    background:none;border:none;color:#c7d3e0;font-size:12.5px;font-weight:600;
    padding:4px 8px;cursor:pointer;border-radius:6px;font-family:inherit;
  }
.lang-switch button.active{background:var(--gold);color:#2b2205;}
.lang-switch .sep{color:#4a607a;}
/* ASP.NET LinkButton version of the top-bar language switcher (renders as
   <a id="btnLangEnTop">/<a id="btnLangZhTop"> instead of <button data-lang>).
   The [id$="..."] rules also match if a naming container prefixes the
   rendered id (e.g. ctl00_btnLangEnTop) when ClientIDMode isn't Static. */
#btnLangEnTop, #btnLangZhTop,
[id$="btnLangEnTop"], [id$="btnLangZhTop"]{
    background:none;border:none;color:#c7d3e0;font-size:12.5px;font-weight:600;
    padding:4px 8px;cursor:pointer;border-radius:6px;font-family:inherit;
    text-decoration:none;display:inline-block;
  }
#btnLangEnTop.active, #btnLangZhTop.active,
[id$="btnLangEnTop"].active, [id$="btnLangZhTop"].active{background:var(--gold);color:#2b2205;}

/* ===== Header / Nav ===== */
header.site-header{
    background:#fff;position:sticky;top:0;z-index:100;
    box-shadow:0 2px 10px rgba(20,30,45,0.06);
  }
.nav-row{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px;}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand .mark{
    width:46px;height:46px;border-radius:10px;background:linear-gradient(145deg,var(--navy),var(--navy-dark));
    display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:700;font-size:19px;
    flex-shrink:0;
  }
.brand .name{line-height:1.25;}
.brand .name strong{display:block;font-size:16.5px;color:var(--navy-dark);font-weight:700;}
.brand .name small{display:block;font-size:11.5px;color:var(--muted);letter-spacing:.4px;}
nav.main-nav{display:flex;align-items:center;gap:2px;}
nav.main-nav > ul{display:flex;list-style:none;margin:0;padding:0;gap:2px;}
nav.main-nav > ul > li{position:relative;}
nav.main-nav > ul > li > a{
    display:flex;align-items:center;gap:5px;padding:10px 14px;border-radius:8px;
    font-size:14.5px;font-weight:500;color:var(--text);
  }
nav.main-nav > ul > li > a:hover, nav.main-nav > ul > li.active > a{color:var(--navy);background:#f1f3f2;}
nav.main-nav .caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.6;}
.submenu{
    position:absolute;top:calc(100% + 6px);left:0;background:#fff;min-width:190px;
    border-radius:10px;box-shadow:var(--shadow-hover);padding:8px;opacity:0;visibility:hidden;
    transform:translateY(6px);transition:all .16s ease;border:1px solid var(--border);
  }
nav.main-nav > ul > li:hover .submenu{opacity:1;visibility:visible;transform:translateY(0);}
.submenu a{display:block;padding:9px 12px;border-radius:7px;font-size:14px;color:var(--text);}
.submenu a:hover{background:var(--bg);color:var(--navy);}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.icon-btn{
    width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:var(--navy);background:#f1f3f2;flex-shrink:0;
  }
.hamburger{display:none;flex-direction:column;gap:5px;width:38px;height:38px;border:none;background:none;cursor:pointer;align-items:center;justify-content:center;}
.hamburger span{display:block;width:22px;height:2.5px;background:var(--navy-dark);border-radius:2px;transition:.2s;}

/* ===== Hero / Top Banner ===== */
.hero{
    position:relative;color:#fff;
    background:linear-gradient(120deg,rgba(18,40,68,.92),rgba(27,58,92,.82)),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><rect width="800" height="600" fill="%231b3a5c"/><circle cx="120" cy="480" r="220" fill="%23234a72"/><circle cx="700" cy="80" r="180" fill="%23234a72"/></svg>');
    background-size:cover;background-position:center;
  }
.hero .wrap{padding:32px 20px 36px;text-align:center;}
.hero .eyebrow{color:#f0dba7;}
.hero h1.hero-welcome{
    color:#f0dba7;font-weight:700;letter-spacing:2px;text-transform:uppercase;
    font-size:clamp(34px,5.5vw,54px);max-width:700px;margin:0 auto 16px;line-height:1.15;
  }
.hero p.lead{max-width:560px;margin:0 auto 18px;color:#dfe7f0;font-size:14px;}
.hero .hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.hero .btn{padding:9px 20px;font-size:13.5px;}
.hero-verse{margin-top:16px;font-style:italic;color:#c9d6e4;font-size:12px;max-width:520px;margin-left:auto;margin-right:auto;}

/* ===== About ===== */
.about{background:#fff;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.about-media{
    aspect-ratio:4/3;border-radius:var(--radius);background:
      linear-gradient(145deg,#e9edf1,#dfe6ec);
    display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;
    box-shadow:var(--shadow);position:relative;overflow:hidden;
  }
.about-media::after{content:"";position:absolute;inset:0;border:1px solid rgba(27,58,92,.08);border-radius:var(--radius);}
.about-text .eyebrow{color:var(--gold-dark);}
.about-text p{color:var(--muted);margin-bottom:14px;}

/* ===== Events ===== */
.events{background:var(--bg);}
.event-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.event-card{
    background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
    transition:transform .18s ease,box-shadow .18s ease;border:1px solid var(--border);
  }
.event-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.event-date{
    display:flex;background:var(--navy);color:#fff;padding:14px 16px;align-items:center;gap:14px;
  }
.event-date .d{font-size:20px;font-weight:700;line-height:1;white-space:nowrap;}
.event-date .m{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);}
.event-body{padding:18px 18px 20px;}
.event-body .tag{margin-bottom:8px;}
.event-body h3{font-size:16px;margin-bottom:8px;}
.event-meta{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);margin-bottom:10px;}
.event-meta span{display:flex;align-items:center;gap:6px;}
.tag{display:inline-block;font-size:11px;font-weight:600;color:var(--navy);background:#e9eef4;padding:3px 10px;border-radius:999px;}
.event-note{font-size:12.5px;color:var(--gold-dark);font-weight:600;margin-top:2px;}
.event-signup-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:10px 16px;
    border-radius:999px;background:var(--navy);color:#fff;font-size:13px;font-weight:600;
    transition:background .15s ease,transform .15s ease;
  }
.event-signup-btn:hover{background:var(--navy-dark);transform:translateY(-1px);}
.event-signup-btn svg{width:14px;height:14px;flex-shrink:0;}
.events-more{text-align:center;margin-top:34px;}

/* ===== Meeting info ===== */
.meetings{background:#fff;}
.meeting-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.meeting-card{
    background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;
  }
.meeting-card .icon{
    width:44px;height:44px;border-radius:10px;background:var(--navy);color:var(--gold);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  }
.meeting-card h3{font-size:16.5px;margin-bottom:6px;}
.meeting-card .time{color:var(--gold-dark);font-weight:600;font-size:14px;margin-bottom:10px;}
.meeting-card p{color:var(--muted);font-size:13.8px;margin:0;}

/* ===== Church news ===== */
.news{background:var(--bg);}
.news-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border);}
.news-row{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px 22px;background:var(--card);border:1px solid var(--border);border-top:none;
  }
.news-row:first-child{border-top:1px solid var(--border);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);}
.news-row:last-child{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);}
.news-left{display:flex;align-items:center;gap:16px;min-width:0;}
.news-issue{
    flex-shrink:0;width:56px;height:56px;border-radius:10px;background:var(--navy);color:#fff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:600;
  }
.news-issue strong{font-size:16px;}
.news-title{min-width:0;}
.news-title h3{font-size:15px;margin:0 0 4px;color:var(--text);font-weight:600;}
.news-title .date{font-size:12.5px;color:var(--muted);}
.locked-btn{
    display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--navy);
    background:#eef1f4;padding:8px 14px;border-radius:999px;flex-shrink:0;cursor:pointer;
    transition:background .15s ease,transform .15s ease;
  }
.locked-btn:hover{background:var(--navy);color:#fff;transform:translateY(-1px);}
.locked-btn svg{width:14px;height:14px;}
.news-more{text-align:center;margin-top:26px;}

/* ===== Weekly pursuit ===== */
.pursuit{
    background:linear-gradient(120deg,var(--navy-dark),var(--navy));color:#fff;
  }
.pursuit .section-head p{color:#c9d6e4;}
.pursuit .eyebrow{color:#f0dba7;}
.pursuit-card{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
    padding:34px 36px;backdrop-filter:blur(2px);
  }
.pursuit-card .week{font-size:12.5px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;font-weight:600;margin-bottom:10px;}
.pursuit-card h3{color:#fff;font-size:20px;margin-bottom:14px;}
.pursuit-card p{color:#dbe4ee;margin-bottom:18px;}
.pursuit-hwmr{font-size:14px;color:#c9d6e4;}
.pursuit-hwmr strong{color:#f0dba7;font-weight:600;}
.pursuit-verse{
    border-left:3px solid var(--gold);padding-left:16px;font-style:italic;color:#eef2f6;font-size:14.5px;margin:0;
  }
.pursuit-verse strong{color:#f0dba7;font-style:normal;font-weight:600;}

/* ===== Footer ===== */
footer{background:var(--navy-dark);color:#c7d3e0;}
.footer-top{padding:56px 0 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;}
.footer-col h4{color:#fff;font-size:15px;margin-bottom:16px;}
.footer-col p{font-size:13.5px;color:#a9b8c8;margin:0 0 8px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.footer-col ul a{font-size:13.5px;color:#a9b8c8;}
.footer-col ul a:hover{color:var(--gold);}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-brand .mark{
    width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.08);color:var(--gold);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0;
  }
.footer-brand strong{color:#fff;font-size:15px;}
.address-block{display:flex;gap:10px;margin-bottom:14px;}
.address-block svg{flex-shrink:0;margin-top:2px;width:16px;height:16px;color:var(--gold);}
.map-link{
    display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff;
    background:rgba(255,255,255,.08);padding:9px 14px;border-radius:999px;margin-top:4px;
  }
.map-link:hover{background:rgba(255,255,255,.16);}
.map-link svg{width:15px;height:15px;color:var(--gold);}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);padding:18px 0;display:flex;justify-content:space-between;
    align-items:center;font-size:12.5px;color:#8fa0b4;flex-wrap:wrap;gap:10px;
  }
.footer-bottom .flangs{display:flex;gap:6px;}
.footer-bottom .flangs a{color:#8fa0b4;}
.footer-bottom .flangs a.active{color:var(--gold);font-weight:600;}
.footer-bottom .flangs span{color:#4a607a;}

/* ===== Mobile nav drawer ===== */
.mobile-drawer{
    position:fixed;top:0;right:-100%;width:82%;max-width:340px;height:100%;background:#fff;z-index:200;
    box-shadow:-8px 0 30px rgba(0,0,0,.15);transition:right .25s ease;overflow-y:auto;
  }
.mobile-drawer.open{right:0;}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);}
.drawer-head .close-btn{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1;}
.drawer-nav ul{list-style:none;margin:0;padding:8px 10px;}
.drawer-nav > ul > li > a{
    display:flex;align-items:center;justify-content:space-between;padding:13px 12px;font-size:15px;
    font-weight:500;color:var(--text);border-bottom:1px solid #f0efe9;
  }
.drawer-nav .sub-list{list-style:none;margin:0;padding:0 0 6px 18px;display:none;}
.drawer-nav .sub-list.open{display:block;}
.drawer-nav .sub-list a{padding:10px 12px;font-size:14px;color:var(--muted);display:block;}
.drawer-actions{padding:16px 20px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--border);margin-top:8px;}
.drawer-lang{display:flex;gap:8px;padding:14px 20px;}
.drawer-lang button{
    flex:1;padding:9px;border-radius:8px;border:1.5px solid var(--border);background:#fff;font-size:13px;
    font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;
  }
.drawer-lang button.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.overlay{position:fixed;inset:0;background:rgba(15,25,38,.45);z-index:150;opacity:0;visibility:hidden;transition:.2s;}
.overlay.open{opacity:1;visibility:visible;}

/* ===== Auth modals ===== */
.modal-overlay{
    position:fixed;inset:0;background:rgba(15,25,38,.55);z-index:300;
    display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;
  }
.modal-overlay.open{opacity:1;visibility:visible;}
.modal-box{
    background:#fff;border-radius:var(--radius);width:100%;max-width:400px;padding:30px 28px 28px;
    box-shadow:var(--shadow-hover);position:relative;transform:translateY(10px);transition:transform .18s ease;
    max-height:90vh;overflow-y:auto;
  }
.modal-box-wide{max-width:460px;}
.modal-overlay.open .modal-box{transform:translateY(0);}
.modal-close{
    position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:none;
    background:#f1f3f2;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
.modal-close:hover{background:#e6e2d8;color:var(--text);}
.modal-icon{
    width:48px;height:48px;border-radius:12px;background:var(--navy);color:var(--gold);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;
    flex-shrink:0;
  }
.modal-icon svg{width:22px;height:22px;}
.modal-box h3{font-size:20px;margin-bottom:6px;}
.modal-header-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.modal-header-row .modal-icon{margin-bottom:0;}
.modal-header-row h3{margin-bottom:0;}
.modal-box p.modal-sub{color:var(--muted);font-size:13.5px;margin:0 0 22px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;}
.field input{
    width:100%;padding:10px 13px;border-radius:9px;border:1.5px solid var(--border);font-size:14px;
    font-family:inherit;color:var(--text);background:var(--bg);
  }
.field select{
    width:100%;padding:10px 13px;border-radius:9px;border:1.5px solid var(--border);font-size:14px;
    font-family:inherit;color:var(--text);background:var(--bg);appearance:none;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%236b7480" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;
  }
.field select:focus{outline:none;border-color:var(--navy);background-color:#fff;}
.field-hint{display:block;font-size:12px;color:var(--muted);margin-top:6px;}
.field input:focus{outline:none;border-color:var(--navy);background:#fff;}

/* ===== Show/hide password toggle =====
   Wraps every type="password" input site-wide (see each page's own script
   block for the click handler that flips input.type and swaps the icon). */
.password-field{position:relative;}
.password-field input{padding-right:42px;}
.password-toggle{
    position:absolute;top:0;right:2px;height:43px;width:34px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:none;border-radius:7px;cursor:pointer;color:var(--muted);
  }
.password-toggle:hover{background:#eef1f4;color:var(--navy);}
.password-toggle svg{width:18px;height:18px;}
.password-toggle svg[hidden]{display:none;}

.password-toggle-sub {
    position: absolute;
    top: 0;
    right: 2px;
    height: 43px;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    color: var(--muted);
}

.password-toggle-sub:hover {
    background: #eef1f4;
    color: var(--navy);
}

.password-toggle-sub svg {
    width: 18px;
    height: 18px;
}

.password-toggle-sub svg[hidden] {
    display: none;
}

.field-row{display:flex;align-items:center;justify-content:space-between;margin:10px 0 18px;font-size:12.5px;}
.field-row a{color:var(--navy);font-weight:600;}
.remember-me{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;font-weight:500;}
.remember-me input[type="checkbox"]{width:15px;height:15px;accent-color:var(--navy);cursor:pointer;margin:0;}
.login-error-msg{display:block;margin:-4px 0 14px;padding:10px 12px;border-radius:8px;background:#fdecea;border:1px solid #f5c2c0;color:#c0392b;font-size:13px;line-height:1.45;}
.radio-group,.checkbox-group{display:flex;gap:18px;flex-wrap:wrap;padding-top:2px;}
.radio-opt,.checkbox-opt{
    display:flex;align-items:center;gap:7px;font-size:14px;color:var(--text);cursor:pointer;font-weight:500;
  }
.radio-opt input,.checkbox-opt input{width:16px;height:16px;accent-color:var(--navy);cursor:pointer;}
.modal-box .btn{width:100%;padding:12px;font-size:15px;margin-top:4px;}
.modal-btn-row{display:flex;gap:12px;margin-top:20px;}
.modal-btn-row .btn{flex:1;width:auto;margin-top:0;}
.modal-switch{text-align:center;font-size:13.5px;color:var(--muted);margin-top:18px;}
.modal-switch a{color:var(--navy);font-weight:600;}

/* ===== Logged-in user menu (header) ===== */
.user-menu{position:relative;}
.user-menu-trigger{
    display:flex;align-items:center;gap:9px;background:transparent;border:1.5px solid transparent;
    padding:5px 10px 5px 5px;border-radius:999px;cursor:pointer;font-family:inherit;transition:background .15s ease;
  }
.user-menu-trigger:hover{background:#f1f3f2;}
.user-avatar{
    width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,var(--navy),var(--navy-dark));
    color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;
    flex-shrink:0;
  }
.user-greeting{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;}
.user-greeting .user-hello{font-size:11px;color:var(--muted);}
.user-greeting .user-name{
    font-size:14px;font-weight:600;color:var(--navy-dark);max-width:140px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;
  }
.user-menu .caret{
    width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);margin-top:-3px;opacity:.6;color:var(--muted);flex-shrink:0;
  }
.user-dropdown{
    position:absolute;top:calc(100% + 6px);right:0;background:#fff;min-width:200px;
    border-radius:10px;box-shadow:var(--shadow-hover);padding:8px;opacity:0;visibility:hidden;
    transform:translateY(6px);transition:all .16s ease;border:1px solid var(--border);z-index:20;
  }
.user-menu:hover .user-dropdown, .user-menu:focus-within .user-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.user-dropdown a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;font-size:14px;color:var(--text);}
.user-dropdown a:hover{background:var(--bg);color:var(--navy);}
.user-dropdown a svg{width:15px;height:15px;flex-shrink:0;color:var(--muted);}
.user-dropdown a:hover svg{color:var(--navy);}
.user-dropdown-divider{height:1px;background:var(--border);margin:6px 4px;}
.user-dropdown-logout{color:#b3261e !important;}
.user-dropdown-logout svg{color:#b3261e !important;}
.is-admin-only{display:none;}
body.role-admin .user-dropdown a.is-admin-only{display:flex;}
body.role-admin .drawer-user li.is-admin-only{display:list-item;}
.drawer-user{border-top:1px solid var(--border);margin-top:8px;}
.drawer-user-trigger{
    width:100%;display:flex;align-items:center;gap:12px;background:none;border:none;cursor:pointer;
    padding:16px 20px;font-family:inherit;text-align:left;
  }
.drawer-user-trigger .user-greeting{flex:1;display:flex;flex-direction:column;line-height:1.3;}
.drawer-user-trigger .user-hello{font-size:11.5px;color:var(--muted);}
.drawer-user-trigger .user-name{font-size:15px;font-weight:600;color:var(--navy-dark);}
.drawer-user-trigger .caret{
    width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
    transform:rotate(45deg);transition:transform .18s ease;flex-shrink:0;
  }
.drawer-user-trigger.open .caret{transform:rotate(225deg);}
.drawer-user .sub-list{list-style:none;margin:0;padding:0 20px 10px;display:none;}
.drawer-user .sub-list.open{display:block;}
.drawer-user .sub-list a{display:flex;align-items:center;gap:10px;}
.drawer-user .sub-list a svg{width:15px;height:15px;flex-shrink:0;color:var(--muted);}
.drawer-user .sub-list .drawer-logout-link{color:#b3261e;}
.drawer-user .sub-list .drawer-logout-link svg{color:#b3261e;}

/* ===== Admin menu — top layer bar ===== */
.admin-topbar{display:none;background:var(--navy-dark);position:sticky;top:78px;z-index:90;border-bottom:1px solid rgba(255,255,255,.1);}
body.role-admin .admin-topbar{display:block;}
.admin-topbar-inner{display:flex;align-items:center;gap:8px;}
.admin-topbar-label{
    display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.6px;
    text-transform:uppercase;color:var(--gold);flex-shrink:0;padding:13px 14px 13px 0;
    border-right:1px solid rgba(255,255,255,.14);margin-right:4px;
  }
.admin-topbar-label svg{width:15px;height:15px;flex-shrink:0;}
.admin-topbar-nav{
    display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;flex:1;min-width:0;
  }
.admin-topbar-link{
    display:flex;align-items:center;gap:7px;padding:13px 14px;color:#c7d3e0;font-size:13.5px;
    font-weight:600;white-space:nowrap;border-bottom:2.5px solid transparent;flex-shrink:0;
  }
.admin-topbar-link svg{width:15px;height:15px;flex-shrink:0;}
.admin-topbar-link:hover{color:#fff;}
.admin-topbar-link.active{color:var(--gold);border-bottom-color:var(--gold);}

/* ===== Admin menu — left side layer ===== */
.admin-shell{display:flex;align-items:flex-start;}
.admin-main{flex:1;min-width:0;}
.admin-sidebar{
    display:none;width:240px;flex-shrink:0;background:var(--card);border-right:1px solid var(--border);
    box-shadow:2px 0 8px rgba(20,30,45,.04);
    position:sticky;top:78px;align-self:flex-start;max-height:calc(100vh - 78px);
    overflow-y:auto;padding:22px 0;
  }
body.role-admin .admin-sidebar{display:block;}
.admin-sidebar-label{
    display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.6px;
    text-transform:uppercase;color:var(--gold-dark);padding:0 22px 16px;
  }
.admin-sidebar-label svg{width:15px;height:15px;flex-shrink:0;}
.admin-sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;}
.admin-sidebar-link{
    display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:8px;
    color:var(--text);font-size:14px;font-weight:500;
  }
.admin-sidebar-link svg{width:17px;height:17px;flex-shrink:0;color:var(--muted);}
.admin-sidebar-link:hover{background:var(--bg);color:var(--navy);}
.admin-sidebar-link:hover svg{color:var(--navy);}
.admin-sidebar-link.active{background:var(--navy);color:#fff;font-weight:700;}
.admin-sidebar-link.active svg{color:var(--gold);}

/* Mobile: sidebar collapses into a toggle button + slide-in drawer from the left */
.admin-menu-toggle{
    display:none;width:38px;height:38px;border-radius:8px;border:none;cursor:pointer;
    background:var(--navy-dark);color:var(--gold);align-items:center;justify-content:center;flex-shrink:0;
  }
.admin-menu-toggle svg{width:18px;height:18px;}
.admin-overlay{
    position:fixed;inset:0;background:rgba(10,18,30,.45);z-index:199;opacity:0;visibility:hidden;
    transition:opacity .2s ease;
  }
.admin-overlay.open{opacity:1;visibility:visible;}
.admin-drawer{
    position:fixed;top:0;left:-100%;width:80%;max-width:300px;height:100%;background:var(--navy-dark);
    z-index:200;box-shadow:8px 0 30px rgba(0,0,0,.2);transition:left .25s ease;overflow-y:auto;
  }
.admin-drawer.open{left:0;}
.admin-drawer-head{
    display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
.admin-drawer-head strong{display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;}
.admin-drawer-head strong svg{width:16px;height:16px;color:var(--gold);}
.admin-drawer-head .close-btn{background:none;border:none;font-size:22px;color:#c7d3e0;cursor:pointer;line-height:1;}
.admin-drawer-nav{padding:10px 12px;display:flex;flex-direction:column;gap:2px;}
.admin-drawer-nav a{
    display:flex;align-items:center;gap:11px;padding:12px;border-radius:8px;
    color:#c7d3e0;font-size:14.5px;font-weight:500;
  }
.admin-drawer-nav a svg{width:17px;height:17px;flex-shrink:0;}
.admin-drawer-nav a:hover{background:rgba(255,255,255,.07);color:#fff;}
.admin-drawer-nav a.active{background:var(--gold);color:#2b2205;font-weight:700;}

/* ===== Page Header ===== */
.page-header{
    padding:34px 0;
    position:relative;color:#fff;
    background:linear-gradient(120deg,rgba(18,40,68,.92),rgba(27,58,92,.82)),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><rect width="800" height="600" fill="%231b3a5c"/><circle cx="120" cy="480" r="220" fill="%23234a72"/><circle cx="700" cy="80" r="180" fill="%23234a72"/></svg>');
    background-size:cover;background-position:center;
  }
.page-header-inner{max-width:680px;margin:0 auto;text-align:center;padding:0 20px;}

/* ===== My Profile / Change Password ===== */
.profile-content{background:#fff;padding:44px 0 60px;}
.profile-card{
/*    max-width:760px;*/
    margin:0 auto 32px;
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 36px;
  }
.profile-card:last-child{margin-bottom:0;}
.profile-card-head{margin-bottom:24px;}
.profile-card-head h2{font-size:19px;margin:0 0 6px;color:var(--text);}
.profile-card-head p{font-size:13px;color:var(--muted);margin:0;}
.profile-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
.profile-field-grid .field.full{grid-column:1 / -1;}
.field input:disabled,
.field select:disabled,
.field textarea:disabled,
.field input[readonly],
.field textarea[readonly] {
    background: #e9ecef;
    border-color: #cfd4da;
    border-style: dashed;
    color: #8a929c;
    -webkit-text-fill-color: #8a929c;
    cursor: not-allowed;
    opacity: 1;
}

    .field input:disabled:focus,
    .field select:disabled:focus,
    .field textarea:disabled:focus,
    .field input[readonly]:focus,
    .field textarea[readonly]:focus {
        border-color: #cfd4da;
        background: #e9ecef;
    }
.profile-actions{margin-top:8px;display:flex;justify-content:flex-end;}
.field input.parsley-error,.field select.parsley-error{border-color:#c0392b;background:#fdf2f1;}
.parsley-errors-list{list-style:none;margin:6px 0 0;padding:0;font-size:12px;color:#c0392b;}
.field label.required::after{content:" *";color:#c0392b;font-weight:700;}
.required-asterisk{color:#c0392b;font-weight:700;}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--navy);border-color:var(--navy);}
.flatpickr-day.today{border-color:var(--gold-dark);}
.flatpickr-months .flatpickr-month,.flatpickr-current-month .flatpickr-monthDropdown-months{background:var(--navy);}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{fill:#fff;color:#fff;}
.flatpickr-current-month .flatpickr-monthDropdown-months,.flatpickr-current-month input.cur-year{color:#fff;}
span.flatpickr-weekday{background:var(--navy);color:#dfe7f0;}
.page-header-inner h1{color:#fff;font-size:clamp(17px,2vw,22px);margin:0 0 4px;line-height:1.25;}
.page-header-inner p.lead{margin:0;color:#dfe7f0;font-size:13px;}
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.news-card{
    display:flex;flex-direction:column;justify-content:space-between;gap:18px;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    padding:20px 22px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease;
  }
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.news-card-top{display:flex;align-items:center;gap:16px;min-width:0;}
.news-card .pdf-btn-group{align-self:flex-start;}
.pdf-btn-group{display:flex;gap:8px;}
.pdf-btn{
    display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--navy);
    background:#eef1f4;padding:8px 12px;border-radius:999px;flex-shrink:0;cursor:pointer;
    transition:background .15s ease,transform .15s ease;
  }
.pdf-btn:hover{background:var(--navy);color:#fff;transform:translateY(-1px);}
.pdf-btn svg{width:14px;height:14px;flex-shrink:0;}

/* ===== Church News Detail ===== */
.cnd-content{background:#fff;}
.cnd-toolbar{display:flex;align-items:center;justify-content:center;margin-bottom:30px;}
.cnd-toolbar .btn svg{width:15px;height:15px;}
.cnd-tabs{display:flex;justify-content:center;gap:10px;margin:0 0 40px;flex-wrap:wrap;}
.cnd-tab-btn{
    display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;font-size:13.5px;
    font-weight:600;border:1.5px solid var(--border);color:var(--text);background:#fff;cursor:pointer;
    font-family:inherit;transition:all .18s ease;
  }
.cnd-tab-btn:hover{border-color:var(--navy);color:var(--navy);}
.cnd-tab-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.tab-panel{max-width:860px;margin:0 auto;}
.msg-meta{text-align:center;margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--border);}
.msg-meta .meta-line{font-size:13.5px;color:var(--muted);margin:0 0 4px;}
.msg-meta .meta-line strong{color:var(--text);}
.msg-meta .meta-subject{font-size:12px;letter-spacing:1.2px;color:var(--gold-dark);font-weight:700;text-transform:uppercase;margin:14px 0 4px;}
.msg-meta .meta-num{font-size:13px;color:var(--muted);margin:0 0 10px;}
.msg-meta h2{font-size:19px;line-height:1.4;margin:0;}
.msg-body p{margin:0 0 18px;font-size:14.5px;color:var(--text);text-align:justify;}
.msg-body h3{font-size:16px;text-align:center;margin:32px 0 18px;color:var(--navy-dark);line-height:1.4;}
.ann-eyebrow{text-align:center;font-size:12.5px;color:var(--muted);margin:-6px 0 30px;}
.ann-block{margin-bottom:36px;}
.ann-block:last-child{margin-bottom:0;}
.ann-block h3{font-size:15.5px;margin:0 0 16px;color:var(--navy-dark);display:flex;align-items:center;gap:8px;}
.ann-block h3::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0;}
.ann-block ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:ann-item;}
.ann-block ol li{
    counter-increment:ann-item;position:relative;font-size:14px;color:var(--text);line-height:1.6;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    padding:14px 18px 14px 50px;box-shadow:var(--shadow);
  }
.ann-block ol li::before{
    content:counter(ann-item);position:absolute;left:16px;top:14px;width:22px;height:22px;border-radius:50%;
    background:var(--navy);color:var(--gold);font-size:12px;font-weight:700;display:flex;align-items:center;
    justify-content:center;flex-shrink:0;
  }

/* Announcements sub-sections always stack as their own full-width row */
.ann-columns{display:flex;flex-direction:column;gap:0;margin-top:0;}
.offer-table-title{font-size:14px;font-weight:600;color:var(--navy-dark);margin:34px 0 14px;text-align:center;}
.offer-table-title:first-child{margin-top:0;}
.church-stmt-table-wrap{max-width:860px;margin:0 auto;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);}
table.church-stmt-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px;}
table.church-stmt-table thead th{
    background:var(--navy);color:#fff;text-align:left;padding:13px 16px;font-weight:600;font-size:12.8px;
    white-space:nowrap;
  }
table.church-stmt-table thead th:not(:first-child){text-align:right;}
table.church-stmt-table tbody td{padding:13px 16px;border-top:1px solid var(--border);color:var(--text);}
table.church-stmt-table tbody td:not(:first-child){text-align:right;}
table.church-stmt-table tbody tr:nth-child(even){background:var(--bg);}
table.church-stmt-table tbody tr.row-total td{font-weight:700;background:#f1f3f2;}

/* ===== PDF export loading overlay ===== */
.pdf-loading-overlay{
    position:fixed;inset:0;background:rgba(18,40,68,.55);z-index:500;
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;
  }
.pdf-loading-overlay.open{opacity:1;visibility:visible;}
.pdf-loading-box{
    background:#fff;border-radius:var(--radius);padding:30px 38px;box-shadow:var(--shadow-hover);
    display:flex;flex-direction:column;align-items:center;gap:14px;
  }
.pdf-spinner{
    width:34px;height:34px;border-radius:50%;border:3.5px solid #e6e2d8;border-top-color:var(--navy);
    animation:pdf-spin .8s linear infinite;
  }
@keyframes pdf-spin{to{transform:rotate(360deg);}}
.pdf-loading-box span{font-size:13.5px;font-weight:600;color:var(--text);}

/* ===== Contact ===== */
.contact-content{background:#fff;}
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:start;}
.contact-info-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;}
.contact-info-card h3{font-size:16.5px;margin-bottom:14px;}
.contact-address{display:flex;gap:10px;margin-bottom:16px;}
.contact-address svg{flex-shrink:0;margin-top:2px;width:16px;height:16px;color:var(--navy);}
.contact-address p{margin:0;color:var(--muted);font-size:13.8px;}
.contact-map-link{
    display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff;
    background:var(--navy);padding:9px 14px;border-radius:999px;
  }
.contact-map-link:hover{background:var(--navy-dark);}
.contact-map-link svg{width:15px;height:15px;color:var(--gold);}
.contact-form-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 28px;}
.contact-form-card h3{font-size:16.5px;margin-bottom:18px;}
.field textarea{
    width:100%;padding:10px 13px;border-radius:9px;border:1.5px solid var(--border);font-size:14px;
    font-family:inherit;color:var(--text);background:var(--bg);resize:vertical;min-height:120px;
  }
.field textarea:focus{outline:none;border-color:var(--navy);background:#fff;}
.contact-submit-btn{margin-top:4px;}
.contact-submit-btn svg{width:14px;height:14px;}
.form-success{
    display:flex;align-items:center;gap:12px;background:#eef7f0;border:1px solid #bfe3c8;
    border-radius:var(--radius);padding:18px 20px;color:#245c34;font-size:14px;
  }
.form-success svg{flex-shrink:0;width:22px;height:22px;color:#2f8b47;}

/* ===== Daily Reading ===== */
.dr-content{background:#fff;}
.dr-intro{max-width:760px;margin:0 auto 30px;text-align:center;color:var(--muted);font-size:14px;}

/* ===== Daily Reading grid table ===== */
.dr-table-wrap{
    max-width:1020px;margin:0 auto;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;
  }
table.dr-table{width:100%;border-collapse:collapse;font-size:14px;}
table.dr-table thead th{
    text-align:left;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
    font-weight:600;padding:14px 18px;border-bottom:2px solid var(--border);white-space:nowrap;
  }
table.dr-table tbody td{padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);white-space:nowrap;}
table.dr-table tbody tr:last-child td{border-bottom:none;}
table.dr-table tbody tr:hover{background:#faf9f6;}
table.dr-table td.dr-col-no{font-weight:700;color:var(--navy-dark);}
table.dr-table td.dr-col-date{color:var(--muted);}
table.dr-table td.dr-col-title{white-space:normal;line-height:1.5;font-weight:600;min-width:220px;}
th.dr-col-action,td.dr-col-action{text-align:right;}
.dr-action-btn{
    display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--navy);
    background:#eef1f4;padding:8px 14px;border-radius:999px;flex-shrink:0;cursor:pointer;
    transition:background .15s ease,color .15s ease,transform .15s ease;
  }
.dr-action-btn:hover{background:var(--navy);color:#fff;transform:translateY(-1px);}
.dr-action-btn svg{width:15px;height:15px;flex-shrink:0;}

/* ===== Pagination ===== */
.dr-pagination{
    display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px;flex-wrap:wrap;
  }
.dr-page-btn,.dr-page-btn-num{
    font-family:inherit;cursor:pointer;border-radius:8px;font-size:13.5px;font-weight:600;
    border:1.5px solid var(--border);background:#fff;color:var(--text);padding:8px 14px;
    transition:all .15s ease;
  }
.dr-page-btn:hover:not(:disabled),.dr-page-btn-num:hover{border-color:var(--navy);color:var(--navy);}
.dr-page-btn:disabled{opacity:.4;cursor:not-allowed;}
.dr-page-btn-num{width:38px;padding:8px 0;text-align:center;}
.dr-page-btn-num.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.dr-page-numbers{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}

/* ===== Daily Reading Details ===== */
.drd-content{background:#fff;}
.drd-article{max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow);padding:36px 40px;}
.drd-scripture{
    background:#f6f4ee;border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
    padding:20px 22px;margin:0 0 28px;
  }
.drd-scripture h3{
    margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--gold-dark);font-weight:700;
  }
.drd-verse{margin:0 0 14px;font-size:14.5px;line-height:1.75;color:var(--text);}
.drd-verse:last-child{margin-bottom:0;}
.drd-verse-ref{display:block;font-weight:700;color:var(--navy-dark);margin-bottom:2px;}
.drd-body p{font-size:15px;line-height:1.85;color:var(--text);margin:0 0 20px;}
.drd-body p:last-of-type{margin-bottom:0;}
.drd-copyright{
    margin-top:28px;padding-top:18px;border-top:1px solid var(--border);
    font-size:12px;line-height:1.6;color:var(--muted);font-style:italic;
  }
.btn-sm{padding:8px 16px;font-size:13.5px;}

/* ===== Event Registration Details ===== */
.erd-content{background:#fff;}
.erd-inner{max-width:900px;margin:0 auto;}
.erd-back{
    display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--navy);
    margin-bottom:22px;
  }
.erd-back svg{width:15px;height:15px;}
.erd-back:hover{color:var(--navy-dark);}
.erd-card{
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:30px 32px;margin-bottom:28px;
  }
.erd-card h2{font-size:18px;margin:0 0 20px;}
.erd-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;}
.erd-field{border-bottom:1px solid var(--border);padding-bottom:12px;}
.erd-field:last-child{border-bottom:none;padding-bottom:0;}
.erd-field-label{
    display:block;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
    font-weight:600;margin-bottom:6px;
  }
.erd-field-value{font-size:15px;font-weight:600;color:var(--text);}
.status-badge{
    display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;
    font-size:12px;font-weight:600;white-space:nowrap;
  }
.status-registered{background:#e6f4ea;color:#1e7e34;}
.status-canceled{background:#fdecea;color:#c0392b;}
.status-paid{background:#e6f4ea;color:#1e7e34;}
.status-pending{background:#fff4e0;color:#a9720a;}

/* ---- Payment slip ---- */
.erd-upload-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;}
.upload-input-wrap{
    flex:1;min-width:180px;display:flex;align-items:center;border:1.5px solid var(--border);
    border-radius:9px;background:var(--bg);overflow:hidden;
  }
.upload-input-wrap input[type="text"]{
    flex:1;border:none;background:transparent;padding:10px 13px;font-size:14px;font-family:inherit;
    color:var(--text);min-width:0;
  }
.upload-input-wrap input[type="text"]:focus{outline:none;}
.btn-browse{
    border-radius:0;border:none;border-left:1.5px solid var(--border);padding:10px 16px;
    font-size:13px;flex-shrink:0;
  }
.erd-upload-hint{font-size:12px;color:var(--muted);margin-top:8px;}
.uploaded-chip{
    display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:8px 14px 8px 10px;
    background:#e6f4ea;border-radius:999px;font-size:13.5px;font-weight:600;color:#1e7e34;
  }
.uploaded-chip[hidden]{display:none;}
.uploaded-chip .chip-icon{
    width:26px;height:26px;border-radius:50%;background:#1e7e34;color:#fff;display:flex;
    align-items:center;justify-content:center;flex-shrink:0;
  }
.uploaded-chip .chip-icon svg{width:14px;height:14px;}
.uploaded-chip .chip-view{
    display:flex;align-items:center;justify-content:center;color:#1e7e34;margin-left:2px;
  }
.uploaded-chip .chip-view svg{width:15px;height:15px;}

/* ---- Participant list ---- */
.erd-participants-head{
    display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap;
  }
.erd-participants-head h2{margin:0;font-size:18px;}
.erd-table-wrap{
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow);overflow-x:auto;
  }
table.erd-table{width:100%;border-collapse:collapse;font-size:13.5px;}
table.erd-table thead th{
    text-align:left;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
    font-weight:600;padding:14px 16px;border-bottom:2px solid var(--border);white-space:nowrap;
  }
table.erd-table tbody td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);white-space:nowrap;}
table.erd-table tbody tr:last-child td{border-bottom:none;}
table.erd-table tbody tr:hover{background:#faf9f6;}
table.erd-table td.erd-col-no{font-weight:700;color:var(--navy-dark);}
table.erd-table td.erd-col-name{white-space:normal;font-weight:600;min-width:140px;}
table.erd-table td.erd-col-added,table.erd-table td.erd-col-parent{color:var(--muted);}
table.erd-table td.erd-col-action{text-align:center;white-space:nowrap;}
.erd-empty-row td{text-align:center;color:var(--muted);padding:28px 16px;white-space:normal;}
.erd-action-btn,.erd-delete-btn{
    display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
    border-radius:50%;background:#f1f3f2;color:var(--navy);flex-shrink:0;transition:all .15s ease;
    border:none;cursor:pointer;font-family:inherit;
  }
.erd-action-btn:hover{background:var(--navy);color:#fff;}
.erd-delete-btn{color:#c0392b;margin-left:6px;}
.erd-delete-btn:hover{background:#c0392b;color:#fff;}
.erd-action-btn svg,.erd-delete-btn svg{width:15px;height:15px;}

/* ---- Add/Edit participant modal conditional field ---- */
#participantParentField{transition:none;}

/* ===== Monthly calendar ===== */
.cal-section{background:#fff;}
.cal-card{
    max-width:520px;margin:0 auto;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 26px 22px;
  }
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;}
.cal-head h3{margin:0;font-size:17px;white-space:nowrap;}
.cal-nav-btn{
    width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);background:#fff;
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy);
    transition:background .15s ease,color .15s ease,border-color .15s ease;flex-shrink:0;
  }
.cal-nav-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.cal-nav-btn svg{width:16px;height:16px;}
.cal-dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.cal-dow{text-align:center;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-day{
    aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    border-radius:9px;font-size:12.5px;color:var(--text);background:var(--bg);gap:3px;
  }
.cal-day.other-month{opacity:.32;}
.cal-day.today{box-shadow:inset 0 0 0 1.5px var(--gold-dark);font-weight:700;}
.cal-day.has-event{background:#e9eef4;cursor:pointer;font-weight:700;color:var(--navy);}
.cal-day.has-event:hover{background:var(--navy);color:#fff;}
.cal-dot{width:5px;height:5px;border-radius:50%;background:var(--gold-dark);}
.cal-day.has-event:hover .cal-dot{background:#fff;}
.cal-legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:16px;justify-content:center;}
.cal-legend .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-dark);flex-shrink:0;}
.timeline{display:flex;flex-direction:column;gap:16px;}
.tl-item{
    display:flex;gap:22px;align-items:center;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease;
  }
.tl-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);}
.tl-item.tl-highlight{box-shadow:0 0 0 3px var(--gold),var(--shadow-hover);}
.tl-date{
    flex-shrink:0;width:76px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    border-radius:12px;background:var(--navy);color:#fff;
  }
.tl-date .d{font-size:21px;font-weight:700;line-height:1;}
.tl-date .m{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--gold);margin-top:3px;}
.tl-date .y{font-size:10px;color:#c9d6e4;margin-top:1px;}
.tl-body{flex:1;min-width:0;}
.tl-body .tag{margin-bottom:6px;}
.tl-body h3{font-size:16px;margin-bottom:6px;}
.tl-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted);margin-bottom:4px;}
.tl-meta span{display:flex;align-items:center;gap:6px;}
.tl-note{font-size:12.5px;color:var(--gold-dark);font-weight:600;margin-top:2px;}
.tl-action{flex-shrink:0;}
.tl-register-btn{
    display:flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:var(--gold);
    color:#2b2205;font-size:13px;font-weight:700;white-space:nowrap;border:none;cursor:pointer;font-family:inherit;
    transition:background .15s ease,transform .15s ease;
  }
.tl-register-btn:hover{background:var(--gold-dark);transform:translateY(-1px);}
.tl-register-btn svg{width:14px;height:14px;flex-shrink:0;}
.tl-register-btn.tl-closed,.tl-register-btn:disabled{
    background:#e4e6ea;color:var(--muted);cursor:not-allowed;
  }
.tl-register-btn.tl-closed:hover,.tl-register-btn:disabled:hover{background:#e4e6ea;transform:none;}
.tl-item:has(.tl-register-btn.tl-closed){cursor:default;}
.tl-item:has(.tl-register-btn.tl-closed):hover{transform:none;box-shadow:var(--shadow);}

/* ===== Media ===== */
.media-content{background:#fff;}
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.media-card{
    display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease;
  }
.media-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);}
.media-thumb{position:relative;display:block;aspect-ratio:16/9;background:#0c1520;overflow:hidden;}
.media-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.media-play{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(10,16,24,.18);transition:background .18s ease;
  }
.media-card:hover .media-play{background:rgba(10,16,24,.32);}
.media-play svg{width:54px;height:54px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));}
.media-body{padding:20px 22px 22px;}
.media-tag{
    display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--gold-dark);
    text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;
  }
.media-body h3{font-size:16px;margin:0 0 8px;line-height:1.35;}
.media-body p{color:var(--muted);font-size:13.5px;margin:0 0 18px;}
.media-watch-link{
    display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#fff;
    background:var(--navy);padding:9px 16px;border-radius:999px;
  }
.media-card:hover .media-watch-link{background:var(--navy-dark);}
.media-watch-link svg{width:14px;height:14px;color:var(--gold);}
.media-note{
    max-width:680px;margin:36px auto 0;text-align:center;color:var(--muted);font-size:13px;
  }

/* ===== My Registered Events ===== */
.mre-content{background:#fff;}
.mre-intro{max-width:760px;margin:0 auto 30px;text-align:center;color:var(--muted);font-size:14px;}

/* ===== My Registered Events grid table ===== */
.mre-table-wrap{
    max-width:1140px;margin:0 auto;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;
  }
table.mre-table{width:100%;border-collapse:collapse;font-size:13.5px;}
table.mre-table thead th{
    text-align:left;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
    font-weight:600;padding:14px 16px;border-bottom:2px solid var(--border);white-space:nowrap;
  }
table.mre-table tbody td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);white-space:nowrap;}
table.mre-table tbody tr:last-child td{border-bottom:none;}
table.mre-table tbody tr:hover{background:#faf9f6;}
table.mre-table td.mre-col-no{font-weight:700;color:var(--navy-dark);}
table.mre-table td.mre-col-title{white-space:normal;line-height:1.5;font-weight:600;min-width:220px;}
table.mre-table td.mre-col-location,table.mre-table td.mre-col-registered{color:var(--muted);}
table.mre-table td.mre-col-action{text-align:center;}
.mre-action-btn{
    display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
    border-radius:50%;background:#f1f3f2;color:var(--navy);flex-shrink:0;transition:all .15s ease;
  }
.mre-action-btn:hover{background:var(--navy);color:#fff;}
.mre-action-btn svg{width:16px;height:16px;}

/* ===== Pagination ===== */
.mre-pagination{
    display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px;flex-wrap:wrap;
  }
.mre-page-btn,.mre-page-btn-num{
    font-family:inherit;cursor:pointer;border-radius:8px;font-size:13.5px;font-weight:600;
    border:1.5px solid var(--border);background:#fff;color:var(--text);padding:8px 14px;
    transition:all .15s ease;
  }
.mre-page-btn:hover:not(:disabled),.mre-page-btn-num:hover{border-color:var(--navy);color:var(--navy);}
.mre-page-btn:disabled{opacity:.4;cursor:not-allowed;}
.mre-page-btn-num{width:38px;padding:8px 0;text-align:center;}
.mre-page-btn-num.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.mre-page-numbers{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}

/* ===== Login-required gate =====
   Generic pattern for any page section that should only render once a
   session is confirmed logged in. Toggle by adding/removing the
   "is-logged-in" class on <body> (see the page's own script block). */
.requires-login{display:none;}
.login-required-gate{display:none;}
body:not(.is-logged-in) .login-required-gate{display:block;}
body.is-logged-in .requires-login{display:block;}
body.is-logged-in .login-required-gate{display:none;}
.login-required-gate{padding:30px 0 10px;}
.login-required-box{
    max-width:400px;margin:0 auto;text-align:center;background:var(--card);
    border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:40px 36px;
  }
.login-required-icon{
    width:52px;height:52px;border-radius:50%;background:#eef1f4;color:var(--navy);
    display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  }
.login-required-icon svg{width:24px;height:24px;}

/* ===== Full-page status icon badge (session timeout, and similar
   standalone status/message pages) ===== */
.status-icon-badge{
    width:84px;height:84px;border-radius:50%;
    background:linear-gradient(135deg,var(--navy),var(--navy-dark));
    color:var(--gold);display:flex;align-items:center;justify-content:center;
    margin:0 auto 22px;box-shadow:0 10px 24px -8px rgba(27,58,92,.45);
  }
.status-icon-badge svg{width:38px;height:38px;}
.login-required-box h3{margin:0 0 10px;font-size:19px;color:var(--navy-dark);}
.login-required-box p{color:var(--muted);font-size:13.5px;margin:0 0 24px;line-height:1.55;}
.login-required-box form{text-align:left;}
.login-required-box .field{margin-bottom:16px;}
.login-required-box .btn{width:100%;justify-content:center;margin-top:4px;}
.login-method-tabs{
    display:flex;background:var(--bg);border:1px solid var(--border);border-radius:999px;
    padding:4px;margin-bottom:18px;gap:2px;
  }
.login-method-tab{
    flex:1;text-align:center;padding:9px 10px;border-radius:999px;font-size:13px;font-weight:600;
    color:var(--muted);background:transparent;border:none;cursor:pointer;font-family:inherit;
    transition:all .18s ease;white-space:nowrap;
  }
.login-method-tab:hover:not(.active){color:var(--navy);}
.login-method-tab.active{background:var(--navy);color:#fff;box-shadow:var(--shadow);}

/* ===== Offering ===== */
.offering-content{background:#fff;}
.offering-tabs{display:flex;justify-content:center;gap:10px;margin:0 0 36px;flex-wrap:wrap;}
.offering-tab-btn{
    display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border-radius:999px;font-size:14px;
    font-weight:600;border:1.5px solid var(--border);color:var(--text);background:#fff;transition:all .18s ease;
  }
.offering-tab-btn:hover{border-color:var(--navy);color:var(--navy);}
.offering-tab-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.offering-tab-btn svg{width:15px;height:15px;}
.offering-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:32px;align-items:start;}
.offering-bank-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;margin-bottom:22px;}
.offering-bank-card h3{font-size:16.5px;margin-bottom:16px;display:flex;align-items:center;gap:9px;}
.offering-bank-card h3 svg{width:18px;height:18px;color:var(--navy);flex-shrink:0;}
.bank-detail-row{margin-bottom:15px;}
.bank-detail-row:last-of-type{margin-bottom:0;}
.bank-detail-row .label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600;margin-bottom:4px;}
.bank-detail-row .value{font-size:14.5px;color:var(--text);font-weight:600;line-height:1.4;}
.bank-account-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.copy-btn{
    display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--navy);
    background:#fff;border:1.5px solid var(--border);padding:6px 12px;border-radius:999px;cursor:pointer;
    font-family:inherit;flex-shrink:0;transition:all .15s ease;
  }
.copy-btn:hover{border-color:var(--navy);}
.copy-btn svg{width:12px;height:12px;}
.copy-btn.copied{color:#2f8b47;border-color:#bfe3c8;background:#eef7f0;}
.offering-guide-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;}
.offering-guide-card h3{font-size:15px;margin-bottom:12px;}
.offering-guide-card ol{margin:0;padding-left:19px;color:var(--muted);font-size:13.2px;line-height:1.7;}
.offering-guide-card ol li{margin-bottom:11px;}
.offering-guide-card ol li:last-child{margin-bottom:0;}
.offering-guide-card ul{margin:6px 0 0;padding-left:18px;}
.offering-guide-card ul li{margin-bottom:4px;}
.offering-privacy-note{
    margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
    font-size:12.3px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;
  }
.offering-privacy-note svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--gold-dark);}
.offering-form-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 26px;}
.offering-form-card h3{font-size:16.5px;margin-bottom:6px;}
.offering-form-card > p.form-sub{color:var(--muted);font-size:13px;margin:0 0 18px;}
.offer-lines{border-top:1px solid #f0efe9;}
.offer-line{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid #f0efe9;}
.offer-line .offer-no{width:20px;flex-shrink:0;font-size:12.5px;color:var(--muted);font-weight:600;padding-top:9px;}
.offer-line .offer-label{flex:1;font-size:13.8px;color:var(--text);padding-top:8px;}
.offer-line .offer-amount{width:120px;flex-shrink:0;}
.offer-amount{display:flex;align-items:center;gap:6px;}
.offer-amount .cur{font-size:12.5px;color:var(--muted);font-weight:600;}
.offer-amount input{
    width:100%;padding:9px 10px;border-radius:8px;border:1.5px solid var(--border);font-size:13.5px;
    text-align:right;font-family:inherit;background:var(--bg);color:var(--text);
  }
.offer-amount input:focus{outline:none;border-color:var(--navy);background:#fff;}
.offer-subgroup{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;}
.offer-subgroup label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:500;cursor:pointer;}
.offer-subgroup input{width:15px;height:15px;accent-color:var(--navy);cursor:pointer;}
.offer-others-block{padding:14px 0;}
.offer-others-block > .offer-label{font-size:13.8px;color:var(--text);margin-bottom:10px;}
.offer-others-block > .offer-label small{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:2px;}
.offer-other-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.offer-other-row:last-child{margin-bottom:0;}
.offer-other-row .other-letter{width:20px;flex-shrink:0;font-size:12.5px;color:var(--muted);font-weight:600;}
.offer-other-row input[type=text]{
    flex:1;min-width:0;padding:9px 11px;border-radius:8px;border:1.5px solid var(--border);font-size:13.5px;
    font-family:inherit;background:var(--bg);color:var(--text);
  }
.offer-other-row input[type=text]:focus{outline:none;border-color:var(--navy);background:#fff;}
.offer-other-row .offer-amount{width:110px;flex-shrink:0;}
.offer-total-row{
    display:flex;justify-content:space-between;align-items:center;padding:18px 0 4px;margin-top:6px;
    border-top:2px solid var(--border);
  }
.offer-total-row .total-label{font-size:14.5px;font-weight:700;color:var(--navy-dark);}
.offer-total-row .total-value{font-size:20px;font-weight:700;color:var(--navy);}
.offer-upload{margin-top:22px;padding:20px;border:1.5px dashed var(--border);border-radius:12px;background:var(--bg);text-align:center;}
.offer-upload svg{width:26px;height:26px;color:var(--navy);margin-bottom:8px;}
.offer-upload .file-required{color:#c0392b;font-size:12px;font-weight:600;margin-bottom:10px;}
.offer-upload p.upload-hint{margin:0 0 12px;font-size:12.8px;color:var(--muted);}
.offer-upload input[type=file]{font-size:13px;max-width:100%;}
.offer-upload .file-name{margin-top:10px;font-size:12.5px;color:var(--navy);font-weight:600;}
.offering-submit-btn{margin-top:22px;width:100%;padding:13px;font-size:15px;}
.offering-submit-btn svg{width:14px;height:14px;}
.offering-form-success{
    display:flex;align-items:center;gap:12px;background:#eef7f0;border:1px solid #bfe3c8;
    border-radius:var(--radius);padding:18px 20px;color:#245c34;font-size:14px;
  }
.offering-form-success[hidden]{display:none;}
.offering-form-success svg{flex-shrink:0;width:22px;height:22px;color:#2f8b47;}

/* ===== Monthly Statement ===== */
.statement-filter-card{
    max-width:760px;margin:0 auto;background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius);padding:26px 26px;
  }
.statement-filter-row{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;}
.filter-field{flex:1;min-width:150px;}
.filter-field label{display:block;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:7px;}
.filter-field select{
    width:100%;padding:10px 13px;border-radius:9px;border:1.5px solid var(--border);font-size:14px;
    font-family:inherit;color:var(--text);background:#fff;appearance:none;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%236b7480" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;
  }
.filter-field select:focus{outline:none;border-color:var(--navy);}
.statement-filter-row .btn{flex-shrink:0;padding:11px 30px;}
.statement-filter-row .btn svg{width:15px;height:15px;flex-shrink:0;}
.statement-placeholder{
    max-width:760px;margin:28px auto 0;text-align:center;color:var(--muted);font-size:13.5px;
    background:var(--bg);border:1.5px dashed var(--border);border-radius:var(--radius);padding:40px 24px;
  }
.statement-placeholder svg{width:28px;height:28px;color:var(--navy);margin-bottom:12px;}
.statement-result{margin-top:36px;}
.statement-result h3{text-align:center;color:var(--navy-dark);font-size:16px;margin-bottom:22px;}
.statement-table-wrap{max-width:960px;margin:0 auto;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);}
table.statement-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px;}
table.statement-table thead th{
    background:var(--navy);color:#fff;text-align:left;padding:13px 16px;font-weight:600;font-size:12.8px;
    white-space:nowrap;
  }
table.statement-table thead th:not(:first-child){text-align:right;}
table.statement-table tbody td{padding:13px 16px;border-top:1px solid var(--border);color:var(--text);}
table.statement-table tbody td:not(:first-child){text-align:right;}
table.statement-table tbody tr:nth-child(even){background:var(--bg);}
.statement-empty-note{
    text-align:center;color:var(--muted);font-size:12.5px;margin-top:14px;
  }

/* ===== One Accord ===== */
.oa-content{background:#fff;}
.oa-guideline{max-width:760px;margin:0 auto 34px;text-align:center;}
.oa-guideline a{
    display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--navy);font-weight:600;
    background:#eef1f4;padding:10px 18px;border-radius:999px;transition:background .15s ease,color .15s ease;
  }
.oa-guideline a:hover{background:var(--navy);color:#fff;}
.oa-guideline svg{width:15px;height:15px;flex-shrink:0;}

/* ===== One Accord grid table ===== */
.oa-table-wrap{
    max-width:960px;margin:0 auto;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;
  }
table.oa-table{width:100%;border-collapse:collapse;font-size:14px;}
table.oa-table thead th{
    text-align:left;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
    font-weight:600;padding:14px 20px;border-bottom:2px solid var(--border);white-space:nowrap;
  }
table.oa-table tbody td{padding:14px 20px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);}
table.oa-table tbody tr:last-child td{border-bottom:none;}
table.oa-table tbody tr:hover{background:#faf9f6;}
table.oa-table td.oa-col-issue{font-weight:700;color:var(--navy-dark);width:90px;white-space:nowrap;}
table.oa-table td.oa-col-title{line-height:1.5;}
table.oa-table th.oa-col-download,table.oa-table td.oa-col-download{text-align:right;width:170px;white-space:nowrap;}

/* ===== Pagination ===== */
.oa-pagination{
    display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px;flex-wrap:wrap;
  }
.oa-pagination[hidden]{display:none;}
.oa-page-btn,.oa-page-btn-num{
    font-family:inherit;cursor:pointer;border-radius:8px;font-size:13.5px;font-weight:600;
    border:1.5px solid var(--border);background:#fff;color:var(--text);padding:8px 14px;
    transition:all .15s ease;
  }
.oa-page-btn:hover:not(:disabled),.oa-page-btn-num:hover{border-color:var(--navy);color:var(--navy);}
.oa-page-btn:disabled{opacity:.4;cursor:not-allowed;}
.oa-page-btn-num{width:38px;padding:8px 0;text-align:center;}
.oa-page-btn-num.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.oa-page-numbers{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}

/* ===== Prayer Ministry Excerpts (coming soon) ===== */
.pme-content{background:#fff;}
.pme-coming-soon{
    max-width:520px;margin:0 auto;text-align:center;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow);padding:60px 40px;
  }
.pme-icon{
    width:64px;height:64px;border-radius:50%;background:#eef1f4;color:var(--navy);
    display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
  }
.pme-icon svg{width:28px;height:28px;}
.pme-coming-soon h2{font-size:22px;margin-bottom:10px;}
.pme-coming-soon p{color:var(--muted);font-size:14.5px;margin:0;}

/* ===== Related links ===== */
.links-content{background:#fff;}
.links-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.link-card{
    display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);padding:18px 18px;box-shadow:var(--shadow);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  }
.link-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--navy);}
.link-icon{
    flex-shrink:0;width:46px;height:46px;border-radius:11px;background:var(--navy);color:var(--gold);
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.3px;
  }
.link-body{flex:1;min-width:0;}
.link-body h3{font-size:14.5px;margin:0 0 3px;color:var(--text);font-weight:600;line-height:1.35;}
.link-body p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45;}
.link-arrow{
    flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#eef1f4;color:var(--navy);
    display:flex;align-items:center;justify-content:center;font-size:13px;transition:background .18s ease,color .18s ease;
  }
.link-card:hover .link-arrow{background:var(--navy);color:#fff;}
.links-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:30px;}

/* ===== Beliefs content ===== */
.beliefs-content{background:#fff;}
.belief-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.belief-card{
    display:flex;gap:16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
    padding:24px 22px;
  }
.belief-num{
    flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--gold);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
  }
.belief-body{min-width:0;}
.belief-body h3{font-size:16px;margin-bottom:8px;}
.belief-body p{color:var(--muted);font-size:14px;margin-bottom:10px;}
.belief-ref{font-size:12.5px;color:var(--gold-dark);font-weight:600;}
.hero h1{color:#fff;font-size:clamp(20px,2.6vw,28px);max-width:700px;margin:0 auto 10px;line-height:1.3;}


/* ===== Responsive: @media (max-width:980px) ===== */
@media (max-width:980px){
  nav.main-nav, .header-actions .btn, .lang-switch{display:none;}
  .hamburger{display:flex;}
  .topbar .contact-line span.hide-sm{display:none;}
  .about-grid{grid-template-columns:1fr;gap:32px;}
  .about-media{order:-1;aspect-ratio:16/9;}
  .event-grid{grid-template-columns:repeat(2,1fr);}
  .meeting-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  nav.main-nav, .header-actions .btn, .header-actions .user-menu, .lang-switch{display:none;}
  .admin-sidebar{display:none !important;}
  body.role-admin .admin-menu-toggle{display:flex;}
  .news-grid{grid-template-columns:repeat(2,1fr);}
  .links-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .media-grid{grid-template-columns:1fr;}
  .offering-grid{grid-template-columns:minmax(0,1fr);}
}

/* ===== Responsive: @media (max-width:640px) ===== */
@media (max-width:640px){
  section{padding:46px 0;}
  .nav-row{height:66px;}
  .brand .mark{width:40px;height:40px;font-size:16px;}
  .brand .name strong{font-size:14.5px;}
  .brand .name small{display:none;}
  .hero .wrap{padding:26px 20px 30px;}
  .event-grid{grid-template-columns:1fr;}
  .event-body h3{font-size:15px;}
  .footer-top{grid-template-columns:1fr;padding:40px 0 24px;gap:30px;text-align:center;}
  .footer-col{display:flex;flex-direction:column;align-items:center;}
  .footer-brand{justify-content:center;}
  .address-block{max-width:280px;margin:0 auto 14px;}
  .map-link{margin-left:auto;margin-right:auto;}
  .footer-col ul{align-items:center;}
  .news-row{flex-direction:column;align-items:flex-start;gap:12px;}
  .locked-btn{align-self:flex-start;}
  .pursuit-card{padding:26px 22px;}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center;}
  .icon-btn.hide-xs{display:none;}
  .admin-topbar{top:66px;}
  .admin-topbar-label span{display:none;}
  .admin-menu-toggle svg{width:16px;height:16px;}
  .profile-content{padding:32px 0 40px;}
  .profile-card{padding:26px 20px;border-radius:10px;}
  .profile-field-grid{grid-template-columns:1fr;gap:0;}
  .page-header-inner{padding:0 20px;}
  .news-grid{grid-template-columns:1fr;}
  .page-header-inner .lead{display:flex;flex-direction:column;align-items:center;gap:2px;}
  .cnd-tabs{gap:8px;}
  .cnd-tab-btn{flex:1 1 calc(50% - 8px);justify-content:center;padding:10px 12px;font-size:12.5px;}
  .cnd-toolbar .btn{width:100%;justify-content:center;}
  .msg-body p{text-align:left;}
  .ann-block ol li{padding:13px 16px 13px 46px;font-size:13.5px;}
  .ann-block ol li::before{left:14px;top:13px;width:20px;height:20px;font-size:11px;}
  /* Wide tables become stacked label/value cards instead of scrolling sideways */
  .church-stmt-table-wrap{overflow-x:visible;border:none;}
  table.church-stmt-table{min-width:0;font-size:13.5px;}
  table.church-stmt-table thead{display:none;}
  table.church-stmt-table tbody{display:flex;flex-direction:column;gap:12px;}
  table.church-stmt-table tbody tr{
      display:block;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)!important;
      overflow:hidden;
    }
  table.church-stmt-table tbody tr.row-total{border-color:var(--navy);}
  table.church-stmt-table tbody td{
      display:flex;align-items:center;justify-content:space-between;gap:14px;
      padding:10px 14px;border-top:1px solid var(--border);text-align:right;
    }
  table.church-stmt-table tbody td:first-child{
      border-top:none;font-weight:700;background:var(--bg);text-align:left;color:var(--navy-dark);
    }
  table.church-stmt-table tbody td:not(:first-child)::before{
      content:attr(data-label);font-weight:600;color:var(--muted);text-align:left;padding-right:10px;
    }
  .links-grid{grid-template-columns:1fr;}
  .contact-form-card, .contact-info-card{padding:22px 20px;}
  table.dr-table thead{display:none;}
  table.dr-table tbody tr{
      display:block;border-bottom:1px solid var(--border);padding:14px 4px;
    }
  table.dr-table tbody tr[hidden]{display:none;}
  table.dr-table tbody tr:last-child{border-bottom:none;}
  table.dr-table tbody td{
      display:flex;justify-content:space-between;align-items:center;gap:14px;
      padding:6px 16px;border-bottom:none;text-align:right;white-space:normal;
    }
  table.dr-table td::before{
      content:attr(data-label);font-size:11.5px;font-weight:600;color:var(--muted);
      text-transform:uppercase;letter-spacing:.4px;text-align:left;flex-shrink:0;
    }
  table.dr-table td.dr-col-title{text-align:right;min-width:0;}
  .drd-article{padding:24px 20px;}
  .erd-field-grid{grid-template-columns:1fr;}
  .erd-card{padding:24px 20px;}
  table.erd-table thead{display:none;}
  table.erd-table tbody tr{
      display:block;border-bottom:1px solid var(--border);padding:14px 4px;
    }
  table.erd-table tbody tr[hidden]{display:none;}
  table.erd-table tbody tr:last-child{border-bottom:none;}
  table.erd-table tbody td{
      display:flex;justify-content:space-between;align-items:center;gap:14px;
      padding:6px 16px;border-bottom:none;text-align:right;white-space:normal;
    }
  table.erd-table td::before{
      content:attr(data-label);font-size:11.5px;font-weight:600;color:var(--muted);
      text-transform:uppercase;letter-spacing:.4px;text-align:left;flex-shrink:0;
    }
  table.erd-table td.erd-col-name{text-align:right;min-width:0;}
  .erd-empty-row td{display:block;text-align:center;}
  .erd-empty-row td::before{content:none;}
  .erd-participants-head{align-items:flex-start;}
  .cal-card{padding:20px 16px 18px;}
  .cal-head h3{font-size:15px;}
  .tl-item{flex-direction:column;align-items:flex-start;gap:14px;}
  .tl-date{flex-direction:row;width:auto;height:auto;padding:8px 16px;gap:8px;border-radius:999px;}
  .tl-date .d{font-size:16px;}
  .tl-date .m,.tl-date .y{margin:0;}
  .tl-action{width:100%;}
  .tl-register-btn{width:100%;}
  .media-body{padding:18px 18px 20px;}
  table.mre-table thead{display:none;}
  table.mre-table tbody tr{
      display:block;border-bottom:1px solid var(--border);padding:14px 4px;
    }
  table.mre-table tbody tr[hidden]{display:none;}
  table.mre-table tbody tr:last-child{border-bottom:none;}
  table.mre-table tbody td{
      display:flex;justify-content:space-between;align-items:center;gap:14px;
      padding:6px 16px;border-bottom:none;text-align:right;white-space:normal;
    }
  table.mre-table td::before{
      content:attr(data-label);font-size:11.5px;font-weight:600;color:var(--muted);
      text-transform:uppercase;letter-spacing:.4px;text-align:left;flex-shrink:0;
    }
  table.mre-table td.mre-col-title{text-align:right;min-width:0;}
  .offering-bank-card, .offering-guide-card, .offering-form-card{padding:20px 18px;}
  .offer-line{flex-wrap:wrap;}
  .offer-line .offer-amount{width:calc(100% - 34px);margin-left:34px;}
  .statement-filter-card{padding:20px 18px;}
  .statement-filter-row{flex-direction:column;align-items:stretch;}
  .statement-filter-row .btn{width:100%;}
  table.oa-table thead{display:none;}
  table.oa-table tbody tr{
      display:block;border-bottom:1px solid var(--border);padding:14px 4px;
    }
  table.oa-table tbody tr[hidden]{display:none;}
  table.oa-table tbody tr:last-child{border-bottom:none;}
  table.oa-table tbody td{
      display:flex;justify-content:space-between;align-items:center;gap:14px;
      padding:6px 16px;border-bottom:none;text-align:right;
    }
  table.oa-table td.oa-col-issue{width:auto;}
  table.oa-table td::before{
      content:attr(data-label);font-size:11.5px;font-weight:600;color:var(--muted);
      text-transform:uppercase;letter-spacing:.4px;text-align:left;flex-shrink:0;
    }
  table.oa-table td.oa-col-title{text-align:right;}
  table.oa-table td.oa-col-download{width:auto;justify-content:space-between;}
  .pme-coming-soon{padding:40px 24px;}
  .belief-grid{grid-template-columns:1fr;}
}

/* ===== Responsive: @media print ===== */
@media print{
  .topbar,.site-header,.mobile-drawer,.overlay,footer,.cnd-toolbar,.cnd-tabs,.modal-overlay,.pdf-loading-overlay{display:none!important;}
  body{background:#fff;}
  section{padding:0;}
  .page-header{background:none!important;color:var(--navy-dark)!important;padding:0 0 20px;}
  .page-header-inner h1,.page-header-inner p.lead{color:var(--navy-dark)!important;}
  .tab-panel{display:block!important;margin:0 0 46px;page-break-after:always;}
  .tab-panel:last-child{page-break-after:auto;}
}


/* ===== DataTables controls — matched to site UI ===== */
.dataTables_wrapper {
    font-family: inherit;
    color: var(--text);
}

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 16px;
    }

        .dataTables_wrapper .dataTables_length label,
        .dataTables_wrapper .dataTables_filter label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--text);
        }

        .dataTables_wrapper .dataTables_filter input,
        .dataTables_wrapper .dataTables_length select {
            font-family: inherit;
            font-size: 14px;
            color: var(--text);
            background: var(--bg);
            border: 1.5px solid var(--border);
            border-radius: 9px;
            padding: 8px 13px;
            margin-left: 0;
        }

            .dataTables_wrapper .dataTables_filter input:focus,
            .dataTables_wrapper .dataTables_length select:focus {
                outline: none;
                border-color: var(--navy);
                background: #fff;
            }

        .dataTables_wrapper .dataTables_length select {
            appearance: none;
            -webkit-appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%236b7480" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
            background-repeat: no-repeat;
         /*   background-position: right 12px center;*/
            background-position: right 12px;
            padding-right: 32px;
        }

    .dataTables_wrapper .dataTables_info {
        font-size: 13px;
        color: var(--muted);
        padding-top: 10px;
    }

    .dataTables_wrapper .dataTables_paginate {
        padding-top: 10px;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            font-family: inherit;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--text);
            background: #fff;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            padding: 7px 13px;
            margin-left: 6px;
            cursor: pointer;
            transition: all .15s ease;
            box-shadow: none;
        }

            .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
                color: var(--navy);
                background: #fff;
                border-color: var(--navy);
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button.current,
            .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
                color: #fff;
                background: var(--navy);
                border-color: var(--navy);
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
            .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
                opacity: .4;
                cursor: not-allowed;
                color: var(--text);
                background: #fff;
                border-color: var(--border);
            }

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    margin-bottom: 12px;
}

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 4px 8px;
        padding-right: 14px;
    }
.form-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
}

.form-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

    .form-alert-icon svg {
        width: 20px;
        height: 20px;
    }

.form-alert-success {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #bbf0cc;
}

.form-alert-error {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.btn-danger {
    background: transparent;
    border-color: #dc2626;
    color: #dc2626;
}

    .btn-danger:hover {
        background: #dc2626;
        color: #fff;
    }

.swal2-actions {
    gap: 12px;
}