:root {
    --bg: #020c17;
    --bg-deep: #010711;

    --panel: #06172a;
    --panel-2: #081d35;
    --panel-3: #0a2340;

    --blue: #0a84ff;
    --blue-bright: #00a8ff;
    --cyan: #19c7ff;

    --text: #f5f9ff;
    --muted: #9eb3ca;
    --line: rgba(75, 151, 220, .28);

    --modal-width: 810px;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);
    background: var(--bg);
}


/* =========================================================
   PAGE
========================================================= */

.support-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(0, 115, 255, .17),
            transparent 35%
        ),
        linear-gradient(
            115deg,
            #020914 0%,
            #031121 45%,
            #03182d 100%
        );
}


/* =========================================================
   BACKGROUND
========================================================= */

.tech-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.tech-grid {
    position: absolute;
    inset: 0;

    opacity: .15;

    background-image:
        linear-gradient(
            rgba(26, 133, 219, .13) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(26, 133, 219, .13) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        radial-gradient(
            circle at 50% 50%,
            #000 0%,
            transparent 75%
        );
}

.tech-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.tech-glow-one {
    width: 580px;
    height: 580px;
    left: -250px;
    bottom: -180px;

    background: rgba(0, 112, 255, .24);
}

.tech-glow-two {
    width: 620px;
    height: 620px;
    right: -310px;
    top: 90px;

    background: rgba(0, 168, 255, .16);
}

.orbit {
    position: absolute;

    border:
        1px solid
        rgba(28, 175, 255, .18);

    border-radius: 50%;
}

.orbit-one {
    width: 760px;
    height: 760px;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        rotate(14deg);
}

.orbit-two {
    width: 900px;
    height: 330px;

    top: 46%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-15deg);
}

.orbit-three {
    width: 870px;
    height: 300px;

    top: 49%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        rotate(28deg);
}

.node {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 10px #fff,
        0 0 28px var(--cyan);
}

.node-1 {
    left: 18%;
    top: 34%;
}

.node-2 {
    right: 20%;
    top: 28%;
}

.node-3 {
    left: 20%;
    bottom: 25%;
}

.node-4 {
    right: 17%;
    bottom: 31%;
}


/* =========================================================
   HEADER
========================================================= */

.support-header {
    position: relative;
    z-index: 10;

    height: 94px;

    display: flex;
    align-items: center;

    padding: 0 46px;

    border-bottom:
        1px solid
        rgba(98, 159, 214, .16);

    background:
        rgba(1, 8, 17, .77);

    backdrop-filter: blur(15px);
}

.brand {
    width: 290px;

    text-decoration: none;
    color: white;
}

.brand-main {
    display: block;

    font-size: 42px;
    line-height: .92;

    font-weight: 900;
    letter-spacing: -2.8px;
}

.brand-main strong {
    color: var(--blue-bright);
}

.brand-tagline {
    display: block;

    margin-top: 7px;

    font-size: 9px;
    letter-spacing: 2.35px;
    font-weight: 700;

    color: #a9bdd2;
}

.support-nav {
    flex: 1;

    display: flex;
    justify-content: center;
    gap: 29px;
}

.support-nav a {
    color: #d7e2ee;

    font-size: 14px;
    text-decoration: none;

    transition: .2s ease;
}

.support-nav a:hover {
    color: white;
}

.support-header-active {
    min-width: 190px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    padding: 14px 20px;

    border:
        1px solid
        var(--blue-bright);

    border-radius: 50px;

    color: #fff;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 0 18px
        rgba(0, 154, 255, .22);

    background:
        rgba(0, 102, 255, .10);
}

.support-headset {
    color: var(--cyan);
}


/* =========================================================
   BACKGROUND COPY
========================================================= */

.background-copy {
    position: absolute;
    z-index: 1;

    pointer-events: none;
}

.background-copy-left {
    left: 47px;
    top: 195px;
}

.background-kicker {
    font-size: 12px;
    line-height: 1.8;

    letter-spacing: 3px;

    color: #7aa8d2;
}

.background-title {
    margin-top: 29px;

    font-size: clamp(38px, 4vw, 66px);
    line-height: .93;

    letter-spacing: -3px;
    font-weight: 800;

    color: rgba(238, 247, 255, .78);
}

.background-title strong {
    color: rgba(0, 135, 255, .85);
}

.background-subtitle {
    margin-top: 35px;

    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 2.5px;

    color: #65849f;
}

