@import url('../fonts/studio-text-fonts.css');
/* Integration wrappers inherit the artwork's typography in studio and guest views.
   Saved customer overrides use inline declarations and keep their precedence. */
dtc-e,dtc-field { font:inherit; letter-spacing:inherit; text-transform:inherit; }
.dtc-added-text { position:absolute; z-index:30; transform:translateX(-50%); box-sizing:border-box; white-space:pre-wrap; overflow-wrap:anywhere; font:400 20px/1.25 'DTC Inter',sans-serif; text-align:center; }
.dtc-added-text[hidden], .dtc-text-tools[hidden], .dtc-text-move[hidden] { display:none!important; }
.iv-editing .dtc-added-text { outline:none; cursor:text; min-height:1.25em; pointer-events:auto; }
.iv-editing [data-text-hidden="1"] { opacity:.3; text-decoration:line-through!important; }
.iv-editing .dtc-text-selected { outline:none!important; }
.dtc-text-drag { position:fixed; z-index:2147483101; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:40px; height:40px; padding:0; border:1px solid #fff; border-radius:999px; background:#7425ed; color:#fff; box-shadow:0 3px 12px #27104440; font:500 12px/1.2 'DTC Inter',system-ui,sans-serif; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.dtc-text-drag svg { width:18px; height:18px; flex:none; }
.dtc-text-drag[hidden] { display:none!important; }
.dtc-text-drag:focus-visible { outline:2px solid #7425ed; outline-offset:3px; }
.dtc-text-drag.is-dragging { cursor:grabbing; background:#5b1dbb; }
.dtc-text-dragging, .dtc-text-dragging * { cursor:grabbing!important; user-select:none!important; -webkit-user-select:none!important; }
.dtc-text-tools { position:fixed; z-index:2147483100; width:max-content; max-width:calc(100vw - 20px); box-sizing:border-box; border:1px solid #e6e3ed; border-radius:16px; background:#fff; color:#283246; padding:8px; box-shadow:0 8px 30px #1e293b26; font:400 12px/1.4 'DTC Inter',system-ui,sans-serif; }
.dtc-text-head { display:flex; align-items:center; gap:12px; padding:0 3px 5px; }
.dtc-text-head strong { font-size:12px; }
.dtc-text-head [data-text-status] { margin-left:auto; width:auto; color:#64748b; font-size:10px; }
.dtc-text-head [data-text-status].is-error { color:#be123c; }
.dtc-text-tools button,.dtc-text-tools select,.dtc-text-tools input { box-sizing:border-box; font:inherit; color:inherit; }
.dtc-text-tools button { border:0; background:transparent; border-radius:8px; min-width:32px; height:34px; padding:0 8px; cursor:pointer; white-space:nowrap; }
.dtc-text-tools button:hover { background:#f3f0fa; }
.dtc-text-tools button[aria-pressed="true"] { color:#7425ed; background:#f2ebff; }
.dtc-text-tools button:focus-visible,.dtc-text-tools select:focus-visible,.dtc-text-tools input:focus-visible { outline:2px solid #8b5cf6; outline-offset:1px; }
.dtc-text-tools [data-text-close] { font-size:24px; height:26px; }
.dtc-text-controls { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.dtc-text-controls select { background:#faf9fc; height:34px; border:1px solid #e8e5ef; border-radius:8px; padding:0 4px; width:91px; }
.dtc-text-controls [data-text-font] { width:118px; }
.dtc-text-size,.dtc-text-color { display:flex; height:34px; align-items:center; gap:4px; padding:0 5px; border:1px solid #e8e5ef; border-radius:8px; }
.dtc-text-size input { width:38px; padding:0; background:transparent; border:0; }
.dtc-text-color { width:34px; justify-content:center; padding:0; }
.dtc-text-color input { width:22px; height:26px; border:0; padding:0; background:transparent; cursor:pointer; }
.dtc-text-tools .dtc-tool { min-width:34px; width:34px; padding:0; }
.dtc-text-tools .dtc-tool--danger,.dtc-text-tools .dtc-text-delete { color:#e11d48; }
.dtc-text-move { display:flex; align-items:center; gap:4px; border-top:1px solid #eeeaf4; margin-top:5px; padding-top:4px; color:#64748b; }
.dtc-text-controls [data-text-align] { width:72px; }
@media(max-width:700px) {
 .dtc-text-tools { left:0; right:0; bottom:0; width:100%; max-width:none; border-radius:18px 18px 0 0; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -6px 30px #1e293b22; }
 .dtc-text-head { padding-bottom:8px; }
 .dtc-text-head strong { font-size:13px; }
 .dtc-text-controls { gap:5px; }
 .dtc-text-controls button,.dtc-text-controls select,.dtc-text-size,.dtc-text-color { height:38px; }
 .dtc-text-controls [data-text-font] { flex:1; min-width:105px; }
 .dtc-text-tools input,.dtc-text-tools select { font-size:16px; }
 .dtc-text-controls select { max-width:130px; font-size:12px; }
 .dtc-text-open .dtc-ed-bar,.dtc-text-open .dtc-ed-status { visibility:hidden; }
}

/* A compact second row follows the selected text instead of covering the canvas. */
.dtc-layer-launch.has-inline-text { flex-wrap:wrap; width:390px; max-width:calc(100vw - 16px); border-radius:16px; }
.dtc-layer-launch .dtc-text-inline { display:flex; align-items:center; order:10; flex:1 0 100%; min-width:0; max-width:100%; box-sizing:border-box; gap:2px; margin-top:3px; padding-top:3px; border-top:1px solid #343b41; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#55616a transparent; }
.dtc-layer-launch .dtc-text-inline[hidden] { display:none!important; }
.dtc-text-inline > label,.dtc-text-inline__align { display:flex; align-items:center; flex:none; box-sizing:border-box; gap:2px; height:32px; margin:0; }
.dtc-text-inline :is(input,select) { box-sizing:border-box; font:500 11px/1.2 'DTC Inter',system-ui,sans-serif; color:inherit; border:1px solid #48545e; border-radius:7px; background:#222b32; height:30px; min-width:0; margin:0; }
.dtc-text-inline__font select { width:100px; padding:0 5px; text-overflow:ellipsis; }
.dtc-text-inline__size { padding:0 3px; border:1px solid #48545e; border-radius:7px; }
.dtc-layer-launch .dtc-text-inline__size svg { width:14px; height:14px; }
.dtc-text-inline__size input { width:33px; padding:0; border:0; background:transparent; appearance:textfield; -moz-appearance:textfield; }
.dtc-text-inline__size input::-webkit-inner-spin-button,.dtc-text-inline__size input::-webkit-outer-spin-button { appearance:none; margin:0; }
.dtc-text-inline__color { position:relative; justify-content:center; width:30px; cursor:pointer; }
.dtc-text-inline__color input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.dtc-text-inline__color .dtc-text-color__bar { stroke:var(--text-swatch,#fff); }
.dtc-text-inline__align { margin-left:2px; padding-left:2px; border-left:1px solid #48545e; }
.dtc-layer-launch .dtc-text-inline button { width:30px; min-width:30px; height:32px; min-height:32px; border-radius:7px; }
.dtc-layer-launch .dtc-text-inline button[aria-pressed="true"] { background:#40333b; color:#ffc2cd; }
.dtc-text-inline :is(input,select):focus-visible { outline:2px solid #e8a0a8; outline-offset:-2px; }
@media (min-width:821px) {
 .dtc-layer-launch.has-inline-text { width:420px; }
 .dtc-layer-launch .dtc-text-inline { flex-wrap:wrap; overflow-x:visible; }
}
@media (pointer:coarse), (max-width:820px) {
 .dtc-text-inline > label,.dtc-text-inline__align { height:36px; }
 .dtc-text-inline :is(input,select) { height:34px; font-size:16px; }
 .dtc-layer-launch .dtc-text-inline button { height:36px; min-height:36px; }
}

/* Content-first text sheet, opened only by an explicit add/edit action. */
.dtc-text-manager[hidden],.dtc-text-composer[hidden] { display:none!important; }
body.iv-editing #dtc-text-panel.is-composing { display:flex; flex-direction:column; gap:6px; top:auto; bottom:16px; width:380px; max-width:calc(100vw - 16px); height:min(220px,var(--text-composer-height,33.333dvh))!important; max-height:var(--text-composer-height,33.333dvh)!important; min-height:0; padding:8px; overflow:hidden; }
body.iv-editing #dtc-text-panel.is-composing .dtc-text-head { position:static; flex:none; margin:0; padding:0; min-height:28px; border:0; }
body.iv-editing #dtc-text-panel.is-composing .dtc-text-head strong { font-size:12px; }
body.iv-editing #dtc-text-panel.is-composing [data-text-status] { display:none; }
body.iv-editing #dtc-text-panel.is-composing .dtc-text-composer { display:flex; flex:1 1 auto; flex-direction:column; gap:6px; min-height:0; }
.dtc-text-composer__field { display:flex; flex:1 1 auto; flex-direction:column; gap:4px; min-height:0; margin:0; color:inherit; font-size:11px; }
.dtc-text-composer__field textarea { display:block; box-sizing:border-box; width:100%; min-height:34px; flex:1 1 auto; margin:0; padding:7px 9px; resize:none; border:1px solid var(--st-control,#81909e); border-radius:8px; background:var(--st-soft,#1c2227); color:inherit; font:400 16px/1.4 'DTC Inter',system-ui,sans-serif; }
.dtc-text-composer__actions { display:flex; flex:none; gap:6px; justify-content:flex-end; }
body.iv-editing #dtc-text-panel .dtc-text-composer__actions button { height:44px; min-height:44px; min-width:44px; padding:0 10px; border:1px solid var(--st-control,#81909e); border-radius:8px; font-size:11px; }
body.iv-editing #dtc-text-panel .dtc-text-composer__actions [data-text-manage] { margin-right:auto; border-color:transparent; opacity:.85; padding-left:2px; }
body.iv-editing #dtc-text-panel .dtc-text-composer__actions [data-text-submit] { color:var(--st-action-ink,#24171c); background:var(--st-accent,#e8a0a8); border-color:var(--st-accent,#e8a0a8); }
.dtc-text-composer__actions [data-text-submit]:disabled { opacity:.4; cursor:default; }
.dtc-text-composer__field textarea:focus-visible { outline:2px solid var(--st-accent,#e8a0a8); outline-offset:1px; }
@media (max-width:820px) {
 body.iv-editing #dtc-text-panel.is-composing { left:8px; right:8px; bottom:0; width:calc(100vw - 16px); max-width:560px; height:var(--dtc-mobile-sheet-height,min(220px,var(--text-composer-height,33.333dvh)))!important; max-height:var(--dtc-mobile-sheet-height,var(--text-composer-height,33.333dvh))!important; border-radius:14px 14px 0 0; }
 body.iv-editing #dtc-text-panel.is-composing .dtc-text-composer__field > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 body.iv-editing #dtc-text-panel.is-composing.is-composer-short { padding:6px; gap:4px; overflow-y:auto; overscroll-behavior:contain; }
 body.iv-editing #dtc-text-panel.is-composing.is-composer-short .dtc-text-head { position:sticky; top:0; z-index:3; background:inherit; }
 body.iv-editing #dtc-text-panel.is-composing.is-composer-short .dtc-text-composer { flex:0 0 auto; gap:4px; }
}