/**
 * GBook — Dark mode late overrides (সব পেজের ইনলাইন CSS-এর পরে লোড)
 * footer.php শেষে include হয় — specificity বেশি, !important শুধু প্রয়োজনে
 *
 * ভবিষ্যত কোড: header.php-র var(--card-bg), var(--text-body), var(--text-heading) ব্যবহার করলে
 * অটো dark mode হবে — এই ফাইল শুধু পুরনো hardcoded স্টাইলের fallback
 */

/* ═══ ১. ইউনিভার্সাল সারফেস — সাদা/হালকা বক্স → ডার্ক কার্ড ═══ */
html[data-theme="dark"] .cat-page-head-inner,
html[data-theme="dark"] .category-filter-panel,
html[data-theme="dark"] .filter-field select,
html[data-theme="dark"] .empty-box-cat,
html[data-theme="dark"] .empty-box,
html[data-theme="dark"] .empty-state-box,
html[data-theme="dark"] .csh-block-card,
html[data-theme="dark"] .csh-notify-box,
html[data-theme="dark"] .med-card,
html[data-theme="dark"] .merchant-profile-card,
html[data-theme="dark"] .food-card,
html[data-theme="dark"] .vehicle-row-card,
html[data-theme="dark"] .category-post-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .svc-card,
html[data-theme="dark"] .svc-post-card,
html[data-theme="dark"] .svc-post-row,
html[data-theme="dark"] .services-filter-panel,
html[data-theme="dark"] .db-block,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .cart-item,
html[data-theme="dark"] .cart-summary,
html[data-theme="dark"] .cart-empty,
html[data-theme="dark"] .checkout-form,
html[data-theme="dark"] .checkout-summary,
html[data-theme="dark"] .mp-post-card,
html[data-theme="dark"] .mp-empty,
html[data-theme="dark"] .mpe-card,
html[data-theme="dark"] .so-card,
html[data-theme="dark"] .so-empty,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .my-order-card,
html[data-theme="dark"] .history-card,
html[data-theme="dark"] .composer-card,
html[data-theme="dark"] .edit-post-card,
html[data-theme="dark"] .merchant-setup-card,
html[data-theme="dark"] .pay-section,
html[data-theme="dark"] .post-creator-box,
html[data-theme="dark"] .fb-post-card,
html[data-theme="dark"] .sidebar-profile-card,
html[data-theme="dark"] .sidebar-area-stats,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .mobile-sidebar,
html[data-theme="dark"] .fb-search-box,
html[data-theme="dark"] .local-filter-strip,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .method,
html[data-theme="dark"] .wallet {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

/* Keep post action menus tied to the active theme instead of inherited colors. */
html:not([data-theme="dark"]) .post-card-menu,
html:not([data-theme="dark"]) .profile-post-menu {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14) !important;
}

html:not([data-theme="dark"]) .post-card-menu button,
html:not([data-theme="dark"]) .post-card-menu a,
html:not([data-theme="dark"]) .profile-post-menu button,
html:not([data-theme="dark"]) .profile-post-menu a {
    background: transparent !important;
    color: #475569 !important;
}

html:not([data-theme="dark"]) .post-card-menu button:hover,
html:not([data-theme="dark"]) .post-card-menu a:hover,
html:not([data-theme="dark"]) .profile-post-menu button:hover,
html:not([data-theme="dark"]) .profile-post-menu a:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Keep the add-post composer light when the site is in light mode. */
html:not([data-theme="dark"]) .composer-grid-layout .db-block {
    background: #ffffff !important;
    border-color: #edf2f7 !important;
    color: #2d3748 !important;
}

html:not([data-theme="dark"]) .composer-grid-layout .block-header {
    border-color: #edf2f7 !important;
}

html:not([data-theme="dark"]) .composer-grid-layout .block-header h3,
html:not([data-theme="dark"]) .composer-grid-layout .ec-section-box h4,
html:not([data-theme="dark"]) .composer-grid-layout .form-group-db label {
    color: #2d3748 !important;
}

html:not([data-theme="dark"]) .composer-grid-layout .form-control-db {
    background: #ffffff !important;
    border-color: #edf2f7 !important;
    color: #2d3748 !important;
}

html:not([data-theme="dark"]) .composer-grid-layout .form-control-db::placeholder {
    color: #a0aec0 !important;
    opacity: 1;
}

html:not([data-theme="dark"]) .composer-grid-layout .post-mode-panel,
html:not([data-theme="dark"]) .composer-grid-layout .social-title-field,
html:not([data-theme="dark"]) .composer-grid-layout .social-description-field {
    background: transparent !important;
    color: #334155 !important;
    opacity: 1 !important;
}

html:not([data-theme="dark"]) .composer-grid-layout .post-mode-panel input,
html:not([data-theme="dark"]) .composer-grid-layout .post-mode-panel textarea,
html:not([data-theme="dark"]) .composer-grid-layout .post-mode-panel select {
    background: #ffffff !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    opacity: 1 !important;
}

html:not([data-theme="dark"]) .composer-grid-layout .post-mode-panel input:disabled,
html:not([data-theme="dark"]) .composer-grid-layout .post-mode-panel textarea:disabled,
html:not([data-theme="dark"]) .composer-grid-layout .post-mode-panel select:disabled {
    background: #f8fafc !important;
    color: #64748b !important;
    opacity: 1 !important;
}

