@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

:root {
   --primary: #3825af;
   --primary-hover: #6d5fc2;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: 'Ubuntu', sans-serif;
}

body {
   display: grid;
   place-items: center;
   min-height: 100vh;
   background-color: var(--primary);
   padding: 15px 10px;
}

.wrapper {
   width: 450px;
   height: 288px;
   margin-top: -38px;
   padding: 30px;
   background-color: #FFF;
   border-radius: 8px;
   transition: height 200ms ease;
}
.wrapper.active {
   height: 537px;
   margin-top: 0px;
}
.wrapper .upload-box {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 225px;
   background-color: #d8d8d81c;
   border-radius: 6px;
   border: 2px dashed #afafaf;
   cursor: pointer;
   transition: all 250ms ease-in-out;
}

.wrapper .upload-box:hover {
   border-color: var(--primary-hover);
}

.wrapper.active .upload-box  {
   border: none;
}

.upload-box p {
   margin-top: 20px;
   font-size: 1.1rem;
}

.wrapper.active .upload-box p {
   display: none;
}

.wrapper.active .upload-box img {
   width: 100%;
   height: 100%;
   object-fit: scale-down;
   border-radius: 5px;
}

.upload-box svg path {
   stroke: var(--primary);
}

.wrapper .content {
   margin-top: 28px;
   opacity: 0;
   pointer-events: none;
}
.wrapper.active .content {
   opacity: 1;
   pointer-events: auto;
   transition: opacity 500ms 50ms ease ;
}
.content .row {
   display: flex;
   justify-content: space-between;
}

.content .row .column {
   width: calc(100% / 2 - 15px);
}

.row .column label {
   font-size: 1.1rem;
}

.sizes .column input {
   width: 100%;
   height: 49px;
   margin-top: 7px;
   padding: 0 15px;
   font-size: 1.1rem;
   border-radius: 5px;
   border: 1px solid #AAA;
   outline: none;
}

.sizes .column input:focus-visible {
   padding: 0 14px;
   border: 2px solid var(--primary);
}

.content .checkboxes {
   margin-top: 20px;
}

.checkboxes .column {
   display: flex;
   align-items: center;
}

.checkboxes .column input {
   width: 17px;
   height: 17px;
   margin-inline-end: 9px;
   accent-color: var(--primary);
}

.content .download-btn {
   width: 100%;
   padding-block: 15px;
   margin-block: 30px 10px;
   color: #FFF;
   font-size: 1.1rem;
   text-transform: uppercase;
   border: none;
   border-radius: 5px;
   background-color: var(--primary);
   outline: none;
   cursor: pointer;
   transition: all 250ms ease-in-out;
}
.content .download-btn:hover {
   background-color: var(--primary-hover)
}