/*-- AD badge - canonical "AD" pill in the top-right corner of every sponsored
     surface (sidebar ad, feed ad, business detail ad, AdSlotResolver-promoted
     cards, IsFeaturedPromotion-promoted cards). Translucent whitish background
     with dark text "punched out" so it reads as a disclosure marker, not a CTA.
     Anchors to the nearest position:relative ancestor - .ad-zone a, .ad-zone,
     and .list-wrapper .item .card-image are all set up for this. */
.tl-ad-badge { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.22rem 0.5rem; border-radius: var(--tl-radius); background: rgba(245, 243, 240, 0.88); color: var(--ink-mid); text-transform: uppercase; line-height: 1; pointer-events: none; box-shadow: 0 1px 3px rgba(30, 26, 22, 0.12); backdrop-filter: blur(2px); }

.tx-credit { color: #2e7d32; font-weight: 600; }

.tx-debit { color: #c62828; font-weight: 600; }

.tl-wallet { display: flex; flex-direction: column; gap: 1rem; }

.tl-wallet-card { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1.25rem; }

.tl-wallet-balance-card { text-align: center; padding: 1rem; background: linear-gradient(135deg, var(--clay) 0%, var(--clay-dark) 100%); color: #fff; }

.tl-wallet-balance-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }

.tl-wallet-balance-amount { font-family: var(--font-display); font-size: 3rem; font-weight: 800; margin: 0; line-height: 1.1; }

.tl-wallet-section-title { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 0.75rem; color: var(--ink); }

.tl-wallet-amount-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.tl-wallet-amount-row .tl-wallet-preset { font-size: 0.9rem; padding: 0.4rem 0.9rem; }

.tl-wallet-amount-row .tl-wallet-amount-input { flex: 0 1 10rem; max-width: 12rem; width: auto; }

.tl-wallet-content-link { color: var(--clay); text-decoration: none; }

.tl-wallet-content-link:hover { text-decoration: underline; }

.tl-wallet-content-na { color: var(--ink-light); font-style: italic; }

.tl-wallet-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }

.tl-wallet-table th,
.tl-wallet-table td { padding: 0.45rem 0.6rem; text-align: left; border-bottom: 1px solid var(--sand); }

.tl-wallet-table th { background: var(--sand); font-weight: 600; }

.tl-wallet-tx-type { text-transform: capitalize; }

/*-- Recurring top-up: the checkbox toggle and the billing-terms notice it
     reveals. .tl-wallet-recur-notice stays display:none until JS adds .tl-show. */
.tl-wallet-recur-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--ink-mid); cursor: pointer; }

.tl-wallet-recur-notice { display: none; margin-top: 0.5rem; padding: 0.6rem 0.75rem; background: var(--sand); border-left: 3px solid var(--clay); border-radius: var(--tl-radius); font-size: 0.85rem; color: var(--ink-mid); line-height: 1.45; }

.tl-wallet-recur-notice.tl-show { display: block; }

/*-- Subscriptions card rows: amount + meta on the left, Cancel button on the right. */
.tl-wallet-sub { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--sand); flex-wrap: wrap; }

.tl-wallet-sub:last-child { border-bottom: none; }

.tl-wallet-sub-amount { font-weight: 600; color: var(--ink); }

.tl-wallet-sub-meta { font-size: 0.85rem; color: var(--ink-light); margin-top: 0.15rem; }

.tl-wallet-sub-cancel { font-size: 0.85rem; }

/*-- Top-up form result message states (CSS classes, not inline JS style). */
.tl-wallet-msg-error { color: var(--error); }

.tl-wallet-msg-ok { color: var(--sage); }

/*-- My Advertisements: Stats dashboard. The Edit/Stats switch is a single
     .tl-form-view-public button at the top-right of each form (same affordance
     as the "View Public" button on businesses/events/marketplace/news edit
     forms). Width constraints below stop the chart canvas + table from
     forcing the page-manager column wider than its allocated space. */
.advertisements-wrapper,
.advertisements-my-wrapper { min-width: 0; max-width: 100%; box-sizing: border-box; }

.tl-myad-stats-range { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }

.tl-myad-stats-range-btn { display: inline-block; padding: 0.45rem 0.95rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); background: var(--white); color: var(--ink); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; }

