/* TTB Image Resizer (v1.1.0) */
.ttb-tool{
  max-width: 980px;
  margin: 24px auto;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  color:#111827;
}
.ttb-header h2{margin:0 0 6px 0;font-size:1.5rem;font-weight:800}
.ttb-sub{margin:0 0 16px 0;color:#6b7280}
.ttb-card{border:1px solid #e5e7eb;border-radius:14px;padding:16px;background:#fafafa}
.ttb-label{font-weight:700;margin-right:8px}
.ttb-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0}
.ttb-checkbox{display:flex;align-items:center;gap:8px;font-weight:600}
.ttb-btn{appearance:none;border:1px solid #3b82f6;background:#3b82f6;color:#fff;padding:10px 14px;border-radius:999px;font-weight:700;cursor:pointer;transition:transform .05s ease,filter .15s ease,box-shadow .15s ease;box-shadow:0 6px 18px rgba(59,130,246,.25)}
.ttb-btn:hover{filter:brightness(1.05)} .ttb-btn:active{transform:translateY(1px)}
.ttb-btn.ghost{background:transparent;color:#374151;border-color:#d1d5db;box-shadow:none}
.ttb-error{margin-top:8px;padding:8px 12px;border:1px solid #fecaca;background:#fef2f2;color:#991b1b;border-radius:10px;font-size:.95rem}

.ttb-ir-grid{display:flex;flex-direction:column;gap:16px}

.ttb-ir-stage{max-width:100%;overflow:hidden}

.ir-box::after{
  content:"";
  position:absolute;inset:0;
  border:1px solid rgba(17,24,39,.6); /* darker connecting line */
  pointer-events:none;
}

.ir-handle{position:absolute;width:12px;height:12px;background:#111827;border-radius:2px;outline:1px solid #fff}
.ir-h-nw{top:-6px;left:-6px;cursor:nwse-resize}
.ir-h-n {top:-6px;left:50%;transform:translateX(-50%);cursor:ns-resize}
.ir-h-ne{top:-6px;right:-6px;cursor:nesw-resize}
.ir-h-e {top:50%;right:-6px;transform:translateY(-50%);cursor:ew-resize}
.ir-h-se{bottom:-6px;right:-6px;cursor:nwse-resize}
.ir-h-s {bottom:-6px;left:50%;transform:translateX(-50%);cursor:ns-resize}
.ir-h-sw{bottom:-6px;left:-6px;cursor:nesw-resize}
.ir-h-w {top:50%;left:-6px;transform:translateY(-50%);cursor:ew-resize}

.ir-info{font-size:.92rem;color:#374151}

/* Limit the pixel inputs */
#ir-width,
#ir-height {
  max-width: 140px;
  width: 100%;
}

/* Stage: allow both-axis scrolling when content is larger */
.ir-stage-inner {
  max-width: 100%;
  overflow: auto;      /* scroll X & Y if needed */
  padding: 8px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

/* Viewport is sized by the logical image size; no scaling */
.ir-viewport {
  position: relative;
  width: max-content;
  height: max-content;
  /* remove any transform / transform-origin if present */
  transform: none !important;
  transform-origin: unset !important;
}

/* Ensure the preview image sits flush inside the box */
#ir-img {
  display: block;
  max-width: none !important;
  height: auto;
}

/* The draggable frame */
.ir-box {
  position: relative;
  display: inline-block;
  border: 2px solid #1f2937;   
  box-shadow: none;           
  line-height: 0;             
  box-sizing: content-box;
}

/* Styled file input wrapper */
#ir-file {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 14px 16px;
  border: 2px dashed #9ca3af; /* light gray dotted border */
  border-radius: 10px;
  background-color: #f9fafb;
  color: #374151;
  font-size: 0.95rem;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;          /* hide overflow text */
  white-space: nowrap;       /* keep on one line */
}

/* Change border color on hover/focus */
#ir-file:hover,
#ir-file:focus {
  border-color: #3b82f6;     /* blue */
  background-color: #f3f4f6; /* slightly darker bg */
  outline: none;
}

/* Optional: make the file input text style more consistent */
#ir-file::file-selector-button {
  background: #3b82f6;
  border: none;
  color: white;
  font-weight: 600;
  padding: 8px 12px;
  margin-right: 12px;
  border-radius: 6px;
  cursor: pointer;
}
#ir-file::file-selector-button:hover {
  background: #2563eb;
}