/* Account pages revamp (Figma: QF - BilAraby - WebsiteDesign - Concept 2, profile nodes 40006008:61905 / 62172 / 62400).
   Everything is scoped under .acv so nothing leaks onto the legacy .account-settings rules in app.css. */

.acv {
    --acv-gutter: clamp(20px, 8.333vw, 160px);
    --acv-glass-border: #fff;
    --acv-shadow: 7px 63px 18px rgba(0, 0, 0, 0), 4px 40px 16px rgba(0, 0, 0, 0), 2px 23px 14px rgba(0, 0, 0, .02), 1px 10px 10px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .03);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* clip, not hidden: a hidden box is still a scroll container, and focus/scrollIntoView could shift the content out of reach. */
    overflow: clip;
    padding: 150px var(--acv-gutter) 140px;
    background: var(--hr-blue-50, #e6eef3);
    font-family: 'Almarai', 'Helvetica Neue', Arial, sans-serif;
    color: var(--hr-brown-500, #1b190c);
}
.acv::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: min(1080px, 100%);
    z-index: -1;
    background: url('../images/account-revamp/noise.png') center top / cover no-repeat;
}
.acv::after {
    content: "";
    position: absolute;
    left: -200px;
    bottom: 56px;
    z-index: -1;
    width: 1051px;
    height: 46px;
    max-width: 70vw;
    background: url('../images/account-revamp/diamond-line.svg') left center / 100% 100% no-repeat;
    transform: scaleX(-1);
}
[dir="rtl"] .acv::after { left: auto; right: -200px; transform: none; }

.acv-grid {
    display: grid;
    grid-template-columns: minmax(0, 578fr) minmax(0, 743fr);
    justify-content: space-between;
    column-gap: clamp(32px, 8vw, 160px);
    align-items: center;
    position: relative;
    max-width: 1600px;
    margin-inline: auto;
    min-height: 780px;
}

/* Faint overlay shapes behind the cards (Figma nodes 40006008:62402 / 62403); insets are the artboard's, as shares of the frame. */
.acv-deco {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: overlay;
    background: no-repeat center / 100% 100%;
}
.acv-deco-a { inset: 30.53% -6.05% -84.63% -0.38%; background-image: url('../images/account-revamp/bg-wave-a.svg'); }
.acv-deco-b { inset: -1.48% -5.51% -61.87% -7.32%; background-image: url('../images/account-revamp/bg-wave-b.svg'); transform: scaleX(-1); }