.tl-myad-stats-range-btn:hover { background: var(--sand); border-color: var(--clay-light, #dfb392); color: var(--ink); }

.tl-myad-stats-range-btn.is-active { background: var(--clay); border-color: var(--clay); color: #fff; }

.tl-myad-stats-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem; margin-bottom: 1rem; min-width: 0; max-width: 100%; }

.tl-myad-stats-hero-tile { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1rem 1.1rem; position: relative; }

.tl-myad-stats-hero-icon { position: absolute; top: 0.85rem; right: 0.95rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sand); color: var(--clay); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }

.tl-myad-stats-hero-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-light); font-weight: 700; margin-bottom: 0.45rem; }

.tl-myad-stats-hero-value { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1.1; margin-bottom: 0.4rem; }

.tl-myad-stats-hero-delta { font-size: 0.78rem; color: var(--ink-light); }

.tl-myad-stats-delta-up { color: var(--sage); font-weight: 700; }

.tl-myad-stats-delta-down { color: #c5562a; font-weight: 700; }

.tl-myad-stats-delta-flat { color: var(--ink-light); font-weight: 600; font-style: italic; }

.tl-myad-stats-delta-suffix { color: var(--ink-light); }

/*-- Window-section banner. Sits between the lifetime hero row and the
     filter-affected content. Visual anchor so the reader knows "everything
     below this header is scoped to the active filter pill above". */
.tl-myad-stats-window-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--ink); margin: 2rem 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--sand-dark); }

/*-- Flat section title. Used by the daily breakdown so the table sits
     directly under a heading without being wrapped in another card. */
.tl-myad-stats-flat-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 2rem 0 0.85rem 0; padding: 0; }

.tl-myad-stats-flat-title i.fa { color: var(--clay); margin-right: 0.4rem; }

.tl-myad-stats-section { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1.1rem 1.2rem; margin-bottom: 1.25rem; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }

.tl-myad-stats-section-header { margin-bottom: 0.85rem; }

.tl-myad-stats-section-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 0.2rem 0; }

.tl-myad-stats-section-title i.fa { color: var(--clay); margin-right: 0.4rem; }

.tl-myad-stats-section-sub { font-size: 0.82rem; color: var(--ink-light); }

/*-- Chart container is sized by Chart.js's responsive=true. min-width:0 lets
     it shrink below the canvas's intrinsic 300px when the column is narrow.
     The forced max-width on the canvas guards against Chart.js writing a
     pixel width that exceeds the parent. */
.tl-myad-stats-chart-wrap { position: relative; height: 320px; width: 100%; min-width: 0; max-width: 100%; }

.tl-myad-stats-chart-wrap canvas { max-width: 100% !important; }

.tl-myad-stats-eff { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; margin-bottom: 1.25rem; min-width: 0; max-width: 100%; }

.tl-myad-stats-eff-tile { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 0.95rem 1.1rem; }

.tl-myad-stats-eff-tile.tl-myad-stats-eff-best { background: linear-gradient(135deg, #fff 0%, #faf3e8 100%); border-color: #ffd970; }

.tl-myad-stats-eff-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-light); font-weight: 700; margin-bottom: 0.4rem; }

.tl-myad-stats-eff-best .tl-myad-stats-eff-label { color: #8a6300; }

.tl-myad-stats-eff-best .tl-myad-stats-eff-label i.fa { color: #d49f38; margin-right: 0.3rem; }

.tl-myad-stats-eff-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--ink); margin-bottom: 0.3rem; }

.tl-myad-stats-eff-value.tl-myad-stats-eff-empty { color: var(--ink-light); }

.tl-myad-stats-eff-help { font-size: 0.78rem; color: var(--ink-light); line-height: 1.4; }

/*-- Daily breakdown table renders as the card itself: background + border +
     radius live on the wrap, not on an outer section. This keeps the card
     shell visible (white panel, rounded corners) without the double-padding
     of a card-inside-a-card. The table's own cell padding is the only
     interior whitespace. */
.tl-myad-stats-table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); margin-bottom: 1.25rem; }

.tl-myad-stats-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; table-layout: auto; }

.tl-myad-stats-table th,
.tl-myad-stats-table td { padding: 0.65rem 1rem; text-align: left; border-bottom: 1px solid var(--sand); }

.tl-myad-stats-table tr:last-child td { border-bottom: 0; }

.tl-myad-stats-table th { background: var(--sand); color: var(--ink); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; border-bottom: 2px solid var(--sand-dark); }

.tl-myad-stats-table thead tr:first-child th:first-child { border-top-left-radius: var(--tl-radius); }

.tl-myad-stats-table thead tr:first-child th:last-child { border-top-right-radius: var(--tl-radius); }

