/* ==========================================================
   UBIZIMA+ LOGIN R7

   Structural contract:
   - Left = applications + actual product UI
   - Right = existing identity-header + identity-main
   - Sibling grid sections
   - No cross-column overlay positioning
   ========================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;

    min-height: 100%;

    margin: 0 !important;
    padding: 0 !important;
}

body {
    min-height: 100vh !important;

    overflow-x: hidden !important;

    background: #ffffff !important;
}

#ubz-r7-layout {
    width: 100% !important;

    min-height: 100vh !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 56%)
        minmax(0, 44%) !important;

    isolation: isolate !important;

    overflow: hidden !important;

    background: #ffffff !important;
}

/* ==========================================================
   LEFT SECTION
   ========================================================== */

#ubz-r7-left {
    position: relative !important;

    inset: auto !important;

    min-width: 0 !important;

    width: auto !important;

    margin: 0 !important;

    padding:
        30px
        clamp(35px, 4.2vw, 70px)
        28px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    transform: none !important;

    border-right:
        1px
        solid
        #dce6f1 !important;

    background:
        radial-gradient(
            circle at 11% 18%,
            rgba(15,126,237,.11),
            transparent 29%
        ),
        radial-gradient(
            circle at -4% 50%,
            rgba(24,181,107,.13),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #f4faff 0%,
            #ffffff 72%
        ) !important;
}

.ubz-r7-left-inner {
    width: min(100%, 720px);

    margin-inline: auto;
}

/*
 * Professional integrated logo row.
 */
.ubz-r7-brand {
    min-height: 68px;

    display: flex;

    align-items: center;

    margin:
        0
        0
        23px;

    padding:
        0
        0
        17px;

    border-bottom:
        1px
        solid
        rgba(205,220,234,.90);
}

.ubz-r7-brand img {
    display: block;

    width: 190px;
    max-width: 100%;

    height: auto;
    max-height: 47px;

    object-fit: contain;
}

.ubz-r7-eyebrow {
    margin:
        0
        0
        8px;

    color: #57718f;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: .10em;

    text-transform: uppercase;
}

#ubz-r7-left h1 {
    max-width: 620px;

    margin: 0;

    color: #071c40;

    font-size:
        clamp(38px, 3.25vw, 54px);

    line-height: 1.04;

    letter-spacing: -.04em;
}

.ubz-r7-copy {
    max-width: 640px;

    margin:
        14px
        0
        17px;

    color: #536b88;

    font-size: 14.5px;

    line-height: 1.48;
}

.ubz-r7-capabilities {
    display: grid;

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

    gap: 9px;

    margin-bottom: 10px;
}

.ubz-r7-capability {
    min-width: 0;

    min-height: 43px;

    padding:
        6px
        8px;

    display: flex;

    align-items: center;

    gap: 7px;

    border:
        1px
        solid
        #dce7f2;

    border-radius: 10px;

    background:
        rgba(255,255,255,.88);
}

.ubz-r7-capability-icon {
    width: 29px;
    height: 29px;

    flex:
        0
        0
        29px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    color: #1768c9;

    background: #eff7ff;

    font-size: 14px;
}

.ubz-r7-capability strong {
    display: block;

    color: #173451;

    font-size: 9.5px;

    line-height: 1.1;
}

.ubz-r7-capability small {
    display: block;

    margin-top: 2px;

    color: #76889e;

    font-size: 8px;
}

/* ==========================================================
   REAL APPROVED UBIZIMA+ INTERFACES
   ========================================================== */

.ubz-r7-devices {
    position: relative;

    width: 100%;
    height: 272px;

    margin-top: 8px;
}

.ubz-r7-laptop {
    position: absolute;

    width: 77%;

    top: 3px;
    right: 1%;

    padding: 7px;

    border-radius:
        14px
        14px
        7px
        7px;

    background: #111b2b;

    box-shadow:
        0 21px 43px
        rgba(10,33,63,.20);
}