/* ---------- Glass primitives ---------- */
.acv-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    border: 2px outset #ffffff9c;
    border-bottom-width: 0;
    border-radius: 61px;
    background: rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: inset 0 4px 6.1px rgba(255, 255, 255, .23), 7px 63px 18px rgba(0, 0, 0, .02), 2px 23px 14px rgba(0, 0, 0, .02), 1px 10px 10px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .03);
    font: 700 16px/24px 'Almarai', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease;
}
.acv-pill:hover { transform: translateY(-2px); }
.acv-back {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    padding-inline: 16px 24px;
    color: #fff;
    align-self: flex-start;
}
.acv-back:hover { color: #fff; }
.acv-back img { width: 24px; height: 24px; }
[dir="rtl"] .acv-back img { transform: scaleX(-1); }

/* Fill, rim, shadow and hover glow come from the shared primary-button lists in layout-revamp.css. */
.acv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-radius: 61px;
    color: #fff;
    font: 700 16px/24px 'Almarai', sans-serif;
    cursor: pointer;
    transition: transform .2s ease;
}
.acv-btn:hover { transform: translateY(-2px); }
.acv-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- Left column ---------- */
.acv-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.acv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px;
    border: 1px solid var(--acv-glass-border);
    border-radius: 30px;
    background: linear-gradient(0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .8) 76%, rgba(255, 255, 255, .6) 103%);
    -webkit-backdrop-filter: blur(53px);
    backdrop-filter: blur(53px);
    box-shadow: var(--acv-shadow);
}
.acv-card::after {
    content: "";
    position: absolute;
    inset: -.5px;
    border-radius: inherit;
    box-shadow: inset 0 4px 6.1px rgba(255, 255, 255, .23);
    pointer-events: none;
}
.acv-profile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}
.acv-avatar {
    position: relative;
    flex: none;
    width: 120px;
    height: 120px;
    border: 1px solid #fff;
    border-radius: 21px;
    overflow: hidden;
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .03), 1px 10px 10px rgba(0, 0, 0, .03);
}
.acv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acv-initials {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .45) 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: inset 0 4px 6.1px rgba(255, 255, 255, .6);
    color: var(--hr-blue-500, #005087);
    font: 700 40px/1 'Almarai', sans-serif;
    letter-spacing: .02em;
    user-select: none;
}
.acv-edit {
    position: absolute;
    isolation: isolate;
    inset-inline-start: 88px;
    top: 88px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: inset 0 4px 6.1px rgba(255, 255, 255, .23), 2px 23px 14px rgba(0, 0, 0, .02), 1px 10px 10px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .03);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .2s ease;
}
.acv-edit:hover { transform: translateY(-2px); }
/* Hover bloom from the bottom edge, as on the other glass buttons. */
.acv-edit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(circle 100px at 50% calc(100% + 28.55px), rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .26) 13%, rgba(255, 255, 255, .2) 25%, rgba(255, 255, 255, .14) 40%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, 0) 100%);
    mix-blend-mode: plus-lighter;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.acv-edit:hover::before { opacity: 1; }
.acv-edit img { width: 20px; height: 20px; }
.acv-identity { min-width: 0; }
.acv-name {
    margin: 0 0 4px;
    font: 700 32px/40px 'Almarai', sans-serif;
    color: var(--hr-brown-700, #131209);
    overflow-wrap: anywhere;
}
.acv-email {
    margin: 0;
    font: 400 18px/28px 'Almarai', sans-serif;
    color: var(--hr-brown-400, #49473d);
    overflow-wrap: anywhere;
}
.acv-photo-menu {
    position: absolute;
    top: 134px;
    inset-inline-start: 72px;
    z-index: 5;
    display: none;
    min-width: 140px;
    padding: 8px;
    border: 1.5px solid rgba(255, 255, 255, .8);
    border-radius: 16px;
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    /* Same glass stack as the buttons: inset highlight + soft ambient drops. */
    box-shadow: inset 0 4px 6.1px rgba(255, 255, 255, .23), 2px 23px 14px rgba(0, 0, 0, .02), 1px 10px 10px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .06);
}
.acv-photo-menu.show { display: block; }
.acv-photo-menu .menu-item {
    padding: 8px 12px;
    border-radius: 10px;
    font: 400 16px/24px 'Almarai', sans-serif;
    cursor: pointer;
}
.acv-photo-menu .menu-item:hover { background: rgba(255, 255, 255, .7); }
.acv-photo-menu .menu-divider { height: 1px; margin: 4px 0; background: rgba(0, 0, 0, .08); }

.acv-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    margin: 0;
    list-style: none;
    border: 1px solid #fff;
    border-radius: 20px;
    background: linear-gradient(0deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .6) 76%, rgba(255, 255, 255, .45) 103%);
    -webkit-backdrop-filter: blur(53px);
    backdrop-filter: blur(53px);
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .03));
}
.acv-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 13.3px;
    font: 400 18px/28px 'Almarai', sans-serif;
    color: var(--hr-brown-500, #1b190c);
    text-decoration: none;
    transition: background-color .2s ease;
}
.acv-nav a::after {
    content: "";
    flex: none;
    width: 24px;
    height: 24px;
    background: url('../images/account-revamp/arrow-right.svg') center / contain no-repeat;
}
[dir="rtl"] .acv-nav a::after { transform: scaleX(-1); }
.acv-nav a:hover { background: rgba(232, 147, 13, .06); }
.acv-nav a.is-active {
    background: rgba(232, 147, 13, .1);
    color: #c87f08;
    font-weight: 700;
}
.acv-nav a.is-active::after { background-image: url('../images/account-revamp/arrow-right-active.svg'); }

