/* ==========================================================================
   STILI PER I BADGE DELLE STELLE (FRONTEND UTENTI)
   ========================================================================== */

/* Wrapper per l'avatar per garantire che il posizionamento assoluto funzioni */
.post-header-left,
.author-avatar,
.comment-avatar,
.profile-avatar-wrapper,
.story-user,
.chat-list-item-avatar,
.message-avatar,
.avatar-wrapper,
.user-avatar-wrapper {
	position: relative !important;
	display: inline-block;
}

/* Contenitore delle stelle sovrapposte all'avatar */
.star-badge-container {
	position: absolute;
	bottom: -4px;
	right: -4px;
	background: linear-gradient(135deg, #1e293b, #0f172a);
	border: 1px solid rgba(255, 215, 0, 0.35);
	border-radius: 12px;
	padding: 2px 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
	z-index: 5;
	pointer-events: none;
}

/* Icona singola stella */
.star-badge {
	color: #ffd700 !important;
	font-size: 8px !important;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
}

/* Effetto brillio soffuso sulle stelle degli avatar */
.star-badge-container .star-badge {
	animation: starGlow 2.5s infinite ease-in-out;
}

.star-badge-container .star-badge:nth-child(2) {
	animation-delay: 0.3s;
}
.star-badge-container .star-badge:nth-child(3) {
	animation-delay: 0.6s;
}
.star-badge-container .star-badge:nth-child(4) {
	animation-delay: 0.9s;
}

.social2-user-stars {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px;
	margin-top: 2px;
	line-height: 1;
}

.social2-user-star {
	color: #ffd700 !important;
	font-size: 11px !important;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
}

.social2-username-milestone {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 100000;
	max-width: min(360px, calc(100vw - 32px));
	padding: 16px 20px;
	background: #ffffff;
	border-left: 4px solid #38bdf8;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
	color: #172033;
	font-size: 15px;
	line-height: 1.5;
	animation: usernameMilestoneIn 0.35s ease-out both;
}

.social2-username-milestone span {
	font-weight: 700;
}

.social2-username-milestone.is-leaving {
	animation: usernameMilestoneOut 0.3s ease-in both;
}

@keyframes usernameMilestoneIn {
	from { opacity: 0; transform: translateX(24px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes usernameMilestoneOut {
	from { opacity: 1; transform: translateX(0); }
	to { opacity: 0; transform: translateX(24px); }
}

@media (max-width: 600px) {
	.social2-username-milestone {
		top: 12px;
		right: 12px;
		left: 12px;
		max-width: none;
	}
}

.social2-fortune-wheel-overlay {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(20, 12, 8, 0.72);
	backdrop-filter: blur(6px);
}

.social2-fortune-wheel-overlay[hidden] {
	display: none;
}

.social2-fortune-wheel-dialog {
	position: relative;
	width: min(100%, 800px);
	min-height: 500px;
	padding: 28px 24px 24px;
	border: 2px solid #f4c95d;
	border-radius: 28px;
	background: linear-gradient(145deg, #fffaf0, #fff0c7);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
	color: #3a2114;
	text-align: center;
}

.social2-fortune-wheel-close {
	position: absolute;
	top: 12px;
	right: 14px;
	display: grid;
	width: 34px;
	height: 34px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: #3a2114;
	color: #fffaf0;
	cursor: pointer;
	line-height: 1;
}

.social2-fortune-wheel-kicker {
	color: #a15c16;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.social2-fortune-wheel-heading h2 {
	margin: 4px 0 4px;
	font-size: 28px;
}

.social2-fortune-wheel-heading p {
	margin: 0;
	color: #765543;
	font-size: 14px;
}

.social2-fortune-wheel-layout {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(250px, 0.8fr);
	align-items: center;
	gap: 28px;
	min-height: 350px;
}

.social2-fortune-wheel-left,
.social2-fortune-wheel-right {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.social2-fortune-wheel-right {
	min-height: 280px;
	padding: 24px;
	border-left: 1px solid rgba(142, 40, 24, 0.18);
}

.social2-fortune-wheel-stage {
	position: relative;
	width: min(78vw, 330px);
	aspect-ratio: 1;
	margin: 24px auto 16px;
}

.social2-fortune-wheel-pointer {
	position: absolute;
	top: -8px;
	left: 50%;
	z-index: 2;
	width: 0;
	height: 0;
	border-right: 14px solid transparent;
	border-left: 14px solid transparent;
	border-top: 28px solid #8e2818;
	transform: translateX(-50%);
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.25));
}

.social2-fortune-wheel {
	position: relative;
	width: 100%;
	height: 100%;
	border: 10px solid #a15c16;
	border-radius: 50%;
	background: conic-gradient(#e66b45 0deg 36deg, #f4c95d 36deg 72deg, #65a87c 72deg 108deg, #65b8c8 108deg 144deg, #6886bd 144deg 180deg, #9b78b5 180deg 216deg, #dd7a9a 216deg 252deg, #e66b45 252deg 288deg, #f4c95d 288deg 324deg, #65a87c 324deg 360deg);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55), 0 10px 20px rgba(83, 44, 17, 0.24);
	transition: transform 4.5s cubic-bezier(0.16, 0.78, 0.18, 1);
}

.social2-fortune-wheel-label {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: 0;
	border: 2px solid rgba(255, 255, 255, 0.72);
	border-radius: 50%;
	background: rgba(52, 31, 22, 0.38);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 32px;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	transform-origin: 50% 50%;
}

.label-10 { transform: translate(-50%, -50%) translateY(-100px); }
.label-20 { transform: translate(-50%, -50%) rotate(36deg) translateY(-100px) rotate(-36deg); }
.label-30 { transform: translate(-50%, -50%) rotate(72deg) translateY(-100px) rotate(-72deg); }
.label-40 { transform: translate(-50%, -50%) rotate(108deg) translateY(-100px) rotate(-108deg); }
.label-50 { transform: translate(-50%, -50%) rotate(144deg) translateY(-100px) rotate(-144deg); }
.label-60 { transform: translate(-50%, -50%) rotate(180deg) translateY(-100px) rotate(-180deg); }
.label-70 { transform: translate(-50%, -50%) rotate(216deg) translateY(-100px) rotate(-216deg); }
.label-80 { transform: translate(-50%, -50%) rotate(252deg) translateY(-100px) rotate(-252deg); }
.label-90 { transform: translate(-50%, -50%) rotate(288deg) translateY(-100px) rotate(-288deg); }
.label-100 { transform: translate(-50%, -50%) rotate(324deg) translateY(-100px) rotate(-324deg); }

.social2-fortune-wheel-center {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	width: 58px;
	height: 58px;
	place-items: center;
	border: 5px solid #fff5d8;
	border-radius: 50%;
	background: #8e2818;
	color: #f4c95d;
	transform: translate(-50%, -50%);
}

.social2-fortune-wheel-result {
	min-height: 24px;
	margin-bottom: 12px;
	font-size: 18px;
	font-weight: 700;
}

.social2-fortune-wheel-spin,
.social2-fortune-wheel-save {
	border: 0;
	border-radius: 999px;
	padding: 11px 20px;
	background: #8e2818;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.social2-fortune-wheel-spin:disabled,
.social2-fortune-wheel-save:disabled {
	cursor: wait;
	opacity: 0.55;
}

.social2-fortune-wheel-reward {
	width: 100%;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(142, 40, 24, 0.2);
	text-align: center;
}

.social2-fortune-wheel-reward[hidden] {
	display: none;
}

.social2-fortune-wheel-reward strong,
.social2-fortune-wheel-reward label {
	display: block;
}

.social2-fortune-wheel-reward strong {
	margin-bottom: 5px;
	color: #a15c16;
	font-size: 18px;
}

.social2-fortune-wheel-reward label {
	margin-bottom: 10px;
	font-size: 13px;
}

.social2-fortune-wheel-colors {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 12px;
}

.social2-fortune-wheel-reward-controls {
	min-width: 190px;
	text-align: center;
}

.fortune-color-choice {
	width: 30px;
	height: 30px;
	border: 3px solid transparent;
	border-radius: 50%;
	background: var(--choice-color);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
	cursor: pointer;
}

.fortune-color-choice.is-selected {
	border-color: #3a2114;
	transform: scale(1.15);
}

.social2-fortune-wheel-save-status {
	display: block;
	min-height: 18px;
	margin-top: 8px;
	font-size: 12px;
}

[data-theme="dark"] .social2-fortune-wheel-dialog {
	border-color: #d7a936;
	background: linear-gradient(145deg, #211b2d, #30243a);
	color: #f8fafc;
}

[data-theme="dark"] .social2-fortune-wheel-close {
	background: #f4c95d;
	color: #211b2d;
}

[data-theme="dark"] .social2-fortune-wheel-kicker,
[data-theme="dark"] .social2-fortune-wheel-reward strong {
	color: #f4c95d;
}

[data-theme="dark"] .social2-fortune-wheel-heading h2,
[data-theme="dark"] .social2-fortune-wheel-result,
[data-theme="dark"] .social2-fortune-wheel-reward label,
[data-theme="dark"] .social2-fortune-wheel-save-status {
	color: #f8fafc;
}

[data-theme="dark"] .social2-fortune-wheel-heading p {
	color: #cbd5e1;
}

[data-theme="dark"] .social2-fortune-wheel-right {
	border-left-color: rgba(244, 201, 93, 0.28);
}

[data-theme="dark"] .social2-fortune-wheel-reward {
	border-top-color: rgba(244, 201, 93, 0.28);
}

[data-theme="dark"] .social2-fortune-wheel-spin,
[data-theme="dark"] .social2-fortune-wheel-save {
	background: #f4c95d;
	color: #211b2d;
}

[data-theme="dark"] .social2-fortune-wheel-spin:disabled,
[data-theme="dark"] .social2-fortune-wheel-save:disabled {
	background: #8a753c;
	color: #e2e8f0;
}

@media (max-width: 520px) {
	.social2-fortune-wheel-dialog {
		min-height: 0;
	}

	.social2-fortune-wheel-layout {
		grid-template-columns: 1fr;
		gap: 8px;
		min-height: 0;
	}

	.social2-fortune-wheel-right {
		min-height: 0;
		padding: 12px 0 0;
		border-top: 1px solid rgba(142, 40, 24, 0.18);
		border-left: 0;
	}

	.social2-fortune-wheel-reward {
		margin-top: 12px;
	}

	.social2-fortune-wheel-colors {
		justify-content: center;
	}

	.social2-fortune-wheel-reward-controls {
		min-width: 0;
	}
}

@media (max-width: 520px) {
	[data-theme="dark"] .social2-fortune-wheel-right {
		border-top-color: rgba(244, 201, 93, 0.28);
		border-left-color: transparent;
	}
}

@keyframes starGlow {
	0%, 100% {
		transform: scale(1);
		opacity: 0.9;
		filter: drop-shadow(0 0 1px rgba(255, 215, 0, 0.4));
	}
	50% {
		transform: scale(1.15);
		opacity: 1;
		filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.9));
	}
}


/* ==========================================================================
   STILI PER LA BACHECA ADMIN DI WORDPRESS (wp-admin)
   ========================================================================== */

.social2-admin-stars-wrap {
	margin: 20px 20px 0 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.social2-admin-stars-wrap h1 {
	font-size: 24px;
	font-weight: 700;
	color: #1d2327;
	display: flex;
	align-items: center;
}

.social2-admin-grid {
	display: grid;
	grid-template-columns: 350px 1fr;
	gap: 20px;
	margin-top: 20px;
}

@media (max-width: 900px) {
	.social2-admin-grid {
		grid-template-columns: 1fr;
	}
}

.social2-admin-card {
	background: #fff;
	border: 1px solid #ccd0d4;
	border-radius: 8px;
	box-shadow: 0 1px 1px rgba(0,0,0,.04);
	padding: 20px;
	box-sizing: border-box;
}

.social2-admin-card .card-header {
	border-bottom: 1px solid #f0f0f1;
	margin-bottom: 20px;
	padding-bottom: 15px;
}

.social2-admin-card .card-header h2 {
	margin: 0 0 8px 0;
	font-size: 18px;
	font-weight: 600;
	color: #1e1e1e;
	display: flex;
	align-items: center;
	gap: 8px;
}

.social2-admin-card .card-header .description {
	margin: 0;
	color: #646970;
	font-size: 13px;
}

.social2-color-thresholds {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 14px;
	background: #f6f8fb;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}

.social2-color-thresholds span {
	padding-right: 12px;
	border-right: 1px solid #dcdcde;
}

.social2-color-thresholds span:last-child {
	border-right: 0;
}

/* Form e Inputs */
.social2-settings-card .form-group {
	margin-bottom: 18px;
}

.social2-settings-card label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: #2c3338;
}

.social2-settings-card label i {
	margin-right: 3px;
	font-size: 11px;
}

.social2-settings-card input[type="number"] {
	width: 100%;
	padding: 8px 10px;
	border-radius: 4px;
	border: 1px solid #8c8f94;
	font-size: 14px;
}

.social2-settings-card input[type="number"]:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: 2px solid transparent;
}

.social2-settings-card button[type="submit"] {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px !important;
	height: auto !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

/* Area di ricerca */
.search-bar-container {
	margin-bottom: 20px;
}

.search-input-wrapper {
	position: relative;
	width: 100%;
}

.search-input-wrapper .search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #646970;
	font-size: 14px;
}

#social2-admin-user-search {
	width: 100%;
	padding: 10px 10px 10px 36px;
	font-size: 14px;
	border: 1px solid #8c8f94;
	border-radius: 6px;
	box-sizing: border-box;
}

#social2-admin-user-search:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: 2px solid transparent;
}

/* Tabella Utenti Stelle */
.social2-stars-table th {
	font-weight: 600 !important;
	color: #2c3338;
}

.social2-stars-table td {
	vertical-align: middle !important;
}

.social2-stars-table .column-avatar {
	width: 60px;
}

.social2-stars-table .avatar-wrapper img {
	border-radius: 50%;
	border: 1px solid #dcdcde;
	display: block;
}

.social2-stars-table .user-meta-info {
	color: #646970;
	font-size: 11px;
	margin-top: 3px;
}

.social2-stars-table .likes-badge {
	background: #f0f6fc;
	color: #0969da;
	border: 1px solid #d0d7de;
	border-radius: 12px;
	padding: 3px 8px;
	font-size: 12px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.social2-stars-table .no-stars-badge {
	color: #a7aaad;
}

.social2-stars-table select {
	padding: 5px 8px;
	font-size: 13px;
	border-radius: 4px;
	border-color: #8c8f94;
	max-width: 100%;
}

.social2-stars-table select:focus {
	border-color: #2271b1;
}

.social2-stars-table button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.form-feedback-msg.success {
	color: #0f5132;
	background-color: #d1e7dd;
	border: 1px solid #badbcc;
	padding: 10px;
	border-radius: 4px;
}

.form-feedback-msg.error {
	color: #842029;
	background-color: #f8d7da;
	border: 1px solid #f5c2c7;
	padding: 10px;
	border-radius: 4px;
}

/* ==========================================================================
   ANIMAZIONI EFFETTI STELLE - STILI DINAMICI
   ========================================================================== */

/* Effetto Bagliore (Glow) */
.star-effect-glow .star-badge {
	animation: starGlowEffect 2.5s infinite ease-in-out !important;
}

@keyframes starGlowEffect {
	0%, 100% {
		filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.3));
	}
	50% {
		filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
	}
}

/* Effetto Luccichio (Shine) */
.star-effect-shine .star-badge {
	animation: starShineEffect 3s infinite ease-in-out !important;
}

@keyframes starShineEffect {
	0%, 100% {
		opacity: 0.8;
		filter: drop-shadow(0 0 1px rgba(255, 215, 0, 0.3));
	}
	50% {
		opacity: 1;
		filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
	}
}

/* Effetto Rimbalzo (Bounce) */
.star-effect-bounce .star-badge {
	animation: starBounceEffect 0.8s ease-in-out infinite !important;
}

@keyframes starBounceEffect {
	0%, 100% {
		transform: scale(1) translateY(0);
	}
	50% {
		transform: scale(1.1) translateY(-3px);
	}
}

/* Effetto Rotazione (Rotate) */
.star-effect-rotate .star-badge {
	animation: starRotateEffect 2s linear infinite !important;
}

@keyframes starRotateEffect {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Effetto Battito Cardiaco (Heartbeat) */
.star-effect-heartbeat .star-badge {
	animation: starHeartbeatEffect 1.3s ease-in-out infinite !important;
}

@keyframes starHeartbeatEffect {
	0%, 100% {
		transform: scale(1);
	}
	25% {
		transform: scale(1.2);
	}
	50% {
		transform: scale(1);
	}
	75% {
		transform: scale(1.2);
	}
}

/* Effetto Oscillazione (Wobble) - Aggiuntivo */
.star-effect-wobble .star-badge {
	animation: starWobbleEffect 0.8s ease-in-out infinite !important;
}

@keyframes starWobbleEffect {
	0%, 100% {
		transform: translateX(0) rotate(0deg);
	}
	25% {
		transform: translateX(-2px) rotate(-1deg);
	}
	50% {
		transform: translateX(2px) rotate(1deg);
	}
	75% {
		transform: translateX(-1px) rotate(-0.5deg);
	}
}

/* Effetto Pulsazione (Pulse) - Aggiuntivo */
.star-effect-pulse .star-badge {
	animation: starPulseEffect 1.5s ease-in-out infinite !important;
}

@keyframes starPulseEffect {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.15);
		opacity: 0.8;
	}
}

/* Effetto Ombra Dinamica (Shadow) */
.star-effect-shadow .star-badge-container {
	animation: shadowShiftEffect 2s ease-in-out infinite !important;
}

@keyframes shadowShiftEffect {
	0%, 100% {
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25), 0 0 0 rgba(255, 215, 0, 0);
	}
	50% {
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35), 0 0 8px rgba(255, 215, 0, 0.5);
	}
}

/* Effetto Cambio Colore (Color Change) */
.star-effect-color-change .star-badge {
	animation: starColorChangeEffect 3s ease-in-out infinite !important;
}

@keyframes starColorChangeEffect {
	0%, 100% {
		color: #ffd700 !important;
		filter: drop-shadow(0 1px 1px rgba(255, 215, 0, 0.3));
	}
	25% {
		color: #ffed4e !important;
		filter: drop-shadow(0 1px 2px rgba(255, 237, 78, 0.5));
	}
	50% {
		color: #ffaa00 !important;
		filter: drop-shadow(0 1px 2px rgba(255, 170, 0, 0.5));
	}
	75% {
		color: #ff8c00 !important;
		filter: drop-shadow(0 1px 2px rgba(255, 140, 0, 0.5));
	}
}

/* Feedback messages per effetti */
.effects-feedback-msg.success {
	color: #0f5132;
	background-color: #d1e7dd;
	border: 1px solid #badbcc;
	padding: 10px;
	border-radius: 4px;
}

.effects-feedback-msg.error {
	color: #842029;
	background-color: #f8d7da;
	border: 1px solid #f5c2c7;
	padding: 10px;
	border-radius: 4px;
}