/* ═══════════════════════════════════════════════════════════════════════
   R33 Escort Hero — clean rewrite
   Class prefix: .r33h-* (zero collision with legacy .r33-profile-hero)
   Mobile-first; @media (min-width:768px) for desktop.
   No !important. Cascade order is the architecture.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   🔒 LOCKED — DO NOT REMOVE OR REORDER ANY RULE IN THIS BLOCK 🔒
   These rules each fix a recurring production bug. They have been
   silently stripped multiple times when this file was edited from the
   live server without first preserving these. If ANY of these rules go
   missing, the corresponding bug will return.
   See ~/.claude/projects/-home-dave/memory/project_r33_escort_hero.md
   ═══════════════════════════════════════════════════════════════════════ */

/* [LOCK-1] Mobile content pushed off-screen right.
   Parent Elementor container 8f71b94 ships with flex-direction:column +
   flex-wrap:wrap, forcing tall children's siblings into a phantom second
   column on mobile. Force nowrap so children stack. */
@media (max-width: 767px) {
    .elementor-203450 .elementor-element.elementor-element-8f71b94 {
        flex-wrap: nowrap !important;
    }
}

/* [LOCK-2] Elementor fade-in containers (357b435 / 6e19892) sometimes
   never trigger on mobile, leaving the gallery, map and reviews
   permanently invisible. Force visibility — trade animation for
   guaranteed display. */
.elementor-invisible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* [LOCK-3] Hide auto-generated photo filenames ("photo_1773703...") that
   Elementor's image-gallery lightbox shows in the header. They come from
   the attachment's title which we don't override at upload time. */
.elementor-slideshow__title,
.elementor-slideshow__description,
.elementor-lightbox-title {
    display: none !important;
}

/* [LOCK-4] "Log in to Reply" button on review/comment cards when viewer
   is logged out. BB renders it as a raw link by default — give it the
   same brand button look as the logged-in "Reply" button. */
.comment-reply-login {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: #d4af37;
    color: #1a1a1a !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 8px;
    text-decoration: none !important;
    border: none;
    transition: background 160ms ease, transform 100ms ease;
}
.comment-reply-login:hover {
    background: #c9a430;
    color: #1a1a1a !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* [LOCK-5] Map clipping the footer — multiple causes addressed:
   (a) GeoDirectory injects a sticky-map behaviour (id="sticky_map_..." +
       JS classes stickymap / trigger_sticky) that pins the map in the
       viewport on scroll and visually overlaps the site footer when the
       page is short (e.g. logged-out: "Write a Review" form is hidden;
       profile has few gallery images). Force the map back to normal
       document flow with position:relative so it stops sticking.
   (b) Add bottom padding to the main content wrapper so the footer
       always has guaranteed clearance regardless of content height —
       this also means adding more gallery images grows the page as
       expected (footer is pushed down naturally by document flow). */
#sticky_map_wp_widget_gd_map,
.geodir_map_container,
.elementor-widget-wp-widget-gd_map .stick_trigger_container,
.elementor-widget-wp-widget-gd_map .geodir-wgt-map {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}
.elementor-widget-wp-widget-gd_map.stickymap,
.elementor-widget-wp-widget-gd_map .stickymap {
    position: relative !important;
}
.elementor-203450 .pb-lock-wrapper.main-content-4 {
    padding-bottom: 80px;
}

/* ═══════════════════════════════════════════════════════════════════════
   END LOCKED BLOCK
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Outer wrap ───────────────────────────────────────── */
.r33h {
    position: relative;             /* anchor for absolute .r33h-flags */
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-bottom: 60px;            /* clearance for the floating flags card */
    background-color: #fff;          /* white background under the pattern */
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    /* No overflow:hidden — flags need to hang below */
    /* DEFAULT — subtle gray dots (scraped / no tier) */
    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;
}

/* ── Media (image + video) ────────────────────────────── */
.r33h-media {
    position: relative;
    aspect-ratio: 5 / 7;
    background: transparent;
    overflow: hidden;               /* media stays self-contained as before */
    border: 6px solid #FFCCD6;       /* DEFAULT muted pastel-pink frame (free/scraped), matches the
                                        R33 Q ads; non-premium. Gold is reserved for paid tiers below */
    border-radius: 16px;             /* full frame around the photo (self-contained) */
}

/* Paid tiers keep the GOLD frame (gold = premium). Everyone else stays muted grey. */
.r33h--vip .r33h-media,
.r33h--elite .r33h-media,
.r33h--top .r33h-media {
    border-color: #d4af37;
}

.r33h-img,
.r33h-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.r33h-video { display: none; }
.r33h.is-playing .r33h-video { display: block; }
.r33h.is-playing .r33h-img   { opacity: 0; }

.r33h-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: grid;
    place-items: center;
    backdrop-filter: blur(4px);
    transition: background 160ms ease, transform 160ms ease;
}

