/* =========================================================
   COLOUR + DESIGN CLASSES — unscoped so they work on any
   plate element: .plate2d, .design-thumb, .car-plate
   assests/css/design-fix.css
   ========================================================= */

.bg-white  { background: #ffffff;      border: 1px solid var(--field-line); }
.bg-yellow { background: #f7b500;      border: 1px solid #f7b500; }
.bg-black  { background: #16171a;      border: 1px solid #16171a; }

.txt-black  { color: #111318; }
.txt-blue   { color: #1a44d6; }
.txt-red    { color: #e1121a; }
.txt-gold   { color: #c9a227; }
.txt-silver { color: #b9bfc6; }
.txt-white  { color: #ffffff; }

/* design treatments — apply to the text inside any plate */
.d-3d span,
.design-thumb.d-3d {
  text-shadow: 1px 1px 0 rgba(0,0,0,0.45), 2px 2px 0 rgba(0,0,0,0.3), 3px 4px 5px rgba(0,0,0,0.35);
}

.d-laser span,
.design-thumb.d-laser {
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.55);
  letter-spacing: 0.05em;
}

.d-potbelly span,
.design-thumb.d-potbelly {
  font-family: var(--util);
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: scaleY(1.1);
}

.d-premium span,
.design-thumb.d-premium {
  text-shadow: 0 1px 0 rgba(255,255,255,0.5), 1px 2px 0 rgba(0,0,0,0.4), 2px 4px 6px rgba(0,0,0,0.3);
}

/* the car overlay needs its own border weight — the photo is small,
   a 1px border at that scale disappears */
.car-plate.bg-white  { border-width: 1.5px; border-color: #b9bfc6; }
.car-plate.bg-yellow { border-color: #d99f00; }
.car-plate.bg-black  { border-color: #000; }

.car-plate {
  background-clip: padding-box;
}