/* Fallback for Bootstrap < 5.3 subtle badges */
	.badge.bg-success-subtle {
		background-color: #d1e7dd;
		color: #0a3622;
	}

	.badge.bg-secondary-subtle {
		background-color: #e2e3e5;
		/* Example color */
		color: #41464b;
		/* Example color */
	}

	.fl-card {
		border: 1px solid rgba(0, 0, 0, 0.08);
		/* Very subtle border */
		-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		background: #ffffff;
	}

	.fl-card:hover {
		-webkit-transform: translateY(-4px) scale(1.005);
		        transform: translateY(-4px) scale(1.005);
		-webkit-box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
		        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
		/* Soft, deep shadow */
		border-color: transparent;
	}

	/* Typography */
	.fl-title {
		font-weight: 700;
		letter-spacing: -0.02em;
		/* Tight tracking like SF Pro */
		color: #1d1d1f;
	}

	/* Buttons */
	.btn-fl-primary {
		background-color: #0071e3;
		/* Apple Blue */
		color: white;
		border-radius: 999px;
		/* Full Pill */
		font-weight: 500;
		font-size: 0.9rem;
		padding: 0.5rem 1.5rem;
		-webkit-transition: background-color 0.2s;
		transition: background-color 0.2s;
	}

	.btn-fl-primary:hover {
		background-color: #0077ED;
		color: white;
	}

	.btn-fl-secondary {
		color: #86868b;
		font-weight: 500;
		font-size: 0.9rem;
		-webkit-transition: color 0.2s;
		transition: color 0.2s;
	}

	.btn-fl-secondary:hover {
		color: #ef4444;
		/* Apple Red for destructive actions */
	}

	/* Badges */
	.badge-apple {
		border-radius: 6px;
		font-weight: 600;
		text-transform: uppercase;
		font-size: 0.7rem;
		letter-spacing: 0.05em;
	}


/* --- Reusable FanLinks Modal Styles --- */
.fl-modal .modal-content {
    border: none;
    border-radius: 24px;
    -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    background: #ffffff;
}

.fl-modal .modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.5rem 2rem;
}

.fl-modal .modal-footer {
    border-top: none;
    padding: 1.5rem 2rem 2rem;
}

.fl-modal .modal-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d1d1f;
}

/* Modal-Specific Form Controls */
.fl-modal .form-control {
    border-radius: 12px;
    border: 1px solid #d2d2d7;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
}

.fl-modal .form-control:focus {
    border-color: #0071e3;
    -webkit-box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
            box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
}

.fl-modal .input-group-text {
    background-color: #f5f5f7;
    border-color: #d2d2d7;
    border-radius: 12px 0 0 12px;
    color: #86868b;
    font-size: 0.85rem;
}

