/*
=============================
!MENU
=============================
*/

.menu {
   width: 100%;
   height: calc(var(--key) * 16);

   position: fixed;
   bottom: 0;

   display: flex;
   justify-content: center;
   align-items: center;

   padding: calc(var(--key) * 2) calc(var(--key) * 7) calc(var(--key) * 2);
   gap: calc(var(--key) * 4);
   border-top: 2px solid var(--GreyMedium);

   background: var(--GreyMedium1);
   overflow: hidden;
   z-index: 1000;
}

.menu__button {
   height: calc(var(--key) * 10);
   transition: all 0.1s ease;
   cursor: pointer;
}
.menu__logo,
.menu__divider {
   display: none;
}

.menu__button:hover {
   opacity: 0.5;
}

@media screen and (min-width: 768px) {
   .menu {
      width: fit-content;
      height: calc(var(--key) * 20);

      position: fixed;
      bottom: calc(var(--key) * 8);

      border-radius: calc(var(--key) * 10);
      box-shadow: 0px 25px 30px 10px var(--GreyShadow);
   }

   .menu__logo {
      width: calc(var(--key) * 42);
      height: calc(var(--key) * 10);
      display: flex;
      transform: translateY(calc(var(--key) * 0.25));
      cursor: pointer;
   }
   .menu__divider {
      width: calc(var(--key) * 10);
      height: calc(var(--key) * 10);
      display: flex;
   }
}

/*
=============================
!FOOTER
=============================
*/

.footer {
   width: 100%;
   height: min-content;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 0 0 calc(var(--key) * 1);
   gap: calc(var(--key) * 8);
}

.footer-container {
   width: var(--Width);
   height: min-content;
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   padding: 0 calc(var(--key) * 5);
   gap: calc(var(--key) * 10.5);
}

.footer-content {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   justify-content: space-around;
   align-items: start;
   gap: calc(var(--key) * 8);
}

.footer-column {
   width: fit-content;
   display: flex;
   flex-direction: column;
   justify-content: start;
   gap: calc(var(--key) * 4);
}

.footer-text,
.footer-link,
.footer-category {
   text-decoration: none;
   transition: opacity ease 0.15s;
}

.footer-category {
   font-family: "bold", sans-serif;
   color: var(--GreyLight);
}

.footer-copyrights {
   margin: calc(var(--key) * 2) 0 calc(var(--key) * 18);
   p {
      font-size: calc(var(--key) * 4);
   }
}

@media screen and (min-width: 768px) {
   .footer {
      gap: calc(var(--key) * 22);
   }
   .footer-container {
      flex-direction: row;
      justify-content: space-between;
      padding: 0 calc(var(--key) * 5) calc(var(--key) * 10);
   }

   .footer-content {
      flex-direction: row;
   }

   .footer-column {
      width: min-content;
      gap: calc(var(--key) * 3);
   }
   .footer-copyrights {
      margin: calc(var(--key) * 2) 0 0;
   }
}

@media screen and (min-width: 1280px) {
   .footer-link {
      cursor: pointer;
   }
   .footer-link:hover {
      opacity: 0.5;
      transition: opacity 0.2s ease-in-out;
   }
}

/*
=============================
!FORM
=============================
*/

.form-container {
   width: 100vw;
   height: 100dvh;

   position: fixed;
   top: 0;

   display: flex;
   justify-content: center;
   align-items: center;

   margin-bottom: calc(var(--key) * 16);

   background: var(--GreyShadow1);
   z-index: 10000;
}

.form {
   width: 100%;
   height: 100%;

   display: flex;
   flex-direction: column;

   position: relative;

   padding: calc(var(--key) * 20) calc(var(--key) * 10);
   gap: calc(var(--key) * 4);

   background: var(--GreyMedium1);
}

@media screen and (min-width: 768px) {
   .form {
      width: calc(var(--key) * 96);
      min-height: calc(var(--key) * 120);
      height: min-content;

      padding: calc(var(--key) * 7) calc(var(--key) * 10) calc(var(--key) * 10);
      border-radius: calc(var(--key) * 12);
      border-top: 2px solid var(--GreyMedium);
   }
}

.modal__input-container {
   width: 100%;
   min-height: calc(var(--key) * 12);

   display: flex;
   flex-direction: column;

   gap: calc(var(--key) * 2);
}

.form-label {
   font-family: "regular", sans-serif;
   font-size: calc(var(--key) * 4);
   text-decoration: none;
   color: var(--GreyLight1);
   cursor: default;
}

.form-input {
   width: 100%;
   min-height: calc(var(--key) * 12);

   padding: 0 calc(var(--key) * 2);
   border: 2px solid var(--GreyMedium);
   border-radius: calc(var(--key) * 2);

   background: var(--GreyMedium3);

   font-family: "regular", sans-serif;
   font-size: calc(var(--key) * 4.5);
   text-decoration: none;
   color: var(--GreyLight1);
}
/* ! BUTTON */
.submit-button {
   width: 50%;
   height: calc(var(--key) * 12);

   align-self: center;

   border: 2px solid var(--GreyMedium);
   border-radius: calc(var(--key) * 2);
   background: var(--GreyMedium3);

   font-family: "regular", sans-serif;
   font-size: calc(var(--key) * 4);
   text-decoration: none;
   color: var(--GreyLight1);
   cursor: pointer;
   transition:
      color 0.2s ease,
      border-color 0.2s ease;
}

.submit-button:hover {
   background: var(--GreyMedium1);
}

.submit-button--success {
   border-color: var(--Green);
   color: var(--GreyLight);
}

.submit-button--error {
   border-color: var(--Red);
   color: var(--GreyLight);
}

/* !TEXTAREA */

.form-textarea {
   height: calc(var(--key) * 20);

   padding: calc(var(--key) * 2) calc(var(--key) * 2);
   resize: none;

   line-height: 1.4;
}

/* !ERROR STYLES */

.form-input--error {
   border-color: var(--Red);
}

.form-error {
   min-height: calc(var(--key) * 4);
   font-family: "regular", sans-serif;
   font-size: calc(var(--key) * 3);
   color: var(--Red);
}

/* !CHECKBOX */

.modal__checkbox-container {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: calc(var(--key) * 1);
}

.form-checkbox-label {
   display: flex;
   align-items: flex-start;
   gap: calc(var(--key) * 2);
   cursor: pointer;
}

/* Кастомный квадратик */
.custom-checkbox {
   width: calc(var(--key) * 6);
   height: calc(var(--key) * 6);
   min-width: calc(var(--key) * 6);

   border: 2px solid var(--GreyMedium);
   border-radius: calc(var(--key) * 1);
   background: var(--GreyMedium3);

   display: flex;
   align-items: center;
   justify-content: center;
}

/* Галочка внутри — невидима по умолчанию */
.custom-checkbox__check {
   display: none;
   width: calc(var(--key) * 3);
   height: calc(var(--key) * 2);
   border-left: 2px solid var(--GreyMedium3);
   border-bottom: 2px solid var(--GreyMedium3);
   transform: translate(5%, -15%) rotate(-45deg);
}

/* При проверке */
.custom-checkbox--checked {
   background: var(--GreyLight1);
   border-color: var(--GreyLight1);
}

.custom-checkbox--checked .custom-checkbox__check {
   display: block;
}

/* При ошибке */
.custom-checkbox--error {
   border-color: var(--Red);
}

.form-checkbox-text {
   font-family: "regular", sans-serif;
   font-size: calc(var(--key) * 3.5);
   color: var(--GreyLight1);
   line-height: 1.3;
   cursor: pointer;
}