.checkout-page{
  min-height:70vh;
  background:#f3f5f8;
  color:#07152e;
}

.checkout-section{
  padding:42px 0 80px;
}

.checkout-breadcrumb{
  margin-bottom:36px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  color:#697486;
  font-size:13px;
  font-weight:700;
}

.checkout-breadcrumb a{
  color:#697486;
  text-decoration:none;
}

.checkout-breadcrumb a:hover{
  color:var(--red);
}

.checkout-breadcrumb strong{
  color:#07152e;
}

.checkout-heading{
  max-width:760px;
  margin-bottom:38px;
}

.checkout-heading p{
  margin:0 0 7px;
  color:var(--red);
  font-size:13px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.checkout-heading h1{
  margin:0 0 9px;
  color:#07152e;
  font-size:clamp(36px, 5vw, 62px);
  line-height:1;
}

.checkout-heading span{
  color:#697486;
  font-size:16px;
  line-height:1.6;
}

.checkout-layout{
  display:grid;
  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(330px, .8fr);
  align-items:start;
  gap:28px;
}

.checkout-form{
  display:grid;
  gap:22px;
}

.checkout-panel{
  padding:30px;
  border:1px solid #e1e5eb;
  border-radius:14px;
  background:#fff;
  box-shadow:0 12px 32px rgba(7,21,46,.05);
}

.checkout-panel-heading{
  margin-bottom:26px;
  display:flex;
  align-items:flex-start;
  gap:15px;
}

.checkout-panel-heading > span{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#07152e;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.checkout-panel-heading h2{
  margin:0 0 4px;
  color:#07152e;
  font-size:22px;
}

.checkout-panel-heading p{
  margin:0;
  color:#697486;
  font-size:13px;
  line-height:1.5;
}

.checkout-fields{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}

.checkout-field{
  display:grid;
  gap:8px;
}

.checkout-field-full{
  grid-column:1 / -1;
}

.checkout-field > span{
  color:#15233b;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}

.checkout-field input,
.checkout-field select,
.checkout-field textarea{
  width:100%;
  min-height:50px;
  padding:12px 14px;
  border:1px solid #d8dee8;
  border-radius:8px;
  outline:none;
  background:#fff;
  color:#07152e;
  font:inherit;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.checkout-field textarea{
  min-height:110px;
  resize:vertical;
}

.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(230,0,18,.1);
}

.checkout-field[hidden]{
  display:none;
}

.checkout-terms{
  display:flex;
  align-items:flex-start;
  gap:11px;
  color:#4f5b6e;
  font-size:13px;
  line-height:1.55;
  cursor:pointer;
}

.checkout-terms input{
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin-top:2px;
  accent-color:var(--red);
}

.checkout-terms a{
  color:var(--red);
  font-weight:800;
}

.checkout-confirm{
  width:100%;
  min-height:54px;
  margin-top:22px;
  padding:14px 20px;
  border:0;
  border-radius:8px;
  background:var(--red);
  color:#fff;
  font-size:14px;
  font-weight:950;
  text-transform:uppercase;
  cursor:pointer;
  transition:.2s ease;
}

.checkout-confirm:hover:not(:disabled){
  background:#07152e;
}

.checkout-confirm:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.checkout-form-status{
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:8px;
  background:#e6f8ec;
  color:#08722d;
  font-size:13px;
  font-weight:800;
  line-height:1.5;
}

.checkout-form-status.is-error{
  background:#fff0f0;
  color:#a10f18;
}

.checkout-form-status[hidden]{
  display:none;
}

.checkout-summary{
  position:sticky;
  top:24px;
}

.checkout-summary-card{
  padding:28px;
  border-radius:14px;
  background:#07152e;
  color:#fff;
  box-shadow:0 18px 45px rgba(7,21,46,.18);
}

.checkout-summary-heading{
  padding-bottom:20px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid rgba(255,255,255,.15);
}

.checkout-summary-heading p{
  margin:0 0 3px;
  color:#9ba7ba;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.checkout-summary-heading h2{
  margin:0;
  color:#fff;
  font-size:22px;
}

.checkout-edit-cart{
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  font-size:12px;
  font-weight:900;
  text-decoration:underline;
  cursor:pointer;
}

.checkout-summary-items{
  padding:10px 0;
}

.checkout-summary-loading,
.checkout-summary-empty{
  margin:0;
  padding:30px 10px;
  color:#b4becd;
  text-align:center;
  line-height:1.6;
}

.checkout-summary-item{
  padding:16px 0;
  display:grid;
  grid-template-columns:64px minmax(0, 1fr);
  gap:13px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.checkout-summary-item img,
.checkout-summary-placeholder{
  width:64px;
  height:64px;
  padding:5px;
  border-radius:8px;
  background:#fff;
  object-fit:contain;
}

.checkout-summary-placeholder{
  display:grid;
  place-items:center;
  color:#687386;
  font-size:9px;
  font-weight:900;
  text-align:center;
}

.checkout-summary-item h3{
  margin:0 0 4px;
  color:#fff;
  font-size:14px;
  line-height:1.35;
}

.checkout-summary-item p{
  margin:0 0 3px;
  color:#aeb8c7;
  font-size:11px;
  line-height:1.4;
}

.checkout-summary-item strong{
  display:block;
  margin-top:7px;
  color:#fff;
  font-size:13px;
}

.checkout-totals{
  padding-top:18px;
  display:grid;
  gap:12px;
}

.checkout-totals > div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#b7c0ce;
  font-size:13px;
}

.checkout-totals strong{
  color:#fff;
}

.checkout-total-row{
  margin-top:5px;
  padding-top:17px;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.16);
}

.checkout-total-row span{
  color:#fff;
  font-size:16px;
  font-weight:900;
}

.checkout-total-row strong{
  color:#fff;
  font-size:25px;
}

.checkout-delivery-zone{
  margin-top:18px;
  padding:11px 13px;
  border-radius:7px;
  background:rgba(255,255,255,.09);
  color:#dce2eb;
  font-size:12px;
  font-weight:800;
  line-height:1.5;
}

.checkout-delivery-zone[hidden]{
  display:none;
}

.checkout-summary-note{
  margin:18px 0 0;
  color:#97a3b6;
  font-size:11px;
  line-height:1.55;
}

@media (max-width:1000px){
  .checkout-layout{
    grid-template-columns:1fr;
  }

  .checkout-summary{
    position:static;
  }
}

@media (max-width:650px){
  .checkout-section{
    padding:26px 0 55px;
  }

  .checkout-heading{
    margin-bottom:26px;
  }

  .checkout-panel,
  .checkout-summary-card{
    padding:22px;
    border-radius:11px;
  }

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

  .checkout-field-full{
    grid-column:auto;
  }
}