/* assets/css/style.css */
:root{
  --navy:#0f2a4a; --navy-2:#173d68; --gold:#c8a24a; --gold-2:#b08d36;
  --bg:#f4f6fa; --card:#ffffff; --text:#1c2533; --muted:#6b7a90;
  --border:#e2e7ef; --green:#0f8a4d; --amber:#b7791f; --red:#b83232;
  --radius:10px; --shadow:0 1px 3px rgba(16,32,60,.07), 0 6px 20px rgba(16,32,60,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55; font-size:15px;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:var(--navy-2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--navy); line-height:1.25; margin:0 0 .6rem}
h1{font-size:1.65rem} h2{font-size:1.2rem} h3{font-size:1.02rem}
p{margin:.4rem 0 .8rem}
.wrap{width:min(1180px,94vw); margin:0 auto}
main.wrap{flex:1; padding:1.4rem 0 3rem}

.topbar{background:var(--navy); color:#fff; box-shadow:var(--shadow); position:sticky; top:0; z-index:20}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.65rem; color:#fff; text-decoration:none}
.brand:hover{text-decoration:none}
.logo{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:var(--navy); display:grid; place-items:center;
  font-weight:800; letter-spacing:.5px; font-size:.95rem; flex:0 0 auto;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text strong{font-size:.98rem}
.brand-text small{font-size:.72rem; opacity:.75}
.brand-text em{font-style:italic; color:var(--gold)}
.topbar nav{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}
.topbar nav a{color:#dbe4f0; padding:.42rem .7rem; border-radius:6px; font-size:.9rem}
.topbar nav a:hover{background:rgba(255,255,255,.1); text-decoration:none}
.topbar .who{font-size:.82rem; opacity:.7; padding:0 .3rem}

.btn{
  display:inline-block; padding:.55rem .95rem; border-radius:8px; border:1px solid transparent;
  font-size:.9rem; font-weight:600; cursor:pointer; text-align:center; font-family:inherit;
  transition:.15s ease; line-height:1.3;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-outline{background:#fff; color:var(--navy); border-color:var(--border)}
.btn-outline:hover{border-color:var(--navy)}
.btn-ghost{background:transparent; color:inherit; border-color:rgba(255,255,255,.25)}
main .btn-ghost{color:var(--navy); border-color:var(--border)}
.btn-danger{background:var(--red); color:#fff}
.btn-sm{padding:.28rem .55rem; font-size:.78rem}
.btn-lg{padding:.75rem 1.4rem; font-size:1rem}
.btn-block{display:block; width:100%}
.mt{margin-top:.8rem}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.15rem 1.25rem; box-shadow:var(--shadow); margin-bottom:1.2rem;
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
@media(max-width:860px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.stat{text-align:center}
.stat-num{font-size:1.7rem; font-weight:800; color:var(--navy)}
.stat-label{font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}

.hero{
  background:linear-gradient(135deg,var(--navy),var(--navy-2) 60%, #24507f);
  color:#fff; border-radius:14px; padding:2.6rem 2rem; text-align:center;
  margin-bottom:1.4rem; box-shadow:var(--shadow);
}
.hero h1{color:#fff; font-size:2rem; margin-bottom:.2rem}
.hero .subtitle{opacity:.85; margin:0 0 .8rem}
.motto-big{font-style:italic; color:var(--gold); font-size:1.25rem; margin:.6rem 0 1.4rem}
.hero-actions{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap}
.hero .btn-primary{background:var(--gold); color:var(--navy)}
.hero .btn-primary:hover{background:var(--gold-2)}
.hero .btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.hero .btn-outline:hover{border-color:#fff}

.page-head{margin-bottom:1.1rem}
.page-head h1{margin-bottom:.15rem}
.muted{color:var(--muted)}
.small{font-size:.83rem}
.center{text-align:center}

label{display:block; margin-bottom:.85rem; font-weight:600; font-size:.87rem; color:#2b3a4f}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
select,textarea{
  width:100%; padding:.55rem .7rem; border:1px solid var(--border); border-radius:8px;
  font-size:.92rem; font-family:inherit; background:#fdfefe; margin-top:.25rem; color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--navy-2); box-shadow:0 0 0 3px rgba(23,61,104,.1)}
fieldset{border:1px solid var(--border); border-radius:var(--radius); padding:1rem; margin:0 0 1rem}
legend{font-weight:700; color:var(--navy); font-size:.85rem; padding:0 .4rem; text-transform:uppercase; letter-spacing:.04em}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:.2rem 1rem}
.form-grid .span-2{grid-column:1 / -1}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.form-actions{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap}
.checkbox{display:flex; align-items:center; gap:.5rem; font-weight:500}
.checkbox input{width:auto; margin:0}
.inline-form{display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap}
.inline-form label{margin-bottom:0; flex:1; min-width:140px}
.inline{display:inline-block}
.radio-row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:.8rem}
@media(max-width:600px){.radio-row{grid-template-columns:1fr}}
.radio-card{
  display:flex; gap:.6rem; align-items:flex-start; border:1px solid var(--border);
  border-radius:8px; padding:.8rem; cursor:pointer; margin:0; font-weight:500;
}
.radio-card:has(input:checked){border-color:var(--navy); background:#f2f6fc}
.radio-card input{width:auto; margin:.2rem 0 0}
.radio-card span{display:flex; flex-direction:column}
.radio-card small{color:var(--muted); font-weight:400; font-size:.8rem}
.filter-bar{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.filter-bar input,.filter-bar select{width:auto; flex:1; min-width:150px; margin-top:0}
.filter-bar label.inline{display:flex; align-items:center; gap:.4rem; margin:0; font-weight:500}
.filter-bar label.inline input{min-width:90px; flex:none}

.table{width:100%; border-collapse:collapse; font-size:.88rem}
.table th{
  text-align:left; padding:.6rem .55rem; border-bottom:2px solid var(--border);
  font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
}
.table td{padding:.6rem .55rem; border-bottom:1px solid var(--border); vertical-align:top}
.table tbody tr:hover{background:#fafbfe}
.table.small{font-size:.82rem}
.kv{width:100%; border-collapse:collapse; font-size:.9rem}
.kv th{
  text-align:left; padding:.4rem .6rem .4rem 0; color:var(--muted); font-weight:600;
  width:42%; font-size:.82rem; vertical-align:top;
}
.kv td{padding:.4rem 0}
code{background:#eef2f8; padding:.1rem .35rem; border-radius:4px; font-size:.85em; color:var(--navy)}
pre.code{
  background:#0f2a4a; color:#e6eefb; padding:.9rem; border-radius:8px; overflow:auto;
  font-size:.78rem; line-height:1.5;
}
.chip{
  display:inline-block; background:#eef2f8; color:var(--navy-2); border-radius:20px;
  padding:.12rem .55rem; font-size:.72rem; margin:.1rem .15rem .1rem 0; font-weight:600;
}

.badge{
  display:inline-block; padding:.18rem .55rem; border-radius:20px; font-size:.72rem;
  font-weight:700; letter-spacing:.02em;
}
/* ============================================================
   Events (homepage) + Renewal banner
   ============================================================ */

/* ---------- Events grid ---------- */
.events-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.1rem;
  margin-top:.4rem;
}
.event-card{
  display:flex; gap:1rem;
  background:linear-gradient(180deg, #ffffff, #fafbfe);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:1rem 1.1rem;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.event-card:hover{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow);
}
.event-date{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:64px;
  padding:.55rem .4rem;
  border-radius:12px;
  background:linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color:#fff;
  text-align:center;
  box-shadow:0 6px 18px rgba(15,42,74,.18);
}
.event-day{font-size:1.5rem; font-weight:800; line-height:1; letter-spacing:-.03em}
.event-mon{
  font-size:.72rem; font-weight:700; letter-spacing:.1em;
  color:var(--gold-500); margin-top:.15rem;
}
.event-year{font-size:.66rem; opacity:.7; margin-top:.05rem}
.event-body{flex:1; min-width:0}
.event-body h3{
  margin:0 0 .25rem;
  font-size:1rem;
  font-weight:700;
  color:var(--navy-800);
  letter-spacing:-.01em;
}
.event-meta{font-size:.8rem; color:var(--muted); margin:0 0 .4rem}
.event-desc{font-size:.85rem; color:var(--text-2); margin:0; line-height:1.5}

/* ---------- Textarea polish (used in admin/events.php) ---------- */
textarea{
  width:100%; padding:.7rem .9rem;
  border:1.5px solid var(--border-strong); border-radius:10px;
  font-size:.93rem; font-family:inherit; background:var(--surface);
  color:var(--text); margin-top:.4rem; resize:vertical;
  transition:border-color var(--transition), box-shadow var(--transition);
}
textarea:focus{
  outline:none; border-color:var(--navy-500);
  box-shadow:var(--ring); background:var(--surface-2);
}

/* ---------- Renewal reminder banner ---------- */
.renewal-banner{
  display:flex; gap:1rem; align-items:center;
  padding:1.1rem 1.25rem;
  border-radius:14px;
  margin-bottom:1.4rem;
  border:1.5px solid transparent;
  box-shadow:var(--shadow-xs);
  animation:fadeUp .4s ease both;
}
.renewal-icon{
  flex:0 0 auto;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  font-size:1.35rem;
  font-weight:800;
  color:#fff;
}
.renewal-text{flex:1; font-size:.94rem; line-height:1.55}
.renewal-text strong{font-weight:700}

.renewal-success{
  background:linear-gradient(180deg, #eefaf3, #e2f5ea);
  border-color:#bfe6d2; color:#0a6e43;
}
.renewal-success .renewal-icon{background:linear-gradient(135deg,#0d8a55,#0a6e43)}

.renewal-warning{
  background:linear-gradient(180deg, #fdf9ec, #fdf3df);
  border-color:#f0dfa8; color:#8a6212;
}
.renewal-warning .renewal-icon{background:linear-gradient(135deg,#d99a2b,#b8791b)}

.renewal-danger{
  background:linear-gradient(180deg, #fdf1f1, #fdecec);
  border-color:#f5c6c6; color:#932727;
}
.renewal-danger .renewal-icon{background:linear-gradient(135deg,#d14545,#b83232)}

.renewal-info{
  background:linear-gradient(180deg, #eef5fd, #eaf2fd);
  border-color:#c6d9f2; color:#1c4b82;
}
.renewal-info .renewal-icon{background:linear-gradient(135deg,#2a6299,#1f5fa8)}
.badge-success{background:#e2f5ea; color:var(--green)}
.badge-warning{background:#fdf3df; color:var(--amber)}
.badge-danger{background:#fbe6e6; color:var(--red)}
.badge-info{background:#e4edfa; color:var(--navy-2)}

.alert{padding:.75rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:.9rem; border:1px solid transparent}
.alert ul{margin:.35rem 0 0; padding-left:1.15rem}
.alert-success{background:#e7f6ee; border-color:#bfe6d2; color:#0d6b3d}
.alert-error{background:#fdeaea; border-color:#f5c6c6; color:#932727}
.alert-warning{background:#fdf6e3; border-color:#f0dfa8; color:#8a6212}
.alert-info{background:#e8f0fb; border-color:#c6d9f2; color:#1c4b82}
.error-list{margin:.5rem 0 0; padding-left:1.1rem; font-size:.86rem; color:var(--red)}

.centered{display:grid; place-items:center; min-height:100vh; background:var(--navy); padding:1.5rem}
.auth-card{width:min(420px,92vw); margin:1.5rem auto}
.auth-card.wide{width:min(620px,94vw)}
.centered .auth-card{background:#fff; border:none}

.steps{padding-left:1.2rem}
.steps li{margin-bottom:.5rem}
.action-list{display:flex; flex-direction:column; gap:.5rem}
.pager{display:flex; gap:.35rem; flex-wrap:wrap; margin-top:1rem}
.page-link{
  padding:.35rem .7rem; border:1px solid var(--border); border-radius:6px;
  background:#fff; font-size:.85rem;
}
.page-link.active{background:var(--navy); color:#fff; border-color:var(--navy)}
.page-link:hover{text-decoration:none; border-color:var(--navy)}
.perm-grid{display:grid; grid-template-columns:1fr 1fr; gap:.35rem 1rem}
@media(max-width:700px){.perm-grid{grid-template-columns:1fr}}
.spinner{
  display:inline-block; width:12px; height:12px; border:2px solid rgba(28,75,130,.3);
  border-top-color:#1c4b82; border-radius:50%; animation:spin .8s linear infinite;
  vertical-align:middle; margin-left:.4rem;
}
@keyframes spin{to{transform:rotate(360deg)}}
.fee-big{font-size:1.9rem; font-weight:800; color:var(--navy); margin:.2rem 0 .8rem}

.site-footer{background:var(--navy); color:#c7d5e8; padding:1.1rem 0; font-size:.83rem; margin-top:auto}
.site-footer p{margin:0; text-align:center}
.site-footer .motto{color:var(--gold); font-style:italic}