/* =====================================================================
 * pdf-tools.css — shared layout & components for the Digitaliiisla free
 * PDF & image tools (merge, split, pdf-to-jpg, image-converter, compress,
 * rotate, jpg-to-pdf, hub). Pairs with shared/design-tokens.css for the
 * palette + light/dark mode. Mobile-first, no horizontal overflow,
 * Chrome 109 / Windows 7 safe (no container queries, no :has()).
 * ===================================================================== */

:root { --pt-stage:#eef1f5; }
[data-theme="dark"] { --pt-stage:#0a1524; }

*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:var(--bg);}
body{background:var(--bg); color:var(--text-primary); font-family:var(--font-sans); overflow-x:hidden; -webkit-text-size-adjust:100%; line-height:1.5;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
button,input,select,textarea{font-family:inherit;}
h1,h2,h3{font-family:var(--font-display); line-height:1.2;}

.pt-wrap{max-width:1120px; margin:0 auto; padding:18px 16px 40px;}

/* ---------- header ---------- */
.pt-head{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.pt-head-txt{flex:1 1 320px; min-width:0;}
.pt-head-txt h1{font-size:clamp(23px,4vw,34px); font-weight:800; letter-spacing:-.4px;}
.pt-eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--primary); margin-bottom:7px;}
.pt-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--primary);}
.pt-head-txt p.sub{font-size:14.5px; color:var(--text-secondary); margin-top:8px; max-width:64ch; line-height:1.55;}
.pt-formats{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; font-size:12px;}
.pt-formats span{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--radius-full);
  background:var(--hover); border:1px solid var(--border); color:var(--text-primary); font-weight:600;}
.pt-free{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--success);
  background:var(--success-bg); border:1px solid var(--border); padding:8px 13px; border-radius:var(--radius-full); white-space:nowrap;}

.pt-privacy{display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-radius:var(--radius-md);
  background:var(--success-bg); border:1px solid var(--border); font-size:12.5px; color:var(--text-primary); margin-bottom:18px; line-height:1.45;}
.pt-privacy b{color:var(--success);}
.pt-privacy svg{flex:0 0 auto; margin-top:1px; color:var(--success);}

/* ---------- layout grid (options + work area) ---------- */
.pt-grid{display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:start;}
@media (max-width:820px){ .pt-grid{grid-template-columns:1fr;} }

.pt-panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm);}
@media (max-width:820px){ .pt-panel.pt-opts{order:3;} }
.pt-panel + .pt-panel{margin-top:16px;}
.pt-sec-h{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-secondary); margin:16px 0 9px;}
.pt-sec-h:first-child{margin-top:2px;}

.pt-field{display:block; margin-bottom:13px;}
.pt-field > span{display:block; font-size:11.5px; font-weight:600; color:var(--text-secondary); margin-bottom:6px;}
.pt-inp{width:100%; padding:11px 12px; border-radius:var(--radius-md); background:var(--hover); border:1px solid var(--border-strong); color:var(--text-primary); font-size:14px; min-height:44px;}
.pt-inp:focus{outline:2px solid var(--focus-ring); outline-offset:1px;}
select.pt-inp{cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239eabc0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;}

.pt-seg{display:flex; background:var(--hover); border:1px solid var(--border); border-radius:var(--radius-md); padding:3px; gap:3px; flex-wrap:wrap;}
.pt-seg button{flex:1 1 auto; border:0; background:none; color:var(--text-secondary); padding:9px 8px; border-radius:9px; font-size:12px; font-weight:600; cursor:pointer; min-height:38px;}
.pt-seg button.on{background:var(--card); color:var(--text-primary); box-shadow:var(--shadow-sm);}
[data-theme="light"] .pt-seg button.on{background:#fff;}

.pt-check{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-md);
  background:var(--hover); border:1px solid var(--border); cursor:pointer; min-height:44px;}
.pt-check input{width:18px; height:18px; accent-color:var(--primary); flex:0 0 auto; cursor:pointer;}
.pt-check span{font-size:13px; font-weight:600; color:var(--text-primary);}

.pt-hint{font-size:11.5px; color:var(--text-secondary); line-height:1.45; margin-top:4px;}

/* ---------- buttons ---------- */
.pt-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 18px;
  border-radius:var(--radius-md); border:1px solid var(--border-strong); background:var(--hover); color:var(--text-primary);
  font-size:14px; font-weight:600; cursor:pointer; transition:background .15s, transform .12s; white-space:nowrap;}
