.os-payment-processor-w .os-payment-processor-body#togglePaymentSettings_stripe {
  padding: 0px;
}
.stripe-checkout-payments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 4px;
  grid-column-gap: 20px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid $border-color-lightest;
}
.table-fields-selector-w {
  margin-top: 20px;
  h3 {
    margin-bottom: 15px;
    font-weight: $body-font-weight-bold;
    font-size: floor($font-size-base * 0.8);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: $color-faded;
    display: flex;
    align-items: center;
    span {
      flex: 0;
      display: block;
      white-space: nowrap;
    }
    span + span {
      display: block;
      background-color: #eef1f9;
      flex: 1;
      height: 5px;
      margin-left: 10px;
    }
  }
  .table-fields-selector-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    .os-form-group {
      border: 1px solid #d6dbe4;
      border-bottom-color: #c4c9d0;
      border-radius: 6px;
      padding: 8px;
      margin: 0px;
      box-shadow: 0px 1px 2px rgba(0,0,0,0.05);
    }
    .os-form-group.os-form-toggler-group {
      label {
        font-size: floor($font-size-base * 0.95);
        margin-left: 0px;
        padding: 0px;
        padding-left: 8px;
        border-left: 1px solid $border-color-lightest;
      }
      .os-toggler-label-w {
        padding: 0px;
        margin-left: 8px;
      }
    }
    & + h3 {
      margin-top: 20px;
    }
  }
}

.os-togglable-items-w {
  margin-bottom: 40px;
  .os-togglable-item-w {
    background-color: #fff;
    @include white-box();
    margin-bottom: 15px;
    &.is-disabled {
      opacity: 0.5;
      .os-field-setting {
        display: none;
      }
    }
    .os-togglable-item-head {
      display: flex;
      align-items: center;
      padding: 15px 20px 15px 20px;
    }
    .os-togglable-item-body {
      padding: 0px;
      border-top: 1px solid $border-color-main;
      &:has(>:not(.sub-section-row)){
        // hack to support addons that haven't migrated to sub-section-row layout
        padding: 20px;
      }
    }
    .os-togglable-item-logo-img {
      height: 25px;
      width: auto;
      display: block;
    }
    .os-toggler-w {
      padding: 10px 20px 10px 0px;
      margin-right: 20px;
      border-right: 1px solid $border-color-lightest;
      input[type="radio"] {
        display: none!important;
      }
    }
    .os-togglable-item-name {
      margin-right: auto;
      font-weight: $body-font-weight-bold;
      font-size: $body-font-size-m;
      padding: 8px 15px;
    }
    .os-toggler-w + .os-togglable-item-name {
      padding-left: 0px;
    }
    .os-togglable-item-logo-img + .os-togglable-item-name {
      margin-left: auto;
      margin-right: 0;
      color: $color-faded;
    }
  }
}

.os-payment-processors-w {
  margin-bottom: 40px;
}
.os-payment-processor-w {
  background-color: #fff;
  box-shadow: $box-shadow;
  border-radius: $border-radius;
  margin-bottom: 15px;
  .os-payment-processor-head {
    display: flex;
    align-items: center;
    padding: 15px;
  }
  .os-payment-processor-body {
    padding: 25px;
    border-top: 1px solid rgba(0,0,0,0.1);
  }
  .os-processor-logo-img {
    height: 30px;
    width: auto;
    display: block;
  }
  .os-processor-logo {
    height: 30px;
    width: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
  }
  .os-toggler-w {
    padding: 8px 15px 8px 5px;
    margin-right: 20px;
    border-right: 1px solid rgba(0,0,0,0.1);
  }
  .os-processor-name {
    margin-right: auto;
    font-weight: $body-font-weight-bold;
    font-size: floor($font-size-base * 1.2);
    padding: 8px 15px;
  }
  .os-processor-logo + .os-processor-name {
    display: none;
  }
  &.is-disabled {
    opacity: 0.5;
    .os-field-setting {
      display: none;
    }
  }
}

.os-togglable-content {
  border-top: 1px solid rgba(0,0,0,0.1);
}

