/* ─── Souper Download — Stylesheet ───────────────────────────────────────────
   Soupindustries Plugin Ecosystem · v1.3.0
   Scope: button + counter only. Zero image/wrapper/overlay opinions.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --sd-orange:      #ff6b35;
  --sd-orange-dark: #e05520;
  --sd-transition:  0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --sd-btn-opacity: 0.80;
}

/* ══════════════════════════════════════════════════════════════════════════════
   WRAPPER + OVERLAY
   Minimal — just enough for the overlay to sit over the image.
   The host plugin/theme is fully responsible for the image dimensions.
   ══════════════════════════════════════════════════════════════════════════════ */

.souper-download-wrap {
  position: relative;
  display:  inline-block; /* shrink-wraps to whatever the image already is */
}

.souper-download-media {
  position: relative;
  display:  block;
}

.souper-download-overlay {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  padding:         10px;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity var(--sd-transition);
}

.souper-download-media:hover .souper-download-overlay,
.souper-download-media:focus-within .souper-download-overlay {
  opacity:        1;
  pointer-events: auto;
}

/* Position variants */
.sd-pos-bottom-left   .souper-download-overlay { align-items: flex-end; justify-content: flex-start; }
.sd-pos-bottom-center .souper-download-overlay { align-items: flex-end; justify-content: center;     }
.sd-pos-bottom-right  .souper-download-overlay { align-items: flex-end; justify-content: flex-end;   }
.sd-pos-center-left   .souper-download-overlay { align-items: center;   justify-content: flex-start; }
.sd-pos-center-center .souper-download-overlay { align-items: center;   justify-content: center;     }
.sd-pos-center-right  .souper-download-overlay { align-items: center;   justify-content: flex-end;   }
/* Legacy */
.sd-pos-bottom        .souper-download-overlay { align-items: flex-end; justify-content: center; }
.sd-pos-center        .souper-download-overlay { align-items: center;   justify-content: center; }

/* Mobile: always visible */
@media (hover: none) and (pointer: coarse) {
  .souper-download-overlay {
    opacity:        1;
    pointer-events: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTON
   Self-contained pill. Uses !important on layout-critical properties only,
   to survive line-height:0 and flex-direction:column from gallery parents.
   ══════════════════════════════════════════════════════════════════════════════ */

.souper-download-btn {
  /* Layout — !important prevents gallery CSS from breaking the inline layout */
  display:         inline-flex !important;
  flex-direction:  row !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-wrap:       nowrap !important;
  gap:             6px !important;
  line-height:     1 !important;
  /* Appearance */
  opacity:         var(--sd-btn-opacity);
  padding:         6px 14px;
  background:      rgba(30, 30, 30, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color:           rgba(255, 255, 255, 0.95);
  font-family:     system-ui, -apple-system, sans-serif;
  font-size:       0.70rem;
  font-weight:     600;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  text-decoration: none;
  white-space:     nowrap;
  border-radius:   999px;
  border:          1px solid rgba(255, 255, 255, 0.20);
  cursor:          pointer;
  box-sizing:      border-box;
  transition:      opacity       var(--sd-transition),
                   background    var(--sd-transition),
                   transform     var(--sd-transition);
}

.souper-download-btn:hover,
.souper-download-btn:focus-visible {
  opacity:         1;
  background:      rgba(10, 10, 10, 0.85);
  transform:       translateY(-1px);
  color:           #fff;
  text-decoration: none;
  outline:         none;
}

.souper-download-btn:active {
  transform: translateY(0) scale(0.97);
}

/* Icon */
.souper-dl-icon {
  display:     block !important;
  flex:        0 0 13px !important;
  width:       13px !important;
  height:      13px !important;
  stroke:      currentColor;
  overflow:    visible;
  line-height: 1 !important;
}

/* Label */
.souper-dl-label {
  display:     inline !important;
  line-height: 1 !important;
}

/* Icon-only mode */
.sd-btn-icon-only .souper-download-btn {
  padding: 7px;
  gap:     0 !important;
}
.sd-btn-icon-only .souper-dl-label {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   COUNTER
   Sits below the image — kept clean and unobtrusive.
   ══════════════════════════════════════════════════════════════════════════════ */

.souper-download-counter {
  display:     inline-flex;
  align-items: center;
  gap:         3px;
  margin-top:  4px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size:   0.72rem;
  color:       #aaa;
  white-space: nowrap;
  line-height: 1.4;
}

.souper-count-number {
  font-weight: 700;
  color:       var(--sd-orange);
  transition:  transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.souper-count-number.souper-bump {
  transform: scale(1.5);
}

.souper-count-label {
  color: #ccc;
}

/* ── Error notice ── */
.souper-download-error {
  color:       #b00;
  font-size:   0.82rem;
  font-family: monospace;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE: icon-only mode
   Applied when .sd-mobile-icon-only is present on the media container.
   The class is output by PHP when the admin toggle is on (default: on).
   ══════════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  /* Always visible on touch */
  .souper-download-overlay {
    opacity:        1;
    pointer-events: auto;
  }

  /* Collapse to icon-only on mobile when toggle is enabled */
  .sd-mobile-icon-only .souper-download-btn {
    padding: 8px !important;
    gap:     0 !important;
  }
  .sd-mobile-icon-only .souper-dl-label {
    display: none !important;
  }
}