@import url("reset.css");
@import url("loading-bar.css");
@import url("sidebar.css");

:root {
  --text-size: 20px;
  --link-size: 18px;
  --button-text-size: 20px;
  --label-size: 18px;
  --input-size: 20px;
  --heading-size: 22px;
}

body[data-theme="light"] {
  --body-color: #f9fafb;
  --list-item-button-bg-color: #dee5ec;
  --bg-color: #e1e3e9;
  --border-color: #dcdddf;
  --form-input-color: #e1e3e9;
  --form-input-focus-color: #f0f2fa;
  --form-input-disabled-color: #cccdd2;
  --text-color: #292929;
  --primary-color: #3b82f6;
  --disabled-button-color: #183a70;
}

body[data-theme="dark"] {
  --body-color: #030712;
  --list-item-button-bg-color: #050b1d;
  --bg-color: #111827;
  --border-color: #111724;
  --form-input-color: #131b2b;
  --form-input-focus-color: #222d44;
  --form-input-disabled-color: #050b1b;
  --text-color: #efefef;
  --primary-color: #3b82f6;
  --disabled-button-color: #183a70;
}

body {
  background-color: var(--body-color);
  color: var(--text-color);
  font-family: "LXGW WenKai TC", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  display: block;
  font-size: var(--heading-size) !important;
  font-weight: bold;
}

li,
p,
span {
  font-size: var(--text-size) !important;
}

label {
  font-size: var(--label-size) !important;
}

a {
  font-size: var(--link-size) !important;
}

::selection {
  background-color: var(--primary-color);
  color: var(--text-color);
}

.main-page {
  width: 100%;
  padding: 10px 30px;
}

.button-primary {
  background-color: #2563eb;
  color: #ffffff;
  padding: 14px 20px;
  border-radius: 5px;
  transition: all 300ms ease-in-out;
  cursor: pointer;
  font-size: var(--button-text-size);
}

.button-primary:hover {
  background-color: #144cc5;
}

.button-primary:focus {
  background-color: #0d3999;
}

.button-primary:disabled {
  background-color: var(--disabled-button-color);
  cursor: not-allowed;
}

.page-link {
  color: var(--text-color);
}

.page-link:hover {
  color: var(--primary-color);
}

hr {
  border-color: var(--body-color);
  border-width: 5px;
  transition: all 300ms ease-in-out;
}

.bg-wrapper {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 300ms ease-in-out;
}

.text-color {
  color: var(--primary-color) !important;
}

.bg-color {
  background-color: var(--primary-color);
}

.form-group .form-label {
  margin-bottom: 5px;
}

.form-label,
.form-control {
  display: block;
  width: 100%;
}

.form-label {
  font-size: var(--label-size) !important;
}

.form-control {
  padding: 10px 14px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  background-color: var(--form-input-color);
  font-size: var(--input-size) !important;
  transition: all 100ms ease-in-out;
  outline: none;
}

.form-control:focus {
  background-color: var(--form-input-focus-color);
}

.form-control:disabled {
  background-color: var(--form-input-disabled-color);
}

.location-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.location-popup .list-item {
  display: block;
  width: 100%;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: var(--list-item-button-bg-color);
  transition: all 100ms ease-in-out;
}

.location-popup .list-item:hover {
  background-color: #144cc5;
}

.location-popup .list-item:focus {
  background-color: #0d3999;
}

.error-highlight {
  border: 2px solid red;
  /* Червен бордюр */
  background-color: #ffe6e6;
  /* Светло червен фон */
  transition: border 0.3s ease, background-color 0.3s ease;
  /* Плавен преход за по-добър визуален ефект */
}

.custom-messages {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.custom-messages.error {
  border: 1px solid #f87171;
  background-color: #fecaca;
  color: #7f1d1d;
}