/* ROOT */
.passport-tool-wrap{
  max-width:1150px;
  margin:30px auto;
  background:#f5f7fb;
  padding:22px;
  border-radius:14px;
  box-shadow:0 12px 35px rgba(0,0,0,.08);
  font-family:Arial, Helvetica, sans-serif;
}

.passport-tool-wrap h2{
  font-size:20px;
  margin-bottom:14px;
  color:#1f2937;
}
.passport-tool-wrap h2 span{
  font-size:13px;
  color:#6b7280;
}

/* GLOBAL */
.global-controls{
  display:flex;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.global-controls select,
.global-controls input{
  padding:6px 8px;
  border-radius:6px;
  border:1px solid #d1d5db;
  font-size:13px;
}
#customSizeWrap{display:none;gap:6px;}
#customSizeWrap input{width:100px;}

/* LAYOUT */
.tool-layout{display:flex;gap:22px;}
.left-panel{
  width:340px;
  background:#f8fafc;
  padding:14px;
  border-radius:12px;
}
.right-panel{
  flex:1;
  background:#eef2ff;
  padding:14px;
  border-radius:12px;
}

/* IMAGE BLOCK */
.img-section{
  background:#fff;
  border:1px solid #e5e7eb;
  padding:12px;
  border-radius:10px;
  margin-bottom:14px;
}
.img-section.template{display:none;}
.img-section.active{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.15);
}

/* HEADER */
.enable-row{font-size:13px;font-weight:600;}
.upload-row{display:flex;gap:8px;align-items:flex-end;margin:6px 0;}
.upload-row input[type=file]{flex:1;}
.qty-wrap{width:70px;}
.qty-wrap label{font-size:11px;}
.qty-wrap input{width:100%;}
.img-header{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
}

.img-settings .img-qty{
  height:34px;
}

.img-thumb{
  width:80px;height:100px;
  border:2px dashed #c7d2fe;
  background:#eef2ff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  font-size:22px;
  color:#6366f1;
  margin:6px 0;
}
.img-thumb img{width:100%;height:100%;object-fit:cover;}

.img-edit-btn{
  display:none;
  width:100%;
  padding:7px;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  color:#1e40af;
  border-radius:6px;
  cursor:pointer;
}
.img-section.has-image:not(.active) .img-edit-btn{display:block;}

/* SETTINGS */
.img-settings{display:none;margin-top:10px;}
.img-section.active .img-settings{display:block;}

.img-settings label{
  font-size:12px;
  font-weight:600;
  margin-top:8px;
  display:block;
}
.img-settings input{width:100%;padding:6px;border-radius:6px;border:1px solid #d1d5db;}
.color-row{display:flex;gap:10px;}
.color-row > div{flex:1;}
.check-row{margin-top:8px;}
.img-settings hr{margin:10px 0;border:0;border-top:1px solid #e5e7eb;}

/* BUTTONS */
.add-image-btn{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:2px dashed #6366f1;
  background:#eef2ff;
  color:#1e40af;
  font-weight:600;
  cursor:pointer;
  margin-bottom:10px;
}
.add-image-btn:hover{
  background:#6366f1;
  color:#fff;
}

.print-btn{
  width:100%;
  padding:12px;
  border-radius:10px;
  background:#2563eb;
  color:#fff;
  font-size:15px;
  font-weight:600;
  border:none;
  cursor:pointer;
}

/* PREVIEW */
.preview-stage{
  position:relative;
  background:#fff;
  border-radius:14px;
  padding:12px;
  box-shadow:inset 0 0 0 2px #c7d2fe;
}
#layoutGuide{
  position:absolute;
  inset:12px;
  border:2px dashed #c7d2fe;
  pointer-events:none;
}
#previewCanvas{
  width:100%;
  max-width:760px;
  border-radius:12px;
  background:#fff;
}
/* FIX: PHOTO QTY WIDTH */
.img-settings .img-qty{
  width: 120px !important;
  min-width: 120px;
  padding: 6px 10px;
  font-size: 14px;
}
/* ===============================
   FIX QTY OVERFLOW (DESKTOP)
================================ */
.img-header{
  position: relative;
  padding-right: 70px; /* space for qty */
}

.img-header .img-qty{
  position: absolute;
  right: 8px;
  top: 32px;
  width: 64px !important;
  min-width: 64px;
  padding: 4px 6px;
  font-size: 13px;
}
/* ===============================
   MOBILE FIX
================================ */
@media (max-width: 768px){

  .img-header{
    padding-right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .img-header .img-upload{
    width: 100%;
  }

  .img-header .img-qty{
    position: static;
    width: 100% !important;
    margin-top: 6px;
  }
}
/* ===============================
   FILE INPUT OVERFLOW FIX
================================ */
.img-upload{
  width: 120px;
  font-size: 12px;
}

/* hide filename text */
.img-upload::-webkit-file-upload-button{
  cursor: pointer;
}

.img-upload::file-selector-button{
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #1e40af;
  font-size: 12px;
  cursor: pointer;
}

.img-upload{
  color: transparent; /* 🔥 filename hide */
}

/* Firefox */
.img-upload::-moz-file-upload-button{
  padding: 6px 10px;
}