.acv-delete {
    display: flex;
    align-items: center;
    gap: 24px;
}
.acv-delete .acv-pill { flex: none; color: var(--hr-brown-900, #0b0b05); }
/* Delete Account is Figma's secondary glass pill (40006008:62014), same as the home page's ghost-dark buttons: 20% white fill, 1.5px hairline + the shared gradient ring, no blur. */
.acv-delete .acv-pill {
    border: 1.5px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 4px 6.1px rgba(255, 255, 255, .23), 7px 63px 18px rgba(0, 0, 0, 0), 4px 40px 16px rgba(0, 0, 0, 0), 2px 23px 14px rgba(0, 0, 0, .02), 1px 10px 10px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .03);
}
.acv-delete p {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font: 400 16px/24px 'Almarai', sans-serif;
    color: #6b6a57;
    opacity: .6;
}

/* ---------- Right panel ---------- */
.acv-panel {
    min-width: 0;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .6);
    background: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .5) 100%);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .03);
}
.acv-panel-head {
    padding: 40px 40px 24px;
    border-bottom: 1px solid #fff;
}
.acv-title {
    margin: 0;
    font: 700 32px/40px 'Almarai', sans-serif;
    color: var(--hr-brown-900, #0b0b05);
}
.acv-title span { color: #e19d33; }
.acv-panel-body {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 24px 40px 40px;
}
.acv-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.acv-form-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.acv-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; }
.acv-label {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 0;
    font: 400 16px/24px 'Almarai', sans-serif;
    color: var(--hr-brown-400, #49473d);
}
.acv-label .req { color: #ee3b33; }
.acv-input,
.acv-select {
    width: 100%;
    height: 56px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 8px;
    background: rgba(255, 255, 255, .55);
    font: 400 16px/24px 'Almarai', sans-serif;
    color: var(--hr-brown-500, #1b190c);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
/* Browser autofill: keep the field's own white fill instead of the global green wash from app.css. */
.acv .acv-input:-webkit-autofill,
.acv .acv-input:-webkit-autofill:hover,
.acv .acv-input:-webkit-autofill:focus,
.acv .acv-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #f2f5f8 inset !important;
    box-shadow: 0 0 0 1000px #f2f5f8 inset !important;
    -webkit-text-fill-color: var(--hr-brown-500, #1b190c) !important;
    caret-color: var(--hr-brown-500, #1b190c);
    transition: background-color 5000s ease-in-out 0s;
}
.acv-input::placeholder { color: var(--hr-brown-300, #66655c); opacity: .5; }
.acv-input:focus,
.acv-select:focus {
    border-color: var(--hr-yellow-400, #e19d33);
    box-shadow: 0 0 0 3px rgba(225, 157, 51, .18);
}
.acv-select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 44px;
    background-image: url('../images/account-revamp/chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    cursor: pointer;
}
[dir="rtl"] .acv-select { background-position: left 16px center; }
/* !important: a global script writes an inline 30% colour onto every select. */
.acv-select { color: var(--hr-brown-500, #1b190c) !important; font-weight: 400 !important; font-size: 16px !important; }
/* Same tint as .acv-input::placeholder (brown-300 at 50%). */
.acv-select:invalid,
.acv-select:has(option[value=""]:checked) { color: rgba(102, 101, 92, .5) !important; }
/* Phone: intl-tel-input v17 draws the flag + dial code over the input's leading edge. */
.acv .iti { display: block; width: 100%; }
.acv .iti__flag-container { padding: 0; }
.acv .iti__selected-flag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 16px;
    background: transparent;
    border-radius: 8px 0 0 8px;
}
.acv .iti__flag-box,
.acv .iti__selected-flag .iti__flag { margin: 0; }
.acv .iti__selected-dial-code {
    margin: 0;
    font: 400 16px/24px 'Almarai', sans-serif;
    color: var(--hr-brown-500, #1b190c);
}
/* The vendor's CSS-triangle arrow, swapped for the same chevron the selects use. */
.acv .iti__arrow {
    width: 16px;
    height: 16px;
    margin: 0;
    border: 0;
    background: url('../images/account-revamp/chevron-down.svg') center / 16px no-repeat;
}
.acv .iti__arrow--up { transform: rotate(180deg); }
.acv .iti input#acv_phone, .acv .iti input#sup_phone { padding-left: 124px !important; padding-right: 16px !important; direction: ltr; }
[dir="rtl"] .acv .iti input#acv_phone, [dir="rtl"] .acv .iti input#sup_phone { padding-left: 16px !important; padding-right: 124px !important; text-align: right; }
.acv .iti__country-list { box-sizing: border-box; max-width: 100vw; overflow-x: hidden; white-space: normal; z-index: 20; border-radius: 12px; border-color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); font-family: 'Almarai', sans-serif; }
.acv-pass { position: relative; }
.acv-pass .acv-input { padding-inline-end: 52px; }
.acv-pass .password-toggle-icon {
    position: absolute;
    top: 50%;
    inset-inline-end: 16px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
    filter: brightness(0) opacity(.5);
}
/* Beats app.css's global label.error (absolute, !important red/size) so the message sits in flow under its field. */
.acv label.error {
    position: static;
    order: 99;
    margin: 0 !important;
    font: 400 14px/20px 'Almarai', sans-serif !important;
    color: #ee3b33 !important;
}
.acv label.error:empty { display: none; }
.acv .acv-input.error,
.acv .acv-select.error { border-color: #ee3b33; }

/* ---------- Preferences ---------- */
.acv-sub {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.acv-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.acv-chip,
.acv-ctype {
    position: relative;
    border: 1px solid rgba(177, 175, 165, .5);
    background: rgba(236, 230, 211, .4);
    color: var(--hr-brown-500, #1b190c);
    font: 400 16px/24px 'Almarai', sans-serif;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.acv-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px 12px 16px;
    border-radius: 61px;
    text-align: start;
}
[dir="rtl"] .acv-chip { padding: 12px 16px 12px 20px; }
/* Icon is a mask so it takes the state colour: dark at rest, blue when selected. */
.acv-chip-icon {
    flex: none;
    width: 24px;
    height: 24px;
    background-color: var(--hr-brown-500, #1b190c);
    -webkit-mask: var(--acv-icon) center / contain no-repeat;
    mask: var(--acv-icon) center / contain no-repeat;
    transition: background-color .2s ease;
}
.acv-chip.selected .acv-chip-icon { background-color: var(--hr-blue-500, #005087); }
.acv-chip.d-none { display: none; }
.acv-chip.selected,
.acv-ctype.selected {
    border-color: #fff;
    background: var(--hr-cream-50, #fefefd);
    box-shadow: var(--acv-shadow);
}
.acv-chip:hover,
.acv-ctype:hover { border-color: rgba(225, 157, 51, .6); }
.acv-more {
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid #898880;
    background: none;
    font: 700 16px/24px 'Almarai', sans-serif;
    color: #898880;
    cursor: pointer;
    margin-inline: 8px;
}
.acv-ctypes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.acv-ctype {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100px;
    height: 100px;
    padding: 12px;
    border-radius: 20px;
}
.acv-ctype-icon {
    width: 32px;
    height: 32px;
    background-color: var(--hr-blue-500, #005087);
    -webkit-mask: var(--acv-icon) center / contain no-repeat;
    mask: var(--acv-icon) center / contain no-repeat;
}
/* Podcast: Figma's icon is a solid disc with the waveform knocked out; drawn as disc + cream glyph. */
.acv-ctype-icon.is-disc {
    position: relative;
    border-radius: 50%;
    -webkit-mask: none;
    mask: none;
}
.acv-ctype-icon.is-disc::after {
    content: "";
    position: absolute;
    inset: 6px;
    background-color: var(--hr-cream-50, #fefefd);
    -webkit-mask: var(--acv-icon) center / contain no-repeat;
    mask: var(--acv-icon) center / contain no-repeat;
}

@media (max-width: 1199.98px) {
    .acv-grid { column-gap: 32px; }
    .acv-name { font-size: 26px; line-height: 34px; }
    .acv-avatar { width: 96px; height: 96px; }
    .acv-edit { inset-inline-start: 64px; top: 64px; }
    .acv-photo-menu { top: 110px; inset-inline-start: 48px; }
}
@media (max-width: 991.98px) {
    .acv { padding-top: 130px; padding-bottom: 80px; }
    .acv-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; min-height: 0; }
    .acv-side { gap: 32px; }
    .acv-back { position: static; align-self: flex-start; }
    .acv-grid { position: static; }
    .acv-panel-head { padding: 28px 24px 20px; text-align: center; }
    .acv-panel-body > div:has(> .acv-btn) { display: flex; justify-content: center; }
    .acv-panel-body .acv-btn { min-width: 180px; }
    .acv-panel-body { padding: 20px 24px 28px; }
    .acv::after { display: none; }
    /* The page is much taller when stacked: stretch the blue so it still sits behind the form, as on desktop. */
    .acv::before { height: 100%; background-size: 100% 100%; }
    .acv-panel { background: linear-gradient(180deg, rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .42) 100%); }
    .acv-input, .acv-select { background-color: rgba(255, 255, 255, .5); }
}
@media (max-width: 575.98px) {
    .acv-chips { gap: 8px; }
    .acv-chip { padding: 9px 14px 9px 12px; font-size: 14px; line-height: 20px; gap: 6px; }
    [dir="rtl"] .acv-chip { padding: 9px 12px 9px 14px; }
    .acv-chip-icon { width: 20px; height: 20px; }
    .acv-ctypes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .acv-ctype { width: auto; height: 88px; padding: 8px 4px; font-size: 13px; line-height: 18px; }
    .acv-ctype-icon { width: 28px; height: 28px; }
    .acv-card { padding: 20px; gap: 24px; border-radius: 24px; }
    .acv-profile { gap: 16px; }
    .acv-name { font-size: 22px; line-height: 30px; }
    .acv-email { font-size: 15px; line-height: 22px; }
    .acv-form-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .acv-delete { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
    .acv-title { font-size: 26px; line-height: 34px; }
}

.acv-panel.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; }

/* Searchable select2 (the long Country list) styled as the other .acv-select fields; the open list stays a short scrolling panel. */
.acv .ba-select2-container.select2-container { width: 100% !important; }
.acv .ba-select2-container.select2-container .select2-selection,
.acv .ba-select2-container.ba-select2--has-value .select2-selection,
.acv .ba-select2-container.ba-select2--empty .select2-selection {
    height: 56px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 8px;
    background: rgba(255, 255, 255, .55);
    box-shadow: none;
}
.acv .ba-select2-container.select2-container .select2-selection .select2-selection__rendered,
.acv .ba-select2-container.ba-select2--has-value .select2-selection .select2-selection__rendered { font-weight: 400; }
.acv .ba-select2-container.select2-container .select2-selection .select2-selection__placeholder { color: rgba(102, 101, 92, .5); }
.acv .ba-select2-container.select2-container--focus .select2-selection,
.acv .ba-select2-container.select2-container--open .select2-selection {
    border-color: var(--hr-yellow-400, #e19d33);
    box-shadow: 0 0 0 3px rgba(225, 157, 51, .18);
}
.acv .acv-select.error + .select2-container .select2-selection { border-color: #ee3b33; }

.acv-avatar.is-uploading { opacity: .55; transition: opacity .15s ease; }