/* Styling for form fields (text, email, etc.) */
input[type="text"], input[type="url"], input[type="tel"], input[type="email"] {
    font-size: 12px;
    line-height: 21px;
    color: #444; /* Text color */
    border: 1px solid #ddd; /* Lighter border */
    width: 100%;
    max-width: 100%;
    height: 40px; /* Slightly larger height */
    padding: 10px 15px; /* More padding for better spacing */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Light shadow */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

/* When input fields are focused */
input[type="text"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="email"]:focus {
    border-color: #343090; /* Main color */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 8px rgba(52, 48, 144, 0.2); /* Blue shadow */
}

/* Styling for the submit button */
input[type="submit"] {
    font-family: var(--td_default_google_font_2);
    font-size: 13px;
    background-color: #343090; /* Main color */
    border-radius: 8px; /* Rounded corners */
    color: #fff;
    border: none;
    padding: 10px 20px; /* More padding for a better button size */
    font-weight: 500;
    cursor: pointer;
    -webkit-transition: background-color 0.4s;
    transition: background-color 0.4s;
}

/* Submit button hover effect */
input[type="submit"]:hover {
    background-color: #2e2a7d; /* Darker shade of the main color on hover */
}

/* Display the referral link with appropriate styling */
.referral-link {
    word-wrap: break-word;
    word-break: break-all;
    max-width: 100%;
    display: block;
    margin-bottom: 20px;
    text-decoration: none;
    color: #343090; /* Main color */
    font-weight: bold;
}

/* QR Code container styling */
.qr-code-container {
    text-align: center;
    margin-top: 20px;
}

/* QR code image styling */
.qr-code-container img {
    width: 200px; /* Fixed size for QR code */
    height: auto;
    border-radius: 8px; /* Rounded corners for the QR code */
}

/* Responsive design for smaller screens */
@media (max-width: 600px) {
    form {
        padding: 20px; /* Reduced padding for smaller screens */
    }

    input[type="submit"], input[type="text"] {
        font-size: 14px; /* Adjust font size on small screens */
    }
}