/**
 * style.css
 * CSS shared untuk seluruh public site hakmilik.my.
 *
 * Diekstrak dari public-partials/header.php supaya browser boleh cache
 * fail ni berasingan (tak perlu muat semula setiap kali page load,
 * beza dari <style> inline yang duplicate dalam setiap HTML output).
 *
 * Rujuk 07_DESIGN_REFERENCE.md untuk prinsip design (Marble & Gold palette).
 */

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #F5F4EF;
}

.font-display {
    font-family: 'Fraunces', serif;
}

/* [Font — Ogos 2026] Khusus paparan NOMBOR/HARGA (harga projek, anggaran
 * bulanan, stamp duty, RPGT, hasil sewa dsb) — Fraunces (.font-display)
 * KEKAL untuk heading/nama brand, TAK diganti terus. Lexend dipilih sebab
 * direka khusus untuk kelajuan membaca (readability research) — digit
 * besar yang visitor kena scan pantas lebih jelas berbanding Fraunces
 * (serif dengan kontras stroke tinggi, kurang sesuai untuk nombor).
 * Rujuk VERSION_HISTORY.md untuk senarai lengkap tempat class ni dipakai. */
.font-numeric {
    font-family: 'Lexend', 'Plus Jakarta Sans', sans-serif;
}

[x-cloak] {
    display: none !important;
}

/* ═══ Card hover lift (rujuk 07_DESIGN_REFERENCE.md - "premium interaction") ═══ */
.card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px -8px rgba(201,161,92,0.35);
}

/* ═══ Navbar Pill Segmented Capsule ═══ */
.nav-pill-group {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    background: white;
    border-radius: 999px;
    padding: 0.5rem 0.6rem;
    box-shadow: 0 2px 8px rgba(58,52,44,0.06);
}

.nav-pill-link {
    position: relative;
    padding: 0.6rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #3A342C;
    opacity: 0.65;
    text-decoration: none;
    border-radius: 999px;
    transition: opacity 0.25s ease, color 0.25s ease, background-color 0.25s ease;
    white-space: nowrap;
    line-height: 1;
}

.nav-pill-link.active {
    opacity: 1;
    color: #FDFCF9;
    background: #3A342C;
    font-weight: 600;
}

.nav-pill-link:not(.active):hover {
    opacity: 1;
    background: rgba(201,161,92,0.12);
    color: #C9A15C;
}

.nav-cta-outline {
    padding: 0.6rem 1.4rem;
    background: transparent;
    border: 1.5px solid #C9A15C;
    color: #C9A15C;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-cta-outline:hover {
    background: #C9A15C;
    color: #FDFCF9;
}

/* ═══ Language Switcher ═══ */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.lang-switch a {
    text-decoration: none;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.lang-switch-active {
    color: #C9A15C;
    opacity: 1;
}
.lang-switch-inactive {
    color: #3A342C;
    opacity: 0.4;
}
.lang-switch-inactive:hover {
    opacity: 0.7;
}
.lang-switch-divider {
    color: #3A342C;
    opacity: 0.2;
    font-size: 0.75rem;
}

/* ═══ Mobile Hamburger Button ═══ */
.mobile-hamburger {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: white;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(58,52,44,0.1);
}

.mobile-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #3A342C;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.mobile-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-hamburger.open span:nth-child(2) {
    opacity: 0;
}
.mobile-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ═══ Mobile Dropdown Menu (Pattern A — slide-down) ═══ */
.mobile-dropdown {
    background: white;
    border-top: 1px solid rgba(58,52,44,0.08);
}

.mobile-dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #3A342C;
    opacity: 0.75;
    text-decoration: none;
    border-bottom: 1px solid rgba(58,52,44,0.05);
}

.mobile-dropdown-link.active {
    color: #C9A15C;
    opacity: 1;
    font-weight: 600;
    background-color: rgba(201,161,92,0.06);
}

.mobile-dropdown-lang {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(58,52,44,0.05);
}

