:root{
  --red:#e30613;
  --red-dark:#c8000d;
  --gray:#f5f5f5;
  --border:#e0e0e0;
  --text:#111;
  --radius:12px;
}

/* ================= LAYOUT ================= */
.wrapper{
  max-width:960px;
  margin:40px auto;
  padding:0 20px;
}

.card{
 
}
.step { background:#fff;
  border-radius:16px;
  padding:40px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);}
/* ================= TABS ================= */
.tabs{
  display:flex;
  gap:12px;
  margin-bottom:30px;
}
.tab{
  padding:14px 28px;
  border-radius:8px;
  font-weight:700;
  background:#eee;
}
.tab.active{
  background:linear-gradient(90deg,var(--red),var(--red-dark));
  color:#fff;
}

/* ================= STEPS ================= */
.step{display:none}
.step.active{display:block}

h3{
  margin:0 0 20px;
  font-size:22px;
}

/* ================= KENTEKEN ================= */
.kenteken-wrap{
  display:flex;
  gap:30px;
}
.kenteken{
  display:flex;
  align-items:center;
  background:#ffd400;
  border-radius:8px; overflow: hidden;
  overflow:hidden;border:1px solid #333;
}
.kenteken span{
  background:#003399;
  color:#fff;
  padding:0 10px;
  font-weight:700; height: 50px; display: flex;align-items: center;
}
.kenteken input{
  border:none;
  background:transparent;
  font-size:22px;
  font-weight:700;
  padding:0 16px;
  outline:none;
  width:220px;
}
.search{
  width:52px;
  height:52px;
  background:#ffd400;
  border:none;
  cursor:pointer; border-radius: 8px;border:1px solid #333; display: flex; justify-content: center; align-items: center; padding: 5px;
}

/* ================= ICON GRID ================= */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(102px,1fr));
  gap:16px;
}
.card-option{
  border:2px solid var(--border);
  border-radius:var(--radius);
  padding:10px 10px;
  text-align:center;
  cursor:pointer; display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.card-option img{max-width: 100px; margin: 0 auto; margin-bottom: 5px;}
.card-option.active{
  border-color:green;
  background:#fff5f6;
}
input[type="date"]{background: none;}
.step1 .card-option input{display:none; outline: none; box-shadow: none;}
.card input[type=text]:focus{background: transparent;}
/* ================= SIZE BOX ================= */
.size-box{
  border:2px solid var(--border);
  border-radius:10px;
  padding:0px 20px;
  display:flex;
  gap:16px;
  align-items:center;
  cursor:pointer;
}
.size-box.active{border-color:green}
.size-box img{max-height: 80px;}
.size-box input{width: 20px;}
.size-box span{width: 62%;}
/* ================= FORM ================= */
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
input{
  width:100%;
  padding:14px;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:15px;
}

.grid.multi{ grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); max-width: 500px;}
.imgwrap1{height: 85px; width: 100%;}
.card-option .imgwrap1 img{max-height: 85px; max-width: 140px;}
/* ================= BUTTONS ================= */
.actions{
  display:flex;
  justify-content:space-between;
  margin-top:30px;
}
.btn{
  padding:14px 28px;
  border-radius:8px;
  font-weight:700;
  border:none;
  cursor:pointer;
}
.btn-primary{
  background:var(--red);
  color:#fff;
}
.btn-outline{
  border:2px solid var(--red);
  background:#fff;
  color:var(--red);
}
.grid-2,.grid-3{display: flex;
    column-gap: 15px;
    margin-bottom: 10px;}
    .step4 input{border: none; border-bottom: 1px solid #e0e0e0; border-radius: 0px;}
    .step4 select{width: 48%;border-radius: 0px;}
/* ================= ERROR ================= */
.error{border-color:var(--red)}
.error-text{color:var(--red);font-size:13px}
.step-error {
  border: 2px solid var(--red) !important;
}
input[type="file"]{border: none; padding: 0px;}
.uploadimage{cursor: pointer;}
.error-msg {
  color: var(--red);
  font-size: 13px;
  margin-top: 10px;
}
.fileupload input[type="file"]{position: absolute; width: 0px; height: 0px;}
.sform{display: flex; column-gap: 10px;}
.forgetplate{padding: 7px 30px; border-radius: 15px; border:none}
.note{font-size: 10px;}
.features {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 40px;
    font-weight: 600;
}

.feature {
    color: #222;display: flex;
    align-items: center;
    column-gap: 5px;
}
.feature span{background-color: green;
    border-radius: 100px;
    color: #fff;
    padding: 2px;
    font-size: 8px;
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;}
    .radio-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}
