/* ==========================================================================
   SyariahConsult — borang "Hubungi Kami"
   Palet sama dengan styles.css: hijau zamrud + emas.
   ========================================================================== */

:root {
    --gold: #d4af37;
    --gold-soft: #e8c96a;
    --gold-deep: #a8842a;
    --ink: #04100b;
    --green-900: #06170f;
    --green-800: #0b2e22;
    --green-700: #10412f;
    --cream: #f6f2e8;
    --cream-dim: #e6dfcd;
    --text-on-dark: #f3efe4;
    --muted-on-dark: rgba(243, 239, 228, 0.68);
    --field-border: #ddd6c4;
    --ok: #3f9e6b;
    --err: #d64545;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    padding: 40px 20px;
    color: var(--green-900);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(20, 81, 60, 0.6), transparent 55%),
        radial-gradient(ellipse at 85% 5%, rgba(212, 175, 55, 0.14), transparent 50%),
        linear-gradient(160deg, #06170f 0%, #0b2e22 45%, #04100b 100%);
    background-attachment: fixed;
}

/* ==========================================================================
   ANIMASI BUTANG

   Blok ini mesti berada dalam FAIL INI, bukan styles.css. form.html hanya
   memuat form-styles.css — peraturan yang menyasar butang borang tetapi
   diletakkan dalam styles.css tidak akan berkuat kuasa langsung.
   ========================================================================== */

.submit-btn,
.back-home-btn,
.btn-seksyen,
.confirm-send,
.confirm-back,
.btn-salinan-emel,
.btn-salinan-wa {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Kilauan yang meluncur merentasi permukaan semasa tuding */
.submit-btn::after,
.back-home-btn::after,
.confirm-send::after,
.btn-salinan-emel::after,
.btn-salinan-wa::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    z-index: -1;
    width: 50%;
    height: 100%;
    transform: skewX(-22deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transition: left 0.55s cubic-bezier(0.3, 0.7, 0.4, 1);
}

.submit-btn:hover:not(:disabled)::after,
.back-home-btn:hover::after,
.confirm-send:hover:not(:disabled)::after,
.btn-salinan-emel:hover:not(:disabled)::after,
.btn-salinan-wa:hover::after {
    left: 125%;
}

/* Ditekan ke bawah semasa diklik — maklum balas sentuhan */
.submit-btn:active:not(:disabled),
.back-home-btn:active,
.btn-seksyen:active,
.confirm-send:active:not(:disabled),
.confirm-back:active {
    transform: translateY(1px) scale(0.985);
    transition-duration: 0.08s;
}

/* ---------------------------------------------------------------------------
   SHIMMER TEPI — satu titik cahaya mengelilingi bentuk butang.

   Kecerunan konik berputar di belakang butang, kemudian ditutup topeng supaya
   hanya jalur tepi selebar 2px yang kelihatan. Gerakan di tepi lebih mudah
   ditangkap mata berbanding bayang yang berdenyut.
   --------------------------------------------------------------------------- */

@property --sudut-shimmer {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes pusingShimmer {
    to { --sudut-shimmer: 360deg; }
}

/* Warna shimmer ialah lawan kepada warna butang — emas berlari di tepi butang
   hijau, hijau berlari di tepi butang emas. Cahaya sewarna dengan butang akan
   hilang; yang berlawanan itu yang menonjol. */
:root {
    --shimmer-terang: rgba(255, 228, 150, 0.98);
    --shimmer-lembut: rgba(212, 175, 55, 0.30);
}

/* Butang berlatar EMAS dapat cahaya PUTIH TULEN.

   Putih penuh tanpa lut sinar — di atas emas, putih perlu tepu sepenuhnya
   barulah ia terbaca sebagai kilauan logam. */
.submit-btn,
.confirm-send,
.btn-seterusnya.sedia,
.btn-salinan-emel {
    --shimmer-terang: rgb(255, 255, 255);
    --shimmer-lembut: rgba(255, 255, 255, 0.5);
}

.submit-btn::before,
.confirm-send::before,
.btn-seterusnya.sedia::before {
    padding: 3px;
}

.submit-btn::before,
.back-home-btn::before,
.btn-seterusnya::before,
.confirm-send::before,
.btn-salinan-emel::before,
.btn-salinan-wa::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 2px;
    pointer-events: none;

    background: conic-gradient(
        from var(--sudut-shimmer),
        transparent 0deg,
        transparent 232deg,
        var(--shimmer-lembut) 288deg,
        var(--shimmer-terang) 320deg,
        var(--shimmer-lembut) 348deg,
        transparent 360deg
    );

    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;

    animation: pusingShimmer 3s linear infinite;
}

.back-home-btn::before   { animation-delay: 0.7s; }
.confirm-send::before    { animation-delay: 0.4s; }
.btn-seterusnya::before  { animation-delay: 1.1s; }

/* Butang yang dimatikan tidak patut kelihatan hidup */
.submit-btn:disabled::before,
.confirm-send:disabled::before {
    display: none;
}

/* Berhenti semasa tuding — kilauan yang meluncur itu ambil alih di situ */
.submit-btn:hover::before,
.back-home-btn:hover::before,
.btn-seterusnya:hover::before,
.confirm-send:hover::before {
    animation-play-state: paused;
    opacity: 0;
}

/* Anak panah bergerak mengikut arahnya */
.anak-panah {
    transition: transform 0.25s ease;
}

.btn-seterusnya:hover .anak-panah { transform: translateX(4px); }
.btn-sebelum:hover .anak-panah    { transform: translateX(-4px); }

/* Pautan kembali menganjak sedikit */
.back-link {
    transition: color 0.3s ease, transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .submit-btn::before,
    .back-home-btn::before,
    .btn-seterusnya::before,
    .confirm-send::before,
    .submit-btn::after,
    .back-home-btn::after,
    .confirm-send::after,
    .btn-salinan-emel::before,
    .btn-salinan-wa::before,
    .btn-salinan-emel::after,
    .btn-salinan-wa::after { display: none; }
}

/* --- Kepala borang --------------------------------------------------------- */

.form-header-top {
    position: relative;
    max-width: 1400px;
    margin: 0 auto 40px;
    padding: 56px 40px 46px;
    text-align: center;
    border-radius: 22px;
    color: #fff;
    border: 1px solid rgba(243, 239, 228, 0.12);
    background:
        radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.16), transparent 60%),
        linear-gradient(150deg, var(--green-700), var(--green-900));
    overflow: hidden;
}

