/*
 * Doctaz registration wizard (doctor / nurse / nurse-practitioner / patient)
 * Multi-step shell on the new design language. Pairs with the ubold theme
 * already loaded by registration/index.php (bootstrap/app/icons + Poppins).
 * Drives any <form class="reg-wizard"> via registration_wizard.js.
 */

.reg-shell {
	max-width: 920px;
	margin: 18px auto 70px;
	padding: 0 16px;
}

.reg-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 45px rgba(56, 65, 74, 0.10);
	overflow: hidden;
}

.reg-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 26px 32px;
	color: #fff;
	background: linear-gradient(120deg, var(--doctaz-brand) 0%, var(--doctaz-brand-dark) 100%);
}

.reg-head .reg-head-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	flex-shrink: 0;
}

.reg-head h3 {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	margin: 0;
	color: #fff;
}

.reg-head p {
	margin: 3px 0 0;
	opacity: 0.85;
	font-size: 0.9rem;
}

.reg-body {
	padding: 26px 32px 30px;
}

/* ---- Stepper ---- */
.reg-stepper {
	display: flex;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.reg-stepper li {
	flex: 1;
	text-align: center;
	position: relative;
	font-size: 0.76rem;
	color: #98a6ad;
	line-height: 1.25;
}

.reg-stepper li .num {
	position: relative;
	z-index: 1;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #eef0f4;
	border: 2px solid #eef0f4;
	color: #98a6ad;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 6px;
	font-weight: 700;
	transition: all 0.2s ease;
}

.reg-stepper li::before {
	content: '';
	position: absolute;
	top: 17px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: #eef0f4;
	z-index: 0;
}

.reg-stepper li:first-child::before {
	display: none;
}

.reg-stepper li.is-active {
	color: var(--doctaz-brand);
	font-weight: 700;
}

.reg-stepper li.is-active .num {
	background: var(--doctaz-brand);
	border-color: var(--doctaz-brand);
	color: #fff;
}

.reg-stepper li.is-done .num {
	background: #fff;
	border-color: var(--doctaz-brand);
	color: var(--doctaz-brand);
}

.reg-stepper li.is-done::before,
.reg-stepper li.is-active::before {
	background: var(--doctaz-brand);
}

.reg-stepper li.is-clickable {
	cursor: pointer;
}

/* ---- Steps ---- */
.wizard-step {
	display: none;
}

.wizard-step.is-active {
	display: block;
	animation: regFade 0.25s ease;
}

@keyframes regFade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.wizard-step .step-title {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	margin: 0 0 20px;
	color: #323a46;
}

/* ---- Field layout: stack legacy bootstrap groups, then grid them 2-up ---- */
.reg-card .form-group.row {
	display: block;
	margin-bottom: 18px;
}

.reg-card .form-group.row>.control-label,
.reg-card .form-group.row>label {
	display: block;
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
	text-align: left;
	padding: 0 0 6px;
	font-weight: 600;
	font-size: 0.85rem;
	color: #323a46;
}

.reg-card .form-group.row>[class*="col-"] {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.reg-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 40px;
}

.reg-grid>.col-full {
	grid-column: 1 / -1;
}

@media (max-width: 680px) {
	.reg-grid {
		grid-template-columns: 1fr;
	}

	.reg-head {
		padding: 22px 20px;
	}

	.reg-body {
		padding: 22px 18px 26px;
	}
}

/* ---- Inputs ---- */
.reg-card .form-control {
	border-radius: 8px;
	height: calc(1.5em + 0.9rem + 2px);
	box-shadow: none;
}

.reg-card textarea.form-control,
.reg-card .note-editor.note-frame {
	height: auto;
}

/* Count fields (rooms, beds, staff numbers) read as tidy number inputs, left
   aligned, rather than stretching the full grid cell / card width. */
.reg-card input[type="number"].form-control {
	max-width: 240px;
}

.reg-card .form-control:focus {
	border-color: var(--doctaz-brand);
	box-shadow: 0 0 0 0.15rem rgba(13, 148, 136, 0.15);
}

.reg-card .description,
.reg-card small {
	font-size: 0.78rem;
	color: #98a6ad;
}

.reg-card .social-stack .form-control {
	margin-bottom: 4px;
}

/* Social links: brand-icon input-groups, stacked with tight spacing */
.reg-card .social-stack .input-group {
	margin-bottom: 10px;
}

.reg-card .social-stack .input-group .input-group-text {
	background: #fff;
	color: #98a6ad;
	border-right: 0;
	border-radius: 8px 0 0 8px;
	min-width: 44px;
	justify-content: center;
}

.reg-card .social-stack .input-group .form-control {
	border-left: 0;
	border-radius: 0 8px 8px 0;
	margin-bottom: 0;
}

.reg-card .social-stack .input-group:focus-within .input-group-text {
	color: var(--doctaz-brand);
	border-color: var(--doctaz-brand);
}

.reg-card .social-stack .input-group:focus-within .form-control {
	border-color: var(--doctaz-brand);
}

/* select2 in a hidden step can init at 0 width — force full */
.reg-card .select2-container {
	width: 100% !important;
}

.reg-card .select2-container .select2-selection--single {
	height: calc(1.5em + 0.9rem + 2px);
	border-radius: 8px;
	border-color: #ced4da;
	display: flex;
	align-items: center;
}

/* ---- Profile image partial (shared profileImageFormGroupField.php) ---- */
.reg-card label.label[data-toggle="tooltip"] {
	display: block;
	text-align: center;
	cursor: pointer;
}

.reg-card #avatar {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50% !important;
	object-fit: cover;
	margin: 0 auto 14px;
	background: #eef0f4;
	border: 3px solid #fff;
	box-shadow: 0 4px 16px rgba(56, 65, 74, 0.14);
}

