/* Language Selector Styles for Translate File */

/* Language Selector */
.stf-language-selector {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Additional Language Selector Items */
.stf-language-selector-item {
    position: relative;
    /* No padding here - it's handled by .stf-language-selectors inside */
}

/* Additional selector's language-selectors wrapper */
.stf-language-selector-item .stf-language-selectors {
    padding: 8px 40px 8px 16px;
}

/* Primary selector's language-selectors wrapper */
.stf-language-selector-primary .stf-language-selectors {
    padding-right: 40px;
}

/* When hovering, add left padding to make space for remove button */
.stf-language-selector-item:hover .stf-language-selectors {
    /* padding-left: 48px; */
    background-color: #EEF7FF;
}


/*
 * Keep select2 right-edge consistent regardless of arrow visibility.
 * Formula: padding-right decreases by 20px for each visible arrow sibling
 * (stf-active=20px, stf-language-selected=20px), so select2 always ends at W-40px.
 * Base=40px ensures min 0px gap even when both arrows visible (40-40=0).
 */

/* 1 arrow: stf-language-selected.active is visible */
.stf-language-selector-primary:has(> .stf-language-selected.active) .stf-language-selectors,
.stf-language-selector-item:has(> .stf-language-selected.active) .stf-language-selectors {
    padding-right: 20px;
}

/* 1 arrow: stf-active visible on hover (no stf-language-selected.active) */
.stf-language-selector-primary:hover:has(> .stf-active:not(.stf-hide-arrow)) .stf-language-selectors,
.stf-language-selector-item:hover:has(> .stf-active:not(.stf-hide-arrow)) .stf-language-selectors {
    padding-right: 20px;
}

/* 2 arrows: both stf-active (hover) and stf-language-selected.active visible */
.stf-language-selector-primary:hover:has(> .stf-active:not(.stf-hide-arrow)):has(> .stf-language-selected.active) .stf-language-selectors,
.stf-language-selector-item:hover:has(> .stf-active:not(.stf-hide-arrow)):has(> .stf-language-selected.active) .stf-language-selectors {
    padding-right: 0px;
}

.stf-language-selector-item:hover .stf-active:not(.stf-hide-arrow) {
    display: flex!important;
}

/* Primary selector - background only when has-multiple-selectors class is present */
.stf-language-selector-primary.has-multiple-selectors:hover .stf-language-selectors {
    background-color: #EEF7FF;
}

/* Primary selector - arrow always shows on hover (even with 1 selector) */
.stf-language-selector-primary:hover .stf-active:not(.stf-hide-arrow) {
    display: flex!important;
}

/* Hide arrow when from or to is empty */
.stf-active.stf-hide-arrow {
    display: none !important;
}

.stf-language-selector-item.active .stf-language-selected {
    display: flex !important;
}

/* Force hide all language-selected icons by default */
.stf-language-selected {
    display: none !important;
}

/* Only show when active class is added */
.stf-language-selected.active {
    display: flex !important;
    border-top-left-radius: var(--Spacing-XS, 4px);
    border-bottom-left-radius: var(--Spacing-XS, 4px);
}

/* Remove language button - absolutely positioned (out of flex flow) */
.stf-remove-language {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.stf-remove-language img {
    width: 32px;
    height: 32px;
}

/* Show remove button when hovering over the selector item */
.stf-language-selector-item:hover .stf-remove-language {
    opacity: 1;
    pointer-events: auto;
}

/* on hover: shrink select2 inside langfrom only, flex item size unchanged so arrow stays aligned */
.stf-language-selector-item .stf-language-from .select2-container {
    margin-left: 39px !important; /* 32px (X button) + 7px (gap) */
    width: calc(100% - 39px) !important; /* select2 sets width:100% inline, must override */
}

.stf-remove-language:hover {
    opacity: 0.7 !important;
}

/* Add language button disabled state */
.stf-add-language.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.stf-language-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: center;
    min-height: 1px;
    min-width: 1px;
}

.stf-language-title {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    padding: 0 24px 0 16px;
    width: 100%;
    box-sizing: border-box;
    min-height: 28px;
}

.stf-language-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--black-black-01-text-primary);
    white-space: nowrap;
    line-height: 19px;
}

.stf-info-link {
    flex: 1;
    min-height: 1px;
    min-width: 1px;
    padding: 4px 0;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    gap: 4px;
}

.stf-info-icon {
    width: 20px;
    height: 20px;
    color: var(--Cobalt02);
}

.stf-info-link span {
    font-weight: 400;
    font-size: 12px;
    color: var(--Cobalt02);
    white-space: nowrap;
    line-height: 16px;
}

