@charset "uft-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, input, select, button, option {
    font-family: 'Inter', sans-serif;
    background-color: #09090B;
    color: #FAFAFA;

    line-height: 120%;
    letter-spacing: -0.02em;
}

/* app */
#app {
    padding: 40px 20px;
    /* Largura da tela de alguns celulares: 320px */
    max-width: 320px;
    margin: auto;

    border-radius: 8px;
}

/* form */
#place {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 22px 16px;

    font-size: 14px;
    margin-bottom: 32px;
}

input, select {
    /* Tudo que foi definido antes pelo HTML ou CSS e retira as propriedades */
    all: unset;
}

input, select, button {
    width: 100%;
}

.fields {
    /* Deixa um elemento abaixo do outro */
    display: grid;
    /* Espacamento entre os elementos */
    gap: 8px;
}

.field-wrapper {
    /* Espacamento dentro da caixa app */
    padding: 18px;
    background-color: #09090B;
    border: 1px solid #27272A;
    border-radius: 8px;
    
    /* Deixa um elemento ao lado do outro (icone e placeholder) */
    /* Permite o uso do GAP para espaçamento */
    display: flex;
    gap: 10px;
    align-items: center;
}

.field-wrapper:focus-within {
    /* Em foco adiciona a borda - "marca o campo" */
    /* Ajuda na acessibilidade com o uso do TAB para mudar os campos em foco */
    outline: 2px solid yellowgreen;
}

button {
    margin-top: 12px;
    border: none; /* Retira a borda padrão do botão */
    padding: 12px 20px;
    background-color: #AFF445;
    border-radius: 8px;

    font-weight: 500;
    font-size: 16px;

    color: #132F00;
}

.card-bg {
    background: #18181B;
    box-shadow:
        0px 8px 8px rgba(0, 0, 0, 0.1),
        0px 4px 4px rgba(0, 0, 0, 0.1),
        0px 2px 2px rgba(0, 0, 0, 0.1),
        0px 0px 0px 1px rgba(0, 0, 0, 0.1),
        inset 0px 0px 0px 1px rgba(255, 255, 255, 0.03), 
        inset 0px 1px 0px rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

/* main */
main {
    margin-top: 32px;
}

h1 {
    text-align: center;
    font-weight: 600;
    font-size: 24px;

    margin-bottom: 24px;
}

section {
    display: grid;
    gap: 10px;
}

section input[type="checkbox"] {
    position: absolute; 
    /* Tentará se colocar no tamanho da tela para evitar isso o card
     * tem que ter a posição RELATIVE (ele está dentro do card)
    */
    inset: 0; /* Preenche a caixa onde ele está - o input preenche o card */
}

section .card-bg {
    position: relative;
    padding: 10px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Dentro do card tem algo que esteja 'checked'?
 * Se sim, coloque uma borda de 2px no elemento
 */
section .card-bg:has(:checked) .active,
section .card-bg .inactive {
    display: block;
}

section .card-bg:has(:checked) .inactive,
section .card-bg .active {
    display: none;
}

section .card-bg > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

time {
    font-size: 14px;
    color: #A1A1AB;
    text-align: right;
}

time.full {
    display: none;
}


@media (width > 1024px) {
    #app {
        display: flex;
        max-width: 960px;
        gap: 32px;
    }

    main {
        margin-top: 0;
        flex: 1;
    }

    h1 {
        text-align: left;
    }

    time.full {
        display: block;
    }

    time.short {
        display: none;
    }
}

section .card-bg {
    /* Chamar a animacao criada e coloca um tempo para execução */
    animation: appear 300ms;
}

/* animação */
@keyframes appear {
    from {
        opacity: 0;
    }
}