/**
 * Builder frame + contrast fixes, and the "My files" library modal.
 *
 * The builder's own container has no background, so on a page with anything
 * behind it every label, input and button sat on that and was unreadable. This
 * file gives .dtf-builder a solid white sheet and re-asserts the colours of
 * everything inside it. It also owns the two full-page layouts: the product
 * page (body.dtf-product-page) and the open checkout (body.dtf-checkout-open).
 *
 * Loaded after plugin/public/css/builder.css (handle dtf-builder-frame depends
 * on dtf-gsb-builder), so equal-specificity rules here win. builder.css itself
 * is never edited.
 *
 * !important appears ONLY where Tailwind's preflight — injected at runtime by
 * cdn.tailwindcss.com into a <style> that lands after our stylesheet — resets
 * button/input backgrounds and borders to transparent/none, or where the parent
 * theme styles the same element more specifically. Each one is commented.
 *
 * Pixel values only. Everything is scoped to .dtf-builder or to a body class.
 */


/* =============================================================================
   THE FRAME — a solid white sheet under the builder

   .dtf-builder itself has no background in the plugin's own stylesheet, so on
   any page with something behind it every label, input and button sat on that.
   ============================================================================= */

.dtf-builder {
    background: #ffffff;
    color: #1d2327;
    position: relative;
}

.dtf-builder .dtf-builder__inner {
    background: #ffffff;
}

.dtf-builder label,
.dtf-builder .dtf-modal__field > span,
.dtf-builder .dtf-summary__label,
.dtf-builder .dtf-bed__stat-label {
    color: #1d2327;
}

.dtf-builder .dtf-summary__note,
.dtf-builder .dtf-config__sub,
.dtf-builder .dtf-upload__hint {
    color: #5a6470;
}

/*
 * preflight: Tailwind resets input/button background and border to
 * transparent/none, and it loads after this file.
 */
.dtf-builder input[type="text"],
.dtf-builder input[type="email"],
.dtf-builder input[type="tel"],
.dtf-builder input[type="search"],
.dtf-builder input[type="date"],
.dtf-builder input[type="password"],
.dtf-builder select,
.dtf-builder textarea {
    background: #ffffff !important;
    border: 1px solid #cdd2d8 !important;
    border-radius: 3px;
    box-sizing: border-box;
    color: #1d2327;
    font-size: 14px;
    padding: 10px 12px;
    width: 100%;
}

.dtf-builder input:focus,
.dtf-builder select:focus,
.dtf-builder textarea:focus {
    border-color: #1d2327 !important;   /* preflight, as above */
    outline: none;
}

/* The real file input is driven by the dropzone and its button. */
.dtf-builder .dtf-hidden-input {
    display: none;
}

/*
 * Auth modal panes. auth.js shows one and hides the other with the `hidden`
 * attribute — it never adds a class. (A class-based rule here once hid BOTH
 * panes, so the builder's log in / register modal showed tabs and nothing
 * else.) This only makes sure `hidden` wins over any display a theme sets.
 */
.dtf-builder .dtf-tabpane[hidden] {
    display: none;
}

/* =============================================================================
   BENEFITS — the short reassurance list under the order button

   Same 17px icon as the trust block. Without a size an inline SVG with only a
   viewBox stretches to the width of the column, which is how a tick became a
   300px drawing.
   ============================================================================= */

/* Side by side wherever the column is wide enough — two per row in the form
   column, all three on a wide frame — and stacked only when it is not. Three
   stacked lines under the order button were pushing the whole column down. */