.form-header-top::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='1'%3E%3Crect x='16' y='16' width='48' height='48'/%3E%3Crect x='16' y='16' width='48' height='48' transform='rotate(45 40 40)'/%3E%3Cpath d='M40 0v16M40 64v16M0 40h16M64 40h16'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
    opacity: 0.07;
    pointer-events: none;
}

.form-header-top > * {
    position: relative;
    z-index: 2;
}

.back-link {
    position: absolute;
    top: 20px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gold);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.3s ease, transform 0.3s ease;
}

.back-link:hover {
    color: #fff;
    transform: translateX(-5px);
}

.form-header-top .logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 34px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: -0.5px;
    margin-bottom: 18px;
}

/* Bulan sabit di atas neraca keadilan — isyarat Syariah dan guaman */
.logo-mark {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    color: var(--gold);
}

.logo-text {
    line-height: 1;
}

.form-header-top h1 {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 900;
    letter-spacing: -1.5px;
    color: #fff;
    margin-bottom: 14px;
}

.form-subtitle {
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted-on-dark);
    max-width: 620px;
    margin: 0 auto;
}

/* --- Susun atur ------------------------------------------------------------ */

.form-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* --- Kad navigasi ---------------------------------------------------------- */

.navigation-card {
    flex: 0 0 320px;
    position: sticky;
    top: 40px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 30px;
    border-radius: 20px;
    background: var(--cream);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.navigation-card h3 {
    font-size: 22px;
    font-weight: 900;
    color: var(--green-900);
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--gold);
}

