/* Bon Services plugin frontend stylesheet
*
 */

:root {
  color-scheme: light dark;

  --light: light-dark(#f2f2f2, #1b2028);
  --main: #103a60;
  --white: light-dark(#ffffff, #000);
  --accent: #1f71b1;
  --text: light-dark(#24292d, #eee);
  --plus: url("../img/add-ico.svg");
}
@media (prefers-color-scheme: dark) {
  body.nd-auto {
  --plus: url("../img/add-ico-white.svg");
  }
}
body.nd-dark, body.nd-contrast {
  --plus: url("../img/add-ico-white.svg");
  }

.form-area {
  margin: 20px 0;
}

.service-form {
  max-width: calc(100vw - 2em);
}

.service-form label,
.service-form input,
.service-form textarea {
  width: 450px;
  max-width: calc(100vw - 5em);
  display: block;
  padding: 5px;
  font-size: 14px;
}

label {
  font-weight: normal;
}
.service-form fieldset {
  position: relative;
  margin-bottom: 3em;
  background-color: var(--light, #f2f2f2);
  border-radius: unset;
  border: 1px solid;
}
.service-form > fieldset:has(> legend),
.service-form > .row > fieldset:has(> legend) {
  margin-top: 4em;
}
.service-form > fieldset > legend,
.service-form > .row > fieldset > legend {
  font-weight: 700;
  padding: 0.5em 1.5em;
  position: absolute;
  background-color: var(--light, #f2f2f2);
  border: 1px solid;
  border-top: 3px solid var(--main, #103a60);
  border-bottom-color: transparent;
  max-width: fit-content;
  left: -1px;
  top: calc(-3em + 0.3em);
}
body.nd-dark, body.nd-contrast {
  .service-form > fieldset > legend, .service-form > .row > fieldset > legend {
    border-top-color: var(--text);
  }
}
@media (prefers-color-scheme: dark) {
  .nd-auto {
    .service-form > fieldset > legend, .service-form > .row > fieldset > legend {
      border-top-color: var(--text);
    }
  }
}

.service-form .no-fieldset {
  border: 0;
  margin-top: 1.25em;
  margin-left: 0;
}
.service-form .submit-button {
  position: relative;
  padding: 0.5em;
  background: var(--main, #103a60);
  color: var(--white, #ffffff);
  border: 3px solid var(--main, #103a60);
  margin: 1em 0;
  font-weight: 700;
  white-space: normal;
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  .nd-auto {
    & .service-form .submit-button {
      color: var(--text);
      border-color: var(--text);
    }
  }
}
.nd-dark, .nd-contrast {
  & .service-form .submit-button {
    color: var(--text);
    border-color: var(--text);
  }
}
.service-form button.submit-button {
  padding-left: 3em;
}
.service-form button.submit-button::before {
  content: '✉';
  display: inline-block;
  padding: 0 0.3em;
  margin: 0;
  text-align: center;
  position: absolute;
  font-size: 1.5em;
  left: -3px;
  line-height: calc(1.5em + 4px);
  border-right: 1px solid;
  top: -3px;
}

.flex {
  display: flex;
}

input.error {
  outline: 2px dashed #d51c1c;
  outline-offset: 2px;
}
.service-form :focus {
  outline: 2px solid #3a5598;
}

.service-form .inline {
  display: inline-block;
  width: auto;
}

#form2 .wrapper {
  display: none;
  background: var( --light, #f2f2f2);
  padding: 10px 25px 15px 10px;
  border: 2px solid #093c65;
  border-radius: 5px;
}
.inline-block {
  display: inline-block !important;
}
a.loadButton {
  text-decoration: none;
  background-color: var(--light, #f2f2f2);
  color: var(--text, #24292d);
  padding: 1em 0;
  padding-left: 3.5em;
  border: 1px solid var(--white, #fff);
  display: block;
  width: 25em;
  margin: 1.7em;
  background-image: var(--plus);
  background-repeat: no-repeat;
  background-position: 3px;
  background-size: 3.1em;
  font-size: 0.85em;
}
@media (prefers-color-scheme: dark) {
  .nd-auto {
    & & a.loadButton {
      color: var(--text);
      border-color: var(--text);
    }
  }
}
.nd-dark, .nd-contrast {
  & a.loadButton {
    color: var(--text);
    border-color: var(--text);
  }
}

.sr-text {
  position: absolute;
  left: -10000em;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
}
.success {
  color: green;
  border: 1px solid green;
  padding: 8px;
  border-radius: 5px;
}
.alert-error {
  border: 1px solid #ebccd1;
  padding: 8px;
  border-radius: 5px;
}
.wait-overlay {
  position: relative;
  top: -4.1em;
  background: #fff;
  left: 3.04em;
}
.wait-overlay.submit-wait {
  top: -0.3em;
  left: 2em;
}
.wait-overlay::after {
  content: '';
  width: 3em;
  height: 3em;
  position: absolute;
  top: calc(50% - 1.5em);
  left: calc(50% - 1.5em);
  z-index: 100;
  background-color: var(--light, #f2f2f2);
  animation: 14s linear infinite spin;
  border-radius: 50% 50% 50% 50%;
  border: 0.5em solid var(--accent, #1f71b1);
  border-top-color: transparent;
  outline: 6px solid var(--white, #ffffff);
  outline-offset: -1.4em;
  background-image: conic-gradient(from -5deg, transparent, var(--accent, #1f71b1) 95%, white 95%);
  background-repeat: no-repeat;
  font-size: 0.87em;
}
.wait-overlay {
  display: none;
}

.new_button_container {
  position: relative;
}
#wait-container {
}

#form2 .row > .row {
  margin-left: 0;
}

#contrast-1 #form2 .wrapper,
#contrast-2 #form2 .wrapper {
  background: transparent;
}

#contrast-1 #form2 .loadButton {
  color: #000;
}

#contrast-2 #form2 .loadButton {
  background-color: transparent;
}