/*!
 * UnionDesk Design System
 * Loaded AFTER the vendor theme CSS and BEFORE @stack('css').
 * Never edit the vendor theme files — override here.
 *
 * Contents
 *   1. Fonts        — Roboto (Latin) + SolaimanLipi (Bengali)
 *   2. Tokens       — colour, spacing, radius, shadow
 *   3. Base         — typography, page canvas
 *   4. Components   — buttons, cards, tables, forms, badges, modals, dropdowns, pagination
 *   5. App shell    — topbar, sidebar, page header
 *   6. Utilities
 */

/* ============================================================
   1. FONTS
   Roboto carries no Bengali glyphs, so listing it first makes the
   browser fall back per-glyph to SolaimanLipi for Bengali text.
   One stack serves both languages — no lang-conditional CSS.
   ============================================================ */

@font-face {
	font-family: 'Roboto';
	src: url('../../fonts/Roboto-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('../../fonts/Roboto-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('../../fonts/Roboto-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SolaimanLipi';
	src: url('../../fonts/SolaimanLipi.ttf') format('truetype');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   2. TOKENS
   ============================================================ */

:root {
	/* Brand — Bangladesh government green */
	--ud-primary: #006a4e;
	--ud-primary-dark: #00513c;
	--ud-primary-soft: #e6f2ee;
	--ud-primary-rgb: 0, 106, 78;

	/* Bangladesh red — destructive actions only */
	--ud-accent: #f42a41;

	/* Neutrals */
	--ud-ink: #16281f;
	--ud-muted: #5d6d66;
	--ud-line: #dde5e1;
	--ud-surface: #ffffff;
	--ud-canvas: #f4f7f6;

	/* Certificate status — one colour per status, used everywhere */
	--ud-status-pending: #b26a00;
	--ud-status-pending-soft: #fdf3e3;
	--ud-status-transit: #0b6bcb;
	--ud-status-transit-soft: #e8f1fc;
	--ud-status-received: #0b6bcb;
	--ud-status-received-soft: #e8f1fc;
	--ud-status-authorized: #6f42c1;
	--ud-status-authorized-soft: #f0eafa;
	--ud-status-approved: #1a7f4b;
	--ud-status-approved-soft: #e7f4ed;
	--ud-status-rejected: #c02637;
	--ud-status-rejected-soft: #fceaec;

	/* Shape */
	--ud-radius-sm: 6px;
	--ud-radius: 8px;
	--ud-radius-lg: 12px;

	/* Elevation */
	--ud-shadow-sm: 0 1px 2px rgba(22, 40, 31, .06);
	--ud-shadow: 0 2px 8px rgba(22, 40, 31, .08);
	--ud-shadow-lg: 0 8px 24px rgba(22, 40, 31, .12);

	/* Controls — 40px default, 48px on the certificate flow */
	--ud-control-h: 40px;
	--ud-control-h-lg: 48px;

	/* Typography */
	--ud-font: 'Roboto', 'SolaimanLipi', 'Segoe UI', Arial, sans-serif;

	/* Bootstrap bridge — remap the framework's own variables */
	--bs-primary: #006a4e;
	--bs-primary-rgb: 0, 106, 78;
	--bs-link-color: #006a4e;
	--bs-link-hover-color: #00513c;
	--bs-body-color: #16281f;
	--bs-border-color: #dde5e1;
	--bs-border-radius: 8px;
}

/* ============================================================
   3. BASE
   ============================================================ */

body {
	font-family: var(--ud-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ud-ink);
	background-color: var(--ud-canvas);
	letter-spacing: normal;
	/* the theme sets .5px, which shreds Bengali conjuncts */
	-webkit-font-smoothing: antialiased;
}

/* SolaimanLipi has a small x-height and tall matras — Bengali needs
   more vertical room than Latin to stay legible for older staff. */
html[lang="bn"] body {
	line-height: 1.8;
}

html[lang="bn"] .table>:not(caption)>*>* {
	line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	color: var(--ud-ink);
	font-weight: 600;
	letter-spacing: normal;
}

html[lang="bn"] h1,
html[lang="bn"] h2,
html[lang="bn"] h3,
html[lang="bn"] h4,
html[lang="bn"] h5,
html[lang="bn"] h6 {
	line-height: 1.6;
}

a {
	color: var(--ud-primary);
	text-decoration: none;
}

a:hover {
	color: var(--ud-primary-dark);
}

.text-muted {
	color: var(--ud-muted) !important;
}

/* Visible focus ring on everything interactive — never remove outlines.
   Staff navigate long forms by keyboard. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ud-primary);
	outline-offset: 2px;
	border-radius: var(--ud-radius-sm);
}

/* ============================================================
   4. COMPONENTS
   ============================================================ */

/* --- Buttons --------------------------------------------------- */

.btn {
	--bs-btn-border-radius: var(--ud-radius);
	min-height: var(--ud-control-h);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .5rem 1rem;
	font-weight: 500;
	line-height: 1.4;
	border-radius: var(--ud-radius);
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn i {
	font-size: 1.05em;
	line-height: 1;
}

.btn-lg {
	min-height: var(--ud-control-h-lg);
	padding: .75rem 1.5rem;
	font-size: 1rem;
}

.btn-sm {
	min-height: 34px;
	padding: .35rem .75rem;
	font-size: .875rem;
}

.btn-primary {
	--bs-btn-bg: var(--ud-primary);
	--bs-btn-border-color: var(--ud-primary);
	--bs-btn-hover-bg: var(--ud-primary-dark);
	--bs-btn-hover-border-color: var(--ud-primary-dark);
	--bs-btn-active-bg: var(--ud-primary-dark);
	--bs-btn-active-border-color: var(--ud-primary-dark);
	--bs-btn-disabled-bg: var(--ud-primary);
	--bs-btn-disabled-border-color: var(--ud-primary);
	color: #fff;
}

.btn-outline-primary {
	--bs-btn-color: var(--ud-primary);
	--bs-btn-border-color: var(--ud-primary);
	--bs-btn-hover-bg: var(--ud-primary);
	--bs-btn-hover-border-color: var(--ud-primary);
	--bs-btn-active-bg: var(--ud-primary-dark);
	--bs-btn-active-border-color: var(--ud-primary-dark);
}

/* Destructive stays outline until confirmed — a filled red button
   next to a filled green one invites the wrong click. */
.btn-danger {
	--bs-btn-bg: var(--ud-accent);
	--bs-btn-border-color: var(--ud-accent);
	--bs-btn-hover-bg: #d31f34;
	--bs-btn-hover-border-color: #d31f34;
}

.btn-outline-danger {
	--bs-btn-color: var(--ud-accent);
	--bs-btn-border-color: var(--ud-accent);
	--bs-btn-hover-bg: var(--ud-accent);
	--bs-btn-hover-border-color: var(--ud-accent);
}

.btn-light,
.btn-white {
	--bs-btn-bg: #fff;
	--bs-btn-border-color: var(--ud-line);
	--bs-btn-color: var(--ud-ink);
	--bs-btn-hover-bg: var(--ud-canvas);
	--bs-btn-hover-border-color: var(--ud-line);
}

.btn-secondary {
	--bs-btn-bg: #6b7c74;
	--bs-btn-border-color: #6b7c74;
	--bs-btn-hover-bg: #596a62;
	--bs-btn-hover-border-color: #596a62;
}

/* --- Cards ----------------------------------------------------- */

.card {
	background: var(--ud-surface);
	border: 1px solid var(--ud-line);
	border-radius: var(--ud-radius-lg);
	box-shadow: var(--ud-shadow-sm);
	margin-bottom: 1.25rem;
}

.card-header {
	background: transparent;
	border-bottom: 1px solid var(--ud-line);
	padding: 1rem 1.25rem;
	font-weight: 600;
	color: var(--ud-ink);
	border-radius: var(--ud-radius-lg) var(--ud-radius-lg) 0 0;
}

.card-header .card-title {
	margin-bottom: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.card-body {
	padding: 1.25rem;
}

.card-footer {
	background: transparent;
	border-top: 1px solid var(--ud-line);
	padding: .875rem 1.25rem;
}

/* --- Tables ---------------------------------------------------- */

.table {
	--bs-table-border-color: var(--ud-line);
	color: var(--ud-ink);
	margin-bottom: 0;
	vertical-align: middle;
}

.table>thead {
	position: sticky;
	top: 0;
	z-index: 2;
}

.table>thead th {
	background: var(--ud-primary-soft);
	color: var(--ud-ink);
	font-weight: 600;
	font-size: .875rem;
	text-transform: none;
	white-space: nowrap;
	padding: .75rem .875rem;
	border-bottom: 2px solid rgba(var(--ud-primary-rgb), .18);
	vertical-align: middle;
}

.table>tbody>tr>td {
	padding: .75rem .875rem;
	border-bottom: 1px solid var(--ud-line);
	vertical-align: middle;
}

/* 44px minimum row height — touch targets and Bengali line-height */
.table>tbody>tr {
	min-height: 44px;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
	--bs-table-accent-bg: #fafcfb;
	background-color: #fafcfb;
	color: var(--ud-ink);
}

.table-hover>tbody>tr:hover>* {
	--bs-table-accent-bg: var(--ud-primary-soft);
	background-color: var(--ud-primary-soft);
	color: var(--ud-ink);
}

/* Numerics right-align and sit on tabular figures so columns line up */
.table .num,
.table .text-end {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.table-responsive {
	border-radius: var(--ud-radius);
}

/* --- Forms ----------------------------------------------------- */

.form-label {
	display: block;
	margin-bottom: .375rem;
	font-weight: 500;
	font-size: .9rem;
	color: var(--ud-ink);
}

/* Required marked with the asterisk AND the word — an asterisk alone
   is not understood by every user of this software. */
.form-label .required,
.required-mark {
	color: var(--ud-accent);
	font-weight: 700;
	margin-left: .15rem;
}

.form-control,
.form-select {
	min-height: var(--ud-control-h);
	padding: .5rem .75rem;
	font-size: .95rem;
	font-family: var(--ud-font);
	color: var(--ud-ink);
	background-color: #fff;
	border: 1px solid var(--ud-line);
	border-radius: var(--ud-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--ud-primary);
	box-shadow: 0 0 0 3px rgba(var(--ud-primary-rgb), .12);
}

.form-control::placeholder {
	color: var(--ud-muted);
	opacity: .55 !important;
}

.form-control:disabled,
.form-control[readonly] {
	background-color: var(--ud-canvas);
	color: var(--ud-muted);
}

.form-control-lg,
.form-select-lg {
	min-height: var(--ud-control-h-lg);
	font-size: 1rem;
}

.form-text {
	color: var(--ud-muted);
	font-size: .825rem;
}

.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
	border-color: var(--ud-accent);
}

.invalid-feedback,
.ud-error {
	display: block;
	color: var(--ud-accent);
	font-size: .825rem;
	margin-top: .25rem;
}

.form-check-input:checked {
	background-color: var(--ud-primary);
	border-color: var(--ud-primary);
}

.form-check-input:focus {
	border-color: var(--ud-primary);
	box-shadow: 0 0 0 3px rgba(var(--ud-primary-rgb), .12);
}

/* Bilingual field pair — `name` / `name_bn` side by side with a
   language tag on each so operators never fill the wrong one. */
.ud-lang-tag {
	display: inline-block;
	font-size: .7rem;
	font-weight: 600;
	line-height: 1;
	padding: .2rem .4rem;
	border-radius: 4px;
	background: var(--ud-primary-soft);
	color: var(--ud-primary-dark);
	margin-left: .35rem;
	vertical-align: middle;
}

/* Input with a leading icon */
.ud-input-icon {
	position: relative;
}

.ud-input-icon>i {
	position: absolute;
	top: 50%;
	left: .875rem;
	transform: translateY(-50%);
	color: var(--ud-muted);
	pointer-events: none;
}

.ud-input-icon>.form-control {
	padding-left: 2.5rem;
}

/* --- Badges ---------------------------------------------------- */

/* Dot + icon + text, never colour alone — colour-blind staff, and
   these get printed and photocopied in black and white. */
.ud-badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .6rem;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.ud-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.ud-badge i {
	font-size: .95em;
}

.ud-badge-pending {
	color: var(--ud-status-pending);
	background: var(--ud-status-pending-soft);
}

.ud-badge-submitted {
	color: var(--ud-status-pending);
	background: var(--ud-status-pending-soft);
}

.ud-badge-pending_received {
	color: var(--ud-status-transit);
	background: var(--ud-status-transit-soft);
}

.ud-badge-received {
	color: var(--ud-status-received);
	background: var(--ud-status-received-soft);
}

.ud-badge-authorized {
	color: var(--ud-status-authorized);
	background: var(--ud-status-authorized-soft);
}

.ud-badge-approved {
	color: var(--ud-status-approved);
	background: var(--ud-status-approved-soft);
}

.ud-badge-rejected {
	color: var(--ud-status-rejected);
	background: var(--ud-status-rejected-soft);
}

.ud-badge-unknown {
	color: var(--ud-muted);
	background: var(--ud-canvas);
}

/* --- Dropdowns ------------------------------------------------- */

.dropdown-menu {
	border: 1px solid var(--ud-line);
	border-radius: var(--ud-radius);
	box-shadow: var(--ud-shadow-lg);
	padding: .35rem;
	font-size: .925rem;
}

.dropdown-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: var(--ud-radius-sm);
	padding: .5rem .625rem;
	min-height: 38px;
	color: var(--ud-ink);
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: var(--ud-primary-soft);
	color: var(--ud-primary-dark);
}

/* Status forms inside the row-action dropdown must not break layout */
.dropdown-menu form {
	margin: 0;
}

.dropdown-menu form .dropdown-item {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: left;
}

/* --- Modals ---------------------------------------------------- */

.modal-content {
	border: 0;
	border-radius: var(--ud-radius-lg);
	box-shadow: var(--ud-shadow-lg);
}

.modal-header {
	border-bottom: 1px solid var(--ud-line);
	padding: 1rem 1.25rem;
}

.modal-title {
	font-size: 1.1rem;
	font-weight: 600;
}

.modal-body {
	padding: 1.25rem;
}

.modal-footer {
	border-top: 1px solid var(--ud-line);
	padding: .875rem 1.25rem;
	gap: .5rem;
}

/* --- Pagination ------------------------------------------------ */

.pagination {
	--bs-pagination-color: var(--ud-ink);
	--bs-pagination-active-bg: var(--ud-primary);
	--bs-pagination-active-border-color: var(--ud-primary);
	--bs-pagination-border-color: var(--ud-line);
	--bs-pagination-hover-bg: var(--ud-primary-soft);
	--bs-pagination-hover-color: var(--ud-primary-dark);
	--bs-pagination-focus-bg: var(--ud-primary-soft);
	--bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--ud-primary-rgb), .12);
	margin-bottom: 0;
	gap: .25rem;
	flex-wrap: wrap;
}

.page-link {
	min-width: 38px;
	min-height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ud-radius-sm);
}

/* --- Alerts ---------------------------------------------------- */

.alert {
	border: 1px solid transparent;
	border-radius: var(--ud-radius);
	padding: .875rem 1rem;
}

.alert-info {
	background: var(--ud-primary-soft);
	border-color: rgba(var(--ud-primary-rgb), .2);
	color: var(--ud-primary-dark);
}

/* --- Empty state ----------------------------------------------- */

/* Never show a blank table — always say what to do next. */
.ud-empty {
	text-align: center;
	padding: 3rem 1.5rem;
	color: var(--ud-muted);
}

.ud-empty i {
	font-size: 2.75rem;
	color: var(--ud-line);
	display: block;
	margin-bottom: .75rem;
}

.ud-empty h6 {
	color: var(--ud-ink);
	font-weight: 600;
	margin-bottom: .35rem;
}

.ud-empty p {
	margin-bottom: 1rem;
	font-size: .925rem;
}

/* ============================================================
   5. APP SHELL
   ============================================================ */

/* --- Top bar --------------------------------------------------- */

.top-header .navbar {
	background: var(--ud-surface);
	border-bottom: 1px solid var(--ud-line);
	box-shadow: none;
}

.top-header .navbar .nav-link {
	color: var(--ud-ink);
	border-radius: var(--ud-radius);
}

.top-header .navbar .nav-link:hover {
	background: var(--ud-primary-soft);
	color: var(--ud-primary-dark);
}

/* --- Sidebar --------------------------------------------------- */

.sidebar-wrapper {
	background: var(--ud-surface);
	border-right: 1px solid var(--ud-line);
}

.sidebar-wrapper .sidebar-header {
	background: var(--ud-surface);
	border-bottom: 1px solid var(--ud-line);
	border-right: 1px solid var(--ud-line);
}

.sidebar-wrapper .sidebar-header .logo-text {
	color: var(--ud-primary);
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 0;
}

.sidebar-wrapper .metismenu a {
	color: var(--ud-ink);
	border-radius: var(--ud-radius);
	padding: .625rem .875rem;
	font-size: .925rem;
	min-height: 42px;
}

.sidebar-wrapper .metismenu a:hover,
.sidebar-wrapper .metismenu a:focus,
.sidebar-wrapper .metismenu a:active,
.sidebar-wrapper .metismenu .mm-active>a {
	background: var(--ud-primary-soft);
	color: var(--ud-primary-dark);
}

/* Current page — a left bar plus weight, not colour alone */
.sidebar-wrapper .metismenu a.ud-active {
	background: var(--ud-primary-soft);
	color: var(--ud-primary-dark);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--ud-primary);
}

