/* 1. Positioning the Widget (Bottom Left) */
.wa-widget {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 9999; /* Ensures it stays on top of other elements */
}

/* 2. Styling the Bubble (The Green Pill) */
.wa-bubble {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between icon and text */
    background-color: #25D366; /* Official WhatsApp Green */
    color: white;
    padding: 10px 20px 10px 15px; /* Adjust padding for visual balance */
    border-radius: 50px; /* Makes it pill-shaped */
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Soft shadow */
    transition: all 0.3s ease; /* Smooth animation */
    font-family: sans-serif; /* Or use your website's font */
}

/* 3. Styling the Icon */
.wa-bubble img {
    width: 30px;
    height: 30px;
    display: block; /* Removes extra space below image */
}

/* 4. Styling the Text */
.wa-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

/* 5. Hover Effects (Interaction) */
.wa-bubble:hover {
    background-color: #20b85a; /* Slightly darker green on hover */
    transform: translateY(-3px); /* Moves up slightly */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* Shadow grows */
}

/* OPTIONAL: Mobile Responsiveness */
@media (max-width: 480px) {
    .wa-widget {
        bottom: 15px;
        left: 15px;
    }
    .wa-text {
        font-size: 14px; /* Smaller text on mobile */
    }
    .wa-bubble {
        padding: 8px 15px 8px 10px;
    }
}

/* 1. Container Utama Logo */
.logo {
    display: flex; /* Menggunakan Flexbox untuk layout yang mudah */
    align-items: center; /* Vertikal tengah */
    height: 100%; /* Mengisi tinggi header/navbar */
    padding: 10px 0; /* Memberi ruang nafas atas-bawah */
}

/* 2. Styling Link Pembungkus (<a>) */
.logo-text {
    display: flex; /* Flexbox lagi di dalam link */
    align-items: center; /* Vertikal tengah: Gambar & Teks sejajar */
    gap: 12px; /* Jarak antara gambar logo dan teks */
    text-decoration: none; /* Hilangkan garis bawah link */
    color: #333; /* Warna teks default (bisa diganti putih jika header gelap) */
    transition: opacity 0.3s ease; /* Efek halus saat di-hover */
}

/* 3. Efek Hover */
.logo-text:hover {
    opacity: 0.8; /* Sedikit transparan saat disorot mouse */
    color: #0056b3; /* Ganti warna teks saat hover (opsional) */
}

/* 4. Styling Gambar Logo */
.logo img {
    height: 50px; /* Tinggi logo tetap (sesuaikan dengan desainmu) */
    width: auto; /* Lebar otomatis menyesuaikan rasio */
    object-fit: contain; /* Memastikan logo tidak gepeng/terpotong */
    display: block; /* Menghilangkan spasi bawah default gambar */
}

/* 5. Styling Teks Logo (<b>) */
.logo b {
    font-family: 'Poppins', sans-serif; /* Ganti dengan font websitemu */
    font-size: 20px; /* Ukuran teks */
    font-weight: 700; /* Tebal */
    text-transform: uppercase; /* Huruf Kapital Semua */
    line-height: 1.2; /* Jarak antar baris jika teks panjang */
    letter-spacing: 0.5px; /* Jarak antar huruf sedikit renggang */
}

/* RESPONSIVE (Tampilan HP) */
@media (max-width: 768px) {
    .logo img {
        height: 40px; /* Logo lebih kecil di HP */
    }
    
    .logo b {
        font-size: 16px; /* Teks lebih kecil di HP */
        display: block; /* Opsional: Jika teks panjang, biar turun ke bawah atau tetap flex */
    }
}