:root {
    --green:
        #087456;

    --green-dark:
        #065a43;

    --green-deep:
        #054634;

    --green-light:
        #eaf7f1;

    --green-soft:
        #f3fbf7;

    --text:
        #17251f;

    --text-soft:
        #68776f;

    --border:
        #dfe8e3;

    --background:
        #f7f9f7;

    --white:
        #ffffff;

    --shadow:
        0 20px 55px
        rgba(7, 65, 48, 0.09);

    --page-width:
        760px;
}

*,
*::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:
        radial-gradient(
            circle at top,
            rgba(8, 116, 86, 0.07),
            transparent 340px
        ),
        var(--background);

    color:
        var(--text);

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

    -webkit-font-smoothing:
        antialiased;
}

a {
    color:
        inherit;

    text-decoration:
        none;
}

button,
input {
    font:
        inherit;
}

button {
    -webkit-tap-highlight-color:
        transparent;
}

svg {
    display:
        block;
}

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

    margin-inline:
        auto;
}

.site-header {
    position:
        relative;

    z-index:
        20;

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

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

    backdrop-filter:
        blur(18px);
}

.header-inner {
    display:
        grid;

    min-height:
        68px;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        14px;
}

.brand {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;
}

.brand-mark {
    display:
        grid;

    width:
        38px;

    height:
        38px;

    place-items:
        center;

    border-radius:
        12px;

    background:
        var(--green);

    color:
        var(--white);

    box-shadow:
        0 10px 25px
        rgba(8, 116, 86, 0.2);
}

.brand-mark svg {
    width:
        24px;

    height:
        24px;
}

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

    font-size:
        18px;

    font-weight:
        800;

    letter-spacing:
        -0.7px;
}

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

.header-link {
    display:
        inline-flex;

    min-height:
        40px;

    align-items:
        center;

    gap:
        7px;

    color:
        #5e6f67;

    font-size:
        12px;

    font-weight:
        700;
}

.header-home {
    justify-self:
        end;
}

.airtime-main {
    flex:
        1;

    padding:
        26px 0 38px;
}

.airtime-layout {
    display:
        grid;

    gap:
        18px;
}

.airtime-heading {
    text-align:
        center;
}

.eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--green);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;
}

.eyebrow::before {
    content:
        "";

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 5px
        rgba(8, 116, 86, 0.09);
}

.airtime-heading h1 {
    margin:
        8px 0 4px;

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

    font-size:
        clamp(
            34px,
            8vw,
            46px
        );

    letter-spacing:
        -2px;

    line-height:
        1;
}

.airtime-heading p {
    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        13px;
}

.airtime-card {
    overflow:
        hidden;

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

    border-radius:
        24px;

    background:
        var(--white);

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

#airtime-form {
    display:
        grid;

    gap:
        0;
}

.form-block {
    padding:
        20px 22px;

    border-bottom:
        1px solid
        #edf2ef;
}

.field-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        13px;
}

.field-heading > div,
.field-label {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}

.field-heading h2,
.field-label > span:last-child {
    margin:
        0;

    font-size:
        13px;

    font-weight:
        800;
}

.step-number {
    display:
        grid;

    width:
        24px;

    height:
        24px;

    place-items:
        center;

    border-radius:
        8px;

    background:
        var(--green-light);

    color:
        var(--green);

    font-size:
        10px;

    font-weight:
        800;
}

.field-state {
    color:
        #8a9790;

    font-size:
        10px;

    font-weight:
        700;
}

.field-state.is-ready {
    color:
        var(--green);
}

.network-grid {
    display:
        grid;

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

    gap:
        9px;
}