.form-navigation {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: #fff;
    color: var(--green-900);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.nav-item:hover {
    background: #fdfcf7;
    transform: translateX(4px);
}

.nav-item.active {
    background: linear-gradient(140deg, var(--green-700), var(--green-900));
    border-color: var(--gold);
    color: #fff;
}

.nav-number {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
}

.nav-text {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.nav-status {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd6c4;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nav-item.completed .nav-status {
    background: var(--ok);
    box-shadow: 0 0 8px rgba(63, 158, 107, 0.6);
}

.nav-item.incomplete .nav-status {
    background: var(--err);
    box-shadow: 0 0 8px rgba(214, 69, 69, 0.55);
}

.nav-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--cream-dim);
    font-size: 12px;
    color: rgba(6, 23, 15, 0.6);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.completed  { background: var(--ok); }
.legend-dot.incomplete { background: var(--err); }

/* --- Kad borang ------------------------------------------------------------ */

.form-card {
    flex: 1;
    min-width: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.consultation-form {
    padding: 48px 44px;
}

.form-section {
    display: none;
}

.form-section.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.section-title {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.8px;
    color: var(--green-900);
    margin-bottom: 30px;
    padding-left: 16px;
    border-left: 5px solid var(--gold);
}

.section-intro {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(6, 23, 15, 0.65);
    margin: -14px 0 26px;
}

/* --- Medan ----------------------------------------------------------------- */

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
}

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--green-800);
    margin-bottom: 8px;
}

.required {
    color: var(--err);
}

.field-hint {
    font-size: 12.5px;
    color: rgba(6, 23, 15, 0.55);
    margin-top: 6px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 13px 15px;
    border: 2px solid var(--field-border);
    border-radius: 10px;
    background: #fdfcf8;
    font-family: inherit;
    font-size: 15px;
    color: var(--green-900);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16);
}

input::placeholder,
textarea::placeholder {
    color: #a9a294;
}

select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2310412f' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.6;
}

input:disabled,
select:disabled {
    background: #f1eee5;
    color: #9a9484;
    cursor: not-allowed;
}

/* --- Checkbox -------------------------------------------------------------- */

.checkbox-label {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--field-border);
    border-radius: 10px;
    background: #fdfcf8;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 1.5;
    color: var(--green-900) !important;
    cursor: pointer;
    margin-bottom: 0 !important;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.checkbox-label:hover {
    border-color: var(--gold);
    background: #fff;
}

.checkbox-label input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--green-700);
    cursor: pointer;
}

.checkbox-label:has(input:checked) {
    border-color: var(--ok);
    background: #f4fbf7;
}

.agreement-label {
    align-items: flex-start;
}

.checkbox-label a {
    color: var(--gold-deep);
    font-weight: 600;
}

.terms-box {
    padding: 18px 20px;
    margin-bottom: 22px;
    border-radius: 10px;
    border-left: 4px solid var(--gold);
    background: #faf8f1;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(6, 23, 15, 0.75);
}

/* --- Navigasi antara seksyen ------------------------------------------------ */

.section-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--cream-dim);
}

/* Bila hanya ada butang Seterusnya, tolak ia ke kanan */
.section-nav > .btn-seterusnya:only-child {
    margin-left: auto;
}

.btn-seksyen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 30px;
    border-radius: 50px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.anak-panah {
    font-size: 17px;
    line-height: 1;
}

.btn-sebelum {
    border: 2px solid var(--field-border);
    background: #fff;
    color: rgba(6, 23, 15, 0.7);
}

.btn-sebelum:hover {
    border-color: var(--green-700);
    color: var(--green-900);
}

.btn-seterusnya {
    border: none;
    background: var(--green-700);
    color: var(--gold-soft);
    box-shadow: 0 10px 24px rgba(16, 65, 47, 0.24);
}

