/**
 * assets/css/designer.css
 *
 * Styly frontendu návrháře oblečení.
 * Vše je omezeno na .apparel-designer-wrap, aby nedošlo ke konfliktům s Elementorem.
 * CSS custom properties jsou nastavovány inline Elementor style kontroly.
 */

/* ── Výchozí hodnoty CSS proměnných ──────────────────────────────────────── */
.apparel-designer-wrap {
  --cad-accent:       #2563eb;
  --cad-accent-dark:  #1d4ed8;
  --cad-bg:           #f8fafc;
  --cad-panel-bg:     #ffffff;
  --cad-border:       #e2e8f0;
  --cad-text:         #1e293b;
  --cad-text-muted:   #64748b;
  --cad-error:        #ef4444;
  --cad-success:      #22c55e;
  --cad-radius:       8px;
  --cad-shadow:       0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --cad-transition:   220ms ease;

  font-family: inherit;
  color:        var(--cad-text);
  background:   var(--cad-bg);
  padding:      1.5rem;
  border-radius: var(--cad-radius);
  box-sizing:   border-box;
}

.apparel-designer-wrap *,
.apparel-designer-wrap *::before,
.apparel-designer-wrap *::after {
  box-sizing: inherit;
}

/* ── Indikátor kroků ────────────────────────────────────────────────────── */
.cad-steps-bar {
  display:         flex;
  align-items:     center;
  gap:             0;
  margin-bottom:   1.5rem;
  padding:         0;
  list-style:      none;
  counter-reset:   none;
}

.cad-step {
  display:         flex;
  align-items:     center;
  flex:            1;
  gap:             .5rem;
  padding:         .6rem 1rem;
  background:      var(--cad-panel-bg);
  border:          1px solid var(--cad-border);
  border-right:    none;
  color:           var(--cad-text-muted);
  font-size:       .85rem;
  font-weight:     500;
  transition:      background var(--cad-transition), color var(--cad-transition);
  cursor:          default;
}

.cad-step:first-child { border-radius: var(--cad-radius) 0 0 var(--cad-radius); }
.cad-step:last-child  { border-right: 1px solid var(--cad-border); border-radius: 0 var(--cad-radius) var(--cad-radius) 0; }

.cad-step.active {
  background: var(--cad-accent);
  border-color: var(--cad-accent);
  color:       #fff;
}

.cad-step.completed {
  background: color-mix(in srgb, var(--cad-accent) 15%, white);
  color:      var(--cad-accent);
}

.cad-step-num {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            22px;
  height:           22px;
  border-radius:    50%;
  background:       rgba(255,255,255,.25);
  font-size:        .75rem;
  font-weight:      700;
  flex-shrink:      0;
}

