/* Payment modal viewport and mobile usability fixes.
 * Loaded after the account styles so this file only overrides modal behavior.
 */

#payment-qr-modal .payment-qr-modal-content {
    max-height: 94vh;
    max-height: 94dvh;
    display: flex;
    flex-direction: column;
}

#payment-qr-modal .payment-qr-header {
    position: relative;
    flex: 0 0 auto;
    padding-right: 68px;
}

#payment-qr-modal .payment-qr-header .modal-title {
    color: #fff !important;
    opacity: 1 !important;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}

#payment-qr-modal .payment-qr-header-subtitle {
    color: rgba(255, 255, 255, .94);
}

#payment-qr-modal .payment-qr-header .btn-close {
    position: absolute;
    top: 50%;
    right: 18px;
    z-index: 10;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .14);
    background-size: 15px 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23fff' d='M.293 1.707a1 1 0 0 1 1.414-1.414L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707z'/%3e%3c/svg%3e");
    filter: none !important;
    opacity: 1 !important;
}

#payment-qr-modal .payment-qr-header .btn-close:hover,
#payment-qr-modal .payment-qr-header .btn-close:focus {
    background-color: rgba(255, 255, 255, .24);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
}

#payment-qr-modal .payment-qr-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#payment-qr-modal .payment-qr-footer {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    border-top: 1px solid #e2e9e5;
    box-shadow: 0 -7px 20px rgba(15, 23, 42, .04);
}

#payment-qr-modal .payment-qr-close-btn {
    min-height: 44px;
}

@media (max-width: 600px) {
    #payment-qr-modal .payment-qr-dialog {
        width: calc(100vw - 10px);
        max-width: calc(100vw - 10px);
        height: calc(100vh - 10px);
        height: calc(100dvh - 10px);
        margin: 5px auto;
    }

    #payment-qr-modal .payment-qr-modal-content {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 16px;
    }

    #payment-qr-modal .payment-qr-header {
        min-height: 66px;
        padding: 12px 58px 12px 12px;
    }

    #payment-qr-modal .payment-qr-header-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
        font-size: 18px;
    }

    #payment-qr-modal .payment-qr-header .modal-title {
        font-size: 18px;
        line-height: 1.2;
        white-space: normal;
    }

    #payment-qr-modal .payment-qr-header-subtitle {
        display: none;
    }

    #payment-qr-modal .payment-qr-header .btn-close {
        right: 12px;
        width: 38px;
        height: 38px;
    }

    #payment-qr-modal .payment-qr-modal-body {
        padding: 12px 12px 10px;
    }

    #payment-qr-modal .payment-qr-summary {
        margin-bottom: 12px;
    }

    #payment-qr-modal .payment-qr-scan-hint {
        margin-bottom: 8px;
    }

    #payment-qr-modal .payment-qr-frame {
        width: 236px;
        height: 236px;
        padding: 13px;
        margin-bottom: 12px;
    }

    #payment-qr-modal .payment-qr-image {
        width: 208px;
        height: 208px;
    }

    #payment-qr-modal .payment-qr-footer {
        padding: 10px 12px 12px;
        background: #f7faf9;
    }

    #payment-qr-modal .payment-qr-close-btn {
        width: 100%;
        min-width: 100%;
        min-height: 46px;
        margin: 0;
        font-size: 15px;
        font-weight: 700;
    }
}

@media (max-width: 360px) {
    #payment-qr-modal .payment-qr-header .modal-title {
        font-size: 17px;
    }

    #payment-qr-modal .payment-qr-frame {
        width: 224px;
        height: 224px;
    }

    #payment-qr-modal .payment-qr-image {
        width: 196px;
        height: 196px;
    }
}

/* MING LIFE cream / champagne account palette — loaded after account layout styles */
:root {
  --ml-account-green:#0c6b4d;
  --ml-account-green-dark:#07513b;
  --ml-account-ink:#26352f;
  --ml-account-muted:#756f64;
  --ml-account-border:#e8dfcf;
  --ml-account-canvas:#fbf7ee;
  --ml-account-surface:#fffdf8;
  --ml-account-gold:#c7a45a;
  --ml-account-gold-soft:#f3e7c9;
}

body {
  color:var(--ml-account-ink);
  background:
    radial-gradient(circle at 94% 8%,rgba(199,164,90,.08),transparent 24%),
    var(--ml-account-canvas) !important;
}