html:not([data-theme="dark"]) .composer-grid-layout .post-mode-panel label {
    color: #475569 !important;
}

/* Professional social-post composer surface. */
.composer-grid-layout .social-composer-panel {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid #dbe5ef !important;
    border-radius: 16px;
    background: #f8fafc !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.composer-grid-layout .social-composer-panel .form-group-db {
    margin-bottom: 18px;
}

.composer-grid-layout .social-composer-panel .form-group-db:last-child {
    margin-bottom: 0;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.composer-grid-layout .social-composer-panel .form-group-db label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: #334155 !important;
    font-size: 13px;
    letter-spacing: .01em;
}

.composer-grid-layout .social-composer-panel .form-group-db label i {
    color: #0f766e !important;
}

.composer-grid-layout .social-composer-panel .form-group-db:last-child label i {
    color: #dc2626 !important;
}

.composer-grid-layout .social-composer-panel input.form-control-db,
.composer-grid-layout .social-composer-panel textarea.form-control-db {
    width: 100%;
    border: 1px solid #cbd5e1 !important;
    border-radius: 11px;
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.composer-grid-layout .social-composer-panel input.form-control-db:focus,
.composer-grid-layout .social-composer-panel textarea.form-control-db:focus {
    border-color: #0f766e !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12) !important;
}

.composer-grid-layout .social-composer-panel .social-title-field input {
    min-height: 52px;
    font-size: 20px !important;
    font-weight: 700;
}

.composer-grid-layout .social-composer-panel .social-description-field textarea {
    min-height: 150px;
    line-height: 1.65;
    resize: vertical;
}

.composer-grid-layout .social-composer-panel input::placeholder,
.composer-grid-layout .social-composer-panel textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

html[data-theme="dark"] .composer-grid-layout .social-composer-panel {
    border-color: #334155 !important;
    background: #111827 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .composer-grid-layout .social-composer-panel .form-group-db:last-child {
    border-top-color: #334155;
}

html[data-theme="dark"] .composer-grid-layout .social-composer-panel .form-group-db label {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .composer-grid-layout .social-composer-panel input.form-control-db,
html[data-theme="dark"] .composer-grid-layout .social-composer-panel textarea.form-control-db {
    border-color: #475569 !important;
    background: #0f172a !important;
    color: #f8fafc !important;
}

@media (max-width: 767px) {
    .composer-grid-layout .social-composer-panel {
        padding: 15px;
        border-radius: 13px;
    }

    .composer-grid-layout .social-composer-panel .social-title-field input {
        min-height: 48px;
        font-size: 18px !important;
    }

    .composer-grid-layout .social-composer-panel .social-description-field textarea {
        min-height: 132px;
    }
}

html:not([data-theme="dark"]) .composer-grid-layout .ec-section-box,
html:not([data-theme="dark"]) .composer-grid-layout .live-preview-box {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html:not([data-theme="dark"]) .composer-grid-layout .alert-info {
    background: #eef8ff !important;
    border-color: #bee3f8 !important;
    color: #2b6cb0 !important;
}

html[data-theme="dark"] .btn-filter-reset,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .tx-item,
html[data-theme="dark"] .mps-recent-item,
html[data-theme="dark"] .copy-input-row .form-control,
html[data-theme="dark"] .so-tab,
html[data-theme="dark"] .mp-filter-chip,
html[data-theme="dark"] .btn-ec-mini,
html[data-theme="dark"] .mpe-actions a,
html[data-theme="dark"] .variant-btn {
    background: var(--surface-2) !important;
    background-color: var(--surface-2) !important;
    border-color: var(--card-border) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .filter-toggle-header {
    background: var(--card-bg, #151d2e) !important;
    border-color: var(--card-border, #1e293b) !important;
}
html[data-theme="dark"] .filter-badge-icon {
    background: rgba(59, 130, 246, 0.25) !important;
}
html[data-theme="dark"] .filter-badge-icon i {
    color: #60a5fa !important;
}
html[data-theme="dark"] .filter-chevron-badge {
    background: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .filter-chevron-badge i {
    color: #f8fafc !important;
}

/* ═══ ২. ইউনিভার্সাল টেক্সট — গাঢ় রঙ → হালকা ═══ */
html[data-theme="dark"] .cat-page-titles h1,
html[data-theme="dark"] .filter-toggle-summary,
html[data-theme="dark"] .csh-block-card h4,
html[data-theme="dark"] .csh-block-card p,
html[data-theme="dark"] .csh-lead,
html[data-theme="dark"] .csh-notify-box p,
html[data-theme="dark"] .med-name,
html[data-theme="dark"] .med-specialty,
html[data-theme="dark"] .med-type,
html[data-theme="dark"] .med-address,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .merchant-profile-card h4,
html[data-theme="dark"] .merchant-profile-card p,
html[data-theme="dark"] .food-title,
html[data-theme="dark"] .food-desc,
html[data-theme="dark"] .vehicle-desc,
html[data-theme="dark"] .agency-name,
html[data-theme="dark"] .post-body-content,
html[data-theme="dark"] .post-body-content p,
html[data-theme="dark"] .svc-name,
html[data-theme="dark"] .svc-addr,
html[data-theme="dark"] .svc-post-body p,
html[data-theme="dark"] .services-empty,
html[data-theme="dark"] .detail-item,
html[data-theme="dark"] .block-body,
html[data-theme="dark"] .mp-post-card h4,
html[data-theme="dark"] .mp-post-card p,
html[data-theme="dark"] .cart-item-title,
html[data-theme="dark"] .cart-item-meta,
html[data-theme="dark"] .checkout-summary span,
html[data-theme="dark"] .product-detail p,
html[data-theme="dark"] .product-detail h1,
html[data-theme="dark"] .history-item p,
html[data-theme="dark"] .so-card strong,
html[data-theme="dark"] .so-card span,
html[data-theme="dark"] .post-card-body p,
html[data-theme="dark"] .post-text-content p,
html[data-theme="dark"] .comment-bubble p,
html[data-theme="dark"] .author-logo + div,
html[data-theme="dark"] .post-header-info,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .filter-field label,
html[data-theme="dark"] .med-section-title,
html[data-theme="dark"] .desktop-info-card p,
html[data-theme="dark"] .desktop-info-card h4,
html[data-theme="dark"] .sas-label,
html[data-theme="dark"] .spc-address,
html[data-theme="dark"] .post-time,
html[data-theme="dark"] .engage-react-names,
html[data-theme="dark"] .post-engage-summary,
html[data-theme="dark"] .creator-header input::placeholder {
    color: var(--text-body) !important;
}

/* Product details: keep every label and control readable in dark mode. */
html[data-theme="dark"] .product-page {
    color: var(--text-body) !important;
}

html[data-theme="dark"] .product-info h1,
html[data-theme="dark"] .product-variants label,
html[data-theme="dark"] .product-qty-row label,
html[data-theme="dark"] .product-desc h3,
html[data-theme="dark"] .product-seller h3,
html[data-theme="dark"] .product-specs h3 {
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .product-store,
html[data-theme="dark"] .product-compare,
html[data-theme="dark"] .product-desc p,
html[data-theme="dark"] .product-seller p,
html[data-theme="dark"] .product-specs th,
html[data-theme="dark"] .product-specs td {
    color: var(--text-body) !important;
}

html[data-theme="dark"] .product-main-img img,
html[data-theme="dark"] .product-thumbs img,
html[data-theme="dark"] .product-desc,
html[data-theme="dark"] .product-seller,
html[data-theme="dark"] .product-specs,
html[data-theme="dark"] .product-specs th,
html[data-theme="dark"] .product-specs td,
html[data-theme="dark"] .qty-control {
    border-color: var(--card-border) !important;
}

html[data-theme="dark"] .product-page .variant-btn {
    background: var(--surface-2) !important;
    border-color: var(--card-border) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .product-page .variant-btn.active {
    background: #172554 !important;
    border-color: #60a5fa !important;
    color: #bfdbfe !important;
}

html[data-theme="dark"] .product-page .qty-control button,
html[data-theme="dark"] .product-page .qty-control input {
    background: var(--surface-2) !important;
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .product-page .btn-add-cart {
    background: #172554 !important;
    border-color: #3b82f6 !important;
    color: #bfdbfe !important;
}

html[data-theme="dark"] .product-page .product-seller a {
    color: #93c5fd !important;
}

html[data-theme="dark"] .cat-page-titles h1,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .med-name,
html[data-theme="dark"] .food-title,
html[data-theme="dark"] .svc-name,
html[data-theme="dark"] .post-title,
html[data-theme="dark"] .main-title,
html[data-theme="dark"] .mp-header h1,
html[data-theme="dark"] .cart-page h1,
html[data-theme="dark"] .checkout-page h1,
html[data-theme="dark"] .services-page h1,
html[data-theme="dark"] .filter-toggle-summary {
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .category-box,
html[data-theme="dark"] .category-box:nth-child(odd),
html[data-theme="dark"] .category-box:nth-child(even) {
    background: var(--cat-bg, var(--card-bg)) !important;
    border-color: var(--cat-border, var(--card-border)) !important;
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .category-box i {
    color: var(--cat-icon, #93c5fd) !important;
    background: var(--cat-icon-bg, rgba(59, 130, 246, 0.18)) !important;
}

html[data-theme="dark"] .category-title {
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .merchant-profile-card h3,
html[data-theme="dark"] .merchant-profile-card .address,
html[data-theme="dark"] .med-section-title,
html[data-theme="dark"] .card-brand-logo {
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .merchant-profile-card .address {
    color: var(--text-subtle) !important;
}

html[data-theme="dark"] .merchant-profile-card {
    border-color: var(--card-border) !important;
}

html[data-theme="dark"] .card-brand-logo {
    background: var(--surface-2) !important;
    border-color: var(--card-border) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .cat-page-icon {
    background: var(--surface-2) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .section-title {
    border-bottom-color: var(--card-border) !important;
}

html[data-theme="dark"] .cat-soon-chip,
html[data-theme="dark"] .med-type,
html[data-theme="dark"] .med-address,
html[data-theme="dark"] .post-time,
html[data-theme="dark"] .svc-cat,
html[data-theme="dark"] .mps-pill,
html[data-theme="dark"] .empty-box-cat,
html[data-theme="dark"] .dew-sub,
html[data-theme="dark"] .dew-empty,
html[data-theme="dark"] .hero p,
html[data-theme="dark"] .fee-label,
html[data-theme="dark"] .bill-row span {
    color: var(--text-subtle) !important;
}

/* ═══ ৩. জরুরি সেবা (index + desktop) ═══ */
html[data-theme="dark"] .dew-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html[data-theme="dark"] .dew-item-info strong { color: #f8fafc !important; }
html[data-theme="dark"] .dew-item-info span { color: #cbd5e1 !important; }
html[data-theme="dark"] .dew-header h3 { color: #fca5a5 !important; }
html[data-theme="dark"] .dew-all-btn {
    background: #1e293b !important;
    border-color: #f87171 !important;
    color: #fecaca !important;
}
html[data-theme="dark"] .emergency-modal-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html[data-theme="dark"] .em-info strong { color: #f8fafc !important; }
html[data-theme="dark"] .em-info span { color: #fca5a5 !important; }
html[data-theme="dark"] .em-info small { color: #94a3b8 !important; }

/* ═══ ৪. ইনপুট / কমposer ═══ */
html[data-theme="dark"] .creator-header input,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-control-db,
html[data-theme="dark"] .filter-field select,
html[data-theme="dark"] .comment-input-wrap input {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .creator-actions button {
    background: transparent !important;
    color: var(--text-subtle) !important;
}

/* ═══ ৫. বাটন / ব্যাজ — রঙিন রাখা (কনট্রাস্ট ঠিক) ═══ */
html[data-theme="dark"] .btn-card-call,
html[data-theme="dark"] .btn-order,
html[data-theme="dark"] .btn-call-vehicle,
html[data-theme="dark"] .svc-call-btn,
html[data-theme="dark"] .med-btn-call,
html[data-theme="dark"] .em-call-btn,
html[data-theme="dark"] .dew-call,
html[data-theme="dark"] .btn-filter-apply,
html[data-theme="dark"] .btn-auth-submit,
html[data-theme="dark"] .btn-pay {
    /* রঙিন বাটন — টেক্সট সাদা থাক */
    color: #fff !important;
}

html[data-theme="dark"] .btn-filter-reset,
html[data-theme="dark"] .btn-view-all,
html[data-theme="dark"] .btn-view-detail,
html[data-theme="dark"] .med-btn-book,
html[data-theme="dark"] .action-card-btn.blue,
html[data-theme="dark"] .action-card-btn.green,
html[data-theme="dark"] .mps-edit-btn {
    color: #93c5fd !important;
}

/* ═══ ৬. অ্যালার্ট / স্ট্যাটাস বক্স ═══ */
html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .mp-alert.err,
html[data-theme="dark"] .checkout-error {
    background: #3b1c1c !important;
    color: #fecaca !important;
    border-color: #7f1d1d !important;
}
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .mp-alert.ok,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .gbook-success-banner {
    background: #14352a !important;
    color: #a7f3d0 !important;
    border-color: #166534 !important;
}

html[data-theme="dark"] .withdraw-locked-screen,
html[data-theme="dark"] .merchant-setup-cta,
html[data-theme="dark"] .med-demo-note,
html[data-theme="dark"] .cat-soon-chip {
    background: #422006 !important;
    color: #fde68a !important;
    border-color: #78350f !important;
}

/* ═══ ৭. ইন্টারঅ্যাকশন (post-interact) ═══ */
html[data-theme="dark"] .engage-emoji-stack,
html[data-theme="dark"] .comment-bubble,
html[data-theme="dark"] .post-comment-panel,
html[data-theme="dark"] .reactors-popup,
html[data-theme="dark"] .emoji-bar {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}
html[data-theme="dark"] .emoji-opt:hover,
html[data-theme="dark"] .emoji-opt:active {
    background: var(--surface-3) !important;
}

/* ═══ ৮. ফুটার / সাইডবার — ইতিমধ্যে ডার্ক, লিংক ঠিক ═══ */
html[data-theme="dark"] .sidebar-links a,
html[data-theme="dark"] .mobile-sidebar .guest-login-prompt p {
    color: #cbd5e1 !important;
}

/* ═══ ৯. প্রজেক্ট-ওয়াইড মিসিং সারফেস — নতুন/পুরনো পেজের সাদা কার্ড fallback ═══ */
html[data-theme="dark"] .mp-card,
html[data-theme="dark"] .mo-card,
html[data-theme="dark"] .mo-empty,
html[data-theme="dark"] .success-card,
html[data-theme="dark"] .merchant-card,
html[data-theme="dark"] .featured-merchants-section,
html[data-theme="dark"] .emergency-modal-panel,
html[data-theme="dark"] .emergency-modal-close,
html[data-theme="dark"] .fb-story-create,
html[data-theme="dark"] .fb-story-tile,
html[data-theme="dark"] .fb-story-media-create,
html[data-theme="dark"] .composer-photo-btn,
html[data-theme="dark"] .role-card-content,
html[data-theme="dark"] .copy-input-row input,
html[data-theme="dark"] .cart-card,
html[data-theme="dark"] .checkout-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .spc-card,
html[data-theme="dark"] .post-engage-card,
html[data-theme="dark"] .emoji-stack,
html[data-theme="dark"] .engage-emoji-stack,
html[data-theme="dark"] .comment-input-wrap,
html[data-theme="dark"] .reactors-popup-head {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .mp-card h3,
html[data-theme="dark"] .mo-card strong,
html[data-theme="dark"] .success-card h1,
html[data-theme="dark"] .success-card h2,
html[data-theme="dark"] .success-card h3,
html[data-theme="dark"] .merchant-card h3,
html[data-theme="dark"] .merchant-card h4,
html[data-theme="dark"] .role-card-content strong,
html[data-theme="dark"] .balance-card strong,
html[data-theme="dark"] .history-item h3,
html[data-theme="dark"] .order-item h3,
html[data-theme="dark"] .cart-item h3,
html[data-theme="dark"] .cart-item-title,
html[data-theme="dark"] .checkout-form h3,
html[data-theme="dark"] .checkout-summary h3 {
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .mp-card p,
html[data-theme="dark"] .mp-card small,
html[data-theme="dark"] .mo-card span,
html[data-theme="dark"] .success-card p,
html[data-theme="dark"] .merchant-card p,
html[data-theme="dark"] .cart-item-meta,
html[data-theme="dark"] .checkout-summary p,
html[data-theme="dark"] .product-meta,
html[data-theme="dark"] .service-meta {
    color: var(--text-secondary) !important;
}

/* ═══ ১০. Admin panel — একই night-mode preference দিয়ে সম্পূর্ণ panel dark করা ═══ */
html[data-theme="dark"] .admin-topbar,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .admin-table-wrap,
html[data-theme="dark"] .admin-filter,
html[data-theme="dark"] .admin-form,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .post-card-head,
html[data-theme="dark"] .post-card-body,
html[data-theme="dark"] .cat-card,
html[data-theme="dark"] .cat-row,
html[data-theme="dark"] .merch-card,
html[data-theme="dark"] .merch-stat,
html[data-theme="dark"] .pe-card,
html[data-theme="dark"] .me-card {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .admin-content table,
html[data-theme="dark"] .admin-content th,
html[data-theme="dark"] .admin-content td {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .admin-content input,
html[data-theme="dark"] .admin-content textarea,
html[data-theme="dark"] .admin-content select {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .admin-content h1,
html[data-theme="dark"] .admin-content h2,
html[data-theme="dark"] .admin-content h3,
html[data-theme="dark"] .admin-content h4,
html[data-theme="dark"] .admin-topbar h2,
html[data-theme="dark"] .admin-content strong,
html[data-theme="dark"] .post-title,
html[data-theme="dark"] .cat-title,
html[data-theme="dark"] .merch-stat .val,
html[data-theme="dark"] .merch-card-body .row strong,
html[data-theme="dark"] .pe-head-meta strong,
html[data-theme="dark"] .me-card h3 {
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .admin-content p,
html[data-theme="dark"] .admin-content small,
html[data-theme="dark"] .admin-content label,
html[data-theme="dark"] .admin-content .muted,
html[data-theme="dark"] .admin-content .meta {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .admin-menu-btn {
    background: var(--surface-2) !important;
    border-color: var(--card-border) !important;
    color: var(--text-heading) !important;
}

/* ═══ ১১. Mobile local filter strip — label/hint must stay readable ═══ */
html[data-theme="dark"] .local-filter-strip,
html[data-theme="dark"] .glossy-filter-strip {
    background: #151d2e !important;
    border-color: var(--card-border) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .local-filter-strip .filter-label,
html[data-theme="dark"] .glossy-filter-strip .filter-label {
    color: #93c5fd !important;
}

html[data-theme="dark"] .local-filter-strip .filter-label i,
html[data-theme="dark"] .glossy-filter-strip .filter-label i {
    color: #60a5fa !important;
}

html[data-theme="dark"] .local-filter-strip .filter-hint,
html[data-theme="dark"] .glossy-filter-strip .filter-hint {
    color: #e2e8f0 !important;
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 999px;
    padding: 4px 10px;
}

html[data-theme="dark"] .local-filter-strip .glossy-slider {
    background: linear-gradient(145deg, #334155 0%, #475569 55%, #1e293b 100%) !important;
}

html[data-theme="dark"] .local-filter-strip .glossy-slider:before {
    background: linear-gradient(145deg, #f8fafc 0%, #cbd5e1 100%) !important;
}

/* ═══ ১২. Homepage feed + mobile category captions ═══ */
html[data-theme="dark"] .fb-story-card,
html[data-theme="dark"] .fb-story-tile,
html[data-theme="dark"] .fb-story-create {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

html[data-theme="dark"] .fb-story-cap {
    min-height: 44px;
    background: var(--surface-2) !important;
    border-color: var(--card-border) !important;
}

html[data-theme="dark"] .fb-story-label,
html[data-theme="dark"] .fb-story-create .fb-story-label {
    display: -webkit-box !important;
    color: var(--text-heading) !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .fb-post-card,
html[data-theme="dark"] .post-engage-card,
html[data-theme="dark"] .post-card-header,
html[data-theme="dark"] .post-card-body,
html[data-theme="dark"] .post-card-actions,
html[data-theme="dark"] .post-action-blocks {
    border-color: var(--card-border) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .post-card-actions,
html[data-theme="dark"] .post-action-blocks {
    background: var(--surface-2) !important;
}

html[data-theme="dark"] .fb-post-card .post-title,
html[data-theme="dark"] .fb-post-card .post-author-meta h4,
html[data-theme="dark"] .fb-post-card .post-card-body h1,
html[data-theme="dark"] .fb-post-card .post-card-body h2,
html[data-theme="dark"] .fb-post-card .post-card-body h3,
html[data-theme="dark"] .fb-post-card .post-card-body h4,
html[data-theme="dark"] .fb-post-card .post-card-body h5,
html[data-theme="dark"] .fb-post-card .post-card-body h6 {
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .fb-post-card .post-card-body p,
html[data-theme="dark"] .fb-post-card .post-text-wrap,
html[data-theme="dark"] .fb-post-card .post-text-content,
html[data-theme="dark"] .fb-post-card .post-text-content p {
    color: var(--text-body) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .fb-post-card .post-time,
html[data-theme="dark"] .fb-post-card .post-engage-summary,
html[data-theme="dark"] .fb-post-card .engage-react-names,
html[data-theme="dark"] .fb-post-card .engage-empty-hint {
    color: var(--text-subtle) !important;
}

html[data-theme="dark"] .fb-post-card .action-block-btn {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

html[data-theme="dark"] .fb-post-card .action-block-label {
    color: var(--text-secondary) !important;
}

/* Legacy inline dark text colors must not disappear on dark surfaces. */
html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color: #0f172a"],
html[data-theme="dark"] [style*="color:#1a202c"],
html[data-theme="dark"] [style*="color: #1a202c"],
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color:#2d3748"],
html[data-theme="dark"] [style*="color: #2d3748"],
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color: #334155"],
html[data-theme="dark"] [style*="color:#4a5568"],
html[data-theme="dark"] [style*="color: #4a5568"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color: #475569"] {
    color: var(--text-body) !important;
}

/* ═══ ১৩. Signed-in dashboard ═══ */
html[data-theme="dark"] .dashboard-wrapper {
    color: var(--text-body) !important;
}

html[data-theme="dark"] .dashboard-wrapper .db-block {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .dashboard-wrapper .main-title,
html[data-theme="dark"] .dashboard-wrapper .block-header h3,
html[data-theme="dark"] .dashboard-wrapper .detail-item span,
html[data-theme="dark"] .dashboard-wrapper .stat-box strong,
html[data-theme="dark"] .dashboard-wrapper .tx-meta strong,
html[data-theme="dark"] .dashboard-wrapper .mps-pill strong,
html[data-theme="dark"] .dashboard-wrapper .mps-recent-info strong,
html[data-theme="dark"] .dashboard-wrapper .merchant-active-details .text-blue {
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .dashboard-wrapper .subtitle,
html[data-theme="dark"] .dashboard-wrapper .detail-item strong,
html[data-theme="dark"] .dashboard-wrapper .dashboard-empty-copy,
html[data-theme="dark"] .dashboard-wrapper .recent-order-item,
html[data-theme="dark"] .dashboard-wrapper .mps-label,
html[data-theme="dark"] .dashboard-wrapper .mps-empty-hint,
html[data-theme="dark"] .dashboard-wrapper .merchant-active-details .address {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .dashboard-wrapper .block-header,
html[data-theme="dark"] .dashboard-wrapper .detail-item,
html[data-theme="dark"] .dashboard-wrapper .recent-orders-list {
    border-color: var(--card-border) !important;
}

html[data-theme="dark"] .dashboard-wrapper .stat-box,
html[data-theme="dark"] .dashboard-wrapper .tx-item,
html[data-theme="dark"] .dashboard-wrapper .mps-pill,
html[data-theme="dark"] .dashboard-wrapper .mps-recent-item,
html[data-theme="dark"] .dashboard-wrapper .merchant-logo-fallback {
    background: var(--surface-2) !important;
    border-color: var(--card-border) !important;
}

html[data-theme="dark"] .dashboard-wrapper .stat-box.highlight {
    background: #12352b !important;
    border-color: #166534 !important;
}

html[data-theme="dark"] .dashboard-wrapper .stat-box.highlight strong {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .dashboard-wrapper .balance-card.current {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
}

html[data-theme="dark"] .dashboard-wrapper .balance-card.pending {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
}

html[data-theme="dark"] .dashboard-wrapper .balance-card span,
html[data-theme="dark"] .dashboard-wrapper .balance-card strong {
    color: #fff !important;
}

html[data-theme="dark"] .dashboard-wrapper .withdraw-locked-screen,
html[data-theme="dark"] .dashboard-wrapper .merchant-setup-cta {
    background: #422006 !important;
    border-color: #92400e !important;
}

/* Seller names in every feed layout open the matching public profile. */
.post-author-profile-link {
    color: inherit;
    text-decoration: none;
}
.post-author-profile-link:hover {
    color: #1877f2;
    text-decoration: underline;
    text-underline-offset: 3px;
}
html[data-theme="dark"] .post-author-profile-link {
    color: inherit !important;
}
html[data-theme="dark"] .post-author-profile-link:hover {
    color: #93c5fd !important;
}

html[data-theme="dark"] .dashboard-wrapper .withdraw-locked-screen,
html[data-theme="dark"] .dashboard-wrapper .withdraw-locked-screen h4,
html[data-theme="dark"] .dashboard-wrapper .withdraw-date-title span,
html[data-theme="dark"] .dashboard-wrapper .merchant-setup-cta h4,
html[data-theme="dark"] .dashboard-wrapper .merchant-setup-cta p {
    color: #fde68a !important;
}

html[data-theme="dark"] .dashboard-wrapper .withdraw-countdown {
    color: #fca5a5 !important;
}

html[data-theme="dark"] .dashboard-wrapper .action-card-btn.green {
    background: #12352b !important;
    border-color: #166534 !important;
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .dashboard-wrapper .action-card-btn.blue,
html[data-theme="dark"] .dashboard-wrapper .action-card-btn.edit,
html[data-theme="dark"] .dashboard-wrapper .mps-edit-btn {
    background: #172554 !important;
    border-color: #1e40af !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .dashboard-wrapper .action-card-btn.orders {
    background: #422006 !important;
    border-color: #92400e !important;
    color: #fde68a !important;
}

html[data-theme="dark"] .dashboard-wrapper .activation-block {
    background: linear-gradient(135deg, #12332f, #164e45) !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .dashboard-wrapper .activation-copy h3 {
    color: #fff !important;
}

html[data-theme="dark"] .dashboard-wrapper .activation-copy p {
    color: #d1fae5 !important;
}

/* History page: readable activity cards and controls in dark mode. */
html[data-theme="dark"] .history-wrapper .main-title {
    color: #93c5fd !important;
}

html[data-theme="dark"] .history-wrapper .subtitle,
html[data-theme="dark"] .history-wrapper .time-stamp {
    color: #aeb9c9 !important;
}

html[data-theme="dark"] .history-tabs {
    border-color: #334155 !important;
}

html[data-theme="dark"] .history-wrapper .tab-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #dbe5f3 !important;
}

html[data-theme="dark"] .history-wrapper .tab-btn:hover {
    background: #26364d !important;
    color: #bfdbfe !important;
}

html[data-theme="dark"] .history-wrapper .tab-btn.active {
    background: #2563eb !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .history-card-block {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25) !important;
}

html[data-theme="dark"] .history-card-block:hover {
    background: #24344b !important;
}

html[data-theme="dark"] .history-card-block .card-meta-row h4 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .history-card-block .desc {
    color: #dbe5f3 !important;
}

html[data-theme="dark"] .history-card-block .btn-view-post {
    color: #93c5fd !important;
}

html[data-theme="dark"] .history-card-block .btn-view-post:hover {
    color: #bfdbfe !important;
}

html[data-theme="dark"] .history-empty-state {
    border-color: #334155 !important;
    color: #aeb9c9 !important;
}

html[data-theme="dark"] .history-empty-state strong {
    color: #f1f5f9 !important;
}

/* Add post: all form copy stays readable in dark mode. */
html[data-theme="dark"] .composer-grid-layout .db-block {
    background: #172033 !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .composer-grid-layout .block-header {
    border-color: #334155 !important;
}

html[data-theme="dark"] .composer-grid-layout .block-header h3,
html[data-theme="dark"] .composer-grid-layout .ec-section-box h4,
html[data-theme="dark"] .composer-grid-layout .form-group-db label {
    color: #f8fafc !important;
}

html[data-theme="dark"] .composer-grid-layout .form-control-db {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .composer-grid-layout .form-control-db:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .18) !important;
}

html[data-theme="dark"] .composer-grid-layout .form-control-db::placeholder {
    color: #aab8ca !important;
    opacity: 1;
}

html[data-theme="dark"] .composer-grid-layout select.form-control-db option {
    background: #0f172a;
    color: #f8fafc;
}

html[data-theme="dark"] .composer-grid-layout .ec-section-box,
html[data-theme="dark"] .composer-grid-layout .live-preview-box {
    background: #1e293b !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .composer-grid-layout .preview-empty-state,
html[data-theme="dark"] .composer-grid-layout .preview-empty-state small,
html[data-theme="dark"] .composer-grid-layout .upload-separator {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .composer-grid-layout .role-badge.owner {
    background: #064e3b !important;
    color: #a7f3d0 !important;
}

html[data-theme="dark"] .composer-grid-layout .alert-info {
    background: #172554 !important;
    border: 1px solid #1d4ed8 !important;
    color: #dbeafe !important;
}

html[data-theme="dark"] .composer-grid-layout .btn-ec-add {
    background: #172554 !important;
    border-color: #3b82f6 !important;
    color: #bfdbfe !important;
}

/* --- Post Expandable Text ("আরো দেখুন" / "সংক্ষেপ করুন") --- */
.post-text-wrap {
    margin-top: 4px;
}
.post-text-content {
    position: relative;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.post-text-content.is-clamped p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.post-text-content.is-expanded p {
    display: block;
    overflow: visible;
}
.post-read-more-btn {
    margin-top: 6px;
    padding: 4px 12px;
    border: none;
    background: rgba(24, 119, 242, 0.09);
    color: #1877f2;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.post-read-more-btn:hover {
    background: rgba(24, 119, 242, 0.18);
}
html[data-theme="dark"] .post-read-more-btn {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #60a5fa !important;
}
html[data-theme="dark"] .post-read-more-btn:hover {
    background: rgba(59, 130, 246, 0.32) !important;
}
.post-read-more-btn[hidden] {
    display: none !important;
}

/* --- Medical Service Custom Card & UI Styling --- */
.medical-posts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.medical-service-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.medical-service-card:hover {
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.08);
}
.med-card-top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.med-type-badge {
    background: #ecfdf5;
    color: #059669;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.med-hours-badge {
    background: var(--hover-bg, #f1f5f9);
    color: var(--text-secondary, #64748b);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.med-hours-badge.active-24h {
    background: #dcfce7;
    color: #15803d;
}
.med-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.med-card-name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-heading, #0f172a);
}
.med-merchant-by {
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}
.med-specialties-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 12px;
}
.med-pill-tag {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.med-card-address {
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.med-card-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 140px));
    gap: 8px;
    margin-top: 14px;
}
.med-img-item {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
}
.med-img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.med-card-action-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--card-border, #e2e8f0);
}
.med-btn-call-primary {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
    transition: opacity 0.2s;
}
.med-btn-call-primary:hover {
    opacity: 0.92;
}
.med-btn-call-emergency {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
    transition: opacity 0.2s;
}
.med-btn-call-emergency:hover {
    opacity: 0.92;
}
.med-btn-map {
    background: #eff6ff;
    color: #2563eb !important;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.med-btn-map:hover {
    background: #dbeafe;
}
.med-btn-delete {
    background: #fee2e2;
    color: #991b1b !important;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

/* Dark Mode Overrides for Medical Cards */
html[data-theme="dark"] .medical-service-card {
    background: var(--card-bg, #151d2e) !important;
    border-color: var(--card-border, #1e293b) !important;
}
html[data-theme="dark"] .med-type-badge {
    background: rgba(5, 150, 105, 0.22) !important;
    color: #6ee7b7 !important;
}
html[data-theme="dark"] .med-hours-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .med-hours-badge.active-24h {
    background: rgba(16, 185, 129, 0.22) !important;
    color: #a7f3d0 !important;
}
html[data-theme="dark"] .med-pill-tag {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #a7f3d0 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}
html[data-theme="dark"] .med-btn-map {
    background: rgba(37, 99, 235, 0.22) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}
html[data-theme="dark"] .med-btn-delete {
    background: rgba(239, 68, 68, 0.22) !important;
    color: #fca5a5 !important;
}

/* --- Buy & Sell System CSS --- */
.buy-sell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.buy-sell-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}
.buy-sell-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.bs-card-img-wrap {
    position: relative;
    width: 100%;
    height: 190px;
    background: var(--surface-2, #f1f5f9);
    overflow: hidden;
}
.bs-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bs-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: var(--text-muted, #94a3b8);
}
.bs-condition-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}
.bs-condition-badge.badge-used {
    background: rgba(217, 119, 6, 0.9);
    color: #ffffff;
}
.bs-condition-badge.badge-new {
    background: rgba(16, 185, 129, 0.9);
    color: #ffffff;
}
.bs-img-count-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(0,0,0,0.65);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
}
.bs-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.bs-type-chip {
    font-size: 11px;
    font-weight: 700;
    color: #d97706;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bs-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--text-heading, #0f172a);
    line-height: 1.3;
}
.bs-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.bs-price {
    font-size: 18px;
    font-weight: 800;
    color: #d97706;
}
.bs-neg-badge {
    font-size: 11px;
    font-weight: 600;
    background: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 10px;
}
.bs-seller-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--card-border, #e2e8f0);
    margin-bottom: 10px;
}
.bs-location-badge {
    font-weight: 600;
    color: #2563eb;
}
.bs-desc-wrap {
    font-size: 13px;
    margin-bottom: 10px;
}
.bs-card-gallery {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-bottom: 12px;
}
.bs-gallery-item {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--card-border, #e2e8f0);
}
.bs-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bs-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}
.bs-btn-call {
    flex: 1;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.bs-btn-wa {
    background: #25d366;
    color: #fff !important;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    flex-shrink: 0;
}
.bs-btn-delete {
    background: #fee2e2;
    color: #ef4444 !important;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    text-decoration: none;
    flex-shrink: 0;
}

html[data-theme="dark"] .buy-sell-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html[data-theme="dark"] .bs-card-title {
    color: #f8fafc !important;
}
html[data-theme="dark"] .bs-price {
    color: #fbbf24 !important;
}
html[data-theme="dark"] .bs-neg-badge {
    background: rgba(217, 119, 6, 0.25) !important;
    color: #fef08a !important;
}
html[data-theme="dark"] .bs-seller-info {
    border-bottom-color: #334155 !important;
    color: #94a3b8 !important;
}
html[data-theme="dark"] .bs-btn-delete {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

/* --- Feed Follow Button Styling (Enhanced Modern UI) --- */
.btn-feed-follow {
    background: linear-gradient(135deg, #1877f2 0%, #0062e0 100%);
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 6px;
    line-height: 1.4;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(24, 119, 242, 0.28);
    vertical-align: middle;
}
.btn-feed-follow i {
    font-size: 10px;
    transition: transform 0.2s ease;
}
.btn-feed-follow:hover {
    background: linear-gradient(135deg, #166fe5 0%, #0056c6 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(24, 119, 242, 0.38);
    transform: translateY(-1px);
}
.btn-feed-follow:active {
    transform: translateY(0) scale(0.97);
}
.btn-feed-follow.is-following {
    background: #e4e6eb !important;
    color: #050505 !important;
    border: 1px solid #d8dadf !important;
    box-shadow: none !important;
}
.btn-feed-follow.is-following:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15) !important;
}

html[data-theme="dark"] .btn-feed-follow {
    background: linear-gradient(135deg, #2374e1 0%, #166fe5 100%);
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(35, 116, 225, 0.35);
}
html[data-theme="dark"] .btn-feed-follow:hover {
    background: linear-gradient(135deg, #3a86f7 0%, #2374e1 100%);
    box-shadow: 0 4px 12px rgba(35, 116, 225, 0.45);
}
html[data-theme="dark"] .btn-feed-follow.is-following {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #e4e6eb !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .btn-feed-follow.is-following:hover {
    background: rgba(239, 68, 68, 0.22) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}