/* ============================================================================
   DOFT Loadboard — UI/UX screenshot pass 10 (2026-08-15)
   Driver + Shipper. Loaded after all previous refresh hotfixes.

   Rules here intentionally override older experimental refresh rules without
   rewriting working page CSS. Structural sticky-header and theme-transition
   fixes live in JS; this file handles the remaining visual/layout regressions.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1) Expanded load actions — SUPERSEDED 2026-08-17.

      This pass styled a split button by matching "any .btn-group that contains a
      non-toggle .btn", and joined the server's two-group shape with sibling
      :has() selectors. Both were wrong:

        * the gate had no requirement that the group actually CONTAIN a toggle, so
          it squared the right edge of every standalone action — which is why
          AI Status Call / Post / Unpost / Refresh rendered as half a split button;
        * the joining selector nested :has() inside :has(), which is invalid, so
          the two halves landed 1px overlapped in one engine and ~5px apart in
          another — the "two vertical divider lines" in the 08-17 screenshots.

      The shape is now normalised in JS (refresh.js normalizeActionGroups), so there
      is exactly ONE shape to style and no sibling selectors are needed. The rules
      live in refresh-hotfix-20260817-regression.css §2. Do not re-add them here.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2) Driver /post-truck — action buttons use the available horizontal space;
      only wrap when they genuinely no longer fit.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  html[data-refresh] .truck-page .itruck .truck-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  html[data-refresh] .truck-page .itruck .truck-actions > * {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
  }
  html[data-refresh] .truck-page .itruck .truck-actions > * .btn {
    min-height: 40px !important;
    white-space: nowrap !important;
  }
}

/* Lane delete button: keep a deliberate gutter between destination selector
   and the red X, mirroring the numbered badge gutter on the left. */
/* Widen the column and let the existing centring do the rest. `text-align: right` here
   would revert refresh.css:586, which deliberately centres BOTH .col-number and
   .col-delete — its comment spells out that centring only one end of the row trades one
   asymmetry for another. And under right alignment the two declarations that were meant
   to create the gutter are inert anyway: padding-left only shrinks the content box the
   glyph is being pushed away from, and margin-left only widens an inline box that is
   already flush right. The result was the X pinned to the row's far edge with a ~41px
   gap — four times the left badge gutter it was supposed to mirror, i.e. the opposite of
   the fix. A plain 50->60px bump keeps the glyph centred and moves it ~5px off the
   selector, symmetrically at both ends. */
html[data-refresh] .post-truck-page .lp-row .col-delete {
  width: 60px !important;
  min-width: 60px !important;
}

/* Multi-state selector: US / Canada / Mexico group carets share one baseline.
   The displacement is not padding. bootstrap-multiselect builds each group as
   <li.multiselect-group><a><label><b>US</b></label><span.caret-container>…</span></a></li>
   (bootstrap-multiselect.js:948 + :961). pages/driver/post-truck.css:283 leaves that label
   `display: table-cell` and :287 does the same to the span, and round5
   (refresh-hotfix-20260728-darkmode-round5.css:191-199) then flips only the span to
   inline-flex while pinning `width:100% !important; height:100% !important` on it. A
   table-cell label inside a non-table <a> generates an anonymous table box, and a
   width:100% inline-flex sibling cannot share a line with it — so each caret drops below
   its own label. Resetting padding alone changes nothing; the load-bearing declarations
   are width/height:auto on the caret and a real flex row on the <a>. */
html[data-refresh] .post-truck-page .addr-states-block .multiselect-container li.multiselect-group > a {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
html[data-refresh] .post-truck-page .addr-states-block .multiselect-container li.multiselect-group > a > label {
  display: block !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}
html[data-refresh] .post-truck-page .addr-states-block .multiselect-container li.multiselect-group > a > .caret-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 20px !important;
  margin: 0 0 0 auto !important;
  padding: 0 8px !important;
}
html[data-refresh] .post-truck-page .addr-states-block .multiselect-container li.multiselect-group > a > .caret-container > .caret {
  display: inline-block !important;
  margin: 0 !important;
  transform: none !important;
  line-height: 1 !important;
}

/* Listing Phone should not consume a half-page when there is ample desktop
   room. Keep the whole control responsive and restore full width on phones. */
