.checkout-layout{min-height:100vh;display:flex;flex-direction:column;--un-bg-opacity:1;background-color:rgb(249 250 251 / var(--un-bg-opacity))}.dark .checkout-layout{--un-bg-opacity:1;background-color:rgb(17 24 39 / var(--un-bg-opacity))}.site-header{grid-area:header;position:sticky;top:0;width:100%;z-index:600}.checkout-progress-container{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));border-bottom-width:1px;--un-border-opacity:1;border-color:rgb(243 244 246 / var(--un-border-opacity))}.dark .checkout-progress-container{--un-bg-opacity:1;background-color:rgb(17 24 39 / var(--un-bg-opacity))}.dark .checkout-progress-container{--un-border-opacity:1;border-color:rgb(31 41 55 / var(--un-border-opacity))}.checkout-progress{position:relative}.progress-line-bg{background:linear-gradient(90deg,#e5e7eb,#e5e7eb);border-radius:10px;height:2px;left:60px;position:absolute;right:60px;top:28px;z-index:0}.progress-line-active{height:2px;left:60px;position:absolute;top:28px;--un-bg-opacity:1;background-color:rgb(245 13 0 / var(--un-bg-opacity));border-radius:10px;transition:width .6s cubic-bezier(.4,0,.2,1);z-index:1}.steps-grid{position:relative;display:flex;align-items:flex-start;justify-content:space-between;z-index:2}.step-item{display:flex;flex-direction:column;align-items:center;text-align:center}.step-circle{width:3.5rem;height:3.5rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;--un-bg-opacity:1;background-color:rgb(243 244 246 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:.5s;transition-timing-function:cubic-bezier(0,0,.2,1);border-width:3px;--un-border-opacity:1;border-color:rgb(255 255 255 / var(--un-border-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow);position:relative;z-index:3}.dark .step-circle{--un-border-opacity:1;border-color:rgb(17 24 39 / var(--un-border-opacity))}.step-circle:before{background:linear-gradient(135deg,transparent,transparent);border-radius:50%;content:"";top:-4px;right:-4px;bottom:-4px;left:-4px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:4px;position:absolute;transition:all .5s ease}.step-circle.step-active{--un-bg-opacity:1;background-color:rgb(245 13 0 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));--un-scale-x:1.05;--un-scale-y:1.05;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.step-circle.step-active:before{background:transparent}.step-circle.step-completed{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgb(5 150 105 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));box-shadow:0 8px 20px -4px #22c55e66,0 4px 8px -3px #22c55e4d}.step-icon-default{font-size:1.25rem;line-height:1.75rem;transition:all .3s ease}.step-circle.step-active .step-icon-default,.step-circle.step-completed .step-icon-default{transform:scale(1.1)}.step-icon-check{font-size:1.25rem;line-height:1.75rem;animation:checkBounce .6s cubic-bezier(.68,-.55,.265,1.55)}@keyframes checkBounce{0%{opacity:0;transform:scale(0) rotate(-180deg)}50%{transform:scale(1.3) rotate(10deg)}to{opacity:1;transform:scale(1) rotate(0)}}.step-text-wrapper{margin-top:.75rem}.step-text-wrapper>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(.125rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(.125rem * var(--un-space-y-reverse))}.step-number{font-size:.75rem;line-height:1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:.3s}.step-number-active{--un-text-opacity:1;color:rgb(245 13 0 / var(--un-text-opacity))}.step-title{font-size:.875rem;line-height:1.25rem;font-weight:700;--un-text-opacity:1;color:rgb(107 114 128 / var(--un-text-opacity));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:.3s}.step-title-active{--un-text-opacity:1;color:rgb(17 24 39 / var(--un-text-opacity))}.dark .step-title-active{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity))}@media(max-width:1024px){.steps-grid{gap:.5rem}.step-circle{width:3.5rem;height:3.5rem}.step-icon-check,.step-icon-default{font-size:1.25rem;line-height:1.75rem}.step-title{font-size:.75rem;line-height:1rem}.step-number{@apply text-2xs;}}@media(max-width:768px){.checkout-progress{padding-left:.5rem;padding-right:.5rem}.steps-grid{gap:.25rem}.step-circle{width:3rem;height:3rem}.step-circle.step-active{--un-scale-x:1.05;--un-scale-y:1.05;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.progress-line-active,.progress-line-bg{left:8%;right:8%;top:24px}.step-icon-check,.step-icon-default{font-size:1.125rem;line-height:1.75rem}.step-text-wrapper{margin-top:.75rem}.step-number{display:none}.step-title{@apply text-2xs;}}@media(max-width:640px){.step-circle{width:2.5rem;height:2.5rem}.step-icon-check,.step-icon-default{font-size:1rem;line-height:1.5rem}.step-title{font-size:.65rem}}