/*****************************************************************************************************
* Plugin Custom CSS
******************************************************************************************************/

/*
All In One WP Security
---------------------------------------------------------------------------------------------------- */

.aiowps-site-lockout-box {
  border: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  max-width: 600px;
  padding: 30px;
}

.aiowps-site-lockout-msg h1 {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
}

.aiowps-site-lockout-msg,
.aiowps-site-lockout-msg a {
  color: #fff;
  font-size: 21px;
  font-weight: normal;
  text-align: center;
}

.aiowps-site-lockout-msg a {
  text-decoration: underline;
}

.aiowps-site-lockout-msg footer a {
  border-bottom: 1px solid;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  transition: all .2s ease-in-out;
}

.aiowps-site-lockout-msg footer a:hover {
  color: silver;
}


/*
bub Modal
---------------------------------------------------------------------------------------------------- */

/* Modal: Search 
--------------------------------------------- */

/* The form sits a little above the center of the centered modal, since the
   live search results open below it. */

.bubmodal-search .search-form {
  overflow: visible;
  position: relative;
  transform: translateY(-70%);
}

/* Narrow screens: no lift, since bub Modal starts the content at the top, 25px
   below the close button. */

@media screen and (max-width: 800px) {

  .bubmodal-search .search-form {
    transform: none;
  }
}

/* Live search results: inside the form (core/includes/plugin.php), which its
   position makes their containing block, while the plugin sets left and top
   from the field's offset on the page. Pinned under the field instead, 5px
   below as the plugin's default offset. The text takes the page's color, as
   outside the modal, instead of the light text of the dark layer, which bub
   Modal's links inherit too. */

.bubmodal-search .relevanssi-live-search-results {
  color: var(--body-color-def);
  left: 0 !important;
  top: calc(100% + 5px) !important;
}

/* The underline light like the text: the brand color is ink, which the dark
   layer hides. */

.bubmodal-search .search-form input[type=search] {
  background: transparent;
  border: none;
  border-bottom: 3px solid #e5e5e5;
  box-shadow: none;
  color: #e5e5e5;
  font-size: 45px;
  padding: 10px 10px 5px 3px;
  -webkit-appearance: none !important;
  width: 100%;
}

.bubmodal-search .search-form input[type="submit"] {
  display: none;
}

.bubmodal-search ::-webkit-input-placeholder {
  color: #e5e5e5;
}
.bubmodal-search ::-moz-placeholder {
 color: #e5e5e5;
}
.bubmodal-search :-ms-input-placeholder {
  color: #e5e5e5;
}

@media screen and (max-width: 600px) {

  .bubmodal .search-form input[type=search] {
    font-size: 30px;
  }
}


/* Modal: Newsletter and Opt-in Confirmation
--------------------------------------------- */

/* A white box on a veil of the design's paper, in place of the dark box on
   bub Modal's dark layer, which was too unfriendly (user, 2026-10-19): the
   heading in the serif, the note in the reading serif, the field and the
   button as the site's other forms (Fluent Forms below). The close button's
   X takes the layer's text color. The confirmation of the opt-in, the second
   step, looks the same. */

.bubmodal-newsletter,
.bubmodal-optin-confirmation {
  --bubmodal-box-background: #fff;
  --bubmodal-box-color: var(--body-color-def);
  --bubmodal-cover-background: rgb(246 243 238 / 0.94);
  --bubmodal-cover-color: var(--body-color-def);
}

.bubmodal-newsletter .bubmodal__content,
.bubmodal-optin-confirmation .bubmodal__content {
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 24px 48px -20px rgb(0 0 0 / 0.3);
  max-width: 480px;
  padding: 44px 40px 40px;
  width: 100%;
}

.bubmodal-newsletter .bubmodal__title,
.bubmodal-optin-confirmation .bubmodal__title {
  margin: 0 0 14px;
  text-align: left;
}

.bubmodal-newsletter .bubmodal__title h2,
.bubmodal-optin-confirmation .bubmodal__title h2 {
  font: var(--display-font-def);
  font-size: 28px;
  line-height: 1.15;
}

.bubmodal-newsletter .bubmodal__before,
.bubmodal-optin-confirmation .bubmodal__main {
  font: var(--alt-font-def);
  font-size: 18px;
  line-height: 1.5;
}

.bubmodal-newsletter .bubmodal__before {
  margin: 0 0 24px;
}

.bubmodal-newsletter .bubmodal__before a {
  color: inherit;
  text-decoration: underline;
}

.bubmodal-newsletter .fluentform {
  margin: 0 !important;
}

.bubmodal-newsletter .fluentform .ff-el-group {
  margin: 0 0 22px;
}

.bubmodal-newsletter .ff-btn-submit {
  width: 100%;
}

@media screen and (max-width: 500px) {

  .bubmodal-newsletter .bubmodal__content,
  .bubmodal-optin-confirmation .bubmodal__content {
    padding: 36px 24px 28px;
  }
}


/*
Complianz
---------------------------------------------------------------------------------------------------- */

#cmplz-document {
  background-color: #fff !important;
  margin: 0 auto 40px !important;
  padding: 25px min(25px, 5%) 15px !important;
}

#cmplz-document h2 {
  margin-top: 25px;
}

#cmplz-document P {
  font-size: 1rem;
}

/* Blocked Iframe Content */

.cmplz-blocked-content-container {
  margin-bottom: 30px !important;
}

/* Page Builder */

.fl-module-content:has(.cmplz-blocked-content-container)::after {
  height: 0 !important;
}


/*
Fluent Forms
---------------------------------------------------------------------------------------------------- */