.btn-seterusnya:hover {
    transform: translateY(-2px);
    background: var(--green-800);
}

/* Bertukar emas sebaik seksyen itu lengkap — isyarat "boleh teruskan"
   tanpa memaksa pengguna berpindah */
.btn-seterusnya.sedia {
    background: var(--gold);
    color: var(--ink);
    box-shadow: 0 10px 26px rgba(212, 175, 55, 0.3);
}

.btn-seterusnya.sedia:hover {
    background: var(--gold-soft);
}

/* Telefon: anak panah sahaja, tanpa perkataan. Butang penuh lebar memakan
   terlalu banyak skrin pada peranti kecil. */
@media (max-width: 700px) {
    .teks-btn {
        display: none;
    }

    .btn-seksyen {
        width: 54px;
        height: 54px;
        padding: 0;
        gap: 0;
        flex-shrink: 0;
    }

    .anak-panah {
        font-size: 22px;
    }
}

/* --- Hantar ---------------------------------------------------------------- */

.form-actions {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--cream-dim);
    text-align: center;
}

.submit-btn {
    padding: 17px 56px;
    border: none;
    border-radius: 50px;
    background: var(--gold);
    color: var(--ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease;
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.28);
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: var(--gold-soft);
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.form-note {
    margin-top: 16px;
    font-size: 13.5px;
    color: rgba(6, 23, 15, 0.6);
}

/* --- Mesej ralat ringkasan ------------------------------------------------- */

.form-error-summary {
    display: none;
    margin-bottom: 24px;
    padding: 18px 20px;
    border-radius: 10px;
    border-left: 4px solid var(--err);
    background: #fdf3f3;
    color: #8c2f2f;
    font-size: 14.5px;
    line-height: 1.6;
}

.form-error-summary.show {
    display: block;
}

.form-error-summary strong {
    display: block;
    margin-bottom: 8px;
}

.form-error-summary ul {
    padding-left: 20px;
}

.form-error-summary li {
    margin-bottom: 4px;
}

input.field-invalid,
select.field-invalid,
textarea.field-invalid {
    border-color: var(--err);
}

input.field-valid,
select.field-valid,
textarea.field-valid {
    border-color: var(--ok);
}

/* --- Mesej berjaya --------------------------------------------------------- */

.success-message {
    display: none;
    padding: 80px 44px;
    text-align: center;
}

.success-message.show {
    display: block;
    animation: fadeIn 0.5s ease;
}

.success-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 26px;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    font-weight: 700;
}

.success-message h2 {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--green-900);
    margin-bottom: 16px;
}

.success-message p {
    font-size: 16.5px;
    line-height: 1.7;
    color: rgba(6, 23, 15, 0.7);
    max-width: 480px;
    margin: 0 auto 8px;
}

.success-ref-line {
    display: inline-block;
    margin-bottom: 20px !important;
    padding: 10px 22px;
    border-radius: 50px;
    background: #eaf6ef;
    color: #1f7a4d !important;
    font-size: 16px !important;
    letter-spacing: 0.5px;
}

.success-ref-line strong {
    font-weight: 800;
}

.back-home-btn {
    display: inline-block;
    margin-top: 32px;
    padding: 16px 46px;
    border-radius: 50px;
    background: var(--green-700);
    color: var(--gold-soft);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease;
}

.back-home-btn:hover {
    transform: translateY(-2px);
    background: var(--green-800);
}

/* --- Penunjuk kemajuan semasa menghantar ------------------------------------ */

.hantar-progres {
    display: none;
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(63, 158, 107, 0.1);
    border: 1px solid rgba(63, 158, 107, 0.32);
    color: #2c6b4b;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;   /* saat tidak menganjak lebar */
}

.hantar-progres.show { display: block; }

/* --- Salinan kepada pemohon ------------------------------------------------ */

