/* Modern card layout in the site's colours for the public pages (daftar, semakan, details, bayaran, confirmkhairat, thankyou, profile, profile_confirm, profile_thankyou, family, family_confirm, family_thankyou, derma, confirmderma, index, maklumat, daftar_family, daftar_confirm, termasyarat). */
.reg-page {
  --reg-primary: #00776d;
  --reg-primary-dark: #00635a;
  --reg-primary-soft: #e6f3f1;
  --reg-gold: #c9a24a;
  --reg-ink: #1f2d2b;
  --reg-muted: #6b7b78;
  --reg-line: #e3ebe9;
  --reg-radius: 18px;
  background: linear-gradient(180deg, #f3f8f7 0%, #ffffff 420px);
  color: var(--reg-ink);
  padding: 110px 0 72px;
}

/* ---------- heading ---------- */
.reg-hero { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.reg-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--reg-primary-soft); color: var(--reg-primary);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.reg-hero h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 700; margin-bottom: 10px; color: var(--reg-ink); }
.reg-hero p { color: var(--reg-muted); font-size: 15px; margin: 0; }

/* ---------- steps ---------- */
.reg-steps {
  list-style: none; padding: 0; margin: 0 auto 32px; max-width: 620px;
  display: flex; justify-content: space-between; position: relative;
}
.reg-steps::before {
  content: ""; position: absolute; top: 17px; left: 12%; right: 12%;
  height: 2px; background: var(--reg-line); z-index: 0;
}
.reg-steps li { flex: 1; text-align: center; position: relative; z-index: 1; font-size: 13px; color: var(--reg-muted); }
.reg-steps .num {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
  background: #fff; border: 2px solid var(--reg-line); font-weight: 700; color: var(--reg-muted);
}
.reg-steps li.active { color: var(--reg-ink); font-weight: 600; }
.reg-steps li.active .num {
  background: var(--reg-primary); border-color: var(--reg-primary); color: #fff;
  box-shadow: 0 0 0 5px rgba(0, 119, 109, .15);
}

/* ---------- cards ---------- */
.reg-card {
  background: #fff; border: 1px solid var(--reg-line); border-radius: var(--reg-radius);
  box-shadow: 0 18px 40px -24px rgba(16, 60, 55, .35);
  padding: 28px;
}
.reg-card + .reg-card { margin-top: 20px; }
.reg-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.reg-section-title .icon {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--reg-primary-soft); color: var(--reg-primary); font-size: 22px;
}
.reg-section-title h2 { font-size: 17px; font-weight: 700; margin: 0; color: var(--reg-ink); }
.reg-section-title p { font-size: 13px; color: var(--reg-muted); margin: 2px 0 0; }

