/**
 * Pingdom Signup Form Block — Styles
 *
 * Combines sw19s-corp-form.css, sw19s-corp-field.css,
 * sw19s-confirmation-modal.css and page-level layout from pingdom-2018.
 */

/* ── Page-level layout (from pingdom-2018 page-sign-up) ──────────────── */

.sw-pingdom-signup {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;

  @media (max-width: 768px) {
    flex-direction: column;
    padding: 30px 20px;
  }

  @media (max-width: 480px) {
    padding: 0;
  }

  .form-wrap {
    flex: 1 1 auto;
    min-width: 0;

    .form-wrap-two {
      max-width: 540px;
      margin: 0 auto;
      position: relative;

      .svg-decor {
        position: absolute;
        bottom: 100%;
        left: 0;
        display: grid;
      }
    }
  }

  .email-in-use-note {
    color: #e20a38;
    font-size: 12px;
    line-height: 12px;
    font-weight: 700;
    margin: 1px 0 8px 0;

    a {
      color: #e20a38;
      text-decoration: underline;
    }
  }

  /* ── Form container (from sw19s-corp-form.css) ───────────────────────── */

  .sw19s-corp-form {
    box-shadow: 10px 10px 0 0 var(--Brand-Color-Primary-Silver-300, #a0b9b9);
    border: 1px solid var(--Brand-Color-Primary-Silver-300, #a0b9b9);
    padding: 32px;
    background-color: #fff;

    .promotions,
    .terms {
      padding-left: 22px;
      text-indent: -22px;
      margin-top: 32px;
      display: flex;
      align-items: flex-start;
      gap: 16px;

      p {
        display: inline;
      }

      input[type="checkbox"] {
        appearance: checkbox;
        -webkit-appearance: checkbox;
        width: auto;
        height: auto;
      }

      input[type="checkbox"]:checked:after {
        display: none;
      }

      label {
        font-size: 14px;
        display: inline;
      }
    }

    .sw19-corp-combo-fields {
      display: flex;
      gap: 16px;
    }

    .terms-text {
      margin-top: 32px;
      display: flex;
      align-items: flex-start;
      gap: 16px;

      &.correction {
        margin-left: 4px;
        gap: 7px;
      }

      input {
        width: 16px;
        height: 16px;
        margin: 0;
      }

      p,
      a {
        display: inline;
        font-family: "Roboto", sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 500;
        color: #444;
      }

      a {
        color: #006482;

        &:hover,
        &:active {
          text-decoration: none;
        }
      }
    }

    input[type="submit"] {
      display: block;
      margin: 30px auto 0 auto;
      width: 100%;

      &:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
      }
    }

    .promotions {
      display: none;
    }

    &.show-optin .promotions {
      display: block;
    }

    ul.errors {
      list-style: none;
      padding: 0;
      margin-top: 12px;
      color: #e20a38;
      font-size: 14px;

      li {
        margin-bottom: 4px;
      }
    }

    .validation-spinner {
      position: absolute;
      top: -5px;
      right: 0;
      width: 45px;
    }

    .sw19s-corp-field:not(.loading) .validation-spinner {
      display: none;
    }

    @media (max-width: 767px) {
      .sw19-corp-combo-fields {
        flex-direction: column;
        gap: 0;
      }
    }

    @media (max-width: 425px) {
      padding: 1rem;

      .promotions,
      .terms {
        margin-top: 25px;
      }

      input[type="submit"] {
        font-size: 16px;
        line-height: 20px;
      }
    }
  }

  /* ── Field component (from sw19s-corp-field.css) ────────────────────── */

  .sw19s-corp-field {
    margin: 8px 0;
    min-height: 26px;
    width: 100%;
    position: relative;

    input[type],
    input[type]:focus,
    input,
    input:focus,
    .country-picker,
    .sw-selector,
    textarea,
    textarea:focus {
      width: 100%;
      border: 0;
      border-bottom: 2px solid #a0b9b9;
      border-radius: 0;
      padding: 0 0 2px 0;
      font-size: 16px;
      line-height: 24px;
      outline: none;
      margin-top: 1px;
    }

    &.invalid input[type] {
      border-bottom-color: #e20a38;
    }

    label:first-child {
      display: block;
      color: #ccc;
      font-size: 12px;
      line-height: 12px;
      font-weight: 700;
      margin-bottom: 0;
      visibility: hidden;
      position: absolute;
      left: 0;
      bottom: 100%;
    }

    label.selected:first-child {
      visibility: visible;
    }

    label:last-child,
    label.validation {
      color: #e20a38;
      font-size: 12px;
      line-height: 12px;
      font-weight: 700;
      text-align: right;
      display: block;
      visibility: hidden;
      margin: 1px 0 0 0;

      a {
        color: #006482;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    &.invalid label:last-child,
    &.invalid label.validation {
      visibility: visible;
    }

    input::placeholder,
    textarea::placeholder {
      color: #666;
    }

    input:focus::placeholder,
    textarea:focus::placeholder {
      color: transparent;
    }

    /* Hide native placeholder on required inputs — replaced by .sw-placeholder overlay */
    input[required]::placeholder {
      color: transparent;
    }

    .sw-placeholder {
      position: absolute;
      left: 0;
      top: 1px;
      color: #666;
      font-size: 16px;
      line-height: 24px;
      pointer-events: none;

      .sw-req {
        color: #c6022c;
      }
    }

    /* Hide overlay when the field has focus */
    &:focus-within .sw-placeholder {
      display: none;
    }

    /* Hide overlay when input has a value (:placeholder-shown = empty field) */
    input[required]:not(:placeholder-shown) ~ .sw-placeholder {
      display: none;
    }

    .country-picker,
    .sw-selector {
      height: 26px;
      background: transparent;
    }

    textarea {
      height: 80px;
      resize: vertical;
    }
  }

  form.submitted .sw19s-corp-field label:first-child {
    visibility: visible;
  }

  /* ── Submit button (sw19s-btn) ───────────────────────────────────────── */

  .sw19s-btn {
    display: inline-block;
    background-color: #111;
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 16px 24px;
    width: 100%;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    cursor: pointer;
    min-width: 165px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    margin-top: 32px;

    &:hover {
      background-color: #ff6200;
      color: #111;
    }

    &.disabled,
    &:disabled {
      background-color: #ff9b66;
      cursor: not-allowed;

      .btn-text {
        display: none;
      }

      .btn-spinner {
        display: inline-block;
      }
    }

    .btn-spinner {
      display: none;
      height: 24px;
      width: 24px;
      margin-top: -7px;
      transform: translateY(5px);

      svg {
        height: 24px;
        width: 24px;
      }
    }
  }

  /* ── Confirmation modal (from sw19s-confirmation-modal.css) ──────────── */

  .sw19s-confirmation-modal-background {
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
    background-color: #00000060;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;

    @media (max-width: 768px) {
      background-color: #00000075;
    }

    &.modal-display-initial {
      display: none;
    }

    .modal-confirmation {
      max-width: 582px;
      width: 100%;
      padding: 2rem;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 20px 40px 0 #00000020;
      position: relative;
      border-radius: 20px;

      @media (max-width: 425px) {
        width: 80vw;
      }

      .close-btn {
        border: none;
        background-color: transparent;
        align-self: flex-end;
        cursor: pointer;
        position: absolute;

        svg {
          width: 16px;
        }
      }

      .modal-title {
        font-weight: 700;
        font-size: 34px;
        margin-top: 0;
        margin-bottom: 8px;
        color: #ff6200;
        text-align: center;
        line-height: 44px;
        letter-spacing: 0;
      }

      .modal-text {
        padding: 0 2rem;
        text-align: center;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 24px;
        color: #444;
        margin: 0;

        @media (max-width: 425px) {
          padding: 0;
        }
      }

      .modal-btn-wrapper {
        margin-top: 24px;
      }

      .btn-dismiss {
        background: none;
        border: none;
        color: #006482;
        cursor: pointer;
        font-size: 14px;
        text-decoration: underline;
      }
    }
  }

  /* ── Loading Layout ──────── */
  .sw-pingdom-loading-layout {
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    box-shadow: 10px 10px 0 0 var(--Brand-Color-Primary-Silver-300, #a0b9b9);
    border: 1px solid var(--Brand-Color-Primary-Silver-300, #a0b9b9);
    background: #fff;

    .loading-headline {
      padding-top: clamp(0px, 4vw, 120px);
      color: #111;
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      line-height: 36px;
    }

    .loading-spinner {
      svg {
        animation: sw-spin 1.2s linear infinite;
      }
    }

    .loading-description {
      color: #111;
      text-align: center;
      font-size: 12px;
      font-weight: 500;
      line-height: 16px;
      padding-bottom: clamp(0px, 4vw, 120px);

      a {
        color: #006482;
        text-decoration: underline;

        &:hover {
          text-decoration: none;
        }
      }
    }

    @media (max-width: 639px) {
      .loading-headline {
        font-size: 20px;
        line-height: 30px;
      }
    }
  }
}

@keyframes sw-spin {
  to {
    transform: rotate(360deg);
  }
}