/* styles.css */
:root {
  --cream: #f4ecd6;
  --light-green: #cbeaa6;
  --dark-purple: #4e2043;
  --beige: #f4ecd6;
  --taupe: #bfb5af;
}
/* Removed SCSS import; now using CSS variables */

/* Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  color: var(--dark-purple);
  background-color: var(--light-green);
}

/* Scope link styles to avoid affecting chatbot */
header a, 
footer a, 
.hero a, 
.full-width-section a, 
.feature-card a {
  color: inherit; 
  text-decoration: none; 
}

/* Hero */
.hero {
  position: relative; /* Allow absolute positioning within header */
  display: flex;
  align-items: center; /* Vertically center logo and text box */
  justify-content: center; /* Center the inner wrapper */
  background-color: var(--light-green);
  background-image: url('assets/hero-bg.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 8rem 0; /* Increased padding for more breathing room */
  /* Hero background covers full width, maintain 16:9 aspect ratio */
}

.hero-inner-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; /* Ensure it tries to take full width before max-width applies */
  max-width: 1000px;
  padding: 0 2rem; /* Increased padding for better side spacing */
  position: relative; /* Allow absolute positioning of language switcher */
}

.logo {
  /* Height will be set by JavaScript; remove align-self to prevent interference */
  height: auto; /* Initial height before JS adjusts it */
  width: auto;
  object-fit: contain;
  min-width: 200px; /* Minimum width to ensure visibility */
  max-width: 400px; /* Maximum width to prevent oversizing */
}
.hero-content {
  position: relative; /* Make this the positioning context for the language switcher */
  flex: 0 0 auto; /* Allow box to shrink to content size */
  max-width: 600px;
  background-color: rgba(244, 236, 214, 0.75);
  padding: 1.75rem; /* Increased padding slightly */
  border-radius: 8px;
  margin: 0;
}
.hero-content h1 {
  font-size: 2.5rem; /* Keeping font size */
  margin-bottom: 0.75rem; /* Adjusted bottom margin */
}
.hero-content p {
  font-size: 1.1rem; /* Keeping font size */
  margin-bottom: 1rem; /* Adjusted bottom margin */
}
.cta-buttons {
  margin-top: 1.25rem; /* Adjusted top margin */
}
.cta-buttons button {
  margin-right: 1rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#btn-trial {
  background: var(--dark-purple);
  color: #fff;
  font-family: 'Yanone Kaffeesatz', sans-serif;
}
#btn-demo {
  background: transparent;
  border: 2px solid var(--dark-purple);
  color: var(--dark-purple);
  font-family: 'Yanone Kaffeesatz', sans-serif;
}

/* OLD CSS - No longer needed with full-width layout
/* Sections */
section {
  padding: 0.5rem 0;
}

.info-section .text-content-box {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-section .text-wrapper {
  flex: 1;
}

.info-section picture {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-section img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* NEW: Styling for the text box within sections */
.text-content-box {
  background-color: var(--cream);
  padding: 2rem;
  border-radius: 8px;
  display: flex; /* Enable flex for text and image alignment */
  align-items: center; /* Vertically align text and image */
  gap: 2rem; /* Generous gap between text wrapper and image */
  box-shadow: 0 2px 8px rgba(78, 32, 67, 0.1);
}

.text-content-box .text-wrapper {
  flex: 1; /* Allow text to take available space */
}

.text-content-box .text-wrapper h2 {
  margin-bottom: 1.5rem; /* More generous space below section titles */
}

.text-content-box picture,
.text-content-box img {
  flex-basis: 50%; /* Image takes up 50% of the box width */
  max-width: 50%; /* Ensure image does not exceed 50% */
  height: auto; /* Maintain aspect ratio */
  border-radius: 8px; /* Rounded corners for the image */
}

#why, #workflow {
  display: flex;
  align-items: center;
  /* Gap is now inside .text-content-box */
}

#why picture,
#why img, 
#workflow picture,
#workflow img {
  /* Styling moved to .text-content-box img */
  border-radius: 8px;
  /* Maintain 4:3 aspect ratio */
  aspect-ratio: 4/3;
  object-fit: cover;
}

