/* BMK How To Order v1.0.0 */

.bmk-how-to-order,
.bmk-how-to-order *{
  box-sizing:border-box;
}

.bmk-how-to-order{
  width:100%;
  padding:var(--bmk-hto-section-py,8px) 0;
}

.bmk-hto-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 18px;
}

.bmk-hto-head h2{
  flex:1 1 auto;
  margin:0!important;
  padding:0!important;

  color:var(--bmk-hto-text,#111)!important;

  font-size:var(--bmk-hto-title-size,24px)!important;
  font-weight:850!important;
  line-height:1.15!important;

  text-align:var(--bmk-hto-title-align,left)!important;
}

.bmk-hto-cta{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  flex:0 0 auto;

  color:var(--bmk-hto-accent,#1aa313)!important;

  font-size:12px!important;
  font-weight:800!important;
  line-height:1!important;

  text-decoration:none!important;
}

.bmk-hto-cta svg{
  width:15px;
  height:15px;

  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Desktop reference layout */
.bmk-hto-steps{
  display:grid;
  grid-template-columns:repeat(var(--bmk-hto-desktop-cols,4),minmax(0,1fr));
  gap:var(--bmk-hto-gap,20px);

  width:100%;
}

.bmk-hto-step{
  position:relative;
  min-width:0;

  text-align:center;
}

.bmk-hto-step-top{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  min-height:calc(var(--bmk-hto-circle,72px) + 8px);
}

.bmk-hto-icon-wrap{
  position:relative;
  z-index:2;

  width:var(--bmk-hto-circle,72px);
  height:var(--bmk-hto-circle,72px);
  flex:0 0 var(--bmk-hto-circle,72px);

  display:grid;
  place-items:center;

  border-radius:50%;
  background:var(--bmk-hto-circle-bg,#f2faee);
}

.bmk-hto-icon{
  display:grid;
  place-items:center;

  width:var(--bmk-hto-icon,34px);
  height:var(--bmk-hto-icon,34px);

  color:var(--bmk-hto-accent,#1aa313);
}

.bmk-hto-icon img{
  display:block;

  width:100%;
  height:100%;
  max-width:none;

  object-fit:contain;
  object-position:center;
}

.bmk-hto-icon svg{
  width:100%;
  height:100%;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.bmk-hto-number{
  position:absolute;
  z-index:4;

  right:-1px;
  bottom:-8px;

  display:grid;
  place-items:center;

  width:var(--bmk-hto-number,20px);
  height:var(--bmk-hto-number,20px);

  border:2px solid #fff;
  border-radius:50%;

  background:var(--bmk-hto-accent,#1aa313);
  color:#fff;

  font-size:calc(var(--bmk-hto-number,20px) * .48);
  font-weight:900;
  line-height:1;

  box-shadow:0 2px 5px rgba(0,0,0,.06);
}

.bmk-hto-connector{
  position:absolute;
  z-index:1;

  top:50%;
  left:calc(50% + (var(--bmk-hto-circle,72px) / 2) + 14px);

  width:calc(100% - var(--bmk-hto-circle,72px) - 8px);
  height:2px;

  transform:translateY(-50%);

  background:
    repeating-linear-gradient(
      to right,
      var(--bmk-hto-line,#cfcfcf) 0 6px,
      transparent 6px 12px
    );
}

.bmk-hto-copy{
  margin-top:12px;
  padding:0 4px;
}

.bmk-hto-copy strong{
  display:block;

  color:var(--bmk-hto-text,#111);

  font-size:13px;
  font-weight:800;
  line-height:1.25;
}

.bmk-hto-copy p{
  margin:7px 0 0!important;
  padding:0!important;

  color:var(--bmk-hto-muted,#737373);

  font-size:11px!important;
  font-weight:500;
  line-height:1.45;
}

.bmk-hto-empty{
  padding:20px;

  border:1px dashed #dfe5db;
  border-radius:14px;

  background:#fafbf9;
  color:#8e958b;

  font-size:11px;
  font-weight:650;
  text-align:center;
}

/* Mobile app style: one full step + a hint of the next one */
@media(max-width:767px){
  .bmk-hto-head{
    margin-bottom:14px;
  }

  .bmk-hto-head h2{
    font-size:min(var(--bmk-hto-title-size,24px),20px)!important;
  }

  .bmk-hto-cta{
    font-size:8px!important;
  }

  .bmk-hto-steps{
    display:grid;
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:var(--bmk-hto-mobile-basis,calc(80% - 4px));
    gap:var(--bmk-hto-gap,20px);

    overflow-x:auto;
    overflow-y:hidden;

    padding:1px 2px 8px;

    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .bmk-hto-steps::-webkit-scrollbar{
    display:none;
  }

  .bmk-hto-step{
    scroll-snap-align:start;
  }

  .bmk-hto-connector{
    left:calc(50% + (var(--bmk-hto-circle,72px) / 2) + 10px);
    width:calc(100% - var(--bmk-hto-circle,72px) - 3px);
  }

  .bmk-hto-copy strong{
    font-size:11px;
  }

  .bmk-hto-copy p{
    font-size:9px!important;
  }
}


/* ==========================================================
   BMK How To Order v1.0.1
   Shape / radius / typography controls
   ========================================================== */

.bmk-how-to-order.is-shape-circle .bmk-hto-icon-wrap{
  border-radius:50%!important;
}

.bmk-how-to-order.is-shape-square .bmk-hto-icon-wrap{
  border-radius:var(--bmk-hto-shape-radius,18px)!important;
}

.bmk-hto-copy{
  text-align:var(--bmk-hto-step-align,center)!important;
}

.bmk-hto-step-title{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;

  width:100%!important;
  min-width:0!important;

  margin:0!important;
  padding:0!important;

  color:var(--bmk-hto-text,#111)!important;

  font-size:var(--bmk-hto-step-title-size,13px)!important;
  font-weight:800!important;
  line-height:1.18!important;

  text-align:var(--bmk-hto-step-align,center)!important;
}

.bmk-hto-step-title-line{
  display:block!important;
  width:100%!important;
  min-width:0!important;

  margin:0!important;
  padding:0!important;

  color:inherit!important;
  font:inherit!important;
  line-height:1.18!important;

  text-align:var(--bmk-hto-step-align,center)!important;
}

.bmk-hto-step-title-first{
  white-space:nowrap!important;
}

.bmk-hto-step-title-rest{
  margin-top:2px!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.bmk-hto-copy p{
  font-size:var(--bmk-hto-description-size,11px)!important;
  text-align:var(--bmk-hto-step-align,center)!important;
}

@media(max-width:767px){
  .bmk-hto-copy strong,
  .bmk-hto-step-title{
    font-size:var(--bmk-hto-step-title-size,13px)!important;
  }

  .bmk-hto-copy p{
    font-size:var(--bmk-hto-description-size,11px)!important;
  }
}


/* ==========================================================
   BMK How To Order v1.0.2
   More mobile steps + number badge top-right
   ========================================================== */

/* Step counter sits on top of the icon block, top-right. */
.bmk-hto-number{
  top:-7px!important;
  right:-7px!important;
  bottom:auto!important;
  left:auto!important;

  z-index:8!important;

  box-shadow:0 2px 7px rgba(0,0,0,.12)!important;
}

/* Keep badge visually above both circle and square icon shapes. */
.bmk-hto-icon-wrap{
  overflow:visible!important;
}

/* With many visible steps, keep text compact and cards usable. */
@media(max-width:767px){
  .bmk-hto-steps{
    grid-auto-columns:var(--bmk-hto-mobile-basis,calc(25% - 15px))!important;
  }

  .bmk-hto-step{
    min-width:0!important;
  }

  .bmk-hto-copy{
    padding-left:1px!important;
    padding-right:1px!important;
  }
}


/* ==========================================================
   BMK How To Order v1.0.3
   Mobile connector + no icon layout flash
   ========================================================== */

/* Critical image sizing: uploaded icons can never expand to natural size. */
.bmk-how-to-order .bmk-hto-icon,
.bmk-how-to-order .bmk-hto-icon img{
  width:var(--bmk-hto-icon,34px)!important;
  height:var(--bmk-hto-icon,34px)!important;
  max-width:var(--bmk-hto-icon,34px)!important;
  max-height:var(--bmk-hto-icon,34px)!important;
}

.bmk-how-to-order .bmk-hto-icon img{
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
}

/*
 * On mobile draw the dashed connector from the centre of the
 * current icon towards the centre of the next card. Icon blocks
 * have a higher z-index/background, so the line naturally hides
 * underneath them and is visible only in the gap.
 */
@media(max-width:767px){
  .bmk-hto-step-top{
    overflow:visible!important;
  }

  .bmk-hto-connector{
    top:50%!important;
    left:50%!important;
    right:auto!important;

    width:calc(100% + var(--bmk-hto-gap,20px))!important;
    min-width:18px!important;
    height:2px!important;

    transform:translateY(-50%)!important;

    z-index:0!important;

    display:block!important;
    opacity:1!important;

    background:
      repeating-linear-gradient(
        to right,
        var(--bmk-hto-line,#cfcfcf) 0 6px,
        transparent 6px 12px
      )!important;

    pointer-events:none!important;
  }

  .bmk-hto-icon-wrap{
    position:relative!important;
    z-index:2!important;
  }

  .bmk-hto-number{
    z-index:8!important;
  }
}