/* styles from the original template */
:root {
	--primary-color: #09cbc5;
	--primary-hover-color: #00e8e1;
	--progress-bar-color: #09cbc5;
	--text-color: #333333;
	--background-color: #FFFFFF;
	--comment-bg-color: #F6F6F6;
	--facebook-blue: #365899;
	--light-gray-text: #686868;
	--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--font-secondary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

*{box-sizing:border-box;font-family:var(--font-main)}
body{margin:0;background-color:var(--background-color);color:var(--text-color)}
.container{max-width:1140px;margin:0 auto;padding:15px}

/* Header */
header{display:flex;align-items:center;padding:0;box-shadow:0 5px 5px rgba(229, 231, 239, 0.5)}
header .logo img{max-width:280px;display:block}
.container-logo{display:flex;justify-content:left;align-items:center;width:1140px;margin:0 auto;padding:10px 0 10px 20px}

/* Main Content Grid */
.grid-container{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.grid-item h1{font-family:var(--font-main);font-size:28px;font-weight:600;line-height:1.3;color:var(--text-color);text-align:center}
.main-image-container{display:flex;justify-content:center;align-items:center}
.main-image-container img{width:400px;height:400px;object-fit:cover;border-radius:10px}

/* Progress Section */
.progress-section{font-family:var(--font-main);margin-top:30px}
.progress-stats{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px}
.stats-left{text-align:left}
.stats-left .label{font-size:12px;font-weight:500;color:var(--text-color)}
.stats-left .value{font-size:22px;font-weight:700;color:var(--primary-color);line-height:1}
.stats-right .label{font-size:16px;font-weight:600;color:var(--text-color)}
.progress-bar-container{width:100%;background-color:#EFEFEF;border-radius:10px;height:25px}
.progress-bar{width:46.12%;height:100%;background-color:var(--progress-bar-color);border-radius:10px}
.progress-details{display:flex;justify-content:space-between;font-size:12px;font-weight:500;color:var(--primary-color);margin-top:5px}

/* Buttons */
.cta-button{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;background-color:var(--primary-color);color:white;font-family:var(--font-main);font-size:18px;font-weight:700;text-align:center;padding:8px 0;border-radius:10px;text-decoration:none;margin:25px auto;border:none;cursor:pointer;transition:background-color 0.3s}
.cta-button:hover{background-color:var(--primary-hover-color)}
.cta-button svg{width:20px;height:20px;fill:white}

/* Text & Image Sections */
.content-section{text-align:center}
.content-section p{font-family:var(--font-main);font-size:18px;line-height:1.3;text-align:left;margin-bottom:20px}
.content-section img{max-width:350px;width:100%;border-radius:10px;margin-top:20px}

/* Donation & Comments Area */
.donation-comments-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.donation-box,.comments-box{background-color:#FFFFFF;border-radius:10px;text-align:center;padding:20px}
.donation-box h2,.comments-box h2{font-family:var(--font-main);font-size:26px;font-weight:700;text-transform:uppercase}
.donation-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:20px}
.donation-button{background-color:var(--primary-color);color:white;border:none;border-radius:10px;padding:15px 0;font-family:var(--font-main);font-size:18px;font-weight:700;cursor:pointer;transition:background-color 0.3s;line-height:1.3;width:100%;box-sizing:border-box}
.donation-button:hover{background-color:var(--primary-hover-color)}
.most-chosen-wrapper{position:relative}
.most-chosen-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(to top right,#09cbc5 35%,#00e8e1 100%);color:white;font-family:var(--font-main);font-size:10px;font-weight:600;padding:2px 15px;border-radius:10px;text-transform:uppercase;z-index:2;width:max-content}

/* Comments section */
.comments-header{font-family:var(--font-secondary);font-size:14px;font-weight:500;color:var(--light-gray-text);text-align:left;padding:0 25px;border-bottom:1px solid #CFCFCF;padding-bottom:5px;margin-bottom:15px}
.comment-block{padding:0 25px 10px}
.comment{display:flex;align-items:center;gap:10px;text-align:left;font-family:var(--font-secondary)}
.comment-avatar img{width:36px;height:36px;border-radius:50%}
.comment-content{background-color:var(--comment-bg-color);padding:5px 12px;border-radius:10px;flex-grow:1}
.comment-text{font-size:14px;color:#454545}
.comment-text strong{color:var(--facebook-blue)}
.comment-footer{display:flex;justify-content:space-between;align-items:center;width:100%;padding-left:46px;margin-top:2px;box-sizing:border-box}
.comment-footer-actions{font-size:12px;color:#3C55B0;font-weight:bold}
.comment-footer-actions span{font-weight:normal;color:#808080}
.reactions{display:flex;align-items:center}
.reactions img{width:16px;height:16px;margin-left:-3px}
.reactions span{font-size:12px;color:var(--light-gray-text);margin-left:5px}

.comments-plugin-footer{font-family:var(--font-secondary);font-size:12px;color:var(--light-gray-text);text-align:center;padding:10px 25px;border-top:1px solid #CFCFCF}

/* Footer */
footer{text-align:center;padding:40px 0 20px}
footer img{max-width:280px;margin-bottom:15px}
footer p{font-family:var(--font-main);font-size:14px;color:var(--text-color);line-height:1.5}
footer a{color:inherit;text-decoration:none}
footer .copyright{font-size:12px}

/* Responsive */
@media (max-width: 992px) {
	.grid-container, .donation-comments-grid { grid-template-columns: 1fr; }
	 .grid-item h1 { text-align: center; }
	 .main-image-container { order: -1; margin-bottom: 20px; }
	.donation-box, .comments-box { margin-top: 20px; }
}

@media (max-width: 480px) {
	.main-image-container img { width: 100%; height: auto; }
}

/* Pix area small components */
.pix-area{margin-top:16px;padding:12px;border-radius:8px;border:1px solid #eee;background:#fff}
.qrcode{width:220px;height:220px;margin:0 auto}
.pix-text-wrap{display:flex;gap:8px;margin-top:12px}
#pix-text{flex:1;padding:8px;border:1px solid #ddd;border-radius:6px}
#btn-copy{padding:8px 10px}
.status-row{display:flex;gap:12px;align-items:center;margin-top:10px}
.badge{padding:6px 10px;border-radius:999px;background:#eee}
.log{height:120px;overflow:auto;background:#fafafa;border-radius:6px;padding:8px;border:1px solid #f0f0f0;margin-top:10px}

/* Modal (PIX) */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0);transition:background 220ms ease}
.modal-panel{position:relative;background:#fff;padding:28px 24px;border-radius:12px;max-width:520px;width:92%;z-index:1001;box-shadow:0 12px 40px rgba(0,0,0,0.15);transform:translateY(12px) scale(.98);opacity:0;transition:opacity 220ms ease, transform 220ms cubic-bezier(.2,.9,.2,1);text-align:center}
.modal.show .modal-backdrop{background:rgba(0,0,0,0.45)}
.modal.show .modal-panel{transform:translateY(0) scale(1);opacity:1}
.modal-close{position:absolute;right:14px;top:12px;border:none;background:transparent;font-size:24px;cursor:pointer;color:var(--text-color)}
.modal-panel h3{margin:0 0 18px 0;text-align:center;font-size:20px;font-weight:700}
.modal-success{margin-top:14px;padding:12px;background:linear-gradient(90deg,var(--primary-color),var(--primary-hover-color));color:white;border-radius:8px;text-align:center;font-weight:700}

/* modal content layout */
.modal .qrcode{width:260px;display:block;margin:6px auto 12px auto;border-radius:8px;background:white;padding:4px}
.modal .qrcode svg,
.modal .qrcode img{
	display:block;
	max-width:220px;
	width:100%;
	height:auto;
	margin:0 auto;
}
.modal .pix-text-wrap{display:flex;gap:8px;margin-top:4px;width:100%;justify-content:center}
.modal input#modal-pix-text{flex:1;padding:10px;border:1px solid #E6E6E6;border-radius:8px;background:#fff;width:100%;max-width:480px}
.modal .status-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.modal .badge{padding:8px 12px;border-radius:999px;background:#F2F2F2;color:var(--text-color);font-weight:700}
.modal #modal-timer{color:var(--light-gray-text);font-weight:600}

/* modal design adjustments */
.modal-status{font-size:20px;font-weight:800;text-align:center;margin:6px 0 6px 0}
.blink{animation:blink 1.6s infinite}
@keyframes blink{0%{opacity:1}50%{opacity:.45}100%{opacity:1}}
.modal-subtitle{text-align:center;color:#666;margin-top:4px}
.modal-amount{text-align:center;font-size:26px;font-weight:900;color:var(--text-color);margin-top:4px}
.primary-copy{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--primary-color),var(--primary-hover-color));border:none;color:#fff;padding:12px 20px;border-radius:30px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(9,203,197,0.2)}
.primary-copy:active{transform:translateY(1px)}
.pix-instructions{font-size:13px;color:#666;text-align:left;margin-top:14px}
.pix-instructions ol{padding-left:18px;margin:0}
.pix-instructions li{margin-bottom:6px}