.network-button {
    position:
        relative;

    display:
        grid;

    min-height:
        76px;

    place-items:
        center;

    gap:
        5px;

    padding:
        9px;

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

    border-radius:
        15px;

    background:
        #ffffff;

    color:
        var(--text);

    cursor:
        pointer;

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

.network-button:hover,
.network-button:focus-visible {
    border-color:
        #a9cbbb;

    outline:
        none;

    transform:
        translateY(-1px);
}

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

    background:
        var(--green-soft);

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

.network-button.is-selected::after {
    content:
        "✓";

    position:
        absolute;

    top:
        6px;

    right:
        7px;

    display:
        grid;

    width:
        18px;

    height:
        18px;

    place-items:
        center;

    border-radius:
        999px;

    background:
        var(--green);

    color:
        white;

    font-size:
        10px;

    font-weight:
        900;
}

.network-badge {
    display:
        grid;

    width:
        37px;

    height:
        37px;

    place-items:
        center;

    border-radius:
        12px;

    font-size:
        11px;

    font-weight:
        900;
}

.network-badge-mtn {
    background:
        #ffcb05;

    color:
        #111111;
}

.network-badge-telecel {
    background:
        #ed1c24;

    color:
        white;

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

    font-size:
        24px;
}

.network-badge-at {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0;

    background:
        #f7f8fb;

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

    font-size:
        21px;

    letter-spacing:
        -3px;
}

.network-badge-at strong {
    color:
        #ed1c24;
}

.network-badge-at em {
    color:
        #24447c;

    font-style:
        normal;
}

.network-name {
    font-size:
        10px;

    font-weight:
        800;
}

.field-label {
    width:
        fit-content;

    margin-bottom:
        11px;
}

.phone-field,
.custom-amount-field {
    display:
        flex;

    min-height:
        50px;

    align-items:
        center;

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

    border-radius:
        14px;

    background:
        #fbfdfc;

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

.phone-field:focus-within,
.custom-amount-field:focus-within {
    border-color:
        var(--green);

    background:
        white;

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

.phone-field.is-valid {
    border-color:
        #95c9b5;
}

.country-code,
.currency-prefix {
    display:
        grid;

    min-width:
        52px;

    align-self:
        stretch;

    place-items:
        center;

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

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        900;
}

.phone-field input,
.custom-amount-field input {
    width:
        100%;

    min-width:
        0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--text);

    font-size:
        15px;

    font-weight:
        700;
}

.phone-field input {
    padding:
        0 14px;
}

.custom-amount-field input {
    padding:
        0 14px;
}

.phone-field input::placeholder,
.custom-amount-field input::placeholder {
    color:
        #9da8a2;

    font-weight:
        500;
}

.field-help {
    margin:
        7px 0 0;

    color:
        #87938d;

    font-size:
        10px;

    line-height:
        1.4;
}

.amount-grid {
    display:
        grid;

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

    gap:
        8px;
}

.amount-button {
    min-height:
        42px;

    padding:
        7px 5px;

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

    border-radius:
        12px;

    background:
        #ffffff;

    color:
        #43554c;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;
}

.amount-button:hover,
.amount-button:focus-visible {
    border-color:
        #a9cbbb;

    outline:
        none;
}

.amount-button.is-selected {
    border-color:
        var(--green);

    background:
        var(--green);

    color:
        white;

    box-shadow:
        0 8px 18px
        rgba(8, 116, 86, 0.17);
}

.custom-amount-field {
    margin-top:
        9px;
}

.currency-prefix {
    min-width:
        58px;
}

.order-summary {
    padding:
        18px 22px 19px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fcfa 100%
        );
}

.summary-topline {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        10px;
}

.summary-topline h2 {
    margin:
        0;

    font-size:
        12px;
}

.summary-ready {
    color:
        #8b9791;

    font-size:
        9px;

    font-weight:
        700;
}

.summary-ready.is-ready {
    color:
        var(--green);
}

.summary-list {
    display:
        grid;

    gap:
        0;

    margin:
        0 0 13px;
}

.summary-list > div {
    display:
        flex;

    min-height:
        27px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-bottom:
        1px dashed
        #e5ece8;
}

.summary-list > div:last-child {
    border-bottom:
        0;
}

.summary-list dt {
    color:
        #76857d;

    font-size:
        10px;
}

.summary-list dd {
    margin:
        0;

    color:
        #34483f;

    font-size:
        10px;

    font-weight:
        800;

    text-align:
        right;
}

.summary-list .summary-total {
    min-height:
        35px;

    margin-top:
        2px;
}

.summary-list .summary-total dt {
    color:
        var(--text);

    font-size:
        11px;

    font-weight:
        800;
}

.summary-list .summary-total dd {
    color:
        var(--green);

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

    font-size:
        18px;
}

.payment-button {
    display:
        flex;

    width:
        100%;

    min-height:
        50px;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 17px;

    border:
        0;

    border-radius:
        14px;

    background:
        var(--green);

    color:
        white;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 13px 28px
        rgba(8, 116, 86, 0.2);

    transition:
        background 150ms ease,
        transform 150ms ease,
        opacity 150ms ease;
}

.payment-button:not(:disabled):hover,
.payment-button:not(:disabled):focus-visible {
    background:
        var(--green-dark);

    outline:
        none;

    transform:
        translateY(-1px);
}

.payment-button:disabled {
    background:
        #cbd8d2;

    box-shadow:
        none;

    cursor:
        not-allowed;
}

.secure-line {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    margin-top:
        9px;

    color:
        #77867e;

    font-size:
        9px;

    font-weight:
        600;
}

.secure-line svg {
    width:
        13px;

    height:
        13px;

    color:
        var(--green);
}

.preview-message {
    margin:
        7px 0 0;

    color:
        #94a099;

    font-size:
        9px;

    line-height:
        1.4;

    text-align:
        center;
}

.preview-message.is-active {
    color:
        var(--green);

    font-weight:
        700;
}

.site-footer {
    margin-top:
        auto;

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

    background:
        white;
}

.footer-inner {
    display:
        flex;

    min-height:
        56px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    color:
        #87928c;

    font-size:
        9px;
}

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

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

    .header-inner {
        min-height:
            62px;

        gap:
            8px;
    }

    .brand-mark {
        width:
            34px;

        height:
            34px;
    }

    .brand-mark svg {
        width:
            22px;

        height:
            22px;
    }

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

    .header-link {
        font-size:
            11px;
    }

    .header-link-copy {
        display:
            none;
    }

    .airtime-main {
        padding:
            17px 0 28px;
    }

    .airtime-layout {
        gap:
            13px;
    }

    .airtime-heading h1 {
        margin-top:
            6px;

        font-size:
            33px;
    }

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

    .airtime-card {
        border-radius:
            20px;
    }

    .form-block {
        padding:
            15px 16px;
    }

    .field-heading {
        margin-bottom:
            10px;
    }

    .network-grid {
        gap:
            7px;
    }

    .network-button {
        min-height:
            67px;

        border-radius:
            13px;
    }

    .network-badge {
        width:
            32px;

        height:
            32px;

        border-radius:
            10px;
    }

    .network-badge-telecel {
        font-size:
            20px;
    }

    .network-badge-at {
        font-size:
            18px;
    }

    .phone-field,
    .custom-amount-field {
        min-height:
            46px;

        border-radius:
            12px;
    }

    .amount-grid {
        gap:
            6px;
    }

    .amount-button {
        min-height:
            39px;

        border-radius:
            10px;

        font-size:
            10px;
    }

    .order-summary {
        padding:
            14px 16px 15px;
    }

    .summary-list {
        margin-bottom:
            10px;
    }

    .summary-list > div {
        min-height:
            24px;
    }

    .summary-list .summary-total {
        min-height:
            31px;
    }

    .payment-button {
        min-height:
            47px;

        border-radius:
            12px;
    }
}

