/* 1. GLOBAL RESET & MOBILE FIXES */
html {
	width: 100%;
	height: 100%; /* Important for consistent scrolling */
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch; /* Forces smooth "momentum" scrolling on iOS/Chrome */
}

body {
	font-family: 'Noto Sans Georgian', sans-serif;
	width: 100%;
	min-height: 100%; /* Changed from vh to % to prevent address bar jumping */
	background: #fdfaf7; 
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 40px 20px;
	margin: 0;
	position: relative;
	color: #2d3436;
	/* Removed overflow-x: hidden from here to prevent scroll conflict */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent; /* Removes the grey box when clicking buttons on mobile */
}

/* 2. CUSTOM FONTS */
@font-face {
	 font-family: "menufont";
	 src: url(https://4love.ge/fonts/bpg_mrgvlovani_caps_2010.eot);
	 src: local(☺),
		  url(https://4love.ge/fonts/bpg_mrgvlovani_caps_2010.woff) format("woff"),
		  url(https://4love.ge/fonts/bpg_mrgvlovani_caps_2010.ttf) format("truetype"),
		  url(https://4love.ge/fonts/bpg_mrgvlovani_caps_2010.svg) format("svg");
	 font-weight: 400;
	 font-style: normal;
}

/* 3. BACKGROUND BLOBS */
.blob {
	position: absolute;
	z-index: -1;
	opacity: 0.7;
	border-radius: 50%;
}

.blob-pink { top: -15%; left: -10%; width: 700px; height: 700px; background: radial-gradient(circle at center, #ffd1dc 0%, rgba(255,209,220,0) 70%); }
.blob-blue { bottom: -10%; right: 15%; width: 650px; height: 650px; background: radial-gradient(circle at center, #a1c4fd 0%, rgba(161,196,253,0) 70%); }
.blob-orange { top: 40%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle at center, #ffd194 0%, rgba(255,209,148,0) 70%); }
.blob-purple { bottom: 30%; left: 20%; width: 550px; height: 550px; background: radial-gradient(circle at center, #e0c3fc 0%, rgba(224,195,252,0) 70%); }

/* 4. MAIN LAYOUT & PANES */
.main-glass-container {
	max-width: 680px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	z-index: 1; 
	height: auto; /* Ensure this is NOT fixed */
}

.glass-pane {
	background: rgba(255, 255, 255, 0.4); 
	backdrop-filter: blur(18px); 
	-webkit-backdrop-filter: blur(18px);
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.6); 
	padding: 30px;
	box-shadow: 0 10px 40px rgba(31, 38, 135, 0.08); 
}

/* Header */
.header-pane { text-align: center; background: rgba(255, 255, 255, 0.25); padding: 35px 30px; }
.header-pane h1, .header-pane h1 span { 
	font-size: 26px; 
	font-weight: 700; 
	margin-bottom: 8px; 
	font-family: "menufont", sans-serif;
}
.text-pink { color: #ff477e; }
.text-purple { color: #9b59b6; }
.text-blue { color: #4a69bd; }
.header-pane p { color: #57606f; font-size: 15px; }

/* Description */
.description-pane h2 { font-size: 18px; color: #1e272e; margin-bottom: 12px; font-family: "menufont", sans-serif; }
.description-pane p { font-size: 15px; line-height: 1.7; color: #485460; }

/* Progress Bar */
.progress-pane { background: rgba(255, 255, 255, 0.45); }
.progress-stats { display: flex; justify-content: space-between; font-size: 16px; color: #2d3436; margin-bottom: 15px; }
.progress-stats span { font-family: "menufont", sans-serif; }
.modern-progress-bar {
	width: 100%; height: 16px; background: rgba(255, 255, 255, 0.6); 
	border-radius: 20px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
	position: relative; border: 1px solid rgba(255, 255, 255, 0.7);
}
.progress-fill {
	width: 0%; height: 100%; border-radius: 20px;
	background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 50%, #a1c4fd 100%);
	position: relative; transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1); 
}
.percent-bubble {
	position: absolute; right: -20px; top: -38px; background-color: #1e272e;
	color: #fff; font-weight: bold; font-size: 12px; padding: 6px 10px;
	border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	opacity: 0; transform: translateY(10px);
	transition: opacity 0.5s ease 1.2s, transform 0.5s ease 1.2s; 
	font-family: "menufont", sans-serif;
}
.percent-bubble.show { opacity: 1; transform: translateY(0); }
.percent-bubble::after {
	content: ''; position: absolute; bottom: -6px; left: 50%;
	transform: translateX(-50%); border-width: 6px 6px 0 6px;
	border-style: solid; border-color: #1e272e transparent transparent transparent;
}
.remaining-text { margin-top: 25px; text-align: center; font-size: 14px; color: #6c7a89; font-family: "menufont", sans-serif; }
.color-collected { color: #05c46b; }
.color-goal { color: #4a69bd; }
.color-remaining { color: #ff477e; }

/* Bank Details */
.bank-pane h2 { font-size: 18px; margin-bottom: 10px; font-family: "menufont", sans-serif; }
.bank-pane > p { font-size: 14px; color: #6c7a89; margin-bottom: 20px; }
.bank-card { background: rgba(255, 255, 255, 0.5); padding: 25px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.8); }
.bank-row { margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.lbl { display: block; font-size: 11px; color: #a0a0a0; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.val { font-size: 17px; font-weight: 600; color: #1e272e; }
.iban-text { font-family: monospace; letter-spacing: 1px; color: #000; word-break: break-all; overflow-wrap: break-word; }
.account-number-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 15px; }

/* Modern Copy Button */
.modern-copy-btn {
	display: flex; align-items: center; gap: 8px;
	background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.7); color: #4a69bd; padding: 12px 22px; border-radius: 14px;
	font-weight: 700; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.modern-copy-btn:hover { background: rgba(255, 255, 255, 0.6); transform: translateY(-2px); border: 1px solid rgba(255, 255, 255, 0.9); }
.modern-copy-btn.success { background: rgba(5, 196, 107, 0.15); border: 1px solid rgba(5, 196, 107, 0.5); color: #05c46b; }

/* Accordions */
.accordion-group { display: flex; flex-direction: column; gap: 12px; }
.accordion-item { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 18px; overflow: hidden; transition: all 0.3s ease; }
.accordion-header { width: 100%; padding: 20px 25px; background: transparent; border: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 16px; font-weight: 600; color: #2d3436; }
.acc-title { display: flex; align-items: center; gap: 12px; font-family: "menufont", sans-serif; }
.chevron { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); color: #b2bec3; }
.accordion-item.active .chevron { transform: rotate(180deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.list-wrapper { padding: 0 25px 25px 25px; display: flex; flex-direction: column; gap: 12px; }
.list-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: rgba(255, 255, 255, 0.6); border-radius: 14px; }

/* User Info Layout Fix */
.user-info { 
	display: flex; 
	align-items: center; 
	gap: 12px; /* Adds perfect spacing between avatar and text */
}

.avatar { 
	width: 42px; 
	height: 42px; 
	flex-shrink: 0; /* Prevents the circle from squishing if the name is long */
	background: linear-gradient(135deg, #ffd1dc 0%, #fecfef 100%); 
	border-radius: 50%; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	font-weight: bold; 
	color: #1e272e;
}

.name {
	font-size: 14px;
	font-weight: 700;
	color: #1e272e;
	line-height: 1.2;
}

.date {
	font-size: 11px;
	color: #6c7a89;
	margin-top: 3px;
}

.amount-badge { padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: bold; }
.amount-badge.green { background: rgba(5, 196, 107, 0.12); color: #05c46b; }
.amount-badge.blue { background: rgba(161, 196, 253, 0.15); color: #4a69bd; }

/* 5. CONTACT & FOOTER */
.contact-buttons { display: flex; justify-content: center; gap: 15px; }
.contact-btn { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 14px; font-weight: 600; text-decoration: none; color: #fff; transition: all 0.3s ease; }
.messenger-btn { background: linear-gradient(135deg, #00B2FF 0%, #006AFF 100%); }
.fb-group-btn { background: linear-gradient(135deg, #1877F2 0%, #0c57b8 100%); }

.footer-pane { margin-top: 10px; padding: 15px 20px !important; background: rgba(255, 255, 255, 0.25) !important; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.4); }
.footer-content { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; }
.copyright { font-size: 13px; color: #57606f; white-space: nowrap; }
.visitor-badge { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 20px; font-size: 11px; white-space: nowrap; }
.visitor-badge span { font-family: "menufont", sans-serif; }

.glass-toast { position: fixed; top: -100px; left: 50%; transform: translateX(-50%); z-index: 9999; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px); border-radius: 50px; padding: 12px 25px; transition: top 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.glass-toast.show { top: 30px; }

/* 6. MOBILE ADAPTATION (THE FIX) */
@media (max-width: 600px) {
	body { padding: 20px 12px; }
	.main-glass-container { width: 100%; gap: 15px; }
	.glass-pane { padding: 20px 15px; border-radius: 20px; }
	.header-pane h1 { font-size: 20px; line-height: 1.3; }
	.progress-stats { flex-direction: column; align-items: center; gap: 5px; font-size: 14px; }
	.account-number-row { flex-direction: column; align-items: stretch; gap: 12px; }
	.modern-copy-btn { width: 100%; justify-content: center; }
	.contact-buttons { flex-direction: column; width: 100%; gap: 10px; }
	.contact-btn { width: 100%; justify-content: center; }
	
	/* Footer Stay Side-by-Side */
	.footer-content { justify-content: space-between; gap: 5px; }
	.copyright { font-size: 10px; }
	.visitor-badge { font-size: 9px; padding: 4px 8px; }
	.glass-toast { width: 90%; }
}