/* Basic form section transitions */
.form-section {
    transition: all 0.5s ease-in-out;
}

.hidden-section {
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.visible-section {
    opacity: 1;
    height: auto;
}

/* Service option hover effects */
.service-option {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

.service-option:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.15);
}

/* Dark mode toggle button styling */
#theme-toggle:hover {
    transform: scale(1.1);
}

/* Input focus state improvements */
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}

/* Progress bar animation */
#progress-bar {
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* Logo pulse effect */
.logo-pulse {
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(34, 197, 94, 0.2);
    }
    50% {
        box-shadow: 0 8px 30px rgba(34, 197, 94, 0.4);
    }
}

/* make the entire button feel pressed */
.service-option:active {
  transform: scale(0.97);
  transition: transform 0.1s ease-out;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);
}
.service-option:focus-visible {
  outline: none;
  ring: 4px solid rgba(34,197,94,0.5);
}

/* Prevent focus outlines on child elements */
.service-option *:focus {
  outline: none;
}

.service-option * {
  pointer-events: none;
}

.service-option {
  pointer-events: auto;
}

.dark input[type="date"] {
  color: #fff;
}

.dark input[type="date"]::-webkit-datetime-edit-year-field,
.dark input[type="date"]::-webkit-datetime-edit-month-field,
.dark input[type="date"]::-webkit-datetime-edit-day-field {
  color: #fff;
}