/* فقط استایل‌های ضروری نگه داشتم - بقیه رو می‌تونی از نسخه قبلی کپی کنی */

.max-w-3xl      { max-width: 64rem; }
.mx-auto        { margin-left: auto; margin-right: auto; }
.p-6            { padding: 1.5rem; }
.bg-white       { background-color: #ffffff; }
.rounded-xl     { border-radius: 0.75rem; }
.shadow-lg      { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.border         { border-width: 1px; }
.border-gray-100{ border-color: #f3f4f6; }

.space-y-5 > * + * { margin-top: 1.25rem; }
.md\:flex       { @media (min-width: 768px) { display: flex; } }
.md\:items-end  { @media (min-width: 768px) { align-items: flex-end; } }
.md\:gap-4      { @media (min-width: 768px) { gap: 1rem; } }

.flex-1         { flex: 1 1 0%; }
.w-full         { width: 100%; }
.md\:w-auto     { @media (min-width: 768px) { width: auto; } }

.px-4           { padding-left: 1rem; padding-right: 1rem; }
.py-3           { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.border-gray-300{ border-color: #d1d5db; }
.rounded-lg     { border-radius: 0.5rem; }

.focus\:ring-2:focus    { box-shadow: 0 0 0 2px #22c55e; }
.focus\:border-green-500:focus { border-color: #22c55e; }
.transition     { transition: all 0.4s ease; }

.bg-blue-600    { background-color: #2563eb; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.bg-green-600   { background-color: #16a34a; }
.text-white     { color: #ffffff; }

.disabled\:opacity-70:disabled { opacity: 0.7; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* کلاس‌های جدید برای انیمیشن مخفی کردن */
.field-group {
    transition: opacity 0.6s ease, height 0.6s ease;
}

.field-group.hidden {
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
}