/*
 * PQR_SHORT_TRACKING_PIXELS_CSS_V1
 * Public Tracking Pixels provider showcase.
 */

body.sl-public .sl-track-showcase-v1 {
    position:relative;
    overflow:hidden;
    padding:clamp(28px,5vw,56px);
}

body.sl-public .sl-track-showcase-v1::after {
    content:"";
    position:absolute;
    z-index:0;
    top:-180px;
    right:-160px;
    width:380px;
    height:380px;
    border-radius:999px;
    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--sl-accent) 16%,
                transparent
            ),
            transparent 68%
        );
    pointer-events:none;
}

body.sl-public .sl-track-head-v1 {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(280px,.72fr);
    gap:30px;
    align-items:end;
    margin-bottom:28px;
}

body.sl-public .sl-track-head-v1 h2 {
    max-width:780px;
    margin:10px 0 0;
    font-size:clamp(30px,4vw,48px)!important;
    letter-spacing:-.04em;
    text-wrap:balance;
}

body.sl-public .sl-track-head-v1 p {
    margin:0;
}

body.sl-public .sl-track-grid-v1 {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:14px;
}

body.sl-public .sl-track-provider-v1 {
    display:grid;
    grid-template-columns:62px minmax(0,1fr);
    gap:16px;
    align-items:center;
    min-width:0;
    min-height:122px;
    padding:19px;
    border:1px solid var(--sl-border);
    border-radius:18px;
    background:var(--sl-panel);
    color:var(--sl-text);
    box-shadow:
        0 12px 32px rgba(15,23,42,.05);
}

body.sl-public .sl-track-logo-v1 {
    display:grid;
    place-items:center;
    width:62px;
    height:62px;
    padding:11px;
    border:1px solid #dce3ee;
    border-radius:17px;
    background:#fff;
    box-shadow:
        0 8px 22px rgba(15,23,42,.07);
}

body.sl-public .sl-track-logo-v1 img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

body.sl-public .sl-track-copy-v1 {
    display:grid;
    gap:4px;
    min-width:0;
}

body.sl-public .sl-track-copy-v1 strong {
    font-size:15px;
    line-height:1.35;
}

body.sl-public .sl-track-copy-v1 span {
    color:var(--sl-muted);
    font-size:12px;
    line-height:1.55;
}

body.sl-public .sl-track-badge-v1 {
    display:inline-flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    margin-top:4px;
    padding:4px 9px;
    border-radius:999px;
    background:var(--sl-soft);
    color:var(--sl-accent)!important;
    font-size:10px!important;
    font-weight:850;
    letter-spacing:.05em;
    text-transform:uppercase;
}

body.sl-public .sl-track-steps-v1 {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:20px;
}

body.sl-public .sl-track-step-v1 {
    display:flex;
    gap:13px;
    align-items:flex-start;
    padding:18px;
    border:1px solid var(--sl-border);
    border-radius:16px;
    background:var(--sl-soft);
}

body.sl-public .sl-track-step-icon-v1 {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    flex:0 0 36px;
    border-radius:11px;
    background:var(--sl-panel);
    color:var(--sl-accent);
}

body.sl-public .sl-track-step-v1 strong {
    display:block;
    margin-bottom:4px;
    font-size:13px;
}

body.sl-public .sl-track-step-v1 p {
    margin:0;
    font-size:12px!important;
    line-height:1.6!important;
}

body.sl-public .sl-track-privacy-v1 {
    position:relative;
    z-index:1;
    display:flex;
    gap:13px;
    align-items:flex-start;
    margin-top:20px;
    padding:18px 20px;
    border:1px solid var(--sl-border);
    border-radius:17px;
    background:var(--sl-soft);
}

body.sl-public .sl-track-privacy-v1 > i {
    margin-top:4px;
    color:var(--sl-accent);
}

body.sl-public .sl-track-privacy-v1 p {
    margin:0;
    font-size:14px!important;
}

body.sl-public .sl-track-actions-v1 {
    position:relative;
    z-index:1;
    margin-bottom:0;
}

html[data-pqr-theme="glass"]
body.sl-public .sl-track-provider-v1 {
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

html[data-pqr-theme="midnight"]
body.sl-public .sl-track-logo-v1 {
    border-color:#4b5970;
}

@media(hover:hover) {

    body.sl-public .sl-track-provider-v1 {
        transition:
            transform .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;
    }

    body.sl-public .sl-track-provider-v1:hover {
        transform:translateY(-3px);

        border-color:
            color-mix(
                in srgb,
                var(--sl-accent) 48%,
                var(--sl-border)
            );

        box-shadow:
            0 22px 52px var(--sl-glow);
    }
}

@media(max-width:900px) {

    body.sl-public .sl-track-head-v1 {
        grid-template-columns:1fr;
    }

    body.sl-public .sl-track-grid-v1 {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:680px) {

    body.sl-public .sl-track-steps-v1 {
        grid-template-columns:1fr;
    }
}

@media(max-width:520px) {

    body.sl-public .sl-track-grid-v1 {
        grid-template-columns:1fr;
    }

    body.sl-public .sl-track-showcase-v1 {
        padding:22px 17px;
    }

    body.sl-public .sl-track-provider-v1 {
        min-height:108px;
    }
}

@media(prefers-reduced-motion:reduce) {

    body.sl-public .sl-track-provider-v1 {
        transition:none!important;
        transform:none!important;
    }
}