.salinan-blok {
    margin: 36px auto 0;
    max-width: 660px;
    padding: 26px 24px 22px;
    text-align: center;
    border: 1px solid var(--cream-dim);
    border-radius: 16px;
    background: linear-gradient(160deg, #fdfbf5, var(--cream));
}

.salinan-tajuk {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
    color: var(--green-700);
}

.salinan-ikon-besar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--green-700);
    color: var(--gold-soft);
    font-size: 14px;
    line-height: 1;
}

.salinan-kecil {
    margin-top: -10px;
    font-size: 13px;
    color: #767c72;
}

.salinan-huraian {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.65;
    color: #5c6259;
    text-wrap: pretty;
}

.salinan-butang {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* flex-basis 260px dengan grow: kedua-duanya berkongsi baris secara sama rata
   apabila ada ruang, dan jatuh menjadi lebar penuh apabila tiada. Lebar butang
   sebenar ialah 278px dan 281px — bergantung pada max-width yang tepat
   bermakna beza 1px sahaja sudah memecahkan susun atur. */
.btn-salinan-emel,
.btn-salinan-wa {
    flex: 1 1 260px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 22px;
    border-radius: 50px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease,
                color 0.25s ease, border-color 0.25s ease;
}

.btn-salinan-emel {
    border: 2px solid transparent;
    background: var(--green-700);
    color: var(--gold-soft);
}

.btn-salinan-emel:hover:not(:disabled) {
    transform: translateY(-2px);
    background: var(--green-800);
}

/* Tindakan kedua, jadi digariskan dan bukan padu — supaya butang e-mel
   kekal sebagai pilihan yang jelas utama. */
.btn-salinan-wa {
    border: 2px solid var(--green-700);
    background: #fff;
    color: var(--green-700);
}

.btn-salinan-wa:hover {
    transform: translateY(-2px);
    background: var(--green-700);
    color: var(--gold-soft);
}

.btn-salinan-emel:disabled {
    cursor: default;
    opacity: 0.85;
    transform: none;
}

/* Butang yang dilumpuhkan tidak boleh terus berkelip — ia menjanjikan
   tindakan yang sudah tiada. */
.btn-salinan-emel:disabled::before,
.btn-salinan-emel:disabled::after { display: none; }

.salinan-ikon {
    font-size: 15px;
    line-height: 1;
}

.salinan-status {
    display: none;
    margin: 16px 0 0;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    text-wrap: pretty;
}

.salinan-status.show { display: block; }

.salinan-status.jaya {
    background: rgba(63, 158, 107, 0.12);
    border: 1px solid rgba(63, 158, 107, 0.4);
    color: #256c47;
}

.salinan-status.gagal {
    background: rgba(214, 69, 69, 0.1);
    border: 1px solid rgba(214, 69, 69, 0.35);
    color: #9c2b2b;
}

.salinan-nota {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--cream-dim);
    font-size: 12px;
    line-height: 1.65;
    color: #7c8279;
    text-wrap: pretty;
}

/* --- Salinan untuk dicetak / disimpan sebagai PDF --------------------------- */

/* Tersembunyi sepenuhnya pada skrin. Ia wujud hanya untuk dialog cetak. */
.cetak-salinan { display: none; }

