/* ===========================
   POPUP.CSS - Organized CSS for Mobile Legends popups
   =========================== */

/* ===========================
   FORM FIXES - Alignment and responsive fixes for forms
   =========================== */
/* Fixes for form alignment in playerid_verification popup */
.playerid_verification .popup-label-verification {
    padding: 0 15px 20px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix id-grid-container to ensure proper alignment */
.id-grid-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Ensure floats are contained */
    display: block !important; /* Ensure block display */
}

/* Game ID column alignment */
.playerid_verification .game-id-column,
.popup-label-verification .game-id-column,
.id-grid-container .game-id-column {
    float: left !important;
    width: 65% !important;
    box-sizing: border-box !important;
    padding-right: 2px !important;
}

/* Zone ID column alignment */
.playerid_verification .zone-id-column,
.popup-label-verification .zone-id-column,
.id-grid-container .zone-id-column {
    float: right !important;
    width: 35% !important;
    box-sizing: border-box !important;
    padding-left: 2px !important;
}

/* Ensure proper sizing for inputs */
.game-id-column .popup-input,
.zone-id-column .popup-input {
    width: 100% !important;
    box-sizing: border-box !important;
}

.game-id-column input,
.zone-id-column input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Media queries for mobile */
@media (max-width: 360px) {
    .playerid_verification .popup-label-verification {
        padding: 0 15px 20px 15px !important;
    }
    
    .game-id-column {
        width: 60% !important;
    }
    
    .zone-id-column {
        width: 38% !important;
    }
}

/* ===========================
   UTILITY CLASSES
   =========================== */
.center-content {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex: 1;
	height: 100%;
}

.loading-content-verification {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	padding: 50px 20px;
	min-height: 200px;
}

.content-spin {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	padding: 20px 0px;	
}

.center-horizontal {
	display: flex;
	justify-content: center;
	text-align: center;
}

.center-text {
	text-align: center;
}

.center-items {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

/* Additional styles for button centering */
.center-horizontal button {
	margin: 0 5px;
}

.center-horizontal button:only-child {
	margin: 0;
}

.popup-form-login .center-horizontal {
	flex-direction: column;
	gap: 20px; /* Menambahkan jarak vertikal antara tombol */
	padding: 20px 0; /* Menambahkan padding atas dan bawah */
}

/* ===========================
   NEW POPUP STYLES
   =========================== */
.namaskin {
font-size: 12px;
color: #CFB990;
}
.namahero {
font-size: 12px;
}
.popup-alert-spin {
	width: 100%;
	height: auto;
	margin-top: 8px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 8px;
	padding: 15px;
	padding-top: 15px;
	background-image: linear-gradient(to right, #66000000, #3C5F88, #66000000);
    border: 0px solid rgba(255,255,255,0.1);
	color: #D2EBFF;
	font-size: 12px;
	font-family: arial, sans-serif;
	font-weight: 400;
	text-align: center;
	line-height: 15px;
	display: block;	
}
.popup-result-display {
    background: url('../assets_img/item_off.png') no-repeat center;
    background-size: 100% 100%;
    width: 100px;
    height: auto;
    aspect-ratio: 1 / 1;    
}

.popup-result-display .valueimgalex {
    width: 93%;
    height: 93%;
    object-fit: contain;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.valueimgalex {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 5px;
}

.itemRewards_spin .popup-alert-rewards-spin {
    background: transparent;
    text-align: center;
    padding: 5px 15px;
    line-height: 1.4;
    height: auto;
    flex: 0 0 auto;
}
.popup-alert-rewards-spin {
	background: transparent;
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1px;
	padding: 5px;
	padding-top: 0px;
	border-bottom: 0px solid #405E8D;
	color: #D2EBFF;
	font-size: 10px;
	font-family: arial, sans-serif;
	font-weight: 400;
	text-align: center;
	line-height: 15px;
	display: block;
}

.popup-alert-rewards-spin span {
	color: #CFB990;
}

.items-center, .popup-result-display {
	text-align: center;
	margin: 0 auto;
}
	
/* ===========================
   GAME ID VERIFICATION POPUP STYLES
   =========================== */
/* These styles are now integrated with the standard popup system */

/* Special styling for the player ID verification popup */
.success_login .success-log {
    width: 100%;
    margin-bottom: 0px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;   
}

.success_login .success-log img {
    width: 20%;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.playerid_verification {
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Adjust form styling for better appearance */
.playerid_verification #goInputCheckIdForm {
    display: block;
    height: auto;
}

.playerid_verification .popup-content {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    height: auto;
    min-height: 0; /* Changed from 360px to let content determine height */
    max-height: 90vh;
}

.playerid_verification .popup-alert-verification {
    text-align: center;
    padding: 5px 15px;
    line-height: 1.4;
    height: auto;
    flex: 0 0 auto;
}

.playerid_verification .header-playid {
    width: 100%;
    margin-bottom: 0px;
    text-align: center;
    padding: 15px;
    padding-top: 10px;
    padding-bottom: 10px; 
    margin-top: 8px;  
    border: .1px solid #819CD1;
    background: #223A54;
}

.playerid_verification .header-playid img {
    width: 70%;
    max-width: 260px;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.playerid_verification .popup-label-verification {
    margin-top: 5px;
    padding: 0px;
    position: relative;    
    box-sizing: border-box;
    width: 100%;
    overflow: hidden; /* Clearfix for floating children */
}

.playerid_verification .popup-label-verification label {
    color: #9DBFE3;
    font-size: 13px;
    margin-bottom: 0px;
    display: block;
    font-weight: 400;
}

.playerid_verification .popup-input {
    position: relative;
    margin-bottom: 0;
}

.playerid_verification .popup-input input {
    background: #223A54;
    border: 1px solid #4A6FA5;
    padding: 5px 8px;
    color: #fff;
    font-size: 13px;
    border-radius: 2px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 35px;
}

.playerid_verification .popup-input input:focus {
    border-color: #CFB990;    
    outline: none;
}

.playerid_verification .popup-input input::placeholder {
    color: rgba(155, 179, 205, 0.7);
}
.warn-container {
    width: 100%;
    position: flex;
    z-index: 10;
    min-height: 18px; /* Minimal height untuk container */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.warn {
    width: auto;
    padding: 3px 0;
    margin-top: 0px;
    color: #CFB990;
    margin: 0;
    font-size: 12px;
    font-family: arial, sans-serif;
    text-align: center;
    display: none;    
    line-height: 1.4;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5); /* Menambahkan text shadow untuk keterbacaan */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Style when warning is visible */
.warn.show {
    display: block;
    opacity: 1;
}
.warn.respon {
    color: #A1CBF3;
    display: none; /* Hide by default */
}
.warn.wrong, .warn.error {    
    font-weight: 400;
    color: #FF5E5B;
    display: none; /* Hide by default */
}

.warning-text {
    color: #FF5E5B;
}

.text-yellow {
    color: #CFB990;
}

.playerid_verification .warn-container {
    margin-top: 0px;
}

/* Special styles for the popup-form-login-idl/idr elements */
.popup-form-login-idl, 
.popup-form-login-idr {
    width: 100%;
    height: auto;
    margin-top: 10px;
    box-sizing: border-box;
}

/* Grid layout for Game ID and Zone ID inputs */
.id-grid-container {
    width: 100%;  
    margin-top: 10px;  
    margin-bottom: 0px;
    padding: 0;
    overflow: hidden; /* Clearfix for floats */
    box-sizing: border-box;
}

/* Ensure label and input styling is consistent across both columns */
.id-grid-container label {
    font-size: 12px;
    color: #9DBFE3;
    display: block;
    margin-bottom: 0px;
    font-weight: 400;
}

.game-id-column {
    float: left;
    width: 60%; /* Game ID takes 60% of width */
    box-sizing: border-box;
}

.zone-id-column {
    float: right;
    width: 38%; /* Zone ID takes 38% of width */
    box-sizing: border-box;
}

/* Ensure consistent padding and alignment for both columns */
.game-id-column .popup-input,
.zone-id-column .popup-input {
    width: 100%;
    box-sizing: border-box;
    height: 35px;
    margin-bottom: 0;
    overflow: hidden; /* Ensure container holds floated elements */
}

/* Make the Zone ID input match the other form fields */
.game-id-column input,
.zone-id-column input {
    width: 100%;
    height: 35px;
    box-sizing: border-box;
    font-size: 13px;
    padding: 5px 8px;
    color: #fff;
    background: #223A54;
    border-radius: 2px;
    border: 1px solid #4A6FA5;
}

.popup-footer .center-horizontal {
	gap: 10px;
	flex-wrap: wrap;
}

/* ===========================
   ANIMATIONS
   =========================== */
@property --angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes rotate {
	to {
		--angle: 0deg;
		visibility: hidden;
	}
}

@keyframes rotatec {
	to {
		--angle: 360deg;
	}
}

@keyframes zoom-in {
	0% {
		transform: scale(0, 0);
	}
	100% {
		transform: scale(1, 1);
	}
}

@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes flip {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

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

.zoom-in {
	animation: zoom-in 0.5s forwards;
}

.flip {
	--angle: 360deg;
	border-image: linear-gradient(var(--angle), #00c4de, #1b56ff, #00c4de, #1b56ff) 1;
	animation-name: flip;
	animation: fade 1s forwards, flip 0.5s forwards, rotate 5s linear infinite;
}

/* ===========================
   POPUP OVERLAY CONTAINERS
   =========================== */
.popup {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-overlay {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	box-sizing: border-box;
	overflow: hidden;
	/* Ensure perfect centering */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.popup-loading {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ===========================
   POPUP CONTAINERS
   =========================== */

.popup-content {
	background: linear-gradient(to bottom, rgba(32,56,110,0.95), rgba(40,70,125,0.95));
	width: 100%;
	border: 1px solid #405E8D;
	display: flex;
	flex-direction: column;
	min-height: 0; /* No minimum height to let content determine height */
	height: auto;
	max-height: 90vh; /* Maximum height to ensure it fits in viewport */
	position: relative;
	/* Perfect centering */
	margin: 0 auto;
	/* Additional centering enhancement for all screens */
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
	justify-content: flex-start; /* Align content to top */
}

/* Border-popup.png overlays on top of the 1px border */
.popup-content::after {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	border: 1px solid #3d4f86;
	border-image: url(../assets_img/border-popup.png) 10 round;
	border-image-width: 8px;
	pointer-events: none;
	z-index: 10;
}

/* ===========================
   POPUP NAVBAR (NEW STRUCTURE)
   =========================== */
.popup-navbar {
	background: transparent;
	padding: 8px 16px;
	border-bottom: 1px solid rgba(74,111,165,0.3);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 50px;
	position: relative;
}

/* Invisible placeholder for when no close button exists */
.popup-navbar .popup-close-placeholder {
	width: 32px;
	height: 32px;
	visibility: hidden;
}

/* ===========================
   POPUP CONTENT AREA (NEW STRUCTURE)
   =========================== */
.popup-isikonten {
	flex: 0 0 auto; /* Changed to flex: 0 0 auto for true auto height */
	padding: 16px 20px;
	background: transparent;
	overflow-y: auto;
	height: auto; /* Auto height based on content */
	max-height: none; /* Remove max-height restriction */
	scrollbar-width: thin; /* For Firefox */
	scrollbar-color: rgba(74,111,165,0.6) rgba(0,0,0,0.2); /* For Firefox */
	display: flex;
	flex-direction: column;
}

/* Ensure all content within popup-isikonten follows auto height */
.popup-isikonten > div,
.popup-isikonten > form {
	height: auto;
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
}

/* Fix form layout */
#goInputCheckIdForm {
	height: auto;
	display: block;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

/* Custom scrollbar styling for Webkit browsers (Chrome, Safari, Edge) */
.popup-isikonten::-webkit-scrollbar {
	width: 8px;
}

.popup-isikonten::-webkit-scrollbar-track {
	background: rgba(0,0,0,0.2);
	border-radius: 4px;
}

.popup-isikonten::-webkit-scrollbar-thumb {
	background: rgba(74,111,165,0.6);
	border-radius: 4px;
}

/* Navbar elements for new structure */
.popup-navbar .popup-logo {
	display: flex;
	align-items: center;
	z-index: 3;
	flex-shrink: 0;
	justify-content: flex-start;
	position: relative;
	margin-left: -5px;
	margin-top: -3px;
}

.popup-navbar .popup-logo img {
	width: 80px;
	height: auto;
	object-fit: contain;
}

.popup-navbar .popup-title {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	margin: 0;
	padding: 0 10px;
	z-index: 2;
	pointer-events: none;
	width: auto;
	max-width: 60%;
}

.popup-navbar .popup-title h3 {
	color: #E8F4FD;
	font: 400 14px Arial, sans-serif;
	letter-spacing: 0.5px;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.popup-navbar .popup-close {
	width: 32px;
	height: 32px;
	cursor: pointer;
	transition: transform 0.3s ease;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.popup-navbar .popup-close img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.popup-navbar .popup-close:hover {
	transform: scale(1.1);
}

/* ===========================
   POPUP BODY (Legacy Structure)
   =========================== */
.popup-body {
	padding: 16px 20px;
	background: transparent;
	flex: 0 0 auto;
	height: auto;
}

.form-section {
	display: flex;
	align-items: center;
	background: transparent;
	margin: 20px 0;
	border: 0px solid rgba(255,255,255,0.1);
	flex-direction: row-reverse;
	height: auto;
	flex: 0 0 auto;
}

/* ===========================
   ITEM REWARD CONFIRMATION SPECIFIC STYLES
   =========================== */
.itemReward_confirmation .item-confirmation-container {
	display: grid;
	grid-template-columns: 30% 68%;
	align-items: start;
	background: transparent;
	border: 0px solid rgba(255,255,255,0.1);
	max-width: 380px;
	margin: 0 auto;
	justify-content: center;
	gap: 8px;
	min-height: 80px;
	height: auto; /* Ensure auto height */
	padding: 8px;
	margin-top: 0; /* Remove negative margins */
	margin-bottom: 0; /* Remove negative margins */
	box-sizing: border-box;
}

.itemReward_confirmation .item-image {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: auto;
	padding: 0px;
	box-sizing: border-box;
}

.itemReward_confirmation .art-card {
	width: 100%;
	max-width: none;
	height: auto;
	background: transparent;
	border: 1px solid rgba(74,111,165,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	box-sizing: border-box;
}
.item-image {    
	border: 1px solid #fff;	
}
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.item-image {
    --angle: 360deg;
    border-image: linear-gradient(var(--angle), #00c4de, #1b56ff, #00c4de, #1b56ff) 1;
    animation: 5s rotate linear infinite;
}

@keyframes rotate {
    to {
        --angle: 0deg;
    }
}

.itemReward_confirmation .item-details {
	display: flex;
	flex-direction: column;
	height: auto;
	padding: 0px;
	padding-top: 0px;
	box-sizing: border-box;
	align-self: start;
}

.itemReward_confirmation .payment-card {
	background: rgba(0,0,0,0.4);
	border: 1px solid rgba(74,111,165,0.6);
	padding: 8px;
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto;
	flex: 1;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	min-width: 0;
}

.itemReward_confirmation .payment-header {
	color: #E8F4FD;
	font-size: 12px;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(74,111,165,0.4);
}

.itemReward_confirmation .payment-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	background: transparent;
	border: none;
	padding: 0;
	margin: 6px 0;
}

.itemReward_confirmation .payment-option {
	display: flex;
	align-items: center;
	gap: 0;
}

.itemReward_confirmation .icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(74,111,165,0.6);
	border: 1px solid rgba(74,111,165,0.6);
	border-right: none;
	padding: 2px;
	min-height: 18px;
	min-width: 28px;
	box-sizing: border-box;
	border-radius: 2px 0 0 2px;
}

.itemReward_confirmation .icon-box img {
	width: 19px;
	height: 19px;
}

.itemReward_confirmation .row-label {
	color: #B2D2E7;
	font-size: 12px;
	margin-bottom: -3px;
}

.itemReward_confirmation .amount-box {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 400;
	background: rgba(0,0,0,0.4);
	border: 1px solid rgba(74,111,165,0.4);
	padding: 2px 8px;
	min-height: 26px;
	flex: 1;
	box-sizing: border-box;
	overflow: hidden;
	text-align: center;
	border-radius: 0 2px 2px 0;
}

.itemReward_confirmation .amount-box span {
	font-weight: 400;
	white-space: nowrap;
	font-size:14px;
}

.itemReward_confirmation .or-separator {
	text-align: center;
	color: #9fb7d6;
	opacity: 0.9;
	margin: 0;
	font-size: 12px;
}

.itemReward_confirmation .item-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
}

.itemReward_confirmation .art-card {
	width: 100%;
	max-width: none;
	height: auto;
	background: transparent;
	border: 1px solid rgba(74,111,165,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.itemReward_confirmation .art-card img,
.itemReward_confirmation .art-card .redeemRewardsImgs {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	object-fit: contain;
	border: none;
	box-shadow: none;
	display: block;
}

.icon-inline {
	height: 1em;
	width: auto;
	vertical-align: text-bottom;
}

/* ===========================
   ITEM REWARD CONFIRMATION 2 SPECIFIC STYLES (DIAMOND ONLY)
   =========================== */
.itemReward_confirmation2 .item-confirmation-container {
	display: grid;
	grid-template-columns: 30% 68%;
	align-items: start;
	background: transparent;
	border: 0px solid rgba(255,255,255,0.1);
	max-width: 380px;
	margin: 0 auto;
	justify-content: center;
	gap: 8px;
	min-height: 110px;
	padding: 8px;
	margin-top: -20px;
	margin-bottom: -30px;
	box-sizing: border-box;
}

.itemReward_confirmation2 .item-image {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: auto;
	padding: 0px;
	box-sizing: border-box;
}

.itemReward_confirmation2 .art-card {
	width: 100%;
	max-width: none;
	height: auto;
	background: transparent;
	border: 1px solid rgba(74,111,165,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px;
	box-sizing: border-box;
}

.itemReward_confirmation2 .item-details {
	display: flex;
	flex-direction: column;
	height: auto;
	padding: 0px;
	padding-top: 0px;
	box-sizing: border-box;
	align-self: start;
}

.itemReward_confirmation2 .payment-card {
	background: rgba(0,0,0,0.4);
	border: 1px solid rgba(74,111,165,0.6);
	padding: 8px;
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto;
	flex: 1;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	min-width: 0;
}

.itemReward_confirmation2 .payment-header {
	color: #E8F4FD;
	font-size: 12px;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(74,111,165,0.4);
}

.itemReward_confirmation2 .payment-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	background: transparent;
	border: none;
	padding: 0;
	margin: 6px 0;
}

.itemReward_confirmation2 .payment-option {
	display: flex;
	align-items: center;
	gap: 0;
}

.itemReward_confirmation2 .icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(74,111,165,0.6);
	border: 1px solid rgba(74,111,165,0.6);
	border-right: none;
	padding: 2px;
	min-height: 18px;
	min-width: 28px;
	box-sizing: border-box;
	border-radius: 2px 0 0 2px;
}

.itemReward_confirmation2 .icon-box img {
	width: 19px;
	height: 19px;
}

.itemReward_confirmation2 .row-label {
	color: #B2D2E7;
	font-size: 12px;
	margin-bottom: -3px;
}

.itemReward_confirmation2 .amount-box {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 400;
	background: rgba(0,0,0,0.4);
	border: 1px solid rgba(74,111,165,0.4);
	padding: 2px 8px;
	min-height: 26px;
	flex: 1;
	box-sizing: border-box;
	overflow: hidden;
	text-align: center;
	border-radius: 0 2px 2px 0;
}

.itemReward_confirmation2 .amount-box span {
	font-weight: 400;
	white-space: nowrap;
	font-size:14px;
}

.itemReward_confirmation2 .art-card img,
.itemReward_confirmation2 .art-card .redeemRewardsImgs {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	object-fit: contain;
	border: none;
	box-shadow: none;
	display: block;
}

/* ===========================
   POPUP FOOTER
   =========================== */
.popup-footer {
	padding: 8px 20px 8px;
	background: transparent;
	border-top: 1px solid rgba(74,111,165,0.3);
	margin-top: 0; /* No margin to avoid empty space */
	min-height: 0px;
	flex-shrink: 0;
	text-align: center;
	overflow: hidden; /* Clear floats */
	align-self: flex-end; /* Ensures footer sticks to bottom */
	width: 100%;
}

/* Clear floats after popup-footer */
.popup-footer::after {
	content: "";
	display: table;
	clear: both;
}
.popup-footer .btn-primary-single {
    background: linear-gradient(to bottom, #a88456, #c2a06d) no-repeat center / 100% 100%;
	border: 1px solid #D1C891;
	color: #E7E0D6;
	padding: 10px 15px;
	font: 400 12px Arial, sans-serif;
	cursor: pointer;
	transition: transform 0.3s ease;
	letter-spacing: 0.5px;
	float: none;
	width: 45%;
	margin: 0 auto;
	display: block;
}

/* Two button layout - float left and right */
.popup-footer .btn-secondary,
.popup-footer .btn-ticket-action {
	float: left;
	width: 45%;
	margin-right: 5%;
}

.popup-footer .btn-primary,
.popup-footer .btn-diamond-action {
	float: right;
	width: 45%;
}

/* Single button layout - centered */
.popup-footer > .btn-primary:only-child,
.popup-footer > .btn-secondary:only-child,
.popup-footer > .btn-ticket-action:only-child,
.popup-footer > .btn-diamond-action:only-child,
.popup-footer > button:only-child {
	float: none;
	width: 45%;
	margin: 0 auto;
	display: block;
}

.playerid_verification .popup-footer {
    padding: 8px 20px 8px;
}

.playerid_verification .btn-primary {
    width: 50%;
    font-weight: 500;
    letter-spacing: 0.6px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.playerid_verification .btn-primary:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
}

.playerid_verification .btn-primary:hover:after {
    left: 100%;
}

.btn-ticket-action {
	background: linear-gradient(to bottom, #486fa5, #5f88c5) no-repeat center / 100% 100%;
	border: 1px solid #5A98BD;
	color: #C3E5F1;
	padding: 10px 15px;
	font: 400 12px Arial, sans-serif;
	cursor: pointer;
	transition: transform 0.3s ease;
	letter-spacing: 0.5px;
}

.btn-ticket-action:hover {
	transform: translateY(-2px);
}

.btn-ticket-action:active {
	transform: translateY(0);
	background: linear-gradient(to bottom, #486fa5, #5f88c5) no-repeat center / 100% 100%;
}

.btn-diamond-action {
	background: linear-gradient(to bottom, #a88456, #c2a06d) no-repeat center / 100% 100%;
	border: 1px solid #D1C891;
	color: #E7E0D6;
	padding: 10px 15px;
	font: 400 12px Arial, sans-serif;
	cursor: pointer;
	transition: transform 0.3s ease;
	letter-spacing: 0.5px;
}

.btn-diamond-action:hover {
	transform: translateY(-2px);
}

.btn-diamond-action:active {
	transform: translateY(0);
	background: linear-gradient(to bottom, #a88456, #c2a06d) no-repeat center / 100% 100%;
}

.btn-primary {
	background: linear-gradient(to bottom, #a88456, #c2a06d) no-repeat center / 100% 100%;
	border: 1px solid #D1C891;
	color: #E7E0D6;
	padding: 10px 15px;
	font: 400 12px Arial, sans-serif;
	cursor: pointer;
	transition: transform 0.3s ease;
	letter-spacing: 0.5px;
}

.btn-primary:hover {
	transform: translateY(-2px);
}

.btn-primary:active {
	transform: translateY(0);
	background: linear-gradient(to bottom, #a88456, #c2a06d) no-repeat center / 100% 100%;
}

.btn-secondary {
	background: linear-gradient(to bottom, #486fa5, #5f88c5) no-repeat center / 100% 100%;
	border: 1px solid #5A98BD;
	color: #EAEAEA;
	padding: 10px 15px;
	font: 400 12px Arial, sans-serif;
	cursor: pointer;
	transition: transform 0.3s ease;
	letter-spacing: 0.5px;
}

/* Button states for verification form */
.verification-btn-off {
    background: linear-gradient(
    rgba(0, 0, 0, 0.2), /* overlay hitam transparan */
    rgba(0, 0, 0, 0.2)    /* transparan ke bawah */
  ),
  linear-gradient(
    to bottom,
    #a88456, /* bagian atas golden brown */
    #c2a06d  /* bagian bawah golden brown */
  ) no-repeat center / 100% 100% !important;    
    cursor: default;
    color: #C3BDB5 !important;
    border: 1px solid #ADA578;
}

.verification-btn-on {
    background: linear-gradient(to bottom, #a88456, #c2a06d) no-repeat center / 100% 100% !important;
    cursor: pointer;
    border: 1px solid #D1C891;
    
}

.verification-btn-on:hover {
    transform: translateY(-2px);
}

.btn-secondary:hover {
	transform: translateY(-2px);
}

.btn-secondary:active {
	transform: translateY(0);
	background: linear-gradient(to bottom, #486fa5, #5f88c5) no-repeat center / 100% 100%;
}



/* ===========================
   CLOSE BUTTONS
   =========================== */


/* ===========================
   POPUP BUTTONS (LOGIN CHOICES)
   =========================== */
.login-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Jarak antara tombol */
    padding: 20px 0; /* Padding atas dan bawah */
    width: 100%;
}

/* Memperbaiki tampilan tombol */
.popup-btn-login {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.popup-btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.popup-btn-login {
	width: 100%;
	border-radius: 2px;
	height: 35px;
	padding: 1px;
	padding-top: 5px;
	margin: 0; /* Hapus margin karena kita sudah menggunakan gap */
	color: #f2f2f2;
	font-size: 14px;
	font-family: arial, sans-serif;
	border: none;
	outline: none;
	position: relative;
	display: inline-block;
	text-align: left;
}

.popup-btn-mlbb {
	background: linear-gradient(to bottom, #486fa5, #5f88c5);
	color: #fff;
	border: 1px solid #557BB9;
}

.popup-btn-login .icon-login {
	width: 25px;
	height: 25px;
	margin-top: -3px;
	margin-left: 5px;
	margin-right: 10px;
	float: left;
	border-radius: 3px;
}

.popup-btn-login i {
	color: #fff;
	font-size: 20px;
	margin-top: -8px;
	float: left;
}

/* ===========================
   LOADING BLOCKS USED IN POPUPS
   =========================== */


.loadhabo_in_popup,
.loadhabo {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	height: 55px;
	width: 55px;
	border: 3px solid #0000;
	border-radius: 50%;
	background: linear-gradient(#0E2545, #0E2545) padding-box, linear-gradient(var(--angle), #7154FE, #74F0FC) border-box;
	animation: 0.5s rotatec linear infinite;
}

.loading-container {
	width: 100%;
	position: absolute;
	top: 40%;
	left: 0;
	right: 0;
	margin-inline: auto;
}

.loading-icon {
	width: 80%;
	height: auto;
	display: block;
	margin: auto;
}

.loading-gif {
	width: 15%;
	height: auto;
	display: block;
	margin-top: 1px;
	margin-inline: auto;
}

/* ===========================
   POPUP WRAPPERS AND CONTENT
   =========================== */
.popup-box-navbar {
	background: url('../assets_img/seclink-navbar.png') no-repeat center center;
	background-size: 100% 100%;
	height: auto;
	padding-bottom: 6px;
}

.popup-box-navbar img {
	width: 18px;
	height: auto;
	float: right;
	margin-top: 10px;
	margin-right: 15px;
	padding-bottom: 6px;
}

.popup-box-navbar-titles {
	padding-top: 8px;
	color: #fff;
	font-size: 18px;
	margin-left: 38px;
	margin-bottom: 6px;
	font-family: arial, sans-serif;
	font-weight: 500;
	text-align: center;
}

.popup-box-navbar-title {
	padding-top: 8px;
	color: #fff;
	font-size: 18px;
	margin-bottom: 6px;
	font-family: arial, sans-serif;
	font-weight: 500;
	text-align: center;
}

.popup-box-alert-purchase {
	width: 95%;
	height: auto;
	margin-top: 10px;
	padding-top: 20px;
	display: block;
}

.popup-box-alert-purchase-content {
	width: 100%;
	height: 30px;
	padding: 5px;
	color: #fff;
	font-size: 18px;
	font-family: arial, sans-serif;
	font-weight: 550;
	text-align: left;
	line-height: 20px;
}

.popup-box-alert-purchase img {
	width: 18px;
	height: 18px;
	margin-top: 5px;
	margin-right: 5px;
	float: left;
}

.popup-box-gamecon {
	width: 40%;
	margin: 0 auto 15px;
	display: block;
}

.popup-box-loading {
	width: 95%;
	height: auto;
	margin: 20px auto;
	padding: 6px;
	color: #AAAAAA;
	font-size: 17px;
	font-family: arial, sans-serif;
	font-weight: 500;
	text-align: center;
	display: block;
}

.popup-box-loading img {
	width: 45px;
	height: auto;
	margin-bottom: 20px;
	text-align: center;
	animation: spin 400ms linear infinite;
}

/* ===========================
   LOGIN POPUPS
   =========================== */
.popup-box-login-fb {
	background: #ECEFF6;
	max-width: 330px;
	height: auto;
	position: relative;
	margin: 1.9% auto 50px;
	text-align: center;
	border-radius: 5px;
}



/* ===========================
   NOTIFICATION POPUPS
   =========================== */
.kagetk {
	background: rgba(0, 0, 0, .9);
	width: 80%;
	height: auto;
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;
	border: 0;
	border-radius: 10px;
	color: #A4A9CF;
	font-size: 10px;
	font-family: arial, sans-serif;
	text-align: left;
	position: absolute;
	left: 0;
	right: 0;
	margin-inline: auto;
	display: none;
}

/* ===========================
   REWARDS CONFIRMATION
   =========================== */
.popup-rewards {
	width: 100%;
	max-width: 400px;
	min-width: 300px;
	padding: 0;
	margin: auto;
	position: relative;
	display: flex;
	height: auto; /* Ensure auto height */
	/* Ensure it's centered properly */
	align-self: center;
	justify-self: center;
	/* Additional centering properties */
	flex-direction: column;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}



.popup-title-reward {
	padding-top: 12px;
	margin-top: 1px;
	color: #fff;
	font-size: 14px;
	margin-bottom: 6px;
	margin-left: 35px;
	font-family: arial, sans-serif;
	font-weight: 400;
	text-align: center;
}

.popup-title {
	padding-top: 12px;
	margin-top: 1px;
	color: #fff;
	font-size: 14px;
	margin-bottom: 6px;
	margin-left: auto;
	margin-right: auto;
	font-family: arial, sans-serif;
	font-weight: 400;
	text-align: center;
}

.popup-logo {
	text-align: left;
	float: left;
	margin-left: 0px;
	display: block;
}

.popup-logo img {
	width: 70px;
	height: auto;
	position: absolute;
	margin-top: 3px;
}

.popup-logo-alt {
	text-align: left;
	float: left;
	margin-left: 5px;
	display: block;
}

.popup-logo-alt img {
	width: 30px;
	height: auto;
	position: absolute;
	margin-top: 4px;
}

.popup-content {
	background: linear-gradient(to bottom, rgba(42, 66, 104, 0.95), rgba(57, 91, 129, 0.95));
	background-size: 100% 100%;
	width: 100%;
	margin-top: -12px;
	border: 1.5px solid #405E8D;
}

.popup-content-shop {
	background: linear-gradient(to bottom, rgba(42, 66, 104, 0.95), rgba(57, 91, 129, 0.95));
	background-size: 100% 100%;
	width: 100%;
	margin-top: -12px;
	border-top: 0 solid #fff;
	margin-left: auto;
	margin-right: auto;
	border: 1.5px solid #405E8D;
}

.popup-shop-details {
	width: 100%;
	margin-top: 20px;
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 10px;
	padding-right: 10px;
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-gap: 15px;
	align-items: center;
}

.popup-form {
	width: 100%;
	height: 250px;
	margin-left: auto;
	margin-right: auto;
	padding: 25px;
	padding-top: 0px;
	padding-left: 20px;
	margin-bottom: 0px;
	display: flex;
	flex-direction: column;
}

.popup-form-shop {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 25px;
	padding-top: 0px;
	padding-left: 0px;
	margin-bottom: 0px;
}

.popup-form-shop-padded {
	padding-left: 20px;
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 80px;
}

.popup-form-verification {
	width: 100%;
	height: 320px;
	margin-left: auto;
	margin-right: auto;
	padding: 25px;
	padding-top: 0px;
	padding-left: 20px;
	margin-bottom: 0px;
}

.popup-form-email {
	width: 100%;
	height: 220px;
	margin-left: auto;
	margin-right: auto;
	padding: 25px;
	padding-top: 0px;
	padding-left: 20px;
	margin-bottom: 0px;
}

.popup-label {
	width: 100%;
	display: inline-block;
}

.popup-label label {
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
	margin-bottom: 10px;
	margin-top: 2px;
	text-shadow: none;
	font-size: 10px;
	display: inline-block;
	font-family: arial, sans-serif;
	color: #82A3C4;
}

.popup-label-verification {
	width: 100%;
	display: inline-block;
	position: relative;
}

.popup-label-verification label {
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
	margin-bottom: 0px;
	margin-top: 2px;
	text-shadow: none;
	font-size: 12px;
	display: inline-block;
	font-family: arial, sans-serif;
	color: #82A3C4;
}

.grid-container-ids {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	width: 100%;
}

.grid-item {
	width: 100%;
}

.popup-input {
	background: rgba(0, 0, 0, 0);
	width: 100%;
	height: 35px;
}

.popup-input input {
	background: #223A54;
	width: 100%;
	height: 35px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	color: #fff;
	font-size: 14px;
	font-family: arial, sans-serif;
	border: .1px solid #819CD1;
	font-weight: 400;
	outline: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Remove number input spinners/arrows for Game ID and Zone ID fields */
.popup-input input[type="number"]::-webkit-outer-spin-button,
.popup-input input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.popup-input input[type="number"] {
	-moz-appearance: textfield; /* Firefox */
	appearance: textfield; /* Standard property */
}

/* Specifically target Game ID and Zone ID inputs */
#playidm::-webkit-outer-spin-button,
#playidm::-webkit-inner-spin-button,
#playzonem::-webkit-outer-spin-button,
#playzonem::-webkit-inner-spin-button,
#playid-verification::-webkit-outer-spin-button,
#playid-verification::-webkit-inner-spin-button,
#zoneid-verification::-webkit-outer-spin-button,
#zoneid-verification::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#playidm,
#playzonem,
#playid-verification,
#zoneid-verification {
	-moz-appearance: textfield; /* Firefox */
	appearance: textfield; /* Standard property */
}

.popup-input input:focus {
	border: .1px solid #CFB990;
	border-radius: 0px;
	background: #223A54;
}

.popup-input-error input {
	background: #001;
	width: 100%;
	height: 35px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	color: #fff;
	font-size: 15px;
	font-family: arial, sans-serif;
	border: .1px solid #FF5E5B;
	font-weight: 500;
	outline: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.popup-input input::placeholder {
	color: #8BA5BE;
}

.popup-alert-verification {
	width: 95%;
	height: auto;
	margin-top: -5px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1px;
	padding: 5px;
	padding-top: 0px;
	border-bottom: 1px solid #405E8D;
	color: #D2EBFF;
	font-size: 14px;
	font-family: arial, sans-serif;
	font-weight: 400;
	text-align: center;
	line-height: 20px;
	display: block;
}

.popup-alert-verification span {
	color: #CFB990;
}

.popup-alert-shop {
	width: 100%;
	height: auto;
	margin-top: -5px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -5px;
	padding: 5px;
	padding-top: 20px;
	color: #D2EBFF;
	font-size: 14px;
	font-family: arial, sans-serif;
	font-weight: 400;
	text-align: center;
	line-height: 20px;
	display: block;
}

.popup-alert-process {
	width: 100%;
	height: auto;
	margin-top: 8px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1px;
	padding: 15px;
	padding-top: 15px;
	background: #223A54;
	border: .1px solid #819CD1;
	color: #D2EBFF;
	font-size: 12px;
	font-family: arial, sans-serif;
	font-weight: 400;
	text-align: left;
	line-height: 20px;
	display: block;
}
.popup-alert-process-center {
	width: 100%;
	height: auto;
	margin-top: 8px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 8px;
	padding: 15px;
	padding-top: 15px;
	background: #223A54;
	border: .1px solid #819CD1;
	color: #D2EBFF;
	font-size: 12px;
	font-family: arial, sans-serif;
	font-weight: 400;
	text-align: center;
	line-height: 20px;
	display: block;
}

.popup-alert-spacing {
	width: 95%;
	height: auto;
	margin-top: 10px;
	padding-top: 25px;
	padding-bottom: 20px;
	display: block;
}

/* ===========================
   COST CONFIRMATION POPUP STYLES
   =========================== */
.cost_confirmation {
	z-index: 10000 !important;
}

.cost_confirmation .popup-rewards {
	max-width: 280px;
	min-width: 250px;
	height: auto;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cost_confirmation .popup-content {
	width: 100%;
	height: auto;
	min-height: 0px;
	max-height: 220px;
	display: flex;
	flex-direction: column;
}

.cost_confirmation .popup-isikonten {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	height: auto;
}

/* Fix for confirm purchase button */
.cost_confirmation .popup-footer {
	position: relative;
	z-index: 10001 !important;
}

.cost_confirmation #confirmPurchaseBtn {
	pointer-events: auto !important;
	cursor: pointer !important;
	z-index: 10002 !important;
	position: relative;
}

.popup-alert-cost {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	text-align: center;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cost-message {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.cost-text {
	color: #E8F4FD;
	font-size: 14px;
	font-family: arial, sans-serif;
	font-weight: 600;
}

.cost-details {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.cost-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.cost-amount {
	color: #FFFFFF;
	font-size: 14px;
	font-family: arial, sans-serif;
	font-weight: 700;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.cost-continue {
	color: #B2D2E7;
	font-size: 16px;
	font-family: arial, sans-serif;
	font-weight: 400;
}

.popup-footer-form {
	background: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	width: 100%;
	height: 60px;
	margin-top: auto;
	margin-bottom: 15px;
}

.popup-footer-form button {
	background: linear-gradient(to bottom, #a88456, #c2a06d) no-repeat center;
	background-size: 100% 100%;
	width: 40%;
	height: 35px;
	margin-top: 20px;
	padding: 4px;
	padding-left: 25px;
	padding-right: 25px;
	color: #FCF3D6;
	font-size: 14px;
	font-family: arial, sans-serif;
	font-weight: 400;
	text-align: center;
	border: 1.5px solid #ADA66F;
	outline: none;
}

.popup-form-alt {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 25px;
	padding-top: 0px;
	padding-left: 20px;
	margin-bottom: 0px;
}

.popup-footer-alt {
	background: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	width: 100%;
	height: 60px;
	margin-top: 30px;
	margin-bottom: 20px;
}

.popup-footer-verification {
	background: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	width: 100%;
	height: 60px;
	margin-top: 30px;
	margin-bottom: 20px;
}

.popup-item {
	width: 100%;
	object-fit: cover;
	display: block;
	grid-column: 1;
}

.popup-item img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.popup-item-details {
	background: #223A54;
	width: 100%;
	height: auto;
	display: block;
	grid-column: 2;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid #405E8D;
}

.popup-item-divider {
	border-bottom: 1px solid #405E8D;
	width: 100%;
	margin-top: 3px;
	padding: 0px;
}

.popup-item-info {
	width: auto;
	height: auto;
	margin-top: 3px;
	margin-bottom: 5px;
	padding: 5px;
	color: #D2EBFF;
	font-size: 14px;
	font-family: arial, sans-serif;
	font-weight: 400;
	text-align: left;
}

.popup-item-info span {
	color: #CFB990;
}

.popup-item-info img {
	width: 17px;
	height: auto;
	margin-left: 10px;
	margin-right: 5px;
	margin-bottom: -7px;
}

.popup-box-item-redeem {
	width: 20%;
	aspect-ratio: 1/1;
	margin: 1px;
	margin-left: 25px;
	margin-right: 15px;
	margin-top: 30px;
	float: left;
	display: block;
}

.popup-box-item-redeem img {
	width: 100%;
	height: 100%;
}

.redeemRewardsImg {
	width: 75px;
	height: 75px;
}

.form-group-mat {
	display: flex;
	align-items: center;
	position: absolute;
	height: 100%;
	top: 0;
	right: 0;
	padding-right: 1px;
}

.form-group-mat img {
	width: 22px;
	height: 22px;
	margin-top: 7px;
	margin-right: 7px;
}

.mata2 {
	width: 100%;
	position: relative;
}

/* ===========================
   CLOSE BUTTON STYLES 
   =========================== */
.close-fb {
	background: transparent;
	border: none;
	float: right;
	color: #fff;
	cursor: pointer;
	font-size: 18px;
	margin-right: 10px;
	margin-top: 8px;
}

.close-fb i {
	color: #fff;
}

.close-other {
	background: transparent;
	border: none;
	float: right;
	color: #fff;
	cursor: pointer;
	font-size: 18px;
	margin-right: 10px;
	margin-top: 8px;
}

.close-other i {
	color: #fff;
}

@media only screen and (min-width: 300px) and (max-width: 387px) {

}	

/* ===========================
   FORM VALIDATION STYLES - Enhanced Vector Icons
   =========================== */

/* Validation icon positioning */
.popup-input {
    position: relative;
}

.input-validation-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Loading state - Enhanced spinner */
.input-validation-icon.loading {
    display: flex;
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: white;
    animation: smoothSpin 1.2s linear infinite;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.input-validation-icon.loading:before {
    content: "◐";
    font-size: 11px;
    font-weight: bold;
}

/* Valid state - Enhanced checkmark */
.input-validation-icon.valid {
    display: flex;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    animation: validBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.input-validation-icon.valid:before {
    content: "✓";
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
}

/* Invalid state - Enhanced X mark */
.input-validation-icon.invalid {
    display: flex;
    background: linear-gradient(135deg, #dc3545, #e74c3c);
    color: white;
    animation: invalidWobble 0.6s ease;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.input-validation-icon.invalid:before {
    content: "✕";
    font-size: 9px;
    font-weight: bold;
    line-height: 1;
}

/* Enhanced Animations */
@keyframes smoothSpin {
    from { 
        transform: translateY(-50%) rotate(0deg) scale(1); 
    }
    50% { 
        transform: translateY(-50%) rotate(180deg) scale(1.1); 
    }
    to { 
        transform: translateY(-50%) rotate(360deg) scale(1); 
    }
}

@keyframes validBounce {
    0% { 
        transform: translateY(-50%) scale(0) rotate(-180deg); 
        opacity: 0; 
    }
    50% { 
        transform: translateY(-50%) scale(1.3) rotate(-90deg); 
        opacity: 1; 
    }
    75% { 
        transform: translateY(-50%) scale(0.9) rotate(0deg); 
    }
    100% { 
        transform: translateY(-50%) scale(1) rotate(0deg); 
        opacity: 1; 
    }
}

@keyframes invalidWobble {
    0% { 
        transform: translateY(-50%) translateX(0) scale(0.8); 
        opacity: 0; 
    }
    15% { 
        transform: translateY(-50%) translateX(-3px) scale(1.1); 
        opacity: 1; 
    }
    30% { 
        transform: translateY(-50%) translateX(3px) scale(1); 
    }
    45% { 
        transform: translateY(-50%) translateX(-2px) scale(1); 
    }
    60% { 
        transform: translateY(-50%) translateX(2px) scale(1); 
    }
    75% { 
        transform: translateY(-50%) translateX(-1px) scale(1); 
    }
    100% { 
        transform: translateY(-50%) translateX(0) scale(1); 
        opacity: 1; 
    }
}

/* Hover effects for better interactivity */
.input-validation-icon.valid:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 3px 12px rgba(40, 167, 69, 0.4);
}

.input-validation-icon.invalid:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 3px 12px rgba(220, 53, 69, 0.4);
}

/* Responsive adjustments */
@media only screen and (max-width: 387px) {
    .input-validation-icon {
        width: 14px;
        height: 14px;
        font-size: 8px;
        right: 6px;
    }
    
    .input-validation-icon.loading:before {
        font-size: 9px;
    }
    
    .input-validation-icon.valid:before {
        font-size: 8px;
    }
    
    .input-validation-icon.invalid:before {
        font-size: 7px;
    }
}