/**
 * AU Courier Manager Pro — front-end widget styles.
 * A light, airy premium design: white surfaces, soft shadows, a
 * blue/yellow accent palette customizable from Settings → Branding.
 */

/* Without this, every element that sets width:100% plus its own
   padding/border (almost every .asm-input/.asm-select/.asm-card in
   this file) renders WIDER than its container under the browser
   default (content-box) box model — harmless on wide desktop layouts
   where there's slack space to absorb it, but on narrow mobile
   viewports the accumulated overflow across dozens of stacked fields
   (especially on the booking page's many cards) breaks the layout:
   fields spill past their card edges, rows misalign, and the page can
   become horizontally scrollable. This is the actual root cause of
   "not mobile responsive" reports on this widget. */
.asm-widget,
.asm-widget *,
.asm-widget *::before,
.asm-widget *::after {
	box-sizing: border-box;
}

.asm-widget {
	--asm-primary: #ff7a01;
	--asm-primary-dark: #cc6200;
	--asm-accent: #f5e830;
	--asm-ink: #101828;
	--asm-muted: #667085;
	--asm-border: #e4e7ec;
	--asm-surface: #ffffff;
	--asm-surface-soft: #f8f9fc;
	--asm-radius: 18px;
	--asm-radius-sm: 10px;
	--asm-shadow: 0 12px 32px rgba(16, 24, 40, 0.07);

	/* "Get a Quote" bar theme -- a solid blue quote card with white
	   input pills and an orange call-to-action, deliberately a
	   distinct palette from the rest of the (white/ink) widget so it
	   reads as the prominent, get-started element it is. */
	--asm-quote-blue: #4a72b0;
	--asm-quote-blue-light: #7fa0cf;
	--asm-quote-blue-dark: #375a91;
	--asm-quote-orange: var(--asm-primary);
	--asm-quote-orange-dark: var(--asm-primary-dark);

	max-width: 960px;
	margin: 0 auto;
	background: var(--asm-surface);
	border-radius: var(--asm-radius);
	box-shadow: var(--asm-shadow);
	border: 1px solid var(--asm-border);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--asm-ink);
	overflow: hidden;
	position: relative;
}

.asm-widget::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--asm-primary), var(--asm-accent));
}

.asm-widget__tabs {
	display: flex;
	gap: 3px;
	padding: 0;
	background: var(--asm-surface);
}

.asm-tab {
	appearance: none;
	flex: 1;
	border: none !important;
	background: var(--asm-quote-blue-light) !important;
	padding: 20px 22px;
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.85) !important;
	border-radius: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: color 0.15s ease, background 0.15s ease;
}

.asm-widget__tabs .asm-tab:first-child {
	border-top-left-radius: var(--asm-radius);
}

.asm-widget__tabs .asm-tab:last-child {
	border-top-right-radius: var(--asm-radius);
}

.asm-tab:hover {
	background: var(--asm-quote-blue) !important;
	color: #fff !important;
}

.asm-tab.is-active {
	color: #fff !important;
	background: var(--asm-quote-blue) !important;
}

/* The dashboard's tab bar is the one place tabs can grow past a
   handful (up to ten, once every B2B tab is present) -- equal-width
   flex:1 tabs (the default above, still correct for the 2-3-tab quote
   widget/account tab bars) would squash every label unreadably at
   that count, especially on mobile. Scoped to just the dashboard's
   own scroll wrapper so the shared .asm-tab/.asm-widget__tabs rules
   above are untouched everywhere else. */
.asm-widget__tabs-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--asm-surface);
	scrollbar-width: thin;
}

.asm-widget__tabs-scroll::-webkit-scrollbar {
	height: 4px;
}

.asm-widget__tabs-scroll::-webkit-scrollbar-thumb {
	background: var(--asm-quote-blue);
	border-radius: 999px;
}

/* Only a B2B account's tab bar (which can carry up to ten tabs once
   every B2B tab is present) switches to compact, content-sized,
   horizontally-scrollable tabs -- a normal account's three tabs keep
   the original full-width even-split look unchanged. */
.asm-widget__tabs--compact {
	flex-wrap: nowrap;
	width: max-content;
	min-width: 100%;
}

.asm-widget__tabs--compact .asm-tab-group {
	flex: 0 0 auto;
}

.asm-widget__tabs--compact .asm-tab {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 16px 18px;
	font-size: 13px;
}