.background-copy-right {
    right: 43px;
    top: 42%;

    display: flex;
    flex-direction: column;
    gap: 9px;

    font-size: 12px;
    letter-spacing: 3px;

    color: #718ca6;
}

.right-line {
    width: 44px;
    height: 3px;

    margin-bottom: 12px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );
}


/* =========================================================
   MAIN
========================================================= */

.support-stage {
    position: relative;
    z-index: 5;

    flex: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 35px 25px 40px;
}


/* =========================================================
   MODAL
========================================================= */

.support-modal {
    width: min(
        var(--modal-width),
        calc(100vw - 50px)
    );

    overflow: hidden;

    border:
        1px solid
        rgba(0, 170, 255, .95);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(5, 24, 44, .98),
            rgba(3, 14, 29, .985)
        );

    box-shadow:
        0 0 0 1px
        rgba(0, 126, 255, .22),
        0 0 28px
        rgba(0, 142, 255, .30),
        0 35px 80px
        rgba(0, 0, 0, .55);

    backdrop-filter: blur(22px);
}


/* =========================================================
   MODAL HEADER
========================================================= */

.modal-header {
    min-height: 79px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 17px 26px;

    border-bottom:
        1px solid var(--line);
}

.modal-brand-main {
    font-size: 30px;
    line-height: .9;

    font-weight: 900;
    letter-spacing: -2px;
}

.modal-brand-main strong {
    color: var(--blue-bright);
}

.modal-brand-sub {
    margin-top: 6px;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.5px;

    color: #8ca5be;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.home-link {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--blue-bright);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}

.home-icon {
    font-size: 21px;
}

.modal-close {
    color: #dfeeff;

    font-size: 34px;
    line-height: 1;

    text-decoration: none;
    font-weight: 200;
}


/* =========================================================
   WIZARD PROGRESS
========================================================= */

.wizard-progress {
    display: flex;
    align-items: flex-start;

    width: 70%;

    margin: 19px auto 5px;
}

.wizard-step {
    width: 78px;

    display: flex;
    flex-direction: column;
    align-items: center;

    flex-shrink: 0;
}

.step-dot {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid #6d89a8;

    border-radius: 50%;

    background: #0b213b;

    color: #dcecff;

    font-size: 13px;

    transition: .25s ease;
}

.step-label {
    margin-top: 7px;

    color: #9eb4ca;

    font-size: 10px;
}

.wizard-step.active .step-dot {
    border-color: #71d9ff;

    background:
        linear-gradient(
            135deg,
            #006cff,
            #00b7ff
        );

    color: white;

    box-shadow:
        0 0 17px
        rgba(0, 175, 255, .68);
}

.wizard-step.active .step-label {
    color: white;
    font-weight: 700;
}

.wizard-line {
    height: 1px;

    flex: 1;

    margin-top: 17px;

    background:
        linear-gradient(
            90deg,
            rgba(0, 153, 255, .7),
            rgba(78, 112, 153, .45)
        );
}


/* =========================================================
   PANEL
========================================================= */

.wizard-panel {
    display: none;

    padding:
        12px 68px 28px;
}

.wizard-panel.active {
    display: block;
}

.step-overline {
    margin-bottom: 6px;

    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 800;

    color: var(--blue-bright);
}

.modal-title-block h1 {
    margin: 0;

    font-size: 34px;
    line-height: 1.1;

    letter-spacing: -1.4px;
}

.modal-title-block h1 span {
    color: var(--blue-bright);
}

.modal-title-block p {
    margin: 9px 0 0;

    color: #d0dce9;

    font-size: 17px;
}


/* =========================================================
   DETECTION AREA
========================================================= */

.detection-area {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 40px;

    margin-top: 26px;
}

.support-visual {
    position: relative;

    min-height: 148px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-right:
        1px solid
        rgba(84, 156, 224, .38);
}

.monitor {
    position: relative;
}

.monitor-screen {
    width: 190px;
    height: 112px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        3px solid #3cc8ff;

    border-radius: 6px;

    background:
        radial-gradient(
            circle at 50% 45%,
            #113b69,
            #06172a 65%
        );

    box-shadow:
        0 0 16px
        rgba(0, 168, 255, .38);
}

.remote-symbol {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #0b61f3,
            #072faa
        );

    box-shadow:
        0 8px 22px
        rgba(0, 89, 255, .35);
}

.remote-arrow {
    font-size: 31px;
    font-weight: 900;

    color: white;
}

.monitor-neck {
    width: 10px;
    height: 16px;

    margin: auto;

    background: #35bdfc;
}

