/* ==========================================================================
   1. INTEGRASI FON POPPINS GLOBAL (TERMASUK INPUT & BUTTON)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght=300;400;500;600;700&display=swap');

.lzs-main-wrapper, 
.lzs-main-wrapper *, 
.lzs-calculator-container,
.lzs-calculator-container input,
.lzs-calculator-container select,
.lzs-calculator-container button,
.output-wrapper-block,
.alert-panel,
.btn-lzs,
.action-buttons-container button {
    font-family: 'Poppins', sans-serif !important;
}

/* ==========================================================================
   2. STRUKTUR GLOBAL DESKTOP (ANTI-LIMPAHAN & GAP FIX)
   ========================================================================== */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.lzs-main-wrapper {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    overflow: visible !important;
}

.lzs-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto 0px auto; 
    padding-bottom: 5px !important;
    position: relative !important;
}

.lzs-calculator-container {
    background: #ffffff; 
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    max-width: 1000px;
    margin: 10px auto 25px auto; 
    padding: 35px;
    box-sizing: border-box;
    position: relative;
    /* Dibuka visible bagi memastikan tooltip desktop terapung di luar dengan selamat */
    overflow: visible !important;
}

.elementor-widget-html {
    margin-bottom: 0px !important;
}

/* ==========================================================================
   3. PENZERAGAMAN MUTLAK WARNA HIJAU UNTUK SEMUA TAJUK BAHAGIAN
   ========================================================================== */
.lzs-main-header .section-title,
.lzs-main-header
.lzs-main-wrapper .lzs-main-header .section-title,
.lzs-main-header.margin-top-lg span {
    color: #74b816 !important;
    font-weight: 700 !important;
}
.zakat-badge-clickable .badge-text {
    color: #005AAB !important;
}

.zakat-badge-clickable {
    color: #0b54a0 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer;
    display: inline-block !important;
    position: relative !important;
}

.zakat-menu-dropdown {
    display: none;
    position: absolute;
    top: 25px;
    background-color: #ffffff;
    min-width: 200px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 8px 0;
    z-index: 1000;
    border: 1px solid #e2e8f0;
}

/* ==========================================================================
   4. STRUKTUR ELEMEN INDIVIDU & INTERFAS KALKULATOR
   ========================================================================== */
.section-title {
    font-size: 22px;
}

.zakat-badge {
    color: #0b54a0;
    font-weight: 700;
    font-size: 16px;
}

.toggle-container {
    position: absolute;
    top: 25px;
    right: 35px;
    display: flex;
    gap: 20px;
    z-index: 10;
}

.radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-label input[type="radio"] {
    margin-right: 6px;
    accent-color: #0b54a0;
    transform: scale(1.05);
}

.radio-text {
    font-weight: 700;
    color: #0b54a0;
    font-size: 14px;
}