.asm-tab-group {
	display: flex;
	flex: 1 1 auto;
	flex-shrink: 0;
	align-items: stretch;
	gap: 3px;
}

.asm-tab-group--b2b {
	margin-left: 12px;
	padding-left: 12px;
	border-left: 2px solid rgba(255, 255, 255, 0.25);
}

.asm-tab-group__label {
	display: flex;
	align-items: center;
	padding: 0 4px 0 2px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	flex-shrink: 0;
}

.asm-tab-group:first-child .asm-tab:first-child {
	border-top-left-radius: var(--asm-radius);
}

.asm-tab-group:last-child .asm-tab:last-child {
	border-top-right-radius: var(--asm-radius);
}

.asm-panel {
	padding: 32px;
	border-top: 1px solid var(--asm-border);
}

.asm-panel[hidden] {
	display: none;
}

.asm-step[hidden] {
	display: none;
}

.asm-step-indicator {
	display: flex;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.asm-step-indicator li {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--asm-muted);
	text-align: center;
}

.asm-step-indicator li::before {
	content: "";
	position: absolute;
	top: 15px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--asm-border);
	z-index: 0;
}

.asm-step-indicator li:first-child::before {
	display: none;
}

.asm-step-indicator li.is-done::before {
	background: var(--asm-primary);
}

.asm-step-indicator li span {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--asm-surface-soft);
	border: 2px solid var(--asm-border);
	color: var(--asm-muted);
	font-weight: 700;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.asm-step-indicator li.is-active {
	color: var(--asm-ink);
}

.asm-step-indicator li.is-active span {
	background: var(--asm-primary);
	border-color: var(--asm-primary);
	color: #fff;
}

.asm-step-indicator li.is-done span {
	background: var(--asm-surface);
	border-color: var(--asm-primary);
	color: var(--asm-primary);
}

.asm-step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.asm-step-nav .asm-btn {
	flex: 1;
}

.asm-heading {
	position: relative;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--asm-ink);
	margin: 0 0 14px;
	padding-left: 12px;
}

.asm-heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 3px;
	border-radius: 3px;
	background: var(--asm-accent);
}

.asm-grid {
	display: grid;
	gap: 20px;
	margin-bottom: 20px;
}

.asm-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.asm-grid--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.asm-field-group {
	margin-bottom: 8px;
}

