@import url('https://fonts.googleapis.com/css2?family=K2D&display=swap');
@import url('tree.css');
@import url('emoji.css');

:root {
    --trans-ban-d1: #c8e2c7;
    --trans-ban-d2: #c0d5be;
    --trans-ban-w1: #eecdc7;
    --trans-ban-w2: #e4c6c6;
}

html,
body {
    font-family: 'K2D', sans-serif;
}

[required]:before {
    content: '*';
    color: red;
    margin-right: 0.2em;
}

.swal2-content {
    font-weight: normal !important;
}

label {
    margin-bottom: .1em;
}

.c-app.c-dark-theme {
    background: linear-gradient(to bottom, #333 0%, #111 100%);
}

.c-main {
    padding-top: 0.5em;
    display: flex;
    flex-direction: column;
}

.c-main>.container-fluid {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.c-main>.container-fluid>keep-alive,
.c-main>.container-fluid>.fade-in {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.c-sidebar .c-sidebar-nav-title {
    padding-bottom: 0.7em;
}

.c-dark-theme .input-group-text {
    background-color: #f5cd2b;
    color: #000;
}

.c-dark-theme .btn-primary {
    background-color: #f5cd2b;
    color: #000;
    border-color: #000000;
}

/*.c-dark-theme .table [class^="light-"] {*/
/*    color: #555;*/
/*}*/
/*.c-dark-theme .table [class^="light-"]:hover {*/
/*     color: #333;*/
/* }*/

.c-dark-theme .light-success {
    background-image: linear-gradient(90deg, #304b2f 0%, #181a15 100%);
}

.c-dark-theme .light-danger {
    background-image: linear-gradient(90deg, #503733 0%, #1e1512 100%);
}

.c-dark-theme .light-warning {
    background-image: linear-gradient(90deg, #524938 0%, #383832 100%);
}

@media (min-width: 768px) {

    .c-main>.container-fluid,
    .c-main>.container-sm,
    .c-main>.container-md,
    .c-main>.container-lg,
    .c-main>.container-xl {
        padding-right: 1em;
        padding-left: 1em;
    }
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 38.75em;
    }
}

.c-dark-theme .alert-info {
    color: #f6f6f6;
    background-color: #4b7093;
    border-color: #2e547c;
}

.c-dark-theme .alert-warning {
    color: #f6f6f6;
    background-color: #958052;
    border-color: #826f45;
}

.c-sidebar-nav-link,
.c-sidebar-nav-dropdown-toggle {
    padding-top: 0.6em;
    padding-bottom: 0.6em;
}

.green-up {
    background: aquamarine !important;
}

.card {
    margin-bottom: 1em;
}

.card .card-body {
    padding: 1em;
}

.card .card-header {
    padding: 0.5em 1.2em;
}

.light-danger {
    /*background-color: #f5e6e6 !important;*/
    background-image: linear-gradient(90deg, #eecdc7 0%, #fff4eb 100%);
}

.light-success {
    /*background-color: #cef5db !important;*/
    background-image: linear-gradient(90deg, #d4f2d3 0%, #faffeb 100%);
}

.light-warning {
    background-image: linear-gradient(90deg, #cabea4 0%, #faffeb 100%);
}

.light-ban-success {
    background-image: linear-gradient(135deg, var(--trans-ban-d1) 25%, var(--trans-ban-d2) 25%, var(--trans-ban-d2) 50%, var(--trans-ban-d1) 50%, var(--trans-ban-d1) 75%, var(--trans-ban-d2) 75%, var(--trans-ban-d2) 100%);
    background-size: 56.57px 56.57px;
}

.light-ban-success td,
.light-ban-danger td {
    /*filter: drop-shadow(1px 1px 0px black);*/
}

.light-ban-danger {
    background-image: linear-gradient(135deg, var(--trans-ban-w1) 25%, var(--trans-ban-w2) 25%, var(--trans-ban-w2) 50%, var(--trans-ban-w1) 50%, var(--trans-ban-w1) 75%, var(--trans-ban-w2) 75%, var(--trans-ban-w2) 100%);
    background-size: 56.57px 56.57px;
}

/* customer-edit -> รายการฝากถอน: thick colour edge on top of the light-* row
   gradient, so ฝาก/ถอน reads at a glance. Border sits on the first cell so it
   paints regardless of the table's border-collapse mode. */
#cc_trans_body > tr > td:first-child {
    border-left: 4px solid transparent;
}

#cc_trans_body > tr.light-success > td:first-child,
#cc_trans_body > tr.light-ban-success > td:first-child {
    border-left-color: #2eb85c;
}

#cc_trans_body > tr.light-danger > td:first-child,
#cc_trans_body > tr.light-ban-danger > td:first-child {
    border-left-color: #e55353;
}

#cc_trans_body > tr.light-warning > td:first-child {
    border-left-color: #f9b115;
}

.bg-gradient-1 {
    background: linear-gradient(to bottom, #000 0%, #1f1300 100%);
}

.bg-gradient-2 {
    background: linear-gradient(to bottom, #9D7310 0%, #A7955E 100%);
}

.my-pop {
    position: relative;
}

.my-pop .my-pop-body {
    display: none;
    position: absolute;
    box-shadow: 3px 4px 3px 0px rgba(0, 0, 0, 0.2);
    padding: 0.2em 0.9em;
    top: -90%;
    /*left: -50%;*/
    color: #fff;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.7);
    /*transition: 0.5s ease;*/
    pointer-events: none;
    font-size: 120%;
}

.my-pop .my-pop-body:after {
    content: '';
    border-top: 10px solid;
}

.my-pop .my-pop-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.my-pop .my-pop-btn:hover {
    /*     border: 1px solid; */

}

.my-pop .my-pop-btn:hover~.my-pop-body {
    display: block;
    top: -120%;
}

.my-pop i.fa {
    margin-right: 0.1em;
}

.bank-logo {
    width: 2em;
    object-fit: contain;
}

.iziToast-wrapper {
    z-index: 780 !important;
    padding-top: 0 !important;
}

.iziToast-wrapper.iziToast-wrapper-topRight,
.iziToast-wrapper.iziToast-wrapper-topCenter {
    top: 57px;
}

/** The element to hover over *!*/
.qs {
    background-color: #02bdda;
    border-radius: 1em;
    color: #e3fbff;
    cursor: default;
    display: inline-block;
    font-family: 'Helvetica', sans-serif;
    font-size: 1.125em;
    font-weight: bold;
    height: 1.875em;
    line-height: 1.875em;
    position: relative;
    text-align: center;
    width: 1.875em;
}

.qs .popover {
    background-color: rgba(0, 0, 0, 0.85);
    border-radius: 0.3125em;
    bottom: 2.625em;
    box-shadow: 0 0 0.3125em rgba(0, 0, 0, 0.4);
    color: #fff;
    display: none;
    font-size: 0.75em;
    font-family: 'Helvetica', sans-serif;
    left: -5.9375em;
    padding: 0.4375em 0.625em;
    position: absolute;
    width: 12.5em;
    z-index: 4;
}

.qs .popover:before {
    border-top: 0.4375em solid rgba(0, 0, 0, 0.85);
    border-right: 0.4375em solid transparent;
    border-left: 0.4375em solid transparent;
    bottom: -0.4375em;
    content: '';
    display: block;
    left: 50%;
    margin-left: -0.4375em;
    position: absolute;
}

.qs:hover .popover {
    display: block;
    animation: fade-in .3s linear 1, move-up .3s linear 1;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes move-up {
    from {
        bottom: 1.875em;
    }

    to {
        bottom: 2.625em;
    }
}

.btn {
    line-height: 1.4;
}

.avatar-block {
    cursor: pointer;
}

.avatar-block:hover {
    transform: scale(1.2);
}


.swal2-container {
    z-index: 99999;
}

.c-sidebar-nav-dropdown ul.c-sidebar-nav-dropdown-items {
    border-left: 4px solid #ccc;
}

html:not([dir=rtl]) .c-sidebar-nav-dropdown-toggle .badge {
    margin-left: auto;
    margin-right: unset;
}

.c-sidebar .c-sidebar-nav-link.c-active,
.c-sidebar .c-active.c-sidebar-nav-dropdown-toggle {
    color: #fff;
    background: #45a164;
}

@media (min-width: 992px) {
    .c-sidebar-unfoldable:not(:hover).c-sidebar-fixed .c-sidebar-nav-link {
        position: relative;
    }

    .c-sidebar-unfoldable:not(:hover).c-sidebar-fixed .c-sidebar-nav-link .badge {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}

table .btn-sm {
    padding: 0.1em 0.5em;
    margin: 0;
}

table.vertical-align-middle td {
    vertical-align: middle;
}

.avatar-online {
    border-width: 3px !important;
    width: 3em;
    height: 3em;
}

.avatar-online-sm {
    border-width: 2px !important;
    width: 2em;
    height: 2em;
}

/* select2 */
.select2-container img {
    max-height: 27px;
    position: relative;
    top: -1px;
    margin-right: 7px;
}

.select2-selection__rendered {
    line-height: 31px !important;
}

.select2-container .select2-selection--single {
    height: 35px !important;
}

.select2-selection__arrow {
    height: 34px !important;
}

.select2-container--default .select2-selection--single {
    border-color: #e4e7ea !important;
}

.select2.select2-container {
    flex: 1;
}

.container-loading {
    position: relative;
}

.container-loading .loader {
    position: absolute;
    top: 0;
    z-index: 999;
    right: 0;
    bottom: 0;
    left: 0;
}

#manualModal .select2.select2-container {
    width: 100% !important;
}

/*
 *  STYLE 6
 */
body::-webkit-scrollbar-track,
div::-webkit-scrollbar-track,
.scroller::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}

body::-webkit-scrollbar,
div::-webkit-scrollbar,
.scroller::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb,
.scroller::-webkit-scrollbar-thumb {
    background-color: #636f83;
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, .2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .2) 50%,
            rgba(255, 255, 255, .2) 75%,
            transparent 75%,
            transparent)
}

/*-- Marker --*/
mark {
    background: orange;
    color: black;
    border: 1px dotted;
    padding: 0;
}

@keyframes hourglass {
    0% {
        transform: rotate(0deg);
    }

    80% {
        transform: rotate(0deg);
    }

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

.hourglass-animate {
    animation: 7s hourglass linear infinite;
}


.c-switch-wide {
    width: 4.1875em;
}

.c-switch-wide .c-switch-input:checked~.c-switch-slider::before {
    -webkit-transform: translateX(1.375em);
    transform: translateX(2.625em);
}

.card .top-right {
    position: absolute;
    right: 0.375em;
    top: 0.375em;
}

.bg-gradient-new1 {
    background: linear-gradient(45deg, #405aa4 0%, #b5c4c7 100%) !important;
    border-color: #405aa4 !important;
}

.bg-gradient-new2 {
    background: #3d3980 !important;
    background: linear-gradient(45deg, #4440a4 0%, #3d3980 100%) !important;
    border-color: #3d3980 !important
}

.bg-gradient-new3 {
    background: #18377b !important;
    background: linear-gradient(45deg, #2e52b8 0%, #18377b 100%) !important;
    border-color: #18377b !important
}

.bg-gradient-new4 {
    background: #20a8d8 !important;
    background: linear-gradient(45deg, #ac81b7 0%, #20a8d8 100%) !important;
    border-color: #20a8d8 !important
}

.feature-lock {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: no-drop;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    opacity: 0.7;
    z-index: 9999;
    pointer-events: none;
}

.feature-lock.feature-lock-lg {
    position: absolute;
}

.feature-lock.feature-lock-lg:after {
    font-size: 5em;
    position: absolute;
}

.feature-lock.feature-lock-side:after {
    position: relative;
    right: 1em;
}

.feature-lock:after {
    content: "\f023";
    font: normal normal normal 0.875em/1 FontAwesome;
    font-size: 1.5em;
}

.tooltip-cursor {
    cursor: help;
}

.tooltip-cursor:after {
    content: "\f059";
    margin-left: 0.3em;
    font: normal normal normal 0.875em/1 FontAwesome;
}


.g-border {
    border-left: 2px solid #53e192 !important;
}

.loading {
    position: relative;
}

.loading:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(180, 180, 180, 0.7);
    z-index: 99998;
    cursor: wait;
    pointer-events: all;
}

.loading:after {
    content: '';
    position: absolute;
    background-size: 4em;
    background: url(/assets/assets/img/loading.gif) no-repeat center 4em;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999;
    cursor: progress;
}

.tooltip {
    z-index: 10000;
}

.waves {
    position: fixed;
    width: 100%;
    height: 15vh;
    bottom: 0;
    min-height: 100px;
    max-height: 150px;
    /* Decorative background only. Without these the fixed wave sits AFTER the login card in the
       DOM, so with no stacking order it painted on top of the card's lower half (captcha + Login
       button) and swallowed clicks there. Pin it behind the content and never let it intercept. */
    z-index: -1;
    pointer-events: none;
}

/* Login captcha (ALTCHA, views/login.twig). The widget colours itself with light-dark(), keyed on
   color-scheme, and the login card is the dark theme without declaring one — so it drew a white box. */
#login altcha-widget {
    color-scheme: dark;
}

/* Animation */
.parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves {
        height: 15vh;
        min-height: 40px;
    }
}

.pointer-event-none {
    pointer-events: none;
}

/*------ postit ------*/
.postit {
    position: relative;
    padding: 1.5625em;
    display: inline-block;
    -webkit-box-shadow: 0 0.5em 0.625em -0.4375em #999;
    -moz-box-shadow: 0 0.5em 0.625em -0.4375em #999;
    box-shadow: 0 0.5em 0.625em -0.4375em #999;
    -webkit-border-bottom-right-radius: 3.75em 0.625em;
    -moz-border-radius-bottomright: 3.75em 0.625em;
    border-bottom-right-radius: 3.75em 0.625em;
}

.postit .post-tool {
    position: absolute;
    right: 0.0625em;
    top: 0;
}

.postit .postit_title {
    border-top-width: 0.125em;
    border-top-style: dotted;
    margin: 0 -1.5625em;
    padding: 0.375em 1.5625em;
}

.postit.postit1 {
    background: #fefabc;
}

.postit.postit1 .postit_title {
    border-top-color: #dbd581;
}

.postit.postit2 {
    background: #FDD7DB;
}

.postit.postit2 .postit_title {
    border-top-color: #E6A1A8;
}

.postit.postit3 {
    background: #EAF763;
}

.postit.postit3 .postit_title {
    border-top-color: #72A201;
}

.postit.postit4 {
    background: #B9EAF6;
}

.postit.postit4 .postit_title {
    border-top-color: #6DB4C4;
}

.hover-scale {
    animation: all ease-out 0.4s;
}

.hover-scale:hover {
    transform: scale(2.3);
}

.hover-border:hover {
    border: 1px dotted rgb(0 0 0 / 40%);
}


/*----vuejs list animation----*/
.fruit-list-item {
    transition: all 0.4s;
}

.fruit-list-enter,
.fruit-list-leave-to {
    max-height: 0px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    overflow: hidden;
}

.fruit-list-enter-to,
.fruit-list-leave {
    max-height: 80px;
}

.fruit-table-item {
    transition: all 0.4s;
}

.fruit-table-item>* {
    transition: all 0.4s;
    overflow: hidden;
}

.fruit-table-enter,
.fruit-table-leave-to {
    line-height: 0;
}

.fruit-table-enter>*,
.fruit-table-leave-to>* {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.fruit-table-enter-to,
.fruit-table-leave {
    line-height: 1.5;
}

.full-size-1 {
    position: fixed;
    top: 1em;
    left: 1em;
    right: 1em;
    bottom: 1em;
    z-index: 5000;
}

/*--- google translate ---*/
.google_translate_element {
    /*position: fixed;*/
}

.goog-logo-link,
.goog-tooltip,
.goog-tooltip:hover,
#goog-gt-tt,
iframe.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0px !important;
}

.goog-te-gadget {
    color: transparent !important;
    height: 2.5em;
}

.goog-te-gadget>div {
    text-align: center;
}

.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.bg-ban {
    background-image: linear-gradient(135deg, #a34646 25%, #000000 25%, #000000 50%, #a34646 50%, #a34646 75%, #000000 75%, #000000 100%);
    background-size: 56.57px 56.57px;
}

.badge-violet {
    background-color: #B47EDE;
}

.badge-light-violet {
    background-color: #e833ff;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.c-main,
.c-main>.container-fluid,
.c-main>.container-fluid>.fade-in {
    height: 100%;
}

.c-footer {
    position: fixed;
    bottom: 0;
    height: 1.25em;
    width: auto;
}

/* Bank view toggle - compact mode */
.bank-view-small .c-callout {
    padding: 0.25em 0.5em;
    font-size: 80%;
}

.bank-view-small .text-value-lg {
    font-size: 1em;
}

/* Telegram brand color */
.bg-telegram {
    background-color: #0088cc !important
}

a.bg-telegram:hover,
a.bg-telegram:focus,
button.bg-telegram:hover,
button.bg-telegram:focus {
    background-color: #006ba6 !important
}

/* Ribbon System */
.ribbon-wrapper {
    width: 85px;
    height: 85px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
    z-index: 10;
    pointer-events: none;
}

.ribbon-wrapper .ribbon {
    font: bold 12px Sans-Serif;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(45deg);
    position: relative;
    padding: 5px 0;
    left: -6px;
    top: 16px;
    width: 120px;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ribbon-wrapper .ribbon:before,
.ribbon-wrapper .ribbon:after {
    content: "";
    border-top: 3px solid;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
}

.ribbon-wrapper .ribbon:before {
    left: 0;
}

.ribbon-wrapper .ribbon:after {
    right: 0;
}

/* Ribbon Variants */
.ribbon-danger {
    background: linear-gradient(#e74c3c, #c0392b) !important;
}

.ribbon-danger:before,
.ribbon-danger:after {
    border-top-color: #922b21;
}

.ribbon-warning {
    background: linear-gradient(#f39c12, #e67e22) !important;
}

.ribbon-warning:before,
.ribbon-warning:after {
    border-top-color: #be6516;
}

.ribbon-success {
    background: linear-gradient(#27ae60, #229954) !important;
}

.ribbon-success:before,
.ribbon-success:after {
    border-top-color: #1a7a40;
}

.ribbon-info {
    background: linear-gradient(#3498db, #2980b9) !important;
}

.ribbon-info:before,
.ribbon-info:after {
    border-top-color: #1f618d;
}

.chat-collapse-toggle {
    transition: all 0.2s ease;
    cursor: pointer;
}

.chat-collapse-toggle .fa-chevron-down {
    transition: transform 0.2s ease;
}

.chat-collapse-toggle.collapsed .fa-chevron-down {
    transform: rotate(-90deg);
}

.chat-collapse-toggle:hover {
    color: #007bff !important;
}

.chat-section {
    transition: all 0.3s ease;
    overflow: hidden;
}

.chat-section.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}

.chat-section.expanded {
    max-height: 2000px;
    opacity: 1;
}

.line-connect-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.line-connect-status-running {
    background: #28a745;
    color: #fff;
    animation: pulse-green 1.4s infinite;
}

.line-connect-status-working {
    background: #28a745;
    color: #fff;
    animation: pulse-green 1.4s infinite;
}

.line-connect-status-waiting_for_pincode {
    background: #fd7e14;
    color: #fff;
    animation: pulse-orange 1s infinite;
}

.line-connect-status-initializing {
    background: #17a2b8;
    color: #fff;
    animation: pulse-blue 1.2s infinite;
}

.line-connect-status-error {
    background: #dc3545;
    color: #fff;
    animation: pulse-red 1s infinite;
}

.line-connect-status-chat_not_found {
    background: #6f42c1;
    color: #fff;
}

.line-connect-status-inactive {
    background: #6c757d;
    color: #fff;
}

.line-connect-status-unknown {
    background: #343a40;
    color: #adb5bd;
}

@keyframes pulse-green {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, .5)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(40, 167, 69, 0)
    }
}

@keyframes pulse-orange {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(253, 126, 20, .5)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(253, 126, 20, 0)
    }
}

@keyframes pulse-blue {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(23, 162, 184, .5)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(23, 162, 184, 0)
    }
}

@keyframes pulse-red {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, .5)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0)
    }
}

/* ================================================================
   Withdraw-source zones (setting/bank page)
   `withdraw_source` setting picks ONE active zone (Gateway / Bank
   Auto Transfer / OFF). The picked zone gets a green pulsing border
   so the operator can see at a glance which path is live; OFF greys
   out both zones.
   ---------------------------------------------------------------- */
.ws-source-card .form-check-inline {
    margin-right: 1.5rem;
}

.ws-zone {
    border: 2px solid transparent;
    border-radius: 6px;
    transition: border-color .15s, box-shadow .15s;
}

.ws-zone.active {
    border-color: #28a745;
    animation: ws-zone-glow 2s ease-out infinite;
}

.ws-zone-off {
    opacity: .55;
    filter: grayscale(.4);
}

@keyframes ws-zone-glow {
    0%   { box-shadow: 0 0 0 0   rgba(40, 167, 69, .55); }
    50%  { box-shadow: 0 0 0 8px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0   rgba(40, 167, 69, 0); }
}

/* Grouped bank/gateway select2 — a labeled card per group, color-coded:
   🏦 ธนาคาร = aqua outline, ⚡ เกตเวย์ = orange. Reusable: any select2 with
   dropdownCssClass:'bank-grouped-dropdown' + <optgroup>s whose labels contain
   "ธนาคาร"/"เกตเวย์" (tagged via templateResult → .bgrp-bank / .bgrp-gw) gets this
   look. Loaded by both the SPA and the iframe frames (style-custom.css). */
.bank-grouped-dropdown .select2-results__group {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 8px 8px 0 0;
    margin: 0 8px 0;
    border: 1px solid #d3dae8;
    border-bottom: 0;
}
.bank-grouped-dropdown .select2-results__options--nested {
    border: 1px solid #d3dae8;
    border-radius: 0 0 8px 8px;
    margin: 0 8px 6px;
    padding: 3px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.bank-grouped-dropdown .select2-results__options--nested .select2-results__option {
    border-radius: 6px;
}
/* Scoped to --nested (grouped) items only: the scale+translate is compensated by
   the nested box's padding. On a FLAT bank-grouped-dropdown (e.g. the deposit
   "แสดงเฉพาะบัญชี" account picker) there's no nested box, so this translate would
   jam every icon/item to the left — flat lists keep the plain icon-box position. */
.bank-grouped-dropdown .select2-results__options--nested .select2-results__option .icon-box {
    transform: scale(1.5) translate(-0.3em, -0.1em);
}
/* 🏦 ธนาคาร — aqua */
.bank-grouped-dropdown .select2-results__group:has(.bgrp-bank) {
    background: #e3f6f9;
    color: #0b7c8c;
    border-color: #3bb6c9;
}
.bank-grouped-dropdown .select2-results__group:has(.bgrp-bank) + .select2-results__options--nested {
    border-color: #3bb6c9;
    background: #f6fdff;
}
/* ⚡ เกตเวย์ — orange */
.bank-grouped-dropdown .select2-results__group:has(.bgrp-gw) {
    background: #fff1e3;
    color: #c5650a;
    border-color: #f59838;
}
.bank-grouped-dropdown .select2-results__group:has(.bgrp-gw) + .select2-results__options--nested {
    border-color: #f59838;
    background: #fffaf4;
}
/* small muted "ordered-by-settings" hint on the group labels */
.bank-grouped-dropdown .bgrp-note {
    font-size: .82em;
    font-weight: 400;
    opacity: .6;
    margin-left: 3px;
}
/* scaled icon in the closed selection box too (containerCssClass scopes it here);
   the box has tight left padding, so make room for the enlarged icon. */
.bank-grouped-dropdown .select2-selection__rendered {
    padding-left: 1.8em;
}
.bank-grouped-dropdown .select2-selection__rendered .icon-box {
    transform: scale(1.5) translate(-0.1em, -0.05em);
}

/* ===== Frame glow polish — applies ONLY inside iframe frames (transfer, transaction2, …),
   scoped under .app-frame-body (set in _layout-iframe.twig) so the parent SPA is untouched.
   Minimal, professional: soft elevated cards, rounded corners, a focus/hover glow whose
   accent tracks the theme via color-mix(var(--primary)) and the status vars, so it stays
   on-brand on every site without hardcoding any color. No movement on hover. */
.app-frame-body .card {
    border: 1px solid rgba(20, 30, 60, .06);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 30, 60, .04), 0 10px 28px -16px rgba(20, 30, 60, .30);
    transition: box-shadow .28s ease;
    overflow: hidden;
}
.app-frame-body .card:hover {
    box-shadow: 0 1px 2px rgba(20, 30, 60, .05), 0 16px 38px -16px color-mix(in srgb, var(--primary) 28%, transparent);
}
.app-frame-body .card-header {
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 0;
    letter-spacing: .015em;
    font-weight: 600;
}
.app-frame-body .card-header.bg-dark {
    background: linear-gradient(135deg, #2a2f3a 0%, #171a21 100%) !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05);
}
.app-frame-body .form-control,
.app-frame-body .custom-select {
    border-radius: 8px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.app-frame-body .input-group > .input-group-prepend > .input-group-text {
    border-radius: 8px 0 0 8px;
}
.app-frame-body .form-control:focus,
.app-frame-body .custom-select:focus {
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--primary) 16%, transparent), 0 0 14px color-mix(in srgb, var(--primary) 18%, transparent);
}
.app-frame-body .select2-container--default .select2-selection {
    border-radius: 8px !important;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.app-frame-body .select2-container--default.select2-container--focus .select2-selection,
.app-frame-body .select2-container--default.select2-container--open .select2-selection {
    border-color: color-mix(in srgb, var(--primary) 55%, transparent) !important;
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--primary) 16%, transparent) !important;
}
.app-frame-body .btn-primary {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--primary) 55%, transparent);
    transition: box-shadow .25s ease, transform .15s ease;
}
.app-frame-body .btn-primary:hover {
    box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--primary) 78%, transparent);
    transform: translateY(-1px);
}
.app-frame-body .btn-primary:active {
    transform: translateY(0);
}
.app-frame-body .table thead th {
    border-top: 0;
    font-weight: 600;
    color: #5a6270;
}
.app-frame-body .btn-outline-info {
    border-radius: 7px;
}
/* status badges sit on a soft under-glow in their own (theme-tracked) color */
.app-frame-body .badge {
    border-radius: 6px;
    padding: .4em .65em;
}
.app-frame-body .badge-success {
    box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--success) 55%, transparent);
}
.app-frame-body .badge-danger {
    box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--danger) 55%, transparent);
}
.app-frame-body .badge-secondary {
    box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--secondary) 55%, transparent);
}
.app-frame-body .badge-warning {
    box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--warning) 55%, transparent);
}
.app-frame-body .badge-info {
    box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--info) 55%, transparent);
}
/* equal-width label column so every input in the transfer form starts at the same x */
.app-frame-body #transferForm .input-group-prepend > .input-group-text {
    min-width: 7em;
}