/* Additions the reference escort-profile bundle does not carry: the released
   mobile contact bar, and the similar-ads list layout the reference switches
   to from its thumbnails grid. */

/* The mark that sits beside the profile's name.

   The premium mark is the reference's own pill — the cream capsule, its inset
   gold ring and the rosette with the word, exactly as the listing cards draw it
   (`.escort-profile-premium-mark` lives in the shared profile stylesheet, which
   is only loaded for business listings, so the escort profile carries its own
   copy of the same three rules). It is the only mark on that line: the round
   check that used to sit beside it repeated what the ad's own plan already
   says. */
.escort-profile-premium-mark {
  align-items: center;
  background-color: #efede8;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px #b9a074;
  color: #b9a074;
  display: inline-flex;
  flex: none;
  font-size: 12px;
  font-weight: 500;
  gap: 0.25rem;
  letter-spacing: 0.02em;
  line-height: 1.375;
  padding: 0.25rem 0.5rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.escort-profile-premium-mark-icon {
  display: inline-flex;
  flex: none;
}

.escort-profile-premium-mark-label {
  display: inline-block;
}

/* The same row rule the profile's own stylesheet carries, because the escort
   profile is the reference bundle and that one belongs to business listings:
   the name grows to fill the line so the marks land on its right edge, and a
   long name shrinks instead of pushing them out of the card. */
[data-escort-profile-title-row] {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

[data-escort-profile-title-row] h1 {
  flex: 1 1 0%;
  min-width: 0;
}

/* The place chip and the advert's actions share one line while they fit, and
   take a line each when they do not.

   The summary column is about 528px wide at a 1440px window, and the place
   chip plus "Tip me", "Save" and "Report" need about 612px of it. Flex had to
   give somewhere, so it squeezed the two items that could still wrap their own
   text and left "Tip me" broken onto a second line under its coin. A button
   now keeps its label on one line whatever the width, and the actions take
   their own line — right-aligned, where the row already put them — when the
   chip would otherwise have to shrink. */
@media (min-width: 1024px) {
  [data-detail-actions-row] {
    flex-wrap: wrap;
  }

  [data-detail-actions] {
    flex: none;
    margin-left: auto;
  }

  [data-detail-actions] > a,
  [data-detail-actions] > button {
    flex: none;
    white-space: nowrap;
  }
}

/* The mobile contact bar stays fixed while the visitor scrolls and fades out
   once the footer is on screen, which is how the reference's own profile
   behaves (`escort-profile-mobile-contact.is-footer-visible`).

   It must not be released into the flow: taking it out of `position: fixed`
   added its own height to the document, which pushed the footer out of view,
   which put the bar back, which put the footer back — a loop that made the
   bottom of the page blink (Safari repaints the whole viewport each cycle). A
   fixed element can be hidden without moving anything. */
[data-sticky-mobile].is-footer-visible {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

/* Similar ads: thumbnails is the default; .is-list is the one-line variant. */
[data-listing-view-group].is-list {
  display: block;
}

[data-listing-view-group].is-list .listing-card {
  display: flex;
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0.375rem;
  overflow: visible;
  border-radius: 0.5rem;
  background-color: #ffffff;
}

[data-listing-view-group].is-list .listing-card > a {
  display: flex;
  width: 100%;
  position: relative;
}

[data-listing-view-group].is-list .listing-card-badges,
[data-listing-view-group].is-list .listing-mobile-premium {
  display: none;
}

[data-listing-view-group].is-list .listing-image-frame {
  position: relative;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  margin-right: 0.5rem;
  padding-bottom: 0;
}

[data-listing-view-group].is-list .listing-image-frame img {
  position: static;
  width: 3rem;
  height: 3rem;
  border-radius: 0.375rem;
  object-fit: cover;
}

[data-listing-view-group].is-list .listing-card-body {
  position: static;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

[data-listing-view-group].is-list .listing-card-title {
  margin-bottom: 0.25rem;
  padding: 0;
  background: none;
  color: #282a30;
  font-weight: 600;
}

[data-listing-view-group].is-list .listing-card-title span[data-listing-card-media-count] {
  display: none;
}

[data-listing-view-group].is-list .listing-card-meta {
  display: flex;
  margin-top: auto;
  padding: 0;
  gap: 0.5rem;
  background: none;
  justify-content: space-between;
}

[data-listing-view-group].is-list .listing-card-meta span {
  color: #5e5f60;
  font-size: 0.75rem;
  font-weight: 600;
}

/* The facts keep the icons the listing pages draw. The card markup paints them
   white for the thumbnail overlay, so the one-line variant has to restate the
   dark tone and the hairline separators the reference uses in list view
   (`/css/ba-compat.css` carries the same rules for `[data-listing-display-container]`). */
[data-listing-view-group].is-list [data-listing-card-facts] {
  display: flex;
  align-items: center;
}

[data-listing-view-group].is-list [data-listing-card-facts] > div {
  display: flex;
  align-items: center;
  margin-right: 8px;
  padding-right: 8px;
  border-right: 1px solid #eaeaea;
}

[data-listing-view-group].is-list [data-listing-card-facts] > div:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}

[data-listing-view-group].is-list [data-listing-card-facts] svg {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  color: #282a30;
  stroke: #282a30;
}

/* Only the icons that paint with a fill switch to the dark tone; the outlined
   ones (rate, location) must stay unfilled or they render as solid blobs. */
[data-listing-view-group].is-list [data-listing-card-facts] svg:not([fill="none"]) {
  fill: #282a30;
}

[data-listing-view-group].is-list [data-listing-card-facts] span {
  color: #87898e;
  font-size: 12px;
  font-weight: 400;
}

[data-listing-view-group].is-list [data-listing-card-more] {
  display: inline;
}

@media (min-width: 768px) {
  [data-listing-view-group].is-list .listing-image-frame {
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
  }

  [data-listing-view-group].is-list .listing-image-frame img {
    width: 4rem;
    height: 4rem;
  }
}

/* The nearby-cities grid is two-up on a phone and widens from 640px, which is
   where the shared stylesheet starts adding columns. A name that does not fit
   is cut with an ellipsis instead of wrapping onto a second line: the tiles are
   one line each in the reference. */
@media (max-width: 639px) {
  .escort-profile-nearby-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.escort-profile-nearby-grid > li {
  min-width: 0;
}

.escort-profile-nearby-grid a {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The pager's back and next arrows.

   The reference bundle drew the chevron in #cacaca on the pager's own #f5f5f5
   fill, which reads as almost blank — an operator moving through ads could not
   see which way the pager went. The arrow carries a readable grey instead,
   takes the profile's text colour on hover or keyboard focus (the reference's
   own hover rule for the link, which the icon's fixed colour used to defeat),
   and stays a step lighter when there is no neighbouring ad to open. */
.escort-profile-pager-link .escort-profile-pager-arrow {
  color: #7d7d7d;
  transition: color 0.2s ease;
}

.escort-profile-pager-link:hover .escort-profile-pager-arrow,
.escort-profile-pager-link:focus-visible .escort-profile-pager-arrow {
  color: #282a30;
}

/* The empty side of the pager is a span, not a disabled link: there is no
   neighbouring ad to open, and it says so in a lighter grey. */
span.escort-profile-pager-link .escort-profile-pager-arrow {
  color: #a3a3a3;
}