/* AppShell.css — BEM conventions, Bootstrap handles most layout */

:root {
	/* ========== BASE FONT SIZE ========== */
	font-size: 16px;

	/* ========== BRAND COLORS (Custom) ========== */
	--color-azure-11: #111827;
	/* Dark text */
	--color-azure-20: #003366;
	/* Primary navy */
	--color-azure-30: #004d99;
	/* Hover navy */
	--color-blue-light: #e6f0ff;
	/* Light blue background */
	--color-gold: #ffce34;
	/* Accent gold */
	--color-error: var(--color-danger);
	/* Error/danger text; alias of --color-danger (#D80000) — matches .ErrorText/.ErrorSummary (Default.css) and CMS red (CmsContentSanitizer) */

	/* ========== STATUS + SURFACE TOKENS (single source of truth) ========== */
	/* Danger / error — #D80000 is the standard red everywhere (text, borders, solid fills) */
	--color-danger: #d80000;
	--color-danger-dark: #b30000;
	/* hover */
	--color-danger-darker: #a00000;
	/* active / pressed */
	--color-danger-bg: #fdeaea;
	/* light tint (outline hover) */
	/* Warning — Bootstrap amber family */
	--color-warning-bg: #fff3cd;
	--color-warning-border: #ffc107;
	--color-warning-text: #856404;
	/* Light-blue surfaces */
	--color-blue-lighter: #f0f6ff;
	--color-blue-border: #d1e3ff;
	/* Neutral lines + text */
	--color-border: #e5e7eb;
	--color-border-control: #ced4da;
	--color-text-muted: #6c757d;

	/* ========== BOOTSTRAP CSS VARIABLE OVERRIDES ========== */

	/* Typography */
	--bs-body-font-size: 1rem;
	--bs-body-font-family: 'Rethink Sans', sans-serif;
	--bs-body-color: #111827;
	--bs-body-bg: #fefefe;
	--bs-heading-color: inherit;

	/* Heading Sizes */
	--bs-h1-font-size: 2rem;
	--bs-h2-font-size: 1.5rem;
	--bs-h3-font-size: 1.25rem;
	--bs-h4-font-size: 1rem;
	--bs-h5-font-size: 0.875rem;
	--bs-h6-font-size: 0.75rem;

	/* Primary Color (Brand Navy) */
	--bs-primary: #003366;
	--bs-primary-rgb: 0, 51, 102;
	--bs-primary-text-emphasis: #001a33;
	--bs-primary-bg-subtle: #ccd9e6;
	--bs-primary-border-subtle: #99b3cc;

	/* Secondary Color */
	--bs-secondary: #6c757d;
	--bs-secondary-rgb: 108, 117, 125;

	/* Success Color */
	--bs-success: #198754;
	--bs-success-rgb: 25, 135, 84;

	/* Danger Color */
	--bs-danger: #d80000;
	--bs-danger-rgb: 216, 0, 0;
	--bs-danger-text-emphasis: #560000;
	--bs-danger-bg-subtle: #f7cccc;
	--bs-danger-border-subtle: #ef9999;
	--bs-form-invalid-color: #d80000;
	--bs-form-invalid-border-color: #d80000;

	/* Warning Color */
	--bs-warning: #ffc107;
	--bs-warning-rgb: 255, 193, 7;

	/* Info Color */
	--bs-info: #0dcaf0;
	--bs-info-rgb: 13, 202, 240;

	/* Light Color */
	--bs-light: #f8f9fa;
	--bs-light-rgb: 248, 249, 250;

	/* Dark Color */
	--bs-dark: #212529;
	--bs-dark-rgb: 33, 37, 41;

	/* Grays */
	--bs-gray-100: #f8f9fa;
	--bs-gray-200: #e9ecef;
	--bs-gray-300: #dee2e6;
	--bs-gray-400: #ced4da;
	--bs-gray-500: #adb5bd;
	--bs-gray-600: #6c757d;
	--bs-gray-700: #495057;
	--bs-gray-800: #343a40;
	--bs-gray-900: #212529;

	/* Border Radius */
	--bs-border-radius: 0.375rem;
	--bs-border-radius-sm: 0.25rem;
	--bs-border-radius-lg: 0.5rem;
	--bs-border-radius-xl: 1rem;
	--bs-border-radius-2xl: 2rem;
	--bs-border-radius-pill: 50rem;

	/* Border Width & Color */
	--bs-border-width: 1px;
	--bs-border-color: #e5e7eb;

	/* Box Shadow */
	--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

	/* Form Controls */
	--bs-form-control-bg: #fff;
	--bs-form-control-border-color: #ced4da;
	--bs-form-control-focus-border-color: #80b3d9;
	--bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(0, 51, 102, 0.25);

	/* Links */
	--bs-link-color: #003366;
	--bs-link-hover-color: #004d99;
	--bs-link-decoration: underline;
	--bs-link-hover-decoration: underline;

	/* ========== CUSTOM LAYOUT VARIABLES ========== */
	--font-body: 'Rethink Sans', sans-serif;
	--font-heading: 'Mulish', sans-serif;

	--sidebar-width: 320px;
	--topbar-height: 72px;
	--footer-height: 68px;

	--transition-speed: 0.25s;

	/* Custom Radius (for non-Bootstrap components) */
	--radius-sm: 0.25rem;
	/* 4px - buttons, small elements */
	--radius-md: 0.5rem;
	/* 8px - cards, panels */
	--radius-lg: 1rem;
	/* 16px - large containers */

	/* ========== EMAIL-SAFE VARIABLES ========== */
	/* Read by Emails/css/email.css and resolved to literal values at build time. Kept separate from
	   the variables above because email clients cannot use rem (Outlook renders via Word) and will
	   not load a webfont from a CDN, so these are px and carry a fallback chain. Additional tokens
	   rather than email overrides of the --bs-* ones: redefining those for email would leave two
	   values for one thing, free to drift apart. */
	--email-font-size-body: 16px;
	--email-font-size-heading: 20px;
	--email-font-size-small: 12px;
	--email-font-family-body: 'Rethink Sans', 'Segoe UI', Arial, sans-serif;
	--email-font-family-heading: 'Mulish', 'Segoe UI', Arial, sans-serif;
}

/* ========== CARD CUSTOMIZATION ========== */
.card {
	border-radius: 0.5rem;
	/* 8px rounded corners */
}

.card-body {
	background-color: #fefefe;
	border-radius: 0.5rem;
	/* 8px rounded corners to match card */
}

/* Preserve primary background color for bg-primary containers */
.bg-primary .card-body {
	background-color: var(--bs-primary);
}

/* ========== INPUT GROUP STYLING ========== */
/* Ensure input-group displays items inline and phone extensions stay on same line */
.input-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}

.input-group>.form-control {
	flex: 1 1 auto;
	min-width: 0;
}

.input-group-text {
	display: flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	white-space: nowrap;
}

/* ========== ASP.NET WebForms + Bootstrap Form Controls Fix ========== */
/* ASP.NET RadioButton and CheckBox controls render with extra wrapper spans,
   so we need to target the actual input elements inside .form-check divs */
.form-check input[type="radio"],
.form-check input[type="checkbox"] {
	float: left;
	margin-left: -1.5em;
}

.form-check label {
	padding-left: 0.5em;
}

/* Ensure ASP.NET-rendered radio buttons and checkboxes get proper Bootstrap styling */
.form-check>span>input[type="radio"],
.form-check>span>input[type="checkbox"] {
	width: 1em;
	height: 1em;
	margin-top: 0.25em;
	vertical-align: top;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border: 1px solid rgba(0, 0, 0, 0.25);
	appearance: none;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.form-check>span>input[type="radio"] {
	border-radius: 50%;
}

.form-check>span>input[type="checkbox"] {
	border-radius: 0.25em;
}

.form-check>span>input[type="radio"]:checked,
.form-check>span>input[type="checkbox"]:checked {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

.form-check>span>input[type="radio"]:checked {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check>span>input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check>span>input[type="radio"]:focus,
.form-check>span>input[type="checkbox"]:focus {
	border-color: #86b7fe;
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-check>span>input[type="radio"]:disabled,
.form-check>span>input[type="checkbox"]:disabled {
	pointer-events: none;
	filter: none;
	opacity: 0.5;
}

.form-check>span>label {
	display: inline-block;
	padding-left: 0.5em;
	cursor: pointer;
}


/* Override Bootstrap's default font stack */
body.appshell {
	font-family: var(--font-body);
	font-size: 1rem;
	background: var(--bs-gray-100);
	margin: 0;
	height: 100vh;
	overflow: hidden;
	text-align: left;
	/* override legacy Default.css body { text-align: center } */
}

body.appshell,
body.appshell>form,
body.appshell .shell,
body.appshell .shell__content {
	text-align: left;
}

body.appshell>form {
	height: 100%;
	overflow: hidden;
}

@media (max-width: 991.98px) {

	body.appshell,
	body.appshell>form {
		height: auto;
		overflow: auto;
		overflow-x: hidden;
	}
}

body.appshell h1,
body.appshell h2,
body.appshell h3,
body.appshell h4,
body.appshell h5,
body.appshell h6 {
	font-family: var(--font-heading);
}

/* ===== SHELL ===== */
.shell {
	display: grid;
	grid-template-columns: var(--sidebar-width) 1fr;
	grid-template-rows: var(--topbar-height) minmax(0, 1fr) var(--footer-height);
	grid-template-areas:
		"sidebar topbar"
		"sidebar content"
		"sidebar footer";
	height: 100vh;
	transition: grid-template-columns var(--transition-speed) ease;
}

.shell--collapsed {
	grid-template-columns: 72px 1fr;
}

.shell--public {
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr var(--footer-height);
	grid-template-areas:
		"topbar"
		"content"
		"footer";
	height: auto;
	min-height: 100vh;
	overflow: visible;
}

.shell--public+style,
body.appshell:has(.shell--public) {
	height: auto;
	overflow: auto;
}

body.appshell:has(.shell--public)>form {
	height: auto;
	overflow: auto;
}

/* ===== TOPBAR ===== */
.topbar {
	grid-area: topbar;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30px;
	background: #fff;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	z-index: 100;
}

.topbar__title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.topbar__title-icon {
	color: var(--color-azure-20);
	font-size: 1.5rem;
	display: flex;
	align-items: center;
}

.topbar__title-text {
	font-weight: 800;
	font-size: 1.5rem;
	margin: 0;
}

.topbar__actions {
	display: flex;
	align-items: center;
	gap: 22px;
	height: 100%;
}

.topbar__user {
	background: var(--color-blue-light);
	border: 1.5px solid var(--color-blue-light);
	padding: 10px 22px;
	border-radius: 10px;
	font-family: var(--font-heading);
	font-weight: 700;
	white-space: nowrap;
}

.topbar__cart {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	gap: 2px;
}

.topbar__cart:hover {
	color: var(--color-azure-30);
	text-decoration: none;
}

.topbar__cart-icon-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-size: 1.375rem;
	padding-right: 12px;
}

.topbar__cart-badge {
	position: absolute;
	top: -12px;
	right: 0;
	min-width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffc107;
	color: var(--color-azure-11);
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 700;
	font-family: var(--font-heading);
	padding: 0 5px;
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
	line-height: 1;
}

.topbar__signout {
	padding: 10px 28px;
	background: var(--color-azure-20);
	color: #fff !important;
	font-family: var(--font-heading);
	font-weight: 700;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
}

.topbar__signout:hover {
	background: var(--color-azure-30);
	color: #fff !important;
}

.topbar__brand {
	display: none;
	align-items: center;
	gap: 10px;
}

/* Seal is an SVG (Content/img/bmv-seal.svg) with its own circular edge and a thin
   transparent margin in the viewBox — contain (not cover) keeps the full ring in frame.
   Same treatment on .sidebar__logo, .public-header__logo and .login-card__emblem img. */
.topbar__brand-logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.topbar__brand-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.3;
}

.topbar__brand-sub {
	font-size: 0.75rem;
	color: var(--bs-gray-600);
	display: block;
}

.shell--collapsed .topbar__brand {
	display: flex;
	margin-right: 24px;
}

.topbar__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	border-radius: 8px;
	cursor: pointer;
	color: var(--color-azure-20);
	font-size: 20px;
	/* margin-right: 12px; */
}

.topbar__toggle:hover {
	background: var(--color-blue-light);
}

/* ===== USER PROFILE DROPDOWN ===== */
.topbar__profile-dropdown {
	display: flex;
	align-items: center;
}

.topbar__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--color-azure-20);
	color: #fff;
	border: 2px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
}

.topbar__avatar:hover,
.topbar__avatar:focus {
	background-color: var(--color-azure-30);
	outline: none;
}

.topbar__avatar-initials {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.topbar__dropdown-menu {
	min-width: 260px;
	padding: 0;
	margin-top: 12px;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--bs-gray-200);
	overflow: hidden;
}

.topbar__dropdown-header {
	padding: 20px 20px 16px 20px;
	background: linear-gradient(180deg, var(--bs-gray-50) 0%, #fff 100%);
	border-bottom: 1px solid var(--bs-gray-200);
}

.topbar__dropdown-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--color-azure-11);
	margin-bottom: 4px;
	line-height: 1.3;
}

.topbar__dropdown-email {
	font-size: 0.875rem;
	color: var(--bs-gray-600);
	word-break: break-word;
	line-height: 1.4;
}

.topbar__dropdown-item,
.topbar__dropdown-item:link,
.topbar__dropdown-item:visited,
.topbar__dropdown-item:active,
.topbar__dropdown-signout,
.topbar__dropdown-signout:link,
.topbar__dropdown-signout:visited,
.topbar__dropdown-signout:active {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	color: var(--color-azure-30);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	transition: all 0.2s ease;
	text-decoration: none;
}

.topbar__dropdown-item:hover,
.topbar__dropdown-signout:hover {
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	text-decoration: none;
}

.topbar__dropdown-item i,
.topbar__dropdown-signout i {
	font-size: 1.125rem;
}

/* ===== CUSTOMER SELECTOR ===== */
.topbar__customer-selector {
	display: flex;
	align-items: center;
}

.topbar__customer-label {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: 0.9375rem;
}

.topbar__customer-prefix {
	color: var(--bs-gray-700);
	font-weight: 500;
}

.topbar__customer-name {
	color: var(--color-azure-11);
	font-weight: 600;
}

.topbar__customer-icon-mobile {
	display: none;
	font-size: 1rem;
	color: var(--bs-gray-500);
}

/* ===== SIDEBAR ===== */
.sidebar {
	grid-area: sidebar;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 4px 0 25px -5px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	z-index: 200;
	transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
}

.shell--collapsed .sidebar {
	overflow: visible;
}

.shell--collapsed .sidebar__header {
	padding: 14px 8px;
	margin: 12px 8px 0;
	background: transparent;
}

.shell--collapsed .sidebar__logo,
.shell--collapsed .sidebar__brand-name,
.shell--collapsed .sidebar__brand-sub {
	display: none;
}

.shell--collapsed .sidebar__nav {
	padding: 16px 8px;
	align-items: center;
}

.shell--collapsed .sidebar__nav-item {
	justify-content: center;
	padding: 12px;
	width: 48px;
	height: 48px;
}

.shell--collapsed .sidebar__nav-item span {
	display: none;
}

.shell--collapsed .sidebar__nav-item i {
	margin-right: 0;
}

.shell--collapsed .sidebar__subnav {
	display: none !important;
}

.shell--collapsed .sidebar__footer {
	padding: 12px 8px;
}

.shell--collapsed .sidebar__message-btn span {
	display: none;
}

.shell--collapsed .sidebar__message-btn {
	justify-content: center;
	padding: 12px;
}

.sidebar__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--color-blue-light);
	border-radius: 10px;
	margin: 12px 16px 0;
}

.sidebar__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	border-radius: 8px;
	cursor: pointer;
	color: var(--color-azure-20);
	font-size: 18px;
}

.sidebar__toggle:hover {
	background: #fff;
}

.sidebar__logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.sidebar__brand-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.4;
}

.sidebar__brand-sub {
	font-size: 0.85rem;
	color: var(--bs-gray-700);
}

/* Sidebar nav */
.sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 16px;
	flex: 1;
	overflow-y: auto;
}

.sidebar__nav-item {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	margin: 3px 0;
	border-radius: 8px;
	text-decoration: none;
	color: var(--color-azure-20);
	font-weight: 500;
	font-size: 0.95rem;
	transition: background 0.15s, color 0.15s;
}

.sidebar__nav-item span {
	text-align: left;
}

.sidebar__nav-item i {
	width: 24px;
	min-width: 24px;
	text-align: center;
	margin-right: 8px;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.sidebar__nav-item:hover {
	background: var(--color-blue-light);
	color: var(--color-azure-20);
}

.sidebar__nav-item--active {
	background: var(--color-azure-20);
	color: #fff !important;
}

.sidebar__nav-item--active i {
	color: #fff !important;
}

.sidebar__nav-item--active:hover {
	background: var(--color-azure-30);
	color: #fff !important;
}

/* Sub-navigation: rendered open only for the current page's section (no client-side accordion),
   so reaching a sub-page always goes through the section's landing page first. */
.sidebar__subnav {
	display: none;
}

.sidebar__subnav--expanded {
	display: block;
}

.sidebar__subnav-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 28px;
	background: var(--color-blue-light);
	border-radius: 8px;
	margin-top: 2px;
}

.sidebar__subnav a {
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--bs-gray-700);
	text-decoration: none;
	text-align: left;
	padding: 4px 0;
}

.sidebar__subnav a:hover {
	color: var(--color-azure-20);
}

.sidebar__subnav a.sidebar__subnav-link--active {
	font-weight: 700;
	color: var(--color-azure-20);
}

/* EXPRESS-mode disabled nav (MYBMV-184) — visible but grayed & non-clickable,
   matching legacy Utility.DisableLink (HyperLink.Enabled=False). */
.sidebar__nav-item--disabled,
.sidebar__subnav a.sidebar__subnav-link--disabled {
	color: #808080 !important;
	opacity: 0.6;
	pointer-events: none;
	cursor: default;
}

.sidebar__nav-item--disabled i {
	color: #808080 !important;
}

/* Sidebar footer */
.sidebar__footer {
	padding: 24px;
	margin-top: auto;
}

.sidebar__message-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px 16px;
	background: #fcfcfc;
	border: 1.5px solid #e6e6e6;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(24, 24, 28, 0.1);
	font-family: var(--font-heading);
	font-size: inherit;
	font-weight: 700;
	color: #2f2f2f;
	text-decoration: none;
	cursor: pointer;
}

/* Hover matches the sidebar nav items (subtle blue wash + navy text/icon)
   instead of the global anchor-red this button used to inherit as an <a>. */
.sidebar__message-btn:hover {
	border-color: var(--color-azure-30);
	background: var(--color-blue-light);
	color: var(--color-azure-20);
}

/* ===== CONTENT ===== */
.shell__content {
	grid-area: content;
	padding: 2rem;
	overflow-y: auto;
	overflow-x: hidden;
	text-align: left;
	background: var(--color-blue-light);
	min-height: 0;
}

/* ===== FOOTER ===== */
.shell__footer {
	grid-area: footer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-azure-11);
	color: #fff;
	font-size: 0.9rem;
	padding: 1rem;
	gap: 1rem;
	position: relative;
}

.footer__version {
	position: absolute;
	right: 1rem;
	font-size: 0.75rem;
	opacity: 0.7;
}

/* Below 992px the shell sizes the footer row to "auto" (see the RESPONSIVE shell rules), so
   the footer is only as tall as its content and no longer matches --footer-height, which the
   fixed action-button bar sits on (bottom: var(--footer-height)). Pin the footer to the
   variable so the bar and the footer meet exactly instead of leaving a gap. */
@media (max-width: 991.98px) {
	.shell__footer {
		box-sizing: border-box;
		height: var(--footer-height);
	}
}

/* On narrow screens the footer is cut down to a single "(c) year Indiana Bureau of Motor
   Vehicles." line: the version tag and the "official website" tagline are hidden. The
   footer row height is a variable that the fixed action-button bar also sits on
   (bottom: var(--footer-height)), so shrinking it here keeps the bar flush against the
   shorter footer instead of floating above a gap. */
@media (max-width: 767.98px) {
	:root {
		--footer-height: 40px;
	}

	.shell__footer {
		padding: 0 1rem;
		font-size: 0.8rem;
		line-height: 1.3;
		text-align: center;
	}

	.footer__version,
	.footer__tagline {
		display: none;
	}
}

/* ===== PUBLIC HEADER ===== */
.public-header {
	grid-area: topbar;
}

.public-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 40px;
	background: var(--color-azure-20) url('../img/seal-bg-image.png') center center / auto 100% no-repeat;
	color: #fff;
}

.public-header__brand {
	display: flex;
	align-items: center;
	gap: 16px;
}

.public-header__logo {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.public-header__brand-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 2rem;
	color: #fff;
	line-height: 1.3;
}

.public-header__brand-sub {
	font-size: 0.875rem;
	color: #fff;
	display: block;
	margin-top: 4px;
}

.public-header__help {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: #fff;
	position: relative;
	z-index: 1;
}

.public-header__help-icon {
	font-size: 0.875rem;
	color: #fff;
}

.public-header__phone {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	white-space: nowrap;
}

.public-header__phone:hover {
	opacity: 0.85;
}

/* MYBMV-234: Contact Us link that replaces the phone number in the header. Styled to
   match the sidebar Message Us button (.sidebar__message-btn) — same light chrome and
   blue-wash hover — but sized to content rather than full width for the header.
   Scoped under .public-header so it out-specifies Default.css's a:link (0,1,1) rule,
   which otherwise forces the anchor blue and underlined in the resting state. */
.public-header .public-header__contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: #fcfcfc;
	border: 1.5px solid #e6e6e6;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(24, 24, 28, 0.1);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.875rem;
	color: #2f2f2f;
	text-decoration: none;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.public-header .public-header__contact:hover,
.public-header .public-header__contact:focus {
	border-color: var(--color-azure-30);
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	text-decoration: none;
}

.public-header__address {
	background: #002855;
	border-top: 1px solid #004080;
	color: #fff;
	text-align: center;
	padding: 16px 40px;
	font-size: 0.8rem;
}

/* MYBMV-234: the address strip no longer carries a default address — it exists only
   to host redirect-reason notices. Hide it until RedirectNotice adds the --message
   modifier, at every width, so an empty navy bar never shows. */
.public-header__address:not(.public-header__address--message) {
	display: none;
}

/* ===== REDIRECT-REASON MESSAGE BAR =====
   The address strip repurposed as a full-width login notice (RedirectNotice.ascx, bar channel). Solid
   severity fills with white text keep the visual weight of the navy strip while staying non-blocking. */
.public-header__address--message {
	padding: 0;
	text-align: left;
	font-size: 0.95rem;
}

.public-header__bar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 32px;
	line-height: 1.5;
}

.public-header__bar-icon {
	flex: 0 0 auto;
	font-size: 1.2rem;
}

/* No flex-grow: the close button stays right beside the text, and the whole group is centered together. */
.public-header__bar-text {
	flex: 0 1 auto;
}

/* Title sits inline with the body but stays visually distinct via weight + a small gap. */
.public-header__bar-title {
	font-weight: 700;
	margin-right: 8px;
}

/* Circular, chrome-free close button (replaces the browser-default button look). */
.public-header__bar-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.8;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.public-header__bar-close:hover {
	background: rgba(255, 255, 255, 0.18);
	opacity: 1;
}

.public-header__bar-close:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 2px;
	opacity: 1;
}

.public-header__address--info {
	background: #0b5cab;
	border-top-color: #0b5cab;
}

.public-header__address--warning {
	/* Darkened from #cf6c1b so white bar text clears WCAG AA for normal text
	   (~4.56:1; #cf6c1b was only ~3.6:1). */
	background: #b65e16;
	border-top-color: #b65e16;
}

.public-header__address--error {
	background: var(--color-danger-dark);
	border-top-color: var(--color-danger-dark);
}

.public-header__address--success {
	background: #157347;
	border-top-color: #157347;
}

@media (max-width: 767px) {
	.public-header__bar-inner {
		padding: 14px 18px;
	}
}

/* ===== PAGE UTILITIES ===== */

.service-tile {
	transition: background 0.15s, box-shadow 0.15s;
	/* The tile is a flex-column .card stretched to full row height by h-100. Center its
	   icon+text vertically so they stay centered when a taller sibling in the row (e.g.
	   the "Other services" card) grows the tile beyond its content height. */
	justify-content: center;
}

.service-tile:hover {
	background: var(--color-blue-light) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Keep H3 headings in card links styled with primary color on hover */
a.card:hover h3 {
	color: var(--bs-primary);
}

.border-dashed {
	border: 1px dashed var(--color-azure-30) !important;
}

/* Remove text-decoration from button-styled links */
.topbar__signout,
.topbar__cart,
.sidebar__message-btn,
.btn,
.btn-cart-primary {
	text-decoration: none !important;
}

/* Sidebar nav links — no underline */
.sidebar__nav-item,
.sidebar__subnav a {
	text-decoration: none !important;
}

/* Brand color overrides - Bootstrap CSS variables handle most of this now */

/* Custom hover state for primary buttons (darker navy) */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--color-azure-30) !important;
	border-color: var(--color-azure-30) !important;
}

/* Light button hover (custom accent) */
.btn-light:hover {
	background-color: var(--color-blue-light);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
	.shell {
		grid-template-columns: 1fr;
		grid-template-rows: var(--topbar-height) minmax(0, 1fr) auto;
		grid-template-areas:
			"topbar"
			"content"
			"footer";
	}

	/* Public pages have no fixed-height topbar chrome: the public-header stacks its
	   brand and help vertically on mobile, so the topbar row must grow with content.
	   Without this it is clamped to --topbar-height (72px) and the navy header
	   background clips, dropping the help line onto the page background. */
	.shell--public {
		grid-template-rows: auto 1fr auto;
	}

	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		transform: translateX(-100%);
		opacity: 0;
		pointer-events: none;
		z-index: 1050;
	}

	.shell--open .sidebar {
		transform: translateX(0);
		opacity: 1;
		pointer-events: auto;
	}

	.topbar__brand {
		display: flex;
	}

	.topbar__toggle {
		display: flex;
	}

	.shell--open .topbar__toggle {
		display: none;
	}

	.topbar__user {
		display: none;
	}

	.topbar__cart .topbar__cart-text {
		display: none;
	}

	.topbar__signout {
		padding: 8px 14px;
		font-size: 0.85rem;
	}

	.topbar__title-icon {
		display: none;
	}

	.topbar__title-text {
		display: none;
	}
}

