/* =====================================================================
   BHROMI v1.1.4 - Desktop checkout (>=1024px ONLY, phones/tablets untouched)
   Review & Confirm (.step-1), Payment options (.pay-pick) and Confirm payment
   (.pay-confirm) become two columns like the first booking step:
   details left, sticky price summary + the main button on the right card
   (navy, white text). The mobile bottom bar is hidden here because the right
   card carries the same button (Confirm & Pay / Next / Submit payment).
   ===================================================================== */
@media (min-width: 1024px) {
  /* one container + grid for all three steps (same as step 1: 1120 / 360) */
  .brv.step-1 .brv-wrap,
  .brv.pay-pick .brv-wrap,
  .brv.pay-confirm .brv-wrap { max-width: 1120px; padding: 0 10px; }
  .brv.step-1 .brv-grid,
  .brv.pay-pick .brv-grid,
  .brv.pay-confirm .brv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
  .brv.step-1 .brv-aside,
  .brv.pay-pick .brv-aside,
  .brv.pay-confirm .brv-aside { display: block; position: sticky; top: 76px; }

  /* bottom sticky bar: gone on desktop (the right card has the same button) */
  .brv.step-1 .brv-bar,
  .brv.pay-pick .brv-bar { display: none !important; }
  .brv.step-1, .brv.pay-pick, .brv.pay-confirm { padding-bottom: 32px; }
  body.bh-booking-route:has(.brv) { padding-bottom: 0 !important; }

  /* page title + progress: same look as step 1 */
  .brv.step-1 .brv-top,
  .brv.pay-pick .brv-top,
  .brv.pay-confirm .brv-top { position: static; height: 52px; margin: 0; padding: 0; background: transparent; border: 0; gap: 4px; }
  .brv.step-1 .brv-top h1,
  .brv.pay-pick .brv-top h1,
  .brv.pay-confirm .brv-top h1 { font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.1px; }
  .brv.step-1 .brv-back, .brv.pay-pick .brv-back, .brv.pay-confirm .brv-back { width: 40px; height: 40px; margin: 0; }
  .brv.step-1 .brv-top-sp, .brv.pay-pick .brv-top-sp, .brv.pay-confirm .brv-top-sp { width: 40px; height: 40px; margin: 0; }
  .brv.step-1 .brv-steps { max-width: 640px; height: 40px; margin: 0 0 10px; }
  .brv.pay-pick .brv-steps { display: flex; max-width: 640px; margin: 0 0 10px; }
  .brv.pay-pick .brv-steps li span { display: block; }

  /* left column fills its column (was a ~430px phone column) */
  .brv.step-1 { --u: calc(540px / 852); }
  .brv.step-1 .rc { gap: 12px; }
  .brv.pay-pick .pay3-hotel, .brv.pay-pick .pay3 { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }
  .brv.pay-confirm .pm-card, .brv.pay-confirm .pm-card.pm-card { --u: calc(560px / 1024); width: 100%; margin: 0 0 16px; }
  .brv.pay-confirm .pm-rules { --u: calc(560px / 1024); width: 100%; margin: 0 0 24px; }
  .brv.pay-confirm .pm-ht h2 { white-space: normal; }

  /* right card: summary + main button, navy with white text */
  .brv:is(.step-1, .pay-pick, .pay-confirm) .brv-aside .brv-next.wide {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 48px; min-width: 0; margin-top: 12px; padding: 0 16px;
    border: 0; border-radius: 10px; background: #0a1b63; color: #fff;
    font-size: 15.5px; font-weight: 700; box-shadow: none;
  }
  .brv:is(.step-1, .pay-pick, .pay-confirm) .brv-aside .brv-next.wide svg { display: inline-block !important; width: 18px; height: 18px; }
  .brv:is(.step-1, .pay-pick, .pay-confirm) .brv-aside .brv-next.wide:hover:not(:disabled) { background: #0d2380; }
  .brv:is(.step-1, .pay-pick, .pay-confirm) .brv-aside .brv-next.wide:disabled { opacity: 0.55; cursor: default; }
  .brv:is(.step-1, .pay-pick, .pay-confirm) .brv-aside .brv-aside-st { margin-top: 12px; }
  .brv .brv-aside-pay .brv-paynow { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--brv-line); }
  .brv .brv-aside-pay .brv-paynow b { color: #0a1b63; }

  /* in-card Submit payment is replaced by the right-card button */
  .brv.pay-confirm .pm-card .pm-submit { display: none; }
}