/*
Theme Name: DekatRumah Child
Template: houzez
Version: 1.5
*/

/* =========================================================
   DEKATRUMAH CHILD THEME - CLEAN & PERFORMANCE SAFE CSS
   Catatan:
   - Tidak memakai will-change permanen.
   - Tidak memakai transition: all pada elemen besar.
   - Transform hover dibatasi hanya desktop.
   - Mobile dibuat lebih ringan untuk mengurangi risiko lag/scroll freeze.
========================================================= */


/* ================= GLOBAL ================= */

/* Logo footer: menjaga ukuran logo agar tidak terlalu besar */
.footer-logo img {
    max-width: 180px;
    height: auto;
}

/* Logo footer mobile: dibuat lebih kecil agar proporsional */
@media (max-width: 767px) {
    .footer-logo img {
        max-width: 120px;
    }
}

/* Logo header: menjaga tinggi logo agar layout header stabil */
.main-header .navbar-brand img,
.header-desktop .navbar-brand img,
.logo img {
    max-height: 75px !important;
    width: auto !important;
}


/* ================= KPR FORM (ID 6) ================= */

/* Container form KPR: tampilan clean dengan shadow ringan */
#cp_calculated_fieldsf_6 {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
    margin-top: 20px;
}

/* Input form KPR */
#cp_calculated_fieldsf_6 input {
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    border: 1px solid #e0e0e0;
}

/* Highlight Cicilan per Bulan */
#cp_calculated_fieldsf_6 #fieldname7_1 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1e5fd8 !important;
    background: #eef3ff !important;
    padding: 25px !important;
    border-radius: 12px !important;
    text-align: center !important;
}

/* Highlight Total Bunga */
#cp_calculated_fieldsf_6 input[id*="fieldname9"] {
    background-color: #fff3f3 !important;
    border: 1px solid #ffcccc !important;
    font-weight: 600;
}


/* ================= PAJAK FORM (ID 7) ================= */

/* Input form pajak */
#cp_calculated_fieldsf_7 input,
#cp_calculated_fieldsf_7 .form-control {
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    background-color: #f7f9fc !important;
}

/* Reset fieldname7 di Pajak agar tidak ikut style KPR */
#cp_calculated_fieldsf_7 #fieldname7_1 {
    font-size: 16px !important;
    font-weight: normal !important;
    background: #f7f9fc !important;
    padding: 12px !important;
}


/* ================= PREMIUM PAJAK INFO PANEL ================= */

.pajak-box {
    margin-top: 40px;
}

.pajak-box details {
    background: #ffffff;
    border-radius: 18px;
    padding: 40px 45px;
    border: 1px solid #e6eaf0;
    box-shadow: 0 20px 50px rgba(15,23,42,0.06);
}

.pajak-box summary {
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    list-style: none;
    padding-left: 28px;
    position: relative;
}

.pajak-box summary::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #2563eb;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 7px;
}

.pajak-box summary::-webkit-details-marker {
    display: none;
}

.pajak-box h3 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 25px;
    color: #0f172a;
}

.pajak-box h4 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 28px;
    margin-bottom: 8px;
    color: #1e293b;
}

.pajak-box p {
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
}

/* Tombol CTA Pajak: transition dibatasi agar tidak berat */
.pajak-cta-btn {
    display: inline-block;
    margin-top: 25px;
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: #fff !important;
    padding: 14px 30px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (min-width: 768px) {
    .pajak-cta-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(37,99,235,0.25);
    }
}


/* ================= KPR RESULT BOX ================= */

.kpr-result-box {
    display: none;
    background: linear-gradient(145deg, #ffffff, #f4f7fb);
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    text-align: center;
    margin-top: 40px;
}

.kpr-label {
    font-size: 18px;
    color: #6c7a89;
    margin-bottom: 10px;
}

/* KPR amount dibuat satu definisi final agar tidak bentrok */
.kpr-amount {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #1f3b75;
    text-align: center;
    word-break: break-word;
}

.kpr-amount .currency {
    font-size: 24px;
    margin-right: 4px;
}

@media (max-width: 768px) {
    .kpr-amount {
        font-size: 32px;
        line-height: 1.3;
    }

    .kpr-amount .currency {
        font-size: 18px;
    }
}

.kpr-period {
    font-size: 16px;
    color: #8fa3bf;
    margin-bottom: 25px;
}

.kpr-divider {
    height: 1px;
    background: #e3eaf3;
    margin: 20px 0;
}

.kpr-summary {
    font-size: 15px;
    color: #444;
    margin-top: 20px;
    margin-bottom: 25px;
}

.kpr-cta {
    display: inline-block;
    padding: 14px 30px;
    background: #25d366;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.25s ease;
}

.kpr-cta:hover {
    background: #1da851;
}

.summary-item {
    margin-bottom: 18px;
    text-align: center;
}

.summary-label {
    font-size: 14px;
    color: #6c7a89;
    margin-bottom: 6px;
}

.summary-value {
    font-size: 20px;
    font-weight: 600;
    color: #1f3b75;
}

.summary-value .currency {
    font-size: 16px;
    margin-right: 4px;
}


/* ===== FIX FIELD DISABLED PAJAK ===== */

#cp_calculated_fieldsf_7 input.form-control:disabled {
    background-color: #f3f3f3 !important;
}

