/* =============================================================
   Social Module — style.css
   Single stylesheet: utilities + components + comments + modal
   ============================================================= */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
    --social-primary:        #1877f2;
    --social-primary-hover:  #166fe5;
    --social-bg:             #f0f2f5;
    --social-card-bg:        #ffffff;
    --social-border:         #e4e6eb;
    --social-text:           #050505;
    --social-text-secondary: #65676b;
    --social-header-h:       56px;
    --social-sidebar-w:      300px;
    --social-right-w:        280px;
    --social-radius:         8px;
    --social-radius-lg:      16px;
    --social-radius-xl:      20px;
    --social-shadow:         0 1px 2px rgba(0,0,0,.1);
    --social-shadow-md:      0 2px 12px rgba(0,0,0,.15);
    --social-shadow-lg:      0 4px 20px rgba(0,0,0,.12);

    /* Tailwind ring/shadow tokens */
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow:        0 0 #0000;
    --tw-shadow:             0 0 #0000;
    --tw-ring-color:         rgba(59,130,246,.5);
    --tw-ring-offset-width:  0px;
    --tw-ring-offset-color:  #fff;
}

/* ── Base Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; border: 0 solid #e5e7eb; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif; }
body { margin: 0; line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; margin: 0; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
button, input, optgroup, select, textarea {
    font-family: inherit; font-size: 100%; font-weight: inherit;
    line-height: inherit; color: inherit; margin: 0; padding: 0;
}
button, select { text-transform: none; }
button, input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button; background-color: transparent; background-image: none;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
[role="button"], button { cursor: pointer; }
:disabled { cursor: default; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
blockquote, dl, dd, figure, p, pre { margin: 0; }
fieldset { margin: 0; padding: 0; }


/* =============================================================
   TAILWIND-COMPATIBLE UTILITIES
   ============================================================= */

/* ── Display ──────────────────────────────────────────────── */
.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* ── Position ─────────────────────────────────────────────── */
.static   { position: static; }
.fixed    { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky   { position: sticky; }

/* ── Inset ────────────────────────────────────────────────── */
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-0    { top: 0; }
.top-2    { top: 0.5rem; }
.top-3    { top: 0.75rem; }
.top-4    { top: 1rem; }
.right-0  { right: 0; }
.right-2  { right: 0.5rem; }
.right-3  { right: 0.75rem; }
.right-4  { right: 1rem; }
.bottom-0 { bottom: 0; }
.bottom-2 { bottom: 0.5rem; }
.bottom-4 { bottom: 1rem; }
.left-0   { left: 0; }
.left-3   { left: 0.75rem; }
.left-4   { left: 1rem; }

/* ── Z-index ──────────────────────────────────────────────── */
.z-10  { z-index: 10; }
.z-20  { z-index: 20; }
.z-50  { z-index: 50; }
.z-100 { z-index: 100; }

/* ── Overflow ─────────────────────────────────────────────── */
.overflow-hidden   { overflow: hidden; }
.overflow-y-auto   { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.truncate          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* ── Flex ─────────────────────────────────────────────────── */
.flex-1         { flex: 1 1 0%; }
.flex-auto      { flex: 1 1 auto; }
.flex-shrink-0  { flex-shrink: 0; }
.flex-wrap      { flex-wrap: wrap; }
.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between{ justify-content: space-between; }
.self-center    { align-self: center; }
.self-start     { align-self: flex-start; }

/* ── Grid ─────────────────────────────────────────────────── */
.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)); }

/* ── Gap ──────────────────────────────────────────────────── */
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }

/* ── Width ────────────────────────────────────────────────── */
.w-full { width: 100%; }
.w-px   { width: 1px; }
.w-2    { width: 0.5rem; }
.w-3    { width: 0.75rem; }
.w-4    { width: 1rem; }
.w-5    { width: 1.25rem; }
.w-6    { width: 1.5rem; }
.w-8    { width: 2rem; }
.w-9    { width: 2.25rem; }
.w-10   { width: 2.5rem; }
.w-11   { width: 2.75rem; }
.w-12   { width: 3rem; }
.w-16   { width: 4rem; }
.w-20   { width: 5rem; }
.w-24   { width: 6rem; }
.w-32   { width: 8rem; }
.w-48   { width: 12rem; }
.w-64   { width: 16rem; }
.min-w-0 { min-width: 0; }

/* ── Max-width ────────────────────────────────────────────── */
.max-w-sm   { max-width: 24rem; }
.max-w-md   { max-width: 28rem; }
.max-w-lg   { max-width: 32rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-6xl  { max-width: 72rem; }
.max-w-7xl  { max-width: 80rem; }
.max-w-full { max-width: 100%; }
.max-w-screen-xl  { max-width: 1280px; }
.max-w-screen-2xl { max-width: 1440px; }

/* ── Height ───────────────────────────────────────────────── */
.h-full    { height: 100%; }
.h-screen  { height: 100vh; }
.h-px      { height: 1px; }
.h-2       { height: 0.5rem; }
.h-3       { height: 0.75rem; }
.h-4       { height: 1rem; }
.h-5       { height: 1.25rem; }
.h-6       { height: 1.5rem; }
.h-8       { height: 2rem; }
.h-9       { height: 2.25rem; }
.h-10      { height: 2.5rem; }
.h-12      { height: 3rem; }
.h-16      { height: 4rem; }
.h-20      { height: 5rem; }
.h-32      { height: 8rem; }
.h-48      { height: 12rem; }
.h-80      { height: 20rem; }
.min-h-screen { min-height: 100vh; }
.min-h-90  { min-height: 90px; }
.min-h-100 { min-height: 100px; }
.max-h-90vh { max-height: 90vh; }
.max-h-300 { max-height: 300px; }
.max-h-500 { max-height: 500px; }

/* ── Aspect ratio ─────────────────────────────────────────── */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }

