/* ==========================================================================
   Capripio Paywall Unlock — Public Styles
   4 themes: dark (default) | light | minimal | glass
   Each sets CSS custom properties; all layout is shared.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ------------------------------------------------------------------
   CSS custom properties — default (dark theme)
   ------------------------------------------------------------------ */
.cppu-lock-wrap {
	--cppu-card-bg:        linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
	--cppu-card-border:    rgba(255,255,255,0.08);
	--cppu-card-shadow:    0 0 0 1px rgba(255,255,255,0.08), 0 4px 6px -1px rgba(0,0,0,.3), 0 20px 40px -8px rgba(0,0,0,.4);
	--cppu-shimmer-color:  rgba(255,255,255,0.015);
	--cppu-glow-color:     rgba(99,179,237,0.18);
	--cppu-icon-bg:        rgba(255,255,255,0.10);
	--cppu-icon-border:    rgba(255,255,255,0.15);
	--cppu-icon-color:     #93c5fd;
	--cppu-headline-color: #f1f5f9;
	--cppu-sub-color:      #94a3b8;
	--cppu-pill-bg:        rgba(255,255,255,0.07);
	--cppu-pill-border:    rgba(255,255,255,0.10);
	--cppu-pill-label:     #94a3b8;
	--cppu-pill-price:     #e2e8f0;
	--cppu-btn-bg:         linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
	--cppu-btn-shadow:     0 1px 0 rgba(255,255,255,.15) inset, 0 4px 14px rgba(37,99,235,.5);
	--cppu-btn-hover-bg:   linear-gradient(135deg,#60a5fa 0%,#3b82f6 100%);
	--cppu-btn-hover-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 20px rgba(37,99,235,.6);
	--cppu-btn-color:      #fff;
	--cppu-guarantee-color:#64748b;
	--cppu-divider:        rgba(255,255,255,0.08);
	--cppu-summary-color:  #64748b;
	--cppu-field-bg:       rgba(255,255,255,0.06);
	--cppu-field-border:   rgba(255,255,255,0.12);
	--cppu-field-color:    #e2e8f0;
	--cppu-field-placeholder: #475569;
	--cppu-field-focus-border: rgba(99,179,237,0.5);
	--cppu-verify-btn-bg:  rgba(255,255,255,0.10);
	--cppu-verify-btn-border: rgba(255,255,255,0.15);
	--cppu-verify-btn-color: #cbd5e1;
	--cppu-verify-btn-hover-bg: rgba(255,255,255,0.16);
	--cppu-preview-text-color: #374151;
	--cppu-preview-fade-color: rgba(255,255,255,0.96);
}

/* ------------------------------------------------------------------
   Light theme
   ------------------------------------------------------------------ */
.cppu-lock-wrap.cppu-theme-light {
	--cppu-card-bg:        #ffffff;
	--cppu-card-border:    #e2e8f0;
	--cppu-card-shadow:    0 0 0 1px #e2e8f0, 0 4px 6px -1px rgba(0,0,0,.06), 0 20px 40px -8px rgba(0,0,0,.1);
	--cppu-shimmer-color:  rgba(0,0,0,0.01);
	--cppu-glow-color:     rgba(59,130,246,0.08);
	--cppu-icon-bg:        #eff6ff;
	--cppu-icon-border:    #bfdbfe;
	--cppu-icon-color:     #2563eb;
	--cppu-headline-color: #0f172a;
	--cppu-sub-color:      #64748b;
	--cppu-pill-bg:        #f1f5f9;
	--cppu-pill-border:    #e2e8f0;
	--cppu-pill-label:     #64748b;
	--cppu-pill-price:     #0f172a;
	--cppu-btn-bg:         linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
	--cppu-btn-shadow:     0 1px 0 rgba(255,255,255,.3) inset, 0 4px 14px rgba(37,99,235,.35);
	--cppu-btn-hover-bg:   linear-gradient(135deg,#60a5fa 0%,#3b82f6 100%);
	--cppu-btn-hover-shadow: 0 4px 20px rgba(37,99,235,.45);
	--cppu-btn-color:      #fff;
	--cppu-guarantee-color:#94a3b8;
	--cppu-divider:        #e2e8f0;
	--cppu-summary-color:  #94a3b8;
	--cppu-field-bg:       #f8fafc;
	--cppu-field-border:   #e2e8f0;
	--cppu-field-color:    #0f172a;
	--cppu-field-placeholder: #94a3b8;
	--cppu-field-focus-border: #3b82f6;
	--cppu-verify-btn-bg:  #f1f5f9;
	--cppu-verify-btn-border: #e2e8f0;
	--cppu-verify-btn-color: #475569;
	--cppu-verify-btn-hover-bg: #e2e8f0;
	--cppu-preview-text-color: #374151;
	--cppu-preview-fade-color: rgba(255,255,255,0.98);
}

/* ------------------------------------------------------------------
   Minimal theme
   ------------------------------------------------------------------ */
.cppu-lock-wrap.cppu-theme-minimal {
	--cppu-card-bg:        #fafafa;
	--cppu-card-border:    #d1d5db;
	--cppu-card-shadow:    0 0 0 1px #e5e7eb;
	--cppu-shimmer-color:  transparent;
	--cppu-glow-color:     transparent;
	--cppu-icon-bg:        #f3f4f6;
	--cppu-icon-border:    #e5e7eb;
	--cppu-icon-color:     #374151;
	--cppu-headline-color: #111827;
	--cppu-sub-color:      #6b7280;
	--cppu-pill-bg:        #f3f4f6;
	--cppu-pill-border:    #e5e7eb;
	--cppu-pill-label:     #6b7280;
	--cppu-pill-price:     #111827;
	--cppu-btn-bg:         #111827;
	--cppu-btn-shadow:     none;
	--cppu-btn-hover-bg:   #374151;
	--cppu-btn-hover-shadow: none;
	--cppu-btn-color:      #fff;
	--cppu-guarantee-color:#9ca3af;
	--cppu-divider:        #e5e7eb;
	--cppu-summary-color:  #9ca3af;
	--cppu-field-bg:       #fff;
	--cppu-field-border:   #d1d5db;
	--cppu-field-color:    #111827;
	--cppu-field-placeholder: #9ca3af;
	--cppu-field-focus-border: #374151;
	--cppu-verify-btn-bg:  #f3f4f6;
	--cppu-verify-btn-border: #e5e7eb;
	--cppu-verify-btn-color: #374151;
	--cppu-verify-btn-hover-bg: #e5e7eb;
	--cppu-preview-text-color: #374151;
	--cppu-preview-fade-color: rgba(250,250,250,0.98);
}

/* ------------------------------------------------------------------
   Glass theme
   ------------------------------------------------------------------ */
.cppu-lock-wrap.cppu-theme-glass {
	--cppu-card-bg:        rgba(255,255,255,0.12);
	--cppu-card-border:    rgba(255,255,255,0.25);
	--cppu-card-shadow:    0 8px 32px rgba(0,0,0,0.2);
	--cppu-shimmer-color:  rgba(255,255,255,0.03);
	--cppu-glow-color:     rgba(255,255,255,0.1);
	--cppu-icon-bg:        rgba(255,255,255,0.15);
	--cppu-icon-border:    rgba(255,255,255,0.30);
	--cppu-icon-color:     #fff;
	--cppu-headline-color: #fff;
	--cppu-sub-color:      rgba(255,255,255,0.7);
	--cppu-pill-bg:        rgba(255,255,255,0.12);
	--cppu-pill-border:    rgba(255,255,255,0.20);
	--cppu-pill-label:     rgba(255,255,255,0.65);
	--cppu-pill-price:     #fff;
	--cppu-btn-bg:         rgba(255,255,255,0.22);
	--cppu-btn-shadow:     0 1px 0 rgba(255,255,255,.3) inset, 0 4px 14px rgba(0,0,0,.2);
	--cppu-btn-hover-bg:   rgba(255,255,255,0.32);
	--cppu-btn-hover-shadow: 0 4px 20px rgba(0,0,0,.25);
	--cppu-btn-color:      #fff;
	--cppu-guarantee-color:rgba(255,255,255,0.5);
	--cppu-divider:        rgba(255,255,255,0.15);
	--cppu-summary-color:  rgba(255,255,255,0.5);
	--cppu-field-bg:       rgba(255,255,255,0.10);
	--cppu-field-border:   rgba(255,255,255,0.20);
	--cppu-field-color:    #fff;
	--cppu-field-placeholder: rgba(255,255,255,0.4);
	--cppu-field-focus-border: rgba(255,255,255,0.6);
	--cppu-verify-btn-bg:  rgba(255,255,255,0.12);
	--cppu-verify-btn-border: rgba(255,255,255,0.20);
	--cppu-verify-btn-color: rgba(255,255,255,0.85);
	--cppu-verify-btn-hover-bg: rgba(255,255,255,0.20);
	--cppu-preview-text-color: #374151;
	--cppu-preview-fade-color: rgba(255,255,255,0.96);
}

/* Glass theme needs a colourful backdrop behind the card */
.cppu-lock-wrap.cppu-theme-glass .cppu-lock-card {
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

/* ------------------------------------------------------------------
   Custom accent colour (applied via inline CSS variable from settings)
   --cppu-accent is set on .cppu-lock-wrap via inline style when user
   picks a custom button colour.
   ------------------------------------------------------------------ */
.cppu-lock-wrap[style*="--cppu-accent"] .cppu-btn-unlock {
	background: var(--cppu-accent) !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--cppu-accent) 50%, transparent) !important;
}

/* ------------------------------------------------------------------
   Preview zone
   ------------------------------------------------------------------ */
.cppu-lock-wrap {
	position: relative;
	margin: 2em 0;
	font-family: 'DM Sans', system-ui, sans-serif;
}

.cppu-preview-zone {
	position: relative;
	margin-bottom: -2px;
	pointer-events: none;
	user-select: none;
}

.cppu-preview-text {
	margin: 0;
	padding: 0 0 1.2em;
	font-size: 1em;
	line-height: 1.75;
	color: var(--cppu-preview-text-color);
}

.cppu-style-blur .cppu-preview-text {
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
}

.cppu-style-fade .cppu-preview-text {
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
}

.cppu-preview-fade {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 60px;
	background: linear-gradient(to bottom, transparent 0%, var(--cppu-preview-fade-color) 100%);
}

/* ------------------------------------------------------------------
   Lock card — shared layout, colours via CSS vars
   ------------------------------------------------------------------ */
.cppu-lock-card {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: var(--cppu-card-bg);
	border: 1px solid var(--cppu-card-border);
	box-shadow: var(--cppu-card-shadow);
}

/* Shimmer lines */
.cppu-lock-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 40px,
		var(--cppu-shimmer-color) 40px,
		var(--cppu-shimmer-color) 80px
	);
	pointer-events: none;
}

