/* =====================================================================
   tw-supplement.css
   ---------------------------------------------------------------------
   فایل app.css قالب، یک بیلد از پیش‌ساخته و purge‌شده‌ی Tailwind است که
   فقط کلاس‌های به‌کاررفته در فایل‌های .html اصلی را دارد. صفحات این پروژه
   به PHP نوشته شده‌اند، پس کلاس‌های تازه‌ی آن‌ها در آن بیلد نیستند و
   چیدمان (به‌ویژه گریدها) می‌ریزد.

   چون Node.js روی این سیستم نصب نیست تا `npm run dev` اجرا شود، این فایل
   همان ابزارهای گمشده را با مقادیر استاندارد Tailwind v3 تعریف می‌کند.

   ⚠️ اگر بعداً Node نصب شد، کافی است در پوشه‌ی App دستور
        npx tailwindcss -i ./src/input.css -o ./public/styles/app.css
      را اجرا کنید (tailwind.config.js از قبل برای اسکن .php اصلاح شده)
      و آن‌گاه می‌توانید این فایل را حذف کنید.
   ===================================================================== */

/* ==================== چیدمان ==================== */
.flex-1        { flex: 1 1 0%; }
.shrink-0      { flex-shrink: 0; }
.min-w-0       { min-width: 0; }
.inline        { display: inline; }
.list-none     { list-style-type: none; }
.place-items-center { place-items: center; }
.flex-row-reverse   { flex-direction: row-reverse; }
.overflow-y-auto    { overflow-y: auto; }

/* گرید */
.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-7 { grid-column: span 7 / span 7; }

