:root {
  --font-family: "Rubik", sans-serif;
  --header-font-family: "Fredoka", sans-serif;
  --logo-font-family: "Lilita One", sans-serif;
  --white-color: rgb(251, 251, 251);
  --bootstrap-black-20: rgba(8, 10, 12, 0.2);
  --bootstrap-danger-90: rgb(220, 53, 69, 0.9);
  --bootstrap-gray-100: rgb(243, 244, 247);
  --bootstrap-bs-gray: rgb(108, 117, 125);
  --bootstrap-bs-gray-75: rgba(108, 117, 125, 0.75);
  --bs-gray-700: rgb(73, 80, 87);
  --bs-gray-700-85: rgba(73, 80, 87, 0.85);
  --bootstrap-danger-75: rgb(220, 53, 69, 0.75);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

::placeholder {
  color: rgba(124, 124, 125, 0.6) !important;
}

#search-select {
  border-radius: 5px 0 0 5px !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f8f9fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  color: #f8f9fa;
  border: 1px solid rgb(108, 117, 125);
}

.tooltip-inner {
  background-color: var(--bootstrap-danger-75);
  color: var(--white-color);
  border: 1px solid var(--bootstrap-danger-90);
  box-shadow: 0px 4px 6px var(--bootstrap-black-20);
  margin-bottom: 0.5rem;
}
.tooltip-arrow {
  display: none !important;
}

/* Custom allauth styles for login, signup, reset password pages */
#login-form label,
#signup-form label {
  font-size: 0.95rem;
  color: var(--bootstrap-bs-gray);
}

#id_password_helptext,
#id_remember {
  font-size: smaller;
}

/* The entire error list will be displayed in a custom section before the form.
This is a deliberate measure to avoid having two separate error lists: 
one before and one within the form.
<ul class="errorlist">
    {% for key, values in form.errors.items %}
    <li>
        {% if key != '__all__' %}
        {{ key|capfirst }}:
        {% endif %}
        {{ values|join:", " }}
    </li>
    {% endfor %}
</ul>
*/
#signup-form .errorlist,
#event-edit-form .errorlist {
  display: none !important;
}

/* All errors will be displayed before form */
form.login ul:last-of-type,
form.signup ul:last-of-type {
  display: none !important;
}

ul.errorlist {
  list-style-type: none;
  color: var(--bootstrap-danger-90);
  text-align: center;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  font-size: 0.9rem;
  padding-left: 0;
}

form.login p,
form.signup p {
  margin-bottom: 0.5rem;
}

form.login p:last-of-type {
  display: none !important;
}

/* landing page */
.hamburger-menu .btn,
.xmark-icon .btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.hamburger-menu:hover,
.xmark-icon:hover {
  cursor: pointer;
}

/* base.html styles */
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050; /* Higher than Bootstrap modals */
}

/* Popover Nav menu */
#menu {
  width: 100%;
  height: 100%;

  /*  undo popover styles  */
  border: none;
  padding: 0;
  margin: 0;
  left: auto;

  /*  animate  */
  transition: translate 0.5s ease-out, display 0.5s ease-out allow-discrete,
    overlay 0.5s ease-out allow-discrete;
  translate: 100% 0;

  &:popover-open {
    translate: 0 0;
  }
}

#menu ul {
  list-style-type: none;
  margin-bottom: 0;
}

#menu li {
  transition: transform 0.2s ease-in-out;
}

#menu li:hover {
  transform: scale(1.1);
}

/* Good to know section on landing page (base.html) */

.accordion-button {
  background-color: var(--bs-gray-700-85) !important;
  color: var(--bootstrap-gray-100) !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--bs-gray-700) !important;
  z-index: 1;
}

.accordion-button:focus {
  border-color: var(--bootstrap-bs-gray-75) !important;
  box-shadow: none;
}

/* Remove the default arrow */
.accordion-button::after {
  display: none;
}

/* Font Awesome icons for collapsed and expanded states */
.accordion-button.collapsed::before {
  font-family: "Font Awesome 5 Free";
  content: "\f067";
  font-weight: 900;
  margin-right: 10px;
}

.accordion-button::before {
  font-family: "Font Awesome 5 Free";
  content: "\f068";
  font-weight: 900;
  margin-right: 10px;
}

/* Contact us section on landing page (base.html) */

#contact-us-form textarea:last-of-type {
  resize: none;
}

/* Landing page */
#logo-nav {
  font-family: var(--logo-font-family);
}

#bg-image {
  height: calc(100vh - 9rem);
  margin: 4.2rem 0rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (min-width: 576px) {
  #bg-image {
    height: calc(100vh - 6rem);
    margin-top: 5.3rem;
    margin-bottom: 0rem;
  }
}

#search-form {
  display: flex;
  justify-content: left;
  align-items: center;
}

#search-input {
  border-radius: 5px 0 0 5px;
}

#search-input:focus {
  box-shadow: none;
}

#bth-search-form {
  border: 1px solid #dee2e6;
  padding: 0.37rem;
  border-radius: 0 5px 5px 0;
  border-left-style: none;
  color: var(--bootstrap-bs-gray);
  background-color: var(--white-color);
}

#bth-search-form:hover {
  cursor: pointer;
  background-color: var(--bootstrap-bs-gray);
  border: 1px solid var(--bootstrap-bs-gray);
  border-left: none;
  color: var(--white-color);
}

@media (max-width: 665px) {
  #search-form-container {
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
  }
}

/* Login page */
.google-icon {
  width: 24px;
  height: 24px;
}

.or-line {
  display: flex;
  flex-direction: row;
}

.or-line:before,
.or-line:after {
  content: "";
  flex-grow: 100;
  border-bottom: 1px solid rgba(149, 149, 149, 0.6);
}

.or-line:before {
  margin: auto 1rem auto auto;
}

.or-line:after {
  margin: auto auto auto 1rem;
}

/* Results page */
.no-results img {
  height: 200px;
  width: auto;
}

/* Action picture base pages */
.action-picture-base-container {
  width: 100dvw !important;
  height: 100dvh !important;
}

.action-picture-image {
  background-position: 50% 50%;
  background-size: cover;
}

#rive-dog {
  height: 110px;
  width: 110px;
  opacity: 0.8;
}

#action-picture-logo-text {
  height: 60px;
  width: auto;
}

/* Event Card styles */
.event-card {
  width: 350px;
  height: 530px;
  transition: transform 0.2s ease-in-out;
}

.event-card:hover {
  transform: scale(1.01);
}

.card-body {
  flex: none;
}

.card-footer {
  height: 230px;
  width: 100%;
}

.event-card-image {
  height: 300px;
  width: 100%;
  background-position: 50% 50%;
  background-size: cover;
}

/* Event View page */
.event-view-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 4 / 3;
  height: auto;
}

@media (max-width: 768px) {
  .event-view-image {
    height: 100%;
  }
}

/* 400, 403, 404, 500 page */
.bad-request-container,
.forbitten-container,
.not-found-container,
.server-error-container {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bad-request-container a,
.forbitten-container a,
.not-found-container a,
.server-error-container a {
  transition: transform 0.2s ease-in-out;
}

.bad-request-container a:hover,
.forbitten-container a:hover,
.not-found-container a:hover,
.server-error-container a:hover {
  transform: scale(1.01);
}

.error-page-logo-img {
  height: calc(1.475rem + 2.7vw);
}

/* Other styles */
.btn-scale {
  transition: transform 0.2s ease-in-out;
}

.btn-scale:hover {
  transform: scale(1.05);
}