/* This site only ever has ONE theme (dark). Declaring color-scheme
   tells the browser "this page already handles dark mode itself" so
   it stops applying its own automatic dark-mode re-coloring/inversion
   on top of ours (the thing that was breaking the look on phones with
   system dark mode turned on). */
:root {
    color-scheme: dark;
}

:root {
    --bg: #0b0a09;
    --bg-glow-1: #f97316;
    --bg-glow-2: #9a3412;
    --card-bg: rgba(26, 20, 15, 0.55);
    --card-border: rgba(251, 146, 60, 0.16);
    --text: #fbf1e8;
    --muted: #c2a08a;
    --primary: #f97316;
    --primary-bright: #fb923c;
    --primary-dark: #c2410c;
    --danger: #f43f5e;
    --success: #34d399;
    --radius: 16px;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--bg);
    color: var(--text);
}

body {
    margin: 0;
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
    background:
        radial-gradient(circle at 15% 0%, rgba(249, 115, 22, 0.22), transparent 42%),
        radial-gradient(circle at 90% 20%, rgba(154, 52, 18, 0.16), transparent 38%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.8;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Belt-and-suspenders: some in-app/Android browsers (Telegram,
   Instagram, some WebViews) don't fully respect color-scheme and try
   to auto-invert or re-color pages they think are "light". Forcing
   these off makes sure our own dark colors are what actually render,
   no matter what the phone's OS dark mode tries to do on top. */
html {
    -webkit-filter: none !important;
    filter: none !important;
}
@media (prefers-color-scheme: light), (prefers-color-scheme: dark) {
    html, body {
        background-color: var(--bg);
        color: var(--text);
    }
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

a { color: var(--primary-bright); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: #fff; }

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding-bottom: 22px;
    margin-bottom: -22px;
    pointer-events: none;
}
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Single smooth fade — no separate hard border, so there is only
       ever one visible edge (the mask's own soft cutoff), never two. */
    background: rgba(11, 9, 8, 0.8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    z-index: -1;
}
.site-header .header-inner {
    pointer-events: auto;
}

.header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.logo {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--text) !important;
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 6px;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Avatar + username "chip" — replaces the old separate nav-avatar / nav-user / logout links */
.profile-chip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: rgba(255,255,255,0.03);
    color: var(--text) !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.profile-chip:hover { background: rgba(249, 115, 22, 0.1); border-color: rgba(251, 146, 60, 0.4); transform: translateY(-1px); }
.chip-name { font-weight: 600; font-size: 0.9rem; }
.chip-avatar {
    font-size: 1.2rem;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Wrapper for profile-chip + the admin-panel link pinned under it.
   The admin link is absolutely positioned (out of normal flow) on
   purpose: it must NEVER add width to the header row or push it onto
   a second line, since the header's blur/fade mask height is tuned
   for a single-line header — any wrap would visibly break that fade. */
.account-area {
    position: relative;
}
.admin-panel-link {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.14);
    border: 1px solid var(--card-border);
    color: var(--primary-bright) !important;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 5;
    transition: background 0.15s ease, transform 0.12s ease;
}
.admin-panel-link:hover {
    background: rgba(249, 115, 22, 0.24);
    transform: translateY(-1px);
}
.admin-panel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-inline-start: 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

/* Notification bell */
.notif-wrap { position: relative; }
.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--card-border);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.notif-bell:hover { background: rgba(249, 115, 22, 0.1); border-color: rgba(251, 146, 60, 0.4); }
.notif-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.notif-badge.hidden { display: none; }
.notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 320px;
    max-width: 88vw;
    max-height: 420px;
    overflow-y: auto;
    background: rgba(20, 15, 12, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
    z-index: 30;
    animation: fade-up 0.2s ease both;
}
.notif-panel.hidden { display: none; }
.notif-panel-header {
    padding: 14px 16px;
    font-weight: 700;
    border-bottom: 1px solid var(--card-border);
}
.notif-list { padding: 6px; }
.notif-empty { padding: 16px; text-align: center; }
.notif-item {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.86rem;
    line-height: 1.6;
}
.notif-item:not(:last-child) { margin-bottom: 2px; }
.notif-item.unread { background: rgba(249, 115, 22, 0.08); }
.notif-item-time { display: block; color: var(--muted); font-size: 0.72rem; margin-top: 3px; }

.btn-link {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff !important;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    transition: filter 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3);
}
.btn-link:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Hero */
.hero {
    text-align: center;
    padding: 70px 20px;
    animation: fade-up 0.5s ease both;
}
.hero h1 {
    font-size: 2.3rem;
    margin-bottom: 10px;
    background: linear-gradient(90deg, var(--primary-bright), #fff 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero p { color: var(--muted); max-width: 500px; margin: 0 auto 26px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 999px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
}
.btn-primary:hover { filter: brightness(1.12); color: #fff; }
.btn-secondary {
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(6px);
}
.btn-secondary:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.btn-block { width: 100%; text-align: center; }

/* Auth card */
.auth-card {
    max-width: 420px;
    margin: 40px auto;
    background: var(--card-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    animation: fade-up 0.4s ease both;
}
.auth-card h1 { margin-top: 0; font-size: 1.5rem; }
.auth-card label { display: block; margin: 14px 0 6px; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.auth-card input[type="text"],
.auth-card input[type="password"] {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    font-size: 1rem;
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.auth-card input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255,255,255,0.07);
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}
.auth-card button { margin-top: 20px; }
.auth-switch { margin-top: 18px; text-align: center; font-size: 0.9rem; color: var(--muted); }
.muted { color: var(--muted); }

/* Flash messages */
.flash {
    padding: 13px 18px;
    border-radius: 12px;
    margin: 16px 0;
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
    animation: fade-up 0.3s ease both;
}
.flash-success { background: rgba(52, 211, 153, 0.1); color: var(--success); border: 1px solid rgba(52, 211, 153, 0.3); }
.flash-error { background: rgba(244, 114, 182, 0.1); color: var(--danger); border: 1px solid rgba(244, 114, 182, 0.3); }

/* Daily challenge banner (index.php + explorer.php) */
.challenge-banner {
    max-width: 560px;
    margin: 0 auto 34px;
    text-align: center;
    background: var(--card-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 20px 26px;
    animation: fade-up 0.45s ease both;
}
.challenge-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--primary-bright);
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    padding: 4px 14px;
    margin-bottom: 10px;
}
.challenge-title {
    margin: 6px 0 8px;
    font-size: 1.3rem;
}
.challenge-date {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
}

/* Photo grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin: 24px 0 50px;
}

.photo-card {
    background: var(--card-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    animation: fade-up 0.4s ease both;
}
.photo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(249, 115, 22, 0.2);
    border-color: rgba(251, 146, 60, 0.4);
}
.photo-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.photo-card:hover img { transform: scale(1.04); }

.photo-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    gap: 8px;
    flex-wrap: wrap;
}
.photo-user { font-weight: 600; font-size: 0.92rem; display: flex; align-items: center; gap: 6px; }
.special-username {
    color: #34F700;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(52, 247, 0, 0.3);
}
.photo-avatar { font-size: 1.05rem; }
.photo-date { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

.photo-challenge-tag {
    display: inline-block;
    margin: 0 14px 10px;
    padding: 3px 10px;
    font-size: 0.72rem;
    color: var(--muted);
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 28px);
}
.photo-challenge-tag:hover {
    color: var(--primary-bright);
    border-color: rgba(251, 146, 60, 0.4);
}

.photo-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 14px;
}

.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--card-border);
    color: var(--text);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.like-btn:hover { transform: translateY(-1px); background: rgba(244, 114, 182, 0.1); border-color: rgba(244, 114, 182, 0.4); }
.like-btn .heart { transition: transform 0.2s ease; display: inline-block; }
.like-btn.liked { color: var(--danger); border-color: rgba(244, 114, 182, 0.5); background: rgba(244, 114, 182, 0.1); }
.like-btn.liked .heart { transform: scale(1.15); }
.like-btn.pulse .heart { animation: pop 0.35s ease; }

.delete-form { margin: 0; }
.btn-delete {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.btn-delete:hover { background: rgba(244, 114, 182, 0.12); }

/* Admin approval panel */
.admin-actions {
    display: flex;
    gap: 8px;
    padding: 0 14px 14px;
}
.admin-action-form { flex: 1; margin: 0; }
/* .reject-toggle is a plain <button>, not wrapped in .admin-action-form
   like the approve/delete buttons are — without this it only sized
   itself to its own text, making "رد" visibly smaller than "تایید". */
.admin-actions > .reject-toggle { flex: 1; }
.btn-approve,
.btn-reject {
    width: 100%;
    border-radius: 999px;
    padding: 8px 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.15s ease, background 0.15s ease;
}
.btn-approve {
    background: rgba(52, 211, 153, 0.15);
    color: var(--success);
    border: 1px solid rgba(52, 211, 153, 0.35);
}
.btn-approve:hover { background: rgba(52, 211, 153, 0.25); transform: translateY(-1px); }
.btn-reject {
    background: rgba(244, 114, 182, 0.15);
    color: var(--danger);
    border: 1px solid rgba(244, 114, 182, 0.35);
}
.btn-reject:hover { background: rgba(244, 114, 182, 0.25); transform: translateY(-1px); }
.btn-delete-admin {
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
    border: 1px solid var(--card-border);
}
.btn-delete-admin:hover { background: rgba(244, 114, 182, 0.2); color: var(--danger); transform: translateY(-1px); }

/* Profile header */
.profile-header {
    margin-top: 24px;
    margin-inline-start: -10px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fade-up 0.4s ease both;
}
.profile-avatar {
    font-size: 2.4rem;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid var(--card-border);
    border-radius: 50%;
    flex-shrink: 0;
}
.profile-header h1 { margin: 0 0 4px; }

/* Emoji picker (settings.php) */
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 10px;
    margin: 16px 0;
}
.emoji-option {
    font-size: 1.6rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 10px 0;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.emoji-option:hover { transform: translateY(-2px) scale(1.05); background: rgba(255,255,255,0.08); }
.emoji-option.selected {
    border-color: var(--primary);
    background: rgba(249, 115, 22, 0.16);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3);
}

/* Upload dropzone — replaces the plain native file input with a
   styled, clickable + drag-and-drop card. The real <input type="file">
   is stretched invisibly over the whole card (so click-to-browse and
   native drag/drop both still work) while the visible icon/text/preview
   underneath just react to JS toggling classes on the wrapper. */
.upload-dropzone {
    position: relative;
    display: block;
    margin: 16px 0 4px;
    padding: 44px 20px;
    border: 2px dashed var(--card-border);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.02);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.upload-dropzone:hover {
    border-color: rgba(251, 146, 60, 0.5);
    background: rgba(249, 115, 22, 0.05);
}
.upload-dropzone.dragover {
    border-color: var(--primary);
    background: rgba(249, 115, 22, 0.1);
    transform: scale(1.01);
}
.upload-dropzone.has-file {
    padding: 20px;
    cursor: pointer;
}
.upload-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.upload-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.upload-dropzone-content.hidden { display: none; }
.upload-dropzone-icon { color: var(--primary); opacity: 0.85; }
.upload-dropzone-title {
    margin: 6px 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}
.upload-dropzone-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
}

/* Upload preview */
.preview-wrap { margin: 0; pointer-events: none; }
.preview-wrap.hidden { display: none; }
.preview-wrap img {
    max-width: 100%;
    max-height: 320px;
    border-radius: 12px;
    border: 1px solid var(--card-border);
    display: block;
    margin: 0 auto;
}
.upload-change-hint {
    display: block;
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--muted);
}

/* Approval status badges (shown only on the owner's own profile) */
.status-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 999px;
    margin-inline-start: 6px;
    vertical-align: middle;
}
.status-pending {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.status-rejected {
    background: rgba(244, 114, 182, 0.12);
    color: var(--danger);
    border: 1px solid rgba(244, 114, 182, 0.3);
}
.status-approved {
    background: rgba(52, 211, 153, 0.12);
    color: var(--success);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--card-border);
    padding: 24px 0;
    margin-top: 40px;
    color: var(--muted);
    font-size: 0.85rem;
}
.site-footer p { margin: 4px 0; }
.made-with-love {
    font-size: 0.8rem;
    opacity: 0.85;
}
.footer-telegram-link {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid var(--card-border);
    color: var(--primary-bright) !important;
    font-size: 0.75rem;
    transition: background 0.15s ease, transform 0.12s ease;
}
.footer-telegram-link:hover {
    background: rgba(249, 115, 22, 0.22);
    transform: translateY(-1px);
}

