:root{--lightBlue: #6dc6d4;--purple: #764796;--hoverBlue: #5ab9c3;--textDark: #333;--textGray: #555;--blue: #212C56;--gradient: linear-gradient(90deg, var(--lightBlue), var(--purple))}.payment-section{display:flex;justify-content:center;padding:40px 20px;background-color:#f7f7f7;min-height:100vh;box-sizing:border-box}.payment-card{width:100%;max-width:1200px;background-color:#fff;border-radius:10px;box-shadow:0 4px 12px #00000014;padding:30px;box-sizing:border-box}.payment-card-content{display:flex;flex-direction:row;gap:30px;flex-wrap:wrap}.large-section{flex:2;min-width:300px}.small-section{flex:1;min-width:280px;background-color:#f9f9f9;padding:20px;border-radius:8px;box-shadow:inset 0 0 5px #0000000d}.small-section h3{font-size:20px}#event-image{width:100%;border-radius:5px;margin-bottom:10px}.candidate-info{display:flex;justify-content:space-between;margin-top:10px}.candidate-info span{font-size:14px}.candidate-value,.candidate-label{color:#555}.candidate-line{width:100%;height:2px;background-color:gray;margin:5px 0}.total-container{margin-top:10px;text-align:center;background-color:#fff;padding:15px;border-radius:5px;box-shadow:0 2px 1px #0000001a}.total-label{font-size:24px;font-weight:700}.total-value{font-size:32px;font-weight:700;color:#d9534f}.payment-button-container{display:flex;justify-content:center;align-items:center;margin-top:10px;text-align:center;flex-direction:column}.pay-button{width:100%;padding:15px;font-size:18px;font-weight:700;color:#fff;background:linear-gradient(90deg,var(--lightBlue),var(--purple));border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.large-section h2{font-size:24px;font-weight:700;color:#333;margin-bottom:15px;text-align:center;border-bottom:2px solid var(--purple);padding-bottom:10px}.payment-methods{margin-top:20px;padding:15px;border:1px solid #ccc;border-radius:8px;background-color:#f9f9f9}.payment-methods h3{font-size:14px;margin-bottom:15px;text-align:center}.tab-bar{display:flex;justify-content:center;margin-top:10px}.tab{padding:10px 20px;border:2px solid transparent;border-radius:5px;background-color:#fff;color:#333;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s;margin:0 5px;font-size:14px}.tab.active{border-color:var(--purple);background:linear-gradient(90deg,var(--lightBlue),var(--purple));color:#fff}.payment-section .container{margin-top:20px;padding:15px;border:1px solid #ccc;border-radius:8px;background-color:#f9f9f9}.payment-section .form-group{margin-top:15px;font-size:16px}.payment-section label{display:block;margin-bottom:5px}.payment-section select{font-size:16px;width:100%;padding:10px;border:1px solid #ccc;border-radius:4px}.custom-select{position:relative;width:100%;border:1px solid #ccc;border-radius:4px;cursor:pointer}.selected-option{padding:10px;display:flex;align-items:center}.options-container{display:none;position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;border-radius:4px;background-color:#fff;z-index:1000}.options-container.active{display:block}.option{padding:10px;display:flex;align-items:center;cursor:pointer}.option:hover{background-color:#f0f0f0}.flag{width:20px;height:15px;margin-right:10px}.operator-card{border:1px solid #ccc;border-radius:8px;padding:16px;margin:10px;display:inline-block;text-align:center;cursor:pointer;transition:transform .2s;width:150px;height:150px;position:relative}.operator-card img{max-width:90%;max-height:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.operator-card:hover{transform:scale(1.05)}.operator-card.selected{border:2px solid var(--purple);box-shadow:0 4px 8px #007bff33}.selected-icon{position:absolute;top:10px;right:10px;color:#007bff;font-size:24px}#form-country option{display:flex;align-items:center;padding:5px}#form-country img{width:20px;height:15px;margin-right:8px;vertical-align:middle}.payment-details{background:#f7f9fc;padding:20px;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin-bottom:20px}.payment-details h3{font-size:1.5em;margin-bottom:10px;color:#333}.payment-details p{font-size:1.2em;line-height:1.6;color:var(--blue);margin-bottom:10px}.payment-details ul,.payment-details ol{padding-left:20px;color:#444}.payment-details li{margin-bottom:10px;font-size:1.1em}.highlight{display:flex;justify-content:space-between;align-items:center;background:#f0f0f0;padding:10px;border-radius:5px;margin-bottom:15px;font-size:1.2em;font-weight:700;color:#333}#ussdCode{color:var(--purple)}.highlight .fa-clipboard{cursor:pointer;margin-left:10px}.styled-form-group{margin-bottom:15px}.styled-label{font-weight:700;margin-bottom:5px;display:block;color:#555}.styled-input{width:100%;padding:10px;border:1px solid #ddd;border-radius:5px;font-size:1em;background:#fff;transition:border .3s ease}.styled-input:focus{border-color:#28a745;outline:none}#initPaymentbtn{background:linear-gradient(45deg,#28a745,#218838);color:#fff;border:none;padding:10px 20px;font-size:1.1em;cursor:pointer;border-radius:5px;transition:background .3s ease}#initPaymentbtn:hover{background:linear-gradient(45deg,#218838,#1e7e34)}#countdown{font-size:20px;color:#28a745;text-align:center;margin:10px 0}#publicIdDisplay{display:flex;align-items:center;justify-content:space-between;background:#f9f9f9;padding:10px;border:1px solid #ddd;border-radius:5px;margin-top:10px}#publicIdDisplay button{background:none;border:none;cursor:pointer;color:#28a745}.sci-details{background:#f8f9fa;padding:20px;border-radius:8px;box-shadow:0 4px 12px #0000001a;margin-top:20px;text-align:center}.sci-details .info p{color:#333;line-height:1.6;margin-bottom:15px}.sci-details .info p:first-of-type{color:#e74c3c;font-weight:700}#continueButton{background:linear-gradient(90deg,var(--lightBlue),var(--purple));color:#fff;border:none;padding:10px 20px;font-size:1.5em;border-radius:5px;cursor:pointer;width:80%}.spinner{display:none;border:6px solid var(--lightBlue);border-top:6px solid var(--purple);border-radius:50%;justify-content:center;width:30px;height:30px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.payment-section{padding:20px 10px;align-items:stretch}.payment-card{width:100%;padding:20px 15px;margin:0;height:auto;box-shadow:none}.payment-card-content{flex-direction:column;gap:20px}.large-section,.small-section{width:100%;padding:10px 5px}.small-section{margin-top:20px;background-color:#f0f0f0;text-align:center}.operator-card{width:70px;height:70px;margin:8px}.operator-card img{max-width:70%;max-height:70%}.total-value{font-size:24px}.pay-button,#continueButton{font-size:16px;padding:12px}.tab{padding:8px 12px;font-size:13px}.highlight{font-size:1em;align-items:flex-start;gap:5px}.payment-section .form-group{margin-top:10px}}
