/* ===================================================
   MangaShop — Account Area CSS  v1.0.0
   Design system: dark teal #0E3C4B, accent #6AC0FD,
   action blue #0B63C4, orange #FE9900, success #2FB86A
   =================================================== */

/* ---------- Layout ---------- */
.acct-wrap {
	display: flex;
	gap: 0;
	align-items: flex-start;
	width: 100%;
	padding: 16px 8px 40px;
	box-sizing: border-box;
}

/* ---------- Sidebar ---------- */
.acct-sidebar {
	width: 210px;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid #E3E8EC;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(16,44,60,.06);
	overflow: hidden;
	position: sticky;
	top: 16px;
	margin-right: 20px;
}

.acct-sidebar-head {
	background: #0E3C4B;
	color: #fff;
	padding: 14px 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .4px;
}

.acct-sidebar-user {
	display: flex;
	align-items: center;
	gap: 10px;
}

.acct-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #6AC0FD;
	color: #0E3C4B;
	font-size: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.acct-sidebar-name {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.acct-sidebar-email {
	font-size: 10px;
	opacity: .75;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.acct-nav {
	list-style: none;
	margin: 0;
	padding: 6px 0;
}

.acct-nav li {
	margin: 0;
	padding: 0;
}

.acct-nav a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	font-size: 12px;
	color: #1A2A33;
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: background .15s, color .15s;
}

.acct-nav a:hover {
	background: #F0F7FB;
	color: #0B63C4;
	text-decoration: none;
}

.acct-nav a.active {
	border-left-color: #0E3C4B;
	background: #EDF6FB;
	color: #0E3C4B;
	font-weight: 700;
}

.acct-nav .nav-icon {
	font-size: 14px;
	width: 18px;
	text-align: center;
	flex-shrink: 0;
}

.acct-nav-divider {
	height: 1px;
	background: #E3E8EC;
	margin: 6px 0;
}

.acct-nav a.nav-logout {
	color: #E45757;
}

.acct-nav a.nav-logout:hover {
	background: #FFF5F5;
	color: #c0392b;
}

/* ---------- Mobile collapsible nav ---------- */
.acct-mobile-nav {
	display: none;
	width: 100%;
	background: #fff;
	border: 1px solid #E3E8EC;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(16,44,60,.06);
	overflow: hidden;
	margin-bottom: 14px;
}

.acct-mobile-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
	background: #0E3C4B;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.acct-mobile-nav-toggle::-webkit-details-marker { display: none; }

.acct-mobile-nav-toggle::after {
	content: '▾';
	font-size: 16px;
	transition: transform .2s;
}

details.acct-mobile-nav[open] .acct-mobile-nav-toggle::after {
	transform: rotate(180deg);
}

.acct-mobile-nav-label { opacity: .75; font-size: 11px; font-weight: 600; }
.acct-mobile-nav-current { font-size: 13px; flex: 1; text-align: center; }

.acct-mobile-nav-list {
	border-top: 1px solid #E3E8EC;
}

/* ---------- Main content area ---------- */
.acct-main {
	flex: 1;
	min-width: 0;
}

.acct-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.acct-page-title {
	font-size: 20px;
	font-weight: 700;
	color: #0E3C4B;
	margin: 0;
}

.acct-logout-link {
	font-size: 11px;
	color: #E45757;
	text-decoration: none;
	padding: 4px 10px;
	border: 1px solid #E45757;
	border-radius: 4px;
	white-space: nowrap;
}

.acct-logout-link:hover { background: #E45757; color: #fff; text-decoration: none; }

/* ---------- Cards ---------- */
.acct-card {
	background: #fff;
	border: 1px solid #E3E8EC;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(16,44,60,.06);
	padding: 20px 22px;
	margin-bottom: 16px;
}

.acct-card-title {
	font-size: 14px;
	font-weight: 700;
	color: #0E3C4B;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #E3E8EC;
}

/* ---------- Dashboard grid ---------- */
.acct-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.acct-tile {
	background: #fff;
	border: 1px solid #E3E8EC;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(16,44,60,.06);
	padding: 18px 16px;
	text-decoration: none;
	color: inherit;
	display: block;
	transition: box-shadow .15s, border-color .15s;
}

.acct-tile:link,
.acct-tile:visited { color: inherit; }
.acct-tile:hover { box-shadow: 0 4px 16px rgba(16,44,60,.12); border-color: #6AC0FD; text-decoration: none; color: inherit; }

.acct-tile-icon {
	font-size: 24px;
	margin-bottom: 10px;
}

.acct-tile-label {
	font-size: 11px;
	font-weight: 700;
	color: #5A6B75;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 4px;
}

.acct-tile-value {
	font-size: 22px;
	font-weight: 700;
	color: #0E3C4B;
	line-height: 1.1;
}

.acct-tile-sub {
	font-size: 11px;
	color: #5A6B75;
	margin-top: 4px;
}

.acct-tile-link {
	display: inline-block;
	margin-top: 10px;
	font-size: 11px;
	color: #0B63C4;
	font-weight: 600;
}

.acct-tile-wide {
	grid-column: span 2;
}

/* ---------- Status chips ---------- */
.status-chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.status-chip--new      { background: #EAF4FF; color: #0B63C4; }
.status-chip--read     { background: #EAF4FF; color: #0B63C4; }
.status-chip--supplier { background: #FFF8E1; color: #B8860B; }
.status-chip--stock    { background: #FFF8E1; color: #B8860B; }
.status-chip--late     { background: #FFF8E1; color: #B8860B; }
.status-chip--processed{ background: #E8F5E9; color: #2E7D32; }
.status-chip--shipped  { background: #E3F2FD; color: #1565C0; }
.status-chip--shippedc { background: #E3F2FD; color: #1565C0; }
.status-chip--delivered{ background: #E8F5E9; color: #1B5E20; }
.status-chip--pickedup { background: #E8F5E9; color: #1B5E20; }
.status-chip--canceled { background: #FFEBEE; color: #C62828; }
.status-chip--returned { background: #FFEBEE; color: #C62828; }
.status-chip--card_error { background: #FFEBEE; color: #C62828; }

/* ---------- Orders list ---------- */
.acct-order-list { margin: 0; }

.acct-order-header {
	display: grid;
	grid-template-columns: 1fr 120px 140px 140px 80px 70px;
	padding: 8px 12px;
	background: #F7F9FB;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	color: #5A6B75;
	text-transform: uppercase;
	letter-spacing: .4px;
	margin-bottom: 4px;
}

.acct-order-row {
	display: grid;
	grid-template-columns: 1fr 120px 140px 140px 80px 70px;
	padding: 12px 12px;
	background: #fff;
	border: 1px solid #E3E8EC;
	border-radius: 8px;
	margin-bottom: 6px;
	align-items: center;
	font-size: 12px;
	transition: box-shadow .12s;
}

.acct-order-row:hover { box-shadow: 0 2px 8px rgba(16,44,60,.08); }

.acct-order-row a { color: #0B63C4; text-decoration: none; }
.acct-order-row a:hover { text-decoration: underline; }

.acct-order-id { font-weight: 700; font-size: 13px; color: #0E3C4B; }
.acct-order-date { color: #5A6B75; font-size: 11px; }
.acct-order-total { font-weight: 700; color: #0E3C4B; }
.acct-order-delivery { color: #5A6B75; font-size: 11px; }

.acct-order-details-btn,
.acct-order-details-btn:link,
.acct-order-details-btn:visited {
	display: inline-block;
	padding: 4px 10px;
	background: #0E3C4B;
	color: #fff;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
}

.acct-order-details-btn:hover { background: #0B63C4; color: #fff; text-decoration: none; }

.acct-section-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: #0E3C4B;
	padding: 8px 14px;
	border-radius: 7px 7px 0 0;
	margin-bottom: 0;
}

.acct-section-label--alt {
	background: #2FB86A;
}

/* ---------- Addresses ---------- */
.acct-addr-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.acct-addr-card {
	background: #F7F9FB;
	border: 1px solid #E3E8EC;
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 12px;
	line-height: 1.7;
}

.acct-addr-name {
	font-weight: 700;
	color: #0E3C4B;
	font-size: 13px;
	margin-bottom: 4px;
}

.acct-addr-actions {
	margin-top: 10px;
	display: flex;
	gap: 10px;
}

.acct-btn-sm {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid transparent;
}

.acct-btn-sm:hover { text-decoration: none; }

.acct-btn-sm--primary,
.acct-btn-sm--primary:link,
.acct-btn-sm--primary:visited { background: #0E3C4B; color: #fff; }
.acct-btn-sm--primary:hover { background: #0B63C4; color: #fff; }
.acct-btn-sm--danger,
.acct-btn-sm--danger:link,
.acct-btn-sm--danger:visited { background: #fff; color: #E45757; border-color: #E45757; }
.acct-btn-sm--danger:hover { background: #E45757; color: #fff; }

.acct-addr-add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: #0E3C4B;
	color: #fff;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	margin-bottom: 14px;
}

.acct-addr-add:link,
.acct-addr-add:visited { color: #fff; }
.acct-addr-add:hover { background: #0B63C4; color: #fff; text-decoration: none; }

/* ---------- Edit profile form ---------- */
.acct-form-card {
	background: #fff;
	border: 1px solid #E3E8EC;
	border-radius: 10px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(16,44,60,.06);
	max-width: 520px;
}

.acct-field {
	margin-bottom: 16px;
}

.acct-field label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #5A6B75;
	text-transform: uppercase;
	letter-spacing: .4px;
	margin-bottom: 5px;
}

.acct-field input[type="text"],
.acct-field input[type="email"],
.acct-field input[type="password"] {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #C8D3DA;
	border-radius: 6px;
	font-size: 13px;
	font-family: Verdana, sans-serif;
	color: #1A2A33;
	box-sizing: border-box;
	transition: border-color .15s;
}

.acct-field input:focus {
	outline: none;
	border-color: #6AC0FD;
	box-shadow: 0 0 0 3px rgba(106,192,253,.15);
}

.acct-field-hint {
	font-size: 10px;
	color: #8A9BA5;
	margin-top: 3px;
}

.acct-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.acct-current-password {
	background: #FFF8E1;
	border: 1px solid #FFD54F;
	border-radius: 8px;
	padding: 14px 16px;
	margin-top: 6px;
}

.acct-current-password label {
	color: #7B5800 !important;
}

.acct-current-password input {
	border-color: #FFB300 !important;
}

.acct-form-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	align-items: center;
}

.acct-btn {
	display: inline-block;
	padding: 9px 20px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	border: 1px solid transparent;
	font-family: Verdana, sans-serif;
	text-decoration: none;
}

.acct-btn--primary,
.acct-btn--primary:link,
.acct-btn--primary:visited {
	background: #0E3C4B;
	color: #fff;
}

.acct-btn--primary:hover { background: #0B63C4; color: #fff; text-decoration: none; }

.acct-btn--ghost {
	background: #fff;
	color: #5A6B75;
	border-color: #C8D3DA;
}

.acct-btn--ghost:hover { border-color: #0E3C4B; color: #0E3C4B; text-decoration: none; }

/* ---------- Display preferences ---------- */
.acct-pref-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #F0F4F7;
}

.acct-pref-row:last-child { border-bottom: none; }

.acct-pref-row input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin-top: 1px;
	flex-shrink: 0;
	accent-color: #0E3C4B;
	cursor: pointer;
}

.acct-pref-label {
	font-size: 12px;
	color: #1A2A33;
}

.acct-pref-hint {
	font-size: 10px;
	color: #8A9BA5;
	margin-top: 2px;
}

/* ---------- Subscriptions / Abonari ---------- */
.acct-sub-section {
	margin-bottom: 10px;
}

.acct-sub-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #F0F4F7;
}

.acct-sub-row:last-child { border-bottom: none; }

.acct-sub-info { flex: 1; }

.acct-sub-name {
	font-size: 14px;
	font-weight: 700;
	color: #0E3C4B;
}

.acct-sub-desc {
	font-size: 13px;
	color: #3A4D57;
	margin-top: 3px;
	line-height: 1.4;
}

.acct-sub-transact {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: #1A7A45;
	font-weight: 700;
	padding: 4px 10px;
	background: #D4EDDA;
	border-radius: 12px;
}

/* Toggle switch */
.acct-toggle {
	position: relative;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
	margin-top: 1px;
}

.acct-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.acct-toggle-slider {
	position: absolute;
	inset: 0;
	background: #C8D3DA;
	border-radius: 22px;
	cursor: pointer;
	transition: background .2s;
}

.acct-toggle-slider:before {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform .2s;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.acct-toggle input:checked + .acct-toggle-slider { background: #0E3C4B; }
.acct-toggle input:checked + .acct-toggle-slider:before { transform: translateX(18px); }
.acct-toggle input:focus + .acct-toggle-slider { box-shadow: 0 0 0 3px rgba(14,60,75,.2); }

/* ---------- Reviews ---------- */
.acct-review-card {
	background: #fff;
	border: 1px solid #E3E8EC;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 10px;
}

.acct-review-product {
	font-size: 12px;
	font-weight: 700;
	color: #0B63C4;
	text-decoration: none;
}

.acct-review-product:hover { text-decoration: underline; }

.acct-review-date {
	font-size: 10px;
	color: #8A9BA5;
	margin-top: 2px;
	margin-bottom: 8px;
}

.acct-review-text {
	font-size: 12px;
	color: #1A2A33;
	line-height: 1.6;
}

.acct-empty {
	text-align: center;
	padding: 40px 20px;
	color: #8A9BA5;
	font-size: 13px;
}

.acct-empty-icon {
	font-size: 36px;
	margin-bottom: 10px;
}

/* ---------- Premium progress ---------- */
.acct-premium-bar {
	background: #E3E8EC;
	border-radius: 10px;
	height: 8px;
	overflow: hidden;
	margin: 8px 0;
}

.acct-premium-fill {
	height: 100%;
	background: linear-gradient(90deg, #6AC0FD, #0E3C4B);
	border-radius: 10px;
	transition: width .4s;
}

.acct-premium-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.acct-premium-badge--standard { background: #F0F4F7; color: #5A6B75; }
.acct-premium-badge--premium { background: #FFF8E1; color: #B8860B; }

/* ---------- Pre-orders table ---------- */
.acct-preorder-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.acct-preorder-table th {
	background: #F7F9FB;
	padding: 9px 12px;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	color: #5A6B75;
	text-transform: uppercase;
	letter-spacing: .4px;
	border-bottom: 2px solid #E3E8EC;
}

.acct-preorder-table td {
	padding: 10px 12px;
	border-bottom: 1px solid #F0F4F7;
	color: #1A2A33;
	vertical-align: middle;
}

.acct-preorder-table tr:hover td { background: #FAFBFC; }

.acct-preorder-table a { color: #0B63C4; text-decoration: none; }
.acct-preorder-table a:hover { text-decoration: underline; }

/* ---------- Flash messages ---------- */
.acct-flash {
	padding: 10px 14px;
	border-radius: 7px;
	font-size: 12px;
	margin-bottom: 14px;
}

.acct-flash--success { background: #E8F5E9; color: #1B5E20; border: 1px solid #A5D6A7; }
.acct-flash--error { background: #FFEBEE; color: #C62828; border: 1px solid #EF9A9A; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
	.acct-wrap {
		flex-direction: column;
		padding: 8px 4px 24px;
	}

	.acct-sidebar {
		display: none;
	}

	.acct-mobile-nav {
		display: block;
	}

	.acct-main {
		width: 100%;
	}

	.acct-grid {
		grid-template-columns: 1fr 1fr;
	}

	.acct-tile-wide { grid-column: span 2; }

	.acct-order-header { display: none; }

	.acct-order-row {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto;
		gap: 4px 8px;
	}

	.acct-order-delivery { display: none; }

	.acct-addr-grid { grid-template-columns: 1fr; }

	.acct-field-row { grid-template-columns: 1fr; }

	.acct-form-card { max-width: 100%; }
}

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

	.acct-tile-wide { grid-column: span 1; }

	.acct-page-title { font-size: 16px; }
}

/* ===========================================
   Order Details  (od-*)
   =========================================== */

/* --- Header card --- */
.od-header-card { padding: 18px 20px; }

.od-header-main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.od-header-id {
	font-size: 20px;
	font-weight: 700;
	color: #0E3C4B;
	line-height: 1.2;
}

.od-header-date {
	font-size: 12px;
	color: #5A6B75;
	margin-top: 2px;
}

.od-header-eta {
	margin-top: 12px;
	font-size: 13px;
	color: #1A2A33;
	padding-top: 12px;
	border-top: 1px solid #E3E8EC;
}

.od-awb-link {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid #0B63C4;
	border-radius: 4px;
	color: #0B63C4;
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
}

.od-awb-link:hover { background: #0B63C4; color: #fff; text-decoration: none; }

/* --- Progress stepper --- */
.od-stepper-card { padding: 20px 16px; }

.od-stepper {
	display: flex;
	align-items: flex-start;
	width: 100%;
}

.od-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 72px;
}

.od-step-circle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
	transition: background .2s, border-color .2s;
}

.od-step--done .od-step-circle {
	background: #0E3C4B;
	color: #fff;
	border: 2px solid #0E3C4B;
}

.od-step--active .od-step-circle {
	background: #fff;
	color: #0B63C4;
	border: 2px solid #0B63C4;
	box-shadow: 0 0 0 4px rgba(11,99,196,.12);
}

.od-step--pending .od-step-circle {
	background: #fff;
	color: #8A9BA5;
	border: 2px solid #C8D3DA;
}

.od-step-label {
	font-size: 10px;
	margin-top: 6px;
	text-align: center;
	line-height: 1.3;
	color: #5A6B75;
}

.od-step--done .od-step-label { color: #0E3C4B; font-weight: 600; }
.od-step--active .od-step-label { color: #0B63C4; font-weight: 700; }

.od-step-line {
	flex: 1;
	height: 3px;
	background: #C8D3DA;
	border-radius: 2px;
	margin: 16px 2px 0;
	transition: background .2s;
}

.od-step-line--done { background: #0E3C4B; }

/* --- Products table --- */
.od-products-table { margin: 0; }

.od-categ-row td {
	background: #F7F9FB;
	font-size: 11px;
	font-weight: 700;
	color: #5A6B75;
	text-transform: uppercase;
	letter-spacing: .4px;
	padding: 7px 12px !important;
}

.od-num { text-align: right; }
.od-center { text-align: center; }
.od-bold { font-weight: 700; }

.od-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}
.od-icon svg {
	width: 34px;
	height: 34px;
	display: block;
}

/* --- Details 3-col grid --- */
.od-details-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 16px;
}

.od-addr-body {
	font-size: 12px;
	line-height: 1.7;
	color: #1A2A33;
	margin-top: 4px;
}

.od-muted { color: #5A6B75; }

.od-invoice-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.od-method-block { padding: 4px 0; }
.od-method-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #5A6B75;
	margin-bottom: 3px;
}
.od-method-value {
	font-size: 13px;
	font-weight: 600;
	color: #1A2A33;
}
.od-method-note {
	font-size: 11px;
	color: #5A6B75;
	margin-top: 2px;
}
.od-method-divider {
	border: none;
	border-top: 1px solid #E8EEF2;
	margin: 12px 0;
}

.od-fanbox {
	display: inline-block;
	margin-top: 6px;
	padding: 6px 10px;
	border: 1px dashed #C8D3DA;
	border-radius: 6px;
	font-size: 11px;
	line-height: 1.6;
	background: #F7F9FB;
}

/* --- Totals --- */
.od-totals { margin-top: 6px; }

.od-total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 5px 0;
	font-size: 12px;
	color: #1A2A33;
	border-bottom: 1px solid #F0F4F7;
}

.od-total-row:last-child { border-bottom: none; }

.od-total-row--grand {
	font-size: 14px;
	font-weight: 700;
	color: #0E3C4B;
	padding-top: 8px;
	margin-top: 2px;
}

.od-total-row--points { color: #2FB86A; }

/* --- Danger button --- */
.acct-btn--danger,
.acct-btn--danger:link,
.acct-btn--danger:visited {
	background: #fff;
	color: #E45757;
	border-color: #E45757;
}

.acct-btn--danger:hover { background: #E45757; color: #fff; text-decoration: none; }

/* --- Status history --- */
.od-history { padding: 0; overflow: hidden; }
.od-history[open] { padding-bottom: 16px; }

.od-history-summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 20px;
	font-size: 13px;
	font-weight: 700;
	color: #0E3C4B;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.od-history-summary::-webkit-details-marker { display: none; }

.od-history-summary::after {
	content: '▾';
	font-size: 14px;
	margin-left: auto;
	transition: transform .2s;
	color: #5A6B75;
}

details.od-history[open] .od-history-summary::after { transform: rotate(180deg); }

.od-history .acct-preorder-table { margin: 0 16px; width: calc(100% - 32px); }

/* --- Order details responsive --- */
@media (max-width: 900px) {
	.od-details-grid {
		grid-template-columns: 1fr 1fr;
	}

	.od-totals-col {
		grid-column: span 2;
	}
}

@media (max-width: 767px) {
	.od-details-grid {
		grid-template-columns: 1fr;
	}

	.od-totals-col {
		grid-column: span 1;
	}

	.od-stepper {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.od-step {
		flex-direction: row;
		width: 100%;
		align-items: flex-start;
		gap: 12px;
	}

	.od-step-label {
		margin-top: 6px;
		text-align: left;
		font-size: 12px;
	}

	.od-step-line {
		width: 3px;
		height: 20px;
		flex: none;
		margin: 2px 0 2px 14px;
	}

	.od-products-table th:nth-child(3),
	.od-products-table td:nth-child(3) { display: none; }
}