/* Register.css */

/* Body Styles */
body {
    background: #f2f8ff;
    color: #263238;
    font-family: 'Noto Sans', sans-serif;
    margin: 0;
    padding: 1em;
    
    @media (min-width: 50em) {
      padding: 2em;
    }
    
    @media (min-width: 90em) {
      padding: 4em;
    }
  }
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
  
  /* Grid Styles */
  .grid {
    display: grid;
    grid-gap: 1em;
    margin: 0;
    padding: 0;
   
    @media (min-width: 60em) {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @media (min-width: 90em) {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  /* Card Styles */
  .register-cards {
    background: #fff;
    border: 1px solid #e2ebf6;
    border-radius: 0.25em;
    cursor: pointer;
    display: flex;
    padding: 1em;
    position: relative;
    transition: all 0.2s;
    
    &:hover {
      border-color: #c4d1e1;
      box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.15);
      transform: translate(-4px, -4px);
    }
  }
  
  .card__image {
    border-radius: 0.25em;
    height: 6em;
    min-width: 6em;
  }
  
  .card__content {
    flex: auto;
    padding: 0 1em;
  }
  
  .register-cards h5 {
    font-weight: 700;
    margin: 0;
  }
  
  .register-cards p {
    color: #546e7a;
    margin: 0;
  }
  
  /* Checkbox Styles */
  .register-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background: #e2ebf6;
    border-radius: 50%;
    height: 2em;
    margin: 0;
    margin-left: auto;
    flex: none;
    outline: none;
    position: relative;
    transition: all 0.2s;
    width: 2em; 
    
    &:after {
      border: 2px solid #fff;
      border-top: 0;
      border-left: 0;
      content: '';
      display: block;
      height: 1em;
      left: 0.625em;
      position: absolute;
      top: 0.25em;
      transform: rotate(45deg);
      width: 0.5em;
    }
    
    &:focus {
        box-shadow: 0 0 0 2px rgba(100, 193, 117, 0.6);
      }
    
    &:checked {
      background: #64c175;
      border-color: #64c175;
    }
  }
  
  .checkbox-control__target {
    bottom: 0;
    cursor: pointer;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  /* SVG Styles */
  .nude {
    fill: #f4f0ed;
  }
  
  .yellow {
    fill: #ffcb65;
  }
  
  .red {
    fill: #f96149;
  }
  
  .sunburn {
    fill: #fe9d7d;
  }
  
  .eggplant {
    fill: #422b42;
  }
  
  .blue {
    fill: #4473e9;
  }
  
  .flamingo {
    fill: #ffb3da;
  }
  
  .violet {
    fill: #4450c7;
  }
  
  .poppy {
    fill: #ffa128;
  }
  
  .orange {
    fill: #ff8e56;
  }