.dtf-builder .dtf-benefits {
    display: grid;
    gap: 8px 18px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.dtf-builder .dtf-benefits__item {
    align-items: flex-start;
    color: #1d2327;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    line-height: 1.4;
    margin: 0;
}

.dtf-builder .dtf-benefits__icon {
    color: #1d7a3e;
    flex: none;
    height: 17px;
    margin-top: 1px;
    width: 17px;
}

/* Every inline icon in the builder is a fixed-size glyph, never a picture.
   A belt-and-braces cap: a new icon added without its own rule cannot blow
   the layout open again. */
.dtf-builder svg:not([width]):not([height]) {
    max-height: 100%;
    max-width: 100%;
}

/* ...and the opposite failure, which is the one that actually bit.
   Nearly every icon here sits in a `display: flex` button, so the <svg> is a
   flex item with the default `flex: 0 1 auto` — shrinkable. In this stack it
   shrinks all the way to ZERO WIDTH while keeping its height, so the button
   renders as a correct, empty box and the icon is simply gone. Measured on
   the live site: `.dtf-lock` and `.dtf-rotate` were 0 x 14.

   The `width`/`height` attributes do NOT save it, and neither does a CSS
   width — a flex item is shrunk after its base size is resolved, so both are
   overridden. Only `flex: none` (shrink 0) holds. That is why every icon with
   its own rule above — .dtf-benefits__icon, .dtf-trust__icon, the library
   trigger — already carries `flex: none` and renders, and why the two that
   rely on their attributes alone did not.

   So: no icon in the builder may shrink. The checkout's own icons
   (.dtf-checkout__back, the .dtf-checkout__carts buttons) also carry no
   `flex: none` of their own; they measured correctly in the states that could
   be tested, so this is cover for them rather than a fix, and it costs
   nothing. On anything that is not a flex item the declaration is inert. */
.dtf-builder svg {
    flex: none;
}

/* The two that had no rule of their own. Pinned explicitly as well, so they
   survive even if the attributes are ever dropped from the plugin's markup. */
.dtf-builder .dtf-lock svg,
.dtf-builder .dtf-rotate svg {
    height: 14px;
    width: 14px;
}

/* =============================================================================
   "PICK UP WHERE YOU LEFT OFF" — the saved cart offered inside the builder
   ============================================================================= */

.dtf-builder .dtf-saved {
    background: #f7f8fa;
    border: 1px solid #e3e6ea;
    border-radius: 3px;
    margin: 0 0 16px;
    padding: 14px 16px;
}

.dtf-builder .dtf-saved__head {
    margin-bottom: 10px;
}

.dtf-builder .dtf-saved__title {
    color: #1d2327;
    font-size: 14px;
    font-weight: 800;
    margin: 0;
}

.dtf-builder .dtf-saved__sub {
    color: #5a6470;
    font-size: 12.5px;
    margin: 3px 0 0;
}

.dtf-builder .dtf-saved__thumbs,
.dtf-builder .dtf-saved-cart__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.dtf-builder .dtf-saved__thumb,
.dtf-builder .dtf-saved-cart__thumb {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e3e6ea;
    border-radius: 2px;
    display: flex;
    height: 40px;
    justify-content: center;
    overflow: hidden;
    width: 40px;
}

.dtf-builder .dtf-saved__thumb img,
.dtf-builder .dtf-saved-cart__thumb img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.dtf-builder .dtf-saved__thumb--more,
.dtf-builder .dtf-saved-cart__thumb--more {
    color: #5a6470;
    font-size: 12px;
    font-weight: 700;
}

/* preflight */
.dtf-builder .dtf-saved__add {
    background: #ffffff !important;
    border: 1px solid #1d2327 !important;
    border-radius: 3px;
    color: #1d2327;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
}

.dtf-builder .dtf-saved__add:hover {
    background: #1d2327 !important;
    color: #ffffff;
}

/* =============================================================================
   "MY FILES" — the library trigger and its modal

   The trigger sits under the dropzone as a quiet second option: the primary
   action is dropping a new file, this is for one already sent. Left as a bare
   <button> it inherited the site's red call-to-action block.
   ============================================================================= */

/* The trigger now sits ABOVE the dropzone, right-aligned, as a quiet text
   link with a folder glyph: the primary action is still dropping a file. */
.dtf-builder .dtf-lib {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px;
}

/* preflight */
.dtf-builder .dtf-lib__trigger {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 3px;
    color: #1d2327;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 7px;
    padding: 6px 8px;
    width: auto;
}

.dtf-builder .dtf-lib__trigger svg {
    color: #5a6470;
    flex: none;
    height: 16px;
    width: 16px;
}

.dtf-builder .dtf-lib__trigger:hover {
    background: #f1f5f9 !important;   /* preflight, as above */
    color: #000000;
}

.dtf-builder .dtf-lib__trigger:hover svg {
    color: #1d2327;
}

.dtf-builder .dtf-lib__modal {
    inset: 0;
    position: fixed;
    z-index: 9550;
}

.dtf-builder .dtf-lib__modal[hidden] {
    display: none;
}

.dtf-builder .dtf-lib__overlay {
    background: rgba(17, 17, 17, 0.6);
    inset: 0;
    position: absolute;
}

.dtf-builder .dtf-lib__dialog {
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(17, 17, 17, 0.32);
    display: flex;
    flex-direction: column;
    left: 50%;
    max-height: calc(100vh - 40px);
    max-width: 900px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
}

.dtf-builder .dtf-lib__head {
    align-items: center;
    border-bottom: 1px solid #e3e6ea;
    display: flex;
    flex: none;
    justify-content: space-between;
    padding: 20px 24px 16px;
}

.dtf-builder .dtf-lib__title {
    color: #1d2327;
    font-size: 19px;
    font-weight: 800;
    margin: 0;
}

/* preflight */
.dtf-builder .dtf-lib__close {
    background: none !important;
    border: 0 !important;
    color: #8a9099;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    padding: 4px 8px;
}

.dtf-builder .dtf-lib__close:hover {
    color: #1d2327;
}

.dtf-builder .dtf-lib__login {
    padding: 30px 24px 34px;
    text-align: center;
}

.dtf-builder .dtf-lib__login-text {
    color: #5a6470;
    font-size: 14px;
    margin: 0 0 14px;
}

.dtf-builder .dtf-lib__login-link {
    color: #e11421;
    font-weight: 700;
    text-decoration: underline;
}

.dtf-builder .dtf-lib__browse {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 0 24px;
}

.dtf-builder .dtf-lib__tabs {
    border-bottom: 1px solid #e3e6ea;
    display: flex;
    flex: none;
    gap: 22px;
    margin-bottom: 16px;
    padding-top: 14px;
}

/* preflight */
.dtf-builder .dtf-lib__tab {
    background: none !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    color: #8a9099;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: -1px;
    padding: 8px 2px;
    width: auto;
}

.dtf-builder .dtf-lib__tab.is-active {
    border-bottom-color: #e11421 !important;   /* preflight, as above */
    color: #1d2327;
}

.dtf-builder .dtf-lib__filters {
    align-items: flex-end;
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.dtf-builder .dtf-lib__field {
    display: flex;
    flex: 1 1 150px;
    flex-direction: column;
    gap: 4px;
}

.dtf-builder .dtf-lib__input {
    font-size: 13px;
    padding: 9px 11px;
}

.dtf-builder .dtf-lib__field-label {
    color: #8a9099;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* preflight */
.dtf-builder .dtf-lib__btn {
    background: #ffffff !important;
    border: 1px solid #cdd2d8 !important;
    border-radius: 3px;
    color: #1d2327;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 16px;
    width: auto;
}

.dtf-builder .dtf-lib__btn:hover:not(:disabled) {
    border-color: #1d2327 !important;   /* preflight, as above */
}

.dtf-builder .dtf-lib__btn--primary {
    background: #1d7a3e !important;     /* preflight, as above */
    border-color: #1d7a3e !important;
    color: #ffffff;
}

.dtf-builder .dtf-lib__btn--primary:hover:not(:disabled) {
    background: #16632f !important;     /* preflight, as above */
    border-color: #16632f !important;
}

.dtf-builder .dtf-lib__btn:disabled {
    cursor: default;
    opacity: 0.5;
}

.dtf-builder .dtf-lib__groups {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* preflight */
.dtf-builder .dtf-lib__group {
    background: #ffffff !important;
    border: 1px solid #e3e6ea !important;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    text-align: left;
    width: auto;
}

.dtf-builder .dtf-lib__group.is-active {
    border-color: #1d2327 !important;   /* preflight, as above */
}

.dtf-builder .dtf-lib__group-num {
    color: #1d2327;
    font-size: 12.5px;
    font-weight: 800;
}

.dtf-builder .dtf-lib__group-meta {
    color: #8a9099;
    font-size: 11.5px;
}

.dtf-builder .dtf-lib__grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    padding-bottom: 4px;
}

/* preflight */
.dtf-builder .dtf-lib__tile {
    background: #ffffff !important;
    border: 1px solid #e3e6ea !important;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    text-align: left;
    width: 100%;
}

.dtf-builder .dtf-lib__tile:hover {
    border-color: #1d2327 !important;   /* preflight, as above */
}

.dtf-builder .dtf-lib__tile.is-selected {
    border-color: #1d7a3e !important;   /* preflight, as above */
    box-shadow: 0 0 0 2px rgba(29, 122, 62, 0.18);
}

.dtf-builder .dtf-lib__tile--skeleton {
    background: #f2f4f6 !important;     /* preflight, as above */
    border-color: #eef0f2 !important;
    height: 168px;
    pointer-events: none;
}

.dtf-builder .dtf-lib__thumb {
    align-items: center;
    background: #f7f8fa;
    border-radius: 2px;
    display: flex;
    height: 92px;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.dtf-builder .dtf-lib__thumb img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.dtf-builder .dtf-lib__thumb-missing {
    color: #c3c8ce;
    font-size: 24px;
}

.dtf-builder .dtf-lib__name {
    color: #1d2327;
    font-size: 12.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dtf-builder .dtf-lib__meta,
.dtf-builder .dtf-lib__order {
    color: #8a9099;
    font-size: 11.5px;
}

.dtf-builder .dtf-lib__warn {
    color: #b45309;
    font-size: 11.5px;
    font-weight: 700;
}

.dtf-builder .dtf-lib__state {
    color: #5a6470;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dtf-builder .dtf-lib__tile.is-selected .dtf-lib__state {
    color: #1d7a3e;
}

.dtf-builder .dtf-lib__empty {
    grid-column: 1 / -1;
    padding: 34px 0;
    text-align: center;
}

.dtf-builder .dtf-lib__empty-title {
    color: #1d2327;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.dtf-builder .dtf-lib__empty-text {
    color: #8a9099;
    font-size: 13px;
    margin: 6px 0 0;
}

.dtf-builder .dtf-lib__more {
    display: flex;
    justify-content: center;
    padding: 16px 0 4px;
}

.dtf-builder .dtf-lib__foot {
    border-top: 1px solid #e3e6ea;
    display: flex;
    flex: none;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 24px;
}

@media (max-width: 640px) {
    .dtf-builder .dtf-lib__grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .dtf-builder .dtf-lib__head,
    .dtf-builder .dtf-lib__foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    .dtf-builder .dtf-lib__browse {
        padding: 0 16px;
    }
}

/* =============================================================================
   FULL-PAGE PRODUCT PAGE — body.dtf-product-page

   The builder is the page. Header and footer stay; everything the theme would
   normally wrap a product in — the promo bar, the title block, breadcrumbs, the
   boxed content card and its vertical padding — is cleared so the tool runs
   from the header straight down to the footer on plain white.

   Set only by the plugin's single-product-page.php, so none of this can reach
   the [dtf_builder] shortcode.
   ============================================================================= */

body.dtf-product-page {
    background: #ffffff;
}

body.dtf-product-page .dtf-topbar {
    display: none;
}

body.dtf-product-page #kadence-breadcrumbs,
body.dtf-product-page .product-title.product-above {
    display: none;
}

body.dtf-product-page #primary.content-area {
    margin: 0;
    padding: 0;
}

body.dtf-product-page .content-container.site-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

body.dtf-product-page #main.site-main {
    margin: 0;
    padding: 0;
}

/* The boxed "entry" card the theme draws around post content. */
body.dtf-product-page .entry.content-bg,
body.dtf-product-page .entry-content-wrap {
    background: none;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

body.dtf-product-page .dtf-builder {
    margin: 0 auto;
    max-width: 1440px;
    padding: 22px 24px 48px;
}

@media (max-width: 780px) {
    body.dtf-product-page .dtf-builder {
        padding: 16px 14px 36px;
    }
}

/* =============================================================================
   FULL-PAGE CHECKOUT — body.dtf-checkout-open

   The panel stops being part of the product page and becomes the page: a white
   surface pinned under the site header, covering everything behind it. The
   header stays (people check the nav before they pay); the promo bar goes,
   because it is sticky and covers the place-order button.

   --dtf-checkout-top is measured and set by checkout.js (syncTopOffset), so the
   surface meets the bottom of the header at every breakpoint and with the
   WordPress admin bar present.
   ============================================================================= */

body.dtf-checkout-open {
    overflow: hidden;
}

body.dtf-checkout-open .dtf-topbar {
    display: none;
}

body.dtf-checkout-open .dtf-builder .dtf-checkout {
    background: #ffffff;
    bottom: 0;
    left: 0;
    margin: 0;
    max-width: none;
    overflow-y: auto;
    padding: 0;
    position: fixed;
    right: 0;
    top: var(--dtf-checkout-top, 0px);
    z-index: 9400;
}

body.dtf-checkout-open .dtf-builder .dtf-checkout__grid {
    margin: 0 auto;
    max-width: 1180px;
    padding: 26px 24px 70px;
}

.dtf-builder .dtf-checkout__col {
    min-width: 0;
}

/*
 * The summary is a panel, not a sidebar that follows you down the page. It was
 * sticky and separately scrollable; with two scroll surfaces on one screen the
 * page fought the mouse.
 */
.dtf-builder .dtf-checkout__col--summary .dtf-checkout__colinner {
    background: #f7f8fa;
    border: 1px solid #e3e6ea;
    border-radius: 3px;
    padding: 22px 22px 24px;
}

/* The form column carries the page's own left margin on wide screens; the
   summary panel supplies its own padding. */
.dtf-builder .dtf-checkout__col--form .dtf-checkout__colinner {
    padding-right: 8px;
}

.dtf-builder .dtf-checkout__main {
    margin: 0;
}

.dtf-builder .dtf-co__note {
    color: #8a9099;
    font-size: 12px;
    line-height: 1.5;
    margin: 10px 0 0;
}

/* preflight */
.dtf-builder .dtf-summary-item__remove {
    background: none !important;
    border: 0 !important;
    color: #8a9099;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    margin-left: auto;
    padding: 2px 6px;
    width: auto;
}

.dtf-builder .dtf-summary-item__remove:hover {
    color: #b91c1c;
}

/* --- Other saved carts, offered beside the summary --- */
.dtf-builder .dtf-checkout__carts {
    margin-top: 24px;
}

.dtf-builder .dtf-checkout__carts[hidden] {
    display: none;
}

.dtf-builder .dtf-checkout__carts-title {
    color: #1d2327;
    font-size: 14px;
    font-weight: 800;
    margin: 0;
}

.dtf-builder .dtf-checkout__carts-sub {
    color: #5a6470;
    font-size: 12.5px;
    margin: 3px 0 12px;
}

.dtf-builder .dtf-saved-cart {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e3e6ea;
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px 14px;
}

.dtf-builder .dtf-saved-cart__thumbs {
    margin-bottom: 0;
}

.dtf-builder .dtf-saved-cart__info {
    flex: 1 1 120px;
    min-width: 0;
}

.dtf-builder .dtf-saved-cart__label {
    color: #1d2327;
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.dtf-builder .dtf-saved-cart__meta {
    color: #8a9099;
    display: block;
    font-size: 11.5px;
}

.dtf-builder .dtf-saved-cart__total {
    color: #1d2327;
    font-size: 13px;
    font-weight: 800;
}

/* preflight */
.dtf-builder .dtf-saved-cart__add {
    background: #ffffff !important;
    border: 1px solid #1d2327 !important;
    border-radius: 3px;
    color: #1d2327;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 14px;
    width: auto;
}

.dtf-builder .dtf-saved-cart__add:hover {
    background: #1d2327 !important;     /* preflight, as above */
    color: #ffffff;
}

@media (max-width: 860px) {
    body.dtf-checkout-open .dtf-builder .dtf-checkout__grid {
        padding: 18px 14px 56px;
    }

    .dtf-builder .dtf-checkout__col--summary .dtf-checkout__colinner {
        padding: 18px 16px 20px;
    }
}


.dtf-builder .dtf-tour__launch {
    margin-top: 14px;
}

/*
 * One raised grey box holding the whole offer: the blue "Guide" label so the
 * eye lands on it, and the black line explaining what it does. A text link read
 * as fine print, and a caption sitting outside the button was a dead target —
 * everything is inside, so the whole box is clickable.
 *
 * Tailwind's preflight strips button backgrounds and borders; every button in
 * this section re-asserts them.
 */
.dtf-builder .dtf-tour__trigger {
    align-items: center;
    background: linear-gradient(#fdfdfd, #e7eaee) !important;
    border: 1px solid #adb2b8 !important;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(17, 17, 17, 0.10);
    cursor: pointer;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    text-align: left;
}

.dtf-builder .dtf-tour__trigger:hover {
    background: linear-gradient(#ffffff, #dde1e7) !important;
    border-color: #8f959d !important;
}

.dtf-builder .dtf-tour__trigger:active {
    background: linear-gradient(#dde1e7, #eef0f3) !important;
    box-shadow: inset 0 1px 3px rgba(17, 17, 17, 0.18);
}

.dtf-builder .dtf-tour__trigger-label {
    color: #2563eb;
    font-size: 14px;
    font-weight: 800;
}

.dtf-builder .dtf-tour__hint {
    color: #1d2327;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.dtf-builder .dtf-tour__trigger-icon {
    align-items: center;
    background: #2563eb;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    flex: none;
    font-size: 12px;
    font-weight: 800;
    height: 19px;
    justify-content: center;
    width: 19px;
}

/* Nothing to guide while the checkout panel is covering the builder. */
body.dtf-checkout-open .dtf-builder .dtf-tour__launch {
    display: none;
}

.dtf-tour[hidden] {
    display: none;
}

.dtf-tour__mask {
    background: rgba(17, 17, 17, 0.55);
    position: fixed;
    /* Over the sticky header (900) and the checkout surface (800). */
    z-index: 9000;
}

.dtf-tour__mask--top {
    left: 0;
    right: 0;
    top: 0;
}

.dtf-tour__mask--bottom {
    bottom: 0;
    left: 0;
    right: 0;
}

.dtf-tour__mask--left {
    left: 0;
}

.dtf-tour__mask--right {
    right: 0;
}

.dtf-tour__ring {
    border-radius: 4px;
    box-shadow: 0 0 0 2px #2563eb;
    pointer-events: none;
    position: fixed;
    z-index: 9001;
}

.dtf-tour__pop {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 18px 46px rgba(17, 17, 17, 0.28);
    color: #1d2327;
    padding: 18px 20px 16px;
    position: fixed;
    width: 320px;
    z-index: 9002;
}

.dtf-tour__pop:focus {
    outline: none;
}

.dtf-tour__count {
    color: #8a9099;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.dtf-tour__title {
    color: #1d2327;
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 6px;
}

.dtf-tour__body {
    color: #5a6470;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.dtf-tour__nav {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.dtf-tour__arrows {
    display: flex;
    gap: 8px;
}

/* preflight */
.dtf-tour__skip {
    background: none !important;
    border: 0 !important;
    color: #8a9099;
    cursor: pointer;
    font-size: 13px;
    padding: 6px 0;
}

.dtf-tour__skip:hover {
    color: #1d2327;
}

/* preflight */
.dtf-tour__back,
.dtf-tour__next {
    align-items: center;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    padding: 8px 14px;
}

.dtf-tour__back {
    background: #ffffff !important;
    border: 1px solid #cdd2d8 !important;
    color: #1d2327;
}

.dtf-tour__back:hover:not(:disabled) {
    border-color: #2563eb !important;
    color: #2563eb;
}

.dtf-tour__back:disabled {
    color: #b7bcc3;
    cursor: default;
    opacity: 0.6;
}

.dtf-tour__next {
    background: #2563eb !important;
    border: 1px solid #2563eb !important;
    color: #ffffff;
}

.dtf-tour__next:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* preflight */
.dtf-tour__x {
    background: none !important;
    border: 0 !important;
    color: #8a9099;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 4px;
    position: absolute;
    right: 8px;
    top: 8px;
}

.dtf-tour__x:hover {
    color: #1d2327;
}

@media (max-width: 380px) {
    .dtf-tour__pop {
        width: 280px;
    }
}

/* =============================================================================
   CHECKOUT TRUST BLOCK — .dtf-trust

   Reasons to finish, in the space under the totals. A white card on the tinted
   summary column so it reads as its own thing rather than more of the receipt.
   ============================================================================= */

.dtf-builder .dtf-trust {
    background: #ffffff;
    border: 1px solid #e3e6ea;
    border-radius: 3px;
    margin-top: 24px;
    padding: 18px 20px;
}

.dtf-builder .dtf-trust__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dtf-builder .dtf-trust__item {
    align-items: flex-start;
    color: #1d2327;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 10px;
    line-height: 1.45;
    margin: 0 0 10px;
}

.dtf-builder .dtf-trust__item:last-child {
    margin-bottom: 0;
}

.dtf-builder .dtf-trust__icon {
    color: #1d7a3e;
    flex: none;
    height: 17px;
    margin-top: 1px;
    width: 17px;
}

.dtf-builder .dtf-trust__rating {
    align-items: center;
    border-top: 1px solid #e3e6ea;
    color: #1d2327;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
    padding-top: 14px;
    text-decoration: none;
}

.dtf-builder .dtf-trust__rating:hover .dtf-trust__rating-count {
    color: #1d2327;
}

.dtf-builder .dtf-trust__rating-logo {
    color: #4285f4;
    display: inline-flex;
    flex: none;
    height: 16px;
    width: 16px;
}

.dtf-builder .dtf-trust__rating-logo svg {
    height: 100%;
    width: 100%;
}

.dtf-builder .dtf-trust__rating-score {
    font-size: 15px;
    font-weight: 800;
}

/* Two star rows stacked: the grey set underneath, the gold set clipped to the
   score's width on top. One element cannot show half a star. */
.dtf-builder .dtf-trust__rating-stars {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1;
    position: relative;
    white-space: nowrap;
}

.dtf-builder .dtf-trust__rating-stars .dtf-rating__stars-bg {
    color: #d8dbe0;
}

.dtf-builder .dtf-trust__rating-stars .dtf-rating__stars-fg {
    color: #f5a623;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
}

.dtf-builder .dtf-trust__rating-count {
    color: #5a6470;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dtf-builder .dtf-trust__help {
    border-top: 1px solid #e3e6ea;
    color: #5a6470;
    font-size: 12px;
    line-height: 1.6;
    margin: 14px 0 0;
    padding-top: 14px;
}

.dtf-builder .dtf-trust__help a {
    color: #1d2327;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* Sign-up modal — marketing opt-in, worded and defaulted by the theme
   (inc/signup-marketing.php) so it matches the account dashboard. */
.dtf-builder .dtf-modal__check--optin {
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 4px;
    text-align: left;
}

.dtf-builder .dtf-modal__check--optin input {
    flex: none;
    margin: 0;
}

.dtf-builder .dtf-modal__optin-hint {
    color: #5a6470;
    display: block;
    font-size: 11px;
    line-height: 1.4;
    margin: 2px 0 14px 26px;
}

/* =============================================================================
   CHECKOUT — THE CUSTOMER'S COUPON WALLET

   Under the coupon box. A coupon they can use is one click away; one they
   cannot says what is missing rather than sitting there greyed out with no
   explanation.
   ============================================================================= */

.dtf-builder .dtf-wallet {
    border-top: 1px solid #e3e6ea;
    margin-top: 14px;
    padding-top: 14px;
}

.dtf-builder .dtf-wallet[hidden] {
    display: none;
}

.dtf-builder .dtf-wallet__title {
    color: #1d2327;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.dtf-builder .dtf-wallet__row {
    align-items: center;
    background: #ffffff;
    border: 1px dashed #cdd2d8;
    border-radius: 3px;
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    padding: 10px 12px;
}

.dtf-builder .dtf-wallet__row.is-recommended {
    background: #f4faf5;
    border: 1px solid #1d7a3e;
}

.dtf-builder .dtf-wallet__badge {
    color: #1d7a3e;
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 3px;
    text-transform: uppercase;
}

.dtf-builder .dtf-wallet__row.is-locked {
    background: #fbfbfc;
    border-style: solid;
}

.dtf-builder .dtf-wallet__info {
    flex: 1 1 auto;
    min-width: 0;
}

.dtf-builder .dtf-wallet__code {
    color: #1d2327;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.dtf-builder .dtf-wallet__amount {
    background: #eef6ef;
    border-radius: 999px;
    color: #1d7a3e;
    font-size: 11px;
    font-weight: 800;
    margin-left: 6px;
    padding: 2px 8px;
}

.dtf-builder .dtf-wallet__row.is-locked .dtf-wallet__amount {
    background: #f2f4f7;
    color: #5a6470;
}

.dtf-builder .dtf-wallet__note {
    color: #5a6470;
    display: block;
    font-size: 12px;
    line-height: 1.45;
    margin-top: 3px;
}

.dtf-builder .dtf-wallet__meters {
    color: #8a9099;
}

/* Tailwind's preflight strips button backgrounds and borders. */
.dtf-builder .dtf-wallet__use {
    background: #1d2327 !important;
    border: 1px solid #1d2327 !important;
    border-radius: 3px;
    color: #ffffff;
    cursor: pointer;
    flex: none;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 14px;
}

.dtf-builder .dtf-wallet__use:hover:not(:disabled) {
    background: #000000 !important;
    border-color: #000000 !important;
}

.dtf-builder .dtf-wallet__use:disabled {
    cursor: default;
    opacity: 0.5;
}

/* =============================================================================
   PRINTABLE WIDTH — the badge on the preview

   57 cm against the 30–40 cm most desktop DTF printers give you. A statement
   of fact on the panel it describes: dark, confident, two short lines. Not
   red, not boxed, not in the form column — it is not a warning.
   ============================================================================= */

.dtf-builder .dtf-bed__spec {
    align-items: flex-end;
    background: #1d2327;
    border-radius: 3px;
    color: #ffffff;
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
    padding: 7px 12px;
    text-align: right;
}

.dtf-builder .dtf-bed__spec-num {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.dtf-builder .dtf-bed__spec-sub {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}

@media (max-width: 480px) {
    .dtf-builder .dtf-bed__spec {
        align-items: flex-start;
        text-align: left;
    }
}

/* =============================================================================
   "PNG FILES ONLY" POPUP — .dtf-pngonly

   Shown when a customer drops or picks anything that is not a PNG. It replaces
   the old convert-to-PNG preview: we no longer guess at a background for them,
   we tell them what a print-ready file is. Amber, not red — it is a request,
   not a failure — and one clear next step: choose a PNG.
   ============================================================================= */

.dtf-builder .dtf-pngonly {
    inset: 0;
    position: fixed;
    z-index: 9600;
}

body.dtf-pngonly-open {
    overflow: hidden;
}

.dtf-builder .dtf-pngonly__backdrop {
    background: rgba(17, 17, 17, 0.6);
    inset: 0;
    position: absolute;
}

.dtf-builder .dtf-pngonly__card {
    background: #ffffff;
    border-radius: 6px;
    border-top: 4px solid #d97706;
    box-shadow: 0 24px 60px rgba(17, 17, 17, 0.32);
    box-sizing: border-box;
    left: 50%;
    max-height: calc(100vh - 32px);
    max-width: 480px;
    overflow-y: auto;
    padding: 30px 30px 24px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
}

.dtf-builder .dtf-pngonly__card:focus {
    outline: none;
}

/* preflight */
.dtf-builder .dtf-pngonly__x {
    background: none !important;
    border: 0 !important;
    color: #8a9099;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    padding: 6px 10px;
    position: absolute;
    right: 8px;
    top: 8px;
    width: auto;
}

.dtf-builder .dtf-pngonly__x:hover {
    color: #1d2327;
}

.dtf-builder .dtf-pngonly__icon {
    background: #fef3c7;
    border-radius: 50%;
    color: #b45309;
    font-size: 20px;
    font-weight: 900;
    height: 40px;
    line-height: 40px;
    margin: 0 0 14px;
    text-align: center;
    width: 40px;
}

.dtf-builder .dtf-pngonly__eyebrow {
    color: #b45309;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.dtf-builder .dtf-pngonly__title {
    color: #1d2327;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 8px;
}

.dtf-builder .dtf-pngonly__lead {
    color: #3c434a;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 18px;
}

.dtf-builder .dtf-pngonly__label {
    color: #8a9099;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.dtf-builder .dtf-pngonly__files {
    border: 1px solid #e3e6ea;
    border-radius: 3px;
    list-style: none;
    margin: 0 0 18px;
    max-height: 132px;
    overflow-y: auto;
    padding: 0;
}

.dtf-builder .dtf-pngonly__file {
    align-items: center;
    border-bottom: 1px solid #eef0f2;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 8px 12px;
}

.dtf-builder .dtf-pngonly__file:last-child {
    border-bottom: 0;
}

.dtf-builder .dtf-pngonly__type {
    background: #fef3c7;
    border-radius: 2px;
    color: #92400e;
    flex: none;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    min-width: 38px;
    padding: 3px 6px;
    text-align: center;
}

.dtf-builder .dtf-pngonly__name {
    color: #1d2327;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dtf-builder .dtf-pngonly__steps {
    color: #1d2327;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 22px;
    padding-left: 20px;
}

.dtf-builder .dtf-pngonly__steps li {
    margin: 0 0 4px;
}

.dtf-builder .dtf-pngonly__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* preflight */
.dtf-builder .dtf-pngonly__close {
    background: #ffffff !important;
    border: 1px solid #cdd2d8 !important;
    border-radius: 3px;
    color: #1d2327;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 18px;
    width: auto;
}

/* preflight */
.dtf-builder .dtf-pngonly__choose {
    background: #1d7a3e !important;
    border: 1px solid #1d7a3e !important;
    border-radius: 3px;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    padding: 12px 22px;
    width: auto;
}

.dtf-builder .dtf-pngonly__choose:hover {
    background: #16632f !important;   /* preflight, as above */
    border-color: #16632f !important;
}

@media (max-width: 480px) {
    .dtf-builder .dtf-pngonly__card {
        padding: 26px 18px 20px;
    }

    .dtf-builder .dtf-pngonly__actions {
        flex-direction: column-reverse;
    }

    .dtf-builder .dtf-pngonly__close,
    .dtf-builder .dtf-pngonly__choose {
        width: 100%;
    }
}

/* =============================================================================
   METRE MILESTONES — under the wallet in the checkout

   Shown while the milestone is still locked: the customer is choosing how much
   to print at this exact moment, so the distance left is worth the space.
   ============================================================================= */

.dtf-builder .dtf-goals {
    border-top: 1px solid #e3e6ea;
    margin: 14px 0 0;
    padding: 14px 0 0;
}

.dtf-builder .dtf-goals__title {
    color: #1d2327;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.dtf-builder .dtf-goals__item {
    background: #f7f8fa;
    border: 1px solid #e3e6ea;
    border-radius: 3px;
    margin: 0 0 8px;
    padding: 10px 12px;
}

.dtf-builder .dtf-goals__item:last-child { margin-bottom: 0; }

.dtf-builder .dtf-goals__item.is-reached {
    background: #f0fdf4;
    border-color: #86efac;
}

.dtf-builder .dtf-goals__head {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.dtf-builder .dtf-goals__reward {
    color: #1d2327;
    font-size: 13px;
    font-weight: 700;
}

.dtf-builder .dtf-goals__far {
    color: #5a6470;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.dtf-builder .dtf-goals__item.is-reached .dtf-goals__far { color: #15803d; }

.dtf-builder .dtf-goals__bar {
    background: #e3e6ea;
    border-radius: 2px;
    height: 6px;
    margin: 8px 0 6px;
    overflow: hidden;
}

.dtf-builder .dtf-goals__fill {
    background: #2563eb;
    display: block;
    height: 100%;
}

.dtf-builder .dtf-goals__item.is-reached .dtf-goals__fill { background: #16a34a; }

.dtf-builder .dtf-goals__note {
    color: #5a6470;
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}

/* Wallet: a businesses-only (VIES) coupon says so under its details. */
.dtf-builder .dtf-wallet__vat {
    color: #1e40af;
    display: block;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 3px;
}