/* ==========================================================
   CONTROLLER SHOWCASE
========================================================== */

.urbio-controller-showcase,
.urbio-controller-showcase * {
    box-sizing: border-box;
}

.urbio-controller-showcase {
    --urbio-controller-gap: 28px;

    width: 100%;
    padding: 0;

    color: #ffffff;
    background: #050505;

    font-family: "DMSans", sans-serif;
}


/* ==========================================================
   SELECTOR
========================================================== */

.urbio-controller-selector {
    width: 100%;

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

    gap: 12px;
    padding: 12px;
    margin-bottom: var(--urbio-controller-gap);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.025);
}

.urbio-controller-tab {
    appearance: none;
    -webkit-appearance: none;

    min-height: 62px;
    padding: 14px 22px;

    border: 1px solid transparent;
    border-radius: 13px;

    color: rgba(255, 255, 255, 0.52);
    background: transparent;

    font-family: "Exo 2", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;

    cursor: pointer;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.urbio-controller-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.045);
}

.urbio-controller-tab.is-active {
    color: #ffffff;
    border-color: #ec571a;
    background: rgba(236, 87, 26, 0.1);
    transform: translateY(-1px);
}


/* ==========================================================
   LAYOUT
========================================================== */

.urbio-controller-layout {
    display: grid;
    grid-template-columns:
        minmax(360px, 0.82fr)
        minmax(0, 1.18fr);

    gap: var(--urbio-controller-gap);
    align-items: stretch;
}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.urbio-controller-content {
    position: relative;

    min-height: 610px;
    padding: 40px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;

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

    overflow: hidden;
}

.urbio-controller-index {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 36px;

    color: rgba(255, 255, 255, 0.42);

    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.urbio-controller-index > span:first-child {
    color: #ec571a;
}

.urbio-controller-index-divider {
    opacity: 0.4;
}


/* ==========================================================
   CONTENT PANELS
========================================================== */

.urbio-controller-copy {
    position: absolute;
    top: 108px;
    left: 50px;
    right: 50px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(18px);

    transition:
        opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.4s ease;
}

.urbio-controller-copy.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.urbio-controller-eyebrow {
    margin: 0 0 10px;

    color: #ec571a;

    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.urbio-controller-copy h2 {
    margin: 0 0 14px;

    color: #ffffff;

    font-family: "Exo 2", sans-serif;
    font-size: 46px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0;
}

.urbio-controller-description {
    max-width: 610px;
    margin: 0 0 28px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 17px;
    line-height: 1.6;
}


/* ==========================================================
   BENEFITS
========================================================== */

.urbio-controller-benefits {
    display: flex;
    flex-direction: column;

    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.urbio-controller-benefit {
    min-height: 52px;

    display: grid;
    grid-template-columns: 42px 1fr;

    gap: 18px;
    align-items: center;

    border-bottom: 1px solid rgba(255, 255, 255, 0.13);

    color: rgba(255, 255, 255, 0.82);

    font-size: 15px;
    line-height: 1.4;
}

.urbio-controller-benefit-number {
    color: rgba(255, 255, 255, 0.34);

    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
}


/* ==========================================================
   RIGHT VISUAL
========================================================== */

.urbio-controller-visual {
    position: relative;

    min-height: 610px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;

    background: #090909;

    overflow: hidden;
}

.urbio-controller-visual::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 60% 45%,
            rgba(255, 255, 255, 0.07),
            transparent 44%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.015),
            rgba(0, 0, 0, 0.18)
        );
}

.urbio-controller-image {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 40%;
    height: 40%;

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

    opacity: 0;

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

    transition:
        opacity 0.5s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

    user-select: none;
    pointer-events: none;
}

.urbio-controller-image.is-active {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}



