/* CSS Variables for colors */
    :root {
        --nayapay-dark: #401b2f; /* Dark Maroon/Purple */
        --nayapay-dark-hover: #5d2543;
        --error-red: #dc2626; /* Red-600 */
        --gray-text: #4b5563; /* Gray-600 */
        --gray-border: #1E141E; /* Gray-300 */
        --black-border : #1E141E;
        --blue-link: #2563eb; /* Blue-600 */
        --indigo-focus: #4f46e5;
        --text-color : #1E141E;
        --nayapay-red : #cc3c38;
        --tooltip-bg: #FFC4B1;
        --modal-bg: white;
        --tooltip-text: #381D2A;

          /* Font Families */
        --font-family-dm: "DM Sans", "Lato", sans-serif;
        --font-family-fb: "FORZA-Book", "DM Sans", "Lato-B", sans-serif;
        --font-family-fm: "FORZA-M", "DM Sans", "Lato-M", sans-serif;
        --font-family-lato: "Lato", sans-serif;
    }
    

    /* --- MODAL CONTAINER (.nayapay-modal) --- */
    .nayapay-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50000;
        display: none;
        align-items: flex-start; /* Default alignment for mobile */
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.7);
        padding: 1rem;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    
    .nayapay-modal.active {
        display: flex !important;
        pointer-events: auto;
    }

    /* Responsive centering for tablet/desktop */
    @media (min-width: 640px) {
        .nayapay-modal {
            align-items: center;
        }
    }
    
    .modal-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    /* --- MODAL CONTENT (.modal-content) --- */
    .modal-content {
        background-color: var(--modal-bg);
        padding: 1.5rem;
        border-radius: 25px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        width: 100%;
        max-width: 25rem;
        position: relative;
        transform: translateY(1rem); /* Initial state for mobile slide-up */
        transition: transform 0.3s;
    }
    
    .nayapay-modal.active .modal-content {
        transform: translateY(0);
    }

    /* --- TITLE AND CLOSE BUTTON --- */
    .modal-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 2rem;
        text-align: center;
        color: #000; /* Gray-900 */
    }
    
    .close-modal {
        position: absolute;
        top: 1rem;
        right: 1rem;
        border: none;
        background: none !important;
        padding: 0 !important;
        appearance: none !important;
        box-shadow: none !important;
        width:20px;
    }
    .close-modal:hover {
        color: #1f2937; /* Gray-900 */
    }

    /* --- FIELDSET/LEGEND STYLES (Floating Label) --- */
    .form-group {
        margin-bottom: 1.5rem;
    }
    .form-group:nth-of-type(2) {
        margin-bottom: 2rem; /* mb-8 for the Quick Code group */
    }
    
    .form-group fieldset.input-fieldset {
        border: 1px solid var(--black-border);
        border-radius: 0.6rem;
        padding: 0.3rem 1rem 0.5rem 1rem;
        margin-top: 0.25rem;
        transition: border-color 0.15s;
    }

    .form-group legend {
        padding: 0 0.5rem;
        margin-left: -0.5rem; 
        font-size: 0.75rem;
        font-weight: 550;
        color: var(--text-color);
        background-color: white; 
        transition: color 0.15s;
        position: relative;
    }

    #nayapay-modal{
        font-family: var(--font-family-dm) !important;
    }

    
    
    .form-group fieldset input {
        border: none;
        padding: 0.5rem 0;
        height: auto;
        outline: none;
        box-shadow: none;
        width: 100%;
        color: #1f2937; /* Gray-800 */
    }

    /* --- NayaPay ID Specifics --- */
    .input-group {
        display: flex;
        align-items: center;
    }
    #nayapay_id {
        flex-grow: 1;
    }
    .input-group .suffix {
        display: flex;
        align-items: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        color: var(--text-color);
        font-size: 0.875rem; 
        background-color: transparent;
    }
    
    /* --- Errors and Links --- */
    .error-msg {
        color: var(--error-red);
        font-size: 0.75rem;
        margin-top: 0.25rem;
        margin-left: 0rem;
        font-weight: 600;
    }
    .help-link {
        margin-top: 0.5rem;
        font-size: 0.75rem;
        position: relative;
        display: inline-block;
    }
    .help-link a {
        color: var(--blue-link);
        transition: color 0.15s;
        text-decoration: none;
    }
    .help-link a:hover {
        color: #005CCD;
    }
    
   .help-link {
        position: relative;
        display: inline-block;
    }

    /* Tooltip box */
    .help-tooltip {
        position: absolute;
        bottom: 150%;
        right: 0;
        background-color: var(--tooltip-bg);
        color: var(--tooltip-text);
        padding: 0.625rem 0.875rem;
        border-radius: 0.5rem;
        font-size: 12px;
        line-height: 1.25;
        width: 119%;
        text-align: left;
        z-index: 10;
        font-weight: 700;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    /* Show tooltip on hover */
    .help-link:hover .help-tooltip {
        opacity: 1;
        visibility: visible;
    }

    /* Tooltip arrow */
    .help-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        right: 1rem;
        border-width: 6px;
        border-style: solid;
        border-color: var(--tooltip-bg) transparent transparent transparent;
    }

    /* --- Submit Button --- */
    .submit-btn {
        width: 100%;
        padding: 0.75rem 0;
        background-color: var(--nayapay-dark);
        color: white;
        font-weight: 600;
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        border: none;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    .submit-btn:hover {
        background-color: var(--nayapay-dark-hover);
    }
    .submit-btn:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.5); 
    }

    /* Styling for the modal trigger button (for testing) */
    #open-modal-btn {
        padding: 0.75rem 1rem;
        background-color: #4f46e5;
        color: white;
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        border: none;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    #open-modal-btn:hover {
            background-color: #4338ca;
    }


    /* Shake animation */
    @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
    }

    .field-error {
    animation: shake 0.3s ease;
    border-color: #ed1c24 !important;
    }

    #nayapay-loader-modal{
        display: none;
    }