.sidebar-wrapper .metismenu ul a.ud-active {
	font-weight: 600;
	color: var(--ud-primary-dark);
}

.sidebar-wrapper .metismenu .parent-icon i {
	color: var(--ud-primary);
}

html[lang="bn"] .sidebar-wrapper .metismenu a {
	line-height: 1.6;
}

/* --- Page header ----------------------------------------------- */

.ud-page-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem;
	padding-bottom: .875rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--ud-line);
}

.ud-page-header h1,
.ud-page-header .ud-page-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0;
	color: var(--ud-ink);
}

.ud-page-header .breadcrumb {
	margin: 0;
	font-size: .85rem;
	padding: 0;
	background: transparent;
}

/*
   The vendor theme shipped a Bootstrap build whose breadcrumb separator
   defaults to the theme author's own URL:

       content: var(--bs-breadcrumb-divider, "https://codervent.com/")

   So every breadcrumb printed "https://codervent.com/" between its items.
   Setting the variable overrides it without touching the vendor file.
*/
.breadcrumb {
	--bs-breadcrumb-divider: "›";
}

.breadcrumb-item+.breadcrumb-item::before {
	color: var(--ud-muted);
	padding-right: .5rem;
}

.breadcrumb-item+.breadcrumb-item {
	padding-left: .5rem;
}

.ud-page-header .ud-page-actions {
	margin-left: auto;
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}

.page-content {
	padding: 1.5rem;
}

@media (max-width: 767.98px) {
	.page-content {
		padding: 1rem;
	}
}

/* ============================================================
   6. UTILITIES
   ============================================================ */

.ud-num {
	font-variant-numeric: tabular-nums;
}

.ud-surface {
	background: var(--ud-surface);
}

.ud-canvas {
	background: var(--ud-canvas);
}

.ud-line {
	border-color: var(--ud-line) !important;
}

.ud-text-primary {
	color: var(--ud-primary) !important;
}

.ud-bg-primary {
	background-color: var(--ud-primary) !important;
	color: #fff !important;
}

.ud-bg-primary-soft {
	background-color: var(--ud-primary-soft) !important;
}

/* Screen-reader-only text, for icon-only controls in table rows */
.ud-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media print {

	.sidebar-wrapper,
	.top-header,
	.ud-page-actions,
	.no-print {
		display: none !important;
	}

	.page-content {
		padding: 0;
	}

	body {
		background: #fff;
	}
}

/* ============================================================
   7. CERTIFICATE FORM WIZARD
   Steps are shown/hidden at runtime by uniondesk-wizard.js; the
   markup itself is untouched, so the submitted payload is
   unchanged. Without JavaScript none of this applies and the
   form stays one long page.
   ============================================================ */