.date-ranges-heading {
  font-size: floor($font-size-base * 1.1);
  margin-bottom: 15px;
  margin-top: 30px;
  font-weight: $body-font-weight-bold;
  color: $brand-primary;
  letter-spacing: 1px;
  background-color: #f1f5ff;
  display: inline-block;
  padding: 3px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}

.installed-addons-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}
.os-installed-addon-box {
  padding: 20px;
  @include white-box();
  border-radius: $border-radius;
  background-color: #fff;
  h4 {
    font-size: floor($headings-font-size * 0.65);
    margin: 0px;
    margin-bottom: 8px;
  }
}

.reset-db-version-link {
  margin-left: 5px;
  text-decoration: none;
  position: relative;
  .latepoint-icon {
    margin-right: 3px;
    font-size: 10px;
  }
  &.os-loading {
    .latepoint-icon {
      opacity: 0;
    }
    &:before {
      @include loading-circle($brand-primary, 10px);
      left: 5px;
    }
  }
}

.os-iab-version-info {
  color: $color-faded;
  font-size: floor($font-size-base * 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  strong {
    margin-left: 2px;
    color: $headings-color;
  }
  strong + span {
    margin-left: 5px;
    padding-left: 10px;
    border-left: 1px solid $border-color-lightest;
  }
  strong, span, a {
    display: inline-block;
  }
  .os-iab-update-available {
    background-color: #ffe8b1;
    color: #764219;
    margin-right: 5px;
    padding: 0px 3px;
    border-radius: 2px;
    font-weight: $body-font-weight-bold;
  }
}

.latepoint-system-status-w {
  ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    li {
      padding: 5px 0px;
      margin: 0px;
      &:last-child {
        border-bottom: none;
      }
    }
  }
}

.version-and-license-info-w {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  > div {
    flex: 1;
  }
}

.os-notifications-control-bar {
  background-color: #fff;
  display: flex;
  padding: 10px 15px;
  border: 1px solid $border-color-light;
  border-bottom-color: $border-color-strong;
  margin-bottom: 20px;
  align-items: center;
  border-radius: 6px;
  box-shadow: 0px 2px 0px 0px $border-color-lightest;
  .control-bar-option {
    &:last-child {
      margin-left: 20px;
      padding-left: 20px;
      border-left: 1px solid $border-color-lightest;
    }
  }
  .os-form-group.os-form-group-transparent {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    label {
      white-space: nowrap;
      margin-right: 10px;
      font-size: $font-size-base;
    }
  }
}