.monitor-base {
    width: 64px;
    height: 5px;

    margin: auto;

    border-radius: 5px;

    background: #43c8ff;
}

.monitor-shadow {
    position: absolute;

    width: 180px;
    height: 18px;

    bottom: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0, 160, 255, .46),
            transparent 68%
        );
}


/* =========================================================
   DETECTED SYSTEM
========================================================= */

.detected-system {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.detect-label {
    margin-bottom: 5px;

    font-size: 13px;
    color: #c4d3e2;
}

.detect-card {
    height: 58px;

    display: flex;
    align-items: center;

    padding: 0 17px;

    gap: 15px;

    border:
        1px solid
        rgba(0, 128, 255, .70);

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            rgba(11, 41, 73, .97),
            rgba(9, 30, 53, .92)
        );

    box-shadow:
        inset 0 0 20px
        rgba(0, 112, 255, .06);
}

.detect-card strong {
    font-size: 14px;
}


/* WINDOWS ICON */

.platform-icon {
    width: 30px;
    height: 30px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    grid-template-rows:
        1fr 1fr;

    gap: 2px;

    transform: perspective(50px) rotateY(-8deg);
}

.platform-icon span {
    display: block;

    background:
        linear-gradient(
            145deg,
            #25c8ff,
            #0075f2
        );
}


/* CHROME ICON */

.browser-icon {
    width: 31px;
    height: 31px;

    position: relative;

    flex-shrink: 0;

    border-radius: 50%;
}

.browser-icon.chrome {
    background:
        conic-gradient(
            #e94235 0deg 120deg,
            #fabb05 120deg 210deg,
            #34a853 210deg 360deg
        );
}

.browser-icon.chrome::before {
    content: "";

    position: absolute;

    width: 14px;
    height: 14px;

    top: 8px;
    left: 8px;

    border-radius: 50%;

    background: #1689f7;

    border:
        2px solid #e5f3ff;
}

.browser-icon.edge {
    background:
        conic-gradient(
            #00a8f0,
            #0b65db,
            #00c59f,
            #00a8f0
        );
}

.browser-icon.firefox {
    background:
        conic-gradient(
            #ff9500,
            #ff3e66,
            #6e32d6,
            #ff9500
        );
}

.browser-icon.safari {
    border:
        3px solid #68cfff;

    background:
        linear-gradient(
            135deg,
            #08a9ff,
            #e6f9ff
        );
}

.browser-icon.other {
    border:
        2px solid #6ea3ce;

    background: #173653;
}


/* =========================================================
   KEEP OPEN
========================================================= */

.keep-open {
    margin-top: 18px;

    min-height: 71px;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 12px 22px;

    border:
        1px solid
        rgba(0, 139, 255, .72);

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(7, 57, 110, .90),
            rgba(5, 36, 70, .82)
        );

    box-shadow:
        inset 0 0 24px
        rgba(0, 136, 255, .07);
}

.keep-open-icon {
    width: 37px;
    height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border:
        2px solid var(--cyan);

    border-radius: 50%;

    color: var(--cyan);

    font-size: 22px;
    font-weight: 900;
}

.keep-open strong,
.keep-open span {
    display: block;
}

.keep-open strong {
    font-size: 16px;
}

.keep-open span {
    margin-top: 4px;

    font-size: 12px;

    color: #9ec9ec;
}


/* =========================================================
   ACTION
========================================================= */

.main-action {
    margin-top: 17px;

    text-align: center;
}

.start-support {
    width: 440px;
    max-width: 100%;

    min-height: 63px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    border:
        1px solid #6ee6ff;

    border-radius: 11px;

    cursor: pointer;

    color: white;

    font: inherit;
    font-size: 19px;
    font-weight: 900;

    background:
        linear-gradient(
            90deg,
            #056ef7,
            #0789ff
        );

    box-shadow:
        0 0 18px
        rgba(0, 144, 255, .60),
        inset 0 0 18px
        rgba(72, 216, 255, .14);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.start-support:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 30px
        rgba(0, 168, 255, .78);
}

.download-icon {
    font-size: 28px;
    line-height: 1;
}

.cta-arrow {
    font-size: 24px;
}

.action-help {
    margin-top: 10px;

    color: #aebed0;

    font-size: 12px;
}


/* =========================================================
   MANUAL DETECTION
========================================================= */

.manual-detection {
    margin-top: 24px;

    padding-top: 19px;

    text-align: center;

    border-top:
        1px solid
        rgba(98, 149, 197, .24);
}

