/* --- TOP BAR STYLES --- */
.top-bar {
    background-color: #1e272e; /* තද කළු/අළු පාට */
    width: 100%;
    padding: 8px 50px; /* උස සහ දෙපැත්තේ ඉඩ */
    font-size: 0.85rem; /* අකුරු පොඩියට */
    border-bottom: 1px solid #333;
}

.top-bar-content {
    display: flex;
    justify-content: flex-end; /* දකුණු පැත්තට (Right) ගන්නවා */
    align-items: center;
}

.top-bar a {
    color: #fff;
    text-decoration: none;
    margin: 0 8px;
    transition: color 0.3s;
    font-weight: 500;
}

.top-bar a:hover {
    color: #ff4d6d; /* Mouse එක තිබ්බම පාට */
}

.divider {
    color: #555;
    font-size: 0.8rem;
}

/* Mobile Responsive: ෆෝන් එකෙන් බලද්දී මැදට ගන්න */
@media (max-width: 768px) {
    .top-bar {
        padding: 8px 20px;
    }
    .top-bar-content {
        justify-content: center; /* ෆෝන් එකේදී මැදට */
    }
}

/* Google Dropdown එක ඇහැට නොපෙනී තියන්න, හැබැයි DOM එකේ තියෙන්න ඕනේ */
#google_translate_element {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- FORCE HIDE GOOGLE TOOLBAR --- */

/* 1. Bar එක Hide කිරීම */
.goog-te-banner-frame.skiptranslate, 
.goog-te-banner-frame, 
iframe.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}

/* 2. Body එක සහ HTML එක පහළට යෑම වැළැක්වීම */
body, html {
    top: 0px !important;
    margin-top: 0px !important;
    position: static !important;
}

/* 3. Mouse එක ගෙනිච්චම එන Tooltip එක හැංගීම */
.goog-tooltip {
    display: none !important;
}
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* --- FINAL GOOGLE HIDE CSS --- */
body {
    top: 0px !important; 
    margin-top: 0px !important;
    position: static !important;
}

.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
}

.goog-te-gadget-icon {
    display: none !important;
}

/* iframe එක hide කිරීම */
iframe[id^=":"] {
    display: none !important;
}

/* --- TOP BAR STYLES (FIREFLY EFFECT) --- */
.top-bar {
    background-color: #1e272e;
    width: 100%;
    height: 45px; /* උස පොඩ්ඩක් වැඩි කළා වචන හැප්පෙන්නේ නැති වෙන්න */
    border-bottom: 1px solid #333;
    position: relative;
    overflow: hidden;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

/* වචන වැටෙන ප්‍රදේශය */
.fade-wrapper {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* JavaScript මගින් හදන වචන වල විලාසය */
.floating-word {
    position: absolute; /* කැමති තැනක තියන්න */
    font-size: 0.9rem;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    white-space: nowrap;
    opacity: 0; /* මුලින් පේන්න නෑ */
    
    /* Animation එක: තත්පර 4ක් ඇතුලත මතු වෙලා මැකෙනවා */
    animation: floatLife 4s linear forwards; 
}

/* ජීවන චක්‍රය (Animation Keyframes) */
@keyframes floatLife {
    0% { opacity: 0; transform: translateY(10px); }    /* පහළින් පටන් ගන්නවා */
    20% { opacity: 1; transform: translateY(0px); }    /* මතු වෙනවා */
    80% { opacity: 1; transform: translateY(0px); }    /* ටිකක් වෙලා රැඳෙනවා */
    100% { opacity: 0; transform: translateY(-10px); } /* උඩට යන ගමන් මැකෙනවා */
}

/* දකුණු පැත්ත (Buttons) - වෙනසක් නෑ */
.lang-links { z-index: 10; background: #1e272e; padding-left:10px; } 
.lang-links a { color: #fff; text-decoration: none; margin: 0 5px; font-size: 0.85rem; }
.lang-links a:hover { color: #ff4d6d; }
.divider { color: #555; }