/* CSS Reset - A more modern and concise version 
* Many thanks to: 
* Josh Comeau - https://www.joshwcomeau.com/css/custom-css-reset/
* Kevin Powell - https://youtu.be/eWmDW4zEXt4?si=S94B0BbGfmo5VZsq/
* Andy Bell - https://piccalil.li/blog/a-more-modern-css-reset/
* Ire Aderinokun - https://bitsofco.de/my-css-reset-base/
*/

/* Remove default margin */
* {
  margin: 0;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Body defaults rules */
body {
  line-height: 1.5;
  min-height: 100vh;
}

/* Typography tweaks */
/* Remove built-in form typography styles */
input, 
button, 
textarea, 
select {
  font: inherit;
}

/* Typography tweaks */
/* Avoid text overflows */
p, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
  overflow-wrap: break-word;
}

/* Typography tweaks */
/* Balance the number of words*/
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* Reset specific element styles */
ol,
ul {
  list-style: none;
  padding: 0;
}

img,
picture, 
video, 
canvas, 
svg {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
}

a,
a:visited {
  color: inherit;
}

/* Basic styles */
.page {
  background-color: hsl(148, 38%, 91%);
  color: hsl(187, 24%, 22%);
  font-family: "Karla", sans-serif;
  position: relative;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 1440px;
  min-height: 100vh;
  padding: 128px 80px;
  width: 100%;
}

fieldset {
  border: none;
  padding: 0;
}

legend {
  margin-bottom: 16px;
  padding: 0;
}

input[type="checkbox"] {
  accent-color: hsl(169, 82%, 27%);
  height: 24px;
  width: 24px;
}

/* The snackbar - position it at the top and in the middle of the screen */
.snackbar {
  background-color: hsl(187, 24%, 22%); 
  border-radius: 12px;
  left: 50%;
  padding: 24px;
  position: fixed; /* Sit on top of the screen */
  top: -500px;
  transform: translateX(-50%);
  visibility: hidden;
  width: 450px;
  z-index: 1;
}

.snackbar__box {
  color: hsl(0, 0%, 100%);
  display: flex;
  font-weight: bold;
  font-size: 1.125rem;
  gap: 10px;
}

.snackbar__copy {
  color: hsl(148, 38%, 91%);
  margin-top: 10px;
}

/* Show the snackbar */
.show {
  animation: fadein 0.5s 0.5s forwards, fadeout 0.5s 5s forwards;
  visibility: visible; 
}

/* Animations to fade the snackbar in and out */
@keyframes fadein {
  from {top: -500px; opacity: 0;}
  to {top: 20px; opacity: 1;}
}

@keyframes fadeout {
  from {top: 20px; opacity: 1;}
  to {top: -500px; opacity: 0;}
} 

/* Page main */
.page-main {
  display: flex;
  flex-basis: 736px;
}

/* Page main form */
.page-main__form {
  background-color: hsl(0, 0%, 100%);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
}

.page-main__form-title {
  font-size: 2rem;
  margin-bottom: 32px;
}

/* Page main form box */
.page-main__form-box {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.page-main__form-box:nth-of-type(1),
.page-main__form-box:nth-of-type(2),
.page-main__form-box:nth-of-type(3) {
  margin-bottom: 24px;
}

.page-main__form-box:nth-of-type(4) {
   margin-bottom: 40px;
}

/* Page main form box item */
.page-main__form-box-item {
  flex: 1;
}

.page-main__form-field {
  border-radius: 8px;
  border: 1px solid hsl(186, 15%, 59%);
  padding: 12px 24px;
}

.page-main__form-field:focus {
  border: 1px solid hsl(169, 82%, 27%);
  outline: none;
}

/* Page main form box item - just-validate error state */
.just-validate-error-label {
  margin-top: 8px;
}

#radio-group .just-validate-error-label {
  flex: 100%;
  margin-top: -8px;
}

.just-validate-error-field {
  border: 1px solid hsl(0, 66%, 54%);
  color: #e53f3f;
}

.just-validate-error-field:focus {
  border: 1px solid hsl(0, 66%, 54%);
  color: #e53f3f;
}

/* Page main form box item - label */
.page-main__form-label--box {
  align-items: center;
  display: flex;
  gap: 10px;
  font-size: 1.125rem;
}

.page-main__form-label--box:has(.page-main__form-radio-inp:checked) {
  background-color: hsl(148, 38%, 91%);
  border: 1px solid hsl(169, 82%, 27%);
}

/* Page main form box item - inputs */
.page-main__form-text-inp,
.page-main__form-email-inp,
.page-main__form-message {
  margin-top: 8px;
  width: 100%;
}

.page-main__form-radio-inp {
  height: 21px;
  width: 20px;
}

.page-main__form-radio-inp:checked {
  -webkit-appearance: none;
  appearance: none;
  background-image: url(assets/images/icon-radio-selected.svg);
  background-color: #FFFFFF;
  border-radius: 50%;
  margin: 0;
  height: 21px;
  width: 20px;
}

.page-main__form-message {
  min-height: 105px;
  resize: vertical;
}

.page-main__form-submit {
  width: 100%;
}

.page-main__form-checkbox {
  margin-right: 10px;
  position: relative;
  top: 5px;
}

.btn {
  background-color: hsl(169, 82%, 27%);
  border: none;
  border-radius: 8px;
  color: hsl(0, 0%, 100%);
  cursor: pointer;
  font-weight: bold;
  font-size: 1.125rem;
  padding: 16px 40px;
  transition: background-color .3s, transform .3s;
}

.btn:hover {
  background-color: hsl(187, 24%, 22%);
}

.btn:active {
  background-color: hsl(187, 24%, 22%);
  transform: scale(0.99);
}

/* Responsive style */
@media (max-width: 767px) {
  .container {
    padding: 32px 16px;
  }
  
  .snackbar {
    width: 80%;
  }
  
  .page-main__form {
    padding: 24px;
  }
  
  .page-main__form-box-item {
    flex: 100%;
  }
  
  .page-main__form-message {
    min-height: 240px;
  }
}