/* WhatsApp DP Tool — page-specific bits on top of wz-tool-shell.css */
.wdp-editor { padding:18px 26px 26px; }

.wdp-filebar { display:flex; align-items:center; gap:12px; padding:10px 10px 10px 12px; border:1px solid var(--tk-line); border-radius:14px; background:#f5f8fd; margin-bottom:16px; }
.wdp-fileic { width:40px; height:40px; border-radius:11px; background:#e8f0ff; color:var(--tk-blue); display:grid; place-items:center; flex:0 0 auto; font-size:1.05rem; }
.wdp-filemeta { flex:1; min-width:0; }
.wdp-filemeta b { display:block; font-size:.9rem; color:var(--tk-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wdp-filemeta span { font-size:.78rem; color:var(--tk-muted); }
.wdp-filebar .wdp-change { padding:.55rem .95rem; font-size:.86rem; flex:0 0 auto; background:#fff; border:1px solid var(--tk-line); border-radius:11px; }
.wdp-filebar .wdp-change:hover { background:#eef4ff; border-color:#c3d4ef; color:var(--tk-blue); }
.wdp-filebar .wdp-change:focus { outline:none; }
.wdp-filebar .wdp-change:focus-visible { outline:2px solid var(--tk-blue); outline-offset:2px; }

.wdp-work { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:22px; align-items:start; }
.wdp-stage-col { min-width:0; }

/* Square preview with optional WhatsApp-style circle overlay */
.wdp-stage { position:relative; width:100%; max-width:460px; aspect-ratio:1/1; margin:0 auto; border-radius:16px; overflow:hidden; border:1px solid var(--tk-line);
    background-color:#eef2f8; background-image:linear-gradient(45deg,#e3e9f3 25%,transparent 25%,transparent 75%,#e3e9f3 75%),linear-gradient(45deg,#e3e9f3 25%,transparent 25%,transparent 75%,#e3e9f3 75%);
    background-size:20px 20px; background-position:0 0,10px 10px; touch-action:none; }
.wdp-stage canvas { display:block; width:100%; height:100%; }
.wdp-stage.pan { cursor:grab; } .wdp-stage.pan:active { cursor:grabbing; }
.wdp-ring { position:absolute; inset:0; pointer-events:none; border-radius:50%; box-shadow:0 0 0 9999px rgba(11,31,68,.5); outline:2px solid rgba(255,255,255,.85); outline-offset:-2px; transition:opacity .2s; }
.wdp-stage.no-ring .wdp-ring { opacity:0; }
.wdp-stage-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; max-width:460px; margin:12px auto 0; }
.wdp-dims { font-size:.8rem; font-weight:600; color:var(--tk-muted); background:#eef3fb; padding:.3rem .7rem; border-radius:999px; }

/* Toggle switch */
.wdp-switch { display:inline-flex; align-items:center; gap:.55rem; margin:0; font-size:.86rem; font-weight:600; color:var(--tk-navy); cursor:pointer; user-select:none; }
.wdp-switch input { appearance:none; -webkit-appearance:none; width:38px; height:22px; border-radius:999px; background:#cfd9ea; position:relative; cursor:pointer; transition:background .18s; margin:0; flex:0 0 auto; }
.wdp-switch input::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s; }
.wdp-switch input:checked { background:var(--tk-blue); }
.wdp-switch input:checked::after { transform:translateX(16px); }
.wdp-switch input:focus-visible { outline:2px solid var(--tk-blue); outline-offset:2px; }

/* Side panel */
.wdp-side { border:1px solid var(--tk-line); border-radius:16px; background:#fafcff; padding:18px; display:flex; flex-direction:column; gap:18px; }

.wdp-modes { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wdp-mode { position:relative; margin:0; cursor:pointer; }
.wdp-mode input { position:absolute; opacity:0; pointer-events:none; }
.wdp-mode-in { position:relative; display:flex; flex-direction:column; gap:.1rem; height:100%; padding:12px 12px 11px; border:1.5px solid var(--tk-line); border-radius:13px; background:#fff; transition:border-color .15s, background .15s, box-shadow .15s; }
.wdp-mode-in i { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:#eef4ff; color:var(--tk-blue); font-size:.95rem; margin-bottom:.4rem; transition:.15s; }
.wdp-mode-in b { font-size:.9rem; color:var(--tk-navy); line-height:1.2; }
.wdp-mode-in small { font-size:.74rem; color:var(--tk-muted); line-height:1.3; }
.wdp-mode-in em { position:absolute; top:10px; right:10px; font-style:normal; font-size:.64rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--tk-ok); background:#e8f7ee; padding:.12rem .45rem; border-radius:999px; }
.wdp-mode:hover .wdp-mode-in { border-color:#c3d4ef; }
.wdp-mode input:checked + .wdp-mode-in { border-color:var(--tk-blue); background:#f3f7ff; box-shadow:0 8px 18px rgba(37,99,235,.14); }
.wdp-mode input:checked + .wdp-mode-in i { background:var(--tk-blue); color:#fff; }
.wdp-mode input:focus-visible + .wdp-mode-in { outline:2px solid var(--tk-blue); outline-offset:2px; }

.wdp-opt input[type=range] { width:100%; accent-color:var(--tk-blue); margin:.45rem 0 .1rem; }
.wdp-val { color:var(--tk-blue); text-transform:none; letter-spacing:0; margin-left:.25rem; }
.wdp-help { display:block; color:var(--tk-muted); font-size:.78rem; margin-top:.4rem; line-height:1.4; }
.wdp-help .fa { color:var(--tk-blue); margin-right:.2rem; }
.wdp-center { text-align:center; margin:0; min-height:1.1em; }
.wdp-note { margin:0; padding:.7rem .85rem; border-radius:12px; background:#eef4ff; border:1px solid #d6e2fb; color:#1e3a8a; font-size:.82rem; line-height:1.45; }

/* Colour swatches */
.wdp-swatches { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.wdp-sw { width:32px; height:32px; padding:0; border-radius:50%; border:2px solid #fff; background:var(--c); box-shadow:0 0 0 1px #d3ddec; cursor:pointer; transition:transform .12s, box-shadow .12s; }
.wdp-sw:hover { transform:scale(1.08); }
.wdp-sw.on { box-shadow:0 0 0 2px var(--tk-blue); }
.wdp-sw:focus-visible { outline:2px solid var(--tk-blue); outline-offset:3px; }
.wdp-custom { position:relative; display:inline-flex; align-items:center; gap:.45rem; height:34px; margin:0; padding:0 .7rem 0 4px; border:1px solid var(--tk-line); border-radius:999px; background:#fff; cursor:pointer; }
.wdp-custom.on { border-color:var(--tk-blue); box-shadow:0 0 0 2px rgba(37,99,235,.18); }
.wdp-custom input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }
.wdp-custom-sw { width:26px; height:26px; border-radius:50%; background:conic-gradient(#f43f5e,#f59e0b,#22c55e,#06b6d4,#6366f1,#d946ef,#f43f5e); box-shadow:inset 0 0 0 2px #fff; }
.wdp-custom code { font:600 .78rem/1 'Inter',monospace; color:var(--tk-navy); background:none; padding:0; }

.wdp-out { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wdp-out .tk-select { height:40px; }
.wdp-dl { width:100%; justify-content:center; }

@media (max-width:900px) { .wdp-work { grid-template-columns:1fr; } }
@media (max-width:520px) {
    .wdp-editor { padding:14px 16px 20px; }
    .wdp-filebar .wdp-change span { display:none; }
    .wdp-filebar .wdp-change { padding:.6rem .8rem; }
    .wdp-side { padding:14px; }
}

/* Mouse clicks should not leave a focus ring (keyboard focus still shows one) */
.wdp-editor button:focus:not(:focus-visible) { outline:none; }