/* =========================================================================
    public-profile.css — Redesigned public profile (domain.com/{username})
    Loaded ONLY by resources/views/frontend/new_ui_connect_redesign.blade.php, and every rule is scoped under `body.rd-public` so it cannot affect the legacy new_ui_connect.blade.php or any other surface.
    Strategy: this is a re-skin LAYER on top of new_frontend.css (+ the dark variant). It restyles the EXISTING structural classes (.content-box, .profile-info, .profile-details, .accordion-item, …) to match the view-profile redesign mockup (docs/.../public-profile/view-profile-nav-options.html) WITHOUT changing markup, JS hooks, modals or builder output. `!important` is used freely on purpose — we are deliberately overriding the loaded base stylesheet.
    Theme axes (server-rendered classes on <body>):
        • body.rd-public                     → light (default)
        • body.rd-public.rd-dark             → dark (from $is_dark_mode)
        • body.rd-public.profile-style-glass → liquid glass (from $profile_style)
        • body.rd-public.profile-style-glass.rd-dark → glass dark
    Background is painted by the inline `style="background:…"` on <body>
    ($body_bg_final), so this file never sets the page background.

    Brand accent: the contact/CTA buttons already carry their inline brandcolours from $userContactButtonTheme / wlPrimaryColor — we only reshapethem here, never recolour them. A dedicated per-profile brand colour fieldis deferred (see spec) — no `body.brand` rules emitted.
========================================================================= */

/* Design tokens */
body.rd-public {
    --swft-bg: #FFFFFF;
    --swft-bg-page: #FAFAFA;
    --swft-card: #F1F1F1;
    --swft-fg1: #222222;
    --swft-fg2: #616161;
    --swft-fg-muted: #B0B0B0;
    --swft-border: #D0D5DD;
    --swft-border-soft: #F0F0F0;
    --swft-radius-card: 16px;
    --swft-radius-pill: 999px;
    --swft-pp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --swft-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* icon chip palette (contact rows). CHANGED (public-brand-color-toggle): aligned email/phone with the My
       Profile editor's contact-icon colours (new_ui_light_frontend.css: email blue #0066CC, phone green) so a
       brand-OFF public profile matches the editor. When brand is ON, new_ui_connect.blade.php injects an override. */
    --swft-icon-email-bg: #E0ECF9; --swft-icon-email-fg: #0066CC;
    --swft-icon-phone-bg: #D9E9DD; --swft-icon-phone-fg: rgb(48, 182, 81);
    --swft-icon-loc-bg:   #FEF3C7; --swft-icon-loc-fg:   #D97706;
}
body.rd-public.rd-dark {
    --swft-bg: #292929;
    --swft-bg-page: #1B1B1B;
    --swft-card: #333333;
    --swft-fg1: #F5F5F5;
    --swft-fg2: #CCCCCC;
    --swft-fg-muted: #888888;
    --swft-border: #3D3D3D;
    --swft-border-soft: #2A2A2A;
    /* CHANGED (public-brand-color-toggle): aligned with the editor's DARK contact-icon colours (new_ui_dark_frontend.css). */
    --swft-icon-email-bg: rgba(0,102,204,0.22); --swft-icon-email-fg: #6BAEFF;
    --swft-icon-phone-bg: rgba(48,182,81,0.18); --swft-icon-phone-fg: #5BD97E;
    --swft-icon-loc-bg:   #3A2A12; --swft-icon-loc-fg:   #F5B459;
}

/* Page shell */
body.rd-public {
    font-family: var(--swft-pp-font);
    -webkit-font-smoothing: antialiased;
}
body.rd-public .main { padding-top: 24px; padding-bottom: 0px; }

/* The two-column profile layout already exists (col-lg-5 / col-lg-7); we only widen the gutter feel and cap the content width to mirror the mockup. */
body.rd-public .profile-content-section { max-width: 1180px; margin: 0 auto; }
/* The legacy shared .content-section wrapper (new_frontend.css:1185) caps at 1096px, which clipped the 1180px .profile-content-section above to ~1072px usable — so the mockup width never applied. Lift that cap on the public profile ONLY: body.rd-public is on this view alone (new_ui_connect[_redesign]) AND this file only loads there, so the inner wrapper now governs at the mockup's 1180px while the shared .content-section keeps 1096px on every other user-app page (analytics / contacts / wallet / settings / …). Specificity (0,2,1) beats legacy (0,1,0) regardless of load order. [SC-c9a6323e — editor is deliberately 1200px, public 1180px] */
body.rd-public .content-section { max-width: none; }

/* Two-column grid — match the mockup exactly. view-profile-nav-options.html lays the columns out as `grid-template-columns: 420px 1fr; gap: 28px` (left card 420px, right column 732px @1180). The live markup is a Bootstrap .row (col-lg-5 / col-lg-7 => 500/701 of 1180) and .left-profile-section is capped at max-width:448px, so the card couldn't fill its column and the visible gutter ballooned to ~60px. Override the top-level row to the mockup's grid so the gap is an exact 28px and the left card is pinned to 420px. Desktop only (>=992px) — below that the Bootstrap columns stack full-width as before. Child combinators (`> .row`, `> .col-lg-*`) so the nested section .rows inside the right column are untouched. [SC-c9a6323e] */
@media (min-width: 992px) {
    body.rd-public .profile-content-section > .row {
        display: grid;
        grid-template-columns: 420px minmax(0, 1fr);
        gap: 28px;
        margin: 0;
    }
    body.rd-public .profile-content-section > .row > .col-lg-5,
    body.rd-public .profile-content-section > .row > .col-lg-7 {
        flex: none;
        width: auto;
        max-width: none;
        padding: 0;
    }
    /* The right column's section list (#accordion-default) is floated right at width:calc(100% - 8px) (new_frontend.css:5692, legacy >=992 rule). Inside the old padded Bootstrap column that was invisible, but against the exact 732px grid track it right-aligns the cards and leaves an 8px inset on their LEFT — pushing the visible card-to-card gap to ~36px. Un-float it so it fills the track flush-left and the gap is the mockup's 28px. The #id keeps specificity (1,3,1) above the source's (1,0,1). */
    body.rd-public .profile-content-section > .row > .col-lg-7 > #accordion-default {
        float: none;
        width: 100%;
    }
}

/* Left profile column height — split by breakpoint.
   DESKTOP (>=992px): the "My profile / Built with" footer (.login-register-btn, the last child of this column) is position:absolute; bottom:24px (new_frontend.css:1641) and is shown ONLY at this width. To pin it to the bottom of the SCREEN without scrolling — as the previous design did — its containing block (this column, position:relative/sticky) must be one viewport tall again. We size it to `100vh - 48px` to subtract the .main 24px top + 24px bottom padding (line 68) so a short profile fills exactly the viewport and the page itself never scrolls; box-sizing:border-box keeps that math exact. The 72px padding-bottom reserves room for the absolute footer so a long contact list (the card caps at max-height:100% and scrolls internally — see the blade's >=992px flex block) never overlaps it.
   BELOW 992px: the desktop footer is display:none (new_frontend.css:3526/3836) and the sidebar is a normal block, so let the left card size to its content (compact, like the mockup) — a viewport-tall column here would just leave a large empty gap. */
