/* public/assets/style.css
   Modern responsive UI, logo header, language switcher, tool layout,
   beautiful typography, subtle animations, and mobile-friendly behavior.
*/

/* ========== ROOT VARIABLES ========== */
:root{--primary-color:#114d40;  --primary-hover:#0d3a31;  --bg-color:#fbfaf7;  --card-bg:#ffffff;  --muted-card:#fbfdfb;  --border-color:#e6ece7;  --text-color:#333333;  --muted-text:#6b7280;  --surface-dark:#0b1320;  --footer-bg:#0f1724;  --footer-muted:#b9c1c9;} 

/* ========== GLOBAL RESET & BASE ========== */
*{box-sizing:border-box;} 
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;  margin:0;  color:var(--text-color);  background:linear-gradient(180deg,#fcfdfb 0%,var(--bg-color) 200%);  -webkit-font-smoothing:antialiased;  -moz-osx-font-smoothing:grayscale;  line-height:1.45;} 
.container{max-width:1080px;  margin:0 auto;  padding:1rem;} 

/* ========== HEADER & LOGO ========== */
.site-header{background:linear-gradient(180deg,rgba(11,26,24,0.95),rgba(8,22,20,0.95));  color:#fff;  padding:1.5rem 0;  border-bottom-left-radius:18px;  border-bottom-right-radius:18px;  box-shadow:0 6px 30px rgba(5,20,18,0.12);  animation:headerDrop 0.7s ease-out 0s 1;} 
.header-inner{display:flex;  justify-content:space-between;  align-items:center;  gap:1rem;  flex-wrap:wrap;} 
.site-logo{display:flex;  align-items:center;} 
.site-logo img{height:55px;  width:auto;  display:block;  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25));  transition:transform 0.2s ease,filter 0.2s ease;} 
.site-logo img:hover{transform:translateY(-1px) scale(1.02);  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.35));} 
.brand{margin-left:20px;  flex:1;  min-width:0;} 
.brand h1{margin:0;  font-size:1.7rem;  letter-spacing:0.4px;} 
.brand .subtitle{margin:0;  font-size:0.97rem;  opacity:0.9;} 

