/* Topbar Styles */
.topbar-container {
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
    padding: 10px 0;
}

.topbar-container .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-left-container {
    flex: 1;
}

.topbar-left-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.topbar-item {
    display: inline-flex;
    align-items: center;
}

.topbar-item a,
.topbar-item span {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    color: #fff;
    transition: all 0.3s ease;
}

.topbar-item a:hover,
.topbar-item span:hover {
    color: #d4af37;
}

.topbar-item i[data-icon] {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.topbar-item i[data-icon="live-chat"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M12 2C6.48 2 2 6.48 2 12c0 1.54.36 3 .97 4.29L2 22l5.71-.97C9 21.64 10.46 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm0 18c-1.38 0-2.68-.31-3.85-.85l-.27-.14-2.83.48.48-2.83-.14-.27C4.31 14.68 4 13.38 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8z"/></svg>');
}

.topbar-item i[data-icon="android"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24c-2.86-1.21-6.08-1.21-8.94 0L5.65 5.67c-.19-.28-.54-.37-.83-.22-.3.16-.42.54-.26.85l1.84 3.18C4.8 10.92 3.5 12.62 3 14.34h18c-.5-1.72-1.8-3.42-3.4-4.86zM8.07 12.93c-.54 0-.97-.43-.97-.96 0-.54.43-.97.97-.97s.97.43.97.97c0 .53-.43.96-.97.96zm7.86 0c-.54 0-.97-.43-.97-.96 0-.54.43-.97.97-.97s.97.43.97.97c0 .53-.43.96-.97.96z"/></svg>');
}

.topbar-item i[data-icon="telegram"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.27-.02-.12.02-1.96 1.25-5.54 3.67-.52.36-.99.53-1.42.52-.47-.01-1.37-.26-2.03-.48-.82-.27-1.47-.42-1.42-.88.03-.24.37-.48 1.02-.73 3.99-1.73 6.65-2.87 7.98-3.42 3.8-1.58 4.59-1.85 5.1-1.86.11 0 .37.03.53.17.14.12.18.28.2.44-.01.06.01.24 0 .38z"/></svg>');
}

.topbar-item i[data-icon="contact-us"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>');
}

.topbar-item i[data-icon="search"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
}

.telegram-btn {
    background: linear-gradient(135deg, #0088cc, #00aaff);
    padding: 8px 15px !important;
    border-radius: 5px;
    font-weight: bold;
    gap: 8px;
}

.telegram-btn:hover {
    background: linear-gradient(135deg, #0077bb, #0099ee);
}

/* Language Selector */
.language-selector-container {
    position: relative;
}

.language-selector-trigger {
    cursor: pointer;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.language-selector-trigger i[data-language] {
    width: 24px;
    height: 18px;
    display: inline-block;
    background-size: cover;
    background-position: center;
}

.language-selector-trigger i[data-language="id"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24"><rect width="36" height="12" fill="%23FF0000"/><rect y="12" width="36" height="12" fill="%23FFFFFF"/></svg>');
}

.language-selector-trigger i[data-language="en"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><rect width="60" height="30" fill="%23012169"/><path d="M0,0 L60,30 M60,0 L0,30" stroke="%23fff" stroke-width="6"/><path d="M0,0 L60,30 M60,0 L0,30" stroke="%23C8102E" stroke-width="4"/><path d="M30,0 v30 M0,15 h60" stroke="%23fff" stroke-width="10"/><path d="M30,0 v30 M0,15 h60" stroke="%23C8102E" stroke-width="6"/></svg>');
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 5px;
    min-width: 200px;
    z-index: 1000;
    list-style: none;
    padding: 10px 0;
    margin-top: 5px;
}

.language-selector-container:hover .dropdown-menu {
    display: block;
}

.language_selector {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease;
}

.language_selector:hover {
    background-color: #3a3a3a;
}

.language_selector i[data-language] {
    width: 24px;
    height: 18px;
    display: inline-block;
    background-size: cover;
}

.language-name {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

/* Login Panel */
.topbar-right-container {
    display: flex;
    align-items: center;
}

.login-panel {
    display: flex;
    gap: 10px;
}

.login-panel-item a {
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.login-button {
    background-color: transparent;
    border: 2px solid #d4af37;
    color: #d4af37 !important;
}

.login-button:hover {
    background-color: #d4af37;
    color: #000 !important;
}

.register-button {
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    color: #000 !important;
    border: none;
}

.register-button:hover {
    background: linear-gradient(135deg, #f4d03f, #d4af37);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .topbar-left-section {
        gap: 8px;
    }
    
    .topbar-item a,
    .topbar-item span {
        padding: 5px;
    }
    
    .telegram-btn span {
        display: none;
    }
    
    .login-panel-item a {
        padding: 6px 12px;
        font-size: 12px;
    }
}