/*
 * FilaTrade front-end styles.
 *
 * Palette matched to the sibling "Filament Finder" plugin
 * (D:\Claude Projects\Filament Finder for Wordpress\filaments-finder-app\assets\public.css)
 * so the two plugins read as one visual system on the same site.
 *
 * Customizing the look: every color/spacing value below is a CSS custom
 * property declared on .filatrade-form / .filatrade-listings / .filatrade-my-ads.
 * Override them from a theme stylesheet or Elementor's Custom CSS panel
 * without touching this file, e.g.:
 *
 *   .filatrade-form, .filatrade-listings { --filatrade-accent: #0073aa; }
 */

.filatrade-form,
.filatrade-listings,
.filatrade-my-ads {
	--filatrade-accent: #1f2430;
	--filatrade-accent-hover: #333a4a;
	--filatrade-accent-contrast: #f4d9a0;
	--filatrade-border-color: #ece2cc;
	--filatrade-pill-bg: #ffffff;
	--filatrade-pill-color: #332b1e;
	--filatrade-label-bg: #1f2430;
	--filatrade-label-color: #f4d9a0;
	--filatrade-surface-bg: #ffffff;
	--filatrade-page-bg: #fbf7ef;
	--filatrade-muted-color: #5b5342;
	--filatrade-success-color: #3f7a4c;
	--filatrade-success-bg: #eaf3ec;
	--filatrade-success-border: #cfe4d3;
	--filatrade-danger-color: #b3402f;
	--filatrade-danger-bg: #f7e9e6;
	--filatrade-danger-border: #e3b5a8;
	--filatrade-radius-pill: 999px;
	--filatrade-radius-label: 6px;
	--filatrade-radius-card: 10px;
	--filatrade-font: Arial, Helvetica, sans-serif;
	--filatrade-gap: 0.55em;

	font-family: var( --filatrade-font );
	font-size: 16px;
	color: var( --filatrade-pill-color );
}

.filatrade-my-ads {
	max-width: 680px;
}

/* Page-level heading shown above the board/personal-area/post-ad form —
   deliberately heavier and larger than the section titles inside them
   (.filatrade-inbox-title etc.) so it reads as the page's own title, not
   just another section label. Text is admin-configurable, see
   FilaTrade_Admin::get_listings_heading() and friends. */
/* !important across the board wasn't enough on its own — the theme (very
   likely via an Elementor-targeting rule like ".elementor-widget-container
   h1 { ... !important }") apparently pairs !important with a MORE SPECIFIC
   selector than plain ".filatrade-page-heading", and among tied !important
   declarations specificity still decides the winner. Repeating the class
   three times is a standard, valid way to raise this rule's specificity
   above practically any container-scoped theme selector without needing to
   know its exact form. */
/* DevTools confirmed the specificity fix worked — Computed showed exactly
   "Arial, Helvetica, sans-serif" at weight 800 — yet it still rendered as
   a serif-ish, dated-looking face. That's not a cascade bug: Hebrew Arial's
   own letterforms look noticeably different (older/serif-influenced) from
   Latin Arial, especially blown up bold and large the way a page heading
   is, even though the browser is genuinely using Arial. Also, Arial has no
   real 800/black face, so weight 800 was left to whatever fallback
   matching the browser felt like. Switched to "Segoe UI" first (ships with
   every modern Windows install, has clean modern Hebrew glyphs, is what
   Windows itself uses for Hebrew UI text) and dropped to weight 700, which
   Arial/Segoe both have as a real face — matches the weight already used
   everywhere else in this stylesheet (.filatrade-inbox-title etc.). */
.filatrade-page-heading.filatrade-page-heading.filatrade-page-heading {
	margin: 0 0 20px !important;
	padding: 0 0 12px !important;
	font-family: "Segoe UI", var( --filatrade-font ) !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var( --filatrade-accent ) !important;
	border: none !important;
	border-bottom: 3px solid var( --filatrade-accent-contrast ) !important;
}

/* Outer frame: cream background behind the whole widget (matches .ff-search).
   Wider than a simple list so long pill rows (materials/colors) and the
   multi-column results table both have room to breathe. */
