/**
 * THE SERVICE RESULT CARD — one card, every picker.
 *
 * Deliberately UNSCOPED (.srs-card, not .aib-redesign .srs-card) because it has
 * to look identical inside the itinerary builder and inside the Replace Service
 * panel, and those live on different pages under different wrappers. Scoping it
 * to one of them is how there came to be two cards in the first place.
 *
 * Layout, per Chiran's image 221 (1 Sep 2026):
 *
 *   [ photo ]  ⌂ HOTEL
 *              Rosewood Heritage Home        from $95   [ Add ]
 *              ◎ Nuwara Eliya · ★★★★ · Sleeps up to 6    per night
 *
 * The left tile is the listing's own photograph. The type mark moved ABOVE the
 * title, beside its label, instead of sitting alone in a coloured square.
 */

/* SELF-CONTAINED TYPOGRAPHY.
 *
 * Chiran, images 224 vs 225 (1 Sep 2026): "the location font and the star rating
 * and the sleeps-up-to count — its font weight is different, the spacing between
 * lines is different."
 *
 * He was right, and the cause was inheritance. The card set colour and size but
 * left FAMILY, WEIGHT and LINE-HEIGHT to whatever the page around it happened to
 * use — and the inquiry page and the partner dashboard do not agree. One card,
 * two pages, two different-looking cards. Every text property is now stated
 * here, so the card looks the same wherever it is dropped.
 */
.srs-card,
.srs-card * {
    font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
}

.srs-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #E7E7EE;
    border-radius: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.srs-card:hover { border-color: #D3D3DE; box-shadow: 0 3px 12px rgba(9, 9, 32, .07); }

/* THE SERVICE-TYPE STRIPE.
 *
 * Chiran, images 35 and 36: it was a full-height border down the card's left
 * edge, which fought the rounded corner and grew with the card. It is now a
 * rounded stripe sitting inside the card, exactly as tall as the photograph
 * beside it, so every card reads the same whatever its content.
 *
 * The colours are the platform's own, from itinerary-builder-redesign.css:
 * hotel blue, activity green, Local Expert gold, custom brown. */
.srs-card { position: relative; }
.srs-card::before {
    content: "";
    position: absolute;
    left: -3px;                /* straddles the card edge, Chiran 12 Sep */
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 70px;              /* the media height — see .srs-card__media */
    border-radius: 999px;
    background: #C7C7D2;
}
.srs-card.t-hotel::before    { background: #0050D8; }
.srs-card.t-activity::before { background: #3C6B52; }
.srs-card.t-curated::before  { background: #8A6A2F; }
.srs-card.t-custom::before   { background: #9A4F43; }

/* ── the photograph ─────────────────────────────────────────────────────── */
.srs-card__media {
    width: 70px; height: 70px; flex: none;
    border-radius: 12px; overflow: hidden; background: #F3F3F8;
}
.srs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No photo on the listing: keep the type mark rather than an empty grey box. */
.srs-card__media--icon { display: grid; place-items: center; }
.srs-card__media--icon svg { width: 26px; height: 26px; }
.srs-card__media--icon.hotel    { background: #E8EFFC; color: #0050D8; }
.srs-card__media--icon.activity { background: #EAF3EE; color: #3C6B52; }
.srs-card__media--icon.curated  { background: #F7F0E2; color: #8A6A2F; }

/* ── the words ──────────────────────────────────────────────────────────── */
.srs-card__main { flex: 1; min-width: 0; }

.srs-card__kind {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
    line-height: 1.2; margin-bottom: 5px;
}
.srs-card__kind svg { width: 13px; height: 13px; }
.srs-card__kind.hotel    { color: #0050D8; }
.srs-card__kind.activity { color: #3C6B52; }
.srs-card__kind.curated  { color: #8A6A2F; }

.srs-card__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: #090920; line-height: 1.3;
    letter-spacing: -.01em; overflow: hidden;
}
.srs-card__title > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.srs-card__meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 5px; font-size: 12px; font-weight: 500; line-height: 1.35; color: #6B6B80;
}
.srs-card__pin { display: inline-flex; }
.srs-card__pin svg { width: 15px; height: 15px; }
.srs-card__dot { width: 3.5px; height: 3.5px; border-radius: 50%; background: #C7C7D2; display: inline-block; }
.srs-card__stars { color: #FFB700; letter-spacing: -.5px; font-size: 15px; }

/* Free / limited / taken, on the day being filled. */
.srs-card__avail {
    flex: none;
    font-size: 10px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 6px; white-space: nowrap;
}
.srs-card__avail.is-available { background: rgba(48,179,0,.12);  color: #228A00; }
.srs-card__avail.is-limited   { background: rgba(255,183,0,.18); color: #8A6A2F; }
.srs-card__avail.is-taken     { background: rgba(255,10,31,.10); color: #D11020; }

/* ── price + action ─────────────────────────────────────────────────────── */
.srs-card__right { display: flex; align-items: center; gap: 14px; flex: none; }
.srs-card__price { text-align: right; line-height: 1.25; }
.srs-card__price b     { display: block; font-size: 15px; font-weight: 700; color: #090920; line-height: 1.25; }
.srs-card__price small { font-size: 12px; font-weight: 500; color: #6B6B80; }

.srs-card__add {
    appearance: none; -webkit-appearance: none;
    /* Every one of these is pinned. The Traveler theme's own .btn rules reach
       this button and were repainting it as a big gold rounded square — the
       exact "raw theme look" Rule 6 calls a defect. */
    padding: 10px 22px !important; border: 0 !important;
    border-radius: 999px !important;
    background: #090920 !important; color: #fff !important;
    box-shadow: none !important;
    font: inherit; font-size: 13.5px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    /* The Traveler theme uppercases every button it can reach, which turned
       "Add" into "ADD" and "Choose" into "CHOOSE". Pinned. */
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 0 !important;
}
.srs-card__add:hover { background: #7700FF !important; }

/* Taken is DISCOURAGED, never disabled — the guide may know something the
   calendar does not, and a provider who has simply not filled their calendar in
   must never become unreachable. */
.srs-card.is-taken { opacity: .72; }
.srs-card.is-taken:hover { opacity: 1; }
.srs-card__add.is-taken { background: #8A8A9A !important; }

@media (max-width: 620px) {
    .srs-card { flex-wrap: wrap; }
    .srs-card__right { width: 100%; justify-content: space-between; margin-top: 4px; }
    .srs-card__title { font-size: 15px; }
}