@media print {
    @page { margin: 14mm; }

    /* Semasa mencetak salinan, semua yang lain disembunyikan — termasuk borang,
       bar sisi dan footer — supaya PDF mengandungi dokumen itu sahaja. */
    body.mod-cetak-salinan > *:not(.cetak-salinan) { display: none !important; }

    body.mod-cetak-salinan {
        background: #fff;
        color: #000;
    }

    body.mod-cetak-salinan .cetak-salinan {
        display: block;
        font-size: 11pt;
        line-height: 1.5;
        color: #111;
    }

    .cs-jenama {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0;
        font-size: 9pt;
        letter-spacing: 1px;
        color: #6b6c66;
    }

    /* Warna emas, bukan warisan kelabu daripada teks di sebelahnya — logo
       ialah satu-satunya unsur berwarna pada dokumen ini. */
    .cs-logo {
        width: 19px;
        height: 19px;
        flex-shrink: 0;
        color: #a8842a;
    }

    .cs-tajuk {
        margin: 3px 0 1px;
        font-size: 17pt;
        font-weight: 800;
        color: #10412f;
    }

    .cs-sub {
        margin: 0;
        font-size: 9.5pt;
        color: #6b6c66;
    }

    .cs-meta {
        margin: 10px 0 4px;
        padding-top: 8px;
        border-top: 2px solid #d4af37;
        font-size: 10pt;
    }

    .cs-bahagian {
        margin: 14px 0 4px;
        font-size: 11pt;
        color: #10412f;
        /* Tajuk bahagian tidak boleh tertinggal sendirian di hujung muka surat */
        break-after: avoid;
        page-break-after: avoid;
    }

    .cs-jadual {
        width: 100%;
        border-collapse: collapse;
    }

    .cs-jadual tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .cs-jadual th,
    .cs-jadual td {
        padding: 4px 0;
        border-bottom: 1px solid #e4e4e4;
        font-size: 9.5pt;
        text-align: left;
        vertical-align: top;
    }

    .cs-jadual th {
        width: 38%;
        padding-right: 10px;
        font-weight: 400;
        color: #55584f;
    }

    .cs-jadual td { font-weight: 700; }

    .cs-kaki {
        margin-top: 18px;
        padding-top: 8px;
        border-top: 1px solid #ddd;
        font-size: 8pt;
        line-height: 1.6;
        color: #7a7b76;
    }
}

@media (max-width: 560px) {
    .salinan-blok { padding: 22px 16px 18px; }

    /* Basis penuh memaksa satu butang setiap baris. Dua butang bersebelahan
       pada skrin sempit menghasilkan teks yang terpotong. */
    .btn-salinan-emel,
    .btn-salinan-wa { flex: 1 1 100%; padding: 15px 18px; font-size: 14px; }
}

/* --- Modal pengesahan ------------------------------------------------------ */

.confirm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    padding: 30px 18px;
    overflow-y: auto;
    background: rgba(4, 16, 11, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.confirm-modal.show {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.confirm-box {
    position: relative;
    width: 100%;
    max-width: 660px;
    margin: auto;
    padding: 40px 40px 32px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}

.confirm-close {
    position: absolute;
    top: 14px;
    right: 20px;
    border: none;
    background: none;
    font-size: 32px;
    line-height: 1;
    color: #9a9484;
    cursor: pointer;
    transition: color 0.2s ease;
}

.confirm-close:hover {
    color: var(--green-900);
}

.confirm-box h2 {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.8px;
    color: var(--green-900);
    margin-bottom: 14px;
}

.confirm-intro {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(6, 23, 15, 0.72);
    margin-bottom: 22px;
}

.confirm-summary {
    max-height: 42vh;
    overflow-y: auto;
    padding: 20px 22px;
    border: 1px solid var(--cream-dim);
    border-radius: 12px;
    background: #faf8f1;
}

.confirm-summary h4 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cream-dim);
}

.confirm-summary h4:first-child {
    margin-top: 0;
}

.confirm-row {
    display: flex;
    gap: 14px;
    padding: 5px 0;
    font-size: 14.5px;
    line-height: 1.55;
}

.confirm-key {
    flex: 0 0 40%;
    color: rgba(6, 23, 15, 0.6);
}

.confirm-val {
    flex: 1;
    font-weight: 600;
    color: var(--green-900);
    word-break: break-word;
}

.confirm-warn {
    display: none;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    border-left: 4px solid var(--gold);
    background: #fdf9ec;
    font-size: 13.5px;
    line-height: 1.6;
    color: #6b5a24;
}

.confirm-warn.show {
    display: block;
}

.confirm-actions {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 26px;
}

