/**
 * PlugeTune admin styles.
 *
 * @package PlugeTune
 */

/* Modern Redesign - PlugeTune Settings */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../vendor/inter/webfonts/Inter_24pt-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../vendor/inter/webfonts/Inter_24pt-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../vendor/inter/webfonts/Inter_24pt-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../vendor/inter/webfonts/Inter_24pt-Bold.woff2') format('woff2');
}

* {
	border-radius: 5px !important;
}

.plugetune-wrap {
	margin: 20px 20px 0 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Header */
.plugetune-header {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	padding: 20px 30px;
	margin-bottom: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: white;
	box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.plugetune-header-left {
	display: flex;
	align-items: center;
	gap: 15px;
}

.plugetune-header-left i {
	font-size: 32px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.plugetune-header-left h1 {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	color: white;
}

.plugetune-version {
	background: rgba(255,255,255,0.2);
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
}

.system-info {
	display: flex;
	gap: 20px;
	font-size: 12px;
	background: rgba(255,255,255,0.15);
	padding: 8px 16px;
}

.system-info i {
	margin-right: 6px;
}

/* Tabs */
.plugetune-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 25px;
	flex-wrap: wrap;
	background: #fff;
	padding: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.plugetune-tab {
	padding: 10px 20px;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: all 0.3s;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #4a5568;
}

.plugetune-tab i {
	font-size: 16px;
}

.plugetune-tab:hover {
	background: #f3f4f6;
	color: #3b82f6;
}

.plugetune-tab.active {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: white;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Tab Content */
.plugetune-tab-content {
	display: none;
	animation: fadeIn 0.3s ease;
}

.plugetune-tab-content.active {
	display: block;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Settings Grid - 2 Column */
.settings-grid-2col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
	margin-bottom: 25px;
}

/* Settings Card */
.settings-card {
	background: white;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	overflow: hidden;
	margin-bottom: 25px;
}

.settings-card-header {
	background: #fafbfc;
	padding: 18px 20px;
	border-bottom: 1px solid #e9ecef;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.settings-card-header i {
	font-size: 20px;
	color: #3b82f6;
}

.settings-card-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #2d3748;
	flex: 1;
}

.pro-badge {
	background: #ff8c00;
	color: white;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
}

.tab-badge {
	background: #ff8c00;
	color: white;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 600;
	margin-left: 8px;
}

.pro-badge-small {
	background: #ff8c00;
	color: white;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 600;
	margin-left: 8px;
}

.settings-card-body {
	padding: 20px;
}

.setting-field {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f0f0f0;
}

.setting-field:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.setting-field > label {
	display: block;
	font-weight: 600;
	color: #2d3748;
	margin-bottom: 10px;
	font-size: 14px;
}

.preview-setting-field > label {
	display: block;
	font-weight: 600;
	color: #2d3748;
	margin-bottom: 10px;
	font-size: 14px;
}

.field-wrapper {
	margin-left: 0;
}

.description {
	margin-top: 8px;
	font-size: 12px;
	color: #718096;
}

.description.warning {
	color: #e53e3e;
}

.sub-field {
	margin-left: 20px;
	padding-left: 20px;
	border-left: 2px solid #e2e8f0;
}

/* Toggle Switch */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 52px;
	height: 28px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #cbd5e0;
	transition: 0.3s;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: 0.3s;
}

input:checked + .toggle-slider {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

input:checked + .toggle-slider:before {
	transform: translateX(24px);
}

/* Modern Inputs */
.modern-input {
	padding: 10px 14px;
	border: 1px solid #e2e8f0;
	font-size: 14px;
	transition: all 0.3s;
	background: white;
	width: 100%;
	max-width: 300px;
}

.modern-input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modern-select {
	padding: 10px 14px;
	border: 1px solid #e2e8f0;
	font-size: 14px;
	background: white;
	min-width: 200px;
	cursor: pointer;
}

.modern-select:focus {
	outline: none;
	border-color: #3b82f6;
}

.modern-textarea {
	padding: 10px 14px;
	border: 1px solid #e2e8f0;
	font-size: 14px;
	width: 100%;
	max-width: 500px;
	font-family: monospace;
}

.modern-textarea:focus {
	outline: none;
	border-color: #3b82f6;
}

.modern-range {
	width: 200px;
	cursor: pointer;
}

.modern-range + output {
	background: #f7fafc;
	padding: 4px 10px;
	font-size: 13px;
	font-weight: 500;
	color: #3b82f6;
	margin-left: 10px;
}

.modern-file {
	padding: 8px;
	border: 1px solid #e2e8f0;
	background: white;
}

.field-suffix {
	color: #718096;
	font-size: 13px;
	margin-left: 8px;
}

/* Image uploader */
.image-uploader {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.image-preview {
	position: relative;
	display: inline-block;
}

.image-preview img {
	max-width: 100px;
	max-height: 100px;
	border: 1px solid #e2e8f0;
}

.remove-image {
	position: absolute;
	top: -8px;
	right: -8px;
	background: #e53e3e;
	color: white;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 12px;
	transition: all 0.2s;
}

.remove-image:hover {
	background: #c53030;
	transform: scale(1.1);
}

/* Buttons - Blue Gradient */
.button,
.button-primary,
.button-secondary {
	border-radius: 5px !important;
	font-size: 13px !important;
	transition: all 0.3s !important;
}

.button-primary {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.button-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.button-secondary {
	background: #f3f4f6 !important;
	border: 1px solid #d1d5db !important;
	color: #374151 !important;
}

.button-secondary:hover {
	background: #e5e7eb !important;
}

.small-btn {
	font-size: 12px !important;
	margin-left: 10px;
}

/* Prevent flicker on page load */
.plugetune-tab-content {
	display: none;
}
.plugetune-tab-content.active {
	display: block;
}

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 24px;
}
.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .3s;
	border-radius: 24px;
}
.toggle-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: .3s;
	border-radius: 50%;
}
input:checked + .toggle-slider {
	background-color: #22c55e;
}
input:checked + .toggle-slider:before {
	transform: translateX(26px);
}

/* Progress Bar */
.progress-bar {
	background: #e2e8f0;
	overflow: hidden;
	height: 8px;
}

.progress-fill {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	width: 0%;
	height: 100%;
	transition: width 0.3s ease;
}

.progress-bar {
	position: relative;
	overflow: hidden;
}
.progress-percent {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-shadow: 0 0 2px rgba(0,0,0,0.5);
	z-index: 1;
}
.progress-fill {
	transition: width 0.3s ease;
}
#start-playlist-import:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.import-status {
	margin-top: 10px;
	font-size: 13px;
	color: #4a5568;
}

/* Actions */
.plugetune-actions {
	display: flex;
	gap: 15px;
	margin-top: 20px;
	padding: 20px;
	background: white;
	position: sticky;
	bottom: 20px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

#save-settings-btn {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
	border: none !important;
	padding: 5px 25px !important;
	font-size: 14px !important;
}

.button.button-secondary.reset-btn.plugetune-btn-reset{
	padding: 6px 25px !important;
}

.reset-btn {
	background: #fff !important;
	border: 1px solid #e2e8f0 !important;
	color: #4a5568 !important;
}

.reset-btn:hover {
	background: #f8f9fa !important;
}

/* Notices */
.notice {
	border-left-width: 4px !important;
}

.notice i {
	margin-right: 8px;
}

/* License Panel */
.license-panel {
	padding: 10px 0;
}

.license-status-icon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	margin-bottom: 20px;
	font-weight: 600;
}