.r33h-play:hover { background: rgba(0, 0, 0, 0.75); transform: scale(1.05); }
.r33h.is-playing .r33h-play { display: none; }

/* ── Feature flags — floating white card ──
   Two contexts:
   1. Standalone via [r33_escort_badges] → edge-to-edge bar (no radius, full width)
   2. Inside .r33h new-hero → absolute positioned, rounded, half hanging below footer */
.r33h-flags {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 14px 20px;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Inside the NEW hero → absolute, rounded, centered, hanging below footer */
.r33h .r33h-flags {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 0;
    border-radius: 16px;
}

/* ── Base flag pill — 30% bigger + ~2× height ────────── */
.r33h-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;             /* was 6px 12px → 2× vertical, 1.5× horizontal */
    border-radius: 8px;
    font-size: 13px;                /* was 10px → ~30% bigger */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    background: #fff;
    color: #333;
    border: 3px solid rgba(0, 0, 0, 0.10);
}

.r33h-flag i {
    font-size: 16px;                /* was 12px → ~33% bigger */
    line-height: 1;
}

/* ── MOBILE: rolling/scrollable bar (like GOTM carousel) ──
   On mobile, badges sit in one row and scroll horizontally if they
   overflow viewport width. Same anchor position (centered, half below
   hero footer). Scrollbar hidden, momentum scroll on iOS. */
@media (max-width: 767px) {
    .r33h-flags {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
        justify-content: flex-start;    /* scroll from left */
    }
    .r33h-flags::-webkit-scrollbar { display: none; } /* Chromium/Safari */

    .r33h-flag {
        flex-shrink: 0;                  /* badges keep natural width — don't compress */
    }
}

/* ── Per-tier styling ────────────────────────────────── */

