/* ===========================================================================
   MAVELY "ADD WATERMARK" OPTION  v1  (MV114.8)
   ---------------------------------------------------------------------------
   Additive only. Every selector is new and namespaced .mv-wm-*, except
   .mv-opt-watermark which deliberately carries NO colour of its own.

   WHY THE PILL HAS NO COLOUR RULE HERE
   ------------------------------------
   mavely-frames.v1.css already declares

       .mv-imgopts .mv-imgopt                        -> pink  #f4978e
       .mv-imgopts .mv-imgopt:has(:checked),
       .mv-imgopts .mv-imgopt.mv-is-on               -> green #16a34a

   The new label carries .mv-imgopt, so it inherits both states exactly. Adding
   a second declaration for the same colours would mean two places to change if
   the palette ever moves, and a chance for the new checkbox to drift a shade
   away from the four beside it. One rule, one colour.

   No existing selector is overridden by anything in this file.
   ========================================================================= */

/* --- the row ------------------------------------------------------------- *
   flex-basis 100% gives it its own line inside the wrapping .mv-imgopts row,
   which is the layout in whatermark.png. Nothing already in the bar is moved.  */
.mv-wm-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 100%;
}

/* --- the Type field ------------------------------------------------------ */
.mv-wm-text {
  flex: 1 1 220px;
  min-width: 140px;
  padding: 6px 12px;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font: 400 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mv-wm-text::placeholder { color: #94a3b8; }
.mv-wm-text:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}
.mv-wm-text:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: #f1f5f9;
}

/* --- Opacity / Size / Position ------------------------------------------- *
   Its own line under the checkbox, as in the screenshot. Hidden entirely when
   the feature is off, so an untouched install shows exactly the row it shows
   today plus one checkbox.                                                    */
.mv-wm-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 100%;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 10px;
  background: rgba(15, 23, 42, .28);
}
.mv-wm-panel.mv-wm-panel-off { display: none; }

.mv-wm-prow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mv-wm-lab {
  flex: 0 0 62px;
  color: #cbd5e1;
  font: 600 11px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .02em;
}

.mv-wm-range {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: #16a34a;          /* the same green as a ticked option */
  cursor: pointer;
}
.mv-wm-range:disabled { cursor: not-allowed; opacity: .5; }

.mv-wm-val {
  flex: 0 0 44px;
  text-align: right;
  color: #e2e8f0;
  font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}

.mv-wm-select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font: 400 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}
.mv-wm-select:disabled { opacity: .55; cursor: not-allowed; background: #f1f5f9; }
.mv-wm-select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}

/* --- narrow screens ------------------------------------------------------ */
@media (max-width: 520px) {
  .mv-wm-text { flex: 1 1 100%; }
  .mv-wm-lab  { flex: 0 0 54px; }
}