/**
                          ,
   ,-.       _,---._ __  / \
  /  )    .-'       `./ /   \
 (  (   ,'            `/    /|
  \  `-"             \'\   / |
   `.              ,  \ \ /  |
    /`.          ,'-`----Y   |
   (            ;        |   '
   |  ,-.    ,-'         |  /
   |  | (   |            | /
   )  |  \  `.___________|/
   `--'   `--'
    I'm aitji (also known as **Suriya Inchoo**)
    the host of the following websites
    * https://aitji.is-a.dev
    * https://pr-thatako.ddns.net or http://pr.thatako.ac.th

    If you're interested in contributing to the project,
    you're welcome to reach out to me on Discord my username is "aitji".  
    You can also submit an inquiry through the support ticket system available at https://aitji.is-a.dev/discord

    Further information about the project and licensing
    can be found at "https://thatako-council.com/LICENSE"

    Sincerely,  
    Suriya Inchoo (aitji)
*/

@import url("../../styles/form/root.css");

/* full name suggestions-box */
.suggestions-box {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  list-style-type: none;
  padding: 0;
  margin-top: 5px;
  border: 1px solid var(--form-input-border);
  max-height: 150px;
  overflow-y: auto;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  position: absolute;
  color: var(--text-color);
  background-color: var(--popup-bg);
  width: 300px;
  z-index: 1000;
}

.suggestions-box.show {
  display: block;
  opacity: 1;
}

.suggestions-box.hide {
  display: block;
  opacity: 0;
  visibility: hidden;
}

.suggestions-box li {
  padding: 8px;
  cursor: pointer;
  transition: filter 0.3s ease, background-color 0.3s ease;
}

.suggestions-box li:hover {
  filter: brightness(120%);
  background-color: rgba(0, 0, 0, 0.1);
}

.suggestions-box li strong {
  color: var(--popup-button-hover-bg);
}

.container {
  max-width: 100%;
}

body {
  background-color: #f8f9fa;
  color: #333;
  margin: 0;
  padding: 0;
}

a {
  color: #0a3662;
  text-decoration: none;
}


header.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

header.hero p {
  font-size: 1.25rem;
}

.container-noStyle {
  padding: 20px;
  margin-top: 20px;
}

form#report-form {
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

form#report-form label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

form#report-form input[type="text"],
form#report-form input[type="number"],
form#report-form input[type="file"],
form#report-form textarea,
form#report-form select {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  transition: border-color 0.3s;
}

form#report-form input[type="text"]:focus,
form#report-form input[type="number"]:focus,
form#report-form textarea:focus,
form#report-form select:focus {
  outline: none;
  border-color: #00509e;
}

form#report-form .submit {
  background-color: #0a3662;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

form#report-form .submit:hover {
  background-color: #00509e;
}

#important::before {
  content: '*';
  color: var(--error-color)
}

#image-preview-container img {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  height: 160px;
  object-fit: cover;
}

.preview-item {
  position: relative;
}

.remove-preview {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 300px;
  z-index: 9999;
}

.notification-container .notification {
  background-color: #0a3662;
  color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.popup {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.popup h2 {
  margin-top: 0;
  color: #0a3662;
}

.popup p {
  margin-bottom: 20px;
}

.popup-buttons button {
  background-color: #0a3662;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-right: 10px;
}

.popup-buttons button:hover {
  background-color: #00509e;
}

.help-text {
  font-size: 0.875rem;
  color: #6c757d;
}

@media (max-width: 768px) {
  header.hero {
    padding: 60px 10px;
  }

  form#report-form {
    padding: 20px;
  }
}

.footer,
.popup-overlay {
  width: 100%;
  position: fixed
}

.form-group button,
.popup button {
  padding: 10px 20px;
  font-size: 16px
}

#confirmation,
.popup {
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1)
}

#confirmation {
  display: none;
  background-color: var(--confirmation-bg);
  border: 1px solid var(--confirmation-border);
  border-radius: 8px
}

#confirmation button {
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer
}

#confirmation button.confirm {
  background-color: var(--confirmation-confirm-bg);
  color: #fff
}

#confirmation button.red {
  background-color: var(--confirmation-red-bg);
  color: #fff
}

#confirmation button.confirm:hover {
  background-color: darken(var(--confirmation-confirm-bg), 10%)
}

#confirmation button.red:hover {
  background-color: darken(var(--confirmation-red-bg), 10%)
}

#confirmation button.warn:hover {
  background-color: darken(var(--cookie-text), 10%)
}

.error {
  color: var(--error-color);
  font-size: .9em;
  display: block;
  margin-top: 5px
}

input.error,
select.error,
textarea.error {
  border: 2px solid var(--error-color);
  animation: .3s shake
}

input.error:focus,
select.error:focus,
textarea.error:focus {
  border: 2px solid var(--error-color);
  box-shadow: 0 0 5px rgba(235, 52, 52, .5);
}

form#report-form.error select {
  border: 2px solid var(--error-color);
}