/* Payment dialog only: keep the catalog's approved appearance. */
.applio #officePayment {
  width: min(430px, calc(100% - 28px));
  max-height: calc(100svh - 28px);
  padding: 26px;
  border: 1px solid #fff;
  border-radius: 30px;
  background: radial-gradient(ellipse at 0 0, #ece4ff 0, transparent 48%),
    radial-gradient(ellipse at 100% 100%, #fce9de70, transparent 45%), #fcfbff;
  box-shadow: 0 24px 90px #26133c38, inset 0 1px 0 #fff;
  color: #292638;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.applio #officePayment::backdrop { background: #25203966; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.applio #officePayForm { margin: 0; }
.applio #officePayment .payment-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.applio #officePayment .payment-eyebrow { display: block; color: #82758f; font-size: 9px; font-weight: 650; letter-spacing: 1.5px; line-height: 1.4; }
.applio #officePayForm h2 { margin: 7px 0 0; font-size: 28px; font-weight: 750; line-height: 1.15; letter-spacing: -.9px; }
.applio #officePayment #officePayClose { display: grid; place-items: center; flex: none; width: 40px; min-height: 40px; margin: 0; padding: 10px; border: 1px solid #e5dfed; border-radius: 50%; background: #ffffff8c; color: #82758f; }
.applio #officePayClose svg { width: 18px; height: 18px; }
.applio #officePayForm #officePayIntro { margin: 14px 0 24px; color: #80758b; font-size: 12px; line-height: 1.6; }
.applio #officePayment .payment-quantity { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid #e9e1f2; border-radius: 20px; background: #ffffffa6; }
.applio #officePayForm label { color: #4e435e; font-size: 12px; font-weight: 650; }
.applio #officePayment .payment-quantity small { display: block; margin-top: 5px; color: #8b7e98; font-size: 10px; white-space: nowrap; }
.applio #officePayment .payment-stepper { display: flex; align-items: center; gap: 0; }
.applio #officePayment .payment-stepper button { display: grid; place-items: center; width: 38px; min-height: 42px; margin: 0; padding: 0; border-radius: 12px; background: #ede6fa; color: #72549a; font-size: 23px; font-weight: 400; line-height: 1; }
.applio #officePayment #officeQty { width: 43px; height: 42px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #342941; text-align: center; font-size: 22px; font-weight: 700; appearance: textfield; -moz-appearance: textfield; box-shadow: none; }
.applio #officePayForm:has(#officePayCheck:not([hidden])) .payment-stepper button { display: none; }
.applio #officePayForm:has(#officePayCheck:not([hidden])) #officeQty { width: 52px; background: #eee7f8; opacity: 1; }
.applio #officeQty::-webkit-inner-spin-button, .applio #officeQty::-webkit-outer-spin-button { appearance: none; margin: 0; }
.applio #officePayment .payment-email { margin-top: 22px; }
.applio #officePayForm:has(#officePayCheck:not([hidden])) .payment-email { display: none; }
.applio #officePayment #officeEmail { width: 100%; height: 49px; margin: 9px 0 6px; padding: 12px 14px; border: 1px solid #e6dfed; border-radius: 14px; background: #fff; color: #342941; font-size: 16px; box-shadow: 0 2px 3px #34294102; }
.applio #officeEmail::placeholder { color: #b0a6ba; font-size: 13px; }
.applio #officeEmailHint { color: #968a9e; font-size: 10px; }
.applio #officePayment .payment-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 25px 0 16px; }
.applio #officePayment .payment-total > span { color: #675a74; font-size: 12px; font-weight: 550; }
.applio #officePayment .payment-total small { display: block; margin-top: 4px; color: #998ba3; font-size: 10px; font-weight: 400; }
.applio #officePayment #officeTotal { color: #372847; font-size: 32px; font-weight: 750; line-height: 1.1; letter-spacing: -1px; white-space: nowrap; }
.applio #officePayment #officePaySubmit { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 14px; border: 1px solid #ffffffb3; border-radius: 16px; color: #49305e; background: linear-gradient(105deg, #c6b2ef, #e0bbdd 58%, #f1c5ad); box-shadow: inset 0 1px 0 #fff9, 0 5px 15px #9973b225; font-size: 13px; font-weight: 700; }
.applio #officePaySubmit::after { content: '↗'; font-size: 19px; font-weight: 400; line-height: 1; }
.applio #officePayForm .payment-secure { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 10px 0 0; color: #95889d; font-size: 9px; }
.applio .payment-secure svg { width: 12px; height: 12px; flex: none; }
.applio #officePayment .payment-status { margin-top: 18px; padding: 14px; border: 1px solid #e6ddef; border-radius: 16px; background: #f0eaf870; }
.applio #officePayment .payment-status:has(#officePayMessage:empty):has(#officePayReference[hidden]) { display: none; }
.applio #officePayForm #officePayMessage { margin: 0; color: #6c587e; font-size: 12px; line-height: 1.6; }
.applio #officePayForm #officePayMessage:empty { display: none; }
.applio #officePayment #officePayCheck { width: 100%; min-height: 42px; margin-top: 12px; padding: 10px; border: 1px solid #e3d8ee; border-radius: 11px; background: #fffc; color: #6c4d8a; font-size: 12px; font-weight: 650; }
.applio #officePayment [hidden] { display: none !important; }
.applio #officePayment .payment-order:has(#officePayReference[hidden]) { display: none; }
.applio #officePayment .payment-order { margin-top: 10px; }
.applio #officePayment .payment-order summary { color: #9988a6; font-size: 10px; cursor: pointer; }
.applio #officePayForm #officePayReference { margin: 7px 0 0; color: #8c7e98; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.applio #officePayment .payment-terms { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eae3ef; text-align: center; color: #94859e; font-size: 10px; }
.applio #officePayForm .payment-terms p { margin: 0; font-size: 10px; line-height: 1.6; }
.applio #officePayment .payment-terms > a { display: inline-block; margin-top: 5px; padding: 3px 0; color: #7d6594; text-underline-offset: 3px; }
.applio #officePayment .payment-terms details { margin-top: 7px; }
.applio #officePayment .payment-terms summary { width: fit-content; margin: auto; padding: 4px 0; color: #94859e; font-size: 10px; cursor: pointer; }
.applio #officePayForm .payment-terms details p { margin-top: 7px; }
.applio #officePayment button:disabled { opacity: .45; cursor: default; }
.applio #officePayment input:disabled { opacity: .65; }
.applio #officePayment :is(button,input,a,summary):focus-visible { outline: 3px solid #bea8e8; outline-offset: 3px; }
@media (max-width: 360px) {
  .applio #officePayment { padding: 21px 18px; border-radius: 26px; }
  .applio #officePayForm h2 { font-size: 26px; }
  .applio #officePayment .payment-quantity { padding: 12px 10px; }
  .applio #officePayment .payment-stepper button { width: 34px; }
  .applio #officePayment #officeQty { width: 38px; }
}
@media (prefers-reduced-transparency: reduce) { .applio #officePayment::backdrop { background: #252039b3; backdrop-filter: none; -webkit-backdrop-filter: none; } }