
/* =========================================================
   X Convertifire IMAGE FORMAT CONVERTER
   Page-specific styles: keeps the existing dark/blue theme.
========================================================= */
.converter-page{min-height:100vh;background:var(--bg-color);color:var(--text-main)}
.converter-hero{padding:145px 0 70px;position:relative;overflow:hidden}
.converter-hero:before{content:"";position:absolute;width:650px;height:650px;top:-260px;left:50%;transform:translateX(-50%);background:rgba(59,130,246,.055);filter:blur(100px);pointer-events:none}
.converter-heading{position:relative;text-align:center;max-width:820px;margin:0 auto 38px}
.converter-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--border-color);border-radius:30px;background:rgba(255,255,255,.04);color:#d4d4d8;font-size:.72rem;font-weight:700;letter-spacing:1px;margin-bottom:20px}
.converter-badge i{color:#60a5fa}.converter-heading h1{font-size:4rem;line-height:1.08;font-weight:800;letter-spacing:-2px;margin:0 0 18px;background:linear-gradient(to right,#fff,#71717a);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.converter-heading h1 span{background:linear-gradient(90deg,#fff,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.converter-heading p{max-width:650px;margin:auto;color:var(--text-muted);font-size:1rem;line-height:1.7}
.converter-workspace{position:relative;max-width:1100px;margin:auto;background:rgba(17,17,17,.88);border:1px solid var(--border-color);border-radius:28px;padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.35);backdrop-filter:blur(18px)}
.converter-upload{min-height:390px;border:1px dashed rgba(255,255,255,.2);border-radius:21px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;transition:.3s;background:radial-gradient(circle at center,rgba(59,130,246,.06),transparent 55%)}.converter-upload.dragging{border-color:#3b82f6;background:rgba(59,130,246,.08);transform:scale(.995)}.converter-upload-icon{width:82px;height:82px;border-radius:22px;display:flex;align-items:center;justify-content:center;color:#60a5fa;font-size:2rem;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.35);box-shadow:0 0 35px rgba(59,130,246,.12);margin-bottom:22px}.converter-upload h3{font-size:1.4rem;font-weight:750;margin:0 0 7px}.converter-upload p{color:var(--text-muted);margin:0 0 20px;font-size:.9rem}.converter-upload small{color:#71717a;margin-top:17px;font-size:.72rem}
.converter-primary-btn,.converter-convert-btn{border:0;background:#3b82f6;color:#fff;font-weight:700;border-radius:12px;cursor:pointer;transition:.25s}.converter-primary-btn{padding:12px 22px;font-size:.78rem;letter-spacing:.6px;text-transform:uppercase}.converter-primary-btn:hover,.converter-convert-btn:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,99,235,.22)}
.converter-files-panel{padding:24px}.converter-panel-top,.converter-control-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.converter-mini-label{display:block;color:#60a5fa;font-size:.65rem;font-weight:800;letter-spacing:1.4px;margin-bottom:7px}.converter-panel-top h2{font-size:1.35rem;margin:0;font-weight:750}.converter-add-btn,.converter-clear-btn{background:rgba(255,255,255,.04);border:1px solid var(--border-color);color:#d4d4d8;border-radius:10px;padding:9px 13px;font-size:.72rem;font-weight:650;cursor:pointer;transition:.25s}.converter-add-btn:hover,.converter-clear-btn:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.converter-file-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:24px 0}.converter-file-card{background:#0b0b0b;border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:8px;min-width:0;transition:.25s}.converter-file-card:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px)}.converter-thumb{height:125px;border-radius:9px;background:#151515;position:relative;overflow:hidden}.converter-thumb img{width:100%;height:100%;object-fit:cover;display:block}.remove-file{position:absolute;right:7px;top:7px;width:27px;height:27px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.7);backdrop-filter:blur(6px);border-radius:50%;color:#fff;cursor:pointer;opacity:0;transition:.2s}.converter-file-card:hover .remove-file{opacity:1}.converter-file-name{font-size:.72rem;color:#e4e4e7;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:10px 4px 3px}.converter-file-meta{font-size:.65rem;color:#71717a;margin:0 4px 3px}
.converter-controls{border-top:1px solid var(--border-color);padding-top:24px}.converter-control-heading h3{font-size:1rem;margin:0;font-weight:700}.format-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:18px 0}.format-btn{min-height:72px;text-align:left;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.025);color:#a1a1aa;cursor:pointer;transition:.25s}.format-btn strong{display:block;color:#fff;font-size:.78rem;margin-bottom:5px}.format-btn span{font-size:.62rem;color:#71717a;line-height:1.3}.format-btn:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}.format-btn.active{border-color:#3b82f6;background:rgba(59,130,246,.1);box-shadow:0 0 0 1px rgba(59,130,246,.12)}.format-btn.active strong{color:#60a5fa}.format-btn.active span{color:#a1a1aa}.converter-convert-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 18px;font-size:.78rem;letter-spacing:.7px;text-transform:uppercase}.converter-convert-btn span{display:flex;align-items:center;gap:9px}
.converter-trust-row{display:flex;justify-content:center;gap:35px;flex-wrap:wrap;margin-top:23px;color:#71717a;font-size:.72rem}.converter-trust-row div{display:flex;align-items:center;gap:8px}.converter-trust-row i{color:#60a5fa}
.converter-info-section{padding:30px 0 100px;border-top:1px solid var(--border-color);background:#0a0a0a}.converter-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.converter-info-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:20px;padding:26px;transition:.3s}.converter-info-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}.converter-info-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,.1);color:#60a5fa;margin-bottom:18px}.converter-info-card h3{font-size:1rem;margin:0 0 8px}.converter-info-card p{color:#71717a;font-size:.78rem;line-height:1.6;margin:0}
.conversion-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);backdrop-filter:blur(15px);opacity:0;visibility:hidden;transition:.25s}.conversion-overlay.show{opacity:1;visibility:visible}.conversion-modal{width:min(430px,calc(100% - 30px));background:#111;border:1px solid rgba(255,255,255,.13);border-radius:24px;padding:34px;text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.7)}.conversion-spinner{width:78px;height:78px;margin:0 auto 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.25);color:#60a5fa}.conversion-spinner span{position:absolute;inset:-5px;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#60a5fa;border-radius:50%;animation:converterSpin .9s linear infinite}.conversion-spinner i{font-size:1.3rem}.conversion-status-label{font-size:.62rem;letter-spacing:1.5px;font-weight:800;color:#60a5fa}.conversion-modal h2{font-size:1.35rem;margin:8px 0}.conversion-modal p{color:#71717a;font-size:.78rem;margin:0 0 22px}.conversion-progress{height:7px;background:#242424;border-radius:10px;overflow:hidden}.conversion-progress span{display:block;width:0;height:100%;background:#3b82f6;border-radius:10px;transition:width .25s ease}.conversion-progress-text{display:flex;justify-content:space-between;margin-top:9px;color:#71717a;font-size:.65rem}.conversion-progress-text span:first-child{color:#fff;font-weight:700}@keyframes converterSpin{to{transform:rotate(360deg)}}
@media(max-width:991px){.converter-heading h1{font-size:3rem}.converter-file-grid{grid-template-columns:repeat(3,1fr)}.format-buttons{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.converter-hero{padding:120px 0 55px}.converter-heading h1{font-size:2.5rem;letter-spacing:-1px}.converter-heading p{font-size:.88rem}.converter-workspace{border-radius:20px}.converter-upload{min-height:320px;padding:30px 18px}.converter-files-panel{padding:15px 8px}.converter-panel-top,.converter-control-heading{align-items:flex-start}.converter-file-grid{grid-template-columns:repeat(2,1fr)}.converter-thumb{height:115px}.format-buttons{grid-template-columns:repeat(2,1fr)}.converter-trust-row{gap:15px}.converter-info-grid{grid-template-columns:1fr}.converter-info-section{padding-bottom:65px}.remove-file{opacity:1}}
@media(max-width:480px){.converter-heading h1{font-size:2.15rem}.converter-upload h3{font-size:1.15rem}.converter-upload-icon{width:68px;height:68px;font-size:1.6rem}.converter-file-grid{gap:8px}.converter-thumb{height:105px}.converter-panel-top h2{font-size:1.05rem}.converter-add-btn,.converter-clear-btn{font-size:.65rem;padding:8px 9px}.format-btn{min-height:68px;padding:10px}.format-btn strong{font-size:.72rem}.format-btn span{font-size:.58rem}.conversion-modal{padding:28px 20px}}
