/* BizPack direct order form */
.bp-of{ --g:#C7932D; --ink:#17191D; --line:#E2DCCE; --soft:#EFEAE0; --mut:#878D99; }
.bp-of-title{ text-align:center; margin:0; font-size:26px; }
.bp-of-sub{ text-align:center; margin:8px 0 0; color:#6C727C; font-size:15px; line-height:1.7; }
.bp-of-card{ background:#fff; border:1px solid #E7E0D2; border-radius:22px; padding:22px 18px 24px; margin-top:20px; box-shadow:0 16px 40px -16px rgba(23,25,29,.16); }

.bp-of-step{ display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700; color:var(--ink); margin-top:24px; }
.bp-of-step:first-child{ margin-top:0; }
.bp-of-n{ width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-family:'Archivo',sans-serif; }

/* Step 1 - sizes */
.bp-of-sizes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.bp-of-size{ position:relative; display:flex; align-items:center; gap:11px; padding:10px;
  border:1.5px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; margin:0; transition:box-shadow .15s,border-color .15s; }
.bp-of-size input{ position:absolute; opacity:0; pointer-events:none; }
.bp-of-size img{ width:48px; height:48px; object-fit:cover; border-radius:5px; background:#F7F4EE; flex:0 0 auto; }
.bp-of-size-txt{ display:flex; flex-direction:column; line-height:1.35; }
.bp-of-size-txt b{ font-size:15px; font-weight:600; color:var(--ink); }
.bp-of-size-txt em{ font-style:normal; font-size:14px; color:var(--mut); }
.bp-of-size.is-on{ border:2.5px solid var(--g); background:#FDF7EA; padding:9px; box-shadow:0 8px 18px -8px rgba(199,147,45,.55); }
.bp-of-size.is-on .bp-of-size-txt em{ color:#A6771B; font-weight:600; }
.bp-of-tick{ display:none; position:absolute; top:-8px; right:-6px; width:22px; height:22px; border-radius:50%; background:var(--g); }
.bp-of-size.is-on .bp-of-tick{ display:block; }
.bp-of-tick::after{ content:""; position:absolute; left:7px; top:4px; width:5px; height:10px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }

/* Step 2 - quantity */
.bp-of-qty{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.bp-of-qty button{ width:54px; height:54px; border:1.5px solid var(--ink); background:#fff; border-radius:14px;
  font-size:26px; line-height:1; color:var(--ink); cursor:pointer; }
.bp-of-qty button:disabled{ border-color:#E7E2D6; background:#F1EDE3; color:#C4C9D1; cursor:not-allowed; }
.bp-of-qtybox{ flex:1 1 auto; display:flex; align-items:center; gap:8px; height:54px; padding:0 16px;
  border:1.5px solid var(--line); background:#fff; border-radius:14px; }
.bp-of-input{ flex:1 1 auto; border:0; outline:0; background:transparent; font-size:20px; font-weight:800; color:var(--ink);
  font-family:'Archivo',sans-serif; width:100%; -moz-appearance:textfield; }
.bp-of-input::-webkit-outer-spin-button,.bp-of-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.bp-of-qtybox em{ font-style:normal; font-size:15px; color:var(--mut); }
.bp-of-minnote{ margin:10px 0 0; font-size:13.5px; line-height:1.6; color:var(--mut); }
.bp-below-min .bp-of-qtybox{ border-color:#C0392B; }
.bp-below-min .bp-of-minnote{ color:#C0392B; font-weight:600; }

/* Step 3 - delivery */
.bp-of-ship{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.bp-of-shipopt{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:13px 10px; border:1.5px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; margin:0; text-align:center; transition:box-shadow .15s; }
.bp-of-shipopt input{ position:absolute; opacity:0; pointer-events:none; }
.bp-of-shipopt b{ font-size:15px; font-weight:600; color:var(--ink); }
.bp-of-shipopt em{ font-style:normal; font-size:18px; font-weight:700; color:#565B65; font-family:'Archivo',sans-serif; }
.bp-of-shipopt.is-on{ border:2.5px solid var(--g); background:#FDF7EA; padding:12px 9px; box-shadow:0 8px 18px -8px rgba(199,147,45,.55); }
.bp-of-shipopt.is-on b{ font-weight:700; }
.bp-of-shipopt.is-on em{ color:#A6771B; font-weight:800; }

/* Total */
.bp-of-total{ background:var(--ink); border-radius:18px; padding:18px; margin-top:18px; color:#9AA0AC; }
.bp-of-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14.5px; }
.bp-of-row + .bp-of-row{ margin-top:9px; }
.bp-of-row b{ color:#E9E4DA; font-weight:600; font-family:'Archivo',sans-serif; }
.bp-of-rule{ height:1px; background:#2E3238; margin:14px 0; }
.bp-of-grand span{ font-size:16px; font-weight:700; color:#fff; }
.bp-of-grand b{ font-size:26px; font-weight:800; color:var(--g); }

/* Step 4 - fields */
.bp-of-fields{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.bp-of-fields .bp-of-field{ width:100%; border:1.5px solid var(--line); background:#fff; border-radius:14px; height:54px;
  padding:0 16px; font-size:16px; color:var(--ink); font-family:inherit; }
.bp-of-area{ height:92px; padding-top:15px; line-height:1.6; }
.bp-of-field:focus{ border-color:var(--g); outline:none; }
.bp-of-phone{ display:flex; align-items:center; border:1.5px solid var(--line); background:#fff; border-radius:14px; height:54px; padding-left:16px; }
.bp-of-phone i{ font-style:normal; color:#6C727C; padding-right:12px; margin-right:13px; border-right:1px solid var(--line); font-family:'Archivo',sans-serif; }
.bp-of-phone .bp-of-field{ border:0; height:52px; padding-left:0; }

.bp-of-error{ margin:14px 0 0; color:#C0392B; font-weight:600; font-size:14.5px; min-height:0; }
.bp-of-error:empty{ display:none; }
.bp-of-submit{ width:100%; height:62px; margin-top:18px; border:0; border-radius:16px; background:var(--g);
  color:var(--ink); font-size:18.5px; font-weight:800; font-family:inherit; cursor:pointer; box-shadow:0 14px 28px -10px rgba(199,147,45,.6); transition:box-shadow .15s,background .15s; }
.bp-of-submit:hover{ background:#A6771B; color:#fff; }
.bp-of-submit:disabled{ opacity:.5; cursor:not-allowed; }
.bp-of-cod{ margin:14px 0 0; text-align:center; font-size:14.5px; font-weight:600; color:#1D7A4C; }
.bp-of-or{ display:flex; align-items:center; gap:14px; margin:22px 0 18px; color:#A2A8B3; font-size:14px; }
.bp-of-or::before,.bp-of-or::after{ content:""; flex:1 1 auto; height:1px; background:var(--soft); }
.bp-of-wa{ display:flex; align-items:center; justify-content:center; height:56px; border-radius:16px;
  background:#1D7A4C; color:#fff !important; font-size:16px; font-weight:700; text-decoration:none; }
.bp-of-wa:hover{ background:#17603C; color:#fff !important; }

@media (min-width:768px){
  .bp-of-card{ padding:30px 32px 34px; }
  .bp-of-title{ font-size:34px; }
  .bp-of-sizes{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .bp-of-fields{ flex-direction:row; flex-wrap:wrap; }
  .bp-of-fields > *:not(.bp-of-area){ flex:1 1 260px; }
  .bp-of-area{ flex:1 1 100%; }
  .bp-of-submit{ max-width:420px; margin-left:auto; margin-right:auto; display:block; }
  .bp-of-wa{ max-width:420px; margin:0 auto; }
}