/* VIP — gold border, white bg, gold crown */
.r33h-flag--vip {
    background: #fff;
    color: #8a6d1f;
    border-color: #d4af37;
}
.r33h-flag--vip i { color: #d4af37; }

/* PORNSTAR — red border, white bg, red star */
.r33h-flag--pornstar {
    background: #fff;
    color: #b91c1c;
    border-color: #dc2626;
}
.r33h-flag--pornstar i { color: #dc2626; }

/* NEWCOMER — green tinted */
.r33h-flag--new {
    background: #f0fdf4;
    color: #166534;
    border-color: #86efac;
}
.r33h-flag--new i { color: #16a34a; }

/* VIDEO — dark filled */
.r33h-flag--video {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}
.r33h-flag--video i { color: #fff; }

/* DUO with GIRL — pink */
.r33h-flag--duo_with_girl {
    background: #fdf2f8;
    color: #9d174d;
    border-color: #f9a8d4;
}
.r33h-flag--duo_with_girl i { color: #db2777; }

/* DUO with BOY — blue */
.r33h-flag--duo_with_boy {
    background: #eff6ff;
    color: #1e40af;
    border-color: #93c5fd;
}
.r33h-flag--duo_with_boy i { color: #2563eb; }

/* COUPLE — purple */
.r33h-flag--couple {
    background: #faf5ff;
    color: #6b21a8;
    border-color: #d8b4fe;
}
.r33h-flag--couple i { color: #9333ea; }

/* TRANS — blue/pink gradient border */
.r33h-flag--trans {
    background: #fff;
    color: #0c4a6e;
    border-color: #38bdf8;
}
.r33h-flag--trans i { color: #0ea5e9; }

/* CAM — dark teal */
.r33h-flag--cam {
    background: #f0fdfa;
    color: #134e4a;
    border-color: #5eead4;
}
.r33h-flag--cam i { color: #0d9488; }

/* INDEPENDENT — warm amber/orange */
.r33h-flag--independent {
    background: #fffbeb;
    color: #92400e;
    border-color: #fbbf24;
}
.r33h-flag--independent i { color: #d97706; }

/* VERIFIED — green shield */
.r33h-flag--verified {
    background: #ecfdf5;
    color: #065f46;
    border-color: #6ee7b7;
}
.r33h-flag--verified i { color: #10b981; }

/* UNVERIFIED — neutral grey (pending/not-yet-verified; nudges sign-up) */
.r33h-flag--unverified {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #d1d5db;
}
.r33h-flag--unverified i { color: #6b7280; }

/* AGENCY — navy blue (business/listing type, with phone icon) */
.r33h-flag--agency {
    background: #eff6ff;
    color: #1e3a8a;
    border-color: #bfdbfe;
}
.r33h-flag--agency i { color: #1d4ed8; }

/* RISING STAR — pink/rose rocket */
.r33h-flag--rising_star {
    background: #fff1f2;
    color: #9f1239;
    border-color: #fda4af;
}
.r33h-flag--rising_star i { color: #e11d48; }

/* REVIEW — neutral indigo, "edit/quote" tone */
.r33h-flag--review {
    background: #eef2ff;
    color: #3730a3;
    border-color: #a5b4fc;
}
.r33h-flag--review i { color: #4f46e5; }

/* ── Content column ───────────────────────────────────── */
.r33h-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.r33h-identity {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.r33h-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: #fff;
    padding: 10px 18px;
    border-radius: 16px;   /* was 999px stadium — too round now the title carries keywords/wraps */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    width: fit-content;
}

/* ── Age pill (mirrors .r33h-name styling) ────────────── */
.r33h-age {
    display: inline-block;
    width: fit-content;
    background: #fff;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* ── Stats row (Age, Gender, Ethnicity, Height, Weight, Breast, Smoking) ─── */
.r33h-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.r33h-stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.2;
    padding: 9px 15px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}

.r33h-stat-label {
    color: #888;
    font-weight: 500;
}

.r33h-stat-value {
    color: #1a1a1a;
    font-weight: 700;
}

/* ── Tier tag (inline next to name) ───────────────────── */
.r33h-tier {
    display: inline-block;
    flex-shrink: 0;   /* keep the tier badge (ELITE/VIP) its natural shape next to a long title */
    padding: 5px 13px;   /* +30% size */
    border-radius: 5px;
    font-size: 14px;   /* +30% (was 11px) */
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}

.r33h-tier--elite,
.r33h--elite .r33h-tier {
    background: linear-gradient(90deg, #c8a84c, #d9bb6a);
    color: #1a1a1a;
}

.r33h-tier--vip,
.r33h--vip .r33h-tier {
    background: linear-gradient(90deg, #6b4baf, #9c7ce0);
    color: #fff;
}

.r33h-tier--top,
.r33h--top .r33h-tier {
    background: #1a1a1a;
    color: #c9a84c;
}

.r33h-tier--verified,
.r33h--verified .r33h-tier {
    background: #14b550;
    color: #fff;
}

/* ── Save button + count — wrapper is plain, only the button gets the pill ─── */
.r33h-fav {
    display: flex;
    flex-direction: column;
    align-items: center;   /* centre the Save button + count as a symmetric stack */
    gap: 4px;
    flex: 0 0 auto;
    color: #000;
}

/* The actual SAVE button → white pill, no border, black text + heart */
.r33h-fav .r33-fav-btn {
    background: #fff !important;
    border: none !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    color: #000 !important;
}
.r33h-fav .r33-fav-btn .r33-fav-label {
    color: #000 !important;
}
.r33h-fav .r33-fav-btn .r33-fav-icon,
.r33h-fav .r33-fav-btn .r33-fav-icon svg,
.r33h-fav .r33-fav-btn .r33-fav-icon::before {
    color: #000 !important;
    fill: #000 !important;
    stroke: #000 !important;
}

/* "Saved by X users" count → plain text underneath, no background */
.r33h-fav .r33-favourite-count {
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    color: #000;
    justify-content: center;   /* centre the heart + "Saved by" text under the button */
}

/* Hero-only compact saved-count (♥ N) — sits centred under the Save button */
.r33h-fav-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #1a1a1a;
}
.r33h-fav-count i {
    font-size: 11px;
    color: #c9a84c;
}

/* ── Meta line ────────────────────────────────────────── */
.r33h-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    background: #fff;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.2;
    padding: 9px 15px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.r33h-meta i {
    color: #c9a84c;   /* gold map-pin */
}

/* ── Status row: Active (left) + Touring (right) on the same line ─── */
.r33h-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

/* ── Active status (pill) ─────────────────────────────── */
.r33h-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 13px;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.r33h-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #999;
}

/* Active now → green pill, pulsing dot */
.r33h-active--now {
    color: #1f7a4d;
    background: #e9f7ef;
    border-color: #c8e6c9;
}
.r33h-active--now .r33h-dot {
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: r33h-pulse 1.6s ease-out infinite;
}

/* Recently active → soft grey pill */
.r33h-active--recent {
    color: #555;
    background: #f0f0f0;
    border-color: #e0e0e0;
}
.r33h-active--recent .r33h-dot { background: #84cc16; }

/* Last seen → soft grey pill */
.r33h-active--seen {
    color: #555;
    background: #f0f0f0;
    border-color: #e0e0e0;
}
.r33h-active--seen .r33h-dot { background: #999; }

@keyframes r33h-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0);    }
}

/* ── Touring + Managed by ─────────────────────────────── */
.r33h-touring {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-left: auto;             /* push right inside .r33h-status-row */
    font-size: 13px;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.r33h-touring::before {
    content: "\2708";              /* ✈ unicode plane */
    font-size: 13px;
    transform: translateY(-1px);
}

.r33h-managed {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
    width: fit-content;
}

.r33h-managed:hover { color: #1a1a1a; }

/* ── Action buttons ───────────────────────────────────── */
.r33h-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    margin-bottom: 30px;
}

.r33h-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.r33h-btn--message {
    background: #d4af37;
    color: #1a1a1a;
}

.r33h-btn--message:hover {
    background: #c8a430;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35);
}

.r33h-btn--quote {
    background: #fff;
    color: #1a1a1a;
    border-color: #d4af37;
}

.r33h-btn--quote:hover {
    background: #f7f3e8;
    transform: translateY(-1px);
}

/* ── Description ──────────────────────────────────────── */
.r33h-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.r33h-desc-body p { margin: 0 0 8px; }
.r33h-desc-body p:last-child { margin-bottom: 0; }

/* Escort's manual translation, stacked underneath the English description */
.r33h-desc-alt {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.r33h-desc--collapsed .r33h-desc-body {
    max-height: 6em;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.r33h-desc--collapsed.is-expanded .r33h-desc-body {
    max-height: none;
    mask-image: none;
    -webkit-mask-image: none;
}

/* Nuke BuddyBoss default button styling — same color/border/shadow on every state */
.r33h-readmore,
.r33h-readmore:hover,
.r33h-readmore:focus,
.r33h-readmore:active,
.r33h-readmore:visited {
    margin-top: 8px;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #ddd !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    color: #1a1a1a !important;
    border-radius: 6px !important;
    width: 100%;
    cursor: pointer;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    outline: none !important;
}

.r33h-readmore:hover {
    background: #fafafa !important;
    border-color: #ccc !important;
}

/* ── Rates panel ──────────────────────────────────────── */
.r33h-rates {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: transparent;
    border-bottom-left-radius: 16px;     /* match .r33h corner */
    border-bottom-right-radius: 16px;
}

.r33h-from {
    display: block;
    width: fit-content;
    background: #fff;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.r33h-rates-title {
    display: block;
    width: fit-content;
    margin: 0 0 8px;
    background: #fff;
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.2;
    padding: 7px 13px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.r33h-rates-table,
.r33h-rates-table thead,
.r33h-rates-table tbody,
.r33h-rates-table tr,
.r33h-rates-table th,
.r33h-rates-table td {
    border: none;
}

.r33h-rates-table {
    width: 100%;
    margin: 0;                         /* nuke browser-default table margin */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.r33h-rates-table thead th {
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    padding: 20px 20px 8px;
}

.r33h-rates-table thead th:first-child  { text-align: left; padding-left: 20px; }
.r33h-rates-table thead th:last-child   { padding-right: 20px; }

.r33h-rates-table td {
    padding: 8px 20px;
    border-bottom: none;
}

.r33h-rates-table tbody tr:last-child td {
    padding-bottom: 20px;
}

.r33h-rate-label {
    color: #666;
    font-size: 13px;
}

.r33h-rate-price {
    text-align: right;
    font-weight: 600;
    color: #1a1a1a;
}

/* "Get a Quote" CTA — sits below the rates table inside .r33h-rates */
.r33h-quote-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 22px;
    background: #fff;
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border: 3px solid #d4af37;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.r33h-quote-cta:hover {
    background: #f7f3e8;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* ── Languages pill (mirrors .r33h-stat; sits under the contact CTAs) ─── */
.r33h-languages {
    margin-top: 14px;
    white-space: normal;
}

/* "on Room33 Q" suffix — desktop only (mobile would be too long) */
.r33h-quote-cta-suffix { display: none; }

/* ── Primary contact CTAs (2-up row under the Quote CTA) ─── */
.r33h-contacts-row {
    display: flex;
    gap: 10px;
}

.r33h-contact {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.r33h-contact:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    filter: brightness(1.05);
    color: #fff;
}

.r33h-contact i { font-size: 18px; line-height: 1; }

/* Per-app brand colours */
.r33h-contact--whatsapp { background: #25d366; }
.r33h-contact--telegram { background: #0088cc; }
.r33h-contact--signal   { background: #3a76f0; }
.r33h-contact--viber    { background: #7360f2; }
.r33h-contact--line     { background: #00b900; }
.r33h-contact--wechat   { background: #07c160; }
.r33h-contact--mobile   { background: #1a1a1a; }

.r33h-rate-na {
    color: #ccc;
    font-weight: 400;
}

.r33h-rates-table tbody tr:last-child td {
    border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP — split column layout
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    .r33h {
        grid-template-columns: 1fr 1.4fr 1fr;
        align-items: stretch;
        width: auto;            /* override the base width:100% so margins compute correctly */
        max-width: none;
        margin-left: 30px;
        margin-right: 30px;
    }

    /* Desktop: media is a self-contained gold-framed photo floating inside the hero,
       NOT the hero's left edge. Rounded on all 4 corners + inset so that when the image
       falls a few px short of the text column, the gap reads as deliberate padding around
       a framed photo (Karl's "wrap the border around the image" approach) instead of a
       broken hero edge. */
    .r33h-media {
        border-radius: 16px;
        margin: 16px;
        /* Pin to TOP of grid cell instead of stretching with the row.
           Without this, when "Read more" expands the description column,
           the image cell stretches to match and pushes the image down,
           hiding the "Read less" close button under the larger image. */
        align-self: start;   /* MUST stay 'start': stretch / height:100% spills the image into the
                                description when "Read more" expands, and renders huge on first load. */
    }

    /* Desktop: nudge tier chip down 2px to optically center with the larger name */
    .r33h-name .r33h-tier {
        transform: translateY(2px);
    }

    /* Desktop: rates is RIGHT column → round top-right + bottom-right */
    .r33h-rates {
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 16px;
    }

    /* media/content/rates side-by-side on row 1; flags is absolute inside media */

    .r33h-media {
        aspect-ratio: 5 / 7;   /* dialled shorter again (0.71) — photo height closer to the text
                                  column so the bottom gap keeps shrinking. Ratio-based, NOT stretch. */
    }

    .r33h-content {
        padding: 24px;
        gap: 16px;
    }

    .r33h-name {
        font-size: 28px;
    }

    .r33h-rates {
        border-top: none;
        border-left: 1px solid rgba(0, 0, 0, 0.06);
        padding: 24px;
    }

    /* Desktop: keep the button at content-width on every state. The base
       rule applies width:100% to .r33h-readmore + :hover/:focus/:active/:visited,
       so without matching all states here the button jumps to full width on
       hover/focus on desktop. */
    .r33h-readmore,
    .r33h-readmore:hover,
    .r33h-readmore:focus,
    .r33h-readmore:active,
    .r33h-readmore:visited {
        width: auto;
    }

    /* Desktop: show "on Room33 Q" suffix in the quote CTA */
    .r33h-quote-cta-suffix {
        display: inline;
    }

}

/* ═══════════════════════════════════════════════════════════════════════
   TIER PATTERNS — SVG repeating background per badge status
   Inline data-URL SVG, no external file requests.
   ELITE → gold diamond + sparkle
   VIP   → purple crown + sparkle
   TOP   → grey star + sparkle
   VERIFIED → green shield with checkmark + plus
   DEFAULT (scraped / no tier) → grey dots (set on .r33h base above)
   ═══════════════════════════════════════════════════════════════════════ */

/* ELITE — outlined gold diamond with facets + 4-point sparkles
   White overlay (40%) over the SVG pattern → pattern shows through at ~60%. */
.r33h--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);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(212, 175, 55, 0.35);
}

/* VIP — purple crown with rounded points + sparkles
   White overlay (40%) over the SVG pattern → pattern shows through at ~60%. */
.r33h--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'/><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.6'/><circle cx='20' cy='90' r='1.6'/></g></svg>");
    background-size: auto, 110px 110px;
    background-repeat: repeat, repeat;
    border-color: rgba(155, 124, 224, 0.32);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(155, 124, 224, 0.38);
}

/* TOP — 5-point grey star + small sparkles
   White overlay (40%) over the SVG pattern → pattern shows through at ~60%. */
.r33h--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'/><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(80, 80, 80, 0.20);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(80, 80, 80, 0.22);
}

/* VERIFIED — green outlined shield with checkmark + plus accents
   White overlay (40%) over the SVG pattern → pattern shows through at ~60%. */
.r33h--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'/><path d='M18 14 v8 M14 18 h8'/><path d='M92 88 v8 M88 92 h8'/></g><g fill='rgb(20,181,80)' opacity='0.24'><circle cx='95' cy='28' r='1.6'/><circle cx='20' cy='90' r='1.6'/></g></svg>");
    background-size: auto, 110px 110px;
    background-repeat: repeat, repeat;
    border-color: rgba(20, 181, 80, 0.28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(20, 181, 80, 0.32);
}

/* ═══════════════════════════════════════════════════════════════════════
   STANDALONE BADGES INTEGRATION — when [r33_escort_badges] is added as
   a separate Elementor widget (with negative margin-top to overlap the
   hero), alongside the [r33_escort_hero] full-hero shortcode. Mobile only.
   - Hide the in-hero badges (.r33h .r33h-flags) so they don't duplicate
     the standalone bar above
   - Push the hero content down so name doesn't sit under the standalone
     badges card overlapping from above
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ⚠️ [LOCK-6] DO NOT REMOVE — recurring bug fix
       On mobile the badges bar must sit directly between the media (image)
       and the .r33h-content block (name + save button). The desktop rule
       on .r33h .r33h-flags uses position:absolute + bottom:-36px which
       parks it below the entire hero (under the rates table) on mobile.
       Override to static positioning, edge-to-edge full width, no radius,
       and use grid `order` so it slots in between media and content
       regardless of DOM order (DOM order is media → content → rates → flags).

       This rule has been removed/overwritten before. If badges are
       missing on mobile or sitting at the bottom of the hero, restore
       this block. */
    .r33h-media   { order: 1; }
    .r33h-flags   { order: 2; }
    .r33h-content { order: 3; }
    .r33h-rates   { order: 4; }

    .r33h .r33h-flags {
        position: static;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }

    /* Stats row is desktop-only — same data appears in the details section below */
    .r33h-stats {
        display: none;
    }

    /* Mobile: tighter gap above the status row (desktop sits at 30px) */
    /* Mobile: stack Active above Touring (desktop has them side-by-side) */
    .r33h-status-row {
        margin-top: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .r33h-touring {
        margin-left: 0;
    }

    /* Mobile: full pastel-pink border on the media (gold reserved for paid tiers) */
    .r33h-media {
        border-top: 6px solid #FFCCD6;
    }
    .r33h--vip .r33h-media,
    .r33h--elite .r33h-media,
    .r33h--top .r33h-media {
        border-top-color: #d4af37;
    }

    /* Mobile: center the Message Me Now button */
    .r33h-actions {
        justify-content: center;
    }

    /* Push the identity row (name + save button) down together so they
       clear the standalone badges card overlapping from above. */
    .r33h-identity {
        margin-top: 16px;
    }
}