.license-status-icon.active {
	background: #dcfce7;
	color: #166534;
}

.license-status-icon.inactive {
	background: #fee2e2;
	color: #991b1b;
}

.license-details-table {
	width: 100%;
	border-collapse: collapse;
}

.license-details-table tr {
	border-bottom: 1px solid #e5e7eb;
}

.license-details-table th,
.license-details-table td {
	padding: 10px;
	text-align: left;
}

.license-details-table th {
	width: 30%;
	font-weight: 600;
	color: #374151;
}

.license-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
}

.license-badge.pro,
.license-badge.premium {
	background: #ff8c00;
	color: white;
}

/* AI Provider Fields */
.ai-provider-fields {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #e2e8f0;
}

/* Locked Tab Badge */
.tab-badge-locked {
	background: #6b7280;
	color: white;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 600;
	margin-left: 8px;
	border-radius: 5px;
}

/* Upgrade Notice */

.fas.fa-crown.plugetune-menu-crown {
	font-size: 12px !important;
}

.upgrade-notice {
	text-align: center;
	padding: 40px;
	background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
	border: 2px solid #ff8c00;
	border-radius: 10px;
	margin: 20px 0;
}

.upgrade-notice i {
	font-size: 15px;
	color: #ff8c00;
	margin-bottom: 15px;
	display: inline-block;
}

.upgrade-notice h2 {
	color: #333;
	margin-bottom: 10px;
}

.upgrade-notice p {
	color: #666;
	margin-bottom: 20px;
}

/* Upgrade Message in Tools Tab */
.upgrade-message {
	background: #fef3c7;
	padding: 15px;
	border-radius: 5px;
	margin: 15px 0;
	text-align: center;
}

