@lockerverse/react 0.2.20 → 0.2.22

package/dist/styles.css

@@ -1,24 +1,21 @@
 .lockerverse-payment {
   --lockerverse-accent: #38d77a;
-  --lockerverse-accent-contrast: #000;
+  --lockerverse-accent-contrast: #08110c;
   --lockerverse-bg: #080808;
-  --lockerverse-border: rgb(255 255 255 / 12%);
-  --lockerverse-control: #121212;
+  --lockerverse-border: rgb(255 255 255 / 14%);
+  --lockerverse-control: #151515;
   --lockerverse-danger: #f08a98;
-  --lockerverse-danger-border: #8f3542;
   --lockerverse-font-family:
     ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     sans-serif;
   --lockerverse-muted: rgb(255 255 255 / 64%);
-  --lockerverse-placeholder: rgb(255 255 255 / 34%);
+  --lockerverse-placeholder: rgb(255 255 255 / 38%);
   --lockerverse-radius: 10px;
-  --lockerverse-subtle: rgb(255 255 255 / 8%);
   --lockerverse-text: #fff;
   box-sizing: border-box;
   width: 100%;
   max-width: 480px;
-  padding: clamp(16px, 4.2%, 20px);
-  container-type: inline-size;
+  padding: 20px;
   font-family: var(--lockerverse-font-family);
   font-size: 15px;
   line-height: 1.4;
@@ -29,13 +26,11 @@
 
 .lockerverse-payment[data-lockerverse-theme="light"] {
   --lockerverse-bg: #fff;
-  --lockerverse-border: rgb(18 20 22 / 14%);
-  --lockerverse-control: #f5f6f7;
+  --lockerverse-border: rgb(18 20 22 / 15%);
+  --lockerverse-control: #f4f5f6;
   --lockerverse-danger: #c52b3e;
-  --lockerverse-danger-border: #b64656;
   --lockerverse-muted: rgb(18 20 22 / 64%);
-  --lockerverse-placeholder: rgb(18 20 22 / 38%);
-  --lockerverse-subtle: rgb(18 20 22 / 8%);
+  --lockerverse-placeholder: rgb(18 20 22 / 40%);
   --lockerverse-text: #121416;
   box-shadow: 0 18px 55px rgb(20 25 32 / 10%);
 }
@@ -53,24 +48,31 @@
 }
 
 .lockerverse-payment header {
-  margin-bottom: 20px;
+  margin-bottom: 4px;
 }
 
 .lockerverse-payment h1 {
   font-size: 24px;
   font-weight: 600;
-  line-height: 1.333;
-  letter-spacing: 0;
+  line-height: 1.33;
 }
 
 .lockerverse-payment header p {
-  margin-top: 12px;
+  margin-top: 10px;
   font-size: 14px;
   line-height: 1.55;
   color: var(--lockerverse-muted);
   white-space: pre-line;
 }
 
+.lockerverse-payment h2,
+.lockerverse-payment label > span {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.45;
+  color: var(--lockerverse-text);
+}
+
 .lockerverse-payment__branding {
   display: flex;
   gap: 12px;
@@ -78,131 +80,55 @@
   min-width: 0;
   margin-bottom: 16px;
   font-size: 18px;
-  line-height: 1.25;
 }
 
 .lockerverse-payment__branding img {
   width: 48px;
   height: 48px;
   object-fit: cover;
-  border: 1px solid var(--lockerverse-subtle);
+  border: 1px solid var(--lockerverse-border);
   border-radius: var(--lockerverse-radius);
 }
 
 .lockerverse-payment__branding strong {
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 600;
   white-space: nowrap;
 }
 
 .lockerverse-payment__form,
 .lockerverse-payment__contact,
 .lockerverse-payment__additional-fields,
+.lockerverse-payment__custom-fields,
 .lockerverse-payment__address,
 .lockerverse-payment__shipping,
 .lockerverse-payment__actions,