/* ========== LANGUAGE SWITCHER & HEADER NAV ========== */
.lang-switch{display:flex;  align-items:center;  gap:.6rem;  flex-wrap:wrap;  justify-content:flex-end;} 
a.home-link{color:orange;  padding:5px;  text-decoration:none;  font-weight:600;} 
a.home-link:hover{text-decoration:underline;} 
.lang-dropdown{position:relative;} 
.lang-dropdown select{appearance:none;  -webkit-appearance:none;  background:#fff;  color:var(--surface-dark);  border-radius:8px;  padding:.6rem 2rem .6rem .8rem;  border:0;  font-weight:600;  cursor:pointer;  box-shadow:0 4px 12px rgba(8,20,18,0.06);  font-size:0.9rem;} 
.lang-dropdown::after{content:"▾";  position:absolute;  right:12px;  top:50%;  transform:translateY(-50%);  pointer-events:none;  color:#64748b;  font-size:.8rem;} 

/* ========== MAIN LAYOUT ========== */
main{padding:2rem 0;  animation:contentFadeUp 0.75s ease-out 0.1s 1;} 

/* ========== TOOL STAGE CARD ========== */
.stage-card{background:var(--card-bg);  border:1px solid var(--border-color);  border-radius:14px;  padding:1rem;  box-shadow:0 10px 30px rgba(12,18,16,0.06);  display:grid;  grid-template-columns:1fr;  gap:1rem;  animation:floatIn 0.8s ease-out 0.15s 1;} 


/* ========== PREVIEW & OUTPUT WRAPPERS ========== */
.preview-wrap{padding:.25rem 0;} 
.output-wrap{padding:.25rem 0;} 

/* ========== PREVIEW GRID & CARDS ========== */
/* Desktop & larger screens: auto-fit multiple items per row */
.preview-list{display:grid;gap:12px;  margin-top:.6rem;  width:100%;  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
.preview-card{background:var(--card-bg);  border:1px solid var(--border-color);  padding:.75rem;  border-radius:10px;  display:flex;  flex-direction:column;  gap:.5rem;  align-items:center;  text-align:center;  min-height:150px;  transition:box-shadow .12s ease,transform .12s ease;  animation:cardFadeIn 0.45s ease-out;} 
.preview-card:hover{box-shadow:0 8px 24px rgba(9,20,18,0.10);  transform:translateY(-1px);} 
.thumb{width:96px;  height:96px;  object-fit:cover;  border-radius:8px;  background:#f8fafc;  flex-shrink:0;} 
.thumb.low-quality{filter:blur(.6px) saturate(.9) contrast(.98);  image-rendering:-webkit-optimize-contrast;  opacity:0.98;} 
.file-meta{font-size:.86rem;  color:var(--muted-text);  text-align:center;  width:100%;  display:flex;  flex-direction:column;  gap:.25rem;  align-items:center;} 
.file-name{font-weight:700;  color:var(--text-color);  overflow:hidden;  text-overflow:ellipsis;  white-space:nowrap;  width:100%;  max-width:140px;} 
.file-size{font-size:.82rem;  color:var(--muted-text);} 

/* ========== ACTION BUTTONS ========== */
.actions{display:flex;  gap:.5rem;  margin-top:.4rem;} 
.btn{border:0;  padding:.7rem 1rem;  border-radius:12px;  cursor:pointer;  background:linear-gradient(180deg,var(--primary-color),var(--primary-hover));  color:#fff;  font-weight:700;  box-shadow:0 6px 18px rgba(17,77,64,0.12);  transition:transform .12s ease,box-shadow .12s ease,opacity .12s;} 
.btn:hover{box-shadow:0 10px 26px rgba(17,77,64,0.18);  transform:translateY(-1px);} 
.btn:active{transform:translateY(1px);  box-shadow:0 3px 10px rgba(17,77,64,0.18);} 
.btn.secondary{background:linear-gradient(180deg,#f5f7f6,#ffffff);  color:var(--surface-dark);  border:1px solid var(--border-color);  box-shadow:none;} 
button#convert-button{font-size:1.25rem;  background:#ff3030;  min-width:150px;} 
.download-btn{padding:.4rem .5rem;  background:#fff0f0;  border-radius:9px;  border:1px solid rgba(11,19,18,0.04);  text-decoration:none;  color:var(--surface-dark);  font-weight:700;  font-size:.9rem;  box-shadow:0 6px 18px rgba(8,20,18,0.04);} 
.download-btn.primary{background:var(--primary-color);  color:#fff;  border:none;  box-shadow:0 8px 26px rgba(17,77,64,0.12);} 

/* ========== CONTROLS (QUALITY SLIDER + CONVERT) ========== */

.controls{display:flex;align-items:center;gap:1.2rem;margin-top:1.2rem;flex-wrap:nowrap;justify-content:center;}
.controls .quality-control{display:flex;align-items:center;gap:.75rem;margin-right:.8rem;font-size:1.125rem;color:#374151;font-weight:500;}
.controls .quality-control label{margin-right:.25rem;}

#quality-range{width:260px;max-width:60vw;appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg,#e5e7eb,#d1d5db);outline:none;cursor:pointer;transition:background .15s ease,box-shadow .15s ease;}
#quality-range:hover{box-shadow:0 0 0 4px rgba(37,99,235,0.08);}
#quality-range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#2563eb;border:2px solid #ffffff;box-shadow:0 2px 6px rgba(15,23,42,0.3);transition:transform .12s ease,box-shadow .12s ease;}
#quality-range:active::-webkit-slider-thumb{transform:scale(1.05);box-shadow:0 3px 8px rgba(15,23,42,0.4);}
#quality-range::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#e5e7eb,#d1d5db);}
#quality-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#2563eb;border:2px solid #ffffff;box-shadow:0 2px 6px rgba(15,23,42,0.3);transition:transform .12s ease,box-shadow .12s ease;}
#quality-range:active::-moz-range-thumb{transform:scale(1.05);box-shadow:0 3px 8px rgba(15,23,42,0.4);}

#quality-value{min-width:40px;text-align:center;font-weight:600;padding:.25rem .55rem;background:#ffffff;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;color:#111827;box-shadow:0 2px 5px rgba(15,23,42,0.06);}

button#convert-button{font-size:1.2rem; background:#ff3030; min-width:150px; border-radius:999px; padding:.65rem 1.6rem;border:0;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(220,38,38,0.32);transition:transform .14s ease,box-shadow .14s ease,opacity .12s ease;}
button#convert-button:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(220,38,38,0.4);opacity:.97;}
button#convert-button:active{transform:translateY(1px);box-shadow:0 7px 18px rgba(220,38,38,0.35);opacity:.9;}

/* ========== MESSAGES / STATUS ========== */
.message-area{margin-top:1rem;  padding:.85rem;  border-radius:10px;  display:none;  font-weight:600;} 
.message-area.visible{display:block;} 
.message-area.success{background:#ecfdf5;  border:1px solid #bbf7d0;  color:#065f46;} 
.message-area.error{background:#fff1f2;  border:1px solid #fecaca;  color:#7f1d1d;} 
.message-area.info{background:#eef6f2;  border:1px solid #cfe6d9;  color:#0b3b33;} 

/* ========== CONVERTED LIST & ITEMS ========== */
.converted-list{display:grid;  gap:.75rem;  margin-top:.75rem;  position:relative;  min-height:48px;  width:100%;  grid-template-columns:repeat(2,1fr);} 
.converted-list.loading::before{content:"Converting…";  position:absolute;  left:12px;  top:12px;  padding:.45rem .9rem;  border-radius:8px;  background:rgba(15,23,36,0.06);  color:var(--muted-text);  font-weight:700;  z-index:2;  backdrop-filter:blur(2px);} 
.converted-item{display:flex;  align-items:center;  gap:12px;  background:linear-gradient(180deg,var(--card-bg),var(--muted-card));  padding:.6rem;  border:1px solid var(--border-color);  border-radius:10px;  flex-wrap:wrap;  max-width:100%;  animation:cardFadeIn 0.45s ease-out;} 
.converted-thumb{width:72px;  height:54px;  object-fit:cover;  border-radius:6px;} 
.converted-meta{flex:1;  min-width:0;  margin:auto;} 
.converted-name{font-weight:500;color:var(--text-color);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;margin:0;max-width:200px;}

.converted-size{margin:auto;} 
.converted-actions{display:flex;  gap:.5rem;  align-items:center;  margin:auto;} 

/* ========== PAGE CONTENT / SEO SECTION ========== */
.page-content{margin-top:1.8rem;  background:transparent;  padding:1rem 0 2rem 0;} 
.content-body{display:flex;  flex-direction:column;  gap:1.25rem;} 
.color-card{padding:.5rem 1rem 1.5rem;  border-radius:14px;  display:flex;  flex-direction:column;  gap:1rem;  align-items:flex-start;  background:var(--card-bg);  border-left:3px solid green;} 

/* Content card with better typography */
.content-card{margin:0 auto;  padding:1.6rem 1.8rem;  border-radius:14px;  box-shadow:0 14px 44px rgba(11,20,18,0.06);  display:flex;  flex-direction:column;  gap:1rem;  align-items:flex-start;  background:var(--card-bg);  border:1px solid var(--border-color);  animation:contentFadeUp 0.8s ease-out 0.2s 1;} 
.content-card>h2{margin:0 0 .6rem 0;  font-size:1.6rem;  color:var(--surface-dark);  line-height:1.2;  letter-spacing:0.2px;} 
.content-card h3{margin:.4rem 0 .5rem 0;  color:var(--surface-dark);  font-size:1.25rem;  font-weight:700;} 
.content-card p{margin:0 0 .9rem 0;  line-height:1.75;  font-size:1rem;  color:var(--text-color);} 
.content-card ul,.content-card ol{margin:.3rem 0 1rem 1.4rem;  line-height:1.75;} 
.content-card li{margin-bottom:.4rem;    color:var(--text-color);    }
.section-block{padding-top:.6rem;    padding-bottom:.4rem;    width:100%;} 
.section-block+.section-block{margin-top:.6rem;} 
.section-divider{height:1px;  background:linear-gradient(90deg,rgba(14,35,50,0.06),rgba(14,35,50,0.02));  margin:1rem 0;  width:100%;} 
.seo-text{color:var(--muted-text);  line-height:1.8;  font-size:1.02rem;} 
.more-text{margin-top:.8rem;  color:var(--muted-text);} 
p.sub-text{padding-left:10px;} 

/* ========== FEATURE CHIPS & BENEFITS ========== */
.feature-chips{display:grid;  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));  gap:.6rem;  margin-top:.5rem;  padding-left:0;  list-style:none;} 
.feature-chip{border:1px solid rgba(14,35,50,0.06);  background:linear-gradient(180deg,#fbfdff,#ffffff);  padding:.6rem .8rem;  border-radius:10px;  font-weight:600;  color:#15313a;  box-shadow:0 6px 18px rgba(11,20,18,0.03);  display:flex;  align-items:flex-start;  gap:.5rem;} 
.benefits-list{display:grid;  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));  gap:.6rem;  margin-top:.6rem;  padding-left:0;  list-style:none;} 
.benefits-list li{background:transparent;  padding:.8rem;  border-radius:8px;  font-weight:400;  color:var(--surface-dark);  display:flex;  align-items:center;  gap:.5rem;} 

/* ========== FAQ STYLING ========== */
.faq-section{margin-top:1rem;  padding-top:.6rem;  border-top:1px dashed rgba(14,35,50,0.04);  width:100%;} 
.faq-list{margin-top:.8rem;  display:flex;  flex-direction:column;  gap:1.6rem;} 
.faq-item{padding:0;  border-radius:0;  border:0;  background:transparent;} 
.faq-q{font-weight:700;  margin-bottom:.18rem;  font-size:1.02rem;  color:var(--surface-dark);  padding-left:8px;} 
.faq-a{color:var(--muted-text);  line-height:1.75;  margin:0;  padding-left:20px;  padding-top:4px;  font-size:0.97rem;} 

/* ========== FOOTER ========== */
footer.site-footer{background:var(--footer-bg);  color:#fff;  padding:2rem 0 1.25rem;  margin-top:2.5rem;  border-top:1px solid rgba(255,255,255,0.03);} 
.footer-inner{display:flex;  gap:2rem;  align-items:flex-start;  justify-content:space-between;  flex-wrap:wrap;} 
.footer-brand h3{margin:0;  font-size:1.1rem;} 
.footer-brand .muted{color:var(--footer-muted);  margin-top:.3rem;  font-size:.95rem;} 
.footer-links{display:flex;  gap:2rem;  align-items:flex-start;  flex-wrap:wrap;} 
.footer-column h4{margin:0 0 .5rem 0;  color:var(--footer-muted);  font-size:.95rem;} 
.footer-column ul{margin:0;  padding:0;  list-style:none;} 
.footer-column a{color:#fff;  text-decoration:none;  display:block;  margin-bottom:.4rem;  opacity:0.95;  font-size:.9rem;} 
.footer-column a:hover{opacity:1;  text-decoration:underline;} 
.footer-bottom{margin-top:1rem;  text-align:center;  padding-top:1rem;  border-top:1px solid rgba(255,255,255,0.04);} 
.footer-bottom small{color:var(--footer-muted);} 

/* ========== PREVIEW / CONVERTED NAME TWEAKS ========== */
.preview-list .file-name,.converted-list .converted-name{display:block;  overflow:hidden;  text-overflow:ellipsis;  white-space:nowrap;  max-width:100%;} 
.converted-size,.converted-name{margin:auto; text-align:center} 
.converted-name{ font-size:0.9rem}

/* ========== UTILITY CLASSES ========== */
.visually-hidden{position:absolute;  width:1px;  height:1px;  padding:0;  margin:-1px;  overflow:hidden;  clip:rect(0 0 0 0);  white-space:nowrap;  border:0;} 
div#zip-wrapper{margin:auto;} 
button#download-zip{border-color:red;  font-size:1rem;  color:blue;  margin:auto;} 

/* ========== RESPONSIVE QUERIES ========== */
@media (max-width:880px){
  .header-inner{flex-direction:column;  align-items:center;  gap:.6rem;  text-align:center;  padding-top: 0px;} 
  .brand{margin-left:0;} 
  .footer-inner{flex-direction:column;  gap:1rem;  align-items:flex-start;} 
  .controls{flex-direction:column;  align-items:center;  padding-top:20px;} 
  #quality-range{width:200px;} 
  .preview-list{grid-template-columns:repeat(2,1fr);} 
  .converted-item{flex-direction:row;} 
}

@media (max-width:720px){
  .feature-chips{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));} 
  .content-card{padding:1.1rem 1rem;  gap:.75rem;} 
  .content-card>h2{font-size:1.35rem;} 
  .content-card p{font-size:.97rem;  line-height:1.8;} 
}

@media (max-width:520px){
  .preview-list{grid-template-columns:repeat(2,1fr);} 
  .thumb{width:80px;  height:80px;} 
  .converted-item{flex-direction:column;  align-items:flex-start;  gap:.5rem;} 
  .converted-thumb{width:100%;  height:auto;  max-height:7f1d1d0px;  object-fit:contain;} 
  #quality-range{width:100%;} 
  .controls{gap:.6rem;} 
  .file-name{max-width:100%;  white-space:normal;  -webkit-line-clamp:2;  display:block;} 
  .preview-list .file-name,.converted-list .converted-name{font-size:.85rem;} 
  .preview-card,.converted-item{padding:.5rem;  gap:8px;} 
}

/* ========== ANIMATIONS ========== */
@keyframes headerDrop{0%{opacity:0;  transform:translateY(-18px);} 100%{opacity:1;  transform:translateY(0);} }
@keyframes contentFadeUp{0%{opacity:0;  transform:translateY(18px);} 100%{opacity:1;  transform:translateY(0);} }
@keyframes floatIn{0%{opacity:0;  transform:translateY(14px) scale(0.98);} 100%{opacity:1;  transform:translateY(0) scale(1);} }
@keyframes cardFadeIn{0%{opacity:0;  transform:translateY(8px);} 100%{opacity:1;  transform:translateY(0);} }


/* Upload preview animation: only newly added items */
.preview-card{animation:none !important;}
.preview-card.new-upload{animation:cardFadeIn 0.45s ease-out !important; animation-fill-mode:both;}

/* Custome css */

/* Modern professional upload box */
.upload-area{width:90%;max-width:720px;margin:1.4rem auto 0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.6rem 1.4rem;border-radius:14px;cursor:pointer;min-height:160px;background:linear-gradient(135deg,#f9fafb,#eef7f5);border:1px dashed rgba(17,77,64,0.45);box-shadow:0 12px 30px rgba(15,23,42,0.06);position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;}
.upload-area::before{content:"📁";font-size:2.1rem;margin-bottom:.6rem;opacity:.95;animation:folderPulse 2.4s ease-in-out infinite;}
.upload-area::after{content:none!important;}

.upload-area.dragover{outline:none;background:linear-gradient(135deg,#ecfdf3,#dff7ef);border-color:var(--primary-color);box-shadow:0 18px 40px rgba(15,118,110,0.22);transform:translateY(-2px);animation:uploadGlow 1.4s ease-in-out infinite alternate;}

.upload-area:focus-visible{outline:2px solid rgba(17,77,64,0.55);outline-offset:4px;box-shadow:0 6px 16px rgba(15,23,42,0.18);}

.upload-area:active{transform:translateY(1px) scale(.985);box-shadow:0 8px 22px rgba(15,23,42,0.2);}

.drop-hint{order:2;margin:.75rem 0 0;color:#4b5563;font-size:.95rem;font-weight:500;text-align:center;max-width:420px;}

.upload-button{order:1;font-size:1rem;display:inline-block;color:#ffffff;padding:.55rem 1.35rem;border-radius:999px;text-decoration:none;margin-top:.15rem;cursor:pointer;font-weight:600;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));border:0;box-shadow:0 8px 22px rgba(17,77,64,0.22);transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;}
.upload-button:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(17,77,64,0.30);opacity:.97;}
.upload-button:active{transform:translateY(1px);box-shadow:0 5px 14px rgba(17,77,64,0.25);opacity:.9;}

input[type=file]{display:none;}



@keyframes uploadGlow{0%{box-shadow:0 12px 30px rgba(8,24,20,0.18),0 0 0 0 rgba(34,197,94,0.35);}100%{box-shadow:0 18px 40px rgba(8,24,20,0.3),0 0 0 10px rgba(34,197,94,0);}}
@keyframes folderPulse{0%{transform:translateY(0) scale(1);opacity:.9;}50%{transform:translateY(-2px) scale(1.06);opacity:1;}100%{transform:translateY(0) scale(1);opacity:.9;}}