/* ---- trigger button, sat over the top-right corner of the photo gallery ---- */
.media-design-btn{
  position:absolute;top:12px;right:12px;z-index:6;display:flex;align-items:center;gap:6px;
  padding:8px 12px;border:1px solid rgba(247,240,230,.55);border-radius:999px;cursor:pointer;
  background:rgba(20,8,10,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  color:var(--cream);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.02em;
  transition:background .2s ease,border-color .2s ease;
}
.media-design-btn svg{flex-shrink:0;}
.media-design-btn:hover{background:rgba(20,8,10,.68);border-color:rgba(247,240,230,.85);}
@media (max-width:480px){.media-design-btn span{display:none;}.media-design-btn{padding:9px;border-radius:50%;}}

/* ---- modal shell (mirrors the site's .lightbox pattern) ---- */
.da-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;}
.da-modal[hidden]{display:none;}
body.da-modal-open{overflow:hidden;}
.da-modal-backdrop{position:absolute;inset:0;background:rgba(20,8,10,.72);}
.da-modal-panel{
  position:relative;background:var(--cream);border-radius:10px;max-width:960px;width:100%;
  max-height:90vh;overflow-y:auto;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.da-modal-close{
  position:absolute;top:14px;right:16px;background:none;border:0;font-size:26px;line-height:1;
  color:var(--maroon);cursor:pointer;padding:4px 8px;
}
.da-modal-close:hover{color:var(--maroon-bright);}

/* ---- the design tool itself, now living inside the modal panel ---- */
.design-assistant h3{font-size:1.1rem;margin:0 0 4px;padding-right:28px;}
.da-sub{color:var(--maroon);opacity:.75;display:block;margin-bottom:16px;}
.da-body{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start;}
@media (max-width:820px){.da-body{grid-template-columns:1fr;}}
.da-photo-picker-label{margin:0 0 6px;font-size:.72rem;color:var(--maroon-deep);opacity:.75;}
.da-photo-picker-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.da-photo-thumb{width:56px;height:56px;border-radius:6px;border:2px solid var(--line);padding:0;overflow:hidden;cursor:pointer;background:#fff;opacity:.65;flex-shrink:0;}
.da-photo-thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.da-photo-thumb:hover{opacity:.9;}
.da-photo-thumb.active{border-color:var(--maroon-deep);border-width:2.5px;opacity:1;box-shadow:0 0 0 1px var(--maroon-deep);}
.da-canvas-wrap{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;line-height:0;min-height:120px;}
.da-canvas-wrap canvas{width:100%;height:auto;display:block;touch-action:none;cursor:grab;}
.da-canvas-wrap canvas.dragging{cursor:grabbing;}
.da-field{margin-bottom:14px;}
.da-field label{display:block;font-size:.7rem;margin-bottom:6px;color:var(--maroon);}
.da-field input[type=text]{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:4px;font-family:inherit;background:#fff;}
.da-field input[type=file]{width:100%;font-size:.85rem;}
.da-field input[type=range]{width:100%;}
.da-row{display:flex;gap:18px;}
.da-row>div{flex:1;}
.da-row input[type=range]{width:100%;}
.da-row input[type=color]{width:100%;height:36px;padding:2px;border:1px solid var(--line);border-radius:4px;background:#fff;}
.da-actions,.da-send-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.da-hint{font-size:.78rem;color:var(--maroon);opacity:.7;margin:2px 0 16px;}
.da-status{min-height:1.2em;color:var(--maroon-deep);}
.da-status.is-error{color:var(--maroon-bright);}
.da-ready{animation:daGlow 1.4s ease-in-out 2;}
@keyframes daGlow{0%,100%{box-shadow:none;}50%{box-shadow:0 0 0 4px rgba(184,147,90,.45);}}