@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  /* Updated to use Poppins as the primary font-family */
  font-family: 'Poppins';
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #F3F3ED;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* It's also good practice to explicitly set on body and html to ensure full coverage */

/* You already have body styles, so let's add font-family there as well, or rely on :root */

/* Since :root usually sets the base for everything, just modifying :root is often enough. */

/* However, adding to body explicitly can sometimes prevent unexpected overrides. */

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
  /* Ensure body also uses Poppins, though it should inherit from :root */
  font-family: 'Poppins';
  
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}

a:hover {
  color: #535bf2;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  /* `font-family: inherit;` here is perfect, it will now inherit Poppins from :root or body */
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}

button:hover {
  border-color: #646cff;
}

button:focus,
button:focus-visible {
  outline: none;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color:#F3F3ED;;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #F3F3ED;;
  }
}


/* app.css */

#root {
  font-family: 'Poppins';
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-align: center; /* Keep if you need to center inline/inline-block content within root */
  

  /* REMOVED: These flex properties were causing #root to center its children,
     preventing the navbar and footer from being full width. */
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: center; */
}

/* Logo Styling */
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}
.body{
  background-color: #F3F3ED;;
}

/* Logo animation */
@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

/* Card Container */
.card {
  padding: 2em;
  max-width: 90%;
  width: 500px;
  margin: 1em auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Docs text */
.read-the-docs {
  color: #888;
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .logo {
    height: 4em;
    padding: 1em;
  }

  .card {
    padding: 1em;
    width: 95%;
  }
}

/* Variables for consistency */
:root {
  --primary-color: #1B4E53; /* Sampled dark teal from your new logo */
  --primary-hover-color: #143D41; /* Slightly darker for hover */
  --text-dark: #333; /* For general text, and non-active links */
  --text-active: #07A76F; /* For active links and primary elements */
  --background-light: #f3f3ed;
  --shadow-light: rgba(0, 0, 0, 0.05); /* Very subtle shadow */
  --shadow-strong: rgba(0, 0, 0, 0.1);
}

/* Header Container */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px; /* Default for mobile/tablet */
  background-color: var(--background-light);
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-sizing: border-box;
}

/* Logo */
.header-logo img {
  height: 40px; /* Keep consistent with original, adjust if image size changes */
  transition: transform 0.3s ease;
}
.header-logo img:hover {
  transform: scale(1.02); /* Less pronounced scale on hover for a flatter look */
}

/* Navigation Links (Hidden by default on mobile) */
.header-links {
  display: none; /* Hidden by default (mobile-first) */
  list-style: none;
  margin: 0;
  padding:0;
}

.header-links li {
  margin: 0 20px; /* Adjusted margin for slightly more spacing */
  position: relative;
}

.header-links a {
  text-decoration: none;
  color: var(--text-dark); /* Default link color */
  font-weight: 500; /* Slightly lighter font weight */
  font-size: 1rem; /* Slightly smaller font size */
  position: relative;
  transition: color 0.3s ease; /* Only color transition, no transform */
  padding-bottom: 0; /* Remove padding for underline */
}

/* Remove the underline effect for desktop links */
.header-links a::after {
  display: none;
}

.header-links a:hover,
.header-links a.active-link {
  color: var(--text-active); /* Active color is the primary teal */
  transform: none; /* Remove translateY on hover */
}

/* Request a Demo Button - Removed from desktop main nav */
.header-button {
  display: none; /* Always hidden on desktop as per new UI image */
}

/* Services Dropdown Menu (Desktop) */
.services-dropdown-parent {
  position: relative;
}

.services-dropdown-menu {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--background-light);
  box-shadow: 0 4px 12px var(--shadow-strong); /* Stronger shadow for dropdown */
  border-radius: 8px;
  min-width: 200px;
  padding: 10px 0;
  list-style: none;
  z-index: 1001;
  opacity: 0;
  transform: translateY(5px); /* Less pronounced slide-in */
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* Show dropdown on hover for desktop */
.services-dropdown-parent:hover .services-dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.services-dropdown-menu li {
  margin: 0;
}

.services-dropdown-menu a {
  padding: 10px 20px;
  display: block;
  font-size: 0.95rem; /* Slightly smaller font for dropdown items */
  font-weight: normal;
  color: var(--text-dark);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.services-dropdown-menu a:hover {
  background-color: #f0fdf7; /* Light green-teal background on hover */
  color: var(--primary-color);
}

/* Mobile Menu Toggle (Hamburger icon) */
.mobile-menu-toggle {
  display: none; /* Hidden by default (desktop-first approach for toggle) */
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
}

.hamburger-icon {
  width: 25px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--text-dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Animate Hamburger to X */
.mobile-menu-toggle.open .hamburger-icon span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.open .hamburger-icon span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.open .hamburger-icon span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background-color: var(--background-light);
  padding: 80px 20px 20px;
  box-shadow: -4px 0 15px var(--shadow-strong);
  transition: right 0.4s ease-out;
  z-index: 999;
  overflow-y: auto;
  flex-direction: column;
  align-items: center;
  display: none; /* Ensures it's hidden by default on mobile */
}

.mobile-menu-overlay.open {
  right: 0;
  display: flex; /* Show as flex when open on mobile */
}

/* Mobile links styles */
.mobile-links {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: center;
}

.mobile-links li {
  margin: 15px 0;
  position: relative;
}

.mobile-links a,
.mobile-links .mobile-menu-button {
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text-dark);
  transition: color 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
  display: block;
  padding: 10px 0;
  border-radius: 5px;
}

.mobile-links a:hover,
.mobile-links a.active-link {
  color: var(--primary-color);
  background-color: #f0fdf7;
}

.mobile-links .mobile-menu-button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  cursor: pointer;
  width: 80%;
  margin: 15px auto;
  padding: 10px 20px; /* Ensure button padding is good */
  border-radius: 30px; /* Pill shape */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.mobile-links .mobile-menu-button:hover {
  background-color: var(--primary-hover-color);
  transform: translateY(-2px);
}

/* Mobile Services Dropdown (when opened by click) */
.mobile-services-dropdown-parent .mobile-services-dropdown-menu {
  position: static;
  box-shadow: none;
  background-color: #f8f8f8;
  margin-top: 10px;
  padding: 0;
  list-style: none;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.mobile-services-dropdown-parent .mobile-services-dropdown-menu li {
  margin: 0;
}

.mobile-services-dropdown-parent .mobile-services-dropdown-menu a {
  padding: 8px 0 8px 20px;
  font-size: 1.1rem;
  font-weight: normal;
  color: var(--text-medium);
  text-align: left;
}

.mobile-services-dropdown-parent .mobile-services-dropdown-menu a:hover {
  background-color: #e9ffee;
  color: var(--primary-hover-color);
}


/* --- Responsive Breakpoints --- */

/* Tablets and Mobile (< 769px) */
@media (max-width: 768px) {
  .header-container {
    padding: 15px 20px;
  }

  .header-logo {
    order: 1;
    flex-shrink: 1;
    flex-basis: auto;
  }

  .header-logo img {
    height: 30px; /* Slightly smaller logo for mobile */
    max-width: 100%;
  }

  .mobile-menu-toggle {
    display: block; /* Hamburger visible on mobile */
    order: 3;
    margin-left: auto; /* Push to the right edge */
  }

  /* Hide the desktop navigation links on mobile */
  .header-links {
    display: none;
  }

  /* Hide the desktop request demo button on mobile */
  .header-button {
    display: none;
  }

  /* Make sure the mobile overlay is properly positioned when open */
  .mobile-menu-overlay.open {
    display: flex;
  }
}

/* Larger screens (Desktops) (>= 769px) */
@media (min-width: 769px) {
  .header-container {
    padding: 15px 90px; /* Desktop padding */
  }

  .mobile-menu-toggle,
  .mobile-menu-overlay {
    display: none; /* Hide mobile elements on desktop */
  }

  .header-links {
    display: flex; /* Show desktop navigation */
    align-items: center; /* Align links vertically */
  }

  .header-button {
    display: none; /* Explicitly hide button on desktop as per new UI */
  }

  .header-logo {
    order: 0;
    flex-shrink: 0;
    flex-basis: auto;
  }

  .header-logo img {
    height: 40px; /* Original logo size for desktop */
    max-width: none;
  }
}:root {
  --primary-green: #07A76F;
  --light-text: #ffffff;
  --button-white-bg: #ffffff;
  --button-white-text: #07A76F;
  --button-white-hover-bg: #f0f0f0;
  --button-ghost-border: #ffffff;
  --button-ghost-text: #ffffff;
  --button-ghost-hover-bg: rgba(255, 255, 255, 0.2);
  --font-family-main: 'Poppins', sans-serif; /* Added sans-serif fallback */
}

.hero-container {
  display: flex;
  justify-content: center;
  align-items: center;
 
  padding: 0px 60px  30px 60px; /* Overall section padding */
  background-color: var(--better-workplace-background-light);
  width: 100%;
  box-sizing: border-box;
  font-family: var(--better-workplace-font-family-main);
}

.hero-content {
  position: relative;
  background-color: var(--primary-green);
  border-radius: 40px;
  padding: 60px 120px;
  text-align: center;
  max-width: 900px;
  width: 100%;
  overflow: hidden; /* Hide inner images overflow */

  z-index: 1;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--light-text);
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 2;
}

.hero-description {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 30px;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Keeps buttons centered when they wrap */
  gap: 20px;
  position: relative;
  z-index: 2;
}

.hero-button {
  padding: 15px 35px;
  border: none;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: 180px;
}

