/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-bjxo8nkvpq] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-bjxo8nkvpq] {
    flex: 1;
}

.sidebar[b-bjxo8nkvpq] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-bjxo8nkvpq] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-bjxo8nkvpq]  a, .top-row[b-bjxo8nkvpq]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-bjxo8nkvpq]  a:hover, .top-row[b-bjxo8nkvpq]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-bjxo8nkvpq]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-bjxo8nkvpq] {
        justify-content: space-between;
    }

    .top-row[b-bjxo8nkvpq]  a, .top-row[b-bjxo8nkvpq]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-bjxo8nkvpq] {
        flex-direction: row;
    }

    .sidebar[b-bjxo8nkvpq] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-bjxo8nkvpq] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-bjxo8nkvpq]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-bjxo8nkvpq], article[b-bjxo8nkvpq] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-bjxo8nkvpq] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-bjxo8nkvpq] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-nhzhab4jhi] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-nhzhab4jhi] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-nhzhab4jhi] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-nhzhab4jhi] {
    font-size: 1.1rem;
}

.bi[b-nhzhab4jhi] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-nhzhab4jhi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-nhzhab4jhi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-nhzhab4jhi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-nhzhab4jhi] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-nhzhab4jhi] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-nhzhab4jhi] {
        padding-bottom: 1rem;
    }

    .nav-item[b-nhzhab4jhi]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-nhzhab4jhi]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-nhzhab4jhi]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-nhzhab4jhi] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-nhzhab4jhi] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-nhzhab4jhi] {
        display: none;
    }

    .nav-scrollable[b-nhzhab4jhi] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-dndg0sr2wt],
.components-reconnect-repeated-attempt-visible[b-dndg0sr2wt],
.components-reconnect-failed-visible[b-dndg0sr2wt],
.components-pause-visible[b-dndg0sr2wt],
.components-resume-failed-visible[b-dndg0sr2wt],
.components-rejoining-animation[b-dndg0sr2wt] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-dndg0sr2wt],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-dndg0sr2wt],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-dndg0sr2wt],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-dndg0sr2wt],
#components-reconnect-modal.components-reconnect-retrying[b-dndg0sr2wt],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-dndg0sr2wt],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-dndg0sr2wt],
#components-reconnect-modal.components-reconnect-failed[b-dndg0sr2wt],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-dndg0sr2wt] {
    display: block;
}


#components-reconnect-modal[b-dndg0sr2wt] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-dndg0sr2wt 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-dndg0sr2wt 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-dndg0sr2wt 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-dndg0sr2wt]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-dndg0sr2wt 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-dndg0sr2wt {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-dndg0sr2wt {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-dndg0sr2wt {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-dndg0sr2wt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-dndg0sr2wt] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-dndg0sr2wt] {
    border: 0;
    background-color: var(--primary-light);
    color: var(--primary-color);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-dndg0sr2wt] {
        background-color: var(--primary-color);
        color: white;
    }

    #components-reconnect-modal button:active[b-dndg0sr2wt] {
        background-color: var(--primary-dark);
        color: white;
    }

.components-rejoining-animation[b-dndg0sr2wt] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-dndg0sr2wt] {
        position: absolute;
        border: 3px solid var(--primary-color);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-dndg0sr2wt 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-dndg0sr2wt] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-dndg0sr2wt {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Payment/PaymentSuccess.razor.rz.scp.css */
/* ============================================================
   Payment result page.

   Every colour reads a theme token, so this follows whichever
   wwwroot/themes/{tenant}.css App.razor loaded — the same way the
   topup page does. Nothing here is hardcoded to one brand.
   ============================================================ */

/* Ring around the result icon. An emoji tick could not be recoloured (it
   carries its own palette), so the mark is a stroked SVG and this supplies
   the colour it inherits. */
.pay-mark[b-jgr0cm0xyq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 2px solid currentColor;
}

.pay-mark--ok[b-jgr0cm0xyq] {
    color: var(--ov-primary-accent, var(--success-color, #90C850));
    box-shadow: 0 0 24px rgba(144, 200, 80, 0.30),
                inset 0 0 18px rgba(144, 200, 80, 0.12);
}

/* Smaller than the success mark on purpose. A failure does not need to shout —
   the message underneath carries it, and an oversized red cross reads as an
   error the user caused rather than a payment that did not go through. */
.pay-mark--fail[b-jgr0cm0xyq] {
    width: 58px;
    height: 58px;
    color: var(--error-color, #FF8A8A);
    box-shadow: 0 0 20px rgba(255, 138, 138, 0.18),
                inset 0 0 14px rgba(255, 138, 138, 0.08);
}

/* White, not accent-coloured. The accent belongs to the mark and the button;
   a green heading on top of both was what made the page read as "all green". */
.pay-title[b-jgr0cm0xyq] {
    color: var(--ov-text-white, var(--text-main, #FFFFFF));
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 10px;
}

.pay-title--fail[b-jgr0cm0xyq] {
    color: var(--error-color, #FF8A8A);
}

.pay-msg[b-jgr0cm0xyq] {
    color: var(--ov-text-secondary, var(--text-muted, #B8C0CC));
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0 auto 28px;
    max-width: 520px;
}

/* Matches the card picker's selected button: accent fill, page-dark text. */
.pay-btn[b-jgr0cm0xyq] {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 15px 24px;
    border: 1px solid var(--ov-primary-accent, var(--primary-color, #90C850));
    border-radius: var(--border-radius, 16px);
    background-color: var(--ov-primary-accent, var(--primary-color, #90C850));
    color: var(--ov-on-primary-accent, var(--button-text-color, #011026));
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.pay-btn:hover[b-jgr0cm0xyq] {
    filter: brightness(1.08);
    box-shadow: 0 10px 28px rgba(144, 200, 80, 0.22);
}

@media (max-width: 600px) {
    .pay-mark[b-jgr0cm0xyq] {
        width: 62px;
        height: 62px;
    }

    .pay-title[b-jgr0cm0xyq] {
        font-size: 1.35rem;
    }

    .pay-msg[b-jgr0cm0xyq] {
        font-size: 0.98rem;
    }
}
/* /Components/Pages/Topup/CityMallTopup.razor.rz.scp.css */
/* ============================================================
   CityMall Topup — Exact Figma CSS Match
   ============================================================ */

/* Layout */
.citymall-layout[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #FFFFFF;
}

/* ============================================================
   HEADER — bg #12151F, padding 80px 80px 40px, gap 80px
   ============================================================ */
.citymall-header[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 80px 40px;
    gap: 80px;
    width: 100%;
    background: #12151F;
    box-sizing: border-box;
    position: relative;
}

/* Top bar: logo left, lang right, space-between, 1280px wide */
.header-top-bar[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    gap: 10px;
    width: 1280px;
    max-width: 100%;
    height: 24px;
}

.header-left[b-czmtzgrtyr] {
    flex: 0 0 auto;
}

.brand-logo[b-czmtzgrtyr] {
    width: 190px;
    height: 24px;
    display: block;
}

.header-right[b-czmtzgrtyr] {
    flex: 0 0 auto;
}

.lang-switcher[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    height: 16px;
}

.lang-btn[b-czmtzgrtyr] {
    width: 25px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    font-family: 'HMPangram', 'Fira Sans Georgian', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    color: #F6F6F6;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s;
}

.lang-btn.active[b-czmtzgrtyr] {
    opacity: 1;
}

.lang-btn:hover:not(.active)[b-czmtzgrtyr] {
    opacity: 0.8;
}

/* Header Middle: card image + text */
.header-middle[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 628px;
    max-width: 100%;
}

.card-and-text-wrapper[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    isolation: isolate;
    width: 628px;
    height: 80px;
    position: relative;
}

.card-container[b-czmtzgrtyr] {
    position: absolute;
    width: 300px;
    height: 188px;
    left: calc(50% - 150px);
    top: -104.5px;
    background: linear-gradient(180deg, rgba(18, 21, 31, 0) 0%, #12151F 65.43%);
    border-radius: 17.65px;
    overflow: hidden;
    z-index: 0;
}

.citymall-card-img[b-czmtzgrtyr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-info[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    width: 628px;
    height: 80px;
    z-index: 1;
}

[b-czmtzgrtyr] .brand-title {
    width: 628px;
    font-family: 'HMPangram', 'Fira Sans Georgian', 'Noto Sans Georgian', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 140%;
    text-align: center;
    color: #F6F6F6;
}

[b-czmtzgrtyr] .brand-subtitle {
    width: 628px;
    font-family: 'HMPangram', 'Fira Sans Georgian', 'Noto Sans Georgian', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 170%;
    text-align: center;
    color: #F6F6F6;
}

/* ============================================================
   MAIN — padding-top 60px (Main Container has padding 60px 0 0)
   ============================================================ */
.citymall-main[b-czmtzgrtyr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 200px;
}

/* ============================================================
   FORM WRAPPER — Content Container: 628px wide, gap 32px
   ============================================================ */
.topup-form-wrapper[b-czmtzgrtyr] {
    width: 628px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0; /* outer wrapper no gap — gaps handled inside content-container */
}

/* Content Container: gap 32px between major sections */
.content-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 628px;
}

/* ============================================================
   TABS — Money Chip Container (top of content)
   ============================================================ */
.tabs-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    width: 628px;
    margin-bottom: 32px;
}

.tab-btn[b-czmtzgrtyr] {
    flex: 1;
    width: 314px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    border: none;
    cursor: pointer;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    transition: background 0.2s, color 0.2s;
    /* Unselected */
    background: #F7F3EC;
    color: #12151F;
    border-bottom: 1px solid #AE823D;
    box-sizing: border-box;
}

.tab-btn.active[b-czmtzgrtyr] {
    background: #AE823D;
    color: #F7F3EC;
    border-bottom: none;
}

/* ============================================================
   VALIDATION ERRORS
   ============================================================ */

.input-field[b-czmtzgrtyr] {
    position: relative; /* container for absolute error msg */
}

.input-field.has-error .input-label[b-czmtzgrtyr] {
    color: var(--error-color, #D32F2F) !important;
}

.input-field.has-error .material-input[b-czmtzgrtyr]::placeholder {
    color: var(--error-color, #D32F2F) !important;
    opacity: 1; /* Override default placeholder opacity if any */
}

.validation-message[b-czmtzgrtyr] {
    position: absolute;
    bottom: -20px;
    left: 0;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    color: var(--error-color, #D32F2F);
    margin: 0;
    padding: 0;
}

.validation-message.static[b-czmtzgrtyr] {
    position: static;
    margin-top: 8px;
    display: block;
}
.sms-info-box[b-czmtzgrtyr] {
    width: 628px;
}

.sms-info-text[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: #41444C;
    margin: 0;
}

/* ============================================================
   DELIVERY TYPE (Physical tab)
   ============================================================ */
.delivery-type-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 628px;
}

.delivery-question[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 170%;
    color: #12151F;
}

.delivery-options[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.delivery-option[b-czmtzgrtyr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'HMPangram', sans-serif;
    font-size: 14px;
    color: #12151F;
    cursor: pointer;
}

.delivery-option input[type="radio"][b-czmtzgrtyr] {
    accent-color: #AE823D;
    width: 16px;
    height: 16px;
}

.delivery-info-box[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #F7F3EC;
    font-family: 'HMPangram', sans-serif;
    font-size: 12px;
    color: #585E62;
}

.delivery-info-box svg[b-czmtzgrtyr] {
    flex-shrink: 0;
}

.delivery-address-field[b-czmtzgrtyr] {
    margin-top: 12px;
}

.delivery-address-input[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
}

/* ============================================================
   FORM CONTAINER — gap 24px between card blocks and below sections
   ============================================================ */
.form-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 628px;
}

/* ============================================================
   CARD BLOCK — each repeater card (no background, just a gap container)
   ============================================================ */
.card-block[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 628px;
}

/* Card Header: golden bar — bg #C9AB7D, padding 4px 4px 4px 12px, h 50px */
.card-header[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 4px 4px 4px 12px;
    gap: 10px;
    width: 628px;
    height: 50px;
    background: #C9AB7D;
    box-sizing: border-box;
}

.card-header-left[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.card-header-title[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 170%;
    color: #F7F3EC;
}

.card-remove-btn[b-czmtzgrtyr] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 12px;
}

/* ============================================================
   USER INFO CONTAINER — flat, no background, gap 16px
   ============================================================ */
.user-info-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 628px;
}

/* Section label row: icon + bold text, height 24px */
.section-label-row[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 628px;
    height: 24px;
}

.section-label-text[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 170%;
    color: #12151F;
}

/* User Info Block: row of 2 fields, gap 24px, height 64px */
.user-info-block[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: 628px;
    height: 64px;
}

/* Input Field: border-bottom 0.5px solid #41444C, height 64px */
.input-field[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0px;
    flex: 1;
    height: 64px;
    border-bottom: 0.5px solid #41444C;
    box-sizing: border-box;
    position: relative;
    transition: border-bottom-color 0.2s ease-out;
}

.input-field:focus-within[b-czmtzgrtyr] {
    border-bottom-color: #C9AB7D;
}

.input-field.full-width[b-czmtzgrtyr] {
    width: 628px;
    flex: none;
}

.input-label[b-czmtzgrtyr] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    color: var(--Surface-Accent-On-Surface-Accent, #585E62);
    transition: all 0.2s ease-out;
    pointer-events: none;
}

.material-input:focus ~ .input-label[b-czmtzgrtyr],
.material-input:not(:placeholder-shown) ~ .input-label[b-czmtzgrtyr] {
    top: 17px;
    font-size: 14px;
    color: var(--Surface-Neutral-On-Surface-Base, #0D0F16);
}

/* Material input: placeholder color #585E62, no border, transparent bg */
.material-input[b-czmtzgrtyr] {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: var(--Surface-Accent-On-Surface-Accent, #585E62);
    padding: 0 0 8px 0;
    box-sizing: border-box;
}

.material-input[b-czmtzgrtyr]::placeholder {
    color: #585E62;
    line-height: normal;
    font-size: 13px;
}

/* Autofill overrides for User Info (matches #FFFFFF background) */
.user-info-container .material-input:-webkit-autofill[b-czmtzgrtyr],
.user-info-container .material-input:-webkit-autofill:hover[b-czmtzgrtyr], 
.user-info-container .material-input:-webkit-autofill:focus[b-czmtzgrtyr], 
.user-info-container .material-input:-webkit-autofill:active[b-czmtzgrtyr] {
    -webkit-box-shadow: 0 0 0 30px #FFFFFF inset !important;
    -webkit-text-fill-color: #12151F !important;
}

/* Autofill overrides for Recipient Info (matches #F7F3EC brown background) */
.recipient-info-container .material-input:-webkit-autofill[b-czmtzgrtyr],
.recipient-info-container .material-input:-webkit-autofill:hover[b-czmtzgrtyr], 
.recipient-info-container .material-input:-webkit-autofill:focus[b-czmtzgrtyr], 
.recipient-info-container .material-input:-webkit-autofill:active[b-czmtzgrtyr] {
    -webkit-box-shadow: 0 0 0 30px #F7F3EC inset !important;
    -webkit-text-fill-color: #12151F !important;
}

/* ============================================================
   RECIPIENT INFO CONTAINER — bg #F7F3EC, padding 24px 24px 32px, gap 16px
   ============================================================ */
.recipient-info-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 24px 32px;
    gap: 16px;
    width: 628px;
    background: #F7F3EC;
    box-sizing: border-box;
}

.recipient-info-header[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 580px; /* 628 - 48px (24px padding each side) */
    height: 24px;
}

/* Recipient row: 2 fields each 278px with gap 24px */
.recipient-info-block[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: 580px;
    height: 64px;
}

.input-field.recipient-field[b-czmtzgrtyr] {
    flex: 1;
    height: 64px;
    border-bottom: 0.5px solid #41444C;
}

/* ============================================================
   CARD BODY — amount + disclaimer, gap 24px
   ============================================================ */
.card-body[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 628px;
}

/* Gift Card Question Container: gap 16px */
.gift-card-question-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 628px;
}

/* Card Question Row: icon + texts side by side */
.card-question-row[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    width: 628px;
    height: auto;
}

.card-question-texts[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.card-question-bold[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 170%;
    color: #12151F;
    flex: 1;
}

.card-question-light[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: #585E62;
    flex: 0 0 auto;
}

/* Card Options: 6 chips, flex-row, gap 8px, height 44px */
.card-options[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    width: 628px;
    height: 44px;
}

/* Money Chip — unselected: bg #F7F3EC, border 1px solid #AE823D */
.money-chip[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    flex: 1;
    height: 44px;
    background: #F7F3EC;
    border: 1px solid #AE823D;
    cursor: pointer;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: #12151F;
    transition: background 0.15s, color 0.15s;
    box-sizing: border-box;
}

/* Money Chip — selected: bg #7C5C2B, no border */
.money-chip.active[b-czmtzgrtyr] {
    background: #7C5C2B;
    border: 1px solid #7C5C2B;
    color: #F7F3EC;
}

/* Custom amount field */
.custom-amount-field[b-czmtzgrtyr] {
    margin-top: 4px;
}

/* ============================================================
   LEGAL DISCLAIMER — bg #FCE7E6, padding 12px 24px, gap 8px centered
   ============================================================ */
.legal-disclaimer-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 628px;
}

.legal-disclaimer-content[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    gap: 8px;
    width: 628px;
    background: #FCE7E6;
    box-sizing: border-box;
}

.legal-text[b-czmtzgrtyr] {
    width: 580px;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    text-align: center;
    color: #A30806;
}

/* ============================================================
   ADDITIONAL CARD CONTAINER — centered, width 230px, padding 8px 0, gap 16px
   ============================================================ */
.additional-card-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 16px;
    width: 628px;
}

.additional-card-text[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: #585E62;
}

.additional-card-btn[b-czmtzgrtyr] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 42px;
    background: #F6F6F6;
    border: none;
    cursor: pointer;
}

/* ============================================================
   PAYMENT METHOD CONTAINER — gap 16px
   ============================================================ */
.payment-method-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 628px;
}

.payment-method-header[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    width: 628px;
    height: auto;
}

.payment-method-title[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 170%;
    color: #12151F;
    flex: 1;
}

/* Payment Options Container: gap 9px */
.payment-options-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 9px;
    width: 628px;
}

/* Payment Block: border 1px solid #C4C5C8, padding 16px 16px 16px 24px, gap 24px */
.payment-block[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 16px 16px 24px;
    gap: 24px;
    width: 628px;
    height: 94px;
    border: 1px solid #C4C5C8;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.payment-block.selected[b-czmtzgrtyr] {
    border-color: #AE823D;
    background: #FAF6EF;
}

.payment-block-details[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
}

.payment-block-texts[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
}

.payment-block-title[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 170%;
    color: #604822;
}

.payment-block-desc[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    color: #604822;
}

.payment-block-fee[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    color: #12151F;
    opacity: 0.5;
}

/* ============================================================
   AMOUNT BREAKDOWN — gap 16px (no outer box)
   ============================================================ */
.amount-breakdown-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 628px;
}

/* Card Value Row: space-between, height 24px */
.card-value-row[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 628px;
    height: 24px;
}

.breakdown-label[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: #585E62;
}

.breakdown-value[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #12151F;
}

/* Total Value Row: border-top 0.5px solid #41444C, padding 8px 0 0 */
.total-value-row[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0 0;
    width: 628px;
    border-top: 0.5px solid #41444C;
    box-sizing: border-box;
}

.total-left-label[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: #12151F;
}

.total-fee-breakdown[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.fee-label[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    color: #585E62;
}

.total-final-value[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    text-transform: uppercase;
    color: #12151F;
}

/* ============================================================
   AGREEMENT ROW — height 16px, gap 8px
   ============================================================ */
.agreements-wrapper[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 628px;
    margin-top: 16px; /* 24px gap from parent + 16px margin = 40px total */
}

.agreement-content[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-height: 16px;
}

.agreement-checkbox-label[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    width: 100%;
}

/* Checkbox: 16x16, border 1.33px solid #41444C (unchecked) */
.check-box[b-czmtzgrtyr] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1.33px solid #41444C;
    box-sizing: border-box;
    background: transparent;
    transition: background 0.15s, border-color 0.15s;
}

.check-box.checked[b-czmtzgrtyr] {
    background: #AE823D;
    border-color: #AE823D;
}

.agreement-text[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    color: #585E62;
    flex: 1;
}

/* ============================================================
   SUBMIT BUTTON — width 105px, height 48px, NOT full width
   ============================================================ */
.submit-btn-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 628px;
    margin-top: 8px; /* 24px gap + 8px = 32px distance */
}

.submit-btn[b-czmtzgrtyr] {
    width: 105px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    border: none;
    cursor: not-allowed;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    color: rgba(246, 246, 246, 0.24);
    background: linear-gradient(0deg, rgba(255,255,255,0.2), rgba(255,255,255,0.2)), #12151F;
    transition: all 0.2s;
}

.submit-btn.enabled[b-czmtzgrtyr] {
    background: #12151F;
    color: #F6F6F6;
    cursor: pointer;
}

.submit-btn:disabled[b-czmtzgrtyr] {
    cursor: not-allowed;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.footer-logo[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 0 80px;
    gap: 10px;
    width: 965px;
    height: 111.76px;
    margin: 0 0 -24px 0;
}

.footer-logo .logo[b-czmtzgrtyr] {
    width: 885px;
    height: 111.76px;
}

.footer-text-container[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    padding: 40px 10px;
    gap: 10px;
    width: 100%;
    background: #12151F;
    box-sizing: border-box;
    height: 200px;
}

.delivery-address-input[b-czmtzgrtyr] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'HMPangram', sans-serif;
    font-size: 14px;
    color: #12151F;
}

/* ============================================================
   DELIVERY INFO BOX
   ============================================================ */

.footer-text-container .link[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    color: #F6F6F6;
}

.footer-text-container .link:hover[b-czmtzgrtyr] {
    text-decoration: underline;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 700px) {
    .citymall-header[b-czmtzgrtyr] {
        padding: 40px 24px;
        gap: 40px;
    }

    .header-top-bar[b-czmtzgrtyr] {
        width: 100%;
    }

    .header-middle[b-czmtzgrtyr],
    .card-and-text-wrapper[b-czmtzgrtyr],
    [b-czmtzgrtyr] .brand-title,
    [b-czmtzgrtyr] .brand-subtitle,
    .header-info[b-czmtzgrtyr] {
        width: 100%;
    }

    .topup-form-wrapper[b-czmtzgrtyr],
    .content-container[b-czmtzgrtyr],
    .tabs-container[b-czmtzgrtyr],
    .form-container[b-czmtzgrtyr],
    .card-block[b-czmtzgrtyr],
    .card-header[b-czmtzgrtyr],
    .user-info-container[b-czmtzgrtyr],
    .section-label-row[b-czmtzgrtyr],
    .recipient-info-container[b-czmtzgrtyr],
    .recipient-info-header[b-czmtzgrtyr],
    .card-body[b-czmtzgrtyr],
    .gift-card-question-container[b-czmtzgrtyr],
    .card-question-row[b-czmtzgrtyr],
    .card-options[b-czmtzgrtyr],
    .legal-disclaimer-container[b-czmtzgrtyr],
    .legal-disclaimer-content[b-czmtzgrtyr],
    .additional-card-container[b-czmtzgrtyr],
    .payment-method-container[b-czmtzgrtyr],
    .payment-method-header[b-czmtzgrtyr],
    .payment-options-container[b-czmtzgrtyr],
    .payment-block[b-czmtzgrtyr],
    .amount-breakdown-container[b-czmtzgrtyr],
    .card-value-row[b-czmtzgrtyr],
    .total-value-row[b-czmtzgrtyr],
    .agreements-wrapper[b-czmtzgrtyr],
    .agreement-content[b-czmtzgrtyr],
    .submit-btn-container[b-czmtzgrtyr] {
        width: 100%;
        max-width: 100%;
    }

    .tab-btn[b-czmtzgrtyr] {
        width: 50%;
    }

    .user-info-block[b-czmtzgrtyr],
    .recipient-info-block[b-czmtzgrtyr] {
        flex-direction: column;
        height: auto;
        gap: 0;
    }

    .input-field[b-czmtzgrtyr],
    .input-field.recipient-field[b-czmtzgrtyr] {
        width: 100%;
        flex: none;
    }

    .footer-logo[b-czmtzgrtyr] {
        width: 100%;
        padding-left: 24px;
    }

    .footer-logo .logo[b-czmtzgrtyr] {
        width: 100%;
        height: auto;
    }
}
/* ============================================================
   OTP MODAL
   ============================================================ */
.otp-modal-overlay[b-czmtzgrtyr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #12151F33;
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.otp-modal[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 470px;
    height: 474px;
    background: #F6F6F6;
    border-radius: 8px; /* Added slight radius for modern look */
    overflow: hidden;
}

/* Top half */
.otp-modal-top[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    gap: 16px;
    width: 470px;
    height: 234px;
    background: #F7F3EC;
    box-sizing: border-box;
}

.otp-modal-header[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 42px;
}

.otp-modal-title[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    text-align: left;
    color: #12151F;
}

.otp-modal-close[b-czmtzgrtyr] {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transition: background 0.2s;
}
.otp-modal-close:hover[b-czmtzgrtyr] {
    background: rgba(0, 0, 0, 0.05);
}

.otp-modal-icon-container[b-czmtzgrtyr] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
}

.otp-modal-message[b-czmtzgrtyr] {
    width: 422px;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    text-align: center;
    color: #12151F;
}

/* Bottom half */
.otp-modal-bottom[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px 48px 24px;
    gap: 32px;
    width: 470px;
    height: 240px;
    box-sizing: border-box;
}

.otp-input-field[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    width: 374px;
    height: 64px;
    border-bottom: 0.5px solid #41444C;
}

.otp-input[b-czmtzgrtyr] {
    width: 100%;
    border: none;
    background: transparent;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #12151F;
    outline: none;
    padding: 0 0 8px 0;
    box-sizing: border-box;
}

.otp-input[b-czmtzgrtyr]::placeholder {
    color: #585E62;
    line-height: normal;
    font-size: 13px;
}

.otp-actions[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.otp-submit-btn[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    gap: 8px;
    width: 144px;
    height: 48px;
    background: #12151F;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    color: #F6F6F6;
    transition: background 0.2s;
}
.otp-submit-btn:hover[b-czmtzgrtyr] {
    background: #2a2d36;
}
.otp-submit-btn:disabled[b-czmtzgrtyr] {
    opacity: 0.5;
    cursor: not-allowed;
}

.otp-resend-btn[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    gap: 8px;
    height: 48px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    color: #12151F;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.otp-resend-btn:hover:not(:disabled)[b-czmtzgrtyr] {
    opacity: 0.8;
}
.otp-resend-btn:disabled[b-czmtzgrtyr] {
    cursor: not-allowed;
}

/* ============================================================
   BANK TRANSFER SUCCESS MODAL
   ============================================================ */
.bank-transfer-modal[b-czmtzgrtyr] {
    background: #F6F6F6;
    width: 846px;
    max-width: 90vw;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bank-modal-header[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 24px auto 16px;
    width: 798px;
    height: 42px;
}

.bank-modal-title[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #12151F;
    text-align: center;
    margin: 0;
}

.bank-modal-close[b-czmtzgrtyr] {
    background: none;
    border: none;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.bank-modal-desc[b-czmtzgrtyr] {
    width: 798px;
    height: 48px;
    margin: 0 auto 24px;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: #12151F;
}

.bank-modal-tabs[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    width: 846px;
    height: 74.8px;
    border-radius: 11px 11px 0px 0px;
    background: #F7F3EC;
}

.bank-tab[b-czmtzgrtyr] {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 24px;
    gap: 8px;
    height: 74.8px;
    background: #F7F3EC;
    border-radius: 0px;
    border: none;
    cursor: pointer;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: #604822;
    transition: background-color 0.2s;
}

.bank-tab.active[b-czmtzgrtyr] {
    background: #C9AB7D;
    font-weight: 700;
}

.bank-tab-logo[b-czmtzgrtyr] {
    height: 20px;
}

.bank-modal-content[b-czmtzgrtyr] {
    background: #FAFCFD;
    padding: 16px 64px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
}

.bank-detail-row[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    width: 718px;
    height: 24px;
}

.bank-detail-label[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: rgba(18, 21, 31, 0.5);
}

.bank-detail-label-bold[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: #585E62
    ;
}

.bank-detail-value[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: #12151F;
}

.bank-detail-value-group[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.copy-btn[b-czmtzgrtyr] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bank-detail-divider[b-czmtzgrtyr] {
    height: 0;
    width: 718px;
    border-top: 0.5px solid #C4C5C8;
    margin: 0;
}

.total-row[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0px 0px;
    width: 718px;
    border-top: 0.5px solid #41444C;
    height: auto;
}

.bank-total-group[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.bank-fee-text[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    color: #585E62;
    text-align: right;
}

.bank-total-value[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    color: #12151F;
    text-transform: uppercase;
}

.bank-modal-footer[b-czmtzgrtyr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 40px;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    background: #FAFCFD;
    border-top: 1px solid #C4C5C8;
    border-radius: 0px 0px 11px 11px;
}

.footer-title[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: #585E62;
    margin-bottom: 0;
}

.footer-text[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 170%;
    color: #585E62;
    margin: 0;
}

.footer-desc[b-czmtzgrtyr] {
    color: #8A9298;
}

.footer-text ul[b-czmtzgrtyr] {
    margin: 0;
    padding-left: 20px;
}

.fw-bold[b-czmtzgrtyr] {
    font-weight: 700 !important;
}

.text-dark[b-czmtzgrtyr] {
    color: #12151F !important;
}




.return-home-btn[b-czmtzgrtyr] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 32px;
    background: #2a2d36;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 130%;
    color: #F6F6F6;
    text-decoration: none;
    transition: background 0.2s;
    width: max-content;
    margin: 32px auto 0 auto;
}

.return-home-btn:hover[b-czmtzgrtyr] {
    background: #12151F;
}

/* ============================================================
   MOBILE RESPONSIVENESS
   ============================================================ */
@media (max-width: 768px) {
    .header-top-bar[b-czmtzgrtyr],
    .header-middle[b-czmtzgrtyr],
    .card-and-text-wrapper[b-czmtzgrtyr],
    [b-czmtzgrtyr] .brand-title,
    [b-czmtzgrtyr] .brand-subtitle,
    .topup-form-wrapper[b-czmtzgrtyr],
    .content-container[b-czmtzgrtyr],
    .tabs-container[b-czmtzgrtyr],
    .add-card-btn[b-czmtzgrtyr],
    .info-card[b-czmtzgrtyr],
    .divider[b-czmtzgrtyr],
    .payment-methods-grid[b-czmtzgrtyr],
    .submit-btn-container[b-czmtzgrtyr],
    .footer-container[b-czmtzgrtyr] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .citymall-header[b-czmtzgrtyr] {
        padding: 40px 20px 20px !important;
    }
    
    .citymall-main[b-czmtzgrtyr] {
        padding: 20px 20px 100px !important;
    }
    
    .bank-transfer-modal[b-czmtzgrtyr],
    .bank-modal-tabs[b-czmtzgrtyr],
    .bank-modal-content[b-czmtzgrtyr],
    .bank-modal-header[b-czmtzgrtyr],
    .bank-footer[b-czmtzgrtyr],
    .otp-modal-box[b-czmtzgrtyr] {
        width: 95% !important;
        max-width: 95% !important;
    }
    
    .card-fields[b-czmtzgrtyr] {
        flex-direction: column !important;
    }
    
    .card-input-wrapper[b-czmtzgrtyr] {
        width: 100% !important;
    }
    
    .card-amount-selector[b-czmtzgrtyr] {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    
    .amount-chip[b-czmtzgrtyr] {
        flex: 1 1 30% !important;
    }
    
    .delivery-form[b-czmtzgrtyr] {
        grid-template-columns: 1fr !important;
    }
    
    .input-field[b-czmtzgrtyr], .form-input[b-czmtzgrtyr], .textarea-input[b-czmtzgrtyr] {
        width: 100% !important;
    }
    
    .payment-methods-grid[b-czmtzgrtyr] {
        grid-template-columns: 1fr !important;
    }
    
    .bank-modal-tabs[b-czmtzgrtyr] {
        flex-direction: column !important;
        height: auto !important;
    }
    
    .bank-tab[b-czmtzgrtyr] {
        width: 100% !important;
        height: 48px !important;
        border-radius: 11px !important;
    }
    
    .bank-detail-row[b-czmtzgrtyr] {
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        gap: 8px !important;
        padding: 12px 0 !important;
    }
    
    .footer-links[b-czmtzgrtyr] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .otp-resend-btn[b-czmtzgrtyr], .otp-submit-btn[b-czmtzgrtyr], .return-home-btn[b-czmtzgrtyr] {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .card-container[b-czmtzgrtyr] {
        width: 220px !important;
        height: 138px !important;
        left: calc(50% - 110px) !important;
        top: -70px !important;
    }

    .card-and-text-wrapper[b-czmtzgrtyr] {
        overflow: visible !important; /* Stops the parent from clipping the card */
        height: 60px !important; /* Give enough room for the card to peek above */
    }

    .citymall-header[b-czmtzgrtyr] {
        overflow: visible !important; /* Same fix for the outer header */
        gap: 50px;
    }
}

@media (max-width: 768px) {
    [b-czmtzgrtyr] .brand-title {
        font-size: 18px !important;
    }
    [b-czmtzgrtyr] .brand-subtitle {
        font-size: 12px !important;
    }
    
    .user-info-block[b-czmtzgrtyr], .recipient-info-block[b-czmtzgrtyr] {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        gap: 0 !important;
    }
    
    .input-field[b-czmtzgrtyr], .recipient-field[b-czmtzgrtyr] {
        width: 100% !important;
        height: 64px !important; /* Keep original height for inputs to allow label and input room */
    }
}

@media (max-width: 768px) {
    /* Make brand title & subtitle even smaller */
    [b-czmtzgrtyr] .brand-title {
        font-size: 14px !important;
    }
    [b-czmtzgrtyr] .brand-subtitle {
        font-size: 11px !important;
    }

    /* Make card even smaller */
    .card-container[b-czmtzgrtyr] {
        width: 160px !important;
        height: 100px !important;
        left: calc(50% - 80px) !important;
        top: -60px !important;
    }
    .card-and-text-wrapper[b-czmtzgrtyr] {
        height: 40px !important;
    }

    /* Fix the red box (legal disclaimer) overlapping issue */
    .legal-disclaimer-container[b-czmtzgrtyr], .legal-disclaimer-content[b-czmtzgrtyr] {
        height: auto !important;
        min-height: 48px;
    }
    .legal-disclaimer-content[b-czmtzgrtyr] {
        padding: 12px 16px !important;
        align-items: center !important;
    }
}

@media (max-width: 768px) {
    .legal-text[b-czmtzgrtyr] {
        width: 100% !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    .sms-info-box[b-czmtzgrtyr] {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .brand-logo[b-czmtzgrtyr] {
        width: 130px !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    /* Make brand logo even smaller */
    .brand-logo[b-czmtzgrtyr] {
        width: 110px !important;
    }

    /* Make city mall card SVG smaller */
    .card-container[b-czmtzgrtyr] {
/*        width: 140px !important;
        height: 88px !important;*/
/*        left: calc(50% - 70px) !important;*/
        top: -50px !important;
    }
    
    /* Move the text block further up */
    .header-info[b-czmtzgrtyr] {
        margin-top: -24px !important;
    }
}

@media (max-width: 768px) {
    .delivery-type-container[b-czmtzgrtyr] {
        width: 100% !important;
    }
    .input-field.full-width[b-czmtzgrtyr] {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .footer-logo[b-czmtzgrtyr] {
        width: 90% !important;
        align-self: center;
        padding: 0 !important;
        height: auto !important;
        margin-bottom: -9px!important;
    }
    
    .footer-logo .logo[b-czmtzgrtyr] {
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    /* Center and resize the OTP modal for mobile */
    .otp-modal[b-czmtzgrtyr] {
        width: 90% !important;
        max-width: 360px !important;
        height: auto !important;
    }
    
    .otp-modal-top[b-czmtzgrtyr] {
        width: 100% !important;
        height: auto !important;
        padding: 20px 16px !important;
    }
    
    .otp-modal-bottom[b-czmtzgrtyr] {
        width: 100% !important;
        height: auto !important;
        padding: 20px 16px 24px !important;
    }
    
    .otp-modal-message[b-czmtzgrtyr] {
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    .otp-input-field[b-czmtzgrtyr] {
        width: 100% !important;
    }
    
    .otp-submit-btn[b-czmtzgrtyr], .otp-resend-btn[b-czmtzgrtyr] {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    /* --- Bank Transfer Modal Mobile Fixes --- */
    .bank-modal-header[b-czmtzgrtyr] {
        width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    .bank-modal-desc[b-czmtzgrtyr] {
        width: 100% !important;
        height: auto !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        margin-bottom: 16px !important;
    }
    
    .bank-modal-tabs[b-czmtzgrtyr] {
        width: 100% !important;
        height: auto !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important; /* Allow side-scrolling if many banks */
    }
    
    .bank-tab[b-czmtzgrtyr] {
        padding: 12px 12px !important;
        height: auto !important;
        font-size: 13px !important;
        flex: 1 1 auto !important;
    }
    
    .bank-modal-content[b-czmtzgrtyr] {
        width: 100% !important;
        padding: 16px !important;
    }
    
    .bank-modal-footer[b-czmtzgrtyr] {
        width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    
    .bank-detail-row[b-czmtzgrtyr] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
    }
    
    .bank-detail-label[b-czmtzgrtyr], .bank-detail-value[b-czmtzgrtyr] {
        width: 100% !important;
        text-align: left !important;
        word-break: break-all;
    }
}

@media (max-width: 768px) {
    /* Aggressive overrides for Bank Modal Mobile Layout */
    .bank-modal-box[b-czmtzgrtyr] {
        width: 95% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .bank-modal-tabs[b-czmtzgrtyr] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: auto !important;
    }

    .bank-tab[b-czmtzgrtyr] {
        flex: 1 1 50% !important;
        width: 50% !important;
        padding: 12px 4px !important;
        height: auto !important;
        font-size: 13px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .bank-detail-row[b-czmtzgrtyr],
    .bank-detail-divider[b-czmtzgrtyr],
    .total-row[b-czmtzgrtyr] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .bank-detail-row[b-czmtzgrtyr] {
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        padding: 12px 0 !important;
        gap: 8px !important;
    }

    .bank-detail-value-group[b-czmtzgrtyr] {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .total-row[b-czmtzgrtyr] {
        flex-direction: row !important;
        padding: 12px 0 !important;
    }
}

@media (max-width: 768px) {
    /* === BANK TRANSFER MODAL - FULL MOBILE REWRITE === */
    .bank-transfer-modal[b-czmtzgrtyr] {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .bank-modal-header[b-czmtzgrtyr] {
        width: 100% !important;
        height: auto !important;
        padding: 16px 16px 0 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .bank-modal-desc[b-czmtzgrtyr] {
        width: 100% !important;
        height: auto !important;
        margin: 12px 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
    }

    /* --- Bank Switch Tabs (pill style) --- */
    .bank-modal-tabs[b-czmtzgrtyr] {
        width: calc(100% - 32px) !important;
        margin: 0 16px 0 16px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        border-radius: 50px !important;
        background: #F0E8D8 !important;
        padding: 4px !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    .bank-tab[b-czmtzgrtyr] {
        flex: 1 !important;
        height: 40px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        border-radius: 50px !important;
        background: transparent !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        transition: background 0.2s, color 0.2s !important;
    }

    .bank-tab.active[b-czmtzgrtyr] {
        background: #C9AB7D !important;
        font-weight: 700 !important;
    }

    .bank-tab-logo[b-czmtzgrtyr] {
        height: 16px !important;
        width: auto !important;
    }

    /* --- Content area --- */
    .bank-modal-content[b-czmtzgrtyr] {
        width: 100% !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    .bank-detail-row[b-czmtzgrtyr] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 10px 0 !important;
        border-bottom: 0.5px solid #EBEBEB !important;
        box-sizing: border-box !important;
    }

    .bank-detail-row.total-row[b-czmtzgrtyr] {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-top: 1px solid #41444C !important;
        border-bottom: none !important;
        padding-top: 12px !important;
    }

    .bank-detail-label[b-czmtzgrtyr],
    .bank-detail-label-bold[b-czmtzgrtyr] {
        font-size: 12px !important;
        color: #8A9298 !important;
    }

    .bank-detail-value[b-czmtzgrtyr] {
        font-size: 14px !important;
        word-break: break-all !important;
    }

    .bank-detail-value-group[b-czmtzgrtyr] {
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .bank-detail-divider[b-czmtzgrtyr] {
        display: none !important;
    }

    /* --- Footer info --- */
    .bank-modal-footer[b-czmtzgrtyr] {
        width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    .footer-text[b-czmtzgrtyr] {
        font-size: 12px !important;
        line-height: 160% !important;
    }

    .return-home-btn[b-czmtzgrtyr] {
        width: 100% !important;
        text-align: center !important;
        margin-top: 12px !important;
    }
}

@media (max-width: 768px) {
    .tab-btn[b-czmtzgrtyr] {
        height: auto !important;
        min-height: 44px !important;
        line-height: 1.2 !important;
        padding: 8px 6px !important;
        font-size: 13px !important;
    }
}

/* Terms Modal CSS */
.terms-link[b-czmtzgrtyr] {
    text-decoration: underline;
    cursor: pointer;
    color: #12151F;
}

.terms-link:hover[b-czmtzgrtyr] {
    color: #585E62;
}

.terms-modal-overlay[b-czmtzgrtyr] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(18, 21, 31, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.terms-modal[b-czmtzgrtyr] {
    background: #FFFFFF;
    border-radius: 16px;
    width: 800px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.terms-modal-header[b-czmtzgrtyr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #E1E3E6;
}

.terms-modal-title[b-czmtzgrtyr] {
    font-family: 'HMPangram', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #12151F;
}

.terms-modal-close[b-czmtzgrtyr] {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.terms-modal-content[b-czmtzgrtyr] {
    padding: 24px;
    overflow-y: auto;
    font-family: 'HMPangram', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #12151F;
}

.terms-loading-spinner[b-czmtzgrtyr] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #12151F;
    animation: spin-b-czmtzgrtyr 1s ease infinite;
    margin: 40px auto;
}

@keyframes spin-b-czmtzgrtyr {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .terms-modal[b-czmtzgrtyr] {
        width: 95vw;
        max-height: 95vh;
    }
}

.header-bg-svg-container[b-czmtzgrtyr] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.header-bg-svg-container[b-czmtzgrtyr]  svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.brand-logo-svg[b-czmtzgrtyr] {
    width: 190px;
    height: 24px;
    display: block;
    z-index: 0;
}
.brand-logo-svg[b-czmtzgrtyr]  svg {
    width: 100%;
    height: 100%;
}
.citymall-card-svg[b-czmtzgrtyr] {
    width: 100%;
    height: 100%;
}
.citymall-card-svg[b-czmtzgrtyr]  svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Static fallback assets, used when the DB banner is unavailable. These are
   written directly in the component rather than injected as MarkupString, so
   they carry the scope attribute and must NOT use ::deep like the rules above. */
.brand-logo-svg img[b-czmtzgrtyr] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.citymall-card-svg img[b-czmtzgrtyr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .brand-logo-svg[b-czmtzgrtyr] {
        width: 110px !important;
        height: auto !important;
    }
}


/* /Components/Pages/Topup/StandardTopup.razor.rz.scp.css */
/* ============================================================
   Shared topup layout — component styles, used by every tenant except
   City Mall. Colours come entirely from the --ov-* custom properties each
   theme defines in wwwroot/themes/{tenant}.css. See THEMING_GUIDE.md.

   TEXT ON FILLED CONTROLS
   Most type uses --ov-text-white. Buttons filled with --ov-primary-dark or
   --ov-primary-accent instead use --ov-on-primary-dark / --ov-on-primary-accent,
   which fall back to --ov-text-white when a theme does not set them. A theme
   only needs them if one of those two fills contrasts differently from the
   page — e.g. a light page with a black button, where the page type is black
   but the button type must be white.

   WHAT THE TWO FILL TOKENS MEAN
   Despite the names, the roles are:
     --ov-primary-accent  the BRAND colour. Every .active state, the submit and
                          OTP buttons, section icons, spinners and the checkbox
                          accent-color. This is the one that should be "the
                          tenant's colour".
     --ov-primary-dark    neutral chrome. Unselected tabs and pills, the dial-code
                          badge, the bank tabs.
   So a selected control is always the accent and an unselected one is always
   the neutral. (.ov-amount-pill used to have these the wrong way round and was
   the only control that did; it was corrected to match.)
   ============================================================ */

.outletvillage-layout[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background-color: var(--ov-bg-dark);
    color: var(--ov-text-white);
    /* the footer is the last child and brings its own padding-bottom, so
       an extra 80px here just stacked up as dead space under the logo */
    padding-bottom: 0;
    box-sizing: border-box;
    width: 100%;
    font-family: var(--ov-font);
}

/* Header Bar — Full Width Edge-to-Edge */
.ov-header[b-e0py3tjymf] {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 80px 40px;
    box-sizing: border-box;
}

.ov-logo[b-e0py3tjymf] {
    display: flex;
    align-items: center;
}

.ov-logo img[b-e0py3tjymf],
.ov-logo svg[b-e0py3tjymf] {
    width: 99px;
    height: 39px;
    max-width: 100%;
    display: block;
    /* both dimensions are fixed now, so contain keeps the artwork from
       stretching if its natural ratio isn't exactly 99:39 */
    object-fit: contain;
}

.ov-lang-switcher[b-e0py3tjymf] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ov-lang-btn[b-e0py3tjymf] {
    width: 58px;
    height: 30px;
    /* Deliberately NOT the matched-border treatment used by the tabs /
       payment cards / amount pills. The unselected fill is the same colour
       as the header behind it, so the visible light border is what defines
       the button — and it keeps the control looking slim. */
    background: var(--ov-lang-bg, var(--ov-primary-dark));
    border: 2px solid var(--ov-lang-border, var(--ov-primary-accent));
    color: var(--ov-on-primary-dark, var(--ov-text-white));
    border-radius: 10px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.ov-lang-btn.active[b-e0py3tjymf] {
    background: var(--ov-primary-accent);
    border-color: var(--ov-primary-accent);
    color: var(--ov-on-primary-accent, var(--ov-text-white));
}


/* ============================================================
   Card picker — default site only (no fixed branch).

   Replaces the old "ობიექტი" dropdown: the card you pick IS the branch the
   order is created against. Every colour reads from an --ov-* token so a tenant
   theme can restyle it; the fallbacks are the PayUnicard palette.
   ============================================================ */

.ov-picker[b-e0py3tjymf] {
    width: 100%;
    /* Wider than the 1050px form below it on purpose: four cards side by side
       need the room, and the header above is full-bleed with 80px sides, so this
       sits between the two rather than looking pinched against either. */
    max-width: 1600px;
    margin: -12px auto 48px;
    padding: 0 60px;
    box-sizing: border-box;
    text-align: center;
}

.ov-picker-title[b-e0py3tjymf] {
    margin: 0 0 12px;
    font-family: inherit;
    font-size: 58px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    /* The two halves sit on their own lines at every width, as in the design. */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ov-picker-title-white[b-e0py3tjymf] {
    color: var(--ov-text-white, #FFFFFF);
}

.ov-picker-title-accent[b-e0py3tjymf] {
    color: var(--ov-primary-accent, #90C850);
}

.ov-picker-subtitle[b-e0py3tjymf] {
    margin: 0 0 40px;
    font-size: 22px;
    font-weight: 350;
    color: var(--ov-text-secondary, #B8C0CC);
}

/* "რომელი ბარათი გინდა?" with a rule either side, as in the design. */
.ov-picker-prompt[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 24px;
    font-weight: 500;
    color: var(--ov-text-white, #FFFFFF);
}

/* Short green rules, fading outward, rather than full-width grey ones. */
.ov-picker-prompt[b-e0py3tjymf]::before,
.ov-picker-prompt[b-e0py3tjymf]::after {
    content: "";
    flex: 0 0 auto;
    width: clamp(56px, 11vw, 210px);
    height: 2px;
    border-radius: 1px;
}

.ov-picker-prompt[b-e0py3tjymf]::before {
    background: linear-gradient(to right, transparent, var(--ov-primary-accent, #90C850));
}

.ov-picker-prompt[b-e0py3tjymf]::after {
    background: linear-gradient(to left, transparent, var(--ov-primary-accent, #90C850));
}


/* Gift mark under the prompt, flanked by its own rules. Uses the neon green,
   which the palette reserves for icons. */
.ov-picker-gift[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 25px;
    color: var(--ov-icon-accent, var(--ov-primary-accent, #A8E000));
}

/* Shorter than the rules beside the prompt above, so the two rows read as a
   hierarchy rather than repeating the same mark twice. */
.ov-picker-gift[b-e0py3tjymf]::before,
.ov-picker-gift[b-e0py3tjymf]::after {
    content: "";
    flex: 0 0 auto;
    width: clamp(34px, 6vw, 115px);
    height: 2px;
    border-radius: 1px;
}

.ov-picker-gift[b-e0py3tjymf]::before {
    background: linear-gradient(to right, transparent, var(--ov-primary-accent, #90C850));
}

.ov-picker-gift[b-e0py3tjymf]::after {
    background: linear-gradient(to left, transparent, var(--ov-primary-accent, #90C850));
}



/* ---- gift icon idle animation ----

   One 5s cycle that is doing nothing for the first ~68% of its length. All the
   movement is packed into the tail, so the icon reads as occasionally noticing
   you rather than bouncing continuously — the bounce is the exception, the still
   frame is the default.

   Keeping it to a single long keyframe rather than a short one on a delay loop
   means the browser schedules one animation, and the beat stays in step with the
   sparkles for free. */
.ov-gift-box[b-e0py3tjymf] {
    /* fill-box so the scale pivots on the drawing, not the padded viewBox. The
       origin sits low, so the box squashes onto its base like a real bounce. */
    transform-box: fill-box;
    transform-origin: 50% 72%;
    animation: ov-gift-nudge-b-e0py3tjymf 5s ease-in-out infinite;
}

@keyframes ov-gift-nudge-b-e0py3tjymf {
    0%, 68% {
        translate: 0 0;
        scale: 1;
        filter: none;
    }

    /* Anticipation: a small squash before the lift. */
    71% {
        translate: 0 1%;
        scale: 1.06 0.94;
    }

    /* Up, with the glow at full strength. */
    77% {
        translate: 0 -13%;
        scale: 0.96 1.06;
        filter: drop-shadow(0 0 7px rgba(168, 224, 0, 0.85));
    }

    /* Land, squash again but less. */
    84% {
        translate: 0 0;
        scale: 1.04 0.96;
        filter: drop-shadow(0 0 4px rgba(168, 224, 0, 0.4));
    }

    /* A smaller second hop, then settle. */
    89% {
        translate: 0 -5%;
        scale: 1 1.02;
    }

    94%, 100% {
        translate: 0 0;
        scale: 1;
        filter: none;
    }
}

.ov-gift-spark[b-e0py3tjymf] {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: ov-gift-spark-b-e0py3tjymf 5s ease-in-out infinite;
}

/* The right sparkle trails the left one slightly, so they pop in sequence
   rather than as one symmetrical flash. */
.ov-gift-spark--r[b-e0py3tjymf] {
    animation-name: ov-gift-spark-late-b-e0py3tjymf;
}

@keyframes ov-gift-spark-b-e0py3tjymf {
    0%, 72% {
        opacity: 0;
        scale: 0.4;
    }

    79% {
        opacity: 1;
        scale: 1.15;
    }

    90%, 100% {
        opacity: 0;
        scale: 0.5;
    }
}

@keyframes ov-gift-spark-late-b-e0py3tjymf {
    0%, 76% {
        opacity: 0;
        scale: 0.4;
    }

    83% {
        opacity: 0.9;
        scale: 1.1;
    }

    93%, 100% {
        opacity: 0;
        scale: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ov-gift-box[b-e0py3tjymf],
    .ov-gift-spark[b-e0py3tjymf] {
        animation: none;
    }

    /* Without the animation the sparkles would sit at opacity 0 forever, so show
       them steadily instead of leaving the mark looking clipped. */
    .ov-gift-spark[b-e0py3tjymf] {
        opacity: 0.8;
    }
}

/* The chosen card, alone above the row. Its own container rather than a grid
   cell, so it can be a different width from the three below without the grid
   fighting it. */
.ov-picker-grid[b-e0py3tjymf] {
    display: grid;
    /* SelectCard scrolls here on desktop. The margin keeps the row off the very
       top of the viewport. */
    scroll-margin-top: 28px;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: stretch;
    /* Inset from the section, so the heading above still spans the full width
       while the cards themselves come in and slim down. */
    max-width: 1120px;
    margin: 0 auto;
}

.ov-picker-card[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px 22px;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: var(--ov-card-bg, #0A172B);
    border: 1px solid var(--ov-border-color, #26364C);
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

/* The chosen card stays lit after the page scrolls down to the form, so it is
   still obvious which one the form below belongs to. */
.ov-picker-card.selected[b-e0py3tjymf] {
    position: relative;
    z-index: 1;
    border-color: var(--ov-primary-accent, #90C850);
    /* Outer bloom plus an inset wash, so the green reads as light filling the
       card rather than a ring drawn around it. inset shadows paint over the
       background but under the content, so the artwork and type stay clean. */
    box-shadow: 0 0 0 1px var(--ov-primary-accent, #90C850),
                0 0 20px rgba(144, 200, 80, 0.28),
                inset 0 0 22px rgba(144, 200, 80, 0.10),
                inset 0 0 60px rgba(144, 200, 80, 0.05);
}

/* Desktop only — 641px is the range where the four cards share a row and have mouse hover */
@media (min-width: 641px) {
    .ov-picker-card:hover[b-e0py3tjymf] {
        transform: translateY(-6px);
        border-color: var(--ov-icon-accent, var(--ov-primary-accent, #A8E000));
        box-shadow: 0 15px 45px rgba(144, 200, 80, 0.15);
    }

    .ov-picker-card.selected[b-e0py3tjymf] {
        transform: translateY(-10px) scale(1.04);
        box-shadow: 0 0 0 1px var(--ov-primary-accent, #90C850),
                    0 0 18px rgba(144, 200, 80, 0.50),
                    0 0 52px rgba(144, 200, 80, 0.30),
                    0 0 96px rgba(144, 200, 80, 0.16),
                    0 20px 46px rgba(0, 0, 0, 0.45),
                    inset 0 0 26px rgba(144, 200, 80, 0.13),
                    inset 0 0 70px rgba(144, 200, 80, 0.06);
    }

    /* Lifted further on hover */
    .ov-picker-card.selected:hover[b-e0py3tjymf] {
        transform: translateY(-16px) scale(1.04);
        box-shadow: 0 0 0 1px var(--ov-icon-accent, var(--ov-primary-accent, #A8E000)),
                    0 0 22px rgba(144, 200, 80, 0.60),
                    0 0 64px rgba(144, 200, 80, 0.36),
                    0 0 120px rgba(144, 200, 80, 0.20),
                    0 26px 56px rgba(0, 0, 0, 0.5),
                    inset 0 0 30px rgba(144, 200, 80, 0.17),
                    inset 0 0 80px rgba(144, 200, 80, 0.08);
    }

    /* Desktop only, so the mobile carousel never sees any of this.

       The lead card takes a row to itself and centres in it. grid-column is the
       whole trick: it needs no separate container, which is what lets the same
       markup become a flat horizontal carousel on a phone — flex ignores
       grid-column and justify-self outright.

       Two classes, so it matches .ov-picker-card.selected on specificity, and it
       is declared after it so it wins the transform. That matters: .selected
       lifts a card 10px to separate it from its neighbours in a shared row, and
       alone on its own row there is nothing to separate from — the lift would
       only crowd the row beneath. */
    .ov-picker-card.ov-picker-card--featured[b-e0py3tjymf] {
        grid-column: 1 / -1;
        justify-self: center;
        width: 100%;
        /* Close to the row cards rather than dominating: a taller lead card
           pushes the other three off the fold, and the point of this layout is
           that you can see there are more. */
        max-width: 340px;
        margin-bottom: 8px;
        transform: scale(1);
    }

    .ov-picker-card.ov-picker-card--featured:hover[b-e0py3tjymf] {
        transform: translateY(-6px);
    }

    /* The bigger bloom belongs to the SELECTION, not the position — so it only
       lights up while this card is the chosen one. Alone on its row it has no
       neighbour to bleed onto, which is what capped the in-row glow, so it can
       spread considerably further. */
    .ov-picker-card--featured.selected[b-e0py3tjymf] {
        box-shadow: 0 0 0 1px var(--ov-icon-accent, var(--ov-primary-accent, #A8E000)),
                    0 0 26px rgba(144, 200, 80, 0.62),
                    0 0 72px rgba(144, 200, 80, 0.40),
                    0 0 150px rgba(144, 200, 80, 0.24),
                    0 24px 60px rgba(0, 0, 0, 0.5),
                    inset 0 0 32px rgba(144, 200, 80, 0.18),
                    inset 0 0 86px rgba(144, 200, 80, 0.09);
    }

    .ov-picker-card--featured.selected:hover[b-e0py3tjymf] {
        box-shadow: 0 0 0 1px var(--ov-icon-accent, var(--ov-primary-accent, #A8E000)),
                    0 0 34px rgba(144, 200, 80, 0.75),
                    0 0 92px rgba(144, 200, 80, 0.48),
                    0 0 180px rgba(144, 200, 80, 0.28),
                    0 30px 72px rgba(0, 0, 0, 0.55),
                    inset 0 0 38px rgba(144, 200, 80, 0.22),
                    inset 0 0 100px rgba(144, 200, 80, 0.11);
    }
}

/* ---- not-yet-available card ----

   Greyed rather than hidden: the brand is still worth advertising, it just
   cannot be ordered yet. Only the artwork is desaturated — dimming the whole
   card would take the name and button with it and make the tile look broken
   rather than pending. */
.ov-picker-card--soon .ov-picker-art img[b-e0py3tjymf] {
    filter: grayscale(0.85) brightness(0.62);
}

.ov-picker-card--soon .ov-picker-name[b-e0py3tjymf] {
    color: var(--ov-text-secondary, #B8C0CC);
}

.ov-picker-card--soon .ov-picker-btn[b-e0py3tjymf] {
    color: var(--ov-text-muted, #B8C0CC);
    border-color: var(--ov-border-color, #26364C);
    cursor: not-allowed;
}

/* No accent fill on hover — that would promise it is orderable. The border
   lifting slightly is enough to show the button still responds. */
.ov-picker-card--soon .ov-picker-btn:hover[b-e0py3tjymf] {
    background-color: transparent;
    color: var(--ov-text-secondary, #B8C0CC);
    border-color: var(--ov-text-muted, #B8C0CC);
}

/* The card itself does not light up or lift on hover either.

   Doubled class deliberately: the desktop hover rules live in a later media
   block at the same specificity, so a single .ov-picker-card--soon:hover would
   lose the cascade and the greyed card would still lift and glow. */
.ov-picker-card.ov-picker-card--soon:hover[b-e0py3tjymf] {
    transform: none;
    border-color: var(--ov-border-color, #26364C);
    box-shadow: none;
}

/* Tooltip above the Order button, the same treatment the disabled physical-card
   tab uses.

   Unlike that tab this button is NOT disabled, for two reasons: a disabled
   button fires no click, so a tap on a phone would do nothing at all, and :hover
   never matches on touch — between them the notice would be unreachable on
   mobile. So the button stays live, PickCard refuses the selection, and the
   tooltip shows on hover (desktop) or once tapped (.soon-shown, set in C#). */
.ov-picker-card--soon .ov-picker-btn[b-e0py3tjymf] {
    position: relative;
}

.ov-picker-card--soon .ov-picker-btn:hover[b-e0py3tjymf]::after,
.ov-picker-card--soon.soon-shown .ov-picker-btn[b-e0py3tjymf]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    z-index: 20;
    padding: 7px 14px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    background-color: var(--ov-primary-dark, #0A172B);
    border: 1px solid var(--ov-icon-accent, var(--ov-primary-accent, #A8E000));
    color: var(--ov-text-white, #FFFFFF);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.45));
}

.ov-picker-art[b-e0py3tjymf] {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    /* Holds the row height steady while the card SVGs load, so the grid does not
       jump. 1.585 is the physical card ratio every card asset is drawn at. */
    aspect-ratio: 1.585;
}

.ov-picker-art img[b-e0py3tjymf] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ov-picker-name[b-e0py3tjymf] {
    margin: 0 0 20px;
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    color: var(--ov-text-white, #FFFFFF);
}

.ov-picker-desc[b-e0py3tjymf] {
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 350;
    line-height: 1.45;
    color: var(--ov-text-secondary, #B8C0CC);
    /* Pushes the button to the bottom so all four line up regardless of how many
       lines the description runs to. */
    flex: 1 1 auto;
}

.ov-picker-btn[b-e0py3tjymf] {
    display: flex;
    /* Bottom-aligned regardless of whether this card has a description above it
       — .ov-picker-desc used to do this with flex: 1, but cards without one have
       no spacer at all. */
    margin-top: auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    box-sizing: border-box;
    border: 1px solid var(--ov-border-color, #26364C);
    border-radius: 12px;
    background-color: transparent;
    color: var(--ov-text-white, #FFFFFF);
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

/* The arrow is animated separately from the button so it can move on a hover of
   the CARD, not just of the button itself -- otherwise it would sit still while
   everything around it responds. */
.ov-picker-btn svg[b-e0py3tjymf] {
    transition: transform 300ms ease;
}

.ov-picker-card:hover .ov-picker-btn svg[b-e0py3tjymf] {
    transform: translateX(4px);
}

.ov-picker-btn:hover[b-e0py3tjymf] {
    background-color: var(--ov-primary-accent, #90C850);
    border-color: var(--ov-primary-accent, #90C850);
    color: var(--ov-on-primary-accent, #011026);
}

/* The selected card's button is filled, matching the design's lead card. */
.ov-picker-card.selected .ov-picker-btn[b-e0py3tjymf] {
    background-color: var(--ov-primary-accent, #90C850);
    border-color: var(--ov-primary-accent, #90C850);
    color: var(--ov-on-primary-accent, #011026);
}

/* Hover is user-initiated, so the colour feedback stays — only the movement
   goes. Declared after the hover rules so it actually overrides them. */
@media (prefers-reduced-motion: reduce) {
    .ov-picker-card[b-e0py3tjymf],
    .ov-picker-btn svg[b-e0py3tjymf] {
        transition: none;
    }

    .ov-picker-card:hover[b-e0py3tjymf] {
        transform: none;
    }

    /* Being selected is a state, not an animation: the card stays enlarged, it
       just no longer travels or animates into it. Dropping the lift keeps the
       movement out; keeping the scale keeps the meaning in. */
    .ov-picker-card.selected[b-e0py3tjymf],
    .ov-picker-card.selected:hover[b-e0py3tjymf] {
        transform: scale(1.04);
    }

    .ov-picker-card:hover .ov-picker-btn svg[b-e0py3tjymf] {
        transform: none;
    }
}

.ov-picker-error[b-e0py3tjymf] {
    margin-top: 20px;
    text-align: center;
}

@media (max-width: 1100px) {
    .ov-picker[b-e0py3tjymf] {
        padding: 0 40px;
        margin-top: 16px;
    }

    .ov-picker-title[b-e0py3tjymf] {
        font-size: 40px;
    }

    .ov-picker-grid[b-e0py3tjymf] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ov-picker[b-e0py3tjymf] {
        padding: 0 16px;
        margin-top: 24px;
        margin-bottom: 32px;
        overflow: visible;
    }

    .ov-picker-title[b-e0py3tjymf] {
        font-size: 30px;
    }

    .ov-picker-subtitle[b-e0py3tjymf] {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .ov-picker-prompt[b-e0py3tjymf] {
        font-size: 18px;
        gap: 12px;
    }

    .ov-picker-grid[b-e0py3tjymf] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 12px 6px 20px 6px;
        margin: 0;
        scrollbar-width: thin;
        scrollbar-color: var(--ov-primary-accent, #90C850) transparent;
    }

    .ov-picker-grid[b-e0py3tjymf]::-webkit-scrollbar {
        height: 5px;
    }

    .ov-picker-grid[b-e0py3tjymf]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }

    .ov-picker-grid[b-e0py3tjymf]::-webkit-scrollbar-thumb {
        background-color: var(--ov-primary-accent, #90C850);
        border-radius: 4px;
    }

    .ov-picker-card[b-e0py3tjymf] {
        flex: 0 0 270px;
        width: 270px;
        scroll-snap-align: start;
        padding: 20px 16px 18px;
        box-sizing: border-box;
        transform: none;
    }

    .ov-picker-card:hover[b-e0py3tjymf],
    .ov-picker-card:active[b-e0py3tjymf],
    .ov-picker-card:focus[b-e0py3tjymf] {
        transform: none;
    }

    .ov-picker-card.selected[b-e0py3tjymf],
    .ov-picker-card.selected:hover[b-e0py3tjymf],
    .ov-picker-card.selected:active[b-e0py3tjymf],
    .ov-picker-card.selected:focus[b-e0py3tjymf] {
        transform: scale(1.02);
        border-color: var(--ov-primary-accent, #90C850);
        box-shadow: 0 0 0 1px var(--ov-primary-accent, #90C850),
                    0 0 18px rgba(144, 200, 80, 0.28);
    }
}

/* Sachukardi Custom Hero Section */
.sachukardi-hero[b-e0py3tjymf] {
    width: 100%;
    max-width: 1400px;
    margin: 10px auto 40px;
    padding: 0 80px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.sachukardi-hero-content[b-e0py3tjymf] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.sachukardi-hero-text[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 50%;
}

.sachukardi-hero-title[b-e0py3tjymf] {
    font-size: 58px;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-family: inherit;
    font-feature-settings: "case" 1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.sachukardi-title-white[b-e0py3tjymf] {
    color: #FFFFFF;
}

.sachukardi-title-green[b-e0py3tjymf] {
    color: var(--ov-primary-accent, #90C850);
}

.sachukardi-hero-subtitle[b-e0py3tjymf] {
    font-size: 26px;
    font-weight: 400;
    color: var(--ov-text-secondary, #D9D9D9);
    margin: 0;
    line-height: 1.35;
    opacity: 0.95;
    font-family: inherit;
}

.sachukardi-hero-image[b-e0py3tjymf] {
    flex: 1 1 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 650px;
}

.sachukardi-hero-image .sk-art[b-e0py3tjymf] {
    width: 100%;
    height: auto;
    max-height: 400px;
}

@media (max-width: 1100px) {
    .sachukardi-hero[b-e0py3tjymf] {
        padding: 0 40px;
    }

    .sachukardi-hero-title[b-e0py3tjymf] {
        font-size: 44px;
    }

    .sachukardi-hero-subtitle[b-e0py3tjymf] {
        font-size: 20px;
    }

    .sachukardi-hero-image[b-e0py3tjymf] {
        max-width: 480px;
    }
}

@media (max-width: 900px) {
    .sachukardi-hero[b-e0py3tjymf] {
        padding: 0 24px;
        margin-bottom: 24px;
    }

    .sachukardi-hero-content[b-e0py3tjymf] {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    .sachukardi-hero-title[b-e0py3tjymf] {
        font-size: 34px;
        justify-content: center;
    }

    .sachukardi-hero-subtitle[b-e0py3tjymf] {
        font-size: 18px;
    }

    .sachukardi-hero-image[b-e0py3tjymf] {
        justify-content: center;
        max-width: 360px;
    }
}

/* Hero Banner — Exact Figma Proportions (2789px x 1450px) */
.ov-hero-banner[b-e0py3tjymf] {
    width: 100%;
    margin: 0 0 60px 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    background: var(--ov-bg-dark);
}

.ov-hero-banner img[b-e0py3tjymf] {
    width: 100%;
    height: auto;
    aspect-ratio: 2789 / 1450;
    object-fit: cover;
    display: block;
}

/* From 1280px up, the ratio-driven height runs away with the viewport
   (100vw ÷ 1.923 ≈ 998px at 1920px — nearly a full screen). Above that
   breakpoint the height is capped instead, and object-fit crops the excess
   off the TOP: the gift card sits in the lower half of the artwork, so
   anchoring to the bottom keeps the subject while the shoulders and
   background above slide out of view as the screen gets wider.

   THE KNOB FOR "CROP MORE" IS --hero-h. Lower it and the banner gets
   shorter, taking the extra off the top. (--hero-grow only controls how
   fast it grows on wider screens; it can never make the banner shorter
   than --hero-h, which is why turning it down alone does nothing.)

   --hero-h    — height at the breakpoint. 665px is the ratio-driven height
                 at exactly 1200px, so at that value nothing jumps when you
                 resize across the breakpoint; go lower and you trade a
                 small step at 1200px for a shorter banner.
   --hero-grow — extra px of height per px of viewport width beyond the
                 breakpoint. 0 = perfectly flat, 0.52 = the old runaway rate.
   --hero-max  — ceiling for ultra-wide monitors.
   --hero-anchor — where the visible window sits over the image.
                 100% = bottom-anchored, so everything cropped comes off the
                 top. Lower it to slide the window up: more of the top shows
                 and the difference gets trimmed off the bottom instead.
                 50% = crop split evenly top and bottom. */
@media (min-width: 1200px) {
    .ov-hero-banner img[b-e0py3tjymf] {
        --hero-h: 500px;
        --hero-grow: 0;
        --hero-max: 820px;
        --hero-anchor: 100%;
        /* Ceiling relative to screen HEIGHT, not width. Without this the
           banner is 500px on every wide screen regardless of how short it
           is, so on a laptop it eats the space the form title and tabs need.
           52vh crosses 500px at ~960px of viewport height, so tall screens
           keep the full 500px and only shorter ones scale down. */
        --hero-vh: 52vh;

        aspect-ratio: auto;
        /* min() not clamp(): above the breakpoint (100vw - 1200px) is never
           negative, so --hero-h is already the floor. The old clamp() had a
           second, duplicate 665px as its low bound, which pinned the height
           at 665px no matter what the other numbers said. */
        height: min(calc(var(--hero-h) + (100vw - 1200px) * var(--hero-grow)), var(--hero-max), var(--hero-vh));
        object-position: center var(--hero-anchor);
    }
}

/* From 1440px the image is scaled wide enough that bottom-anchoring hides a
   lot of the frame off the top. Pull the anchor back so the window slides up
   over the image: more of the top becomes visible and a little gets trimmed
   off the bottom instead. Height is untouched — only the crop position moves.
   Lower --hero-anchor to reveal even more top (the gift card stays in frame
   down to roughly 70%). */
@media (min-width: 1440px) {
    .ov-hero-banner img[b-e0py3tjymf] {
        --hero-anchor: 85%;
    }
}

/* Laptops: wide enough to miss the mobile breakpoint, but short enough that
   the generous desktop spacing pushes the title and tabs below the fold.
   The vertical padding/margins above the form are tuned for a ~950px-tall
   screen; here they're trimmed to buy back ~124px.

   min-width guard: phones (incl. landscape) are also short, but they have
   their own spacing in the max-width: 768px block — this must not fight it. */
@media (max-height: 850px) and (min-width: 769px) {
    .ov-header[b-e0py3tjymf] {
        padding: 24px 80px 20px;
    }

    .ov-hero-banner[b-e0py3tjymf] {
        margin-bottom: 24px;
    }

    .ov-form-container[b-e0py3tjymf] {
        padding-top: 32px;
    }

    .ov-card-title[b-e0py3tjymf] {
        margin-bottom: 16px;
    }
}

/* Main Form Container (Rectangle 179: width 2099px, border-radius 100px) */
.ov-form-container[b-e0py3tjymf] {
    width: 100%;
    max-width: 1050px;
    background: var(--ov-card-bg);
    border-radius: 80px;
    padding: 60px 80px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    position: relative;
    box-sizing: border-box;
    margin-top: 12px;
}

/* Section Title */
.ov-card-title[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'HMPangram', 'Noto Sans Georgian', 'FiraGO', sans-serif;
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--ov-text-white);
    text-transform: uppercase;
    font-feature-settings: "case" 1;
    letter-spacing: -0.02em;
}

.ov-card-title svg[b-e0py3tjymf] {
    /* Icon is 113x82 (~1.38:1), so size by height and let width follow —
       forcing the old 44x44 square would squash it. */
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   Selectable surfaces — unselected = light blue, selected = dark blue
   ------------------------------------------------------------ */

/* Tabs (Rectangle 177 & 178) */
.ov-tabs[b-e0py3tjymf] {
    display: flex;
    /* Defaults to flex-start; a tenant whose form has no title above the tabs
       can centre them instead by setting --ov-tabs-justify. */
    justify-content: var(--ov-tabs-justify, flex-start);
    gap: 20px;
    margin-bottom: 24px;
}

.ov-tab-btn[b-e0py3tjymf] {
    flex: 0 1 var(--ov-tab-basis, 240px);
    height: var(--ov-tab-height, 44px);
    padding: 0 20px;
    border-radius: 14px;
    /* light border on the dark unselected fill, so it stays visible
       (little outline) without matching the fill */
    border: 2px solid var(--ov-tab-border, var(--ov-primary-accent));
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--ov-tab-font-size, 14px);
    font-weight: 600;
    /* Fixed px line-height (not unitless) so the gap between the
       physical-card label's two wrapped lines is an exact 20px. */
    line-height: 20px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background-color: var(--ov-tab-bg, var(--ov-primary-dark));
    color: var(--ov-on-primary-dark, var(--ov-text-white));
}

.ov-tab-btn.active[b-e0py3tjymf] {
    background-color: var(--ov-primary-accent);
    border-color: var(--ov-primary-accent);
    color: var(--ov-on-primary-accent, var(--ov-text-white));
}

/* Physical ordering is not live yet for digital-flow tenants (Sachukardi).
   The tab stays in place so the row does not reflow, greyed and inert.

   Note it is greyed with colours rather than opacity on purpose: opacity applies
   to the whole element including its ::after, which would fade the tooltip too. */
.ov-tab-btn:disabled[b-e0py3tjymf] {
    position: relative;
    cursor: not-allowed;
    color: var(--ov-text-muted, #9EA3AF);
    border-color: var(--ov-border-color, #3A4050);
    background-color: var(--ov-tab-bg, var(--ov-primary-dark));
}

/* A title attribute would not appear here — browsers suppress tooltips on
   disabled controls — but :hover still matches a disabled element, so the hint
   is drawn from data-tip instead. .ov-tabs sets no overflow, so this is free to
   sit above the row. */
.ov-tab-btn:disabled:hover[b-e0py3tjymf]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 20;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    background-color: var(--ov-card-bg, #1B1F2D);
    border: 1px solid var(--ov-border-color, #3A4050);
    color: var(--ov-text-white, #FFFFFF);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.45));
}

/* Reuses the delivery-option radio pattern, just tightened up — it sits directly
   above its explanatory text rather than above a field. */
.ov-digital-modes[b-e0py3tjymf] {
    margin-bottom: 16px;
}

/* Hover only affects the UNSELECTED tab — the active one already stands
   out via its dark fill, so it doesn't need its own hover treatment. */
.ov-tab-btn:not(.active):hover[b-e0py3tjymf] {
    background-color: var(--ov-hover-dark, #2A3050); /* one step lighter than --ov-primary-dark */
}

/* Delivery type radios (physical card tab) */
.ov-delivery-options[b-e0py3tjymf] {
    display: flex;
    gap: 32px;
    margin-bottom: 20px;
}

.ov-delivery-option[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: var(--ov-text-white);
    cursor: pointer;
}

.ov-delivery-option input[b-e0py3tjymf] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--ov-primary-accent);
    cursor: pointer;
}

/* Info Box */
.ov-info-text[b-e0py3tjymf] {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ov-text-secondary, var(--ov-text-white));
    margin-bottom: 36px;
    font-weight: 350;
}

/* Form Section Header */
.ov-section-header[b-e0py3tjymf] {
    font-size: 20px;
    font-weight: 700;
    color: var(--ov-text-white);
    margin-bottom: 16px;
    margin-top: 30px;
}

/* Recipient block sits further down, so it reads as a separate person's
   details rather than a continuation of the sender's fields above. */
.ov-section-header--gap[b-e0py3tjymf] {
    margin-top: 56px;
}

/* A smaller bump than --gap, for headers that just need a little more
   breathing room from whatever came before them. */
.ov-section-header--mt-lg[b-e0py3tjymf] {
    margin-top: 44px;
}

/* ------------------------------------------------------------
   Inputs — narrower / shorter than full-bleed
   ------------------------------------------------------------ */
.ov-input-grid[b-e0py3tjymf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, var(--ov-field-width)));
    justify-content: start;
    gap: 140px;
    margin-bottom: 20px;
}

.ov-input-grid.full-width[b-e0py3tjymf] {
    grid-template-columns: minmax(0, var(--ov-field-width));
}

.ov-field-group[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ov-field-label[b-e0py3tjymf] {
    font-size: 16px;
    font-weight: 350;
    color: var(--ov-text-white);
}

/* HMPangram has no 400 face, so the shared label's 350-weight resolves to
   the thin 300 Light — bump this one label to the actual Medium (500) face
   so it reads clearly rather than washing out against the dark card. */
.ov-field-label--emphasis[b-e0py3tjymf] {
    font-weight: 500;
}

/* ------------------------------------------------------------
   Validation
   ------------------------------------------------------------ */
.ov-terms-link[b-e0py3tjymf] {
    color: var(--ov-primary-accent);
    text-decoration: underline;
    cursor: pointer;
}

.ov-validation-message[b-e0py3tjymf] {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ov-error, #FF8A8A); /* readable red on the dark card, unlike a pure #D32F2F */
    margin-top: 2px;
}

/* Guidance under a phone field once a number has been typed: muted, not the red
   validation colour, because it is not an error.

   "Once typed" is done in CSS rather than with @bind:event="oninput". Live
   binding in Blazor Server means a round-trip per keystroke, and on a weak
   mobile connection a controlled input can then drop or reorder characters —
   not a risk worth taking on a phone number. :placeholder-shown reads as "is
   this field empty" (the inputs carry placeholder=" " for exactly this), and
   :has() lifts that answer up to the field group.

   Default is visible, hidden only when empty, so a browser without :has()
   support falls back to always showing the hint rather than never showing it. */
.ov-phone-hint[b-e0py3tjymf] {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 350;
    color: var(--ov-text-muted, #9EA3AF);
}

.ov-field-group:has(.ov-phone-wrap .ov-input:placeholder-shown) .ov-phone-hint[b-e0py3tjymf] {
    display: none;
}

/* .has-error is also the hook scrollToFirstError() in ui-helpers.js
   looks for, so it must sit on the outer field wrapper. */
.ov-field-group.has-error .ov-input[b-e0py3tjymf],
.ov-field-group.has-error .ov-phone-wrap[b-e0py3tjymf] {
    outline: 2px solid var(--ov-error, #FF8A8A);
    outline-offset: 0;
}

.ov-amount-grid.has-error .ov-amount-pill:not(.active)[b-e0py3tjymf] {
    border-color: var(--ov-error, #FF8A8A);
}

.ov-payment-methods.has-error .ov-pm-card:not(.active)[b-e0py3tjymf] {
    border-color: var(--ov-error, #FF8A8A);
}

/* the 50-5000 hint turns red when the entered amount is out of range */
.ov-amount-hint.has-limit-error[b-e0py3tjymf] {
    color: var(--ov-error, #FF8A8A);
}

.ov-input[b-e0py3tjymf] {
    background-color: var(--ov-input-bg);
    color: var(--ov-input-text);
    border: var(--ov-input-border, none);
    border-radius: var(--ov-input-radius);
    height: var(--ov-input-height);
    padding: 0 18px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    outline: none;
    width: 100%;
    max-width: var(--ov-field-width);
    box-sizing: border-box;
}

.ov-input[b-e0py3tjymf]::placeholder {
    color: var(--ov-placeholder-color, var(--ov-muted, #9EA3AF));
    opacity: 1;
}



/* Wraps .ov-phone-wrap + the custom dial-code dropdown list. position:relative
   so the list can anchor to it, and — unlike .ov-phone-wrap — NOT overflow:
   hidden, so the open list isn't clipped by the wrap's own corner-clipping. */
.ov-phone-field[b-e0py3tjymf] {
    position: relative;
    width: 100%;
    max-width: var(--ov-field-width);
}

/* Phone field: "GE +995" badge must never wrap or shrink */
.ov-phone-wrap[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    background-color: var(--ov-input-bg);
    border: var(--ov-input-border, none);
    border-radius: var(--ov-input-radius);
    overflow: hidden;
    height: var(--ov-input-height);
    width: 100%;
    box-sizing: border-box;
}

/* A <button> now (custom dropdown trigger), not a <select> — a native
   select's popup can't be styled cross-browser (no rounded corners, no
   control over row height), so the list itself is hand-built below. */
.ov-phone-badge[b-e0py3tjymf] {
    /* Figma 193px wide @ the container's 0.5 scale. min-width (not width)
       so the badge can never clip if the face renders wider than expected. */
    flex: 0 0 auto;
    min-width: 96px;
    background-color: var(--ov-phone-badge-bg, var(--ov-primary-dark));
    color: var(--ov-on-primary-dark, var(--ov-text-white));
    font-family: inherit;
    font-size: 19px;         /* Figma 38px @ container scale 0.5 */
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;     /* keeps "GE +995" on one line */
    height: 100%;
    padding: 0 20px 0 10px;  /* extra right padding clears the caret below */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-align-last: center; /* Chrome/Firefox: centers the closed select's value */
    /* Right side only. The left stays square so it runs flush into the
       wrap's own rounded corner, which overflow:hidden then clips —
       rounding it here instead left a sliver of the wrap's light
       background visible in the corner. */
    border-radius: 0 var(--ov-input-radius) var(--ov-input-radius) 0;
    box-sizing: border-box;
    border: none;
    border-right: var(--ov-input-border, none);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 9px 6px;
}

/* Invisible click-catcher behind the open list — clicking anywhere outside
   the list closes it. Sits below the list in z-index but above the page. */
.ov-dialcode-overlay[b-e0py3tjymf] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: default;
}

/* The dropdown list — fully ours to style now, unlike a native <select>'s
   popup. max-height + overflow-y is the actual fix for "too tall": it caps
   the list instead of letting every option push it further down the page. */
.ov-dialcode-list[b-e0py3tjymf] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 41;
    min-width: 130px;
    max-height: 240px;
    overflow-y: auto;
    background-color: var(--ov-input-bg);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.ov-dialcode-option[b-e0py3tjymf] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ov-input-text);
    cursor: pointer;
    white-space: nowrap;
}

.ov-dialcode-option:hover[b-e0py3tjymf],
.ov-dialcode-option.active[b-e0py3tjymf] {
    background-color: var(--ov-primary-accent);
}

.ov-phone-wrap .ov-input[b-e0py3tjymf] {
    background: transparent;
    border-radius: 0;
    height: 100%;
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
}

/* Payment Methods */
.ov-payment-methods[b-e0py3tjymf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 30px;
}

.ov-pm-card[b-e0py3tjymf] {
    /* Trying the flipped scheme: unselected = no fill, just a border;
       selected = light blue fill (what unselected used to have). */
    background-color: var(--ov-pm-bg, transparent);
    border: 2px solid var(--ov-pm-border, var(--ov-primary-accent));
    border-radius: 20px;
    padding: 15px 24px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
    color: var(--ov-text-white);
}

.ov-pm-card.active[b-e0py3tjymf] {
    background-color: var(--ov-pm-active-bg, var(--ov-primary-accent));
    border-color: var(--ov-primary-accent);
    color: var(--ov-pm-active-text, var(--ov-on-primary-accent, var(--ov-text-white)));
}

/* icon on the left, label + note stacked beside it */
.ov-pm-title[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
}

/* the label/note column that sits next to the icon */
.ov-pm-titletext[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ov-pm-icon[b-e0py3tjymf] {
    /* sized by height, not width, so the portrait bank icon (63x61) and the
       landscape card icon (80x58) read as the same visual size */
    height: 30px;
    width: auto;
    flex-shrink: 0;
    color: inherit; /* drives the paths' fill="currentColor" */
}

/* Secondary line on both cards ("BOG ან TBC BANK",
   "გადამისამართება გადახდის გვერდზე") — matches .ov-pm-subtitle's size */
.ov-pm-note[b-e0py3tjymf] {
    font-size: 13px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    color: var(--ov-text-secondary, inherit);
}

/* "საკომისიო: 3.00₾ (ფიქსირებული)" — a step above the subtitle, Bold 700 */
.ov-pm-fee[b-e0py3tjymf] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.ov-pm-subtitle[b-e0py3tjymf] {
    font-size: 13px;
    opacity: 0.9;
    color: var(--ov-text-secondary, inherit);
}

/* Amount Pills */
.ov-amount-grid[b-e0py3tjymf] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 30px;
}

/* Was the one control using the two fills the other way round to the tabs and
   payment cards — unselected on the accent, selected on the neutral. Now it
   matches everything else: neutral when unselected, accent when selected. */
.ov-amount-pill[b-e0py3tjymf] {
    background: var(--ov-amount-bg, var(--ov-primary-dark));
    color: var(--ov-on-primary-dark, var(--ov-text-white));
    border: 2px solid var(--ov-amount-border, var(--ov-primary-dark));
    border-radius: 16px;
    height: 40px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ov-amount-pill.active[b-e0py3tjymf] {
    background-color: var(--ov-amount-active-bg, var(--ov-primary-accent));
    border-color: var(--ov-primary-accent);
    color: var(--ov-amount-active-text, var(--ov-on-primary-accent, var(--ov-text-white)));
}

/* Wraps every card after the first in a visible box, so additional cards
   read as clearly separate from one another. The 44px gap that used to
   live on .ov-card-header's margin-top now lives here instead, outside
   the border, so the border doesn't enclose a big empty gap before the
   header. */
.ov-card-block[b-e0py3tjymf] {
    margin-top: 44px;
    padding: 24px;
    border: 2px solid var(--ov-card-block-border, var(--ov-primary-dark));
    border-radius: 24px;
}

/* Only shown once a 2nd card exists, so card 1 never carries an
   unnecessary label + remove button when there's nothing to distinguish
   it from or remove. */
.ov-card-header[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ov-card-header-left[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ov-card-header-icon[b-e0py3tjymf] {
    /* overrides the width/height attributes set on the <svg> in markup */
    width: 26px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ov-primary-accent);
}

.ov-card-header-title[b-e0py3tjymf] {
    font-size: 20px;
    font-weight: 700;
    color: var(--ov-text-white);
}

.ov-card-remove-btn[b-e0py3tjymf] {
    background: none;
    border: none;
    padding: 4px;
    color: var(--ov-primary-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Small icon in front of a section header (Recipient Details / Gift Card
   Amount) — the plain .ov-section-header stays block-level everywhere else,
   this modifier only switches it to a row when an icon is present. */
.ov-section-header--icon[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ov-section-header--icon svg[b-e0py3tjymf] {
    flex-shrink: 0;
    color: var(--ov-primary-accent);
}

.ov-amount-hint[b-e0py3tjymf] {
    font-size: 13px;
    font-weight: 350;
    color: var(--ov-text-muted, rgba(255, 255, 255, 0.6));
    margin-bottom: 14px;
}

/* "Order another card" — centered, button below the text */
.ov-additional-card-container[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 20px;
    text-align: center;
}

.ov-additional-card-text[b-e0py3tjymf] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ov-text-white);
}

.ov-additional-card-btn[b-e0py3tjymf] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--ov-primary-accent);
    border: none;
    color: var(--ov-primary-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ov-additional-card-btn:hover[b-e0py3tjymf] {
    opacity: 0.85;
}

/* Summary Box */
.ov-summary-box[b-e0py3tjymf] {
    padding: 20px 24px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ov-summary-row[b-e0py3tjymf] {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: var(--ov-text-secondary, var(--ov-text-white));
}

.ov-summary-row.total[b-e0py3tjymf] {
    font-size: 18px;
    font-weight: 700;
    color: var(--ov-text-white);
    border-top: 1px solid var(--ov-divider-color, rgba(255, 255, 255, 0.2));
    padding-top: 10px;
    margin-top: 4px;
}

/* Checkboxes */
.ov-checkbox-group[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

.ov-checkbox-label[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--ov-text-white);
    cursor: pointer;
}

.ov-checkbox-label input[b-e0py3tjymf] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--ov-primary-accent);
    cursor: pointer;
}

/* Submit Button */
.ov-submit-btn[b-e0py3tjymf] {
    width: 220px;
    height: 43px;
    background-color: var(--ov-primary-accent);
    color: var(--ov-on-primary-accent, var(--ov-text-white));
    border: none;
    border-radius: 16px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ov-submit-btn:hover[b-e0py3tjymf] {
    opacity: 0.9;
}

.ov-submit-btn:disabled[b-e0py3tjymf] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Footer */
.ov-footer[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    margin-top: 80px;
    padding: 40px 0;
    text-align: center;
    width: 100%;
    background-color: var(--ov-bg-dark);
}

/* One line, edge to edge, at every desktop width: the size is viewport
   relative so the text scales down as the window narrows instead of
   wrapping. 5.8vw is derived from this string's measured width-to-font
   ratio in HMPangram (~16.6x) plus a safety margin; justify then stretches
   it the last few px to fill exactly. nowrap guarantees the single line.
   Mobile switches back to a fixed size that may wrap, via the 768px block. */
.ov-footer-tagline[b-e0py3tjymf] {
    width: 100%;
    box-sizing: border-box;
    font-size: 5.8vw;
    font-weight: 400;
    color: var(--ov-text-white);
    text-transform: uppercase;
    white-space: nowrap;
    text-align: justify;
    text-align-last: justify;
}

/* ============================================================
   OTP modal
   These classes are also used by CityMallTopup, but its styles live in
   CityMallTopup.razor.css — Blazor scopes that file to that component, so
   none of it reaches this page. Re-declared here in the Outlet palette.
   ============================================================ */
.otp-modal-overlay[b-e0py3tjymf] {
    position: fixed;
    inset: 0;
    background: rgba(12, 14, 26, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1000;
}

.otp-modal[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 470px;
    background: var(--ov-card-bg);
    border: 2px solid var(--ov-primary-dark);
    border-radius: 24px;
    overflow: hidden;
    font-family: var(--ov-font);
    color: var(--ov-text-white);
}

.otp-modal-top[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--ov-primary-dark);
    box-sizing: border-box;
}

.otp-modal-header[b-e0py3tjymf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.otp-modal-title[b-e0py3tjymf] {
    font-size: 18px;
    font-weight: 700;
    color: var(--ov-text-white);
}

.otp-modal-close[b-e0py3tjymf] {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    color: var(--ov-text-white);
    transition: background 0.2s ease;
}

.otp-modal-close:hover[b-e0py3tjymf] {
    background: rgba(255, 255, 255, 0.12);
}

/* the close icon ships with a hardcoded dark stroke — override it so the
   X is visible on the dark header */
.otp-modal-close svg path[b-e0py3tjymf] {
    stroke: currentColor;
}

.otp-modal-icon-container[b-e0py3tjymf] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ov-primary-accent);
}

.otp-modal-message[b-e0py3tjymf] {
    font-size: 15px;
    font-weight: 350;
    line-height: 1.6;
    text-align: center;
    color: var(--ov-text-white);
}

.otp-modal-bottom[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 28px 40px 32px;
    box-sizing: border-box;
}

.otp-input-field[b-e0py3tjymf] {
    width: 100%;
}

.otp-input[b-e0py3tjymf] {
    width: 100%;
    height: var(--ov-input-height);
    padding: 0 18px;
    background-color: var(--ov-input-bg);
    color: var(--ov-input-text);
    border: none;
    border-radius: var(--ov-input-radius);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    outline: none;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: 0.1em;
}

.otp-input[b-e0py3tjymf]::placeholder {
    color: var(--ov-muted, #6C7080);
    letter-spacing: 0;
}

.otp-actions[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.otp-submit-btn[b-e0py3tjymf] {
    width: 200px;
    height: 48px;
    background-color: var(--ov-primary-accent);
    color: var(--ov-on-primary-accent, var(--ov-text-white));
    border: none;
    border-radius: 16px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.otp-submit-btn:hover:not(:disabled)[b-e0py3tjymf] {
    opacity: 0.9;
}

.otp-submit-btn:disabled[b-e0py3tjymf] {
    opacity: 0.4;
    cursor: not-allowed;
}

.otp-resend-btn[b-e0py3tjymf] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 350;
    color: var(--ov-primary-accent);
    text-decoration: underline;
    padding: 4px;
}

.otp-resend-btn:disabled[b-e0py3tjymf] {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: none;
}

.otp-modal .error-alert[b-e0py3tjymf] {
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    color: var(--ov-error, #FF8A8A);
    text-align: center;
}

/* ============================================================
   Bank transfer + terms modals
   Same scoped-CSS situation as the OTP modal above: these classes are
   only defined in CityMallTopup.razor.css, so nothing reached this page.
   ============================================================ */
.bank-transfer-modal[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 32px 40px;
    box-sizing: border-box;
    background: var(--ov-card-bg);
    border: 2px solid var(--ov-primary-dark);
    border-radius: 24px;
    font-family: var(--ov-font);
    color: var(--ov-text-white);
}

.bank-modal-header[b-e0py3tjymf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.bank-modal-title[b-e0py3tjymf] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--ov-text-white);
}

.bank-modal-close[b-e0py3tjymf] {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
    color: var(--ov-text-white);
    transition: background 0.2s ease;
}

.bank-modal-close:hover[b-e0py3tjymf] {
    background: rgba(255, 255, 255, 0.12);
}

/* icon ships with a hardcoded brown stroke — invisible on the dark card */
.bank-modal-close svg path[b-e0py3tjymf] {
    stroke: currentColor;
}

.bank-modal-desc[b-e0py3tjymf] {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 350;
    line-height: 1.6;
    color: var(--ov-text-white);
}

.bank-modal-tabs[b-e0py3tjymf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}

.bank-tab[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    background-color: var(--ov-primary-dark);
    border: 2px solid var(--ov-primary-accent);
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ov-on-primary-dark, var(--ov-text-white));
    transition: all 0.2s ease;
}

.bank-tab.active[b-e0py3tjymf] {
    background-color: var(--ov-primary-accent);
    border-color: var(--ov-primary-accent);
}

/* without this the raw logos render at natural size — the TBC png is huge */
.bank-tab-logo[b-e0py3tjymf] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
}

.bank-modal-content[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.bank-detail-row[b-e0py3tjymf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}

.bank-detail-label[b-e0py3tjymf],
.bank-detail-label-bold[b-e0py3tjymf] {
    color: var(--ov-text-white);
    flex-shrink: 0;
}

.bank-detail-label[b-e0py3tjymf] {
    font-weight: 350;
}

.bank-detail-label-bold[b-e0py3tjymf] {
    font-weight: 700;
}

.bank-detail-value[b-e0py3tjymf] {
    font-weight: 500;
    color: var(--ov-text-white);
    word-break: break-all;
    text-align: right;
}

.bank-detail-value-group[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bank-detail-divider[b-e0py3tjymf] {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 4px 0;
}

.copy-btn[b-e0py3tjymf] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.copy-btn:hover[b-e0py3tjymf] {
    background: rgba(255, 255, 255, 0.12);
}

.bank-detail-row.total-row[b-e0py3tjymf] {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 12px;
    margin-top: 4px;
    align-items: flex-start;
}

.bank-total-group[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.bank-fee-text[b-e0py3tjymf] {
    font-size: 12px;
    font-weight: 350;
    color: var(--ov-primary-accent);
}

.bank-total-value[b-e0py3tjymf] {
    font-size: 18px;
    font-weight: 700;
    color: var(--ov-text-white);
}

.bank-modal-footer[b-e0py3tjymf] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-title[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ov-text-white);
    margin-bottom: 10px;
}

.footer-title svg[b-e0py3tjymf] {
    flex-shrink: 0;
    fill: var(--ov-primary-accent);
}

.footer-text[b-e0py3tjymf] {
    font-size: 12px;
    line-height: 1.6;
    color: var(--ov-text-white);
}

.footer-desc[b-e0py3tjymf] {
    font-weight: 350;
}

.return-home-btn[b-e0py3tjymf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-top: 20px;
    background-color: var(--ov-primary-accent);
    color: var(--ov-on-primary-accent, var(--ov-text-white));
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.return-home-btn:hover[b-e0py3tjymf] {
    opacity: 0.9;
    color: var(--ov-text-white);
}

/* Bootstrap's .text-dark / .fw-bold are used inside this markup; .text-dark
   would render near-black on the dark card, so force it back to white. */
.bank-transfer-modal .text-dark[b-e0py3tjymf] {
    color: var(--ov-text-white) !important;
}

.bank-transfer-modal .fw-bold[b-e0py3tjymf] {
    font-weight: 700;
}

/* Terms modal */
.terms-modal-overlay[b-e0py3tjymf] {
    position: fixed;
    inset: 0;
    background: rgba(12, 14, 26, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1000;
}

.terms-modal[b-e0py3tjymf] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    background: var(--ov-card-bg);
    border: 2px solid var(--ov-primary-dark);
    border-radius: 24px;
    font-family: var(--ov-font);
    color: var(--ov-text-white);
    overflow: hidden;
}

.terms-modal-header[b-e0py3tjymf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: var(--ov-primary-dark);
}

.terms-modal-title[b-e0py3tjymf] {
    font-size: 18px;
    font-weight: 700;
}

.terms-modal-close[b-e0py3tjymf] {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
    color: var(--ov-text-white);
}

.terms-modal-close svg path[b-e0py3tjymf] {
    stroke: currentColor;
}

.terms-modal-content[b-e0py3tjymf] {
    padding: 24px;
    overflow-y: auto;
    font-size: 14px;
    font-weight: 350;
    line-height: 1.7;
}

.terms-loading-spinner[b-e0py3tjymf] {
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--ov-primary-accent);
    border-radius: 50%;
    animation: ov-spin-b-e0py3tjymf 0.8s linear infinite;
}

@keyframes ov-spin-b-e0py3tjymf {
    to { transform: rotate(360deg); }
}

.ov-footer-logo img[b-e0py3tjymf] {
    width: 99px;
    height: 39px;
    object-fit: contain;
}

@media (max-width: 1100px) {
    .ov-input-grid[b-e0py3tjymf],
    .ov-input-grid.full-width[b-e0py3tjymf] {
        grid-template-columns: repeat(auto-fit, minmax(0, var(--ov-field-width)));
        /* if auto-fit ever drops to a single column here, the 140px
           column-gap would otherwise become an oversized vertical gap */
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .ov-header[b-e0py3tjymf] {
        padding: 20px 16px;
    }

    .ov-footer-tagline[b-e0py3tjymf] {
        font-size: 32px;
        letter-spacing: 0.02em;
        padding: 0 16px;
        /* back to a plain centered line that may wrap — justifying (or
           forcing one line) at this width would look wrong */
        white-space: normal;
        text-align: center;
        text-align-last: center;
    }

    /* No mobile size override — the logo is a fixed 99x39 at every width. */

    .ov-tab-btn[b-e0py3tjymf] {
        flex: 1 1 0;
        /* height/line-height were fixed px values tuned for the desktop
           17px font; at mobile's smaller font let the box grow to fit
           however many lines the label wraps to, instead of clipping it. */
        height: auto;
        min-height: 52px;
        line-height: 1.3;
        font-size: 13px;
        padding: 8px 10px;
    }

    .ov-form-container[b-e0py3tjymf] {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .ov-card-title[b-e0py3tjymf] {
        font-size: 26px;
    }

    .ov-input-grid[b-e0py3tjymf],
    .ov-input-grid.full-width[b-e0py3tjymf] {
        grid-template-columns: minmax(0, 1fr);
        /* the desktop 140px gap is a horizontal column-gap; stacked into
           a single column on mobile it would become a huge vertical gap
           between rows instead */
        gap: 16px;
    }

    /* .ov-phone-field must be reset too — it's the outer wrapper holding the
       dial-code dropdown, and its own max-width would otherwise keep the
       phone field at ~400px while every other input goes full width. */
    .ov-input[b-e0py3tjymf],
    .ov-phone-field[b-e0py3tjymf],
    .ov-phone-wrap[b-e0py3tjymf] {
        max-width: none;
    }

    .ov-phone-badge[b-e0py3tjymf] {
        min-width: 88px;
        font-size: 17px;
    }

    .ov-payment-methods[b-e0py3tjymf] {
        grid-template-columns: 1fr;
    }

    .ov-amount-grid[b-e0py3tjymf] {
        grid-template-columns: repeat(3, 1fr);
    }

    .ov-submit-btn[b-e0py3tjymf] {
        width: 100%;
    }
}
/* ============================================================
   Sachukardi hero artwork

   The markup is inline SVG in StandardTopup.razor (class .sk-art).
   It replaced a 1.7 MB opaque PNG that could not be made to glow:
   with no alpha channel, drop-shadow traced the image's bounding
   rectangle instead of the card, and a glow placed behind it was
   covered by the opaque pixels. These are real strokes on
   transparency, so drop-shadow follows the geometry.

   NOTE: everything below used to sit inside the @media (max-width:
   768px) block above, which was missing its closing brace. That is
   why none of the earlier glow attempts were ever visible on a
   desktop viewport. The brace is now closed on the line above.
   Keep the balance intact when appending to this file.
   ============================================================ */

.sk-art[b-e0py3tjymf] {
    /* Split out so a theme can retint the glow. The var() fallback is
       everything after the first comma, so this reads as 144, 200, 80. */
    --sk-glow-rgb: var(--ov-glow-rgb, 144, 200, 80);
    --sk-green: var(--ov-primary-accent, #90C850);
    --sk-green-hot: #C4F088;

    display: block;
    width: 100%;
    height: auto;
    /* The glow is drawn outside the viewBox; without this it gets clipped. */
    overflow: visible;
    font-family: var(--ov-font, 'HMPangram', 'Noto Sans Georgian', system-ui, sans-serif);
}

/* ---- orbital rings ---- */
.sk-rings[b-e0py3tjymf] {
    fill: none;
    stroke: var(--sk-green);
    filter: drop-shadow(0 0 6px rgba(var(--sk-glow-rgb), 0.45));
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: sk-spin-b-e0py3tjymf 60s linear infinite;
}

.sk-ring[b-e0py3tjymf] {
    stroke-width: 1.4;
    opacity: 0.30;
}

.sk-ring--b[b-e0py3tjymf] {
    stroke-dasharray: 5 10;
    opacity: 0.22;
}

/* ---- floating category icons ---- */
.sk-icons[b-e0py3tjymf] {
    pointer-events: none;
}

.sk-icon[b-e0py3tjymf] {
    pointer-events: auto;
    fill: none;
    stroke: var(--sk-green);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(var(--sk-glow-rgb), 0.55));
    /* Positioning uses the transform ATTRIBUTE. The CSS translate property
       composes with it rather than replacing it, so the float animation can
       run without clobbering each icon's placement. */
    animation: sk-float-b-e0py3tjymf 6s ease-in-out infinite;
    animation-delay: calc(var(--sk-i, 0) * -0.75s);
    transition: filter 0.3s ease, stroke 0.3s ease;
}

.sk-dash[b-e0py3tjymf] {
    stroke-dasharray: 3 5;
    opacity: 0.7;
}

/* ---- the card ---- */

/* The glow sits on its own vector rect BEHIND the artwork, never on the group
   that contains it.

   Animating a filter over a subtree that holds a raster image makes the browser
   re-rasterise that subtree: the card drops to a low-resolution raster for the
   length of the transition and only sharpens again once the compositor settles,
   which reads as "blurry on hover, fine a couple of seconds later". Filtering a
   plain rect instead keeps the bitmap out of the filtered subtree entirely, so
   it stays at native resolution the whole time.

   .sk-card itself animates only `translate`, which the compositor handles as a
   layer offset with no re-rasterisation. */
.sk-card[b-e0py3tjymf] {
    transition: translate 0.4s ease;
}

.sk-card-glow[b-e0py3tjymf] {
    fill: #0B0F1A;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(var(--sk-glow-rgb), 0.28));
    transition: filter 0.4s ease;
}

/* The artwork is a flat rectangle; the clipPath rounds it. */
.sk-card-img[b-e0py3tjymf] {
    /* Keeps edges clean when the card is scaled down on small screens. */
    image-rendering: auto;
}

.sk-card-rim[b-e0py3tjymf] {
    fill: none;
    stroke: url(#skRim);
    stroke-width: 2;
}

/* ---- sparks ---- */
.sk-sparks circle[b-e0py3tjymf] {
    fill: var(--sk-green);
    filter: drop-shadow(0 0 6px rgba(var(--sk-glow-rgb), 0.9));
    transform-box: fill-box;
    transform-origin: center;
    animation: sk-twinkle-b-e0py3tjymf 4.5s ease-in-out infinite;
    animation-delay: calc(var(--sk-i, 0) * -0.55s);
}

/* ---- hover: lift the whole scene, then the icon under the cursor ---- */
.sachukardi-hero-image:hover .sk-card-glow[b-e0py3tjymf] {
    filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 48px rgba(var(--sk-glow-rgb), 0.5));
}

.sachukardi-hero-image:hover .sk-card[b-e0py3tjymf] {
    translate: 0 -8px;
}

.sachukardi-hero-image:hover .sk-icon[b-e0py3tjymf] {
    filter: drop-shadow(0 0 9px rgba(var(--sk-glow-rgb), 0.85)) drop-shadow(0 0 22px rgba(var(--sk-glow-rgb), 0.4));
}

.sachukardi-hero-image:hover .sk-rings[b-e0py3tjymf] {
    filter: drop-shadow(0 0 10px rgba(var(--sk-glow-rgb), 0.7));
}

.sk-icon:hover[b-e0py3tjymf] {
    stroke: var(--sk-green-hot);
    filter: drop-shadow(0 0 14px rgba(var(--sk-glow-rgb), 1)) drop-shadow(0 0 32px rgba(var(--sk-glow-rgb), 0.55));
}

@keyframes sk-spin-b-e0py3tjymf {
    to {
        rotate: 360deg;
    }
}

@keyframes sk-float-b-e0py3tjymf {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -9px;
    }
}

@keyframes sk-twinkle-b-e0py3tjymf {
    0%, 100% {
        opacity: 0.25;
        scale: 0.8;
    }

    50% {
        opacity: 1;
        scale: 1.15;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sk-rings[b-e0py3tjymf],
    .sk-icon[b-e0py3tjymf],
    .sk-sparks circle[b-e0py3tjymf] {
        animation: none;
    }

    .sk-card[b-e0py3tjymf],
    .sk-card-glow[b-e0py3tjymf],
    .sk-icon[b-e0py3tjymf] {
        transition: none;
    }

    .sachukardi-hero-image:hover .sk-card[b-e0py3tjymf] {
        translate: 0 0;
    }
}