/* Mobile: pill group jadi scroll horizontal supaya tak pecah layout */
@media (max-width: 768px) {
    .nav-pill-group {
        overflow-x: auto;
        max-width: 60vw;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .nav-pill-group::-webkit-scrollbar {
        display: none;
    }
    .nav-pill-link {
        padding: 0.55rem 0.85rem;
        font-size: 0.8rem;
    }
}

/* Featured Projects carousel (homepage) — hide scrollbar merentasi semua
   browser (WebKit perlukan pseudo-element berasingan, tak boleh inline style) */
.featured-carousel-track {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.featured-carousel-track::-webkit-scrollbar {
    display: none;
}

/* ═══ Carousel Arrow — Varian "Shimmer Line" ═══
   Reuse signature shimmer-line animation dari hero homepage (garis gold
   halus di bawah headline) — supaya butang carousel rasa sebahagian
   bahasa visual brand, bukan komponen generic terpisah.
   Rujuk 07_DESIGN_REFERENCE.md > Tone Visual > Animation. */
.carousel-arrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.carousel-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3A342C0D;
    color: #3A342C;
    font-size: 1rem;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.carousel-arrow-line {
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #C9A15C, transparent);
    transition: width 0.3s ease;
}
.carousel-arrow-wrap:hover .carousel-arrow {
    background-color: #3A342C;
    color: white;
    transform: scale(1.05);
}
.carousel-arrow-wrap:hover .carousel-arrow-line {
    width: 32px;
}
.carousel-arrow-wrap:focus-visible .carousel-arrow {
    outline: 2px solid #C9A15C;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   WhatsApp "Sound-wave Reply" CTA — dipakai merentas public site
   (Tentang Kami, FAQ, Splash). Ikon SVG WhatsApp rasmi + bar
   animasi CSS-only (tiada JS library), konsisten dengan prinsip
   animation pure CSS @keyframes.
   ═══════════════════════════════════════════════════════════ */
.wa-soundwave-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px 12px 14px;
    background-color: #FFFFFF;
    border: 1.5px solid #EEE8DA;
    border-radius: 18px;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(58, 52, 44, 0.06);
    transition: border-color 0.2s ease, transform 0.15s ease;
    max-width: 100%;
}
.wa-soundwave-cta:hover {
    border-color: #C9A15C;
    transform: translateY(-1px);
}
.wa-soundwave-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background-color: #0B5D4A;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wa-soundwave-text {
    text-align: left;
    min-width: 0;
    flex-shrink: 0;
}
.wa-soundwave-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #3A342C;
    line-height: 1.3;
    white-space: nowrap;
}
.wa-soundwave-bars {
    display: flex;
    align-items: center;
    gap: 2.5px;
    margin-top: 3px;
    height: 10px;
    white-space: nowrap;
    flex-wrap: nowrap;
    width: max-content;
}
.wa-soundwave-bars span:not(.wa-soundwave-caption) {
    width: 2.5px;
    height: 10px;
    background-color: #C9A15C;
    border-radius: 2px;
    animation: wa-wave 1s infinite;
}
.wa-soundwave-bars span:nth-child(2) { animation-delay: 0.1s; }
.wa-soundwave-bars span:nth-child(3) { animation-delay: 0.2s; }
.wa-soundwave-bars span:nth-child(4) { animation-delay: 0.3s; }
.wa-soundwave-caption {
    font-size: 10.5px;
    color: #6B6459;
    margin-left: 4px;
    font-weight: 500;
}
@keyframes wa-wave {
    0%, 60%, 100% { transform: scaleY(0.4); }
    30% { transform: scaleY(1); }
}

/* ─── Navbar CTA (desktop) — Konsep 1: mini sound-wave dalam outline pill ─── */
.nav-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.nav-cta-outline .wa-nav-bars {
    display: inline-flex;
    align-items: center;
    gap: 1.5px;
    height: 9px;
}
.nav-cta-outline .wa-nav-bars span {
    width: 2px;
    height: 9px;
    background-color: #0B5D4A;
    border-radius: 1px;
    animation: wa-wave 1s infinite;
}
.nav-cta-outline .wa-nav-bars span:nth-child(2) { animation-delay: 0.15s; }
.nav-cta-outline .wa-nav-bars span:nth-child(3) { animation-delay: 0.3s; }

/* ─── Mobile dropdown CTA — Konsep 6: WhatsApp SVG + label, full-width ───
   [Fix — 25 Ogos 2026] Teks nampak tersasar dari center (dilaporkan Hafiz)
   sebab justify-content:center center-kan KUMPULAN icon+teks (23px lebar
   icon+gap menolak optical center teks ke kanan sikit). Fix: padding-right
   tambahan seimbang dengan lebar icon+gap supaya teks sendiri jatuh
   tepat di tengah button, bukan kumpulan icon+teks. -->
.mobile-dropdown-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background-color: #0B5D4A;
    border-radius: 10px;
    padding: 12px 14px 12px 23px;
    text-decoration: none;
    margin-top: 4px;
}
.mobile-dropdown-cta svg {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   Status Badge ATAS FOTO — fix kontras (backdrop-blur + shadow)
   Dipakai bersama getStatusBadgeStylePhoto() di includes/helpers.php.
   Sebelum ni badge guna warna tint alpha rendah (sesuai admin table
   background putih) tapi hilang/tak jelas bila overlay atas foto.
   ═══════════════════════════════════════════════════════════ */
