/**
 * @author SMDesign Studio (https://www.smdesign-studio.com/)
 * @copyright Copyright (c) 2025 SMDesign Studio (http://www.smdesign.rs/)
 * @package Smdesign_PaySpot
 * @license See LICENSE.txt for license details.
 */
.payment-cards {
	text-align:center;
}
.payment-cards .cards-inner.credit-cards-wrapper ul {
	margin-bottom: 0;
    padding: 5px 10px;
}
.payment-cards .cards-inner.credit-cards-wrapper ul li{
	display: inline-block;
	margin-bottom: 0;
}
.payment-cards .cards-inner.credit-cards-wrapper ul li a{
	text-decoration: none;
}
.payment-cards .cards-inner.credit-cards-wrapper ul li img {
    text-align: center;
    max-height: 40px;
    margin-right: 5px;
	width: auto;
}	
@keyframes grow {
	from {
		width: 0%
	} to {
		width: 100%;
	}
}
#color-bar {
	position: relative;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}
#color-bar input {
	display: none;
}
#color-bar label {
  position: relative;
  display: block;
  width: 100%;
  height: 20px;
  background: transparent;
  border-radius: 0.4rem;
  border: 2px solid white;
  overflow: hidden;
  box-shadow: -2px 0 8px 0 rgba(white, 0.6);
}
#color-bar label div {
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(297deg,#2e55c9 4.96%, #d70027 20%, #002696 70.98%);
	height: 100%;
	width: 0%;
	box-shadow: 0 0 8px 1px white inset;
	animation: grow 2s forwards;
}
#color-bar label div:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	mix-blend-mode: overlay;
	opacity: 0.5;
}
#color-bar span {
	display: inline-block;
	color: #4F9CC0;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-top: 0.7rem;
}
#color-bar span:last-child {
	float: right;
}

.payment-method .payment-options input[type='radio']+label,
.amcheckout-step-container input[type='radio']+label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 10px;
	cursor: pointer;
}

.payment-method .payment-options {
	padding-bottom: 15px;
}

.checkout-index-index .payment-method .payment-options .field,
.amcheckout-step-container .checkout-payment-method .amcheckout-payment-methods .payment-method._active .payment-method-content>*>.field {
	margin-bottom: 10px;
}

.amcheckout-step-container .checkout-payment-method .amcheckout-payment-methods .payment-method._active .payment-method-content,
.checkout-index-index .payment-method._active .payment-method-content {
    padding: 0 20px 0 22px;
}

.payment-method .payment-options .field:not(:has(input[type="radio"]:checked)) {
  opacity: 0.7;
}

.payment-method .payment-options input[type='radio']+label span {
	flex: auto;
    text-align: left;
}

.payment-method .payment-options input[type='radio']+label:before {
    margin-right: 3px;
    margin-top: 0;
}

@media screen and (max-width: 1400px) {
	.payment-method .payment-options input[type='radio']+label span {
		font-size: 14px;
	}
}

@media screen and (max-width: 832px) {
	.payment-cards .cards-inner.credit-cards-wrapper ul li img {
		margin-bottom: 5px;
	}
}

@media screen and (max-width: 420px) {
	.payment-method .payment-options input[type='radio']+label span {
        font-size: 16px;
        flex: 100%;
    }
}