.fl-modal .form-control[readonly] {
    background-color: #f5f5f7;
}



	/* fl-Style Modal */
	#modalCreatePage .modal-content {
		border: none;
		border-radius: 24px;
		/* Matches the rounded-4 cards */
		-webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
		        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
		background: #ffffff;
	}

	#modalCreatePage .modal-header {
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		padding: 1.5rem 2rem;
	}

	#modalCreatePage .modal-footer {
		border-top: none;
		/* Cleaner footer */
		padding: 1.5rem 2rem 2rem;
	}

	#modalCreatePage .modal-title {
		font-weight: 700;
		letter-spacing: -0.02em;
		color: #1d1d1f;
	}

	/* Styled Form Controls */
	#modalCreatePage .form-control {
		border-radius: 12px;
		border: 1px solid #d2d2d7;
		padding: 0.75rem 1rem;
		font-size: 0.95rem;
	}

	#modalCreatePage .form-control:focus {
		border-color: #0071e3;
		-webkit-box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
		        box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
	}

	#modalCreatePage .input-group-text {
		background-color: #f5f5f7;
		border-color: #d2d2d7;
		border-radius: 12px 0 0 12px;
		color: #86868b;
		font-size: 0.85rem;
	}

	#modalCreatePage .form-control[readonly] {
		background-color: #f5f5f7;
	}

	.fl-editor-shell {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		width: 100%;
		/* Adjust 80px based on your actual navbar height */
		height: calc(100vh - 80px);
		overflow: hidden;
		background-color: #f4f5f7;
		border-top: 1px solid #e2e8f0;
	}

	/* --- 2. LEFT PANEL (WORKSPACE) --- */
	.fl-workspace {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 60%;
		        flex: 0 0 60%;
		max-width: 60%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		background: #ffffff;
		border-right: 1px solid #e2e8f0;
		position: relative;
	}

	/* Tab Header */
	.fl-tabs-header {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; /* Changed from default (left) to center */
        gap: 30px;
        padding: 0 30px;
        height: 65px;
        border-bottom: 1px solid #e2e8f0;
        background: #fff;
    }

	.fl-tab-btn {
		position: relative;
		background: none;
		border: none;
		font-size: 15px;
		font-weight: 500;
		color: #64748b;
		cursor: pointer;
		padding: 20px 0;
		-webkit-transition: color 0.2s;
		transition: color 0.2s;
		outline: none;
	}

	.fl-tab-btn:hover {
		color: #0f172a;
	}

	.fl-tab-btn.active {
		color: #2563eb;
		font-weight: 600;
	}

	.fl-tab-btn.active::after {
		content: '';
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #2563eb;
		border-radius: 3px 3px 0 0;
	}

	/* Tab Content */
	.fl-tab-container {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        overflow-y: auto; /* Scroll ONLY the tab content */
        padding: 30px;
        scroll-behavior: smooth;
        position: relative; /* For FAB positioning */
    }

	/* Scrollbar Styling */
	.fl-tab-container::-webkit-scrollbar {
		width: 8px;
	}

	.fl-tab-container::-webkit-scrollbar-track {
		background: transparent;
	}

	.fl-tab-container::-webkit-scrollbar-thumb {
		background: #cbd5e1;
		border-radius: 4px;
	}

	/* CRITICAL: Visibility Logic */
	.fl-tab-pane {
		display: none;
		-webkit-animation: fadeIn 0.3s ease;
		        animation: fadeIn 0.3s ease;
	}

	.fl-tab-pane.show {
		display: block;
	}

	@-webkit-keyframes fadeIn {
		from {
			opacity: 0;
			-webkit-transform: translateY(5px);
			        transform: translateY(5px);
		}

		to {
			opacity: 1;
			-webkit-transform: translateY(0);
			        transform: translateY(0);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			-webkit-transform: translateY(5px);
			        transform: translateY(5px);
		}

		to {
			opacity: 1;
			-webkit-transform: translateY(0);
			        transform: translateY(0);
		}
	}

	
	/* --- 3. RIGHT PANEL (PREVIEW) --- */
	.fl-preview-sidebar {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 40%;
		        flex: 0 0 40%;
		max-width: 40%;
		background-color: #f1f5f9;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		position: relative;
		background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
		background-size: 20px 20px;
	}

	.mobile-mockup {
		width: 340px;
		height: 75vh;
		max-height: 800px;
		background: #1e293b;
		border-radius: 40px;
		-webkit-box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.25);
		        box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.25);
		border: 12px solid #1e293b;
		overflow: hidden;
		position: relative;
		z-index: 10;
	}

	/* Phone Screen Internals */
	.phone-screen {
		position: relative;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		scrollbar-width: none;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	    -ms-flex-direction: column;
    	        flex-direction: column;
	}

	
	.phone-screen::-webkit-scrollbar {
		display: none;
	}

	/* The Wallpaper Layer */
	.phone-bg-layer {
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		z-index: 0;
		overflow: visible;
	}

	.phone-bg-layer::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 75vh; 
		max-height: 800px; 
		background-color: inherit;
		z-index: -2; /* Sit behind the wallpaper image */
	}

	#live_phone_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		/* Ensure the image fills the viewport height of the phone mockup */
		height: 75vh; 
		max-height: 800px;
		-o-object-fit: cover;
		   object-fit: cover;
		display: block;
		z-index: -1;
	}

	#live_phone_header {
		width: 200px;
		max-height: 200px;
		-o-object-fit: contain;
		   object-fit: contain;
		display: block;
		margin: 0 auto; /* Centers it if needed */
		-webkit-filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
		        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
	}

	/* The Content Layer */
	.phone-content-layer {
		position: relative;
		z-index: 1;
		padding: 20px 20px 80px 20px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		min-height: 100%;
	}


	/* Increase icon size and clickable area */
	.social-container i {
		font-size: 1.8rem;
		-webkit-transition: -webkit-transform 0.2s ease;
		transition: -webkit-transform 0.2s ease;
		transition: transform 0.2s ease;
		transition: transform 0.2s ease, -webkit-transform 0.2s ease;
	}

	/* Add breathing room to the title to prevent overlap */
	.preview-page-title {
		line-height: 1.4rem;
		margin-bottom: 1.25rem !important; /* Increased from mb-1 */
	}


	/* Live Link Buttons */
	.live-btn {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		padding: 14px 16px;
		margin-bottom: 12px;
		text-decoration: none;
		-webkit-transition: -webkit-transform 0.15s ease;
		transition: -webkit-transform 0.15s ease;
		transition: transform 0.15s ease;
		transition: transform 0.15s ease, -webkit-transform 0.15s ease;
		border-style: solid;
		border-width: 1px;
	}

	.live-btn:active {
		-webkit-transform: scale(0.98);
		        transform: scale(0.98);
	}

	.live-btn-icon {
		font-size: 22px;
		margin-right: 12px;
		text-align: center;
	}

	.live-btn-text {
		font-weight: 600;
		font-size: 1.2rem;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.live-child-container {
		width: 90%;
		margin-top: -8px;
		margin-bottom: 12px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 8px;
	}

	.live-child-btn {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		padding: 10px 14px;
		/* background: rgba(255, 255, 255, 0.7); */
		border-radius: 8px;
		text-decoration: none;
		font-size: 13px;
		color: #333;
	}


	/* Strong Shadow for Header Image (Phone & Future Public Page) */
	.shadow-header-img {
		-webkit-filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3));
		        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3));
	}

	/* Map Background for Schedule */
	.schedule-map-bg {
		background-image: url('/assets/img/fanlinks_continents.png');
		background-size: cover;
		background-position: center;
		position: relative;
		/* Ensure the overlay stays within rounded corners */
		overflow: hidden;
	}

	/* White overlay so text pops against the map */
	.schedule-map-bg::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.85);
		z-index: 0;
	}

	/* Content wrapper to sit above the overlay */
	.schedule-map-content {
		position: relative;
		z-index: 1;
	}

	/* Platform Brand Colors */
	.brand-spotify {
		color: #1DB954 !important;
	}

	.brand-apple_music {
		color: #FA243C !important;
	}

	.brand-youtube,
	.brand-youtube_music {
		color: #FF0000 !important;
	}

	.brand-instagram {
		color: #E1306C !important;
	}

	.brand-tiktok {
		color: #000000 !important;
	}

	.brand-facebook {
		color: #1877F2 !important;
	}

	.brand-twitter {
		color: #1DA1F2 !important;
	}

	.brand-soundcloud {
		color: #FF5500 !important;
	}

	.brand-twitch {
		color: #9146FF !important;
	}

	.brand-linkedin {
		color: #0077B5 !important;
	}

	.brand-deezer {
		color: #a238ff !important;
	}

	.brand-tidal {
		color: #000000 !important;
	}

	.brand-bandcamp {
		color: #0CACD7 !important;
	}

	.brand-email {
		color: #fcbf49 !important;
	}

	.brand-amazon {
		color: #FF9900 !important;
	}

	.brand-pandora {
		color: #005483 !important;
	}

	/* Icon contrast backgrounds - adaptive based on link background */
	.live-btn-icon {
		/* Adaptive background (initially transparent) */
		background-color: transparent;
		-webkit-transition: background-color 0.2s ease;
		transition: background-color 0.2s ease;
		padding: 0.175em;  /* space around icon */
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

	/* Icon shape matching - classes applied directly to icon containers */
	.live-btn-icon.shape-pill {
		border-radius: 50%;
		width: 1.4em;   /* 110% of icon font-size */
		height: 1.4em;  /* Equal to width for perfect circle */
	}

	.live-btn-icon.shape-rounded {
		border-radius: 8px;
		min-width: 1.2em;  /* Minimum 10% larger */
		min-height: 1.2em;
	}

	.live-btn-icon.shape-square {
		border-radius: 4px;
		min-width: 1.2em;  /* Minimum 10% larger */
		min-height: 1.2em;
	}

	/* Apply white background when contrast is insufficient */
	.live-btn-icon[data-contrast-bg="white"] {
		background-color: rgba(255, 255, 255, 0.95);
	}

	/* Apply black background when contrast is insufficient */
	.live-btn-icon[data-contrast-bg="black"] {
		background-color: rgba(0, 0, 0, 0.95);
	}


/* --- iOS / Apple Style Toggles (Compact) --- */

.form-switch {
    padding-left: 2.75em; /* Space for the switch */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 1.4em;
}

.form-switch .form-check-input {
    width: 2.25em;  /* Smaller Width */
    height: 1.35em; /* Smaller Height */
    margin-left: -2.75em; /* Offset to pull it back */
    background-color: #e9e9ea;
    border-color: #e9e9ea;
    border-radius: 50rem;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    background-position: left center;
}

.form-switch .form-check-input:checked {
    background-color: #34c759;
    border-color: #34c759;
    background-position: right center;
}

.form-switch .form-check-input:focus {
    border-color: #34c759;
    -webkit-box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.15);
            box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.15);
}

