.bd-how-order-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);
  border:1px solid rgba(148,163,184,.18);
  border-radius:28px;
  padding:42px 22px 34px;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
}

.bd-how-order-decor{
  position:absolute;
  border-radius:999px;
  opacity:.65;
  pointer-events:none;
}

.bd-how-order-decor-left{
  width:38px;
  height:38px;
  left:20px;
  top:22px;
  background:#e8eef4;
}

.bd-how-order-decor-left-small{
  width:28px;
  height:28px;
  left:68px;
  top:48px;
  background:#cfe0ec;
}

.bd-how-order-decor-right{
  width:36px;
  height:36px;
  right:22px;
  top:20px;
  background:#ddeaf1;
}

.bd-how-order-decor-right-small{
  width:30px;
  height:30px;
  right:64px;
  top:42px;
  background:#f3d0b2;
}

.bd-how-order-head{
  position:relative;
  z-index:1;
  max-width:980px;
  margin:0 auto 28px;
  text-align:center;
}

.bd-how-order-title{
  margin:0;
  color:#134b83;
  font-size:clamp(34px,4.2vw,74px);
  line-height:1.05;
  font-weight:800;
}

.bd-how-order-subtitle{
  margin:18px auto 0;
  max-width:980px;
  padding-top:20px;
  border-top:1px solid rgba(148,163,184,.35);
  color:#374151;
  font-size:clamp(18px,1.9vw,28px);
  line-height:1.45;
}

.bd-how-order-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.bd-how-order-card{
  background:#ffffff;
  border-radius:22px;
  padding:18px 18px 20px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  border:1px solid rgba(148,163,184,.16);
  transition:transform .24s ease, box-shadow .24s ease;
}

.bd-how-order-card:hover,
.bd-how-order-card:focus-within{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(15,23,42,.14);
}

.bd-how-order-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(148,163,184,.22);
}

.bd-how-order-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  height:54px;
  border-radius:999px;
  color:#ffffff;
  font-size:24px;
  line-height:1;
  font-weight:800;
  box-shadow:0 10px 20px rgba(15,23,42,.12);
}

.bd-how-order-card-title{
  margin:0;
  font-size:clamp(18px,1.55vw,30px);
  line-height:1.15;
  font-weight:800;
}

.bd-how-order-card-image-wrap{
  margin:20px 0 16px;
  min-height:210px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bd-how-order-card-image{
  display:block;
  max-width:100%;
  height:auto;
  max-height:230px;
  object-fit:contain;
}

.bd-how-order-image-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:210px;
  padding:16px;
  border-radius:18px;
  border:1px dashed rgba(148,163,184,.45);
  background:linear-gradient(180deg,#f8fafc 0%,#eef5ff 100%);
  color:#64748b;
  text-align:center;
  font-weight:700;
}

.bd-how-order-card-text{
  color:#374151;
  font-size:clamp(16px,1.25vw,19px);
  line-height:1.48;
}

.bd-how-order-card.accent-orange .bd-how-order-step,
.bd-how-order-card.accent-orange .bd-how-order-card-title{
  color:#f47a12;
}
.bd-how-order-card.accent-orange .bd-how-order-step{background:#f47a12;color:#fff;}

.bd-how-order-card.accent-blue .bd-how-order-step,
.bd-how-order-card.accent-blue .bd-how-order-card-title{
  color:#1f5c93;
}
.bd-how-order-card.accent-blue .bd-how-order-step{background:#1f5c93;color:#fff;}

.bd-how-order-card.accent-red .bd-how-order-step,
.bd-how-order-card.accent-red .bd-how-order-card-title{
  color:#eb4b2b;
}
.bd-how-order-card.accent-red .bd-how-order-step{background:#eb4b2b;color:#fff;}

.bd-how-order-card.accent-navy .bd-how-order-step,
.bd-how-order-card.accent-navy .bd-how-order-card-title{
  color:#0c4e89;
}
.bd-how-order-card.accent-navy .bd-how-order-step{background:#0c4e89;color:#fff;}

.bd-how-order-highlight{
  position:relative;
  z-index:1;
  margin-top:26px;
  background:linear-gradient(90deg,#e8f3ff 0%,#dfeefe 52%,#eef5ff 100%);
  border-radius:26px;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.bd-how-order-highlight-content{
  display:flex;
  align-items:center;
  gap:16px;
}

.bd-how-order-highlight-icon{
  width:72px;
  height:72px;
  flex:0 0 72px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#0f67b6;
  color:#ffffff;
  box-shadow:0 10px 20px rgba(15,103,182,.2);
}

.bd-how-order-highlight-icon .dashicons{
  font-size:32px;
  width:32px;
  height:32px;
}

.bd-how-order-highlight-text h3{
  margin:0 0 6px;
  color:#13508b;
  font-size:clamp(24px,2.2vw,46px);
  line-height:1.1;
  font-weight:800;
}

.bd-how-order-highlight-text p{
  margin:0;
  color:#334155;
  font-size:clamp(15px,1.2vw,22px);
  line-height:1.4;
}

.bd-how-order-highlight-media{
  min-width:160px;
  display:flex;
  justify-content:flex-end;
}

.bd-how-order-highlight-image{
  display:block;
  max-width:100%;
  height:auto;
  max-height:160px;
  object-fit:contain;
}

@media (max-width: 1200px){
  .bd-how-order-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 767px){
  .bd-how-order-section{
    padding:28px 14px 22px;
    border-radius:20px;
  }

  .bd-how-order-head{
    margin-bottom:18px;
  }

  .bd-how-order-subtitle{
    margin-top:12px;
    padding-top:14px;
    font-size:16px;
  }

  .bd-how-order-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .bd-how-order-card{
    border-radius:18px;
    padding:14px 14px 16px;
  }

  .bd-how-order-step{
    min-width:44px;
    height:44px;
    font-size:20px;
  }

  .bd-how-order-card-image-wrap,
  .bd-how-order-image-placeholder{
    min-height:160px;
  }

  .bd-how-order-highlight{
    padding:16px;
    border-radius:20px;
    flex-direction:column;
    align-items:flex-start;
  }

  .bd-how-order-highlight-content{
    width:100%;
  }

  .bd-how-order-highlight-media{
    width:100%;
    justify-content:center;
  }
}