* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;

    background: #f5f5f5;
    color: #333335;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
}

button,
input {
    font-family: inherit;
}


/* =========================================
   MAIN APP
========================================= */

.app {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    margin: 0;

    padding:
        env(safe-area-inset-top)
        13px
        calc(28px + env(safe-area-inset-bottom))
        13px;

    background: #f5f5f5;
}


/* =========================================
   HEADER
========================================= */

.header {
    width: 100%;
    height: 56px;

    position: relative;

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

.header h1 {
    margin: 0;

    color: #333335;

    font-size: 17px;
    font-weight: 600;
    line-height: 1;
}

.back-btn {
    position: absolute;

    left: 0;
    top: 7px;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;
    background: transparent;

    color: #333335;

    font-size: 32px;
    font-weight: 300;
    line-height: 42px;

    cursor: pointer;
}

.scan-btn {
    position: absolute;

    right: 0;
    top: 7px;

    width: 42px;
    height: 42px;

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

    border: 1px solid #e5e6e6;
    border-radius: 11px;

    background: #ffffff;

    color: #666d71;

    box-shadow:
        0 1px 5px rgba(0, 0, 0, .035);

    cursor: pointer;
}

.scan-icon {
    font-size: 23px;
    line-height: 1;
}


/* =========================================
   FROM / TO CARD
========================================= */

.address-card {
    width: 100%;

    position: relative;

    padding: 9px 15px;

    background: #ffffff;

    border-radius: 15px;

    box-shadow:
        0 2px 9px rgba(0, 0, 0, .035);
}

.address-row {
    width: 100%;
    height: 61px;

    display: flex;
    align-items: center;
}

.label {
    width: 35px;

    color: #858e92;

    font-size: 12px;
    font-weight: 400;

    flex-shrink: 0;
}

.address-info {
    display: flex;
    flex-direction: column;

    margin-left: 5px;
}

.address-info strong {
    color: #333335;

    font-size: 14px;
    font-weight: 600;

    line-height: 17px;
}

.address-info small {
    margin-top: 2px;

    color: #858e92;

    font-size: 10px;
    font-weight: 400;

    line-height: 13px;
}

.arrow {
    margin-left: auto;

    color: #aeb4b7;

    font-size: 25px;
    font-weight: 300;
}

.swap {
    position: absolute;

    right: 14px;
    top: 59px;

    width: 29px;
    height: 29px;

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

    border: 1px solid #e6e7e7;
    border-radius: 8px;

    background: #f3f4f4;

    color: #737c80;

    font-size: 18px;

    z-index: 3;
}


/* =========================================
   SECTION TITLES
========================================= */

.section-title {
    margin: 14px 2px 8px;

    color: #858e92;

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

    letter-spacing: .6px;
}

.amount-title {
    margin-top: 14px;
}


/* =========================================
   COIN CARD
========================================= */

.coin-card {
    width: 100%;

    overflow: hidden;

    background: #ffffff;

    border-radius: 15px;

    box-shadow:
        0 2px 9px rgba(0, 0, 0, .035);
}

.coin-row {
    width: 100%;
    height: 62px;

    display: flex;
    align-items: center;

    padding: 0 15px;

    border-bottom: 1px solid #eeeeee;

    cursor: pointer;
}

.coin-row:last-child {
    border-bottom: 0;
}


/* SELECTED USDT */

.coin-row:first-child {
    background: #e0fbf3;
}


/* BNB */

#bnbRow {
    background: #ffffff;
}


/* =========================================
   COIN LOGOS
========================================= */

.coin-logo {
    width: 33px;
    height: 33px;

    flex: 0 0 33px;

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

    border-radius: 50%;
}

.usdt {
    background: #16b18d;

    color: #ffffff;

    font-size: 23px;
    font-weight: bold;
}

.bnb {
    object-fit: cover;
}


/* =========================================
   COIN TEXT
========================================= */

.coin-info {
    display: flex;
    flex-direction: column;

    margin-left: 11px;
}

.coin-info strong {
    color: #333335;

    font-size: 14px;
    font-weight: 600;

    line-height: 17px;
}

.coin-info small {
    margin-top: 2px;

    color: #7d878b;

    font-size: 10px;
    font-weight: 400;

    line-height: 13px;
}


/* =========================================
   RADIO
========================================= */

.radio {
    width: 18px;
    height: 18px;

    margin-left: auto;

    border: 2px solid #eeeeee;
    border-radius: 50%;

    background: #ffffff;
}

.selected-usdt {
    border: 5px solid #00b392;
}


/* =========================================
   AMOUNT TITLE
========================================= */

.amount-title {
    margin-top: 14px;
}


/* =========================================
   AMOUNT CARD
========================================= */

.amount-card {
    width: 100%;

    padding: 13px 15px 11px;

    background: #ffffff;

    border-radius: 15px;

    box-shadow:
        0 2px 9px rgba(0, 0, 0, .035);
}

.amount-line {
    width: 100%;
    height: 35px;

    display: flex;
    align-items: center;
}

.amount-line input {
    width: 100%;
    min-width: 0;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #333335;

    font-size: 15px;
    font-weight: 400;
}

.amount-line input::placeholder {
    color: #bfc4c7;
}

.amount-line > strong {
    margin-right: 9px;

    color: #7b8589;

    font-size: 12px;
    font-weight: 600;
}