@media (max-width: 576px) {
	.topbar {
		padding: 0 12px;
	}

	.topbar__actions {
		gap: 12px;
	}

	.shell__content {
		padding: 16px;
	}

	.public-header__top {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 20px;
		/* Drop the seal watermark on mobile. On the taller stacked header the
		   auto 100% sizing crops the seal at the top edge, which reads as the
		   header overflowing; solid navy keeps the brand text crisp. */
		background-image: none;
	}

	.public-header__brand {
		gap: 12px;
	}

	.public-header__logo {
		width: 48px;
		height: 48px;
	}

	.public-header__brand-name {
		font-size: 1.5rem;
		line-height: 1.2;
	}

	.public-header__help {
		justify-content: center;
		width: 100%;
	}

	.public-header__address {
		padding: 12px 20px;
	}

	.shell__content {
		overflow-y: auto;
	}

	/* Customer name display (MYBMV-295) is non-interactive; no purpose at this width. */
	.topbar__customer-selector {
		display: none;
	}

	/* Force all content to respect viewport width */
	.shell__content * {
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* ...except Bootstrap rows. A .row is meant to be wider than its container: its negative
	   side margins pull it out by half a gutter on each side so the columns' padding lines up
	   with the content edge. Capped at 100%, the left margin still pulls it left but the row
	   can't grow to match, so stacked multi-column layouts sat off-centre (half a gutter too
	   far left, a gutter and a half short on the right). */
	.shell__content .row {
		max-width: none !important;
	}

	.shell__content table {
		width: 100% !important;
		table-layout: fixed;
	}

	.shell__content input[type="text"],
	.shell__content input[type="password"],
	.shell__content input[type="email"],
	.shell__content input[type="tel"],
	.shell__content input[type="number"],
	.shell__content select,
	.shell__content textarea {
		width: 100% !important;
	}

	.shell__content label,
	.shell__content span,
	.shell__content td,
	.shell__content th,
	.shell__content p {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.shell__content td,
	.shell__content th.special-address__label {
		display: block;
		width: 100% !important;
	}

	.shell__content .card-body {
		padding: 16px !important;
	}
}

/* Stacked columns get breathing room. When a multi-column row collapses to one column below
   its breakpoint, the next column sat flush against the one above it unless the row carries a
   Bootstrap vertical gutter. Each column after the first gets a top margin while it is
   stacked; the media queries match Bootstrap's breakpoints, so the spacing turns off exactly
   when the columns sit side by side again. Rows with their own gutter (g-*, gy-*, matched
   after a space so bg-* doesn't count) keep it, and so do columns already spaced by an mt-*
   or a preceding mb-* utility. */
@media (max-width: 575.98px) {
	.shell__content .row:not([class*=" g-"]):not([class*=" gy-"])>[class*="col-sm-"]+[class*="col-sm-"]:not([class*="mt-"]):not(:is(.mb-1, .mb-2, .mb-3, .mb-4, .mb-5) + *) {
		margin-top: 0.75rem;
	}
}

@media (max-width: 767.98px) {
	.shell__content .row:not([class*=" g-"]):not([class*=" gy-"])>[class*="col-md-"]+[class*="col-md-"]:not([class*="mt-"]):not(:is(.mb-1, .mb-2, .mb-3, .mb-4, .mb-5) + *) {
		margin-top: 0.75rem;
	}
}

@media (max-width: 991.98px) {

	/* Section-level columns (TwoColumnCart's main card + sidebar card) stack as separate
	   cards, so they get card spacing rather than field spacing. */
	.shell__content .row>[class*="col-lg-"]+[class*="col-lg-"] {
		margin-top: 1.5rem;
	}
}

@media (max-width: 1199.98px) {
	.shell__content .row:not([class*=" g-"]):not([class*=" gy-"])>[class*="col-xl-"]+[class*="col-xl-"]:not([class*="mt-"]):not(:is(.mb-1, .mb-2, .mb-3, .mb-4, .mb-5) + *) {
		margin-top: 0.75rem;
	}
}


/* ===== UTILITY CLASSES ===== */

/* Colors */
.u-text-navy {
	color: var(--color-azure-20);
}

.u-text-navy-light {
	color: var(--color-azure-20);
}

.u-text-gold {
	color: var(--color-gold);
}

.u-text-danger {
	color: var(--color-error);
}

.u-text-muted {
	color: var(--bs-gray-600);
}

/* Typography */
.u-heading {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-azure-20);
}

.u-heading--lg {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--color-azure-20);
}

.u-heading--md {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-azure-20);
}

.u-text-sm {
	font-size: 0.9rem;
}

.u-text-xs {
	font-size: 0.85rem;
}

.u-fw-600 {
	font-weight: 600;
}

/* Buttons */
/* Layout */
.u-hidden {
	display: none;
}

.u-popup {
	position: absolute;
	background: #fff;
	padding: 16px;
	border: 1px solid var(--color-border-control);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 1000;
}

/* Section heading — used on card titles */
.u-section-heading {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-azure-20);
	margin-bottom: 0.75rem;
}


/* ===== REQUIRED FIELD INDICATOR — replace old pipe image with asterisk ===== */

.shell img[id*="imgRequireField"] {
	display: none;
}

.required-indicator {
	/* #dc3545 is only 4.17-4.3:1 on the tinted backgrounds these asterisks sit on; fails AA. --color-error is ~4.6:1 there. */
	color: var(--color-error);
	font-weight: 700;
	font-size: 1rem;
}

/* Required-field legend (MYBMV-501): one look wherever RequiredFieldLegend.ascx sits, wrapped or not —
   left-aligned, read before the fields; same color as the surrounding instruction text (gray read as
   de-emphasized), normal weight, field-error size. Overrides Default.css Span.RequiredFieldLegend
   (black, bold, 12px). */
.shell .RequiredFieldLegend,
.shell .RequiredFieldLegend * {
	color: inherit;
	font-weight: 400;
	font-size: 0.875rem;
}

/* ===== GLOBAL FORM STYLING — modernize all inputs in redesigned pages ===== */

/* Form row labels (questions) — lighter than section headings for hierarchy */
.shell .card-body label,
.shell .card-body .form-label {
	font-weight: 500;
	color: var(--color-azure-20);
	font-size: 0.9rem;
}

.shell input[type="text"],
.shell input[type="password"],
.shell input[type="email"],
.shell input[type="tel"],
.shell input[type="number"],
.shell input[type="date"],
.shell select,
.shell textarea {
	width: 100%;
	max-width: 100%;
	padding: 8px 12px;
	font-size: 0.9rem;
	border: 1px solid var(--color-border-control);
	border-radius: 6px;
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.shell input[type="text"]:focus,
.shell input[type="password"]:focus,
.shell input[type="email"]:focus,
.shell input[type="tel"]:focus,
.shell input[type="number"]:focus,
.shell input[type="date"]:focus,
.shell select:focus,
.shell textarea:focus {
	border-color: var(--color-azure-30);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 77, 153, 0.1);
}

/* Read-only values shown as text (Bootstrap .form-control-plaintext, MYBMV-461): drop the input box
   the rules above draw, but keep the focus ring so keyboard users can still see where they are. */
.shell input.form-control-plaintext,
.shell input.form-control-plaintext:focus {
	border-color: transparent;
	background-color: transparent;
	padding-left: 0;
	padding-right: 0;
}

/* Inline field errors (MYBMV-473) — validators with .field-error show their message under the input;
   field-validation.js marks the input .field-invalid + aria-invalid while any of them fails.
   Block so margin-top applies (MYBMV-501): server-failed validators render with no inline style; hidden
   ones keep their inline display:none; field-validation.js swaps WebUIValidation's inline "inline" for block. */
.shell .field-error {
	display: block;
	font-size: 0.875rem;
	color: var(--color-danger);
	margin-top: 0.25rem;
}

.shell .field-error::before {
	content: "\f057"; /* fa-circle-xmark — the site's error icon (modal-helpers.js, RedirectNotice.ascx) */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-right: 0.375rem;
}

.shell input.field-invalid,
.shell select.field-invalid,
.shell textarea.field-invalid,
.shell input.field-invalid:focus,
.shell select.field-invalid:focus,
.shell textarea.field-invalid:focus {
	border-color: var(--color-danger);
}

.shell input.field-invalid:focus,
.shell select.field-invalid:focus,
.shell textarea.field-invalid:focus {
	box-shadow: 0 0 0 3px rgba(216, 0, 0, 0.15);
}

/* Address user controls — override inline styles and table layout */
.shell [id*="uctLegalAddress"] td.FormLabel,
.shell [id*="uctMailingAddress"] td.FormLabel,
.shell [id*="uctLegalSRAddress"] td.FormLabel,
.shell [id*="uctMailingSRAddress"] td.FormLabel {
	display: none;
}

/* (Legacy 400px max-width caps on inputs/selects inside the address user controls
   were removed when the user controls were rewritten to a row/col Bootstrap layout.
   Width is now handled by .form-control + the page's own .cert-authority-page rules.) */

.shell [id*="uctLegalAddress"] table td,
.shell [id*="uctMailingAddress"] table td,
.shell [id*="uctLegalSRAddress"] table td,
.shell [id*="uctMailingSRAddress"] table td {
	padding: 4px 0;
}


/* ===== THEME OVERRIDE — neutralize old ASP.NET skin classes ===== */

.shell .GridView_Default {
	width: 100% !important;
	/* border-collapse must be 'separate' for border-radius (and a clean outer
	   border) to apply. The GridView renders an inline style="border-collapse:collapse"
	   plus legacy border="1" rules="all" attributes, so this needs !important to
	   win, and the cell borders are zeroed below. overflow:hidden (on the
	   :not(table table) rule) clips the square header corners. */
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border: none;
}

/* Neutralize the App_Themes skin's legacy border="1" rules="all" cell borders so
   forcing separate borders above doesn't surface gridlines — only the rounded
   outer .GridView_Default border remains. (The renew grid uses .grdRegistration,
   not .GridView_Default, so its intentional row separators are unaffected.) */
.shell .GridView_Default td,
.shell .GridView_Default th {
	border: 0;
	vertical-align: middle;
	/* Left-align every data-grid header and cell for one consistent look across
	   the module. !important overrides the per-column align="center"/"right"
	   attributes the App_Themes skin and individual grids emit. */
	text-align: left !important;
}

/* Rounded corners + a subtle edge for data tables — GridViews and Bootstrap
   .table. Applied to top-level tables only; nested tables keep square corners.
   The border gives the table definition against the white section/card
   background (its white body rows would otherwise bleed into the card). */
.shell .GridView_Default:not(table table),
.shell .table:not(table table) {
	border-radius: 0.5rem;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--bs-gray-400);
}

.shell .GridView_HeaderStyle_Default {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.shell .GridView_HeaderStyle_Default th {
	background: var(--color-azure-20);
	color: #fff;
	padding: 12px 16px;
	border: none;
}

.shell .GridView_RowStyle_Default td,
.shell .GridView_AlternatingRowStyle_Default td {
	padding: 12px 16px;
	vertical-align: middle;
	font-size: 0.9rem;
	background: #fff;
}

.shell .GridView_AlternatingRowStyle_Default td {
	background: var(--bs-gray-100);
}

/* Override the inline style="background-color:Gray;" emitted by the shared
   App_Themes skin (AlternatingRowStyle BackColor="Gray"). The skin is shared
   with legacy pages, so we neutralize it here in redesign scope only.
   Need !important to beat the inline-style attribute. */
.shell .GridView_RowStyle_Default {
	background-color: transparent !important;
}

.shell .GridView_AlternatingRowStyle_Default {
	background-color: var(--bs-gray-100) !important;
}

.shell .GridView_RowStyle_Default:hover td,
.shell .GridView_AlternatingRowStyle_Default:hover td {
	background: var(--color-blue-light);
}


/* ===== RENEW PAGE ===== */

/* CMS content block — style raw HTML from service */
.renew-page__cms-content p {
	margin-bottom: 0.75rem;
	line-height: 1.6;
	font-size: 0.95rem;
}

.renew-page__cms-content p:first-child strong,
.renew-page__cms-content p:first-child b {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--color-azure-20);
}

.renew-page__cms-content p strong,
.renew-page__cms-content p b {
	/* display: block; */
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--color-azure-20);
	/* color: var(--color-gold); */
	/* margin-top: 1.25rem; */
	margin-bottom: 0.35rem;
}

/* GridView responsive overrides */
.renew-page__grid-wrapper .grdRegistration {
	width: 100% !important;
	border-collapse: collapse;
	border-radius: 8px;
	overflow: hidden;
}

.renew-page__grid-wrapper .grdRegistration th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.renew-page__grid-wrapper .grdRegistration td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: middle;
	font-size: 0.9rem;
}

.renew-page__grid-wrapper .grdRegistration tr:hover td {
	background: var(--color-blue-light);
}

.renew-page__grid-wrapper .grdRegistration a {
	color: var(--color-azure-30);
	font-weight: 500;
}

/* Address panels — side by side on desktop */
.renew-page__grid-wrapper [id*="upRenewGrid"]>div {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.renew-page__grid-wrapper [id*="upRenewGrid"]>div>br {
	display: none;
}

.renew-page__grid-wrapper [id*="pnlLegalAddrInfo"],
.renew-page__grid-wrapper [id*="pnlDefaultMailingAddress"] {
	flex: 1 1 45%;
	min-width: 280px;
	background: #f8f9fa;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 0;
}

.renew-page__grid-wrapper [id*="pnlLegalAddrInfo"] table,
.renew-page__grid-wrapper [id*="pnlDefaultMailingAddress"] table {
	width: 100%;
}

.renew-page__grid-wrapper [id*="pnlLegalAddrInfo"] table td:first-child,
.renew-page__grid-wrapper [id*="pnlDefaultMailingAddress"] table td:first-child {
	white-space: nowrap;
	padding-right: 12px;
	font-weight: 600;
}

.renew-page__grid-wrapper [id*="pnlLegalAddrInfo"] table td,
.renew-page__grid-wrapper [id*="pnlDefaultMailingAddress"] table td {
	padding: 4px 0;
}

/* Popup modal restyle */
.renew-page__grid-wrapper .popup {
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	border: none;
	max-width: 600px;
}

.renew-page__grid-wrapper .popupTitle {
	background: var(--color-azure-20);
	color: #fff;
	padding: 16px 20px;
	border-radius: 12px 12px 0 0;
	margin: 0;
	font-family: var(--font-heading);
}

.renew-page__grid-wrapper .popupContent {
	padding: 20px;
}

.renew-page__grid-wrapper .popupCloseButton {
	background: var(--color-azure-20);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 24px;
	margin: 12px 20px 20px;
	cursor: pointer;
}

.renew-page__grid-wrapper .popupCloseText {
	color: var(--color-azure-20);
	font-weight: 700;
	text-decoration: none;
	font-size: 1.25rem;
}

/* Checkbox alignment in grid (multi-line label text) */
.renew-page__grid-wrapper input[type="checkbox"] {
	vertical-align: top;
}

.renew-page__grid-wrapper .grdRegistration input[type="checkbox"] {
	vertical-align: top;
	margin-top: 3px;
}

.renew-page__grid-wrapper table:not(table table)>tbody>tr>td div:not(#applicationReceipt),
.renew-page__grid-wrapper table:not(table table)>tr>td div:not(#applicationReceipt) {
	margin-bottom: 0.5rem
}

/* Responsive: stack address panels on mobile */
@media (max-width: 767.98px) {

	.renew-page__grid-wrapper [id*="pnlLegalAddrInfo"],
	.renew-page__grid-wrapper [id*="pnlDefaultMailingAddress"] {
		flex: 1 1 100%;
		min-width: 100%;
	}

	.renew-page__grid-wrapper .grdRegistration th,
	.renew-page__grid-wrapper .grdRegistration td {
		padding: 8px 10px;
		font-size: 0.8rem;
	}

	/* The renew grid's "Your Vehicles/Watercraft" cell holds many stacked divs
       (VIN, Year, Make, Model, Plate, Color, Reg County/Township/Municipality,
       links, panels). The generic responsive-collapse layout uses
       `display: flex; justify-content: space-between` on each td, which
       spreads those inner divs horizontally. Override to column layout on the
       renew grid: label sits on top, inner content stacks vertically. */
	.renew-page__grid-wrapper table:not(table table)>tbody>tr>td,
	.renew-page__grid-wrapper table:not(table table)>tr>td {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.renew-page__grid-wrapper table:not(table table)>tbody>tr>td::before,
	.renew-page__grid-wrapper table:not(table table)>tr>td::before {
		flex: 0 0 auto;
		margin-bottom: 4px;
	}
}


/* ===== SEARCH OTHER REGISTRATIONS PAGE ===== */

.search-reg-page__type-toggle {
	display: flex;
	align-items: center;
	/* Input-to-label gap; the gap between the two options is the label margin below. */
	gap: 0.375rem;
	margin-bottom: 0.5rem;
}

.search-reg-page__type-toggle label {
	font-weight: 500;
	cursor: pointer;
}

.search-reg-page__type-toggle label:not(:last-child) {
	margin-right: 1rem;
}

.search-reg-page .form-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-azure-20);
}

.search-reg-page .btn-primary {
	background: var(--color-azure-20);
	border-color: var(--color-azure-20);
}

.search-reg-page .btn-primary:hover {
	background: var(--color-azure-30);
	border-color: var(--color-azure-30);
}


/* ===== RENEWAL STATUS PAGE ===== */

.renewal-status-page__grid-wrapper table {
	width: 100% !important;
	border-collapse: collapse;
}

.renewal-status-page__grid-wrapper table th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.renewal-status-page__grid-wrapper table td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: middle;
	font-size: 0.9rem;
}

.renewal-status-page__grid-wrapper table tr:hover td {
	background: var(--color-blue-light);
}


/* ===== REGISTRATION TRANSACTION HISTORY PAGE ===== */

.reg-history-page__grid-wrapper table {
	width: 100% !important;
	border-collapse: collapse;
}

.reg-history-page__grid-wrapper table th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.reg-history-page__grid-wrapper table td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: middle;
	font-size: 0.9rem;
}

.reg-history-page__grid-wrapper table tr:hover td {
	background: var(--color-blue-light);
}


/* ===== TITLE NO REG PAGE ===== */

.titlenoreg-page__grid-wrapper table {
	width: 100% !important;
	border-collapse: collapse;
}

.titlenoreg-page__grid-wrapper table th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.titlenoreg-page__grid-wrapper table td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: middle;
	font-size: 0.9rem;
}

.titlenoreg-page__grid-wrapper table tr:hover td {
	background: var(--color-blue-light);
}


/* ===== NEW REG PAGE ===== */

.newreg-page__grid-wrapper table {
	width: 100% !important;
	border-collapse: collapse;
}

.newreg-page__grid-wrapper table th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.newreg-page__grid-wrapper table td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: middle;
	font-size: 0.9rem;
}

.newreg-page__grid-wrapper .popup {
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	border: none;
	max-width: 600px;
}

.newreg-page__grid-wrapper .popupTitle {
	background: var(--color-azure-20);
	color: #fff;
	padding: 16px 20px;
	border-radius: 12px 12px 0 0;
	margin: 0;
	font-family: var(--font-heading);
}

.newreg-page__grid-wrapper .popupContent {
	padding: 20px;
}

.newreg-page__grid-wrapper .popupCloseButton {
	background: var(--color-azure-20);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 24px;
	margin: 12px 20px 20px;
	cursor: pointer;
}


/* ===== DUPLICATE REGISTRATION PAGE ===== */

.dupreg-page__grid-wrapper table,
.dupreg-page__history table {
	width: 100% !important;
	border-collapse: collapse;
}

.dupreg-page__grid-wrapper table th,
.dupreg-page__history table th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.dupreg-page__grid-wrapper table td,
.dupreg-page__history table td {
	padding: 12px 16px;
	vertical-align: middle;
	font-size: 0.9rem;
}

.dupreg-page__grid-wrapper .GridView_Default>tbody>tr:hover>td,
.dupreg-page__history table>tbody>tr:hover>td {
	background: var(--color-blue-light);
}


/* ===== SHARED: MyRegistration grid pages ===== */
/* These pages all use the same grid table pattern */

.reg-default-page table,
.insurance-page table,
.viewpreprint-page table,
.other-reg-page table,
.associate-plp-page table,
.plp-listing-page table {
	width: 100% !important;
	border-collapse: collapse;
}

.reg-default-page table th,
.insurance-page table th,
.viewpreprint-page table th,
.other-reg-page table th,
.associate-plp-page table th,
.plp-listing-page table th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.reg-default-page table td,
.insurance-page table td,
.viewpreprint-page table td,
.other-reg-page table td,
.associate-plp-page table td,
.plp-listing-page table td {
	padding: 12px 16px;
	vertical-align: middle;
	font-size: 0.9rem;
}

.reg-default-page table tr:hover td,
.insurance-page table tr:hover td,
.viewpreprint-page table tr:hover td,
.other-reg-page table tr:hover td,
.associate-plp-page table tr:hover td,
.plp-listing-page table tr:hover td {
	background: var(--color-blue-light);
}


/* ===== REMOVE REGISTRATION PAGE ===== */

.remove-reg-page .form-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-azure-20);
}

.remove-reg-page .btn-danger {
	background: var(--color-danger);
	border-color: var(--color-danger);
}


/* ===== CHOOSE TRANSFER PAGE ===== */

.choose-transfer-page__options label {
	display: block;
	padding: 16px 20px;
	margin-bottom: 8px;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 500;
	transition: border-color var(--transition-speed);
}

.choose-transfer-page__options label:hover {
	border-color: var(--color-azure-30);
}


/* ===== AMEND REG PAGE ===== */

.amend-reg-page table {
	width: 100% !important;
	border-collapse: collapse;
}

.amend-reg-page table th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.amend-reg-page table td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: middle;
	font-size: 0.9rem;
}

.amend-reg-page .popup {
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	border: none;
	max-width: 600px;
}

.amend-reg-page .popupTitle {
	background: var(--color-azure-20);
	color: #fff;
	padding: 16px 20px;
	border-radius: 12px 12px 0 0;
	margin: 0;
	font-family: var(--font-heading);
}

.amend-reg-page .popupContent {
	padding: 20px;
}

.amend-reg-page .popupCloseButton {
	background: var(--color-azure-20);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 24px;
	margin: 12px 20px 20px;
	cursor: pointer;
}


/* ===== CHOOSE PLATE PAGE ===== */

/* Form rows: label + input inline */
.choose-plate-page [id*="pnlReservationType"],
.choose-plate-page [id*="pnlVehicleType"],
.choose-plate-page [id*="pnlTruckWeights"],
.choose-plate-page [id*="pnlPlateCategory"],
.choose-plate-page [id*="pnlFuelType"],
.choose-plate-page [id*="pnlPlateProduct"],
.choose-plate-page [id*="pnlAlternatePlate"] {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.choose-plate-page label,
.choose-plate-page .form-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-azure-20);
	margin-bottom: 0;
	min-width: 320px;
	/* text-align: right; */
}

/* Label + required star share the 320px label column so the star sits next to the text */
.choose-plate-page__label {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	min-width: 320px;
}

.choose-plate-page__label label,
.choose-plate-page__label .form-label {
	min-width: 0;
}

.choose-plate-page select,
.choose-plate-page .form-select {
	max-width: 320px;
}

/* Consent and expiration section */
.choose-plate-page [id*="pnlExpiration"],
.choose-plate-page [id*="pnlConsent"],
.choose-plate-page [id*="pnlRegExpConsent"] {
	background: #f8f9fa;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 1rem 0;
}

/* Amount and detail link */
.choose-plate-page [id*="pnlAmount"] {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 1rem 0;
	font-size: 0.95rem;
}

/* Character input boxes for personalized plates */
.choose-plate-page input[id*="txtChar"] {
	width: 42px;
	height: 42px;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 700;
	border: 2px solid #e5e7eb;
	border-radius: 6px;
	text-transform: uppercase;
}

.choose-plate-page input[id*="txtChar"]:focus {
	border-color: var(--color-azure-30);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 77, 153, 0.15);
}

/* Plate image preview */
.choose-plate-page [id*="pnlPlateImage"] img,
.choose-plate-page [id*="imgPlate"] {
	max-height: 80px;
	border-radius: 6px;
	margin: 0.5rem 0;
}

/* Cancel / Add to Cart button row */
.choose-plate-page [id*="pnlCancelProceed"],
.choose-plate-page [id*="updCancelProceed"] {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
}

.choose-plate-page [id*="btnCancel"],
.choose-plate-page [id*="hypCancel"] {
	padding: 10px 24px;
	border-radius: 6px;
	font-weight: 600;
}

.choose-plate-page [id*="btnSave"],
.choose-plate-page [id*="hypShoppingCart"] {
	background: var(--color-azure-20);
	color: #fff;
	padding: 10px 24px;
	border-radius: 6px;
	border: none;
	font-weight: 600;
	text-decoration: none;
}

.choose-plate-page [id*="btnSave"]:hover,
.choose-plate-page [id*="hypShoppingCart"]:hover {
	background: var(--color-azure-30);
}

/* Insurance/emissions/county sections */
.choose-plate-page [id*="pnlInsurance"],
.choose-plate-page [id*="pnlEmissions"],
.choose-plate-page [id*="pnlCounty"],
.choose-plate-page [id*="pnlSchoolDistrict"],
.choose-plate-page [id*="pnlRegCounty"] {
	background: #f8f9fa;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 1rem 0;
}

.choose-plate-page [id*="pnlInsurance"] label,
.choose-plate-page [id*="pnlEmissions"] label,
.choose-plate-page [id*="pnlCounty"] label,
.choose-plate-page [id*="pnlSchoolDistrict"] label,
.choose-plate-page [id*="pnlRegCounty"] label {
	text-align: left;
	min-width: auto;
}

/* Popup modal */
.choose-plate-page .popup {
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	border: none;
	max-width: 600px;
}

.choose-plate-page .popupTitle {
	background: var(--color-azure-20);
	color: #fff;
	padding: 16px 20px;
	border-radius: 12px 12px 0 0;
	margin: 0;
	font-family: var(--font-heading);
}

.choose-plate-page .popupContent {
	padding: 20px;
}

.choose-plate-page .popupCloseButton {
	background: var(--color-azure-20);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 24px;
	margin: 12px 20px 20px;
	cursor: pointer;
}

/* Responsive: stack form fields on mobile */
@media (max-width: 767.98px) {

	.choose-plate-page label,
	.choose-plate-page .form-label {
		min-width: auto;
		text-align: left;
	}

	.choose-plate-page [id*="pnlReservationType"],
	.choose-plate-page [id*="pnlVehicleType"],
	.choose-plate-page [id*="pnlTruckWeights"],
	.choose-plate-page [id*="pnlPlateCategory"] {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ===== AVAILABLE PLATES PAGE ===== */

.available-plates-page table {
	width: 100% !important;
	border-collapse: collapse;
}

.available-plates-page table th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.available-plates-page table td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: middle;
	font-size: 0.9rem;
}

.available-plates-page table tr:hover td {
	background: var(--color-blue-light);
}

.available-plates-page table img {
	max-height: 60px;
	border-radius: 4px;
}


/* ===== PLP LISTING PAGE ===== */

.plp-listing-page table img {
	max-height: 50px;
	border-radius: 4px;
}


/* ===== MY TITLE PAGES ===== */

.title-default-page__cms-content p,
.title-status-page__cms-content p,
.title-noreg-page__cms-content p {
	margin-bottom: 0.75rem;
	line-height: 1.6;
	font-size: 0.95rem;
}

.title-default-page__cms-content p:first-child strong,
.title-status-page__cms-content p:first-child strong,
.title-noreg-page__cms-content p:first-child strong {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--color-azure-20);
}

.title-default-page__cms-content p strong,
.title-status-page__cms-content p strong,
.title-noreg-page__cms-content p strong {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--color-gold);
}

.title-default-page__grid-wrapper .grdRegistration,
.title-noreg-page__grid-wrapper .grdRegistration {
	width: 100% !important;
	border-collapse: collapse;
}

.title-default-page__grid-wrapper .grdRegistration th,
.title-noreg-page__grid-wrapper .grdRegistration th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.title-default-page__grid-wrapper .grdRegistration td,
.title-noreg-page__grid-wrapper .grdRegistration td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: middle;
	font-size: 0.9rem;
}

.title-status-page__grid-wrapper .grdRegistration {
	width: 100% !important;
	border-collapse: collapse;
}

.title-status-page__grid-wrapper .grdRegistration th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.title-status-page__grid-wrapper .grdRegistration td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: middle;
	font-size: 0.9rem;
}

/* ===== REMOVE TITLE PAGE ===== */

.remove-title-page__detail {
	background: #f8f9fa;
	border-radius: 0.5rem;
	padding: 1rem;
}

.remove-title-page .form-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-azure-20);
}

/* ===== TITLE SERVICES PAGE ===== */

.title-services-page__cms-content p {
	margin-bottom: 0.75rem;
	line-height: 1.6;
	font-size: 0.95rem;
}

.title-services-page__cms-content p:first-child strong {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--color-azure-20);
}

.title-services-page__grid-wrapper .grdRegistration {
	width: 100% !important;
	border-collapse: collapse;
}

.title-services-page__grid-wrapper .grdRegistration th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.title-services-page__grid-wrapper .grdRegistration td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: middle;
	font-size: 0.9rem;
}

/* ===== PRINT ELECTRONIC TITLE PAGE ===== */

.print-etitle-page__cms-content p {
	margin-bottom: 0.75rem;
	line-height: 1.6;
	font-size: 0.95rem;
}

.print-etitle-page__cms-content p:first-child strong {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--color-azure-20);
}

.print-etitle-page__grid-wrapper .grdRegistration {
	width: 100% !important;
	border-collapse: collapse;
}

.print-etitle-page__grid-wrapper .grdRegistration th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 12px 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.print-etitle-page__grid-wrapper .grdRegistration td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: middle;
	font-size: 0.9rem;
}

/* ===== CERTIFICATE OF AUTHORITY PAGE ===== */

.cert-authority-page .table th {
	background: var(--color-azure-20);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
}

.cert-authority-page .table td {
	vertical-align: middle;
}

.cert-authority-page .overlay .confirm-box {
	border-radius: 0.5rem;
}

.cert-authority-page .overlay .confirm-box h2 {
	color: var(--color-azure-20);
	font-family: var(--font-heading);
}

/* Errors banner stays out of the way until validations() writes into it */
.cert-authority-page .cert-errors:empty {
	display: none !important;
}

/* Lets a server Panel wrapper sit inside a Bootstrap .row without breaking the columns */
.cert-authority-page__contents {
	display: contents;
}

/* Address user controls (AddressUpdate / AddressUpdateLegal) — match the Driver Training
   form: labels stacked above inputs, and short fields combined into shared rows on a
   12-column grid (address 1 + 2, city + state + zip, country + county + township).
   Scoped to this page so the shared controls keep their layout elsewhere. */
