/* =========================================================================================================
   YUBEEN UI ICON SYSTEM — SVG MASK NORMALIZATION
   Purpose:
   - Replaces Unicode arrow glyphs in interactive UI with deterministic SVG icons.
   - Prevents Android/iOS/browser emoji or fallback-font rendering differences.
   - Uses currentColor so icons inherit the surrounding UI color.
   ========================================================================================================= */

.yb-ui-icon {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    flex: 0 0 auto !important;
    vertical-align: -0.12em !important;
    background-color: currentColor !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    pointer-events: none !important;
}

.yb-ui-icon--arrow-right {
    -webkit-mask-image: url("../../icons/arrow-right.svg") !important;
    mask-image: url("../../icons/arrow-right.svg") !important;
}

.yb-ui-icon--arrow-up-right {
    -webkit-mask-image: url("../../icons/arrow-up-right.svg") !important;
    mask-image: url("../../icons/arrow-up-right.svg") !important;
}

.yb-ui-icon--chevron-right,
.yb-ui-icon--chevron-left {
    -webkit-mask-image: url("../../icons/chevron-right.svg") !important;
    mask-image: url("../../icons/chevron-right.svg") !important;
}

.yb-ui-icon--chevron-left {
    transform: rotate(180deg);
}

.yb-ui-icon--chevron-down,
.yb-ui-icon--chevron-up {
    -webkit-mask-image: url("../../icons/chevron-down.svg") !important;
    mask-image: url("../../icons/chevron-down.svg") !important;
}

.yb-ui-icon--chevron-up {
    transform: rotate(180deg);
}

/* Keep CTA icons restrained and aligned to the text baseline. */
a .yb-ui-icon--arrow-right,
button .yb-ui-icon--arrow-right,
[role="button"] .yb-ui-icon--arrow-right {
    width: 0.94em !important;
    height: 0.94em !important;
    margin-left: 0.42em !important;
    transition: transform 180ms ease !important;
}

a:hover .yb-ui-icon--arrow-right,
a:focus-visible .yb-ui-icon--arrow-right,
button:hover .yb-ui-icon--arrow-right,
button:focus-visible .yb-ui-icon--arrow-right,
[role="button"]:hover .yb-ui-icon--arrow-right,
[role="button"]:focus-visible .yb-ui-icon--arrow-right {
    transform: translateX(2px);
}

a .yb-ui-icon--arrow-up-right,
button .yb-ui-icon--arrow-up-right,
[role="button"] .yb-ui-icon--arrow-up-right {
    width: 0.92em !important;
    height: 0.92em !important;
    margin-left: 0.38em !important;
    transition: transform 180ms ease !important;
}

a:hover .yb-ui-icon--arrow-up-right,
a:focus-visible .yb-ui-icon--arrow-up-right,
button:hover .yb-ui-icon--arrow-up-right,
button:focus-visible .yb-ui-icon--arrow-up-right,
[role="button"]:hover .yb-ui-icon--arrow-up-right,
[role="button"]:focus-visible .yb-ui-icon--arrow-up-right {
    transform: translate(2px, -2px);
}