/* ============================================================
   ImagePress WordPress Plugin — imagepress.css
   All selectors are scoped under .imagepress-wrap to avoid
   conflicts with the active WordPress theme.
   ============================================================ */

.imagepress-wrap {
  --ip-bg:             #F5F4F0;
  --ip-surface:        #FFFFFF;
  --ip-surface-2:      #F0EEE9;
  --ip-border:         #E2DED6;
  --ip-border-strong:  #C8C3B8;
  --ip-text:           #1A1916;
  --ip-text-2:         #6B6760;
  --ip-text-muted:     #9E9A94;
  --ip-accent:         #2D5BE3;
  --ip-accent-light:   #EEF2FD;
  --ip-accent-hover:   #1E47CC;
  --ip-green:          #1A7A4A;
  --ip-green-light:    #E8F5EE;
  --ip-red:            #C0392B;
  --ip-red-light:      #FDF0EE;
  --ip-shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --ip-shadow-md:      0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --ip-r:              8px;
  --ip-r-lg:           14px;

  font-family: 'DM Sans', sans-serif;
  color: var(--ip-text);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  width: 100%;
}

.imagepress-wrap *, .imagepress-wrap *::before, .imagepress-wrap *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

/* ── DROP ZONE ── */
.imagepress-wrap .ip-dropzone {
  border: 2px dashed var(--ip-border-strong);
  border-radius: var(--ip-r-lg);
  background: var(--ip-surface);
  padding: 52px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.imagepress-wrap .ip-dropzone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(45,91,227,.04) 0%, transparent 70%);
  pointer-events: none;
}

.imagepress-wrap .ip-dropzone:hover,
.imagepress-wrap .ip-dropzone.ip-dragover {
  border-color: var(--ip-accent);
  background: var(--ip-accent-light);
}

.imagepress-wrap .ip-dropzone.ip-dragover { transform: scale(1.004); }

.imagepress-wrap .ip-drop-icon {
  width: 52px;
  height: 52px;
  background: var(--ip-accent-light);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ip-accent);
  transition: transform 0.2s;
}

.imagepress-wrap .ip-dropzone:hover .ip-drop-icon { transform: translateY(-3px); }

.imagepress-wrap .ip-drop-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--ip-text) !important;
  letter-spacing: -0.2px;
  line-height: 1.3 !important;
}

.imagepress-wrap .ip-drop-subtitle {
  font-size: 14px !important;
  color: var(--ip-text-2) !important;
  line-height: 1.4 !important;
}

.imagepress-wrap .ip-drop-hint {
  font-size: 12px !important;
  color: var(--ip-text-muted) !important;
  font-family: 'DM Mono', monospace !important;
}

.imagepress-wrap #ip-fileInput { display: none; }

/* ── CONTROLS BAR ── */
.imagepress-wrap .ip-controls-bar {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-r-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 14px;
  box-shadow: var(--ip-shadow-sm);
  flex-wrap: wrap;
}

.imagepress-wrap .ip-control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 150px;
}

.imagepress-wrap .ip-control-narrow { max-width: 160px; }

.imagepress-wrap .ip-control-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ip-text-2) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1 !important;
}

.imagepress-wrap .ip-hint-text {
  font-size: 11px !important;
  color: var(--ip-text-muted) !important;
  line-height: 1 !important;
}

.imagepress-wrap .ip-quality-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.imagepress-wrap .ip-quality-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--ip-border);
  outline: none;
  cursor: pointer;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.imagepress-wrap .ip-quality-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ip-accent);
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 0 0 1px var(--ip-accent);
  transition: transform 0.15s;
}

.imagepress-wrap .ip-quality-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

.imagepress-wrap .ip-quality-value {
  font-family: 'DM Mono', monospace;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ip-accent) !important;
  min-width: 36px;
  text-align: right;
}