.cert-authority-page .address-form {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 1rem;
	align-items: start;
}

.cert-authority-page .address-form>*,
.cert-authority-page .address-form__row {
	grid-column: 1 / -1;
}

.cert-authority-page .address-form__grid {
	display: contents;
}

.cert-authority-page .address-form__row.row {
	display: block;
	gap: 0;
	margin: 0 0 1rem;
	--bs-gutter-x: 0;
}

.cert-authority-page .address-form__row>[class*="col-"] {
	display: block;
	width: 100%;
	max-width: 100%;
	flex: none;
	min-width: 0;
	padding: 0;
}

.cert-authority-page .address-form__label {
	margin-bottom: 0.35rem;
}

.cert-authority-page .address-form__field {
	display: block;
}

.cert-authority-page .address-form__row input[type="text"],
.cert-authority-page .address-form__row select {
	min-width: 0;
	max-width: 100%;
}

.cert-authority-page #txtLZIP5,
.cert-authority-page #txtZIP5 {
	max-width: none !important;
	flex: 1 1 0;
}

.cert-authority-page .address-form__type-header {
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

@media (min-width: 768px) {
	.cert-authority-page .address-form__row:has([id$="txtLAddress1"], [id$="txtAddress1"], [id$="txtLAddress2"], [id$="txtAddress2"]) {
		grid-column: span 6;
	}

	.cert-authority-page .address-form__row:has([id$="txtLCity"], [id$="txtCity"]) {
		grid-column: span 5;
	}

	.cert-authority-page .address-form__row:has([id$="ddlLState"], [id$="ddlState"]) {
		grid-column: span 3;
	}

	.cert-authority-page .address-form__row:has([id$="txtLZIP5"], [id$="txtZIP5"], [id$="txtIntlZIP"]) {
		grid-column: span 4;
	}

	.cert-authority-page .address-form__row:has([id$="ddlLCountry"], [id$="ddlCountry"]) {
		grid-column: span 6;
	}

	.cert-authority-page .address-form__row[id$="trCounty"],
	.cert-authority-page .address-form__row[id$="trTownship"] {
		grid-column: span 3;
	}
}

.cert-authority-page input[type="radio"] {
	margin-right: 6px;
	vertical-align: middle;
}

/* Inline radio row — used for groups like "Preferred method of delivery?". Each
   asp:RadioButton carries CssClass="cert-authority-page__radio", so ASP.NET wraps its
   <input> and <label> in one span: the span is the flex item, so a narrow column
   (col-md-3) wraps whole options instead of stranding a label away from its radio. */
.cert-authority-page__radio-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.75rem;
}

.cert-authority-page__radio {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* All four margins zeroed: the site-wide input[type="radio"]+label rule adds 0.25rem top and left
   (label sat 4px below its radio) and 1rem right. The pair's gap carries the spacing instead. */
.cert-authority-page__radio-row input[type="radio"] {
	flex: none;
	margin: 0;
}

.cert-authority-page__radio-row input[type="radio"]+label {
	margin: 0;
	line-height: 1.25;
	font-weight: 500;
	color: var(--color-azure-20);
	cursor: pointer;
	white-space: nowrap;
	vertical-align: middle;
}

.cert-authority-page input[type="checkbox"] {
	margin-right: 6px;
	vertical-align: middle;
}

.cert-authority-page input[type="checkbox"]+label,
.cert-authority-page input[type="checkbox"]+span,
.shell input[type="checkbox"]+label {
	display: inline;
	font-weight: 500;
	vertical-align: middle;
}

/* Section headings (h3) and address-form type header should be left-aligned and heading-styled */
.cert-authority-page h3 {
	color: var(--color-azure-20);
	margin-top: 0;
	margin-bottom: 0.75rem;
	text-align: left;
}

.cert-authority-page .address-form__type-header {
	color: var(--color-azure-20);
	font-weight: 700;
	font-family: var(--font-heading);
	margin: 1rem 0 0.75rem;
	text-align: left;
}

/* ===== MY DRIVER PAGES ===== */

.driver-default-page__cms-content p,
.license-renew-page__cms-content p,
.collections-page__cms-content p,
.reinstatement-page__cms-content p {
	margin-bottom: 0.75rem;
	line-height: 1.6;
	font-size: 0.95rem;
}

.driver-default-page__cms-content p:first-child strong,
.license-renew-page__cms-content p:first-child strong,
.collections-page__cms-content p:first-child strong {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--color-azure-20);
}

.driver-default-page__cms-content p strong,
.license-renew-page__cms-content p strong,
.collections-page__cms-content p strong {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
}

/* ===== DRIVER RECORD PAGE ===== */

.driver-record-page {
	max-width: 1200px;
}

/* ===== VERIFY CREDENTIALS PAGE ===== */

.verify-credentials-page .form-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-azure-20);
}

.verify-credentials-page__legal-question {
	border-left: 3px solid var(--color-azure-20);
}

.verify-credentials-page__mail-address {
	background: var(--bs-gray-100);
}

.verify-credentials-page__legal-info {
	background: var(--bs-gray-100);
}

.verify-credentials-page__selective-service {
	background-color: var(--bs-gray-200);
}

/* ===== RESPONSIVE TABLE COLLAPSE =====
   Auto-applies to:
     - Any wrapper with .table-responsive-collapse (explicit opt-in)
     - Any wrapper whose class contains "__grid-wrapper" (the redesign's
       page-build convention) — every redesigned data-grid card benefits
       automatically without per-page markup edits.
   On screens narrower than 768px, the header row hides and each data row
   reflows into a stacked label/value list using the data-label attribute set
   by shell.js. Direct-descendant selectors keep nested tables untouched. */
@media (max-width: 767.98px) {

	/* Rows become standalone bordered cards below this breakpoint, so drop the
	   table's own outer border/rounding to avoid a frame-within-frames look. */
	.table-responsive-collapse table:not(table table),
	[class*="__grid-wrapper"] table:not(table table) {
		border: none !important;
		border-radius: 0 !important;
		overflow: visible !important;
	}

	.table-responsive-collapse table:not(table table)>thead,
	[class*="__grid-wrapper"] table:not(table table)>thead {
		display: none;
	}

	/* A first row whose th is scope="row" is a data row (row header), not a column-header row. */
	.table-responsive-collapse table:not(table table)>tbody>tr:first-child:has(> th:not([scope="row"])),
	.table-responsive-collapse table:not(table table)>tr:first-child:has(> th:not([scope="row"])),
	[class*="__grid-wrapper"] table:not(table table)>tbody>tr:first-child:has(> th:not([scope="row"])),
	[class*="__grid-wrapper"] table:not(table table)>tr:first-child:has(> th:not([scope="row"])) {
		display: none;
	}

	.table-responsive-collapse table:not(table table)>tbody>tr,
	.table-responsive-collapse table:not(table table)>tr,
	[class*="__grid-wrapper"] table:not(table table)>tbody>tr,
	[class*="__grid-wrapper"] table:not(table table)>tr {
		display: block;
		width: 100% !important;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		margin: 0 0 12px;
		padding: 8px 14px;
		background-color: #fff !important;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	}

	.table-responsive-collapse table:not(table table)>tbody>tr.GridView_AlternatingRowStyle_Default,
	.table-responsive-collapse table:not(table table)>tr.GridView_AlternatingRowStyle_Default,
	[class*="__grid-wrapper"] table:not(table table)>tbody>tr.GridView_AlternatingRowStyle_Default,
	[class*="__grid-wrapper"] table:not(table table)>tr.GridView_AlternatingRowStyle_Default {
		background-color: var(--bs-gray-100) !important;
	}

	.table-responsive-collapse table:not(table table)>tbody>tr>td,
	.table-responsive-collapse table:not(table table)>tr>td,
	[class*="__grid-wrapper"] table:not(table table)>tbody>tr>td,
	[class*="__grid-wrapper"] table:not(table table)>tr>td {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 12px;
		padding: 6px 0;
		border: none !important;
		text-align: left !important;
		width: auto !important;
		background: transparent !important;
	}

	.table-responsive-collapse table:not(table table)>tbody>tr>td+td,
	.table-responsive-collapse table:not(table table)>tr>td+td,
	[class*="__grid-wrapper"] table:not(table table)>tbody>tr>td+td,
	[class*="__grid-wrapper"] table:not(table table)>tr>td+td {
		border-top: 1px solid #f3f4f6 !important;
	}

	.table-responsive-collapse table:not(table table)>tbody>tr>td::before,
	.table-responsive-collapse table:not(table table)>tr>td::before,
	[class*="__grid-wrapper"] table:not(table table)>tbody>tr>td::before,
	[class*="__grid-wrapper"] table:not(table table)>tr>td::before {
		content: attr(data-label);
		flex: 0 0 40%;
		font-weight: 700;
		color: var(--color-azure-20);
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		padding-top: 2px;
	}

	.table-responsive-collapse table:not(table table)>tbody>tr>td:not([data-label])::before,
	.table-responsive-collapse table:not(table table)>tr>td:not([data-label])::before,
	.table-responsive-collapse table:not(table table)>tbody>tr>td[data-label=""]::before,
	.table-responsive-collapse table:not(table table)>tr>td[data-label=""]::before,
	[class*="__grid-wrapper"] table:not(table table)>tbody>tr>td:not([data-label])::before,
	[class*="__grid-wrapper"] table:not(table table)>tr>td:not([data-label])::before,
	[class*="__grid-wrapper"] table:not(table table)>tbody>tr>td[data-label=""]::before,
	[class*="__grid-wrapper"] table:not(table table)>tr>td[data-label=""]::before {
		content: "";
		display: none;
	}
}

/* ===== TITLE CARD GRIDS =====
   MyTitle data grids (My Titles, Title Status, Request Replacement / Print Electronic
   Title) render as a responsive set of cards at every width instead of a wide table.
   The GridView controls and their server events are untouched; this restyles the
   rendered table, using the data-label attributes shell.js already stamps on each
   cell: one card per vehicle with the first column as the card title. The cart
   pages (Request Replacement / Print Electronic Title) use ListView cards instead —
   see TITLE REQUEST CARDS. Must follow the responsive-collapse block. */
.title-card-grid table:not(table table) {
	display: block;
	width: 100% !important;
	border: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	background: transparent !important;
}

.title-card-grid table:not(table table)>thead,
.title-card-grid table:not(table table)>tbody>tr:first-child:has(> th) {
	display: none;
}

.title-card-grid table:not(table table)>tbody {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
}

.title-card-grid table:not(table table)>tbody>tr,
.title-card-grid table:not(table table)>tbody>tr.GridView_AlternatingRowStyle_Default {
	display: block;
	width: auto !important;
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background-color: #fff !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.title-card-grid table:not(table table)>tbody>tr:hover {
	background-color: #fff !important;
	border-color: var(--color-azure-30);
	box-shadow: 0 4px 12px rgba(0, 51, 102, 0.08);
}

/* .shell prefix: two classes, so this outranks the skin's `.shell .GridView_RowStyle_Default td`
   (12px 16px) — without it the detail rows sit 16px in from the VIN/HIN card title. The 12px
   vertical rhythm from that skin rule is kept on purpose; only the inline padding goes. */
.shell .title-card-grid table:not(table table)>tbody>tr>td {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border: none !important;
	text-align: left !important;
	width: auto !important;
	background: transparent !important;
}

.shell .title-card-grid table:not(table table)>tbody>tr>td+td {
	border-top: 1px solid #f3f4f6 !important;
}

.title-card-grid table:not(table table)>tbody>tr>td::before {
	content: attr(data-label);
	flex: 0 0 40%;
	font-weight: 700;
	color: var(--color-azure-20);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-top: 2px;
}

.title-card-grid table:not(table table)>tbody>tr>td:not([data-label])::before,
.title-card-grid table:not(table table)>tbody>tr>td[data-label=""]::before {
	content: "";
	display: none;
}

/* First column is the card title (VIN/HIN) */
.title-card-grid table:not(table table)>tbody>tr>td:first-child {
	display: block;
	padding: 0 0 0.6rem;
	margin-bottom: 0.25rem;
	border-bottom: 1px solid #e5e7eb !important;
	font-weight: 700;
	font-size: 1.05rem;
}

.title-card-grid table:not(table table)>tbody>tr>td:first-child::before {
	display: block;
	margin-bottom: 0.15rem;
}

.title-card-grid table:not(table table)>tbody>tr>td:first-child+td {
	border-top: none !important;
}

/* Select column (Contact Us turns it on): it lands in the first-child slot, so undo the stacked
   card-title layout and keep the checkbox beside its label like any other row. */
.shell .title-card-grid table:not(table table)>tbody>tr>td.title-card-grid__select {
	display: flex;
	align-items: center;
}

.shell .title-card-grid table:not(table table)>tbody>tr>td.title-card-grid__select::before {
	margin-bottom: 0;
}

/* --actions (TitleGridView): the card is a flex column so the actions cell (Remove Title, last
   column) pins bottom-right, and grid stretch gives every card in a row the same height whether
   or not it has a button. The VIN/HIN card-title cell above is unchanged. */
.title-card-grid--actions table:not(table table)>tbody>tr {
	display: flex;
	flex-direction: column;
}

/* .shell prefix so this outranks the .shell-prefixed td+td separator rule (no line above the actions cell). */
.shell .title-card-grid--actions table:not(table table)>tbody>tr>td.title-card-grid__actions {
	margin-top: auto;
	justify-content: flex-end;
	padding: 0.75rem 0 0;
	border-top: none !important;
}

/* ===== TITLE REQUEST CARDS (Request Replacement / Print Electronic Title) =====
   One card per vehicle, split in two: read-only vehicle facts on the left, and a
   tinted "order" panel on the right that groups the choices, the fee and the
   primary call-to-action so the next step is unmistakable. Rendered by the
   TitleDuplicateGridView / PrintElectronicTitleGridView ListViews (no tables). */
.title-cards {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.title-card {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.title-card .min-w-0 {
	min-width: 0;
}

.title-card__facts {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
}

.title-card__vin {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.title-card__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}

.title-card__label,
.title-card__meta dt {
	display: block;
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-azure-20);
}

.title-card__vin-link {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.title-card__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
	gap: 0.75rem 2.5rem;
	margin: 0;
}

.title-card__meta dd {
	margin: 0.1rem 0 0;
	font-weight: 600;
	color: var(--color-azure-11);
}

/* Informational / blocking message from the code-behind; hidden while empty */
.title-card__notice {
	display: block;
	padding: 0.65rem 0.9rem 0.65rem 2.4rem;
	position: relative;
	background: var(--color-warning-bg);
	border-left: 4px solid var(--color-warning-border);
	border-radius: 6px;
	color: var(--color-warning-text);
	font-size: 0.9rem;
	line-height: 1.4;
}

.title-card__notice:empty {
	display: none;
}

.title-card__notice::before {
	content: "\f071";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 0.9rem;
	top: 0.7rem;
	color: var(--color-warning-text);
}

.title-card__link {
	align-self: flex-start;
	font-size: 0.9rem;
	font-weight: 600;
}

.title-card__link::before {
	content: "\f0e0";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-right: 0.4rem;
}

.title-card__order {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: var(--color-blue-lighter);
	border-left: 1px solid var(--color-blue-border);
}

.title-card__order-head {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-azure-20);
}

.title-card__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1rem;
}

.title-card__field .form-label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.8rem;
}

.title-card__fee {
	grid-column: 1 / -1;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-blue-border);
	font-weight: 600;
	color: var(--color-azure-20);
}

.title-card__fee-amount {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
}

/* Standard .btn sizing (matches the site's other buttons); just right-aligned in the panel */
.title-card__cta {
	align-self: flex-end;
	margin-top: auto;
}

/* Not requestable (Pending / Visit Branch…): show it as a status, not a dead button */
/* The .shell__content a selector + !important outrank the shell's !important a.btn-primary blue, which a
   disabled LinkButton still carries. */
.title-card__cta.aspNetDisabled,
.title-card__cta.disabled,
.shell__content a.title-card__cta.aspNetDisabled {
	background: #fff !important;
	border: 1px dashed #adb5bd !important;
	color: #3d4b5c !important;
	box-shadow: none !important;
	cursor: default;
	pointer-events: none;
	white-space: normal;
}

@media (max-width: 767.98px) {
	.title-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.title-card__order {
		border-left: none;
		border-top: 1px solid var(--color-blue-border);
	}
}

/* ===== MyTitle (Vehicle Titles) phone layout =====
   Scoped through the MyTitle page blocks so the shared controls (TitleDetailPopup,
   TitleGridView, TitleStatus, SpecialAddressUpdate) keep their layout on other pages.
   The one exception is the card-list minimum below, which is the card grid's own rule
   and applies wherever .title-card-grid renders (My Titles, Contact, MyInfo). */
/* 300px minimum + 16px gutters overflowed a 360px screen by 4px; never let a card exceed its track. */
.title-card-grid table:not(table table)>tbody {
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

@media (max-width: 991.98px) {

	/* Print view (TitlePrintDetail): the owners / lienholders GridViews have no responsive
	   wrapper, so the global phone rule (td { display: block }) left the header row as a
	   fixed-layout table and stacked every value under the first column ~70px wide. Reflow
	   each row into a label / value card instead. Labels come from the header text, which
	   the page script below copies onto each cell as data-label. */
	.title-print-detail-page .title-print-view table {
		display: block;
		width: 100% !important;
		table-layout: auto;
		border: none !important;
		background: transparent !important;
	}

	.title-print-detail-page .title-print-view table>tbody {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.title-print-detail-page .title-print-view table>tbody>tr:first-child:has(> th) {
		display: none;
	}

	.title-print-detail-page .title-print-view table>tbody>tr {
		display: block;
		padding: 0.5rem 1rem;
		border: 1px solid var(--color-border);
		border-radius: 10px;
		background: #fff !important;
	}

	.title-print-detail-page .title-print-view table>tbody>tr>td {
		display: grid !important;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: 0.75rem;
		padding: 0.5rem 0 !important;
		border: none !important;
		background: transparent !important;
		text-align: left !important;
		overflow-wrap: break-word;
	}

	.title-print-detail-page .title-print-view table>tbody>tr>td+td {
		border-top: 1px solid #f3f4f6 !important;
	}

	.title-print-detail-page .title-print-view table>tbody>tr>td::before {
		content: attr(data-label);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--color-azure-20);
		padding-top: 2px;
	}
}

@media (max-width: 767.98px) {

	/* Request cards: full VIN on one line where it fits; break only at the very end. */
	.title-card__vin-link {
		font-size: 1.05rem;
		letter-spacing: 0.01em;
		overflow-wrap: break-word;
		word-break: break-all;
		line-height: 1.3;
	}

	/* Reason / Speed Title side by side truncated the selected value; stack them. */
	.title-card__options {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Per-card Add to Cart / Visit Branch fill the order panel. */
	.title-card__cta {
		align-self: stretch;
		text-align: center;
	}

	.title-card__link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.title-card-grid table:not(table table)>tbody>tr>td a:not(.btn),
	.title-status-page .title-card-grid a:not(.btn) {
		display: inline-block;
		padding-block: 0.4rem;
		margin-block: -0.4rem;
	}

	/* Flood question: label over full-width Yes / No instead of a squeezed centered column. */
	.title-services-page .alert-warning>.d-inline-flex {
		display: flex !important;
		flex-direction: column;
		align-items: stretch !important;
		text-align: left;
	}

	.title-services-page .alert-warning table {
		display: flex !important;
		width: 100% !important;
	}

	.title-services-page .alert-warning table :is(tbody, tr) {
		display: flex;
		width: 100%;
		gap: 0.5rem;
	}

	/* The table-collapse rules also match this RadioButtonList (it sits in a __grid-wrapper)
	   and push the label to the far edge with space-between; hold it beside its radio. */
	.title-services-page .alert-warning table td {
		flex: 1 1 0;
		display: flex !important;
		justify-content: flex-start !important;
		align-items: center;
		gap: 0.5rem;
		min-height: 44px;
		padding: 0 0.75rem !important;
		border: 1px solid var(--color-warning-border) !important;
		border-radius: 8px;
		background: #fff;
	}

	/* Remove Title: initials box keeps its intended width; marker stays with the label. */
	.remove-title-page input[id$="txtRegRemovalInitials"] {
		width: 10rem !important;
	}

	.remove-title-page .form-label {
		display: inline;
		margin-right: 0.25rem;
	}

	.remove-title-page .form-label+.required-indicator+input {
		margin-top: 0.5rem;
	}

	/* Single-time mailing address: ZIP and ZIP+4 sit on one row at their real widths
	   (the global phone rule forced each to 100%, stacking them with a stray "-"). */
	.update-special-addr-page #txtZIP5 {
		width: 6rem !important;
		flex: none;
	}

	.update-special-addr-page #txtZIP4 {
		width: 5rem !important;
		flex: none;
	}

	.update-special-addr-page #txtIntlZIP {
		width: 10rem !important;
	}

	.update-special-addr-page .address-form>.mb-3 h4 {
		font-size: 1.1rem;
		font-weight: 700;
		color: var(--color-azure-20);
	}

	/* Form buttons share the row and wrap rather than overflowing. */
	:is(.update-special-addr-page, .remove-title-page) .d-flex.justify-content-end.gap-3 {
		flex-wrap: wrap;
		gap: 0.75rem !important;
	}

	:is(.update-special-addr-page, .remove-title-page) .d-flex.justify-content-end.gap-3>.btn {
		flex: 1 1 0;
		min-width: max-content;
	}

	/* Checkbox + long label: box beside the label with a full-height hit area. */
	:is(.cert-authority-page .bg-light.border, .cert-authority-page .mb-3, .update-special-addr-page .form-check):has(> input[type="checkbox"]) {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		column-gap: 0.625rem;
		padding-left: 0;
	}

	:is(.cert-authority-page, .update-special-addr-page) input[type="checkbox"] {
		flex: none;
		float: none;
		margin: 0.15rem 0 0 !important;
	}

	:is(.cert-authority-page, .update-special-addr-page) input[type="checkbox"]+label {
		flex: 1 1 0;
		min-width: 0;
		display: block;
		padding-left: 0;
	}

	.cert-authority-page .mb-3:has(> input[type="checkbox"])>span {
		flex-basis: 100%;
	}

	/* CoA radio groups: each option is a 44px-tall tap target with its radio and label
	   centered on one line. Long options may wrap their label text. */
	.cert-authority-page__radio-row {
		row-gap: 0;
	}

	.cert-authority-page__radio {
		min-height: 44px;
	}

	.cert-authority-page__radio-row input[type="radio"]+label {
		padding-block: 0.75rem;
		white-space: normal;
	}

	/* Reason for Request: the long "faulty, lost or destroyed" option needs its own row and a
	   label that can wrap beside the radio. */
	.cert-authority-page__radio-row:has([id$="rbLostOrDestroyed"]) {
		flex-direction: column;
		align-items: stretch;
	}

	.cert-authority-page__radio-row:has([id$="rbLostOrDestroyed"]) .cert-authority-page__radio {
		display: flex;
	}

	.cert-authority-page__radio-row:has([id$="rbLostOrDestroyed"]) input[type="radio"]+label {
		flex: 1 1 0;
		min-width: 0;
	}

	/* E-mail / delivery fields sit in a display:contents Panel, so their col-md-* lost the
	   row's gutter padding and sat 8px left of the other fields. */
	.cert-authority-page__contents>[class*="col-md-"] {
		padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
		margin-top: 1rem;
	}

	/* "Would you like to submit additional applications?" box was 40% wide (144px) and pinned
	   300px down. The page's own <style> block loads after this file, so these need the extra
	   class and !important to win. showConfirmBox() sets style="display: block". */
	.shell .cert-authority-page .overlay {
		padding: 1rem !important;
		align-items: center;
	}

	.shell .cert-authority-page .overlay[style*="block"] {
		display: flex !important;
	}

	.shell .cert-authority-page .overlay .confirm-box {
		width: 100% !important;
		max-width: 26rem;
		padding: 1.5rem;
		border: none;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	}

	.cert-authority-page .overlay .confirm-box h2 {
		font-size: 1.35rem;
	}

	.cert-authority-page .overlay .confirm-box .btn {
		width: calc(50% - 0.375rem) !important;
		min-height: 44px;
	}

	/* Contact "click here" link was an 18px-tall inline target. */
	[id$="QuestionLink_lnkContactUsQuestion"] {
		display: inline-block;
		padding-block: 0.5rem;
		margin-block: -0.5rem;
	}

	/* Title detail popup tabs: one scrollable row instead of wrapping onto two. */
	#titleDetailTabs {
		flex-wrap: nowrap;
		justify-content: flex-start !important;
		overflow-x: auto;
		scrollbar-width: none;
	}

	#titleDetailTabs .nav-link {
		white-space: nowrap;
		padding-inline: 0.75rem;
	}
}

@media (max-width: 575.98px) {

	/* Full-screen detail and status-history dialogs (same values as Bootstrap's
	   .modal-fullscreen-sm-down). */
	:is(.title-default-page, .title-noreg-page, .title-status-page, .title-services-page, .print-etitle-page) .modal .modal-dialog {
		width: 100vw;
		max-width: none;
		height: 100%;
		margin: 0;
	}

	:is(.title-default-page, .title-noreg-page, .title-status-page, .title-services-page, .print-etitle-page) .modal .modal-content {
		height: 100%;
		border: 0;
		border-radius: 0;
	}

	:is(.title-default-page, .title-noreg-page, .title-status-page, .title-services-page, .print-etitle-page) .modal .modal-body {
		overflow-y: auto;
	}

	.title-card-heading.u-heading--lg {
		font-size: 1.375rem;
		line-height: 1.25;
		margin-bottom: 1.25rem !important;
	}

	.title-card-heading.u-heading--md {
		font-size: 1.1rem;
	}

	.title-card-heading__icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		font-size: 0.875rem;
	}

	.title-default-page__cms-content p:first-child strong,
	.title-status-page__cms-content p:first-child strong,
	.title-noreg-page__cms-content p:first-child strong,
	.title-services-page__cms-content p:first-child strong,
	.print-etitle-page__cms-content p:first-child strong {
		display: block;
		font-size: 1.25rem;
		line-height: 1.3;
		margin-bottom: 0.25rem;
	}

	.title-card__facts,
	.title-card__order {
		padding: 1rem 1.125rem;
	}

	.title-card__meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
	}

	.title-card__meta dd {
		overflow-wrap: anywhere;
	}

	.title-card__fee-amount {
		font-size: 1.4rem;
	}

	/* p-md-5 is off at this width, but the form still carries a lot of chrome. */
	.cert-authority-page .alert {
		padding: 1rem;
	}

	.cert-authority-page .mb-5 {
		margin-bottom: 2rem !important;
	}
}

/* ========================================================================
   Cart Page Styles
   ======================================================================== */

.cart-container {
	background: var(--color-white-solid, #FFF);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
	padding: 2rem;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-radius: var(--radius-lg);
}

/* Legacy payment page title — now the same type spec as .u-heading--lg (the pages use
   u-heading + cart-card-heading; this keeps any remaining .page-heading in step). */
.page-heading {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--color-azure-20);
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.page-subheading {
	font-size: 0.875rem;
	color: #6c757d;
	margin-bottom: 1.5rem;
	font-weight: 400;
}

.cart-header {
	margin-bottom: 1.5rem;
}

.cart-header h2 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--color-azure-20);
	margin-bottom: 0.5rem;
}

.cart-header p {
	color: #6c757d;
	margin: 0;
	font-size: 0.875rem;
}

/* Cart Items Section */
/* The widget's last section (Cart Items when there's no Summary, or the Summary card)
   carries no trailing margin — the container below owns that spacing. */
.cart-summary-widget>.cart-items:last-child,
.cart-summary-widget>.cart-summary-section:last-child {
	margin-bottom: 0;
}

.cart-items {
	background: white;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	margin-bottom: 1.5rem;
}