.asm-address-row {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--asm-border);
	border-radius: var(--asm-radius-sm);
	overflow: hidden;
	background: var(--asm-surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.asm-address-row:focus-within {
	border-color: var(--asm-primary);
	box-shadow: 0 0 0 4px rgba(255, 122, 1, 0.1);
}

.asm-select {
	border: none;
	border-radius: var(--asm-radius-sm);
	background: var(--asm-surface-soft);
	padding: 0 14px;
	font-weight: 600;
	font-size: 14px;
	color: var(--asm-ink);
	min-width: 40%;
}

.asm-address-row .asm-select {
	border-radius: 0;
	flex: 0 0 42%;
	width: 42%;
	max-width: 42%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.asm-select--fixed {
	display: flex;
	align-items: center;
	cursor: default;
}

.asm-select--fixed[hidden] {
	display: none;
}

.asm-shipping-type {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
}

.asm-shipping-type__option {
	appearance: none;
	border: 1px solid var(--asm-border) !important;
	background: var(--asm-surface) !important;
	color: var(--asm-muted) !important;
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.asm-shipping-type__option:hover {
	border-color: var(--asm-primary) !important;
	color: var(--asm-primary) !important;
}

.asm-shipping-type__option.is-active {
	background: var(--asm-primary) !important;
	border-color: var(--asm-primary) !important;
	color: #fff !important;
}

/**
 * Get a Quote bar (Step 1: From / To / parcel dimensions) -- a solid
 * blue card with white input pills, styled to match the "quick quote"
 * bar look: small uppercase grey label on top, bold value beneath, no
 * visible borders until focus.
 */
.asm-quote-bar {
	background: var(--asm-quote-blue);
	border-radius: var(--asm-radius-sm);
	padding: 20px;
}

.asm-quote-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 10px;
	margin-bottom: 10px;
}

.asm-quote-field {
	background: var(--asm-surface) !important;
	border-radius: var(--asm-radius-sm);
	padding: 8px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	transition: box-shadow 0.15s ease;
}

.asm-quote-field:focus-within {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.asm-quote-field__label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--asm-muted);
	margin-bottom: 2px;
}

.asm-quote-field__value {
	appearance: none;
	border: none !important;
	background: transparent !important;
	padding: 0;
	margin: 0;
	width: 100%;
	height: auto;
	font-size: 16px;
	font-weight: 700;
	color: var(--asm-ink);
}

.asm-quote-field__value:focus {
	outline: none;
	box-shadow: none;
}

.asm-quote-field__value::placeholder {
	color: var(--asm-muted);
	font-weight: 600;
	opacity: 0.7;
}

.asm-quote-field__value--fixed {
	cursor: default;
}

.asm-quote-field__value--select {
	cursor: pointer;
	padding-right: 18px;
}

/* appearance:none above strips the native dropdown arrow -- redraw a
   small one whenever a (visible, not [hidden]) select is present, so
   the field still reads as a picker. */
.asm-quote-field:has(select:not([hidden])) {
	position: relative;
}

.asm-quote-field:has(select:not([hidden]))::after {
	content: "▾";
	position: absolute;
	right: 14px;
	bottom: 10px;
	color: var(--asm-quote-orange);
	font-size: 13px;
	pointer-events: none;
}

.asm-quote-field--search .asm-search-wrap {
	position: relative;
}

.asm-quote-field--dim {
	flex: 1;
	min-width: 90px;
}

.asm-quote-dims {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.asm-quote-dims__packages {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	min-width: 260px;
}

.asm-quote-dims__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
	position: relative;
}

.asm-quote-remove {
	appearance: none;
	border: none !important;
	background: rgba(255, 255, 255, 0.25) !important;
	color: #fff !important;
	width: 28px;
	height: 28px;
	line-height: 1;
	border-radius: 50%;
	font-size: 16px;
	cursor: pointer;
	flex: 0 0 auto;
	align-self: center;
	transition: background 0.15s ease;
}

.asm-quote-remove:hover {
	background: rgba(255, 255, 255, 0.4) !important;
}

.asm-quote-addbtn {
	appearance: none;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.7) !important;
	background: transparent !important;
	color: #fff !important;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.asm-quote-addbtn:hover {
	background: rgba(255, 255, 255, 0.15) !important;
	border-color: #fff !important;
}

.asm-quote-submit {
	flex: 1 1 200px;
	background: var(--asm-quote-orange) !important;
	color: #fff !important;
	border-radius: 999px;
	padding: 15px 32px;
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.asm-quote-submit:hover {
	background: var(--asm-quote-orange-dark) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

.asm-valid-badge--light {
	color: #000000;
}

.asm-quote-promo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.85);
}

.asm-quote-promo input {
	flex: 0 1 200px;
	appearance: none;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
	background: transparent !important;
	padding: 4px 2px;
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: #fff;
}

.asm-quote-promo input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.asm-quote-promo input:focus {
	outline: none;
	border-bottom-color: #fff !important;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.asm-service-picker {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.asm-service-picker--payment {
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.asm-service-card {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	border: 1px solid var(--asm-border) !important;
	background: var(--asm-surface) !important;
	border-radius: var(--asm-radius-sm);
	padding: 14px 8px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.asm-service-card__icon {
	font-size: 20px;
	line-height: 1;
}

.asm-service-card__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--asm-ink) !important;
}

.asm-service-card__meta {
	font-size: 11px;
	color: var(--asm-muted) !important;
}

.asm-service-card:hover {
	border-color: var(--asm-primary) !important;
}

.asm-service-card.is-active {
	border-color: var(--asm-primary) !important;
	background: rgba(255, 122, 1, 0.06) !important;
	box-shadow: 0 0 0 3px rgba(255, 122, 1, 0.1);
}

.asm-service-card.is-active .asm-service-card__name {
	color: var(--asm-primary) !important;
}

.asm-address-divider {
	width: 1px;
	background: var(--asm-border);
}

