/*
 * Behavioural/utility styling only - the entry page and dashboard banner get
 * their layout/spacing/countdown look from the theme's own account-page
 * classes (column, gap-*, countdown-container, countdown), not from here.
 */

.bgfg-offline-comp-hidden {
	display: none;
}

/*
 * The theme doesn't reset default browser <p> margins, so this text was
 * getting the container's own padding *plus* the paragraph's own margin
 * stacked on top of it.
 */
.offline-comp-status-message {
	margin: 0;
}

/*
 * The theme's shared .account-content-body rule gives every account page a
 * subtle tinted background and padding - combined with this page's own
 * bordered boxes (left/right columns, the pin-form card) that reads as a
 * redundant extra outer box, so it's neutralised here rather than in the
 * shared theme rule (which every other account page still relies on).
 */
.offline-comp-account-body {
	background-color: transparent !important;
	padding: 0 !important;
}

/*
 * Matches .draw-container .draw (the dashboard's draw cards) rather than the
 * generic .box class, which is also used for countdown digit squares
 * elsewhere and doesn't nest cleanly inside another .box.
 */
.offline-comp-form-card {
	background-color: #242b3b;
	border: 1px solid #ffffff33;
	border-radius: 8px;
	padding: 1rem;

	/*
	 * The pin-entry form and the lockout message swap via the shared
	 * .bgfg-offline-comp-hidden class - stacked in the same grid cell (rather
	 * than the theme's own .column/flex from the "column" class also on this
	 * element, hence !important) so whichever one is hidden still occupies
	 * its own space and the card doesn't shrink to fit just the shorter one.
	 */
	display: grid !important;
	grid-template-areas: "stack";
}

.offline-comp-form-card > .bgfg-offline-comp-pin-wrap,
.offline-comp-form-card > .bgfg-offline-comp-lockout {
	grid-area: stack;
}

/*
 * Overrides the shared .bgfg-offline-comp-hidden{display:none} just for
 * these two - display:none would drop the hidden one out of the grid cell's
 * size calculation entirely, undoing the point of stacking them above.
 */
.offline-comp-form-card > .bgfg-offline-comp-hidden {
	display: flex;
	visibility: hidden;
}

/*
 * The theme's shared .box-title rule sets its own margin-bottom, which stacks
 * on top of the parent's flex gap - overridden here just for this title so it
 * sits right against the intro copy below it.
 */
.offline-comp-fb-box .box-title {
	margin-bottom: 0 !important;
}

/*
 * .countdown-container/.offline-comp-countdown-label are shared with the
 * header bar and dashboard banner, where the label is right-aligned to sit
 * next to other content - here the countdown has its own grid column, so
 * it's pinned bottom-left to match the form box beside it instead.
 */
.offline-comp-account-body .countdown-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	height: 100%;
}

.offline-comp-account-body .offline-comp-countdown-label {
	justify-content: flex-start;
}

.bgfg-offline-comp-pin-digits {
	display: flex;
	gap: 12px;
}

/*
 * Self-contained and !important on the box-model properties - the theme's
 * global input[type="text"] rule matches with equal specificity, so without
 * this the two rules race based on stylesheet load order rather than reliably
 * producing a square, visible box.
 */
.bgfg-offline-comp-pin-digit {
	box-sizing: border-box !important;
	width: 3rem !important;
	height: 3rem !important;
	padding: 0 !important;
	margin: 0;
	font-size: 1.5rem;
	text-align: center;
	color: #fff !important;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 0;
}

.bgfg-offline-comp-message {
	color: #a00;
}

.bgfg-offline-comp-message:empty {
	display: none;
}

.bgfg-offline-comp-lockout-countdown {
	font-weight: 600;
}