.close-btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
}

.close-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Status color classes shared between pages */
.state-success {
    color: #22c55e;
    font-weight: 700;
}

.state-processing {
    color: #f59e0b;
    font-weight: 700;
}

.state-failed {
    color: #ef4444;
    font-weight: 700;
}

/* Status value styling for payresult page */
.status-value {
    font-weight: 600;
}

.status-value span {
    font-weight: 600 !important;
}

/* Highlight for game ID in i18n messages: red and bold */
.highlight-id {
    color: #e53935;
    /* red */
    font-weight: 700;
}

/* Stronger selectors to override utility classes (Tailwind etc.) and ensure visibility */
.text-gray-500 .highlight-id,
.text-gray-400 .highlight-id,
.text-gray-700 .highlight-id,
.text-gray-600 .highlight-id,
.text-primary .highlight-id,
.card .highlight-id,
body .highlight-id {
    color: #e53935 !important;
    font-weight: 700 !important;
}

/* Support button in header */
.support-btn {
    display: inline-flex;
    align-items: center;
}

.card-support-btn {
    /* used for the card top-right support button */
    display: inline-flex;
    align-items: center;
    gap: 0px;
    /* reduced to bring icon and text closer */
    padding: 8px 12px;
    border-radius: 8px;
    color: #fff;
    background: #1877F2;
    /* Facebook blue */
    font-weight: 700;
    border: 0;
}

.card-support-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ensure any nested shapes (path/circle) inherit the color when inline SVGs specify currentColor */
.card-support-btn svg * {
    fill: currentColor;
}

/* make sure the support button sits above card content */
.card-support-btn {
    position: relative;
    z-index: 10;
}

/* If the support button uses Tailwind's w-40 (10rem), make it 20% wider without stretching content */
.card-support-btn.w-40 {
    width: 12rem;
}

/* If you prefer to keep a flexible approach (no hardcoded Tailwind value),
   we could instead increase horizontal padding or set min-width in a media-query-aware way. */

/* PNG support icon sizing when using image/Service.png */
.card-support-btn .support-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 50%;
    padding: 4px;
    box-sizing: content-box;
    opacity: 0.98;
    margin-right: 0px !important;
}

.card-support-btn .support-icon.inline-block {
    display: inline-block;
    vertical-align: middle;
}

.card-support-btn:hover {
    background: #165ec6;
}

/* Ensure footer sticks to bottom when page content is short */
html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main,
.main-content,
.container-main {
    flex: 1 0 auto;
    /* allow main to grow and push footer down */
}

footer {
    flex-shrink: 0;
}

/* Charge option coin count: use rem-based sizing so body transform scaling applies uniformly */
.charge-coins {
    font-size: calc(var(--charge-base) * 1.0) !important;
    line-height: 1 !important;
}

/* Also override inline styles from obfuscated/dist JS which set clamp(..., vw, ...) inline
   Target the common class names the script uses so both original and obfuscated outputs are covered */
#charge-options .text-yellow-500.font-bold {
    font-size: calc(var(--charge-base) * 1.0) !important;
    line-height: 1 !important;
}

/* Charge option card overrides to ensure rem-based sizing */
.charge-card {
    /* base sizing for charge tiles: use a CSS variable so we can keep text/icon/card proportions
         consistent across breakpoints. Default base equals 1rem (desktop baseline). */
    --charge-base: 1rem;
    font-size: var(--charge-base);
    min-height: calc(var(--charge-base) * 6.25) !important;
    /* scales with base */
    box-sizing: border-box;
}

/* High-specificity overrides to ensure charge tile proportions follow --charge-base
   These rules use ID + class selectors and !important so they win over utility classes
   or inline styles applied by JS. */
#charge-options .charge-card,
.page-product #charge-options .charge-card,
.page-payresult #charge-options .charge-card,
.charge-card {
    --charge-base: 1rem !important;
    /* desktop baseline */
    font-size: var(--charge-base) !important;
}

#charge-options .charge-card .text-yellow-500.font-bold,
#charge-options .charge-card .charge-coins,
.charge-card .text-yellow-500.font-bold,
.charge-card .charge-coins {
    font-size: calc(var(--charge-base) * 1.0) !important;
    line-height: 1 !important;
}