@media (max-width: 370px) {
    .brand-name {
        display:
            none;
    }

    .amount-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .amount-button:nth-child(4),
    .amount-button:nth-child(5) {
        grid-column:
            span 1;
    }
}

/* ============================================================
   AKORA AIRTIME UI V1.1
   ============================================================ */

body {
    background:
        radial-gradient(
            circle at top left,
            rgba(8, 116, 86, 0.13),
            transparent 330px
        ),
        linear-gradient(
            180deg,
            #f0f8f4 0%,
            #f7faf8 50%,
            #f7f9f7 100%
        );
}

.site-header {
    border-bottom-color: #d4e8de;

    box-shadow:
        0 8px 24px
        rgba(5, 70, 52, 0.04);
}

.header-inner {
    grid-template-columns:
        1fr auto;
}

.brand {
    justify-self: start;
    justify-content: flex-start;
}

.header-home {
    justify-self: end;
}

.airtime-layout {
    gap: 14px;
}

.airtime-heading {
    position: relative;
    overflow: hidden;

    padding:
        19px 22px;

    border:
        1px solid
        #c9e5d8;

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #dff3e9 0%,
            #eef9f4 55%,
            #ffffff 100%
        );

    text-align: left;

    box-shadow:
        0 12px 30px
        rgba(8, 116, 86, 0.07);
}

.airtime-heading::after {
    content: "";

    position: absolute;

    width: 135px;
    height: 135px;

    top: -58px;
    right: -30px;

    border-radius: 50%;

    background:
        rgba(8, 116, 86, 0.08);
}

