@import url('merge-pdf.css');

/* PDF to JPG Specific Styles */
.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
}

.preview-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-normal);
}

.preview-item:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.preview-image-container {
    width: 100%;
    height: 280px;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--spacing-sm);
}

body.dark-mode .preview-image-container {
    background: #0f172a;
}

.preview-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: var(--shadow-sm);
}

.preview-actions {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
    background: var(--glass-bg);
}

.page-label {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.download-single-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.download-single-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.zip-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    margin-top: var(--spacing-lg);
}

.zip-btn:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
}
/* ==========================================================
   WHAT IS A PDF TO JPG CONVERTER
========================================================== */

.about-pdf-jpg{
    padding:80px 0;
    background:var(--bg-secondary);
}

.about-pdf-jpg .about-card{
    max-width:950px;
    margin:0 auto;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:18px;
    padding:40px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s ease;
}

.about-pdf-jpg .about-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 40px rgba(0,0,0,.12);
}

.about-pdf-jpg .about-card p{
    color:var(--text-secondary);
    font-size:1.05rem;
    line-height:1.9;
    margin-bottom:20px;
    text-align:justify;
}

.about-pdf-jpg .about-card p:last-child{
    margin-bottom:0;
}

@media(max-width:768px){

    .about-pdf-jpg{
        padding:60px 20px;
    }

    .about-pdf-jpg .about-card{
        padding:25px;
        border-radius:14px;
    }

    .about-pdf-jpg .about-card p{
        font-size:1rem;
        line-height:1.8;
        text-align:left;
    }

}
/* ==========================================================
   WHY CHOOSE THE FOXIY PDF TO JPG CONVERTER
========================================================== */

.why-pdf-jpg{
    padding:80px 0;
    background:var(--bg-primary);
}

.why-pdf-jpg .features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:24px;
    margin-top:40px;
}

.why-pdf-jpg .feature-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:18px;
    padding:30px;
    text-align:center;
    transition:.3s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.why-pdf-jpg .feature-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.why-pdf-jpg .feature-icon{
    font-size:2.5rem;
    margin-bottom:18px;
}

.why-pdf-jpg h3{
    margin-bottom:12px;
    color:var(--text-primary);
}

.why-pdf-jpg p{
    color:var(--text-secondary);
    line-height:1.8;
    font-size:1rem;
}

@media(max-width:768px){

    .why-pdf-jpg{
        padding:60px 20px;
    }

    .why-pdf-jpg .feature-card{
        padding:25px;
    }

}
/* ==========================================================
   HOW PDF TO JPG CONVERSION WORKS
========================================================== */

.how-it-works{
    padding:80px 0;
    background:var(--bg-secondary);
}

.how-it-works .steps-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:24px;
    margin-top:40px;
}

.how-it-works .step-card{
    position:relative;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:18px;
    padding:35px 30px;
    text-align:center;
    transition:.3s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.how-it-works .step-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.how-it-works .step-number{
    position:absolute;
    top:15px;
    right:18px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--primary-color);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:1rem;
}

.how-it-works .step-icon{
    font-size:2.8rem;
    margin-bottom:20px;
}

.how-it-works h3{
    margin-bottom:12px;
    color:var(--text-primary);
}

.how-it-works p{
    color:var(--text-secondary);
    line-height:1.8;
    font-size:1rem;
}

@media(max-width:768px){

    .how-it-works{
        padding:60px 20px;
    }

    .how-it-works .step-card{
        padding:28px 22px;
    }

}