/**
 * /balance/ page styles.
 *
 * Visual language matches /my-orders/:
 *   - Bordered table card (white, #e4e7ea border, 10px radius, overflow hidden)
 *   - Header row #f9f9f9 bg, #4e7184 text, 12px font
 *   - Body rows 13px, dashed border between
 *   - Hover row #f8fafc
 *   - Underline tabs (--td-tab-color) instead of pill buttons
 *
 * Class names match the original [tdrop_wallet] DOM so the markup
 * ported from the shortcode renders identically — we only restyle.
 */

.tdrop-balance-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 48px;
}

/* ============================================================
 * Toolbar — center balance, flanked by underline tabs
 * ============================================================ */

.tdrop-balance-toolbar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
	padding: 0 0 16px;
	border-bottom: 1px solid var( --td-card-border, #e4e7ea );
}

.tdrop-toolbar-col           { display: flex; }
.tdrop-toolbar-col:first-child { justify-content: flex-end; }
.tdrop-toolbar-col:last-child  { justify-content: flex-start; }
.tdrop-toolbar-center        { justify-content: center; text-align: center; }

/* Side tabs — underline style matching my-orders */
.tdrop-toolbar-col > .tdrop-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var( --td-tab-color-2, #afc3ce );
	cursor: pointer;
	transition: color .15s, border-color .15s;
}
.tdrop-toolbar-col > .tdrop-tab:hover,
.tdrop-toolbar-col > .tdrop-tab.tdrop-tab-active {
	color: var( --td-tab-color, #4e7184 );
}
.tdrop-toolbar-col > .tdrop-tab.tdrop-tab-active {
	border-bottom-color: var( --td-tab-color, #4e7184 );
}
.tdrop-toolbar-col > .tdrop-tab .tdrop-tab__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	line-height: 1;
	color: inherit;
}
.tdrop-toolbar-col > .tdrop-tab .tdrop-tab__icon svg {
	display: block;
}

/* Center "Мій баланс" — title above, big amount below */
.tdrop-tab-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	gap: 2px;
}
.tdrop-mybal-title {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --td-tab-color-2, #afc3ce );
}
.tdrop-mybal-amount {
	font-size: 28px;
	font-weight: 700;
	color: #1f2937;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.tdrop-mybal-amount.is-negative { color: #c0664a; }

@media (max-width: 720px) {
	/* Toolbar — keep three columns but condense to icon-only on the
	 * sides. Center column "Мій баланс" stays exactly as-is, so it
	 * remains the visual anchor of the row. */
	.tdrop-balance-toolbar {
		grid-template-columns: auto 1fr auto;
		gap: 12px;
		padding-bottom: 14px;
	}
	.tdrop-toolbar-col:first-child { justify-content: flex-start; }
	.tdrop-toolbar-col:last-child  { justify-content: flex-end; }
	/* Side tabs: hide the Ukrainian text, keep the SVG icon as a
	 * 40x40 tap target. The active underline still appears under
	 * the icon when their tab is selected. */
	.tdrop-toolbar-col > .tdrop-tab {
		gap: 0;
		padding: 10px;
		font-size: 0; /* swallow any text node that escapes a label span */
		position: relative;
	}
	/* Side-button tooltip — the .tdrop-tab__label sits as an absolute
	 * tooltip below the icon. It flashes for 2 seconds on hover/focus,
	 * then fades back out. */
	.tdrop-tab__label {
		display: block;
		position: absolute;
		top: calc( 100% + 6px );
		left: 50%;
		transform: translateX( -50% );
		background: #1f2937;
		color: #ffffff;
		font-size: 12px;
		font-weight: 500;
		line-height: 1;
		padding: 6px 10px;
		border-radius: 6px;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		z-index: 10;
	}
	.tdrop-toolbar-col > .tdrop-tab:hover .tdrop-tab__label,
	.tdrop-toolbar-col > .tdrop-tab:focus-visible .tdrop-tab__label {
		animation: tdrop-tab-tip-flash 2s ease forwards;
	}
	@keyframes tdrop-tab-tip-flash {
		0%   { opacity: 0; }
		8%   { opacity: 1; }
		92%  { opacity: 1; }
		100% { opacity: 0; }
	}
	/* Edge-align tooltips so they don't go off-screen. */
	.tdrop-toolbar-col:first-child > .tdrop-tab .tdrop-tab__label {
		left: 0;
		transform: none;
	}
	.tdrop-toolbar-col:last-child > .tdrop-tab .tdrop-tab__label {
		left: auto;
		right: 0;
		transform: none;
	}
	.tdrop-toolbar-col > .tdrop-tab .tdrop-tab__icon,
	.tdrop-toolbar-col > .tdrop-tab .tdrop-tab__icon svg {
		width: 22px;
		height: 22px;
	}
	.tdrop-mybal-amount { font-size: 22px; }
}

/* ============================================================
 * Sub-toolbar (above summary ledger table)
 * ============================================================ */

.tdrop-subbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}
.tdrop-subbar-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
}

