/**
 * Coviant Gate — default styling.
 *
 * Themeable via CSS variables — override in your child theme.
 */

[data-coviant-gate] {
	--cg-brand:       #0073aa;
	--cg-brand-hover: #005f8f;
	--cg-card-bg:     #f7f9fc;
	--cg-card-border: #dfe7ef;
	--cg-text:        #222;
	--cg-muted:       #666;
	--cg-kicker:      #0073aa;
	--cg-radius:      14px;
	--cg-radius-btn:  7px;
	--cg-shadow:      0 8px 22px rgba(0, 0, 0, .05);
	--cg-shadow-btn:  0 3px 10px rgba(0, 0, 0, .10);
	--cg-font:        inherit;

	display: block;
	max-width: 100%;
	font-family: var(--cg-font);
}

[data-coviant-gate] .coviant-gate__card {
	max-width: 640px;
	padding: 28px 30px;
	background: var(--cg-card-bg);
	border: 1px solid var(--cg-card-border);
	border-radius: var(--cg-radius);
	box-shadow: var(--cg-shadow);
	box-sizing: border-box;
}

[data-coviant-gate] .coviant-gate__kicker {
	margin: 0 0 10px;
	padding: 0;
	color: var(--cg-kicker);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.2;
}

[data-coviant-gate] .coviant-gate__heading {
	margin: 0 0 12px;
	padding: 0;
	color: var(--cg-text);
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
}

[data-coviant-gate] .coviant-gate__intro {
	margin: 0 0 20px;
	padding: 0;
	color: var(--cg-muted);
	font-size: 16px;
	line-height: 1.5;
}

[data-coviant-gate] .coviant-gate__intro p:last-child {
	margin-bottom: 0;
}

[data-coviant-gate] .coviant-gate__form {
	margin: 0;
}

[data-coviant-gate] .coviant-gate__cta {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	background: var(--cg-brand) !important;
	color: #fff !important;
	padding: 12px 18px !important;
	border-radius: var(--cg-radius-btn) !important;
	font-size: 15px !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	border: none !important;
	box-shadow: var(--cg-shadow-btn);
	transition: background .2s ease;
}

[data-coviant-gate] .coviant-gate__cta:hover,
[data-coviant-gate] .coviant-gate__cta:focus {
	background: var(--cg-brand-hover) !important;
	color: #fff !important;
}

[data-coviant-gate] .coviant-gate__cta .coviant-gate__icon {
	flex-shrink: 0;
	transition: transform .15s ease;
}

[data-coviant-gate] .coviant-gate__cta:hover .coviant-gate__icon {
	transform: translateY(1px);
}

[data-coviant-gate] .coviant-gate__cta::before,
[data-coviant-gate] .coviant-gate__cta::after {
	content: none !important;
	display: none !important;
}

/* v1.5: multi-button row.
   Single-button gates render identically to v1.4 because flex-flow with
   one child collapses to inline-flex behaviour. Multi-button gates lay
   out side-by-side with a gap, wrapping to stacked at narrow widths. */
[data-coviant-gate] .coviant-gate__cta-row {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

[data-coviant-gate] .coviant-gate__cta-row--single {
	/* Single button — no row affordance needed, just inherits .coviant-gate__cta layout. */
}

[data-coviant-gate] .coviant-gate__cta-row--multi .coviant-gate__cta {
	/* In multi mode, let buttons size to their content but allow them to
	   shrink and wrap on narrow viewports. flex-basis: auto keeps them
	   their natural width when there's space. */
	flex: 0 1 auto;
}

/* Disabled-state CTA — rendered as <span> with .coviant-gate__cta--locked
   when a multi-asset gate is rendered with one or more assets not yet
   unlocked (rare in normal flow, but possible if epochs diverge or one
   asset is already claimed). */
[data-coviant-gate] .coviant-gate__cta--locked {
	background: #b8c2cc !important;
	cursor: not-allowed;
	opacity: .8;
	pointer-events: none;
}

[data-coviant-gate] .coviant-gate__cta--locked:hover {
	background: #b8c2cc !important;
}

[data-coviant-gate].coviant-gate--error {
	padding: 16px;
	background: #fff4f4;
	border: 1px solid #f1c1c1;
	border-radius: 8px;
	color: #8a1f1f;
	font-size: 14px;
}

/* Admin-only warning notice — rendered above the gate when a deprecation
   or security warning applies (e.g. legacy unlock_button_url mode). Only
   admins see this; non-admins see the gate as normal. */
[data-coviant-gate].coviant-gate--warning {
	padding: 14px 18px;
	margin-bottom: 12px;
	background: #fff9eb;
	border: 1px solid #f0d27a;
	border-left: 4px solid #d4a02a;
	border-radius: 6px;
	color: #5a4400;
	font-size: 14px;
}

[data-coviant-gate].coviant-gate--warning strong {
	color: #3a2c00;
}

[data-coviant-gate].coviant-gate--warning ul {
	margin: 8px 0 4px 18px;
	padding: 0;
}

/* Verifying state — shown while the AJAX unlock verification is in flight.
   The gate has just had its form submitted, but we don't reveal the unlocked
   state until the server confirms the unlock. This brief pause lets the user
   know the request is being processed rather than appearing frozen. */
[data-coviant-gate].is-verifying {
	position: relative;
}

[data-coviant-gate].is-verifying::after {
	content: 'Verifying…';
	position: absolute;
	top: 10px;
	right: 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--cg-muted);
	background: rgba(255, 255, 255, .9);
	padding: 4px 10px;
	border-radius: 4px;
	pointer-events: none;
}