.stf-language-selectors {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0px 8px 16px;
    width: 100%;
    box-sizing: border-box;
}

.stf-language-from,
.stf-language-to {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 480px;
    min-height: 1px;
    min-width: 1px;
}

.stf-language-select {
    background-color: var(--White);
    display: flex;
    height: 36px;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-radius: 4px;
    width: 100%;
    border: 1px solid var(--BlueGray01);
    padding-left: 8px;
    padding-right: 8px;
    font-weight: 400;
    font-size: 14px;
    color: var(--black-black-01-text-primary);
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
}

.stf-language-arrow {
    display: flex;
}

/* Language Toggle */
.stf-language-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
}

.stf-toggle-button {
    background-color: var(--Cobalt07);
    display: flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 20px;
    cursor: pointer;
}

.stf-toggle-icon {
    width: 32px;
    height: 32px;
    color: var(--Cobalt02);
    transform: rotate(90deg);
}

/* Execution Options */
.stf-execution-options {
    display: flex;
    gap: 16px;
    width: 100%;
    border-top: 1px solid var(--BlueGray04);
    box-sizing: border-box;
}

.stf-execution-settings {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    width: 140px;
}

.stf-execution-title {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    line-height: 19px;
    padding-bottom: 4px;
}

.stf-execution-select {
    background-color: var(--White);
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 0;
    border-radius: 4px;
    width: 100%;
    border: 1px solid var(--BlueGray01);
    padding-left: 8px;
    padding-right: 8px;
    font-weight: 400;
    font-size: 14px;
    color: var(--black-black-01-text-primary);
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
}

/* Execution Note */
.stf-execution-note img {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.stf-execution-note #stf-current-reservations {
    padding: var(--Spacing-XS, 4px);
    background: var(--Cobalt08, #EEF7FF);
}

/* Checkbox */
.stf-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--Gray05, #e0e0e0);
    border-radius: 2px;
    cursor: pointer;
    background-color: var(--White);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    position: relative;
}

