/* === K13 design-tokens.css ===
 * Loaded once after main.css inline. Provides demo design system tokens
 * (colors, fonts, spacing, radii) to all per-widget CSS files.
 *
 * Per the approved plan: ONLY touches body + h1-h6 + :root vars. Does NOT
 * override any .ui.* Semantic UI classes — Semantic UI dropdown/modal/form
 * behavior must remain intact.
 */

/* 2026-10-03 (PageSpeed): no @imports here any more. The Outfit / Playfair Display stylesheet is linked in <head>
 * (_MasterStyles) so it loads in parallel with this file instead of after it - since 2026-10-03 the two fonts are
 * self-hosted (main.css @font-face); Noto Sans SC is not loaded at all (2026-10-04, SN R30); theme-overrides.css
 * was imported here unversioned and is also linked, versioned, right after this file in <head> - that copy wins. */

:root {
    /* === Colors === */
    --primary: #e91e63;
    --primary-light: #ff5c8d;
    --primary-dark: #b0003a;
    --secondary: #9c27b0;
    --gold: #d4af37;
    --gold-light: #f0d060;
    --gold-dim: rgba(212,175,55,0.15);
    --gold-dark: #c9a227;
    /* 2026-10-14 (owner): the colour scheme switch (SiteScheme). Every gold colour in the stylesheets is one of these
       tokens (or a --gold-<hex> shade token) with the gold as its fallback; html[data-scheme="purple"] below redefines
       them. The status colours and the rating stars are not scheme colours. The -rgb forms are for
       rgba(var(--gold-rgb, ...), alpha). */
    --gold-rgb: 212, 175, 55;
    --gold-light-rgb: 240, 208, 96;
    --gold-dark-rgb: 201, 162, 39;
    --vip-purple: #9b59b6;
    --vip-pink: #e91e8c;
    /* AVAILABLE NOW pill (cards, profile hero, gallery thumbnails) — same green as promote-available.png */
    --available-now-bg: linear-gradient(180deg, #2EDB6E 0%, #1FB85A 100%);
    --available-now-text-shadow: 0 1px 1.5px rgba(11, 90, 42, .6);

    /* Backgrounds */
    --bg-dark: #0a0a0f;
    --bg-card: #141419;
    --bg-card-hover: #1a1a22;
    --bg-elevated: #1a1a22;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --text-muted: #8a8a9a; /* 2026-10-03 (PageSpeed): was #606070, 2.97:1 on --bg-card; now 5.41:1 */

    /* Borders / shadows */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-glow: rgba(233, 30, 99, 0.3);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 30px rgba(233, 30, 99, 0.2);
    --shadow-btn: 0 8px 25px rgba(233, 30, 99, 0.4);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-pill: 50px;

    /* Status */
    --success: #4caf50;
    --warning: #ff9800;
    --danger: #f44336;
    --info: #2196f3;

    /* Spacing scale (8px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Typography */
    /* 2026-10-17: each web font is followed by its fallback face (main.css), a local font sized to take the same room,
       so text drawn before the web font arrives keeps its lines when it is swapped in */
    --font-display: 'Playfair Display', 'Playfair Display Fallback', Georgia, 'PT Serif', serif;
    --font-body: 'Outfit', 'Outfit Fallback', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Sizes */
    --text-xs: 0.7rem;
    --text-sm: 0.85rem;
    --text-base: 0.95rem;
    --text-lg: 1.1rem;
    --text-xl: 1.3rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.5rem;
}

/* 2026-10-14 (owner): the purple scheme - Settings > Content > Content management > Site appearance. The brand's purple,
   a step lighter than the "no photo" art's #b35cf5: with that one Lighthouse found two texts under 4.5:1 (the card tag's
   dark text on it 4.49, the base colour on a dark purple panel 4.29). #b770f7: dark text on it 6.0:1, on a dark panel
   5.0:1, on black 7.5:1. html[...] outranks :root, so the order of the stylesheets does not matter. */
html[data-scheme="purple"] {
    --gold: #b770f7;
    --gold-light: #cb94f9;
    --gold-dark: #a35af2;
    --gold-dim: rgba(183, 112, 247, 0.15);
    --gold-rgb: 183, 112, 247;
    --gold-light-rgb: 203, 148, 249;
    --gold-dark-rgb: 163, 90, 242;
}
/* scheme-shades: begin - GENERATED by StaticAssets/tokenize-scheme-colors.py: the purple of every gold shade, same luminance */
html[data-scheme="purple"] {
    --gold-ffd700: #ebd0ff;
    --gold-ffd700-rgb: 235, 208, 255;
    --gold-d4a017: #c991f3;
    --gold-d4a017-rgb: 201, 145, 243;
    --gold-fff4b3: #f8efff;
    --gold-fff4b3-rgb: 248, 239, 255;
    --gold-ff9500: #d296ff;
    --gold-ff9500-rgb: 210, 150, 255;
    --gold-ffc800: #e5c2ff;
    --gold-ffc800-rgb: 229, 194, 255;
    --gold-f2c744: #e1bffb;
    --gold-f2c744-rgb: 225, 191, 251;
    --gold-c9a43a: #c297e3;
    --gold-c9a43a-rgb: 194, 151, 227;
    --gold-c5a200: #cc88ff;
    --gold-c5a200-rgb: 204, 136, 255;
    --gold-b8941f: #bb7ee9;
    --gold-b8941f-rgb: 187, 126, 233;
    --gold-b8962e: #b884e0;
    --gold-b8962e-rgb: 184, 132, 224;
    --gold-e0c050: #d8b5f2;
    --gold-e0c050-rgb: 216, 181, 242;
    --gold-c9a22e: #c394e6;
    --gold-c9a22e-rgb: 195, 148, 230;
    --gold-f5d773: #e9d0fc;
    --gold-f5d773-rgb: 233, 208, 252;
    --gold-ffd75e: #ebd1ff;
    --gold-ffd75e-rgb: 235, 209, 255;
    --gold-a08020: #aa64e0;
    --gold-a08020-rgb: 170, 100, 224;
    --gold-8a6d12: #9d3ee6;
    --gold-8a6d12-rgb: 157, 62, 230;
    --gold-ffd400: #e9cdff;
    --gold-ffd400-rgb: 233, 205, 255;
    --gold-2e2918: #332241;
    --gold-2e2918-rgb: 51, 34, 65;
    --gold-1a1508: #1f0e2c;
    --gold-1a1508-rgb: 31, 14, 44;
    --gold-54482a: #5c3b76;
    --gold-54482a-rgb: 92, 59, 118;
    --gold-2a2518: #2d2038;
    --gold-2a2518-rgb: 45, 32, 56;
    --gold-2a1e05: #31094f;
    --gold-2a1e05-rgb: 49, 9, 79;
    --gold-3b2f06: #480c76;
    --gold-3b2f06-rgb: 72, 12, 118;
    --gold-3a3206: #4b0d7b;
    --gold-3a3206-rgb: 75, 13, 123;
    --gold-1e1c14: #201926;
    --gold-1e1c14-rgb: 32, 25, 38;
    --gold-262419: #2a2031;
    --gold-262419-rgb: 42, 32, 49;
}
/* scheme-shades: end */

/* === Body baseline ===
 * Semantic UI's main.css sets `body.pushable { background: #333 }` and `h1-h6 { font-family: 'PT Serif', ... }`
 * with high specificity. Use !important on these 3 properties only — does NOT touch any .ui.* class behavior.
 */
html body,
html body.pushable,
html body.pushable.dimmable,
html body.pushable.dimmable.header-stick {
    background: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    line-height: 1.5;
}

/* Headings use display serif (override Semantic UI's PT Serif default) */
body h1, body h2, body h3, body h4, body h5, body h6,
body.pushable h1, body.pushable h2, body.pushable h3, body.pushable h4, body.pushable h5, body.pushable h6 {
    font-family: var(--font-display) !important;
    color: var(--text-primary);
}

/* Pusher / article default backgrounds — let widgets render on dark */
.pusher,
.pusher > article,
body.pushable > .pusher,
body.pushable > .pusher > article {
    background: transparent;
}

/* Hide Kentico edit-mode toolbar in non-editor contexts */
body:not(.kentico-editor) .ktc-page-builder-edit,
body:not(.kentico-editor) [data-kentico-page-builder-edit-mode] {
    display: none !important;
}

/* === K13 dev-only debug data — globally hidden (only shown when body.show-rawdog-debug-data is set by toggle button) === */
body:not(.show-rawdog-debug-data) .rawdog-debug-data,
body:not(.show-rawdog-debug-data) pre.rawdog-debug-data {
    display: none !important;
}
body:not(.show-rawdog-debug-data) button.rawdog-debug-toggle {
    display: none !important;
}

/* Default link color (Semantic UI sets blue #4183c4 — switch to brand pink for content links, NOT overriding .ui.*) */
body a:not([class*="ui "]):not([class*="ui-"]) {
    color: var(--primary-light);
    transition: color 0.2s;
}
body a:not([class*="ui "]):not([class*="ui-"]):hover {
    color: var(--primary);
}

/* === Empty profile image placeholder fallback ===
 * K13 server returns /api/photo/profile/editor/00000000-0000-0000-0000-000000000000 (or
 * similar all-zero GUID placeholder) for users without a profile image (e.g. some agencies).
 * The placeholder is a near-black watermark image — visually invisible on dark cards.
 * Hide that img and replace with a branded fallback bg + "No photo" label.
 * Requires `:has()` (Chrome 105+, Firefox 121+, Safari 15.4+).
 */
.widget.popular-escort .image:has(img[src*="00000000-0000-0000-0000-000000000000"]),
.widget.popular-escort .image:has(img[data-src*="00000000-0000-0000-0000-000000000000"]),
.widget.featured-escorts-carousel .widget.escort-listing-vertical .image:has(img[src*="00000000-0000-0000-0000-000000000000"]),
.widget.featured-escorts-carousel .widget.escort-listing-vertical .image:has(img[data-src*="00000000-0000-0000-0000-000000000000"]),
.widget.escort-listing-vertical .image:has(img[src*="00000000-0000-0000-0000-000000000000"]),
.widget.escort-listing-vertical .image:has(img[data-src*="00000000-0000-0000-0000-000000000000"]) {
    background: linear-gradient(135deg, #1a1a22 0%, #2a1a32 50%, #3a1a42 100%) !important;
    position: relative;
}

.widget.popular-escort .image:has(img[src*="00000000-0000-0000-0000-000000000000"]) img,
.widget.popular-escort .image:has(img[data-src*="00000000-0000-0000-0000-000000000000"]) img,
.widget.featured-escorts-carousel .widget.escort-listing-vertical .image:has(img[src*="00000000-0000-0000-0000-000000000000"]) img,
.widget.featured-escorts-carousel .widget.escort-listing-vertical .image:has(img[data-src*="00000000-0000-0000-0000-000000000000"]) img,
.widget.escort-listing-vertical .image:has(img[src*="00000000-0000-0000-0000-000000000000"]) img,
.widget.escort-listing-vertical .image:has(img[data-src*="00000000-0000-0000-0000-000000000000"]) img {
    opacity: 0;
}

.widget.popular-escort .image:has(img[src*="00000000-0000-0000-0000-000000000000"])::after,
.widget.popular-escort .image:has(img[data-src*="00000000-0000-0000-0000-000000000000"])::after,
.widget.featured-escorts-carousel .widget.escort-listing-vertical .image:has(img[src*="00000000-0000-0000-0000-000000000000"])::after,
.widget.featured-escorts-carousel .widget.escort-listing-vertical .image:has(img[data-src*="00000000-0000-0000-0000-000000000000"])::after,
.widget.escort-listing-vertical .image:has(img[src*="00000000-0000-0000-0000-000000000000"])::after,
.widget.escort-listing-vertical .image:has(img[data-src*="00000000-0000-0000-0000-000000000000"])::after {
    content: '✦  No photo  ✦';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-ffd700, #ffd700);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 2;
    text-transform: uppercase;
    opacity: 0.85;
}

/* =====================================================================
 * K13 native status flags — render only when K13 actually emits them
 * (popular-escort cards use .flag.*; featured-escort/escort-listing-vertical
 * carousel cards use .item.*; same conditions, two class names.)
 *
 * Source markup samples (verbatim K13 output):
 *   popular-escort:  <div class="flag available-now">Available now <span>- 11 minutes ago</span></div>
 *   carousel/featured: <div class="item available-now">Available now <span>- 5 mins ago</span></div>
 *   touring (until):  <div class="flag touring-now">Touring now <span>until 02 May</span></div>
 *   touring (soon):   <div class="flag touring-now">Coming Soon</div>
 *   featured:         <div class="flag featured"><img src="featured-purple.svg"></div>
 *   verified:         <div class="verified"><img src="verified-tick.png"> Photos verified by editor</div>
 *   has videos:       <div class="play"><img src="includes-videos-marker.png"></div>
 * Nothing is forced — if K13 doesn't emit the source element, nothing renders.
 * ===================================================================== */

/* --- 1) Available Now (green pill) --- */
.flag.available-now,
.item.available-now {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 11px !important;
    border-radius: var(--radius-sm, 8px) !important;
    /* 2026-09-20 owner: the bright "online" green of the promote image, not the old #15803d.
     * White on the lighter green needs the faint dark-green shadow to stay readable. */
    background: var(--available-now-bg) !important;
    color: #fff !important;
    font-size: var(--text-xs, 0.7rem) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    pointer-events: auto;
    text-shadow: var(--available-now-text-shadow);
}

/* --- 2 & 3) Touring Now / Coming Soon (purple pill — K13 reuses .touring-now class) --- */
.flag.touring-now,
.item.touring-now {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 11px !important;
    border-radius: var(--radius-sm, 8px) !important;
    background: linear-gradient(135deg, var(--secondary, #9c27b0), #6d28d9) !important;
    color: #fff !important;
    font-size: var(--text-xs, 0.7rem) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    pointer-events: auto;
    text-shadow: none;
}

/* timestamp / "until X" suffix — non-uppercase, slightly smaller */
.flag.available-now > span,
.flag.touring-now > span,
.item.available-now > span,
.item.touring-now > span {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.88;
    font-size: 0.72rem;
}
.flag.available-now > span span,
.flag.touring-now > span span,
.item.available-now > span span,
.item.touring-now > span span {
    font-weight: 600;
    opacity: 1;
}

/* =====================================================================
 * Card-internal positioning — pin status pills onto the image area for
 *   popular-escort  (homepage popular grid + listing main grid)
 *   escort-listing-vertical  (homepage carousel + listing carousel)
 * Only attaches positioning; the pill renders only if K13 emits it.
 * ===================================================================== */

/* popular-escort: K13 wraps .flag.available-now/.flag.touring-now in
 * `.inner-container > .flags` (image-overlapping container). Pin it bottom-left of image. */
.widget.popular-escort .inner-container > .flags,
.widget.popular-escort .image > .flags {
    position: absolute;
    bottom: auto;
    top: auto;
    z-index: 3;
}
.widget.popular-escort .inner-container > .flags .flag.available-now,
.widget.popular-escort .inner-container > .flags .flag.touring-now,
.widget.popular-escort .image > .flags .flag.available-now,
.widget.popular-escort .image > .flags .flag.touring-now {
    position: absolute;
    bottom: -15px;  /* offset to land near image bottom-left */
    left: 10px;
    z-index: 3;
}
/* Anchor each status flag directly to .inner-container.
 * .inner-container is position:relative (set by popular-escort.css). Pill sits
 * just above the body strip on the image's bottom-left.
 * width:max-content prevents flex parent from collapsing the absolute child. */
.widget.popular-escort .inner-container .flag.available-now,
.widget.popular-escort .inner-container .flag.touring-now {
    position: absolute !important;
    left: 10px !important;
    bottom: 95px !important;   /* body ≈85 + 10 gap */
    top: auto !important;
    right: auto !important;
    width: max-content !important;
    max-width: calc(100% - 20px) !important;
    height: auto !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 3;
}
/* 2026-09-20: both pills share that one spot, so an advertiser who is Available Now AND
 * touring had the purple pill drawn over the green one (only "…go" of "ago" showed).
 * They now stack, one pill (≈25px) + 4px apart, AVAILABLE NOW on top like the carousel
 * (escort-listing-vertical, column-reverse below).
 * Fallback for browsers without :has(): the second pill in .flags goes up. */
.widget.popular-escort .inner-container .flag.available-now ~ .flag.touring-now,
.widget.popular-escort .inner-container .flag.touring-now ~ .flag.available-now {
    bottom: 124px !important;
}
/* With :has() (kept as separate rules: a browser that can't parse one drops only that rule). */
.widget.popular-escort .inner-container .flags:has(> .flag.touring-now) > .flag.available-now {
    bottom: 124px !important;
}
.widget.popular-escort .inner-container .flags:has(> .flag.available-now) > .flag.touring-now {
    bottom: 95px !important;
}
/* Inside K13's <span class="utc-time widget"> the `.widget` class may have layout
 * styling from dbs.widget framework — make sure inline date span flows naturally. */
.widget.popular-escort .flag.available-now .utc-time,
.widget.popular-escort .flag.touring-now .utc-time,
.widget.escort-listing-vertical .item.available-now .utc-time,
.widget.escort-listing-vertical .item.touring-now .utc-time,
.flag.available-now .utc-time,
.flag.touring-now .utc-time,
.item.available-now .utc-time,
.item.touring-now .utc-time {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* escort-listing-vertical (carousel): K13 emits .flags > .item.* INSIDE the .a tag
 * BEFORE the .image element. The carousel card has a .info bottom overlay
 * (name + price + description, ~90px tall, linear-gradient z:2). To keep the
 * status pill from sitting on top of the name text, pin .flags ABOVE .info. */
.widget.escort-listing-vertical {
    position: relative !important;
}
.widget.escort-listing-vertical > .flags {
    position: absolute !important;
    bottom: 100px !important;   /* sit above the .info gradient (≈90px tall) */
    left: 12px !important;
    top: auto !important;       /* override widget CSS that sets top: 0 (would stretch the box) */
    right: 12px !important;     /* anchor to right edge so pill has guaranteed inset margin */
    height: auto !important;
    z-index: 4;      /* above .info (z:2) and image */
    display: flex;
    flex-direction: column-reverse;  /* if both available + touring, available stays on top */
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
    margin: 0 !important;
    max-width: calc(100% - 24px);
}
.widget.escort-listing-vertical > .flags .item.available-now,
.widget.escort-listing-vertical > .flags .item.touring-now {
    position: relative;
    pointer-events: auto;
    box-sizing: border-box;
    max-width: 100%;
    padding: 4px 8px !important;       /* tighter than the 5/11 default to fit narrow carousel cards */
    font-size: 0.62rem !important;     /* slight downscale from 0.7rem to keep "AVAILABLE NOW - X mins ago" inside the card */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.widget.escort-listing-vertical > .flags .item.available-now > span,
.widget.escort-listing-vertical > .flags .item.touring-now > span {
    font-size: 0.6rem !important;
}

/* Responsive — on smaller card heights (h:260 / h:220), reduce the bottom offset
 * proportionally so the pill stays just above the .info text, not floating mid-image. */
@media (max-width: 768px) {
    .widget.featured-escorts-carousel .widget.escort-listing-vertical > .flags {
        bottom: 86px;  /* card 260, info ≈80 */
    }
}
@media (max-width: 480px) {
    .widget.featured-escorts-carousel .widget.escort-listing-vertical > .flags {
        bottom: 78px;  /* card 220, info ≈72 */
    }
}

/* =====================================================================
 * 4) FEATURED gold pill (membership tier) — top-left of image
 * 5) VERIFIED blue chip (editor verified photos) — top-right of image
 * 6) PLAY (has videos marker) — top-left below FEATURED, small play icon
 * Already partially handled in popular-escort.css/featured-escorts-carousel.css;
 * augment here for escort-listing-vertical so all 4 contexts (home carousel,
 * listing carousel, home grid, listing grid) behave the same.
 * ===================================================================== */

/* escort-listing-vertical .image > .flag.featured  — gold FEATURED pill, top-left */
.widget.escort-listing-vertical .image {
    position: relative !important;
}
.widget.escort-listing-vertical .image > .flag.featured {
    position: absolute !important;
    top: 10px;
    left: 10px;
    bottom: auto;
    right: auto;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent;
    z-index: 3;
    line-height: 1;
}
.widget.escort-listing-vertical .image > .flag.featured img {
    display: none !important;
}
.widget.escort-listing-vertical .image > .flag.featured::after {
    content: 'FEATURED';
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--gold, #ffd700), var(--gold-dark, #c9a227));
    color: #000;
    font-size: var(--text-xs, 0.7rem);
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
}

/* escort-listing-vertical .image > .verified — blue VERIFIED chip, top-right */
.widget.escort-listing-vertical .image > .verified {
    position: absolute !important;
    top: 10px;
    right: 10px;
    bottom: auto;
    left: auto;
    z-index: 3;
    display: inline-flex !important;
    align-items: center;
    padding: 4px 10px !important;
    margin: 0 !important;
    background: #1d4ed8 !important;
    color: #fff !important;
    border-radius: 4px !important;
    line-height: 1.2;
    letter-spacing: 0.3px;
    font-size: 0 !important;  /* hide K13's "Photos verified by editor" verbose text */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.widget.escort-listing-vertical .image > .verified::before {
    content: '\2713 VERIFIED';
    font-size: var(--text-xs, 0.7rem);
    font-weight: 700;
    letter-spacing: 0.3px;
}
.widget.escort-listing-vertical .image > .verified img {
    display: none !important;
}

/* 6) .play (has videos) — small ▶ icon top-right OR mid-image
 * Both popular-escort and escort-listing-vertical emit when Model.HasVideos == true.
 * Replace the legacy PNG with a clean dark circular play icon, top-left below FEATURED. */
.widget.popular-escort .image > .play,
.widget.escort-listing-vertical .image > .play {
    position: absolute !important;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* When BOTH .flag.featured and .play are present, push .play down to avoid overlap */
.widget.popular-escort .image:has(> .flag.featured) > .play,
.widget.escort-listing-vertical .image:has(> .flag.featured) > .play {
    top: 46px;
}
.widget.popular-escort .image > .play img,
.widget.escort-listing-vertical .image > .play img {
    display: none !important;
}
.widget.popular-escort .image > .play::before,
.widget.escort-listing-vertical .image > .play::before {
    content: '\25B6';   /* ▶ play triangle */
    color: #fff;
    font-size: 0.85rem;
    margin-left: 2px;
    line-height: 1;
}

/* 7) .photo-count (2026-09-24, owner: "like ivysociete") — album icon + how many photos the profile has,
 * locked ones included (BaseAdvertiser.PhotoCount). Same dark glass as the ▶, on its row: in its place when
 * the card has no videos, beside it when it has; below FEATURED like the ▶. */
.widget.popular-escort .image > .photo-count,
.widget.escort-listing-vertical .image > .photo-count {
    position: absolute !important;
    top: 10px;
    left: 10px;
    height: 32px;
    padding: 0 11px 0 9px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.widget.popular-escort .image:has(> .flag.featured) > .photo-count,
.widget.escort-listing-vertical .image:has(> .flag.featured) > .photo-count {
    top: 46px;
}
.widget.popular-escort .image:has(> .play) > .photo-count,
.widget.escort-listing-vertical .image:has(> .play) > .photo-count {
    left: 48px;
}
.widget.popular-escort .image > .photo-count svg,
.widget.escort-listing-vertical .image > .photo-count svg {
    width: 14px;
    height: 14px;
    flex: none;
}

/* =====================================================================
 * Privacy Mode + Location-icon trigger (demo-V2 parity)
 * Injected by /custom/scripts/topbar-extras.js
 * ===================================================================== */

/* --- Privacy Mode toggle button (eye icon) --- */
.widget.header-new .nav-links .privacy-toggle,
.header-sticky .nav-links .privacy-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0 6px 0 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: var(--text-secondary, #a0a0b0);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
    vertical-align: middle;
}
.widget.header-new .nav-links .privacy-toggle:hover,
.header-sticky .nav-links .privacy-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #fff);
    border-color: rgba(255, 255, 255, 0.2);
}
.widget.header-new .nav-links .privacy-toggle.active,
.header-sticky .nav-links .privacy-toggle.active {
    background: linear-gradient(135deg, var(--primary, #e91e63), var(--secondary, #9c27b0)) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.widget.header-new .nav-links .privacy-toggle:active,
.header-sticky .nav-links .privacy-toggle:active {
    transform: scale(0.94);
}

/* --- Privacy Mode global filter (blurs imgs/videos except .privacy-exempt) --- */
html.privacy-mode img:not(.privacy-exempt):not([class*="logo" i]):not(.icon),
html.privacy-mode video {
    filter: blur(25px) brightness(0.3) !important;
    transition: filter 0.2s ease;
}
/* Always exempt header / footer / dropdown chrome — keep brand + flags + UI icons readable */
html.privacy-mode .widget.header-new img,
html.privacy-mode .widget.header-new picture img,
html.privacy-mode .header-sticky img,
html.privacy-mode .widget.footer img,
html.privacy-mode .countries img,
html.privacy-mode .culture-select img,
html.privacy-mode .ui.dropdown .menu img,
html.privacy-mode .brand img,
html.privacy-mode .notice .logo img {
    filter: none !important;
}

/* --- "Popular locations for escorts" → demo-style Location pill button --- */
.widget.header-new .nav-links a.location-trigger-btn,
.header-sticky .nav-links a.location-trigger-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 14px !important;
    margin-left: 4px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: var(--radius-pill, 50px) !important;
    color: var(--text-primary, #fff) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-transform: none;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    line-height: 1.2;
}
.widget.header-new .nav-links a.location-trigger-btn:hover,
.header-sticky .nav-links a.location-trigger-btn:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    text-decoration: none !important;
}
.widget.header-new .nav-links a.location-trigger-btn svg,
.header-sticky .nav-links a.location-trigger-btn svg {
    color: var(--gold-dark, #c9a227) !important;
    fill: var(--gold-dark, #c9a227) !important;
    flex-shrink: 0;
}
.widget.header-new .nav-links a.location-trigger-btn .location-trigger-label,
.header-sticky .nav-links a.location-trigger-btn .location-trigger-label {
    display: inline-block;
    color: inherit;
}

/* =====================================================================
 * .popular-locations-popup — restyle Semantic UI modal to demo location-modal
 * (overrides inline Semantic UI styles via :where() + high specificity)
 * ===================================================================== */
body .ui.modal.popular-locations-popup,
body .popular-locations-popup.ui.modal {
    background: var(--bg-card, #141419) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 20px !important;
    width: 96vw !important;
    max-width: 1500px !important;
    max-height: 88vh !important;
    overflow: hidden !important;
    color: var(--text-primary, #fff) !important;
    padding: 0 !important;
    flex-direction: column;
}
/* Scope `display: flex` to Semantic UI's "shown" state so other modals
 * (e.g. text-me-modal, email-me-modal) can't inadvertently reveal this
 * popup. SU adds `.visible.active` when the modal is shown via .modal('show'). */
body .ui.modal.popular-locations-popup.visible,
body .popular-locations-popup.ui.modal.visible,
body .ui.modal.popular-locations-popup.active,
body .popular-locations-popup.ui.modal.active {
    display: flex !important;
}
body .popular-locations-popup .wrapper {
    padding: 24px 28px;
    overflow-y: auto;
}
body .popular-locations-popup h1 {
    color: var(--text-primary, #fff) !important;
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 1.4rem !important;
    font-weight: 600;
    margin: 0 0 18px 0 !important;
    padding: 0 0 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}
body .popular-locations-popup h1::before {
    content: '\1F4CD';
    font-size: 1.25rem;
}
body .popular-locations-popup .close.icon {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 50% !important;
    color: var(--text-secondary, #a0a0b0) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    z-index: 5;
    margin: 0 !important;
}
body .popular-locations-popup .close.icon:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
body .popular-locations-popup .locations {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 20px 24px !important;
    align-items: start !important;
    align-content: start !important;
}
@media (min-width: 1280px) {
    body .popular-locations-popup .locations {
        grid-template-columns: repeat(8, 1fr) !important;
    }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    body .popular-locations-popup .locations {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
    body .popular-locations-popup .locations {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
/* Inside the modal, each state column behaves like a state card on the page —
 * fixed-height list + scroll instead of growing the popup. Caps total cities visible
 * at any one time so the modal doesn't overflow even when QLD/NSW have many cities.
 */
body .popular-locations-popup .locations .column ul {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
body .popular-locations-popup .locations .column ul::-webkit-scrollbar {
    width: 5px;
}
body .popular-locations-popup .locations .column ul::-webkit-scrollbar-track {
    background: transparent;
}
body .popular-locations-popup .locations .column ul::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}
body .popular-locations-popup .locations .column ul::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
body .popular-locations-popup .locations .column {
    width: auto !important;
    padding: 0;
}
body .popular-locations-popup .locations .column h3 {
    color: var(--gold, #ffd700) !important;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 0.9rem !important;
    font-weight: 600;
    margin: 0 0 10px 0 !important;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(var(--gold-dark-rgb, 201, 162, 39), 0.25);
    text-transform: none;
}
body .popular-locations-popup .locations .column h3 a {
    color: inherit !important;
    text-decoration: none;
}
body .popular-locations-popup .locations .column h3 a:hover {
    color: var(--gold-dark, #c9a227) !important;
}
/* 2026-10-03 (SEO): the popup's title and state names are divs (div.popular-locations-title.h2 /
   div.popular-locations-state.h3 - the popup came before every page's h1). The same look as the h2 / h3: the rules
   above, and what the tag rules gave them - the display font (body h2 / h3), the title centred (the critical CSS)
   with no top margin (h2:first-child). Measured equal, tag for div, in the popup as the server writes it. */
body .popular-locations-popup .popular-locations-title {
    font-family: var(--font-display) !important;
    text-align: center;
    margin-top: 0;
}
body .popular-locations-popup .locations .column .popular-locations-state {
    color: var(--gold, #ffd700) !important;
    font-family: var(--font-display) !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    margin: 0 0 10px 0 !important;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(var(--gold-dark-rgb, 201, 162, 39), 0.25);
    text-transform: none;
}
body .popular-locations-popup .locations .column .popular-locations-state a {
    color: inherit !important;
    text-decoration: none;
}
body .popular-locations-popup .locations .column .popular-locations-state a:hover {
    color: var(--gold-dark, #c9a227) !important;
}
body .popular-locations-popup .locations .column ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body .popular-locations-popup .locations .column ul li {
    margin: 0 !important;
    padding: 0;
}
body .popular-locations-popup .locations .column ul a {
    display: block;
    color: var(--text-secondary, #a0a0b0) !important;
    font-size: 0.82rem !important;
    line-height: 1.4;
    padding: 4px 0 !important;
    transition: color 0.15s;
    text-decoration: none;
    text-transform: none;
}
body .popular-locations-popup .locations .column ul a:hover {
    color: var(--primary-light, #ff5c8d) !important;
    text-decoration: none !important;
}

/* Backdrop dimmer (Semantic UI .ui.dimmer) — match demo blur backdrop */
body .ui.dimmer.modals.dimmable {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* --- K13 typeahead relocated INTO Location modal (real /api/search/quick search) --- */
body .popular-locations-popup .inputs.in-location-modal {
    margin: 0 0 22px 0 !important;
    padding: 0 0 18px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative;
    width: 100% !important;
    max-width: none !important;
}
body .popular-locations-popup .inputs.in-location-modal .search-typeahead {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
}
body .popular-locations-popup .inputs.in-location-modal .ui.search {
    width: 100% !important;
}
body .popular-locations-popup .inputs.in-location-modal .ui.search .ui.input,
body .popular-locations-popup .inputs.in-location-modal .ui.fluid.icon.input {
    width: 100% !important;
    background: var(--bg-card-hover, #1a1a22) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 28px !important;
    padding: 4px 4px 4px 14px !important;
    height: 48px !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex !important;
    align-items: center;
}
body .popular-locations-popup .inputs.in-location-modal .ui.input:focus-within {
    border-color: var(--gold-dark, #c9a227) !important;
    box-shadow: 0 0 0 3px rgba(var(--gold-dark-rgb, 201, 162, 39), 0.18) !important;
}
body .popular-locations-popup .inputs.in-location-modal input.prompt {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: var(--text-primary, #fff) !important;
    font-size: 0.95rem !important;
    font-family: var(--font-body, 'Outfit', sans-serif);
    padding: 0 8px 0 4px !important;
    height: 100% !important;
    min-width: 0;
    box-shadow: none !important;
    width: 100% !important;
}
body .popular-locations-popup .inputs.in-location-modal input.prompt::placeholder {
    color: var(--text-muted, #606070) !important;
}
body .popular-locations-popup .inputs.in-location-modal .ui.icon.input > i.icon {
    color: var(--text-secondary, #a0a0b0) !important;
    background: transparent !important;
    opacity: 0.85 !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 0.95rem;
    position: relative !important;
    margin: 0 !important;
}

/* "Search" submit button + Advanced search link */
body .popular-locations-popup .inputs.in-location-modal .ui.primary.button.submit {
    background: linear-gradient(135deg, var(--primary, #e91e63), var(--primary-dark, #b0003a)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-pill, 50px) !important;
    height: 48px !important;
    width: auto !important;
    min-width: 110px !important;
    padding: 0 22px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 !important;
    transition: transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(233, 30, 99, 0.25);
}
body .popular-locations-popup .inputs.in-location-modal .ui.primary.button.submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(233, 30, 99, 0.35);
}
body .popular-locations-popup .inputs.in-location-modal .advanced-search {
    display: none !important;  /* Modal already provides advanced filters via city grid */
}

/* Typeahead results dropdown (below the input, inside modal) */
body .popular-locations-popup .inputs.in-location-modal .results,
body .popular-locations-popup .inputs.in-location-modal .ui.search > .results {
    position: absolute !important;
    top: calc(100% - 14px) !important;
    left: 0 !important;
    right: 130px !important;  /* leave space for the Search button */
    width: auto !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    background: var(--bg-card, #141419) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
    border-radius: var(--radius-md, 12px) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    z-index: 100;
    color: var(--text-primary, #fff) !important;
    padding: 8px 0 !important;
}
body .popular-locations-popup .inputs.in-location-modal .results .typeahead-results .category {
    padding: 8px 14px 4px 38px !important;
    position: relative;
}
body .popular-locations-popup .inputs.in-location-modal .results .typeahead-results .category .icon {
    position: absolute;
    left: 12px;
    top: 9px;
    color: var(--gold-dark, #c9a227) !important;
    font-size: 16px !important;
    width: auto !important;
    text-align: left !important;
}
body .popular-locations-popup .inputs.in-location-modal .results .typeahead-results .category .category-name {
    color: var(--text-muted, #606070) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px;
    font-weight: 600;
    opacity: 0.9 !important;
    padding: 0 !important;
}
body .popular-locations-popup .inputs.in-location-modal .results .typeahead-results .links {
    margin: 4px 0 8px !important;
    padding: 0 !important;
}
body .popular-locations-popup .inputs.in-location-modal .results .typeahead-results .links a.result {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    padding: 8px 16px 8px 38px !important;
    border: none !important;
    margin: 0 !important;
    color: var(--text-primary, #fff) !important;
    text-decoration: none !important;
    transition: background 0.12s, color 0.12s;
    border-radius: 0;
}
body .popular-locations-popup .inputs.in-location-modal .results .typeahead-results .links a.result:hover {
    background: rgba(233, 30, 99, 0.08) !important;
}
body .popular-locations-popup .inputs.in-location-modal .results .typeahead-results .links a.result.active {
    background: linear-gradient(90deg, rgba(233, 30, 99, 0.15), rgba(233, 30, 99, 0.04)) !important;
}
body .popular-locations-popup .inputs.in-location-modal .results .typeahead-results .links a .text {
    width: 100%;
    color: inherit !important;
}
body .popular-locations-popup .inputs.in-location-modal .results .typeahead-results .links a .title {
    color: var(--text-primary, #fff) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.3;
    margin: 0;
}
body .popular-locations-popup .inputs.in-location-modal .results .typeahead-results .links a:hover .title {
    color: var(--primary-light, #ff5c8d) !important;
}
body .popular-locations-popup .inputs.in-location-modal .results .typeahead-results .links a mark {
    background: transparent !important;
    color: var(--gold, #ffd700) !important;
    font-weight: 700;
    padding: 0;
}
body .popular-locations-popup .inputs.in-location-modal .results .message {
    padding: 10px 16px !important;
    color: var(--text-muted, #606070) !important;
    font-size: 0.85rem;
}

/* Compact header now that the inline typeahead is gone — keep .bottom-right balanced */
.widget.header-new .bottom .bottom-right:not(:has(.inputs)) {
    justify-content: flex-end;
}

/* =====================================================================
 * /popular-locations standalone page — match ref browse-location grid
 * (4-card grid, state-card cells, gold state code, pink city-count chip)
 * ===================================================================== */
body article > .widget.popular-locations,
body .pusher .widget.popular-locations {
    padding: 56px 0 64px;
    background: transparent;
    color: var(--text-primary, #fff);
}
body .widget.popular-locations .wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}
/* 2026-10-03 (SEO): /popular-locations has the widget's title as its h1 - <h1 class="h2">, which keeps the h2 look
   it always had there (the site's .h2 sizes); the h1 design below is the /sitemap page's own title (:not(.h2)) */
body .widget.popular-locations h1.h2 {
    text-align: start;
}
body .widget.popular-locations h1:not(.h2) {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--text-primary, #fff) !important;
    margin: 0 0 8px 0 !important;
    text-align: left;
}
body .widget.popular-locations h1:not(.h2) + .locations::before {
    content: 'Browse escorts and adult services across Australia by state and city.';
    display: block;
    color: var(--text-secondary, #a0a0b0);
    font-size: 1rem;
    margin: 0 0 32px 0;
    grid-column: 1 / -1;
}
body .widget.popular-locations .locations {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}
@media (max-width: 1200px) {
    body .widget.popular-locations .locations {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 900px) {
    body .widget.popular-locations .locations {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    body .widget.popular-locations .locations {
        grid-template-columns: 1fr !important;
    }
    body .widget.popular-locations {
        padding: 32px 0 !important;
    }
    body .widget.popular-locations h1:not(.h2) {
        font-size: 1.5rem !important;
    }
}

/* Each .column is a state card */
body .widget.popular-locations .locations .column {
    width: auto !important;
    background: var(--bg-card, #141419);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md, 12px);
    padding: 24px;
    transition: border-color 0.2s ease;
    list-style: none;
}
body .widget.popular-locations .locations .column:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

/* State heading: <h3><a>Escorts in QLD</a></h3> — split-style (gold accent + grey) */
body .widget.popular-locations .locations .column h3 {
    margin: 0 0 16px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-transform: none;
    line-height: 1.2;
}
body .widget.popular-locations .locations .column h3 a {
    color: var(--gold, #ffd700) !important;
    text-decoration: none !important;
    transition: color 0.15s;
}
body .widget.popular-locations .locations .column h3 a:hover {
    color: var(--gold-dark, #c9a227) !important;
}

/* City list */
body .widget.popular-locations .locations .column ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body .widget.popular-locations .locations .column ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: 0 !important;
    margin: 0 !important;
}
body .widget.popular-locations .locations .column ul li:last-child {
    border-bottom: none;
}
body .widget.popular-locations .locations .column ul li a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 7px 8px !important;
    margin: 0 -4px;
    color: var(--text-primary, #fff) !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    transition: color 0.15s, background 0.15s;
    border-radius: var(--radius-sm, 8px);
    text-transform: none;
    line-height: 1.4;
}
body .widget.popular-locations .locations .column ul li a:hover {
    color: var(--primary-light, #ff5c8d) !important;
    background: var(--bg-card-hover, #1a1a22);
}

/* === Ref-style enhanced markup (.browse-location__*) injected via JS === */
.browse-location__state-card {
    background: var(--bg-card, #141419);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md, 12px);
    padding: 24px;
    transition: border-color 0.2s ease;
}
.browse-location__state-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}
.browse-location__state-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 16px 0;
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    line-height: 1.2;
}
.browse-location__state-code {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold, #ffd700);
}
.browse-location__state-name {
    font-size: 0.875rem;
    color: var(--text-secondary, #a0a0b0);
    font-weight: 400;
}
.browse-location__city-list {
    list-style: none;
    padding: 0;
    margin: 0;
    transition: max-height 0.25s ease;
}
/* Cities beyond the initial 20 are hidden until "Show more" is clicked */
.browse-location__city-item--hidden {
    display: none;
}
.browse-location__city-list--expanded .browse-location__city-item--hidden {
    display: block;
}
/* When expanded, cap height and let the inner list scroll instead of growing the page */
.browse-location__city-list--expanded {
    max-height: 480px;
    overflow-y: auto;
    padding-right: 4px;
    /* slim dark scrollbar — Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
/* slim dark scrollbar — WebKit */
.browse-location__city-list--expanded::-webkit-scrollbar {
    width: 6px;
}
.browse-location__city-list--expanded::-webkit-scrollbar-track {
    background: transparent;
}
.browse-location__city-list--expanded::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}
.browse-location__city-list--expanded::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
.browse-location__city-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: 0;
    margin: 0;
}
.browse-location__city-item:last-child {
    border-bottom: none;
}
.browse-location__city-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 8px;
    margin: 0 -4px;
    color: var(--text-primary, #fff);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s, background 0.15s;
    border-radius: var(--radius-sm, 8px);
    line-height: 1.4;
}
.browse-location__city-link:hover {
    color: var(--primary-light, #ff5c8d);
    background: var(--bg-card-hover, #1a1a22);
    text-decoration: none;
}
.browse-location__city-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.browse-location__city-count {
    font-size: 0.75rem;
    color: var(--text-muted, #606070);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 9999px;
    min-width: 36px;
    text-align: center;
    flex-shrink: 0;
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
}
.browse-location__city-link:hover .browse-location__city-count {
    color: var(--primary-light, #ff5c8d);
    background: rgba(233, 30, 99, 0.1);
}
.browse-location__show-more {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-sm, 8px);
    color: var(--primary-light, #ff5c8d);
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.browse-location__show-more:hover {
    background: rgba(233, 30, 99, 0.1);
    border-color: var(--primary, #e91e63);
}
.browse-location__show-more:active {
    transform: scale(0.98);
}
/* When expanded, button shows "Show fewer cities" + tinted to a "collapse" affordance */
.browse-location__show-more--expanded {
    background: rgba(var(--gold-dark-rgb, 201, 162, 39), 0.08);
    border-color: rgba(var(--gold-dark-rgb, 201, 162, 39), 0.35);
    color: var(--gold, #ffd700);
}
.browse-location__show-more--expanded:hover {
    background: rgba(var(--gold-dark-rgb, 201, 162, 39), 0.14);
    border-color: var(--gold-dark, #c9a227);
}
.browse-location__status {
    margin-top: 16px;
    color: var(--text-muted, #606070);
    text-align: center;
    font-size: 0.9rem;
}
.browse-location__status--error {
    color: var(--danger, #f44336);
}

/* Skeleton placeholder during AJAX load */
.skeleton-card {
    background: var(--bg-card, #141419);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md, 12px);
    padding: 24px;
}
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card, #141419) 25%,
        var(--bg-card-hover, #1a1a22) 50%,
        var(--bg-card, #141419) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =====================================================================
 * Homepage "Browse by City" — ref-style image cards
 * Replaces K13 city-buttons pill list (injected by topbar-extras.js)
 * ===================================================================== */
.widget.city-buttons {
    background: transparent !important;
    padding: 0 !important;
}
.widget.city-buttons .wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 24px;
}
/* 2026-10-03 (SEO, owner: every page h1, h2, h3 in order): the home page's h1 - its page title from the CMS - above
   Browse by City, in that widget's column (1400px, 24px sides; 16px on a phone), larger than the section titles.
   The city widget's top space shrinks under it, so the page does not move down by a whole gap. */
.home-h1 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 36px 24px 0;
}
.home-h1 h1 {
    margin: 0 !important;
    padding: 0;
    color: var(--text-primary, #fff);
    font-size: 34px !important;   /* the section h2s below are 28px (Featured, Popular) */
    line-height: 1.2 !important;
    text-align: left;
}
.home-h1 + .widget.city-buttons .wrapper {
    padding-top: 22px;
}
.widget.city-buttons .ref-cities-section {
    width: 100%;
}
.widget.city-buttons .ref-cities-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    min-height: 28px;
}
.widget.city-buttons .ref-cities-title {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    line-height: 1.2;
    margin: 0;
}
/* 2026-10-03 (owner, SEO): "Browse by City" is a div, not an h2 (topbar-extras.js). As an h2 the site's heading rule
   gave it weight 300 over the 600 above, and that is what a visitor sees - kept (measured equal, h2 for div). */
.widget.city-buttons div.ref-cities-title {
    font-weight: 300;
}
.widget.city-buttons .ref-cities-link {
    color: var(--gold, #ffd700);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s;
    text-decoration: none;
}
.widget.city-buttons .ref-cities-link:hover {
    color: var(--gold-dark, #c9a227);
    text-decoration: none;
}
/* Horizontal scrolling strip: cards lined up in a row, native overflow-x scroll
 * when the strip exceeds the container width. Each card is a fixed flex-basis
 * so widths stay consistent regardless of total city count. */
.widget.city-buttons .cities-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 4px 4px 14px;       /* room for hover lift + scrollbar without clipping */
    margin: 0 -4px;              /* visual bleed into widget padding */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.55) rgba(255, 255, 255, 0.06);
    scroll-padding-left: 4px;
}
.widget.city-buttons .cities-grid::-webkit-scrollbar {
    height: 8px;
}
.widget.city-buttons .cities-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}
.widget.city-buttons .cities-grid::-webkit-scrollbar-thumb {
    background: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.55);
    border-radius: 4px;
}
.widget.city-buttons .cities-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.8);
}
/* Loading skeleton placeholder card */
.widget.city-buttons .city-card-skeleton {
    background: linear-gradient(90deg, #1a1a22 0%, #232334 50%, #1a1a22 100%);
    background-size: 200% 100%;
    animation: cityCardShimmer 1.4s ease-in-out infinite;
}
@keyframes cityCardShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
/* Three-layer card: gradient + SVG/letter (z:0, always present) → photo (z:1,
 * covers when loaded; hidden via onerror if URL fails) → overlay text (z:2). */
.widget.city-buttons .city-card-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
}
.widget.city-buttons .city-card-img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: transparent;
    /* Hidden until onload sets .city-card-img--loaded — keeps the SVG/letter
     * fallback visible during lazy-load instead of a blank black rectangle. */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.4s ease;
}
.widget.city-buttons .city-card-img.city-card-img--loaded {
    opacity: 1;
}
.widget.city-buttons .city-card:hover .city-card-img--loaded {
    transform: scale(1.08);
}
.widget.city-buttons .city-card:hover .city-card-placeholder {
    /* SVG fallback also subtly zooms when no photo loaded */
    transform: scale(1.04);
    transition: transform 0.4s ease;
}
.widget.city-buttons .city-card-overlay {
    z-index: 2;
}
.widget.city-buttons .city-card-icon {
    width: 56%;
    height: 56%;
    max-width: 96px;
    max-height: 96px;
    opacity: 0.85;
    /* 2026-10-05 (PageSpeed): no drop-shadow filter - the icon is the placeholder under a city photo, covered once the
       photo is in, and the filter was GPU-process work before the home page's first frame (age-gate.css .age-gate::before) */
}
.widget.city-buttons .city-card-initial {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
    opacity: 0.85;
}
/* Desktop drag-to-scroll affordance: cursor swap + tighter scroll-snap during drag */
.widget.city-buttons .cities-grid { cursor: grab; }
.widget.city-buttons .cities-grid.cities-grid-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}
/* v8ac - REMOVED rule that set city-card { pointer-events: none } on the
 * "dragging" class. The class was added on pointerdown (before any actual
 * movement was confirmed), which made the card pointer-inert immediately,
 * triggering pointerleave on the card and routing pointerup/click to the
 * outer grid. Result: clicks never reached the link, cards appeared
 * unclickable. The JS no longer needs CSS help: it doesn't suppress clicks
 * post-drag (drag-scroll without click-blocking is the cheapest correct UX).
 * Kept the .cities-grid-dragging rule above for cursor + user-select hints. */
.widget.city-buttons .city-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 220px;             /* fixed card width — strip scrolls when it overflows */
    aspect-ratio: 4 / 3;
    cursor: pointer;
    background: var(--bg-card, #141419);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    contain: layout style paint;
    scroll-snap-align: start;
}
.widget.city-buttons .city-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    text-decoration: none;
}
.widget.city-buttons .city-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
    background: var(--bg-elevated, #1a1a22);
}
.widget.city-buttons .city-card:hover img {
    transform: scale(1.08);
}
.widget.city-buttons .city-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 35%, rgba(0, 0, 0, 0.85));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    pointer-events: none;
    color: #fff;
}
.widget.city-buttons .city-card-name {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
}
.widget.city-buttons .city-card-count {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 4px;
    line-height: 1.2;
}

/* Responsive card width — strip remains horizontally scrollable at all breakpoints */
@media (max-width: 1200px) {
    .widget.city-buttons .city-card { flex-basis: 200px; }
}
@media (max-width: 900px) {
    .widget.city-buttons .city-card { flex-basis: 180px; }
    .widget.city-buttons .cities-grid { gap: 12px; }
}
@media (max-width: 600px) {
    .widget.city-buttons .wrapper {
        padding: 32px 16px;
    }
    .home-h1 { padding: 24px 16px 0; }
    .home-h1 h1 { font-size: 26px !important; }   /* the h2s are 24.5px here */
    .home-h1 + .widget.city-buttons .wrapper { padding-top: 16px; }
    .widget.city-buttons .city-card { flex-basis: 160px; }
    .widget.city-buttons .cities-grid {
        gap: 10px;
        padding: 4px 4px 12px;
    }
    .widget.city-buttons .ref-cities-title {
        font-size: 1.1rem;
    }
    .widget.city-buttons .city-card-overlay {
        padding: 10px;
    }
    .widget.city-buttons .city-card-name {
        font-size: 0.85rem;
    }
    .widget.city-buttons .city-card-count {
        font-size: 0.65rem;
    }
    .widget.city-buttons .city-card-initial {
        font-size: 2.6rem;
    }
}
@media (hover: none) and (pointer: coarse) {
    .widget.city-buttons .city-card:hover {
        transform: none;
        box-shadow: none;
    }
    .widget.city-buttons .city-card:hover img {
        transform: none;
    }
}


/* === profile-pages-only: begin === 2026-10-04 (PageSpeed): from here to "profile-pages-only: end" the rules are
   the advertiser profile page's; design-tokens-lite.css (StaticAssets/build-design-tokens-lite.py) leaves them out
   for every other page. Keep only profile rules between the two markers. */
/* =====================================================================
 * Profile Detail Page (advertiser /profile/{state}/{city}/{type}/{name})
 * Phase 2 — port demo `ad-detail.html` look onto K13 partial markup.
 * Markup is unchanged; this section overrides the legacy white-light
 * scheme to a dark card scheme matching the rest of Phase 1.
 * Scope: every rule begins with `.widget.public-profile` or its
 * descendant widget classes, so nothing leaks outside the profile page.
 * ===================================================================== */

/* --- Page wrapper: dark theme over white K13 default ----------------- */
.widget.public-profile .inner-public-profile {
    background-color: var(--bg-page, #0f0f14) !important;
    color: var(--text-primary, #fff) !important;
    font-family: var(--font-body, 'Outfit', sans-serif);
    padding: var(--space-5, 20px) !important;
    overflow-x: hidden !important;    /* v8m2 — prevent horizontal scroll on mobile */
    max-width: 100vw;                 /* v8m2 */
    box-sizing: border-box;           /* v8m2 */
}
@media (min-width: 768px) {
    .widget.public-profile .inner-public-profile {
        padding: var(--space-6, 24px) !important;
    }
}

/* All H tags inside the profile go light */
.widget.public-profile .inner-public-profile h1,
.widget.public-profile .inner-public-profile h2,
.widget.public-profile .inner-public-profile h3,
.widget.public-profile .inner-public-profile h4,
.widget.public-profile .inner-public-profile h5,
.widget.public-profile .inner-public-profile .h1,
.widget.public-profile .inner-public-profile .h2,
.widget.public-profile .inner-public-profile .h3,
.widget.public-profile .inner-public-profile .h4 {
    color: var(--text-primary, #fff) !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
}

/* --- Layout: 2-column grid (left = gallery + main content, right = sticky contact) --- */
.widget.public-profile .profile-columns {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
        "gallery"
        "main"
        "contact";
    column-gap: 24px;
    row-gap: 16px;
    align-items: start;
    flex-direction: initial !important;
    min-width: 0 !important;          /* v8m2 — grid tracks must not overflow container */
    overflow: hidden;                 /* v8m2 */
}
@media (min-width: 1024px) {
    .widget.public-profile .profile-columns {
        grid-template-columns: 1fr 380px;
        grid-template-areas:
            "gallery contact"
            "main contact";
    }
}
.widget.public-profile .profile-columns > .gallery-column {
    grid-area: gallery;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    min-width: 0 !important;          /* v8m2 — prevent grid blowout on mobile */
    overflow: hidden !important;      /* v8m2 — clip gallery images to grid track */
}
.widget.public-profile .profile-columns > .main-column {
    grid-area: main;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    min-width: 0 !important;          /* v8m2 — prevent grid blowout */
    overflow: hidden !important;      /* v8m2 — clip to grid track */
}
.widget.public-profile .profile-columns > .contact-column,
.widget.public-profile .profile-columns > .hidden-mobile {
    grid-area: contact;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
}
@media (min-width: 1024px) {
    .widget.public-profile .profile-columns > .contact-column,
    .widget.public-profile .profile-columns > .hidden-mobile {
        position: sticky;
        top: 90px;
        align-self: start;
    }
}

/* --- Card base: every section gets a rounded panel ------------------- */
.widget.public-profile .widget.profile-profile,
.widget.public-profile .widget.profile-rates,
.widget.public-profile .widget.profile-rates-extras,
.widget.public-profile .widget.profile-availability,
.widget.public-profile .widget.profile-location,
.widget.public-profile .widget.profile-read-more,
.widget.public-profile .widget.profile-touring-locations,
.widget.public-profile .widget.profile-locations,
.widget.public-profile .widget.profile-contact-me,
.widget.public-profile .widget.profile-contact-bar,
.widget.public-profile .widget.profile-photos,
.widget.public-profile .widget.real-or-fake,
.widget.public-profile .widget.our-escorts {
    background: var(--bg-card, #141419) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    border-radius: var(--radius-md, 12px) !important;
    padding: var(--space-5, 20px) !important;
    margin: 0 0 var(--space-4, 16px) 0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.widget.public-profile .editable-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}
.widget.public-profile .editable-section .widget {
    padding-top: var(--space-5, 20px) !important;
}
.widget.public-profile .editable-section + .editable-section {
    margin-top: var(--space-3, 12px) !important;
}

/* Section headings inside cards.
   2026-10-03 (SEO, owner: h1, h2, h3 in order): the sections are h2 under the page's h1 (the name) - each rule here
   names h2 beside the h3 it had, so a page drawn before or after the change looks the same */
.widget.public-profile .widget.profile-profile h2,
.widget.public-profile .widget.profile-rates h2,
.widget.public-profile .widget.profile-rates-extras h2,
.widget.public-profile .widget.profile-availability h2,
.widget.public-profile .widget.profile-location h2,
.widget.public-profile .widget.profile-read-more h2,
.widget.public-profile .widget.profile-touring-locations h2,
.widget.public-profile .widget.profile-locations h2,
.widget.public-profile .widget.profile-contact-me h2,
.widget.public-profile .widget.our-escorts h2,
.widget.public-profile .widget.profile-profile h3,
.widget.public-profile .widget.profile-rates h3,
.widget.public-profile .widget.profile-rates-extras h3,
.widget.public-profile .widget.profile-availability h3,
.widget.public-profile .widget.profile-location h3,
/* not a review's own title: an h3 under the Reviews h2 since 2026-10-03 (profile-reviews.css styles it) */
.widget.public-profile .widget.profile-read-more h3:not(.profile-reviews-title),
.widget.public-profile .widget.profile-touring-locations h3,
.widget.public-profile .widget.profile-locations h3,
.widget.public-profile .widget.profile-contact-me h3,
.widget.public-profile .widget.our-escorts h3 {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    color: var(--text-primary, #fff) !important;
    font-size: 1.1rem !important;
    margin: 0 0 var(--space-4, 16px) 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    padding-bottom: var(--space-3, 12px) !important;
}

/* "Things I prefer in private" has no card rule: it was drawn as the site's h3. As an h2 it carries the class h3
   (the site's .h3 sizes, every breakpoint) and the h3 top margin, which the site's h2 rule (20px) would replace */
.widget.public-profile h2.h3 {
    margin-top: 2.2rem;
}

/* Profile header (name + tagline) — top-left card */
.widget.public-profile .widget.profile-header {
    background: var(--bg-card, #141419) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    border-radius: var(--radius-md, 12px) !important;
    padding: var(--space-5, 20px) !important;
    margin: 0 0 var(--space-4, 16px) 0 !important;
    position: relative;
}
.widget.public-profile .widget.profile-header .name,
.widget.public-profile .widget.profile-header .name-short {
    color: var(--text-primary, #fff) !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
}
/* 2026-10-03 (SEO): the name is an <h1> in the served page (Views/Profile/Detail/_MySecondaryHeader) - it keeps the
   div's look: the site's h1 rules (body.pushable h1, .h1/h1 ... !important) set PT Serif 300 centred */
.widget.public-profile .profile-header .header h1.name-short {
    font-family: inherit !important;
    font-weight: 700 !important;
    text-align: inherit !important;
}
.widget.public-profile .widget.profile-header .tag {
    color: var(--text-secondary, #a0a0b0) !important;
}
.widget.public-profile .widget.profile-header .tagline {
    color: var(--primary-light, #ff5c8d) !important;
    margin: var(--space-3, 12px) 0 0 0 !important;
}

/* Quick facts table inside .widget.profile-profile */
.widget.public-profile .widget.profile-profile .ui.inverted.table,
.widget.public-profile .widget.profile-profile .ui.table,
.widget.public-profile .widget.profile-profile table {
    background: transparent !important;
    color: var(--text-primary, #fff) !important;
    border: 0 !important;
}
.widget.public-profile .widget.profile-profile .ui.inverted.table tbody tr,
.widget.public-profile .widget.profile-profile .ui.table tbody tr {
    background: transparent !important;
}
.widget.public-profile .widget.profile-profile .ui.inverted.table tbody td,
.widget.public-profile .widget.profile-profile .ui.table tbody td,
.widget.public-profile .widget.profile-profile td {
    background: transparent !important;
    color: var(--text-primary, #fff) !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06)) !important;
    padding: var(--space-3, 12px) var(--space-2, 8px) !important;
}
.widget.public-profile .widget.profile-profile td:first-child,
.widget.public-profile .widget.profile-profile th:first-child {
    color: var(--text-muted, #6b6b7a) !important;
    font-weight: 500 !important;
    width: 30%;
    min-width: 110px;
}

/* Profile location (suburb, state, postcode) */
.widget.public-profile .widget.profile-location .location {
    color: var(--primary-light, #ff5c8d) !important;
    font-size: 1.4rem !important;
    font-weight: 700;
    font-family: var(--font-display, 'Playfair Display', serif);
}
.widget.public-profile .widget.profile-location a {
    color: var(--primary-light, #ff5c8d) !important;
}

/* Profile read-more body text */
.widget.public-profile .widget.profile-read-more {
    color: var(--text-secondary, #a0a0b0) !important;
}
.widget.public-profile .widget.profile-read-more .name {
    color: var(--text-primary, #fff) !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
}
.widget.public-profile .widget.profile-read-more .hidable .grad {
    background-image: linear-gradient(to bottom, transparent, var(--bg-card, #141419)) !important;
}

/* --- Favourite button (heart, top-right) ----------------------------- */
.widget.public-profile .favourite,
.widget.public-profile .profile-header .favourite {
    background: rgba(233, 30, 99, 0.12) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    border-radius: var(--radius-pill, 999px) !important;
    color: var(--primary-light, #ff5c8d) !important;
    font-size: 0.75rem !important;
    padding: 8px 16px !important;
    transition: all 0.2s;
}
.widget.public-profile .favourite:hover {
    background: rgba(233, 30, 99, 0.25) !important;
    border-color: var(--primary, #e91e63) !important;
}
.widget.public-profile .favourite.active {
    background: linear-gradient(135deg, var(--primary, #e91e63), var(--primary-dark, #b0003a)) !important;
    color: #fff !important;
    border-color: var(--primary, #e91e63) !important;
}

/* --- Top nav (section anchor strip) — restyled as clean dark tab strip
 * with a back button on the left and horizontally-scrollable section
 * anchors (Gallery / Location / Profile / Availability / Rates / suburb).
 * `.public-profile-nav` is rendered as TOP-LEVEL <nav>, NOT inside
 * `.widget.public-profile`, so selectors are unscoped. */
.widget.public-profile-nav,
nav.public-profile-nav {
    margin: 0 0 16px 0 !important;
    height: auto !important;
    background: var(--bg-card, #141419);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: none;
}
.widget.public-profile-nav .carousel,
nav.public-profile-nav .carousel {
    background: transparent !important;
    display: flex !important;
    align-items: stretch;
    height: 48px;
    position: relative;
    padding: 0 !important;
    transition: transform 0.3s ease;
}
.widget.public-profile-nav .carousel::before,
.widget.public-profile-nav .carousel::after,
nav.public-profile-nav .carousel::before,
nav.public-profile-nav .carousel::after {
    display: none !important;
}
/* Back button on the left — pill-styled */
.widget.public-profile-nav .go-back,
nav.public-profile-nav .go-back {
    background: var(--bg-card-hover, #1a1a22) !important;
    color: var(--text-primary, #fff) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px !important;
    padding: 0 16px !important;
    width: auto !important;
    flex: 0 0 auto;
    border-right: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    text-decoration: none !important;
    font-weight: 500;
    position: static !important;
    transition: background 0.2s;
}
.widget.public-profile-nav .go-back:hover,
nav.public-profile-nav .go-back:hover {
    background: var(--bg-elevated, #232334) !important;
    color: var(--text-primary, #fff) !important;
}
.widget.public-profile-nav .go-back .icon,
nav.public-profile-nav .go-back .icon {
    margin: 0 !important;
}
/* Swiper container — make it actually scroll horizontally with the slides
 * laid out as clean tab pills. K13's swiper.js still controls the
 * horizontal positioning; we just visually align it. */
.widget.public-profile-nav .swiper-container,
nav.public-profile-nav .swiper-container {
    flex: 1 1 auto;
    height: 48px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.widget.public-profile-nav .swiper-container::-webkit-scrollbar,
nav.public-profile-nav .swiper-container::-webkit-scrollbar {
    display: none;
}
.widget.public-profile-nav .swiper-wrapper,
nav.public-profile-nav .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    height: 48px;
    transform: none !important;       /* override Swiper's translate3d so all slides are visible */
    transition: none !important;
    width: max-content;
}
.widget.public-profile-nav .swiper-slide,
nav.public-profile-nav .swiper-slide {
    width: auto !important;
    flex: 0 0 auto;
    margin-right: 0 !important;
    height: 48px;
    display: flex;
    align-items: stretch;
}
.widget.public-profile-nav .swiper-slide a,
nav.public-profile-nav .swiper-slide a {
    color: var(--text-secondary, #a0a0b0) !important;
    font-weight: 500 !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.widget.public-profile-nav .swiper-slide a:hover,
nav.public-profile-nav .swiper-slide a:hover {
    color: var(--text-primary, #fff) !important;
    text-decoration: none !important;
}
.widget.public-profile-nav .swiper-slide a.selected,
nav.public-profile-nav .swiper-slide a.selected {
    color: var(--gold, #ffd700) !important;
    border-bottom-color: var(--gold, #ffd700);
    text-decoration: none !important;
}
/* The section nav is mobile-only — on desktop the 2-col layout with
 * sticky contact sidebar already provides enough orientation, and demo
 * doesn't have this nav at all. */
@media (min-width: 1024px) {
    nav.public-profile-nav,
    .widget.public-profile-nav {
        display: none !important;
    }
}

/* Hide swiper slides whose anchor isn't a section link (`href="#..."`).
 * Currently this catches the "Ultimo, 2007 NSW" sibling-profile link that
 * K13 emits as a sister-profile shortcut — it doesn't belong in the
 * section anchor strip. */
.widget.public-profile-nav .swiper-slide:has(> a:not([href^="#"]):not(.go-back)),
nav.public-profile-nav .swiper-slide:has(> a:not([href^="#"]):not(.go-back)) {
    display: none !important;
}

/* Stuck (sticky on scroll) state — keep clean dark, ride below the
 * fixed header (.widget.header-new is position:fixed top:0 height 78px). */
nav.public-profile-nav.stuck .carousel,
.widget.public-profile-nav.stuck .carousel {
    background: var(--bg-card, #141419) !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    top: 78px !important;   /* below fixed header so it doesn't overlap */
}
@media (max-width: 767px) {
    nav.public-profile-nav.stuck .carousel,
    .widget.public-profile-nav.stuck .carousel {
        top: 52px !important;  /* v8m2 — mobile header is 52px, not 78px */
    }
}
/* Reserve the 48px gap when nav becomes stuck so content below doesn't jump */
nav.public-profile-nav.stuck,
.widget.public-profile-nav.stuck {
    height: 48px !important;
}
/* Provide native scroll-margin-top on each named anchor target (header 78 +
 * nav 48 + buffer 8 = 134) — most modern browsers honor this when scrolling
 * to anchors. K13's jQuery animate doesn't respect this, so the JS interceptor
 * in topbar-extras.js handles the actual click. */
.widget.public-profile a[name],
.public-profile a[name] {
    scroll-margin-top: 134px;
}
@media (max-width: 767px) {
    .widget.public-profile a[name],
    .public-profile a[name] {
        scroll-margin-top: 108px;  /* v8m2 — mobile: header 52 + nav 48 + buffer 8 */
    }
}

/* --- Back / control buttons (top of page) ---------------------------- */
.widget.public-profile .inner-public-profile .controls a {
    background-color: var(--bg-card-hover, #1a1a22) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-primary, #fff) !important;
    border-radius: var(--radius-md, 12px) !important;
    transition: all 0.2s;
}
.widget.public-profile .inner-public-profile .controls a:hover {
    background-color: var(--primary, #e91e63) !important;
    border-color: var(--primary, #e91e63) !important;
}

/* --- Real or fake voting card --------------------------------------- */
.widget.public-profile .widget.real-or-fake {
    text-align: center;
}
.widget.public-profile .widget.real-or-fake h3,
.widget.public-profile .widget.real-or-fake h4 {
    color: var(--text-primary, #fff) !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    margin-bottom: var(--space-3, 12px) !important;
}
.widget.public-profile .widget.real-or-fake .button {
    border-radius: var(--radius-md, 12px) !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
}

/* --- Report user button --------------------------------------------- */
.widget.public-profile .report,
.widget.public-profile .inner-public-profile .report {
    color: var(--primary-light, #ff5c8d) !important;
    margin-top: var(--space-4, 16px) !important;
    font-size: 0.85rem !important;
}
.widget.public-profile .report:hover {
    color: var(--primary, #e91e63) !important;
}

/* --- Infobox ("Please mention us when contacting") ------------------
   As the owner's demo notice-chat-icon.html (2026-09-28), its variant B - icon and sentence on one line, the
   compact one: a dark card in a gold line, the gold chat-bubbles icon beside "Mention {BrandName} when you
   contact <b>name</b>.". Sized for a ~380 px column and a phone's width: icon 28 px, 14 px to the text, 16 px
   text, 16 / 20 px padding - two lines, 82 px high, at 380, 343 and 300 px. Markup: _ContactInfoBox
   (.notice-icon, .notice-text). */
.widget.public-profile .infobox {
    background: var(--bg-card, #141419) !important;
    border: 1px solid var(--gold, #d4af37) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    margin-top: var(--space-4, 16px) !important;
    color: #d8d8d8;
}
.widget.public-profile .infobox .inner {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.infobox .notice-icon {
    display: block;
    flex: none;
    width: 28px;
    height: 28px;
    margin: 0;
    color: var(--gold, #d4af37);
}
.infobox .notice-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}
.infobox .notice-text b { color: #fff; font-weight: 500; }

/* --- Pending indicator (admin-side hint) ----------------------------
   2026-09-07. This block is why the badge was red: it beats the widget
   stylesheet with !important, so restyling public-profile.css alone changed
   nothing. The layout (a strip along the bottom edge, two ellipsised lines)
   lives there; the colours live here, because here is what wins.
   Amber, not red - red is --danger and a photo waiting for review is not an
   error. Rejected keeps red, which is the one case that IS one.
   No background-color and no border-radius are forced any more, so the widget
   sheet can give the in-section variant its own tint and corners.           */
.widget.public-profile .pending {
    background: linear-gradient(to top,
        rgba(10, 10, 15, 0.95) 0%,
        rgba(10, 10, 15, 0.80) 55%,
        rgba(10, 10, 15, 0) 100%) !important;
    color: var(--text-primary, #ffffff) !important;
}
.widget.public-profile .pending .pending-main { color: var(--warning, #ff9800) !important; }
.widget.public-profile .pending .pending-sub  { color: var(--text-secondary, #a0a0b0) !important; }
.widget.public-profile .pending.is-rejected .pending-main { color: var(--danger, #f44336) !important; }
/* the in-section variant is a tinted block, not a photo caption */
.widget.public-profile .editable-section .pending {
    background: rgba(255, 152, 0, 0.10) !important;
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0 !important;
}

/* --- Editable section edit button (owner mode) ---------------------- */
.widget.public-profile .editable-section .edit-button:before {
    background-color: var(--primary, #e91e63) !important;
    border-radius: 999px !important;
}
.widget.public-profile .editable-section .edit-button:hover:before {
    background-color: var(--primary-dark, #b0003a) !important;
}

/* =====================================================================
 * Profile Gallery (public-profile-gallery widget) — hero image + thumbs
 * ===================================================================== */

.widget.public-profile-gallery {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 var(--space-4, 16px) 0 !important;
    border-radius: var(--radius-md, 12px) !important;
    overflow: hidden;
}
/* Main hero image (separate `.main-image` element above the thumb grid) */
.widget.public-profile .main-image,
.widget.public-profile .widget.public-profile-gallery + .main-image,
.widget.public-profile .gallery-column .main-image {
    border-radius: var(--radius-md, 12px) !important;
    overflow: hidden;
    margin-bottom: 4px !important;
    background: var(--bg-card, #141419);
}
.widget.public-profile .main-image .image,
.widget.public-profile .main-image .inner-container {
    border-radius: var(--radius-md, 12px) !important;
    overflow: hidden;
}
.widget.public-profile .main-image img {
    border-radius: var(--radius-md, 12px) !important;
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    cursor: pointer;
    display: block;
}
/* 2026-10-06 (PageSpeed, profile round): a darker pill instead of a backdrop blur - it is in the first frame of an
   agency profile (before profile-v2.js moves it), and every filter there is GPU work before that frame on
   pagespeed.web.dev's software-drawn phone run (as the card tags, 2026-10-05) */
.widget.public-profile .main-image .verified {
    background: rgba(0, 0, 0, 0.72);
    padding: 6px 12px !important;
    border-radius: var(--radius-pill, 999px) !important;
    width: max-content !important;
    left: 12px !important;
    bottom: 12px !important;
    color: #4caf50 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    z-index: 5;
    font-size: 0.75rem;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
/* Replace the K13 starburst PNG with a clean inline check icon */
.widget.public-profile .main-image .verified img,
.widget.public-profile .verified > img,
.widget.public-profile-gallery .verified > img {
    display: none !important;
}
/* 2026-10-14 (owner): the verified mark is the verified badge (an svg in the markup) - no text tick */
.widget.public-profile .main-image .verified::before,
.widget.public-profile .verified::before {
    content: none;
}
/* 2026-10-14 (owner): one verified mark under the photos - the main photo's. The gallery's own line (MyGallery) said
   the same thing a few pixels lower (side by side on a one-photo profile); it stays in the page, hidden, because
   profile-v2.js reads it to draw the hero's badge. (Above .gallery-column .verified:not(.flag)'s !important display.) */
.widget.public-profile .gallery-column .widget.public-profile-gallery .images > .verified:not(.flag) {
    display: none !important;
}
/* 2026-10-14 (owner): "Photos not yet verified" - the grey unverified badge in the verified chip's shape, grey */
.widget.public-profile .gallery-column .unverified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    margin: var(--space-3, 12px) 0 0;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, #a0a0b0);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.2px;
}
.widget.public-profile .gallery-column .unverified > svg {
    width: 16px;
    height: 16px;
    flex: none;
}
.widget.public-profile .verified > svg,
.widget.public-profile-gallery .verified > svg {
    width: 16px;
    height: 16px;
    flex: none;
}
/* The standalone `.verified` ribbon (below main image, in inner-container)
 * — convert from giant starburst PNG + text to a slim pill chip. */
.widget.public-profile .inner-container > .verified,
.widget.public-profile-gallery .images > .verified,
.widget.public-profile .gallery-column .verified:not(.flag) {
    background: rgba(76, 175, 80, 0.12) !important;
    border: 1px solid rgba(76, 175, 80, 0.4) !important;
    border-radius: var(--radius-pill, 999px) !important;
    color: #4caf50 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    width: max-content !important;
    max-width: 100%;
    margin: var(--space-3, 12px) auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    text-align: center;
    justify-content: center;
    text-shadow: none !important;
    text-transform: none;
    letter-spacing: 0.2px;
}
.widget.public-profile .main-image .flags .verified {
    margin-right: 12px !important;
    margin-top: 12px !important;
    background: rgba(29, 78, 216, 0.95) !important;
    padding: 4px 12px !important;
    border-radius: var(--radius-pill, 999px) !important;
    color: #fff !important;
    width: max-content !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
}
.widget.public-profile .main-image .flags .verified .copy {
    transform: none !important;
    margin: 0 0 0 6px !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.widget.public-profile .main-image .flag.featured {
    background: linear-gradient(135deg, var(--gold, #ffd700), var(--gold-dark, #c9a227)) !important;
    color: #000 !important;
    transform: rotate(-45deg) !important;
}
.widget.public-profile .main-image .flag.available-now {
    background: var(--available-now-bg) !important;
    color: #fff !important;
    text-shadow: var(--available-now-text-shadow);
}
.widget.public-profile .main-image .flag.touring-now {
    background: linear-gradient(135deg, var(--secondary, #9c27b0), #6d28d9) !important;
    color: #fff !important;
}

/* Thumbnail grid below hero — uniform spacing + rounded */
.widget.public-profile-gallery .images {
    margin: 4px 0 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px !important;
}
@media (min-width: 480px) { .widget.public-profile-gallery .images { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .widget.public-profile-gallery .images { grid-template-columns: repeat(6, 1fr); } }
.widget.public-profile-gallery .images > a {
    width: 100% !important;
    padding: 0 !important;
    display: block;
    border-radius: var(--radius-sm, 8px) !important;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.widget.public-profile-gallery .images > a:hover {
    transform: translateY(-2px);
    opacity: 1 !important;
}
.widget.public-profile-gallery .images > a .sizer {
    padding: 0 0 100% !important;
}
.widget.public-profile-gallery .images > a picture {
    inset: 0 !important;
    border-radius: var(--radius-sm, 8px) !important;
    overflow: hidden;
}
.widget.public-profile-gallery .images > a picture img {
    object-fit: cover !important;
}
.widget.public-profile-gallery .images .verified {
    grid-column: 1 / -1;
    color: var(--text-secondary, #a0a0b0) !important;
    font-size: 0.8rem !important;
    margin-top: 8px !important;
    background: transparent !important;
}
.widget.public-profile-gallery .images > a .restricted {
    background: rgba(196, 16, 16, 0.9) !important;
    border-radius: 4px !important;
    padding: 4px 6px !important;
}
/* Featured / available / touring chips on each thumbnail */
.widget.public-profile-gallery .flag.available-now {
    background: var(--available-now-bg) !important;
    text-shadow: var(--available-now-text-shadow);
}
.widget.public-profile-gallery .flag.touring-now {
    background: linear-gradient(135deg, var(--secondary, #9c27b0), #6d28d9) !important;
}
.widget.public-profile-gallery .flag.featured {
    background: linear-gradient(135deg, var(--gold, #ffd700), var(--gold-dark, #c9a227)) !important;
    color: #000 !important;
}

/* Videos row inside gallery widget */
.widget.public-profile-gallery .videos {
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    padding-top: var(--space-4, 16px) !important;
    margin: var(--space-4, 16px) 0 0 0 !important;
    gap: 4px;
}
.widget.public-profile-gallery .videos h2,
.widget.public-profile-gallery .videos h3 {
    color: var(--text-primary, #fff) !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
}
.widget.public-profile-gallery .videos a {
    border-radius: var(--radius-sm, 8px) !important;
    overflow: hidden !important;
    background: var(--bg-card, #141419);
}
.widget.public-profile-gallery .videos a:hover {
    opacity: 1 !important;
    transform: translateY(-2px);
}
.widget.public-profile-gallery .videos a .icon {
    background: rgba(0, 0, 0, 0.55) !important;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem !important;
}

/* "View All N photos" overlay — stamped on a "more" sentinel link
 * (added by client JS as 6th visible thumb when total > 6). */
.widget.public-profile-gallery .images > a.pd-view-all {
    position: relative;
}
.widget.public-profile-gallery .images > a.pd-view-all::after {
    content: 'View all ' attr(data-total) ' photos';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 3;
    border-radius: var(--radius-sm, 8px);
    text-align: center;
    padding: 8px;
    line-height: 1.3;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Share row at bottom of gallery — hide the decorative "Squirting Sophie"
 * banner image (K13 stock graphic) and keep just the share icons. */
.widget.public-profile-gallery .share {
    margin-top: var(--space-5, 20px) !important;
    padding: var(--space-4, 16px) 0 !important;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    background: transparent !important;
}
.widget.public-profile-gallery .share .share-image {
    display: none !important;
}
.widget.public-profile-gallery .share a {
    color: var(--text-secondary, #a0a0b0) !important;
}
.widget.public-profile-gallery .share a:hover {
    color: var(--primary-light, #ff5c8d) !important;
    opacity: 1 !important;
}

/* Real-or-Fake voting card — actual K13 markup: `.real-button` (green) +
 * `.fake-button` (red), both inside `.buttons` div, separated by `<span class="or">or</span>`.
 * Plus `.inner` wrapper containing the title + buttons. K13 sets the .inner
 * with white bg via Semantic UI, override that. */
.widget.public-profile .widget.real-or-fake,
.widget.real-or-fake {
    text-align: center;
}
.widget.public-profile .widget.real-or-fake .inner,
.widget.real-or-fake .inner {
    background: transparent !important;
    color: var(--text-primary, #fff) !important;
    padding: 0 !important;
}
.widget.public-profile .widget.real-or-fake h3,
.widget.real-or-fake h3,
.widget.public-profile .widget.real-or-fake h4,
.widget.real-or-fake h4 {
    color: var(--text-primary, #fff) !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1rem !important;
    margin: 0 0 var(--space-3, 12px) 0 !important;
}
.widget.public-profile .widget.real-or-fake .buttons,
.widget.real-or-fake .buttons {
    /* 2026-10-14: not !important - the widget hides the buttons after a vote with jQuery's .hide() (inline
       display: none), which an !important display here overrode: the buttons stayed under "Thank you" */
    display: flex;
    gap: var(--space-3, 12px);
    justify-content: center;
    align-items: center;
    margin: 0 !important;
}
.widget.public-profile .widget.real-or-fake .or,
.widget.real-or-fake .or {
    color: var(--text-muted, #6b6b7a);
    font-size: 0.85rem;
    font-style: italic;
}
.widget.public-profile .widget.real-or-fake .real-button,
.widget.real-or-fake .real-button,
.widget.public-profile .widget.real-or-fake .ui.button.real-button {
    background: rgba(76, 175, 80, 0.15) !important;
    border: 1px solid rgba(76, 175, 80, 0.4) !important;
    color: #4caf50 !important;
    border-radius: var(--radius-md, 12px) !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.widget.public-profile .widget.real-or-fake .real-button:hover,
.widget.real-or-fake .real-button:hover {
    background: rgba(76, 175, 80, 0.25) !important;
    color: #66bb6a !important;
}
.widget.public-profile .widget.real-or-fake .fake-button,
.widget.real-or-fake .fake-button,
.widget.public-profile .widget.real-or-fake .ui.button.fake-button {
    background: rgba(244, 67, 54, 0.15) !important;
    border: 1px solid rgba(244, 67, 54, 0.4) !important;
    color: #f44336 !important;
    border-radius: var(--radius-md, 12px) !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.widget.public-profile .widget.real-or-fake .fake-button:hover,
.widget.real-or-fake .fake-button:hover {
    background: rgba(244, 67, 54, 0.25) !important;
    color: #ff6659 !important;
}
/* Hide the SU loader dimmer in the card so it doesn't bleach white */
.widget.public-profile .widget.real-or-fake .ui.dimmer:not(.active),
.widget.real-or-fake .ui.dimmer:not(.active) {
    background: transparent !important;
    display: none !important;
}

/* Report User button — restyle from cyan teal default to demo gradient */
.widget.public-profile .report,
.widget.public-profile .inner-public-profile .report,
.widget.public-profile a.report,
.widget.public-profile button.report,
.widget.public-profile .ui.button.report {
    background: rgba(244, 67, 54, 0.12) !important;
    border: 1px solid rgba(244, 67, 54, 0.4) !important;
    color: #f44336 !important;
    border-radius: var(--radius-md, 12px) !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    text-align: center !important;
    display: inline-block !important;
    margin-top: var(--space-3, 12px) !important;
    text-decoration: none !important;
}
.widget.public-profile .report:hover {
    background: rgba(244, 67, 54, 0.25) !important;
    color: #ff6659 !important;
}

/* "VERIFIED" rotated text on share-image edge — old K13 decoration */
.widget.public-profile .main-image .flags .verified .copy {
    display: none !important;
}

/* =====================================================================
 * Profile Rates (profile-rates + profile-rates-extras)
 * ===================================================================== */

.widget.public-profile .widget.profile-rates {
    border-top: none !important;
}
.widget.public-profile .widget.profile-rates .row-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.widget.public-profile .widget.profile-rates .row-container .row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center;
    padding: var(--space-3, 12px) var(--space-4, 16px) !important;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm, 8px);
    margin: 0 !important;
    transition: background 0.2s;
}
.widget.public-profile .widget.profile-rates .row-container .row:hover {
    background: rgba(255, 255, 255, 0.05);
}
/* First row contains the column headers — we want them as small caption */
.widget.public-profile .widget.profile-rates .row-container .row:first-child {
    background: transparent !important;
    padding: 0 var(--space-4, 16px) var(--space-2, 8px) !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 0;
}
.widget.public-profile .widget.profile-rates .row-container .row:first-child .column {
    color: var(--text-muted, #6b6b7a) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-body, 'Outfit', sans-serif) !important;
}
.widget.public-profile .widget.profile-rates .row-container .row .column {
    width: auto !important;
    flex: 1;
}
.widget.public-profile .widget.profile-rates .row-container .row .column:first-child {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    color: var(--text-primary, #fff) !important;
    font-weight: 500;
}
.widget.public-profile .widget.profile-rates .row-container .row .column:not(:first-child) {
    text-align: right;
    flex: 0 0 auto !important;
    color: var(--primary-light, #ff5c8d) !important;
    font-weight: 700;
    font-size: 1rem;
}
/* Highlight the most expensive row (set by client JS via .pd-rate-highlight) */
.widget.public-profile .widget.profile-rates .row-container .row.pd-rate-highlight {
    background: rgba(233, 30, 99, 0.08) !important;
    border: 1px solid rgba(233, 30, 99, 0.2);
}

.widget.public-profile .widget.profile-rates-extras .number .value,
.widget.public-profile .widget.profile-rates-extras .number {
    color: var(--primary-light, #ff5c8d) !important;
}
.widget.public-profile .widget.profile-rates-extras .row {
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}

/* =====================================================================
 * Profile Availability — list of days + status
 * ===================================================================== */

.widget.public-profile .widget.profile-availability .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}
.widget.public-profile .widget.profile-availability .row:last-child {
    border-bottom: none;
}
.widget.public-profile .widget.profile-availability .row .column {
    color: var(--text-secondary, #a0a0b0) !important;
    width: auto !important;
    opacity: 1 !important;
}
.widget.public-profile .widget.profile-availability .row .column:first-child {
    color: var(--text-primary, #fff) !important;
    font-weight: 500 !important;
}
/* "Today" row gets gold highlight */
.widget.public-profile .widget.profile-availability .row:first-of-type .column:first-child,
.widget.public-profile .widget.profile-availability .row:first-child .column:first-child {
    color: var(--gold, #ffd700) !important;
    font-weight: 700 !important;
}

/* =====================================================================
 * Profile Contact Me — sticky sidebar contact card
 * ===================================================================== */

.widget.public-profile .widget.profile-contact-me {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: var(--space-5, 20px) !important;
}
.widget.public-profile .widget.profile-contact-me .account {
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    padding-bottom: var(--space-3, 12px) !important;
    margin-bottom: var(--space-4, 16px) !important;
    color: var(--text-primary, #fff) !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1rem !important;
}
/* 2026-10-14 (owner, profile wording batch 1): the "Account: ..." words are gone (the header names the type); the box
   shows only for "Working at {parent}" */
.widget.public-profile .widget.profile-contact-me .account:not(:has(.works-at-line)) {
    display: none !important;
}
/* "Text welcome · Say you found {name} on {brand}." under the contact buttons (it was a notice box at the sidebar's foot) */
.widget.public-profile .widget.profile-contact-me .contact-mention {
    margin: var(--space-3, 12px) 0 0;
    color: var(--text-muted, #6b6b7a);
    font-size: 0.8rem;
    line-height: 1.5;
}
/* "Call or text me" / "Send me an email" buttons → gold gradient */
.widget.public-profile .widget.profile-contact-me .button {
    background: linear-gradient(135deg, var(--gold, #d4af37), var(--gold-light, #f0d060)) !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: var(--radius-md, 12px) !important;
    padding: 14px var(--space-5, 20px) !important;
    font-family: var(--font-body, 'Outfit', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    margin-bottom: var(--space-2, 8px) !important;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(var(--gold-rgb, 212, 175, 55), 0.25);
}
.widget.public-profile .widget.profile-contact-me .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--gold-rgb, 212, 175, 55), 0.4) !important;
    background: linear-gradient(135deg, var(--gold-light, #f0d060), var(--gold, #d4af37)) !important;
}
.widget.public-profile .widget.profile-contact-me .button .icon {
    color: #1a1a2e !important;
    opacity: 1 !important;
}

/* Contact-bar — floating CTA strip rendered as a top-level widget. Keep the
 * original K13 widget CSS in charge of layout (sticky / position / show-on-scroll);
 * we only re-skin the button to match the demo's gold/pink gradient palette. */
.widget.profile-contact-bar .button {
    background: linear-gradient(135deg, var(--gold, #d4af37), var(--gold-light, #f0d060)) !important;
    color: #1a1a2e !important;
    border-radius: var(--radius-pill, 999px) !important;
    padding: 10px 22px !important;
}

/* profile-contact-me-cta — the pink advertiser CTA banner with thumbnail +
 * "Verified" overlay + handwritten "CONTACT ME" art + advertiser name. The
 * widget's own CSS handles its layout; here we just align the gradient with
 * the rest of the page palette and tweak the typography of the name. */
.widget.profile-contact-me-cta {
    margin: var(--space-4, 16px) 0 0 0 !important;
    height: auto !important;
}
.widget.profile-contact-me-cta .pink {
    background: linear-gradient(135deg, var(--gold, #d4af37), var(--gold-light, #f0d060)) !important;
    border-radius: var(--radius-md, 12px);
}
.widget.profile-contact-me-cta .pink .inner {
    right: var(--space-4, 16px) !important;
    color: #fff;
}
.widget.profile-contact-me-cta .pink .inner .name {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-weight: 600 !important;
}

/* Report User widget (`.widget.report-user`, separate widget at page bottom) */
.widget.report-user {
    text-align: center;
    margin: var(--space-4, 16px) 0;
}
.widget.report-user .ui.button.report-user-button,
.widget.report-user .report-user-button,
.widget.report-user button {
    background: rgba(244, 67, 54, 0.12) !important;
    border: 1px solid rgba(244, 67, 54, 0.4) !important;
    color: #f44336 !important;
    border-radius: var(--radius-md, 12px) !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: all 0.2s;
}
.widget.report-user .report-user-button:hover,
.widget.report-user button:hover {
    background: rgba(244, 67, 54, 0.25) !important;
    color: #ff6659 !important;
}
/* 2026-10-14 (owner): the flag before "Report user" (currentColor: the button's gold) */
.widget.report-user .report-user-button .ru-flag {
    width: 17px;
    height: 20px;
    margin-right: 8px;
    vertical-align: -4px;
}
.widget.report-user .ui.modal.report-user-modal {
    background: var(--bg-card, #141419) !important;
    color: var(--text-primary, #fff) !important;
    border-radius: var(--radius-md, 12px) !important;
}

/* =====================================================================
 * Profile Location card — "View my other locations" link + map
 * ===================================================================== */

.widget.public-profile .widget.profile-location .other-locations h2,
.widget.public-profile .widget.profile-location .other-locations h3 {
    color: var(--text-secondary, #a0a0b0) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* =====================================================================
 * Profile Touring Locations — list of touring entries
 * ===================================================================== */

.widget.public-profile .widget.profile-touring-locations .row {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm, 8px);
    padding: var(--space-3, 12px) !important;
    margin: 0 0 var(--space-2, 8px) 0 !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}
.widget.public-profile .widget.profile-touring-locations .row .city {
    color: var(--text-primary, #fff);
    font-weight: 600;
}
.widget.public-profile .widget.profile-touring-locations .row .dates {
    color: var(--gold, #ffd700);
    font-size: 0.85rem;
}

/* Touring schedule TABLE markup (not the .row variant) — K13 uses
 * `<table class="ui compact unstackable inverted table">` whose default
 * Semantic UI theme renders as light-bg + light-text (illegible). Force
 * to the dark card theme. */
.widget.public-profile .widget.profile-touring-locations table,
.widget.profile-touring-locations table.ui.table,
.widget.profile-touring-locations table.ui.inverted.table {
    background: transparent !important;
    color: var(--text-primary, #fff) !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100%;
}
.widget.public-profile .widget.profile-touring-locations thead,
.widget.profile-touring-locations thead {
    background: transparent !important;
}
.widget.public-profile .widget.profile-touring-locations thead th,
.widget.profile-touring-locations thead th {
    background: transparent !important;
    color: var(--text-muted, #6b6b7a) !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-3, 12px) var(--space-3, 12px) !important;
    text-align: left;
}
.widget.public-profile .widget.profile-touring-locations tbody,
.widget.profile-touring-locations tbody {
    background: transparent !important;
}
.widget.public-profile .widget.profile-touring-locations tbody tr,
.widget.profile-touring-locations tbody tr {
    background: transparent !important;
}
.widget.public-profile .widget.profile-touring-locations tbody td,
.widget.profile-touring-locations tbody td {
    background: transparent !important;
    color: var(--text-primary, #fff) !important;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.06)) !important;
    border-bottom: none !important;
    padding: var(--space-3, 12px) var(--space-3, 12px) !important;
    vertical-align: middle;
}
.widget.public-profile .widget.profile-touring-locations tbody td:first-child,
.widget.profile-touring-locations tbody td:first-child {
    font-weight: 500;
}
.widget.public-profile .widget.profile-touring-locations tbody td a,
.widget.profile-touring-locations tbody td a {
    color: var(--primary-light, #ff5c8d) !important;
    text-decoration: none !important;
}
.widget.public-profile .widget.profile-touring-locations tbody td a:hover,
.widget.profile-touring-locations tbody td a:hover {
    color: var(--primary, #e91e63) !important;
    text-decoration: underline !important;
}
.widget.public-profile .widget.profile-touring-locations tbody td .utc-time,
.widget.profile-touring-locations tbody td .utc-time {
    color: var(--gold, #ffd700) !important;
    font-weight: 500;
    background: transparent !important;
    padding: 0 !important;
}

/* =====================================================================
 * Service Buttons (the chips of services offered)
 * ===================================================================== */

.widget.public-profile .widget.service-buttons,
.widget.public-profile .widget.profile-profile + .widget.service-buttons {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: var(--space-3, 12px) 0 0 0 !important;
}
.widget.public-profile .widget.service-buttons .button,
.widget.public-profile .widget.service-buttons a {
    background: rgba(233, 30, 99, 0.1) !important;
    color: var(--primary-light, #ff5c8d) !important;
    border: 1px solid rgba(233, 30, 99, 0.3) !important;
    border-radius: var(--radius-pill, 999px) !important;
    padding: 6px 14px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    margin: 0 6px 6px 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* =====================================================================
 * Lightbox (gallery modal) — overlays photo at full size
 * Built as `.pd-lightbox` independent of the existing K13 .gallery-modal
 * so we don't clash with any Semantic UI / Swiper code.
 * ===================================================================== */

.pd-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.pd-lightbox.is-open {
    display: flex;
}
.pd-lightbox-backdrop {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
}
.pd-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.pd-lightbox-close:hover {
    background: var(--primary, #e91e63);
}
.pd-lightbox-stage {
    position: relative;
    z-index: 2;
    max-width: 92vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-lightbox-img {
    max-width: 92vw;
    max-height: 75vh;
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.pd-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.pd-lightbox-nav:hover {
    background: var(--primary, #e91e63);
}
.pd-lightbox-prev { left: 20px; }
.pd-lightbox-next { right: 20px; }
.pd-lightbox-counter {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    margin-top: 12px;
    z-index: 2;
}
.pd-lightbox-thumbs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    overflow-x: auto;
    max-width: 90vw;
    padding: 8px 0;
    z-index: 2;
}
.pd-lightbox-thumbs::-webkit-scrollbar { height: 6px; }
.pd-lightbox-thumbs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
.pd-lightbox-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    opacity: 0.5;
    border: 2px solid transparent;
    transition: all 0.2s;
    flex-shrink: 0;
}
.pd-lightbox-thumb:hover { opacity: 0.8; }
.pd-lightbox-thumb.is-active {
    opacity: 1;
    border-color: var(--primary, #e91e63);
}
@media (max-width: 600px) {
    .pd-lightbox-prev { left: 8px; width: 44px; height: 44px; font-size: 1.1rem; }
    .pd-lightbox-next { right: 8px; width: 44px; height: 44px; font-size: 1.1rem; }
    .pd-lightbox-thumb { width: 50px; height: 50px; }
}

/* =====================================================================
 * Toast notifications (used by lightbox/contact reveal/share/favourite)
 * ===================================================================== */

.pd-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    padding: 12px 22px;
    background: var(--bg-card, #141419);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-md, 12px);
    color: #fff;
    font-size: 0.9rem;
    z-index: 10001;
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    max-width: calc(100vw - 32px);
}
.pd-toast.is-show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.pd-toast.is-success {
    border-color: rgba(76, 175, 80, 0.5);
}
.pd-toast.is-error {
    border-color: rgba(244, 67, 54, 0.5);
}
.pd-toast::before {
    content: '\2713';
    color: #4caf50;
    font-weight: bold;
}
.pd-toast.is-error::before {
    content: '\26A0';
    color: #f44336;
}

/* =====================================================================
 * Profile Detail responsive — collapse sidebar on mobile
 * ===================================================================== */

@media (max-width: 1023px) {
    .widget.public-profile .widget.profile-contact-me {
        position: static !important;
    }
}
@media (max-width: 600px) {
    .widget.public-profile .inner-public-profile {
        padding: 12px !important;
    }
    .widget.public-profile .widget.profile-rates .row-container .row {
        padding: 10px 12px !important;
    }
}

/* =====================================================================
 * Magnific Popup theme override — K13 uses Magnific Popup as gallery
 * lightbox (configured in public-profile-gallery.js with mainClass
 * "public-profile"). Restyle the popup chrome to match the demo dark
 * lightbox aesthetic.
 * ===================================================================== */

.mfp-bg.public-profile,
.mfp-bg {
    background: rgba(0, 0, 0, 0.95) !important;
    opacity: 1 !important;
    z-index: 9998 !important;
}
.mfp-wrap.public-profile,
.mfp-wrap {
    z-index: 9999 !important;
}
.mfp-img {
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-height: 80vh !important;
}
/* Counter */
.mfp-counter {
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: var(--font-body, 'Outfit', sans-serif) !important;
    font-size: 0.9rem !important;
    right: 50% !important;
    transform: translateX(50%);
    top: auto !important;
    bottom: 20px !important;
}
/* Title (image alt) */
.mfp-title {
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: var(--font-body, 'Outfit', sans-serif) !important;
}
/* Close button */
.mfp-close {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 1.6rem !important;
    line-height: 44px !important;
    /* 2026-10-14 (owner: the photo viewer's close button was crooked): magnific-popup.css gives the image and iframe
       holders' close button text-align: right and padding-right: 6px (written for a full-width bar) - in this 44px
       circle that put the cross 9.5px right of centre */
    text-align: center !important;
    padding: 0 !important;
    opacity: 1 !important;
    transition: background 0.2s;
    top: 20px !important;
    right: 24px !important;
}
.mfp-close:hover {
    background: var(--primary, #e91e63) !important;
}
/* Arrow buttons (K13 customizes them with class .gallery-arrow) */
.mfp-gallery.public-profile .gallery-arrow,
.mfp-gallery .gallery-arrow {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    width: 56px !important;
    height: 56px !important;
    color: #fff !important;
    border: none !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.mfp-gallery.public-profile .gallery-arrow:hover,
.mfp-gallery .gallery-arrow:hover {
    background: var(--primary, #e91e63) !important;
}
.mfp-gallery.public-profile .gallery-arrow .icon,
.mfp-gallery .gallery-arrow .icon {
    font-size: 1.6rem !important;
    color: #fff !important;
}
.mfp-gallery.public-profile .gallery-arrow-left,
.mfp-gallery .gallery-arrow-left {
    left: 20px !important;
}
.mfp-gallery.public-profile .gallery-arrow-right,
.mfp-gallery .gallery-arrow-right {
    right: 20px !important;
}
@media (max-width: 600px) {
    .mfp-gallery.public-profile .gallery-arrow,
    .mfp-gallery .gallery-arrow {
        width: 44px !important;
        height: 44px !important;
    }
    .mfp-gallery.public-profile .gallery-arrow-left,
    .mfp-gallery .gallery-arrow-left { left: 8px !important; }
    .mfp-gallery.public-profile .gallery-arrow-right,
    .mfp-gallery .gallery-arrow-right { right: 8px !important; }
}

/* End Profile Detail Page section */
/* === profile-pages-only: end === */

/* =========================================================================
   Phase 3D — VIP Favourite Button
   Renders the top-right heart on every card. Anonymous user → click goes to
   /vip/login; logged-in consumer → AJAX toggles via /api/vip/favourite.
   The .privacy-exempt class keeps the heart visible when the global privacy
   blur engages (cards blur, heart stays sharp like the city tile icons do).
   ========================================================================= */
:root {
    --vip-gradient: linear-gradient(135deg, var(--gold-ffd700, #ffd700) 0%, var(--gold-d4a017, #d4a017) 100%);
    --vip-pink: #ff3a8a;
    --vip-pink-dark: #e02675;
    --fav-bg: rgba(0, 0, 0, 0.55);
    --fav-bg-hover: rgba(0, 0, 0, 0.75);

    /* Text inputs. The old treatment was #222 with a rgba(255,255,255,0.1) border, which works
       on the page background but not inside the checkout's payment card: that card is #202020,
       so a #222 field is 1.02:1 against it - the field and the card are the same colour, and the
       only thing separating them is a border that is itself about 1.35:1. Hence "you cannot see
       that it is an input".
       --input-bg is dark enough to read as a well on any of our surfaces, and --input-border is
       chosen to clear 3:1 against the payment card, which is the lightest surface an input sits
       on. --input-placeholder replaces #666, which was 2.77:1 on #222 and failed 4.5:1. */
    --input-bg: #101016;
    --input-border: #7a7a86;
    --input-placeholder: var(--text-secondary);
    --input-focus-border: var(--gold);
    --input-focus-ring: rgba(var(--gold-rgb, 212, 175, 55), 0.25);
}

/* Slide / popular-escort card root must be positioned for absolute heart */
.slide,
.widget.popular-escort,
.widget.escort-listing-vertical,
.featured-escorts-listing .slide,
.popular-escorts-listing .widget {
    position: relative;
}

.fav-btn-wrap {
    /* inline style on the wrap supplies position/top/right/z-index already.
       This rule provides the safety net for any Phase 3D2 markup that omits
       inline styles. */
    pointer-events: auto;
}

.fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--fav-bg);
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
}
.fav-btn:hover,
.fav-btn:focus-visible {
    background: var(--fav-bg-hover);
    transform: scale(1.08);
    outline: none;
}
.fav-btn.is-active {
    color: var(--vip-pink);
    background: rgba(255, 58, 138, 0.18);
}
.fav-btn.is-active:hover,
.fav-btn.is-active:focus-visible {
    background: rgba(255, 58, 138, 0.28);
    color: var(--vip-pink-dark);
}
.fav-btn[disabled],
.fav-btn[aria-busy="true"] {
    opacity: 0.6;
    cursor: progress;
}

/* Touch targets: at least 44x44 on mobile for accessibility */
@media (max-width: 600px) {
    .fav-btn { width: 44px !important; height: 44px !important; }
    .fav-btn-wrap { top: 8px !important; right: 8px !important; }
}

/* Profile detail hero — the heart sits inside the hero, larger size */
.public-profile-hero .fav-btn,
.profile-hero .fav-btn {
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.65);
}

/* End Phase 3D Favourite Button */

/* =========================================================================
   Phase 3E — VIP Header CTA
   Shown in the .top row of the site header. Anonymous → gold link, VIP user
   → crown chip linking to /vip/account.
   ========================================================================= */
.site-vip-cta,
.site-vip-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 0 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    background: var(--vip-gradient, linear-gradient(135deg, var(--gold-ffd700, #ffd700) 0%, var(--gold-d4a017, #d4a017) 100%));
    color: #14110a;
    border: 1px solid rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.45);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.site-vip-cta:hover,
.site-vip-chip:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    color: #14110a;
}
.site-vip-cta .site-vip-crown,
.site-vip-chip .site-vip-crown {
    font-size: 14px;
    line-height: 1;
}
.site-vip-chip.is-vip {
    background: linear-gradient(135deg, var(--gold-ffd700, #ffd700) 0%, var(--gold-ff9500, #ff9500) 100%);
    box-shadow: 0 0 8px rgba(var(--gold-ffc800-rgb, 255, 200, 0), 0.45);
}

/* On mobile: hide the label, keep the crown */
@media (max-width: 600px) {
    .site-vip-cta .site-vip-label,
    .site-vip-chip .site-vip-label {
        display: none;
    }
    .site-vip-cta,
    .site-vip-chip {
        padding: 6px 10px;
        margin: 0 6px;
    }
}

/* K13 site header (.header-new .top) integration — that bar is a 40px utility row
   where login / logout / account / cart sit absolute at fixed right offsets.
   Without scoping, the VIP CTA is a normally-flowed flex item and `justify-content:
   space-between` pushes it to the far right, directly under the absolutely-positioned
   login pill. Position the chip absolutely on the LEFT side instead (after
   .culture-container) so it has its own slot. Compact padding/font fit the 40px bar. */
.header-new .top .site-vip-cta,
.header-new .top .site-vip-chip {
    position: absolute;
    /* centred by top/bottom/margin, not by a transform: button-library.css sets transform:none on hover with two ID
       points, so a translateY(-50%) centre dropped the pill 8.5px under the pointer, off it and back, on and on
       (owner, 2026-10-03; measured under a real mouse) */
    top: 0;
    bottom: 0;
    height: fit-content;
    left: 90px;
    margin: auto 0;
    padding: 3px 10px;
    font-size: 10px;
    line-height: 1;
    border-radius: 999px;
    z-index: 2;
}
.header-new .top .site-vip-cta .site-vip-crown,
.header-new .top .site-vip-chip .site-vip-crown {
    font-size: 11px;
}
@media (max-width: 768px) {
    /* On narrow screens the culture-container is hidden, so we can park the chip
       at the left edge. Hide the label too — just the crown is enough. */
    .header-new .top .site-vip-cta,
    .header-new .top .site-vip-chip {
        left: 12px;
        padding: 3px 8px;
    }
    .header-new .top .site-vip-cta .site-vip-label,
    .header-new .top .site-vip-chip .site-vip-label {
        display: none;
    }
}

/* End Phase 3E Header CTA */

/* =========================================================================
   Phase 3F — Contact Reveal Button (VIP gating)
   Replaces a phone/email anchor with a masked span + Show button when the
   visitor isn't a VIP. Click → JS calls /api/vip/reveal; on success the
   masked text is swapped with the real value.
   ========================================================================= */
.vip-masked {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #aaa);
}

.vip-reveal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 6px 14px;
    border: 1px solid rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.55);
    background: var(--vip-gradient, linear-gradient(135deg, var(--gold-ffd700, #ffd700) 0%, var(--gold-d4a017, #d4a017) 100%));
    color: #14110a;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.vip-reveal-btn:hover,
.vip-reveal-btn:focus-visible {
    filter: brightness(1.07);
    transform: translateY(-1px);
    outline: none;
}
.vip-reveal-btn[disabled],
.vip-reveal-btn[aria-busy="true"] {
    opacity: 0.6;
    cursor: progress;
}
.vip-reveal-btn .vip-lock {
    font-size: 12px;
    line-height: 1;
}

/* End Phase 3F Reveal Button */

/* =========================================================================
   Phase 3G — Refine overlay VIP advanced filter lock CTA
   Appended at the bottom of the refine-form for non-VIP visitors. The fields
   listed are aspirational placeholders — clicking the CTA links to plans.
   ========================================================================= */
.vip-advanced-locked {
    border: 1px dashed rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.45);
    border-radius: 14px;
    padding: 14px 18px;
    margin: 16px 0;
    background: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.05);
    position: relative;
}
.vip-advanced-locked .vip-advanced-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--gold, #ffd700);
    font-size: 14px;
    margin-bottom: 6px;
}
.vip-advanced-locked .vip-lock {
    font-size: 14px;
    line-height: 1;
}
.vip-advanced-locked .vip-advanced-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px 16px;
    color: var(--text-secondary, #a0a0b0);
    font-size: 13px;
    pointer-events: none;
    user-select: none;
    opacity: 0.7;
}
.vip-advanced-locked .vip-advanced-list li::before {
    content: '\2022';
    color: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.45);
    margin-right: 6px;
}
.vip-advanced-locked .vip-advanced-cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--vip-gradient, linear-gradient(135deg, var(--gold-ffd700, #ffd700) 0%, var(--gold-d4a017, #d4a017) 100%));
    color: #14110a;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.vip-advanced-locked .vip-advanced-cta:hover,
.vip-advanced-locked .vip-advanced-cta:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: #14110a;
    outline: none;
}

/* End Phase 3G Refine Lock CTA */

/* ============================================================
   Phase 5h v8l — lazyload broken-image suppression
   ------------------------------------------------------------
   Profile / search-result / homepage galleries emit
   <img class="lazyload" data-src="..."> with no src. While
   lazysizes works through its queue (loadMode=3, throttleDelay
   125ms; ~5–10s for 30 thumbs), browsers paint each as the
   broken-image icon + alt text. Hide them entirely until
   lazysizes flips the class to `lazyloaded`, at which point
   real src is in place and the image is safe to show.

   Pairs with /custom/scripts/lazyload-placeholder.js which
   injects a 1×1 transparent SVG data URI as src so other
   tooling (analytics, page checkers) doesn't see literal
   empty src either. SEO unaffected — alt text stays in HTML.
   ============================================================ */
img.lazyload:not([src]),
img.lazyload[src=""] {
    visibility: hidden;
}
img.lazyload.lazyloaded {
    visibility: visible;
}
/* End Phase 5h v8l lazyload broken-image suppression */

/* ============================================================
   Phase 5h v8r — Pagination widget dark-theme contrast fix.
   ------------------------------------------------------------
   The .widget.pagination component (used on city list, search
   results and homepage list pagers) shipped with `color: #fff`
   on its <a> tags — but the global anchor rule earlier in this
   file paints all <a> as --primary-light (#ff5c8d). With the
   widget's purple background (#e61dea) the result was pink
   text on purple-pink bg, almost unreadable.

   Override here so:
     • Previous:  --bg-elevated dark bg + white text; disabled
                  state goes to --bg-card + muted grey instead
                  of opacity:0.5 (which kept the pink text
                  half-visible and ambiguous).
     • Next:      site primary --primary (#e91e63) + white text;
                  hover lifts to --primary-light.
     • Page block: --bg-card + white "PAGE" / "OF N" labels.
     • Page input: dark bg + white text + 1px border so the
                   editable field is visually distinct.
   All scoped to .widget.pagination so the rule never escapes
   into other anchors.
   ============================================================ */
.widget.pagination a,
.widget.pagination a:link,
.widget.pagination a:visited,
.widget.pagination a:hover,
.widget.pagination a:focus,
.widget.pagination a:active {
    color: #ffffff !important;
    text-decoration: none;
}

.widget.pagination a.prev {
    background-color: var(--bg-elevated, #1a1a22) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.widget.pagination a.prev:hover:not(.disabled) {
    background-color: rgba(255, 255, 255, 0.08) !important;
}
.widget.pagination a.prev.disabled,
.widget.pagination .inner a.disabled {
    background-color: var(--bg-card, #141419) !important;
    color: var(--text-muted, #606070) !important;
    border-color: rgba(255, 255, 255, 0.06);
    opacity: 1 !important;
    cursor: not-allowed;
}

.widget.pagination a.next {
    background-color: var(--primary, #e91e63) !important;
    color: #ffffff !important;
}
.widget.pagination a.next:hover:not(.disabled) {
    background-color: var(--primary-light, #ff5c8d) !important;
}

.widget.pagination .block {
    background-color: var(--bg-card, #141419) !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.widget.pagination .ui.form input,
.widget.pagination .ui.form input:focus,
.widget.pagination input[name="pageNumber"] {
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
}
.widget.pagination .ui.form input:focus,
.widget.pagination input[name="pageNumber"]:focus {
    border-color: var(--primary, #e91e63) !important;
    outline: none;
}
/* End Phase 5h v8r pagination dark-theme contrast */

/* ============================================================
   Numbered page links (2026-10-15)
   ------------------------------------------------------------
   The row under the Previous / Page [n] of N / Next bar:
   1 ... 4 5 [6] 7 8 ... 143. The bar's own `.widget.pagination a`
   rule (80px wide, uppercase, purple) is undone here for the
   number links; the current page is a span in --primary. Pages
   two away from the current one (.far) drop out on a phone so
   the row stays on one line.
   ============================================================ */
.widget.pagination .page-numbers {
    margin: 14px auto 0;
    padding: 0 10px;
    max-width: 640px;
}
.widget.pagination .page-numbers ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.widget.pagination .page-numbers li {
    margin: 0;
    padding: 0;
}
.widget.pagination .page-numbers a,
.widget.pagination .page-numbers .current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
/* The same pair the bar's buttons get from button-library.css: page links in the
   dark-gold "second action" colours of Previous, the current page in the gold of
   Next. The colour needs !important to beat `.widget.pagination a { color:#fff
   !important }` above. */
.widget.pagination .page-numbers a {
    background-color: var(--gold-2e2918, #2e2918);
    border: 1px solid var(--gold-54482a, #54482a);
    color: var(--gold-light, #f0d060) !important;
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease;
}
.widget.pagination .page-numbers a:hover,
.widget.pagination .page-numbers a:focus-visible {
    border-color: var(--gold, #d4af37);
    background-color: var(--gold-54482a, #54482a);
}
.widget.pagination .page-numbers .current {
    background-color: var(--gold, #d4af37);
    border: 1px solid var(--gold, #d4af37);
    color: #111111;
    font-weight: 600;
}
.widget.pagination .page-numbers .gap {
    color: var(--text-muted, #8a8a99);
    padding: 0 2px;
    user-select: none;
}
@media (max-width: 480px) {
    .widget.pagination .page-numbers li.far {
        display: none;
    }
    .widget.pagination .page-numbers a,
    .widget.pagination .page-numbers .current {
        min-width: 44px;
        height: 44px;
    }
}
/* End numbered page links */

/* Phase 5h v8x — Directory page breadcrumb + Found-N-providers count
   Injected by /custom/scripts/directory-breadcrumb-count.js on
   /directory/{state}/{city}/{postcode}/{service}/{classification} pages. */

.directory-breadcrumb {
    margin: 8px 0 16px;
    padding: 0;
}
.directory-breadcrumb .breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    line-height: 1.4;
    align-items: center;
}
.directory-breadcrumb .breadcrumb-list li {
    margin: 0;
    padding: 0;
}
/* 2026-10-04 (PageSpeed, profile round): on a phone mobile-safe.css lifts every "article li" to 14px / 1.5, but it is
   loaded last, on purpose, after the page is on screen - the breadcrumb was drawn at 13px on one line, then grew to two
   lines and pushed the profile down 31px. The same values here, from the first paint. */
@media (max-width: 768px) {
    article .directory-breadcrumb .breadcrumb-list li {
        font-size: max(14px, 0.875rem);
        line-height: 1.5;
    }
}
/* 2026-10-04 (PageSpeed, profile round): the advertiser profile widget holds the main photo, the page's largest paint.
   It shows as soon as its own files are in (main.js loads them first) instead of after the .widget fade - a 0.5 s
   delay and a 0.3 s fade, which Chrome counted to the end. As .widget.immediate does in main.css. */
.widget.public-profile {
    transition: none;
}
/* ... and not before profile-v2.js has built the hero above the photos (it adds .pv2-ready when it has run): shown on
   .loaded alone, a frame was painted without the hero and the hero then pushed the page down (CLS 0.19, 2026-10-04) */
.widget.public-profile.loaded:not(.pv2-ready) {
    opacity: 0;
}
/* ... and shown as soon as the hero is built (2026-10-04, phone round): a profile page applies the widget's stylesheets
   from <head> and runs profile-v2.js ahead of main.js (_MasterStyles), so .pv2-ready can come before main.js's
   .loaded - the main photo waited 1.3 s for main.js on a phone. The widget's other files still load as before. */
.widget.public-profile.pv2-ready {
    opacity: 1;
}
/* 2026-10-14 (owner, the listing demo): the trail, the h1 and the "Found" count take the scheme colour (they were pink
   and magenta, the colour another directory's headings have) */
.directory-breadcrumb .breadcrumb-list a {
    color: var(--gold, #d4af37) !important;
    text-decoration: none;
    transition: color .15s;
}
.directory-breadcrumb .breadcrumb-list a:hover,
.directory-breadcrumb .breadcrumb-list a:focus {
    color: var(--gold-light, #f0d060) !important;
    text-decoration: underline;
}
.directory-breadcrumb .breadcrumb-list .current {
    color: #ffffff;
    font-weight: 500;
}
.directory-breadcrumb .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.35);
    user-select: none;
}

/* "Found 1,296 providers" line, sits above the result rows */
.directory-found-count {
    margin: 18px 0 12px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}
.directory-found-count strong {
    color: var(--gold, #d4af37);
    font-weight: 700;
    margin: 0 2px;
}
/* 2026-09-20 — the same breadcrumb on an advertiser's profile page, rendered server-side by
   ProfileBreadcrumbRules and carrying both classes, so everything above applies and only the
   spacing differs: it sits inside the profile widget's .wrapper, above .inner-public-profile,
   where that 8px top margin would collide with the widget's own padding. */
.directory-breadcrumb.profile-breadcrumb {
    margin: 0 0 14px;
    padding-top: 4px;
}
/* End Phase 5h v8x directory breadcrumb + count */

/* Phase 5h v8ac — fix homepage city cards (and other clickables) being
   "unclickable". Root cause: `.widget.search-overlay` is a fixed full-viewport
   layer at z-index 99999. When inactive its source CSS sets visibility:hidden
   + opacity:0, but due to a transition-quirk (transition: all .3s ease running
   from initial visible → hidden) computed visibility ends up `visible`, AND it
   keeps `pointer-events: auto`, so it eats every mouse click site-wide.

   Belt-and-braces: force pointer-events:none whenever the overlay isn't
   actively shown (i.e. body lacks `.search-overlay-visible`). Same fix for
   `.widget.refine-overlay` which has identical structure.
   `body.search-overlay-visible` / `body.refine-overlay-visible` re-enables
   pointer events when the overlay is intentionally opened. */
.widget.search-overlay,
.widget.refine-overlay,
.refine-overlay {
    pointer-events: none;
}
body.search-overlay-visible .widget.search-overlay,
body.refine-overlay-visible .widget.refine-overlay,
body.refine-overlay-visible .refine-overlay {
    pointer-events: auto;
}
/* End Phase 5h v8ac search-overlay click-eating fix */

/* === Phase 5h v8ae — External-ad button styles ===
 * Used by /custom/scripts/external-ads-loader.js to skin admin-managed
 * external links inside .button-container--externals. The loader emits
 * `<a class="ui button btn-ad-{token} [transparent]">…</a>` so each style
 * inherits Semantic UI's button base (spacing/typography/hover transition)
 * and only the brand-specific surface comes from these rules.
 *
 * Tokens (whitelisted server-side in AdminContentAdsController.AllowedStyles
 * and ExternalAdsController.NormalizeStyle):
 *   primary   — solid brand pink
 *   secondary — solid teal/cyan (#09a9ac, matches the refine overlay)
 *   outline   — transparent + white border (legacy "Live Cams" look)
 *   gold      — gold gradient, VIP/premium tone
 *   danger    — solid red, attention-grabber
 *   dark      — neutral charcoal
 *
 * !important on color/bg defends against Semantic UI's default
 * `.ui.button` / `.ui.button.transparent` selectors which would otherwise
 * win on cascade. */
/* ★★ 2026-09-28 (owner: "fix the ad styles"): NONE OF THESE STYLES HAD EVER SHOWN. theme-overrides.css paints every
 * `.ui.button` with `background-color:#333; background-image:none; color:#ccc; border-radius:8px; box-shadow:none;
 * text-shadow:none`, all !important, at (0,2,0) - the same specificity these rules had, and it loads later, so it won
 * every property: measured on /escorts/nsw/sydney/, btn-ad-primary and btn-ad-gold both drew #333 with #ccc text. Its
 * :hover/:focus/:active (0,3,0) repaint #444/#3a3a3a on top.
 *
 * So every selector here is `html body .button-container--externals a.ui.button.btn-ad-X` (0,4,3), and its
 * :hover/:focus/:active (0,5,3) - above theme-overrides' base AND state rules, and still BELOW the home page's own
 * `html body .widget.result-listing.homepage-buttons .button-container--externals a.ui.button` (0,6,3): the home page's
 * two buttons keep their one uniform look by the owner's design (listing-card.css, rule 7), whatever style an ad has.
 * The shadows carry !important now for the same reason (theme-overrides sets box-shadow:none !important).
 * The admin's ad preview draws with this file, so it shows the result as the site does. */
html body .button-container--externals a.ui.button.btn-ad-primary,
html body .button-container--externals a.ui.button.btn-ad-secondary,
html body .button-container--externals a.ui.button.btn-ad-gold,
html body .button-container--externals a.ui.button.btn-ad-danger,
html body .button-container--externals a.ui.button.btn-ad-dark {
    border-radius: var(--radius-pill, 50px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
html body .button-container--externals a.ui.button.btn-ad-primary:hover,
html body .button-container--externals a.ui.button.btn-ad-secondary:hover,
html body .button-container--externals a.ui.button.btn-ad-gold:hover,
html body .button-container--externals a.ui.button.btn-ad-danger:hover,
html body .button-container--externals a.ui.button.btn-ad-dark:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/* primary — brand pink */
html body .button-container--externals a.ui.button.btn-ad-primary,
html body .button-container--externals a.ui.button.btn-ad-primary:hover,
html body .button-container--externals a.ui.button.btn-ad-primary:focus,
html body .button-container--externals a.ui.button.btn-ad-primary:active {
    background: var(--primary, #e91e63) !important;
    color: #fff !important;
    border: 1px solid var(--primary, #e91e63) !important;
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.25) !important;
}

/* secondary — teal/cyan (matches the existing refine-overlay #09a9ac) */
html body .button-container--externals a.ui.button.btn-ad-secondary,
html body .button-container--externals a.ui.button.btn-ad-secondary:hover,
html body .button-container--externals a.ui.button.btn-ad-secondary:focus,
html body .button-container--externals a.ui.button.btn-ad-secondary:active {
    background: #09a9ac !important;
    color: #fff !important;
    border: 1px solid #09a9ac !important;
    box-shadow: 0 4px 12px rgba(9, 169, 172, 0.25) !important;
}

/* outline — legacy look: transparent with a visible white border (the loader also adds .transparent) */
html body .button-container--externals a.ui.button.btn-ad-outline,
html body .button-container--externals a.ui.button.btn-ad-outline:focus,
html body .button-container--externals a.ui.button.btn-ad-outline:active {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: var(--radius-pill, 50px) !important;
    box-shadow: none !important;
}
html body .button-container--externals a.ui.button.btn-ad-outline:hover {
    border-color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

/* gold — VIP / premium */
html body .button-container--externals a.ui.button.btn-ad-gold,
html body .button-container--externals a.ui.button.btn-ad-gold:hover,
html body .button-container--externals a.ui.button.btn-ad-gold:focus,
html body .button-container--externals a.ui.button.btn-ad-gold:active {
    background: linear-gradient(135deg, var(--gold, #ffd700) 0%, var(--gold-dark, #c9a227) 100%) !important;
    color: #1a1a22 !important;
    border: 1px solid var(--gold-dark, #c9a227) !important;
    box-shadow: 0 4px 12px rgba(var(--gold-dark-rgb, 201, 162, 39), 0.35) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* danger — solid red */
html body .button-container--externals a.ui.button.btn-ad-danger,
html body .button-container--externals a.ui.button.btn-ad-danger:hover,
html body .button-container--externals a.ui.button.btn-ad-danger:focus,
html body .button-container--externals a.ui.button.btn-ad-danger:active {
    background: var(--danger, #f44336) !important;
    color: #fff !important;
    border: 1px solid var(--danger, #f44336) !important;
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.25) !important;
}

/* dark — subtle neutral */
html body .button-container--externals a.ui.button.btn-ad-dark,
html body .button-container--externals a.ui.button.btn-ad-dark:hover,
html body .button-container--externals a.ui.button.btn-ad-dark:focus,
html body .button-container--externals a.ui.button.btn-ad-dark:active {
    background: #1a1a22 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
/* End Phase 5h v8ae external-ad button styles */

/* =========================================================================
 * Phase 5h v8aj — VIP CTA contrast fix in the .top strip
 *
 * The .site-vip-cta / .site-vip-chip pill (gold gradient pill in the
 * header's .top strip with crown emoji + "Become a VIP" / "VIP" label)
 * was rendering with PINK text instead of the intended dark-on-gold.
 *
 * Cause: there's a global cascade rule
 *   body a:not([class*="ui "]):not([class*="ui-"]) { color: var(--primary-light) }
 * (specificity 0,2,2) that wins over the chip's
 *   .site-vip-cta, .site-vip-chip { color: #14110a }
 * (specificity 0,1,0). Pink is bright and barely readable on gold.
 *
 * Fix: bump the chip color to !important so the cascade can't override.
 * Same for crown / label children to defend against any inherited
 * link styling. Polish the hover with a small scale-up and brightness
 * bump for clearer tactility.
 * ========================================================================= */
.site-vip-cta,
.site-vip-cta:hover,
.site-vip-cta:focus,
.site-vip-cta:active,
.site-vip-chip,
.site-vip-chip:hover,
.site-vip-chip:focus,
.site-vip-chip:active {
    color: #14110a !important;
}
.site-vip-cta .site-vip-label,
.site-vip-cta .site-vip-crown,
.site-vip-chip .site-vip-label,
.site-vip-chip .site-vip-crown {
    color: inherit !important;
}

/* Small visual upgrade: hover brings filter brightness +10% AND a 4%
 * scale, plus a tighter gold-glow shadow. Provides clearer tactile
 * feedback without changing the gold-on-dark identity. */
.site-vip-cta:hover,
.site-vip-chip:hover {
    filter: brightness(1.10);
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 4px 14px rgba(var(--gold-ffc800-rgb, 255, 200, 0), 0.40);
}

/* The .header-new .top scoping rule already absolute-positions the chip;
 * keep that as-is but ensure transition covers transform + box-shadow now
 * that we animate both on hover. */
.header-new .top .site-vip-cta,
.header-new .top .site-vip-chip {
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.header-new .top .site-vip-cta:hover,
.header-new .top .site-vip-chip:hover {
    /* In the .top strip the chip is `transform: translateY(-50%)` for
     * vertical centering. Override with the centering transform AND the
     * hover scale combined so the chip pops up a touch and grows 4%. */
    transform: translateY(-50%) translateY(-1px) scale(1.04);
}
/* End Phase 5h v8aj VIP CTA contrast fix */

/* 2026-10-03 (owner: the "Become a VIP" pill keeps jumping under the mouse). Hover moved the 17px pill up 1px and
   grew it 4% about its centre: its foot rose ~0.66px, so a pointer resting on the lower edge was no longer over it,
   the hover ended, the pill came back under the pointer - and again, every 0.15s transition. Hover now changes only
   light (the brightness and glow above), never the box. The strip's pill is centred without a transform (Phase 3E
   above): this rule's translateY(-50%) on hover lost to button-library.css's transform:none and the pill still jumped. */
.site-vip-cta:hover,
.site-vip-chip:hover {
    transform: none;
}

/* =====================================================================
 * 2026-10-02 (owner): an escort listed under an agency / establishment.
 *   - the contact card's account line: "Account: Agency" then "Working at {parent}" (link);
 *   - under her photos and videos: "Also working at {parent}", the other escorts there, in the
 *     parent page's "Our escorts" cards.
 * The "Our escorts" cards were never seen on a live page (every list was empty) and still carried
 * the light theme (#f0f0f0 tile, #222 name) from our-escorts.css; they get the dark card here.
 * ===================================================================== */
.widget.public-profile .widget.profile-contact-me .account .works-at-line {
    margin-top: 6px;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 0.9rem;
    color: var(--text-secondary, #a0a0b0);
}
.widget.public-profile .widget.profile-contact-me .account .works-at-line strong {
    color: var(--text-secondary, #a0a0b0);
    font-weight: 500;
}
.widget.public-profile .widget.profile-contact-me .account .works-at-line a,
.widget.public-profile .widget.our-escorts.also-working-at h2 a,
.widget.public-profile .widget.our-escorts.also-working-at h3 a {
    color: var(--gold-light, #f0d060) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(var(--gold-rgb, 212, 175, 55), 0.45);
    text-underline-offset: 3px;
}
.widget.public-profile .widget.profile-contact-me .account .works-at-line a:hover,
.widget.public-profile .widget.our-escorts.also-working-at h2 a:hover,
.widget.public-profile .widget.our-escorts.also-working-at h3 a:hover {
    text-decoration-color: currentColor;
}
/* 2026-10-03 (SEO): two titles in the profile's gallery column are divs, not headings - the column is written before
   the header's h1. Each keeps the look its heading had (measured equal, h2 / h3 for div, on the live pages):
   "Also working at {agency}" (_OurEscorts: the card rule above, plus the heading rule's line-height 1.1), and the
   gallery labels "More photos" (_MyGallery) / "Private Gallery" (private-gallery.js) - as headings the site's heading
   rules (white display font, weight 300) won over their own .pg-title rule, and that is what a visitor sees. */
.widget.public-profile .widget.our-escorts .our-escorts-title {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    color: var(--text-primary, #fff) !important;
    font-size: 1.1rem !important;
    line-height: 1.1;
    margin: 0 0 var(--space-4, 16px) 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    padding-bottom: var(--space-3, 12px) !important;
}
.widget.public-profile .widget.our-escorts.also-working-at .our-escorts-title a {
    color: var(--gold-light, #f0d060) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(var(--gold-rgb, 212, 175, 55), 0.45);
    text-underline-offset: 3px;
}
.widget.public-profile .widget.our-escorts.also-working-at .our-escorts-title a:hover {
    text-decoration-color: currentColor;
}
body div.pg-title {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.1;
}
.widget.public-profile .widget.our-escorts .list {
    margin: 0 -4px;
}
.widget.public-profile .widget.our-escorts .list a {
    padding: 4px;
}
.widget.public-profile .widget.our-escorts .list a .inner-container {
    background: var(--bg-dark, #0a0a0f);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.widget.public-profile .widget.our-escorts .list a:hover .inner-container {
    border-color: rgba(var(--gold-rgb, 212, 175, 55), 0.45);
}
.widget.public-profile .widget.our-escorts .list a .name {
    color: var(--text-primary, #fff);
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-weight: 600;
    padding: 8px 10px;
    width: auto;
}
.widget.public-profile .widget.our-escorts .empty {
    margin: 0;
    color: var(--text-secondary, #a0a0b0);
    font-size: 0.9rem;
}
/* End 2026-10-02 agency escort */

/* 2026-10-03 (owner, SEO: "popular areas link block", hot cities linked to each other) - the foot of a listing page
   (ListingLinks: "Popular areas in {city}" / "Nearby areas" / "Escorts in other cities"), and an empty page's
   "Escorts near {place}" (_NoResults). A link colour needs more than the site's link rule, body a:not(..):not(..)
   (0,2,2): three classes here. */
.widget.listing-links {
    margin: 36px 0 16px;
}
/* in line with the cards above (listing-card.css .lc-list: 0 24px, 0 12px at 640px) */
.widget.listing-links .ll-group {
    margin: 0 0 24px;
    padding: 0 24px;
}
.widget.listing-links h2.ll-title {
    font-size: 1.3rem;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--text-primary, #fff);
}
.widget.listing-links .ll-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.widget.listing-links .ll-list a {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #c9c9d4);
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.widget.listing-links .ll-list a:hover,
.widget.listing-links .ll-list a:focus-visible {
    color: var(--gold, #d4af37);
    border-color: rgba(var(--gold-rgb, 212, 175, 55), 0.6);
    background: rgba(var(--gold-rgb, 212, 175, 55), 0.08);
    text-decoration: none;
}
.widget.nearby-results h2.nearby-results-title {
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 28px 0 4px;
    color: var(--text-primary, #fff);
}
.widget.no-results .no-results-message {
    color: var(--text-secondary, #a0a0b0);
    margin: 0 0 8px;
}
.widget.nearby-results .nearby-results-title {
    padding: 0 24px;
}
@media (max-width: 640px) {
    .widget.listing-links .ll-group,
    .widget.nearby-results .nearby-results-title {
        padding: 0 12px;
    }
}
@media (max-width: 600px) {
    .widget.listing-links .ll-list a {
        font-size: 13px;
        padding: 6px 12px;
    }
}
/* 2026-10-22: the 404 page's heading block (Views_PageNotFound_Index) - a widget of its own, drawn as it arrives, so its
   look is here rather than in page-404.css, which page-404's loader fetches late; the same look that sheet gave it. */
.widget.page-404-head .top {
    text-align: center;
}
.widget.page-404-head .top h1 span {
    color: var(--gold, #d4af37);
}
.widget.page-404-head .top .page-404-city {
    margin: 18px 0 0;
}
/* The city button's whole box, with the values Semantic's button.css gives it once it arrives (it is not in the page's
   head; a loader brings it): before that the link was a plain inline link and the ads below moved down when it grew
   to 34px - CLS 0.071 on desktop after the spacing above was fixed. Its hover stays Semantic's. */
.widget.page-404-head .top .page-404-city a.ui.button {
    display: inline-block;
    min-height: 16px;
    margin: 0 4px 0 0;
    padding: 10px 30px 8px;
    border: 0;
    border-radius: 6px;
    background: var(--gold, #d4af37);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    color: #111;
    font-family: Outfit, "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: baseline;
}
/* The spacing over the 404's ads, fixed here (first frame) and not left to page-404.css and the late sheets the
   loader brings: PageSpeed desktop measured CLS 0.17 on a profile's 404 - the carousel moving down three times as
   those arrived. The values are the final ones the page had (40px, 26px, 20px). */
.widget.page-404 {
    padding-bottom: 20px;
}
.widget.page-404 h2.page-404-ads {
    margin: 40px 0 0;
    padding: 0;
    font-size: 26px;
    line-height: 1.1;
    text-align: center;
}
/* 2026-10-21 (SEO): "This week in {city}" - a hub city page's counts, one sentence and the next arrivals, above the
   link groups (CityWeekBlock). Same side padding as the groups and the cards; links need three classes (see above). */
.widget.city-week {
    margin: 36px 0 0;
}
.widget.city-week .cw-section {
    padding: 0 24px;
}
.widget.city-week h2.cw-title {
    font-size: 1.3rem;
    line-height: 1.2;
    margin: 0 0 4px;
    color: var(--text-primary, #fff);
}
.widget.city-week .cw-asof {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-secondary, #c9c9d4);
}
.widget.city-week .cw-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.widget.city-week .cw-stats li {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}
.widget.city-week .cw-num {
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--gold, #d4af37);
    font-variant-numeric: tabular-nums;
}
.widget.city-week .cw-label {
    font-size: 13px;
    line-height: 1.3;
    color: var(--text-secondary, #c9c9d4);
}
.widget.city-week .cw-summary {
    margin: 0 0 14px;
    max-width: 70ch;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary, #c9c9d4);
}
.widget.city-week h3.cw-sub {
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--text-primary, #fff);
}
.widget.city-week .cw-arrivals {
    list-style: none;
    margin: 0;
    padding: 0;
}
.widget.city-week .cw-arrivals li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
    line-height: 1.4;
}
.widget.city-week .cw-arrivals li:last-child {
    border-bottom: 0;
}
.widget.city-week .cw-arrivals a {
    color: var(--gold, #d4af37);
    text-decoration: none;
}
.widget.city-week .cw-arrivals a:hover,
.widget.city-week .cw-arrivals a:focus-visible {
    text-decoration: underline;
}
.widget.city-week .cw-when {
    margin-left: 8px;
    color: var(--text-secondary, #c9c9d4);
}
@media (max-width: 640px) {
    .widget.city-week .cw-section {
        padding: 0 12px;
    }
    .widget.city-week .cw-stats li {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        box-sizing: border-box;
    }
}
/* 2026-10-19: a state's index of every area - the link groups above as a page of their own, with a trail, a heading,
   one paragraph and a way back */
.widget.listing-links.area-index {
    margin: 24px 0 40px;
}
.widget.listing-links.area-index .ai-crumbs,
.widget.listing-links.area-index .ai-title,
.widget.listing-links.area-index .ai-intro,
.widget.listing-links.area-index .ai-back {
    padding: 0 24px;
}
.widget.listing-links.area-index .ai-crumbs {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-secondary, #c9c9d4);
}
.widget.listing-links.area-index .ai-crumbs a,
.widget.listing-links.area-index .ai-back a {
    color: var(--gold, #d4af37);
    text-decoration: none;
}
.widget.listing-links.area-index .ai-crumbs a:hover,
.widget.listing-links.area-index .ai-back a:hover {
    text-decoration: underline;
}
.widget.listing-links.area-index h1.ai-title {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--text-primary, #fff);
}
.widget.listing-links.area-index .ai-intro {
    max-width: 760px;
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary, #c9c9d4);
}
.widget.listing-links.area-index .ai-back {
    margin: 8px 0 0;
    font-size: 15px;
}
@media (max-width: 640px) {
    .widget.listing-links.area-index .ai-crumbs,
    .widget.listing-links.area-index .ai-title,
    .widget.listing-links.area-index .ai-intro,
    .widget.listing-links.area-index .ai-back {
        padding: 0 12px;
    }
    .widget.listing-links.area-index h1.ai-title {
        font-size: 1.6rem;
    }
}

/* --- Checkbox and radio: a default size ---------------------------------
   2026-10-14 (owner): a checkbox no rule sizes is drawn at the browser's
   13x13 - the review form's "Post anonymously" was that, too small to hit
   on a phone. :where() has no specificity, so this is only the default:
   every rule that sizes a control (a hidden chip input, a Semantic box, a
   switch) wins over it. Test-FrontendControlTargetSizes.py refuses a static
   deploy without this rule, and any rule that draws a box under its floor. */
:where(input[type="checkbox"], input[type="radio"]) {
    width: 18px;
    height: 18px;
}