@media (max-width: 991.98px) {
    body.rd-public .left-profile-section.sticky-sidebar,
    body.rd-public .left-profile-section.sticky-sidebar.sticky-section {
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
    }
}
@media (min-width: 992px) {
    body.rd-public .left-profile-section.sticky-sidebar,
    body.rd-public .left-profile-section.sticky-sidebar.sticky-section {
        box-sizing: border-box !important;
        height: calc(100vh - 48px) !important;
        min-height: 0 !important;
        padding-bottom: 72px !important;
    }
}

/* RIGHT profile column: intentionally has NO bounded height / overflow / scrollbar. Matching the mockup (view-profile-nav-options.html: the right `1fr` grid column is natural height), the section list (reviews / links / Calendly / Meet-the-team) scrolls WITH THE PAGE while the left column stays put via position:sticky (new_frontend.css). Do NOT give .col-lg-7 its own overflow-y scroller — that produces a stray inner scrollbar and a boxed-off right side. */

/* LEFT — profile card */
body.rd-public .left-profile-section .content-box {
    background: var(--swft-bg) !important;
    border: 1px solid var(--swft-border) !important;
    border-radius: var(--swft-radius-card) !important;
    overflow: hidden;
    box-shadow: none !important;
}

/* No-cover avatar float fix. When there is no cover photo the avatar is lifted above the card's top edge (.no-cover .content-box .profile-image { margin-top:-100px } desktop / -75px mobile, in new_frontend.css). The blade override that lets it overflow the card is gated to @media (min-width:992px), so below 992px the overflow:hidden above clipped the avatar's top half (the reported "showing inside" bug). Re-allow overflow for the no-cover card at ALL widths. The extra .no-cover class (specificity 0,4,1) + !important outrank the 0,3,1 rule above. The inner contact/social scroll lives on .profile-details (its own overflow-y:auto), not here, so scrolling is unaffected; the with-cover card is untouched. */
body.rd-public .left-profile-section.no-cover .content-box,
body.rd-public .left-profile-section.no-cover .content-box .profile-info {
    overflow: visible !important;
}

/* Cover */
body.rd-public .profile-cover-image {
    aspect-ratio: 3 / 1;
    overflow: hidden;
}
body.rd-public .profile-cover-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Avatar + company logo badge */
body.rd-public .profile-image { position: relative; }
/* new_frontend.css draws decorative 2px-white ::before/::after rings around the avatar — in the redesign they read as a stray "white line". Remove them so the avatar matches the mockup (single clean 4px white border). */
body.rd-public .profile-image::before, body.rd-public .profile-image::after { display: none !important; content: none !important; }
body.rd-public .profile-image > img:first-child {
    width: 120px !important; height: 120px !important; border-radius: var(--swft-radius-pill) !important; border: 3px solid var(--swft-bg) !important; object-fit: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; background: var(--swft-card); outline: none !important;
}
/* the small company logo overlapping the avatar (mockup logo badge). new_frontend.css positions this with left:calc(150px - 36px)=114px / bottom:0, anchored to the OLD 150px avatar. The redesign avatar is 120px, so we re-anchor to its bottom-right corner to match the mockup's .rd-pc-logo-badge (60px, nested at the avatar's lower-right). The container (.profile-image) is wider than the 120px avatar, so we keep LEFT-based math, not right. */
body.rd-public .profile-image img.icon {
    width: 60px !important; height: 60px !important; left: calc(120px - 26px) !important; bottom: -6px !important; border-radius: var(--swft-radius-pill) !important; border: 3px solid var(--swft-bg) !important; background: var(--swft-bg) !important; object-fit: cover; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14) !important;
}
/* Name — overflow-wrap/word-break so a long unbroken name (no spaces) wraps inside the fixed-width
   card instead of overflowing it (mirrors the .bio-content wrap treatment below; the name never had it). */
