html,body,#root{width:100%;min-height:100vh}body{background:#f6f7fb;font-family:Inter,sans-serif}.checkout-page{min-height:100vh;padding:30px}.checkout-header{text-align:center;margin-bottom:30px}.checkout-header h1{color:#4f46e5}.checkout-container{grid-template-columns:2fr 1fr;gap:30px;max-width:1300px;margin:auto;display:grid}.left-panel,.right-panel{background:#fff;border-radius:20px;padding:25px;box-shadow:0 8px 30px #0000000f}.address-card{background:#f8fafc;border-radius:15px;margin-bottom:25px;padding:20px}.product-card{border:1px solid #eee;border-radius:15px;align-items:center;gap:20px;margin-bottom:15px;padding:20px;display:flex}.product-card img{object-fit:cover;border-radius:12px;width:120px;height:120px}.product-info{flex:1}.price{font-size:20px;font-weight:700}.summary-row{justify-content:space-between;margin:16px 0;display:flex}.total{font-size:24px;font-weight:700}.pay-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;border-radius:14px;width:100%;margin-top:20px;padding:18px;font-size:18px;font-weight:600}.pay-btn:hover{opacity:.95}.secure-box{text-align:center;background:#f8fafc;border-radius:12px;margin-top:20px;padding:15px}@media (width<=900px){.checkout-container{grid-template-columns:1fr}.product-card{text-align:center;flex-direction:column}}.user-selector-container{justify-content:center;align-items:center;gap:10px;margin-top:15px;display:flex}.user-select-dropdown{color:#374151;cursor:pointer;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;outline:none;padding:8px 12px;font-family:inherit;font-size:14px;transition:border-color .15s ease-in-out}.user-select-dropdown:focus{border-color:#4f46e5}.mock-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#0f172ab3;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s fadeIn;display:flex;position:fixed;top:0;left:0}.mock-modal{text-align:center;background:#fff;border-radius:24px;width:90%;max-width:480px;padding:35px;animation:.3s cubic-bezier(.16,1,.3,1) slideUp;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.mock-modal h2{color:#1e293b;margin-bottom:8px;font-size:22px;font-weight:700}.mock-modal p.mock-desc{color:#64748b;margin-bottom:24px;font-size:14px;line-height:1.5}.mock-details{text-align:left;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;margin-bottom:24px;padding:20px}.mock-details-row{justify-content:space-between;margin-bottom:12px;font-size:14px;display:flex}.mock-details-row:last-child{border-top:1px dashed #cbd5e1;margin-bottom:0;padding-top:12px;font-size:16px;font-weight:700}.mock-value{color:#0f172a}.mock-options-title{color:#334155;text-align:left;margin-bottom:12px;font-size:14px;font-weight:600}.mock-options-group{background:#f1f5f9;border-radius:12px;justify-content:space-around;margin-bottom:28px;padding:10px;display:flex}.mock-option-label{color:#475569;cursor:pointer;align-items:center;gap:8px;font-size:14px;font-weight:500;display:flex}.mock-btn-simulate{color:#fff;cursor:pointer;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:12px;flex:1;padding:14px;font-size:15px;font-weight:600;transition:all .2s;box-shadow:0 4px 6px -1px #10b98133}.mock-btn-simulate:hover{opacity:.95;transform:translateY(-1px)}.mock-btn-cancel{color:#475569;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:12px;flex:1;padding:14px;font-size:15px;font-weight:600;transition:all .2s}.mock-btn-cancel:hover{background:#f8fafc}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.success-container{background:linear-gradient(135deg,#f5f7fa,#e4ecfb);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.success-card{text-align:center;background:#fff;border-radius:20px;width:100%;max-width:500px;padding:40px;box-shadow:0 10px 30px #0000001a}.success-icon{color:#fff;background:#22c55e;border-radius:50%;justify-content:center;align-items:center;width:90px;height:90px;margin:0 auto 20px;font-size:40px;font-weight:700;display:flex}.success-card h1{color:#16a34a;margin-bottom:10px}.success-message{color:#666;margin-bottom:30px;line-height:1.6}.payment-details{background:#f8fafc;border-radius:12px;margin-bottom:25px;padding:20px}.detail-row{border-bottom:1px solid #e5e7eb;justify-content:space-between;padding:12px 0;display:flex}.detail-row:last-child{border-bottom:none}.detail-row span:first-child{color:#555;font-weight:500}.detail-row span:last-child{color:#111;font-weight:600}.paid{color:#16a34a!important}.home-btn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:10px;width:100%;padding:14px;font-size:16px;transition:all .3s}*{box-sizing:border-box;margin:0;padding:0}.failure-container{background:linear-gradient(135deg,#fff5f5,#ffe5e5);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.failure-card{text-align:center;background:#fff;border-radius:20px;width:100%;max-width:500px;padding:40px;box-shadow:0 10px 30px #0000001a}.failure-icon{color:#fff;background:#ef4444;border-radius:50%;justify-content:center;align-items:center;width:90px;height:90px;margin:0 auto 20px;font-size:40px;font-weight:700;display:flex}.failure-card h1{color:#dc2626;margin-bottom:10px}.failure-message{color:#666;margin-bottom:30px;line-height:1.6}.failure-details{background:#f8fafc;border-radius:12px;margin-bottom:25px;padding:20px}.detail-row{justify-content:space-between;padding:12px 0;display:flex}.failed{color:#dc2626;font-weight:600}.button-group{gap:12px;display:flex}.retry-btn,.home-btn{cursor:pointer;border:none;border-radius:10px;flex:1;padding:14px;font-size:15px;transition:all .3s}.retry-btn{color:#fff;background:#ef4444}.retry-btn:hover{background:#dc2626}.home-btn{color:#fff;background:#2563eb}.home-btn:hover{background:#1d4ed8}@media (width<=500px){.button-group{flex-direction:column}}.sc-page{background:#f6f7fb;flex-direction:column;align-items:center;min-height:100vh;padding:30px 16px 60px;font-family:Inter,sans-serif;display:flex}.sc-header{text-align:center;margin-bottom:28px}.sc-header h1{color:#4f46e5;margin:0 0 4px;font-size:28px}.sc-header p{color:#6b7280;font-size:14px}.sc-card{background:#fff;border-radius:20px;width:100%;max-width:520px;padding:32px;box-shadow:0 8px 30px #00000012}.sc-section h3{color:#374151;margin:0 0 16px;font-size:15px;font-weight:600}.sc-detail-row{color:#374151;border-bottom:1px solid #f3f4f6;justify-content:space-between;align-items:center;padding:8px 0;font-size:14px;display:flex}.sc-detail-row:last-child{border-bottom:none}.sc-detail-row span:first-child{color:#6b7280;font-weight:500}.sc-detail-row span:last-child{text-align:right;font-weight:600}.sc-token{color:#9ca3af;word-break:break-all;font-size:12px}.sc-divider{border:none;border-top:1px solid #f3f4f6;margin:20px 0}.sc-pay-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;border-radius:14px;width:100%;margin-top:8px;padding:16px;font-size:17px;font-weight:600;transition:opacity .15s}.sc-pay-btn:hover:not(:disabled){opacity:.93}.sc-pay-btn:disabled{opacity:.6;cursor:not-allowed}.sc-secure{text-align:center;color:#6b7280;background:#f8fafc;border-radius:10px;margin-top:16px;padding:12px;font-size:13px}.sc-loader{color:#6b7280;flex-direction:column;align-items:center;gap:16px;margin-top:80px;display:flex}.sc-spinner{border:4px solid #e5e7eb;border-top-color:#4f46e5;border-radius:50%;width:44px;height:44px;animation:.8s linear infinite sc-spin}@keyframes sc-spin{to{transform:rotate(360deg)}}.sc-error-card{text-align:center;background:#fff;border-radius:20px;width:100%;max-width:440px;margin-top:40px;padding:40px 32px;box-shadow:0 8px 30px #00000012}.sc-error-icon{color:#ef4444;background:#fee2e2;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 20px;font-size:28px;font-weight:700;display:flex}.sc-error-card h2{color:#111827;margin-bottom:10px}.sc-error-card p{color:#6b7280;margin-bottom:6px;font-size:14px}.sc-token-hint{color:#d1d5db;word-break:break-all;font-size:11px}.mock-modal-overlay{z-index:1000;background:#0000008c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.mock-modal{background:#fff;border-radius:20px;width:100%;max-width:440px;padding:32px;box-shadow:0 20px 60px #0003}.mock-modal h2{color:#111827;margin-bottom:10px;font-size:20px}.mock-desc{color:#6b7280;margin-bottom:20px;font-size:13px}.mock-details{background:#f8fafc;border-radius:12px;margin-bottom:20px;padding:16px}.mock-details-row{justify-content:space-between;padding:6px 0;font-size:14px;display:flex}.mock-label{color:#6b7280}.mock-value{color:#111827;font-weight:600}.mock-options-title{color:#374151;margin-bottom:10px;font-size:13px;font-weight:600}.mock-options-group{gap:16px;margin-bottom:24px;display:flex}.mock-option-label{cursor:pointer;color:#374151;align-items:center;gap:8px;font-size:14px;display:flex}.mock-btn-group{gap:12px;display:flex}.mock-btn-cancel{color:#374151;cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:12px;flex:1;padding:13px;font-size:15px;font-weight:500}.mock-btn-simulate{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;border-radius:12px;flex:2;padding:13px;font-size:15px;font-weight:600}.mock-btn-simulate:hover{opacity:.93}@media (width<=540px){.sc-card{padding:24px 18px}.sc-pay-btn{font-size:15px}}