/* ==========================================================
   CABINET CONTROL DIAGRAM
========================================================== */
.urbio-controller-diagram{position:absolute;z-index:2;top:50%;left:50%;width:min(84%,760px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-50%) translateY(18px);transition:opacity .45s ease,visibility .45s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.urbio-controller-diagram.is-active{opacity:1;visibility:visible;transform:translate(-50%,-50%) translateY(0)}
.urbio-controller-diagram__node{min-width:132px;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:16px 14px;text-align:center;color:#fff;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.11);border-radius:14px}
.urbio-controller-diagram__node--active{background:rgba(236,87,26,.11);border-color:rgba(236,87,26,.55);box-shadow:0 0 34px rgba(236,87,26,.12)}
.urbio-controller-diagram__node span{color:rgba(255,255,255,.38);font-family:"Exo 2",sans-serif;font-size:8px;font-weight:700;line-height:1.2;letter-spacing:.1em;text-transform:uppercase}
.urbio-controller-diagram__node strong{color:#fff;font-family:"Exo 2",sans-serif;font-size:14px;font-weight:600;line-height:1.25}
.urbio-controller-diagram__node small{color:#ec571a;font-family:"Exo 2",sans-serif;font-size:10px;font-weight:700;line-height:1;letter-spacing:.08em}
.urbio-controller-diagram__line{width:clamp(18px,3vw,46px);height:1px;flex:0 0 auto;background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(236,87,26,.72),rgba(255,255,255,.1))}

/* ==========================================================
   CONNECTIVITY DISPLAY
========================================================== */

.urbio-controller-connectivity {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 3;

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

    gap: 9px;
}

.urbio-controller-connectivity-label {
    color: rgba(255, 255, 255, 0.38);

    font-family: "Exo 2", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.urbio-controller-connectivity-options {
    display: none;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.urbio-controller-connectivity-options.is-active {
    display: flex;
}

.urbio-controller-connectivity-options span {
    min-height: 34px;
    padding: 0 13px;

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

    border: 1px solid rgba(236, 87, 26, 0.42);
    border-radius: 999px;

    color: rgba(255, 255, 255, 0.86);
    background: rgba(236, 87, 26, 0.1);

    font-family: "Exo 2", sans-serif;
    font-size: 11px;
    font-weight: 600;
}


/* ==========================================================
   VISUAL LABEL
========================================================== */

.urbio-controller-visual-label {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;

    color: rgba(255, 255, 255, 0.82);
    background: rgba(0, 0, 0, 0.58);

    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    font-weight: 500;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.urbio-controller-visual-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ec571a;
    box-shadow: 0 0 0 5px rgba(236, 87, 26, 0.15);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

    .urbio-controller-layout {
        grid-template-columns: 1fr;
    }

    .urbio-controller-content {
        min-height: 610px;
    }

    .urbio-controller-visual {
        min-height: 500px;
    }

    .urbio-controller-image {
        width: 52%;
        height: 68%;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .urbio-controller-selector {
        grid-template-columns: 1fr;

        gap: 6px;
        padding: 6px;

        border-radius: 16px;
    }

    .urbio-controller-tab {
        min-height: 52px;
        padding: 12px 14px;

        font-size: 14px;
    }

    .urbio-controller-layout {
        gap: 18px;
    }

    .urbio-controller-content {
        min-height: 700px;
        padding: 26px;

        border-radius: 20px;
    }

    .urbio-controller-index {
        margin-bottom: 38px;
    }

    .urbio-controller-copy {
        top: 102px;
        left: 26px;
        right: 26px;
    }

    .urbio-controller-copy h2 {
        font-size: 34px;
        letter-spacing: -0.8px;
    }

    .urbio-controller-description {
        margin-bottom: 28px;

        font-size: 15px;
        line-height: 1.55;
    }

    .urbio-controller-benefit {
        grid-template-columns: 34px 1fr;
        gap: 12px;

        min-height: 58px;

        font-size: 14px;
    }

    .urbio-controller-visual {
        min-height: 390px;
        border-radius: 20px;
    }

    .urbio-controller-image {
        width: 72%;
        height: 62%;
    }

    .urbio-controller-connectivity {
        top: 16px;
        left: 16px;
        right: 16px;
    }

    .urbio-controller-connectivity-options span {
        min-height: 31px;
        padding: 0 10px;

        font-size: 10px;
    }

    .urbio-controller-visual-label {
        left: 16px;
        bottom: 16px;
    }
}



@media (max-width: 767px) {
    .urbio-controller-diagram{width:calc(100% - 32px);flex-direction:column}
    .urbio-controller-diagram__node{width:min(100%,250px);min-height:62px;padding:10px 14px}
    .urbio-controller-diagram__line{width:1px;height:16px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(236,87,26,.72),rgba(255,255,255,.1))}
}

/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .urbio-controller-tab,
    .urbio-controller-copy,
    .urbio-controller-image,
    .urbio-controller-diagram {
        transition: none !important;
    }
}

/* Elementor controls / theme isolation */
.urbio-controller-showcase{--urbio-controller-accent:#ec571a}
.urbio-controller-tab.is-active{
    border-color:var(--urbio-controller-accent);
}
.urbio-controller-visual-dot{
    background:var(--urbio-controller-accent);
}
.elementor-widget-urbio_controller_showcase .urbio-controller-tab{
    box-shadow:none;
}
.elementor-widget-urbio_controller_showcase button{
    font-family:inherit;
}

/* Strong mobile flow fix */
@media(max-width:767px){
    .urbio-controller-showcase{
        min-width:0;
        max-width:100%;
        overflow-x:clip;
    }

    .urbio-controller-selector,
    .urbio-controller-layout,
    .urbio-controller-content,
    .urbio-controller-visual{
        width:100%;
        min-width:0;
        max-width:100%;
    }

    .urbio-controller-content{
        min-height:0;
        padding:24px 18px;
    }

    .urbio-controller-index{
        margin-bottom:22px;
    }

    .urbio-controller-copy,
    .urbio-controller-copy.is-active{
        position:relative;
        inset:auto;
        top:auto;
        left:auto;
        right:auto;
    }

    .urbio-controller-copy{
        display:none;
    }

    .urbio-controller-copy.is-active{
        display:block;
    }

    .urbio-controller-copy h2{
        font-size:clamp(30px,9vw,36px);
        overflow-wrap:anywhere;
    }

    .urbio-controller-description{
        margin-bottom:22px;
    }

    .urbio-controller-benefit{
        grid-template-columns:32px minmax(0,1fr);
        gap:10px;
        padding:8px 0;
        min-height:58px;
    }

    .urbio-controller-visual{
        min-height:390px;
    }

    .urbio-controller-image{
        width:78%;
        height:58%;
    }

    .urbio-controller-connectivity{
        right:16px;
    }

    .urbio-controller-connectivity-options{
        max-width:100%;
    }

    .urbio-controller-visual-label{
        right:16px;
        max-width:calc(100% - 32px);
        white-space:normal;
    }

    .urbio-controller-diagram{
        width:calc(100% - 28px);
    }
}