.imagepress-wrap .ip-select {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px !important;
  color: var(--ip-text) !important;
  background: var(--ip-surface-2) !important;
  border: 1px solid var(--ip-border) !important;
  border-radius: var(--ip-r) !important;
  padding: 8px 12px !important;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  width: 100%;
  box-shadow: none !important;
}

.imagepress-wrap .ip-select:focus { border-color: var(--ip-accent) !important; }

.imagepress-wrap .ip-divider-v {
  width: 1px;
  height: 40px;
  background: var(--ip-border);
  flex-shrink: 0;
}

/* ── BUTTONS ── */
.imagepress-wrap .ip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: var(--ip-r);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none !important;
  line-height: 1 !important;
}

.imagepress-wrap .ip-btn-primary {
  background: var(--ip-accent) !important;
  color: #fff !important;
  padding: 10px 20px;
  border: none !important;
  box-shadow: 0 2px 6px rgba(45,91,227,.3) !important;
}

.imagepress-wrap .ip-btn-primary:hover {
  background: var(--ip-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(45,91,227,.35) !important;
}

.imagepress-wrap .ip-btn-primary:disabled {
  background: var(--ip-border-strong) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none;
}

.imagepress-wrap .ip-btn-ghost {
  background: transparent !important;
  color: var(--ip-text-2) !important;
  padding: 8px 14px;
  border: 1px solid var(--ip-border) !important;
  font-size: 13px !important;
}

.imagepress-wrap .ip-btn-ghost:hover {
  background: var(--ip-surface-2) !important;
  color: var(--ip-text) !important;
  border-color: var(--ip-border-strong) !important;
}

.imagepress-wrap .ip-btn-danger {
  background: var(--ip-red-light) !important;
  color: var(--ip-red) !important;
  padding: 8px 14px;
  border: 1px solid #F5C6C1 !important;
  font-size: 13px !important;
}

.imagepress-wrap .ip-btn-danger:hover { background: #FAE0DC !important; }

.imagepress-wrap .ip-ml-auto { margin-left: auto; }

/* ── STATUS ── */
.imagepress-wrap .ip-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--ip-r);
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-top: 14px;
  animation: ip-fadeIn 0.2s ease;
}

@keyframes ip-fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.imagepress-wrap .ip-status-processing {
  background: var(--ip-accent-light);
  color: var(--ip-accent) !important;
  border: 1px solid rgba(45,91,227,.15);
}

.imagepress-wrap .ip-status-done {
  background: var(--ip-green-light);
  color: var(--ip-green) !important;
  border: 1px solid rgba(26,122,74,.15);
}

/* ── SPINNER ── */
.imagepress-wrap .ip-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(45,91,227,.2);
  border-top-color: var(--ip-accent);
  border-radius: 50%;
  animation: ip-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes ip-spin { to { transform: rotate(360deg); } }

/* ── PROGRESS ── */
.imagepress-wrap #ip-progressWrap { margin-top: 14px; }

.imagepress-wrap .ip-progress-track {
  height: 3px;
  background: var(--ip-border);
  border-radius: 2px;
  overflow: hidden;
}

.imagepress-wrap .ip-progress-bar {
  height: 100%;
  background: var(--ip-accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ── SECTION HEADER ── */
.imagepress-wrap #ip-imageSection { margin-top: 28px; }

.imagepress-wrap .ip-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.imagepress-wrap .ip-section-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ip-text) !important;
}

.imagepress-wrap .ip-section-count {
  font-size: 13px !important;
  color: var(--ip-text-muted) !important;
  font-family: 'DM Mono', monospace;
  margin-left: 8px;
}

.imagepress-wrap .ip-section-actions { display: flex; gap: 8px; }

/* ── IMAGE GRID (list rows) ── */
.imagepress-wrap .ip-image-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── IMAGE CARD ── */
.imagepress-wrap .ip-image-card {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-r);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--ip-shadow-sm);
  animation: ip-cardIn 0.2s ease both;
  position: relative;
  overflow: hidden;
}

