.secondary-auth-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-top: 1rem;
        }
        .link-btn {
            background: none;
            border: none;
            color: var(--primary-color);
            font-weight: 500;
            padding: 0.5rem;
            cursor: pointer;
            font-size: 0.9rem;
        }
        .link-btn:hover {
            text-decoration: underline;
        }
        .link-btn:disabled {
            color: var(--text-secondary);
            cursor: not-allowed;
            text-decoration: none;
        }
        /* Added style for the new resend text */
        .resend-text {
            margin-top: 1.5rem;
            font-size: 0.9rem;
            color: var(--text-secondary);
            text-align: center;
        }
        .resend-text a {
            color: var(--primary-color);
            text-decoration: none;
            cursor: pointer;
            font-weight: 500;
        }
        .resend-text a:hover {
            text-decoration: underline;
        }
        /* Style for the link when it's disabled */
        .resend-text a.disabled {
            color: var(--text-secondary);
            cursor: not-allowed;
            text-decoration: none;
        }
        .otp-container {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 1rem;
        }

        /* Styles for intl-tel-input */
        .iti {
            width: 100%; /* Make the plugin take full width */
        }
        .iti__flag-container {
            border-radius: 8px 0 0 8px;
        }
        /* Style the input field itself, which is #phone-number */
        .iti input[type="tel"] {
            width: 100%;
            height: 50px; /* Match other form-group inputs */
            padding: 0.75rem 1rem;
            padding-left: 58px; /* Adjust for flag dropdown */
            font-size: 1rem;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background-color: var(--background-color);
            color: var(--text-primary);
            transition: border-color 0.2s;
            box-sizing: border-box; /* Ensure padding doesn't break layout */
        }
        .iti input[type="tel"]:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px var(--primary-focus);
        }
        .phone-number {
            color: blue;
        }
        /* Override form-group styles for the phone input */
        #phone-form .form-group {
            position: relative;
            margin-bottom: 1.5rem;
        }
        /* Hide the original label, as the plugin isn't compatible with the float-label effect */
        #phone-form .form-group label[for="phone-number"] {
            display: none;
        }
        /* Add a placeholder back to the input */
        #phone-number::placeholder {
            color: var(--text-secondary);
            opacity: 1;
        }