/* Get Started for Your Team — White filled */
.hero-button.primary {
  background-color: var(--button-white-bg);
  color: var(--button-white-text);
  border: 2px solid var(--button-white-bg);
}
.hero-button.primary:hover {
  background-color: var(--button-white-hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Explore Solution — White outlined */
.hero-button.secondary {
  background-color: transparent;
  color: var(--button-ghost-text);
  border: 2px solid var(--button-ghost-border);
}
.hero-button.secondary:hover {
  background-color: var(--button-ghost-hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Updated position: now inside hero-content */
.hero-bg-left,
.hero-bg-right {
  position: absolute;
  pointer-events: none;
  z-index: 0; /* Changed to 0 to be behind content and buttons */
}

.hero-bg-left {
  left: 0px;
  top: 0; /* Corrected invalid 'top: 1' to 'top: 0' */
  width: 300px;
  transform: rotate(0deg);
}

.hero-bg-right {
  right: 0px;
  bottom: 0;
  width: 300px;
  transform: rotate(0deg);
}

/* Responsive */

/* Tablet and smaller desktop screens */
@media (max-width: 992px) {
  .hero-container {
    padding: 10px 30px; /* Adjust container padding */
  }

  .hero-content {
    padding: 50px 70px; /* Reduce content padding */
    border-radius: 35px; /* Slightly smaller border-radius */
  }

  .hero-title {
    font-size: 3rem; /* Reduce font size */
  }

  .hero-description {
    font-size: 1rem; /* Reduce font size */
    margin-bottom: 25px; /* Adjust margin */
  }

  .hero-buttons {
    gap: 15px; /* Reduce gap between buttons */
  }

  .hero-button {
    padding: 12px 30px; /* Adjust button padding */
    font-size: 0.95rem; /* Adjust button font size */
    min-width: 160px; /* Adjust min-width */
  }

  .hero-bg-left,
  .hero-bg-right {
    width: 200px; /* Reduce image size */
  }
}

/* Mobile screens */
@media (max-width: 576px) {
  .hero-container {
    padding: 10px 15px; /* Further reduce container padding */
    min-height: 70vh; /* Adjust min-height for smaller screens */
  }

  .hero-content {
    padding: 40px 25px; /* More reduced content padding */
    border-radius: 25px;
  }

  .hero-title {
    font-size: 2.2rem; /* Significantly reduce font size for mobile */
    margin-bottom: 0.8rem;
  }

  .hero-description {
    font-size: 0.9rem; /* Smaller description font size */
    margin-bottom: 20px;
  }

  .hero-buttons {
    flex-direction: column; /* Stack buttons vertically */
    gap: 12px; /* Small gap between stacked buttons */
    align-items: center; /* New: Center buttons horizontally when stacked */
  }

  .hero-button {
    width: 100%; /* Make buttons full width */
    max-width: 280px; /* Limit max-width of buttons */
    padding: 12px 20px; /* Adjust button padding */
    font-size: 0.9rem;
  }

  .hero-bg-left,
  .hero-bg-right {
    width: 150px; /* Even smaller image size */
    /* Adjust specific positions if they still look off on very small screens */
  }
}

/* Very small mobile screens (e.g., iPhone SE) */
@media (max-width: 375px) {
  .hero-content {
    padding: 30px 15px;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-description {
    font-size: 0.85rem;
  }
}@media (min-width: 601px) and (max-width: 1024px) {
  .insights-card .card-illustration-main {
    display: none !important;
  }
}
/* --- CSS Variables --- */
:root {
  --color-primary-dark: #104041;
  --color-text-secondary: #5C5C5C;
  --color-bg-main: #f3f3ed;
  --color-bg-card-peach: #f5e0c3;
  --color-bg-card-white: #FFFFFF;
  --font-main: 'Poppins', sans-serif; /* Added sans-serif fallback */
}

/* --- Main Section Wrapper --- */
.features-section {
  font-family: var(--font-main);
  background-color: var(--color-bg-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Consolidated padding for larger screens */
  padding: 30px 60px; /* Adjusted initial padding for overall section, combines your two original paddings */
  
  justify-content: center;
  
  width: 100%;
  box-sizing: border-box;
}

/* --- Section Header --- */
.features-header {
  text-align: center;
  margin-bottom: 3.5rem;
  max-width: 900px; /* Limit header width */
  width: 100%;
}

.features-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #07A76F; /* Directly using the green color for the title as in previous instructions */
  line-height: 1.25;
  margin: 0 0 1rem 0;
}

.features-header p {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 650px;
  margin: 0 auto;
}

/* --- Features Grid Layout --- */
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 1200px; /* Max width for the grid itself */
}

/* --- General Card Styling --- */
.feature-card {
  border-radius: 40px;
  padding: 2.5rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden; /* Important for corner illustrations */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes content to top/bottom */
}

/* General card content styling */
.card-content h3,
.cardcare-content h3,
.cardinsight-content h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.3;
  margin: 0 0 1rem 0;
  text-align: left;
}

.card-content p,
.cardcare-content p,
.cardinsight-content p {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
  /* Removed max-width here, will manage in specific cards or media queries */
  text-align: left;
}

/* Specific text max-widths for larger screens */
.card-content p { max-width: 230px; }
.cardcare-content p { max-width: 450px; }
.cardinsight-content p { max-width: 700px; }


/* --- Specific Card Styles --- */
.mindfulness-card {
  background-color: var(--color-bg-card-peach);
}

.professional-card {
  background-color: var(--color-bg-card-white);
}

.insights-card {
  grid-column: 1 / -1; /* Makes this card span both columns */
  background-color: var(--color-bg-card-white);
  /* Ensure horizontal alignment of content within this full-width card */
  display: flex;
  flex-direction: row; /* Default for larger screens */
  align-items: center; /* Vertically align content and image */
  justify-content: space-between; /* Push text to left, image to right */
}

.insights-card .cardinsight-content {
  flex: 1; /* Allow content to take available space */
  padding-right: 2rem; /* Space between text and image */
}


/* --- Card Illustrations --- */
.card-illustration-corner {
  position: absolute;
  bottom: 1rem;
  right: 2rem;
  width: 200px; /* Default size for larger screens */
  height: auto;
  pointer-events: none;
  z-index: 1;
}

.card-illustration-main img {
  position: absolute;
  bottom: 0rem;
  right: 0rem;
  width: 300px; /* Default size for larger screens */
  height: auto;
  pointer-events: none;
  z-index: 1;
}

/* Content z-index, as provided by user */
.card-content,
.cardcare-content,
.cardinsight-content {
  position: relative; /* This is crucial for z-index to work */
  z-index: 2;
}


/* --- Responsive Design --- */

/* Tablet and smaller desktop screens (max-width: 1024px) */
@media (max-width: 1024px) {
  .features-section {
    padding: 5rem 40px; /* Reduce overall section padding */
  }

  .features-grid {
    gap: 1.5rem; /* Slightly reduce grid gap */
  }

  /* Adjust card padding and font sizes */
  .feature-card {
    padding: 2rem;
  }

  .card-content h3,
  .cardcare-content h3,
  .cardinsight-content h3 {
    font-size: 1.8rem;
  }

  .card-content p,
  .cardcare-content p,
  .cardinsight-content p {
    font-size: 0.95rem;
    max-width: none; /* Allow text to fill card width */
  }

  /* Insights card adjustments */
  .insights-card {
    flex-direction: column; /* Stack content and image vertically */
    text-align: center;
    padding: 2.5rem; /* Reset padding for stacked view */
  }

  .insights-card .cardinsight-content {
    padding-right: 0;
    margin-bottom: 1.5rem; /* Space between text and image */
  }

  .insights-card .cardinsight-content h3,
  .insights-card .cardinsight-content p {
    text-align: center; /* Center text within stacked insights card */
  }

  /* Adjust illustrations for tablet */
  .card-illustration-corner {
    width: 150px; /* Make corner illustration smaller */
    bottom: 0.5rem;
    right: 1.5rem;
  }

  .card-illustration-main img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Smaller Tablets and larger Mobile screens (max-width: 768px) */
@media (max-width: 768px) {
  .features-section {
    padding: 4rem 20px; /* Further reduce overall section padding */
    min-height: auto; /* Allow height to be determined by content */
  }

  .features-header {
    margin-bottom: 2.5rem;
  }

  .features-header h2 {
    font-size: 2.2rem;
  }

  .features-header p {
    font-size: 1rem;
    max-width: 90%; /* Constrain header paragraph width slightly */
  }

  .features-grid {
    grid-template-columns: 1fr; /* Stack all cards into a single column */
    gap: 1rem;
  }

  .feature-card {
    padding: 1.8rem; /* Reduce card padding */
    border-radius: 30px; /* Slightly smaller border-radius */
  }

  .card-content h3,
  .cardcare-content h3,
  .cardinsight-content h3 {
    font-size: 1.5rem; /* Reduce heading font size */
    text-align: center; /* Center text in stacked cards */
  }

  .card-content p,
  .cardcare-content p,
  .cardinsight-content p {
    font-size: rem; /* Reduce paragraph font size */
    text-align: center; /* Center text in stacked cards */
    max-width: 95%; /* Allow text to fill width, but with a small margin */
    margin: 0 auto; /* Center the paragraph block */
  }

  .insights-card .cardinsight-content {
    margin-bottom: 1rem; /* Reduce space between text and image */
  }

  /* Adjust illustrations for mobile */
  .card-illustration-corner {
    width: 120px; /* Smaller corner illustration */
    bottom: 0.2rem;
    right: 0.8rem;
  }

  .card-illustration-main img {
    width: 200px; /* Smaller main illustration */
    margin-top: 0.5rem;
  }
}

/* Small mobile screens (max-width: 480px) */
@media (max-width: 480px) {
  .features-section {
    padding: 15px 15px; /* Even tighter padding */
  }

  .features-header h2 {
    font-size: 1.8rem;
  }

  .features-header p {
    font-size: 0.9rem;
  }

  .feature-card {
    padding: 1.5rem;
    border-radius: 25px;
  }

  .card-content h3,
  .cardcare-content h3,
  .cardinsight-content h3 {
    font-size: 1.3rem;
   
  }

  .card-content p,
  .cardcare-content p,
  .cardinsight-content p {
    font-size: 0.85rem;
  }

  .card-illustration-corner {
    width: 90px; /* Significantly smaller for very small screens */
    bottom: -5px; /* Slightly off-card to save space */
    right: -5px;
  }

  .card-illustration-main img {
    width: 150px; /* Significantly smaller */
  }
}/* --- Root Variables for Why Trust Us Section --- */
:root {
  --mentcura-trust-background-color: #f3f3ed;
  --mentcura-trust-card-background: #ffffff;
  --mentcura-trust-text-color: #334D4D;
  --mentcura-trust-font-family-main: 'Poppins';
}

/* --- Why Trust Us Section Container --- */
.mentcura-trust-section {
  font-family: var(--mentcura-trust-font-family-main);
  background-color: var(--mentcura-trust-background-color);
  padding: 30px 60px;
 
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* --- Inner Container for Content (the white rounded box) --- */
.mentcura-trust-container {
  background-color: var(--mentcura-trust-card-background);
  border-radius: 40px;
  padding: 3rem 2rem;
  text-align: center;
  max-width: 1200px;
  width: 100%;
  
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  overflow: hidden;
}

.mentcura-trust-partners-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--mentcura-trust-text-color);
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.mentcura-trust-logos {
  display: flex;
  /* Adjusts the logos to be evenly distributed */
  justify-content: space-around;
  align-items: center;
  gap: 3rem;
  flex-grow: 1;
  white-space: nowrap;
  /* Animation removed */
}

.mentcura-trust-logo-item {
  height: 80px;
  width: auto;
  max-width: 200px;
  opacity: 0.7;
  transition: filter 0.3s ease, opacity 0.3s ease;
  display: inline-block;
  flex-shrink: 0;
}

.mentcura-trust-logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Animation block removed */

/* --- Responsive Design --- */
@media (max-width: 992px) {
  .mentcura-trust-container {
    padding: 2.5rem 3rem;
    border-radius: 30px;
    flex-direction: column;
    gap: 1.5rem;
  }

  .mentcura-trust-partners-label {
    text-align: center;
  }

  .mentcura-trust-logos {
    gap: 2rem;
    justify-content: center; /* Center logos on small screens */
  }

  .mentcura-trust-logo-item {
    height: 45px;
    max-width: 160px;
  }
}

@media (max-width: 768px) {
  .mentcura-trust-section {
    padding: 15px 15px;
  }

  .mentcura-trust-container {
    padding: 2rem 1.5rem;
    border-radius: 25px;
    gap: 1.5rem;
  }

  .mentcura-trust-partners-label {
    font-size: 1rem;
  }

  .mentcura-trust-logos {
    gap: 1.5rem;
  }

  .mentcura-trust-logo-item {
    height: 40px;
    max-width: 130px;
  }
}

@media (max-width: 480px) {
  .mentcura-trust-container {
    padding: 15px 15px;
  }

  .mentcura-trust-logos {
    gap: 1rem;
  }

  .mentcura-trust-logo-item {
    height: 35px;
    max-width: 100px;
  }
}/* --- Root Variables for Testimonial Section --- */
:root {
  --mentcura-testimonial-primary-green: #07A76F;
  --mentcura-testimonial-dark-text: #104041;
  --mentcura-testimonial-light-text: #ffffff;
  --mentcura-testimonial-background-color: #f3f3ed; /* Light background from the image */
  --mentcura-testimonial-light-orange: #e7c99f; /* Light orange background for cards */
  --mentcura-testimonial-font-family-main: 'Poppins',;
}

/* --- Testimonial Section Container --- */
.mentcura-testimonial-section {
  font-family: var(--mentcura-testimonial-font-family-main);
  background-color: var(--mentcura-testimonial-background-color);
  padding: 30px 60px;
  display: grid;
  grid-template-columns: 1fr 2fr; /* Header on left, cards on right */
  gap: 3rem;
  max-width: 1200px; /* Adjust based on overall page width */
  margin: 0 auto;
  align-items: center; /* Vertically align content */
}

/* --- Left Column: Header Content --- */
.mentcura-testimonial-header {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-right: 2rem; /* Space between text and cards */
}

.mentcura-testimonial-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  color: #5C5C5C;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.mentcura-testimonial-heading {
  font-size: 2.3rem;
  font-weight: 700;
  color: #07A76F;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

.mentcura-testimonial-subheading {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #5C5C5C;
  margin-bottom: 2rem;
}

.mentcura-testimonial-navigation {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.mentcura-testimonial-nav-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--mentcura-testimonial-primary-green);
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.mentcura-testimonial-nav-button:first-child {
  background-color: transparent; /* Left arrow background */
}

.mentcura-testimonial-nav-button:last-child {
  background-color: var(--mentcura-testimonial-primary-green); /* Right arrow background */
}

.mentcura-testimonial-nav-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.mentcura-testimonial-nav-button:first-child:hover {
  background-color: rgba(7, 167, 111, 0.1); /* Light hover for transparent button */
}

.mentcura-testimonial-nav-button:last-child:hover {
  background-color: #068F5E; /* Darker green hover for filled button */
}

/* SVG icons inside buttons */
.mentcura-testimonial-nav-button svg {
  width: 24px;
  height: 24px;
}
.mentcura-testimonial-nav-button:first-child svg path {
  stroke: var(--mentcura-testimonial-primary-green); /* Green stroke for left arrow */
}
.mentcura-testimonial-nav-button:last-child svg path {
  stroke: var(--mentcura-testimonial-light-text); /* White stroke for right arrow */
}


/* --- Right Column: Testimonial Cards --- */
.mentcura-testimonial-cards-wrapper {
  display: flex;
  gap: 1.5rem; /* Space between cards */
  /* These properties enable the horizontal scroll */
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Hide the scrollbar */
  -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

/* Hide scrollbar for WebKit browsers */
.mentcura-testimonial-cards-wrapper::-webkit-scrollbar {
  display: none;
}

.mentcura-testimonial-card {
  flex-shrink: 0; /* Prevents cards from shrinking */
  width: 350px; /* Fixed width for cards as per image */
  border-radius: 40px;
  padding: 2.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

/* Card background colors and unique border-radius for the green card */
.mentcura-testimonial-card-light-orange {
  background-color: var(--mentcura-testimonial-light-orange);
  color: var(--mentcura-testimonial-dark-text);
}

.mentcura-testimonial-card-green {
  background-color: var(--mentcura-testimonial-primary-green);
  color: var(--mentcura-testimonial-light-text);
  
}

.mentcura-testimonial-quote {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.mentcura-testimonial-card-green .mentcura-testimonial-quote {
  color: rgba(255, 255, 255, 0.9); /* Lighter text for green card quote */
}

.mentcura-testimonial-author {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: auto; /* Push author to the bottom */
  color: #5C5C5C; /* Default author color */
}

.mentcura-testimonial-card-green .mentcura-testimonial-author {
  color: rgba(255, 255, 255, 0.7); /* Lighter text for green card author */
}


/* --- Responsive Design --- */
@media (max-width: 1200px) {
  .mentcura-testimonial-section {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 4rem 1.5rem;
  }

  .mentcura-testimonial-header {
    text-align: center;
    padding-right: 0;
  }

  .mentcura-testimonial-navigation {
    justify-content: center;
    margin-top: 2rem;
  }

  .mentcura-testimonial-cards-wrapper {
    justify-content: flex-start;
    padding-bottom: 1rem;
  }

  .mentcura-testimonial-card {
    width: 380px;
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  .mentcura-testimonial-section {
    padding: 15px 15px;
  }

  .mentcura-testimonial-heading {
    font-size: 2.5rem;
  }

  .mentcura-testimonial-subheading {
    font-size: 1rem;
  }

  .mentcura-testimonial-card {
    width: 300px;
    padding: 2rem;
  }

  .mentcura-testimonial-quote {
    font-size: 1rem;
  }

  .mentcura-testimonial-author {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .mentcura-testimonial-heading {
    font-size: 2rem;
  }

  .mentcura-testimonial-subheading {
    font-size: 0.9rem;
  }

  .mentcura-testimonial-card {
    width: 280px;
    padding: 1.5rem;
  }
}
.testimonial-arrow-icon {
  font-size: 1.8rem; /* Large enough to be visible */
}

.testimonial-arrow-icon.left {
  color: var(--mentcura-testimonial-primary-green);
}

.testimonial-arrow-icon.right {
  color: var(--mentcura-testimonial-light-text);
}
/* --- Footer Specific Variables --- */
:root {
  --footer-bg-color: white;
  --footer-text-dark: #104041;
  --footer-text-medium: #5C5C5C;
  --footer-link-color: #104041;
  --footer-link-hover-color: #07A76F;
  --footer-border-color: rgba(16, 64, 65, 0.2);
  --font-inter: 'Poppins';
}

/* --- Footer Container (outermost wrapper) --- */
.footer-container {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-dark);
  font-family: var(--font-inter);
  padding: 60px 60px 30px;
  
  max-width: 100%;
  margin:  auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  overflow: hidden;
}

/* Main content wrapper (3 sections: Brand/Desc, Social, Policy/Illustration) */
.footer-main-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 40px;
  align-items: flex-start;
}

/* Individual footer sections */
.footer-section {
  display: flex;
  flex-direction: column;
}

/* Left Section: Brand and Description */
.footer-brand-description {
  align-items: flex-start;
}

.footer_img {
  width: 140px;
  height: auto;
  margin-bottom: 20px;
}

.footer-description-text {
  font-size: 0.95em;
  line-height: 1.6;
  color: var(--footer-text-medium);
  max-width: 300px;
  text-align: left;
  margin: 0;
}

/* Middle Section: Social Links */
.footer-social-links {
  align-self: flex-start;
  /* Added margin-top to align with the paragraph */
  margin-top: 40px;
}

.footer-social-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.footer-social-links a {
  color: var(--footer-link-color);
  text-decoration: none;
  font-size: 1em;
  font-weight: 500;
  transition: color 0.3s ease;
}

.footer-social-links a:hover {
  color: var(--footer-link-hover-color);
}

/* Right Section: Policy Links and Illustration */
.footer-policy-illustration {
  align-items: flex-start;
  position: relative;
  min-height: 250px;
}

.footer-policy-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  /* Added margin-top to align with the paragraph */
  margin-top: 40px;
}

.footer-policy-links a {
  color: var(--footer-link-color);
  text-decoration: none;
  font-size: 1em;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.footer-policy-links a:hover {
  color: var(--footer-link-hover-color);
}

.footer-illustration {
  position: absolute;
  bottom: -10px;
  right: -60px;
  width: 300px;
  height: auto;
  z-index: 0;
}

/* Separator Line */
.footer-separator {
  border: none;
  border-top: 1px solid var(--footer-border-color);
  margin: 0 0 30px;
}

/* Bottom Section: Copyright and Disclaimer */
.footer-bottom-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 15px;
}

.footer-copyright-text {
  font-size: 0.9em;
  color: var(--footer-text-dark);
  margin: 0;
}

.footer-disclaimer-text {
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--footer-text-medium);
  margin: 0;
  max-width: 100%;
  text-align: left;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
  .footer-container {
    padding: 40px 30px 20px;
    margin: 20px 20px;
  }

  .footer-main-content {
    grid-template-columns: 1fr 1fr; /* Two columns for tablet: social links left, illustration right */
    gap: 30px;
    margin-bottom: 30px;
  }
  
  .footer-section {
    align-items: center;
    text-align: center;
  }

  .footer-brand-description {
    align-items: center;
    grid-column: 1 / -1; /* Span full width for brand description */
    margin-bottom: 20px;
  }
  
  /* Social section goes to left column */
  .footer-social-links {
    justify-self: start;
    align-items: flex-start;
    text-align: left;
  }
  
  /* Policy and illustration section goes to right column */
  .footer-policy-illustration {
    justify-self: end;
    align-items: flex-end;
    text-align: right;
    position: relative;
    min-height: 200px;
  }
  
  .footer_img {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-description-text {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-social-links ul,
  .footer-policy-links {
    align-items: flex-start;
  }

  /* Reset margin on smaller screens */
  .footer-social-links,
  .footer-policy-links {
    margin-top: 0;
  }

  .footer-policy-illustration {
    min-height: auto;
    margin-bottom: 20px;
    align-items: center;
  }

  .footer-illustration {
    position: static;
    transform: none;
    margin-top: 20px;
    width: 200px;
    right: auto;
    bottom: auto;
  }

  .footer-bottom-bar {
    align-items: center;
    text-align: center;
  }

  .footer-disclaimer-text {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .footer-container {
    padding: 15px 15px 15px;
    border-radius: 15px;
  }

  .footer-main-content {
    grid-template-columns: 1fr 1fr; /* Two columns for mobile: social links left, illustration right */
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .footer-brand-description {
    grid-column: 1 / -1; /* Brand description spans full width */
    margin-bottom: 20px;
  }
  
  /* Social links on the left */
  .footer-social-links {
    justify-self: start;
    align-items: flex-start;
    text-align: left;
  }
  
  /* Policy and illustration on the right */
  .footer-policy-illustration {
    justify-self: end;
    align-items: flex-end;
    text-align: right;
    position: relative;
    min-height: 150px;
  }

  .footer-description-text {
    font-size: 0.85em;
  }

  .footer-social-links a,
  .footer-policy-links a {
    font-size: 0.9em;
  }

  .footer-social-links ul,
  .footer-policy-links {
    gap: 8px;
    align-items: flex-start;
  }

  .footer-illustration {
    width: 120px;
    right: -20px;
    bottom: -10px;
  }

  .footer-separator {
    margin: 0 0 20px;
  }

  .footer-copyright-text {
    font-size: 0.8em;
  }

  .footer-disclaimer-text {
    font-size: 0.7em;
    gap: 10px;
  }
}.not-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
  text-align: center;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.not-found-title {
  font-size: 6rem;
  color: #07A76F;
  margin: 0;
}

.not-found-subtitle {
  font-size: 2rem;
  color: #333;
  margin: 10px 0 20px;
}

.not-found-text {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 30px;
}

.not-found-buttons {
  padding: 12px 24px;
  background-color: #07A76F;
  color: white;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
  
}

.not-found-button:hover {
  background-color:#07A76F;
}
/* components/EmployeeWellnessPage.css */

/* Styles for the main page container */
.employee-wellness-page-container {
    /* Adjusted padding for overall container space */
    padding: 20px; /* Base padding */
    max-width: 1250px; /* Limit the maximum width of the content */
    margin: 20px auto; /* Center the container and add vertical margin */
    font-family: sans-serif; /* Example font */
    color: #333; /* Default text color */
    background-color: #F3F3ED; /* Background color for the page content area */
    border-radius: 8px; /* Rounded corners */
    /* Added subtle box-shadow based on design */
    
    box-sizing: border-box;
}

/* Breadcrumb styling */
.breadcrumb {
    margin-bottom: 20px; /* Keep original margin-bottom */
    font-size: 0.9rem; /* Keep original font-size */
    color: #777; /* Keep original color */
    /* Adjusted padding and removed fixed left margin for responsiveness */
    padding: 10px 0; /* Reduced vertical padding, removed horizontal padding */
    /* Use text-align and/or container padding to align */
    text-align: left; /* Default left alignment */
    /* Removed fixed left margin that can cause overflow - Corrected */
    margin-left: 100px;
}

.breadcrumb a {
    text-decoration: none; /* Keep original text-decoration */
    color: #555; /* Keep original color */
    margin-right: 5px; /* Keep original margin-right */
}

.breadcrumb span {
    font-weight: bold; /* Keep original font-weight */
    color: #333; /* Keep original color */
}


/* Page Header Section Styling */
.page-header-section {
    text-align: center; /* Keep original text-align */
    /* Adjusted padding for responsiveness */
    padding: 30px 20px; /* Adjusted padding */
    background-color: #E5EADA; /* Keep original background-color */
    /* Negative margin to extend to container edges, adjust based on container padding */
    margin: -20px -20px 30px -20px;
    border-top-left-radius: 8px; /* Keep top border radius of the container */
    border-top-right-radius: 8px; /* Keep top border radius of the container */
    /* Ensure bottom corners match the container if the next section starts immediately */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* Added box-sizing for predictable width calculation */
    box-sizing: border-box;
}

.page-title {
    font-size: 2rem; /* Adjusted base font size for better scaling */
    font-weight: bold; /* Keep original font-weight */
    color: #333; /* Keep original color */
    margin-bottom: 10px; /* Keep original margin-bottom */
    line-height: 1.3; /* Keep original line-height */
}

.page-subheading {
    font-size: 1rem; /* Keep original font-size */
    color: #555; /* Keep original color */
    line-height: 1.5; /* Keep original line-height */
    max-width: 800px; /* Limit width for readability */
    margin: 0 auto; /* Center subheading */
}

/* Hide the br tag by default, only show on desktop */
.page-subheading .break-desktop {
    display: none; /* Keep original display */
}


/* Form Section Styling - Matched margins with button container */
.form-section {
    margin-bottom: 30px; /* Adjusted margin-bottom */
    padding: 20px; /* Keep original padding */
    border: 1px solid #eee; /* Keep original border */
    border-radius: 8px; /* Keep original border-radius */
    /* Use responsive horizontal margins matching the button container */
    margin: 0 15px 30px 15px; /* Example: Use smaller fixed margins */
    background-color: #FFFFFF; /* Background color for sections (already white) */
    /* Added box-sizing for predictable width calculation */
    box-sizing: border-box;
}

.section-title {
    font-size: 1.3rem; /* Adjusted base font size for better scaling */
    font-weight: bold; /* Keep original font-weight */
    color: #333; /* Keep original color */
    margin-bottom: 10px; /* Keep original margin-bottom */
    /* ADDED: Align section title to the left */
    text-align: left;
}

.section-description {
    font-size: 0.9rem; /* Keep original font-size */
    color: #666; /* Keep original color */
    margin-bottom: 15px; /* Adjusted margin-bottom */
    /* ADDED: Align section description to the left */
    text-align: left;
}

/* Form Grid for layout */
.form-grid {
    display: grid; /* Keep original display */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Keep original responsive grid */
    gap: 20px; /* Keep original gap */
}

.form-group {
    display: flex; /* Keep original display */
    flex-direction: column; /* Keep original flex-direction */
}

.form-group.full-width {
    grid-column: 1 / -1; /* Make this group span all columns */
}

.form-group label {
    font-size: 0.9rem; /* Keep original font-size */
    font-weight: 600; /* Keep original font-weight */
    color: #555; /* Keep original color */
    margin-bottom: 5px; /* Keep original margin-bottom */
    /* ADDED: Explicitly align labels to the left */
    text-align: left;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
/* Target the datetime-local input specifically */
.form-group input[type="datetime-local"],
.form-group select,
.form-group textarea {
    padding: 10px; /* Keep original padding */
    border: 1px solid #ccc; /* Keep original border */
    border-radius: 4px; /* Keep original border-radius */
    font-size: 1rem; /* Keep original font-size */
    width: 100%; /* Make input fill the container */
    /* Include padding and border in element's total width */
    box-sizing: border-box;
    /* Updated: Background color for inputs */
    background-color: #07A76F1A;
    /* Updated: Text color for inputs */
    color: #333;

    /* Add custom styling for the icon */
    padding-right: 30px; /* Make space for the custom icon */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Position the icon */
    background-size: 18px; /* Size the icon */
     /* Add transition for focus/hover */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Style the calendar picker indicator to make it transparent but clickable */
.form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none; /* Keep original -webkit-appearance */
    opacity: 0; /* Make it transparent */
    display: block; /* Ensure it's a block element to occupy space */
    width: 100%; /* Make the clickable area cover the input */
    height: 100%;
    position: absolute; /* Position over the input */
    top: 0;
    left: 0;
    cursor: pointer; /* Indicate it's clickable */
    z-index: 1; /* Ensure it's above the background image */
}

/* Add a custom SVG icon as a background image */
/* Replace the SVG data URL with your desired icon and color */
.form-group input[type="datetime-local"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'%3E%3Cpath d='M19 4h-2V3c0-.55-.45-1-1-1s-1 .45-1 1v1H8V3c0-.55-.45-1-1-1s-1 .45-1 1v1H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V8h14v12zM7 10h5v5H7z'%3E%3C/path%3E%3C/svg%3E"); /* Example dark grey calendar icon SVG */
    position: relative; /* Needed for absolute positioning of the indicator */
}

/* Style inputs on focus */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="datetime-local"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #07A76F; /* Highlight border color on focus */
    box-shadow: 0 0 5px rgba(7, 167, 111, 0.3); /* Add subtle shadow on focus */
}


.form-group textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 80px; /* Added minimum height for textarea */
}

/* Styling for inline form groups (label and buttons) */
.form-group-inline {
    display: flex; /* Keep original display */
    flex-direction: column; /* Stack label and buttons vertically */
    margin-bottom: 15px; /* Adjusted margin-bottom */
}

.form-group-inline label {
    font-size: 0.9rem; /* Keep original font-size */
    font-weight: 600; /* Keep original font-weight */
    color: #555; /* Keep original color */
    margin-bottom: 8px; /* Adjusted margin-bottom */
    /* ADDED: Explicitly align labels to the left */
    text-align: left;
}

.inline-buttons {
    display: flex; /* Keep original display */
    flex-wrap: wrap; /* Allow buttons to wrap */
    gap: 10px; /* Space between buttons */
}

.inline-button {
    padding: 8px 15px; /* Keep original padding */
    border: 1px solid #ccc; /* Keep original border */
    border-radius: 4px; /* Updated: Rounded corners */
    background-color: #9be7cc33; /* Updated: Background color */
    color: #07A76F; /* Updated: Text color */
    font-size: 0.9rem; /* Keep original font-size */
    cursor: pointer; /* Keep original cursor */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Keep original transition */
}

.inline-button:hover {
    background-color: #f0f0f0;
}

.inline-button.active {
    background-color: #07A76F; /* Green background for active button */
    color: white;
    border-color: #07A76F;
}


/* Category Buttons Styling */
.category-buttons {
    display: flex; /* Keep original display */
    flex-wrap: wrap; /* Allow buttons to wrap */
    gap: 10px; /* Space between buttons */
    justify-content: flex-start; /* Align category buttons to the left */
}

.category-button {
    padding: 8px 15px; /* Keep original padding */
    border: 1px solid #ccc; /* Keep original border */
    border-radius: 4px; /* Updated: Rounded corners */
    background-color: #9be7cc33; /* Updated: Background color */
    color: #07A76F; /* Updated: Text color */
    font-size: 0.9rem; /* Keep original font-size */
    cursor: pointer; /* Keep original cursor */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Keep original transition */
}

.category-button:hover {
    background-color: #f0f0f0;
}

.category-button.active {
    background-color: #07A76F; /* Green background for active button */
    color: white;
    border-color: #07A76F;
}


/* Format Options Styling (Now using buttons) */
.format-options {
    display: flex; /* Keep original display */
    gap: 10px; /* Space between buttons */
    flex-wrap: wrap;
    justify-content: flex-start; /* Changed to left-align format options */
}

/* Style the format buttons directly */
.format-options button {
    padding: 8px 15px; /* Keep original padding */
    border: 1px solid #ccc; /* Keep original border */
    border-radius: 4px; /* Updated: Rounded corners */
    background-color: #9be7cc33; /* Updated: Background color */
    color: #07A76F; /* Updated: Text color */
    font-size: 0.9rem; /* Keep original font-size */
    cursor: pointer; /* Keep original cursor */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Keep original transition */
}

.format-options button:hover {
    background-color: #f0f0f0;
}

/* Style the active format button */
.format-options button.active {
    background-color: #07A76F; /* Green background for active button */
    color: white;
    border-color: #07A76F;
}


/* Confirm Button Container - Adjust margins to match form sections */
.confirm-button-container {
    /* REMOVED: text-align: center; - not needed as button will be 100% width */
    /* Match base margin of form-section */
    margin: 30px 15px 0 15px;
    box-sizing: border-box; /* Ensure padding is included */
}

/* Confirm Session Button */
.confirm-session-button {
    background-color: #07A76F; /* Green background */
    color: white;
    padding: 12px 20px; /* Keep smaller padding */
    border: none;
    border-radius: 4px; /* Rounded corners */
    font-size: 1.1rem; /* Keep original font-size */
    font-weight: bold; /* Keep original font-weight */
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* Make button take full width of its container */
    width: 100%;
    /* REMOVED: max-width: 400px; - it should match the form section width */
    /* max-width: 400px; */
    /* Added box-sizing for predictable width calculation */
    box-sizing: border-box;
    display: block; /* Ensure it behaves like a block element */
}

.confirm-session-button:hover {
    background-color: #058a5a; /* Darker green on hover */
}
/* Style for the error message */
.error-message {
    color: red;
    text-align: center;
    margin-top: 20px; /* Keep original margin */
    font-size: 0.9rem;
}


/* --- Modal Styling --- */
/* Overlay that covers the background when the modal is open */
.modal-overlay {
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top (should be higher than other content) */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.5); /* Black with opacity for a dimmed effect */
    display: flex; /* Use flexbox for centering the modal content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* The modal content box */
.modal-content {
    background-color: #fefefe; /* White background for the modal box */
    margin: auto; /* Auto margin for centering (works with flexbox) */
    padding: 30px; /* Padding inside the modal box */
    border-radius: 8px; /* Rounded corners for the modal box */
    width: 80%; /* Set a width, adjust as needed */
    max-width: 500px; /* Limit the maximum width on larger screens */
    text-align: center; /* Center text inside the modal */
    position: relative; /* Needed for positioning the close button (if you add one inside) */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Add a shadow for depth */
}

/* Styling for the modal title */
.modal-content h2 {
    color: #07A76F; /* Green color for the success title */
    margin-bottom: 15px; /* Space below the title */
}

/* Styling for the modal paragraph text */
.modal-content p {
    margin-bottom: 20px; /* Space below paragraphs */
    color: #555; /* Text color */
}

/* Styling for the modal close button */
.modal-close-button {
    background-color: #07A76F; /* Green background for the button */
    color: white; /* White text color */
    padding: 10px 20px; /* Padding inside the button */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners for the button */
    cursor: pointer; /* Indicate it's clickable */
    font-size: 1rem; /* Button text size */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.modal-close-button:hover {
    background-color: #058a5a; /* Darker green on hover */
}


/* --- Responsive adjustments --- */

/* Adjustments for screens up to 768px */
@media (max-width: 768px) {
    .employee-wellness-page-container {
        padding: 15px; /* Adjust padding */
        margin: 15px auto; /* Adjust margin */
    }

    .breadcrumb {
        padding: 10px 0; /* Adjust padding */
        margin-bottom: 15px; /* Adjust margin */
        /* Ensure no fixed left margin */
        margin-left: 0; /* Corrected */
        text-align: center; /* Center breadcrumb on smaller screens */
    }

    .form-section {
        /* Adjusted margins for smaller screens */
        margin: 10px; /* Use a consistent smaller margin */
        padding: 15px; /* Adjust padding */
        margin-bottom: 20px; /* Adjusted bottom margin */
    }

    .page-header-section {
        padding: 25px 15px; /* Adjust padding */
        margin: -15px -15px 20px -15px; /* Adjust negative margin based on container padding */
        /* Center the header content on smaller screens */
        text-align: center;
    }

    .page-title {
        font-size: 1.8rem; /* Adjust font size */
    }

    .section-title {
        font-size: 1.3rem; /* Keep consistent with base adjusted size */
    }

    .form-grid {
        grid-template-columns: 1fr; /* Stack grid items on small screens */
        gap: 15px; /* Adjust gap */
    }

    .form-group.full-width {
        grid-column: auto; /* Reset column span */
    }

    .category-buttons {
        justify-content: center; /* Revert to center */
    }

    .format-options {
        flex-direction: column;
        gap: 10px; /* Keep original gap */
    }

    /* Adjust button container margins for smaller screens */
    .confirm-button-container {
        margin: 20px 10px 0 10px; /* Match form-section margin on small screens */
    }

    .confirm-session-button {
        padding: 10px 20px; /* Keep smaller padding */
        font-size: 1rem; /* Adjust font size */
        width: 100%; /* Make button full width on small screens */
        max-width: none; /* Remove max-width */
        margin-top: 0; /* Remove top margin from button, handled by container */
    }

    .form-group-inline {
        margin-bottom: 10px; /* Adjusted margin */
    }

    .form-group-inline label {
        margin-bottom: 5px; /* Adjusted margin */
    }

    .modal-content {
        width: 90%;
        padding: 20px;
    }
}

/* Adjustments for screens larger than 769px */
@media (min-width: 769px) {
    /* Show the br tag on desktop to create a line break in the subheading */
    .page-subheading .break-desktop {
        display: inline;
    }

     .page-title {
        font-size: 2.5rem; /* Restore original desktop font size */
     }

      .section-title {
        font-size: 1.5rem; /* Restore original desktop font size */
      }

    /* Adjust form section margins for larger screens */
    .form-section {
        /* Restore original larger margins on desktop, keep bottom margin */
        margin: 0 100px 30px 100px;
        padding: 20px; /* Keep original padding */
    }

    /* Adjust button container margins for larger screens */
    .confirm-button-container {
         margin: 40px 100px 0 100px; /* Match form-section margin on desktop screens */
    }


    /* Adjust confirm button padding for larger screens */
    .confirm-session-button {
         padding: 12px 20px; /* Keep original padding (width is handled by container) */
         width: 100%; /* Make button 100% width of its container */
         max-width: none; /* Remove max-width */
         margin-top: 0; /* Remove top margin from button, handled by container */
         font-size: 1.1rem; /* Restore original font size */
    }

    /* Adjust breadcrumb padding/margin for desktop */
    .breadcrumb {
        padding: 10px 0; /* Keep adjusted padding */
        margin-bottom: 20px; /* Restore original margin */
        text-align: left; /* Restore left alignment */
    }

    .form-group-inline {
        margin-bottom: 20px; /* Restore original margin */
    }

    .form-group-inline label {
        margin-bottom: 10px; /* Restore original margin */
    }
}

/* New CSS for DatePicker to show calendar and time side-by-side */
.react-datepicker {
  display: flex !important; /* Use flexbox for horizontal layout */
  flex-wrap: nowrap; /* Prevent wrapping on larger screens, force side-by-side */
  justify-content: center; /* Center content horizontally */
  align-items: flex-start; /* Align items to the top */
  width: auto !important; /* Allow it to take necessary width */
}

.react-datepicker__month-container {
  order: 1; /* Calendar first */
  flex: 1; /* Allow calendar to grow and shrink */
  min-width: 250px; /* Ensure a minimum width for the calendar */
}

.react-datepicker__time-container {
  order: 2; /* Time picker second */
  margin-left: 20px; /* Space between calendar and time */
  border-left: 1px solid #eee; /* Visual separator */
  padding-left: 20px;
  flex: 0 0 auto; /* Don't grow, don't shrink, take content width */
}

/* Adjust time container width for better layout */
.react-datepicker__time-container .react-datepicker__time {
  width: 120px; /* Adjust as needed */
}

/* Adjustments for date picker on smaller screens */
@media (max-width: 768px) {
  .react-datepicker {
    flex-direction: column; /* Stack calendar and time vertically on small screens */
    align-items: center;
  }

  .react-datepicker__time-container {
    margin-left: 0;
    margin-top: 20px; /* Add space when stacked */
    border-left: none;
    border-top: 1px solid #eee; /* Separator when stacked */
    padding-left: 0;
    padding-top: 20px;
  }
}

.select-therapist-button{
background-color: #07A76F;
}






/* Therapist Selection Trigger (now for summary and button) */
.therapist-selection-summary {
  font-size: 1rem;
  color: #2d3748;
  margin-bottom: 15px;
  text-align: left; /* Align text to left */
}

/* New: Container for section title and the "See All" button */
.therapist-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px; /* Adjust margin as needed */
}

.therapist-section-header .section-title {
  margin-bottom: 0; /* Remove default bottom margin to align with button */
}

/* Styles for the "See All Therapists" button when it's in the header */
.view-all-therapists-header-button {
  background-color: #07A76F; 
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 15px; /* Slightly smaller padding for header placement */
  font-size: 0.9rem; /* Slightly smaller font size */
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 5px rgba(74, 144, 226, 0.2);
  white-space: nowrap; /* Prevent text wrapping */
}

.view-all-therapists-header-button:hover {
  background-color: #047851;
  transform: translateY(-1px);
}


/* New: Therapist Preview Grid */
.therapist-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjusted for 4 cards */
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 25px; /* Space before the "See All" button */
}

.therapist-card-preview {
  background-color: #f0f4f8; /* Light background for cards */
  border: 2px solid #e2e8f0; /* Subtle border */
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.therapist-card-preview:hover {
  border-color: #a0aec0; /* Darker border on hover */
  background-color: #e2e8f0;
  transform: translateY(-3px); /* Slight lift on hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.therapist-card-preview.active {
  border-color: #07A76F; /* Green border when active */
  background-color: #e6fffa; /* Very light green background when active */
  box-shadow: 0 0 0 3px rgba(7, 167, 111, 0.3); /* Green glow */
  transform: scale(1.02); /* Slightly larger when active */
}

.therapist-avatar-preview {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
  border: 2px solid #cbd5e0; /* Border around avatar */
  transition: border-color 0.3s ease;
}

.therapist-card-preview.active .therapist-avatar-preview {
  border-color: #07A76F; /* Green border for active avatar */
}

.therapist-name-preview {
  font-size: 1rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 3px;
}

.therapist-specialty-preview {
  font-size: 0.8rem;
  color: #718096;
}

/* Container for therapist action buttons (like "See All") */
/* This will now primarily be for spacing if needed below the preview,
   but the main "See All" button moves to the header. */
.therapist-actions {
  text-align: center; /* This can largely be removed or re-purposed */
  margin-top: 20px; /* Space above button */
  display: none; /* Hide if no longer needed for a button */
}

/* The original .view-all-therapists-button is now replaced by .view-all-therapists-header-button */
/* If you still need this style for something else, keep it. Otherwise, it can be removed */
.view-all-therapists-button {
  display: none; /* Hide the old button style */
}


/* Responsive adjustments for therapist preview on smaller screens */
@media (max-width: 768px) {
  .therapist-preview-grid { /* Adjusted for mobile view of preview cards */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
  }

  .therapist-avatar-preview {
    width: 60px;
    height: 60px;
  }

  .therapist-name-preview {
    font-size: 0.9rem;
  }

  .therapist-specialty-preview {
    font-size: 0.75rem;
  }

  .therapist-section-header {
    flex-direction: column; /* Stack title and button on small screens */
    align-items: flex-start;
  }

  .therapist-section-header .section-title {
    margin-bottom: 10px; /* Add some space when stacked */
  }

  .view-all-therapists-header-button {
    width: auto; /* Allow button to size naturally */
    padding: 8px 12px; /* Adjust padding for smaller screens */
    font-size: 0.8rem; /* Adjust font size for smaller screens */
  }
}

.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 1.7rem / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}

.react-datepicker__day-names {
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.5rem;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}
/* TherapistSelectionModal.css */

/* Overlay for the modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's above other content */
    backdrop-filter: blur(5px); /* Optional: adds a blur effect to the background */
}

/* Main modal content container */
.modal-content.therapist-modal-content {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 90%; /* Responsive width */
    max-width: 800px; /* Max width for larger screens */
    max-height: 90vh; /* Max height to allow scrolling if content is long */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensures content inside respects border-radius */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Consistent font as per provided code */
}

/* Modal Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f8f8;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.modal-header h2 {
    margin: 0;
    font-size: 2rem; /* Slightly larger font size for prominence */
    color: #2c3e50; /* A darker, more professional color */
    font-weight: 700; /* Bolder font weight */
    letter-spacing: 0.5px; /* Subtle letter spacing for better readability */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Very subtle text shadow */
}

.modal-close-button {
    background: none;
    border: none;
    font-size: 2rem;
    color: #888;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

.modal-close-button:hover {
    color: #555;
    background-color: #e9e9e9;
    transform: rotate(90deg);
}

/* Modal Body - scrollable content area */
.modal-body {
    padding: 20px 25px;
    flex-grow: 1; /* Allows it to take available space */
    overflow-y: auto; /* Enable vertical scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Search Input */
.therapist-search-input {
    width: calc(100% - 20px); /* Adjust for padding */
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.therapist-search-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Therapist List Grid - MODIFIED FOR 2 COLUMNS */
.therapist-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Adjusted for 2 columns on larger screens */
    gap: 20px; /* Space between cards */
    padding-bottom: 10px; /* Space before footer */
}

/* Individual Therapist Card */
.therapist-card-modal {
    background-color: #fefefe;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: row; /* Changed to row for horizontal layout within each card */
    align-items: flex-start; /* Align items to the top */
    text-align: left; /* Align text to the left */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    min-height: 180px; /* Adjusted min-height for horizontal layout */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width */
}

.therapist-card-modal:hover {
    border-color: #007bff;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.15);
    transform: translateY(-3px);
}

.therapist-card-modal.active {
    border: 2px solid #28a745; /* Green border for active */
    background-color: #e6ffe6; /* Light green background for active */
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.25);
    transform: none; /* Ensure no transform is applied when active to prevent clipping */
}

/* Therapist Avatar */
.therapist-avatar-modal {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px; /* Space to the right of the avatar */
    margin-bottom: 0; /* Reset margin-bottom */
    border: 3px solid #f0f0f0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* Prevent avatar from shrinking */
}

/* Therapist Details */
.therapist-details {
    flex-grow: 1; /* Allows details to take up remaining space */
    width: 100%;
    text-align: left; /* Align text to the left within the card */
}

.therapist-name-modal {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Show ellipsis for truncated text */
}

.therapist-specialty-modal {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 10px;
    font-style: italic;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Show ellipsis for truncated text */
}

/* Qualifications Section */
.therapist-qualifications {
    margin-top: 10px;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
}

.therapist-qualifications h4 {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 5px;
    font-weight: 600;
}

.therapist-qualifications ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: #777;
}

.therapist-qualifications li {
    margin-bottom: 3px;
    line-height: 1.3;
}

/* Languages */
.therapist-languages {
    font-size: 0.85rem;
    color: #777;
    margin-top: 10px;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Show ellipsis for truncated text */
}

/* Bio Snippet */
/* Removed .therapist-bio-snippet as per request */


/* Messages for empty states or search results */
.no-therapists-message,
.no-results-message {
    text-align: center;
    color: #777;
    font-size: 1.1rem;
    padding: 30px 0;
}

/* Modal Footer */
.modal-footer {
    padding: 20px 25px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f8f8;
    display: flex;
    justify-content: flex-end; /* Align button to the right */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.confirm-selection-button {
    background-color: #2ecc71; /* Primary green */
    background: linear-gradient(to bottom right, #2ecc71, #27ae60); /* Subtle gradient */
    color: white;
    padding: 14px 28px; /* Increased padding for a larger button */
    border: none;
    border-radius: 10px; /* Slightly more rounded corners */
    font-size: 1.15rem; /* Larger font size */
    font-weight: 600; /* Bolder text */
    cursor: pointer;
    transition: all 0.3s ease; /* Smoother transitions for all properties */
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3); /* More pronounced shadow */
}

.confirm-selection-button:hover {
    background-color: #27ae60; /* Darker green on hover */
    background: linear-gradient(to bottom right, #27ae60, #229a53); /* Darker gradient on hover */
    transform: translateY(-2px); /* Lift effect on hover */
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4); /* Enhanced shadow on hover */
}

.confirm-selection-button:disabled {
    background-color: #cccccc;
    background: linear-gradient(to bottom right, #cccccc, #bbbbbb); /* Grey gradient for disabled */
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .modal-content.therapist-modal-content {
        width: 95%;
        margin: 20px; /* Add some margin on small screens */
    }

    .therapist-list {
        grid-template-columns: 1fr; /* Single column layout on small screens */
    }

    .therapist-card-modal {
        flex-direction: row; /* Keep horizontal layout for cards on small screens */
        text-align: left;
        align-items: flex-start;
    }

    .therapist-avatar-modal {
        margin-right: 15px;
        margin-bottom: 0;
    }

    .modal-header h2 {
        font-size: 1.5rem;
    }

    .confirm-selection-button {
        width: 100%; /* Full width button on small screens */
        padding: 15px;
    }
}
/* --- CSS Variables for Theming --- */
:root {
    --primary-brand-color: #07A76F; /* The main purple/blue from the image */
    --primary-dark-text: #1F2937;
    --secondary-text-color: #6B7280;
    --border-color: #D1D5DB;
    --background-light: #F3f3ed;
    --background-promo: #07A76F;
    --error-color: #EF4444;
    --font-main: 'Poppins';
}

/* --- Main Page Layout --- */
.login-page-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    font-family: var(--font-main);
    background-color: var(--background-light);
  
}

/* --- Left Side: Form Section --- */
.login-form-section {
    flex: 1 1 50%; /* Takes up more space on larger screens */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    padding-top: 0px;
    background-color: #f3f3ed;
}

.login-form-wrapper {
    max-width: 420px;
    width: 100%;
    margin: auto; /* Vertically and horizontally centers the content block */
}

/* --- Header --- */
.login-header {
    text-align: center;
    margin-bottom: 2.5rem;
  
}

.login-logo {
    height: 40px;
    margin-bottom: 1.5rem;
}

.login-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-dark-text);
    margin-bottom: 0.5rem;
   
}

.login-header p {
    color: var(--secondary-text-color);
    font-size: 1rem;
}

/* --- Form Styling --- */
.login-form .input-group {
    margin-bottom: 1.25rem;
}

.login-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--primary-dark-text);
    text-align: left;
}

.login-form input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-form input:focus {
    outline: none;
    border-color: var(--primary-brand-color);
    box-shadow: 0 0 0 3px rgba(74, 70, 229, 0.2);
}

/* --- Password Field with Icon --- */
.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 3rem; /* Make space for the button */
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--secondary-text-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.password-toggle-btn:hover {
    background-color: #f3f4f6;
}


/* --- Form Options (Remember Me / Forgot Password) --- */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.remember-me-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primar-text-color);
    cursor: pointer;
}

