@ecomiq/storefront 1.1.9 → 2.0.1

package/dist/react/checkout-page.css

@@ -1,855 +0,0 @@
-@import "./payment-provider.css";
-/* Shopify-like checkout — layout autocontenido */
-.ecomiq-checkout-page {
-  --ecp-bg: #ffffff;
-  --ecp-summary-bg: #f5f5f5;
-  --ecp-border: #d9d9d9;
-  --ecp-text: #121212;
-  --ecp-muted: #6d6d6d;
-  --ecp-accent: #121212;
-  min-height: 100dvh;
-  background: var(--ecp-bg);
-  color: var(--ecp-text);
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Helvetica,
-    Arial,
-    sans-serif;
-  font-size: 14px;
-  line-height: 1.4;
-}
-
-.ecomiq-checkout-page__top {
-  border-bottom: 1px solid var(--ecp-border);
-  padding: 1.25rem 1.5rem;
-  text-align: center;
-  background: var(--ecp-bg);
-  display: flex;
-  justify-content: center;
-}
-
-.ecomiq-checkout-page__logo {
-  font-size: 1.5rem;
-  font-weight: 700;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-  text-decoration: none;
-  color: inherit;
-}
-
-.ecomiq-checkout-page__logo img {
-  max-height: 2.5rem;
-  width: auto;
-}
-
-.ecomiq-checkout-page__layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  min-height: calc(100dvh - 73px);
-}
-
-@media (max-width: 999px) {
-  .ecomiq-checkout-page__layout {
-    grid-template-columns: 1fr;
-  }
-  .ecomiq-checkout-page__summary-wrap {
-    order: -1;
-    border-bottom: 1px solid var(--ecp-border);
-  }
-}
-
-/* Formulario: anclado al borde interior (centro), como Shopify */
-.ecomiq-checkout-page__main-wrap {
-  box-sizing: border-box;
-  justify-self: end;
-  max-width: 36rem;
-  width: 100%;
-  padding: 2.5rem clamp(1.5rem, 5vw, 4.5rem) 2.5rem clamp(1.5rem, 5vw, 4.5rem);
-}
-
-/* Panel gris a ancho completo; contenido del resumen desde el centro hacia afuera */
-.ecomiq-checkout-page__summary-wrap {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 100%;
-  background: var(--ecp-summary-bg);
-  border-left: 1px solid var(--ecp-border);
-  padding: 2.5rem clamp(1.5rem, 5vw, 4.5rem);
-  display: flex;
-  justify-content: flex-start;
-}
-
-.ecomiq-checkout-page__summary-wrap > * {
-  flex: 0 1 24rem;
-  max-width: 24rem;
-  width: 100%;
-}
-
-@media (min-width: 1000px) {
-  .ecomiq-checkout-page__summary-wrap > * {
-    align-self: flex-start;
-  }
-
-  .ecomiq-checkout-page__summary {
-    position: sticky;
-    top: 1.5rem;
-    max-height: calc(100dvh - 3rem);
-    overflow-y: auto;
-    padding-top: 5px;
-  }
-}
-
-@media (max-width: 999px) {
-  .ecomiq-checkout-page__main-wrap {
-    justify-self: stretch;
-    max-width: 36rem;
-    margin-inline: auto;
-  }
-
-  .ecomiq-checkout-page__summary-wrap {
-    border-left: none;
-    justify-content: center;
-  }
-
-  .ecomiq-checkout-page__summary-wrap > * {
-    flex-basis: 36rem;
-    max-width: 36rem;
-  }
-}
-
-.ecomiq-checkout-page__section {
-  margin-bottom: 2rem;
-}
-
-.ecomiq-checkout-page__section h2 {
-  margin: 0 0 1rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.ecomiq-checkout-page__section-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-
-.ecomiq-checkout-page__section-head h2 {
-  margin: 0;
-}
-
-.ecomiq-checkout-page__link {
-  color: var(--ecp-accent);
-  text-decoration: underline;
-  font-size: 0.875rem;
-}
-
-.ecomiq-checkout-page__field {
-  display: block;
-  margin-bottom: 0.75rem;
-}
-
-.ecomiq-checkout-page__field--half {
-  flex: 1;
-  min-width: 0;
-}
-
-.ecomiq-checkout-page__label {
-  display: block;
-  font-size: 0.8125rem;
-  color: var(--ecp-muted);
-  margin-bottom: 0.35rem;
-}
-
-.ecomiq-checkout-page__input,
-.ecomiq-checkout-page__field select {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0.7rem 0.75rem;
-  border: 1px solid var(--ecp-border);
-  border-radius: 5px;
-  font-size: 0.9375rem;
-  background: #fff;
-  color: var(--ecp-text);
-}
-
-.ecomiq-checkout-page__input:focus,
-.ecomiq-checkout-page__field select:focus {
-  outline: 2px solid #1773b0;
-  outline-offset: 1px;
-  border-color: #1773b0;
-}
-
-.ecomiq-checkout-page__row {
-  display: flex;
-  gap: 0.75rem;
-}
-
-.ecomiq-checkout-page__row--3 {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.75rem;
-}
-
-@media (max-width: 640px) {
-  .ecomiq-checkout-page__row--3 {
-    grid-template-columns: 1fr;
-  }
-}
-
-.ecomiq-checkout-page__checkbox {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
-}
-
-.ecomiq-checkout-page__hint {
-  color: var(--ecp-muted);
-  font-size: 0.875rem;
-  margin: 0 0 0.75rem;
-}
-
-.ecomiq-checkout-page__field-error {
-  color: #c62828;
-  font-size: 0.875rem;
-  margin: 0 0 1rem;
-}
-
-.ecomiq-checkout-page__field-error-inline {
-  color: #c62828;
-  font-size: 0.8125rem;
-  display: block;
-  margin-top: 0.35rem;
-}
-
-.ecomiq-checkout-page__input--error {
-  border-color: #c62828;
-}
-
-.ecomiq-checkout-page__input--error:focus {
-  outline-color: #c62828;
-  border-color: #c62828;
-}
-
-.ecomiq-checkout-page__options--error {
-  border-color: #c62828;
-}
-
-.ecomiq-checkout-page__options {
-  border: 1px solid var(--ecp-border);
-  border-radius: 5px;
-  overflow: hidden;
-  background: #fff;
-}
-
-.ecomiq-checkout-page__option {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-bottom: 1px solid var(--ecp-border);
-  cursor: pointer;
-  margin: 0;
-}
-
-.ecomiq-checkout-page__option:last-child {
-  border-bottom: none;
-}
-
-.ecomiq-checkout-page__option.is-selected {
-  background: #f0f5ff;
-  box-shadow: inset 0 0 0 1px #1773b0;
-}
-
-.ecomiq-checkout-page__option input {
-  margin-top: 0.2rem;
-  flex-shrink: 0;
-}
-
-.ecomiq-checkout-page__option-body {
-  flex: 1;
-  min-width: 0;
-}
-
-.ecomiq-checkout-page__option-title {
-  display: block;
-  font-weight: 500;
-}
-
-.ecomiq-checkout-page__option-sub {
-  display: block;
-  font-size: 0.8125rem;
-  color: var(--ecp-muted);
-  margin-top: 0.15rem;
-}
-
-.ecomiq-checkout-page__option-price {
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.ecomiq-checkout-page__pay {
-  width: 100%;
-  margin-top: 0.5rem;
-  padding: 1.1rem 1.5rem;
-  border: none;
-  border-radius: 5px;
-  background: var(--ecp-accent);
-  color: #fff;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.ecomiq-checkout-page__pay:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.ecomiq-checkout-page__manual-payment {
-  margin-top: 1rem;
-  border: 1px solid var(--ecp-border);
-  border-radius: 5px;
-  background: #fafafa;
-  padding: 1rem;
-}
-
-.ecomiq-checkout-page__manual-payment-body {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-@media (min-width: 640px) {
-  .ecomiq-checkout-page__manual-payment-body {
-    flex-direction: row;
-  }
-}
-
-.ecomiq-checkout-page__manual-payment-qr {
-  width: 9rem;
-  height: 9rem;
-  flex-shrink: 0;
-  display: grid;
-  place-items: center;
-  border: 1px solid var(--ecp-border);
-  border-radius: 5px;
-  background: #fff;
-  padding: 0.5rem;
-}
-
-.ecomiq-checkout-page__manual-payment-qr img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.ecomiq-checkout-page__manual-payment-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.ecomiq-checkout-page__manual-payment-title {
-  font-weight: 600;
-  margin: 0 0 0.35rem;
-}
-
-.ecomiq-checkout-page__manual-payment-row {
-  display: grid;
-  grid-template-columns: 7rem 1fr;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  margin: 0.35rem 0 0;
-}
-
-.ecomiq-checkout-page__manual-payment-row span {
-  color: var(--ecp-muted);
-}
-
-.ecomiq-checkout-page__receipt-upload {
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--ecp-border);
-}
-
-.ecomiq-checkout-page__receipt-label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.35rem;
-  padding: 0.65rem 0.75rem;
-  border: 1px solid var(--ecp-border);
-  border-radius: 5px;
-  background: #fff;
-  font-size: 0.875rem;
-  cursor: pointer;
-}
-
-.ecomiq-checkout-page__receipt-input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-.ecomiq-checkout-page__receipt-preview {
-  display: block;
-  margin-top: 0.5rem;
-  max-height: 7rem;
-  max-width: 100%;
-  border: 1px solid var(--ecp-border);
-  border-radius: 5px;
-  object-fit: contain;
-}
-
-.ecomiq-checkout-page__payment-provider {
-  margin-top: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.ecomiq-checkout-page__provider-confirm {
-  width: 100%;
-  padding: 0.85rem 1.25rem;
-  border: none;
-  border-radius: 5px;
-  background: var(--ecp-accent);
-  color: #fff;
-  font-size: 0.875rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.ecomiq-checkout-page__provider-confirm:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.ecomiq-checkout-page__policies {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem 1rem;
-  justify-content: center;
-  margin-top: 1.25rem;
-  font-size: 0.75rem;
-}
-
-.ecomiq-checkout-page__policies a {
-  color: var(--ecp-muted);
-  text-decoration: underline;
-}
-
-/* Order summary (right column) */
-.ecomiq-checkout-page__summary-items {
-  list-style: none;
-  margin: 0 0 1.25rem;
-  padding: 0;
-}
-
-.ecomiq-checkout-page__summary-item {
-  display: flex;
-  gap: 1rem;
-  align-items: flex-start;
-  margin-bottom: 1rem;
-}
-
-.ecomiq-checkout-page__summary-thumb {
-  position: relative;
-  width: 64px;
-  height: 64px;
-  flex-shrink: 0;
-  border-radius: 8px;
-  border: 1px solid rgb(0 0 0 / 0.08);
-  background: #fff;
-}
-
-.ecomiq-checkout-page__summary-thumb-image {
-  overflow: hidden;
-  border-radius: 8px;
-}
-
-.ecomiq-checkout-page__summary-thumb img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.ecomiq-checkout-page__summary-thumb-ph {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: #e5e5e5;
-}
-
-.ecomiq-checkout-page__summary-qty {
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  min-width: 1.25rem;
-  height: 1.25rem;
-  padding: 0 0.25rem;
-  border-radius: 999px;
-  background: rgb(0 0 0 / 0.7);
-  color: #fff;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ecomiq-checkout-page__summary-item-body {
-  flex: 1;
-  min-width: 0;
-}
-
-.ecomiq-checkout-page__summary-item-title {
-  margin: 0;
-  font-weight: 500;
-  font-size: 0.875rem;
-}
-
-.ecomiq-checkout-page__summary-item-meta {
-  margin: 0.2rem 0 0;
-  font-size: 0.8125rem;
-  color: var(--ecp-muted);
-}
-
-.ecomiq-checkout-page__summary-item-price {
-  margin: 0;
-  font-weight: 500;
-  font-size: 0.875rem;
-}
-
-.ecomiq-checkout-page__discount {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.ecomiq-checkout-page__discount .ecomiq-checkout-page__input {
-  flex: 1;
-}
-
-.ecomiq-checkout-page__discount-apply {
-  padding: 0 1rem;
-  border: 1px solid var(--ecp-border);
-  border-radius: 5px;
-  background: #f0f0f0;
-  color: var(--ecp-muted);
-  font-size: 0.875rem;
-  cursor: pointer;
-}
-
-.ecomiq-checkout-page__discount-apply:not(:disabled) {
-  background: #fff;
-  color: var(--ecp-text);
-  cursor: pointer;
-}
-
-.ecomiq-checkout-page__coupon-tags {
-  list-style: none;
-  margin: 0 0 1rem;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.ecomiq-checkout-page__coupon-tags li {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.25rem 0.5rem;
-  background: #fff;
-  border: 1px solid var(--ecp-border);
-  border-radius: 4px;
-  font-size: 0.8125rem;
-}
-
-.ecomiq-checkout-page__coupon-tags button {
-  border: none;
-  background: none;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-}
-
-.ecomiq-checkout-page__totals {
-  margin: 0;
-}
-
-.ecomiq-checkout-page__totals-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-}
-
-.ecomiq-checkout-page__totals-row dt {
-  color: var(--ecp-muted);
-}
-
-.ecomiq-checkout-page__totals-row dd {
-  margin: 0;
-}
-
-.ecomiq-checkout-page__totals-row--total {
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--ecp-border);
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.ecomiq-checkout-page__totals-row--total dt {
-  color: var(--ecp-text);
-}
-
-.ecomiq-checkout-page__total-currency {
-  font-size: 0.75rem;
-  font-weight: 400;
-  color: var(--ecp-muted);
-  margin-right: 0.35rem;
-}
-
-.ecomiq-checkout-page__state {
-  padding: 3rem 1.5rem;
-  text-align: center;
-  max-width: 24rem;
-  margin: 0 auto;
-}
-
-.ecomiq-checkout-page__state h1 {
-  font-size: 1.25rem;
-  margin: 0 0 0.5rem;
-}
-
-.ecomiq-checkout-page__state p {
-  color: var(--ecp-muted);
-  margin: 0 0 1rem;
-}
-
-.ecomiq-checkout-page__external-cart-banner {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem 1rem;
-  margin: 0;
-  padding: 0.4rem 1.25rem;
-  background: #fff8e6;
-  border-bottom: 1px solid #f0d590;
-  color: #5c4a12;
-  font-size: 0.875rem;
-}
-
-.ecomiq-checkout-page__external-cart-banner p {
-  margin: 0;
-  flex: 1 1 16rem;
-}
-
-.ecomiq-checkout-page__external-cart-reload {
-  flex-shrink: 0;
-  padding: 0.4rem 0.75rem;
-  border: 1px solid #5c4a12;
-  border-radius: 6px;
-  background: #5c4a12;
-  color: #fff;
-  font-size: 0.75rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.ecomiq-checkout-page__external-cart-reload:hover {
-  background: #46380e;
-  border-color: #46380e;
-}
-
-/* Loading skeleton */
-@keyframes ecomiq-checkout-skeleton-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.ecomiq-checkout-page--skeleton .ecomiq-checkout-page__skeleton-block {
-  background: linear-gradient(
-    90deg,
-    rgb(0 0 0 / 0.06) 0%,
-    rgb(0 0 0 / 0.1) 50%,
-    rgb(0 0 0 / 0.06) 100%
-  );
-  background-size: 200% 100%;
-  animation: ecomiq-checkout-skeleton-shimmer 1.4s ease-in-out infinite;
-  border-radius: 6px;
-}
-
-.ecomiq-checkout-page__skeleton-title {
-  height: 1.125rem;
-  width: 6rem;
-  margin-bottom: 1rem;
-}
-
-.ecomiq-checkout-page__section-head .ecomiq-checkout-page__skeleton-title {
-  margin-bottom: 0;
-}
-
-.ecomiq-checkout-page__skeleton-link {
-  height: 0.875rem;
-  width: 3.5rem;
-  border-radius: 4px;
-}
-
-.ecomiq-checkout-page__skeleton-field {
-  height: 2.75rem;
-  width: 100%;
-  margin-bottom: 0.75rem;
-}
-
-.ecomiq-checkout-page__skeleton-field--half {
-  flex: 1;
-  min-width: 0;
-}
-
-.ecomiq-checkout-page__skeleton-field--third {
-  flex: 1;
-  min-width: 0;
-}
-
-.ecomiq-checkout-page__skeleton-row {
-  display: flex;
-  gap: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
-.ecomiq-checkout-page__skeleton-row .ecomiq-checkout-page__skeleton-field {
-  margin-bottom: 0;
-}
-
-.ecomiq-checkout-page__skeleton-checkbox {
-  height: 1.25rem;
-  width: 14rem;
-  margin-top: 0.25rem;
-}
-
-.ecomiq-checkout-page__skeleton-option {
-  height: 3.5rem;
-  width: 100%;
-  margin-bottom: 0.5rem;
-  border-radius: 8px;
-}
-
-.ecomiq-checkout-page__skeleton-button {
-  height: 3rem;
-  width: 100%;
-  margin-top: 0.5rem;
-  border-radius: 8px;
-}
-
-.ecomiq-checkout-page__skeleton-summary-item {
-  display: flex;
-  gap: 1rem;
-  align-items: flex-start;
-  margin-bottom: 1.25rem;
-}
-
-.ecomiq-checkout-page__skeleton-thumb {
-  width: 64px;
-  height: 64px;
-  flex-shrink: 0;
-  border-radius: 8px;
-}
-
-.ecomiq-checkout-page__skeleton-summary-body {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding-top: 0.25rem;
-}
-
-.ecomiq-checkout-page__skeleton-line {
-  height: 0.875rem;
-  width: 100%;
-}
-
-.ecomiq-checkout-page__skeleton-line--short {
-  width: 55%;
-}
-
-.ecomiq-checkout-page__skeleton-line--xs {
-  width: 3rem;
-}
-
-.ecomiq-checkout-page__skeleton-line--price {
-  width: 4.5rem;
-  height: 1.125rem;
-}
-
-.ecomiq-checkout-page__skeleton-price {
-  width: 3.5rem;
-  height: 0.875rem;
-  flex-shrink: 0;
-}
-
-.ecomiq-checkout-page__skeleton-coupon {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1.25rem;
-}
-
-.ecomiq-checkout-page__skeleton-coupon-input {
-  flex: 1;
-  height: 2.75rem;
-  border-radius: 8px;
-}
-
-.ecomiq-checkout-page__skeleton-coupon-btn {
-  width: 4.5rem;
-  height: 2.75rem;
-  border-radius: 8px;
-  flex-shrink: 0;
-}
-
-.ecomiq-checkout-page__skeleton-totals {
-  display: flex;
-  flex-direction: column;
-  gap: 0.65rem;
-}
-
-.ecomiq-checkout-page__skeleton-total-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-
-.ecomiq-checkout-page__skeleton-total-row--final {
-  margin-top: 0.75rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--ecp-border);
-}
-
-.ecomiq-checkout-page--skeleton .ecomiq-checkout-page__summary-wrap {
-  pointer-events: none;
-}
-
-.ecomiq-checkout-page--skeleton .ecomiq-checkout-page__main-wrap {
-  pointer-events: none;
-}