.radio-checkbox{    width: 62%;
    justify-content: space-between;}
    .step2 .radio-checkbox{ width: 100%; flex-direction: column;}
.radio-checkbox input[type="radio"] {
    display: none;
}
.step2 input[type="date"]{border: none;
    border-bottom: 1px solid #e0e0e0;background: none;
    max-width: 400px;
    border-radius: 0px;}
/* Box that looks like checkbox */
.radio-checkbox span {
    width: 20px;
    height: 20px;
    border: 2px solid #333;
    border-radius: 4px; /* checkbox shape */
    display: inline-block;
    position: relative;
}

/* Checked state */
.radio-checkbox input[type="radio"]:checked + span {
    background: #0073e6;
    border-color: #0073e6;
}

/* Checkmark */
.radio-checkbox input[type="radio"]:checked + span::after {
    content: "✓";
    position: absolute;
    color: #fff;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
}
.optionselect{    max-width: 400px;}
.optionselect .card-option{border: none; padding: 0px;}
.optionselect .card-option select{padding: 5px; border-radius: 5px; border: 2px solid #e0e0e0; height: 40px; margin-bottom: 10px;}
input:focus,input:hover{box-shadow: none; outline: none;}
textarea{width: 100%; max-width: 400px; border: none; border-bottom: 1px solid #333;    background: transparent; resize: none;}
.extra-box{background: #eeeeee; padding: 40px; border-radius: 5px;display: flex;
    flex-direction: column;}
.appointment select{height: 40px; width: 180px; border: none; border-bottom: 1px solid #c5c5c5; margin-top: 0px;}
.appointment input{width: 180px;}

.step4 input{max-width: 300px;}
.step4 input[type="checkbox"]{max-width: 20px;}
.step4 .grid-2 .grid-2 input{max-width: 140px;}
.phone-field{position: relative;
    width: 100%;
    max-width: 300px;
    padding-left: 30px;
    border-bottom: 1px solid #e0e0e0;}
    .phone-field input{border:none}
.flag{    position: absolute;
    left: 5px;
    top: 13px;}
    .actions{display: none;}
    .actions.active{display:flex;}


@media screen and (max-width:680px){
  .kenteken-wrap{flex-direction: column;}
  .forgetplate{display: flex; width: fit-content;padding: 15px 15px;}
  .kenteken-wrap{margin-bottom: 20px;}
  .step{padding: 30px 25px;}
  .feature{font-size: 12px;        line-height: 14px;}
  .features{gap: 15px;}
  .card-option img{max-width: 100%;}
  .feature span{width: 22px;;}

/* step 1*/
.step1 .grid{grid-template-columns: 1fr 1fr 1fr;}
.step1 .sizegrid{grid-template-columns: 1fr;        max-width: 350px;}
.grid.multi{grid-template-columns: 1fr 1fr;max-width: 350px;}
.step1 .sizegrid{grid-template-columns: 1fr;        max-width: 350px;}
.card-option .imgwrap1 img{max-width: 100%;}

.step4 input {
    max-width: 209px;
}
}

@media screen and (max-width:480px){
.step1 .grid{grid-template-columns: 1fr 1fr;}
.step1 .sizegrid{grid-template-columns: 1fr;        max-width: 350px;}
.grid-2.appointment{flex-direction: column;}
   .size-box{padding: 0px 10px;    gap: 9px;}
    .size-box img {
    max-height: 54px;
}
.radio-checkbox{font-size: 13px;;}
  .step4 .grid-2 .grid-2 input{max-width: 100%;}    .step4 input {
        max-width: 100%;
    }
     .grid-2, .grid-3{flex-direction: column;}
      .grid-2 .grid-2{flex-direction: row;}
      .extra-box{padding: 20px;}
}

@media screen and (max-width:360px){
      .step1 .grid {
        grid-template-columns: 1fr 1fr;
    }
    .step1 .sizegrid,.grid.multi{grid-template-columns: 1fr;}
    .card-option img{max-height: 45px;}
    .grid-2, .grid-3{flex-direction: column;}
    .extra-box{padding: 10px;}
.step4 .grid-2 .grid-2 input{max-width: 100%;}    .step4 input {
        max-width: 100%;
    }
 
}