.remember-me-checkbox input {
    width: auto;
}

.forgot-password-link {
    color: var(--primary-brand-color);
    font-weight: 500;
    text-decoration: none;
    
}
.forgot-password-link:hover {
    text-decoration: underline;
    color: #068F5E;
}

/* --- Error Message --- */
.error-message {
    color: var(--error-color);
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* --- Buttons and Links --- */
.login-button {
    width: 100%;
    padding: 0.875rem;
    border: none;
    border-radius: 8px;
    background-color: var(--primary-brand-color);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.login-button:hover {
    background-color: #068F5E;
}

.divider {
    text-align: center;
    margin: 2rem 0;
    color: var(--secondary-text-color);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.divider::before, .divider::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: var(--border-color);
}

.social-login {
    display: flex;
    gap: 1rem;
}

.social-btn {
    flex-grow: 1;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--background-light);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}


.signup-prompt {
    text-align: center;
    margin-top: 2rem;
    color: var(--secondary-text-color);
}

.signup-link {
    color: var(--primary-brand-color);
    font-weight: 500;
    text-decoration: none;
}
.signup-link:hover {
    text-decoration: underline;
    color: #068F5E;
    
    
}

/* --- Footer --- */
.login-footer {
    text-align: center;
    padding: 1rem 0;
    font-size: 0.875rem;
    color: var(--secondary-text-color);
    display: flex;
    justify-content: space-between;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
}

.login-footer a {
    color: var(--secondary-text-color);
    text-decoration: none;
}
.login-footer a:hover {
    text-decoration: underline;
}


/* --- Right Side: Promo Section --- */
.login-promo-section {
    flex: 1 1 50%;
    background-color: var(--background-promo);
    color: white;
    display: flex;
    align-items: start;
    justify-content: center;
    padding: 3rem;
    position: relative;
    background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 1rem 1rem;
}

.promo-content {
    text-align: center;
    max-width: 450px;
}

.promo-content h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 3rem;
    margin-top: 0;
    text-align: left;
}



.promo-image {
    width: 100%;
    border-radius: 12px;
   
    
    
}

/* --- Responsive Design --- */
@media (max-width: 1024px) {
    .login-promo-section {
        display: none; /* Hide promo section on tablets and below */
    }
    .login-form-section {
        flex-basis: 100%;
    }
}

@media (max-width: 480px) {
    .login-form-section {
        padding: 1rem;
    }
    .login-header h1 {
        font-size: 1.8rem;
    }
    .social-login {
        flex-direction: column;
    }
    .login-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* --- CSS Variables --- */
:root {
    --brand-primary: #07A76F;
    /* The vibrant blue from the design */
    --brand-dark: #0D0D0D;
    --text-light: #FFFFFF;
    --text-secondary: #6B7280;
    --bg-light: #F3f3ed;
    --bg-panel: #07A76F;
    --border-color: #E5E7EB;
    --border-focus-color: #07A76F;
    --error-color: #EF4444;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Main Layout --- */
.signup-page-container {
    display: flex;
    min-height: 100vh;
    font-family: var(--font-main);

}

.signup-promo-panel {
    flex: 0 0 40%;
    background-color: var(--bg-panel);
    color: var(--text-light);
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.promo-content .promo-logo {


    color: var(--text-light);
    text-decoration: none;
    display: block;
    margin-bottom: 2rem;
    text-align: left;
}

.promo-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-align: left;
}

.promo-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.8;
    max-width: 400px;
    text-align: left;
}

.signup-form-panel {
    flex: 1 1 60%;
    background-color: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.form-container {
    width: 100%;
    max-width: 550px;
}

/* --- Step Indicator --- */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-secondary);
    transition: color 0.3s;
}

.step-item.active {
    color: var(--brand-primary);
    font-weight: 600;
}

.step-number {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    font-weight: 600;
    background-color: var(--bg-light);
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

.step-item.active .step-number {
    border-color: var(--brand-primary);
    background-color: var(--brand-primary);
    color: var(--text-light);
}

.step-label {
    font-size: 0.875rem;

}

.step-connector {
    flex-grow: 1;
    height: 2px;
    background-color: var(--border-color);
    margin: 0 1rem;
    transform: translateY(-1rem);
    /* Align with the middle of the number */
    transition: background-color 0.3s;
}

.step-connector.active {
    background-color: var(--brand-primary);
}


/* --- Form Styling --- */
.form-header {
    margin-bottom: 2rem;
    text-align: left;
}

.form-header h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--brand-dark);

}

.form-row {
    display: flex;
    gap: 1.5rem;
    width: 100%;
}

.input-group {
    margin-bottom: 1.5rem;
    width: 100%;
}

.input-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--brand-dark);
    font-size: 0.875rem;
    text-align: left;
}

.input-group input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-group input:focus {
    outline: none;
    border-color: var(--border-focus-color);
    box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.2);
}

.form-hint {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: -0.75rem;
    margin-bottom: 1.5rem;
}

.error-message {
    color: var(--error-color);
    background-color: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.1);
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.submit-button {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    background-color: var(--brand-primary);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
    margin-top: 1rem;
}

.submit-button:hover {
    background-color: #068F5E;
}

.submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.login-prompt {
    text-align: center;
    margin-top: 2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.login-prompt a {
    color: var(--brand-primary);
    font-weight: 500;
    text-decoration: none;
}

.login-prompt a:hover {
    text-decoration: underline;
}

/* --- Step 3: OTP/Verification Step --- */
.otp-step {
    text-align: center;
    padding: 2rem 0;
}

.otp-check-icon {
    width: 60px;
    height: 60px;
    color: #22c55e;
    /* Green */
    margin-bottom: 1rem;
}

.otp-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.otp-text {
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto 1rem;
}

.otp-hint {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.resend-link {
    background: none;
    border: none;
    color: var(--brand-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}


/* --- Responsive Design --- */
@media (max-width: 1024px) {
    .signup-page-container {
        flex-direction: column;
    }

    .signup-promo-panel {
        flex: 0 0 auto;
        text-align: center;
    }

    .promo-content {
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .step-label {
        display: none;
        /* Hide labels on very small screens */
    }

    .step-connector {
        transform: translateY(-0.8rem);
    }
}

/* Add this to your SignUpPage.css file */

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.back-button {
    background-color: #07A76F;
    border: 1px solid #e0e0e0;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.back-button:hover {
    background-color: #068F5E;
}

/* Password toggle styles consistent with LoginPage */
.password-group .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-group .password-wrapper input {
    width: 100%;
    padding-right: 44px;
    /* space for icon */
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    border-radius: 4px;
}

.password-toggle:hover {
    color: #222;
}

.password-toggle:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* Success message styling */
.success-message {
    color: #047857;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* Checkbox styling for terms agreement */
.checkbox-group {
    margin: 1.5rem 0;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.5;
}

.checkbox-container input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s ease;
}

.checkbox-container input[type="checkbox"]:checked+.checkmark {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.checkbox-container input[type="checkbox"]:checked+.checkmark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    color: var(--text-secondary);
    flex: 1;
}

.checkbox-text a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 500;
}

.checkbox-text a:hover {
    text-decoration: underline;
}@media (max-width: 768px) {

    .sidebar.open+.hamburger,
    .sidebar.open~.hamburger,
    .sidebar.open~.content-wrapper .hamburger {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .main-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
        min-height: 56px;
        gap: 8px;
    }

    .header-left {
        width: 100%;
        gap: 6px;
    }

    .main-header h1 {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
        color: #111;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dev-flag {
        align-self: flex-start;
    }

    .dev-badge {
        font-size: 9px;
        padding: 3px 6px;
    }

    .dev-text {
        font-size: 11px;
    }

    .header-actions {
        gap: 8px;
        align-self: flex-end;
        margin-top: -40px;
    }

    .custom-dropdown-container {
        width: auto;
        min-width: 120px;
        margin-right: 8px;
    }

    .chat-icon-container {
        margin-right: 8px;
    }

    .user-profile {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 240px;
        height: 100%;
        background-color: #fff;
        z-index: 2000;
        transition: left 0.3s ease-in-out;
    }

    .sidebar.open {
        left: 0;
    }
}

/* Hamburger menu styles */
.hamburger {
    display: none;
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2100;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: background 0.2s;
}

.hamburger:hover {
    background: #f5f5f5;
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
    }
}

/* General Layout */
.dashboard-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #f7f8fc;
    font-family: 'Inter', sans-serif;
    color: #000;
}

/* Sidebar (Compact) */
.sidebar {
    width: 210px;
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 0;
    flex-shrink: 0;
}

.logo-container {
    padding: 0 16px;
    margin-bottom: 24px;
    text-align: center;
}

.logo-img {
    max-width: 120px;
    height: auto;
}

.sidebar-nav ul,
.sidebar-bottom ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li,
.sidebar-bottom li {
    display: flex;
    align-items: center;
    padding: 9px 16px;
    margin: 0 10px 4px 10px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.3s, color 0.3s;
}

.sidebar-nav li:hover,
.sidebar-bottom li:hover {
    background-color: #eef2ff;
    color: #07A76F;
}

.sidebar-nav li.active {
    background-color: #eef2ff;
    color: #07A76F;
    font-weight: 600;
}

.sidebar-nav svg,
.sidebar-bottom svg {
    margin-right: 10px;
    font-size: 16px;
}

/* Content Area (Compact) */
.content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background-color: #f7f8fc;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.main-header h1 {
    font-size: 22px;
    font-weight: 600;
    color: #111;
    margin: 0;
}

/* Dev Flag Styles */
.dev-flag {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dev-badge {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
    animation: pulse 2s infinite;
}

.dev-text {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.scrollable-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 24px;
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollable-content::-webkit-scrollbar {
    display: none;
}

.chat-icon {
    width: 30px;
    height: 30px;
}




/* Header Actions (Compact) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1px;
}

.view-selector select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 30px 8px 12px;
    font-size: 14px;
    background-color: #fff;
    cursor: pointer;
    font-weight: 500;
    color: #000;
}

.view-selector-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #888;
}

.user-profile .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

/* --- Dashboard Grid Layout (12 Columns) --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.grid-col-span-1 {
    grid-column: span 1;
}

.grid-col-span-2 {
    grid-column: span 2;
}

.grid-col-span-3 {
    grid-column: span 3;
}

.grid-col-span-4 {
    grid-column: span 4;
}

.grid-col-span-6 {
    grid-column: span 6;
}

.grid-col-span-8 {
    grid-column: span 8;
}

.grid-col-span-9 {
    grid-column: span 9;
}

.grid-col-span-12 {
    grid-column: span 12;
}


/* --- Widget & Chart Card Styling --- */
.widget-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.card-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    text-align: start;
}

.card-headerr {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    text-align: center;
}

.card-headerr h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    text-align: center;
    width: 100%;
}


.card-actions {
    display: flex;
    gap: 8px;
}

.time-filter-btn {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.time-filter-btn.active {
    background-color: #07A76F;
    color: white;
    border-color: #07A76F;
}

/* --- Specific Widget Styles --- */
.stat-card {
    justify-content: center;
    text-align: center;
    padding: 28px;

}

.stat-value-unit {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    margin-top: -4px;
    /* Space between value and unit */
}

.stat-title {
    font-size: 13px;
    color: #000;
    margin: 10px 0 0 0;
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 20px 0 8px 0;
    text-align: center;
}

.stat-changed {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.stat-changed.increase {
    color: #059669;
}

.stat-changed.decrease {
    color: #dc2626;
}

.last,
.stat-changed {
    display: inline-block;
    margin-right: 8px;
    font-size: 12px;
    color: #888;
}

.metric-change {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.2px 6px;
    color: #1B5E20;
    justify-content: center;
    background-color: #E6FAEC;
    border-radius: 20PX;
}

.metric-change.increase {
    color: #059669;
}

.metric-change.decrease {
    color: #dc2626;
}

.last,
.metric-change {
    display: inline-block;
    margin-right: 8px;
    font-size: 12px;
    color: #888;
}

.stat-row {
    text-align: center;
}

.stat-change {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.2px 6px;
    color: #1B5E20;
    justify-content: center;
    background-color: #E6FAEC;
    border-radius: 20PX;
}

.stat-change.increase {
    color: #059669;
}

.stat-change.decrease {
    color: #dc2626;
}

.last,
.stat-change {
    display: inline-block;
    margin-right: 8px;
    font-size: 12px;
    color: #888;
}



.mood-score h2 {
    font-size: 24px;
    margin: 0;
    text-align: start;
}

.mood-score .stat-change {
    font-size: 13px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #111;
}

.activity-item {
    display: grid;
    grid-template-columns: 120px 50px 1fr 50px;
    /* Adjusted to make bar take full space */
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.activity-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
}

.activity-bar-container {
    background-color: #f3f4f6;
    border-radius: 4px;
    height: 8px;
    width: 100%;
}

.activity-bar {
    background-color: #07A76F;
    height: 100%;
    border-radius: 4px;
}

.activity-value {
    text-align: left;
    font-weight: 500;
}

.activity-change {
    font-size: 12px;
    text-align: right;
}

.activity-change.increase {
    color: #059669;
}

.activity-change.decrease {
    color: #dc2626;
}

/* --- Key Metrics Grid --- */
.key-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    height: 100%;

}

.key-metric-card {
    background-color: #f9fafb;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;

}

.metric-container {
    display: flex;
    align-items: center;
    /* Align icon and text vertically */
    gap: 8px;
    /* Add spacing between icon and text */
    margin-bottom: 40px;
}

.metric-icon {
    font-size: 14px;
    color: #07A76F;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-title {
    font-size: 12px;
    color: black;
    margin: 0 0 4px 0;
    text-align: center;
}

.metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0%;
    text-align: center;
}

.metric-change {
    font-size: 10px;
    font-weight: 500;
    gap: 4px;
    text-align: center;
    margin-bottom: 40px;

}

.metric-change.increase {
    color: #059669;
}

.metric-change.decrease {
    color: #dc2626;
}



.loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 18px;
    color: #555;
}

/* View loading styles */
.view-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    gap: 20px;
}

.view-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #07A76F;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.view-loading-text {
    font-size: 16px;
    color: #666;
    font-weight: 500;
    margin: 0;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}





/* Modern Styles for the dropdown menu (view-selector) */
.custom-dropdown-container {
    position: relative;
    display: inline-block;
    /* Crucial: Allows width to shrink-wrap content */
    font-size: 14px;
    color: #333;
    cursor: pointer;
    user-select: none;
    z-index: 10;
}


.dropdown-header {
    display: flex;
    align-items: center;
    padding: 6px 15px;
    /* Adjust padding to match image */
    border: none;
    /* No border directly on header, handled by container */
    border-radius: 6px;
    /* Matches container radius */
    background-color: #ffffff;
    /* Solid white background */
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: #333333;
    /* Darker text color from image */
    /* No direct box-shadow on header, it's on the container */
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Keep transitions for hover */
}

.dropdown-header:hover {
    background-color: #f5f5f5;
    /* Slight hover effect */
}


.dropdown-header-icon {
    margin-right: 8px;
    /* Slightly less margin for icon */
    font-size: 1.1rem;
    /* Adjusted icon size */
    color: #333333;
    /* Darker icon color to match text */
}

.dropdown-header span {
    flex-grow: 1;
    /* Allows text to take available space */
}

.dropdown-arrow {
    margin-left: 8px;
    /* Adjusted margin for arrow */
    transition: transform 0.3s ease;
    pointer-events: auto;
    /* Ensure the arrow is clickable */
    color: #666666;
    /* Grey color for arrow */
}

.dropdown-arrow.open {
    transform: rotate(180deg);
    /* Rotate only, not translateY, as it's part of flex */
}

.dropdown-list {
    position: absolute;
    top: calc(100% + 8px);
    /* Position below the header with less spacing */
    left: 0;

    background-color: #ffffff;
    /* Solid white background */
    border: 1px solid #dcdcdc;
    /* Light grey border from image */
    border-radius: 6px;
    /* Matches outer appearance */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Shadow matching inner list appearance */
    overflow: hidden;
    /* Keep this to ensure rounded corners are respected for list items */

    /* Explicitly ensure visibility and layout */
    display: flex;
    /* Use flexbox for vertical stacking of items */
    flex-direction: column;
    min-height: 50px;
    /* Ensure it has some height even if empty initially */
    max-height: 300px;
    /* Prevent it from getting too long, add scroll if needed */
    overflow-y: auto;
    /* Add scrollbar if content exceeds max-height */
    opacity: 1;
    /* Explicitly ensure full opacity */
    visibility: visible;
    /* Explicitly ensure visibility */
    padding: 5px 0;
    /* Padding inside the list container */
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    /* Padding for list items from image */
    font-size: 0.95rem;
    color: #333333;
    /* Dark text color */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;

    white-space: nowrap;
    /* Prevent text wrapping */
}

