/* ===========================
   Plates2U - Stylesheet
   Closely mirrors Number Plates Express layout
   =========================== */

/* ─── FONTS ──────────────────────────────── */
@font-face {
  font-family: 'CharlesWright';
  src: url('../fonts/CharlesWright-Bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'CharlesWrightMC';
  src: url('../fonts/charles-wright-mc.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ─── RESET & BASE ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }

/* clip stops horizontal overflow without creating a scroll container (keeps sticky working) */
body { overflow-x: clip; }

body {
  font-family: 'Plus Jakarta Sans', 'Roboto', Arial, sans-serif;
  color: #383838;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ─── UTILITIES ──────────────────────────── */
.fixed-width { max-width: 1240px;  padding: 0 20px; }
.para-style { font-size: 13px; color: #555; line-height: 1.6; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.opacity { opacity: 0.6; }
.hidden { display: none !important; }
.desktop-only { display: block; }
.mobile-only { display: none; }

/* ─── HEADER ─────────────────────────────── */
.header-container {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  position: sticky;
  top: 0;
  z-index: 1000;

}

.header_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 72px;
}

/* Logo */
.logo a {
  display: inline-block;
  line-height: 0;
}
.site-logo-img {
  height: 40px;
  width: auto;
  display: block;
}

.logo a .express {
  background: #fdd883;
  padding: 2px 8px;
  border-radius: 4px;
  color: #2d2d2d;
  font-style: italic;
}

/* Nav */
.nav-menu-box {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-menu-box a {
  font-size: 14px;
  font-weight: 600;
  color: #383838;
  padding: 8px 16px;
  border-radius: 6px;
  transition: color 0.15s;
  position: relative;
}

.nav-menu-box a:hover { color: #2bbc5d; }

.nav-menu-box a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: #2bbc5d;
  transform: scaleX(0);
  transition: transform 0.2s;
}

.nav-menu-box a:hover::after { transform: scaleX(1); }

.np_wrap { display: flex; align-items: center; gap: 16px; }

/* Cart & Login */
.cart_bag, .login-icon { display: flex; align-items: center; }
.cart_bag a, .login-icon a { display: flex; align-items: center; padding: 4px; }
.cart_bag img { cursor: pointer; }
.cart-count {
  background: #42b168;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 50%;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-left: -6px;
  margin-top: -10px;
}

/* Mobile header */
.mobile-container-header { display: none; }
.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.menu-icon { display: flex; align-items: center; }
.menu-icon input[type="checkbox"] { display: none; }
.menu-icon .toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
.bars { width: 24px; height: 2px; background: #383838; border-radius: 2px; transition: 0.3s; }

.mobile-logo .site-logo-img { height: 38px; }

.mobile-menu {
  display: none;
  background: #fff;
  border-top: 1px solid #eee;
}

.mobile-inner { padding: 8px 0; }
.mobile-nav { display: flex; flex-direction: column; }
.mobile-nav a {
  font-size: 14px;
  font-weight: 600;
  color: #383838;
  padding: 14px 20px;
  border-bottom: 1px solid #f0f0f0;
  letter-spacing: 0.5px;
}

.mobile-nav a:hover { background: #f8f8f8; color: #2bbc5d; }

#menubar:checked ~ .mobile-menu { display: block; }

/* ─── HERO / BUILDER SECTION ─────────────── */
.cnp_inside {
  background: #fff;
  position: relative;
}

/* Cream hero band — covers the headline and extends down
   to roughly the gap between the front and rear plate boxes */
.hero-headline {
  background: #faf4e4;
  padding: 40px 20px 340px; /* bottom padding pushes cream down into builder */
  text-align: center;
  position: relative;
  z-index: 0;
}

/* Large white ellipse that carves the curved bottom edge of the cream */
.hero-headline::after {
  content: '';
  position: absolute;
  bottom: -55px;
  left: -10%;
  width: 120%;
  height: 130px;
  background: #fff;
  border-radius: 50%;
  z-index: 1;
}

.hero-headline-text {
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  font-weight: 800;
  color: #2d2d2d;
  line-height: 1.2;
  position: relative;
  z-index: 2;
}

.hero-reviews {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 2;
}

.hero-stars {
  color: #3cb371;
  font-size: 22px;
  letter-spacing: 3px;
  display: block;
}

.hero-reviews-label {
  font-size: 13px;
  color: #4a4a4a;
  text-align: center;
  margin: 0;
}

/* Main content area — pulled up to sit on top of the cream */
.cnp_container {
  padding: 20px 20px 24px;
  max-width: 1240px;
  margin: 0 auto;
  
  position: relative;
  z-index: 2;
}

/* The main flex wrapper */
.blue_form_box {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  align-items: flex-start;
}

/* Flex order: form | plate-preview | delivery  (reversii reverses DOM order visually) */
.flex-style { display: flex; }
.reversii { flex-direction: row; }

/* Form column */
.form_list_flex { flex: 0 0 auto; width: 380px; }

/* Delivery/benefits column */
.delivery-box {
  flex: 0 0 auto;
  width: 220px;
  order: 3;
}

/* Plate preview column */
.plate_box {
  flex: 1;
  order: 2;
  min-width: 0;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

/* ─── USP BOXES (inside sticky plate column) ─ */
.usp-boxes {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  min-width: 100%;
  margin-top: 14px;
  border-top: 1px solid #efefef;
  padding-top: 4px;
}

.usp-boxes .deliv-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  padding: 12px 8px 8px;
  background: transparent;
  border-radius: 0;
  position: relative;
}

.usp-boxes .deliv-item + .deliv-item::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; height: 64%;
  width: 1px;
  background: #efefef;
}

.usp-boxes .deliv-item .box2 h4 { font-size: 11px; font-weight: 700; color: #1a1a1a; margin-bottom: 2px; }
.usp-boxes .deliv-item .box2 .para-style { font-size: 10px; color: #777; line-height: 1.4; }

/* ─── USP ICON (base) ────────────────────── */
.usp-icon {
  width: 38px; height: 38px;
  background: #eaf7f0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.usp-icon svg {
  width: 19px; height: 19px;
  stroke: #2bbc5d;
}

/* ─── DELIVERY BENEFITS ───────────────────── */
.delivery-flex { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }

.deliv-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,0.5);
  border-radius: 10px;
  padding: 12px;
}

.deliv-item .box1 { flex-shrink: 0; }
.deliv-item .box1 img { width: 34px; height: 40px; object-fit: contain; }
.deliv-item .box2 h4 { font-size: 13px; font-weight: 700; color: #2d2d2d; margin-bottom: 3px; }
.deliv-item .box2 .para-style { font-size: 12px; line-height: 1.4; }

/* ─── FORM BUILDER ───────────────────────── */
.left_box {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;

}

.customise_your_plates_heading {
  background: #2d2d2d;
  padding: 14px 20px;
  position: relative;
}

.builder-reset-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  transform: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.6);
  font-size: 9px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 20px;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.builder-reset-btn.visible {
  display: inline-flex;
}
.builder-reset-btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
}

.two-minutes-to-perfect-plates {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.benefits-container {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.benefits-container span {
  font-size: 11px;
  font-weight: 600;
  color: #fdd883;
  background: rgba(255,255,255,0.12);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.benefits-container span::first-letter {
  color: #2bbc5d;
}

.builder-form { padding: 0; }

.input_flex { display: flex; flex-direction: column; }

/* ─── PANEL / STEP ────────────────────────── */
.panel { }
.panel-thin { border-bottom: 1px solid #f0f0f0; }

.panel-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 10px;
  background: #fff;
}

.panel-heading .step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: #2d2d2d;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

.panel-heading h3.panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #2d2d2d;
}

.panel-body { padding: 4px 20px 16px; }
.panel-body label { font-size: 12px; font-weight: 600; color: #555; display: block; margin-bottom: 6px; }

/* Arrow down between steps */
.arrow-down {
  display: flex;
  justify-content: center;
  padding: 4px 0;
  background: #f8f8f8;
}

.arrow-down::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ddd;
}

/* Registration input */
.builder-input-box { margin-bottom: 8px; }

.registration.builder-input-box {
  background: #f5f5f5;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.registration.builder-input-box:focus-within { border-color: #2bbc5d; }

.builder-registration {
  width: 100%;
  padding: 12px 16px;
  font-size: 22px;
  font-family: 'Roboto', 'Arial Black', sans-serif;
  font-weight: 900;
  letter-spacing: 5px;
  text-transform: uppercase;
  border: none;
  outline: none;
  background: transparent;
  color: #2d2d2d;
  text-align: center;
}

.builder-registration::placeholder { color: #888; letter-spacing: 2px; font-size: 14px; font-weight: 500; text-align: center; }

.invalid-registration { font-size: 11px; color: #e53e3e; margin-top: 4px; }

/* Dropdown select */
.drop-select {
  position: relative;
  background: #f5f5f5;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.drop-select:hover { border-color: #bbb; }
.drop-select:focus-within { border-color: #2bbc5d; }

.drop-select select, .selector {
  width: 100%;
  padding: 11px 36px 11px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #383838;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: left !important;
  text-align-last: left !important;
  -webkit-text-align-last: left !important;
}

.drop-select > span {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* Types of plates (front/rear with label + checkbox) */
.types_of_plates { }

.types_of_plates label.space-bt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}

.space-bt { display: flex; justify-content: space-between; align-items: center; }

.types_of_plates label span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.types_of_plates label span input[type="checkbox"] { cursor: pointer; accent-color: #2bbc5d; }
.types_of_plates label span label { font-size: 11px; color: #888; cursor: pointer; font-weight: 500; margin: 0; }

/* Plate style options (Step 3) */
.options { display: flex; gap: 8px; }
.options-col { flex-direction: row; }

.box.font {
  flex: 1;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
}

.box.font input[type="radio"] { display: none; }

/* Style image wrapper with expand button */
.style-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
}
.style-img-wrap img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  object-position: center 65%;
  display: block;
}
.style-zoom-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  background: rgba(0,0,0,0.55);
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 0;
}
.style-img-wrap:hover .style-zoom-btn,
.style-zoom-btn:focus { opacity: 1; }

/* Style modal */
.style-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.style-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.style-modal {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  max-width: 500px;
  width: 92%;
  position: relative;
  transform: scale(0.93);
  transition: transform 0.22s cubic-bezier(0.34,1.1,0.64,1);

}
.style-modal-overlay.open .style-modal { transform: scale(1); }
.style-modal img {
  width: 100%;
  display: block;
}
.style-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: rgba(0,0,0,0.55);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.style-modal-close:hover { background: rgba(0,0,0,0.80); }
.style-modal-label {
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 16px;
  color: #383838;
  margin: 0;
}

.font-label {
  font-size: 12px;
  font-weight: 700;
  color: #383838;
  padding: 6px 4px 2px;
}

.style-price {
  font-size: 11px;
  color: #555;
  padding-bottom: 7px;
}

.box.font:hover { border-color: #2bbc5d; background: #f0fff4; }

.box.font.selected,
.box.font input:checked + div,
.box.font.active-style {
  border-color: #42b168 !important;
  background: #f0fff4 !important;

}

/* Flag dropdown — show flag image next to select */
.flag-dropselect { position: relative; }
.select-plate-badge {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  z-index: 1;
  pointer-events: none;
}

.flag-dropselect.has-badge select { padding-left: 38px; }

/* Badge position toggle (top/bottom) — two-line plates only */
.badge-position-wrap {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.badge-position-wrap.visible { display: flex; }
.badge-position-label {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}
.badge-position-btns {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.bp-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  background: #fff;
  border: none;
  cursor: pointer;
  color: #555;
  transition: background 0.15s, color 0.15s;
}
.bp-btn + .bp-btn { border-left: 1px solid #ddd; }
.bp-btn.active { background: #1c1c1e; color: #fff; }
.badge-not-possible {
  font-size: 12px;
  color: #c0392b;
  display: none;
}
.flag-select-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* Fixing kit */
.builder-input-flex { padding: 12px 20px 16px; }

.fixing-checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.fixing-checkbox .para-style { font-weight: 600; color: #2d2d2d; font-size: 13px; }
.fixing-checkbox .space-bt-mn { display: flex; align-items: center; gap: 6px; }
.fixing-checkbox input[type="checkbox"] { cursor: pointer; accent-color: #2bbc5d; width: 16px; height: 16px; }
.fixing-checkbox label.para-style { font-size: 12px; color: #888; cursor: pointer; }

.position-terms { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; }
.position-terms img { width: 40px; flex-shrink: 0; }
.position-terms .para-style { font-size: 11px; color: #888; line-height: 1.5; }

.pnote { font-size: 11px; color: #888; margin-top: 8px; line-height: 1.4; }

/* Material radio option hover */
.material-option:has(input:checked) { border-color: #2bbc5d !important; }

/* EV options */
.electic-vec-options {}

/* ─── PLATE PREVIEW BOX ────────────────────── */
.number-plate-box {
  background: #fff;
  border-radius: 12px;

  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: visible;
  perspective: 800px;
}

.f-plate, .n-plate { display: flex; flex-direction: column; align-items: center; overflow: visible; }
.f-plate { margin-bottom: 4px; }

/* Plate header row: name + size on one line, right-aligned, above the plate */
.plate-header-row {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.plate-header-row .para-style,
.plate-size-label {
  margin: 0;
  font-size: 10px;
  color: #888;
  letter-spacing: 0.2px;
}

.n-plate-box {
  border-radius: min(14px, 2.1vw);
  aspect-ratio: 520 / 111;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;

  overflow: hidden;
}

.your_reg_whitebox { background: #e7e7e7; border: 3px solid #e0e0e0; }
.your_reg_yellowbox { background: #f8cf48; border: 3px solid #e0b800; }

/* ─── Crystal Acrylic gloss effect ──────────────────────────────────────
   A semi-transparent top-to-bottom gradient that simulates the glossy sheen
   of premium crystal acrylic catching overhead light. Fades in on selection. */
.n-plate-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.60)  0%,
    rgba(255,255,255,0.22) 40%,
    rgba(255,255,255,0.00) 52%,
    rgba(0,0,0,0.03)       100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.n-plate-box.plate-crystal::after {
  opacity: 1;
}


.not-active-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border-radius: 5px;
  transition: opacity 0.2s;
  z-index: 5;
}

.not_selected_none { display: none; }

/* Plate border overlay — inset 5mm from plate edge, corners echo outer plate radius */
.plate-border {
  position: absolute;
  /* 5mm inset from each edge (520×111mm ref: 5/111≈4.5% vert, 5/520≈1% horiz)
     CSS % for top/bottom is % of containing-block HEIGHT; left/right is WIDTH */
  inset: 2.7% 0.6%;
  pointer-events: none;
  z-index: 3;
  /* Inner corner = outer radius (14px) minus inset (~4px) = ~10px */
  border-radius: 10px;
  border: 3px solid transparent;
}


/* 4D — same Charles Wright font, CSS extrusion gives the 3D raised look */

/* ── 3D Gel — image-based rendering ─────────────────────────────────────────── */
.gel-plate-text {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  will-change: filter;
}

/* Hide standard text when gel images are shown */
.plate-style-gel .n-plate-text {
  display: none !important;
}

.plate-style-gel .n-plate-text_ov {
  display: none;
}

.gel-group {
  display: flex;
  align-items: center;
}

/* Each character sits in a fixed-width slot (50/79 * charH) so narrow chars like 1
   are centred correctly and inter-char gap is measured slot-edge to slot-edge */
.gel-char-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.gel-char-slot img {
  height: 100%;
  width: auto;
  display: block;
  max-width: 100%;
}

/* Plate badge (flag strip) — blue EU-style strip, flag top, country text bottom */
.plate-badge {
  flex-shrink: 0;
  width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background: #003399;
  color: #fff;
  border-radius: min(7px, 1.1vw);
  transition: width 0.15s ease;
  /* height and margins set dynamically by JS to give 5mm inset on all sides */
}

.short-plate-badge-msg {
  font-size: 12px;
  color: #e05a00;
  margin: 6px 0 0 0;
  font-style: italic;
}
.short-plate-badge-msg.hidden { display: none; }

/* Flag image — top of badge; clip-path hides the white text baked into bottom of PNGs */
.badge-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 10%;
}

.badge-flag img {
  width: 100%;
  display: block;
  border-radius: 2px;

  clip-path: inset(0 0 30% 0);  /* hides bottom 30% where white country code text sits in the PNG */
}
/* Inline two-line badge: remove clip so flag fills available space */
.plate-2line .plate-badge .badge-flag {
  padding: 0 5%;
}
.plate-2line .plate-badge .badge-flag img {
  clip-path: inset(0 0 40% 0);  /* hide baked-in country code from PNG */
  border-radius: 1px;
}
/* Inline badge: country code shown below flag */

/* Country code text — always shown, white on standard blue badge, black on clear */
/* font-size set dynamically by JS based on badge width and code length */
.plate-badge .badge-text {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  width: 100%;
}
.plate-badge.badge-transparent {
  background: transparent;
}
.plate-badge.badge-transparent .badge-text {
  color: #111111 !important;
}
.plate-badge.badge-transparent .badge-flag img {
  box-shadow: none;
}

/* Oblong plates with badge: border starts to the right of the badge strip */
.n-plate-box.has-badge:not(.plate-2line) .plate-border {
  left: calc(41 / 520 * 100% + 0.6%);
}
/* Two-line square plates: badge is at the bottom so border wraps full perimeter */

/* Plate text — font-size set dynamically by JS using Canvas measurement */
.n-plate-text {
  flex: 1;
  text-align: center;
  font-family: 'CharlesWright', 'Arial Black', sans-serif;
  font-weight: normal;
  font-size: 60px; /* fallback; overridden by resizePlateText() */
  letter-spacing: 0; /* set dynamically by calibrateCWMetrics() in JS */
  color: #2d2d2d;
  z-index: 2;
  position: relative;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
  padding: 0 6px;
}
.n-plate-box.plate-moto .n-plate-text,
.n-plate-box.plate-moto .n-plate-text_ov {
  font-family: 'CharlesWrightMC', 'Arial Black', sans-serif;
}

/* Two-line plate — stack rg1/rg2 vertically */
.plate-2line .n-plate-text .rg1,
.plate-2line .n-plate-text .rg2,
.plate-2line .n-plate-text_ov .rg1,
.plate-2line .n-plate-text_ov .rg2 {
  display: block;
  white-space: nowrap;
  text-align: center;
}

/* Two-line badge: narrow vertical strip beside one text line, positioned by JS */
.plate-2line .plate-badge {
  position: absolute;
  justify-content: center;
  gap: 4%;
  box-sizing: border-box;  /* height set by JS = total height, padding inside */
}

.n-plate-text_ov {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'CharlesWright', 'Arial Black', sans-serif;
  font-weight: normal;
  font-size: 60px; /* overridden by JS */
  letter-spacing: 0; /* set dynamically by JS */
  line-height: 1;
  color: transparent;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Plate labels — centred URL and bottom-right standard mark */
.plate-label-centre {
  position: absolute;
  /* sit on the bottom border line — inset matches .plate-border inset of 2.7% */
  bottom: calc(2.7% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  font-size: min(5.5px, 0.85vw);
  color: rgba(0,0,0,0.35);
  font-family: Arial, sans-serif;
  letter-spacing: 0.3px;
  white-space: nowrap;
  /* background: inherit breaks the border line visually */
  background: inherit;
  padding: 0 3px;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

.plate-label-bs {
  position: absolute;
  bottom: calc(2.7% + 2px);
  right: 14px;
  transform: translateY(50%);
  font-size: min(5.5px, 0.85vw);
  color: rgba(0,0,0,0.35);
  font-family: Arial, sans-serif;
  letter-spacing: 0.3px;
  background: inherit;
  padding: 0 3px;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

/* Style effects */
.plate-style-4d .n-plate-text,
.plate-style-4d .n-plate-text_ov {
  /*
   * 4D raised acrylic effect.
   * Real 4D letters are thick blocks of black acrylic sitting proud of the plate.
   * Photographed, you see a slight dark "side face" depth below the letter,
   * and a soft cast shadow on the plate surface beneath.
   * We use a hard 2px downward copy (simulates acrylic thickness) + soft blur (cast shadow).
   * Directional downward = reads as depth, not as a misregistered printed line.
   * Works on both white and yellow plates.
   */
  filter:
)
);
}

/* 4D angle view */
.n-plate-box {
  transition: transform 0.55s cubic-bezier(0.34, 1.1, 0.64, 1);
  transform-origin: center center;
}
.n-plate-box.plate-angled {
  /* transform applied inline by JS angle slider */
}
.plate-style-4d.plate-angled .n-plate-text {
  filter: none;
  /* text-shadow driven dynamically by JS build4dShadow() — scales with slider angle */
}
/* Hide the overlay element in angle view — it doubles the shadow and causes misalignment with badges */
.n-plate-box.plate-angled .n-plate-text_ov { display: none; }
/* 3D gel angle view — drop-shadow on the image chars gives depth when tilted */
.plate-style-gel.plate-angled .gel-char-slot img {
  /* drop-shadow driven dynamically by JS buildGelShadow() — scales with slider angle */
}

.angle-view-wrap {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 6px auto 0;
}
.angle-view-wrap.visible { display: flex; }
.angle-view-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: #1c1c1e;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.1s;
  user-select: none;
}
.angle-view-btn:hover { background: #3a3a3c; }
.angle-view-btn:active { transform: scale(0.96); }
.angle-view-btn svg { flex-shrink: 0; }
.angle-view-btn.active { background: #0a84ff; }
/* Slider panel */
.angle-slider-panel {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #1c1c1e;
  border-radius: 24px;
}
.angle-slider-panel.visible { display: flex; }
.angle-arrow { color: #888; flex-shrink: 0; }
.angle-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 160px;
  height: 4px;
  border-radius: 2px;
  background: #444;
  outline: none;
  cursor: pointer;
}
.angle-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0a84ff;
  cursor: grab;

}
.angle-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0a84ff;
  cursor: grab;
  border: none;

}
.angle-reset-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}
.angle-reset-btn:hover { color: #fff; }



/* EV strip */
.plate-ev-strip {
  height: 8px;
  background: #00b140; /* Pantone 7481C — BS AU 145e EV strip */
  border-radius: 0 0 5px 5px;
  margin-top: 2px;
  display: none;
}
.plate-ev-strip.show { display: block; }



/* ─── PRICING & ADD TO CART ────────────────── */
.buy { border-top: 1px solid #e5e5e5; margin-top: 12px; padding-top: 14px; }

.buy-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Left: price */
.buy-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 100px;
}
.buy-price-label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
}
.buy-price-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.totalPriceSpan {
  font-size: 26px;
  font-weight: 800;
  color: #2d2d2d;
  line-height: 1;
}
.discountedPrice {
  font-size: 14px;
  font-weight: 600;
}
.red-text { color: #e53e3e; }

/* Centre: Adobe Payments / SSL badges */
.buy-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
.badge-adobe {
  display: flex;
  align-items: center;
}
.badge-ssl {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  color: #555;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Right: Add to cart button */
.add_cart_btn.crt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  background: #2bbc5d;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;

}
.add_cart_btn.crt-btn:hover {
  background: #25a852;
  transform: translateY(-1px);
}

.grey-border { border-top: 1px solid #eee; margin: 14px 0 10px; }

/* Payment icons */
.payment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid #efefef;
  cursor: pointer;
}

.payment-options:hover .pay-icon {
  opacity: 0.75;
  transition: opacity 0.15s;
}

.payment-options .pay-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  height: 28px;
  width: 44px;
}

.payment-options .pay-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* PayPal Pay in 3 badge */
.payment-options .pp3-icon {
  background: #003087;
  border-color: #003087;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 7px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── TESTIMONIALS ────────────────────────── */
.testimonials-section {
  background: #fff;
  padding: 40px 20px;
  border-top: 1px solid #f0f0f0;
}

.testimonials-inner {
  max-width: 1240px;
  
}

.testimonials-header {
  text-align: center;
  margin-bottom: 28px;
}

.testimonials-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: #2d2d2d;
  margin-bottom: 6px;
}

.testimonials-header .stars-row { color: #f5a623; font-size: 18px; letter-spacing: 2px; }
.testimonials-header .review-meta { font-size: 13px; color: #777; margin-top: 4px; }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.tesimonial_text {
  background: #f8f8f8;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 18px;
}

.client { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.client_review { display: flex; gap: 2px; }
.client_review img { height: 14px; }

.para-day-style { font-size: 11px; color: #999; }
.para-desc-style { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 12px; }
.name .customer-name-style { font-size: 13px; font-weight: 700; color: #2d2d2d; }

/* ─── FOOTER ──────────────────────────────── */
.site-footer { background: #2a2318; color: rgba(255,255,255,0.8); }

.footer-inner {
  max-width: 1240px;
  
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 48px 20px 36px;
}

.footer-brand .footer-logo a {
  display: inline-block;
  line-height: 0;
}

.footer-brand .footer-logo a img {
  height: 32px;
  width: auto;
  border-radius: 4px;
  font-style: italic;
}

.footer-brand p { font-size: 13px; line-height: 1.7; margin-top: 12px; max-width: 260px; color: rgba(255,255,255,0.65); }

.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #fff;
  margin-bottom: 16px;
}

.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 13px; color: rgba(255,255,255,0.6); transition: color 0.15s; }
.footer-col ul li a:hover { color: #fdd883; }

.footer-payment { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.footer-pay-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 16px 20px;
  max-width: 1240px;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

.footer-legal {
  background: rgba(0,0,0,0.2);
  padding: 14px 20px;
  text-align: center;
}

.footer-legal p {
  max-width: 900px;
  
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  line-height: 1.6;
}

/* ─── STICKY ADD TO BASKET (Mobile) ──────── */
.sticky-add-to-basket {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: #fff;

  z-index: 999;
}

.sticky-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sticky-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}

.sticky-price-label {
  font-size: 10px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sticky-price-amount {
  font-size: 20px;
  font-weight: 800;
  color: #2d2d2d;
  line-height: 1;
}

.sticky-add-to-basket .add_cart_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 14px;
  background: linear-gradient(135deg, #42b168, #2bbc5d);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;

}

/* ─── TOAST ───────────────────────────────── */
.toast-msg {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: #2d2d2d;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s;
  pointer-events: none;
  max-width: 280px;
}

.toast-msg.show { opacity: 1; transform: translateY(0); }

/* ─── PULSE ANIMATION ────────────────────── */
@keyframes pulse-border {
  0%, 100% { border-color: #d0d0d0; box-shadow: none; }
  50%       { border-color: #2bbc5d; }
}

/* ─── PULSE CTA ON REG INPUT (all screen sizes) ── */
.registration.builder-input-box {
  animation: pulse-border 1.8s ease-in-out infinite;
  border-width: 2.5px;
}
.registration.builder-input-box:focus-within {
  animation: none;
  border-color: #2bbc5d;
  border-width: 2.5px;

}

/* ─── RESPONSIVE ──────────────────────────── */
@media (max-width: 900px) {
  .cnp_container { padding: 10px 12px; }
  .blue_form_box { flex-wrap: wrap; gap: 12px; }

  /* Plate preview: sticky live preview at top, form scrolls below */
  .form_list_flex { width: 100%; order: 2; }
  .delivery-box { width: 100%; order: 3; }
  .plate_box {
    order: 1;
    width: 100%;
    flex: unset;
    position: sticky;
    top: 0;
    z-index: 100;
    align-self: flex-start;
  }

  /* Strip down the sticky plate card — just show the plates */
  .plate_box .buy { display: none; }
  .plate_box #usp-boxes { display: none; }
  .number-plate-box { padding: 10px 12px; gap: 4px; }

  .desktop-only { display: none; }
  .mobile-only { display: block; }
  .sticky-add-to-basket { display: block; }
  body { padding-bottom: 76px; }

  /* Tighter hero — less gap between headline and builder */
  .hero-headline { padding: 24px 14px 140px; }



  /* Mobile dark intro box — rounded corners, dark cream, centred, compact */
  .customise_your_plates_heading.mobile-only {
    background: #3a2d1a !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 10px !important;
    text-align: center;
  }
  .customise_your_plates_heading.mobile-only .two-minutes-to-perfect-plates {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 8px 16px 6px !important;
    font-size: 14px !important;
  }
  .customise_your_plates_heading.mobile-only .benefits-container {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 16px 8px !important;
    justify-content: center;
  }

  /* USP boxes: compact 3-column single row on mobile */
  .usp-boxes {
    flex-direction: row;
    gap: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    margin-top: 10px;
  }
  .usp-boxes .deliv-item {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 4px;
    gap: 5px;
    background: transparent;
    border-radius: 0;
  }
  .usp-boxes .usp-icon { width: 30px; height: 30px; }
  .usp-boxes .usp-icon svg { width: 15px; height: 15px; }
  .usp-boxes .deliv-item .box2 h4 { font-size: 10px; font-weight: 700; line-height: 1.3; }
  .usp-boxes .deliv-item .box2 .para-style { display: none; }

  /* Toast sits above sticky bottom bar */
  .toast-msg { bottom: 94px; right: 16px; left: 16px; max-width: none; text-align: center; }
}

@media (max-width: 768px) {
  .mobile_none { display: none; }
  .mobile-container-header { display: block; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* ── Prevent iOS auto-zoom on focus (font must be ≥16px) ── */
  .builder-registration {
    font-size: 18px;
    letter-spacing: 3px;
    padding: 14px 12px;
  }
  .drop-select select,
  .selector {
    font-size: 16px;
    min-height: 48px;
    padding: 14px 36px 14px 12px;
  }

  /* ── Larger touch targets for checkboxes ── */
  .fixing-checkbox input[type="checkbox"],
  .types_of_plates label span input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* ── Style selector: 3-column row on mobile ── */
  .options.fonts-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .options.fonts-container .box.font { flex: unset; }
  .options.fonts-container .style-img-wrap img { height: 40px; }
  .options.fonts-container .font-label { font-size: 11px; padding: 4px 2px 1px; }
  .options.fonts-container .style-price { font-size: 10px; padding-bottom: 5px; }

  /* ── Buy bar: price left, button right ── */
  .buy-bar { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; }
  .buy-price { flex: 0 0 auto; }
  .buy-badges { display: none; } /* badges too small to be useful on mobile */
  .add_cart_btn.crt-btn { flex: 1; padding: 13px 10px; font-size: 14px; justify-content: center; }

  /* ── Payment icons: all 7 on one line ── */
  .payment-options { flex-wrap: nowrap; gap: 4px; }
  .payment-options .pay-icon { flex: 1; min-width: 0; width: auto; height: 26px; }

  /* ── Tighter form panel padding ── */
  .panel-body { padding: 4px 14px 14px; }
  .panel-heading { padding: 12px 14px 8px; }
  .builder-input-flex { padding: 10px 14px 14px; }

  /* ── Plate preview: tighter spacing between plates ── */
  .number-plate-box { padding: 14px; gap: 4px; }
  .f-plate { margin-bottom: 0; }
  .f-plate .para-style, .n-plate .para-style { font-size: 11px; margin-bottom: 2px; }

  /* ── Hero ── */
  .hero-headline { padding: 20px 14px 130px; }
  .cnp_container {  }

  /* ── Header height ── */
  .header_wrap { height: 60px; }

  /* ── Sticky plate preview: adjust for shorter mobile header ── */
  .plate_box { top: 62px; }
}

@media (max-width: 480px) {
  .testimonials-grid { grid-template-columns: 1fr; }

  /* ── Footer: compact on mobile ── */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 28px 16px 20px;
  }
  .footer-brand { grid-column: 1 / -1; } /* brand full width at top */
  .footer-brand p { display: none; } /* hide description blurb */
  .footer-brand .footer-payment { display: none; } /* payment badges in footer redundant on mobile */
  .footer-brand .footer-logo a img { height: 26px; }
  .footer-col h4 { font-size: 11px; margin-bottom: 10px; }
  .footer-col ul li { margin-bottom: 7px; }
  .footer-col ul li a { font-size: 12px; }
  .footer-bottom { padding: 12px 16px; font-size: 11px; }
  .footer-legal { padding: 10px 16px; }
  .footer-legal p { font-size: 10px; }

  /* ── Hero: compact on small phones ── */
  .hero-headline { padding: 18px 12px 120px; }
  .cnp_container { padding: 8px 10px; }
  .hero-headline-text { font-size: 1.55rem; line-height: 1.25; }

  /* ── Buy bar: keep price+button in one row on small phones too ── */
  .buy-bar { flex-direction: row; flex-wrap: nowrap; }
  .add_cart_btn.crt-btn { flex: 1; font-size: 14px; padding: 13px 8px; }

  /* ── Benefits tags: wrap neatly ── */
  .benefits-container { gap: 6px; }
  .benefits-container span { font-size: 11px; padding: 3px 8px; }

  /* ── Sticky button full-width bar ── */
  .sticky-add-to-basket { padding: 10px 12px; }
  .sticky-add-to-basket .add_cart_btn { font-size: 16px; padding: 15px 12px; }

  /* ── Plate labels ── */

  /* ── Reviews bar ── */


  /* ── Footer bottom ── */
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 4px; }

  /* ── Form box: remove outer shadow at very small ── */
  .left_box { border-radius: 10px; }
  .number-plate-box { border-radius: 10px; padding: 12px; }
}

/* ── Vehicle type toggle ── */
.vehicle-toggle-btns {
  display: flex;
  gap: 0;
  margin-top: 8px;
  background: #e8e8e8;
  border-radius: 8px;
  padding: 3px;
  position: relative;
}
/* Sliding pill indicator */
.vehicle-toggle-btns::before {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: #fff;
  border-radius: 6px;

  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.vehicle-toggle-btns.bike-active::before {
  transform: translateX(100%);
}
.vehicle-toggle-btn {
  flex: 1;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #888;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, font-weight 0.2s ease;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.vehicle-toggle-btn:hover {
  color: #2bbc5d;
}
.vehicle-toggle-btn.active {
  color: #1a1a1a;
  font-weight: 600;
}

/* Plate flip animation */
@keyframes plate-flip-out {
  0%   { opacity: 1; transform: perspective(800px) rotateY(0deg) scale(1); }
  100% { opacity: 0; transform: perspective(800px) rotateY(70deg) scale(0.88); }
}
@keyframes plate-flip-in {
  0%   { opacity: 0; transform: perspective(800px) rotateY(-70deg) scale(0.88); }
  100% { opacity: 1; transform: perspective(800px) rotateY(0deg) scale(1); }
}
.plate-flipping-out {
  animation: plate-flip-out 0.18s ease-in forwards;
  pointer-events: none;
}
.plate-flipping-in {
  animation: plate-flip-in 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
  pointer-events: none;
}

/* ─── Cookie Consent Banner ──────────────────── */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: #1a1a1a;
  color: #e8e8e8;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  line-height: 1.5;

  transform: translateY(100%);
  transition: transform 0.35s ease;
}
#cookie-banner.visible { transform: translateY(0); }
#cookie-banner p { margin: 0; flex: 1; }
#cookie-banner a { color: #2bbc5d; text-decoration: underline; }
.cookie-btns { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.cookie-btn-accept { background: #2bbc5d; color: #fff; }
.cookie-btn-accept:hover { background: #24a050; }
.cookie-btn-decline { background: #333; color: #ccc; }
.cookie-btn-decline:hover { background: #444; }
@media (max-width: 600px) {
  #cookie-banner { flex-direction: column; align-items: flex-start; }
  .cookie-btns { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }
}

/* ─── Plate roll animation ───────────────────── */
.f-plate, .n-plate {
  perspective: 900px;
}
.n-plate-box {
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.n-plate-box.roll-exit {
  animation: plateRollExit 0.22s ease-in forwards;
  pointer-events: none;
}
.n-plate-box.roll-enter {
  animation: plateRollEnter 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
}
@keyframes plateRollExit {
  from { transform: rotateX(0deg)   scale(1);    opacity: 1; }
  to   { transform: rotateX(88deg)  scale(0.82); opacity: 0; }
}
@keyframes plateRollEnter {
  from { transform: rotateX(-72deg) scale(0.82); opacity: 0; }
  to   { transform: rotateX(0deg)   scale(1);    opacity: 1; }
}