/* LMS Text Input Page Styling */

@font-face {
  font-family: "Excalifont";
  src: url("https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/Excalifont-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body.page-template-template-text-input {
  margin: 0;
  background: var(--lms-bgcolor, #ffffff);
}

body.page-template-template-text-input header,
body.page-template-template-text-input footer {
  display: none;
}

.lms-text-input-page {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--lms-bgcolor, #ffffff);
}

.lms-text-input-message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  text-align: center;
  background-color: var(--lms-bgcolor, #f5f5f5);
  color: #333;
  font-size: 1.1rem;
}

.lms-text-input-container {
  width: 100%;
  padding: 0;
}

.lms-text-input-field {
  position: relative;
  width: 100%;
}

.lms-text-input-control {
  display: block;
  width: 100%;
  min-height: calc(1.5em + 1rem + 4px);
  border: 2px solid #ffffff;
  border-radius: 4px;
  padding: 0.5rem 2.55rem 0.5rem 0.5rem;
  font-family: "Excalifont", "Comic Sans MS", "Comic Sans", cursive;
  font-size: 18px;
  line-height: 1.45;
  color: #333;
  background-color: var(--lms-bgcolor, #f4f4f4);
  outline: none;
  box-sizing: border-box;
}

.lms-text-input-control:focus {
  border-color: #9ca3af;
}

.lms-text-input-container--matched .lms-text-input-control {
  border-color: #22c55e;
  background: #dcfce7;
  color: #14532d;
}

.lms-text-input-container--empty .lms-text-input-control {
  border-color: #f59e0b;
  background: #fef3c7;
  color: #78350f;
}

.lms-text-input-container--wrong .lms-text-input-control {
  border-color: #8b0000;
  background: #f5d3d3;
  color: #5f0000;
}

.lms-text-input-check {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  display: none;
  width: 1.45rem;
  height: 1.45rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.lms-text-input-container--matched .lms-text-input-check,
.lms-text-input-container--empty .lms-text-input-check,
.lms-text-input-container--wrong .lms-text-input-check {
  display: flex;
}

.lms-text-input-container--empty .lms-text-input-check {
  background: #f59e0b;
  color: #78350f;
}

.lms-text-input-container--wrong .lms-text-input-check {
  background: #8b0000;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}