/**
 * WPTeam Paywall – Frontend Stylesheet
 *
 * v1.5.0 – Bricks Buffer-Pfad: eigene Wrapper-Klasse mit korrektem
 *           Positioning für Fade und zentriertes Overlay.
 *
 * @package WPTeam_Paywall
 * @version 1.5.0
 * @author  WPTeam.io
 */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS Custom Properties (Fallback-Defaults)
   Werden via wp_add_inline_style aus dem Backend ü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;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Standard-Pfad (Gutenberg / Classic Editor)
   render_paywall() baut: .wrapper > .teaser + .fade + .overlay
   ───────────────────────────────────────────────────────────────────────────── */

.wpteam-paywall-wrapper {
	position: relative;
	overflow: hidden;
	width:    100%;
}

.wpteam-paywall-teaser {
	position: relative;
}

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

/* Gradient-Fade im Standard-Pfad: absolute innerhalb .wpteam-paywall-teaser */
.wpteam-paywall-teaser .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 im Standard-Pfad */
.wpteam-paywall-wrapper > .wpteam-paywall-overlay {
	position:        relative;
	z-index:         2;
	display:         flex;
	justify-content: center;
	padding:         0 16px 40px;
	margin-top:      calc(var(--wpteam-paywall-fade-height) * -0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Bricks Buffer-Pfad (Output-Buffer / Shortcode-Widget)
   process_output_buffer() baut:
   .wpteam-paywall-bricks-wrapper > .bricks-fade + .overlay
   Der Wrapper hat keinen Teaser-Container – er wird direkt nach dem
   letzten sichtbaren Bricks-Element eingefügt.
   ───────────────────────────────────────────────────────────────────────────── */

.wpteam-paywall-bricks-wrapper {
	position:   relative;
	width:      100%;
	/* Zieht den Wrapper nach oben damit der Fade den letzten
	   Textblock überlappt */
	margin-top: calc(var(--wpteam-paywall-fade-height) * -1);
}

/* Gradient-Fade im Bricks-Pfad: relative Flow-Element,
   nimmt die volle Breite ein und die konfigurierte Höhe */
.wpteam-paywall-bricks-wrapper .wpteam-paywall-bricks-fade {
	display:    block;
	position:   relative;
	width:      100%;
	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;
}

/* Overlay Container im Bricks-Pfad */
.wpteam-paywall-bricks-wrapper .wpteam-paywall-overlay {
	position:        relative;
	z-index:         2;
	display:         flex;
	justify-content: center;
	padding:         0 16px 40px;
	/* Kein negativer Margin nötig – Fade ist bereits ein Flow-Element */
	margin-top:      0;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   Standard-Overlay Design (Karte) – gilt für beide Pfade
   ───────────────────────────────────────────────────────────────────────────── */
.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 Login-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;
	}
}