/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* WooCommerce primary action buttons → match the site's primary (theme style)
   button. Covers the single product add-to-cart button plus the cart "Proceed
   to checkout" (a.checkout-button) and checkout "Place order" (#place_order)
   CTAs. WooCommerce flags these primary actions with the .alt class. Also
   covers the "View cart" (Näytä ostoskori) button inside the success notice. */
.single_add_to_cart_button,
a.button[data-product_id],
a.checkout-button,
#place_order,
.woocommerce-message a.button {
  justify-content: center;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.2;
  padding: 0.75em 1.5rem;
  background-color: #121c1d;
  color: #fff;
  border: 1px solid #121c1d;
  border-radius: 9999px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.single_add_to_cart_button:hover,
.single_add_to_cart_button:focus-visible,
a.button[data-product_id]:hover,
a.button[data-product_id]:focus-visible,
a.checkout-button:hover,
a.checkout-button:focus-visible,
#place_order:hover,
#place_order:focus-visible,
.woocommerce-message a.button:hover,
.woocommerce-message a.button:focus-visible {
  background-color: oklch(54% 0.07 188);
  border-color: oklch(54% 0.07 188);
  color: #fff;
}

.btn-primary,
.brxe-button.bricks-button.bricks-background-primary,
.single_add_to_cart_button,
a.button[data-product_id],
a.checkout-button,
#place_order,
.woocommerce-message a.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.btn-primary::after,
.brxe-button.bricks-button.bricks-background-primary::after,
.single_add_to_cart_button::after,
a.button[data-product_id]::after,
a.checkout-button::after,
#place_order::after,
.woocommerce-message a.button::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentColor;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M5 12h14m-6-6 6 6-6 6"/></svg>') center / contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M5 12h14m-6-6 6 6-6 6"/></svg>') center / contain no-repeat;
  transition: transform 0.25s ease;
}

.btn-primary:hover::after,
.btn-primary:focus-visible::after,
.brxe-button.bricks-button.bricks-background-primary:hover::after,
.brxe-button.bricks-button.bricks-background-primary:focus-visible::after,
.single_add_to_cart_button:hover::after,
.single_add_to_cart_button:focus-visible::after,
a.button[data-product_id]:hover::after,
a.button[data-product_id]:focus-visible::after,
a.checkout-button:hover::after,
a.checkout-button:focus-visible::after,
#place_order:hover::after,
#place_order:focus-visible::after,
.woocommerce-message a.button:hover::after,
.woocommerce-message a.button:focus-visible::after {
  transform: translateX(4px);
}

/* WooCommerce "added to cart" success notice → theme look: white box with a
   dark border and dark text (instead of the default light-green banner). The
   "Näytä ostoskori" button inside it is styled as a primary button above. */
.woocommerce-notices-wrapper .woocommerce-message {
  background-color: #fff;
  color: #121c1d;
  border: 1px solid #121c1d;
  border-radius: 6px;
}

/* Product Add-Ons → hide the live order-summary / grand-total box */
#product-addons-total {
  display: none;
}

/* ---------- Product Add-Ons: cleaner add-on group ---------- */

/* Strip the default <fieldset> chrome so the group blends into the page.
   (The plugin's own CSS isn't loaded in the Bricks template preview, so the
   raw fieldset border/legend show up there — these rules neutralise it.) */
.woocommerce .wc-pao-addons-container .wc-pao-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Group legend → a plain section title */
.woocommerce .wc-pao-addons-container .wc-pao-legend {
  display: block;
  float: none;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: #121c1d;
}

/* Each option = an inline checkbox + label row, with a subtle divider */
.woocommerce .wc-pao-addons-container .wc-pao-addon-wrap {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.woocommerce .wc-pao-addons-container .wc-pao-addon-wrap > div {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px solid #ececec;
}
.woocommerce .wc-pao-addons-container .wc-pao-addon-wrap > div:first-child {
  border-top: 0;
}

/* Checkbox / radio: a touch larger, brand accent, no stray margins */
.woocommerce .wc-pao-addon .wc-pao-addon-wrap .wc-pao-addon-checkbox,
.woocommerce .wc-pao-addon .wc-pao-addon-wrap .wc-pao-addon-radio {
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #121c1d;
  cursor: pointer;
}

/* Per-option info icon + hover/focus/tap tooltip. The description (authored via
   the product meta box) is hidden until the "i" is hovered, keyboard-focused, or
   tapped. The icon is focusable (tabindex=0) so it works on touch and keyboard;
   the plain-text description is also exposed to screen readers via aria-label. */
.woocommerce .wc-pao-addons-container .wc-pao-addon-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: help;
}
.woocommerce .wc-pao-addons-container .wc-pao-addon-info__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  border: 1px solid #121c1d;
  border-radius: 50%;
  color: #121c1d;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
.woocommerce .wc-pao-addons-container .wc-pao-addon-info:hover .wc-pao-addon-info__icon,
.woocommerce .wc-pao-addons-container .wc-pao-addon-info:focus .wc-pao-addon-info__icon {
  background-color: #121c1d;
  color: #fff;
}

/* The tooltip bubble */
.woocommerce .wc-pao-addons-container .wc-pao-addon-desc {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 20;
  width: max-content;
  max-width: 260px;
  padding: 0.55rem 0.7rem;
  background-color: #121c1d;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: left;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
/* little arrow pointing down to the icon */
.woocommerce .wc-pao-addons-container .wc-pao-addon-desc::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #121c1d;
}
/* tooltip handles rich (WYSIWYG) content cleanly */
.woocommerce .wc-pao-addons-container .wc-pao-addon-desc > :first-child {
  margin-top: 0;
}
.woocommerce .wc-pao-addons-container .wc-pao-addon-desc > :last-child {
  margin-bottom: 0;
}
.woocommerce .wc-pao-addons-container .wc-pao-addon-info:hover .wc-pao-addon-desc,
.woocommerce .wc-pao-addons-container .wc-pao-addon-info:focus .wc-pao-addon-desc {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Label: readable text, with the price muted */
.woocommerce .wc-pao-addon .wc-pao-addon-wrap label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  color: #121c1d;
  cursor: pointer;
}
.woocommerce .wc-pao-addons-container .wc-pao-addon-price {
  color: #6b7280;
  font-size: 0.9em;
}

/* Hide the empty required-add-ons validation bar (blue box in the preview);
   it still appears when it actually holds an error message. */
#required_addons_validation_message:empty {
  display: none;
}

/* ---------- Add-to-cart row: button + "got questions?" link ---------- */

/* The wrapper is a flex row holding the whole add-to-cart form (add-ons +
   button) and the contact text-link. By default the row stretches, so the
   link centred itself against the tall add-ons block and floated up to the
   right, out of line with the button. Bottom-align the items so the link sits
   on the same baseline as the button, right after it. */
#brxe-housdy {
  align-items: flex-end;
}

/* Keep the contact link on a single line instead of letting flex squeeze it
   into a two-line column. */
#brxe-ljhfff {
  white-space: nowrap;
}