/* Lovelle original application code © 2026 Xuân Hoà · Telegram: @HoaNX · Facebook: fb.com/nxh1811. Third-party components retain their own licenses. */
/* Shared transfer layout for service purchases and wallet top-ups. */
.lv-transfer-checkout {
  box-sizing: border-box;
  width: min(700px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 22px;
  border: 1px solid #e4c4d2;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, #fff6fa);
  color: #593044;
  box-shadow: 0 24px 80px #51283f30, inset 0 1px #fff;
}
.lv-transfer-checkout header { gap: 12px; margin: 0 0 6px; }
.lv-transfer-checkout header h2 { margin: 0; font-size: 22px; line-height: 1.3; }
.lv-transfer-checkout header button { flex: 0 0 44px; width: 44px; padding: 0; font-size: 22px; background: #fff; }
.lv-transfer-checkout .transfer-body { display: grid; gap: 16px; }
.lv-transfer-checkout .transfer-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #806472; font-size: 12px; }
.lv-transfer-checkout .transfer-badge { flex-shrink: 0; padding: 6px 10px; border: 1px solid #efd3df; border-radius: 20px; background: #fff0f6; color: #934664; font-size: 11px; font-weight: 600; }
.lv-transfer-checkout .transfer-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.lv-transfer-checkout .transfer-scan { display: grid; justify-items: center; gap: 6px; border: 1px solid #efdee6; border-radius: 18px; padding: 10px; background: #fff; }
.lv-transfer-checkout .transfer-scan p { margin: 0; color: #806472; font-size: 11px; line-height: 1.5; }
.lv-transfer-checkout .transfer-scan img { display: block; width: 216px; height: 216px; max-width: 100%; object-fit: contain; background: #fff; border: 0; border-radius: 0; margin: 0; }
.lv-transfer-checkout .transfer-scan a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; color: #934664; font-size: 13px; text-decoration: none; }
.lv-transfer-checkout .transfer-info { min-width: 0; }
.lv-transfer-checkout .transfer-info small { display: block; font-size: 11px; color: #806472; line-height: 1.5; }
.lv-transfer-checkout .transfer-total { display: block; font-size: 36px; line-height: 1.2; letter-spacing: -1px; color: #713a53; margin: 3px 0 16px; }
.lv-transfer-checkout .transfer-recipient { display: grid; gap: 3px; margin-bottom: 5px; }
.lv-transfer-checkout .transfer-recipient strong { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.lv-transfer-checkout .transfer-copy-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0dfe7; }
.lv-transfer-checkout .transfer-copy-row > div { min-width: 0; }
.lv-transfer-checkout .transfer-copy-row strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; user-select: all; }
.lv-transfer-checkout .transfer-copy-row button { flex-shrink: 0; min-height: 44px; padding: 8px 10px; background: #fff; font-size: 11px; }
.lv-transfer-checkout .transfer-expiry { margin: 10px 0 0; color: #806472; font-size: 11px; line-height: 1.5; }
.lv-transfer-checkout .transfer-actions { display: flex; gap: 8px; padding-top: 4px; }
.lv-transfer-checkout .transfer-actions button { flex: 1; margin: 0; padding: 10px 12px; min-height: 44px; font-size: 13px; line-height: 1.3; background: #fff; color: #713a53; }
.lv-transfer-checkout .transfer-actions .transfer-primary { flex: 1.35; width: auto; border-color: #984869; background: linear-gradient(135deg, #bc648b, #944363); color: #fff; font-weight: 600; box-shadow: inset 0 1px #ffffff44, 0 3px 0 #76354f; }
.lv-transfer-checkout .transfer-actions .transfer-cancel { flex: .75; background: transparent; border-color: transparent; box-shadow: none; color: #806472; }
.lv-transfer-checkout .transfer-note { margin: 0; color: #806472; font-size: 11px; line-height: 1.6; }
.lv-transfer-checkout .transfer-note a { display: inline; min-height: auto; padding: 0; font-size: inherit; text-decoration: underline; }
.lv-transfer-checkout .transfer-feedback { margin: 0; padding: 9px 12px; border: 1px solid #efd3df; border-radius: 10px; color: #793453; background: #fff0f6; font-size: 12px; line-height: 1.5; }
.lv-transfer-checkout .transfer-feedback:empty { display: none; }
.lv-transfer-checkout button:disabled { opacity: .55; cursor: default; box-shadow: none; }
.lv-transfer-checkout button:focus-visible, .lv-transfer-checkout a:focus-visible { outline: 3px solid #ad527f; outline-offset: 3px; }
.lv-transfer-checkout [hidden] { display: none !important; }
@media (max-width: 620px) {
  .lv-transfer-checkout { width: min(430px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 16px; border-radius: 20px; }
  .lv-transfer-checkout header h2 { font-size: 19px; }
  .lv-transfer-checkout .transfer-body { gap: 12px; }
  .lv-transfer-checkout .transfer-meta { font-size: 11px; gap: 6px; flex-wrap: wrap; }
  .lv-transfer-checkout .transfer-badge { padding: 5px 8px; }
  .lv-transfer-checkout .transfer-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lv-transfer-checkout .transfer-scan { width: 100%; box-sizing: border-box; padding: 8px; }
  .lv-transfer-checkout .transfer-scan img { width: 180px; height: 180px; }
  .lv-transfer-checkout .transfer-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .lv-transfer-checkout .transfer-info > small { align-self: center; }
  .lv-transfer-checkout .transfer-total { font-size: 28px; margin: 0 0 8px; text-align: right; }
  .lv-transfer-checkout .transfer-recipient, .lv-transfer-checkout .transfer-copy-row, .lv-transfer-checkout .transfer-expiry { grid-column: 1 / -1; }
  .lv-transfer-checkout .transfer-actions { flex-wrap: wrap; }
  .lv-transfer-checkout .transfer-actions .transfer-primary { flex-basis: 100%; }
  .lv-transfer-checkout .transfer-actions .transfer-cancel { flex: 1; }
}
@media (min-width: 621px) and (max-height: 650px) {
  .lv-transfer-checkout { padding: 18px; }
  .lv-transfer-checkout .transfer-body { gap: 10px; }
  .lv-transfer-checkout .transfer-scan img { width: 184px; height: 184px; }
  .lv-transfer-checkout .transfer-total { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lv-transfer-checkout[open] { animation: transferIn .18s ease-out; }
  @keyframes transferIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}

/* Lovelle: confirm the server quote before generating a payment QR. */
.service-checkout.lv-order-confirm { box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px; }
.lv-order-confirm header { gap:16px;margin-bottom:16px; }
.lv-order-confirm header h2 { margin:0;font-size:21px; }
.lv-order-confirm header button { flex-shrink:0;width:44px;background:#fff;color:#593044; }
.lv-order-confirm .confirm-plan { display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px; }
.lv-order-confirm .confirm-plan strong { font-size:22px; }
.lv-order-confirm .confirm-plan span { color:#755e68;font-size:14px; }
.lv-order-confirm .confirm-coupon { position:relative;padding:12px 16px 16px;background:#fff;border:1px solid #ead5de;border-radius:16px; }
.lv-order-confirm .confirm-coupon label { font-weight:600;min-height:44px;line-height:44px;padding-right:70px; }
.lv-order-confirm .confirm-coupon-entry { display:flex;align-items:center;gap:8px; }
.lv-order-confirm .confirm-coupon-entry input { min-width:0;flex:1;margin:0;text-transform:uppercase; }
.lv-order-confirm .confirm-coupon-entry button { background:#f9eaf1;color:#713a53;font-weight:600;white-space:nowrap; }
.lv-order-confirm .confirm-remove { position:absolute;top:12px;right:12px;background:#fff;font-size:13px;color:#713a53; }
.lv-order-confirm .confirm-summary { margin:18px 0 0; }
.lv-order-confirm .confirm-summary div { display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;font-size:14px; }
.lv-order-confirm .confirm-summary dt { min-width:0;overflow-wrap:anywhere; }
.lv-order-confirm .confirm-summary dd { margin:0;font-weight:600;white-space:nowrap; }
.lv-order-confirm .confirm-summary .confirm-discount { color:#257353; }
.lv-order-confirm .confirm-summary .confirm-payable { border-top:1px solid #ead5de;margin-top:6px;padding-top:16px; }
.lv-order-confirm .confirm-payable dd { font-size:28px;color:#713a53; }
.lv-order-confirm .confirm-note { color:#755e68;font-size:13px;line-height:1.55;margin:16px 0 0; }
.lv-order-confirm .service-action { margin:18px 0 0;box-sizing:border-box; }
.lv-order-confirm .confirm-feedback { margin:12px 0 0;font-size:13px; }
.lv-order-confirm .confirm-feedback:empty { display:none; }
.lv-order-confirm button:disabled { opacity:.6;cursor:wait; }
.lv-order-confirm input:focus-visible { outline:3px solid #ad527f;outline-offset:2px; }
.lv-transfer-checkout .transfer-discount { grid-column:1 / -1;margin:0 0 8px;font-size:12px;line-height:1.45;color:#257353; }
@media(max-width:480px) { .service-checkout.lv-order-confirm{padding:20px;} .lv-order-confirm header h2{font-size:19px;} .lv-order-confirm .confirm-plan{align-items:flex-start;flex-direction:column;gap:2px;} .lv-order-confirm .confirm-payable dd{font-size:25px;} }