/* CoBeauty Theme - Basé sur la charte graphique */

/* Base Link Styles */
a:not(.btn-primary):not(.btn-secondary):not(.btn-cta):not(.btn-corail):not(.filter-pill):not(.text-white) {
  --tw-text-opacity: 1;
  color: #333333;
}

/* Footer Link Styles */
#main-footer a:not(.btn-primary):not(.btn-secondary):not(.btn-cta):not(.btn-corail):not(.filter-pill):not(.text-white) {
  color: rgb(162 210 255 / var(--tw-text-opacity));
}

/* Dark Mode Link Styles */
.dark a:not(.btn-primary):not(.btn-secondary):not(.btn-cta):not(.btn-corail):not(.filter-pill):not(.text-white) {
  color: #ffffff;
}

/* Dark Mode Footer Link Styles */
.dark #main-footer a:not(.btn-primary):not(.btn-secondary):not(.btn-cta):not(.btn-corail):not(.filter-pill):not(.text-white) {
  color: rgb(162 210 255 / var(--tw-text-opacity));
}

/* Base Body Styles */
body {
  font-family: var(--font-secondary);
  font-size: 16px;
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.6;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-text);
}

h1 { 
  font-size: 3rem; 
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

h2 { 
  font-size: 2.5rem; 
  line-height: 1.25;
  margin-bottom: 1.25rem;
}

/* Layout */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
header {
  background: linear-gradient(to bottom, var(--color-secondary), var(--color-secondary) 80%, rgba(255,209,220,0.3) 100%);
  box-shadow: var(--shadow);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

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

.logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
}

.logo i {
  color: var(--color-primary);
  margin-right: 10px;
}

/* Navigation */
.desktop-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktop-nav li {
  margin-left: 2rem;
}

.nav-link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
  padding: 0.5rem 0;
  position: relative;
}

.nav-link:hover {
  color: var(--color-primary);
}

h3 { 
  font-size: 2rem; 
  line-height: 1.3;
  margin-bottom: 1rem;
}

h4 { 
  font-size: 1.5rem; 
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

h5 { 
  font-size: 1.25rem; 
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

h6 { 
  font-size: 1rem; 
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

/* How It Works Section */
.how-it-works {
  padding: 4rem 0;
  background-color: white;
}

/* Align steps with benefits by widening and padding the inner container */
.how-it-works .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .how-it-works .container { padding: 0 2rem; }
}

@media (min-width: 1024px) {
  .how-it-works .container { padding: 0 3rem; }
}

.steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 3rem;
  gap: 2rem;
}

.step {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: 0 1rem;
}

.step-number {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-weight: bold;
}

p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* Blog/Rich text content (used in posts modal preview and show) */
.blog-content {
  overflow-wrap: anywhere;
}
.blog-content p {
  margin: 0 0 0.9rem 0;
}
.blog-content strong, .blog-content b { font-weight: 700; }
.blog-content em, .blog-content i { font-style: italic; }
.blog-content u { text-decoration: underline; }
.blog-content > div {
  /* Many WYSIWYG editors emit bare divs instead of p */
  margin: 0 0 0.9rem 0;
  line-height: 1.7;
}
.blog-content h2 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.35;
  margin: 1.25rem 0 0.75rem 0;
}
.blog-content h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 1rem 0 0.5rem 0;
}
.blog-content ul,
.blog-content ol {
  margin: 0.75rem 0 1rem 1.25rem;
  padding-left: 1rem;
}
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { margin: 0.25rem 0; }
.blog-content a { color: var(--color-primary-600); text-decoration: underline; }
.dark .blog-content a { color: var(--color-primary-400); }
.blog-content blockquote {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--color-primary-400);
  background: rgba(0,0,0,0.03);
}
.dark .blog-content blockquote { background: rgba(255,255,255,0.05); }
.blog-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 0.75rem auto;
}
.blog-content figure {
  margin: 0.75rem 0 1rem;
  text-align: center;
}
.blog-content figure img { margin: 0.25rem auto 0.5rem; }
.blog-content figcaption {
  font-size: 0.85rem;
  color: #6b7280; /* gray-500 */
}

/* Benefits Section */
.benefits {
  padding: 4rem 0;
  background-color: rgba(179, 153, 212, 0.1);
}

.benefits--compact {
  padding-top: 1.5rem !important;
}

.benefits .section-title {
  text-align: center;
  margin-bottom: 3rem;
}

/* Compact spacing for How It Works to align with previous section */
.how-it-works--compact {
  padding-top: 1.5rem !important;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Card Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Helper: slight right offset to visually align with preceding section */
.card-grid--offset {
  padding-left: 0.5rem; /* small nudge on md */
}

@media (max-width: 768px) {
  .card-grid--offset {
    padding-left: 0; /* no offset on mobile */
  }
}

@media (min-width: 1024px) {
  .card-grid--offset {
    padding-left: 3rem; /* stronger shift on desktop */
  }
}

@media (min-width: 1280px) {
  .card-grid--offset {
    padding-left: 4rem; /* xl screens */
  }
}

/* Card Base Styles */
.card-beauty {
  background-color: #e7e4e4;
  border-radius: 12px;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  transition-property: transform, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  border: 2px solid transparent;
}



.card-beauty:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Card Image */
.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Card Content */
.card-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--color-text);
}

