/**
 * Copyright since 2019 Kaudaj
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to info@kaudaj.com so we can send you a copy immediately.
 *
 * @author    Kaudaj <info@kaudaj.com>
 * @copyright Since 2019 Kaudaj
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 */

/* The product page widget. The template borrows the buy block's classes, so
   each theme styles the label, the quantity and the button as it styles its
   own buy block; what is set here only keeps the two on one line and the
   block clear of the text above it. */
.kjpr-widget {
  margin: 1rem 0 1.25rem;
}

/* The label takes the look of the span around it (the buy block's own). */
.kjpr-widget__label {
  display: block;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}

.kjpr-widget .product-quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.kjpr-widget .qty,
.kjpr-widget .add {
  float: none;
}

/* Room between the quantity field and the button. */
.kjpr-widget .qty {
  margin-right: 1rem;
}

.kjpr-widget__input {
  width: 5.5rem;
  min-height: 2.75rem;
  border-radius: 0;
  background-color: #fff;
  color: inherit;
  text-align: center;
}

.kjpr-widget__button {
  font-weight: 700;
  white-space: normal;
}

/* The price request page. Themes without Bootstrap's validation classes
   still mark a refused field and show its error. */
.kjpr__form {
  max-width: 40rem;
}

.kjpr__field .form-control.is-invalid {
  border-color: #c62828;
}

.kjpr__error {
  display: block;
  margin-top: 0.25rem;
  color: #c62828;
  font-size: 0.875em;
}

.kjpr__optional {
  display: block;
}

/* The honeypot: out of sight and out of the tab order, never display:none
   (some robots skip hidden fields). */
.kjpr__hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* The product search: the suggestions float under the field. */
.kjpr__field {
  position: relative;
}

.kjpr__suggestions {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin: 0;
  max-height: 16rem;
  overflow-y: auto;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kjpr__suggestions[hidden] {
  display: none;
}

.kjpr__suggestion {
  cursor: pointer;
}

.kjpr__suggestion.active,
.kjpr__suggestion:hover {
  background-color: #f1f1f1;
}

/* The maximal quantity, as on a product page (the themes style
   .product-maximal-quantity there; this is the same look where they do not). */
.kjpr__maximal,
.kjpr-widget__maximal {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-weight: 700;
  color: #eb5757;
  border: 2px solid #eb5757;
  border-radius: 0.5rem;
}

.kjpr__maximal[hidden] {
  display: none;
}