@keyframes ip-cardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.imagepress-wrap .ip-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--ip-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ip-accent);
  flex-shrink: 0;
}

.imagepress-wrap .ip-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.imagepress-wrap .ip-card-filename {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ip-text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'DM Mono', monospace;
  flex: 1;
  min-width: 100px;
  max-width: 240px;
}

.imagepress-wrap .ip-card-stats {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-shrink: 0;
}

.imagepress-wrap .ip-stat-box { display: flex; flex-direction: column; gap: 2px; }

.imagepress-wrap .ip-stat-label {
  font-size: 10px !important;
  color: var(--ip-text-muted) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1 !important;
}

.imagepress-wrap .ip-stat-value {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'DM Mono', monospace;
  color: var(--ip-text) !important;
  line-height: 1.3 !important;
}

.imagepress-wrap .ip-stat-value.ip-saving { color: var(--ip-green) !important; }

.imagepress-wrap .ip-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 9px;
  border-radius: 20px;
  font-family: 'DM Mono', monospace;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.4 !important;
}

.imagepress-wrap .ip-badge-saved   { background: var(--ip-green-light); color: var(--ip-green) !important; }
.imagepress-wrap .ip-badge-same    { background: #FFF8E6; color: #9A7D0A !important; }
.imagepress-wrap .ip-badge-error   { background: var(--ip-red-light); color: var(--ip-red) !important; }
.imagepress-wrap .ip-badge-waiting { background: var(--ip-surface-2); color: var(--ip-text-muted) !important; }

.imagepress-wrap .ip-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

.imagepress-wrap .ip-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: 'DM Sans', sans-serif;
  background: var(--ip-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ip-r);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(45,91,227,.25) !important;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none !important;
}

.imagepress-wrap .ip-btn-download:hover { background: var(--ip-accent-hover) !important; }

.imagepress-wrap .ip-btn-remove {
  padding: 7px;
  background: transparent !important;
  color: var(--ip-text-muted) !important;
  border: 1px solid var(--ip-border) !important;
  border-radius: var(--ip-r);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.imagepress-wrap .ip-btn-remove:hover {
  background: var(--ip-red-light) !important;
  color: var(--ip-red) !important;
  border-color: #F5C6C1 !important;
}

/* Processing shimmer */
.imagepress-wrap .ip-card-processing::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ip-accent), #7B9EFF, var(--ip-accent));
  background-size: 200% 100%;
  animation: ip-shimmer 1.2s infinite;
}

@keyframes ip-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── SUMMARY CARD ── */
.imagepress-wrap .ip-summary-card {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-r-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  box-shadow: var(--ip-shadow-sm);
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 22px;
}

.imagepress-wrap .ip-summary-stat { display: flex; flex-direction: column; gap: 3px; }

.imagepress-wrap .ip-summary-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ip-text-muted) !important;
  line-height: 1 !important;
}

.imagepress-wrap .ip-summary-value {
  font-size: 20px !important;
  font-weight: 600 !important;
  font-family: 'DM Mono', monospace;
  color: var(--ip-text) !important;
  letter-spacing: -0.4px;
  line-height: 1.2 !important;
}

.imagepress-wrap .ip-summary-value.ip-green { color: var(--ip-green) !important; }

.imagepress-wrap .ip-summary-divider {
  width: 1px;
  height: 34px;
  background: var(--ip-border);
  flex-shrink: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .imagepress-wrap .ip-controls-bar { gap: 14px; flex-direction: column; align-items: stretch; }
  .imagepress-wrap .ip-control-narrow { max-width: 100%; }
  .imagepress-wrap .ip-divider-v { display: none; }
  .imagepress-wrap .ip-card-stats { gap: 12px; }
  .imagepress-wrap .ip-summary-card { flex-direction: column; align-items: flex-start; }
  .imagepress-wrap .ip-ml-auto { margin-left: 0; }
}