/* DocFila Free Tools — Additional styles */

/* ── Tool Area ── */
.tool-area{
  background:#F5F5F7;border-radius:20px;padding:40px 32px;
  border:2px dashed rgba(0,0,0,.08);
  text-align:center;margin:0 auto 40px;
  max-width:640px;transition:border-color .2s,background .2s;
}
.tool-area.drag-over{
  border-color:#0071E3;background:rgba(0,113,227,.04);
}
.tool-area .drop-icon{font-size:48px;margin-bottom:16px;display:block}
.tool-area .drop-text{font-size:17px;color:#6E6E73;margin-bottom:16px}
.tool-area .drop-hint{font-size:13px;color:#86868B}

/* File input button */
.file-btn{
  display:inline-block;
  background:#0071E3;color:#FFF;
  padding:12px 28px;border-radius:980px;
  font-size:15px;font-weight:600;cursor:pointer;
  transition:background .2s;border:none;
}
.file-btn:hover{background:#0077ED}
.file-btn input[type="file"]{display:none}

/* ── Preview Area ── */
.preview-area{
  background:#FFFFFF;border-radius:16px;padding:24px;
  border:1px solid rgba(0,0,0,.06);
  margin:24px auto;max-width:640px;
  display:none;
}
.preview-area.visible{display:block}
.preview-area img{
  max-width:100%;border-radius:8px;margin:8px auto;
}
.preview-area canvas{
  max-width:100%;border-radius:8px;margin:8px auto;display:block;
}

/* ── File List ── */
.file-list{
  list-style:none;padding:0;margin:16px 0;text-align:left;
}
.file-list li{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:#FFFFFF;
  border-radius:12px;margin-bottom:8px;
  border:1px solid rgba(0,0,0,.06);
  font-size:14px;color:#1D1D1F;
}
.file-list li .file-name{
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.file-list li .file-size{
  color:#86868B;font-size:13px;margin-left:12px;flex-shrink:0;
}
.file-list li .file-remove{
  color:#FF3B30;cursor:pointer;margin-left:12px;
  font-size:18px;font-weight:700;flex-shrink:0;
  background:none;border:none;padding:0 4px;
}
.file-list li .file-remove:hover{opacity:.7}

/* Drag handle for reordering */
.file-list li .drag-handle{
  cursor:grab;color:#86868B;margin-right:12px;font-size:16px;
}
.file-list li.dragging{opacity:.5;border-color:#0071E3}

/* ── Action Buttons ── */
.tool-actions{
  display:flex;gap:12px;justify-content:center;
  flex-wrap:wrap;margin:24px 0;
}
.btn-generate{
  background:#0071E3;color:#FFF;
  padding:14px 36px;border-radius:980px;
  font-size:17px;font-weight:600;cursor:pointer;
  border:none;transition:background .2s;
}
.btn-generate:hover{background:#0077ED}
.btn-generate:disabled{background:#86868B;cursor:not-allowed}

.btn-download{
  background:#34C759;color:#FFF;
  padding:14px 36px;border-radius:980px;
  font-size:17px;font-weight:600;cursor:pointer;
  border:none;transition:background .2s;
  display:none;
}
.btn-download.visible{display:inline-block}
.btn-download:hover{background:#30B350}

.btn-reset{
  background:transparent;color:#FF3B30;
  padding:14px 24px;border-radius:980px;
  font-size:15px;font-weight:500;cursor:pointer;
  border:1px solid #FF3B30;transition:all .2s;
  display:none;
}
.btn-reset.visible{display:inline-block}
.btn-reset:hover{background:#FF3B30;color:#FFF}

/* ── Progress ── */
.progress-bar{
  width:100%;height:6px;background:rgba(0,0,0,.06);
  border-radius:3px;overflow:hidden;margin:16px 0;
  display:none;
}
.progress-bar.visible{display:block}
.progress-fill{
  height:100%;background:#0071E3;border-radius:3px;
  width:0%;transition:width .3s;
}

/* ── Options / Settings Panel ── */
.tool-options{
  background:#FFFFFF;border-radius:16px;padding:24px;
  border:1px solid rgba(0,0,0,.06);
  margin:24px auto;max-width:640px;text-align:left;
}
.tool-options h3{font-size:17px;font-weight:600;color:#1D1D1F;margin-bottom:16px}
.option-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid rgba(0,0,0,.04);
}
.option-row:last-child{border-bottom:none}
.option-row label{font-size:15px;color:#1D1D1F;font-weight:500}
.option-row select,.option-row input[type="text"],.option-row input[type="number"]{
  padding:8px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.12);
  font-size:14px;background:#F5F5F7;color:#1D1D1F;
  font-family:inherit;
}
.option-row select:focus,.option-row input:focus{
  outline:none;border-color:#0071E3;
}

/* ── QR Code Specific ── */
.qr-input{
  width:100%;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(0,0,0,.12);font-size:16px;
  font-family:inherit;background:#FFFFFF;color:#1D1D1F;
  margin-bottom:16px;
}
.qr-input:focus{outline:none;border-color:#0071E3;box-shadow:0 0 0 3px rgba(0,113,227,.12)}
.qr-input::placeholder{color:#86868B}
textarea.qr-input{resize:vertical;min-height:80px}

.qr-type-tabs{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;
}
.qr-type-tab{
  padding:8px 16px;border-radius:980px;
  font-size:14px;font-weight:500;cursor:pointer;
  border:1px solid rgba(0,0,0,.12);background:#FFF;color:#1D1D1F;
  transition:all .2s;
}
.qr-type-tab.active{
  background:#0071E3;color:#FFF;border-color:#0071E3;
}
.qr-type-tab:hover:not(.active){background:#F5F5F7}

/* ── Auth Modal ── */
.auth-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:1000;display:none;
  align-items:center;justify-content:center;
}
.auth-overlay.visible{display:flex}
.auth-modal{
  background:#FFF;border-radius:20px;padding:48px 40px;
  max-width:420px;width:90%;text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,.2);
  position:relative;
}
.auth-modal h2{
  font-size:24px;font-weight:700;color:#1D1D1F;
  margin-bottom:8px;letter-spacing:-.02em;
}
.auth-modal p{
  font-size:15px;color:#6E6E73;margin-bottom:28px;line-height:1.5;
}
.auth-modal .auth-close{
  position:absolute;top:16px;right:20px;
  font-size:24px;color:#86868B;cursor:pointer;
  background:none;border:none;padding:4px;
}
.auth-modal .auth-close:hover{color:#1D1D1F}
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:14px 24px;border-radius:12px;
  font-size:16px;font-weight:500;cursor:pointer;
  border:1px solid rgba(0,0,0,.12);background:#FFF;color:#1D1D1F;
  transition:all .2s;font-family:inherit;margin-bottom:12px;
}
.btn-google:hover{background:#F5F5F7;border-color:rgba(0,0,0,.2)}
.btn-google svg{width:20px;height:20px;flex-shrink:0}
.btn-apple{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:14px 24px;border-radius:12px;
  font-size:16px;font-weight:500;cursor:pointer;
  border:none;background:#1D1D1F;color:#FFF;
  transition:all .2s;font-family:inherit;margin-bottom:12px;
}
.btn-apple:hover{background:#333}
.btn-apple svg{width:20px;height:20px;flex-shrink:0}
.auth-divider{
  display:flex;align-items:center;gap:16px;
  margin:20px 0;font-size:13px;color:#86868B;
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:rgba(0,0,0,.08);
}
.auth-email-form{text-align:left}
.auth-email-form input{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(0,0,0,.12);font-size:15px;
  font-family:inherit;margin-bottom:10px;
}
.auth-email-form input:focus{outline:none;border-color:#0071E3}
.btn-email-sign{
  width:100%;padding:14px;border-radius:12px;
  background:#0071E3;color:#FFF;font-size:16px;
  font-weight:600;border:none;cursor:pointer;
  transition:background .2s;font-family:inherit;
}
.btn-email-sign:hover{background:#0077ED}
.auth-terms{font-size:12px;color:#86868B;margin-top:20px;line-height:1.5}
.auth-terms a{color:#0071E3}

/* ── User badge (when logged in) ── */
.user-badge{
  display:none;align-items:center;gap:8px;
  font-size:14px;color:#1D1D1F;font-weight:500;
}
.user-badge.visible{display:flex}
.user-badge img{
  width:28px;height:28px;border-radius:50%;
  border:2px solid rgba(0,0,0,.06);
}

/* ── Status Messages ── */
.status-msg{
  padding:12px 16px;border-radius:12px;
  font-size:14px;margin:16px auto;max-width:640px;
  display:none;
}
.status-msg.visible{display:block}
.status-msg.success{background:#E8F5E9;color:#2E7D32}
.status-msg.error{background:#FFEBEE;color:#C62828}
.status-msg.info{background:#E3F2FD;color:#1565C0}

/* ── Responsive Tool Adjustments ── */
@media(max-width:768px){
  .tool-area{padding:28px 20px;border-radius:16px}
  .preview-area{padding:16px}
  .tool-options{padding:16px}
  .auth-modal{padding:32px 24px}
  .qr-type-tabs{justify-content:center}
  .option-row{flex-direction:column;align-items:flex-start;gap:8px}
}