/* Door Sign Modeler — all styles scoped under .dsm-app so they never leak into
   the WordPress theme (and the theme doesn't leak in). Embeds as a fixed-height
   component in page content.

   Palette / typography follow the shared site design system (dark tools UI, RTL,
   amber/gold brand accent, blue for selection, green for download, hairline
   outlines, Rubik font). */

.dsm-app {
  --bg:          #0d1117;               /* app background (near-black) */
  --panel:       #12161e;               /* side panel + top bar + viewer */
  --card:        #161b24;               /* cards / raised surfaces */
  --card-2:      #1b212c;               /* slightly raised (footer) */
  --input:       #10151d;               /* input / field backgrounds */
  --text:        #e8ecf2;               /* primary text */
  --muted:       #98a2b3;               /* secondary text / labels */
  --accent:      #dca24a;               /* amber/gold — headings + primary action */
  --accent-soft: #d3a05a;               /* amber face for primary buttons/tabs */
  --accent-2:    #2f86ff;               /* blue — selection / checkboxes / hover */
  --ok:          #33bd6b;               /* green — download / success */
  --border:      rgba(255,255,255,.14); /* hairline outline for all frames */
  --on-accent:   #201603;               /* dark text on amber/green */
  --radius:      11px;
  --shadow:      0 10px 30px rgba(0,0,0,.35);

  direction: rtl;
  height: 680px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
  font-weight: 600; /* bolder baseline across the whole tool */
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative; /* positioning context for the centered error dialog */
}
.dsm-app *, .dsm-app *::before, .dsm-app *::after { box-sizing: border-box; }
.dsm-app [hidden] { display: none !important; }

.dsm-app .topbar {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.dsm-app .brand { font-size: 18px; font-weight: 800; color: var(--accent); letter-spacing: .3px; }
.dsm-app .subtitle { font-size: 13px; color: var(--muted); }

.dsm-app .layout {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
  padding: 14px;
  min-height: 0;
}

/* ---- Sidebar panel: tabs + scroll area + pinned footer (no outer scroll) ---- */
.dsm-app .panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.dsm-app .tabs { display: flex; gap: 6px; padding: 12px 12px 0; flex: 0 0 auto; }
.dsm-app .tab {
  flex: 1; font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 9px 8px; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border);
}
.dsm-app .tab:hover:not(.on) { color: var(--text); border-color: var(--accent); }
.dsm-app .tab.on { background: var(--accent-soft); color: var(--on-accent); border-color: var(--accent-soft); }

.dsm-app .panel-scroll {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px;
}
.dsm-app .tabpane { display: flex; flex-direction: column; gap: 12px; }

.dsm-app .panel-foot {
  flex: 0 0 auto; border-top: 1px solid var(--border); background: var(--card-2);
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.dsm-app .thumb {
  display: grid; place-items: center;
  background: var(--input); border: 1px solid var(--border);
  border-radius: 9px; padding: 6px;
}
.dsm-app .thumb img { max-height: 76px; max-width: 100%; border-radius: 6px; object-fit: contain; display: block; }

.dsm-app .hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }

.dsm-app .filedrop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 120px; border: 2px dashed var(--border); border-radius: var(--radius);
  cursor: pointer; color: var(--muted); text-align: center; padding: 16px 14px;
  transition: border-color .15s, color .15s, background .15s;
}
.dsm-app .filedrop:hover, .dsm-app .filedrop.drag { border-color: var(--accent); color: var(--text); background: var(--card); }
.dsm-app .filedrop .fd-icon { font-size: 26px; line-height: 1; }
.dsm-app .filedrop .fd-main { font-size: 14px; font-weight: 700; color: var(--text); }
.dsm-app .filedrop .fd-tip {
  font-size: 11.5px; font-weight: 600; line-height: 1.5; color: var(--muted);
  max-width: 280px; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px;
}
.dsm-app .filedrop .fd-tip b { color: var(--accent); }

.dsm-app .field { margin-bottom: 12px; }
.dsm-app .field:last-child { margin-bottom: 0; }
.dsm-app .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dsm-app .field-row .field { margin-bottom: 12px; }
.dsm-app .field-row:has(> [hidden]) { grid-template-columns: 1fr; }
.dsm-app .info { cursor: help; color: var(--muted); font-size: 12px; opacity: .8; }
.dsm-app .info:hover { color: var(--accent); }
.dsm-app .field label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--muted); }

.dsm-app input[type="number"], .dsm-app select {
  width: 100%; background: var(--input); border: 1px solid var(--border);
  color: var(--text); border-radius: 9px; padding: 9px 11px;
  font-size: 14px; font-family: inherit; font-weight: 600;
}
.dsm-app input[type="number"] { border-radius: 7px; }
/* Custom dropdown arrow (RTL: arrow on the left), per the design system. */
.dsm-app select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238a93a6' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: left 12px center;
  padding-left: 30px;
}
.dsm-app input:focus, .dsm-app select:focus { outline: none; border-color: var(--accent); }
.dsm-app .field.checkbox label { display: flex; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
.dsm-app .field.checkbox input { width: auto; accent-color: var(--accent-2); }

.dsm-app .palette { display: flex; flex-direction: column; gap: 8px; }
.dsm-app .swatch-row { display: grid; grid-template-columns: 26px 1fr 92px; align-items: center; gap: 10px; }
.dsm-app .swatch-row.ams { grid-template-columns: 26px 1fr; }
.dsm-app .swatch { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255,255,255,.25); }
.dsm-app .swatch-meta { font-size: 12px; color: var(--muted); }
.dsm-app .swatch-meta b { color: var(--text); font-weight: 700; }
.dsm-app .swatch-row input { padding: 7px 9px; }

