/* ================= GLOBAL ================= */

body{
font-family:'Inter',sans-serif;
background:#f7f8fc;
overflow-x:hidden;
}

/* ================= HERO ================= */

.converter-hero{

min-height:100vh;

display:flex;
align-items:center;
justify-content:center;

padding:120px 20px;

background:
linear-gradient(
135deg,
#071133,
#1b1464,
#6d28d9
);
}

.converter-box{

width:100%;
max-width:720px;

background:
rgba(255,255,255,0.08);

border:
1px solid rgba(255,255,255,0.1);

backdrop-filter:blur(18px);

padding:60px;

border-radius:35px;

text-align:center;

box-shadow:
0 25px 60px rgba(0,0,0,0.25);
}

/* ================= ICON ================= */

.converter-icon{

width:120px;
height:120px;

margin:auto auto 30px;

border-radius:30px;

background:
rgba(255,255,255,0.1);

display:flex;
align-items:center;
justify-content:center;

font-size:50px;

color:white;
}

/* ================= TEXT ================= */

.converter-box h1{

font-size:58px;
font-weight:800;

color:white;

margin-bottom:20px;
}

.converter-box p{

font-size:20px;

color:
rgba(255,255,255,0.82);

margin-bottom:40px;
}

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

.upload-btn{

display:inline-flex;
align-items:center;
justify-content:center;

gap:12px;

padding:20px 34px;

border-radius:18px;

background:white;

color:#4f46e5;

font-size:18px;
font-weight:700;

cursor:pointer;

transition:0.3s;
}

.upload-btn:hover{

transform:translateY(-3px);

box-shadow:
0 15px 40px rgba(255,255,255,0.15);
}

/* ================= FEATURES ================= */

.converter-features{

display:flex;
justify-content:center;

gap:30px;

margin-top:35px;

flex-wrap:wrap;
}

.converter-features span{

display:flex;
align-items:center;

gap:10px;

font-size:15px;

color:white;
}

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

.loading-screen{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:
rgba(2,6,23,0.92);

backdrop-filter:blur(10px);

z-index:99999;

align-items:center;
justify-content:center;
}

.loading-box{

width:100%;
max-width:420px;

background:#111827;

padding:40px;

border-radius:28px;

text-align:center;

box-shadow:
0 25px 60px rgba(0,0,0,0.35);
}

.loading-box h2{

color:white;

font-size:34px;

margin-bottom:30px;
}

.progress-bar{

width:100%;
height:14px;

background:#1f2937;

border-radius:999px;

overflow:hidden;

margin-bottom:18px;
}

.progress-fill{

width:0%;

height:100%;

background:
linear-gradient(
135deg,
#4f46e5,
#7c3aed
);

border-radius:999px;

transition:0.25s;
}

#progressText{

font-size:18px;
font-weight:700;

color:white;
}

/* ================= EDITOR ================= */

.converter-editor{

display:none;

padding:
120px 30px 60px;

background:#f7f8fc;

gap:30px;
}

/* ================= SIDEBAR ================= */

.converter-sidebar{

width:360px;

background:white;

border-radius:28px;

padding:35px;

box-shadow:
0 15px 40px rgba(0,0,0,0.06);

height:fit-content;
}

/* ================= SIDEBAR TOP ================= */

.sidebar-top{

margin-bottom:30px;
}

.sidebar-top h2{

font-size:34px;
font-weight:800;

margin-bottom:12px;

color:#111827;
}

.sidebar-top p{

font-size:15px;

line-height:1.7;

color:#6b7280;
}

/* ================= INPUT ================= */

.input-group{

margin-bottom:28px;
}

.input-group label{

display:block;

margin-bottom:12px;

font-size:16px;
font-weight:600;

color:#111827;
}

.input-group select{

width:100%;

height:60px;

border:none;

background:#0f172a;

color:white;

border-radius:16px;

padding:0 20px;

font-size:17px;

outline:none;
}

/* ================= INFO ================= */

.image-info{

display:grid;

grid-template-columns:
1fr;

gap:16px;

margin-bottom:28px;
}

.info-card{

background:#f3f4f6;

border-radius:18px;

padding:18px 20px;
}

.info-card span{

font-size:14px;

color:#6b7280;

display:block;

margin-bottom:8px;
}

.info-card h4{

font-size:20px;
font-weight:700;

color:#111827;
}

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

#convertBtn{

width:100%;
height:62px;

border:none;

border-radius:18px;

background:
linear-gradient(
135deg,
#4f46e5,
#7c3aed
);

color:white;

font-size:18px;
font-weight:700;

cursor:pointer;

transition:0.3s;
}

#convertBtn:hover{

transform:translateY(-2px);
}

/* ================= PREVIEW ================= */

.converter-preview{

flex:1;

display:flex;
flex-direction:column;
}

.preview-card{

background:white;

border-radius:30px;

padding:30px;

min-height:500px;

display:flex;
align-items:flex-start;
justify-content:flex-start;

overflow:auto;

box-shadow:
0 15px 40px rgba(0,0,0,0.06);
}

#previewImage{

width:100%;

height:auto;

object-fit:contain;

border-radius:20px;

display:block;
}

/* ================= DOWNLOAD ================= */

.download-wrapper{

margin-top:24px;

display:flex;
justify-content:center;
}

