/**
 * GoValid Smart Verify Widget Styles (WordPress).
 *
 * @package GoValid_QR
 */

/* ── Widget Container (floating FAB) ───────────────────── */
.govalid-sv-widget {
	position: fixed;
	z-index: 99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

.govalid-sv-widget.govalid-sv-bottom-right { bottom: 20px; right: 20px; }
.govalid-sv-widget.govalid-sv-bottom-left  { bottom: 20px; left: 20px; }
.govalid-sv-widget.govalid-sv-top-right    { top: 20px; right: 20px; }
.govalid-sv-widget.govalid-sv-top-left     { top: 20px; left: 20px; }

/* ── Toggle Button (FAB) ──────────────────────────────── */
.govalid-sv-toggle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
	transition: all 0.3s ease;
	color: white;
}
.govalid-sv-toggle:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}
.govalid-sv-toggle.active {
	background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* ── Panel ─────────────────────────────────────────────── */
.govalid-sv-panel {
	position: absolute;
	width: 320px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.95);
	transition: all 0.3s ease;
	overflow: hidden;
}
.govalid-sv-panel.open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* Panel position relative to FAB */
.govalid-sv-bottom-right .govalid-sv-panel { bottom: 70px; right: 0; }
.govalid-sv-bottom-left  .govalid-sv-panel { bottom: 70px; left: 0; }
.govalid-sv-top-right    .govalid-sv-panel { top: 70px; right: 0; }
.govalid-sv-top-left     .govalid-sv-panel { top: 70px; left: 0; }

/* ── Inline variant (shortcode embed) ─────────────────── */
.govalid-sv-inline {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	max-width: 400px;
	margin: 1em auto;
}
.govalid-sv-inline .govalid-sv-panel-inline {
	position: static;
	width: 100%;
	opacity: 1;
	visibility: visible;
	transform: none;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

/* ── Header ────────────────────────────────────────────── */
.govalid-sv-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
}
.govalid-sv-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 15px;
}
.govalid-sv-close {
	background: none;
	border: none;
	color: white;
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.2s;
}
.govalid-sv-close:hover { background: rgba(255, 255, 255, 0.2); }

/* ── Body ──────────────────────────────────────────────── */
.govalid-sv-body { padding: 16px; }

/* ── Tabs ──────────────────────────────────────────────── */
.govalid-sv-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}
.govalid-sv-tab {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid #e0e0e0;
	background: #f8f9fa;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: #666;
	transition: all 0.2s;
}
.govalid-sv-tab:hover { background: #f0f0f0; }
.govalid-sv-tab.active {
	background: #667eea;
	border-color: #667eea;
	color: white;
}

/* ── Tab Content ───────────────────────────────────────── */
.govalid-sv-tab-content { display: none; }
.govalid-sv-tab-content.active { display: block; }

/* ── Input Group ───────────────────────────────────────── */
.govalid-sv-input-group { display: flex; gap: 8px; }
.govalid-sv-input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s;
}
.govalid-sv-input:focus { border-color: #667eea; }
.govalid-sv-hint { margin-top: 8px; font-size: 11px; color: #999; }

/* ── Buttons ───────────────────────────────────────────── */
.govalid-sv-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
}
.govalid-sv-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.govalid-sv-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 14px;
	background: #f8f9fa;
	color: #666;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	transition: all 0.2s;
}
.govalid-sv-btn-secondary:hover { background: #f0f0f0; }

/* ── Dropzone ──────────────────────────────────────────── */
.govalid-sv-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	border: 2px dashed #d0d0d0;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s;
	color: #888;
	text-align: center;
	font-size: 13px;
}
.govalid-sv-dropzone:hover,
.govalid-sv-dropzone.dragover {
	border-color: #667eea;
	background: #f8f9ff;
	color: #667eea;
}

/* ── Preview ───────────────────────────────────────────── */
.govalid-sv-preview { text-align: center; }
.govalid-sv-preview img {
	max-width: 100%;
	max-height: 150px;
	border-radius: 6px;
	margin-bottom: 10px;
}

/* ── Results ───────────────────────────────────────────── */
.govalid-sv-results {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e0e0e0;
}

/* ── Loading ───────────────────────────────────────────── */
.govalid-sv-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px;
	color: #666;
}
.govalid-sv-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid #e0e0e0;
	border-top-color: #667eea;
	border-radius: 50%;
	animation: govalid-spin 0.8s linear infinite;
}
@keyframes govalid-spin { to { transform: rotate(360deg); } }

/* ── Error ─────────────────────────────────────────────── */
.govalid-sv-error {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	background: #fff5f5;
	border: 1px solid #fed7d7;
	border-radius: 6px;
	color: #c53030;
	font-size: 13px;
}

/* ── Result Card ───────────────────────────────────────── */
.govalid-sv-result { border-radius: 8px; overflow: hidden; }
.govalid-sv-result-success { border: 1px solid #c6f6d5; }
.govalid-sv-result-success .govalid-sv-result-header { background: #f0fff4; color: #276749; }
.govalid-sv-result-warning { border: 1px solid #feebc8; }
.govalid-sv-result-warning .govalid-sv-result-header { background: #fffaf0; color: #c05621; }
.govalid-sv-result-danger { border: 1px solid #fed7d7; }
.govalid-sv-result-danger .govalid-sv-result-header { background: #fff5f5; color: #c53030; }

.govalid-sv-result-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	font-weight: 600;
	font-size: 14px;
}
.govalid-sv-result-body { padding: 12px; background: #fafafa; }
.govalid-sv-field {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid #eee;
	font-size: 13px;
}
.govalid-sv-field:last-child { border-bottom: none; }
.govalid-sv-field label { color: #666; font-weight: 500; }
.govalid-sv-field span { color: #333; }
.govalid-sv-mono {
	font-family: monospace;
	background: #f0f0f0;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
}
.govalid-sv-result-footer { padding: 12px; background: white; text-align: center; }

/* ── Footer ────────────────────────────────────────────── */
.govalid-sv-footer {
	padding: 10px 16px;
	background: #f8f9fa;
	border-top: 1px solid #e0e0e0;
	text-align: center;
}
.govalid-sv-powered { font-size: 11px; color: #999; text-decoration: none; }
.govalid-sv-powered:hover { color: #667eea; }
.govalid-sv-powered strong { color: #667eea; }

/* ── Camera ────────────────────────────────────────────── */
.govalid-sv-camera-container {
	position: relative;
	width: 100%;
	height: 180px;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 10px;
}
.govalid-sv-camera-video { width: 100%; height: 100%; object-fit: cover; }
.govalid-sv-camera-overlay {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.govalid-sv-scan-region {
	width: 120px;
	height: 120px;
	border: 2px solid rgba(102, 126, 234, 0.8);
	border-radius: 12px;
	box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.3);
}
.govalid-sv-camera-controls { display: flex; gap: 8px; justify-content: center; }
.govalid-sv-camera-status { text-align: center; font-size: 12px; margin-top: 8px; min-height: 18px; }

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width: 400px) {
	.govalid-sv-panel { width: calc(100vw - 40px); max-width: 320px; }
	.govalid-sv-widget.govalid-sv-bottom-right,
	.govalid-sv-widget.govalid-sv-bottom-left { bottom: 10px; }
	.govalid-sv-widget.govalid-sv-bottom-right { right: 10px; }
	.govalid-sv-widget.govalid-sv-bottom-left  { left: 10px; }
	.govalid-sv-camera-container { height: 150px; }
	.govalid-sv-scan-region { width: 100px; height: 100px; }
}