.asm-input,
.asm-select {
	height: 48px;
	font-size: 14px;
	color: var(--asm-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.asm-input {
	border: 1px solid var(--asm-border);
	border-radius: var(--asm-radius-sm);
	padding: 0 14px;
	width: 100%;
	background: var(--asm-surface);
}

.asm-input:focus,
.asm-select:focus {
	outline: none;
	border-color: var(--asm-primary);
	box-shadow: 0 0 0 4px rgba(255, 122, 1, 0.1);
}

.asm-input--search {
	border: none;
	padding: 0;
	background: transparent;
	min-width: 0;
	width: 100%;
}

.asm-search-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
}

.asm-search-wrap .asm-search {
	flex: 1;
	min-width: 0;
}

.asm-suggestions {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	background: var(--asm-surface) !important;
	border: 1px solid var(--asm-border) !important;
	border-radius: 12px !important;
	box-shadow: 0 15px 50px rgba(0, 0, 0, .15) !important;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	max-height: 400px;
	overflow-y: auto;
	scroll-behavior: smooth;
}

.asm-suggestions[hidden] {
	display: none;
}

.asm-suggestions__item {
	padding: 10px 14px;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.1s ease, color 0.1s ease;
}

.asm-suggestions__item.is-active {
	background: var(--asm-primary) !important;
	color: #fff !important;
}

.asm-suggestions__item--notice {
	cursor: default;
	color: var(--asm-muted);
	font-size: 12px;
	line-height: 1.4;
	white-space: normal;
}

.asm-valid-badge {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #0a7a33;
}

.asm-valid-badge[hidden] {
	display: none;
}

.asm-mini-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--asm-muted);
	margin-bottom: 14px;
}

.asm-mini-field--action {
	justify-content: flex-end;
	align-items: flex-end;
}

.asm-packages {
	counter-reset: asm-package;
}

.asm-package-row {
	position: relative;
	background: var(--asm-surface-soft);
	border: 1px solid var(--asm-border);
	border-radius: var(--asm-radius-sm);
	padding: 26px 18px 4px;
	margin-bottom: 14px;
	counter-increment: asm-package;
}

.asm-package-row::before {
	content: "Package " counter(asm-package);
	position: absolute;
	top: 10px;
	left: 18px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--asm-muted);
}

.asm-link-btn {
	appearance: none;
	background: none !important;
	border: none !important;
	color: #d92d20 !important;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	padding: 0 0 14px;
}

.asm-checkbox-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 10px;
}

.asm-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 10px;
	padding: 12px 14px;
	border: 1px solid var(--asm-border);
	border-radius: var(--asm-radius-sm);
	background: var(--asm-surface);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.asm-checkbox-group .asm-checkbox {
	margin-bottom: 0;
}

.asm-checkbox:hover {
	border-color: var(--asm-primary);
}

.asm-checkbox:has(input:checked) {
	background: rgba(255, 122, 1, 0.06);
	border-color: var(--asm-primary);
}

.asm-checkbox input {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--asm-primary);
}

.asm-conditional {
	margin: -6px 0 14px 14px;
	padding: 12px 14px 2px;
	border-left: 2px solid var(--asm-border);
}

.asm-conditional[hidden] {
	display: none;
}

.asm-btn {
	appearance: none;
	border: none !important;
	border-radius: var(--asm-radius-sm);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 22px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.asm-btn--primary {
	background: var(--asm-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 0 rgba(16, 24, 40, 0.06);
}

.asm-btn--primary:hover {
	box-shadow: 0 8px 20px rgba(255, 122, 1, 0.4);
	transform: translateY(-1px);
	filter: brightness(1.05);
}

.asm-btn--primary:active {
	transform: translateY(0);
	filter: brightness(0.98);
}

.asm-btn--ghost {
	background: var(--asm-surface) !important;
	border: 1px solid var(--asm-border) !important;
	color: var(--asm-primary) !important;
}

.asm-btn--ghost:hover {
	border-color: var(--asm-primary) !important;
	background: rgba(255, 122, 1, 0.05) !important;
}

.asm-btn--block {
	width: 100%;
}

.asm-quote-results {
	margin-top: 24px;
	padding: 20px;
	border-radius: var(--asm-radius-sm);
	background: var(--asm-surface-soft);
	border: 1px solid var(--asm-border);
}

.asm-quote-results[hidden] {
	display: none;
}

.asm-quote-results.is-error {
	background: #fdeceb;
	border-color: #f3c6c2;
	color: #b3261e;
}

.asm-quote-results.is-error .description {
	color: inherit;
}

.asm-quote-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.asm-card {
	background: var(--asm-surface);
	border: 1px solid var(--asm-border);
	border-radius: var(--asm-radius-sm);
	padding: 18px;
	box-shadow: var(--asm-shadow);
}

.asm-quote-card {
	background: var(--asm-surface);
	border: 1px solid var(--asm-border);
	border-radius: var(--asm-radius-sm);
	padding: 18px;
	box-shadow: var(--asm-shadow);
}

.asm-quote-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}

.asm-quote-card__carrier {
	display: flex;
	align-items: center;
	gap: 10px;
}

.asm-quote-card__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--asm-primary);
	color: #fff;
	font-weight: 700;
	flex-shrink: 0;
}

