/* ============================================================
   Custom Crop Image Tool — export.css
   • Step 1  "Select": the selection panel (instant previews, count,
             progress, Continue) that also stays when you come Back.
   • Step 3  "Export": compact Back, image count, polished final
             preview with pager, output settings, one Export button
             and its "ZIP or each image" options dialog.

   Uses the tool's own tokens (--xc-brand, --xc-ink, --xc-line…)
   and Inter (inherited). No new colors are introduced.
   ============================================================ */


/* ══════════════════════════════════════════
   1. STEP 1 — SELECTION PANEL
   ══════════════════════════════════════════ */
.xc-selected {
  max-width: 480px;
  margin: 8px auto 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--xc-line);
  border-radius: 20px;
  box-shadow: 0 2px 14px rgba(26,26,34,0.05);
}

.xc-selected[hidden] { display: none; }

.xc-selected__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.xc-selected__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--xc-ink);
}

.xc-selected__sub {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--xc-ink-soft);
}

.xc-selected .xc-linkbtn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 4px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--xc-brand-dark);
  cursor: pointer;
  touch-action: manipulation;
  flex: 0 0 auto;
}

.xc-selected .xc-linkbtn.is-armed { color: var(--xc-error); }
.xc-selected .xc-linkbtn:focus-visible { outline: 2px solid var(--xc-brand); outline-offset: 2px; border-radius: 6px; }

.xc-selected__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  max-height: 236px;
  overflow-y: auto;
  padding: 2px;
  overscroll-behavior: contain;
}

.xc-selected__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #eaeaf1;
  border: 1px solid var(--xc-line);
}

.xc-selected__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Still decoding: the picture is already visible, just dimmed with a small spinner on top. */
.xc-selected__tile.is-loading img { opacity: 0.55; }

.xc-selected__tile.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.7);
  border-top-color: var(--xc-brand);
  animation: xcSpin 0.7s linear infinite;
}

.xc-selected__remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(26,26,34,0.65);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

.xc-selected__remove svg { width: 12px; height: 12px; }

.xc-selected__progress { margin-top: 12px; }

.xc-selected__note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--xc-bg);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--xc-ink);
}

.xc-selected__note.is-warn {
  background: #fdf1ef;
  color: var(--xc-error);
}

.xc-selected__note[hidden] { display: none; }

.xc-selected__go {
  flex: none;
  width: 100%;
  margin-top: 14px;
  height: 50px;
  font-size: 15.5px;
}

/* Dropzone once pictures exist: a quieter "add more" that no longer competes with Continue. */
.xc-crop-dropzone.has-images { padding: 22px 24px 8px; margin-top: 4px; }

.xc-crop-dropzone.has-images .xc-crop-dropzone__button {
  height: 46px;
  padding: 0 24px;
  font-size: 14.5px;
  background: #fff;
  color: var(--xc-brand-dark);
  border-color: var(--xc-brand);
  box-shadow: none;
}

.xc-crop-dropzone.has-images .xc-crop-dropzone__icon { color: var(--xc-brand); }
.xc-crop-dropzone.has-images:hover .xc-crop-dropzone__button { background: var(--xc-brand-soft); color: var(--xc-brand-dark); box-shadow: none; }
.xc-crop-dropzone.has-images .xc-crop-dropzone__divider { margin-top: 16px; }
.xc-crop-dropzone.has-images .xc-crop-dropzone__trust { margin-top: 12px; }

/* 25 of 25 */
.xc-crop-dropzone.is-full { cursor: not-allowed; }
.xc-crop-dropzone.is-full .xc-crop-dropzone__button {
  background: var(--xc-bg);
  color: var(--xc-ink-soft);
  border-color: var(--xc-line);
  transform: none;
}
.xc-crop-dropzone.is-full .xc-crop-dropzone__icon { color: var(--xc-ink-soft); }
.xc-crop-dropzone.is-full:hover .xc-crop-dropzone__button { background: var(--xc-bg); color: var(--xc-ink-soft); transform: none; }

.xc-crop-thumbs__add.is-busy,
.xc-crop-thumbs__add:disabled { opacity: 0.55; cursor: not-allowed; }


/* ══════════════════════════════════════════
   2. STEP 3 — EXPORT
   ══════════════════════════════════════════ */
.xc-export {
  max-width: 520px;
  margin: 0 auto;
}

.xc-export__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

/* Compact, professional Back */
.xc-backbtn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 14px 0 8px;
  border-radius: 9999px;
  border: 1.5px solid var(--xc-line);
  background: #fff;
  color: var(--xc-ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.xc-backbtn svg { width: 18px; height: 18px; }
.xc-backbtn:active { background: var(--xc-bg); }
.xc-backbtn:focus-visible { outline: 2px solid var(--xc-brand); outline-offset: 2px; }
.xc-backbtn:disabled { opacity: 0.5; cursor: not-allowed; }

.xc-export__count {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 9999px;
  background: var(--xc-brand-soft);
  border: 1px solid rgba(66,181,164,0.3);
  color: var(--xc-brand-dark);
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Final preview card */
.xc-preview {
  margin: 0;
  background: #fff;
  border: 1px solid var(--xc-line);
  border-radius: 20px;
  box-shadow: 0 4px 22px rgba(26,26,34,0.06);
  overflow: hidden;
}

.xc-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--xc-line);
}

.xc-preview__name {
  margin: 0;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--xc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xc-pager {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.xc-pager[hidden] { display: none; }

.xc-pager__btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--xc-line);
  background: #fff;
  color: var(--xc-ink);
  cursor: pointer;
  touch-action: manipulation;
}

