/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/*
 * Google Fonts - Google Sans & Roboto
 * See: https://fonts.google.com/license/googlerestricted
 */

/* Google Sans - Weight 400 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/googlesans/v60/4UasrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RPjIUvQ.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Google Sans - Weight 500 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/googlesans/v60/4UasrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RPjIUvQ.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto - Weight 400 */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto - Weight 500 */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBBc4.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Canvas Background Animation */
#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Let canvas sit behind all content without creating stacking issues */
  background: rgb(255, 255, 255);
  /* background: linear-gradient(135deg, #0b2a5d 0%, #1a3a6f 100%); */
}

/* Pastikan konten berada di atas canvas tanpa membuat stacking context baru */
body {
  position: relative;
  background: transparent;
  font-family: "Roboto", "Google Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
}

/* Background Google Forms-like untuk halaman survey */
body.page-main {
  background-color: #b2d0ff !important; /* Warna ungu muda seperti Google Forms */
}

/* Aplikasikan font Google ke elemen teks spesifik (JANGAN gunakan * karena akan override icon fonts) */
p,
div:not([class*="fa"]):not([class*="icon"]):not(.ls-icon),
span:not([class*="fa"]):not([class*="icon"]):not(.ls-icon),
h1,
h2,
h3,
h4,
h5,
h6,
label:not([class*="fa"]):not([class*="icon"]),
.control-label,
.help-block,
.question-number,
.question-code {
  font-family: "Roboto", "Google Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
}

/* Pastikan FontAwesome dan icon fonts tetap menggunakan font mereka sendiri */
.fa,
[class*="fa-"],
[class^="fa-"],
.ls-icon,
.icon,
[class*="icon"],
.button-item .ls-icon,
.gender-button .ls-icon,
.yesno-button .ls-icon {
  font-family: "FontAwesome" !important;
  font-style: normal !important;
  font-weight: normal !important;
}

/* Pastikan asterisk menggunakan FontAwesome */
.asterisk-inline .fa,
.asterisk-inline [class*="fa-"],
sup.fa,
sup.text-danger.fa {
  font-family: "FontAwesome" !important;
  font-style: normal !important;
  font-weight: normal !important;
}

/* Pastikan question help icon menggunakan FontAwesome */
.ls-questionhelp:before,
.ls-question-help:before {
  font-family: "FontAwesome" !important;
  font-style: normal !important;
  font-weight: normal !important;
}

/* Jangan beri z-index pada article agar modal Bootstrap bisa berada di atas backdrop */
article {
  position: relative;
}

/* Pastikan navbar dan elemen penting berada di atas canvas */
.navbar,
.navbar-default,
.navbar-fixed-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2000 !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Sembunyikan navbar di halaman survey (page-main) */
body.page-main .navbar,
body.page-main .navbar-default,
body.page-main .navbar-fixed-top {
  display: none !important;
}

/* Kurangi padding-top body di halaman survey karena navbar tidak ada */
body.page-main {
  padding-top: 0 !important;
}

/* Logo navbar - auto semua untuk responsive */
.logo-container .logo {
  height: auto !important;
  width: auto !important;
}

