/* SugarCube Gemini Watermark Remover page styles */

.wm-hidden {
  display: none;
}

.wm-upload-area {
  background: var(--sc-color-canvas, #f8faf9);
  border: 2px dashed var(--sc-color-brand-500, #10b981);
  border-radius: var(--sc-radius-md, 0.75rem);
}

.wm-step-item {
  background: var(--sc-color-surface, #ffffff);
  border: 1px solid var(--sc-color-border, #dbe7e1);
}

.wm-checker-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='10' height='10' fill='%23f9fdfd'/%3E%3Crect x='10' y='10' width='10' height='10' fill='%23f2f2f2'/%3E%3C/svg%3E");
}

.wm-comparison-container {
  max-height: 60vh;
}

.wm-overlay-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.wm-slider-handle {
  left: 50%;
}

.step-arrow::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #dbe7e1;
  z-index: 10;
}

@media (min-width: 768px) {
  .step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -24px;
    top: 0;
    bottom: 0;
    width: 24px;
    background-color: inherit;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    z-index: 20;
  }
  .step-item:not(:first-child) {
    clip-path: polygon(0% 0%, 200% 0%, 100% 100%, 0% 100%, 24px 50%);
  }
}

.medium-zoom-overlay,
.medium-zoom-image--opened {
  z-index: 999;
}
.medium-zoom-overlay {
  backdrop-filter: blur(4px);
}

.related-tool-link {
  min-height: 44px;
}

#uploadArea {
  min-height: 280px !important;
  transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s !important;
}
#uploadArea:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.18);
  border-color: #34d399 !important;
}
#uploadArea.drag-highlight,
#uploadArea.border-primary {
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.22);
}

.paste-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.625rem;
  padding: 0.3rem 0.7rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #047857;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.paste-hint kbd {
  background: rgba(16, 185, 129, 0.18);
  color: #065f46;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
}

@media (max-width: 768px) {
  #sliderHandle {
    width: 64px !important;
    margin-left: -32px !important;
  }
  #sliderHandle > div:last-child {
    width: 42px !important;
    height: 42px !important;
  }
}

@media (min-width: 768px) {
  #imageList {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  #imageList > * { margin: 0 !important; }
}
@media (min-width: 1280px) {
  #imageList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  #singlePreview .sticky { position: static !important; }
}

input, textarea { font-size: 16px; }

.faq-item .faq-answer { display: none; }
.faq-item.open { border-color: #10B981 !important; background: #f5fdf9 !important; }
.faq-item.open .faq-answer { display: block; animation: fadeIn 0.4s ease-out; }
.faq-item.open .faq-icon { transform: rotate(45deg); stroke: #ef4444; }
.faq-item.open .faq-icon-wrapper { border-color: #ef4444; }

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

#fileInput.hidden {
  opacity: 0 !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

[data-i18n].i18n-pending { visibility: hidden; }