#charge-options .charge-card img,
#charge-options .charge-card i,
.charge-card img,
.charge-card i {
    width: calc(var(--charge-base) * 1.6) !important;
    height: calc(var(--charge-base) * 1.6) !important;
}

/* Ensure subtext (small price) scales slightly smaller but remains proportional */
#charge-options .charge-card .meta,
.charge-card .meta,
#charge-options .charge-card .text-gray-500,
.charge-card .text-gray-500 {
    font-size: calc(var(--charge-base) * 0.65) !important;
}

/* Mobile override: increase base so font/icon/card scale together and keep proportion stable */
@media (max-width: 768px) {

    .page-product #charge-options .charge-card,
    .page-payresult #charge-options .charge-card,
    #charge-options .charge-card {
        --charge-base: 2.5rem !important;
        font-size: var(--charge-base) !important;
    }
}

/* Extra overrides to defeat Tailwind utility classes or inline width/height: target utilities inside charge-card */
#charge-options .charge-card [class*="text-"] {
    /* reset any Tailwind text- classes (text-sm/text-base/text-lg) to use our base */
    font-size: calc(var(--charge-base) * 1.0) !important;
    line-height: 1 !important;
}

#charge-options .charge-card [class*="text-sm"] {
    font-size: calc(var(--charge-base) * 0.65) !important;
    /* small subtext */
}

#charge-options .charge-card [class*="min-h-"] {
    /* override Tailwind arbitrary min-h like min-h-[100px] */
    min-height: calc(var(--charge-base) * 6.25) !important;
}

/* note: removed aggressive "force inherit" rule that prevented inline font-size set by runtime scripts */
.charge-mid {
    transform: translateX(-0.3125rem) !important;
}

/* Additional conservative overrides to neutralize inline clamp(...) and px styles from obfuscated JS */
#charge-options .charge-card .text-yellow-500.font-bold,
#charge-options .charge-card .charge-coins,
.charge-card .text-yellow-500.font-bold {
    font-size: 1rem !important;
    /* force 16px base */
    line-height: 1 !important;
}

.charge-card img,
.charge-card i {
    width: calc(var(--charge-base) * 1.6) !important;
    height: calc(var(--charge-base) * 1.6) !important;
}

.charge-card .text-gray-500 {
    margin-top: 0.25rem !important;
    /* override 4px */
}

/* Ensure charge-card text sizes are based on the base variable so proportions remain stable */
.charge-card .text-yellow-500.font-bold,
.charge-card .charge-coins,
#charge-options .text-yellow-500.font-bold {
    /* use the base variable as the font-size anchor */
    font-size: calc(var(--charge-base) * 1.0) !important;
    line-height: 1 !important;
}

/* Fallback: if inline style sets clamp(...) on any element under #charge-options, prefer our rule */
#charge-options [class*="text-yellow-500"] {
    font-size: 1rem !important;
}

/* Replacements for inline styles moved out of JS */
.charge-price {
    margin-top: 0.25rem !important;
}

/* Form background helpers - use when JS previously set background via inline styles */
.form-bg-cover {
    background-image: var(--form-bg-image, none);
    background-size: cover;
    background-position: center;
}

.form-err {
    margin-top: -0.25rem !important;
}

/* -4px -> -0.25rem */

/* Save button unified styles; mn-lang-btn increases width/height for Mongolian labels */
.btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hipay notice text size */
.hipay-notice {
    font-size: 10rem !important;
    line-height: 1 !important;
}

.btn-save.mn-lang-btn {
    width: 9rem !important;
    height: 2.7rem !important;
}

/* Make the localized title for charge.options bold and 2rem like Account */
[data-i18n="charge.options"],
[data-i18n="charge.options"] * {
    font-weight: 700 !important;
    font-size: 2rem !important;
    line-height: 2 !important;
}

/* Utility to show/hide overlay elements (used by orders overlay functions) */
.overlay-visible {
    display: flex !important;
}

.overlay-hidden {
    display: none !important;
}

