/* Reddit Marketplace — front-end listing tables & service fields */

.rm-table-wrap { overflow-x: auto; margin: 24px 0; }

.rm-listing {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	background: #fff;
	border: 1px solid #eef0f3;
	border-radius: 12px;
	overflow: hidden;
}
.rm-listing thead th {
	text-align: left;
	font-weight: 600;
	color: #6b7280;
	font-size: 13px;
	text-transform: none;
	padding: 14px 16px;
	border-bottom: 1px solid #eef0f3;
	white-space: nowrap;
}
.rm-listing tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid #f3f4f6;
	vertical-align: middle;
	color: #111827;
}
.rm-listing tbody tr:last-child td { border-bottom: none; }
.rm-listing tbody tr:hover { background: #fafbfc; }

.rm-col-img { width: 52px; }
.rm-col-img img { border-radius: 8px; display: block; width: 40px; height: 40px; object-fit: cover; }
.rm-snoo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ff4500;
}
.rm-snoo-mark svg { width: 30px; height: 30px; display: block; }

.rm-mask { letter-spacing: 2px; color: #ff4500; font-weight: 700; }
.rm-mask-count { color: #9ca3af; font-size: 13px; }

.rm-price { font-weight: 700; }
.rm-price del { color: #9ca3af; font-weight: 400; margin-left: 6px; font-size: 13px; }
/* WooCommerce wraps the sale price in <ins>, which underlines by default. */
.rm-price ins,
.rm-price ins span,
.rm-listing ins { text-decoration: none; background: transparent; }

/* Content / Active badges on the accounts table and product spec panel */
.rm-badge {
	display: inline-block;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
}
.rm-badge-sfw { background: #dcfce7; color: #16a34a; }
.rm-badge-nsfw { background: #fee2e2; color: #dc2626; }
.rm-badge-active { background: #dcfce7; color: #16a34a; }
.rm-badge-inactive { background: #f3f4f6; color: #6b7280; }
.rm-badge-muted { background: transparent; color: #9ca3af; padding-left: 0; }
.rm-spec .rm-nsfw { color: #dc2626; }
.rm-spec .rm-inactive { color: #6b7280; }

.rm-interests { max-width: 260px; }
.rm-tag {
	display: inline-block;
	background: #eef2ff;
	color: #4f46e5;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 12px;
	margin: 2px 4px 2px 0;
}

/* Cart column: fixed width so every button lines up in a column. */
.rm-listing th:last-child,
.rm-listing td.rm-cart { width: 168px; text-align: center; white-space: nowrap; }

.rm-add-to-cart.button,
.rm-add-to-cart.button:visited {
	display: inline-block;
	box-sizing: border-box;
	min-width: 132px;
	background: #2563eb !important;
	color: #fff !important;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	border: none;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
}
.rm-add-to-cart.button:hover { background: #1d4ed8 !important; color: #fff !important; }
.rm-add-to-cart.button:active { transform: translateY(1px); }
.rm-add-to-cart.button.loading { opacity: .75; }
.rm-add-to-cart.button.added { pointer-events: none; }

/* WooCommerce appends this "View cart" link after an AJAX add — place it
   neatly on its own line under the button instead of pushing the row wider. */
.rm-cart .added_to_cart,
.rm-cart .added_to_cart:visited {
	display: block;
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: #2563eb;
	text-decoration: none;
}
.rm-cart .added_to_cart:hover { text-decoration: underline; }

.rm-sold {
	display: inline-block;
	min-width: 132px;
	color: #9ca3af;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
}
.rm-empty { text-align: center; color: #9ca3af; padding: 32px 16px !important; }

/* Made-to-order service fields on the product page */
.rm-service-fields {
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 20px;
	margin: 0 0 20px;
}
.rm-service-intro { font-weight: 600; margin: 0 0 12px; }
.rm-service-fields label { display: block; font-weight: 500; margin-bottom: 4px; }
.rm-service-fields .input-text,
.rm-service-fields textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
}
.rm-service-fields .required { color: #ef4444; }

/* Mod-seat-now upsell (subreddit product page) */
.rm-modseat {
	margin-top: 6px;
	padding-top: 16px;
	border-top: 1px dashed #d1d5db;
}
.rm-modseat-toggle {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	font-weight: 600 !important;
	color: #111827;
	cursor: pointer;
}
.rm-modseat-toggle input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}
.rm-modseat-username-row { margin-top: 12px; }

/* Google News submission page */
.rm-gnews { max-width: 680px; margin: 0 auto; }
.rm-gnews-tg {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #eaf6ff;
	border: 1px solid #cfe9fb;
	border-radius: 14px;
	padding: 16px 18px;
	margin: 0 0 24px;
}
.rm-gnews-tg-badge {
	width: 52px; height: 52px; border-radius: 50%;
	background: #229ED9; color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
}
.rm-gnews-tg-badge svg { width: 28px; height: 28px; }
.rm-gnews-tg-text { display: flex; flex-direction: column; line-height: 1.3; }
.rm-gnews-tg-text strong { color: #0b1220; font-size: 15px; }
.rm-gnews-tg-text a { color: #229ED9; font-weight: 700; font-size: 18px; text-decoration: none; }

.rm-gnews-intro { color: #374151; font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.rm-gnews-intro h2, .rm-gnews-intro h3 { margin-top: 0; }

.rm-gnews-form { background: #fff; border: 1px solid #eef0f3; border-radius: 14px; padding: 24px; }
.rm-field { display: block; margin: 0 0 18px; }
.rm-field label { display: block; font-weight: 600; color: #111827; margin-bottom: 6px; }
.rm-field .rm-req { color: #ef4444; }
.rm-field .rm-opt { color: #9ca3af; font-weight: 400; }
.rm-field input {
	width: 100%; box-sizing: border-box;
	border: 1px solid #d1d5db; border-radius: 8px;
	padding: 11px 12px; font-size: 15px;
}
.rm-field input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.rm-field .rm-hint { display: block; color: #9ca3af; font-size: 13px; margin-top: 6px; }
.rm-gnews-submit {
	display: inline-block; width: 100%;
	background: #2563eb; color: #fff; border: none; border-radius: 8px;
	padding: 14px 20px; font-size: 16px; font-weight: 700; cursor: pointer;
	transition: background .15s ease;
}
.rm-gnews-submit:hover { background: #1d4ed8; }

.rm-gnews-error {
	background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
	border-radius: 10px; padding: 12px 16px; margin: 0 0 18px; font-size: 14px;
}
.rm-gnews-success {
	background: #ecfdf5; border: 1px solid #bbf7d0; border-radius: 14px;
	padding: 28px; text-align: center;
}
.rm-gnews-success h3 { margin: 0 0 8px; color: #065f46; }
.rm-gnews-success p { margin: 0 0 18px; color: #374151; }
.rm-gnews-tg-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: #229ED9; color: #fff !important; text-decoration: none;
	border-radius: 10px; padding: 12px 22px; font-weight: 700;
}
.rm-gnews-tg-btn svg { width: 20px; height: 20px; }

@media (max-width: 560px) {
	.rm-gnews-form { padding: 18px; }
	.rm-gnews-tg-text a { font-size: 16px; }
}

/* Single product: spec panel + delivery note */
.rm-specs {
	border: 1px solid #eef0f3;
	border-radius: 12px;
	overflow: hidden;
	margin: 4px 0 20px;
	background: #fff;
}
.rm-specs-title {
	margin: 0;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6b7280;
	background: #f9fafb;
	border-bottom: 1px solid #eef0f3;
}
.rm-spec {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	border-bottom: 1px solid #f3f4f6;
	font-size: 15px;
}
.rm-spec:last-child { border-bottom: none; }
.rm-spec-k { color: #6b7280; font-weight: 500; }
.rm-spec-v { color: #111827; font-weight: 700; text-align: right; }
.rm-spec .rm-yes { color: #16a34a; }
.rm-spec-interests { flex-direction: column; align-items: flex-start; gap: 8px; }
.rm-spec-interests .rm-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.rm-delivery-note {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	background: #eef5ff;
	border: 1px solid #dbe7ff;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.5;
	color: #1f2937;
	margin: 0 0 20px;
}
.rm-delivery-ico { font-size: 16px; line-height: 1.4; }

/* Delivered items on thank-you page */
.rm-delivered { margin-top: 32px; }
.rm-delivered table { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rm-delivered .rm-table-wrap,
.rm-delivered table { overflow-x: auto; display: block; max-width: 100%; }

.rm-transfer-pending {
	margin-top: 32px;
	background: #eef5ff;
	border: 1px solid #dbe7ff;
	border-radius: 12px;
	padding: 18px 20px;
}
.rm-transfer-pending .woocommerce-order-details__title { margin-top: 0; }

/* ---- Mobile: stack the listing tables into cards ---- */
@media (max-width: 640px) {
	.rm-listing,
	.rm-listing thead,
	.rm-listing tbody,
	.rm-listing tr,
	.rm-listing td { display: block; width: 100%; }

	.rm-listing { border: none; background: transparent; }
	.rm-listing thead { display: none; }

	.rm-listing tbody tr {
		background: #fff;
		border: 1px solid #eef0f3;
		border-radius: 12px;
		margin: 0 0 16px;
		padding: 8px 4px;
		box-shadow: 0 6px 20px rgba(15,23,42,.05);
	}
	.rm-listing tbody tr:hover { background: #fff; }

	.rm-listing tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		text-align: right;
		border-bottom: 1px solid #f3f4f6;
		padding: 10px 16px;
	}
	.rm-listing tbody td:last-child { border-bottom: none; }

	/* Row label from the header, so the card reads "Post Karma  1,234". */
	.rm-listing tbody td[data-label]::before {
		content: attr(data-label);
		font-weight: 600;
		color: #6b7280;
		font-size: 13px;
		text-align: left;
	}

	.rm-col-img { display: none !important; }
	.rm-interests { flex-wrap: wrap; justify-content: flex-end; }
	.rm-interests { max-width: none; }
	.rm-listing td.rm-cart { width: auto; flex-direction: column; align-items: stretch; gap: 0; }
	.rm-cart .rm-add-to-cart.button { width: 100%; min-width: 0; text-align: center; }
	.rm-cart .rm-sold { min-width: 0; }
}