/* Shared tool page parts (views/partials/tool-head, tool-foot, tool-cards) and
   the restyle that gives the hand-made PDF, image and video tools
   (body.cg-legacy) the look of the micro tools in micro.css. Uses the tokens
   from codegres-brand.css. */

/* Tool header and footer */
.cg-tool-head { margin-bottom: 22px; text-align: left; }
.cg-tool-title { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.cg-tool-title img { width: 64px; height: 64px; border-radius: 16px; flex: none; box-shadow: 0 10px 24px rgba(15, 15, 53, .14); }
.cg-tool-title .mt-title { margin-bottom: 6px; }
.cg-tool-title .mt-lead { margin: 0; }
.cg-tool-foot { margin-top: 40px; }
.cg-tool-foot .mt-related .cgs-group-block { margin-bottom: 14px; }
.cgs-group-title { font-size: 1.35rem !important; font-weight: 700; margin: 0 0 16px; color: var(--cg-navy); }
.cgs-group-block[hidden], .cgs-directory li[hidden] { display: none; }

@media (max-width: 575px) {
  .cg-tool-title { align-items: flex-start; gap: 14px; }
  .cg-tool-title img { width: 52px; height: 52px; border-radius: 14px; }
}

/* Hand-made tools */
body.cg-legacy { background: var(--cg-light); color: var(--cg-text); }
.cg-legacy .main-container, .cg-legacy .cg-tool-foot {
  width: auto !important; max-width: 1140px; margin-left: auto !important; margin-right: auto !important;
  padding-left: 20px; padding-right: 20px;
}
.cg-legacy .main-container { padding-top: 28px; }
.cg-legacy .cg-tool-foot { padding-bottom: 64px; }

/* The tool itself sits in one white panel, like .mt-panel */
.cg-legacy .main-container > .row,
.cg-legacy .main-container > .preview-container,
.cg-legacy .preview-container.main-container {
  margin: 0 0 18px !important; padding: 24px; background: #fff; border: 1px solid var(--cg-border);
  border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 15, 53, .05);
}
.cg-legacy .main-container > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
.cg-legacy .main-container .mt-5 { margin-top: 1.25rem !important; }
.cg-legacy .main-container > br { display: none; }

/* Headings left over inside a tool (e.g. the image watermark half of Watermark PDF) */
.cg-legacy .heading-main { text-align: left !important; color: var(--cg-navy); padding-top: 0 !important; }
.cg-legacy h2.heading-main { font-size: 1.35rem; margin-top: 28px !important; }
.cg-legacy h5.heading-main { font-size: 1rem; font-weight: 500 !important; color: var(--cg-muted); }

/* File pickers become drop zones (the ID selector beats codegres-brand.css) */
.cg-legacy .custom-file-upload, .cg-legacy #pdf-dropzone.custom-file-upload {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100% !important; max-width: none !important; min-height: 220px; margin: 0 auto !important; padding: 32px 16px !important;
  border: 2px dashed #cfd4e2 !important; border-radius: 14px !important; background: #fbfbfd !important;
  color: var(--cg-navy) !important; box-shadow: none !important; transition: border-color .15s ease, background .15s ease;
}
.cg-legacy .custom-file-upload:hover, .cg-legacy .custom-file-upload:focus-within,
.cg-legacy #pdf-dropzone.custom-file-upload:hover, .cg-legacy #pdf-dropzone.custom-file-upload:focus-within { border-color: var(--cg-primary) !important; background: rgba(113, 20, 239, .03) !important; }
.cg-legacy .custom-file-upload img { width: 56px; height: 56px; opacity: .85; }
.cg-legacy .custom-file-upload label, .cg-legacy #pdf-dropzone.custom-file-upload label { font-weight: 700; font-size: 1.05rem; color: var(--cg-navy) !important; margin: 0; cursor: pointer; }
/* Old pages stretch the label over the zone with a dashed ::before: keep the click area, drop the border */
.cg-legacy .custom-file-upload label::before { border: 0 !important; }
.cg-legacy .custom-file-upload input[type=file] { max-width: 320px; margin: 0 auto; font-size: 14px; color: var(--cg-muted); }

/* Buttons */
.cg-legacy .common-btn, .cg-legacy input[type=submit], .cg-legacy #download-btn,
.cg-legacy .main-container button:not(.navbar-toggler), .cg-legacy .main-container .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px !important; border: 0 !important; border-radius: 50px !important;
  background: var(--cg-gradient-accent) !important; background-size: 200% 100% !important; color: #fff !important;
  font: 600 16px/1.3 Roboto, system-ui, sans-serif !important; text-decoration: none !important; cursor: pointer;
  box-shadow: 0 10px 24px rgba(240, 97, 0, .25) !important; transition: transform .15s ease, background-position .3s ease;
}
.cg-legacy .common-btn:hover, .cg-legacy input[type=submit]:hover, .cg-legacy #download-btn:hover,
.cg-legacy .main-container button:not(.navbar-toggler):hover, .cg-legacy .main-container .btn:hover { transform: translateY(-2px); background-position: 100% 0 !important; }
.cg-legacy .common-btn[disabled], .cg-legacy input[type=submit][disabled] { opacity: .6; transform: none; cursor: progress; }