#downloadBtn{

display:none;

width:280px;
height:62px;

border-radius:18px;

background:#22c55e;

color:white;

text-decoration:none;

font-size:18px;
font-weight:700;

align-items:center;
justify-content:center;

gap:10px;

transition:0.3s;
}

#downloadBtn:hover{

transform:translateY(-2px);
}

/* ================= MOBILE ================= */

@media(max-width:992px){

.converter-editor{

flex-direction:column;
}

.converter-sidebar{

width:100%;
}

.preview-card{

min-height:500px;
}

}

@media(max-width:768px){

.converter-box{

padding:40px 25px;
}

.converter-box h1{

font-size:40px;
}

.converter-box p{

font-size:17px;
}

.converter-icon{

width:90px;
height:90px;

font-size:38px;
}

.converter-editor{

padding:120px 20px 40px;
}

.loading-box{

padding:30px 24px;
}

.loading-box h2{

font-size:28px;
}

}

@media(max-width:500px){

.upload-btn{

width:100%;

justify-content:center;
}

.converter-features{

gap:18px;
}

.converter-sidebar{

padding:25px;
}

.sidebar-top h2{

font-size:28px;
}

.preview-card{

padding:18px;

min-height:350px;
}

#previewImage{

width:100%;
}

}

/* ================= DARK MODE ================= */

body.dark-mode{

background:#020617;
}

body.dark-mode .converter-editor{

background:#020617;
}

body.dark-mode .converter-sidebar{

background:#111827;

box-shadow:
0 15px 40px rgba(0,0,0,0.35);
}

body.dark-mode .sidebar-top h2,
body.dark-mode .info-card h4,
body.dark-mode .input-group label{

color:white;
}

body.dark-mode .sidebar-top p,
body.dark-mode .info-card span{

color:#cbd5e1;
}

body.dark-mode .info-card{

background:#1e293b;
}

body.dark-mode .input-group select{

background:#0f172a;

color:white;
}

body.dark-mode .preview-card{

background:#111827;

box-shadow:
0 15px 40px rgba(0,0,0,0.35);
}

body.dark-mode #previewImage{

border:
2px solid rgba(255,255,255,0.05);
}

body.dark-mode #convertBtn{

box-shadow:
0 10px 30px rgba(124,58,237,0.35);
}

body.dark-mode #downloadBtn{

box-shadow:
0 10px 30px rgba(34,197,94,0.35);
}

/* ================= LIGHT MODE ================= */

body:not(.dark-mode){
background:#f8fafc;
}

body:not(.dark-mode) .converter-hero{
background:linear-gradient(
135deg,
#f8fafc,
#eef2ff,
#ddd6fe
);
}

body:not(.dark-mode) .converter-box{
background:white;
border:none;
backdrop-filter:none;
box-shadow:0 25px 60px rgba(0,0,0,.08);
}

body:not(.dark-mode) .converter-box h1{
color:#111827;
}

body:not(.dark-mode) .converter-box p{
color:#6b7280;
}

body:not(.dark-mode) .converter-icon{
background:#ede9fe;
color:#6d28d9;
}

body:not(.dark-mode) .converter-features span{
color:#475569;
}

body:not(.dark-mode) .upload-btn{
background:linear-gradient(
135deg,
#4f46e5,
#7c3aed
);
color:white;
}

body:not(.dark-mode) .converter-editor{
background:#f8fafc;
}

body:not(.dark-mode) .converter-sidebar{
background:white;
}

body:not(.dark-mode) .preview-card{
background:white;
}

/* ================= DARK MODE ================= */

body.dark-mode{
background:#020617;
}

body.dark-mode .converter-hero{
background:linear-gradient(
135deg,
#071133,
#1b1464,
#6d28d9
);
}

body.dark-mode .loading-screen{
background:rgba(2,6,23,.92);
}

body.dark-mode .converter-editor{
background:#020617;
}

body.dark-mode .converter-sidebar{
background:#111827;
}

body.dark-mode .sidebar-top h2,
body.dark-mode .info-card h4,
body.dark-mode .input-group label{
color:white;
}

body.dark-mode .sidebar-top p,
body.dark-mode .info-card span{
color:#cbd5e1;
}

body.dark-mode .info-card{
background:#1e293b;
}

body.dark-mode .input-group select{
background:#0f172a;
color:white;
}

body.dark-mode .preview-card{
background:#111827;
}

body.dark-mode .loading-box{
background:#111827;
}

body.dark-mode .loading-box h2,
body.dark-mode #progressText{
color:white;
}

/**/

.faq-section{

max-width:1000px;

margin:80px auto;

padding:0 20px;

}

.faq-section h2{

font-size:40px;

margin-bottom:30px;

text-align:center;

}

.faq-item{

background:white;

padding:25px;

border-radius:20px;

margin-bottom:20px;

box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.faq-item h3{

margin-bottom:10px;

color:#111827;

}

.faq-item p{

color:#64748b;

line-height:1.8;

}

/* DARK MODE */

body.dark-mode .faq-item{

background:#111827;

border:1px solid rgba(255,255,255,.08);

}

body.dark-mode .faq-item h3{

color:white;

}

body.dark-mode .faq-item p{

color:#cbd5e1;

}