.dropdown-item:hover {
    background-color: #f0f8ff;
    /* Light blue hover effect from image */
    color: #337ab7;
    /* Blue text on hover */
}

.dropdown-item.selected {
    background-color: #e0f2f7;
    /* Lighter blue for selected state */
    color: #337ab7;
    /* Blue text for selected state */
    font-weight: 600;
    /* Bold for selected */
}

.dropdown-item.selected .dropdown-item-icon {
    color: #337ab7;
    /* Blue icon for selected state */
}

.dropdown-item-icon {
    margin-right: 8px;
    /* Margin for icon */
    font-size: 1.1rem;
    color: #666666;
    /* Grey icon color */
}

/* Styles for the optgroup label (heading) */
.dropdown-group-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #666666;
    /* Grey color for heading */
    padding: 10px 15px;
    /* Consistent padding */
    background-color: #f8f8f8;
    /* Very light grey background for heading */
    font-size: 0.85em;
    /* Slightly smaller font for heading */
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eeeeee;
    /* Lighter separator */
    border-top: 1px solid #eeeeee;
    /* Lighter separator */
    margin-top: 5px;
    /* Space above group label */
    margin-bottom: 5px;
    /* Space below group label */

}

.dropdown-group-icon {
    margin-right: 8px;
    font-size: 1.1rem;
    color: #666666;
    /* Grey icon color for heading */
}

/* Responsive adjustments for the dropdown */
@media (max-width: 600px) {
    .custom-dropdown-container {
        width: 180px;
        /* Adjust width for smaller screens */
    }

    .dropdown-header {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .dropdown-header-icon {
        font-size: 1rem;
    }

    .dropdown-arrow {
        margin-left: 4px;
    }

    .dropdown-item,
    .dropdown-group-label {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .dropdown-item-icon,
    .dropdown-group-icon {
        font-size: 0.95rem;

    }
}


/* Chatbot Icon */
.chat-icon-container {
    padding: 8px;
    border-radius: 50%;
    background-color: #f0f2f5;
    /* Light gray background */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 15px;
    /* Space between dropdown and chat icon */
}

.chat-icon-container:hover {
    background-color: #e0e2e5;
}

.chat-icon {
    font-size: 20px;
    color: #555;
}

/* Chatbot Sidebar */
.chatbot-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px;
    /* Adjust width as needed */
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transform: translateX(0);
    /* Start visible */
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

/* If you want the slide-in effect, you would initially set translateX to 100% and then 0% when active */
/* For this example, it's always "visible" when rendered.
   If you want a true slide-in, add a class 'open' and toggle that.
   Example:
   .chatbot-sidebar.open { transform: translateX(0); }
   .chatbot-sidebar { transform: translateX(100%); }
*/

.chatbot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    color: #333;
}

.chatbot-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.chatbot-header .close-icon {
    font-size: 20px;
    cursor: pointer;
    color: #888;
    transition: color 0.2s ease;
}

.chatbot-header .close-icon:hover {
    color: #333;
}

.chatbot-content {
    flex-grow: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center content vertically */
    text-align: center;
}

.chatbot-greeting {
    margin-bottom: 30px;
}

.chatbot-logo {
    width: 100px;
    /* Adjust size as needed */
    height: 100px;
    margin-bottom: 1px;
}

.chatbot-greeting h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.chatbot-greeting p {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
}

.chatbot-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.suggestion-button {
    background-color: #f0f2f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    color: #555;
    white-space: nowrap;
    /* Prevent text wrapping */
}

.suggestion-button:hover {
    background-color: #e0e2e5;
    border-color: #ccc;
}

.chatbot-input-area {
    display: flex;
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background-color: #fff;
    align-items: center;
}

.chatbot-input-area input {
    flex-grow: 1;
    border: 1px solid #ddd;
    border-radius: 25px;
    padding: 10px 15px;
    font-size: 14px;
    outline: none;
    margin-right: 10px;
}

.chatbot-input-area input:focus {
    border-color: #07A76F;
}

.send-button {
    background-color: #07A76F;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.2s ease;
}

.send-button:hover {
    background-color: #058c5c;
}

/* Ensure existing dropdown styles are not affected and have correct spacing */
.header-actions {
    display: flex;
    align-items: center;
}

.custom-dropdown-container {
    position: relative;
    margin-right: 15px;
    /* Adjust as needed for spacing */
}

.dropdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    background-color: #fff;
    transition: border-color 0.2s ease;
}

.dropdown-header:hover {
    border-color: #aaa;
}

.dropdown-header-icon {
    font-size: 18px;
    color: #555;
}

.dropdown-arrow {
    transition: transform 0.2s ease;
}

.dropdown-arrow.open {
    transform: rotate(180deg);
}

.dropdown-list {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    z-index: 100;
    padding: 8px 0;
}

.dropdown-filter-list {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 128px;
    z-index: 100;
    padding: 8px 0;
}

.dropdownn-filter-list {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 105px;
    z-index: 100;
    padding: 8px 0;
}

.dropdown-item,
.dropdown-group-label {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.dropdown-item:hover:not(.selected) {
    background-color: #f0f2f5;
}

.dropdown-item.selected {
    background-color: #e6f7f3;
    /* Light green for selected */
    color: #07A76F;
    /* Green text for selected */
    font-weight: 500;
}

.dropdown-item-icon,
.dropdown-group-icon {
    font-size: 16px;
    color: #888;
}

.dropdown-item.selected .dropdown-item-icon {
    color: #07A76F;
}

.dropdown-group-label {
    font-weight: 600;
    color: #666;
    margin-top: 5px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.dropdown-group-icon {
    margin-right: 5px;
}

.user-profile {
    margin-left: 0;
    /* Remove previous margin if any to allow chat icon to be between */
}


/* These styles help position the dropdowns to the right in the chart headers */
.card-header {
    display: flex;
    justify-content: space-between;
    /* Pushes content and dropdowns to ends */
    align-items: center;
    padding-bottom: 15px;
    /* Add some space below header */
}

.card-header .header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Space between multiple action elements if any */
}



.card-header .time-filter-dropdown .dropdown-header {
    padding: 6px 10px;
    /* Slightly smaller padding for header */
    font-size: 13px;
    /* Slightly smaller font size */
}

.card-header .time-filter-dropdown .dropdown-item {
    padding: 6px 10px;
    /* Slightly smaller padding for items */
    font-size: 13px;
    /* Slightly smaller font size */
}

/* If you want to make the 'mood-score' section and the dropdown align properly
   in Daily Therapy Sessions Chart, you might need to adjust its header structure slightly: */
/* Example:
.DailyTherapySessionsChart .card-header > div:first-child {
    flex-grow: 1; // Allows the title and score to take up available space
}
*/

/* Example CSS for explain button */
.explain-button {

    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: transparent;
    cursor: pointer;
    font-size: 0.9em;
    color: #555;
    transition: background-color 0.2s ease;
}

.explain-button:hover {
    background-color: #f0f0f0;
}




/* --- CSS for User Profile Logout Dropdown --- */

/* 1. Main container for the user profile section */
.user-profile {
    position: relative;
    /* This is crucial for positioning the dropdown */
    display: flex;
    align-items: center;
}

/* 2. The clickable header (avatar + arrow) */
.user-profile-header {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Adjusts space between avatar and arrow */
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
}

.user-profile-header:hover {
    background-color: #f0f0f0;
    /* Adds a subtle hover effect */
}

/* 3. The dropdown menu/list itself */
.profile-dropdown-list {
    position: absolute;
    top: 100%;
    /* Positions the dropdown just below the header */
    right: 0;
    margin-top: 8px;
    /* Adds a small gap from the header */
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 160px;
    /* Set a fixed width for the dropdown */
    z-index: 1000;
    /* Ensures the dropdown appears above other content */
    overflow: hidden;
    /* Keeps the sharp corners of items inside the rounded border */
    animation: fadeIn 0.2s ease-out;
    /* A nice fade-in effect */
}

/* 4. The "Logout" item inside the dropdown */
.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Space between the logout icon and the text */
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.profile-dropdown-item:hover {
    background-color: #fdecec;
    /* A reddish hover to signify a 'danger' action */
    color: #c53030;
}

/* 5. Styling for the FiLogOut icon */
.profile-dropdown-item svg {
    stroke-width: 2px;
    width: 18px;
    height: 18px;
    transition: stroke 0.2s ease-in-out;
}

.profile-dropdown-item:hover svg {
    stroke: #c53030;
    /* Match the icon color to the text on hover */
}

/* 6. Optional: A simple animation for the dropdown appearing */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

/* You might already have these styles, but ensure they exist for consistency */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #07A76F;
    /* Color taken from your charts */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
}

.dropdown-arrow {
    transition: transform 0.3s ease;
    color: #666;
}

.dropdown-arrow.open {
    transform: rotate(180deg);
}

/*
========================================
--- Responsive Font Scaling for Stat Cards ---
========================================
*/


.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        /* Stack all cards vertically */
    }

    .grid-col-span-1,
    .grid-col-span-2,
    .grid-col-span-3,
    .grid-col-span-4,
    .grid-col-span-6,
    .grid-col-span-8,
    .grid-col-span-9,
    .grid-col-span-12 {
        grid-column: span 12;
        /* Make every card full width */
    }

    .widget-card,
    .key-metric-card {
        padding: 12px;
    }

    .card-header h4,
    .stat-value,
    .stat-title,
    .stat-change,
    .metric-title,
    .metric-value,
    .metric-change {
        font-size: 80%;
        /* Scale down text slightly */
    }
}

/* =============================
   Shimmer Skeletons (Charts/Lists)
   ============================= */
.skeleton {
    position: relative;
    background: #f0f2f5;
    overflow: hidden;
}

.shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 150px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
    animation: shimmer-slide 1.2s infinite;
}

@keyframes shimmer-slide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(300%);
    }
}

.skeleton-chart-wrapper {
    width: 100%;
    height: 200px;
    /* default; can be overridden inline */
    border-radius: 8px;
}

.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-row {
    height: 14px;
    border-radius: 6px;
}

.skeleton-row.small {
    height: 10px;
}

.skeleton-row.medium {
    height: 14px;
}

.skeleton-row.large {
    height: 20px;
}/* ChatbotSidebar.css */

/* Layout */
.chatbot-container {
  position: fixed;
  top: 0.1rem;
  right: 0rem;
  height: calc(100vh - 0.5rem);
  width: 430px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: 'poppins';
  z-index: 9999;
  color: black;
  font-size: 15px;
}

/* Header */
.chatbot-header {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #07A76F;
  flex-shrink: 0;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.chatbot-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff; /* Fixed for readability */
}

.chatbot-header button {
  color: #e5e7eb;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.chatbot-header button:hover {
  color: #ffffff;
}

/* Messages area - HIDDEN SCROLLBAR */
.chatbot-messages {
  flex: 1; 
  overflow-y: auto; 
  min-height: 0; 
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chatbot-messages::-webkit-scrollbar {
  display: none;
}
.chatbot-messages {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Welcome Screen */
.chatbot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #4b5563;
}

.chatbot-empty img {
  width: 6rem;
  height: 6rem;
  margin-bottom: 1rem;
  border-radius: 9999px;
}

.chatbot-empty h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.chatbot-empty p {
  margin-bottom: 1.5rem;
}

.chatbot-suggestions {
  width: 100%;
}

.chatbot-suggestion {
  width: 100%;
  text-align: left;
  background-color: #ffffff;
  color: #000000;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid #e9d5ff;
  cursor: pointer;
  transition: background-color 0.2s;
}

.chatbot-suggestion:hover {
  background-color: #9fe8ad;
}

/* Chat bubbles */
.chat-message {
  display: flex;
  max-width: 80%;
}

.chat-message.user {
  justify-content: flex-end;
  align-self: flex-end;
}

.chat-message.assistant {
  justify-content: flex-start;
  align-self: flex-start;
  max-width: 100%; /* Fixed so it doesn’t stretch full width */
}

.chat-bubble {
  padding: 0px 10px;
  border-radius: 0.5rem;
  word-break: break-word;
  text-align: left;
  line-height: 1.6;
}

.chat-bubble.user {
  background-color: #07A76F;
  color: white;
}

.chat-bubble.assistant {
  color: #1f2937;
  background-color: #ffffff;
  border-radius: 0.75rem;
  width: 100%;
}

/* Markdown formatting */
.chat-bubble.assistant p {
  margin: 0.5rem 0;
}

.chat-bubble.assistant h1,
.chat-bubble.assistant h2,
.chat-bubble.assistant h3,
.chat-bubble.assistant h4 {
  margin: 0.75rem 0 0.5rem;
  color: #111827;
}

.chat-bubble.assistant ul,
.chat-bubble.assistant ol {
  margin: 0.5rem 0;
  padding-left: 1.25rem; /* Better indentation */
  list-style-position: outside;
}

.chat-bubble.assistant li {
  margin: 0.25rem 0;
}

.chat-bubble.assistant code {
  background: #f3f4f6;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  word-break: break-word; /* Fixed long code overflow */
}

.chat-bubble.assistant pre {
  background: #0b1220;
  color: #e5e7eb;
  padding: 0.75rem;
  border-radius: 0.5rem;
  overflow: auto;
}

/* Tables inside assistant messages */
.chat-bubble.assistant table {
  border-collapse: collapse;
  margin: 0.75rem 0;
  max-width: 100%;
}

.chat-bubble.assistant th,
.chat-bubble.assistant td {
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.chat-bubble.assistant th {
  background-color: #f9fafb;
  font-weight: 600;
}

/* Footer input area */
.chatbot-footer {
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
  background-color: #ffffff;
  flex-shrink: 0;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.chatbot-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chatbot-input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #07A76F;
  border-radius: 0.5rem;
  outline: none;
  transition: box-shadow 0.2s;
  background-color: #f9fafb;
  color: black;
}

.chatbot-input:focus {
  border-color: #07A76F;
  box-shadow: 0 0 0 2px #07A76F;
  background-color: #fff;
}

.chatbot-send-btn {
  padding: 0.5rem;
  height: 2.5rem;
  width: 2.5rem;
  background-color: #07A76F;
  color: white;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.chatbot-send-btn:hover:not(:disabled) {
  background-color: #059a63;
}

.chatbot-send-btn:disabled {
  background-color: #d1d5db;
  cursor: not-allowed;
}

.spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.plan-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.plan-dialog {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    animation: dialogSlideIn 0.3s ease-out;
}

@keyframes dialogSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

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

.plan-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0 24px;
    margin-bottom: 16px;
}

.plan-dialog-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
}

.plan-dialog-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.plan-dialog-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.plan-dialog-content {
    padding: 0 24px 24px 24px;
    text-align: center;
}

.plan-dialog-icon {
    color: #f59e0b;
    margin-bottom: 16px;
}

.plan-dialog-icon svg {
    width: 48px;
    height: 48px;
}

.plan-dialog-message {
    font-size: 16px;
    color: #374151;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.plan-dialog-submessage {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.plan-dialog-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 0 24px 24px 24px;
}

.plan-dialog-button {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    min-width: 100px;
}

.plan-dialog-button.primary {
    background: #07a76f;
    color: white;
}

.plan-dialog-button.primary:hover {
    background: #059669;
    transform: translateY(-1px);
}

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

.plan-dialog-button.secondary:hover {
    background: #e5e7eb;
}

@media (max-width: 480px) {
    .plan-dialog {
        margin: 20px;
        max-width: calc(100vw - 40px);
    }

    .plan-dialog-actions {
        flex-direction: column;
    }

    .plan-dialog-button {
        width: 100%;
    }
}/* --- Main Page Layout --- */
.people-page-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #f7f8fc;
    font-family: 'Inter',   ;
    color: black;
}

/* --- Sidebar (Compact) --- */
.sidebar {
    width: 210px;
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 0;
    flex-shrink: 0;
}
.logo-placeholder {
    font-weight: bold; font-size: 20px; padding: 0 16px;
    margin-bottom: 24px; color: #333;
}
.sidebar-nav ul, .sidebar-bottom ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li, .sidebar-bottom li {
    display: flex; align-items: center; padding: 9px 16px;
    margin: 0 10px 4px 10px; font-size: 14px;
    color: #555; cursor: pointer; border-radius: 6px;
    transition: background-color 0.3s, color 0.3s;
}
.sidebar-nav li:hover, .sidebar-bottom li:hover {
    background-color:#f0f4f4; color: #07A76F;
}
.sidebar-nav li.active {
    background-color: #f0f4f4; color: #07A76F; font-weight: 600;
}
.sidebar-nav svg, .sidebar-bottom svg { margin-right: 10px; font-size: 16px; }