/* Explorer toolbar: sort + challenge-day dropdowns */
.explorer-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 6px;
}
.dropdown-wrap { position: relative; }
.dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--card-border);
    color: var(--text);
    padding: 9px 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.dropdown-btn:hover { background: rgba(249, 115, 22, 0.1); border-color: rgba(251, 146, 60, 0.4); }
.dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: rgba(20, 15, 12, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
    z-index: 25;
    animation: fade-up 0.2s ease both;
}
.dropdown-panel.hidden { display: none; }
.dropdown-panel-scroll { max-height: 340px; overflow-y: auto; min-width: 260px; }
.dropdown-item {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--text);
}
.dropdown-item:hover { background: rgba(249, 115, 22, 0.1); color: var(--text); }
.dropdown-item.active { background: rgba(249, 115, 22, 0.16); color: var(--primary-bright); font-weight: 700; }
.dropdown-item.current:not(.active) { border: 1px dashed rgba(251, 146, 60, 0.4); }
.dropdown-item-date { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 2px; }

/* Challenge countdown */
.challenge-countdown {
    display: block;
    font-size: 0.85rem;
    color: var(--primary-bright);
    font-weight: 700;
    letter-spacing: 0.02em;
    direction: ltr;
}

/* Admin: reject-reason panel */
.reject-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 14px;
    align-items: center;
}
.reject-panel.hidden { display: none; }
.reject-reason-select,
.reject-reason-custom {
    flex: 1;
    min-width: 140px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--card-border);
    color: var(--text);
    border-radius: 10px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.82rem;
}
.reject-reason-custom.hidden { display: none; }
.btn-reject-confirm { flex-shrink: 0; }