.ubz-r7-laptop::after {
    content: "";

    position: absolute;

    width: 110%;
    height: 13px;

    left: -5%;
    bottom: -18px;

    border-radius:
        2px
        2px
        14px
        14px;

    background:
        linear-gradient(
            #e2e7ed,
            #9ba9b7
        );
}

.ubz-r7-laptop img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 4px;

    background: #ffffff;
}

.ubz-r7-phone {
    position: absolute;

    z-index: 3;

    width: 98px;

    left: 1%;
    bottom: 10px;

    padding: 5px;

    overflow: hidden;

    border-radius: 24px;

    background: #111b2b;

    box-shadow:
        0 19px 35px
        rgba(10,34,64,.23);
}

.ubz-r7-phone img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 19px;

    background: #ffffff;
}

/* ==========================================================
   APP AREA
   ========================================================== */

.ubz-r7-apps {
    margin-top: 5px;

    padding:
        14px
        14px
        11px;

    border:
        1px
        solid
        #dae5f0;

    border-radius: 13px;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 8px 21px
        rgba(19,48,78,.045);
}

.ubz-r7-app-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 9px;
}

.ubz-r7-app-heading h2 {
    margin: 0;

    color: #122c4d;

    font-size: 14px;
}

.ubz-r7-app-heading p {
    margin: 0;

    color: #71839a;

    font-size: 9px;

    text-align: right;
}

.ubz-r7-app-grid {
    display: grid;

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

    gap: 8px;
}

.ubz-r7-app {
    min-width: 0;

    min-height: 78px;

    padding:
        7px
        4px;

    display: flex;

    flex-direction: column;

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

    border:
        1px
        solid
        #bed2ea;

    border-radius: 8px;

    color: #18334f;

    background: #ffffff;

    text-align: center;

    text-decoration: none;
}

.ubz-r7-app.android {
    border-color: #87deb0;
}

.ubz-r7-app.passive {
    background: #fbfcfe;

    cursor: default;
}

.ubz-r7-app svg {
    width: 28px;
    height: 28px;

    margin-bottom: 5px;
}

.ubz-r7-app strong {
    font-size: 8.8px;

    line-height: 1.08;
}

.ubz-r7-app small {
    margin-top: 3px;

    color: #73859b;

    font-size: 7.5px;
}

/* ==========================================================
   RIGHT SECTION

   Contains the EXISTING identity-header and identity-main.
   ========================================================== */

#ubz-r7-right {
    position: relative !important;

    inset: auto !important;

    min-width: 0 !important;

    width: auto !important;

    min-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    grid-template-rows:
        auto
        minmax(0,1fr) !important;

    overflow: hidden !important;

    transform: none !important;

    background: #ffffff !important;
}

/* ==========================================================
   EXISTING HEADER — PROFESSIONAL WORDMARK
   ========================================================== */

#ubz-r7-right
>
header.identity-header {
    position: relative !important;

    inset: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;

    margin: 0 !important;

    padding:
        12px
        30px !important;

    display: flex !important;

    align-items: center !important;

    gap: 18px !important;

    border-bottom:
        1px
        solid
        #e7edf4 !important;

    background:
        rgba(255,255,255,.98) !important;

    transform: none !important;

    box-shadow: none !important;

    z-index: 2 !important;
}

/*
 * Hide old green-square identity treatment only.
 */
#ubz-r7-right
.identity-header
.identity-brand {
    display: none !important;
}

.ubz-r7-right-wordmark {
    display: inline-flex;

    align-items: center;

    min-width: 180px;

    margin-right: auto;

    padding-right: 23px;

    border-right:
        1px
        solid
        #e7edf4;

    text-decoration: none;
}

.ubz-r7-right-wordmark img {
    display: block;

    width: 171px;
    height: auto;

    max-height: 43px;

    object-fit: contain;
}

/*
 * Preserve Back to website or other existing header
 * actions on the right.
 */
#ubz-r7-right
.identity-header
a,
#ubz-r7-right
.identity-header
button {
    flex: 0 0 auto;
}

