/* ===== From: avif-to-jpg-converter/index.html ===== */

    .card:hover{transform:translateY(-1px)}
    .thumb-canvas{background:#f1f5f9}
    #dropZone.dragover{background:#f8fafc;border-color:#4f46e5}
  

/* ===== From: avif-to-jpg-converter/index.html ===== */
details>summary::-webkit-details-marker{display:none}.faq-chevron{transition:transform .2s}.faq-item[open] .faq-chevron{transform:rotate(180deg)}

/* ===== From: compress-pdf/index.html ===== */
details>summary::-webkit-details-marker{display:none}.faq-chevron{transition:transform .2s}.faq-item[open] .faq-chevron{transform:rotate(180deg)}

/* ===== From: image-compressor/index.html ===== */

    :focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
    .hero-bg { background: radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,0.15), transparent), linear-gradient(90deg, #4f46e5 0%, #a855f7 50%, #ec4899 100%); }
  
    /* Target KB active state */
    .target-kb-active {
      box-shadow: 0 0 0 2px #3b82f6;
      background-color: #eff6ff;
    }

/* ===== From: image-enhancer/index.html ===== */

    .compare-wrap{position:relative}
    .compare-wrap canvas{display:block;width:100%;height:auto;border-radius:12px}
    .compare-handle{position:absolute;top:0;bottom:0;width:2px;background:#0ea5e9;left:50%}
    .compare-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      background:#0ea5e9;color:#fff;border-radius:999px;padding:.35rem .55rem;font-size:.75rem;box-shadow:0 4px 16px rgba(14,165,233,.3)}
  

/* ===== From: image-enhancer/index.html ===== */

      /* tiny tweaks for details/summary */
      details > summary::-webkit-details-marker { display:none; }
      .faq-item[open] .faq-chevron { transform: rotate(180deg); }
    

/* ===== From: jpeg-to-jpg-converter/index.html ===== */

    :focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
    .hero-bg { background: radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,0.15), transparent), linear-gradient(90deg, #4f46e5 0%, #a855f7 50%, #ec4899 100%); }
  

/* ===== From: jpeg-to-png-converter/index.html ===== */

    :focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
    .hero-bg { background: radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,0.15), transparent), linear-gradient(90deg, #4f46e5 0%, #a855f7 50%, #ec4899 100%); }
  

/* ===== From: jpg-to-excel-converter/index.html ===== */
details>summary::-webkit-details-marker{display:none}.faq-chevron{transition:transform .2s}.faq-item[open] .faq-chevron{transform:rotate(180deg)}

/* ===== From: jpg-to-jpeg-converter/index.html ===== */

    :focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
    .hero-bg { background: radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,0.15), transparent), linear-gradient(90deg, #4f46e5 0%, #a855f7 50%, #ec4899 100%); }
  

/* ===== From: jpg-to-pdf-converter/index.html ===== */

    .preview-item {
      transition: transform 0.2s;
    }
    .preview-item:hover {
      transform: scale(1.02);
    }
    .dragging {
      opacity: 0.5;
      border: 2px dashed #4f46e5;
    }
    #dropZone.dragover {
      background-color: #f8fafc;
      border-color: #4f46e5;
    }
    .move-btn {
      transition: all 0.2s;
    }
    .move-btn:hover {
      transform: scale(1.1);
      background-color: #eef2ff !important;
    }
    .faq-answer {
      display: none;
    }
    .faq-visible {
      display: block;
    }
    .rotate-180 {
      transform: rotate(180deg);
    }
  

/* ===== From: jpg-to-png-converter/index.html ===== */

    :focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
    .hero-bg { background: radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,0.15), transparent), linear-gradient(90deg, #4f46e5 0%, #a855f7 50%, #ec4899 100%); }
  

/* ===== From: jpg-to-webp-converter/index.html ===== */

    :focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
    .hero-bg { background: radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,0.15), transparent), linear-gradient(90deg, #4f46e5 0%, #a855f7 50%, #ec4899 100%); }
  

/* ===== From: jpg-to-word-converter/index.html ===== */

    .card-hover{transition:transform .15s ease}
    .card-hover:hover{transform:translateY(-2px)}
    .dragging{opacity:.6;border:2px dashed #4f46e5}
  

/* ===== From: merge-pdf/index.html ===== */

    .pdf-item {
      transition: all 0.2s ease;
    }
    .pdf-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    .dragover {
      background-color: #f8fafc !important;
      border-color: #6366f1 !important;
    }
    .processing-spinner {
      display: inline-block;
      width: 1rem;
      height: 1rem;
      border: 2px solid #e5e7eb;
      border-radius: 50%;
      border-top-color: #4f46e5;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .download-btn {
      transition: all 0.3s ease;
    }
    .download-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.4);
    }
    .countdown {
      font-weight: 600;
      color: #059669;
    }
    .page-section {
      display: none;
    }
    .active-section {
      display: block;
    }
    .processing-popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    .processing-popup.active {
      opacity: 1;
      visibility: visible;
    }
    .processing-content {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      text-align: center;
      min-width: 300px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
  

/* ===== From: merge-pdf/result/index.html ===== */

    .download-btn {
      transition: all 0.3s ease;
      box-shadow: 0 4px 6px rgba(5, 150, 105, 0.3);
    }
    .download-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(5, 150, 105, 0.4);
    }
    .download-btn:active {
      transform: translateY(0);
    }
    .preview-container {
      transition: all 0.5s ease;
    }
    .fade-in {
      animation: fadeIn 0.5s ease-in;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .success-checkmark {
      width: 80px;
      height: 80px;
      margin: 0 auto;
    }
    .success-checkmark path {
      stroke: #10B981;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      stroke-dasharray: 1000;
      stroke-dashoffset: 0;
      animation: dash 2s ease-in-out;
    }
    @keyframes dash {
      0% {
        stroke-dashoffset: 1000;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }
  

/* ===== From: pdf-to-excel-converter/index.html ===== */
details>summary::-webkit-details-marker{display:none}.faq-chevron{transition:transform .2s}.faq-item[open] .faq-chevron{transform:rotate(180deg)}

/* ===== From: pdf-to-word-converter/index.html ===== */

    .spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
  

/* ===== From: pdf-to-word-converter/index.html ===== */
details>summary::-webkit-details-marker{display:none}.faq-chevron{transition:transform .2s}.faq-item[open] .faq-chevron{transform:rotate(180deg)}

/* ===== From: png-to-jpg-converter/index.html ===== */

    :focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
    .hero-bg { background: radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,0.15), transparent), linear-gradient(90deg, #4f46e5 0%, #a855f7 50%, #ec4899 100%); }
  

/* ===== From: split-pdf/index.html ===== */

    .download-btn {
      transition: all 0.3s ease;
    }
    .download-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.4);
    }
    .countdown {
      font-weight: 600;
      color: #059669;
    }
    .page-section {
      display: none;
    }
    .active-section {
      display: block;
    }
    .thumbnail-canvas {
      transition: all 0.3s ease;
    }
    .thumbnail-canvas:hover {
      transform: scale(1.03);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .processing-popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    .processing-popup.active {
      opacity: 1;
      visibility: visible;
    }
    .processing-content {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      text-align: center;
      min-width: 300px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
  

/* ===== From: webp-to-jpg-converter/index.html ===== */

    .card:hover{transform:translateY(-1px)}
    .thumb-canvas{background:#f1f5f9}
    #dropZone.dragover{background:#f8fafc;border-color:#4f46e5}
  

/* ===== From: webp-to-jpg-converter/index.html ===== */
details>summary::-webkit-details-marker{display:none}.faq-chevron{transition:transform .2s}.faq-item[open] .faq-chevron{transform:rotate(180deg)}

/* =========================================================
   Times Darpan — Organize PDF page styles
   Scoped to IDs so they don't bleed to other pages.
   ========================================================= */

/* --- Cards / drag helpers (only inside #mainTool) --- */
#mainTool .thumb-card {
  transition: transform .15s ease, box-shadow .15s ease;
}
#mainTool .thumb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(2,6,23,.12);
}
#mainTool .dragging { opacity: .6; outline: 2px dashed #6366f1; outline-offset: 2px; }
#mainTool .btn-icon { display: inline-flex; align-items: center; justify-content: center; }

/* --- Processing Modal (scoped to the page-specific ID) --- */
#processingModal {
  display: none; position: fixed; inset: 0; background-color: rgba(0,0,0,.7);
  z-index: 1000; align-items: center; justify-content: center;
}
#processingModal .modal-content {
  background: #fff; padding: 2rem; border-radius: 16px; text-align: center;
  max-width: 400px; width: 90%; box-shadow: 0 20px 40px rgba(0,0,0,.2);
}
#processingModal .spinner {
  width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #6366f1;
  border-radius: 50%; margin: 0 auto 1.5rem; animation: td-spin 1s linear infinite;
}
@keyframes td-spin { to { transform: rotate(360deg); } }
#processingModal .progress-bar {
  height: 6px; background: #e5e7eb; border-radius: 3px; margin: 1.5rem 0; overflow: hidden;
}
#processingModal .progress-fill {
  height: 100%; background: #6366f1; width: 0%; transition: width .3s ease;
}

/* --- Result Page (scoped to #resultPage) --- */
#resultPage.result-page { display: none; }
#resultPage .checkmark {
  width: 80px; height: 80px; border-radius: 50%; display: block; stroke-width: 5; stroke: #fff; stroke-miterlimit: 10;
  box-shadow: 0 0 20px rgba(79,70,229,.4); animation: td-fill .4s ease-in-out .4s forwards, td-scale .3s ease-in-out .9s both;
  margin: 0 auto;
}
#resultPage .checkmark-circle {
  stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 5; stroke-miterlimit: 10; stroke: #4f46e5; fill: none;
  animation: td-stroke .6s cubic-bezier(.65,0,.45,1) forwards;
}
#resultPage .checkmark-check {
  transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: td-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;
}
@keyframes td-stroke { to { stroke-dashoffset: 0; } }
@keyframes td-scale { 0%,100% { transform:none } 50% { transform: scale3d(1.1,1.1,1) } }
@keyframes td-fill { to { box-shadow: 0 0 20px rgba(79,70,229,.8) } }