.manual-detection-button {
    border: 0;
    padding: 4px;

    background: transparent;

    color: #16a8ff;

    cursor: pointer;

    font: inherit;
    font-size: 12px;
    font-weight: 700;

    text-decoration: underline;
}

.manual-selector {
    margin-top: 17px;

    padding: 16px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;

    text-align: left;

    border:
        1px solid
        rgba(40, 135, 218, .42);

    border-radius: 10px;

    background:
        rgba(3, 17, 32, .84);
}

.manual-selector[hidden] {
    display: none;
}

.manual-column > span {
    display: block;

    margin-bottom: 9px;

    color: #96afc7;

    font-size: 11px;
}

.manual-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.manual-buttons button {
    border:
        1px solid
        rgba(0, 139, 255, .55);

    border-radius: 6px;

    padding: 7px 11px;

    cursor: pointer;

    color: #dcedff;

    background: #0a2746;

    font-size: 11px;
}


/* =========================================================
   FEATURES
========================================================= */

.modal-features {
    min-height: 82px;

    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        rgba(49, 116, 175, .32);

    background:
        rgba(5, 25, 45, .96);
}

.feature {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 24px;
}

.feature + .feature {
    border-left:
        1px solid
        rgba(67, 121, 169, .25);
}

.feature-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--blue-bright);

    border:
        1px solid
        rgba(0, 154, 255, .66);

    border-radius: 8px;

    font-size: 20px;
    font-weight: 800;
}

.feature strong,
.feature span {
    display: block;
}

.feature strong {
    font-size: 11px;
}

.feature span {
    margin-top: 4px;

    color: #89a4bd;

    font-size: 9px;
}


/* =========================================================
   FOOTER
========================================================= */

.support-footer {
    position: relative;
    z-index: 5;

    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 42px;

    border-top:
        1px solid
        rgba(77, 132, 181, .20);

    background:
        rgba(1, 8, 16, .77);
}

.footer-brand {
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -1.5px;
}

.footer-brand strong {
    color: var(--blue-bright);
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 19px;

    color: #8099b0;

    font-size: 11px;
}

.footer-links span {
    width: 1px;
    height: 15px;

    background:
        rgba(128, 160, 190, .35);
}


/* =========================================================
   RESPONSIVE SAFETY
========================================================= */

@media (max-width: 1180px) {

    .support-nav {
        display: none;
    }

    .support-header {
        justify-content: space-between;
    }

    .background-copy {
        opacity: .30;
    }
}


@media (max-width: 800px) {

    .support-header {
        height: 82px;

        padding:
            0 20px;
    }

    .brand {
        width: auto;
    }

    .brand-main {
        font-size: 33px;
    }

    .brand-tagline {
        display: none;
    }

    .support-header-active {
        min-width: auto;

        padding:
            11px 15px;

        font-size: 12px;
    }

    .background-copy {
        display: none;
    }

    .support-stage {
        align-items: flex-start;

        padding:
            20px 12px;
    }

    .support-modal {
        width: 100%;
    }

    .wizard-panel {
        padding:
            15px 20px 25px;
    }

    .wizard-progress {
        width: 90%;
    }

    .step-label {
        display: none;
    }

    .detection-area {
        grid-template-columns: 1fr;
    }

    .support-visual {
        border-right: 0;
        border-bottom:
            1px solid
            rgba(84, 156, 224, .24);

        padding-bottom: 20px;
    }

    .manual-selector {
        grid-template-columns: 1fr;
    }

    .modal-features {
        grid-template-columns: 1fr;
    }

    .feature + .feature {
        border-left: 0;

        border-top:
            1px solid
            rgba(67, 121, 169, .18);
    }

    .support-footer {
        display: none;
    }
}


/* =========================================================
   DAMIOLINK ASSISTENZA
   DESKTOP COMPACT V1
   Modal target: 720px
========================================================= */

