// Stylesheet for the Taxiwebbooker WordPress plugin admin settings page

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');

// Color variables
$white: #fff;
$white2: #F8F8F8;
$blue: #25b4f3;
$blue2: #1a8cbb;
$grey: #1C1C1C;
$lightgrey: #b7b7b7;
$border: #C3CFD3;
$bg: #F0EDE6;
$bg2: #F3F8FA;

// Styles for the Taxiwebbooker admin page background
body.toplevel_page_taxiwebbooker-settings {
  background: $bg;
}

// Main wrapper for Taxiwebbooker admin settings page
.twb-settings-wrapper {
  font-family: "Arial", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: $grey;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  margin: 0 auto;
  padding: 60px 30px 30px 30px;

  .notice {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;

    p {
      font-size: 13px;
      line-height: 1.4;
      margin: 0.5em 0;
    }
  }

  .twb-auth-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 15px;
    line-height: 22px;
  }

  .twb-connected-account {
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px;

    .twb-connected-account__details {
      display: flex;
      flex: 1;
      width: 100%;
      min-width: 100%;
      flex-direction: column;
      gap: 10px;
    }

    .twb-connected-account__meta {
      display: flex;
      flex-direction: column;
    }

    .twb-connected-account__label {
      font-size: 15px;
      line-height: 22px;
      font-weight: 600;
    }

    .twb-connected-account__value {
      font-size: 16px;
      line-height: 24px;
      color: #6D7A80;
      word-break: break-word;
    }

    .twb-connected-account__value--muted {
      font-size: 15px;
      line-height: 22px;
    }

    .twb-connected-account__select {
      width: 100%;
      max-width: 100%;
      margin-top: 4px;
    }
  }

  .twb-connect-choice {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    .twb-get-form-id {
      margin-right: auto;
    }
  }

  .twb-option-label {
    margin-bottom: 4px;
  }

  .twb-restore-row form {
    margin-left: auto;
  }

  .twb-text-link-button {
    background: transparent;
    border: none;
    color: $grey;
    text-decoration: underline;
    padding: 0;
    font-size: 15px;
    line-height: 22px;
    cursor: pointer;
    box-shadow: none;
  }

  .twb-text-link-button:hover,
  .twb-text-link-button:focus {
    background: transparent;
    color: $grey;
    text-decoration: none;
  }

  .expand {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .wide {
    min-width: 100%;
  }

  a {
    color: $grey;
  }

  // Start screen container with flexible wrapping layout
  #twb-start-screen {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    gap: 30px 20px;
    margin-top: 30px;

    p {
      min-width: 100%;
      text-align: center;
      max-width: 550px;


    }

    h1 {
      min-width: 100%;
      text-align: center;
    }

    article {
      min-width: 300px;
      flex: 1;
      text-align: center;
      align-items: center;
      justify-content: center;
    }

  }

  p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    color: $grey;

    &.blue {
      color: $blue;
    }
  }

  p.small {
    font-size: 15px;
    line-height: 22px;
  }

  @mixin p {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
  }

  @mixin h1 {
    font-size: 40px;
    line-height: 42px;
    font-weight: 500;
  }

  h1, .h1 {
    @include h1;
  }


  p {
    @include p;
  }

  * {
    box-sizing: border-box;
  }

  .twb-logo {
    margin: 30px auto auto auto;
  }

  // Styled buttons used throughout the admin page
  .twb-button {
    background: $blue;
    color: $grey !important;
    border: 0;
    padding: 17px 25px;
    font-size: 16px;
    line-height: 16px;
    //font-weight: 600;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex;
    text-decoration: none;

    &.grey {
      background: $grey;
    }

    &.wp-core-ui {
      border-radius: 5px !important;
    }

    &.white {
      background: $white;
      color: $blue;
      border: 1px solid $blue;
    }

    &:hover {
      background: $blue2;
    }

    &.danger {
      background: #E74C3C;
      color: $white !important;
    }

    &.danger:hover {
      background: #C0392B;
    }
  }

  // Form container with column layout and spacing
  > form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 750px;

    div.error, div.updated {
      margin: 0;
      padding: 0 10px;
    }

    p.submit {
      padding: 0;
      margin: 0;
      display: flex;
      gap: 10px;
    }
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
  }

  ul.tabs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 10px;

    li {
      flex: 0 auto;
      margin: 0;
      background: #E3E0D6;
      padding: 15px 30px;
      border-radius: 8px 8px 0 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #585754;
      cursor: pointer;

      span {
        font-size: 10px;
        line-height: 14px;
        margin-top: -3px;
      }

      &.active {
        background: $white;
        color: $grey;
      }
    }
  }

  .tab-content {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;

    &.active {
      display: flex;
    }
  }

  ul.tabs + article {
    margin-top: -20px;
    border-radius: 0 10px 10px 10px;

  }

  // Article block styling for form sections or content panels
  article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    padding: 40px;
    border-radius: 10px;
    // This border is disabled for now, uncomment to enable:
    // border: 1px solid $border;
    background: $white;
    &.meta {
      background: transparent;
      flex-direction: row;
      justify-content: flex-end;
      max-width: 750px;
      padding: 0;
      align-items: center;
      .logo {
        margin-right: auto;
      }
      a.link {
        font-size: 15px;
      }

    }


    .field {
      display: flex;
      width: 100%;
      justify-content: flex-start;
      align-items: center;
      gap: 10px 30px;
      flex-wrap: wrap;

      &.line {
        border-bottom: 1px solid #EFEDE5;
        padding-bottom: 30px;
      }





      &.text {
        display: flex;
        gap: 30px;
        margin-top: 20px;


        > span {
          flex: 1;
          max-width: 300px;
        }
        > img {
          width: 100%;
          flex: 1;
          max-width: 340px;
        }
      }

      > label {
        white-space: nowrap;
        width: 100%;
        max-width: 300px;
        font-size: 15px;
      }

      .input.copy {
        background: $bg2;
        padding: 10px 15px;
        border: 1px solid $border;
        border-radius: 5px;
        flex: 1;
        max-width: 340px;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        font-size: 15px;
        button {
          appearance: none;
          font-size: 15px;
          border: none;
          background: transparent;
        }
      }

      > input[type="text"],
      input[type="email"],
      input[type="number"],
      input[type="password"] {
        background: $bg2;
        padding: 10px 15px;
        border: 1px solid $border;
        border-radius: 5px;
        flex: 1;
        max-width: 340px;

        &.fillout {
          max-width: 100%;
        }
      }

      select {
        background: $bg2 url("../img/dropdown.svg") no-repeat right 15px center;
        padding: 10px 40px 10px 15px;
        border: 1px solid $border;
        border-radius: 5px !important;
        flex: 1;
        max-width: 340px;
        font-size: 15px;
      }

      .twb-change-form-id {
        min-width: 100%;
        text-align: right;
        text-decoration: underline;
        color: $grey;
        margin-top: 10px;
        font-size: 15px;
      }

      &.twb-connected-account {
        > .twb-button {
          flex: 0 0 auto;
          margin-left: auto;
        }
      }

      .twb-preview-link {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
        text-decoration: none;
        color: $grey;
      }

      fieldset {
        display: flex;
        max-width: 340px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        border-radius: 5px;
        gap: 5px;

        input {
          display: none;
        }

        label {
          display: flex;
          align-items: center;
          padding: 13px 15px;
          border: 1px solid $border;
          border-radius: 5px;
          font-size: 14px;
          flex: 1;
          cursor: pointer;
          background: $white;
          transition: all 0.3s ease;
          white-space: nowrap;
          text-align: center;
          justify-content: center;
        }

        input:checked + label {
          background: $blue;
          border: 1px solid $blue;
          color: $grey;
          font-weight: 600;
        }

        &.position {
          label {
            flex: 1;
            gap: 0;
            min-width: 160px;
          }
        }
      }

      label[for="taxiweb_buttonstyle_square"],
      label[for="taxiweb_inline_buttonstyle_square"] {
        border-radius: 0;
      }

      label[for="taxiweb_buttonstyle_rounded"],
      label[for="taxiweb_inline_buttonstyle_rounded"] {
        border-radius: 15px;
      }

      label[for="taxiweb_buttonstyle_round"],
      label[for="taxiweb_inline_buttonstyle_round"] {
        border-radius: 50px;
      }

      // Custom color input with text and color preview
      .twb-color-picker {
        padding: 0 15px;
        border: 1px solid $border;
        border-radius: 5px;
        flex: 1;
        max-width: 340px;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        input[type="text"] {
          padding: 10px 0 10px 15px;
          margin-left: 15px;
          flex: 1;
          border: none;
          border-left: 1px solid $border;
          border-radius: 0;
        }

        input[type="color"] {
          max-width: 30px;
          width: 30px;
          height: 30px;
          border: none;
          padding: 0;
          margin: 0;
          cursor: pointer;
          overflow: hidden;

          > * {
            padding: 3px;
            border-radius: 50px;
          }
        }
      }

      .url {
        display: flex;
        gap: 5px;
        align-items: center;
        a {
          color: black;
          display: flex;
          align-items: center;
            gap: 5px;
        }
      }

      // Custom styled toggle switch
      input[type="checkbox"] {
        width: 50px;
        height: 30px;
        background: $lightgrey;
        border: none;
        appearance: none;
        -webkit-appearance: none;
        border-radius: 50px;
        box-shadow: none;
        position: relative;
        margin: 0;
        transition: all 0.3s ease;

        &:before {
          content: "";
          display: block;
          width: 24px;
          height: 24px;
          position: absolute;
          left: 3px;
          top: 3px;
          background: $white;
          border-radius: 50px;
          transition: all 0.3s ease;
          margin: 0;
        }

        &:checked {
          background: $blue;

          &:before {
            left: 22px;
          }
        }
      }
    }
  }
}