.gsap-initial-hide {
    opacity: 0;
    visibility: hidden;
    /* Можно добавить transform для эффекта "выезжания", например: */
    /* transform: translateY(20px); */
}
.force-hide {
    display: none !important;
}

.quiz-step {
    /* opacity: 0; */ /* Управляется GSAP */
    /* display: none; */ /* Управляется GSAP */
}
.quiz-step.hidden {
    display: none !important;
}

.tab-button.active { background-color: #3b82f6; color: white; }
.tab-button { transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; }
.tab-button:focus { outline: none; }
.work-card-item:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

.work-card-overlay { background-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.7) 35%, rgba(0,0,0,0) 75%); }
.quiz-input { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); color: white; transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; }
.quiz-input:focus { border-color: #3b82f6; background-color: rgba(255, 255, 255, 0.1); outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4); }
.quiz-input.border-red-500 { border-color: #ef4444 !important; }
.quiz-input.border-red-500:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4) !important; }
.quiz-label { color: #d1d5db; }
.quiz-step-indicator { width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: #9ca3af; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; border: 2px solid rgba(255, 255, 255, 0.2); transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease; flex-shrink: 0; }
.quiz-step-indicator.active { background-color: #3b82f6; border-color: #3b82f6; color: white; }
.quiz-step-indicator.completed { background-color: #3b82f6; border-color: #3b82f6; color: white; }
.quiz-progress-line { height: 2px; background-color: rgba(255, 255, 255, 0.2); transition: background-color 0.4s ease; flex-grow: 1; }
.quiz-progress-line.completed { background-color: #3b82f6; }
#quiz-progress-bar-inner { background-color: #3b82f6; transition: width 0.4s ease-out; }

.form-toggle-btn { cursor: pointer; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 500; transition: background-color 0.3s, color 0.3s; }
.form-toggle-btn.active { background-color: #3b82f6; color: white; }
.form-toggle-btn:not(.active) { background-color: rgba(255, 255, 255, 0.1); }
.form-toggle-btn:not(.active):hover { background-color: rgba(255, 255, 255, 0.2); }

.custom-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    border-color: #3b82f6;
    background-color: #3b82f6;
}
.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(255,255,255,0.3);
    transition: background-color 0.2s, border-color 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}
.custom-checkbox:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-color: #3b82f6;
    box-shadow: 0 0 0 2px var(--tw-ring-color);
}