@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";

body {
	background: #f8f9fa;
	/*font-family: 'Segoe UI', sans-serif;*/
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
}

.card {
	/*border-radius: 20px;*/
	/*box-shadow: 0 4px 12px rgba(0,0,0,0.05);*/
}

.card:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease-in-out;
}

.btn-dark:hover {
	background-color: #333;
	transition: background-color 0.2s ease-in-out;
}

.wallet-btn,
.method-btn {
	transition: transform 0.2s ease-in-out;
}

.wallet-btn:hover,
.method-btn:hover {
	transform: scale(1.05);
}

.company-logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
	margin-right: 10px;
}

.nav-tabs .nav-link.active {
	font-weight: bold;
	background-color: #f1f1f1;
	border-bottom: 3px solid #000;
}

.nav-tabs .nav-link {
	border-radius: 10px 10px 0 0;
}

.ge-card-selectable {
	height: 45px !important;
	width: 120px !important;
}

.ge-card-logo {
	width: 35px !important;
}

.nav-link.active {
	background: linear-gradient(45deg, #4099ff, #73b4ff);
	color: #fff !important;
	border-color: transparent;
	font-weight: bold;
	font-size: 13px !important;
	transition: all 0.3s ease-in-out;
}

.nav-link {
	color: #0009;
	/*6c757d*/
	transition: all 0.2s ease-in-out;
}

.tab-pane {
	opacity: 0;
	transform: scale(0.97);
	transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.tab-pane.active.show {
	opacity: 1;
	transform: scale(1);
}

/* تأثير التكبير عند التفعيل */
.nav-link.active {
	color: #fff !important;
	font-weight: bold;
	background: linear-gradient(45deg, #4099ff, #73b4ff);
	transform: scale(1);
	transition: all 1s ease-in-out;
}

/* تأثير عند المرور Hover */
.nav-link .active:hover {
	color: #fff !important;
	transform: scale(1);
}

.c-details span {
	font-weight: 300;
	font-size: 13px;
}

.icon {
	width: 50px;
	height: 50px;
	/*background-color: #eee;*/
	color: #fff;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 39px;
}

.badge span {
	background-color: #fffbec;
	width: 60px;
	height: 25px;
	padding-bottom: 3px;
	border-radius: 5px;
	display: flex;
	color: #fed85d;
	justify-content: center;
	align-items: center;
}

.bg-c-blue {
	background: linear-gradient(45deg, #4099ff, #73b4ff) !important;
}

.bg-c-green {
	background: linear-gradient(45deg, #2ed8b6, #59e0c5) !important;
}

.bg-c-yellow {
	background: linear-gradient(45deg, #ffb64d, #ffcb80) !important;
}

.bg-c-pink {
	background: linear-gradient(45deg, #ff5370, #ff869a) !important;
}

.bg-c-blue:hover {
	background: linear-gradient(45deg, #4099ff, #73b4ff) !important;
}

.bg-c-green:hover {
	background: linear-gradient(45deg, #2ed8b6, #59e0c5) !important;
}

.bg-c-yellow:hover {
	background: linear-gradient(45deg, #ffb64d, #ffcb80) !important;
}

.bg-c-pink:hover {
	background: linear-gradient(45deg, #ff5370, #ff869a) !important;
}

.bg-icon-box-01 {
	opacity: 0.5;
	z-index: 0;
	transform: rotate(-45deg);
}

/*-----------------------------*/
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ge-card-label {
	display: inline-block;
	cursor: pointer;
	position: relative;
}

.ge-card-selectable {
	height: 45px !important;
	width: 120px !important;
	border: 1px solid #e0e0e0;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	position: relative;
	overflow: hidden;
}

.ge-card-logo {
	width: 35px !important;
}

/* تأثيرات التحديد */
.ge-card-radio:checked+.ge-card-selectable {
	border: 1px solid #4285f4;
	box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.2);
	animation: cardSelect 0.4s ease-out;
}

.ge-card-selectable:hover {
	transform: translateY(-0px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@keyframes cardSelect {
	0% {
		transform: scale(0.98);
		box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.2);
	}

	50% {
		transform: scale(1.02);
		box-shadow: 0 0 0 6px rgba(66, 133, 244, 0);
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
	}
}

stored-cards-scroll {
	scrollbar-width: thin;
	scrollbar-color: #e0e0e0 transparent;
}

stored-cards-scroll::-webkit-scrollbar {
	height: 4px;
}

stored-cards-scroll::-webkit-scrollbar-thumb {
	background-color: #e0e0e0;
	border-radius: 2px;
}

/*-----------------------------*/
.card-input-style {
	position: relative;
	border-radius: 8px;
	border: 1px solid #cccccc30 !important; /*#ccc5*/
	background: white;
	/*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/
	/*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 1px #fff, 0 1px 0 #fff;*/
	transition: all 0.3s ease;
	height: 40px;
}

.card-input-style:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn {
	height: 40px;
}

[data-payment-item].selected {
	border: 1px solid #3b82f6 !important;
	background-color: rgba(59, 130, 246, 0.1);
	/*box-shadow: inset 0px 1px 0 0 hsla(0,0%,20%,.2),0 1px 3px 0 #bbb6b6;*/
	opacity: 0.8;
}

[data-payment-item] .form-check-input {
	display: none;
}

[data-payment-item][data-show-radio] .form-check-input {
	display: block;
}



/*-------------------------------------------------*/



        .controls-area {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #007bff;
            border-radius: 8px;
            background-color: #e9f5ff;
        }

        .controls-area .form-check {
            margin-bottom: 10px; /* مسافة بين المفاتيح */
        }

         /* تنسيق عام للعناصر التي يتم التحكم فيها */
         .controlled-element {

         }

         .elements-area {

         }