/* =========================================================
   UltraPNG — download.css v11.0
   Professional buttons, refined cards, mobile fixes
   ========================================================= */

/* ── OUTER LAYOUT ── */
.dl-outer-wrap{display:block;width:100%;max-width:var(--max-w);margin:0 auto;padding:0;overflow-x:hidden}
.dl-col-ad,.dl-col-ad-left,.dl-col-ad-right{display:none!important}
.dl-col-main{width:100%;min-width:0}
.dl-col-main>.download-page,
.dl-col-main>.dl-content,
.dl-col-main>.dl-related{
  padding-left:var(--gutter);
  padding-right:var(--gutter)
}

/* ── BREADCRUMB + TITLE ── */
.download-page{padding-top:16px;padding-bottom:0}
.download-page .breadcrumb{padding:0 0 10px}

.post-title{
  font-size:clamp(18px,2.8vw,26px);
  line-height:1.25;letter-spacing:-.4px;
  margin:0 0 18px;color:var(--text-h);font-weight:800;
  font-family:'Raleway',sans-serif
}

/* ── 2-COLUMN LAYOUT: image left, sidebar right ── */
.download-hero{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:24px;align-items:start
}
@media(max-width:960px){
  .download-hero{grid-template-columns:1fr;gap:16px}
}

/* ── IMAGE PREVIEW CARD ── */
.dl-preview{
  background:#fff;border:1px solid var(--border-light);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md)
}
.dl-preview-img{
  padding:24px;display:flex;align-items:center;justify-content:center;
  min-height:360px;
  background-color:#f9f9f9;
  background-image:
    linear-gradient(45deg,#efefef 25%,transparent 25%),
    linear-gradient(-45deg,#efefef 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#efefef 75%),
    linear-gradient(-45deg,transparent 75%,#efefef 75%);
  background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;
  cursor:zoom-in;position:relative;transition:background-color var(--t-sm)
}
.dl-preview-img img{
  max-height:420px;width:auto;max-width:100%;display:block;
  transition:transform var(--t-md);
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none
}
.dl-preview-img:hover img{transform:scale(1.03)}
/* Watermark overlay */
.dl-preview-img::after{
  content:'www.ultrapng.com';
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.65);color:#F97316;
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px;
  letter-spacing:.4px;pointer-events:none;white-space:nowrap;
  font-family:'Nunito',sans-serif
}

/* Meta strip below image */
.dl-preview-meta{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border-light);background:#F8FAFC
}
.dl-meta-item{padding:10px 8px;text-align:center;border-right:1px solid var(--border-light)}
.dl-meta-item:last-child{border-right:none}
.dl-meta-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin-bottom:3px;font-family:'Nunito',sans-serif}
.dl-meta-val{font-size:13px;font-weight:700;color:var(--text-h);font-family:'Raleway',sans-serif}

/* Ad below image */
.dl-leaderboard-ad{margin-top:12px;min-height:0}
.dl-leaderboard-ad:empty,.ad-slot:empty,.ad-leaderboard:empty{
  display:none!important;min-height:0!important;margin:0!important;padding:0!important
}
.ad-slot{min-height:0}
.ad-leaderboard{min-height:0;margin:0}

/* ── STICKY SIDEBAR ── */
.dl-sidebar{position:sticky;top:calc(var(--header-h) + 16px)}
@media(max-width:960px){.dl-sidebar{position:static}}