@media (min-width: 801px) {

    :root {
        --modal-width: 720px;
    }


    /* MODAL */

    .support-modal {
        border-radius: 15px;
    }


    /* HEADER MODAL */

    .modal-header {
        min-height: 68px;
        padding: 13px 23px;
    }

    .modal-brand-main {
        font-size: 27px;
    }

    .modal-brand-sub {
        margin-top: 5px;
        font-size: 7px;
    }

    .modal-header-actions {
        gap: 20px;
    }

    .home-link {
        font-size: 12px;
    }

    .modal-close {
        font-size: 30px;
    }


    /* PROGRESS */

    .wizard-progress {
        width: 72%;
        margin-top: 16px;
        margin-bottom: 2px;
    }

    .wizard-step {
        width: 70px;
    }

    .step-dot {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .step-label {
        margin-top: 5px;
        font-size: 9px;
    }

    .wizard-line {
        margin-top: 15px;
    }


    /* CONTENUTO */

    .wizard-panel {
        padding:
            9px
            60px
            23px;
    }

    .step-overline {
        margin-bottom: 5px;
        font-size: 8px;
    }

    .modal-title-block h1 {
        font-size: 30px;
    }

    .modal-title-block p {
        margin-top: 7px;
        font-size: 15px;
    }


    /* AREA RILEVAMENTO */

    .detection-area {
        gap: 32px;
        margin-top: 21px;
    }

    .support-visual {
        min-height: 128px;
    }

    .monitor-screen {
        width: 168px;
        height: 99px;
    }

    .remote-symbol {
        width: 63px;
        height: 63px;
        border-radius: 11px;
    }

    .remote-arrow {
        font-size: 27px;
    }

    .monitor-neck {
        height: 14px;
    }

    .monitor-base {
        width: 58px;
    }

    .monitor-shadow {
        width: 155px;
    }


    /* SISTEMA / BROWSER */

    .detected-system {
        gap: 11px;
    }

    .detect-label {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .detect-card {
        height: 51px;
        padding: 0 14px;
        gap: 13px;
    }

    .detect-card strong {
        font-size: 13px;
    }

    .platform-icon,
    .browser-icon {
        transform: scale(.90);
    }


    /* AVVISO */

    .keep-open {
        min-height: 62px;
        margin-top: 15px;
        padding: 10px 19px;
        gap: 15px;
    }

    .keep-open-icon {
        width: 33px;
        height: 33px;
        font-size: 19px;
    }

    .keep-open strong {
        font-size: 14px;
    }

    .keep-open span {
        margin-top: 3px;
        font-size: 11px;
    }


    /* CTA */

    .main-action {
        margin-top: 14px;
    }

    .start-support {
        width: 390px;
        min-height: 56px;
        gap: 15px;
        font-size: 17px;
    }

    .download-icon {
        font-size: 24px;
    }

    .cta-arrow {
        font-size: 21px;
    }

    .action-help {
        margin-top: 8px;
        font-size: 11px;
    }


    /* CORREZIONE MANUALE */

    .manual-detection {
        margin-top: 19px;
        padding-top: 15px;
    }

    .manual-detection-button {
        font-size: 11px;
    }


    /* FOOTER INTERNO */

    .modal-features {
        min-height: 70px;
    }

    .feature {
        gap: 9px;
        padding: 11px 18px;
    }

    .feature-icon {
        width: 30px;
        height: 30px;
        font-size: 17px;
    }

    .feature strong {
        font-size: 10px;
    }

    .feature span {
        margin-top: 3px;
        font-size: 8px;
    }

}



/* =========================================================
   DAMIOLINK
   ASSISTENZA STATE 2 DOWNLOAD
========================================================= */

.download-title-block {
    text-align: center;
}

.download-title-block h1 span {
    color: var(--blue-bright);
}


/* ---------------------------------------------------------
   DOWNLOAD GUIDE
--------------------------------------------------------- */

.download-guide {
    display: grid;

    grid-template-columns:
        1.12fr
        .88fr;

    gap: 30px;

    align-items: center;

    margin-top: 23px;
}


/* ---------------------------------------------------------
   FAKE BROWSER
--------------------------------------------------------- */

.browser-guide-window {
    overflow: hidden;

    border:
        1px solid
        rgba(0, 155, 255, .80);

    border-radius: 10px;

    background:
        #051526;

    box-shadow:
        0 0 20px
        rgba(0, 142, 255, .18);
}

.browser-guide-bar {
    height: 48px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        0 13px;

    border-bottom:
        1px solid
        rgba(67, 139, 200, .27);

    background:
        #0c2138;
}

.browser-guide-controls {
    display: flex;
    gap: 5px;
}

.browser-guide-controls span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #52728f;
}

.browser-guide-address {
    flex: 1;

    height: 25px;

    display: flex;
    align-items: center;

    padding:
        0 11px;

    border:
        1px solid
        rgba(92, 145, 190, .21);

    border-radius: 20px;

    color:
        #7894ad;

    background:
        #071727;

    font-size: 9px;
}

.browser-guide-download {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        #53d8ff;

    border-radius: 7px;

    color:
        white;

    background:
        linear-gradient(
            145deg,
            #0075ff,
            #00b0ff
        );

    font-size: 22px;
    font-weight: 900;

    box-shadow:
        0 0 17px
        rgba(0, 174, 255, .75);

    animation:
        downloadPulse
        1.6s
        ease-in-out
        infinite;
}

@keyframes downloadPulse {

    0%,
    100% {
        box-shadow:
            0 0 12px
            rgba(0, 174, 255, .45);
    }

    50% {
        box-shadow:
            0 0 27px
            rgba(0, 200, 255, .95);
    }

}

.browser-guide-body {
    position: relative;

    min-height: 175px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        24px;

    background:
        radial-gradient(
            circle at 70% 0%,
            rgba(0, 150, 255, .15),
            transparent 53%
        );
}

.guide-arrow {
    position: absolute;

    top: 11px;
    right: 22px;

    color:
        #19c7ff;

    font-size: 47px;

    line-height: 1;

    text-shadow:
        0 0 16px
        rgba(0, 192, 255, .75);
}

.guide-focus {
    width: 100%;

    padding:
        20px;

    border:
        1px solid
        rgba(0, 137, 255, .37);

    border-radius: 8px;

    text-align: center;

    background:
        rgba(5, 34, 63, .72);
}

.guide-focus-label {
    display: block;

    margin-bottom: 8px;

    color:
        #13aaff;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.guide-focus strong {
    font-size: 15px;
}


/* ---------------------------------------------------------
   CONTEXT
--------------------------------------------------------- */

.detected-download-context {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-bottom: 15px;
}

.detected-download-context div {
    padding:
        9px 11px;

    border:
        1px solid
        rgba(0, 130, 255, .38);

    border-radius: 7px;

    background:
        #0a213a;
}

.detected-download-context span,
.detected-download-context strong {
    display: block;
}

.detected-download-context span {
    margin-bottom: 3px;

    color:
        #7896b1;

    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.detected-download-context strong {
    font-size: 10px;
}


/* ---------------------------------------------------------
   INSTRUCTIONS
--------------------------------------------------------- */

.download-instructions {
    display: flex;
    flex-direction: column;
}

.instruction-step {
    display: flex;

    gap: 11px;

    padding:
        10px 0;
}

.instruction-step +
.instruction-step {
    border-top:
        1px solid
        rgba(73, 126, 176, .19);
}

.instruction-number {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid
        #16b9ff;

    border-radius: 50%;

    color:
        white;

    background:
        rgba(0, 116, 255, .22);

    font-size: 11px;
    font-weight: 800;
}

.instruction-step strong,
.instruction-step span {
    display: block;
}

.instruction-step strong {
    margin-bottom: 3px;

    color:
        #eff8ff;

    font-size: 12px;
}

.instruction-step span {
    color:
        #91abc3;

    font-size: 10px;
    line-height: 1.45;
}

.instruction-step
.download-filename {
    color:
        #2fc6ff;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-weight: 700;
}


/* ---------------------------------------------------------
   HELP MESSAGE
--------------------------------------------------------- */

.download-help-message {
    margin-top: 18px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding:
        11px 16px;

    border:
        1px solid
        rgba(0, 139, 255, .45);

    border-radius: 8px;

    background:
        rgba(7, 48, 89, .58);
}

.download-help-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid
        #15baff;

    border-radius: 50%;

    color:
        #15baff;

    font-weight: 900;
}

.download-help-message strong,
.download-help-message span {
    display: block;
}

.download-help-message strong {
    font-size: 12px;
}

.download-help-message span {
    margin-top: 2px;

    color:
        #8caac5;

    font-size: 9px;
}


/* ---------------------------------------------------------
   ACTIONS
--------------------------------------------------------- */

.download-actions {
    margin-top: 17px;

    text-align: center;
}

.opened-teamviewer {
    width: 390px;
    max-width: 100%;

    min-height: 54px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    border:
        1px solid
        #62e2ff;

    border-radius: 10px;

    cursor: pointer;

    color:
        white;

    background:
        linear-gradient(
            90deg,
            #0874ff,
            #0b9cff
        );

    box-shadow:
        0 0 18px
        rgba(0, 155, 255, .45);

    font: inherit;
    font-size: 15px;
    font-weight: 900;
}

.download-secondary-actions {
    margin-top: 12px;

    display: flex;
    justify-content: center;

    gap: 10px;
}

.download-secondary-actions button {
    min-width: 150px;

    padding:
        9px 13px;

    border:
        1px solid
        rgba(0, 144, 255, .45);

    border-radius: 7px;

    cursor: pointer;

    color:
        #a9c9e5;

    background:
        #071b30;

    font: inherit;
    font-size: 9px;
    font-weight: 800;
}

.download-secondary-actions button:hover {
    color:
        white;

    border-color:
        #16baff;
}


/* ---------------------------------------------------------
   CANT FIND
--------------------------------------------------------- */

.cant-find-panel {
    margin-top: 13px;

    padding:
        12px 15px;

    border:
        1px solid
        rgba(255, 181, 61, .42);

    border-radius: 8px;

    background:
        rgba(94, 57, 6, .23);
}

.cant-find-panel[hidden] {
    display: none;
}

.cant-find-panel strong {
    color:
        #ffd277;

    font-size: 11px;
}

.cant-find-panel p {
    margin:
        5px
        0
        0;

    color:
        #c7b389;

    font-size: 9px;
}


/* ---------------------------------------------------------
   BACK
--------------------------------------------------------- */

.download-back {
    margin-top: 14px;

    text-align: center;
}

.download-back button {
    border: 0;

    cursor: pointer;

    color:
        #7299ba;

    background:
        transparent;

    font: inherit;
    font-size: 9px;
}


/* ---------------------------------------------------------
   DESKTOP COMPACT
--------------------------------------------------------- */

@media (min-width: 801px) {

    #panelDownload {
        padding-top: 7px;
    }

}


