/**
 * Cookie consent banner and settings panel.
 * Paired with catalog/view/javascript/legalconsent.js.
 *
 * Deliberately self-contained and prefixed `asc-`: the theme is Bootstrap 3 with a
 * mega-menu OCMOD on top, and borrowing its classes would mean the banner changes
 * whenever the theme does. Nothing here overrides a theme rule.
 *
 * Accept and reject share one class, `asc-btn-primary`, so they cannot drift apart
 * visually. A reject button that is quieter than accept is the dark pattern EDPB
 * guidance objects to, and the cheapest way to never do it by accident is to give
 * them the same styles.
 */

.asc-consent {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  color: #222222;
  border-top: 2px solid #23a1d1;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  font-size: 14px;
  line-height: 1.5;
  max-height: 85vh;
  overflow-y: auto;
}

.asc-consent.asc-consent-visible {
  display: block;
}

.asc-consent-banner,
.asc-consent-panel {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 16px;
}

/* The settings panel stays out of the way until the visitor asks for it. */
.asc-consent-panel {
  display: none;
  border-top: 1px solid #e4e7ea;
}

.asc-consent.asc-consent-open .asc-consent-panel {
  display: block;
}

.asc-consent-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 15px;
}

.asc-consent-text {
  margin: 0 0 12px;
}

.asc-consent-text a {
  color: #23a1d1;
  text-decoration: underline;
}

.asc-consent-actions {
  display: block;
}

.asc-btn {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 9px 18px;
  border: 1px solid #23a1d1;
  border-radius: 3px;
  background: #ffffff;
  color: #23a1d1;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* Accept and reject both use this. Same size, same colour, same weight. */
.asc-btn-primary {
  background: #23a1d1;
  color: #ffffff;
}

.asc-btn-primary:hover,
.asc-btn-primary:focus {
  background: #1c86ae;
  border-color: #1c86ae;
  color: #ffffff;
}

.asc-btn-link {
  border-color: transparent;
  background: transparent;
  color: #555555;
  text-decoration: underline;
  font-weight: 400;
}

.asc-btn-link:hover,
.asc-btn-link:focus {
  color: #222222;
}

/* A visible focus ring, because the banner can be the first thing a keyboard or
   screen-reader user meets on the page. */
.asc-btn:focus {
  outline: 2px solid #0b6d92;
  outline-offset: 2px;
}

.asc-consent-row {
  padding: 10px 0;
  border-bottom: 1px solid #f0f2f4;
}

.asc-consent-row:last-of-type {
  border-bottom: 0;
}

.asc-consent-row-head {
  display: block;
  font-weight: 600;
  margin: 0 0 4px;
  cursor: pointer;
}

.asc-consent-row-head input {
  margin-right: 8px;
  vertical-align: middle;
}

.asc-consent-row-head input:disabled + span {
  color: #777777;
}

.asc-consent-row-text {
  margin: 0;
  padding-left: 24px;
  color: #555555;
  font-size: 13px;
}

/* The notice shown beside reCAPTCHA when form security has been refused. It ships
   with the `hidden` attribute set and the script removes it; this rule is explicit so
   a theme rule that gives divs a display value cannot defeat `hidden`. */
.asc-consent-gate[hidden] {
  display: none;
}

.asc-consent-gate {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid #f0ad4e;
  border-left-width: 4px;
  border-radius: 3px;
  background: #fcf8e3;
  color: #6b5312;
  font-size: 14px;
}

.asc-consent-gate p {
  margin: 0 0 8px;
}

.asc-consent-gate p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   The two injected legal notices:
     .asc-product-legal  the conformity guarantee, under Add to Cart
                         (legal_product_notice.ocmod.xml)
     .asc-form-notice    what happens to contact-form data, above Submit
                         (legal_form_notice.ocmod.xml)

   They share one rule because they are the same thing visually, and sharing it
   means they cannot drift apart. Both live in this file rather than in their own
   stylesheets because this one is already loaded on every page by
   legal_consent.ocmod.xml, and another stylesheet for ten lines would cost an
   extra request on every page view - which works directly against backlog
   item 13.
   --------------------------------------------------------------------------- */
.asc-product-legal,
.asc-form-notice {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #e4e7ea;
  border-left: 3px solid #23a1d1;
  border-radius: 3px;
  background: #f7f9fa;
  color: #444444;
  font-size: 13px;
  line-height: 1.45;
}

.asc-product-legal p,
.asc-form-notice p {
  margin: 0 0 6px;
}

.asc-product-legal p:last-child,
.asc-form-notice p:last-child {
  margin-bottom: 0;
}

.asc-product-legal a,
.asc-form-notice a {
  color: #23a1d1;
  text-decoration: underline;
}

/* The made-to-order variant, on the belts that carry no withdrawal right
   (legal_product_notice.ocmod.xml v1.1). It reuses .asc-product-legal and only
   recolours, so the two notices cannot drift apart in spacing or type size.

   Amber rather than blue because this one tells the buyer something they lose by
   ordering carelessly, and it borrows the consent gate's palette so the site has
   one visual language for "read this before you act". It is deliberately not red:
   the product is perfectly fine to buy, the size just has to be right. */
/* The heavy-shipping variant, on the electrodes, welding wire and rods, and in
   the cart and at confirmation when one of them is in the order
   (shipping_heavy.ocmod.xml). Same amber as the made-to-order notice, same
   reason: it tells the buyer a cost is coming that the page cannot show yet,
   which is the same "read this before you act" as above, so it gets the same
   visual language rather than a third palette.

   The two can never appear on the same product page anyway - the heavy branches
   417, 420 and 423 hold no made-to-order goods - so there is nothing to tell
   apart, and sharing the rule keeps them from drifting. */
.asc-product-mto,
.asc-product-ship {
  border-color: #f0ad4e;
  border-left-color: #f0ad4e;
  background: #fcf8e3;
  color: #6b5312;
}

.asc-product-mto a,
.asc-product-ship a {
  color: #8a6d3b;
}

/* In the cart and at confirmation the notice sits between a table and the
   buttons rather than under Add to Cart, so it needs air on both sides and the
   full width of the content column. */
.asc-cart-ship {
  margin: 0 0 20px;
}

/* Phones: the buttons go full width so neither is easier to hit than the other. */
@media (max-width: 600px) {
  .asc-consent {
    font-size: 13px;
    max-height: 90vh;
  }

  .asc-btn {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 12px 16px;
    text-align: center;
  }
}