/* ===== NAPCON 2025 — Registration UI (Poppins, Static Header, Mobile-Safe) ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --nap-pink:   #FF2C7A;
  --nap-purple: #6A4BFF;
  --nap-text:   #1F1F1F;
  --nap-muted:  #70737a;
  --nap-sand:   #F5F2EE;
  --nap-white:  #FFFFFF;
  --nap-border: #E9E2D8;
  --nap-shadow: 0 12px 28px rgba(20,16,38,.12);
}

html, body{
  background: var(--nap-sand);
  color: var(--nap-text);
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessible hidden label utility */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* ===== HEADER (STATIC, FULL-WIDTH, NO CROPPING) ===== */
.fHeader,
.navbar-header{
  position: static !important;          /* not sticky */
  background: transparent !important;   /* no gradient bg */
  box-shadow:none !important;
  color: inherit;
  width: 100%;
}

/* Ensure nothing clips inside header on any device */
.fHeader, .navbar-header, .navbar-header .wrap, .navbar-header .wrap > .fRegion{
  overflow: visible !important;
}

.navbar-header .wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:.75rem 0;               /* gentle breathing room */
}

/* Region fills width; no max-width constraints */
.navbar-header .wrap > .fRegion{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Logo/image: scale fluidly — never cut, never overflow */
.fGalleryImage{ display:flex; align-items:center; justify-content:center; }
.fGalleryImage img{
  display:block;
  height:auto;                      /* natural proportion */
  max-height:120px;                 /* desktop comfort */
  max-width:100%;                   /* never overflow width */
  object-fit: contain;              /* safe containment */
}

/* Remove template spacer under header */
.head-padding{ display:none !important; }

/* ===== PAGE TITLE (Gradient Banner + Centered H1) ===== */
.fPageTitle{
  background: linear-gradient(90deg, var(--nap-pink) 0%, var(--nap-purple) 100%);
  padding:0; border:0;
}
.fPageTitle .container{
  padding:1rem 0;
  display:flex; justify-content:center; align-items:center;
}
#heading{
  margin:0 !important;
  color:#fff !important;
  text-align:center !important;
  font-weight:800;
  letter-spacing:.3px;
  text-shadow:0 1px 10px rgba(0,0,0,.25);
}

/* ===== MAIN CONTENT & CARD ===== */
#fContent .container{ padding-top:1rem; padding-bottom:2rem; }

.fForm{
  max-width:900px;
  margin:1.5rem auto 2rem;
  background:#fff;
  border:1px solid var(--nap-border);
  border-radius:18px;
  box-shadow:var(--nap-shadow);
  overflow:hidden;
}
.fForm::before{
  content:"";
  display:block;
  height:8px;
  background:linear-gradient(90deg, var(--nap-pink), var(--nap-purple));
}
.fForm fieldset{ padding:1.2rem; border:0; }
.fForm legend{ display:none; }

/* ===== USER GROUP (2 per row, radio hidden, label=button) ===== */
.user-register-group .f-table{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  width:100%;
}
.user-register-group .f-table-row{
  width:calc(50% - 7px);
}
.user-register-group .f-table-col{
  border:0; padding:0 !important;
}

/* hide native radios completely to prevent overlap */
.user-register-group input[type="radio"]{
  display:none !important;
  position:absolute !important;
  opacity:0 !important;
  width:1px !important; height:1px !important;
  pointer-events:none !important; margin:0 !important;
}

/* clickable card label */
.user-register-group label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:1rem;
  border:1.6px solid var(--nap-border);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  font-weight:600;
  color: var(--nap-text);
  transition:border-color .25s, box-shadow .25s, background .25s, transform .06s;
}
.user-register-group label:hover{
  border-color:var(--nap-pink);
  background:rgba(255,44,122,.08);
}
/* selected (CSS :has + JS fallback) */
.user-register-group label:has(input:checked),
.user-register-group label.js-selected{
  border-color:var(--nap-purple);
  background:rgba(106,75,255,.12);
  font-weight:700;
  transform:translateY(-1px);
}

/* ===== FORM FIELDS (2 per row, labels unbold — JS uses placeholders) ===== */
.f-fieldset-body{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px 18px;
}
.form-item{ display:flex; flex-direction:column; gap:.4rem; margin:0; }
.form-item label{ font-weight:400; color:var(--nap-muted); }

.form-item input{
  width:100%;
  padding:1rem;
  border:1px solid var(--nap-border);
  border-radius:14px;
  background:#fff;
  color:var(--nap-text);
  font-weight:500;
  transition:border-color .25s, box-shadow .25s, background-color .25s;
}
.form-item input::placeholder{ color:#9CA3AF; font-weight:500; }
.form-item input:focus{
  border-color:var(--nap-pink);
  box-shadow:0 0 0 3px rgba(255,44,122,.25);
}

/* ===== BUTTON ===== */
.form-item-type-buttons{ padding:1rem 1.25rem 1.25rem; border-top:1px solid var(--nap-border); background:linear-gradient(180deg,#fff 0%, var(--nap-sand) 100%); }
#btn_submit{
  border:0; border-radius:999px;
  background:linear-gradient(90deg,var(--nap-pink),var(--nap-purple));
  color:#fff; font-weight:800; letter-spacing:.3px;
  padding:1rem 1.8rem; cursor:pointer;
  transition: transform .06s, filter .25s, box-shadow .25s;
  box-shadow:0 10px 25px rgba(106,75,255,.32);
}
#btn_submit:hover{ filter:brightness(1.07); box-shadow:0 12px 32px rgba(106,75,255,.42); }
#btn_submit:active{ transform:translateY(1px); }

/* kill back-to-top arrow if present */
#nav-up{ display:none !important; }

/* ===== HIDE PASSWORD FIELDS COMPLETELY (labels + inputs + wrappers) ===== */
#form-item-password,
#form-item-password_repeat,
#form-item-password label,
#form-item-password_repeat label,
#form-item-password input,
#form-item-password_repeat input,
label[for="password"],
label[for="password_repeat"],
input[name="password"],
input[name="password_repeat"]{
  display:none !important; visibility:hidden !important; height:0 !important;
  padding:0 !important; margin:0 !important; border:0 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px){
  /* header image: allow more vertical room and fluid width */
  .fGalleryImage img{
    max-height:none;              /* remove fixed cap on small screens */
    max-width:92vw;               /* fit nicely within viewport */
  }
  .user-register-group .f-table-row{ width:100%; } /* 1 per row on tablet/mobile */
}

@media (max-width: 576px){
  .fForm{ margin:.75rem .75rem 2rem; }
  .fForm fieldset{ padding:1rem 1rem 0; }
  .f-fieldset-body{ grid-template-columns:1fr; gap:14px; }
}