@media (min-width: 768px) {
  html[data-refresh] .post-truck-page #pic_secondary1_controlWrp {
    flex: 0 1 560px !important;
    max-width: 560px !important;
  }
  html[data-refresh] .post-truck-page #pic_secondary1_controlWrp .phone-group > .input-group {
    width: max-content !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
  }
  html[data-refresh] .post-truck-page #pic_secondary1_phone.phone-inputmask {
    flex: 0 1 230px !important;
    width: 230px !important;
    min-width: 155px !important;
    max-width: 230px !important;
  }
}
@media (max-width: 767.98px) {
  html[data-refresh] .post-truck-page #pic_secondary1_controlWrp,
  html[data-refresh] .post-truck-page #pic_secondary1_controlWrp .phone-group > .input-group {
    width: 100% !important;
    max-width: 100% !important;
  }
  html[data-refresh] .post-truck-page #pic_secondary1_phone.phone-inputmask {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* --------------------------------------------------------------------------
   3) Driver Search Loads /panel — missing separators, readable price chips,
      active filters must not look disabled, Verify Now is white in dark mode.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  html[data-refresh] .loads-page:not(.shipper-loads-page) #dTable .t-head .c-dest {
    border-left: 1px solid var(--line, #e1e4e8) !important;
  }
  html[data-refresh] .loads-page:not(.shipper-loads-page) #dTable .t-head .cb-size {
    border-left: 1px solid var(--line, #e1e4e8) !important;
  }

  /* The chip cannot grow inside the column it lives in. round9 pins .c-price/.c-permile
     to 60px (refresh-hotfix-20260730-darkmode-round9.css:37-42) and round10 to 62px in
     the 768-1080 band; with round9:13-17's border-box and pages/loads.css:212-220's
     `padding: 0 3px 0 6px` + 1px border that leaves 50px of content box, so a 54px chip
     is not enlarged — it is CUT by `#dTable .t-body .c { overflow: hidden }`, which is
     worse than the screenshot that asked for this. Widen the column by the 8px the chip
     actually needs, header and body together so the sticky header stays aligned, and no
     further: the px come out of the flexible Origin/Destination region that round9's
     comment was protecting when it pinned these columns in the first place. */
  html[data-refresh] .loads-page:not(.shipper-loads-page) #dTable :is(.c-price, .c-permile) {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }
  html[data-refresh] .loads-page:not(.shipper-loads-page) #dTable .t-body :is(.c-price, .c-permile) a,
  html[data-refresh] .loads-page:not(.shipper-loads-page) #dTable .t-body :is(.c-price, .c-permile) .premium-show-price {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    /* releases round10:241-247's max-width:60px, which would otherwise cap the chip
       below the 54px minimum this fix exists to guarantee. 68 - 6 - 3 - 1 = 58. */
    max-width: 58px !important;
    min-width: 54px !important;
    min-height: 25px !important;
    padding: 3px 7px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
}

/* A selected/usable select value in LIGHT mode is foreground text, not muted
   placeholder text. This targets the header filters only and does not alter the
   disabled state or placeholder color. */
html[data-refresh]:not([data-theme="dark"]) .loads-page .tbl-filter .bootstrap-select:not(.disabled) > .dropdown-toggle:not(.bs-placeholder) .filter-option-inner-inner,
html[data-refresh]:not([data-theme="dark"]) .loads-page .tbl-filter .bootstrap-select:not(.disabled) > .dropdown-toggle:not(.bs-placeholder) .filter-option {
  color: #17191d !important;
  -webkit-text-fill-color: #17191d !important;
  opacity: 1 !important;
}

html[data-theme="dark"][data-refresh] .alAccountVerificationAlert.a-required .a-action .btn,
html[data-theme="dark"][data-refresh] .alAccountVerificationAlert.a-required .a-action a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* --------------------------------------------------------------------------
   4) AI Call broker dialog dark mode — no pale green / white islands.
   -------------------------------------------------------------------------- */
/* Scope is .ai-dlg-overlay, NOT #aiCallDlg. ai-call.js builds five dialogs through the
   same dialogShell() helper — aiCallDlg, aiBulkDlg, aiCallPremiumDlg, aiCallIdentityDlg,
   aiCallCardDlg — and every one of them gets that class. The pale-green trial card is
   rendered by the BULK dialog too (ai-call.js ~1868 and ~2056, both closed by a
   dialogShell('aiBulkDlg', ...)), so keying on #aiCallDlg alone left Bulk AI Call still
   bright in dark mode. ai-call.js only ever CONSUMES these vars via var(--x, fallback)
   and never defines them, so defining them on the overlay resolves for every nested card. */
html[data-theme="dark"][data-refresh] .ai-dlg-overlay {
  --aic-trial-bg: #262d36;
  --aic-trial-bd: #3a4552;
  --aic-trial-fg: #f4f6f8;
  --aic-card-bg: #262d36;
  --aic-card-line: #3a4552;
}
/* The cards are inline-styled by ai-call.js, so match them on the variable name that is
   literally present in their style attribute rather than rewriting that file. */