.cart-items-header {
	background-color: #003366;
	color: white;
	padding: 1rem 1.5rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.cart-item {
	border-bottom: 1px solid #e9ecef;
	padding: 1.5rem;
}

.cart-item:last-child {
	border-bottom: none;
}

/* Item header: title (with inline remove link) on the left, fee(s) on the right. The
   fee aligns to the header row so it stays level with the title even when the item has
   no description; the description, when present, flows on its own row below. */
.cart-item-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.cart-item-title {
	font-weight: 600;
	font-size: 0.9375rem;
	color: #111827;
}

/* Description sits below the header. It is only rendered when the item actually has
   attribute details (see pnlItemDetails.Visible), so it never adds a phantom empty row
   for items like Certified Driving Record that have none. */
.cart-item-description {
	margin-top: 0.75rem;
}

.cart-item-fees {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
	white-space: nowrap;
}

.cart-item-detail {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
}

.cart-item-detail:last-child {
	margin-bottom: 0;
}

.cart-item-detail-label {
	font-weight: 600;
	color: #495057;
}

.cart-item-detail-value {
	color: #111827;
	margin-left: 0.25rem;
}

/* Remove Item is an outline-danger button (btn btn-sm btn-outline-danger in the markup);
   colors, size and hover come from the shared button rules — this is just placement. */
.cart-item-remove {
	white-space: nowrap;
	margin-left: 0.5rem;
	vertical-align: middle;
}

.cart-item-remove:focus-visible {
	text-decoration: underline;
	outline: 2px solid var(--color-navy, #003366);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10000;
	padding: 0.75rem 1rem;
	background: #fff;
	color: #003366;
	font-weight: 600;
	transform: translateY(-100%);
}

.skip-link:focus {
	transform: translateY(0);
	outline: 2px solid #003366;
	outline-offset: -2px;
}

.shell__content:focus {
	outline: none;
}

.cart-item-fee {
	display: flex;
	gap: 0.5rem;
	white-space: nowrap;
}

.cart-item-fee-label {
	font-weight: 600;
	font-size: 0.875rem;
	color: #495057;
}

.cart-item-fee-value {
	font-weight: 600;
	font-size: 0.875rem;
	color: #111827;
}

/* Donate Life Section */
.donate-life-section {
	background: white;
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.donate-life-header {
	background-color: #003366;
	color: white;
	padding: 1rem 1.5rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.donate-life-content {
	background-color: white;
	padding: 1.5rem;
}

.donate-life-label {
	display: block;
	margin-bottom: 0.75rem;
	font-weight: 500;
	font-size: 0.9375rem;
	color: #111827;
}

.donate-life-controls {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.donate-life-radio-list {
	display: flex;
	gap: 1.5rem;
	margin: 0;
}

.donate-life-radio-list table {
	display: flex;
	gap: 1.5rem;
}

.donate-life-radio-list tbody {
	display: flex;
	gap: 1.5rem;
}

.donate-life-radio-list tr {
	display: flex;
	gap: 1.5rem;
}

.donate-life-radio-list td {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 !important;
}

.donate-life-radio-list label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	cursor: pointer;
}

/* RepeatLayout="Flow" variant (rdoDonateLife): inline input/label pairs in a <span> instead of a
   layout table. Input-to-label gap is tight; the gap between the two options is the label margin. */
span.donate-life-radio-list {
	align-items: center;
	gap: 0.5rem;
}

span.donate-life-radio-list label:not(:last-child) {
	margin-right: 1rem;
}

.donate-life-radio-list input[type="radio"] {
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.donate-life-amount {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
	position: relative;
}

/* Label + required star stay together; the 1rem flex gap applies between this group and the input */
.donate-life-amount-field {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
}

.donate-life-amount-label {
	font-weight: 500;
	margin: 0;
	white-space: nowrap;
}

.donate-life-input {
	width: 90px;
	text-align: right;
	padding: 0.375rem 0.5rem;
	padding-right: 1.75rem;
	border: 1px solid #ced4da;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}

.shell .donate-life-input {
	width: 90px !important;
	max-width: 90px !important;
	padding-right: 1.75rem !important;
}

.donate-life-decimal {
	position: relative;
	margin-left: -2.75rem;
	pointer-events: none;
	color: #6c757d;
	font-weight: 400;
	font-size: 0.9rem;
	z-index: 1;
}

.donate-life-amount .btn-cart-primary {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	flex-shrink: 0;
	width: auto;
}

.donate-life-amount input {
	width: 100px;
}

/* Summary Section */
.cart-summary-section {
	background-color: white;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	margin-bottom: 1.5rem;
}

.cart-summary-header {
	background-color: #003366;
	color: white;
	padding: 1rem 1.5rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.cart-summary-body {
	padding: 1.5rem;
}

.cart-summary-row {
	display: flex;
	justify-content: space-between;
	padding: 0.75rem 0;
	border-bottom: 1px solid #e9ecef;
}

.cart-summary-row:last-child {
	border-bottom: none;
}

.cart-summary-label {
	font-size: 0.875rem;
	color: #495057;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.cart-summary-value {
	font-weight: 600;
	font-size: 0.9375rem;
	color: #111827;
}

.cart-summary-total {
	background-color: #f8f9fa;
	padding: 1rem 1.5rem;
	margin-top: 1rem;
	border-radius: var(--radius-sm);
}

.cart-summary-total .cart-summary-label {
	font-weight: 700;
	font-size: 0.9375rem;
}

.cart-summary-total .cart-summary-value {
	font-weight: 700;
	font-size: 1.125rem;
	color: #003366;
}

.cart-summary-note {
	font-size: 0.8125rem;
	color: #6c757d;
	text-align: right;
	margin-top: 0.5rem;
}

/* Purchase History (ODR / DupReg): the header and intro note are plain flow content
   (no table), matching the summary-card sections; only the purchased line items below
   remain a GridView table. These controls sit inside a .summary-card panel supplied by
   the host, so the header here is a heading rule rather than a filled blue bar. */
/* Purchase History section spacing. The section itself is unboxed (plain flow) — only
   the grid below carries the shadowed card, so the heading/intro read as section text
   rather than a boxed panel. */
.purchase-history-section {
	margin-bottom: 1.5rem;
}

.purchase-history__header {
	border-bottom: 2px solid #003366;
	margin-bottom: 0.75rem;
}

.purchase-history__header h3 {
	margin: 0 0 0.5rem;
}

.purchase-history__intro {
	font-size: 0.875rem;
	color: #495057;
	margin-bottom: 1rem;
}

.purchase-history__adobe {
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Only the purchased line-item table gets the shadowed box. */
.purchase-history__grid {
	background: #fff;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.popupmsg {
	font-size: 0.875rem;
	color: #6c757d;
	margin-bottom: 0.5rem;
}

/* Transaction Details lines (ShoppingCartGridView). Each item is a receipt-style
   line: item name and its payable amount inline on one row, attribute details
   flowing full-width beneath — not a staggered two-column block. Rows are divided
   by a rule rather than boxed, since they already sit inside a .summary-card body. */
.cart-line {
	padding: 1rem 0;
	border-bottom: 1px solid #e9ecef;
}

.cart-line:first-child {
	padding-top: 0;
}

.cart-line:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cart-line__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.cart-line__title {
	font-weight: 600;
	font-size: 0.9375rem;
	color: #111827;
}

.cart-line__amount {
	font-weight: 600;
	font-size: 0.9375rem;
	color: #111827;
	white-space: nowrap;
}

.cart-line__details {
	margin-top: 0.25rem;
}

.cart-line__strike {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: #6c757d;
	text-decoration: line-through;
}

.cart-line__foot:empty {
	display: none;
}

.cart-line__foot {
	margin-top: 0.5rem;
}

.transaction-details__savings {
	font-style: italic;
	color: var(--color-error);
	margin-top: 1rem;
	font-size: 0.875rem;
}

/* ========================================================================
   Transaction Summary — order summary sidebar
   Rendered in TwoColumnCart.master's right column (.two-column-cart__sidebar,
   which supplies the white background, padding, and sticky positioning). This
   is the single source of the order total on the page; PaymentSummary is in
   TwoColumn mode so its own Summary/Merchant totals are suppressed.
   ======================================================================== */
/* Order Summary heading: a full-bleed blue header row that matches the left
   column's .summary-card__header. The sidebar wrapper has 1.5rem padding and
   rounded corners, so the header uses negative margins to reach the box edges,
   and the body restores the horizontal inset for the rows below. */
.order-summary__heading {
	background-color: #003366;
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	margin: -1.5rem -1.5rem 1.5rem;
	padding: 1rem 1.5rem;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.order-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-top: 2px solid #003366;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
}

.order-summary__total .cart-summary-label {
	font-weight: 700;
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
	color: #111827;
}

.order-summary__total .cart-summary-value {
	font-weight: 700;
	font-size: 1.375rem;
	color: #003366;
}

/* Payment Method card body (icon + masked value) */
.payment-method__exp {
	color: #6c757d;
	margin-left: 0.5rem;
}

.summary-card__body .fa-credit-card,
.summary-card__body .fa-money-check-dollar {
	color: #003366;
	margin-right: 0.5rem;
}

/* Transaction Summary review: the three left-column sections (Payer Information,
   Payment Method, Transaction Details) are self-contained .summary-cards, each with a
   blue header row and a white body, matching the ViewCart card style. The last card
   sits flush to the bottom of the column. */
.two-column-cart__main .summary-card:last-child {
	margin-bottom: 0;
}

/* Action Buttons */
/* Cart action bar — unified with .fixed-action-buttons (see "Fixed Action
   Buttons" below) so the Previous/Next bar looks and behaves identically across
   the single-column (ViewCart, CartSummary) and two-column (Payment, ECheck)
   layouts: a floating bar fixed above the footer on desktop and mobile. */
.cart-actions,
.fixed-action-buttons,
.form-action-bar {
	position: fixed;
	bottom: var(--footer-height);
	left: var(--sidebar-width);
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
	background: #fff;
	border-top: 1px solid #e5e7eb;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	z-index: 90;
}

/* Form action bar carries the Cart's fixed-bar pattern forward for long forms
   (Update Contact Info, Emergency Contacts, E-Alerts). Unlike the cart's
   Previous/Next split, a form's Cancel + Save group at the right edge. Content
   clearance is handled by the .shell__content:has(.form-action-bar) rule so the
   last fields never hide behind the bar. */
.form-action-bar {
	justify-content: flex-end;
}

/* Both bars shift with the collapsed sidebar. */
.shell--collapsed .cart-actions,
.shell--collapsed .fixed-action-buttons,
.shell--collapsed .form-action-bar {
	left: 72px;
}

.cart-actions-left {
	display: flex;
	gap: 1rem;
	margin-right: auto;
}

/* Wrapper for pages with cart-actions to ensure proper stretching */
.page-with-actions {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	flex: 1;
}

.page-with-actions>.cart-container,
.page-with-actions>.two-column-cart {
	flex: 1;
}

/* Cart buttons using Bootstrap styles */
.btn-cart-primary {
	color: #fff;
	background-color: #0d6efd;
	border: 1px solid #0d6efd;
	padding: 0.5rem 1.5rem;
	border-radius: 0.375rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.5;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	text-decoration: none;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
	vertical-align: middle;
}

.btn-cart-primary:hover {
	color: #fff;
	background-color: #0b5ed7;
	border-color: #0a58ca;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	text-decoration: none;
}

.btn-cart-primary:focus {
	color: #fff;
	background-color: #0b5ed7;
	border-color: #0a58ca;
	box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.btn-cart-primary:active {
	color: #fff;
	background-color: #0a58ca;
	border-color: #0a58ca;
}

.btn-cart-primary:disabled {
	color: #fff;
	background-color: #0d6efd;
	border-color: #0d6efd;
	opacity: 0.65;
	cursor: not-allowed;
}

.btn-cart-primary-with-icon::after {
	content: "\f054";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.875rem;
	margin-left: 0.25rem;
}

.empty-cart {
	text-align: center;
	padding: 3rem 1rem;
	color: #6c757d;
}

.empty-cart i {
	font-size: 4rem;
	margin-bottom: 1rem;
	color: var(--color-border);
}

/* Checkout Summary Specific Styles */
.checkout-summary-image {
	max-width: 100%;
}

.express-service-section {
	background: white;
	border-radius: var(--radius-md);
	padding: 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.express-service-section h5 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	margin-bottom: 1rem;
	color: var(--color-azure-20);
}

.express-service-question label {
	font-weight: 600;
	color: #495057;
}

/* RepeatLayout="Flow": inline input/label pairs in a <span>. Tight input-to-label gap; the gap between
   the two options is the label margin. */
.express-service-radio-list {
	gap: 0.5rem;
}

.express-service-radio-list label:not(:last-child) {
	margin-right: 1rem;
}

.express-service-note {
	font-size: 0.875rem;
	color: #6c757d;
}

.checkout-content {
	background: white;
	border-radius: var(--radius-md);
	padding: 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.edit-cart-link {
	color: #003366;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}

.edit-cart-link:hover {
	text-decoration: underline;
}

/* ========================================================================
   Transaction Summary / Payment Confirmation
   Shared checkout-summary styles for TransactionSummary.aspx,
   PaymentConfirmation.aspx, and the PaymentSummary.ascx control.
   ======================================================================== */

/* Terms / CMS content block on the summary page */
.checkout-terms {
	margin-bottom: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #495057;
}


/* Confirmation: check-mark icon beside the heading */
.confirmation-check-icon {
	height: 1.75rem;
	width: auto;
	vertical-align: middle;
	margin-right: 0.5rem;
}

/* Confirmation: thank-you / receipt-number callout */
/* Centered confirmation callout. Content is capped to a readable width and centered
   so the block reads as one cohesive message rather than a full-width banner with
   text stretched to both edges and a hollow middle. */
.confirmation-thankyou {
	background-color: #e7f1ff;
	border: 1px solid #b6d4fe;
	border-radius: var(--radius-md);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	text-align: center;
}

.confirmation-thankyou>* {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

.confirmation-thankyou__receipt {
	font-weight: 700;
	font-size: 1.0625rem;
	margin-bottom: 0.75rem;
	color: #003366;
}

.confirmation-thankyou__body {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 0.5rem;
}

.confirmation-thankyou__note {
	font-style: italic;
	font-size: 0.875rem;
	color: #495057;
}

.confirmation-voter-note {
	display: block;
	font-size: 0.875rem;
	color: #495057;
	margin-bottom: 1.5rem;
}

/* Receipt actions strip (HTML/PDF/interim/voter print) — a lightweight toolbar,
   not a data card: a labeled row of buttons with a subtle border. */
.receipt-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: var(--radius-md);
}

.receipt-actions__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: #003366;
}

.receipt-actions__label i {
	font-size: 1.125rem;
}

.receipt-actions__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* Inline wrapper panels (interim/voter) that must sit in the button row */
.receipt-actions__inline {
	display: inline-flex;
}

/* Payment Summary control sections */
.payment-summary {
	margin-bottom: 1.5rem;
}

.payment-summary__survey,
.payment-summary__thanks {
	margin-bottom: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.payment-summary__thanks ul {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.payment-summary__intro,
.payment-summary__disclaimer {
	font-size: 0.875rem;
	line-height: 1.6;
	color: #495057;
	margin: 0 0 1.5rem;
}

.summary-card {
	background: white;
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.summary-card__meta {
	padding: 0.75rem 1.5rem;
	background-color: #f8f9fa;
	border-bottom: 1px solid #e9ecef;
	font-size: 0.875rem;
	color: #495057;
}

.summary-card__header {
	background-color: #003366;
	color: white;
	padding: 1rem 1.5rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.summary-card__body {
	padding: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.summary-card__payer-name {
	font-weight: 600;
}

.summary-card__contact {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 2rem;
}

/* Email receipt modal (ModalPopupExtender) */
.modalBackground {
	background-color: rgba(0, 0, 0, 0.5);
}

.email-receipt-modal {
	background: white;
	border-radius: var(--radius-md);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	width: 480px;
	max-width: 90vw;
	overflow: hidden;
}

.email-receipt-modal__header {
	background-color: #003366;
	color: white;
	padding: 1rem 1.5rem;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: move;
}

.email-receipt-modal__body {
	padding: 1.5rem;
}

.email-receipt-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1rem;
}

@media (max-width: 768px) {
	.summary-card__contact {
		flex-direction: column;
		gap: 0.25rem;
	}

	/* Stack the item title and fee on narrow screens so neither is cramped. */
	.cart-item-header {
		flex-direction: column;
		gap: 0.25rem;
	}

	.cart-item-fees {
		align-items: flex-start;
	}

	/* Customer Selector: Show icon instead of "Customer:" label */
	.topbar__customer-icon-mobile {
		display: inline-block;
	}

	.topbar__customer-prefix {
		display: none;
	}

	/* .cart-actions mobile layout (row / 50-50) is defined with the unified
	   action-bar rules further down; see "Mobile: both bars stay fixed". */

	.donate-life-controls {
		flex-direction: column;
		align-items: flex-start;
	}

	.donate-life-amount {
		flex-wrap: wrap;
	}
}

/* ===== MODERN RADIO BUTTON STYLES ===== */

/* Hide default radio buttons */
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-border);
	border-radius: 50%;
	outline: none;
	cursor: pointer;
	position: relative;
	background-color: #fff;
	transition: all 0.2s ease;
	vertical-align: middle;
	margin: 0;
	flex-shrink: 0;
}

input[type="radio"]:hover {
	border-color: #0d6efd;
	box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

input[type="radio"]:checked {
	border-color: #0d6efd;
	background-color: #0d6efd;
	box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

input[type="radio"]:checked::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #fff;
}

input[type="radio"]:focus {
	border-color: #0d6efd;
	box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

input[type="radio"]:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	background-color: #e9ecef;
}

/* Style radio button labels */
input[type="radio"]+label {
	cursor: pointer;
	margin: 0.25rem 1rem 0.25rem 0.25rem;
	user-select: none;
	vertical-align: middle;
	line-height: 20px;
}

input[type="radio"]:disabled+label {
	cursor: not-allowed;
	opacity: 0.5;
}

/* Style for ASP.NET RadioButtonList tables */
table[id*="rdo"] td,
table[id*="radio"] td {
	padding: 0 !important;
	border: none !important;
	display: flex;
	align-items: center;
	gap: 8px;
}

table[id*="rdo"] tr,
table[id*="radio"] tr {
	display: flex;
	gap: 20px;
	margin-bottom: 12px;
}

table[id*="rdo"] tr:last-child,
table[id*="radio"] tr:last-child {
	margin-bottom: 0;
}

table[id*="rdo"],
table[id*="radio"] {
	border: none !important;
	border-collapse: separate !important;
}

/* Ensure inline-flex RadioButtonLists display properly */
table.d-inline-flex {
	display: inline-flex !important;
}

table.d-inline-flex tbody,
table.d-inline-flex tr {
	display: flex;
	align-items: center;
}

/* Radio button group spacing */
.shell__content table[id*="rdo"],
.shell__content table[id*="radio"] {
	margin-bottom: 0;
}

/* Vertical radio button lists */
table[id*="rdo"].d-flex,
table[id*="radio"].d-flex {
	flex-direction: column;
	align-items: flex-start;
}

table[id*="rdo"].d-flex tr,
table[id*="radio"].d-flex tr {
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

table[id*="rdo"].d-flex td,
table[id*="radio"].d-flex td {
	width: 100%;
}

/* ===== BOOTSTRAP-STYLE BUTTON STYLES FOR ASP.NET CONTROLS ===== */

/* Base button styles - applies to all buttons */
.shell__content input[type="submit"],
.shell__content input[type="button"],
.shell__content button:not(.topbar__toggle):not(.sidebar__toggle):not(.topbar__signout) {
	display: inline-block;
	font-weight: 600;
	line-height: 1.5;
	color: #111827;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	border-radius: 0.375rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	font-family: var(--font-body);
}

/* Primary Button (default for submit buttons) */
.shell__content input[type="submit"]:not([class*="btn-"]),
.shell__content input[type="submit"].btn-primary,
.shell__content input[type="button"].btn-primary,
.shell__content button.btn-primary,
.shell__content a.btn-primary,
.shell__content .btn-cart-primary {
	color: #fff !important;
	background-color: #0d6efd !important;
	border-color: #0d6efd !important;
}

.shell__content input[type="submit"]:not([class*="btn-"]):hover,
.shell__content input[type="submit"].btn-primary:hover,
.shell__content input[type="button"].btn-primary:hover,
.shell__content button.btn-primary:hover,
.shell__content a.btn-primary:hover,
.shell__content .btn-cart-primary:hover {
	color: #fff !important;
	background-color: #0b5ed7 !important;
	border-color: #0a58ca !important;
}

.shell__content input[type="submit"]:not([class*="btn-"]):focus,
.shell__content input[type="submit"].btn-primary:focus,
.shell__content input[type="button"].btn-primary:focus,
.shell__content button.btn-primary:focus,
.shell__content a.btn-primary:focus,
.shell__content .btn-cart-primary:focus {
	color: #fff !important;
	background-color: #0b5ed7 !important;
	border-color: #0a58ca !important;
	box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.shell__content input[type="submit"]:not([class*="btn-"]):active,
.shell__content input[type="submit"].btn-primary:active,
.shell__content input[type="button"].btn-primary:active,
.shell__content button.btn-primary:active,
.shell__content a.btn-primary:active,
.shell__content .btn-cart-primary:active {
	color: #fff !important;
	background-color: #0a58ca !important;
	border-color: #0a58ca !important;
}

/* Secondary Button: light-gray resting state with dark text and a defined border, so
   it reads clearly as a button and gives a strong contrast against the darker, white-text
   hover state below. */
.shell__content input[type="button"]:not([class*="btn-"]),
.shell__content input[type="submit"].btn-secondary,
.shell__content input[type="button"].btn-secondary,
.shell__content button.btn-secondary,
.shell__content .btn-secondary {
	color: #343a40;
	background-color: #e9ecef;
	border-color: #ced4da;
}

.shell__content input[type="button"]:not([class*="btn-"]):hover,
.shell__content input[type="submit"].btn-secondary:hover,
.shell__content input[type="button"].btn-secondary:hover,
.shell__content button.btn-secondary:hover,
.shell__content .btn-secondary:hover {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
}

.shell__content .btn-secondary:focus {
	box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
}

/* Outline Buttons */
.shell__content input[type="submit"].btn-outline-primary,
.shell__content input[type="button"].btn-outline-primary,
.shell__content button.btn-outline-primary,
.shell__content .btn-outline-primary {
	/* #0d6efd on this background was only ~4:1 contrast, failing WCAG AA (4.5:1)
	   for normal-size text. Swapped to the site's navy primary, which passes
	   comfortably (~11:1) while keeping the same light-blue outline style. */
	color: #003366;
	border-color: #003366;
	background-color: #eaf2ff;
}

.shell__content .btn-outline-primary:hover {
	color: #fff;
	background-color: #0d6efd;
	border-color: #0d6efd;
}

/* Company/Trust Express button on the login page hovers to the dark promo navy
   (slide 1 background) rather than the default primary blue. */
.shell__content .btn-outline-primary.btn-express:hover {
	background-color: #0b142f;
	border-color: #0b142f;
}

.shell__content input[type="submit"].btn-outline-secondary,
.shell__content input[type="button"].btn-outline-secondary,
.shell__content button.btn-outline-secondary,
.shell__content .btn-outline-secondary {
	color: #495057;
	border-color: #adb5bd;
	background-color: #f1f3f5;
}

.shell__content input[type="submit"].btn-outline-secondary:hover,
.shell__content input[type="button"].btn-outline-secondary:hover,
.shell__content button.btn-outline-secondary:hover,
.shell__content .btn-outline-secondary:hover {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
}

.shell__content input[type="submit"].btn-outline-danger,
.shell__content input[type="button"].btn-outline-danger,
.shell__content button.btn-outline-danger,
.shell__content .btn-outline-danger {
	color: var(--color-danger-dark);
	border-color: var(--color-danger);
	background-color: var(--color-danger-bg);
}

.shell__content input[type="submit"].btn-outline-danger:hover,
.shell__content input[type="button"].btn-outline-danger:hover,
.shell__content button.btn-outline-danger:hover,
.shell__content .btn-outline-danger:hover {
	color: #fff;
	background-color: var(--color-danger);
	border-color: var(--color-danger);
}

/* Success Button */
.shell__content input[type="submit"].btn-success,
.shell__content input[type="button"].btn-success,
.shell__content button.btn-success,
.shell__content .btn-success {
	color: #fff;
	background-color: #198754;
	border-color: #198754;
}

.shell__content .btn-success:hover {
	color: #fff;
	background-color: #157347;
	border-color: #146c43;
}

/* Danger Button */
.shell__content input[type="submit"].btn-danger,
.shell__content input[type="button"].btn-danger,
.shell__content button.btn-danger,
.shell__content .btn-danger {
	color: #fff;
	background-color: var(--color-danger);
	border-color: var(--color-danger);
}

.shell__content .btn-danger:hover {
	color: #fff;
	background-color: var(--color-danger-darker);
	border-color: var(--color-danger-darker);
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}

/* Warning Button */
.shell__content input[type="submit"].btn-warning,
.shell__content input[type="button"].btn-warning,
.shell__content button.btn-warning,
.shell__content .btn-warning {
	color: #000;
	background-color: #ffc107;
	border-color: #ffc107;
}

.shell__content .btn-warning:hover {
	color: #000;
	background-color: #ffca2c;
	border-color: #ffc720;
}

/* Info Button */
.shell__content input[type="submit"].btn-info,
.shell__content input[type="button"].btn-info,
.shell__content button.btn-info,
.shell__content .btn-info {
	color: #000;
	background-color: #0dcaf0;
	border-color: #0dcaf0;
}

.shell__content .btn-info:hover {
	color: #000;
	background-color: #31d2f2;
	border-color: #25cff2;
}

/* Light Button */
.shell__content input[type="submit"].btn-light,
.shell__content input[type="button"].btn-light,
.shell__content button.btn-light,
.shell__content .btn-light {
	color: #000;
	background-color: #f8f9fa;
	border-color: var(--color-border);
}

.shell__content .btn-light:hover {
	color: #000;
	background-color: #f8f9fa;
	border-color: #f8f9fa;
}

/* Dark Button */
.shell__content input[type="submit"].btn-dark,
.shell__content input[type="button"].btn-dark,
.shell__content button.btn-dark,
.shell__content .btn-dark {
	color: #fff;
	background-color: #111827;
	border-color: #111827;
}

.shell__content .btn-dark:hover {
	color: #fff;
	background-color: #1c1f23;
	border-color: #1a1e21;
}

/* Button Sizes */
.shell__content .btn-sm,
.shell__content input[type="submit"].btn-sm,
.shell__content input[type="button"].btn-sm {
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	border-radius: 0.25rem;
}

.shell__content .btn-lg,
.shell__content input[type="submit"].btn-lg,
.shell__content input[type="button"].btn-lg {
	padding: 0.5rem 1rem;
	font-size: 1.25rem;
	border-radius: 0.5rem;
}

/* Full width button */
.shell__content .btn-block,
.shell__content .w-100 {
	width: 100%;
	display: block;
}

/* Disabled state */
.shell__content input[type="submit"]:disabled,
.shell__content input[type="button"]:disabled,
.shell__content button:disabled {
	pointer-events: none;
	opacity: 0.65;
	cursor: not-allowed;
}

/* Disabled LinkButtons (AccessibleLinkButton renders <a class="aspNetDisabled" aria-disabled="true">).
   Gray, not a faded blue, so it can't read as clickable; !important beats the shell's !important
   btn-primary blue and the text-white utility. Solid colors rather than opacity keep the label at
   6.9:1. The license-card and title-card CTAs keep their own dashed "status" treatment. */
.shell__content a.btn.aspNetDisabled:not(.btn-link):not(.license-card__cta):not(.title-card__cta),
.shell__content a.btn.aspNetDisabled:not(.btn-link):not(.license-card__cta):not(.title-card__cta):hover,
.shell__content a.btn.aspNetDisabled:not(.btn-link):not(.license-card__cta):not(.title-card__cta):focus {
	background-color: #e9ecef !important;
	border-color: #ced4da !important;
	color: #495057 !important;
	box-shadow: none !important;
	text-decoration: none;
	opacity: 1;
	cursor: not-allowed;
	pointer-events: none;
}

/* Text-style links (btn-link, or no button class): drop the link color and underline. */
.shell__content a.btn-link.aspNetDisabled,
.shell__content a.aspNetDisabled:not(.btn) {
	background-color: transparent !important;
	border-color: transparent !important;
	color: #495057 !important;
	text-decoration: none !important;
	cursor: not-allowed;
	pointer-events: none;
}

/* Link style button */
.shell__content .btn-link {
	color: #0d6efd;
	text-decoration: underline;
	background-color: transparent;
	border-color: transparent;
}

.shell__content .btn-link:hover {
	color: #0a58ca;
	text-decoration: underline;
}

/* Button group spacing */
.shell__content .btn-group {
	display: inline-flex;
	gap: 0.5rem;
}

/* Remove default button styles that might conflict */
.shell__content input[type="submit"],
.shell__content input[type="button"],
.shell__content button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* ===== MODERN CHECKBOX STYLES ===== */

/* Hide default checkboxes */
input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-border);
	border-radius: 0.25rem;
	outline: none;
	cursor: pointer;
	position: relative;
	background-color: #fff;
	transition: all 0.2s ease;
	vertical-align: middle;
	margin: 0;
	flex-shrink: 0;
}

input[type="checkbox"]:hover {
	border-color: #0d6efd;
	box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

input[type="checkbox"]:checked {
	border-color: #0d6efd;
	background-color: #0d6efd;
	box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

/* Checkmark icon */
input[type="checkbox"]:checked::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 6px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

input[type="checkbox"]:focus {
	border-color: #0d6efd;
	box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

input[type="checkbox"]:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	background-color: #e9ecef;
}

/* Indeterminate state */
input[type="checkbox"]:indeterminate {
	border-color: #0d6efd;
	background-color: #0d6efd;
}

input[type="checkbox"]:indeterminate::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 2px;
	background-color: #fff;
	border: none;
}

/* Style checkbox labels */
input[type="checkbox"]+label {
	cursor: pointer;
	margin-left: 8px;
	margin-bottom: 0;
	user-select: none;
	vertical-align: middle;
	line-height: 1.4;
}

input[type="checkbox"]:disabled+label {
	cursor: not-allowed;
	opacity: 0.5;
}

/* For checkboxes with long labels (like affidavits), create flex container */
.card-body input[type="checkbox"]+label,
.shell__content>input[type="checkbox"]+label {
	display: inline-block;
}

/* Checkbox list styling (for ASP.NET CheckBoxList) */
table[id*="chk"] td,
table[id*="checkbox"] td {
	padding: 8px 0 !important;
	border: none !important;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

table[id*="chk"] tr,
table[id*="checkbox"] tr {
	display: flex;
	flex-direction: column;
}

table[id*="chk"],
table[id*="checkbox"] {
	border: none !important;
	border-collapse: separate !important;
}

/* Horizontal checkbox lists */
table[id*="chk"].d-inline-flex tr,
table[id*="checkbox"].d-inline-flex tr {
	flex-direction: row;
	gap: 20px;
}

table[id*="chk"].d-inline-flex td,
table[id*="checkbox"].d-inline-flex td {
	width: auto;
}

/* Switch-style checkbox (optional variant) */
input[type="checkbox"].form-switch {
	width: 40px;
	height: 20px;
	border-radius: 10px;
	background-color: var(--color-border);
	border: none;
}

input[type="checkbox"].form-switch::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #fff;
	transition: transform 0.2s ease;
	border: none;
	transform: none;
}

input[type="checkbox"].form-switch:checked {
	background-color: #0d6efd;
}

input[type="checkbox"].form-switch:checked::before {
	transform: translateX(20px);
}

/* ===== LEGACY IMAGE BUTTON REPLACEMENT ===== */

/* Hide legacy image buttons and convert to modern text buttons */
.shell__content a img[src*=".jpg"],
.shell__content a img[src*=".png"],
.shell__content a img[src*=".gif"] {
	display: none !important;
}

/* Style anchor tags that contained images as modern buttons */
.shell__content a:has(img[src*=".jpg"]),
.shell__content a:has(img[src*=".png"]),
.shell__content a:has(img[src*=".gif"]) {
	display: inline-block;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	padding: 0.5rem 1.5rem;
	font-size: 1rem;
	border-radius: 0.375rem;
	transition: all 0.15s ease-in-out;
	font-family: var(--font-body);
	border: 1px solid transparent;
}

/* Use the img alt or title attribute as button text */
.shell__content a:has(img[src*=".jpg"])::after,
.shell__content a:has(img[src*=".png"])::after,
.shell__content a:has(img[src*=".gif"])::after {
	content: attr(title);
	display: inline-block;
}

/* If no title, try to use a fallback based on common image names */
.shell__content a[id*="AddOther"]::after,
.shell__content a img[alt*="Other"]::after {
	content: attr(title) !important;
}

/* Primary button style for checkout/proceed buttons */
.shell__content a[id*="ShoppingCart"]::after,
.shell__content a[id*="Checkout"]::after,
.shell__content a[id*="Proceed"]::after {
	content: attr(title);
}

/* The legacy rule above overrides the with-icon chevron's content with an empty attr(title) on our cart
   links (their ids contain "ShoppingCart"). Win it back with a higher-specificity selector so the chevron
   shows; the glyph's font/size/margin still come from .btn-cart-primary-with-icon::after. */
.shell__content a.proceed-to-cart.btn-cart-primary-with-icon::after {
	content: "\f054";
}

.shell__content a[id*="ShoppingCart"]:has(img),
.shell__content a[id*="Checkout"]:has(img),
.shell__content a[id*="Proceed"]:has(img) {
	color: #fff;
	background-color: #0d6efd;
	border-color: #0d6efd;
}

.shell__content a[id*="ShoppingCart"]:has(img):hover,
.shell__content a[id*="Checkout"]:has(img):hover,
.shell__content a[id*="Proceed"]:has(img):hover {
	color: #fff;
	background-color: #0b5ed7;
	border-color: #0a58ca;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Secondary button style for "Add" or "Other" actions */
.shell__content a[id*="AddOther"]:has(img),
.shell__content a[id*="Other"]:has(img) {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
}

.shell__content a[id*="AddOther"]:has(img):hover,
.shell__content a[id*="Other"]:has(img):hover {
	color: #fff;
	background-color: #5c636a;
	border-color: #565e64;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Success button style for confirmation actions */
.shell__content a[id*="Confirm"]:has(img),
.shell__content a[id*="Submit"]:has(img),
.shell__content a[id*="Complete"]:has(img) {
	color: #fff;
	background-color: #198754;
	border-color: #198754;
}

.shell__content a[id*="Confirm"]:has(img):hover,
.shell__content a[id*="Submit"]:has(img):hover,
.shell__content a[id*="Complete"]:has(img):hover {
	color: #fff;
	background-color: #157347;
	border-color: #146c43;
}

/* Danger button style for delete/cancel actions */
.shell__content a[id*="Delete"]:has(img),
.shell__content a[id*="Remove"]:has(img),
.shell__content a[id*="Cancel"]:has(img) {
	color: #fff;
	background-color: var(--color-danger);
	border-color: var(--color-danger);
}

.shell__content a[id*="Delete"]:has(img):hover,
.shell__content a[id*="Remove"]:has(img):hover,
.shell__content a[id*="Cancel"]:has(img):hover {
	color: #fff;
	background-color: var(--color-danger-dark);
	border-color: var(--color-danger-dark);
}

/* Warning/Alert style */
.shell__content a[id*="Alert"]:has(img),
.shell__content a[id*="Warning"]:has(img) {
	color: #000;
	background-color: #ffc107;
	border-color: #ffc107;
}

/* Disabled state for red checkout button */
.shell__content a[id*="red"]:has(img),
.shell__content a[onclick*="Cart is empty"]:has(img) {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
	opacity: 0.65;
	cursor: not-allowed;
}

.shell__content a[id*="red"]:has(img):hover,
.shell__content a[onclick*="Cart is empty"]:has(img):hover {
	background-color: #6c757d;
	border-color: #6c757d;
}

/* Default button style for other image-based links */
.shell__content a:has(img[src*=".jpg"]):not([id*="ShoppingCart"]):not([id*="Checkout"]):not([id*="Proceed"]):not([id*="AddOther"]):not([id*="Other"]):not([id*="Confirm"]):not([id*="Submit"]):not([id*="Delete"]):not([id*="Remove"]):not([id*="Cancel"]):not([id*="Complete"]) {
	color: #111827;
	background-color: #f8f9fa;
	border-color: var(--color-border);
}

.shell__content a:has(img[src*=".jpg"]):not([id*="ShoppingCart"]):not([id*="Checkout"]):not([id*="Proceed"]):not([id*="AddOther"]):not([id*="Other"]):not([id*="Confirm"]):not([id*="Submit"]):not([id*="Delete"]):not([id*="Remove"]):not([id*="Cancel"]):not([id*="Complete"]):hover {
	color: #111827;
	background-color: #e9ecef;
	border-color: var(--color-border);
}

/* Icon support - if you want to add icons before text */
.shell__content a[id*="ShoppingCart"]:has(img)::before {
	content: '\f07a';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: 0.5rem;
}

.shell__content a[id*="AddOther"]:has(img)::before,
.shell__content a[id*="Other"]:has(img)::before {
	content: '\f067';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: 0.5rem;
}

/* Fallback for browsers that don't support :has() */
@supports not selector(:has(*)) {

	.shell__content a img[src*=".jpg"],
	.shell__content a img[src*=".png"],
	.shell__content a img[src*=".gif"] {
		border-radius: 0.375rem;
		padding: 0.5rem 1rem;
		background-color: #0d6efd;
		border: 1px solid #0d6efd;
	}
}

/* ===== TWO-COLUMN CART LAYOUT ===== */
.cart-header {
	background-color: var(--color-azure-20);
	color: #fff;
	padding: 1rem 2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-header__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1400px;
	margin: 0 auto;
}

.cart-header__brand {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.cart-header__logo {
	height: 40px;
	width: auto;
}

.cart-header__text {
	display: flex;
	flex-direction: column;
}

.cart-header__name {
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
}

.cart-header__sub {
	font-size: 0.875rem;
	opacity: 0.9;
}

.cart-header__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.cart-header__title h1 {
	font-size: 1.5rem;
	margin: 0;
	font-weight: 600;
}

.cart-header__title i {
	font-size: 1.25rem;
}

.cart-header__user {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	font-size: 0.9375rem;
}

.cart-header__signout {
	color: #fff;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: all 0.2s;
}

.cart-header__signout:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.5);
}

.two-column-cart {
	padding: 0;
	margin-bottom: 6rem;
}

.two-column-cart .container-fluid {
	padding: 0;
	max-width: 100%;
}

.two-column-cart .row {
	margin: 0 -0.75rem;
}

.two-column-cart .col-lg-6 {
	padding: 0 0.75rem;
	margin-top: 0;
}

.two-column-cart__main {
	background: #fff;
	border-radius: var(--radius-md);
	padding: 2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	height: 100%;
}

/* Buttons in two-column layout should span full width */
.two-column-cart .cart-actions {
	margin: auto -1.5rem -1.5rem -1.5rem;
	border-radius: 0;
	width: calc(100% + 3rem);
}

.two-column-cart__sidebar {
	background: #fff;
	border-radius: var(--radius-md);
	padding: 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	height: fit-content;
	position: sticky;
	top: 2rem;
	/* Clip full-bleed blue section headers to the rounded corners. */
	overflow: hidden;
}

/* The two-column sidebar (Payment, ECheck) is itself the single white shadow box,
   so the CartSummaryControl sections inside it (Cart Items, Donate Life, Summary)
   must not each render their own white box. Flatten them into stacked sections: no
   inner background/shadow/rounding, and let each blue header bleed full-width to the
   sidebar edges — matching the Transaction Summary order-summary sidebar.
   Scoped to .two-column-cart__sidebar so ViewCart/CartSummary keep standalone cards. */
.two-column-cart__sidebar .cart-summary-widget>.cart-items,
.two-column-cart__sidebar .cart-summary-widget>.donate-life-section,
.two-column-cart__sidebar .cart-summary-widget>.cart-summary-section {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

.two-column-cart__sidebar .cart-summary-widget>*+* {
	margin-top: 1.5rem;
}

/* In the flattened sidebar the full-bleed blue headers already delineate the sections,
   so the Cart Items / Summary sit flush: drop the .cart-items bottom margin (which
   ViewCart's standalone cards rely on) and the Summary section's own top margin. */
.two-column-cart__sidebar .cart-summary-widget>.cart-items {
	margin-bottom: 0;
}

.two-column-cart__sidebar .cart-summary-widget>.cart-summary-section {
	margin-top: 0;
}

.two-column-cart__sidebar .cart-items-header,
.two-column-cart__sidebar .donate-life-header,
.two-column-cart__sidebar .cart-summary-header {
	margin: 0 -1.5rem;
}

/* First section's header also bleeds up to the top edge of the sidebar. */
.two-column-cart__sidebar .cart-summary-widget>.cart-items:first-child .cart-items-header {
	margin-top: -1.5rem;
}

/* Headers bleed to the sidebar edges, so the section bodies should align with the
   sidebar's own 1.5rem inset rather than adding another — zero their horizontal
   padding (keep the vertical). */
.two-column-cart__sidebar .cart-item,
.two-column-cart__sidebar .cart-summary-body,
.two-column-cart__sidebar .donate-life-content {
	padding-left: 0;
	padding-right: 0;
}

/* The sidebar's own bottom padding closes the container, so the last section's body
   doesn't need its own bottom padding on top of it. */
.two-column-cart__sidebar .cart-summary-widget> :last-child .cart-summary-body {
	padding-bottom: 0;
}

/* Button sizing for the two-column bar (Bootstrap .btn). The single-column bar
   uses .btn-cart-* which carry their own sizing; both are normalized to 50/50 on
   mobile below. Positioning is shared with .cart-actions (see "Cart action bar"). */
.fixed-action-buttons .btn {
	padding: 0.75rem 2rem;
	font-weight: 600;
	min-width: 150px;
}

/* Reserve space at the bottom of scrollable content so the fixed bar never
   covers the last items in either layout. */
.two-column-cart,
.cart-container {
	margin-bottom: 5rem;
}

/* Mobile: both bars stay fixed above the footer, span full width, and split
   into a single 50/50 row. Applies identically to the single-column
   (.cart-actions) and two-column (.fixed-action-buttons) layouts. */
@media (max-width: 991.98px) {

	/* Scoped under .shell to outrank `.shell--collapsed .cart-actions { left: 72px }`
	   (equal specificity, later in source) so the bar spans the full viewport width
	   on mobile instead of staying inset by the collapsed-sidebar offset. */
	.shell .cart-actions,
	.shell .fixed-action-buttons,
	.shell .form-action-bar {
		left: 0;
		right: 0;
		flex-direction: row;
		padding: 1rem;
	}

	/* Every button in the bar shares the row equally at 50% (two buttons). */
	.cart-actions .btn-cart-primary,
	.fixed-action-buttons .btn,
	.form-action-bar .btn,
	.form-action-bar .proceed-to-cart {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		justify-content: center;
	}
}

/* Cart Summary Widget */
.cart-summary-widget__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.cart-summary-widget__header h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
}

.cart-summary-widget__edit {
	color: var(--color-azure-30);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
}

.cart-summary-widget__edit:hover {
	text-decoration: underline;
}

.cart-summary-widget__items-header {
	background-color: var(--color-azure-20);
	color: #fff;
	padding: 0.75rem 1rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	margin-bottom: 1rem;
}

.cart-summary-widget__item {
	padding: 1rem 0;
	border-bottom: 1px solid #e5e7eb;
}

.cart-summary-widget__item:last-child {
	border-bottom: none;
}

.cart-summary-widget__item-header {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
}

.cart-summary-widget__item-number {
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.cart-summary-widget__item-description {
	font-weight: 600;
	color: #111827;
}

.cart-summary-widget__item-amount {
	font-weight: 700;
	color: var(--color-azure-30);
	font-size: 1.125rem;
}

.cart-summary-widget__item-details {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

/* Donation Section */
.cart-summary-widget__donation {
	margin: 1.5rem 0;
	padding: 1rem;
	background-color: #f8f9fa;
	border-radius: var(--radius-sm);
	border: 1px solid #e5e7eb;
}

.cart-summary-widget__donation-header {
	font-weight: 700;
	color: var(--color-azure-20);
	font-size: 0.875rem;
	margin-bottom: 0.75rem;
}

.cart-summary-widget__donation-question {
	font-size: 0.9375rem;
	margin-bottom: 0.75rem;
}

.cart-summary-widget__donation-options {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.cart-summary-widget__donation-amount {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	position: relative;
}

.cart-summary-widget__donation-amount label {
	font-weight: 600;
	font-size: 0.875rem;
}

/* Summary Totals */
.cart-summary-widget__totals {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid #e5e7eb;
}

.cart-summary-widget__totals-header {
	background-color: var(--color-azure-20);
	color: #fff;
	padding: 0.75rem 1rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	margin-bottom: 1rem;
}

.cart-summary-widget__total-row {
	display: flex;
	justify-content: space-between;
	padding: 0.75rem 0;
	font-size: 0.9375rem;
}

.cart-summary-widget__total-row--grand {
	border-top: 2px solid #e5e7eb;
	margin-top: 0.5rem;
	padding-top: 1rem;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--color-azure-30);
}

/* Payment Form Styles */
.payment-intro {
	margin-bottom: 2rem;
}

.payment-intro h2 {
	font-family: var(--font-heading);
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--color-azure-20);
	margin-bottom: 0.5rem;
}

.payment-intro p {
	color: var(--color-text-muted);
	font-size: 1rem;
}

.payment-methods {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 2rem;
}

.payment-method {
	border: 2px solid #e5e7eb;
	border-radius: var(--radius-md);
	padding: 1.25rem;
	cursor: pointer;
	transition: all 0.2s;
	background: #fff;
}

.payment-method:hover {
	border-color: var(--color-azure-30);
	box-shadow: 0 2px 8px rgba(0, 77, 153, 0.1);
}

.payment-method--selected {
	border-color: var(--color-azure-30);
	background-color: var(--color-blue-lighter);
}

.payment-method__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-weight: 600;
	font-size: 1.125rem;
}

.payment-method__icon {
	font-size: 1.5rem;
	color: var(--color-azure-30);
}

.payment-method__content {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e7eb;
}

.payment-form-group {
	margin-bottom: 1.5rem;
}

.payment-form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: #374151;
}

.payment-form-group input[type="text"],
.payment-form-group select {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--color-border-control);
	border-radius: var(--radius-sm);
	font-size: 1rem;
}

.payment-form-group--inline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
}

.payment-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
}

.payment-actions {
	display: flex;
	justify-content: space-between;
	padding-top: 2rem;
	border-top: 1px solid #e5e7eb;
}

@media (max-width: 1024px) {
	.two-column-cart {
		grid-template-columns: 1fr;
	}

	.two-column-cart__sidebar {
		position: static;
	}
}

/* Tyler Checkout Embed */
.tyler-checkout-container {
	margin-top: 2rem;
	border: 1px solid #e5e7eb;
	border-radius: var(--radius-md);
	overflow: hidden;
	min-height: 400px;
}

#tylerCheckoutFrame {
	width: 100%;
	min-height: 600px;
	border: none;
}

/* Payment Method Selection Interactivity */
.payment-method {
	position: relative;
}

.payment-method:has(input[type="radio"]:checked) {
	border-color: var(--color-azure-30);
	background-color: var(--color-blue-lighter);
}

/* Enhanced form styling for payment */
.payment-form-group label {
	font-size: 0.9375rem;
}

.payment-form-group input:focus,
.payment-form-group select:focus {
	border-color: var(--color-azure-30);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 77, 153, 0.1);
}

.payment-form-group .text-danger {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.875rem;
}

/* Small button variant for donation update */
.btn-sm {
	padding: 0.375rem 0.75rem;
	font-size: 0.875rem;
}

/* Shell modifier for cart pages */
.shell--cart {
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"topbar"
		"content"
		"footer";
}

body.appshell:has(.shell--cart) {
	height: auto;
	overflow: auto;
}

body.appshell:has(.shell--cart)>form {
	height: auto;
	overflow: auto;
}

.shell--cart .shell__content {
	padding: 0;
	overflow: visible;
}

.shell--cart .shell__footer {
	margin-top: 3rem;
}

/* ===== SYSTEM PAGES (Error, Timeout, CookiesDisabled) ===== */

/* Error Page */
.error-page .card,
.timeout-page .card,
.cookies-disabled-page .card {
	border: 1px solid rgba(0, 0, 0, 0.125);
}

/* Responsive adjustments for system pages */
@media (max-width: 767.98px) {

	.error-page .card,
	.timeout-page .card,
	.cookies-disabled-page .card {
		margin: 0 1rem;
	}

	.error-page .card-body,
	.timeout-page .card-body,
	.cookies-disabled-page .card-body {
		padding: 1.5rem !important;
	}
}

/* ===== LOGIN LANDING PAGE (Default.aspx) — reworked to Figma node 1545-1628 =====

   Two-column split: a light left column with the notices + login card, and a
   dark promo column on the right. The split is full-bleed — it cancels the
   .shell__content { padding: 2rem } via negative margins so the columns run edge
   to edge, matching the design. */
.login-page--split {
	display: grid;
	/* 66% left (sign-in) / 33% right (promo carousel) — fluid ratio scales more
	   gracefully across widths than a fixed right column. */
	grid-template-columns: 2fr 1fr;
	align-items: stretch;
	/* Fill the content area between header and footer. +4rem compensates for the
	   margin: -2rem below, which pulls the grid out over .shell__content's 2rem
	   top/bottom padding — without it the columns fall 4rem short of full height. */
	min-height: calc(100% + 4rem);
	/* Break out of .shell__content's 2rem padding to go full-bleed. */
	margin: -2rem;
}

/* Left column — light blue, centers the login stack vertically and horizontally. */
.login-page__left {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	background: var(--color-blue-lighter);
	padding: 3rem 2.5rem;
}

/* Right column — dark promo gradient. No padding: the carousel fills the column
   edge-to-edge and each slide provides its own inset (so slide backgrounds reach
   the column edges). */
.login-page__right {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0;
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, #0b142f 0%, #04091e 100%);
	border-left: 1px solid rgba(255, 255, 255, 0.07);
}

/* Shared max-width for the left-column stack so the card and return link line up. */
.login-page__left>.login-card,
.login-page__left>.login-page__notice {
	width: 100%;
	max-width: 460px;
	margin: 0;
}

/* CMS notice runs wider than the login card for a more prominent, banner-like presentation. */
.login-page__left>.login-page__notice {
	max-width: 760px;
}

/* Access Indiana transition modal. Wider than Bootstrap's 500px default to comfortably
   hold the two-paragraph transition message. */
.access-indiana-modal {
	max-width: 720px;
}

/* ---- Login card ---- */
.login-card {
	border: 1px solid var(--color-blue-border);
	box-shadow: 0 10px 15px rgba(15, 23, 42, 0.08) !important;
}

.login-card__emblem {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--color-blue-lighter);
	border-radius: 18px;
}

.login-card__emblem img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.login-card__brand-name {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.5;
	margin: 0;
	color: #0b142f;
}

.login-card__rule {
	border-top: 1px solid #e5e7eb;
	opacity: 1;
}

/* "OR" divider between sign-in options. */
.login-card__or-line {
	flex: 1 1 0;
	height: 1px;
	background: #e5e7eb;
}

.login-card__or-text {
	color: #4b5563;
	letter-spacing: 0.05em;
}

/* Access Indiana primary button — brand blue with a subtle gold-tinted shadow,
   distinct from the navy .btn-primary used elsewhere. */
/* Scoped under .shell__content input[type="button"] so this out-specifies the base
   button rule (background-color: transparent) — an <asp:Button> renders as
   input[type="button"]. Higher specificity, no !important needed. */
.shell__content input[type="button"].btn-access-indiana {
	background-color: #0d6efd;
	border-color: #0d6efd;
	color: #fff;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.shell__content input[type="button"].btn-access-indiana:hover,
.shell__content input[type="button"].btn-access-indiana:focus {
	background-color: #0b5ed7;
	border-color: #0b5ed7;
	color: #fff;
}

/* Return-to-IN.gov link under the card. */
.login-page__return {
	margin: 0;
}

/* Darker than Bootstrap's .text-muted (#6c757d = 4.32:1 on the #f0f6ff column; fails AA). */
.login-page__return-text {
	color: var(--bs-gray-700);
}

/* Page-level message boxes keep the modern body font even when their content
   (CMS TagID 10049) ships legacy inline font-family styles. !important is
   required to beat the inline style attribute. */
.login-page__notice,
.login-page__notice * {
	font-family: var(--font-body) !important;
}

.login-page .login-page__notice {
	padding: 1.25rem 1.5rem;
	/* White wrapper with a neutral subtle border — sits as a clean card alongside the
	   sign-in card rather than a colored callout. */
	background-color: #fff;
	border-color: var(--bs-border-color);
}

/* ---- Promo panel (right column) ---- */
.promo-panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	max-width: 400px;
	width: 100%;
}

.promo-panel__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
}

.promo-panel__tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--color-gold);
	font-weight: 700;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.promo-panel__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: #fff;
	margin: 0;
	text-align: center;
}

.promo-panel__desc {
	color: #8fa3c7;
	font-size: 0.875rem;
	line-height: 1.4;
	margin: 0;
}

.promo-panel__plate {
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 16px 16px rgba(0, 0, 0, 0.5);
}

.promo-panel__plate img {
	display: block;
	width: 100%;
	height: auto;
}

.promo-panel__benefit {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.promo-panel__benefit i {
	flex-shrink: 0;
	font-size: 1.25rem;
	color: var(--color-gold);
}

.promo-panel__benefit p {
	color: #8fa3c7;
	font-size: 0.8125rem;
	line-height: 1.4;
}

/* ---- Home page promo banner ----
   The Blackout plate banner on Home reuses the login promo's look: the same near-black navy
   gradient as the login column, gold tag pill, white heading and muted blue-gray body copy
   (.promo-panel__tag / __title / __desc). Only the layout is banner-specific. */
.home-promo {
	background: linear-gradient(90deg, #0b142f 0%, #04091e 100%);
}

/* .card-body paints its own #fefefe background (see CARD CUSTOMIZATION), which would cover
   the gradient — let the banner's background show through, like .bg-primary .card-body. */
.home-promo .card-body {
	background-color: transparent;
}

.home-promo__plate {
	flex: none;
	height: 90px;
	width: auto;
	border-radius: 12px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.home-promo__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
	max-width: 640px;
}

.home-promo__text .promo-panel__title {
	text-align: inherit;
}

@media (min-width: 768px) {
	.home-promo__text {
		align-items: flex-start;
		text-align: left;
	}
}

/* ---- Home page: "Other services" note ----
   The trailing CMS 10000 sentence sits under the service tiles as a quiet note, not a tile. */
.home-services__note {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: var(--bs-gray-700);
}

.home-services__note i {
	margin-top: 0.2rem;
	color: var(--color-azure-30);
}

/* ---- Home page module tiles ----
   A primary-navy band frames the four module tiles as one section (the light-blue page ground
   alone didn't separate them from the cards above and below). Every tile is identical — white
   card, one navy-on-light-blue icon chip, the same chip as the page card headings — so no
   tile reads as more important by color. Gold marks hover/focus, echoing the brand accent. */
.home-modules {
	padding: 1.25rem;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--color-azure-20) 0%, #00264d 100%);
}

.home-module-tile {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	padding: 1.1rem 1.25rem;
	background: #fff;
	border: 2px solid transparent;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	color: var(--color-azure-11);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.home-module-tile:link,
.home-module-tile:visited,
.home-module-tile:active {
	color: var(--color-azure-11);
	text-decoration: none;
}

/* :hover repeats color/decoration so Default.css's global a:hover (red, underlined) can't win. */
.home-module-tile:hover {
	text-decoration: none;
	border-color: var(--color-gold);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
	transform: translateY(-2px);
	color: var(--color-azure-11);
}

/* White ring outside the gold border so the focus indicator stays visible on the navy band. */
.home-module-tile:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	border-color: var(--color-gold);
}

.home-module-tile__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.home-module-tile__icon {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	transition: background 0.15s ease, color 0.15s ease;
}

.home-module-tile:hover .home-module-tile__icon,
.home-module-tile:focus-visible .home-module-tile__icon {
	background: var(--color-azure-20);
	color: #fff;
}

.home-module-tile__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-azure-20);
}

.home-module-tile__chevron {
	margin-left: auto;
	color: var(--color-azure-30);
	transition: transform 0.15s ease;
}

.home-module-tile:hover .home-module-tile__chevron {
	transform: translateX(3px);
}

.home-module-tile__desc {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--bs-gray-700);
}

@media (prefers-reduced-motion: reduce) {

	.home-module-tile,
	.home-module-tile__chevron {
		transition: none;
	}

	.home-module-tile:hover,
	.home-module-tile:hover .home-module-tile__chevron {
		transform: none;
	}
}

/* ---- Home page "Need Help?" options ----
   White panels with a visible border and an icon chip replace the near-invisible gray boxes,
   so each option reads as its own block, matching the bordered panels on My Information. */
.home-help-item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	height: 100%;
	padding: 1.1rem 1.25rem;
	background: #fff;
	border: 1px solid var(--color-blue-border);
	border-left: 4px solid var(--color-azure-20);
	border-radius: 10px;
}

.home-help-item__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

.home-help-item__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.home-help-item__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-azure-20);
}