/* ── DOWNLOAD BOX ── */
.dl-box{
  background:#fff;border:1px solid var(--border-light);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md)
}
.dl-box-top{
  padding:16px 20px;
  background:linear-gradient(135deg,#EFF6FF 0%,#F0FDF4 100%);
  border-bottom:1px solid var(--border-light);text-align:center
}
.dl-box-top h2{
  font-size:16px;margin:0 0 3px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Raleway',sans-serif;font-weight:800
}
.dl-box-top p{font-size:12px;color:var(--text-muted);margin:0;font-family:'Nunito',sans-serif}
.dl-box-body{padding:16px 20px}

/* ── COUNTDOWN RING ── */
.dl-countdown{text-align:center;margin-bottom:14px}
.dl-countdown-label{font-size:11px;font-weight:700;color:var(--text-muted);display:block;margin-bottom:6px;font-family:'Nunito',sans-serif;letter-spacing:.3px}
.dl-countdown-ring{position:relative;width:76px;height:76px;margin:0 auto 8px}
.dl-countdown-ring svg{width:76px;height:76px;display:block}
.dl-countdown-ring circle{fill:none;stroke-width:5}
.dl-countdown-ring .track{stroke:var(--border-light)}
.dl-countdown-ring .progress{
  stroke:var(--primary-light);stroke-dasharray:226;stroke-dashoffset:226;
  stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset 1s linear
}
.dl-countdown-num,.countdown-num{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Raleway',sans-serif;font-size:22px;font-weight:800;color:var(--text-h);line-height:1
}
.dl-countdown-text{font-size:11px;color:var(--text-muted);display:block;font-family:'Nunito',sans-serif;font-weight:600}

/* ── DOWNLOAD BUTTON ── */
.dl-btn{
  width:100%;height:52px;
  background:linear-gradient(135deg,var(--green) 0%,#19843E 100%);
  color:#fff;font-size:15px;font-weight:800;letter-spacing:.3px;
  border-radius:var(--r-full);border:none;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 6px 24px rgba(22,163,74,.32);
  transition:all var(--t-sm) var(--ease-spring);
  cursor:pointer;margin-bottom:14px;
  -webkit-tap-highlight-color:transparent;
  font-family:'Nunito',sans-serif
}
.dl-btn:disabled{
  background:#F1F5F9;color:var(--text-muted);
  box-shadow:none;cursor:not-allowed;transform:none!important
}
.dl-btn.ready{
  animation:pulse-green .8s var(--ease-spring);
  background:linear-gradient(135deg,#22c55e 0%,var(--green) 100%)
}
.dl-btn:not(:disabled):hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(22,163,74,.40)
}
.dl-btn:not(:disabled):active{transform:translateY(0);box-shadow:0 4px 14px rgba(22,163,74,.25)}
@keyframes pulse-green{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}

/* ── FORMAT SWITCHER ── */
.dl-formats{margin-bottom:14px}
.dl-formats p{font-size:11px;font-weight:700;color:var(--text-muted);margin:0 0 6px;text-transform:uppercase;letter-spacing:.5px;font-family:'Nunito',sans-serif}
.dl-format-btns{display:flex;gap:8px}
.dl-format-btn,.format-btn{
  flex:1;height:38px;border-radius:var(--r-full);
  border:1.5px solid var(--border-light);background:#F8FAFC;
  font-size:13px;font-weight:700;color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--t-sm);
  -webkit-tap-highlight-color:transparent;
  font-family:'Nunito',sans-serif
}
.dl-format-btn.active,.format-btn.active{
  background:#EFF6FF;border-color:var(--primary-light);color:var(--primary-light);
  box-shadow:0 2px 8px rgba(37,99,235,.15)
}
.dl-format-btn:hover,.format-btn:hover{border-color:var(--primary-light);color:var(--primary-light);background:#EFF6FF}

/* ── FEATURE CHECKLIST ── */
.dl-features{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:14px;padding:12px 14px;
  background:#F8FAFC;border-radius:var(--r-md);border:1px solid var(--border-light)
}
.dl-feature{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-body);font-family:'Nunito',sans-serif}
.dl-feature svg{width:14px;height:14px;color:var(--green);flex-shrink:0}

/* ── SHARE BUTTONS ── */
.dl-share{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--border-light)}
.dl-share-label{font-size:10px;font-weight:700;color:var(--text-muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.6px;font-family:'Nunito',sans-serif}
.dl-share-btns{display:flex;gap:6px;flex:1}
.dl-share-btn,.share-btn{
  flex:1;min-height:44px;border-radius:var(--r-sm);
  border:1.5px solid var(--border-light);background:#F8FAFC;
  font-size:16px;display:flex;align-items:center;justify-content:center;
  transition:all var(--t-sm);cursor:pointer;
  -webkit-tap-highlight-color:transparent
}
.dl-share-btn:hover,.share-btn:hover{transform:scale(1.08);border-color:var(--primary-light);background:#EFF6FF;box-shadow:0 4px 12px rgba(37,99,235,.15)}

/* ── DESCRIPTION + TAGS ── */
.dl-content{padding-top:0;padding-bottom:0;margin-top:24px}
.dl-desc{max-width:820px}
.dl-desc p{font-size:14.5px;line-height:1.78;color:var(--text-body);margin:0 0 12px;font-family:'Nunito',sans-serif}
.dl-desc p:last-child{margin-bottom:0}
.dl-desc h2,.dl-desc h3{margin:16px 0 8px;color:var(--text-h)}
.dl-desc h2{font-size:17px;font-family:'Raleway',sans-serif}
.dl-desc h3{font-size:15px;font-family:'Raleway',sans-serif}
.dl-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}

/* ── RELATED SECTION ── */
.dl-related{
  width:100%;box-sizing:border-box;
  margin-top:32px;padding-top:28px;padding-bottom:36px;
  border-top:1px solid var(--border-light)
}
.dl-related h2{font-size:18px;font-weight:800;color:var(--text-h);margin-bottom:18px;font-family:'Raleway',sans-serif}

.dl-related-grid{columns:5 160px;column-gap:12px;width:100%;box-sizing:border-box}
@media(max-width:1100px){.dl-related-grid{columns:4 150px}}
@media(max-width:800px) {.dl-related-grid{columns:3 130px}}
@media(max-width:520px) {.dl-related-grid{columns:2 130px}}

.dl-related-card{
  break-inside:avoid;margin-bottom:12px;
  border-radius:var(--r-md);overflow:hidden;
  background:#fff;border:1px solid var(--border-light);box-shadow:var(--shadow-card);
  transition:transform var(--t-md) var(--ease-spring),box-shadow var(--t-md),border-color var(--t-md);
  display:block;text-decoration:none;
  animation:fadeIn .3s var(--ease) forwards
}
.dl-related-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow-lg);border-color:#BFDBFE}

