/*
 * ===== INTENTIONAL ACCESSIBILITY ANTI-PATTERNS =====
 * This file contains deliberate accessibility violations for testing
 * and demonstration purposes. Each issue is marked with an ISSUE comment.
 * Do NOT use this file as a template for production styles.
 */

/* ISSUE: Low contrast text — gray on white */
body {
  font-family: Arial, sans-serif;
  color: #999999; /* 2.85:1 on white — FAILS AA */
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}

.header {
  background-color: #333333;
  color: #666666; /* ISSUE: 2.23:1 on #333 — FAILS */
  padding: 20px;
}

.header h1 {
  color: #777777; /* ISSUE: 2.71:1 on #333 — FAILS */
}

.nav a {
  color: #aaaaaa; /* ISSUE: 2.32:1 on #333 — FAILS */
  margin: 0 10px;
  /* ISSUE: Links not underlined and rely on color alone to be distinguished */
  text-decoration: none;
}

/* ISSUE: Focus indicator completely removed with no alternative */
*:focus {
  outline: none;
}

.product-card {
  border: 1px solid #f0f0f0; /* ISSUE: 1.06:1 against white — invisible border */
  padding: 20px;
  margin: 10px;
  display: inline-block;
  width: 250px;
  vertical-align: top;
}

.price {
  font-size: 18px;
  font-weight: bold;
}

/* ISSUE: Color-only indicator for sale. Strikethrough helps, but
   the "sale" meaning relies entirely on red color */
.old-price {
  color: #999999;
  text-decoration: line-through;
}

.sale-price {
  color: #ff0000;
}

/* ISSUE: Button-like elements styled but not keyboard accessible */
.buy-btn,
.submit-btn {
  background-color: #4CAF50;
  color: white; /* 3.07:1 — passes large text but FAILS normal text at small sizes */
  padding: 10px 20px;
  cursor: pointer;
  display: inline-block;
  /* ISSUE: No focus styles since global outline:none applies */
}

.buy-btn:hover,
.submit-btn:hover {
  background-color: #45a049;
}

/* Stars — ISSUE: rating conveyed by color alone */
.star {
  font-size: 24px;
}

.star.filled {
  color: #ffd700; /* Gold star — "good" */
}

.star.empty {
  color: #cccccc; /* Gray star — "not rated" */
}

/* Form styles */
form input[type="text"],
form input[type="email"],
form input[type="tel"] {
  display: block;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid #dddddd;
  width: 300px;
}

/* ISSUE: Placeholder text very low contrast */
::placeholder {
  color: #cccccc; /* 1.61:1 on white — FAILS badly */
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  margin: 100px auto;
  width: 400px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
  color: #aaaaaa; /* ISSUE: 2.32:1 on white — FAILS */
}

/* ISSUE: Scrolling animation without prefers-reduced-motion */
.banner-animation {
  background-color: #ff6600;
  color: white; /* 3.13:1 — FAILS normal text */
  overflow: hidden;
  padding: 10px;
}

.scrolling-text {
  white-space: nowrap;
  animation: scroll-left 10s linear infinite;
  /* ISSUE: No @media (prefers-reduced-motion: reduce) to disable this */
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.footer {
  background-color: #222222;
  padding: 20px;
  text-align: center;
}

.copyright {
  color: #555555; /* ISSUE: 2.47:1 on #222 — FAILS */
  font-size: 12px;
}

/* Disabled state — ISSUE: practically invisible */
.btn-disabled {
  color: #e0e0e0; /* 1.38:1 on white — indistinguishable */
  background-color: #f5f5f5;
  cursor: not-allowed;
}
