/* =========================================================
   01. GLOBAL / RESET
========================================================= */


/* =========================================================
   02. MAIN DIAGRAM WRAPPER
========================================================= */

.diagram-wrapper {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 25px 80px;

}


/* =========================================================
   03. DIAGRAM CANVAS
========================================================= */

.diagram {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 720px;
    background: #ffffff;
    border: 3px solid #8e181b;

    border-radius: 18px;

    box-shadow:
        0 15px 45px rgba(15, 23, 42, 0.10);

    overflow: hidden;

}


/* =========================================================
   04. SUBTLE DIAGRAM BACKGROUND
========================================================= */

.diagram::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(0, 0, 0, 0.025) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(0, 0, 0, 0.025) 1px,
            transparent 1px);

    background-size: 35px 35px;

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   05. IMAGE SECTION
========================================================= */

.image-section {

    position: absolute;

    left: 25%;

    top: 25%;

    width: 51%;

    height: 45%;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   06. IMAGE FRAME
========================================================= */

.image-frame {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius: 8px;

    background: #f3f4f6;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.12);

}


/* =========================================================
   07. PRODUCT IMAGE
========================================================= */

.product-image {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

}


/* =========================================================
   08. IMAGE OVERLAY
========================================================= */

.image-overlay {

    position: absolute;

    inset: 0;

    border:
        1px solid rgba(255, 255, 255, 0.5);

    pointer-events: none;

}


/* =========================================================
   09. LABEL BASE
========================================================= */

.label {

    position: absolute;

    z-index: 10;

    padding: 7px 12px;

    min-width: 90px;

    border-radius: 7px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid #d8dee6;

    box-shadow:
        0 5px 15px rgba(15, 23, 42, 0.08);

    color: #8B0000;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.25;

    text-align: center;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;

    cursor: default;

    user-select: none;

}


/* =========================================================
   10. LABEL HOVER
========================================================= */

.label:hover {

    transform:
        translateY(-3px) scale(1.025);

    background: #ffffff;

    border-color: #8B0000;

    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.18);

}


/* =========================================================
   11. TOP LABEL POSITIONS
========================================================= */

#label-switches {

    left: 5%;

    top: 11%;

    width: 110px;

}


#label-busway {

    left: 17%;

    top: 5%;

    width: 130px;

}


#label-mpcb {

    left: 29%;

    top: 4%;

    width: 145px;

}


#label-vsd {

    left: 42%;

    top: 6%;

    width: 145px;

}


#label-soft-starters {

    left: 54%;

    top: 7%;

    width: 130px;

}


#label-electronic-timers {

    left: 65%;

    top: 6%;

    width: 145px;

}


#label-isolators {

    left: 77%;

    top: 8%;

    width: 100px;

}


#label-source-changeover {

    right: 2%;

    top: 12%;

    width: 165px;

}


/* =========================================================
   12. LEFT LABEL POSITIONS
========================================================= */

#label-push-buttons {

    left: 2%;

    top: 27%;

    width: 155px;

}


#label-pilot-devices {

    left: 1.5%;

    top: 39%;

    width: 160px;

}


#label-mccb {

    left: 1%;

    top: 51%;

    width: 175px;

}


#label-vcb {

    left: 2%;

    top: 65%;

    width: 150px;

}


#label-acb {

    left: 24%;

    top: 80%;

    width: 140px;

}


/* =========================================================
   13. BOTTOM LABELS
========================================================= */

#label-panel-box {

    left: 40%;

    top: 80%;

    width: 120px;

}


#label-enclosure {

    left: 57%;

    top: 82%;

    width: 145px;

}


/* =========================================================
   14. RIGHT LABEL POSITIONS
========================================================= */

#label-power-monitoring {

    right: 1.5%;

    top: 35%;

    width: 180px;

}


#label-controllers {

    right: 2%;

    top: 48%;

    width: 130px;

}


#label-relays {

    right: 6%;

    top: 61%;

    width: 100px;

}


/* =========================================================
   15. ARROW BASE
========================================================= */

.arrow {

    position: absolute;

    z-index: 6;

    overflow: visible;

    pointer-events: none;

}


/* =========================================================
   16. ARROW LINE
========================================================= */

.arrow-line {

    fill: none;

    stroke: #8B0000;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;

}


/* =========================================================
   17. ARROW HEAD
========================================================= */

.arrow-head {

    fill: #8B0000;

}


/* =========================================================
   18. TOP ARROWS
========================================================= */

#arrow-switches {

    left: 12%;

    top: 17%;

    width: 90px;

    height: 95px;

}


