/**
 * WPTeam Paywall – Frontend Stylesheet
 *
 * Enthält alle Styles für:
 * - Paywall-Wrapper und Teaser-Bereich
 * - Gradient-Fade Effekt
 * - Overlay (Standard-Design)
 * - Bricks Builder Template Container
 * - Responsive Anpassungen
 *
 * CSS-Custom-Properties werden via wp_add_inline_style aus dem Backend
 * befüllt (Farbkonfiguration). Die hier definierten Werte sind die
 * Fallback-Defaults, falls keine Backend-Farben gesetzt sind.
 *
 * Dark Mode wurde entfernt (v1.1.0) – Farben werden vollständig
 * über die Backend-Farbkonfiguration gesteuert.
 *
 * @package WPTeam_Paywall
 * @version 1.1.0
 * @author  WPTeam.io
 */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS Custom Properties (Fallback-Defaults)
   Diese werden durch die Backend-Farbkonfiguration via inline style überschrieben.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
	/* Farben – Overlay-Karte */
	--wpteam-paywall-overlay-bg:          #ffffff;
	--wpteam-paywall-overlay-border:      #e5e7eb;
	--wpteam-paywall-overlay-shadow:      0 4px 24px rgba(0, 0, 0, 0.10);

	/* Farben – Gradient-Fade */
	--wpteam-paywall-fade-start:          rgba(255, 255, 255, 0);
	--wpteam-paywall-fade-end:            #ffffff;

	/* Farben – Text */
	--wpteam-paywall-icon-color:          #6b7280;
	--wpteam-paywall-headline-color:      #111827;
	--wpteam-paywall-subline-color:       #6b7280;

	/* Farben – Button */
	--wpteam-paywall-btn-bg:              #111827;
	--wpteam-paywall-btn-bg-hover:        #374151;
	--wpteam-paywall-btn-color:           #ffffff;

	/* Abstände & Formen */
	--wpteam-paywall-fade-height:         120px;
	--wpteam-paywall-overlay-padding:     40px 32px;
	--wpteam-paywall-overlay-radius:      12px;
	--wpteam-paywall-overlay-max-width:   480px;
	--wpteam-paywall-btn-radius:          6px;

	/* Typografie */
	--wpteam-paywall-headline-size:       1.375rem;
	--wpteam-paywall-subline-size:        0.9375rem;
	--wpteam-paywall-btn-size:            0.9375rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Haupt-Wrapper
   ───────────────────────────────────────────────────────────────────────────── */