.stf-checkbox:checked {
    background-color: var(--Cobalt02, #1763a2);
    border-color: var(--Cobalt02, #1763a2);
}

.stf-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--White);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.stf-checkbox:hover {
    border-color: var(--Cobalt02, #1763a2);
}

.stf-checkbox:disabled {
    background-color: var(--Gray05, #e0e0e0);
    border-color: var(--Gray05, #e0e0e0);
    cursor: not-allowed;
    opacity: 0.6;
}

.stf-checkbox:disabled:checked {
    background-color: #F2F3F5 !important;
    border-color: #C0C5D0 !important;
    opacity: 1 !important;
}

.stf-checkbox:disabled:checked::after {
    border-color: #C0C5D0 !important;
}

/* select2 custom */
.select2-container .select2-selection__arrow b {
    display: none;
}

.select2-container .select2-selection__arrow::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('/_common/images/member/v1/rztapp/translate_text/icon_chevron_down.svg');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.select2-container .select2-selection--single {
    height: 36px !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single:focus-visible{
    border: 1px solid var(--BlueGray01, '#B3B9C6');
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    color: black;
}

.select2-container .select2-selection__placeholder {
    color: var(--GC-BlueGray01, '#B3B9C6') !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

/* Specific styles for select2 inside stf-execution-settings - 30px height */
.stf-execution-settings .select2-container .select2-selection--single {
    height: 30px !important;
}

.stf-execution-settings .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px !important;
}

.stf-execution-settings .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
}

.select2-container .select2-selection--multiple {
    min-height: 36px !important;
    height: auto;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    line-height: 26px !important;
}

.select2-container .select2-results__option--highlighted {
    background-color: var(--Cobalt08, '#EEF7FF') !important;
    color: #626263 !important;
}

.select2-container .select2-results__option {
    color: #626263;
}

/* .select2-container .select2-results__option--selected {
    background: #EEF7FF !important;
    color: #626263 !important;
    outline: 2px solid #7FC5FF !important;
    outline-offset: -2px;
    border-radius: 4px;
} */

/* Remove default selected highlight from all options */
.stf-language-dropdown .select2-results__option--selected {
    background-color: transparent !important;
    outline: none !important;
}

.stf-language-dropdown .select2-results__option--selected:hover {
    background-color: var(--Cobalt08, '#EEF7FF') !important;
    color: #626263 !important;
}

/* Apply selected highlight only to "all" section items with stf-option-selected class */
.stf-language-dropdown .select2-results__option:has(.stf-option-selected) {
    background: #EEF7FF !important;
    color: #626263 !important;
    outline: 2px solid #7FC5FF !important;
    outline-offset: -2px;
    border-radius: 4px;
}

/* History items - no selected highlight */
.stf-language-dropdown .select2-results__option:has(.stf-history-item) {
    /* background-color: transparent !important; */
    outline: none !important;
}

.select2-container--default .select2-results__option--disabled {
    color: #B3B9C6 !important;
    background-color: #F8F9FB !important;
}

.select2-container .select2-results__option:has(.stf-select2-disabled) {
    color: #B3B9C6 !important;
    /* background-color: #F8F9FB !important; */
}

.stf-language-selectors-container {
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 100%;
}

.select2-searching .select2-results__option{
    background-color: transparent !important;
    outline: none !important;
}

.select2-results__group{
    color: var(--BlueGray01, #B3B9C6);
}

.select2-results__group .stf-select2-disabled {
    font-size: 14px;
    color: var(--BlueGray01, #B3B9C6);
}

.stf-from-dropdown .select2-results__group {
    background: transparent !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single{
    background-color: var(--BlueGray06, '#F2F3F5');
    color: var(--BlueGray01, '#B3B9C6');
}

.stf-execution-select-disabled {
    border: none !important;
}

#execution-select + .select2-container.select2-container--disabled .select2-selection--single {
    border: none !important;
    background-color: #F2F3F5 !important;
}

#execution-select + .select2-container.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--BlueGray03) !important;
}

.stf-execution-settings:has(#execution-select + .select2-container.select2-container--disabled)
~ .stf-translate-mail_submit {
    pointer-events: none;
}

/* .stf-execution-settings:has(#execution-select + .select2-container.select2-container--disabled)
    .stf-execution-title {
        color: #CCD0D9 !important;
} */

.stf-execution-settings:has(#execution-select + .select2-container.select2-container--disabled)
~ .stf-translate-mail_submit input[type="checkbox"] {
    cursor: not-allowed;
    background-color: #F2F3F5 !important;
    border-color: #CCD0D9 !important;
}

.stf-execution-settings:has(#execution-select + .select2-container.select2-container--disabled)
~ .stf-translate-mail_submit label {
    color: #CCD0D9 !important;
}

/* Target all FROM select elements (primary and additional) */
select[data-type="from"] + .select2-container.select2-container--disabled .select2-selection--single,
#language-from-select + .select2-container.select2-container--disabled .select2-selection--single {
    background-color: #F2F3F5 !important;
    color: #B3B9C6 !important;
}

select[data-type="from"] + .select2-container.select2-container--disabled .select2-selection--single .select2-selection__rendered,
#language-from-select + .select2-container.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: #B3B9C6 !important;
}

/* Target all TO select elements (primary and additional) */
select[data-type="to"] + .select2-container.select2-container--disabled .select2-selection--single,
#language-to-select + .select2-container.select2-container--disabled .select2-selection--single {
    background-color: #F2F3F5 !important;
    color: #B3B9C6 !important;
}

select[data-type="to"] + .select2-container.select2-container--disabled .select2-selection--single .select2-selection__rendered,
#language-to-select + .select2-container.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: #B3B9C6 !important;
}

/* Dynamic Tooltip Styles */
.stf-dynamic-tooltip {
    position: fixed;
    background-color: var(--White);
    color: var(--Black-Black01);
    padding: 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    width: 480px;
    text-align: left;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--BlueGray02);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    pointer-events: none;
    gap: 16px;
}

.stf-dynamic-tooltip.stf-tooltip-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.stf-info-text {
    cursor: pointer;
    position: relative;
}

.stf-tooltip-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--Black-Black01);
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stf-tooltip-title span {
    line-height: 19px;
}

.stf-tooltip-content {
    font-size: 14px;
    color: var(--Black);
    line-height: 28px;
}

.stf-tooltip-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stf-tooltip-link {
    color: var(--Cobalt02);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 19px;
}

.stf-tooltip-link span {
    line-height: 19px;
}

.stf-tooltip-link:hover {
    text-decoration: underline;
}

.stf-language-selector-disabled {

    pointer-events: none !important;
}

.stf-language-select-disabled + .select2-container .select2-selection--single{
    background-color: #F2F3F5 !important;
    color: #B3B9C6 !important;
}
.stf-language-select-disabled + .select2-container .select2-selection--single .select2-selection__rendered {
    color: #B3B9C6 !important;
}

/* Disabled state for execution select */
.stf-execution-disabled .select2-selection--single {
    background: #F8F9FB !important;
    color: #C0C5D0 !important;
    border: none !important;
}

.stf-execution-disabled .select2-selection__rendered {
    color: #C0C5D0 !important;
}

/* Disabled state for mail_submit checkbox */
#mail_submit.stf-mail-submit-disabled {
    background-color: #F2F3F5 !important;
    border-color: #CCD0D9 !important;
    cursor: not-allowed !important;
}

/* Disabled + Checked state for mail_submit */
/* #mail_submit.stf-mail-submit-disabled:checked {
    background-color: #F2F3F5 !important;
    border-color: #C0C5D0 !important;
    cursor: not-allowed !important;
}

#mail_submit.stf-mail-submit-disabled:checked::after {
    border-color: #C0C5D0 !important;
} */

/* Disabled state for mail_submit label */
label[for="mail_submit"].stf-mail-submit-label-disabled {
    color: #CCD0D9 !important;
    cursor: not-allowed !important;
}

/* Disabled state for open-xml-tag */
#open-xml-tag.stf-open-xml-tag-disabled {
    color: #C0C5D0 !important;
    cursor: not-allowed !important;
}