/* ---------- fields ---------- */
.reg-page .form-floating > .form-control,
.reg-page .form-floating > .form-select {
  border: 1.5px solid var(--reg-line); border-radius: 12px; background-color: #fbfdfc;
  height: calc(3.6rem + 2px); font-size: 15px; color: var(--reg-ink);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.reg-page .form-floating > label {
  color: var(--reg-muted); font-size: 14px; padding-left: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.reg-page .form-floating > .form-control { padding-left: 16px; }
.reg-page .form-floating > .form-select { padding-left: 14px; }
.reg-page .form-control:focus, .reg-page .form-select:focus {
  border-color: var(--reg-primary); background-color: #fff;
  box-shadow: 0 0 0 4px rgba(0, 119, 109, .12);
}
.reg-page .req { color: #d9534f; }
.reg-page .form-text { font-size: 12px; color: var(--reg-muted); margin-left: 4px; }
.reg-page .was-validated .form-control:invalid,
.reg-page .was-validated .form-select:invalid { border-color: #dc3545; background-color: #fff8f8; }
.reg-page .invalid-feedback { font-size: 12px; margin-left: 4px; }

/* ---------- summary ---------- */
.reg-summary { position: sticky; top: 96px; }
.reg-summary .total-box, .reg-confirm .total-box {
  background: linear-gradient(135deg, var(--reg-primary) 0%, #0b8f82 100%);
  color: #fff; border-radius: 14px; padding: 20px; margin-bottom: 18px;
  position: relative; overflow: hidden;
}
.reg-summary .total-box::after, .reg-confirm .total-box::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(255, 255, 255, .08);
}
.reg-summary .total-box small, .reg-confirm .total-box small { opacity: .85; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.reg-summary .total-box .amount, .reg-confirm .total-box .amount { font-size: 34px; font-weight: 700; line-height: 1.1; margin-top: 4px; }
.reg-summary .line { display: flex; justify-content: space-between; font-size: 14px; padding: 9px 0; border-bottom: 1px dashed var(--reg-line); }
.reg-summary .line span:last-child { font-weight: 600; }
.reg-summary .next { margin: 18px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--reg-muted); }
.reg-summary .next li { display: flex; gap: 10px; margin-bottom: 10px; }
.reg-summary .next i { color: var(--reg-gold); font-size: 18px; line-height: 1; }

/* ---------- actions ---------- */
.reg-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; }
.reg-actions .terms { font-size: 13px; color: var(--reg-muted); margin: 0; flex: 1 1 260px; }
.reg-page .btn-reg {
  background: var(--reg-primary); border: 0; color: #fff; font-weight: 600; font-size: 15px;
  padding: 14px 26px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 22px -10px rgba(0, 119, 109, .8); transition: transform .15s, background .15s, box-shadow .15s;
}
.reg-page .btn-reg:hover { background: var(--reg-primary-dark); color: #fff; transform: translateY(-2px); }
.reg-page .btn-reg:disabled { opacity: .75; transform: none; }
.reg-page .alert { border-radius: 12px; }

/* the site's navbar links are white (made for the photo header on the home page) */
.navbar-custom .navbar-collapse .navbar-nav .nav-item .nav-link.reg-back {
  display: inline-flex; align-items: center; gap: 4px; color: #1f2d2b; font-size: 14px;
}
.navbar-custom .navbar-collapse .navbar-nav .nav-item .nav-link.reg-back:hover { color: #00776d; }

@media (max-width: 991.98px) {
  .reg-summary { position: static; margin-top: 20px; }
}
@media (max-width: 575.98px) {
  .reg-page { padding-top: 96px; }
  .reg-card { padding: 20px 16px; border-radius: 14px; }
  .reg-steps li { font-size: 11px; }
  .reg-actions .btn-reg { width: 100%; justify-content: center; }
}

/* ---------- member search (semakan.php) ---------- */
.reg-tabs {
  display: flex; gap: 6px; background: #f1f6f5; border-radius: 14px; padding: 5px; margin-bottom: 18px;
}
.reg-tabs .nav-link {
  flex: 1; border: 0; border-radius: 10px; background: transparent; color: var(--reg-muted);
  font-weight: 600; font-size: 14px; padding: 10px 12px; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.reg-tabs .nav-link:hover { color: var(--reg-primary); }
.reg-tabs .nav-link.active { background: #fff; color: var(--reg-primary); box-shadow: 0 4px 12px -6px rgba(16, 60, 55, .35); }

.reg-search { display: flex; gap: 10px; }
.reg-search .field { position: relative; flex: 1; }
.reg-search .field > i {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--reg-muted); pointer-events: none;
}
.reg-page .reg-search .form-control {
  height: 56px; padding-left: 48px; border: 1.5px solid var(--reg-line); border-radius: 12px;
  background-color: #fbfdfc; font-size: 16px;
}
.reg-search .btn-reg { white-space: nowrap; }
.reg-hint { font-size: 12px; color: var(--reg-muted); margin: 8px 0 0 4px; }

.reg-results-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.reg-results-head h2 { font-size: 17px; font-weight: 700; margin: 0; }
.reg-results-head span { font-size: 13px; color: var(--reg-muted); }

.reg-result {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--reg-line); border-radius: 14px; background: #fff;
  color: var(--reg-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.reg-result + .reg-result { margin-top: 10px; }
.reg-result:hover { border-color: rgba(0, 119, 109, .45); box-shadow: 0 10px 24px -16px rgba(16, 60, 55, .55); transform: translateY(-1px); color: var(--reg-ink); }
.reg-result .avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--reg-primary-soft); color: var(--reg-primary); font-weight: 700; font-size: 16px;
}
.reg-result .who { flex: 1; min-width: 0; }
.reg-result .name { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.reg-result .no { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--reg-primary); background: var(--reg-primary-soft); border-radius: 999px; padding: 2px 10px; font-weight: 600; }
.reg-result .go { color: var(--reg-primary); font-weight: 600; font-size: 13px; white-space: nowrap; display: flex; align-items: center; gap: 2px; }

.reg-empty { text-align: center; padding: 18px 8px 6px; color: var(--reg-muted); }
.reg-empty > i { font-size: 40px; color: var(--reg-gold); display: block; margin-bottom: 6px; }
.reg-empty strong { display: block; color: var(--reg-ink); font-size: 15px; margin-bottom: 4px; }

.reg-cta {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--reg-radius);
  background: linear-gradient(135deg, #fbf6ea 0%, #fff 100%); border: 1px solid #efe3c4;
}
.reg-cta > i { font-size: 30px; color: var(--reg-gold); }
.reg-cta .text { flex: 1; font-size: 14px; color: var(--reg-muted); }
.reg-cta .text strong { display: block; color: var(--reg-ink); font-size: 15px; }
.reg-cta .btn { border-radius: 10px; font-weight: 600; white-space: nowrap; }

@media (max-width: 575.98px) {
  .reg-search { flex-direction: column; }
  .reg-search .btn-reg { width: 100%; justify-content: center; }
  .reg-result .go span { display: none; }
  .reg-cta { flex-wrap: wrap; }
  .reg-cta .btn { width: 100%; }
}

/* ---------- member details (details.php) ---------- */
.reg-member {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--reg-primary) 0%, #0b8f82 100%); color: #fff;
  border-radius: var(--reg-radius); padding: 26px 28px; margin-bottom: 24px;
  box-shadow: 0 22px 44px -26px rgba(0, 99, 90, .9); position: relative; overflow: hidden;
}
.reg-member::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 240px; height: 240px;
  border-radius: 50%; background: rgba(255, 255, 255, .07);
}
.reg-member .avatar {
  width: 68px; height: 68px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .35);
  font-size: 24px; font-weight: 700;
}
.reg-member .who { flex: 1; min-width: 200px; position: relative; z-index: 1; }
.reg-member small { opacity: .8; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.reg-member h1 { color: #fff; font-size: clamp(20px, 3vw, 26px); font-weight: 700; margin: 2px 0 8px; overflow-wrap: anywhere; }
.reg-member .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.reg-member .chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 4px 12px;
}

.reg-status { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; font-size: 14px; }
.reg-status > i { font-size: 24px; line-height: 1; }
.reg-status strong { display: block; font-size: 15px; }
.reg-status.ok { background: #e7f6ee; color: #1d6b43; }
.reg-status.part { background: #fdf4e3; color: #8a5a00; }
.reg-status.none { background: #fdeceb; color: #9b2c2c; }

.reg-years { list-style: none; margin: 0 0 18px; padding: 0; max-height: 330px; overflow-y: auto; }
.reg-years li { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px dashed var(--reg-line); font-size: 14px; }
.reg-years li:last-child { border-bottom: 0; }
.reg-years .yr { font-weight: 700; width: 52px; }
.reg-years .amt { flex: 1; color: var(--reg-muted); }
.reg-years .tag { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.reg-years .tag.ok { background: #e7f6ee; color: #1d6b43; }
.reg-years .tag.part { background: #fdf4e3; color: #8a5a00; }

.reg-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.reg-info .item { background: #f7faf9; border: 1px solid var(--reg-line); border-radius: 12px; padding: 12px 14px; }
.reg-info .item span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--reg-muted); margin-bottom: 3px; }
.reg-info .item div { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.reg-info .item.wide { grid-column: 1 / -1; }

.reg-family { list-style: none; margin: 0 0 18px; padding: 0; }
.reg-family li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--reg-line); }
.reg-family li:last-child { border-bottom: 0; }
.reg-family .avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: #f1f6f5; color: var(--reg-primary); font-weight: 700; font-size: 13px;
}
.reg-family .name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.reg-family .rel { font-size: 12px; color: var(--reg-primary); background: var(--reg-primary-soft); border-radius: 999px; padding: 3px 10px; font-weight: 600; white-space: nowrap; }

.reg-page .btn-reg-outline {
  width: 100%; border: 1.5px solid var(--reg-primary); color: var(--reg-primary); background: #fff;
  font-weight: 600; font-size: 14px; padding: 11px 18px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, color .15s;
}
.reg-page .btn-reg-outline:hover { background: var(--reg-primary); color: #fff; }
.reg-page .btn-reg.w-100 { justify-content: center; }
.reg-empty-line { color: var(--reg-muted); font-size: 14px; background: #f7faf9; border-radius: 12px; padding: 14px; text-align: center; margin-bottom: 18px; }
.reg-links { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; font-size: 14px; }
.reg-links a { color: var(--reg-muted); display: inline-flex; align-items: center; gap: 4px; }
.reg-links a:hover { color: var(--reg-primary); }

@media (max-width: 575.98px) {
  .reg-member { padding: 20px; }
  .reg-member .avatar { width: 54px; height: 54px; font-size: 19px; }
  .reg-info { grid-template-columns: 1fr; }
}

/* ---------- khairat payment (bayaran.php) ---------- */
.reg-yeargrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.reg-yeartile { position: relative; margin: 0; cursor: pointer; }
.reg-yeartile input { position: absolute; opacity: 0; pointer-events: none; }
.reg-yeartile .box {
  display: block; border: 1.5px solid var(--reg-line); border-radius: 14px; background: #fbfdfc;
  padding: 14px 12px 12px; text-align: left; transition: border-color .15s, background .15s, box-shadow .15s;
  position: relative;
}
.reg-yeartile .box::after {
  content: "\F012C"; font-family: "Material Design Icons"; position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--reg-line); background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; color: transparent;
  transition: all .15s;
}
.reg-yeartile .yr { display: block; font-size: 20px; font-weight: 700; color: var(--reg-ink); line-height: 1.1; }
.reg-yeartile .amt { display: block; font-size: 13px; color: var(--reg-muted); margin-top: 4px; }
.reg-yeartile .now { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--reg-gold); margin-top: 6px; }
.reg-yeartile:hover .box { border-color: rgba(0, 119, 109, .5); }
.reg-yeartile input:checked + .box {
  border-color: var(--reg-primary); background: var(--reg-primary-soft);
  box-shadow: 0 8px 18px -12px rgba(0, 119, 109, .8);
}
.reg-yeartile input:checked + .box::after { background: var(--reg-primary); border-color: var(--reg-primary); color: #fff; }
.reg-yeartile input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(0, 119, 109, .2); }
.reg-year-error { display: none; color: #dc3545; font-size: 13px; margin-top: 10px; }
.reg-year-error.show { display: block; }

.reg-paid { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--reg-line); }
.reg-paid .label { font-size: 12px; color: var(--reg-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.reg-paid .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reg-paid .chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: #e7f6ee; color: #1d6b43; display: inline-flex; align-items: center; gap: 4px; }
.reg-paid .chip.part { background: #fdf4e3; color: #8a5a00; }
.reg-paid .note { font-size: 12px; color: #8a5a00; margin-top: 8px; }

.reg-page textarea.form-control { border: 1.5px solid var(--reg-line); border-radius: 12px; background-color: #fbfdfc; font-size: 15px; }
.reg-page .form-floating > textarea.form-control { height: 110px; padding-top: 1.8rem; }

.reg-picked { list-style: none; margin: 0 0 6px; padding: 0; font-size: 14px; }
.reg-picked li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--reg-line); }
.reg-picked li span:last-child { font-weight: 600; }
.reg-picked .none { color: var(--reg-muted); justify-content: center; border: 0; }

/* ---------- payment confirmation (confirmkhairat.php) ---------- */
.reg-steps li.done { color: var(--reg-primary); }
.reg-steps li.done .num { background: var(--reg-primary-soft); border-color: var(--reg-primary); color: var(--reg-primary); }

.reg-confirm .total-box { text-align: center; padding: 24px 20px; }
.reg-confirm .total-box .amount { font-size: 40px; }
.reg-confirm .years { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; position: relative; z-index: 1; }
.reg-confirm .years span { background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 600; }

.reg-rows { margin: 0 0 20px; }
.reg-rows .row-item { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--reg-line); font-size: 14px; }
.reg-rows .row-item:last-child { border-bottom: 0; }
.reg-rows dt { width: 175px; flex: none; font-weight: 500; color: var(--reg-muted); display: flex; align-items: center; gap: 6px; }
.reg-rows dd { margin: 0; font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }

.reg-gateway { display: flex; gap: 10px; align-items: flex-start; background: #f7faf9; border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--reg-muted); margin-bottom: 18px; }
.reg-gateway i { color: var(--reg-primary); font-size: 20px; line-height: 1; }
.reg-confirm-actions { display: flex; flex-direction: column; gap: 10px; }
.reg-confirm-actions form { margin: 0; }
.reg-page .btn-reg-ghost {
  width: 100%; background: transparent; border: 0; color: var(--reg-muted); font-weight: 600; font-size: 14px;
  padding: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.reg-page .btn-reg-ghost:hover { color: var(--reg-primary); }

@media (max-width: 575.98px) {
  .reg-rows .row-item { flex-direction: column; gap: 2px; }
  .reg-rows dt { width: auto; }
}

/* ---------- payment result (thankyou.php) ---------- */
.reg-result-hero { text-align: center; max-width: 560px; margin: 0 auto 26px; }
.reg-result-icon {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; font-size: 44px; color: #fff;
  animation: reg-pop .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
.reg-result-icon.ok { background: linear-gradient(135deg, #0b8f82, var(--reg-primary)); box-shadow: 0 0 0 10px rgba(0, 119, 109, .12); }
.reg-result-icon.fail { background: linear-gradient(135deg, #e0605b, #c0392b); box-shadow: 0 0 0 10px rgba(192, 57, 43, .12); }
.reg-result-icon.info { background: linear-gradient(135deg, #d8b25c, var(--reg-gold)); box-shadow: 0 0 0 10px rgba(201, 162, 74, .15); }
.reg-result-hero h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 700; margin-bottom: 8px; color: var(--reg-ink); }
.reg-result-hero p { color: var(--reg-muted); font-size: 15px; margin: 0; }
@keyframes reg-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.reg-receipt-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.reg-receipt-head .type { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; }
.reg-receipt-head .type i { color: var(--reg-primary); font-size: 20px; }
.reg-receipt-head .ref { font-size: 12px; color: var(--reg-muted); text-align: right; }
.reg-receipt-head .ref strong { display: block; color: var(--reg-ink); font-size: 14px; letter-spacing: .02em; }
.reg-receipt-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 4px; border-top: 2px solid var(--reg-line); margin-top: 4px; }
.reg-receipt-total span { font-weight: 600; color: var(--reg-muted); }
.reg-receipt-total strong { font-size: 26px; color: var(--reg-primary); }
.reg-year-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reg-year-chips span { background: var(--reg-primary-soft); color: var(--reg-primary); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }

@media print {
  #navbar, footer, .footer-alt, #back-to-top, .reg-confirm-actions, .reg-links { display: none !important; }
  .reg-page { padding: 0 !important; background: #fff !important; }
  .reg-card { box-shadow: none !important; }
  .reg-result-icon { animation: none; box-shadow: none; }
}

/* ---------- profile update (profile.php, profile_confirm.php) ---------- */
.reg-note {
  display: flex; gap: 12px; align-items: flex-start; background: #f4f9f8; border: 1px solid var(--reg-line);
  border-radius: 14px; padding: 14px 16px; font-size: 14px; color: var(--reg-muted); margin-bottom: 20px;
}
.reg-note > i { color: var(--reg-primary); font-size: 22px; line-height: 1; }
.reg-note strong { color: var(--reg-ink); }
.reg-rows dd .was { display: block; font-weight: 400; font-size: 12px; color: var(--reg-muted); }
.reg-badge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; margin-left: 6px; vertical-align: 2px; }
.reg-badge.new { background: #fdf4e3; color: #8a5a00; }
.reg-rows .same dd { color: var(--reg-muted); font-weight: 500; }
.reg-rows .changed { background: linear-gradient(90deg, rgba(201, 162, 74, .08), transparent); }
.reg-page .flatpickr-input[readonly] { background-color: #fbfdfc; cursor: pointer; }

/* ---------- dependants update (family.php) ---------- */
.reg-dep { border: 1.5px solid var(--reg-line); border-radius: 16px; padding: 16px; background: #fff; transition: opacity .15s, border-color .15s, background .15s; }
.reg-dep + .reg-dep { margin-top: 14px; }
.reg-dep-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.reg-dep-head .num {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--reg-primary-soft); color: var(--reg-primary); font-weight: 700; font-size: 13px;
}
.reg-dep-head .title { flex: 1; font-weight: 700; font-size: 14px; }
.reg-dep-head .tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: #f1f6f5; color: var(--reg-muted); }
.reg-dep-head .tag.new { background: #fdf4e3; color: #8a5a00; }
.reg-dep .btn-remove, .reg-dep .btn-undo {
  border: 0; background: transparent; font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 4px;
}
.reg-dep .btn-remove { color: #b3413b; }
.reg-dep .btn-remove:hover { background: #fdeceb; }
.reg-dep .btn-undo { color: var(--reg-primary); display: none; }
.reg-dep .removed-note { display: none; font-size: 13px; color: #9b2c2c; }
.reg-dep.is-removed { background: #fbf4f4; border-style: dashed; border-color: #e7b9b6; }
.reg-dep.is-removed .fields { display: none; }
.reg-dep.is-removed .removed-note, .reg-dep.is-removed .btn-undo { display: inline-flex; }
.reg-dep.is-removed .btn-remove { display: none; }
.reg-dep.is-removed .title { text-decoration: line-through; color: var(--reg-muted); }
.reg-add {
  width: 100%; margin-top: 14px; border: 1.5px dashed rgba(0, 119, 109, .45); background: #f7fbfa; color: var(--reg-primary);
  border-radius: 14px; padding: 14px; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, border-color .15s;
}
.reg-add:hover { background: var(--reg-primary-soft); border-color: var(--reg-primary); }
.reg-count { font-size: 13px; color: var(--reg-muted); }

/* ---------- dependants confirmation (family_confirm.php) ---------- */
.reg-summary-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.reg-summary-chips span { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 4px; }
.reg-summary-chips .keep { background: #f1f6f5; color: var(--reg-muted); }
.reg-summary-chips .upd { background: var(--reg-primary-soft); color: var(--reg-primary); }
.reg-summary-chips .new { background: #fdf4e3; color: #8a5a00; }
.reg-summary-chips .del { background: #fdeceb; color: #9b2c2c; }
.reg-deplist { list-style: none; margin: 0 0 20px; padding: 0; }
.reg-deplist li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--reg-line); }
.reg-deplist li:last-child { border-bottom: 0; }
.reg-deplist .avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: #f1f6f5; color: var(--reg-primary); font-weight: 700; font-size: 13px;
}
.reg-deplist .who { flex: 1; min-width: 0; }
.reg-deplist .name { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.reg-deplist .meta { font-size: 12px; color: var(--reg-muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.reg-deplist .tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.reg-deplist .tag.keep { background: #f1f6f5; color: var(--reg-muted); }
.reg-deplist .tag.upd { background: var(--reg-primary-soft); color: var(--reg-primary); }
.reg-deplist .tag.new { background: #fdf4e3; color: #8a5a00; }
.reg-deplist .tag.del { background: #fdeceb; color: #9b2c2c; }
.reg-deplist li.is-del .name { text-decoration: line-through; color: var(--reg-muted); }
.reg-deplist li.is-del .avatar { background: #fbf4f4; color: #b3413b; }
.reg-deplist li.is-new .avatar { background: #fdf4e3; color: #8a5a00; }
@media (max-width: 575.98px) {
  .reg-receipt-head .ref { text-align: left; width: 100%; }
  .reg-receipt-head .ref strong { display: inline; margin-left: 4px; }
}

/* ---------- donation (derma.php) ---------- */
.reg-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-bottom: 14px; }
.reg-amounts button {
  border: 1.5px solid var(--reg-line); background: #fbfdfc; border-radius: 12px; padding: 12px 8px;
  font-weight: 700; font-size: 16px; color: var(--reg-ink); transition: border-color .15s, background .15s, color .15s;
}
.reg-amounts button small { display: block; font-size: 11px; font-weight: 600; color: var(--reg-muted); }
.reg-amounts button:hover { border-color: rgba(0, 119, 109, .5); }
.reg-amounts button.active { border-color: var(--reg-primary); background: var(--reg-primary-soft); color: var(--reg-primary); }
.reg-money { position: relative; }
.reg-money > span {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--reg-muted); z-index: 5; pointer-events: none;
}
.reg-page .reg-money .form-control {
  height: 60px; padding-left: 52px; font-size: 22px; font-weight: 700; border: 1.5px solid var(--reg-line); border-radius: 12px; background-color: #fbfdfc;
}
.reg-fund { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; background: #fff; border: 1px solid #efe3c4; color: #8a5a00; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.reg-fund i { color: var(--reg-gold); }

/* ---------- home page (index.php) ---------- */
.home-page { --reg-primary: #00776d; --reg-primary-dark: #00635a; --reg-primary-soft: #e6f3f1; --reg-gold: #c9a24a;
  --reg-ink: #1f2d2b; --reg-muted: #6b7b78; --reg-line: #e3ebe9; --reg-radius: 18px; color: var(--reg-ink); }
.home-section { padding: 72px 0; }
.home-section.alt { background: linear-gradient(180deg, #f3f8f7 0%, #ffffff 100%); }
.home-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.home-head .reg-eyebrow { margin-bottom: 12px; }
.home-head h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; margin-bottom: 10px; color: var(--reg-ink); }
.home-head p { color: var(--reg-muted); font-size: 16px; margin: 0; }
.home-page .reg-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; background: var(--reg-primary-soft); color: var(--reg-primary);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}

/* quick actions overlapping the banner */
.home-actions { position: relative; z-index: 3; margin-top: -34px; }
.home-action {
  display: flex; gap: 14px; align-items: center; height: 100%; background: #fff; border: 1px solid var(--reg-line);
  border-radius: var(--reg-radius); padding: 20px; color: var(--reg-ink); text-decoration: none;
  box-shadow: 0 18px 40px -24px rgba(16, 60, 55, .45); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.home-action:hover { transform: translateY(-3px); border-color: rgba(0, 119, 109, .4); box-shadow: 0 24px 44px -24px rgba(16, 60, 55, .6); color: var(--reg-ink); }
.home-action .icon { width: 52px; height: 52px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--reg-primary-soft); color: var(--reg-primary); }
.home-action.primary .icon { background: var(--reg-primary); color: #fff; }
.home-action .text { flex: 1; min-width: 0; }
.home-action strong { display: block; font-size: 16px; }
.home-action span.sub { display: block; font-size: 13px; color: var(--reg-muted); margin-top: 2px; }
.home-action .go { color: var(--reg-primary); font-size: 22px; }

/* benefit cards */
.home-benefit { height: 100%; background: #fff; border: 1px solid var(--reg-line); border-radius: var(--reg-radius); padding: 26px 24px; transition: transform .15s, box-shadow .15s; }
.home-benefit:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(16, 60, 55, .5); }
.home-benefit .icon { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--reg-primary-soft); color: var(--reg-primary); margin-bottom: 16px; }
.home-benefit h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.home-benefit p { color: var(--reg-muted); font-size: 14px; margin: 0; line-height: 1.65; }

/* kariah */
.home-kariah { margin-top: 56px; background: #fff; border: 1px solid var(--reg-line); border-radius: 24px; padding: 28px; }
.home-kariah img { width: 100%; border-radius: 16px; }
.home-kariah h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.home-kariah p { color: var(--reg-muted); }
.home-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.home-chips span { display: inline-flex; align-items: center; gap: 6px; background: #f4f9f8; border: 1px solid var(--reg-line); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; }
.home-chips i { color: var(--reg-primary); }

/* fee band */
.home-fee {
  position: relative; overflow: hidden; border-radius: 26px; padding: 40px 36px; color: #fff;
  background: linear-gradient(135deg, #0b5f57 0%, var(--reg-primary) 55%, #0b8f82 100%);
  box-shadow: 0 30px 60px -34px rgba(0, 99, 90, .95);
}
.home-fee::before, .home-fee::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.home-fee::before { width: 280px; height: 280px; right: -80px; top: -120px; }
.home-fee::after { width: 180px; height: 180px; left: -60px; bottom: -90px; }
.home-fee > * { position: relative; z-index: 1; }
.home-fee small { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; opacity: .85; }
.home-fee h2 { color: #fff; font-weight: 700; font-size: clamp(24px, 3.2vw, 32px); margin: 6px 0 8px; }
.home-fee p { opacity: .9; margin: 0; }
.home-fee .prices { display: flex; gap: 14px; flex-wrap: wrap; }
.home-fee .price { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; padding: 14px 20px; min-width: 140px; flex: 0 1 180px; }
@media (max-width: 575.98px) { .home-fee .price { flex: 1 1 0; min-width: 0; padding: 12px 14px; } .home-fee .price strong { font-size: 24px; } }
.home-fee .price span { display: block; font-size: 12px; opacity: .85; }
.home-fee .price strong { font-size: 28px; font-weight: 700; }
.home-fee .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.home-fee .btn-light-solid { background: #fff; color: var(--reg-primary); font-weight: 700; border-radius: 12px; padding: 12px 22px; border: 0; }
.home-fee .btn-light-solid:hover { background: #f1f6f5; color: var(--reg-primary-dark); }
.home-fee .btn-light-line { border: 1.5px solid rgba(255, 255, 255, .7); color: #fff; font-weight: 600; border-radius: 12px; padding: 11px 22px; }
.home-fee .btn-light-line:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* services */
.home-service { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--reg-line); border-radius: var(--reg-radius); padding: 26px 24px; }
.home-service.featured { border: 2px solid var(--reg-primary); box-shadow: 0 24px 50px -30px rgba(0, 99, 90, .7); }
.home-service .badge-top { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--reg-primary); color: #fff; border-radius: 999px; padding: 3px 10px; margin-bottom: 12px; }
.home-service h3 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.home-service h3 i { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--reg-primary-soft); color: var(--reg-primary); font-size: 22px; }
.home-service ul { list-style: none; padding: 0; margin: 0 0 16px; flex: 1; }
.home-service li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 5px 0; }
.home-service li i { color: var(--reg-primary); font-size: 18px; line-height: 1.2; }
.home-service .note { font-size: 12px; color: #8a5a00; background: #fdf4e3; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; display: flex; gap: 6px; }
.home-service .btn { margin-top: 8px; border-radius: 12px; font-weight: 600; padding: 12px; }
.home-service .btn-fill { background: var(--reg-primary); color: #fff; border: 0; }
.home-service .btn-fill:hover { background: var(--reg-primary-dark); color: #fff; }
.home-service .btn-line { border: 1.5px solid var(--reg-primary); color: var(--reg-primary); background: #fff; }
.home-service .btn-line:hover { background: var(--reg-primary); color: #fff; }

/* contacts */
.home-contact { max-width: 240px; margin: 0 auto; height: 100%; background: #fff; border: 1px solid var(--reg-line); border-radius: var(--reg-radius); overflow: hidden; text-align: center; transition: transform .15s, box-shadow .15s; }
.home-contact:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(16, 60, 55, .5); }
.home-contact img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #f1f6f5; }
.home-contact .body { padding: 14px 12px 16px; }
.home-contact h3 { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.3; }
.home-contact .role { font-size: 13px; color: var(--reg-muted); margin-top: 2px; }
.home-contact .phone { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--reg-primary); background: var(--reg-primary-soft); border-radius: 999px; padding: 5px 12px; text-decoration: none; }

/* about */
.home-card { background: #fff; border: 1px solid var(--reg-line); border-radius: var(--reg-radius); padding: 26px; box-shadow: 0 18px 40px -30px rgba(16, 60, 55, .45); }
.home-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.home-card .muted { color: var(--reg-muted); font-size: 14px; }
.home-card .btn-dl { border-radius: 12px; font-weight: 600; background: var(--reg-primary); color: #fff; border: 0; padding: 11px 18px; }
.home-card .btn-dl:hover { background: var(--reg-primary-dark); color: #fff; }
.home-map { border-radius: 14px; overflow: hidden; line-height: 0; }
.home-map iframe { width: 100%; height: 340px; border: 0; }
.home-address { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--reg-muted); margin-top: 14px; }
.home-address i { color: var(--reg-primary); font-size: 20px; line-height: 1.1; }

@media (max-width: 767.98px) {
  .home-section { padding: 52px 0; }
  .home-actions { margin-top: -22px; }
  .home-fee { padding: 30px 22px; }
  .home-kariah { padding: 20px; }
}

/* ---------- membership information (maklumat.php) ---------- */
.reg-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.reg-fact { background: #fff; border: 1px solid var(--reg-line); border-radius: 16px; padding: 16px; text-align: center; }
.reg-fact i { font-size: 24px; color: var(--reg-primary); }
.reg-fact strong { display: block; font-size: 20px; margin-top: 4px; color: var(--reg-ink); }
.reg-fact span { display: block; font-size: 12px; color: var(--reg-muted); }
.reg-doc { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.reg-doc .file { width: 64px; height: 76px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: #fdeceb; color: #c0392b; font-size: 38px; }
.reg-doc .meta { flex: 1; min-width: 180px; }
.reg-doc .meta strong { display: block; font-size: 16px; }
.reg-doc .meta span { font-size: 13px; color: var(--reg-muted); }
.reg-doc .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.reg-doc .btns .btn { border-radius: 12px; font-weight: 600; }
@media (max-width: 767.98px) { .reg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reg-summary .reg-rows dt { width: 72px; }
.reg-summary .reg-rows .row-item { gap: 10px; padding: 8px 0; font-size: 13px; }

/* ---------- terma & syarat (termasyarat.php) ---------- */
.terms-switch { display: flex; gap: 6px; background: #f1f6f5; border-radius: 14px; padding: 5px; margin: 0 auto 22px; max-width: 520px; }
.terms-switch a { flex: 1; text-align: center; border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: 14px; color: var(--reg-muted); text-decoration: none; transition: background .15s, color .15s; }
.terms-switch a:hover { color: var(--reg-primary); }
.terms-switch a.active { background: #fff; color: var(--reg-primary); box-shadow: 0 4px 12px -6px rgba(16, 60, 55, .35); }
.terms-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.terms-meta .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; background: var(--reg-primary-soft); color: var(--reg-primary); border-radius: 999px; padding: 4px 12px; }
.terms-meta .chip.plain { background: #f1f6f5; color: var(--reg-muted); }
.terms-meta .print { margin-left: auto; border: 0; background: transparent; color: var(--reg-muted); font-size: 13px; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.terms-meta .print:hover { color: var(--reg-primary); }
.terms-body { font-size: 15px; line-height: 1.75; color: var(--reg-ink); overflow-wrap: anywhere; }
.terms-body h1, .terms-body h2, .terms-body h3, .terms-body h4 { color: var(--reg-ink); font-weight: 700; }
.terms-body h2 { font-size: 18px; margin: 28px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--reg-line); }
.terms-body h3 { font-size: 16px; margin: 20px 0 8px; }
.terms-body > :first-child { margin-top: 0; }
.terms-body p { margin: 0 0 12px; }
.terms-body ul, .terms-body ol { margin: 0 0 14px; padding-left: 22px; }
.terms-body li { margin-bottom: 6px; }
.terms-body li::marker { color: var(--reg-primary); }
.terms-body a { color: var(--reg-primary); text-decoration: underline; }
.terms-body blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 4px solid var(--reg-gold); background: #fbf6ea; border-radius: 0 10px 10px 0; }
.terms-body img { max-width: 100%; height: auto; border-radius: 10px; }
.terms-body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; display: block; overflow-x: auto; }
.terms-body th, .terms-body td { border: 1px solid var(--reg-line); padding: 8px 12px; text-align: left; vertical-align: top; }
.terms-body th { background: #f4f9f8; }
@media print {
  .terms-switch, .terms-meta .print, .reg-hero p { display: none !important; }
  .terms-body { font-size: 12pt; }
}

/* membership rules as text (maklumat.php) */
.rules-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rules-grid li { display: flex; gap: 12px; align-items: flex-start; background: #f7faf9; border: 1px solid var(--reg-line); border-radius: 14px; padding: 14px; }
.rules-grid .n { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--reg-primary); color: #fff; font-weight: 700; font-size: 13px; }
.rules-grid h3 { font-size: 15px; font-weight: 700; margin: 3px 0 4px; color: var(--reg-ink); }
.rules-grid p { font-size: 14px; line-height: 1.6; color: var(--reg-muted); margin: 0; }
.rules-docs { margin-top: 18px; background: #fbf6ea; border: 1px solid #efe3c4; border-radius: 14px; padding: 16px 18px; font-size: 14px; }
.rules-docs h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
.rules-docs h3 i { color: var(--reg-gold); font-size: 20px; }
.rules-docs ul { margin: 0 0 10px; padding-left: 20px; }
.rules-docs a { color: var(--reg-primary); text-decoration: underline; }
.reg-section-title p a { color: var(--reg-primary); text-decoration: underline; }
@media (max-width: 767.98px) { .rules-grid { grid-template-columns: 1fr; } }

/* new member welcome (thankyou.php after a registration) */
.reg-welcome {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--reg-primary) 0%, #0b8f82 100%); color: #fff;
  border-radius: var(--reg-radius); padding: 26px 28px; box-shadow: 0 22px 44px -26px rgba(0, 99, 90, .9);
}
.reg-welcome::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 250px; height: 250px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.reg-welcome > * { position: relative; z-index: 1; }
.reg-welcome .avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .35); font-size: 22px; font-weight: 700; }
.reg-welcome .body { flex: 1; min-width: 170px; }
.reg-welcome small { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; opacity: .85; }
.reg-welcome .no { font-size: clamp(38px, 7vw, 54px); font-weight: 700; line-height: 1.05; letter-spacing: .03em; margin: 2px 0 4px; }
.reg-welcome .who { font-size: 14px; opacity: .92; overflow-wrap: anywhere; }
.reg-welcome .copy { border: 1.5px solid rgba(255, 255, 255, .7); background: transparent; color: #fff; font-weight: 600; font-size: 14px; border-radius: 12px; padding: 9px 16px; display: inline-flex; align-items: center; gap: 6px; transition: background .15s; }
.reg-welcome .copy:hover { background: rgba(255, 255, 255, .15); }
.reg-welcome-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--reg-muted); margin: 12px 4px 20px; }
.reg-welcome-hint i { color: var(--reg-gold); font-size: 18px; line-height: 1.1; }
.reg-fee-line { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; color: var(--reg-muted); border-bottom: 1px dashed var(--reg-line); }
.reg-fee-line span:last-child { font-weight: 600; color: var(--reg-ink); }
.reg-next-steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: st; }
.reg-next-steps li { counter-increment: st; position: relative; padding: 0 0 14px 40px; font-size: 14px; line-height: 1.55; color: var(--reg-muted); }
.reg-next-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--reg-primary-soft); color: var(--reg-primary); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.reg-next-steps strong { color: var(--reg-ink); }
.reg-next-steps a { color: var(--reg-primary); text-decoration: underline; }
@media (max-width: 575.98px) { .reg-welcome { padding: 22px 20px; } .reg-welcome .avatar { width: 52px; height: 52px; font-size: 18px; } }
@media print { .reg-welcome .copy { display: none !important; } .reg-welcome { box-shadow: none; } }

.reg-welcome .pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.reg-welcome .avatar .mdi { font-size: 30px; }

/* member page: status pill variant, year tiles, older years */
.reg-welcome .pill.warn { background: #fdf4e3; color: #8a5a00; border-color: #efe3c4; }
.reg-yeartiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 16px; }
.reg-yeartiles .yt { border: 1.5px solid var(--reg-line); border-radius: 14px; padding: 12px 12px 10px; background: #fbfdfc; text-align: left; }
.reg-yeartiles .y { display: block; font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--reg-ink); }
.reg-yeartiles .t { display: block; font-size: 12px; color: var(--reg-muted); margin-top: 4px; }
.reg-yeartiles .s { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.reg-yeartiles .ok { border-color: #bfe3d0; background: #f1faf5; } .reg-yeartiles .ok .s { background: #e7f6ee; color: #1d6b43; }
.reg-yeartiles .part { border-color: #efe3c4; background: #fdf9ee; } .reg-yeartiles .part .s { background: #fdf4e3; color: #8a5a00; }
.reg-yeartiles .none { border-style: dashed; border-color: #e8c3c0; background: #fdf6f5; } .reg-yeartiles .none .s { background: #fdeceb; color: #9b2c2c; } .reg-yeartiles .none .t { color: #9b2c2c; }
.reg-older { margin: -4px 0 16px; font-size: 13px; color: var(--reg-muted); }
.reg-older summary { cursor: pointer; font-weight: 600; }

/* bayaran.php: paid years inside the year grid, select-all links, and the pay bar on phones */
.reg-yeartools { display: flex; justify-content: flex-end; gap: 14px; margin: -4px 0 10px; }
.btn-link-sm { background: none; border: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--reg-primary); cursor: pointer; }
.btn-link-sm:hover { text-decoration: underline; }
.reg-yeartile.is-done { cursor: default; }
.reg-yeartile.is-done .box { background: #f1faf5; border-color: #bfe3d0; }
.reg-yeartile.is-done .box::after { display: none; }
.reg-yeartile.is-done .amt { color: #1d6b43; font-weight: 600; }
.reg-yeartile.is-done.is-part .box { background: #fdf9ee; border-color: #efe3c4; }
.reg-yeartile.is-done.is-part .amt { color: #8a5a00; }
.reg-yeartile.is-done:hover .box { border-color: #bfe3d0; }
.reg-yeartile.is-done.is-part:hover .box { border-color: #efe3c4; }
.reg-paybar { display: none; }
@media (max-width: 991.98px) {
    .reg-paybar {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff;
        border-top: 1px solid var(--reg-line); box-shadow: 0 -6px 20px rgba(16, 40, 36, .08);
    }
    .reg-paybar small { display: block; font-size: 11px; color: var(--reg-muted); line-height: 1.1; }
    .reg-paybar strong { font-size: 18px; color: var(--reg-ink); }
    .reg-paybar .btn-reg { white-space: nowrap; }
    body:has(.reg-paybar) #back-to-top { bottom: 84px; }
    body:has(.reg-paybar) footer, body:has(.reg-paybar) .footer-alt { margin-bottom: 0; }
    body:has(.reg-paybar) { padding-bottom: 72px; }
}