/* Page root and background image helper */
.page-root {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-bg-image {
    background-image: none !important;
}

/* Ensure background stays fixed to viewport even if body is transformed (mobile scale)
   Apply background on the root <html> element via page-* classes on <html> so it's not affected by
   transforms on <body>. The URL is relative to this CSS file. */
html.page-index,
html.page-product,
html.page-orders,
html.page-payresult,
html.page-doc {
    background-image: var(--page-bg, url('../image/background.jpg')) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Hide footer only on product page */
html.page-product #footer {
    display: none !important;
}

/* optional blur variant for pages that use a blurred background */
.page-bg-image-blur {
    filter: blur(4px);
}

/* Language dropdown position & arrow */
.language-dropdown-pos {
    z-index: 9999;
    left: 0;
    top: calc(100% + 6px);
    transform-origin: top left;
    max-width: 90vw;
    overflow: hidden;
}

.language-dropdown-arrow {
    position: absolute;
    top: -6px;
    left: 18px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
}

/* Main content padding centralized */
.page-main {
    padding: 80px 16px 40px;
    flex: 1;
}

/* Controls input/button in orders page */
.controls-input {
    flex: 1 1 auto;
    min-width: 7.5rem;
    max-width: calc(100% - 11.25rem);
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.controls-btn {
    min-width: 4rem;
    white-space: nowrap;
}

/* minor helpers */
.text-right {
    text-align: right;
}

.mt-3 {
    margin-top: 0.75rem;
}

.site-footer {
    margin-top: auto;
}

.footer-contact-email {
    display: inline-block;
    min-width: 7.75rem;
}

/* small helpers for replacing inline styles in generated HTML */
.muted-text {
    color: #666 !important;
}

.strong {
    font-weight: 700 !important;
}

.btn-margin-left {
    margin-left: 10px !important;
}

/* Product page specific helpers */
.page-product .card-main {
    padding: calc(2rem * 1.5) 2rem !important;
    /* increase vertical padding by 15% */
    display: flex !important;
    flex-direction: column !important;
    /* stack children top-to-bottom */
    align-items: flex-start !important;
    /* left align children */
    justify-content: flex-start !important;
    /* start from top */
}

/* make most direct children full width so content flows vertically; keep support button absolute */
.page-product .card-main>*:not(.card-support-btn):not(.support-btn):not(#pay-btn) {
    width: 100% !important;
}

/* Center the pay button and add spacing from the agreement block */
#pay-btn {
    display: block !important;
    margin-top: 2rem !important; /* space from agreement */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Force pay button text to 2rem and strong line-height for readability */
#pay-btn, #pay-btn [data-i18n="pay"] {
    font-size: 2rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

.page-product .charge-account-box {
    width: 100%;
    box-sizing: border-box;
}

/* Make the save button in charge-account full width and larger text */
.charge-account-box .btn-save {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 2rem !important; /* space from agreement */
    width: auto !important; /* allow intrinsic width while enforcing min-width */
    padding: 0.6rem 1.25rem !important; /* horizontal breathing room for text */
    min-width: 12rem !important; /* ensure button isn't too narrow on larger screens */
    min-height: 5rem !important; /* ensure button isn't too short */
    box-sizing: border-box !important;
    border-radius: 8px !important;
}
.charge-account-box .btn-save, .charge-account-box .btn-save [data-i18n="charge.save"] {
    font-size: 2rem !important;
    line-height: 1 !important;
    font-weight: 600 !important;
}

.page-product .support-btn-pos {
    right: 1rem;
    top: 0.75rem;
}

.page-product .pay-btn-spacing {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.page-payresult .support-btn-pos-2 {
    right: 1rem;
    top: 0.75rem;
}

/* Payresult-specific layout fixes
    - ensure the card is a positioned container so absolutely-positioned support button anchors to it
    - force the support button inside the payresult card to be absolute so right/top offsets apply
    - layout the dt/dd pairs as two columns: label (left) / value (right) */
.page-payresult .card {
    position: relative;
}

.page-payresult .card .card-support-btn {
    position: absolute;
    z-index: 12;
}

.page-payresult .card dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 8px;
    align-items: center;
}

.page-payresult .card dl dt {
    margin: 0;
    font-weight: 700;
    color: #374151;
}

.page-payresult .card dl dd {
    margin: 0;
    color: #111827;
}

/* Ensure status color classes are visible inside the payresult card
    .card dl dd has a specific color rule which can override simple .state-* classes.
    Add more specific selectors (and use !important as a safe fallback) so status
    text shows green / amber / red as intended. */
.page-payresult .card dl dd.status.state-success {
    color: #059669 !important;
    font-weight: 700 !important;
}

.page-payresult .card dl dd.status.state-processing {
    color: #D97706 !important;
    font-weight: 700 !important;
}

.page-payresult .card dl dd.status.state-failed {
    color: #DC2626 !important;
    font-weight: 700 !important;
}


/* --- Merged per-page styles (moved from individual HTML files) --- */
/* Utility classes used across pages */
.content-auto {
    content-visibility: auto;
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.transition-custom {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-gradient-custom {
    background: linear-gradient(135deg, #6C5CE7 0%, #00CEFF 100%);
}

/* Disabled button appearance (unified) */
button:disabled {
    background-color: #cbcdcd !important;
    color: #7c7c7c !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Consolidated mobile-scaling rules used by several pages */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
        /* prevent horizontal drag */
        touch-action: pan-y;
        -ms-touch-action: pan-y;
        overscroll-behavior-y: none;
    }

    body {
        -webkit-transform: scale(var(--mobile-scale, 0.7));
        transform: scale(var(--mobile-scale, 0.7));
        transform-origin: top left;
        width: calc(100% / var(--mobile-scale, 0.7));
        height: calc(100vh / var(--mobile-scale, 0.7));
        min-height: calc(100vh / var(--mobile-scale, 0.7));
        margin: 0;
        padding: 0;
    }

    .fixed.inset-0 {
        width: 100%;
        height: calc(100vh / var(--mobile-scale, 0.7));
        background-size: cover;
    }

    main {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: calc(100vh / var(--mobile-scale, 0.7));
    }

    /* Index page: disable mobile scaling */
    .page-index body {
        -webkit-transform: none !important;
        transform: none !important;
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
    }

    .page-index .fixed.inset-0 {
        width: 100% !important;
        height: 100vh !important;
    }

    .page-index main {
        height: auto !important;
    }
}

/* Agreement label styling: make bilingual agreement text 2rem and line-height 2 */
/* Agreement label: keep checkbox and links on one line and vertically centered */
#agree-label {

    /* space from agreement */
    display: inline-flex !important;
    align-items: center !important;
    /* gap: 0.5rem !important; */
    white-space: nowrap !important;
    /* prevent line breaks */
    font-size: 1.2rem !important;
    line-height: 1 !important;
    /* compact but legible */
    margin-top: 1.3rem !important;
}

#agree-label a {
    /* space from agreement */
    display: inline-flex !important;
    align-items: center !important;
    /* gap: 0.5rem !important; */
    white-space: nowrap !important;
    /* prevent line breaks */
    font-size: 1.2rem !important;
    line-height: 1 !important;
    /* compact but legible */
    margin-top: 1.3rem !important;
}

/* Increase size for the agreement main text and the joining word */
#agree-label [data-i18n="agree.full"],
#agree-label [data-i18n="agree.join"] {
    margin-top: 1.3rem !important;
    /* space from agreement */
    font-size: 1.2rem !important;
    line-height: 1 !important;
}

/* Force the agree checkbox to 16x16 and keep it centered */
#agree {
    width: 1.2rem !important;
    height: 1.2rem !important;
    min-width: 1.2rem !important;
    min-height: 1.2rem !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    /* keep native appearance where possible, but ensure consistent sizing */
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    margin-top: 3rem !important;
}

