/* ======== GLOBAL RESETS & VARIABLES ======== */
:root {
    --primary-color: #1877f2; /* Facebook Blue-like */
    --primary-color-light: #e7f3ff;
    --primary-color-rgb: 24, 119, 242;
    --secondary-color: #42b72a; /* Green for success */
    --accent-color: #f5a623; /* Orange/Yellow for attention */
    --danger-color: #dc3545; /* Red for errors/delete */
    --warning-color: #ffc107; /* Yellow for warnings */

    --background-color-body: #f0f2f5;
    --content-background-color: #ffffff;
    --content-background-alt: #f8f9fa; /* For slight contrast within cards */

    --text-color-primary: #050505;
    --text-color-secondary: #65676b;
    --text-color-placeholder: #8a8d91;
    --text-color-link: #1877f2;
    --text-color-light: #ffffff;

    --border-color-soft: #e4e6eb; /* Softer than ced0d4 */
    --border-color-medium: #ced0d4;
    --border-color-strong: #bcc0c4;

    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-size-base: 16px;
    --font-size-small: 0.875rem;    /* 14px */
    --font-size-xsmall: 0.75rem;   /* 12px */
    --font-size-medium: 1rem;      /* 16px */
    --font-size-large: 1.125rem;   /* 18px */
    --font-size-xl: 1.5rem;        /* 24px */
    --font-size-xxl: 2rem;       /* 32px */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;

    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);

    --header-height: 60px;
    --footer-height: 70px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--font-size-base); scroll-behavior: smooth; }
body {
    font-family: var(--font-family-sans); line-height: 1.6; color: var(--text-color-primary);
    background-color: var(--background-color-body); display: flex; flex-direction: column;
    min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.site-main-content-wrapper { flex-grow: 1; padding-top: var(--header-height); padding-bottom: var(--spacing-lg); }
.container { width: 90%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }

.nice-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.nice-scrollbar::-webkit-scrollbar-track { background: var(--background-color-light); border-radius: 4px; }
.nice-scrollbar::-webkit-scrollbar-thumb { background: var(--border-color-medium); border-radius: 4px; }
.nice-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--text-color-secondary); }

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 { margin-bottom: var(--spacing-md); line-height: 1.3; color: var(--text-color-primary); font-weight: 600; }
h1 { font-size: var(--font-size-xxl); } h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-large); } h4 { font-size: var(--font-size-medium); font-weight: 500; }
p { margin-bottom: var(--spacing-md); }
a { color: var(--text-color-link); text-decoration: none; transition: color 0.2s ease-in-out; }
a:hover { text-decoration: underline; filter: brightness(0.85); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style-position: inside; margin-bottom: var(--spacing-md); }
hr { border: 0; border-top: 1px solid var(--border-color-soft); margin: var(--spacing-md) 0; }
code, .referral-code-display { font-family: monospace; background-color: var(--background-color-light); padding: 0.2em 0.4em; border-radius: var(--border-radius-sm); font-size: 0.9em; }
pre { background-color: var(--background-color-light); padding: var(--spacing-md); border-radius: var(--border-radius-md); overflow-x: auto; font-size: var(--font-size-small); }

/* HEADER & NAVIGATION */
.site-header { background-color: var(--content-background-color); border-bottom: 1px solid var(--border-color-soft); padding: 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; height: var(--header-height); box-shadow: var(--shadow-sm); }
.site-header.scrolled { box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.main-navigation { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.nav-logo a.site-title-link { font-size: var(--font-size-large); font-weight: 700; color: var(--primary-color); text-decoration: none; }
.nav-logo a.site-title-link:hover { text-decoration: none; filter: brightness(0.9); }
.mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1002; width: 40px; height: 40px; position: relative; margin: 0; }
.mobile-menu-toggle span { display: block; width: 20px; height: 2px; background-color: var(--text-color-primary); border-radius: 1px; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); position: absolute; left: 50%; transform: translateX(-50%); }
.mobile-menu-toggle span:nth-child(1) { top: 10px; } .mobile-menu-toggle span:nth-child(2) { top: 18px; } .mobile-menu-toggle span:nth-child(3) { top: 26px; }
.mobile-menu-toggle.is-active span:nth-child(1) { transform: translateX(-50%) translateY(8px) rotate(45deg); }
.mobile-menu-toggle.is-active span:nth-child(2) { opacity: 0; transform: translateX(-70%); }
.mobile-menu-toggle.is-active span:nth-child(3) { transform: translateX(-50%) translateY(-8px) rotate(-45deg); }
.nav-links-container { display: flex; align-items: center; gap: var(--spacing-md); }
.nav-links-container a, .dropbtn_nav { color: var(--text-color-secondary); padding: var(--spacing-sm) var(--spacing-md); text-decoration: none; border-radius: var(--border-radius-md); transition: background-color 0.2s ease, color 0.2s ease; font-weight: 500; position: relative; }
.nav-links-container a::after, .dropbtn_nav::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: var(--primary-color); transition: width 0.3s ease-in-out; }
.nav-links-container a:hover::after, .dropbtn_nav:hover::after, .nav-links-container a.active::after { width: 60%; }
.nav-links-container a:hover, .dropbtn_nav:hover { background-color: transparent; color: var(--primary-color); }
.nav-links-container a.active { background-color: transparent; color: var(--primary-color); font-weight: 600; }
.dropdown_nav { position: relative; display: inline-block; }
.dropbtn_nav { background-color: transparent; border: none; cursor: pointer; font-family: inherit; font-size: inherit; }
.dropbtn_nav i { margin-left: var(--spacing-xs); font-size: 0.8em; }
.dropdown-content_nav { display: none; position: absolute; background-color: var(--content-background-color); min-width: 200px; box-shadow: var(--shadow-md); z-index: 1001; border-radius: var(--border-radius-md); overflow: hidden; border: 1px solid var(--border-color-soft); margin-top: var(--spacing-sm); animation: fadeInDropdown 0.2s ease-out forwards; transform-origin: top center; opacity: 0; }
@keyframes fadeInDropdown { from { opacity: 0; transform: translateY(-10px) scaleY(0.95); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
.dropdown-content_nav a { color: var(--text-color-primary); padding: var(--spacing-sm) var(--spacing-md); text-decoration: none; display: block; width: 100%; text-align: left; transition: background-color 0.2s ease, padding-left 0.2s ease; }
.dropdown-content_nav a:hover { background-color: var(--primary-color-light); color: var(--primary-color); padding-left: calc(var(--spacing-md) + 5px); }
.dropdown_nav:hover .dropdown-content_nav { display: block; }
.user-nav-button { display: flex; align-items: center; gap: var(--spacing-sm); }
.nav-profile-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color-soft); }
.nav-profile-icon-placeholder { font-size: 1.5em; color: var(--text-color-secondary); }
.user-dropdown-menu { right: 0; left: auto; }