/* ---------------------------------------------------------
   MOBILE SAFETY
--------------------------------------------------------- */

@media (max-width: 800px) {

    .download-guide {
        grid-template-columns: 1fr;
    }

    .browser-guide-body {
        min-height: 150px;
    }

    .detected-download-context {
        grid-template-columns: 1fr;
    }

    .download-secondary-actions {
        flex-direction: column;
    }

    .download-secondary-actions button {
        width: 100%;
    }

}



/* =========================================================
   DAMIOLINK ASSISTENZA
   STATE 2 COMPACT V2
========================================================= */

@media (min-width: 801px) {

    #panelDownload {
        padding:
            4px
            60px
            15px;
    }

    #panelDownload .modal-title-block p {
        margin-top: 5px;
    }

    #panelDownload .download-guide {
        margin-top: 15px;
        gap: 25px;
    }

    #panelDownload .browser-guide-bar {
        height: 42px;
    }

    #panelDownload .browser-guide-body {
        min-height: 145px;
        padding: 18px;
    }

    #panelDownload .guide-focus {
        padding: 15px;
    }

    #panelDownload .instruction-step {
        padding: 7px 0;
    }

    #panelDownload .download-help-message {
        margin-top: 11px;
        padding:
            8px
            14px;
    }

    #panelDownload .download-actions {
        margin-top: 11px;
    }

    #panelDownload .opened-teamviewer {
        min-height: 48px;
    }

    #panelDownload .download-secondary-actions {
        margin-top: 8px;
    }

    #panelDownload .download-back {
        margin-top: 8px;
    }

}