.dsm-app button {
  font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--input); color: var(--text); cursor: pointer;
  transition: transform .05s, filter .15s, background .15s, border-color .15s, opacity .15s;
}
.dsm-app button:hover:not(:disabled) { border-color: var(--accent-2); }
.dsm-app button:active:not(:disabled) { transform: translateY(1px); }
.dsm-app button:disabled { opacity: .45; cursor: not-allowed; }
/* Primary action (amber) */
.dsm-app button.primary { background: var(--accent-soft); border: none; color: var(--on-accent); }
.dsm-app button.primary:hover:not(:disabled) { filter: brightness(1.06); border-color: transparent; }
/* Download / success (green) */
.dsm-app #downloadBtn:not(:disabled) { background: var(--ok); border: none; color: #fff; }
.dsm-app #downloadBtn:not(:disabled):hover { filter: brightness(1.06); border-color: transparent; }
/* Download button: "Download STL" + lightning icon + number, in one row. */
.dsm-app #downloadBtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 15.5px; }
.dsm-app #downloadBtn .dl-ico { display: inline-flex; line-height: 0; margin-inline-start: 12px; } /* extra space from the label */
.dsm-app #downloadBtn .dl-ico svg { display: block; }
.dsm-app #downloadBtn .dl-txt { font-weight: 700; }
.dsm-app #downloadBtn .dl-num { font-weight: 700; font-variant-numeric: tabular-nums; }

.dsm-app .status { font-size: 12px; color: var(--muted); min-height: 16px; }
.dsm-app .status.err { color: #ff7a90; }
.dsm-app .status.ok { color: var(--ok); }

.dsm-app .viewer {
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; min-height: 0;
}
.dsm-app .canvas-host { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dsm-app .canvas-host canvas { display: block; width: 100%; height: 100%; }
.dsm-app .placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--muted);
  gap: 10px; text-align: center; padding: 20px;
}
.dsm-app .ph-icon { font-size: 44px; }

.dsm-app .dsm-spinner {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(16, 19, 26, .6);
  color: var(--text); font-size: 13px;
}
.dsm-app .dsm-spinner .ring {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  animation: dsm-spin .9s linear infinite;
}
@keyframes dsm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dsm-app .dsm-spinner .ring { animation-duration: 2.4s; }
}

/* Bottom banner: explains the on-screen watermark vs. the clean download */
.dsm-app .dsm-watermark-note {
  flex: 0 0 auto; text-align: center;
  padding: 9px 16px; font-size: 12.5px; font-weight: 600; line-height: 1.4;
  color: var(--accent); background: linear-gradient(180deg, #3a2c0c, #2c2109);
  border-top: 1px solid rgba(220, 162, 74, .5);
}

/* Centered error dialog (server/communication failures).
   Shared "house standard" msgbox — fixed colors so it looks identical across
   all the site's apps (dark card, red top stripe, blue action). */
.dsm-app .dsm-modal {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(8, 11, 20, .66);
}
.dsm-app .dsm-modal-card {
  width: min(430px, 100%); box-sizing: border-box;
  background: #1e2438; border: 1px solid #2b3350;
  border-top: 4px solid #ff5c72; border-radius: 16px;
  box-shadow: var(--shadow); padding: 26px 24px; text-align: center;
  animation: dsm-pop .16s ease-out;
}
.dsm-app .dsm-modal-icon { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.dsm-app .dsm-modal-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #e7eaf3; }
.dsm-app .dsm-modal-msg { margin: 0 0 20px; font-size: 14px; line-height: 1.65; color: #9aa3bd; }
.dsm-app .dsm-modal-btn {
  min-width: 130px; padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 14px; color: #fff;
  background: linear-gradient(90deg, #5b8cff, #7c5cff);
}
.dsm-app .dsm-modal-btn:hover { filter: brightness(1.08); }
@keyframes dsm-pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dsm-app .dsm-modal-card { animation: none; } }

.dsm-app .dims {
  padding: 10px 16px; background: var(--panel); border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap;
}
.dsm-app .dims b { color: var(--text); font-weight: 700; }

/* "Better on desktop" notice — hidden by default, shown only on phones below. */
.dsm-app .mobile-notice { display: none; }

/* ---- Mobile / narrow: stack into one column (viewer on top, controls below) ---
   Kept LAST in the file so these rules win over the same-specificity base rules
   they override (equal specificity => later wins), per the responsive guide. */
@media (max-width: 860px) {
  .dsm-app .mobile-notice {
    display: block; margin: 10px 12px 0; text-align: center;
    font-weight: 700; font-size: 13px; color: var(--on-accent);
    background: var(--accent-soft); border-radius: 9px; padding: 8px 11px;
  }
  /* row (grid) -> column (flex): viewer takes a fixed slice up top, the panel
     fills the rest and scrolls internally (min-height:0 lets it actually clip). */
  .dsm-app .layout {
    display: flex; flex-direction: column; gap: 10px; padding: 10px;
  }
  .dsm-app .viewer { order: -1; flex: 0 0 42%; min-height: 200px; }
  .dsm-app .panel  { flex: 1 1 auto; min-height: 0; }
  .dsm-app .topbar { padding: 10px 16px; }
  .dsm-app .subtitle { display: none; }  /* save vertical space on small screens */
}