html[data-theme="dark"][data-refresh] .ai-dlg-overlay div[style*="--aic-trial-bg"],
html[data-theme="dark"][data-refresh] .ai-dlg-overlay div[style*="--aic-card-line"] {
  color: #f4f6f8 !important;
  -webkit-text-fill-color: #f4f6f8 !important;
}
html[data-theme="dark"][data-refresh] .ai-dlg-overlay div[style*="--aic-trial-bg"] *,
html[data-theme="dark"][data-refresh] .ai-dlg-overlay div[style*="--aic-card-line"] * {
  color: #f4f6f8 !important;
  -webkit-text-fill-color: #f4f6f8 !important;
}

/* --------------------------------------------------------------------------
   5) Rate Forecast / Estimated Fuel Cost — two desktop calendars stay on one
      row in dark mode too; light result tables get the same subtle separators.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  html[data-refresh] #resultBlock #pickers {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }
  html[data-refresh] #resultBlock #pickers > .rc-dp {
    display: block !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 50% !important;
  }
  html[data-refresh] #resultBlock #pickers > .rc-dp .datepicker,
  html[data-refresh] #resultBlock #pickers > .rc-dp .bootstrap-datetimepicker-widget,
  html[data-refresh] #resultBlock #pickers > .rc-dp table {
    width: 100% !important;
    max-width: 100% !important;
  }
  html[data-refresh] #resultBlock #pickers > .rc-dp .datepicker {
    padding-right: 0 !important;
  }
  html[data-refresh] #resultBlock #pickers > .rc-dp table {
    table-layout: fixed !important;
  }
  html[data-refresh] #resultBlock #pickers > .rc-dp .bootstrap-datetimepicker-widget table td.day {
    width: auto !important;
  }
}
@media (max-width: 767.98px) {
  html[data-refresh] #resultBlock #pickers {
    display: flex !important;
    flex-flow: column nowrap !important;
    gap: 10px !important;
  }
  html[data-refresh] #resultBlock #pickers > .rc-dp {
    width: 100% !important;
  }
}
html[data-refresh]:not([data-theme="dark"]) .res-table tr:not(:last-child) > :is(th, td) {
  border-bottom: 1px solid #e3e6ea !important;
}

/* --------------------------------------------------------------------------
   6) Public Find Loads dark mode — legacy #eee grid lines became glaring white.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] .find-loads-page #lTable,
html[data-theme="dark"][data-refresh] .find-loads-page #lTable :is(.t-head, .t-body, .b-load, .cb, .c, .cb-detail) {
  border-color: #3a414b !important;
}
html[data-theme="dark"][data-refresh] .find-loads-page #lTable .t-head {
  border-bottom-color: #3a414b !important;
}

/* --------------------------------------------------------------------------
   7) Sign up / Login dark mode and login footer alignment.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] :is(.doft-signup-page, .doft-login-page) .si-apple img {
  filter: brightness(0) invert(78%) !important;
  opacity: .95 !important;
}
/* The signup root is painted with the canvas explicitly in
   refresh-hotfix-20260817-regression.css §7 — `transparent` here was the opposite of
   what the stale-paint case needs, so it is deliberately not re-declared. */