/* =========================================================
   DAMIOLINK ASSISTENZA
   STATE 3 APERTURA V1
========================================================= */

.opening-title-block {
    text-align: center;
}

.opening-title-block h1 span {
    color:
        var(--blue-bright);
}


/* ---------------------------------------------------------
   MAIN CONTENT
--------------------------------------------------------- */

.opening-content {
    display: grid;

    grid-template-columns:
        .95fr
        1.05fr;

    gap: 35px;

    align-items: center;

    margin-top: 23px;
}


/* ---------------------------------------------------------
   TEAMVIEWER MOCK WINDOW
--------------------------------------------------------- */

.teamviewer-window {
    overflow: hidden;

    border:
        1px solid
        rgba(0, 160, 255, .75);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #08213b,
            #041425
        );

    box-shadow:
        0 0 23px
        rgba(0, 142, 255, .19);
}

.tv-window-header {
    min-height: 68px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding:
        12px
        16px;

    border-bottom:
        1px solid
        rgba(70, 141, 201, .25);

    background:
        rgba(10, 37, 66, .88);
}

.tv-window-logo {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 9px;

    color:
        white;

    background:
        linear-gradient(
            145deg,
            #146eff,
            #0938b9
        );

    font-size: 28px;
    font-weight: 900;

    box-shadow:
        0 0 17px
        rgba(0, 111, 255, .35);
}

.tv-window-header strong,
.tv-window-header span {
    display: block;
}

.tv-window-header strong {
    font-size: 15px;
}

.tv-window-header span {
    margin-top: 3px;

    color:
        #839fba;

    font-size: 9px;
}

