/* Prodigix Translation Editor */

/* Toggle switch - one markup (Toggle.cshtml), three placements chosen by
   TranslationEditorToggleViewComponent; each placement class below positions it. */
.pdx-te-toggle-wrapper {
    display: flex;
    align-items: center;
}

/* Storefront: right-aligned inside core's admin header bar (nav.admin-header-links, rendered via
   the admin_header_links_after zone), on the same row as the "Administration" link. The bar centers
   its links, so the switch is taken out of flow and pinned to the inline end; equal inline padding
   on both sides reserves room for it while keeping the links visually centered. :has() limits the
   change to bars that actually contain the switch. */
.admin-header-links:has(.pdx-te-toggle-wrapper-header) {
    position: relative;
    padding-inline: 80px;
}

.pdx-te-toggle-wrapper-header {
    position: absolute;
    inset-inline-end: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* The Prodigix BackOffice stylesheet styles every element in this bar (".admin-header-links *":
   inline-block, 10px side margins, a forced 35px line-height) for its text links; on the switch's
   own parts that squeezes the slider into a circle. Undo it for the switch only - more specific
   selectors here, and !important where BackOffice uses it. */
.admin-header-links .pdx-te-toggle-wrapper-header {
    display: flex;
    margin: 0;
    line-height: normal !important;
}

.admin-header-links .pdx-te-toggle-wrapper-header * {
    margin: 0;
    line-height: normal !important;
}

/* Admin area: first item of the top navbar's right-hand menu, left of the language selector -
   Toggle.cshtml moves it into a li.pdx-te-nav-item there. Vertically centered on the navbar's row. */
.pdx-te-nav-item {
    display: flex;
    align-items: center;
    padding: 0 .5rem;
}

/* Storefront fallback, only for editors who don't get the admin header bar (see
   TranslationEditorToggleViewComponent): flush against the left edge of the viewport, slightly
   above the vertical middle. Rendered right after the opening body tag rather than inside the
   theme's header, since a transformed header ancestor would turn "position: fixed" into "fixed
   relative to that header". Kept below the edit popup's z-index (100000) and its overlay (99999) -
   see further down this file - so the popup's overlay still covers it. */
.pdx-te-toggle-wrapper-floating {
    position: fixed;
    left: 0;
    top: 25vh;
    z-index: 99000;
    justify-content: center;
    background: #fff;
    padding: 10px 8px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

/* Mobile: edit mode is off - no switch in any placement (storefront header bar, floating fallback,
   admin navbar, BackOffice) and no pins. translation-editor.js skips inserting pins at this width;
   hiding .pdx-te-controls covers pins already inserted before the window was narrowed. 767.98px
   matches both the Nexus mobile breakpoint and the admin navbar's navbar-expand-md collapse point
   (and the check in translation-editor.js). !important beats the BackOffice ".admin-header-links *"
   rules; the header bar's reserved padding and the admin navbar's li are dropped too so no gap is
   left. */
@media (max-width: 767.98px) {
    .pdx-te-toggle-wrapper,
    .pdx-te-nav-item,
    .pdx-te-controls {
        display: none !important;
    }

    .admin-header-links:has(.pdx-te-toggle-wrapper-header) {
        padding-inline: 20px;
    }
}

/* Standard checkbox-driven sliding switch (the same technique documented at e.g.
   https://www.w3schools.com/howto/howto_css_switch.asp) - the checkbox itself is visually hidden
   (not display:none, so it stays focusable/operable via keyboard and screen readers) and drives
   :checked via the adjacent-sibling selectors below. */
.pdx-te-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.pdx-te-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.pdx-te-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: background-color .2s;
}

.pdx-te-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.pdx-te-switch input:checked + .pdx-te-slider {
    background-color: #e67e22;
}

.pdx-te-switch input:checked + .pdx-te-slider::before {
    transform: translateX(20px);
}

.pdx-te-switch input:focus-visible + .pdx-te-slider {
    box-shadow: 0 0 0 2px rgba(230, 126, 34, .5);
}

/* Wraps a pin (and its gear, when present) as one unit - see insertControlsForEntry in
   translation-editor.js for why: without this, a narrow container (e.g. a product grid card) could
   wrap the gear onto its own line, stranded away from the pin it belongs to.

   display:inline-flex, not inline-block: confirmed live (product grid titles, v1.10) that
   inline-block does NOT actually guarantee this. An inline-block with width:auto is sized via
   shrink-to-fit, which caps its width at whatever room is left at the end of the current line - if
   that's only enough for one icon (e.g. a long product title fills nearly the whole line), the pin
   fits but the gear then wraps onto a second line INSIDE this element's own now-too-narrow box
   (taller, not wider), landing directly under the pin instead of beside it - white-space:nowrap
   doesn't prevent that, since it only stops wrapping due to text/inline breaking opportunities, not
   this shrink-to-fit width capping. A nowrap flex container doesn't have that failure mode: since
   flex items can never wrap onto a second line without flex-wrap:wrap (not set here), the browser
   computes this element's own preferred width as the full sum of its items up front, and treats
   THAT as one atomic inline box for the surrounding line-breaking decision - so the pin+gear pair
   either both fit on the current line, or (align-items below keeps them vertically centered either
   way) the whole pair wraps down to a new line together, exactly like a single inline-block/image
   would - never splitting between the two. */
.pdx-te-controls {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.pdx-te-pin {
    display: inline-block;
    border: none;
    background: transparent;
    color: #e67e22;
    cursor: pointer;
    font-size: .9em;
    line-height: 1;
    padding: 0 0 0 4px;
    vertical-align: baseline;
}

.pdx-te-pin:hover {
    color: #cf6b12;
}

.pdx-te-admin-link {
    display: inline-block;
    color: #7f8c8d;
    cursor: pointer;
    font-size: .9em;
    line-height: 1;
    padding: 0 0 0 3px;
    vertical-align: baseline;
    text-decoration: none;
}

.pdx-te-admin-link:hover {
    color: #55606a;
}

/* jQuery UI's default dialog z-index (1000) sits under this theme's sticky header/menu - the
   dialogClass passed in translation-editor.js scopes this override to just our own popup instead
   of raising every jQuery UI dialog on the page. The overlay (the dimmed backdrop, a sibling
   element jQuery UI inserts right before the dialog wrapper) needs to stay just below it. */
.pdx-te-dialog-wrapper.ui-dialog {
    z-index: 100000 !important;
}

.ui-widget-overlay {
    z-index: 99999 !important;
}

/* The popup styles all of its own parts rather than relying on the host page: the storefront theme
   and the admin area style bare form controls and jQuery UI's title bar, but other layouts (e.g. the
   Prodigix BackOffice) leave them as browser defaults - outset buttons, an unstyled close button,
   a cramped select. Everything below is scoped to .pdx-te-dialog-wrapper (the dialogClass set in
   translation-editor.js), so no other dialog on the page is affected. The selectors start with
   ".ui-dialog.pdx-te-dialog-wrapper" on purpose: jQuery UI's own stylesheet uses equally specific
   selectors (e.g. ".ui-dialog .ui-dialog-titlebar-close") and loads after this file in the admin
   area, so without the extra class its padding/size/position rules win. */
.pdx-te-dialog-wrapper.ui-dialog {
    padding: 0;
    border: 1px solid #d0d4d9;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
    font-family: inherit;
    font-size: 14px;
    overflow: hidden;
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-titlebar {
    position: relative;
    margin: 0;
    padding-block: 12px;
    padding-inline: 16px 46px;
    background: #f5f6f8;
    border: 0;
    border-bottom: 1px solid #e3e6ea;
    border-radius: 0;
    color: #333;
    font-weight: 600;
    font-size: 16px;
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-title {
    float: none;
    display: block;
    width: auto;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Close button: jQuery UI renders an icon sprite plus hidden "Close" text, both of which depend on
   theme CSS. Hide those and draw the cross from two rotated bars on ::before/::after - every property
   of both is set here, since themes style these same pseudo-elements (the Nexus theme draws its own
   cross the same way) and any property left unset would leak through and distort it.
   Inset 8px: the 14px cross is centered in the 30px button, which leaves it 16px from the dialog's
   edge - the same as the title's 16px padding on the other side of the row. */
.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-titlebar-close {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 50%;
    inset-inline-start: auto;
    inset-inline-end: 8px;
    width: 30px;
    height: 30px;
    margin: -15px 0 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #666;
    font-size: 0;
    line-height: 30px;
    text-indent: 0;
    cursor: pointer;
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-titlebar-close .ui-icon,
.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-titlebar-close .ui-button-icon-space {
    display: none;
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-titlebar-close::before,
.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-titlebar-close::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 1px;
    background: currentColor;
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-titlebar-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-titlebar-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-titlebar-close:hover,
.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-titlebar-close:focus-visible {
    background: #e3e6ea;
    color: #222;
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-content.pdx-te-dialog {
    padding: 16px;
    color: #333;
}

.pdx-te-dialog .pdx-te-field {
    margin-bottom: 14px;
}

.pdx-te-dialog .pdx-te-field label {
    display: block;
    margin: 0 0 5px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    color: #333;
}

.ui-dialog.pdx-te-dialog-wrapper .pdx-te-dialog select,
.ui-dialog.pdx-te-dialog-wrapper .pdx-te-dialog input[type="text"],
.ui-dialog.pdx-te-dialog-wrapper .pdx-te-dialog textarea {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: none;
    color: #212529;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}

.ui-dialog.pdx-te-dialog-wrapper .pdx-te-dialog select,
.ui-dialog.pdx-te-dialog-wrapper .pdx-te-dialog input[type="text"] {
    height: 36px;
}

.ui-dialog.pdx-te-dialog-wrapper .pdx-te-dialog select {
    padding-top: 0;
    padding-bottom: 0;
}

.ui-dialog.pdx-te-dialog-wrapper .pdx-te-dialog input[readonly] {
    background-color: #f2f3f5;
    color: #555;
}

.ui-dialog.pdx-te-dialog-wrapper .pdx-te-dialog textarea {
    height: 120px;
    resize: vertical;
}

.ui-dialog.pdx-te-dialog-wrapper .pdx-te-dialog select:focus,
.ui-dialog.pdx-te-dialog-wrapper .pdx-te-dialog input[type="text"]:focus,
.ui-dialog.pdx-te-dialog-wrapper .pdx-te-dialog textarea:focus {
    border-color: #e67e22;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(230, 126, 34, .25);
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-buttonpane {
    margin: 0;
    padding: 10px 16px;
    background: #f5f6f8;
    border-top: 1px solid #e3e6ea;
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    float: none;
}

/* A shared minimum width keeps "Save" and "Close" the same size; the first button (Save) is the
   primary action. */
.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-buttonpane button {
    -webkit-appearance: none;
    appearance: none;
    min-width: 84px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-buttonpane button:hover {
    background: #eef0f3;
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-buttonpane button:first-child {
    border-color: #e67e22;
    background: #e67e22;
    color: #fff;
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-buttonpane button:first-child:hover {
    border-color: #cf6d17;
    background: #cf6d17;
}

.ui-dialog.pdx-te-dialog-wrapper .ui-dialog-buttonpane button:disabled {
    opacity: .65;
    cursor: default;
}

.pdx-te-missing-hint {
    background: #fff8e1;
    border: 1px solid #f0d888;
    padding: 8px;
    border-radius: 3px;
    font-size: .9em;
}

.pdx-te-message {
    margin-top: 10px;
    padding: 6px 8px;
    border-radius: 3px;
    font-size: .9em;
}

.pdx-te-message-success {
    background: #e6f6e6;
    border: 1px solid #a7d8a7;
    color: #256029;
}

.pdx-te-message-error {
    background: #fdecea;
    border: 1px solid #f3b3ae;
    color: #a32a1f;
}