-.lockerverse-payment__stripe-element {
+.lockerverse-payment__stripe-element,
+.lockerverse-payment label {
   display: grid;
 }
 
 .lockerverse-payment__form {
-  gap: 16px;
-}
-
-.lockerverse-payment__input-fieldset {
-  display: grid;
-  gap: 16px;
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-.lockerverse-payment [data-lockerverse-input-region][inert] {
-  opacity: 0.72;
-}
-
-.lockerverse-payment__payment-status {
-  margin: 0;
-  font-size: 14px;
-  color: var(--lockerverse-muted);
-  outline: none;
-}
-
-.lockerverse-payment__contact {
-  gap: 8px;
-  padding-top: 14px;
-  border-top: 1px solid var(--lockerverse-subtle);
-}
-
-.lockerverse-payment__contact label:not(:first-child) {
-  margin-top: 4px;
+  gap: 18px;
 }
 
+.lockerverse-payment__contact,
 .lockerverse-payment__additional-fields,
+.lockerverse-payment__custom-fields,
 .lockerverse-payment__shipping,
 .lockerverse-payment__actions {
-  gap: 16px;
+  gap: 14px;
 }
 
 .lockerverse-payment__address,
-.lockerverse-payment__stripe-element {
-  gap: 12px;
-}
-
-.lockerverse-payment__stripe-mount {
-  visibility: visible;
-  min-width: 0;
-  opacity: 1;
-  transition: opacity 120ms ease;
-}
-
-.lockerverse-payment__stripe-element[data-ready="false"] {
-  position: relative;
-}
-
-.lockerverse-payment__stripe-element[data-ready="false"]
-  > .lockerverse-payment__stripe-mount {
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  visibility: hidden;
-  pointer-events: none;
-  opacity: 0;
-}
-
-.lockerverse-payment__actions {
-  padding: 4px 0;
-  margin-top: 4px;
-}
-
-.lockerverse-payment label:not(.lockerverse-payment__check-row),
-.lockerverse-payment__field,
-.lockerverse-payment fieldset {
-  display: grid;
+.lockerverse-payment__stripe-element,
+.lockerverse-payment label {
   gap: 8px;
 }
 
-.lockerverse-payment label > span,
-.lockerverse-payment .lockerverse-payment__field > span,
-.lockerverse-payment legend,
-.lockerverse-payment h2 {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.45;
-  color: color-mix(in srgb, var(--lockerverse-text) 82%, transparent);
-}
-
-.lockerverse-payment h2 {
-  font-weight: 600;
-  color: var(--lockerverse-text);
-}
-
-.lockerverse-payment fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0;
+.lockerverse-payment__contact {
+  padding-top: 16px;
+  border-top: 1px solid var(--lockerverse-border);
 }
 
 .lockerverse-payment input:not([type="checkbox"]):not([type="radio"]),
@@ -215,705 +141,196 @@
   font-size: 16px;
   line-height: 1.5;
   color: var(--lockerverse-text);
-  appearance: none;
   outline: none;
-  background-color: var(--lockerverse-control);
+  background: var(--lockerverse-control);
   border: 1px solid var(--lockerverse-border);
   border-radius: var(--lockerverse-radius);
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
   transition:
-    border-color 140ms ease,
-    box-shadow 140ms ease;
-}
-
-.lockerverse-payment select {
-  padding-right: 38px;
-  background-image:
-    linear-gradient(45deg, transparent 50%, currentcolor 50%),
-    linear-gradient(135deg, currentcolor 50%, transparent 50%);
-  background-repeat: no-repeat;
-  background-position:
-    calc(100% - 17px) calc(50% - 2px),
-    calc(100% - 12px) calc(50% - 2px);
-  background-size:
-    5px 5px,
-    5px 5px;
+    border-color 120ms ease,
+    box-shadow 120ms ease;
 }
 
 .lockerverse-payment textarea {
   min-height: 112px;
-  padding-top: 12px;
   resize: vertical;
 }
 
-.lockerverse-payment input::placeholder,
-.lockerverse-payment textarea::placeholder {
-  color: var(--lockerverse-placeholder);
-  opacity: 1;
-}
-
-.lockerverse-payment input:not([type="checkbox"]):not([type="radio"]):focus,
-.lockerverse-payment__check-row input:focus,
-.lockerverse-payment select:focus,
-.lockerverse-payment textarea:focus,
-.lockerverse-payment button:focus {
-  outline: none;
-  border-color: var(--lockerverse-accent);
-}
-
-.lockerverse-payment input:not([type="checkbox"]):not([type="radio"]):focus,
-.lockerverse-payment select:focus,
-.lockerverse-payment textarea:focus,
-.lockerverse-payment__select-trigger:focus {
-  box-shadow: 0 0 0 1px var(--lockerverse-accent);
-}
-
-.lockerverse-payment
-  input:not([type="checkbox"]):not([type="radio"]):focus-visible,
-.lockerverse-payment__check-row input:focus-visible,
-.lockerverse-payment select:focus-visible,
-.lockerverse-payment textarea:focus-visible,
-.lockerverse-payment button:focus-visible {
-  box-shadow: 0 0 0 2px
-    color-mix(in srgb, var(--lockerverse-accent) 24%, transparent);
-}
-
-.lockerverse-payment [aria-invalid="true"] {
-  border-color: var(--lockerverse-danger-border) !important;
-}
-
-.lockerverse-payment__phone-control {
+.lockerverse-payment fieldset {
   display: grid;
-  grid-template-columns: 84px minmax(0, 1fr);
-  overflow: visible;
-  background: var(--lockerverse-control);
-  border: 1px solid var(--lockerverse-border);
-  border-radius: var(--lockerverse-radius);
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
-  transition:
-    border-color 140ms ease,
-    box-shadow 140ms ease;
-}
-
-.lockerverse-payment__phone-control:focus-within {
-  border-color: var(--lockerverse-accent);
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 4%),
-    0 0 0 1px var(--lockerverse-accent);
-}
-
-.lockerverse-payment__phone-control:has(:focus-visible) {
-  box-shadow: 0 0 0 2px
-    color-mix(in srgb, var(--lockerverse-accent) 24%, transparent);
-}
-
-.lockerverse-payment__phone-control:has([aria-invalid="true"]) {
-  border-color: var(--lockerverse-danger-border) !important;
-}
-
-.lockerverse-payment__select {
-  min-width: 0;
-}
-
-.lockerverse-payment__select-trigger {
-  display: flex;
   gap: 8px;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-height: 48px;
-  padding: 8px 12px;
-  font: inherit;
-  font-size: 16px;
-  line-height: 1.5;
-  color: var(--lockerverse-text);
-  text-align: left;
-  cursor: pointer;
-  background: var(--lockerverse-control);
-  border: 1px solid var(--lockerverse-border);
-  border-radius: var(--lockerverse-radius);
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
-  transition:
-    border-color 140ms ease,
-    box-shadow 140ms ease,
-    background-color 140ms ease;
-}
-
-.lockerverse-payment__select-trigger:hover,
-.lockerverse-payment__select-trigger[data-popup-open] {
-  background: color-mix(
-    in srgb,
-    var(--lockerverse-control) 94%,
-    var(--lockerverse-text)
-  );
-}
-
-.lockerverse-payment__select-trigger:focus-visible {
-  outline: none;
-  border-color: var(--lockerverse-accent);
-  box-shadow: 0 0 0 2px
-    color-mix(in srgb, var(--lockerverse-accent) 24%, transparent);
-}
-
-.lockerverse-payment__select-trigger:focus {
-  border-color: var(--lockerverse-accent);
-}
-
-.lockerverse-payment__select-icon {
-  display: grid;
-  flex: 0 0 auto;
-  place-items: center;
-  width: 16px;
-  height: 16px;
-  color: var(--lockerverse-muted);
-  transition: transform 140ms ease;
-}
-
-.lockerverse-payment__select-icon svg,
-.lockerverse-payment__select-item-indicator svg {
-  width: 16px;
-  height: 16px;
-  stroke: currentcolor;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.lockerverse-payment__select-trigger[data-popup-open]
-  .lockerverse-payment__select-icon {
-  transform: rotate(180deg);
-}
-
-.lockerverse-payment__select--phone-country {
-  position: relative;
-  z-index: 1;
-}
-
-.lockerverse-payment__select--phone-country
-  .lockerverse-payment__select-trigger {
-  padding-right: 9px;
-  padding-left: 11px;
-  background: transparent;
-  border: 0;
-  border-right: 1px solid var(--lockerverse-border);
-  border-radius: var(--lockerverse-radius) 0 0 var(--lockerverse-radius);
-  box-shadow: none;
-}
-
-.lockerverse-payment__phone-control
-  input:not([type="checkbox"]):not([type="radio"]) {
-  background: transparent;
-  border: 0;
-  border-radius: 0 var(--lockerverse-radius) var(--lockerverse-radius) 0;
-  box-shadow: none;
-}
-
-.lockerverse-payment__phone-control
-  input:not([type="checkbox"]):not([type="radio"]):focus,
-.lockerverse-payment__phone-control .lockerverse-payment__select-trigger:focus {
-  border-color: transparent;
-  box-shadow: none;
-}
-
-.lockerverse-payment__phone-control .lockerverse-payment__select-trigger:focus {
-  border-right-color: var(--lockerverse-accent);
-}
-
-.lockerverse-payment__phone-control:focus-within
-  .lockerverse-payment__select-trigger {
-  border-right-color: var(--lockerverse-accent);
-}
-
-.lockerverse-payment__phone-control [aria-invalid="true"] {
-  border-color: transparent !important;
-}
-
-.lockerverse-payment__select-positioner {
-  z-index: 100;
-  user-select: none;
-  outline: none;
-}
-
-.lockerverse-payment__select-popup {
-  min-width: var(--anchor-width);
-  max-width: min(320px, var(--available-width));
-  overflow: hidden;
-  color: var(--lockerverse-text);
-  background: color-mix(
-    in srgb,
-    var(--lockerverse-control) 96%,
-    var(--lockerverse-bg)
-  );
-  background-clip: padding-box;
-  border: 1px solid color-mix(in srgb, var(--lockerverse-text) 16%, transparent);
-  border-radius: var(--lockerverse-radius);
-  box-shadow: 0 18px 48px rgb(0 0 0 / 48%);
-  opacity: 1;
-  transform: scale(1);
-  transform-origin: var(--transform-origin);
-  transition:
-    transform 100ms ease-out,
-    opacity 100ms ease-out;
-}
-
-.lockerverse-payment__select-popup[data-starting-style],
-.lockerverse-payment__select-popup[data-ending-style] {
-  opacity: 0;
-  transform: scale(0.98);
-}
-
-.lockerverse-payment__select-list {
-  position: relative;
-  max-height: min(320px, var(--available-height));
-  padding: 4px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  outline: none;
-  scroll-padding-block: 4px;
-}
-
-.lockerverse-payment__select-item {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 16px;
-  gap: 10px;
-  align-items: center;
-  min-height: 38px;
-  padding: 8px 10px;
-  font-size: 15px;
-  line-height: 1.35;
-  cursor: default;
-  outline: none;
-  border-radius: 6px;
-}
-
-.lockerverse-payment__select-item[data-highlighted] {
-  background: var(--lockerverse-subtle);
-}
-
-.lockerverse-payment__select-item[data-selected] {
-  font-weight: 600;
-}
-
-.lockerverse-payment__select-item-indicator {
-  display: grid;
-  grid-column: 2;
-  place-items: center;
-  color: var(--lockerverse-accent);
-}
-
-.lockerverse-payment__check-row {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  min-height: 28px;
-  padding: 4px 2px;
-  font-size: 15px;
-  font-weight: 500;
-  line-height: 1.35;
-  color: color-mix(in srgb, var(--lockerverse-text) 86%, transparent);
-}
-
-.lockerverse-payment__check-row input {
-  display: grid;
-  flex: 0 0 auto;
-  place-content: center;
-  width: 20px;
-  height: 20px;
   padding: 0;
   margin: 0;
-  color: var(--lockerverse-accent-contrast);
-  appearance: none;
-  cursor: pointer;
-  background: transparent;
-  border: 1px solid color-mix(in srgb, var(--lockerverse-text) 25%, transparent);
-  border-radius: calc(var(--lockerverse-radius) / 2);
-}
-
-.lockerverse-payment__check-row input::before {
-  width: 11px;
-  height: 7px;
-  content: "";
-  border-bottom: 2.5px solid currentcolor;
-  border-left: 2.5px solid currentcolor;
-  opacity: 0;
-  transform: translateY(-1px) rotate(-45deg) scale(0.7);
-  transition:
-    opacity 100ms ease,
-    transform 100ms ease;
-}
-
-.lockerverse-payment__check-row input:checked {
-  background: var(--lockerverse-accent);
-  border-color: var(--lockerverse-accent);
-}
-
-.lockerverse-payment__check-row input:checked::before {
-  opacity: 1;
-  transform: translateY(-1px) rotate(-45deg) scale(1);
-}
-
-.lockerverse-payment__check-row input[type="radio"] {
-  border-radius: 50%;
-}
-
-.lockerverse-payment__check-row input[type="radio"]::before {
-  width: 10px;
-  height: 10px;
-  background: currentcolor;
   border: 0;
-  border-radius: 50%;
-  transform: scale(0.6);
-}
-
-.lockerverse-payment__check-row input[type="radio"]:checked::before {
-  transform: scale(1);
-}
-
-.lockerverse-payment__tip-box {
-  display: grid;
-  gap: 10px;
-  padding: 12px;
-  background: var(--lockerverse-subtle);
-  border: 1px solid var(--lockerverse-subtle);
-  border-radius: var(--lockerverse-radius);
-}
-
-.lockerverse-payment__tip-box > p {
-  padding-bottom: 8px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.lockerverse-payment__tip-box [role="radiogroup"] {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 6px;
-}
-
-.lockerverse-payment__tip-choice {
-  position: relative;
-  min-width: 0;
-}
-
-.lockerverse-payment__tip-choice input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
 }
 
-.lockerverse-payment .lockerverse-payment__tip-choice > span {
-  display: grid;
-  place-items: center;
-  min-height: 40px;
-  padding: 8px 4px;
-  font: inherit;
+.lockerverse-payment legend {
+  margin-bottom: 8px;
   font-size: 14px;
   font-weight: 600;
-  color: var(--lockerverse-muted);
-  cursor: pointer;
-  background: color-mix(in srgb, var(--lockerverse-bg) 28%, transparent);
-  border: 1px solid color-mix(in srgb, var(--lockerverse-text) 9%, transparent);
-  border-radius: var(--lockerverse-radius);
-  transition:
-    background-color 140ms ease,
-    border-color 140ms ease,
-    color 140ms ease,
-    transform 140ms ease;
 }
 
-.lockerverse-payment__tip-choice:hover span {
-  color: var(--lockerverse-text);
-  background: var(--lockerverse-control);
-}
-
-.lockerverse-payment__tip-choice:active span {
-  transform: translateY(1px);
+.lockerverse-payment__choice {
+  display: flex;
+  grid-template-columns: none;
+  gap: 9px;
+  align-items: center;
 }
 
-.lockerverse-payment__tip-choice input:checked + span {
-  color: var(--lockerverse-accent-contrast);
-  background: var(--lockerverse-accent);
-  border-color: var(--lockerverse-accent);
+.lockerverse-payment input::placeholder {
+  color: var(--lockerverse-placeholder);
 }
 
-.lockerverse-payment__tip-choice input:focus-visible + span {
-  outline: none;
+.lockerverse-payment input:focus-visible,
+.lockerverse-payment select:focus-visible,
+.lockerverse-payment textarea:focus-visible {
   border-color: var(--lockerverse-accent);
-  box-shadow: 0 0 0 1px var(--lockerverse-accent);
+  box-shadow: 0 0 0 2px
+    color-mix(in srgb, var(--lockerverse-accent) 28%, transparent);
 }
 
-.lockerverse-payment__tip-box
-  [role="radiogroup"]
-  .lockerverse-payment__tip-choice:hover
-  input:checked
-  + span {
+.lockerverse-payment button {
+  min-height: 44px;
+  padding: 10px 16px;
+  font: inherit;
+  font-weight: 650;
   color: var(--lockerverse-accent-contrast);
+  cursor: pointer;
   background: var(--lockerverse-accent);
+  border: 1px solid transparent;
+  border-radius: var(--lockerverse-radius);
 }
 
-.lockerverse-payment__money-input {
-  position: relative;
-  display: block;
-}
-
-.lockerverse-payment .lockerverse-payment__money-input > span {
-  position: absolute;
-  top: 50%;
-  left: 13px;
-  z-index: 1;
-  color: var(--lockerverse-muted);
-  pointer-events: none;
-  transform: translateY(-50%);
+.lockerverse-payment button:focus-visible {
+  outline: 2px solid var(--lockerverse-accent);
+  outline-offset: 2px;
 }
 
-.lockerverse-payment__money-input input {
-  padding-left: 28px !important;
+.lockerverse-payment button:disabled {
+  cursor: wait;
+  opacity: 0.58;
 }
 
-.lockerverse-payment__stripe-loader {
-  padding: 12px;
-  background: color-mix(in srgb, var(--lockerverse-text) 2.5%, transparent);
-  border: 1px solid var(--lockerverse-subtle);
-  border-radius: var(--lockerverse-radius);
+.lockerverse-payment__additional-fields button {
+  color: var(--lockerverse-text);
+  background: transparent;
+  border-color: var(--lockerverse-border);
 }
 
-.lockerverse-payment__stripe-loader > p {
+.lockerverse-payment__payment-status,
+.lockerverse-payment [role="alert"] {
   font-size: 14px;
-  font-weight: 500;
-  color: color-mix(in srgb, var(--lockerverse-text) 72%, transparent);
+  color: var(--lockerverse-danger);
 }
 
-.lockerverse-payment__stripe-loader > div {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
+.lockerverse-payment__payment-status button {
   margin-top: 12px;
 }
 
-.lockerverse-payment .lockerverse-payment__stripe-loader span {
-  height: 36px;
-  background: color-mix(in srgb, var(--lockerverse-text) 4.5%, transparent);
-  border-radius: 6px;
-  animation: lockerverse-pulse 1.5s ease-in-out infinite;
-}
-
-.lockerverse-payment__stripe-loader span:first-child {
-  grid-column: 1 / -1;
-  background: color-mix(in srgb, var(--lockerverse-text) 6%, transparent);
-}
-
-.lockerverse-payment__sr-only {
+.lockerverse-payment__stripe-element[hidden] {
   position: absolute;
   width: 1px;
   height: 1px;
-  padding: 0;
-  margin: -1px;
   overflow: hidden;
-  white-space: nowrap;
-  border: 0;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+}
+
+.lockerverse-payment__loading {
+  min-height: 344px;
 }
 
 .lockerverse-payment__skeleton {
   display: grid;
-  gap: 16px;
+  gap: 22px;
 }
 
-.lockerverse-payment__skeleton-branding {
-  display: flex;
-  gap: 14px;
-  align-items: center;
+.lockerverse-payment__skeleton-contact,
+.lockerverse-payment__skeleton-field,
+.lockerverse-payment__skeleton-loader-block,
+.lockerverse-payment__skeleton-actions {
+  display: grid;
+  gap: 9px;
+}
+
+.lockerverse-payment__skeleton-contact {
+  padding-top: 16px;
+  border-top: 1px solid var(--lockerverse-border);
 }
 
-.lockerverse-payment__skeleton-avatar,
-.lockerverse-payment__skeleton-community,
 .lockerverse-payment__skeleton-label,
 .lockerverse-payment__skeleton-input,
 .lockerverse-payment__skeleton-loader-label,
 .lockerverse-payment__skeleton-loader-full,
-.lockerverse-payment__skeleton-loader-half,
-.lockerverse-payment__skeleton-check-line,
 .lockerverse-payment__skeleton-button {
   display: block;
-  background: color-mix(in srgb, var(--lockerverse-text) 8%, transparent);
-  animation: lockerverse-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.lockerverse-payment__skeleton-avatar {
-  flex: none;
-  width: 48px;
-  height: 48px;
-  border-radius: var(--lockerverse-radius);
-}
-
-.lockerverse-payment__skeleton-community {
-  width: 176px;
-  height: 20px;
-  border-radius: 4px;
-}
-
-.lockerverse-payment__skeleton-contact {
-  display: grid;
-  gap: 12px;
-  padding-top: 14px;
-  border-top: 1px solid var(--lockerverse-subtle);
-}
-
-.lockerverse-payment__skeleton-field {
-  display: grid;
-  gap: 8px;
-}
-
-.lockerverse-payment__skeleton-label {
-  width: 48px;
-  height: 16px;
-  border-radius: 4px;
-}
-
-.lockerverse-payment__skeleton-input {
-  width: 100%;
-  height: 48px;
-  background: var(--lockerverse-control);
-  border: 1px solid var(--lockerverse-subtle);
-  border-radius: var(--lockerverse-radius);
-}
-
-.lockerverse-payment__skeleton-loader-block {
-  padding: 12px;
-  background: color-mix(in srgb, var(--lockerverse-text) 2.5%, transparent);
-  border: 1px solid var(--lockerverse-subtle);
-  border-radius: var(--lockerverse-radius);
+  overflow: hidden;
+  background: color-mix(in srgb, var(--lockerverse-text) 9%, transparent);
 }
 
+.lockerverse-payment__skeleton-label,
 .lockerverse-payment__skeleton-loader-label {
-  width: 144px;
-  height: 16px;
-  border-radius: 4px;
-}
-
-.lockerverse-payment__skeleton-loader-content {
-  display: grid;
-  gap: 8px;
-  margin-top: 12px;
+  width: 31%;
+  height: 14px;
+  border-radius: 5px;
 }
 
+.lockerverse-payment__skeleton-input,
 .lockerverse-payment__skeleton-loader-full,
-.lockerverse-payment__skeleton-loader-half {
-  height: 36px;
-  border-radius: 6px;
-}
-
-.lockerverse-payment__skeleton-loader-full {
-  background: color-mix(in srgb, var(--lockerverse-text) 6%, transparent);
-}
-
-.lockerverse-payment__skeleton-loader-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.lockerverse-payment__skeleton-loader-half {
-  background: color-mix(in srgb, var(--lockerverse-text) 4.5%, transparent);
-}
-
-.lockerverse-payment__skeleton-actions {
-  display: grid;
-  gap: 16px;
-  padding: 20px 0 4px;
-}
-
-.lockerverse-payment__skeleton-check-line {
-  width: min(256px, 70%);
-  height: 20px;
-  border-radius: 4px;
-}
-
 .lockerverse-payment__skeleton-button {
-  width: 100%;
   height: 48px;
-  background: color-mix(in srgb, var(--lockerverse-text) 12%, transparent);
-  border-radius: var(--lockerverse-radius);
-}
-
-.lockerverse-payment button[type="submit"] {
-  width: 100%;
-  min-height: 48px;
-  padding: 12px;
-  font: inherit;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.25;
-  color: var(--lockerverse-accent-contrast);
-  cursor: pointer;
-  background: var(--lockerverse-accent);
-  border: 0;
   border-radius: var(--lockerverse-radius);
-  box-shadow: 0 14px 34px rgb(0 0 0 / 34%);
-  transition:
-    filter 140ms ease,
-    transform 140ms ease;
-}
-
-.lockerverse-payment button[type="submit"]:hover {
-  filter: brightness(1.06);
-}
-
-.lockerverse-payment button[type="submit"]:active {
-  transform: translateY(1px);
 }
 
-.lockerverse-payment button:disabled {
-  cursor: wait;
-  opacity: 0.72;
+.lockerverse-payment__skeleton-loader-full {
+  height: 128px;
 }
 
-.lockerverse-payment [role="alert"],
-.lockerverse-payment [id$="-error"] {
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.35;
-  color: var(--lockerverse-danger);
+.lockerverse-payment__skeleton-button {
+  margin-top: 8px;
 }
 
-.lockerverse-payment__field-message:empty {
-  display: none;
+.lockerverse-payment__skeleton-label::after,
+.lockerverse-payment__skeleton-input::after,
+.lockerverse-payment__skeleton-loader-label::after,
+.lockerverse-payment__skeleton-loader-full::after,
+.lockerverse-payment__skeleton-button::after {
+  display: block;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--lockerverse-text) 13%, transparent),
+    transparent
+  );
+  transform: translateX(-100%);
+  animation: lockerverse-skeleton-shimmer 1.25s ease-in-out infinite;
 }
 
-@keyframes lockerverse-pulse {
-  50% {
-    opacity: 0.55;
-  }
+.lockerverse-payment__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
 }
 
-@container (max-width: 360px) {
-  .lockerverse-payment__phone-control {
-    grid-template-columns: 78px minmax(0, 1fr);
-  }
-
-  .lockerverse-payment__tip-box [role="radiogroup"] {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  .lockerverse-payment__tip-choice {
-    grid-column: span 2;
-  }
-
-  .lockerverse-payment__tip-box
-    [role="radiogroup"]
-    .lockerverse-payment__tip-choice:nth-last-child(-n + 2) {
-    grid-column: span 3;
+@keyframes lockerverse-skeleton-shimmer {
+  to {
+    transform: translateX(100%);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .lockerverse-payment *,
-  .lockerverse-payment *::before,
-  .lockerverse-payment *::after {
-    scroll-behavior: auto !important;
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
+  .lockerverse-payment__skeleton-label::after,
+  .lockerverse-payment__skeleton-input::after,
+  .lockerverse-payment__skeleton-loader-label::after,
+  .lockerverse-payment__skeleton-loader-full::after,
+  .lockerverse-payment__skeleton-button::after {
+    animation: none;
   }
 }