/* =============================================
   STRAPZY'S — 3D Design Studio (customize page)
   Everything is scoped under .ds-app so it can't clash with the site styles.
   ============================================= */

.ds-app {
  --grey-100: #161616;
  --grey-200: #242424;
  --grey-300: #343434;
  --grey-400: #666666;
  --grey-500: #999999;
  --studio-top: 76px;          /* height of the fixed site nav */
  display: grid; grid-template-columns: minmax(340px, 460px) 1fr;
  border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200);
  color: var(--white); font-family: var(--font-body);
  scroll-margin-top: var(--studio-top);
  margin-top: var(--studio-top);   /* the studio opens the page, right under the fixed nav */
  position: relative; z-index: 1;
}
.ds-app *, .ds-app *::before, .ds-app *::after { box-sizing: border-box; }
.ds-app [hidden] { display: none !important; }   /* e.g. .ds-btn's inline-flex must not reveal hidden buttons */

.ds-app .ds-panel { border-right: 1px solid var(--grey-200); padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ds-app .ds-view {
  position: sticky; top: var(--studio-top); height: calc(100vh - var(--studio-top));
  background: radial-gradient(ellipse at 50% 40%, #1d1d1d 0%, #0b0b0b 70%); min-height: 520px;
}
.ds-app .ds-view canvas { display: block; width: 100%; height: 100%; transition: opacity .2s; }
.ds-app .ds-view.ds-switching canvas { opacity: 0.35; }
.ds-app .ds-view.ds-switching .ds-sizes { opacity: 0.5; pointer-events: none; }
.ds-app .ds-view.ds-switching::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid var(--grey-300); border-top-color: var(--accent); border-radius: 50%; animation: ds-spin .8s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-app #viewer { position: absolute; inset: 0; }

.ds-app .ds-title { font-family: var(--font-display); font-size: 44px; line-height: 0.95; margin: 0; letter-spacing: 0.5px; font-weight: 400; }
.ds-app .ds-sub { font-size: 14px; color: var(--grey-500); line-height: 1.6; margin: 8px 0 0; }
.ds-app .ds-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey-500); margin: 0 0 10px; font-weight: 600; }

.ds-app .ds-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--grey-100); padding: 4px; border-radius: 10px; }
.ds-app .ds-tab { border: 0; background: transparent; color: var(--grey-500); font: 600 13px var(--font-body); padding: 10px; border-radius: 7px; cursor: pointer; letter-spacing: 0.5px; }
.ds-app .ds-tab.active { background: var(--grey-300); color: var(--white); }
.ds-app .ds-tab:disabled { opacity: 0.35; cursor: not-allowed; }

.ds-app .ds-stage { display: flex; justify-content: center; align-items: center; background: var(--grey-100); border-radius: 12px; padding: 18px; position: relative; }
.ds-app .ds-stage .canvas-container { border-radius: 4px; }
.ds-app .ds-stage canvas { touch-action: none; }
.ds-app .ds-overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
.ds-app .ds-pad[hidden] { display: none; }
.ds-app .ds-dims { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--grey-400); letter-spacing: 0.5px; }

.ds-app .ds-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ds-app .ds-btn {
  border: 1px solid var(--grey-300); background: var(--grey-100); color: var(--white);
  font: 500 13px var(--font-body); padding: 10px 14px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: border-color .15s, background .15s;
}
.ds-app .ds-btn:hover { border-color: var(--grey-500); }
.ds-app .ds-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ds-app .ds-btn--primary { background: var(--accent); color: var(--black); border-color: var(--accent); font-weight: 700; }
.ds-app .ds-btn--primary:hover { border-color: var(--white); }
.ds-app .ds-btn--wide { flex: 1; justify-content: center; }

.ds-app .ds-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ds-app .ds-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--grey-300); cursor: pointer; padding: 0; }
.ds-app .ds-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--black) inset; }
.ds-app input[type=color] { width: 34px; height: 34px; border: 2px solid var(--grey-300); border-radius: 50%; padding: 0; background: none; cursor: pointer; }
.ds-app input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.ds-app input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }

.ds-app .ds-input { flex: 1; min-width: 0; background: var(--grey-100); border: 1px solid var(--grey-300); color: var(--white); font: 15px var(--font-body); padding: 10px 12px; border-radius: 8px; }
.ds-app .ds-input:focus { outline: none; border-color: var(--accent); }
.ds-app select.ds-input { flex: 0 0 auto; }
.ds-app textarea.ds-input { width: 100%; min-height: 70px; resize: vertical; }