/* Search — matches my-orders search look */
.tdrop-search {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.tdrop-search input {
	width: 280px;
	height: 36px;
	padding: 0 36px 0 14px;
	background: #fff;
	border: 1px solid var( --td-card-border, #e4e7ea );
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	color: #1f2937;
	transition: border-color .15s, box-shadow .15s;
}
.tdrop-search input::placeholder { color: var( --td-tab-color-2, #afc3ce ); }
.tdrop-search input:focus {
	outline: none;
	border-color: var( --td-tab-color, #4e7184 );
	box-shadow: 0 0 0 3px rgba( 78, 113, 132, 0.10 );
}
.tdrop-search .tdrop-search-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY( -50% );
	pointer-events: none;
	color: var( --td-tab-color-2, #afc3ce );
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tdrop-search .tdrop-search-icon svg { display: block; }
.tdrop-search .tdrop-tip {
	position: absolute;
	left: 50%;
	transform: translateX( -50% );
	top: calc(100% + 6px);
	background: #1f2937;
	color: #fff;
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 6px;
	white-space: nowrap;
	display: none;
	z-index: 5;
}
.tdrop-search:hover .tdrop-tip,
.tdrop-search:focus-within .tdrop-tip { display: block; }

/* ============================================================
 * Table — wrapped in a bordered card like td-orders__table
 * ============================================================ */

.tdrop-table-card {
	background: #fff;
	border: 1px solid var( --td-card-border, #e4e7ea );
	border-radius: 10px;
	overflow: hidden;
}

.tdrop-ledger,
.tdrop-topup-table,
#tdrop-payout-list table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 13px;
}

.tdrop-ledger thead th,
.tdrop-topup-table thead th,
#tdrop-payout-list table thead th {
	padding: 12px 16px;
	background: #f9f9f9;
	color: var( --td-tab-color, #4e7184 );
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	text-align: left;
	letter-spacing: .01em;
	text-transform: none;
	border-bottom: 1px solid var( --td-card-border, #e4e7ea );
	white-space: normal;
	word-break: keep-all;
	vertical-align: middle;
}

.tdrop-ledger tbody td,
.tdrop-topup-table tbody td,
#tdrop-payout-list table tbody td {
	padding: 12px;
	border-bottom: 1px solid #eef0f2;
	vertical-align: middle;
	color: #1f2937;
}

.tdrop-ledger tbody tr:last-child td,
.tdrop-topup-table tbody tr:last-child td,
#tdrop-payout-list table tbody tr:last-child td { border-bottom: 0; }

.tdrop-ledger tbody tr:hover,
.tdrop-topup-table tbody tr:hover,
#tdrop-payout-list table tbody tr:hover { background: #f8fafc; }

.tdrop-ledger tbody tr.tdrop-empty-row td,
.tdrop-topup-table tbody tr.tdrop-empty-row td,
#tdrop-payout-list table tbody tr.tdrop-empty-row td {
	text-align: center;
	color: #9ca3af;
	font-style: italic;
	padding: 36px 12px;
	background: transparent;
}
.tdrop-ledger tbody tr.tdrop-empty-row:hover td,
.tdrop-topup-table tbody tr.tdrop-empty-row:hover td,
#tdrop-payout-list table tbody tr.tdrop-empty-row:hover td { background: transparent; }

/* Amount + date sub-text shared utility classes */
.tdrop-time   { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.tdrop-amt-pos  { color: #2dc270; font-weight: 600; font-variant-numeric: tabular-nums; }
.tdrop-amt-neg  { color: #c0664a; font-weight: 600; font-variant-numeric: tabular-nums; }
.tdrop-amt-zero { color: #9ca3af; font-weight: 600; font-variant-numeric: tabular-nums; }
.tdrop-comment  { font-size: 11px; color: #9ca3af; margin-top: 2px; }

/* Thumb cell — medium, square, with even breathing room. */
.tdrop-col-thumb { width: 92px; }
.tdrop-thumbs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 6px;
}
.tdrop-thumb {
	width: 80px;
	height: 80px;
	border-radius: 7px;
	overflow: hidden;
	background: #f1f5f9;
	border: 1px solid var( --td-card-border, #e4e7ea );
	flex-shrink: 0;
}
.tdrop-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tdrop-thumb-placeholder { background: #f1f5f9; }

.tdrop-thumb-split {
	width: 80px; height: 80px; border-radius: 7px; overflow: hidden;
	display: grid; gap: 3px;
	grid-template-columns: calc((80px - 3px)/2) calc((80px - 3px)/2);
	grid-template-rows: 80px;
}
.tdrop-thumb-half { width: 100%; height: 80px; object-fit: cover; display: block; }

.tdrop-thumb-grid {
	width: 80px; height: 80px; border-radius: 7px; overflow: hidden;
	display: grid; gap: 3px;
	grid-template-columns: repeat(2, calc((80px - 3px)/2));
	grid-auto-rows: calc((80px - 3px)/2);
}
.tdrop-thumb-cell { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Order # link styling */
.tdrop-order-cell {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.tdrop-order-cell a {
	font-weight: 600;
}
.tdrop-ledger tbody td a,
.tdrop-topup-table tbody td a,
#tdrop-payout-list table tbody td a {
	color: var( --td-tab-color, #4e7184 );
	text-decoration: none;
	font-weight: 500;
}
.tdrop-ledger tbody td a:hover,
.tdrop-topup-table tbody td a:hover,
#tdrop-payout-list table tbody td a:hover { color: #2dc270; }

/* ============================================================
 * Loader / spinner
 * ============================================================ */

.tdrop-loader {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	padding: 14px;
	color: #9ca3af;
	font-size: 13px;
}
.tdrop-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var( --td-card-border, #e4e7ea );
	border-top-color: var( --td-tab-color, #4e7184 );
	border-radius: 50%;
	display: inline-block;
	animation: tdrop-spin 1s linear infinite;
}
@keyframes tdrop-spin { to { transform: rotate(360deg); } }

/* ============================================================
 * Card frame (used by topup + payout view sections)
 * ============================================================ */

.tdrop-card {
	background: #fff;
	border: 1px solid var( --td-card-border, #e4e7ea );
	border-radius: 10px;
	overflow: hidden;
}
.tdrop-card .hd {
	padding: 12px 16px;
	background: #f9f9f9;
	border-bottom: 1px solid var( --td-card-border, #e4e7ea );
	color: var( --td-tab-color, #4e7184 );
	font-weight: 600;
	font-size: 13px;
}
.tdrop-card .bd { padding: 14px 16px; }

/* Top-up: table card has no body padding so table touches the edges */
.tdrop-topup-left .tdrop-card .bd { padding: 0 !important; }

/* ============================================================
 * Top-up grid (65/35)
 * ============================================================ */

.tdrop-topup-grid {
	display: grid;
	grid-template-columns: minmax(0, 64%) minmax(0, 34%);
	gap: 2%;
	align-items: start;
}
.tdrop-topup-left,
.tdrop-topup-right { min-width: 0; }
.tdrop-topup-col   { background: transparent; border: 0; padding: 0; }
.tdrop-topup-right { position: sticky; top: 12px; align-self: start; }

@media (max-width: 900px) {
	.tdrop-topup-grid { grid-template-columns: 1fr; gap: 14px; }
	.tdrop-topup-right { position: static; order: -1; }  /* form on top, table below */
}

/* Top-up table column widths */
.tdrop-topup-table col.col-date     { width: 110px; }
.tdrop-topup-table col.col-sum      { width: 110px; }
.tdrop-topup-table col.col-paidtime { width: 90px; }
.tdrop-topup-table col.col-comments { width: auto;  min-width: 120px; }
.tdrop-topup-table col.col-status   { width: 130px; }

/* ============================================================
 * Bank-details box
 * ============================================================ */

.tdrop-bank-box {
	border: 1px dashed var( --td-card-border, #e4e7ea );
	border-radius: 7px;
	padding: 12px 14px;
	margin-bottom: 14px;
	background: #fafbfc;
}

/* ============================================================
 * Status badges
 * ============================================================ */

.tdrop-status { font-weight: 600; font-size: 12px; }
.tdrop-status-pending  { color: #f59e0b; }
.tdrop-status-approved { color: #2dc270; }
.tdrop-status-rejected { color: #c0664a; }

/* ============================================================
 * Forms (top-up + payout)
 * ============================================================ */

.tdrop-topup-form .tdrop-row,
#tdrop-payout-form .tdrop-row {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}
.tdrop-topup-form .tdrop-row > .tdrop-field { flex: 1; min-width: 0; }

.tdrop-topup-form input[type="text"],
.tdrop-topup-form select,
#tdrop-payout-form input[type="text"],
#tdrop-payout-form select {
	width: 100%;
	height: 36px;
	border: 1px solid var( --td-card-border, #e4e7ea );
	border-radius: 7px;
	padding: 0 12px;
	font: inherit;
	font-size: 13px;
	background: #fff;
	color: #1f2937;
	outline: 0;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}
.tdrop-topup-form input[type="text"]::placeholder,
#tdrop-payout-form input[type="text"]::placeholder {
	color: var( --td-tab-color-2, #afc3ce );
}
.tdrop-topup-form input[type="text"]:focus,
.tdrop-topup-form select:focus,
#tdrop-payout-form input[type="text"]:focus,
#tdrop-payout-form select:focus {
	border-color: var( --td-tab-color, #4e7184 );
	box-shadow: 0 0 0 3px rgba( 78, 113, 132, 0.10 );
}
.tdrop-topup-form input.tdrop-invalid,
#tdrop-payout-form input.tdrop-invalid {
	border-color: #fecaca;
	box-shadow: 0 0 0 3px rgba( 254, 202, 202, .35 );
}

.tdrop-actions-full {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
}

.tdrop-topup-msg,
#tdrop-payout-msg {
	font-size: 12px;
	color: #6b7280;
	min-height: 16px;
}
.tdrop-topup-msg:empty,
#tdrop-payout-msg:empty { display: none; }

#tdrop-topup-submit,
#tdrop-payout-submit {
	width: 100%;
	height: 40px;
	background: #2dc270;
	color: #fff;
	border: 0;
	border-radius: 7px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}
#tdrop-topup-submit:hover:not(:disabled),
#tdrop-payout-submit:hover:not(:disabled) { background: #25a85f; }
#tdrop-topup-submit[disabled],
#tdrop-payout-submit[disabled] {
	opacity: .5;
	cursor: not-allowed;
	background: #d1d5db;
}

/* New-row highlight (3s green fade — kept from original UX) */
@keyframes tdrop-newfade {
	0%   { background-color: #ecfdf5; }
	100% { background-color: transparent; }
}
.tdrop-topup-table tbody tr.tdrop-new {
	animation: tdrop-newfade 3s ease-out forwards;
}

/* ============================================================
 * Payout view
 * ============================================================ */

#tdrop-payout-wrap {
	display: grid;
	grid-template-columns: minmax(0, 64%) minmax(0, 34%);
	gap: 2%;
	align-items: start;
}
.tdrop-payout-list-col {
	min-width: 0;
}
.tdrop-payout-list-col > .tdrop-card {
	max-width: 100%;
	overflow: hidden;
}
#tdrop-payout-wrap > .tdrop-card {
	position: sticky;
	top: 12px;
	align-self: start;
}

/* ----------------------------------------------------------------
 * Pending return-shipping holds section (#tab=payout, above the
 * form). Shown when the dropper has refusal/returned orders whose
 * cost is queued for debit on cancellation.
 * ---------------------------------------------------------------- */
.tdrop-holds {
	margin: 0 0 14px 0;
	padding: 12px;
	border: 1px solid var( --td-card-border, #e4e7ea );
	border-radius: 8px;
	background: #f8fafc;
}
.tdrop-holds[hidden] { display: none; }

.tdrop-holds__head {
	font-size: 12px;
	font-weight: 600;
	color: #4e7184;
	margin-bottom: 8px;
	letter-spacing: 0.01em;
}

.tdrop-holds__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 8px;
}
.tdrop-holds__td {
	padding: 6px 0;
	border-top: 1px dashed #e4e7ea;
	font-size: 13px;
	vertical-align: middle;
}
.tdrop-holds__table tr:first-child .tdrop-holds__td { border-top: 0; }
.tdrop-holds__td--order  { width: 90px; font-variant-numeric: tabular-nums; }
.tdrop-holds__td--order a { color: #2271b1; text-decoration: none; }
.tdrop-holds__td--order a:hover { text-decoration: underline; }
.tdrop-holds__td--status { width: 130px; }
.tdrop-holds__td--cost   { text-align: right; font-variant-numeric: tabular-nums; color: #1f2937; font-weight: 600; }

.tdrop-holds__status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	background: #eef2f6;
	color: #4e7184;
	white-space: nowrap;
}
.tdrop-holds__status--refusal  { background: #fef3f2; color: #b42318; }
.tdrop-holds__status--returned { background: #fff7e6; color: #b54708; }

.tdrop-holds__cost--est {
	color: #b54708;
	border-bottom: 1px dotted #b54708;
	cursor: help;
	position: relative;
	outline: 0;
}

.tdrop-holds__tip {
	position: absolute;
	bottom: calc(100% + 8px);
	right: -8px;
	background: #1f2937;
	color: #ffffff;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	width: 240px;
	white-space: normal;
	text-align: left;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s, visibility .15s;
	z-index: 20;
}

.tdrop-holds__tip::after {
	content: '';
	position: absolute;
	top: 100%;
	right: 16px;
	border: 6px solid transparent;
	border-top-color: #1f2937;
}

.tdrop-holds__cost--est:hover .tdrop-holds__tip,
.tdrop-holds__cost--est:focus .tdrop-holds__tip {
	opacity: 1;
	visibility: visible;
}

.tdrop-holds__totals {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 8px;
	border-top: 1px solid #e4e7ea;
	margin-top: 4px;
}
.tdrop-holds__total,
.tdrop-holds__available {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
}
.tdrop-holds__total span,
.tdrop-holds__available span { color: #636c72; }
.tdrop-holds__total strong { color: #b54708; font-variant-numeric: tabular-nums; }
.tdrop-holds__available strong { color: #2dc270; font-variant-numeric: tabular-nums; font-size: 15px; }
#tdrop-payout-list { padding: 0 !important; }
#tdrop-payout-list table col.col-date      { width: 110px; }
#tdrop-payout-list table col.col-type      { width: 130px; }
#tdrop-payout-list table col.col-recipient { width: auto; min-width: 180px; }
#tdrop-payout-list table col.col-amt       { width: 100px; }
#tdrop-payout-list table col.col-status    { width: 130px; }

@media (max-width: 900px) {
	#tdrop-payout-wrap { grid-template-columns: 1fr; gap: 14px; }
	#tdrop-payout-wrap > .tdrop-card { position: static; order: -1; }  /* form on top, list below */
}

/* ============================================================
 * Skeleton loaders (kept from original — used only if we hook
 * top-up history fetching later)
 * ============================================================ */

.tdrop-skel .sk-line {
	border-radius: 6px;
	background: #f1f5f9;
	position: relative;
	overflow: hidden;
	display: block;
	height: 14px;
}
.shimmer::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
	animation: tdrop-shimmer 1.2s infinite;
}
@keyframes tdrop-shimmer { 100% { transform: translateX(100%); } }

/* ============================================================
 * .tdrop-amt-balance — Залишок (running balance) cell.
 * Black + bold + tabular numerics. No sign coloring since it's a
 * snapshot, not a delta. (Fix #12.)
 * ============================================================ */

.tdrop-amt-balance {
	color: #1f2937;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
 * .tdrop-recipient — payout history Отримувач cell.
 * Truncated by default with ellipsis. Click anywhere on the cell
 * (except the copy button) to toggle .is-expanded which shows
 * the full per-line value list. Same UX as .td-admin-buyer on
 * the admin orders page. (Fix #6.)
 * ============================================================ */

.tdrop-recipient {
	max-width: 220px;
	font-size: 12px;
	color: #1f2937;
	cursor: pointer;
	overflow: hidden;
	max-height: 1.5em;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	white-space: nowrap;
	position: relative;
	transition: max-height .2s ease;
}
.tdrop-recipient.is-expanded {
	display: block;
	max-height: 400px;
	white-space: normal;
	-webkit-line-clamp: unset;
}
.tdrop-recipient__row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding: 2px 0;
}
.tdrop-recipient__key {
	color: #6b7280;
	font-size: 11px;
	min-width: 50px;
}
.tdrop-recipient__val {
	color: #1f2937;
	font-weight: 600;
	word-break: break-all;
}
/* When collapsed, the inner rows still show side-by-side via the
   single-line ellipsis on the parent. Once expanded, rows stack. */
.tdrop-recipient:not(.is-expanded) .tdrop-recipient__row {
	display: inline;
	padding: 0;
}
.tdrop-recipient:not(.is-expanded) .tdrop-recipient__row + .tdrop-recipient__row::before {
	content: " · ";
	color: #d1d5db;
}
.tdrop-recipient:not(.is-expanded) .td-copy__btn {
	display: none;
}

/* ============================================================
 * .td-orders-pagination — compact strip used by topup + payout
 * tables below the table, right-aligned.
 * ============================================================ */

.td-orders-pagination {
	display: flex;
	justify-content: flex-end;
	gap: 4px;
	padding: 12px 16px;
	flex-wrap: wrap;
}
.td-orders-pagination:empty { display: none; }
.td-orders-pagination__btn {
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	background: #fff;
	border: 1px solid var( --td-card-border, #e4e7ea );
	border-radius: 6px;
	color: #4e7184;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
}
.td-orders-pagination__btn:hover:not(.is-current):not(:disabled) {
	background: #f8fafc;
	border-color: #afc3ce;
}
.td-orders-pagination__btn.is-current {
	background: #4e7184;
	color: #fff;
	border-color: #4e7184;
	cursor: default;
}
.td-orders-pagination__btn:disabled,
.td-orders-pagination__btn.is-disabled {
	opacity: .4;
	cursor: not-allowed;
}
.td-orders-pagination__sep {
	display: inline-flex;
	align-items: center;
	padding: 0 4px;
	color: #9ca3af;
	font-size: 12px;
}

/* ============================================================
 * Return-shipping dispute — affordances on /balance/ summary rows
 * + the modal that opens for submitting a dispute.
 * ============================================================ */

/* Amount cell — when a dispute affordance is present it stacks
 * below the amount as a small column. Without it, the cell behaves
 * exactly as before. */
.tdrop-td-amount {
	white-space: nowrap;
}

/* The dispute button + status pill sit directly below the debit
 * amount in the same cell. Forced onto their own line via the
 * tdrop-td-amount > selector so the amount text stays clean. */
.tdrop-td-amount .tdrop-dispute-btn,
.tdrop-td-amount .tdrop-dispute-pill {
	display: block;
	width: fit-content;
}

.tdrop-dispute-btn {
	display: inline-flex;
	align-items: center;
	margin-top: 6px;
	padding: 3px 10px;
	border-radius: 5px;
	border: 1px solid #afc3ce;
	background: #ffffff;
	color: #4e7184;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
}
.tdrop-dispute-btn:hover {
	background: #4e7184;
	color: #ffffff;
	border-color: #4e7184;
}

.tdrop-dispute-pill {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 9px;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
}
.tdrop-dispute-pill--pending  { background: #fef3c7; color: #92400e; }
.tdrop-dispute-pill--approved { background: #d1fae5; color: #065f46; }
.tdrop-dispute-pill--rejected { background: #fee2e2; color: #991b1b; }

/* Modal overlay. */
.tdrop-disp-modal[hidden] { display: none; }
.tdrop-disp-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tdrop-disp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 41, 55, .55);
}
.tdrop-disp-modal__card {
	position: relative;
	width: min(560px, calc(100vw - 24px));
	max-height: calc(100vh - 40px);
	overflow: auto;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
	display: flex;
	flex-direction: column;
}
.tdrop-disp-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid #e5e7eb;
}
.tdrop-disp-modal__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #1f2937;
	letter-spacing: 0;
}
.tdrop-disp-modal__close {
	background: none;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: #636c72;
	cursor: pointer;
	padding: 4px 8px;
}
.tdrop-disp-modal__close:hover { color: #1f2937; }

.tdrop-disp-modal__body {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tdrop-disp-modal__label {
	font-size: 12px;
	font-weight: 600;
	color: #4e7184;
	margin-top: 6px;
}
.tdrop-disp-modal__textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var( --td-card-border, #e4e7ea );
	border-radius: 7px;
	font-size: 13px;
	line-height: 1.5;
	resize: vertical;
	background: #f2f6f9;
	color: #1f2937;
	font-family: inherit;
}
.tdrop-disp-modal__textarea:focus {
	outline: 0;
	border-color: #4e7184;
	background: #ffffff;
}

/* Drop zone */
.tdrop-disp-modal__dropzone {
	position: relative;
	min-height: 110px;
	border: 1.5px dashed #afc3ce;
	border-radius: 8px;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color .12s, background .12s;
}
.tdrop-disp-modal__dropzone:hover { border-color: #4e7184; }
.tdrop-disp-modal__dropzone:focus { outline: 0; border-color: #4e7184; }
.tdrop-disp-modal__dropzone.is-drag {
	border-color: #2dc270;
	background: #f0fdf4;
}
.tdrop-disp-modal__dz-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: #4e7184;
	font-size: 12px;
	text-align: center;
	padding: 10px;
}
.tdrop-disp-modal__dz-link {
	color: #2271b1;
	text-decoration: underline;
	cursor: pointer;
}
.tdrop-disp-modal__dz-hint {
	font-size: 11px;
	color: #7c7c7c;
}
.tdrop-disp-modal__dz-preview {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
}
.tdrop-disp-modal__dz-thumb {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	background: #ffffff;
	border: 1px solid var( --td-card-border, #e4e7ea );
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4e7184;
	font-weight: 700;
	font-size: 12px;
}
.tdrop-disp-modal__dz-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tdrop-disp-modal__dz-thumb.is-pdf {
	background: #fff7e6;
	color: #b54708;
}
.tdrop-disp-modal__dz-fname {
	flex: 1;
	font-size: 13px;
	color: #1f2937;
	word-break: break-all;
}
.tdrop-disp-modal__dz-remove {
	background: none;
	border: 0;
	font-size: 18px;
	line-height: 1;
	color: #636c72;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 50%;
}
.tdrop-disp-modal__dz-remove:hover {
	color: #ffffff;
	background: #e5484d;
}

.tdrop-disp-modal__err {
	color: #b42318;
	font-size: 12px;
	padding: 6px 10px;
	background: #fef3f2;
	border-radius: 6px;
	border: 1px solid #fecdca;
}

.tdrop-disp-modal__foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 18px;
	border-top: 1px solid #e5e7eb;
	background: #fafbfc;
	border-radius: 0 0 10px 10px;
}
.tdrop-disp-modal__btn {
	padding: 8px 16px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .12s, color .12s, border-color .12s, opacity .12s;
}
.tdrop-disp-modal__btn--cancel {
	background: #ffffff;
	border-color: var( --td-card-border, #e4e7ea );
	color: #4e7184;
}
.tdrop-disp-modal__btn--cancel:hover {
	background: #f8fafc;
	border-color: #afc3ce;
}
.tdrop-disp-modal__btn--submit {
	background: #2dc270;
	color: #ffffff;
}
.tdrop-disp-modal__btn--submit:hover:not(:disabled) {
	background: #25a861;
}
.tdrop-disp-modal__btn--submit:disabled {
	opacity: .5;
	cursor: not-allowed;
}

body.tdrop-disp-open { overflow: hidden; }

/* ============================================================
 * Mobile-only: subbar layout + horizontal-scroll wrappers for
 * the three tables (ledger, topup, payout). The .tdrop-table-scroll
 * wrapper is inserted around each table in balance.php so the
 * table can overflow horizontally while the pagination footers
 * stay outside the scroll area.
 * ============================================================ */

/* On desktop the scroll wrapper is a transparent passthrough — no
 * overflow, no extra layout. Mobile (below) is where it actually
 * enables horizontal scrolling. */
.tdrop-table-scroll {
	width: 100%;
}

@media (max-width: 720px) {
	/* Subbar — title centered above, search box full-width below. */
	.tdrop-subbar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.tdrop-subbar-title {
		text-align: center;
	}
	.tdrop-search,
	.tdrop-search input {
		width: 100%;
	}

	/* Tables — allow horizontal scroll on the wrapper and force a
	 * comfortable min-width on the table itself so cells aren't
	 * crushed. Mirrors the .td-orders__table-wrap pattern from
	 * /my-orders/. The pagination footers stay outside the scroll
	 * wrapper so they always fill the visible width. */
	.tdrop-table-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.tdrop-table-scroll .tdrop-ledger,
	.tdrop-table-scroll .tdrop-topup-table,
	#tdrop-payout-list .tdrop-table-scroll table {
		min-width: 720px;
	}
}