#workflow {
  background-color: --var(--cream) !important; /* Ensure workflow section has cream background */
}

/* Styling for alternating layout in sections */
#workflow .text-content-box {
  flex-direction: row-reverse; /* Image on the left, text on the right */
}

#workflow .text-content-box ul {
  list-style-type: none;
  padding-left: 1rem; /* Add more padding to align with paragraphs */
}

#workflow .text-content-box ul li {
  margin-bottom: 1.5rem; /* Increase space between list items */
}

#workflow .text-content-box ul li:last-child {
  margin-bottom: 0; /* Remove margin from the last item */
}

/* NEW: Wrapper for main content to constrain width */
.main-content-wrapper {
  max-width: 1400px;
  margin: 0 auto; /* Center the content */
  padding: 0 0.5rem; /* Minimal padding on the sides */
}

/* OLD Features - Commented out to prevent conflict with new .features-grid system
#features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 2rem; 
  margin-top: 2rem;
}
.feature {
  background: var(--beige);
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
}
.feature img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 4px;
  margin-top: 1rem;
}
*/

/* Footer - Full Width Section Integration */
footer {
  background: var(--taupe);
  color: var(--dark-purple);
  text-align: center;
  padding: 4rem 3rem;
  width: 100%;
  margin: 3rem 0 0 0;
  border-top: 2px solid var(--dark-purple);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

footer p {
  font-size: 1.1rem;
  margin: 0 auto 2rem auto;
  font-weight: 500;
  text-align: center;
  max-width: 100%;
}

footer nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

footer nav a {
  margin: 0 1rem;
  font-size: 1rem;
  color: var(--dark-purple);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

footer nav a:hover {
  background-color: var(--dark-purple);
  color: var(--taupe);
  text-decoration: none;
}

/* Mobile footer adjustments */
@media (max-width: 768px) {
  footer {
    padding: 4rem 3rem;
    margin: 2rem 0 0 0;
  }
  
  footer nav {
    flex-direction: column;
    gap: 1rem;
  }
  
  footer nav a {
    margin: 0;
  }
}

/*
Image Guidelines:
- Hero Background: 1920×1080px (16:9)
- Section Illustrations (Why & Workflow): 800×600px (4:3)
- Feature Images: 600×400px (3:2)
- Logo: 500×500px (1:1)
*/

/* Media Queries for Responsive Design */
@media (min-width: 768px) {
  .info-section .text-content-box {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }

  #workflow .text-content-box {
    flex-direction: row-reverse;
  }

  .info-section .text-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .info-section picture {
    flex: 0 0 45%;
  }

  .text-content-box {
    margin: 1rem 0;
  }
}

@media (max-width: 767px) {
  .hero-inner-content-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .logo {
    margin-bottom: 2rem;
    min-width: 250px; /* Larger minimum for mobile prominence */
    max-width: 300px; /* Reasonable maximum for mobile */
    width: 80vw; /* Scale with viewport width but respect min/max */
  }

  /* Old features rule commented out
  #features {
    grid-template-columns: 1fr;
  }
  */

  .text-content-box {
    flex-direction: column !important;
  }

  .text-content-box picture,
  .text-content-box img {
    max-width: 100%;
    flex-basis: auto;
  }

  /* Ensure content images are properly sized on mobile */
  .content-left img,
  .content-right img {
    min-height: 200px; /* Minimum height to ensure visibility */
    max-width: 100%;
    object-fit: cover; /* Better fitting for mobile */
  }
}

/* CSS Flag Icons for Language Switcher */
.flag-icon {
    width: 24px;
    height: 18px;
    display: inline-block;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0,0,0,0.1);
}

