/* =========================================================
   CLUBETOP Design System — clubetop-theme.css
   Additive theme layer (Laravel 6 / Blade / Livewire safe)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	/* Brand */
	--ct-black: #09090B;
	--ct-graphite: #111116;
	--ct-surface: #181820;
	--ct-magenta: #FF1687;
	--ct-pink: #FF3FA4;
	--ct-violet: #8B5CF6;
	--ct-white: #FFFFFF;
	--ct-muted: #A1A1AA;
	--ct-gold: #D6A84F;
	--clubetop-black: #08090D;
	--clubetop-dark: #0D1017;
	--clubetop-surface: #121620;
	--clubetop-gold: #D6A84F;
	--clubetop-gold-light: #F0CF82;
	--clubetop-champagne: #F5E1AE;

	/* Semantic */
	--ct-bg: #0B0B0F;
	--ct-bg-soft: #F4F4F5;
	--ct-card: #FFFFFF;
	--ct-card-dark: #14141A;
	--ct-border: rgba(255, 255, 255, 0.08);
	--ct-border-light: rgba(9, 9, 11, 0.08);
	--ct-text: #09090B;
	--ct-text-inv: #FFFFFF;
	--ct-success: #22C55E;
	--ct-danger: #EF4444;

	/* Radii */
	--ct-r-sm: 8px;
	--ct-r-md: 12px;
	--ct-r-lg: 16px;
	--ct-r-xl: 20px;

	/* Shadows */
	--ct-shadow-sm: 0 4px 14px rgba(9, 9, 11, 0.06);
	--ct-shadow-md: 0 12px 32px rgba(9, 9, 11, 0.12);
	--ct-shadow-glow: 0 10px 28px rgba(255, 22, 135, 0.35);

	/* Type */
	--ct-font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

	/* Layout */
	--ct-header-h: 68px;
	--ct-bottom-nav-h: 64px;
}

html { scroll-behavior: smooth; }

body {
	font-family: var(--ct-font) !important;
	color: var(--ct-text);
	background: var(--ct-bg-soft) !important;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .ban_heading, .pp-name {
	font-family: var(--ct-font) !important;
	letter-spacing: -0.02em;
}

a { transition: color 0.2s ease, opacity 0.2s ease; }

/* ---- Buttons ---- */
.ct-btn,
.explore_btn,
.banner_details a.explore_btn,
.pp-btn,
.creator-msg-btn {
	font-family: var(--ct-font) !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	letter-spacing: 0.01em;
}

.ct-btn-primary,
.explore_btn,
.banner_details a.explore_btn,
.pp-btn-primary {
	background: linear-gradient(120deg, var(--ct-magenta), var(--ct-pink)) !important;
	border: 0 !important;
	color: #fff !important;
	box-shadow: var(--ct-shadow-glow) !important;
}

.ct-btn-primary:hover,
.explore_btn:hover,
.banner_details a.explore_btn:hover,
.pp-btn-primary:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
	color: #fff !important;
}

.ct-btn-ghost,
.pp-btn-ghost {
	background: rgba(255,255,255,0.92) !important;
	border: 1px solid var(--ct-border-light) !important;
	color: var(--ct-text) !important;
}

.ct-btn-dark,
.pp-btn-message {
	background: var(--ct-black) !important;
	color: #fff !important;
}

.ct-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ct-badge-premium {
	background: linear-gradient(120deg, var(--ct-magenta), var(--ct-violet));
	color: #fff;
}

.ct-badge-gold {
	background: rgba(244, 199, 106, 0.16);
	color: #B8860B;
	border: 1px solid rgba(244, 199, 106, 0.45);
}

.ct-badge-new {
	background: rgba(139, 92, 246, 0.12);
	color: var(--ct-violet);
}

/* =========================================================
   HEADER CLUBETOP
   ========================================================= */
/* Remove legacy #wrap top gap that sat above the sticky header */
#wrap {
	margin-top: 0 !important;
}

.ct-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1040;
	height: var(--ct-header-h);
	padding: 0 !important;
	background: rgba(9, 9, 11, 0.86);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(255,255,255,0.06);
	box-shadow: 0 6px 20px rgba(9, 9, 11, 0.18);
	transition: box-shadow 0.25s ease, background 0.25s ease;
}

.ct-header.is-scrolled {
	box-shadow: 0 10px 28px rgba(9, 9, 11, 0.28);
	background: rgba(9, 9, 11, 0.94);
}

/* Offset page content under fixed header */
#main > main,
body > #wrap > #main > main {
	padding-top: var(--ct-header-h);
}

.ct-header .container {
	max-width: 1280px;
}

.ct-header .navbar {
	padding: 0;
	min-height: var(--ct-header-h);
}

.ct-header .navbar-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	margin-right: 28px;
}