.home-help-item__meta {
	margin: 0 0 0.35rem;
	font-size: 0.875rem;
	color: var(--bs-gray-700);
}

.home-help-item__link,
.home-help-item__link:link,
.home-help-item__link:visited,
.home-help-item__link:active {
	align-self: flex-start;
	line-height: 1.5;
	font-weight: 700;
	color: var(--color-azure-20);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.home-help-item__link:hover {
	color: var(--color-azure-30);
	text-decoration: underline;
}

.home-help-item__link i {
	margin-left: 0.25rem;
	font-size: 0.8em;
}

/* ---- Promo carousel (wraps the promo panels in the right column) ---- */
/* Fills the column edge-to-edge AND top-to-bottom so each slide's background covers the
   whole column. The inset/padding lives on the slides, not here. */
.promo-carousel {
	position: relative;
	z-index: 1;
	width: 100%;
	/* Grow to fill the full column height so slide backgrounds stretch top-to-bottom. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* Equal-height slides: stack every slide in the same grid cell so the carousel always
   sizes to the TALLEST slide and the page height never shifts on rotation. Slides stay
   rendered (not display:none) so the cell reflects all of them; carousel-fade's opacity
   handles which one is visible. pointer-events guards clicks on the hidden slide.
   flex:1 lets the grid fill the full carousel height. */
.promo-carousel .carousel-inner {
	flex: 1 1 auto;
	display: grid;
	/* Single row that fills the carousel's full height (the inner is a flex:1 child),
	   so the stacked slides stretch top-to-bottom instead of sizing to content. */
	grid-template-rows: minmax(0, 1fr);
}

/* Each slide provides its own inset (so slide backgrounds are full-bleed to the column
   edges) and centers its .promo-panel content stack within that inset.
   The default (slide 1) carries the column's navy gradient explicitly rather than relying
   on the transparent column showing through — without an opaque background, fading slide 1
   IN over slide 2 wouldn't cover it, causing a jump when slide 2 snaps out at the end of
   the fade. An opaque background on every slide makes the fade symmetric in both directions. */
.promo-carousel .carousel-item {
	display: flex;
	grid-area: 1 / 1;
	justify-content: center;
	align-items: center;
	padding: 3rem;
	pointer-events: none;
	background: linear-gradient(90deg, #0b142f 0%, #04091e 100%);
}

.promo-carousel .carousel-item.active {
	pointer-events: auto;
}

/* Indicator bullets: white dots centered along the bottom of the carousel. The active
   dot is solid white; inactive dots are semi-transparent.
   Bootstrap 5.3 ships these as 30x3px bars: content-box sizing with transparent 10px
   top/bottom borders and background-clip:padding-box, plus a higher-specificity
   [data-bs-theme=dark] rule that forces a #000 background. We scope with the #promoCarousel
   id to outrank all of that and fully reset the bar defaults into small round dots. */
#promoCarousel .carousel-indicators {
	z-index: 2;
	margin-bottom: 1.4rem;
}

#promoCarousel .carousel-indicators [data-bs-target] {
	box-sizing: border-box;
	/* Pin the flex sizing: Bootstrap's default flex:0 1 auto lets flex-basis/shrink
	   stretch the dots into wide ovals. flex:0 0 10px + max-width holds a fixed 10px. */
	flex: 0 0 10px;
	width: 10px;
	max-width: 10px;
	height: 10px;
	/* The global .shell__content button {...} rule adds padding to every button in the
	   shell; without this reset it widens the dots into ovals. */
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	background-clip: border-box;
	opacity: 0.4;
	transition: opacity 0.3s ease;
}

#promoCarousel .carousel-indicators .active {
	opacity: 1;
}

