/* ===== UNICE "Apply Now" split pill (Gmail-style): [ text | arrow ] — Nov 2026 =====
   Only <a> links that public/js/ua-split.js marks with .ua-split are touched.
   The line runs from the top edge to the bottom edge of the button, so the button
   looks like two parts: text on the left, arrow on the right (in every language).
   Colours come from each button's own text colour (currentColor): pure solid colour,
   no opacity, no text-shadow. Each button keeps its own height and background. */
html body a.ua-split.ua-split {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 0 !important;
    border-radius: 999px !important;
    padding-right: 14px !important;
    text-shadow: none !important;
    white-space: nowrap;
    direction: ltr;                      /* arrow always on the right */
}
html body a.ua-split.ua-split > .ua-t { display: inline-block; flex: 1 1 auto; text-align: center; }   /* wide (full-width) buttons: text centred, arrow stays at the right edge */
html[dir="rtl"] body a.ua-split.ua-split > .ua-t { direction: rtl; }   /* Urdu text still reads right-to-left */

/* the dividing line: full height, top edge to bottom edge */
html body a.ua-split.ua-split > .ua-d {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 41px;                          /* 14px padding + 16px arrow + 11px space */
    width: 1px;
    background: currentColor;
    pointer-events: none;
}
html body a.ua-split.ua-split > .ua-a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-left: 24px;                   /* 12px space after text + 1px line + 11px space */
    transition: transform .2s ease;
}
html body a.ua-split.ua-split > .ua-a svg { display: block; width: 16px; height: 16px; }
html body a.ua-split.ua-split:hover > .ua-a,
html body a.ua-split.ua-split:focus-visible > .ua-a { transform: translateX(3px); }

/* Programme card: its old CSS-drawn arrow (mask on ::after) is replaced by the new arrow */
html body a.ua-split.ua-split::after { -webkit-mask: none !important; mask: none !important; }

@media (prefers-reduced-motion: reduce) {
    html body a.ua-split.ua-split > .ua-a { transition: none; }
}
/* ===== end ua-split ===== */