/* DETAL AI — STOREFRONT M3.6 PURCHASE */

.sf36-purchase{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid #eaecf0;
}

.sf36-title{
  margin:0 0 15px;
  font-size:20px;
  line-height:1.35;
  color:#101828;
}

.sf36-grid{
  display:grid;
  grid-template-columns:180px minmax(260px,1fr);
  gap:14px;
  align-items:start;
}

.sf36-field label{
  display:block;
  margin-bottom:6px;
  color:#475467;
  font-size:13px;
  font-weight:700;
}

.sf36-field input,
.sf36-field select{
  width:100%;
  box-sizing:border-box;
  min-height:44px;
  border:1px solid #d0d5dd;
  border-radius:10px;
  background:#fff;
  padding:9px 11px;
  font:inherit;
  color:#101828;
}

.sf36-hint{
  margin-top:5px;
  color:#667085;
  font-size:12px;
}

.sf36-total-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:16px;
  padding:14px 0;
  border-top:1px solid #f2f4f7;
  border-bottom:1px solid #f2f4f7;
  color:#475467;
}

.sf36-total-row strong{
  color:#101828;
  font-size:20px;
}

.sf36-note{
  margin-top:12px;
  color:#667085;
  font-size:13px;
  line-height:1.45;
}

.sf36-actions{
  margin-top:15px;
}

.sf36-actions .sf35-btn{
  min-width:180px;
}

.sf36-result{
  margin-top:14px;
  line-height:1.5;
}

.sf36-success{
  padding:14px;
  border:1px solid #abefc6;
  border-radius:12px;
  background:#ecfdf3;
  color:#067647;
}

.sf36-error{
  padding:14px;
  border:1px solid #fecdca;
  border-radius:12px;
  background:#fff6f5;
  color:#b42318;
}

.sf36-message,
.sf36-loading{
  padding:14px 0;
  color:#667085;
  line-height:1.5;
}

.sf36-order-number,
.sf36-reserve-time{
  margin-top:6px;
}

.sf36-orders-btn{
  margin-top:12px;
}

.sf36-secondary{
  margin-top:10px;
  background:#fff;
  color:#101828;
}

.sf36-secondary:hover,
.sf36-secondary:focus{
  background:#f9fafb;
  color:#101828;
}

@media(max-width:680px){
  .sf36-grid{
    grid-template-columns:1fr;
  }

  .sf36-actions .sf35-btn,
  .sf36-orders-btn,
  .sf36-secondary{
    width:100%;
  }

  .sf36-total-row{
    align-items:flex-start;
    flex-direction:column;
  }
}