/* Detail popup tabs (TitleDetailPopup.ascx / LicenseDetailPopup.ascx) — underline-style
   Bootstrap nav-tabs. The global .shell__content button:not(...):not(...):not(...) reset
   above outranks class-only selectors (including Bootstrap's own .nav-tabs .nav-link.active),
   flattening color/background/border to the same look on active and inactive tabs. We scope
   with the tab-list IDs to outrank it without !important. */
#titleDetailTabs .nav-link,
#licenseDetailTabs .nav-link {
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	margin-bottom: -1px;
	/* Normalizes casing across labels regardless of source (hardcoded vs. resource-driven);
	   some resx keys (e.g. Legal_Address) are shared with 27+ other files and are not
	   all-caps there, so we transform for display here rather than edit the shared resx. */
	text-transform: uppercase;
}

#titleDetailTabs .nav-link:hover,
#licenseDetailTabs .nav-link:hover {
	color: var(--color-azure-20);
	border-bottom-color: #c9d4e0;
}

#titleDetailTabs .nav-link.active,
#licenseDetailTabs .nav-link.active {
	color: var(--color-azure-20);
	font-weight: 700;
	background-color: transparent;
	border-bottom-color: var(--color-azure-20);
}

/* The panel keeps its ~400px content width, centered within the full-width slide. */
.promo-carousel .carousel-item .promo-panel {
	max-width: 400px;
	height: 100%;
	justify-content: center;
}

/* Alternate slides (.promo-carousel__slide--alt) get a full-bleed darkened steel-blue gradient
   (based on #2E6A96) — cool contrast against slide 1's near-black navy, dark enough that the
   frosted translucent-white tag/benefit treatment (inherited from .promo-panel) reads well.
   Currently unused (the REAL ID slide was retired) but kept for the next promo slide. */
.promo-carousel .carousel-item.promo-carousel__slide--alt {
	background: linear-gradient(135deg, #245475 0%, #183a52 100%);
}

/* Lighten the muted body/desc text on alternate slides: the inherited #8fa3c7 is tuned for slide 1's
   near-black navy and falls short of WCAG AA on this lighter steel-blue. Not pure white. */
.promo-carousel__slide--alt .promo-panel__desc,
.promo-carousel__slide--alt .promo-panel__benefit p {
	color: #c2d0e2;
}

/* Stack to a single column on tablet/mobile; hide the promo panel to keep the
   sign-in flow front-and-center on small screens. */
@media (max-width: 991.98px) {
	.login-page--split {
		grid-template-columns: 1fr;
	}

	.login-page__right {
		display: none;
	}

	.login-page__left {
		padding: 2rem 1rem;
	}
}

/* At <=576px .shell__content padding drops from 2rem to 16px, so match the
   full-bleed margin to it. This breakpoint also carries a global
   .shell__content * { max-width: 100% !important } rule; that pins the grid to the
   content-box width while the negative margin still shifts it left, leaving a strip
   of background exposed on the right. Exempt the split so it truly runs edge to
   edge. */
@media (max-width: 576px) {
	.shell__content .login-page--split {
		margin: -16px;
		min-height: calc(100% + 32px);
		max-width: none !important;
	}

	.login-page__left {
		padding: 1.5rem 1rem;
	}

	/* Mobile priority: lead with the sign-in card, drop the CMS notice below it, and
	   keep the Return-to-IN.gov link last. (.login-page__left is a flex column, so
	   order controls the stacking.) */
	.login-page__left>.login-card {
		order: 1;
	}

	.login-page__left>.login-page__notice {
		order: 2;
	}

	.login-page__left>.login-page__return {
		order: 3;
	}
}

/* ===== AUTH/REGISTRATION PAGES ===== */

/* Express, DLNSignin, and UserRegistration pages */
.express-page .card,
.test-access-page .card,
.dlnsignin-page .card,
.account-verification-page .card,
.forgot-password-page .card,
.reset-account-page .card,
.new-account-page .card {
	border: 1px solid rgba(0, 0, 0, 0.125);
}

/* Radio button lists styling */
.express-page .form-check,
.dlnsignin-page .form-check,
.forgot-password-page .form-check {
	display: inline-block;
	margin-right: 1rem;
}

/* Override browser autofill background color */
.express-page input:-webkit-autofill,
.express-page input:-webkit-autofill:hover,
.express-page input:-webkit-autofill:focus,
.test-access-page input:-webkit-autofill,
.test-access-page input:-webkit-autofill:hover,
.test-access-page input:-webkit-autofill:focus,
.dlnsignin-page input:-webkit-autofill,
.dlnsignin-page input:-webkit-autofill:hover,
.dlnsignin-page input:-webkit-autofill:focus,
.forgot-password-page input:-webkit-autofill,
.forgot-password-page input:-webkit-autofill:hover,
.forgot-password-page input:-webkit-autofill:focus,
.new-account-page input:-webkit-autofill,
.new-account-page input:-webkit-autofill:hover,
.new-account-page input:-webkit-autofill:focus,
.reset-account-page input:-webkit-autofill,
.reset-account-page input:-webkit-autofill:hover,
.reset-account-page input:-webkit-autofill:focus,
.account-verification-page input:-webkit-autofill,
.account-verification-page input:-webkit-autofill:hover,
.account-verification-page input:-webkit-autofill:focus,
.contact-no-auth-page input:-webkit-autofill,
.contact-no-auth-page input:-webkit-autofill:hover,
.contact-no-auth-page input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px white inset !important;
	box-shadow: 0 0 0 1000px white inset !important;
	-webkit-text-fill-color: #111827 !important;
}

/* Responsive adjustments for auth pages */
@media (max-width: 767.98px) {

	.express-page .card,
	.test-access-page .card,
	.dlnsignin-page .card,
	.account-verification-page .card,
	.forgot-password-page .card,
	.reset-account-page .card,
	.new-account-page .card {
		margin: 0 1rem;
	}

	.express-page .card-body,
	.test-access-page .card-body,
	.dlnsignin-page .card-body,
	.account-verification-page .card-body,
	.forgot-password-page .card-body,
	.reset-account-page .card-body,
	.new-account-page .card-body {
		padding: 1.5rem !important;
	}
}

/* ===== COMPANY/TRUST USER ID LOOKUP (CompanySignon.ascx) =====
   A labeled panel under the User ID field: heading, the 9-digit Federal ID search, one status
   line, then each found ID as a full-width row that fills the User ID field when picked. The
   control renders on every Company/Trust sign-in (Express, Register, DLNSignin, Unsubscribe,
   RV, UserRegistration). Selectors carry .shell__content where they must outrank the shell's
   global input / button resets. */
.company-lookup {
	border: 1px solid var(--color-blue-border);
	border-left: 4px solid var(--color-azure-20);
	border-radius: 10px;
	background: var(--color-blue-lighter);
	padding: 1.125rem 1.25rem;
}

.company-lookup__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.375rem;
	color: var(--color-azure-20);
}

.company-lookup__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-azure-20);
}

.company-lookup__intro {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	color: #374151;
}

.company-lookup__search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.shell__content .company-lookup__search .form-control {
	flex: 1 1 auto;
	width: auto !important;
	max-width: 14rem;
	min-width: 0;
	min-height: 44px;
}

.company-lookup__search .btn {
	flex: none;
	min-height: 44px;
	padding-inline: 1.25rem;
}

.company-lookup__results {
	margin-top: 1rem;
}

.company-lookup__results:not(:has(.company-lookup__status:not(:empty))) {
	display: none;
}

.company-lookup__status {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.company-lookup__status:empty {
	display: none;
}

.company-lookup__status i {
	margin-top: 0.2rem;
}

.company-lookup__status--found {
	color: #0a6640;
}

.company-lookup__status--error {
	color: var(--color-error);
}

.company-lookup__list {
	display: grid;
	gap: 0.5rem;
}

.company-lookup__list:empty {
	display: none;
}

/* Result row: the ID on the left, the action on the right; the whole row is the target.
   Scoped through the list (and button[type]) to outrank the shell's global
   `.shell__content button:not(...):not(...):not(...)` reset, whose :not()s out-weigh one class. */
.shell__content .company-lookup__list button.company-lookup__choice[type="button"] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	min-height: 48px;
	padding: 0.625rem 1rem;
	border: 1px solid #b6c6dd;
	border-radius: 8px;
	background: #fff;
	color: #111827;
	text-align: left;
	box-shadow: none;
}

.shell__content .company-lookup__list button.company-lookup__choice[type="button"]:hover {
	border-color: var(--color-azure-30);
	background: #fff;
}

.shell__content .company-lookup__list button.company-lookup__choice[type="button"]:focus-visible {
	outline: 3px solid rgba(13, 110, 253, 0.45);
	outline-offset: 2px;
}

.company-lookup__choice-id {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.company-lookup__choice-action {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-azure-30);
	white-space: nowrap;
}

.shell__content .company-lookup__list button.company-lookup__choice.is-selected[type="button"] {
	border-color: #0a6640;
	background: #ecf7f1;
}

.company-lookup__choice.is-selected .company-lookup__choice-action {
	color: #0a6640;
}

.company-lookup__next {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	color: #374151;
}

.company-lookup__next[hidden] {
	display: none;
}

.company-lookup__next i {
	margin-top: 0.2rem;
	color: #0a6640;
}

/* User ID + "Look up my User ID" toggle: the ID box keeps its 8-digit width and the toggle wraps
   under it rather than being pushed off a phone screen. */
.company-signon__userid-row {
	flex-wrap: wrap;
}

.shell__content .company-signon__userid-row .form-control {
	width: 8rem !important;
	flex: none;
}

.company-signon__lookup-toggle {
	min-height: 44px;
}

/* ===== SIGN-IN & REGISTRATION phone layout =====
   Default (sign-in landing), Register (account setup), Express and DLNSignin. */
@media (max-width: 991.98px) {

	/* Express / DLNSignin: Sign In on top at full width, Cancel full width beneath it. */
	:is(.express-page, .dlnsignin-page) .card-body .d-flex.justify-content-end.gap-3 {
		flex-direction: column-reverse;
		gap: 0.75rem !important;
	}

	:is(.express-page, .dlnsignin-page) .card-body .d-flex.justify-content-end.gap-3>.btn {
		width: 100%;
		min-height: 44px;
	}

	/* Access Indiana transition popup: Continue on top and full width, the opt-out under it. */
	.access-indiana-modal .modal-footer {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.75rem;
	}

	.access-indiana-modal .modal-footer>.btn {
		width: 100%;
		min-height: 44px;
		margin: 0;
	}

	.access-indiana-modal .modal-footer>.form-check {
		margin: 0 !important;
		min-height: 44px;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding-left: 0;
	}

	.access-indiana-modal .modal-footer .form-check-input {
		float: none;
		margin: 0;
	}

	.access-indiana-modal .modal-title {
		font-size: 1.125rem;
	}
}

@media (max-width: 767.98px) {

	/* Individual / Company radios. Register's rblAccountType is Flow layout (bare input+label
	   siblings, no per-option wrapper), so "a Company or Trust account" wrapped away from its radio.
	   A two-column grid pairs each radio with its label, one option per 44px row. DLNSignin's
	   optCompany renders as a table. */
	.register-page span[id$="rblAccountType"] {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 0.625rem;
	}

	.register-page span[id$="rblAccountType"] input[type="radio"] {
		margin: 0;
	}

	.register-page span[id$="rblAccountType"] label {
		display: flex;
		align-items: center;
		min-height: 44px;
		margin: 0 !important;
	}

	.dlnsignin-page table[id$="optCompany"] :is(tbody, tr) {
		display: flex;
		flex-wrap: wrap;
		column-gap: 1.75rem;
	}

	.dlnsignin-page table[id$="optCompany"] td {
		display: flex !important;
		align-items: center;
		gap: 0.5rem;
		min-height: 44px;
		width: auto !important;
		padding: 0 !important;
	}

	.dlnsignin-page table[id$="optCompany"] input[type="radio"]+label {
		margin: 0;
	}

	/* DLN / SSN / ZIP / Federal ID boxes keep their 2-5 digit widths. The phone rule
	   `.shell__content input[type=text|password] { width: 100% !important }` stretched them. */
	.shell__content :is(.register-page, .express-page, .dlnsignin-page) input:is([type="text"], [type="password"]):is([id$="txtFID"], [id$="txtLegalZipCode"]) {
		width: 6rem !important;
	}

	.shell__content :is(.register-page, .express-page, .dlnsignin-page) input[type="text"]:is([id$="txtDLN1"], [id$="txtDLN3"]) {
		width: 5rem !important;
	}

	.shell__content :is(.register-page, .express-page, .dlnsignin-page) input[type="text"][id$="txtDLN2"] {
		width: 3.75rem !important;
	}

	/* "Help" (license number) link was a 31x16 target. */
	:is(.register-page, .dlnsignin-page) .popupDLN {
		display: inline-block;
		padding: 0.5rem 0.25rem;
		margin: -0.5rem -0.25rem;
	}

	/* Consent text: an all-bold paragraph is hard to read on a phone. Regular weight in a quiet
	   frame keeps it clearly separate from the form. */
	:is(.register-page, .express-page, .dlnsignin-page) [id$="pnlLoginDisclaimer"]>div,
	:is(.register-page, .dlnsignin-page) .p-0>.mt-4.fw-bold {
		font-weight: 400 !important;
		font-size: 0.875rem;
		line-height: 1.5;
		color: #374151;
		padding: 0.875rem 1rem;
		background: #f8f9fa;
		border-radius: 8px;
	}

	/* Company/Trust lookup on phones: tighter panel, search field fills the row. */
	.company-lookup {
		padding: 1rem;
	}

	.shell__content .company-lookup__search .form-control {
		max-width: none;
	}
}

@media (max-width: 576px) {

	/* Default.aspx: the split runs edge to edge (margin -16px) with min-height 100% + 32px, but
	   the single grid track was sized to the content box + 3px, so the left column overflowed
	   the screen. Give the track the full width explicitly. */
	.shell__content .login-page--split {
		grid-template-columns: minmax(0, 1fr);
		width: calc(100% + 32px);
	}

	/* "Return to IN.gov" was a 21px-tall link. */
	.login-page__return {
		min-height: 44px;
	}
}

/* ===== QUICK QUOTE PAGES =====
   Public-master card like Express (navy header card). Input view is one card with
   sections; fee results reuse the legacy nested-table fee grids, restyled here. */
.quickquote-page .card {
	border: 1px solid rgba(0, 0, 0, 0.125);
}

.quickquote-page__section:not(:first-child) {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bs-gray-300);
}

/* RadioButtonList renders Flow layout (spans) so items can sit inline with spacing */
.quickquote-page__radios input[type="radio"] {
	margin-right: 0.35rem;
	margin-top: 0.25rem;
	vertical-align: top;
}

/* Bootstrap makes labels inline-block, so a label too long for the rest of the line
   jumps below its radio. Cap the width so the text wraps beside the radio instead. */
.quickquote-page__radios input[type="radio"]+label {
	display: inline-block;
	max-width: calc(100% - 4rem) !important;
	margin-right: 1.25rem;
	vertical-align: top;
}

/* Fee grids: the shared .GridView_Default rules left-align every cell with !important,
   which overrides the align="right" / align="center" the fee templates rely on. */
.quickquote-page .GridView_Default td[align="right"] {
	text-align: right !important;
}

.quickquote-page .GridView_Default td[align="center"] {
	text-align: center !important;
}

/* The fee templates nest a table inside every header/item/footer cell. Padding lives on
   the outer cell only (so description and amount edges line up across header, rows
   and footer); the nested cells carry none and inherit the row's font size. */
.quickquote-page .GridView_Default td td,
.quickquote-page .GridView_Default th td {
	padding: 0;
	font-size: inherit;
}

.quickquote-page .GridView_Default>tbody>tr>td {
	padding: 12px 16px;
	font-size: 0.9rem;
}

.quickquote-page__total {
	border-top: 2px solid var(--color-azure-20);
}

@media (max-width: 767.98px) {
	.quickquote-page .card {
		margin: 0 1rem;
	}

	.quickquote-page .card-body {
		padding: 1.5rem !important;
	}
}

/* ===== CONTACT AND DOWNTIME PAGES ===== */

/* ContactNoAuth, DownTimeAccess pages */
.contact-no-auth-page .card,
.downtime-access-page .card {
	border: 1px solid rgba(0, 0, 0, 0.125);
}

/* Responsive adjustments for contact/downtime pages */
@media (max-width: 767.98px) {

	.contact-no-auth-page .card,
	.downtime-access-page .card {
		margin: 0 1rem;
	}

	.contact-no-auth-page .card-body,
	.downtime-access-page .card-body {
		padding: 1.5rem !important;
	}
}

/* RadioButtonList spacing for Individual/Company selection */
.express-page #ctl00_ctl00_ShellContent_PageContent_optCompany td,
.dlnsignin-page #ctl00_ctl00_ShellContent_PageContent_optCompany td,
.forgot-password-page #ctl00_ctl00_ShellContent_PageContent_optCompany td,
.new-account-page #ctl00_ctl00_ShellContent_PageContent_optCompany td,
.express-page #ctl00_ctl00_ShellContent_PageContent_optCompany td {
	padding-right: 1rem;
}

.express-page #ctl00_ctl00_ShellContent_PageContent_optCompany td:last-child,
.dlnsignin-page #ctl00_ctl00_ShellContent_PageContent_optCompany td:last-child,
.forgot-password-page #ctl00_ctl00_ShellContent_PageContent_optCompany td:last-child,
.new-account-page #ctl00_ctl00_ShellContent_PageContent_optCompany td:last-child,
.express-page #ctl00_ctl00_ShellContent_PageContent_optCompany td:last-child {
	padding-right: 0;
}

/* ===== ECHECK PAYMENT PAGE ===== */

.payment-container {
	background: var(--color-white-solid, #FFF);
	margin-bottom: 0;
	border-radius: 8px;
}

/* The Select Payment Method + eCheck headings use the shared .page-heading / .page-subheading classes
   (same as ViewCart / TransactionSummary / PaymentConfirmation) so the whole payment flow is consistent.
   No .payment-container h2 override here — a descendant rule would silently outrank .page-heading and pull
   these two pages away from the rest of the flow. */
#embedded-checkout-container {
	margin-top: 1rem;
	min-height: 400px;
}

/* "Start over" link in the session-expiry warning banner. */
.session-expiry-reload {
	padding: 0;
	margin-left: 0.5rem;
}

/* Proceed-to-cart links across the registration / title / license / PLP flows. These were icon-only images
   (proceedcheckout.jpg); they now reuse the payment-flow button (.btn-cart-primary .btn-cart-primary-with-icon)
   with the localized Proceed_to_Checkout label, so the whole checkout path shares one button style.

   Disabled / blocked variant (hypShoppingCartred): muted, and — per design — NO hover/focus/active feedback so
   it reads as inert. The override is scoped under .shell__content with !important to beat the shell's own
   !important btn-cart-primary state rules. */
/* Cart glyph before the label (the chevron after comes from .btn-cart-primary-with-icon). Scoped to
   .proceed-to-cart so it lands only on the cart links, not the payment "Next" / "Add to Cart" buttons that
   also use .btn-cart-primary-with-icon. */
.proceed-to-cart::before {
	content: "\f07a";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.875rem;
	margin-right: 0.25rem;
}

/* Blocked state is gray, not a faded blue: a lighter blue still reads as a clickable primary button.
   !important beats the shell's !important btn-cart-primary blue; the same gray is held on hover, focus
   and active so it stays inert. Text is the darker gray for contrast on the light fill. */
.shell__content .btn-cart-primary.proceed-to-cart--disabled,
.shell__content .btn-cart-primary.proceed-to-cart--disabled:hover,
.shell__content .btn-cart-primary.proceed-to-cart--disabled:focus,
.shell__content .btn-cart-primary.proceed-to-cart--disabled:active {
	background-color: #e9ecef !important;
	border-color: #ced4da !important;
	color: #495057 !important;
	box-shadow: none !important;
	opacity: 1;
	cursor: not-allowed;
}

/* The blocked link is keyboard-reachable (its click explains why checkout is unavailable), so it
   still needs a visible focus indicator even though hover/active feedback is suppressed. */
.shell__content .btn-cart-primary.proceed-to-cart--disabled:focus-visible {
	outline: 2px solid var(--color-azure-20) !important;
	outline-offset: 2px;
}

.echeck-form {
	max-width: 100%;
}

.echeck-form .form-group {
	margin-bottom: 1.5rem;
}

.echeck-form .form-label {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	color: #111827;
	margin-bottom: 0.5rem;
}

