@import '../components/cart-checkout.css';
@import '../components/select.css';


section{
  position:fixed;
  justify-content: space-between;

}

form{
  width:100%;
}

a:hover{
  cursor: pointer;
}

.checkout-flex {
  display: flex;
  gap:var(--spacing-tiny);
  flex-direction: start;
}

.column {
  width:calc(100% / 3);
  display:flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  gap:var(--spacing-tiny);
  height: fit-content;
}

/*INFORMATIONS COLUMN ----------------*/
/*------------------------------------*/


.personal-shipping .field{
  border:1px solid var(--color-second);
  border-top:none;
  padding: 0.4vh;
  font-size:var(--font-size-big);
  font-family:var(--font-light);
}

.personal-shipping .field:nth-child(6),
.personal-shipping .field:nth-child(8){
  margin-top:var(--spacing-medium);
}

.personal-shipping .field:nth-child(1),
.personal-shipping .field:nth-child(6),
.personal-shipping .field:nth-child(9){
  border-top:1px solid var(--color-second);
}

.personal-shipping .field label{ display:none; }
.personal-shipping .field:nth-child(8) label{ display:flex;   font-size:var(--font-size-mid); cursor:pointer }

.personal-shipping .field:nth-child(8),
.payment-methods .field:nth-child(1) {
  border: none;
  padding: 0.4vh 0 1vh 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

input{
  all: unset ;
}

.personal-shipping input,
.personal-shipping textarea{
  width:100%;
}

.personal-shipping input:-webkit-autofill,
.personal-shipping input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}



.personal-shipping .field:nth-child(8) input, 
.payment-methods .field:nth-child(1) input  {
  all: revert;
  margin: 0;
  margin-right: 5px;
}

.personal-shipping .field:nth-child(8) input[type="checkbox"], 
.payment-methods .field:nth-child(1) input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--color-main);
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.personal-shipping .field:nth-child(8) input[type="checkbox"]:checked,
.payment-methods .field:nth-child(1) input[type="radio"]:checked {
  background-color: var(--color-main);
}

button{
  appearance: none; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  background-color:transparent; 
  border: 1px solid var(--color-main); 
  padding:calc(var(--spacing-tiny) / 2);
  font-family:var(--font-thin);
  font-size: var(--font-size-big);
  font-weight: normal;
  color:var(--color-main);
  cursor: pointer;
  width:fit-content;
  text-transform:uppercase;
}

button:hover{
  background-color: var(--color-main);
  color: white;
}


.condition--active p {
  color: green;
}


@media screen and (max-width: 1080px) {

    .content {
        height: fit-content;
        min-height: calc(var(--real-vh, 1vh) * 100);
    }

    .checkout-flex {
      display: flex;
      flex-direction:column;
      height:auto;
      gap:var(--spacing-medium);
    }  

    .checkout-flex .column, .checkout-flex .column:nth-child(3) {
      width:100%;
      position:relative;
    }

    .column:nth-child(3){
      margin-bottom: var(--spacing-big);
    }


}