.cp_cff_13 #fbuilder .codepeoplecalculatedfield {
    background-color: #f3f3f3 !important;
}


/* =========================================================
   PRICE TABLE / MEMBERSHIP PACKAGE
   Performance note:
   - Tidak memakai transition: all.
   - Hover dan transform hanya aktif di desktop.
   - Mobile dibuat statis agar tidak menambah beban GPU.
========================================================= */

.houzez-price-table {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,0.06);
    border: 1px solid #f1f1f1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 768px) {
    .houzez-price-table:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(0,0,0,0.12);
    }
}

.houzez-price-table .price-table-title {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.houzez-price-table-price {
    font-size: 42px;
    font-weight: 800;
    color: #111;
}

.houzez-price-table .btn-primary {
    border-radius: 50px;
    padding: 14px 32px;
    font-weight: 600;
    letter-spacing: 0.4px;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

@media (min-width: 768px) {
    .houzez-price-table .btn-primary:hover {
        transform: translateY(-2px);
    }
}

/* Paket featured: scale hanya desktop */
.houzez-price-table.featured {
    border: 2px solid #00aeef;
    box-shadow: 0 18px 45px rgba(0,174,239,0.25);
}

@media (min-width: 768px) {
    .houzez-price-table.featured {
        transform: scale(1.05);
    }
}

/* Mobile guard: hilangkan transform agar lebih ringan */
@media (max-width: 767px) {
    .houzez-price-table:hover,
    .houzez-price-table.featured,
    .houzez-price-table .btn-primary:hover {
        transform: none;
    }
}

.houzez-price-table .ribbon {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.houzez-price-table ul li {
    padding: 10px 0;
    font-size: 15px;
}


/* ========================================
   STYLE NON-AKTIF PAKET FREE
======================================== */

.free-disabled .btn,
.free-disabled .btn-primary {
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    color: #6b7280 !important;
    pointer-events: none !important;
    cursor: default !important;
    box-shadow: none !important;
}

.free-disabled .btn:hover,
.free-disabled .btn-primary:hover {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}


/* ========================================
   HERO IMAGE SAFE SETTING
   Catatan penting:
   - will-change: transform DIHAPUS.
   - Background tetap cover.
   - Ini lebih aman untuk mobile Safari/iPhone.
======================================== */

.hero-section,
.elementor-section.hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* =================================
   MOBILE MENU DROPDOWN IMPROVEMENT
================================= */

@media (max-width: 767px) {

    .mobile-nav .menu-item-has-children .dropdown-toggle {
        font-size: 22px !important;
        color: #0A58CA !important;
        opacity: 1 !important;
        padding: 12px !important;
    }

    .mobile-nav .menu-item-has-children > a {
        padding-right: 40px !important;
    }

    .mobile-nav .dropdown-toggle {
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
    }

    .mobile-nav .menu-item-has-children {
        position: relative;
    }

}


/* =========================================================
   UPLOAD FILE STYLE + LABEL
========================================================= */

input[type="file"]::file-selector-button {
    background: #2359d1;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
    background: #1b47a8;
}

.verification-upload-label {
    display: block;
    font-size: 12px;
    color: #666;
    margin: 4px 0 8px;
    line-height: 1.5;
}

.file-help-text {
    font-size: 12px;
    color: #8a8a8a;
    margin-top: 6px;
    line-height: 1.5;
}


/* =========================================================
   AGENCY LIST MOBILE FIX
   Fungsi:
   - Verified badge tampil di atas title.
   - Title tidak melebar keluar container.
========================================================= */

.agency-list-header {
    display: block;
}

.agency-list-verified {
    display: block;
    margin-bottom: 8px;
}

.agency-list-title {
    display: block;
    line-height: 1.3;
    margin: 0;
}

.agency-list-title a {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}


/* ============================================================
DEKATRUMAH – Hero Trust Info Inline FIX
============================================================ */

.dr-hero-trust.dr-hero-trust-inline{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:16px 22px !important;
    width:100% !important;
    margin-top:22px !important;
}

.dr-hero-trust.dr-hero-trust-inline .dr-hero-trust-item{
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:7px !important;
    white-space:nowrap !important;
    font-size:13px !important;
    line-height:1.4 !important;
    font-weight:500 !important;
    color:#475569 !important;
}

.dr-hero-trust.dr-hero-trust-inline .dr-hero-trust-item span{
    color:#2563eb !important;
    font-weight:800 !important;
    font-size:14px !important;
    line-height:1 !important;
}

@media (max-width:767px){
    .dr-hero-trust.dr-hero-trust-inline{
        gap:10px 14px !important;
        margin-top:18px !important;
    }

    .dr-hero-trust.dr-hero-trust-inline .dr-hero-trust-item{
        font-size:12px !important;
    }
}