.pt-btn:hover{background:var(--active);}
.pt-btn:active{transform:translateY(1px);}
.pt-btn:disabled{opacity:.5; cursor:default;}
.pt-btn.primary{background:var(--primary); color:var(--text-on-primary); border-color:var(--primary);}
.pt-btn.primary:hover{background:var(--primary-hover); box-shadow:var(--shadow-md);}
.pt-btn.big{min-height:52px; padding:12px 26px; font-size:15px; font-weight:700;}
.pt-btn.danger{color:var(--danger); border-color:var(--danger-bg);}
.pt-btn.sm{min-height:38px; padding:8px 13px; font-size:12.5px;}

/* ---------- dropzone ---------- */
.pt-drop{border:2px dashed var(--border-strong); border-radius:var(--radius-lg); background:var(--card);
  padding:38px 20px; text-align:center; transition:border-color .18s, background .18s; cursor:pointer;}
.pt-drop.drag{border-color:var(--primary); background:var(--active);}
.pt-drop-ic{width:60px; height:60px; margin:0 auto 14px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--active); color:var(--primary);}
.pt-drop h2{font-size:18px; font-weight:700;}
.pt-drop p{font-size:13px; color:var(--text-secondary); margin-top:6px; line-height:1.5;}
.pt-drop .pt-btns{margin-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.pt-drop .or{font-size:12px; color:var(--text-secondary); margin-top:12px;}

/* ---------- files toolbar + thumbnails ---------- */
.pt-files-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.pt-count{font-size:13.5px; font-weight:700;}
.pt-count small{font-weight:500; color:var(--text-secondary);}
.pt-files-bar .spacer{flex:1;}

.pt-thumbs{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px;}
@media (max-width:420px){ .pt-thumbs{grid-template-columns:repeat(2,1fr); gap:10px;} }
.pt-card{position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm); touch-action:manipulation;}
.pt-card.dragging{opacity:.4;}
.pt-card.dragover{outline:2px dashed var(--primary); outline-offset:-2px;}
.pt-card.err{border-color:var(--danger);}
.pt-card.sel{outline:2px solid var(--primary); outline-offset:-2px;}
.pt-thumb{position:relative; aspect-ratio:3/4; background:var(--pt-stage); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.pt-thumb img,.pt-thumb canvas{max-width:100%; max-height:100%; object-fit:contain;}
.pt-thumb .pt-mark{display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--danger); font-weight:700; font-size:12px;}
.pt-idx{position:absolute; top:6px; left:6px; z-index:2; min-width:22px; height:22px; padding:0 6px; border-radius:11px;
  background:rgba(11,26,48,.82); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.pt-drag{position:absolute; top:6px; right:6px; z-index:2; width:28px; height:28px; border-radius:8px; border:0;
  background:rgba(11,26,48,.72); color:#fff; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none;}
.pt-drag:active{cursor:grabbing;}
.pt-cardfoot{display:flex; align-items:center; gap:2px; padding:5px; border-top:1px solid var(--border);}
.pt-icbtn{flex:1; display:flex; align-items:center; justify-content:center; min-height:36px; border:0; background:none; color:var(--text-secondary);
  border-radius:8px; cursor:pointer; transition:background .12s, color .12s;}
.pt-icbtn:hover{background:var(--hover); color:var(--text-primary);}
.pt-icbtn.del:hover{color:var(--danger);}
.pt-cardname{font-size:10.5px; color:var(--text-secondary); padding:5px 7px 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pt-cardname.errtxt{color:var(--danger);}
.pt-pagechk{position:absolute; bottom:6px; left:6px; z-index:2; width:20px; height:20px; accent-color:var(--primary);}

/* ---------- action bar ---------- */
.pt-actionbar{position:sticky; bottom:0; z-index:20; margin-top:18px; padding:12px 14px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.pt-actionbar .pt-mkbtn{flex:1 1 auto; min-width:180px;}
.pt-progress{flex:1 1 100%; display:none;}
.pt-progress.on{display:block;}
.pt-bar{height:8px; border-radius:5px; background:var(--hover); overflow:hidden;}
.pt-bar > i{display:block; height:100%; width:0; background:var(--primary); transition:width .2s var(--ease);}
.pt-progress p{font-size:11.5px; color:var(--text-secondary); margin-top:5px;}

/* ---------- result / preview ---------- */
.pt-result{margin-top:16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm);}
.pt-result-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.pt-result-head h3{font-size:15px; font-weight:700; word-break:break-all;}
.pt-result-head .ok{display:inline-flex; align-items:center; gap:6px; color:var(--success); font-size:12px; font-weight:700;}
.pt-result-head .spacer{flex:1;}
.pt-preview{width:100%; height:min(70vh,560px); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--pt-stage);}
.pt-preview-img{width:100%; max-height:min(70vh,560px); object-fit:contain; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--pt-stage);}
.pt-savings{display:flex; gap:16px; flex-wrap:wrap; font-size:13px; margin-bottom:12px;}
.pt-savings b{color:var(--text-primary);}
.pt-savings .save{color:var(--success); font-weight:700;}

.pt-hidden{display:none !important;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- SEO content ---------- */
.pt-seo{max-width:820px; margin:12px auto 0; padding:8px 16px 20px; line-height:1.65;}
.pt-seo h2{font-size:clamp(18px,2.4vw,22px); font-weight:700; margin:30px 0 10px; letter-spacing:-.2px;}
.pt-seo h2:first-child{margin-top:8px;}
.pt-seo h3{font-size:16px; font-weight:700; margin:18px 0 8px;}
.pt-seo p{font-size:14.5px; color:var(--text-primary); margin:0 0 12px;}
.pt-seo ol,.pt-seo ul{margin:0 0 12px; padding-left:20px; font-size:14.5px; color:var(--text-primary);}
.pt-seo li{margin:6px 0;}
.pt-seo a{color:var(--secondary); font-weight:600; text-decoration:underline; text-underline-offset:2px;}
.pt-faq{margin-top:18px;}
.pt-faq details{border:1px solid var(--border); border-radius:var(--radius-md); background:var(--card); margin-bottom:10px; overflow:hidden;}
.pt-faq summary{list-style:none; cursor:pointer; padding:14px 16px; font-size:14.5px; font-weight:600; color:var(--text-primary);
  display:flex; align-items:center; justify-content:space-between; gap:12px;}
.pt-faq summary::-webkit-details-marker{display:none;}
.pt-faq summary::after{content:"+"; font-size:20px; font-weight:400; color:var(--text-secondary); flex:0 0 auto;}
.pt-faq details[open] summary::after{content:"\2212";}
.pt-faq .a{padding:0 16px 14px; font-size:14px; color:var(--text-secondary); line-height:1.6;}

/* ---------- "More free PDF tools" cross-link grid ---------- */
.pt-more{max-width:1120px; margin:26px auto 0; padding:0 16px;}
.pt-more h2{font-size:clamp(17px,2.2vw,21px); font-weight:700; margin-bottom:4px;}
.pt-more p.lead{font-size:13.5px; color:var(--text-secondary); margin-bottom:16px;}
.pt-toolgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:12px;}
.pt-toolcard{display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--card); box-shadow:var(--shadow-sm); transition:transform .14s var(--ease), border-color .14s;}
.pt-toolcard:hover{transform:translateY(-2px); border-color:var(--border-strong);}
.pt-toolcard.cur{border-color:var(--primary); background:var(--active);}
.pt-toolcard .ic{flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--active); color:var(--primary);}
.pt-toolcard .tx{min-width:0;}
.pt-toolcard .tx b{display:block; font-size:14px; font-weight:700; color:var(--text-primary);}
.pt-toolcard .tx span{display:block; font-size:12px; color:var(--text-secondary); margin-top:2px; line-height:1.45;}
.pt-toolcard .cur-tag{font-size:10px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.5px;}

