/*
    PUBLIC PROFILE — SECTION PANELS (redesign)
    Mockups: docs/superpowers/mockups/sections/* Scoped under body.rd-public, loaded AFTER public-profile.css so these rules outrank both new_frontend.css and the old .accordion-item re-skin in public-profile.css. Uses !important to match that file.
    Section markup now emits `.section-panel` (alongside the legacy `.accordion-item` root, kept so existing #main-sec-ref-{id} JS/layout still resolves). Mockup `.sx-phone ...` mobile rules are translated here to `@media (max-width: 640px)`.
============================================================ */

/* Base panel chrome */
body.rd-public .col-lg-7 .section-panel {
    background: #fff !important;
    border: 1px solid var(--swft-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-top: 16px !important;
    padding: 0 !important;
}
body.rd-public .col-lg-7 .section-panel:first-child { margin-top: 0 !important; }

/* SC-260727-inp: horizontal padding squared to the 18px vertical value (was 22px). The heading's
   horizontal padding MUST track .section-body's — the heading text and the first row of body content
   share a left edge, and a 4px difference reads as a misaligned heading. */
body.rd-public .col-lg-7 .section-panel .section-head {
    padding: 18px 18px 14px !important;
    border-bottom: 1px solid var(--swft-border-soft) !important;
    margin: 0 !important;
}
body.rd-public .col-lg-7 .section-panel .section-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--swft-fg1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}
body.rd-public .col-lg-7 .section-panel .section-icon {
    width: 28px !important; height: 28px !important;
    min-height: 28px !important; max-height: 28px !important; aspect-ratio: 1 / 1 !important;
    border-radius: 8px !important;
    display: grid !important; place-items: center !important;
    flex: none !important; align-self: center !important;
    border: 0 !important;
}
body.rd-public .col-lg-7 .section-panel .section-icon svg { width: 14px !important; height: 14px !important; }
/* Literal chip colours — the --swft-icon* design tokens are NOT defined on the public profile, so heading-on sections rendered a colourless (transparent) icon chip. Hardcode the palette (green / coral / purple / blue). */
body.rd-public .col-lg-7 .section-panel .section-icon.c1 { background: #D9E9DD !important; color: rgb(48, 182, 81) !important; }
body.rd-public .col-lg-7 .section-panel .section-icon.c2 { background: #F1DFDD !important; color: rgb(245, 101, 81) !important; }
body.rd-public .col-lg-7 .section-panel .section-icon.c3 { background: #E7DBEE !important; color: rgb(166, 62, 218) !important; }
body.rd-public .col-lg-7 .section-panel .section-icon.c4 { background: #E0ECF9 !important; color: rgb(0, 102, 204) !important; }

/* TEMPORARY (requested 2026-06-24): hide the section heading icon (the per-type chip, e.g. the chain-link next to "Website Links") on the PUBLIC profile only. It still renders in the myprofile editor (which uses .rd-section-icon, a different class, and never carries body.rd-public). Same selector specificity as the base rule above + !important so it beats `display: grid !important`. Link-item favicons are <img class="img-fluid white_bg"> inside .link-content — untouched. To restore, delete this one rule (or swap to a per-section toggle later).
   UPDATE 2026-06-30 (section-icon-visibility): swapped to the per-section toggle. Section icons stay HIDDEN BY
   DEFAULT (the rule below) and are shown only on opted-in sections — .icon-on is added to the panel when
   user_sections.icon_status == 1. */
body.rd-public .col-lg-7 .section-panel .section-icon { display: none !important; }
/* ADDED (section-icon-visibility): opted-in sections show their icon. DEFAULT colour = the c1-c4 palette
   (the .c1-.c4 rules above — same green/coral/purple/blue the My Profile editor uses), so a brand-OFF public
   profile matches the editor instead of going black. When the profile's brand colour is ON, new_ui_connect.blade.php
   injects an override to the WL accent (tinted chip + brand glyph) — see that file's $ownerBrandVars block. */
body.rd-public .col-lg-7 .section-panel.icon-on .section-icon { display: grid !important; }

/* SC-260727-inp: was `18px 22px` — 22px horizontal against 18px vertical. Squared to 18px all round.
   Inherited verbatim from the approved mockup (docs/superpowers/mockups/sections/_skeleton.css:323),
   which was drawn at desktop width where the panel is ~700px; at 390px the panel is 358px, so the same
   22px cost 12% of the width per side. Keep in step with .section-head above and .heading-none below. */
body.rd-public .col-lg-7 .section-panel .section-body { padding: 18px !important; }

/* Heading-hidden variant (title_status == 0) */
body.rd-public .col-lg-7 .section-panel.heading-none .section-head { display: none !important; }
/* SC-260727-inp: was a uniform 22px — already square, but at the larger value. Dropped to 18px so a
   heading-hidden section has the same inset as a heading-shown one. */
body.rd-public .col-lg-7 .section-panel.heading-none .section-body { padding: 18px !important; }

/* Dark theme */
body.rd-public.rd-dark .col-lg-7 .section-panel {
    background: var(--swft-bg) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.rd-public.rd-dark .col-lg-7 .section-panel .section-head { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .section-title { color: var(--swft-fg1) !important; }

/* Glass theme match the contact-card .content-box glass exactly (public-profile.css:519-537) so the section panels read identically to the profile card in both glass-light and glass-dark. */
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel {
    background: rgba(255, 255, 255, 0.36) !important;
    backdrop-filter: blur(28px) saturate(180%) brightness(1.12) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.12) !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 .col-lg-7 .section-panel {
    background: rgba(22, 22, 22, 0.45) !important;
    backdrop-filter: blur(28px) saturate(160%) brightness(0.85) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    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;
}
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .section-head { border-bottom-color: rgba(255, 255, 255, 0.22) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .section-head { border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .section-title { color: rgba(20, 20, 20, 0.95) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .section-title { color: rgba(255, 255, 255, 0.95) !important; }

/* Keep the legacy heading span readable inside the new head (it carries .heading-on in some inline sections). */
body.rd-public .col-lg-7 .section-panel .section-title .heading-on,
body.rd-public .col-lg-7 .section-panel .section-title span { color: inherit !important; font: inherit !important; }

/* Per-section rules (Tasks 1-9). */

/* Website Links (id1) — .link-list / .link-item */
body.rd-public .col-lg-7 .section-panel .link-list { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.rd-public .col-lg-7 .section-panel .link-item {
    display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 14px !important; border: 1px solid var(--swft-border-soft) !important; border-radius: 12px !important; text-decoration: none !important; color: inherit !important; transition: border-color 150ms ease, background 150ms ease !important;
}
body.rd-public .col-lg-7 .section-panel .link-item:hover { border-color: var(--swft-border) !important; background: var(--swft-bg-page) !important; }
body.rd-public .col-lg-7 .section-panel .link-thumb {
    width: 36px !important; height: 36px !important; border-radius: 8px !important; flex: none !important; background: transparent !important; display: grid !important; place-items: center !important; color: var(--swft-fg-muted) !important; overflow: hidden !important;
}
/* keep a neutral box only behind the placeholder fallback svg, never behind a real favicon */
body.rd-public .col-lg-7 .section-panel .link-thumb:not(:has(img)) { background: var(--swft-card) !important; }
body.rd-public .col-lg-7 .section-panel .link-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; }
body.rd-public .col-lg-7 .section-panel .link-thumb svg { width: 18px !important; height: 18px !important; }
body.rd-public .col-lg-7 .section-panel .link-text { flex: 1 !important; min-width: 0 !important; }
body.rd-public .col-lg-7 .section-panel .link-title { font-size: 14px !important; font-weight: 500 !important; line-height: 18px !important; color: var(--swft-fg1) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.rd-public .col-lg-7 .section-panel .link-desc { font-size: 12px !important; color: var(--swft-fg-muted) !important; margin: 2px 0 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.rd-public .col-lg-7 .section-panel .link-arrow { color: var(--swft-fg-muted) !important; flex: none !important; display: inline-flex !important; }
body.rd-public .col-lg-7 .section-panel .link-arrow svg { width: 14px !important; height: 14px !important; }
/* dark */
body.rd-public.rd-dark .col-lg-7 .section-panel .link-item { border-color: rgba(255,255,255,0.08) !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .link-item:hover { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.16) !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .link-thumb:not(:has(img)) { background: rgba(255,255,255,0.06) !important; }
/* glass */
body.rd-public.profile-style-glass .col-lg-7 .section-panel .link-item { background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.18) !important; }
body.rd-public.profile-style-glass .col-lg-7 .section-panel .link-item:hover { background: rgba(255,255,255,0.3) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .link-item { 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 .section-panel .link-item:hover { background: rgba(255,255,255,0.12) !important; }

/* Social Links / App Icons (id2) — .sl-tile-grid / .sl-tile */
/* minmax(0,1fr): plain 1fr = minmax(auto,1fr), whose auto minimum = the track's min-content width. A long white-space:nowrap .label then forces the column wider than its share, blowing the grid past the profile column (long titles overflow instead of ellipsis-clamping). minmax(0,…) + min-width:0 on the tile caps each track so the .label's overflow:hidden/ellipsis actually fires. */
body.rd-public .col-lg-7 .section-panel .sl-tile-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.rd-public .col-lg-7 .section-panel .sl-tile {
    display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding: 16px 18px !important; border: 1px solid var(--swft-border-soft) !important; border-radius: 12px !important; background: #fff !important; text-decoration: none !important; color: inherit !important; min-height: 100px !important; min-width: 0 !important; transition: border-color 150ms ease, background 150ms ease !important;
}
body.rd-public .col-lg-7 .section-panel .sl-tile:hover { border-color: var(--swft-border) !important; background: var(--swft-bg-page) !important; }
/* Show the natural brand icon (no colored badge, no white-invert) — matches the contact-card social pills. background:transparent !important overrides the inline style="background:{css_color_value}" emitted by the builder. */
body.rd-public .col-lg-7 .section-panel .sl-tile .badge { width: 32px !important; height: 32px !important; border-radius: 8px !important; display: grid !important; place-items: center !important; flex: none !important; overflow: hidden !important; background: transparent !important; padding: 0px; }
body.rd-public .col-lg-7 .section-panel .sl-tile .badge svg { width: 100% !important; height: 100% !important; filter: none !important; }
body.rd-public .col-lg-7 .section-panel .sl-tile .badge.has-img { background: transparent !important; }
body.rd-public .col-lg-7 .section-panel .sl-tile .badge.has-img img { width: 28px !important; height: 28px !important; object-fit: contain !important; filter: none !important; max-width: 28px !important; }
body.rd-public .col-lg-7 .section-panel .sl-tile .label { font-size: 13px !important; font-weight: 500 !important; color: var(--swft-fg1) !important; line-height: 1.3 !important; width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; margin: 0 !important; }

@media (max-width: 640px) {
    body.rd-public .col-lg-7 .section-panel .sl-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body.rd-public .col-lg-7 .section-panel .sl-tile { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 14px !important; min-height: 0 !important; }
    body.rd-public .col-lg-7 .section-panel .sl-tile .label { width: auto !important; flex: 1 !important; min-width: 0 !important; }
}
/* dark */
body.rd-public.rd-dark .col-lg-7 .section-panel .sl-tile { background: var(--swft-bg) !important; border-color: rgba(255,255,255,0.08) !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .sl-tile:hover { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.16) !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .sl-tile .label { color: var(--swft-fg1) !important; }
/* glass */
body.rd-public.profile-style-glass .col-lg-7 .section-panel .sl-tile { background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.18) !important; }
body.rd-public.profile-style-glass .col-lg-7 .section-panel .sl-tile:hover { background: rgba(255,255,255,0.3) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .sl-tile { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; }
/* Dark-glass hover: needed because the dark-glass base rule above has the SAME specificity as the plain-glass :hover (line ~139) and is later in source, so it would otherwise override the hover background and the tile would never react. Mirrors the .link-item dark-glass hover. */
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .sl-tile:hover { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.2) !important; }

/* Text Section (id3) — .ts-body (rendered TinyMCE HTML) */
body.rd-public .col-lg-7 .section-panel .ts-body { font-size: 13.5px !important; line-height: 1.55 !important; color: var(--swft-fg1) !important; }
body.rd-public .col-lg-7 .section-panel .ts-body p { margin: 0 0 10px !important; }
body.rd-public .col-lg-7 .section-panel .ts-body p:last-child { margin: 0 !important; }
body.rd-public .col-lg-7 .section-panel .ts-body h1, body.rd-public .col-lg-7 .section-panel .ts-body h2 { font-size: 16px !important; font-weight: 600 !important; margin: 0 0 8px !important; color: var(--swft-fg1) !important; }
body.rd-public .col-lg-7 .section-panel .ts-body h3, body.rd-public .col-lg-7 .section-panel .ts-body h4 { font-size: 14px !important; font-weight: 600 !important; margin: 12px 0 6px !important; color: var(--swft-fg1) !important; }
body.rd-public .col-lg-7 .section-panel .ts-body ul, body.rd-public .col-lg-7 .section-panel .ts-body ol { margin: 0 0 10px !important; padding-left: 20px !important; }
body.rd-public .col-lg-7 .section-panel .ts-body li { margin-bottom: 2px !important; }
body.rd-public .col-lg-7 .section-panel .ts-body strong, body.rd-public .col-lg-7 .section-panel .ts-body b { font-weight: 600 !important; }
body.rd-public .col-lg-7 .section-panel .ts-body em, body.rd-public .col-lg-7 .section-panel .ts-body i { font-style: italic !important; }
body.rd-public .col-lg-7 .section-panel .ts-body a { color: var(--swft-link) !important; text-decoration: underline !important; text-underline-offset: 2px !important; }
body.rd-public .col-lg-7 .section-panel .ts-body img { max-width: 100% !important; height: auto !important; border-radius: 8px !important; }
/* dark / glass inherit fg1 from base; ensure muted contrast */
body.rd-public.rd-dark .col-lg-7 .section-panel .ts-body { color: var(--swft-fg1) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .ts-body { color: rgba(20,20,20,0.82) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .ts-body { color: rgba(255,255,255,0.82) !important; }

/* Photo Gallery (id4) — existing masonry/Fancybox kept; align labels to mockup */
body.rd-public .col-lg-7 .section-panel .gallery-list { margin: 0 !important; padding: 0 !important; }
body.rd-public .col-lg-7 .section-panel .gallery-list.gallery-masonry > li { border-radius: 10px !important; overflow: hidden !important; margin-bottom: 6px !important; align-self: start !important; }
body.rd-public .col-lg-7 .section-panel .view_gallery_img { border-radius: 10px !important; }
body.rd-public .col-lg-7 .section-panel figcaption.photo_label.d-show,
body.rd-public .col-lg-7 .section-panel span.basic-text-photo.photo_label.d-show { font-size: 12px !important; padding: 8px 10px 8px !important; background: linear-gradient(transparent, rgba(0,0,0,0.65)) !important; }

/* Video Embed (id5) — .ve-frame wraps the real provider iframe */
body.rd-public .col-lg-7 .section-panel .ve-frame {
    position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important;
    border-radius: 12px !important; overflow: hidden !important; background: #0B0B0B !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
body.rd-public .col-lg-7 .section-panel .ve-frame iframe,
body.rd-public .col-lg-7 .section-panel .ve-frame video,
body.rd-public .col-lg-7 .section-panel .ve-frame embed,
body.rd-public .col-lg-7 .section-panel .ve-frame object,
body.rd-public .col-lg-7 .section-panel .ve-frame > * {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    border: 0 !important; max-width: none !important; display: block !important;
}
@media (max-width: 640px) {
    body.rd-public .col-lg-7 .section-panel .ve-frame { aspect-ratio: auto !important; height: 200px !important; }
}

/* Calendar Embed (id6) — .ce-frame wraps the real Calendly/Zoho embed */
body.rd-public .col-lg-7 .section-panel .ce-frame {
    position: relative !important; width: 100% !important;
    border-radius: 12px !important; overflow: hidden !important;
    border: 1px solid var(--swft-border) !important; background: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important; min-height: 0 !important;
}
/* Let the embed size itself; only provide a sane floor so non-self-sizing widgets are usable. Avoids reserving huge empty space for dead embeds. */
body.rd-public .col-lg-7 .section-panel .ce-frame iframe {
    width: 100% !important; min-height: 800px !important; border: 0 !important; display: block !important;
}
body.rd-public .col-lg-7 .section-panel .ce-frame .calendly-inline-widget,
body.rd-public .col-lg-7 .section-panel .ce-frame > * { width: 100% !important; }
@media (max-width: 640px) {
    body.rd-public .col-lg-7 .section-panel .ce-frame iframe { min-height: 750px !important; }
}
/* Custom height (user_sections.embed_height → --ce-embed-h): the extra class outranks both
   min-height floors above at equal !important, and CSS height beats the iframe's baked
   height="1000px" attribute (Zoho/TidyCal). The 800px fallback keeps the floor if the class
   ever appears without the variable (invalid-at-computed-value-time would unset it). */
body.rd-public .col-lg-7 .section-panel .ce-frame.ce-h-custom iframe {
    height: var(--ce-embed-h, 800px) !important;
    min-height: var(--ce-embed-h, 800px) !important;
    max-height: var(--ce-embed-h, 800px) !important;
}
body.rd-public.rd-dark .col-lg-7 .section-panel .ce-frame { border-color: rgba(255,255,255,0.1) !important; background: var(--swft-bg) !important; }

/* Link Profile / Meet the Team (id7) — .mt-list / .mt-card */
body.rd-public .col-lg-7 .section-panel .mt-list-wrap { position: relative !important; }
body.rd-public .col-lg-7 .section-panel .mt-list { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.rd-public .col-lg-7 .section-panel .mt-card {
    position: relative !important; z-index: 1 !important; background: #fff !important; border: 1px solid var(--swft-border) !important;
    border-radius: 16px !important; padding: 16px !important; min-height: 100px !important; overflow: hidden !important;
    text-decoration: none !important; color: inherit !important; display: flex !important; flex-direction: column !important; gap: 10px !important;
    transition: border-color 150ms ease, background 150ms ease !important;
}
body.rd-public .col-lg-7 .section-panel .mt-card:hover { border-color: #B7BFCB !important; background: #FCFCFD !important; }
body.rd-public .col-lg-7 .section-panel .mt-card-arrow { position: absolute !important; top: 10px !important; right: 10px !important; width: 18px !important; height: 18px !important; color: var(--swft-fg-muted) !important; z-index: 2 !important; }
body.rd-public .col-lg-7 .section-panel .mt-card-arrow svg { width: 14px !important; height: 14px !important; }
body.rd-public .col-lg-7 .section-panel .mt-avatar-wrap { position: relative !important; width: 50px !important; height: 50px !important; flex: none !important; }
body.rd-public .col-lg-7 .section-panel .mt-avatar { width: 50px !important; height: 50px !important; border-radius: 50% !important; overflow: hidden !important; background: var(--swft-card) !important; display: grid !important; place-items: center !important; font-size: 16px !important; font-weight: 600 !important; color: var(--swft-fg1) !important; }
body.rd-public .col-lg-7 .section-panel .mt-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; }
body.rd-public .col-lg-7 .section-panel .mt-avatar.a-rose { background: #FBD5D5 !important; color: #9F1239 !important; }
body.rd-public .col-lg-7 .section-panel .mt-avatar.a-violet { background: #E7DBEE !important; color: #6B21A8 !important; }
body.rd-public .col-lg-7 .section-panel .mt-avatar.a-amber { background: #FEF3C7 !important; color: #92400E !important; }
body.rd-public .col-lg-7 .section-panel .mt-avatar.a-emerald { background: #D1FAE5 !important; color: #065F46 !important; }
body.rd-public .col-lg-7 .section-panel .mt-avatar.a-blue { background: #DBEAFE !important; color: #1E40AF !important; }
body.rd-public .col-lg-7 .section-panel .mt-avatar.a-fuchsia { background: #FCE7F3 !important; color: #9D174D !important; }
/* Dark mode: KEEP the per-person colours (as in light mode) but dark-tune them. The light pastels
   (a-rose #FBD5D5 …) read washed-out / over-bright as a 50px solid circle on the dark surface, so
   each variant gets a translucent colour tint + a bright initial — matching the app's dark
   colour-chip convention (icon tokens / analytics delta pills use rgba(...,~0.2) bg + a bright fg).
   Per-variant rules at (0,6,1) beat the light .a-* variants (0,5,1) !important without relying on
   source order; also covers glass-dark (body carries .rd-dark there too). Image avatars cover the fill. */
body.rd-public.rd-dark .col-lg-7 .section-panel .mt-avatar.a-rose    { background: rgba(244,63,94,0.22) !important;  color: #FDA4AF !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .mt-avatar.a-violet  { background: rgba(168,85,247,0.22) !important; color: #D8B4FE !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .mt-avatar.a-amber   { background: rgba(245,158,11,0.22) !important; color: #FCD34D !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .mt-avatar.a-emerald { background: rgba(16,185,129,0.22) !important; color: #6EE7B7 !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .mt-avatar.a-blue    { background: rgba(59,130,246,0.22) !important; color: #93C5FD !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .mt-avatar.a-fuchsia { background: rgba(232,121,249,0.22) !important; color: #F0ABFC !important; }
body.rd-public .col-lg-7 .section-panel .mt-logo-overlay { position: absolute !important; right: -6px !important; bottom: -4px !important; width: 22px !important; height: 22px !important; border-radius: 999px !important; border: 1px solid #EAECF0 !important; background: #fff !important; overflow: hidden !important; display: grid !important; place-items: center !important; }
body.rd-public .col-lg-7 .section-panel .mt-logo-overlay img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; }
body.rd-public .col-lg-7 .section-panel .mt-card-meta { min-width: 0 !important; }
body.rd-public .col-lg-7 .section-panel .mt-card-name { font-size: 14px !important; font-weight: 500 !important; color: var(--swft-fg1) !important; line-height: 1.25 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.rd-public .col-lg-7 .section-panel .mt-card-title { font-size: 12px !important; color: var(--swft-fg-muted) !important; line-height: 1.3 !important; margin-top: 2px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
/* "+N more" — rotated vertical tab tucked behind the RIGHT edge of the last card (per the mockup): z-index below the cards so the last card overlaps its left edge and the tab peeks out on the right. Same on desktop + mobile. display:block (no !important) so the responsive JS can show/hide it. */
body.rd-public .col-lg-7 .section-panel .mt-more-btn {
    display: block;
    position: absolute !important; right: -15px !important; top: 50% !important; z-index: 10 !important;
    transform: translateY(-50%) !important;
    writing-mode: vertical-rl !important; /* natural vertical pill — predictable position (no rotate bounding-box) */
    margin: 0 !important; width: auto !important;
    background: #fff !important; border: 1px solid var(--swft-border) !important; border-radius: 8px !important;
    padding: 12px 7px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--swft-fg1) !important;
    cursor: pointer !important; white-space: nowrap !important; text-align: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    transition: border-color 150ms ease, background 150ms ease !important;
}
body.rd-public .col-lg-7 .section-panel .mt-more-btn:hover { border-color: #B7BFCB !important; background: #FCFCFD !important; }
/* keep the meet-team panel/body from clipping the tab at the right padding edge */
body.rd-public .col-lg-7 .section-panel:has(.mt-list-wrap) { overflow: visible !important; }
body.rd-public .col-lg-7 .section-panel:has(.mt-list-wrap) .section-body { overflow: visible !important; }
body.rd-public .col-lg-7 .section-panel .mt-list-wrap { overflow: visible !important; }

@media (max-width: 640px) {
    body.rd-public .col-lg-7 .section-panel .mt-list { grid-template-columns: repeat(2, 1fr) !important; }
    /* mockup shows 2 members on mobile; hide the rest (still in the "+N more" modal) */
    body.rd-public .col-lg-7 .section-panel .mt-list .mt-card:nth-child(n+3) { display: none !important; }
}
/* dark */
body.rd-public.rd-dark .col-lg-7 .section-panel .mt-card { background: var(--swft-bg) !important; border-color: rgba(255,255,255,0.08) !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .mt-card:hover { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.16) !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .mt-more-btn { background: var(--swft-bg) !important; border-color: rgba(255,255,255,0.12) !important; color: var(--swft-fg1) !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .mt-logo-overlay { border-color: rgba(255,255,255,0.12) !important; background: var(--swft-bg) !important; }
/* glass (light) */
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .mt-card { background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.3) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .mt-card:hover { background: rgba(255,255,255,0.3) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .mt-more-btn { background: rgba(255,255,255,0.3) !important; border-color: rgba(255,255,255,0.4) !important; color: rgba(20,20,20,0.95) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .mt-card-name { color: rgba(20,20,20,0.95) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .mt-card-title { color: rgba(20,20,20,0.6) !important; }
/* glass + dark */
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .mt-card { 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 .section-panel .mt-card:hover { background: rgba(255,255,255,0.12) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .mt-more-btn { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.95) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .mt-card-name { color: rgba(255,255,255,0.95) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .mt-card-title { color: rgba(255,255,255,0.6) !important; }

/* HTML Embed (id9) — .he-frame wraps the sandboxed iframe */
body.rd-public .col-lg-7 .section-panel .he-frame {
    position: relative !important; width: 100% !important;
    border-radius: 10px !important; overflow: hidden !important;
    border: 1px solid var(--swft-border) !important; background: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
body.rd-public .col-lg-7 .section-panel .he-frame iframe.html-embed-iframe { width: 100% !important; border: 0 !important; display: block !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .he-frame { border-color: rgba(255,255,255,0.1) !important; background: var(--swft-bg) !important; }
body.rd-public.profile-style-glass .col-lg-7 .section-panel .he-frame { background: rgba(255,255,255,0.6) !important; }

/* Reviews (id10) — Owl carousel kept; slides re-skinned to mockup cards */
body.rd-public .col-lg-7 .section-panel .review-section { margin: 0 !important; }
body.rd-public .col-lg-7 .section-panel .review_blog-section {
    background: #fff !important; border: 1px solid var(--swft-border-soft) !important; border-radius: 12px !important;
    padding: 20px !important; min-height: 185px !important; display: flex !important; flex-direction: column !important;
    color: var(--swft-fg1) !important; box-shadow: none !important;
}
body.rd-public .col-lg-7 .section-panel .review-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 12px !important; min-height: 24px !important; }
body.rd-public .col-lg-7 .section-panel .rating-stars { display: inline-flex !important; align-items: center !important; gap: 2px !important; }
body.rd-public .col-lg-7 .section-panel .rating-stars svg { width: 18px !important; height: 18px !important; }
body.rd-public .col-lg-7 .section-panel .review-logo { display: inline-flex !important; align-items: center !important; height: 24px !important; flex: none !important; }
body.rd-public .col-lg-7 .section-panel .review-logo svg, body.rd-public .col-lg-7 .section-panel .review-logo img { height: 22px !important; width: auto !important; }
body.rd-public .col-lg-7 .section-panel .review-content { flex: 1 1 auto !important; min-height: 0 !important; }
body.rd-public .col-lg-7 .section-panel .review-content .fw-semibold { font-size: 14px !important; font-weight: 600 !important; color: var(--swft-fg1) !important; margin: 0 0 6px !important; line-height: 1.35 !important; }
body.rd-public .col-lg-7 .section-panel .review_content_basic { font-size: 13px !important; color: var(--swft-fg2) !important; line-height: 1.5 !important; margin: 0 !important; }
body.rd-public .col-lg-7 .section-panel .review_content_basic span { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
body.rd-public .col-lg-7 .section-panel .review_content_basic a { color: var(--swft-link) !important; font-weight: 500 !important; text-decoration: none !important; margin-left: 2px !important; }
body.rd-public .col-lg-7 .section-panel .reviewer-info { display: flex !important; align-items: center !important; gap: 12px !important; border-top: 1px solid #EAECF0 !important; padding-top: 14px !important; margin-top: 14px !important; }
body.rd-public .col-lg-7 .section-panel .reviewr-icon { width: 40px !important; height: 40px !important; border-radius: 50% !important; overflow: hidden !important; flex: none !important; display: grid !important; place-items: center !important; background: var(--swft-card) !important; }
body.rd-public .col-lg-7 .section-panel .reviewr-icon img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; margin-right: 0px; }
body.rd-public .col-lg-7 .section-panel .reviewr-content { min-width: 0 !important; flex: 1 !important; }
body.rd-public .col-lg-7 .section-panel .reviewr-content p { margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.rd-public .col-lg-7 .section-panel .reviewr-content p:first-child { font-size: 13px !important; font-weight: 500 !important; color: var(--swft-fg1) !important; line-height: 1.3 !important; }
body.rd-public .col-lg-7 .section-panel .reviewr-content p.grey-500 { font-size: 12px !important; color: var(--swft-fg-muted) !important; margin-top: 1px !important; }
/* dark */
body.rd-public.rd-dark .col-lg-7 .section-panel .review_blog-section { background: var(--swft-bg) !important; border-color: rgba(255,255,255,0.08) !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .reviewer-info { border-top-color: rgba(255,255,255,0.08) !important; }
body.rd-public.rd-dark .col-lg-7 .section-panel .reviewr-icon { background: rgba(255,255,255,0.06) !important; }
/* glass (light) */
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .review_blog-section { background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.3) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .reviewer-info { border-top-color: rgba(255,255,255,0.3) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .reviewr-content p:first-child,
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .review-content .fw-semibold { color: rgba(20,20,20,0.95) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .review_content_basic { color: rgba(20,20,20,0.7) !important; }
/* glass + dark */
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .review_blog-section { 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 .section-panel .reviewer-info { border-top-color: rgba(255,255,255,0.12) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .reviewr-content p:first-child,
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .review-content .fw-semibold { color: rgba(255,255,255,0.95) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .review_content_basic { color: rgba(255,255,255,0.75) !important; }
/* Right-edge "more to scroll" fade. Shown only when there is more than one review (Reviews.php emits `single-review-only` for exactly one → nothing peeks → no fade). The gradient endpoint matches each theme's section-panel background so the peeking card dissolves into the panel instead of sitting under a mismatched bar. */
/* light / normal — panel bg is #fff */
body.rd-public .col-lg-7 .section-panel .review-slider-section::after { background-image: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%) !important; }
/* dark / normal — panel bg is var(--swft-bg) */
body.rd-public.rd-dark .col-lg-7 .section-panel .review-slider-section::after { background-image: linear-gradient(270deg, var(--swft-bg) 0%, rgba(0,0,0,0) 100%) !important; }
/* glass (light + dark) — translucent veil so it reads as a soft fade over the blurred photo background rather than an opaque colour bar */
body.rd-public.profile-style-glass:not(.rd-dark) .col-lg-7 .section-panel .review-slider-section::after { background-image: linear-gradient(270deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 100%) !important; }
body.rd-public.profile-style-glass.rd-dark .col-lg-7 .section-panel .review-slider-section::after { background-image: linear-gradient(270deg, rgba(22,22,22,0.55) 0%, rgba(22,22,22,0) 100%) !important; }
/* single review → no peek → no fade, in every theme/style */
body.rd-public .col-lg-7 .section-panel .review-slider-section.single-review-only::after { display: none !important; }

/* Equal-height review slides. The ONLY visible card is .review_blog-section (styled above). Owl's slide wrappers (.item › .row › .col-md-12) are flattened to transparent, zero-box pass-throughs — otherwise the legacy `.item { background:#fff }` (new_frontend.css) paints a second box that peeks beside/below the card and reads as a different background from the other sections. .owl-stage as a flexbox stretches every slide to the tallest review; the chain below passes that height down so .review_blog-section fills it, and its .review-content (flex:1 1 auto) keeps the reviewer row pinned to the bottom — no ragged gap under short reviews. */
body.rd-public .col-lg-7 .section-panel .review-slider-section .owl-stage { display: flex !important; }
body.rd-public .col-lg-7 .section-panel .review-slider-section .owl-item { display: flex !important; flex: 0 0 auto !important; height: auto !important; }
body.rd-public .col-lg-7 .section-panel .review-slider-section .item {
    display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; margin: 0 !important;
}
body.rd-public .col-lg-7 .section-panel .review-slider-section .item > .row { display: flex !important; flex: 1 1 auto !important; width: 100% !important; margin: 0 !important; }
body.rd-public .col-lg-7 .section-panel .review-slider-section .item .col-md-12 { display: flex !important; flex-direction: column !important; padding: 0 !important; }
body.rd-public .col-lg-7 .section-panel .review-slider-section .review_blog-section { flex: 1 1 auto !important; }

/* Public-profile MODALS — redesign chrome (overrides Bootstrap) Scoped under body.rd-public. Excludes #share-profile-public (already custom-styled) and never touches the .primary-btn CTA (carries the profile's contact-button brand colour via inline style). */
body.rd-public .modal-backdrop.show { background: rgba(0,0,0,0.4) !important; opacity: 1 !important; backdrop-filter: none !important; }
body.rd-public .modal:not(#share-profile-public) .modal-dialog { max-width: 440px !important; }
/* :not(#share-profile-public) added to outrank the generic 440px rule above (its :not(#id) raises specificity by one id). */
body.rd-public .modal.link-profile-popup:not(#share-profile-public) .modal-dialog { max-width: 790px !important; }
body.rd-public .modal:not(#share-profile-public) .modal-content {
    background: #fff !important;
    border: 1px solid var(--swft-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
    overflow: hidden !important;
}
body.rd-public .modal:not(#share-profile-public) .modal-header {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 18px 20px 14px !important;
    border-bottom: 1px solid var(--swft-border-soft) !important;
}
body.rd-public .modal:not(#share-profile-public) .modal-header .modal-title,
body.rd-public .modal:not(#share-profile-public) .modal-header h4 {
    font-size: 16px !important; font-weight: 600 !important; color: var(--swft-fg1) !important; margin: 0 !important;
}
body.rd-public .modal:not(#share-profile-public) .modal-header .btn-close {
    /* legacy new_frontend.css pins this absolute at top:0 (sits high/uncentered) — re-center it vertically against the title and inset it from the right edge. */
    position: absolute !important; top: 50% !important; right: 16px !important;
    bottom: auto !important; left: auto !important; transform: translateY(-50%) !important;
    width: 30px !important; height: 30px !important; padding: 0 !important; margin: 0 !important;
    border-radius: 8px !important; border: none !important; background: transparent !important; box-shadow: none !important;
    color: var(--swft-fg-muted) !important; opacity: 1 !important; flex: none !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    transition: background 150ms ease, color 150ms ease !important;
}
body.rd-public .modal:not(#share-profile-public) .modal-header .btn-close::after,
body.rd-public .modal:not(#share-profile-public) .modal-header .btn-close::before { display: none !important; }
body.rd-public .modal:not(#share-profile-public) .modal-header .btn-close:hover { background: var(--swft-card) !important; color: var(--swft-fg1) !important; }
body.rd-public .modal:not(#share-profile-public) .modal-header .btn-close svg { width: 18px !important; height: 18px !important; }
body.rd-public .modal:not(#share-profile-public) .modal-header .btn-close svg path { stroke: currentColor !important; }
body.rd-public .modal:not(#share-profile-public) .modal-body { padding: 18px 20px !important; }
body.rd-public .modal:not(#share-profile-public) .modal-footer {
    padding: 14px 20px 18px !important; border-top: 1px solid var(--swft-border-soft) !important; gap: 8px !important;
}
/* Form fields inside redesign modals (connect/save use class="input") */
body.rd-public .modal:not(#share-profile-public) .modal-body input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.rd-public .modal:not(#share-profile-public) .modal-body textarea,
body.rd-public .modal:not(#share-profile-public) .modal-body select {
    border: 1px solid var(--swft-border) !important; border-radius: 10px !important;
    padding: 10px 12px !important; font-size: 14px !important; color: var(--swft-fg1) !important;
    background: #fff !important; box-shadow: none !important;
    transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
body.rd-public .modal:not(#share-profile-public) .modal-body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
body.rd-public .modal:not(#share-profile-public) .modal-body textarea:focus,
body.rd-public .modal:not(#share-profile-public) .modal-body select:focus {
    outline: none !important; border-color: var(--swft-fg1) !important; box-shadow: 0 0 0 3px var(--swft-accent-ring, rgba(34,34,34,0.08)) !important;
}
/* intl-tel-input (separate dial code): the generic input rule above forces padding-left:12px, so the typed number renders UNDER the flag + "+code" prefix. Re-open left room sized to each dial-code-length class (selected-flag width + gap). The extra .intl-tel-input.* classes outrank the generic rule; !important wins the cascade. */
body.rd-public .modal:not(#share-profile-public) .modal-body .intl-tel-input.separate-dial-code .selected-flag {
    background: transparent !important;
}
body.rd-public .modal:not(#share-profile-public) .modal-body .intl-tel-input.separate-dial-code .selected-dial-code {
    color: var(--swft-fg1) !important;
}
body.rd-public .modal:not(#share-profile-public) .modal-body .intl-tel-input.separate-dial-code.iti-sdc-2 input,
body.rd-public .modal:not(#share-profile-public) .modal-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input {
    padding-left: 76px !important;
}
body.rd-public .modal:not(#share-profile-public) .modal-body .intl-tel-input.separate-dial-code.iti-sdc-3 input,
body.rd-public .modal:not(#share-profile-public) .modal-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input {
    padding-left: 84px !important;
}
body.rd-public .modal:not(#share-profile-public) .modal-body .intl-tel-input.separate-dial-code.iti-sdc-4 input,
body.rd-public .modal:not(#share-profile-public) .modal-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input {
    padding-left: 92px !important;
}
body.rd-public .modal:not(#share-profile-public) .modal-body .intl-tel-input.separate-dial-code.iti-sdc-5 input,
body.rd-public .modal:not(#share-profile-public) .modal-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input {
    padding-left: 100px !important;
}
/* Generic Bootstrap buttons inside these modals (NOT the .primary-btn CTA) */
body.rd-public .modal:not(#share-profile-public) .btn-secondary {
    background: transparent !important; border: 1px solid var(--swft-border) !important; color: var(--swft-fg1) !important;
    border-radius: 10px !important; padding: 8px 16px !important; font-size: 14px !important; font-weight: 500 !important;
}
body.rd-public .modal:not(#share-profile-public) .btn-secondary:hover { background: var(--swft-bg-page) !important; }
/* dark */
body.rd-public.rd-dark .modal:not(#share-profile-public) .modal-content { background: var(--swft-bg) !important; border-color: rgba(255,255,255,0.1) !important; }
body.rd-public.rd-dark .modal:not(#share-profile-public) .modal-header { border-bottom-color: rgba(255,255,255,0.08) !important; }
body.rd-public.rd-dark .modal:not(#share-profile-public) .modal-footer { border-top-color: rgba(255,255,255,0.08) !important; }
body.rd-public.rd-dark .modal:not(#share-profile-public) .modal-header .modal-title,
body.rd-public.rd-dark .modal:not(#share-profile-public) .modal-header h4 { color: var(--swft-fg1) !important; }
body.rd-public.rd-dark .modal:not(#share-profile-public) .modal-body input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.rd-public.rd-dark .modal:not(#share-profile-public) .modal-body textarea { background: rgba(255,255,255,0.04) !important; color: var(--swft-fg1) !important; border-color: rgba(255,255,255,0.12) !important; }

/* Mobile: turn redesign modals into a bottom sheet. SC-260626-pps: anchor to the DYNAMIC viewport (min-height:100dvh on the dialog so align-items:flex-end lands on the VISIBLE bottom, not the large-viewport bottom that sits behind a browser's persistent bottom toolbar — Brave/Chrome Android, Safari bottom bar — and clipped the footer). Cap the sheet at 100dvh with an internal scroll + env(safe-area-inset-bottom) so the submit row always clears the toolbar + home indicator. Sibling of the shipped /myprofile .rd-modal fix (SC-260626-msa). */
@media (max-width: 560px) {
    body.rd-public .modal:not(#share-profile-public) .modal-dialog { max-width: 100% !important; margin: 0 !important; min-height: 100dvh !important; display: flex !important; align-items: flex-end !important; }
    body.rd-public .modal:not(#share-profile-public) .modal-content { border-radius: 18px 18px 0 0 !important; width: 100% !important; max-height: 100dvh !important; overflow-y: auto !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
}

/* SHARE PROFILE popup — bring into the redesign (mirrors the user-app share popup in myprofile-redesign.blade.php: clean card, left title + inset close, bordered QR card, inline URL+copy, pastel icon-chip channel rows). Theme-aware via --swft tokens.
   Overrides the legacy new_frontend.css share styling with !important. */
body.rd-public #share-profile-public .modal-dialog { max-width: 440px !important; width: 100% !important; }
body.rd-public #share-profile-public .modal-content {
    background: var(--swft-bg) !important; border: 1px solid var(--swft-border) !important;
    border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important; overflow: hidden !important;
}
/* header */
body.rd-public #share-profile-public .modal-header {
    display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important;
    min-height: 0 !important; padding: 18px 20px 14px !important;
    border-bottom: 1px solid var(--swft-border-soft) !important;
}
body.rd-public #share-profile-public .modal-header .modal-title {
    font-size: 16px !important; font-weight: 600 !important; color: var(--swft-fg1) !important; margin: 0 !important;
    text-align: left !important; justify-content: flex-start !important;
}
body.rd-public #share-profile-public .modal-header .btn-close {
    position: absolute !important; top: 50% !important; right: 16px !important;
    bottom: auto !important; left: auto !important; transform: translateY(-50%) !important;
    width: 30px !important; height: 30px !important; padding: 0 !important; margin: 0 !important;
    border-radius: 8px !important; border: none !important; background: transparent !important; box-shadow: none !important;
    color: var(--swft-fg-muted) !important; opacity: 1 !important; flex: none !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    transition: background 150ms ease, color 150ms ease !important;
}
body.rd-public #share-profile-public .modal-header .btn-close::after,
body.rd-public #share-profile-public .modal-header .btn-close::before { display: none !important; }
body.rd-public #share-profile-public .modal-header .btn-close:hover { background: var(--swft-card) !important; color: var(--swft-fg1) !important; }
body.rd-public #share-profile-public .modal-header .btn-close svg { width: 18px !important; height: 18px !important; }
body.rd-public #share-profile-public .modal-header .btn-close svg path { stroke: currentColor !important; }
body.rd-public #share-profile-public .modal-body { padding: 18px 20px !important; }

/* QR — bordered white card so the code is always scannable in either theme */
body.rd-public #share-profile-public .qr_code-section {
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; margin-bottom: 4px !important;
}
body.rd-public #share-profile-public .qr_code-section br { display: none !important; }
body.rd-public #share-profile-public .qr_code-section .qr_code_img {
    width: 180px !important; height: 180px !important; box-sizing: border-box !important;
    background: #fff !important; border: 1px solid var(--swft-border-soft) !important; border-radius: 12px !important; padding: 2px !important;
}
body.rd-public #share-profile-public .qr_code-section .qr_download {
    font-size: 13px !important; font-weight: 500 !important; color: var(--swft-link, #0066CC) !important; text-decoration: none !important;
}
/* body.rd-public #share-profile-public .qr_code-section .qr_download:hover { text-decoration: underline !important; } */

/* URL field + inline Copy */
body.rd-public #share-profile-public .copy-field {
    display: flex !important; align-items: stretch !important; margin: 18px 0 6px !important;
    border: 1px solid var(--swft-border) !important; border-radius: 10px !important; overflow: hidden !important; background: var(--swft-bg) !important;
}
body.rd-public #share-profile-public .copy-field a { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; }
body.rd-public #share-profile-public .copy-field input[readonly] {
    flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; border: none !important; background: transparent !important;
    padding: 10px 12px !important; font-size: 13px !important; color: var(--swft-fg1) !important; outline: none !important;
    text-overflow: ellipsis !important;
}
body.rd-public #share-profile-public .copy-field button {
    border: none !important; border-left: 1px solid var(--swft-border-soft) !important; background: transparent !important;
    color: var(--swft-link, #0066CC) !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap !important;
    padding: 0 14px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer !important;
}
body.rd-public #share-profile-public .copy-field button svg { width: 14px !important; height: 14px !important; }
body.rd-public #share-profile-public .copy-field button svg path { stroke: var(--swft-link, #0066CC) !important; }
/* dark mode — match the myprofile share modal's lighter link blue (#6BAEFF) */
body.rd-public.rd-dark #share-profile-public .qr_code-section .qr_download,
body.rd-public.rd-dark #share-profile-public .copy-field button { color: #6BAEFF !important; }
body.rd-public.rd-dark #share-profile-public .copy-field button svg path { stroke: #6BAEFF !important; }
/* dark mode — the default --swft-border-soft (#2A2A2A) is invisible against the dark modal surface (#292929); use a translucent-white divider to match the other redesign modals (see :not(#share-profile-public) header rule above) */
body.rd-public.rd-dark #share-profile-public .modal-header { border-bottom-color: rgba(255,255,255,0.08) !important; }

/* Section divider label ("Send via") */
body.rd-public #share-profile-public .share-rd-section-label {
    font-size: 11px !important; font-weight: 600 !important; color: var(--swft-fg-muted) !important;
    text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 10px 10px 4px !important; margin: 0 !important;
}

/* Channel rows → icon chip + label + chevron */
body.rd-public #share-profile-public .share-list-popup ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.rd-public #share-profile-public .share-list-popup li { margin: 0 !important; }
body.rd-public #share-profile-public .share-list-popup li a {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 8px 10px !important; border-radius: 10px !important; text-decoration: none !important;
    color: var(--swft-fg1) !important; transition: background 150ms ease !important;
}
body.rd-public #share-profile-public .share-list-popup li a:hover { background: var(--swft-card) !important; }
body.rd-public #share-profile-public .share-list-popup .recent-thumb {
    display: flex !important; align-items: center !important; gap: 12px !important; flex: 1 1 auto !important; min-width: 0 !important;
    font-size: 14px !important; font-weight: 500 !important; color: var(--swft-fg1) !important;
}
body.rd-public #share-profile-public .share-list-popup .recent-thumb .icon {
    width: 28px !important; height: 28px !important; border-radius: 7px !important; flex: none !important; margin: 0 !important;
    display: grid !important; place-items: center !important;
}
body.rd-public #share-profile-public .share-list-popup .recent-thumb .icon svg { width: 16px !important; height: 16px !important; display: inline-block !important; }
/* per-channel chip tint + glyph colour by row order — Email, WhatsApp, LinkedIn, More. Fixed brand/category palette mirroring the myprofile share modal (blue email/ linkedin/more, green WhatsApp); glyphs are monochrome and inherit `color`. */
body.rd-public #share-profile-public .share-list-popup li:nth-child(1) .share-chip,
body.rd-public #share-profile-public .share-list-popup li:nth-child(3) .share-chip,
body.rd-public #share-profile-public .share-list-popup li:nth-child(4) .share-chip { background: #E0ECF9 !important; color: rgb(0,102,204) !important; }
body.rd-public #share-profile-public .share-list-popup li:nth-child(2) .share-chip { background: #D9E9DD !important; color: rgb(48,182,81) !important; }
/* dark mode — translucent tints + lifted glyph colours (mirrors new_ui_dark_frontend.css) */
body.rd-public.rd-dark #share-profile-public .share-list-popup li:nth-child(1) .share-chip,
body.rd-public.rd-dark #share-profile-public .share-list-popup li:nth-child(3) .share-chip,
body.rd-public.rd-dark #share-profile-public .share-list-popup li:nth-child(4) .share-chip { background: rgba(0,102,204,0.22) !important; color: #6BAEFF !important; }
body.rd-public.rd-dark #share-profile-public .share-list-popup li:nth-child(2) .share-chip { background: rgba(48,182,81,0.18) !important; color: #5BD97E !important; }
/* chevron */
body.rd-public #share-profile-public .share-list-popup .arrow-share-list {
    color: var(--swft-fg-muted) !important; flex: none !important; display: grid !important; place-items: center !important;
}
body.rd-public #share-profile-public .share-list-popup .arrow-share-list svg { width: 14px !important; height: 14px !important; }
body.rd-public #share-profile-public .share-list-popup .arrow-share-list svg path { stroke: currentColor !important; }

/* Mobile bottom-sheet for the share popup too. SC-260626-pps: same dynamic-viewport anchoring as the connect/exchange sheet above so the last channel row clears the browser's bottom toolbar. */
@media (max-width: 560px) {
    body.rd-public #share-profile-public .modal-dialog { max-width: 100% !important; margin: 0 !important; min-height: 100dvh !important; display: flex !important; align-items: flex-end !important; }
    body.rd-public #share-profile-public .modal-content { border-radius: 18px 18px 0 0 !important; width: 100% !important; max-height: 100dvh !important; overflow-y: auto !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
}

/* Meet-the-Team "View more" modal — Modal C: 790px, 5-up grid The in-grid .mt-card rules are scoped to .col-lg-7 .section-panel, so they do NOT reach this modal. Re-scope the same card family here. */
body.rd-public .modal.link-profile-popup .mt-more-grid {
    display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 12px !important;
    max-height: 445px !important; overflow-y: auto !important; padding: 2px !important; margin: 0 !important; list-style: none !important;
}
body.rd-public .modal.link-profile-popup .mt-card {
    position: relative !important; background: #fff !important; border: 1px solid var(--swft-border) !important;
    border-radius: 16px !important; padding: 16px !important; min-height: 100px !important; overflow: hidden !important;
    text-decoration: none !important; color: inherit !important; display: flex !important; flex-direction: column !important; gap: 10px !important;
    transition: border-color 150ms ease, background 150ms ease !important;
}
body.rd-public .modal.link-profile-popup .mt-card:hover { border-color: #B7BFCB !important; background: #FCFCFD !important; }
body.rd-public .modal.link-profile-popup .mt-card-arrow { position: absolute !important; top: 10px !important; right: 10px !important; width: 18px !important; height: 18px !important; color: var(--swft-fg-muted) !important; z-index: 2 !important; }
body.rd-public .modal.link-profile-popup .mt-card-arrow svg { width: 14px !important; height: 14px !important; }
body.rd-public .modal.link-profile-popup .mt-avatar-wrap { position: relative !important; width: 50px !important; height: 50px !important; flex: none !important; }
body.rd-public .modal.link-profile-popup .mt-avatar { width: 50px !important; height: 50px !important; border-radius: 50% !important; overflow: hidden !important; background: var(--swft-card) !important; display: grid !important; place-items: center !important; font-size: 16px !important; font-weight: 600 !important; color: var(--swft-fg1) !important; }
body.rd-public .modal.link-profile-popup .mt-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; }
body.rd-public .modal.link-profile-popup .mt-avatar.a-rose { background: #FBD5D5 !important; color: #9F1239 !important; }
body.rd-public .modal.link-profile-popup .mt-avatar.a-violet { background: #E7DBEE !important; color: #6B21A8 !important; }
body.rd-public .modal.link-profile-popup .mt-avatar.a-amber { background: #FEF3C7 !important; color: #92400E !important; }
body.rd-public .modal.link-profile-popup .mt-avatar.a-emerald { background: #D1FAE5 !important; color: #065F46 !important; }
body.rd-public .modal.link-profile-popup .mt-avatar.a-blue { background: #DBEAFE !important; color: #1E40AF !important; }
body.rd-public .modal.link-profile-popup .mt-avatar.a-fuchsia { background: #FCE7F3 !important; color: #9D174D !important; }
/* Dark mode: keep the per-person colours but dark-tune them (same approach as the on-page card grid
   above) so the "+N more" modal avatars are colourful without the washed-out pastel look on dark.
   Per-variant (0,6,1) beats the light .a-* variants (0,5,1); also covers glass-dark. */
body.rd-public.rd-dark .modal.link-profile-popup .mt-avatar.a-rose    { background: rgba(244,63,94,0.22) !important;  color: #FDA4AF !important; }
body.rd-public.rd-dark .modal.link-profile-popup .mt-avatar.a-violet  { background: rgba(168,85,247,0.22) !important; color: #D8B4FE !important; }
body.rd-public.rd-dark .modal.link-profile-popup .mt-avatar.a-amber   { background: rgba(245,158,11,0.22) !important; color: #FCD34D !important; }
body.rd-public.rd-dark .modal.link-profile-popup .mt-avatar.a-emerald { background: rgba(16,185,129,0.22) !important; color: #6EE7B7 !important; }
body.rd-public.rd-dark .modal.link-profile-popup .mt-avatar.a-blue    { background: rgba(59,130,246,0.22) !important; color: #93C5FD !important; }
body.rd-public.rd-dark .modal.link-profile-popup .mt-avatar.a-fuchsia { background: rgba(232,121,249,0.22) !important; color: #F0ABFC !important; }
body.rd-public .modal.link-profile-popup .mt-logo-overlay { position: absolute !important; right: -6px !important; bottom: -4px !important; width: 22px !important; height: 22px !important; border-radius: 999px !important; border: 1px solid #EAECF0 !important; background: #fff !important; overflow: hidden !important; display: grid !important; place-items: center !important; }
body.rd-public .modal.link-profile-popup .mt-logo-overlay img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; }
body.rd-public .modal.link-profile-popup .mt-card-meta { min-width: 0 !important; }
body.rd-public .modal.link-profile-popup .mt-card-name { font-size: 14px !important; font-weight: 500 !important; color: var(--swft-fg1) !important; line-height: 1.25 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.rd-public .modal.link-profile-popup .mt-card-title { font-size: 12px !important; color: var(--swft-fg-muted) !important; line-height: 1.3 !important; margin-top: 2px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
/* dark */
body.rd-public.rd-dark .modal.link-profile-popup .mt-card { background: var(--swft-bg) !important; border-color: rgba(255,255,255,0.08) !important; }
body.rd-public.rd-dark .modal.link-profile-popup .mt-card:hover { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.16) !important; }
body.rd-public.rd-dark .modal.link-profile-popup .mt-logo-overlay { border-color: rgba(255,255,255,0.12) !important; background: var(--swft-bg) !important; }
/* glass (light) */
body.rd-public.profile-style-glass:not(.rd-dark) .modal.link-profile-popup .mt-card { background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.3) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .modal.link-profile-popup .mt-card-name { color: rgba(20,20,20,0.95) !important; }
body.rd-public.profile-style-glass:not(.rd-dark) .modal.link-profile-popup .mt-card-title { color: rgba(20,20,20,0.6) !important; }
/* glass + dark */
body.rd-public.profile-style-glass.rd-dark .modal.link-profile-popup .mt-card { 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 .modal.link-profile-popup .mt-card-name { color: rgba(255,255,255,0.95) !important; }
body.rd-public.profile-style-glass.rd-dark .modal.link-profile-popup .mt-card-title { color: rgba(255,255,255,0.6) !important; }
/* responsive column reduction (the bottom-sheet rule at <=560 handles the dialog) */
@media (max-width: 820px) { body.rd-public .modal.link-profile-popup .mt-more-grid { grid-template-columns: repeat(3, 1fr) !important; } }
/* phone: single-column list of horizontal cards (avatar left, name/title right, logo overlay).
   Matches the Meet-the-Team mockup Sheet B / README §6 — not a 2-up vertical grid. */
@media (max-width: 560px) {
    body.rd-public .modal.link-profile-popup .mt-more-grid { grid-template-columns: 1fr !important; max-height: 60dvh !important; }
    body.rd-public .modal.link-profile-popup .mt-card { flex-direction: row !important; align-items: center !important; min-height: 0 !important; }
    body.rd-public .modal.link-profile-popup .mt-card-arrow { display: none !important; }
}