@import './styles.css';

body {
    background: url('../img/background.webp') no-repeat center center fixed;
    background-size: cover;
}

.my-container {
    width: 100dvw;
    height: 100dvh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}


.img-container {
    display: flex;
    justify-content: center;
    align-items: center;
	flex-shrink: 1;
	min-width: 0;
}



form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-color: var(--clr-white);
    border-radius: var(--border-radius) 0 0 var(--border-radius);

    h3 {
        color: var(--clr-black);
        font-size: 1.3rem;
        text-transform: uppercase;
    }
}

#target-user {
    /* border-top: 1px solid var(--clr-blue); */
    border-bottom: 3px solid var(--clr-blue);
    /* border-right: 2px solid var(--clr-blue); */
    /* border-left: 2px solid var(--clr-blue); */
    /* background-color: var(--clr-gray-light); */
    /* color: var(--clr-white); */
    /* border-radius: 7px 7px 0 0; */
}

.input-container {
    width: 18rem;

    input,
    select {
        padding: 0.5rem 0.5rem;
        font-family: "Nunito", sans-serif;
        border-bottom: 1px solid var(--clr-gray-dark);
        color: var(--clr-black);
        font-size: 1rem;
        width: inherit;

        &::placeholder {
            color: var(--clr-black);
        }
    }
    select {
        background-color: var(--clr-white);

        &:invalid {
            border-color: 'red';
        }
    }
}

.btns-container {
    width: 18rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;

    .btn {
        padding: 0.7rem 2rem;
        font-family: "Nunito", sans-serif;
        font-weight: bold;
        border-radius: var(--border-radius);
        text-transform: uppercase;
        cursor: pointer;
    }

    #btn-skip {
        background-color: var(--clr-gray-light);
        color: var(--clr-gray-dark);
    }

    #btn-submit {
        background-color: var(--clr-blue);
        color: var(--clr-white);
    }
}

#counter {
    position: absolute;
    background-color: var(--clr-white);
    bottom: 5%;
    translate: -50% 0;
    left: 25%;
    padding: 1rem;
    width: 18rem;
    border-radius: var(--border-radius);

    h3 {
        border-bottom: 1px solid var(--clr-blue);
        margin-bottom: 0.5rem;
    }

    .contador-container {
        display: flex;
        border-bottom: 1px solid var(--clr-gray-light);
        padding-block: 5px;
    }

    span {
        display: inline-block;
        margin-left: auto;
    }
}

@media (max-width: 700px) {
    .my-container {
        grid-template-columns: 1fr;
    }

    body {
        /* padding-bottom: 13rem; */
    }

    form {
        padding-bottom: 13rem;
        padding-top: 3rem;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .img-container {
        padding-block: 2rem;
    }

    #counter {
        display: none;
        left: 50%;
        bottom: 0;
        /* bottom: -230px; */
        /* bottom: 20px; */
        border: 1px solid var(--clr-blue);
    }
	
	#video {
        display: none;
        left: 50%;
        bottom: 0;
        /* bottom: -230px; */
        /* bottom: 20px; */
        border: 1px solid var(--clr-blue);
    }
}

/* Layout del header: imagen + contador */
.header-container {
  width: 100%;
  display: flex;
  flex-direction: column;    /* logo arriba, contador abajo */
  align-items: center;  
  align-items: center;
  justify-content: center;    /* o space-between si quieres extremos */
  gap: 10%;                  /* separación entre logo y contador */
  flex-wrap: wrap;            /* permite que pasen a segunda línea si no caben */
}

/* Imagen responsiva y sin solaparse */
.img-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Evitar solapes por posiciones absolutas */
.img-container,
#counter {
  position: relative; /* importante: NO absolute/fixed aquí */
  #padding: 15px;
  margin-top: 20px;
  justify-content: center !important;  
  align-items: center !important;  
}

/* Estética opcional del contador */
#counter {
  #padding: 12px 16px;
  margin-left: -100px;
  margin-top: 20px;
  align-items: center;
  background: #fff;
  justify-content: center; 
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);  
}

/* En pantallas chicas, apilar verticalmente */
@media (max-width: 640px) {
  .header-container {
    flex-direction: column;    /* logo arriba, contador abajo */
    align-items: center;
  }
  #counter {
    width: 100%;
    max-width: 420px;          /* opcional */
  }
}




/* Cada bloque interno (video, logo, contadores) */
.block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;      /* centra elementos internos */
  text-align: center;
}

.blockv {
  width: 280%;
  display: flex;
  flex-direction: column;
  align-items: center;      /* centra elementos internos */
  text-align: center;
}

.blockk {
  width: 100%;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  #align-items: center;      /* centra elementos internos */
  #text-align: center;  
  background: #fff;
  justify-content: center; 
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}


/* Responsive YouTube */
.video-wrap {
  width: 100%;
  max-width: 700px;         /* limita el ancho del video */
  aspect-ratio: 16 / 9;     /* mantiene proporción */
  position: relative;
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Opcional: estilo para filas de contador */
.contador-container {
  margin: 4px 0;
  font-size: 1rem;
}

.parent{
  position: relative;
  min-height: 100vh;            /* o un alto fijo */
}

.central{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 800px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 106px;
}

.contador-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px solid #eef0f3; /* opcional: línea entre filas */
}
.contador-container:last-child {
  border-bottom: none;
}

.titulo-accesos {
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 5px;                /* separa el texto de la línea */
  border-bottom: 1px solid #d9dde3;   /* línea gris debajo */
  text-align: left;
}