/*
 * Hevy Weyt Drop Lock — front-end + admin styles
 * -----------------------------------------------------------------------
 * All colors, type, and spacing are exposed as CSS custom properties on
 * `.hwdl-root`, so the exact HEVY WEYT typography/logo/spacing/colors can be
 * dropped in later without touching the structural rules below.
 */

.hwdl-root {
	/* ---- theme tokens (override these to match the brand exactly) ---- */
	--hwdl-bg: #0a0a0a;
	--hwdl-fg: #ffffff;
	--hwdl-fg-muted: rgba(255, 255, 255, 0.6);
	--hwdl-divider: rgba(255, 255, 255, 0.18);
	--hwdl-accent: #ffffff;
	--hwdl-error: #e8363c;
	--hwdl-font-display: "Cardo", Georgia, serif;
	--hwdl-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--hwdl-letter-spacing: 0.14em;
	--hwdl-max-width: 640px;
	--hwdl-space: clamp(1.25rem, 3vw, 2.5rem);
	--hwdl-radius: 0px;

	/* ---- password field defaults (overridden inline per admin settings / block attributes) ---- */
	--hwdl-input-bg: transparent;
	--hwdl-input-text: var(--hwdl-fg);
	--hwdl-input-border-color: transparent;
	--hwdl-input-border-width: 0px;
	--hwdl-input-radius: 0px;
	--hwdl-input-font-size: 0.9rem;
	--hwdl-input-font-weight: 400;

	/* ---- countdown timer defaults ---- */
	--hwdl-timer-bg: transparent;
	--hwdl-timer-text: var(--hwdl-fg);
	--hwdl-timer-border-color: transparent;
	--hwdl-timer-border-width: 0px;
	--hwdl-timer-radius: 0px;
	--hwdl-timer-font-weight: 400;

	/* ---- button hover/focus/click: no fill/flash unless explicitly enabled ---- */
	--hwdl-btn-hover-bg: transparent;
	--hwdl-btn-hover-text: var(--hwdl-fg);

	display: block;
	background: var(--hwdl-bg);
	color: var(--hwdl-fg);
	font-family: var(--hwdl-font-body);
	-webkit-font-smoothing: antialiased;
}

.hwdl-root--inline {
	background: transparent;
	padding: 0;
}

.hwdl-landing {
	min-height: 100vh;
	width: 100%;
	max-width: var(--hwdl-max-width);
	margin: 0 auto;
	padding: calc(var(--hwdl-space) * 2) var(--hwdl-space);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--hwdl-space);
	box-sizing: border-box;
}

.hwdl-root--inline .hwdl-landing {
	min-height: 0;
	padding: var(--hwdl-space) 0;
}

/* ---- logo ---- */
.hwdl-logo {
	display: flex;
	justify-content: center;
}

.hwdl-logo__image {
	max-width: 160px;
	height: auto;
	display: block;
}

.hwdl-logo--text {
	font-family: var(--hwdl-font-display);
	font-size: 1.5rem;
	letter-spacing: var(--hwdl-letter-spacing);
}

/* ---- header copy ---- */
.hwdl-header {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.hwdl-headline {
	font-family: var(--hwdl-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 6vw, 3.25rem);
	letter-spacing: var(--hwdl-letter-spacing);
	margin: 0;
	line-height: 1.1;
}

.hwdl-drop-name {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.3em;
	color: var(--hwdl-fg-muted);
	text-transform: uppercase;
}

.hwdl-subheadline {
	margin: 0;
	font-size: 0.9rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hwdl-fg-muted);
}

.hwdl-drop-description {
	margin: 0.5rem 0 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--hwdl-fg-muted);
	max-width: 46ch;
}

/* ---- divider ---- */
.hwdl-divider {
	width: 100%;
	max-width: 220px;
	height: 1px;
	background: var(--hwdl-divider);
	border: 0;
}

/* ---- countdown ---- */
.hwdl-countdown {
	display: flex;
	gap: clamp(1rem, 4vw, 2.5rem);
	justify-content: center;
	flex-wrap: wrap;
}

.hwdl-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	min-width: 3.5rem;
	background: var(--hwdl-timer-bg);
	border: var(--hwdl-timer-border-width) solid var(--hwdl-timer-border-color);
	border-radius: var(--hwdl-timer-radius);
	padding: var(--hwdl-timer-border-width, 0px) 0.4em;
}