#arrow-busway {

    left: 23%;

    top: 11%;

    width: 70px;

    height: 100px;

}


#arrow-mpcb {

    left: 35%;

    top: 10%;

    width: 65px;

    height: 105px;

}


#arrow-vsd {

    left: 47%;

    top: 12%;

    width: 70px;

    height: 105px;

}


#arrow-soft-starters {

    left: 58%;

    top: 13%;

    width: 65px;

    height: 100px;

}


#arrow-electronic-timers {

    left: 68%;

    top: 12%;

    width: 65px;

    height: 105px;

}


#arrow-isolators {

    left: 78%;

    top: 14%;

    width: 65px;

    height: 105px;

}


#arrow-source-changeover {

    right: 10%;

    top: 18%;

    width: 110px;

    height: 100px;

}


/* =========================================================
   19. LEFT ARROWS
========================================================= */

#arrow-push-buttons {

    left: 13%;

    top: 30%;

    width: 115px;

    height: 70px;

}


#arrow-pilot-devices {

    left: 13%;

    top: 41%;

    width: 120px;

    height: 70px;

}


#arrow-mccb {

    left: 14%;

    top: 52%;

    width: 120px;

    height: 90px;

}


#arrow-vcb {

    left: 13%;

    top: 66%;

    width: 115px;

    height: 80px;

}


#arrow-acb {

    left: 24%;

    top: 72%;

    width: 100px;

    height: 85px;

}


/* =========================================================
   20. BOTTOM ARROWS
========================================================= */

#arrow-panel-box {

    left: 42%;

    top: 68%;

    width: 60px;

    height: 130px;

}


#arrow-enclosure {

    left: 55%;

    top: 69%;

    width: 75px;

    height: 125px;

}


/* =========================================================
   21. RIGHT ARROWS
========================================================= */

#arrow-power-monitoring {

    right: 13%;

    top: 37%;

    width: 105px;

    height: 65px;

}


#arrow-controllers {

    right: 13%;

    top: 49%;

    width: 105px;

    height: 70px;

}


#arrow-relays {

    right: 14%;

    top: 61%;

    width: 105px;

    height: 70px;

}


/* =========================================================
   22. HOVER CONNECTION
========================================================= */

