/* =========================================================
   PLATE FIT — replaces the .car-plate rules
   assests/css/plate-fit.css
   Link this AFTER design.css and design-fix.css
   ========================================================= */

/* the view becomes the sizing container so the plate text
   scales with the photo instead of the viewport */
.car-view {
  container-type: inline-size;
}

.car-plate {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;

  /* height now comes from config, not aspect-ratio.
     aspect-ratio was being overridden by the text's min-height,
     which is what made the plate square-ish. */
  aspect-ratio: auto;

  padding: 0;
  border-radius: 2px;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.28);
  transform-origin: center;
}
.design-card {
	position: relative;
	overflow: visible;          /* the mark must not be clipped */
}

.design-card .tile-mark {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;                 /* above the thumb and the card border */

	width: 16px;
	height: 16px;
	border: 2px solid #cfd4de;
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
	transition: border-color .15s;
}


.car-plate span {
  display: block;
  line-height: 1;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.01em;

  /* fallback first, then container-relative */
  font-size: 22px !important;
  font-size: 3.1cqw;
}

/* holder is drawn OUTSIDE the plate so it can't change its size */
.car-plate.has-holder {
  box-shadow:
    0 0 0 2.5px #33373d,
    0 0 0 3.5px rgba(0,0,0,0.45),
    0 2px 4px rgba(0,0,0,0.4);
}

/* borders scale down at photo size — 1px reads as a hairline */
.car-plate.bg-white  { border: 1px solid #a9b0b7; }
.car-plate.bg-yellow { border: 1px solid #d09600; }
.car-plate.bg-black  { border: 1px solid #000000; }

/* square plates — two lines, taller relative to width */
.car-plate.size-square {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	white-space: normal;
	line-height: 1.02;
}

.car-plate.size-square span {
	display: block;
	line-height: 1.02;
	letter-spacing: 0.11em;
	text-indent: 0.11em;
	font-size: 23px;
}

@media (max-width: 900px) {
	.car-plate span {
		font-size: 11px;
		font-size: 3.3cqw;
	}

	.car-plate.size-square span {
		font-size: 9px;
		font-size: 2.7cqw;
	}
}

@media (max-width: 900px) {
	.car-plate span {
		font-size: 11px;
		font-size: 3.3cqw;
	}

	.car-plate.size-square span {
		font-size: 9px;
		font-size: 2.7cqw;
	}
}

@media (max-width: 420px) {
	.car-plate span {
		font-size: 15px !important;
		font-size: 4.8cqw;
	}

	.car-plate.size-square span {
		font-size: 10px;
		font-size: 4.2cqw;
	}
}