.hwdl-countdown__value {
	font-family: var(--hwdl-font-display);
	font-size: var(--hwdl-timer-font-size, clamp(1.75rem, 5vw, 2.75rem));
	font-weight: var(--hwdl-timer-font-weight);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--hwdl-timer-text);
}

.hwdl-countdown__label {
	font-size: 0.65rem;
	letter-spacing: 0.2em;
	color: var(--hwdl-timer-text);
	opacity: 0.7;
}

/* ---- sold out state ---- */
.hwdl-sold-out__headline {
	font-family: var(--hwdl-font-display);
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	letter-spacing: var(--hwdl-letter-spacing);
	margin: 0 0 0.75rem;
}

.hwdl-sold-out__message {
	margin: 0;
	color: var(--hwdl-fg-muted);
	max-width: 46ch;
}

/* ---- actions / buttons ---- */
.hwdl-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
}

.hwdl-btn {
	appearance: none;
	border: 1px solid var(--hwdl-fg);
	background: transparent;
	color: var(--hwdl-fg);
	font-family: var(--hwdl-font-body);
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 0.95rem 2.25rem;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	border-radius: var(--hwdl-radius);
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
	min-width: 240px;
}

.hwdl-btn:hover,
.hwdl-btn:focus-visible,
.hwdl-btn:active {
	/* Defaults to fully transparent (no flash to white/solid) — the
	   "Invert to a solid fill on hover/focus" admin toggle is the only
	   thing that changes --hwdl-btn-hover-bg away from transparent. */
	background: var(--hwdl-btn-hover-bg);
	color: var(--hwdl-btn-hover-text);
}

.hwdl-btn:focus-visible {
	outline: 2px solid var(--hwdl-accent);
	outline-offset: 3px;
}

.hwdl-btn--secondary {
	border-color: var(--hwdl-divider);
	color: var(--hwdl-fg-muted);
}

.hwdl-btn[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* ---- social links ---- */
.hwdl-social {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
}

.hwdl-social__link {
	color: var(--hwdl-fg-muted);
	text-decoration: none;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border-bottom: 1px solid transparent;
}

.hwdl-social__link:hover,
.hwdl-social__link:focus-visible {
	color: var(--hwdl-fg);
	border-bottom-color: var(--hwdl-fg);
}

/* ---- modal ---- */
.hwdl-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--hwdl-space);
	box-sizing: border-box;
}

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

.hwdl-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.82);
}

.hwdl-modal__panel {
	position: relative;
	background: var(--hwdl-input-bg, var(--hwdl-bg));
	/* Matches the password field's own border settings (0/transparent by
	   default), so "no border around the Enter Password section" and "no
	   border on the field itself" are the same admin-configurable setting. */
	border: var(--hwdl-input-border-width) solid var(--hwdl-input-border-color);
	border-radius: var(--hwdl-input-radius);
	max-width: 380px;
	width: 100%;
	padding: calc(var(--hwdl-space) * 1.25) var(--hwdl-space);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	text-align: center;
	animation: hwdl-modal-in 0.22s ease;
	box-sizing: border-box;
}

@keyframes hwdl-modal-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.hwdl-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: none;
	color: var(--hwdl-fg-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.5rem;
}

.hwdl-modal__close:hover,
.hwdl-modal__close:focus-visible {
	color: var(--hwdl-fg);
}

.hwdl-modal__title {
	font-family: var(--hwdl-font-display);
	letter-spacing: var(--hwdl-letter-spacing);
	font-size: 1.1rem;
	margin: 0;
}

.hwdl-modal__form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
}

.hwdl-modal__input {
	width: 100%;
	background: var(--hwdl-input-bg);
	border: var(--hwdl-input-border-width) solid var(--hwdl-input-border-color);
	color: var(--hwdl-input-text);
	text-align: center;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-size: var(--hwdl-input-font-size);
	font-weight: var(--hwdl-input-font-weight);
	padding: 0.9rem 1rem;
	box-sizing: border-box;
	border-radius: var(--hwdl-input-radius);
}

/* Never turn white / change background on click, focus, hover, or active —
   only the border color (if any is configured) responds, so the field
   always stays the same color as the page behind it. */
.hwdl-modal__input:hover,
.hwdl-modal__input:active,
.hwdl-modal__input:focus,
.hwdl-modal__input:focus-visible {
	background: var(--hwdl-input-bg);
	outline: none;
	border-color: var(--hwdl-input-border-color);
}

/* Prevent the input from flashing white on autofill (mirrors the fix
   already applied elsewhere on the Hevy Weyt site). */