body .account-sidebar-col .card,
body .account-main-col .card,
body .account-section.card,
body .modal-content {
  border:1px solid var(--ml-account-border) !important;
  background:var(--ml-account-surface) !important;
  box-shadow:0 10px 28px rgba(91,70,37,.07) !important;
}

body .account-sidebar-col .card-header,
body .account-main-col .card-header,
body .account-section .card-header {
  color:var(--ml-account-ink) !important;
  border-bottom-color:var(--ml-account-border) !important;
  background:#f8f3e8 !important;
}

body .account-sidebar-col .list-group-item {
  color:#545b55 !important;
  border-color:var(--ml-account-border) !important;
  background:var(--ml-account-surface) !important;
}

body .account-sidebar-col .list-group-item:hover {
  color:var(--ml-account-green-dark) !important;
  background:#f8f3e8 !important;
}

body .account-sidebar-col .list-group-item.active {
  color:var(--ml-account-green-dark) !important;
  border-color:#ddc99d !important;
  background:var(--ml-account-gold-soft) !important;
  box-shadow:inset 3px 0 0 var(--ml-account-green);
}

body .account-mobile-tabs {
  border:1px solid var(--ml-account-border) !important;
  background:var(--ml-account-surface) !important;
  box-shadow:0 7px 20px rgba(91,70,37,.06) !important;
}

body .account-mobile-tabs .tab-btn {
  color:#5b615b !important;
}

body .account-mobile-tabs .tab-btn.active {
  color:var(--ml-account-green-dark) !important;
  background:var(--ml-account-gold-soft) !important;
}

body .account-main-col h1,
body .account-main-col h2,
body .account-main-col h3,
body .account-main-col h4,
body .account-main-col h5,
body .account-main-col .form-label {
  color:var(--ml-account-ink) !important;
}

body .account-main-col .text-muted,
body .account-main-col .form-text {
  color:var(--ml-account-muted) !important;
}

body .account-main-col .form-control,
body .account-main-col .form-select,
body .account-main-col .input-group-text,
body .modal-content .form-control,
body .modal-content .form-select {
  color:var(--ml-account-ink) !important;
  border-color:var(--ml-account-border) !important;
  background:var(--ml-account-surface) !important;
}

body .account-main-col .form-control:focus,
body .account-main-col .form-select:focus,
body .modal-content .form-control:focus,
body .modal-content .form-select:focus {
  border-color:var(--ml-account-gold) !important;
  box-shadow:0 0 0 .2rem rgba(199,164,90,.14) !important;
}

body .account-main-col .btn-primary,
body .modal-content .btn-primary,
body #payment-qr-modal .payment-qr-header {
  color:#fff !important;
  border-color:var(--ml-account-green) !important;
  background:var(--ml-account-green) !important;
}

body .account-main-col .btn-primary:hover,
body .modal-content .btn-primary:hover {
  border-color:var(--ml-account-green-dark) !important;
  background:var(--ml-account-green-dark) !important;
}

body .account-main-col .btn-outline-primary,
body .account-main-col .btn-outline-secondary,
body .modal-content .btn-outline-primary {
  color:var(--ml-account-green-dark) !important;
  border-color:#d8bd7d !important;
  background:var(--ml-account-surface) !important;
}

body .account-main-col .btn-outline-primary:hover,
body .account-main-col .btn-outline-secondary:hover,
body .modal-content .btn-outline-primary:hover {
  border-color:var(--ml-account-gold) !important;
  background:var(--ml-account-gold-soft) !important;
}

body .account-main-col .text-primary {
  color:var(--ml-account-green) !important;
}

body .account-main-col .alert-info {
  color:#4f564f;
  border-color:#ddc99d;
  background:#f5efe3;
}

body .account-main-col .table {
  --bs-table-bg:transparent;
  --bs-table-color:var(--ml-account-ink);
  --bs-table-border-color:var(--ml-account-border);
}

body .account-main-col .table thead th {
  color:var(--ml-account-green-dark);
  background:#f8f3e8 !important;
}

body #payment-qr-modal .payment-qr-footer {
  border-top-color:var(--ml-account-border) !important;
  background:#fffdf8 !important;
}

body #payment-qr-modal .payment-qr-modal-content {
  border-color:var(--ml-account-border) !important;
  background:var(--ml-account-surface) !important;
}

@media (max-width:767.98px) {
  body > .container.mt-4 {
    margin-top:1rem !important;
    padding-left:12px;
    padding-right:12px;
  }
}