/* Desi Hub Core — front-end styles for shortcodes (buttons, plan cards, age gate, watermark).
   Uses CSS variables defined by the theme (falls back to sensible defaults so the
   plugin still looks fine on any theme, not just Desi Hub Theme). */

.dh-btn {
	--dh-accent: var(--dh-color-accent, #ff5c39);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.dh-btn:hover { transform: translateY(-1px); }
.dh-btn:active { transform: translateY(0); }
.dh-btn-busy { opacity: .6; pointer-events: none; }

.dh-btn-primary {
	background: linear-gradient(135deg, var(--dh-accent), var(--dh-color-accent-2, #7b2ff7));
	color: #fff;
	box-shadow: 0 8px 24px -8px rgba(255, 92, 57, .6);
}
.dh-btn-ghost {
	background: transparent;
	color: var(--dh-color-text, #1a1a24);
	border-color: currentColor;
	opacity: .85;
}
.dh-btn-telegram {
	background: #229ED9;
	color: #fff;
}

.dh-empty { opacity: .65; font-size: 14px; }

/* Pricing cards */
.dh-plans-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin: 24px 0;
}
.dh-plan-card {
	position: relative;
	border: 1px solid rgba(127,127,127,.25);
	border-radius: 18px;
	padding: 28px 24px;
	text-align: center;
	background: var(--dh-color-surface, #16161f);
	color: var(--dh-color-text, #f4f4f7);
}
.dh-plan-featured {
	border-color: var(--dh-color-accent, #ff5c39);
	box-shadow: 0 0 0 1px var(--dh-color-accent, #ff5c39);
}
.dh-plan-badge {
	position: absolute;
	top: -12px; left: 50%; transform: translateX(-50%);
	background: var(--dh-color-accent, #ff5c39);
	color: #fff;
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}
.dh-plan-name { margin: 8px 0 4px; font-size: 20px; }
.dh-plan-price { font-size: 36px; font-weight: 800; margin: 8px 0 0; }
.dh-plan-duration { opacity: .65; margin-bottom: 16px; font-size: 13px; }
.dh-plan-features { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; }
.dh-plan-features li { padding: 6px 0; border-top: 1px solid rgba(127,127,127,.15); font-size: 14px; }
.dh-plan-features li:first-child { border-top: none; }
.dh-plan-card .dh-btn { width: 100%; margin-top: 8px; }
.dh-plan-message { margin-top: 12px; font-size: 13px; }
.dh-plan-message.dh-error { color: #ff5c5c; }

/* Download / access box */
.dh-access-box { margin: 28px 0; }
.dh-access-heading { font-weight: 700; margin-bottom: 12px; }
.dh-access-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.dh-access-buttons-split { align-items: stretch; }
.dh-access-option {
	flex: 1 1 240px;
	border: 1px solid rgba(127,127,127,.25);
	border-radius: 14px;
	padding: 18px;
}
.dh-access-option h4 { margin: 0 0 6px; }
.dh-access-option p { margin: 0 0 14px; font-size: 13px; opacity: .75; }
.dh-telegram-notice { margin-top: 14px; font-size: 13px; opacity: .85; }
.dh-telegram-icon { display: inline-block; }

/* Account box */
.dh-account-box { padding: 18px; border: 1px solid rgba(127,127,127,.25); border-radius: 14px; }
.dh-status-active { color: #35c281; font-weight: 700; }
.dh-status-inactive { opacity: .8; }

/* Age gate */
.dh-age-gate-active { overflow: hidden; }
.dh-age-gate {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	background: rgba(6,6,10,.92);
	backdrop-filter: blur(6px);
	padding: 20px;
}
.dh-age-gate-box {
	max-width: 420px;
	background: var(--dh-color-surface, #16161f);
	color: var(--dh-color-text, #f4f4f7);
	border-radius: 18px;
	padding: 32px;
	text-align: center;
}
.dh-age-gate-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* Forensic watermark */
.dh-watermark-overlay {
	position: absolute; inset: 0;
	pointer-events: none;
	display: flex; flex-direction: column; justify-content: space-around;
	opacity: .14;
	overflow: hidden;
	transform: rotate(-22deg) scale(1.3);
	z-index: 5;
}
.dh-watermark-overlay span {
	display: block;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: center;
}