.status-badge-photo {
    backdrop-filter: blur(3px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ─── Badge Tag Gallery — Konsep A: pill bertindih, dashed border gold ─── */
.gallery-tag-pill-wrap {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
}
.gallery-tag-pill {
    background-color: rgba(253, 252, 249, 0.94);
    backdrop-filter: blur(4px);
    color: #3A342C;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1.5px dashed #C9A15C;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   Rich Text Content — untuk papar output Quill.js (FAQ jawapan,
   artikel, Tentang Kami lama). Tailwind CDN (Play CDN) TAK include
   @tailwindcss/typography plugin secara default, jadi class `prose`
   sahaja TIDAK memberi kesan — Tailwind preflight strip semua margin
   default elemen (termasuk <p>), punca beberapa <p> yang Quill jana
   (satu setiap baris/enter) nampak "bergabung" jadi satu blok teks
   tanpa jarak. Class ni fix terus tanpa bergantung plugin luar.
   ═══════════════════════════════════════════════════════════ */
.rich-content p {
    margin-bottom: 0.75em;
}
.rich-content p:last-child {
    margin-bottom: 0;
}
.rich-content ul,
.rich-content ol {
    margin: 0.5em 0 0.75em;
    padding-left: 1.5em;
}
.rich-content ul {
    list-style-type: disc;
}
.rich-content ol {
    list-style-type: decimal;
}
.rich-content li {
    margin-bottom: 0.25em;
}
.rich-content a {
    color: #0B5D4A;
    text-decoration: underline;
}
.rich-content strong {
    font-weight: 700;
}
.rich-content blockquote {
    border-left: 3px solid #C9A15C;
    padding-left: 1em;
    margin: 0.75em 0;
    color: inherit;
    opacity: 0.85;
}

/* [v1.72.2] Embed video (YouTube/Vimeo, tag <iframe class="ql-video">
   dari Quill) — wrapper aspect-ratio 16:9 supaya video responsive dan
   tak pecah layout di mobile. Rujuk includes/helpers.php > sanitizeRichText()
   untuk whitelist domain yang dibenarkan lepas save. */
.rich-content iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    max-width: 100%;
    border: 0;
    border-radius: 12px;
    margin: 1em 0;
}

/* ═══ Coastal Mineral — public brand theme ═══
   Palette: chalk #F5F4EF · mineral #1F7182 · sea-glass #A8CBC7 ·
   coral #ED8064 · charcoal #273036. Rules below intentionally map the
   legacy inline palette too, so public pages created at different times
   remain visually consistent without affecting the admin dashboard. */
:root {
    --coastal-chalk: #F5F4EF;
    --coastal-mineral: #1F7182;
    --coastal-sea-glass: #A8CBC7;
    --coastal-coral: #ED8064;
    --coastal-charcoal: #273036;
    --coastal-line: rgba(39, 48, 54, 0.12);
}

body {
    color: var(--coastal-charcoal);
    background:
        radial-gradient(circle at 82% 4%, rgba(168, 203, 199, 0.20), transparent 26rem),
        radial-gradient(circle at 8% 30%, rgba(237, 128, 100, 0.07), transparent 25rem),
        var(--coastal-chalk);
}

/* ═══ [Ogos 2026] "Facet Marble Cut" — ganti versi outline lama ═══
 * PUNCA MASALAH (dilaporkan Hafiz via screenshot mobile): versi asal guna
 * `border: 1px solid` atas border-radius tak simetri (organic blob outline)
 * — stroke 1px pada kelengkungan tak sekata anti-alias TERUK pada skrin
 * DPI tinggi (phone), nampak macam "rambut"/calar halus merentasi skrin.
 * FIX: tukar dari OUTLINE (border) kepada FILL SOLID (background) + blur +
 * clip-path polygon tak simetri — rasa "potongan facet marmar", konsisten
 * dengan bentuk organic asal (bukan geometrik kaku), tapi tiada stroke
 * nipis mentah yang punca alias. clip-path + blur render stabil pada
 * semua DPI sebab tiada 1px hairline yang perlu di-render tepat.
 * Warna guna var(--coastal-*) sebenar (bukan Marble/Gold #C9A15C lama
 * dalam 07_DESIGN_REFERENCE.md yang dah outdated berbanding kod live). */
.coastal-hero {
    position: relative;
    overflow: hidden;
}
.coastal-hero::before,
.coastal-hero::after {
    content: '';
    position: absolute;
    pointer-events: none;
    filter: blur(1px);
}
.coastal-hero::before {
    width: 32rem;
    height: 13rem;
    right: -9rem;
    top: 1.5rem;
    transform: rotate(-10deg);
    background: linear-gradient(135deg, rgba(31, 113, 130, 0.16), rgba(168, 203, 199, 0.08) 60%, transparent);
    clip-path: polygon(8% 0%, 100% 12%, 92% 88%, 0% 100%);
}
.coastal-hero::after {
    width: 24rem;
    height: 10rem;
    left: -10rem;
    bottom: 1.5rem;
    transform: rotate(14deg);
    background: linear-gradient(315deg, rgba(237, 128, 100, 0.14), rgba(237, 128, 100, 0.04) 65%, transparent);
    clip-path: polygon(0% 8%, 100% 0%, 100% 100%, 12% 92%);
}

/* Navigation and reusable components */
.nav-pill-group { box-shadow: 0 4px 16px rgba(31, 113, 130, 0.10); }
.nav-pill-link { color: var(--coastal-charcoal); }
.nav-pill-link.active { color: #fff; background: var(--coastal-mineral); }
.nav-pill-link:not(.active):hover { background: rgba(168, 203, 199, 0.35); color: var(--coastal-mineral); }
.nav-cta-outline { border-color: var(--coastal-coral); color: var(--coastal-coral); }
.nav-cta-outline:hover { background: var(--coastal-coral); color: #fff; }
.lang-switch-active { color: var(--coastal-coral); }
.lang-switch-inactive, .lang-switch-divider, .mobile-dropdown-link { color: var(--coastal-charcoal); }
.mobile-hamburger span { background: var(--coastal-mineral); }
.mobile-dropdown { border-color: var(--coastal-line); }
.mobile-dropdown-link { border-color: var(--coastal-line); }
.mobile-dropdown-link.active { color: var(--coastal-mineral); background-color: rgba(168, 203, 199, 0.20); }
.mobile-dropdown-cta, .nav-cta-outline .wa-nav-bars span { background-color: var(--coastal-coral); }
.card-hover:hover { box-shadow: 0 14px 30px -10px rgba(31, 113, 130, 0.30); }
.carousel-arrow { background-color: rgba(31, 113, 130, 0.09); color: var(--coastal-mineral); }
.rich-content a { color: var(--coastal-mineral); }
.rich-content blockquote { border-left-color: var(--coastal-coral); }
.gallery-tag-pill { color: var(--coastal-charcoal); border-color: var(--coastal-coral); background-color: rgba(245, 244, 239, 0.94); }

/* ═══ Liquid Wave navigation — desktop only (gantikan Fold Line, v1.33.0) ═══
 * Keputusan design baru: rujuk DESIGN_SYSTEM.md. Garis ombak sea-glass
 * putus-putus "mengalir" berterusan (animasi stroke-dashoffset) di bawah
 * SEMUA link — metafora air/coastal secara literal. Halaman aktif dapat
 * garis ombak coral lebih tebal & lebih laju, dilukis sebagai <svg>
 * BERASINGAN (.wave-line-active) yang cuma wujud dalam link .active
 * (rujuk header.php), width:100% relatif kepada link tu sendiri — jadi
 * TAK perlu JS mengira posisi/lebar ikut halaman semasa, cukup CSS +
 * markup kondisi PHP yang sedia ada (publicNavClass()). */
.liquid-wave-nav { position: relative; padding: 0 0.4rem 0.9rem; min-width: 31rem; }
.liquid-wave-links { display: flex; align-items: center; justify-content: center; gap: 0.65rem; position: relative; z-index: 1; }
.liquid-wave-links .nav-pill-link { position: relative; padding: 0.48rem 0.9rem; color: var(--coastal-charcoal); background: transparent; border-radius: 3px; opacity: 0.72; font-weight: 600; }
.liquid-wave-links .nav-pill-link:not(.active):hover { color: var(--coastal-mineral); opacity: 1; }
.liquid-wave-links .nav-pill-link.active { color: var(--coastal-charcoal); opacity: 1; font-weight: 700; }
.wave-line-base { position: absolute; left: 0; bottom: -0.55rem; width: 100%; height: 1.35rem; overflow: visible; pointer-events: none; }
.wave-line-base path { fill: none; stroke: var(--coastal-sea-glass); stroke-width: 2; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; animation: liquidWaveFlow 3.2s linear infinite; }
.wave-line-active { position: absolute; left: 0; bottom: -0.6rem; width: 100%; height: 1.1rem; overflow: visible; pointer-events: none; z-index: 2; }
.wave-line-active path { fill: none; stroke: var(--coastal-coral); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@keyframes liquidWaveFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .wave-line-base path { animation: none; } }

/* ═══ Property Decision Studio (/tools.php) ═══ */
.tools-page { background: var(--coastal-chalk); color: var(--coastal-charcoal); padding-bottom: 4.5rem; overflow: hidden; }
.tools-wrap { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.tools-hero { position: relative; padding: 3.5rem 0 3rem; border-bottom: 1px solid rgba(39,48,54,.09); overflow: hidden; }
.tools-hero-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(285px,.65fr); align-items: center; gap: 4rem; position: relative; z-index: 1; }
.tools-eyebrow, .tools-section-tag { margin: 0 0 .8rem; color: var(--coastal-mineral); font-size: .69rem; font-weight: 700; letter-spacing: .19em; }
.tools-hero h1 { max-width: 740px; margin: 0; font-family: 'Fraunces', serif; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.1; letter-spacing: -.03em; }
.tools-lead { max-width: 620px; margin: 1.35rem 0 0; color: #5c6b70; font-size: 1.05rem; line-height: 1.75; }
.tools-contour { position: absolute; pointer-events: none; border: 1px solid rgba(168,203,199,.52); border-radius: 48% 52% 57% 43% / 44% 52% 48% 56%; }
.tools-contour-one { width: 44rem; height: 25rem; top: -9rem; right: -13rem; transform: rotate(-17deg); }
.tools-contour-two { width: 47rem; height: 19rem; left: -22rem; bottom: -15rem; transform: rotate(11deg); }
.tools-journey-card { padding: 2.1rem; border: 1px solid rgba(39,48,54,.12); background: rgba(255,255,255,.78); box-shadow: 0 16px 40px rgba(39,48,54,.07); }
.tools-mini-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 1px solid var(--coastal-sea-glass); border-radius: 50%; color: var(--coastal-mineral); font-size: 1.35rem; }
.tools-journey-card h2 { margin: 1.25rem 0 1rem; font-family: 'Fraunces', serif; font-size: 1.75rem; line-height: 1.1; }
.tools-journey-card button { display: flex; width: 100%; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid rgba(39,48,54,.12); color: var(--coastal-charcoal); font-size: .88rem; text-align: left; transition: color .2s ease, padding-left .2s ease; }
.tools-journey-card button:hover { color: var(--coastal-mineral); padding-left: .35rem; }
.tools-journey-card button span { color: var(--coastal-coral); font-size: 1.1rem; }
.tools-workspace { margin-top: 3rem; }
.tools-project-bar { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; padding: 1.6rem 0 1.8rem; border-bottom: 1px solid rgba(39,48,54,.13); }
.tools-project-bar h2 { margin: 0; font-family: 'Fraunces', serif; font-size: clamp(1.45rem, 2vw, 2rem); }
.tools-select-wrap { display: block; min-width: 300px; color: #5c6b70; font-size: .76rem; font-weight: 700; letter-spacing: .04em; }
.tools-select-wrap { position: relative; }.tools-select-wrap::after { content: '⌄'; position: absolute; right: .9rem; bottom: .78rem; color: var(--coastal-mineral); font-size: 1.15rem; pointer-events: none; }.tools-select-wrap select { display: block; width: 100%; margin-top: .45rem; padding: .88rem 2.7rem .88rem 1rem; appearance: none; border: 1px solid rgba(31,113,130,.34); border-radius: .7rem; background: linear-gradient(135deg, #fff 0%, #f1f7f6 100%); color: var(--coastal-charcoal); font-size: .86rem; font-weight: 600; box-shadow: 0 5px 14px rgba(39,48,54,.05); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }.tools-select-wrap select:focus { border-color: var(--coastal-mineral); box-shadow: 0 0 0 3px rgba(168,203,199,.42); outline: 0; }.tools-select-wrap select:hover { transform: translateY(-1px); }
.tools-tabs { display: flex; gap: .25rem; overflow-x: auto; margin: 0 -0.35rem; padding: 0 .35rem .7rem; border-bottom: 1px solid rgba(39,48,54,.14); scrollbar-width: thin; }
.tools-tabs button { flex: 0 0 auto; padding: .78rem .85rem .88rem; border-bottom: 2px solid transparent; color: #6f7b7e; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.tools-tabs button b { margin-right: .4rem; color: var(--coastal-sea-glass); font-size: .65rem; }
.tools-tabs button:hover { color: var(--coastal-mineral); }
.tools-tabs button.is-active { border-color: var(--coastal-coral); color: var(--coastal-charcoal); }
.tools-tabs button.is-active b { color: var(--coastal-coral); }
.tools-panels { min-height: 520px; padding-top: 2rem; }
.tools-panel-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 1.5rem; align-items: stretch; }
.tools-form-card, .tools-result-card, .tools-summary-panel { border: 1px solid rgba(39,48,54,.13); background: rgba(255,255,255,.83); box-shadow: 0 8px 25px rgba(39,48,54,.035); }
.tools-form-card { padding: clamp(1.35rem, 3.5vw, 2.4rem); }
.tools-form-card h2, .tools-summary-panel h2 { margin: 0 0 2rem; font-family: 'Fraunces', serif; font-size: clamp(1.55rem, 2.6vw, 2.35rem); letter-spacing: -.035em; }
/* Baris label guna flex (BUKAN float) supaya urutan visual = urutan DOM,
 * predictable 100% tanpa "reflow" float yang boleh letak elemen bukan-float
 * (macam butang "?") di tempat tak dijangka. flex-wrap supaya <input>/
 * <select> (elemen terakhir, diberi flex-basis 100%) turun baris baru
 * secara automatik tanpa perlu <br> atau wrapper tambahan. */
.tools-form-card label:not(.tools-check) { display: flex; flex-wrap: wrap; align-items: baseline; position: relative; margin-bottom: 1.25rem; color: #516166; font-size: .78rem; font-weight: 700; }
/* PENTING: selector unit MESTI ":not(.tools-tip-wrap)" — sebab .tools-tip-wrap
 * pun <span>, kalau guna selector generic "> span" ia turut dapat
 * margin-left:auto dan terdorong jauh dari label (bug v1.32.2: gap besar
 * tak dijangka antara label dan butang "?"). Cuma unit sebenar (RM/%/tahun)
 * yang patut auto-margin ke kanan; .tools-tip-wrap kekal ikut flow biasa
 * terus lepas teks label, gap kecil sahaja (rujuk .tools-tip-button
 * margin-left di bawah). */
.tools-form-card label:not(.tools-check) > span:not(.tools-tip-wrap) { margin-left: auto; color: var(--coastal-mineral); font-size: .67rem; letter-spacing: .05em; }
.tools-form-card label:not(.tools-check) > input,
.tools-form-card label:not(.tools-check) > select { flex-basis: 100%; }
.tools-form-card input:not([type="checkbox"]), .tools-form-card select { display: block; width: 100%; margin-top: .45rem; padding: .88rem .95rem; appearance: none; border: 1px solid rgba(31,113,130,.28); border-radius: .7rem; background: linear-gradient(135deg, #fff 0%, #f8fbfa 100%); color: var(--coastal-charcoal); font-family: inherit; font-size: 1rem; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 10px rgba(39,48,54,.035); outline: 0; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }.tools-form-card input:not([type="checkbox"]):focus, .tools-form-card select:focus { border-color: var(--coastal-mineral); background: #fff; box-shadow: 0 0 0 3px rgba(168,203,199,.4); }
.tools-two-col { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.tools-check { display: flex; gap: .7rem; margin: .45rem 0 1rem; padding: .9rem; border-left: 2px solid var(--coastal-sea-glass); background: #f1f7f6; color: var(--coastal-charcoal); font-size: .8rem; cursor: pointer; }
.tools-check input { width: 1rem; height: 1rem; margin-top: .16rem; accent-color: var(--coastal-mineral); }
.tools-check b, .tools-check small { display: block; }
.tools-check small { margin-top: .2rem; color: #6c797c; font-size: .72rem; font-weight: 400; line-height: 1.45; }
/* [HOTFIX 30 Ogos 2026] Toggle "Saya Bumiputera?" di /tools.php — pill
   button, sama gaya visual dengan checkbox promo sedia ada (.tools-check),
   tak import Tailwind macam project-detail.php (site ni guna stylesheet
   sendiri), jadi kelas ringkas berasingan. */
.tools-buyer-btn { padding: .35rem .85rem; border: 1px solid rgba(31,113,130,.28); border-radius: 999px; background: #fff; color: var(--coastal-charcoal); font-size: .72rem; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; }
.tools-buyer-btn.is-active { background: var(--coastal-charcoal); color: #fff; border-color: var(--coastal-charcoal); }
.tools-promo-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .8rem; margin: 1.1rem 0 0; padding: 1rem; border: 1px dashed rgba(31,113,130,.38); border-radius: .7rem; background: #f6fbfa; }.tools-promo-options legend { padding: 0 .35rem; color: var(--coastal-mineral); font-size: .76rem; font-weight: 800; }.tools-promo-options legend small { color: #718083; font-weight: 500; }.tools-form-card .tools-promo-options label { display: block; margin: 0 !important; color: #52666b; font-size: .72rem !important; font-weight: 600; line-height: 1.35; }.tools-promo-options input { width: .95rem; height: .95rem; margin: 0 .45rem 0 0; accent-color: var(--coastal-coral); vertical-align: middle; position: relative; top: -1px; }.tools-promo-options p { grid-column: 1 / -1; margin: .25rem 0 0; color: #748185; font-size: .67rem; line-height: 1.45; }
.tools-help { padding: .9rem; border-left: 2px solid var(--coastal-coral); background: #fff4f0; color: #76574d; font-size: .78rem; line-height: 1.5; }
.tools-result-card { display: flex; flex-direction: column; padding: clamp(1.35rem, 3.5vw, 2.4rem); }
.tools-result-card > p:first-child { margin: 0; color: var(--coastal-mineral); font-size: .69rem; font-weight: 700; letter-spacing: .16em; }
/* [Font — Ogos 2026] Tukar dari 'Fraunces' ke 'Lexend' — nombor besar
 * (RM, %, RPGT) kat tools.php lagi jelas dibaca, letter-spacing juga
 * dilonggarkan sikit (-.02em, dari -.055em) sebab Lexend tak perlukan
 * spacing rapat macam Fraunces untuk nampak seimbang. */
.tools-result-card > strong { display: block; margin: .7rem 0 .15rem; font-family: 'Lexend', 'Plus Jakarta Sans', sans-serif; font-size: clamp(2rem, 3.5vw, 3.05rem); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.tools-result-card > strong + span { color: #718083; font-size: .77rem; }
.tools-result-card dl { margin: 2rem 0 auto; }
.tools-result-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid rgba(39,48,54,.1); font-size: .79rem; }
.tools-result-card dt { color: #627176; }.tools-result-card dt em { color: #8a9698; font-style: normal; }.tools-result-card dd { margin: 0; color: var(--coastal-charcoal); font-weight: 700; text-align: right; }
.tools-result-coral { border-top: 4px solid var(--coastal-coral); }.tools-result-coral > strong { color: #c85f48; }
.tools-result-mineral { border-top: 4px solid var(--coastal-mineral); }.tools-result-mineral > strong { color: var(--coastal-mineral); }
.tools-note { margin: 1.45rem 0 0 !important; color: #788487 !important; font-size: .69rem !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.55; }
/* [v1.34.0] Nota tip kontekstual dalam kad hasil — beza dari .tools-note
   (disclaimer ketepatan) sebab tujuannya lain: bantu user faham LOGIK di
   sebalik pengiraan (contoh kenapa yuran pinjaman beza dari yuran SPA, atau
   kenapa RPGT turun ikut tempoh pemilikan). Warna sea-glass tint supaya
   nampak sebagai "insight" positif, bukan amaran/disclaimer macam
   .tools-note yang warna neutral kelabu. */
.tools-tip-note { margin: 1.1rem 0 0 !important; padding: .75rem .9rem; border-radius: .6rem; background: rgba(168,203,199,.18); color: #3d5a56 !important; font-size: .72rem !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.55; }
.tools-dsr { margin: 1.8rem 0 .25rem; padding: 1.1rem; background: #edf5f4; }.tools-dsr small { display: block; color: #637478; font-size: .62rem; font-weight: 700; letter-spacing: .12em; }.tools-dsr b { display: block; margin: .25rem 0 .55rem; color: var(--coastal-charcoal); font-size: 1.7rem; }.tools-dsr i { display: block; height: .42rem; overflow: hidden; background: #d5e5e2; }.tools-dsr i span { display: block; height: 100%; background: var(--coastal-mineral); transition: width .25s ease; }.tools-dsr i span.watch { background: #d8a74c; }.tools-dsr i span.risk { background: var(--coastal-coral); }.tools-dsr em { display: block; margin-top: .5rem; color: #52666b; font-size: .7rem; font-style: normal; }
/* [HOTFIX 30 Ogos 2026] dsrRuleNote (tier DSR auto-pilih ikut pendapatan,
   rujuk pickNettPrice()/dsrLimit di property-tools.js) — override
   ".tools-dsr small" (gaya heading uppercase/bold) sebab class ni juga
   guna tag <small>, tapi teks ni nota biasa (sama gaya dengan .tools-dsr em). */
.tools-dsr small.tools-dsr-rule { display: block; margin-top: .3rem; color: #7b8a8d; font-size: .68rem; font-weight: 400; letter-spacing: normal; text-transform: none; }
.tools-positive { color: var(--coastal-mineral) !important; }.tools-negative { color: #c85f48 !important; }
.tools-summary-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; padding: clamp(1.35rem, 4vw, 3rem); }.tools-summary-panel > div > p:not(.tools-section-tag):not(.tools-note) { max-width: 390px; color: #65757a; font-size: .9rem; line-height: 1.7; }.tools-summary-panel textarea { min-height: 360px; padding: 1.35rem; border: 1px solid rgba(39,48,54,.15); background: #f9fbfa; color: #415359; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .8rem; line-height: 1.65; resize: vertical; white-space: pre-wrap; }.tools-action { margin-top: 1.6rem; padding: .9rem 1.25rem; background: var(--coastal-coral); color: #fff; font-size: .8rem; font-weight: 700; box-shadow: 5px 5px 0 rgba(31,113,130,.16); transition: transform .2s ease, box-shadow .2s ease; }.tools-action:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(31,113,130,.16); }
.tools-disclaimer { display: flex; gap: .9rem; align-items: flex-start; margin-top: 2rem; margin-bottom: 0; padding: 1.1rem 1.2rem; border-top: 1px solid var(--coastal-sea-glass); color: #647478; font-size: .75rem; line-height: 1.6; }.tools-disclaimer span { flex: 0 0 auto; line-height: 1; font-size: 1rem; }.tools-disclaimer p { margin: 0; }.tools-disclaimer b { color: var(--coastal-charcoal); }
/* [Fix gap footer] <main class="tools-page"> (tools.php) berakhir dengan
   .tools-disclaimer tanpa section lain selepasnya — mt-16 (64px) pada
   <footer> (public-partials/footer.php) sengaja besar untuk halaman lain
   yang content lebih panjang, tapi khusus di tools.php ia jadi gap
   berlebihan antara teks disclaimer dengan garis footer. Guna general
   sibling selector (~) sebab ada <script> tags antara </main> dan
   <footer> di tools.php (elak "+" yang cuma match immediate sibling).
   Scoped ke <main class="tools-page"> supaya footer di
   index.php/berita.php/faq.php dll kekal seperti asal — footer.php TIDAK
   disentuh. */
main.tools-page ~ footer { margin-top: 1.5rem !important; }
.tools-tip-wrap { position: relative; display: inline-block; }
.tools-tip-button { display: inline-grid; width: 1.05rem; height: 1.05rem; margin-left: .25rem; place-items: center; border: 1px solid var(--coastal-mineral); border-radius: 50%; color: var(--coastal-mineral); font-size: .64rem; font-style: normal; font-weight: 800; line-height: 1; vertical-align: middle; cursor: pointer; background: #fff; }.tools-tip-button:hover, .tools-tip-button.is-active { background: var(--coastal-mineral); color: #fff; }
/* ─── Popover tooltip (v1.32) ─────────────────────────────
 * Melekat terus pada butang "?" guna position:absolute + JS
 * clamp (rujuk property-tools.js > positionPopover()) supaya
 * tak overflow tepi kanan/kiri skrin atau bawah viewport,
 * tak kira field tu dalam grid 2-lajur atau tidak. SATU titik
 * insertion sahaja (sibling terus lepas .tools-tip-wrap) —
 * elak inconsistency sistem lama (appendChild vs afterend). */
.tools-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(272px, 88vw); padding: .85rem .95rem; border: 1px solid rgba(31,113,130,.18); border-top: 3px solid var(--coastal-coral); border-radius: .65rem; background: #fff; color: #52666b; box-shadow: 0 16px 38px rgba(39,48,54,.18); font-size: .72rem; line-height: 1.55; font-weight: 400; text-align: left; opacity: 0; transform: translateY(-4px) scale(.97); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.tools-popover.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.tools-popover.is-flip-up { top: auto; bottom: calc(100% + 8px); }
.tools-popover::before { content: ''; position: absolute; top: -6px; left: 14px; width: 11px; height: 11px; background: #fff; border-left: 1px solid rgba(31,113,130,.18); border-top: 1px solid rgba(31,113,130,.18); transform: rotate(45deg); }
.tools-popover.is-flip-up::before { top: auto; bottom: -6px; border-left: 0; border-top: 0; border-right: 1px solid rgba(31,113,130,.18); border-bottom: 1px solid rgba(31,113,130,.18); }
.tools-popover p { margin: 0 0 .5rem; }
.tools-popover p:last-child { margin-bottom: 0; }
.tools-popover b { display: block; color: var(--coastal-charcoal); font-size: .67rem; letter-spacing: .03em; margin-bottom: .1rem; }
@media (max-width: 820px) { .tools-hero { padding: 3.5rem 0; }.tools-hero-grid, .tools-panel-grid, .tools-summary-panel { grid-template-columns: 1fr; gap: 1.25rem; }.tools-project-bar { display: block; }.tools-select-wrap { min-width: 0; margin-top: 1.25rem; }.tools-panels { min-height: 0; }.tools-summary-panel textarea { min-height: 280px; } }
@media (max-width: 540px) { .tools-wrap { width: min(100% - 2rem, 1180px); }.tools-hero h1 { font-size: 1.7rem; }.tools-journey-card, .tools-form-card, .tools-result-card { padding: 1.25rem; }.tools-two-col, .tools-promo-options { grid-template-columns: 1fr; gap: 0; }.tools-panel-grid { gap: 1rem; } }
@media (max-width: 540px) { .tools-hero { padding: 2.75rem 0; }.tools-hero-grid { gap: 2rem; }.tools-lead { font-size: .93rem; }.tools-result-card > strong { font-size: 2.15rem; }.tools-result-card dl div { align-items: flex-start; }.tools-popover { max-height: calc(100dvh - 3rem); overflow-y: auto; } }
/* [v1.36.0] Redesign nav tab /tools.php untuk mobile — sebelum ni .tools-tabs
   flex row + overflow-x:auto, so 6 tab kena scroll ke kanan (susah nampak
   tab 04-06 tanpa swipe, especially first-time user tak sedar boleh scroll).
   Fix: pada skrin ≤540px, tukar jadi grid 2 lajur x 3 baris — semua 6 tab
   nampak sekaligus tanpa scroll, label boleh wrap 2 baris (tools-panel-grid
   business logic/tab switching TAK disentuh, cuma visual nav). */
@media (max-width: 540px) {
    .tools-tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
        overflow-x: visible;
        margin-inline: 0;
        padding: 0 0 .9rem;
    }
    .tools-tabs button {
        flex: initial;
        display: flex;
        align-items: flex-start;
        gap: .35rem;
        white-space: normal;
        text-align: left;
        padding: .65rem .7rem;
        border: 1px solid rgba(39, 48, 54, .14);
        border-radius: .6rem;
        background: #fff;
        font-size: .72rem;
        line-height: 1.25;
    }
    .tools-tabs button b { flex: 0 0 auto; margin-right: 0; }
    .tools-tabs button.is-active { background: rgba(232, 115, 74, .1); border-color: var(--coastal-coral); }
}

/* Legacy public markup palette mapping. These rules map full visual pairs
   (including tint variants) and dynamic status badges already use the new
   palette in helpers.php, preventing colour-on-colour text regressions. */
/* `color` selectors need a property boundary. A loose `[style*="color:"]`
   selector also matches the word inside `background-color:` and can make
   button text disappear by assigning it the background colour. */
[style^="color:#3A342C"], [style^="color: #3A342C"], [style*=";color:#3A342C"], [style*="; color:#3A342C"] { color: var(--coastal-charcoal) !important; }
[style^="color:#0B5D4A"], [style^="color: #0B5D4A"], [style*=";color:#0B5D4A"], [style*="; color:#0B5D4A"] { color: var(--coastal-mineral) !important; }
[style^="color:#C9A15C"], [style^="color: #C9A15C"], [style*=";color:#C9A15C"], [style*="; color:#C9A15C"], [style^="color:#D97B5C"], [style^="color: #D97B5C"], [style*=";color:#D97B5C"], [style*="; color:#D97B5C"] { color: var(--coastal-coral) !important; }
[style^="color:#FDFCF9"], [style^="color: #FDFCF9"], [style*=";color:#FDFCF9"], [style*="; color:#FDFCF9"] { color: var(--coastal-chalk) !important; }
[style*="background-color:#FDFCF9"], [style*="background-color: #FDFCF9"] { background-color: var(--coastal-chalk) !important; }
[style*="background-color:#3A342C;"], [style*="background-color: #3A342C;"] { background-color: var(--coastal-charcoal) !important; }
[style*="background-color:#3A342C08"], [style*="background-color: #3A342C08"] { background-color: rgba(39, 48, 54, 0.03) !important; }
[style*="background-color:#3A342C0D"], [style*="background-color: #3A342C0D"] { background-color: rgba(39, 48, 54, 0.05) !important; }
[style*="background-color:#0B5D4A0A"], [style*="background-color: #0B5D4A0A"] { background-color: rgba(31, 113, 130, 0.04) !important; }
[style*="background-color:#0B5D4A11"], [style*="background-color: #0B5D4A11"] { background-color: rgba(31, 113, 130, 0.07) !important; }
[style*="background-color:#0B5D4A15"], [style*="background-color: #0B5D4A15"] { background-color: rgba(31, 113, 130, 0.08) !important; }
[style*="background-color:#0B5D4A22"], [style*="background-color: #0B5D4A22"] { background-color: rgba(31, 113, 130, 0.13) !important; }
[style*="background-color:#0B5D4A33"], [style*="background-color: #0B5D4A33"] { background-color: rgba(31, 113, 130, 0.20) !important; }
[style*="background-color:#C9A15C15"], [style*="background-color: #C9A15C15"], [style*="background-color:#D97B5C15"], [style*="background-color: #D97B5C15"] { background-color: rgba(237, 128, 100, 0.08) !important; }
[style*="background-color:#C9A15C22"], [style*="background-color: #C9A15C22"], [style*="background-color:#D97B5C22"], [style*="background-color: #D97B5C22"] { background-color: rgba(237, 128, 100, 0.13) !important; }
[style*="background-color:#D97B5C11"], [style*="background-color: #D97B5C11"] { background-color: rgba(237, 128, 100, 0.07) !important; }
[style*="background-color:#0B5D4A;"], [style*="background-color: #0B5D4A;"] { background-color: var(--coastal-mineral) !important; }
[style*="background-color:#C9A15C;"], [style*="background-color: #C9A15C;"], [style*="background-color:#D97B5C;"], [style*="background-color: #D97B5C;"] { background-color: var(--coastal-coral) !important; }
[style*="border-color:#0B5D4A"], [style*="border-color: #0B5D4A"], [style*="border:1px solid #0B5D4A"], [style*="border: 1px solid #0B5D4A"] { border-color: var(--coastal-mineral) !important; }
[style*="border-color:#C9A15C"], [style*="border-color: #C9A15C"], [style*="border:1px solid #C9A15C"], [style*="border: 1px solid #C9A15C"] { border-color: var(--coastal-coral) !important; }
[style*="border-color:#3A342C"], [style*="border-color: #3A342C"], [style*="border:1px solid #3A342C"], [style*="border: 1px solid #3A342C"] { border-color: var(--coastal-line) !important; }
[style*="accent-color:#C9A15C"], [style*="accent-color: #C9A15C"] { accent-color: var(--coastal-coral) !important; }
svg[fill="#C9A15C"] { fill: var(--coastal-coral) !important; }

[class*="bg-[#FDFCF9]"] { background-color: var(--coastal-chalk) !important; }
[class*="border-[#3A342C]"] { border-color: var(--coastal-line) !important; }
[class*="text-[#3A342C]"] { color: var(--coastal-charcoal) !important; }
[class*="from-[#3A342C]"] { --tw-gradient-from: rgba(39, 48, 54, 0.12) var(--tw-gradient-from-position) !important; }
[class*="to-[#C9A15C]"] { --tw-gradient-to: rgba(168, 203, 199, 0.42) var(--tw-gradient-to-position) !important; }

/* [reCAPTCHA v3 — Ogos 2026] Sorok badge floating "protected by reCAPTCHA"
   (kanan-bawah setiap page) — Hafiz nak papar page lebih bersih, terutama
   sebab ia bertindih dengan widget AI Chat Box (rujuk public-partials/
   ai-chat-widget.php) di homepage. DIBENARKAN oleh terma Google reCAPTCHA
   ASALKAN disclosure text "This site is protected by reCAPTCHA..." dipapar
   di mana-mana yang page guna reCAPTCHA — rujuk footer.php (ditambah
   serentak dengan CSS ni, JANGAN buang salah satu tanpa yang lain). */
.grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }