/*
 * VSL AUTHORITATIVE POPUP LAYOUT
 *
 * Loaded after the legacy styles to stop old .popup rules from positioning
 * the full-screen dialog wrapper as a small transformed card.
 */

body.vsl-popup-open,
body.popup-open {
    overflow: hidden !important;
}

.popup-backdrop[data-popup-backdrop],
[data-vsl-popup-backdrop] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background:
        radial-gradient(
            circle at 50% 14%,
            rgba(29, 185, 194, 0.20),
            transparent 30rem
        ),
        rgba(3, 9, 24, 0.74) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition:
        opacity 220ms ease,
        visibility 220ms ease !important;
}

.popup-backdrop[data-popup-backdrop][hidden],
[data-vsl-popup-backdrop][hidden] {
    display: none !important;
}

.popup-backdrop[data-popup-backdrop].is-open,
[data-vsl-popup-backdrop].is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.popup[data-popup],
.popup[data-vsl-popup] {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 9001 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 22px !important;
    display: grid !important;
    place-items: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition:
        opacity 220ms ease,
        visibility 220ms ease !important;
}

.popup[data-popup]::before,
.popup[data-vsl-popup]::before {
    display: none !important;
    content: none !important;
}

.popup[data-popup][hidden],
.popup[data-vsl-popup][hidden] {
    display: none !important;
}

.popup[data-popup].is-open,
.popup[data-vsl-popup].is-open {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

.popup[data-popup] > .popup-card,
.popup[data-vsl-popup] > .popup-card {
    position: relative !important;
    width: min(720px, 100%) !important;
    max-width: 100% !important;
    max-height: min(86vh, 820px) !important;
    margin: auto !important;
    padding: 36px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(
            circle at 14% 0%,
            rgba(29, 185, 194, 0.12),
            transparent 21rem
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.99),
            rgba(242, 249, 254, 0.97)
        ) !important;
    box-shadow:
        0 38px 120px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    animation: vslAuthoritativePopupIn 260ms
        cubic-bezier(.16, 1, .3, 1) both !important;
}

.popup[data-popup] > .request-popup-card,
.popup[data-vsl-popup] > .request-popup-card {
    width: min(860px, 100%) !important;
}

.popup[data-popup] > .search-card,
.popup[data-vsl-popup] > .search-card {
    width: min(720px, 100%) !important;
}

.popup[data-popup] > .detail-popup-card,
.popup[data-vsl-popup] > .detail-popup-card {
    width: min(640px, 100%) !important;
}

.popup[data-popup] .popup-close,
.popup[data-vsl-popup] .popup-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 5 !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(49, 69, 154, 0.13) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #102e72 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.12) !important;
}

.popup[data-popup] .popup-close:hover,
.popup[data-vsl-popup] .popup-close:hover {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            #31459a,
            #1db9c2
        ) !important;
    transform: rotate(90deg) !important;
}

html[data-theme="dark"] .popup[data-popup] > .popup-card,
html[data-theme="dark"] .popup[data-vsl-popup] > .popup-card {
    border-color: rgba(117, 227, 235, 0.15) !important;
    background:
        radial-gradient(
            circle at 14% 0%,
            rgba(29, 185, 194, 0.13),
            transparent 21rem
        ),
        linear-gradient(
            145deg,
            rgba(15, 29, 53, 0.99),
            rgba(8, 18, 35, 0.98)
        ) !important;
}

