/* JPU Registration Form — v1.0.16 */
.jpu-reg-wrap { max-width: 880px; margin: 0 auto; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:#1f2937; }
.jpu-reg-title { font-size: 1.6rem; margin: 0 0 18px; color:#0f766e; text-align:center; font-weight:700; }
.jpu-reg-form { background:#fff; }
.jpu-reg-section { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:18px 20px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.jpu-reg-section h3 { margin:0 0 12px; font-size:1.05rem; color:#0f766e; display:flex; align-items:center; gap:8px; }
.jpu-reg-section h3 small { color:#9ca3af; font-weight:400; font-size:0.8rem; margin-left:6px; }
.jpu-reg-field { display:block; margin-bottom:12px; }
.jpu-reg-field > span { display:block; font-size:0.85rem; font-weight:600; margin-bottom:4px; color:#374151; }
.jpu-reg-field input, .jpu-reg-field textarea, .jpu-reg-field select {
	width:100%; padding:9px 12px; border:1px solid #d1d5db; border-radius:6px; font-size:0.95rem; font-family:inherit;
	background:#fff; transition:border .15s, box-shadow .15s; box-sizing:border-box;
}
.jpu-reg-field input:focus, .jpu-reg-field textarea:focus, .jpu-reg-field select:focus {
	outline:none; border-color:#0f766e; box-shadow:0 0 0 3px rgba(15,118,110,0.15);
}
.jpu-reg-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:600px) { .jpu-reg-row { grid-template-columns:1fr; } }
.req { color:#dc2626; }

.jpu-reg-btn-add { background:#0f766e; color:#fff; border:0; padding:8px 16px; border-radius:6px; cursor:pointer; font-size:0.85rem; font-weight:600; }
.jpu-reg-btn-add:hover { background:#115e59; }

.jpu-reg-pkg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:10px; }
.jpu-reg-pkg-card { display:block; cursor:pointer; }
.jpu-reg-pkg-card input { position:absolute; opacity:0; pointer-events:none; }
.jpu-reg-pkg-inner { border:2px solid #e5e7eb; border-radius:8px; padding:12px; background:#fff; transition:all .15s; height:100%; }
.jpu-reg-pkg-card:hover .jpu-reg-pkg-inner { border-color:#0f766e; }
.jpu-reg-pkg-card input:checked + .jpu-reg-pkg-inner { border-color:#0f766e; background:#ecfdf5; }
.jpu-reg-pkg-name { font-weight:700; color:#1f2937; margin-bottom:6px; }
.jpu-reg-pkg-meta { display:flex; flex-wrap:wrap; gap:8px; font-size:0.78rem; color:#6b7280; margin-bottom:6px; }
.jpu-reg-pkg-meta span i { color:#0f766e; margin-right:3px; }
.jpu-reg-pkg-price { font-weight:700; color:#0f766e; font-size:0.95rem; }

.jpu-reg-rooms { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:10px; }
.jpu-reg-room { display:flex; align-items:center; gap:10px; border:2px solid #e5e7eb; border-radius:8px; padding:10px 12px; cursor:pointer; transition:all .15s; }
.jpu-reg-room:hover { border-color:#0f766e; }
.jpu-reg-room input { margin:0; flex-shrink:0; }
.jpu-reg-room input:checked ~ div, .jpu-reg-room:has(input:checked) { border-color:#0f766e; background:#ecfdf5; }
.jpu-reg-room strong { display:block; font-size:0.9rem; }
.jpu-reg-room small { display:block; font-size:0.78rem; color:#6b7280; margin-top:2px; }

.jpu-reg-sig-wrap { position:relative; border:2px dashed #d1d5db; border-radius:8px; background:#fafafa; padding:6px; max-width:520px; }
#jpu-reg-signature { display:block; width:100%; max-width:500px; height:180px; background:#fff; border-radius:4px; touch-action:none; cursor:crosshair; }
.jpu-reg-btn-clear { position:absolute; top:10px; right:10px; background:#fff; color:#1f2937; border:1px solid #d1d5db; padding:5px 12px; font-size:0.78rem; font-weight:600; line-height:1.2; border-radius:4px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.jpu-reg-btn-clear i { color:#0f766e; }
.jpu-reg-btn-clear:hover { background:#f3f4f6; }
.jpu-reg-hint { font-size:0.8rem; color:#6b7280; margin:0 0 8px; }

.jpu-reg-agree { display:flex; gap:8px; align-items:flex-start; font-size:0.9rem; line-height:1.5; }
.jpu-reg-agree input { margin-top:3px; }
.jpu-reg-agree a { color:#0f766e; text-decoration:underline; font-weight:600; }

.jpu-reg-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
@media (max-width:600px) { .jpu-reg-actions { flex-direction:column; } }
.jpu-reg-btn { padding:11px 22px; border-radius:8px; font-weight:600; cursor:pointer; border:1px solid #d1d5db; background:#fff; color:#374151; font-size:0.95rem; transition:all .15s; display:inline-flex; align-items:center; gap:8px; justify-content:center; text-decoration:none; }
.jpu-reg-btn:hover { background:#f3f4f6; }
.jpu-reg-btn-submit { background:#0f766e; color:#fff; border-color:#0f766e; }
.jpu-reg-btn-submit:hover { background:#115e59; }
.jpu-reg-btn-preview { background:#fff; color:#0f766e; border-color:#0f766e; }

.jpu-reg-alert { padding:12px 16px; border-radius:8px; margin-bottom:14px; font-size:0.9rem; }
.jpu-reg-alert.error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.jpu-reg-alert.success { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }

.jpu-reg-empty { color:#6b7280; font-style:italic; padding:14px; text-align:center; }

/* Modal */
.jpu-reg-modal { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:flex-start; justify-content:center; z-index:99999; padding:20px; overflow-y:auto; }
.jpu-reg-modal.is-open { display:flex; }
.jpu-reg-modal-inner { background:#fff; border-radius:12px; max-width:680px; width:100%; padding:24px; position:relative; margin:auto; }
.jpu-reg-modal-sm { max-width:420px; text-align:center; }
.jpu-reg-modal-close { position:absolute; top:10px; right:14px; background:none; border:0; font-size:28px; cursor:pointer; color:#9ca3af; line-height:1; }
.jpu-reg-modal-close:hover { color:#1f2937; }
.jpu-reg-modal h3 { margin:0 0 12px; color:#0f766e; }
.jpu-reg-tnc-content { max-height:50vh; overflow-y:auto; padding:12px; background:#f9fafb; border-radius:6px; font-size:0.9rem; }
.jpu-reg-modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.jpu-reg-preview-content table { width:100%; border-collapse:collapse; }
.jpu-reg-preview-content td { padding:6px 10px; border:1px solid #e5e7eb; font-size:0.88rem; }
.jpu-reg-preview-content td:first-child { background:#f9fafb; font-weight:600; width:38%; }

.jpu-reg-success-icon { font-size:3.5rem; color:#10b981; margin-bottom:10px; }

/* v1.0.17 — wrapper scroll untuk paket (tampil ~3 kartu lalu autoscroll) */
.jpu-reg-pkg-scroll {
	position:relative;
	max-height: 480px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	border-radius: 8px;
	padding: 4px 6px 4px 2px;
}
.jpu-reg-pkg-fade {
	display:block; position:sticky; bottom:0; left:0; right:0; height:40px;
	background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 90%);
	pointer-events:none; margin-top:-40px;
}
.jpu-reg-pkg-hint { font-size:0.78rem; color:#6b7280; margin:6px 0 0; text-align:center; }
@media (max-width: 600px) {
	.jpu-reg-pkg-grid { grid-template-columns: 1fr; gap:10px; }
	.jpu-reg-pkg-scroll { max-height: 360px; }
}
.jpu-reg-success-actions { flex-wrap:wrap; justify-content:center !important; gap:10px; }
.jpu-reg-success-actions .jpu-reg-btn { min-width:170px; }

/* Stepper input (Jumlah Orang) — v1.1.1 */
.jpu-reg-stepper {
	display:inline-flex; align-items:stretch;
	border:1px solid #d1d5db; border-radius:8px; overflow:hidden;
	background:#fff; max-width:180px;
}
.jpu-reg-stepper input[type="number"] {
	width:64px; min-width:48px; border:0; outline:none; text-align:center;
	font-size:1rem; font-weight:600; color:#111827;
	padding:8px 4px; -moz-appearance:textfield; background:transparent;
}
.jpu-reg-stepper input[type="number"]::-webkit-outer-spin-button,
.jpu-reg-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.jpu-reg-stepper-btn {
	border:0; background:#f3f4f6; color:#111827; cursor:pointer;
	width:42px; font-size:1.25rem; line-height:1; font-weight:700;
	display:flex; align-items:center; justify-content:center;
	transition:background .15s ease;
}
.jpu-reg-stepper-btn:hover { background:#e5e7eb; }
.jpu-reg-stepper-btn:active { background:#d1d5db; }