.filatrade-form,
.filatrade-listings {
	max-width: 1360px;
	background: var( --filatrade-page-bg );
	padding: 20px;
	border-radius: 14px;
}

/* Inner frame: white bordered box holding the fields (matches .ff-filters). */
.filatrade-fields-box {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var( --filatrade-surface-bg );
	border: 1px solid var( --filatrade-border-color );
	border-radius: 10px;
	padding: 18px;
}

.is-hidden {
	display: none !important;
}

/* ---------- shared field layout ---------- */

.filatrade-field {
	margin: 0;
}

/* Section headings for the exchange "have / want" structure — a step above
   .filatrade-section-label: this introduces a whole group of fields rather
   than labeling a single one. */
.filatrade-section-heading {
	font-size: 16px;
	font-weight: 700;
	color: var( --filatrade-accent );
	border-bottom: 1px solid var( --filatrade-border-color );
	padding-bottom: 6px;
}

.filatrade-want-section {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.filatrade-section-label {
	display: inline-block;
	background: var( --filatrade-label-bg );
	color: var( --filatrade-label-color );
	padding: 5px 12px;
	border-radius: var( --filatrade-radius-label );
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.01em;
	margin-bottom: 10px;
}

.filatrade-section-label em {
	font-style: normal;
	opacity: 0.75;
	margin-inline-start: 0.15em;
}

.filatrade-empty-list {
	color: var( --filatrade-muted-color );
	font-size: 13px;
	font-style: italic;
}

/* ---------- pill buttons ---------- */

.filatrade-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.filatrade-pill {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.filatrade-pill input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.filatrade-pill span {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var( --filatrade-radius-pill );
	border: 1px solid var( --filatrade-border-color );
	background: var( --filatrade-pill-bg );
	color: var( --filatrade-pill-color );
	font-size: 14px;
	line-height: 1.2;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	user-select: none;
	white-space: nowrap;
}

.filatrade-pill:hover span {
	border-color: var( --filatrade-accent );
}

.filatrade-pill input:checked + span {
	background: var( --filatrade-accent );
	color: var( --filatrade-accent-contrast );
	border-color: var( --filatrade-accent );
}

.filatrade-pill input:active + span {
	transform: scale( 0.97 );
}

.filatrade-pill input:focus-visible + span {
	outline: 2px solid var( --filatrade-accent );
	outline-offset: 2px;
}

/* ---------- text input (phone) ---------- */

.filatrade-text-input {
	width: 100%;
	max-width: 320px;
	padding: 8px 10px;
	border: 1px solid var( --filatrade-border-color );
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	background: var( --filatrade-surface-bg );
	color: var( --filatrade-pill-color );
}

/* ---------- form footer ---------- */

.filatrade-form-message {
	min-height: 1.4em;
	margin-bottom: 0.6em;
	font-size: 14px;
}

.filatrade-form-message.is-success {
	color: var( --filatrade-success-color );
}

.filatrade-form-message.is-error {
	color: var( --filatrade-danger-color );
}

.filatrade-submit {
	padding: 9px 20px;
	border: none;
	border-radius: 6px;
	background: var( --filatrade-accent );
	color: var( --filatrade-accent-contrast );
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.filatrade-submit:hover {
	background: var( --filatrade-accent-hover );
}

/* ---------- action buttons above the board ---------- */

.filatrade-listings-actions,
.filatrade-my-ads-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.filatrade-action-button {
	display: inline-block;
	padding: 10px 24px;
	border-radius: 6px;
	background: var( --filatrade-accent );
	color: var( --filatrade-accent-contrast );
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}

.filatrade-action-button:hover {
	background: var( --filatrade-accent-hover );
	color: var( --filatrade-accent-contrast );
}

/* Shown to FREE-tier members instead of the real link: same shape/size
   as the active button so the row doesn't jump, but visibly inert. */
.filatrade-action-button--disabled {
	background: var( --filatrade-muted-color );
	color: var( --filatrade-accent-contrast );
	opacity: 0.5;
	cursor: not-allowed;
}

.filatrade-upgrade-note {
	display: flex;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
	color: var( --filatrade-danger-color );
}

/* Each label+select pair is its own .filatrade-filter-group so wrapping
   (row-to-row on medium screens, full-width stacked on phones) never splits
   a label from its own select onto separate lines. Three selects in one
   unbroken row was exactly what overflowed the page horizontally on mobile. */
.filatrade-type-filter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-bottom: 16px;
}

.filatrade-filter-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.filatrade-type-filter label {
	font-size: 14px;
	font-weight: 600;
	color: var( --filatrade-muted-color );
	white-space: nowrap;
}

.filatrade-type-filter select {
	padding: 8px 14px;
	border: 1px solid var( --filatrade-border-color );
	border-radius: 6px;
	background: var( --filatrade-surface-bg );
	color: var( --filatrade-pill-color );
	font-size: 14px;
	font-family: inherit;
	max-width: 100%;
}

@media ( max-width: 600px ) {
	.filatrade-filter-group {
		flex: 1 1 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.filatrade-type-filter select {
		width: 100%;
	}
}

/* ---------- listing feed: card matrix (three ads per row) ---------- */

.filatrade-card-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
}

@media ( max-width: 1000px ) {
	.filatrade-card-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 700px ) {
	.filatrade-card-grid {
		grid-template-columns: 1fr;
	}
}

.filatrade-ad-card {
	background: var( --filatrade-surface-bg );
	border: 1px solid var( --filatrade-border-color );
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 4px 10px rgba( 31, 36, 48, 0.12 );
}

.filatrade-ad-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.filatrade-ad-card-header img {
	border-radius: 50%;
	flex-shrink: 0;
}

.filatrade-ad-card-user {
	flex: 1;
	min-width: 0;
}

.filatrade-ad-card-user strong {
	display: block;
	font-size: 14px;
	color: var( --filatrade-pill-color );
}

.filatrade-ad-card-user time {
	font-size: 12px;
	color: var( --filatrade-muted-color );
}

.filatrade-ad-type {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var( --filatrade-radius-pill );
	font-size: 12px;
	font-weight: 600;
	background: var( --filatrade-label-bg );
	color: var( --filatrade-label-color );
	white-space: nowrap;
}

.filatrade-ad-card-tagline {
	font-size: 14px;
	font-weight: 700;
	color: var( --filatrade-accent );
	margin: 0 0 10px;
}

/* Details table — used for both buy/sell (2 columns: label/value) and
   exchange (3 columns: label/own/wanted) ads, so every card in the grid
   has an identical header-row height and the reply buttons all line up.
   No grid lines except a thin rule under the column headers. */
.filatrade-exchange-table {
	width: 100%;
	border-collapse: collapse;
	border: none;
	font-size: 13px;
	margin-bottom: 12px;
}

.filatrade-exchange-table th,
.filatrade-exchange-table td {
	border: none;
}

.filatrade-exchange-table th {
	text-align: right;
	font-size: 12px;
	font-weight: 700;
	color: var( --filatrade-accent );
	padding: 0 8px 6px 0;
	border-bottom: 1px solid var( --filatrade-border-color );
}

.filatrade-exchange-table td {
	padding: 2px 8px 2px 0;
	color: var( --filatrade-pill-color );
	vertical-align: top;
}

.filatrade-exchange-table th:first-child,
.filatrade-exchange-table td:first-child {
	width: 44px;
	font-weight: 600;
	color: var( --filatrade-muted-color );
	padding-inline-end: 10px;
}

/* Soft, inset divider (fades at both ends) between the details list and the
   reply button — a plain full-width border looked too harsh/technical. */
.filatrade-ad-card-divider {
	height: 1px;
	width: 90%;
	margin: 8px auto 12px;
	background: linear-gradient( to right, transparent, var( --filatrade-border-color ) 20%, var( --filatrade-border-color ) 80%, transparent );
}

/* Sits inside .filatrade-card-actions (a flex row) now, alongside
   .filatrade-message-trigger, instead of centering itself as a standalone
   block — the two buttons need to land side by side, not stacked. */
.filatrade-card-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.filatrade-reply-trigger {
	display: inline-block;
	margin: 0;
	background: var( --filatrade-accent );
	color: var( --filatrade-accent-contrast );
	border: 1px solid var( --filatrade-accent );
	border-radius: var( --filatrade-radius-pill );
	padding: 6px 20px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.filatrade-reply-trigger:hover {
	background: var( --filatrade-accent-hover );
	border-color: var( --filatrade-accent-hover );
}

.filatrade-reply-trigger--locked,
.filatrade-reply-trigger--locked:hover {
	background: var( --filatrade-surface-bg );
	color: var( --filatrade-muted-color );
	border-color: var( --filatrade-border-color );
	cursor: not-allowed;
	opacity: 0.6;
}

/* Deliberately outlined rather than filled like .filatrade-reply-trigger —
   private messages are a visually distinct channel from public comments,
   so the two buttons must never look interchangeable at a glance. */
.filatrade-message-trigger {
	display: inline-block;
	margin: 0;
	background: transparent;
	color: var( --filatrade-accent );
	border: 1px solid var( --filatrade-accent );
	border-radius: var( --filatrade-radius-pill );
	padding: 6px 20px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.filatrade-message-trigger:hover {
	background: var( --filatrade-accent );
	color: var( --filatrade-accent-contrast );
}

/* ---------- reply modal (matches .ff-modal) ---------- */

.filatrade-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: center;
	justify-content: center;
}

.filatrade-modal.filatrade-modal-open {
	display: flex;
}

.filatrade-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 31, 36, 48, 0.6 );
}

.filatrade-modal-box {
	position: relative;
	background: var( --filatrade-page-bg );
	border: 1px solid var( --filatrade-border-color );
	border-radius: 12px;
	padding: 24px;
	max-width: 480px;
	width: calc( 100% - 40px );
	max-height: calc( 100vh - 80px );
	overflow-y: auto;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.25 );
	font-family: var( --filatrade-font );
}