/* Text Label Styling */
.fl-switch-label {
    margin-left: 0.4rem;
    cursor: pointer;
    font-size: 0.75rem; /* Small text */
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    min-width: 45px; /* Prevents jumping when text changes length */
}

/* --- Save Button Dirty State Styling --- */

/* Dirty state button styling */
.save-btn-dirty {
	background-color: #ff9500 !important; /* Orange for unsaved changes */
	border-color: #ff9500 !important;
	-webkit-animation: pulse-subtle 2s ease-in-out infinite;
	        animation: pulse-subtle 2s ease-in-out infinite;
}

/* Badge on button */
.save-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	background: #ff3b30;
	color: white;
	border-radius: 12px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Floating Action Button */
.save-fab {
	position: absolute;
	bottom: 20px;
	right: calc(40% + 20px);
	z-index: 100;
	-webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	-webkit-animation: slideInUp 0.3s ease-out;
	        animation: slideInUp 0.3s ease-out;
}

.save-fab:hover {
	-webkit-transform: translateY(-2px);
	        transform: translateY(-2px);
	-webkit-box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
	        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

/* Override animation for dirty FAB - higher specificity */
.save-fab.save-btn-dirty {
	-webkit-animation: pulse-subtle 2s ease-in-out infinite;
	        animation: pulse-subtle 2s ease-in-out infinite;
}

/* Animations */
@-webkit-keyframes pulse-subtle {
	0%, 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.4); box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.4); }
	50% { -webkit-box-shadow: 0 0 0 8px rgba(255, 149, 0, 0); box-shadow: 0 0 0 8px rgba(255, 149, 0, 0); }
}

@keyframes pulse-subtle {
	0%, 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.4); box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.4); }
	50% { -webkit-box-shadow: 0 0 0 8px rgba(255, 149, 0, 0); box-shadow: 0 0 0 8px rgba(255, 149, 0, 0); }
}

@-webkit-keyframes slideInUp {
	from {
		-webkit-transform: translateY(60px);
		        transform: translateY(60px);
		opacity: 0;
	}
	to {
		-webkit-transform: translateY(0);
		        transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideInUp {
	from {
		-webkit-transform: translateY(60px);
		        transform: translateY(60px);
		opacity: 0;
	}
	to {
		-webkit-transform: translateY(0);
		        transform: translateY(0);
		opacity: 1;
	}
}