/* PhotoFinder styles - mobile app feel (فارسی/RTL) */

/* فونت فارسی و‌زیرمتن */
body {
    font-family: 'Vazir', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}

/* Hide scrollbar for horizontal chip rows */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Safe area for notched phones */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Filter chips */
.filter-chip {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: #f3f4f6;
    font-size: 0.875rem;
    color: #4b5563;
    transition: all 0.15s;
    border: 2px solid transparent;
}
.filter-chip.active {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
    font-weight: 600;
}

/* Masonry grid uses CSS columns - cards must not break */
#masonry { column-fill: balance; }
.pin-card { display: inline-block; width: 100%; }

/* Fade-in animation for newly appended cards */
.pin-card {
    animation: fadeInUp 0.3s ease-out;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Lazy-loaded images: invisible until loaded, then fade in */
.lazy-img {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.lazy-img.loaded {
    opacity: 1;
}

/* Skeleton shimmer shown inside the card while the image loads */
.shimmer {
    position: relative;
    overflow: hidden;
}
.shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmerSweep 1.4s infinite;
}
@keyframes shimmerSweep {
    100% { transform: translateX(100%); }
}

/* Image detail modal scroll */
#lightbox { overscroll-behavior: contain; }

/* اعداد فارسی در فونت فارسی */
[dir="rtl"] { letter-spacing: 0; }
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea { letter-spacing: 0; }

/* ===== تم تیره ===== */
/* آیکون‌های دکمه‌ی تم: در حالت روشن ماه و در حالت تاریک خورشید نمایش داده می‌شود */
.light-ico { display: block; }
.dark-ico { display: none; }
html.dark .light-ico { display: none; }
html.dark .dark-ico { display: block; }

/* حالت تاریک — بازنویسی کلاس‌های Tailwind مورد استفاده در فرانت‌اند */
html.dark { color-scheme: dark; }
html.dark body {
    background-color: #0b1220;
    color: #e2e8f0;
}
html.dark .bg-white,
html.dark #filterSheet { background-color: #0f172a; }
html.dark .bg-white\/95 { background-color: rgba(15, 23, 42, 0.95); }
html.dark .bg-gray-50 { background-color: #0b1220; }
html.dark .bg-gray-100 { background-color: #1e293b; }
html.dark .bg-gray-200 { background-color: #334155; }
html.dark .bg-gray-300 { background-color: #475569; }
html.dark .bg-red-50,
html.dark .bg-rose-50,
html.dark .bg-red-100 { background-color: #450a0a; }
html.dark .bg-amber-50 { background-color: #451a03; }
html.dark .bg-green-100 { background-color: #052e16; }
html.dark .bg-purple-100 { background-color: #3b0764; }
html.dark .bg-blue-100 { background-color: #172554; }
html.dark .text-gray-900 { color: #f1f5f9; }
html.dark .text-gray-800 { color: #e2e8f0; }
html.dark .text-gray-700 { color: #cbd5e1; }
html.dark .text-gray-600 { color: #94a3b8; }
html.dark .text-gray-500 { color: #94a3b8; }
html.dark .text-gray-400 { color: #64748b; }
html.dark .text-gray-300 { color: #64748b; }
html.dark .text-gray-200 { color: #cbd5e1; }
html.dark .text-blue-500 { color: #60a5fa; }
html.dark .text-blue-600 { color: #93c5fd; }
html.dark .text-green-600 { color: #4ade80; }
html.dark .text-purple-600 { color: #c4b5fd; }
html.dark .text-amber-800 { color: #fcd34d; }
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .divide-gray-100,
html.dark .divide-gray-200 { border-color: #334155; }
html.dark .border-gray-300 { border-color: #475569; }
html.dark .border-gray-400 { border-color: #64748b; }
html.dark .border-amber-200 { border-color: #78350f; }
html.dark .border-white { border-color: #1e293b; }
html.dark .shadow-lg,
html.dark .shadow-2xl,
html.dark .shadow-md { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
html.dark .filter-chip { background: #1e293b; color: #cbd5e1; }
html.dark .filter-chip.active { background: #7f1d1d; color: #fca5a5; border-color: #991b1b; }
html.dark .shimmer::after {
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.25), transparent);
}
html.dark input,
html.dark textarea,
html.dark select { color-scheme: dark; }