/**
 * NEF Save Event Button Styles
 *
 * @package NEF_Platform_Core
 * @since 1.0.0
 */

/* ==========================================================================
   1. Button Base Styles
   ========================================================================== */

.nef-save-event-btn {
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	cursor: pointer;
	padding: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	width: 44px;
	height: 44px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nef-save-event-btn:hover {
	transform: scale(1.1);
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nef-save-event-btn:active {
	transform: scale(0.95);
}

.nef-save-event-btn:focus {
	outline: 2px solid #7c3aed;
	outline-offset: 2px;
}

.nef-save-event-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ==========================================================================
   2. Heart Icon Styles
   ========================================================================== */

.nef-heart-icon {
	width: 24px;
	height: 24px;
	transition: transform 0.2s ease;
	display: block;
}

/* Outlined heart (not saved) */
.nef-save-event-btn:not(.saved) .nef-heart-icon {
	fill: none;
	stroke: #374151;
	stroke-width: 2;
}

.nef-save-event-btn:not(.saved):hover .nef-heart-icon {
	stroke: #111827;
}

/* Filled heart (saved) */
.nef-save-event-btn.saved .nef-heart-icon {
	fill: #ef4444;
	stroke: none;
}

.nef-save-event-btn.saved:hover .nef-heart-icon {
	fill: #dc2626;
}

/* Pop animation */
.nef-save-event-btn.nef-heart-pop .nef-heart-icon {
	animation: heartPop 0.3s ease;
}

@keyframes heartPop {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

/* ==========================================================================
   3. Text Label (Optional - can be hidden)
   ========================================================================== */

.nef-save-text {
	display: none; /* Hidden by default, can be shown with custom CSS */
	margin-left: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #374151;
	white-space: nowrap;
}

/* Show text variant */
.nef-save-event-btn.nef-show-text {
	border-radius: 24px;
	width: auto;
	padding: 10px 16px;
}

.nef-save-event-btn.nef-show-text .nef-save-text {
	display: inline;
}

/* ==========================================================================
   4. Positioning Utilities
   ========================================================================== */

/* Absolute positioning (top-right) */
.nef-save-event-absolute {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 10;
}

/* Inline positioning */
.nef-save-event-inline {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}

/* ==========================================================================
   5. Loading State
   ========================================================================== */

.nef-save-event-btn.nef-saving {
	pointer-events: none;
}

.nef-save-event-btn.nef-saving .nef-heart-icon {
	animation: pulse 1s ease infinite;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* ==========================================================================
   6. Feedback Message
   ========================================================================== */

.nef-save-feedback {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	display: none;
}

/* Success message */
.nef-feedback-success {
	background: #10b981;
	color: #ffffff;
}

/* Error message */
.nef-feedback-error {
	background: #ef4444;
	color: #ffffff;
}

/* Arrow pointer (optional) */
.nef-save-feedback::before {
	content: '';
	position: absolute;
	bottom: 100%;
	right: 12px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
}

.nef-feedback-success::before {
	border-bottom: 6px solid #10b981;
}

.nef-feedback-error::before {
	border-bottom: 6px solid #ef4444;
}

/* ==========================================================================
   7. Login Required State (Guest Users)
   ========================================================================== */

.nef-save-login-required {
	/* Same styles as regular button, login modal triggered via JS */
}

.nef-save-login-required:hover {
	border-color: #7c3aed;
}

.nef-save-login-required .nef-heart-icon {
	stroke: #6b7280;
}

.nef-save-login-required:hover .nef-heart-icon {
	stroke: #7c3aed;
}

/* ==========================================================================
   8. Responsive Design
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
	.nef-save-event-absolute {
		top: 12px;
		right: 12px;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.nef-save-event-btn {
		width: 48px;
		height: 48px;
		padding: 12px;
	}

	.nef-heart-icon {
		width: 26px;
		height: 26px;
	}

	.nef-save-event-absolute {
		top: 10px;
		right: 10px;
	}

	/* Feedback message adjustments */
	.nef-save-feedback {
		font-size: 12px;
		padding: 6px 10px;
	}
}

/* Small mobile */
@media (max-width: 480px) {
	.nef-save-event-btn.nef-show-text {
		padding: 8px 12px;
	}

	.nef-save-event-btn.nef-show-text .nef-save-text {
		font-size: 13px;
	}
}

/* ==========================================================================
   9. Dark Background Variant
   ========================================================================== */

.nef-save-event-dark {
	background: rgba(0, 0, 0, 0.5);
	border-color: rgba(255, 255, 255, 0.2);
}

.nef-save-event-dark:hover {
	background: rgba(0, 0, 0, 0.7);
	border-color: rgba(255, 255, 255, 0.3);
}

.nef-save-event-dark:not(.saved) .nef-heart-icon {
	stroke: #ffffff;
}

.nef-save-event-dark .nef-save-text {
	color: #ffffff;
}

/* ==========================================================================
   10. Accessibility
   ========================================================================== */

/* Focus visible (keyboard navigation) */
.nef-save-event-btn:focus-visible {
	outline: 3px solid #7c3aed;
	outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.nef-save-event-btn,
	.nef-heart-icon,
	.nef-save-feedback {
		transition: none !important;
		animation: none !important;
	}

	.nef-save-event-btn:hover {
		transform: none;
	}
}

/* High contrast mode */
@media (prefers-contrast: high) {
	.nef-save-event-btn {
		border-width: 2px;
	}

	.nef-save-event-btn:not(.saved) .nef-heart-icon {
		stroke-width: 3;
	}
}

/* ==========================================================================
   11. Integration with Elementor
   ========================================================================== */

/* When used in Elementor widgets */
.elementor-widget .nef-save-event-btn {
	position: relative;
}

/* When used in loop templates */
.elementor-loop-item .nef-save-event-btn {
	/* Can be positioned absolutely within loop item container */
}

/* ==========================================================================
   12. Print Styles
   ========================================================================== */

@media print {
	.nef-save-event-btn,
	.nef-save-feedback {
		display: none;
	}
}