/* Base / Reset */
:root{
  --brand-green:#409482; /* top bar */
  --bg: #ffffff; /* light grey page bg from mockup */
  --card:#EEF3F8; /* card background slightly darker */
  --tile:#ffffff; /* tile background inside the card */
  --plate-yellow:#e2c627;
  --plate-blue:#14337C;
  --plate-border:#2a2a2a;
  --text:#0f1115;
  --muted:#636a76;
  --button-blue:#14337C;
  --white:#fff;
  --radius-lg:18px;
  --radius-xl:24px;
  --shadow-soft:0 8px 24px rgba(0,0,0,0.15);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  text-align: center;
}

img{max-width:100%;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Layout */
.container{width:min(1100px, 92%); margin-inline:auto}
.brand-bar{background:var(--brand-green); color:var(--white);}
.brand-bar__inner{display:flex; align-items:center; height:64px}
.logo{max-width:150px; height:auto}

main{padding-block:24px}
.hero-section{margin-bottom:32px} /* Add space between hero and form screens */

/* Screen management */
.screen{display:none}
.screen--active{display:block}

/* Hero section resembles mobile mock */
.hero{display:grid; gap:20px; align-items:start}
.hero__title{margin:8px 0 6px; font-weight:800; font-size:28px; letter-spacing:-0.01em}
.hero__subtitle{margin:0 0 12px; color:var(--muted); line-height:1.5; font-size:16px}

/* Art: check badge + car overlapping */
.art{position:relative; width:min(560px, 100%); margin:12px auto 4px}
.art__badge{position:absolute; left:0; top:10px; width:160px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.15))}
.art__car{position:relative; z-index:1; width:100%; max-width:520px; margin-left:auto}

/* Plate input */
.reg-form{display:grid; gap:14px; margin-top:12px}
.help{margin:0; color:var(--muted); font-size:13px}