@media (max-width: 720px) {
    .popup[data-popup],
    .popup[data-vsl-popup] {
        padding: 12px !important;
        align-items: end !important;
    }

    .popup[data-popup] > .popup-card,
    .popup[data-vsl-popup] > .popup-card {
        width: 100% !important;
        max-height: 90vh !important;
        padding: 30px 20px 22px !important;
        border-radius: 26px 26px 18px 18px !important;
    }

    .popup[data-popup] .form-grid,
    .popup[data-vsl-popup] .form-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .popup[data-popup],
    .popup[data-vsl-popup],
    .popup-backdrop[data-popup-backdrop],
    [data-vsl-popup-backdrop],
    .popup[data-popup] > .popup-card,
    .popup[data-vsl-popup] > .popup-card {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

@keyframes vslAuthoritativePopupIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========================================================================
   VSL PROFESSIONAL TEAM PROFILE DIALOG
   ======================================================================== */

.popup[data-popup="team-profile"] {
    padding: clamp(14px, 2.4vw, 34px) !important;
}

.popup[data-popup="team-profile"] > .vsl-team-profile-card {
    width: min(1080px, 100%) !important;
    min-height: min(660px, calc(100vh - 68px)) !important;
    max-height: min(88vh, 760px) !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(340px, .88fr) minmax(480px, 1.12fr) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 34px !important;
    background: #f7fbff !important;
    box-shadow:
        0 42px 130px rgba(0, 9, 32, .46),
        0 0 0 1px rgba(49, 69, 154, .08),
        inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}

.vsl-team-profile-card::before {
    content: "";
    position: absolute;
    z-index: 8;
    top: 0;
    left: 42%;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #31459a, #1db9c2 74%, #7ceaf0);
}

.vsl-team-profile-close {
    top: 22px !important;
    right: 22px !important;
    z-index: 20 !important;
    width: 46px !important;
    height: 46px !important;
    border-color: rgba(24, 52, 108, .12) !important;
    background: rgba(248, 252, 255, .90) !important;
    color: #18346c !important;
    box-shadow: 0 12px 34px rgba(13, 34, 75, .12) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.vsl-team-profile-visual {
    position: relative;
    min-width: 0;
    min-height: 660px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 20% 12%, rgba(72, 206, 217, .24), transparent 22rem),
        linear-gradient(145deg, #07172f 0%, #102f68 48%, #163f7c 100%);
}

.vsl-team-profile-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, black, transparent 86%);
}

.vsl-team-profile-brand {
    position: absolute;
    z-index: 6;
    top: 30px;
    left: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
}

.vsl-team-profile-brand-mark {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(49, 69, 154, .92), rgba(29, 185, 194, .92));
    color: #fff;
    font: 900 20px/1 Inter, Arial, sans-serif;
    box-shadow: 0 15px 34px rgba(0, 0, 0, .20);
}

.vsl-team-profile-brand > span:last-child {
    display: grid;
    gap: 4px;
}

.vsl-team-profile-brand strong {
    color: #fff;
    font: 800 13px/1.1 Inter, Arial, sans-serif;
    letter-spacing: .015em;
}

.vsl-team-profile-brand small {
    color: rgba(218, 248, 252, .72);
    font: 650 10px/1.1 Inter, Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vsl-team-profile-portrait {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    overflow: hidden;
}

.vsl-team-profile-portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 18%;
    filter: saturate(.96) contrast(1.025) brightness(.98);
    transform: scale(1.006);
}

.vsl-team-profile-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .92);
    font: 900 clamp(70px, 8vw, 116px)/1 Inter, Arial, sans-serif;
    letter-spacing: -.07em;
    background:
        radial-gradient(circle at 50% 35%, rgba(29, 185, 194, .32), transparent 16rem),
        linear-gradient(145deg, #0b1f42, #244699);
}

.vsl-team-profile-fallback[hidden] {
    display: none !important;
}

.vsl-team-profile-photo-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(4, 13, 31, .28) 0%, rgba(4, 13, 31, .04) 26%, rgba(4, 13, 31, .08) 54%, rgba(4, 13, 31, .86) 100%),
        linear-gradient(90deg, rgba(4, 13, 31, .18), transparent 45%);
}

.vsl-team-profile-visual-footer {
    position: absolute;
    z-index: 7;
    left: 30px;
    right: 30px;
    bottom: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    color: #fff;
}

.vsl-team-profile-index {
    display: grid;
    gap: 5px;
}