/* ---------- footer ---------- */
.pt-foot{border-top:1px solid var(--border); margin-top:28px; padding:26px 16px 40px; text-align:center;}
.pt-foot a.brand{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--text-primary);}
.pt-foot a.brand svg{color:var(--primary);}
.pt-foot p{font-size:12px; color:var(--text-secondary); margin-top:10px; max-width:660px; margin-left:auto; margin-right:auto; line-height:1.55;}
.pt-foot .links{margin-top:10px; font-size:12.5px;}
.pt-foot .links a{color:var(--secondary); font-weight:600; margin:0 8px;}

/* ---------- toast ---------- */
.pt-toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); z-index:9000;
  background:var(--card); color:var(--text-primary); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:11px 16px; font-size:13px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:90vw;}
.pt-toast.on{opacity:1; transform:translateX(-50%) translateY(0);}
.pt-toast.err{border-color:var(--danger); color:var(--danger);}

/* ---------- hub hero ---------- */
.pt-hub-hero{text-align:center; max-width:760px; margin:8px auto 26px;}
.pt-hub-hero h1{font-size:clamp(26px,5vw,40px); font-weight:800; letter-spacing:-.6px;}
.pt-hub-hero p{font-size:15px; color:var(--text-secondary); margin-top:12px; line-height:1.6;}
.pt-hubgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px;}