/* Oima POS Lite 1.0.0.28 — targeted spacing fix for combined payment.
   Visual overrides only. Retains every payment handler, form field, report and route. */

/* Fix the actual flex shrink that leaves a gap beneath Validate payment.
   The four method rows stay at the top and the amount/editor/CTA sit lower. */
@media (min-width: 801px) {
  #wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"].op230-ready #op180-split-card[open] {
    display: block !important;
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  #wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"].op230-ready #op180-split-form {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  #wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"].op230-ready .op200-split-ui {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  #wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"].op230-ready .op200-entrybox {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }
  #wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"].op230-ready .op200-keypad {
    flex: 0 0 auto !important;
    height: clamp(100px, 17dvh, 154px) !important;
    min-height: 0 !important;
    max-height: 154px !important;
    margin-top: 0 !important;
  }
  #wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"].op230-ready .op200-confirm {
    margin-top: 0 !important;
  }
}

/* One consistent subtle outline: selected & hovered methods change fill, not
   border weight, outlines, inset stripes or any dimensions. */
#wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"] .op200-method,
#wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"] .op200-method[aria-pressed="true"],
#wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"] .op200-method.is-current {
  border: 1px solid #dce4ed !important;
  box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  background-clip: padding-box !important;
  transition: background-color .16s ease, color .16s ease !important;
}
#wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"] .op200-method:hover:not(:disabled),
#wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"] .op200-method:focus-visible:not(:disabled) {
  border-color: #dce4ed !important;
  outline: none !important;
  box-shadow: none !important;
  background: #fff3eb !important;
}
#wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"] .op200-method.is-current,
#wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"] .op200-method[aria-pressed="true"] {
  background: #ffede0 !important;
  color: #aa491d !important;
}

/* Taller phone/portrait viewports: likewise put Validate at the bottom.
   Keep shorter-phone sizing unchanged to avoid losing keypad/fields. */
@media (max-width: 520px) and (min-height: 720px) {
  #wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"].op230-ready #op180-split-card[open] {
    display: block !important;
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  #wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"].op230-ready #op180-split-form {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  #wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"].op230-ready .op200-split-ui {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    align-items: stretch !important;
  }
  #wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"].op230-ready .op200-entrybox {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    justify-content: flex-end !important;
  }
  #wrap.oima-pos-frontend.op250-ready[data-op-page="page_sale"].op230-ready .op200-keypad {
    flex: 0 0 auto !important;
    height: clamp(110px, 16dvh, 152px) !important;
    max-height: 152px !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }
}