/* CARDS & POSTS */
.card { background-color: var(--content-background-color); border: 1px solid var(--border-color-soft); border-radius: var(--border-radius-lg); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); box-shadow: var(--shadow-sm); }
.card-section { padding: var(--spacing-md); margin-top: var(--spacing-md); border: 1px solid var(--border-color-soft); border-radius: var(--border-radius-md); background-color: var(--content-background-alt); }
.card-section:first-child { margin-top: 0; }
.post.card { padding: var(--spacing-md); }
.post.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.post-header { margin-bottom: var(--spacing-md); }
.post-header h1 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); }
.post-header h3 a { color: var(--text-color-primary); font-size: var(--font-size-large); transition: color 0.2s ease; }
.post-header h3 a:hover { color: var(--primary-color); }
.post-meta { font-size: var(--font-size-small); color: var(--text-color-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-md); }
.author-logo-small { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-right: var(--spacing-sm); border: 1px solid var(--border-color-soft); }
.default-logo-placeholder { width: 24px; height: 24px; border-radius: 50%; background-color: var(--primary-color); color: var(--text-color-light); display: inline-flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8em; margin-right: var(--spacing-sm); }
.post-images-display-area-index { margin-bottom: var(--spacing-md); }
.post-featured-image-index img.post-image { max-height: 350px; border: 1px solid var(--border-color-soft); object-fit: cover; width:100%; border-radius: var(--border-radius-md); }
.post-additional-thumbnails-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
.post-thumbnail-item-index { border: 1px solid var(--border-color-soft); border-radius: var(--border-radius-sm); overflow: hidden; aspect-ratio: 1 / 1; }
.post-thumbnail-item-index img.post-thumbnail-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease-in-out; }
.post-thumbnail-item-index img.post-thumbnail-image:hover { transform: scale(1.05); }
.post-image-container { margin-bottom: var(--spacing-md); overflow: hidden; border-radius: var(--border-radius-md); } /* General image container */
.post-image { border-radius: var(--border-radius-md); max-height: 400px; width: 100%; object-fit: cover; }
.post.card:hover .post-featured-image-index img.post-image { transform: scale(1.02); } /* Slight zoom on main image on hover */
.post-content { margin-bottom: var(--spacing-md); word-wrap: break-word; }
.post-link a { word-break: break-all; }
.badge, .otc-tag-meta, .user-profile-posts-grid .otc-tag { display: inline-block; padding: 0.25em 0.6em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: var(--border-radius-sm); }
.badge-otc, .otc-tag-meta { background-color: var(--secondary-color); color: white; }
.post-status-indicator { font-weight: bold; padding: 0.2em 0.5em; border-radius: var(--border-radius-sm); font-size: 0.9em; }
.status-pending { background-color: var(--warning-color); color: #533f03; }
.status-approved { background-color: var(--secondary-color); color: var(--text-color-light); }
.status-rejected { background-color: var(--danger-color); color: var(--text-color-light); }
.post-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--border-color-soft); }

/* STAR RATING */
.star-rating-area { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); margin-bottom: var(--spacing-sm); }
.star-rating-area h4 { font-size: var(--font-size-medium); margin-bottom: var(--spacing-sm); }
.current-rating-display { display: flex; align-items: center; font-size: var(--font-size-medium); color: var(--text-color-secondary); }
.current-rating-display .fas.fa-star, .current-rating-display .fas.fa-star-half-alt { color: var(--accent-color); margin-right: 2px; }
.current-rating-display .far.fa-star { color: var(--border-color-medium); margin-right: 2px; }
.current-rating-display .rating-text { font-size: var(--font-size-small); color: var(--text-color-secondary); margin-left: var(--spacing-sm); }
.user-rating-input { display: flex; align-items: center; cursor: default; }
.user-rating-input .rating-star { font-size: 1.6em; color: var(--border-color-medium); margin-right: 3px; cursor: pointer; transition: color 0.2s ease, transform 0.1s ease; }
.user-rating-input .rating-star:hover, .user-rating-input .rating-star.hovered { color: var(--primary-color); transform: scale(1.15); }
.user-rating-input .rating-star.user-has-rated.fas, .user-rating-input .rating-star.current-user-exact-rating.fas { color: var(--primary-color); transform: scale(1.05); }
.your-rating-text { font-size: var(--font-size-small); color: var(--text-color-secondary); margin-top: var(--spacing-xs); }
.post-footer .star-rating-area { flex-grow: 1; margin-bottom: var(--spacing-sm); }
.post-footer .post-actions { margin-left: auto; flex-shrink: 0; padding-top: var(--spacing-sm); }