.filatrade-modal-box--center {
	max-width: 360px;
	text-align: center;
}

.filatrade-success-message {
	margin: 8px 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: var( --filatrade-success-color );
}

.filatrade-modal-close {
	position: absolute;
	top: 8px;
	/* Matches .filatrade-modal-title's padding-inline-end below — both need
	   to reserve the same physical side, or the × sits on top of the title
	   text in RTL (inset-inline-start would put it on the right, opposite
	   of where the title leaves room). */
	inset-inline-end: 12px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var( --filatrade-muted-color );
}

.filatrade-modal-close:hover {
	color: var( --filatrade-pill-color );
}

.filatrade-modal-title {
	font-size: 17px;
	font-weight: 700;
	color: var( --filatrade-pill-color );
	margin-bottom: 14px;
	padding-inline-end: 20px;
}

.filatrade-comment-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0 8px 16px 0;
	border-bottom: 1px solid var( --filatrade-border-color );
	font-size: 14px;
	max-height: 220px;
	overflow-y: auto;
}

.filatrade-comment-list li {
	margin-bottom: 4px;
}

.filatrade-comment-meta {
	display: flex;
	align-items: center;
	gap: 6px;
}

.filatrade-comment-date {
	font-size: 12px;
	font-weight: 400;
	color: var( --filatrade-muted-color );
}