.ud-wizard-hidden {
	display: none !important;
}

.ud-wizard-nav {
	display: flex;
	gap: .25rem;
	overflow-x: auto;
	padding: .75rem;
	margin-bottom: 1.25rem;
	background: var(--ud-surface);
	border: 1px solid var(--ud-line);
	border-radius: var(--ud-radius-lg);
	box-shadow: var(--ud-shadow-sm);
}

.ud-wizard-tab {
	flex: 1 1 0;
	min-width: 132px;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem .7rem;
	border: 0;
	border-radius: var(--ud-radius);
	background: transparent;
	color: var(--ud-muted);
	font-size: .85rem;
	font-weight: 500;
	text-align: left;
	line-height: 1.35;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.ud-wizard-tab:hover {
	background: var(--ud-canvas);
}

.ud-wizard-num {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ud-canvas);
	border: 2px solid var(--ud-line);
	color: var(--ud-muted);
	font-weight: 700;
	font-size: .8rem;
}

.ud-wizard-tab.is-done {
	color: var(--ud-status-approved);
}

.ud-wizard-tab.is-done .ud-wizard-num {
	background: var(--ud-status-approved);
	border-color: var(--ud-status-approved);
	color: #fff;
}

.ud-wizard-tab.is-current {
	background: var(--ud-primary-soft);
	color: var(--ud-primary-dark);
	font-weight: 700;
}

.ud-wizard-tab.is-current .ud-wizard-num {
	background: var(--ud-primary);
	border-color: var(--ud-primary);
	color: #fff;
}

.ud-wizard-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ud-wizard-controls {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ud-line);
}

.ud-review-block {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--ud-line);
}

.ud-review-block:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

html[lang="bn"] .ud-wizard-tab {
	line-height: 1.6;
}

@media (max-width: 767.98px) {
	.ud-wizard-tab {
		min-width: 108px;
		font-size: .78rem;
	}

	.ud-wizard-name {
		display: none;
	}

	.ud-wizard-tab.is-current .ud-wizard-name {
		display: inline;
	}
}