@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body, * {
    font-family: 'Figtree', ui-sans-serif, sans-serif;
  }
}

/* SureFeedback Admin Page Overrides - Remove WordPress default spacing */
.toplevel_page_surefeedback-cloud-dashboard #wpcontent {
    padding-left: 0 !important;
}

.wrap.surefeedback-admin {
    margin: 0 !important;
}

/* Add to your main CSS file (e.g., index.css) */

.toplevel_page_surefeedback #wpcontent {
    padding-left: 0 !important;
}

/* Remove WordPress default margin from .wrap class on SureFeedback pages */
.toplevel_page_surefeedback .wrap.surefeedback-admin {
    margin: 0 !important;
}

/* Mobile: Remove all left padding/margin */
@media (max-width: 782px) {
	.toplevel_page_surefeedback #wpcontent {
		padding-left: 0 !important;
		margin-left: 0 !important;
	}
	
	/* Remove WordPress default margin from .wrap class on mobile */
	.toplevel_page_surefeedback .wrap.surefeedback-admin {
		margin: 0 !important;
	}
}

:is(#surefeedback-dashboard-app, [data-floating-ui-portal]) .uae-steps span.absolute {
	font-size: 13px;
}
:is(#surefeedback-dashboard-app, [data-floating-ui-portal]) .uae-steps .ring-border-subtle {
	--tw-ring-color: #64748B;
}
:is(#surefeedback-dashboard-app, [data-floating-ui-portal]) .uae-steps .border-border-subtle {
	border-color: #64748B;
}
:is(#surefeedback-dashboard-app, [data-floating-ui-portal]) .uae-steps .min-w-10.border-y {
	min-width: 9rem;
	border-bottom-width: 0.5px;
}

#surefeedback-dashboard-app .loader {
	border: 4px solid #f3f3f3;
	border-radius: 50%;
	border-top: 4px solid #3498db;
	width: 40px;
	height: 40px;
	animation: spin 2s linear infinite;
}
.surefeedback-custom-scrollbar::-webkit-scrollbar {
	width: 4px;
}  
/* Track */
.surefeedback-custom-scrollbar::-webkit-scrollbar-track {
	background: #f1f1f1; 
}
   
/* Handle */
.surefeedback-custom-scrollbar::-webkit-scrollbar-thumb {
	background: #888; 
}
  
/* Handle on hover */
.surefeedback-custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: #555; 
}

.surefeedback-subheading h2 {
	font-size: 1.1rem !important;
}
.surefeedback-subheading .text-text-secondary {
	font-size: 0.98rem !important;
}
.surefeedback-loader-icon {
	top: -15%;
}
.surefeedback-remove-ring.surefeedback-span span {
	padding-left: 0px;
}
#surefeedback-dashboard-app .gap-2 {
	gap: 1.2rem;
}
.surefeedback-remove-ring input[type="checkbox"],
.surefeedback-remove-ring a,
.surefeedback-remove-ring {
	outline: none;
	--tw-ring-inset: auto;
	box-shadow: unset;
}
.surefeedback-settings-page h2 {
	margin-bottom: 0.3rem !important;
}
:is(#surefeedback-dashboard-app) .surefeedback-remove-ring svg.lucide-arrow-right {
	width: 1rem;
	height: 1rem;
}
.surefeedback-popup-button,
.surefeedback-popup-button svg {
	padding: 0;
}
.surefeedback-popup-button span {
	padding-left: 0;
}
.surefeedback-link-color,
.surefeedback-link-color span {
	color: rgb(96, 5, 255);
}
#surefeedback-dashboard-app .surefeedback-header-title h6 {
	color: #858484;
	font-size: 14px;
}
.surefeedback-settings-content-wrapper {
	padding: 15px 25px;
}
button.surefeedback-plugin-activated {
	color: #16a34a;
}
button.surefeedback-bulk-action-button {
	width: 160px;
}
.surefeedback-subtitle h2 {
	font-size: 0.9rem;
}
.surefeedback-65-width {
	width: 65%;
}
.surefeedback-35-width {
	width: 35%;
}
.surefeedback-78-width {
	width: 78%;
}
.surefeedback-88-width {
	width: 88%;
}
#surefeedback-dashboard-app .subject-cell {
	max-width: 200px; /* Adjust this width based on your layout */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.surefeedback-tooltip-wrap {
	width: 100%;
    text-align: right;
}
.toplevel_page_surefeedback #wpcontent {
	padding-left: 0;
}
div#surefeedback-dashboard-app {
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
}

