/* ============================================
   ClothingV-UPC — Wizard Layout
   ============================================ */

/* --- Wizard Shell (3-column) --- */
.wizard-shell{
  display:grid;
  grid-template-columns:260px 1fr 320px;
  min-height:100vh;
  gap:0;
}

/* --- Sidebar (Step Progress) --- */
.wizard-sidebar{
  position:sticky;top:0;
  height:100vh;
  padding:32px 24px;
  background:linear-gradient(180deg,rgba(10,10,10,.98),rgba(5,5,5,.95));
  backdrop-filter:blur(12px);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  z-index:var(--z-nav);
}
.wizard-sidebar-brand{
  display:flex;align-items:center;gap:10px;
  margin-bottom:40px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.wizard-sidebar-brand-icon{
  width:32px;height:32px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:var(--r-xs);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#fff;
}
.wizard-sidebar-brand-text{
  font-family:'Bebas Neue',sans-serif;
  font-size:18px;letter-spacing:.08em;
}
.wizard-sidebar-brand-text span{color:var(--accent)}

/* Step list */
.wizard-steps{
  display:flex;flex-direction:column;
  gap:4px;flex:1;
}
.wizard-step{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:all var(--t-normal) var(--ease);
  position:relative;
}
.wizard-step:hover{background:rgba(255,255,255,.04)}
.wizard-step.active{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.10)}
.wizard-step.completed{opacity:.7}
.wizard-step.completed:hover{opacity:1}

.wizard-step-num{
  width:32px;height:32px;
  border-radius:50%;
  border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;
  color:var(--muted);
  transition:all var(--t-normal);
  flex-shrink:0;
}
.wizard-step.active .wizard-step-num{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
  box-shadow:0 0 16px var(--accent-glow);
}
.wizard-step.completed .wizard-step-num{
  border-color:var(--green);
  background:rgba(141,255,196,.15);
  color:var(--green);
}

.wizard-step-info{display:flex;flex-direction:column;gap:2px}
.wizard-step-title{
  font-size:14px;font-weight:500;
  color:var(--muted);
  transition:color var(--t-fast);
}
.wizard-step.active .wizard-step-title{color:var(--text)}
.wizard-step-sub{font-size:11px;color:var(--dim)}

/* Connector lines between steps */
.wizard-step:not(:last-child)::after{
  content:'';
  position:absolute;
  left:29px;top:44px;
  width:2px;height:calc(100% - 16px);
  background:var(--line);
  z-index:-1;
}
.wizard-step.completed:not(:last-child)::after{
  background:var(--green);opacity:.4;
}