.asm-quote-card__service {
	font-size: 12px;
	color: var(--asm-muted);
}

.asm-quote-card__price {
	font-size: 18px;
	font-weight: 800;
	color: var(--asm-primary);
	white-space: nowrap;
}

.asm-quote-card__meta {
	font-size: 12px;
	color: var(--asm-muted);
	margin-bottom: 10px;
}

.asm-quote-card__breakdown {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	border-top: 1px solid var(--asm-border);
	padding-top: 10px;
}

#asm-booking-back {
	display: inline-block;
	margin-bottom: 16px;
	padding: 0;
}

.asm-order-summary:empty {
	display: none;
}

.asm-order-summary {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--asm-surface-soft);
	border: 1px solid var(--asm-border);
	border-radius: var(--asm-radius-sm);
	padding: 16px 20px;
}

.asm-order-summary__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.asm-order-summary__carrier {
	display: flex;
	align-items: center;
	gap: 12px;
}

.asm-order-summary__meta {
	font-size: 12px;
	color: var(--asm-muted);
}

.asm-order-summary__breakdown {
	list-style: none;
	margin: 0;
	padding: 10px 0 0;
	border-top: 1px solid var(--asm-border);
}

.asm-order-summary__breakdown li {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--asm-muted);
	padding: 3px 0;
}

.asm-order-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 10px;
	border-top: 1px solid var(--asm-border);
	font-weight: 800;
	color: var(--asm-ink);
}

.asm-order-summary__total span:last-child {
	font-size: 20px;
	color: var(--asm-primary);
}

.asm-booking-section {
	margin-top: 0;
	margin-bottom: 16px;
}

.asm-booking-section__note {
	font-size: 13px;
	color: var(--asm-muted);
	margin: 4px 0 14px;
}

.asm-booking-section .asm-heading {
	margin: 0 0 4px;
}

.asm-booking-address-preview {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var(--asm-border);
	font-size: 13px;
	font-weight: 700;
	color: var(--asm-ink);
}

/**
 * Results screen (screenshot-1-style list of priced carrier options)
 * -- a full-screen view that replaces the Shipment step when quotes
 * come back, and the Booking screen it hands off to when a carrier's
 * "Book" button is clicked.
 */
.asm-results-screen[hidden],
.asm-booking-screen[hidden] {
	display: none;
}

.asm-results-heading {
	font-size: 20px;
	font-weight: 800;
	color: var(--asm-ink);
	margin: 4px 0 18px;
}

.asm-results-list__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.asm-result-card {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	background: var(--asm-surface);
	border: 1px solid var(--asm-border);
	border-radius: var(--asm-radius-sm);
	padding: 18px 20px;
	box-shadow: var(--asm-shadow);
}

.asm-result-card__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--asm-radius-sm);
	background: var(--asm-primary);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}

.asm-result-card__logo--sm {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 12px;
}

.asm-result-card__info {
	min-width: 160px;
	flex: 1 1 160px;
}

.asm-result-card__info strong {
	display: block;
	font-size: 15px;
	color: var(--asm-ink);
}

.asm-result-card__service {
	font-size: 12px;
	color: var(--asm-muted);
	margin-top: 2px;
}

.asm-result-card__delivery {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 140px;
}

.asm-result-card__delivery-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--asm-muted);
	font-weight: 700;
}

.asm-result-card__delivery-value {
	font-size: 13px;
	font-weight: 700;
	color: var(--asm-ink);
}

.asm-result-card__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	min-width: 120px;
	text-align: right;
}

.asm-result-card__price-ex {
	font-size: 20px;
	font-weight: 800;
	color: var(--asm-primary);
	white-space: nowrap;
}

.asm-result-card__price-inc {
	font-size: 11px;
	color: var(--asm-muted);
	white-space: nowrap;
}