.upgrade-message i {
	color: #d97706;
	margin-right: 8px;
}

.upgrade-message strong {
	color: #92400e;
}

/* Responsive */
@media (max-width: 1200px) {
	.settings-grid-2col {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.plugetune-header {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}

	.plugetune-header-left {
		flex-direction: column;
	}

	.system-info {
		flex-wrap: wrap;
		justify-content: center;
	}

	.plugetune-tabs {
		overflow-x: auto;
		white-space: nowrap;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.setting-field {
		flex-direction: column;
	}

	.sub-field {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
	}
}

/* ==================== MODAL (generic) ==================== */
.plugetune-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	z-index: 999999;
	backdrop-filter: blur(4px);
}

.plugetune-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	z-index: 1000000;
	width: 750px;
	max-width: 95%;
	max-height: 85vh;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.plugetune-modal-header {
	background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
	padding: 18px 25px;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
}

.plugetune-modal-header h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: #1a202c;
}

.plugetune-modal-header h2 i {
	margin-right: 10px;
}

.plugetune-modal-close {
	cursor: pointer;
	font-size: 28px;
	font-weight: 300;
	color: #718096;
	background: none;
	border: none;
	padding: 0 10px;
	line-height: 1;
	transition: color 0.2s;
}

.plugetune-modal-close:hover {
	color: #dc2626;
}

.plugetune-modal-body {
	padding: 20px 25px;
	overflow-y: auto;
	flex: 1;
	max-height: 60vh;
}

.plugetune-modal-body::-webkit-scrollbar {
	width: 6px;
}

.plugetune-modal-body::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}

.plugetune-modal-body::-webkit-scrollbar-thumb {
	background: #c1c7cd;
	border-radius: 3px;
}

.plugetune-modal-body::-webkit-scrollbar-thumb:hover {
	background: #a0a7ae;
}

.plugetune-modal-footer {
	padding: 15px 25px;
	border-top: 1px solid #e2e8f0;
	background: #f8fafc;
	text-align: right;
	flex-shrink: 0;
}

/* Responsive Modal */
@media (max-width: 768px) {
	.plugetune-modal {
		width: 98%;
		max-height: 90vh;
		top: 5%;
		left: 1%;
		transform: none;
		border-radius: 10px;
	}

	.plugetune-modal-body {
		padding: 15px;
		max-height: 50vh;
	}

	.plugetune-modal-header {
		padding: 14px 18px;
	}

	.plugetune-modal-header h2 {
		font-size: 17px;
	}
}

@media (max-width: 480px) {
	.plugetune-modal-body {
		padding: 10px;
		max-height: 40vh;
	}
}

/* ==================== SINGLE VIDEO FIELDS ==================== */

/* Container */
#single-video-fields-container {
	width: 100%;
}

/* All wrappers - No border, no padding */
.single-video-field-wrapper {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	align-items: center;
	padding: 0px;
	transition: all 0.2s ease;
}

/* Top Wrapper - No bottom border */
.single-video-field-wrapper.top-wrapper {
	border-bottom: none;
	padding-bottom: 0px;
	margin-bottom: 10px;
}

.single-video-field-wrapper.top-wrapper .single-video-input {
	border-color: #3b82f6;
}

.single-video-field-wrapper.top-wrapper .single-video-input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Input fields */
.single-video-input {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 5px;
	font-size: 14px;
	transition: all 0.2s ease;
	background: white;
}

.single-video-input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* All Buttons - Consistent width */
.single-video-field-wrapper .button {
	height: 36px !important;
	line-height: 36px !important;
	font-size: 13px !important;
	border-radius: 5px !important;
	flex-shrink: 0;
	transition: all 0.2s ease !important;
	padding: 0px 12px !important;
	min-width: 140px !important;
	text-align: center !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
}

/* Remove Single Video Button - Red */
.remove-single-video-btn {
	background: #dc2626 !important;
	color: white !important;
	border: none !important;
	cursor: pointer !important;
}

.remove-single-video-btn:hover {
	background: #b91c1c !important;
}

/* Add Single Video Button - Blue */
#add-single-video-btn {
	background: #2a65e5 !important;
	color: white !important;
	border: none !important;
	cursor: pointer !important;
}

#add-single-video-btn:hover {
	background: #1d4ed8 !important;
}

/* Browse Videos Button - Green */
.browse-videos-btn {
	background: #22c55e !important;
	color: white !important;
	border: none !important;
	font-weight: 500 !important;
	cursor: pointer !important;
}