.eyebrow {
    position: relative;
    z-index: 1;

    padding:
        5px 9px;

    border:
        1px solid
        rgba(8, 116, 86, 0.14);

    border-radius:
        999px;

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

    letter-spacing:
        1px;
}

.eyebrow::before {
    width: 6px;
    height: 6px;

    box-shadow: none;
}

.airtime-heading h1 {
    position: relative;
    z-index: 1;

    margin:
        8px 0 5px;

    color:
        var(--green-deep);

    font-size:
        clamp(
            32px,
            7vw,
            44px
        );

    letter-spacing:
        -1.8px;
}

.airtime-heading p {
    position: relative;
    z-index: 1;

    margin: 0;

    max-width:
        480px;

    color:
        #536e63;

    font-weight:
        500;
}

.airtime-card {
    border-color:
        #cde4da;

    box-shadow:
        0 20px 48px
        rgba(7, 65, 48, 0.11);
}

.form-block {
    border-bottom-color:
        #e2eee8;
}

.section-icon {
    display: grid;

    width: 27px;
    height: 27px;

    flex:
        0 0 27px;

    place-items: center;

    border:
        1px solid
        #c7e5d7;

    border-radius:
        9px;

    background:
        #e7f6ef;

    color:
        var(--green);
}

.section-icon svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.9;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.field-heading h2,
.field-label > span:last-child {
    font-size:
        13.5px;
}

.network-button {
    border-color:
        #d1e5dc;

    background:
        #fbfefc;
}

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

    background:
        #e8f6ef;

    box-shadow:
        0 0 0 3px
        rgba(8, 116, 86, 0.09),
        0 9px 22px
        rgba(8, 116, 86, 0.08);
}

.phone-field,
.custom-amount-field {
    border-color:
        #d0e5db;

    background:
        #f8fcfa;
}

.amount-button {
    min-height:
        46px;

    border-color:
        #cee3d9;

    background:
        #fbfefc;

    color:
        var(--green-deep);

    font-size:
        14px;

    font-weight:
        800;
}

.amount-button:hover,
.amount-button:focus-visible {
    border-color:
        #74b89c;

    background:
        var(--green-soft);
}

.amount-button.is-selected {
    background:
        var(--green);

    color:
        #ffffff;
}

.currency-prefix {
    background:
        #eaf7f1;

    font-weight:
        800;
}

.custom-amount-field input {
    color:
        var(--green-deep);

    font-size:
        14px;

    font-weight:
        600;
}

.custom-amount-field input::placeholder {
    color:
        #7c9389;

    opacity: 1;
}

.order-summary {
    border-top:
        1px solid
        #dcece5;

    background:
        linear-gradient(
            180deg,
            #f9fdfb 0%,
            #edf8f3 100%
        );
}

.summary-total {
    color:
        var(--green-deep);
}

.payment-button:not(:disabled) {
    box-shadow:
        0 12px 25px
        rgba(8, 116, 86, 0.2);
}

@media (max-width: 560px) {

    .header-inner {
        grid-template-columns:
            1fr auto;
    }

    .airtime-main {
        padding-top:
            12px;
    }

    .airtime-heading {
        padding:
            15px 16px;

        border-radius:
            18px;
    }

    .airtime-heading h1 {
        margin-top:
            7px;

        font-size:
            31px;
    }

    .airtime-heading p {
        font-size:
            11.5px;
    }

    .section-icon {
        width: 25px;
        height: 25px;

        flex-basis:
            25px;

        border-radius:
            8px;
    }

    .section-icon svg {
        width: 15px;
        height: 15px;
    }

    .amount-button {
        min-height:
            43px;

        font-size:
            13px;
    }
}


/* ============================================================
   AKORA_AIRTIME_PERSISTENT_PAYMENT_CTA_V1
   Same mobile behavior as Akora Data checkout:
   payment button remains visible while page content scrolls.
   ============================================================ */

@media (max-width: 650px) {

    .airtime-main {
        padding-bottom:
            calc(
                92px +
                env(safe-area-inset-bottom)
            );
    }

    .payment-button {
        position:
            fixed;

        left:
            50%;

        right:
            auto;

        bottom:
            max(
                12px,
                env(safe-area-inset-bottom)
            );

        z-index:
            120;

        width:
            min(
                calc(100% - 28px),
                460px
            );

        margin:
            0;

        transform:
            translateX(-50%);

        box-shadow:
            0 14px 32px
            rgba(8, 116, 86, 0.24);
    }
}