/* Glow blob */
.cppu-lock-card::after {
	content: '';
	position: absolute;
	top: -60px; left: 50%;
	transform: translateX(-50%);
	width: 280px; height: 180px;
	background: radial-gradient(ellipse, var(--cppu-glow-color) 0%, transparent 70%);
	pointer-events: none;
}

.cppu-lock-card-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2.5em 2em 2em;
}

/* Icon */
.cppu-lock-icon-wrap {
	width: 56px; height: 56px;
	background: var(--cppu-icon-bg);
	border: 1px solid var(--cppu-icon-border);
	border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 1em;
}

.cppu-lock-svg { width: 28px; height: 28px; color: var(--cppu-icon-color); }

/* Text */
.cppu-lock-headline {
	margin: 0 0 0.25em;
	font-size: 1.2em; font-weight: 700;
	color: var(--cppu-headline-color);
	letter-spacing: -0.01em; line-height: 1.2;
}

.cppu-lock-product-name {
	margin: 0 0 1em;
	font-size: 0.9em;
	color: var(--cppu-sub-color);
	font-style: italic;
}

/* Price pill */
.cppu-lock-price-wrap {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 1.4em;
	background: var(--cppu-pill-bg);
	border: 1px solid var(--cppu-pill-border);
	border-radius: 100px;
	padding: 6px 16px;
}

