:root {
    --green:
        #087456;

    --green-dark:
        #065a43;

    --green-light:
        #eaf7f1;

    --text:
        #17251f;

    --text-soft:
        #68776f;

    --border:
        #dfe8e3;

    --background:
        #f7f9f7;

    --white:
        #ffffff;

    --page-width:
        1120px;
}

*,
*::before,
*::after {
    box-sizing:
        border-box;
}

html {
    min-width:
        320px;

    background:
        var(--background);
}

body {
    min-height:
        100vh;

    margin:
        0;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        "DM Sans",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}

[hidden] {
    display:
        none !important;
}

a {
    color:
        inherit;

    text-decoration:
        none;
}

button {
    font:
        inherit;
}

svg {
    display:
        block;
}

.page-container {
    width:
        min(
            calc(100% - 40px),
            var(--page-width)
        );

    margin-inline:
        auto;
}

.site-header {
    border-bottom:
        1px solid
        var(--border);

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

.header-inner {
    display:
        flex;

    min-height:
        74px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}

.brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;
}

.brand-mark {
    display:
        grid;

    width:
        42px;

    height:
        42px;

    place-items:
        center;

    border-radius:
        13px;

    background:
        var(--green);

    color:
        var(--white);
}

.brand-mark svg {
    width:
        27px;

    height:
        27px;
}

.brand-name {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        20px;

    font-weight:
        800;

    letter-spacing:
        -0.7px;
}

.brand-name strong {
    color:
        var(--green);
}

.header-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        17px;
}

.home-link {
    color:
        #607068;

    font-size:
        12px;

    font-weight:
        700;
}

.platform-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        7px 10px;

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

    border-radius:
        999px;

    background:
        var(--white);

    color:
        #6e7d76;

    font-size:
        10px;

    font-weight:
        700;
}

.status-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #98a39e;
}

.platform-status.is-online {
    border-color:
        #bfe3d4;

    color:
        var(--green);
}

.platform-status.is-online .status-dot {
    background:
        #18a478;

    box-shadow:
        0 0 0 4px
        rgba(24, 164, 120, 0.1);
}

.platform-status.is-error {
    border-color:
        #efcaca;

    color:
        #a74040;
}

.platform-status.is-error .status-dot {
    background:
        #dc6666;
}

.data-main {
    flex:
        1;
}

.network-section {
    padding:
        48px 0 68px;
}

.back-link {
    display:
        inline-flex;

    margin-bottom:
        35px;

    color:
        #607068;

    font-size:
        12px;

    font-weight:
        700;
}

.section-heading {
    max-width:
        650px;

    margin-bottom:
        37px;
}

.section-heading > span,
.bundle-heading > div > span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--green);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}

.section-heading h1 {
    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            38px,
            5vw,
            56px
        );

    letter-spacing:
        -3px;

    line-height:
        1.08;
}

.section-heading p {
    margin:
        11px 0 0;

    color:
        var(--text-soft);

    font-size:
        14px;
}

.network-grid {
    display:
        grid;

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

    gap:
        20px;
}