.vsl-team-profile-index small {
    color: rgba(218, 248, 252, .72);
    font: 750 10px/1 Inter, Arial, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.vsl-team-profile-index strong {
    color: #fff;
    font: 850 34px/1 Inter, Arial, sans-serif;
    letter-spacing: -.05em;
}

.vsl-team-profile-code {
    min-width: 54px;
    height: 36px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(9, 27, 59, .48);
    color: #dffcff;
    font: 850 11px/1 Inter, Arial, sans-serif;
    letter-spacing: .12em;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.vsl-team-profile-content {
    min-width: 0;
    padding: 60px 58px 36px;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 100% 0%, rgba(29, 185, 194, .10), transparent 21rem),
        linear-gradient(145deg, #ffffff 0%, #f4f9fd 100%);
    color: #0a1b34;
}

.vsl-team-profile-header {
    padding-right: 38px;
}

.vsl-team-profile-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #168d9b;
    font: 800 10px/1 Inter, Arial, sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.vsl-team-profile-kicker i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1db9c2;
    box-shadow: 0 0 0 5px rgba(29, 185, 194, .10), 0 0 16px rgba(29, 185, 194, .56);
}

.vsl-team-profile-header h2 {
    margin: 18px 0 10px !important;
    max-width: 660px;
    color: #071a35 !important;
    font: 850 clamp(35px, 4.5vw, 58px)/.96 Inter, Manrope, Arial, sans-serif !important;
    letter-spacing: -.058em !important;
    text-wrap: balance;
}

.vsl-team-profile-header p {
    margin: 0 !important;
    color: #24657e !important;
    font: 750 clamp(15px, 1.55vw, 19px)/1.35 Inter, Arial, sans-serif !important;
    letter-spacing: -.015em;
}

.vsl-team-profile-status {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.vsl-team-profile-status > span {
    min-height: 30px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(49, 69, 154, .10);
    border-radius: 999px;
    background: rgba(235, 244, 252, .78);
    color: #45617e;
    font: 720 10px/1 Inter, Arial, sans-serif;
    letter-spacing: .035em;
}

.vsl-team-profile-status > span:first-child {
    color: #0b6670;
    border-color: rgba(29, 185, 194, .20);
    background: rgba(220, 249, 250, .72);
}

.vsl-team-profile-status i {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1db9c2;
    color: #fff;
    font-style: normal;
    font-size: 9px;
}

.vsl-team-profile-responsibility {
    margin-top: 28px;
    padding: 23px 24px;
    border: 1px solid rgba(49, 69, 154, .10);
    border-radius: 20px;
    background: rgba(255, 255, 255, .70);
    box-shadow: 0 16px 42px rgba(19, 48, 95, .055);
}

.vsl-team-profile-responsibility > span,
.vsl-team-profile-section-head > span {
    display: block;
    color: #173d83;
    font: 820 10px/1 Inter, Arial, sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.vsl-team-profile-responsibility p {
    margin: 12px 0 0 !important;
    color: #536b86 !important;
    font: 500 15px/1.72 Inter, Arial, sans-serif !important;
}

.vsl-team-profile-contact {
    margin-top: 24px;
}

.vsl-team-profile-contact[hidden] {
    display: none !important;
}

.vsl-team-profile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.vsl-team-profile-section-head small {
    color: #7a8ea7;
    font: 600 10px/1 Inter, Arial, sans-serif;
}

.vsl-team-profile-phone-list {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vsl-team-profile-phone {
    min-width: 0;
    min-height: 58px;
    padding: 10px 13px;
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    border: 1px solid rgba(49, 69, 154, .10);
    border-radius: 16px;
    background: #fff;
    color: #173d83;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(20, 44, 90, .045);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.vsl-team-profile-phone:hover {
    transform: translateY(-2px);
    border-color: rgba(29, 185, 194, .30);
    box-shadow: 0 16px 34px rgba(20, 44, 90, .09);
}

.vsl-team-profile-phone > span {
    grid-row: 1 / 3;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #31459a, #1db9c2);
    color: #fff;
    font: 800 10px/1 Inter, Arial, sans-serif;
}

.vsl-team-profile-phone strong {
    overflow: hidden;
    color: #173d83;
    font: 800 12px/1.2 Inter, Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vsl-team-profile-phone small {
    color: #7a8da5;
    font: 600 9px/1.1 Inter, Arial, sans-serif;
}

.vsl-team-profile-actions {
    margin-top: auto;
    padding-top: 27px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vsl-team-profile-action {
    min-height: 48px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(49, 69, 154, .12);
    border-radius: 14px;
    background: #fff;
    color: #173d83;
    font: 760 12px/1 Inter, Arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(16, 39, 83, .06);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.vsl-team-profile-action:hover {
    transform: translateY(-2px);
    border-color: rgba(29, 185, 194, .26);
    box-shadow: 0 17px 34px rgba(16, 39, 83, .11);
}

.vsl-team-profile-action[hidden] {
    display: none !important;
}

.vsl-team-profile-action > span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(49, 69, 154, .08);
    font: 800 9px/1 Inter, Arial, sans-serif;
}

.vsl-team-profile-action--whatsapp > span {
    color: #087a67;
    background: rgba(18, 190, 144, .10);
}

.vsl-team-profile-action--support {
    border-color: transparent;
    background: linear-gradient(105deg, #31459a, #197cbe 58%, #1db9c2);
    color: #fff;
}

.vsl-team-profile-action--support > span {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.vsl-team-profile-footer {
    margin-top: 24px;
    padding-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(49, 69, 154, .08);
}

.vsl-team-profile-footer > span {
    flex: 0 0 37px;
    width: 37px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #0e2860;
    color: #fff;
    font: 850 9px/1 Inter, Arial, sans-serif;
    letter-spacing: .10em;
}

.vsl-team-profile-footer p {
    margin: 0 !important;
    max-width: 520px;
    color: #8292a7 !important;
    font: 520 10px/1.45 Inter, Arial, sans-serif !important;
}

html[data-theme="dark"] .popup[data-popup="team-profile"] > .vsl-team-profile-card {
    border-color: rgba(113, 228, 236, .14) !important;
    background: #0b172a !important;
}

html[data-theme="dark"] .vsl-team-profile-content {
    background:
        radial-gradient(circle at 100% 0%, rgba(29, 185, 194, .09), transparent 21rem),
        linear-gradient(145deg, #101f36, #0a1527);
    color: #eef7ff;
}

html[data-theme="dark"] .vsl-team-profile-header h2 {
    color: #f1f8ff !important;
}

html[data-theme="dark"] .vsl-team-profile-header p {
    color: #77d7df !important;
}

html[data-theme="dark"] .vsl-team-profile-responsibility,
html[data-theme="dark"] .vsl-team-profile-phone,
html[data-theme="dark"] .vsl-team-profile-action:not(.vsl-team-profile-action--support) {
    border-color: rgba(120, 220, 230, .10);
    background: rgba(18, 36, 62, .82);
}

html[data-theme="dark"] .vsl-team-profile-responsibility p,
html[data-theme="dark"] .vsl-team-profile-footer p {
    color: #a9b9cc !important;
}

html[data-theme="dark"] .vsl-team-profile-phone strong,
html[data-theme="dark"] .vsl-team-profile-action:not(.vsl-team-profile-action--support) {
    color: #dff6ff;
}

@media (max-width: 940px) {
    .popup[data-popup="team-profile"] > .vsl-team-profile-card {
        grid-template-columns: minmax(285px, .78fr) minmax(430px, 1.22fr) !important;
    }

    .vsl-team-profile-content {
        padding: 52px 38px 30px;
    }
}

@media (max-width: 760px) {
    .popup[data-popup="team-profile"] {
        align-items: start !important;
        padding: 10px !important;
    }

    .popup[data-popup="team-profile"] > .vsl-team-profile-card {
        min-height: 0 !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
        overflow: visible !important;
        border-radius: 27px !important;
    }

    .vsl-team-profile-card::before {
        left: 0;
    }

    .vsl-team-profile-visual {
        min-height: 360px;
    }

    .vsl-team-profile-brand {
        top: 22px;
        left: 22px;
        right: 76px;
    }

    .vsl-team-profile-visual-footer {
        left: 22px;
        right: 22px;
        bottom: 20px;
    }

    .vsl-team-profile-content {
        padding: 38px 22px 24px;
    }

    .vsl-team-profile-header {
        padding-right: 0;
    }

    .vsl-team-profile-header h2 {
        font-size: clamp(32px, 11vw, 48px) !important;
    }

    .vsl-team-profile-phone-list {
        grid-template-columns: 1fr;
    }

    .vsl-team-profile-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vsl-team-profile-action--support {
        grid-column: 1 / -1;
    }

    .vsl-team-profile-footer {
        align-items: flex-start;
    }
}

@media (max-width: 420px) {
    .vsl-team-profile-visual {
        min-height: 320px;
    }

    .vsl-team-profile-brand small {
        display: none;
    }

    .vsl-team-profile-actions {
        grid-template-columns: 1fr;
    }

    .vsl-team-profile-action,
    .vsl-team-profile-action--support {
        grid-column: auto;
        width: 100%;
    }
}