.tl-myad-stats-table td:nth-child(2),
.tl-myad-stats-table td:nth-child(3),
.tl-myad-stats-table td:nth-child(4),
.tl-myad-stats-table td:nth-child(5),
.tl-myad-stats-table td:nth-child(6) { font-variant-numeric: tabular-nums; }

.tl-myad-stats-cap-cool { color: var(--sage); font-weight: 600; }

.tl-myad-stats-cap-warm { color: #b8771f; font-weight: 600; }

.tl-myad-stats-cap-hot { color: #c5562a; font-weight: 700; }

.tl-myad-stats-cap-none { color: var(--ink-light); font-style: italic; }

.tl-myad-stats-empty { padding: 1.5rem; text-align: center; color: var(--ink-light); font-style: italic; }


@media (max-width: 640px) {
.tl-myad-stats-chart-wrap { height: 240px; }

.tl-myad-stats-hero-value { font-size: 1.5rem; }

.tl-myad-stats-eff-value { font-size: 1.3rem; }
}

/*-- Canonical ad zone - emitted by webitems/modules/monetization/page_content
     and reused by anything else that surfaces a sponsored slot (business detail
     sidebar, member profile sidebar, etc.). The wrapper carries the "Sponsored"
     label via .tl-rail-label; the link gets a subtle hover lift. Creatives
     render at their natural ratio (landscape, square, or portrait); only very
     tall portraits get capped at 1.5x width (2:3) via max-height in cqw. */
.ad-zone { position: relative; }

/*-- In-feed AdSense slot. Matches .card-feed's shell and rhythm so a slot reads
     as part of the stream, and gives the unit an explicit block width -
     responsive AdSense cannot size itself inside a container with no width. */
/*-- Tight padding on purpose: the slot carries a floating .tl-ad-badge rather
     than a stacked label, and the in-feed unit brings its own internal padding,
     so the shell only needs enough inset to keep the border off the creative. */
.ad-zone-feed { background: var(--white); border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); margin-bottom: 0.5rem; padding: 0.5rem; box-sizing: border-box; width: 100%; min-width: 0; overflow: hidden; }

.ad-zone-feed .adsbygoogle { display: block; width: 100%; }

/*-- Unfilled slots take ZERO space. When Google returns no ad it leaves the
     <ins> at its reserved height and stamps data-ad-status="unfilled", which
     paints an empty card taller than the posts around it - worse than showing
     nothing. Collapse the whole zone, label and all. The :has() rule removes
     the wrapper; the second rule is the fallback for engines without :has(),
     which at least drops the reserved height. */
.ad-zone-adsense:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

.ad-zone .tl-rail-label { /* inherits from .tl-rail-label base - left-aligned, 0.7rem 700 weight */ }

.ad-zone a { display: block; position: relative; text-decoration: none; border-radius: var(--tl-radius); overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; container-type: inline-size; }

.ad-zone a:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30, 26, 22, 0.12); }

.ad-zone img { display: block; width: 100%; height: auto; max-height: 150cqw; object-fit: cover; object-position: center top; }

.ad-zone .sponsored-text { padding: 1rem; background: var(--sand); border-radius: var(--tl-radius); }

/*-- Legacy sponsored-* classes - kept for any third-party callers but slated
     for removal. Use .ad-zone above instead; identical visuals, hover-aware. */
.sponsored-label { font-size: 0.7rem; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }

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

.sponsored-img { width: 100%; border-radius: var(--tl-radius); }

.sponsored-text { padding: 1rem; background: var(--sand); border-radius: var(--tl-radius); }

/* Ad container */
.ad-container { padding: var(--tl-space-4); text-align: center; }

/*-- Type pills for the Monetization > Campaigns list. The "Active" status pill
     was redundant (the filter dropdown already scopes the list to active or
     disabled), so the corner now carries the campaign TYPE (Sponsored Ad /
     Business / Event / Marketplace / News). Color-coded to match feed accents
     so a member's blended ads list reads at a glance: which of these is a paid
     image ad vs. which is promoting my business vs. my news article. */
.tl-owner-status-type-sponsored { background: rgba(200, 98, 42, 0.92); color: #fff; }

/* clay   - external ads */
.tl-owner-status-type-business { background: rgba(90, 122, 92, 0.92); color: #fff; }

/* sage   - businesses */
.tl-owner-status-type-event { background: rgba(196, 154, 42, 0.92); color: #fff; }

/* gold   - events */
.tl-owner-status-type-marketplace { background: rgba(142, 68, 173, 0.92); color: #fff; }

/* purple - marketplace */
.tl-owner-status-type-news { background: rgba(46, 109, 164, 0.92); color: #fff; }