/* =========================================
   MAX BUTTON
========================================= */

.max-btn {
    flex-shrink: 0;

    min-width: 45px;

    padding: 7px 10px;

    border: 1px solid #f1e0a5;
    border-radius: 7px;

    background: #fff3c7;

    color: #d3a900;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

.max-btn:active {
    background: #ffecad;
}


/* =========================================
   AVAILABLE
========================================= */

.available {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 9px;

    color: #858e92;

    font-size: 10px;
    font-weight: 400;
}

.available strong {
    color: #b9bec1;

    font-size: 10px;
    font-weight: 500;
}


/* =========================================
   NETWORK
========================================= */

.network {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 11px 4px 0;

    color: #858e92;

    font-size: 10px;
}

.network strong {
    color: #737d81;

    font-size: 10px;
    font-weight: 500;
}


/* =========================================
   CONFIRM BUTTON
========================================= */

.confirm-btn {
    width: 100%;
    height: 45px;

    margin-top: 13px;

    border: 0;
    border-radius: 12px;

    background: #f6e4ae;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    cursor: not-allowed;
}

.confirm-btn.enabled {
    background: #f6d65e;

    color: #3d3300;

    cursor: pointer;
}


/* =========================================
   RECEIVER
========================================= */

.receiver {
    margin:
        16px
        5px
        0;

    text-align: center;

    color: #858e92;

    font-size: 9px;

    line-height: 1.65;
}

.receiver b {
    color: #92999c;

    font-size: 8px;

    word-break: break-all;
}


/* =========================================
   MESSAGE
========================================= */

.message {
    position: fixed;

    left: 50%;
    bottom:
        calc(
            20px +
            env(safe-area-inset-bottom)
        );

    width: calc(100% - 30px);
    max-width: 410px;

    padding: 12px 15px;

    border-radius: 10px;

    background: #22282a;
    color: #ffffff;

    text-align: center;

    font-size: 11px;
    line-height: 16px;

    opacity: 0;

    transform:
        translateX(-50%)
        translateY(100px);

    transition: .25s ease;

    z-index: 999;
}

.message.show {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}


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

@media (max-width: 380px) {

    .app {
        padding-left: 11px;
        padding-right: 11px;
    }

    .header h1 {
        font-size: 17px;
    }

    .address-info strong {
        font-size: 14px;
    }

    .address-info small {
        font-size: 10px;
    }

    .coin-row {
        height: 61px;

        padding-left: 13px;
        padding-right: 13px;
    }

    .coin-info strong {
        font-size: 14px;
    }

    .coin-info small {
        font-size: 10px;
    }

    .amount-line input {
        font-size: 15px;
    }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 330px) {

    .app {
        padding-left: 9px;
        padding-right: 9px;
    }

    .address-info strong,
    .coin-info strong {
        font-size: 13px;
    }

    .address-info small,
    .coin-info small {
        font-size: 9px;
    }

    .amount-line input {
        font-size: 14px;
    }

    .confirm-btn {
        font-size: 13px;
    }

}

/* =========================================
   MOBILE FONT FIX — STRONG & CLEAR
========================================= */

html,
body,
button,
input {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* HEADER */

.header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #2f3032 !important;
}


/* FROM / TO */

.label {
    font-size: 12px !important;
    font-weight: 500 !important;
}

.address-info strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #292a2c !important;
}

.address-info small {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #747b7f !important;
}


/* COIN */

.coin-info strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #292a2c !important;
}

.coin-info small {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #747b7f !important;
}


/* SECTION TITLES */

.section-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #7c8589 !important;
}


/* AMOUNT */

.amount-line input {
    font-size: 15px !important;
    font-weight: 500 !important;
}

.amount-line > strong {
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* MAX */

.max-btn {
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* AVAILABLE */

.available {
    font-size: 10px !important;
    font-weight: 500 !important;
}

.available strong {
    font-size: 10px !important;
    font-weight: 600 !important;
}


/* NETWORK */

.network {
    font-size: 10px !important;
    font-weight: 500 !important;
}

.network strong {
    font-size: 10px !important;
    font-weight: 600 !important;
}


/* CONFIRM */

.confirm-btn {
    font-size: 14px !important;
    font-weight: 700 !important;
}


/* RECEIVING WALLET */

.receiver {
    font-size: 9px !important;
    font-weight: 500 !important;
}

.receiver b {
    font-size: 8px !important;
    font-weight: 600 !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .header h1 {
        font-weight: 700 !important;
    }

    .address-info strong,
    .coin-info strong {
        font-weight: 700 !important;
    }

    .address-info small,
    .coin-info small {
        font-weight: 500 !important;
    }

    .max-btn,
    .confirm-btn {
        font-weight: 700 !important;
    }
}

/* =========================================
   HEADER — TOP GAP + TRANSFER SIZE FIX
========================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

.app {
    margin: 0 !important;

    /* top gap completely removed */
    padding-top: 0 !important;
}


/* Transfer title */

.header {
    height: 55px !important;

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

.header h1 {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 19px !important;
    line-height: 22px !important;

    font-weight: 700 !important;

    color: #2f3032 !important;
}


/* Back arrow */

.back-btn {
    top: 6px !important;
}


/* Scanner */

.scan-btn {
    top: 6px !important;
}