/* =========================================================
   LinkTree Blocks — frontend styles
   Loaded on any page/post/template that uses a LinkTree block.
   ========================================================= */

.lktb-btn,
.lktb-profile,
.lktb-social-row,
.lktb-ad-banner,
.lktb-yt-stats-card,
.lktb-contact-section,
.lktb-html-block{
	font-family: 'Inter', sans-serif;
	box-sizing: border-box;
}
.lktb-name,
.lktb-section-heading,
.lktb-yt-stats-title,
.lktb-btn-title{
	font-family: 'Poppins', sans-serif;
}

/* ---------------- Profile ---------------- */
.lktb-profile{
	text-align: center;
	margin: 0 auto 8px;
	max-width: 480px;
}

.lktb-avatar-wrap{ display: inline-flex; margin-bottom: 16px; }

.lktb-avatar{
	width: 112px;
	height: 112px;
	object-fit: cover;
	border: 4px solid #fff;
	box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.lktb-avatar--circle{ border-radius: 999px; }
.lktb-avatar--square{ border-radius: 22px; }

.lktb-avatar--placeholder{
	display: flex;
	align-items: center;
	justify-content: center;
	background: #111;
	color: #fff;
	font-weight: 700;
	font-size: 40px;
}

.lktb-name{
	font-weight: 700;
	font-size: 26px;
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lktb-verified-badge{ display: inline-flex; line-height: 0; }

.lktb-bio{
	font-size: 15px;
	line-height: 1.5;
	color: #4b5563;
	margin: 0 0 8px;
	white-space: pre-line;
}

/* ---------------- Buttons group / buttons ---------------- */
.lktb-buttons-group{
	display: flex;
	flex-direction: column;
	gap: var(--lktb-buttons-gap, 14px);
	max-width: 560px;
	margin: 0 auto;
}

.lktb-btn{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	padding: 16px 20px;
	background: var(--lktb-btn-bg, #111);
	color: var(--lktb-btn-text, #fff);
	border: var(--lktb-btn-border-width, 0px) solid var(--lktb-btn-border, transparent);
	border-radius: var(--lktb-btn-radius, 20px);
	box-shadow: var(--lktb-btn-shadow, 0 6px 18px rgba(0,0,0,.12));
	font-weight: 600;
	font-size: 15.5px;
	text-align: center;
	text-decoration: none;
	transition: transform .15s ease, background-color .15s ease, color .15s ease;
	cursor: pointer;
}
.lktb-btn:hover{
	background: var(--lktb-btn-hover-bg, var(--lktb-btn-bg));
	color: var(--lktb-btn-hover-text, var(--lktb-btn-text));
	transform: translateY(-2px);
}
.lktb-btn--outline{
	background: transparent !important;
	color: var(--lktb-btn-border, #111) !important;
	border: 2px solid var(--lktb-btn-border, #111) !important;
	box-shadow: none !important;
}
.lktb-btn--outline:hover{
	background: var(--lktb-btn-border, #111) !important;
	color: #fff !important;
}

.lktb-btn-icon{ position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: inline-flex; line-height: 0; }
.lktb-btn-icon svg{ fill: currentColor; }
.lktb-btn-text-wrap{ display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.lktb-btn-desc{ font-size: 12px; font-weight: 400; opacity: .75; }

.lktb-svg-icon{ fill: currentColor; }
.lktb-mono-icon{ display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: 'Poppins', sans-serif; }

/* ---------------- Social icon row ---------------- */
.lktb-social-row{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 480px;
	margin: 0 auto 8px;
}

.lktb-social-icon{
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--lktb-icon-bg, #111);
	color: var(--lktb-icon-color, #fff);
	border-radius: var(--lktb-icon-radius, 999px);
	text-decoration: none;
	transition: transform .15s ease, opacity .15s ease;
}
.lktb-social-icon:hover{ transform: translateY(-2px); opacity: .88; }

/* ---------------- Ad banner ---------------- */
.lktb-ad-banner{
	position: relative;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0,0,0,.10);
	max-width: 560px;
	margin: 0 auto;
	text-decoration: none;
}
.lktb-ad-banner img{ width: 100%; height: auto; display: block; }
.lktb-ad-label{
	position: absolute; top: 8px; right: 8px;
	background: rgba(0,0,0,.55); color: #fff;
	font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
	padding: 3px 8px; border-radius: 999px;
}

/* ---------------- Section heading ---------------- */
.lktb-section-heading{
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #111;
	text-align: center;
	margin: 22px auto 4px;
	max-width: 560px;
}

/* ---------------- HTML / embed block ---------------- */
.lktb-html-block{ max-width: 560px; margin: 4px auto; }
.lktb-html-block--card{
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.lktb-html-block iframe{ max-width: 100%; border: 0; border-radius: 10px; display: block; }
.lktb-html-block img, .lktb-html-block video{ max-width: 100%; border-radius: 10px; }

/* ---------------- YouTube stats card ---------------- */
.lktb-yt-stats-card{
	position: relative;
	max-width: 480px;
	margin: 0 auto;
	background: #fff;
	border-radius: 20px;
	padding: 28px 22px 22px;
	box-shadow: 0 10px 30px rgba(0,0,0,.10);
	text-align: center;
	overflow: hidden;
}
.lktb-yt-stats-card::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #FF0000, #ff5c5c); }
.lktb-yt-stats-card--error{ text-align: left; background: #fff7ed; color: #9a3412; font-size: 13px; padding: 16px 18px; }
.lktb-yt-stats-card--error::before{ display: none; }

.lktb-yt-stats-head{ margin-bottom: 20px; }
.lktb-yt-stats-avatar-wrap{ position: relative; width: 68px; height: 68px; margin: 0 auto 12px; }
.lktb-yt-stats-avatar{ width: 68px; height: 68px; border-radius: 999px; object-fit: cover; display: block; border: 3px solid #fff; box-shadow: 0 0 0 2.5px #FF0000; }
.lktb-yt-stats-avatar--placeholder{ display: flex; align-items: center; justify-content: center; background: #FF0000; color: #fff; font-weight: 700; font-size: 26px; }
.lktb-yt-stats-badge{ position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 999px; background: #FF0000; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; }
.lktb-yt-stats-title{ font-weight: 700; font-size: 17px; color: #111; line-height: 1.3; }
.lktb-yt-stats-subtitle{ font-size: 12.5px; color: #6b7280; margin-top: 2px; }

.lktb-yt-stats-grid{ display: flex; align-items: stretch; justify-content: center; margin-bottom: 20px; padding: 16px 0; border-top: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.08); }
.lktb-yt-stat{ flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 8px; position: relative; }
.lktb-yt-stat + .lktb-yt-stat::before{ content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(0,0,0,.08); }
.lktb-yt-stat strong{ font-weight: 800; font-size: 22px; color: #111; letter-spacing: -.01em; font-family: 'Poppins', sans-serif; }
.lktb-yt-stat span{ font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }

.lktb-yt-stats-cta{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 20px; border-radius: 999px; background: linear-gradient(135deg, #FF0000, #d90000); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 18px rgba(255,0,0,.25); transition: transform .15s ease, box-shadow .15s ease; }
.lktb-yt-stats-cta svg{ flex-shrink: 0; }
.lktb-yt-stats-cta:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255,0,0,.32); }

.lktb-yt-stats-admin-row{ margin: 12px 0 0; font-size: 11.5px; color: #6b7280; }
.lktb-yt-stats-admin-row a{ color: #FF0000; font-weight: 600; text-decoration: underline; margin: 0 4px; }
.lktb-yt-stats-admin-note{ display: block; opacity: .6; font-size: 10.5px; margin-top: 2px; }

/* ---------------- Contact section ---------------- */
.lktb-contact-section{
	max-width: 480px;
	margin: 0 auto;
	background: #fff;
	border-radius: 20px;
	padding: 28px 24px;
	box-shadow: 0 6px 24px rgba(0,0,0,.08);
	text-align: center;
}
.lktb-contact-section .lktb-section-heading{ margin-top: 0; }
.lktb-contact-subheading{ color: #6b7280; font-size: 14px; margin: 0 0 20px; }
.lktb-contact-notice{ padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; }
.lktb-contact-notice--success{ background: #dcfce7; color: #166534; }
.lktb-contact-notice--error{ background: #fee2e2; color: #991b1b; }

.lktb-contact-form{ display: flex; flex-direction: column; gap: 14px; text-align: left; }
.lktb-form-row label{ display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: #111; }
.lktb-form-row input, .lktb-form-row textarea{ width: 100%; padding: 11px 14px; border-radius: 10px; border: 1.5px solid rgba(0,0,0,.12); font-size: 14px; background: #fff; color: #111; font-family: inherit; }
.lktb-form-row input:focus, .lktb-form-row textarea:focus{ outline: none; border-color: #111; }
.lktb-hp-field{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.lktb-btn--submit{ border: none; margin-top: 4px; }

@media (max-width: 480px){
	.lktb-avatar{ width: 96px; height: 96px; }
	.lktb-name{ font-size: 22px; }
}