.ct-logo-img {
	display: block;
	height: 40px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

.ct-auth-logo {
	display: inline-block;
	height: auto;
	width: auto;
	max-width: 220px;
	max-height: 72px;
	object-fit: contain;
}

.ct-logo-mark {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
}

.ct-logo-word {
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 0.04em;
	color: #fff !important;
	text-transform: uppercase;
}

.ct-logo-word span {
	background: linear-gradient(120deg, var(--ct-magenta), var(--ct-pink));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ct-nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ct-nav-links > li > a,
.ct-nav-links > li > div > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px !important;
	border-radius: var(--ct-r-md);
	color: rgba(255,255,255,0.78) !important;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none !important;
	white-space: nowrap;
}

.ct-nav-links > li > a:hover,
.ct-nav-links > li > div > a:hover {
	color: #fff !important;
	background: rgba(255,255,255,0.06);
}

.ct-header .notifc {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 4px;
	border-radius: 999px;
	background: var(--ct-magenta) !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 700;
	line-height: 1;
}

.ct-search-wrap {
	flex: 1;
	max-width: 360px;
	margin: 0 16px;
}

.ct-header .search-topnavi {
	background: rgba(255,255,255,0.06) !important;
	border: 1px solid rgba(255,255,255,0.1) !important;
	border-radius: 999px !important;
	color: #fff !important;
	height: 40px;
	padding-left: 16px;
	margin-top: 0 !important;
}

.ct-header .search-topnavi::placeholder {
	color: rgba(255,255,255,0.45);
}

.ct-header .autocomplete-results {
	background: #14141A !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: var(--ct-r-lg) !important;
	overflow: hidden;
	z-index: 1050;
}

.ct-header .autocomplete-results a {
	color: #fff !important;
}

.ct-header .navbar-toggler {
	border: 0;
	color: #fff;
	padding: 6px 8px;
}

.ct-header .close_tgl img {
	filter: invert(1);
	opacity: 0.8;
}

.ct-cta-login {
	background: #fff !important;
	color: var(--ct-black) !important;
	border-radius: 999px !important;
	padding: 8px 16px !important;
	font-weight: 600 !important;
}

.ct-cta-signup {
	background: linear-gradient(120deg, var(--ct-magenta), var(--ct-pink)) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 8px 16px !important;
	font-weight: 600 !important;
	border: 0 !important;
}

/* Override legacy gradient header chrome */
.header_sec.innerheaders.ct-header,
.ct-header.innerheaders,
.ct-header.header_sec {
	background: rgba(9, 9, 11, 0.86) !important;
	background-image: none !important;
}

/* =========================================================
   BOTTOM NAV (mobile)
   ========================================================= */
.ct-bottom-nav {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	height: var(--ct-bottom-nav-h);
	background: rgba(9, 9, 11, 0.96);
	backdrop-filter: blur(14px);
	border-top: 1px solid rgba(255,255,255,0.08);
	padding: 0 8px;
	padding-bottom: env(safe-area-inset-bottom);
}

.ct-bottom-nav ul {
	display: flex;
	align-items: center;
	justify-content: space-around;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

.ct-bottom-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: rgba(255,255,255,0.55);
	font-size: 10px;
	font-weight: 600;
	text-decoration: none !important;
	min-width: 56px;
}

.ct-bottom-nav a i {
	font-size: 18px;
}

.ct-bottom-nav a.is-active,
.ct-bottom-nav a:hover {
	color: var(--ct-pink);
}

.ct-bottom-nav .ct-create-pill {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ct-magenta), var(--ct-violet));
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -18px;
	box-shadow: var(--ct-shadow-glow);
}

.ct-bottom-nav .ct-create-pill i {
	font-size: 18px;
	margin: 0;
}

@media (max-width: 991px) {
	.ct-bottom-nav { display: block; }
	body { padding-bottom: calc(var(--ct-bottom-nav-h) + 12px); }
	.ct-desktop-only { display: none !important; }
}