.asm-result-card__info-btn {
	appearance: none;
	border: none !important;
	background: none !important;
	color: var(--asm-primary) !important;
	font-size: 18px;
	cursor: pointer;
	flex-shrink: 0;
	line-height: 1;
}

.asm-result-card__book {
	flex-shrink: 0;
	padding: 12px 26px;
}

.asm-result-card__breakdown {
	flex-basis: 100%;
	list-style: none;
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--asm-border);
}

.asm-result-card__breakdown[hidden] {
	display: none;
}

.asm-result-card__breakdown li {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--asm-muted);
	padding: 3px 0;
	max-width: 320px;
}

.asm-result-card__breakdown-total {
	font-weight: 700;
	color: var(--asm-ink) !important;
	border-top: 1px solid var(--asm-border);
	margin-top: 4px;
	padding-top: 8px !important;
}

.asm-booking-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
}

.asm-booking-sidebar {
	position: sticky;
	top: 20px;
}

.asm-quote-card__breakdown li.asm-quote-card__subtotal {
	border-top: 1px solid var(--asm-border);
	margin-top: 4px;
	padding-top: 8px;
	font-weight: 700;
	color: var(--asm-ink);
}

.asm-widget--dashboard .asm-panel[hidden] {
	display: none;
}

.asm-dashboard-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 24px;
}

.asm-dashboard-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.asm-dashboard-row__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	flex-wrap: wrap;
}

.asm-dashboard-row .asm-badge {
	background: var(--asm-surface-soft);
	color: var(--asm-primary);
	margin-left: 8px;
}

.asm-dash-welcome {
	padding: 18px 24px 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--asm-ink);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.asm-dash-welcome .asm-pill-btn {
	font-size: 12px;
	flex-shrink: 0;
}

.asm-b2b-banner {
	margin: 16px 24px 0;
	padding: 14px 18px;
	border-radius: var(--asm-radius-sm);
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	border: 1px solid;
}

.asm-b2b-banner strong {
	font-size: 14px;
}

.asm-b2b-banner--pending {
	background: #fef3e2;
	border-color: #f6ddb0;
	color: #94590a;
}

.asm-b2b-banner--approved {
	background: #e8f7ee;
	border-color: #bfe8cf;
	color: #0a7a33;
}

.asm-b2b-banner--rejected,
.asm-b2b-banner--suspended {
	background: #fdeceb;
	border-color: #f3c6c2;
	color: #b3261e;
}

.asm-b2b-banner--join {
	background: var(--asm-surface-soft);
	border-color: var(--asm-border);
	color: var(--asm-ink);
}

.asm-b2b-banner--join .asm-btn {
	align-self: flex-start;
	margin-top: 8px;
}

.asm-dash-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.asm-dash-stat {
	background: var(--asm-surface-soft);
	border: 1px solid var(--asm-border);
	border-radius: var(--asm-radius-sm);
	padding: 14px 16px;
	text-align: center;
}

.asm-dash-stat--accent {
	background: var(--asm-primary);
	border-color: var(--asm-primary);
}

.asm-dash-stat--accent .asm-dash-stat__value,
.asm-dash-stat--accent .asm-dash-stat__label {
	color: #fff;
}

.asm-dash-stat__value {
	font-size: 24px;
	font-weight: 800;
	color: var(--asm-ink);
	line-height: 1.2;
}

.asm-dash-stat__label {
	font-size: 12px;
	color: var(--asm-muted);
	margin-top: 4px;
}

.asm-api-key-value {
	display: block;
	overflow-x: auto;
	margin: 10px 0;
	padding: 12px 14px;
	border-radius: var(--asm-radius-sm);
	background: var(--asm-ink);
	color: #d8f5df;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	white-space: pre;
	-webkit-overflow-scrolling: touch;
}

.asm-b2b-dashboard-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.asm-b2b-dashboard-section-head .asm-heading {
	margin: 0;
}

/* Mirrors admin.css's .asm-badge/--success/--error/--warning/--neutral --
   the B2B Dashboard's API Requests table (frontend, not wp-admin) uses
   the same class names to colour a request's status, which previously
   had no matching styles on the frontend stylesheet and rendered as
   plain unstyled text. */
.asm-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.asm-badge--success {
	background: #e8f7ee;
	color: #0a7a33;
}

.asm-badge--error {
	background: #fde8e8;
	color: #b3261e;
}