.fields-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Lebar label diubah suai 100% untuk mengelakkan ralat susunan teks */
.input-row label {
    color: #475569;
    font-size: 15px;
    font-weight: 500;
    max-width: 100% !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Tooltip Layout Style (Desktop View Mode) */
.lzs-tooltip-container {
    position: relative !important;
    display: inline-block;
    cursor: pointer;
}

.lzs-tooltip-icon {
    font-size: 14px;
    color: #94a3b8;
    display: inline-block;
    line-height: 1;
}

.lzs-tooltip-text {
    visibility: hidden;
    width: 320px;
    background-color: #334155;
    color: #ffffff;
    text-align: left;
    border-radius: 8px;
    padding: 12px 14px;
    position: absolute;
    z-index: 999999 !important;
    bottom: 130%;
    left: 50%;
    transform: translateX(-15px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
    white-space: normal;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lzs-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 15px;
    border-width: 6px;
    border-style: solid;
    border-color: #334155 transparent transparent transparent;
}

.lzs-tooltip-container:hover .lzs-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Inputs, Badges & Currency Boxes Standard (Keseimbangan Desktop) */
.currency-input, .currency-display, .lzs-calculator-container select, .final-output-box {
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    width: 220px !important;
    min-width: 220px !important;
    height: 42px;
    box-sizing: border-box;
    overflow: hidden;
}

.lzs-calculator-container select {
    padding: 0 10px;
    font-size: 14px;
    color: #334155;
    outline: none;
    cursor: pointer;
}

.addon-rm {
    background: #0b54a0;
    color: #ffffff;
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
}

.currency-input input {
    width: 100%;
    border: none;
    padding: 0 12px;
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    outline: none;
}

.total-row {
    margin-top: 10px;
    justify-content: flex-end;
}

.text-bold {
    font-weight: 700 !important;
    color: #1e293b !important;
}

.border-green { border-color: #74b816; background: #ffffff !important; }
.bg-green { background: #74b816 !important; color: white !important; }
.border-blue { border-color: #0b54a0; background: #ffffff !important; }
.bg-blue { background: #0b54a0 !important; color: white !important; }
.border-gray { border-color: #cbd5e1; background: #ffffff !important; }

.addon-rm-display {
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    background: #0b54a0;
    color: #ffffff;
}

.val-text {
    width: 100%;
    text-align: right;
    padding-right: 14px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.margin-top-lg { margin-top: 40px; }

/* Grand Summary Block Box Layouts */
.output-wrapper-block {
    max-width: 1000px;
    margin: -10px auto 30px auto; 
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    gap: 16px;
    padding-right: 35px; 
    box-sizing: border-box;
}

.output-grand-row {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    gap: 25px; 
    width: 100%; 
}

.output-grand-row label {
    font-size: 15px !important;
    font-weight: 700;
    color: #1e293b;
    text-align: right;
    white-space: nowrap;
}

/* Pemulihan Gaya Panel Amaran Luaran */
.alert-panel {
    display: flex !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 35px auto 0 auto !important;
    padding: 20px !important;
    border-radius: 12px !important;
    align-items: flex-start !important;
    border: 1px solid !important;
    box-sizing: border-box !important;
}

.alert-neutral { background: #ffffff !important; border-color: #cbd5e1 !important; color: #475569 !important; }
.alert-success { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #166534 !important; }
.alert-danger { background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; }

.alert-icon { font-size: 22px !important; font-weight: bold !important; line-height: 1 !important; }
.alert-text { font-size: 15px !important; line-height: 1.5 !important; text-align: left !important; }
.alert-text strong { font-size: 17px !important; }

/* Pemulihan Gaya Butang Operasi Luaran */
.action-buttons-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 1000px !important;
    margin: 30px auto 0 auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.btn-lzs, .action-buttons-container button {
    border: none !important;
    outline: none !important;
    height: 44px !important;
    padding: 0 24px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.15s ease !important;
    text-decoration: none !important;
}

.btn-action, .action-buttons-container button.btn-action { background-color: #0b54a0 !important; color: #ffffff !important; }
.btn-action:hover, .action-buttons-container button:hover { background-color: #083e77 !important; }
.btn-reset, .action-buttons-container button.btn-reset { background-color: #e2e8f0 !important; color: #334155 !important; }
.btn-reset:hover { background-color: #cbd5e1 !important; }
.btn-long { padding: 0 30px !important; }

/* ==========================================================================
   5. SISTEM RESPONSIF MULTI-BREAKPOINT (MOBILE & TABLET MUTLAMAD)
   ========================================================================== */
@media (max-width: 1024px) {
    .custom-main-header { 
        height: 70px !important; 
        min-height: 70px !important; 
        padding: 0 !important;
        max-width: 100vw !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 999999999 !important;
    }
    .header-inner-wrap { 
        height: 100% !important; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: space-between !important; 
        padding: 0 15px !important; 
        max-width: 100vw !important; 
        position: relative !important;
        z-index: 999999999 !important;
    }
    .logo-zakat { width: 120px !important; max-width: 40vw !important; height: auto !important; align-self: center !important; margin: 0 !important; }
    .mobile-toggle { display: flex !important; align-self: center !important; margin: 0 !important; }
    body { padding-top: 70px !important; }
}

@media (max-width: 768px) {
    .malay-translation { display: block !important; width: 90% !important; max-width: 85% !important; margin: 0 auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; text-align: center !important; }
    
    .lzs-calculator-container {
        overflow: visible !important;
        padding: 35px 20px !important;
    }
    
    .lzs-main-wrapper {
        overflow: visible !important;
    }

    .zakat-menu-dropdown {
        left: 0 !important;
        right: auto !important;
    }

    /* Kunci kedudukan pembungkus paksi barisan input pada mobile */
    .input-row {
        position: relative !important;
    }

    /* Menyekat ruang lingkup relatif kontena kecil pada mobile */
    .lzs-tooltip-container {
        position: static !important; 
    }

    /* Penyelesaian Flip Tooltip Kiri Dinamik Idea Anda */
    .lzs-tooltip-text {
        position: absolute !important;
        width: calc(100vw - 60px) !important; 
        max-width: 250px !important;
        left: auto !important;
        right: 0 !important; 
        transform: none !important;
        bottom: 50px !important; 
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
        visibility: hidden;
        opacity: 0;
        z-index: 999999 !important;
    }

    .lzs-tooltip-container:hover .lzs-tooltip-text {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .lzs-tooltip-text::after {
        left: auto !important;
        right: 8px !important; 
        top: 100% !important;
        bottom: auto !important;
        border-color: #334155 transparent transparent transparent !important;
        transform: none !important;
    }

    /* Layout Responsif Kalkulator Mudah Alih */
    .input-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .total-row { align-items: flex-end; }
    
    /* Penyeragaman lebar kotak input dan kotak jumlah luar */
    .currency-input, .currency-display, .lzs-calculator-container select, .final-output-box { 
        width: 100% !important; 
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    .lzs-main-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .toggle-container { position: static; margin-bottom: 15px; justify-content: flex-start; }
    
    .output-wrapper-block { 
        align-items: flex-start; 
        width: 100%; 
        padding-left: 20px !important;
        padding-right: 20px !important; 
        box-sizing: border-box !important;
    }
    
    .output-grand-row { flex-direction: column; align-items: flex-start; width: 100%; gap: 6px; }
    .output-grand-row label { text-align: left; white-space: normal; }
    
    .action-buttons-container { flex-direction: column !important; width: 100% !important; gap: 10px !important; padding: 0 20px !important; box-sizing: border-box !important; }
    .btn-lzs, .action-buttons-container button { width: 100% !important; }
    
    .alert-panel {
        margin: 25px auto 0 auto !important;
        padding: 15px !important;
        width: calc(100% - 40px) !important;
    }
}

/* ==========================================================================
   6. MUTAMAD: MEMBUANG/MENYEMBUNYIKAN BUTANG CETAK UNTUK SEMUA WIDGET
   ========================================================================== */
.action-buttons-container .btn-action:not([onclick*="jalankanSistemBayaran"]),
.action-buttons-container button:nth-child(2):not([onclick*="jalankanSistemBayaran"]) {
    display: none !important;
}

/* ==========================================================================
   7. MUTAMAD: MEMBUANG BUTANG ANAK PANAH PADA SEMUA INPUT NOMBOR
   ========================================================================== */
.currency-input input[type="number"]::-webkit-outer-spin-button,
.currency-input input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.currency-input input[type="number"],
input[type="number"] {
    -moz-appearance: textfield !important;
}

/* Custom adjustment to align only the warning icon vertically */
.alert-panel .alert-icon {
    display: inline-flex !important;
    align-self: center !important;
    transform: translateY(2px) !important; /* Visual fine-tuning adjustment down */
    line-height: 1 !important;
}