/* Lanyard designer, "studio" look. Loaded after designer.css only when config.php has
   'designer_theme' => 'studio'. Set it to 'classic' (or delete this file) for the original look.
   Everything here is scoped to .dz--studio, so it changes nothing else on the site. */

.dz--studio { background: linear-gradient(180deg, var(--tint) 0, #fff 520px); padding-top: 20px; }

/* Controls on the left, preview on the right */
.dz--studio .dz__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.dz--studio .dz__stage { order: 2; }

/* Preview: a framed "studio" card. A white header band holds the live label and the view tabs,
   and the drawing starts below it, so nothing sits on top of the lanyard. */
.dz--studio .dz__canvas { --band: 64px; border: 0; border-radius: 22px; background: #EEF6FC; box-shadow: 0 0 0 1px rgba(0, 30, 99, .08), 0 28px 56px -30px rgba(0, 30, 99, .5); }
.dz--studio .dz__canvas canvas { position: absolute; left: 0; right: 0; bottom: 0; top: var(--band); width: 100%; height: calc(100% - var(--band)); }
.dz--studio .dz__canvas::before { content: 'Live preview'; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: var(--band); display: flex; align-items: center; padding: 0 0 0 40px; background: #fff; border-bottom: 1px solid var(--line); font: 500 .88rem/1 var(--font); color: var(--navy); letter-spacing: .01em; }
.dz--studio .dz__canvas::after { content: ''; position: absolute; z-index: 2; top: calc(var(--band) / 2 - 4px); left: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(144, 206, 51, .6); animation: dz-live 2s infinite; }
@keyframes dz-live { 70% { box-shadow: 0 0 0 7px rgba(144, 206, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(144, 206, 51, 0); } }
@media (prefers-reduced-motion: reduce) { .dz--studio .dz__canvas::after { animation: none; } }

/* View tabs: a light segmented control in the header band */
.dz--studio .dz__views { z-index: 3; top: calc(var(--band) / 2); right: 14px; bottom: auto; left: auto; transform: translateY(-50%); gap: 2px; padding: 4px; background: var(--tint); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.dz--studio .dz__views button { min-height: 34px; padding: 0 14px; border-radius: 9px; color: var(--muted); font-weight: 500; }
.dz--studio .dz__views button:hover { background: rgba(0, 164, 227, .08); color: var(--navy); }
.dz--studio .dz__views button.is-on { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(0, 30, 99, .12), 0 2px 8px rgba(0, 30, 99, .08); }
.dz--studio .dz__views button.is-on::after { content: ''; display: block; height: 2px; margin: 3px auto -5px; width: 18px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--green)); }
.dz--studio .dz__note { display: flex; align-items: center; gap: 6px; margin-top: 12px; }

/* Heading */
.dz--studio .dz__head h1 { font-size: clamp(2rem, 3.4vw, 2.7rem); }

/* Steps: white cards with a cyan-to-green top stripe and square numbers */
.dz--studio .dz-step { position: relative; margin-top: 18px; padding: 22px 22px 8px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }
.dz--studio .dz-step::before { content: ''; position: absolute; top: -1px; left: 22px; right: 22px; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--cyan), var(--green)); }
.dz--studio .dz-step__legend { float: left; width: 100%; margin-bottom: 18px; font-size: 1.12rem; }
.dz--studio .dz-step__legend + * { clear: both; }
.dz--studio .dz-step__n { width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: #fff; font-size: .95rem; }
.dz--studio form.dz-step { padding-bottom: 22px; }

/* Choices: soft square chips with a tick when chosen */
.dz--studio .dz-chip { border-radius: 10px; }
.dz--studio .dz-chip:has(input:checked) { background: var(--cyan-soft); border-color: var(--cyan); color: var(--navy); box-shadow: inset 0 0 0 1px var(--cyan); }
.dz--studio .dz-chip:has(input:checked)::before,
.dz--studio .dz-tier:has(input:checked)::after,
.dz--studio .dz-type:has(input:checked)::after {
  content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.dz--studio .dz-chip--img:has(input:checked)::before { position: absolute; top: 6px; right: 6px; }
.dz--studio .dz-chip--img:has(input:checked) { background: #fff; }

.dz--studio .dz-tier { border-radius: 12px; }
.dz--studio .dz-tier:has(input:checked) { background: #fff; border-color: var(--green-2); box-shadow: inset 0 0 0 1px var(--green-2), 0 8px 18px -12px rgba(125, 185, 40, .9); }
.dz--studio .dz-tier:has(input:checked) .dz-tier__qty { color: var(--green-2); }
.dz--studio .dz-tier:has(input:checked) .dz-tier__now { color: var(--navy); }
.dz--studio .dz-tier:has(input:checked)::after { position: absolute; top: 8px; right: 8px; background-color: var(--green-2); }

.dz--studio .dz-type { padding-right: 34px; border-radius: 14px; }
.dz--studio .dz-type:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 1px var(--cyan), 0 8px 18px -12px rgba(0, 164, 227, .8); }
.dz--studio .dz-type:has(input:checked)::after { position: absolute; top: 10px; right: 10px; }

.dz--studio .dz-limit { background: var(--tint); border: 1px dashed #C6D8EA; }

/* Colours: round swatches */
.dz--studio .dz-swatches button { border-radius: 50%; }
.dz--studio .dz-swatches button.is-on { outline-color: var(--navy); }
.dz--studio .dz-toggles button.is-on { background: var(--cyan); border-color: var(--cyan); }

.dz--studio .dz-drop { background: #fff; border-color: #9FD9F2; }

/* Price: navy card */
.dz--studio .dz-estimate { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); border: 0; color: #C9D6F2; padding: 20px 22px; border-radius: 16px; }
.dz--studio .dz-estimate::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(rgba(0, 164, 227, .35), transparent 70%); pointer-events: none; }
.dz--studio .dz-estimate__unit { color: #fff; }
.dz--studio .dz-estimate__unit small { color: #9FB4E2; }
.dz--studio .dz-estimate__total strong { color: var(--green); }
.dz--studio .dz-estimate__setup, .dz--studio .dz-estimate__note { color: #9FB4E2; }

@media (max-width: 960px) {
  .dz--studio { padding-top: 0; background: #fff; }
  /* Phones: full-height drawing, small live label, tabs at the bottom (as before) */
  .dz--studio .dz__canvas { --band: 0px; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); }
  .dz--studio .dz__canvas::before { top: 10px; left: 10px; right: auto; height: auto; padding: 6px 12px 6px 26px; border: 0; border-radius: 99px; box-shadow: var(--shadow-sm); font-size: .78rem; }
  .dz--studio .dz__canvas::after { top: 21px; left: 20px; }
  .dz--studio .dz__views { top: auto; right: auto; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, .96); box-shadow: var(--shadow-sm); }
  .dz--studio .dz__views button.is-on::after { display: none; }
  .dz--studio .dz__views button.is-on { background: var(--navy); color: #fff; }
  .dz--studio .dz__note { display: none; }
  .dz--studio .dz__stage.is-mini .dz__canvas::before, .dz--studio .dz__stage.is-mini .dz__canvas::after { display: none; }
  .dz--studio .dz__panel { background: var(--tint); }
  .dz--studio .dz-step { padding: 18px 16px 6px; }
  .dz--studio form.dz-step { padding-bottom: 18px; }
  .dz--studio .dz-bar { background: var(--navy); border-top: 0; }
  .dz--studio .dz-bar__price strong { color: #fff; }
  .dz--studio .dz-bar__price span { color: #9FB4E2; }
}