/* ===== HOW TO ORDER PAGE ===== */

.howto-body {
  background: var(--bg);
}

.howto-page {
  width: 100%;
  min-height: calc(100vh - 90px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 155px 20px 44px;
}

.howto-flow {
  position: relative;
  width: min(100%, 1160px);
  height: 520px;
  margin: 0 auto;
  color: #333333;
}

/* text blocks */
.howto-step {
  position: absolute;
  text-align: center;
  z-index: 2;
  color: #333333 !important;
}

.howto-step h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 500;
  margin: 0 0 6px;
  color: #333333 !important;
  letter-spacing: 0;
}

.howto-step p {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  line-height: 1.28;
  font-weight: 500;
  margin: 0;
  color: #333333 !important;
}

/* exact placements */
.step-1 {
  top: 6px;
  left: 0;
  width: 280px;
}

.step-2 {
  top: 6px;
  left: 410px;
  width: 315px;
}

.step-3 {
  top: 6px;
  right: 0;
  width: 310px;
}

.step-4 {
  top: 301px;
  left: 18px;
  width: 292px;
}

.step-5 {
  top: 327px;
  left: 430px;
  width: 300px;
}

.step-6 {
  top: 258px;
  right: 6px;
  width: 330px;
}

/* svg arrows */
.howto-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.howto-arrows marker path {
  fill: #111111;
}

.arrow-line {
  fill: none;
  stroke: #111111;
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 9;
  marker-end: url(#arrowHead);
}

/* make only the long diagonal arrow point left by reversing its arrowhead position visually */
.howto-arrows path:nth-of-type(3) {
  marker-start: none;
  marker-end: url(#arrowHead);
}

/* prevent inherited brown color from global style.css */
.howto-flow,
.howto-flow * {
  color: #333333 !important;
}

/* responsive */
@media (max-width: 900px) {
  .howto-page {
    padding: 28px 20px 44px;
  }

  .howto-flow {
    height: auto;
    display: grid;
    gap: 34px;
  }

  .howto-step {
    position: static;
    width: min(100%, 420px) !important;
    margin: 0 auto;
  }

  .howto-step h2 {
    font-size: 24px;
  }

  .howto-step p {
    font-size: 18px;
    line-height: 1.35;
  }

  .howto-arrows {
    display: none;
  }
}

/* ===== REMOVE RIGHT SCROLLBAR ON HOW TO ORDER PAGE ===== */
.howto-html,
.howto-body {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  overflow: hidden !important;
}

.howto-page {
  height: calc(100vh - 90px) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 130px 20px 0 !important;
}

/* ===== ID PAGE: FORCE SAME STEP POSITIONS AS EN ===== */
.howto-id-page .step-1 {
  top: 6px !important;
  left: 0 !important;
  width: 280px !important;
}

.howto-id-page .step-2 {
  top: 6px !important;
  left: 410px !important;
  width: 315px !important;
}

.howto-id-page .step-3 {
  top: 6px !important;
  right: 0 !important;
  width: 310px !important;
}

.howto-id-page .step-4 {
  top: 301px !important;
  left: 18px !important;
  width: 292px !important;
}

.howto-id-page .step-5 {
  top: 327px !important;
  left: 430px !important;
  width: 300px !important;
}

.howto-id-page .step-6 {
  top: 258px !important;
  right: 6px !important;
  width: 330px !important;
}

/* ===== ID PAGE: MOVE LEFT/RIGHT TEXT OUTWARD ===== */
.howto-id-page .step-1 {
  left: -28px !important;
  width: 300px !important;
}

.howto-id-page .step-3 {
  right: -28px !important;
  width: 300px !important;
}

.howto-id-page .step-4 {
  left: -10px !important;
  width: 305px !important;
}

.howto-id-page .step-6 {
  right: -18px !important;
  width: 345px !important;
}

/* ===== FINAL ID HOW TO ORDER BALANCED LAYOUT ===== */
.howto-id-page .howto-flow {
  width: min(100%, 1160px) !important;
  height: 520px !important;
}

/* Top row */
.howto-id-page .step-1 {
  top: 6px !important;
  left: -6px !important;™5px !important;
}

.howto-id-page .step-2 {
  top: 6px !important;
  left: 405px !important;
  width: 350px !important;
}

.howto-id-page .step-3 {
  top: 6px !important;
  right: -54px !important;
  width: 350px !important;
}

/* Bottom row */
.howto-id-page .step-4 {
  top: 302px !important;
  left: -2px !important;š0px !important;
}

.howto-id-page .step-5 {
  top: 326px !important;
  left: 415px !important;
  width: 350px !important;
}

.howto-id-page .step-6 {
  top: 258px !important;
  right: -54px !important;
  width: 370px !important;
}

/* Typography refinement for Indonesian text */
.howto-id-page .howto-step h2 {
  font-size: 25px !important;
  line-height: 1.15 !important;
  margin-bottom: 6px !important;
}

.howto-id-page .howto-step p {
  font-size: 18px !important;
  line-height: 1.27 !important;
}

/* Arrow refinement */
.howto-id-page .arrow-line {
  stroke-width: 3px !important;
  stroke-dasharray: 1 9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* ===== FORCE ALL HOWTO PAGE TEXT TO MENU BROWN ===== */
.howto-page,
.howto-page * ,
.howto-flow,
.howto-flow * ,
.howto-step,
.howto-step * {
  color: #6B5B45 !important;
}

.howto-step h2,
.howto-step p,
.howto-id-page .howto-step h2,
.howto-id-page .howto-step p {
  color: #6B5B45 !important;
}

/* Keep navbar/menu text brown on howto pages */
.howto-body .nav a,
.howto-body .nav .brand,
.howto-body .lang-toggle a,
.howto-body .lang-toggle .toggle-option {
  color: #6B5B45 !important;
}

/* ===== BRAND SIGNATURE ONLY BLACK ===== */
html body .nav .nav__inner > a.brand,
html body .nav .nav__inner > a.brand:hover,
html body .nav .nav__inner > a.brand:focus,
html body .nav .nav__inner > a.brand:active,
html body .nav .nav__inner > a.brand:visited {
  color: #000000 !important;
  text-decoration: none !important;
}

/* ===== BRAND SIGNATURE ONLY BLACK ===== */
html body .nav .nav__inner > a.brand,
html body .nav .nav__inner > a.brand:hover,
html body .nav .nav__inner > a.brand:focus,
html body .nav .nav__inner > a.brand:active,
html body .nav .nav__inner > a.brand:visited {
  color: #000000 !important;
  text-decoration: none !important;
}