/* Deliberately restrained. The client asked whether it would use the site's
   own fonts and colours - so nothing here sets a font family, a text colour or
   a background for text. Everything inherits from Enfold.

   1.0.1: the small grey labels are gone. They were .9em at 80% opacity, which
   on his site read as washed-out next to the body text. Every label now uses
   the page's own size and colour, which is what he asked for. */

.samtykke { max-width: 720px; }

.samtykke-block {
  border: 1px solid rgba(128, 128, 128, .35);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 0 0 16px;
}

.samtykke-lang { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 10px; }

.samtykke-title { margin: 0 0 6px; }
.samtykke-who { margin: 0 0 12px; color: var(--samtykke-text, inherit) !important; }
.samtykke-help { margin: 0 0 12px; color: var(--samtykke-text, inherit) !important; }

.samtykke-two { display: flex; gap: 14px; flex-wrap: wrap; }
.samtykke-two > * { flex: 1 1 220px; }

.samtykke-f { display: block; margin: 0 0 14px; }
.samtykke-lab {
  display: block;
  margin: 0 0 4px;
  /* His colour, set on the wrapper as --samtykke-label and changeable in the
     settings screen. !important because the theme colours these through an
     id-carrying selector, exactly as it did the buttons. */
  color: var(--samtykke-label, inherit) !important;
}
.samtykke-f input {
  display: block; width: 100%; padding: 10px 12px;
  border: 1px solid rgba(128, 128, 128, .5); border-radius: 6px;
  font: inherit; color: inherit; background: transparent;
}

.samtykke-tick {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 12px; margin: 0 0 9px;
  border: 1px solid rgba(128, 128, 128, .35); border-radius: 8px;
  cursor: pointer;
}
.samtykke-tick input { margin: 4px 0 0; width: 18px; height: 18px; flex: 0 0 18px; }
/* The wording beside a checkbox came out #444 on a near-black page - his
   "the text by the checkboxes are still grey". */
.samtykke-tick span { color: var(--samtykke-text, inherit) !important; }

.samtykke-pad {
  display: block; width: 100%; height: 170px;
  border: 1px dashed rgba(128, 128, 128, .6); border-radius: 8px;
  /* Solid white, not 55% white. Over a dark page the old value read as grey,
     which is what he saw - and a signature belongs on paper-white anyway. */
  background: #ffffff !important;
  touch-action: none;   /* or a finger scrolls the page instead of drawing */
}
.samtykke-padrow {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin: 6px 0 14px;
}
/* Only the hint text takes the colour. Putting it on the row made the "clear"
   button inherit it too - gold on white is 2.1:1, which is unreadable on a
   light background even though it looks fine on his dark one. */
.samtykke-padrow span { color: var(--samtykke-text, inherit) !important; }

/* Buttons.

   He reported black text on a button the same colour as the text - unreadable.
   That happens when the theme paints a background and this plugin sets only a
   colour, or the other way round. The fix is to set BOTH, and to derive them
   from the page itself: currentColor is whatever the surrounding text is, on a
   transparent background. So the button can never end up the same colour as
   its own label, whatever the theme does, on a light site or a dark one. */
.samtykke button,
.samtykke-send {
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  padding: 8px 16px;
  /* !important, reluctantly and on purpose. Enfold styles buttons through
     selectors like "#top .main_color button", which carries an id and beats
     anything a plugin can write with classes alone. That is exactly how the
     black-on-black button happened. These four are the minimum needed to
     guarantee a readable button under any theme. */
  color: inherit !important;
  background: transparent !important;
  border: 1px solid currentColor !important;
  text-shadow: none !important;
  opacity: 1;
}

.samtykke button:hover,
.samtykke-send:hover { background: rgba(128, 128, 128, .12); }

.samtykke-send {
  display: block;
  width: 100%;
  padding: 14px 22px;
  font-weight: 700;
  border-width: 2px !important;
}
.samtykke-send[disabled] { opacity: .55; cursor: default; }

.samtykke-langbtn[aria-pressed="true"] { font-weight: 700; border-width: 2px !important; }

.samtykke-err {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 6px;
  border-left: 4px solid #c0392b; background: rgba(192, 57, 43, .08);
}
.samtykke-done {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 6px;
  border-left: 4px solid #1f7a4d; background: rgba(31, 122, 77, .08);
  white-space: pre-line;
}

/* Out of sight for people, still fillable by a robot. Not display:none -
   some bots skip hidden fields, and then the trap catches nothing. */
.samtykke-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}