/* Form fields, like .mt-field */
.cg-legacy .main-container label { font-size: 14px; font-weight: 600; color: var(--cg-navy); }
.cg-legacy .main-container select,
.cg-legacy .main-container input[type=text],
.cg-legacy .main-container input[type=number],
.cg-legacy .main-container input[type=time],
.cg-legacy .main-container textarea {
  border: 1px solid var(--cg-border) !important; border-radius: 10px !important; padding: 8px 12px !important;
  font-size: 15px !important; background: #fff !important; color: var(--cg-text) !important; min-height: 40px; max-width: 100%;
}
.cg-legacy .main-container select:focus, .cg-legacy .main-container input:focus, .cg-legacy .main-container textarea:focus {
  outline: 2px solid rgba(113, 20, 239, .35); border-color: var(--cg-primary) !important;
}
.cg-legacy .main-container input[type=checkbox], .cg-legacy .main-container input[type=radio] { accent-color: var(--cg-primary); width: 18px; height: 18px; vertical-align: middle; }
.cg-legacy .main-container input[type=range] { accent-color: var(--cg-primary); }
.cg-legacy .main-container input[type=color] { width: 56px; height: 36px; border: 1px solid var(--cg-border); border-radius: 8px; padding: 2px; background: #fff; }

/* Results and previews */
.cg-legacy .list-group-item { border-color: var(--cg-border); }
.cg-legacy .list-group-item:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.cg-legacy .list-group-item:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.cg-legacy .main-container canvas, .cg-legacy .main-container video, .cg-legacy .main-container img.preview { border-radius: 12px; }
.cg-legacy .canvas-wrapper, .cg-legacy .toolbox { border: 1px solid var(--cg-border); border-radius: 14px !important; box-shadow: none !important; }

/* PDF to PNG / JPG / TIFF use a label as their file picker */
.cg-legacy #file-input-label {
  display: flex; align-items: center; justify-content: center; width: 100%; height: auto; min-height: 220px; line-height: 1.4;
  border: 2px dashed #cfd4e2; border-radius: 14px; background: #fbfbfd; color: var(--cg-navy); font-weight: 700; font-size: 1.05rem;
  transition: border-color .15s ease, background .15s ease;
}
.cg-legacy #file-input-label::before { display: none; }
.cg-legacy #file-input-label:hover { border-color: var(--cg-primary); background: rgba(113, 20, 239, .03); }
.cg-legacy #pdf-main-container { max-width: 100%; }

/* Video tools (views/video/tool.ejs, public/js/serverless/video-ui.js) */
.cv-tool [hidden] { display: none !important; }
.cv-input.is-over { border-color: var(--cg-primary); box-shadow: 0 0 0 3px rgba(113, 20, 239, .15); }
.cv-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 260px;
  margin: 0; padding: 32px 16px; border: 2px dashed #cfd4e2; border-radius: 12px; background: #fbfbfd;
  color: var(--cg-navy); text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.cv-drop:hover, .cv-drop:focus-within, .cv-input.is-over .cv-drop { border-color: var(--cg-primary); background: rgba(113, 20, 239, .03); }
