* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --purple: #2917A0;
     --purple-dark: #160a78;
     --purple-light: #eeeaff;
     --orange: #FE8527;
     --text: #12133e;
     --muted: #66678c;
     --border: #d9d2ff;
     --green: #10b981;
     --green-bg: #ecfdf5;
 }

 body {
     font-family: Arial, Helvetica, sans-serif;
     background: #fff;
     color: var(--text);
     overflow-x: hidden;
 }

 .page {
     position: relative;
     min-height: 100vh;
     overflow: hidden;
     background:
         radial-gradient(circle at 90% 35%, rgba(222, 218, 255, 0.25), transparent 25%),
         linear-gradient(180deg, #fff 0%, #fff 85%, #f8f7ff 100%);
 }

 /* =========================
           Decorative Background
        ========================= */

 .shape-left {
     position: absolute;
     left: -170px;
     top: -100px;
     width: 390px;
     height: 700px;
     background: linear-gradient(135deg, #130078, #3518d4);
     border-radius: 0 0 55% 0;
     transform: rotate(12deg);
     z-index: 0;
 }

 .shape-left::after {
     content: "";
     position: absolute;
     inset: 25px 35px 0 30px;
     border-right: 1px solid rgba(255, 255, 255, .2);
     border-radius: 50%;
 }

 .shape-right-top {
     position: absolute;
     right: -130px;
     top: -150px;
     width: 360px;
     height: 330px;
     background: linear-gradient(135deg, #ff8500, #ff5a00);
     border-radius: 0 0 0 70%;
     z-index: 0;
 }

 .shape-right-bottom {
     position: absolute;
     right: -180px;
     bottom: 50px;
     width: 360px;
     height: 680px;
     background: linear-gradient(135deg, #3015ce, #17008b);
     border-radius: 60% 0 0 0;
     transform: rotate(-5deg);
     z-index: 0;
 }

 .dots {
     position: absolute;
     width: 70px;
     height: 100px;
     background-image: radial-gradient(#9e91f3 3px, transparent 3px);
     background-size: 22px 22px;
     opacity: .75;
     z-index: 0;
 }

 .dots-left {
     top: 65px;
     left: 22px;
 }

 .dots-right {
     top: 175px;
     right: 70px;
 }

 .rings {
     position: absolute;
     right: -90px;
     top: 290px;
     width: 300px;
     height: 300px;
     border: 1px solid #e5e0ff;
     border-radius: 50%;
     opacity: .8;
 }

 .rings::before,
 .rings::after {
     content: "";
     position: absolute;
     border: 1px solid #e5e0ff;
     border-radius: 50%;
 }

 .rings::before {
     inset: 30px;
 }

 .rings::after {
     inset: 60px;
 }

 /* =========================
           Main Container
        ========================= */

 .container {
     width: min(1180px, calc(100% - 40px));
     margin: auto;
     position: relative;
     z-index: 2;
 }

 /* =========================
           Header
        ========================= */

 header {
     padding: 55px 0 0;
     text-align: center;
 }

 .logo {
     font-size: 46px;
     line-height: 1;
     font-weight: 800;
     display: inline-block;
 }

 .logo .nex {
     color: var(--purple);
 }

 .logo .ordr {
     color: var(--orange);
 }

 .tagline {
     margin-top: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 24px;
     font-size: 16px;
     color: #48486d;
     font-weight: 500;
 }

 .tagline::before,
 .tagline::after {
     content: "";
     width: 45px;
     height: 2px;
     background: var(--orange);
 }

 /* =========================
           Hero
        ========================= */

 .hero {
     text-align: center;
     padding-top: 50px;
 }

 .security-icon {
     width: 105px;
     height: 105px;
     margin: 0 auto 22px;
     border-radius: 50%;
     background: #fff;
     box-shadow:
         0 8px 30px rgba(48, 30, 150, .12),
         inset 0 0 0 1px #eee;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 48px;
 }

 .hero h1 {
     font-size: clamp(48px, 6vw, 78px);
     line-height: 1;
     margin-bottom: 18px;
     font-weight: 800;
 }

 .hero h1 .instant {
     color: var(--purple);
 }

 .hero h1 .payment {
     color: var(--orange);
 }

 .hero-subtitle {
     font-size: 25px;
     color: var(--muted);
     margin-bottom: 10px;
 }

 /* =========================
           Payment Card
        ========================= */

 .payment-card {
     width: min(500px, 100%);
     margin: auto;
     background: rgba(255, 255, 255, .95);
     border-radius: 34px;
     padding: 40px 50px;
     box-shadow: 0 15px 45px rgba(38, 22, 120, .10), 0 2px 5px rgba(0, 0, 0, .04);
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .field {
     text-align: left;
 }

 .field-label {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .number {
     width: 20px;
     height: 20px;
     flex: 0 0 20px;
     border-radius: 50%;
     background: var(--purple);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
 }

 .input,
 .select {
     width: 100%;
     height: 46px;
     border: 1px solid #6650e8;
     border-radius: 5px;
     background: #fff;
     padding: 0 10px;
     font-size: 14px;
     color: #777996;
     outline: none;
 }

 .input-textarea {
     width: 100%;
     height: 50px;
     border: 1px solid #6650e8;
     border-radius: 5px;
     background: #fff;
     padding: 10px 10px;
     font-size: 14px;
     color: #777996;
     outline: none;
 }

 .select {
     height: 46px;
     font-size: 14px;
     color: #161638;
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
 }

 .currency {
     display: flex;
     align-items: center;
     gap: 24px;
 }

 .flag {
     font-size: 26px;
 }

 .arrow {
     font-size: 35px;
     font-weight: bold;
 }

 .submit-btn {
     width: 100%;
     height: 46px;
     border: 0;
     border-radius: 5px;
     background: #2917A0;
     /* background: linear-gradient(100deg, #3110cf, #3b13d8); */
     color: #fff;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     box-shadow: 0 8px 15px rgba(48, 17, 190, .20);
     transition: .2s ease;
 }

 .submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 22px rgba(48, 17, 190, .28);
 }

 .submit-content {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
 }

 .lock {
     font-size: 20px;
 }

 .secure-text {
     text-align: center;
     margin-top: 26px;
     color: #68698d;
     font-size: 20px;
 }

 .secure-text strong {
     color: var(--purple);
 }

 .secure-text .orange {
     color: var(--orange);
 }


 .log-img img {
     height: 76px;
 }



 /* =========================
           Features
        ========================= */

 .features {
     width: min(1000px, 100%);
     margin: 30px auto 45px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
 }

 .feature {
     padding: 15px 30px;
     text-align: center;
     border-right: 1px solid #ddd9ef;
 }

 .feature:last-child {
     border-right: none;
 }

 .feature-icon {
     width: 65px;
     height: 65px;
     margin: 0 auto 14px;
     border-radius: 50%;
     background: #f0edff;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--purple);
     font-size: 32px;
 }

 .feature h3 {
     font-size: 16px;
     margin-bottom: 9px;
 }

 .feature p {
     font-size: 15px;
     line-height: 1.5;
     color: #555675;
 }

 /* =========================
           Payment Methods
        ========================= */

 .trusted {
     width: min(1050px, 100%);
     margin: auto auto 25px;
     border: 1px solid #e2def5;
     border-radius: 18px;
     background: rgba(255, 255, 255, .8);
     padding: 22px 35px 27px;
 }

 .trusted-title {
     text-align: center;
     color: #18176c;
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 20px;
 }

 .payment-methods {
     display: flex;
     align-items: center;
     justify-content: space-around;
     gap: 30px;
     flex-wrap: wrap;
 }

 .payment-method {
     font-weight: 700;
     font-size: 27px;
     white-space: nowrap;
 }

 .visa {
     color: #1857c8;
     font-style: italic;
 }

 .mastercard {
     width: 54px;
     height: 35px;
     position: relative;
 }

 .mastercard::before,
 .mastercard::after {
     content: "";
     position: absolute;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     top: 0;
 }

 .mastercard::before {
     left: 0;
     background: #eb001b;
 }

 .mastercard::after {
     right: 0;
     background: #f79e1b;
 }

 .amex {
     background: #1768bd;
     color: #fff;
     font-size: 14px;
     padding: 7px 8px;
     border-radius: 3px;
 }

 .rupay {
     font-style: italic;
 }

 .upi {
     color: #555;
     font-style: italic;
 }

 .gpay {
     color: #555;
 }

 .applepay {
     color: #111;
 }

 /* =========================
           Footer
        ========================= */

 footer {
     position: relative;
     z-index: 2;
     background: linear-gradient(110deg, #171071, #2515a0);
     color: white;
     padding: 25px 0;
     margin-top: 0;
 }

 .footer-inner {
     width: min(1180px, calc(100% - 40px));
     margin: auto;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     align-items: center;
     gap: 25px;
 }

 .footer-security,
 .footer-protection {
     display: flex;
     align-items: center;
     gap: 18px;
 }

 .footer-protection {
     justify-content: flex-end;
 }

 .footer-icon {
     width: 48px;
     height: 48px;
     border: 2px solid #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 23px;
 }

 .footer-text {
     font-size: 14px;
     line-height: 1.6;
 }

 .footer-center {
     text-align: center;
 }

 .footer-logo {
     font-size: 35px;
     font-weight: 800;
     margin-bottom: 10px;
 }

 .footer-logo .nex {
     color: white;
 }

 .footer-logo .ordr {
     color: var(--orange);
 }

 .copyright {
     font-size: 13px;
     opacity: .9;
 }

 /* =========================
           Responsive
        ========================= */

 @media (max-width: 1000px) {

     .logo {
         font-size: 60px;
     }

     .payment-card {
         padding: 40px;
     }

     .features {
         grid-template-columns: repeat(2, 1fr);
     }

     .feature:nth-child(2) {
         border-right: none;
     }

     .feature:nth-child(-n+2) {
         border-bottom: 1px solid #ddd9ef;
         padding-bottom: 25px;
     }

     .feature:nth-child(n+3) {
         padding-top: 25px;
     }

     .footer-inner {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .footer-security,
     .footer-protection {
         justify-content: center;
     }
 }







 /* Green Tick Icon */
 .success-icon-wrapper {
     width: 50px;
     height: 50px;
     margin: 10px auto;
     border-radius: 50%;
     background: var(--green-bg);
     border: 2px solid var(--green);
     box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     animation: pulse 2s infinite;
 }

 .success-icon {
     width: 20px;
     height: 20px;
     fill: none;
     stroke: var(--green);
     stroke-width: 3.5;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
     }

     70% {
         box-shadow: 0 0 0 18px rgba(16, 185, 129, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
     }
 }

 .hero h1 {
     font-size: clamp(26px, 5.5vw, 36px);
     line-height: 1.1;
     margin-bottom: 14px;
     font-weight: 800;
 }

 .hero h1 .thank {
     color: var(--purple);
 }

 .hero h1 .you {
     color: var(--orange);
 }

 .hero-subtitle {
     font-size: 16px;
     color: var(--text);
     margin-top: 10px;
     margin-bottom: 10px;
     font-weight: 700;
 }

 /* =========================
           Success Details Card
        ========================= */

 .thankyou-card {
     width: min(500px, 100%);
     margin: auto;
     background: rgba(255, 255, 255, .95);
     border-radius: 10px;
     padding: 40px 40px;
     box-shadow:
         0 15px 45px rgba(38, 22, 120, .10),
         0 2px 5px rgba(0, 0, 0, .04);
     text-align: left;
 }

 .order-summary {
     background: #f9f8ff;
     border: 1px solid var(--border);
     border-radius: 20px;
     padding: 24px;
     margin-bottom: 10px;
 }

 .summary-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 12px 0;
     border-bottom: 1px dashed #dcd8f3;
     font-size: 14px;
 }

 .summary-row:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }

 .summary-row:first-child {
     padding-top: 0;
 }

 .summary-label {
     color: var(--muted);
     font-weight: 500;
 }

 .summary-value {
     color: var(--text);
     font-weight: 700;
 }

 .summary-value.amount {
     color: var(--purple);
     font-size: 22px;
 }

 .status-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: var(--green-bg);
     color: var(--green);
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 15px;
     font-weight: 700;
 }

 /* Action Buttons */
 .action-buttons {
     display: flex;
     gap: 16px;
 }

 .action-buttons a {
     display: flex;
     background: #2917A0;
     border: 0;
     padding: 10px;
     height: 46px;
 }





 .btn {
     flex: 1;
     height: 64px;
     border-radius: 16px;
     font-size: 18px;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     transition: .2s ease;
     cursor: pointer;
 }

 .btn-primary {
     background: #2917A0;
     color: #fff;
     border: none;
     box-shadow: 0 8px 15px rgba(48, 17, 190, .20);
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 22px rgba(48, 17, 190, .28);
 }

 .btn-secondary {
     background: #fff;
     color: var(--purple);
     border: 2px solid var(--purple);
 }

 .btn-secondary:hover {
     background: var(--purple-light);
     transform: translateY(-2px);
 }

 /* =========================
           Features
        ========================= */

 .features {
     width: min(1000px, 100%);
     margin: 40px auto 45px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
 }

 .feature {
     padding: 15px 30px;
     text-align: center;
     border-right: 1px solid #ddd9ef;
 }

 .feature:last-child {
     border-right: none;
 }

 .feature-icon {
     width: 65px;
     height: 65px;
     margin: 0 auto 14px;
     border-radius: 50%;
     background: #f0edff;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--purple);
     font-size: 32px;
 }

 .feature h3 {
     font-size: 16px;
     margin-bottom: 9px;
 }

 .feature p {
     font-size: 15px;
     line-height: 1.5;
     color: #555675;
 }

 .toast-error {
     background-color: #bd362f;
 }

 .toast-success {
     background-color: #51a351;
 }


 @media (max-width: 767px) {

     .thankyou-card {
         padding: 15px 15px;
     }





 }


 @media (max-width: 650px) {

     .container {
         width: min(100% - 24px, 550px);
     }
     

     .shape-left {
         width: 190px;
         height: 420px;
         left: -125px;
     }

     .shape-right-top {
         width: 190px;
         height: 180px;
         right: -90px;
     }

     .shape-right-bottom {
         width: 190px;
         height: 420px;
         right: -115px;
     }

     .dots-left {
         left: 10px;
         top: 45px;
         transform: scale(.65);
     }

     .dots-right {
         right: 10px;
         top: 110px;
         transform: scale(.65);
     }

     .rings {
         width: 190px;
         height: 190px;
         right: -90px;
         top: 330px;
     }

     header {
         padding-top: 28px;
     }

     .logo {
         font-size: 42px;
     }

     .tagline {
         font-size: 13px;
         gap: 10px;
         margin-top: 12px;
     }

     .tagline::before,
     .tagline::after {
         width: 25px;
     }

     .hero {
         padding-top: 25px;
     }

     .security-icon {
         width: 50px;
         height: 50px;
         font-size: 32px;
         margin-bottom: 15px;
     }



     .hero-subtitle {
         font-size: 16px;
         line-height: 1.5;
         margin: 12px 20px 10px;
     }




     .features {
         grid-template-columns: repeat(2, 1fr);
         margin: 15px auto 25px;
     }

     .feature {
         padding: 12px 10px;
     }

     .feature-icon {
         width: 48px;
         height: 48px;
         font-size: 24px;
     }

     .feature h3 {
         font-size: 13px;
     }

     .feature p {
         font-size: 11px;
     }

     .trusted {
         padding: 16px 10px;
         border-radius: 13px;
     }

     .trusted-title {
         font-size: 13px;
         margin-bottom: 15px;
     }

     .payment-methods {
         gap: 14px;
     }

     .payment-method {
         font-size: 16px;
     }

     .amex {
         font-size: 9px;
         padding: 5px;
     }

     .mastercard {
         transform: scale(.7);
     }

     footer {
         padding: 20px 0;
     }

     .footer-inner {
         width: calc(100% - 25px);
         gap: 15px;
     }

     .footer-security,
     .footer-protection {
         font-size: 11px;
     }

     .footer-icon {
         width: 38px;
         height: 38px;
         font-size: 16px;
     }

     .footer-logo {
         font-size: 27px;
     }

     .copyright {
         font-size: 11px;
     }
 }

 @media (max-width: 390px) {

     .hero h1 {
         font-size: 37px;
     }

     .hero-subtitle {
         font-size: 14px;
     }

     .payment-card {
         padding: 22px 14px;
     }

     .features {
         gap: 0;
     }

     .feature {
         padding-left: 6px;
         padding-right: 6px;
     }

     .payment-methods {
         gap: 15px 30px;
     }

     .payment-method {
         font-size: 14px;
     }
 }

 /* =========================
           Responsive
        ========================= */

 @media (max-width: 1000px) {
     .logo {
         font-size: 60px;
     }

     .thankyou-card {
         padding: 32px;
     }

     .features {
         grid-template-columns: repeat(2, 1fr);
     }

     .feature:nth-child(2) {
         border-right: none;
     }

     .feature:nth-child(-n+2) {
         border-bottom: 1px solid #ddd9ef;
         padding-bottom: 25px;
     }

     .feature:nth-child(n+3) {
         padding-top: 25px;
     }

     .footer-inner {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .footer-security,
     .footer-protection {
         justify-content: center;
     }
 }

 @media (max-width: 650px) {
     .container {
         width: min(100% - 24px, 550px);
     }

     .shape-left {
         width: 190px;
         height: 420px;
         left: -125px;
         display: none;
     }

     .shape-right-top {
         width: 190px;
         height: 180px;
         right: -90px;
     }

     .shape-right-bottom {
         width: 190px;
         height: 420px;
         right: -115px;
     }

     .dots-left {
         left: 10px;
         top: 45px;
         transform: scale(.65);
     }

     .dots-right {
         right: 10px;
         top: 110px;
         transform: scale(.65);
     }

     .rings {
         width: 190px;
         height: 190px;
         right: -90px;
         top: 330px;
     }

     header {
         padding-top: 28px;
     }

     .logo {
         font-size: 42px;
     }

     .tagline {
         font-size: 13px;
         gap: 10px;
         margin-top: 12px;
     }

     .tagline::before,
     .tagline::after {
         width: 25px;
     }

     .hero {
         padding-top: 25px;
     }

     .success-icon-wrapper {
         width: 50px;
         height: 50px;
         margin-bottom: 10px;
         margin-top: 10px;
     }

     .hero h1 {
         font-size: clamp(26px, 5vw, 36px);
     }

     .hero-subtitle {
         font-size: 16px;
         margin-bottom: 10px;
     }

     .thankyou-card {
         padding: 22px 18px;
         border-radius: 23px;
     }

     .summary-row {
         font-size: 15px;
     }

     .summary-value.amount {
         font-size: 18px;
     }

     .action-buttons {
         flex-direction: column;
         gap: 12px;
     }

     .btn {
         height: 54px;
         font-size: 16px;
     }

     .features {
         grid-template-columns: repeat(2, 1fr);
         margin: 25px auto;
     }

     .feature {
         padding: 12px 10px;
     }

     .feature-icon {
         width: 48px;
         height: 48px;
         font-size: 24px;
     }

     .feature h3 {
         font-size: 13px;
     }

     .feature p {
         font-size: 11px;
     }

     footer {
         padding: 20px 0;
     }

     .footer-inner {
         width: calc(100% - 25px);
         gap: 15px;
     }

     .footer-security,
     .footer-protection {
         font-size: 11px;
     }

     .footer-icon {
         width: 38px;
         height: 38px;
         font-size: 16px;
     }

     .footer-logo {
         font-size: 27px;
     }

     .copyright {
         font-size: 11px;
     }
     .hero {
     text-align: center;
     padding-top: 10px;
 }
 }