/* Modern page templates styling — gallery, become-member, donate, dashboard, contact */
:root{
  --ink:#1a1a1a; --ink-soft:#5b5b5b; --line:#eadfd0;
  --brand:#ff7010; --brand-2:#b8860b; --bg-soft:#fff8ef;
  --radius:14px; --shadow:0 6px 24px rgba(0,0,0,.06);
}
.section{ padding:60px 0; background:#fff; }
.section:nth-of-type(even){ background:var(--bg-soft); }
.section .container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.section-title{ text-align:center; margin-bottom:40px; }
.section-title .eyebrow{
  display:inline-block; font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color:var(--brand); font-weight:700; margin-bottom:10px;
}
.section-title h2{
  font-size:34px; line-height:1.2; margin:0; color:var(--ink);
  font-weight:800;
}
.section-title p{ color:var(--ink-soft); margin-top:10px; }

/* Grids */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* Gallery */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;
}
@media (max-width:1100px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
.gallery-item{
  display:block; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); background:#eee; aspect-ratio:1/1; position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.gallery-item:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.12); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Video gallery */
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .video-grid{ grid-template-columns:1fr; } }
.video-item{
  background:#000; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:16/9; box-shadow:var(--shadow);
}
.video-item iframe, .video-item video{ width:100%; height:100%; border:0; display:block; }

/* Cards */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:999px; font-weight:600; font-size:14px;
  border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:all .25s;
  line-height:1;
}
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:#e05f00; color:#fff; }
.btn-outline{ background:transparent; color:var(--brand); border-color:var(--brand); }
.btn-outline:hover{ background:var(--brand); color:#fff; }

/* Forms */
.form-box{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow); max-width:900px; margin:0 auto;
}
.form-fieldset{
  border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:20px;
}
.form-fieldset legend{
  padding:0 10px; font-weight:700; color:var(--brand); font-size:15px;
}
.form-row{ margin-bottom:14px; }
.form-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.form-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:700px){ .form-grid-2,.form-grid-3{ grid-template-columns:1fr; } }
.form-box label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink); }
.form-box input[type=text],.form-box input[type=email],.form-box input[type=tel],
.form-box input[type=number],.form-box input[type=date],.form-box input[type=password],
.form-box input[type=url],.form-box select,.form-box textarea{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:10px;
  font-size:14px; background:#fff; transition:border-color .2s;
}
.form-box input:focus,.form-box select:focus,.form-box textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,112,16,.12);
}

/* Payment tiles */
.pay-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:16px 0; }
@media (max-width:560px){ .pay-tiles{ grid-template-columns:1fr; } }
.pay-tile{
  border:2px solid var(--line); border-radius:12px; padding:18px; cursor:pointer;
  background:#fff; text-align:left; transition:all .2s;
}
.pay-tile:hover{ border-color:var(--brand); }
.pay-tile.active{ border-color:var(--brand); background:#fff5eb; }
.pay-tile .icon{ font-size:24px; color:var(--brand); margin-bottom:8px; display:block; }
.qr-box{
  background:#f8f8f8; border:1px dashed var(--line); border-radius:12px;
  padding:22px; text-align:center; margin:14px 0;
}
.qr-box img{ max-width:220px; width:100%; height:auto; margin:0 auto; display:block; }
.amt-chip{ margin:4px; }

/* Dashboard */
.dash-grid{ display:grid; grid-template-columns:260px 1fr; gap:24px; }
@media (max-width:800px){ .dash-grid{ grid-template-columns:1fr; } }
.dash-side{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); height:fit-content;
}
.dash-side .avatar{
  width:90px; height:90px; border-radius:50%; margin:0 auto 14px; display:block;
  object-fit:cover; border:3px solid var(--brand);
}
.dash-menu{ list-style:none; padding:0; margin:0; }
.dash-menu li{ margin-bottom:4px; }
.dash-menu a{
  display:block; padding:10px 14px; border-radius:8px; color:var(--ink);
  text-decoration:none; font-size:14px; font-weight:500;
}
.dash-menu a:hover, .dash-menu a.active{ background:var(--brand); color:#fff; }
.dash-main{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
}

/* Badges */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:11px;
  font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
.badge.approved,.badge.paid,.badge.success{ background:#d4f4dd; color:#0a7a2a; }
.badge.pending{ background:#fff2cc; color:#8a6d00; }
.badge.rejected,.badge.failed{ background:#fddede; color:#a30000; }

/* Extra spacing for pages with fixed header */
main{ min-height:60vh; }