.reg-card label.label[data-toggle="tooltip"] .btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 8px !important;
	padding: 0.45rem 1.1rem !important;
	font-weight: 600;
	margin-top: 0 !important;
}

/* ---- Unified upload drop zone ----
   Shared by the JS-enhanced .reg-upload wrapper (doctor/aprn/patient native
   file inputs) and nurse's hand-rolled .upload-container, so every file
   uploader on every registration form looks identical. */
.reg-card .reg-upload,
.reg-card .upload-container {
	display: block;
	position: relative;
	border: 1.5px dashed #ced4da;
	border-radius: 12px;
	padding: 26px 20px;
	text-align: center;
	background: #fbfbfe;
	cursor: pointer;
	margin: 0;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.reg-card .reg-upload:hover,
.reg-card .upload-container:hover {
	border-color: var(--doctaz-brand);
}

.reg-card .reg-upload.is-dragging,
.reg-card .upload-container.dragging {
	border-color: var(--doctaz-brand);
	background: #f4f3fe;
}

.reg-card .reg-upload .reg-upload-icon,
.reg-card .upload-container .icon {
	display: block;
	font-size: 30px;
	color: #98a6ad;
	margin-bottom: 8px;
}

.reg-card .reg-upload-text {
	font-size: 0.92rem;
	color: #323a46;
}

.reg-card .reg-upload-text strong {
	color: var(--doctaz-brand);
	font-weight: 700;
}

.reg-card .reg-upload-files {
	list-style: none;
	padding: 0;
	margin: 14px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.reg-card .reg-upload-files li {
	background: #fff;
	border: 1px solid #e5e8eb;
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 0.85rem;
	color: #323a46;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.reg-card .reg-upload-files li i {
	color: #98a6ad;
}

/* The native input sits transparently on top of the dropzone so clicking
   anywhere opens the picker, drops land natively on .files, and browser
   constraint-validation can still focus it on submit. */
.reg-card .reg-upload .reg-upload-input {
	position: absolute !important;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

/* ---- Map ---- */
.reg-card .gmap {
	min-height: 340px;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 8px;
}

.reg-card #pac-input {
	max-width: 100%;
	border: 1px solid #ced4da;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 0.9rem;
	box-shadow: none;
	margin-bottom: 4px;
}

/* ---- Captcha ---- */
.reg-card .captcha-image {
	height: calc(1.5em + 0.9rem + 2px);
	border-radius: 8px;
}

/* ---- Nav ---- */
.reg-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid #eef0f4;
}

.reg-nav .spacer {
	flex: 1;
}

.reg-nav .btn {
	border-radius: 8px;
	font-weight: 600;
	padding: 0.5rem 1.4rem;
}

/* Keep every primary button inside the card on-brand. The legacy
   assets/css/custom.css forces .btn-primary to teal with !important, so we
   override with !important at higher specificity (covers Next, submit, and the
   shared profile-image "Upload" button). */
.reg-card .btn-primary {
	background-color: var(--doctaz-brand) !important;
	border-color: var(--doctaz-brand) !important;
	color: #fff !important;
}

.reg-card .btn-primary:hover,
.reg-card .btn-primary:focus,
.reg-card .btn-primary:active,
.reg-card .btn-primary.focus,
.reg-card .btn-primary.active,
.reg-card .btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--doctaz-brand-dark) !important;
	border-color: var(--doctaz-brand-dark) !important;
	color: #fff !important;
}

