/* ===== Base ===== */
* {
    box-sizing: border-box;
}

body {
    background: #f8f9fa;
}

/* ===== JPG to PDF – Match Image Compressor ===== */

.jp-container{
  max-width: 960px;
  margin: 40px auto;
  padding: 0 15px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Title same weight as Image Compressor */
.jp-title{
  text-align: center;
  font-size: 34px;
  font-weight: 600;
  margin-bottom: 5px;
}

.jp-subtitle{
  text-align: center;
  color: #6c757d;
  margin-bottom: 30px;
}

/* ===== Upload Box ===== */
.jp-upload-box{
  border: 2px dashed #cfd4da;
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  background: #fff;
  transition: .2s ease;
}

.jp-upload-box:hover{
  border-color: #0d6efd;
  background: #f8fbff;
}

.jp-upload-box p{
  font-size: 16px;
  color: #495057;
  pointer-events: auto;
}

.jp-btn-primary {
    background: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 15px;
    cursor: pointer;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.jp-btn-primary:hover {
    background: #0b5ed7;
}

.jp-secure{
  display:block;
  margin-top:15px;
  font-size:13px;
  color:#6c757d;
}

/* ===== Centered Preview Layout ===== */
.jp-preview-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 50px;
}

/* Preview Card */
.jp-card {
  width: 220px;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  text-align: center;
  transition: .25s ease;
  cursor: grab;
}

.jp-card:active {
  cursor: grabbing;
}

.jp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}

.jp-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

.jp-card p {
    margin-top: 6px;
    font-size: 13px;
    color: #495057;
}

/* ===== Actions ===== */
.jp-actions {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 18px;
  margin-top: 60px;
  display: flex;
  justify-content: center;
  gap: 18px;
  box-shadow: 0 -6px 20px rgba(0,0,0,.08);
  z-index: 5;
}
/* ===== Sticky Bottom Action Bar ===== */
.jp-actions-bar {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 18px;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 18px;
  box-shadow: 0 -6px 20px rgba(0,0,0,.08);
  z-index: 5;
}
/* Add More button */
/* Add Button */
.jp-add-more {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px dashed #0d6efd;
  background: #fff;
  color: #0d6efd;
  font-size: 26px;
  cursor: pointer;
  transition: .2s ease;
}

.jp-add-more:hover {
  background: #0d6efd;
  color: #fff;
}

/* Convert Button */
.jp-btn-success {
  padding: 12px 30px;
  font-size: 15px;
  border-radius: 10px;
  border: none;
  background: #198754;
  color: #fff;
  cursor: pointer;
  transition: .2s ease;
}

.jp-btn-success:hover {
  background: #157347;
  transform: translateY(-2px);
}

.jp-card-actions button {
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 12px;
}

.jp-card-actions button:hover {
    background: #e9ecef;
}

/* Wrapper for overlay positioning */
.jp-image-wrapper {
  position: relative;
}

/* Overlay remove button */
.jp-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(220,53,69,0.9);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s ease;
}

.jp-remove-btn:hover {
  background: #dc3545;
  transform: scale(1.1);
}


/* Loader */
.jp-loader {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    color: #495057;
}

.spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #e9ecef;
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

#pdfConverterSection{
  animation: fadeIn .25s ease;
  margin-top: 20px;
}

@keyframes fadeIn{
  from{opacity:0; transform: translateY(10px);}
  to{opacity:1; transform:none;}
}


/* Disabled */
button:disabled {
    opacity: .6;
    cursor: not-allowed
}

/* Toast */
.jp-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: none;
    padding: 10px 14px;
    border-radius: 6px;
    background: #198754;
    color: #fff;
    z-index: 9999
}

.jp-toast.error {
    background: #dc3545
}

.drag-handle{
  cursor: grab;
  user-select: none;
  font-size: 16px;
  padding: 2px 6px;
  border: 1px dashed #ced4da;
  border-radius: 4px;
  color: #6c757d;
}

.jp-ghost{
  opacity: .5;
}

/* 🔥 Force center layout (fix broken flex/grid) */
.jp-center-wrap{
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Upload box full width like Image Compressor */
.jp-upload-box{
  width: 100%;
  max-width: 850px;
}

/* ===== Responsive ===== */
@media (max-width: 576px) {
    .jp-container {
        margin: 70px 10px 30px;
        padding: 18px;
    }

    .jp-title {
        font-size: 24px;
    }
}

/* Mobile-first preview grid */
@media (max-width: 576px){
  .ic-preview-area,
  .jp-preview-area{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 8px;
  }

  .ic-image-card,
  .jp-card{
    border-radius: 10px;
    padding: 8px;
  }

  .ic-image-card img,
  .jp-card img{
    border-radius: 8px;
  }
}

@media (max-width: 576px){
  .ic-btn-primary,
  .ic-btn-success,
  .ic-btn-danger,
  .jp-btn-primary,
  .jp-btn-success{
    min-height: 48px;       /* thumb size */
    font-size: 15px;
    padding: 10px 14px;
  }

  .jp-actions{
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 10px;
    box-shadow: 0 -6px 16px rgba(0,0,0,.08);
    z-index: 5;
  }
}

@media (max-width: 576px){
  .jp-add-more{
    width: 48px;
    height: 48px;
    font-size: 26px;
  }
}
@media (max-width: 576px){
  .ic-loader,
  .jp-loader{
    align-items: center;
    text-align: center;
    padding: 16px;
  }

  .ic-toast,
  .jp-toast{
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    width: calc(100% - 32px);
    max-width: 420px;
    text-align: center;
  }
}