/**
                          ,
   ,-.       _,---._ __  / \
  /  )    .-'       `./ /   \
 (  (   ,'            `/    /|
  \  `-"             \'\   / |
   `.              ,  \ \ /  |
    /`.          ,'-`----Y   |
   (            ;        |   '
   |  ,-.    ,-'         |  /
   |  | (   |            | /
   )  |  \  `.___________|/
   `--'   `--'
    I'm aitji (also known as **Suriya Inchoo**)
    the host of the following websites
    * https://aitji.is-a.dev
    * https://pr.thatako.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://council.thatako.net/LICENSE"

    Sincerely,  
    Suriya Inchoo (aitji)
*/

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

.suggestions-box {
  box-shadow: var(--card-shadow);
  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: var(--transition);
  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: var(--transition);
}

.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: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
}

a {
  color: var(--primary-color);
  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: var(--form-input-bg);
  border: 1px solid var(--form-input-border);
  border-radius: 8px;
  padding: 30px;
  box-shadow: var(--card-shadow);
}

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: 1px solid var(--form-input-border);
  background-color: var(--form-input-bg);
  color: var(--form-input-text);
  border-radius: 4px;
  margin-bottom: 10px;
  transition: var(--transition);
}

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: var(--form-input-focus-border);
  box-shadow: 0 0 5px var(--form-input-focus-shadow);
}

form#report-form .submit {
  background-color: var(--button-bg);
  color: var(--header-text);
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
}

form#report-form .submit:hover {
  background-color: var(--button-hover-bg);
}

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

#image-preview-container img {
  border: 1px solid var(--form-input-border);
  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: var(--header-text);
  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: var(--primary-color);
  color: var(--header-text);
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
}

.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: var(--popup-bg);
  padding: 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: var(--card-shadow);
}

.popup h2 {
  margin-top: 0;
  color: var(--primary-color);
}

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

.popup-buttons button {
  background-color: var(--button-bg);
  color: var(--header-text);
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
  margin-right: 10px;
}

.popup-buttons button:hover {
  background-color: var(--button-hover-bg);
}

.help-text {
  font-size: 0.875rem;
  color: var(--sub-text-color);
}

#confirmation {
  display: none;
  background-color: var(--popup-bg);
  border: 1px solid var(--confirmation-border);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--card-shadow);
}

#confirmation button {
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 10px 20px;
  font-size: 16px;
}

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

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

#confirmation button.confirm:hover {
  background-color: var(--confirmation-confirm-bg);
  filter: brightness(0.9);
}

#confirmation button.red:hover {
  background-color: var(--confirmation-red-bg);
  filter: brightness(0.9);
}

#confirmation button.warn:hover {
  background-color: var(--cookie-text);
  filter: brightness(0.9);
}

.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);
}

@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;
}