/* FORMS & BUTTONS */
.form-section, .form-container { max-width: 600px; margin: var(--spacing-lg) auto; }
.styled-form .form-group { margin-bottom: var(--spacing-lg); }
.styled-form label { display: block; margin-bottom: var(--spacing-sm); font-weight: 500; color: var(--text-color-secondary); }
.styled-form input[type="text"], .styled-form input[type="email"], .styled-form input[type="password"],
.styled-form input[type="url"], .styled-form input[type="number"], .styled-form textarea, .styled-form select {
    width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--border-color-medium);
    border-radius: var(--border-radius-md); font-size: var(--font-size-medium); line-height: 1.5;
    background-color: var(--content-background-color); color: var(--text-color-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.styled-form input::placeholder, .styled-form textarea::placeholder { color: var(--text-color-placeholder); opacity: 0.7; }
.styled-form input:focus, .styled-form textarea:focus, .styled-form select:focus {
    outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}
.styled-form input[type="file"] { border: 1px solid var(--border-color-medium); padding: var(--spacing-sm); border-radius: var(--border-radius-md); cursor: pointer; display: block; width: 100%; }
.styled-form .checkbox-label { display: flex; align-items: center; gap: var(--spacing-sm); font-weight: normal; }
.styled-form .checkbox-label input[type="checkbox"] { width: auto; margin-right: var(--spacing-sm); }
.styled-form .submit-group { margin-top: var(--spacing-lg); }
.form-text.text-muted { font-size: var(--font-size-small); color: var(--text-color-secondary); display: block; margin-top: var(--spacing-xs); }

.button, button, input[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg); background-color: var(--primary-color);
    color: var(--text-color-light); border: none; border-radius: var(--border-radius-md);
    font-size: var(--font-size-medium); font-weight: 500; text-align: center; text-decoration: none;
    cursor: pointer; box-shadow: var(--shadow-xs);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
}
.button:hover, button:hover, input[type="submit"]:hover {
    background-color: hsl(from var(--primary-color) h s calc(l - 10%)); box-shadow: var(--shadow-sm);
    text-decoration: none; color: var(--text-color-light); transform: translateY(-1px);
}
.button:active, button:active, input[type="submit"]:active { transform: translateY(0px); box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }
.button-primary {}
.button-secondary { background-color: var(--text-color-secondary); }
.button-secondary:hover { background-color: hsl(from var(--text-color-secondary) h s calc(l - 10%)); }
.button-success { background-color: var(--secondary-color); }
.button-success:hover { background-color: hsl(from var(--secondary-color) h s calc(l - 10%)); }
.button-danger { background-color: var(--danger-color); }
.button-danger:hover { background-color: hsl(from var(--danger-color) h s calc(l - 10%)); }
.button-small { padding: var(--spacing-xs) var(--spacing-md); font-size: var(--font-size-small); }
.button-extra-small { padding: calc(var(--spacing-xs) / 2) var(--spacing-sm); font-size: calc(var(--font-size-small) * 0.9); }
.button-icon { background: none; border: none; color: var(--text-color-secondary); font-size: 1.2em; padding: var(--spacing-sm); cursor: pointer; }
.button-icon:hover { color: var(--primary-color); }
.button-disabled, .button:disabled, button:disabled { background-color: #ccc !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; }

/* AUTH FORMS */
body.page-login, body.page-register { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - var(--header-height) - var(--footer-height)); padding-top: var(--header-height); padding-bottom: var(--footer-height); }
.form-container.auth-form { background-color: var(--content-background-color); padding: var(--spacing-xl); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); width: 100%; max-width: 480px; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); text-align: left; }
.auth-form h2 { text-align: center; margin-bottom: var(--spacing-lg); font-size: var(--font-size-xl); color: var(--text-color-primary); }
.auth-form .form-group { margin-bottom: var(--spacing-lg); }
.auth-form label { display: block; margin-bottom: var(--spacing-sm); font-weight: 500; color: var(--text-color-secondary); }
.auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="text"] { width: 100%; padding: var(--spacing-md); border: 1px solid var(--border-color-medium); border-radius: var(--border-radius-md); font-size: var(--font-size-medium); line-height: 1.5; background-color: var(--content-background-color); color: var(--text-color-primary); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.auth-form input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.25); }
.auth-form .button-primary { width: 100%; padding: var(--spacing-md); font-size: var(--font-size-medium); font-weight: 600; }
.auth-form-switch, .form-alternative-action { text-align: center; margin-top: var(--spacing-lg); font-size: var(--font-size-small); color: var(--text-color-secondary); }
.auth-form-switch a, .form-alternative-action a { color: var(--primary-color); font-weight: 500; }
.auth-form-switch a:hover, .form-alternative-action a:hover { text-decoration: underline; }
.auth-form .form-messages { margin-bottom: var(--spacing-lg); }
.auth-form .form-messages .message, .auth-form .form-messages > p { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-md); font-size: var(--font-size-small); }