input[type="radio"].surefeedback-radio-field:checked::before {
	content: "";
    border-radius: 50%;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0.1875rem;
    background-color: #6005FF;
    line-height: 1.14285714;
}
input[type="radio"].surefeedback-radio-field:focus {
	border-color: #6005ff;
	box-shadow: 0 0 0 1px #6005ff;
}
.surefeedback-compare-section h6 {
	font-size: 0.9rem !important;
	font-weight: 500 !important;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@media (min-width: 769px) {
	.surefeedback-sticky-outer-wrapper {
		width: 23%;
		border-right: 1px solid #e5e7eb;
	}
	.surefeedback-sticky-sidebar {
		position: sticky;
		top: 0;
	}
	.surefeedback-settings-page:before {
		animation-fill-mode: both;
		background: #fff;
		content: " ";
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		transform-origin: right;
		border-right: 1px solid #e5e7eb;
		width: 30%;
	}
	.surefeedback-nav-menu {
		border-bottom: 1px solid #e5e7eb;
	}
}

@media (max-width: 768px) {
	/* Fix left spacing on mobile - aggressive override */
	body.toplevel_page_surefeedback #wpcontent,
	.toplevel_page_surefeedback #wpcontent,
	#wpcontent {
		padding-left: 0 !important;
		margin-left: 0 !important;
	}

	body.toplevel_page_surefeedback #wpbody-content,
	.toplevel_page_surefeedback #wpbody-content,
	#wpbody-content {
		padding-left: 0 !important;
		margin-left: 0 !important;
	}

	body.toplevel_page_surefeedback,
	.toplevel_page_surefeedback {
		padding-left: 0 !important;
		margin-left: 0 !important;
	}

	/* Remove WordPress default margin from .wrap class */
	body.toplevel_page_surefeedback .wrap.surefeedback-admin,
	.toplevel_page_surefeedback .wrap.surefeedback-admin,
	.wrap.surefeedback-admin {
		margin: 0 !important;
	}

	/* Remove spacing from the dashboard wrapper */
	.surefeedback-dashboard,
	.surefeedback-app-wrapper,
	#surefeedback-dashboard-app {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	#toplevel_page_surefeedback .container {
		padding: 0 1rem;
	}

	#toplevel_page_surefeedback .fixed {
		justify-content: flex-start !important;
	}

	#toplevel_page_surefeedback .bg-white {
		width: 100% !important;
		height: 100% !important;
		border-radius: 0 !important;
	}

	/* Mobile Navbar Fixes */
	.surefeedback-nav-menu {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.75rem !important;
		padding: 0.75rem 1rem !important;
		grid-template-columns: none !important;
	}

	/* Logo at top */
	.surefeedback-nav-menu > div:first-child {
		justify-content: center !important;
		width: 100%;
	}

	/* Navigation tabs below logo */
	.surefeedback-nav-menu > div:nth-child(2) {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.surefeedback-nav-menu > div:nth-child(2) > nav {
		width: 100%;
	}

	.surefeedback-nav-menu > div:nth-child(2) > nav > ul {
		gap: 0.5rem !important;
		flex-wrap: nowrap;
		justify-content: flex-start !important;
		padding-bottom: 0.25rem;
	}

	.surefeedback-nav-menu > div:nth-child(2) > nav > ul > li {
		flex-shrink: 0;
	}

	/* Actions at bottom */
	.surefeedback-nav-menu > div:last-child {
		justify-content: center !important;
		width: 100%;
		gap: 1rem !important;
	}

	/* Widget Control Mobile Optimizations */
	#surefeedback-dashboard-app {
		font-size: 14px;
	}
	
	/* Mobile responsive cards */
	#surefeedback-dashboard-app .space-y-6 {
		gap: 1rem;
	}
	
	/* Improve touch targets */
	#surefeedback-dashboard-app button,
	#surefeedback-dashboard-app input,
	#surefeedback-dashboard-app select {
		min-height: 36px;
	}
	
	/* Better badge sizing on mobile */
	#surefeedback-dashboard-app .badge {
		font-size: 10px;
		padding: 2px 6px;
	}
	
	/* Optimize page list items */
	#surefeedback-dashboard-app .page-list-item {
		flex-direction: column;
		align-items: flex-start;
	}
	
	/* Make switches easier to tap */
	#surefeedback-dashboard-app [role="switch"] {
		width: 44px;
		height: 24px;
	}

	/* Fix main content area */
	#surefeedback-dashboard-app .surefeedback-dashboard {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	/* Remove any negative margins */
	#surefeedback-dashboard-app * {
		margin-left: 0 !important;
	}
}
:is(#surefeedback-dashboard-app, [data-floating-ui-portal]) .uae-steps .text-xs {
	font-size: 0.77rem;
}
.surefeedback-min-700 {
	min-width: 700px;
}
#surefeedback-dashboard-app .subject-cell {
	max-width: 200px; /* Adjust this width based on your layout */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* .surefeedback-menu-page-wrapper {
	width: calc( 100% - 25px);
} */
#surefeedback-dashboard-app .gap-2 {
    gap: 1.2rem;
}
div#surefeedback-dashboard-app {
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
}
/* #surefeedback-dashboard-app .p-5 {
    padding: 0.5rem 1.25rem;
} */
#surefeedback-dashboard-app .surefeedback-header-title h6 {
	color: #858484;
	font-size: 14px;
}
.surefeedback-settings-content-wrapper {
	padding: 15px 25px;
}
@media (max-width: 1024px) {
	.surefeedback-65-width,
	.surefeedback-35-width,
	.surefeedback-78-width,
	.surefeedback-88-width {
		width: 100%;
	}
}
@media screen and (max-width: 782px) {
	:is(#surefeedback-dashboard-app, [data-floating-ui-portal]) .surefeedback-display-flex {
		display: block;
	}
	.surefeedback-radio-option {
		width: 1rem !important;
		height: 1rem !important;
	}
	.surefeedback-radio-option:checked:before {
		width: 0.5rem !important;
		height: 0.5rem !important;
		margin: 0.18rem !important;
	}
	:is(#surefeedback-dashboard-app, [data-floating-ui-portal]) .uae-steps,
	#surefeedback-dashboard-app img {
		display: none;
	}
	.surefeedback-onboarding-customize {
		margin-left: 20px;
    	margin-right: 20px;
	}
	.surefeedback-min-700 {
		min-width: unset;
	}
	.surefeedback-onboarding-customize .surefeedback-custom-scrollbar {
		overflow: scroll;
		max-width: fit-content;
	}
	.surefeedback-onboarding-bottom {
		display: grid !important;
		max-width: fit-content;
	}

	/* Additional mobile navbar fixes */
	.surefeedback-nav-menu [class*="NavigationMenuLink"] {
		font-size: 0.875rem !important;
		padding: 0.5rem 0.75rem !important;
		white-space: nowrap;
	}

	.surefeedback-nav-menu img {
		display: block !important;
		max-height: 20px !important;
	}

	/* Fix dropdown menus on mobile */
	.surefeedback-nav-menu [role="menu"] {
		max-width: 90vw !important;
	}

	/* Icon sizing on mobile */
	.surefeedback-nav-menu svg {
		width: 20px !important;
		height: 20px !important;
	}

	/* Badge responsive */
	.surefeedback-nav-menu [class*="Badge"] {
		font-size: 0.75rem !important;
		padding: 0.125rem 0.5rem !important;
	}
}

