/* TLS Sticker Designer — structural styles for [tls_sticker_designer].
   Scoped to .tls-designer-root so nothing bleeds into the theme. Visual styles
   for individual controls are inline in the JS. */

.tls-designer-root { --sd-purple:#5f2f92; }
.tls-designer-root, .tls-designer-root * { box-sizing: border-box; }
/* Our icons are stroke-only inline SVGs. Force it so a theme/Elementor
   `svg { fill:currentColor }` rule can't override them into solid blobs. */
.tls-designer-root svg { fill: none !important; stroke: currentColor !important; vertical-align: middle; max-width: none; }
.tls-designer-root .cap { font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#8a7f9c; font-weight:700; margin-bottom:12px; }
.tls-designer-root .muted { font-size:12px; color:#8a7f9c; line-height:1.5; }
.tls-designer-root input, .tls-designer-root textarea, .tls-designer-root button, .tls-designer-root select { font-family:'Poppins', Arial, sans-serif; }
/* ID selector (#tls-designer-root) so these beat any theme/Elementor CLASS rule
   that colours descendants white — while inline colours (tabs, CTA, sticker text,
   price rows) still win, because an inline style beats even an ID rule. */
#tls-designer-root .sd-app { color:#241b33; }
#tls-designer-root .sd-app div, #tls-designer-root .sd-app span, #tls-designer-root .sd-app p, #tls-designer-root .sd-app label, #tls-designer-root .sd-app button:not(.sd-next), #tls-designer-root .sd-app input, #tls-designer-root .sd-app textarea, #tls-designer-root .sd-app select { color: inherit; }
#tls-designer-root .cap { color:#8a7f9c !important; }
#tls-designer-root .muted { color:#8a7f9c !important; }

.tls-designer-root .sd-app { display:flex; flex-direction:column; height:var(--sd-h, 100vh); min-height:560px; font-family:'Poppins', Arial, sans-serif; color:#241b33; background:#f4f1f8; overflow:hidden; }
.tls-designer-root .sd-row { display:flex; flex:1; min-height:0; }
.tls-designer-root .sd-nav { width:86px; flex:none; background:#5f2f92; display:flex; flex-direction:column; gap:4px; padding:12px 8px; }
.tls-designer-root .sd-left { width:272px; flex:none; background:#fff; border-right:1px solid #e7e1f0; overflow-y:auto; padding:18px; }
.tls-designer-root .sd-canvas { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; background-color:#eee9f4; background-image:radial-gradient(#dbd2e8 1px,transparent 1px); background-size:22px 22px; position:relative; }
.tls-designer-root .sd-right { width:316px; flex:none; background:#fff; border-left:1px solid #e7e1f0; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:18px; }
.tls-designer-root .sd-next { width:100%; padding:12px; border-radius:10px; border:none; background:#5f2f92; color:#fff; font-weight:700; font-size:14px; cursor:pointer; }
.tls-designer-root .sd-next:hover { background:#4f2680; }

@media (max-width:960px) {
  .tls-designer-root .sd-app { height:auto; min-height:0; }
  .tls-designer-root .sd-row { flex-direction:column; min-height:0; }
  .tls-designer-root .sd-nav { width:100%; flex-direction:row; overflow-x:auto; gap:6px; padding:8px 10px; }
  .tls-designer-root .sd-nav button { flex:0 0 auto; min-width:66px; }
  .tls-designer-root .sd-canvas { order:2; min-height:340px; padding:24px 12px; }
  .tls-designer-root .sd-left { order:3; width:100%; border-right:none; border-top:1px solid #e7e1f0; overflow:visible; }
  .tls-designer-root .sd-right { order:4; width:100%; border-left:none; border-top:1px solid #e7e1f0; overflow:visible; }
}