/* Mobile: enlarge charge option button text and icons by ~30% for better tap targets */
@media (max-width: 768px) {

    /* Mobile: enlarge charge option text and icons by ~30% for better legibility on small screens
       Keep the overall card height modest so buttons don't become oversize. */
    /* Increase the charge base so font/icon/card scale together and keep proportions matching desktop */
    .charge-card {
        --charge-base: 2.5rem !important;
    }

    /* keep card vertical size controlled to avoid oversized tiles */
    .charge-card {
        /* keep button height stable on mobile: fixed min-height to avoid oversized tiles when text scales */
        min-height: 100px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* small adjustments for support button on mobile */
    .card-support-btn {
        padding: 6px 8px !important;
    }

    .card-support-btn .support-icon {
        width: 28px !important;
        height: 28px !important;
    }

    /* make charge option icons larger on mobile to match enlarged text visually */
    #charge-options .charge-card img,
    #charge-options .charge-card i,
    .charge-card img,
    .charge-card i {
        width: calc(var(--charge-base) * 1.8) !important;
        height: calc(var(--charge-base) * 1.8) !important;
    }
}

/* Card / Orders / list related rules (from orders.html & payresult) */
.card {
    background: rgba(255, 255, 255, 0.85);
    padding: 16px;
    border-radius: 8px;
    max-width: 960px;
    margin: 24px auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.btn {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}

.btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

.list {
    max-height: 480px;
    overflow: auto;
    border: 1px solid #eee;
    padding: 8px;
    border-radius: 6px;
    background: #fff;
}

.row {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #f5f5f5;
}

.meta {
    color: #666;
    font-size: 13px;
}

/* Orders overlay */
.page-orders .orders-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9999;
}

.page-orders .orders-overlay .box {
    background: rgba(255, 255, 255, 0.98);
    padding: 18px 22px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.page-orders .orders-overlay .spinner {
    width: 36px;
    height: 36px;
    border: 4px solid #eee;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: orders-spin 1s linear infinite;
}

.page-orders .orders-overlay .overlay-text {
    color: #111;
    font-weight: 600;
    font-size: 14px;
}

@keyframes orders-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Payment launching overlay */
.payment-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.payment-overlay.hidden {
    display: none;
}

.payment-overlay-content {
    background: rgba(255, 255, 255, 0.98);
    padding: 24px 30px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 280px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.payment-overlay .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #eee;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: payment-spin 1s linear infinite;
}

.payment-text {
    color: #111;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
}

.payment-hint {
    margin-top: 8px;
    font-size: 14px;
    font-weight: normal;
    color: #666;
}

.payment-hint a {
    color: #3b82f6;
    text-decoration: underline;
    cursor: pointer;
}

.payment-hint a:hover {
    color: #2563eb;
}

@keyframes payment-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Small helper used by some pages */
.page-doc .pdf-content {
    min-height: 800px;
}

/* End merged per-page styles */

/* Final override: ensure Hipay notice font size applies on product page */
.page-product .card-main .hipay-notice,
.page-product .card-main [data-i18n="payment.hipayNotice"] {
    font-size: 1.15rem !important;
    line-height: 1.15 !important;
}

/* Mobile: Enlarge account area by 30% for better usability */
@media (max-width: 768px) {

    /* Account box - increase font sizes and spacing instead of scaling */
    .charge-account-box {
        margin-bottom: 2.5rem !important;
    }

    /* Enlarge labels and text */
    .charge-account-box label {
        font-size: 2rem !important;
        /* 18px, up from 16px (~12.5% increase) */
        font-weight: 650 !important;
        line-height: 2 !important;
    }

    /* Enlarge input fields - height and font size only, keep width responsive */
    .charge-account-box input[type="text"] {
        height: 3rem !important;
        /* up from 2.5rem */
        font-size: 1.5rem !important;
        /* 18px */
        padding: 0.75rem 1rem !important;
    }

    /* Enlarge buttons */
    .charge-account-box .btn-save {
        height: 2.75rem !important;
        /* up from 2.25rem */
        width: 7rem !important;
        /* up from 6rem */
        font-size: 1.5rem !important;
        font-weight: 600 !important;
        margin-top: 0.75rem !important;
    }

    /* Enlarge error text */
    .charge-account-box .form-err {
        font-size: 0.9375rem !important;
        /* 15px, up from 12px */
        min-height: 1.5rem !important;
    }

    /* Enlarge saved account display */
    .charge-account-box .flex.items-center.gap-4 {
        gap: 1.25rem !important;
    }

    /* Enlarge avatar in saved view */
    .charge-account-box .w-14.h-14 {
        width: 4.5rem !important;
        /* up from 3.5rem */
        height: 4.5rem !important;
    }

    /* Saved account text: increase font-size only (~30%) to improve readability */
    .charge-account-box .text-lg {
        font-size: 2rem !important;
        /* ~30% up from 1.125rem (18px) */
        font-weight: 600 !important;
        line-height: 1.2 !important;
    }

    .charge-account-box .text-sm {
        font-size: 2rem !important;
        /* ~30% up from 0.875rem (14px) */
        line-height: 1.3 !important;
    }

    /* Enlarge edit button */
    .charge-account-box button img {
        width: 2rem !important;
        /* up from 1.25rem */
        height: 2rem !important;
    }

    /* Enlarge notice text under saved account */
    .charge-account-box .text-gray-500.text-sm {
        font-size: 1.5rem !important;
        /* 16px, up from 14px */
        line-height: 1.2 !important;
        margin-top: 2rem !important;
    }
}