/* Form Default Styling: labels in small capitals, fields with an underline
   only, the button solid as the site's others (design, 2026-10-18). The text
   of every field is inset from its edges, as in the framed multi-line fields:
   the keyboard focus outline, drawn 3px inside the field (default.css),
   covered the first letter of fields without an inset (user, 2026-10-21). */

.fluentform .ff-el-input--label label {
  color: var(--body-color-acc);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fluentform .ff-el-form-control {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--body-color-def);
  border-radius: 0;
  box-shadow: none;
  padding: 0.625em 0.75em;
}

.fluentform .ff-el-form-control:focus {
  border-bottom-width: 2px;
  box-shadow: none;
  outline: none;
  padding-bottom: calc(0.625em - 1px);
}

/* Multi-line fields in a thin frame, the text at its top left: an underline
   alone left their first line far above it (user, 2026-10-19). On focus the
   frame thickens inside, so the text does not move. */

.fluentform textarea.ff-el-form-control {
  border: 1px solid var(--body-color-def);
}

.fluentform textarea.ff-el-form-control:focus {
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 1px var(--body-color-def);
  padding-bottom: 0.625em;
}

/* A field with an error takes the wine accent, its line and the message
   below it (user, 2026-10-21). Fluent Forms' own stylesheet, which loads
   after this one on pages without a form in the content, sets both at the
   same specificity, so these rules and the messages' below have one class
   more than its rules. */

.fluentform .ff-el-group.ff-el-is-error .ff-el-form-control {
  border-color: var(--brand1-color-acc);
}

.fluentform .ff-el-group .error.text-danger {
  color: var(--brand1-color-acc);
  font-size: 0.8125rem;
  line-height: 1.4;
  margin-top: 0.375rem;
}

.fluentform .ff_submit_btn_wrapper {
  margin: 0 !important;
}

.fluentform .ff-btn-submit {
  background: var(--theme2-background-def) !important;
  border-radius: 0;
  color: var(--theme2-color-def);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 16px 24px;
  text-transform: uppercase;
  transition: all 150ms;
}

.fluentform .ff-btn-submit:hover {
  filter: var(--theme2-filter-acc);
  opacity: 1;
}

/* The success message and the form's general errors, which print below it,
   in a box of the design's paper as the contact cards, the errors with a rule
   and text in the wine accent; the green box did not fit (user, 2026-10-21).
   The error's close sign moves to the right end. */

.fluentform .ff-message-success,
.fluentform .ff-errors-in-stack .error {
  background: var(--body-background-dk1);
  border: 0;
  box-shadow: none;
  color: var(--body-color-def);
  font-size: 1rem;
  line-height: 1.5;
  padding: 1.125em 1.5em;
}

.fluentform .ff-message-success,
.fluentform .ff-errors-in-stack {
  margin-top: 1.25rem;
}

.fluentform .ff-message-success p:last-child {
  margin-bottom: 0;
}

.fluentform .ff-errors-in-stack .error {
  border-left: 2px solid var(--brand1-color-acc);
  color: var(--brand1-color-acc);
  display: flex;
  gap: 1em;
}

.fluentform .ff-errors-in-stack .error + .error {
  margin-top: 0.5rem;
}

.fluentform .ff-errors-in-stack .error-clear {
  cursor: pointer;
  margin-left: auto;
  order: 1;
}

/* Custom Classes */

.fluentform .bub-privacy-note {
  font-size: 0.8rem;
  line-height: 1.3;
  margin: -15px 0 20px !important;
  padding: 0 0 0 5px;
}

.fluentform .bub-privacy-note p:last-child {
  margin: 0;
}

/* Landing Pages */

/* Fluent Forms' own page, such as the one after confirming a double opt-in:
   neutral greys and white without project colors, so it fits every project
   unchanged (user, 2026-10-22; before, the dark blue of devbuch's old
   design). */

body.ff_landing_page_body {
  background-color: #f5f5f5 !important;
  border-top-color: #f5f5f5 !important;
  color: #222;
  padding: 0 10px !important;
}

.ff_landing_form {
  background: #fff !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  color: #222 !important;
  min-width: 270px;
}

.ff_landing_form .newsletter-success-links {
  flex-flow: row wrap;
  margin: 20px -3px 10px;
}

.ff_landing_form .newsletter-success-links a {
  background: #222;
  color: #fff;
  display: inline-block;
  font-size: 0.95rem;
  margin: 3px;
  padding: 12px 18px;
  transition: all 200ms;
}

.ff_landing_form .newsletter-success-links a:hover {
  background: #444;
  color: #fff;
}


/*
Ninja Tables
---------------------------------------------------------------------------------------------------- */

/* HTML Field (paragraphs added via JS) */

.ninja_table_wrapper .bub-has-paragraphs p:not(:last-child) {
  margin-bottom: 5px;
}


/*
Relevanssi Live Ajax Search
---------------------------------------------------------------------------------------------------- */

.relevanssi-live-search-results {
  border-radius: 0 !important;
  z-index: 9999998 !important;
}

.relevanssi-live-search-result p {
  font-size: 1em !important;
  padding: 0 !important;
}

.relevanssi-live-search-result a {
  padding: 0.8em 1em !important;
}

.relevanssi-live-search-result-status p {
  font-style: italic !important;
  padding: 0.8em 1em !important;
}

.relevanssi-live-search-results .rlv-has-spinner {
  border-color: #777;
  border-right-color: transparent;
}

.relevanssi-live-search-results .rlv-has-spinner::after {
  background-color: #777;
}