.flag-us { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMTAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNTAiIGZpbGw9IiNCMjIyMzQiLz48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMuODUiIHk9IjAiIGZpbGw9IndoaXRlIi8+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIzLjg1IiB5PSI3LjciIGZpbGw9IndoaXRlIi8+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIzLjg1IiB5PSIxNS40IiBmaWxsPSJ3aGl0ZSIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMy44NSIgeT0iMjMuMSIgZmlsbD0id2hpdGUiLz48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMuODUiIHk9IjMwLjgiIGZpbGw9IndoaXRlIi8+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIzLjg1IiB5PSIzOC41IiBmaWxsPSJ3aGl0ZSIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMy44NSIgeT0iNDYuMiIgZmlsbD0id2hpdGUiLz48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iMjciIGZpbGw9IiMwMDJBNkQiLz48L3N2Zz4K'); }
.flag-nl { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMTAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE2LjY3IiBmaWxsPSIjQUUxQzI4Ii8+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTYuNjciIHk9IjE2LjY3IiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE2LjY3IiB5PSIzMy4zMyIgZmlsbD0iIzIxNDY4QiIvPgo8L3N2Zz4K'); }
.flag-es { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMTAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEyLjUiIGZpbGw9IiNBQTAwMDAiLz4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIyNSIgeT0iMTIuNSIgZmlsbD0iI0ZGRkY4NiIvPgo8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEyLjUiIHk9IjM3LjUiIGZpbGw9IiNBQTAwMDAiLz4KPC9zdmc+Cg=='); }
.flag-fr { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMTAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMzMuMzMiIGhlaWdodD0iNTAiIGZpbGw9IiMwMDJBNkQiLz4KPHJlY3Qgd2lkdGg9IjMzLjMzIiBoZWlnaHQ9IjUwIiB4PSIzMy4zMyIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgd2lkdGg9IjMzLjMzIiBoZWlnaHQ9IjUwIiB4PSI2Ni42NyIgZmlsbD0iI0VEMjkzOSIvPgo8L3N2Zz4K'); }
.flag-de { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMTAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE2LjY3IiBmaWxsPSJibGFjayIvPgo8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE2LjY3IiB5PSIxNi42NyIgZmlsbD0iI0RENDAyRCIvPgo8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE2LjY3IiB5PSIzMy4zMyIgZmlsbD0iI0ZGRUYwMCIvPgo8L3N2Zz4K'); }
.flag-it { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMTAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMzMuMzMiIGhlaWdodD0iNTAiIGZpbGw9IiMwMDkyNDYiLz4KPHJlY3Qgd2lkdGg9IjMzLjMzIiBoZWlnaHQ9IjUwIiB4PSIzMy4zMyIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgd2lkdGg9IjMzLjMzIiBoZWlnaHQ9IjUwIiB4PSI2Ni42NyIgZmlsbD0iI0NFMkIzNyIvPgo8L3N2Zz4K'); }
.flag-cn { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMTAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNTAiIGZpbGw9IiNERTI5MTAiLz48cGF0aCBkPSJNMTUgMTBMMTggMTZIMTJMMTUgMTBaIiBmaWxsPSIjRkZERTAwIi8+PHBhdGggZD0iTTI1IDhMMjYgMTBIMjRMMjUgOFoiIGZpbGw9IiNGRkRFMDAiLz48cGF0aCBkPSJNMjUgMThMMjYgMjBIMjRMMjUgMThaIiBmaWxsPSIjRkZERTAwIi8+PHBhdGggZD0iTTIyIDIzTDIzIDI1SDIxTDIyIDIzWiIgZmlsbD0iI0ZGREUwMCIvPjxwYXRoIGQ9Ik0xOCAyMUwxOSAyM0gxN0wxOCAyMVoiIGZpbGw9IiNGRkRFMDAiLz48L3N2Zz4K'); }

/* Language Switcher Styles */
.language-switcher {
    position: fixed;
    display: inline-block;
    z-index: 9999;
    padding: 4px;
    border-radius: 8px;
    top: 1rem;
    right: 1rem;
    border-color: var(--dark-purple); /* Use website's dark purple */
}

.language-button {
    width: 48px;
    height: 48px;
    border-radius: 8px; /* More consistent with website's rounded corners */
    background: var(--cream); /* Use website's cream color */
    box-shadow: 0 2px 8px rgba(78, 32, 67, 0.2); /* Use website's dark purple in shadow */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--light-green); /* Use website's light green */
    cursor: pointer;
}

.language-button:hover {
    box-shadow: 0 4px 12px rgba(78, 32, 67, 0.3);
    border-color: var(--dark-purple); /* Use website's dark purple */
    transform: translateY(-2px); /* Subtle lift on hover */
    background: var(--dark-purple); /* Use website's dark purple */
}

.language-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(78, 32, 67, 0.3); /* Dark purple focus ring */
    border-color: var(--dark-purple);
}

.language-flags-container {
    position: absolute;
    top: 56px; /* Position below the main button instead of to the right */
    left: 0; /* Align with the main button */
    display: flex;
    flex-direction: column; /* Stack flags vertically */
    gap: 8px;
    transition: all 0.3s ease-out;
    transform: translateY(-8px);
    background: rgba(244, 236, 214, 0.95); /* Semi-transparent cream background */
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(78, 32, 67, 0.2);
}

/* Visibility classes */
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.invisible { visibility: hidden; }
.visible { visibility: visible; }
.translate-x-0 { transform: translateX(0); }
.translate-x-2 { transform: translateX(8px); }
.translate-y-0 { transform: translateY(0); }
.translate-y-neg-2 { transform: translateY(-8px); }

.language-flag-option {
    width: 40px;
    height: 40px;
    border-radius: 6px; /* Slightly smaller radius for options */
    background: white;
    box-shadow: 0 2px 6px rgba(78, 32, 67, 0.15);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--light-green);
    cursor: pointer;
}

.language-flag-option:hover {
    box-shadow: 0 4px 10px rgba(78, 32, 67, 0.25);
    border-color: var(--dark-purple);
    transform: translateY(-1px);
    background: var(--cream);
}

.language-flag-option:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(78, 32, 67, 0.3);
    border-color: var(--dark-purple);
}

/* Responsive positioning for language switcher */
@media (max-width: 1024px) {
    .language-switcher {
        position: fixed;
        top: 1rem;
        right: 1rem;
    }
}

@media (max-width: 768px) {
    .language-switcher {
        position: fixed;
        top: 1rem;
        right: 1rem;
        transform: none;
    }
}

/* Modal Styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  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.6); /* Black w/ opacity for overlay */
}

.modal-content {
  background-color: var(--cream); /* Similar to .text-content-box */
  color: var(--dark-purple);
  margin: 10% auto; /* 10% from the top and centered */
  padding: 2rem;
  border: 1px solid var(--taupe); /* A subtle border */
  border-radius: 8px;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 500px; /* Maximum width */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  position: relative;
}

.close-button {
  color: var(--dark-purple);
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
}

.close-button:hover,
.close-button:focus {
  color: #000; /* Darken on hover for better feedback */
  text-decoration: none;
  cursor: pointer;
}

.modal-content h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.8rem; /* Adjusted for prominence */
  font-family: 'Yanone Kaffeesatz', sans-serif;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: 1rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--taupe);
  border-radius: 4px;
  background-color: #fff; /* White background for inputs */
  color: var(--dark-purple);
  font-family: 'Yanone Kaffeesatz', sans-serif; /* Ensure font consistency */
  font-size: 1rem;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.form-group textarea {
  resize: vertical;
  min-height: 80px; /* Minimum height for textarea */
}

.btn-submit {
  background: var(--dark-purple);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1rem; /* Slightly larger font */
  font-family: 'Yanone Kaffeesatz', sans-serif;
  display: block;
  width: 100%;
  margin-top: 1.5rem; /* More space above submit button */
  transition: background-color 0.3s ease; /* Smooth transition for hover */
}

.btn-submit:hover {
  background-color: #3a1a33; /* Slightly darker purple on hover */
}

.form-message {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 4px;
  text-align: center;
  font-size: 0.95rem;
}
.form-message.success {
  background-color: var(--light-green);
  color: var(--dark-purple);
  border: 1px solid var(--dark-purple);
}
.form-message.error {
  background-color: #ffdddd; /* Light red */
  color: #d8000c; /* Dark red */
  border: 1px solid #d8000c;
}

/* Page Overlay for Chat */
#page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1999; /* Below chatbot, above everything else */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* Allow clicks through when hidden */
}