.plate{display:grid;grid-template-columns: 60px 1fr;background:var(--plate-yellow);border-radius:24px;border:2px solid var(--plate-border);overflow:hidden;box-shadow:inset 0 -2px 0 rgba(255,255,255,.35), 0 3px 0 rgba(0,0,0,.22);} 
.plate__gb{background:var(--plate-blue);color:var(--white);display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;padding: 5px;}
.plate__flag{width: 30px;height:auto;margin-top: 4px;}
.plate__country{font-weight:800;letter-spacing:.5px;font-size: 15px;}
.plate__input{border:0;background:transparent;padding: 16px 14px;font-size: 24px;font-weight:900;letter-spacing:1px;text-transform:uppercase;outline:none;width:100%;color:#000;text-align: center;}
.plate__input::placeholder{color:rgba(0,0,0,.55)}

/* Buttons */
.btn{appearance:none; border:0; cursor:pointer; font-weight:900; border-radius:24px; padding:18px 22px; font-size:22px; letter-spacing:.2px}
.btn--primary{background: #14337C;color:#f0f5ff;box-shadow:var(--shadow-soft)}
.btn--primary:active{transform:translateY(1px)}
.btn--primary:disabled{background:#6c757d; cursor:not-allowed; transform:none}
.btn--ghost{background:transparent; color:var(--button-blue); border:2px solid var(--button-blue)}

/* Error message */
.error-message{
  margin-bottom:16px;
  padding:16px;
  background:#fee;
  border:1px solid #fcc;
  border-radius:12px;
  color:#c33;
  font-size:14px;
  line-height:1.4;
}

/* Results */
.results{margin-block:8px}
.card{background:var(--card); border-radius:24px; padding:22px;margin-top: 24px;}
.bottom__card{text-align: left; }
.results__title{margin:6px 6px 18px; font-size:28px; font-weight:6  00; text-align:left}
.tiles{display:grid; gap:16px}
.tile{
  background:var(--tile);
  border-radius:16px;
  padding:8px 16px 18px 8px;
  display:grid;
  grid-template-rows:auto 1fr;
  align-items:center;
  text-align:center;
}
.tile__label{
  color:var(--muted);
  font-weight:500;
  font-size:15px;
  margin-bottom:8px;
  text-align:left;
}
.tile__value{
  font-weight:800;
  font-size:26px;
}
.results__actions{margin-top:14px; display:flex; justify-content:flex-end}

/* Consent paragraph under the CTA */
.consent{margin:10px 4px 0;color:var(--muted);font-size:14px;text-align:left}
.consent__link{color:var(--button-blue); text-decoration:underline; font-weight:600}
.consent--legal{font-weight:300; font-style:italic}
.consent--description{font-weight:400;font-style:normal;color: var(--text);}

/* User Details Form */
.user-details{margin-block:8px}
.user-details__card{text-align:left}
.user-details__title{
  margin:6px 6px 24px; 
  font-size:20px; 
  font-weight:600; 
  text-align:left;
  color:var(--text);
  line-height:1.3;
}

.user-details-form{display:grid; gap:20px}
.form-group{display:grid; gap:8px}
.form-label{
  font-size:18px;
  font-weight:600;
  color:var(--text);
  margin:0;
}

.form-input{
  padding:16px 20px;
  border:2px solid #d1d5db;
  border-radius:12px;
  font-size:16px;
  background:var(--white);
  color:var(--text);
  outline:none;
  transition:border-color 0.2s ease;
}

.form-input::placeholder{
  color:#9ca3af;
  font-size:16px;
}

.form-input:focus{
  border-color:var(--button-blue);
}

.form-actions{
  display:flex;
  gap:12px;
  margin-top:8px;
}

.user-details-btn{
  font-size:18px;
  padding:16px 24px;
  flex:1;
}

/* Desktop responsiveness */
@media (min-width: 920px){
  .container{width:670px}
  .brand-bar__inner{height:76px}
  main{padding-block:40px}
  .hero{grid-template-columns: 1fr; align-items:center}
  .hero__title{font-size:40px}
  .hero__subtitle{font-size:18px}
  .art{margin:0 auto}
  .plate__input{font-size:52px}
  .btn{font-size:24px; border-radius:26px}
  .results__card{padding:28px}
  .results__title{font-size:34px}
  .tiles{grid-template-columns:1fr;}
  .tile{min-height:84px}
  .tile__value{font-size:30px}
}

/* Footer */
.site-footer {
  background: #EFEFEF;
  color: #132C27;
  padding: 40px 0 20px;
  margin-top: 40px;
}

.site-footer__top-content {
  margin-bottom: 30px;
}

.site-footer .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.site-footer .col {
  padding: 0 15px;
}

.site-footer address {
  font-style: normal;
  line-height: 1.6;
  margin-bottom: 20px;
}

.site-footer .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer .menu li {
  margin-bottom: 8px;
}

.site-footer .menu a {
  color: #26584F;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.3s ease;
}

.site-footer .menu a:hover {
  opacity: 0.8;
}

.site-footer p {
  margin: 10px 0;
  line-height: 1.6;
  font-size: 14px;
}

.site-footer a {
  color: #26584F;
  text-decoration: underline;
}

.site-footer__bottom-content {
  border-top: 1px solid rgba(19, 44, 39, 0.2);
  padding-top: 20px;
  text-align: center;
}

.site-footer__bottom-content p {
  max-width: 800px;
  margin: 15px auto;
  font-size: 13px;
  line-height: 1.5;
}

.site-footer__bottom-content img {
  max-width: 100%;
  height: auto;
  margin: 10px auto;
  display: block;
}

/* Social icons */
.social {
  margin: 15px 0;
}

.foot-social-icons-cont {
  display: inline-block;
  margin-right: 10px;
}

.foot-social-icons {
  width: 30px;
  height: 30px;
  /* Removed white filter for light background */
}

.foot-social-icons-cont:hover .foot-social-icons {
  opacity: 0.8;
}

/* Subtle focus styles for accessibility */
:focus-visible{outline:3px solid #8bb4ff; outline-offset:2px}