/* RXD DRK Form Wizard — Public Form Styles */

.rxd-fw-form-wrap {
	max-width: 640px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}

/* ── Progress indicator ──────────────────────────────────────── */
.rxd-fw-progress {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 2.5rem;
}
.rxd-fw-progress::before {
	content: '';
	position: absolute;
	top: 20px;
	left: 5%;
	right: 5%;
	height: 2px;
	background: #e2e8f0;
	z-index: 0;
}
.rxd-fw-progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 1;
	flex: 1;
}
.rxd-step-number {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #e2e8f0;
	color: #718096;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	transition: background .2s, color .2s;
}
.rxd-step-label {
	font-size: 12px;
	color: #718096;
	text-align: center;
	max-width: 80px;
}
.rxd-fw-progress-step.rxd-active  .rxd-step-number { background: #2b6cb0; color: #fff; }
.rxd-fw-progress-step.rxd-done    .rxd-step-number { background: #38a169; color: #fff; }
.rxd-fw-progress-step.rxd-active  .rxd-step-label  { color: #2b6cb0; font-weight: 600; }
.rxd-fw-progress-step.rxd-done    .rxd-step-label  { color: #38a169; }

/* ── Step fieldsets ──────────────────────────────────────────── */
.rxd-fw-form fieldset {
	border: none;
	padding: 0;
	margin: 0;
}
.rxd-fw-form legend {
	font-size: 1.15rem;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 1.5rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid #e2e8f0;
	width: 100%;
	display: block;
}

/* ── Fields ───────────────────────────────────────────────────── */
.rxd-fw-field { margin-bottom: 1.1rem; }

.rxd-fw-field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #2d3748;
	margin-bottom: 5px;
}
.rxd-required { color: #e53e3e; margin-left: 2px; }

.rxd-fw-field input[type="text"],
.rxd-fw-field input[type="email"],
.rxd-fw-field input[type="tel"],
.rxd-fw-field input[type="date"],
.rxd-fw-field input[type="number"],
.rxd-fw-field select,
.rxd-fw-field textarea {
	width: 100%;
	padding: .6rem .75rem;
	border: 1.5px solid #cbd5e0;
	border-radius: 6px;
	font-size: 15px;
	color: #2d3748;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
	box-sizing: border-box;
	font-family: inherit;
}
.rxd-fw-field input:focus,
.rxd-fw-field select:focus,
.rxd-fw-field textarea:focus {
	outline: none;
	border-color: #4299e1;
	box-shadow: 0 0 0 3px rgba(66,153,225,.18);
}
.rxd-fw-field input.rxd-invalid,
.rxd-fw-field select.rxd-invalid,
.rxd-fw-field textarea.rxd-invalid {
	border-color: #e53e3e;
	box-shadow: 0 0 0 2px rgba(229,62,62,.15);
}
.rxd-fw-field textarea { resize: vertical; min-height: 100px; }
.rxd-fw-field select   { appearance: auto; height: auto; padding: .75rem .75rem; line-height: 1.5; }

.rxd-field-error {
	display: block;
	font-size: 12px;
	color: #c53030;
	margin-top: 4px;
}

/* ── Input with static prefix (e.g. "D-" for case number) ────── */
.rxd-fw-input-prefix {
	display: flex;
	align-items: stretch;
	border: 1.5px solid #cbd5e0;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.rxd-fw-prefix-text {
	padding: .6rem .65rem;
	font-size: 15px;
	font-weight: 700;
	color: #4a5568;
	background: #f7fafc;
	border-right: 1.5px solid #cbd5e0;
	display: flex;
	align-items: center;
	user-select: none;
	flex-shrink: 0;
}
.rxd-fw-input-prefix input {
	flex: 1;
	min-width: 0;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	outline: none !important;
}
.rxd-fw-input-prefix:focus-within {
	border-color: #4299e1;
	box-shadow: 0 0 0 3px rgba(66,153,225,.18);
}
.rxd-fw-input-prefix:has(input.rxd-invalid) {
	border-color: #e53e3e;
	box-shadow: 0 0 0 2px rgba(229,62,62,.15);
}

/* ── Two-column field row ─────────────────────────────────────── */
.rxd-fw-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}
@media ( max-width: 480px ) { .rxd-fw-row { grid-template-columns: 1fr; } }

/* ── Checkbox ─────────────────────────────────────────────────── */
.rxd-fw-checkbox-label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	color: #4a5568;
	cursor: pointer;
	line-height: 1.5;
}
.rxd-fw-checkbox-label input[type="checkbox"] {
	width: auto;
	margin-top: 3px;
	flex-shrink: 0;
}

/* ── Radio group ──────────────────────────────────────────────── */
.rxd-fw-radio-group { display: flex; flex-direction: column; gap: 8px; }
.rxd-fw-radio-option {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 14px;
	color: #2d3748;
	cursor: pointer;
}
.rxd-fw-radio-option input[type="radio"] { width: auto; flex-shrink: 0; }

/* ── Navigation buttons ───────────────────────────────────────── */
.rxd-fw-nav {
	display: flex;
	margin-top: 1.75rem;
}
.rxd-fw-nav--split { justify-content: space-between; }

/* ── Buttons ──────────────────────────────────────────────────── */
.rxd-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: .6rem 1.5rem;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background .15s, opacity .15s;
	font-family: inherit;
}
.rxd-btn--next,
.rxd-btn--submit { background: #2b6cb0; color: #fff; }
.rxd-btn--next:hover,
.rxd-btn--submit:hover { background: #2c5282; }
.rxd-btn--prev { background: #edf2f7; color: #4a5568; }
.rxd-btn--prev:hover { background: #e2e8f0; }
.rxd-btn:disabled,
.rxd-btn.rxd-loading { opacity: .6; cursor: not-allowed; pointer-events: none; }

/* ── Messages ─────────────────────────────────────────────────── */
.rxd-fw-messages {
	border-radius: 6px;
	padding: 1rem 1.25rem;
	margin-top: 1.5rem;
	font-size: 15px;
	display: none;
	text-align: center;
}
.rxd-fw-messages.rxd-success {
	display: block;
	background: #f0fff4;
	border: 1px solid #9ae6b4;
	color: #276749;
}
.rxd-fw-messages.rxd-error {
	display: block;
	background: #fff5f5;
	border: 1px solid #fed7d7;
	color: #c53030;
}

/* ── Success panel ────────────────────────────────────────────── */
.rxd-fw-success-panel { text-align: center; }
.rxd-fw-success-tick {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #38a169;
	color: #fff;
	font-size: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
}
.rxd-fw-success-panel h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: #22543d;
	margin: 0 0 .4rem;
}
.rxd-fw-success-intro {
	font-size: 15px;
	font-weight: 600;
	color: #276749;
	margin: 0 0 1rem;
}
.rxd-fw-success-body {
	text-align: left;
	background: #fff;
	border: 1px solid #c6f6d5;
	border-radius: 6px;
	padding: 1rem 1.1rem;
	margin-top: .5rem;
}
.rxd-fw-success-body p {
	font-size: 14px;
	color: #2d3748;
	line-height: 1.65;
	margin: 0 0 .85rem;
	text-align: justify;
}
.rxd-fw-success-body p:last-child { margin: 0; }
.rxd-fw-success-urgent,
.rxd-fw-success-body p.rxd-fw-success-urgent {
	background: #fff5f5;
	border: 1px solid #fed7d7;
	border-radius: 4px;
	padding: .65rem .9rem;
	color: #c53030 !important;
	text-align: center !important;
	font-size: 16px;
}
.rxd-fw-success-urgent a {
	color: #c53030;
	text-decoration: none;
}
.rxd-fw-success-urgent a:hover { text-decoration: underline; }

/* ── Review panel ─────────────────────────────────────────────── */
.rxd-fw-review { margin-bottom: 1.5rem; }
.rxd-fw-review table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rxd-fw-review tr    { border-bottom: 1px solid #e2e8f0; }
.rxd-fw-review th    { padding: 8px 12px; width: 38%; background: #f7fafc; text-align: left; font-weight: 600; color: #4a5568; }
.rxd-fw-review td    { padding: 8px 12px; color: #2d3748; }

/* ── Centered legend variant ──────────────────────────────────── */
.rxd-fw-form .rxd-legend--center {
	text-align: center;
}

/* ── Conditional sections ─────────────────────────────────────── */
.rxd-fw-hidden { display: none !important; }
.rxd-fw-conditional { margin-top: .25rem; }

/* ── FAQ link ─────────────────────────────────────────────────── */
.rxd-fw-faq-link {
	margin: .5rem 0 .75rem;
	font-size: 14px;
}
.rxd-fw-faq-link a {
	color: #2b6cb0;
	text-decoration: underline;
}
.rxd-fw-faq-link a:hover { color: #2c5282; }

/* ── Character counter hint ───────────────────────────────────── */
.rxd-fw-char-hint {
	display: block;
	text-align: right;
	font-size: 12px;
	color: #a0aec0;
	margin-top: 4px;
}
.rxd-fw-char-hint.rxd-char-warn { color: #c05621; }

/* ── Sub-section label (e.g. "Select preferred pickup location") */
.rxd-fw-sublabel {
	font-size: 15px;
	font-weight: 700;
	color: #1a202c;
	margin: .75rem 0 .5rem;
}

/* ── Block radio options (stacked, full-width address text) ───── */
.rxd-radio-label--block {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 400;
	color: #2d3748;
	cursor: pointer;
	line-height: 1.55;
}
.rxd-radio-label--block input[type="radio"] {
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: #2b6cb0;
	width: 16px;
	height: 16px;
	cursor: pointer;
}
.rxd-fw-field--locations { margin-top: .25rem; }

/* ── Delivery "Ship" message ──────────────────────────────────── */
.rxd-fw-delivery-msg {
	font-size: 14px;
	color: #2b6cb0;
	margin: .5rem 0 .75rem;
}

/* ── Coming-soon placeholder ─────────────────────────────────── */
.rxd-fw-coming-soon {
	font-size: 14px;
	color: #a0aec0;
	font-style: italic;
	padding: .75rem 0;
}

/* ── Inline radio group (Gender etc.) ─────────────────────────── */
.rxd-fw-radio-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	margin-top: 4px;
}
.rxd-radio-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 400;
	color: #2d3748;
	cursor: pointer;
}
.rxd-radio-label input[type="radio"] {
	width: auto;
	margin: 0;
	accent-color: #2b6cb0;
	cursor: pointer;
}

/* ── intl-tel-input overrides ─────────────────────────────────── */
.rxd-fw-field .iti {
	width: 100%;
	display: block;
}
.rxd-fw-field .iti input[type="tel"] {
	width: 100%;
	padding-left: 52px; /* room for the flag button */
}
.rxd-fw-field .iti input[type="tel"]:focus {
	outline: none;
	border-color: #4299e1;
	box-shadow: 0 0 0 3px rgba(66,153,225,.18);
}
.rxd-fw-field .iti input[type="tel"].rxd-invalid {
	border-color: #e53e3e;
	box-shadow: 0 0 0 2px rgba(229,62,62,.15);
}
.rxd-fw-field .iti__flag-container { z-index: 2; }

/* ── Turnstile wrapper ─────────────────────────────────────────── */
.rxd-fw-turnstile { margin: 1rem 0; }

/* ── Patient type selection cards (Step 1 of Appointment) ────── */
.rxd-fw-type-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: .25rem 0 .5rem;
}
.rxd-btn--type-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	padding: 1.1rem 1.25rem;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s, background .15s;
	font-family: inherit;
}
.rxd-btn--type-card:hover:not(.rxd-active) {
	border-color: #90cdf4;
	background: #f0f8ff;
}
.rxd-btn--type-card.rxd-active {
	border-color: #2b6cb0;
	background: #ebf8ff;
}
.rxd-type-card-title {
	font-size: 15px;
	font-weight: 700;
	color: #2d3748;
	line-height: 1.4;
}
.rxd-btn--type-card.rxd-active .rxd-type-card-title {
	color: #2b6cb0;
}
.rxd-type-card-sub {
	font-size: 13px;
	font-weight: 400;
	color: #718096;
	line-height: 1.4;
}


/* ── Info / charge note ──────────────────────────────────────── */
.rxd-fw-info-note {
	font-size: 13px;
	color: #744210;
	background: #fffbeb;
	border: 1px solid #f6e05e;
	border-radius: 4px;
	padding: .5rem .75rem;
	margin: .5rem 0 .75rem;
}

/* ── Section title (e.g. "ENTER SHIPPING ADDRESS") ───────────── */
.rxd-fw-section-title {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: #2b6cb0;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin: 1.25rem 0 .75rem;
}

/* ── Field description note ──────────────────────────────────── */
.rxd-fw-field-note {
	font-size: 13px;
	color: #718096;
	margin-top: 8px;
	line-height: 1.55;
}

/* ── Doctor availability note (e.g. "first Tuesday of month") ── */
.rxd-fw-avail-note {
	font-size: 12px;
	color: #718096;
	margin-left: 4px;
	font-weight: 400;
}

/* ── Patient section heading (mirrors fieldset legend) ────────── */
.rxd-fw-step-legend {
	font-size: 1.15rem;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 1.5rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid #e2e8f0;
	width: 100%;
	display: block;
}

/* ── Date of birth 3-part field (DD / MM / YYYY) ─────────────── */
.rxd-fw-dob-parts {
	display: flex;
	align-items: center;
	gap: .375rem;
}
.rxd-fw-dob-day,
.rxd-fw-dob-month {
	width: 3.5rem !important;
	text-align: center;
	padding-left: .25rem !important;
	padding-right: .25rem !important;
}
.rxd-fw-dob-year {
	width: 5.25rem !important;
	text-align: center;
	padding-left: .25rem !important;
	padding-right: .25rem !important;
}
.rxd-fw-dob-sep {
	color: #a0aec0;
	font-size: 1.1em;
	line-height: 1;
	user-select: none;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media ( max-width: 520px ) {
	.rxd-step-label { display: none; }
}