/* ==================== فاصله‌ها ==================== */
.gap-8      { gap: 2rem; }
.my-6       { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mb-7       { margin-bottom: 1.75rem; }
.mb-10      { margin-bottom: 2.5rem; }
.mb-16      { margin-bottom: 4rem; }
.mt-16      { margin-top: 4rem; }
.-mt-1      { margin-top: -0.25rem; }
.mr-1       { margin-right: 0.25rem; }
.mr-auto    { margin-right: auto; }
.pr-7       { padding-right: 1.75rem; }
.pt-2       { padding-top: 0.5rem; }
.pt-3       { padding-top: 0.75rem; }
.pt-4       { padding-top: 1rem; }
.pb-5       { padding-bottom: 1.25rem; }
.p-6        { padding: 1.5rem; }
.p-8        { padding: 2rem; }
.p-12       { padding: 3rem; }
.py-2\.5    { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-6       { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8       { padding-top: 2rem; padding-bottom: 2rem; }
.py-10      { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-14      { padding-top: 3.5rem; padding-bottom: 3.5rem; }

/* ==================== اندازه‌ها ==================== */
.w-1     { width: 0.25rem; }
.w-2     { width: 0.5rem; }
.w-11    { width: 2.75rem; }
.w-14    { width: 3.5rem; }
.w-px    { width: 1px; }
.w-1\/3  { width: 33.333333%; }

.h-0\.5  { height: 0.125rem; }
.h-1\.5  { height: 0.375rem; }
.h-2     { height: 0.5rem; }
.h-11    { height: 2.75rem; }
.h-14    { height: 3.5rem; }
.h-40    { height: 10rem; }
.h-44    { height: 11rem; }
.h-56    { height: 14rem; }
.h-72    { height: 18rem; }

.max-h-56   { max-height: 14rem; }
.max-h-64   { max-height: 16rem; }
.max-w-md   { max-width: 28rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-none { max-width: none; }

/* ==================== موقعیت ==================== */
.top-3   { top: 0.75rem; }
.top-4   { top: 1rem; }
.left-3  { left: 0.75rem; }
.left-5  { left: 1.25rem; }
.right-4 { right: 1rem; }
.z-10    { z-index: 10; }

/* ==================== گوشه و سایه ==================== */
.rounded-xl  { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.shadow-sm   { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
.hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

/* ==================== حاشیه ==================== */
.border-r-2 { border-right-width: 2px; }
.border-r-4 { border-right-width: 4px; }

.border-gray-50   { border-color: #f9fafb; }
.border-rose-200  { border-color: #fecdd3; }
.border-amber-200 { border-color: #fde68a; }

.hover\:border-green-500:hover     { border-color: #22c55e; }
.hover\:border-green-500\/40:hover { border-color: rgba(34, 197, 94, .4); }

.last\:border-none:last-child { border-style: none; }

/* تقسیم‌کننده بین فرزندان */
.divide-y > :not([hidden]) ~ :not([hidden]) {
    border-top-width: 1px;
    border-bottom-width: 0;
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #f3f4f6; }

/* ==================== رنگ پس‌زمینه ==================== */
.bg-\[\#f3f4f6\]     { background-color: #f3f4f6; }
.bg-zinc-500         { background-color: #71717a; }
.bg-white\/90        { background-color: rgba(255, 255, 255, .9); }
.bg-rose-50          { background-color: #fff1f2; }
.bg-amber-50         { background-color: #fffbeb; }
.bg-green-500\/15    { background-color: rgba(34, 197, 94, .15); }
.bg-rose-500\/15     { background-color: rgba(244, 63, 94, .15); }
.bg-amber-500\/15    { background-color: rgba(245, 158, 11, .15); }
.bg-sky-500\/10      { background-color: rgba(14, 165, 233, .1); }

.hover\:bg-gray-100:hover     { background-color: #f3f4f6; }
.hover\:bg-gray-200:hover     { background-color: #e5e7eb; }
.hover\:bg-rose-100:hover     { background-color: #ffe4e6; }
.hover\:bg-rose-500:hover     { background-color: #f43f5e; }
.hover\:bg-rose-500\/10:hover { background-color: rgba(244, 63, 94, .1); }
.hover\:bg-zinc-900:hover     { background-color: #18181b; }

/* گرادیان */
.bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.from-green-500 { --tw-gradient-from: #22c55e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34,197,94,0)); }
.from-rose-500  { --tw-gradient-from: #f43f5e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244,63,94,0)); }
.to-green-600   { --tw-gradient-to: #16a34a; }
.to-rose-600    { --tw-gradient-to: #e11d48; }

/* ==================== رنگ متن ==================== */
.text-amber-500 { color: #f59e0b; }
.text-amber-700 { color: #b45309; }
.text-green-400 { color: #4ade80; }

/* ==================== تایپوگرافی ==================== */
.text-\[11px\]     { font-size: 11px; line-height: 1.5; }
.text-left         { text-align: left; }
.leading-none      { line-height: 1; }
.leading-6         { line-height: 1.5rem; }
.leading-7         { line-height: 1.75rem; }
.leading-9         { line-height: 2.25rem; }
.leading-relaxed   { line-height: 1.625; }
.tracking-\[0\.6em\] { letter-spacing: 0.6em; }

/* ==================== شفافیت ==================== */
.opacity-25 { opacity: .25; }
.opacity-30 { opacity: .3; }
.opacity-50 { opacity: .5; }
.opacity-60 { opacity: .6; }
.opacity-70 { opacity: .7; }
.opacity-75 { opacity: .75; }
.opacity-80 { opacity: .8; }
.opacity-85 { opacity: .85; }
.opacity-90 { opacity: .9; }

/* ==================== انتقال ==================== */
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}
.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}
.duration-200 { transition-duration: .2s; }
.duration-500 { transition-duration: .5s; }

/* ==================== حالت‌ها ==================== */
.cursor-not-allowed { cursor: not-allowed; }
.disabled\:opacity-40:disabled { opacity: .4; }
.disabled\:opacity-50:disabled { opacity: .5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

.hover\:text-rose-500:hover { color: #f43f5e; }
.first\:pt-0:first-child { padding-top: 0; }

/* فقط برای صفحه‌خوان‌ها */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ورودی فایل */
.file\:ml-3::file-selector-button        { margin-left: .75rem; }
.file\:border-0::file-selector-button    { border-width: 0; }
.file\:bg-green-500::file-selector-button{ background-color: #22c55e; }
.file\:text-white::file-selector-button  { color: #fff; }
.file\:rounded-md::file-selector-button  { border-radius: .375rem; }
.file\:px-3::file-selector-button        { padding-left: .75rem; padding-right: .75rem; }
.file\:py-1::file-selector-button        { padding-top: .25rem; padding-bottom: .25rem; }
.file\:text-xs::file-selector-button     { font-size: .75rem; line-height: 1rem; }
.file\:cursor-pointer::file-selector-button { cursor: pointer; }

/* peer — برای انتخاب رنگ محصول */
.peer-checked\:border-green-500:is(.peer:checked ~ *) { border-color: #22c55e; }
.peer-checked\:bg-green-500\/10:is(.peer:checked ~ *) { background-color: rgba(34, 197, 94, .1); }
.peer-checked\:text-green-600:is(.peer:checked ~ *)   { color: #16a34a; }

/* has — برای کارت‌های انتخابی روش ارسال/پرداخت */
.has-\[\:checked\]\:border-green-500:has(:checked) { border-color: #22c55e; }
.has-\[\:checked\]\:bg-green-500\/5:has(:checked)  { background-color: rgba(34, 197, 94, .05); }

/* details/summary باز شده */
.group[open] .group-open\:rotate-180 { transform: rotate(180deg); }

/* متن مقاله */
.prose-sm { font-size: .95rem; }
.prose-sm p  { margin-bottom: 1rem; }
.prose-sm h2 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 .75rem; }
.prose-sm h3 { font-size: 1.1rem;  font-weight: 700; margin: 1.25rem 0 .5rem; }
.prose-sm ul,
.prose-sm ol { padding-right: 1.5rem; margin-bottom: 1rem; }
.prose-sm ul { list-style: disc; }
.prose-sm ol { list-style: decimal; }
.prose-sm li { margin-bottom: .35rem; }
.prose-sm a  { color: #22c55e; }

/* فرزندان مستقیم (افزونه‌ی قالب) */
.child\:bg-white\/20 > *    { background-color: rgba(255, 255, 255, .2); }
.child\:backdrop-blur > *   { backdrop-filter: blur(8px); }
.child\:p-1\.5 > *          { padding: .375rem; }

/* ==================== حالت تیره ==================== */
.dark .dark\:bg-rose-500\/10   { background-color: rgba(244, 63, 94, .1); }
.dark .dark\:bg-amber-500\/10  { background-color: rgba(245, 158, 11, .1); }
.dark .dark\:bg-zinc-900\/90   { background-color: rgba(24, 24, 27, .9); }
.dark .dark\:border-rose-500\/30  { border-color: rgba(244, 63, 94, .3); }
.dark .dark\:border-amber-500\/30 { border-color: rgba(245, 158, 11, .3); }
.dark .dark\:border-zinc-600      { border-color: #52525b; }
.dark .dark\:border-zinc-700      { border-color: #3f3f46; }
.dark .dark\:border-zinc-700\/50  { border-color: rgba(63, 63, 70, .5); }
.dark .dark\:divide-zinc-700 > :not([hidden]) ~ :not([hidden]) { border-color: #3f3f46; }
.dark .dark\:text-amber-400    { color: #fbbf24; }
.dark .dark\:text-green-400    { color: #4ade80; }
.dark .dark\:hover\:bg-zinc-700:hover { background-color: #3f3f46; }

/* ==================== بریک‌پوینت‌ها ==================== */
@media (min-width: 640px) {
    .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:items-center { align-items: center; }
    .sm\:w-auto       { width: auto; }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* در app.css هست، اما چون این فایل بعد از آن بارگذاری می‌شود، قواعد پایه‌ی
       بالا آن را می‌پوشاندند؛ پس اینجا دوباره و در ترتیب درست تعریف می‌شود. */
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
    .lg\:col-span-7 { grid-column: span 7 / span 7; }

    .lg\:gap-6    { gap: 1.5rem; }
    .lg\:gap-x-6  { column-gap: 1.5rem; }

    .lg\:h-12 { height: 3rem; }
    .lg\:h-28 { height: 7rem; }
    .lg\:h-40 { height: 10rem; }
    .lg\:h-44 { height: 11rem; }
    .lg\:h-80 { height: 20rem; }
    .lg\:h-96 { height: 24rem; }

    .lg\:w-28 { width: 7rem; }
    .lg\:w-40 { width: 10rem; }
    .lg\:w-44 { width: 11rem; }
    .lg\:w-64 { width: 16rem; }
    .lg\:w-72 { width: 18rem; }
    .lg\:w-80 { width: 20rem; }

    .lg\:p-5  { padding: 1.25rem; }
    .lg\:p-6  { padding: 1.5rem; }
    .lg\:p-10 { padding: 2.5rem; }
    .lg\:p-12 { padding: 3rem; }

    .lg\:mr-30    { margin-right: 7.5rem; }
    .lg\:top-4    { top: 1rem; }
    .lg\:text-right { text-align: right; }
}

/* بریک‌پوینت xl باید بعد از lg بیاید وگرنه قواعد lg بالا آن را می‌پوشانند */
@media (min-width: 1280px) {
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl\:mr-32       { margin-right: 8rem; }
}

/* ==================== گرید خودتنظیم ====================
   برای ردیف دسته‌بندی‌ها: تعداد ستون‌ها با تعداد آیتم‌ها و عرض صفحه
   خودش تنظیم می‌شود، پس هیچ‌وقت خانه‌ی خالی نمی‌ماند.
   ==================================================================== */
.cf-auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

@media (min-width: 1024px) {
    .cf-auto-grid { gap: 1.5rem; }
}