`), so matching the
class alone hid every stat card on those tabs. */
.tc-aff-profile-page #view-affiliate .ui-affiliate-tab-wrapper > div.margin-top:not(.margin-bottom):empty,
.tc-aff-profile-page #view-affiliate .ui-affiliate-tab-wrapper > .clear.margin-bottom:empty { display: none; }
/* ===== Settings — 1551:14228 ============================================== */
/* Card row 2 ends at 501; the section title is 24 below it. */
.tc-aff-profile-page #view-affiliate .ui-affiliate-tab-wrapper > .margin-top.margin-bottom { margin: 24px 0 0; }
/* 1551:14230 / 14233 — "Settings" and "Products" are both 20/600/28, gap-17. */
.tc-aff-profile-page #view-affiliate h1 {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 28px;
letter-spacing: normal;
color: #364152;
margin: 0 0 17px;
}
/* 1551:14231 Label */
.tc-aff-profile-page #view-affiliate label[for="affiliate-master"] {
display: block;
margin: 0 0 4px;
padding: 0;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: normal;
color: #2b384a;
text-transform: none;
}
/* 1551:14231 Input Area — p-8 with a 16 icon slot, so the chevron's 8x4.94 glyph
centres 12 from the right edge. */
.tc-aff-profile-page #affiliate-cookie-lifetime {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
display: block;
width: 100%;
max-width: none;
height: 36px;
margin: 0;
padding: 8px 32px 8px 8px;
background: #ffffff url("/static/icons/affiliates/select-chevron.svg") no-repeat right 12px center;
background-size: 8px 4.94px;
border: 0;
border-radius: 8px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #364152;
/* Inside stroke: 8 + 20 + 8 = Figma's 36. */
box-shadow: inset 0 0 0 1px #d1d7de;
cursor: pointer;
}
/* 1551:14231 Additional Text */
.tc-aff-profile-page #view-affiliate #affiliate-cookie-lifetime + div {
margin: 4px 0 0;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #8493a8;
}
/* 1551:14232 — Save settings sits at x=0 under the field, not floated right. */
.tc-aff-profile-page #view-affiliate .margin-top.margin-bottom > .pull-right {
float: none;
margin: 17px 0 0;
}
.tc-aff-profile-page #view-affiliate .affiliate-settings-save {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 28px;
padding: 6px 8px;
border: 0;
border-radius: 6px;
background: #006b70;
box-shadow: none;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
color: #ffffff;
cursor: pointer;
}
/* ===== Commissions tab — Figma 1551:14481 ================================= */
/* 1551:14533 "Info" — a bordered callout, not the legacy grey panel
(`body.root .empty-state` paints #f9fafb with a 3.87em/3em padding). py-32 with
NO horizontal padding; the copy is centred and already matches the frame. */
.tc-aff-profile-page #view-affiliate .empty-state,
.tc-aff-profile-page #view-affiliate .empty-state.empty-state-help {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
width: 100%;
/* Cards end at 365, the callout starts at 404. Collapses against the stats
block's own 16 bottom margin, so this is the effective gap. */
margin: 39px 0 0;
padding: 32px 0;
border: 0;
/* Inside stroke, so the 32 padding stays exactly 32. */
box-shadow: inset 0 0 0 1px #d1d7de;
border-radius: 12px;
background: transparent;
text-align: center;
}
/* 1551:14535 — the heading, then 14534's gap-4 to the body copy. Figma groups the
two in a wrapper the markup has no element for, so the gaps live on the leaves. */
.tc-aff-profile-page #view-affiliate .empty-state h2 {
width: 100%;
margin: 0 0 4px;
padding: 0;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 28px;
letter-spacing: normal;
color: #364152;
cursor: default;
}
/* 1551:14536 — each paragraph is 14/400/20 #2a3648 with mb-8. */
.tc-aff-profile-page #view-affiliate .empty-state p {
display: block;
width: 100%;
margin: 0 0 8px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: normal;
color: #2a3648;
cursor: default;
}
/* 14533 declares gap-29 to the button, but that gap is measured from 14534, which
Figma clamped to h-83 while its own copy is ~100 tall — applying 29 verbatim puts
the button 17 BELOW where Figma draws it. 14537's own y=144 is the reliable
number, and it is what the frame renders: 32 + 28 + 4 + 40 + 8 + 20 + 12 = 144. */
.tc-aff-profile-page #view-affiliate .empty-state p:last-of-type { margin-bottom: 12px; }
/* 1551:14537 — solid teal, h-32, px-12 py-8, r6, gap-4. */
.tc-aff-profile-page #view-affiliate .empty-state a.pure-button,
.tc-aff-profile-page #view-affiliate .empty-state a.pure-button.button-large {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
box-sizing: border-box;
width: auto;
height: 32px;
margin: 0;
padding: 8px 12px;
border: 0;
border-radius: 6px;
background: #006b70;
box-shadow: none;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
text-decoration: none;
white-space: nowrap;
color: #ffffff;
cursor: pointer;
}
/* I1551:14537;111116:1652 — Figma's own open-in-new glyph at its native 12 in a
16 slot, replacing the legacy FontAwesome chevron. */
.tc-aff-profile-page #view-affiliate .empty-state a.pure-button > i {
width: 16px;
height: 16px;
margin: 0;
font-size: 0;
background: url("/static/icons/affiliates/open-external.svg") no-repeat center;
background-size: 12px 12px;
}
.tc-aff-profile-page #view-affiliate .empty-state a.pure-button > i::before { content: none; }
/* ===== Products — 1551:14233 / 14234 / 14384 ============================== */
/* Save settings ends at 699; the Products title is 24 below. */
.tc-aff-profile-page #view-affiliate .tc-aff-products-head { margin: 24px 0 0; }
.tc-aff-profile-page #view-affiliate .tc-aff-products-head h1 { margin: 0; }
/* 1551:14234 — the toolbar: count on the left, tools on the right. Title ends at
751, toolbar at 775. */
.tc-aff-profile-page #view-affiliate .tc-aff-products-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 24px 0 0;
min-height: 32px;
}
/* 1551:14235 */
.tc-aff-profile-page #view-affiliate .tc-aff-products-count {
margin: 0;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #2a3648;
white-space: nowrap;
}
/* 1551:14236 */
.tc-aff-profile-page #view-affiliate .tc-aff-products-tools {
display: flex;
align-items: center;
gap: 8px;
}
/* 1551:14237 */
.tc-aff-profile-page #view-affiliate .tc-aff-products-search {
display: flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
width: 200px;
height: 32px;
padding: 8px 13px;
background: #ffffff;
/* Inside stroke: 8 + 16 + 8 = Figma's 32. A real border makes it 34. */
border: 0;
box-shadow: inset 0 0 0 1px #d1d7de;
border-radius: 6px;
}
.tc-aff-profile-page #view-affiliate .tc-aff-products-search::before {
content: '';
flex: 0 0 auto;
width: 16px;
height: 16px;
background: url("/static/icons/affiliates/search.svg") no-repeat center;
background-size: 11.66px 11.66px;
}
.tc-aff-profile-page #view-affiliate .tc-aff-products-search input {
flex: 1 1 0;
min-width: 0;
height: 16px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #364152;
}
.tc-aff-profile-page #view-affiliate .tc-aff-products-search input::placeholder { color: #afbbc9; }
/* 1551:14238 */
.tc-aff-profile-page #view-affiliate .tc-aff-products-sort {
display: inline-flex;
align-items: center;
gap: 4px;
box-sizing: border-box;
height: 32px;
padding: 8px 12px;
background: #ffffff;
border: 0;
box-shadow: inset 0 0 0 1px #e8ecef;
border-radius: 6px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
color: #364152;
cursor: pointer;
}
.tc-aff-profile-page #view-affiliate .tc-aff-products-sort::before {
content: '';
flex: 0 0 auto;
width: 16px;
height: 16px;
background: url("/static/icons/affiliates/sort.svg") no-repeat center;
background-size: 14.67px 12.67px;
}
.tc-aff-profile-page #view-affiliate .tc-aff-products-sort.active { background: #f6f8f9; }
/* 1551:14239/14247 — Figma draws this as the last base of a button group, so only
its right corners are rounded. */
.tc-aff-profile-page #view-affiliate .tc-aff-products-tools .ui-affiliate-grant {
display: inline-flex;
align-items: center;
gap: 4px;
box-sizing: border-box;
height: 32px;
margin: 0;
padding: 8px 13px;
background: #f6f8f9;
border: 0;
box-shadow: inset 0 0 0 1px #d1d7de;
border-radius: 0 6px 6px 0;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
color: #364152;
cursor: pointer;
}
/* Sort panel — 14238 is a control, not decoration, so it drives a real reorder of
the grid. The panel reuses the pattern the affiliates list already uses. */
.tc-aff-profile-page #view-affiliate .tc-aff-products-sortpanel {
display: none;
align-items: center;
gap: 8px;
margin: 16px 0 0;
padding: 12px 16px;
background: #ffffff;
border: 1px solid #e8ecef;
border-radius: 12px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
}
.tc-aff-profile-page #view-affiliate .tc-aff-products-sortpanel.open { display: flex; }
.tc-aff-profile-page #view-affiliate .tc-aff-products-sortpanel label {
margin: 0;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0.48px;
text-transform: uppercase;
color: #8493a8;
}
.tc-aff-profile-page #view-affiliate .tc-aff-products-sortpanel select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
width: auto;
height: 32px;
margin: 0;
padding: 8px 32px 8px 13px;
background: #ffffff url("/static/icons/affiliates/select-chevron.svg") no-repeat right 12px center;
background-size: 8px 4.94px;
border: 1px solid #d1d7de;
border-radius: 6px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 16px;
color: #364152;
box-shadow: none;
cursor: pointer;
}
/* ===== Product cards — 1551:14248 / 14249 ================================ */
/* Toolbar ends at 807; the first card row is at 831. Rows are 20 apart across
and 24 down (831 → 1072.5 = 217.5 + 24). */
/* The markup splits the cards into one .pure-g row per approval status; 14168 is
one continuous 3-up grid. `display: contents` on the rows lifts every card into
the outer grid, which also lets the Sort control reorder across statuses via
`order` without moving nodes between parents. */
.tc-aff-profile-page #view-affiliate #affiliate-dashboard-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px 20px;
margin: 24px 0 0;
}
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-row {
display: contents;
margin: 0;
}
/* `display: contents` removes the row's own box but NOT its ::after — the
.self-clear float clearfix survives as a real grid item and takes the first
cell. Nothing in the grid floats any more, so drop it. */
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-row::before,
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-row::after { content: none; }
/* .pure-g hands FreeSans + letter-spacing:-0.31em to non-pure-u children, and
main.css's own base rule re-declares 13px/-apple-system on the pure-u columns.
Fix it on the grid itself rather than on each leaf. */
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-row,
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-row > [class*="pure-u"] {
font-family: 'Inter', -apple-system, sans-serif;
letter-spacing: normal;
}
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-row > .affiliate-dashboard-grid-item-pad {
width: auto;
padding: 0;
display: flex;
}
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item-pad.tc-aff-hidden { display: none; }
/* 1551:14249 — p-20, gap-8, r10, #e8ecef hairline. Inside stroke, as everywhere
else in this design, so the 20 padding stays exactly 20. */
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
box-sizing: border-box;
width: 100%;
padding: 20px;
margin: 0;
border: 0;
border-radius: 10px;
background: #ffffff;
box-shadow: inset 0 0 0 1px #e8ecef;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
overflow: visible;
min-height: 0;
}
/* The card is .self-clear; that clearfix ::after is display:table, so as a flex
item it contributes a real gap-8 and made the card 225.5 instead of 217.5.
Nothing inside the card floats now. */
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item::before,
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item::after { content: none; }
/* 1551:14250 — the thumbnail becomes the icon area: 48 round-square, #f6f8f9,
holding a 24 slot with the 20x20 inventory glyph at its native size. */
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .thumbnail {
flex: 0 0 auto;
box-sizing: border-box;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
float: none;
position: relative;
border-radius: 24px;
background: #f6f8f9 url("/static/icons/affiliates/card-inventory.svg") no-repeat center;
background-size: 20px 20px;
overflow: hidden;
}
/* 14249 shows the product icon, never the product's own logo. */
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .thumbnail > img,
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .thumbnail > .img { display: none; }
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .thumbnail .ribbon { display: none; }
/* .info is a plain pass-through so its children are the card's own flex items and
pick up the card's gap-8 — Figma has no wrapper between them. */
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .info {
display: contents;
padding: 0;
margin: 0;
float: none;
}
/* 1551:14253 */
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .info h1 {
box-sizing: border-box;
width: 100%;
margin: 0;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 25.5px;
letter-spacing: -0.4316px;
color: #2a3648;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 1551:14254 / 14255 */
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .info p.status,
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .tc-aff-card-received {
box-sizing: border-box;
width: 100%;
margin: 0;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: normal;
color: #364152;
}
/* 14249 has no info trigger, but the tooltip is the only place the affiliate's
answers to the product's custom question are readable — dropping it would lose
a capability, so it is retained in the card's top-right corner, clear of every
node Figma does place. */
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .html-tooltip-trigger {
position: absolute;
top: 20px;
right: 20px;
line-height: 0;
color: #8493a8;
cursor: pointer;
}
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .html-tooltip-trigger .fa-info-circle { font-size: 14px; }
/* 14254 draws the whole referral line in one colour. The value is the legacy
inline-edit control, so it keeps its pencil affordance and its handler — only
the legacy teal goes. */
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .info p.status .ui-affiliate-parent,
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .info p.status .ui-affiliate-parent span {
color: #364152;
font-style: normal;
}
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .info p.status .ui-affiliate-parent .fa-pencil-alt { color: #8493a8; }
/* 1551:14256 / 14258 — both buttons on one row, 12 apart (158 → 170). */
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .tc-aff-card-actions {
display: flex;
align-items: center;
gap: 12px;
}
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .ui-affiliate-manage,
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item a.pure-button,
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .pure-button-block.ui-affiliate-manage,
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item a.pure-button.pure-button-block {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: auto;
height: 32px;
/* 14257: p-8 plus a px-4 text layout inside. */
padding: 8px 12px;
margin: 0;
background: #ffffff;
border: 0;
box-shadow: inset 0 0 0 1px #e8ecef;
border-radius: 6px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
color: #364152;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item .ui-affiliate-manage[disabled],
.tc-aff-profile-page #view-affiliate .affiliate-dashboard-grid-item a.pure-button[disabled] {
opacity: 0.5;
pointer-events: none;
}
/* ===== Products footer — 1551:14384 ====================================== */
.tc-aff-profile-page #view-affiliate .tc-aff-products-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin: 24px 0 0;
}
/* 1551:14385 */
.tc-aff-profile-page #view-affiliate .tc-aff-products-perpage {
display: flex;
align-items: center;
gap: 8px;
}
/* 1551:14386 */
.tc-aff-profile-page #view-affiliate .tc-aff-products-perpage select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
width: 72px;
height: 32px;
margin: 0;
padding: 8px 29px 8px 13px;
background: #ffffff url("/static/icons/affiliates/expand-more.svg") no-repeat right 13px center;
background-size: 8px 4.94px;
border: 0;
box-shadow: inset 0 0 0 1px #d1d7de;
border-radius: 8px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 16px;
color: #364152;
cursor: pointer;
}
/* 1551:14387 */
.tc-aff-profile-page #view-affiliate .tc-aff-products-perpage span {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #2a3648;
white-space: nowrap;
}
/* 1551:14388 */
.tc-aff-profile-page #view-affiliate .tc-aff-products-pager {
display: flex;
align-items: center;
gap: 8px;
}
/* 1551:14389 / 14391 */
.tc-aff-profile-page #view-affiliate .tc-aff-products-pager .tc-aff-products-page-step {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 32px;
height: 32px;
padding: 8px;
background: #f6f8f9;
border: 0;
box-shadow: inset 0 0 0 1px #d1d7de;
border-radius: 6px;
cursor: pointer;
}
.tc-aff-profile-page #view-affiliate .tc-aff-products-pager .tc-aff-products-page-step::before {
content: '';
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: 4.94px 8px;
}
.tc-aff-profile-page #view-affiliate .tc-aff-products-pager .tc-aff-products-page-prev::before {
background-image: url("/static/icons/affiliates/pager-prev.svg");
}
.tc-aff-profile-page #view-affiliate .tc-aff-products-pager .tc-aff-products-page-next::before {
background-image: url("/static/icons/affiliates/pager-next.svg");
}
.tc-aff-profile-page #view-affiliate .tc-aff-products-pager .tc-aff-products-page-step[disabled] {
opacity: 0.5;
pointer-events: none;
}
/* 1551:14390 */
.tc-aff-profile-page #view-affiliate .tc-aff-products-pager .tc-aff-products-page-num {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
box-sizing: border-box;
width: 32px;
height: 32px;
padding: 8px 12px;
background: #ffffff;
border: 0;
box-shadow: inset 0 0 0 1px #e8ecef;
border-radius: 6px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-align: center;
color: #364152;
cursor: pointer;
}
.tc-aff-profile-page #view-affiliate .tc-aff-products-pager .tc-aff-products-page-num.active { background: #f6f8f9; }
/* Footer: Back only (Delete moved to the head) */
.tc-aff-profile-page #view-affiliate + * .back-link,
.tc-aff-profile-page #view-affiliate .pure-controls .back-link {
display: inline-flex;
align-items: center;
height: 36px;
padding: 8px 18px;
background: #ffffff;
border: 1px solid #d1d7de;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #364152;
box-shadow: none;
}
.tc-aff-profile-page #stats-date-range select#stats-currency { min-width: 84px; }
/* ============================================================================
Product options + Rules tabs (gated with TC-12324 — no dedicated tickets yet)
========================================================================== */
/* --- Product options ------------------------------------------------------ */
.tc-aff-options-page #campaigns-list-campaigns-wrap {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
.tc-aff-options-page #campaigns-list-search-field {
width: 260px;
height: 36px;
padding: 7px 12px 7px 36px;
border: 1px solid #d1d7de;
border-radius: 8px;
background: #ffffff url("/static/icons/affiliates/search.svg") no-repeat 12px center;
background-size: 16px 16px;
font-size: 14px;
color: #364152;
box-shadow: none;
float: right;
margin: 0 0 12px;
}
.tc-aff-options-page #campaigns-list-title {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #364152;
margin: 8px 0 16px;
text-align: left;
}
.tc-aff-options-page #campaigns-list.campaigns-list-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.tc-aff-options-page #campaigns-list.campaigns-list-list .box-list-product-row {
position: relative;
display: flex;
align-items: flex-start;
gap: 16px;
background: #ffffff;
border: 1px solid #e8ecef;
border-radius: 8px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
padding: 16px;
margin: 0;
overflow: visible;
}
.tc-aff-options-page #campaigns-list .box-list-product-row .list-product-name {
display: flex;
align-items: center;
gap: 16px;
flex: 1 1 auto;
min-width: 0;
float: none;
width: auto;
}
.tc-aff-options-page #campaigns-list .box-list-product-row .list-product-thumbnail {
position: relative;
width: 96px;
height: 96px;
border-radius: 12px;
overflow: hidden;
flex: 0 0 auto;
float: none;
margin: 0;
}
.tc-aff-options-page #campaigns-list .box-list-product-row .list-product-thumbnail img,
.tc-aff-options-page #campaigns-list .box-list-product-row .list-product-thumbnail div {
width: 100%;
height: 100%;
object-fit: cover;
background-size: cover;
}
.tc-aff-options-page #campaigns-list .box-list-product-row .list-product-thumbnail .ribbon {
position: absolute;
left: auto;
right: auto;
top: auto;
bottom: 4px;
left: 4px;
width: auto;
height: auto;
transform: none;
overflow: visible;
z-index: 1;
/* Bare wrapper — the legacy square teal box would frame the rounded pill. */
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.tc-aff-options-page #campaigns-list .box-list-product-row .list-product-thumbnail .ribbon span {
position: static;
display: inline-block;
transform: none;
width: auto;
background: #9ae6b4;
color: #2a3648;
font-size: 11px;
font-weight: 500;
line-height: 14px;
padding: 2px 6px;
border-radius: 999px;
box-shadow: none;
text-transform: uppercase;
letter-spacing: 0.3px;
text-align: center;
}
.tc-aff-options-page #campaigns-list .box-list-product-row .list-product-title .list-product-name-el {
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #364152;
}
.tc-aff-options-page #campaigns-list .box-list-product-row .list-product-title .list-product-label-el {
display: block;
font-size: 14px;
line-height: 20px;
color: #8493a8;
}
.tc-aff-options-page #campaigns-list .box-list-product-row .list-product-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
float: none;
width: auto;
position: static;
}
.tc-aff-options-page #campaigns-list .box-list-product-row .list-product-actions .button-submenu {
height: 32px;
padding: 8px 12px;
background: #ffffff;
border: 1px solid #d1d7de;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: #364152;
box-shadow: none;
}
.tc-aff-options-page #campaigns-list .box-list-product-row .list-product-actions .ui-affiliates-campaigns-embed {
height: 32px;
padding: 8px 12px;
background: #ffffff;
border: 1px solid #d1d7de;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: #364152;
box-shadow: none;
}
/* --- Rules ---------------------------------------------------------------- */
.tc-aff-rules-page #view-affiliates-rules > .box {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
.tc-aff-rules-page .ui-autoresponder {
background: #ffffff;
border: 1px solid #e8ecef;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
padding: 24px;
}
.tc-aff-rules-page .ui-autoresponder select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 40px;
padding: 8px 34px 8px 12px;
background: #ffffff url("/static/icons/affiliates/select-chevron.svg") no-repeat right 12px center;
background-size: 8px 4.94px;
border: 1px solid #d1d7de;
border-radius: 8px;
font-size: 14px;
color: #364152;
box-shadow: none;
}
.tc-aff-rules-page .ui-autoresponder input[type="text"],
.tc-aff-rules-page .ui-autoresponder input[type="number"] {
height: 40px;
padding: 8px 12px;
border: 1px solid #d1d7de;
border-radius: 8px;
font-size: 14px;
color: #364152;
box-shadow: none;
}
.tc-aff-rules-page .ui-autoresponder-add {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 8px 14px;
background: #ffffff;
border: 1px solid #d1d7de;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #364152;
box-shadow: none;
cursor: pointer;
}
.tc-aff-rules-page .box-footer {
display: flex;
justify-content: flex-end;
background: transparent;
border: 0;
padding: 16px 0 0;
}
.tc-aff-rules-page .box-footer .ui-save {
display: inline-flex;
align-items: center;
height: 36px;
padding: 8px 18px;
background: #006b70;
border: 1px solid #006b70;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
box-shadow: none;
cursor: pointer;
}
.tc-aff-options-page #campaigns-list.campaigns-list-list .box-list-product-row {
width: 100%;
max-width: none;
min-height: 0;
height: auto;
float: none;
}
.tc-aff-options-page #campaigns-list .box-list-product-row .list-product-thumbnail .ribbon { bottom: auto; top: 4px; }
.tc-aff-options-page #campaigns-list { width: 100%; max-width: none; }
.tc-aff-options-page #campaigns-list .box-list-product-row {
width: 100%;
max-width: none;
float: none;
}
.tc-aff-rules-page #view-affiliates-rules .ui-autoresponder-add,
.tc-aff-rules-page #view-affiliates-rules .ui-autoresponder-remove {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 8px 12px;
background: #ffffff;
border: 1px solid #d1d7de;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: #364152;
box-shadow: none;
cursor: pointer;
}
/* ============================================================================
Affiliate modal chrome — applies only when a reskinned affiliates page set
the `tc-aff-reskin` body marker (modals mount at body level, outside the
gated page wrapper).
========================================================================== */
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-import,
body.tc-aff-reskin .ajs-dialog.tc-profile,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-grant,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize,
body.tc-aff-reskin .ajs-dialog.tc-payout,
body.tc-aff-reskin .ajs-dialog.tc-modal-payout_cancel,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-inline-manage {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
background: #ffffff;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-import .ajs-header,
body.tc-aff-reskin .ajs-dialog.tc-profile .ajs-header,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-grant .ajs-header,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .ajs-header,
body.tc-aff-reskin .ajs-dialog.tc-payout .ajs-header,
body.tc-aff-reskin .ajs-dialog.tc-modal-payout_cancel .ajs-header,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-inline-manage .ajs-header {
padding: 16px 24px;
border-bottom: 1px solid #e8ecef;
background: #ffffff;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #364152;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-import .ajs-content,
body.tc-aff-reskin .ajs-dialog.tc-profile .ajs-content,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-grant .ajs-content,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .ajs-content,
body.tc-aff-reskin .ajs-dialog.tc-payout .ajs-content,
body.tc-aff-reskin .ajs-dialog.tc-modal-payout_cancel .ajs-content,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-inline-manage .ajs-content {
padding: 20px 24px;
color: #364152;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-import .ajs-footer,
body.tc-aff-reskin .ajs-dialog.tc-profile .ajs-footer,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-grant .ajs-footer,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .ajs-footer,
body.tc-aff-reskin .ajs-dialog.tc-payout .ajs-footer,
body.tc-aff-reskin .ajs-dialog.tc-modal-payout_cancel .ajs-footer,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-inline-manage .ajs-footer {
padding: 12px 24px;
border-top: 1px solid #e8ecef;
background: #ffffff;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-import .ajs-footer .ajs-button,
body.tc-aff-reskin .ajs-dialog.tc-profile .ajs-footer .ajs-button,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-grant .ajs-footer .ajs-button,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .ajs-footer .ajs-button,
body.tc-aff-reskin .ajs-dialog.tc-payout .ajs-footer .ajs-button,
body.tc-aff-reskin .ajs-dialog.tc-modal-payout_cancel .ajs-footer .ajs-button,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-inline-manage .ajs-footer .ajs-button {
height: 40px;
padding: 8px 18px;
border-radius: 8px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
background: #ffffff;
border: 1px solid #d1d7de;
color: #364152;
box-shadow: none;
text-shadow: none;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-import .ajs-footer .ajs-button.ajs-ok,
body.tc-aff-reskin .ajs-dialog.tc-profile .ajs-footer .ajs-button.ajs-ok,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-grant .ajs-footer .ajs-button.ajs-ok,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .ajs-footer .ajs-button.ajs-ok,
body.tc-aff-reskin .ajs-dialog.tc-payout .ajs-footer .ajs-button.ajs-ok,
body.tc-aff-reskin .ajs-dialog.tc-modal-payout_cancel .ajs-footer .ajs-button.ajs-ok,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-inline-manage .ajs-footer .ajs-button.ajs-ok {
background: #006b70;
border-color: #006b70;
color: #ffffff;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-import .ajs-footer .ajs-button[disabled],
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-grant .ajs-footer .ajs-button[disabled] {
opacity: 0.5;
}
/* Inputs & selects inside affiliate modals */
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-import .ajs-content input[type="text"],
body.tc-aff-reskin .ajs-dialog.tc-profile .ajs-content input[type="text"],
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-grant .ajs-content input[type="text"],
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .ajs-content input[type="text"],
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .ajs-content input[type="number"] {
height: 40px;
padding: 8px 12px;
border: 1px solid #d1d7de;
border-radius: 8px;
font-size: 14px;
color: #364152;
box-shadow: none;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .ajs-content select,
body.tc-aff-reskin .ajs-dialog.tc-profile .ajs-content select {
-webkit-appearance: none;
appearance: none;
height: 40px;
padding: 8px 34px 8px 12px;
background: #ffffff url("/static/icons/affiliates/select-chevron.svg") no-repeat right 12px center;
background-size: 8px 4.94px;
border: 1px solid #d1d7de;
border-radius: 8px;
font-size: 14px;
color: #364152;
box-shadow: none;
}
body.tc-aff-reskin .ajs-dialog .ajs-content label {
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #364152;
}
/* Product checklists (import + grant) — clean bordered rows */
body.tc-aff-reskin .ajs-dialog .ui-affiliate-import-product-select,
body.tc-aff-reskin .ajs-dialog .ui-affiliate-grant-product-select {
list-style: none;
margin: 12px 0 0;
padding: 0;
}
body.tc-aff-reskin .ajs-dialog .ui-affiliate-import-product-select > li,
body.tc-aff-reskin .ajs-dialog .ui-affiliate-grant-product-select > li {
border-bottom: 1px solid #e8ecef;
padding: 12px 4px;
margin: 0;
}
body.tc-aff-reskin .ajs-dialog .ui-affiliate-import-product-select > li:last-child,
body.tc-aff-reskin .ajs-dialog .ui-affiliate-grant-product-select > li:last-child {
border-bottom: 0;
}
/* Recovered 2026-07-17: this region (underline tabs, profile minitabs and the
import-modal component styles) was lost to a bad scripted edit and restored
from the browser's parsed stylesheet — comments in it did not survive. */
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .box-tabbed { background: transparent; border: 0px; box-shadow: none; }
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .box-tabbed > ul.tabs {
display: flex;
/* Figma 1551:14100: gap 16, border-b #d1d7de (--color-border). */
gap: 16px;
align-items: center;
margin: 16px 0 0;
padding: 0;
border-bottom: 0;
box-shadow: inset 0 -1px 0 #d1d7de;
background: transparent;
list-style: none;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .box-tabbed > ul.tabs li,
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .box-tabbed > ul.tabs li.active {
display: inline-flex;
align-items: center;
justify-content: center;
/* Icon-to-label gap 8; the tab itself is padded 8 on every side. */
gap: 8px;
float: none;
width: auto;
padding: 8px;
margin: 0;
/* Figma's border-b-2 is an inside stroke: the tab is 8 + 24 + 8 = 40 WITH it, so a
real border would make it 42. Drawn as an inset shadow on .active instead. */
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0;
/* --color-text-light */
color: #8493a8;
cursor: pointer;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .box-tabbed > ul.tabs li.active {
/* --color-text-dark, not the #2b384a the modal header uses. */
color: #2a3648;
/* --color-text-primary */
box-shadow: inset 0 -2px 0 #006b70;
}
/* Figma 1551:14100 draws each tab icon as a 20px SVG. They recolour with the tab's
state, so they are masks tinted by currentColor — mask-size is the native viewBox.
NOTE: Figma's own inactive icons disagree (#8493A8 on Custom commissions, #AFBBC9 on
Second-tier and Revoke); normalised to the label colour. Confirm with John. */
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .box-tabbed > ul.tabs li .tc-tab-ico {
flex: 0 0 20px;
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .box-tabbed > ul.tabs li .tc-tab-ico-link {
-webkit-mask-image: url("/static/icons/affiliates/tab-link.svg");
mask-image: url("/static/icons/affiliates/tab-link.svg");
-webkit-mask-size: 16.67px 8.33px;
mask-size: 16.67px 8.33px;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .box-tabbed > ul.tabs li .tc-tab-ico-commissions {
-webkit-mask-image: url("/static/icons/affiliates/tab-commissions.svg");
mask-image: url("/static/icons/affiliates/tab-commissions.svg");
-webkit-mask-size: 16.67px 4.17px;
mask-size: 16.67px 4.17px;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .box-tabbed > ul.tabs li .tc-tab-ico-secondtier {
-webkit-mask-image: url("/static/icons/affiliates/tab-secondtier.svg");
mask-image: url("/static/icons/affiliates/tab-secondtier.svg");
-webkit-mask-size: 18.34px 16.66px;
mask-size: 18.34px 16.66px;
}
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .box-tabbed > ul.tabs li .tc-tab-ico-revoke {
-webkit-mask-image: url("/static/icons/affiliates/tab-revoke.svg");
mask-image: url("/static/icons/affiliates/tab-revoke.svg");
-webkit-mask-size: 16.67px 16.67px;
mask-size: 16.67px 16.67px;
}
body.tc-aff-reskin .ajs-dialog.tc-profile .minitabs-tabs { display: flex; gap: 24px; margin: 0px 0px 16px; padding: 0px; border-bottom: 1px solid rgb(232, 236, 239); list-style: none; }
body.tc-aff-reskin .ajs-dialog.tc-profile .minitabs-tabs li, body.tc-aff-reskin .ajs-dialog.tc-profile .minitabs-tabs li.active { float: none; padding: 10px 4px; margin: 0px; border-width: 0px 0px 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: initial; border-radius: 0px; background: transparent; font-size: 14px; font-weight: 500; color: rgb(132, 147, 168); cursor: pointer; }
body.tc-aff-reskin .ajs-dialog.tc-profile .minitabs-tabs li.active { color: rgb(54, 65, 82); border-bottom-color: rgb(0, 107, 112); }
body.tc-aff-reskin .ajs-dialog.tc-profile .ajs-content input[readonly] { background: rgb(246, 248, 249); color: rgb(54, 65, 82); }
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .box-tabbed > ul.tabs li { white-space: nowrap; }
body.tc-aff-reskin .ajs-dialog.tc-modal-affiliate-customize .ajs-content .pure-button { height: 40px; padding: 8px 14px; background: rgb(255, 255, 255); border: 1px solid rgb(209, 215, 222); border-radius: 8px; font-size: 14px; font-weight: 500; color: rgb(54, 65, 82); box-shadow: none; text-shadow: none; }
.tc-affiliates-page .ui-statistics-graph-slider { gap: 0px; justify-content: flex-start; }
.tc-affiliates-page .ui-statistics-graph-slider > .graph-wrap { flex: 0 0 100%; width: 100%; max-width: 100%; margin: 0px; }
.tc-affiliates-page #graph-dashboard-outer .position-relative.box.padding, .tc-affiliates-page #graph-dashboard-outer .box.padding.padding-full { background: transparent; border: 0px; box-shadow: none; border-radius: 0px; }
.tc-affiliates-page #graph-dashboard-outer .pure-button.ui-compare { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 8px 18px; background: rgb(0, 107, 112); border: 0px; border-radius: 8px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; color: rgb(255, 255, 255); box-shadow: none; text-shadow: none; }
.tc-affiliates-page #custom-tooltip .stat-wrapper .stat:hover { background: rgb(246, 248, 249); }
.tc-affiliates-page .box.box-tabbed .tabs.tabs-anchor { display: flex; align-items: center; gap: 32px; margin: 0px 0px 24px; padding: 0px; list-style: none; border-bottom: 1px solid rgb(209, 215, 222); background: transparent; width: 100%; }
.tc-affiliates-page .box.box-tabbed .tabs.tabs-anchor li, .tc-affiliates-page .box.box-tabbed .tabs.tabs-anchor li.active, .tc-affiliates-page .box.box-tabbed.box-tabbed-action .tabs.tabs-anchor li, .tc-affiliates-page .box.box-tabbed.box-tabbed-action .tabs.tabs-anchor li.active { margin: 0px; padding: 0px; background: transparent; border: 0px; border-radius: 0px; box-shadow: none; float: none; width: auto; list-style: none; }
.tc-affiliates-page .box.box-tabbed .tabs.tabs-anchor li a,
.tc-affiliates-page .box.box-tabbed.box-tabbed-action .tabs.tabs-anchor li a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px;
background: transparent;
border-width: 0px 0px 2px;
border-style: none none solid;
border-color: currentcolor currentcolor transparent;
border-image: initial;
margin-bottom: -1px;
border-radius: 0px;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: rgb(132, 147, 168);
text-decoration: none;
}
.tc-affiliates-page .box.box-tabbed .tabs.tabs-anchor li.active a, .tc-affiliates-page .box.box-tabbed.box-tabbed-action .tabs.tabs-anchor li.active a { color: rgb(42, 54, 72); border-bottom: 2px solid rgb(0, 107, 112); background: transparent; }
.tc-affiliates-page .box.box-tabbed .tabs.tabs-anchor li a:hover { color: rgb(42, 54, 72); }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode label[for="stats-date-range-type"]::before,
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode label[for="stats-product"]::before,
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode label[for="stats-affiliate"]::before,
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .ui-compare-block::before,
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stat-compare-markers::before,
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stat-compare-markers::after {
content: none;
}
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap .autolayout-column > .dropdown select,
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap .autolayout-column > .position-relative > .dropdown select,
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap .ui-compare-block .dropdown select {
width: 180px;
padding-left: 37px;
background-repeat: no-repeat, no-repeat;
background-position: 17px center, right 17px center;
background-size: 8px 8px, 8px 4.94px;
}
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap .autolayout-column > .dropdown select, .tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap .autolayout-column > .position-relative > .dropdown select { background-image: radial-gradient(4px, rgb(0, 166, 170) 98%, rgba(0, 166, 170, 0) 100%), url("/static/icons/affiliates/chevron-expand.svg"); }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap .ui-compare-block .dropdown select { background-image: radial-gradient(4px, rgb(42, 118, 189) 98%, rgba(42, 118, 189, 0) 100%), url("/static/icons/affiliates/chevron-expand.svg"); }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .ui-compare-block { margin: 8px 0px 0px; }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode #custom-tooltip .stat-wrapper .stat > b::before, .tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode #custom-tooltip .stat-wrapper .stat .stat-compare b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgb(0, 166, 170); margin-right: 8px; vertical-align: middle; flex: 0 0 auto; }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode #custom-tooltip .stat-wrapper .stat .stat-compare b::before { background: rgb(42, 118, 189); }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .ui-projection-total-range::before { background: rgb(0, 166, 170); }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .ui-projection-total-comparison::before { background-color: rgb(42, 118, 189); }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode #custom-trigger::before { border-color: rgb(0, 166, 170) !important; }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode #custom-trigger-compare { border-color: rgb(42, 118, 189); }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode #stats-date-range-wrap .ui-compare-block::before, .tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode #stats-product-wrap .ui-compare-block::before, .tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode #stats-affiliate-wrap .ui-compare-block::before { content: none; }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap .autolayout { align-items: flex-start; }
/* Compare-mode: currency's column is first in the DOM, so reorder to product·affiliate·date·currency·trash. */
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap #stats-product-wrap { order: 1; }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap #stats-affiliate-wrap { order: 2; }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap #stats-date-range-wrap { order: 3; }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap #stats-currency-wrap { order: 4; }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap .tc-aff-compare-clear-col { order: 5; }
/* Hide the vestigial label.width-0 above product/affiliate/date so their selects top-align with currency. */
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap .autolayout label.width-0 { display: none; }
.tc-affiliates-page .date-wrapper h2 em, .tc-affiliates-page .date-wrapper h2 span, .tc-affiliates-page .date-wrapper h2 span em { color: #006b70; }
.tc-affiliates-page .date-wrapper h2 span.ui-compare, .tc-affiliates-page .date-wrapper h2 span.ui-compare em { color: rgb(42, 118, 189); }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap .autolayout-column > .position-relative > .dropdown select, .tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap .ui-compare-block .dropdown select { width: 180px !important; }
.tc-affiliates-page #graph-dashboard-outer .tc-aff-compare-clear-col { display: none; }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap .tc-aff-compare-clear-col { display: flex; flex-direction: column; gap: 12px; align-self: flex-start; flex: 0 0 32px; width: 32px; padding: 8px 0px 0px; box-sizing: content-box; }
.tc-affiliates-page #graph-dashboard-outer .tc-aff-compare-clear-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 8px; border: 0px; background: url("/static/icons/affiliates/trash.svg") center center / 9.33px 12px no-repeat transparent; border-radius: 8px; cursor: pointer; transition: background-color 0.15s; margin: 0px; box-shadow: none; box-sizing: border-box; }
.tc-affiliates-page #graph-dashboard-outer .tc-aff-compare-clear-btn:hover { background-color: rgb(246, 248, 249); }
.tc-affiliates-page .tc-aff-list .tc-aff-empty { display: none; }
.tc-affiliates-page .tc-aff-list:has(.affiliates-list-top.ui-empty) .tc-aff-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; }
.tc-affiliates-page .tc-aff-list:has(.affiliates-list-top.ui-empty) .affiliates-list-top.ui-empty ol li { display: none; }
.tc-affiliates-page .tc-aff-empty-icon { display: inline-flex; width: 36px; height: 36px; background: url("/static/icons/affiliates/kpi-affiliate-sales.svg") center center / 16.67px 16.66px no-repeat rgb(232, 236, 239); border-radius: 8px; margin: 0px 0px 12px; }
.tc-affiliates-page .tc-aff-empty-title { margin: 0px 0px 4px; font-size: 14px; font-weight: 500; line-height: 20px; color: rgb(54, 65, 82); }
.tc-affiliates-page .tc-aff-empty-sub { margin: 0px; max-width: 380px; font-size: 14px; font-weight: 400; line-height: 20px; color: rgb(132, 147, 168); }
.tc-affiliates-page #graph-dashboard-outer.ui-comparison-mode .stats-control-wrap .autolayout > .position-relative:has(.ui-compare) { align-self: center; }
.tc-affiliates-page #custom-tooltip .stat-wrapper .stat.stat-click, .tc-affiliates-page #custom-tooltip .stat-wrapper .stat.stat-view, .tc-affiliates-page #custom-tooltip .stat-wrapper .stat.stat-refunded, .tc-affiliates-page #custom-tooltip .stat-wrapper .stat.stat-refundrate, .tc-affiliates-page #custom-tooltip .stat-wrapper .stat.stat-net { flex: 0 1 140px; min-width: 0px; }
.tc-affiliates-page #custom-tooltip .stat-wrapper .stat.stat-order { flex: 0 1 83px; min-width: 0px; }
.tc-affiliates-page #custom-tooltip .stat-wrapper .stat.stat-clickviewconversion, .tc-affiliates-page #custom-tooltip .stat-wrapper .stat.stat-conversion { flex: 0 1 159px; min-width: 0px; }
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-affiliate_id-wrap:not(.hidden),
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-compare-affiliate_id-wrap:not(.hidden),
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-date-range-type-custom-wrap:not(.hidden),
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-date-range-compare-type-custom-wrap:not(.hidden) {
position: static;
display: flex;
align-items: center;
gap: 8px;
width: 180px;
height: 36px;
margin: 0px;
padding: 7px 13px;
background: rgb(255, 255, 255);
border: 1px solid rgb(209, 215, 222);
border-radius: 8px;
box-sizing: border-box;
}
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-date-range-type-custom-wrap:not(.hidden), .tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-date-range-compare-type-custom-wrap:not(.hidden) { width: 280px; }
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-affiliate_id-wrap input,
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-compare-affiliate_id-wrap input,
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-date-range-type-custom-wrap input,
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-date-range-compare-type-custom-wrap input {
flex: 1 1 0px;
min-width: 0px;
width: auto;
height: auto;
margin: 0px;
padding: 0px;
border: 0px;
outline: 0px;
background: transparent;
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: rgb(54, 65, 82);
box-shadow: none;
}
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-affiliate_id-wrap .date_range_clear,
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-compare-affiliate_id-wrap .date_range_clear,
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-date-range-type-custom-wrap .date_range_clear,
.tc-affiliates-page #graph-dashboard-outer .stats-control-wrap #stats-date-range-compare-type-custom-wrap .date_range_clear {
position: static;
top: auto;
right: auto;
margin: 0px;
flex: 0 0 auto;
font-size: 14px;
color: rgb(103, 114, 129);
cursor: pointer;
}
.tc-affiliates-page .tc-aff-btn-sort::before { content: ""; width: 16px; height: 16px; flex: 0 0 auto; background: url("/static/icons/affiliates/sort.svg") center center / 14.67px 12.67px no-repeat; }
.tc-affiliates-page .tc-aff-btngroup { display: inline-flex; align-items: center; }
.tc-affiliates-page .tc-aff-btngroup-seg { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; background: rgb(246, 248, 249); border: 0px; box-shadow: rgb(209, 215, 222) 0px 0px 0px 1px inset; font-family: Inter, sans-serif; font-size: 12px; font-weight: 500; line-height: 16px; color: rgb(54, 65, 82); cursor: pointer; }
.tc-affiliates-page .tc-aff-btngroup-seg:first-child { border-radius: 6px 0px 0px 6px; }
.tc-affiliates-page .tc-aff-btngroup-seg + .tc-aff-btngroup-seg { box-shadow: rgb(209, 215, 222) -1px 0px 0px 0px inset, rgb(209, 215, 222) 0px 1px 0px 0px inset, rgb(209, 215, 222) 0px -1px 0px 0px inset; padding: 6px 9px 6px 8px; }
.tc-affiliates-page .tc-aff-btngroup-seg:last-child { border-radius: 0px 6px 6px 0px; }
.tc-affiliates-page .tc-aff-btngroup-seg:first-child:last-child { border-radius: 6px; }
.tc-affiliates-page .tc-aff-btngroup-seg::before { content: ""; width: 12px; height: 12px; flex: 0 0 auto; background-repeat: no-repeat; background-position: center center; }
.tc-affiliates-page .tc-aff-btngroup-seg--filter::before { background-image: url("/static/icons/affiliates/filter-list.svg"); background-size: 9px 6px; }
.tc-affiliates-page .tc-aff-btngroup-seg--download::before { background-image: url("/static/icons/affiliates/download-csv.svg"); background-size: 8px 8px; }
.tc-affiliates-page .tc-aff-toolbar .tc-aff-btn-secondary, .tc-affiliates-page .tc-aff-toolbar .tc-aff-btn-primary { height: 32px; padding: 8px 12px; border-radius: 6px; line-height: 16px; }
.tc-affiliates-page .tc-aff-toolbar .tc-aff-pill select { height: 32px; padding-top: 0px; padding-bottom: 0px; border-radius: 6px; line-height: 16px; }
.tc-affiliates-page .tc-aff-btn-primary, .tc-affiliates-page .tc-aff-btn-secondary, .tc-affiliates-page .tc-aff-create-cancel, .tc-affiliates-page .tc-aff-btn-primary:hover, .tc-affiliates-page .tc-aff-btn-secondary:hover, .tc-affiliates-page .tc-aff-create-cancel:hover, .tc-affiliates-page .tc-aff-btn-primary:visited, .tc-affiliates-page .tc-aff-btn-secondary:visited { text-decoration: none; }
.tc-aff-modal-behind { position: fixed; bottom: 0px; z-index: 1040; overflow: hidden; pointer-events: none; background: rgb(255, 255, 255); }
.tc-affiliates-page .tc-aff-row-status { display: inline-block; margin-left: 8px; vertical-align: 2px; font-size: 12px; font-weight: 500; line-height: 16px; padding: 2px 6px; border-radius: 4px; }
.tc-affiliates-page .tc-aff-row-status--pending { background: rgb(250, 240, 137); color: rgb(42, 54, 72); }
.tc-affiliates-page .tc-aff-row-ctas .affiliate-inline-approvals { position: static; display: inline-flex; align-items: center; gap: 8px; margin: 0px; float: none; }
.tc-affiliates-page .tc-aff-row-ctas .affiliate-inline-approvals .ui-inline-approvals-approve, .tc-affiliates-page .tc-aff-row-ctas .affiliate-inline-approvals .ui-inline-approvals-reject { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 8px 12px; margin: 0px; border-radius: 6px; font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; line-height: 16px; cursor: pointer; box-shadow: none; text-shadow: none; }
.tc-affiliates-page .tc-aff-row-ctas .affiliate-inline-approvals .ui-inline-approvals-approve { background: rgb(0, 107, 112); border: 1px solid rgb(0, 107, 112); color: rgb(255, 255, 255); }
.tc-affiliates-page .tc-aff-row-ctas .affiliate-inline-approvals .ui-inline-approvals-approve:hover { background: rgb(0, 134, 140); border-color: rgb(0, 134, 140); }
.tc-affiliates-page .tc-aff-row-ctas .affiliate-inline-approvals .ui-inline-approvals-reject { background: rgb(255, 255, 255); border: 1px solid rgb(232, 236, 239); color: rgb(207, 59, 57); }
.tc-affiliates-page .tc-aff-row-ctas .affiliate-inline-approvals .ui-inline-approvals-reject:hover { background: rgb(246, 248, 249); }
.tc-affiliates-page .tc-aff-row-ctas { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tc-aff-create-page .tc-aff-create-question { font-size: 20px; font-weight: 500; line-height: 28px; color: rgb(132, 147, 168); margin: 0px 0px 16px; }
.tc-aff-create-page .tc-aff-create-question .ui-data { border-bottom: 0px; text-decoration: none; font-style: normal; }
.tc-aff-create-page .tc-aff-create-search { position: relative; margin: 0px 0px 16px; }
.tc-aff-create-page .tc-aff-create-search::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url("/static/icons/affiliates/search-products.svg") center center / 11.66px 11.66px no-repeat; pointer-events: none; }
.tc-aff-create-page .tc-aff-create-search input, .tc-aff-create-page .tc-aff-create-search #products-list-search-field { width: 100%; height: 48px; padding: 13px 8px 13px 36px; border: 1px solid rgb(209, 215, 222); border-radius: 8px; font-size: 14px; line-height: 20px; color: rgb(54, 65, 82); box-shadow: none; margin: 0px; box-sizing: border-box; }
.tc-aff-create-page .tc-aff-create-search input::placeholder, .tc-aff-create-page .tc-aff-create-search #products-list-search-field::placeholder { color: rgb(175, 187, 201); }
.tc-aff-create-page .tc-aff-access-chips { display: flex; align-items: center; gap: 13px; flex-wrap: nowrap; overflow: hidden; margin: 0px 0px 16px; }
.tc-aff-create-page .tc-aff-access-chips.hidden { display: none; }
.tc-aff-create-page .tc-aff-access-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgb(198, 246, 213); border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 16px; color: rgb(54, 65, 82); white-space: nowrap; flex-shrink: 0; }
.tc-aff-create-page .tc-aff-access-chip-x { width: 12px; height: 12px; background: url("/static/icons/affiliates/chip-close.svg") center center / 7px 7px no-repeat; cursor: pointer; }
.tc-aff-create-page .tc-aff-access-chip-more { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; line-height: 16px; color: rgb(0, 0, 0); }
.tc-aff-create-page .tc-aff-access-chip-more::before { content: ""; width: 1px; height: 16px; background: rgb(217, 217, 217); }
.tc-aff-create-page .tc-aff-access-toolbar { display: flex; align-items: center; gap: 9.5px; margin: 0px 0px 16px; }
.tc-aff-create-page .tc-aff-access-count { font-size: 14px; line-height: 20px; color: rgb(42, 54, 72); white-space: nowrap; margin-right: auto; }
.tc-aff-create-page .tc-aff-access-selectall { display: inline-flex; align-items: center; gap: 7px; margin: 0px; font-size: 12px; font-weight: 400; line-height: 18px; color: rgb(54, 65, 82); cursor: pointer; }
.tc-aff-create-page .tc-aff-access-selectall input { position: absolute; opacity: 0; pointer-events: none; }
.tc-aff-create-page .tc-aff-access-check { width: 16px; height: 16px; border: 1px solid rgb(209, 215, 222); border-radius: 4px; background: rgb(255, 255, 255); flex: 0 0 auto; }
.tc-aff-create-page .tc-aff-access-selectall input:checked + .tc-aff-access-check { background: url("/static/icons/affiliates/check-white.svg") center center / 8px 6px no-repeat rgb(0, 107, 112); border-color: rgb(0, 107, 112); }
.tc-aff-create-page .tc-aff-access-minisearch { width: 200px; margin: 0px; }
.tc-aff-create-page .pure-form-stacked label.tc-aff-table-search { padding: 7px 13px; }
.tc-aff-create-page .pure-form-stacked label.tc-aff-access-selectall { padding: 0px; font-weight: 400; }
.tc-aff-create-page .products-list-list .box-list-product-row { display: flex; align-items: center; gap: 8px; height: 66px; width: 100%; box-sizing: border-box; margin: 0px 0px 16px; padding: 0px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(232, 236, 239); border-image: initial; background: transparent; box-shadow: none; border-radius: 0px; float: none; }
.tc-aff-create-page .products-list-list { border-top: 1px solid rgb(232, 236, 239); }
.tc-aff-create-page .products-list-list .box-list-product-row:last-child { margin-bottom: 0px; }
.tc-aff-create-page .products-list-list .box-list-product-row .selector { width: 100%; }
.tc-aff-create-page .products-list-list .box-list-product-row .checkbox input[type="checkbox"] { appearance: none; width: 16px; height: 16px; margin: 0px 8px 0px 0px; border: 1px solid rgb(209, 215, 222); border-radius: 4px; background: rgb(255, 255, 255); cursor: pointer; vertical-align: middle; box-shadow: none; }
.tc-aff-create-page .products-list-list .box-list-product-row .checkbox input[type="checkbox"]:checked { background: url("/static/icons/affiliates/check-white.svg") center center / 8px 6px no-repeat rgb(0, 107, 112); border-color: rgb(0, 107, 112); }
.tc-aff-create-page .products-list-list .box-list-product-row .checkbox label { display: inline-flex; align-items: center; margin: 0px; padding: 0px; font-size: 14px; font-weight: 400; line-height: 20px; color: rgb(54, 65, 82); cursor: pointer; }
.tc-aff-create-page .products-list-list .box-list-product-row .checkbox label::before, .tc-aff-create-page .products-list-list .box-list-product-row .checkbox label::after { content: none; }
.tc-aff-create-page .products-list-list .box-list-product-row .ribbon { order: 2; margin-left: auto; position: static; transform: none; background: transparent; }
.tc-aff-create-page #products-list-title { font-size: 12px; font-weight: 400; line-height: 16px; color: rgb(132, 147, 168); margin: 0px 0px 8px; border: 0px; padding: 0px; }
.tc-aff-create-page .tc-aff-access-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0px 0px; }
.tc-aff-create-page .tc-aff-access-foot .tc-aff-perpage { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: rgb(42, 54, 72); }
.tc-aff-create-page .tc-aff-access-foot .tc-aff-pill select { appearance: none; width: 72px; height: 32px; padding: 0px 30px 0px 13px; background: url("/static/icons/affiliates/chevron-expand.svg") right 13px center / 8px 4.94px no-repeat rgb(255, 255, 255); border: 1px solid rgb(209, 215, 222); border-radius: 8px; font-size: 14px; line-height: 16px; color: rgb(54, 65, 82); cursor: pointer; box-shadow: none; margin: 0px; }
.tc-aff-create-page .tc-aff-pagination { display: flex; align-items: center; gap: 8px; }
.tc-aff-create-page .tc-aff-page-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 32px; box-sizing: border-box; padding: 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: rgb(54, 65, 82); cursor: pointer; background: rgb(255, 255, 255); border: 1px solid rgb(232, 236, 239); }
.tc-aff-create-page .tc-aff-page-btn.tc-aff-page-nav { width: 32px; padding: 7px; background: rgb(246, 248, 249); border-color: rgb(209, 215, 222); }
.tc-aff-create-page .tc-aff-page-btn[disabled] { opacity: 0.5; cursor: default; }
.tc-aff-create-page .tc-aff-page-btn.tc-aff-page-prev::before, .tc-aff-create-page .tc-aff-page-btn.tc-aff-page-next::before { content: ""; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center center; background-size: 4.94px 8px; }
.tc-aff-create-page .tc-aff-page-btn.tc-aff-page-prev::before { background-image: url("/static/icons/affiliates/page-prev.svg"); }
.tc-aff-create-page .tc-aff-page-btn.tc-aff-page-next::before { background-image: url("/static/icons/affiliates/page-next.svg"); }
.tc-aff-create-page .products-list-list .box-list-product-row.ui-selected, .tc-aff-create-page .products-list-list .box-list-product-row:hover { background: transparent; }
.tc-aff-create-page .products-list-list .box-list-product-row .checkbox input[type="checkbox"] { position: static; opacity: 1; pointer-events: auto; left: auto; top: auto; }
.tc-aff-create-page #ui-affiliate-settings .products-list-list .box-list-product-row .checkbox input[type="checkbox"] { display: inline-block; }
.tc-aff-create-page #ui-affiliate-settings .box-list-product-row.ui-selected, .tc-aff-create-page #ui-affiliate-settings .box-list-product-row:hover { background: transparent; }
.tc-aff-create-page #ui-affiliate-settings #products-list .box-list-product-row.ui-selected, .tc-aff-create-page #ui-affiliate-settings #products-list .box-list-product-row:hover, .tc-aff-create-page #ui-affiliate-settings #products-list .box-list-product-row { background: transparent; }
.tc-aff-create-page #ui-affiliate-settings #products-list .box-list-product-row .selector { width: auto; flex: 0 1 auto; min-width: 0px; }
.tc-aff-create-page #ui-affiliate-settings #products-list .box-list-product-row .checkbox { display: flex; align-items: center; gap: 8px; margin: 0px; padding: 0px; min-height: 0px; }
.tc-aff-create-page #ui-affiliate-settings #products-list .box-list-product-row .checkbox input[type="checkbox"] { margin: 0px; flex: 0 0 auto; }
.tc-aff-create-page #ui-affiliate-settings #products-list .box-list-product-row .checkbox label { padding: 0px; margin: 0px; text-indent: 0px; }
.tc-aff-create-page #ui-affiliate-settings #products-list .box-list-product-row .checkbox label { padding-left: 0px !important; margin-right: 0px; }
.tc-aff-create-page #ui-affiliate-settings #products-list .box-list-product-row .ui-search-name { display: inline-flex; align-items: center; padding: 0px; font-size: 14px; font-weight: 400; line-height: 20px; color: rgb(54, 65, 82); }
.alertify .ajs-dialog.tc-aff-modal { padding: 0px; border: 1px solid rgb(232, 232, 232); border-radius: 12px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 10px, rgba(0, 0, 0, 0.06) 0px 1px 18px, rgba(0, 0, 0, 0.1) 0px 3px 5px; overflow: hidden; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 762px !important; }
.alertify .ajs-dialog.tc-aff-modal .ajs-header { margin: 0px; padding: 16px 56px 16px 24px; border-bottom: 1px solid rgb(231, 235, 238); background: rgb(255, 255, 255); font-size: 16px; font-weight: 500; line-height: 24px; color: rgb(43, 56, 74); border-radius: 12px 12px 0px 0px; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-close { position: absolute; top: 12px; right: 15px; width: 32px; height: 32px; border-radius: 6px; background: url("/static/icons/affiliates/modal-close.svg") center center / 8.79px 8.79px no-repeat; cursor: pointer; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-close:hover { background-color: rgb(246, 248, 249); }
.alertify .ajs-dialog.tc-aff-modal .ajs-body { min-height: 0px; }
.alertify .ajs-dialog.tc-aff-modal .ajs-content, body.tc-aff-reskin .ajs-dialog.tc-aff-import-modal.tc-modal-affiliate-import .ajs-content { padding: 0px 22px; color: rgb(54, 65, 82); }
.alertify .ajs-dialog.tc-aff-import-modal .ui-content { padding: 16px 0px 24px; margin: 0px; }
.alertify .ajs-dialog.tc-aff-modal .ajs-footer { padding: 12px 24px; margin: 0px 0px 29px; background: rgb(255, 255, 255); border-radius: 0px 0px 12px 12px; }
.alertify .ajs-dialog.tc-aff-modal .ajs-footer .ajs-buttons.ajs-primary { display: flex; justify-content: flex-end; align-items: center; }
.alertify .ajs-dialog.tc-aff-modal .ajs-footer .ajs-button, body.tc-aff-reskin .ajs-dialog.tc-aff-import-modal.tc-modal-affiliate-import .ajs-footer .ajs-button { margin: 0px 0px 0px 8px; padding: 8px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; text-transform: none; letter-spacing: 0px; box-shadow: none; min-height: 0px; min-width: 0px; height: 36px; box-sizing: border-box; }
.alertify .ajs-dialog.tc-aff-modal .ajs-footer .ajs-button.ajs-cancel { background: rgb(255, 255, 255); border: 1px solid rgb(232, 236, 239); color: rgb(54, 65, 82); }
.alertify .ajs-dialog.tc-aff-modal .ajs-footer .ajs-button.ajs-ok { background: rgb(0, 107, 112); border: 1px solid rgb(0, 107, 112); color: rgb(255, 255, 255); }
.alertify .ajs-dialog.tc-aff-modal .ajs-footer .ajs-button[disabled] { opacity: 0.5; }
/* Sign-up modal: the Copy actions carry the emphasis (primary), the footer Close is secondary. */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed .ajs-footer .ajs-button.ajs-ok {
background: #ffffff;
border-color: #e8ecef;
color: #364152;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed .pure-button.button-secondary[data-clipboard-target] {
background: #006b70;
border: 0;
box-shadow: none;
color: #ffffff;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed .pure-button.button-secondary[data-clipboard-target]:hover {
background: #00868c;
border-color: #00868c;
}
/* Sign-up modal chrome: title 18/600, 24px gutter, no divider, readonly grey inputs. */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed .ajs-header {
font-size: 18px;
font-weight: 600;
line-height: normal;
color: #1f2937;
padding: 24px 56px 0 24px;
border-bottom: 0;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed .ajs-content { padding: 20px 24px 24px; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed input.embed.ui-embed-link {
height: 36px;
box-sizing: border-box;
padding: 0 14px;
background: #f6f8f9;
border: 1px solid #d1d7de;
border-radius: 8px;
box-shadow: none;
font-size: 14px;
color: #364152;
}
/* Copy buttons: Figma content-copy icon (white) instead of the fa-clipboard glyph. */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed .button-secondary[data-clipboard-target] .fa-clipboard {
width: 16px;
height: 16px;
margin: 0 2px 0 0;
font-size: 0;
background-color: #ffffff;
-webkit-mask: url("/static/icons/affiliates/copy.svg") center / 12.67px 14.67px no-repeat;
mask: url("/static/icons/affiliates/copy.svg") center / 12.67px 14.67px no-repeat;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed .button-secondary[data-clipboard-target] .fa-clipboard::before { content: none; }
/* Embed tab: live preview, Button/Image segment, colour swatches, code box. */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-modal-preview {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100px;
box-sizing: border-box;
margin: 0 0 16px;
background: #f7f9fa;
border: 1px solid #e8e8e8;
border-radius: 6px;
overflow: hidden;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-modal-preview > i {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 4px 8px;
background: #b5c8e1;
border-radius: 0 0 0 4px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 10px;
font-weight: 800;
font-style: normal;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #ffffff;
}
/* Preview button — match the Figma mock (in-modal preview only; real embeds are unaffected). */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-modal-preview .thrivecart-button {
padding: 10px 24px;
border: 0;
border-radius: 4px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: normal;
}
/* Three equal control columns (type / text / colour). */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-modal-options {
display: flex;
gap: 24px;
align-items: flex-start;
margin: 0 0 16px;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-modal-options > .pure-u-sm-5-24 { flex: 1 1 0; width: auto; min-width: 0; padding: 0; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-modal-options > .pure-u-sm-18-24 { flex: 2 1 0; width: auto; min-width: 0; padding: 0; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-modal-options > .pure-u-sm-1-24 { display: none; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-customise-button_type-button-wrap > .pure-g { display: flex; gap: 24px; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-customise-button_type-button-wrap > .pure-g > .pure-u-sm-13-24,
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-customise-button_type-button-wrap > .pure-g > .pure-u-sm-10-24 { flex: 1 1 0; width: auto; min-width: 0; padding: 0; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-customise-button_type-button-wrap > .pure-g > .pure-u-sm-1-24 { display: none; }
/* Column labels. */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-modal-options > div > label,
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-customise-button_type-button-wrap > .pure-g > div > label {
display: block;
margin: 0 0 8px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 13px;
font-weight: 700;
color: #223047;
}
/* Button / Image segment toggle (scoped to the options wrap so it never touches the tab radios). */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-modal-options .radiogroup-half {
display: flex;
height: 38px;
margin: 0;
padding: 0;
background: #f1f3f5;
border-radius: 6px;
overflow: hidden;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-modal-options .radiogroup-half > div { flex: 1 1 0; display: flex; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-modal-options .radiogroup-half label {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 13px;
font-weight: 600;
color: #8292a1;
cursor: pointer;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #affiliate-embed-modal-options .radiogroup-half > div:has(input:checked) label {
background: #4e97e8;
color: #ffffff;
font-weight: 700;
}
/* Button-text input. */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed input#affiliate-embed-modal-option-label {
height: 38px;
box-sizing: border-box;
margin: 0;
padding: 0 12px;
background: #ffffff;
border: 1px solid #e1e5eb;
border-radius: 6px;
box-shadow: none;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 13px;
font-weight: 500;
color: #223047;
}
/* Colour swatches. */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed .colour-swatch-wrapper { display: flex; gap: 8px; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed .colour-swatch { width: 34px; height: 34px; margin: 0; border-radius: 6px; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed .colour-swatch.active { box-shadow: inset 0 0 0 2px #006b70; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed .colour-swatch.active::after { content: none; }
/* Embed code box. */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-embed #ui-affiliate-code {
box-sizing: border-box;
padding: 16px;
background: #f1f3f5;
border: 1px solid #e8e8e8;
border-radius: 6px;
box-shadow: none;
font-family: 'Cousine', 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 12px;
line-height: 1.6;
color: #7e8299;
}
/* Customizer modal: URL prefix fills the row, Partner input gets a real width,
and the content sits in a 32px gutter. */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .ajs-content { padding: 16px 32px 32px; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .affiliate-option-affiliate_url-wrap {
display: flex;
align-items: stretch;
gap: 7px;
text-align: left;
margin: 0 0 24px;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .affiliate-option-affiliate_url-wrap .product-basic-slug-prefix {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
height: 32px;
margin: 0;
padding: 0 12px;
box-sizing: border-box;
border: 1px solid #d1d7de;
border-radius: 8px;
background: #f6f8f9;
font-size: 14px;
line-height: 32px;
color: #364152;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .affiliate-option-affiliate_url-wrap #affiliate-option-affiliate_url {
flex: 0 0 255px;
height: 32px;
margin: 0;
padding: 0 12px;
box-sizing: border-box;
border: 1px solid #d1d7de;
border-radius: 8px;
font-size: 14px;
color: #364152;
box-shadow: none;
}
/* Title: Inter 18/600, #1f2937 — the product name stays bold via its
.
No divider; 32px gutter so the title lines up with the inputs below it. */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .ajs-header {
font-size: 18px;
font-weight: 600;
line-height: normal;
color: #1f2937;
padding: 32px 56px 0 32px;
border-bottom: 0;
}
/* Preview builder: restyle the legacy checkout builder
into the affiliate sign-up preview — canvas, dashed sections, white Edit buttons,
and the grey placeholder bars. */
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-wrap {
position: relative;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 32px;
overflow: hidden;
box-sizing: border-box;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-header,
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-footer { display: none; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-body { padding: 0; margin: 0; width: 100%; box-sizing: border-box; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-content {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
max-width: none;
box-sizing: border-box;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-widget {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin: 0;
padding: 24px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.02);
border: 1px dashed #9ca3af;
border-radius: 6px;
float: none;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-widget-success_heading { padding: 16px; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-widget-btn {
margin: 8px 0 0;
padding: 8px 16px;
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 6px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: normal;
color: #6b7280;
box-shadow: none;
width: auto;
float: none;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-widget-success_heading .builder-widget-btn { margin: 0; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-widget-block {
width: 280px;
max-width: 100%;
height: 110px;
margin: 0;
background: #e5e7eb;
border-radius: 4px;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-widget-success_content .builder-widget-field {
width: 380px;
max-width: 100%;
margin: 0;
float: none;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-widget-success_content .builder-widget-field span {
display: block;
width: 100%;
height: 10px;
background: #e5e7eb;
border-radius: 2px;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-widget-success_content .builder-widget-field-double span { height: 16px; }
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-widget-fields .builder-widget-field {
width: 480px;
max-width: 100%;
margin: 0;
float: none;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-widget-fields .builder-widget-field span {
display: block;
width: 100%;
height: 12px;
background: #e5e7eb;
border-radius: 2px;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-widget-fields .builder-widget-field-multi {
display: flex;
gap: 8px;
}
.alertify .ajs-dialog.tc-aff-modal.tc-modal-affiliate-campaign-signup .builder-widget-fields .builder-widget-field-multi span {
flex: 1 1 0;
height: 16px;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-tabs { display: flex; gap: 16px; margin: 0px 0px 16px; border-bottom: 1px solid rgb(209, 215, 222); }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px; font-size: 16px; font-weight: 500; line-height: 24px; color: rgb(132, 147, 168); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-tab.active { color: rgb(42, 54, 72); border-bottom-color: rgb(0, 107, 112); }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-tab-ico { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; background-color: currentcolor; mask-repeat: no-repeat; mask-position: center center; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-tab-ico--products { mask-image: url("/static/icons/affiliates/import-tab-products.svg"); mask-size: 16.67px 16.67px; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-tab-ico--type { mask-image: url("/static/icons/affiliates/import-tab-type.svg"); mask-size: 16.67px 16.67px; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-tab-ico--file { mask-image: url("/static/icons/affiliates/import-tab-file.svg"); mask-size: 18.33px 15px; }
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-step[data-step="1"] > p { font-size: 16px; font-weight: 500; line-height: 24px; color: rgb(132, 147, 168); margin: 0px 0px 16px; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-search,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-import-search { position: relative; margin: 0 0 16px; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-search::before,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-import-search::before {
content: '';
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: url("/static/icons/affiliates/search-products.svg") no-repeat center;
background-size: 11.66px 11.66px;
pointer-events: none;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-search input.ui-search-field[type="text"],
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-import-search input.ui-search-field[type="text"] {
width: 100%;
height: 48px;
padding: 13px 8px 13px 36px;
border: 1px solid #d1d7de;
border-radius: 8px;
font-size: 14px;
line-height: 20px;
color: #364152;
box-shadow: none;
margin: 0;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-search input.ui-search-field[type="text"]::placeholder,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-import-search input.ui-search-field[type="text"]::placeholder { color: #afbbc9; }
/* Chips / toolbar / footer reuse the Product Access anatomy (1551:13523-13546). */
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-chips,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-chips {
display: flex;
align-items: center;
gap: 13px;
flex-wrap: nowrap;
overflow: hidden;
margin: 0 0 16px;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-chips.hidden,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-chips.hidden { display: none; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-chip,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: #c6f6d5;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
line-height: 16px;
color: #364152;
/* Keep each chip a single-line pill; the fit-loop rolls overflow into "+N". */
flex-shrink: 0;
white-space: nowrap;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-chip-x,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-chip-x {
width: 12px;
height: 12px;
background: url("/static/icons/affiliates/chip-close.svg") no-repeat center;
background-size: 7px 7px;
cursor: pointer;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-chip-more,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-chip-more {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 500;
line-height: 16px;
color: #000000;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-chip-more::before,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-chip-more::before {
content: '';
width: 1px;
height: 16px;
background: #d9d9d9;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-toolbar,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-toolbar {
display: flex;
align-items: center;
gap: 9.5px;
margin: 0 0 16px;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-count,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-count {
font-size: 14px;
line-height: 20px;
color: #2a3648;
white-space: nowrap;
margin-right: auto;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-selectall,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-selectall {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 0 !important;
font-size: 12px;
font-weight: 400;
line-height: 18px;
color: #364152;
cursor: pointer;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-selectall input,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-selectall input { position: absolute; opacity: 0; pointer-events: none; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-check,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-check {
width: 16px;
height: 16px;
border: 1px solid #d1d7de;
border-radius: 4px;
background: #ffffff;
flex: 0 0 auto;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-selectall input:checked + .tc-aff-access-check,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-selectall input:checked + .tc-aff-access-check {
background: #006b70 url("/static/icons/affiliates/check-white.svg") no-repeat center;
background-size: 8px 6px;
border-color: #006b70;
}
/* Mini search = the shared table-search pill (Figma 13493): px-13 py-8, r6,
16px icon slot w/ 11.66 glyph, 12/16 text. The alertify dialog mounts at
body level so the .tc-affiliates-page pill rules don't reach it. */
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-minisearch,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-minisearch {
display: flex;
align-items: center;
gap: 8px;
width: 200px;
margin: 0;
padding: 7px 13px !important;
background: #ffffff;
border: 1px solid #d1d7de;
border-radius: 6px;
box-sizing: border-box;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-minisearch::before,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-minisearch::before {
content: '';
width: 16px;
height: 16px;
flex-shrink: 0;
background: url("/static/icons/affiliates/search.svg") no-repeat center;
background-size: 11.66px 11.66px;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-minisearch input.ui-search-field[type="text"],
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-minisearch input.ui-search-field[type="text"] {
width: 100%;
height: auto;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
font-size: 12px;
line-height: 16px;
color: #364152;
box-shadow: none;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-minisearch input.ui-search-field[type="text"]::placeholder,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-minisearch input.ui-search-field[type="text"]::placeholder { color: #afbbc9; }
/* Product rows: 66px, hairline separators, 16px custom-look checkboxes. */
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select {
overflow-x: visible;
overflow-y: auto;
max-height: none;
margin: 0;
padding: 0;
list-style: none;
/* The top hairline lives here, not on li:first-child — List.js hides
filtered rows with display:none, so :first-child can be invisible. */
border-top: 1px solid #e8ecef;
}
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select li {
display: flex;
align-items: center;
height: 66px;
box-sizing: border-box;
margin: 0 0 16px;
padding: 0;
border: 0;
/* Rows are border-b only (13537/13538); the list's top border supplies the
first row's line (13536) — a top border per row would draw a double
hairline 16px under the previous row's. */
border-bottom: 1px solid #e8ecef;
border-radius: 0;
background: transparent;
}
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select li:last-child { margin-bottom: 0; }
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select li + li { margin-top: 0; }
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select li:hover,
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select li.active { border-color: #e8ecef; background: transparent; }
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select li .checkbox { width: 100%; }
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select li .checkbox input[type="checkbox"] {
display: inline-block;
position: static;
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
margin: 0 8px 0 0;
border: 1px solid #d1d7de;
border-radius: 4px;
background: #ffffff;
cursor: pointer;
vertical-align: middle;
box-shadow: none;
}
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select li .checkbox input[type="checkbox"]:checked {
background: #006b70 url("/static/icons/affiliates/check-white.svg") no-repeat center;
background-size: 8px 6px;
border-color: #006b70;
}
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select li .checkbox label {
display: inline-flex;
align-items: center;
width: auto;
margin: 0;
padding: 0 !important;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #364152;
cursor: pointer;
position: static;
}
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select li .checkbox label::before,
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select li .checkbox label::after { content: none; }
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-product-select li i {
display: inline-block;
margin: 0 0 0 8px;
font-size: 12px;
line-height: 16px;
color: #8493a8;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-access-foot,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-access-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 16px 0 0;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-perpage,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-perpage { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: #2a3648; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-pill select,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-pill select {
-webkit-appearance: none;
appearance: none;
width: 72px;
height: 32px;
padding: 0 30px 0 13px;
background: #ffffff url("/static/icons/affiliates/chevron-expand.svg") no-repeat right 13px center;
background-size: 8px 4.94px;
border: 1px solid #d1d7de;
border-radius: 8px;
font-size: 14px;
line-height: 16px;
color: #364152;
cursor: pointer;
box-shadow: none;
margin: 0;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-pagination,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-pagination { display: flex; align-items: center; gap: 8px; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-page-btn,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
min-width: 32px;
box-sizing: border-box;
padding: 8px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
color: #364152;
cursor: pointer;
background: #ffffff;
border: 1px solid #e8ecef;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-page-btn.tc-aff-page-nav,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-page-btn.tc-aff-page-nav { width: 32px; padding: 7px; background: #f6f8f9; border-color: #d1d7de; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-page-btn[disabled],
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-page-btn[disabled] { opacity: 0.5; cursor: default; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-page-btn.tc-aff-page-prev::before,
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-page-btn.tc-aff-page-next::before,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-page-btn.tc-aff-page-next::before {
content: '';
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: 4.94px 8px;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-page-btn.tc-aff-page-prev::before,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-page-btn.tc-aff-page-prev::before { background-image: url("/static/icons/affiliates/page-prev.svg"); }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-page-btn.tc-aff-page-next::before,
.alertify .ajs-dialog.tc-modal-affiliate-grant .tc-aff-page-btn.tc-aff-page-next::before { background-image: url("/static/icons/affiliates/page-next.svg"); }
/* Step 2 — import-type radio cards (1551:13561/13563). Tabs→card gap is 36
(13552): the ul's 36 top margin collapses with the tabs' 16 through the
unstyled step wrapper, resolving to 36. */
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios { display: flex; flex-direction: column; gap: 36px; margin: 36px 0 0; padding: 0; list-style: none; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios li, .alertify .ajs-dialog.tc-payout .tc-modal-radios li, .alertify .ajs-dialog.tc-modal-payout_cancel .tc-modal-radios li {
width: 100%;
max-width: none;
margin: 0;
padding: 24px 16px;
border: 1px solid #d1d7de;
border-radius: 8px;
background: #ffffff;
box-sizing: border-box;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios li.active, .alertify .ajs-dialog.tc-payout .tc-modal-radios li.active, .alertify .ajs-dialog.tc-modal-payout_cancel .tc-modal-radios li.active {
border: 2px solid #006b70;
padding: 23px 15px;
background: #ffffff;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios .radio, .alertify .ajs-dialog.tc-payout .tc-modal-radios .radio, .alertify .ajs-dialog.tc-modal-payout_cancel .tc-modal-radios .radio {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios .radio input[type="radio"], .alertify .ajs-dialog.tc-payout .tc-modal-radios .radio input[type="radio"], .alertify .ajs-dialog.tc-modal-payout_cancel .tc-modal-radios .radio input[type="radio"] {
order: 2;
display: inline-block;
position: static;
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
margin: 0;
border: 1px solid #d1d7de;
border-radius: 100px;
background: #ffffff;
cursor: pointer;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios .radio input[type="radio"]:checked, .alertify .ajs-dialog.tc-payout .tc-modal-radios .radio input[type="radio"]:checked, .alertify .ajs-dialog.tc-modal-payout_cancel .tc-modal-radios .radio input[type="radio"]:checked {
border-color: #006b70;
background: radial-gradient(circle, #006b70 4px, transparent 4.5px) #ffffff;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios .radio input[type="radio"][disabled] { opacity: 0.65; cursor: default; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios .radio label, .alertify .ajs-dialog.tc-payout .tc-modal-radios .radio label, .alertify .ajs-dialog.tc-modal-payout_cancel .tc-modal-radios .radio label {
order: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 0;
padding: 0 !important;
position: static;
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #2a3648;
text-align: center;
cursor: pointer;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios .radio label::before, .alertify .ajs-dialog.tc-payout .tc-modal-radios .radio label::before, .alertify .ajs-dialog.tc-modal-payout_cancel .tc-modal-radios .radio label::before {
content: '';
position: static;
display: block;
width: 48px;
height: 48px;
/* IconArea→Content gap is 16 (13561); the label has no own gap. */
margin: 0 0 16px;
border: 0;
border-radius: 24px;
background-color: #f6f8f9;
background-repeat: no-repeat;
background-position: center;
transition: none;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios .radio label::after { content: none; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios .radio label[for="tc-affiliate-import-source-csv"]::before, .alertify .ajs-dialog.tc-payout .tc-modal-radios .radio label[for="tc-affiliate-import-source-csv"]::before, .alertify .ajs-dialog.tc-modal-payout_cancel .tc-modal-radios .radio label[for="tc-affiliate-import-source-csv"]::before {
background-image: url("/static/icons/affiliates/import-type-csv.svg");
background-size: 16px 20px;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios .radio label[for="tc-affiliate-import-source-autoresponder"]::before, .alertify .ajs-dialog.tc-payout .tc-modal-radios .radio label[for="tc-affiliate-import-source-autoresponder"]::before, .alertify .ajs-dialog.tc-modal-payout_cancel .tc-modal-radios .radio label[for="tc-affiliate-import-source-autoresponder"]::before {
background-image: url("/static/icons/affiliates/import-type-autoresponder.svg");
background-size: 19.5px 20px;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-modal-radios .radio label span, .alertify .ajs-dialog.tc-payout .tc-modal-radios .radio label span, .alertify .ajs-dialog.tc-modal-payout_cancel .tc-modal-radios .radio label span {
display: block;
margin-top: 4px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #8493a8;
}
/* Step 3-csv — dashed uploader (1551:13577-13580). */
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-source-wrapper-csv { text-align: left; padding: 0; }
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-source-wrapper-csv .tc-aff-import-file-label {
width: 100%;
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #2b384a;
/* 36 collapses with the tabs' 16 through the step wrapper → 36 (13569). */
margin: 36px 0 4px;
text-align: left;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 48px;
border: 2px dashed #e8ecef;
border-radius: 8px;
background: #ffffff;
cursor: pointer;
box-sizing: border-box;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-dropzone-ico {
display: block;
width: 32px;
height: 32px;
background: url("/static/icons/affiliates/import-upload.svg") no-repeat center;
background-size: 32px 32px;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-dropzone-text {
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #364152;
text-align: center;
}
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-source-wrapper-csv .tc-aff-import-file-help {
width: 100%;
margin: 4px 0 0;
font-size: 13px;
line-height: 20px;
color: #8593a8;
text-align: left;
}
/* Validation-error state on the create/edit modal fields (reskin only):
the failing validator's input gets .tc-aff-field-invalid until edited. */
.tc-aff-create-page #ui-affiliate-settings .tc-aff-field-invalid {
border-color: #cf3b39;
}
.tc-aff-create-page #ui-affiliate-settings .tc-aff-field-invalid:focus {
border-color: #cf3b39;
outline: 0;
}
/* Clear/Search match the toolbar's 32px compact buttons (Sort/Filter/CSV).
The button-qualified variant outranks the earlier
`.tc-aff-toolbar button.tc-aff-btn-secondary { height: 36px }`. */
.tc-affiliates-page .tc-aff-toolbar button.affiliates-list-reset,
.tc-affiliates-page .tc-aff-toolbar button.affiliates-list-search {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 12px;
box-sizing: border-box;
}
/* ---- Import wizard: autoresponder step, errors, selected-file state --------
None of these have a Figma frame (the set covers 13513/13552/13569 only), so
they reuse the values the CSV step already establishes. Selectors carry extra
weight because plugins/core.affiliates/admin/style.css loads AFTER main.css
and would win any specificity tie. */
/* In-modal error surface (additive — the toast still fires). */
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-error {
margin: 0 0 16px;
padding: 12px 16px;
border-radius: 8px;
border-left: 3px solid #cf3b39;
background: #fdf3f3;
font-size: 13px;
line-height: 20px;
color: #8a2f2e;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-error.hidden { display: none; }
/* Selected CSV file — the pick had no on-page confirmation before. */
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-dropzone--has-file { border-color: #006b70; }
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-dropzone-file {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 2px 8px;
border-radius: 8px;
background: #c6f6d5;
font-size: 12px;
font-weight: 500;
line-height: 16px;
color: #364152;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.alertify .ajs-dialog.tc-aff-import-modal .tc-aff-import-dropzone-file.hidden { display: none; }
/* Step 3-autoresponder — same anatomy as the CSV step. */
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-step[data-step="3-autoresponder"] > p:not(.callout) {
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #8493a8;
margin: 36px 0 16px;
width: 100%;
text-align: left;
}
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-source-wrapper.ui-affiliate-import-source-wrapper-autoresponder {
text-align: left;
padding: 0;
}
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-source-wrapper-autoresponder > div { margin: 0 0 16px; }
/* Field label (the tag/list sentence) — matches "Select CSV file" (13578). */
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-source-wrapper-autoresponder p.ui-affiliate-import-source-wrapper-autoresponder-sentence {
width: 100%;
margin: 0 0 4px;
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #2b384a;
text-align: left;
}
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-source-wrapper-autoresponder p.ui-affiliate-import-source-wrapper-autoresponder-sentence.hidden { display: none; }
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-source-wrapper-autoresponder select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 48px;
box-sizing: border-box;
padding: 13px 32px 13px 8px;
background: #ffffff url("/static/icons/affiliates/chevron-expand.svg") no-repeat right 13px center;
background-size: 8px 4.94px;
border: 1px solid #d1d7de;
border-radius: 8px;
font-size: 14px;
line-height: 20px;
color: #364152;
box-shadow: none;
margin: 0;
}
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-source-wrapper-autoresponder select[disabled] {
background-color: #f6f8f9;
color: #afbbc9;
cursor: default;
}
/* Tip callout → the reskin's quiet helper card (was a blue-bar legacy callout). */
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-step[data-step="3-autoresponder"] p.callout.callout-help {
width: 100%;
box-sizing: border-box;
margin: 16px 0 0;
padding: 12px 16px;
border: 0;
border-left: 3px solid #006b70;
border-radius: 8px;
background: #f6f8f9;
font-size: 13px;
line-height: 20px;
color: #8593a8;
text-align: left;
}
.alertify .ajs-dialog.tc-aff-import-modal .ui-affiliate-import-step[data-step="3-autoresponder"] p.callout.callout-help b { color: #2b384a; font-weight: 500; }
/* ---- Bulk approve modal (dev/internal tool — no Figma frame) ---------------
Reskinned to the same chrome as the import wizard so the two dialogs match.
Legacy markup untouched; the class is added via the gated `classNames` opt. */
.alertify .ajs-dialog.tc-aff-bulk-modal {
max-width: 560px !important;
padding: 0;
border: 1px solid #e8e8e8;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 1px 18px rgba(0, 0, 0, 0.06), 0 3px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .ajs-header {
margin: 0;
padding: 16px 24px;
border-bottom: 1px solid #e7ebee;
background: #ffffff;
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #2b384a;
border-radius: 12px 12px 0 0;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .ajs-body { min-height: 0; }
.alertify .ajs-dialog.tc-aff-bulk-modal .ajs-content,
body.tc-aff-reskin .ajs-dialog.tc-aff-bulk-modal .ajs-content { padding: 16px 24px 24px; color: #364152; }
.alertify .ajs-dialog.tc-aff-bulk-modal .ui-content { padding: 0; margin: 0; }
/* Body copy + the "search by ID" footnote. */
.alertify .ajs-dialog.tc-aff-bulk-modal .pane > p {
font-size: 14px;
line-height: 20px;
color: #364152;
margin: 0 0 16px;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .pane .text-size-small {
font-size: 13px;
line-height: 20px;
color: #8593a8;
margin: 4px 0 0;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .pane > div:last-child { margin: 0; }
/* Field: label + textarea (48px-family metrics, radius 8). */
.alertify .ajs-dialog.tc-aff-bulk-modal .pane form.pure-form-stacked label {
display: block;
padding: 0;
margin: 0 0 4px;
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #2b384a;
text-transform: none;
letter-spacing: 0;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .pane form.pure-form-stacked textarea[name="affiliate_ids"] {
width: 100%;
min-height: 120px;
box-sizing: border-box;
padding: 13px 8px;
border: 1px solid #d1d7de;
border-radius: 8px;
background: #ffffff;
font-size: 14px;
line-height: 20px;
color: #364152;
box-shadow: none;
margin: 0;
resize: vertical;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .pane form.pure-form-stacked textarea[name="affiliate_ids"]::placeholder { color: #afbbc9; }
/* Results list (step 2). */
.alertify .ajs-dialog.tc-aff-bulk-modal .ui-massapprove-affiliate_list {
margin: 0 0 16px;
padding: 0;
border: 1px solid #e8ecef;
border-radius: 8px;
max-height: 220px;
overflow-y: auto;
list-style: none;
text-align: left;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .ui-massapprove-affiliate_list li {
padding: 12px 16px;
border-bottom: 1px solid #e8ecef;
font-size: 14px;
line-height: 20px;
color: #364152;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .ui-massapprove-affiliate_list li:last-child { border-bottom: 0; }
/* Footer: white bar, teal primary, outline secondary — as the import wizard. */
.alertify .ajs-dialog.tc-aff-bulk-modal .ajs-footer {
padding: 12px 24px;
margin: 0;
background: #ffffff;
border-top: 1px solid #e7ebee;
border-radius: 0 0 12px 12px;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .ajs-footer .ajs-buttons.ajs-primary { text-align: right; }
.alertify .ajs-dialog.tc-aff-bulk-modal .ajs-footer .ajs-button,
body.tc-aff-reskin .ajs-dialog.tc-aff-bulk-modal .ajs-footer .ajs-button {
margin: 0 0 0 8px;
padding: 8px 18px;
height: 36px;
box-sizing: border-box;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-decoration: none;
text-transform: none;
letter-spacing: 0;
box-shadow: none;
min-height: 0;
min-width: 0;
text-shadow: none;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .ajs-footer .ajs-button.ajs-cancel {
background: #ffffff;
border: 1px solid #e8ecef;
color: #364152;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .ajs-footer .ajs-button.ajs-ok {
background: #006b70;
border: 1px solid #006b70;
color: #ffffff;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .ajs-footer .ajs-button.ajs-secondary {
background: #ffffff;
border: 1px solid #e8ecef;
color: #364152;
}
.alertify .ajs-dialog.tc-aff-bulk-modal .ajs-footer .ajs-button[disabled] { opacity: 0.5; }
/* Retry, moved inline onto the Failed card (Figma 1540:14313: teal text action
with a replay glyph, sitting beside the label). The label row becomes the
flex line that holds it. */
/* Label row: label (inline, so its ::after suffix flows) + the Retry action. */
.tc-affiliates-page.tc-affiliates-page #affiliates-payouts-stats ul.self-clear > li .tc-aff-card-labelrow {
order: 1;
display: flex;
align-items: center;
/* Figma 1540:14313 places the Retry button flush against the end of the label
(button x=128.91 == label x=24 + label width) — the 20px of visual space
comes from the button's own px-20, not from a row gap. */
gap: 0;
/* The buttons are absolute overlays in Figma (siblings of the cards, not
children), so a 36px-tall button must not grow this row: the card is
p-24 + icon 36 + gap 32 + (label 16 + gap 4 + value 28) + p-24 = 164 exactly.
Pinning the row to the label's own leading-[16px] keeps that arithmetic and
lets the taller button overflow, centred, the way the overlay does. */
height: 16px;
width: 100%;
}
.tc-affiliates-page.tc-affiliates-page #affiliates-payouts-stats ul.self-clear > li .tc-aff-card-labelrow h6 { order: 0; }
.tc-affiliates-page.tc-affiliates-page #affiliates-payouts-stats ul.self-clear > li .tc-aff-card-action {
display: inline-flex;
align-items: center;
/* 14313/14308: icon and Text Layout are adjacent — the button declares no gap. */
gap: 0;
padding: 8px 20px;
margin: 0;
border: 0;
background: transparent;
box-shadow: none;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0;
text-transform: none;
color: #006b70;
cursor: pointer;
white-space: nowrap;
}
.tc-affiliates-page.tc-affiliates-page #affiliates-payouts-stats ul.self-clear > li .tc-aff-card-action[disabled] { opacity: 0.5; cursor: default; }
/* Legacy label is "Retry failed payments"; Figma's action reads "Retry". The
text is hidden rather than dropped so the button (and its handler) is intact. */
.tc-affiliates-page.tc-affiliates-page #affiliates-payouts-stats ul.self-clear > li .tc-aff-card-action { font-size: 0; }
/* The ::after stands in for Figma's "Text Layout" wrapper, which carries its own
padding — pr-[6px] on Retry (1540:14315), px-[6px] on Pay now (1540:14310). */
.tc-affiliates-page.tc-affiliates-page #affiliates-payouts-stats ul.self-clear > li .tc-aff-card-action::after {
content: "Retry";
padding-right: 6px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #006b70;
}
/* Retry's glyph is the `replay` icon rotated 180° — not the
currency_exchange used on the card's IconArea. */
.tc-affiliates-page.tc-affiliates-page #affiliates-payouts-stats ul.self-clear > li .tc-aff-card-action .fa {
font-size: 0;
width: 16px;
height: 16px;
background: url("/static/icons/affiliates/card-retry.svg") no-repeat center;
background-size: 10.67px 13.33px;
transform: rotate(180deg);
}
.tc-affiliates-page.tc-affiliates-page #affiliates-payouts-stats ul.self-clear > li .tc-aff-card-action .fa::before { content: none; }
/* Queue up / View queue have no Figma slot (dev-gated tools) — kept and given the
reskin's secondary-button look rather than dropped. */
.tc-affiliates-page.tc-affiliates-page #affiliates-payouts-stats .affiliates-payouts-pay-block .ui-massqueue,
.tc-affiliates-page.tc-affiliates-page #affiliates-payouts-stats .affiliates-payouts-pay-block .ui-massqueue-status {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 12px;
box-sizing: border-box;
border: 1px solid #e8ecef;
border-radius: 8px;
background: #ffffff;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #364152;
text-shadow: none;
box-shadow: none;
}
/* Payout row actions (Figma 1540:16410/16411: 32-tall buttons top-right).
Figma draws only "View" + a kebab; Pay / Cancel / Clawback / Retry are real
live actions the frame omits, so they are KEPT and given the same button
language rather than dropped or hidden behind an invented kebab. */
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .payout-column-action .pure-button {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 12px;
box-sizing: border-box;
margin: 0;
border: 1px solid #e8ecef;
border-radius: 6px;
background: #ffffff;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #364152;
text-decoration: none;
text-shadow: none;
box-shadow: none;
white-space: nowrap;
}
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .payout-column-action .pure-button[disabled] { opacity: 0.5; }
/* Pay is the row's primary action. */
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .payout-column-action .ui-payout {
background: #006b70;
border-color: #006b70;
color: #ffffff;
}
/* Amount / date / processor stack (16414/16415/16452). */
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .payout-row-commission-amount {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: #364152;
}
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .payout-row-commission-date {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #8493a8;
}
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .payout-column-amount .icon-order-processor {
display: block;
width: 32px;
height: 18px;
margin: 4px 0 0;
object-fit: contain;
}
/* Payout status ribbon → pill, matching the affiliate rows. Figma 16375 shows no
status badge, but Overdue/Scheduled/Paid is real state the list depends on, so
it is kept and restyled rather than dropped. The legacy span is a rotated -45°
banner across the thumbnail corner; unwind that and pill it.
`.affiliates-payouts .payouts-list` is needed to outrank the plugin sheet. */
.tc-affiliates-page.tc-affiliates-page .affiliates-payouts .payouts-list .payouts-list-row .ribbon span,
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .ribbon span {
position: static;
display: inline-block;
width: auto;
transform: none;
rotate: none;
padding: 2px 8px;
border-radius: 999px;
background: #e8ecef;
color: #364152;
font-size: 11px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0.3px;
text-transform: none;
text-align: center;
box-shadow: none;
opacity: 1;
}
/* Status colours, mirroring the legacy palette's intent. */
.tc-affiliates-page.tc-affiliates-page .affiliates-payouts .payouts-list .payouts-status-overdue .ribbon span { background: #fed7d7; color: #822727; }
.tc-affiliates-page.tc-affiliates-page .affiliates-payouts .payouts-list .payouts-status-due .ribbon span { background: #faf089; color: #5f4c0b; }
.tc-affiliates-page.tc-affiliates-page .affiliates-payouts .payouts-list .payouts-status-scheduled .ribbon span { background: #bee3f8; color: #1f5895; }
.tc-affiliates-page.tc-affiliates-page .affiliates-payouts .payouts-list .payouts-status-paid .ribbon span { background: #9ae6b4; color: #22543d; }
.tc-affiliates-page.tc-affiliates-page .affiliates-payouts .payouts-list .payouts-status-refunded .ribbon span,
.tc-affiliates-page.tc-affiliates-page .affiliates-payouts .payouts-list .payouts-status-clawback .ribbon span { background: #feebc8; color: #7b341e; }
.tc-affiliates-page.tc-affiliates-page .affiliates-payouts .payouts-list .payouts-status-cancelled .ribbon span { background: #e8ecef; color: #6d7d87; }
.tc-affiliates-page.tc-affiliates-page .affiliates-payouts .payouts-list .payouts-status-failed .ribbon span,
.tc-affiliates-page.tc-affiliates-page .affiliates-payouts .payouts-list .payouts-status-paused .ribbon span { background: #fed7d7; color: #822727; }
/* View button: px-8 py-8, gap-4, r6, 12px glyph in a 16 slot,
label 14/500/16 — the icon was missing entirely. */
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .payout-column-action .ui-order-more {
gap: 4px;
padding: 8px;
}
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .payout-column-action .ui-order-more::before {
content: '';
width: 16px;
height: 16px;
flex: 0 0 auto;
background: url("/static/icons/affiliates/row-view.svg") no-repeat center;
background-size: 12px 12px;
}
/* Text Layout px-4 (16410) — applied to the label, not the button box. */
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .payout-column-action .ui-order-more {
line-height: 16px;
}
/* Payments head: [Upcoming ▾] [All time ▾] │ [Filters],
gap 12, selects 36 tall px-13 py-7 r8, divider 1×24 #d1d7de inside 8px pads. */
.tc-affiliates-page .tc-aff-head-controls { display: flex; align-items: center; gap: 12px; }
.tc-affiliates-page .tc-aff-head-controls .tc-aff-pill select {
height: 36px;
box-sizing: border-box;
padding: 7px 34px 7px 13px;
border: 1px solid #d1d7de;
border-radius: 8px;
background: #ffffff url("/static/icons/affiliates/chevron-expand.svg") no-repeat right 13px center;
background-size: 8px 4.94px;
font-size: 14px;
line-height: 20px;
color: #2b384a;
box-shadow: none;
margin: 0;
}
.tc-affiliates-page .tc-aff-head-controls .tc-aff-head-divider {
flex: 0 0 auto;
width: 1px;
height: 24px;
margin: 0 8px;
background: #d1d7de;
}
.tc-affiliates-page .tc-aff-head-controls .tc-aff-pay-filters {
display: inline-flex;
align-items: center;
height: 36px;
padding: 8px 18px;
box-sizing: border-box;
border-radius: 8px;
background: #006b70;
border: 1px solid #006b70;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #ffffff;
cursor: pointer;
white-space: nowrap;
}
/* Filters toggles the legacy sort/filter strip — hidden only on demand. */
.tc-affiliates-page.tc-affiliates-page #view-affiliates-payouts .affiliates-sort-pre { display: none; }
.tc-affiliates-page.tc-affiliates-page #view-affiliates-payouts.tc-aff-pay-filters-open .affiliates-sort-pre { display: block; }
/* Row kebab: 32×32, px-8, r6, #e8ecef border, more_vert glyph
at its native 2.67×10.67 viewBox in a 16 slot. */
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .payout-column-action { position: relative; }
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .tc-aff-row-kebab {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
box-sizing: border-box;
border: 1px solid #e8ecef;
border-radius: 6px;
background: #ffffff;
cursor: pointer;
flex: 0 0 auto;
}
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .tc-aff-row-kebab::before {
content: '';
width: 16px;
height: 16px;
background: url("/static/icons/affiliates/row-kebab.svg") no-repeat center;
background-size: 2.67px 10.67px;
}
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .tc-aff-row-kebab:hover { background: #f6f8f9; }
/* The overflow menu — real buttons, relocated. */
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .tc-aff-kebab-menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
z-index: 20;
min-width: 160px;
padding: 4px;
background: #ffffff;
border: 1px solid #e8ecef;
border-radius: 8px;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 1px 18px rgba(0, 0, 0, 0.06), 0 3px 5px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 2px;
}
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .tc-aff-kebab-menu.hidden { display: none; }
@keyframes tc-aff-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .tc-aff-kebab-menu .pure-button {
display: flex;
width: 100%;
height: auto;
padding: 8px 12px;
border: 0;
border-radius: 6px;
background: transparent;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #364152;
text-align: left;
justify-content: flex-start;
box-shadow: none;
}
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .tc-aff-kebab-menu .pure-button:hover { background: #f6f8f9; }
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .tc-aff-kebab-menu .ui-payout { color: #006b70; }
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .tc-aff-kebab-menu .ui-payout-cancel { color: #cf3b39; }
.tc-affiliates-page.tc-affiliates-page .payouts-list-row .tc-aff-kebab-menu .pure-button[disabled] { opacity: 0.5; cursor: default; }
/* ---- Payments page order --------------------------------
The frame runs: segmented tabs → stat cards → banner → toolbar → rows → pager.
The template emits the toolbar BEFORE the stats box, so reorder with flex
rather than moving markup (the toolbar is a