.filatrade-comment-delete {
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #d63638 !important;
	padding: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

.filatrade-comment-delete:hover {
	opacity: 1;
}

.filatrade-reply-locked {
	color: var( --filatrade-muted-color );
	font-style: italic;
	font-size: 14px;
}

.filatrade-modal-box .comment-reply-title {
	font-size: 14px;
	font-weight: 700;
	color: var( --filatrade-pill-color );
	margin: 0 0 8px;
}

.filatrade-modal-box textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 90px;
	padding: 8px 10px;
	border: 1px solid var( --filatrade-border-color );
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
}

.filatrade-modal-box p.form-submit {
	margin: 10px 0 0;
	text-align: center;
}

.filatrade-comment-sent-message {
	/* display:block (its own line) rather than inline next to the button —
	   an inline-block placeholder still reserves width even at opacity:0,
	   which was throwing off the button's horizontal centering. */
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var( --filatrade-success-color );
	opacity: 0;
	transition: opacity 0.3s ease;
}

.filatrade-comment-sent-message.is-visible {
	opacity: 1;
}

.filatrade-modal-box input[ type="submit" ] {
	background: var( --filatrade-accent );
	color: var( --filatrade-accent-contrast );
	border: none;
	padding: 9px 20px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.filatrade-modal-box input[ type="submit" ]:hover {
	background: var( --filatrade-accent-hover );
}

/* ---------- my ads ---------- */

.filatrade-inbox {
	margin-bottom: 1.4em;
	padding-bottom: 1em;
	border-bottom: 1px solid var( --filatrade-border-color );
}

.filatrade-inbox-title,
.filatrade-my-ads-list-title {
	margin: 0 0 0.6em;
	font-size: 15px;
	font-weight: 700;
	color: var( --filatrade-pill-color );
}

/* Framed + independently scrollable, same idea as the modal threads
   (.filatrade-comment-list / .filatrade-message-thread) — otherwise the
   whole personal-area page keeps growing taller as conversations/ads pile
   up, with no scroll boundary of its own. */
.filatrade-inbox-scroll,
.filatrade-my-ads-scroll {
	max-height: 360px;
	overflow-y: auto;
	border: 1px solid var( --filatrade-border-color );
	border-radius: var( --filatrade-radius-card );
	background: var( --filatrade-surface-bg );
	padding: 4px 14px;
}

.filatrade-inbox-list {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

.filatrade-inbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

/* Two classes tie together on purpose: .filatrade-message-trigger supplies
   the click behaviour (open modal + load thread), this class re-lays it
   out as a flexible row instead of a centered pill button — combining
   both classes on the selector keeps this from losing to the pill rule
   on specificity regardless of stylesheet order. */
.filatrade-message-trigger.filatrade-inbox-trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 8px 12px;
	background: var( --filatrade-surface-bg );
	color: var( --filatrade-pill-color );
	border: 1px solid var( --filatrade-border-color );
	border-radius: 8px;
	font-size: 13px;
	font-weight: 400;
	text-align: right;
}

.filatrade-message-trigger.filatrade-inbox-trigger:hover {
	background: var( --filatrade-page-bg );
	color: var( --filatrade-pill-color );
}

/* "Delete for me only" lives on the personal-area row, not inside the
   chat modal itself — deleting a whole conversation is a management
   action, distinct from the modal's own per-message delete. */
.filatrade-inbox-delete-conversation {
	flex-shrink: 0;
	background: none !important;
	border: none !important;
	padding: 4px 6px !important;
	font-size: 12px;
	color: var( --filatrade-danger-color );
	opacity: 0.75;
	cursor: pointer;
	white-space: nowrap;
}

.filatrade-inbox-delete-conversation:hover {
	opacity: 1;
	text-decoration: underline;
}

.filatrade-inbox-user {
	font-weight: 700;
	white-space: nowrap;
}

.filatrade-inbox-ad {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var( --filatrade-muted-color );
}

.filatrade-inbox-date {
	font-size: 12px;
	color: var( --filatrade-muted-color );
	white-space: nowrap;
}

.filatrade-inbox-unread {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var( --filatrade-danger-color );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.filatrade-email-prefs {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 1em;
}

.filatrade-email-pref {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var( --filatrade-pill-color );
	cursor: pointer;
}

.filatrade-email-pref-saved {
	margin-inline-start: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var( --filatrade-success-color );
	opacity: 0;
	transition: opacity 0.3s ease;
}

.filatrade-email-pref-saved.is-visible {
	opacity: 1;
}

/* Grid (not flex) so the buttons land at the same x-position on every row,
   regardless of how long that row's title/date text happens to be — with
   flex + auto-margin, a longer title pushed the buttons after it sideways,
   throwing off row-to-row alignment. */
.filatrade-my-ad {
	display: grid;
	grid-template-columns: 1fr auto 140px 120px;
	align-items: center;
	gap: 1em;
	padding: 0.8em 0;
	border-bottom: 1px solid var( --filatrade-border-color );
}

/* Two fixed-width (140px + 120px) button columns don't fit a phone screen
   alongside the title — collapse to one column, each part stacking on its
   own line, instead of forcing the row (and often the whole page) to
   scroll horizontally. */
@media ( max-width: 600px ) {
	.filatrade-my-ad {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 0.5em;
	}
}

.filatrade-my-ad:last-child {
	border-bottom: none;
}

.filatrade-inbox-row:last-child {
	margin-bottom: 0;
}

.filatrade-my-ads-section {
	margin-bottom: 1.4em;
}

.filatrade-my-ad-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.filatrade-my-ad-expires {
	font-size: 13px;
	color: var( --filatrade-muted-color );
	white-space: nowrap;
}

.filatrade-delete-ad {
	justify-self: center;
	border: 1px solid var( --filatrade-danger-border );
	background: transparent;
	color: var( --filatrade-danger-color );
	padding: 9px 20px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	transition: background 0.15s ease;
}

.filatrade-delete-ad:hover {
	background: var( --filatrade-danger-bg );
}

/* ---------- notices ---------- */

.filatrade-notice {
	background: var( --filatrade-surface-bg );
	border: 1px solid var( --filatrade-border-color );
	color: var( --filatrade-muted-color );
	padding: 0.9em 1.1em;
	border-radius: 8px;
}

/* ---------- private message modal ---------- */

.filatrade-message-modal .filatrade-modal-box {
	max-width: 420px;
	display: flex;
	flex-direction: column;
}

.filatrade-message-thread {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 280px;
	overflow-y: auto;
	margin: 4px 0 12px;
	padding-inline-end: 4px;
}

.filatrade-message-loading,
.filatrade-message-empty,
.filatrade-list-empty {
	margin: 12px 0;
	text-align: center;
	font-size: 13px;
	color: var( --filatrade-muted-color );
}

.filatrade-message-bubble {
	max-width: 78%;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.4;
}

/* Own messages sit on the right: align-self:flex-start resolves to the
   inline-start edge, which under dir="rtl" is the right side. */
.filatrade-message-bubble--mine {
	align-self: flex-start;
	background: var( --filatrade-accent );
	color: var( --filatrade-accent-contrast );
	border-bottom-right-radius: 4px;
}

.filatrade-message-bubble--theirs {
	align-self: flex-end;
	background: var( --filatrade-pill-bg );
	border: 1px solid var( --filatrade-border-color );
	color: var( --filatrade-pill-color );
	border-bottom-left-radius: 4px;
}

.filatrade-message-bubble-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}

.filatrade-message-bubble-date {
	font-size: 11px;
	opacity: 0.75;
}

/* WhatsApp-style tombstone: kept on --mine/--theirs (for alignment/side)
   but stripped of the accent background so it reads as an empty shell
   rather than actual content. */
.filatrade-message-bubble--deleted {
	background: transparent;
	border: 1px dashed var( --filatrade-border-color );
	color: var( --filatrade-muted-color );
}

.filatrade-message-bubble--deleted .filatrade-message-bubble-text {
	font-style: italic;
	font-weight: 400;
}

/* Only "mine" bubbles ever render this, so currentColor is always the
   light accent-contrast text color from .filatrade-message-bubble--mine,
   readable against that bubble's dark background without a separate
   color variable. !important guards against the site theme's button
   styling, same issue already hit once for the comment-delete button. */
.filatrade-message-delete {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: currentColor !important;
	opacity: 0.7;
	cursor: pointer;
}

.filatrade-message-delete:hover {
	opacity: 1;
}

.filatrade-message-form {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}

/* Extra-specific selector: beats the generic ".filatrade-modal-box textarea"
   rule's width:100%/min-height:90px, which would otherwise force this
   textarea to full width and break the side-by-side layout with the send
   button. */
.filatrade-message-form .filatrade-message-input {
	flex: 1;
	box-sizing: border-box;
	width: auto;
	min-height: 44px;
	max-height: 120px;
	padding: 8px 10px;
	border: 1px solid var( --filatrade-border-color );
	border-radius: 6px;
	font-family: var( --filatrade-font );
	font-size: 14px;
	resize: vertical;
}

.filatrade-message-send {
	background: var( --filatrade-accent );
	color: var( --filatrade-accent-contrast );
	border: none;
	padding: 10px 18px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.filatrade-message-send:hover {
	background: var( --filatrade-accent-hover );
}

.filatrade-message-send:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}