.confirm-back,
.confirm-send {
    padding: 15px 30px;
    border-radius: 50px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.confirm-back {
    border: 2px solid var(--field-border);
    background: #fff;
    color: rgba(6, 23, 15, 0.7);
}

.confirm-back:hover {
    border-color: var(--green-700);
    color: var(--green-900);
}

.confirm-send {
    border: none;
    background: var(--gold);
    color: var(--ink);
    box-shadow: 0 12px 28px rgba(212, 175, 55, 0.3);
}

.confirm-send:hover:not(:disabled) {
    transform: translateY(-2px);
    background: var(--gold-soft);
}

.confirm-send:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 700px) {
    .confirm-box {
        padding: 34px 22px 26px;
    }

    .confirm-row {
        flex-direction: column;
        gap: 2px;
        padding: 7px 0;
    }

    .confirm-key {
        flex: none;
        font-size: 13px;
    }

    .confirm-actions {
        flex-direction: column-reverse;
    }

    .confirm-back,
    .confirm-send {
        width: 100%;
    }
}

/* --- Footer ---------------------------------------------------------------- */

.form-footer {
    max-width: 1400px;
    margin: 44px auto 0;
    text-align: center;
}

.footer-disclaimer {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(243, 239, 228, 0.45);
    max-width: 700px;
    margin: 0 auto 12px;
}

.footer-copyright {
    font-size: 12.5px;
    letter-spacing: 1.4px;
    color: var(--muted-on-dark);
}

/* --- Fokus boleh dilihat --------------------------------------------------- */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* --- Responsif ------------------------------------------------------------- */

@media (max-width: 1024px) {
    .form-container {
        flex-direction: column;
        /* Wajib. Susun atur lebar menggunakan align-items: flex-start, tetapi
           apabila arah bertukar kepada column, paksi silang menjadi mendatar —
           jadi anak-anaknya mengecut mengikut kandungan dan bukan meregang.
           Tanpa ini .form-card berhenti separuh jalan pada telefon. */
        align-items: stretch;
    }

    .navigation-card {
        flex: 1 1 auto;
        width: 100%;
        position: static;
        max-height: none;
    }

    /* Baris mendatar yang boleh diskrol, mengikut lawyerjtk.com. Lima seksyen
       bertindan menegak memakan hampir seluruh skrin telefon sebelum pengguna
       nampak medan pertama. */
    .form-navigation {
        display: flex;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .nav-item {
        flex: 0 0 auto;
        flex-direction: column;
        /* Peraturan asas menetapkan width: 100% untuk susun atur menegak.
           Ia mesti dibatalkan di sini, jika tidak kad pertama memenuhi seluruh
           lebar dan empat lagi tertolak keluar pandangan. */
        width: auto;
        min-width: 140px;
        padding: 15px 10px;
        gap: 8px;
        text-align: center;
        scroll-snap-align: start;
    }

    .nav-item:hover {
        transform: none;
    }

    .nav-text {
        flex: none;
        font-size: 13px;
        text-align: center;
        line-height: 1.35;
    }

    /* Bar skrol nipis supaya ia tidak menolak susun atur */
    .form-navigation::-webkit-scrollbar {
        height: 4px;
    }

    .form-navigation::-webkit-scrollbar-thumb {
        background: var(--cream-dim);
        border-radius: 4px;
    }
}

@media (max-width: 700px) {
    body {
        padding: 20px 14px;
    }

    .form-header-top {
        padding: 26px 22px 34px;
    }

    /* Keluarkan dari kedudukan mutlak dan letakkan dalam aliran. Sebagai
       elemen terapung ia memaksa 64px pelapik atas yang kosong pada telefon. */
    .back-link {
        position: static;
        display: inline-flex;
        margin-bottom: 22px;
        font-size: 14px;
    }

    .form-header-top .logo {
        font-size: 26px;
    }

    .navigation-card,
    .consultation-form {
        padding: 24px 20px;
    }

    .nav-item {
        min-width: 118px;
        padding: 12px 8px;
    }

    .nav-text {
        font-size: 12.5px;
    }

    .section-title {
        font-size: 23px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .success-message {
        padding: 56px 20px;
    }

    .submit-btn {
        width: 100%;
        padding: 17px 20px;
    }
}