@use "@/common/styles/colors" as *

.submission-page
  min-height: 100vh
  padding: 8rem 4rem 4rem
  display: flex
  justify-content: center

.submission-container
  width: 100%
  max-width: 900px

.submission-header
  text-align: center
  margin-bottom: 3rem
  
  h1
    font-size: 2.5rem
    font-weight: 700
    margin-bottom: 0.75rem
    
  p
    font-size: 1.125rem
    color: $text-secondary

.submission-content
  display: grid
  grid-template-columns: 1fr 320px
  gap: 2rem
  align-items: start

.submission-form
  background: $background-lighter
  border: 1px solid $border-color
  border-radius: 16px
  padding: 2rem
  display: flex
  flex-direction: column
  gap: 1.5rem

.form-group
  display: flex
  flex-direction: column
  gap: 0.5rem
  
  label
    font-size: 0.9375rem
    font-weight: 500
    color: $text
    
    .optional
      font-weight: 400
      color: $text-muted
      
  input, select, textarea
    padding: 0.875rem 1rem
    background: $background
    border: 1px solid $border-color
    border-radius: 8px
    color: $text
    font-size: 1rem
    font-family: inherit
    transition: border-color 0.2s ease
    
    &::placeholder
      color: $text-muted
      
    &:focus
      outline: none
      border-color: $primary
      
  select
    cursor: pointer
    
  textarea
    resize: vertical
    min-height: 100px

.form-checkbox
  display: flex
  align-items: flex-start
  gap: 0.75rem
  
  input[type="checkbox"]
    width: 18px
    height: 18px
    margin-top: 2px
    accent-color: $primary
    cursor: pointer
    
  label
    font-size: 0.9375rem
    color: $text-secondary
    cursor: pointer
    line-height: 1.5

.guidelines
  background: $background-lighter
  border: 1px solid $border-color
  border-radius: 16px
  padding: 1.5rem
  position: sticky
  top: 6rem

.guidelines-header
  display: flex
  align-items: center
  gap: 0.75rem
  margin-bottom: 1rem
  padding-bottom: 1rem
  border-bottom: 1px solid $border-color
  
  svg
    color: $blue
    font-size: 1.125rem
    
  h3
    font-size: 1rem
    font-weight: 600
    margin: 0

.guidelines ul
  list-style: none
  display: flex
  flex-direction: column
  gap: 0.75rem
  
  li
    font-size: 0.875rem
    color: $text-secondary
    line-height: 1.5
    padding-left: 1.25rem
    position: relative
    
    &::before
      content: ""
      position: absolute
      left: 0
      top: 8px
      width: 5px
      height: 5px
      background: $primary
      border-radius: 50%

.success-state
  text-align: center
  display: flex
  flex-direction: column
  align-items: center
  gap: 1.5rem
  padding: 4rem 2rem
  
  .success-icon
    width: 80px
    height: 80px
    background: rgba($primary, 0.1)
    border-radius: 50%
    display: flex
    align-items: center
    justify-content: center
    
    svg
      font-size: 2.5rem
      color: $primary
      
  h1
    font-size: 2rem
    font-weight: 700
    
  p
    font-size: 1.125rem
    color: $text-secondary
    max-width: 400px

@media (max-width: 900px)
  .submission-content
    grid-template-columns: 1fr
    
  .guidelines
    position: static

@media (max-width: 640px)
  .submission-page
    padding: 6rem 1.5rem 3rem
    
  .submission-header h1
    font-size: 2rem
    
  .submission-form
    padding: 1.5rem