@media (max-width: 600px) {
	[data-coviant-gate] .coviant-gate__card {
		padding: 22px 20px;
	}
	[data-coviant-gate] .coviant-gate__heading {
		font-size: 24px;
	}
	[data-coviant-gate] .coviant-gate__cta {
		width: 100%;
		justify-content: center;
	}
}

/* =====================================================================
   Preview (v1.6)
   ===================================================================== */

/* Preview trigger(s) sit between the intro and the form in the locked
   card. Styled as a secondary affordance (outlined, brand-tinted) so they
   read as distinct from the primary form submit and the unlocked download
   CTA. */
[data-coviant-gate] .coviant-gate__preview-row {
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
	margin: 0 0 20px;
}

[data-coviant-gate] .coviant-gate__preview-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	background: transparent;
	color: var(--cg-brand);
	border: 1.5px solid var(--cg-card-border);
	border-radius: var(--cg-radius-btn);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}

[data-coviant-gate] .coviant-gate__preview-trigger:hover,
[data-coviant-gate] .coviant-gate__preview-trigger:focus {
	border-color: var(--cg-brand);
	background: var(--cg-brand);
	color: #fff;
	outline: none;
}

[data-coviant-gate] .coviant-gate__preview-icon {
	flex-shrink: 0;
}

/* Lock body scroll while the lightbox is open. */
html.cg-lightbox-open {
	overflow: hidden;
}

/* The lightbox is a body-level singleton, so it is NOT scoped under
   [data-coviant-gate]. Keep its variables self-contained. */
.coviant-gate-lightbox {
	--cg-lb-z:        999999;
	--cg-lb-backdrop: rgba(12, 18, 26, .82);
	--cg-lb-bar:      #11161c;
	--cg-lb-text:     #f3f6fa;
	--cg-lb-muted:    #9fb0c0;

	position: fixed;
	inset: 0;
	z-index: var(--cg-lb-z);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
}

.coviant-gate-lightbox[hidden] {
	display: none;
}

.coviant-gate-lightbox .cg-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: var(--cg-lb-backdrop);
}

.coviant-gate-lightbox .cg-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(94vw, 1100px);
	max-height: 92vh;
	background: var(--cg-lb-bar);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.coviant-gate-lightbox .cg-lightbox__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px 12px 18px;
	color: var(--cg-lb-text);
}

.coviant-gate-lightbox .cg-lightbox__title {
	font-size: 14px;
	font-weight: 600;
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.coviant-gate-lightbox .cg-lightbox__counter {
	font-size: 13px;
	color: var(--cg-lb-muted);
	flex: 0 0 auto;
}

.coviant-gate-lightbox .cg-lightbox__close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--cg-lb-text);
	border: none;
	border-radius: 6px;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}

.coviant-gate-lightbox .cg-lightbox__close:hover,
.coviant-gate-lightbox .cg-lightbox__close:focus {
	background: rgba(255, 255, 255, .12);
	outline: none;
}

.coviant-gate-lightbox .cg-lightbox__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #05080b;
	min-height: 0;
	flex: 1 1 auto;
}

.coviant-gate-lightbox .cg-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(92vh - 110px);
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
}

.coviant-gate-lightbox .cg-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .4);
	color: #fff;
	border: none;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}

.coviant-gate-lightbox .cg-lightbox__nav:hover,
.coviant-gate-lightbox .cg-lightbox__nav:focus {
	background: rgba(0, 0, 0, .65);
	outline: none;
}

.coviant-gate-lightbox .cg-lightbox__nav--prev { left: 0; border-radius: 0 8px 8px 0; }
.coviant-gate-lightbox .cg-lightbox__nav--next { right: 0; border-radius: 8px 0 0 8px; }

.coviant-gate-lightbox .cg-lightbox__caption {
	padding: 10px 18px;
	color: var(--cg-lb-muted);
	font-size: 13px;
	line-height: 1.4;
	min-height: 0;
}

.coviant-gate-lightbox .cg-lightbox__caption:empty {
	display: none;
}

@media (max-width: 600px) {
	.coviant-gate-lightbox .cg-lightbox__dialog {
		width: 100vw;
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
	}
	.coviant-gate-lightbox .cg-lightbox__img {
		max-height: calc(100vh - 110px);
	}
	[data-coviant-gate] .coviant-gate__preview-trigger {
		width: 100%;
		justify-content: center;
	}
}