/*
 * Save-to-cookbook button and its confirmation plaque (the «В подборку» sheet
 * itself is css/dv-sheet.css).
 * The button reuses .fav-icon / .btn-save from style.css and single.css; these
 * rules only undo what a <button> brings compared to the plugin's <div>.
 */

.dv-save.fav-icon {
  padding: 0;
  background: none;
  border: 0;
  line-height: 0;
}

/* What style.css gives .card-img .simplefavorite-button .svg-icon. */
.card-img .dv-save .svg-icon {
  height: 2rem;
  width: 2rem;
  filter: drop-shadow(0px 1px 3px rgb(0 0 0 / 0.4));
}

.dv-save:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: 4px;
}

.dv-save-plaque {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  max-width: calc(100% - 2rem);
  padding: .65rem .9rem;
  border-radius: var(--br-radius-sm);
  background: var(--color-dark-blue);
  color: #fff;
  font-size: .9375rem;
  box-shadow: 0 10px 30px rgb(15 31 36 / .2);
}

.dv-save-plaque[hidden] {
  display: none;
}

.dv-save-plaque a,
.dv-save-plaque a:visited {
  color: var(--main-color);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* «В подборку» on the plaque: a link-looking button next to «Открыть книгу». */
.dv-save-plaque__col {
  padding: 0;
  border: 0;
  background: none;
  color: var(--main-color);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.dv-save-sheet__error {
  color: var(--accent-color);
}