/* Up Lancer Single Post Styles */

:root {
    --ul-primary: #F7931E;
    --ul-text: #0F172A;
    --ul-muted: #64748B;
    --ul-surface: #FFFFFF;
    --ul-border: #E2E8F0;
}

.post-hero {
    padding: 80px 0 30px;
    background: linear-gradient(180deg, rgba(247,147,30,.06), rgba(247,147,30,0));
    text-align: center;
}

.post-meta { color: var(--ul-muted); display: flex; gap: 14px; justify-content: center; }
.post-meta i { color: var(--ul-primary); }

.post-content-section { padding: 40px 0 70px; }

.post-content .content-body { color: var(--ul-text); line-height: 1.9; font-size: 1.05rem; }
.post-content .content-body h2, .post-content .content-body h3 { margin-top: 1.5rem; }
.post-content img { border-radius: 10px; }

.post-sidebar { position: sticky; top: 90px; }
.sidebar-title { font-weight: 700; margin-bottom: 14px; }

.author-card { border: 1px solid var(--ul-border); border-radius: 14px; background: var(--ul-surface); padding: 14px; box-shadow: 0 10px 24px rgba(2,6,23,.06); }
.author-header { display: flex; align-items: center; gap: 12px; }
.author-avatar { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(247,147,30,.35); background: rgba(247,147,30,.06); display: inline-flex; align-items: center; justify-content: center; }
.author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-initial { font-weight: 800; color: var(--ul-primary); }
.author-info { display: flex; flex-direction: column; }
.author-name { font-weight: 800; color: var(--ul-text); }
.author-role { color: var(--ul-muted); font-size: .9rem; }
.author-follow { margin-top: 12px; font-weight: 700; color: var(--ul-text); font-size: .95rem; }
.author-social { display: flex; gap: 10px; margin-top: 8px; }
.author-social-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ul-border); color: var(--ul-text); text-decoration: none; background: var(--ul-surface); transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 6px 14px rgba(2,6,23,.05); }
.author-social-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(2,6,23,.08); }
.author-social-btn i { color: var(--ul-primary); }

.author-bio { margin-top: 10px; color: var(--ul-muted); line-height: 1.7; font-size: .95rem; }

.related-list { display: grid; gap: 14px; }
.related-item { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; text-decoration: none; color: var(--ul-text); padding: 8px; border: 1px solid var(--ul-border); border-radius: 12px; background: var(--ul-surface); transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 6px 16px rgba(2,6,23,.05); }
.related-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(2,6,23,.07); }

.related-thumb { position: relative; width: 88px; height: 72px; border-radius: 10px; overflow: hidden; }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.38), rgba(15,23,42,0)); opacity: .0; transition: opacity .2s ease; }
.related-item:hover .related-overlay { opacity: 1; }
.related-chip { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: #fff; background: rgba(15,23,42,.6); padding: 3px 8px; border-radius: 999px; }
.related-chip i { color: var(--ul-primary); }

.related-content { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.related-title { font-weight: 700; line-height: 1.25; }
.related-action { color: var(--ul-primary); opacity: .85; transition: transform .15s ease; }
.related-item:hover .related-action { transform: translateX(3px); }

/* Related text and date below title (not over image) */
.related-text { display: flex; flex-direction: column; gap: 4px; }
.related-date { color: var(--ul-muted); font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; }
.related-date i { color: var(--ul-primary); }

.back-btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; padding: 10px 16px; border-radius: 999px; background: rgba(247,147,30,.08); border: 1px solid rgba(247,147,30,.25); color: var(--ul-primary); box-shadow: 0 8px 20px rgba(2,6,23,.06); transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease; }
.back-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(2,6,23,.08); background: rgba(247,147,30,.12); }
.back-btn:active { transform: translateY(0); }
.back-btn .btn-icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ul-primary); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.back-btn .btn-text { letter-spacing: .1px; }

/* Share bar */
.share-bar { border-top: 1px solid var(--ul-border); margin-top: 24px; padding-top: 18px; }
.share-label { font-weight: 700; color: var(--ul-text); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; }
.share-label i { color: var(--ul-primary); }
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.share-button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; border: 1px solid var(--ul-border); color: var(--ul-text); background: var(--ul-surface); transition: transform .15s ease, background-color .15s ease; }
.share-button:hover { transform: translateY(-2px); }
.share-button i { color: var(--ul-primary); }
.share-button.copy-btn { cursor: pointer; }

.share-button.fb i { color: #1877F2; }
.share-button.x i { color: #000; }
.share-button.in i { color: #0A66C2; }
.share-button.wa i { color: #25D366; }
.share-button.tg i { color: #229ED9; }

.copy-toast { position: fixed; z-index: 9999; inset-inline: 50%; transform: translateX(-50%); bottom: 24px; background: var(--ul-text); color: #fff; padding: 10px 14px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }