* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	overflow: hidden; /* Remove scrollbars */
}

body {
	font-family:
		'IRANSansX',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		sans-serif;
	margin: 0;
	padding: 0;
	background: transparent;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	overflow: hidden; /* Remove scrollbars */
}

#customer-credit-container {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* Dismiss button header (absolute, like lead magnet) */
.credit-header {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
}

#customer-credit-container .dobare-close-button {
	width: 20px;
	height: 20px;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
	line-height: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, opacity 0.2s ease;
	opacity: 0.8;
}

#customer-credit-container .dobare-close-button:hover {
	background-color: rgba(0, 0, 0, 0.06);
	opacity: 1;
}

#customer-credit-container .dobare-close-button:active {
	background-color: rgba(0, 0, 0, 0.12);
}

/* State-based styles for close button and icon */
#customer-credit-container.collapsed .dobare-close-button {
	background-color: transparent;
}

#customer-credit-container.expanded .dobare-close-button {
	background-color: white;
}

#customer-credit-container .collapsed-icon {
	display: none;
}

#customer-credit-container.collapsed .collapsed-icon {
	display: inline;
}

#customer-credit-container.collapsed .expanded-icon {
	display: none;
}

#customer-credit-container.expanded .expanded-icon {
	display: inline;
}

/* Purple button styles */
.credit-button {
	width: 100%;
	background-color: #87009b;
	color: white;
	border: none;
	padding: 16px 24px;
	font-size: 22px; /* Increased from 18px to 22px */
	font-weight: 500;
	border-radius: 12px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	font-family: inherit;
	white-space: nowrap;
	height: 60px;
	position: relative;
	z-index: 2; /* Ensure button appears above popup */
	display: flex;
	align-items: center;
	justify-content: center;
}

.credit-button:hover {
	background-color: #6b007a;
}

.credit-button:active {
	background-color: #5a0066;
}

/* Popup styles */
.credit-popup {
	width: 100%;
	background: white;
	border-radius: 12px 12px 0 0; /* Only top corners rounded */
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		margin 0.2s ease;
	opacity: 1;
	transform: translateY(0);
	box-sizing: border-box;
	padding: 12px;
	height: 120px; /* Fixed height = 2x button height */
	margin-bottom: -8px; /* Move downward for emerging effect */
	position: relative;
	z-index: 1; /* Behind button */
}

.credit-popup.hidden {
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	margin-bottom: -128px; /* Collapse space when hidden (120px height + 8px overlap) */
}

.credit-amount {
	font-size: 28px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.2;
}

.credit-subtitle {
	font-size: 14px;
	color: #797a7b;
	font-weight: 400;
}

/* Responsive styles */
@media (max-width: 480px) {
	.credit-button {
		font-size: 18px; /* Increased from 16px to 18px */
		padding: 14px 20px;
		height: 52px;
	}

	.credit-popup {
		height: 104px; /* 2x button height on mobile */
		margin-bottom: -6px; /* Adjust for mobile */
		gap: 6px;
	}

	.credit-popup.hidden {
		margin-bottom: -110px; /* Adjust for mobile (104px height + 6px overlap) */
	}

	.credit-amount {
		font-size: 24px;
	}

	.credit-subtitle {
		font-size: 12px;
	}
}