#open-xml-tag.stf-open-xml-tag-disabled span {
    color: #C0C5D0 !important;
}

#open-xml-tag.stf-open-xml-tag-disabled img{
    filter: brightness(0) saturate(100%) invert(80%) sepia(2%) saturate(8%) hue-rotate(317deg) brightness(106%) contrast(85%);
}

/* Enhanced disabled state for stf-add-language */
.stf-add-language.stf-add-language-disabled {
    color: #C0C5D0 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.stf-add-language.stf-add-language-disabled span {
    color: #C0C5D0 !important;
}
.stf-add-language.stf-add-language-disabled img{
    filter: brightness(0) saturate(100%) invert(80%) sepia(2%) saturate(8%) hue-rotate(317deg) brightness(106%) contrast(85%);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder{
    color: var(--BlueGray01, #B3B9C6)
}

/* Add border to the selected option display when dropdown is open AND option is selected */
body:has(.select2-results__option--selected) .select2-container--open .select2-selection--single {
    border: 2px solid #1763A2 !important;
}

/* Hide search input in history mode */
.stf-select2-dropdown.stf-history-mode .select2-search {
    display: none !important;
}

/* Hide search input in history mode for OCR dropdown */
.stf-ocr-select2-dropdown.stf-history-mode .select2-search {
    display: none !important;
}

.select2-search__field {
    height: 36px;
    font-size: 14px;
}

.select2-search__field::placeholder{
    color: var(--BlueGray01, #B3B9C6);
}

.select2-results__option{
    font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    font-size: 14px;
}

.select2-container--default .select2-search--dropdown .select2-search__field{
    font-size: 14px;
}

.stf-language-selector-disabled .stf-language-arrow img{
    filter: brightness(0) saturate(100%) invert(80%) sepia(2%) saturate(8%) hue-rotate(317deg) brightness(106%) contrast(85%);
}

.select2-results__group+ul.select2-results__options--nested{
    position: relative;
    margin-bottom: 5px;
}

.select2-results__group+ul.select2-results__options--nested::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 8px;
    width: calc(100% - 16px);  /* full width minus 8px left + 8px right */
    height: 1px;
    background: #C0C5D0;
}

.select2-results__option--selectable:has(.stf-select2-disabled){
    background: #f8f9fb !important;
    color: #b3b9c6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.select2-results__options--nested .select2-results__option,
.stf-language-dropdown .select2-results__option:not(.select2-results__option--group){
    padding: 8px !important;
    line-height: 19px;
}

/* Limit dropdown height to show approximately 8-9 items */
.stf-select2-dropdown .select2-results__options {
    max-height: 280px !important;
}

.stf-language-selector-disabled .stf-execution-note {
    color: #C0C5D0 !important;
}

.stf-language-selector-disabled .stf-execution-note * {
    color: #C0C5D0 !important;
}

.stf-language-selector-disabled .stf-execution-note img {
    filter: brightness(0) saturate(100%) invert(80%) sepia(2%) saturate(8%) hue-rotate(317deg) brightness(106%) contrast(85%);
}

.stf-language-selector-disabled .stf-execution-note #stf-current-reservations {
    background: #F2F3F5 !important;
}

/* === Language Selector Empty Highlight === */
.stf-selector-empty-highlight .selection .select2-selection {
  border: 2px solid #A4D6FF !important;
}

/* === Language Warning Message === */
.stf-language-warning-message {
    border: none;
    background-color: transparent;
    padding: 4px 8px;
    cursor: pointer;
    line-height: 100%;
}
.stf-language-warning-message:hover {
  background-color: #EEF7FF;
  border-radius: 4px;
}