.ctg-receipt-container {
    display: block;
    width: 100%;
    float: right
}

.ctg-receipt-container label#ctg-file-upload,
.ctg-receipt-container label.ctg-file-upload {
    text-align: center;
    border: 2px dashed #7e61ff;
    padding: 15px 20px;
    border-radius: 5px;
    font-weight: 700;
    color: #7e61ff;
    text-transform: uppercase;
    cursor: pointer;
    transition: box-shadow .25s;
    float: right;
    margin-left: 20px;
    min-width: min(250px, 100%);
    box-sizing: border-box;
    margin-top: 12px;
    font-family: inherit;
    font-size: 14px;
    width: 100%
}

.ctg-receipt-container label#ctg-file-upload:active,
.ctg-receipt-container label.ctg-file-upload:active {
    box-shadow: none
}

.ctg-receipt-container input#ctgfile,
.ctg-receipt-container input.ctgfile {
    width: 0;
    height: 0;
    padding: 0;
    margin: 0 !important
}

.ctg-receipt-container img {
    max-width: 250px !important;
    height: auto !important;
    display: none;
    margin: 12px 0 0 !important
}

.ctg-receipt-container .preview {
    position: relative;
    float: right;
    display: block;
    clear: both
}

.ctg-receipt-container #remove-file {
    position: absolute;
    color: red;
    border: 1px solid red;
    padding: 4px 10px;
    border-radius: 4px;
    top: 22px;
    left: 10px;
    backdrop-filter: blur(8px);
    cursor: pointer
}

.ctg-receipt-container input[type=text],
.ctg-receipt-container label,
.ctg-single-card-info .card-number-owner-name,
.ctg-single-card-info .total-amount {
    display: block;
    clear: both
}

.ctg-single-card-info .card-number-owner-name,
.ctg-single-card-info .total-amount {
    margin: 8px 0;
    position: relative
}

.ctg-single-card-info .card-number-owner-name b,
.ctg-single-card-info .total-amount b {
    margin-left: 4px
}

.ctg-single-card-info .total-amount {
    display: flex;
    cursor: pointer
}

.ctg-single-card-info .total-amount:after {
    content: '';
    background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 11C6 8.17157 6 6.75736 6.87868 5.87868C7.75736 5 9.17157 5 12 5H15C17.8284 5 19.2426 5 20.1213 5.87868C21 6.75736 21 8.17157 21 11V16C21 18.8284 21 20.2426 20.1213 21.1213C19.2426 22 17.8284 22 15 22H12C9.17157 22 7.75736 22 6.87868 21.1213C6 20.2426 6 18.8284 6 16V11Z" stroke="%231C274C" stroke-width="1.5"/><path opacity="0.5" d="M6 19C4.34315 19 3 17.6569 3 16V10C3 6.22876 3 4.34315 4.17157 3.17157C5.34315 2 7.22876 2 11 2H15C16.6569 2 18 3.34315 18 5" stroke="%231C274C" stroke-width="1.5"/></svg>') 0 0/16px;
    width: 16px;
    height: 16px;
    opacity: .3;
    display: inline-block;
    margin-right: 4px
}

.ctg-receipt-container input[type=text] {
    margin-bottom: 12px !important;
    min-width: min(250px, 100%)
}

.ctg-receipt-container .progress-bar {
    width: min(250px, 100%);
    background: 0 0;
    height: 10px;
    border: 1px solid #999;
    border-radius: 10px;
    position: relative;
    float: initial;
    clear: both;
    margin: 16px auto auto
}

.ctg-receipt-container .progress-bar .progress {
    position: absolute;
    left: 0;
    height: 100%;
    background: #555;
    transition: .2s
}

.ctg-card-area {
    border-radius: 4px;
    max-width: 400px;
    margin: 20px auto;
    border: 1px solid #ddd;
    padding: 10px;
    width: auto;
    min-width: auto
}

.ctg-card-area h4 {
    margin: 0;
    padding: 8px 0
}

.ctg-card-area #ctg-file-upload,
.ctg-card-area input[type=text] {
    width: 100%;
    min-height: 30px
}

.ctg-card-area .ctg-receipt-container .preview {
    float: initial;
    margin: auto;
    width: fit-content
}

.ctg-single-card-info .card-number {
    position: relative;
    cursor: pointer;
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 14px;
    box-sizing: border-box
}

.ctg-single-card-info .card-number:after {
    content: '';
    background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 11C6 8.17157 6 6.75736 6.87868 5.87868C7.75736 5 9.17157 5 12 5H15C17.8284 5 19.2426 5 20.1213 5.87868C21 6.75736 21 8.17157 21 11V16C21 18.8284 21 20.2426 20.1213 21.1213C19.2426 22 17.8284 22 15 22H12C9.17157 22 7.75736 22 6.87868 21.1213C6 20.2426 6 18.8284 6 16V11Z" stroke="%231C274C" stroke-width="1.5"/><path opacity="0.5" d="M6 19C4.34315 19 3 17.6569 3 16V10C3 6.22876 3 4.34315 4.17157 3.17157C5.34315 2 7.22876 2 11 2H15C16.6569 2 18 3.34315 18 5" stroke="%231C274C" stroke-width="1.5"/></svg>') 0 0/20px;
    position: absolute;
    width: 20px;
    height: 20px;
    top: calc(50% - 10px);
    left: 9px;
    opacity: .3
}

.card-pay-gateway-telegram,
.card-pay-gateway-whatsapp {
    color: #000
}

.card-pay-gateway-telegram svg,
.card-pay-gateway-whatsapp svg {
    height: auto !important;
    stroke: #000
}

