.form-step {
    display: none;
    animation: fadeIn 0.5s; /* Optional: for a little fade-in effect */
}

.form-step.active {
    display: block;
}

/* Optional: Fade in animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
} 

/* Server match cards styling */
.server-match-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background-color: rgba(26, 26, 26, 0.9);
    border: 1px solid rgba(139, 115, 85, 0.2);
}

.server-match-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.server-name-link a {
    color: #d4c4b3;
    text-decoration: none;
}

.server-name-link a:hover {
    color: #fff;
    text-decoration: underline;
}

.badge {
    font-weight: normal;
    letter-spacing: 0.5px;
}

.server-dna-summary {
    font-size: 0.8rem;
    color: #8B7355;
}

/* Uniform height for canvas containers */
canvas {
    margin: 0 auto;
}

/* Page title styling */
.page-title-icon {
    color: #8B7355;
}

/* Better spacing for form steps */
.step-title {
    color: #8B7355;
}

/* More visible labels for sliders */
.slider-value-display {
    font-weight: bold;
    color: #8B7355;
}

/* Form styling to match homepage */
.form-control, .form-select {
    background-color: #212529;
    border: 1px solid rgba(139, 115, 85, 0.3);
    color: #d4c4b3;
}

.form-control:focus, .form-select:focus {
    background-color: #282d33;
    border-color: rgba(139, 115, 85, 0.5);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(139, 115, 85, 0.25);
}

.form-control::placeholder, .form-select::placeholder {
    color: rgba(212, 196, 179, 0.5);
}

.form-check-input {
    background-color: #212529;
    border: 1px solid rgba(139, 115, 85, 0.5);
}

.form-check-input:checked {
    background-color: #8B7355;
    border-color: #8B7355;
}

/* Change colors for form range sliders */
.form-range::-webkit-slider-thumb {
    background: #8B7355;
}

.form-range::-moz-range-thumb {
    background: #8B7355;
}

.form-range::-ms-thumb {
    background: #8B7355;
}

/* Adjust badge colors */
.bg-success {
    background-color: rgba(0, 40, 0, 0.95) !important;
    color: #90ff90 !important;
    border: 1px solid #006400 !important;
}

.bg-primary {
    background-color: #3a281e !important;
    border-color: #6a483e !important;
}

/* Button styles to match homepage */
.btn-primary {
    background-color: #3a281e;
    border-color: #6a483e;
    color: #d4c4b3;
}

.btn-primary:hover {
    background-color: #4a382e;
    border-color: #7a584e;
    color: #fff;
}

.btn-outline-secondary {
    color: #d4c4b3;
    border-color: rgba(139, 115, 85, 0.5);
}

.btn-outline-secondary:hover {
    background-color: rgba(139, 115, 85, 0.2);
    border-color: rgba(139, 115, 85, 0.8);
    color: #fff;
}

/* Make cards match homepage styling */
.card {
    background-color: rgba(26, 26, 26, 0.9) !important;
    border: 1px solid rgb(50 39 29) !important;
}

.card-header {
    background-color: rgba(43, 24, 16, 0.8) !important;
    border-bottom: 1px solid rgba(139, 115, 85, 0.2) !important;
    color: #8B7355 !important;
}

.card-body {
    background-color: rgb(23 15 12);
    color: #d4c4b3 !important;
}

.card-result {
    background-color: rgb(20 13 10) !important;

}

/* Alert styling */
.alert-success {
    background-color: rgba(0, 40, 0, 0.95);
    color: #90ff90;
    border: 1px solid #006400;
}

.alert-danger {
    background-color: rgba(40, 0, 0, 0.95);
    color: #ff9090;
    border: 1px solid #640000;
}

.alert-info {
    background-color: rgba(0, 20, 40, 0.95);
    color: #90c0ff;
    border: 1px solid #003064;
}

.text-danger {
    color: #ff9090 !important;
}

.text-success {
    color: #90ff90 !important;
}

.text-info {
    color: #90c0ff !important;
}

.text-muted {
    color: #8B7355 !important;
}