.cppu-lock-price-label {
	font-size: 0.78em;
	color: var(--cppu-pill-label);
	text-transform: uppercase; letter-spacing: 0.05em;
}

.cppu-lock-price { font-size: 1.05em; font-weight: 700; color: var(--cppu-pill-price); }
.cppu-lock-price del { color: var(--cppu-sub-color); font-weight: 400; }
.cppu-lock-price ins { text-decoration: none; }

/* CTA button */
.cppu-btn-unlock {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--cppu-btn-bg);
	color: var(--cppu-btn-color) !important;
	text-decoration: none !important;
	padding: 0.75em 1.8em;
	border-radius: 8px;
	font-weight: 600; font-size: 1em; letter-spacing: 0.01em;
	box-shadow: var(--cppu-btn-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	margin-bottom: 0.9em;
	border: none; cursor: pointer;
}

.cppu-btn-unlock:hover, .cppu-btn-unlock:focus {
	background: var(--cppu-btn-hover-bg);
	box-shadow: var(--cppu-btn-hover-shadow);
	color: var(--cppu-btn-color) !important;
	transform: translateY(-1px);
	outline: none;
}

.cppu-btn-unlock:active { transform: translateY(0); }
.cppu-btn-unlock svg { flex-shrink: 0; }

/* Guarantee line */
.cppu-lock-guarantee {
	margin: 0 0 1.4em;
	font-size: 0.78em;
	color: var(--cppu-guarantee-color);
}