/* Profile page: logout button */
.profile-links { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn-logout { padding: 6px 14px; font-size: 0.82rem; }

/* Animations */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1.15); }
}

/* Mobile */
@media (max-width: 600px) {
    /* Logo ("قاب روز") on its own centered row, everything else
       (Explore / Upload / notification bell / profile chip) centered
       on the row below it — same layout as desktop, just narrower. */
    .header-inner {
        flex-direction: column;
        align-items: center;
    }
    .main-nav {
        justify-content: center;
        flex-wrap: wrap;
    }
    .nav-links {
        justify-content: center;
        flex-wrap: wrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        min-width: 0;
    }
    .nav-links::-webkit-scrollbar { display: none; }
    .chip-name { white-space: nowrap; }

    .hero h1 { font-size: 1.7rem; }
    /* .notif-panel / .dropdown-panel positioning on mobile is handled
       in JS (positionPanelForMobile) — it clamps the panel inside the
       viewport with fixed positioning, since the trigger button's exact
       spot can shift depending on how much of nav-links is scrolled. A
       pure-CSS left/right rule can't know that in advance, which is
       what caused the panel to get pushed off-screen and leave blank
       space. */
    .explorer-toolbar { flex-direction: column; align-items: stretch; }
    .dropdown-wrap { width: 100%; }
    .dropdown-btn { width: 100%; justify-content: space-between; }
}

/* Explorer: infinite scroll */
.explorer-sentinel { height: 1px; }
.explorer-loading-text { text-align: center; padding: 20px 0 40px; font-size: 0.85rem; }
.explorer-loading-text.hidden { display: none; }