/* Modal Base Styles */
    .modalOverlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        
        z-index: 1000;
        overflow-y: scroll;
        
    }
    
    .modalContainer {
        background-color: #0088cc;
        color: #ffffff;
        width: 100%;
        height: fit-content;
        max-width: 450px;
        border-radius: 8px;
        /* overflow: hidden; */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    /* Header Styles */
    .modalHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        background-color: #2C3E50;
        color: white;
    }
    
    .modalHeader h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
    }
    
    .closeButton {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    
    /* Form Styles */
    .form {
        padding: 16px 20px;
    }
    
    .selectionRow {
        display: flex;
        gap: 16px;
        margin-bottom: 20px;
    }
    
    .selectGroup {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .select {
        background-color: #2b3b4d;
        color: #ffffff;
        border: 1px solid #4a5a6a;
        border-radius: 4px;
        padding: 10px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
        cursor: pointer;
    }
    
    /* QR Code Section */
    .qrSection {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
        width: 13rem;
        height: auto;
        margin: auto;
    }
    
    .qrCode {
        background-color: white;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 8px;
    }
    
    .qrImage {
        display: block;
        max-width: 100%;
    }
    
    .bankDetailsLabel {
        margin: 0;
        font-size: 14px;
    }
    
    /* Input Styles */
    .inputGroup {
        margin-bottom: 16px;
    }
    
    .inputGroup label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
    }
    
    .inputWithCopy {
        display: flex;
        align-items: center;
    }
    
    .inputWithCopy input {
        flex: 1;
        background-color: white;
        color: #ffffff;
        border: 1px solid #4a5a6a;
        border-radius: 4px 0 0 4px;
        padding: 12px;
    }
    
    .copyButton {
        background-color: #1e2a38;
        border: 1px solid #4a5a6a;
        border-left: none;
        color: #ffffff;
        padding: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 4px 4px 0;
    }
    
    .fullWidthInput {
        width: 100%;
        background-color: white;
        color: black;
        border: 1px solid #4a5a6a;
        border-radius: 4px;
        padding: 10px;
    }
    
    /* Button Styles */
    .paymentButtons {
        display: flex;
        gap: 10px;
        margin-bottom: 16px;
    }
    
    .paymentButton {
        flex: 1;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 12px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s;
    }
    
    .paymentButton:hover {
        background-color: #45a049;
    }
    
    .proceedButton {
        width: 100%;
        background-color: #2b3b4d;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 12px;
        cursor: pointer;
        font-size: 14px;
        margin-bottom: 16px;
        transition: background-color 0.2s;
    }
    
    .proceedButton:hover {
        background-color: #243241;;
    }
    
    .submitButton {
        width: 100%;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 12px;
        cursor: pointer;
        font-size: 14px;
        margin-top: 16px;
        transition: background-color 0.2s;
    }
    
    .submitButton:hover {
        background-color: #45a049;
    }
    
    /* Upload Section */
    .uploadSection {
        border: 2px dashed #4a5a6a;
        border-radius: 4px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-top: 16px;
    }
    
    .uploadIcon {
        color: #0088cc;
        margin-bottom: 8px;
    }
    
    .uploadSection p {
        margin: 0;
        color: #ffffff;
    }
    
    /* Warning Message */
    .warningMessage {
        margin-top: 16px;
        padding: 12px;
        background-color:rgb(235, 235, 235);
        border-radius: 4px;
        text-align: center;
    }
    
    .warningMessage p {
        margin: 0;
        font-size: 14px;
        color: #fe3131;
    }
    
    .readOnlyText {
        flex: 1;
        background-color: #2b3b4d;
        color: #ffffff;
        border: 1px solid #4a5a6a;
        border-radius: 4px 0 0 4px;
        padding: 10px;
        cursor: not-allowed;
      }
      
      .copiedMessage {
        color: #4caf50;
        font-size: 12px;
        margin-top: 4px;
      }
      
      .paymentButton.selected {
        background-color: #45a049;
        border: 2px solid #ffffff;
      }