#page-overlay.active {
  opacity: 1;
  pointer-events: auto; /* Block clicks when visible */
}

/* Utility class to hide elements */
.hidden {
  display: none !important;
}

/* Protect chatbot from global CSS interference */
#chatbot-container,
#chatbot-container *,
.chatbot-toggle,
.chatbot-toggle * {
  box-sizing: border-box !important;
}

#chatbot-toggle.chatbot-toggle {
  /* Ensure chatbot toggle maintains original styling */
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  text-decoration: none !important;
}

#chatbot-container a,
#chatbot-container button {
  /* Protect chatbot links and buttons from global link/button styles */
  color: inherit !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  font-family: inherit !important;
  margin: 0 !important;
  padding: inherit !important;
}

/* === Chatbot Widget Styles (from chatbot-popup/chatbot.css) === */
#chatbot-container {
    position: fixed;
    bottom: 108px; /* Positioned above the toggle button (32px + 60px + 16px) */
    right: 32px;   /* Aligned with the toggle button */
    width: 400px;
    max-height: 60vh;
    background-color: #cbeaa6;
    border: 2.5px solid #4e2043;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(78, 32, 67, 0.15);
    padding: 0;
    display: flex;
    flex-direction: column;
    z-index: 2000;
}

/* Responsive width adjustments for chatbot container on narrow screens */
@media (max-width: 768px) {
    #chatbot-container {
        width: 320px;
    }
}