/* --- LOADER IMAGE --- */

    .loader-modal-content {
        padding: 2rem;
        text-align: center;
        position: relative;
        transform: translateY(1rem); /* Slight slide-up effect */
        transition: transform 0.3s ease;
    }

    .loader-image-container {
        width: 30%; /* Fixed size for the image container */
        height: auto;
        margin: 0 auto 1.5rem auto; /* Center and space below */
        display: flex; /* For centering the image if it's smaller */
        align-items: center;
        justify-content: center;
        border-radius: 50%; /* Circular container */
        overflow: hidden; /* Clip image if it's too large for the circle */
    }
    .loader-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Ensure the image fits within the circle */
    }

    /* --- TEXT ELEMENTS --- */
    .loader-message {
        font-size: 1.125rem; /* ~18px */
        color: var(--nayapay-dark-text);
        margin-bottom: 0px!important;
        line-height: 1.5;
        font-weight: 500;
    }

    .loader-amount {
        font-size: 2rem; /* Much larger for the amount */
        line-height: 2rem;
        font-weight: 700;
        color: var(--nayapay-dark-text);
        margin:0;
    }

    .loader-to{
        margin: 0px;
        color: #989898;
    }

    .loader-merchant{
        margin: 0px;
    }

    .loader-timer {
        font-size: 1rem;
        color: var(--nayapay-red);
        font-weight: 600;
        margin-top: 0.5rem;
    }

    .nayapay-step{
        display: none;
    }

    .nayapay-step.active{
        display: block;
    }


    .message-heading{
        color: var(--text-color);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: var(--font-family-dm);
        font-size: 25px;
        font-style: normal;
        font-weight: 700;
        line-height: 50px; /* 132% */
        letter-spacing: -1.5px;
    }
    .message-text{
        color: #000;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: var(--font-family-dm);
        font-size: 22px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
    }

    #nayapayid-error-container,#quickcode-error-container{
        margin-top: 0px!important;
    }

    #nayapay-btn.disabled,#nayapay-modal-submit.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    }

    #nayapay-modal-submit{
        display: block;
        margin: 0 auto;
        width: 40%;
    }

    .nayapay-btn-wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mt-1{
        margin-top:10px;
    }

    @media (max-width: 768px) {
      .close-modal svg {
        width: 20px!important;
        height: 20px !important;
    }
}