.tv-window-body {
    min-height: 145px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 20px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(0, 145, 255, .16),
            transparent 60%
        );
}

.tv-status-dot {
    width: 11px;
    height: 11px;

    margin-bottom: 12px;

    border-radius: 50%;

    background:
        #22d393;

    box-shadow:
        0 0 16px
        rgba(34, 211, 147, .75);
}

.tv-window-body strong {
    font-size: 15px;
}

.tv-window-body span {
    margin-top: 5px;

    color:
        #8ca7c0;

    font-size: 10px;
}


/* ---------------------------------------------------------
   OPENING CHECK
--------------------------------------------------------- */

.opening-check {
    display: flex;
    flex-direction: column;
}

.opening-context {
    width: fit-content;

    min-width: 150px;

    margin-bottom: 15px;

    padding:
        8px
        12px;

    border:
        1px solid
        rgba(0, 139, 255, .45);

    border-radius: 7px;

    background:
        rgba(7, 36, 66, .75);
}

.opening-context span,
.opening-context strong {
    display: block;
}

.opening-context span {
    margin-bottom: 3px;

    color:
        #7594af;

    font-size: 8px;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.opening-context strong {
    font-size: 11px;
}

.opening-check h2 {
    margin:
        0
        0
        7px;

    font-size: 20px;
    line-height: 1.15;
}

.opening-check p {
    margin:
        0
        0
        17px;

    color:
        #91aac1;

    font-size: 11px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.opening-success {
    width: 100%;

    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    border:
        1px solid
        #66e5ff;

    border-radius: 9px;

    cursor: pointer;

    color:
        white;

    background:
        linear-gradient(
            90deg,
            #0871fa,
            #0b9dff
        );

    box-shadow:
        0 0 17px
        rgba(0, 150, 255, .43);

    font: inherit;
    font-size: 12px;
    font-weight: 900;
}

.opening-problem {
    margin-top: 9px;

    min-height: 37px;

    border:
        1px solid
        rgba(0, 141, 255, .42);

    border-radius: 7px;

    cursor: pointer;

    color:
        #a3bfd7;

    background:
        #071b30;

    font: inherit;
    font-size: 9px;
    font-weight: 800;
}

.opening-problem:hover {
    color:
        white;

    border-color:
        #18baff;
}


/* ---------------------------------------------------------
   PROBLEM PANEL
--------------------------------------------------------- */

.opening-problem-panel {
    margin-top: 17px;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding:
        12px
        15px;

    border:
        1px solid
        rgba(255, 180, 52, .50);

    border-radius: 8px;

    background:
        rgba(103, 62, 5, .21);
}

.opening-problem-panel[hidden] {
    display: none;
}

.problem-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid
        #ffc85c;

    border-radius: 50%;

    color:
        #ffc85c;

    font-weight: 900;
}

.opening-problem-panel strong {
    display: block;

    color:
        #ffd47c;

    font-size: 11px;
}

.opening-problem-panel p {
    margin:
        4px
        0
        0;

    color:
        #c8b994;

    font-size: 9px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   READY
--------------------------------------------------------- */

.opening-ready {
    margin-top: 17px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding:
        12px
        15px;

    border:
        1px solid
        rgba(43, 218, 160, .46);

    border-radius: 8px;

    background:
        rgba(12, 80, 61, .25);
}

.opening-ready[hidden] {
    display: none;
}

.opening-ready-icon {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid
        #33dba5;

    border-radius: 50%;

    color:
        #33dba5;

    font-weight: 900;
}

.opening-ready strong,
.opening-ready span {
    display: block;
}

.opening-ready strong {
    font-size: 12px;
}

.opening-ready span {
    margin-top: 3px;

    color:
        #8ec6b3;

    font-size: 9px;
}


/* ---------------------------------------------------------
   BACK
--------------------------------------------------------- */

.opening-back {
    margin-top: 17px;

    text-align: center;
}

.opening-back button {
    border: 0;

    cursor: pointer;

    color:
        #7398b8;

    background:
        transparent;

    font: inherit;
    font-size: 9px;
}


/* ---------------------------------------------------------
   DESKTOP COMPACT
--------------------------------------------------------- */

@media (min-width: 801px) {

    #panelOpening {
        padding:
            7px
            60px
            18px;
    }

    #panelOpening .opening-content {
        margin-top: 18px;
    }

}


/* ---------------------------------------------------------
   MOBILE SAFETY
--------------------------------------------------------- */

@media (max-width: 800px) {

    .opening-content {
        grid-template-columns: 1fr;
    }

}