.ctg-card-info .card-number {
    direction: ltr !important;
    margin-top: 5px !important
}

.card-number-title {
    display: block;
    margin-top: 10px;
    font-size: 14px
}

.receipt-submit-information {
    display: block;
    text-align: center;
    background: #0ce7a2;
    padding: 12px;
    border-radius: 4px;
    color: #000;
    font-size: 16px;
    clear: both;
    margin-top: 10px;
    border: 0 solid #0ce7a2
}

#ctg-previews-container {
    display: grid;
    gap: 15px;
    padding: 10px;
    justify-items: stretch;
    grid-template-columns: 1fr 1fr
}

#ctg-previews-container:has(:only-child) {
    grid-template-columns: 1fr;
    justify-items: center
}

.file-preview-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: .3s
}

.file-preview-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    transform: translateY(-2px)
}

.file-preview-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    margin: 0 0 10px !important;
    display: block
}

.remove-file-btn {
    width: 100%;
    padding: 6px 12px;
    background: #ff727230;
    color: #ad0000 !important;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: .3s;
    display: block !important;
    position: a
}

.ctg-card-tab,
.ctg-loading {
    position: relative
}

.remove-file-btn:hover {
    background: #ff72724d;
    transform: scale(1.05)
}

.ctg-loading:before {
    content: '';
    width: 102%;
    height: 102%;
    position: absolute;
    background: #fff;
    left: -1%;
    top: -1%;
    opacity: .8;
    z-index: 99
}

.ctg-loading:after {
    content: "";
    position: absolute;
    top: 37%;
    right: 0;
    left: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    border-radius: 50px;
    border: 2px solid #d4d4d4;
    border-top-color: #275dfc;
    animation: .3s linear infinite loading;
    z-index: 99
}

#ctg-card-fields-container .ctg-card-field-row.ctg-loading:after {
    right: 24%;
    z-index: 99;
    top: 34px
}

.ctg-receipt-submitted-message {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 15px 0
}

.ctg-card-area .ctg-success-message {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px
}

.ctg-success-message .dashicons {
    color: #28a745;
    font-size: 24px;
    width: 24px;
    height: 24px
}

.ctg-order-status {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 16px
}

.order-status-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    margin: 0 10px;
    background: #6c757d;
    color: #fff
}

.order-status-badge.status-waiting-card-pay {
    background: #ffc107;
    color: #000
}

.order-status-badge.status-processing {
    background: #17a2b8
}

.order-status-badge.status-completed {
    background: #28a745
}

.ctg-reject-reason {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px !important;
    font-size: 14px
}

.ctg-reject-reason strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 700
}

.ctg-card-area .ctg-info-note {
    color: #6c757d;
    font-size: 14px;
    margin-top: 15px;
    padding: 10px;
    background: #fff;
    border-right: 3px solid #007bff;
    border-radius: 3px
}

.ctg-remaining-time {
    font-size: 14px
}

.ctg-card-selectable {
    border: 2px solid #e0e0e0;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: .3s
}

.ctg-card-selectable:hover {
    border-color: #999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.ctg-card-selectable input[type=radio]:checked~.ctg-card-details,
.ctg-card-selectable:has(input[type=radio]:checked) {
    border-color: #2271b1;
    background-color: #f6f7f7
}

.ctg-card-selection-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0
}

.ctg-card-radio {
    width: 20px;
    height: 20px;
    cursor: pointer
}

.ctg-card-radio-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1;
    font-weight: 600;
    font-size: 16px
}

.ctg-bank-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.ctg-card-selection-header .ctg-bank-logo,
.ctg-tab-no-logo {
    width: 48px;
    height: 48px
}

.ctg-card-details {
    padding-left: 35px
}

.ctg-card-selectable .ctg-card-details,
.ctg-tab-content.ctg-tab-active {
    display: block
}

.ctg-cards-tabs-wrapper {
    margin: 20px 0
}

.ctg-cards-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px
}

.ctg-card-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: #fff;
    transition: .3s;
    opacity: .5
}

.ctg-card-tab:hover {
    background: #f0f0f0;
    border-color: #ddd
}

.ctg-card-tab.ctg-tab-active {
    background: #fff;
    border-color: #dbdbdb;
    opacity: 1
}

.ctg-card-tab img,
.woocommrece #payment .ctg-card-tab img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 6px;
    margin: 0 !important
}

.ctg-tab-no-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    border-radius: 6px
}

.ctg-tab-bank-name {
    font-size: 12px;
    color: #666;
    text-align: center;
    font-weight: 500
}

.ctg-card-tab.ctg-tab-active .ctg-tab-bank-name {
    color: #2271b1;
    font-weight: 600
}

.ctg-cards-tab-contents {
    position: relative;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 14px
}

.ctg-tab-content {
    display: none;
    animation: .3s ctgFadeIn
}

@keyframes ctgFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.ctg-bank-logo-container {
    text-align: center;
    margin-bottom: 20px
}

.ctg-bank-logo-single {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

@keyframes loading {
    0% {
        transform: rotate(0)
    }

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

@media (max-width:768px) {

    .ctg-card-tab img,
    .ctg-tab-no-logo {
        width: 40px;
        height: 40px
    }

    .ctg-cards-tabs {
        gap: 5px
    }

    .ctg-card-tab {
        min-width: 80px;
        padding: 10px 15px
    }

    .ctg-tab-no-logo {
        font-size: 16px
    }

    .ctg-tab-bank-name {
        font-size: 11px
    }

    #ctg-previews-container {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px
    }

    .file-preview-item img {
        height: 80px
    }
}

@media (max-width:480px) {
    #ctg-previews-container {
        grid-template-columns: repeat(2, 1fr)
    }
}