@media (max-width: 480px) {
    #chatbot-container {
        width: calc(100vw - 64px); /* Maintains 32px margin on each side */
    }
}
.chatbot-toggle {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background-color: #4e2043;
    color: #e9ebf8;
    border: 2.5px solid #e9ebf8;
    border-radius: 18px;
    width: 60px;
    height: 60px;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Initial state for animation */
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, box-shadow 0.2s, background 0.2s, border-color 0.2s;
    overflow: hidden;
    z-index: 2001;
    outline: none;
    padding: 0;
}

.chatbot-toggle.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    animation: sparkle-pulse 2s ease-in-out 1s 2;
}

@keyframes sparkle-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(203, 234, 166, 0.7), 0 4px 16px rgba(78, 32, 67, 0.10);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(203, 234, 166, 0), 0 6px 24px rgba(78, 32, 67, 0.18);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(203, 234, 166, 0), 0 4px 16px rgba(78, 32, 67, 0.10);
    }
}

.chatbot-toggle:focus {
    box-shadow: 0 0 0 4px #cbeaa6, 0 4px 16px rgba(78, 32, 67, 0.10);
    border-color: #cbeaa6;
}
.chatbot-toggle:hover {
    background: #cbeaa6;
    color: #4e2043;
    border-color: #4e2043;
    box-shadow: 0 6px 24px rgba(78, 32, 67, 0.18);
    transform: translateY(-2px) scale(1.07);
}
.chatbot-toggle:active {
    background: #bfb5af;
    color: #4e2043;
    border-color: #4e2043;
    transform: scale(0.97);
}
.chatbot-toggle svg {
    width: 34px;
    height: 34px;
    color: inherit;
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
    display: block;
    margin: 0;
    align-self: center;
    justify-self: center;
}
.chatbot-toggle .close-icon {
    position: absolute;
    opacity: 0;
    transform: rotate(90deg);
}
.chatbot-toggle.active .chat-icon {
    opacity: 0;
    transform: rotate(-90deg);
}
.chatbot-toggle.active .close-icon {
    opacity: 1;
    transform: rotate(0deg);
}
.chatbot-header {
    background-color: #4e2043;
    color: #e9ebf8;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: sticky;
    top: 0;
    z-index: 2;
}
.chatbot-messages {
    flex: 1 1 auto;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f4ecd6;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    min-height: 120px;
    max-height: 40vh;
}
.message {
    display: flex;
    margin-bottom: 8px;
    animation: slideIn 0.3s ease;
    border-radius: 8px;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.message-content {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    font-weight: 400;
}
.bot-message { justify-content: flex-start; }
.bot-message .message-content {
    background: white;
    color: #333;
    border-bottom-left-radius: 0px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.user-message { justify-content: flex-end; }
.user-message .message-content {
    background: #cbeaa6;
    color: #4e2043;
    border-bottom-right-radius: 6px;
}
.loading-message { justify-content: flex-start; }
.loading-message .message-content {
    background: white;
    border-bottom-left-radius: 0px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 16px;
}
.typing-indicator {
    display: flex;
    align-items: center;
}
.typing-indicator span {
    height: 8px;
    width: 8px;
    background-color: #aaa;
    border-radius: 50%;
    display: inline-block;
    margin: 0 2px;
    animation: bounce 1.3s infinite ease-in-out;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}
.chatbot-input-container {
    padding: 10px;
    background-color: #cbeaa6 !important; /* Original green background */
    border-top: 1px solid #4e2043;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}
.chatbot-input-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid #4e2043 !important; /* Original purple border */
    border-radius: 10px;
    padding: 0 8px;
    background-color: #ffffff !important; /* Ensure green background */
}
#chatbot-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    padding: 10px;
    background: transparent !important;
    font-size: 0.9rem;
    color: #4e2043 !important;
    font-family: 'Yanone Kaffeesatz', sans-serif !important;
}
#chatbot-input::placeholder {
    color: #4e2043 !important;
    opacity: 0.7;
}
.send-button {
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 8px;
    color: #4e2043 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.send-button:disabled {
    color: #bfb5af !important;
    cursor: not-allowed;
}
.send-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor !important;
}

