// Check on live
html.no-scroll {
  scrollbar-gutter: stable;
}

body.no-scroll {
  overflow-y: hidden;
}


.modal-window {

  form,
  div {
    box-sizing: border-box;
  }

  --mw-zindex: 999999;
  --mw-position: fixed;
  --mw-inset-top: auto;
  --mw-inset-right: auto;
  --mw-inset-bottom: auto;
  --mw-inset-left: auto;
  --mw-inset: var(--mw-inset-top) var(--mw-inset-right) var(--mw-inset-bottom) var(--mw-inset-left);
  --mw-width: 662px;
  --mw-height: auto;
  --mw-bg-color: #ffffff;
  --mw-bg-img: none;
  --mw-padding: 10px;
  --mw-font-size: 16px;
  --mw-font-family: inherit;
  --mw-shadow: none;
  --mw-radius: 5px;
  --mw-border: none;
  --mw-overlay: rgba(0, 0, 0, .7);
  --mw-scrollbar-width: thin;
  --mw-scrollbar-thin: 6px;
  --mw-scrollbar-color: #4F4F4F;
  --mw-scrollbar-track: rgba(255, 255, 255, 0);

  // CLose Button
  --mw-close-inset: 0 0 auto auto;
  --mw-close-padding: 6px 12px;
  --mw-close-size: 12px;
  --mw-close-font: inherit;
  --mw-close-weight: 400;
  --mw-close-style: normal;
  --mw-close-radius: 0;
  --mw-close-color: #ffffff;
  --mw-close-h-color: #000000;
  --mw-close-bg: #000000;
  --mw-close-h-bg: #ffffff;
  --mw-close-box: 24px;
  // Modal Title
  --mw-title-size: 32px;
  --mw-title-line-height: 36px;
  --mw-title-font: inherit;
  --mw-title-weight: 400;
  --mw-title-style: normal;
  --mw-title-align: left;
  --mw-title-color: #383838;
  --mw-title-bg: rgba(255, 255, 255, 0);

  // Modal Float Button
  --mw-flbtn-inset: 50% -4px auto auto;
  --mw-flbtn-padding: 14px 14px;
  --mw-flbtn-radius: 4px;
  --mw-flbtn-size: 1.2em;
  --mw-flbtn-color: #ffffff;
  --mw-flbtn-h-color: #ffffff;
  --mw-flbtn-bg: #383838;
  --mw-flbtn-h-bg: #797979;
  --mw-anime-duration: 5s;
  --mw-anime-iteration: 5;

  // Modal Form
  --mw-form-width: 100%;
  --mw-form-padding: 10px;
  --mw-form-margin: 0 auto;
  --mw-form-border: 1px solid #ffffff;
  --mw-form-radius: 0px;
  --mw-form-bg: #ffffff;

  --mw-field-border-width: 1px;
  --mw-field-border-color: #383838;
  --mw-field-radius: 0px;
  --mw-field-size: 16px;
  --mw-field-bg: #ffffff;
  --mw-field-color: #383838;
  --mw-field-input-height: 36px;
  --mw-field-textarea-height: 72px;
  --mw-form-btn-color: #ffffff;
  --mw-form-btn-bg: #e95645;
  --mw-form-btn-h-bg: #d45041;
  --mw-form-btn-size: 16px;
  --mw-form-text-size: 16px;
  --mw-form-text-color: #48c774;

  &__wrapper {
    position: fixed;
    display: none;
    z-index: var(--mw-zindex);
    visibility: visible;
    user-select: text;
    overflow: auto;
    inset: 0 0 0 0;
    pointer-events: none;

    &.is-block {
      pointer-events: auto;
    }

    &.is-clickable {
      pointer-events: auto;
    }

    &.has-overlay {
      background-color: var(--mw-overlay);
    }
  }

  &__title {
    position: relative;
    background-color: var(--mw-title-bg);
    border-radius: var(--mw-radius) var(--mw-radius) 0 0;
    color: var(--mw-title-color);
    text-align: var(--mw-title-align);
    font-family: var(--mw-title-font);
    font-size: var(--mw-title-size);
    font-style: var(--mw-title-style);
    font-weight: var(--mw-title-weight);
    line-height: var(--mw-title-line-height);
    margin-inline: calc(var(--mw-padding) * -1);
    margin-block-start: calc(var(--mw-padding) * -1);
    padding-inline: var(--mw-padding);
  }

  &__content {
    position: var(--mw-position);
    display: none;
    z-index: calc(var(--mw-zindex) + 1);
    width: var(--mw-width);
    height: var(--mw-height);
    //max-width: 100%;
    max-height: calc(100vh - var(--mw-inset-top));
    padding: var(--mw-padding);
    margin: auto;
    box-shadow: var(--mw-shadow);
    background-color: var(--mw-bg-color);
    background-image: var(--mw-bg-img);
    background-repeat: no-repeat;
    background-size: cover;
    border: var(--mw-border);
    border-radius: var(--mw-radius);
    font-family: var(--mw-font-family);
    font-size: var(--mw-font-size);
    inset: var(--mw-inset);
    pointer-events: auto;

    &-wrapper {
      display: flex;
      flex-direction: column;
      height: calc(var(--mw-height) - var(--mw-padding) * 2);
      max-height: calc(100vh - var(--mw-inset-top) - var(--mw-padding) * 2);
      user-select: text;
    }

    &-main {
      margin-inline: calc(var(--mw-padding) * -1);
      padding-inline: var(--mw-padding);
      flex: 1;
      overflow-y: auto;
      scrollbar-width: var(--mw-scrollbar-width);
      scrollbar-color: var(--mw-scrollbar-color) var(--mw-scrollbar-track);

      &::-webkit-scrollbar {
        -webkit-appearance: none;
        width: var(--mw-scrollbar-thin);
        background-color: var(--mw-scrollbar-track);
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: var(--mw-scrollbar-color);
      }
    }
  }

  &__close {
    position: absolute;
    display: none;
    z-index: calc(var(--mw-zindex) + 2);
    padding: var(--mw-close-padding);
    background-color: var(--mw-close-bg);
    border-radius: var(--mw-close-radius);
    cursor: pointer;
    color: var(--mw-close-color);
    font-family: var(--mw-close-font);
    font-size: var(--mw-close-size);
    font-style: var(--mw-close-style);
    font-weight: var(--mw-close-weight);
    transition: all 0.2s ease;
    inset: var(--mw-close-inset);

    &:focus,
    &:hover {
      background-color: var(--mw-close-h-bg);
      color: var(--mw-close-h-color);
    }

    &.-image {
      padding: 0;

      &:after {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--mw-close-box);
        height: var(--mw-close-box);
        content: "\00d7";
      }
    }
  }

  &__form {
    width: var(--mw-form-width);
    padding: var(--mw-form-padding);
    margin: var(--mw-form-margin);
    border: var(--mw-form-border);
    border-radius: var(--mw-form-radius);
    background: var(--mw-form-bg);

    input[type="text"],
    input[type="email"],
    textarea {
      padding: 10px;
      display: block;
      max-width: none;
      box-sizing: border-box;
      margin-bottom: 13px;
      width: calc(100% - var(--mw-field-border-width));
      border-width: var(--mw-field-border-width);
      border-color: var(--mw-field-border-color);
      border-style: solid;
      color: var(--mw-field-color);
      background: var(--mw-field-bg);
      border-radius: var(--mw-field-radius);
      font-size: var(--mw-field-size);

      &::placeholder {
        opacity: 0.75;
      }
    }

    input[type="text"],
    input[type="email"] {
      height: var(--mw-field-input-height);
      line-height: var(--mw-field-input-height);
    }

    textarea {
      height: var(--mw-field-textarea-height);
      overflow: auto;
    }


    input[type="submit"] {
      padding: 10px;
      text-decoration: none;
      width: calc(100% - var(--mw-field-border-width));
      border-width: var(--mw-field-border-width);
      border-color: var(--mw-field-border-color);
      border-style: solid;
      display: inline-block;
      border-radius: var(--mw-field-radius);
      color: var(--mw-form-btn-color);
      background: var(--mw-form-btn-bg);
      font-size: var(--mw-form-btn-size);
      cursor: pointer;

      &:hover {
        background: var(--mw-form-btn-h-bg);
      }

    }

    &-result {
      margin-bottom: 13px;
      color: var(--mw-form-text-color);
      font-size: var(--mw-form-text-size);
    }
  }

  .modal-float-button {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--mw-zindex) - 1);
    padding: var(--mw-flbtn-padding);
    background: var(--mw-flbtn-bg);
    border-radius: var(--mw-flbtn-radius);
    cursor: pointer;
    color: var(--mw-flbtn-color);
    font-size: var(--mw-flbtn-size);
    line-height: 1;
    gap: 8px;
    inset: var(--mw-flbtn-inset);
    transition: all 0.2s ease;

    &.is-inactive {
      display: none;
    }

    &:hover {
      background: var(--mw-flbtn-h-bg);
      color: var(--mw-flbtn-h-color);
    }

    &.is-left {
      rotate: -90deg;
      transform-origin: left top 0;
    }

    &.is-right {
      rotate: 90deg;
      transform-origin: right top 0;
    }

    &.has-animation {
      animation-iteration-count: var(--mw-anime-iteration);
      animation-duration: var(--mw-anime-duration);
      animation-fill-mode: both;

      &:hover {
        animation-play-state: paused;
      }


      &.is-paused {
        animation-play-state: paused;
      }

      &._bounce {
        animation-name: mw-bounce;
      }

      &._flash {
        animation-name: mw-flash;
      }

      &._pulse {
        animation-name: mw-pulse;
        animation-timing-function: ease-in-out;
      }

      &._rubberBand {
        animation-name: mw-rubberBand;
      }

      &._shake {
        animation-name: mw-shake;
      }

      &._swing {
        animation-name: mw-swing;
      }

      &._tada {
        animation-name: mw-tada;
      }

      &._wobble {
        animation-name: mw-wobble;
      }

      &._jello {
        animation-name: mw-jello;
      }

      &._headShake {
        animation-timing-function: ease-in-out;
        animation-name: mw-headShake;
      }

      &._heartBeat {
        animation-name: mw-heartBeat;
        animation-timing-function: ease-in-out;
      }
    }

    &:has(.fa-stack) {
      background: transparent;

      .fa-stack-2x {
        color: var(--mw-flbtn-bg);
      }

      .fa-stack-1x {
        color: var(--mw-flbtn-color);
      }

      &:hover {
        .fa-stack-2x {
          color: var(--mw-flbtn-h-bg);
        }

        .fa-stack-1x {
          color: var(--mw-flbtn-h-color);
        }
      }
    }

  }

  /* ========================
    Button
  ======================== */

  a.modal-button {
    text-decoration: none;
  }

  .modal-button {
    border: none;
    border-radius: 0;
    font-weight: 400;
    cursor: pointer;
    justify-content: center;
    padding: calc(0.5em - 1px) 1em;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
  }

  .modal-button.is-small {
    border-radius: 2px;
    font-size: 0.75em;
  }

  .modal-button.is-normal {
    font-size: 1em;
  }

  .modal-button.is-medium {
    font-size: 1.25em;
  }

  .modal-button.is-large {
    font-size: 1.5em;
  }

  .modal-button.is-fullwidth {
    display: flex;
    width: 100%;
  }

}

/* ========================
  Columns
======================== */

.wow-col {
  display: flex;
  flex-wrap: wrap;
}

.wow-col-1,
.wow-col-2,
.wow-col-3,
.wow-col-4,
.wow-col-5,
.wow-col-6,
.wow-col-7,
.wow-col-8,
.wow-col-9,
.wow-col-10,
.wow-col-11,
.wow-col-12 {
  box-sizing: border-box;
}

@for $i from 1 through 12 {
  .wow-col-#{$i} {
    width: calc((100% / 12) * #{$i});
  }
}

/* ========================
  Float Button Animation
======================== */
@import 'anime';