.cv-drop svg { fill: none; stroke: var(--cg-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.cv-drop strong { font-size: 1.1rem; }
.cv-drop span { color: var(--cg-muted); font-size: 14px; }
.cv-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.cv-stage { position: relative; overflow: hidden; border-radius: 12px; background: #0f0f1a; }
.cv-stage video { display: block; width: 100%; max-height: 480px; background: #0f0f1a; }
.cv-nopreview { margin: 0; padding: 70px 16px; text-align: center; color: #d6d8e4; }
.cv-crop { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(10, 10, 25, .55); pointer-events: none; }
.cv-crop span {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); pointer-events: auto; cursor: ns-resize; touch-action: none;
}
.cv-crop span::before, .cv-crop span::after { content: ""; position: absolute; left: 50%; top: 50%; border: 6px solid transparent; }
.cv-crop span::before { border-bottom-color: var(--cg-navy); margin: -17px 0 0 -6px; }
.cv-crop span::after { border-top-color: var(--cg-navy); margin: 5px 0 0 -6px; }
.cv-crop.is-x span { cursor: ew-resize; transform: rotate(90deg); }
.cv-crop.is-fixed span { display: none; }

.cv-list { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: cv; }
.cv-list li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cg-border); border-radius: 10px;
  margin-bottom: 6px; background: #fff; counter-increment: cv;
}
.cv-list li.is-current { border-color: var(--cg-primary); background: rgba(113, 20, 239, .04); }
.cv-list .cv-name {
  flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 0; color: var(--cg-navy); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.cv-list .cv-name::before { content: counter(cv) ". "; color: var(--cg-muted); }
.cv-list .cv-size { color: var(--cg-muted); font-size: 13px; white-space: nowrap; }
.cv-btns { display: flex; gap: 4px; }
.cv-btns button, .cv-mini {
  border: 1px solid var(--cg-border); background: #fff; color: var(--cg-navy); border-radius: 8px;
  padding: 4px 10px; font-size: 13px; line-height: 1.4; cursor: pointer;
}
.cv-btns button:hover, .cv-mini:hover { border-color: var(--cg-primary); color: var(--cg-primary); }

.cv-wide { grid-column: 1 / -1; }
.cv-hint { margin: 10px 0 0; font-size: 13px; color: var(--cg-muted); }
.cv-file2 { font-size: 14px; }

.cv-track { position: relative; height: 40px; margin: 6px 11px 10px; border-radius: 8px; background: #eceef5; cursor: pointer; touch-action: none; }
.cv-sel { position: absolute; top: 0; bottom: 0; background: rgba(113, 20, 239, .22); border-top: 3px solid var(--cg-primary); border-bottom: 3px solid var(--cg-primary); }
.cv-head { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--cg-accent-dark); pointer-events: none; }
.cv-handle {
  position: absolute; top: -3px; bottom: -3px; width: 22px; margin-left: -11px; padding: 0; border: 0; border-radius: 6px;
  background: var(--cg-primary); cursor: ew-resize; box-shadow: 0 2px 8px rgba(113, 20, 239, .35);
}
.cv-handle::after { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 4px; border-left: 1.5px solid #fff; border-right: 1.5px solid #fff; }
.cv-trim.is-off .cv-track { opacity: .45; cursor: default; }
.cv-trim-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.cv-time { display: flex; flex-direction: column; gap: 4px; }
.cv-time input { width: 130px; border: 1px solid var(--cg-border); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.cv-trim-row .cv-mini { height: 38px; }
.cv-len { margin-left: auto; align-self: center; font-size: 14px; font-weight: 600; color: var(--cg-navy); }
.cv-len.is-bad { color: #b42318; }

.cv-run { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 22px 0; }
.cv-go, .cv-download {
  display: inline-flex; align-items: center; justify-content: center; padding: 13px 34px; border: 0; border-radius: 50px;
  background: var(--cg-gradient-accent); background-size: 200% 100%; color: #fff !important; font: 600 16px/1.3 var(--cg-font);
  text-decoration: none !important; cursor: pointer; box-shadow: 0 10px 24px rgba(240, 97, 0, .25); transition: transform .15s ease, background-position .3s ease;
}
.cv-go:hover, .cv-download:hover { transform: translateY(-2px); background-position: 100% 0; }
.cv-go[disabled] { opacity: .6; transform: none; cursor: progress; }
.cv-cancel { border: 1px solid var(--cg-border); background: #fff; color: var(--cg-navy); border-radius: 50px; padding: 11px 24px; font-weight: 600; cursor: pointer; }
.cv-cancel:hover { border-color: #b42318; color: #b42318; }
.cv-progress { flex: 1 1 200px; max-width: 360px; height: 8px; border-radius: 8px; background: #e6e8f0; overflow: hidden; }
.cv-progress span { display: block; width: 0; height: 100%; background: var(--cg-gradient); transition: width .3s ease; }
.cv-run .serverless-status { flex-basis: 100%; margin: 0; font-weight: 600; color: var(--cg-navy); }
.cv-run .serverless-status:empty { display: none; }

.cv-result { margin-bottom: 30px; }
.cv-out { display: flex; justify-content: center; border-radius: 12px; background: #0f0f1a; overflow: hidden; margin-bottom: 12px; }
.cv-out video, .cv-out img { display: block; max-width: 100%; max-height: 480px; }
.cv-out audio { width: 100%; margin: 24px; }
.cv-out-info { margin: 0 0 14px; color: var(--cg-muted); font-size: 14px; word-break: break-word; }
.cv-out-info strong { color: var(--cg-navy); }

@media (max-width: 575px) {
  .cv-drop { min-height: 200px; }
  .cv-time input { width: 110px; }
  .cv-len { margin-left: 0; flex-basis: 100%; }
  .cv-go { width: 100%; }
}