.torobpay-widget { --torobpay-widget-bg: #ffffff; --torobpay-widget-border: #ebecf2; --torobpay-widget-text: #1a1c23; --torobpay-widget-accent: #9CE76A; --torobpay-widget-accent-dark: #003D01; padding: 16px; display: flex; align-items: center; gap: 8px; width: 100%; margin: 10px 0; transition: opacity 200ms ease-in-out, box-shadow 150ms ease-in-out, transform 150ms ease-in-out; border-style: solid; border-radius: 16px; border: 1px solid var(--torobpay-widget-border); background-color: var(--torobpay-widget-bg); color: var(--torobpay-widget-text); position: relative; cursor: pointer; user-select: none; box-sizing: border-box; } .torobpay-widget:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); transform: translateY(-1px); } .torobpay-widget:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } .torobpay-widget--mint { padding-inline-start: 20px; overflow: hidden; } .torobpay-widget--mint::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: linear-gradient(180deg, var(--torobpay-widget-accent) 0%, var(--torobpay-widget-accent-dark) 100%); pointer-events: none; } .torobpay-widget--mint .torobpay-widget-title { letter-spacing: -0.2px; } .torobpay-widget--stacked { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 20px 16px; } .torobpay-widget--stacked .torobpay-widget-media { order: 0; } .torobpay-widget--stacked .torobpay-widget-content { order: 1; width: 100%; } .torobpay-widget--stacked .torobpay-widget-image { width: 72px; } .torobpay-widget--stacked .torobpay-widget-title { margin-bottom: 4px; } .torobpay-widget--compact { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 0; padding: 8px 14px 8px 10px; width: auto; max-width: 100%; } .torobpay-widget--compact .torobpay-widget-media { grid-column: 1; grid-row: 1 / span 2; align-self: center; } .torobpay-widget--compact .torobpay-widget-content { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .torobpay-widget--compact .torobpay-widget-image { width: 36px; border-radius: 10px; } .torobpay-widget--compact .torobpay-widget-title { line-height: 140%; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .torobpay-widget--compact .torobpay-widget-description { line-height: 140%; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .torobpay-widget--compact .torobpay-widget-media.torobpay-logo-light-sweep { border-radius: 10px; } @keyframes torobpay-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .torobpay-widget-highlight { animation: torobpay-shake 0.45s ease-in-out; outline: 2px solid #ff6b35; outline-offset: 2px; } .torobpay-widget-image { width: 60px; height: auto; border-radius: 15px; display: block; } .torobpay-widget-media { display: flex; align-items: center; } .torobpay-widget-content { color: #1a1c23; } .torobpay-widget-title { font-size: 14px; font-weight: bold; line-height: 180%; margin-bottom: 2px; } .torobpay-widget-description { font-weight: 300; font-size: 12px; line-height: 180%; letter-spacing: -0.36px; } #torobpay-variation-widget-container { opacity: 1; transition: opacity 200ms ease-in-out; } #torobpay-variation-widget-container.torobpay-loading, .torobpay-widget.torobpay-loading { opacity: 0.5; pointer-events: none; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes wobble { 0%, 100% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-15px); } 60% { transform: translateY(-7px); } } @keyframes ping { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(156, 231, 106, 0.45); } 70% { transform: scale(1.05); box-shadow: 0 0 0 18px rgba(156, 231, 106, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(156, 231, 106, 0); } } .torobpay-logo-pulse { animation: pulse 1s ease-in-out infinite; } .torobpay-logo-wobble { animation: wobble 1.2s ease-in-out infinite; } .torobpay-logo-bounce { animation: bounce 1.2s ease-in-out infinite; } .torobpay-logo-ping { animation: ping 1.6s ease-out infinite; } .torobpay-widget-media.torobpay-logo-light-sweep { position: relative; overflow: hidden; border-radius: 15px; } .torobpay-widget-media.torobpay-logo-light-sweep::after { content: ''; position: absolute; top: -35%; left: 0; width: 60%; height: 170%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(0) rotate(25deg); opacity: 0; pointer-events: none; animation: torobpay-light-sweep 1.8s ease-in-out infinite; } .torobpay-widget-status-indicator { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; pointer-events: none; } .torobpay-widget-status-indicator .torobpay-status-heartbeat, .torobpay-widget-status-indicator .torobpay-status-dot { position: absolute; inset: 0; border-radius: 9999px; } .torobpay-widget-status-indicator .torobpay-status-dot { background: #9ce76a; } .torobpay-widget-status-indicator .torobpay-status-heartbeat { background: #9ce76a; opacity: 0.7; animation: torobpay-status-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes torobpay-status-ping { 0% { transform: scale(1); opacity: 0.7; } 75% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.3); opacity: 0; } } @keyframes torobpay-light-sweep { 0% { transform: translateX(-120%) rotate(25deg); opacity: 0; } 30% { opacity: 0.85; } 60% { transform: translateX(160%) rotate(25deg); opacity: 0; } 100% { transform: translateX(160%) rotate(25deg); opacity: 0; } } .products .product, li.product, .wc-block-grid__product, .wp-block-post, .xts-products .xts-col { position: relative !important; } .torobpay-product-badge { position: absolute; top: 8px; right: 8px; z-index: 99; direction: rtl; margin: 0; pointer-events: none; } .torobpay-product-badge-inner { pointer-events: auto; } .torobpay-product-badge-inner { display: inline-flex; align-items: center; gap: 0; padding: 0; border: 1px solid #9ce76a; border-radius: 999px; background-color: #ffffff; transition: padding 300ms ease, box-shadow 300ms ease; overflow: hidden; } .torobpay-product-badge-icon { width: auto !important; height: 24px !important; margin: 0 !important; flex-shrink: 0 !important; display: block !important; transition: transform 300ms ease; max-width: none !important; min-width: 0 !important; max-height: none !important; min-height: 0 !important; object-fit: contain !important; } .torobpay-product-badge-text { max-width: 0; opacity: 0; margin-left: 0; white-space: nowrap; overflow: hidden; transition: max-width 300ms ease, opacity 300ms ease, margin-left 300ms ease, margin-right 300ms ease; font-size: 12px; font-weight: 500; } .torobpay-product-badge .amount, .torobpay-product-badge .woocommerce-Price-amount, .torobpay-product-badge .woocommerce-Price-currencySymbol, .torobpay-widget .amount, .torobpay-widget .woocommerce-Price-amount, .torobpay-widget .woocommerce-Price-currencySymbol { color: inherit; font-weight: inherit; } .torobpay-product-badge:hover .torobpay-product-badge-inner { box-shadow: 0 6px 16px rgba(0, 61, 1, 0.12); } .torobpay-product-badge:hover .torobpay-product-badge-text { max-width: 240px; opacity: 1; margin-right: 5px; margin-left: 9px; } .torobpay-compat-badge { position: absolute !important; z-index: 999 !important; } .product-thumbnail, .product-image, .product-img, .woocommerce-loop-product__link, a.woocommerce-LoopProduct-link { position: relative !important; } .elementor-widget-wc-products .product, .elementor-product { position: relative !important; } .product-item, .product-card, .woo-product, .product-grid-item { position: relative !important; } .jet-listing-grid__item, .jet-woo-products__item, .jet-woo-builder-archive-product { position: relative !important; } .jet-listing-grid__item .elementor-widget-image, .jet-listing-grid__item .jet-listing-dynamic-field, .jet-woo-products__item .jet-woo-product-thumbnail, .jet-woo-products__item .product-image { overflow: visible !important; } .product-thumbnail, .product-image, .product-img { overflow: visible !important; }