body.surefeedback-onboarding-fullscreen #wpadminbar,
body.surefeedback-onboarding-fullscreen #adminmenuback,
body.surefeedback-onboarding-fullscreen #adminmenuwrap,
body.surefeedback-onboarding-fullscreen #adminmenu,
body.surefeedback-onboarding-fullscreen #wpfooter {
       display: none;
}
body.surefeedback-onboarding-fullscreen #wpcontent {
       margin-left: 0;
       padding-left: 0;
}
body.surefeedback-onboarding-fullscreen.admin-bar {
       margin-top: 0 !important;
}


input[type="checkbox"].uae-role-checkbox:focus{
	border-color:rgb(92, 46, 222);
	box-shadow:0 0 0 1px rgb(92, 46, 222);
}

input[type="checkbox"].role-checkbox {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border: 2px solid #d1d5db;
	border-radius: 4px;
	background-color: white;
	position: relative;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

input[type="checkbox"].role-checkbox:checked {
	background-color: #4353FF;
	border-color: #4353FF;
}

input[type="checkbox"].role-checkbox:checked::after {
	content: '✓';
	color: white;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
}

#wpfooter{
    background-color: white;
}
.uae-rating{
    color: #6005FF;
}

.uae-rating:hover{
	color: #4B00CC;
}