.wpteam-paywall-wrapper {
	position: relative;
	overflow: hidden;
	width:    100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Teaser-Bereich
   ───────────────────────────────────────────────────────────────────────────── */
.wpteam-paywall-teaser {
	position: relative;
}

/* Im Overlay-Modus: Inhalt im DOM vorhanden aber visuell beschränkt */
.wpteam-paywall-overlay-mode .wpteam-paywall-hidden-content {
	display:        block;
	max-height:     300px;
	overflow:       hidden;
	pointer-events: none;
	user-select:    none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Gradient-Fade
   Der Gradient beginnt transparent (fade-start als rgba mit 0 Opacity)
   und endet deckend (fade-end). Beide Farben werden vom Backend gesetzt.
   ───────────────────────────────────────────────────────────────────────────── */
.wpteam-paywall-fade {
	position:   absolute;
	bottom:     0;
	left:       0;
	right:      0;
	height:     var(--wpteam-paywall-fade-height);
	background: linear-gradient(
		to bottom,
		var(--wpteam-paywall-fade-start) 0%,
		var(--wpteam-paywall-fade-end)   100%
	);
	pointer-events: none;
	z-index:    1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Overlay Container
   ───────────────────────────────────────────────────────────────────────────── */
.wpteam-paywall-overlay {
	position:        relative;
	z-index:         2;
	display:         flex;
	justify-content: center;
	padding:         0 16px 40px;
	/* Negativer Margin zieht das Overlay in den Fade-Bereich hinein */
	margin-top:      calc(var(--wpteam-paywall-fade-height) * -0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Overlay Inner
   ───────────────────────────────────────────────────────────────────────────── */
.wpteam-paywall-overlay-inner {
	width:     100%;
	max-width: var(--wpteam-paywall-overlay-max-width);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Standard-Overlay Design (Karte)
   ───────────────────────────────────────────────────────────────────────────── */
.wpteam-paywall-default-overlay {
	background:    var(--wpteam-paywall-overlay-bg);
	border:        1px solid var(--wpteam-paywall-overlay-border);
	border-radius: var(--wpteam-paywall-overlay-radius);
	box-shadow:    var(--wpteam-paywall-overlay-shadow);
	padding:       var(--wpteam-paywall-overlay-padding);
	text-align:    center;
	animation:     wpteamPaywallFadeIn 0.3s ease-in-out;
}

@keyframes wpteamPaywallFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Lock-Icon */
.wpteam-paywall-icon {
	display:         flex;
	justify-content: center;
	margin-bottom:   16px;
	color:           var(--wpteam-paywall-icon-color);
}

.wpteam-paywall-icon svg {
	width:  48px;
	height: 48px;
}

/* Überschrift */
.wpteam-paywall-headline {
	font-size:   var(--wpteam-paywall-headline-size);
	font-weight: 700;
	color:       var(--wpteam-paywall-headline-color);
	margin:      0 0 12px;
	line-height: 1.3;
}

/* Beschreibungstext */
.wpteam-paywall-subline {
	font-size:   var(--wpteam-paywall-subline-size);
	color:       var(--wpteam-paywall-subline-color);
	margin:      0 0 24px;
	line-height: 1.6;
}

/* Login-Button */
.wpteam-paywall-login-btn {
	display:          inline-block;
	background-color: var(--wpteam-paywall-btn-bg);
	color:            var(--wpteam-paywall-btn-color);
	font-size:        var(--wpteam-paywall-btn-size);
	font-weight:      600;
	padding:          12px 28px;
	border-radius:    var(--wpteam-paywall-btn-radius);
	text-decoration:  none;
	transition:       background-color 0.2s ease, transform 0.1s ease;
	cursor:           pointer;
	border:           none;
}

.wpteam-paywall-login-btn:hover,
.wpteam-paywall-login-btn:focus {
	background-color: var(--wpteam-paywall-btn-bg-hover);
	color:            var(--wpteam-paywall-btn-color);
	text-decoration:  none;
	transform:        translateY(-1px);
}

.wpteam-paywall-login-btn:active {
	transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Bricks Builder Template Container
   ───────────────────────────────────────────────────────────────────────────── */
.wpteam-paywall-bricks-template {
	width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Archivseiten – Excerpt-Hinweis
   ───────────────────────────────────────────────────────────────────────────── */
.wpteam-paywall-excerpt-hint {
	display:    inline-block;
	color:      var(--wpteam-paywall-subline-color);
	font-style: italic;
	font-size:  0.875rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	:root {
		--wpteam-paywall-overlay-padding: 28px 20px;
		--wpteam-paywall-headline-size:   1.1875rem;
		--wpteam-paywall-fade-height:     80px;
	}

	.wpteam-paywall-overlay {
		padding-left:  8px;
		padding-right: 8px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Shortcode-Modus (Bricks Builder Integration) v1.2.0
   Der Shortcode [wpteam_paywall] wird direkt unter dem Blogbeitrag-Widget
   im Bricks Single-Post-Template platziert.
   ───────────────────────────────────────────────────────────────────────────── */

/* Wrapper des Shortcodes – unsichtbar bis JS aktiviert */
.wpteam-paywall-shortcode-wrapper {
	position:   relative;
	width:      100%;
	/* Vor JS-Ausführung: noch kein negativer Margin */
	margin-top: 0;
}

/* Nach JS-Aktivierung: Overlay zieht in den Fade-Bereich hinein */
.wpteam-paywall-shortcode-wrapper.wpteam-paywall-shortcode-active {
	margin-top: calc(var(--wpteam-paywall-fade-height) * -0.5);
}

/* Fade im Shortcode-Kontext: positioniert relativ zum Wrapper,
   überlappt den Post-Content-Bereich darüber */
.wpteam-paywall-shortcode-fade {
	position: relative;
	/* Zieht den Fade nach oben über den Post-Content */
	margin-top: calc(var(--wpteam-paywall-fade-height) * -1);
	pointer-events: none;
	z-index: 1;
}

/* Overlay im Shortcode-Kontext */
.wpteam-paywall-shortcode-wrapper .wpteam-paywall-overlay {
	margin-top: 0;
	padding-top: 0;
}