/* ──────────────────────────────────────────────────────────
   GENERIC TOOLTIP STYLES
   ──────────────────────────────────────────────────────────*/

        /* wrapper */
        .tooltips-custom {
            position: relative;
            display: inline-block;
            overflow: visible;
        }

        /* icon */
        .tooltips-custom .info-icon {
            font-size: 1em;
            cursor: pointer;
            position: relative;
            z-index: 2;
            transition: background .2s, color .2s, border-color .2s;
        }

        /* bubble (hidden by default) */
        .tooltips-custom .tooltip-text {
            display: none;
            position: absolute;
            top: calc(100% + .5em);
            left: 0;
            transform: translateX(-70%);
            pointer-events: auto;
            z-index: 3;
            min-width: 22em;
            max-width: 22em;
            background: #E0EEFF;
            padding: .5em 1.5em 1em 1em;
            border-radius: .5em;
            box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
            font-weight: 400;
            white-space: normal;
        }

        /* close-link inside bubble */
        .tooltips-custom .tooltip-text .tooltip-close {
            position: absolute;
            top: .5em;
            right: .5em;
            font-size: 1.25em;
            line-height: 1;
            text-decoration: none;
            color: #083156;
            pointer-events: auto;
        }

        /* prevent clipping in tables */
        .comparison-table-shortcode .comparison-table td {
            overflow: visible;
        }

        /* responsive bubble size */
        @media (max-width: 600px) {
            .tooltips-custom .tooltip-text {
                min-width: 22em;
                max-width: 90vw;
                font-size: .85em;
                padding: 1em 2em 1em 1em;
            }
        }

        /* ──────────────────────────────────────────────────────────
   SHOW / HIDE BEHAVIOR
   ──────────────────────────────────────────────────────────*/
        /* desktop hover (pointer) */
        @media (hover:hover) {
            .tooltips-custom:hover .info-icon {
                color: #fff;
            }

            .tooltips-custom:hover .tooltip-text {
                display: block;
            }
        }

        /* mobile / touch: `.active` class toggled via JS */
        .tooltips-custom.active .info-icon {
            color: #fff;
        }

        .tooltips-custom.active .tooltip-text {
            display: block;
        }

        /* ──────────────────────────────────────────────────────────
   SIDE‐CART TOOLTIP OVERRIDES (only inside .xoo-wsc-img-col)
   ──────────────────────────────────────────────────────────*/
        .xoo-wsc-addon-item .xoo-wsc-img-col .tooltips-custom .info-icon::before {
            content: "\f129";
            /* FontAwesome “info-circle” */
            font-family: "Font Awesome 5 Free";
            /* or 6 Free, per your setup */
            font-weight: 900;
            border: 2px solid #00234F;
            background: #fff;
            color: #00234F;
            border-radius: 50%;
            padding: 3px 8px;
            line-height: 1;
            transition: background .2s, color .2s, border-color .2s;
        }

        /* side‐cart hover / active */
        @media (hover:hover) {
            .xoo-wsc-addon-item .xoo-wsc-img-col .tooltips-custom:hover .info-icon::before {
                background: #00234F;
                color: #fff;
                border-color: #00234F;
            }
        }

        .xoo-wsc-addon-item .xoo-wsc-img-col .tooltips-custom.active .info-icon::before {
            background: #00234F;
            color: #fff;
            border-color: #00234F;
        }


        /* ===============================
   Product page variation tooltips
   Scope: single product only
   =============================== */

.single-product .variations .vi-attr-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: .5em;
}

/* the (i) icon */
.single-product .variations .vi-attr-tooltip__icon {
  font-size: 0.95em;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  border: 2px solid #00234F;
  color: #00234F;
  background: #fff;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.single-product .variations .vi-attr-tooltip--active .vi-attr-tooltip__icon {
  background: #00234F;
  color: #fff;
  border-color: #00234F;
}

/* bubble (hidden by default) */
.single-product .variations .vi-attr-tooltip__bubble {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 22em;
  max-width: 22em;
  background: #E0EEFF;
  padding: .75em 2.25em .9em .9em;
  border-radius: .5em;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  z-index: 9999; /* over selects/images */
  color: #083156;
  font-weight: 400;
}

.single-product .variations .vi-attr-tooltip--active .vi-attr-tooltip__bubble {
  display: block;
}

/* enable hover reveal where possible */
@media (any-hover: hover) {
  .single-product .variations .vi-attr-tooltip:hover .vi-attr-tooltip__bubble {
    display: block;
  }
}

/* bubble close button */
.single-product .variations .vi-attr-tooltip__close {
  position: absolute;
  top: .35em;
  right: .35em;
  width: 1.5em;
  height: 1.5em;
  border: 0;
  background: transparent;
  color: #083156;
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
}

/* prevent clipping from table cells */
.single-product .variations td,
.single-product .variations th {
  overflow: visible;
}

/* responsive bubble */
@media (max-width: 600px) {
  .single-product .variations .vi-attr-tooltip__bubble {
    max-width: 90vw;
    min-width: min(22em, 90vw);
    font-size: .9em;
    padding-right: 2.25em;
  }
}