.xc-pager__btn svg { width: 18px; height: 18px; }
.xc-pager__btn:active:not(:disabled) { background: var(--xc-brand-soft); border-color: var(--xc-brand); }
.xc-pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.xc-pager__btn:focus-visible { outline: 2px solid var(--xc-brand); outline-offset: 2px; }

.xc-pager__count {
  min-width: 46px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--xc-ink-soft);
  font-variant-numeric: tabular-nums;
}

.xc-preview__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 24px 16px;
  background:
    radial-gradient(circle at 50% 40%, #ffffff 0%, #f3f3f9 70%, #ececf4 100%);
}

.xc-crop-preview__canvas {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(26,26,34,0.18), 0 0 0 1px rgba(26,26,34,0.06);
  background:
    linear-gradient(45deg, #e9e9ef 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(-45deg, #e9e9ef 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(45deg, transparent 75%, #e9e9ef 75%) 0 0/16px 16px,
    linear-gradient(-45deg, transparent 75%, #e9e9ef 75%) 0 0/16px 16px,
    #fafafd;
}

.xc-preview__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--xc-line);
}

.xc-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 9999px;
  background: var(--xc-bg);
  border: 1px solid var(--xc-line);
  color: var(--xc-ink-soft);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.xc-chip--main {
  background: var(--xc-brand-soft);
  border-color: rgba(66,181,164,0.3);
  color: var(--xc-brand-dark);
}

/* Output settings */
.xc-export__side { margin-top: 16px; }

.xc-export__settings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--xc-line);
  border-radius: 16px;
}

.xc-export__settings .xc-crop-controls__row { margin: 0; }

.xc-export__settings .xc-crop-controls__hint {
  display: block;
  margin: 3px 0 0;
  text-transform: none;
}

.xc-export .xc-crop-progress { margin: 16px 0 0; }

/* The one Export button */
.xc-export__cta {
  flex: none;
  width: 100%;
  height: 52px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
}

.xc-export__cta svg { width: 20px; height: 20px; }


/* ══════════════════════════════════════════
   3. EXPORT OPTIONS DIALOG  (ZIP or each image)
   ══════════════════════════════════════════ */
.xc-menu {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.xc-menu[hidden] { display: none; }

.xc-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26,26,34,0.5);
  animation: xcFade 0.2s ease both;
}

.xc-menu__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(26,26,34,0.2);
  animation: xcSlideUp 0.26s cubic-bezier(.2,.8,.2,1) both;
}

.xc-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-left: 4px;
}

.xc-menu__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--xc-ink);
}

.xc-menu__close {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--xc-ink-soft);
  cursor: pointer;
  touch-action: manipulation;
}

.xc-menu__close svg { width: 20px; height: 20px; }
.xc-menu__close:active { background: var(--xc-bg); }
.xc-menu__close:focus-visible { outline: 2px solid var(--xc-brand); outline-offset: 2px; }

.xc-menu__opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  text-align: left;
  border-radius: 16px;
  border: 1.5px solid var(--xc-line);
  background: #fff;
  color: var(--xc-ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.xc-menu__opt:first-of-type,
#xc-download-zip {
  border-color: var(--xc-brand);
  background: var(--xc-brand-soft);
}

.xc-menu__opt:active { transform: scale(0.99); }
.xc-menu__opt:focus-visible { outline: 2px solid var(--xc-brand); outline-offset: 2px; }
.xc-menu__opt:disabled { opacity: 0.55; cursor: not-allowed; }

.xc-menu__ico {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--xc-line);
  color: var(--xc-brand-dark);
}

.xc-menu__ico svg { width: 22px; height: 22px; }

.xc-menu__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.xc-menu__txt strong { font-size: 15px; font-weight: 800; }
.xc-menu__txt small { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--xc-ink-soft); }

.xc-menu__tag {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--xc-brand);
  color: #fff;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  vertical-align: 1px;
}

@keyframes xcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xcSlideUp { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }


/* ══════════════════════════════════════════
   4. LARGER SCREENS
   ══════════════════════════════════════════ */
@media (min-width: 600px) {
  .xc-export__settings { grid-template-columns: 1fr 1fr; align-items: start; }

  .xc-menu { align-items: center; padding: 24px; }
  .xc-menu__card { border-radius: 22px; padding-bottom: 18px; box-shadow: 0 24px 60px rgba(26,26,34,0.28); }
  .xc-menu__opt:hover { border-color: var(--xc-brand); background: var(--xc-brand-soft); }
}

/* Desktop: the preview on the left, settings + Export on the right — everything in one screen */
@media (min-width: 900px) {
  .xc-crop-wrap.is-exporting { max-width: 1040px; }

  .xc-export {
    max-width: 960px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 28px;
    align-items: start;
  }

  .xc-export__bar { grid-column: 1 / -1; }
  .xc-export__side { margin-top: 0; }
  .xc-export__settings { grid-template-columns: 1fr; }
  .xc-preview__stage { min-height: 360px; }
}

@media (min-width: 768px) {
  .xc-selected { max-width: 520px; padding: 20px; }
  .xc-backbtn:hover { border-color: var(--xc-ink); }
  .xc-pager__btn:hover:not(:disabled) { border-color: var(--xc-brand); }
  .xc-export__cta:hover { box-shadow: 0 6px 20px rgba(66,181,164,0.4); }
  .xc-preview__stage { min-height: 320px; padding: 32px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .xc-menu__backdrop,
  .xc-menu__card,
  .xc-selected__tile.is-loading::after { animation: none; }
}