.wizard-sidebar-footer{
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.wizard-sidebar-footer a{
  font-size:13px;color:var(--dim);
  display:flex;align-items:center;gap:8px;
  transition:color var(--t-fast);
}
.wizard-sidebar-footer a:hover{color:var(--muted)}

/* --- Main Content Area --- */
.wizard-content{
  padding:40px 48px;
  overflow-y:auto;
  max-height:100vh;
}

.wizard-page{
  display:none;
  animation:fadeIn .35s var(--ease) both;
}
.wizard-page.active{display:block}

.wizard-page-header{margin-bottom:36px}
.wizard-page-header h2{
  font-size:32px;letter-spacing:.06em;
  margin-bottom:8px;
}
.wizard-page-header p{color:var(--muted);font-size:15px;line-height:1.6}

/* Navigation buttons at bottom */
.wizard-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.wizard-nav-info{
  font-size:13px;color:var(--dim);
}

/* --- Preview Panel (right sidebar) --- */
.wizard-preview{
  position:sticky;top:0;
  height:100vh;
  border-left:1px solid var(--line);
  background:rgba(10,10,10,.6);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.wizard-preview-header{
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.wizard-preview-header h4{
  font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;
  color:var(--muted);letter-spacing:.05em;
  text-transform:uppercase;
}
.wizard-preview-header .btn-ghost{font-size:12px;padding:4px 10px}
.wizard-preview-frame{
  flex:1;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:12px;
}
.wizard-preview-frame iframe{
  width:1200px;height:800px;
  transform:scale(0.24);
  transform-origin:top left;
  border:none;
  border-radius:8px;
  pointer-events:none;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
}

/* --- Drag & Drop Zone --- */
.drop-zone{
  border:2px dashed var(--line);
  border-radius:var(--r-md);
  padding:40px 24px;
  text-align:center;
  cursor:pointer;
  transition:all var(--t-normal);
  position:relative;
}
.drop-zone:hover,.drop-zone.dragover{
  border-color:var(--accent);
  background:var(--accent-dim);
}
.drop-zone-icon{font-size:36px;margin-bottom:12px;opacity:.6}
.drop-zone-text{font-size:14px;color:var(--muted);margin-bottom:4px}
.drop-zone-hint{font-size:12px;color:var(--dim)}
.drop-zone input[type="file"]{
  position:absolute;inset:0;opacity:0;cursor:pointer;
}
.drop-zone-preview{
  width:80px;height:80px;
  border-radius:var(--r-sm);
  object-fit:contain;
  border:1px solid var(--line);
  margin:0 auto;
}

/* --- Theme Cards --- */
.theme-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.theme-card{
  padding:16px;
  border-radius:var(--r-sm);
  cursor:pointer;
  text-align:center;
  transition:all var(--t-normal);
  background:rgba(255,255,255,.03);
  border:2px solid transparent;
}
.theme-card:hover{border-color:rgba(255,255,255,.12)}
.theme-card.active{border-color:var(--accent);box-shadow:var(--glow)}
.theme-swatch{
  width:100%;height:48px;
  border-radius:var(--r-xs);
  margin-bottom:10px;
}
.theme-card-name{font-size:13px;font-weight:600}

/* --- Glow Cards --- */
.glow-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.glow-card{
  padding:20px;
  border-radius:var(--r-sm);
  cursor:pointer;
  text-align:center;
  transition:all var(--t-normal);
  background:rgba(255,255,255,.03);
  border:2px solid transparent;
}
.glow-card:hover{border-color:rgba(255,255,255,.12)}
.glow-card.active{border-color:var(--accent)}
.glow-demo{
  width:60px;height:60px;
  border-radius:var(--r-sm);
  margin:0 auto 12px;
  background:var(--panel);
  border:1px solid var(--line);
  transition:box-shadow var(--t-normal);
}
.glow-card-name{font-size:13px;font-weight:500}

/* --- Module Cards --- */
.module-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
.module-card{
  padding:20px;
  border-radius:var(--r-sm);
  display:flex;align-items:flex-start;gap:14px;
  cursor:pointer;
  transition:all var(--t-normal);
  background:rgba(255,255,255,.03);
  border:2px solid transparent;
}
.module-card.active{
  border-color:var(--accent);
  background:var(--accent-dim);
}
.module-card.locked{opacity:.6;cursor:default}
.module-card-icon{font-size:24px;flex-shrink:0;margin-top:2px}
.module-card-info{flex:1;min-width:0}
.module-card-name{font-size:14px;font-weight:600;margin-bottom:2px}
.module-card-desc{font-size:12px;color:var(--muted);line-height:1.4}
.module-counter{
  font-size:14px;color:var(--muted);
  margin-top:16px;
  display:flex;align-items:center;gap:8px;
}
.module-counter strong{color:var(--accent)}

/* --- Hosting Cards --- */
.hosting-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.hosting-card{
  padding:28px;
  border-radius:var(--r-md);
  cursor:pointer;
  text-align:center;
  transition:all var(--t-normal);
  background:rgba(255,255,255,.03);
  border:2px solid transparent;
}
.hosting-card:hover{border-color:rgba(255,255,255,.12)}
.hosting-card.active{
  border-color:var(--accent);
  background:var(--accent-dim);
  box-shadow:var(--glow);
}
.hosting-card-icon{font-size:36px;margin-bottom:14px}
.hosting-card-title{font-size:18px;font-weight:600;margin-bottom:6px}
.hosting-card-desc{font-size:13px;color:var(--muted);line-height:1.5}

/* --- Domain Input --- */
.domain-input-wrap{
  display:flex;align-items:center;gap:0;
  margin-top:20px;
}
.domain-input-wrap .input{
  border-radius:var(--r-xs) 0 0 var(--r-xs);
  border-right:none;
  text-align:right;
  max-width:200px;
}
.domain-suffix{
  padding:12px 16px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:0 var(--r-xs) var(--r-xs) 0;
  font-size:14px;
  color:var(--muted);
  white-space:nowrap;
}

/* --- Summary Cards (Step 5) --- */
.summary-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-bottom:32px;
}
.summary-card{
  padding:20px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
}
.summary-card-header{
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;
  font-size:13px;font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.summary-card-body{font-size:14px;line-height:1.6}
.summary-card-body strong{color:var(--accent)}

.export-buttons{
  display:flex;gap:14px;flex-wrap:wrap;
}

/* --- Custom Color Picker --- */
.color-picker-row{
  display:flex;align-items:center;gap:14px;
  margin-top:16px;
}
.color-picker-swatch{
  width:44px;height:44px;
  border-radius:var(--r-xs);
  border:2px solid var(--line);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.color-picker-swatch input[type="color"]{
  position:absolute;inset:-8px;
  width:calc(100% + 16px);height:calc(100% + 16px);
  cursor:pointer;border:none;padding:0;
}
.color-picker-hex{
  width:120px;
}

/* --- Responsive --- */
@media(max-width:1100px){
  .wizard-shell{grid-template-columns:240px 1fr}
  .wizard-preview{display:none}
}
@media(max-width:768px){
  .wizard-shell{grid-template-columns:1fr}
  .wizard-sidebar{
    position:fixed;top:0;left:-280px;
    width:280px;height:100vh;
    transition:left var(--t-normal) var(--ease);
    z-index:var(--z-modal);
  }
  .wizard-sidebar.open{left:0}
  .wizard-content{padding:20px}
  .theme-grid{grid-template-columns:repeat(2,1fr)}
  .glow-grid{grid-template-columns:repeat(2,1fr)}
  .hosting-grid{grid-template-columns:1fr}
  .summary-grid{grid-template-columns:1fr}
  .wizard-mobile-header{display:flex !important}
}

/* Mobile header (hidden by default) */
.wizard-mobile-header{
  display:none;
  align-items:center;justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(16px);
  position:sticky;top:0;
  z-index:var(--z-nav);
}
.wizard-mobile-header .nav-brand-text{font-size:16px}
.wizard-mobile-toggle{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-xs);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  font-size:18px;
}

/* Sidebar overlay (mobile) */
.wizard-sidebar-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  z-index:calc(var(--z-modal) - 1);
}
.wizard-sidebar.open ~ .wizard-sidebar-overlay{display:block}