/**
 * ✨ SLEEK CHECKBOX MAGIC ✨
 * Ultra-modern, clean checkbox styling for the raccordement form
 */

/* Modern checkbox container */
.checkbox-container {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1rem 1.25rem !important;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  transition: all 0.2s ease !important;
  margin-bottom: 0.75rem !important;
  min-height: 60px !important;
}

.checkbox-container:hover {
  border-color: #cbd5e1 !important;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Sleek checkbox styling */
.checkbox-container [data-state="checked"] {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

.checkbox-container [data-state="unchecked"] {
  background: white !important;
  border: 2px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  transition: all 0.2s ease !important;
}

.checkbox-container [data-state="unchecked"]:hover {
  border-color: #9ca3af !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* OVERRIDE ALL CHECKBOX TEXT STYLES - Maximum priority */
.checkbox-container label,
.checkbox-container span,
.checkbox-container div:not([role="checkbox"]),
.checkbox-container p,
.checkbox-container,
label[for="architecte"],
label[for="adresse-facturation"], 
label[for="conditions"],
[class*="checkbox"] label,
[class*="checkbox"] span,
[class*="checkbox"] div:not([role="checkbox"]) {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  margin: 0 !important;
  transform: none !important;
}

.checkbox-container > div:last-child,
.checkbox-container > label,
[class*="checkbox-container"] > div:last-child {
  flex: 1 !important;
  align-self: center !important;
  font-size: 1rem !important;
  transform: none !important;
}

/* Required asterisk styling - removed invalid :has-text() selector */

/* Centre d'Aide section sleek styling */
.support-section {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
  margin-top: 1.5rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s ease !important;
}

.support-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}

.support-icon {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 3px 12px rgba(31, 41, 55, 0.3) !important;
}

.support-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  margin-bottom: 0.5rem !important;
}

.support-description {
  font-size: 0.875rem !important;
  color: #4b5563 !important;
  line-height: 1.5 !important;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .checkbox-container {
    padding: 0.75rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .checkbox-container label {
    font-size: 0.8125rem !important;
  }
  
  .support-section {
    padding: 1rem !important;
    border-radius: 0.75rem !important;
    margin-top: 1rem !important;
  }
  
  .support-title {
    font-size: 0.9375rem !important;
  }
}

/* Animation for checked state */
@keyframes checkmark-appear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.checkbox-container [data-state="checked"] svg {
  animation: checkmark-appear 0.2s ease !important;
}