/* Shared file card layout for order.html and upload.html. */
.file-row { display:block; position:relative; min-width:0; }
.file-row-main { width:100%; min-width:0; }
.file-row-top { display:flex; min-width:0; gap:12px; padding-right:34px; align-items:flex-start; justify-content:space-between; }
.file-row-name { display:flex; flex:1 1 auto; min-width:0; overflow:hidden; font-size:14px; font-weight:700; word-break:break-word; }
.file-name-base { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-name-ext { flex:0 0 auto; white-space:nowrap; }
.file-row-price { flex:0 0 auto; margin-left:auto; text-align:right; white-space:nowrap; font-size:14px; font-weight:700; }
.file-row-meta { margin-top:4px; color:var(--muted,#666); font-size:13px; line-height:1.55; }
.file-row > .remove-btn { position:absolute; top:2px; right:2px; }

.file-print-options { display:grid; grid-template-columns:auto auto 1fr; align-items:center; width:100%; margin-top:18px; padding:15px; gap:12px 16px; border:1px solid #dfe7ef; border-radius:10px; background:#f6f8fb; }
.file-print-title { grid-column:1/-1; color:var(--ink,#1f2937); font-size:12px; font-weight:700; }
.file-print-option { display:flex; align-items:center; justify-content:flex-start; gap:8px; min-width:0; color:var(--muted,#666); font-size:12px; }
.file-print-option > span { color:var(--muted,#666); }
.file-print-option input { width:64px; height:32px; padding:0 8px; border:1px solid var(--line,rgba(0,0,0,.14)); border-radius:8px; background:#fff; color:var(--ink,#1f2937); font:inherit; }
.file-print-option select { min-width:148px; height:32px; min-height:32px; border-radius:8px; background:#fff; }
.file-print-metrics { display:none; }

.sides-toggle { display:inline-flex; padding:2px; gap:2px; border:1px solid #d7dee8; border-radius:9px; background:#fff; }
.sides-toggle label { position:relative; display:flex; }
.sides-toggle input { position:absolute; opacity:0; pointer-events:none; }
.sides-toggle span { display:block; padding:6px 10px; border-radius:7px; color:var(--muted,#667085); font-size:12px; cursor:pointer; white-space:nowrap; }
.sides-toggle input:checked + span { background:#17324b; color:#fff; }

details.addons-dropdown { margin-top:12px; overflow:hidden; border:1px solid rgba(0,0,0,.10); border-radius:18px; background:#fff; }
details.addons-dropdown summary { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer; list-style:none; font-size:14px; font-weight:700; }
details.addons-dropdown summary::-webkit-details-marker { display:none; }
details.addons-dropdown summary::after { content:""; width:10px; height:10px; margin-left:12px; flex-shrink:0; border-right:2px solid rgba(0,0,0,.7); border-bottom:2px solid rgba(0,0,0,.7); transform:rotate(45deg); transition:transform .2s ease; }
details.addons-dropdown.locked-open summary::after { display:none; }
details.addons-dropdown[open] summary::after { transform:rotate(225deg) translate(-2px,-2px); }
.addons-dropdown-body { padding:0 16px 16px; border-top:1px solid rgba(0,0,0,.06); }

.addons-dropdown-body > .addon-note { display:none; }
.addon-checklist { display:flex; flex-direction:column; gap:0; margin-top:12px; }
.addon-checklist > label.addon-checkbox { order:1; }
.addon-checklist > .addon-inline-row { order:2; }
.addon-checklist > label.addon-checkbox:has(input[data-addon-field="lamination"]) { order:3; }
.addon-checkbox { display:grid; grid-template-columns:20px minmax(0,1fr); gap:8px; align-items:start; min-height:54px; padding:12px 0; margin:0; border-bottom:1px solid #eef1f5; font-size:14px; line-height:1.5; }
.addon-checkbox > input, .addon-inline-main > input { margin:3px 0 0; }
.addon-inline-text { min-width:0; }
.addon-line-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.addon-line-price { margin-left:auto; text-align:right; white-space:nowrap; font-size:14px; font-weight:700; }
.addon-note { display:block; margin-top:5px; color:var(--muted,#666); font-size:12px; }

.addon-inline-row { display:grid; grid-template-columns:20px minmax(0,1fr); gap:8px; align-items:start; min-height:54px; padding:12px 0; border-bottom:1px solid #eef1f5; }
.addon-inline-row .addon-inline-main { display:contents; }
.addon-inline-row .addon-inline-main > input { grid-column:1; grid-row:1; }
.addon-inline-row .addon-inline-text { display:grid; grid-column:2; grid-row:1; grid-template-columns:auto auto minmax(0,1fr); gap:8px; align-items:center; }
.addon-inline-row .addon-line-head { display:contents; }
.addon-inline-row .addon-line-head strong { grid-column:1; grid-row:1; }
.addon-inline-row .hole-punch-toggle { grid-column:2; grid-row:1; }
.addon-inline-row .addon-line-price { grid-column:3; grid-row:1; justify-self:end; }
.addon-inline-row .addon-note { grid-column:1/-1; grid-row:2; }

.hole-punch-toggle { display:inline-flex; gap:0; padding:3px; border:1px solid #cbd7e4; border-radius:9px; background:#fff; }
.hole-punch-choice { height:28px; padding:0 10px; border:0; border-radius:6px; background:transparent; color:inherit; font:inherit; font-size:12px; }
.hole-punch-choice.active { background:#17324b; color:#fff; }

@media (max-width:760px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .content, .panel, .catalog-panel, .service-list, .service-item, .service-upload-area, .file-list, .file-card, .file-row, .file-row-main, .file-print-options, details.addons-dropdown { width:100%; min-width:0; max-width:100%; }
  .file-row-top { display:block; padding-right:36px; }
  .file-row-name { width:100%; max-width:100%; white-space:nowrap; }
  .file-row-price { display:block; width:auto; margin:8px 0 0; text-align:left; }
  .file-print-options { display:block; padding:12px; }
  .file-print-option { display:block; margin-top:12px; }
  .file-print-option:first-of-type { display:flex; align-items:center; justify-content:flex-start; gap:10px; margin-top:0; }
  .file-print-option:first-of-type input { margin:0; }
  .file-print-option .sides-toggle { display:flex; width:100%; max-width:100%; margin-top:8px; }
  .sides-toggle label { flex:1 1 0; min-width:0; }
  .sides-toggle label span { display:flex; width:100%; min-height:38px; height:38px; padding:0 4px; align-items:center; justify-content:center; white-space:nowrap; font-size:clamp(9px, 3vw, 11px); letter-spacing:-.1px; }
  .addon-line-head { display:block; }
  .addon-line-price { display:block; max-width:100%; margin:6px 0 0; text-align:left; white-space:normal; overflow-wrap:anywhere; font-size:12px; }
  .addon-inline-row { grid-template-columns:20px minmax(0,1fr); }
  .addon-inline-row .addon-inline-text { display:block; grid-column:2; grid-row:1; }
  .addon-inline-row .addon-line-head { display:block; }
  .addon-inline-row .hole-punch-toggle { position:static; display:flex; width:100%; margin:7px 0 0; }
  .addon-inline-row .hole-punch-choice { flex:1 1 0; min-width:0; }
  .addon-inline-row .addon-line-price { display:block; width:100%; max-width:100%; margin:6px 0 0 !important; text-align:left !important; justify-self:start; white-space:normal; overflow-wrap:anywhere; }
  .addon-inline-row .addon-note { display:block; margin-top:6px; }
  .addons-dropdown-body { padding:0 10px 10px; }
  .addon-checklist { gap:5px; }
  .addon-checkbox { font-size:13px; }
  .addon-note { font-size:11px; line-height:1.35; }
}