@charset "UTF-8";
/*
	Theme Name: FODMAP
	Author: Yan Metelitsa
	Author URI: https://yanmet.com/
	Description: Сайт для поиска содержания FODMAP в продуктах
	Version: 1.0.12
	Requires at least: 6.3.2
	Tested up to: 6.3.2
	Requires PHP: 8.1
	Text Domain: fodmap
*/
:root {
  /* Colors */
  --white: #fff;
  --light-green: #84C547;
  --dark-green: #228A3D;
}

/* Mixins */
/* Animations */
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Reset */
* {
  box-sizing: border-box;
}

html {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}

body {
  margin: 0;
}

/* Forms */
label {
  font-size: 14px;
}

input {
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}

/* Main */
.main-main {
  background: rgb(132, 197, 71);
  background: linear-gradient(0deg, var(--light-green) 0%, var(--dark-green) 100%);
  height: 100svh;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Parts */
.main-search-form {
  width: 100%;
  max-width: 500px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.main-search-form h1 {
  margin: 0;
  text-align: center;
  color: var(--white);
}
.main-search-form form {
  width: 100%;
}
.main-search-form form input {
  width: 100%;
}
.main-search-form__results {
  background-color: #fff;
  width: 100%;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  flex: 1;
}
.main-search-form__results::before, .main-search-form__results::after {
  height: 20vh;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
.main-search-form__results::before {
  content: "";
  background-image: url(img/loading.png);
  background-size: 40px;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
  animation: linear 1s infinite rotation;
}
.main-search-form__results::after {
  content: attr(label);
  display: none;
  align-items: center;
  justify-content: center;
}
.main-search-form__results.not-start {
  background-image: url(img/capy.jpg);
  background-size: 70% auto;
  background-position: bottom;
  background-repeat: no-repeat;
}
.main-search-form__results.not-start * {
  display: none;
}
.main-search-form__results.loading {
  overflow-y: hidden;
}
.main-search-form__results.loading * {
  display: none;
}
.main-search-form__results.loading::before {
  display: block;
}
.main-search-form__results.labled::after {
  display: flex;
}
@media screen and (min-width: 768px) {
  .main-search-form__results {
    width: 500px;
  }
}

.fodmap-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
.fodmap-item__row {
  padding: 16px 26px;
  display: flex;
  align-items: center;
}
.fodmap-item__row.no-padding {
  margin: -28px 0 0 0;
}
.fodmap-item__row.gray {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.025) 0%, rgba(0, 0, 0, 0) 100%);
  padding-right: 0;
  padding-left: 0;
}
.fodmap-item__col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.fodmap-item__col:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.fodmap-item__name {
  padding-right: 14px;
  flex: 1;
}
.fodmap-item__size, .fodmap-item__group {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
}
.fodmap-item__size {
  margin-right: auto;
}
.fodmap-item__circle {
  width: 14px;
  height: 14px;
  border-radius: 10px;
}
.fodmap-item__circle.red {
  background-color: red;
}
.fodmap-item__circle.orange {
  background-color: orange;
}
.fodmap-item__circle.green {
  background-color: green;
}/*# sourceMappingURL=style.css.map */