@media (min-width: 992px) {
	.ct-mobile-only { display: none !important; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer_sec.ct-footer {
	background: var(--ct-black) !important;
	color: var(--ct-muted);
	padding: 36px 0 28px;
	border-top: 1px solid rgba(255,255,255,0.06);
}

.ct-footer a,
.ct-footer .h5 {
	color: rgba(255,255,255,0.75) !important;
	font-size: 14px !important;
}

.ct-footer a:hover { color: #fff !important; }

.ct-footer-tagline {
	color: var(--ct-muted);
	font-size: 13px;
	margin-top: 6px;
}

.ct-footer-brand {
	font-weight: 800;
	letter-spacing: 0.06em;
	color: #fff !important;
	text-transform: uppercase;
}

.ct-footer-logo {
	display: block;
	height: 42px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	margin-bottom: 4px;
}

/* =========================================================
   PAGE SHELLS
   ========================================================= */
.white-smoke-bg,
.white-smoke-bg-profile-page {
	background: var(--ct-bg-soft) !important;
}

.banner_sec .banner_box,
.banner_sec .banner_innr {
	background: radial-gradient(120% 100% at 0% 0%, rgba(255,22,135,0.35), transparent 50%),
		radial-gradient(100% 80% at 100% 20%, rgba(139,92,246,0.28), transparent 45%),
		var(--ct-black) !important;
}

.banner_details .ban_heading {
	color: #fff !important;
	font-size: clamp(2rem, 4vw, 3.2rem) !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
}

.banner_details p {
	color: rgba(255,255,255,0.72) !important;
	font-size: 1.05rem !important;
}

.welcome_sec p b {
	color: var(--ct-magenta) !important;
}

.welcome_sec p:before {
	background: var(--ct-magenta) !important;
}

/* Cards / feed */
.card,
.creator_box,
.pp-identity-card,
.pp-side-card {
	border-radius: var(--ct-r-lg) !important;
	border: 1px solid var(--ct-border-light) !important;
	box-shadow: var(--ct-shadow-sm) !important;
}

.postsList .card:hover {
	box-shadow: var(--ct-shadow-md) !important;
	transform: translateY(-1px);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Creator cards */
.creator_box {
	overflow: hidden;
	background: #fff;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.creator_box:hover {
	transform: translateY(-4px);
	box-shadow: var(--ct-shadow-md) !important;
}

.creator_txtInnr h5 a {
	font-weight: 700;
	color: var(--ct-black) !important;
}

.creator-msg-btn {
	background: var(--ct-black) !important;
}

.creator-msg-btn:hover {
	background: var(--ct-magenta) !important;
}

/* Auth */
.ct-auth-shell {
	min-height: calc(100vh - 160px);
	display: flex;
	align-items: center;
	padding: 40px 0;
	background:
		radial-gradient(80% 60% at 10% 0%, rgba(255,22,135,0.12), transparent 55%),
		radial-gradient(70% 50% at 100% 100%, rgba(139,92,246,0.12), transparent 50%),
		var(--ct-bg-soft);
}

.ct-auth-card {
	background: #fff;
	border-radius: var(--ct-r-xl);
	box-shadow: var(--ct-shadow-md);
	border: 1px solid var(--ct-border-light);
	padding: 32px 28px;
}

.ct-auth-card h1 {
	font-weight: 800;
	font-size: 1.6rem;
}

.ct-auth-card .form-control {
	border-radius: var(--ct-r-md);
	height: 44px;
	border-color: #E4E4E7;
}

.ct-auth-card .btn-primary {
	background: linear-gradient(120deg, var(--ct-magenta), var(--ct-pink)) !important;
	border: 0 !important;
	border-radius: 999px;
	font-weight: 600;
	padding: 10px 22px;
	box-shadow: var(--ct-shadow-glow);
}

/* Locked posts (feed/profile) */
.locked-post {
	border-radius: var(--ct-r-lg) !important;
	background:
		radial-gradient(100% 80% at 50% 0%, rgba(255,22,135,0.14), transparent 55%),
		linear-gradient(180deg, #121218, #0B0B0F) !important;
	color: rgba(255,255,255,0.75) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
}

.locked-post .display-2,
.locked-post i {
	color: var(--ct-pink) !important;
}

/* Trust strip */
.ct-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	justify-content: center;
	padding: 14px 0;
	color: var(--ct-muted);
	font-size: 12px;
	font-weight: 500;
}

.ct-trust span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ct-trust i { color: var(--ct-gold); }

/* Empty states */
.ct-empty {
	text-align: center;
	padding: 48px 24px;
	color: var(--ct-muted);
}

.ct-empty h3 {
	color: var(--ct-text);
	font-weight: 700;
	margin-bottom: 8px;
}

/* Profile premium tokens override */
.profile-premium {
	--pp-accent: #FF1687;
	--pp-accent-2: #8B5CF6;
	--pp-ink: #09090B;
	--pp-muted: #A1A1AA;
	--pp-canvas: #F4F4F5;
}

.profile-premium .pp-btn-primary {
	background: linear-gradient(120deg, #FF1687, #FF3FA4) !important;
	box-shadow: 0 10px 28px rgba(255, 22, 135, 0.38) !important;
}

.profile-premium .pp-verified {
	background: linear-gradient(135deg, var(--ct-magenta), var(--ct-violet)) !important;
}

/* Messenger tokens */
.fb-messenger {
	--fb-blue: #FF1687;
	--fb-blue-dark: #D91070;
	--fb-mine: #FF1687;
	--fb-theirs: #E4E4E7;
	--fb-bg: #F4F4F5;
	--fb-ink: #09090B;
	--fb-muted: #71717A;
}

.fb-messenger .fb-empty-icon {
	background: rgba(255,22,135,0.1);
	color: var(--ct-magenta);
}

.fb-messenger .fb-send,
.fb-messenger .fb-tool-btns button {
	color: var(--ct-magenta);
}

/* Explore page hero */
.ct-page-hero {
	padding: 36px 0 12px;
}

.ct-page-hero h1 {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-weight: 800;
	margin-bottom: 8px;
}

.ct-page-hero p {
	color: var(--ct-muted);
	font-size: 1.05rem;
	margin-bottom: 0;
}

/* Utility */
.ct-hide { display: none !important; }

/* Language switcher */
.ct-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	margin-right: 0.35rem;
	padding: 0.2rem 0.35rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.ct-lang-link {
	display: inline-block;
	padding: 0.2rem 0.45rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.55) !important;
	text-decoration: none !important;
	border-radius: 999px;
	line-height: 1.2;
}

.ct-lang-link.is-active,
.ct-lang-link:hover {
	color: #fff !important;
	background: rgba(255, 22, 135, 0.85);
}

/* Bookmarks */
a.toggleBookmark.is-bookmarked,
a.toggleBookmark.is-bookmarked i {
	color: #FF1687 !important;
}

/* TOP AI panel */
.ct-ai-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ct-ai-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.85rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(9, 9, 11, 0.08);
}

.ct-ai-item:last-child { border-bottom: 0; }

.ct-ai-item strong {
	display: block;
	font-size: 0.95rem;
	margin-bottom: 0.2rem;
}

.ct-ai-item p {
	margin: 0;
	font-size: 0.85rem;
	color: #71717A;
	line-height: 1.4;
}

.ct-ai-soon {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	font-size: 0.65rem;
	font-style: normal;
	font-weight: 700;
	background: #FEF3C7;
	color: #92400E;
	vertical-align: middle;
}

.ct-ai-coming_soon {
	opacity: 0.85;
}

/* =========================================================
   AGE GATE (18+)
   ========================================================= */
html.ct-agegate-lock,
body.ct-agegate-lock {
	overflow: hidden !important;
}

.ct-agegate {
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	animation: ct-agegate-in .25s ease;
}

.ct-agegate.is-leaving {
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}

.ct-agegate-backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 420px at 50% 0%, rgba(214,168,79,.12), transparent 55%),
		rgba(8, 9, 13, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.ct-agegate-card {
	position: relative;
	width: 100%;
	max-width: 440px;
	padding: 36px 28px 28px;
	border-radius: 20px;
	background: #121620;
	border: 1px solid rgba(255,255,255,.1);
	box-shadow: 0 24px 64px rgba(0,0,0,.55);
	text-align: center;
	color: #F5F5F7;
}

.ct-agegate-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .04em;
	color: #1a1205;
	background: linear-gradient(135deg, #F0CF82, #B98932);
	box-shadow: 0 10px 28px rgba(214,168,79,.35);
}

.ct-agegate-logo {
	display: block;
	height: 40px;
	width: auto;
	max-width: 180px;
	margin: 0 auto 18px;
	object-fit: contain;
}

.ct-agegate-card h2 {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff;
	line-height: 1.25;
}

.ct-agegate-card p {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.55;
	color: #A6ADBB;
}

.ct-agegate-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ct-agegate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 800;
	border: 0;
	cursor: pointer;
	transition: transform .2s ease, filter .2s ease, background .2s ease;
}

.ct-agegate-btn:disabled {
	opacity: .65;
	cursor: wait;
}

.ct-agegate-btn-yes {
	background: linear-gradient(135deg, #F0CF82, #B98932);
	color: #1a1205;
	box-shadow: 0 10px 24px rgba(214,168,79,.28);
}

.ct-agegate-btn-yes:hover:not(:disabled) {
	transform: translateY(-1px);
	filter: brightness(1.05);
}

.ct-agegate-btn-no {
	background: rgba(255,255,255,.06);
	color: #A6ADBB;
	border: 1px solid rgba(255,255,255,.1);
}

.ct-agegate-btn-no:hover:not(:disabled) {
	background: rgba(255,255,255,.1);
	color: #fff;
}

.ct-agegate-fine {
	margin: 16px 0 0 !important;
	font-size: 11px !important;
	color: #6F7785 !important;
	line-height: 1.4 !important;
}

@keyframes ct-agegate-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (max-width: 575px) {
	.ct-logo-img {
		height: 32px;
		max-width: 140px;
	}
	.ct-search-wrap { max-width: none; margin: 8px 0; width: 100%; }
	.ct-agegate-card {
		padding: 28px 20px 22px;
	}
	.ct-agegate-card h2 {
		font-size: 19px;
	}
}