.dl-related-thumb{
  position:relative;overflow:hidden;background-color:#f9f9f9;
  background-image:
    linear-gradient(45deg,#efefef 25%,transparent 25%),
    linear-gradient(-45deg,#efefef 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#efefef 75%),
    linear-gradient(-45deg,transparent 75%,#efefef 75%);
  background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0
}
.dl-related-thumb img{width:100%;height:auto;display:block;transition:transform var(--t-md)}
.dl-related-card:hover .dl-related-thumb img{transform:scale(1.05)}

.dl-related-info{padding:8px 10px 10px}
.dl-related-title-text{
  display:block;font-size:12px;font-weight:700;color:var(--text-h);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:3px;line-height:1.3;font-family:'Nunito',sans-serif
}
.dl-related-cat{display:block;font-size:11px;color:var(--text-muted);text-transform:capitalize;font-weight:600;font-family:'Nunito',sans-serif}

/* ── LIGHTBOX ── */
.dl-lightbox{position:fixed;inset:0;z-index:500;background:rgba(15,23,42,.9);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
.dl-lightbox.open{display:flex;animation:fadeIn .2s ease}
.dl-lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:var(--r-lg);box-shadow:0 24px 80px rgba(0,0,0,.5);-webkit-user-select:none;user-select:none;pointer-events:none}
.dl-lightbox-close{position:absolute;top:16px;right:20px;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:22px;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:background .15s}
.dl-lightbox-close:hover{background:rgba(255,255,255,.28)}

/* ================================================================
   DOWNLOAD PAGE — TABLET
   ================================================================ */
@media(max-width:960px){
  .dl-preview-img{min-height:300px}
  .download-hero{gap:16px}
}

/* ================================================================
   DOWNLOAD PAGE — MOBILE (≤768px)
   ================================================================ */
@media(max-width:768px){
  .download-page{padding-top:12px}
  .post-title{font-size:clamp(17px,4.5vw,22px);margin-bottom:14px}
  .dl-preview-img{min-height:220px;padding:16px}
  .dl-preview-img img{max-height:280px}
  .dl-preview-meta{grid-template-columns:1fr 1fr}
  .dl-meta-item:nth-child(2){border-right:none}
  .dl-meta-item:nth-child(-n+2){border-bottom:1px solid var(--border-light)}
  .dl-box-body{padding:14px 16px}
  .dl-box-top{padding:14px 16px}
  .dl-box-top h2{font-size:15px}
  .dl-format-btn,.format-btn{height:44px;font-size:14px}
  .dl-tags{gap:5px}
  .tag-chip{padding:5px 12px;font-size:11px}
  .dl-related h2{font-size:16px}
}

/* ================================================================
   DOWNLOAD PAGE — SMALL MOBILE (≤480px)
   ================================================================ */
@media(max-width:480px){
  .dl-preview-img{min-height:180px;padding:12px}
  .dl-preview-img img{max-height:240px}
  .dl-features{padding:10px 12px;gap:7px}
  .dl-feature{font-size:12px}
  .dl-share-label{display:none}
  .dl-share-btns{gap:8px}
}