/* boston-ai-style.css - provided by user */

.container { max-width: 980px }
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box }
body { font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; background: linear-gradient(135deg,#0f0f1e 0%,#111226 100%); color:#fff; min-height:100vh; -webkit-font-smoothing:antialiased }
.has-bottom-nav { padding-bottom: 110px; }
.header-hero { position:relative; height:260px; background:center/cover no-repeat; border-radius:0 0 18px 18px; overflow:hidden; background-image:url('/static/pix/g1.jpeg'), linear-gradient(135deg,#0f3f4f 0%,#1a2a3a 100%) }
.header-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.24), rgba(0,0,0,0.8)) }
.logo { position:absolute; top:14px; left:14px; z-index:10 }
.logo img { height:44px; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)) }
/* make polisatsapp logo look modern and slightly beveled */
.logo img { border-radius:10px; padding:6px; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); box-shadow: 0 10px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03); }

/* Global full-screen loader matching app theme */
#globalLoader { position: fixed; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(2,6,12,0.65), rgba(4,10,18,0.85)); z-index:35000; pointer-events: none; }
#globalLoader.active { pointer-events: auto; }
.loader-box { display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 22px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border-radius:12px; box-shadow: 0 18px 48px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.03); }
.loader-ring { width:56px; height:56px; border-radius:50%; border:6px solid rgba(255,255,255,0.06); border-top-color:#00ffd3; animation: loader-spin 1s linear infinite; box-shadow: 0 6px 24px rgba(0,255,220,0.06) inset; }
.loader-text { color:#bff; font-weight:700; letter-spacing:0.6px }
@keyframes loader-spin { to { transform: rotate(360deg); } }
.hero-content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; z-index:5 }
.hero-title { font-size:38px; font-weight:800; margin-bottom:6px; letter-spacing:0.4px }
.hero-title .gbh { color:#00ffff; text-shadow:0 8px 24px rgba(0,255,255,0.06) }
.hero-title .markets { color:#ffffff; opacity:0.95 }
.hero-subtitle { font-size:18px; opacity:0.9; margin-bottom:30px }
.plans-grid {
    display: grid;
    grid-template-columns: 1fr; /* stack plans vertically */
    gap: 12px;
    margin-top: 12px;
}

/* make plan cards equal height when in grid */
.plans-grid { grid-auto-rows: 1fr; }

.plans-vertical .plan-card { height: 100%; align-items: stretch; }
.plan-card { display:flex; flex-direction:row; }
.plan-body { display:flex; flex-direction:column; justify-content:center; }

/* plan icon */
.plan-icon { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; margin-right:8px; font-size:16px }

.plans-vertical .plan-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border-radius: 10px;
	padding: 8px;
	box-shadow: 0 6px 14px rgba(0,0,0,0.55);
	transition: transform .12s ease, box-shadow .12s ease;
	align-items: center;
}
.plan-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,0.7); }
/* normalize logos: fix size and crop if necessary so all cards align */
/* fixed wrapper controls logo area to prevent intrinsic image whitespace from affecting layout */
.plan-logo-wrapper { width:120px; flex:0 0 120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; overflow:visible; border-radius:8px; background:rgba(255,255,255,0.02); padding:8px }
.plan-logo { width:100px; height:100px; object-fit:contain; display:block }
.plan-logo-caption { font-size:12px; color:#999; text-align:center; margin-top:4px }
/* remove inline image gap issues */
img { display:block; line-height:0 }
.plan-body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-start; gap:4px }

