/* Base Theme */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; }
body { background-color: #f4f7fb; color: #333333; }

/* 🚨 TICKER FIXED (Wapas purana size 14px aur padding 8px) */
.ticker-wrap { background-color: #d32f2f; color: white; padding: 8px 0; overflow: hidden; white-space: nowrap; }
.ticker { display: inline-block; padding-left: 100%; animation: ticker 25s linear infinite; font-size: 14px; font-weight: normal; letter-spacing: 0.5px; }
@keyframes ticker { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }

/* Navbar */
.sticky-header { position: sticky; top: 0; z-index: 9999; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.voting-nav { background-color: #000080; color: white; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.logo { font-size: 24px; font-weight: bold; display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 40px; height: 40px; border-radius: 50%; background: white; padding: 2px; }
.highlight-text { color: #FF9933; }
.tiranga-strip { height: 6px; width: 100%; background: linear-gradient(to right, #FF9933 33.3%, #FFFFFF 33.3%, #FFFFFF 66.6%, #138808 66.6%); }

/* Hide Google Translate Garbage */
body { top: 0px !important; }
.goog-te-banner-frame, .skiptranslate, #goog-gt-tt { display: none !important; }

/* Buttons */
.nav-links { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.nav-btn, .login-btn { color: white; text-decoration: none; background: #FF9933; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer; font-weight: bold; transition: 0.3s; }
.translate-btn { background: #333333; color: white; border: 1px solid #555; }
.login-btn { background: #138808; }
.nav-btn:hover { background: #e68a2e; }
.translate-btn:hover { background: #555; }

/* Premium Intro */
.premium-intro { max-width: 95%; margin: 30px auto; }
.intro-grid { display: flex; gap: 20px; margin-bottom: 20px; }
.intro-card { flex: 1; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.06); transition: transform 0.3s; }
.intro-card:hover { transform: translateY(-5px); }
.brand-card { border-top: 5px solid #FF9933; }
.action-card { border-top: 5px solid #138808; background: linear-gradient(to bottom, #ffffff, #f9fafb); }
.card-icon { font-size: 30px; margin-bottom: 15px; color: #000080; }
.intro-card h2, .intro-card h3 { color: #111; font-size: 22px; margin-bottom: 12px; }
.intro-card p { font-size: 15px; line-height: 1.6; color: #555; }
.legal-alert { background-color: #fff3cd; border-left: 5px solid #ffc107; padding: 15px 20px; border-radius: 8px; color: #856404; font-size: 14px; line-height: 1.6; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

/* Graph Sections */
.graph-section { max-width: 95%; margin: 30px auto; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.06); border: 1px solid #e5e7eb; }
.graph-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.graph-header h2 { color: #000080; margin: 0; }
.live-stats { display: flex; gap: 15px; align-items: center; }
.live-indicator { background: #ffebee; color: #d32f2f; padding: 5px 10px; border-radius: 20px; font-weight: bold; font-size: 13px; display: flex; align-items: center; gap: 6px; border: 1px solid #d32f2f; }
.blink-dot { width: 8px; height: 8px; background-color: #d32f2f; border-radius: 50%; animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }
.total-votes { background: #e8f5e9; color: #138808; padding: 5px 10px; border-radius: 5px; font-weight: bold; font-size: 14px; border: 1px solid #138808; }
.graph-subtitle { color: #666; font-size: 14px; margin-bottom: 20px; }
.chart-wrapper { width: 100%; overflow-x: auto; }
.chart-container { position: relative; height: 380px; width: 100%; }
.detailed-chart-container { height: 450px; }

/* EVM Grid */
.evm-section { max-width: 95%; margin: 30px auto; }
.party-grid { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.party-card { background: white; width: calc(33.333% - 15px); padding: 20px; border-radius: 10px; text-align: center; border-top: 5px solid #000080; box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.party-card h3 { font-size: 24px; margin-bottom: 5px; color: #111; }
.party-card p { font-size: 13px; color: #666; margin-bottom: 20px; }
.meme-card { border-top-color: #8d6e63; }
.nota-card { border-top-color: #666; background: #f9fafb; }
.bbjp-card { border-top: none; background: linear-gradient(to bottom, #ffffff, #fff3e0); border: 2px solid #FF9933; }

/* Action Buttons */
.action-buttons { display: flex; flex-direction: column; gap: 10px; }
.action-buttons button, .join-btn { width: 100%; padding: 12px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
.join-btn { text-decoration: none; text-align: center; display: block; background-color: #FF9933; color: white; }
.btn-vote { background-color: #e8f5e9; color: #138808; border: 1px solid #138808; }
.btn-like { background-color: #e3f2fd; color: #1565c0; border: 1px solid #1565c0; }
.btn-dislike { background-color: #f3f4f6; color: #4b5563; border: 1px solid #9ca3af; }
.btn-corrupt { background-color: #fee2e2; color: #dc2626; border: 1px solid #dc2626; }
.btn-fake { background-color: #fef3c7; color: #d97706; border: 1px solid #d97706; }
.action-buttons button:hover { background-color: #f9fafb; transform: scale(1.02); }
.join-btn:hover { background-color: #e68a2e; color: white; }

/* Bottom Section */
.bottom-join-section { text-align: center; padding: 40px 20px; background: #000080; color: white; margin-top: 40px; border-top: 6px solid #FF9933; }
.bottom-join-section h2 { font-size: 28px; margin-bottom: 10px; }
.bottom-join-section p { font-size: 16px; margin-bottom: 25px; color: #e0e0e0; }
.bottom-action-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.join-btn-large { display: inline-block; background: #FF9933; color: white; font-size: 18px; font-weight: bold; padding: 15px 30px; border-radius: 50px; text-decoration: none; transition: 0.3s; }
.whatsapp-btn { background: #25D366; color: white; font-size: 18px; font-weight: bold; padding: 15px 30px; border-radius: 50px; text-decoration: none; border: none; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 10px; }
.join-btn-large:hover { background: #138808; transform: translateY(-3px); }
.whatsapp-btn:hover { background: #1ebe57; transform: translateY(-3px); }

/* Footer */
.voting-footer { background: #111; color: #999; text-align: center; padding: 30px 20px; font-size: 13px; }
.social-icons { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; }

/* 🔴 TWITTER LOGO FIXED: Force fully white icon */
.social-btn { display: inline-flex; justify-content: center; align-items: center; width: 45px; height: 45px; border-radius: 50%; font-size: 20px; text-decoration: none; transition: 0.3s; color: white !important; }
.social-btn.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-btn.gmail { background: #ea4335; }
.social-btn.twitter { background: #000000; border: 1px solid #333; }
.social-btn i { color: #ffffff !important; }
.social-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255,255,255,0.2); }

/* MODAL */
.custom-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; justify-content: center; align-items: center; }
.modal-content { background: white; padding: 30px; border-radius: 10px; text-align: center; max-width: 90%; width: 400px; box-shadow: 0 5px 20px rgba(0,0,0,0.4); border-top: 5px solid #d32f2f; }
.modal-content h3 { color: #d32f2f; margin-bottom: 10px; font-size: 22px; }
.tnc-box { display: flex; align-items: flex-start; gap: 10px; background: #f9f9f9; padding: 10px; border: 1px solid #ddd; border-radius: 5px; margin-top: 15px; }
.tnc-box input { margin-top: 3px; cursor: pointer; }
.modal-buttons { display: flex; flex-direction: column; gap: 10px; }
.close-btn { background: #e0e0e0; color: #333; padding: 12px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
.close-btn:hover { background: #ccc; }
.login-btn-large { background: #138808; color: white; padding: 12px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }

/* 📱 RESPONSIVE */
@media screen and (max-width: 1024px) { .party-card { width: calc(50% - 15px); } }
@media screen and (max-width: 768px) { .intro-grid { flex-direction: column; } .graph-header { flex-direction: column; align-items: flex-start; gap: 10px; } }
@media screen and (max-width: 600px) {
    .party-card { width: 100%; }
    .voting-nav { flex-direction: column; text-align: center; padding: 15px 10px; }
    .logo { margin-bottom: 15px; justify-content: center; }
    .nav-links { justify-content: space-between; width: 100%; flex-direction: row; gap: 5px; }
    .nav-btn, .login-btn { flex: 1; padding: 10px 5px; font-size: 12px; text-align: center; }
    .chart-container { min-width: 500px; }
    .bottom-action-buttons { flex-direction: column; }
}