:root {
    --primary: 105, 54, 211; /* #6936D3 */
    --primary-hover: 133, 103, 255; /* #8567FF */
    --primary-active: 74, 22, 181; /* #4A16B5 */
    --base-01: 255, 255, 255; /* #FFFFFF */
    --base-02: 247, 249, 252; /* #F7F9FC */
    --base-05: 208, 212, 227; /* #D0D4E3 */
    --base-06: 177, 181, 203; /* #B1B5CB */
    --base-08: 41, 48, 77; /* #29304D */
    --base-09: 29, 36, 69; /* #1D2445 */
    --additional-color: 191, 175, 255; /* #BFAFFF */

    --text-icons-01: rgba(var(--base-09), 0.96);
    --text-icons-02: rgba(var(--base-01), 1);

    --box-shadow-01: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    --box-shadow-02: 0 0 0 4px var(--focus-border-02);
    --box-shadow-03: 0 0 0 4px var(--focus-border-03);
    --box-shadow-04: 0 0 0 4px var(--focus-border-01);

    --focus-border-01: rgba(var(--primary), 0.24);
    --focus-border-02: rgba(var(--additional-color), 0.24);
    --focus-border-03: rgba(var(--base-09), 0.24);

    --base-font-size: 18px;
    --sm-font-size: 14px;
    --border-radius: 4px;
    --disabled-opacity: 0.48;

    --gutter-x: 8px;
    --gutter-y: 8px;

    --loading-start-color: rgb(201, 204, 216); /* #c9ccd8 */
    --loading-end-color: rgba(201, 204, 216, 0.2);
}

.pay-by-banks__btn {
    -webkit-tap-highlight-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    appearance: none !important;
    outline: none !important;
    width: 100% !important;
    padding: 10px 16px !important;
    border: 1px solid !important;
    border-radius: var(--border-radius) !important;
    font-size: var(--base-font-size) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.36s ease-in-out !important;
}

.pay-by-banks__btn img {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 78px !important;
    max-height: 27px !important;
    object-fit: contain !important;
    margin-right: 8px !important;
}

.pay-by-banks__btn[data-variant='white'] {
    background-color: rgb(var(--base-01)) !important;
    border-color: rgb(var(--base-05)) !important;
    color: var(--text-icons-01) !important;
}

.pay-by-banks__btn[data-variant='white']:hover {
    box-shadow: var(--box-shadow-01) !important;
}

.pay-by-banks__btn[data-variant='white']:active {
    background-color: rgb(var(--base-02)) !important;
}

.pay-by-banks__btn[data-variant='white']:focus {
    box-shadow: var(--box-shadow-02) !important;
}

.pay-by-banks__btn[data-variant='black'] {
    background-color: rgb(var(--base-09)) !important;
    border-color: rgb(var(--base-09)) !important;
    color: var(--text-icons-02) !important;
}

.pay-by-banks__btn[data-variant='black']:hover {
    background-color: rgb(var(--base-08)) !important;
    border-color: rgb(var(--base-08)) !important;
    box-shadow: var(--box-shadow-01) !important;
}

.pay-by-banks__btn[data-variant='black']:active {
    background-color: rgb(var(--base-09)) !important;
}

.pay-by-banks__btn[data-variant='black']:focus {
    box-shadow: var(--box-shadow-03) !important;
}

.pay-by-banks__btn[data-variant='black']:disabled {
    background-color: rgb(var(--base-08)) !important;
    border-color: rgb(var(--base-08)) !important;
}

.pay-by-banks__btn[data-variant='purple'] {
    background-color: rgb(var(--primary)) !important;
    border-color: rgb(var(--primary)) !important;
    color: var(--text-icons-02) !important;
}

.pay-by-banks__btn[data-variant='purple']:hover {
    background-color: rgb(var(--primary-hover)) !important;
    border-color: rgb(var(--primary-hover)) !important;
    box-shadow: var(--box-shadow-01) !important;
}

.pay-by-banks__btn[data-variant='purple']:active {
    background-color: rgb(var(--primary-active)) !important;
    border-color: rgb(var(--primary-active)) !important;
}

.pay-by-banks__btn[data-variant='purple']:focus {
    box-shadow: var(--box-shadow-03) !important;
}

.pay-by-banks__btn[data-variant='purple']:disabled {
    background-color: rgb(var(--primary-hover)) !important;
    border-color: rgb(var(--primary-hover)) !important;
}

.pay-by-banks__btn:disabled {
    pointer-events: none !important;
    opacity: var(--disabled-opacity) !important;
}