:root {
	--weight-regular: 400;
	--text-base: 1rem;             /* fallback for var(--text-base) */
	--border-radius-md: 0.375rem;  /* fallback for var(--border-radius-md) */
	--bg-color-start: #ede2f5;     /* light lavender for gradient start */
	--bg-color-end: #d7c2eb;       /* slightly darker lavender for gradient end */
  /* Updated brand colors for a violet theme */
  --brand-main: #6A0DAD;         /* primary violet hue for body text, scrollbar, etc. */
  --brand-dark: #520A8C;         /* darker violet for buttons */
  --brand-darker: #3D0770;       /* darkest violet for disabled links */
  --brand-heading: #7D20D1;      /* heading color for widgets (lighter/more vibrant) */
}

/* 2) Import your chosen font */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;500&display=swap');

body {
  font-family: 'Cairo', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
	background: linear-gradient(135deg, var(--bg-color-start), var(--bg-color-end));
  color: var(--brand-main);
  margin: 0; /* Remove default browser margin */
  padding: 0; /* Remove default browser padding */
}

/* 4) Navbar with a violet gradient (radial or linear) */
.navbar {
  height: 48px;
  /* Fallback solid color, then radial gradient */
  background-color: var(--brand-main);
  background: radial-gradient(circle, #A259FF 4%, #8D46FF 53%, #652EFF 81%);
  border-bottom: 3px solid #000000;
  padding: 0;
}

/* 5) Images & Branding */
.navbar-brand img {
  display: inline-block;
  max-width: 156px;
  max-height: 62px !important;
}

.navbar-home img {
  max-height: 80px !important;
}
.page-card-head img {
  max-height: 170px !important;
}

/* 6) Scrollbar thumb styling */
*::-webkit-scrollbar-thumb {
  background: var(--brand-main);
  border-radius: 6px;
}

/* 7) Buttons */
.btn.btn-primary,
div#driver-popover-item .driver-popover-footer button.btn-primary,
div#driver-popover-item .driver-popover-footer button.driver-next-btn {
  background-color: var(--brand-dark);
  color: #ffffff;
  white-space: nowrap;
  /* Use currentColor for icon strokes (inherit from text color) */
  --icon-stroke: currentColor;
  transition: background-color 0.2s ease;
}

.btn.btn-primary:hover,
div#driver-popover-item .driver-popover-footer button.btn-primary:hover,
div#driver-popover-item .driver-popover-footer button.driver-next-btn:hover {
  background-color: #3D0770; /* Slightly darker on hover */
  text-decoration: none;
  cursor: pointer;
}

/* 8) Labels & Headings */
.control-label,
.grid-heading-row {
  color: var(--brand-main);
  font-weight: bold;
}