/* ── Margin ───────────────────────────────────────────────── */
.m-0       { margin: 0; }
.mx-auto   { margin-left: auto; margin-right: auto; }
.mx-1      { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2      { margin-left: 0.5rem;  margin-right: 0.5rem; }
.mx-4      { margin-left: 1rem;    margin-right: 1rem; }
.my-1      { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2      { margin-top: 0.5rem;  margin-bottom: 0.5rem; }
.my-4      { margin-top: 1rem;    margin-bottom: 1rem; }
.mt-0\.5   { margin-top: 0.125rem; }
.mt-1      { margin-top: 0.25rem; }
.mt-2      { margin-top: 0.5rem; }
.mt-3      { margin-top: 0.75rem; }
.mt-4      { margin-top: 1rem; }
.mt-6      { margin-top: 1.5rem; }
.mt-8      { margin-top: 2rem; }
.mb-1      { margin-bottom: 0.25rem; }
.mb-2      { margin-bottom: 0.5rem; }
.mb-3      { margin-bottom: 0.75rem; }
.mb-4      { margin-bottom: 1rem; }
.mb-6      { margin-bottom: 1.5rem; }
.mb-8      { margin-bottom: 2rem; }
.ml-1      { margin-left: 0.25rem; }
.ml-2      { margin-left: 0.5rem; }
.ml-3      { margin-left: 0.75rem; }
.ml-auto   { margin-left: auto; }
.mr-1      { margin-right: 0.25rem; }
.mr-2      { margin-right: 0.5rem; }
.mr-3      { margin-right: 0.75rem; }

/* ── Space-y ──────────────────────────────────────────────── */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }

/* ── Padding ──────────────────────────────────────────────── */
.p-1    { padding: 0.25rem; }
.p-2    { padding: 0.5rem; }
.p-3    { padding: 0.75rem; }
.p-4    { padding: 1rem; }
.p-6    { padding: 1.5rem; }
.p-8    { padding: 2rem; }
.px-1   { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2   { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4   { padding-left: 1rem;    padding-right: 1rem; }
.px-6   { padding-left: 1.5rem;  padding-right: 1.5rem; }
.py-0\.5{ padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1   { padding-top: 0.25rem;  padding-bottom: 0.25rem; }
.py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2   { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
.py-2\.5{ padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3   { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.py-4   { padding-top: 1rem;     padding-bottom: 1rem; }
.py-6   { padding-top: 1.5rem;   padding-bottom: 1.5rem; }
.py-8   { padding-top: 2rem;     padding-bottom: 2rem; }
.pt-2   { padding-top: 0.5rem; }
.pt-3   { padding-top: 0.75rem; }
.pt-4   { padding-top: 1rem; }
.pt-6   { padding-top: 1.5rem; }
.pb-3   { padding-bottom: 0.75rem; }
.pb-6   { padding-bottom: 1.5rem; }
.pb-8   { padding-bottom: 2rem; }
.pl-6   { padding-left: 1.5rem; }
.pl-9   { padding-left: 2.25rem; }
.pr-4   { padding-right: 1rem; }
.pr-24  { padding-right: 6rem; }

/* ── Typography ───────────────────────────────────────────── */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.uppercase   { text-transform: uppercase; }
.capitalize  { text-transform: capitalize; }
.italic      { font-style: italic; }
.tracking-wider { letter-spacing: 0.05em; }

/* ── Text colours ─────────────────────────────────────────── */
.text-white       { color: #ffffff; }
.text-gray-200    { color: #e5e7eb; }
.text-gray-300    { color: #d1d5db; }
.text-gray-400    { color: #9ca3af; }
.text-gray-500    { color: #6b7280; }
.text-gray-600    { color: #4b5563; }
.text-gray-700    { color: #374151; }
.text-gray-800    { color: #1f2937; }
.text-gray-900    { color: #111827; }
.text-blue-500    { color: #3b82f6; }
.text-blue-600    { color: #2563eb; }
.text-blue-800    { color: #1e40af; }
.text-blue-100    { color: #dbeafe; }
.text-green-500   { color: #22c55e; }
.text-green-600   { color: #16a34a; }
.text-red-400     { color: #f87171; }
.text-red-500     { color: #ef4444; }
.text-red-600     { color: #dc2626; }
.text-yellow-400  { color: #facc15; }
.text-yellow-500  { color: #eab308; }
.text-purple-500  { color: #a855f7; }
.text-purple-600  { color: #9333ea; }

/* ── Background colours ───────────────────────────────────── */
.bg-transparent    { background-color: transparent; }
.bg-white          { background-color: #ffffff; }
.bg-black          { background-color: #000000; }
.bg-black\/50      { background-color: rgba(0,0,0,0.5); }
.bg-black\/60      { background-color: rgba(0,0,0,0.6); }
.bg-gray-50        { background-color: #f9fafb; }
.bg-gray-100       { background-color: #f3f4f6; }
.bg-gray-200       { background-color: #e5e7eb; }
.bg-gray-300       { background-color: #d1d5db; }
.bg-gray-500       { background-color: #6b7280; }
.bg-gray-800       { background-color: #1f2937; }
.bg-blue-50        { background-color: #eff6ff; }
.bg-blue-100       { background-color: #dbeafe; }
.bg-blue-500       { background-color: #3b82f6; }
.bg-blue-600       { background-color: #2563eb; }
.bg-green-100      { background-color: #dcfce7; }
.bg-green-500      { background-color: #22c55e; }
.bg-red-50         { background-color: #fef2f2; }
.bg-red-500        { background-color: #ef4444; }
.bg-purple-100     { background-color: #f3e8ff; }
.bg-yellow-500     { background-color: #eab308; }
.bg-opacity-70     { --tw-bg-opacity: 0.7; }
.bg-opacity-90     { --tw-bg-opacity: 0.9; }

/* ── Border ───────────────────────────────────────────────── */
.border            { border-width: 1px; }
.border-2          { border-width: 2px; }
.border-4          { border-width: 4px; }
.border-0          { border-width: 0; }
.border-b          { border-bottom-width: 1px; }
.border-t          { border-top-width: 1px; }
.border-r          { border-right-width: 1px; }
.border-b-2        { border-bottom-width: 2px; }
.border-dashed     { border-style: dashed; }
.border-transparent{ border-color: transparent; }
.border-white      { border-color: #ffffff; }
.border-gray-100   { border-color: #f3f4f6; }
.border-gray-200   { border-color: #e5e7eb; }
.border-gray-300   { border-color: #d1d5db; }
.border-blue-300   { border-color: #93c5fd; }
.border-blue-500   { border-color: #3b82f6; }
.border-blue-600   { border-color: #2563eb; }

/* ── Border radius ────────────────────────────────────────── */
.rounded       { border-radius: 0.25rem; }
.rounded-md    { border-radius: 0.375rem; }
.rounded-lg    { border-radius: 0.5rem; }
.rounded-xl    { border-radius: 0.75rem; }
.rounded-2xl   { border-radius: 1rem; }
.rounded-3xl   { border-radius: 1.5rem; }
.rounded-full  { border-radius: 9999px; }
.rounded-l-lg  { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
.rounded-r-lg  { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }

/* ── Shadow ───────────────────────────────────────────────── */
.shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.shadow     { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.shadow-md  { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }

/* ── Object fit ───────────────────────────────────────────── */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ── Opacity ──────────────────────────────────────────────── */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-70  { opacity: 0.7; }
.opacity-100 { opacity: 1; }

/* ── Cursor ───────────────────────────────────────────────── */
.cursor-pointer      { cursor: pointer; }
.cursor-not-allowed  { cursor: not-allowed; }
.cursor-default      { cursor: default; }

/* ── Resize ───────────────────────────────────────────────── */
.resize-none { resize: none; }
.resize-y    { resize: vertical; }

/* ── Appearance ───────────────────────────────────────────── */
.appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* ── Outline ──────────────────────────────────────────────── */
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }

/* ── Transitions ──────────────────────────────────────────── */
.transition         { transition-property: color, background-color, border-color, opacity, box-shadow, transform; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }
.transition-colors  { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }
.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; }
.transition-all     { transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }
.duration-150       { transition-duration: .15s; }
.duration-200       { transition-duration: .2s; }
.duration-300       { transition-duration: .3s; }
.ease-in-out        { transition-timing-function: cubic-bezier(.4,0,.2,1); }

/* ── Focus ring ───────────────────────────────────────────── */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus {
    --tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-500:focus { --tw-ring-color: rgba(59,130,246,.5); }
.focus\:border-blue-500:focus { border-color: #3b82f6; }
.focus\:border-blue-600:focus { border-color: #2563eb; }
.focus\:bg-white:focus { background-color: #ffffff; }

/* ── Hover ────────────────────────────────────────────────── */
.hover\:bg-gray-50:hover   { background-color: #f9fafb; }
.hover\:bg-gray-100:hover  { background-color: #f3f4f6; }
.hover\:bg-gray-200:hover  { background-color: #e5e7eb; }
.hover\:bg-blue-50:hover   { background-color: #eff6ff; }
.hover\:bg-blue-100:hover  { background-color: #dbeafe; }
.hover\:bg-blue-700:hover  { background-color: #1d4ed8; }
.hover\:bg-green-500:hover { background-color: #22c55e; }
.hover\:bg-red-50:hover    { background-color: #fef2f2; }
.hover\:bg-red-100:hover   { background-color: #fee2e2; }
.hover\:border-blue-500:hover { border-color: #3b82f6; }
.hover\:text-blue-600:hover   { color: #2563eb; }
.hover\:text-gray-700:hover   { color: #374151; }
.hover\:text-gray-900:hover   { color: #111827; }
.hover\:text-red-700:hover    { color: #b91c1c; }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.hover\:underline:hover { text-decoration-line: underline; }
.hover\:opacity-90:hover { opacity: 0.9; }

/* ── Disabled ─────────────────────────────────────────────── */
.disabled\:opacity-50:disabled { opacity: .5; }
.disabled\:cursor-default:disabled { cursor: default; }

/* ── Gradient ─────────────────────────────────────────────── */
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.from-black { --tw-gradient-from: #000; --tw-gradient-stops: var(--tw-gradient-from), transparent; }
.to-transparent { --tw-gradient-to: transparent; }

/* ── Misc ─────────────────────────────────────────────────── */
.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; }
.fill-current { fill: currentColor; }
.fill-red-500 { fill: #ef4444; }
.list-disc    { list-style-type: disc; }
.divide-y > * + * { border-top-width: 1px; }
.divide-gray-200 > * + * { border-color: #e5e7eb; }

/* ── Translate / Transform ────────────────────────────────── */
.-translate-y-1\/2   { transform: translateY(-50%); }
.-translate-x-1\/2   { transform: translateX(-50%); }
.top-1\/2  { top: 50%; }
.left-1\/2 { left: 50%; }

/* ── Focus ring ───────────────────────────────────────────── */
.ring-4 {
    --tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-white { --tw-ring-color: #ffffff; }
.ring-blue-500 { --tw-ring-color: rgba(59,130,246,.5); }

/* ── Extra padding ────────────────────────────────────────── */
.pt-16  { padding-top: 4rem; }
.pt-24  { padding-top: 6rem; }
.pb-16  { padding-bottom: 4rem; }
.pl-search { padding-left: 3.25rem; }

/* ── Extra heights ────────────────────────────────────────── */
.h-11    { height: 2.75rem; }
.h-nav { height: 4rem; }
.min-h-nav { min-height: 4rem; }

/* ── Pointer events ───────────────────────────────────────── */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ── Max-width extras ─────────────────────────────────────── */
.max-w-md  { max-width: 28rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-search { max-width: min(calc(100vw - 2rem), 36rem); }

/* ── Z-index extras ───────────────────────────────────────── */
.z-1   { z-index: 1; }
.z-100 { z-index: 100; }

/* ── Background extras ────────────────────────────────────── */
.bg-green-500 { background-color: #22c55e; }

/* ── Border radius left/right ─────────────────────────────── */
.rounded-l-full { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; }
.rounded-r-full { border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; }


/* =============================================================
   SOCIAL LAYOUT & HEADER
   ============================================================= */

.social-body {
    background: var(--social-bg);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--social-text);
}

/* Header */
.social-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--social-card-bg);
    box-shadow: 0 1px 0 var(--social-border);
    height: var(--social-header-h);
}
.social-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}
.social-header-logo {
    flex-shrink: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.social-header-logo img { height: 40px; width: auto; }
.social-header-logo-text {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--social-primary);
    letter-spacing: -0.5px;
}
.social-header-search {
    flex: 1;
    max-width: 480px;
    margin: 0 auto;
}
.social-header-search form { position: relative; display: flex; align-items: center; }
.social-header-search-icon {
    position: absolute;
    left: 14px;
    color: var(--social-text-secondary);
    font-size: 0.9rem;
}
.social-header-search-input {
    width: 100%;
    border: none;
    background: var(--social-bg);
    border-radius: 50px;
    padding: 10px 18px 10px 40px;
    font-size: 0.95rem;
    outline: none;
    color: var(--social-text);
    transition: background 0.2s;
}
.social-header-search-input::placeholder { color: var(--social-text-secondary); }
.social-header-search-input:focus { background: #e4e6eb; }
.social-header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.social-header-icon-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--social-text-secondary);
    text-decoration: none;
    font-size: 1.15rem;
    transition: background 0.2s, color 0.2s;
}
.social-header-icon-btn:hover { background: #e4e6eb; color: var(--social-text); }
.social-header-icon-btn.active { background: var(--social-primary); color: #fff; }
.social-header-avatar-btn {
    display: flex; align-items: center; gap: 10px;
    background: none; border: none; padding: 6px 10px 6px 6px;
    border-radius: 50px; cursor: pointer; transition: background 0.2s;
}
.social-header-avatar-btn:hover { background: var(--social-bg); }
.social-header-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.social-header-avatar-initial {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--social-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem;
}
.social-header-user-name { font-size: 0.95rem; font-weight: 600; color: var(--social-text); }
.social-header-btn-login,
.social-header-btn-join {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, opacity 0.2s;
}
.social-header-btn-login { color: var(--social-primary); }
.social-header-btn-login:hover { background: #e7f0fd; }
.social-header-btn-join { background: var(--social-primary); color: #fff; }
.social-header-btn-join:hover { opacity: 0.92; background: var(--social-primary-hover); }


/* =============================================================
   LAYOUT
   ============================================================= */

.social-layout-wrap {
    display: flex;
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 16px;
    align-items: flex-start;
}
.social-main {
    flex: 1;
    min-width: 0;
    max-width: 680px;
}


/* =============================================================
   SIDEBAR (LEFT)
   ============================================================= */

.social-sidebar {
    width: var(--social-sidebar-w);
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--social-header-h) + 16px);
    max-height: calc(100vh - var(--social-header-h) - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
.social-sidebar::-webkit-scrollbar { width: 4px; }
.social-sidebar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.social-sidebar-main { display: flex; flex-direction: column; gap: 12px; }
.social-sidebar-main--hidden { display: none !important; }
.social-sidebar-subpanel { display: none; }
.social-sidebar-card {
    background: var(--social-card-bg);
    border-radius: var(--social-radius-lg);
    box-shadow: var(--social-shadow);
    padding: 14px;
}
.social-sidebar-card-title {
    font-size: 0.8rem; font-weight: 700;
    color: var(--social-text-secondary);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 12px; padding: 0 4px;
}
.social-sidebar-profile-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 20px 14px;
}
.social-sidebar-profile-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.social-sidebar-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.social-sidebar-profile-initial {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--social-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.5rem;
}
.social-sidebar-profile-name { font-weight: 700; font-size: 1rem; text-align: center; color: var(--social-text); }
.social-sidebar-profile-btn {
    font-size: 0.875rem; color: var(--social-primary);
    border: 1px solid var(--social-primary);
    padding: 6px 18px; border-radius: 8px;
    text-decoration: none; font-weight: 600; transition: all 0.2s;
}
.social-sidebar-profile-btn:hover { background: var(--social-primary); color: #fff; }
.social-sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.social-sidebar-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    font-size: 0.95rem; font-weight: 500; color: var(--social-text);
    text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.social-sidebar-nav-item:hover { background: var(--social-bg); }
.social-sidebar-nav-item.active { background: var(--social-primary); color: #fff; font-weight: 600; }
.social-sidebar-nav-item.active .social-sidebar-nav-icon,
.social-sidebar-nav-item.active .social-sidebar-nav-arrow { color: rgba(255,255,255,0.95); }
.social-sidebar-nav-icon { width: 22px; text-align: center; font-size: 1.1rem; flex-shrink: 0; }
.social-sidebar-nav-arrow { font-size: 0.75rem; color: var(--social-text-secondary); margin-left: auto; }
.social-sidebar-create-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 6px; font-size: 0.9rem; font-weight: 500;
    color: var(--social-text); text-decoration: none;
    border-radius: 10px; transition: background 0.2s;
}
.social-sidebar-create-item:hover { background: var(--social-bg); }
.social-sidebar-create-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; flex-shrink: 0;
}
.social-sidebar-create-icon.job-icon { background: #dbeafe; color: var(--social-primary); }
.social-sidebar-create-icon.mkt-icon { background: #dcfce7; color: #16a34a; }
.social-sidebar-subpanel-card {
    background: var(--social-card-bg);
    border-radius: var(--social-radius-lg);
    box-shadow: var(--social-shadow);
    overflow: hidden;
}
.social-sidebar-subpanel-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--social-border);
}
.social-sidebar-back-btn {
    background: var(--social-bg); border: none; border-radius: 50%;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--social-text); font-size: 0.85rem;
    transition: background 0.15s; flex-shrink: 0;
}
.social-sidebar-back-btn:hover { background: #dddfe2; }
.social-sidebar-subpanel-title { font-weight: 700; font-size: 0.95rem; flex: 1; }
.social-sidebar-subpanel-all { font-size: 0.82rem; color: var(--social-primary); text-decoration: none; font-weight: 600; }
.social-sidebar-subpanel-all:hover { text-decoration: underline; }
.social-sidebar-subpanel-body { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.social-sidebar-cat-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 6px; border-radius: 8px;
    font-size: 0.88rem; color: var(--social-text); text-decoration: none;
    transition: background 0.15s;
}
.social-sidebar-cat-link:hover { background: var(--social-bg); }
.social-sidebar-cat-icon {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; flex-shrink: 0;
}
.job-cat-icon  { background: #dbeafe; color: var(--social-primary); }
.mkt-cat-icon  { background: #dcfce7; color: #16a34a; }
.post-icon     { background: #f3e8ff; color: #7c3aed; }
.social-sidebar-cat-post { font-weight: 600; }


/* =============================================================
   RIGHT SIDEBAR
   ============================================================= */

.social-right-sidebar {
    width: var(--social-right-w);
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--social-header-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.social-right-quick-btn {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 14px; border-radius: 10px;
    font-size: 0.9rem; font-weight: 600;
    text-decoration: none; margin-bottom: 8px;
    transition: opacity 0.2s, transform 0.15s;
}
.social-right-quick-btn:last-of-type { margin-bottom: 0; }
.social-right-quick-btn.job-btn { background: var(--social-primary); color: #fff; }
.social-right-quick-btn.mkt-btn { background: #16a34a; color: #fff; }
.social-right-quick-btn:hover { opacity: 0.92; }
.social-right-browse-link {
    display: flex; align-items: center;
    padding: 10px 8px; font-size: 0.9rem; color: var(--social-text);
    text-decoration: none; border-radius: 10px; transition: background 0.2s;
}
.social-right-browse-link:hover { background: var(--social-bg); }


/* =============================================================
   COMPOSER (Feed create-post box)
   ============================================================= */

.social-create-post {
    background: var(--social-card-bg);
    border-radius: var(--social-radius-lg);
    box-shadow: var(--social-shadow);
    padding: 16px;
    margin-bottom: 16px;
}
.social-composer-row { display: flex; align-items: center; gap: 12px; }
.social-composer-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.social-composer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.social-composer-initial {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--social-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem;
}
.social-composer-input {
    flex: 1; background: var(--social-bg); border-radius: 50px;
    padding: 12px 20px; font-size: 0.95rem; color: var(--social-text-secondary);
    cursor: pointer; transition: background 0.2s; user-select: none;
}
.social-composer-input:hover { background: #e4e6eb; }
.social-composer-hr { margin: 12px 0; border: none; border-top: 1px solid var(--social-border); }
.social-composer-actions { display: flex; gap: 6px; align-items: center; }
.social-composer-action {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 10px;
    font-size: 0.9rem; font-weight: 600; color: var(--social-text-secondary);
    text-decoration: none; transition: background 0.2s, color 0.2s; flex: 1; justify-content: center;
}
.social-composer-action:hover { background: var(--social-bg); }
.social-composer-action.job-action:hover { color: var(--social-primary); }
.social-composer-action.mkt-action:hover { color: #16a34a; }


/* =============================================================
   FEED
   ============================================================= */

.social-feed-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 0 6px; }
.social-feed-title { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--social-text); }
.social-feed-count { font-size: 0.85rem; color: var(--social-text-secondary); }

.social-feed-card {
    background: var(--social-card-bg);
    border-radius: var(--social-radius-lg);
    box-shadow: var(--social-shadow);
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.social-feed-card:hover { box-shadow: var(--social-shadow-md); }
.social-card-header { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 10px; }
.social-card-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.05rem; color: #fff; flex-shrink: 0;
}
.social-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.job-avatar { background: var(--social-primary); }
.mkt-avatar { background: #16a34a; }
.social-card-meta { flex: 1; min-width: 0; }
.social-card-author { font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: var(--social-text); }
.social-card-time-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.social-card-cat-badge { font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 50px; }
.social-card-type-job { background: #dbeafe; color: var(--social-primary); }
.social-card-type-mkt { background: #dcfce7; color: #16a34a; }
.social-card-time { font-size: 0.8rem; color: var(--social-text-secondary); }

/* Card menu */
.social-card-menu .social-card-menu-btn {
    background: none; border: none; color: var(--social-text-secondary);
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s; flex-shrink: 0;
}
.social-card-menu .social-card-menu-btn:hover { background: var(--social-bg); }
.social-card-dropdown { font-size: 0.88rem; }

/* Card images */
.social-card-image-wrap { overflow: hidden; max-height: 400px; }
.social-card-image { width: 100%; height: auto; display: block; object-fit: cover; }
.social-card-gallery { display: grid; gap: 2px; background: #fff; overflow: hidden; }
.social-card-gallery-1 { grid-template-columns: 1fr; }
.social-card-gallery-2 { grid-template-columns: repeat(2, 1fr); }
.social-card-gallery-3 {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: repeat(2, minmax(150px, 1fr));
}
.social-card-gallery-3 .social-card-gallery-item:first-child { grid-row: 1 / span 2; }
.social-card-gallery-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(150px, 1fr));
}
.social-card-gallery-item {
    position: relative; display: block; overflow: hidden;
    min-height: 180px; background: #eef2f7;
}
.social-card-gallery-1 .social-card-gallery-item { min-height: 320px; }
.social-card-gallery-item .social-card-image {
    width: 100%; height: 100%; min-height: inherit;
    object-fit: cover; transition: transform 0.2s ease;
}
.social-card-gallery-item:hover .social-card-image { transform: scale(1.02); }
.social-card-gallery-item.has-overflow::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(17, 24, 39, 0.38);
}
.social-card-gallery-more {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.5rem; font-weight: 700;
}

/* Card body */
.social-card-body { padding: 12px 16px; }
.social-card-title {
    display: block; font-size: 1rem; font-weight: 600;
    color: var(--social-text); text-decoration: none;
    margin-bottom: 6px; line-height: 1.4;
}
.social-card-title:hover { color: var(--social-primary); }
.social-card-text { font-size: 0.9rem; color: var(--social-text-secondary); margin: 0; line-height: 1.5; }
.social-card-price { font-size: 1.05rem; font-weight: 700; color: #16a34a; margin-top: 6px; }

/* Card actions */
.social-card-actions {
    display: flex; align-items: center; gap: 2px;
    padding: 8px 12px;
    border-top: 1px solid var(--social-border);
}
.social-card-action-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px; border: none; background: none;
    font-size: 0.9rem; font-weight: 600; color: var(--social-text-secondary);
    text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s;
    flex: 1; justify-content: center;
}
.social-card-action-btn:hover { background: var(--social-bg); color: var(--social-text); }
.social-card-action-btn.social-like-btn.liked { color: #e0245e; }
.social-card-action-btn.social-like-btn.liked i { color: #e0245e; }
.social-card-action-cta { color: var(--social-primary); }
.social-card-action-cta:hover { background: #e7f0fd; color: var(--social-primary); }

/* Filter tabs */
.social-filter-tabs {
    display: flex; gap: 0; border-bottom: 1px solid var(--social-border); margin-bottom: 16px;
    background: var(--social-card-bg);
    border-radius: var(--social-radius-lg) var(--social-radius-lg) 0 0;
    overflow: hidden;
}
.social-filter-tab {
    flex: 1; padding: 14px; text-align: center;
    font-size: 0.95rem; font-weight: 600; color: var(--social-text-secondary);
    text-decoration: none; border-bottom: 3px solid transparent; transition: all 0.2s;
}
.social-filter-tab:hover { background: var(--social-bg); }
.social-filter-tab.active { color: var(--social-primary); border-bottom-color: var(--social-primary); }

/* Empty state */
.social-empty-state { text-align: center; padding: 56px 28px; }
.social-empty-icon { font-size: 3.5rem; color: var(--social-text-secondary); opacity: 0.45; }
.social-empty-text { color: var(--social-text-secondary); margin-top: 14px; font-size: 1.05rem; }
.social-empty-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.social-empty-btn {
    padding: 10px 20px; border-radius: 10px; border: none;
    font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.social-empty-btn.job-btn { background: var(--social-primary); color: #fff; }
.social-empty-btn.mkt-btn { background: #16a34a; color: #fff; }
.social-empty-btn:hover { opacity: 0.92; }

/* Load more */
.social-load-more-wrap { text-align: center; padding: 20px; }
.social-load-more-btn {
    padding: 12px 32px; border-radius: 10px; border: 1px solid var(--social-border);
    background: var(--social-card-bg); font-size: 0.95rem; font-weight: 600;
    cursor: pointer; transition: background 0.2s; color: var(--social-text);
}
.social-load-more-btn:hover { background: var(--social-bg); }
.social-load-more-btn:disabled { opacity: 0.6; cursor: default; }


/* =============================================================
   CREATE POST MODAL
   ============================================================= */

/* The modal uses utility classes from above. These are
   component-level overrides for elements inside the modal. */

/* Image upload area in compose forms */
.social-compose-file-input { display: none; }

/* Preview grid thumbnails */
/* Real-time image upload grid */
.compose-img-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.compose-img-item {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    background: #e5e7eb;
    flex-shrink: 0;
}
.compose-img-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Uploading placeholder pulsing */
.compose-img-item.uploading {
    animation: compose-pulse 1.2s ease-in-out infinite;
}
@keyframes compose-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* Remove button on each thumbnail */
.compose-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(17, 24, 39, 0.8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    transition: background 0.15s;
}
.compose-preview-remove:hover { background: #dc2626; }

/* Legacy / new-upload grid */
.social-compose-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Existing-images row in edit mode */
.compose-existing-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.compose-existing-images > p {
    width: 100%;
    font-size: 0.72rem;
    color: #6b7280;
    margin: 0 0 4px;
}

/* Image section wrapper */
.compose-images-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}


/* =============================================================
   COMMENTS UI (merged from social-comments-ui.css)
   ============================================================= */

.social-inline-comments {
    overflow: hidden;
    transition: max-height 220ms ease, opacity 180ms ease;
    max-height: 0;
    opacity: 0;
}
.social-inline-comments.social-inline-comments--open {
    max-height: 520px;
    opacity: 1;
}
.social-comment-bubble {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.social-comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg,#6366f1,#38bdf8);
}
.social-comment-bubble-body {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 14px;
    background: #f3f4f6;
}
.social-inline-comments .social-comment-bubble-body {
    padding: 6px 10px;
    border-radius: 999px;
}
.social-typing-indicator { min-height: 16px; }
.social-replies .social-comment-bubble-body { background: #eef2ff; }


/* =============================================================
   DETAIL PAGE
   ============================================================= */

.social-detail-page { padding: 0; }
.social-detail-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.88rem; font-weight: 600; color: var(--social-text-secondary);
    text-decoration: none; padding: 8px 4px; margin-bottom: 10px;
    transition: color 0.15s;
}
.social-detail-back:hover { color: var(--social-primary); }
.social-detail-card { margin-bottom: 0; }
.social-detail-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.social-detail-body { font-size: 0.9rem; line-height: 1.6; color: var(--social-text); white-space: pre-line; }
.social-detail-price { font-size: 1.3rem; margin-bottom: 8px; }
.social-detail-contact {
    margin-top: 10px; padding: 8px 12px;
    background: var(--social-bg); border-radius: 8px;
    font-size: 0.88rem; color: var(--social-text);
}

/* Comments section */
.social-comments-section {
    padding: 10px 14px;
    border-top: 1px solid var(--social-border);
    display: flex; flex-direction: column; gap: 8px;
}
.social-comment {
    display: flex; flex-wrap: wrap; gap: 6px;
    background: var(--social-bg); border-radius: 12px;
    padding: 8px 12px;
}
.social-comment-author { font-weight: 600; font-size: 0.85rem; }
.social-comment-body { font-size: 0.85rem; color: var(--social-text); }
.social-comment-form {
    display: flex; gap: 8px; padding: 10px 14px;
    border-top: 1px solid var(--social-border);
}
.social-comment-input {
    flex: 1; background: var(--social-bg); border: none; border-radius: 50px;
    padding: 8px 16px; font-size: 0.88rem; outline: none;
}
.social-comment-input:focus { background: #e4e6eb; }
.social-comment-submit {
    background: var(--social-primary); color: #fff; border: none;
    border-radius: 50px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: opacity 0.15s;
}
.social-comment-submit:hover { opacity: 0.9; }


/* =============================================================
   AUTH PAGES
   ============================================================= */

.social-auth-page {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100vh - var(--social-header-h) - 60px);
    padding: 24px 16px;
}
.social-auth-card {
    background: var(--social-card-bg);
    border-radius: var(--social-radius-lg);
    box-shadow: var(--social-shadow-md);
    padding: 32px 28px;
    width: 100%; max-width: 420px;
}
.social-auth-logo { text-align: center; margin-bottom: 16px; font-size: 2.5rem; color: var(--social-primary); }
.social-auth-title { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 4px; }
.social-auth-subtitle { font-size: 0.9rem; color: var(--social-text-secondary); text-align: center; margin-bottom: 20px; }
.social-auth-form { display: flex; flex-direction: column; gap: 12px; }
.social-auth-row { display: flex; gap: 10px; }
.social-auth-row .social-auth-field { flex: 1; }
.social-auth-field { display: flex; flex-direction: column; }
.social-auth-input {
    border: 1px solid var(--social-border); border-radius: 8px;
    padding: 10px 14px; font-size: 0.9rem; outline: none;
    transition: border-color 0.15s;
}
.social-auth-input:focus { border-color: var(--social-primary); }
.social-auth-btn {
    background: var(--social-primary); color: #fff; border: none;
    border-radius: 8px; padding: 11px; font-size: 0.95rem; font-weight: 700;
    cursor: pointer; transition: opacity 0.15s; margin-top: 4px;
}
.social-auth-btn:hover { opacity: 0.9; }
.social-auth-alt { text-align: center; font-size: 0.85rem; color: var(--social-text-secondary); margin-top: 14px; }
.social-auth-alt a { color: var(--social-primary); text-decoration: none; font-weight: 600; }
.social-auth-alt a:hover { text-decoration: underline; }


/* =============================================================
   PROFILE PAGE
   ============================================================= */

.social-profile-page { padding: 24px; text-align: center; }
.social-profile-header { margin-bottom: 20px; }
.social-profile-avatar-lg {
    width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
    margin: 0 auto 12px;
    background: var(--social-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 2rem;
}
.social-profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.social-profile-name { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.social-profile-email { color: var(--social-text-secondary); font-size: 0.88rem; }
.social-profile-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.social-profile-action-btn {
    padding: 9px 18px; border-radius: 8px;
    font-size: 0.9rem; font-weight: 600; text-decoration: none;
    background: var(--social-primary); color: #fff;
    transition: opacity 0.15s;
}
.social-profile-action-btn.mkt { background: #16a34a; }
.social-profile-action-btn:hover { opacity: 0.9; }
.social-profile-back { margin-top: 12px; }
.social-profile-back a { color: var(--social-text-secondary); font-size: 0.88rem; text-decoration: none; }
.social-profile-back a:hover { color: var(--social-primary); }


/* =============================================================
   FOOTER
   ============================================================= */

.social-footer { background: var(--social-card-bg); border-top: 1px solid var(--social-border); margin-top: 24px; padding: 16px; }
.social-footer-inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
}
.social-footer-copy { font-size: 0.85rem; color: var(--social-text-secondary); }
.social-footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
.social-footer-links a {
    font-size: 0.85rem; color: var(--social-text-secondary);
    text-decoration: none; transition: color 0.2s;
}
.social-footer-links a:hover { color: var(--social-primary); }


/* =============================================================
   RESPONSIVE UTILITY VARIANTS
   ============================================================= */

/* ── sm: (640px+) ─────────────────────────────────────────── */
@media (min-width: 640px) {
    .sm\:px-4  { padding-left: 1rem; padding-right: 1rem; }
    .sm\:py-0  { padding-top: 0; padding-bottom: 0; }
    .sm\:h-16  { height: 4rem; }
    .sm\:h-11  { height: 2.75rem; }
    .sm\:h-12  { height: 3rem; }
    .sm\:w-11  { width: 2.75rem; }
    .sm\:ml-4  { margin-left: 1rem; }
    .sm\:flex  { display: flex; }
    .sm\:inline { display: inline; }
    .sm\:hidden { display: none; }
    .sm\:block  { display: block; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-center { align-items: center; }
    .sm\:items-end    { align-items: flex-end; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:mb-0  { margin-bottom: 0; }
    /* sm:text-15px removed — use font-size directly */
    .sm\:-translate-x-1\/2 { transform: translateX(-50%); }
    .sm\:left-1\/2   { left: 50%; }
    .sm\:right-auto  { right: auto; }
    .sm\:-left-1\.5  { left: -0.375rem; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:flex-shrink-0 { flex-shrink: 0; }
    .sm\:w-40  { width: 10rem; }
    .sm\:w-80  { width: 20rem; }
}

/* ── md: (768px+) ─────────────────────────────────────────── */
@media (min-width: 768px) {
    .md\:block  { display: block; }
    .md\:flex   { display: flex; }
    .md\:hidden { display: none; }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:justify-between { justify-content: space-between; }
    .md\:w-64  { width: 16rem; }
    .md\:w-80  { width: 20rem; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── lg: (1024px+) ────────────────────────────────────────── */
@media (min-width: 1024px) {
    .lg\:block        { display: block; }
    .lg\:flex         { display: flex; }
    .lg\:hidden       { display: none; }
    .lg\:inline       { display: inline; }
    .lg\:flex-row     { flex-direction: row; }
    .lg\:flex-shrink-0 { flex-shrink: 0; }
    .lg\:items-center { align-items: center; }
    .lg\:w-64   { width: 16rem; }
    .lg\:w-80   { width: 20rem; }
    .lg\:max-w-xl  { max-width: 36rem; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Layout row (replaces flex flex-col lg:flex-row) ─────── */
.social-layout-row {
    display: flex;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .social-layout-row { flex-direction: row; align-items: flex-start; gap: 16px; }
}
@media (min-width: 1280px) {
    .social-layout-row { gap: 20px; }
}

/* -- Sidebar visibility helpers (Facebook-style sticky sidebars) -- */
.social-sidebar-left,
.social-sidebar-right {
    display: none;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
.social-sidebar-left::-webkit-scrollbar,
.social-sidebar-right::-webkit-scrollbar { width: 4px; }
.social-sidebar-left::-webkit-scrollbar-thumb,
.social-sidebar-right::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

@media (min-width: 1024px) {
    .social-sidebar-left {
        display: block;
        width: 240px;
        position: sticky;
        top: 64px;
        height: calc(100vh - 64px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .social-sidebar-right {
        display: block;
        width: 260px;
        position: sticky;
        top: 64px;
        height: calc(100vh - 64px);
        overflow-y: auto;
        overflow-x: hidden;
    }
}
@media (min-width: 1280px) {
    .social-sidebar-left  { width: 280px; }
    .social-sidebar-right { width: 300px; }
}

/* ── xl: (1280px+) ────────────────────────────────────────── */
@media (min-width: 1280px) {
    .xl\:block  { display: block; }
    .xl\:flex   { display: flex; }
    .xl\:hidden { display: none; }
    .xl\:max-w-2xl { max-width: 42rem; }
    .xl\:px-4   { padding-left: 1rem; padding-right: 1rem; }
    .xl\:px-6   { padding-left: 1.5rem; padding-right: 1.5rem; }
}


/* =============================================================
   SOCIAL LAYOUT RESPONSIVE OVERRIDES
   ============================================================= */

@media (max-width: 1100px) {
    .social-right-sidebar { display: none; }
    .social-main { max-width: 100%; }
}

@media (max-width: 768px) {
    .social-layout-wrap { padding: 10px 8px; flex-direction: column; }
    .social-sidebar { width: 100%; position: static; max-height: none; overflow: visible; }
    .social-sidebar-main { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .social-sidebar-card { flex: 1; min-width: 140px; }
    .social-sidebar-profile-card { display: none; }
    .social-main { max-width: 100%; }
    .social-header-search { display: none; }
    .social-card-gallery-1 .social-card-gallery-item { min-height: 240px; }
}

@media (max-width: 480px) {
    .social-sidebar-main { display: none; }
    .social-layout-wrap { padding: 8px; }
    .social-auth-row { flex-direction: column; }
    .social-card-gallery-item { min-height: 120px; }
    form .grid-cols-2 { grid-template-columns: 1fr; }
}


/* =============================================================
   IMAGE SLIDER (Marketplace feed cards & detail page)
   ============================================================= */

.mkt-slider {
    position: relative;
    overflow: hidden;
    background: #000;
    line-height: 0;
}

.mkt-slider-track {
    display: flex;
    transition: transform 0.35s ease;
    will-change: transform;
}

.mkt-slider-slide {
    min-width: 100%;
    flex-shrink: 0;
    position: relative;
}

.mkt-slider-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.mkt-slider-img-detail {
    height: 420px;
}

/* Prev / Next arrows */
.mkt-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s;
    padding: 0;
}
.mkt-slider-arrow:hover { background: rgba(0,0,0,0.72); }
.mkt-slider-prev { left: 10px; }
.mkt-slider-next { right: 10px; }

/* Bullet dots */
.mkt-slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.mkt-slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.mkt-slider-dot.active {
    background: #fff;
    transform: scale(1.3);
}


/* =============================================================
   POPUP GALLERY LIGHTBOX
   ============================================================= */

#mkt-gallery-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.92);
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#mkt-gallery-popup.open {
    display: flex;
}

.mkt-gallery-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    z-index: 1;
    opacity: 0.8;
}
.mkt-gallery-close:hover { opacity: 1; }

.mkt-gallery-img-wrap {
    max-width: min(90vw, 900px);
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mkt-gallery-img-wrap img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
}

.mkt-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
}
.mkt-gallery-nav:hover { background: rgba(255,255,255,0.3); }
.mkt-gallery-prev { left: 16px; }
.mkt-gallery-next { right: 16px; }

.mkt-gallery-counter {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.75);
    font-size: 0.875rem;
    font-weight: 500;
}

.mkt-gallery-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.mkt-gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.mkt-gallery-dot.active {
    background: #fff;
    transform: scale(1.3);
}

@media (max-width: 480px) {
    .mkt-slider-img        { height: 220px; }
    .mkt-slider-img-detail { height: 260px; }
}


/* =============================================================
   MARKETPLACE GRID & CARD  (marketplace_index.php)
   ============================================================= */

/* 3-col responsive grid */
.mkt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
/* Admin-configurable column overrides */
.mkt-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mkt-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .mkt-grid,
    .mkt-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .mkt-grid,
    .mkt-grid-cols-2,
    .mkt-grid-cols-4 { grid-template-columns: 1fr; }
}

/* Card */
.mkt-card {
    position: relative;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.mkt-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.10); }

/* Image area — fixed height */
.mkt-card-img-wrap {
    position: relative;
    height: 200px;
    background: #f3f4f6;
    overflow: hidden;
    flex-shrink: 0;
}
.mkt-card-img-wrap .mkt-slider {
    height: 100%;
    border-radius: 0;
    margin: 0;
}
.mkt-card-img-wrap .mkt-slider-img,
.mkt-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.mkt-card-no-img {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    color: #d1d5db;
}

/* Heart / save button overlaid */
.mkt-card-heart {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(255,255,255,0.92);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.mkt-card-heart:hover,
.mkt-card-heart.saved {
    background: #ef4444;
    color: #fff;
}
.mkt-card-heart.saved { background: #ef4444; color: #fff; }

/* Category badge overlaid bottom-left */
.mkt-card-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 3;
    background: rgba(255,255,255,0.88);
    color: #374151;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

/* Card body */
.mkt-card-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.15s;
}
.mkt-card-title:hover { color: #2563eb; }

.mkt-card-price {
    font-size: 1.35rem;
    font-weight: 700;
    color: #2563eb;
    margin-top: 4px;
    margin-bottom: 4px;
}

.mkt-card-body {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.45;
    margin-top: 4px;
    margin-bottom: 6px;
}

.mkt-card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
}
.mkt-card-meta svg { flex-shrink: 0; }

/* Footer: avatar + seller + contact button */
.mkt-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    gap: 6px;
}

.mkt-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mkt-card-seller {
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkt-card-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: #2563eb;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}
.mkt-card-contact-btn:hover { background: #1d4ed8; }

/* Post 3-dot menu dropdown */
.post-menu-dropdown {
    min-width: 160px;
}

/* Category filter pills */
.mkt-cat-pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    background: #f3f4f6;
    color: #374151;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
    border: none;
}
.mkt-cat-pill:hover { background: #e5e7eb; }
.mkt-cat-pill.active { background: #2563eb; color: #fff; }

@media (max-width: 600px) {
    .mkt-card-img-wrap,
    .mkt-card-img-wrap .mkt-slider-img,
    .mkt-card-img { height: 160px; }
    .mkt-card-no-img { height: 160px; }
}

/* =============================================================
   JOB CARDS GRID (matching marketplace design, no image)
   ============================================================= */
.job-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .job-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .job-grid { grid-template-columns: 1fr; } }

.job-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.job-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.10); transform: translateY(-1px); }

/* Color banner at top (replaces image) */
.job-card-banner {
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.job-card-banner-initial {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    letter-spacing: -1px;
    user-select: none;
}
.job-card-avatar-wrap {
    position: absolute;
    bottom: -18px;
    left: 16px;
    z-index: 2;
}
.job-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    flex-shrink: 0;
}

/* Save button overlaid top-right */
.job-card-save {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(255,255,255,0.92);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.job-card-save:hover, .job-card-save.saved { background: #ef4444; color: #fff; }

/* Category badge on banner */
.job-card-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(255,255,255,0.88);
    color: #374151;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-card-body {
    padding: 24px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.job-card-title-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 6px;
}
.job-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
    text-decoration: none;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
.job-card-title:hover { color: #2563eb; }
.job-card-desc {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.job-card-spacer { flex: 1; }
.job-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f3f4f6;
    padding-top: 8px;
    margin-top: 8px;
    gap: 6px;
}
.job-card-poster {
    font-size: 0.78rem;
    font-weight: 500;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.job-card-time {
    font-size: 0.7rem;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}
.job-card-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #0d9488;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
}
.job-card-apply-btn:hover { background: #0f766e; }
.job-search-form { position: relative; flex: 1; min-width: 0; }
.job-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #9ca3af;
}

/* =============================================================
   ARBITRARY VALUE UTILITIES (Tailwind-style bracket classes)
   ============================================================= */
/* h-[22px] w-[22px] — search icon svg size */
.h-\[22px\]  { height: 22px; }
.w-\[22px\]  { width: 22px; }
/* text-[15px] — slightly larger input text */
.text-\[15px\] { font-size: 15px; }
/* pl-[3.25rem] — search input left padding */
.pl-\[3\.25rem\] { padding-left: 3.25rem; }
/* min-h-[4rem] — nav row min height */
.min-h-\[4rem\]  { min-height: 4rem; }
/* max-h-[90vh] — modal max height */
.max-h-\[90vh\]  { max-height: 90vh; }
/* min-h-[90px] — textarea */
.min-h-\[90px\]  { min-height: 90px; }
/* max-h-[400px] */
.max-h-\[400px\] { max-height: 400px; }
/* max-w-[200px] */
.max-w-\[200px\] { max-width: 200px; }

/* =============================================================
   SEARCH INPUT — overrides Tailwind-style arbitrary classes
   ============================================================= */
#social-header-search-input {
    padding-left: 3.25rem; /* same as pl-[3.25rem] */
    padding-right: 1rem;
    height: 2.75rem; /* h-11 */
    font-size: 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #f9fafb;
    color: #111827;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
#social-header-search-input::placeholder {
    color: #6b7280;
}
#social-header-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.25);
    background: #fff;
    outline: none;
}
@media (min-width: 640px) {
    #social-header-search-input {
        height: 3rem; /* sm:h-12 */
        font-size: 0.9375rem; /* ~15px */
    }
}

/* Search dropdown max-height */
#social-header-search-dropdown {
    max-height: min(70vh, 480px);
}
@media (min-width: 640px) {
    #social-header-search-dropdown {
        left: 50%;
        right: auto;
        width: min(calc(100vw - 2rem), 36rem);
        transform: translateX(-50%);
    }
}

/* =============================================================
   MISC UTILITY FIXES
   ============================================================= */
/* -translate-x-1/2 */
.-translate-x-1\/2 { transform: translateX(-50%); }

/* sm: left positioning for search icon */
@media (min-width: 640px) {
    .sm\:-left-1\.5 { left: -0.375rem; }
    .sm\:h-11 { height: 2.75rem; }
    .sm\:w-11 { width: 2.75rem; }
}

/* shadow-lg on ring (used in search icon) */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
/* ring-4 ring-white — white ring border around avatar/icon */
.ring-4 {
    box-shadow: 0 0 0 4px #fff;
}

/* =============================================================
   SOCIAL FEED — INLINE COMMENT PANEL
   ============================================================= */
.social-inline-comments {
    transition: opacity 0.24s ease;
    opacity: 0;
}
.social-inline-comments.hidden {
    display: none;
}
.social-inline-comments--open {
    opacity: 1;
}

/* =============================================================
   SAVE / FAVORITE BUTTON ACTIVE STATES (defensive)
   ============================================================= */
.social-save-btn.text-blue-700 svg,
.social-fav-btn.text-amber-700 svg {
    fill: currentColor;
}
.social-like-btn.liked svg {
    fill: currentColor;
}
.social-like-btn.liked {
    color: #ef4444;
}

/* =============================================================
   COMPOSE MODAL — UPLOADING STATE
   ============================================================= */
.compose-img-item .uploading-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 0.65rem;
    text-align: center;
    padding: 3px 0;
}

/* =============================================================
   POST MENU DROPDOWN — VISIBLE STATE
   ============================================================= */
[data-post-menu-dropdown]:not(.hidden) {
    display: block;
}
[data-post-menu] {
    position: relative;
}

/* =============================================================
   IMAGE LOADING — shimmer skeleton + fade-in (no layout shift)
   ============================================================= */

/* Shimmer keyframe */
@keyframes socialShimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

/* Shimmer applied to every image container while image is loading */
.mkt-slider-slide,
.mkt-card-img-wrap {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%, #f0f0f0 25%,
        #e4e4e4 50%,
        #f0f0f0 75%, #f0f0f0 100%
    );
    background-size: 1200px 100%;
    animation: socialShimmer 1.4s ease-in-out infinite;
}

/* Stop shimmer once the image inside has loaded */
.mkt-slider-slide.social-img-loaded,
.mkt-card-img-wrap.social-img-loaded {
    background: none;
    animation: none;
}

/* ── LQIP blur-up (Facebook / Medium approach) ───────────────────────── */
/*
 * 1. .social-img shows the tiny LQIP src immediately (blurred, oversized to cover)
 * 2. .si-loaded fires when the full image has loaded → clears blur, opacity to 1
 * 3. .si-no-blur skips blur (used where no LQIP is available, e.g. comment thumbs)
 */
.social-img {
    filter: blur(12px);
    transform: scale(1.04);   /* hide blur edges */
    opacity: 1;
    transition: filter 0.4s ease, transform 0.4s ease, opacity 0.35s ease;
    will-change: filter, transform;
    background: #f0f2f5;      /* fallback before placeholder loads */
}
.social-img.si-loaded {
    filter: none;
    transform: scale(1);
    opacity: 1;
}
/* No-blur variant: simple fade-in (for images with no LQIP available) */
.social-img.si-no-blur {
    filter: none;
    transform: none;
    opacity: 0;
}
.social-img.si-no-blur.si-loaded {
    opacity: 1;
}

/* Keep old .social-img-loaded working for any remaining JS that sets it */
.social-img.social-img-loaded {
    filter: none;
    transform: scale(1);
    opacity: 1;
}

/* Error fallback — show a grey area with icon via parent */
.mkt-slider-slide.social-img-error,
.mkt-card-img-wrap.social-img-error {
    background: #f3f4f6;
    animation: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mkt-slider-slide.social-img-error .social-img,
.mkt-card-img-wrap.social-img-error .social-img {
    opacity: 0.25;
}

/* =============================================================
   TOAST NOTIFICATION — Facebook-style snackbar
   ============================================================= */
.social-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    min-width: 220px;
    max-width: 380px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    z-index: 99999;
    pointer-events: none;
    background: #1c1c1e;
    color: #fff;
    box-shadow: 0 4px 24px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.15);
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.25s cubic-bezier(.16,1,.3,1);
    white-space: nowrap;
}
.social-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.social-toast--success { background: #166534; }
.social-toast--error   { background: #991b1b; }
.social-toast--info    { background: #1c1c1e; }

/* =============================================================
   CARD UPDATE PULSE — flash green border after edit
   ============================================================= */
@keyframes cardUpdatedPulse {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
    60%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.card-updated-pulse {
    animation: cardUpdatedPulse 1.1s ease forwards;
}

/* =============================================================
   EDIT BUTTON IN MARKETPLACE CARD FOOTER
   ============================================================= */
.mkt-card-delete-btn + .mkt-card-delete-btn {
    color: #ef4444;
}

/* =============================================================
   RESPONSIVE FIXES — FEED CARD ON MOBILE
   ============================================================= */
@media (max-width: 639px) {
    .social-sidebar-left,
    .social-sidebar-right {
        display: none !important;
    }
    .social-layout-row {
        flex-direction: column;
    }
}

/* =============================================================
   MAIN-SITE AUTH MODALS (Bootstrap override)
   ============================================================= */
#modalLogin .modal-content,
#modalRegister .modal-content {
    border: none;
    border-radius: 1rem;
    position: relative;
    overflow: visible;
    padding: 0;
}
#modalLogin .modal-content > button[data-bs-dismiss],
#modalRegister .modal-content > button[data-bs-dismiss] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
}

/* ── Facebook-style post image grid ─────────────────────────────── */
.post-img-grid {
    display: grid;
    gap: 2px;
    border-radius: 0.75rem;
    overflow: hidden;
    margin: 12px -16px 0;
}

/* Cell base */
.pig-cell {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
    cursor: pointer;
}
.pig-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}
.pig-cell:hover img { transform: scale(1.03); }

/* "+N more" overlay on last cell */
.pig-cell.pig-more::after {
    content: attr(data-more);
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    pointer-events: none;
}

/* 1 image */
.post-img-grid--1 {
    grid-template-columns: 1fr;
}
.post-img-grid--1 .pig-cell { height: 300px; }

/* 2 images — side by side */
.post-img-grid--2 {
    grid-template-columns: 1fr 1fr;
}
.post-img-grid--2 .pig-cell { height: 240px; }

/* 3 images — big left, 2 right stacked */
.post-img-grid--3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 160px 160px;
}
.post-img-grid--3 .pig-cell:first-child {
    grid-row: 1 / span 2;
}
.post-img-grid--3 .pig-cell:not(:first-child) { height: 160px; }

/* 4+ images — 2×2 grid */
.post-img-grid--4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px;
}

/* Responsive */
@media (max-width: 480px) {
    .post-img-grid--1 .pig-cell  { height: 220px; }
    .post-img-grid--2 .pig-cell  { height: 180px; }
    .post-img-grid--3 { grid-template-rows: 130px 130px; }
    .post-img-grid--3 .pig-cell:not(:first-child) { height: 130px; }
    .post-img-grid--4 { grid-template-rows: 140px 140px; }
}

/* ══════════════════════════════════════════════════════════
   FACEBOOK-STYLE COMMENT BUBBLES
   ══════════════════════════════════════════════════════════ */
.fb-comment {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.fb-comment + .fb-comment { margin-top: 12px; }
.fb-comment-avatar {
    width: 32px; height: 32px;
    border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #6366f1, #38bdf8);
}
.fb-reply .fb-comment-avatar { width: 26px; height: 26px; font-size: 0.68rem; }
.fb-comment-content { flex: 1; min-width: 0; }
.fb-comment-bubble {
    display: inline-block;
    background: #f0f2f5; border-radius: 18px;
    padding: 8px 12px; max-width: 100%;
}
.fb-comment-author {
    display: block; font-size: 0.8125rem; font-weight: 700;
    color: #050505; margin-bottom: 2px;
}
.fb-comment-body { font-size: 0.9rem; color: #050505; line-height: 1.4; }
.fb-comment-actions {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 4px 0;
    font-size: 0.75rem; color: #65676b;
}
.fb-comment-time { color: #65676b; white-space: nowrap; }
.fb-comment-like, .fb-comment-reply {
    background: none; border: none; cursor: pointer;
    font-size: 0.75rem; font-weight: 700; color: #65676b;
    padding: 0; transition: color 0.15s;
}
.fb-comment-like:hover, .fb-comment-reply:hover { text-decoration: underline; color: #1c1e21; }
.fb-comment-like.liked { color: #0866ff; }
.fb-comment-like-count { font-weight: 600; color: inherit; }

/* Comment more (⋯) menu */
.fb-comment-more-wrap { position: relative; margin-left: auto; }
.fb-comment-more-btn {
    background: none; border: none; cursor: pointer; padding: 0 2px;
    color: #bcc0c4; font-size: 1rem; line-height: 1; display: flex; align-items: center;
    transition: color 0.15s; border-radius: 4px;
}
.fb-comment-more-btn:hover { color: #65676b; }
.fb-comment-more-dropdown {
    position: absolute; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1px solid #e4e6eb; border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12); z-index: 200; min-width: 160px;
    padding: 4px 0; display: none;
}
.fb-comment-more-dropdown.open { display: block; }
.fb-comment-more-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 14px; border: none; background: none;
    font-size: 0.8rem; color: #3c4043; cursor: pointer; text-align: left;
    transition: background 0.1s;
}
.fb-comment-more-item:hover { background: #f0f2f5; }
.fb-comment-more-item.danger { color: #e53935; }
.fb-comment-more-item.danger:hover { background: #fff0f0; }
.fb-comment-more-item svg { flex-shrink: 0; }

/* Inline comment edit */
/* Edit form — sits inside fb-comment-bubble, styled like the main comment input */
.fb-comment-edit-wrap {
    margin-top: 6px; width: 100%;
}
.fb-comment-edit-wrap .spm-comment-input-inner {
    border: 1.5px solid #0866ff;
}
.fb-comment-edit-area {
    flex: 1; border: none; outline: none; background: none; resize: none;
    font-size: 0.875rem; font-family: inherit; color: #1c1e21;
    min-height: 32px; max-height: 120px; overflow-y: auto; line-height: 1.4;
    padding: 0; min-width: 0;
}
.fb-comment-edit-area::placeholder { color: #8a8d91; }
.fb-comment-edit-actions {
    display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; align-items: center;
}
.fb-comment-edit-cancel {
    background: none; border: none; padding: 4px 10px;
    font-size: 0.78rem; cursor: pointer; font-weight: 600; color: #65676b; border-radius: 6px;
}
.fb-comment-edit-cancel:hover { background: #f0f2f5; color: #1c1e21; }
.fb-comment-edit-save {
    background: #0866ff; color: #fff; border: none; border-radius: 8px;
    padding: 5px 14px; font-size: 0.78rem; cursor: pointer; font-weight: 600;
    transition: background .15s;
}
.fb-comment-edit-save:hover:not(:disabled) { background: #0757d9; }
.fb-comment-edit-save:disabled { opacity: 0.5; cursor: default; }
.fb-replies {
    margin-top: 8px; margin-left: 8px;
    display: flex; flex-direction: column; gap: 10px;
}
.fb-view-replies-btn {
    background: none; border: none; cursor: pointer;
    font-size: 0.78rem; font-weight: 700; color: #65676b;
    padding: 4px 0 0; display: flex; align-items: center; gap: 4px;
    margin-top: 4px; transition: color 0.15s;
}
.fb-view-replies-btn:hover { color: #0866ff; text-decoration: underline; }
.fb-reply-input-wrap {
    margin-top: 8px; margin-left: 8px;
    display: flex; gap: 6px; align-items: center;
}
.fb-reply-input-wrap input {
    flex: 1; background: #f0f2f5; border: none;
    border-radius: 999px; padding: 8px 14px;
    font-size: 0.875rem; outline: none; color: #1c1e21;
}
.fb-reply-input-wrap button {
    background: none; border: none; cursor: pointer;
    color: #0866ff; font-weight: 700; font-size: 0.8rem;
}

/* ══════════════════════════════════════════════════════════
   POST DETAIL MODAL (Facebook-style)
   ══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   Post Modal  —  Facebook single-column style
   ════════════════════════════════════════════════════════════ */
.spm-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(0,0,0,0.65);
    display: flex; align-items: center; justify-content: center;
    padding: 12px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.spm-overlay.open { opacity: 1; pointer-events: auto; }

.spm-box {
    background: #fff; border-radius: 12px;
    width: min(560px, 100%);
    height: min(92vh, 780px);
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    transform: translateY(10px); transition: transform 0.22s ease;
}
.spm-overlay.open .spm-box { transform: translateY(0); }

/* Header */
.spm-header {
    display: flex; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid #e4e6ea;
    flex-shrink: 0; position: relative;
}
.spm-header-spacer { width: 32px; flex-shrink: 0; }
.spm-title { font-weight: 700; font-size: 1rem; color: #050505; flex: 1; text-align: center; }
.spm-close {
    width: 32px; height: 32px; border-radius: 50%;
    background: #e4e6ea; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #050505; flex-shrink: 0; transition: background 0.15s;
}
.spm-close:hover { background: #d8dadf; }

/* Scrollable area */
.spm-scroll-area {
    flex: 1; overflow-y: auto; min-height: 0;
    display: flex; flex-direction: column;
}

/* Post section */
.spm-post-section {
    display: flex; flex-direction: column;
    border-bottom: 1px solid #e4e6ea;
}
.spm-post-author {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px 8px;
}
.spm-post-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #6366f1, #38bdf8);
}
.spm-post-name  { font-size: 0.9rem; font-weight: 700; color: #050505; }
.spm-post-meta  { font-size: 0.75rem; color: #65676b; }
.spm-post-text  { padding: 0 16px 10px; display: flex; flex-direction: column; gap: 4px; }
.spm-post-title { font-size: 1rem; font-weight: 700; color: #1c1e21; margin: 0; }
.spm-post-body  { font-size: 0.9rem; color: #1c1e21; line-height: 1.55; white-space: pre-line; margin: 0; }
.spm-post-price { font-size: 0.95rem; font-weight: 700; color: #0866ff; margin: 0; }
/* Image: full-width, no horizontal padding */
.spm-post-img-grid  { border-radius: 0; margin: 0; }
.spm-post-placeholder {
    min-height: 80px; margin: 0 16px 10px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700; color: rgba(255,255,255,0.7);
}

/* Post footer: counts + actions */
.spm-post-footer { border-bottom: 1px solid #e4e6ea; }
.spm-counts-row {
    padding: 6px 16px 2px; font-size: 0.8rem; color: #65676b;
    display: flex; justify-content: space-between;
}
.spm-action-row {
    display: flex; gap: 4px; padding: 2px 12px 6px;
}
.spm-action-btn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 8px 4px; border-radius: 8px;
    font-size: 0.85rem; font-weight: 600; color: #65676b;
    background: none; border: none; cursor: pointer; transition: background 0.15s;
}
.spm-action-btn:hover  { background: #f0f2f5; }
.spm-action-btn--active { color: #0866ff; }
.spm-action-btn.liked   { color: #e2366f; }

/* Comments list */
.spm-comments-list {
    flex: 1; padding: 12px 14px 8px;
    display: flex; flex-direction: column; gap: 0;
}
.spm-loading, .spm-no-comments {
    text-align: center; color: #999; padding: 24px; font-size: 0.85rem;
}

/* Fixed bottom: comment input */
.spm-comment-input-wrap {
    padding: 8px 12px; border-top: 1px solid #e4e6ea;
    display: flex; align-items: flex-start; gap: 8px;
    background: #fff; flex-shrink: 0;
}
.spm-my-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #6366f1, #38bdf8);
    margin-top: 2px;
}

/* ── Inline reply form (appears below a comment) ──────────────── */
/* Reply form sits BELOW the comment (not inside the flex row) */
.spm-inline-reply {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 6px;
    padding-left: 46px;  /* indent to align under comment content */
    width: 100%;
    box-sizing: border-box;
}
.spm-inline-reply-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #6366f1, #38bdf8);
    margin-top: 2px;
}
.spm-inline-reply-inner {
    flex: 1; background: #f0f2f5; border-radius: 18px;
    padding: 6px 12px; position: relative;
}
.spm-inline-reply-inner input,
.spm-inline-reply-inner textarea {
    width: 100%; background: none; border: none; outline: none;
    font-size: 0.82rem; color: #1c1e21;
    resize: none; overflow-y: hidden;
    height: auto; min-height: 20px; max-height: 80px;
    line-height: 1.45; padding: 0; font-family: inherit;
}
.spm-inline-reply-inner input::placeholder,
.spm-inline-reply-inner textarea::placeholder { color: #8a8d91; }
.spm-inline-reply-actions {
    display: flex; align-items: center; gap: 4px; margin-top: 4px;
}
.spm-inline-reply-submit {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: #0866ff; padding: 2px; display: flex; align-items: center;
    opacity: 0.5; transition: opacity 0.15s;
}
.spm-inline-reply-submit:not([disabled]) { opacity: 1; }
.spm-inline-reply-cancel {
    background: none; border: none; cursor: pointer;
    font-size: 0.75rem; color: #65676b; padding: 2px 4px;
}
.spm-inline-reply-cancel:hover { color: #050505; }

@media (max-width: 600px) {
    .spm-box { height: 100svh; border-radius: 0; width: 100%; }
    .spm-overlay { padding: 0; }
}

/* ═══════════════════════════════════════════════════════════
   Comment Emoji Picker + Image Upload  (inline & modal)
   ════════════════════════════════════════════════════════════ */

/* ── Emoji button wrapper ───────────────────────────────────── */
.emoji-btn-wrap {
    display: flex; align-items: center;
}

/* ── Shared emoji picker  (JS sets top/left via position:fixed) */
.sic-emoji-picker,
.spm-emoji-picker {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e4e6ea;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(8, 34px);
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    width: 296px;
}
.sic-emoji-picker.hidden,
.spm-emoji-picker.hidden { display: none; }

.emoji-item {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    font-size: 1.35rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
    border: none; background: none;
}
.emoji-item:hover { background: #f0f2f5; }

/* ── Inline comment form (feed cards) ─────────────────────── */
.social-inline-comment-form {
    position: relative;
}
/* ── Chat / comment send error ─────────────────────────────── */
.sic-send-error {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px 2px;
    font-size: 0.78rem; color: #dc2626;
    animation: sic-err-in 0.15s ease;
}
@keyframes sic-err-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sic-send-error i { font-size: 0.8rem; flex-shrink: 0; }

.sic-input-row {
    display: flex;
    align-items: flex-end;
    background: #f0f2f5;
    border-radius: 999px;
    padding: 6px 10px 6px 16px;
    gap: 4px;
}
.sic-text-input {
    flex: 1;
    background: none; border: none; outline: none;
    font-size: 0.875rem; color: #1c1e21;
    min-width: 0;
}
.sic-text-input::placeholder { color: #8a8d91; }
.sic-toolbar {
    display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.sic-emoji-btn,
.sic-img-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: none; background: none; cursor: pointer;
    border-radius: 50%;
    color: #65676b;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.sic-emoji-btn:hover,
.sic-img-btn:hover { background: #e4e6ea; color: #0866ff; }
.sic-send-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: none; background: #0866ff; cursor: pointer;
    border-radius: 50%; color: #fff;
    flex-shrink: 0;
    transition: background 0.15s, opacity 0.15s;
    padding: 0;
}
.sic-send-btn:hover { background: #0757d9; }
.sic-send-btn:disabled { opacity: 0.5; cursor: default; }
.sic-send-btn--loading { position: relative; pointer-events: none; }
.sic-send-btn--loading svg { opacity: 0; }
.sic-send-btn--loading::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    animation: sic-spin 0.7s linear infinite;
}
@keyframes sic-spin { to { transform: rotate(360deg); } }

/* ── Image preview strip ───────────────────────────────────── */
.sic-img-preview,
.spm-img-preview {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0;
    flex-wrap: wrap;
}
.sic-img-preview.hidden,
.spm-img-preview.hidden { display: none; }

.comment-img-thumb-wrap {
    position: relative;
    width: 64px; height: 64px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #e4e6ea;
}
.comment-img-thumb-wrap img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.comment-img-thumb-remove {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px;
    background: rgba(0,0,0,.6); color: #fff;
    border: none; border-radius: 50%; cursor: pointer;
    font-size: 11px; display: flex;
    align-items: center; justify-content: center;
    line-height: 1;
}

/* ── Modal input row & toolbar ─────────────────────────────── */
.spm-comment-input-inner {
    flex: 1;
    display: flex; flex-direction: column;
    background: #f0f2f5; border-radius: 18px;
    padding: 8px 12px; gap: 4px;
    position: relative;
}
.spm-input-row {
    display: flex; align-items: flex-end; gap: 6px;
}
.spm-comment-input-inner input,
.spm-comment-input-inner textarea {
    flex: 1; background: none; border: none; outline: none;
    font-size: 0.875rem; color: #1c1e21;
    min-width: 0; resize: none; overflow-y: hidden;
    height: auto; min-height: 22px; max-height: 100px;
    line-height: 1.45; padding: 0; font-family: inherit;
}
.spm-input-toolbar {
    display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
#spm-emoji-btn,
#spd-emoji-btn,
.spm-img-label {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border: none; background: none; cursor: pointer;
    border-radius: 50%; color: #65676b;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
#spm-emoji-btn:hover,
#spd-emoji-btn:hover,
.spm-img-label:hover { background: #e4e6ea; color: #0866ff; }
#spm-comment-submit,
#spd-comment-send {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border: none; background: #0866ff; cursor: pointer;
    border-radius: 50%; color: #fff;
    transition: background 0.15s, opacity 0.15s;
    padding: 0; flex-shrink: 0;
}
#spm-comment-submit:hover,
#spd-comment-send:hover { background: #0757d9; }
#spd-comment-send:disabled { opacity: 0.4; cursor: default; }

/* ── Comment image display inside bubbles ─────────────────── */
.fb-comment-img,
.sic-comment-img {
    display: block;
    max-width: 220px;
    max-height: 200px;
    border-radius: 12px;
    margin-top: 6px;
    cursor: pointer;
    object-fit: cover;
    border: 1px solid #e4e6ea;
    transition: opacity 0.15s;
}
.fb-comment-img:hover,
.sic-comment-img:hover { opacity: 0.92; }


/* ═══════════════════════════════════════════════════════════
   NOTIFICATION BELL
   ═══════════════════════════════════════════════════════════ */
.sn-bell-wrap {
    position: relative;
    display: inline-flex;
}
#sn-bell-btn {
    background: none; border: none; cursor: pointer;
    padding: 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #444; transition: background 0.15s;
}
#sn-bell-btn:hover { background: #f0f2f5; }
#sn-bell-btn svg   { width: 22px; height: 22px; }
#sn-bell-badge {
    position: absolute; top: 1px; right: 1px;
    background: #e53935; color: #fff; font-size: 0.6rem; font-weight: 700;
    border-radius: 20px; min-width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
    border: 2px solid #fff; pointer-events: none;
}
#sn-bell-badge.hidden { display: none; }

@keyframes snBellFlash {
    0%, 100% { transform: rotate(0); }
    25%       { transform: rotate(-18deg); }
    75%       { transform: rotate(18deg); }
}
.sn-bell-flash #sn-bell-btn { animation: snBellFlash 0.5s ease; }

/* ── Dropdown ─────────────────────────────────────────────── */
#sn-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 340px; background: #fff;
    border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.15);
    border: 1px solid #e4e6ea; z-index: 3000; overflow: hidden;
}
#sn-dropdown.hidden { display: none; }
.sn-dropdown-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px; border-bottom: 1px solid #f0f2f5;
}
.sn-dropdown-title { font-weight: 700; font-size: 0.97rem; color: #1c1e21; }
#sn-mark-all {
    background: none; border: none; cursor: pointer;
    font-size: 0.78rem; color: #0866ff; font-weight: 600; padding: 2px 6px;
    border-radius: 6px; transition: background 0.12s;
}
#sn-mark-all:hover { background: #e7f0ff; }
#sn-list { max-height: 380px; overflow-y: auto; }
.sn-empty { padding: 24px 16px; text-align: center; color: #8a8d91; font-size: 0.85rem; }

/* ── Notification item ────────────────────────────────────── */
.sn-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; cursor: pointer; transition: background 0.12s;
    border-bottom: 1px solid #f5f5f5;
}
.sn-item:last-child { border-bottom: none; }
.sn-item:hover { background: #f5f7fb; }
.sn-item.sn-unread { background: #f0f4ff; }
.sn-item.sn-unread:hover { background: #e4ecff; }

.sn-item-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; color: #fff; position: relative;
}
.sn-type-icon {
    position: absolute; bottom: -3px; right: -3px;
    width: 16px; height: 16px; border-radius: 50%; padding: 2px;
    border: 2px solid #fff;
}
.sn-icon-reply  { background: #0866ff; color: #fff; }
.sn-icon-mention{ background: #1bc95f; color: #fff; }
.sn-icon-like   { background: #e53935; color: #fff; }

.sn-item-body   { flex: 1; min-width: 0; }
.sn-item-msg    { margin: 0; font-size: 0.84rem; color: #1c1e21; line-height: 1.35; }
.sn-item-time   { font-size: 0.75rem; color: #8a8d91; display: block; margin-top: 2px; }
.sn-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #0866ff;
    flex-shrink: 0; margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════
   @MENTION DROPDOWN
   ═══════════════════════════════════════════════════════════ */
.smt-mention-dropdown {
    position: fixed; z-index: 9998;
    background: #fff; border: 1px solid #e4e6ea;
    border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.14);
    overflow: hidden; min-width: 220px; max-height: 240px; overflow-y: auto;
}
.smt-mention-dropdown.hidden { display: none; }
.smt-mention-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; cursor: pointer; transition: background 0.1s;
}
.smt-mention-item:hover,
.smt-mention-item.active { background: #f0f2f5; }
.smt-mention-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: #fff;
}
.smt-mention-name { font-size: 0.88rem; font-weight: 600; color: #1c1e21; }

/* ═══════════════════════════════════════════════════════════
   CONTACT SELLER MODAL
   ═══════════════════════════════════════════════════════════ */
.smc-overlay {
    position: fixed; inset: 0; z-index: 3500;
    background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.smc-overlay.hidden { display: none; }
.smc-box {
    background: #fff; border-radius: 16px;
    width: 100%; max-width: 440px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    display: flex; flex-direction: column; overflow: hidden;
}
.smc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px; border-bottom: 1px solid #f0f2f5;
}
.smc-title { font-weight: 700; font-size: 1rem; color: #1c1e21; }
.smc-close {
    background: none; border: none; cursor: pointer; font-size: 1.4rem;
    color: #8a8d91; line-height: 1; padding: 2px 6px; border-radius: 6px;
    transition: background 0.12s;
}
.smc-close:hover { background: #f0f2f5; color: #1c1e21; }

/* Item preview card */
.smc-item-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; background: #f7f8fa;
    border-bottom: 1px solid #e4e6ea;
}
.smc-item-img-wrap {
    width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
    flex-shrink: 0; background: #e4e6ea;
}
.smc-item-img {
    width: 100%; height: 100%; object-fit: cover;
}
.smc-item-placeholder {
    width: 64px; height: 64px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#6366f1,#38bdf8);
    color: #fff; font-weight: 700; font-size: 1.5rem;
}
.smc-item-info  { flex: 1; min-width: 0; }
.smc-item-title {
    display: block; font-weight: 700; font-size: 0.9rem; color: #1c1e21;
    text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.smc-item-title:hover { color: #0866ff; text-decoration: underline; }
.smc-item-price {
    display: inline-block; margin-top: 3px;
    font-size: 0.82rem; font-weight: 700; color: #1bc95f;
}
.smc-item-seller {
    display: block; margin-top: 2px; font-size: 0.78rem; color: #8a8d91;
}

/* Message input */
.smc-body      { padding: 16px 20px 8px; }
.smc-textarea  {
    width: 100%; box-sizing: border-box; resize: none; min-height: 80px; overflow-y: hidden;
    border: 1.5px solid #e4e6ea; border-radius: 10px; padding: 10px 12px;
    font-size: 0.88rem; color: #1c1e21; outline: none;
    transition: border-color 0.15s; font-family: inherit;
}
.smc-textarea:focus { border-color: #0866ff; }

/* Footer buttons */
.smc-footer {
    display: flex; gap: 10px; align-items: center; justify-content: flex-end;
    padding: 10px 20px 16px;
}
.smc-cancel {
    background: #f0f2f5; border: none; border-radius: 8px; padding: 8px 18px;
    font-size: 0.88rem; font-weight: 600; cursor: pointer; color: #444; transition: background 0.12s;
}
.smc-cancel:hover { background: #e4e6ea; }
.smc-submit {
    background: #0866ff; color: #fff; border: none; border-radius: 8px;
    padding: 8px 20px; font-size: 0.88rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; gap: 6px; transition: background 0.15s;
}
.smc-submit:hover    { background: #0753d4; }
.smc-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════
   FEED INTERSTITIAL WIDGETS
   (Injected after every 10 posts — restaurants / marketplace)
   ═══════════════════════════════════════════════════════════ */
.feed-interstitial {
    background: #fff;
    border: 1px solid #e4e6ea;
    border-radius: 16px;
    padding: 14px 0 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin-bottom: 12px;
}
.feed-interstitial__header {
    display: flex; align-items: center; gap: 8px;
    padding: 0 16px 10px;
    border-bottom: 1px solid #f0f2f5;
    margin-bottom: 12px;
}
.feed-interstitial__icon { color: #0866ff; display: flex; align-items: center; }
.feed-interstitial__title { font-size: 0.95rem; font-weight: 700; color: #1c1e21; }

/* Slick track wrapper */
.feed-interstitial__track { padding: 4px 40px 8px; position: relative; }
.feed-interstitial__track .slick-list { margin: 0 -5px; }
.feed-interstitial__track .slick-slide { padding: 0 5px; }

/* Slick custom arrow buttons */
.feed-int-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e4e6ea;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #444;
    transition: background 0.15s, box-shadow 0.15s;
    padding: 0;
    line-height: 1;
}
.feed-int-arrow:hover {
    background: #f0f2f5;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    color: #0866ff;
}
.feed-int-arrow--prev { left: 4px; }
.feed-int-arrow--next { right: 4px; }
.feed-int-arrow.slick-disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* fi-slide padding */
.fi-slide { box-sizing: border-box; }

/* View All button */
.feed-interstitial__viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 16px 0;
    padding: 9px 16px;
    background: #f0f2f5;
    color: #0866ff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s;
}
.feed-interstitial__viewall:hover { background: #e4e6ea; }

/* Individual card */
.feed-int-card {
    width: 100%;
    display: flex; flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e4e6ea;
    text-decoration: none;
    background: #fff;
    transition: box-shadow 0.15s, transform 0.15s;
}
.feed-int-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    transform: translateY(-2px);
}

.feed-int-card__img-wrap {
    width: 100%; height: 100px; overflow: hidden; position: relative;
    background: #f0f2f5;
}
.feed-int-card__img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.feed-int-card__initial {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; font-weight: 800; color: #fff;
}

.feed-int-card__info {
    padding: 8px 10px 10px;
    flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.feed-int-card__name {
    font-size: 0.8rem; font-weight: 700; color: #1c1e21;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.3;
}
.feed-int-card__stars {
    font-size: 0.72rem; color: #f59e0b;
    display: flex; align-items: center; gap: 2px; margin-top: 2px;
}
.feed-int-card__star-val { letter-spacing: -1px; }
.feed-int-card__reviews  { color: #8a8d91; font-size: 0.7rem; }
.feed-int-card__price    { font-size: 0.78rem; font-weight: 700; color: #1bc95f; }
.feed-int-card__views    { font-size: 0.7rem; color: #8a8d91; }

/* Marketplace cards same 1/3 width */

/* ── Report modal & Appeal popup ──────────────────────────────────────── */
.sr-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
    align-items: center; justify-content: center;
}
.sr-modal-overlay.flex { display: flex; }
.sr-modal-box {
    background: #fff; border-radius: 18px; width: 100%; max-width: 440px;
    margin: 16px; padding: 28px 28px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.22);
    animation: sr-pop .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sr-pop { from { transform: scale(.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sr-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sr-modal-title  { font-size: 1.05rem; font-weight: 700; color: #1c1e21; }
.sr-modal-close  { background: none; border: none; cursor: pointer; font-size: 1rem; color: #65676b; padding: 2px 6px; border-radius: 6px; }
.sr-modal-close:hover { background: #f0f2f5; color: #1c1e21; }
.sr-modal-desc   { font-size: 0.82rem; color: #65676b; margin-bottom: 16px; }

.sr-type-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sr-type-btn  {
    display: flex; align-items: center; gap: 12px;
    background: #f0f2f5; border: 2px solid transparent; border-radius: 10px;
    padding: 10px 14px; cursor: pointer; text-align: left;
    transition: background .12s, border-color .12s;
}
.sr-type-btn:hover { background: #e4e6ea; }
.sr-type-btn.selected { background: #e7f0ff; border-color: #0866ff; }
.sr-type-icon  {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #e4e6ea; color: #65676b; transition: background .12s, color .12s;
}
.sr-type-icon svg { width: 18px; height: 18px; }
.sr-type-btn:hover .sr-type-icon { background: #d0d3d9; color: #1c1e21; }
.sr-type-btn.selected .sr-type-icon { background: #d0e4ff; color: #0866ff; }
.sr-type-label { font-size: 0.875rem; font-weight: 500; color: #1c1e21; flex: 1; }
.sr-type-check { color: #0866ff; opacity: 0; transition: opacity .12s; display: flex; align-items: center; }
.sr-type-btn.selected .sr-type-check { opacity: 1; }

.sr-details-wrap { margin-bottom: 14px; }
.sr-details-input {
    width: 100%; border: 1px solid #ccd0d5; border-radius: 10px;
    padding: 10px 12px; font-size: 0.875rem; resize: vertical;
    font-family: inherit; color: #1c1e21; outline: none;
    transition: border-color .15s;
}
.sr-details-input:focus { border-color: #0866ff; }

.sr-modal-footer { display: flex; gap: 10px; justify-content: flex-end; }
.sr-btn-cancel  { background: none; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.875rem; color: #65676b; font-weight: 600; }
.sr-btn-cancel:hover { background: #f0f2f5; }
.sr-btn-submit  {
    background: #0866ff; color: #fff; border: none; padding: 8px 18px;
    border-radius: 8px; cursor: pointer; font-size: 0.875rem; font-weight: 600;
    transition: background .15s; min-width: 130px;
}
.sr-btn-submit:hover:not(:disabled) { background: #0757e0; }
.sr-btn-submit:disabled { opacity: .55; cursor: not-allowed; }

.sr-modal-msg   { margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-size: 0.82rem; font-weight: 500; }
.sr-msg-ok      { background: #e7f8ee; color: #1a7f3c; }
.sr-msg-error   { background: #fff0f0; color: #c0392b; }

/* ── Report trigger button (on cards / comments) ─────────────────────── */
.social-report-btn {
    background: none; border: none; cursor: pointer;
    color: #65676b; display: flex; align-items: center; gap: 8px;
    transition: color .12s; width: 100%; text-align: left;
}
/* When standalone (not inside a dropdown item) */
.social-report-btn:not(.fb-comment-more-item):not(.post-menu-item) { font-size: 0.875rem; }
.social-report-btn:hover { color: #ea580c; background: #fff7ed; }
/* When inside comment more dropdown */
.fb-comment-more-item.social-report-btn:hover { background: #fff0f0; color: #e53935; }

/* ── Appeal popup ─────────────────────────────────────────────────────── */
.sr-appeal-box    { text-align: center; max-width: 480px; }
.sr-appeal-icon   { margin-bottom: 8px; display: flex; justify-content: center; color: #c0392b; }
.sr-appeal-icon svg { width: 48px; height: 48px; }
.sr-appeal-title  { font-size: 1.1rem; font-weight: 700; color: #c0392b; margin-bottom: 6px; }
.sr-appeal-reason { font-size: 0.82rem; color: #65676b; margin-bottom: 4px; }
.sr-appeal-sub    { font-size: 0.8rem; color: #8a8d91; margin-bottom: 18px; }
.sr-appeal-status-wrap { margin-bottom: 16px; }
.sr-appeal-status { padding: 10px 14px; border-radius: 10px; font-size: 0.84rem; font-weight: 500; }
.sr-appeal-status-pending  { background: #fff8e1; color: #8a6300; }
.sr-appeal-status-rejected { background: #fff0f0; color: #c0392b; }
.sr-appeal-form-label  { font-size: 0.82rem; color: #1c1e21; font-weight: 600; margin-bottom: 8px; text-align: left; }
.sr-appeal-img-row     { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 12px 0; }
.sr-appeal-img-label   { font-size: 0.8rem; color: #65676b; font-weight: 500; }
.sr-appeal-file-input  { font-size: 0.8rem; }
.sr-appeal-submit-btn  { width: 100%; margin-top: 6px; padding: 10px; border-radius: 10px; font-size: 0.9rem; }
.sr-appeal-dismiss     { background: none; border: none; color: #65676b; font-size: 0.82rem; cursor: pointer; margin-top: 14px; }
.sr-appeal-dismiss:hover { text-decoration: underline; }


/* =============================================================
   SOCIAL POST DETAIL PAGE (Job & Marketplace /social/job/{id})
   ============================================================= */
.spd-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px 48px;
}
.spd-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.875rem; font-weight: 500; color: #65676b;
    text-decoration: none; margin-bottom: 18px;
    transition: color .15s;
}
.spd-back:hover { color: #0866ff; }
.spd-back svg { flex-shrink: 0; }

/* Two-column grid */
.spd-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 860px) {
    .spd-grid { grid-template-columns: 1fr; }
    .spd-comments-panel { position: static !important; height: auto !important; max-height: 600px; }
}

/* Post card */
.spd-card {
    background: #fff; border-radius: 14px;
    border: 1px solid #e4e6eb;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    overflow: visible;
}
.spd-author-row {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid #f0f2f5;
}
.spd-author-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.05rem; color: #fff; flex-shrink: 0;
}
.spd-author-info { flex: 1; min-width: 0; }
.spd-author-name { font-weight: 700; font-size: 0.97rem; color: #1c1e21; }
.spd-author-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.spd-cat-badge {
    font-size: 0.72rem; font-weight: 600; color: #65676b;
    background: #f0f2f5; border-radius: 20px; padding: 2px 8px;
}
.spd-time { font-size: 0.75rem; color: #8a8d91; }
.spd-menu { position: relative; flex-shrink: 0; }

/* Image area (marketplace) */
.spd-images {
    background: #f0f2f5;
    border-bottom: 1px solid #f0f2f5;
    max-height: 420px; overflow: hidden;
    border-radius: 0;
}
.spd-images .mkt-slider-img-detail { width: 100%; height: 380px; object-fit: contain; background: #f8f9fa; }

/* Post body */
.spd-body { padding: 18px 18px 16px; }
.spd-title {
    font-size: 1.25rem; font-weight: 800; color: #1c1e21;
    line-height: 1.3; margin-bottom: 6px;
}
.spd-price {
    font-size: 1.15rem; font-weight: 700; color: #16a34a;
    margin-bottom: 10px;
}
.spd-desc {
    font-size: 0.9rem; color: #3c3c3c; line-height: 1.7;
    white-space: pre-line; margin-bottom: 14px;
}
.spd-contact-box {
    display: flex; align-items: flex-start; gap: 10px;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
    padding: 11px 14px; font-size: 0.875rem; color: #166534; margin-bottom: 14px;
}
.spd-contact-box svg { flex-shrink: 0; color: #16a34a; margin-top: 1px; }
.spd-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.spd-tag {
    font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 20px;
    background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
}
.spd-tag-green { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.spd-stats-row {
    display: flex; align-items: center; gap: 16px;
    font-size: 0.8rem; color: #8a8d91;
    padding: 8px 18px; border-top: 1px solid #f0f2f5;
}
/* Action bar */
.spd-actions {
    display: flex; align-items: center; gap: 2px;
    padding: 6px 10px; border-top: 1px solid #f0f2f5;
}
.spd-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px; border: none; background: none;
    font-size: 0.875rem; font-weight: 600; color: #65676b;
    cursor: pointer; transition: background .15s, color .15s; flex: 1;
    justify-content: center;
}
.spd-action-btn:hover { background: #f0f2f5; }
.spd-action-btn.liked { color: #e03131; }
.spd-action-btn.saved { color: #1d4ed8; background: #eff6ff; }
.spd-action-btn.favorited { color: #b45309; background: #fffbeb; }
.spd-action-divider { width: 1px; height: 22px; background: #e4e6eb; flex-shrink: 0; margin: 0 2px; }

/* Contact seller button on detail */
.spd-contact-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0 18px 16px; padding: 10px 20px; border-radius: 10px;
    background: #0866ff; color: #fff; font-weight: 700; font-size: 0.9rem;
    border: none; cursor: pointer; transition: background .15s; width: calc(100% - 36px);
}
.spd-contact-btn:hover { background: #0757d4; }

/* Right: sticky comments panel */
.spd-comments-panel {
    position: sticky;
    top: 70px;
    height: calc(100vh - 88px);
    display: flex; flex-direction: column;
    background: #fff; border-radius: 14px;
    border: 1px solid #e4e6eb;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    overflow: hidden;
}
.spd-comments-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f0f2f5;
    font-weight: 700; font-size: 0.95rem; color: #1c1e21;
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
}
.spd-comments-count { color: #65676b; font-weight: 400; font-size: 0.82rem; }
.spd-comments-list {
    flex: 1; overflow-y: auto; padding: 10px 12px 6px;
}
.spd-comments-list::-webkit-scrollbar { width: 4px; }
.spd-comments-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.spd-no-comments {
    display: flex; align-items: center; justify-content: center;
    height: 100%; text-align: center; color: #8a8d91; font-size: 0.875rem; padding: 24px;
}
.spd-load-more-sentinel { height: 1px; width: 100%; }
.spd-load-more-wrap { text-align: center; padding: 6px 0; }
.spd-load-more-btn {
    font-size: 0.82rem; font-weight: 600; color: #0866ff;
    background: none; border: none; cursor: pointer; padding: 4px 8px;
}
.spd-load-more-btn:hover { text-decoration: underline; }

/* Comment input (pinned bottom) */
.spd-login-prompt {
    text-align: center; font-size: 0.875rem; color: #8a8d91;
    padding: 12px 16px; border-top: 1px solid #f0f2f5; flex-shrink: 0;
}
.spd-login-prompt a { color: #0866ff; font-weight: 600; }

/* Inline reply form for spd detail pages */
.spd-inline-reply {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 6px; padding-left: 46px; width: 100%; box-sizing: border-box;
}
.spd-inline-reply-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 700; color: #fff; margin-top: 2px;
}
.spd-inline-reply-inner {
    flex: 1; background: #f0f2f5; border-radius: 18px; padding: 6px 12px;
}
.spd-inline-reply-inner input {
    width: 100%; background: none; border: none; outline: none;
    font-size: 0.82rem; color: #1c1e21;
}
.spd-inline-reply-inner input::placeholder { color: #8a8d91; }
.spd-inline-reply-actions { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.spd-inline-reply-submit {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: #0866ff; padding: 2px; display: flex; align-items: center;
    opacity: 0.5; transition: opacity 0.15s;
}
.spd-inline-reply-submit:not([disabled]) { opacity: 1; }
.spd-inline-reply-cancel {
    background: none; border: none; cursor: pointer;
    font-size: 0.75rem; color: #65676b; padding: 2px 4px;
}
.spd-inline-reply-cancel:hover { color: #050505; }

/* ── Inline comment error message ── */
.social-comment-error {
  color: #d32f2f;
  font-size: 12px;
  padding: 4px 8px;
  margin-top: 4px;
  background: #ffebee;
  border-radius: 4px;
  animation: fadeIn .2s ease;
}

/* Override global textarea height for comment inputs */
.spd-auto-textarea, .scu-reply-ta { overflow-y: hidden; resize: none; min-height: 36px; max-height: 200px; }