.os-section-collapsible-wrapper {

  .os-section-collapsible-trigger {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid $border-color-lightest;
    padding: 10px 10px 10px 0;
    h3 {
      margin: 0;
      margin-right: auto;
      font-size: floor($headings-font-size * 0.55);
    }
    .os-collapsible-icon {
      position: relative;
      &:before {
        content: "";
        width: 8px;
        height: 1px;
        background-color: #111;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      &:after {
        content: "";
        width: 1px;
        height: 8px;
        background-color: #111;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
    }
  }
  .os-section-collapsible-inner {
    display: none;
    border-top: 1px solid $border-color-lightest;
  }
  &.is-open {
    .os-section-collapsible-inner {
      display: block;
    }
  }
}


.payment-processor-connect-status-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: $font-size-base;
  .os-loading-spinner {
    position: relative;
    width: 28px;
    height: 28px;
    &:before {
      @include loading-circle($brand-primary, 20px);
    }
  }
  .payment-processor-disconnect-link,
  .payment-processor-refresh-link {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #111;
    span {
      border-bottom: 1px dotted #111;
    }
    &:hover {
      span {
        border-bottom-style: solid;
      }
    }
  }
  .payment-processor-disconnect-link {
    color: #860707;
    position: relative;
    &:focus {
      outline:none;
      box-shadow: none;
    }
    span {
      border-bottom-color: #860707;
    }
    &.os-loading {
      color: transparent;
      span {
        border-bottom-color: transparent;
      }
      &:before {
        @include loading-circle(#860707, 20px);
      }
    }
  }

  .payment-processor-status-charges-disabled,
  .payment-processor-status-charges-enabled,
  .payment-processor-status-connected {
    background-color: #d6ffad;
    color: #2c420e;
    padding: 5px;
    padding-right: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;

  }
  .payment-processor-status-charges-disabled {
    background-color: #ffea9c;
    color: #2d251b;
  }
  .stripe-connect-account-info {
    margin-left: auto;
    padding: 5px;
    background-color: #eee;
    border-radius: 4px;
    font-size: $body-font-size-xs;
    .payment-processor-disconnect-link {
      margin-top: 5px;
    }
  }
  .payment-start-connecting {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: $brand-primary;
    padding: 5px 0 4px;
    font-size: $font-size-base;
    position: relative;
    span {
      border-bottom: 1px dotted $brand-primary;
    }
    &:hover {
      span {
        border-bottom-style: solid;
      }
    }
    &:focus {
      box-shadow: none;
    }
    &.os-loading {
      color: transparent;
      span {
        border-bottom-color: transparent;
      }
      &:before {
        @include loading-circle($brand-primary, 20px);
      }
    }
  }
}




.get-pro-wrapper {
  padding: 30px;
  border: 1px solid #e4e5e7;
  border-radius: $border-radius;
  h4 {
    margin: 0;
    margin-bottom: 10px;
    font-size: $body-font-size-l;
    font-weight: $body-font-weight-black;
  }
  .pro-sub-heading {
    font-size: $body-font-size-m;
    color: $color-faded;
    margin-bottom: 15px;
  }
  .get-pro-wrapper-fields {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 10px;
    .os-form-group {
      flex: 1;
      margin-bottom: 0;
    }
    button {
      flex: 0;
    }
  }
}

.os-premium-features-list {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  .os-premium-feature {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    .feature-icon {
      font-size: 16px;
      margin-bottom: 5px;
      color: $brand-primary;
      text-shadow: 2px -2px 0px #fff;
    }
    .feature-heading {
      font-size: $body-font-size-m;
      font-weight: $body-font-weight-black;
      color: $headings-color;
      margin-bottom: 5px;
    }
    .feature-description {
      color: $color-faded;
      font-size: $body-font-size-xs;
    }
    & + .os-premium-feature {
    }
  }
}

body.latepoint-admin {
  .latepoint-lightbox-w {

    .upgrade-info-btn {
      display: flex;
      align-items: center;
      font-size: $body-font-size-l;
      font-weight: $body-font-weight-black;
      gap: 10px;
      justify-content: center;
      text-decoration: none;
      color: #fff;
      background-color: $brand-primary;
      cursor: pointer;
    }
  }
}


.latepoint-full-panel-w {
  .instant-booking-preview-and-settings {
    display: flex;
    flex: 1;
  }
  .instant-booking-settings-wrapper {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
  }
  .instant-booking-preview-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid $border-color-main;
  }
  .instant-preview-iframe {
    width: 100%;
    height: 100%;
  }

  .instant-booking-settings-iframe-wrapper {
    flex: 1;
  }
  .instant-booking-preview-heading {
    padding: 10px 20px;
    font-weight: $headings-font-weight-bold;
    font-size: $headings-font-size-m;
    border-bottom: 1px solid $border-color-main;
    display: flex;
    align-items: center;
    .latepoint-instant-preview-close-trigger {
      font-size: 18px;
      padding: 5px;
      background-color: #fff;
      border-radius: 6px;
      text-decoration: none;
      color: $headings-color;
      line-height: 1;
      cursor: pointer;
      &:hover {
        background-color: #eee;
      }
    }
    h2 {
      margin: 0;
      flex: 1;
      padding: 10px 0;
    }
  }
  .instant-booking-preview-settings-content {
    padding: 20px;
    flex: 1;
    overflow: auto;
  }
  .instant-booking-preview-settings-buttons {
    display: flex;
    gap: 10px;
    .latepoint-btn {
      display: flex;
      gap: 10px;
    }
  }
  .preview-settings-label {
    font-size: $body-font-size-m;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .preview-background-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 22px;
    .preview-background-option {
      height: 36px;
      border-radius: 6px;
      box-shadow: 0 2px 6px -2px rgba(0,0,0,0.1);
      cursor: pointer;
      &:hover {
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px $brand-primary;
      }
      &.selected {
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px $brand-primary;
      }
    }
  }
}