/* ==========================================================
   EXISTING MAIN / IDENTITY CARD
   ========================================================== */

#ubz-r7-right
>
main.identity-main {
    position: relative !important;

    inset: auto !important;

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding:
        clamp(30px, 5vh, 62px)
        clamp(28px, 4vw, 68px)
        38px !important;

    display: flex !important;

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

    overflow-x: hidden !important;
    overflow-y: auto !important;

    transform: none !important;

    background:
        linear-gradient(
            180deg,
            #f8fbf9 0%,
            #f5f8f6 100%
        ) !important;
}

/*
 * Keep the current credential-card design.
 * We only constrain it to its own column.
 */
#ubz-r7-right
section.identity-card {
    position: relative !important;

    inset: auto !important;

    width: min(100%, 470px) !important;
    max-width: 470px !important;
    min-width: 0 !important;

    margin:
        0
        auto !important;

    transform: none !important;
}

/*
 * Containment contract.
 */
#ubz-r7-right
.identity-card,
#ubz-r7-right
.identity-card form,
#ubz-r7-right
.identity-card input,
#ubz-r7-right
.identity-card button,
#ubz-r7-right
.identity-card .method-tabs,
#ubz-r7-right
.identity-card .field {
    max-width: 100% !important;
}

/* ==========================================================
   RESPONSIVE — STACK, NEVER CROSS
   ========================================================== */

@media (max-width: 980px) {
    #ubz-r7-layout {
        grid-template-columns:
            minmax(0,1fr) !important;

        overflow: visible !important;
    }

    #ubz-r7-left,
    #ubz-r7-right {
        width: 100% !important;

        min-width: 0 !important;
        min-height: auto !important;
    }

    #ubz-r7-left {
        border-right: 0 !important;

        border-bottom:
            1px
            solid
            #dce6f1 !important;
    }

    #ubz-r7-right {
        overflow: visible !important;
    }

    #ubz-r7-right
    >
    main.identity-main {
        min-height: 660px !important;
    }
}

@media (max-width: 620px) {
    #ubz-r7-left {
        padding:
            22px
            17px
            23px !important;
    }

    .ubz-r7-brand {
        min-height: 58px;
    }

    .ubz-r7-brand img {
        width: 160px;
    }

    #ubz-r7-left h1 {
        font-size: 36px;
    }

    .ubz-r7-copy {
        font-size: 13.5px;
    }

    .ubz-r7-capabilities {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .ubz-r7-devices {
        height: 215px;
    }

    .ubz-r7-laptop {
        width: 80%;
    }

    .ubz-r7-phone {
        width: 70px;
    }

    .ubz-r7-app-grid {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    #ubz-r7-right
    >
    header.identity-header {
        min-height: 62px !important;

        padding:
            10px
            17px !important;
    }

    .ubz-r7-right-wordmark {
        min-width: 145px;

        padding-right: 13px;
    }

    .ubz-r7-right-wordmark img {
        width: 142px;
    }

    #ubz-r7-right
    >
    main.identity-main {
        min-height: 620px !important;

        padding:
            30px
            17px !important;

        align-items: flex-start !important;
    }
}

/* AQUILA_R7_APPS_SPACING_FIX_BEGIN */

/*
 * Reserve the complete visual height of the laptop
 * before the Apps section enters normal document flow.
 *
 * Device dimensions themselves are intentionally unchanged.
 */

@media (min-width: 621px) {
    .ubz-r7-devices {
        height: 370px !important;

        margin-top: 8px !important;
        margin-bottom: 18px !important;
    }

    .ubz-r7-apps {
        margin-top: 0 !important;
    }
}

@media (max-width: 620px) {
    .ubz-r7-devices {
        height: clamp(
            220px,
            50vw,
            315px
        ) !important;

        margin-bottom: 18px !important;
    }

    .ubz-r7-apps {
        margin-top: 0 !important;
    }
}

/* AQUILA_R7_APPS_SPACING_FIX_END */