/* Teal focus ring instead of Bootstrap's purple glow. */
.reg-card .btn-primary:focus,
.reg-card .btn-primary.focus,
.reg-card .btn-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.25) !important;
}

.reg-nav .reg-prev {
	background: #fff;
	border: 1px solid #ced4da;
	color: #6c757d;
}

/* Conditional steps (data-show-if-field) hide their stepper bubble *and* the
   bridge line drawn by the *next* bubble's ::before, so the row collapses
   cleanly when, e.g., the healthcare facility "Facility Details" step is
   skipped for outpatient registrations. */
.reg-stepper li.is-hidden { display: none; }

/* ---- Facility wizard: subscription period pills ---- */
.reg-card .subscription-period-selector {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 0 0 18px;
	flex-wrap: wrap;
}

.reg-card .subscription-period-btn {
	background: #f4f5f7;
	border: 1px solid #e5e8eb;
	color: #6c757d;
	border-radius: 999px;
	padding: 6px 18px;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: all 0.15s ease;
}

.reg-card .subscription-period-btn:hover {
	color: var(--doctaz-brand);
	border-color: var(--doctaz-brand);
}

.reg-card .subscription-period-btn.active {
	background: var(--doctaz-brand);
	border-color: var(--doctaz-brand);
	color: #fff;
}

/* ---- Facility wizard: subscription plan cards ---- */
.reg-card .subscription-plan {
	position: relative;
	padding: 22px 18px;
	border: 1.5px solid #e5e8eb;
	border-radius: 12px;
	margin-bottom: 18px;
	text-align: center;
	background: #fff;
	cursor: pointer;
	transition: all 0.2s ease;
}

.reg-card .subscription-plan:hover {
	border-color: var(--doctaz-brand);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(13, 148, 136, 0.12);
}

.reg-card .subscription-plan input[type="radio"] { display: none; }

.reg-card .subscription-plan label {
	display: block;
	cursor: pointer;
	margin: 0;
}

.reg-card .subscription-plan.active {
	border-color: var(--doctaz-brand);
	background: var(--doctaz-brand-soft);
	box-shadow: 0 8px 22px rgba(13, 148, 136, 0.14);
}

.reg-card .plan-header { margin-bottom: 14px; }

.reg-card .plan-title {
	font-family: "Poppins", sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--doctaz-brand);
}

.reg-card .plan-price {
	font-size: 1.35rem;
	font-weight: 700;
	color: #323a46;
	margin: 0;
}

.reg-card .plan-features {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: left;
}

.reg-card .plan-features li {
	padding: 8px 0;
	border-top: 1px solid #eef0f4;
	color: #6c757d;
	font-size: 0.88rem;
	display: flex;
	align-items: center;
	gap: 8px;
}

.reg-card .plan-features li::before {
	content: "✓";
	color: var(--doctaz-brand);
	font-weight: 700;
}

.reg-card .plan-features li:first-child { border-top: none; }

/* ---- Facility wizard: payment-method toggle pills (override orange) ---- */
.reg-card .pm-btn {
	border-radius: 8px;
	border: 1.5px solid #ced4da;
	background: #fff;
	color: #6c757d;
	font-weight: 600;
}

.reg-card .pm-btn .fa.fa-check { display: none; }
.reg-card .pm-btn.active .fa.fa-check { display: inline-block; }

/* ---- Facility wizard: step intro hint ---- */
.reg-card .step-hint {
	color: #6c757d;
	font-size: 0.9rem;
	margin: -6px 0 20px;
	max-width: 720px;
}

/* ---- Facility wizard: DB-driven plan cards (extends .subscription-plan) ---- */
.reg-card .subscription-plan { display: flex; flex-direction: column; height: 100%; }
.reg-card .subscription-plan label { display: flex; flex-direction: column; height: 100%; }

