/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); /* Mengimpor font Poppins dari Google Fonts dengan bobot 400, 500, dan 600 */

* {
  margin: 0; /* Menghapus margin default pada semua elemen */
  padding: 0; /* Menghapus padding default pada semua elemen */
  box-sizing: border-box; /* Membuat padding dan border termasuk dalam elemen */
  font-family: 'Poppins', sans-serif; /* Menggunakan font Poppins sebagai font utama */
}

body {
  display: flex; /* Menggunakan flexbox untuk mengatur tata letak */
  align-items: center; /* Memusatkan elemen secara horizontal */
  justify-content: center; /* Memusatkan elemen secara horizontal */
  min-height: 100vh; /* Mengatur tinggi minimal body sebagai 100% viewport height */
  background: #4285f4; /* Warna latar belakang biru */
}

.container {
  width: 450px; /* Mengatur lebar container */
  background: #fff; /* Memberikan warna latar belakang putih */
  border-radius: 8px; /* Memberikan efek lengkungan sudut metabgung */
  box-shadow: 0 10px 20px rgba(0,0,0,0.05); /* Menambahkan efek bayangan halus pada container */
}

.container h2 {
  font-weight: 600; /* Memberikan ketebalan font pada h2 */
  font-size: 1.31rem; /* Mengatur ukuran font */
  padding: 1rem 1.75rem; /* Memberikan ruang dalam (padding) di sekitar teks */
  border-bottom: 1px solid #d4dbe5; /* Memberikan garis bawah sebagai pembatas */
}

.wrapper {
  margin: 1.25rem 1.75rem; /* Memberikan margin di sekitar wrapper */
}

.wrapper .input-box {
  position: relative; /* Mengatur posisi relatif agar elemen anak dapat diatur absolut di dalamnya */
}

.input-box input {
  width: 100%; /* Mengatur lebar input agar memenuhi container */
  height: 53px; /* Mengatur tinggi input */
  color: #000; /* Memberikan warna teks hitam */
  background: #fff; /* Tidak menggunakan latar belakang */
  font-size: 1.06rem; /* Mengatur ukuran font */
  font-weight: 500; /* Memberikan ketebalan font */
  border-radius: 4px; /* Memberikan border lengkungan pada input dengan sudut melengkung */
  letter-spacing: 1.4px; /* Memberikan jarak antar huruf */
  border: 1px solid #aaa; /* Memberikan garis tepi abu-abu */
  padding: 0 2.85rem 0 1rem; /* Memberikan padding kiri dan kanan untuk isi input */
}

.input-box span {
  position: absolute; /* Mengatur posisi absolut di dalam input-box */
  right: 13px; /* Menempatkan elemen di sisi kanan input */
  cursor: pointer; /* Mengubah kursor menjadi pointer saat diarahkan */
  line-height: 53px; /* Mengatur line height agar sejaras dengan input */
  color: #707070; /* Memberikan warna abu-abu pada ikon */
}

.input-box span:hover {
  color: #4285f4 !important; /* Mengubah warna icon menjadi biru saat hover, dengan !important untuk prioritas tinggi */
}

.wrapper .pass-indicator {
  width: 100%; /* Mengatur lebar penuh untuk pass indicator */
  height: 4px; /* Memberikan tinggi indicator password */
  position: relative; /* Mengatur posisi relatif untuk elemen anak absolute */
  background: #dfdfdf; /* Mengatur warna latar belakang abu-abu */
  margin-top: 0.75rem; /* Memberikan jarak atas */
  border-radius: 25px; /* Membuat indicator melengkung dengan sudut */
}

.pass-indicator::before {
  position: absolute; /* Mengatur posisi absolut di dalam pass indicator */
  content: ""; /* Membuat elemen kosong sebagai indicator kekuatan password */
  height: 100%; /* Memberikan tinggi dengan elemen induk */
  width: 50%; /* Lebar default untuk indicator kekuatan password */
  border-radius: 25px; /* Memberikan border-radius yang sama dengan induk */
  transition: width 0.3s ease; /* Menambahkan efek transisi pada perubahan lebar */
}

.pass-indicator#weak::before {
  width: 20%; /* Mengubah lebar indicator untuk password lemah */
  background: #E64A4A; /* Warna merah untuk indikasi password lemah */
}

.pass-indicator#medium::before {
  width: 50%; /* Mengubah lebar indicator untuk password sedang */
  background: #f1c80b; /* Warna kuning untuk indikasi password sedang */
}

.pass-indicator#strong::before {
  width: 100%; /* Mengubah lebar indicator untuk password kuat */
  background: #4285f4; /* Warna biru untuk indikasi password kuat */
}

.wrapper .pass-length {
  margin: 1.56rem 0 1.25rem; /* Memberikan margin atas dan bawah */
}

.pass-length .details {
  display: flex; /* Menggunakan flexbox untuk menyusun elemen secara horizontal */
  justify-content: space-between; /* Menyebar elemen dengan jarak yang sama */
}

.pass-length input {
  width: 100%; /* Mengatur lebar penuh untuk range */
  height: 5px; /* Memberikan tinggi input range */
}

.pass-settings .options {
  display: flex; /* Menggunakan flexbox untuk menyusun elemen secara horizontal */
  list-style: none; /* Menghilangkan tanda default daftar */
  flex-wrap: wrap; /* Membungkus elemen jika tidak cukup ruang dalam satu baris */
  margin-top: 1rem; /* Memberikan jarak atas */
}

.pass-settings .options .option {
  display: flex; /* Menggunakan flexbox untuk menyusun elemen secara horizontal */
  align-items: center; /* Memusatkan elemen secara vertikal */
  margin-bottom: 1rem; /* Memberikan jarak bawah */
  width: calc(100% / 2); /* Membagi lebar menjadi dua kolom */
}

.options .option:first-child {
  pointer-events: none; /* Menonaktifkan interaksi dengan elemen pertama */
}

.options .option:first-child input {
  opacity: 0.7; /* Mengatur transparensi input pertama */
}

.options .option input {
  height: 16px; /* Memberikan tinggi checkbox */
  width: 16px; /* Memberikan lebar checkbox */
  cursor: pointer; /* Mengubah kursor menjadi pointer saat diarahkan */
}

.options .option label {
  cursor: pointer; /* Mengubah kursor menjadi pointer saat diarahkan */
  color: #4f4f4f; /* Memberikan warna abu-abu pada label */
  padding-left: 0.625rem; /* Memberikan jarak antara checkbox dan label */
}

.wrapper .generate-btn {
  width: 100%; /* Mengatur lebar penuh */
  color: #fff; /* Warna teks putih */
  border: none; /* Menghilangkan outline */
  outline: none; /* Menghilangkan outline */
  cursor: pointer; /* Mengubah kursor menjadi pointer */
  background: #4285f4; /* Mengatur warna latar belakang biru pada tombol */
  font-size: 1.06rem; /* Memberikan ukuran font */
  padding: 0.94rem 0; /* Memberikan padding atas dan bawah */
  border-radius: 5px; /* Memberikan efek lengkung pada tombol */
  text-transform: uppercase; /* Mengubah teks menjadi huruf kapital */
  margin: 0.94rem 0 1.3rem; /* Memberikan margin atas dan bawah */
}