.browse-videos-btn:hover {
	background: #16a34a !important;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
	.single-video-field-wrapper {
		flex-wrap: wrap;
		gap: 8px !important;
		padding: 0px !important;
	}

	.single-video-field-wrapper .single-video-input {
		min-width: 100%;
		order: 1;
		flex: 1 1 100% !important;
	}

	.single-video-field-wrapper .remove-single-video-btn,
	.single-video-field-wrapper .browse-videos-btn,
	.single-video-field-wrapper #add-single-video-btn {
		order: 2;
		flex: 1;
		text-align: center;
		min-width: 80px !important;
		padding: 0px 10px !important;
	}
}

/* Validation Error State */
.validation-error {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
	animation: shake 0.5s ease-in-out;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-10px); }
	75% { transform: translateX(10px); }
}

/* Notification message styles */
#import-notification-message {
	margin-top: 15px;
	padding: 12px 16px;
	border-radius: 5px;
	display: none;
	font-size: 14px;
}

#import-notification-message.notice-success {
	background: #d0f9e4 !important;
	border: 1px solid #86efac;
	color: #166534;
	display: block;
}

#import-notification-message.notice-error {
	background: #fee2e2;
	border: 1px solid #fca5a5;
	color: #991b1b;
	display: block;
}

#import-notification-message.notice-info {
	background: #dbeafe;
	border: 1px solid #93c5fd;
	color: #1e40af;
	display: block;
}

#import-notification-message a {
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
}

#import-notification-message i {
	margin-right: 8px;
}

/* ============================================================ */
/* UNIVERSAL HEADER - FORCE OVERRIDE                             */
/* Higher specificity than the global * reset                    */
/* ============================================================ */

div.plugetune-page-header {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
	border-radius: 8px !important;
	padding: 16px 24px !important;
	margin-bottom: 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	color: #ffffff !important;
	box-shadow: 0 3px 12px rgba(59, 130, 246, 0.18) !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
	min-height: 68px !important;
	box-sizing: border-box !important;
}

div.plugetune-page-header div.plugetune-page-header-left {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	min-width: 0 !important;
	flex: 1 !important;
}

div.plugetune-page-header div.plugetune-page-header-icon {
	width: 42px !important;
	height: 42px !important;
	background: rgba(255, 255, 255, 0.22) !important;
	border-radius: 10px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 18px !important;
	color: #ffffff !important;
	flex-shrink: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

div.plugetune-page-header div.plugetune-page-header-text {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	min-width: 0 !important;
}

div.plugetune-page-header h1.plugetune-page-header-title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	line-height: 1.25 !important;
	letter-spacing: -0.1px !important;
	border: none !important;
}

div.plugetune-page-header p.plugetune-page-header-desc {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12.5px !important;
	color: rgba(255, 255, 255, 0.88) !important;
	line-height: 1.4 !important;
	max-width: 680px !important;
}

div.plugetune-page-header span.plugetune-page-header-version {
	background: rgba(255, 255, 255, 0.2) !important;
	padding: 3px 10px !important;
	border-radius: 12px !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #ffffff !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
}

div.plugetune-page-header div.plugetune-page-header-actions {
	display: flex !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
	flex-shrink: 0 !important;
	align-items: center !important;
}

div.plugetune-page-header div.plugetune-page-header-actions a.button {
	font-size: 12.5px !important;
	padding: 5px 12px !important;
	border-radius: 5px !important;
	height: auto !important;
	line-height: 1.4 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	text-decoration: none !important;
}

div.plugetune-page-header div.plugetune-page-header-actions a.button-secondary {
	background: #ffffff !important;
	color: #1e293b !important;
	border: none !important;
}

div.plugetune-page-header div.plugetune-page-header-actions a.button-secondary:hover {
	background: #f1f5f9 !important;
}

