/* ============================================================
   UX ENHANCEMENTS  (progressive, non-breaking)
   Loaded LAST so it only ADDS behaviour; it never changes layout.
   Powers:
     1. Friendly hover tooltips for icon-only buttons/symbols
     2. Visible press / "Added!" feedback on every button
   ============================================================ */

/* ---- 1. Floating tooltip (rendered at <body> level by JS, so it is
          NEVER clipped by an overflow:hidden parent) ---- */
.ux-tooltip {
    position: fixed;
    z-index: 100000;
    max-width: 240px;
    padding: 6px 10px;
    background: #1f2937;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 500;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;      /* never steals the mouse */
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
    white-space: normal;
}
.ux-tooltip.ux-tooltip--show {
    opacity: 1;
    transform: translateY(0);
}
/* little arrow */
.ux-tooltip::after {
    content: "";
    position: absolute;
    left: var(--ux-arrow-x, 50%);
    width: 8px;
    height: 8px;
    background: #1f2937;
    transform: translateX(-50%) rotate(45deg);
}
.ux-tooltip.ux-tip-below::after { top: -4px; }
.ux-tooltip.ux-tip-above::after { bottom: -4px; }

/* A faint dotted underline hint on standalone info symbols so a new
   visitor knows the symbol is explain-able on hover. */
.ux-has-tip-icon {
    cursor: help;
}

/* ---- 2. Universal button press feedback ---- */
/* A gentle, instant "I registered your click" on ANY button. Scoped so it
   never fights an already-animated control. */
button,
.btn,
[role="button"] {
    transition: transform .08s ease, box-shadow .12s ease, background-color .15s ease;
}
button:active:not(:disabled),
.btn:active:not(:disabled),
[role="button"]:active {
    transform: translateY(1px) scale(0.98);
}

/* Ripple flash added by JS on click. */
.ux-pressed {
    position: relative;
    overflow: hidden;
}
.ux-pressed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.55), transparent 60%);
    opacity: 0;
    animation: uxRipple .5s ease-out;
    pointer-events: none;
}
@keyframes uxRipple {
    0%   { opacity: .6; transform: scale(0.3); }
    100% { opacity: 0;  transform: scale(1.4); }
}

/* ---- 3. Add-to-cart success flash ---- */
/* Applied briefly to the add-to-cart button so the shopper SEES the item
   went in, even before they look at the cart. */
.ux-added {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
    transition: background-color .15s ease;
}
.ux-added i { color: #fff !important; }

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .ux-pressed::after { animation: none; }
    button, .btn, [role="button"] { transition: none; }
}