/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');


body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  margin: 0 auto;
  width: 90%;
  background-color: none;
  color: #333;
}

h1 {
  text-align: center;
  color: #272727;
  margin-bottom: 20px;
  font-weight:700;
}

#plate-submission {
  width:40%;
  min-width:300px;
  margin-left : auto;
  margin-right: auto;
}

.searchbox-wrap {
  display     : flex; 
  width       : 100%;
  height: 70px;
  margin-left : auto;
  margin-right: auto;

  border-color:black;
  border-width:3px;
  border-style:solid;
  border-radius: 10px;
}

.searchbox-wrap img {
  width:30%;
  max-height:60%;
  margin: auto 0;
  object-fit:contain;
}

.searchbox-wrap input{
    flex                             : 1;
    padding                          : 20px 0px 20px 10px;
    font-size                        : 2em;
    text-transform: uppercase;
    border-radius: 7px 0px 0px 7px;
    width:50%;
    box-shadow                       : none;
    border                           : none;
}

.searchbox-wrap input:focus {
  outline:none;
}

.searchbox-wrap button     span{
      width:100%;
      font-size       : 1em;
      font-weight     : 300 ;
      color           : #fff;
      background-color: #21b6a7;
      transition-duration: 250ms;
      padding:20px 10px;
      
      border-radius   : 7px;
      box-shadow      : 2px 4px 6px rgba(0, 0, 0, 0.19);
    }

.searchbox-wrap button span:hover{
  background-color: #12978a;
  box-shadow      : 2px 2px 4px rgba(0, 0, 0, 0.19);
}

.searchbox-wrap   button{
    width:20%;
    padding-right                     : 10px;
    padding-left:0px;
    background-color                  : #fff;
    border-radius: 0px 7px 7px 0px;
    border                            : none;
  }

legend {
  text-align: center;
  margin: 0 auto;
  padding: 10px 20px;
}

fieldset {
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

fieldset input {
  display: none;
}

.product-selection label img {
  height: 75px;
  margin-bottom: 5px;
}

.img-placeholder {
  background-color: #e9ecef; border: 1px dashed #ced4da;
  display: flex; align-items: center; justify-content: center;
  color: #888; font-size: 0.7em; text-align: center; margin-bottom: 5px;
}

.product-selection .img-placeholder {
  max-width: 80px; max-height: 75px;
  width:10vw; height:10vw;
}

.selection-display .img-placeholder, .selection-display img {
  max-width: 110px; max-height: 110px;
  width:15vw; height:15vw;
  margin-bottom: 5px;
}

input[type="radio"]:checked + label {
  background-color: #21b6a781;
}

input[type="radio"]:not(:checked) + label:hover {
  background-color: #21b6a781;
}

p {
  margin: 1px;
  font-size: 12px;
}

em {
  font-size: 14px;
  margin: 3px;
  font-weight: 600;
  font-style: normal;
}

input[type="radio"] + label {
    transition-duration: 250ms;
}

.selection-display {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:2em;
}

.selection-display label {
  text-align: center;
  width:100%;
  padding: 20px 0px;
}

.display-section {
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 30px;
}

#oil-options {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  height:100%;
}


#selected-oil, #selected-filter {
  background-color: #21b6a7;
  height:100%;
  border-radius:30px;
  margin: 10px 0px;
}

#selected-oil {
  grid-column: span 2;
}


#regular + label {
  border-bottom-left-radius: 30px;
}

#upsize + label {
  border-bottom-right-radius: 30px;
}



#confirmation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  grid-column:2;
}


#confirmation button{
      padding         : 10px 15px;
      font-size       : 1em;
      font-weight     : 300 ;
      color           : #fff;
      background-color: #21b6a7;
      transition-duration: 250ms;
      border:none;
      
      border-radius   : 7px;
    }

#confirmation button:hover{
  background-color: #12978a;
}


h1 {
  margin-top:3em;
  margin-bottom:.5em;
}

#vehicle-stats {
  width:100%;
  margin: 0 auto;
  text-align:center;
  font-size: 1.2em;
  margin-bottom:2em;
}


#vehicle-types {
  display:flex;
  flex-direction: column;
  width:100%;
}

#vehicle-types button {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  border:none;
  font-size: 1em;
  margin-bottom:1em;
}

#price-display {
  display:flex;
  flex-direction: row;
  align-items:flex-end;
}

#price-display p {
  margin-bottom:23px;
}