.card-subtitle {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.card-description {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
}

/* Card Features List */
.card-beauty ul {
  list-style-type: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.card-beauty li {
  padding: 0.5rem 0;
  position: relative;
  padding-left: 1.75rem;
  color: #555;
  line-height: 1.5;
}

.card-beauty li:before {
  content: '✓';
  color: var(--color-primary);
  position: absolute;
  left: 0;
  font-weight: bold;
  font-size: 1.1em;
}

/* Card Footer */
.card-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.card-rating {
  display: flex;
  align-items: center;
  color: #FFC107;
  font-size: 0.9rem;
}

.card-rating i {
  margin-right: 0.25rem;
}

.card-rating-count {
  color: #666;
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

/* Card with Icon */
.card-icon {
  text-align: center;
  padding: 2rem 1.5rem;
}

.card-icon i {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

/* Card with Image Overlay */
.card-overlay {
  position: relative;
  color: white;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
}

.card-overlay .card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.card-overlay .card-content {
  position: relative;
  z-index: 2;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  padding: 2rem;
}

.card-overlay .card-title,
.card-overlay .card-description {
  color: white;
}

.card-overlay .card-description {
  opacity: 0.9;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  
  .card-beauty {
    max-width: 100%;
  }
}

/* Hero Section */
.hero {
  padding: 6rem 0;
  text-align: center;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23F5F5F5" opacity="0.5"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23B399D4" stroke-width="1" stroke-opacity="0.1"/></svg>');
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.hero:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.98) 100%);
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero h1 {
  font-family: var(--font-primary);
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.hero p {
  font-size: 1.25rem;
  color: #555;
  max-width: 700px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.hero-image {
  margin-top: 3rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.hero-image:hover img {
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .hero {
    padding: 4rem 0;
  }
  
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .hero p {
    font-size: 1.1rem;
    padding: 0 1rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-buttons .btn {
    width: 100%;
    max-width: 280px;
    margin: 0.5rem 0;
  }
}

/* Steps Section */
.steps {
  display: flex;
  justify-content: center;
  margin: 3rem 0;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.step {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.step-number:after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  opacity: 0.3;
  z-index: -1;
}

.step-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--color-text);
}

.step-description {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.step-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  color: #ccc;
  font-size: 1.5rem;
}

.step-divider:before,
.step-divider:after {
  content: '';
  flex: 1;
  height: 1px;
  background: #eee;
  margin: 0 1rem;
}

/* Footer Styles */
.footer {
  background: linear-gradient(135deg, var(--color-primary) 0%, #9B7DC1 100%);
  color: white;
  position: relative;
  padding-top: 4rem;
  margin-top: 4rem;
}

.footer-wave {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.footer-wave svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100px;
}

.footer-wave .shape-fill {
  fill: var(--color-white);
}

.footer-content {
  position: relative;
  z-index: 1;
  padding: 2rem 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  text-align: left;
}

.footer-column h3 {
  color: white;
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.75rem;
  font-weight: 600;
}

.footer-column h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background: var(--color-secondary);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s ease, padding-left 0.3s ease;
  display: block;
}

.footer-links a:hover {
  color: var(--color-secondary);
  padding-left: 8px;
}

.footer-contact p {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.footer-contact i {
  margin-right: 0.75rem;
  color: var(--color-secondary);
  margin-top: 0.25rem;
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.social-links a:hover {
  background: var(--color-secondary);
  transform: translateY(-3px);
}

.footer-bottom {
  background: rgba(0, 0, 0, 0.1);
  padding: 1.5rem 0;
  margin-top: 3rem;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom a {
  color: white;
  text-decoration: none;
  margin: 0 0.5rem;
  transition: color 0.3s ease;
}

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

/* Contact Info */
.contact-info {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
}

.contact-info p {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
}

.contact-info i {
  margin-right: 10px;
  color: var(--color-primary);
  margin-top: 4px;
  min-width: 20px;
  text-align: center;
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  font-size: 1.25rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icons a:hover {
  background: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  color: white;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin-top: 3rem;
}

.footer-bottom p {
  margin: 0;
  line-height: 1.6;
}

.footer-bottom a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

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

/* Dark Mode */
.dark {
  --primary: #8B5CF6;
  --primary-hover: #7C3AED;
  --secondary: #1F2937;
  --text: #F9FAFB;
  --text-secondary: #9CA3AF;
  --light-bg: #111827;
  --white: #1F2937;
}

/* Base Styles */
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--color-gray-50);
  color: var(--color-gray-900);
  transition: all 0.3s ease;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

.dark body {
  background-color: var(--color-gray-900);
  color: var(--color-gray-100);
}

/* Header styles */
header {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 50;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.dark header {
  background-color: rgba(17, 24, 39, 0.8);
}

.header-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-600);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease;
}

.dark .logo {
  color: var(--color-primary-400);
}

.logo i {
  font-size: 1.5rem;
  color: var(--color-primary-500);
}

.nav-desktop {
  display: none;
}

@media (min-width: 768px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
}

.nav-desktop a {
  color: var(--color-gray-700);
  font-weight: 500;
  transition: color 0.3s ease;
}

.dark .nav-desktop a {
  color: var(--color-gray-300);
}

.nav-desktop a:hover {
  color: var(--color-primary-600);
}

.dark .nav-desktop a:hover {
  color: var(--color-primary-400);
}

.mobile-menu-button {
  display: none;
  color: var(--color-gray-700);
  transition: color 0.3s ease;
}

.dark .mobile-menu-button {
  color: var(--color-gray-300);
}

.mobile-menu-button:hover {
  color: var(--color-primary);
}

.dark .mobile-menu-button:hover {
  color: var(--color-primary);
}

/* Navbar responsive behavior: collapse to burger up to 1024px (tablet and below) */
@media (max-width: 1024px) {
  .navbar-links {
    display: none;
  }

  .mobile-menu-button {
    display: block;
  }
}

/* Hero Section */
.hero {
  background: linear-gradient(to bottom, #FFD1DC 0%, #FFD1DC 50%, rgba(255, 209, 220, 0.3) 100%);
  padding: 5rem 1rem;
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .hero {
    padding: 8rem 1rem;
  }
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: var(--color-gray-900);
}

.hero p {
  font-size: 1.125rem;
  color: var(--color-gray-700);
  margin-bottom: 2rem;
  max-width: 600px;
}

/* Buttons */
.btn {
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid transparent;
}

.btn-primary, .btn-cancel {
  display: inline-block;
  padding: 0.875rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--color-primary-600);
  color: white;
  border: none;
}

.btn-primary:hover {
  background-color: var(--color-primary-700);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-cancel {
  background-color: var(--color-gray-200);
  color: var(--color-gray-800);
  border: 1px solid var(--color-gray-300);
}

.btn-cancel:hover {
  background-color: var(--color-gray-300);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Responsive button sizing on small screens */
@media (max-width: 640px) {
  .btn,
  .btn-primary,
  .btn-cancel {
    padding: 0.5rem 1rem;
    font-size: 0.875rem; /* text-sm */
  }
}

/* Force wrap helper: defeats any truncation utilities in scope */
.allow-wrap {
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  word-break: break-word;
}

/* Button Partner */
.btn-partner {
  color: #B399D4 !important;
  transition: color 0.3s ease;
}

.btn-partner:hover {
  color: #9A7FC1 !important;
}

/* Section Title */
.section-title {
  position: relative;
  display: inline-block;
  margin-bottom: 3rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-gray-900);
}

.dark .section-title {
  color: var(--color-gray-100);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -0.75rem;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background-image: linear-gradient(to right, #FF8C69, #9A7FC1);
}

/* CTA Section */
.cta-section {
  text-align: center;
  background: linear-gradient(to right, #FFD1DC, #B399D4);
  color: white;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.cta-section h2 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: white !important;
}

.cta-section p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9) !important;
}

.cta-section p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.95;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .steps {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  
  .header-content {
    padding: 1rem 0;
  }
  
  .desktop-nav {
    display: none;
  }
  
  .mobile-menu-button {
    display: block;
  }
  
  .mobile-nav {
    display: block;
  }
}

/* Responsive adjustments for footer */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .footer-column {
    text-align: center;
  }
  
  .footer-column h3::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .footer-links a {
    justify-content: center;
  }
  
  .social-links {
    justify-content: center;
  }
}

/* Responsive adjustments for steps */
@media (max-width: 992px) {
  .steps {
    gap: 1rem;
  }
  
  .step {
    min-width: calc(50% - 1rem);
  }
}

@media (max-width: 576px) {
  .step {
    min-width: 100%;
  }
  
  .step-divider {
    display: none;
  }
}

/* How It Works Section */
.how-it-works {
  padding: 4rem 0;
  background-color: white;
}

.how-it-works .section-title {
  text-align: center;
  margin-bottom: 3rem;
}

.steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
}

.step {
  flex: 1;
  min-width: 250px;
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 1.5rem;
}

.step-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--color-text);
}

.step-description {
  color: #666;
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .steps {
    flex-direction: column;
    gap: 2.5rem;
  }
  
  .step {
    max-width: 100%;
    margin-bottom: 1rem;
  }
}

/* Testimonials Section */
.testimonials {
  padding: 4rem 0;
  background-color: #f9f9f9;
}

.testimonial {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.testimonial-content {
  font-style: italic;
  color: #555;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  position: relative;
  padding-left: 2rem;
}

.testimonial-content:before {
  content: '\201C';
  font-size: 4rem;
  color: var(--color-primary);
  opacity: 0.2;
  position: absolute;
  left: -0.5rem;
  top: -1.5rem;
  font-family: Georgia, serif;
}

.testimonial-author {
  display: flex;
  align-items: center;
}

.testimonial-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 1rem;
}

.testimonial-info h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-text);
}

.testimonial-info p {
  margin: 0.25rem 0 0;
  color: #777;
  font-size: 0.9rem;
}

/* Testimonials Grid */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Star Rating */
.rating {
  color: var(--color-primary);
  margin-bottom: 1rem;
  display: flex;
  gap: 0.25rem;
}

.rating i {
  font-size: 1.1rem;
}

/* CTA Section */
.cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #9B7DC1 100%);
  color: white;
  padding: 4rem 0;
  text-align: center;
}

.cta h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.cta p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

.cta .btn-primary {
  background-color: white;
  color: var(--color-primary);
  border: 2px solid white;
  font-weight: 600;
  padding: 12px 30px;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.cta .btn-primary:hover {
  background-color: transparent;
  color: white;
}

.cta .btn-outline {
  background-color: transparent;
  border: 2px solid white;
  color: white;
  margin-left: 1rem;
  font-weight: 600;
  padding: 12px 30px;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.cta .btn-outline:hover {
  background-color: white;
  color: var(--color-primary);
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .cta h2 {
    font-size: 1.8rem;
  }
  
  .cta p {
    font-size: 1rem;
    padding: 0 1rem;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta .btn-primary,
  .cta .btn-outline {
    width: 100%;
    max-width: 280px;
    margin: 0.5rem 0;
  }
}

/* Buttons */
.btn-primary {
  background-color: var(--color-primary);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: #9A7FC1;
}

.btn-cancel {
  background-color: white;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-cancel:hover {
  background-color: #f5f5f5;
}

/* Hero Section */
.hero {
  padding: 4rem 0;
  text-align: center;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23F5F5F5" opacity="0.5"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23B399D4" stroke-width="1" stroke-opacity="0.1"/></svg>');
  background-size: cover;
}

.hero h1 {
  font-size: 3rem;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.hero p {
  font-size: 1.25rem;
  color: var(--color-text);
  max-width: 800px;
  margin: 0 auto 2rem;
}

.hero .btn {
  margin: 0 0.5rem 1rem;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  border-radius: 50px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.hero .btn-primary {
  background-color: var(--color-primary);
  color: white;
  border: 2px solid var(--color-primary);
}

.hero .btn-primary:hover {
  background-color: #9A7FC1;
  border-color: #9A7FC1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hero .btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.hero .btn-outline:hover {
  background-color: rgba(179, 153, 212, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Purple Text Utility */
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(179 153 212);
}

/* Footer Wave */
.footer-wave {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  margin-bottom: -1px; /* Prevents small gap */
}

.footer-wave svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100px;
}

.footer-wave .shape-fill {
  fill: #FFFFFF;
}

.dark .footer-wave .shape-fill {
  fill: #1F2937; /* Dark mode color */
}

/* Variables CSS */
:root {
  --color-primary: #B399D4;
  --color-secondary: #FFD1DC;
  --color-accent: #FF8C69;
  --color-text: #333333;
  --color-bg: #F5F5F5;
  --color-white: #FFFFFF;
  --shadow: 0px 2px 8px rgba(0,0,0,0.1);
  --shadow-hover: 0px 4px 12px rgba(0,0,0,0.15);
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Open Sans', sans-serif;
  --hero-bg-from: #FFD1DC;
  --hero-bg-via: #FFD1DC;
  --hero-bg-to: rgba(255,209,220,0.3);
  --btn-primary-bg: #B399D4;
  --btn-primary-hover: #9C7FC2;
  --btn-partner-text: #B399D4;
  --step-bg: #F8F5FF;
  --step-number: #B399D4;
  --step-text: #4B5563;
  --testimonial-bg: #FFFFFF;
  --testimonial-text: #4B5563;
  --testimonial-author: #6B7280;
  --cta-bg-from: #FFD1DC;
  --cta-bg-to: #B399D4;
  --footer-bg: #2D3748;
  --footer-text: #E2E8F0;
  --footer-link-hover: #B399D4;
  --btn-primary: #B399D4;
  --btn-primary-hover: #9C7FC2;
  --btn-partner-border: #B399D4;
  --btn-partner-hover-bg: rgba(255, 255, 255, 0.9);
}

/* Boutons */
.btn-primary {
  background-color: var(--btn-primary);
  color: white;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  display: inline-block;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  color: white;
  text-decoration: none;
}

.btn-partner {
  background-color: white;
  color: var(--btn-partner-border);
  border: 1px solid var(--btn-partner-border);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  text-align: center;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
}

.btn-partner:hover {
  background-color: var(--btn-partner-hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  color: var(--btn-partner-border);
  text-decoration: none;
}

/* Section Bénéfices */
.benefits {
  padding: 5rem 0;
  background-color: var(--color-white);
}

.benefits .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 3rem;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}


.card-beauty:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: #B399D4;
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.card-content {
  padding: 1.5rem;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.card-beauty p {
  color: var(--color-text);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.card-beauty ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.card-beauty li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}

.card-beauty li:before {
  content: "✓";
  color: var(--color-primary);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Responsive */
@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .benefits {
    padding: 6rem 0;
  }
}

/* Comment ça marche */
.how-it-works {
  padding: 5rem 0;
  background-color: var(--color-white);
}

.how-it-works .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 6rem;
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

.step {
  background: var(--step-bg);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.step-number {
  width: 3rem;
  height: 3rem;
  background: var(--step-number);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 auto 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.step h3 {
  color: var(--color-primary);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.step p {
  color: var(--step-text);
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .how-it-works {
    padding: 6rem 0;
  }
}

/* Témoignages */
.testimonials {
  padding: 5rem 0;
  background-color: #F9FAFB;
}

.testimonials .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.testimonial {
  background: var(--testimonial-bg);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.testimonial:hover {
  transform: translateY(-5px);
}

.testimonial-text {
  font-style: italic;
  color: var(--testimonial-text);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  position: relative;
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-primary);
}

.testimonial-author {
  color: var(--testimonial-author);
  font-weight: 500;
  font-size: 0.95rem;
}

/* Section CTA */
.cta-section {
  background: linear-gradient(to right, var(--cta-bg-from), var(--cta-bg-to));
  padding: 5rem 0;
  color: white;
  text-align: center;
}

.cta-title {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.cta-text {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  line-height: 1.6;
}

/* Pied de page */
#main-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  padding-top: 4rem;
  margin-top: 4rem;
}

#main-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.footer-links a {
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

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

.footer-copyright {
  margin: 2rem 0;
  color: var(--footer-text);
  opacity: 0.8;
  font-size: 0.9rem;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.footer-social a {
  color: var(--footer-text);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.footer-social a:hover {
  background: var(--footer-link-hover);
  transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 640px) {
  .footer-links {
    flex-direction: column;
    gap: 1rem;
  }
  
  .cta-title {
    font-size: 1.875rem;
  }
  
  .cta-text {
    font-size: 1.125rem;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta .btn-primary,
  .cta .btn-outline {
    width: 100%;
    max-width: 280px;
    margin: 0.5rem 0;
  }
}

/* Hero Section */
.hero {
  padding: 5rem 0;
  background: linear-gradient(to bottom, var(--hero-bg-from), var(--hero-bg-via), var(--hero-bg-to));
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.hero p {
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.hero .btn-primary {
  background-color: var(--btn-primary-bg);
  color: white;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.hero .btn-primary:hover {
  background-color: var(--btn-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hero .btn-partner {
  background-color: white;
  color: var(--btn-partner-text);
  border: 1px solid var(--btn-partner-text);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.hero .btn-partner:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Responsive */
@media (min-width: 768px) {
  .hero {
    padding: 8rem 0;
  }
  
  .hero h1 {
    font-size: 3.75rem;
  }
}

.dark {
  --color-text: #F5F5F5;
  --color-bg: #1F2937;
}

/* Typographie de base */
body {
  font-family: var(--font-secondary);
  font-size: 16px;
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.6;
}

/* Navigation */
.navbar {
  position: relative;
  z-index: 50;
  background: linear-gradient(to bottom, var(--color-secondary), var(--color-secondary) 80%, rgba(255,209,220,0.3) 100%);
  box-shadow: var(--shadow);
  padding: 1rem 0;
}

.dark .navbar {
  background: linear-gradient(to bottom, #1F2937, #1F2937 80%, rgba(31, 41, 55, 0.3) 100%);
}

.navbar-container {

  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left filler, centered content, right filler */
  align-items: center;
  gap: 1rem;
}

.navbar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--color-text);
  transition: color 0.3s ease;
  justify-self: start;
  grid-column: 1;
}

.navbar-logo:hover {
  color: var(--color-primary);
}

.navbar-logo i {
  color: var(--color-primary);
  margin-right: 0.5rem;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Ensure the main links block stays geometrically centered regardless of left/right widths */
.navbar-center {
  justify-self: center;
  grid-column: 2;
}

/* Right-side actions (bell, avatar, admin) are pinned to the far right */
.navbar-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  grid-column: 3;
}

/* Mobile indicator (bell + chip) visible on sm/md, hidden on lg+ */
.mobile-indicator {
  grid-column: 3;
  justify-self: end;
}

/* Flowbite navbar: strict 3-column grid helpers (brand | center | actions) */
.navbar-grid {
  display: grid;
  grid-template-columns: auto 1fr auto; /* brand auto | center flexible | actions auto */
  grid-template-areas: 'brand center actions';
  align-items: center;
}
.navbar-brand { grid-area: brand; justify-self: start; width: clamp(126px, 14.7vw, 189px); overflow: hidden; }
/* Brand image: fill the brand link width and keep aspect ratio */
.navbar-brand img { display: block; width: 100%; height: auto; max-width: none !important; max-height: 50px; }
@media (min-width: 1024px) { /* lg */
  .navbar-brand img { max-height: 59px; }
}
.navbar-center { grid-area: center; justify-self: center; }
.navbar-actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: 0.5rem; }

/* When the global modal is active, we no longer hide Flowbite backdrops globally.
   Secondary modals are allowed to render their backdrops.
   The global page overlay remains hidden via the rule below. */

/*
 * Global Turbo modal (shared location details, etc.): high stack but leave headroom
 * for layered UI such as #feature-payment-modal (Stripe / packs checkout).
 */
[data-modal-manager-target="modal"] {
  z-index: 100000 !important;
}

/* And the inner panel/frame explicitly above any backdrops */
[data-modal-manager-target="modal"] .relative.bg-white,
[data-modal-manager-target="modal"] [data-modal-manager-target="frame"] {
  position: relative;
  z-index: 100001 !important;
}

/* Paiement fonctionnalités (pack photos, promos…) : au-dessus de modal-manager */
#feature-payment-modal:not(.hidden) {
  z-index: 110000 !important;
}

/* Hide modal loading overlay by default; opt-in when submitting */
[data-modal-manager-target="overlay"] { display: none !important; }

.modal-overlay--visible {
  display: block !important;
  z-index: 99999 !important; /* under modal-manager shell (100000) */
}

/* Hide the global page overlay only while our modal is active */
body.global-modal-active #global-page-overlay { display: none !important; }

/* Mobile burger: always placed at the far right in the grid */
.navbar-burger { grid-area: actions; justify-self: end; }

.nav-link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
  padding: 0.5rem 0;
  position: relative;
}

.nav-link:hover {
  color: var(--color-primary);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  background-color: var(--color-white);
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.dark .mobile-menu {
  background-color: var(--color-bg);
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-gray-100);
  margin-bottom: 1.5rem;
}

.dark .mobile-menu-header {
  border-bottom-color: var(--color-gray-800);
}

.mobile-menu-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.5rem;
  margin-right: -0.5rem;
  transition: color 0.2s ease;
}

.mobile-menu-close:hover {
  color: var(--color-primary);
}

.mobile-menu-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.mobile-menu-links li {
  margin-bottom: 0.25rem;
}

.mobile-nav-link {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  font-weight: 500;
}

.mobile-nav-link:hover {
  background-color: var(--color-gray-100);
  color: var(--color-primary);
}

.dark .mobile-nav-link:hover {
  background-color: var(--color-gray-800);
}

.mobile-menu-auth {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-gray-200);
}

.dark .mobile-menu-auth {
  border-top-color: var(--color-gray-700);
}

.mobile-language-selector {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-gray-200);
}

.dark .mobile-language-selector {
  border-top-color: var(--color-gray-700);
}

.mobile-menu-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-gray-200);
}

.dark .mobile-menu-footer {
  border-top-color: var(--color-gray-700);
}

/* Menu mobile button */
.mobile-menu-button {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.3s ease;
}

.mobile-menu-button:hover {
  color: var(--color-primary);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background-color: var(--color-white);
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  padding: 2rem;
  overflow-y: auto;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-text);
  cursor: pointer;
}

.mobile-menu-links {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 3rem;
}

.mobile-menu-links li {
  margin-bottom: 1.5rem;
}

.mobile-nav-link {
  font-size: 1.1rem;
}

.close-menu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-text);
  cursor: pointer;
}

/* CTA Section */
.cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #9B7DC1 100%);
  color: white;
  padding: 4rem 0;
  text-align: center;
}

.cta h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.cta p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 2rem;
  opacity: 0.9;
}

.cta .hero-buttons {
  justify-content: center;
}

.cta .btn-primary {
  background-color: white;
  color: var(--color-primary);
  border: 2px solid white;
}

.cta .btn-cancel {
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

.cta .btn-primary:hover {
  background-color: transparent;
  color: white;
}

.cta .btn-cancel:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Styles RTL complets */
[dir="rtl"],
.rtl {
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
}

/* Correction pour les éléments de formulaire en RTL */
[dir="rtl"] .form-input,
[dir="rtl"] .form-select,
[dir="rtl"] .form-textarea,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  text-align: right;
  padding-right: 0.75rem;
  padding-left: 2.5rem;
}

/* Correction pour les icônes dans les champs de formulaire */
[dir="rtl"] .input-icon {
  left: auto;
  right: 0.75rem;
}

/* Correction pour les marges et paddings */
[dir="rtl"] .me-2 {
  margin-left: 0.5rem;
  margin-right: 0 !important;
}

[dir="rtl"] .ms-2 {
  margin-right: 0.5rem;
  margin-left: 0 !important;
}

[dir="rtl"] .pe-3 {
  padding-right: 0.75rem !important;
  padding-left: 1rem !important;
}

/* Correction pour les flottants */
[dir="rtl"] .float-right {
  float: left !important;
}

[dir="rtl"] .float-left {
  float: right !important;
}

/* Correction pour les marges négatives */
[dir="rtl"] .-me-1 {
  margin-left: -0.25rem !important;
  margin-right: 0 !important;
}

/* Correction pour les listes à puces */
[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-right: 1.5rem;
  padding-left: 0;
}

/* Correction pour les tableaux */
[dir="rtl"] table {
  text-align: right;
}

[dir="rtl"] th,
[dir="rtl"] td {
  text-align: right;
}

/* Correction pour les menus déroulants */
[dir="rtl"] .dropdown-menu {
  right: auto !important;
  left: 0 !important;
  text-align: right;
}

/* Correction pour les icônes de sélecteur de date/heure */
[dir="rtl"] .datepicker-dropdown {
  direction: rtl;
}

/* Correction pour les onglets */
[dir="rtl"] .nav-tabs {
  padding-right: 0;
}

/* Correction pour les boutons avec icônes */
[dir="rtl"] .btn-icon i {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Correction pour les icônes flag */
[dir="rtl"] .fi {
  margin-right: 0.5rem;
  margin-left: 0;
}

/* Correction pour les marges spécifiques au layout */
[dir="rtl"] .ml-2 {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .mr-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

/* Correction pour les éléments de formulaire avec icônes */
[dir="rtl"] .relative > svg {
  left: auto !important;
  right: 0.75rem !important;
}

/* Correction pour les sélecteurs */
[dir="rtl"] select {
  background-position: left 0.5rem center !important;
  padding-right: 2.5rem !important;
  padding-left: 1rem !important;
}

/* Styles RTL */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

[dir="rtl"] .rtl\:mr-2 {
  margin-right: 0.5rem;
  margin-left: 0;
}

[dir="rtl"] .rtl\:ml-2 {
  margin-left: 0.5rem;
  margin-right: 0;
}

[dir="rtl"] .rtl\:text-right {
  text-align: right;
}

[dir="rtl"] .rtl\:float-right {
  float: right;
}

[dir="rtl"] .rtl\:clear-right {
  clear: right;
}

/* Correction pour les icônes et éléments flottants en RTL */
[dir="rtl"] .fi {
  display: inline-block;
  margin-left: 0.25rem;
  margin-right: 0;
}

/* Correction pour les marges des éléments de formulaire en RTL */
[dir="rtl"] .form-input,
[dir="rtl"] .form-select,
[dir="rtl"] .form-textarea {
  text-align: right;
}

/* Images des cartes de services */
.card-beauty img.rounded-t-card {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: #F5F5F5;
}

/* Icônes selon la charte graphique */


.dark svg:not(.dark-mode-icon) {
  color: #B399D4; /* Maintenir la couleur lavande en mode sombre */
}







/* Bouton Annuler (secondaire) */
.btn-cancel {
  background-color: white;
  border: 1px solid #B399D4;
  color: #B399D4;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-cancel:hover {
  background-color: rgba(179, 153, 212, 0.1);
}

/* Titres de section */
.section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  color: #1F2937;
  position: relative;
  padding-bottom: 1rem;
  margin: 0 auto 2rem auto;
  text-align: center;
  display: block;
  width: 100%;
  max-width: 100%;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-image: linear-gradient(to right, #FFD1DC, #B399D4);
  border-radius: 2px;
}

.dark .section-title {
  color: #F5F5F5;
}


.card-beauty:hover {
  transform: scale(1.02);
  box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
  border-color: #B399D4;
}

.dark .card-beauty {
  background-color: #1F2937;
  border-color: #374151;
}

/* Bannière d'accueil */
.banner-beauty {
  background-color: transparent;
  padding: 2rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid rgba(179, 153, 212, 0.3);
}

.dark .banner-beauty {
  background-color: transparent;
  border-bottom: 2px solid rgba(179, 153, 212, 0.5);
}

.dark .banner-beauty h1 {
  color: white;
}

.dark .banner-beauty p {
  color: rgba(255, 255, 255, 0.9);
}

/* Header */
body > nav {
  background: linear-gradient(to right, #ede9ff, #f2edff) !important;
  box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
}

body.dark > nav {
  background: linear-gradient(to right, #4c1d95, #5b21b6) !important;
}

/* Liens */
/* a {
  color: #A2D2FF;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
} */
/* a:hover {
  color: #B399D4;
} */

/* .dark a:hover {
  color: #FFD1DC;
} */

/* Icônes */
.icon {
  color: #B399D4;
  stroke: currentColor;
  stroke-width: 1.5px;
}

/* Custom utility classes */
.benefits {
  background-color: rgba(179, 153, 212, 0.1);
}

.hero {
  padding: 4rem 0;
  text-align: center;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23F5F5F5" opacity="0.5"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23B399D4" stroke-width="1" stroke-opacity="0.1"/></svg>');
  background-size: 100px 100px;
  background-repeat: repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
  background-color: #F9FAFB;
}

.testimonials {
  padding: 5rem 0;
  background-color: #F9FAFB;
}

/* Classes utilitaires pour les couleurs de la charte */
.bg-gradient-primary {
  background-image: linear-gradient(to right, #FFD1DC, #B399D4);
}

.text-primary {
  color: #B399D4;
}

.text-secondary {
  color: #FFD1DC;
}

.text-accent {
  color: #FF8C69;
}

/* Styles pour les formulaires */
input, select, textarea {
  border-radius: 8px;
  border-color: #D1D5DB;
}
input:focus, select:focus, textarea:focus {
  border-color: #B399D4;
  box-shadow: 0 0 0 3px rgba(179, 153, 212, 0.5);
}

.dark input, .dark select, .dark textarea {
  background-color: #374151;
  border-color: #4B5563;
  color: white;
}

/* Styles pour les badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: #FFD1DC;
  color: #333333;
}

.badge-success {
  background-color: #77DD77;
  color: #333333;
}

.badge-accent {
  background-color: #FF8C69;
  color: white;
}

/* Styles pour les sections */
.section-title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #333333;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .section-title {
    margin-top: revert-layer;
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}
.dark .section-title {
  color: white;
}

.section-subtitle {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #666666;
  margin-bottom: 2rem;
  font-family: 'Open Sans', sans-serif;
}
.dark .section-subtitle {
  color: #D1D5DB;
}

/* Drawer styles */
#drawer-right.drawer-width {
  width: 50% !important;
  max-width: 50% !important;
  min-width: 50% !important;
}

/* Styles pour le drawer */
.drawer-width-half {
  width: 50% !important;
  max-width: 50% !important;
}

/* Styles pour les formulaires inline (utilisés dans le sélecteur de langue) */
.inline-form {
  display: inline;
  margin: 0;
  padding: 0;
}

.inline-form button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

/* Style de survol indestructible pour les liens de langue */
.cobeauty-lang-link:hover {
  background-color: rgba(179, 153, 212, 0.15) !important;
  color: #333333 !important;
}

.dark .cobeauty-lang-link:hover {
  background-color: rgba(179, 153, 212, 0.2) !important;
  color: #F5F5F5 !important;
}

/* Mobile Navigation */
.mobile-menu-button {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.5rem;
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background-color: white;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  padding: 2rem;
  overflow-y: auto;
}

.mobile-nav.active {
  transform: translateX(0);
}

.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav li {
  margin-bottom: 1.5rem;
}

.mobile-nav .nav-link {
  font-size: 1.1rem;
}

.close-menu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-text);
  cursor: pointer;
}

/* CTA Section */
.cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #9B7DC1 100%);
  color: white;
  padding: 4rem 0;
  text-align: center;
}

.cta h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.cta p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 2rem;
  opacity: 0.9;
}

.cta .hero-buttons {
  justify-content: center;
}

.cta .btn-primary {
  background-color: white;
  color: var(--color-primary);
  border: 2px solid white;
}

.cta .btn-cancel {
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

.cta .btn-primary:hover {
  background-color: transparent;
  color: white;
}

.cta .btn-cancel:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Conteneur du titre Ambassadeur */
.ambassador-title-container {
  padding: 4rem 0;
  text-align: center;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23F5F5F5" opacity="0.5"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23B399D4" stroke-width="1" stroke-opacity="0.1"/></svg>');
  background-size: 100px 100px;
  background-repeat: repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
  background-color: #F9FAFB;
}

/* Version dark mode */
.dark .ambassador-title-container {
  background-color: #1F2937;
  background-image: none;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

/* Home hero lace background (like ambassador) */
.home-hero {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23F5F5F5" opacity="0.6"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23B399D4" stroke-width="1" stroke-opacity="0.2"/></svg>');
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* No background image on hero; body provides the lace */
.dark .home-hero {
  background-image: none;
}

/* (Removed) background-image rules on main; rely on body .home-lace-bg only to avoid seams */

/* Apply lace to entire page background on home to avoid any seams */
.home-lace-bg {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23F5F5F5" opacity="0.6"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23B399D4" stroke-width="1" stroke-opacity="0.2"/></svg>');
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Keep lace in dark mode as well on home (requested) */
.dark .home-lace-bg {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%230A0A0A" opacity="0.2"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23B399D4" stroke-width="1" stroke-opacity="0.2"/></svg>');
}

/* Keep main top padding from layout on home to avoid navbar overlap */

/* Remove extra top gap from flash container on home */
.home-lace-bg #flash-messages {
  margin-top: 0 !important;
}

/* ===== Styles pour les sections ambassadeurs ===== */
.ambassador-section {
  padding: 5rem 0;
  position: relative;
}

/* Section Benefits */
.ambassador-benefits-section {
  background-color: rgba(179, 153, 212, 0.1);
  padding-bottom: 4rem;
  padding-top: 1rem;
}

.dark .ambassador-benefits-section {
  background-color: #1F2937;
  padding-bottom: 4rem;
  padding-top: 1rem;
}

/* Section How it works */
.ambassador-how-it-works-section {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23F5F5F5" opacity="0.5"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23B399D4" stroke-width="1" stroke-opacity="0.1"/></svg>');
  background-color: #FFFFFF;
  padding-bottom: 4rem;
  padding-top: 1rem;
}

.dark .ambassador-how-it-works-section {
  background-color: #111827;
  background-image: none;
}

/* Section Final CTA */
.final-cta-section {
  background: linear-gradient(135deg, #B399D4 0%, #FFD1DC 100%);
  text-align: center;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.dark .final-cta-section {
  background: linear-gradient(135deg, #7E57C2 0%, #9C27B0 100%);
}

/* Styles de texte communs */
.ambassador-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--color-primary);
}

.dark .ambassador-section h2 {
  color: var(--color-primary-light);
}

/* Conteneur du titre domain and services */
.domain-hero-section{
  padding: 2rem 0;
  text-align: center;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23F5F5F5" opacity="0.5"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23B399D4" stroke-width="1" stroke-opacity="0.1"/></svg>');
  background-size: 100px 100px;
  background-repeat: repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
  background-color: #F9FAFB;
}

/* Version dark mode */
.dark .domain-hero-section {
  background-color: #1F2937;
  background-image: none;
  padding-bottom: 1rem;
  padding-top: 1rem;
}


/* Conteneur du titre domain and services */
.domain-grid-section{
  padding: 4rem 0;
  text-align: center;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23F5F5F5" opacity="0.5"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23B399D4" stroke-width="1" stroke-opacity="0.1"/></svg>');
  background-size: 100px 100px;
  background-repeat: repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
  background-color: #F9FAFB;
}

/* Version dark mode */
.dark .domain-grid-section {
  background-color: #1F2937;
  background-image: none;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

/* Conteneur du titre domain and services */
.domain-grid-section{
  padding: 4rem 0;
  text-align: center;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23F5F5F5" opacity="0.5"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23B399D4" stroke-width="1" stroke-opacity="0.1"/></svg>');
  background-size: 100px 100px;
  background-repeat: repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
  background-color: #F9FAFB;
}

/* Version dark mode */
.dark .domain-grid-section {
  background-color: #1F2937;
  background-image: none;
  padding-bottom: 1rem;
  padding-top: 1rem;
}


.footer-section {
  background-color: rgba(179, 153, 212, 0.1);
  padding-top: 1rem;
  font-size: small;
}

/* --- Final responsive overrides for navbar (must be last to win specificity/order) --- */
@media (max-width: 1024px) {
  .navbar-links { display: none; }
  .mobile-menu-button { display: block; }
}
@media (min-width: 1025px) {
  .navbar-links { display: flex; }
  .mobile-menu-button { display: none; }
}

/* Ensure floating burger is hidden on desktop when user is signed in */
@media (min-width: 768px) {
  body.logged-in #mobile-floating-buttons { display: none !important; }
}

/* Print styles for on-demand invoice */
@media print {
  /* Page setup: A4, margins */
  @page {
    size: A4;
    margin: 12mm;
  }

  /* Hide non-print UI (navbars, buttons, modals chrome) */
  header, nav, footer, .footer, .footer-section, .mobile-menu-button, .navbar, #main-footer,
  [data-action*="modal-manager#close"],
  button, .btn, .btn-primary, .btn-cancel,
  form[action*="send_invoice"],
  .modal-backdrop, [data-modal-backdrop], .sticky {
    display: none !important;
  }

  /* Hide the underlying page content to print only the invoice */
  main#content,
  #flash-messages,
  #notification_toasts {
    display: none !important;
  }

  /* Invoice root: ensure readable colors and full width */
  #invoice-root {
    color: #111 !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Remove background colors for nested blocks to save ink */
  #invoice-root * {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Typography adjustments for print */
  #invoice-root h1, #invoice-root h2, #invoice-root h3,
  #invoice-root .font-bold, #invoice-root .font-semibold {
    color: #111 !important;
  }

  /* Avoid page breaks inside key blocks */
  #invoice-root .grid, #invoice-root ul, #invoice-root .rounded,
  #invoice-root .p-4, #invoice-root .p-6 {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Links: show URLs if needed */
  a[href]:after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}

/* ============================================
   Mobile Menu Burger - Modern & Flat Design
   ============================================ */

/* Menu overlay backdrop */
.mobile-menu-overlay {
  opacity: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
  visibility: hidden;
}

.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Menu drawer slide animation */
.mobile-menu-drawer {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  visibility: hidden;
}

.mobile-menu-drawer.active {
  transform: translateX(0);
  visibility: visible;
}

/* Menu link styles */
.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  position: relative;
}

.dark .mobile-menu-link {
  color: #e5e7eb;
}

.mobile-menu-link:hover {
  background-color: #f3f4f6;
  color: #B399D4;
  padding-left: 1.25rem;
}

.dark .mobile-menu-link:hover {
  background-color: #374151;
  color: #d8b4f8;
}

.mobile-menu-link i {
  font-size: 1.1rem;
  color: #B399D4;
  transition: color 0.2s ease;
}

.mobile-menu-link:hover i {
  color: #9A7FC1;
}

/* Language selector links */
.mobile-menu-lang-link {
  display: block;
  padding: 0.625rem 1rem;
  border-radius: 0.375rem;
  color: #6b7280;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.dark .mobile-menu-lang-link {
  color: #d1d5db;
}

.mobile-menu-lang-link:hover {
  background-color: #f3f4f6;
  color: #B399D4;
}

.dark .mobile-menu-lang-link:hover {
  background-color: #374151;
  color: #d8b4f8;
}

.mobile-menu-lang-link.active {
  background-color: #f0e6ff;
  color: #B399D4;
  font-weight: 600;
}

.dark .mobile-menu-lang-link.active {
  background-color: #5b3a8a;
  color: #d8b4f8;
}

/* Action button styles (auth buttons) */
.mobile-menu-action-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

.dark .mobile-menu-action-link {
  color: #e5e7eb;
  background-color: #1f2937;
  border-color: #374151;
}

.mobile-menu-action-link:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

.dark .mobile-menu-action-link:hover {
  background-color: #374151;
  border-color: #4b5563;
}

.mobile-menu-action-link i {
  font-size: 1.1rem;
}

/* Smooth transitions for menu open/close */
@media (max-width: 768px) {
  body.overflow-hidden {
    overflow: hidden;
  }
}

/* Ensure menu drawer is properly positioned on mobile */
@media (max-width: 768px) {
  .mobile-menu-drawer {
    max-height: 100vh;
  }
  
  .mobile-menu-drawer::-webkit-scrollbar {
    width: 6px;
  }
  
  .mobile-menu-drawer::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .mobile-menu-drawer::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
  }
  
  .dark .mobile-menu-drawer::-webkit-scrollbar-thumb {
    background: #4b5563;
  }
}

/* ============================================
   Desktop Navbar - Modern & Attractive Design
   ============================================ */

.nav-link-desktop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  border-radius: 0.625rem;
  transition: all 0.2s ease-out;
  position: relative;
}

.dark .nav-link-desktop {
  color: #e5e7eb;
}

.nav-link-desktop:hover {
  background-color: #f7f3ff;
  color: #b399d4;
  transform: translateY(-1px);
}

.dark .nav-link-desktop:hover {
  background-color: #2f3545;
  color: #c9b3e6;
}

.nav-link-desktop i {
  font-size: 0.9375rem;
  transition: transform 0.2s ease-out;
}

.nav-link-desktop:hover i {
  transform: scale(1.1);
}

/* Smooth underline animation */

.nav-link-desktop::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #b399d4, #a78bfa);
  transform: translateX(-50%);
  transition: width 0.3s ease-out;
  border-radius: 1px;
}

.nav-link-desktop:hover::after {
  width: calc(100% - 2rem);
}

/* Desktop navbar action buttons */
.navbar-actions a,
.navbar-actions button {
  transition: all 0.2s ease-out;
}

.navbar-actions a:hover,
.navbar-actions button:hover {
  transform: translateY(-2px);
}

/* Sign in button - outlined style */
.navbar-actions a[href*="sign_in"] {
  border: 1.5px solid #e5e7eb;
  color: #374151;
}

.dark .navbar-actions a[href*="sign_in"] {
  border-color: #4b5563;
  color: #e5e7eb;
}

.navbar-actions a[href*="sign_in"]:hover {
  background-color: #f9fafb;
  border-color: #7c3aed;
  color: #7c3aed;
}

.dark .navbar-actions a[href*="sign_in"]:hover {
  background-color: #1f2937;
  border-color: #a78bfa;
  color: #a78bfa;
}

/* Sign up button - gradient style */
.navbar-actions a[href*="sign_up"],
.navbar-actions a[href*="registration"] {
  background: linear-gradient(135deg, #b399d4 0%, #a78bfa 100%);
  box-shadow: 0 4px 15px rgba(179, 153, 212, 0.3);
}

.navbar-actions a[href*="sign_up"]:hover,
.navbar-actions a[href*="registration"]:hover {
  box-shadow: 0 6px 20px rgba(179, 153, 212, 0.4);
  background: linear-gradient(135deg, #a78bfa 0%, #9f7aea 100%);
}

/* Notification bell and avatar styling */
.navbar-actions button[aria-label*="Notification"],
.navbar-actions button[aria-label*="notification"] {
  position: relative;
  padding: 0.5rem;
  border-radius: 0.75rem;
  transition: all 0.2s ease-out;
  color: #374151;
}

.navbar-actions button[aria-label*="Notification"]:hover,
.navbar-actions button[aria-label*="notification"]:hover {
  background-color: #f7f3ff;
  color: #b399d4;
}

.dark .navbar-actions button[aria-label*="Notification"],
.dark .navbar-actions button[aria-label*="notification"] {
  color: #e5e7eb;
}

.dark .navbar-actions button[aria-label*="Notification"]:hover,
.dark .navbar-actions button[aria-label*="notification"]:hover {
  background-color: #2f3545;
  color: #c9b3e6;
}

/* User avatar button */
#dropdownUserAvatarButton {
  padding: 0.375rem 0.75rem;
  border-radius: 0.75rem;
  transition: all 0.2s ease-out;
}

#dropdownUserAvatarButton:hover {
  background-color: #f3f4f6;
}

.dark #dropdownUserAvatarButton:hover {
  background-color: #374151;
}

/* Fix: Navbar center section overlap with right actions on medium screens */
@media (max-width: 1280px) {
  /* Reduce padding on nav links to prevent overlap */
  nav ul li a.px-3 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  /* Reduce gap in the center navigation */
  nav ul.flex-row {
    gap: 0 !important;
  }
  
  /* Ensure right actions don't get crushed */
  .navbar-actions {
    flex-shrink: 0;
  }
}

/* Additional fix for very narrow desktop screens (1024px - 1150px) */
@media (max-width: 1150px) and (min-width: 1024px) {
  /* Hide some nav items to prevent overlap */
  nav ul li:nth-child(6), /* Pricing */
  nav ul li:nth-child(7)  /* Help center */ {
    display: none;
  }
}