/* ===== Passport Photo Maker Page CSS ===== */

/* Wizard layout */
.pp-wizard{display:grid;grid-template-columns:340px minmax(0,1fr) 320px;gap:12px;padding:12px;min-height:620px;align-items:stretch}
.pp-step{display:none}
.pp-step.active{display:block}

/* Step indicator */
.pp-step-indicator{display:flex;gap:4px;margin-bottom:12px}
.pp-step-dot{width:100%;height:4px;border-radius:2px;background:#e2e8f0;transition:background .3s}
.pp-step-dot.active{background:linear-gradient(90deg,#6366f1,#06b6d4)}
.pp-step-dot.done{background:#22c55e}

/* Navigation */
.pp-nav{display:flex;gap:8px;margin-top:14px}
.pp-nav button{flex:1}

/* Preview pane */
.pp-preview-pane{display:none}
.pp-preview-pane.active{display:block}

/* Action bar */
.pp-action-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;min-height:38px}
.pp-action-left,.pp-action-center,.pp-action-right{display:flex;gap:6px;align-items:center}
.pp-action-left{justify-content:flex-start}
.pp-action-center{justify-content:center}
.pp-action-right{justify-content:flex-end}

/* Eraser mode */
.pp-eraser-mode{background:#f1f5f9;color:#64748b;transition:all .2s}
.pp-eraser-mode.active{background:#6366f1;color:#fff}

/* Canvas upload overlay */
.pp-canvas-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;width:100%;position:absolute;inset:0;z-index:5;background:repeating-conic-gradient(#f8fafc 0% 25%,#f0f4f8 0% 50%) 50%/16px 16px}
.pp-upload-icon{margin-bottom:12px;opacity:.7}
.pp-canvas-file-label{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;max-width:260px;padding:10px 16px;border-radius:10px;
  font-weight:700;font-size:13px;cursor:pointer;
  background:linear-gradient(180deg,#6366f1,#4f46e5);color:#fff;
  border:1px solid rgba(99,102,241,.4);
  box-shadow:0 0 12px rgba(99,102,241,.15),0 3px 10px rgba(99,102,241,.2);
  transition:all .2s;position:relative;overflow:hidden
}
.pp-canvas-file-label::before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0));pointer-events:none;border-radius:10px 10px 0 0}
.pp-canvas-file-label:hover{background:linear-gradient(180deg,#818cf8,#6366f1);transform:translateY(-1px);box-shadow:0 0 20px rgba(99,102,241,.3),0 5px 14px rgba(99,102,241,.25)}

/* Drag over */
.cropper-wrap.dragover{border:2px dashed #6366f1!important;background:rgba(99,102,241,.05)!important}

/* Unit toggle */
.pp-unit-toggle{display:flex;gap:0;border:1px solid #e2e8f0;border-radius:6px;overflow:hidden;margin-bottom:6px}
.pp-unit-btn{flex:1;padding:4px 8px;border:none;background:#f8fafc;color:#64748b;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;text-align:center}
.pp-unit-btn.active{background:linear-gradient(180deg,#6366f1,#4f46e5);color:#fff}
.pp-unit-btn:hover:not(.active){background:#e2e8f0;color:#334155}

/* Face guideline overlay */
.pp-face-guide{position:absolute;pointer-events:none;z-index:9;display:none}
.pp-face-guide-oval{position:absolute;left:50%;top:8%;width:52%;height:62%;transform:translateX(-50%);border:2px dashed rgba(255,255,255,.55);border-radius:50%;box-shadow:0 0 6px rgba(0,0,0,.15);pointer-events:none}
.pp-face-guide-chin{position:absolute;left:20%;right:20%;top:72%;border-top:1.5px dashed rgba(255,255,255,.4);pointer-events:none}
.pp-face-guide-eyes{position:absolute;left:22%;right:22%;top:38%;border-top:1.5px dashed rgba(255,255,255,.3);pointer-events:none}

/* Camera */
#cameraVideo{transform:scaleX(-1)}
#cameraVideo.env-cam{transform:scaleX(1)}

/* How It Works - Process Steps */
.process-steps{display:flex;align-items:flex-start;justify-content:center;gap:6px;flex-wrap:nowrap;max-width:1200px;margin:0 auto}
.process-step{flex:1;min-width:0;max-width:160px;text-align:center;position:relative;padding:8px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;transition:transform .2s,box-shadow .2s}
.process-step:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(99,102,241,.12)}
.process-step img{width:100%;height:auto;border-radius:10px;margin-bottom:8px;border:1px solid #f1f5f9}
.process-step h3{font-size:12px;font-weight:800;color:#1e293b;margin:0 0 4px}
.process-step p{font-size:10.5px;color:#64748b;margin:0;line-height:1.4}
.process-step-num{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:2}
.process-arrow{display:none;align-items:center;padding-top:80px;opacity:.5;flex-shrink:0}

/* SEO + PageSpeed stability */
.seo-content:not(.passport-intro){content-visibility:auto;contain-intrinsic-size:auto 900px}
.cropper-wrap,.passport-preview-box{min-height:350px}

/* Responsive */
@media(max-width:1100px){
  .pp-wizard{grid-template-columns:minmax(0,1fr) 320px}
  .process-steps{flex-wrap:wrap}
  .process-arrow{display:none}
}
@media(max-width:768px){
  .pp-wizard{grid-template-columns:1fr;padding:8px;gap:8px}
  .pp-wizard .card.pp-canvas-card{min-height:auto!important;overflow:visible!important}
  .cropper-wrap{min-height:220px!important;max-height:60vh!important}
  .passport-preview-box{min-height:180px!important}
  #ppStep4Top>div:last-child{flex-wrap:wrap;gap:8px}
}
@media(max-width:600px){
  .process-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .process-step{max-width:none}
  .process-arrow{display:none}
}