/**
* 2010-2026 SwissGeek | Web Developer Freelance
*
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 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/OSL-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 license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https:// devdocs.prestashop.com/ for more information.
*
* @Module		SGK Reassurance
* @Description	Reassurance blocks with icons, links and tooltips on the product page, in the cart and checkout, under the header or around the footer, for every product or chosen categories. Takes over the blocks of the native Customer reassurance module.
* @Version		1.2.0
* @Copyright	SwissGeek | Web Developer Freelance <https://swissgeek.dev/>
* @support		Support Requests <https://admin.swissgeek.dev/forms/ticket?styled=1&with_logo=1>
* @Blog			Breaking News <https://news.swissgeek.dev/> <https://news.prestageek.ch/>
* @Addons		Developments <https://prestageek.ch/> <https://add.swissgeek.dev/>
*
* @license		http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*				Valid for 1 website (or project) for each purchase of license International Registered 
*				Trademark & Property of SwissGeek. More information on <https://swissgeek.dev/license/>
*/

/**
 * SGK Reassurance — front office. Theme agnostic: colours and radii come from the SwissGeek
 * theme tokens when they exist, with neutral fallbacks for any other theme. The Design tab of
 * the module sets the --sgkre-* custom properties and the sgkre--* classes below; every value
 * it leaves empty keeps the theme value (light and dark modes alike).
 */

