/* BEFORE: intentionally inaccessible demo styles for the Nordprix WCAG remediation sample.
   The defects are deliberate. Do not reuse these styles. */

body {
  margin: 0;
  background: #ffffff;
  color: #333333;
  font: 16px/1.5 Georgia, "Times New Roman", serif;
}

/* Nordprix demo banner: outside the scope of the demo, kept accessible on purpose. */
.demo-banner {
  background: #1b1a17;
  color: #ffffff;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 12px 16px;
}
.demo-banner p { margin: 0 auto; max-width: 640px; }
.demo-banner a { color: #ffffff; }
.demo-banner a:focus-visible { outline: 3px solid #f4d58d; outline-offset: 2px; }

.shop { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; }

/* Defect: focus indicator removed for everything in the demo. */
.shop *:focus { outline: none; }

.top { padding: 8px 0 12px; }
.logo img { display: block; }

.promo {
  background: #fff4e0;
  color: #333333;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}
.promo a { color: #58a6e0; }

/* Defect: 16 x 16 close button placed right next to a link. */
.close {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0 0 0 1px;
  border: 0;
  background: transparent;
  color: #333333;
  font-size: 14px;
  line-height: 16px;
  cursor: pointer;
  vertical-align: middle;
}

h1 { font-size: 30px; margin: 20px 0 8px; }
h4 { font-size: 22px; margin: 28px 0 8px; }

/* Defect: light blue links. */
a { color: #58a6e0; }

.photo { display: block; width: 100%; height: auto; border-radius: 8px; }

.row { margin: 0 0 14px; }
.lbl { display: block; font-size: 14px; margin-bottom: 4px; }

/* Defect: very light field borders. */
input, select, textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font: inherit;
  color: #333333;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
}

/* Defect: placeholder is the only label and is too light. */
input::placeholder, textarea::placeholder { color: #c2c2c2; opacity: 1; }

/* Defect: help text too light. */
.help { color: #a3a3a3; font-size: 14px; }

/* Defect: errors shown only as a red border. */
.err { border-color: #e53935; }

/* Defect: white text on orange, and a div used as a button. */
.btn {
  display: inline-block;
  background: #f6a623;
  color: #ffffff;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
}

.msg { margin-top: 12px; }
.msg.ok { color: #2e7d32; }