/*
======================================================
  homepage-popup.css (Versi Dikemas Kini)
  Gaya ini meniru 'popup-style.css' tetapi menggunakan
  ID dan struktur dari 'homepage-new (popup fluent form).php'.
======================================================
*/

/* * 1. GAYA UNTUK KOTAK KANDUNGAN POPUP
 * Menggunakan ID `#fluentform-popup > div` untuk menyasarkan kotak putih.
*/
#fluentform-popup > div {
    max-width: 750px;       /* Lebar maksimum popup, sama seperti rujukan */
    padding: 2rem 2.5rem;   /* Ruang dalaman yang lebih kemas */
    border-radius: 1rem;    /* Sudut yang lebih bulat */
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    
    /* PENTING: Untuk elak popup terkeluar dari skrin & membolehkan skrol */
    max-height: 85vh;
    overflow-y: auto;
}

/* * 2. GAYA UNTUK BUTANG TUTUP (X)
 * Menggunakan ID `#close-fluentform-popup`.
*/
#close-fluentform-popup {
    font-size: 2rem;
    font-weight: 300;
    color: #94a3b8; /* Warna kelabu */
    transition: color 0.2s ease, transform 0.2s ease;
}

#close-fluentform-popup:hover {
    color: #101828; /* Warna gelap apabila hover */
    transform: rotate(90deg); /* Animasi pusingan */
}

/* * 3. GAYA UNTUK BUTANG HANTAR BORANG
 * Menggunakan ID `#fluentform-popup` untuk pastikan hanya butang di dalam popup ini terjejas.
*/
#fluentform-popup .ff-btn-submit {
    width: 100%;
    background-color: #1DB37A !important; /* Warna hijau utama MengajiOnline */
    color: #ffffff !important;
    justify-content: center;
    font-size: 1rem !important;
    font-weight: bold;
    padding: 0.875rem 1rem !important; /* 14px 16px */
    border-radius: 8px !important;
    border: none !important;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#fluentform-popup .ff-btn-submit:hover {
    background-color: #178e61 !important; /* Warna hijau lebih gelap semasa hover */
    transform: scale(1.02);
}

/* Penyesuaian kecil untuk borang Fluent Form di dalam popup */
#fluentform-popup .ff-form-wrapper {
    margin-top: 1rem;
}

/*
======================================================
  PENAMBAHAN: Khas Untuk Paparan Mobile (Responsive)
======================================================
*/
@media (max-width: 767px) {

    /* 1. Kurangkan ruang di sekeliling keseluruhan popup.
     * Ini akan mengurangkan ruang yang ditanda dengan anak panah merah
     * pada gambar yang anda hantar.
    */
    #fluentform-popup {
        padding: 0.75rem; /* Asal: 1rem (p-4). Kita kurangkan sedikit. */
    }

    /* 2. Kurangkan ruang di dalam kotak putih popup.
     * Ini akan membuatkan borang itu sendiri nampak lebih lebar.
    */
    #fluentform-popup > div {
        padding: 1.5rem 1.25rem; /* Asal: 2rem 2.5rem. Kita kurangkan. */
    }
}