body.rd-public .profile-content h3 {
    font-size: 22px !important; font-weight: 600 !important; line-height: 28px !important; letter-spacing: -0.015em; color: var(--swft-fg1) !important; display: flex; align-items: center; gap: 6px; overflow-wrap: break-word !important; word-break: break-word !important;
}
/* Bio / headline */
body.rd-public .bio-content, body.rd-public .bio-content.large { font-size: 14px !important; color: var(--swft-fg2) !important; line-height: 1.45 !important; }
body.rd-public .bio-see-more { color: #2563EB !important; font-weight: 500 !important; }
body.rd-public.rd-dark .bio-see-more { color: #6AB0FF !important; }
/* CTA buttons — reshape to pills, keep inline brand colours. Sizing: each CTA is an exact half — two buttons render 50/50, a lone button fills the row (flex-grow). Basis is calc(50% - 4px), NOT `flex: 1 1 0`: with a 0 basis the buttons collapse to their content width in the narrow profile card (Chromium keeps the flex base at the content size even with min-width:0), leaving the longer "Exchange contact" wider than "Save Contact". 4px = half the 8px gap, so two halves + gap == 100%. */
body.rd-public .connect-btn { display: flex !important; gap: 8px; }
body.rd-public .connect-btn .primary-btn, body.rd-public .connect-btn .secondary-btn, body.rd-public .connect-btn .connect-btn-new {
    flex: 1 1 calc(50% - 4px) !important; min-width: 0; width: auto !important; height: 36px; min-height: 36px; padding: 6px 12px !important; border-radius: var(--swft-radius-pill) !important; font-size: 13px !important; font-weight: 500 !important; display: inline-flex; align-items: center; justify-content: center; transition: filter 200ms ease, background 200ms ease;
}
/* trim the icon→label gap to the mockup's 6px (markup uses .me-2 ≈ 8px) */
body.rd-public .connect-btn .connect-btn-new svg.me-2 { margin-right: 6px !important; }
body.rd-public .connect-btn .connect-btn-new svg { width: 18px !important; height: 18px !important; }
/* the CTA forms (Save vCard) are wrapped in a <form>; make them flex too so the button fills its half evenly next to the exchange-contact anchor */
body.rd-public .connect-btn > form { flex: 1 1 calc(50% - 4px) !important; min-width: 0; display: flex; }
body.rd-public .connect-btn > form > .connect-btn-new { width: 100% !important; }
/* never ellipsis-truncate the CTA label */
body.rd-public .connect-btn .connect-btn-new .btn-text { overflow: visible !important; text-overflow: clip !important; white-space: nowrap; }
body.rd-public .connect-btn .connect-btn-new .d-flex { min-width: 0; }
/* Secondary (Save Contact) DEFAULT colours. Intentionally NOT !important: a user's stored CTA download_* colours are applied inline on the button, and inline wins by specificity ONLY while these defaults are unforced. When the user has set no download colour the inline value is empty/ignored and these defaults apply — same resolution model as the primary (Exchange) button. */
body.rd-public .connect-btn .secondary-btn.grey { background: var(--swft-bg); color: var(--swft-fg1); border: 1px solid var(--swft-border); }
body.rd-public .connect-btn .secondary-btn.grey:hover { background: var(--swft-bg-page); }

/* LEFT — contact rows (redesign partial: contactList_rd.blade.php) */
/* Widen the scroll container 12px each side (negative margin) and pad it back, so the .rd-pc-row hover highlight below can bleed 12px outward (inset: 0 -12px) into that pad — the mockup's inset rounded pill — WITHOUT .profile-details' overflow-x:hidden clipping it to an edge-to-edge bar. Content (contact rows + social pills) still sits at .profile-info's 24px gutter via the +12px padding. Verified live (Playwright): no horizontal scrollbar with OR without the vertical scrollbar, content flush, desktop + mobile. [SC-01a55b16] */
body.rd-public .profile-details { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
body.rd-public .rd-pc-info { display: flex; flex-direction: column; padding: 4px 0 0; }
/* padding is vertical-ONLY (6px 0): the name/bio/buttons all sit at .profile-info's 24px left gutter (new_frontend.css), and .rd-pc-info adds no horizontal padding — so any horizontal padding here pushes the icon chips inward and the rows read as indented vs the name (the SC-01a55b16 bug, when this was `6px 12px` → icons at 36px vs name at 24px). Mockup puts the gutter on the container and keeps rows flush. */
body.rd-public .rd-pc-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; line-height: 1.3; border-bottom: 1px solid var(--swft-border-soft); text-decoration: none; color: inherit; position: relative; isolation: isolate; transition: background 150ms ease; }
body.rd-public .rd-pc-row:last-child { border-bottom: none; }
/* hover highlight bleeds 12px outward each side (inset: 0 -12px) so it renders as the mockup's inset rounded pill — 12px of breathing room from the card edge, with the content flush inside. This is only clip-free because of the .profile-details widening above (the bleed lands inside the padded scroll container instead of being cut to a square edge-to-edge bar). */
/* highlight fill = --swft-card (#F1F1F1 light): visible on the #FFFFFF card. Without a background the opacity 0->1 hover had nothing to show, so the normal-style hover read as "no hover" [SC-260618-hv1]. This base fill only renders on hover in LIGHT-normal — dark-normal overrides it (line ~289) and glass overrides it (line ~392), so it touches light-normal only. */
body.rd-public .rd-pc-row::before { content: ''; position: absolute; inset: 0 -12px; background: var(--swft-card); border-radius: 8px; opacity: 0; transition: opacity 150ms ease; z-index: -1; }
body.rd-public .rd-pc-row:hover::before { opacity: 1; }
body.rd-public .rd-pc-row:hover { border-color: transparent; }
body.rd-public .rd-pc-row .row-icon { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; flex: none; }
body.rd-public .rd-pc-row .row-icon svg { width: 14px; height: 14px; }
body.rd-public .rd-pc-row .row-icon.email { background: var(--swft-icon-email-bg); color: var(--swft-icon-email-fg); }
body.rd-public .rd-pc-row .row-icon.phone { background: var(--swft-icon-phone-bg); color: var(--swft-icon-phone-fg); }
body.rd-public .rd-pc-row .row-icon.location { background: var(--swft-icon-loc-bg); color: var(--swft-icon-loc-fg); }
body.rd-public .rd-pc-row .value {
    flex: 1; min-width: 0; font-size: 13px; color: var(--swft-fg1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
/* the value text is injected by JS as <a class="contact-list"> inside .value */
body.rd-public .rd-pc-row .value .contact-list, body.rd-public .rd-pc-row .value .contact-list:hover,
body.rd-public .rd-pc-row .value .contact-list:focus {
    color: inherit; font: inherit; text-decoration: none !important; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
body.rd-public .rd-pc-row .label { flex: none; font-size: 12px; color: var(--swft-fg-muted); font-weight: 400; text-transform: none; letter-spacing: normal; display: block; }

/* LEFT — social pills (Variant A) */
body.rd-public .social-media-details { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px !important; }
/* neutralise any brand-coloured wrapper (.wp-badge/.ig-badge/…) so every pill is uniform like mockup Variant A — only the icon glyph carries brand colour */
body.rd-public .social-media-details .social-badge { margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: var(--swft-radius-pill) !important; }
body.rd-public .social-media-details .social-badge a.user_social_media {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px !important; border-radius: var(--swft-radius-pill) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; color: var(--swft-fg1) !important; background: var(--swft-bg-page) !important; border: 1px solid var(--swft-border) !important; text-decoration: none !important; transition: border-color 150ms ease, background 150ms ease;
}
body.rd-public .social-media-details .social-badge a.user_social_media:hover { background: var(--swft-card) !important; }
body.rd-public .social-media-details .social-badge a.user_social_media svg { width: 18px !important; height: 18px !important; flex: none; margin: 0 !important; }

/* Kebab / share-trigger — keep position logic from the view, refine look */
body.rd-public a.public-share-trigger {
    background: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--swft-fg1) !important;
}
body.rd-public.rd-dark a.public-share-trigger { background: rgba(40, 40, 40, 0.8) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #F5F5F5 !important; }

/* Scroll-hint — circular clickable chevron button (mockup .rd-pc-scroll-hint). The view's inline style (>=992px) positions it bottom-centre + runs the bounce animation; here we turn it into the interactive circular chevron and theme it. The click-to-scroll handler is wired in the view's .profile-details script. */
body.rd-public .profile-scroll-hint {
    width: 32px !important; height: 32px !important; border-radius: 999px !important; background: var(--swft-bg) !important; border: 1px solid var(--swft-border) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; color: var(--swft-fg2) !important; pointer-events: auto !important; cursor: pointer !important;
}
body.rd-public .profile-scroll-hint svg { width: 14px !important; height: 14px !important; display: block; }
/* once the list is fully scrolled the view sets .at-bottom -> fade out; also drop interactivity so the invisible button can't be clicked. */
body.rd-public .profile-info.at-bottom .profile-scroll-hint { opacity: 0 !important; pointer-events: none !important; }
body.rd-public.rd-dark .profile-scroll-hint { background: var(--swft-card) !important; border-color: var(--swft-border) !important; color: var(--swft-fg2) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30) !important; }
/* glass — translucent frosted chip like the share/back buttons */
body.rd-public.profile-style-glass .profile-scroll-hint {
    background: rgba(255, 255, 255, 0.5) !important; border-color: rgba(255, 255, 255, 0.45) !important; color: rgba(20, 20, 20, 0.7) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.rd-public.profile-style-glass.rd-dark .profile-scroll-hint {
    background: rgba(40, 40, 40, 0.55) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.85) !important;
}

/* RIGHT — section panels (reused builder output wrapped in .accordion-item) */
body.rd-public .col-lg-7 .accordion-item {
    background: var(--swft-bg) !important; border: 1px solid var(--swft-border) !important; border-radius: var(--swft-radius-card) !important; overflow: hidden; margin-top: 16px !important; box-shadow: none !important;
}
body.rd-public .col-lg-7 .accordion-item:first-child { margin-top: 0 !important; }
body.rd-public .col-lg-7 .accordion-header { padding: 18px 22px 14px !important; border-bottom: 1px solid var(--swft-border-soft) !important; }
body.rd-public .col-lg-7 .accordion-header .heading-on,
body.rd-public .col-lg-7 .accordion-header span { font-size: 16px !important; font-weight: 600 !important; color: var(--swft-fg1) !important; }
/* If the section heading is hidden (title_status 0 → .on-preivew-hide) drop the header border so the body sits flush. */
body.rd-public .col-lg-7 .accordion-header.on-preivew-hide { display: none !important; }
body.rd-public .col-lg-7 .accordion-body { padding: 18px 22px !important; }
/* `.grey-column-b` is the section "tile" surface (website-link cards, text-editor block). The Meet-the-team cards (.linkprofile-list > li) and App-icon cards (.social-icon-list > li) are the SAME kind of inner tile but the reused builder markup gives them a different (opaque) background — pull them onto the common tile surface so every section reads consistently. */
body.rd-public .col-lg-7 .grey-column-b, body.rd-public .col-lg-7 .linkprofile-list > li,
body.rd-public .col-lg-7 .social-icon-list > li { background: var(--swft-bg-page) !important; border: 1px solid var(--swft-border-soft) !important; border-radius: 12px !important; }
/* "Meet the team" / App-icon "+N more" button. The base sheet (new_frontend.css button.view_more_linkprofile) rotates this 90deg and parks it at right:-40px — that lands OUTSIDE the redesign's narrow section card, so it gets clipped and reads as a stray vertical sliver on both mobile and desktop. Re-flow it as a normal, full-width pill below the grid so it's always fully visible. Layout props use !important to beat the base absolute/rotate; the surface colours are left WITHOUT !important so the .profile-style-glass variant (higher specificity, further down) can still swap in its translucent background. */
body.rd-public .col-lg-7 .view_more_linkprofile {
    position: static !important; transform: none !important; right: auto !important; top: auto !important; display: block; width: 100%; margin: 12px 0 0 !important; padding: 10px 16px !important; text-align: center; font-size: 14px !important; font-weight: 600; line-height: 1.2; color: var(--swft-fg1); background: var(--swft-card); border: 1px solid var(--swft-border); border-radius: 10px; cursor: pointer;
}
body.rd-public .col-lg-7 .view_more_linkprofile:hover { border-color: var(--swft-fg-muted); }
/* Kill the base sheet's right-edge fade gradient on the team grid. It's a hard- coded near-white linear-gradient meant to hint "more cards to the right" when the list scrolled horizontally; the redesign grid WRAPS and the "+N more" pill now sits below it, so the fade is both redundant and (being near-white) an ugly smear in dark mode. */
body.rd-public .col-lg-7 div#accordion-default .accordion-body ul.linkprofile-list::after { display: none !important; }
/* text-editor section content — mockup .text-block (muted 14px body copy). The reused builder wraps the rich text in .tinymce-content-preview (already 14px / 1.5); we only retint it to the muted body colour like the mockup. */
body.rd-public .col-lg-7 .tinymce-content-preview { color: var(--swft-fg2) !important; }

/* FOOTER — auth links + branding */
body.rd-public .login-register-btn, body.rd-public .desktop-login-info { padding: 16px 4px 0; bottom: 0px; }
body.rd-public .login-register-btn ul { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.rd-public .login-register-btn ul li { font-size: 13px; font-weight: 500; }
body.rd-public .create-profile-btn, body.rd-public .login-btn, body.rd-public .back-profile-btn {
    color: var(--swft-fg2) !important; text-decoration: none; transition: color 150ms ease;
}
body.rd-public .create-profile-btn:hover, body.rd-public .login-btn:hover, body.rd-public .back-profile-btn:hover { color: var(--swft-fg1) !important; }
/* Back link — match the mockup's .back-link (view-profile-nav-options.html): a small grey text link (13px/500), not the 16px/600 the markup's `p.large fw-semibold` wrapper gives it, with a 14px chevron that follows the link colour (currentColor). !important is required to beat p.large + fw-semibold (text) and the inline stroke="#475167" / the changeFontColor() AJAX that re-strokes `.back-profile-btn svg g path` (chevron). The .profile-style-glass override below (one extra class) still wins in glass mode, keeping the white-on-backdrop chevron. [SC-d23be504] */
body.rd-public .back-profile-btn { font-size: 13px !important; font-weight: 500 !important; }
body.rd-public .back-profile-btn svg { width: 14px !important; height: 14px !important; }
body.rd-public .back-profile-btn svg path { stroke: currentColor !important; }
body.rd-public .new-power-logo p, body.rd-public .new-power-logo a { font-size: 13px !important; color: var(--swft-fg-muted) !important; text-decoration: none; }
/* body.rd-public .new-power-logo a:hover { text-decoration: underline; } */
/* Footer on glass — links sit on the backdrop image (not a glass card) in BOTH glass sub-modes, so they need the mockup's light-on-backdrop treatment (.rd-auth-links a / .rd-branding a): white + text-shadow for legibility. */
body.rd-public.profile-style-glass .create-profile-btn, body.rd-public.profile-style-glass .login-btn, body.rd-public.profile-style-glass .back-profile-btn {
    color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
body.rd-public.profile-style-glass .create-profile-btn:hover, body.rd-public.profile-style-glass .login-btn:hover,
body.rd-public.profile-style-glass .back-profile-btn:hover { color: #ffffff !important; }
/* chevron + separator dot recolour to match the white footer text */
body.rd-public.profile-style-glass .back-profile-btn svg path { stroke: rgba(255,255,255,0.95) !important; }
body.rd-public.profile-style-glass .login-register-btn ul li svg circle { fill: rgba(255,255,255,0.7) !important; }
body.rd-public.profile-style-glass .new-power-logo p, body.rd-public.profile-style-glass .new-power-logo a {
    color: rgba(255,255,255,0.85) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* DARK — surfaces (layers on top of dark_new_frontend.css) */
body.rd-public.rd-dark .left-profile-section .content-box, body.rd-public.rd-dark .col-lg-7 .accordion-item {
    background: var(--swft-bg) !important; border-color: var(--swft-border) !important;
}
body.rd-public.rd-dark .profile-image > img:first-child { border-color: var(--swft-bg) !important; }
body.rd-public.rd-dark .profile-image img.icon { border-color: var(--swft-bg) !important; background: var(--swft-bg) !important; }
body.rd-public.rd-dark .profile-content h3 { color: var(--swft-fg1) !important; }
body.rd-public.rd-dark .bio-content { color: var(--swft-fg2) !important; }
/* dark separators: --swft-border-soft (#2A2A2A) is invisible on the #292929 card, so use a faint white line like the mockup's dark surfaces. */
body.rd-public.rd-dark .rd-pc-row { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
body.rd-public.rd-dark .rd-pc-row:hover::before { background: rgba(255, 255, 255, 0.05); }
body.rd-public.rd-dark .rd-pc-row .value { color: var(--swft-fg1) !important; }
body.rd-public.rd-dark .col-lg-7 .tinymce-content-preview { color: var(--swft-fg2) !important; }
body.rd-public.rd-dark .social-media-details .social-badge a.user_social_media {
    background: var(--swft-card) !important; border-color: var(--swft-border) !important; color: var(--swft-fg1) !important;
}
body.rd-public.rd-dark .col-lg-7 .accordion-header,
body.rd-public.rd-dark .col-lg-7 .accordion-header .heading-on { border-bottom-color: rgba(255, 255, 255, 0.08) !important; color: var(--swft-fg1) !important; }
body.rd-public.rd-dark .col-lg-7 .grey-column-b, body.rd-public.rd-dark .col-lg-7 .linkprofile-list > li,
body.rd-public.rd-dark .col-lg-7 .social-icon-list > li { background: var(--swft-card) !important; border-color: var(--swft-border) !important; }
body.rd-public.rd-dark .connect-btn .secondary-btn.grey { background: var(--swft-card); color: var(--swft-fg1); border-color: var(--swft-border); }

/* GLASS — translucent surfaces. Values mirror view-profile-nav-options.html (.theme-glass / .glass-dark). Scoped to .profile-style-glass which the view already puts on <body>; .rd-dark distinguishes the light vs dark sub-mode. These override the older inline glass block in the view (higher specificity). */
/* surfaces: profile card + section panels */
/* Section panels keep the blur directly — they don't host an internal scroller. */
body.rd-public.profile-style-glass .col-lg-7 .accordion-item {
    -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.12); backdrop-filter: blur(28px) saturate(180%) brightness(1.12); position: relative;
}
/* The profile card's .content-box is the sticky sidebar's flex SCROLL container (max-height:100% + min-height:0 chain; .profile-details scrolls inside it). backdrop-filter on it breaks that height chain in Chromium, so the list stops scrolling internally, the card grows past the viewport, and the whole card — incl. the pinned Exchange/Save buttons — scrolls with the page (the reported "connect buttons not sticky in glass" bug). Keep the scroll container filter-FREE and paint the frosted blur on an absolutely-positioned ::before (out of flex flow) so layout/position:sticky behave exactly like the non-glass card. `none !important` also neutralises the view's inline `.content-box{backdrop-filter}`. */
body.rd-public.profile-style-glass .left-profile-section .content-box {
    position: relative; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body.rd-public.profile-style-glass .left-profile-section .content-box > * { position: relative; z-index: 2; }
body.rd-public.profile-style-glass .left-profile-section .content-box::before {
    content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.12); backdrop-filter: blur(28px) saturate(180%) brightness(1.12);
}
body.rd-public.profile-style-glass.rd-dark .left-profile-section .content-box::before {
    -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(0.85); backdrop-filter: blur(28px) saturate(160%) brightness(0.85);
}
body.rd-public.profile-style-glass:not(.rd-dark) .left-profile-section .content-box, body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .accordion-item {
    background: rgba(255, 255, 255, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(255,255,255,0.06) !important;
}
body.rd-public.profile-style-glass.rd-dark .left-profile-section .content-box,
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .accordion-item {
    background: rgba(22, 22, 22, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(0.85);
    backdrop-filter: blur(28px) saturate(160%) brightness(0.85);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
/* specular rim highlight on the top edge of every glass surface */
body.rd-public.profile-style-glass .left-profile-section .content-box::after, body.rd-public.profile-style-glass .col-lg-7 .accordion-item::after {
    content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); pointer-events: none; z-index: 1;
}
body.rd-public.profile-style-glass.rd-dark .left-profile-section .content-box::after, body.rd-public.profile-style-glass.rd-dark .col-lg-7 .accordion-item::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
}
/* No-cover glass card: the avatar floats ABOVE the card's top edge (.no-cover .content-box .profile-image margin-top:-100px / .content-box margin-top:100px, new_frontend.css), so the top edge — where this specular rim sits (top:0; z-index:4) — falls across the avatar's lower half + logo badge instead of along a clean cover edge, painting a stray 1px white line over the avatar (the reported glass + no-cover-photo bug). With a cover photo the rim correctly hugs the cover's clean top edge, so suppress it ONLY for .no-cover. The extra .no-cover class (0,5,2) out-specifies the rim rule above (0,4,2). */
/* body.rd-public.profile-style-glass .left-profile-section.no-cover .content-box::after { display: none !important; } */

/* scroll fade on glass the view inlines .profile-info::after as an OPAQUE white/dark fade (correct for normal/light/dark styles), but over a translucent glass card that hard fade reads as a solid block. Re-soften it to mirror the mockup's .theme-glass .rd-pc-fade. Specificity (0,6,2) + !important beats the inline .profile-conntect-page .left-profile-section.sticky-sidebar .profile-info::after. */
body.rd-public.profile-style-glass:not(.rd-dark) .left-profile-section.sticky-sidebar .profile-info::after {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 60%, rgba(255,255,255,0.45) 100%) !important;
}
body.rd-public.profile-style-glass.rd-dark .left-profile-section.sticky-sidebar .profile-info::after {
    background: linear-gradient(to bottom, rgba(22,22,22,0) 0%, rgba(22,22,22,0.35) 60%, rgba(22,22,22,0.55) 100%) !important;
}

/* text on glass (dark-on-light / light-on-dark for legibility) */
body.rd-public.profile-style-glass:not(.rd-dark) .profile-content h3 { color: rgba(20,20,20,0.95) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .bio-content { color: rgba(20,20,20,0.7) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .rd-pc-row .value { color: rgba(20,20,20,0.92) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .rd-pc-row .label { color: rgba(20,20,20,0.55) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .accordion-header .heading-on,
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .accordion-header span { color: rgba(20,20,20,0.95) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .tinymce-content-preview,
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .accordion-body { color: rgba(20,20,20,0.78) !important; }
body.rd-public.profile-style-glass.rd-dark .profile-content h3 { color: rgba(255,255,255,0.98) !important; }
body.rd-public.profile-style-glass.rd-dark .bio-content { color: rgba(255,255,255,0.8) !important; }
body.rd-public.profile-style-glass.rd-dark .rd-pc-row .value { color: rgba(255,255,255,0.92) !important; }
body.rd-public.profile-style-glass.rd-dark .rd-pc-row .label { color: rgba(255,255,255,0.55) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .accordion-header .heading-on,
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .accordion-header span { color: rgba(255,255,255,0.95) !important; }
body.rd-public.profile-style-glass.rd-dark .tinymce-content-preview,
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .accordion-body { color: rgba(255,255,255,0.8) !important; }
/* link-card title + url subtitle (mockup .link-title / .link-desc). The base sheets leave these a fixed dark grey, so on glass-dark the url subtitle was invisible. Covers website-links (.link-content), profile-links (.linkprofile-list) and app-icons (.website-url). */
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .link-content h6,
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .linkprofile-list .title_name { color: rgba(20,20,20,0.92) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .link-content p,
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .linkprofile-list .title_jobtitle,
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .website-url { color: rgba(20,20,20,0.62) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .link-content h6,
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .linkprofile-list .title_name { color: rgba(255,255,255,0.92) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .link-content p,
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .linkprofile-list .title_jobtitle,
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .website-url { color: rgba(255,255,255,0.62) !important; }

/* borders + row separators on glass */
body.rd-public.profile-style-glass:not(.rd-dark) .rd-pc-row { border-bottom-color: rgba(255,255,255,0.28) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .accordion-header { border-bottom-color: rgba(255,255,255,0.22) !important; }
body.rd-public.profile-style-glass.rd-dark .rd-pc-row { border-bottom-color: rgba(255,255,255,0.1) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .accordion-header { border-bottom-color: rgba(255,255,255,0.1) !important; }

/* hover (whole row) on glass.
    In glass the .rd-pc-row::before highlight must NOT animate `opacity` 0->1 like the base rule (:179):
    (1) opacity is compositor-only — over the .content-box backdrop-filter frost (glass-only, :308-316) Chromium intermittently drops the opacity->0 composite on mouse-out, leaving a stuck "ghost" highlight; and (2) the base ::before keeps `background: var(--swft-card)` (the opaque light-normal fill), so on mouse-out the :hover override below stops applying and the fill SNAPS back to that opaque grey while opacity is still fading 1->0 — flashing the "normal" hover style for the duration of the fade before it disappears (the reported glass bug).
    Fix: pin opacity:1 and fade `background-color` from a zero-alpha white twin -> the hover white instead.
    Paint-driven (no orphaned compositor layer) and the fill stays glass-white throughout the fade (no snap to the opaque normal fill). Glass-scoped, so the non-glass opacity mechanism is untouched. [SC-01d5b921] */
body.rd-public.profile-style-glass .rd-pc-row::before { opacity: 1; background: rgba(255,255,255,0); transition: background-color 150ms ease; }
body.rd-public.profile-style-glass:not(.rd-dark) .rd-pc-row:hover::before { background: rgba(255,255,255,0.22) !important; }
body.rd-public.profile-style-glass.rd-dark .rd-pc-row:hover::before { background: rgba(255,255,255,0.08) !important; }
/* row icon chips on glass */
body.rd-public.profile-style-glass:not(.rd-dark) .rd-pc-row .row-icon { background: rgba(255,255,255,0.55) !important; color: rgba(20,20,20,0.78) !important; }
body.rd-public.profile-style-glass.rd-dark .rd-pc-row .row-icon { background: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.85) !important; }
/* reused right-column link/embed tiles — glass hover so they don't flash opaque */
body.rd-public.profile-style-glass .col-lg-7 .grey-column-b, body.rd-public.profile-style-glass .col-lg-7 .linkprofile-list > li,
body.rd-public.profile-style-glass .col-lg-7 .social-icon-list > li, body.rd-public.profile-style-glass .col-lg-7 .website-link-list li > * {
    background: rgba(255,255,255,0.35) !important; border-color: rgba(255,255,255,0.4) !important; transition: background 150ms ease;
}
body.rd-public.profile-style-glass .col-lg-7 .grey-column-b:hover, body.rd-public.profile-style-glass .col-lg-7 .linkprofile-list > li:hover,
body.rd-public.profile-style-glass .col-lg-7 .social-icon-list > li:hover,
body.rd-public.profile-style-glass .col-lg-7 .website-link-list li > *:hover { background: rgba(255,255,255,0.5) !important; border-color: rgba(255,255,255,0.55) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .grey-column-b, body.rd-public.profile-style-glass.rd-dark .col-lg-7 .linkprofile-list > li,
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .social-icon-list > li,
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .website-link-list li > * { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .grey-column-b:hover, body.rd-public.profile-style-glass.rd-dark .col-lg-7 .linkprofile-list > li:hover,
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .social-icon-list > li:hover,
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .website-link-list li > *:hover { background: rgba(255,255,255,0.12) !important; }
/* Website tiles live inside #Website-links, whose base sheets carry an id-scoped !important hover (div#Website-links .website-link-column:hover -> opaque var(--grey-base)). That ID out-specifies the .grey-column-b:hover glass rule above, so on hover a website tile flips to a hard opaque grey while every other section keeps the soft glass hover. Re-assert the glass hover WITH the #id so it wins on specificity (and keep the same 0.3/0.12 values as the other sections). */
body.rd-public.profile-style-glass #Website-links .website-link-column:hover,
body.rd-public.profile-style-glass #Website-links .website-link-column:focus { background: rgba(255,255,255,0.5) !important; border-color: rgba(255,255,255,0.55) !important; }
body.rd-public.profile-style-glass.rd-dark #Website-links .website-link-column:hover,
body.rd-public.profile-style-glass.rd-dark #Website-links .website-link-column:focus { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.12) !important; }
/* The inline glass block in the view only backdrop-blurs .grey-column-b / .content-box / .accordion-item — extend the same blur to the team + app-icon tiles so their translucent surface reads identically to the text-editor block. */
/* Link/social tiles blur lighter than the section panel (mockup: panel blur 28, .link-item blur 10) with a vibrancy lift so the colourful backdrop reads whiter. Keep the brightness lift light-only — glass-dark dims it instead. */
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .linkprofile-list > li, body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .social-icon-list > li {
    -webkit-backdrop-filter: blur(10px) brightness(1.1); backdrop-filter: blur(10px) brightness(1.1);
}
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .linkprofile-list > li, body.rd-public.profile-style-glass.rd-dark .col-lg-7 .social-icon-list > li {
    -webkit-backdrop-filter: blur(10px) brightness(0.9); backdrop-filter: blur(10px) brightness(0.9);
}

/* Review cards + photo-gallery tiles + "more" chips: join the common section glass surface. These tiles paint an opaque card background from the base stylesheets (.review-slider-section .item, .gallery-list > li, .view_more_linkprofile) and carry no grey-column-b class, so the glass block above misses them. Restate the same glass surface so every section reads identically in glass mode. (Photo tiles whose image loads stay covered; the surface only shows through gaps / for caption-only items.) */
/* body.rd-public.profile-style-glass .col-lg-7 .review-slider-section .item, */
body.rd-public.profile-style-glass .col-lg-7 .gallery-list > li, body.rd-public.profile-style-glass .col-lg-7 .view_more_linkprofile {
    background: rgba(255,255,255,0.18) !important; border: 1px solid rgba(255,255,255,0.3) !important; -webkit-backdrop-filter: blur(18px) saturate(160%);
}
body.rd-public.profile-style-glass .col-lg-7 .review-slider-section .item { padding: 0px; }
/* body.rd-public.profile-style-glass.rd-dark .col-lg-7 .review-slider-section .item, */
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .gallery-list > li,
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .view_more_linkprofile {
    background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important;
}

/* Share trigger + mobile back button: same glass material as the sections. Their non-glass look is set above (~lines 312-324) / in the base sheets with no glass variant, so in glass mode they read as opaque chips. Pull them onto the common glass surface; icon colours are kept from the earlier rules for contrast. */
body.rd-public.profile-style-glass a.public-share-trigger, body.rd-public.profile-style-glass a.grey-btn.back-btn {
    background: rgba(255,255,255,0.18) !important; border: 1px solid rgba(255,255,255,0.3) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
}
body.rd-public.profile-style-glass.rd-dark a.public-share-trigger, body.rd-public.profile-style-glass.rd-dark a.grey-btn.back-btn {
    background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important;
}
/* Cover back-button parity with the mockup (.rd-cover-back, view-profile-nav-options.html): the circular "back to my profile" control sits on the cover top-left and shows when logged in on BOTH desktop AND mobile. The legacy a.grey-btn.back-btn is hidden on desktop (new_frontend.css:4046, @media min-width:992px { display:none }) and inherits an 8px rounded-rect radius from base .grey-btn in every mode — so on the redesigned public profile it went MISSING on desktop and never read as the mockup's circle. Re-show it (body.rd-public out-specifies the legacy desktop hide) and make it the mockup's 999px circle with a 16px theme-coloured chevron. Scoped to body.rd-public so legacy (non-redesign) surfaces keep the desktop hide. Position (absolute on the position:relative .sticky-sidebar = cover top-left), dark (dark_new_frontend.css) and glass (above) already apply. [SC-260615-cvb · counterpart of the footer link SC-d23be504] */
body.rd-public a.grey-btn.back-btn { display: flex; border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 3; }
body.rd-public a.grey-btn.back-btn svg { width: 16px; height: 16px; stroke: var(--swft-fg1); }
body.rd-public a.grey-btn.back-btn svg path { stroke: var(--swft-fg1); }

/* CTA buttons on glass (glassProminent)
    The owner's chosen CTA colours arrive as INLINE styles on the <a> (background-color / color / border-color, no !important — see new_ui_connect.blade.php ~L1911/1920/1967). These rules must NOT use !important on background/color/border, or they'd out-rank the inline colours and hide the brand/custom CTA colour in glass mode (the reported bug). Without !important the inline colour wins WHEN SET; the translucent values below remain a fallback — the secondary (Save Contact) button has no inline colour until the owner customises it, so it keeps the frosted default. backdrop-filter + box-shadow have no inline counterpart, so they stay and preserve the glass depth around the coloured button. */
/* Popup submit buttons (#connect-popup / #save-contact-popup .primary-btn) reuse the SAME $contact_* inline colours as the profile Exchange Contact button, so they're added to these selectors to inherit the identical glass frosted treatment (border + shadow + blur). Without it they'd render flat in glass while the profile CTA is frosted. */
body.rd-public.profile-style-glass:not(.rd-dark) .connect-btn .primary-btn.connect-btn-new,
body.rd-public.profile-style-glass:not(.rd-dark) #connect-popup .primary-btn,
body.rd-public.profile-style-glass:not(.rd-dark) #save-contact-popup .primary-btn {
    background: rgba(20,20,20,0.7); color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(0.88);
    backdrop-filter: blur(20px) saturate(180%) brightness(0.88);
    /* box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 14px rgba(0,0,0,0.22) !important; */
}
body.rd-public.profile-style-glass:not(.rd-dark) .connect-btn .secondary-btn.grey {
    background: rgba(255,255,255,0.55); color: rgba(20,20,20,0.95);
    border: 1px solid rgba(255,255,255,0.55);
    -webkit-backdrop-filter: blur(14px) brightness(1.1); backdrop-filter: blur(14px) brightness(1.1);
}
body.rd-public.profile-style-glass:not(.rd-dark) .connect-btn .secondary-btn.grey:hover { background: rgba(255,255,255,0.7); }
body.rd-public.profile-style-glass.rd-dark .connect-btn .primary-btn.connect-btn-new,
body.rd-public.profile-style-glass.rd-dark #connect-popup .primary-btn,
body.rd-public.profile-style-glass.rd-dark #save-contact-popup .primary-btn {
    background: rgba(255,255,255,0.78); color: rgba(20,20,20,0.95);
    border: 1px solid rgba(255,255,255,0.4);
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.18);
    backdrop-filter: blur(20px) saturate(180%) brightness(1.18);
    /* box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 14px rgba(0,0,0,0.3) !important; */
}
body.rd-public.profile-style-glass.rd-dark .connect-btn .secondary-btn.grey {
    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.95); border: 1px solid rgba(255,255,255,0.2);
}
body.rd-public.profile-style-glass.rd-dark .connect-btn .secondary-btn.grey:hover { background: rgba(255,255,255,0.18); }
/* Hover feedback that respects the owner's colour (slight dim, never replaces the background). */
body.rd-public.profile-style-glass .connect-btn .primary-btn.connect-btn-new:hover,
body.rd-public.profile-style-glass #connect-popup .primary-btn:hover,
body.rd-public.profile-style-glass #save-contact-popup .primary-btn:hover { filter: brightness(0.93); }
/* CTA icon follows the button's own text colour (currentColor) so it stays legible on the chosen background. */
body.rd-public.profile-style-glass .connect-btn .primary-btn.connect-btn-new svg [stroke],
body.rd-public.profile-style-glass #connect-popup .primary-btn svg [stroke],
body.rd-public.profile-style-glass #save-contact-popup .primary-btn svg [stroke] { stroke: currentColor !important; }

/* social pills on glass */
body.rd-public.profile-style-glass:not(.rd-dark) .social-media-details .social-badge a.user_social_media {
    background: rgba(255,255,255,0.5) !important; border-color: rgba(255,255,255,0.5) !important; color: rgba(20,20,20,0.95) !important;
    -webkit-backdrop-filter: blur(10px) brightness(1.1); backdrop-filter: blur(10px) brightness(1.1);
}
body.rd-public.profile-style-glass.rd-dark .social-media-details .social-badge a.user_social_media {
    background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.2) !important; color: rgba(255,255,255,0.95) !important;
}

/* RESPONSIVE — mobile (mirror existing breakpoints; the platform already drops sticky positioning <992px, so we only tidy spacing here). */
@media (max-width: 991px) {
    body.rd-public .profile-content-section { max-width: 100%; }
    body.rd-public .col-lg-7 .accordion-item { margin-top: 16px !important; }
    /* Below the lg breakpoint the two columns stack. The left profile card has no bottom margin in the base sheets (and the first right-section is pinned to margin-top:0), so the sections butt straight against the card. Add a gap. !important beats the base `.left-profile-section { margin: 0 auto }` at <=767px. */
    body.rd-public .left-profile-section { margin-bottom: 24px !important; }
}

/* SC-260727-tcp — tablet/foldable dead gutters. Below the lg breakpoint the legacy sheet hard-caps the
   stacked column at 448px and auto-centres it, in TWO places that must be released together or the profile
   card and the section list stop lining up: `.left-profile-section` (new_frontend.css:1335, unscoped base
   rule) and `.accordion-item` (new_frontend.css:3386, inside `@media (max-width: 767px)`). The redesign
   block above already overrides that same legacy accordion rule's margin-top, and public-profile.css:501
   releases `.profile-content-section`'s own 448px cap — but nothing ever released the max-width on these
   two, so the cap survived the redesign.

   Under ~480px the cap is wider than the screen allows, so it never bites and phones are already correct at
   16px per side. From 481px to 767px it pins the column at 448px and every leftover pixel becomes dead
   margin: 46px per side at 540, 64px at 576 (the reported width), 126px at 700, 160px at 767 — against the
   16px gap between panels, i.e. up to 10x the vertical rhythm. Releasing the cap lets the column fill the
   `.content-section` padding box so the side gutters are the same 16px as the vertical rhythm at every width
   below 768px, and joins continuously to the 720px cap that legitimately takes over at 768px (735px at 767
   -> 720px at 768). The 3/1 cover `aspect-ratio` (line 125) governs in this band, so widening the card
   rescales the cover without changing its crop.

   Scoped to body.rd-public: that class is on new_ui_connect[_redesign] only and this stylesheet loads only
   there, so the legacy 448px treatment still stands on every other page reusing these classes. Specificity
   (0,2,1) and (0,3,1) beat the legacy (0,1,0) rules outright — no !important needed. */
@media (max-width: 767px) {
    body.rd-public .left-profile-section,
    body.rd-public .col-lg-7 .accordion-item { max-width: none; }
}

/* =========================================================================
   ADDED (gated-contact-details) — locked contact rows, Unlock chip, locked
   Save Contact, owner banner, modal subtitle, reveal animation.
   Locked elements are ALWAYS neutral at rest — never the WL accent or the
   owner's custom button colors (the brand block in new_ui_connect.blade.php
   only recolors the chip's HOVER). Everything scoped body.rd-public.
========================================================================= */

/* Locked (teased) rows — tease text muted, label hidden until reveal, whole row opens the exchange modal. */
body.rd-public .rd-pc-row.gated { cursor: pointer; }
body.rd-public .rd-pc-row.gated .value { color: var(--swft-fg2); letter-spacing: 0.02em; font-weight: 500; }
body.rd-public.rd-dark .rd-pc-row.gated .value { color: #9A9A9A; }
body.rd-public.profile-style-glass:not(.rd-dark) .rd-pc-row.gated .value { color: rgba(20,20,20,0.6) !important; }
body.rd-public.profile-style-glass.rd-dark .rd-pc-row.gated .value { color: rgba(255,255,255,0.55) !important; }
body.rd-public .rd-pc-row.gated .label { display: none !important; }

/* Unlock chip */
body.rd-public .rd-lock-chip {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    padding: 3px 9px; border-radius: var(--swft-radius-pill);
    background: var(--swft-card); color: var(--swft-fg2);
    font-size: 11px; font-weight: 600; line-height: 1.35;
    border: 1px solid transparent;
    transition: background 150ms ease, color 150ms ease;
}
body.rd-public .rd-lock-chip svg { width: 10px; height: 10px; flex: none; }
body.rd-public .rd-pc-row.gated:hover .rd-lock-chip { background: var(--swft-fg1); color: #FFFFFF; }
body.rd-public.rd-dark .rd-lock-chip { background: #222222; color: #8E8E8E; border-color: #2E2E2E; }
body.rd-public.rd-dark .rd-pc-row.gated:hover .rd-lock-chip { background: #F5F5F5; color: #1B1B1B; border-color: transparent; }
body.rd-public.profile-style-glass:not(.rd-dark) .rd-lock-chip {
    background: rgba(255,255,255,0.3); color: rgba(20,20,20,0.6); border-color: rgba(255,255,255,0.35);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.rd-public.profile-style-glass:not(.rd-dark) .rd-pc-row.gated:hover .rd-lock-chip { background: rgba(20,20,20,0.75); color: #FFFFFF; border-color: transparent; }
body.rd-public.profile-style-glass.rd-dark .rd-lock-chip { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.14); }
body.rd-public.profile-style-glass.rd-dark .rd-pc-row.gated:hover .rd-lock-chip { background: rgba(255,255,255,0.88); color: #16161A; border-color: transparent; }

/* Locked Save Contact — grey fill in every theme; !important on purpose so the frosted glass
   defaults for #save-contact-popup .primary-btn (an id selector above) can never win over
   the locked-neutral look. The unlocked button never carries .cg-locked, so nothing else changes. */
body.rd-public button.cg-locked,
body.rd-public button.cg-locked:hover { box-shadow: none !important; }
body.rd-public button.cg-locked {
    background: var(--swft-card) !important; color: #9A9A9A !important;
    border: 1px solid var(--swft-border-soft) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.rd-public button.cg-locked:hover { background: #E9E9E9 !important; color: var(--swft-fg2) !important; filter: none !important; }
body.rd-public.rd-dark button.cg-locked { background: #222222 !important; color: #6E6E6E !important; border-color: #2E2E2E !important; }
body.rd-public.rd-dark button.cg-locked:hover { background: #2C2C2C !important; color: #9A9A9A !important; }
body.rd-public.profile-style-glass:not(.rd-dark) button.cg-locked {
    background: rgba(255,255,255,0.22) !important; color: rgba(20,20,20,0.45) !important; border-color: rgba(255,255,255,0.3) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.rd-public.profile-style-glass:not(.rd-dark) button.cg-locked:hover { background: rgba(255,255,255,0.32) !important; color: rgba(20,20,20,0.6) !important; }
body.rd-public.profile-style-glass.rd-dark button.cg-locked { background: rgba(255,255,255,0.05) !important; color: rgba(255,255,255,0.4) !important; border-color: rgba(255,255,255,0.1) !important; }
body.rd-public.profile-style-glass.rd-dark button.cg-locked:hover { background: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.6) !important; }
/* Icon swap inside the locked Save Contact: lock while .cg-locked, download after the in-place unlock. */
body.rd-public button .cg-ic-lock { display: none; }
body.rd-public button.cg-locked .cg-ic-lock { display: block; }
body.rd-public button.cg-locked .cg-ic-dl { display: none; }
body.rd-public button.cg-locked svg [stroke] { stroke: currentColor !important; }

/* Owner self-view banner — info blue, never accent. */
body.rd-public .rd-owner-note {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 10px 0 0; padding: 9px 12px;
    background: #EFF8FF; border: 1px solid #D2E7FA; border-radius: 10px;
    font-size: 12.5px; color: #0066CC; line-height: 17px;
}
body.rd-public .rd-owner-note svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
body.rd-public .rd-owner-note a { color: inherit; font-weight: 600; }
body.rd-public.rd-dark .rd-owner-note { background: rgba(0,102,204,0.15); border-color: rgba(107,174,255,0.3); color: #6BAEFF; }
body.rd-public.profile-style-glass:not(.rd-dark) .rd-owner-note { background: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.45); color: rgba(20,20,20,0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.rd-public.profile-style-glass.rd-dark .rd-owner-note { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.75); }

/* Exchange modal subtitle — one 13px line under the header (both variants). */
body.rd-public .connect-modal-sub { margin: 0 0 12px; font-size: 13px; color: var(--swft-fg2); line-height: 18px; }

/* Reveal-in-place animation after a successful exchange. */
@keyframes cg-reveal { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
body.rd-public .rd-pc-row.cg-revealed .value,
body.rd-public .rd-pc-row.cg-revealed .label { animation: cg-reveal 380ms var(--swft-ease); }