.xpromo-box,
.xpromo-box *{box-sizing:border-box}

.xpromo-box{
  margin:16px 0 0;
  padding:16px;
  border:1px solid rgba(211,217,226,.82);
  border-radius:17px;
  background:rgba(247,249,251,.78);
  color:#111827;
}

.xpromo-box__heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.xpromo-box__heading strong{display:block;font-size:15px;line-height:1.2;font-weight:800}

.xpromo-box__icon{
  flex:0 0 32px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:11px;
  background:rgba(38,178,74,.10);
  color:#15913a;
  font-size:14px;
  font-weight:800;
}

.xpromo-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.xpromo-form[hidden],.xpromo-applied[hidden]{display:none!important}

.xpromo-form input{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 12px;
  border:1px solid #dce1e8;
  border-radius:13px;
  outline:0;
  background:rgba(255,255,255,.82);
  color:#111827;
  font:600 13px/1 Rubik,system-ui,-apple-system,"Segoe UI",sans-serif;
  text-transform:uppercase;
  transition:border-color .16s ease,background-color .16s ease;
}

.xpromo-form input:focus{border-color:rgba(38,178,74,.72);background:#fff}

.xpromo-form button{
  height:42px;
  padding:0 14px;
  border:1px solid rgba(38,178,74,.34);
  border-radius:13px;
  background:rgba(38,178,74,.12);
  color:#14883a;
  font:800 13px/1 Rubik,system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}

.xpromo-form button:hover{background:rgba(38,178,74,.20);border-color:rgba(38,178,74,.52);color:#0f7130}
.xpromo-box.is-loading{pointer-events:none;opacity:.7}

.xpromo-applied__summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
.xpromo-applied__summary > strong{flex:0 0 auto;color:#15913a;font-size:15px;line-height:1.2;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.xpromo-applied__codes{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:7px;min-width:0;margin:0}

.xpromo-code{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:0 5px 0 10px;
  border:1px solid rgba(38,178,74,.24);
  border-radius:10px;
  background:rgba(38,178,74,.08);
  color:#147b34;
}

.xpromo-code b{
  display:inline-flex;
  align-items:center;
  height:22px;
  font-size:11px;
  line-height:22px;
  font-weight:800;
  letter-spacing:.035em;
}
.xpromo-code button{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:7px;background:transparent;color:#667085;font-size:17px;line-height:1;cursor:pointer}
.xpromo-code button:hover{background:rgba(255,255,255,.75);color:#d92d20}

.xpromo-message{min-height:0;margin:8px 0 0;color:#667085;font-size:11px;line-height:1.3}
.xpromo-message:empty{display:none}
.xpromo-message.is-error{color:#b42318}
.xpromo-message.is-success{color:#14883a}

body.xport-checkout-preview-v2-active .xpc-order-summary .xpromo-box{margin:0 22px 18px}

@media(max-width:520px){
  .xpromo-box{padding:14px}
  .xpromo-form{grid-template-columns:1fr}
  .xpromo-form button{width:100%}
  body.xport-checkout-preview-v2-active .xpc-order-summary .xpromo-box{margin:0 16px 16px}
}