.cad-step.active .cad-step-num    { background: rgba(255,255,255,.3); }
.cad-step.completed .cad-step-num { background: var(--cad-accent); color: #fff; }

/* ── Hlavní layout ──────────────────────────────────────────────────────── */
.cad-main-layout {
  display:       grid;
  grid-template-columns: 180px 1fr 220px;
  gap:           1rem;
  align-items:   start;
}

/* ── Panely ─────────────────────────────────────────────────────────────── */
.cad-panel {
  background:    var(--cad-panel-bg);
  border:        1px solid var(--cad-border);
  border-radius: var(--cad-radius);
  padding:       1rem;
  box-shadow:    var(--cad-shadow);
}

.cad-panel-title {
  margin:        0 0 .75rem;
  font-size:     .9rem;
  font-weight:   700;
  color:         var(--cad-text);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── Swatche barev oblečení ────────────────────────────────────────────── */
.cad-swatches {
  display:       flex;
  flex-wrap:     wrap;
  gap:           .5rem;
}

.cad-swatch {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  background:    var(--swatch-color, #ccc);
  border:        3px solid var(--cad-border);
  cursor:        pointer;
  transition:    border-color var(--cad-transition), transform var(--cad-transition), box-shadow var(--cad-transition);
  padding:       0;
  appearance:    none;
}

.cad-swatch:hover {
  transform:     scale(1.1);
  box-shadow:    0 0 0 3px rgba(37,99,235,.3);
}

.cad-swatch.active {
  border-color:  var(--cad-accent);
  box-shadow:    0 0 0 3px var(--cad-accent);
  transform:     scale(1.08);
}

.cad-variant-name {
  margin-top:    .5rem;
  font-size:     .8rem;
  color:         var(--cad-text-muted);
  font-weight:   500;
  min-height:    1.2em;
}

/* ── Oblast canvasu ─────────────────────────────────────────────────────── */
.cad-canvas-area {
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           .75rem;
}

.cad-canvas-wrap {
  position:      relative;
  width:         100%;
  aspect-ratio:  1;
  background:    #f1f5f9;
  border:        1px solid var(--cad-border);
  border-radius: var(--cad-radius);
  overflow:      hidden;
  box-shadow:    var(--cad-shadow);
}

.cad-canvas-wrap canvas {
  display:       block;
  width:         100% !important;
  height:        auto !important;
}

.cad-canvas-hint {
  font-size:     .85rem;
  color:         var(--cad-text-muted);
  text-align:    center;
  margin:        0;
  min-height:    1.4em;
  transition:    color var(--cad-transition);
}

/* ── Pravý panel – ovládání loga ────────────────────────────────────────── */
.cad-section {
  margin-bottom: 1rem;
}

.cad-section h4 {
  margin:        0 0 .5rem;
  font-size:     .85rem;
  font-weight:   700;
  color:         var(--cad-text);
}

.cad-upload-btn {
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           .4rem;
  width:         100%;
  padding:       .6rem 1rem;
  background:    var(--cad-accent);
  color:         #fff;
  border-radius: var(--cad-radius);
  cursor:        pointer;
  font-size:     .85rem;
  font-weight:   600;
  transition:    background var(--cad-transition);
  border:        none;
  text-align:    center;
}

.cad-upload-btn:hover { background: var(--cad-accent-dark); }

.cad-upload-icon {
  font-size:     1.1rem;
  line-height:   1;
}

/* ── Paleta barev loga ──────────────────────────────────────────────────── */
.cad-color-palette {
  display:       flex;
  flex-wrap:     wrap;
  gap:           .4rem;
  margin-bottom: .75rem;
}

.cad-palette-swatch {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  border:        2px solid var(--cad-border);
  cursor:        pointer;
  padding:       0;
  appearance:    none;
  transition:    border-color var(--cad-transition), transform var(--cad-transition);
}

.cad-palette-swatch:hover  { transform: scale(1.15); border-color: var(--cad-text-muted); }
.cad-palette-swatch.active { border-color: var(--cad-accent); box-shadow: 0 0 0 2px var(--cad-accent); }

.cad-custom-color-row {
  display:       flex;
  align-items:   center;
  gap:           .4rem;
  flex-wrap:     wrap;
  margin-bottom: .5rem;
  font-size:     .8rem;
}

.cad-custom-color-row input[type="color"] {
  width:         30px;
  height:        30px;
  padding:       0;
  border:        1px solid var(--cad-border);
  border-radius: var(--cad-radius);
  cursor:        pointer;
}

.cad-custom-color-row input[type="text"] {
  width:         70px;
  padding:       .3rem .4rem;
  border:        1px solid var(--cad-border);
  border-radius: var(--cad-radius);
  font-size:     .8rem;
}

/* ── Tlačítka ────────────────────────────────────────────────────────────── */
.cad-btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  padding:       .55rem 1.1rem;
  border-radius: var(--cad-radius);
  font-size:     .9rem;
  font-weight:   600;
  cursor:        pointer;
  border:        none;
  transition:    background var(--cad-transition), color var(--cad-transition), box-shadow var(--cad-transition);
  text-decoration: none;
  line-height:   1.3;
}

.cad-btn:focus-visible {
  outline:       3px solid var(--cad-accent);
  outline-offset: 2px;
}

.cad-btn-primary {
  background:    var(--cad-accent);
  color:         #fff;
}
.cad-btn-primary:hover { background: var(--cad-accent-dark); }

.cad-btn-ghost {
  background:    transparent;
  color:         var(--cad-text-muted);
  border:        1px solid var(--cad-border);
}
.cad-btn-ghost:hover { background: var(--cad-bg); color: var(--cad-text); }

.cad-btn-sm  { padding: .35rem .75rem; font-size: .8rem; }
.cad-btn-lg  { padding: .75rem 2rem;   font-size: 1rem;  }

/* ── Spodní sekce ────────────────────────────────────────────────────────── */
.cad-bottom-section {
  margin-top:    1.5rem;
}

.cad-cta-row {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  flex-wrap:     wrap;
}

.cad-form-wrap {
  margin-top:    1.5rem;
  padding:       1.5rem;
  background:    var(--cad-panel-bg);
  border:        1px solid var(--cad-border);
  border-radius: var(--cad-radius);
  box-shadow:    var(--cad-shadow);
  animation:     cadFadeIn .25s ease;
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.cad-hidden   { display: none !important; }
.cad-sr-only  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.cad-hint {
  font-size:     .8rem;
  color:         var(--cad-text-muted);
  margin:        .4rem 0 0;
}

.cad-error-msg {
  color:         var(--cad-error);
  font-size:     .82rem;
  margin:        .3rem 0 0;
  min-height:    1.2em;
}

.cad-loading-indicator {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  color:         var(--cad-text-muted);
  font-size:     .85rem;
}

.cad-spinner {
  display:        inline-block;
  width:          16px;
  height:         16px;
  border:         2px solid var(--cad-border);
  border-top-color: var(--cad-accent);
  border-radius:  50%;
  animation:      cadSpin .7s linear infinite;
}

/* Zástupný symbol v Elementor editoru */
.cad-editor-placeholder {
  padding:        2rem;
  text-align:     center;
  border:         2px dashed var(--cad-border);
  border-radius:  var(--cad-radius);
  color:          var(--cad-text-muted);
  font-size:      .95rem;
}

/* ── Animace ─────────────────────────────────────────────────────────────── */
@keyframes cadSpin    { to { transform: rotate(360deg); } }
@keyframes cadFadeIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Přepínač přední / zadní strany ─────────────────────────────────────── */
.cad-side-toggle {
  display:        flex;
  gap:            .4rem;
  margin-bottom:  .6rem;
}

.cad-side-btn {
  flex:           1;
  padding:        .45rem .8rem;
  border:         1px solid var(--cad-border);
  border-radius:  var(--cad-radius);
  background:     var(--cad-panel-bg);
  color:          var(--cad-text-muted);
  font-size:      .82rem;
  font-weight:    600;
  cursor:         pointer;
  transition:     background var(--cad-transition), color var(--cad-transition), border-color var(--cad-transition);
}

.cad-side-btn:hover:not(:disabled) {
  background: var(--cad-bg);
  color:      var(--cad-text);
}

.cad-side-btn.active {
  background:   var(--cad-accent);
  border-color: var(--cad-accent);
  color:        #fff;
}

.cad-side-btn:disabled {
  opacity:  .4;
  cursor:   not-allowed;
}

/* ── Sekundární tlačítko (PDF) ───────────────────────────────────────────── */
.cad-btn-secondary {
  background:  var(--cad-panel-bg);
  color:       var(--cad-accent);
  border:      2px solid var(--cad-accent);
}
.cad-btn-secondary:hover {
  background: color-mix(in srgb, var(--cad-accent) 10%, white);
}

/* ── Zápatí ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .cad-main-layout {
    grid-template-columns: 1fr;
  }

  .cad-panel-left {
    order: 1;
  }
  .cad-canvas-area {
    order: 0; /* Canvas jde jako první */
  }
  .cad-panel-right {
    order: 2;
  }
}

@media (max-width: 600px) {
  .apparel-designer-wrap {
    padding: 1rem .75rem;
  }

  .cad-steps-bar {
    flex-wrap: wrap;
    gap: .3rem;
  }

  .cad-step {
    flex: none;
    border: 1px solid var(--cad-border);
    border-radius: var(--cad-radius);
    padding: .4rem .7rem;
  }

  .cad-step-label {
    display: none; /* Na mobilu zobrazíme jen číslo */
  }

  .cad-cta-row {
    flex-direction: column;
    align-items:    stretch;
  }

  .cad-btn-lg {
    width:      100%;
    text-align: center;
  }
}