.ds-app .ds-drop { display: block; border: 1.5px dashed var(--grey-300); border-radius: 10px; padding: 16px; text-align: center; font-size: 13px; color: var(--grey-500); cursor: pointer; transition: border-color .15s, color .15s; }
.ds-app .ds-drop:hover, .ds-app .ds-drop.over { border-color: var(--accent); color: var(--white); }
.ds-app .ds-drop strong { color: var(--white); }

.ds-app .ds-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; max-height: 172px; overflow-y: auto; margin-top: 8px; padding-right: 4px; }
.ds-app .ds-flag { border: 1px solid var(--grey-300); background: var(--grey-100); border-radius: 6px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ds-app .ds-flag:hover { border-color: var(--accent); }
.ds-app .ds-flag i { width: 36px; height: 27px; border-radius: 2px; display: block; background: url(../assets/flags/sprite.webp) 0 0 / 432px 297px no-repeat; }
.ds-app .ds-flag span { font-size: 9px; color: var(--grey-500); line-height: 1.1; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ds-app .ds-starters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ds-app .ds-starter { border: 1px solid var(--grey-300); background: var(--grey-100); color: var(--white); border-radius: 8px; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 10px var(--font-body); }
.ds-app .ds-starter b { font: 22px var(--font-display); line-height: 1; height: 24px; }
.ds-app .ds-starter:hover { border-color: var(--accent); }
.ds-app .ds-history { gap: 6px; }
.ds-app .ds-history .ds-btn { padding: 7px 12px; }
.ds-app .ds-resume { background: var(--grey-100); border: 1px solid var(--accent); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ds-app .ds-resume[hidden] { display: none; }
.ds-app .ds-warn { margin: 0; font-size: 13px; line-height: 1.5; color: #ffcf5c; background: rgba(255, 207, 92, 0.08); border: 1px solid rgba(255, 207, 92, 0.35); border-radius: 8px; padding: 8px 10px; }
.ds-app .ds-warn[hidden] { display: none; }
.ds-app .ds-textfx { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.ds-app .ds-selected { background: var(--grey-100); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ds-app .ds-selected[hidden] { display: none; }

.ds-app .ds-view-tools { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.ds-app .ds-sizes { position: absolute; right: 20px; top: 20px; display: flex; gap: 6px; background: rgba(22,22,22,.85); padding: 4px; border-radius: 10px; }
.ds-app .ds-hint { position: absolute; left: 20px; top: 20px; font-size: 12px; color: var(--grey-500); }
.ds-app .ds-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--grey-500); }
.ds-app .ds-note { font-size: 12px; color: var(--grey-400); line-height: 1.6; }

/* header: title, price and rating */
.ds-app .ds-head .section-tag { margin-bottom: 10px; }
.ds-app .ds-pricebar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; }
.ds-app .ds-pricebar .ohp-amount { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--accent); }
.ds-app .ds-pricebar .ohp-note { font-size: 13px; color: var(--grey-500); }
.ds-app .ds-stars { font-size: 13px; color: var(--grey-500); text-decoration: none; white-space: nowrap; }
.ds-app .ds-stars span { color: var(--accent); letter-spacing: 1px; }

/* size picker */
.ds-app .ds-sizecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ds-app .ds-sizecard {
  border: 1px solid var(--grey-300); background: var(--grey-100); color: var(--white); border-radius: 10px;
  padding: 10px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
  font-family: var(--font-body); transition: border-color .15s;
}
.ds-app .ds-sizecard:hover { border-color: var(--grey-500); }
.ds-app .ds-sizecard.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ds-app .ds-sizecard b { font-size: 14px; font-weight: 700; }
.ds-app .ds-sizecard span { font-size: 12px; color: var(--accent); font-weight: 600; }
.ds-app .ds-sizecard small { font-size: 10.5px; color: var(--grey-500); line-height: 1.35; }

/* order panel (end of the studio controls) */
.ds-app .ds-order { border-top: 1px solid var(--grey-200); padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.ds-app .ds-order .submit-price { margin: 0; }
.ds-app .ds-order .btn-add-to-cart { width: 100%; }
.ds-app .ds-order .order-input { width: 100%; }
.ds-app .ds-order .cz-field-block { margin: 0; }
.ds-app .ds-field-label { font-size: 13px; color: var(--grey-500); display: block; margin: 0 0 6px; }

@media (max-width: 900px) {
  .ds-app { grid-template-columns: 1fr; }
  .ds-app .ds-view { order: -1; position: relative; top: auto; height: 56vh; min-height: 360px; }
  .ds-app .ds-panel { border-right: 0; padding: 20px 16px 32px; }
  .ds-app .ds-title { font-size: 36px; }
  .ds-app { --studio-top: 64px; }
  .ds-app .ds-hint { display: none; }
}