/* Frontend styles for the Drawing Enhancer */
/* General wrapper styling */
.sse-de-wrapper {
  max-width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-family: inherit;
}


/* Row flex container */
.sse-de-row {
  display: flex;
  flex-wrap: wrap;
}

/* Column base styles */
.sse-de-col {
  padding: 0.5rem;
  box-sizing: border-box;
}

/* Left column takes roughly 30% width, previews share remaining equally */
.sse-de-col-left {
  /* allocate less width to controls so previews can enlarge */
  flex: 0 0 25%;
  min-width: 250px;
}
.sse-de-col-preview {
  flex: 1;
  min-width: 280px;
}

/* Section containers */
.sse-de-section {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background-color: #f9f9f9;
}

/* Section titles */
.sse-de-section-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

/* Image selection drop zone */
/* The drop zone acts as a single clickable area with centered text.  A
   minimum height is provided to ensure readability when no image is
   selected. */
.sse-de-drop-zone {
  border: 2px dashed #aaa;
  border-radius: 4px;
  padding: 1rem;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #666;
  background-color: #fff;
  cursor: pointer;
  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.sse-de-drop-zone p {
  margin: 0.1rem 0;
  line-height: 1.2;
}
.sse-de-drop-zone.dragover {
  background-color: #eef6ff;
  border-color: #66a0ff;
}

/* Parameter grid: two columns */
.sse-de-params-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}
.sse-de-field label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.85rem;
}
.sse-de-field input[type="number"] {
  width: 100%;
  padding: 0.2rem 0.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 2rem;
  box-sizing: border-box;
}

/* Buttons container */
.sse-de-buttons {
  margin-top: 0.8rem;
  display: flex;
  gap: 0.5rem;
}

/* Preview titles */
.sse-de-preview-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

/* Preview frame styling.  Without an uploaded image the frame remains
   compact; once an image is present (.has-image) it expands using a
   portrait or landscape aspect ratio determined by classes on the wrapper. */
.sse-de-preview-frame {
  width: 100%;
  position: relative;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  /* Use a pure white background for preview frames to enhance contrast */
  background-color: #ffffff;
  overflow: hidden;
}
/* Before an image is uploaded, the previews occupy a small height. */
.sse-de-wrapper:not(.has-image) .sse-de-preview-frame {
  height: 100px;
}
/* After an image has been uploaded, expand using aspect ratio classes on the wrapper. */
.sse-de-wrapper.portrait.has-image .sse-de-preview-frame {
  aspect-ratio: 3 / 4;
  height: auto;
}
.sse-de-wrapper.landscape.has-image .sse-de-preview-frame {
  aspect-ratio: 4 / 3;
  height: auto;
}
/* Preview images always fill the frame.  Visibility is toggled via JS
   using show()/hide(), so we do not set display here. */
.sse-de-preview-frame img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Hide preview images until a source is set.  jQuery will show() them
     after a valid src is assigned, preventing broken image icons. */
  display: none;
}

/* Downloads section links */
/* Downloads section links.  These anchors are styled to match WordPress
   buttons (both primary and secondary) so they visually integrate
   with the Image Transform and Reset buttons.  We explicitly define
   colours and borders here because themes often override anchor styles. */
.sse-de-downloads .button {
  display: inline-block;
  margin-right: 0.5rem;
  margin-top: 0.3rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  /* default (secondary) button colours */
  background-color: #f6f7f7;
  color: #2271b1;
  transition: background-color 0.1s ease-in-out;
}

/* Hover state for secondary download buttons */
.sse-de-downloads .button:not(.button-primary):hover {
  background-color: #e9eaec;
  color: #135e96;
}

/* Primary download button (for transparent background) */
.sse-de-downloads .button.button-primary {
  background-color: #007cba;
  border-color: #007cba;
  color: #ffffff;
}

/* Hover state for primary download button */
.sse-de-downloads .button.button-primary:hover {
  background-color: #00669a;
  border-color: #00669a;
  color: #ffffff;
}

/* Disabled state for download buttons */
.sse-de-downloads .button.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}


.sse-de-preset-controls {
  margin-top: 1rem;
}

.sse-de-preset-controls label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.sse-de-select {
  width: 100%;
  margin-bottom: 0.8rem;
}

.sse-de-param {
  margin-bottom: 0.6rem;
}

.sse-de-param label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
}

.sse-de-param input[type="range"] {
  width: 100%;
}

.sse-de-buttons {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}

.sse-de-preview {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.sse-de-preview-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  z-index: 2;
}


.sse-de-row.downloads .button {
  margin-right: 0.5rem;
}