.network-card {
    position:
        relative;

    display:
        grid;

    min-height:
        230px;

    overflow:
        hidden;

    grid-template-rows:
        1fr auto;

    padding:
        23px;

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

    border-radius:
        24px;

    background:
        var(--white);

    color:
        var(--text);

    text-align:
        left;

    cursor:
        pointer;

    box-shadow:
        0 10px 35px
        rgba(17, 69, 52, 0.05);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.network-card:hover,
.network-card:focus-visible {
    border-color:
        #accfc1;

    box-shadow:
        0 18px 45px
        rgba(17, 69, 52, 0.11);

    transform:
        translateY(-4px);
}

.network-card.is-selected {
    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(8, 116, 86, 0.1),
        0 18px 45px
        rgba(17, 69, 52, 0.12);
}

.network-logo {
    display:
        grid;

    width:
        100%;

    min-height:
        110px;

    place-items:
        center;

    border-radius:
        18px;
}

.network-logo strong {
    font-family:
        "Manrope",
        sans-serif;

    font-weight:
        800;
}

.network-logo-mtn {
    background:
        #ffcc00;

    color:
        #111111;
}

.network-logo-mtn strong {
    padding:
        12px 22px;

    border:
        3px solid
        #111111;

    border-radius:
        50%;
}

.network-logo-telecel {
    background:
        linear-gradient(
            145deg,
            #ed174c,
            #b30d38
        );

    color:
        #ffffff;
}

.network-logo-telecel strong {
    font-size:
        30px;

    letter-spacing:
        -1.5px;
}

.network-logo-at {
    background:
        linear-gradient(
            145deg,
            #1c4fa4,
            #6437a8
        );

    color:
        #ffffff;
}

.network-logo-at strong {
    display:
        grid;

    width:
        70px;

    height:
        70px;

    place-items:
        center;

    border:
        3px solid
        rgba(255, 255, 255, 0.85);

    border-radius:
        50%;

    font-size:
        25px;
}

.network-card-copy {
    display:
        block;

    margin-top:
        20px;
}

.network-card-copy > strong,
.network-card-copy > small {
    display:
        block;
}

.network-card-copy > strong {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        20px;
}

.network-card-copy > small {
    margin-top:
        3px;

    color:
        var(--text-soft);

    font-size:
        11px;
}

.network-arrow {
    position:
        absolute;

    right:
        23px;

    bottom:
        25px;

    font-size:
        20px;
}

.catalogue-message {
    margin-top:
        20px;

    padding:
        12px 14px;

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

    border-radius:
        12px;

    background:
        var(--white);

    color:
        var(--text-soft);

    font-size:
        11px;
}

.catalogue-message.is-success {
    border-color:
        #bfe3d4;

    background:
        #effaf5;

    color:
        var(--green);
}

.catalogue-message.is-error {
    border-color:
        #efcaca;

    background:
        #fff4f4;

    color:
        #a74040;
}

.bundle-section {
    padding:
        65px 0 105px;

    border-top:
        1px solid
        var(--border);

    background:
        #ffffff;
}

.bundle-heading {
    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        25px;

    margin-bottom:
        27px;
}

.bundle-heading h2 {
    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        34px;

    letter-spacing:
        -1.7px;
}

.bundle-heading > strong {
    color:
        var(--text-soft);

    font-size:
        12px;
}

.product-grid {
    display:
        grid;

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

    gap:
        17px;
}

.product-card {
    display:
        flex;

    min-height:
        245px;

    flex-direction:
        column;

    padding:
        22px;

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

    border-radius:
        20px;

    background:
        var(--white);

    box-shadow:
        0 8px 28px
        rgba(17, 69, 52, 0.045);

    transition:
        border-color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

.product-card:hover {
    border-color:
        #b4d3c6;

    box-shadow:
        0 15px 38px
        rgba(17, 69, 52, 0.09);

    transform:
        translateY(-3px);
}

.product-card.is-selected {
    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(8, 116, 86, 0.1);
}

.product-card-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}

.product-network {
    padding:
        6px 9px;

    border-radius:
        999px;

    background:
        var(--green-light);

    color:
        var(--green);

    font-size:
        9px;

    font-weight:
        800;
}

.product-capacity {
    margin-top:
        35px;
}

.product-capacity strong {
    display:
        block;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        39px;

    letter-spacing:
        -2px;

    line-height:
        1;
}

.product-capacity span {
    display:
        block;

    margin-top:
        7px;

    color:
        var(--text-soft);

    font-size:
        11px;
}

.product-card-bottom {
    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        auto;

    padding-top:
        27px;
}

.product-price span,
.product-price strong {
    display:
        block;
}

.product-price span {
    color:
        var(--text-soft);

    font-size:
        9px;
}

.product-price strong {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        20px;
}

.select-product-button {
    min-height:
        41px;

    padding:
        9px 14px;

    border:
        0;

    border-radius:
        11px;

    background:
        #152b23;

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;
}

.product-card.is-selected
.select-product-button {
    background:
        var(--green);
}

.selected-bundle-panel {
    position:
        sticky;

    bottom:
        14px;

    z-index:
        30;

    display:
        grid;

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

    align-items:
        center;

    gap:
        28px;

    margin-top:
        28px;

    padding:
        17px 19px;

    border-radius:
        18px;

    background:
        rgba(18, 43, 34, 0.97);

    color:
        #ffffff;

    box-shadow:
        0 18px 55px
        rgba(0, 0, 0, 0.2);

    backdrop-filter:
        blur(14px);
}

.selected-bundle-details span,
.selected-bundle-details strong,
.selected-bundle-details small,
.selected-bundle-price span,
.selected-bundle-price strong {
    display:
        block;
}

.selected-bundle-details span,
.selected-bundle-price span {
    color:
        #94aaa1;

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;
}

.selected-bundle-details strong {
    margin:
        2px 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        20px;
}

.selected-bundle-details small {
    color:
        #b2c1bb;

    font-size:
        10px;
}

.selected-bundle-price strong {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        21px;
}

.continue-button {
    min-height:
        45px;

    padding:
        10px 18px;

    border:
        0;

    border-radius:
        12px;

    background:
        #55dda9;

    color:
        #08251b;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;
}

.empty-state {
    grid-column:
        1 / -1;

    padding:
        55px 22px;

    border:
        1px dashed
        #cbd9d4;

    border-radius:
        20px;

    background:
        var(--background);

    color:
        var(--text-soft);

    text-align:
        center;
}

.empty-state h3 {
    margin:
        0 0 6px;

    color:
        var(--text);

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

.empty-state p {
    margin:
        0;

    font-size:
        12px;
}

.site-footer {
    border-top:
        1px solid
        var(--border);

    background:
        var(--white);
}

.footer-inner {
    display:
        flex;

    min-height:
        70px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #87928c;

    font-size:
        10px;
}

.footer-inner strong {
    color:
        var(--green);
}

.toast {
    position:
        fixed;

    right:
        20px;

    bottom:
        20px;

    z-index:
        100;

    max-width:
        min(360px, calc(100% - 32px));

    padding:
        13px 16px;

    border-radius:
        12px;

    background:
        #152b23;

    color:
        #ffffff;

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, 0.22);

    font-size:
        12px;

    font-weight:
        600;
}

@media (max-width: 850px) {
    .network-grid {
        grid-template-columns:
            1fr;
    }

    .network-card {
        min-height:
            190px;
    }

    .network-logo {
        min-height:
            90px;
    }

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

@media (max-width: 580px) {
    .page-container {
        width:
            min(
                calc(100% - 28px),
                var(--page-width)
            );
    }

    .header-inner {
        min-height:
            68px;
    }

    .brand-name {
        font-size:
            18px;
    }

    .home-link {
        display:
            none;
    }

    .network-section {
        padding:
            35px 0 48px;
    }

    .back-link {
        margin-bottom:
            27px;
    }

    .section-heading {
        margin-bottom:
            29px;
    }

    .section-heading h1 {
        font-size:
            39px;

        letter-spacing:
            -2.2px;
    }

    .network-card {
        min-height:
            170px;

        padding:
            18px;

        border-radius:
            20px;
    }

    .network-logo {
        min-height:
            78px;

        border-radius:
            15px;
    }

    .network-logo-telecel strong {
        font-size:
            25px;
    }

    .network-logo-at strong {
        width:
            58px;

        height:
            58px;

        font-size:
            21px;
    }

    .network-card-copy {
        margin-top:
            16px;
    }

    .network-arrow {
        right:
            19px;

        bottom:
            20px;
    }

    .bundle-section {
        padding:
            48px 0 80px;
    }

    .bundle-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            7px;
    }

    .bundle-heading h2 {
        font-size:
            29px;
    }

    .product-grid {
        grid-template-columns:
            1fr;
    }

    .product-card {
        min-height:
            225px;
    }

    .selected-bundle-panel {
        grid-template-columns:
            1fr auto;

        gap:
            14px;

        padding:
            15px;
    }

    .continue-button {
        grid-column:
            1 / -1;

        width:
            100%;
    }

    .footer-inner {
        align-items:
            flex-start;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            3px;
    }

    .toast {
        right:
            16px;

        bottom:
            16px;

        left:
            16px;

        max-width:
            none;
    }
}
/* Network brand-logo correction */
.network-logo-telecel,
.network-logo-at {
    background:
        #ffffff;

    color:
        inherit;
}

.network-brand-logo {
    display:
        block;

    width:
        min(100%, 185px);

    height:
        125px;

    margin:
        auto;
}

.telecel-brand-logo {
    width:
        min(100%, 170px);
}

.at-brand-logo {
    width:
        min(100%, 180px);
}

.network-logo-telecel strong,
.network-logo-at strong {
    display:
        none;
}

@media (max-width: 580px) {
    .network-brand-logo {
        width:
            min(100%, 150px);

        height:
            105px;
    }

    .telecel-brand-logo {
        width:
            min(100%, 140px);
    }

    .at-brand-logo {
        width:
            min(100%, 145px);
    }
}
/* Network-coloured bundle cards */
.product-card-mtn {
    border-color:
        #e7c529;

    background:
        linear-gradient(
            145deg,
            #fff9cf,
            #ffef80
        );

    color:
        #191919;
}

.product-card-telecel {
    border-color:
        #ef9db0;

    background:
        linear-gradient(
            145deg,
            #fff4f6,
            #ffdbe3
        );

    color:
        #651127;
}

.product-card-at {
    border-color:
        #a8bde9;

    background:
        linear-gradient(
            145deg,
            #f3f6ff,
            #dce6ff
        );

    color:
        #173a74;
}

.product-card-mtn.is-selected {
    border-color:
        #b99200;

    box-shadow:
        0 0 0 3px
        rgba(185, 146, 0, 0.18),
        0 15px 38px
        rgba(96, 76, 0, 0.13);
}

.product-card-telecel.is-selected {
    border-color:
        #d81748;

    box-shadow:
        0 0 0 3px
        rgba(216, 23, 72, 0.13),
        0 15px 38px
        rgba(126, 12, 40, 0.12);
}

.product-card-at.is-selected {
    border-color:
        #315baf;

    box-shadow:
        0 0 0 3px
        rgba(49, 91, 175, 0.13),
        0 15px 38px
        rgba(27, 61, 127, 0.12);
}

.product-brand {
    display:
        grid;

    min-width:
        82px;

    min-height:
        56px;

    place-items:
        center;

    padding:
        7px 10px;

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

    border-radius:
        14px;

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

    box-shadow:
        0 7px 20px
        rgba(28, 49, 40, 0.06);
}

.mini-network-logo {
    display:
        grid;

    place-items:
        center;

    font-family:
        "Manrope",
        sans-serif;

    font-weight:
        800;
}

.mini-network-logo-mtn strong {
    display:
        grid;

    min-width:
        57px;

    min-height:
        34px;

    place-items:
        center;

    padding:
        4px 9px;

    border:
        2px solid
        #111111;

    border-radius:
        50%;

    background:
        #ffcc00;

    color:
        #111111;

    font-size:
        13px;
}

.mini-network-logo-telecel {
    gap:
        2px;

    color:
        #ed174c;
}

.mini-telecel-symbol {
    display:
        grid;

    width:
        30px;

    height:
        30px;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #ed174c;

    color:
        #ffffff;

    font-size:
        23px;

    line-height:
        1;
}

.mini-network-logo-telecel small {
    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        -0.3px;
}

.mini-network-logo-at {
    gap:
        0;

    line-height:
        1;
}

.mini-network-logo-at strong {
    display:
        flex;

    align-items:
        baseline;

    font-size:
        29px;

    letter-spacing:
        -4px;
}

.mini-network-logo-at strong span:first-child {
    color:
        #ed1c24;
}

.mini-network-logo-at strong span:last-child {
    color:
        #24447c;
}

.mini-network-logo-at small {
    margin-top:
        2px;

    color:
        #333333;

    font-family:
        "DM Sans",
        sans-serif;

    font-size:
        6px;

    font-style:
        italic;

    letter-spacing:
        0;
}

.product-card-mtn .product-network {
    background:
        #171717;

    color:
        #ffcc00;
}

.product-card-telecel .product-network {
    background:
        #ed174c;

    color:
        #ffffff;
}

.product-card-at .product-network {
    background:
        #24447c;

    color:
        #ffffff;
}

.product-card-mtn .select-product-button {
    background:
        #171717;

    color:
        #ffcc00;
}

.product-card-telecel .select-product-button {
    background:
        #d81748;

    color:
        #ffffff;
}

.product-card-at .select-product-button {
    background:
        #24447c;

    color:
        #ffffff;
}

.product-card-mtn .product-capacity span,
.product-card-mtn .product-price span {
    color:
        #655716;
}

.product-card-telecel .product-capacity span,
.product-card-telecel .product-price span {
    color:
        #8c4052;
}

.product-card-at .product-capacity span,
.product-card-at .product-price span {
    color:
        #536b9e;
}

@media (max-width: 580px) {
    .product-brand {
        min-width:
            74px;

        min-height:
            52px;
    }
}
/* ==========================================================
   MY AKORA DATA VISUAL SYSTEM - C2
   Data keeps carrier identity while sharing the dashboard shell.
   ========================================================== */

:root {
    --green:
        #078667;

    --green-dark:
        #05694f;

    --green-light:
        #eaf7f2;

    --green-faint:
        #f3fbf7;

    --background:
        #f5f8f6;

    --white:
        #ffffff;

    --surface:
        #ffffff;

    --surface-soft:
        #f8faf9;

    --text:
        #14231d;

    --text-soft:
        #687970;

    --text-faint:
        #8a9790;

    --border:
        #dee8e3;

    --border-strong:
        #cddbd4;

    --page-width:
        1180px;

    --akora-shadow:
        0 18px 45px
        rgba(23, 50, 40, 0.07);
}


/* ----------------------------------------------------------
   PAGE
   ---------------------------------------------------------- */

html,
body {
    background:
        var(--background);
}


.data-main {
    background:
        var(--background);
}


/* ----------------------------------------------------------
   HEADER — SAME FAMILY AS MY AKORA
   ---------------------------------------------------------- */

.site-header {
    position:
        sticky;

    top:
        0;

    z-index:
        80;

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

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

    backdrop-filter:
        blur(16px);
}


.header-inner {
    min-height:
        72px;
}


.brand {
    gap:
        9px;
}


.brand-mark {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    border-radius:
        12px;

    background:
        var(--green);
}


.brand-mark svg {
    width:
        29px;

    height:
        29px;
}


.brand-name {
    color:
        var(--text);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        16px;

    font-weight:
        800;

    letter-spacing:
        -0.65px;
}


.brand-name strong {
    color:
        var(--green);
}


.header-actions {
    gap:
        10px;
}


.home-link {
    display:
        inline-flex;

    min-height:
        38px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        8px 12px;

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

    border-radius:
        11px;

    background:
        var(--surface);

    color:
        var(--text-soft);

    font-size:
        10px;

    font-weight:
        800;

    transition:
        border-color 150ms ease,
        background 150ms ease,
        color 150ms ease;
}


.home-link:hover,
.home-link:focus-visible {
    border-color:
        #bdd8cd;

    background:
        var(--green-soft);

    color:
        var(--green-dark);
}


.platform-status {
    min-height:
        38px;

    padding:
        8px 11px;

    border-color:
        var(--border);

    background:
        var(--surface);

    color:
        var(--text-soft);

    font-size:
        9px;
}


/* ----------------------------------------------------------
   HERO / NETWORK SELECTION
   ---------------------------------------------------------- */

.network-section {
    padding:
        34px 0 64px;
}


.back-link {
    min-height:
        38px;

    align-items:
        center;

    margin-bottom:
        30px;

    padding:
        8px 12px;

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

    border-radius:
        11px;

    background:
        var(--surface);

    color:
        var(--text-soft);

    font-size:
        10px;

    font-weight:
        800;

    box-shadow:
        0 5px 18px
        rgba(23, 50, 40, 0.035);

    transition:
        border-color 150ms ease,
        background 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}


.back-link:hover,
.back-link:focus-visible {
    border-color:
        #bdd8cd;

    background:
        var(--green-soft);

    color:
        var(--green-dark);

    transform:
        translateX(-2px);
}


.section-heading {
    max-width:
        690px;

    margin-bottom:
        32px;
}


.section-heading > span {
    margin-bottom:
        9px;

    color:
        var(--green);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.25px;
}


.section-heading h1 {
    color:
        var(--text);

    font-size:
        clamp(
            35px,
            4.5vw,
            51px
        );

    letter-spacing:
        -2.5px;

    line-height:
        1.06;
}


.section-heading p {
    max-width:
        540px;

    margin-top:
        11px;

    color:
        var(--text-soft);

    font-size:
        12px;

    line-height:
        1.65;
}


/* ----------------------------------------------------------
   NETWORK CARDS
   ---------------------------------------------------------- */

.network-grid {
    gap:
        16px;
}


.network-card {
    min-height:
        215px;

    padding:
        18px;

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

    border-radius:
        18px;

    background:
        var(--surface);

    box-shadow:
        var(--akora-shadow);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


.network-card:hover,
.network-card:focus-visible {
    border-color:
        #b9d5c9;

    box-shadow:
        0 22px 48px
        rgba(23, 50, 40, 0.1);

    transform:
        translateY(-3px);
}


.network-logo {
    min-height:
        100px;

    border:
        1px solid
        rgba(20, 35, 29, 0.05);

    border-radius:
        14px;
}


.network-card-copy {
    margin-top:
        16px;
}


.network-card-copy > strong {
    color:
        var(--text);

    font-size:
        17px;

    letter-spacing:
        -0.4px;
}


.network-card-copy > small {
    margin-top:
        4px;

    color:
        var(--text-soft);

    font-size:
        9px;
}


.network-arrow {
    right:
        19px;

    bottom:
        20px;

    display:
        grid;

    width:
        30px;

    height:
        30px;

    place-items:
        center;

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

    border-radius:
        9px;

    background:
        var(--surface-soft);

    color:
        var(--green);

    font-size:
        15px;
}


/*
 * Carrier branding remains vivid inside its own logo area,
 * but no carrier takes over the entire Akora page.
 */

.network-logo-mtn {
    background:
        #ffcc00;
}


.network-logo-telecel,
.network-logo-at {
    background:
        #ffffff;
}


/* ----------------------------------------------------------
   LIVE CATALOGUE MESSAGE
   ---------------------------------------------------------- */

.catalogue-message {
    margin-top:
        16px;

    padding:
        12px 14px;

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

    border-radius:
        12px;

    background:
        var(--surface);

    color:
        var(--text-soft);

    font-size:
        10px;
}


.catalogue-message.is-success {
    border-color:
        #c7e5d9;

    background:
        var(--green-faint);

    color:
        var(--green-dark);
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.site-footer {
    border-color:
        var(--border);

    background:
        var(--surface);
}


.footer-inner {
    color:
        var(--text-faint);
}


/* ----------------------------------------------------------
   SIGNED-IN DETAIL
   ---------------------------------------------------------- */

body.is-signed-in .site-header {
    border-bottom-color:
        #cbded5;
}


body.is-signed-in .home-link {
    border-color:
        #bddbd0;

    background:
        var(--green-soft);

    color:
        var(--green-dark);
}


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

@media (max-width: 850px) {

    .network-grid {
        gap:
            14px;
    }


    .network-card {
        min-height:
            180px;
    }
}


@media (max-width: 580px) {

    .header-inner {
        min-height:
            64px;
    }


    .brand-mark {
        width:
            39px;

        height:
            39px;

        flex-basis:
            39px;

        border-radius:
            11px;
    }


    .brand-mark svg {
        width:
            26px;

        height:
            26px;
    }


    .brand-name {
        font-size:
            15px;
    }


    /*
     * Keep My Akora visible on signed-in Data.
     * The old Data CSS hid .home-link on mobile.
     */
    body.is-signed-in .home-link {
        display:
            inline-flex;
    }


    body.is-signed-in .platform-status {
        display:
            none;
    }


    .network-section {
        padding:
            24px 0 48px;
    }


    .back-link {
        margin-bottom:
            23px;
    }


    .section-heading {
        margin-bottom:
            25px;
    }


    .section-heading h1 {
        font-size:
            34px;

        letter-spacing:
            -1.9px;
    }


    .section-heading p {
        font-size:
            11px;
    }


    .network-card {
        min-height:
            160px;

        padding:
            15px;

        border-radius:
            17px;
    }


    .network-logo {
        min-height:
            75px;

        border-radius:
            12px;
    }


    .network-card-copy {
        margin-top:
            13px;
    }


    .network-card-copy > strong {
        font-size:
            16px;
    }


    .catalogue-message {
        font-size:
            9px;
    }
}
/* ==========================================================
   MY AKORA DATA DARK THEME - C2.1
   Mirrors the My Akora dashboard dark palette.
   ========================================================== */

html[data-theme="dark"] {
    --green:
        #078667;

    --green-dark:
        #14a57e;

    --green-light:
        #12362a;

    --green-soft:
        #12362a;

    --green-faint:
        #10261f;

    --background:
        #0d1512;

    --white:
        #131d19;

    --surface:
        #131d19;

    --surface-soft:
        #17231e;

    --text:
        #eef7f2;

    --text-soft:
        #a4b6ad;

    --text-faint:
        #74867d;

    --border:
        #26362f;

    --border-strong:
        #34483f;

    --akora-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.28);
}


html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .data-main,
html[data-theme="dark"] .network-section {
    background:
        #0d1512;
}


html[data-theme="dark"] .site-header {
    border-bottom-color:
        #26362f;

    background:
        rgba(19, 29, 25, 0.94);
}


html[data-theme="dark"] .brand-name {
    color:
        #eef7f2;
}


html[data-theme="dark"] .home-link,
html[data-theme="dark"] .platform-status,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .network-card,
html[data-theme="dark"] .catalogue-message {
    border-color:
        #26362f;

    background:
        #131d19;

    color:
        #a4b6ad;
}


html[data-theme="dark"]
body.is-signed-in
.home-link {
    border-color:
        #34483f;

    background:
        #12362a;

    color:
        #8ce0c3;
}


html[data-theme="dark"]
.back-link:hover,
html[data-theme="dark"]
.back-link:focus-visible,
html[data-theme="dark"]
.home-link:hover,
html[data-theme="dark"]
.home-link:focus-visible {
    border-color:
        #3c584c;

    background:
        #172b23;

    color:
        #8ce0c3;
}


html[data-theme="dark"] .section-heading h1,
html[data-theme="dark"]
.network-card-copy > strong {
    color:
        #eef7f2;
}


html[data-theme="dark"] .section-heading p,
html[data-theme="dark"]
.network-card-copy > small {
    color:
        #a4b6ad;
}


html[data-theme="dark"] .network-card {
    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.22);
}


html[data-theme="dark"]
.network-card:hover,
html[data-theme="dark"]
.network-card:focus-visible {
    border-color:
        #3b574a;

    box-shadow:
        0 23px 55px
        rgba(0, 0, 0, 0.32);
}


html[data-theme="dark"] .network-arrow {
    border-color:
        #34483f;

    background:
        #17231e;

    color:
        #55cda7;
}


/*
 * Carrier identity remains bright.
 * Only the Akora shell changes theme.
 */

html[data-theme="dark"]
.network-logo-mtn {
    background:
        #ffcc00;
}


html[data-theme="dark"]
.network-logo-telecel,
html[data-theme="dark"]
.network-logo-at {
    background:
        #ffffff;
}


html[data-theme="dark"]
.catalogue-message.is-success {
    border-color:
        #28503f;

    background:
        #10261f;

    color:
        #75d7b5;
}


html[data-theme="dark"] .site-footer {
    border-color:
        #26362f;

    background:
        #131d19;
}


html[data-theme="dark"] .footer-inner {
    color:
        #74867d;
}


/*
 * Match My Akora when System theme is dark.
 */
@media (prefers-color-scheme: dark) {

    html[data-theme="system"] {
        --background:
            #0d1512;

        --white:
            #131d19;

        --surface:
            #131d19;

        --surface-soft:
            #17231e;

        --text:
            #eef7f2;

        --text-soft:
            #a4b6ad;

        --text-faint:
            #74867d;

        --border:
            #26362f;

        --border-strong:
            #34483f;

        --green-light:
            #12362a;

        --green-soft:
            #12362a;

        --green-faint:
            #10261f;

        --akora-shadow:
            0 18px 50px
            rgba(0, 0, 0, 0.28);
    }


    html[data-theme="system"],
    html[data-theme="system"] body,
    html[data-theme="system"] .data-main,
    html[data-theme="system"] .network-section {
        background:
            #0d1512;
    }


    html[data-theme="system"] .site-header {
        border-bottom-color:
            #26362f;

        background:
            rgba(19, 29, 25, 0.94);
    }


    html[data-theme="system"] .brand-name,
    html[data-theme="system"]
    .section-heading h1,
    html[data-theme="system"]
    .network-card-copy > strong {
        color:
            #eef7f2;
    }


    html[data-theme="system"] .home-link,
    html[data-theme="system"] .platform-status,
    html[data-theme="system"] .back-link,
    html[data-theme="system"] .network-card,
    html[data-theme="system"] .catalogue-message {
        border-color:
            #26362f;

        background:
            #131d19;

        color:
            #a4b6ad;
    }


    html[data-theme="system"]
    body.is-signed-in
    .home-link {
        background:
            #12362a;

        color:
            #8ce0c3;
    }


    html[data-theme="system"] .network-arrow {
        border-color:
            #34483f;

        background:
            #17231e;

        color:
            #55cda7;
    }


    html[data-theme="system"]
    .network-logo-mtn {
        background:
            #ffcc00;
    }


    html[data-theme="system"]
    .network-logo-telecel,
    html[data-theme="system"]
    .network-logo-at {
        background:
            #ffffff;
    }


    html[data-theme="system"] .site-footer {
        border-color:
            #26362f;

        background:
            #131d19;
    }
}