.echeck-form .form-control,
.echeck-form .form-select {
	width: 100%;
	padding: 0.75rem;
	font-size: 1rem;
	border: 1px solid #ced4da;
	border-radius: var(--radius-sm);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.echeck-form .form-control:focus,
.echeck-form .form-select:focus {
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.echeck-form .bank-name-label {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-style: italic;
}

.echeck-form .field-validation-error {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: var(--color-error);
}

.echeck-form .form-check {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.echeck-form .form-check-input {
	margin-top: 0.25rem;
	flex-shrink: 0;
}

.echeck-form .form-check-label {
	font-size: 0.875rem;
	color: #495057;
}

/* Bank-not-found routing confirmation: center the checkbox with its label and tighten the gap. Overrides the
   shared .echeck-form .form-check top-alignment, and resets Bootstrap's float / 1.5em left-pad on the input. */
.echeck-form .form-check.confirm-routing {
	align-items: center;
	gap: 0.375rem;
	padding-left: 0;
}

.echeck-form .confirm-routing .form-check-input {
	margin: 0;
	float: none;
}

.echeck-form .confirm-routing .form-check-label {
	margin: 0;
}

.echeck-form .form-actions {
	display: flex;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e9ecef;
}

.echeck-form .btn-primary,
.echeck-form .btn-secondary {
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.echeck-form .btn-primary {
	background-color: #003366;
	color: white;
}

.echeck-form .btn-primary:hover {
	background-color: #002244;
}

.echeck-form .btn-secondary {
	background-color: #6c757d;
	color: white;
}

.echeck-form .btn-secondary:hover {
	background-color: #5a6268;
}

/* Check Information Help Section */
.check-info-help {
	background: #f8f9fa;
	border-radius: var(--radius-md);
	padding: 2rem;
	margin-top: 2rem;
}

.check-info-help__title {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-azure-20);
	margin-bottom: 0.75rem;
}

.check-info-help__intro {
	color: #495057;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

.check-info-help__diagram {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.check-info-help__check-sample {
	background: white;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 1.5rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.check-info-help__check-header {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.check-info-help__check-number {
	background: #e7f3ff;
	border: 1px solid #0066cc;
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	font-weight: 600;
	color: #0066cc;
}

.check-info-help__check-body {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

.check-info-help__memo-line,
.check-info-help__amount-line {
	color: #6c757d;
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

.check-info-help__check-numbers {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	font-family: 'Courier New', monospace;
	font-size: 1rem;
}

.check-info-help__number {
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	border: 2px solid;
}

.check-info-help__number--check {
	background: #e7f3ff;
	border-color: #0066cc;
	color: #0066cc;
}

.check-info-help__number--routing {
	background: #fff3e0;
	border-color: #ff9800;
	color: #e65100;
}

.check-info-help__number--account {
	background: #f3e5f5;
	border-color: #9c27b0;
	color: #6a1b9a;
}

.check-info-help__legend {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	flex-wrap: wrap;
}

.check-info-help__legend-item {
	display: flex;
	align-items: start;
	gap: 0.75rem;
	flex: 0 0 auto;
}

.check-info-help__legend-marker {
	width: 24px;
	height: 24px;
	border-radius: var(--radius-sm);
	border: 2px solid;
	flex-shrink: 0;
	margin-top: 0.125rem;
}

.check-info-help__legend-marker--check {
	background: #e7f3ff;
	border-color: #0066cc;
}

.check-info-help__legend-marker--routing {
	background: #fff3e0;
	border-color: #ff9800;
}

.check-info-help__legend-marker--account {
	background: #f3e5f5;
	border-color: #9c27b0;
}

.check-info-help__legend-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.check-info-help__legend-text strong {
	color: #111827;
	font-size: 0.95rem;
}

.check-info-help__legend-text span {
	color: #6c757d;
	font-size: 0.875rem;
}

.check-info-help__note {
	background: white;
	border-left: 4px solid var(--color-azure-20);
	padding: 1rem;
	margin: 0;
	font-size: 0.875rem;
	color: #495057;
	border-radius: var(--radius-sm);
}

.check-info-help__note strong {
	color: var(--color-azure-20);
}

@media (max-width: 767.98px) {
	.check-info-help {
		padding: 1.5rem;
	}

	.check-info-help__check-numbers {
		flex-direction: column;
	}

	.check-info-help__number {
		width: 100%;
		text-align: center;
	}
}

.alert {
	padding: 1rem;
	margin-bottom: 1.5rem;
	border-radius: var(--radius-sm);
}

.alert-danger {
	background-color: var(--bs-danger-bg-subtle);
	border: 1px solid var(--bs-danger-border-subtle);
	color: var(--bs-danger-text-emphasis);
}

.alert-warning {
	background-color: var(--color-warning-bg);
	border: 1px solid #ffc107;
	color: var(--color-warning-text);
	font-weight: bold;
}

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

	.echeck-form .form-actions {
		flex-direction: column;
	}

	.echeck-form .btn-primary,
	.echeck-form .btn-secondary {
		width: 100%;
	}
}

/* ===== MYINFO PAGES ===== */


.myinfo-emergencycontacts-page table tr td {
	padding-bottom: 1rem;
}

.myinfo-emergencycontacts-page table tr:last-child td {
	padding-bottom: 0;
}

/* E-Alerts */

.myinfo-ealerts-page .form-check-input {
	margin-top: 0.25rem;
	vertical-align: middle;
	border: none;
}

.myinfo-ealerts-page .form-check-input:focus {
	border: none;
	box-shadow: none;
}

/* RadioButtonList spacing for phone type (Domestic/International) in UpdateInformation control */
.myinfo-updatemailingaddress-page span[id*="rblType"] input[type="radio"],
.myinfo-updateinfo-page span[id*="rblType"] input[type="radio"] {
	margin-right: 0.35rem;
}

.myinfo-updatemailingaddress-page span[id*="rblType"] label,
.myinfo-updateinfo-page span[id*="rblType"] label {
	margin-right: 1rem;
}

/* Label/value tables in AddressView + ContactView (contact info confirm step).
   Fixed label width keeps the two separate tables aligned; padding stops long
   labels ("Legal Township:") butting into their values. */
.info-view-table td {
	padding: 0.2rem 0;
	vertical-align: top;
}

.info-view-table td:first-child {
	width: 10rem;
	padding-right: 1rem;
	white-space: nowrap;
}

/* Mailing-address confirmation checkbox: match body text size */
.myinfo-updatemailingaddress-page .form-check label {
	font-size: 1rem;
}

/* Consistent vehicle-identity block for data-grid cells.
   The Registration / Insurance / Title / License grids each rendered the
   VIN / Year / Make / Model with their own ad-hoc <table> markup, so the same
   vehicle looked different on every page (Glow-Up review: "inconsistent styling
   for vehicles in tables"). This one component gives them a single, consistent
   layout: a bold VIN line above muted meta lines, and it collapses cleanly with
   the responsive table-collapse system on mobile. */
.vehicle-identity {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.45;
	text-align: left;
}

.vehicle-identity__vin {
	font-weight: 600;
	color: var(--color-azure-11);
}

.vehicle-identity__vin a {
	color: var(--color-azure-30);
	font-weight: 600;
}

.vehicle-identity__meta {
	font-size: 0.9rem;
	color: var(--bs-gray-700);
}

.vehicle-identity__label {
	font-weight: 600;
	color: var(--bs-gray-700);
}

/* Right-justify per-row action affordances on desktop (Glow-Up review:
   "affordances can be right-justified on desktop sizes"); wraps/stacks on
   mobile where the table collapses into cards. */
.grid-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

@media (min-width: 768px) {
	.grid-actions--end {
		justify-content: flex-end;
	}
}

/* ===== MyInfo personal-information header + address panels =====
   Two-column identity layout for MyInfo/Default: a featured name header over
   side-by-side Legal / Mailing address panels with formatted address blocks. */
.myinfo-identity {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--bs-gray-200);
}

.myinfo-identity__avatar {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
}

.myinfo-identity__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.myinfo-identity__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	color: var(--bs-gray-600);
}

.myinfo-identity__name {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-azure-11);
}

.myinfo-panel {
	height: 100%;
	background: var(--bs-gray-100);
	border: 1px solid var(--bs-gray-300);
	border-radius: 0.5rem;
	padding: 1.25rem 1.5rem;
}

.myinfo-panel__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--bs-gray-300);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-azure-20);
}

.myinfo-panel__header i {
	color: var(--color-azure-30);
}

/* Link connector between the Customer and Access Indiana panels on MyInfo/AccountSettings — a
   small circular chain-link badge that visually shows the pairing, independent of the unlink
   action below it. Stacks in-flow between the two panels when the row wraps on mobile. */
.myinfo-link-connector {
	display: flex;
	align-items: center;
	justify-content: center;
}

.myinfo-link-connector__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	font-size: 1.125rem;
}

.myinfo-address {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	font-style: normal;
	line-height: 1.6;
	color: var(--color-azure-11);
}

.myinfo-address__street {
	font-weight: 600;
}

/* Iconized card section heading — a small colored icon chip before the title,
   echoing the sidebar/section icons and the identity avatar so every MyInfo
   card reads as part of one system instead of a flat text header. Works with
   the existing .u-heading / .u-heading--md|lg classes. */
.myinfo-card-heading {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.myinfo-card-heading__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

/* MyRegistration iconized card heading — parallel to .myinfo-card-heading so the
   Plates & Registrations module reads as the same system as MyInfo. Kept as its
   own namespace (rather than reusing the myinfo-* selectors) so the two modules
   can diverge later without cross-affecting each other. Works with the shared
   .u-heading / .u-heading--md|lg classes. */
.myreg-card-heading {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.myreg-card-heading__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

/* MyDE (Driver Training) iconized card heading — same chip pattern as
   myreg-card-heading / myinfo-card-heading, kept in its own namespace so the
   module can evolve independently. Works with .u-heading / .u-heading--md|lg. */
.de-card-heading {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.de-card-heading__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

/* DriveTest module iconized card heading — same chip pattern as
   de-card-heading / myreg-card-heading, own namespace per module convention.
   Works with .u-heading / .u-heading--md|lg. */
.drivetest-card-heading {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.drivetest-card-heading__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

/* Support-page iconized card heading (Contact, Help/FAQs, Unsubscribe, PDF help) —
   MYBMV-332. Same chip pattern as the module *-card-heading classes, own namespace
   so the non-module support pages read as one system with the modules without
   coupling to any single module. Works with .u-heading / .u-heading--md|lg. */
.support-card-heading {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.support-card-heading__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

/* MyDriver module iconized card heading — same chip pattern as
   drivetest-card-heading / de-card-heading, own namespace per module convention.
   Works with .u-heading / .u-heading--md|lg. */
.mydriver-card-heading {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.mydriver-card-heading__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

/* ===== MyDriver (Licenses & ID Cards) card-per-record lists =====
   Every license / notice / document / fee list in the module keeps its GridView
   (DataKeys, RowCommand, NamingContainer and FindControl all keep working) but is
   rendered as one card per record: ShowHeader="false", a single TemplateField whose
   ItemTemplate is a .license-card, and the grid wrapped in .license-cards, which
   strips the table chrome. The facts sit on the left; per-record actions (Add to
   Cart, View PDF...) sit in the tinted .license-card__order panel on the right, the
   same split card the Vehicle Titles cart uses (.title-card). Page-level CTAs (Proceed
   to Checkout, Continue, Back) live in the fixed .form-action-bar instead.

   Do NOT use .row / margin utilities on divs inside a card: the legacy Default.css rule
   `table tr td div:not(#applicationReceipt) { margin: 0 }` zeroes every div margin
   inside a GridView cell (including .row's negative gutters). Spacing here is gap/padding. */
.license-cards table:not(table table) {
	display: block;
	width: auto !important;
	border: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	background: transparent !important;
}

.license-cards table:not(table table)> :is(tbody, thead, tfoot),
.license-cards table:not(table table)> :is(tbody, thead, tfoot)>tr,
.license-cards table:not(table table)> :is(tbody, thead, tfoot)>tr> :is(td, th) {
	display: block;
	width: auto !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Beat the skin's !important alternating-row background. */
.license-cards tr.GridView_RowStyle_Default,
.license-cards tr.GridView_AlternatingRowStyle_Default {
	background: transparent !important;
}

/* margin-bottom is !important for the Default.css rule described above. */
.license-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	margin-bottom: 1rem !important;
}

.license-card--order {
	grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}

.license-card__facts {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	min-width: 0;
}

.license-card__head {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-width: 0;
}

.license-card__head>div {
	min-width: 0;
}

.license-card__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}

.license-card__label,
.license-card__meta dt {
	display: block;
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-azure-20);
}

.license-card__title {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.license-card__select {
	margin-left: auto;
}

.license-card__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
	gap: 0.75rem 2.5rem;
	margin: 0;
}

.license-card__meta dd {
	margin: 0.1rem 0 0;
	font-weight: 600;
	color: var(--color-azure-11);
}

/* Status pill. The status text rides in data-status so one rule set colors it without
   any code-behind: green for VALID, red for the blocking states, neutral for the rest. */
.license-card__status {
	display: inline-block;
	padding: 0.15rem 0.65rem;
	border-radius: 999px;
	background: var(--bs-gray-200);
	color: var(--bs-gray-700);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.license-card__status[data-status="valid" i] {
	background: #d1e7dd;
	color: #0a3622;
}

.license-card__status:is([data-status*="suspend" i], [data-status*="revok" i], [data-status*="cancel" i], [data-status*="expire" i], [data-status*="disqualif" i], [data-status*="withdraw" i]) {
	background: var(--color-danger-bg);
	color: var(--color-danger-dark);
}

/* Informational / blocking message from the code-behind; hidden while empty */
.license-card__notice {
	display: block;
	position: relative;
	padding: 0.65rem 0.9rem 0.65rem 2.4rem;
	background: var(--color-warning-bg);
	border-left: 4px solid var(--color-warning-border);
	border-radius: 6px;
	color: var(--color-warning-text);
	font-size: 0.9rem;
	line-height: 1.4;
}

.license-card__notice:empty {
	display: none;
}

.license-card__notice::before {
	content: "\f071";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 0.9rem;
	top: 0.7rem;
	color: var(--color-warning-text);
}

.license-card__order {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: var(--color-blue-lighter);
	border-left: 1px solid var(--color-blue-border);
}

.license-card__order-head {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-azure-20);
}

.license-card__field .form-label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.8rem;
}

.license-card__fee {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-weight: 600;
	color: var(--color-azure-20);
}

.license-card__fee-amount {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
}

/* Per-record actions (View PDF / View HTML...) side by side */
.license-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Standard .btn sizing; just right-aligned in the panel */
.license-card__cta {
	align-self: flex-end;
	margin-top: auto;
}

/* Not requestable (Pending / Visit Branch...): show it as a status, not a dead button */
/* The .shell__content a selector + !important outrank the shell's !important a.btn-primary blue, which a
   disabled LinkButton still carries. */
.license-card__cta.aspNetDisabled,
.license-card__cta.disabled,
.shell__content a.license-card__cta.aspNetDisabled {
	background: #fff !important;
	border: 1px dashed #adb5bd !important;
	color: #3d4b5c !important;
	box-shadow: none !important;
	cursor: default;
	pointer-events: none;
	white-space: normal;
}

/* ODR "include juvenile convictions?" prompt that opens in the order panel */
.license-card__juvenile {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	background: var(--color-warning-bg);
	border-left: 4px solid var(--color-warning-border);
	border-radius: 6px;
	color: var(--color-warning-text);
	font-size: 0.9rem;
}

.license-card__juvenile input[type="radio"]+label {
	margin: 0 1rem 0 0.35rem;
}

/* One restriction / endorsement code in the license detail modal */
.license-code {
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: #fff;
	margin-bottom: 0.5rem !important;
}

/* Affirmation / acknowledgement checkbox panel (Surrender, CDL self-certification, Verify Credentials) */
.license-ack {
	padding: 1.25rem 1.5rem;
	border-radius: 12px;
	background-color: var(--color-blue-light);
	border-left: 4px solid var(--color-azure-20);
}

.license-empty {
	padding: 1.5rem;
	text-align: center;
	color: var(--color-text-muted);
	border: 1px dashed var(--color-border-control);
	border-radius: 12px;
}

/* "I do not consent to a REAL ID" warning shown above the cart-page license lists */
.license-consent label {
	margin-left: 0.5rem;
}

@media (max-width: 767.98px) {

	.license-card--order {
		grid-template-columns: minmax(0, 1fr);
	}

	.license-card__order {
		border-left: none;
		border-top: 1px solid var(--color-blue-border);
	}
}

/* Yes/No question rows (Verify Credentials, CDL self-certification and its acknowledgement) */
.verify-question {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--color-border);
}

.verify-question:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.verify-question__text {
	flex: 1 1 24rem;
	min-width: 0;
}

.verify-question__answer {
	flex: 0 0 auto;
}

.verify-question__answer input[type="radio"]+label {
	margin: 0 1.25rem 0 0.35rem;
}

.cdl-question {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--color-border);
	border-radius: 12px;
}

.cdl-question__num {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.9rem;
}

.cdl-question__body {
	flex: 1 1 auto;
	min-width: 0;
}

.cdl-question__answers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	margin-top: 0.875rem;
}

.cdl-question__answer {
	flex: none;
}

/* ===== MyDriver (Licenses & ID Cards) phone layout =====
   Every selector here is a MyDriver-only class except .form-action-bar, which is scoped
   through the MyDriver page blocks below. Kept after the responsive table-collapse and
   fixed action-bar rules so equal-specificity overrides win on source order. */

/* Bottom action bar: two buttons share the row 50/50 unless either label is wider than
   half the bar ("Proceed to Checkout", "Exit and Return to Transaction"), in which case
   each wraps to its own full-width row instead of truncating. */
@media (max-width: 991.98px) {

	:is(.license-renew-page, .collections-page, .reinstatement-page, .cdl-selfcertify-page, .voter-reg-page, .verify-credentials-page) .form-action-bar {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	:is(.license-renew-page, .collections-page, .reinstatement-page, .cdl-selfcertify-page, .voter-reg-page, .verify-credentials-page) .form-action-bar :is(.btn, .proceed-to-cart) {
		flex: 1 1 calc(50% - 0.375rem);
		min-width: max-content;
	}
}

@media (max-width: 767.98px) {

	/* A wrapped two-row bar is ~8.5rem tall; the default 7rem clearance would hide the last field. */
	.shell__content:has(:is(.license-renew-page, .collections-page, .reinstatement-page, .cdl-selfcertify-page, .voter-reg-page, .verify-credentials-page) .form-action-bar > :nth-child(2)) {
		padding-bottom: 10rem;
	}

	/* The table-collapse rules target every __grid-wrapper table and paint alternating rows
	   gray with their own shadow; under a .license-card that shows as gray corners and a
	   doubled edge. The row is only a wrapper here. */
	[class*="__grid-wrapper"] .license-cards table:not(table table)>tbody>tr {
		background: transparent !important;
		box-shadow: none !important;
		border-radius: 0;
	}

	/* Per-record actions fill the order panel instead of sitting at natural width on the right. */
	.license-card__cta {
		align-self: stretch;
		text-align: center;
	}

	.license-card__actions>.btn {
		flex: 1 1 auto;
		text-align: center;
	}

	/* Checkbox / radio + long label: keep the box beside its label instead of on a line of its
	   own, and give the label a 44px-tall hit area. Covers ASP.NET's input+label pair whether it
	   renders bare or inside a wrapper span. */
	:is(.license-ack, .license-ack > span, .license-consent, .verify-credentials-page__selective-service div, .verify-credentials-page__selective-service div > span, .license-card__juvenile span):has(> input:is([type="checkbox"], [type="radio"])) {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		column-gap: 0.625rem;
	}

	/* Surrender's acknowledgement CheckBox carries CssClass="license-ack d-block"; beat the utility's !important. */
	.license-ack.d-block:has(> input[type="checkbox"]) {
		display: flex !important;
	}

	.shell :is(.license-ack, .license-consent, .verify-credentials-page__selective-service, .license-card__juvenile) input:is([type="checkbox"], [type="radio"]) {
		flex: none;
		margin: 0.15rem 0 0;
	}

	.shell :is(.license-ack, .license-consent, .verify-credentials-page__selective-service) input:is([type="checkbox"], [type="radio"])+label {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
	}

	/* Short Yes / No / Decline answers: pad each label into a tappable row segment. */
	.verify-question__answer input[type="radio"]+label,
	.cdl-question__answer input[type="checkbox"]+label,
	.license-card__juvenile input[type="radio"]+label {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin: 0 0.75rem 0 0;
		padding: 0 0.5rem;
	}

	.cdl-question__answer {
		align-items: center;
	}

	.license-card__juvenile span:has(> input[type="radio"]) {
		align-items: center;
	}

	.license-card__juvenile input[type="radio"] {
		margin-top: 0;
	}

	/* Reinstatement: the status pill moves under the sentence instead of squeezing it into a
	   one-word column; it stays aligned with the text, past the icon. */
	.license-card__select:has(.license-card__status) {
		flex-basis: 100%;
		margin-left: calc(44px + 0.875rem);
	}

	.license-card__head {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}

	.license-card__head>div {
		flex: 1 1 0;
	}

	/* Verify Credentials: the voter-registration choices are full-sentence buttons; let them wrap
	   (input buttons default to white-space: pre) instead of overflowing the card. */
	.verify-credentials-page .d-grid>.btn {
		white-space: normal;
		height: auto;
	}

	/* Calendar trigger is a 16px image; pad it out to a 40px hit area. */
	.verify-credentials-page__calendar-btn {
		box-sizing: content-box;
		padding: 12px;
		margin: -12px -12px -12px -4px;
		cursor: pointer;
	}
}

@media (max-width: 575.98px) {

	/* 28px titles ran to three lines at 360px ("Renew Your License, Permit or ID Card"). */
	.mydriver-card-heading.u-heading--lg {
		font-size: 1.375rem;
		line-height: 1.25;
		margin-bottom: 1.25rem !important;
	}

	.mydriver-card-heading__icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		font-size: 0.875rem;
	}

	.driver-default-page__cms-content p:first-child strong,
	.license-renew-page__cms-content p:first-child strong,
	.collections-page__cms-content p:first-child strong {
		font-size: 1.25rem;
	}

	.license-card__facts,
	.license-card__order {
		padding: 1rem 1.125rem;
	}

	.license-card__title {
		font-size: 1.1rem;
	}

	a.license-card__title {
		padding-block: 0.3rem;
		margin-block: -0.3rem;
	}

	/* Two even columns so Number / Status / Expiration pair up instead of one per row; values wrap. */
	.license-card__meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
	}

	.license-card__meta dd {
		overflow-wrap: anywhere;
	}

	.license-card__fee-amount {
		font-size: 1.4rem;
	}

	.license-ack {
		padding: 1rem 1.125rem;
	}

	.cdl-question {
		padding: 1rem;
		gap: 0.75rem;
	}

	/* Five detail tabs wrapped into three rows; scroll them as one row instead. */
	#licenseDetailTabs {
		flex-wrap: nowrap;
		justify-content: flex-start !important;
		overflow-x: auto;
		scrollbar-width: none;
	}

	#licenseDetailTabs .nav-link {
		white-space: nowrap;
		padding-inline: 0.75rem;
	}
}

/* Heading inset that lines the title up with the driver-record report inside the iframe. */
.driver-record-page__heading {
	margin-inline-start: 1.25rem;
	margin-block-start: 1rem;
}

/* The phone card body is already tight; keep a smaller inset rather than spend 36px of the column on it. */
@media (max-width: 575.98px) {
	.driver-record-page__heading {
		margin-inline-start: 0.5rem;
		margin-block-start: 0.25rem;
	}
}

/* ===== My Info > Renewal Dates: registration cards =====
   Same look as the .license-card list above it. The shared RegistrationGridView is
   index-coupled (Columns(n).Visible) and used by six other pages, so this is a
   page-scoped CSS reflow of its rendered table instead of a markup change. Cells are
   picked by shape, not position from the left, because the optional "Renew Online Now"
   column is switched on mid-bind and can leave earlier rows a cell short: the vehicle
   cell is the one holding .vehicle-identity, expiration is the last cell, plate the one
   before it, and anything else is the renew link. The column headers are not reliable
   for data-label here, so the two field labels are fixed text. */
.renewal-reg-cards table:not(table table) {
	display: block;
	width: auto !important;
	border: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	background: transparent !important;
}

.renewal-reg-cards table:not(table table)>thead,
.renewal-reg-cards table:not(table table)>tbody>tr:first-child:has(> th) {
	display: none;
}

.renewal-reg-cards table:not(table table)>tbody {
	display: block;
}

.renewal-reg-cards table:not(table table)>tbody>tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	grid-auto-columns: auto;
	align-items: center;
	gap: 0.75rem 2.5rem;
	width: auto !important;
	margin: 0 0 1rem !important;
	padding: 1.25rem 1.5rem !important;
	background: #fff !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.renewal-reg-cards table:not(table table)>tbody>tr>td {
	display: block;
	width: auto !important;
	margin: 0;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	text-align: left !important;
	font-weight: 600;
	color: var(--color-azure-11);
	white-space: nowrap;
}

/* Vehicle: icon chip + the shared .vehicle-identity block */
.renewal-reg-cards table:not(table table)>tbody>tr>td:has(.vehicle-identity) {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	order: 1;
	white-space: normal;
}

.renewal-reg-cards table:not(table table)>tbody>tr>td:has(.vehicle-identity)::before {
	content: "\f1b9" !important;
	display: inline-flex !important;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 10px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 1.1rem;
	letter-spacing: 0;
	text-transform: none;
}

.renewal-reg-cards .vehicle-identity__vin,
.renewal-reg-cards .vehicle-identity__vin a {
	font-size: 1.1rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Plate and expiration: label over value, like the license meta */
.renewal-reg-cards table:not(table table)>tbody>tr>td:nth-last-child(2),
.renewal-reg-cards table:not(table table)>tbody>tr>td:last-child {
	order: 2;
}

.renewal-reg-cards table:not(table table)>tbody>tr>td:last-child {
	order: 3;
}

.renewal-reg-cards table:not(table table)>tbody>tr>td:nth-last-child(2)::before,
.renewal-reg-cards table:not(table table)>tbody>tr>td:last-child::before {
	display: block !important;
	flex: none;
	margin-bottom: 0.1rem;
	padding: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-azure-20);
}

.renewal-reg-cards table:not(table table)>tbody>tr>td:nth-last-child(2)::before {
	content: "Plate Number" !important;
}

.renewal-reg-cards table:not(table table)>tbody>tr>td:last-child::before {
	content: "Expiration Date" !important;
}

/* Optional "Renew Online Now" cell: shown as a button, dropped when it holds no link */
.renewal-reg-cards table:not(table table)>tbody>tr>td:not(:has(.vehicle-identity)):not(:nth-last-child(-n+2)) {
	order: 4;
}

.renewal-reg-cards table:not(table table)>tbody>tr>td:not(:has(.vehicle-identity)):not(:nth-last-child(-n+2)):not(:has(a)) {
	display: none;
}

.renewal-reg-cards table:not(table table)>tbody>tr>td:not(:has(.vehicle-identity)):not(:nth-last-child(-n+2))::before {
	content: none !important;
	display: none !important;
}

.renewal-reg-cards table:not(table table)>tbody>tr>td:not(:has(.vehicle-identity)):not(:nth-last-child(-n+2)) a {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;
	background: var(--color-azure-20);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 767.98px) {

	.renewal-reg-cards table:not(table table)>tbody>tr {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		padding: 1rem 1.25rem !important;
	}
}

/* ===== Driver Training instructor: supporting-document upload grid =====
   Keeps the table grid (the row lines tie each upload box to its document). Columns
   are fixed so the Status and Upload cells line up row to row, every cell is vertically
   centered on its row, and the file input + Upload button share one line. Under 768px
   each row becomes its own bordered block so the input gets the full width and shows the
   chosen file name instead of collapsing to "Choose". */
.doc-upload-table>:is(thead, tbody)>tr>:is(th, td) {
	vertical-align: middle;
}

.doc-upload-table>:is(thead, tbody)>tr>:nth-child(2) {
	width: 8.5rem;
}

.doc-upload-table>:is(thead, tbody)>tr>:nth-child(3) {
	width: 26rem;
}

.doc-upload__group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.doc-upload__group input[type="file"] {
	flex: 1 1 auto;
	min-width: 0;
}

.doc-upload__group .btn {
	flex: none;
}

@media (max-width: 767.98px) {

	.doc-upload-table,
	.doc-upload-table>tbody,
	.doc-upload-table>tbody>tr,
	.doc-upload-table>tbody>tr>td {
		display: block;
		width: auto;
	}

	.doc-upload-table>thead {
		display: none;
	}

	.doc-upload-table>tbody>tr {
		padding: 0.75rem 1rem;
		border-bottom: 1px solid var(--color-border);
	}

	.doc-upload-table>tbody>tr>td {
		width: auto;
		padding: 0.25rem 0;
		border: 0;
		text-align: left !important;
	}

	.doc-upload-table>tbody>tr>td.doc-upload__status::before {
		content: "Status: ";
		font-weight: 700;
		color: var(--color-azure-20);
	}

	.doc-upload-table>tbody>tr>td.doc-upload__upload {
		padding-top: 0.5rem;
	}
}

/* MyTitle (Vehicle Titles) iconized card heading — same chip pattern as
   mydriver-card-heading / de-card-heading, own namespace per module convention.
   Namespaced as title- to match the module's existing .title-*-page page classes.
   Works with .u-heading / .u-heading--md|lg. */
