/* ------------------------------------------------------------------
   fusion-gateway.css
   The FUSION Gateway request-flow figure on /products/webcore-fusion.
   Sits on top of product-family.css and reuses its palette (#204593
   brand blue, #007bff accent, #dee7ff borders, #f5f8ff tint). Kept in
   its own file so the product page picks it up without a cache bump
   of product-family.css.
   ------------------------------------------------------------------ */

/* Three nodes in a row with an arrow between each: agencies -> gateway
   -> the carrier's NDC services. The gateway node is the wide one. */
.gw-flow {
    display: flex;
    align-items: stretch;
    margin: 26px 0 14px;
}

.gw-node {
    flex: 1 1 0;
    background: #fff;
    border: 2px solid #dee7ff;
    border-radius: 9px;
    padding: 16px 18px;
    box-shadow: 0 .15rem 1.35rem rgba(33, 40, 50, .10);
}

.gw-node h5 {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #007bff;
    margin: 0 0 6px;
}

.gw-node p {
    font-size: .9rem;
    line-height: 1.45;
    color: #4d4e53;
    margin: 0;
}

.gw-node-core {
    flex: 2 1 0;
    border-color: #204593;
    background: #f5f8ff;
}

.gw-node-core h5 {
    color: #204593;
}

.gw-arrow {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #204593;
    font-size: 1.6rem;
    line-height: 1;
}

/* The six middleware steps, as a chip strip inside the gateway node. */
.gw-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.gw-steps li {
    padding: 3px 10px;
    border-radius: 14px;
    background: #204593;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The line under the figure: where the registry lives and who manages it. */
.gw-strip {
    font-size: .9rem;
    line-height: 1.5;
    color: #4d4e53;
    margin: 0 0 24px;
}

.gw-strip code {
    font-size: .85em;
    color: #204593;
    background: #f5f8ff;
    padding: 1px 5px;
    border-radius: 4px;
}

@media only screen and (max-width: 992px) {
    .gw-flow {
        flex-direction: column;
    }

    .gw-arrow {
        flex-basis: 34px;
        transform: rotate(90deg);
    }

    .gw-node,
    .gw-node-core {
        flex: 0 0 auto;
    }
}