@layer base {
  :root {
        --background: 0 0% 100%;
        --foreground: 0 0% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 0 0% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 0 0% 3.9%;
        --primary: 234 100% 63%;
        --primary-foreground: 0 0% 98%;
        --secondary: 0 0% 96.1%;
        --secondary-foreground: 0 0% 9%;
        --muted: 0 0% 96.1%;
        --muted-foreground: 0 0% 45.1%;
        --accent: 0 0% 96.1%;
        --accent-foreground: 0 0% 9%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 89.8%;
        --input: 0 0% 89.8%;
        --ring: 234 100% 63%;
        --chart-1: 12 76% 61%;
        --chart-2: 173 58% 39%;
        --chart-3: 197 37% 24%;
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --radius: 0.375rem;
        --sidebar-background: 0 0% 98%;
        --sidebar-foreground: 240 5.3% 26.1%;
        --sidebar-primary: 240 5.9% 10%;
        --sidebar-primary-foreground: 0 0% 98%;
        --sidebar-accent: 240 4.8% 95.9%;
        --sidebar-accent-foreground: 240 5.9% 10%;
        --sidebar-border: 220 13% 91%;
        --sidebar-ring: 217.2 91.2% 59.8%;
    }
  .dark {
        --background: 0 0% 3.9%;
        --foreground: 0 0% 98%;
        --card: 0 0% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 0 0% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 234 100% 63%;
        --primary-foreground: 0 0% 98%;
        --secondary: 0 0% 14.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 0 0% 14.9%;
        --muted-foreground: 0 0% 63.9%;
        --accent: 0 0% 14.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 14.9%;
        --input: 0 0% 14.9%;
        --ring: 234 100% 63%;
        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
        --sidebar-background: 240 5.9% 10%;
        --sidebar-foreground: 240 4.8% 95.9%;
        --sidebar-primary: 224.3 76.3% 48%;
        --sidebar-primary-foreground: 0 0% 100%;
        --sidebar-accent: 240 3.7% 15.9%;
        --sidebar-accent-foreground: 240 4.8% 95.9%;
        --sidebar-border: 240 3.7% 15.9%;
        --sidebar-ring: 217.2 91.2% 59.8%;
    }
}



@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}



/* Mobile responsive override for WordPress admin */
@media (max-width: 782px) {
	#wpcontent, #wpfooter {
		margin-left: 0 !important;
	}
	
	.toplevel_page_surefeedback #wpcontent {
		padding-left: 0 !important;
	}
	
	/* Remove WordPress default margin from .wrap class */
	.toplevel_page_surefeedback .wrap.surefeedback-admin {
		margin: 0 !important;
	}
}

@media (max-width: 600px) {
	#wpcontent, #wpfooter {
		margin-left: 0 !important;
	}
	
	.auto-fold #wpcontent, 
	.auto-fold #wpfooter {
		margin-left: 0 !important;
	}
}

/* Override WordPress default focus styles for SureFeedback navbar */
.surefeedback-nav-menu a:focus,
.surefeedback-nav-menu a:focus img,
.surefeedback-nav-menu button:focus,
.surefeedback-nav-menu [role="link"]:focus {
    box-shadow: none !important;
    outline: none !important;
}

.surefeedback-nav-menu a:focus-visible,
.surefeedback-nav-menu button:focus-visible,
.surefeedback-nav-menu [role="link"]:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}