/* Tabs bar below header */
div.plugetune-page-header-tabs {
	display: flex !important;
	gap: 12px !important;
	margin-bottom: 20px !important;
	flex-wrap: wrap !important;
	background: #ffffff !important;
	padding: 14px 25px !important;
	border-radius: 5px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

div.plugetune-page-header-tabs button.plugetune-tab {
	border-radius: 5px !important;
	padding: 5px 18px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	transition: all 0.2s ease !important;
}

div.plugetune-page-header-tabs button.plugetune-tab.button-primary,
div.plugetune-page-header-tabs button.plugetune-tab.active {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
	color: #ffffff !important;
	border: none !important;
}

div.plugetune-page-header-tabs button.plugetune-tab.button-secondary {
	background: #f1f5f9 !important;
	color: #334155 !important;
	border: 1px solid #cbd5e1 !important;
}

div.plugetune-page-header-tabs button.plugetune-tab.button-secondary:hover {
	background: #e2e8f0 !important;
}

/* ============================================================ */
/* NOTICE SLOT — all admin notices are relocated here            */
/* ============================================================ */
.plugetune-notice-slot {
	display: block;
	width: 100%;
	margin: 0 0 12px 0;
	padding: 0;
	clear: both;
}

.plugetune-notice-slot:empty {
	display: none;
}

/* Welcome notice inside the slot */
.plugetune-notice-slot .plugetune-welcome-notice {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-left: 4px solid #22c55e;
	border-radius: 5px;
	padding: 14px 18px;
	margin: 0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	box-sizing: border-box;
	width: 100%;
}

.plugetune-notice-slot .plugetune-welcome-notice > i.fab.fa-youtube {
	color: #ff0000;
	font-size: 28px;
	flex-shrink: 0;
}

.plugetune-notice-slot .plugetune-welcome-notice-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.plugetune-notice-slot .plugetune-welcome-notice-text strong {
	font-size: 14px;
	color: #1e293b;
	font-weight: 600;
}

.plugetune-notice-slot .plugetune-welcome-notice-text span {
	font-size: 13px;
	color: #64748b;
}

.plugetune-notice-slot .plugetune-welcome-notice .button {
	border-radius: 5px !important;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	padding: 3px 14px !important;
}

/* FLASH PREVENTION */
html:not(.plugetune-notice-ready) .plugetune-page-header > .notice,
html:not(.plugetune-notice-ready) .plugetune-page-header .notice,
html:not(.plugetune-notice-ready) .wrap > .notice,
html:not(.plugetune-notice-ready) .wrap > .updated,
html:not(.plugetune-notice-ready) .wrap > .error {
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
	position: absolute !important;
	pointer-events: none !important;
}

html.plugetune-notice-ready #plugetune-notice-slot .notice,
html:not(.plugetune-notice-ready) #plugetune-notice-slot .notice {
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	position: static !important;
	pointer-events: auto !important;
}

.plugetune-hidden-notice {
	display: none !important;
}

#plugetune-notice-slot .notice {
	position: relative !important;
	padding: 8px 45px 8px 16px !important;
	max-height: 200px !important;
	overflow-y: auto !important;
}

#plugetune-notice-slot .notice-dismiss {
	position: sticky !important;
	top: 8px !important;
	float: right !important;
	margin: -30px -35px 0 0 !important;
	width: 28px !important;
	height: 28px !important;
	padding: 5px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: none !important;
	border-radius: 4px !important;
	color: #64748b !important;
	cursor: pointer !important;
	z-index: 10 !important;
}

#plugetune-notice-slot .notice-dismiss:hover {
	color: #dc2626 !important;
}

#plugetune-notice-slot .notice-dismiss:before {
	content: "×" !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	color: inherit !important;
	display: block !important;
	background: none !important;
	-webkit-font-smoothing: antialiased !important;
}

.notice-info {
	background: #FFF !important;
}

/* ============================================================ */
/* PERSISTENT NOTICE + × DISMISS BUTTON                          */
/* Text on the left, × flush to the right, no button box.        */
/* ============================================================ */

/* Parent containers must be positioned so the × can anchor right. */
#single-import-notification-message,
#import-result-message,
#single-settings-notification {
    position: relative !important;
    padding-right: 40px !important; 
}

/* The × button itself — no border, no background, no box. */
.plugetune-notice-dismiss {
    position: absolute;
    top: 30%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    color: #64748b;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    padding: 0 !important;
    margin: 0 !important;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    transition: color 0.2s ease;
}

.plugetune-notice-dismiss:hover,
.plugetune-notice-dismiss:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #dc2626;
}

.plugetune-notice-dismiss:focus-visible {
    outline: 2px solid rgba(220, 38, 38, 0.5) !important;
    outline-offset: 1px;
}

/* The text wrapper — keeps the message from running under the ×. */
.plugetune-notice-text {
    display: inline-block;
    padding-right: 4px;
}

.plugetune-warning-box {
	margin-top: 10px;
	padding: 10px;
	background: #fef3c7;
	border-left: 4px solid #f59e0b;
	border-radius: 4px;
	font-size: 12px;
}

.plugetune-warning-box strong {
	color: #92400e;
}

.plugetune-warning-box p {
	margin: 5px 0 0 0;
	color: #78350f;
}

.plugetune-warning-box a {
	color: #d97706;
	font-weight: bold;
}

/* ============================================================ */
/* Utility classes used across plugin                            */
/* ============================================================ */

.plugetune-hidden {
	display: none !important;
}

.plugetune-text-error {
	color: #dc2626;
}