/* NEW FULL-WIDTH LAYOUT */

/* Full-width sections with alternating backgrounds */
.full-width-section {
  width: 100%;
  padding: 6rem 0;
  position: relative;
}

/* Background color classes using palette */
.bg-primary {
  background-color: var(--light-green); /* #cbeaa6 */
}

.bg-secondary {
  background-color: var(--cream); /* #f4ecd6 */
}

.bg-accent {
  background-color: #e9ebf8; /* Light purple accent */
}

/* Split layout for content sections */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
  align-items: center;
}

.split-layout.reverse {
  grid-template-columns: 1fr 1fr;
}

/* Content areas within split layouts */
.content-left,
.content-right {
  padding: 2rem;
}

.content-left h2,
.content-right h2 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  color: var(--dark-purple);
  line-height: 1.2;
}

.content-left p,
.content-right p {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--dark-purple);
}

.content-left ul,
.content-right ul {
  list-style: none;
  padding: 0;
}

.content-left ul li,
.content-right ul li {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
  position: relative;
  color: var(--dark-purple);
}

.content-left ul li:before,
.content-right ul li:before {
  content: "●";
  color: var(--dark-purple);
  position: absolute;
  left: 0;
}

/* Images in split layouts */
.content-left img,
.content-right img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(78, 32, 67, 0.15);
  transition: transform 0.3s ease;
}

/* Ensure content images are properly sized on mobile */
.content-left img,
.content-right img {
  min-height: 200px; /* Minimum height to ensure visibility */
  max-width: 100%;
  object-fit: cover; /* Better fitting for mobile */
}

.content-left img:hover,
.content-right img:hover {
  transform: scale(1.02);
}

/* FEATURES SECTION - Clean Layout */

.features-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
  background-color: --var(--light-green);
}

.features-title {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 4rem;
  color: var(--dark-purple);
  line-height: 1.2;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  align-items: start;
}

.feature-item {
  text-align: center;
  background-color: var(--cream); /* Cream background for card effect */
  padding: 0; /* Remove padding to allow image to fill top */
  border-radius: 12px; /* Rounded corners consistent with other cards */
  box-shadow: 0 4px 16px rgba(78, 32, 67, 0.1); /* Subtle shadow for depth */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
  height: 500px; /* Fixed height for uniform cards */
  display: flex; /* Use flexbox for vertical layout */
  flex-direction: column; /* Stack image and content vertically */
  overflow: hidden; /* Hide any overflow for clean edges */
}

.feature-item:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 8px 24px rgba(78, 32, 67, 0.15); /* Enhanced shadow on hover */
}

.feature-image {
  height: 250px; /* Fixed height for consistent image area */
  overflow: hidden; /* Hide overflow for clean cropping */
  border-radius: 12px 12px 0 0; /* Round only top corners */
  flex-shrink: 0; /* Prevent shrinking */
}