.diagram:has(#label-switches:hover) #arrow-switches .arrow-line,

.diagram:has(#label-busway:hover) #arrow-busway .arrow-line,

.diagram:has(#label-mpcb:hover) #arrow-mpcb .arrow-line,

.diagram:has(#label-vsd:hover) #arrow-vsd .arrow-line,

.diagram:has(#label-soft-starters:hover) #arrow-soft-starters .arrow-line,

.diagram:has(#label-electronic-timers:hover) #arrow-electronic-timers .arrow-line,

.diagram:has(#label-isolators:hover) #arrow-isolators .arrow-line,

.diagram:has(#label-source-changeover:hover) #arrow-source-changeover .arrow-line,

.diagram:has(#label-push-buttons:hover) #arrow-push-buttons .arrow-line,

.diagram:has(#label-pilot-devices:hover) #arrow-pilot-devices .arrow-line,

.diagram:has(#label-mccb:hover) #arrow-mccb .arrow-line,

.diagram:has(#label-vcb:hover) #arrow-vcb .arrow-line,

.diagram:has(#label-acb:hover) #arrow-acb .arrow-line,

.diagram:has(#label-panel-box:hover) #arrow-panel-box .arrow-line,

.diagram:has(#label-enclosure:hover) #arrow-enclosure .arrow-line,

.diagram:has(#label-power-monitoring:hover) #arrow-power-monitoring .arrow-line,

.diagram:has(#label-controllers:hover) #arrow-controllers .arrow-line,

.diagram:has(#label-relays:hover) #arrow-relays .arrow-line {

    stroke-width: 3.5;

}


/* =========================================================
   23. HOVER ARROW HEADS
========================================================= */

.diagram:has(#label-switches:hover) #arrow-switches .arrow-head,

.diagram:has(#label-busway:hover) #arrow-busway .arrow-head,

.diagram:has(#label-mpcb:hover) #arrow-mpcb .arrow-head,

.diagram:has(#label-vsd:hover) #arrow-vsd .arrow-head,

.diagram:has(#label-soft-starters:hover) #arrow-soft-starters .arrow-head,

.diagram:has(#label-electronic-timers:hover) #arrow-electronic-timers .arrow-head,

.diagram:has(#label-isolators:hover) #arrow-isolators .arrow-head,

.diagram:has(#label-source-changeover:hover) #arrow-source-changeover .arrow-head,

.diagram:has(#label-push-buttons:hover) #arrow-push-buttons .arrow-head,

.diagram:has(#label-pilot-devices:hover) #arrow-pilot-devices .arrow-head,

.diagram:has(#label-mccb:hover) #arrow-mccb .arrow-head,

.diagram:has(#label-vcb:hover) #arrow-vcb .arrow-head,

.diagram:has(#label-acb:hover) #arrow-acb .arrow-head,

.diagram:has(#label-panel-box:hover) #arrow-panel-box .arrow-head,

.diagram:has(#label-enclosure:hover) #arrow-enclosure .arrow-head,

.diagram:has(#label-power-monitoring:hover) #arrow-power-monitoring .arrow-head,

.diagram:has(#label-controllers:hover) #arrow-controllers .arrow-head,

.diagram:has(#label-relays:hover) #arrow-relays .arrow-head {

    fill: #8B0000;

}


/* =========================================================
   26. MOBILE RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .diagram-wrapper {
        padding: 10px;
    }

    .diagram {
        aspect-ratio: auto;
        min-height: auto;
        border-radius: 12px;
        padding-bottom: 25px;
    }


    /* =====================================================
       IMAGE
    ===================================================== */

    .image-section {
        position: relative;
        left: 0;
        top: 0;

        width: 100%;
        height: auto;

        padding: 15px 5px 10px;

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

        z-index: 2;
    }


    .image-frame {
        width: 100%;
        height: auto;

        min-height: 0;

        border-radius: 8px;

        background: #f3f4f6;

        box-shadow:
            0 8px 25px rgba(0, 0, 0, 0.12);

        overflow: hidden;
    }


    .product-image {
        position: relative;

        width: 100%;
        height: auto;

        min-height: 0;

        object-fit: contain;
        object-position: center;

        display: block;
    }


    /* =====================================================
       HIDE ARROWS ON MOBILE
    ===================================================== */

    .arrows-section {
        display: none !important;
    }


    /* =====================================================
       LABELS / NAMES
    ===================================================== */

    .labels-section {

        position: relative;

        left: 0;
        top: 0;

        width: 100%;
        height: auto;

        padding: 10px;

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;

        z-index: 10;
    }


    .labels-section .label {

        position: relative;

        left: auto !important;
        right: auto !important;
        top: auto !important;

        width: 100% !important;

        min-width: 0;

        margin: 0;

        padding: 9px 7px;

        font-size: 11px;

        line-height: 1.3;

        border-radius: 7px;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        min-height: 48px;
    }


    /* =====================================================
       REMOVE DESKTOP HOVER MOVEMENT ON MOBILE
    ===================================================== */

    .label:hover {

        transform: none;

        background: rgba(255, 255, 255, 0.94);

        border-color: #8B0000;

        box-shadow:
            0 5px 15px rgba(15, 23, 42, 0.08);
    }


    /* =====================================================
       HIDE TITLE ON MOBILE
    ===================================================== */

    .diagram-title {
        display: none !important;
    }


    /* =====================================================
       HIDE IMAGE OVERLAY
    ===================================================== */

    .image-overlay {
        display: none !important;
    }

}


/* =========================================================
   26. MOBILE RESPONSIVE
   TOP NAMES + CENTER IMAGE + BOTTOM NAMES
========================================================= */

@media (max-width: 768px) {

    .diagram-wrapper {
        padding: 5px;
    }

    .diagram {

        position: relative;

        display: grid;

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

        grid-auto-rows: auto;

        align-content: start;

        width: 100%;

        min-height: 0;

        height: auto;

        aspect-ratio: auto;

        padding: 6px;

        border-radius: 12px;

        overflow: visible;

        gap: 5px;
    }


    /* =====================================================
       LABEL SECTION
    ===================================================== */

    .labels-section {

        display: contents;

    }


    /* =====================================================
       ALL LABELS
    ===================================================== */

    .labels-section .label {

        position: relative;

        left: auto !important;

        right: auto !important;

        top: auto !important;

        width: 100% !important;

        min-width: 0;

        min-height: 28px;

        margin: 0;

        padding: 5px 3px;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        font-size: 8.5px;

        line-height: 1.15;

        border-radius: 6px;

        background: rgba(255,255,255,0.96);

        box-shadow:
            0 2px 7px rgba(15,23,42,0.07);

        z-index: 10;
    }


    /* =====================================================
       TOP 9 NAMES
    ===================================================== */

    #label-switches {
        grid-column: 1;
        grid-row: 1;
    }

    #label-busway {
        grid-column: 2;
        grid-row: 1;
    }

    #label-mpcb {
        grid-column: 3;
        grid-row: 1;
    }

    #label-vsd {
        grid-column: 1;
        grid-row: 2;
    }

    #label-soft-starters {
        grid-column: 2;
        grid-row: 2;
    }

    #label-electronic-timers {
        grid-column: 3;
        grid-row: 2;
    }

    #label-isolators {
        grid-column: 1;
        grid-row: 3;
    }

    #label-source-changeover {
        grid-column: 2;
        grid-row: 3;
    }

    #label-push-buttons {
        grid-column: 3;
        grid-row: 3;
    }


    /* =====================================================
       IMAGE IN CENTER
    ===================================================== */

    .image-section {

        position: relative;

        left: auto;

        top: auto;

        grid-column: 1 / 4;

        grid-row: 4;

        width: 100%;

        height: auto;

        padding: 4px 8px;

        display: flex;

        align-items: center;

        justify-content: center;

        z-index: 2;
    }


    .image-frame {

        position: relative;

        width: 100%;

        height: auto;

        overflow: visible;

        border-radius: 7px;

        background: #f3f4f6;

        box-shadow:
            0 5px 15px rgba(0,0,0,0.10);
    }


    .product-image {

        position: relative;

        width: 100%;

        height: auto;

        display: block;

        object-fit: contain;

        object-position: center;
    }


    /* =====================================================
       BOTTOM 9 NAMES
    ===================================================== */

    #label-pilot-devices {
        grid-column: 1;
        grid-row: 5;
    }

    #label-mccb {
        grid-column: 2;
        grid-row: 5;
    }

    #label-vcb {
        grid-column: 3;
        grid-row: 5;
    }

    #label-acb {
        grid-column: 1;
        grid-row: 6;
    }

    #label-panel-box {
        grid-column: 2;
        grid-row: 6;
    }

    #label-enclosure {
        grid-column: 3;
        grid-row: 6;
    }

    #label-power-monitoring {
        grid-column: 1;
        grid-row: 7;
    }

    #label-controllers {
        grid-column: 2;
        grid-row: 7;
    }

    #label-relays {
        grid-column: 3;
        grid-row: 7;
    }


    /* =====================================================
       NO ARROWS ON MOBILE
    ===================================================== */

    .arrows-section {
        display: none !important;
    }


    /* =====================================================
       NO TITLE ON MOBILE
    ===================================================== */

    .diagram-title {
        display: none !important;
    }


    /* =====================================================
       NO IMAGE OVERLAY
    ===================================================== */

    .image-overlay {
        display: none !important;
    }


    /* =====================================================
       NORMAL LABEL HOVER
    ===================================================== */

    .label:hover {

        transform: translateY(-1px);

        background: #ffffff;

        border-color: #8B0000;

        box-shadow:
            0 4px 10px rgba(15,23,42,0.12);
    }


    /* =====================================================
       MOBILE HOVER POINT
    ===================================================== */

    .image-frame::after {

        content: "";

        position: absolute;

        width: 10px;

        height: 10px;

        border-radius: 50%;

        background: #8B0000;

        border: 2px solid #ffffff;

        box-shadow:
            0 0 0 2px rgba(139, 0, 0, 0.30),
            0 2px 6px rgba(0,0,0,0.30);

        z-index: 50;

        pointer-events: none;

        opacity: 0;

        transform:
            translate(-50%, -50%);

        transition:
            opacity 0.15s ease;

        left: 13%;

        top: 43%;
    }


    /* =====================================================
       SWITCHES
    ===================================================== */

    .diagram:has(#label-switches:hover)
    .image-frame::after,

    .diagram:has(#label-switches:active)
    .image-frame::after {

        opacity: 1;

        left: 13%;

        top: 43%;
    }


    /* =====================================================
       BUSWAY
    ===================================================== */

    .diagram:has(#label-busway:hover)
    .image-frame::after,

    .diagram:has(#label-busway:active)
    .image-frame::after {

        opacity: 1;

        left: 27%;

        top: 30%;
    }


    /* =====================================================
       MPCB
    ===================================================== */

    .diagram:has(#label-mpcb:hover)
    .image-frame::after,

    .diagram:has(#label-mpcb:active)
    .image-frame::after {

        opacity: 1;

        left: 36%;

        top: 48%;
    }


    /* =====================================================
       VSD
    ===================================================== */

    .diagram:has(#label-vsd:hover)
    .image-frame::after,

    .diagram:has(#label-vsd:active)
    .image-frame::after {

        opacity: 1;

        left: 46%;

        top: 47%;
    }


    /* =====================================================
       SOFT STARTERS
    ===================================================== */

    .diagram:has(#label-soft-starters:hover)
    .image-frame::after,

    .diagram:has(#label-soft-starters:active)
    .image-frame::after {

        opacity: 1;

        left: 56%;

        top: 46%;
    }


    /* =====================================================
       ELECTRONIC TIMERS
    ===================================================== */

    .diagram:has(#label-electronic-timers:hover)
    .image-frame::after,

    .diagram:has(#label-electronic-timers:active)
    .image-frame::after {

        opacity: 1;

        left: 66%;

        top: 45%;
    }


    /* =====================================================
       ISOLATORS
    ===================================================== */

    .diagram:has(#label-isolators:hover)
    .image-frame::after,

    .diagram:has(#label-isolators:active)
    .image-frame::after {

        opacity: 1;

        left: 79%;

        top: 44%;
    }


    /* =====================================================
       SOURCE CHANGEOVER
    ===================================================== */

    .diagram:has(#label-source-changeover:hover)
    .image-frame::after,

    .diagram:has(#label-source-changeover:active)
    .image-frame::after {

        opacity: 1;

        left: 88%;

        top: 48%;
    }


    /* =====================================================
       PUSH BUTTONS
    ===================================================== */

    .diagram:has(#label-push-buttons:hover)
    .image-frame::after,

    .diagram:has(#label-push-buttons:active)
    .image-frame::after {

        opacity: 1;

        left: 20%;

        top: 60%;
    }


    /* =====================================================
       PILOT DEVICES
    ===================================================== */

    .diagram:has(#label-pilot-devices:hover)
    .image-frame::after,

    .diagram:has(#label-pilot-devices:active)
    .image-frame::after {

        opacity: 1;

        left: 29%;

        top: 61%;
    }


    /* =====================================================
       MCCB
    ===================================================== */

    .diagram:has(#label-mccb:hover)
    .image-frame::after,

    .diagram:has(#label-mccb:active)
    .image-frame::after {

        opacity: 1;

        left: 37%;

        top: 68%;
    }


    /* =====================================================
       VCB
    ===================================================== */

    .diagram:has(#label-vcb:hover)
    .image-frame::after,

    .diagram:has(#label-vcb:active)
    .image-frame::after {

        opacity: 1;

        left: 47%;

        top: 68%;
    }


    /* =====================================================
       ACB
    ===================================================== */

    .diagram:has(#label-acb:hover)
    .image-frame::after,

    .diagram:has(#label-acb:active)
    .image-frame::after {

        opacity: 1;

        left: 57%;

        top: 68%;
    }


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

    .diagram:has(#label-panel-box:hover)
    .image-frame::after,

    .diagram:has(#label-panel-box:active)
    .image-frame::after {

        opacity: 1;

        left: 48%;

        top: 82%;
    }


    /* =====================================================
       ENCLOSURE
    ===================================================== */

    .diagram:has(#label-enclosure:hover)
    .image-frame::after,

    .diagram:has(#label-enclosure:active)
    .image-frame::after {

        opacity: 1;

        left: 62%;

        top: 82%;
    }


    /* =====================================================
       POWER MONITORING
    ===================================================== */

    .diagram:has(#label-power-monitoring:hover)
    .image-frame::after,

    .diagram:has(#label-power-monitoring:active)
    .image-frame::after {

        opacity: 1;

        left: 77%;

        top: 63%;
    }


    /* =====================================================
       CONTROLLERS
    ===================================================== */

    .diagram:has(#label-controllers:hover)
    .image-frame::after,

    .diagram:has(#label-controllers:active)
    .image-frame::after {

        opacity: 1;

        left: 82%;

        top: 70%;
    }


    /* =====================================================
       RELAYS
    ===================================================== */

    .diagram:has(#label-relays:hover)
    .image-frame::after,

    .diagram:has(#label-relays:active)
    .image-frame::after {

        opacity: 1;

        left: 85%;

        top: 78%;
    }

}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 480px) {

    .diagram-wrapper {
        padding: 3px;
    }

    .diagram {

        padding: 4px;

        gap: 4px;

        border-radius: 10px;
    }


    .labels-section .label {

        min-height: 25px;

        padding: 4px 2px;

        font-size: 7.5px;

        line-height: 1.1;
    }


    .image-section {

        padding: 3px 5px;

    }


    .image-frame::after {

        width: 9px;

        height: 9px;

    }

}