/* --- Content Area (Compact) --- */
.content-wrapper { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }
.main-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 24px; background-color: #ffffff; flex-shrink: 0;
    
}
.main-header h2 { font-size: 22px; font-weight: 600; color: #111; margin: 0; }
.scrollable-content { flex-grow: 1; overflow-y: auto; background-color: #ffffff; }

/* --- Tabs & Controls --- */
.tabs-nav {
    display: flex; gap: 20px; border-bottom: 1px solid #e0e0e0; padding: 0 6px;
}
.tabs-nav button {
    background: none; border: none; font-size: 15px; padding: 12px 0;
    cursor: pointer; color: #555; position: relative;
    border-bottom: 2px solid transparent;
    /* Ensure no border-radius is applied to the button itself */
    border-radius: 0; /* Add or ensure this line to remove any curvature */
}
.tabs-nav button.active {
    color: #07A76F; font-weight: 600; border-bottom-color: #07A76F ;
    /* If the curve persists, ensure no border-radius here either */
    border-bottom-left-radius: 0; /* Explicitly set to 0 */
    border-bottom-right-radius: 0; /* Explicitly set to 0 */
}

.page-controls {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 6px;
}
.search-bar-wrapper { position: relative; display: flex; align-items: center; }
.search-bar-wrapper input {
    border: 1px solid #ccc; border-radius: 6px; padding: 9px 12px 9px 34px;
    font-size: 14px; width: 250px; color:#111; background-color: white;
}
.search-bar-wrapper .search-icon {
    position: absolute; left: 10px; color: #888; font-size: 18px;
}

.primary-button {
    background-color: #07A76F; color: white; border: none;
    border-radius: 6px; padding: 9px 15px; font-size: 14px;
    font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;
    transition: background-color 0.2s;
}
.primary-button:hover { background-color: #057a55; }
.secondary-button {
    background-color: #f0f0f0; color: #333; border: 1px solid #ccc;
    border-radius: 6px; padding: 8px 14px; font-size: 14px;
    font-weight: 500; cursor: pointer; transition: background-color 0.2s;
}
.secondary-button:hover { background-color: #e0e0e0; }

.content-area { padding: 0 24px 24px 24px; }

/* --- Data Table --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0; /* Added border around the entire table */
    border-radius: 8px; /* Added rounded corners to the table */
    overflow: hidden; /* Ensures content respects border-radius */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
    margin-top: 24px; /* Add margin to separate from content above */
}

.data-table th, .data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    color: #111;
    background-color: #ffffff; /* Ensure cells have white background */
}

.data-table td {
    background-color: white;
}
.data-table th {
    font-size: 12px;
    color: #555;
    text-transform: uppercase;
    font-weight: 600;
    background-color: #f7f8fc; /* Light background for table header */
    
}

/* Remove border from the last row's cells */
.data-table tbody tr:last-child td {
    border-bottom: none;
}



.avatar-group { display: flex; align-items: center; gap: 10px; }
.avatar-group .avatar {
    width: 32px; height: 32px; border-radius: 50%; background-color: #eef2ff;
    color: #4f46e5; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 14px;
}
.main-text { font-weight: 600; color: #333; text-align: left;}
.sub-text { font-size: 13px; color: #777; }

.status-badge {
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}
.status-badge.active { background-color: #dcfce7; color: #166534; }
.status-badge.pending { background-color: #fef9c3; color: #854d0e; }
/* New status badge styles for 'Accepted', 'Expired', 'Revoked' */
.status-badge.accepted { background-color: #dcfce7; color: #166534; } /* Same as active */
.status-badge.expired { background-color: #f0f0f0; color: #555; }
.status-badge.revoked { background-color: #fee2e2; color: #991b1b; }

.action-cell {
    position: relative;
    text-align: right;
    white-space: nowrap; /* Prevent icons from wrapping */
}
.action-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px; /* Existing size */
    color: #888; /* Default color for action icons */
    margin-left: 8px; /* Space between icons */
    transition: color 0.2s;
}
.action-button:hover {
    color: #333; /* Darker on hover */
}
/* Specific hover colors for action buttons if needed */
.action-button.revoke-icon:hover {
    color: #dc2626; /* Red for revoke */
}
.action-button.resend-icon:hover {
    color: #07A76F; /* Green for resend */
}

.action-dropdown {
    position: absolute; right: 20px; top: 35px; background: white;
    border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
}
.action-dropdown button {
    display: block; width: 100%; padding: 9px 14px; text-align: left;
    background: none; border: none; cursor: pointer; white-space: nowrap; font-size: 14px;
}
.action-dropdown button:hover { background-color: #f0f0f0; }

/* --- Empty States & Loading --- */
.empty-state-container {
    text-align: center; padding: 60px 40px; border: 1px dashed #ccc;
    border-radius: 12px; margin-top: 24px;
}
.empty-state-icon { font-size: 40px; color: #07A76F; background-color: #eef2ff;
    width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 20px auto;
    display: flex; align-items: center; justify-content: center;
}
.empty-state-container h2 { font-size: 18px; margin-bottom: 8px; }
.empty-state-container p { color: #555; margin-bottom: 20px; font-size: 14px; }
.empty-state-container .primary-button { margin: 0 auto; }
.loading-state, .loading-screen { padding: 40px; text-align: center; font-size: 16px; color: #555; }

/* --- Modals --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    /* Further reduced max-width for an even smaller modal */
    max-width: 360px; /* Adjusted from 400px */
    position: relative;
    /* You can also adjust padding if needed for a more compact look */
    /* padding: 20px; */
}
.modal-close-button {
    position: absolute; top: 12px; right: 12px; background: none;
    border: none; font-size: 22px; cursor: pointer; color: #888;
}
.modal-card h3 { font-size: 20px; margin: 0 0 8px 0; color: #111; }
.modal-subtitle { color: #555; margin: 0 0 20px 0; font-size: 14px; }
.input-group { margin-bottom: 16px; }
.input-group label {
    display: block; font-size: 13px; font-weight: 600;
    color: #555; margin-bottom: 6px;
}
.input-group input {
    width: 100%; border: 1px solid #ccc; border-radius: 6px;
    padding: 10px 12px; font-size: 14px;
    color: #111;
}
.modal-actions {
    display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px;
}
.error-text { color: #dc2626; font-size: 13px; margin-top: 8px; }
.success-text { color: #16a34a; font-size: 13px; margin-top: 8px; }

/* --- Create Team Modal Specifics --- */
.member-select-list {
    max-height: 180px; overflow-y: auto;
    border: 1px solid #ccc; border-radius: 8px; padding: 8px;color: #111;
}
.member-select-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px; border-radius: 6px; cursor: pointer;
}
.member-select-item:hover { background-color: #f0f0f0; }
.checkbox {
    width: 18px; height: 18px; border: 2px solid #ccc;
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
}
.checkbox.checked {
    background-color: #07A76F; border-color: #07A76F; color: white;
}

/* --- Pagination Controls (NEW) --- */
.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px; /* Adjust padding to match table cells */
    font-size: 14px;
    color: #555;
    background-color: #ffffff; /* White background to match table rows */
    border-top: 1px solid #e0e0e0; /* Separator from table body */
    border-bottom-left-radius: 8px; /* Match table's bottom corners */
    border-bottom-right-radius: 8px; /* Match table's bottom corners */
    margin-top: 20px;
}

.pagination-buttons {
    display: flex;
    gap: 10px;
}

.pagination-button {
    background-color: #f0f0f0; /* Light grey background as per image */
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 12px; /* Smaller padding for a more compact button */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.pagination-button:hover:not(:disabled) {
    background-color: #e0e0e0; /* Darker grey on hover */
}

.pagination-button:disabled {
    background-color: #f7f7f7; /* Lighter background for disabled */
    color: #bbb; /* Lighter text color for disabled */
    border-color: #e0e0e0; /* Lighter border for disabled */
    cursor: not-allowed;
    opacity: 1; /* Keep full opacity */
}

.results-info {
    color: #555;
    font-size: 14px;
}

/* Modal Search Bar Styles */
.modal-card .search-bar-wrapper {
    margin-bottom: 15px; /* Add some space below the search bar */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
}

.modal-card .search-bar-wrapper .search_icon {
    color: #888;
    margin-right: 8px;
}

.modal-card .search-bar-wrapper input[type="text"] {
    flex-grow: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
}

/* Styles for the action icon buttons in data tables */
.icon-button {
    background: none;
    border: none;
    color: #666; /* Default icon color */
    cursor: pointer;
    font-size: 18px; /* Adjust size as needed */
    padding: 5px;
    border-radius: 50%; /* Make it circular */
    display: inline-flex; /* Allows proper centering of icon */
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
    margin: 0 4px; /* Small spacing between buttons */
}

.icon-button:hover {
    background-color: #e0e0e0; /* Light background on hover */
    color: #333; /* Darker icon color on hover */
    transform: translateY(-1px); /* Slight lift effect */
}

.icon-button.danger {
    color: #dc2626; /* Red color for danger actions like delete/block */
}

.icon-button.danger:hover {
    background-color: #ffe0e0; /* Lighter red background on hover */
    color: #b91c1c; /* Darker red icon color on hover */
}

/* If you need a primary style for an icon button (e.g., for edit if it's a positive action) */
.icon-button.primary {
    color: #07A76F; /* Mentcura green */
}

.icon-button.primary:hover {
    background-color: #eef2ff; /* Light green background on hover */
    color: #057a55; /* Darker green on hover */
}

/* Basic styles for CustomAlertModal */
.custom-alert-modal {
    /* Inherits from .modal-card, but you can add specific overrides */
    max-width: 400px;
    text-align: center;
    padding: 30px;
}

.custom-alert-modal h3 {
    margin-bottom: 15px;
    color: #333;
}

.custom-alert-modal p {
    margin-bottom: 25px;
    color: #555;
    line-height: 1.5;
}

.custom-alert-modal .modal-actions {
    display: flex;
    justify-content: center; /* Center buttons */
    gap: 15px; /* Space between buttons */
}
.custom-alert-modal {
    max-width: 400px;
    text-align: center;
    padding: 30px;
}

.custom-alert-modal h3 {
    margin-bottom: 15px;
    color: #333;
}

.custom-alert-modal p {
    margin-bottom: 25px;
    color: #555;
    line-height: 1.5;
}

.custom-alert-modal .modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}
/* EmployeeSignupPage.css */

/* Basic Reset & Body Styles */
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', Arial, sans-serif; /* Or your preferred font */
  height: 100%;
  background-color: #f4f6f8; /* A light background for the page if needed */
}

.employee-signup-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Left Column (Graphic) */
.employee-signup-graphic-placeholder {
  flex-basis: 45%; /* Adjust as needed */
  background-image: url('/assets/employeeSignUp-YA3onkfY.webp'); /* --- REPLACE THIS --- */
  background-size: cover;
  background-position: center;
}

/* Right Column (Form) */
.employee-signup-form-column {
  flex-basis: 55%; /* Adjust as needed */
  background-color: #ffffff;
  padding: 40px 60px; /* Adjust padding as needed */
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.employee-header {
  margin-bottom: 30px;
  text-align: left;
}

.employee-logo {
  /*Assuming you might want to style the logo if it were visible here */
   /* Hide if not in this particular design view */
   max-width: 150px; 
   margin-bottom: 10px; 
   margin-left: 60px;
}

.employee-text { /* This is "Welcome to MentCura" */
  font-size: 28px; /* Adjust as needed */
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px; /* Space below "Welcome to MentCura" */
  margin-left:60px
}

.employee-inputs {
  width: 100%;
  max-width: 450px; /* Max width for the form elements */
  margin: 0 auto; /* Center the form elements if form-column is wider */
  }

.employee-input-group {
  margin-bottom: 20px; /* Space between each input group */
}

.employee-input-group label {
  display: block;
  font-size: 14px;
  color: #555555; /* Label text color */
  margin-bottom: 8px; /* Space between label and input */
  font-weight: 500;
  text-align: start;
  
}

.employee-input input, /* Targets inputs directly within .employee-input div */
input[id^="organizationName"], /* Specific targeting if needed */
input[id^="username"],
input[id^="fullName"],
input[id^="email"],
input[id^="phoneNumber"],
input[id^="password"],
input[id^="confirmPassword"] {
  width: 100%;
  padding: 12px 15px; /* Padding inside input fields */
  font-size: 16px;
  color: #333333; /* Text color when typing */
  background-color: #f7f7f7; /* Light grey background for inputs */
  border: 1px solid #eeeeee; /* Subtle border */
  border-radius: 6px; /* Rounded corners for inputs */
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.employee-input input::placeholder {
  color: #999999; /* Placeholder text color */
  opacity: 1; /* Firefox fix */
}

.employee-input input:focus {
  outline: none;
  border-color: #007bff; /* Example focus color - change to your brand color */
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* Example focus shadow */
}

/* Styling for read-only/disabled fields to match the pre-filled look in the image */
.employee-input input[readOnly],
.employee-input input[disabled] {
  background-color: #f0f2f5; /* Slightly different grey for disabled/readonly */
  color: #505050; /* Text color for disabled/readonly */
  cursor: not-allowed;
  border-color: #e0e0e0;
}
/* If Organization, Username, FullName in the image are meant to be non-editable visually:
   Ensure the corresponding inputs in your React component have `readOnly` and `disabled` props,
   or apply a specific class to them and style that class like the above.
   The JS code provided earlier makes Organization & Email readOnly/disabled.
*/


/* Wrapper for password input if you have a show/hide button */
.employee-password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.employee-password-input-wrapper input {
  /* Input takes most of the space */
  flex-grow: 1;
  /* If button is inside, remove its right padding or adjust */
  /* padding-right: 40px; */
}

.employee-show-password-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #777;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
}

.employee-show-password-button:hover {
  color: #333;
}


.employee-error-message {
  color: #dc3545; /* Red for error messages */
  font-size: 14px;
  margin-top: 5px; /* Space above error message if it's per field */
  margin-bottom: 15px; /* Space below error message if it's general */
  text-align: left;
}

.employee-submit-container {
  margin-top: 25px; /* Space above the create account button */
}

.employee-submit {
  width: 100%;
  padding: 14px 15px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff; /* White text on button */
  background-color: #00c853; /* Vibrant green from image - adjust if needed */
  border: none;
  border-radius: 6px; /* Rounded corners for button */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  text-align: center;
}

.employee-submit:hover {
  background-color: #00b048; /* Darker green on hover */
}

.employee-submit:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}


/* Styles for Loading and Error States (outside the main form) */
.employee-loading-message,
.employee-error-message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  text-align: center;
}
.employee-error-message-container h2 {
  color: #dc3545;
  margin-bottom: 10px;
}
.employee-error-message-container .employee-error-message { /* This targets the <p> inside error container */
  color: #333; /* General text color for the message itself */
  margin-bottom: 20px;
}
.employee-go-home-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
.employee-go-home-button:hover {
  background-color: #0056b3;
}


/* Modal Styles (basic, can be expanded) */
.employee-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.employee-modal-container {
  background-color: #fff;
  padding: 30px 40px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 450px;
  width: 90%;
}


.employee-modal-content h3 {
  font-size: 22px;
  color: #333;
  margin-top: 0;
  margin-bottom: 15px;
}

.employee-modal-content p {
  font-size: 16px;
  color: #555;
  margin-bottom: 25px;
  line-height: 1.6;
}

.employee-modal-button.employee-confirm-button {
  width: auto;
  min-width: 150px;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background-color: #00c853; /* Same green as submit */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.employee-modal-button.employee-confirm-button:hover {
  background-color: #00b048; /* Darker green on hover */
}


/* Responsive Adjustments (Example) */
@media (max-width: 768px) {
  .employee-signup-container {
    flex-direction: column;
  }

  .employee-signup-graphic-placeholder {
    flex-basis: auto; /* Auto basis or a fixed height */
    height: 250px; /* Or display: none; if not needed on mobile */
  }

  .employee-signup-form-column {
    flex-basis: auto;
    padding: 30px 20px; /* Adjust padding for smaller screens */
  }

  .employee-text { /* "Welcome to MentCura" */
    font-size: 24px;
  }

  .employee-inputs {
    max-width: 100%; /* Allow form to use more width on mobile */
  }
}/* --- Main Page Layout --- */
.page-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #f7f8fc;
    font-family: 'Inter',; /* Corrected font-family */
}

/* --- Sidebar (Remains the same size) --- */
.sidebar {
    width: 210px;
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 0;
    flex-shrink: 0;
}
.logo-placeholder {
    font-weight: bold; font-size: 20px; padding: 0 16px;
    margin-bottom: 24px; color: #333;
}
.sidebar-nav ul, .sidebar-bottom ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li, .sidebar-bottom li {
    display: flex; align-items: center; padding: 9px 16px;
    margin: 0 10px 4px 10px; font-size: 14px;
    color: #555; cursor: pointer; border-radius: 6px;
    transition: background-color 0.3s, color 0.3s;
}
/* User's preferred hover/active colors */
.sidebar-nav li:hover, .sidebar-bottom li:hover {
    background-color: #f0f4f4; color: #07A76F;
}
.sidebar-nav li.active {
    background-color:#f0f4f4; color: #07A76F; font-weight: 600;
}
.sidebar-nav svg, .sidebar-bottom svg { margin-right: 10px; font-size: 16px; }

/* --- Content Area (Header remains the same size) --- */
.content-wrapper { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }
.main-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 24px;
    background-color: #f7f8fc; flex-shrink: 0;
   
}
.main-header h2 { font-size: 22px; font-weight: 600; color: #111; margin: 0; }

/* --- Scrollable Content (This is the "zoomed out" area) --- */
.scrollable-content { flex-grow: 1; overflow-y: auto; padding: 24px; text-align: left; }

/* --- Buttons (Compact) --- */
.primary-button {
    background-color: #10B981; color: white; border: none; border-radius: 6px;
    padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background-color 0.2s;
}
.primary-button:hover { background-color: #059669; }
.primary-button.full-width { width: 100%; }
.secondary-button {
    background-color: #ffffff; color: #333; border: 1px solid #ccc; border-radius: 6px;
    padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background-color 0.2s;
}
.secondary-button:hover { background-color: #f0f0f0; }

/* --- Help & Support Sections (Compact) --- */
.support-section {
    background-color: #fff; padding: 20px; border: 1px solid #e0e0e0;
    border-radius: 12px; color: #111; margin-bottom: 20px;
}
.support-section h3 { margin: 0 0 20px 0; font-size: 16px; color: #111; text-align: left; }
.contact-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px; border: 1px solid #e0e0e0; border-radius: 6px;
    margin-bottom: 12px; color: #111;
    background-color: white;
}

.contact-row span { color: #555; font-size: 13px; }
.contact-row strong { color: #111; font-weight: 600; font-size: 13px; }
.input-group { margin-bottom: 12px; }
.input-group label {
    display: block; font-size: 13px; font-weight: 500; color: #333; margin-bottom: 6px;
}
.input-group input, .input-group select, .input-group textarea {
    width: 100%; border: 1px solid #ccc; border-radius: 6px; padding: 10px;
    font-size: 13px; font-family: 'Inter', sans-serif; color: #111;
}
.file-dropzone {
    border: 2px dashed #ccc; border-radius: 6px; padding: 20px;
    text-align: center; color: #555; cursor: pointer;
}
.file-dropzone svg { font-size: 22px; margin-bottom: 6px; color: #10B981; }
.file-dropzone p { font-weight: 600; margin: 0; font-size: 13px; }
.file-dropzone span { font-size: 11px; }

/* --- FAQ Section (Compact) --- */
.faq-section { color: #111; }
.faq-item:last-child { border-bottom: none; }
.faq-question {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; text-align: left; background: none; 
    padding: 12px 16px; font-size: 14px; font-weight: 600; cursor: pointer; color: #111; 
    background-color: white; margin-bottom: 8px; border: 1px solid #e0e0e0; border-radius: 6px;
}
.faq-question .chevron { transition: transform 0.2s; }
.faq-question .chevron.open { transform: rotate(180deg); }
.faq-answer { padding: 4px 16px 16px 16px; color: #555; line-height: 1.6; text-align: left; font-size: 13px; }

/* --- Ticket History & Details (Compact) --- */
.content-area { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 12px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
    padding: 12px 16px; text-align: left; border-bottom: 1px solid #e0e0e0; font-size: 13px;
}
.data-table th { font-size: 11px; color: #555; text-transform: uppercase; }
.data-table tr:last-child td { border-bottom: none; }
.status-badge, .priority-badge {
    padding: 3px 10px; border-radius: 12px; font-size: 11px;
    font-weight: 600; text-transform: capitalize;
}
.status-badge.open { background-color: #dbeafe; color: #1e40af; }
.status-badge.in-progress { background-color: #fef9c3; color: #854d0e; }
.status-badge.resolved, .status-badge.closed { background-color: #d1fae5; color: #065f46; }
.priority-badge.high { background-color: #fee2e2; color: #991b1b; }
.priority-badge.medium { background-color: #fef3c7; color: #92400e; }
.priority-badge.low { background-color: #dcfce7; color: #166534; }

.ticket-detail-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px; }
.ticket-detail-body { padding: 0 20px 20px 20px; border-bottom: 1px solid #e0e0e0; }
.ticket-detail-body h3, .support-thread h3 { font-size: 14px; margin: 0 0 12px 0; }
.ticket-actions { padding: 20px; border-top: 1px solid #e0e0e0; text-align: right; }




/* Styles for the resolved message */
.resolved-message {
    background-color: #e6ffe6; /* Light green background */
    border-left: 5px solid #4CAF50; /* Green left border */
    padding: 15px;
    margin-top: 20px;
    border-radius: 8px;
    font-size: 0.95em;
    color: #336633;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.resolved-message p {
    margin: 0;
    font-weight: 500;
}
/* --- Main Page Layout (Shared) --- */
.page-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #f7f8fc;
    font-family: 'Inter', ;
}

.sidebar {
    width: 210px;
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 0;
    flex-shrink: 0;
}


.data-table {
    width: 100%;
    border-collapse: collapse;
    /* This is important to ensure the border is continuous */
    margin-top: 20px;
    /* Adjust as needed for spacing */
    border: 1px solid #e0e0e0;
    /* Example border: 1px solid light gray */
    border-radius: 8px;
    /* Optional: adds rounded corners to the table */
    overflow: hidden;
    /* Ensures border-radius is applied correctly to content */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Optional: subtle shadow */
}

.data-table {
    border: 1px solid;
}

/* Existing styles for table rows, cells, etc. should remain */
.data-table th,
.data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    /* Keep individual row borders */
}

.data-table thead th {
    background-color: #f0f1f5;
    /* Light background for header */
    color: #8e8d8d;
    font-weight: 600;

}

.data-table tbody tr:last-child td {
    border-bottom: none;
    /* Remove border from the last row's cells */
}

.logo-placeholder {
    font-weight: bold;
    font-size: 20px;
    padding: 0 16px;
    margin-bottom: 24px;
    color: #333;
}

.sidebar-nav ul,
.sidebar-bottom ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li,
.sidebar-bottom li {
    display: flex;
    align-items: center;
    padding: 9px 16px;
    margin: 0 10px 4px 10px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.3s, color 0.3s;
}

.sidebar-nav li:hover,
.sidebar-bottom li:hover {
    background-color: #eef2ff;
    color: #07A76F;
}

.sidebar-nav li.active {
    background-color: #f0f4f4;
    color: #07A76F;
    font-weight: 600;
}

.sidebar-nav svg,
.sidebar-bottom svg {
    margin-right: 10px;
    font-size: 16px;
}

/* --- Content Area (Compact) --- */
.content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background-color: #ffffff;
    flex-shrink: 0;

}

.main-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: #111;
    margin: 0;
}

.scrollable-content {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #f7f8fc;
}

.content-area {
    padding: 24px;
}

/* --- Buttons --- */
.primary-button {
    background-color: #07A76F;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 9px 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
}

.primary-button:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.primary-button:hover:not(:disabled) {
    background-color: #057a55;
}

.secondary-button {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.secondary-button:hover {
    background-color: #f0f0f0;
}

/* --- Session List Table --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
}

.data-table th {
    font-size: 12px;
    color: #555;
    text-transform: uppercase;
    font-weight: 600;
    background-color: #f7f8fc;
    text-align: center;
}

data-table td {
    background-color: white;
}

.data-table tr:last-child td {
    border-bottom: none;
    background-color: white;
}

.status-badge {
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;

}

.status-badge.scheduled {
    background-color: #dcfce7;
    color: #166534;
}

.status-badge.completed {
    background-color: #fee2e2;
    color: #991b1b;
}

.status-badge.pending {
    background-color: #fef9c3;
    color: #854d0e;
}

/* --- Empty State --- */
.empty-state-container {
    text-align: center;
    padding: 50px 40px;
    border: none;
}

.empty-state-icon {
    font-size: 40px;
    color: #07A76F;
    background-color: #eef2ff;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-container h2 {
    font-size: 18px;
    margin-bottom: 8px;
}

.empty-state-container p {
    color: #555;
    margin-bottom: 20px;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
}

.empty-state-container .primary-button {
    margin: 0 auto;
}

.loading-state,
.loading-screen {
    padding: 40px;
    text-align: center;
    font-size: 16px;
    color: #555;
}

/* --- Booking Form --- */
.booking-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
}

.form-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-full-width {
    grid-column: 1 / -1;
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon svg {
    position: absolute;
    left: 12px;
    color: #888;
}

.input-with-icon input {
    padding-left: 40px;
}

.contact-confirmation-section {
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
    margin-top: 12px;
}

.contact-confirmation-section h3 {
    font-size: 16px;
    margin-bottom: 12px;
}

.contact-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
}

.contact-inputs .input-group:last-child {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
    margin-top: 12px;
}

.error-text {
    color: #dc2626;
    font-size: 13px;
    margin-top: 8px;
}

.data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    background-color: white;
    /* Applies white background to all table body cells */
}

/* --- Wellness Session Page Specific Layout --- */
/* Remove card styling from both views for consistent clean look */
.wellness-session-page .content-area.two-column-layout {
    background-color: transparent;
    margin: 0;
    padding: 0 0px 24px 0px;
    /* Much smaller horizontal padding for wider content */
    border: none;
    border-radius: 0;
}

/* Remove card styling when showing booking form (no two-column-layout class) */
.wellness-session-page .content-area:not(.two-column-layout) {
    background-color: transparent;
    margin: 0;
    padding: 0 16px 24px 16px;
    /* Much smaller horizontal padding for wider content */
    border: none;
    border-radius: 0;
}

.wellness-session-page .two-column-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.wellness-session-page .main-content {
    flex: 1;
    min-width: 0;
    /* Allows content to shrink properly */
}

.wellness-session-page .sidebar-calendar {
    flex: 0 0 280px;
    /* Reduced width for calendar sidebar */
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    padding: 0;
    overflow: hidden;
}

/* --- Booking Form Page Specific Layout --- */
.session-booking-page .content-area {
    background-color: transparent;
    margin: 0;
    padding: 24px;
    border: none;
    border-radius: 0;
}/* --- Main Layout Container --- */
.booking-layout-container {
    display: flex;
    gap: 0;
    width: 100%;
    align-items: flex-start;
    /* Align items to the top */
    color: #000;
    font-family: 'Inter', sans-serif;
    transition: gap 0.4s ease-in-out;
    box-sizing: border-box;
}

.booking-layout-container.profile-visible {
    gap: 24px;
}

.book-session-card {
    background-color: #fff;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    flex-grow: 1;
    flex-shrink: 1;
    /* Allow card to shrink */
    min-width: 600px;
    /* Prevent from becoming too small */
    /* Use flex-basis for initial width and smooth transition */
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: flex-basis 0.4s ease-in-out, width 0.4s ease-in-out, max-width 0.4s ease-in-out;
    /* Transition flex-basis */
    color: #000;
    font-family: 'Inter', sans-serif;

}

.booking-layout-container.profile-visible .book-session-card {
    flex-basis: 65%;
    width: 65%;
    max-width: 65%;
    /* Shrink form when profile is visible */
}

.book-session-card h2 {
    font-size: 22px;
    font-weight: 600;
    color: #111;
    margin: 0 0 24px 0;
}

/* --- Form Grid Layout --- */
.session-booking-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
}

.session-form-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.session-form-full-width {
    grid-column: 1 / -1;
}

/* --- Form Inputs & Groups --- */
.session-input-group {
    display: flex;
    flex-direction: column;
    color: #000;
}

.session-input-group label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
}

.session-input-group input,
.session-input-group select,
.session-input-group textarea {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 1px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    background-color: #f9fafb;
    color: #000;



}

.session-input-group input {
    width: 100%;

}

.session-input-group textarea {
    padding-left: 10px;
}

.session-input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    color: #000;
}

.session-input-with-icon svg {
    position: absolute;
    left: 12px;
    color: #888;
    color: #000;
}

.session-input-with-icon input {
    padding-left: 40px;
    color: #000;
}

/* --- Contact Section --- */
.session-contact-confirmation-section {
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
    margin-top: 12px;
}

.session-contact-title {
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 600;
}

.session-contact-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
    color: #000;
}

.phone-input-group {
    grid-column: 1
}


/* --- Form Actions & Errors --- */
.session-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
    margin-top: 12px;
}

.session-error-text {
    color: #dc2626;
    font-size: 13px;
    margin-top: 8px;
}

.primary-button {
    background-color: #07A76F;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 9px 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.primary-button:hover {
    background-color: #057a55;
}

.primary-button.disabled-with-lock {
    position: relative;
    background-color: #b5b5b5;
    cursor: not-allowed;
}

.primary-button.disabled-with-lock:hover {
    background-color: #b5b5b5;
}

.primary-button.disabled-with-lock::after {
    /* Lock icon removed for cleaner UI; keep pseudo-element hidden */
    content: '';
    display: none;
}

.secondary-button {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.secondary-button:hover {
    background-color: #f0f0f0;
}

/* --- Therapist Profile Sidebar --- */
.therapist-profile-sidebar {
    /* Initially hidden and takes no space */
    width: 0;
    flex-basis: 0;
    opacity: 0;
    padding: 0;
    /* Remove padding when hidden */
    /* MODIFIED: Make the slider come from top */
    transform: translateY(-100%);
    /* Start completely above its container */
    transition: width 0.4s ease-in-out, flex-basis 0.4s ease-in-out, opacity 0.3s ease-in-out, transform 0.4s ease-in-out, padding 0.4s ease-in-out, border 0.4s ease-in-out;
    overflow: hidden;
    /* Hide content when width is 0 */
    flex-shrink: 0;
    /* Prevent from shrinking below its content when visible */
    background-color: #fff;
    /* Ensure background color even when hidden, for smoother transition */
    border: none;
    /* Border for consistent look when visible */
    border-radius: 12px;
    /* REMOVED/REVERTED PREVIOUS UNWANTED CHANGES, KEEPING ORIGINAL POSITIONING */
    position: relative;
    /* Original */
}

.booking-layout-container.profile-visible .therapist-profile-sidebar {
    /* MODIFIED: Adjust width to be shorter */
    width: 300px;
    /* Target width when visible - made shorter */
    flex-basis: 300px;
    /* Target flex-basis when visible - made shorter */
    max-width: 300px;
    /* Max width to prevent it from getting too wide - made shorter */
    padding: 24px;
    /* Apply padding when visible */
    opacity: 1;
    /* Fade in */
    /* MODIFIED: Slide into view (from top) */
    transform: translateY(0);
    /* Slide into view (from top) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* Add a subtle shadow */
    border: 1px solid #e0e0e0;
}


.profile-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #888;
    z-index: 10;
    /* Ensure button is clickable */
}

.profile-close-btn:hover {
    color: #333;
}

.profile-header {
    text-align: center;
    margin-bottom: 20px;
}

.profile-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 12px auto;
    border: 2px solid #07A76F;
    /* Added a subtle border to the image */
}

.profile-header h3 {
    font-size: 18px;
    margin: 0 0 4px 0;
}

.pronouns {
    font-weight: normal;
    font-size: 14px;
    color: #666;
}

.specialization {
    font-size: 14px;
    color: #555;
}

.profile-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ADDED: Bio Truncation CSS */
.bio-section {
    /* Added a wrapper for bio and read more button */
    margin-bottom: 0;
    /* Adjust as needed, if bio-section handles its own margin */
}

.bio {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    /* Properties for truncating text after 4-5 lines */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    /* Limit to 5 lines initially */
    line-clamp: 5;
    -webkit-box-orient: vertical;
    white-space: pre-wrap;
    /* Preserve line breaks from bio text */
    /* REVERTED: removed text-align: justify; */
}

.read-more-btn {
    background: none;
    border: none;
    color: #07A76F;
    /* Match primary button color */
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    /* Slightly smaller font for the link */
    transition: color 0.2s ease;
    margin-top: 8px;
    /* Space between bio and button */
    display: block;
    /* Ensures button is on its own line */
}

.read-more-btn:hover {
    color: #057a55;
    text-decoration: underline;
    /* Add underline on hover for better UX */
}


.profile-meta p {
    font-size: 13px;
    color: #555;
    margin: 4px 0;
}

.profile-section h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    color: #222;
    /* Slightly darker for better contrast */
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    background-color: #e6f7f2;
    /* Lighter green background */
    color: #07A76F;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #b3e0d0;
    /* Subtle border for tags */
}

.credentials-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.credentials-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
}

.check-icon {
    color: #07A76F;
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.credentials-list li strong {
    display: block;
    font-weight: 600;
}

.credentials-list li span {
    color: #555;
}

/* --- Confirmation Modal --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.confirmation-modal-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    /* Stronger shadow for modal */
}

.confirmation-icon {
    font-size: 48px;
    color: #07A76F;
    margin-bottom: 16px;
}

.confirmation-modal-card h2 {
    font-size: 22px;
    margin: 0 0 8px 0;
}

.confirmation-modal-card p {
    color: #555;
    margin: 0 0 24px 0;
    line-height: 1.6;
}

/* Responsive adjustments for smaller screens (optional but recommended) */
@media (max-width: 1024px) {
    .booking-layout-container {
        flex-direction: column;
        /* Stack form and sidebar vertically */
        gap: 0;
        /* Remove gap when stacked */
    }

    .booking-layout-container.profile-visible .book-session-card {
        flex-basis: auto;
        /* Allow form to take natural width */
        width: 100%;
        /* Full width when stacked */
        margin-bottom: 24px;
        /* Space between form and stacked sidebar */
    }

    .therapist-profile-sidebar {
        /* When stacked, sidebar should also be full width and always visible */
        width: 100%;
        flex-basis: 100%;
        opacity: 1;
        /* Always visible if `profile-visible` class is handled differently for mobile */
        transform: translateY(0);
        /* No vertical transform when stacked */
        top: auto;
        /* Remove fixed top positioning on mobile */
        right: auto;
        /* Remove fixed right positioning on mobile */
        height: auto;
        /* Allow height to adjust naturally on mobile */
        position: static;
        /* Change to static for normal flow in stacked layout */
        padding: 24px;
        /* Always show padding if sidebar is meant to be shown below */
        border-radius: 12px;
        /* Maintain border radius */
        border: 1px solid #e0e0e0;
        /* Maintain border */
        box-shadow: none;
        /* Remove shadow if it's not a slide-in on mobile */
    }

    /* You might need to adjust the logic in your JS if you want the sidebar to appear as a full-screen modal or similar on mobile,
      instead of just stacking. The current JS controls `isProfileVisible` which still toggles the `profile-visible` class.
      For a mobile-first approach, you might want to consider a different presentation for the sidebar when screen size is small. */
}

@media (max-width: 768px) {
    .session-booking-form-grid {
        grid-template-columns: 1fr;
        /* Single column for form inputs on smaller screens */
        gap: 20px;
    }

    .session-contact-inputs {
        grid-template-columns: 1fr;
        /* Single column for contact inputs */
    }
}

/* Change color of time picker icon */
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
    cursor: pointer;
}

/* Change text color inside time picker */
input[type="time"] {
    color: #333;
    /* Change this to any text color */
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
    cursor: pointer;
}

/* Change text color inside time picker */
input[type="date"] {
    color: #333;
    /* Change this to any text color */
}

input[type="number"],
input[type="text"],
input[type="Email"],
input[type="tel"] {
    padding-left: 10px;
    /* Adds spacing inside the input */
    box-sizing: border-box;
    /* Ensures padding doesn't affect width */
}.gini-calendar {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.5s ease-in-out;
    margin-top: 12px;
    /* keep a little gap from top */
    display: flex;
    flex-direction: column;
    /* Let the calendar take available vertical space, parent should control overall page layout */
    max-height: calc(100vh - 140px);
}

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

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

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 14px;
    /* add consistent spacing between heading and button */
    flex-wrap: wrap;
    /* allow wrapping so heading can wrap and button stays aligned */
}

.calendar-header h2 {
    font-size: 1.3rem;
    /* Slightly smaller */
    font-weight: 600;
    color: #333;
    margin: 0;
    /* Remove default margin */
    flex-shrink: 0;
    /* Prevent shrinking */
}

.add-event-btn {
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    /* Smaller padding */
    font-size: 0.8rem;
    /* Smaller font */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap;
    /* Prevent text wrapping */
    flex-shrink: 0;
    /* Prevent shrinking */
    align-self: center;
    /* keep button vertically centered when heading wraps */
}

.add-event-btn:hover {
    background-color: #218838;
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 6px;
    /* space for scrollbar */
    /* Fill remaining space inside calendar, scroll when needed */
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.event-item {
    background-color: #f9f9f9;
    border-left: 5px solid;
    padding: 12px;
    /* smaller padding to match compact cards */
    border-radius: 8px;
    animation: slideIn 0.5s forwards;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    scroll-snap-align: start;
}

.event-details {
    flex: 1 1 auto;
    min-width: 0;
    /* allow flex child to shrink and wrap text */
}

.event-name {
    font-weight: 600;
    font-size: 0.98rem;
    /* slightly smaller */
    color: #333;
    line-height: 1.12;
    white-space: normal;
    /* allow wrapping */
    word-break: break-word;
}

.event-item.gc-new {
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(-4px);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.event-item:nth-child(odd) {
    animation-delay: 0.1s;
}

.event-item:nth-child(even) {
    animation-delay: 0.2s;
}

.event-details {
    display: flex;
    flex-direction: column;
}

.delete-btn {
    border: none;
    background: transparent;
    color: #b91c1c;
    /* icon color */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease;
}

.delete-btn:hover {
    background: rgba(185, 28, 28, 0.06);
    transform: translateY(-2px);
}

.delete-btn:active {
    transform: translateY(0);
}

.delete-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Force all SVG children to render using the button color and be visible */
.delete-btn svg * {
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.6 !important;
}

/* Higher-specificity fallbacks for react-icons and inline SVGs that may be styled globally */
.delete-btn>svg,
.delete-btn>svg * {
    color: inherit !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* Some SVGs use <path fill="#...">; explicitly override common attributes */
.delete-btn svg path,
.delete-btn svg rect,
.delete-btn svg circle {
    stroke: currentColor !important;
    fill: none !important;
}

/* Use an image for the delete icon (data-URI) and ensure it displays correctly */
.delete-btn img {
    width: 20px;
    height: 20px;
    display: block;
}

/* Modern thin rounded scrollbar (WebKit) */
.event-list::-webkit-scrollbar {
    width: 8px;
}

.event-list::-webkit-scrollbar-track {
    background: transparent;
}

.event-list::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.event-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.18);
}

/* Firefox scrollbar */
.event-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

/* subtle gradient indicators to hint more content */
/* removed gradient overlays to avoid visual clipping */

/* Slide-right removal animation */
.event-item.removing {
    animation: slideOutRight 0.35s ease forwards;
}

@keyframes slideOutRight {
    to {
        opacity: 0;
        transform: translateX(40px);
        height: 0;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.event-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
}

.event-date {
    font-size: 0.82rem;
    color: #666;
    margin-top: 6px;
}

.event-notes {
    margin-top: 6px;
    font-size: 0.78rem;
    color: #4b5563;
    background: #f8fafb;
    border: 1px dashed #eef2f3;
    padding: 6px 8px;
    border-radius: 6px;
}

/* Modal Styles */
.gc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-in;
}

.gc-modal {
    width: 90%;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.gc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.gc-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #111827;
}

.gc-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
}

.gc-close:hover {
    color: #111827;
}

.gc-form {
    padding: 14px 16px 16px;
}

.gc-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.gc-input-group label {
    font-size: 0.9rem;
    color: #374151;
    font-weight: 600;
}

.gc-input-group input,
.gc-input-group textarea {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.95rem;
    outline: none;
    background-color: white;
    color: black;
}

.gc-input-group input:focus,
.gc-input-group textarea:focus {
    border-color: #07A76F;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.gc-error {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fecaca;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.gc-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.gc-btn {
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
}

.gc-btn.primary {
    background: #07A76F;
    color: #fff;
}

.gc-btn.primary:hover {
    background: #07A76F;
}

.gc-btn.secondary {
    background: #f3f4f6;
    color: #111827;
}

.gc-btn.secondary:hover {
    background: #e5e7eb;
}

/* Past-event visual de-emphasis: subtle fade and lift for events in current month whose date has passed */
.event-item.past {
    opacity: 0.62;
    transform: translateY(-6px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    filter: saturate(0.96) brightness(0.99);
    transition: transform 260ms ease, opacity 260ms ease, box-shadow 260ms ease, filter 260ms ease;
    /* Stronger specificity to override entrance animations */
    opacity: 0.5 !important;
    /* ensure we keep any horizontal positioning from other animations */
    transform: translateX(0) translateY(-8px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.02) !important;
    filter: grayscale(0.18) contrast(0.98) !important;
    transition: transform 260ms ease, opacity 260ms ease, box-shadow 260ms ease, filter 260ms ease;
    /* Disable slide-in animation for past items so transform isn't overwritten */
    animation: none !important;
}

/* keep removal animation priority */
.event-item.removing {
    animation: slideOutRight 0.35s ease forwards;
}

/* Allow filled SVG for delete icon specifically (higher specificity, placed last) */
.gini-calendar .delete-btn svg.filled path,
.gini-calendar .delete-btn svg.filled {
    fill: currentColor !important;
    stroke: none !important;
}

/* Responsive: slightly smaller min-height on narrow viewports */
@media (max-width: 420px) {
    .event-list {
        --card-min-height: 56px;
    }

    .event-name {
        font-size: 0.94rem;
    }

    .event-date {
        font-size: 0.78rem;
    }
}

.month-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
}

.month-inline .month-label {
    font-weight: 700;
    color: #0f172a;
    min-width: 40px;
    text-align: center;
}


.month-nav.small {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e6edf3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
}

/* Enabled state: use primary green for icon and subtle border */
.month-nav.small:not(.disabled):not(:disabled) {
    color: #07A76F;
    /* primary green */
    border-color: rgba(7, 167, 111, 0.18);
}

.month-nav.small:not(.disabled):not(:disabled):hover {
    background: rgba(7, 167, 111, 0.06);
}

/* Ensure any SVG inside the month nav uses the currentColor (filled green) */
.month-nav.small svg,
.month-nav.small svg path,
.month-nav.small svg g {
    fill: currentColor !important;
    stroke: none !important;
}

.month-nav.small.disabled,
.month-nav.small:disabled {
    opacity: 0.36;
    cursor: not-allowed;
    background: transparent;
    border-color: #f0f2f4;
    color: inherit;
    /* don't force green when disabled */
}/* Color Palette (based on your overall website theme) */
:root {
    --mentcura-green-primary: #00BF63; /* Main vibrant green */
    --mentcura-green-secondary: #068658; /* Darker green for accents */

    --section-bg-light-green: #F3F3ED; /* Very light, subtle green for the section background */
    --table-bg-light: #FFFFFF; /* Pure white for the table background */
    --table-header-bg: #EBF3E7; /* Light greenish background for table header */
    --table-border-light: #E0E0E0; /* Subtle grey for borders */
    --table-row-hover: #F8F8F8; /* Very light grey on row hover */

    --text-dark: #2C2C2C; /* Dark text for headings and strong elements */
    --text-medium: #555555; /* Medium dark for body text */
    --text-light-subtle: #777777; /* Lighter text for minor details */

    --icon-cross-color: #FF6B6B; /* A friendly red for the cross icon */

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

/* --- Base Section Styling --- */
.difference-section {
    background-color: var(--section-bg-light-green); /* Overall section background */
    padding: 60px 20px;
    font-family: var(--font-body);
    color: var(--text-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.difference-header {
    margin-bottom: 40px;
    max-width: 900px;
}

.difference-main-heading {
    font-family: var(--font-heading);
    font-size: 2.8em;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.2;
}

.difference-sub-heading {
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text-medium);
    margin: 0 auto;
    max-width: 700px;
}

/* --- Table Container Styling --- */
.difference-container {
    max-width: 1200px;
    width: 100%;
    background-color: var(--table-bg-light); /* White background for the table */
    border-radius: 12px;
    overflow: hidden; /* Ensures rounded corners */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
    border: 1px solid var(--table-border-light); /* Light border around the table */
}

.difference-table {
    width: 100%;
    border-collapse: collapse; /* Remove default spacing */
}

/* --- Table Header Styling --- */
.difference-table thead th {
    background-color: var(--table-header-bg); /* Light green header background */
    color: var(--text-dark); /* Dark text for headers */
    font-size: 1.1em;
    font-weight: 600;
    padding: 18px 25px;
    text-align: center; /* Changed to center the text */
    border-bottom: 2px solid var(--mentcura-green-primary); /* Green line under header */
}

.difference-table thead th:first-child {
    border-top-left-radius: 12px; /* Match container radius */
}
.difference-table thead th:last-child {
    border-top-right-radius: 12px; /* Match container radius */
}

/* --- Table Body (Rows & Cells) Styling --- */
.difference-table tbody tr {
    background-color: var(--table-bg-light);
    color: var(--text-medium);
    transition: background-color 0.2s ease; /* Smooth hover effect */
}

.difference-table tbody tr:hover {
    background-color: var(--table-row-hover); /* Very light grey on hover */
}

.difference-table tbody tr:last-child td {
    border-bottom: none; /* No bottom border on the last row */
}

.difference-table td {
    padding: 15px 25px;
    font-size: 0.95em;
    border-bottom: 1px solid var(--table-border-light); /* Light internal borders */
    vertical-align: middle;
}

.feature-cell {
    font-weight: 500;
    color: var(--text-dark); /* Darker for feature names */
    line-height: 1.4;
}

.comparison-cell {
    width: 150px; /* Fixed width for icon columns */
    text-align: center;
}

.text-center {
    text-align: center; /* Utility class */
}

/* --- Icon Styling --- */
.icon-check {
    color: var(--mentcura-green-primary); /* Vibrant green for checkmark */
    font-size: 1.3em;
    font-weight: 700;
}

.icon-cross {
    color: var(--icon-cross-color); /* Friendly red for cross */
    font-size: 1.3em;
    font-weight: 700;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .difference-section {
        padding: 40px 15px;
    }
    .difference-main-heading {
        font-size: 2.2em;
    }
    .difference-sub-heading {
        font-size: 1em;
    }
    .difference-table thead {
        display: none; /* Hide table header on small screens */
    }
    .difference-table, .difference-table tbody, .difference-table tr, .difference-table td {
        display: block; /* Make table elements behave like blocks */
        width: 100%;
    }
    .difference-table tr {
        margin-bottom: 15px;
        border: 1px solid var(--table-border-light);
        border-radius: 8px; /* Rounded corners for individual stacked rows */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }
    .difference-table td {
        padding: 12px 15px;
        text-align: right; /* Align cell content to right */
        border-bottom: 1px solid var(--table-border-light); /* Keep borders for stacked rows */
        position: relative;
        padding-left: 50%; /* Space for pseudo-element label */
        font-size: 0.9em;
    }
    .difference-table tbody tr:last-child td {
        border-bottom: 1px solid var(--table-border-light); /* Ensure last cell of stacked row has a border */
    }
    .difference-table tbody tr td:last-child {
        border-bottom: none; /* Remove bottom border from the very last cell of the stacked row */
    }

    /* Data labels for responsive table (Requires data-label attributes in JSX) */
    .difference-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
        color: var(--text-light-subtle);
        font-size: 0.95em;
    }
    .comparison-cell {
        width: 100%; /* Take full width on mobile */
        text-align: right !important; /* Force text alignment */
    }
}

@media (max-width: 768px) {
    .difference-main-heading {
        font-size: 1.8em;
    }
    .difference-sub-heading {
        font-size: 0.9em;
    }
    .difference-table td {
        padding: 10px 12px;
        font-size: 0.85em;
    }
    .difference-table td:before {
        left: 12px;
        width: 40%;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .difference-main-heading {
        font-size: 1.5em;
    }
}
/* Color Palette (tuned to the new combination) */
:root {
    --mentcura-green-primary: #07A76F; /* Main vibrant green (buttons, accents) */
    --mentcura-green-secondary: #068F5E; /* Darker green (hover states) */
    --mentcura-beige-bg: #F3f3ed; /* Light beige background */

    --text-on-green: white;
    --text-on-beige: #2C2C2C;
    --text-on-beige-medium: #555555;
    --text-faded-beige: #AAAAAA; /* Faded text for placeholders on beige */

    --input-bg-beige-tint: rgba(0, 191, 99, 0.05);
    --input-border-beige-tint: rgba(0, 191, 99, 0.2);

    --border-subtle: #E0E0E0;

    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

/* --- Keyframe Animations --- */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes iconPop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}


/* Global resets and body styling */
.mc-demo-page {
    display: flex;
    min-height: 100vh;
    font-family: var(--font-body);
    background-color: var(--mentcura-beige-bg);
    overflow-x: hidden;
    justify-content: center;
    align-items: stretch; /* top-align children so form appears at the top */
}

.mc-demo-content-wrapper {
    display: flex;
    width: 100%;
    /* let content determine height so form flows naturally */
    align-items: flex-start;
    margin: 0;
    overflow: visible; /* avoid clipping the form/button */
    
}

/* --- Left Section: Information & About MentCura (GREEN) --- */
.mc-demo-left-section {
    flex: 1;
    /* Local override to ensure this page uses the intended brand green */
    background-color: #07A76F !important;
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* align content to top */
}
.mc-demo-left-heading, .mc-demo-left-subheading, .mc-demo-left-benefits li, .mc-demo-about-heading, .mc-demo-about-text, .mc-demo-help-link {
    color: var(--text-on-green);
}

.mc-demo-left-heading {
    font-family: var(--font-heading);
    font-size: 2em;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    max-width: none; /* No max width on this side */
    text-align: left;
}

.mc-demo-left-subheading {
    font-size: 1.1em;
    line-height: 1.5;
    margin-bottom: 30px;
    max-width: 500px;
    text-align: left;
}

.mc-demo-left-benefits {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.mc-demo-left-benefits li {
    font-size: 1.1em;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
}

.mc-demo-check-icon {
    color: white; /* White check icons on green background */
    font-size: 1.3em;
}


.mc-demo-about-heading {
    font-family: var(--font-heading);
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: left;
}

.mc-demo-about-text {
    font-size: 1em;
    line-height: 1.6;
    text-align: left;
}

.mc-demo-help-link {
    font-size: 1em;
   margin-top: auto;
    padding-top: 250px;
}

.mc-demo-help-link__link {
    color: white;
    text-decoration: underline;
    transition: color 0.3s ease;
}
.mc-demo-help-link__link:hover {
    color: #f0f0f0;
    text-decoration: none;
}


/* --- Right Section: Contact Form (BEIGE) --- */
.mc-demo-right-section {
    flex: 1;
    background-color: var(--mentcura-beige-bg);
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* align form to top */
    align-self: flex-start; /* avoid stretching to match left column height */
}
.mc-demo-form-heading {
    color: var(--text-on-beige);
    font-family: var(--font-heading);
    font-size: 3em;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    max-width: 100%;
}

.mc-demo-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
}

.mc-demo-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.mc-demo-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.mc-demo-half-width {
    flex: 0 0 calc(50% - 10px);
}

.mc-demo-full-width {
    flex: 0 0 100%;
}

.mc-demo-form-group label {
    font-size: 0.9em;
    color: var(--text-on-beige); /* Dark labels on beige */
    margin-bottom: 8px;
    font-weight: 500;
    text-align: left;
}

.mc-demo-form-group .mc-demo-required {
    color: var(--mentcura-green-primary);
}

.mc-demo-form input,
.mc-demo-form select,
.mc-demo-form textarea {
    background-color: var(--input-bg-beige-tint);
    border: 1px solid var(--input-border-beige-tint);
    color: var(--text-on-beige); /* Dark text in inputs */
    padding: 12px 15px;
    font-size: 1em;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.mc-demo-form input::placeholder,
.mc-demo-form textarea::placeholder {
    color: var(--text-faded-beige);
}

.mc-demo-form input:focus,
.mc-demo-form select:focus,
.mc-demo-form textarea:focus {
    border-color: var(--mentcura-green-primary);
    box-shadow: 0 0 0 2px rgba(0, 191, 99, 0.2);
    outline: none;
    transform: scale(1.005);
}

.mc-demo-form select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-6.5%200-12.3%203.8-15%209.7-2.8%205.9-1.9%2012.7%202.2%2017.2l128.8%20132c3.7%203.7%208.9%205.9%2014.2%205.9s10.5-2.2%2014.2-5.9l128.8-132c4.1-4.5%205-11.3%202.2-17.2z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.8em 0.8em;
    /* Remove default arrow for Chrome, Safari, Edge */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.mc-demo-privacy-text, .mc-demo-required-note {
    color: var(--text-on-beige-medium);
}
.mc-demo-privacy-text .link-text {
    color: var(--mentcura-green-primary);
}
.mc-demo-privacy-text .link-text:hover {
    color: var(--mentcura-green-secondary);
}

.mc-demo-submit-button {
    background-color: var(--mentcura-green-primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 15px 25px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mc-demo-submit-button:hover {
    background-color: var(--mentcura-green-secondary);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Modal styles */
.mc-demo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.mc-demo-modal-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.mc-demo-modal-close-button {
    background-color: var(--mentcura-green-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}

/* Message styles */
.mc-demo-error-message {
    color: #d32f2f;
    background-color: #ffebee;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    border: 1px solid #ffcdd2;
}

.mc-demo-success-message {
    color: #388e3c;
    background-color: #e8f5e8;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    border: 1px solid #c8e6c9;
}

/* --- Responsive Design --- */
@media (max-width: 1024px) {
    .mc-demo-content-wrapper {
        flex-direction: column;
        min-height: auto;
    }
    .mc-demo-left-section,
    .mc-demo-right-section {
        padding: 40px 30px;
    }
    
    /* Force single column layout on tablets */
    .mc-demo-form-row {
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }
    
    .mc-demo-form-group {
        margin-bottom: 20px;
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    .mc-demo-half-width,
    .mc-demo-full-width {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .mc-demo-left-section, .mc-demo-right-section {
        padding: 30px 20px;
    }
    .mc-demo-form-heading, .mc-demo-left-heading {
        font-size: 2.2em;
        text-align: left;
    }
    .mc-demo-form {
        max-width: 100%;
    }
    
    /* Left align all content on mobile */
    .mc-demo-left-heading,
    .mc-demo-left-subheading,
    .mc-demo-about-heading,
    .mc-demo-about-text,
    .mc-demo-help-link,
    .mc-demo-form-heading {
        text-align: left;
    }
    
    /* Fix benefits list on mobile */
    .mc-demo-left-benefits li {
        font-size: 1em;
        margin-bottom: 12px;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    
    .mc-demo-check-icon {
        font-size: 1.1em;
        margin-top: 2px;
        flex-shrink: 0;
    }
    
    .mc-demo-form input,
    .mc-demo-form select,
    .mc-demo-form textarea {
        width: 100% !important;
        box-sizing: border-box;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 14px 16px;
    }
}

@media (max-width: 480px) {
    .mc-demo-page {
        padding: 0;
    }
    .mc-demo-left-section, .mc-demo-right-section {
        padding: 20px 16px;
    }
    .mc-demo-form-heading, .mc-demo-left-heading {
        font-size: 1.8em;
        line-height: 1.2;
        text-align: left;
    }
    .mc-demo-left-subheading {
        font-size: 1em;
        margin-bottom: 20px;
        text-align: left;
    }
    .mc-demo-help-link {
        padding-top: 40px;
        font-size: 0.9em;
        text-align: left;
    }
    
    /* Ensure all content is left-aligned on small mobile */
    .mc-demo-left-heading,
    .mc-demo-left-subheading,
    .mc-demo-about-heading,
    .mc-demo-about-text,
    .mc-demo-help-link,
    .mc-demo-form-heading {
        text-align: left;
    }
    
    /* Fix benefits list on small mobile */
    .mc-demo-left-benefits li {
        font-size: 0.95em;
        margin-bottom: 10px;
        align-items: flex-start;
        line-height: 1.3;
    }
    
    .mc-demo-check-icon {
        font-size: 1em;
        margin-top: 1px;
        flex-shrink: 0;
    }
    
    .mc-demo-form-row {
        margin-bottom: 0;
    }
    .mc-demo-form-group {
        margin-bottom: 16px;
    }
    .mc-demo-form-group label {
        font-size: 14px;
        margin-bottom: 6px;
        text-align: left;
    }
    .mc-demo-submit-button {
        width: 100%;
        padding: 16px;
        font-size: 16px;
        margin-top: 10px;
    }
}/* WebinarWithTherapist.css */

/* General page container styling */
.min-h-screen {
  min-height: 100vh;
}

.bg-gray-50 {
  background-color: #f9fafb; /* Equivalent to Tailwind's bg-gray-50 */
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.py-12 {
  padding-top: 3rem; /* 48px */
  padding-bottom: 3rem; /* 48px */
}

.px-4 {
  padding-left: 1rem; /* 16px */
  padding-right: 1rem; /* 16px */
}

/* Main content wrapper */
.max-w-4xl {
  max-width: 56rem; /* 896px */
}

.w-full {
  width: 100%;
}

.bg-white {
  background-color: #ffffff;
}

.rounded-lg {
  border-radius: 0.5rem; /* 8px */
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.p-8 {
  padding: 2rem; /* 32px */
}

/* Heading styles */
.text-4xl {
  font-size: 2.25rem; /* 36px */
  line-height: 2.5rem; /* 40px */
}

.font-extrabold {
  font-weight: 800;
}

.text-gray-900 {
  color: #111827;
}

.text-center {
  text-align: center;
}

.mb-6 {
  margin-bottom: 1.5rem; /* 24px */
}

/* Paragraph styles */
.text-lg {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */
}

.text-gray-600 {
  color: #4b5563;
}

.mb-8 {
  margin-bottom: 2rem; /* 32px */
}

/* Section styling */
.mb-10 {
  margin-bottom: 2.5rem; /* 40px */
}

.text-3xl {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
}

.font-bold {
  font-weight: 700;
}

.text-gray-800 {
  color: #1f2937;
}

/* Pricing box */
.bg-green-50 {
  background-color: #ecfdf5;
}

.p-6 {
  padding: 1.5rem; /* 24px */
}

.rounded-lg {
  border-radius: 0.5rem; /* 8px */
}

.border {
  border-width: 1px;
}

.border-green-200 {
  border-color: #a7f3d0;
}

.text-xl {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
}

.text-gray-700 {
  color: #374151;
}

.leading-relaxed {
  line-height: 1.625;
}

.mt-6 {
  margin-top: 1.5rem; /* 24px */
}

.text-5xl {
  font-size: 3rem; /* 48px */
  line-height: 1;
}

.text-green-700 {
  color: #047857;
}

/* Benefits grid */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-8 {
  gap: 2rem; /* 32px */
}

.items-start {
  align-items: flex-start;
}

.p-4 {
  padding: 1rem; /* 16px */
}

.bg-blue-50 {
  background-color: #eff6ff;
}
.bg-purple-50 {
  background-color: #f5f3ff;
}
.bg-yellow-50 {
  background-color: #fffbeb;
}
.bg-red-50 {
  background-color: #fef2f2;
}


.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.w-8 {
  width: 2rem; /* 32px */
}
.h-8 {
  height: 2rem; /* 32px */
}

.text-blue-600 {
  color: #2563eb;
}
.text-purple-600 {
  color: #7c3aed;
}
.text-yellow-600 {
  color: #d97706;
}
.text-red-600 {
  color: #dc2626;
}


.mr-4 {
  margin-right: 1rem; /* 16px */
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.mb-2 {
  margin-bottom: 0.5rem; /* 8px */
}

/* Button styling (assuming it's a custom button or you want to style a standard one) */
.mt-10 {
  margin-top: 2.5rem; /* 40px */
}

/* Styles for the Link component which wraps the button */
.text-center a {
  display: inline-block; /* To allow button transformations */
}

/* Styles for the actual button (if shadcn/ui Button isn't loaded/styled globally) */
/* If you are using shadcn/ui, these specific styles might not be necessary if shadcn's Button component already handles them. */
.bg-green-600 {
  background-color: #059669;
}

.hover\:bg-green-700:hover {
  background-color: #04785e;
}

.text-white {
  color: #ffffff;
}

.px-8 {
  padding-left: 2rem; /* 32px */
  padding-right: 2rem; /* 32px */
}

.py-4 {
  padding-top: 1rem; /* 16px */
  padding-bottom: 1rem; /* 16px */
}

.rounded-full {
  border-radius: 9999px; /* Fully rounded */
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.transform {
  transform: var(--tw-transform);
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}


/* Responsive adjustments */
@media (min-width: 768px) {
  .md\:p-12 {
    padding: 3rem; /* 48px */
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
:root {
  --green: #07a76f;
  --white: #ffffff;
  --dark: #104041;
  --gray: #5c5c5c;
  --bg: #f3f3ed;
  --font: "Poppins";
}

body {
  margin: 0;
  padding: 0;
}

.corporate-plan {
  font-family: var(--font);
  background-color: var(--bg);
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0px 30px 30px 30px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  box-sizing: border-box;
}

.plan-left {
  background-color: var(--green);
  color: var(--white);
  padding: 30px 30px;
  border-radius: 40px;
  flex: 1.5;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.title {
  font-size: 30px;
  font-weight: 200;
  margin: 0 0 24px;
  line-height: 1.3;
}

.title span {
  color: var(--white);
  display: block;
  font-weight: 700;
}

.price {
  font-size: 80px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1;
}

.per-month {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 24px;
  opacity: 0.9;
}

.description {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.85;
  flex-grow: 1;
  /* Pushes slider to the bottom */
}

.plan-right {
  background-color: var(--white);
  color: var(--dark);
  padding: 40px 30px;
  border-radius: 40px;
  flex: 1;
  min-width: 300px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* --- TABS --- */
.tabs-container {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  margin-bottom: 30px;
  background: #fafafa;
}

.tab {
  flex: 1 1 0;
  padding: 12px 14px;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
  color: var(--gray);
  font-weight: 700;
  font-size: 18px;
  border-right: 1px solid #e6e6e6;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  outline: none;
}

/* Remove divider on last tab */
.tab:last-child {
  border-right: none;
}

.tab:hover {
  background-color: #f3f6f8;
}

.tab:focus {
  box-shadow: 0 0 0 4px rgba(7, 167, 111, 0.08);
}

.tab.active {
  background: linear-gradient(180deg, #0b5348, #0a3f36);
  color: #fff;
}

/* Slight elevation for the entire tabs area when active tab is present */
.tabs-container:has(.tab.active) {
  box-shadow: 0 8px 24px rgba(9, 35, 25, 0.04);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .tab {
    padding: 10px 8px;
    font-size: 14px;
  }
}

/* --- SLIDER STYLES --- */
.slider-container {
  margin-top: 20px;
  position: relative;
  padding-top: 10px;
}

.slider-track {
  position: absolute;
  top: 14px;
  left: 0;
  width: 100%;
  height: 8px;
  display: flex;
  border-radius: 5px;
  overflow: hidden;
}

.slider-segment {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.3);
  border-right: 2px solid rgba(0, 0, 0, 0.2);
}

.slider-segment:last-child {
  border-right: none;
}

.employee-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: transparent;
  border-radius: 5px;
  outline: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

.employee-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: #07a76f;
  border-radius: 50%;
  cursor: pointer;
  border: 4px solid white;
  margin-top: -8px;
}

.employee-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--white);
  border-radius: 50%;
  cursor: pointer;
  border: 4px solid var(--dark);
}

.slider-labels {
  margin-top: 8px;
  position: relative;
  height: 20px;
}

.slider-labels span {
  position: absolute;
  top: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  transform: translateX(-50%);
}

.slider-labels span:nth-child(1) {
  left: 0%;
  transform: translateX(0%);
}

.slider-labels span:nth-child(2) {
  left: 25%;
}

.slider-labels span:nth-child(3) {
  left: 50%;
}

.slider-labels span:nth-child(4) {
  left: 75%;
}

.slider-labels span:nth-child(5) {
  left: 100%;
  transform: translateX(-100%);
}

/* --- FEATURE LIST --- */
.what-you-get {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 18px;
  text-align: left;
}

.features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.features li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 18px;
  color: var(--dark);
  line-height: 1.5;
}

.features li svg {
  flex-shrink: 0;
}

/* --- RESPONSIVE STYLES --- */
/* Large Tablets and Small Desktops */
@media (max-width: 1024px) {
  .corporate-plan {
    padding: 0px 20px 30px 20px;
    gap: 1.5rem;
  }

  .plan-left,
  .plan-right {
    min-width: 280px;
  }

  .price {
    font-size: 70px;
  }

  .title {
    font-size: 26px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .corporate-plan {
    flex-direction: column;
    align-items: stretch;
    padding: 30px 20px;
    gap: 1.5rem;
  }

  .plan-left,
  .plan-right {
    padding: 30px 24px;
    min-width: auto;
    width: 100%;
  }

  .price {
    font-size: 60px;
  }

  .title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .per-month {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .description {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Tab adjustments */
  .tab {
    font-size: 16px;
    padding: 10px 8px;
  }

  .features li {
    font-size: 16px;
    margin-bottom: 12px;
  }

  /* Slider adjustments */
  .slider-labels span {
    font-size: 12px;
  }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
  .corporate-plan {
    padding: 20px 16px;
    gap: 1rem;
  }

  .plan-left,
  .plan-right {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .title {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 16px;
  }

  .price {
    font-size: 48px;
    margin-bottom: 6px;
  }

  .per-month {
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.3;
  }

  .description {
    font-size: 13px;
    line-height: 1.4;
  }

  /* Tabs for mobile */
  .tabs-container {
    margin-bottom: 24px;
  }

  .tab {
    font-size: 14px;
    padding: 12px 6px;
    font-weight: 600;
  }

  .what-you-get {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .features li {
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.4;
  }

  .features li svg {
    width: 16px;
    height: 16px;
  }

  /* Slider improvements for mobile */
  .slider-container {
    margin-top: 16px;
    padding-top: 8px;
  }

  .employee-slider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border: 3px solid white;
  }

  .slider-labels {
    margin-top: 6px;
  }

  .slider-labels span {
    font-size: 11px;
    font-weight: 500;
  }
}

/* Extra Small Devices */
@media (max-width: 360px) {
  .corporate-plan {
    padding: 16px 12px;
  }

  .plan-left,
  .plan-right {
    padding: 20px 16px;
  }

  .title {
    font-size: 20px;
  }

  .price {
    font-size: 42px;
  }

  .per-month {
    font-size: 13px;
  }

  .description {
    font-size: 12px;
  }

  .tab {
    font-size: 13px;
    padding: 10px 4px;
  }

  .features li {
    font-size: 13px;
    gap: 8px;
  }

  .features li svg {
    width: 14px;
    height: 14px;
  }
}

/* Landscape orientation fixes */
@media (max-height: 480px) and (orientation: landscape) {
  .corporate-plan {
    flex-direction: row;
    padding: 20px;
  }

  .plan-left,
  .plan-right {
    min-width: 250px;
  }

  .price {
    font-size: 50px;
  }

  .title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .description {
    font-size: 12px;
  }
}/* --- CSS Variables --- */
:root {
  --better-workplace-primary-green: #07A76F;
  --better-workplace-light-text: #ffffff;
  --better-workplace-dark-text: #104041;
  --better-workplace-background-light: #f3f3ed;
  --better-workplace-card-background: #ffffff;
  --better-workplace-font-family-main: 'Poppins', sans-serif; /* Added sans-serif fallback */
  --better-workplace-description-color: #5C5C5C;
}

/* --- Better Workplace Section Container --- */
.better-workplace-container {
  display: flex;
  justify-content: center;
  align-items: center;
 
  padding: 30px 60px; /* Overall section padding */
  background-color: var(--better-workplace-background-light);
  width: 100%;
  box-sizing: border-box;
  font-family: var(--better-workplace-font-family-main);
}

/* --- Content Wrapper (the white rounded box) --- */
.better-workplace-content {
  display: grid;
  grid-template-columns: 3fr 2fr; /* 60% for text, 40% for illustration */
  gap: 1rem; /* Adjusted from 2rem to 1rem for closer proximity */
  background-color: var(--better-workplace-card-background);
  border-radius: 40px;
  padding: 60px 50px 40px 70px; /* Top, Right, Bottom, Left padding */
  max-width: 1200px;
  width: 100%;
 
  align-items: center;
  position: relative; /* Essential for absolute positioning of the image */
  overflow: hidden; /* Ensures image stays within rounded borders */
}

/* --- Left Column: Text Content --- */
.better-workplace-text-column {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.better-workplace-title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--better-workplace-dark-text);
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.better-workplace-description {
  font-size: 1.1rem;
  color: var(--better-workplace-description-color);
  margin-bottom: 30px;
  line-height: 1.6;
  max-width: 500px; /* Keep text width constrained for readability */
}

/* --- Button Styling --- */
.better-workplace-buttons {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.8rem;
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
  gap: 15px; /* Added gap for wrapped buttons */
}

.better-workplace-button {
  padding: 14px 30px;
  border: none;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.better-workplace-button.primary {
  background-color: var(--better-workplace-primary-green);
  color: var(--better-workplace-light-text);
  border: 2px solid var(--better-workplace-primary-green);
}

.better-workplace-button.primary:hover {
  background-color: #068F5E;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



.better-workplace-illustration {
  position: absolute;
  right: 10px;
  bottom: 1px;
  width: 600px;
  height: auto;
  pointer-events: none;
  z-index: 2;
  }

/* --- Responsive Design --- */

/* For screens smaller than 1200px (adjusts from max-width of container) */
@media (max-width: 1200px) {
  .better-workplace-container {
    padding: 10px 40px; /* Slightly reduce overall padding */
  }
  .better-workplace-content {
    padding: 50px 40px 30px 50px; /* Adjust content padding */
  }
  .better-workplace-illustration {
    width: 500px;
    right: 10px;
    bottom: 1px;
  }
}


/* Tablet and smaller desktop screens (max-width: 992px) */
@media (max-width: 992px) {
  .better-workplace-container {
    padding: 4rem 20px; /* More vertical padding, less horizontal */
    min-height: auto; /* Allow height to adapt to content */
  }

  .better-workplace-content {
    grid-template-columns: 1fr; /* Stack columns */
    gap: 2rem;
    padding: 30px 25px 250px; /* Increased bottom padding for image */
    text-align: center;
    align-items: center;
  }

  .better-workplace-text-column {
    align-items: center; /* Center text content when stacked */
  }

  .better-workplace-title {
    font-size: 2.5rem; /* Adjust font size */
  }

  .better-workplace-description {
    font-size: 1rem; /* Adjust font size */
    max-width: 90%; /* Allow description to take more width, but not full */
    margin-left: auto;
    margin-right: auto;
  }

  .better-workplace-buttons {
    justify-content: center; /* Center buttons when stacked */
    flex-direction: column; /* Stack buttons if they don't fit horizontally */
    gap: 15px; /* Space between stacked buttons */
  }

  .better-workplace-button {
    width: 100%; /* Make buttons full width */
    max-width: 300px; /* Limit max-width of buttons */
    padding: 12px 25px;
    font-size: 0.9rem;
  }

  .better-workplace-illustration {
    position: absolute;
    bottom: 1px;
    right: 10px;
    transform: none;
    width: 400px;
  }
}

/* Mobile screens (max-width: 768px) */
@media (max-width: 768px) {
  .better-workplace-container {
    padding: 3rem 30px; /* Further reduced padding */
  }

  .better-workplace-content {
    padding: 25px 15px 200px; /* Further adjusted padding for smaller screens */
    border-radius: 25px;
  }

  .better-workplace-title {
    font-size: 2rem;
  }

  .better-workplace-description {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  .better-workplace-buttons {
    gap: 12px; /* Smaller gap for stacked buttons */
  }

  .better-workplace-button {
    max-width: 250px; /* Further limit max-width */
  }

  .better-workplace-illustration {
    width: 300px;
    bottom: 1px;
    right: 10px;
  }
}

/* Smaller mobile screens (max-width: 576px) - previously 480px */
@media (max-width: 576px) {
  .better-workplace-container {
    padding: 2px 15px;
  }

  .better-workplace-content {
    padding: 20px 10px 160px; /* Adjusted padding for very small screens */
    border-radius: 20px;
  }

  .better-workplace-title {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
  }

  .better-workplace-description {
    font-size: 0.85rem;
    margin-bottom: 15px;
  }

  .better-workplace-button {
    padding: 10px 20px;
    font-size: 0.85rem;
  }

  .better-workplace-illustration {
    width: 250px; /* Increased from 180px */
    bottom: 1px;
    right: 10px;
  }
}

/* Very small mobile screens (e.g., iPhone SE) */
@media (max-width: 375px) {
  .better-workplace-content {
    padding: 15px 10px 140px; /* Minimal padding for very small screens */
  }

  .better-workplace-title {
    font-size: 1.4rem;
  }

  .better-workplace-description {
    font-size: 0.8rem;
  }

  .better-workplace-illustration {
    width: 150px; /* Smallest image size */
    bottom: 5px;
  }
}/* --- Base Styles for Mentcura FAQ Section --- */
.mentcura-faq-section {
  font-family: 'Poppins',;
  background-color: #f3f3ed; /* Light background from the image */
  padding: 30px 60px;
  color: #334D4D; /* Default text color */
  display: flex;
  justify-content: center;
  align-items: center;
}

.mentcura-faq-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* Left column (text/image) and right column (accordion) */
  gap: 4rem;
  max-width: 1200px; /* Decreased from 1200px to make the section narrower */
  width: 100%;
  align-items: center;
}

/* --- Left Column: Text and Illustration --- */
.mentcura-faq-text-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
}

.mentcura-faq-heading {
  font-size: 3rem;
  font-weight: 700;
  color: #104041; /* Dark green from the image */
  line-height: 1.2;
  margin: 0;
}

.mentcura-faq-subheading {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #5C5C5C; /* Grayish text color */
  margin: 0;
}



.mentcura-faq-image {
  max-width: 100%; /* Ensure image scales within its container */
  height: auto;
  display: block; /* Remove extra space below image */
}

/* --- Right Column: Accordion --- */
.mentcura-faq-accordion-column {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Space between FAQ items */
  margin-top: 150px;
  
}

.mentcura-faq-item {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
  overflow: hidden; /* Hide overflowing answer when closed */
}

.mentcura-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #104041;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}

.mentcura-faq-question:hover {
  background-color: #F5F5F5;
}

.mentcura-faq-question.mentcura-faq-open {
  background-color: #E6F3F0; /* Slightly different background when open */
}

.mentcura-faq-icon {
  font-size: 1.5rem;
  font-weight: 300;
  color: #07A76F; /* Green color for the plus/minus icon */
  transition: transform 0.3s ease;
}

.mentcura-faq-question.mentcura-faq-open .mentcura-faq-icon {
  transform: rotate(0deg); /* No rotation for minus, but can be used for plus to rotate */
}

.mentcura-faq-answer {
  padding: 0 1.5rem 1.25rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #5C5C5C;
  /* Use max-height and transition for smooth collapse/expand */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, padding 0.5s ease-out;
  text-align: left;
}

/* When the question is open, expand the answer */
.mentcura-faq-question.mentcura-faq-open + .mentcura-faq-answer {
  max-height: 200px; /* A value larger than the expected content height */
  padding-top: 0.5rem; /* Add some padding back when open */
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
  .mentcura-faq-content-wrapper {
    grid-template-columns: 1fr; /* Stack columns on smaller screens */
    gap: 0rem;
  }

  .mentcura-faq-heading {
    font-size: 2.5rem;
    text-align: center;
  }

  .mentcura-faq-subheading {
    text-align: center;
  }

  .mentcura-faq-illustration {
    margin-top: 1rem; /* Adjust margin */
  }
}

@media (max-width: 768px) {
  .mentcura-faq-section {
    padding: 15px 15px;
  }

  .mentcura-faq-content-wrapper {
    gap: 0rem;
  }

  .mentcura-faq-heading {
    font-size: 2rem;
  }

  .mentcura-faq-subheading {
    font-size: 1rem;
  }

  .mentcura-faq-question {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
  }

  .mentcura-faq-answer {
    padding: 0 1.25rem 1rem 1.25rem;
    font-size: 0.9rem;
  }
}
/* --- Communicate Section --- */

/* General container for the whole page section */
.communicate-section {
  font-family: 'Poppins';
  background-color: #f3f3ed;
  padding: 30px 60px;
  color: #334D4D;
  
 
}

/* Header content above the main box */
.communicate-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 3rem auto;
}

.communicate-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  color: #5C5C5C;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.communicate-heading {
  font-size: 3rem;
  font-weight: 700;
  color: #104041;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

.communicate-subheading {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Main white container with two columns */
.communicate-container {
  display: grid;
  /* Updated grid ratio to make the right column wider */
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  background-color: #ffffff;
  padding: 4rem;
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Left Column: Contact Details --- */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
}

.contact-details h2 {
  font-size: 1.75rem;
  color: #104041;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

.details-group p {
  margin: 0;
  line-height: 1.7;
  font-size: 1rem;
}

.details-group strong {
  color: #104041;
  font-weight: 600;
  margin-right: 0.5rem;
}

.social-icons {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
}

.social-icons a {
  color: #104041;
  font-size: 1.4rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.1);
  color: #07A76F;
}

.response-time {
  margin-top: auto;
  font-style: italic;
  font-size: 0.9rem;
  color: #5C5C5C;
}

/* --- Right Column: Contact Form --- */
.form-column-right {
  display: flex;
  flex-direction: column;
}

.form-column-heading {
  font-size: 1.75rem;
  color: #104041;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  text-align: left;
  padding-left: 15px;
  
}

.contact-form-wrapper {
  background-color: #FDF6EC;
  /* Updated padding to make the form wrapper shorter */
  padding: 1.5rem 2rem;
  border-radius: 40px;
  flex-grow: 1;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 500;
  font-size: 1rem;
  color: #104041;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid #C5BDB2 !important;
  box-shadow: none !important;
  padding: 0.5rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #104041;
  border-radius: 0;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #A89E90;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none !important;
  border-bottom-color: #104041 !important;
}

.form-group textarea {
  resize: vertical;
  min-height: 50px;
}

.submit-btn {
  width: 100%;
  background-color: #104041;
  color: white;
  border: none;
  padding: 1.1rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 1rem;
}

.submit-btn:hover {
  background-color: #1A6364;
  transform: scale(1.02);
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
  .communicate-container {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 2.5rem;
  }
  .communicate-heading {
    font-size: 2.5rem;
  }
  .response-time {
    margin-top: 1rem;
  }
  .form-column-heading {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .communicate-section {
    padding: 15px 15px;
  }
  .communicate-container {
    padding: 2rem;
  }
  .communicate-heading {
    font-size: 2rem;
  }
  .communicate-subheading {
    font-size: 1rem;
  }
  .contact-form-wrapper {
    padding: 1.5rem;
  }
}/* --- CSS Variables --- */
:root {
    --color-bg-light: #F3f3ed; /* Light beige background */
    --color-bg-accent: #07A76F; /* Light pink background */
    --color-text-dark: #211B1A;
    --color-text-medium: #524F4E;
    --color-button-bg: #07A76F;
    --color-button-text: white;
    --font-main: 'Poppins', sans-serif;
}

/* --- General Page Styles --- */
.about-page {
    font-family: var(--font-main);
    color: var(--color-text-dark);
    background-color: var(--color-bg-light);
    padding: 0rem 0;
   
}

.about-section {
    padding: 0px 60px 60px 60px;
    text-align: start;
}

/* --- Card Container Styles --- */
.about-card-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    background-color: white;
    border-radius: 40px;
    padding: 20px 40px;
    
}

/* --- Mission Card Specifics --- */
.mission-card {
    background-color: var(--color-bg-accent);
}

.mission-card .missionsection-title,
.mission-card .missionsection-paragraph {
    color: white;
}

/* --- Typography --- */
.Aero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.Aero-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-medium);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 500px;
    text-align: left;
}

.missionsection-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.missionsection-paragraph {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 500px;
    text-align: left;
}

/* --- Buttons --- */
.about-cta-button {
    display: inline-block;
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    padding: 1rem 2rem;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: white;
    background-color: #068F5E;
}

/* --- Image Styles --- */
.image-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-image {
    width: 80%;
    border-radius: 16px;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .about-card-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 30px;
    }

    .Aero-title, .missionsection-title {
        font-size: 2.2rem;
        text-align: center;
    }

    .Aero-subtitle, .missionsection-paragraph {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .about-cta-button {
        display: block;
        margin: 0 auto;
        width: fit-content;
    }

    /* In mission section, image appears first on mobile */
    .mission-section .image-content {
        order: -1;
    }

    .section-image {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .about-section {
        padding: 2rem 1rem;
    }
    
    .about-card-container {
        border-radius: 20px;
        padding: 20px;
    }
    
    .Aero-title, .missionsection-title {
        font-size: 1.8rem;
    }
    
    .Aero-subtitle, .missionsection-paragraph {
        font-size: 1rem;
    }
}/* BookingPages.css */

.dashboard-booking-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #222;
  background-color: #f9fafa;
}

.breadcrumb {
  font-size: 14px;
  margin-bottom: 10px;
  color: #555;
}

.breadcrumb a {
  color: #3498db;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.page-header-section {
  margin-bottom: 30px;
  text-align: center;
}

.page-title {
  font-size: 32px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10px;
}

.page-subheading {
  font-size: 16px;
  color: #7f8c8d;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #34495e;
}

.section-description {
  font-size: 14px;
  color: #95a5a6;
  margin-bottom: 16px;
}

.booking-form {
  background-color: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.form-section {
  margin-bottom: 40px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 6px;
  font-weight: 500;
  color: #34495e;
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 15px;
  background-color: #fdfdfd;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #2980b9;
  outline: none;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

.category-chip {
  display: inline-block;
  padding: 8px 14px;
  margin: 5px 6px 5px 0;
  border-radius: 20px;
  background-color: #ecf0f1;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.category-chip.selected {
  background-color: #3498db;
  color: white;
}

.category-chip:hover {
  background-color: #d0e6f9;
}

.confirm-session-button {
  background-color: #07A76F;
  border: none;
  padding: 14px 22px;
  font-size: 16px;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px;
  width: 100%;
}

.confirm-session-button:hover {
  background-color: #058a5a;
}

.error-message {
  color: #e74c3c;
  font-weight: 500;
  margin-top: 10px;
}

.success-message {
  color: #2ecc71;
  font-weight: 500;
  margin-top: 10px;
}

.therapist-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  transition: all 0.2s ease-in-out;
  background: #fff;
  cursor: pointer;
}

.therapist-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.therapist-card img {
  border-radius: 50%;
  margin-bottom: 10px;
}

.therapist-card.selected {
  border: 2px solid #3498db;
  background-color: #ecf7ff;
}

/* Therapist Details (in preview grid) */
.therapist-details {
    flex-grow: 1; /* Allows details to take up space */
    width: 100%;
    text-align: center; /* Centered text for name, specialty, experience */
}

.therapist-name-preview {
    font-size: 1.2rem; /* Slightly smaller font for preview */
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
    text-align: center; /* Explicitly center the name */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Show ellipsis for truncated text */
}

.therapist-specialty-preview {
    font-size: 0.9rem; /* Slightly smaller font for preview */
    color: #666;
    margin-bottom: 8px;
    font-style: italic;
    text-align: center; /* Explicitly center the specialty */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Show ellipsis for truncated text */
}

/* New style for experience */
.therapist-experience-preview {
    font-size: 0.85rem;
    color: #555;
    margin-top: 5px;
    font-weight: 500;
    text-align: center; /* Explicitly center the experience */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Show ellipsis for truncated text */
}/* --- Main Page Layout (Shared) --- */
.page-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #f7f8fc;
    font-family: 'Inter',;
    color: #111;

}
.sidebar {
    width: 210px; background-color: #ffffff; border-right: 1px solid #e0e0e0;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 16px 0; flex-shrink: 0;
}
.logo-placeholder {
    font-weight: bold; font-size: 20px; padding: 0 16px;
    margin-bottom: 24px; color: #333;
}
.sidebar-nav ul, .sidebar-bottom ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li, .sidebar-bottom li {
    display: flex; align-items: center; padding: 9px 16px;
    margin: 0 10px 4px 10px; font-size: 14px;
    color: #555; cursor: pointer; border-radius: 6px;
    transition: background-color 0.3s, color 0.3s;
}
.sidebar-nav li:hover, .sidebar-bottom li:hover { background-color: #f0f4f4; color: #07A76F; }
.sidebar-nav li.active { background-color: #f0f4f4; color: #07A76F; font-weight: 600; }
.sidebar-bottom li.active { background-color: #f0f4f4; color: #07A76F; font-weight: 600; }
.sidebar-nav svg, .sidebar-bottom svg { margin-right: 10px; font-size: 16px; }

/* --- Content Area (Compact) --- */
.content-wrapper { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }
.main-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 30px 16px 30px; background-color: #f7f8fc; flex-shrink: 0;
    
}
.main-header h2 { font-size: 22px; font-weight: 600; color: #111; margin: 0; }
.scrollable-content { flex-grow: 1; overflow-y: auto; padding: 0px 24px 24px 24px; }

/* --- Settings Cards --- */
.settings-card {
    background-color: #fff; border: 1px solid #e0e0e0; border-radius: 12px;
    padding: 20px; margin-top: 12px;
}
.settings-card h3 { margin: 0 0 20px 0; font-size: 18px; font-weight: 600; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.card-header h3 { margin: 0; }

/* --- Forms & Inputs --- */
.input-group { display: flex; flex-direction: column; }
.input-group label {
    font-size: 13px; font-weight: 500; color: #333; margin-bottom: 6px;
}
.input-group input, .input-group select, .input-group textarea {
    width: 100%; border: 1px solid #ccc; border-radius: 6px; padding: 10px;
    font-size: 14px; font-family: 'Inter', sans-serif; background-color: #f9fafb;
}
.input-group input:read-only, .input-group textarea:read-only { background-color: #f3f4f6; cursor: not-allowed; }
.input-hint { font-size: 12px; color: #777; margin-top: 6px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.full-width { grid-column: 1 / -1; }

/* --- Notification Toggles --- */
.notification-row { display: flex; justify-content: space-between; align-items: center; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; transition: .4s; border-radius: 24px;
}
.slider:before {
    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: #07A76F; }
input:checked + .slider:before { transform: translateX(20px); }

/* --- Admin Management Table --- */
.data-table { width: 100%; border-collapse: collapse; border-spacing: 0 6px; }
.data-table th, .data-table td { padding: 10px 14px; text-align: left; font-size: 14px; }
.data-table th { font-size: 12px; color: #555; text-transform: uppercase; }
.data-table td { background-color: #f9fafb; }
.data-table tr td:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.data-table tr td:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.role-select { border: none; background: transparent; font-weight: 500; font-size: 14px;color: #111; }
.action-cell { text-align: right; }
.link-button {
    background: none; border: none; color: #2563eb; font-weight: 600;
    cursor: pointer; margin-left: 12px; font-size: 14px;
}
.link-button.danger { color: #dc2626; }

/* --- Billing Section --- */
.billing-row { display: flex; justify-content: space-between; align-items: center; }
.billing-actions { display: flex; gap: 10px; }

/* --- Add Admin Modal --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal-card {
    background: white; border-radius: 12px; width: 100%; max-width: 550px;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid #e0e0e0;
}
.modal-header h3 { margin: 0; font-size: 16px; }
.modal-close-button { background: none; border: none; font-size: 22px; cursor: pointer; color: #888; }
.modal-body { padding: 20px; }
.modal-form .input-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
}
.modal-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid #e0e0e0;
}
.error-text { color: #dc2626; font-size: 13px; margin-top: 12px; text-align: center; }

/* --- Buttons --- */
.primary-button {
    background-color: #07A76F; color: white; border: none; border-radius: 6px;
    padding: 9px 15px; font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 6px; transition: background-color 0.2s;
}
.primary-button:hover { background-color: #057a55; }
.secondary-button {
    background-color: #ffffff; color: #333; border: 1px solid #ccc;
    border-radius: 6px; padding: 8px 14px; font-size: 14px;
    font-weight: 500; cursor: pointer; transition: background-color 0.2s;
}
.secondary-button:hover { background-color: #f0f0f0; }

.loading-screen, .error-screen {
    display: flex; align-items: center; justify-content: center;
    height: 100vh; font-size: 16px; color: #555;
}
/* ... existing Settings.css styles ... */

.settings-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; /* Space below the header */
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0; /* Separator */
}

.settings-card .card-header h3 {
    margin: 0; /* Remove default margin */
    color: #111;
}

.edit-buttons {
    display: flex;
    gap: 10px; /* Space between Save and Cancel buttons */
}

/* Add or ensure these general button styles exist in your main CSS */
.primary-button {
    background-color: #07A76F; /* Mentcura Green */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.primary-button:hover:not(:disabled) {
    background-color: #057a55;
    transform: translateY(-1px);
}

.primary-button:disabled {
    background-color: #a7d9c6;
    cursor: not-allowed;
}

.secondary-button {
    background-color: #f0f0f0;
    color: #333;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.secondary-button:hover:not(:disabled) {
    background-color: #e0e0e0;
    border-color: #bbb;
    transform: translateY(-1px);
}

.secondary-button:disabled {
    background-color: #f8f8f8;
    color: #999;
    cursor: not-allowed;
}

.error-text {
    color: #dc2626; /* A red color for errors */
    font-size: 13px;
    margin-top: 5px;
    text-align: right; /* Aligns error message for org profile */
}

/* ... (Keep all your existing CSS above this section) ... */

/* --- Forms & Inputs --- */
.input-group {
    display: flex;
    flex-direction: column;
    /* Add a small bottom margin for spacing between stacked input groups,
       especially for the full-width textarea which doesn't directly benefit from grid-gap */
    margin-bottom: 15px; /* Adjust as needed */
    
}

.input-group:last-child {
    margin-bottom: 0; /* Remove bottom margin for the last input group */
}

.input-group label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px; /* Space between label and input */
    
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    background-color: #f9fafb;
    box-sizing: border-box; /* Ensures padding doesn't push width beyond 100% */
    
}

.input-group input:read-only,
.input-group textarea:read-only {
    background-color: #f3f4f6;
    cursor: not-allowed;
    /* Add some visual distinction for read-only fields */
    border-color: #e0e0e0;
    
}

.input-hint {
    font-size: 12px;
    color: #777;
    margin-top: 6px; /* Space between input and hint */
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Explicitly use row-gap and column-gap for clarity and better control */
    row-gap: 5px; /* Vertical gap between rows */
    column-gap: 20px; /* Horizontal gap between columns */
    /* Remove any default margins that might be collapsing or interfering */
    margin: 0;
    padding: 0;
    
}

/* Ensure the full-width item still respects the grid structure */
.full-width {
    grid-column: 1 / -1; /* Spans across all columns */
}

/* Optional: Add a subtle focus style for inputs */
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    outline: none;
    border-color: #07A76F; /* Mentcura Green on focus */
    box-shadow: 0 0 0 2px rgba(7, 167, 111, 0.2); /* Light green shadow */
}

/* Specific adjustment for the last input group within the grid if it's full-width
   to prevent excessive bottom margin when it's the last child of the grid */
.profile-grid .input-group:last-child {
    margin-bottom: 0;
}

/* If you find the card content pushing right up against the edges */
.settings-card .profile-grid {
    padding: 0; /* Ensures no extra padding within the grid */
}


.data-table td {
    border-collapse: collapse;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    background-color: white; /* Applies white background to all table body cells */
}
/* HowItWorksSection.css */

/* General Wrapper and Container Styles */
.mentcura-how-it-works-wrapper {
  padding: 30px 60px;
  background-color: #f3f3ed;
  display: flex;
  justify-content: center;
}

.mentcura-how-it-works-container {
  background-color: white;
  border-radius: 40px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  width: 100%;
  align-items: center;
  font-family: 'Poppins';
}

/* Section Header Styles */
.mentcura-section-header {
  width: 100%;
  text-align: left; /* Left aligned for desktop */
  margin-bottom: 3px;
  margin-left: 20px;
}

/* Content Wrapper for Desktop Layout */
.mentcura-content-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Left Content Styles */
.mentcura-how-it-works-left {
  flex: 1;
  min-width: 300px;
  max-width: 550px;
  text-align: left;
}

.mentcura-green-text {
  color: #00a47c;
  font-size: 24px;
  font-weight: 700;
}

.mentcura-description {
  font-size: 15px;
  color: #333;
  margin-top: 10px;
  margin-bottom: 30px;
  line-height: 1.6;
}

.mentcura-features .mentcura-feature-item {
  /* Reduced gap between points */
  margin-bottom: 15px;
  cursor: pointer;
  padding: 0.5px 1px 0.5px 10px;
  border-radius: 10px;
  transition: background-color 0.3s ease;
  /* Text does not move on hover */
  transform: none;
}

/* Different hover colors for each feature item */
.mentcura-features .mentcura-feature-item:nth-child(1):hover,
.mentcura-features .mentcura-feature-item:nth-child(1).active {
  background-color: rgba(0, 164, 124, 0.1);
}

.mentcura-features .mentcura-feature-item:nth-child(2):hover,
.mentcura-features .mentcura-feature-item:nth-child(2).active {
  background-color: rgba(255, 165, 0, 0.1); /* Orange */
}

.mentcura-features .mentcura-feature-item:nth-child(3):hover,
.mentcura-features .mentcura-feature-item:nth-child(3).active {
  background-color: rgba(128, 0, 128, 0.1); /* Purple */
}

.mentcura-features .mentcura-feature-item:nth-child(4):hover,
.mentcura-features .mentcura-feature-item:nth-child(4).active {
  background-color: rgba(0, 0, 255, 0.1); /* Blue */
}

.mentcura-features .mentcura-feature-item h3 {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-bottom: 5px;
}

.mentcura-features .mentcura-feature-item p {
  font-size: 14px;
  color: #444;
}

/* Right Content and Laptop Styles */
.mentcura-how-it-works-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  min-width: 400px;
}

.mentcura-laptop-image-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 400px;
  overflow: hidden;
}

/* Laptop image base state */
.mentcura-laptop-image {
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 0;
  transform: translate(100%, -50%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.6s cubic-bezier(0.4,0,0.2,1);
  z-index: 1;
}

.mentcura-laptop-image.active {
  z-index: 5;
  opacity: 1;
  transform: translate(0, -50%);
}

/* Slide out to left when deactivating */
.mentcura-laptop-image.slide-out-left {
  z-index: 4;
  opacity: 0;
  transform: translate(-100%, -50%);
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* Initial state: The first image is visible by default */
.mentcura-laptop-image:first-child {
  opacity: 1;
  transform: translate(0, -50%);
}

/* When a new feature is hovered, the old screen slides to the left and out of view */
.mentcura-how-it-works-left .mentcura-feature-item.active:not(:first-child) ~ .mentcura-how-it-works-right .mentcura-laptop-image:first-child {
  transform: translate(-100%, -50%);
  opacity: 0;
}

/* For the last point without a unique image, keep the previous active image */
.mentcura-how-it-works-left .mentcura-feature-item:nth-child(4).active ~ .mentcura-how-it-works-right .mentcura-laptop-image:nth-child(3) {
  transform: translate(0, -50%);
  opacity: 1;
}

/*
 * --- Responsive Styles for Tablet (769px to 1024px) ---
 */
@media (max-width: 1024px) and (min-width: 769px) {
  .mentcura-how-it-works-wrapper {
    padding: 25px 40px;
  }

  .mentcura-how-it-works-container {
    padding: 30px;
  }

  .mentcura-section-header {
    margin-bottom: 25px;
    margin-left: 0px;
    text-align: center; /* Centered on tablet */
  }

  .mentcura-content-wrapper {
    flex-direction: column;
  }

  /* Show images first after header on tablet */
  .mentcura-how-it-works-right {
    order: 1;
    margin-top: 0;
    margin-bottom: 30px;
    min-width: 300px;
  }

  .mentcura-how-it-works-left {
    order: 2;
    min-width: 100%;
    text-align: center;
  }

  .mentcura-laptop-image-container {
    height: 300px;
    max-width: 500px;
  }

  .mentcura-features .mentcura-feature-item {
    margin-bottom: 12px;
    padding: 8px 15px;
  }
}

/*
 * --- Responsive Styles for Mobile (768px and below) ---
 */
@media (max-width: 768px) {
  .mentcura-how-it-works-wrapper {
    padding: 15px 15px ;
  }

  .mentcura-how-it-works-container {
    padding: 20px;
  }

  .mentcura-section-header {
    margin-bottom: 20px;
    margin-left: 0px;
    text-align: center; /* Centered on mobile */
  }

  .mentcura-content-wrapper {
    flex-direction: column;
  }
  
  /* Show images first after header on mobile */
  .mentcura-how-it-works-right {
    order: 1;
    display: flex;
    margin-top: 0;
    margin-bottom: 25px;
    min-width: 100%;
    justify-content: center;
  }

  .mentcura-how-it-works-left {
    order: 2;
    min-width: 100%;
    text-align: center;
  }

  .mentcura-laptop-image-container {
    height: 250px;
    max-width: 400px;
  }
  
  .mentcura-features .mentcura-feature-item {
    margin-bottom: 10px;
    padding: 10px;
  }

  /* Ensure animations work on mobile */
  .mentcura-laptop-image {
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.4s cubic-bezier(0.4,0,0.2,1);
  }
}.public-booking-page {
    padding: 36px 24px;
    background: var(--bg, #f6f6f1);
    color: #0f172a;
}

.pbs-container {
    --site-max-width: 1200px;
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.pbs-header {
    margin: -24px 0 0;
    /* pull hero up a bit so it visually aligns, but leave a small gap to the form */
    text-align: center;
    /* Match landing hero green exactly; fall back to the same hex used in HeroSection */
    background-color: var(--primary-green, #07A76F);
    color: white;
    padding: 28px 24px;
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(5, 94, 77, 0.10);
    position: relative;
    /* contain absolutely positioned decorations */
    overflow: hidden;
    /* clip decorations to the card's rounded corners */
}

.pbs-bg-left,
.pbs-bg-right {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.98;
}

.pbs-bg-left {
    left: -24px;
    /* small negative offset so illustration peeks without overflowing page */
    top: -12px;
    width: 260px;
    transform: rotate(0deg);
}

.pbs-bg-right {
    right: -24px;
    bottom: -12px;
    width: 260px;
    transform: rotate(0deg);
}

/* Responsive adjustments for the decorative images */
@media (max-width: 992px) {

    .pbs-bg-left,
    .pbs-bg-right {
        width: 200px;
    }

    .pbs-bg-left {
        left: -16px;
        top: -8px;
    }

    .pbs-bg-right {
        right: -16px;
        bottom: -8px;
    }
}

@media (max-width: 576px) {

    .pbs-bg-left,
    .pbs-bg-right {
        width: 140px;
    }

    .pbs-bg-left {
        left: -8px;
        top: -6px;
    }

    .pbs-bg-right {
        right: -8px;
        bottom: -6px;
    }
}

.pbs-title {
    font-size: 36px;
    margin: 6px 0 8px;
    font-weight: 700;
}

.pbs-subtitle {
    color: rgba(255, 255, 255, 0.92);
    max-width: 820px;
    margin: 0 auto 14px;
    line-height: 1.5;
    font-size: 16px;
}

.pbs-points {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.pbs-point {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 16px;
}

.pbs-note {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    margin-top: 6px;
}

/* Form wrapper
   Keep the form visually contained and aligned with the header width */

.pbs-form-wrap {
    margin: 30px 0 32px;
    /* small gap above form, reduced bottom gap before footer */
    padding: 0;
    /* container provides side padding */
    max-width: var(--site-max-width);
}

.pbs-form-wrap .book-session-card {
    background: white;
    /* ensure inner card is white */
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.04);
    overflow: hidden;
    width: 100%;
}

/* ensure no top margin so the card sits flush under the hero container */
.pbs-form-wrap .book-session-card {
    margin-top: 0;
}

.pbs-divider {
    height: 8px;
    width: 100%;
    max-width: 1100px;
    margin: 8px auto;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.02));
}

.pbs-header:after {
    /* subtle bottom decoration to blend with form overlap */
    content: '';
    display: block;
    height: 12px;
}

@media (max-width: 768px) {
    .pbs-title {
        font-size: 28px;
    }

    .pbs-card {
        min-width: 160px;
    }

    .pbs-cards {
        gap: 14px;
    }
}

/* On very small screens remove overlap and keep stacked layout */
@media (max-width: 480px) {
    .pbs-form-wrap {
        margin: 12px auto 28px;
    }

    .pbs-header {
        margin: -8px 0 0;
        padding: 22px 16px;
        border-radius: 12px;
    }
}

/* CTA button styles */
.pbs-cta {
    display: none;
}/* General body and font settings (optional, but good practice) */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
    margin: 0;
}

/* Main container for the privacy policy page */
.privacy-policy-container {
    background-color: #f8fafc;
    /* bg-slate-50 */
    min-height: 100vh;
    padding-top: 6rem;
    /* pt-24 */
    padding-bottom: 4rem;
    /* pb-16 */
    padding-left: 1rem;
    /* px-4 */
    padding-right: 1rem;
    /* px-4 */
    color: #374151;
    /* text-gray-700 */
    display: flex;
    flex-direction: column;
    /* default: flex-col */
    gap: 3rem;
    /* gap-12 */
}

/* Sidebar for Table of Contents */
.policy-sidebar {
    background-color: #ffffff;
    padding: 2rem;
    /* p-8 */
    height: max-content;
    position: sticky;
    top: 5rem;
    /* top-20 */
    align-self: flex-start;
    border-radius: 1rem;
    /* rounded-2xl */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    /* shadow-sm */
    width: 100%;
    /* Default width */
}

.policy-sidebar-title {
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 600;
    /* font-semibold */
    color: #1f2937;
    /* text-gray-800 */
    margin-bottom: 1.25rem;
    /* mb-5 */
}

/* Table of Contents list */
.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* space-y-2 */
    color: #374151;
    /* text-gray-700 */
}

.toc-link {
    /* Reset button styles */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;

    /* Our styles */
    text-align: left;
    width: 100%;
    transition: all 0.2s ease-in-out;
}

.toc-link:hover {
    color: #111827;
    /* hover:text-gray-900 */
}

.toc-link.active {
    color: #16a34a;
    /* text-green-600 */
    font-weight: 600;
    /* font-semibold */
}

/* Main article content */
.main-content {
    line-height: 1.625;
    /* leading-relaxed */
    width: 100%;
    /* Default width */
    text-align: left;
    /* <-- ADDED THIS LINE to force left alignment */
}

.page-title {
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    color: #111827;
    /* text-gray-900 */
    margin-bottom: 0.5rem;
    /* mb-2 */
}

.last-updated {
    font-size: 0.875rem;
    /* text-sm */
    color: #6b7280;
    /* text-gray-500 */
    margin-bottom: 2.5rem;
    /* mb-10 */
}

/* Styles for headings and lists within the article */
.main-content h2 {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    margin-top: 2.5rem;
    /* mt-10 */
    margin-bottom: 1rem;
    /* mb-4 */
}

.main-content p {
    margin-bottom: 1rem;
    /* Added for spacing */
}

.main-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    /* pl-6 */
    margin-bottom: 1rem;
    /* Added for spacing */
}

/* Class for the first list */
.content-list-spaced {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* space-y-2 */
}

/* Class for the grievance list */
.mt-2 {
    margin-top: 0.5rem;
    /* mt-2 */
}

.main-content a {
    color: #16a34a;
    /* text-green-600 */
    text-decoration: underline;
}

/* Back to Top button */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    /* bottom-6 */
    right: 1.5rem;
    /* right-6 */
    background-color: #16a34a;
    /* bg-green-600 */
    color: #ffffff;
    /* text-white */
    padding: 0.5rem 1rem;
    /* py-2 px-4 */
    border-radius: 9999px;
    /* rounded-full */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
    /* shadow-lg */
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.back-to-top:hover {
    background-color: #15803d;
    /* hover:bg-green-700 */
}

/* --- Responsive Media Queries --- */

/* sm: px-8 */
@media (min-width: 640px) {
    .privacy-policy-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* lg: px-24, lg:flex-row, lg:w-1/4, lg:w-3/4 */
@media (min-width: 1024px) {
    .privacy-policy-container {
        padding-left: 6rem;
        padding-right: 6rem;
        flex-direction: row;
    }

    .policy-sidebar {
        width: 25%;
    }

    .main-content {
        width: 75%;
    }
}

/* xl: px-32 */
@media (min-width: 1280px) {
    .privacy-policy-container {
        padding-left: 8rem;
        padding-right: 8rem;
    }
}/* General body and font settings (optional, but good practice) */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
    margin: 0;
}

/* Main container for the page */
.privacy-policy-container {
    background-color: #f8fafc;
    /* bg-slate-50 */
    min-height: 100vh;
    padding-top: 6rem;
    /* pt-24 */
    padding-bottom: 4rem;
    /* pb-16 */
    padding-left: 1rem;
    /* px-4 */
    padding-right: 1rem;
    /* px-4 */
    color: #374151;
    /* text-gray-700 */
    display: flex;
    flex-direction: column;
    /* default: flex-col */
    gap: 3rem;
    /* gap-12 */
}

/* Sidebar for Table of Contents */
.policy-sidebar {
    background-color: #ffffff;
    padding: 2rem;
    /* p-8 */
    height: max-content;
    position: sticky;
    top: 5rem;
    /* top-20 */
    align-self: flex-start;
    border-radius: 1rem;
    /* rounded-2xl */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    /* shadow-sm */
    width: 100%;
    /* Default width */
}

.policy-sidebar-title {
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 600;
    /* font-semibold */
    color: #1f2937;
    /* text-gray-800 */
    margin-bottom: 1.25rem;
    /* mb-5 */
}

/* Table of Contents list */
.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* space-y-2 */
    color: #374151;
    /* text-gray-700 */
}

.toc-link {
    /* Reset button styles */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;

    /* Our styles */
    text-align: left;
    width: 100%;
    transition: all 0.2s ease-in-out;
}

.toc-link:hover {
    color: #111827;
    /* hover:text-gray-900 */
}

.toc-link.active {
    color: #16a34a;
    /* text-green-600 */
    font-weight: 600;
    /* font-semibold */
}

/* Main article content */
.main-content {
    line-height: 1.625;
    /* leading-relaxed */
    width: 100%;
    /* Default width */
    text-align: left;
    /* Force left alignment */
}

.page-title {
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    color: #111827;
    /* text-gray-900 */
    margin-bottom: 0.5rem;
    /* mb-2 */
}

.last-updated {
    font-size: 0.875rem;
    /* text-sm */
    color: #6b7280;
    /* text-gray-500 */
    margin-bottom: 2.5rem;
    /* mb-10 */
}

/* Styles for headings and lists within the article */
.main-content h2 {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    margin-top: 2.5rem;
    /* mt-10 */
    margin-bottom: 1rem;
    /* mb-4 */
}

.main-content p {
    margin-bottom: 1rem;
    /* Added for spacing */
}

.main-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    /* pl-6 */
    margin-bottom: 1rem;
    /* Added for spacing */
}

/* Class for lists that need spacing */
.content-list-spaced {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* space-y-2 */
}

/* Utility class for margin-top */
.mt-2 {
    margin-top: 0.5rem;
    /* mt-2 */
}

.main-content a {
    color: #16a34a;
    /* text-green-600 */
    text-decoration: underline;
}

/* Back to Top button */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    /* bottom-6 */
    right: 1.5rem;
    /* right-6 */
    background-color: #16a34a;
    /* bg-green-600 */
    color: #ffffff;
    /* text-white */
    padding: 0.5rem 1rem;
    /* py-2 px-4 */
    border-radius: 9999px;
    /* rounded-full */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
    /* shadow-lg */
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.back-to-top:hover {
    background-color: #15803d;
    /* hover:bg-green-700 */
}

/* --- Responsive Media Queries --- */

/* sm: px-8 */
@media (min-width: 640px) {
    .privacy-policy-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* lg: px-24, lg:flex-row, lg:w-1/4, lg:w-3/4 */
@media (min-width: 1024px) {
    .privacy-policy-container {
        padding-left: 6rem;
        padding-right: 6rem;
        flex-direction: row;
    }

    .policy-sidebar {
        width: 25%;
    }

    .main-content {
        width: 75%;
    }
}

/* xl: px-32 */
@media (min-width: 1280px) {
    .privacy-policy-container {
        padding-left: 8rem;
        padding-right: 8rem;
    }
}/* General body and font settings (optional, but good practice) */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
    margin: 0;
}

/* Main container for the page */
.privacy-policy-container {
    background-color: #f8fafc;
    /* bg-slate-50 */
    min-height: 100vh;
    padding-top: 6rem;
    /* pt-24 */
    padding-bottom: 4rem;
    /* pb-16 */
    padding-left: 1rem;
    /* px-4 */
    padding-right: 1rem;
    /* px-4 */
    color: #374151;
    /* text-gray-700 */
    display: flex;
    flex-direction: column;
    /* default: flex-col */
    gap: 3rem;
    /* gap-12 */
}

/* Sidebar for Table of Contents */
.policy-sidebar {
    background-color: #ffffff;
    padding: 2rem;
    /* p-8 */
    height: max-content;
    position: sticky;
    top: 5rem;
    /* top-20 */
    align-self: flex-start;
    border-radius: 1rem;
    /* rounded-2xl */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    /* shadow-sm */
    width: 100%;
    /* Default width */
}

.policy-sidebar-title {
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 600;
    /* font-semibold */
    color: #111827 !important;
    /* text-gray-900 - darker and forced */
    margin-bottom: 1.25rem;
    /* mb-5 */
}

/* Table of Contents list */
.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* space-y-2 */
    color: #374151;
    /* text-gray-700 */
}

.toc-link {
    /* Reset button styles */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;

    /* Our styles */
    text-align: left;
    width: 100%;
    transition: all 0.2s ease-in-out;
    color: #374151;
    /* Ensure default text color is visible */
}

.toc-link:hover {
    color: #111827;
    /* hover:text-gray-900 */
}

.toc-link.active {
    color: #16a34a;
    /* text-green-600 */
    font-weight: 600;
    /* font-semibold */
}

/* Main article content */
.main-content {
    line-height: 1.625;
    /* leading-relaxed */
    width: 100%;
    /* Default width */
    text-align: left;
    /* Force left alignment */
}

.page-title {
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    color: #111827;
    /* text-gray-900 */
    margin-bottom: 0.5rem;
    /* mb-2 */
}

.last-updated {
    font-size: 0.875rem;
    /* text-sm */
    color: #6b7280;
    /* text-gray-500 */
    margin-bottom: 2.5rem;
    /* mb-10 */
}

/* Styles for headings and lists within the article */
.main-content h2 {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    margin-top: 2.5rem;
    /* mt-10 */
    margin-bottom: 1rem;
    /* mb-4 */
}

.main-content p {
    margin-bottom: 1rem;
    /* Added for spacing */
}

.main-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    /* pl-6 */
    margin-bottom: 1rem;
    /* Added for spacing */
}

/* Class for lists that need spacing */
.content-list-spaced {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* space-y-2 */
}

/* Utility class for margin-top */
.mt-2 {
    margin-top: 0.5rem;
    /* mt-2 */
}

.main-content a {
    color: #16a34a;
    /* text-green-600 */
    text-decoration: underline;
}

/* Back to Top button */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    /* bottom-6 */
    right: 1.5rem;
    /* right-6 */
    background-color: #16a34a;
    /* bg-green-600 */
    color: #ffffff;
    /* text-white */
    padding: 0.5rem 1rem;
    /* py-2 px-4 */
    border-radius: 9999px;
    /* rounded-full */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
    /* shadow-lg */
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.back-to-top:hover {
    background-color: #15803d;
    /* hover:bg-green-700 */
}

/* --- Responsive Media Queries --- */

/* sm: px-8 */
@media (min-width: 640px) {
    .privacy-policy-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* lg: px-24, lg:flex-row, lg:w-1/4, lg:w-3/4 */
@media (min-width: 1024px) {
    .privacy-policy-container {
        padding-left: 6rem;
        padding-right: 6rem;
        flex-direction: row;
    }

    .policy-sidebar {
        width: 25%;
    }

    .main-content {
        width: 75%;
    }
}

/* xl: px-32 */
@media (min-width: 1280px) {
    .privacy-policy-container {
        padding-left: 8rem;
        padding-right: 8rem;
    }
}