.app-container{display:flex;flex-wrap:wrap;justify-content:center;padding:20px;gap:20px}.product-card{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px #0000001a;width:280px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.product-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0000001a}.product-image{width:100%;height:200px;object-fit:cover}.product-info{padding:15px;text-align:center}.product-name{font-size:18px;font-weight:700;margin-bottom:10px;color:#333}.product-description{font-size:14px;color:#777;margin-bottom:15px;line-height:1.4}.product-price{display:flex;justify-content:center;margin-top:10px}.pay-button{background-color:#007bff;color:#fff;font-size:16px;font-weight:700;padding:10px 15px;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.pay-button:hover{background-color:#0056b3}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.app-container{text-align:center;padding:20px;font-family:Arial,sans-serif}.title{font-size:2rem;margin-bottom:20px}.product-card{display:inline-block;background-color:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 4px 6px #0000001a;width:300px;margin:20px auto;padding:20px;text-align:center;transition:transform .3s}.product-card:hover{transform:scale(1.01);box-shadow:10px 10px 10px #0006}.product-image{height:200px;border-radius:8px}.product-info{margin-top:15px}.product-name{font-size:1.4rem;font-weight:700;margin:10px 0}.product-description{font-size:1rem;color:#666;margin-bottom:10px}.product-price{font-size:1.2rem;font-weight:700;color:#333;margin-top:10px}.pay-button{background-color:#4caf50;color:#fff;padding:12px 24px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}.pay-button:hover{background-color:#07810d}.payment-status{text-align:center;padding:20px;font-family:Arial,sans-serif;border-radius:8px;width:80%;max-width:400px;margin:0 auto;box-shadow:0 4px 8px #0000001a}.payment-status h2{font-size:1.8rem;margin-bottom:15px}.payment-status p{font-size:1.2rem;color:#555;margin-bottom:20px}.home-button{background-color:#4caf50;color:#fff;padding:12px 24px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}.home-button:hover{background-color:#45a049}.payment-status.success{background-color:#e0ffe0;border:2px solid #4caf50}.payment-status.success h2{color:#4caf50}.payment-status.cancel{background-color:#ffe0e0;border:2px solid #f44336}.payment-status.cancel h2{color:#f44336}.payment-status.cancel .home-button{background-color:#f44336}.payment-status.cancel .home-button:hover{background-color:#d32f2f}
