/* ══════════════════════════════════════════════════════════════════════════
   ACCOUNT DELETION  (?module=account&action=delete)

   Three mutually exclusive panels, colour-coded so the state is obvious before
   any of the text is read:

     --warn     red    the destructive form
     --pending  amber  scheduled, still cancellable
     --blocked  grey   something must be resolved first

   The confirm button is deliberately the only red control on the page. Nothing
   else here borrows the site's usual blue "primary action" styling, because on
   this page the safe action is the one that leaves.
   ══════════════════════════════════════════════════════════════════════════ */

.account-delete {
	max-width: 720px;
	margin: 0 auto 28px;
	padding: 0 14px;
	box-sizing: border-box;
}

.account-delete-panel {
	border: 1px solid #d7e3ec;
	border-radius: 12px;
	background: #fff;
	padding: 20px 22px;
	box-shadow: 0 2px 10px rgba(31, 74, 108, 0.07);
}

.account-delete-panel--warn {
	border-color: #e6a8a8;
	background: linear-gradient(180deg, #fffafa 0%, #fff 40%);
}

.account-delete-panel--pending {
	border-color: #e6b769;
	background: linear-gradient(180deg, #fffaf0 0%, #fff 40%);
}

.account-delete-panel--blocked {
	border-color: #c8d6e2;
	background: linear-gradient(180deg, #f7fbfe 0%, #fff 40%);
}

.account-delete-panel-title {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.3;
	color: #1f4a6c;
}

.account-delete-panel--warn .account-delete-panel-title    { color: #a42626; }
.account-delete-panel--pending .account-delete-panel-title { color: #8a5a00; }

.account-delete-lead {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: #2b4256;
}

.account-delete-body {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.6;
	color: #40596e;
}

.account-delete-small {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #6b8092;
}

.account-delete-losses,
.account-delete-blockers,
.account-delete-charlist {
	margin: 0 0 14px;
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.65;
	color: #40596e;
}

.account-delete-blockers {
	color: #8a3a3a;
}

.account-delete-charserver {
	color: #7b8fa0;
	font-size: 12px;
}

.account-delete-grace {
	margin: 4px 0 18px;
	padding: 12px 14px;
	border-radius: 8px;
	background: #fff6e5;
	border: 1px solid #f0d3a0;
	color: #7a5300;
	font-size: 12.5px;
	line-height: 1.6;
}

.account-delete-countdown {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: #8a5a00;
	/* Tabular figures stop the whole line jittering as the seconds tick. */
	font-variant-numeric: tabular-nums;
}

.account-delete-countdown-label {
	display: inline-block;
	margin-left: 6px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #a07b3a;
}

.account-delete-form {
	margin-top: 4px;
}

.account-delete-field {
	margin-bottom: 12px;
}

.account-delete-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 700;
	color: #2b4256;
}

.account-delete-field input {
	box-sizing: border-box;
	width: 100%;
	max-width: 320px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid #c3d5e2;
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	color: #21384a;
}

.account-delete-field input:focus {
	outline: none;
	border-color: #2f8fd8;
	box-shadow: 0 0 0 3px rgba(47, 143, 216, 0.16);
}

.account-delete-btn {
	display: inline-block;
	padding: 11px 22px;
	border: 0;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}

.account-delete-btn:active {
	transform: translateY(1px);
}

.account-delete-btn--danger {
	background: #c3382f;
	color: #fff;
	box-shadow: 0 3px 0 #92251e;
}

.account-delete-btn--danger:hover {
	background: #d24439;
}

.account-delete-btn--keep {
	background: #2f8fd8;
	color: #fff;
	box-shadow: 0 3px 0 #1f6ba6;
}

.account-delete-btn--keep:hover {
	background: #3ba0eb;
}

@media (max-width: 600px) {
	.account-delete-panel {
		padding: 16px 14px;
	}

	.account-delete-field input {
		max-width: none;
	}

	.account-delete-btn {
		display: block;
		width: 100%;
		text-align: center;
	}

	.account-delete-countdown {
		font-size: 22px;
	}
}