/* MESSAGES & NOTIFICATIONS */
.message, .flash-message, .form-messages > p, .page-messages > p { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); margin-bottom: var(--spacing-lg); border-radius: var(--border-radius-md); border: 1px solid transparent; font-size: var(--font-size-small); }
.message i, .flash-message i { font-size: 1.2em; }
.message.info, .flash-message.info { background-color: #e7f3ff; border-color: #b8daff; color: #004085; }
.message.success, .flash-message.success { background-color: #d4edda; border-color: #c3e6cb; color: #155724; }
.message.warning, .flash-message.warning { background-color: #fff3cd; border-color: #ffeeba; color: #856404; }
.message.error, .flash-message.error { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.form-messages .message:last-child, .form-messages > p:last-child, .page-messages > p:last-child { margin-bottom: 0; }
.form-messages { margin-bottom: var(--spacing-lg); }

/* FOOTER */
.site-footer { background-color: var(--content-background-color); color: var(--text-color-secondary); padding: var(--spacing-lg) 0; text-align: center; font-size: var(--font-size-small); border-top: 1px solid var(--border-color-soft); margin-top: auto; }
.site-footer p { margin-bottom: var(--spacing-xs); }
.site-footer a { color: var(--primary-color); font-weight: 500; }
.footer-contact-link { margin: 0 var(--spacing-sm); }

/* IMAGE MODAL */
.site-image-modal { display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.85); backdrop-filter: blur(4px); }
.image-modal-content-wrapper { position: relative; margin: auto; display: flex; align-items: center; justify-content: center; width: 90%; max-width: 900px; height: 90%; top: 50%; transform: translateY(-50%); animation: zoomInModal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; }
@keyframes zoomInModal { from { opacity: 0; transform: translateY(-50%) scale(0.9); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
.image-modal-target { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--border-radius-md); }
.image-modal-caption-text { text-align: center; color: #e0e0e0; padding: var(--spacing-md) 0; position: absolute; bottom: var(--spacing-sm); width: 100%; left: 0; font-size: var(--font-size-small); }
.image-modal-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 2.5rem; font-weight: bold; background: none; border: none; cursor: pointer; padding: 0; line-height: 1; transition: transform 0.2s ease, color 0.2s ease; z-index: 1051; }
.image-modal-close:hover, .image-modal-close:focus { color: #ccc; text-decoration: none; transform: scale(1.15) rotate(90deg); }
.clickable-image { cursor: pointer; }

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 300px হল প্রতিটি পোস্টের ন্যূনতম প্রস্থ */
    gap: 20px; /* পোস্টগুলোর মধ্যে ফাঁক */
}
@media (min-width: 768px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .posts-grid { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } }

/* PAGINATION */
.pagination { display: flex; justify-content: center; margin-top: var(--spacing-lg); }
.pagination-list { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--spacing-xs); }
.pagination .page-item .page-link { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--border-color-soft); border-radius: var(--border-radius-sm); color: var(--primary-color); background-color: var(--content-background-color); text-decoration: none; transition: background-color 0.2s, color 0.2s, transform 0.1s ease-out, box-shadow 0.2s ease; }
.pagination .page-item .page-link:hover { background-color: var(--primary-color-light); border-color: var(--primary-color); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
.pagination .page-item.active .page-link { background-color: var(--primary-color); color: var(--text-color-light); border-color: var(--primary-color); font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.pagination .page-item.disabled .page-link { color: var(--text-color-placeholder); background-color: var(--background-color-light); border-color: var(--border-color-soft); cursor: not-allowed; transform: none; box-shadow: none; }

/* FILTER/SORT CONTROLS */
.page-header-controls-wrapper { margin-bottom: var(--spacing-lg); padding: var(--spacing-md); }
.filters-and-sort-controls { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); justify-content: space-between; align-items: center; }
.filter-controls { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }
.filter-controls span { font-weight: 500; margin-right: var(--spacing-xs); align-self: center; }
.filter-controls .sort-link, .filter-controls .type-filter-link { padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--border-radius-sm); text-decoration: none; border: 1px solid var(--border-color-soft); color: var(--primary-color); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.filter-controls .sort-link:hover, .filter-controls .type-filter-link:hover { background-color: var(--primary-color-light); }
.filter-controls .sort-link.active, .filter-controls .type-filter-link.active { background-color: var(--primary-color); color: var(--text-color-light); border-color: var(--primary-color); font-weight: 600; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }

/* ======== MESSAGES PAGE ======== */
.message-layout { display: flex; gap: var(--spacing-lg); background-color: var(--content-background-color); border-radius: var(--border-radius-lg); padding: var(--spacing-md); box-shadow: var(--shadow-sm); min-height: calc(100vh - var(--header-height) - var(--footer-height) - 80px); }
.conversations-panel { flex: 0 0 300px; border-right: 1px solid var(--border-color-soft); padding-right: var(--spacing-md); overflow-y: auto; max-height: calc(100vh - var(--header-height) - var(--footer-height) - 100px); }
.conversations-panel h3 { margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--border-color-soft); }
.conversations-list ul { list-style: none; padding: 0; }
.conversations-list li { margin-bottom: var(--spacing-xs); border-radius: var(--border-radius-md); cursor: pointer; transition: background-color 0.15s ease; }
.conversations-list li:hover, .conversations-list li.active-conversation { background-color: var(--primary-color-light); }
.conversations-list li a.convo-link { display: block; padding: var(--spacing-sm); text-decoration: none; color: inherit; }
.convo-item { display: flex; align-items: center; }
.convo-logo-container { margin-right: var(--spacing-sm); }
.convo-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.convo-details { flex-grow: 1; overflow: hidden; }
.convo-user-name { font-weight: 500; display: block; color: var(--text-color-primary); }
.convo-last-message, .convo-time { font-size: var(--font-size-small); color: var(--text-color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.convo-last-message .fas.fa-image { margin-right: var(--spacing-xs); }
.unread-badge { background-color: var(--primary-color); color: white; border-radius: 10px; padding: 2px 6px; font-size: 0.75em; margin-left: var(--spacing-xs); font-weight: bold; }
li.unread-conversation .convo-user-name, li.unread-conversation .convo-last-message { font-weight: bold; }
.chat-panel { flex-grow: 1; display: flex; flex-direction: column; max-height: calc(100vh - var(--header-height) - var(--footer-height) - 100px); /* Desktop max-height */ }
.chat-header { padding: 12px 15px; /* Consistent padding */ margin-bottom: var(--spacing-lg); /* More space below header */ border-bottom: 1px solid var(--border-color-soft); display: flex; justify-content: space-between; align-items: center; }
.chat-header h3 { margin-bottom: 0; }
.chat-messages { flex-grow: 1; overflow-y: auto; padding: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.message-bubble { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-lg); margin-bottom: var(--spacing-sm); max-width: 70%; word-wrap: break-word; opacity: 0; }
.message-bubble.sent { animation: slideInSentMessage 0.3s ease-out forwards; background-color: var(--primary-color); color: white; margin-left: auto; border-bottom-right-radius: var(--border-radius-xs); }
.message-bubble.received { animation: slideInReceivedMessage 0.3s ease-out forwards; background-color: var(--content-background-alt); color: var(--text-color-primary); margin-right: auto; border-bottom-left-radius: var(--border-radius-xs); }
@keyframes slideInSentMessage { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInReceivedMessage { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
.message-bubble p { margin-bottom: var(--spacing-xs); }
.message-attachment-image img.clickable-image { max-width: 200px; max-height: 200px; border-radius: var(--border-radius-md); margin-top: var(--spacing-sm); cursor: pointer; border: 1px solid var(--border-color-soft); display: block; }
.message-bubble.sent .message-attachment-image img.clickable-image { border-color: rgba(255,255,255,0.2); }
.message-bubble .message-time { font-size: var(--font-size-xsmall); color: var(--text-color-secondary); display: block; text-align: right; margin-top: var(--spacing-xs); }
.message-bubble.sent .message-time { color: #e0e0e0; }
.read-receipt { margin-left: var(--spacing-xs); font-style: italic; }
.read-receipt .fa-check-double { color: #4FC3F7; } .read-receipt .fa-check { color: inherit; }

/* MODIFIED & NEW STYLES FOR MESSAGE INPUT AREA */
.send-message-form {
    display: flex;
    flex-direction: column; /* Stacks input bar, filename, and send button */
    gap: var(--spacing-sm);
    margin-top: auto; /* Pushes form to the bottom of chat-panel */
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color-soft);
}

.input-bar-main { /* Wrapper for attachment icon and textarea */
    display: flex;
    align-items: flex-end; /* Aligns items to the bottom, good for multi-line textarea */
    border: 1px solid var(--border-color-medium);
    border-radius: 25px; /* Rounded bar */
    padding: 5px var(--spacing-sm);
    background-color: var(--content-background-alt);
    width: 100%;
}
.input-bar-main:focus-within { /* Style when textarea inside is focused */
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}

.message-input-controls { /* Container for attachment button */
    flex-shrink: 0; /* Prevents shrinking */
    display: flex; /* Ensures button is aligned correctly */
    align-items: center; /* Aligns icon vertically */
}

.message-input-controls .attachment-button { /* The attachment button */
    background: none;
    border: none;
    color: var(--text-color-secondary);
    font-size: 1.3em;
    padding: 8px; /* For easier touch */
    margin-right: var(--spacing-xs);
    cursor: pointer;
    display: inline-flex; /* Align icon inside */
    align-items: center;
    justify-content: center;
}
.message-input-controls .attachment-button:hover {
    color: var(--primary-color);
}

.send-message-form .message-input-group { /* Container for textarea */
    flex-grow: 1; /* Takes up remaining space in the bar */
    margin-bottom: 0; /* Override default form-group margin */
}

.send-message-form textarea#form_message_content_textarea {
    width: 100%;
    resize: none;
    min-height: 24px; /* Start with single line height */
    max-height: 120px; /* Max height before scrolling */
    line-height: 1.4;
    padding: 8px var(--spacing-sm); /* Internal padding */
    border: none; /* Border is on .input-bar-main */
    background-color: transparent; /* Use parent's background */
    font-size: var(--font-size-medium);
    outline: none; /* Outline is handled by .input-bar-main:focus-within */
    /* height: auto; will be handled by JS */
    display: block; /* Ensure it behaves as a block for height adjustments */
}

.attachment-filename { /* Display for name of attached file */
    font-size: var(--font-size-xsmall);
    color: var(--text-color-secondary);
    padding-left: var(--spacing-md);
    margin-top: 0; /* Adjust if needed, should be minimal if gap used */
    height: 1.2em;
    line-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block; /* Takes its own line */
    width: 100%; /* Ensure it spans width for text-overflow */
}

.send-message-form .submit-group { /* Container for send button */
    margin-top: 0; /* Part of the form's main flex gap */
    width: 100%; /* Make submit group full width */
}

.send-message-form .send-message-button { /* The main send button */
    width: 100%;
    padding-top: var(--spacing-sm); /* Consistent padding */
    padding-bottom: var(--spacing-sm);
    min-height: 44px; /* Good tap target size */
    font-weight: 500;
}
/* END OF MODIFIED MESSAGE INPUT STYLES */

.no-conversation-selected { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--text-color-secondary); }

/* PROFILE PAGE & USER PROFILE PAGE */
/* ... (Profile, Dashboard, Tables, etc. CSS remains good as previously established) ... */
.profile-main-layout { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); }
@media (min-width: 992px) { .profile-main-layout { grid-template-columns: minmax(320px, 1fr) 2fr; } }
.profile-info-content, .profile-info-content-public { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); }
@media (min-width: 576px) { .profile-info-content, .profile-info-content-public { flex-direction: row; align-items: flex-start; } }
.profile-logo-display-container, .profile-logo-public-container { flex-shrink: 0; margin-bottom: var(--spacing-md); }
.profile-logo-large, .profile-logo-large-public { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--content-background-color); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.profile-logo-placeholder-large, .profile-logo-placeholder-large-public { width: 120px; height: 120px; border-radius: 50%; background-color: var(--primary-color); color: var(--text-color-light); display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.profile-text-details p, .profile-text-details-public p { margin-bottom: var(--spacing-sm); }
.profile-actions-forms h4 { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); }
.styled-form-tight .form-group { margin-bottom: var(--spacing-md); }
.dashboard-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-md); }
.stat-item { background-color: var(--content-background-alt); padding: var(--spacing-md); border-radius: var(--border-radius-md); border: 1px solid var(--border-color-soft); transition: background-color 0.2s ease, transform 0.2s ease; }
.stat-item:hover { background-color: #e9ecef; transform: scale(1.02); }
.stat-item strong { display: block; margin-bottom: var(--spacing-xs); color: var(--text-color-primary); }
.stat-item.success-stat { border-left: 4px solid var(--secondary-color); }
.stat-item.pending-stat { border-left: 4px solid var(--accent-color); }
.referral-info { margin-top: var(--spacing-lg); }
.input-group-copy { display: flex; margin-top: var(--spacing-xs); }
.input-group-copy input[type="text"] { flex-grow: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; background-color: #e9ecef; cursor: default; }
.input-group-copy .copy-button { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.copy-notification { font-size: var(--font-size-small); color: var(--secondary-color); margin-top: var(--spacing-xs); }
.monthly-targets-container { margin-top: var(--spacing-lg); }
.monthly-target-info { background-color: var(--content-background-alt); padding: var(--spacing-md); border-radius: var(--border-radius-md); margin-bottom: var(--spacing-md); }
.target-description { font-size: var(--font-size-small); color: var(--text-color-secondary); }
.monthly-progress-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); }
@media (min-width: 576px) { .monthly-progress-grid { grid-template-columns: repeat(2, 1fr); } }
.progress-item label { display: block; font-size: var(--font-size-small); margin-bottom: var(--spacing-xs); }
.progress-item span { font-size: var(--font-size-small); color: var(--text-color-secondary); }
.progress-item progress { width: 100%; height: 10px; border-radius: 5px; margin-top: var(--spacing-xs); }
progress::-webkit-progress-bar { background-color: #e0e0e0; border-radius: 5px; }
progress::-webkit-progress-value { background-color: var(--secondary-color); border-radius: 5px; transition: width 0.5s ease-in-out; }
progress::-moz-progress-bar { background-color: var(--secondary-color); border-radius: 5px; transition: width 0.5s ease-in-out; }
.withdrawal-section h<h4> margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md); }
.table-responsive, .table-responsive-admin { overflow-x: auto; width: 100%; }
.styled-table, .admin-data-table { width: 100%; border-collapse: collapse; margin-top: var(--spacing-md); font-size: var(--font-size-small); }
.styled-table th, .styled-table td, .admin-data-table th, .admin-data-table td { padding: var(--spacing-sm) var(--spacing-md); text-align: left; border-bottom: 1px solid var(--border-color-soft); vertical-align: middle; }
.styled-table th, .admin-data-table th { background-color: var(--content-background-alt); font-weight: 500; color: var(--text-color-secondary); white-space: nowrap; }
.styled-table .truncate-text, .admin-data-table .truncate-text { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-badge { padding: 0.2em 0.5em; border-radius: var(--border-radius-sm); font-size: 0.9em; color: var(--text-color-light); }
.status-badge.status-pending { background-color: var(--warning-color); color: #533f03; }
.status-badge.status-approved, .status-badge.status-completed { background-color: var(--secondary-color); }
.status-badge.status-rejected, .status-badge.status-cancelled { background-color: var(--danger-color); }
.status-badge.status-active { background-color: var(--secondary-color); }
.status-badge.status-inactive { background-color: var(--text-color-secondary); }
.premium-otc-section .otc-subscription-plan { border: 1px solid var(--border-color-soft); padding: var(--spacing-md); border-radius: var(--border-radius-md); margin-top: var(--spacing-md); }
.styled-form-inline { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; }
.user-profile-posts-grid .post-preview { border: 1px solid var(--border-color-soft); padding: var(--spacing-md); border-radius: var(--border-radius-md); background: var(--content-background-color); }
.user-profile-posts-grid .post-preview-header h4 a { font-size: var(--font-size-medium); color: var(--text-color-primary); }
.user-profile-posts-grid .post-preview-image-container img { max-height: 150px; object-fit: cover; border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-sm); }
.user-profile-posts-grid .post-preview-meta { font-size: var(--font-size-small); color: var(--text-color-secondary); display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.post-preview-footer { margin-top: var(--spacing-md); text-align: right; }
.otc-specific-fields, .single-view-otc { background-color: var(--content-background-alt); }
.submission-image-container { margin-top: 10px; margin-bottom: 15px; text-align: left; }
.submission-proof-image { max-width: 300px; max-height: 300px; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; }
.submission-proof-display { background-color: #f9f9f9; border: 1px solid #eee; padding: var(--spacing-sm); border-radius: var(--border-radius-sm); max-height: 200px; overflow-y: auto; }

/* UTILITY & RESPONSIVE */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mt-1 { margin-top: var(--spacing-xs) !important; } .mt-10 { margin-top: 10px !important; } .mt-20 { margin-top: var(--spacing-lg) !important; } .mt-30 { margin-top: var(--spacing-xl) !important; }
.mb-0 { margin-bottom: 0 !important; } .text-center { text-align: center !important; }
.help-text, .small-text { font-size: var(--font-size-small); color: var(--text-color-secondary); }
.text-right { text-align: right !important; } .text-danger { color: var(--danger-color) !important; }

@media (max-width: 767.98px) {
    .container { width: 95%; padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
    .mobile-menu-toggle { display: block; }
    .nav-links-container { display: none; flex-direction: column; align-items: flex-start; position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: var(--content-background-color); box-shadow: var(--shadow-md); padding: var(--spacing-md); border-top: 1px solid var(--border-color-soft); z-index: 1001; max-height: calc(100vh - var(--header-height)); overflow-y: auto; }
    .nav-links-container.active { display: flex; animation: slideDownNav 0.3s ease-out forwards; }
    @keyframes slideDownNav { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
    .nav-links-container a, .nav-links-container .dropdown_nav { width: 100%; text-align: left; padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--border-color-soft); }
    .nav-links-container a:last-child, .nav-links-container .dropdown_nav:last-child { border-bottom: none; }
    .nav-links-container a::after, .nav-links-container .dropbtn_nav::after { display: none; }
    .nav-links-container .dropdown_nav .dropbtn_nav { width: 100%; justify-content: space-between; display: flex; padding: var(--spacing-sm) 0; }
    .dropdown-content_nav { position: static; box-shadow: none; border: none; margin-top: var(--spacing-sm); padding-left: var(--spacing-md); background-color: transparent; width: 100%; display: none; }
    .dropdown_nav.open .dropdown-content_nav { display: block; }
    .dropdown-content_nav a { padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--border-color-soft); }
    .dropdown-content_nav a:last-child { border-bottom: none; }
    .styled-table thead, .admin-data-table thead { display: none; }
    .styled-table tr, .admin-data-table tr { display: block; margin-bottom: var(--spacing-md); border: 1px solid var(--border-color-soft); border-radius: var(--border-radius-md); padding: var(--spacing-sm); box-shadow: var(--shadow-xs); }
    .styled-table td, .admin-data-table td { display: block; text-align: right; padding-left: 50% !important; position: relative; border-bottom: 1px dashed var(--border-color-soft); }
    .styled-table td:last-child, .admin-data-table td:last-child { border-bottom: none; }
    .styled-table td::before, .admin-data-table td::before { content: attr(data-label); position: absolute; left: var(--spacing-sm); width: calc(50% - var(--spacing-md)); text-align: left; font-weight: 500; color: var(--text-color-secondary); }
    .styled-table .truncate-text, .admin-data-table .truncate-text { max-width: none; white-space: normal; }
    
    /* MESSAGES PAGE MOBILE */
    .message-layout { flex-direction: column; }
    .conversations-panel { flex-basis: auto; border-right: none; border-bottom: 1px solid var(--border-color-soft); padding-right: 0; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); max-height: 300px; }
    .chat-panel {
        max-height: none; /* Allow chat panel to grow vertically */
        /* flex-grow: 1; is inherited and will make it take available space */
        /* display: flex; flex-direction: column; is inherited */
    }
    .message-bubble { max-width: 85%; }

    /* Message input form mobile adjustments (The new desktop layout is already column-based, so it's mostly fine) */
    /* .send-message-form remains flex-direction: column from desktop */
    /* .input-bar-main remains flex-direction: row, which is good for icon + textarea */
    /* .send-message-button is already 100% width */

    .site-footer { padding: var(--spacing-md) 0; }
    .button, button, input[type="submit"], .styled-form input[type="text"], .styled-form input[type="email"], .styled-form input[type="password"], .styled-form input[type="url"], .styled-form input[type="number"], .styled-form textarea, .styled-form select { padding-top: calc(var(--spacing-sm) + 2px); padding-bottom: calc(var(--spacing-sm) + 2px); min-height: 44px; }
}

/* ACCESSIBILITY & SPINNER & FONT AWESOME */
:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.3); border-radius: var(--border-radius-sm); }
.spinner-mini { display: inline-block; width: 1em; height: 1em; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.75s linear infinite; margin-left: 5px; vertical-align: -0.15em; }
button:not(.button-primary):not(.button-success):not(.button-danger) .spinner-mini, button.button-secondary .spinner-mini, button.button-link .spinner-mini { border-color: rgba(0,0,0,0.2); border-top-color: #333; }
@keyframes spin { to { transform: rotate(360deg); } }
.fas, .far, .fab { font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; }
.fas { font-weight: 900; } .far { font-weight: 400; } .fab { font-weight: 400; }

/* Image Previews for create_post.php */
.image-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-top: 10px; }
.image-preview-item { position: relative; border: 1px solid #ddd; padding: 5px; border-radius: 4px; background-color: #f9f9f9; }
.image-preview-item img { max-width: 100%; max-height: 100px; object-fit: cover; display: block; margin-bottom: 5px; }
.image-preview-item small { display: block; font-size: 0.8em; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* In your main style.css */

/* ... (all other existing styles) ... */

/* FAQ Page Styles */
.faq-page .page-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}
.faq-page .lead-text {
    font-size: var(--font-size-large);
    color: var(--text-color-secondary);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.faq-category-section {
    margin-bottom: var(--spacing-lg);
}
.faq-category-title {
    font-size: var(--font-size-xl);
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color-light);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.faq-item {
    border: 1px solid var(--border-color-soft);
    border-radius: var(--border-radius-md);
    background-color: var(--content-background-alt); /* Slightly different background for each item */
    transition: box-shadow 0.2s ease-in-out;
}
.faq-item:hover {
    box-shadow: var(--shadow-sm);
}
.faq-item[open] { /* When details element is open */
    background-color: var(--content-background-color); /* Can change background when open */
}
.faq-item[open] summary {
    border-bottom: 1px solid var(--border-color-soft);
    background-color: var(--primary-color-light); /* Highlight summary when open */
    color: var(--primary-color);
}
.faq-item[open] summary .faq-toggle-icon {
    transform: rotate(180deg);
    color: var(--primary-color);
}
.faq-question { /* This is the <summary> element */
    font-weight: 500;
    padding: var(--spacing-md);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none; /* Remove default marker from summary */
    transition: background-color 0.2s ease;
    position: relative; /* For pseudo-elements if needed */
}
.faq-question::-webkit-details-marker { display: none; /* Hide default marker in WebKit */ }
.faq-question:hover {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
}
.faq-toggle-icon {
    font-size: 0.9em;
    color: var(--text-color-secondary);
    transition: transform 0.3s ease-in-out;
    margin-left: var(--spacing-sm);
}
.faq-answer {
    padding: var(--spacing-md);
    font-size: var(--font-size-medium);
    line-height: 1.7;
    /* border-top: 1px solid var(--border-color-soft); /* This might be redundant if summary gets border */
    background-color: var(--content-background-color); /* Ensure answer area has clear background */
    border-bottom-left-radius: var(--border-radius-md); /* If .faq-item has border-radius */
    border-bottom-right-radius: var(--border-radius-md);
}
.faq-answer p:last-child {
    margin-bottom: 0;
}
.faqs-table .truncate-text-faq-q { /* For admin table */
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ======== ADVERTISEMENT STYLES START ======== */
.custom-ad-container {
    text-align: center; 
    margin-left: auto;  
    margin-right: auto; 
    padding: 0;
    line-height: 0;     
    overflow: hidden;   
    clear: both; /* Ensure it clears floats if any post items are floated */
    width: 100%; /* Make the container take full width to center the ad unit inside */
    box-sizing: border-box;
}

.custom-ad-container iframe,
.custom-ad-container div[id^="google_ads_iframe_"] { /* For AdSense iframes */
    margin-left: auto;
    margin-right: auto;
    display: block !important; 
}


/* --- Ad Above Post List (468x60) --- */
.ad-above-post-list {
    margin-top: var(--spacing-md, 16px);
    margin-bottom: var(--spacing-lg, 24px); 
}

/* --- Ad In Between Posts (320x50) --- */
/* This style assumes .posts-grid is using CSS Grid */
.posts-grid > .ad-in-between-posts {
    grid-column: 1 / -1; /* Make the ad container span all columns of the grid */
    margin-top: var(--spacing-md, 16px);
    margin-bottom: var(--spacing-md, 16px);
}
/* If .posts-grid is not CSS Grid but flexbox or block, you might not need grid-column */
/* Ensure there's enough vertical space */
.ad-in-between-posts {
    padding-top: var(--spacing-sm, 8px); /* Optional: extra space inside ad container if needed */
    padding-bottom: var(--spacing-sm, 8px);
}


/* --- Ad Before Footer (728x90) --- */
/* This class name (`ad-before-footer`) should be used in your footer.php for the ad */
.ad-before-footer {
    margin-top: var(--spacing-xl, 32px); 
    margin-bottom: var(--spacing-xl, 32px); 
    /* If this ad is outside the main .container div, add padding to align with content */
    /* padding-left: var(--spacing-md); */
    /* padding-right: var(--spacing-md); */
}


/* Responsive Adjustments for Ads */
@media (max-width: 768px) {
    .ad-above-post-list iframe[width="468"],
    .ad-before-footer iframe[width="728"] {
        /* On smaller screens, these might be too wide. 
           Best if the ad network provides responsive units.
           Forcing size with CSS can sometimes break ad rendering or violate ToS.
           Consider hiding them or using smaller ad units for these breakpoints
           by modifying the PHP to serve different ad codes based on screen size (more complex).
        */
        /* max-width: 100%; */ /* This might not always scale the ad content correctly */
        /* height: auto; */
    }
    
    /* For ads within the grid, ensure they don't cause overflow */
    .posts-grid > .ad-in-between-posts iframe[width="320"] {
        /* 320px width is generally okay for mobile */
        max-width: 100%; /* Prevent overflow on very small screens if container is narrower than 320px */
    }
}

@media (max-width: 480px) {
    /* Specific adjustments for very small screens */
    .ad-above-post-list, 
    .posts-grid > .ad-in-between-posts,
    .ad-before-footer {
        /* Ensure ad iframes can shrink if needed */
    }
    .ad-above-post-list iframe,
    .posts-grid > .ad-in-between-posts iframe,
    .ad-before-footer iframe {
        max-width: 100%; /* To prevent breaking layout on very small screens */
    }
}




/* Native Ad Slot Styling */
.native-ad-slot-container {
    /* এই কন্টেইনারটি 'post' এবং 'card' ক্লাস ব্যবহার করে, 
       তাই এটি আপনার পোস্ট কার্ডের বেশিরভাগ স্টাইল উত্তরাধিকার সূত্রে পাবে। */
    
    /* আপনি যদি চান তবে অ্যাডের জন্য নির্দিষ্ট স্টাইল এখানে যোগ করতে পারেন */
    /* padding: 15px; */ /* পোস্ট কার্ডের প্যাডিংয়ের সাথে মিল রাখুন বা প্রয়োজন অনুযায়ী অ্যাডজাস্ট করুন */
    /* background-color: #f8f9fa; */ /* হালকা ভিন্ন ব্যাকগ্রাউন্ড দিতে পারেন, অথবা পোস্ট কার্ডের ব্যাকগ্রাউন্ডের সাথে মিল রাখুন */
    /* border: 1px solid #dee2e6; */ /* ঐচ্ছিক: হালকা বর্ডার */
    
    box-sizing: border-box;
    display: flex; /* কন্টেন্টের অ্যালাইনমেন্টের জন্য */
    justify-content: center;
    align-items: center;
    min-height: 200px; /* একটি ন্যূনতম উচ্চতা সেট করুন যাতে অ্যাড লোড হওয়ার সময় লেআউট পরিবর্তন না হয়। 
                          নেটিভ অ্যাডের সাধারণ আকারের উপর ভিত্তি করে এটি অ্যাডজাস্ট করুন। */
    overflow: hidden; /* যদি অ্যাড কন্টেইনারের বাইরে চলে যায় */
}

.native-ad-slot-container div[id^="container-"] {
    /* এই div টি অ্যাড নেটওয়ার্ক দ্বারা পপুলেট করা হবে */
    width: 100%; /* অ্যাড কন্টেন্ট যেন কন্টেইনারের সম্পূর্ণ প্রস্থ নেয় */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ডেস্কটপের জন্য নির্দিষ্ট অ্যাডজাস্টমেন্ট (যদি প্রয়োজন হয়) */
@media (min-width: 768px) {
    .native-ad-slot-container {
        /* ডেস্কটপের জন্য কোনো বিশেষ স্টাইল এখানে যোগ করতে পারেন */
    }
}

/*
Important Ad Notes:
1. The effectiveness of `max-width: 100%` on iframes depends on the ad content.
   Some ads are not designed to be responsive and may not scale well.
2. Ad network scripts often inject their own styles. Use browser dev tools to inspect
   and override if necessary, using `!important` sparingly.
3. Test ad placements across different devices and screen sizes.
4. Ensure there's enough content separation from ads to comply with ad network policies (e.g., AdSense).
*/
/* ======== ADVERTISEMENT STYLES END ======== */









.verified-badge{color:#1DA1F2;font-size:0.9em;margin-left:5px;vertical-align:middle;}span.meta-item>a+.verified-badge{vertical-align:baseline;}











/* photos.php & view_photo.php এর জন্য অতিরিক্ত স্টাইল */
.photos-page .upload-form-container,
.photos-page .photo-feed-container { margin-bottom: 30px; }
.photo-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.photo-item-link { text-decoration: none; color: inherit; }
.photo-item { transition: transform 0.2s, box-shadow 0.2s; }
.photo-item:hover { transform: translateY(-5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.photo-item-image { width: 100%; height: 200px; object-fit: cover; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.photo-item .card-body { padding: 15px; }
.photo-title { font-size: 1rem; margin-bottom: 5px; }
.photo-author { font-size: 0.85rem; color: #6c757d; }

/* view_photo.php */
.single-photo-view .post-image { max-width: 100%; height: auto; border-radius: 5px; }
.photo-footer { display: flex; justify-content: space-between; align-items: center; }
.likes-section .button.liked { background-color: #28a745; border-color: #28a745; color: white; cursor: not-allowed; }
.likes-count { margin-left: 10px; font-weight: bold; }
.ad-container-photo { margin-top: 20px; padding: 15px; background: #f8f9fa; }