.reg-card .subscription-plan.is-featured {
	border-color: var(--doctaz-brand);
	box-shadow: 0 10px 26px rgba(13, 148, 136, 0.12);
}

.reg-card .plan-flag {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--doctaz-brand);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.reg-card .plan-price .plan-per {
	font-size: 0.78rem;
	font-weight: 600;
	color: #6c757d;
}

.reg-card .plan-trial {
	display: inline-block;
	margin-top: 8px;
	background: var(--doctaz-brand-soft);
	color: var(--doctaz-brand-darker);
	border: 1px solid var(--doctaz-brand-soft-border);
	font-size: 0.74rem;
	font-weight: 600;
	padding: 3px 12px;
	border-radius: 999px;
}

.reg-card .plan-desc {
	color: #6c757d;
	font-size: 0.82rem;
	margin: 12px 0 10px;
	text-align: center;
}

.reg-card .plan-cta {
	display: block;
	margin-top: auto;
	padding-top: 16px;
	color: var(--doctaz-brand);
	font-weight: 600;
	font-size: 0.85rem;
}

.reg-card .subscription-plan.active .plan-cta { color: var(--doctaz-brand-darker); }

.reg-card .plans-empty {
	text-align: center;
	color: #6c757d;
	font-size: 0.9rem;
	background: #f8f9fa;
	border: 1px dashed #dde1e6;
	border-radius: 12px;
	padding: 22px;
}

.reg-card .pm-btn.active {
	background-color: var(--doctaz-brand) !important;
	border-color: var(--doctaz-brand) !important;
	color: #fff !important;
}

/* ---- Facility wizard: facility logo (replaces gradient banner) ----
   The shared `.reg-upload` enhancer wraps the file input, so we just give
   the surrounding form-group room and provide a circular preview slot the
   inline JS can keep populating via #logo-preview-img. */
.reg-card .facility-logo-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.reg-card .facility-logo-preview {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	background: #eef0f4;
	border: 3px solid #fff;
	box-shadow: 0 4px 16px rgba(56, 65, 74, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
}

.reg-card .facility-logo-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reg-card .facility-logo-wrap .reg-upload {
	width: 100%;
}

/* ---- Facility wizard: dynamic room/bed fieldsets ---- */
.reg-card fieldset {
	border: 1px solid #e5e8eb;
	border-radius: 10px;
	padding: 14px 16px 4px;
	margin: 0 0 18px;
	background: #fbfbfe;
}

.reg-card fieldset legend {
	width: auto;
	padding: 0 8px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--doctaz-brand);
}

/* ---- Facility wizard: staffing select2 chips on-brand (teal, not purple) ---- */
.reg-card .select2-container--default .select2-selection--multiple {
	border-color: #ced4da;
	border-radius: 8px;
	min-height: calc(1.5em + 0.9rem + 2px);
}
.reg-card .select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--doctaz-brand);
}
.reg-card .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--doctaz-brand);
	border: 1px solid var(--doctaz-brand-dark);
	color: #fff;
	border-radius: 6px;
	padding: 2px 8px;
}
.reg-card .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: rgba(255, 255, 255, 0.85);
	margin-right: 5px;
	float: none;
}
.reg-card .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #fff;
}

/* Staffing per-type count hint */
.reg-card .staff-hint {
	display: block;
	color: #6c757d;
	font-size: 0.82rem;
	margin: 2px 0 10px;
}

/* ---- Wizard: "we restored your progress" draft notice ---- */
.reg-card .reg-draft-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--doctaz-brand-soft);
	border: 1px solid var(--doctaz-brand-soft-border);
	color: var(--doctaz-brand-darker);
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 18px;
	font-size: 0.88rem;
	font-weight: 500;
}
.reg-card .reg-draft-notice .reg-draft-clear {
	background: transparent;
	border: 1px solid var(--doctaz-brand-soft-border);
	color: var(--doctaz-brand-darker);
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}
.reg-card .reg-draft-notice .reg-draft-clear:hover {
	background: var(--doctaz-brand);
	border-color: var(--doctaz-brand);
	color: #fff;
}

/* ---- Facility wizard: captcha row ---- */
.reg-card .captcha-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}