/* Language switch dropdown */
.lang-switch {
  display: flex;
  align-items: center;
}
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 32px 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lang-select:hover {
  border-color: var(--primary);
}
.lang-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.other-input{margin-top:4px; margin-bottom:8px; width:100%; font-size:14px; border-radius:8px; border:1px solid var(--border); padding:10px 12px; background:#f8fafc; color:var(--text)}
.qty-label{display:block; color:#64748b; font-size:12px; margin-bottom:2px; margin-left:2px}
/* Digital ID – Membership Registration styles */

:root{
  --bg: #f5f7fb;
  --card-bg: #fff;
  --text: #0f172a; /* slate-900 */
  --muted: #64748b; /* slate-500 */
  --border: #e2e8f0; /* slate-200 */
  --primary: #2563eb; /* blue-600 */
  --primary-600: #1d4ed8; /* blue-700 */
  --ring: rgba(37,99,235,0.35);
  --shadow: 0 10px 20px rgba(2, 6, 23, 0.04), 0 2px 6px rgba(2, 6, 23, 0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
}

/* Navbar */
.navbar{
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffffcc;
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--border);
}
.container{
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow{ max-width: 760px; }
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:18px;
}
.brand-logo{height:28px; width:auto; display:block}
.brand-text{letter-spacing:.2px}

/* Header Right Section */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hamburger Menu */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 20;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.nav-links{display:flex; gap:18px; align-items:center}
.nav-link{
  color: #475569; /* slate-600 */
  text-decoration:none;
  font-weight:500;
  font-size:13px;
}
.nav-link.active,.nav-link:hover{color: var(--text)}

/* Page */
.page{padding: 32px 0 56px}

/* Card */
.card{
  margin: 24px auto 0;
  background: var(--card-bg);
  border: 1px dashed #e5e7eb; /* matches screenshot */
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 22px;
  max-width: 640px; /* narrower form */
}
.card-title{
  text-align:center;
  margin: 4px 0 14px;
  font-size: 20px;
  font-weight: 800;
}

.card-logo{
  display:block;
  margin: 0 auto 8px;
  height: 56px;
  width: auto;
}

.intro{
  margin: 0 0 14px;
  color: #475569; /* slate-600 */
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.form{display:flex; flex-direction:column; gap:12px}

/* Field with leading icon */
.field{
  display:grid;
  grid-template-columns: 34px 1fr; /* narrower icon column */
  align-items:center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow:hidden;
  background:#f8fafc; /* light */
}

/* Show a red '*' inside the field when the contained input/select is required.
   Uses the CSS :has selector which is supported in modern browsers. */
.field{ position: relative }
.field:has(input[required])::after,
.field:has(select[required])::after{
  content: '*';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #e11d48; /* red */
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}
.field.family-row:has(input[required])::after{
  content: none; /* counters don't need the decorative star */
}
.field:has(input[required]) .input,
.field:has(select[required]) .input{
  padding-right: 40px; /* leave space for the star */
}
.icon{display:flex; align-items:center; justify-content:center; color:#94a3b8}
.icon svg{width:16px; height:16px}
.input{
  border:0; outline:0; background:transparent;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
}
.input::placeholder{color:#94a3b8}
.field:focus-within{background:#fff}

.field.no-icon{display:block}
.field.no-focus{box-shadow:none !important; background: transparent !important; border: none !important; padding: 0 !important;}
.field.no-focus:focus-within{box-shadow:none !important;}
.field.no-focus .choice input:focus { outline: none; box-shadow: none; }
.field.no-focus .choice-row{padding:6px 6px;}
.field.no-icon .select{width:100%; border:0; outline:0; background:transparent}
.select{appearance:none; -webkit-appearance:none; -moz-appearance:none}

/* family row (adults/children) */
.family-row .input{padding:10px 12px}
.qty-label{font-size:12px; color:#475569; margin-bottom:6px; display:block}
/* Counter controls for adults/children */
.counter-controls{display:flex; align-items:center; gap:8px}
.btn-counter{background:#fff; border:1px solid var(--border); padding:8px 10px; border-radius:6px; cursor:pointer; font-weight:700}
.btn-counter:active{transform:translateY(1px)}
.counter-value{text-align:center; width:84px}

/* Remove default focus glow for mouse users, but keep accessible focus for keyboard users */
.btn-counter:focus{outline:none; box-shadow:none}
.counter-value:focus{outline:none; box-shadow:none}
.btn-counter:focus-visible, .counter-value:focus-visible{outline:2px solid rgba(37,99,235,0.18); outline-offset:2px}

/* Checkbox grid */
.check-grid{display:flex; flex-wrap:wrap; gap:10px 16px}
.check{display:inline-flex; align-items:center; gap:8px; color:#334155; font-size:14px}
.check input{accent-color: var(--primary)}

/* Label */
.label{color: var(--muted); font-size: 14px;font-weight: bold; margin: 6px 2px -6px}
.hint{margin:4px 2px 2px; color:#94a3b8; font-size:12px}
.star{color:#e11d48; font-size:15px; vertical-align:middle; margin-left:2px}

/* Ensure required labels visually consistent */
.label.required{display:block}

/* Choice row (radios) */
.choice-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:4px}
.choice{display:inline-flex; align-items:center; gap:8px; color:#334155; font-size:14px}
.choice input{accent-color: var(--primary)}
.fee{color:var(--muted); font-weight:700; margin-left:6px}
.fee-summary{margin-top:8px; color:#0f172a; font-weight:700}

/* Dropzone */
.dropzone{
  display:block;
  border: 2px dashed #e5e7eb;
  border-radius: 10px;
  background:#f8fafc;
  cursor:pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.dz-inner{padding: 22px; text-align:center}
.dz-icon{color:#9ca3af; margin-bottom:8px}
.dz-title{margin:0; font-size:14px; color:#111827}
.dz-title .link{color: var(--primary); text-decoration: underline; text-underline-offset:2px}
.dz-hint{margin:6px 0 0; color:#94a3b8; font-size:12px}
.dropzone:hover{border-color:#d1d5db; background:#fff}
.dropzone:focus-within{outline:none; box-shadow: 0 0 0 3px var(--ring)}

/* Payment modal */
.modal{display:none; position:fixed; inset:0; background:rgba(2,6,23,0.45); align-items:center; justify-content:center; padding:20px; z-index:60}
.modal.open{display:flex}
.modal-dialog{background:var(--card-bg); border-radius:4px; padding:18px; max-width:820px; width:100%; box-shadow:var(--shadow); border:1px solid var(--border); position:relative}
.modal-close{background:#f1f5f9; border:1px solid var(--border); width:34px; height:34px; border-radius:6px; font-size:18px; position:absolute; right:12px; top:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.modal-close:hover{background:#e2e8f0}
.qr-grid{display:flex; gap:18px; align-items:center}
.qr-image{width:180px; height:auto; border-radius:8px; border:1px solid #e6edf3; background:#fff}
.payment-dropzone{border-style:dashed; margin-top:8px}
.payment-dropzone .dz-inner{padding:12px}
.payment-dropzone .dz-title{font-weight:700}
.payment-dropzone .dz-hint{font-size:12px}
.modal .hint{margin-top:8px}

/* Button */
.btn{display:inline-flex; align-items:center; justify-content:center; border:0; cursor:pointer; border-radius:8px; padding:11px 14px; font-weight:700}
.btn-primary{background: var(--primary); color:#fff; width:100%; margin-top:8px}
.btn-primary:hover{background: var(--primary-600)}
.btn-outline{background:#fff; color:var(--primary); border:1px solid var(--primary); width:100%; margin-top:8px; transition:background .2s ease, color .2s ease}
.btn-outline:hover{background:rgba(37,99,235,0.08)}

/* Utilities */
@media (max-width: 920px){
  .container{padding: 0 20px}
  .container-narrow{max-width: 640px}
}
@media (max-width: 768px){
  .nav-inner{position: relative; padding: 8px 0}
  .brand{flex: 1}
  
  /* Header right section on mobile */
  .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  /* Show hamburger menu on mobile */
  .hamburger{display: flex}
  
  /* Keep language switcher visible on desktop side of header */
  .lang-switch{
    display: flex;
  }
  
  /* Mobile navigation menu */
  .nav-links{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }
  
  .nav-links.active{
    max-height: 400px;
    opacity: 1;
    padding: 8px 0;
  }
  
  .nav-link{
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    border-bottom: 1px solid #f3f4f6;
  }
  
  .nav-link:last-child{
    border-bottom: none;
  }
  
  .brand-text{font-size:16px}
  .lang-select{font-size: 12px; padding: 5px 28px 5px 8px; background-size: 10px; background-position: right 6px center}
  .container{padding: 0 16px}
  .card{margin: 0px; padding: 18px; max-width: 560px}
  .dz-inner{padding: 18px}
  .card-logo{height: 46px}
  /* stack family adults/children on narrow screens */
  .family-row .family-inline{flex-direction:column}
  .family-row .family-inline > div{width:100% !important}
}

/* Extra tiny */
@media (max-width: 420px){
  .field{grid-template-columns: 34px 1fr}
  .input{padding: 11px 11px}
  .card-title{font-size: 18px}
  /* .nav-inner{min-height: auto} */
  .brand-text{font-size: 14px}
  .header-right{gap: 6px}
  .nav-link{font-size: 13px; padding: 10px 20px}
  .lang-select{font-size: 11px; padding: 4px 22px 4px 6px; background-size: 9px; background-position: right 5px center}
  .hamburger{padding: 6px}
  .hamburger span{width: 20px; height: 2.5px}
  .container{padding: 0 12px}
}

.validate-card{display:flex; flex-direction:column; gap:18px}
.validate-form{display:flex; flex-direction:column; gap:18px}
.validate-form .hint{margin-top:6px; font-size:12px; color:#64748b}
.validate-separator{display:flex; align-items:center; justify-content:center; gap:10px; color:#94a3b8; font-weight:600; text-transform:uppercase; letter-spacing:1px; font-size:11px}
.validate-separator::before,
.validate-separator::after{content:""; flex:1; height:1px; background:var(--border)}
.qr-upload{display:flex; flex-direction:column; gap:8px; align-items:center}
.qr-upload .hint{text-align:center; font-size:12px; color:#64748b}
.qr-upload .btn-outline{max-width:240px}
.error-message{background:rgba(248,113,113,0.12); color:#b91c1c; padding:10px 12px; border-radius:8px; font-size:13px}
.validate-actions{display:flex; flex-direction:column; gap:8px}
.validate-result{display:none; flex-direction:column; align-items:center; gap:18px; text-align:center; margin-top:12px}
.validate-result.show{display:flex; animation:fadeUp .4s ease forwards}
.validate-success{display:flex; flex-direction:column; align-items:center; gap:10px}
.validate-success h2{margin:0}
.validate-success p{margin:4px 0 0; color:#0f172a; font-size:14px}
.validate-result.show .success-badge{animation:pop .5s ease forwards}
.success-badge{width:72px; height:72px; border-radius:50%; background:rgba(34,197,94,0.18); display:flex; align-items:center; justify-content:center; color:#047857; transform:scale(.7); opacity:0}
.success-badge svg{width:38px; height:38px}
.validate-result .btn-outline{max-width:240px}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:translateY(0)}
}

@keyframes pop{
  0%{transform:scale(.6); opacity:0}
  60%{transform:scale(1.08); opacity:1}
  100%{transform:scale(1); opacity:1}
}

/* Footer */
.site-footer{border-top:1px solid var(--border); background:#fff; padding:12px 0; position:fixed; left:0; right:0; bottom:0; z-index:20}
.site-footer p{margin:0; color:#64748b; text-align:center; font-size:13px}

/* ensure main content doesn't get hidden under the fixed footer */
main.page{padding-bottom:72px}
.site-footer a{color: var(--primary); text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* In-page ID Card preview (centered) */
.id-card-area{display:none; max-width:420px; margin:28px auto; text-align:center}
.id-card-wrapper{background:linear-gradient(180deg,#2563eb 0%, #1e40af 100%); color:#fff; border-radius:14px; padding:22px; box-shadow:0 12px 30px rgba(16,24,40,0.12); position:relative}
.id-card-hero{display:flex; flex-direction:column; align-items:center; gap:10px}
.id-card-hero .photo{width:96px; height:96px; border-radius:50%; object-fit:cover; border:6px solid rgba(255,255,255,0.12); background:#fff}
.id-card-title{font-size:18px; font-weight:800; margin-top:6px}
.id-card-id{font-size:12px; opacity:0.9}
.id-card-meta{margin-top:12px; text-align:left; color: rgba(255,255,255,0.95); font-size:13px}
.id-card-meta .row{display:flex; justify-content:space-between; padding:6px 0}
.id-card-qr{width:88px; height:88px; margin:12px auto; background:#fff; border-radius:8px; display:block}
.id-card-actions{display:flex; gap:8px; justify-content:center; margin-top:14px}
.btn-png{background:#1e40af; color:#fff; padding:10px 14px; border-radius:8px; font-weight:700}
.btn-pdf{background:#ef4444; color:#fff; padding:10px 14px; border-radius:8px; font-weight:700}
.btn-print{background:#374151; color:#fff; padding:10px 14px; border-radius:8px; font-weight:700}
.btn-new{background:#e6eefc; color:#0f172a; padding:10px 14px; border-radius:8px; font-weight:700}

@media (max-width:640px){
  .id-card-wrapper{padding:16px}
  .id-card-meta{font-size:12px}
  .id-card-title{font-size:16px}
}