/* Forms Direct: PDF editor and hosted uDraw controls only; never style artwork/canvas contents.
 * Also appended to W2P's CSS endpoint so these rules reach its hosted iframe.
 */

/* Typed values and native dropdowns use one readable UI type treatment. */
:is(#udraw-bootstrap, #pdf-block-product-ui) input[type="text"],
:is(#udraw-bootstrap, #pdf-block-product-ui) input[type="email"],
:is(#udraw-bootstrap, #pdf-block-product-ui) input[type="tel"],
:is(#udraw-bootstrap, #pdf-block-product-ui) input[type="number"],
:is(#udraw-bootstrap, #pdf-block-product-ui) input:not([type]),
:is(#udraw-bootstrap, #pdf-block-product-ui) textarea,
:is(#udraw-bootstrap, #pdf-block-product-ui) select {
    color: #202020 !important;
    -webkit-text-fill-color: #202020 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

:is(#udraw-bootstrap, #pdf-block-product-ui) input::placeholder,
:is(#udraw-bootstrap, #pdf-block-product-ui) textarea::placeholder {
    color: #656565 !important;
    -webkit-text-fill-color: #656565 !important;
    opacity: 1;
}

/* Use longhands with !important: the existing theme's important background
 * shorthand otherwise clears the chevrons on its native selects. */
:is(#udraw-bootstrap, #pdf-block-product-ui) select:not([multiple]):not([size]),
:is(#udraw-bootstrap, #pdf-block-product-ui) select[size="1"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #eeeeee !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #202020 50%),
        linear-gradient(135deg, #202020 50%, transparent 50%) !important;
    background-position:
        calc(100% - 19px) 50%,
        calc(100% - 13px) 50% !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
    padding-right: 38px !important;
}

:is(#udraw-bootstrap, #pdf-block-product-ui) select option {
    background-color: #eeeeee;
    color: #202020;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
}

/* Match the selected text if this designer version enhances native selects. */
:is(#udraw-bootstrap, #pdf-block-product-ui) .select2-container .select2-selection--single {
    background-color: #eeeeee !important;
}

:is(#udraw-bootstrap, #pdf-block-product-ui) .select2-container .select2-selection__rendered {
    color: #202020 !important;
    -webkit-text-fill-color: #202020 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

:is(#udraw-bootstrap, #pdf-block-product-ui) .select2-container .select2-selection__arrow b {
    border-top-color: #202020 !important;
}

:is(#udraw-bootstrap, #pdf-block-product-ui) .select2-container--open .select2-selection__arrow b {
    border-top-color: transparent !important;
    border-bottom-color: #202020 !important;
}

/* The reported black arrow must follow the Back button's foreground colour. */
:is(#udraw-bootstrap, #pdf-block-product-ui) .udraw-connect-designer-back-btn i,
:is(#udraw-bootstrap, #pdf-block-product-ui) .udraw-connect-designer-back-btn i::before,
:is(#udraw-bootstrap, #pdf-block-product-ui) .udraw-connect-designer-back-btn svg {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    fill: currentColor !important;
}

/* The PDF editor is the live HID2C designer. Its inline SVG otherwise defaults
 * to black even when the Back button text is white. */
#pdf-block-product-ui .pdfeditor-back-btn svg,
#pdf-block-product-ui .pdfeditor-back-btn svg path {
    color: inherit !important;
    fill: currentColor !important;
}

/* The PDF plugin also supports the older Select2 choice markup. */
#pdf-block-product-ui .select2-container .select2-choice {
    background-color: #eeeeee !important;
    background-image: none !important;
    color: #202020 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

#pdf-block-product-ui .select2-container .select2-choice .select2-chosen {
    color: #202020 !important;
    -webkit-text-fill-color: #202020 !important;
}

/* Raise the modal itself (a child z-index cannot escape its stacking context).
 * Keep its header/Close outside the scrollable clipart results. */
:is(#udraw-bootstrap, #pdf-block-product-ui) [data-udraw="clipartModal"] {
    z-index: 2147483001 !important;
}

:is(#udraw-bootstrap, #pdf-block-product-ui) [data-udraw="clipartModal"] .modal-dialog {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

:is(#udraw-bootstrap, #pdf-block-product-ui) [data-udraw="clipartModal"] .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
}

:is(#udraw-bootstrap, #pdf-block-product-ui) [data-udraw="clipartModal"] .modal-header {
    position: relative !important;
    flex: 0 0 auto;
    min-height: 60px;
    padding-right: 60px !important;
    background-color: #ffffff;
    z-index: 2 !important;
}

:is(#udraw-bootstrap, #pdf-block-product-ui) [data-udraw="clipartModal"] .modal-header .close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    float: none !important;
    margin: 0 !important;
    min-width: 44px;
    min-height: 44px;
    padding: 6px !important;
    background-color: #ffffff !important;
    color: #202020 !important;
    -webkit-text-fill-color: #202020 !important;
    opacity: 1 !important;
    z-index: 3 !important;
}

:is(#udraw-bootstrap, #pdf-block-product-ui) [data-udraw="clipartModal"] .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

:is(#udraw-bootstrap, #pdf-block-product-ui) [data-udraw="clipartModal"] .modal-footer {
    flex: 0 0 auto;
}

/* The browser toolbar changes the usable height on mobile. */
@supports (height: 100dvh) {
    #udraw-connect-container iframe {
        height: 100dvh !important;
    }
}

/* Actual PDF BlockManager clipart gallery (inserted directly under body, outside
 * #pdf-block-product-ui). Keep Close in a fixed header above scrollable images. */
body.single-product .image_selector_modal {
    z-index: 2147483001 !important;
}

body.single-product .image_selector_modal .popup-inner {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: calc(100% - 24px) !important;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 16px !important;
}

body.single-product .image_selector_modal .modal-header {
    position: relative;
    flex: 0 0 auto;
    min-height: 56px;
    padding: 0 88px 12px 0 !important;
    background-color: #ffffff;
    z-index: 2;
}

body.single-product .image_selector_modal button.modal_close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    min-width: 80px;
    min-height: 44px;
    margin: 0 !important;
    padding: 8px 12px !important;
    background: #ffffff !important;
    color: #202020 !important;
    -webkit-text-fill-color: #202020 !important;
    border: 1px solid #c8d9de !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
    z-index: 3;
}

body.single-product .image_selector_modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.single-product .image_selector_modal .block_image_modal_container {
    height: auto !important;
    overflow-y: visible !important;
}

body.single-product .image_selector_modal .modal-footer {
    flex: 0 0 auto;
}

/* Includes the hosted iframe, where the outer theme's focus rules cannot reach. */
:is(#udraw-bootstrap, #pdf-block-product-ui) :is(a, button, input, select, textarea, [tabindex]):focus-visible,
body.single-product .image_selector_modal :is(button, a, input, select, [tabindex]):focus-visible {
    outline: 3px solid #173f4d !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px #ffffff !important;
}

body.single-product .image_selector_modal img[role="button"] {
    cursor: pointer;
}

@media (forced-colors: active) {
    :is(#udraw-bootstrap, #pdf-block-product-ui) :is(a, button, input, select, textarea, [tabindex]):focus-visible,
    body.single-product .image_selector_modal :is(button, a, input, select, [tabindex]):focus-visible {
        outline-color: Highlight !important;
        box-shadow: none !important;
    }
}

/* Field edges remain distinguishable on white and light-grey UI panels. */
:is(#udraw-bootstrap, #pdf-block-product-ui) input[type="text"],
:is(#udraw-bootstrap, #pdf-block-product-ui) input[type="email"],
:is(#udraw-bootstrap, #pdf-block-product-ui) input[type="tel"],
:is(#udraw-bootstrap, #pdf-block-product-ui) input[type="number"],
:is(#udraw-bootstrap, #pdf-block-product-ui) input:not([type]),
:is(#udraw-bootstrap, #pdf-block-product-ui) textarea,
:is(#udraw-bootstrap, #pdf-block-product-ui) select,
:is(#udraw-bootstrap, #pdf-block-product-ui) .select2-selection--single,
#pdf-block-product-ui .select2-container .select2-choice {
    border-color: #657f86 !important;
}
@media (forced-colors: active) {
    :is(#udraw-bootstrap, #pdf-block-product-ui) select:not([multiple]):not([size]),
    :is(#udraw-bootstrap, #pdf-block-product-ui) select[size="1"] {
        appearance: auto !important; -webkit-appearance: auto !important;
        background-image: none !important;
    }
    :is(#udraw-bootstrap, #pdf-block-product-ui) input[type="text"],
    :is(#udraw-bootstrap, #pdf-block-product-ui) input[type="email"],
    :is(#udraw-bootstrap, #pdf-block-product-ui) input[type="tel"],
    :is(#udraw-bootstrap, #pdf-block-product-ui) input[type="number"],
    :is(#udraw-bootstrap, #pdf-block-product-ui) input:not([type]),
    :is(#udraw-bootstrap, #pdf-block-product-ui) textarea,
    :is(#udraw-bootstrap, #pdf-block-product-ui) select,
    :is(#udraw-bootstrap, #pdf-block-product-ui) .select2-selection--single,
    #pdf-block-product-ui .select2-container .select2-choice {
        border-color: ButtonText !important;
        color: CanvasText !important; -webkit-text-fill-color: CanvasText !important;
    }
}

body.single-product .image_selector_modal .modal-header .fd-clipart-title {
    margin: 0 !important;
    padding: 8px 0 !important;
    color: #202020 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}