.plugetune-text-success {
	color: #16a34a;
}

.plugetune-text-warning {
	color: #f59e0b;
}

.plugetune-text-muted {
	color: #6b7280;
}

.plugetune-text-error-bold {
	color: #dc2626;
	font-weight: 500;
}

.plugetune-text-success-bold {
	color: #22c55e;
	font-weight: 500;
}

.plugetune-icon-right {
	margin-right: 6px;
}

.plugetune-icon-left {
	margin-left: 6px;
}

.plugetune-icon-success {
	color: #22c55e;
}

.plugetune-icon-error {
	color: #dc2626;
}

.plugetune-icon-warning {
	color: #d97706;
}

.plugetune-input-full {
	width: 100%;
	border-radius: 5px;
}

/* ============================================================ */
/* Warning box (metabox)                                         */
/* ============================================================ */

.plugetune-warning-box {
	margin-top: 10px;
	padding: 10px;
	background: #fef3c7;
	border-left: 4px solid #f59e0b;
	border-radius: 4px;
	font-size: 12px;
}

.plugetune-warning-box > strong {
	color: #92400e;
}

.plugetune-warning-box p {
	margin: 5px 0 0 0;
	color: #78350f;
}

.plugetune-warning-box a {
	color: #d97706;
	font-weight: bold;
}

/* ============================================================ */
/* Timezone detect button + message                              */
/* ============================================================ */

.plugetune-timezone-detect-btn {
	margin-left: 10px;
}

.plugetune-timezone-message {
	margin-top: 8px;
	padding: 6px 12px;
	border-radius: 5px;
	display: none;
	width: 100%;
	max-width: 400px;
}

/* ============================================================ */
/* API test message                                              */
/* ============================================================ */

.plugetune-api-test-msg {
	margin-top: 10px;
	padding: 8px;
	border-radius: 5px;
	display: none;
}

/* ============================================================ */
/* Settings card default radius                                  */
/* ============================================================ */

.plugetune-settings-card {
	border-radius: 5px;
}

.plugetune-btn-test-api {
	border-radius: 5px;
}


/* ============================================================ */
/* Settings page utility classes (added for class-plugetune-settings-page.php)       */
/* ============================================================ */

.button.button-secondary.reset-btn.plugetune-btn-reset {
	padding: 6px 25px;
}

#general-detect-timezone-btn {
	padding: 0px 10px;
}

.plugetune-notice-rounded {
	border-radius: 5px;
}

.plugetune-tabs-rounded {
	border-radius: 5px;
}

.plugetune-settings-card {
	border-radius: 5px;
}

.plugetune-btn-rounded {
	border-radius: 5px;
}

.plugetune-input-rounded {
	border-radius: 5px;
}

.plugetune-actions-column {
	border-radius: 5px;
	flex-direction: column;
	align-items: stretch;
}

.plugetune-actions-row {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.plugetune-btn-save {
	border-radius: 5px !important;
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
	border: none !important;
	font-size: 14px !important;
	padding: 8px 25px !important;
}

.plugetune-btn-reset {
	border-radius: 5px !important;
	padding: 0 30px !important;
	font-size: 14px !important;
	padding: 8px 25px !important;
}

.plugetune-settings-notification {
	display: none;
	padding: 5px 45px 5px 15px;
	border-radius: 5px;
	border-left: 4px solid;
	position: relative;
	font-size: 13px;
}

/**
 * PlugeTune Video Popup styles.
 */

body.plugetune-video-modal-open {
	overflow: hidden;
}

.plugetune-video-modal {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.plugetune-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.8);
	cursor: pointer;
}

.plugetune-video-modal__box {
	position: relative;
	width: 100%;
	max-width: 900px;
	background: #000;
	border-radius: 12px;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.plugetune-video-modal__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
}

.plugetune-video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.plugetune-video-modal__close {
	position: absolute;
	top: 5px;
	right: 3px;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #ef4444;
	font-size: 40px;
	font-weight: 600;
	line-height: 28px;
	text-align: center;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
	cursor: pointer;
	opacity: 0.9;
	z-index: 3;
}

.plugetune-video-modal__close:hover,
.plugetune-video-modal__close:focus {
	background: transparent;
	color: #fff;
	opacity: 1;
	outline: none;
	box-shadow: none;
}

@media (max-width: 600px) {
	.plugetune-video-modal__close { top: -44px; right: 0; }
}

/* ============================================================ */
/* MOBILE RESPONSIVE FIXES (1.0.1)                               */
/* Page header, notices and tab bars on Import + Settings pages. */
/* Desktop layout is untouched: everything below is mobile-only. */
/* ============================================================ */

