/* =====================================
   PDF CONVERTER CSS
===================================== */


/* ROOT */

:root{

font-size:62.5%;


--primary:linear-gradient(
135deg,
#700FDC,
#DF50BB
);
--secondary:linear-gradient(
135deg,
#DF50BB,#700FDC
);

--bg:#f8fafc;
--card:#ffffff;

--text:#111827;
--muted:#64748b;

--border:#e2e8f0;

--shadow:
0 1rem 3rem rgba(0,0,0,.08);

--radius:1.8rem;

--transition:.3s ease;

}






/* RESET */


*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:
"Segoe UI",
Arial,
sans-serif;

}



body{

background:var(--bg);

color:var(--text);

font-size:1.6rem;

line-height:1.6;

}







/* HEADER */


.header{

background:
linear-gradient(
135deg,
#DF50BB,#700FDC
);

color:white;

padding:
3rem 1.5rem;

text-align:center;

}



.header h1{

font-size:3rem;

margin-bottom:1rem;

font-weight:900;

}



.header p{

font-size:1.6rem;

opacity:.9;

}







/* CONTAINER */


.container{

width:100%;

padding:
2rem 1.5rem;

}








/* CARD */


.converter-card{

background:
var(--card);

padding:
2rem;

border-radius:
var(--radius);

box-shadow:
var(--shadow);

margin-bottom:2rem;

}



.converter-card h2{

font-size:2.3rem;

color:
var(--secondary);

margin-bottom:1rem;

}



.converter-card p{

color:
var(--muted);

margin-bottom:2rem;

}







/* TEXT AREA */


textarea{

width:100%;

height:18rem;

resize:none;


padding:1.5rem;


border:
.1rem solid var(--border);


border-radius:
1.2rem;


font-size:1.6rem;


margin-bottom:2rem;

}



textarea:focus{

border-color:
var(--primary);

outline:none;

}








/* BUTTON */


button{

width:100%;

padding:
1.4rem;

border:none;


border-radius:
1.2rem;


background:
var(--primary);


color:white;


font-size:1.6rem;


font-weight:700;


cursor:pointer;


transition:
var(--transition);

}



button:hover{

background:
var(--secondary);

transform:
translateY(-.3rem);

}








/* UPLOAD BOX */


.upload-box{

border:
.2rem dashed var(--primary);


border-radius:
var(--radius);


padding:
3rem;


text-align:center;


margin-bottom:2rem;

}



.upload-box input{

display:none;

}



.upload-box label{

display:block;

color:
var(--primary);


font-weight:700;


cursor:pointer;

}







/* IMAGE PREVIEW */


#preview{


display:grid;


grid-template-columns:
repeat(2,1fr);


gap:1rem;


margin-bottom:2rem;


}



#preview img{


width:100%;


height:10rem;


object-fit:cover;


border-radius:1rem;


}







/* AD BOX */


.ad-box{


height:12rem;


background:white;


border:
.2rem dashed var(--border);


border-radius:
var(--radius);


display:flex;


align-items:center;


justify-content:center;


color:
var(--muted);


margin:
2rem 0;


}








/* FOOTER */


footer{


background:
#111827;


color:white;


text-align:center;


padding:
2rem;


font-size:1.4rem;


}










/* =========================
   TABLET
========================= */


@media(min-width:48rem){



.container{


padding:
3rem;


}



.converter-card{


max-width:70rem;


margin:
0 auto 3rem;


}



#preview{


grid-template-columns:
repeat(4,1fr);


}


}










/* =========================
   DESKTOP
========================= */


@media(min-width:64rem){



.header h1{

font-size:4.5rem;

}



.container{


max-width:120rem;

margin:auto;


display:grid;


grid-template-columns:
repeat(2,1fr);


gap:3rem;


}



.converter-card{


margin:0;


}



.ad-box{


grid-column:
1/-1;


}


button{


font-size:1.8rem;


}


}










/* =========================
   LARGE SCREEN
========================= */


@media(min-width:90rem){



.header{

padding:
5rem;

}



.header h1{

font-size:5.5rem;

}



.container{


max-width:140rem;


}



.converter-card{


padding:
3.5rem;


}



}


/* =========================
   PRIVACY BUTTON
========================= */


.top-actions{

display:flex;

justify-content:center;

padding:2rem 1.5rem;

}



.privacy-btn{

background:white;

color:var(--primary);

padding:1rem 2rem;

border-radius:1rem;

font-weight:700;

box-shadow:var(--shadow);

transition:.3s ease;

}



.privacy-btn:hover{

background:var(--primary);

color:white;

}

/* IMAGE REMOVE SYSTEM */


.image-box{

position:relative;

}



.image-box img{

width:100%;

height:10rem;

object-fit:cover;

border-radius:1rem;

}




.remove-image{

position:absolute;

top:-.8rem;

right:-.8rem;


width:3rem;

height:3rem;


border-radius:50%;


background:#ef4444;


color:white;


font-size:1.4rem;


padding:0;


display:flex;

align-items:center;

justify-content:center;


}

/* =========================
   SEO CONTENT
========================= */

.seo-content{

    margin: 2rem auto;
    padding: 2rem;

    max-width: 900px;

    background: #ffffff;

    border-radius: 1rem;

    box-shadow: 
    0 0.5rem 1.5rem rgba(0,0,0,0.08);

}



.seo-content h2{

    font-size: 2rem;

    color: #2563eb;

    margin-bottom: 1rem;

}



.seo-content h3{

    font-size: 1.5rem;

    margin-top: 1.5rem;

    color: #111827;

}



.seo-content p{

    font-size: 1.05rem;

    line-height: 1.8;

    color: #4b5563;

}



.seo-content ul{

    margin-top: 1rem;

    padding-left: 1.5rem;

}



.seo-content li{

    margin-bottom: 0.8rem;

    font-size: 1rem;

    color: #374151;

}



/* MOBILE */

@media(max-width:600px){


.seo-content{

    padding: 1.5rem;

    margin: 1.5rem 1rem;

}



.seo-content h2{

    font-size: 1.6rem;

}



.seo-content p{

    font-size: 0.95rem;

}


}

#installBtn{

display:block;

margin:20px auto;

padding:15px 30px;

border:none;

border-radius:10px;

background:#6a11cb;

color:white;

font-size:18px;

font-weight:bold;

cursor:pointer;

}

#splash{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:99999;
transition:0.5s;
}

#splash img{
width:100px;
height:100px;
margin-bottom:20px;
}
/* =========================
   NETWORK STATUS
========================= */

#networkStatus{

position:fixed;

top:0;

left:0;

width:100%;

padding:12px;

background:#e53935;

color:#fff;

text-align:center;

font-weight:bold;

display:none;

z-index:999999;

}


/* =========================
   LOADING BAR
========================= */

#loadingBar{

position:fixed;

top:0;

left:0;

width:0%;

height:4px;

background:#6a11cb;

z-index:999999;

transition:width .3s ease;

}