/* ═══════════════════════════════════════════════════════════════════════
   R33 Escort Services — component-scoped CSS
   Class prefix: .r33s-* (zero collision with legacy .r33-services-list)
   Mobile-first; @media (min-width: 768px) for desktop.
   No !important needed — file is enqueued in normal cascade order.
   ═══════════════════════════════════════════════════════════════════════ */

.r33s {
    margin: 0 auto;
    padding: 30px 22px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><circle cx='22' cy='22' r='1.6' fill='rgb(0,0,0)' opacity='0.08'/></svg>");
    background-repeat: repeat;
    background-size: 44px 44px;
}

.r33s-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;             /* spacing handled by .r33s-title margin-bottom */
    transition: box-shadow 220ms ease, transform 220ms ease;
}

.r33s-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
    transform: translateY(-1px);
}

.r33s-title {
    display: inline-block;
    align-self: flex-start;
    margin: 0 0 20px;
    padding: 10px 18px;
    background: #fff;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

ul.r33s-pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;       /* row-gap column-gap — 2px more breathing room between wrapped rows */
}

li.r33s-pill {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fdf2f8;
    color: #9d174d;
    font-size: 13px;
    line-height: 1.2;
    padding: 8px 14px;
    border-radius: 999px;
    border: 2px solid #f9a8d4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin: 0;
    cursor: default;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

.r33s-pill-icon {
    font-size: 14px;
    line-height: 1;
    transform: translateY(-1px);
}

.r33s-pill-label {
    line-height: 1.2;
}

li.r33s-pill:hover {
    transform: translateY(-1px);
    background: #fce7f3;
    border-color: #f590c4;
    box-shadow: 0 4px 14px rgba(157, 23, 77, 0.15);
}

.r33s-card--extras li.r33s-pill {
    background: #fdf6e3;
    color: #7c5e10;
    border-color: #e6c870;
}

.r33s-card--extras li.r33s-pill:hover {
    background: #fbeec5;
    border-color: #d4b04a;
    box-shadow: 0 4px 14px rgba(124, 94, 16, 0.15);
}

ul.r33s-prices {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: fit-content;     /* shrinks to widest row, all rows then share that width */
    max-width: 100%;        /* never overflow on mobile */
}

li.r33s-price {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;              /* min gap between label and price */
    padding: 8px 14px;
    background: #fafafa;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 14px;
    margin: 0;
    width: 100%;            /* fill the fit-content parent so all rows align */
}

.r33s-price-label { color: #1a1a1a; font-weight: 500; }
.r33s-price-value { color: #1a1a1a; font-weight: 700; white-space: nowrap; }

/* Tier-aware backgrounds — mirror the hero (40% white overlay over SVG) */
.r33s.r33s--elite {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.40)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'><g stroke='rgb(212,175,55)' stroke-width='1.6' fill='none' opacity='0.22' stroke-linejoin='round'><path d='M55 30 L72 42 L55 72 L38 42 Z'/><path d='M38 42 L72 42'/><path d='M55 30 L48 42 M55 30 L62 42'/></g><g fill='rgb(212,175,55)' opacity='0.20'><path d='M18 18 L20 14 L22 18 L26 20 L22 22 L20 26 L18 22 L14 20 Z'/><path d='M92 92 L94 88 L96 92 L100 94 L96 96 L94 100 L92 96 L88 94 Z'/><circle cx='95' cy='25' r='1.5'/><circle cx='20' cy='90' r='1.5'/></g></svg>");
    background-size: auto, 110px 110px;
    background-repeat: repeat, repeat;
    border-color: rgba(212, 175, 55, 0.30);
}

.r33s.r33s--vip {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.40)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'><g fill='rgb(155,124,224)' opacity='0.22'><path d='M32 60 Q32 56 34 50 L40 32 L48 50 L55 30 L62 50 L70 32 L76 50 Q78 56 78 60 Z'/><rect x='32' y='62' width='46' height='5' rx='1'/><circle cx='40' cy='30' r='2.5'/><circle cx='55' cy='27' r='2.5'/><circle cx='70' cy='30' r='2.5'/></g></svg>");
    background-size: auto, 110px 110px;
    background-repeat: repeat, repeat;
    border-color: rgba(155, 124, 224, 0.32);
}

.r33s.r33s--top {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.40)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'><g fill='rgb(80,80,80)' opacity='0.20'><polygon points='55,28 60,44 78,44 64,55 69,72 55,62 41,72 46,55 32,44 50,44'/></g></svg>");
    background-size: auto, 110px 110px;
    background-repeat: repeat, repeat;
    border-color: rgba(80, 80, 80, 0.20);
}

.r33s.r33s--verified {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.40)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'><g stroke='rgb(20,181,80)' stroke-width='1.8' fill='none' opacity='0.24' stroke-linejoin='round' stroke-linecap='round'><path d='M55 28 L70 34 L68 56 L55 66 L42 56 L40 34 Z'/><path d='M48 47 L53 52 L62 41'/></g></svg>");
    background-size: auto, 110px 110px;
    background-repeat: repeat, repeat;
    border-color: rgba(20, 181, 80, 0.28);
}

@media (min-width: 768px) {
    .r33s {
        padding: 30px;
    }

    /* Desktop: shrink the WHOLE Extras Prices card (its white background) to its content,
       left-aligned, so the verified/tier section background shows beside it.
       Services + Available-as-Extras keep their full-width white cards — only prices change. */
    .r33s-card--prices {
        justify-self: start;
        width: fit-content;
        max-width: 100%;
    }
}

/* Mobile: break out of any parent padding so the patterned background reaches
   the viewport edges. Drop the rounded corners + outer border for clean edges. */
@media (max-width: 767px) {
    .r33s {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}