.asm-badge--warning {
	background: #fef3e2;
	color: #b4530a;
}

.asm-badge--neutral {
	background: #f1f2f4;
	color: #50575e;
}

.asm-b2b-table {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
	font-size: 13px;
	-webkit-overflow-scrolling: touch;
}

.asm-b2b-table th,
.asm-b2b-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--asm-border);
	vertical-align: top;
}

.asm-b2b-table th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--asm-muted);
}

#asm-api-request-panel {
	margin: 16px 0;
	padding: 18px;
	border-radius: var(--asm-radius-sm);
	border: 1px solid var(--asm-border);
	background: var(--asm-surface-soft);
}

#asm-api-request-panel[hidden] {
	display: none;
}

.asm-dashboard-row__identity {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex: 1;
	min-width: 220px;
}

.asm-dashboard-row__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--asm-primary);
	color: #fff;
	font-weight: 700;
}

.asm-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-left: 8px;
	background: var(--asm-surface-soft);
	color: var(--asm-muted);
}

.asm-status-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.asm-status-badge--pending {
	background: #fef6e7;
	color: #b7791f;
}

.asm-status-badge--booked,
.asm-status-badge--transit {
	background: #e8f0fe;
	color: var(--asm-primary);
}

.asm-status-badge--delivered {
	background: #e8f7ee;
	color: #0a7a33;
}

.asm-status-badge--cancelled {
	background: #fdeceb;
	color: #b3261e;
}

.asm-pill-btn {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--asm-border) !important;
	background: var(--asm-surface) !important;
	color: var(--asm-ink) !important;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.asm-pill-btn:hover {
	border-color: var(--asm-primary) !important;
	color: var(--asm-primary) !important;
}

.asm-pill-btn--danger {
	color: #b3261e !important;
	border-color: #f3c6c2 !important;
}

.asm-pill-btn--danger:hover {
	background: #fdeceb !important;
	border-color: #b3261e !important;
	color: #b3261e !important;
}

.asm-timeline-header {
	margin-bottom: 14px;
	font-size: 14px;
}

.asm-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.asm-timeline-step {
	position: relative;
	padding: 0 0 20px 26px;
	border-left: 2px solid var(--asm-border);
}

.asm-timeline-step:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.asm-timeline-dot {
	position: absolute;
	left: -7px;
	top: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--asm-border);
}

.asm-timeline-step.is-current .asm-timeline-dot {
	background: var(--asm-primary);
	box-shadow: 0 0 0 4px rgba(255, 122, 1, 0.15);
}

.asm-timeline-step.is-exception .asm-timeline-dot {
	background: #d92d20;
}

.asm-timeline-label {
	font-weight: 700;
	font-size: 14px;
}

.asm-timeline-desc {
	font-size: 13px;
	color: var(--asm-muted);
	margin-top: 2px;
}

.asm-timeline-time {
	font-size: 12px;
	color: var(--asm-muted);
	margin-top: 2px;
}

.asm-quote-card__breakdown li {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--asm-muted);
	padding: 2px 0;
}