.sgkre {
  --sgkre-icon-color: var(--sgkre-icon, var(--sgk-red, #d7141c));
  --sgkre-surface: var(--sgkre-bg, var(--sgk-surface-2, #f6f6f8));
  --sgkre-line: var(--sgkre-border-color, var(--sgk-line, #e6e7eb));
  --sgkre-title: var(--sgkre-title-color, var(--sgk-graphite, #2c2f38));
  --sgkre-text: var(--sgkre-text-color, var(--sgk-muted, #6b6f7a));
  --sgkre-radius: var(--sgkre-radius-set, var(--sgk-radius, 10px));
  --sgkre-accent: 0 0 0 0 transparent;
  --sgkre-drop: 0 0 0 0 transparent;
  margin: 0 0 1.25rem;
}

.sgkre__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sgkre__cell {
  display: flex;
  min-width: 0;
  margin: 0;
}

.sgkre__item {
  display: flex;
  flex: 1 1 auto;
  gap: 0.625rem;
  align-items: flex-start;
  min-width: 0;
  padding: 0.875rem;
  line-height: 1.3;
  color: inherit;
  text-decoration: none;
  background: var(--sgkre-surface);
  border: var(--sgkre-border-width, 1px) solid var(--sgkre-line);
  border-radius: var(--sgkre-radius);
  box-shadow: var(--sgkre-accent), var(--sgkre-drop);
}

.sgkre__item--link {
  transition: border-color 0.15s ease;
}

.sgkre__item--link:hover,
.sgkre__item--link:focus-visible {
  color: inherit;
  text-decoration: none;
  border-color: var(--sgkre-icon-color);
}

.sgkre__item--link:focus-visible {
  outline: 2px solid var(--sgkre-icon-color);
  outline-offset: 2px;
}

.sgkre__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--sgkre-icon-size, 2.25rem);
  height: var(--sgkre-icon-size, 2.25rem);
  max-width: 100%;
  color: var(--sgkre-icon-color);
}

.sgkre__icon .sgkre-svg,
.sgkre__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sgkre__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.sgkre__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sgkre-title);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.sgkre__text {
  font-size: 0.75rem;
  color: var(--sgkre-text);
}

.sgkre--notext .sgkre__text {
  display: none;
}

/* Title hidden: still read by screen readers, so that a link keeps its name */
.sgkre--notitle .sgkre__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Design tab ─────────────────────────────────────────────────────── */

.sgkre--border-dashed .sgkre__item {
  border-style: dashed;
}

.sgkre--border-dotted .sgkre__item {
  border-style: dotted;
}

.sgkre--border-none .sgkre__item {
  border-color: transparent;
}

.sgkre--accent-top {
  --sgkre-accent: inset 0 var(--sgkre-accent-width, 3px) 0 0 var(--sgkre-accent-color, var(--sgkre-icon-color));
}

.sgkre--accent-bottom {
  --sgkre-accent: inset 0 calc(-1 * var(--sgkre-accent-width, 3px)) 0 0 var(--sgkre-accent-color, var(--sgkre-icon-color));
}

.sgkre--accent-left {
  --sgkre-accent: inset var(--sgkre-accent-width, 3px) 0 0 0 var(--sgkre-accent-color, var(--sgkre-icon-color));
}

.sgkre--shadow-soft {
  --sgkre-drop: 0 4px 14px -6px rgba(0, 0, 0, 0.18);
}

.sgkre--shadow-strong {
  --sgkre-drop: 0 12px 30px -10px rgba(0, 0, 0, 0.32);
}

/* Tinted shape behind the icon: the size setting is the size of the shape, the icon takes
   62 % of it. The shape stays round when a narrow block makes it shrink. */
.sgkre--icon-circle .sgkre__icon,
.sgkre--icon-rounded .sgkre__icon {
  width: var(--sgkre-icon-size, 3.25rem);
  height: auto;
  aspect-ratio: 1 / 1;
  background: var(--sgkre-icon-bg, rgba(127, 127, 127, 0.12));
  background: var(--sgkre-icon-bg, color-mix(in srgb, var(--sgkre-icon-color) 12%, transparent));
}

.sgkre--icon-circle .sgkre__icon .sgkre-svg,
.sgkre--icon-circle .sgkre__icon img,
.sgkre--icon-rounded .sgkre__icon .sgkre-svg,
.sgkre--icon-rounded .sgkre__icon img {
  width: 62%;
  height: 62%;
}

.sgkre--icon-circle .sgkre__icon {
  border-radius: 50%;
}

.sgkre--icon-rounded .sgkre__icon {
  border-radius: 28%;
}

/* Stacked: every block on one row, icon centred above the text */
.sgkre--stacked .sgkre__list {
  grid-template-columns: none;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

.sgkre--stacked .sgkre__item {
  flex-direction: column;
  align-items: center;
  padding: 0.875rem 0.5rem;
  text-align: center;
}

.sgkre--stacked .sgkre__body {
  align-items: center;
}

/* Band under the header or around the footer: a light strip, blocks side by side */
.sgkre--band {
  padding-block: 0.75rem;
  margin: 0;
  background: var(--sgkre-band-bg, var(--sgk-surface-2, #f6f6f8));
  border-block: 1px solid var(--sgk-line, #e6e7eb);
}

.sgkre--band .sgkre__list {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem 1.5rem;
}

.sgkre--band .sgkre__item {
  align-items: center;
  padding: 0.25rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.sgkre--band .sgkre__icon {
  width: var(--sgkre-icon-size, 2rem);
  height: var(--sgkre-icon-size, 2rem);
}

.sgkre--band.sgkre--icon-circle .sgkre__icon,
.sgkre--band.sgkre--icon-rounded .sgkre__icon {
  width: var(--sgkre-icon-size, 2.75rem);
  height: auto;
}

@media (max-width: 575.98px) {
  .sgkre--stacked .sgkre__item {
    padding: 0.75rem 0.375rem;
  }

  .sgkre--stacked .sgkre__title {
    font-size: 0.8125rem;
  }

  .sgkre--stacked .sgkre__text {
    font-size: 0.6875rem;
  }

  .sgkre--band .sgkre__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 576px) {
  .sgkre--stacked .sgkre__icon {
    width: var(--sgkre-icon-size, 2.75rem);
    height: var(--sgkre-icon-size, 2.75rem);
  }

  .sgkre--stacked.sgkre--icon-circle .sgkre__icon,
  .sgkre--stacked.sgkre--icon-rounded .sgkre__icon {
    width: var(--sgkre-icon-size, 3.5rem);
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sgkre__item--link {
    transition: none;
  }
}

/* ---------- 1.2.0 — links in the texts, title link, tooltip ---------- */
.sgkre__text a,
.sgkre__titlelink,
.sgkre__tipbox a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.sgkre__titlelink:hover,
.sgkre__text a:hover {
  color: var(--sgkre-icon, var(--sgk-red-text, var(--bs-primary, #d7141c)));
}

.sgkre__tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.sgkre__tipbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin-inline-start: 0.2rem;
  color: var(--sgkre-text-color, inherit);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 50%;
  opacity: 0.75;
}

.sgkre__tipbtn:hover,
.sgkre__tip.is-open .sgkre__tipbtn {
  opacity: 1;
}

.sgkre__tipbtn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.sgkre__tipbox {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  z-index: 30;
  width: max-content;
  max-width: min(18rem, 80vw);
  padding: 0.6rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: #fff;
  text-align: start;
  white-space: normal;
  background: var(--sgk-ink, #10161b);
  border-radius: var(--sgk-radius-sm, 0.375rem);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
}

.sgkre__tipbox[hidden] {
  display: none !important;
}

.sgkre__tipbox::after {
  position: absolute;
  top: 100%;
  left: 50%;
  content: "";
  border: 6px solid transparent;
  border-top-color: var(--sgk-ink, #10161b);
  transform: translateX(-50%);
}