/* Never let the plugin screens push the admin page sideways. */
.plugetune-wrap,
.plugetune-page-wrapper,
#plugetune-notice-slot {
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 782px) {

	/* Exactly 5px gap on the left and right of every box on mobile.
	   WordPress adds 10px padding on the left of #wpcontent, so it is
	   set to 5px on the PlugeTune screens only. */
	#wpcontent:has(.plugetune-wrap) {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	.plugetune-wrap {
		margin: 10px 0 0 0 !important;
		max-width: none;
	}

	/* ---------- Page header ---------- */
	div.plugetune-page-header {
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		padding: 14px 16px !important;
		gap: 12px !important;
		min-height: 0 !important;
		width: 100% !important;
	}

	div.plugetune-page-header div.plugetune-page-header-left {
		flex: 0 0 auto !important;
		width: 100% !important;
		align-items: flex-start !important;
		gap: 12px !important;
	}

	div.plugetune-page-header div.plugetune-page-header-text {
		flex: 1 1 0% !important;
		min-width: 0 !important;
		overflow-wrap: anywhere;
	}

	div.plugetune-page-header p.plugetune-page-header-desc {
		max-width: 100% !important;
	}

	div.plugetune-page-header div.plugetune-page-header-actions {
		width: 100% !important;
		flex-shrink: 1 !important;
		justify-content: flex-start !important;
		gap: 8px !important;
	}

	div.plugetune-page-header div.plugetune-page-header-actions a.button {
		flex: 1 1 0% !important;
		min-width: 0 !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
		justify-content: center !important;
		white-space: normal !important;
		text-align: center !important;
		min-height: 34px !important;
	}

	/* ---------- Tabs bar under the header ---------- */
	div.plugetune-page-header-tabs {
		padding: 10px 12px !important;
		gap: 8px !important;
		width: 100% !important;
		box-sizing: border-box !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	div.plugetune-page-header-tabs button.plugetune-tab {
		flex: 0 0 auto !important;
		justify-content: center !important;
		padding: 5px 16px !important;
		white-space: nowrap !important;
	}

	.plugetune-tabs {
		padding: 8px;
	}

	.plugetune-tab {
		flex: 0 0 auto;
	}

	/* ---------- Notice slot ---------- */
	.plugetune-notice-slot {
		margin-bottom: 12px;
	}

	.plugetune-notice-slot .plugetune-welcome-notice {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px 12px;
		padding: 12px 14px;
	}

	.plugetune-notice-slot .plugetune-welcome-notice > img {
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
	}

	.plugetune-notice-slot .plugetune-welcome-notice-text {
		flex: 1 1 calc(100% - 60px);
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.plugetune-notice-slot .plugetune-welcome-notice .button {
		flex: 1 1 calc(50% - 6px);
		min-width: 0;
		padding-left: 8px !important;
		padding-right: 8px !important;
		justify-content: center;
		min-height: 34px;
		margin: 0;
		box-sizing: border-box;
	}

	/* Plugin / Freemius notices that WordPress moves into the slot. */
	#plugetune-notice-slot .notice {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow-wrap: anywhere;
	}

	/* Freemius grey plugin-title label: keep it in the flow so a long
	   title can wrap instead of overlapping the next block. */
	#plugetune-notice-slot .fs-notice.fs-has-title {
		margin-bottom: 12px !important;
		overflow: visible !important;
		max-height: none !important;
	}

	#plugetune-notice-slot .fs-notice label.fs-plugin-title {
		position: static !important;
		display: block !important;
		width: fit-content;
		max-width: 100%;
		margin: 8px 0 0 0 !important;
		box-sizing: border-box;
		white-space: normal;
		border-radius: 3px;
	}

	/* ---------- Content containers ---------- */
	.plugetune-wrap .plugetune-page-wrapper {
		padding-left: 12px;
		padding-right: 12px;
	}
}