.title-card-heading {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.title-card-heading__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

/* Cart / checkout / payment flow iconized page title — same chip pattern as the module
   *-card-heading classes, own namespace so the payment pages read as part of the same
   system (type spec comes from .u-heading--lg). */
.cart-card-heading {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.cart-card-heading__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--color-blue-light);
	color: var(--color-azure-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

/* ===== Payment flow (ViewCart > CartSummary > Payment / ECheck > TransactionSummary >
   PaymentConfirmation) phone layout =====
   Placed after the action-bar and cart rules so equal-specificity overrides win on source
   order. The shared CartSummaryControl / PaymentSummary / ShoppingCartGridView markup is
   untouched; every rule here hangs off a cart-only class. */
@media (max-width: 991.98px) {

	/* Action bar buttons: labels may wrap rather than clip, and every button is a 44px target. */
	.cart-actions :is(.btn, .btn-cart-primary),
	.fixed-action-buttons .btn {
		min-width: 0;
		min-height: 44px;
		white-space: normal;
		line-height: 1.2;
		justify-content: center;
		text-align: center;
	}

	/* Every direct child shares the row evenly (ViewCart's Return to Shopping had no flex rule
	   and stayed at its natural width). The left group drops its desktop push-left margin. */
	:is(.cart-actions, .fixed-action-buttons)>* {
		flex: 1 1 0;
		min-width: 0;
	}

	:is(.cart-actions, .fixed-action-buttons)>.cart-actions-left {
		display: flex;
		margin-right: 0;
		gap: 0.75rem;
	}

	/* A left group holding two buttons counts as two shares, so all three buttons match. */
	:is(.cart-actions, .fixed-action-buttons)>.cart-actions-left:has(> :nth-child(2)) {
		flex-grow: 2;
	}

	.cart-actions-left>* {
		flex: 1 1 0;
		min-width: 0;
	}

	/* CartSummary's Edit Cart is an <a class="btn">: centre its label and match the weight of
	   the <input> buttons beside it, which grow taller when a neighbour's label wraps. */
	:is(.cart-actions, .fixed-action-buttons) a.btn {
		display: inline-flex;
		align-items: center;
		font-weight: 600;
	}
}

/* Three-button bars on phones (TransactionSummary, ECheck, CartSummary with the voter-
   registration cancel): the even split pushed the primary action - Process Payment, Submit
   Payment, Next - past the right edge of the screen. The primary is the bar's last child: it
   gets its own full-width row on top, and the two secondary actions share the row beneath.
   Selectors carry the :has() so they outrank the even-split rules above; two-button bars keep
   their single row. */
@media (max-width: 767.98px) {

	.shell :is(.cart-actions, .fixed-action-buttons):has(> .cart-actions-left > :nth-child(2)) {
		flex-wrap: wrap;
		gap: 0.5rem 0.75rem;
		padding-block: 0.75rem;
	}

	.shell :is(.cart-actions, .fixed-action-buttons):has(> .cart-actions-left > :nth-child(2))>:last-child {
		order: -1;
		flex: 1 1 100%;
	}

	.shell :is(.cart-actions, .fixed-action-buttons):has(> .cart-actions-left > :nth-child(2))>.cart-actions-left {
		flex: 1 1 100%;
	}

	.shell :is(.cart-actions, .fixed-action-buttons):has(> .cart-actions-left > :nth-child(2)) .btn {
		padding: 0.5rem 0.75rem;
	}

	/* Keep the last content clear of the two-row bar. */
	.two-column-cart:has(.fixed-action-buttons > .cart-actions-left > :nth-child(2)),
	.cart-container:has(~ .cart-actions > .cart-actions-left > :nth-child(2)) {
		margin-bottom: 9.5rem;
	}
}

/* ViewCart's "Return to Shopping" wraps to two lines in its half of a 360px bar; the slightly
   taller bar needs a little more clearance than the shared 5rem. */
@media (max-width: 575.98px) {
	.cart-container:has(~ .cart-actions) {
		margin-bottom: 6.5rem;
	}
}

@media (max-width: 991.98px) {

	/* Two-column sidebar headers bleed to the box edges with negative margins, but the
	   phone-wide `.shell__content * { max-width: 100% }` rule capped them, so they stopped
	   48px short of the right edge. Let them reach both edges. */
	.shell__content .two-column-cart__sidebar :is(.order-summary__heading, .cart-items-header, .donate-life-header, .cart-summary-header) {
		max-width: none !important;
	}
}

@media (max-width: 767.98px) {

	/* ViewCart / CartSummary: Remove Item sits on its own line under the title as a 44px
	   target instead of a 31px button wedged into the title text. */
	.cart-item-title {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
	}

	.cart-item-remove {
		margin-left: 0;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.cart-item-title>.cart-item-remove {
		order: 1;
		flex-basis: 100%;
		max-width: max-content;
	}

	/* Donate Life and Express Credential radios: 44px options with the label beside its radio. */
	:is(.donate-life-radio-list, .express-service-radio-list) label {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.shell .donate-life-input {
		min-height: 44px;
	}

	.donate-life-amount .btn-cart-primary {
		min-height: 44px;
	}

	/* Summary total: label and amount on one line (the inner box doubled the padding and
	   wrapped "TOTAL PAYABLE FEE" onto two lines beside the amount). */
	.cart-summary-total {
		padding: 0.75rem 1rem;
	}

	.cart-summary-total .cart-summary-row {
		gap: 0.75rem;
		align-items: baseline;
	}

	.cart-summary-total .cart-summary-label {
		flex: 1 1 auto;
		min-width: 0;
	}

	.cart-summary-total .cart-summary-value {
		flex: none;
	}

	/* PaymentConfirmation: full-width 44px receipt actions instead of a ragged 31px cluster. */
	.receipt-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.receipt-actions__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.receipt-actions__inline {
		display: flex;
	}

	.receipt-actions__buttons .btn {
		width: 100%;
		min-height: 44px;
		padding-block: 0.6rem;
		text-align: center;
		align-content: center;
	}

	/* Email-receipt popup: OK first and full width, Cancel / Opt Out sharing the row below. */
	.email-receipt-modal__actions {
		flex-wrap: wrap;
	}

	.email-receipt-modal__actions>* {
		flex: 1 1 0;
		min-height: 44px;
		justify-content: center;
	}

	.email-receipt-modal__actions>:last-child {
		order: -1;
		flex-basis: 100%;
	}

	.email-receipt-modal__body {
		padding: 1.25rem;
	}

	/* Payer / payment-method details: long e-mail addresses wrap cleanly. */
	.summary-card__body {
		overflow-wrap: anywhere;
	}
}

@media (max-width: 575.98px) {

	/* Tighter cards: the page card, the section card and its body stacked ~64px of side
	   padding on a 360px screen. */
	.cart-container,
	.two-column-cart__main {
		padding: 1.25rem 1rem;
	}

	.two-column-cart__sidebar {
		padding: 1.25rem 1rem;
	}

	.two-column-cart__sidebar :is(.order-summary__heading, .cart-items-header, .donate-life-header, .cart-summary-header) {
		margin-left: -1rem;
		margin-right: -1rem;
		padding-inline: 1rem;
	}

	.two-column-cart__sidebar .order-summary__heading,
	.two-column-cart__sidebar .cart-summary-widget>.cart-items:first-child .cart-items-header {
		margin-top: -1.25rem;
	}

	:is(.cart-items, .cart-summary-section, .summary-card, .donate-life-section) :is(.cart-items-header, .cart-summary-header, .summary-card__header, .donate-life-header) {
		padding: 0.875rem 1rem;
	}

	.cart-item,
	.cart-summary-body,
	.summary-card__body,
	.donate-life-content {
		padding: 1rem;
	}

	.two-column-cart__sidebar :is(.cart-item, .cart-summary-body, .donate-life-content) {
		padding-left: 0;
		padding-right: 0;
	}

	.summary-card__meta {
		padding: 0.75rem 1rem;
	}

	.cart-card-heading.u-heading--lg {
		font-size: 1.375rem;
		line-height: 1.25;
	}

	.cart-card-heading__icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		font-size: 0.875rem;
	}

	.check-info-help {
		padding: 1.25rem 1rem;
	}

	.confirmation-thankyou {
		padding: 1.25rem 1rem;
	}
}

/* Centered status icon for the error/system pages (Error, NotFound, Forbidden,
   Unavailable, CookiesDisabled, OpenMobileApp) — MYBMV-332. A large round chip that
   replaces the old raster error art. Color is set per-state in markup with
   Bootstrap subtle-bg + emphasis-text utilities (e.g. .bg-danger-subtle.text-danger),
   so each state reads at a glance and stays theme-consistent without custom rules. */
.system-page__icon {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
}

/* ===== Address typeahead (Experian QAS jQuery UI autocomplete) =====
   Modernize the suggestion dropdown to match the app: a clean popover (white,
   rounded, shadowed) with neutral text and a light-blue hover, replacing jQuery
   UI's default theme and the presentational <font color=blue> markup that qas.js
   emits. Every selector is prefixed with .ui-autocomplete so it out-specifies the
   jQuery UI theme bundle regardless of stylesheet load order (no !important needed,
   except to defeat the inline <font> color/size attributes). The menu is appended
   to <body>, so these rules are intentionally global — every autocomplete matches. */
.ui-autocomplete.ui-menu {
	max-height: 260px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0.375rem;
	border: 1px solid var(--bs-border-color, var(--color-border));
	border-radius: 0.5rem;
	background: #fff;
	box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.12);
	font-family: var(--font-body);
	z-index: 1060;
}

.ui-autocomplete.ui-menu .ui-menu-item {
	margin: 0;
}

/* Each suggestion: a full-width padded row in the app text color, no underline.
   The .ui-autocomplete.ui-menu compound prefix keeps every rule below strictly more
   specific than the jQuery UI theme (.ui-menu .ui-menu-item a), which loads after
   this file — so these win without !important. */
.ui-autocomplete.ui-menu .ui-menu-item a {
	display: block;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: 0.375rem;
	color: var(--color-azure-11, #111827);
	font-size: 0.9rem;
	line-height: 1.35;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
}

/* Neutralize the <font size='1em' color='blue'> qas.js wraps each suggestion in. */
.ui-autocomplete.ui-menu .ui-menu-item a font {
	color: inherit !important;
	font-size: inherit !important;
}

/* Hover / keyboard-focus highlight. CSS-only :hover matters here because qas.js
   turns the widget's JS hover handlers off (.off('menufocus hover mouseover ...')). */
.ui-autocomplete.ui-menu .ui-menu-item a:hover,
.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-focus,
.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-active {
	background: var(--color-blue-light, #e6f0ff);
	color: var(--color-azure-20, #003366);
}

/* The non-selectable helper row ("Continue Typing for suggestions" / no match),
   rendered by qas.js as a bare <li class="ui-state-disabled"><font color=black>. */
.ui-autocomplete.ui-menu .ui-state-disabled {
	opacity: 1;
	padding: 0.5rem 0.75rem;
	color: #6c757d;
	font-style: italic;
}

.ui-autocomplete.ui-menu .ui-state-disabled font {
	color: #6c757d !important;
	font-size: inherit !important;
}

/* ===== MyRegistration card-per-record grids =====
   Keep each GridView intact (DataKeys / RowCommand / NamingContainer / control
   FindControl all keep working) but strip the table chrome so every row renders
   as a standalone record card. Mirrors the Manage Insurance card grid. Use with
   ShowHeader="false" and a single TemplateField whose ItemTemplate is a
   .myreg-record-card. The table:not(table table) selector strips only the outer
   GridView table, never a nested layout table inside a card. */
.myreg-cards table:not(table table) {
	display: block;
	width: auto !important;
	border: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	background: transparent !important;
}

.myreg-cards table:not(table table)>tbody,
.myreg-cards table:not(table table)>thead,
.myreg-cards table:not(table table)>tfoot,
.myreg-cards table:not(table table)>tbody>tr,
.myreg-cards table:not(table table)>thead>tr,
.myreg-cards table:not(table table)>tfoot>tr,
.myreg-cards table:not(table table)>tbody>tr>td,
.myreg-cards table:not(table table)>thead>tr>th,
.myreg-cards table:not(table table)>tfoot>tr>td {
	display: block;
	width: auto !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Beat the skin's !important alternating-row background. */
.myreg-cards tr.GridView_RowStyle_Default,
.myreg-cards tr.GridView_AlternatingRowStyle_Default {
	background: transparent !important;
}

/* margin-bottom uses !important to beat the legacy Default.css rule
   `table tr td div:not(#applicationReceipt) { margin: 0 }` (ID-level specificity),
   which would otherwise zero the card gap since the card renders inside a <td>. */
/* Each card sits alone inside its own GridView <td>, so a :last-child override
   would match EVERY card and collapse all the gaps — the row spacing lives on
   the base rule instead, applied to every card. */
.myreg-record-card {
	background: #fff;
	border: 1px solid var(--bs-gray-300);
	border-radius: 0.5rem;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem !important;
}

.myreg-record-card__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
}

.myreg-record-card__label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: var(--bs-gray-600);
	margin-bottom: 0.1rem;
}

.myreg-record-card__value {
	color: var(--color-azure-11);
}

/* Row-header cells in SpecialAddressView.ascx: <th scope="row"> for accessibility, styled
   to match the plain label cells they replaced (th defaults to bold/centered). */
.special-address__label {
	font-weight: inherit;
	text-align: left;
	padding-right: 1rem;
}

/* Legal-address block (shared LegalAddress.ascx): a compact, formatted address
   (reusing .myinfo-address) followed by tight County/Township/Municipality pairs,
   so the residence reads as one grouped unit instead of stretched label columns. */
.legal-address__block {
	font-size: 0.95rem;
}

.legal-address__jurisdiction {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--bs-gray-300);
}

.legal-address__field {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.legal-address__field--select {
	align-items: center;
}

.legal-address__field-label {
	flex: none;
	min-width: 7rem;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: var(--bs-gray-700);
}

.legal-address__field-value {
	color: var(--color-azure-11);
	font-weight: 500;
}

/* MyRegistration/TitleNoReg CMS intro block: even paragraph rhythm, and neutralize
   the stray inline `margin-left: 2em` the CMS emits on the middle paragraph so all
   instructions align. The <u> penalty note reads as a refined emphasis rather than
   a raw browser underline. */
.titlenoreg-page__cms-content p {
	margin-bottom: 0.75rem;
	line-height: 1.6;
}

.titlenoreg-page__cms-content p:last-child {
	margin-bottom: 0;
}

.titlenoreg-page__cms-content div[style*="margin-left"] {
	margin-left: 0 !important;
}

.titlenoreg-page__cms-content u {
	text-decoration-color: var(--color-gold);
	text-underline-offset: 2px;
}

/* The Emergency Contacts code-behind hides the address/state/zip/country fields
   (pending a business decision), leaving their empty grid columns as stray
   vertical whitespace at the bottom of each card. Collapse any field column
   whose server controls rendered nothing (no element children). Self-restores
   if those fields are ever made visible again. */
.myinfo-emergencycontacts-page .card-body .row>div:not(:has(*)) {
	display: none;
}

/* ===== Manage Insurance — card-per-vehicle layout =====
   The control stays a single-column GridView (keeps the code-behind's DataKeys /
   SelectedIndexChanged / row FindControl working), but these rules strip the
   table chrome so each row renders as a standalone insurance card. */
.insurance-cards table:not(table table) {
	display: block;
	width: auto !important;
	border: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	background: transparent !important;
}

.insurance-cards table:not(table table)>tbody,
.insurance-cards table:not(table table)>tbody>tr,
.insurance-cards table:not(table table)>tbody>tr>td {
	display: block;
	width: auto !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Beat the skin's !important alternating-row background. */
.insurance-cards tr.GridView_RowStyle_Default,
.insurance-cards tr.GridView_AlternatingRowStyle_Default {
	background: transparent !important;
}

/* margin-bottom uses !important to beat the legacy Default.css rule
   `table tr td div:not(#applicationReceipt) { margin: 0 }`, which has ID-level
   specificity (the :not(#id)) and would otherwise zero these margins since the
   card renders inside a GridView <td>. */
.insurance-card {
	background: #fff;
	border: 1px solid var(--bs-gray-300);
	border-radius: 0.5rem;
	padding: 1.5rem;
	margin-bottom: 1.5rem !important;
}

.insurance-card__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.5rem !important;
}

/* Inset panel for the editable insurance fields, giving the update form clear
   separation from the vehicle header within each card. */
.insurance-card__form {
	background: var(--bs-gray-100);
	border: 1px solid var(--bs-gray-200);
	border-radius: 0.5rem;
	padding: 1.5rem;
}

.insurance-card__plate {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	line-height: 1.2;
}

.insurance-card__plate-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: var(--bs-gray-600);
}

.insurance-card__plate-value {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--color-azure-20);
}

/* Give pages that carry a .form-action-bar enough bottom padding that the last
   fields clear the fixed bar (which overlaps the bottom of the scroll area). The
   :has() hook applies only where the bar is present, so ordinary pages keep the
   default 2rem padding. */
.shell__content:has(.form-action-bar) {
	padding-bottom: 7rem;
}

/* MyInfo data grids opt into the shared responsive table-collapse system via
   the "__grid-wrapper" naming convention (see RESPONSIVE TABLE COLLAPSE). Keep
   the vehicle-identity cell left-aligned when a row collapses to a card instead
   of being spread edge-to-edge by the generic space-between rule. */
@media (max-width: 767.98px) {

	.myinfo-default-page [class*="__grid-wrapper"] .vehicle-identity,
	.myinfo-insurance-page [class*="__grid-wrapper"] .vehicle-identity,
	.myinfo-renewaldates-page [class*="__grid-wrapper"] .vehicle-identity {
		width: 100%;
	}
}

/* Responsive adjustments for MyInfo pages */
@media (max-width: 767.98px) {

	.myinfo-default-page .card-body,
	.myinfo-renewaldates-page .card-body,
	.myinfo-transactionhistory-page .card-body,
	.myinfo-insurance-page .card-body,
	.myinfo-branchlocations-page .card-body,
	.myinfo-changepassword-page .card-body,
	.myinfo-changeusername-page .card-body,
	.myinfo-updatemailingaddress-page .card-body,
	.myinfo-emergencycontacts-page .card-body,
	.myinfo-ealerts-page .card-body,
	.myinfo-organdonor-page .card-body,
	.myinfo-updateinfo-page .card-body,
	.myinfo-unsubscribe-page .card-body,
	.contact-page .card-body {
		padding: 1.25rem !important;
	}
}

/* ===== MyInfo (My Information) phone layout =====
   Scoped through the MyInfo page blocks. The controls here are shared with other modules
   (RegistrationGridView, AddressUpdate, ContactUpdate, InsuranceGridView, DLNSignon,
   CompanySignon, TransactionHistoryGridView), so nothing below reaches their other pages. */

/* My Information > Registrations: the grid is not wrapped in .renewal-reg-cards, so on phones
   it fell back to the generic table-collapse, whose 40% label column left the VIN line ~180px
   and pushed it past the card edge. Render it as the same vehicle card Renewal Dates uses:
   vehicle on top, plate and expiration paired beneath. Cells are picked by shape, as there. */
@media (max-width: 767.98px) {

	.myinfo-default-page .table-responsive-collapse:not(.title-card-grid) table:not(table table)>tbody>tr>td:has(.vehicle-identity) {
		display: block;
		padding-bottom: 0.75rem;
	}

	.myinfo-default-page .table-responsive-collapse:not(.title-card-grid) table:not(table table)>tbody>tr>td:has(.vehicle-identity)::before {
		display: none;
	}

	.myinfo-default-page .table-responsive-collapse:not(.title-card-grid) table:not(table table)>tbody>tr:has(.vehicle-identity) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
		padding: 1rem 1.25rem;
	}

	.myinfo-default-page .table-responsive-collapse:not(.title-card-grid) table:not(table table)>tbody>tr>td:has(.vehicle-identity) {
		grid-column: 1 / -1;
		border-bottom: 1px solid #f3f4f6 !important;
	}

	.myinfo-default-page .table-responsive-collapse:not(.title-card-grid) table:not(table table)>tbody>tr:has(.vehicle-identity)>td:not(:has(.vehicle-identity)) {
		display: block;
		border-top: none !important;
		padding-top: 0.75rem;
	}

	.myinfo-default-page .table-responsive-collapse:not(.title-card-grid) table:not(table table)>tbody>tr:has(.vehicle-identity)>td:not(:has(.vehicle-identity))::before {
		display: block;
		margin-bottom: 0.15rem;
		font-size: 0.7rem;
	}

	.myinfo-default-page .vehicle-identity__vin,
	.myinfo-default-page .vehicle-identity__vin a {
		overflow-wrap: anywhere;
	}

	/* Insurance: company name and policy number side by side (flex-sm-row) cut the company
	   name off at "PROGRESSIVE NORTHI"; stack them so each field gets the full width. */
	.myinfo-insurance-page .insurance-card__form .flex-sm-row {
		flex-direction: column !important;
	}

	.myinfo-insurance-page .insurance-card,
	.myinfo-insurance-page .insurance-card__form {
		padding: 1.125rem;
	}

	.myinfo-insurance-page .insurance-card__header {
		margin-bottom: 1rem !important;
	}

	.myinfo-insurance-page .insurance-card__plate {
		align-items: flex-start;
		text-align: left;
	}

	.myinfo-insurance-page .insurance-card__form .btn {
		width: 100%;
		min-height: 44px;
		align-content: center;
	}

	.myinfo-insurance-page .insurance-card__form .d-flex.justify-content-end {
		display: block !important;
	}

	/* Transaction History: full-width View PDF button under the date and branch instead of a
	   small button squeezed into the value column; Print Interim spans the card. */
	.myinfo-transactionhistory-page .table-responsive-collapse table:not(table table)>tbody>tr>td:has(.btn) {
		display: block;
		padding-top: 0.75rem;
	}

	.myinfo-transactionhistory-page .table-responsive-collapse table:not(table table)>tbody>tr>td:has(.btn)::before {
		display: none;
	}

	.myinfo-transactionhistory-page .table-responsive-collapse .btn {
		display: block;
		width: 100%;
		min-height: 44px;
		padding-block: 0.6rem;
	}

	.myinfo-transactionhistory-page .text-start>.btn {
		width: 100%;
	}

	/* Update Contact Info: ZIP and ZIP+4 sit on one row at their real widths (the global
	   phone rule forced each to 100%, stacking them with a stray "-"). */
	.myinfo-updatemailingaddress-page #txtZIP5 {
		width: 6rem !important;
		flex: none !important;
	}

	.myinfo-updatemailingaddress-page #txtZIP4 {
		width: 5rem !important;
		flex: none;
	}

	.myinfo-updatemailingaddress-page #txtIntlZIP {
		width: 10rem !important;
	}

	/* Phone Type radios (RepeatLayout="Flow" emits bare input+label siblings, so there is no
	   per-option wrapper to keep a radio with its label). Both options fit one line at phone
	   width (~230px of a ~288px field), so hold the group on one line: a break could otherwise
	   fall between the second radio and its label. 44px-tall labels are the tap targets, and
	   all four margins are zeroed against the site-wide input[type="radio"]+label rule. */
	.myinfo-updatemailingaddress-page span[id*="rblType"] {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
	}

	.myinfo-updatemailingaddress-page span[id*="rblType"] input[type="radio"] {
		flex: none;
		vertical-align: middle;
		margin: 0 0.5rem 0 0;
	}

	.myinfo-updatemailingaddress-page span[id*="rblType"] label {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin: 0 1.75rem 0 0;
	}

	.myinfo-updatemailingaddress-page span[id*="rblType"] label:last-child {
		margin-right: 0;
	}

	/* Address confirmation: checkbox beside its long label. */
	.myinfo-updatemailingaddress-page .form-check:has(> input[type="checkbox"]),
	.myinfo-updatemailingaddress-page .form-check:has(> span > input[type="checkbox"]) {
		display: flex;
		align-items: flex-start;
		column-gap: 0.625rem;
		padding-left: 0;
	}

	.myinfo-updatemailingaddress-page .form-check input[type="checkbox"] {
		flex: none;
		float: none;
		margin: 0.15rem 0 0 !important;
	}

	.myinfo-updatemailingaddress-page .form-check input[type="checkbox"]+label {
		flex: 1 1 0;
		min-width: 0;
		display: block;
		padding-left: 0;
	}

	/* e-Alerts: each delivery option is a 44px row with the label beside its radio. The radio
	   itself carries .form-check-input (on the wrapper span), so pair them explicitly. */
	.myinfo-ealerts-page [id$="divEmail"]>span,
	.myinfo-ealerts-page [id$="divText"]>span,
	.myinfo-ealerts-page [id$="divMail"]>span {
		display: flex !important;
		align-items: center;
		gap: 0.625rem;
		min-height: 44px;
		margin: 0 !important;
		float: none !important;
		width: auto !important;
		height: auto !important;
		background: none !important;
		border: none !important;
	}

	.myinfo-ealerts-page :is([id$="divEmail"], [id$="divText"], [id$="divMail"]) input[type="radio"] {
		flex: none;
		margin: 0 !important;
	}

	.myinfo-ealerts-page :is([id$="divEmail"], [id$="divText"], [id$="divMail"]) input[type="radio"]+label {
		margin: 0;
		line-height: 1.3;
	}

	.myinfo-ealerts-page :is([id$="divEmail"], [id$="divText"], [id$="divMail"]) {
		margin-bottom: 0.25rem !important;
	}

	.myinfo-ealerts-page :is([id$="divEmailOption"], [id$="divTextOption"]) strong {
		overflow-wrap: anywhere;
	}

	/* Unsubscribe identity check: SSN / ZIP boxes keep their 4-5 digit widths, matching the DLN
	   segments. Needs .shell__content + the input type to outrank the global phone rule
	   `.shell__content input[type="text"|"password"] { width: 100% !important }`. */
	.shell__content .myinfo-unsubscribe-page input:is([type="text"], [type="password"]):is([id$="txtFID"], [id$="txtLegalZipCode"]) {
		width: 6rem !important;
	}

	.shell__content .myinfo-unsubscribe-page input[type="text"]:is([id$="txtDLN1"], [id$="txtDLN3"]) {
		width: 5rem !important;
	}

	.shell__content .myinfo-unsubscribe-page input[type="text"][id$="txtDLN2"] {
		width: 3.75rem !important;
	}

	/* Individual / Company: 44px options with the label beside its radio, and room before the
	   required-field legend that followed with no gap. */
	.myinfo-unsubscribe-page table[id$="optCompany"] {
		display: block;
		width: auto !important;
		margin-bottom: 1rem !important;
	}

	.myinfo-unsubscribe-page table[id$="optCompany"] :is(tbody, tr) {
		display: flex;
		flex-wrap: wrap;
		column-gap: 1.75rem;
	}

	.myinfo-unsubscribe-page table[id$="optCompany"] td {
		display: flex !important;
		align-items: center;
		gap: 0.5rem;
		min-height: 44px;
		width: auto !important;
	}

	.myinfo-unsubscribe-page table[id$="optCompany"] input[type="radio"]+label {
		margin: 0;
	}

	.myinfo-unsubscribe-page .popupDLN,
	.myinfo-unsubscribe-page .text-center>a {
		display: inline-block;
		padding-block: 0.6rem;
		margin-block: -0.6rem;
	}

	/* Contact and e-mail-reminder "click here" links were ~18px-tall inline targets. */
	:is(.myinfo-default-page, .myinfo-renewaldates-page, .myinfo-updatemailingaddress-page, .myinfo-emergencycontacts-page) :is([id$="_lnkContactUsQuestion"], [id$="_hypReminderLink"]) {
		display: inline-block;
		padding-block: 0.5rem;
		margin-block: -0.5rem;
	}
}

@media (max-width: 575.98px) {

	.myinfo-card-heading.u-heading--lg,
	.myinfo-unsubscribe-page .support-card-heading.u-heading--lg {
		font-size: 1.375rem;
		line-height: 1.25;
		margin-bottom: 1.25rem !important;
	}

	.myinfo-card-heading.u-heading--md {
		font-size: 1.1rem;
	}

	.myinfo-card-heading__icon,
	.myinfo-unsubscribe-page .support-card-heading__icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		font-size: 0.875rem;
	}

	/* CMS lead-in "<p><strong>Heading</strong> body" on the MyInfo intro cards. */
	:is(.myinfo-default-page, .myinfo-updatemailingaddress-page, .myinfo-insurance-page, .myinfo-renewaldates-page, .myinfo-ealerts-page) .card-body>p:first-child>strong:first-child,
	:is(.myinfo-default-page, .myinfo-updatemailingaddress-page, .myinfo-insurance-page, .myinfo-renewaldates-page, .myinfo-ealerts-page) .card-body>p:first-of-type>strong:first-child {
		display: block;
		margin-bottom: 0.25rem;
	}

	.myinfo-identity__avatar {
		width: 44px;
		height: 44px;
		font-size: 1.15rem;
	}

	.myinfo-identity__name {
		font-size: 1.2rem;
	}

	.myinfo-panel {
		padding: 1rem 1.125rem;
	}

	/* Account Settings: long e-mail addresses break cleanly instead of mid-domain overflow. */
	.myinfo-accountsettings-page .myinfo-panel {
		overflow-wrap: anywhere;
	}

	.myinfo-accountsettings-page [id$="lnkUnlinkCustomer"] {
		width: 100%;
	}
}

/* ===== DRIVE TEST DISCLAIMER / SCHEDULE DRIVE TEST PAGES ===== */

.drivetest-disclaimer-page__cms-content p,
.scheduledrivetest-page__cms-content p {
	margin-bottom: 0.75rem;
	line-height: 1.6;
	font-size: 0.95rem;
}

.drivetest-disclaimer-page__cms-content p strong,
.scheduledrivetest-page__cms-content p strong {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--color-gold);
}

/* Interactive calendar grid — asp:Calendar (CustomCalendar) rendered table.
   Sub-styles are wired to CssClass (not inline BackColor/ForeColor) in markup,
   so day states are themeable here instead of hardcoded gray inline styles. */
.drivetest-calendar {
	max-width: 320px;
	min-width: 320px;
	border: 1px solid var(--color-border-control);
	border-radius: 6px;
	padding: 0.25rem;
}

.drivetest-calendar table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 6px;
	border: none;
	background: transparent;
}

.drivetest-calendar caption {
	caption-side: top;
}

.drivetest-calendar__title .drivetest-calendar__title {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-azure-20);
	font-size: 0.95rem;
	text-align: center;
}

.drivetest-calendar .drivetest-calendar__title td,
.drivetest-calendar .drivetest-calendar__title td:hover {
	background: #fff;
	font-weight: 700;
}

.drivetest-calendar .drivetest-calendar__title td.drivetest-calendar__nav {
	background: var(--bs-gray-100);
}

.drivetest-calendar .drivetest-calendar__title td.drivetest-calendar__nav:hover {
	background: var(--bs-gray-200);
}

.drivetest-calendar__nav a {
	color: var(--color-azure-20);
	font-weight: 700;
	text-decoration: none;
}

.drivetest-calendar__day-header {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.75rem;
	color: var(--color-azure-20);
	text-align: center;
	padding-bottom: 0.25rem;
}

.drivetest-calendar td {
	text-align: center;
	padding: 0.75rem 0.4rem;
	border-radius: 6px;
	font-size: 0.85rem;
	background: var(--bs-gray-100);
}

.drivetest-calendar td a {
	color: inherit;
	text-decoration: none;
	display: block;
	line-height: 1;
}

.drivetest-calendar td:hover {
	background: var(--bs-gray-200);
}

.drivetest-calendar td.drivetest-calendar__day--weekend {
	background: var(--color-blue-light);
}

.drivetest-calendar td.drivetest-calendar__day--weekend:hover {
	background: var(--color-blue-border);
}

.drivetest-calendar td.drivetest-calendar__day--other-month {
	color: #9ca3af;
	background: #fff;
}

.drivetest-calendar td.drivetest-calendar__day--other-month:hover {
	background: var(--bs-gray-200);
}

.drivetest-calendar td.drivetest-calendar__day--today {
	background: var(--color-gold);
	color: var(--color-azure-20);
	font-weight: 700;
}

.drivetest-calendar td.drivetest-calendar__day--today:hover {
	background: #ffd752;
}

.drivetest-calendar td.drivetest-calendar__day--selected {
	background: var(--color-azure-20);
	color: #fff;
	font-weight: 700;
}

.drivetest-calendar__selector {
	background: var(--color-blue-light);
}

/* ===== Signout page (post-logout confirmation) ===== */
.signout-page__card {
	max-width: 600px;
	width: 100%;
}

.signout-page__logo {
	height: 40px;
	width: auto;
}