@media (min-width: 576px) {
  html[data-refresh] .doft-login-page .card-footer > div {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 18px !important;
  }
  html[data-refresh] .doft-login-page .card-footer > div > p {
    float: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   8) Factoring dark testimonial — clip the carousel/card to its rounded shape,
      avoid gray square corner bleed, keep quote/art icons visible.
   -------------------------------------------------------------------------- */
/* The square gray corners are NOT the carousel. Verified against the live page: the
   testimonial ships from the DB as .card > .card-content > .card-body > (quote <i>) and a
   sibling .carousel, and refresh-hotfix-20260727-darkmode-round4.css:91-109 repaints BOTH
   .card and .card-body with var(--surface) in dark mode while only .card carries
   bootstrap's border-radius — so .card-body's square corners paint straight over its
   parent's rounded ones. (.card-content is not in round4's list at all.) Clip the card and
   stop the inner surfaces from painting a box of their own; the carousel rules below stay
   as a second line of defence. */
html[data-theme="dark"][data-refresh] .doft-factoring-document .card {
  border-radius: 12px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-clip: padding-box !important;
}
html[data-theme="dark"][data-refresh] .doft-factoring-document :is(.card-content, .card-body) {
  background-color: transparent !important;
  border-radius: inherit !important;
}
/* The oversized opening quote is meant to be a watermark — the document's own <style> sets
   `i.fa-quote-left { color: #f2f2f2 }`, i.e. barely-there on white. round4:115-122 recolors
   every fa icon inside a marketing document to var(--text-body), which promotes that 3rem
   glyph to full-strength body text sitting on top of the testimonial it should sit behind.
   Give it back a low-contrast tint so the quote and the text stop fighting. */
html[data-theme="dark"][data-refresh] .doft-factoring-document i.fa-quote-left {
  color: var(--line, #343b45) !important;
  opacity: .9 !important;
}
html[data-theme="dark"][data-refresh] .doft-factoring-document .carousel {
  border-radius: 12px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--surface-alt, #171c23) !important;
  background-clip: padding-box !important;
}
html[data-theme="dark"][data-refresh] .doft-factoring-document :is(.carousel-inner, .carousel-item) {
  border-radius: inherit !important;
  border-color: var(--line, #343b45) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-factoring-document .carousel-item > * {
  background-color: transparent !important;
}
html[data-theme="dark"][data-refresh] .doft-factoring-document :is(blockquote, .testimonial, .review, .review-block) {
  border-radius: 12px !important;
  background-clip: padding-box !important;
}
/* --------------------------------------------------------------------------
   9) Search Trucks / Trusted Drivers mobile cards.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Trusted Drivers: pin message + bookmark to the card's right edge. */
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck {
    position: relative !important;
    padding-bottom: 58px !important;
  }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .cb-contactlinks {
    position: absolute !important;
    /* 14px card gutter + the bookmark's own 44px hit target (refresh-loads.css:307-310)
       + an 8px gap. At the 56px this started as, the two 44px boxes span 14-58 and
       56-100 and overlap by 2px, so the bookmark — later in the DOM — swallows the edge
       of the paper-plane's tap target instead of sitting a stable distance from it. */
    right: 66px !important;
    bottom: 14px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .cb-bookmark {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Search Trucks: company + contact are two cells inside the same .cb-contact.
     Anchor the CONTACT cell to a stable right-hand column; company consumes
     whatever remains. This keeps Alex / Armando / Erik / Roy on one visual
     vertical axis instead of letting the company text decide where names begin. */
  html[data-refresh] .trucks-page:not(.drivers-bookmarks-page) #dTable .t-body .b-truck .cb-contact {
    display: grid !important;
    /* minmax(0,220px), not a hard 220px: the track has to be allowed to shrink, and
       flex-basis is 220px rather than 0 so the cell asks for the room it needs instead
       of being squeezed to a few px and then clipping the name out of sight. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 220px) !important;
    align-items: center !important;
    gap: 0 !important;
    flex: 1 1 220px !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    overflow: hidden !important;
  }
  html[data-refresh] .trucks-page:not(.drivers-bookmarks-page) #dTable .t-body .b-truck .cb-contact :is(.c-company, .c-contact):not(.any-val) {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Re-assert refresh-loads.css:173 at matching depth. That hide is (1,5,1); the grid
     rule above is (1,7,1), so without this an unqualified `display: block` would out-rank
     it and bring back the empty-value placeholders — trucks.js emits
     <div class="c c-company any-val">&mdash;</div>, so the "dash soup" the round returning
     this rule was written to kill would reappear on Search Trucks only (Trusted Drivers is
     excluded by :not(.drivers-bookmarks-page), which is exactly what makes it easy to miss). */
  html[data-refresh] .trucks-page:not(.drivers-bookmarks-page) #dTable .t-body .b-truck .cb-contact :is(.c-company, .c-contact).any-val {
    display: none !important;
  }
  html[data-refresh] .trucks-page:not(.drivers-bookmarks-page) #dTable .t-body .b-truck .cb-contact .c-contact:not(.any-val) {
    grid-column: 2 !important;
    width: 100% !important;
    text-align: left !important;
  }
  /* refresh-loads.css:189 puts a "·" before the contact to separate it from the company.
     In a two-column grid it separates nothing and just eats ~17px off the narrow track,
     so drop it — the Trusted Drivers layout already does the same at :255. */
  html[data-refresh] .trucks-page:not(.drivers-bookmarks-page) #dTable .t-body .b-truck .cb-contact .c-contact::before {
    content: none !important;
    margin: 0 !important;
  }
}
@media (max-width: 767.98px) {
  html[data-refresh] .trucks-page:not(.drivers-bookmarks-page) #dTable .t-body .b-truck .cb-contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 150px) !important;
    flex-basis: 150px !important;
  }
}

