/* ── Airdrop Plugin Styles ─────────────────────────────────────────────
   All theme colors are CSS custom properties so admins can override
   them per-campaign via the admin color picker section.
   Defaults are set on .airdrop-wrap; shortcode emits overrides as
   inline <style>#airdrop-{id} { --airdrop-*: value }
   ─────────────────────────────────────────────────────────────────── */

.airdrop-wrap {
	/* Configurable per campaign */
	--airdrop-grad-start:  #7c3aed;
	--airdrop-grad-end:    #ec4899;
	--airdrop-card-bg:     rgba(255,255,255,0.08);
	--airdrop-card-border: rgba(255,255,255,0.15);
	--airdrop-text-color:  inherit;
	--airdrop-btn-text:    #ffffff;
	--airdrop-radius:      16px;
	--airdrop-blur:        12px;

	/* Derived — do not override directly */
	--airdrop-grad: linear-gradient(135deg, var(--airdrop-grad-start), var(--airdrop-grad-end));

	max-width: 560px;
	margin: 2em auto;
	font-family: 'Space Grotesk', Inter, system-ui, sans-serif;
	color: var(--airdrop-text-color);
}

/* ── Card ── */
.airdrop-card {
	background: var(--airdrop-card-bg);
	border: 1px solid var(--airdrop-card-border);
	border-radius: var(--airdrop-radius);
	padding: 2rem;
	backdrop-filter: blur(var(--airdrop-blur));
	-webkit-backdrop-filter: blur(var(--airdrop-blur));
	box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

/* Fallback for light-bg themes that haven't set card-bg */
@media (prefers-color-scheme: light) {
	.airdrop-wrap:not([style*='--airdrop-card-bg']) .airdrop-card {
		background: #fff;
		border-color: #e2e8f0;
		box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	}
}

/* ── Header ── */
.airdrop-header {
	margin-bottom: 1.5rem;
}

.airdrop-title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	font-weight: 700;
	background: var(--airdrop-grad);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.airdrop-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.airdrop-prize {
	font-size: 0.875rem;
	opacity: 0.75;
}

/* ── Badges ── */
.airdrop-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.airdrop-badge--pending      { background: color-mix(in srgb, var(--airdrop-grad-start) 15%, transparent); color: var(--airdrop-grad-start); }
.airdrop-badge--countdown    { background: color-mix(in srgb, var(--airdrop-grad-end) 15%, transparent); color: var(--airdrop-grad-end); }
.airdrop-badge--distributing { background: rgba(245,158,11,0.15); color: #d97706; }
.airdrop-badge--complete     { background: rgba(16,185,129,0.15); color: #059669; }
.airdrop-badge--qualified    { background: rgba(16,185,129,0.15); color: #059669; }
.airdrop-badge--disqualified { background: rgba(239,68,68,0.12);  color: #dc2626; }
.airdrop-badge--winner       { background: color-mix(in srgb, var(--airdrop-grad-end) 15%, transparent); color: var(--airdrop-grad-end); }
.airdrop-badge--sent         { background: rgba(16,185,129,0.15); color: #059669; }
.airdrop-badge--failed       { background: rgba(239,68,68,0.12);  color: #dc2626; }

/* ── Progress ── */
.airdrop-progress-wrap {
	margin-bottom: 1.5rem;
}

.airdrop-progress-label {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 500;
}

.airdrop-spots {
	margin-left: 0.4rem;
	font-weight: 400;
	font-size: 0.9em;
	opacity: 0.6;
}

.airdrop-progress-bar {
	height: 8px;
	background: color-mix(in srgb, var(--airdrop-grad-start) 15%, transparent);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 0.4rem;
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.airdrop-progress-bar { background: rgba(124,58,237,0.15); }
}

.airdrop-progress-fill {
	height: 100%;
	background: var(--airdrop-grad);
	border-radius: 999px;
	transition: width 0.4s ease;
}

.airdrop-progress-hint {
	font-size: 0.8rem;
	opacity: 0.6;
	margin: 0;
}

/* ── Countdown ── */
.airdrop-countdown-wrap {
	margin-bottom: 1.5rem;
	text-align: center;
}

.airdrop-countdown-label {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	opacity: 0.7;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.airdrop-countdown {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.25rem;
}

.airdrop-cd-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 4rem;
}

.airdrop-cd-num {
	display: block;
	font-size: 2.5rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	background: var(--airdrop-grad);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
}

.airdrop-cd-label {
	font-size: 0.65rem;
	opacity: 0.5;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 4px;
}

.airdrop-cd-sep {
	font-size: 2rem;
	font-weight: 800;
	opacity: 0.3;
	align-self: flex-start;
	margin-top: 4px;
}

/* ── Form ── */
.airdrop-form-wrap {
	margin-top: 1rem;
}

.airdrop-input-row {
	display: flex;
	gap: 0.5rem;
}

.airdrop-wallet-input {
	flex: 1;
	padding: 0.6rem 1rem;
	border: 1.5px solid var(--airdrop-card-border);
	border-radius: 8px;
	background: rgba(255,255,255,0.06);
	color: var(--airdrop-text-color);
	font-size: 0.875rem;
	font-family: 'Space Mono', monospace;
	transition: border-color 0.2s;
	min-width: 0;
}

.airdrop-wallet-input:focus {
	outline: none;
	border-color: var(--airdrop-grad-start);
}

.airdrop-submit-btn {
	padding: 0.6rem 1.4rem;
	background: var(--airdrop-grad);
	color: var(--airdrop-btn-text);
	border: none;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.2s, transform 0.1s;
}

.airdrop-submit-btn:hover  { opacity: 0.9; }
.airdrop-submit-btn:active { transform: scale(0.97); }
.airdrop-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.airdrop-hint {
	margin: 0.4rem 0 0;
	font-size: 0.75rem;
	opacity: 0.5;
}

/* ── Messages ── */
.airdrop-msg {
	padding: 0.6rem 1rem;
	border-radius: 8px;
	margin-bottom: 0.75rem;
	font-size: 0.875rem;
}

.airdrop-msg--success {
	background: rgba(16,185,129,0.12);
	color: #059669;
	border: 1px solid rgba(16,185,129,0.3);
}

.airdrop-msg--error {
	background: rgba(239,68,68,0.08);
	color: #dc2626;
	border: 1px solid rgba(239,68,68,0.25);
}

/* ── Complete ── */
.airdrop-complete {
	text-align: center;
	padding: 1rem 0;
}

.airdrop-complete-icon {
	font-size: 3rem;
	margin-bottom: 0.5rem;
}

.airdrop-complete h3 {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 1rem;
}

.airdrop-winners-label {
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.airdrop-winners-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.airdrop-winner-item {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

.airdrop-wallet {
	font-size: 0.8rem;
	opacity: 0.8;
}

/* ── Distributing ── */
.airdrop-distributing {
	text-align: center;
	padding: 1.5rem 0;
}

.airdrop-spinner {
	width: 36px;
	height: 36px;
	border: 3px solid color-mix(in srgb, var(--airdrop-grad-start) 20%, transparent);
	border-top-color: var(--airdrop-grad-start);
	border-radius: 50%;
	animation: airdrop-spin 0.8s linear infinite;
	margin: 0 auto 1rem;
}

@supports not (border-color: color-mix(in srgb, red 50%, blue)) {
	.airdrop-spinner {
		border-color: rgba(124,58,237,0.2);
		border-top-color: #7c3aed;
	}
}

@keyframes airdrop-spin {
	to { transform: rotate(360deg); }
}

/* ── Admin Trigger Button ── */
.airdrop-trigger-btn  { margin-top: 0.5rem; }
.airdrop-trigger-msg  { margin-left: 1rem; font-style: italic; }


/* ── Admin Color Picker Widget ─────────────────────────────────────── */

.airdrop-cpicker {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

.airdrop-cp-swatch {
	width: 38px;
	height: 38px;
	border-radius: 6px;
	border: 2px solid #ddd;
	flex-shrink: 0;
	position: relative;
	/* Checkerboard for transparency preview */
	background-image:
		linear-gradient(45deg, #ccc 25%, transparent 25%),
		linear-gradient(-45deg, #ccc 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #ccc 75%),
		linear-gradient(-45deg, transparent 75%, #ccc 75%);
	background-size: 10px 10px;
	background-position: 0 0, 0 5px, 5px -5px, -5px 0;
	overflow: hidden;
}

.airdrop-cp-swatch-inner {
	position: absolute;
	inset: 0;
	border-radius: 4px;
}

.airdrop-cp-alpha-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 180px;
}

.airdrop-cp-alpha-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #666;
}

.airdrop-cp-alpha-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.airdrop-cp-alpha {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	height: 14px;
	border-radius: 7px;
	outline: none;
	cursor: pointer;
	border: 1px solid #ccc;
	/* Background set dynamically by JS based on current color */
	background: linear-gradient(to right, rgba(124,58,237,0), rgba(124,58,237,1));
}

.airdrop-cp-alpha::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #999;
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
	cursor: pointer;
}

.airdrop-cp-alpha::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #999;
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
	cursor: pointer;
}

.airdrop-cp-alpha-val {
	font-size: 12px;
	color: #555;
	min-width: 32px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Style section divider in form-table */
.airdrop-style-section-header th {
	padding-top: 2rem;
	font-size: 1rem;
	color: #1d2327;
}