/**
 * The "Your host" box — the partner card in a listing sidebar.
 *
 * ITS OWN FILE ON PURPOSE. This started inside inquiry-public.css, which loads
 * on the tour page and NOWHERE ELSE. The box itself renders on hotel, activity
 * and rental pages too, so on those it drew with no styling at all — the exact
 * kind of fault that looks perfect on the page you tested and broken on the
 * four you did not. Caught 9 September 2026 by loading a hotel page and looking.
 */

/* ==========================================================================
   THE "YOUR HOST" BOX on a listing page
   --------------------------------------------------------------------------
   Chiran, 9 September 2026, looking at the live box: "some of them are left
   align, some of them are centre, and all the texts having the same font size —
   they are even hard to read."

   He was right on both counts. The old box had no hierarchy at all: the
   partner's name, their trade and the year they joined were the same size, so
   the eye had nothing to land on. And the trade sat left while everything else
   sat centred.

   WHAT THIS DOES:
     · one column, everything centred, one rhythm down the card
     · the NAME is the biggest thing, and reads as a link — it carries the arrow
       that means "opens in a new tab", so nobody is surprised when it does
     · the TRADE is a small solid pill in that partner type's colour, white text
     · "member since" drops back to a quiet line, which is all it deserves
   ========================================================================== */
.ss-host-box .heading {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #6b6b80;
}
.ss-host-box__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.ss-host-box__avatar { display: inline-block; position: relative; line-height: 0; }
.ss-host-box__avatar img { border-radius: 50%; }

/* The name — the loudest thing in the box, and obviously clickable. */
.ss-host-box .ss-host-box__name {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: #090920;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(9, 9, 32, .28);
}
.ss-host-box .ss-host-box__name:hover,
.ss-host-box .ss-host-box__name:focus {
    color: #7700FF;
    text-decoration-color: #7700FF;
}
.ss-host-box__name .svgico {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    opacity: .55;
}

/* The trade — a small solid pill in that partner type's own colour. The colour
   itself is set inline by sarisara_partner_type_colour(), so it stays in one
   place in PHP rather than being repeated once per type here. */
.ss-host-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.5;
}
.ss-host-pill .svgico {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    color: #fff;
}

.ss-host-box__since {
    margin: 0;
    font-size: 12.5px;
    color: #6b6b80;
}
.ss-host-box__rating { margin: 0; }
.ss-host-box__rating .author-review-label {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: #6b6b80;
}

/* The theme styles a bare .btn gold and out-specifies a single class, so this
   button is defended with two classes and its own reset (see RULE 5.5). */
.ss-host-box .ss-host-box__ask,
.ss-host-box a.ss-host-box__ask {
    display: inline-block;
    margin-top: 6px;
    padding: 11px 30px;
    border-radius: 999px;
    background: #7700FF;
    border: 1px solid #7700FF;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    text-decoration: none;
    letter-spacing: 0;
    box-shadow: none;
}
.ss-host-box a.ss-host-box__ask:hover,
.ss-host-box a.ss-host-box__ask:focus {
    background: #6200d6;
    border-color: #6200d6;
    color: #fff;
}