@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');

html, input, textarea, select{
  font-family: "Arimo";
  font-optical-sizing: auto;
}
label{
  font-weight: 500;
}

body {

  display: flex;
  flex-direction: column;
}
main {
  align-self: center;
}
h1 {
  padding: 10px;
}

form, .success-container, .error-container {
  background-color: #b1e6d9;
  border-radius: 5px;
  -webkit-box-shadow: 3px 5px 15px 5px rgba(0,0,0,0.18); 
  box-shadow: 3px 5px 15px 5px rgba(0,0,0,0.18);
}
.success-container, .error-container {
  /* margin: 30px; */
  padding: 60px;
}

form {
  display: grid;
  grid-template-areas: 
    "sender recipient"
    "payment payment"
    "submit submit";
  gap: 20px;
  /* background-color: #b1e6d9;
  border-radius: 5px;
  -webkit-box-shadow: 3px 5px 15px 5px rgba(0,0,0,0.18); 
  box-shadow: 3px 5px 15px 5px rgba(0,0,0,0.18); */
  /* justify-content: space-between; */
}
.input-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

input, label, textarea, select, .radio-container, .preview-container {
  margin: 5px 0;
  border:none;
  /* outline: none; */
}
input:not(input[type="radio"]):not(input[type="checkbox"]), textarea, select {
  padding: 5px;
  border-radius: 4px;
  -webkit-box-shadow: 3px 5px 15px 5px rgba(0,0,0,0.18); 
  box-shadow: 3px 5px 15px 5px rgba(0,0,0,0.18);
}

section {
  display: flex;
  flex-direction: column;
  padding: 10px;
  /* width: 85%; */
  border-radius: 8px;

}
#sender-details {
  grid-area: sender;
}
#recipient-details {
  grid-area: recipient;
}

#payment-details {
  grid-area: payment;
  justify-self: center;
}
.section-container {
  display: grid;
  gap: 20px;
}
#sender-container{
  grid-template-areas: 
    "senderfirst senderlast"
    "image image";
  #image-container {
    grid-area: image;
    justify-self: center;
  }
}


.preview-container {
  display: flex;
  justify-content: center;
  line-height: 180px;
  padding: 10px;
  border-radius: 5px;
  min-height: 200px;
  background-color: #efefef;
  -webkit-box-shadow: 3px 5px 15px 5px rgba(0,0,0,0.18); 
  box-shadow: 3px 5px 15px 5px rgba(0,0,0,0.18);

  img {
    max-width: 300px;
    border-radius: 3px;
  }
}
.preview-container.loaded {
  background-color: transparent !important;
  -webkit-box-shadow: none !important; 
  box-shadow: none !important;
}
input[type="file"] {
  display: none;
}
.file-label{
  border-radius: 20px;
  display: inline-block;
  cursor: pointer;
  align-self: center;
  padding: 12px;
  margin: 10px;
  background-color: #efefef;
  -webkit-box-shadow: 3px 5px 15px 5px rgba(0,0,0,0.18); 
  box-shadow: 3px 5px 15px 5px rgba(0,0,0,0.18);
}
.file-label:hover {
  background-color: white;
}
#recipient-container {
  grid-template-areas: 
  ". ."
  "message message"
  "radio radio"
  ". .";
  #message-container {
    grid-area: message;
  }
  #radio-container {
    grid-area: radio;
    display: inline;
  }
}
#payment-container {
  grid-template-areas: 
  ". num num"
  ". . ."
  "terms terms terms";
  justify-self: center;
  #card-number-container {
    grid-area: num;
  }
  #terms-container {
    grid-area: terms;
  }
}

label[for="terms"]{
  display: flex;
  justify-content: space-evenly;
  input{
    display: block;
    padding:0;
    margin: 0;
  }
  border-radius: 10px;
  padding: 10px;
}
#form-submit {
  grid-area: submit;
  justify-self: center;
  max-width: 200px;
  min-width: 200px;
  margin: 20px;

}
input[type="submit"] {
  border-radius:60px !important;
  padding: 20px !important;
  font-size: 14pt;
  font-weight: 600;
  border: none !important;
}

input:required:valid, textarea:required:valid, select:required:valid, label:has(input[type=checkbox]:required:valid) {
  border: 1px solid blue;
}
input:required:invalid, textarea:required:invalid,select:required:invalid, label:has(input[type=checkbox]:required:invalid) {
  border: 1px solid red;
}