/* Already purchased */
.cppu-already-bought {
	width: 100%; max-width: 380px;
	border-top: 1px solid var(--cppu-divider);
	padding-top: 1em;
}

.cppu-already-bought summary {
	list-style: none; cursor: pointer;
	font-size: 0.83em;
	color: var(--cppu-summary-color);
	text-align: center; transition: color 0.15s;
	user-select: none;
}

.cppu-already-bought summary::-webkit-details-marker { display: none; }
.cppu-already-bought summary::before { content: '+ '; font-weight: 700; }
.cppu-already-bought[open] summary::before { content: '− '; }

.cppu-verify-body { margin-top: 1em; }
.cppu-order-verify-form { display: flex; flex-direction: column; gap: 0; }

.cppu-verify-fields {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 8px; margin-bottom: 8px;
}

.cppu-verify-field label {
	display: block;
	font-size: 0.75em; font-weight: 600;
	color: var(--cppu-summary-color);
	text-transform: uppercase; letter-spacing: 0.05em;
	margin-bottom: 4px;
}

.cppu-verify-field input {
	width: 100%;
	padding: 7px 10px;
	background: var(--cppu-field-bg);
	border: 1px solid var(--cppu-field-border);
	border-radius: 6px;
	color: var(--cppu-field-color);
	font-size: 0.9em; font-family: inherit;
	transition: border-color 0.15s;
	box-sizing: border-box;
}

.cppu-verify-field input::placeholder { color: var(--cppu-field-placeholder); }

.cppu-verify-field input:focus {
	outline: none;
	border-color: var(--cppu-field-focus-border);
}

.cppu-btn-verify {
	width: 100%;
	padding: 0.6em 1em;
	background: var(--cppu-verify-btn-bg);
	border: 1px solid var(--cppu-verify-btn-border);
	border-radius: 6px;
	color: var(--cppu-verify-btn-color);
	font-family: inherit; font-size: 0.88em; font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.cppu-btn-verify:hover {
	background: var(--cppu-verify-btn-hover-bg);
}

.cppu-verify-msg {
	font-size: 0.82em;
	margin: 6px 0 0; min-height: 1.2em; text-align: center;
}

.cppu-verify-msg.cppu-success { color: #4ade80; }
.cppu-verify-msg.cppu-error   { color: #f87171; }

/* Light/minimal theme: use legible error/success colours */
.cppu-theme-light .cppu-verify-msg.cppu-success,
.cppu-theme-minimal .cppu-verify-msg.cppu-success { color: #16a34a; }
.cppu-theme-light .cppu-verify-msg.cppu-error,
.cppu-theme-minimal .cppu-verify-msg.cppu-error   { color: #dc2626; }

/* Mobile */
@media (max-width: 520px) {
	.cppu-lock-card-inner { padding: 2em 1.25em 1.5em; }
	.cppu-verify-fields { grid-template-columns: 1fr; }
}