/* Search Trucks count gets the same List/Map-row treatment already applied to
   Trusted Drivers in Round 9. */
html[data-refresh] .trucks-page #dTable_wrapper:has(#trucksCountBlock) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  align-items: center !important;
}
html[data-refresh] .trucks-page #dTable_wrapper:has(#trucksCountBlock) > .wow-maptoggle {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 8px 0 12px !important;
}
html[data-refresh] .trucks-page #trucksCountBlock {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 8px 0 12px !important;
  padding: 0 !important;
  line-height: 34px !important;
  white-space: nowrap !important;
}
html[data-refresh] .trucks-page #dTable_wrapper:has(#trucksCountBlock) > :is(#dTable, .wow-mappane) {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
}

/* --------------------------------------------------------------------------
   10) Bulk Post — TL/LTL control had a visually/interaction-wise oversized
       hit box while Price was too narrow. Keep each control in its own box.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  html[data-refresh] .bulk-post-page .weight-block .bootstrap-select,
  html[data-refresh] .bulk-post-page .weight-block .load-size,
  html[data-refresh] .bulk-post-page .weight-block .load-size > .dropdown-toggle,
  html[data-refresh] .bulk-post-page .weight-block button.dropdown-toggle {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }
  html[data-refresh] .bulk-post-page .weight-block .load-size :is(.filter-option, .filter-option-inner, .filter-option-inner-inner) {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    /* This chain is also WHY clicking Price opened TL/LTL. Bulk Post loads
       bootstrap-select **1.13.2** (LoadPostBulkPage.jsp:17), where `.filter-option` is
       `position: absolute; left: 0; width: 100%` with inherited padding — not the static
       float that 1.13.18 uses. round11.1 then forced `width:auto; min-width:max-content;
       max-width:none; overflow:visible` onto it, so that absolutely-positioned box grew
       rightwards past the 88px button and, being POSITIONED, painted and hit-tested above
       the static .price input next to it. Every click in Price landed on TL/LTL's label.
       Pinning the box back to width:100%/min-width:0/overflow:hidden removes the overlap
       at the source; the z-index on .price below is a second, independent guarantee.

       Without the padding reset the label then collapses to a single "L" — which is the exact bug
       round11.1 (refresh-hotfix-20260731-round11.css:207-242) was written to fix, and
       narrowing the control to 68px reproduces it 4px worse. The chain inherits the
       toggle's own 10px/20px padding (round11.css:228-229) at EVERY level via the
       vendor's `padding: inherit`, so 68 − 30 = 38 → 38 − 30 = 8 → minus refresh.css:501's
       2px = 6px of content box under overflow:hidden. Zero the inherited padding here and
       the same 68px control has 36px of text box, which "LTL" (~22px) fits with room to
       spare. The toggle keeps its own 10/20 padding — round7's caret is positioned
       against it. min-width:max-content is deliberately NOT restored: that was round11.1's
       escape hatch and it is what let the value paint out over Price. */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[data-refresh] .bulk-post-page .price-wrp,
  html[data-refresh] .bulk-post-page .price-wrp .l-block {
    position: relative !important;
  }
  html[data-refresh] .bulk-post-page .price-wrp {
    z-index: 2 !important;
  }
  html[data-refresh] .bulk-post-page .price {
    position: relative !important;
    z-index: 3 !important;
    width: 86px !important;
    min-width: 86px !important;
    pointer-events: auto !important;
  }

  /* Balance the row's width budget. round11.1 reclaimed 8px from Desc for exactly this
     reason ("so Features never wraps onto a second row"), and this pass spends TL/LTL
     −20px against Price +26px, i.e. +6px net. Give the 6px back rather than discover on
     a 1280px screen that Features has dropped to a second line. */
  html[data-refresh] .bulk-post-page .desc-ctrl {
    width: 78px !important;
  }
}

/* --------------------------------------------------------------------------
   11) Expanded load Contact / Phone — same visual baseline.
   -------------------------------------------------------------------------- */
html[data-refresh] .linfo-row.contact-phone-row {
  align-items: flex-start !important;
}
html[data-refresh] .linfo-row.contact-phone-row > .linfo :is(.hdr, .val) {
  margin-top: 0 !important;
}
html[data-refresh] .linfo-row.contact-phone-row .phone-linfo .phone-actions {
  align-items: flex-start !important;
  line-height: inherit !important;
}
html[data-refresh] .linfo-row.contact-phone-row .phone-linfo .phone-actions > a {
  display: inline-block !important;
  margin: 0 !important;
  padding-top: 0 !important;
  line-height: inherit !important;
  vertical-align: top !important;
}