* {
    box-sizing:border-box
}

html,
body {
    margin:0;
    min-height:100%;
    overflow-x:hidden
}

body {
    background:#ebe7e2;
    color:#17141b;
    font-family:Arial,
    sans-serif
}

.mobile-app {
    background:#faf8f5;
    box-shadow:0 0 35px rgba(23,
    20,
    27,
    .12);
    margin:0 auto;
    max-width:480px;
    min-height:100vh;
    padding-bottom:78px;
    position:relative;
    width:100%
}

.app-header {
    align-items:center;
    background:#fff;
    border-bottom:1px solid #e9e3dc;
    display:flex;
    height:64px;
    justify-content:space-between;
    padding:0 18px;
    position:sticky;
    top:0;
    z-index:1020
}

.app-content {
    padding:18px
}

.navbar-brand {
    font-size:1.25rem;
    font-weight:800
}

.brand-accent,
em {
    color:#741675;
    font-style:normal
}

.bottom-nav {
    align-items:center;
    background:#fff;
    border-top:1px solid #e9e3dc;
    bottom:0;
    display:flex;
    height:68px;
    justify-content:space-around;
    left:50%;
    max-width:480px;
    position:fixed;
    transform:translateX(-50%);
    width:100%;
    z-index:1030
}

.bottom-nav a {
    align-items:center;
    color:#5f5961;
    display:flex;
    flex:1;
    flex-direction:column;
    font-size:.72rem;
    font-weight:600;
    text-decoration:none
}

.bottom-nav span {
    color:#741675;
    font-size:.75rem;
    font-weight:800;
    margin-bottom:2px
}

.hero-title,
.font-serif {
    font-family:Georgia,
    serif
}

.hero-title {
    font-size:2.35rem;
    line-height:1.05
}

.eyebrow {
    color:#741675;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.13rem
}

.btn-paynow {
    background:#741675;
    border-color:#741675;
    color:#fff
}

.btn-paynow:hover,
.btn-paynow:focus,
.btn-paynow:active {
    background:#5b105c;
    border-color:#5b105c;
    color:#fff
}

.link-paynow {
    color:#741675;
    font-size:.85rem
}

.modal-dialog {
    margin-left:auto;
    margin-right:auto;
    max-width:440px;
    padding:0 10px
}

.modal-content {
    max-height:calc(100vh - 24px)
}

.qr-image {
    max-height:42vh;
    max-width:250px;
    object-fit:contain;
    width:100%
}

.empty-state {
    background:#fff;
    border:1px dashed #d7cec7;
    border-radius:.75rem;
    color:#706b73;
    padding:2rem 1rem;
    text-align:center
}

.field-validation-error,
.validation-summary-errors {
    color:#b42318;
    font-size:.85rem
}

.auth,
.profile {
    background:#fff;
    border:1px solid #e9e3dc;
    border-radius:1rem;
    box-shadow:0 .5rem 2rem rgba(59,
    20,
    55,
    .07);
    margin:1rem 0;
    padding:1.5rem;
    width:100%
}

.auth h1,
.profile h1 {
    font-family:Georgia,
    serif;
    font-size:2rem
}

.auth label,
.profile label {
    display:block;
    font-weight:600;
    margin-top:1rem
}

.auth input,
.profile input,
.profile select {
    border:1px solid #ced4da;
    border-radius:.5rem;
    display:block;
    font-size:16px;
    padding:.8rem;
    width:100%
}

.auth button,
.profile button {
    background:#741675;
    border:0;
    border-radius:.5rem;
    color:#fff;
    margin-top:1.5rem;
    padding:.85rem 1rem;
    width:100%
}

.authlinks {
    display:flex;
    flex-direction:column;
    gap:.7rem;
    margin-top:1.25rem
}

.auth a {
    color:#741675
}

.captcha-panel {
    background:#f6f1f6;
    border:1px solid #dfd1df;
    border-radius:.75rem;
    margin-top:1.25rem;
    padding:0 1rem 1rem
}

.auth .remember-login {
    align-items: center;
    display: flex;
    font-weight: 400;
    gap: 9px;
}

.auth .remember-login input {
    display: inline-block;
    height: 18px;
    margin: 0;
    width: 18px;
}

.profile .check input {
    display:inline-block;
    width:auto
}

.profile .check {
    font-weight:400
}

.transaction-list {
    background:#fff;
    border:1px solid #eee8e2;
    border-radius:.9rem;
    overflow:hidden
}

.transaction-item {
    align-items:center;
    border-bottom:1px solid #eee8e2;
    display:flex;
    gap:12px;
    justify-content:space-between;
    padding:15px
}

.transaction-item:last-child {
    border-bottom:0
}

.transaction-item div {
    display:flex;
    flex-direction:column;
    min-width:0
}

.transaction-item strong {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.transaction-item small {
    color:#706b73;
    font-size:.75rem
}

.transaction-item b {
    color:#17141b;
    flex-shrink:0
}

.filter-chips {
    display:flex;
    gap:7px;
    overflow-x:auto
}

.filter-chips a {
    background:#fff;
    border:1px solid #ded7d1;
    border-radius:2rem;
    color:#443e45;
    font-size:.8rem;
    padding:.55rem .8rem;
    text-decoration:none;
    white-space:nowrap
}

.swal2-popup {
    border-radius:1rem;
    font-size:.9rem;
    width:calc(100% - 36px)
}

.swal2-confirm {
    background:#741675
}

@media(min-width:481px) {
    body {
        padding:20px 0
    }

    .mobile-app {
        border-radius:1.25rem;
        min-height:calc(100vh - 40px);
        overflow:hidden
    }

    .bottom-nav {
        bottom:20px;
        border-radius:0 0 1.25rem 1.25rem
    }


}