@media (max-width: 480px) {

	div.plugetune-page-header h1.plugetune-page-header-title {
		font-size: 16px !important;
	}

	div.plugetune-page-header div.plugetune-page-header-icon {
		width: 36px !important;
		height: 36px !important;
		font-size: 16px !important;
	}

	.plugetune-wrap .plugetune-page-wrapper {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* ---------- Add / Browse / Remove buttons: one row on mobile ---------- */
@media (max-width: 768px) {
	.single-video-field-wrapper > .button {
		flex: 1 1 0% !important;
		min-width: 0 !important;
		padding: 0 8px !important;
		white-space: nowrap !important;
	}
}

@media (max-width: 400px) {
	.single-video-field-wrapper > .button {
		font-size: 12px !important;
		gap: 4px !important;
		padding: 0 6px !important;
	}
}

/* ---------- Mobile: Add / Browse widths + action button rows ---------- */
@media (max-width: 768px) {

	/* Add / Remove narrower, Browse wider with side padding for the crown icon. */
	.single-video-field-wrapper > .plugetune-btn-add,
	.single-video-field-wrapper > .plugetune-btn-remove {
		flex: 0.8 1 0% !important;
		padding: 0 6px !important;
	}

	.single-video-field-wrapper > .plugetune-btn-browse {
		flex: 1.3 1 0% !important;
		padding: 0 14px !important;
	}

	/* Save / Reset on one row, Full Settings / All Videos on the next (50/50). */
	.plugetune-single-import-actions,
	.plugetune-schedule-footer {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.plugetune-single-import-actions .plugetune-single-import-actions-left,
	.plugetune-single-import-actions .plugetune-single-import-actions-right,
	.plugetune-schedule-footer .plugetune-schedule-footer-btns {
		flex-wrap: nowrap;
		width: 100%;
		gap: 10px;
	}

	.plugetune-single-import-actions .plugetune-single-import-actions-left > *,
	.plugetune-single-import-actions .plugetune-single-import-actions-right > *,
	.plugetune-schedule-footer .plugetune-schedule-footer-btns > * {
		flex: 1 1 0% !important;
		width: 50%;
		min-width: 0 !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px;
		text-align: center;
		box-sizing: border-box;
		white-space: nowrap;
	}

	/* Settings page: Save All / Reset All side by side. */
	.plugetune-actions-row {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.plugetune-actions-row > .button,
	.plugetune-actions-row > .button.button-secondary.reset-btn.plugetune-btn-reset {
		flex: 1 1 0% !important;
		min-width: 0 !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
		align-items: center;
		justify-content: center;
		gap: 6px;
		text-align: center;
		box-sizing: border-box;
		white-space: nowrap;
	}
}

@media (max-width: 400px) {
	.plugetune-single-import-actions .plugetune-single-import-actions-left > *,
	.plugetune-single-import-actions .plugetune-single-import-actions-right > *,
	.plugetune-schedule-footer .plugetune-schedule-footer-btns > * {
		white-space: normal;
		line-height: 1.25;
		font-size: 12.5px;
	}

	/* Settings page Save All / Reset All: keep the label on one line. */
	.plugetune-actions-row > .button,
	.plugetune-actions-row > .button.button-secondary.reset-btn.plugetune-btn-reset {
		white-space: nowrap;
		font-size: 12.5px !important;
		gap: 4px;
		padding-left: 4px !important;
		padding-right: 4px !important;
	}
}

@media (max-width: 340px) {
	.plugetune-actions-row > .button,
	.plugetune-actions-row > .button.button-secondary.reset-btn.plugetune-btn-reset {
		font-size: 11px !important;
		gap: 3px;
		padding-left: 2px !important;
		padding-right: 2px !important;
	}
}

/* ---------- Mobile: YouTube API settings (key + Test button on one row) ---------- */
@media (max-width: 768px) {
	.field-wrapper:has(> .test-api-btn) {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 0 8px;
	}

	.field-wrapper:has(> .test-api-btn) > #plugetune_api_key {
		flex: 1 1 0%;
		width: auto;
		min-width: 0;
		max-width: none;
	}

	.field-wrapper:has(> .test-api-btn) > .test-api-btn {
		flex: 0 0 auto;
		margin-left: 0;
		white-space: nowrap;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.field-wrapper:has(> .test-api-btn) > .plugetune-api-test-msg,
	.field-wrapper:has(> .test-api-btn) > .description {
		flex: 0 0 100%;
		box-sizing: border-box;
	}

	/* Channel ID(s) input: full width. */
	#plugetune_allowed_channel_ids {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}
}

/* ---------- Mobile: Admin Email + Test Email button on one row ---------- */
@media (max-width: 768px) {
	.field-wrapper:has(> #test-email-btn) {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 8px;
	}

	.field-wrapper:has(> #test-email-btn) > #plugetune_admin_email {
		flex: 1 1 140px;
		width: auto;
		min-width: 0;
		max-width: none;
	}

	.field-wrapper:has(> #test-email-btn) > .plugetune-btn-inline {
		flex: 0 0 auto;
		margin-left: 0;
		white-space: nowrap;
		justify-content: center;
	}

	.field-wrapper:has(> #test-email-btn) > .description,
	.field-wrapper:has(> #test-email-btn) > #test-email-message {
		flex: 0 0 100%;
		box-sizing: border-box;
		margin-top: 0;
	}
}