.hwdl-modal__input:-webkit-autofill,
.hwdl-modal__input:-webkit-autofill:hover,
.hwdl-modal__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--hwdl-input-text);
	-webkit-box-shadow: 0 0 0px 1000px var(--hwdl-input-bg) inset;
	transition: background-color 9999s ease-in-out 0s;
}

.hwdl-modal__message {
	min-height: 1.1rem;
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--hwdl-error);
}

.hwdl-modal__message--success {
	color: var(--hwdl-fg);
}

.hwdl-modal__submit {
	min-width: 100%;
}

/* ---- status pill (used by the [hevy_weyt_drop_status] shortcode) ---- */
.hwdl-status-pill {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	font-size: 0.65rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border: 1px solid currentColor;
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.hwdl-modal__panel {
		animation: none;
	}
	.hwdl-btn,
	.hwdl-social__link {
		transition: none;
	}
}

/* -----------------------------------------------------------------------
 * Admin screen (WooCommerce → Hevy Weyt Drop Lock)
 * ---------------------------------------------------------------------*/
.hwdl-admin-wrap .hwdl-status-box {
	background: #1a1a1a;
	color: #fff;
	padding: 1.5rem;
	margin: 1rem 0;
	border-radius: 4px;
}

.hwdl-status-box__label {
	margin: 0 0 0.25rem;
	letter-spacing: 0.2em;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
}

.hwdl-status-box__current {
	margin: 0 0 1rem;
	font-size: 1rem;
}

.hwdl-quick-status-buttons {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.hwdl-security-actions {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}

.hwdl-security-actions__col {
	flex: 1 1 320px;
	background: #fff;
	border: 1px solid #dcdcde;
	padding: 1.25rem 1.5rem;
}

.hwdl-public-pages-list {
	max-height: 220px;
	overflow-y: auto;
	border: 1px solid #dcdcde;
	padding: 0.75rem 1rem;
	background: #fff;
	max-width: 420px;
}

.hwdl-public-page-item {
	display: block;
	padding: 0.15rem 0;
}

.hwdl-color-field-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.hwdl-transparent-toggle {
	font-size: 0.85em;
	white-space: nowrap;
}

/* -----------------------------------------------------------------------
 * Logs screen (WooCommerce → Hevy Weyt Drop Lock → Logs)
 * ---------------------------------------------------------------------*/
.hwdl-logs-table {
	background: #fff;
	border: 1px solid #dcdcde;
	border-collapse: collapse;
	width: 100%;
	max-width: 720px;
}

.hwdl-logs-table th,
.hwdl-logs-table td {
	padding: 0.6rem 1rem;
	border-bottom: 1px solid #dcdcde;
	text-align: left;
}

.hwdl-log-status {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 3px;
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
}

.hwdl-log-status--success {
	background: #e6f6e9;
	color: #1a7e34;
}

.hwdl-log-status--failure {
	background: #fbeaea;
	color: #a3221c;
}

.hwdl-log-status--locked_out {
	background: #fff3e0;
	color: #a35b00;
}

.hwdl-logs-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 720px;
	margin-bottom: 0.75rem;
}

/* -----------------------------------------------------------------------
 * Responsive: mobile / tablet / desktop passes for the landing page and
 * any individually-placed shortcode/block (countdown, password, etc.).
 * The base rules above already use clamp()/flex-wrap for fluid scaling;
 * these are the specific breakpoints where a hard rule reads better than
 * fluid sizing.
 * ---------------------------------------------------------------------*/

/* Small phones. */
@media (max-width: 420px) {
	.hwdl-countdown {
		gap: 0.6rem;
	}
	.hwdl-countdown__unit {
		min-width: 2.5rem;
	}
	.hwdl-btn {
		min-width: 0;
		width: 100%;
		max-width: 320px;
		padding: 0.85rem 1.25rem;
	}
	.hwdl-modal__panel {
		max-width: 100%;
		padding: 1.5rem 1.25rem;
	}
	.hwdl-social {
		gap: 1rem;
		row-gap: 0.5rem;
	}
}

/* Tablets / small laptops. */
@media (min-width: 421px) and (max-width: 900px) {
	.hwdl-landing {
		max-width: 520px;
	}
	.hwdl-btn {
		min-width: 220px;
	}
}

/* Large desktop screens: let the layout breathe a bit more instead of
   staying pinned to the same max-width as tablet. */
@media (min-width: 1400px) {
	.hwdl-root {
		--hwdl-max-width: 720px;
	}
}