.feature-image img {
  width: 100%;
  height: 100%; /* Fill the container height */
  object-fit: cover; /* Cover the area while maintaining aspect ratio */
  border-radius: 0; /* Remove border radius since container handles it */
  box-shadow: none; /* Remove individual image shadow */
  transition: transform 0.3s ease;
}

.feature-image img:hover {
  transform: scale(1.05); /* Slight zoom on hover instead of translate */
}

.feature-content {
  flex: 1; /* Fill remaining space in the card */
  padding: 2rem; /* Add padding inside content area */
  display: flex; /* Use flexbox for content layout */
  flex-direction: column; /* Stack title and text vertically */
  justify-content: flex-start; /* Align content to top of area */
}

.feature-content h3 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  color: var(--dark-purple);
  line-height: 1.3;
}

.feature-content p {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--dark-purple);
}

.feature-content ul {
  list-style: none;
  padding: 0;
  text-align: left;
}

.feature-content ul li {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
  position: relative;
  color: var(--dark-purple);
  line-height: 1.5;
}

.feature-content ul li:before {
  content: "●";
  color: var(--dark-purple);
  position: absolute;
  left: 0;
}

/* Responsive behavior for features */
@media (max-width: 950px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .features-container {
    padding: 0 2rem;
  }
  
  .features-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
  }
  
  .feature-content h3 {
    font-size: 1.8rem;
  }
  
  .feature-content p,
  .feature-content ul li {
    font-size: 1.1rem;
  }
}

/* Responsive behavior for split-layout sections (Why and Workflow) */
@media (max-width: 950px) {
  .split-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 0 2rem;
  }
  
  .split-layout.reverse {
    grid-template-columns: 1fr;
  }
  
  /* Ensure consistent order on mobile: text first, image second */
  #why .content-left {
    order: 1; /* Text first */
  }
  
  #why .content-right {
    order: 2; /* Image second */
  }
  
  #workflow .content-left {
    order: 2; /* Image second (since content-left has the image in workflow) */
  }
  
  #workflow .content-right {
    order: 1; /* Text first (since content-right has the text in workflow) */
  }
  
  .content-left,
  .content-right {
    padding: 1.5rem;
  }
  
  .content-left h2,
  .content-right h2 {
    font-size: 2.5rem;
    margin-bottom: 1.2rem;
  }
  
  .content-left p,
  .content-right p {
    font-size: 1.2rem;
    line-height: 1.5;
  }
  
  .content-left ul li,
  .content-right ul li {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
  }
}

@media (max-width: 768px) {
  .split-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.5rem;
  }
  
  /* Maintain consistent order on smaller mobile */
  #why .content-left {
    order: 1; /* Text first */
  }
  
  #why .content-right {
    order: 2; /* Image second */
  }
  
  #workflow .content-left {
    order: 2; /* Image second */
  }
  
  #workflow .content-right {
    order: 1; /* Text first */
  }
  
  .content-left,
  .content-right {
    padding: 1rem;
  }
  
  .content-left h2,
  .content-right h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    line-height: 1.1;
  }
  
  .content-left p,
  .content-right p {
    font-size: 1.1rem;
    line-height: 1.4;
  }
  
  .content-left ul li,
  .content-right ul li {
    font-size: 1rem;
    margin-bottom: 0.7rem;
  }
}

@media (max-width: 480px) {
  .split-layout {
    gap: 1.5rem;
    padding: 0 1rem;
  }
  
  /* Maintain consistent order on very small screens */
  #why .content-left {
    order: 1; /* Text first */
  }
  
  #why .content-right {
    order: 2; /* Image second */
  }
  
  #workflow .content-left {
    order: 2; /* Image second */
  }
  
  #workflow .content-right {
    order: 1; /* Text first */
  }
  
  .content-left,
  .content-right {
    padding: 0.5rem;
  }
  
  .content-left h2,
  .content-right h2 {
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
  }
  
  .content-left p,
  .content-right p {
    font-size: 1rem;
    line-height: 1.3;
  }
  
  .content-left ul li,
  .content-right ul li {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
  }
}