/*
 * My Orders page — /my-orders/
 *
 * - Shell: full-width with comfortable side padding so the bordered
 *   table card looks centered without a fixed max-width crushing
 *   the columns.
 * - Toolbar: tabs left | search center (with hover tooltip) | report right.
 * - Table: rounded-card style with 1px border + header band. All cells
 *   left-aligned. No horizontal scroll — column widths chosen so the
 *   minimum content fits within a typical desktop viewport.
 * - Actions: 2x2 SVG-icon buttons, square, total height = thumb height.
 * - Thumbs: fixed 64x64 with a thin grey border.
 */

:root {
	--td-thumb-size:  64px;
	--td-action-size: 30px;  /* (--td-thumb-size - 4) / 2 */
	--td-action-gap:  4px;
	--td-tab-color:   #4e7184;
	--td-tab-color-2: #afc3ce;
	--td-card-border: #e4e7ea;
}

/* ============================================================
 * Shell — comfortable side padding for the bordered table card
 * ============================================================ */

.td-orders__shell {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0 0 48px;
	box-sizing: border-box;
}

/* ============================================================
 * Toolbar
 * ============================================================ */

.td-orders__toolbar {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}

.td-orders__tabs {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

.td-orders__tab {
	display: inline-flex;
	align-items: center;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var( --td-tab-color-2 );
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

.td-orders__tab:hover         { color: var( --td-tab-color ); }
.td-orders__tab.is-active     { color: var( --td-tab-color ); border-bottom-color: var( --td-tab-color ); }

/* Search — centered, wider (300px) so dropper can see what they
 * typed; tooltip restored below on hover/focus. */
.td-orders__search {
	position: relative;
	flex: 0 0 auto;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

/* On /my-returns/ there's no report button after the search, so the
 * "centered" margin would leave it floating mid-toolbar. Push to the
 * right edge to match the visual position of the orders search. */
.td-returns__shell .td-orders__search { margin-left: auto; margin-right: 0; }

.td-orders__search-input {
	width: 300px;
	height: 36px;
	padding: 0 36px 0 14px;
	background: #ffffff;
	border: 1px solid var( --td-card-border );
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	color: #1f2937;
	transition: border-color .15s, box-shadow .15s;
}

.td-orders__search-input::placeholder { color: var( --td-tab-color-2 ); }

.td-orders__search-input:focus {
	outline: none;
	border-color: var( --td-tab-color );
	box-shadow: 0 0 0 3px rgba( 78, 113, 132, 0.10 );
}

.td-orders__search-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY( -50% );
	pointer-events: none;
	color: var( --td-tab-color-2 );
	display: inline-flex;
}

.td-orders__search-icon svg {
	width: 16px;
	height: 16px;
}

.td-orders__search-tip {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate( -50%, -4px );
	margin-top: 6px;
	padding: 6px 10px;
	background: #1f2937;
	color: #ffffff;
	font-size: 11px;
	font-weight: 500;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
	z-index: 10;
}

.td-orders__search:hover .td-orders__search-tip,
.td-orders__search-input:focus ~ .td-orders__search-tip {
	opacity: 1;
	transform: translate( -50%, 0 );
}

/* Report-payment button.
 *
 * Desktop: a normal text button reading "Повідомити про оплату" —
 * unchanged from the original look. The bell SVG inside is hidden
 * via .td-orders__report-icon's default display: none.
 *
 * Mobile: see the @media block at the bottom of this file — the
 * button shrinks to a 42x42 icon-only square that visually aligns
 * with the .td-search__btn submit button and the .td-mobile-cart
 * pill (all three share var(--td-search-height, 42px)), and the
 * text label is hidden in favor of the bell icon.
 */
.td-orders__report-payment {
	position: relative;
	flex-shrink: 0;
	padding: 9px 16px;
	background: #f2f6f9;
	color: #c6d2db;
	border: 0;
	border-radius: 7px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.td-orders__report-icon {
	display: none;
}

.td-orders__report-payment.is-empty     { cursor: not-allowed; }
.td-orders__report-payment.has-pending  { background: #f4f4f4; color: #2dc270; }
.td-orders__report-payment.has-pending:hover { background: #e8e8e8; }

.td-orders__report-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: #9ca3af;
	color: #ffffff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 0 0 2px #ffffff;
}

.td-orders__report-badge.has-value { background: #2dc270; }

/* ============================================================
 * Empty state + panels
 * ============================================================ */

.td-orders__panel { margin: 0; }

.td-orders__empty {
	padding: 64px 24px;
	background: #ffffff;
	border: 1px solid var( --td-card-border );
	border-radius: 10px;
	text-align: center;
	color: var( --td-tab-color );
}

.td-orders__empty p {
	margin: 0 0 16px;
	font-size: 15px;
}

.td-orders__empty-cta {
	display: inline-block;
	padding: 10px 22px;
	background: #2dc270;
	color: #ffffff;
	border-radius: 7px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background .15s;
}

.td-orders__empty-cta:hover { background: #1d9350; color: #ffffff; }

/* ============================================================
 * Orders table — bordered card, rounded corners
 * ============================================================ */

.td-orders__table-wrap {
	background: #ffffff;
	border: 1px solid var( --td-card-border );
	border-radius: 10px;
	overflow: hidden;
}

.td-orders__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 13px;
}

.td-orders__th {
	padding: 11px 10px;
	background: #f9f9f9;
	color: var( --td-tab-color );
	font-weight: 600;
	text-align: left;
	border-bottom: 1px solid var( --td-card-border );
	font-size: 12px;
	line-height: 1.25;
	letter-spacing: .01em;
	/* Multi-word headers wrap naturally so the column can be narrower
	 * than the unbroken header text. */
	white-space: normal;
	word-break: keep-all;
	vertical-align: middle;
}

/* Column widths chosen so the typical content fits inside a 1200px
 * shell without horizontal scroll. The buyer column is the only
 * flexible one — it takes whatever's left. */
/* Column widths — explicit pixel values for every column. With
 * table-layout: fixed + width: 100%, the browser distributes the
 * 100% proportionally based on these widths. min-width is ignored
 * under fixed layout, so the buyer column needs a real width — not
 * the auto/min-width combo I had before. */
.td-orders__th--thumb    { width: 76px; }
.td-orders__th--date     { width: 70px; }
.td-orders__th--num      { width: 86px; }
.td-orders__th--code     { width: 76px; }   /* fits 6-digit SKU + "1шт" line */
.td-orders__th--buyer    { width: 124px; }  /* explicit — phone always fits */
.td-orders__th--money    { width: 72px; }
.td-orders__th--ttn      { width: 145px; }
.td-orders__th--status   { width: 96px; }
.td-orders__th--actions  { width: 76px; }

.td-orders__row {
	border-bottom: 1px solid #eef0f2;
	transition: background .12s;
}

.td-orders__row:hover { background: #f8fafc; }

.td-orders__row:last-child           { border-bottom: 0; }
.td-orders__row--multi.td-orders__row--first        { border-bottom: 1px dashed #eef0f2; }
.td-orders__row--multi.td-orders__row--continuation { border-bottom: 1px solid #eef0f2; }

/* All td cells default to left-aligned + top-aligned content. */
.td-orders__td {
	padding: 10px;
	text-align: left;
	vertical-align: middle;
}

/* ---- Thumbnail ---- */
.td-orders__td--thumb { width: 80px; }

.td-orders__thumb-link {
	display: block;
	text-decoration: none;
}

.td-orders__thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 1px solid var( --td-card-border );
	border-radius: 6px;
	background: #f8fafc;
	overflow: hidden;
}

.td-orders__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Date ---- */
.td-orders__td--date {
	color: #1f2937;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-size: 12px;
}

.td-orders__time {
	margin-top: 2px;
	font-size: 11px;
	color: #7c7c7c;
}

/* ---- Замовлення # — plain number, no decorations ---- */
.td-orders__td--num {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: #1f2937;
	font-size: 12px;
}

/* ---- Код (SKU link + qty below as plain text) ---- */
.td-orders__td--code {
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}

.td-orders__code-link {
	color: #1f2937;
	text-decoration: none;
	font-weight: 500;
}

.td-orders__code-link:hover { color: var( --td-tab-color ); }

.td-orders__code-qty {
	color: #7c7c7c;
	font-size: 11px;
	margin-top: 2px;
}

/* ---- Buyer cell — fixed minimum width for phone, ellipsis on long
 * lines, expand vertically on click ----
 *
 * Default: every line ellipsed to one line. On is-expanded, lines
 * wrap normally (vertical growth only — the column width never
 * changes). The cell has overflow:hidden so the rowspan-shared cell
 * stays consistent height across continuation rows.
 */
.td-orders__td--buyer {
	/* Width comes from the .td-orders__th--buyer rule under
	 * table-layout: fixed. No min-width needed here. */
}

.td-orders__buyer {
	cursor: pointer;
	line-height: 1.45;
}

.td-orders__buyer:focus { outline: 2px solid rgba(78,113,132,0.2); outline-offset: 2px; border-radius: 4px; }

.td-orders__buyer-name,
.td-orders__buyer-phone,
.td-orders__buyer-address {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.td-orders__buyer-name {
	color: #1f2937;
	font-weight: normal;
}

.td-orders__buyer-phone {
	color: var( --td-tab-color );
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	text-decoration: none;
}

.td-orders__buyer-phone:hover { text-decoration: underline; }

.td-orders__buyer-address {
	color: #636c72;
	font-size: 12px;
}

.td-orders__buyer.is-expanded .td-orders__buyer-name,
.td-orders__buyer.is-expanded .td-orders__buyer-phone,
.td-orders__buyer.is-expanded .td-orders__buyer-address {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

/* ---- Money cells ---- */
.td-orders__td--money {
	font-variant-numeric: tabular-nums;
	color: #1f2937;
	white-space: nowrap;
}

.td-orders__td--income.is-positive { color: #2dc270; font-weight: 600; }
.td-orders__td--income.is-negative { color: #ef4444; font-weight: 600; }
.td-orders__td--income.is-zero     { color: #9ca3af; }

/* ---- TTN ---- */
.td-orders__td--ttn {
	font-variant-numeric: tabular-nums;
	font-size: 12px;
}

.td-orders__ttn-link {
	color: var( --td-tab-color );
	font-weight: 500;
	text-decoration: none;
}

.td-orders__ttn-link:hover { text-decoration: underline; }

/* Dropper-provided TTN (the dropper uploaded a PDF rather than us
 * generating it) — purple signals "not under our NP account". Same
 * cue lives on the admin orders page. */
.td-orders__ttn-link.is-dropper        { color: #8b5cf6; }
.td-orders__ttn-link.is-dropper:hover  { color: #7c3aed; }

.td-orders__dash { color: #c1c8cf; }

/* ============================================================
 * Copy-to-clipboard inline pairs
 *
 * Wrap a value + an icon button. The value sits left, the icon
 * sits right with a tight 4px gap, both vertically centered.
 * Button is bare (no bg) by default and shows a subtle hover state
 * so it doesn't compete with the value visually.
 * ============================================================ */

.td-copy {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	vertical-align: middle;
}

.td-copy__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 4px;
	color: #afc3ce;
	cursor: pointer;
	transition: background .12s, color .12s, transform .08s;
	flex-shrink: 0;
}

.td-copy__btn svg {
	width: 12px;
	height: 12px;
	display: block;
}

.td-copy__btn:hover {
	background: #eef3f5;
	color: var( --td-tab-color );
}

.td-copy__btn:active {
	transform: scale( 0.92 );
}

/* Just-copied confirmation — class toggled on by JS for ~1s */
.td-copy__btn.is-copied {
	background: #d4f5e2;
	color: #1d6f3d;
}

/* Copy-button tooltip — see floating-tip block; not a CSS ::after. */

/* Phone row inside the buyer cell — the copy button shouldn't break
 * the inline ellipsis behaviour. */
.td-orders__buyer-phone-row {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	max-width: 100%;
}

.td-orders__buyer-phone-row .td-orders__buyer-phone {
	display: inline-block;  /* override the block default for ellipsis behaviour */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: calc( 100% - 20px );
}

/* ---- Status ---- */
.td-status__primary {
	font-size: 12px;
	font-weight: 500;
	color: #1f2937;
	line-height: 1.3;
}

.td-status__secondary {
	margin-top: 2px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
}

/* ============================================================
 * Action buttons — 2x2 grid, square, SVG icons
 * ============================================================ */

.td-orders__td--actions { width: 80px; }

.td-actions {
	display: grid;
	grid-template-columns: var( --td-action-size ) var( --td-action-size );
	grid-template-rows:    var( --td-action-size ) var( --td-action-size );
	gap: var( --td-action-gap );
	width: calc( var( --td-action-size ) * 2 + var( --td-action-gap ) );
	height: var( --td-thumb-size );
}

.td-actions__btn {
	position: relative;
	width: var( --td-action-size );
	height: var( --td-action-size );
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: #f4f6f8;
	color: #c6d2db;
	font-family: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s, border-color .15s;
}

.td-actions__btn svg {
	width: 14px;
	height: 14px;
	display: block;
}

.td-actions__btn:not(:disabled):not(.is-disabled):hover {
	background: #e9edf1;
	color: var( --td-tab-color );
}

.td-actions__btn:disabled,
.td-actions__btn.is-disabled {
	cursor: not-allowed;
	background: #f4f4f4;
	color: #dadee2;
}

.td-actions__btn--question.is-active { color: var( --td-tab-color ); background: #eef3f5; }
.td-actions__btn--cancel.is-active   { color: #cea7a7;             background: #fbf0f0; }
.td-actions__btn--return.is-active   { color: #ccb392;             background: #faf3ea; }
.td-actions__btn--log.is-active      { color: var( --td-tab-color ); background: #eef3f5; }

/* Action button tooltips are portaled to <body> by JS (see
 * my-orders.php) so they escape the table-wrap's overflow:hidden.
 * Styled as .td-floating-tip below. */

/* ============================================================
 * Fresh-order highlight
 * ============================================================ */

@keyframes td-orders-fresh-flash {
	0%   { background-color: #d4f5e2; }
	60%  { background-color: #d4f5e2; }
	100% { background-color: transparent; }
}

.td-orders__row.is-fresh > td,
.td-orders__row.is-fresh > th {
	animation: td-orders-fresh-flash 4s ease forwards;
}

/* ============================================================
 * No-results row
 * ============================================================ */

.td-orders__no-results {
	padding: 32px 16px !important;
	text-align: center;
	color: #7c7c7c;
	font-size: 13px;
}

/* ============================================================
 * Floating tooltip — portaled to <body> by JS
 *
 * Action and copy buttons get their tooltips rendered as a sibling
 * of <body> so they aren't clipped by the table-wrap's overflow:
 * hidden (needed for the rounded card corners). The JS positions
 * the tip above the trigger element using getBoundingClientRect.
 * ============================================================ */

.td-floating-tip {
	position: absolute;
	transform: translate( -50%, calc( -100% - 6px ) ) translateY( 4px );
	padding: 4px 8px;
	background: #1f2937;
	color: #ffffff;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .12s ease, transform .12s ease;
	z-index: 9999;
}

.td-floating-tip.is-visible {
	opacity: 1;
	transform: translate( -50%, calc( -100% - 6px ) );
}

/* ============================================================
 * Pagination footer — page nav + per-page selector + range info
 * ============================================================ */

.td-orders__footer {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 4px;
	font-size: 12px;
	color: #4e7184;
}

.td-orders__pagination {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;  /* pushes pagination to the right edge */
}

.td-orders__page-btn {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #e4e7ea;
	border-radius: 6px;
	background: #ffffff;
	color: #4e7184;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .12s, color .12s, border-color .12s;
}

.td-orders__page-btn:not(:disabled):hover {
	background: #f2f6f9;
	border-color: #c6d2db;
	color: #1f2937;
}

.td-orders__page-btn:disabled {
	cursor: not-allowed;
	opacity: .45;
}

.td-orders__page-info {
	margin: 0 6px;
	color: #4e7184;
	font-variant-numeric: tabular-nums;
}

.td-orders__per-page {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.td-orders__per-page select {
	height: 28px;
	padding: 0 24px 0 8px;
	border: 1px solid #e4e7ea;
	border-radius: 6px;
	background: #ffffff;
	color: #1f2937;
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
}

/* ============================================================
 * Responsive — mobile pass deferred per project plan
 * ============================================================ */
@media ( max-width: 1100px ) {
	/* Allow horizontal scroll only on narrow viewports rather than
	 * crushing every cell. */
	.td-orders__table-wrap { overflow-x: auto; }
	.td-orders__table      { min-width: 1100px; }
}

@media ( max-width: 820px ) {
	.td-orders__toolbar { flex-wrap: wrap; }
	.td-orders__search  { order: 3; margin: 0; width: 100%; }
	.td-orders__search-input { width: 100%; }
	/* Tabs on the left, icon button on the right of row 1.
	 * Search wraps to row 2 (full width) via order: 3 above.
	 *
	 * Icon-only conversion lives in this @media block — desktop keeps
	 * the original text button. Size locks to --td-search-height (42px
	 * fallback) so the bell button visually aligns with the .td-search__btn
	 * submit button and the .td-mobile-cart pill on the rest of the page. */
	.td-orders__report-payment {
		width: var(--td-search-height, 42px);
		height: var(--td-search-height, 42px);
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
	}
	.td-orders__report-text { display: none; }
	.td-orders__report-icon {
		display: block;
		width: 20px;
		height: 20px;
	}
}

/* ============================================================
 * Report-payment modal
 * Triggered by .td-orders__report-payment (#td-report-payment).
 * Lists awaiting-payment orders with checkboxes; on submit
 * fires topdrop_order_payment_report per selected order.
 * ============================================================ */

.td-report-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 17, 24, 39, 0.55 );
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
}
.td-report-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.td-report-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	overflow-y: auto;
	padding: 5vh 16px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.18s ease;
}
.td-report-modal.is-open {
	opacity: 1;
}
.td-report-modal.is-open .td-report-modal__wrap {
	pointer-events: auto;
}

.td-report-modal__wrap {
	position: relative;
	width: min( 640px, 100% );
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.25 );
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: 90vh;
}

.td-report-modal__close {
	position: absolute;
	right: 12px;
	top: 10px;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: #6b7280;
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.15s, color 0.15s;
}
.td-report-modal__close:hover { background: #f3f4f6; color: #1f2937; }

.td-report-modal__head {
	padding: 18px 24px 12px;
	border-bottom: 1px solid var( --td-card-border, #e4e7ea );
}
.td-report-modal__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: #1f2937;
}

.td-report-modal__bank {
	padding: 12px 24px;
	background: #fafbfc;
	border-bottom: 1px solid var( --td-card-border, #e4e7ea );
}

.td-report-modal__list {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 24px;
	min-height: 100px;
	max-height: 42vh;
}
.td-report-modal__loader,
.td-report-modal__empty {
	padding: 32px 12px;
	text-align: center;
	color: #9ca3af;
	font-style: italic;
	font-size: 13px;
}

.td-report-modal__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f1f5f9;
	cursor: pointer;
	transition: background 0.12s;
}
.td-report-modal__row:last-child { border-bottom: 0; }
.td-report-modal__row:hover { background: #f8fafc; }
.td-report-modal__check {
	width: 18px;
	height: 18px;
	cursor: pointer;
}
.td-report-modal__thumb {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
	flex: 0 0 auto;
}
.td-report-modal__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.td-report-modal__thumb-placeholder {
	width: 100%;
	height: 100%;
	background: #f1f5f9;
}
.td-report-modal__meta { flex: 1 1 auto; min-width: 0; }
.td-report-modal__num {
	font-weight: 600;
	font-size: 13px;
	color: #1f2937;
}
.td-report-modal__items {
	font-size: 11px;
	color: #9ca3af;
	margin-top: 2px;
}
.td-report-modal__price {
	font-weight: 700;
	font-size: 14px;
	color: var( --td-tab-color, #4e7184 );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.td-report-modal__foot {
	padding: 14px 24px 18px;
	background: #f8fafc;
	border-top: 1px solid var( --td-card-border, #e4e7ea );
}
.td-report-modal__inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 12px;
}
.td-report-modal__input {
	height: 36px;
	padding: 6px 10px;
	border: 1px solid var( --td-card-border, #e4e7ea );
	border-radius: 7px;
	font: inherit;
	font-size: 13px;
	color: #1f2937;
	background: #fff;
	outline: 0;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}
.td-report-modal__input:focus {
	border-color: var( --td-tab-color, #4e7184 );
	box-shadow: 0 0 0 3px rgba( 78, 113, 132, 0.10 );
}
.td-report-modal__total {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 14px;
	color: #1f2937;
	margin-bottom: 12px;
}
.td-report-modal__total strong {
	font-size: 17px;
	font-weight: 700;
	color: #1f2937;
	font-variant-numeric: tabular-nums;
}
.td-report-modal__count {
	margin-left: auto;
	font-size: 12px;
	color: #6b7280;
}
.td-report-modal__count span { font-weight: 600; color: #1f2937; }

.td-report-modal__submit {
	width: 100%;
	height: 44px;
	background: #2dc270;
	color: #fff;
	border: 0;
	border-radius: 7px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
}
.td-report-modal__submit:hover:not(:disabled) { background: #25a85f; }
.td-report-modal__submit:disabled {
	background: #d1d5db;
	cursor: not-allowed;
	opacity: 0.6;
}
.td-report-modal__msg {
	margin-top: 10px;
	font-size: 12px;
	color: #6b7280;
	text-align: center;
	min-height: 16px;
}

@media ( max-width: 480px ) {
	.td-report-modal__wrap     { max-height: 95vh; border-radius: 8px; }
	.td-report-modal__head     { padding: 14px 16px 8px; }
	.td-report-modal__bank,
	.td-report-modal__list,
	.td-report-modal__foot     { padding-left: 16px; padding-right: 16px; }
	.td-report-modal__thumb    { width: 40px; height: 40px; }
	.td-report-modal__inputs   { grid-template-columns: 1fr; }
}

/* ============================================================
 * "Дії" action modals (question / cancel / return / log)
 * ============================================================ */
.td-act-overlay {
	position: fixed; inset: 0;
	background: rgba( 15, 23, 42, .45 );
	display: none; z-index: 100000;
}
.td-act-overlay.is-open { display: block; }

/* Full-screen flex container that centres the card. Flex centring (rather
 * than left/top:50% + translate) so the card is centred the instant the
 * modal is shown — the transform version left it off to one side until the
 * first interaction forced a reflow. */
.td-act-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	z-index: 100001;
	pointer-events: none;  /* clicks outside the card fall through to the overlay → close */
}
.td-act-modal.is-open { display: flex; }
.td-act-modal__wrap {
	pointer-events: auto;
	width: 460px;
	max-width: 100%;
	max-height: calc( 100vh - 48px );
	overflow-y: auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba( 0,0,0,.28 );
	padding: 22px;
	position: relative;
}
.td-act-modal__close {
	position: absolute; top: 12px; right: 14px;
	background: none; border: 0; cursor: pointer;
	font-size: 24px; line-height: 1; color: #9ca3af;
}
.td-act-modal__close:hover { color: #4e7184; }
.td-act-modal__title {
	font-size: 17px; font-weight: 700; color: #1f2937;
	margin: 0 30px 14px 0;
}
.td-act-modal__num { color: #4e7184; font-weight: 600; }
.td-act-modal__lead { color: #636c72; margin: 0 0 18px; line-height: 1.5; }
.td-act-modal__label {
	display: block; font-size: 12px; font-weight: 600;
	color: #4e7184; margin: 12px 0 5px;
}
.td-act-modal__select,
.td-act-modal__input,
.td-act-modal__textarea {
	width: 100%; box-sizing: border-box;
	border: 1px solid #d6dce0; border-radius: 7px;
	padding: 9px 11px; font-size: 14px; font-family: inherit;
	background: #f2f6f9;
}
.td-act-modal__textarea { min-height: 90px; resize: vertical; }
.td-act-modal__select:focus,
.td-act-modal__input:focus,
.td-act-modal__textarea:focus {
	outline: none; border-color: #4e7184; background: #fff;
	box-shadow: 0 0 0 2px rgba( 78,113,132,.15 );
}
.td-act-modal__hint { font-size: 12px; color: #9ca3af; margin: 8px 0 0; }
.td-act-modal__cardrow { display: none; }
.td-act-modal__cardrow.is-visible { display: block; }
.td-act-modal__foot {
	display: flex; justify-content: flex-end; gap: 8px;
	margin-top: 20px;
}
.td-act-btn {
	height: 36px; padding: 0 18px;
	border-radius: 7px; border: 0; cursor: pointer;
	font-size: 13px; font-weight: 600;
}
.td-act-btn--ghost  { background: #f2f6f9; color: #4e7184; }
.td-act-btn--ghost:hover { background: #e7eef2; }
.td-act-btn--primary { background: #2dc270; color: #fff; }
.td-act-btn--primary:hover { background: #25a861; }
.td-act-btn--danger { background: #e5484d; color: #fff; }
.td-act-btn--danger:hover { background: #d23c41; }
.td-act-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Log timeline */
.td-act-log { max-height: 50vh; overflow-y: auto; }
.td-act-log__loader,
.td-act-log__empty { color: #9ca3af; text-align: center; padding: 24px 0; }
.td-act-log__row {
	border-left: 2px solid #e4e7ea;
	padding: 0 0 14px 14px; position: relative;
}
.td-act-log__row::before {
	content: ''; position: absolute; left: -5px; top: 4px;
	width: 8px; height: 8px; border-radius: 50%;
	background: #4e7184;
}
.td-act-log__meta {
	display: flex; gap: 10px; align-items: baseline;
	font-size: 11px; margin-bottom: 2px;
}
.td-act-log__time  { color: #1f2937; font-weight: 600; }
.td-act-log__actor { color: #9ca3af; }
.td-act-log__msg   { font-size: 13px; color: #374151; line-height: 1.4; white-space: pre-wrap; }
.td-act-log__details { margin-top: 4px; }
.td-act-log__details a { color: #2dc270; text-decoration: none; font-size: 13px; font-weight: 600; }
.td-act-log__details a:active { opacity: .7; }

/* My Returns table — column widths + cell tweaks (mirrors orders) */
.td-returns__th--type   { width: 90px; }
.td-returns__th--reason { width: 130px; }
.td-returns__th--ttn    { width: 130px; }   /* "20 4514 3966 7978" */
.td-returns__th--card   { width: 145px; }   /* "1212 1212 1212 1212" */

.td-returns__td--ttn,
.td-returns__td--card { font-variant-numeric: tabular-nums; color: #1f2937; white-space: nowrap; }
/* value + copy sit together on one line, icon right after the value */
.td-returns__td--ttn .td-copy,
.td-returns__td--card .td-copy { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.td-returns__td--ttn .td-copy__value,
.td-returns__td--card .td-copy__value { flex: 0 0 auto; }

.td-returns__order { font-weight: 600; color: #4e7184; text-decoration: none; }
.td-returns__order:hover { text-decoration: underline; }

/* Reason — single-line ellipsis, expand on click */
.td-returns__reason {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 130px;
	cursor: pointer;
	color: #374151;
}
.td-returns__reason.is-expanded {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	max-width: none;
}

/* Status / type pills (match admin returns-view look) */
.td-ret-status { display: inline-block; padding: 2px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: normal; word-break: break-word; }
.td-ret-status + .td-ret-status { margin-top: 4px; }
.td-ret-status--type { background: #eef2f6; color: #4e7184; }
.td-ret-receipt, .td-ret-newttn { display: inline-block; font-size: 11px; color: #2271b1; text-decoration: none; margin-top: 6px; }
.td-ret-receipt:hover, .td-ret-newttn:hover { text-decoration: underline; }
.td-orders__td--status { line-height: 1.4; }

/* Return modal — returns address block */
.td-r-addr {
	background: #f2f6f9;
	border: 1px solid var(--td-card-border, #e4e7ea);
	border-radius: 7px;
	padding: 12px 14px;
	margin: 4px 0 14px;
}
.td-r-addr__title {
	font-size: 13px; font-weight: 700; color: #4e7184;
	margin-bottom: 8px;
}
.td-r-addr__row {
	display: flex; align-items: center; gap: 6px;
	padding: 3px 0; font-size: 13px;
}
.td-r-addr__label { color: #7c7c7c; min-width: 92px; }
.td-r-addr__value { color: #1f2937; font-weight: 600; }
.td-r-addr__copy {
	background: none; border: 0; cursor: pointer;
	color: #afc3ce; padding: 2px; line-height: 0;
	flex-shrink: 0;
}
.td-r-addr__copy svg { width: 15px; height: 15px; }
.td-r-addr__copy:hover { color: #4e7184; }
.td-r-addr__copy.is-copied { color: #2dc270; }

/* Return modal — inline validation (red border only) */
.td-act-modal__input.is-invalid,
.td-act-modal__textarea.is-invalid {
	border-color: #e5484d !important;
	box-shadow: 0 0 0 3px rgba(229, 72, 77, .12);
}