@media (max-width: 720px) {
	.asm-grid--2,
	.asm-grid--5 {
		grid-template-columns: 1fr;
	}

	.asm-service-picker {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.asm-panel {
		padding: 18px;
	}

	.asm-dash-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.asm-address-row {
		flex-wrap: wrap;
	}

	.asm-address-row .asm-select,
	.asm-address-row .asm-select--fixed {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		padding: 10px 14px;
	}

	.asm-address-divider {
		display: none;
	}

	.asm-search-wrap {
		flex: 0 0 100%;
		width: 100%;
	}

	.asm-tab {
		font-size: 12px;
		padding: 14px 10px;
	}

	.asm-widget__tabs--compact .asm-tab {
		font-size: 12px;
		padding: 13px 14px;
	}

	.asm-tab-group__label {
		font-size: 9px;
	}

	.asm-tab-group--b2b {
		margin-left: 8px;
		padding-left: 8px;
	}

	.asm-dash-welcome {
		padding: 16px 18px 0;
		font-size: 16px;
	}

	.asm-b2b-banner {
		margin: 14px 18px 0;
	}

	.asm-step-indicator li {
		font-size: 10px;
	}

	.asm-order-summary__top {
		justify-content: flex-start;
	}

	.asm-order-summary__price {
		font-size: 18px;
	}

	.asm-quote-row {
		grid-template-columns: 1fr;
	}

	.asm-quote-dims {
		flex-direction: column;
		align-items: stretch;
	}

	/* align-items: stretch above should already make this button fill
	   the width on its own, but that depends on its used cross-size
	   staying "auto" -- an explicit width guarantees it edge-to-edge
	   instead of leaving it to inherited stretch behavior, which is
	   what was actually rendering narrow (inset with visible blue
	   margin either side) on a real device. */
	.asm-quote-submit {
		width: 100%;
		flex: 0 0 auto;
	}

	.asm-quote-dims__row {
		flex-wrap: wrap;
	}

	/* Now that Qty/Type are gone, a package row is just the 4 dimension
	   fields (Weight/Length/Width/Height) -- sized to exactly 2 per
	   row (the calc() accounts for the 10px gap between them) instead
	   of an uneven flex-wrap, so it reads as a clean 2x2 grid on a
	   narrow phone rather than 1-per-row or an awkward 3rd item
	   trailing on its own line. */
	.asm-quote-field--dim {
		flex: 1 1 calc(50% - 5px);
		min-width: 0;
	}

	.asm-quote-remove {
		margin-left: auto;
	}

	.asm-quote-addbtn {
		align-self: center;
	}

	.asm-booking-layout {
		grid-template-columns: 1fr;
	}

	.asm-booking-sidebar {
		position: static;
		order: -1;
	}

	/* The desktop layout is a single flex-wrap row (logo, name/service,
	   delivery estimate, price, info toggle, book button, all inline).
	   On a narrow phone that leaves too many independently-sized flex
	   items competing for width, which is what was actually rendering
	   as a squashed, misaligned card ("not responsive" reports on this
	   screen). Switched to an explicit CSS Grid with named areas
	   instead of flex-column stacking, so every row's layout on mobile
	   is deliberately spelled out rather than left to flex-wrap
	   guesswork: logo+name share the top row, delivery estimate and
	   price each become their own label-left/value-right row, and the
	   info toggle sits next to a full-width Book button at the bottom. */
	.asm-result-card {
		display: grid;
		grid-template-columns: 44px 1fr;
		grid-template-areas:
			"logo info"
			"delivery delivery"
			"price price"
			"infobtn book"
			"breakdown breakdown";
		align-items: center;
		gap: 12px;
		text-align: left;
	}

	.asm-result-card__logo {
		grid-area: logo;
	}

	.asm-result-card__info {
		grid-area: info;
		min-width: 0;
	}

	.asm-result-card__delivery {
		grid-area: delivery;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		min-width: 0;
		gap: 8px;
	}

	.asm-result-card__price {
		grid-area: price;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		min-width: 0;
		width: 100%;
		text-align: right;
	}

	.asm-result-card__info-btn {
		grid-area: infobtn;
		justify-self: center;
		font-size: 22px;
	}

	.asm-result-card__book {
		grid-area: book;
		width: 100%;
	}

	.asm-result-card__breakdown {
		grid-area: breakdown;
	}

	.asm-result-card__breakdown li {
		max-width: none;
	}
}

@media (max-width: 480px) {
	.asm-service-picker {
		grid-template-columns: 1fr;
	}
}

/* Thank-you modal, shown after a booking is confirmed (with or without
   a payment redirect in between). */
.asm-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.asm-modal[hidden] {
	display: none;
}

.asm-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, 0.55);
}

.asm-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	background: var(--asm-surface);
	border-radius: var(--asm-radius);
	box-shadow: var(--asm-shadow);
	padding: 36px 28px 28px;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	animation: asm-modal-in 0.2s ease-out;
}

@keyframes asm-modal-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.asm-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: var(--asm-muted);
	cursor: pointer;
	padding: 6px;
}

.asm-modal__close:hover {
	color: var(--asm-ink);
}

.asm-modal__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--asm-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
}

.asm-modal__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	color: var(--asm-ink);
}

.asm-modal__message {
	margin: 0 0 16px;
	color: var(--asm-muted);
	font-size: 14px;
	line-height: 1.5;
}

.asm-modal__reference {
	margin: 0 0 20px;
	padding: 10px 16px;
	background: var(--asm-surface-soft);
	border: 1px solid var(--asm-border);
	border-radius: var(--asm-radius-sm);
	font-weight: 600;
	color: var(--asm-ink);
}