/* ensure the main content between logo and actions expands */
.plan-main { flex:1; min-width:0; display:flex; align-items:center; gap:12px }
.plan-left { display:flex; align-items:center; gap:8px; flex:1; min-width:0 }
.plan-title { font-weight:800; font-size:16px; color:#00ffff; margin-bottom:4px }
.plan-price { color:#00ffcc; font-weight:900; font-size:20px; margin:0; display:block; z-index:2; text-align:right }
.plan-desc { font-size:13px; color:#d6f7f0; opacity:0.98; margin-top:6px; display:block; z-index:2 }
.plan-title { overflow-wrap: break-word; word-break: break-word; white-space: normal }
.plan-body { overflow: visible }
.plan-card { position: relative }

/* Use CSS grid for stable columns: logo | content | price+actions */
.plan-card {
	display: grid;
	/* logo | price+actions | content */
	grid-template-columns: 120px 160px 1fr;
	gap: 10px;
	align-items: center;
}
.plan-body-col { display:flex; align-items:center; gap:8px }
.plan-price-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px }
.plan-price-actions .plan-price { font-size:18px; font-weight:900 }
.plan-actions { margin:0; }
.plan-card .plan-title { font-size: 16px }

/* Debug helpers: enable by adding ?debug_ui=1 to URL (adds class on body). */
.has-debug-plans .plan-title { background: rgba(255,0,0,0.06); outline: 1px dashed rgba(255,0,0,0.2); }
.has-debug-plans .plan-price { background: rgba(0,255,0,0.05); outline: 1px dashed rgba(0,255,0,0.12); }
.has-debug-plans .plan-desc { background: rgba(0,0,255,0.04); outline: 1px dashed rgba(0,0,255,0.12); }
.plan-actions { margin-left: auto; width: 160px; display:flex; gap:8px; align-items:center; justify-content:flex-end; flex:0 0 160px }
.plan-actions .buy-btn { width:120px }

/* ensure consistent heights in grid layout */
.plans-grid { grid-auto-rows: 1fr; }
.plan-card { height: 100%; min-height: 70px; }
.help-center-btn { display:inline-flex; align-items:center; gap:12px; background:rgba(255,255,255,0.1); padding:12px 28px; border-radius:50px }
	.customer-service { position:fixed; bottom:110px; right:18px; width:84px; height:84px; border-radius:12px; display:flex; align-items:center; justify-content:center; transition: transform .16s, box-shadow .16s; z-index:55000 }
	.customer-service:hover { transform: translateY(-4px); box-shadow:0 18px 48px rgba(0,0,0,0.32) }
	.whatsapp-icon-img { display:block; width:64px; height:64px; object-fit:contain }
	.customer-service:focus .whatsapp-icon-img, .customer-service:hover .whatsapp-icon-img { transform: scale(1.02) }
	/* subtle ring - removed */
	.customer-service::after { content: ''; display:none; }
	.investment-section { margin-top:-80px; padding:0 14px }
	.investment-card { background:rgba(12,18,30,0.6); backdrop-filter:blur(10px); border-radius:14px; padding:20px }
	.section-title { font-size:22px; margin-bottom:12px }
	.buy-btn { width:100%; background:linear-gradient(90deg,#00ffff,#00b4b4); color:#000; font-weight:700; padding:12px; border:none; border-radius:12px; transition: transform .14s ease }
	.buy-btn:hover { transform: translateY(-3px) }
	.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:rgba(6,8,16,0.95); padding:8px 0; display:flex; justify-content:space-around; box-shadow:0 -6px 18px rgba(0,0,0,0.6) }
	.bottom-nav .nav-item { color: #fff; text-decoration: none; font-weight:700; font-size:15px; padding:8px 12px }
	.bottom-nav .nav-item:hover { color:#00ffff }

input { padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:rgba(0,0,0,0.18); color:#fff }
button { padding:10px 14px; border-radius:8px; border:none; cursor:pointer }

/* copy referral button prominence */
#copyReferralBtn { background: linear-gradient(90deg,#00ffff,#00b4b4); color:#000; font-weight:700; border-radius:8px; padding:8px 14px; white-space:nowrap; cursor:pointer; font-size:14px }

/* small icon badges for admin headings */
.admin-heading-icon { margin-right:8px; font-size:18px }

/* small screens tweaks */
@media (max-width: 480px) {
	.hero-title { font-size:28px }
	.plans-grid { grid-template-columns: 1fr }
	.plan-logo-wrapper { width:80px; flex:0 0 80px; padding:6px }
	.plan-logo { width:64px; height:64px; }
	.plan-logo-caption { font-size:11px }
	.plan-desc { font-size:11px }
	.plan-card { grid-template-columns: 80px 1fr auto; gap:8px }
	.bottom-nav .nav-item { font-size:12px; padding:6px 8px }
	.plan-body-col { align-items:flex-start }
	.plan-price-actions { align-items:flex-start; margin-top:8px }
}

/* ensure pages with fixed bottom-nav have room so buttons/forms aren't covered */
main, .investment-section, .investment-card { padding-bottom: 120px; }

/* subtle button animation */
.btn-anim { transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s; }
.btn-anim:active { transform: translateY(1px) }

/* ticker styles */
.ticker-wrap { overflow:hidden; width:100%; background:rgba(255,255,255,0.02); padding:8px 0; border-radius:8px; margin:8px 0 }
.ticker { display:flex; align-items:center; gap:32px; white-space:nowrap; will-change:transform; }
.ticker-item { display:inline-block; padding:0 16px; color:#bfeeee; font-weight:600 }

/* infinite marquee animation (move left) */
@keyframes marquee {
	0% { transform: translateX(0%);} 
	100% { transform: translateX(-50%);} 
}
.ticker.animate { animation: marquee 10s linear infinite; }

/* fallback overlay for buy confirmation */
.buy-fallback-overlay { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.6); z-index:40000; pointer-events:auto }
.buy-fallback-card { background:#0b0b12; color:#fff; padding:18px; border-radius:10px; max-width:360px; text-align:center; pointer-events:auto }
.buy-fallback-card .btn { margin: 6px }

/* bottom nav buttons more button-like */
.bottom-nav .nav-item { background: rgba(255,255,255,0.03); padding:8px 14px; border-radius:10px }

/* ensure bootstrap modal appears above fixed bottom nav and overlays */
.modal { z-index: 50000 !important; }
.modal-backdrop { z-index: 49500 !important; }
.modal-dialog { pointer-events: auto; }
.modal-content { pointer-events: auto; }

/* admin action spinner */
.admin-action-spinner { display:inline-block; font-size:14px; opacity:0.95 }
.admin-action-spinner.loading { animation: spin 1s linear infinite }
@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }