/* ===== BODY ===== */

body{
  margin:0;
  padding:0;

  background:#050505;

  color:#ccc;

  font-family:'Cormorant Garamond', serif;
}

/* ===== VOLVER ===== */

.back-button{
  position:fixed;

  top:25px;
  left:25px;

  color:#777;

  text-decoration:none;

  font-family:'Inconsolata', monospace;

  letter-spacing:2px;

  transition:0.3s;
}

.back-button:hover{
  color:#fff;
}

/* ===== CONTENEDOR ===== */

.checkout-container{
  max-width:1200px;

  margin:auto;

  padding:80px 30px;
}

/* ===== TITULO ===== */

.checkout-container h1{
  text-align:center;

  font-size:3rem;

  letter-spacing:8px;

  margin-bottom:60px;

  font-family:'Inconsolata', monospace;

  color:#fff;
}

/* ===== GRID ===== */

.checkout-grid{
  display:grid;

  grid-template-columns:1fr 420px;

  gap:40px;
}

/* ===== PANEL ===== */

.checkout-form,
.checkout-summary{
  background:#0d0d0d;

  border:1px solid rgba(255,255,255,0.06);

  padding:35px;
}

/* ===== SUBTITULOS ===== */

.checkout-form h2,
.checkout-summary h2{
  margin-top:0;

  margin-bottom:30px;

  color:#999;

  font-family:'Inconsolata', monospace;

  letter-spacing:3px;
}

/* ===== INPUTS ===== */

input{
  width:100%;

  box-sizing:border-box;

  background:#050505;

  border:1px solid rgba(255,255,255,0.08);

  color:#ccc;

  padding:16px;

  margin-bottom:20px;

  outline:none;

  font-family:'Inconsolata', monospace;
}

input:focus{
  border-color:#5a0000;
}

/* ===== DOBLE INPUT ===== */

.double-input{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:15px;
}

/* ===== BOTON ===== */

.buy-btn{
  width:100%;

  padding:18px;

  background:#120000;

  border:1px solid #5a0000;

  color:#fff;

  font-family:'Inconsolata', monospace;

  letter-spacing:3px;

  cursor:pointer;

  transition:0.3s;
}

.buy-btn:hover{
  background:#5a0000;
}

/* ===== ITEMS ===== */

.checkout-item{
  display:flex;

  gap:15px;

  margin-bottom:20px;

  border-bottom:1px solid rgba(255,255,255,0.06);

  padding-bottom:20px;
}

.checkout-item img{
  width:90px;
  height:110px;

  object-fit:cover;
}

/* ===== INFO ===== */

.checkout-info h3{
  margin:0;

  font-size:1rem;

  letter-spacing:2px;

  font-family:'Inconsolata', monospace;
}

.checkout-info p{
  color:#777;

  margin-top:10px;
}

/* ===== TOTAL ===== */

.total-box{
  display:flex;

  justify-content:space-between;

  margin-top:30px;

  font-size:1.2rem;

  border-top:1px solid rgba(255,255,255,0.08);

  padding-top:20px;

  font-family:'Inconsolata', monospace;
}

/* ===== RESPONSIVE ===== */

@media (max-width:900px){

  .checkout-grid{
    grid-template-columns:1fr;
  }

}