.logo-container {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.logo-container .logo {
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Pastikan modal berada di atas semua */
.modal {
  z-index: 2001 !important;
}

/* Background untuk halaman Welcome, Survey, dan Submit - menggunakan canvas */

/* Warna font untuk Group Title - Google Forms style */
.group-title {
  color: #202124 !important; /* Warna gelap seperti Google Forms */
  font-family: "Google Sans", "Roboto", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  margin-bottom: 0.5em !important;
}

/* Border radius untuk input field jawaban - Google Forms style */
.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select.form-control {
  border-radius: 4px !important; /* Border radius kecil seperti Google Forms */
  border: 1px solid #dadce0 !important; /* Border tipis seperti Google */
  padding: 8px 12px !important;
  font-family: "Roboto", "Google Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select.form-control:focus {
  border-color: #1a73e8 !important; /* Warna biru Google saat focus */
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2) !important; /* Shadow biru halus */
  outline: none !important;
}

/* Perbaiki cursor position untuk input numerical - pastikan text-align left */
input.form-control.numeric,
input.form-control[data-number="1"],
.numeric-item input.form-control,
.answer-item.numeric-item input,
input[data-number="1"] {
  text-align: left !important;
  direction: ltr !important;
}

/* Border radius untuk dropdown/select list - Google Forms style */
select,
select.form-control,
select[class*="form-control"],
.dropdown-toggle,
.select2-container .select2-choice {
  border-radius: 4px !important; /* Border radius kecil seperti Google */
  border: 1px solid #dadce0 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Border radius untuk dropdown menu list (options yang muncul) - Google Forms style */
.dropdown-menu,
.select2-dropdown,
.select2-results,
.select2-results__options,
ul.dropdown-menu,
.select2-container--default .select2-results > .select2-results__options,
.select2-container--default .select2-dropdown,
.select2-container--default .select2-results__options {
  border-radius: 4px !important; /* Border radius kecil seperti Google */
  overflow: hidden !important; /* Pastikan isi di dalam juga mengikuti border radius */
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 2px 4px 0 rgba(60, 64, 67, 0.3),
    0 2px 6px 2px rgba(60, 64, 67, 0.15) !important;
}

/* Border radius untuk item pertama dan terakhir di dropdown - Google Forms style */
.dropdown-menu > li:first-child > a,
.select2-results__option:first-child,
.select2-results__option--highlighted:first-child {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.dropdown-menu > li:last-child > a,
.select2-results__option:last-child,
.select2-results__option--highlighted:last-child {
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

/* Pastikan Select2 dropdown container juga rounded - Google Forms style */
.select2-container--default .select2-dropdown {
  border-radius: 4px !important;
  overflow: hidden !important;
}

/* Border radius untuk tombol - Google Forms style */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  border-radius: 4px !important; /* Border radius kecil seperti Google */
  font-family: "Google Sans", "Roboto", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
  font-weight: 500 !important;
  padding: 8px 24px !important;
  text-transform: none !important;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
}

.btn-primary {
  background-color: #1a73e8 !important;
  border-color: #1a73e8 !important;
}

.btn-primary:hover {
  background-color: #1557b0 !important;
  border-color: #1557b0 !important;
  box-shadow: 0 2px 4px 0 rgba(60, 64, 67, 0.3),
    0 2px 6px 2px rgba(60, 64, 67, 0.15) !important;
}

/* Tanda * mandatory di akhir teks pertanyaan */
.asterisk-inline {
  display: inline-block;
  margin-left: 4px;
}

/* Styling Google Forms-like untuk question container */
.question-container {
  padding: 1.5em 1.5em 1em 1.5em !important;
  margin-bottom: 1.5em !important;
  background-color: #ffffff !important; /* Putih seperti Google Forms */
  border: none !important; /* Hapus border */
  border-radius: 8px !important; /* Border radius lebih kecil */
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15) !important; /* Shadow halus seperti Google */
}

/* Question title styling - Google Forms style */
.question-title-container {
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !important;
}

.question-text,
.lsquestiontext {
  color: #202124 !important;
  font-family: "Roboto", "Google Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Spacing untuk answer container agar rapi dengan question text - Google Forms style */
.answer-container {
  margin-top: 0.75em !important;
  padding-top: 0.5em !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Container width lebih sempit seperti Google Forms */
@media (min-width: 768px) {
  .container {
    max-width: 640px !important; /* Lebar lebih sempit seperti Google Forms */
  }
}

/* Spacing khusus untuk mobile */
@media (max-width: 768px) {
  .question-container {
    padding: 1.2em 1.2em 0.8em 1.2em !important;
    margin-bottom: 1.2em !important;
    border-radius: 4px !important;
  }

  .answer-container {
    margin-top: 0.8em !important;
    padding-top: 0.4em !important;
  }

  /* Pastikan jarak antara question text dan answer field konsisten */
  .question-title-container {
    margin-bottom: 0.5em !important;
  }

  .ls-answers {
    margin-top: 0.5em !important;
  }
}

/* Footer dengan logo sederhana */
.survey-footer {
  /* background-color: #ffffff; */
  padding: 20px 15px;
  margin-top: 40px;
  border-top: 1px solid #e7e7e7;
  text-align: center;
}

.footer-logo-container {
  display: inline-block;
  padding: 10px 0;
}

.footer-logo {
  max-height: 80px; /* Diperbesar dari 40px menjadi 80px */
  width: auto;
  height: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.footer-logo:hover {
  opacity: 1;
}

/* Footer responsive untuk mobile */
@media (max-width: 768px) {
  .survey-footer {
    padding: 15px 10px;
    margin-top: 30px;
  }

  .footer-logo {
    max-height: 60px; /* Diperbesar dari 35px menjadi 60px */
  }

  .footer-logo-container {
    padding: 8px 0;
  }
}

@media (max-width: 480px) {
  .survey-footer {
    padding: 12px 8px;
    margin-top: 20px;
  }

  .footer-logo {
    max-height: 50px; /* Diperbesar dari 30px menjadi 50px */
  }

  .footer-logo-container {
    padding: 6px 0;
  }
}