/* 9) Links */
a {
  color: #000000;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover,
a:focus {
  color: #333333; /* Slightly darker on hover/focus */
}

/* 10) Widgets & Links inside widgets */
.widget.links-widget-box .link-item .disabled-link {
  color: var(--brand-darker);
}

.widget.links-widget-box .link-item {
  display: flex;
  align-items: center;
  font-size: var(--text-base);
  font-weight: bold;
  letter-spacing: 0.02em;
  color: var(--brand-main);
  padding: 4px;
  margin-left: -4px;
  margin-bottom: 0;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.widget.links-widget-box .link-item:hover {
  background-color: rgba(106, 13, 173, 0.1); /* Subtle violet background on hover */
  color: #000000;
}

/* 11) Widget Title (Head) */
.widget .widget-head .widget-label .widget-title {
  display: flex;
  align-items: center;
  font-size: var(--text-base);
  font-weight: bold;
  letter-spacing: 0.015em;
  line-height: 1.3em;
  color: var(--brand-heading);
  cursor: default; /* or 'text' if you want the text cursor */
}



/* 4) Custom Navbar styling (targets your Bootstrap navbar classes) */
.navbar.navbar-light.navbar-expand-lg {
  /* Violet gradient background */
  background-color: var(--brand-main);
  background: radial-gradient(circle, #A259FF 4%, #8D46FF 53%, #652EFF 81%);
  border-bottom: 3px solid #000000;
  padding: 0;
  min-height: 48px; /* Ensure some consistent height */
}

/* Container inside the navbar (optional adjustments) */
.navbar .container {
  max-width: 1271px; /* or any custom width you prefer */
}

/* 5) Navbar brand / logo */
.navbar-brand img {
  display: inline-block;
  max-height: 62px !important; /* Adjust to fit your design */
  /* You can also add max-width if needed */
}

/* 6) Navbar toggler (the hamburger menu icon) */
.navbar-toggler {
  border: none; /* remove default Bootstrap border */
  outline: none;
  color: #fff;  /* if you want the svg or toggler icon to be light */
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  background-color: transparent; /* No background highlight */
  color: #fff;
}

/* 7) Nav items and links */
.navbar-nav .nav-item .nav-link {
  color: #000000;
  font-weight: bold;
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: color 0.2s ease, background-color 0.2s ease;
  border-radius: var(--border-radius-md);
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link:focus {
  color: #333333;
  background-color: rgba(106, 13, 173, 0.1); /* Subtle violet overlay on hover */
}

/* Example: if you have a `.nav-link.btn-login-area` or similar,
   you can style it differently:
.nav-link.btn-login-area {
  background-color: var(--brand-dark);
  color: #fff;
  margin-left: 0.5rem;
}
*/

/* 8) Dropdown menus (e.g., user avatar menu) */
.navbar .dropdown-menu {
  border-radius: var(--border-radius-md);
  border: 1px solid #ddd; /* or none, if you prefer no border */
  margin-top: 0.5rem;
}
.navbar .dropdown-item {
  color: #000000;
  font-weight: bold;
  transition: background-color 0.2s ease;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: rgba(106, 13, 173, 0.1);
  color: #333333;
}

/* 9) Scrollbar thumb styling (optional) */
*::-webkit-scrollbar-thumb {
  background: var(--brand-main);
  border-radius: 6px;
}


/* 11) (Optional) If you have headings or other elements to style globally */
.control-label,
.grid-heading-row {
  color: var(--brand-main);
  font-weight: bold;
}

  /* Page Card Styling */
  .page-card {
	background-color: var(--bg-color);
	border-radius: var(--border-radius-md);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	padding: 20px;
  }
  

  
  .page-card-head img.app-logo {
    width: 20%; /* Adjust based on container size */
    max-width: 200px; /* Maximum size limit */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px;
  }
  
  
  .page-card-head h4 {
	font-size: 1.5rem;
	color: var(--brand-heading);
	margin: 0;
  }
/* Input Fields */
.form-control {
  width: 100%;
  padding: 12px 16px; /* Increased padding for better usability */
  font-size: var(--text-base);
  border: 1px solid var(--brand-main); /* Violet border */
  border-radius: var(--border-radius-md); /* Smooth corners */
  color: var(--brand-main); /* Violet text color */
  background-color: #f9f9f9; /* Subtle background for contrast */
  transition: all 0.3s ease; /* Smooth transition for hover and focus */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for a modern look */
}

/* Focus State */
.form-control:focus {
  outline: none; /* Remove default outline */
  border-color: var(--brand-heading); /* Highlighted border on focus */
  background-color: #ffffff; /* Slightly brighter background on focus */
  box-shadow: 0 0 8px rgba(125, 32, 209, 0.3); /* Glowing effect */
}

/* Hover State */
.form-control:hover {
  border-color: var(--brand-heading); /* Subtle border color change on hover */
  background-color: #f4f0f9; /* Slightly darker background on hover */
}

/* Disabled State */
.form-control:disabled {
  background-color: #e9ecef; /* Light gray background for disabled fields */
  color: #6c757d; /* Muted text color */
  border-color: #dcdcdc; /* Light gray border for disabled fields */
  cursor: not-allowed;
}

/* Error State */
.form-control.is-invalid {
  border-color: #e3342f; /* Red border for invalid fields */
  background-color: #fcebea; /* Light red background */
}

.form-control.is-invalid:focus {
  border-color: #cc1f1a; /* Darker red border on focus */
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.3); /* Glowing red effect */
}

.form-control.is-invalid + .error-message {
  color: #e3342f; /* Match error text with the red color */
  font-size: 0.875rem; /* Slightly smaller text for error messages */
  margin-top: 4px; /* Spacing between the input and the error message */
}


  .email-field,
  .password-field {
	position: relative;
	margin-bottom: 20px;
  }
  

  
  /* Forgot Password */
  .forgot-password-message a {
	color: var(--brand-main);
	text-decoration: none;
	font-weight: bold;
	transition: color 0.2s ease;
  }
  
  .forgot-password-message a:hover {
	color: var(--brand-heading);
  }
  
  /* Buttons */

  
  .btn-primary {
	background-color: var(--brand-dark);
	color: #fff;
  }
  
  .btn-primary:hover {
	background-color: var(--brand-darker);
	transform: translateY(-2px);
  }
  
  .btn-default {
	background-color: #f5f5f5;
	color: var(--brand-main);
  }
  
  .btn-default:hover {
	background-color: rgba(106, 13, 173, 0.1);
  }
  
  /* Social Login Buttons */
  .social-login-buttons .btn {
	margin-bottom: 10px;
  }
  
  /* Sign-Up Message */
  .sign-up-message {
	margin-top: 20px;
	color: var(--brand-main);
  }
  
  .sign-up-message a {
	color: var(--brand-heading);
	font-weight: bold;
	text-decoration: none;
	transition: color 0.2s ease;
  }
  
  .sign-up-message a:hover {
	color: var(--brand-main);
  }
  
  /* Divider */
  .login-divider {
	color: #ccc;
	font-size: 0.9rem;
	margin: 15px 0;
	position: relative;
	text-align: center;
  }
  
  .login-divider:before,
  .login-divider:after {
	content: '';
	position: absolute;
	width: 40%;
	height: 1px;
	background: #ccc;
	top: 50%;
	transform: translateY(-50%);
  }
  
  .login-divider:before {
	left: 0;
  }
  
  .login-divider:after {
	right: 0;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
	.page-card {
	  padding: 15px;
	}
  
	.page-card-head h4 {
	  font-size: 1.2rem;
	}
  
	.btn {
	  font-size: 0.9rem;
	  padding: 8px;
	}
  }