body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}
.payment-container {
    max-width: 800px;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.amount-sum {
    margin-top: 40px;
    text-align: left;
    align-items: start;
    font-weight: normal;
    font-size: 18px;
}

.amount {
    font-weight: normal;
}

.order-info {
    text-align: left;
}

.order-info-title {
    font-weight: normal;
}

.payment-container button {

}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header h2, p {
    text-align: start;
}

.header svg {
    /*margin-left: 20px;*/
    height: 40px;
}

.frame {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    height: auto;
    overflow: visible;
}

.frame svg {
    min-width: 350px;
    width: 100%;
    margin-right: 20px;
}

.card-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.card-section img {
    width: 100%;
    max-width: 300px;
}

.payment-form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    font-family: Arial, sans-serif;
}

.payment-form .form-group {
    margin-bottom: 20px;
    position: relative;
}

.payment-form label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
    font-size: 14px;
    color: #333;
}

.payment-form input[type="text"],
.payment-form input[type="password"] {
    width: 100%;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid #ccc;
    background: none;
    font-size: 14px;
    color: #333;
    outline: none;
    transition: border-color 0.3s ease;
}

.payment-form input[type="text"]:focus,
.payment-form input[type="password"]:focus {
    border-bottom: 1px solid #28a745;
}

.payment-form input[type="text"]::placeholder,
.payment-form input[type="password"]::placeholder {
    font-size: 12px;
    color: #aaa;
}

.payment-form .form-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.payment-form .form-group.half-width {
    flex: 1;
}

.payment-form .form-group.small-width {
    width: 10%;
}

.payment-form .expiry-data {
    width: 25%;
    align-items: center;
}

.payment-form .expiry-data input {
    width: 45%;
}

.payment-form .pay-btn {
    width: auto;
    padding: 10px 15px;
    font-size: 14px;
    color: #fff;
    background-color: #28a745;
    border: none;
    border-radius: 4px;
    text-align: center;
    transition: background-color 0.3s ease;
    display: flex;
    margin-left: auto;
}
.payment-form .pay-btn.disabled {
    background-color: #b3b3b3;
}

.payment-form .pay-btn:hover {
    background-color: #218838;
}
.payment-form .pay-btn.disabled:hover {
    background-color: #b3b3b3;
    cursor: default;
}

.pay-btn {
    width: 100%;
    max-width: 400px;
    margin-top: 20px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    border: none;
    padding: 15px;
    font-size: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.pay-btn.disabled {
    background-color: #b3b3b3;
}
.pay-btn:hover {
    background-color: #45a049;
}
.pay-btn.disabled:hover {
    background-color: #b3b3b3;
    cursor: default;
}

.card-details label,
.terms label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
}
.card-details input,
.terms input {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.card-cred {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-expiry {
    align-items: center;
}

.expiry-data {
    display: flex;
    align-items: center;
}

.expiry-data input {
    width: 50px;
    margin-right: 5px;
    text-align: center;
}

.card-expiry span {
    margin-right: 5px;
    font-size: 20px;
    margin-bottom: 10px;
}

.card-cvv {
    align-items: end;
}
.card-cvv label {
    text-align: center;
    margin-right: 10px;
}

.cvv-data {
    display: flex;
}

.cvv-data input {
    width: 50px;
    text-align: center;
    margin-right: 5px;
}

.footer-logos {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.footer-logos img {
    height: 38px;
}

@media (max-width: 650px) {
    #card {
        display: none;
    }
}

.card-display {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: 180px;
    background: url('/images/card.jpg') center/cover no-repeat;
    color: black;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    text-align: left;
}

#bank-logo {
    display: none;
}

.bank-logo {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 50px;
    height: auto;
}

.card-display img {
    height: 38px;
}

.card-display .card-number,
.card-display .card-holder,
.card-display .card-expiry {
    position: relative;
    font-family: 'cc font', monospace
}

.card-display .card-number {
    top: -10px;
    font-size: 22px;
    text-align: center;
    letter-spacing: 2px;
}

.card-display .card-expiry .valid-thru {
    position: relative;
    top: -5px;
    justify-content: left;
    line-height: 0;
}

.card-display .card-expiry .valid-thru #thru {
    font-size: 8px;
    margin-right: 3px;
}

.card-display .card-expiry .valid-thru #valid {
    font-size: 6.5px;
}

.card-display .card-expiry {
    display: flex;
    left: 50px;
}

.card-display .card-expiry span {
    font-size: 18px;
    margin-right: -1px;
}

.card-display .card-holder {
    left: 15px;
    font-size: 16px;
}

.card-logo {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}

.chips {
    margin-top: 40px;
    margin-left: 10px;
    height: 70px;
    width: 80px;
    transform: translateZ(25px);
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='50px' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cg id='surface1'%3E%3Cpath fill='%23F5CE85' d='M8.9,34.5c-6.4,0.1-6.4,0.1-6.4-6.4V11.9c0-3.5-0.1-6.4,3.4-6.4h25.3c6.4,0,6.4,0,6.4,6.4v16.3 c0,6.4,0,6.4-6.4,6.4L8.9,34.5z'/%3E%3Cpath fill='%23967A44' d='M31.1,6C37,6,37,6,37,11.9v16.3c0,5.9,0,5.9-5.9,5.9H8.9c-5.9,0-5.9,0-5.9-6V11.9C3,8.2,2.7,6,6,6H31.1 M31.1,5H9.2C2.3,5,2,5,2,11.9v16.3C2,35,2,35,8.9,35h22.3c6.9-0.1,6.9-0.1,6.9-6.9V11.9C38.1,5,38.1,5,31.1,5z'/%3E%3Cpath fill='%23967A44' d='M29,35c-3.3,0-6-2.7-6-6s2.7-6,6-6h8.5v1H29c-2.8,0-5,2.2-5,5s2.2,5,5,5V35z'/%3E%3Cpath fill='%23967A44' d='M11,35v-1c2.8,0,5-2.2,5-5s-2.2-5-5-5H2.5v-1H11c3.3,0,6,2.7,6,6S14.3,35,11,35z'/%3E%3Cpath fill='%23967A44' d='M37.5,17H27c-2.2,0-4-1.8-4-4s1.8-4,4-4h2.1v1H27c-1.7,0-3,1.3-3,3s1.3,3,3,3h10.5V17z'/%3E%3Cpath fill='%23967A44' d='M28,16h1v7.5h-1V16z'/%3E%3Cpath fill='%23967A44' d='M13,17H2.5v-1H13c1.7,0,3-1.3,3-3s-1.3-3-3-3h-2.1V9H13c2.2,0,4,1.8,4,4S15.2,17,13,17z'/%3E%3Cpath fill='%23967A44' d='M11,16h1v7.5h-1V16z'/%3E%3C/g%3E%3C/svg%3E");
}

.pay-wave {
    transform: translateZ(30px);
    float: right;
    position: absolute;

    margin: 5px 15px;
    top: 0;
    left: 0;
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='56' viewBox='0 0 46 56'%3E%3Ctitle%3EContactlessIndicator 000%3C/title%3E%3Cpath fill='none' stroke='%23FFF' stroke-width='6' stroke-linecap='round' d='m35,3a50,50 0 0,1 0,50M24,8.5a39,39 0 0,1 0,39M13.5,13.55a28.2,28.5 0 0,1 0,28.5M3,19a18,17 0 0,1 0,18'/%3E%3C/svg%3E");
}